@hopper-ui/components 1.2.0 → 1.3.0

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 (193) hide show
  1. package/CHANGELOG.md +13 -0
  2. package/dist/Avatar/src/AnonymousAvatar.css +10 -10
  3. package/dist/Avatar/src/AnonymousAvatar.js +2 -2
  4. package/dist/Avatar/src/Avatar.css +37 -37
  5. package/dist/Avatar/src/Avatar.js +3 -3
  6. package/dist/Avatar/src/DeletedAvatar.css +10 -10
  7. package/dist/Avatar/src/DeletedAvatar.js +2 -2
  8. package/dist/Avatar/src/RichIconAvatarImage.css +10 -10
  9. package/dist/Avatar/src/RichIconAvatarImage.js +1 -1
  10. package/dist/Avatar/src/index.css +37 -37
  11. package/dist/Avatar/src/index.js +5 -5
  12. package/dist/Badge/src/Badge.css +10 -10
  13. package/dist/Badge/src/Badge.js +2 -2
  14. package/dist/Badge/src/index.css +10 -10
  15. package/dist/Badge/src/index.js +2 -2
  16. package/dist/Divider/src/Divider.css +2 -2
  17. package/dist/Divider/src/Divider.js +1 -1
  18. package/dist/Divider/src/index.css +2 -2
  19. package/dist/Divider/src/index.js +1 -1
  20. package/dist/ErrorMessage/src/ErrorMessage.css +11 -11
  21. package/dist/ErrorMessage/src/ErrorMessage.js +2 -2
  22. package/dist/ErrorMessage/src/index.css +11 -11
  23. package/dist/ErrorMessage/src/index.js +2 -2
  24. package/dist/Form/src/Form.css +862 -605
  25. package/dist/Form/src/Form.js +67 -65
  26. package/dist/Form/src/index.css +862 -605
  27. package/dist/Form/src/index.js +67 -65
  28. package/dist/HelperMessage/src/HelperMessage.css +11 -11
  29. package/dist/HelperMessage/src/HelperMessage.js +2 -2
  30. package/dist/HelperMessage/src/index.css +11 -11
  31. package/dist/HelperMessage/src/index.js +2 -2
  32. package/dist/IconList/src/IconList.css +1 -1
  33. package/dist/IconList/src/IconList.js +1 -1
  34. package/dist/IconList/src/index.css +1 -1
  35. package/dist/IconList/src/index.js +1 -1
  36. package/dist/Link/src/Link.css +31 -31
  37. package/dist/Link/src/Link.js +2 -2
  38. package/dist/Link/src/index.css +31 -31
  39. package/dist/Link/src/index.js +2 -2
  40. package/dist/ListBox/src/ListBox.css +226 -198
  41. package/dist/ListBox/src/ListBox.js +12 -13
  42. package/dist/ListBox/src/ListBoxItem.css +208 -182
  43. package/dist/ListBox/src/ListBoxItem.js +10 -10
  44. package/dist/ListBox/src/ListBoxItemSkeleton.css +7 -7
  45. package/dist/ListBox/src/ListBoxItemSkeleton.js +1 -1
  46. package/dist/ListBox/src/index.css +226 -198
  47. package/dist/ListBox/src/index.js +12 -13
  48. package/dist/Select/src/Select.css +4368 -0
  49. package/dist/Select/src/Select.d.ts +93 -0
  50. package/dist/Select/src/Select.js +116 -0
  51. package/dist/Select/src/SelectContext.d.ts +16 -0
  52. package/dist/Select/src/SelectContext.js +2 -0
  53. package/dist/Select/src/SelectValue.css +443 -0
  54. package/dist/Select/src/SelectValue.d.ts +31 -0
  55. package/dist/Select/src/SelectValue.js +19 -0
  56. package/dist/Select/src/index.css +4368 -0
  57. package/dist/Select/src/index.d.ts +13 -0
  58. package/dist/Select/src/index.js +116 -0
  59. package/dist/Spinner/src/Spinner.css +19 -19
  60. package/dist/Spinner/src/Spinner.js +2 -2
  61. package/dist/Spinner/src/index.css +19 -19
  62. package/dist/Spinner/src/index.js +2 -2
  63. package/dist/buttons/src/Button.css +94 -94
  64. package/dist/buttons/src/Button.js +5 -5
  65. package/dist/buttons/src/ButtonGroup.css +11 -11
  66. package/dist/buttons/src/ButtonGroup.js +1 -1
  67. package/dist/buttons/src/ClearButton.css +70 -70
  68. package/dist/buttons/src/ClearButton.js +3 -3
  69. package/dist/buttons/src/EmbeddedButton.css +70 -70
  70. package/dist/buttons/src/EmbeddedButton.js +1 -1
  71. package/dist/buttons/src/index.css +175 -175
  72. package/dist/buttons/src/index.js +10 -10
  73. package/dist/checkbox/src/Checkbox.css +31 -31
  74. package/dist/checkbox/src/Checkbox.js +2 -2
  75. package/dist/checkbox/src/CheckboxField.css +15 -15
  76. package/dist/checkbox/src/CheckboxField.js +1 -1
  77. package/dist/checkbox/src/CheckboxGroup.css +60 -60
  78. package/dist/checkbox/src/CheckboxGroup.js +3 -3
  79. package/dist/checkbox/src/index.css +60 -60
  80. package/dist/checkbox/src/index.js +6 -6
  81. package/dist/{chunk-CKKLDA5J.js → chunk-3573Q6QG.js} +2 -2
  82. package/dist/{chunk-SZSQZ4C7.js → chunk-3ZRCYKIV.js} +2 -2
  83. package/dist/{chunk-VISBUD2K.js → chunk-4RMADICI.js} +4 -4
  84. package/dist/{chunk-W474WFOP.js → chunk-6C5RI4RT.js} +9 -11
  85. package/dist/{chunk-L5KI4ZCL.js → chunk-6H5DRQZH.js} +2 -2
  86. package/dist/{chunk-VYKPDMP3.js → chunk-7L5MCX2A.js} +2 -2
  87. package/dist/{chunk-COIGQP33.js → chunk-AZJME7JV.js} +3 -3
  88. package/dist/{chunk-PQXVL3YJ.js → chunk-BODCT27J.js} +1 -1
  89. package/dist/{chunk-XUJNQNB3.js → chunk-BQITTESM.js} +1 -1
  90. package/dist/{chunk-T6MAOVLH.js → chunk-BRU54ERL.js} +2 -2
  91. package/dist/{chunk-2XO5CZBO.js → chunk-BTHPJL3A.js} +2 -2
  92. package/dist/{chunk-CEUQHDEQ.js → chunk-C72PRNOP.js} +1 -1
  93. package/dist/{chunk-IUOLKHYQ.js → chunk-CAHZCRTK.js} +1 -1
  94. package/dist/{chunk-TG623HPA.js → chunk-CU36N5JQ.js} +4 -4
  95. package/dist/{chunk-S5CK32KM.js → chunk-CWX45XWS.js} +3 -3
  96. package/dist/{chunk-XT2MZWEV.js → chunk-D5PBETXF.js} +1 -1
  97. package/dist/{chunk-5IB23E3O.js → chunk-D7DIUGRI.js} +1 -1
  98. package/dist/{chunk-V5Q245NH.js → chunk-DFVORYEU.js} +2 -2
  99. package/dist/{chunk-354H4FNA.js → chunk-DLZGJBL7.js} +1 -1
  100. package/dist/{chunk-X253QCYD.js → chunk-DXEWBV4C.js} +2 -2
  101. package/dist/chunk-EHXOXTDN.js +29 -0
  102. package/dist/{chunk-FOD7XUSJ.js → chunk-FOXOPL2E.js} +5 -5
  103. package/dist/{chunk-HCRWIU7V.js → chunk-GRJ3VKHY.js} +5 -5
  104. package/dist/{chunk-RWAVMW7T.js → chunk-HIDHDS2L.js} +2 -2
  105. package/dist/{chunk-IXWYHDGU.js → chunk-JIRLWUDP.js} +3 -3
  106. package/dist/{chunk-M3K4IYX6.js → chunk-JQMXGSAE.js} +1 -1
  107. package/dist/{chunk-MJHMFANK.js → chunk-LFN43ROH.js} +2 -2
  108. package/dist/{chunk-FA4IXLWZ.js → chunk-LYPR2YMY.js} +5 -5
  109. package/dist/{chunk-JJ4EFTES.js → chunk-O2ZMTKCT.js} +1 -1
  110. package/dist/{chunk-FOKTHCFK.js → chunk-OLS7K6PO.js} +2 -2
  111. package/dist/{chunk-W2BQZEW6.js → chunk-QQI3KNHZ.js} +6 -7
  112. package/dist/{chunk-TCOZUCPD.js → chunk-SCXYAGZI.js} +271 -46
  113. package/dist/{chunk-PFABSIDM.js → chunk-SKEMSZ63.js} +2 -2
  114. package/dist/{chunk-EJUIYBAC.js → chunk-SSDFINDD.js} +2 -2
  115. package/dist/chunk-T24MBA34.js +7 -0
  116. package/dist/{chunk-RQKU3XDG.js → chunk-T37HTUEU.js} +1 -1
  117. package/dist/{chunk-UT4CSUUM.js → chunk-T3CLGQI6.js} +1 -1
  118. package/dist/{chunk-BKCMCC7V.js → chunk-T742LIIS.js} +1 -1
  119. package/dist/{chunk-F4H76S4H.js → chunk-TFVDF4YH.js} +4 -2
  120. package/dist/{chunk-U56LEEEA.js → chunk-TOWSC7FO.js} +4 -4
  121. package/dist/{chunk-J44DIB5J.js → chunk-TTY5HDLL.js} +2 -2
  122. package/dist/chunk-YB7IYQW4.js +118 -0
  123. package/dist/{chunk-Q63YLWI6.js → chunk-ZHOQYYHY.js} +1 -1
  124. package/dist/i18n/src/index.js +1 -1
  125. package/dist/i18n/src/useLocalizedString.js +1 -1
  126. package/dist/index.css +862 -605
  127. package/dist/index.d.ts +6 -2
  128. package/dist/index.js +67 -65
  129. package/dist/inputs/src/InputGroup.css +14 -16
  130. package/dist/inputs/src/InputGroup.js +1 -1
  131. package/dist/inputs/src/NumberField.css +64 -65
  132. package/dist/inputs/src/NumberField.js +8 -8
  133. package/dist/inputs/src/PasswordField.css +218 -219
  134. package/dist/inputs/src/PasswordField.js +10 -10
  135. package/dist/inputs/src/SearchField.css +224 -225
  136. package/dist/inputs/src/SearchField.js +12 -12
  137. package/dist/inputs/src/TextArea.css +58 -59
  138. package/dist/inputs/src/TextArea.js +9 -9
  139. package/dist/inputs/src/TextField.css +219 -220
  140. package/dist/inputs/src/TextField.js +11 -11
  141. package/dist/inputs/src/index.css +271 -268
  142. package/dist/inputs/src/index.js +18 -18
  143. package/dist/overlays/Popover/src/Popover.css +862 -605
  144. package/dist/overlays/Popover/src/Popover.d.ts +26 -3
  145. package/dist/overlays/Popover/src/Popover.js +67 -65
  146. package/dist/overlays/Popover/src/PopoverContext.d.ts +3 -0
  147. package/dist/overlays/Popover/src/index.css +862 -605
  148. package/dist/overlays/Popover/src/index.d.ts +4 -1
  149. package/dist/overlays/Popover/src/index.js +67 -65
  150. package/dist/radio/src/Radio.css +31 -31
  151. package/dist/radio/src/Radio.js +2 -2
  152. package/dist/radio/src/RadioField.css +15 -15
  153. package/dist/radio/src/RadioField.js +2 -2
  154. package/dist/radio/src/RadioGroup.css +60 -60
  155. package/dist/radio/src/RadioGroup.js +2 -2
  156. package/dist/radio/src/index.css +60 -60
  157. package/dist/radio/src/index.js +6 -6
  158. package/dist/switch/src/Switch.css +25 -25
  159. package/dist/switch/src/Switch.js +2 -2
  160. package/dist/switch/src/SwitchField.css +15 -15
  161. package/dist/switch/src/SwitchField.js +2 -2
  162. package/dist/switch/src/index.css +31 -31
  163. package/dist/switch/src/index.js +4 -4
  164. package/dist/tag/src/Tag.css +301 -301
  165. package/dist/tag/src/Tag.js +6 -6
  166. package/dist/tag/src/TagGroup.css +22 -22
  167. package/dist/tag/src/TagGroup.js +2 -2
  168. package/dist/tag/src/index.css +314 -314
  169. package/dist/tag/src/index.js +9 -9
  170. package/dist/typography/Heading/src/Heading.css +9 -9
  171. package/dist/typography/Heading/src/Heading.js +1 -1
  172. package/dist/typography/Heading/src/index.css +9 -9
  173. package/dist/typography/Heading/src/index.js +1 -1
  174. package/dist/typography/Label/src/Label.css +3 -3
  175. package/dist/typography/Label/src/Label.js +2 -2
  176. package/dist/typography/Label/src/index.css +3 -3
  177. package/dist/typography/Label/src/index.js +2 -2
  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.d.ts +1 -0
  187. package/dist/utils/src/index.js +3 -2
  188. package/dist/utils/src/useIsOverflow.d.ts +5 -0
  189. package/dist/utils/src/useIsOverflow.js +2 -0
  190. package/package.json +7 -7
  191. package/dist/ListBox/src/useLoadOnScroll.d.ts +0 -16
  192. package/dist/ListBox/src/useLoadOnScroll.js +0 -2
  193. package/dist/chunk-JTNMFPM4.js +0 -41
@@ -0,0 +1,4368 @@
1
+ /* css-module:/home/runner/work/wl-hopper/wl-hopper/packages/components/src/typography/OverlineText/src/OverlineText.module.css/#css-module-data */
2
+ :where(.OverlineText-module__hop-OverlineText___SbFVm) {
3
+ --hop-OverlineText-font-family: var(--hop-overline-font-family);
4
+ --hop-OverlineText-font-size: var(--hop-overline-font-size);
5
+ --hop-OverlineText-font-weight: var(--hop-overline-font-weight);
6
+ --hop-OverlineText-letter-spacing: 0.015rem;
7
+ --hop-OverlineText-line-height: var(--hop-overline-line-height);
8
+ --hop-OverlineText-top-offset: var(--hop-overline-top-offset);
9
+ --hop-OverlineText-bottom-offset: var(--hop-overline-bottom-offset);
10
+ --font-family: var(--hop-OverlineText-font-family);
11
+ --font-size: var(--hop-OverlineText-font-size);
12
+ --font-weight: var(--hop-OverlineText-font-weight);
13
+ --letter-spacing: var(--hop-OverlineText-letter-spacing);
14
+ --line-height: var(--hop-OverlineText-line-height);
15
+ --top-offset: var(--hop-OverlineText-top-offset);
16
+ --bottom-offset: var(--hop-OverlineText-bottom-offset);
17
+ box-sizing: border-box;
18
+ font-family: var(--font-family);
19
+ font-size: var(--font-size);
20
+ font-feature-settings: "case";
21
+ font-weight: var(--font-weight);
22
+ line-height: var(--line-height);
23
+ text-transform: uppercase;
24
+ letter-spacing: var(--letter-spacing);
25
+ }
26
+ .OverlineText-module__hop-OverlineText__text___Cb3CN {
27
+ box-sizing: border-box;
28
+ }
29
+ .OverlineText-module__hop-OverlineText__text___Cb3CN::before,
30
+ .OverlineText-module__hop-OverlineText__text___Cb3CN::after {
31
+ content: "";
32
+ display: block;
33
+ box-sizing: border-box;
34
+ inline-size: 0;
35
+ block-size: 0;
36
+ }
37
+ .OverlineText-module__hop-OverlineText__text___Cb3CN::before {
38
+ margin-block-end: var(--bottom-offset);
39
+ }
40
+ .OverlineText-module__hop-OverlineText__text___Cb3CN::after {
41
+ margin-block-start: var(--top-offset);
42
+ }
43
+
44
+ /* css-module:/home/runner/work/wl-hopper/wl-hopper/packages/components/src/Badge/src/Badge.module.css/#css-module-data */
45
+ .Badge-module__hop-Badge___tJTtf {
46
+ --hop-Badge-height: 1.5rem;
47
+ --hop-Badge-padding-inline: var(--hop-space-inset-sm);
48
+ --hop-Badge-border-radius: var(--hop-shape-pill);
49
+ --hop-Badge-primary-text-color: var(--hop-primary-text-strong);
50
+ --hop-Badge-primary-background-color: var(--hop-primary-surface-strong);
51
+ --hop-Badge-secondary-text-color: var(--hop-neutral-text);
52
+ --hop-Badge-secondary-background-color: var(--hop-neutral-surface-weak);
53
+ --hop-Badge-text-color-disabled: var(--hop-neutral-text-disabled);
54
+ --hop-Badge-background-color-disabled: var(--hop-neutral-surface-disabled);
55
+ --height: var(--hop-Badge-height);
56
+ --padding-inline: var(--hop-Badge-padding-inline);
57
+ --border-radius: var(--hop-Badge-border-radius);
58
+ display: inline-flex;
59
+ align-items: center;
60
+ justify-content: center;
61
+ box-sizing: border-box;
62
+ inline-size: max-content;
63
+ block-size: var(--height);
64
+ padding-inline: var(--padding-inline);
65
+ color: var(--text-color, var(--hop-Badge-primary-text-color));
66
+ background-color: var(--background-color, var(--hop-Badge-primary-background-color));
67
+ border-radius: var(--border-radius);
68
+ }
69
+ .Badge-module__hop-Badge--primary___3WZ9y {
70
+ --background-color: var(--hop-Badge-primary-background-color);
71
+ --text-color: var(--hop-Badge-primary-text-color);
72
+ }
73
+ .Badge-module__hop-Badge--secondary___OpnYy {
74
+ --background-color: var(--hop-Badge-secondary-background-color);
75
+ --text-color: var(--hop-Badge-secondary-text-color);
76
+ }
77
+ .Badge-module__hop-Badge___tJTtf[data-disabled] {
78
+ --background-color: var(--hop-Badge-background-color-disabled);
79
+ --text-color: var(--hop-Badge-text-color-disabled);
80
+ }
81
+
82
+ /* css-module:/home/runner/work/wl-hopper/wl-hopper/packages/components/src/typography/Text/src/Text.module.css/#css-module-data */
83
+ .Text-module__hop-Text___TrcWf {
84
+ --hop-Text-xs-font-size: var(--hop-body-xs-font-size);
85
+ --hop-Text-xs-font-family: var(--hop-body-xs-font-family);
86
+ --hop-Text-xs-font-weight: var(--hop-body-xs-font-weight);
87
+ --hop-Text-xs-line-height: var(--hop-body-xs-line-height);
88
+ --hop-Text-sm-font-size: var(--hop-body-sm-font-size);
89
+ --hop-Text-sm-font-family: var(--hop-body-sm-font-family);
90
+ --hop-Text-sm-font-weight: var(--hop-body-sm-font-weight);
91
+ --hop-Text-sm-line-height: var(--hop-body-sm-line-height);
92
+ --hop-Text-md-font-size: var(--hop-body-md-font-size);
93
+ --hop-Text-md-font-family: var(--hop-body-md-font-family);
94
+ --hop-Text-md-font-weight: var(--hop-body-md-font-weight);
95
+ --hop-Text-md-line-height: var(--hop-body-md-line-height);
96
+ --hop-Text-lg-font-size: var(--hop-body-lg-font-size);
97
+ --hop-Text-lg-font-family: var(--hop-body-lg-font-family);
98
+ --hop-Text-lg-font-weight: var(--hop-body-lg-font-weight);
99
+ --hop-Text-lg-line-height: var(--hop-body-lg-line-height);
100
+ --hop-Text-xl-font-size: var(--hop-body-xl-font-size);
101
+ --hop-Text-xl-font-family: var(--hop-body-xl-font-family);
102
+ --hop-Text-xl-font-weight: var(--hop-body-xl-font-weight);
103
+ --hop-Text-xl-line-height: var(--hop-body-xl-line-height);
104
+ --hop-Text-2xl-font-size: var(--hop-body-2xl-font-size);
105
+ --hop-Text-2xl-font-family: var(--hop-body-2xl-font-family);
106
+ --hop-Text-2xl-font-weight: var(--hop-body-2xl-font-weight);
107
+ --hop-Text-2xl-line-height: var(--hop-body-2xl-line-height);
108
+ --hop-Text-inherit-size-font-size: inherit;
109
+ --hop-Text-inherit-size-font-family: inherit;
110
+ --hop-Text-inherit-size-font-weight: inherit;
111
+ --hop-Text-inherit-size-line-height: inherit;
112
+ }
113
+ :where(.Text-module__hop-Text___TrcWf) {
114
+ font-family: var(--font-family);
115
+ font-size: var(--font-size);
116
+ font-weight: var(--font-weight);
117
+ line-height: var(--line-height);
118
+ }
119
+ :where(.Text-module__hop-Text--xs___rF5yE) {
120
+ --font-size: var(--hop-Text-xs-font-size);
121
+ --font-family: var(--hop-Text-xs-font-family);
122
+ --font-weight: var(--hop-Text-xs-font-weight);
123
+ --line-height: var(--hop-Text-xs-line-height);
124
+ }
125
+ :where(.Text-module__hop-Text--sm___tPgW7) {
126
+ --font-size: var(--hop-Text-sm-font-size);
127
+ --font-family: var(--hop-Text-sm-font-family);
128
+ --font-weight: var(--hop-Text-sm-font-weight);
129
+ --line-height: var(--hop-Text-sm-line-height);
130
+ }
131
+ :where(.Text-module__hop-Text--md___g9Wf2) {
132
+ --font-size: var(--hop-Text-md-font-size);
133
+ --font-family: var(--hop-Text-md-font-family);
134
+ --font-weight: var(--hop-Text-md-font-weight);
135
+ --line-height: var(--hop-Text-md-line-height);
136
+ }
137
+ :where(.Text-module__hop-Text--lg___gXea2) {
138
+ --font-size: var(--hop-Text-lg-font-size);
139
+ --font-family: var(--hop-Text-lg-font-family);
140
+ --font-weight: var(--hop-Text-lg-font-weight);
141
+ --line-height: var(--hop-Text-lg-line-height);
142
+ }
143
+ :where(.Text-module__hop-Text--xl___iGie8) {
144
+ --font-size: var(--hop-Text-xl-font-size);
145
+ --font-family: var(--hop-Text-xl-font-family);
146
+ --font-weight: var(--hop-Text-xl-font-weight);
147
+ --line-height: var(--hop-Text-xl-line-height);
148
+ }
149
+ :where(.Text-module__hop-Text--2xl___p5vcB) {
150
+ --font-size: var(--hop-Text-2xl-font-size);
151
+ --font-family: var(--hop-Text-2xl-font-family);
152
+ --font-weight: var(--hop-Text-2xl-font-weight);
153
+ --line-height: var(--hop-Text-2xl-line-height);
154
+ }
155
+ :where(.Text-module__hop-Text--inherit___Jg8ZC) {
156
+ --font-size: var(--hop-Text-inherit-size-font-size);
157
+ --font-family: var(--hop-Text-inherit-size-font-family);
158
+ --font-weight: var(--hop-Text-inherit-size-font-weight);
159
+ --line-height: var(--hop-Text-inherit-size-line-height);
160
+ }
161
+
162
+ /* css-module:/home/runner/work/wl-hopper/wl-hopper/packages/components/src/ErrorMessage/src/ErrorMessage.module.css/#css-module-data */
163
+ .ErrorMessage-module__hop-ErrorMessage___i9yn3 {
164
+ --hop-ErrorMessage-color: var(--hop-danger-text-weak);
165
+ --hop-ErrorMessage-font-family: var(--hop-body-xs-font-family);
166
+ --hop-ErrorMessage-font-size: var(--hop-body-xs-font-size);
167
+ --hop-ErrorMessage-font-weight: var(--hop-body-xs-font-weight);
168
+ --hop-ErrorMessage-line-height: var(--hop-body-xs-line-height);
169
+ --hop-ErrorMessage-column-gap: var(--hop-space-inline-xs);
170
+ display: flex;
171
+ column-gap: var(--hop-ErrorMessage-column-gap);
172
+ align-items: center;
173
+ box-sizing: border-box;
174
+ font-family: var(--hop-ErrorMessage-font-family);
175
+ font-size: var(--hop-ErrorMessage-font-size);
176
+ font-weight: var(--hop-ErrorMessage-font-weight);
177
+ line-height: var(--hop-ErrorMessage-line-height);
178
+ color: var(--hop-ErrorMessage-color);
179
+ }
180
+ .ErrorMessage-module__hop-ErrorMessage__icon___zmOVR {
181
+ flex: 0 0 auto;
182
+ align-self: flex-start;
183
+ }
184
+
185
+ /* css-module:/home/runner/work/wl-hopper/wl-hopper/packages/components/src/HelperMessage/src/HelperMessage.module.css/#css-module-data */
186
+ .HelperMessage-module__hop-HelperMessage___A94z8 {
187
+ --hop-HelperMessage-color: var(--hop-neutral-text-weak);
188
+ --hop-HelperMessage-column-gap: var(--hop-space-inline-xs);
189
+ display: flex;
190
+ column-gap: var(--hop-HelperMessage-column-gap);
191
+ align-items: center;
192
+ box-sizing: border-box;
193
+ color: var(--hop-HelperMessage-color);
194
+ }
195
+ .HelperMessage-module__hop-HelperMessage__icon___tdX3I {
196
+ flex: 0 0 auto;
197
+ align-self: flex-start;
198
+ }
199
+
200
+ /* css-module:/home/runner/work/wl-hopper/wl-hopper/packages/components/src/Divider/src/Divider.module.css/#css-module-data */
201
+ :where(.Divider-module__hop-Divider___ZVlCI) {
202
+ --hop-Divider-border-color: var(--hop-neutral-border-weak);
203
+ --hop-Divider-border-size: 0.0625rem;
204
+ --hop-Divider-horizontal-border-block-end: var(--hop-Divider-border-size) solid var(--hop-Divider-border-color);
205
+ --hop-Divider-horizontal-border-inline-start: none;
206
+ --hop-Divider-horizontal-inline-size: auto;
207
+ --hop-Divider-horizontal-block-size: 0;
208
+ --hop-Divider-vertical-border-inline-start: var(--hop-Divider-border-size) solid var(--hop-Divider-border-color);
209
+ --hop-Divider-vertical-border-block-end: none;
210
+ --hop-Divider-vertical-inline-size: 0;
211
+ --hop-Divider-vertical-block-size: auto;
212
+ --border-block-end: var(--hop-Divider-horizontal-border-block-end);
213
+ --border-inline-start: var(--hop-Divider-horizontal-border-inline-start);
214
+ --inline-size: var(--hop-Divider-horizontal-inline-size);
215
+ --block-size: var(--hop-Divider-horizontal-block-size);
216
+ display: block;
217
+ flex: 0 0 auto;
218
+ box-sizing: border-box;
219
+ inline-size: var(--inline-size);
220
+ block-size: var(--block-size);
221
+ margin: 0;
222
+ border: none;
223
+ border-block-end: var(--border-block-end);
224
+ border-inline-start: var(--border-inline-start);
225
+ }
226
+ .Divider-module__hop-Divider--vertical___n1uBJ {
227
+ --border-block-end: var(--hop-Divider-vertical-border-block-end);
228
+ --border-inline-start: var(--hop-Divider-vertical-border-inline-start);
229
+ --inline-size: var(--hop-Divider-vertical-inline-size);
230
+ --block-size: var(--hop-Divider-vertical-block-size);
231
+ }
232
+
233
+ /* css-module:/home/runner/work/wl-hopper/wl-hopper/packages/components/src/Avatar/src/RichIconAvatarImage.module.css/#css-module-data */
234
+ .RichIconAvatarImage-module__hop-RichIconAvatarImage___1OlI2 {
235
+ --hop-RichIconAvatarImage-background-color: var(--hop-decorative-option7-surface);
236
+ --hop-RichIconAvatarImage-border-radius: var(--hop-shape-circle);
237
+ --hop-RichIconAvatarImage-icon-color: var(--hop-decorative-option7-icon);
238
+ --hop-RichIconAvatarImage-xs-size: 1rem;
239
+ --hop-RichIconAvatarImage-icon-xs-size: 1rem;
240
+ --hop-RichIconAvatarImage-sm-size: 1.5rem;
241
+ --hop-RichIconAvatarImage-icon-sm-size: 1.5rem;
242
+ --hop-RichIconAvatarImage-md-size: 2rem;
243
+ --hop-RichIconAvatarImage-icon-md-size: 2rem;
244
+ --hop-RichIconAvatarImage-lg-size: 3rem;
245
+ --hop-RichIconAvatarImage-icon-lg-size: 3rem;
246
+ --hop-RichIconAvatarImage-xl-size: 4rem;
247
+ --hop-RichIconAvatarImage-icon-xl-size: 4rem;
248
+ --hop-RichIconAvatarImage-2xl-size: 6rem;
249
+ --hop-RichIconAvatarImage-icon-2xl-size: 4rem;
250
+ --hop-RichIconAvatarImage-background-color-disabled: var(--hop-neutral-surface-disabled);
251
+ --hop-RichIconAvatarImage-icon-color-disabled: var(--hop-neutral-icon-disabled);
252
+ --background-color: var(--hop-RichIconAvatarImage-background-color);
253
+ user-select: none;
254
+ position: relative;
255
+ overflow: hidden;
256
+ display: flex;
257
+ align-items: center;
258
+ justify-content: center;
259
+ inline-size: var(--size, var(--hop-RichIconAvatarImage-md-size));
260
+ block-size: var(--size, var(--hop-RichIconAvatarImage-md-size));
261
+ color: var(--hop-RichIconAvatarImage-icon-color);
262
+ background-color: var(--background-color);
263
+ border-radius: var(--hop-RichIconAvatarImage-border-radius);
264
+ }
265
+ .RichIconAvatarImage-module__hop-RichIconAvatarImage--xs___XGaUz {
266
+ --size: var(--hop-RichIconAvatarImage-xs-size);
267
+ --icon-size: var(--hop-RichIconAvatarImage-icon-xs-size);
268
+ }
269
+ .RichIconAvatarImage-module__hop-RichIconAvatarImage--sm___-Olod {
270
+ --size: var(--hop-RichIconAvatarImage-sm-size);
271
+ --icon-size: var(--hop-RichIconAvatarImage-icon-sm-size);
272
+ }
273
+ .RichIconAvatarImage-module__hop-RichIconAvatarImage--md___FlqqG {
274
+ --size: var(--hop-RichIconAvatarImage-md-size);
275
+ --icon-size: var(--hop-RichIconAvatarImage-icon-md-size);
276
+ }
277
+ .RichIconAvatarImage-module__hop-RichIconAvatarImage--lg___zXLMo {
278
+ --size: var(--hop-RichIconAvatarImage-lg-size);
279
+ --icon-size: var(--hop-RichIconAvatarImage-icon-lg-size);
280
+ }
281
+ .RichIconAvatarImage-module__hop-RichIconAvatarImage--xl___sYtIR {
282
+ --size: var(--hop-RichIconAvatarImage-xl-size);
283
+ --icon-size: var(--hop-RichIconAvatarImage-icon-xl-size);
284
+ }
285
+ .RichIconAvatarImage-module__hop-RichIconAvatarImage--2xl___tNx7t {
286
+ --size: var(--hop-RichIconAvatarImage-2xl-size);
287
+ --icon-size: var(--hop-RichIconAvatarImage-icon-2xl-size);
288
+ }
289
+ .RichIconAvatarImage-module__hop-RichIconAvatarImage___1OlI2[data-disabled] {
290
+ --background-color: var(--hop-RichIconAvatarImage-background-color-disabled);
291
+ }
292
+ .RichIconAvatarImage-module__hop-RichIconAvatarImage__icon___lycqV {
293
+ position: relative;
294
+ display: block;
295
+ inline-size: var(--icon-size, var(--hop-RichIconAvatarImage-icon-md-size));
296
+ block-size: var(--icon-size, var(--hop-RichIconAvatarImage-icon-md-size));
297
+ }
298
+ .RichIconAvatarImage-module__hop-RichIconAvatarImage___1OlI2[data-disabled] .RichIconAvatarImage-module__hop-RichIconAvatarImage__icon___lycqV {
299
+ --hop-RichIcon-placeholder-background: var(--hop-RichIconAvatarImage-background-color-disabled);
300
+ --hop-RichIcon-placeholder-shadow: var(--hop-RichIconAvatarImage-icon-color-disabled);
301
+ }
302
+
303
+ /* css-module:/home/runner/work/wl-hopper/wl-hopper/packages/components/src/Avatar/src/Avatar.module.css/#css-module-data */
304
+ .Avatar-module__hop-Avatar___fYhW6 {
305
+ --hop-Avatar-border-radius: var(--hop-shape-circle);
306
+ --hop-Avatar-mix-blend-mode: normal;
307
+ --hop-Avatar-decorative-1-background-color: var(--hop-decorative-option1-surface-strong);
308
+ --hop-Avatar-decorative-2-background-color: var(--hop-decorative-option2-surface-strong);
309
+ --hop-Avatar-decorative-3-background-color: var(--hop-decorative-option3-surface-strong);
310
+ --hop-Avatar-decorative-4-background-color: var(--hop-decorative-option4-surface-strong);
311
+ --hop-Avatar-decorative-5-background-color: var(--hop-decorative-option5-surface-strong);
312
+ --hop-Avatar-decorative-6-background-color: var(--hop-decorative-option6-surface-strong);
313
+ --hop-Avatar-decorative-7-background-color: var(--hop-decorative-option7-surface-strong);
314
+ --hop-Avatar-decorative-8-background-color: var(--hop-decorative-option8-surface-strong);
315
+ --hop-Avatar-decorative-9-background-color: var(--hop-decorative-option9-surface-strong);
316
+ --hop-Avatar-decorative-1-text-color: var(--hop-decorative-option1-text);
317
+ --hop-Avatar-decorative-2-text-color: var(--hop-decorative-option2-text);
318
+ --hop-Avatar-decorative-3-text-color: var(--hop-decorative-option3-text);
319
+ --hop-Avatar-decorative-4-text-color: var(--hop-decorative-option4-text);
320
+ --hop-Avatar-decorative-5-text-color: var(--hop-decorative-option5-text);
321
+ --hop-Avatar-decorative-6-text-color: var(--hop-decorative-option6-text);
322
+ --hop-Avatar-decorative-7-text-color: var(--hop-decorative-option7-text);
323
+ --hop-Avatar-decorative-8-text-color: var(--hop-decorative-option8-text);
324
+ --hop-Avatar-decorative-9-text-color: var(--hop-decorative-option9-text);
325
+ --hop-Avatar-xs-size: 1rem;
326
+ --hop-Avatar-sm-size: 1.5rem;
327
+ --hop-Avatar-md-size: 2rem;
328
+ --hop-Avatar-lg-size: 3rem;
329
+ --hop-Avatar-xl-size: 4rem;
330
+ --hop-Avatar-2xl-size: 6rem;
331
+ --hop-Avatar-background-color-disabled: var(--hop-neutral-surface-disabled);
332
+ --hop-Avatar-text-color-disabled: var(--hop-neutral-text-disabled);
333
+ --hop-Avatar-mix-blend-mode-disabled: luminosity;
334
+ --mix-blend-mode: var(--hop-Avatar-mix-blend-mode);
335
+ user-select: none;
336
+ position: relative;
337
+ overflow: hidden;
338
+ display: flex;
339
+ flex: 0 0 auto;
340
+ align-items: center;
341
+ justify-content: center;
342
+ box-sizing: border-box;
343
+ inline-size: var(--size, var(--hop-Avatar-md-size));
344
+ block-size: var(--size, var(--hop-Avatar-md-size));
345
+ color: var(--text-color, var(--hop-neutral-text));
346
+ background-color: var(--background-color, transparent);
347
+ border-radius: var(--hop-Avatar-border-radius);
348
+ }
349
+ .Avatar-module__hop-Avatar--xs___lg3Fx {
350
+ --size: var(--hop-Avatar-xs-size);
351
+ }
352
+ .Avatar-module__hop-Avatar--sm___O7vVp {
353
+ --size: var(--hop-Avatar-sm-size);
354
+ }
355
+ .Avatar-module__hop-Avatar--md___U6oEm {
356
+ --size: var(--hop-Avatar-md-size);
357
+ }
358
+ .Avatar-module__hop-Avatar--lg___-Z-lW {
359
+ --size: var(--hop-Avatar-lg-size);
360
+ }
361
+ .Avatar-module__hop-Avatar--xl___-xZ0- {
362
+ --size: var(--hop-Avatar-xl-size);
363
+ }
364
+ .Avatar-module__hop-Avatar--2xl___zDd2E {
365
+ --size: var(--hop-Avatar-2xl-size);
366
+ }
367
+ .Avatar-module__hop-Avatar--decorative-option1___jTvFc {
368
+ --background-color: var(--hop-Avatar-decorative-1-background-color);
369
+ --text-color: var(--hop-Avatar-decorative-1-text-color);
370
+ }
371
+ .Avatar-module__hop-Avatar--decorative-option2___w5Mk7 {
372
+ --background-color: var(--hop-Avatar-decorative-2-background-color);
373
+ --text-color: var(--hop-Avatar-decorative-2-text-color);
374
+ }
375
+ .Avatar-module__hop-Avatar--decorative-option3___5WMEU {
376
+ --background-color: var(--hop-Avatar-decorative-3-background-color);
377
+ --text-color: var(--hop-Avatar-decorative-3-text-color);
378
+ }
379
+ .Avatar-module__hop-Avatar--decorative-option4___KWZeM {
380
+ --background-color: var(--hop-Avatar-decorative-4-background-color);
381
+ --text-color: var(--hop-Avatar-decorative-4-text-color);
382
+ }
383
+ .Avatar-module__hop-Avatar--decorative-option5___pVwyU {
384
+ --background-color: var(--hop-Avatar-decorative-5-background-color);
385
+ --text-color: var(--hop-Avatar-decorative-5-text-color);
386
+ }
387
+ .Avatar-module__hop-Avatar--decorative-option6___lRfp7 {
388
+ --background-color: var(--hop-Avatar-decorative-6-background-color);
389
+ --text-color: var(--hop-Avatar-decorative-6-text-color);
390
+ }
391
+ .Avatar-module__hop-Avatar--decorative-option7___AerdM {
392
+ --background-color: var(--hop-Avatar-decorative-7-background-color);
393
+ --text-color: var(--hop-Avatar-decorative-7-text-color);
394
+ }
395
+ .Avatar-module__hop-Avatar--decorative-option8___6hGGA {
396
+ --background-color: var(--hop-Avatar-decorative-8-background-color);
397
+ --text-color: var(--hop-Avatar-decorative-8-text-color);
398
+ }
399
+ .Avatar-module__hop-Avatar--decorative-option9___EjBKY {
400
+ --background-color: var(--hop-Avatar-decorative-9-background-color);
401
+ --text-color: var(--hop-Avatar-decorative-9-text-color);
402
+ }
403
+ .Avatar-module__hop-Avatar___fYhW6[data-disabled] {
404
+ --background-color: var(--hop-Avatar-background-color-disabled);
405
+ --text-color: var(--hop-Avatar-text-color-disabled);
406
+ --mix-blend-mode: var(--hop-Avatar-mix-blend-mode-disabled);
407
+ isolation: isolate;
408
+ }
409
+ .Avatar-module__hop-Avatar__image___m95ud {
410
+ position: relative;
411
+ display: block;
412
+ box-sizing: border-box;
413
+ inline-size: 100%;
414
+ block-size: 100%;
415
+ object-fit: cover;
416
+ mix-blend-mode: var(--mix-blend-mode);
417
+ }
418
+
419
+ /* css-module:/home/runner/work/wl-hopper/wl-hopper/packages/components/src/IconList/src/IconList.module.css/#css-module-data */
420
+ .IconList-module__hop-IconList___ACGld {
421
+ --hop-IconList-gap: var(--hop-space-inline-xs);
422
+ display: flex;
423
+ flex-wrap: wrap;
424
+ gap: var(--hop-IconList-gap);
425
+ box-sizing: border-box;
426
+ }
427
+
428
+ /* css-module:/home/runner/work/wl-hopper/wl-hopper/packages/components/src/checkbox/src/Checkbox.module.css/#css-module-data */
429
+ .Checkbox-module__hop-Checkbox___FyPRg {
430
+ --hop-Checkbox-box-border-size: 0.0625rem;
431
+ --hop-Checkbox-box-border-color: var(--hop-neutral-border);
432
+ --hop-Checkbox-box-background-color: var(--hop-neutral-surface);
433
+ --hop-Checkbox-box-outline-size: 0.125rem;
434
+ --hop-Checkbox-box-outline-color: var(--hop-primary-border-focus);
435
+ --hop-Checkbox-check-color: var(--hop-neutral-icon-selected);
436
+ --hop-Checkbox-check-display: none;
437
+ --hop-Checkbox-text-color: var(--hop-neutral-text);
438
+ --hop-Checkbox-icon-color: var(--hop-neutral-icon);
439
+ --hop-Checkbox-box-border-color-hovered: var(--hop-neutral-border-hover);
440
+ --hop-Checkbox-box-background-color-hovered: var(--hop-neutral-surface-hover);
441
+ --hop-Checkbox-text-color-hovered: var(--hop-neutral-text-hover);
442
+ --hop-Checkbox-icon-color-hovered: var(--hop-neutral-icon-hover);
443
+ --hop-Checkbox-box-border-color-pressed: var(--hop-neutral-border-press);
444
+ --hop-Checkbox-box-background-color-pressed: var(--hop-neutral-surface-press);
445
+ --hop-Checkbox-text-color-pressed: var(--hop-neutral-text-press);
446
+ --hop-Checkbox-icon-color-pressed: var(--hop-neutral-icon-press);
447
+ --hop-Checkbox-box-border-color-selected: var(--hop-neutral-border-selected);
448
+ --hop-Checkbox-box-background-color-selected: var(--hop-neutral-surface-selected);
449
+ --hop-Checkbox-check-display-selected: block;
450
+ --hop-Checkbox-text-color-selected: var(--hop-neutral-text);
451
+ --hop-Checkbox-icon-color-selected: var(--hop-neutral-icon);
452
+ --hop-Checkbox-box-border-color-disabled: var(--hop-neutral-border-disabled);
453
+ --hop-Checkbox-box-background-color-disabled: var(--hop-neutral-surface-disabled);
454
+ --hop-Checkbox-check-color-disabled: var(--hop-neutral-icon-disabled);
455
+ --hop-Checkbox-text-color-disabled: var(--hop-neutral-text-disabled);
456
+ --hop-Checkbox-icon-color-disabled: var(--hop-neutral-icon-disabled);
457
+ --hop-Checkbox-box-border-color-focused: var(--hop-neutral-border-hover);
458
+ --hop-Checkbox-box-background-color-focused: var(--hop-neutral-surface-hover);
459
+ --hop-Checkbox-text-color-focused: var(--hop-neutral-text-hover);
460
+ --hop-Checkbox-icon-color-focused: var(--hop-neutral-icon-hover);
461
+ --hop-Checkbox-box-border-color-invalid: var(--hop-danger-border-strong);
462
+ --hop-Checkbox-box-background-color-invalid: var(--hop-neutral-surface);
463
+ --hop-Checkbox-box-border-color-hovered-invalid: var(--hop-danger-border-strong);
464
+ --hop-Checkbox-box-background-color-hovered-invalid: var(--hop-danger-surface-weak-hover);
465
+ --hop-Checkbox-box-border-color-pressed-invalid: var(--hop-danger-border-press);
466
+ --hop-Checkbox-box-background-color-pressed-invalid: var(--hop-danger-surface-weak-press);
467
+ --hop-Checkbox-box-border-color-focused-invalid: var(--hop-danger-border-press);
468
+ --hop-Checkbox-box-background-color-focused-invalid: var(--hop-danger-surface);
469
+ --hop-Checkbox-box-border-color-selected-invalid: var(--hop-danger-border-strong);
470
+ --hop-Checkbox-box-background-color-selected-invalid: var(--hop-danger-surface-strong);
471
+ --hop-Checkbox-check-color-invalid: var(--hop-danger-icon-strong);
472
+ --hop-Checkbox-text-color-invalid: var(--hop-danger-text-weak);
473
+ --hop-Checkbox-text-color-hovered-invalid: var(--hop-danger-text-weak-hover);
474
+ --hop-Checkbox-text-color-pressed-invalid: var(--hop-danger-text-weak-press);
475
+ --hop-Checkbox-icon-color-invalid: var(--hop-danger-icon-weak);
476
+ --hop-Checkbox-icon-color-hovered-invalid: var(--hop-danger-icon-weak-hover);
477
+ --hop-Checkbox-icon-color-pressed-invalid: var(--hop-danger-icon-weak-press);
478
+ --hop-Checkbox-box-sm-block-size: 1rem;
479
+ --hop-Checkbox-box-sm-inline-size: 1rem;
480
+ --hop-Checkbox-text-sm-top-offset: calc((var(--box-inline-size) - (var(--hop-body-sm-line-height) * var(--hop-body-sm-font-size))) / 2);
481
+ --hop-Checkbox-text-sm-margin-inline-start: calc(var(--hop-space-inline-sm) - var(--hop-space-inline-xs));
482
+ --hop-Checkbox-box-md-block-size: 1.5rem;
483
+ --hop-Checkbox-box-md-inline-size: 1.5rem;
484
+ --hop-Checkbox-text-md-top-offset: calc((var(--box-inline-size) - (var(--hop-body-md-line-height) * var(--hop-body-md-font-size))) / 2);
485
+ --hop-Checkbox-text-md-margin-inline-start: calc(var(--hop-space-inline-md) - var(--hop-space-inline-xs));
486
+ --box-background-color: var(--hop-Checkbox-box-background-color);
487
+ --box-border-color: var(--hop-Checkbox-box-border-color);
488
+ --box-border-radius: var(--hop-shape-rounded-sm);
489
+ --check-color: var(--hop-Checkbox-check-color);
490
+ --check-display: var(--hop-Checkbox-check-display);
491
+ --cursor: pointer;
492
+ --text-color: var(--hop-Checkbox-text-color);
493
+ --icon-color: var(--hop-Checkbox-icon-color);
494
+ --transition-duration: var(--hop-easing-duration-2);
495
+ cursor: var(--cursor);
496
+ display: flex;
497
+ column-gap: var(--hop-space-inline-xs);
498
+ align-items: flex-start;
499
+ justify-content: flex-start;
500
+ box-sizing: border-box;
501
+ inline-size: max-content;
502
+ max-inline-size: 100%;
503
+ }
504
+ .Checkbox-module__hop-Checkbox___FyPRg[data-focus-visible],
505
+ .Checkbox-module__hop-Checkbox--focused___i2l8S {
506
+ --box-background-color: var(--hop-Checkbox-box-background-color-focused);
507
+ --box-border-color: var(--hop-Checkbox-box-border-color-focused);
508
+ --box-outline: var(--hop-Checkbox-box-outline-size) solid var(--hop-Checkbox-box-outline-color);
509
+ --text-color: var(--hop-Checkbox-text-color-focused);
510
+ --icon-color: var(--hop-Checkbox-icon-color-focused);
511
+ }
512
+ .Checkbox-module__hop-Checkbox___FyPRg[data-hovered],
513
+ .Checkbox-module__hop-Checkbox--hovered___RUE8m {
514
+ --box-background-color: var(--hop-Checkbox-box-background-color-hovered);
515
+ --box-border-color: var(--hop-Checkbox-box-border-color-hovered);
516
+ --text-color: var(--hop-Checkbox-text-color-hovered);
517
+ --icon-color: var(--hop-Checkbox-icon-color-hovered);
518
+ }
519
+ .Checkbox-module__hop-Checkbox___FyPRg[data-pressed],
520
+ .Checkbox-module__hop-Checkbox--pressed___2Prja {
521
+ --box-background-color: var(--hop-Checkbox-box-background-color-pressed);
522
+ --box-border-color: var(--hop-Checkbox-box-border-color-pressed);
523
+ --text-color: var(--hop-Checkbox-text-color-pressed);
524
+ --icon-color: var(--hop-Checkbox-icon-color-pressed);
525
+ }
526
+ .Checkbox-module__hop-Checkbox___FyPRg[data-selected] {
527
+ --box-background-color: var(--hop-Checkbox-box-background-color-selected);
528
+ --box-border-color: var(--hop-Checkbox-box-border-color-selected);
529
+ --check-display: var(--hop-Checkbox-check-display-selected);
530
+ --text-color: var(--hop-Checkbox-text-color-selected);
531
+ --icon-color: var(--hop-Checkbox-icon-color-selected);
532
+ }
533
+ .Checkbox-module__hop-Checkbox___FyPRg[data-invalid] {
534
+ --box-background-color: var(--hop-Checkbox-box-background-color-invalid);
535
+ --box-border-color: var(--hop-Checkbox-box-border-color-invalid);
536
+ --check-color: var(--hop-Checkbox-check-color-invalid);
537
+ --text-color: var(--hop-Checkbox-text-color-invalid);
538
+ --icon-color: var(--hop-Checkbox-icon-color-invalid);
539
+ }
540
+ .Checkbox-module__hop-Checkbox___FyPRg[data-invalid]:where([data-focus-visible], .Checkbox-module__hop-Checkbox--focused___i2l8S) {
541
+ --box-background-color: var(--hop-Checkbox-box-background-color-focused-invalid);
542
+ --box-border-color: var(--hop-Checkbox-box-border-color-focused-invalid);
543
+ }
544
+ .Checkbox-module__hop-Checkbox___FyPRg[data-invalid]:where([data-hovered], .Checkbox-module__hop-Checkbox--hovered___RUE8m) {
545
+ --box-background-color: var(--hop-Checkbox-box-background-color-hovered-invalid);
546
+ --box-border-color: var(--hop-Checkbox-box-border-color-hovered-invalid);
547
+ --text-color: var(--hop-Checkbox-text-color-hovered-invalid);
548
+ --icon-color: var(--hop-Checkbox-icon-color-hovered-invalid);
549
+ }
550
+ .Checkbox-module__hop-Checkbox___FyPRg[data-invalid]:where([data-pressed], .Checkbox-module__hop-Checkbox--pressed___2Prja) {
551
+ --box-background-color: var(--hop-Checkbox-box-background-color-pressed-invalid);
552
+ --box-border-color: var(--hop-Checkbox-box-border-color-pressed-invalid);
553
+ --text-color: var(--hop-Checkbox-text-color-pressed-invalid);
554
+ --icon-color: var(--hop-Checkbox-icon-color-pressed-invalid);
555
+ }
556
+ .Checkbox-module__hop-Checkbox___FyPRg:where([data-invalid])[data-selected] {
557
+ --box-background-color: var(--hop-Checkbox-box-background-color-selected-invalid);
558
+ --box-border-color: var(--hop-Checkbox-box-border-color-selected-invalid);
559
+ }
560
+ .Checkbox-module__hop-Checkbox___FyPRg[data-disabled] {
561
+ --box-background-color: var(--hop-Checkbox-box-background-color-disabled);
562
+ --box-border-color: var(--hop-Checkbox-box-border-color-disabled);
563
+ --check-color: var(--hop-Checkbox-check-color-disabled);
564
+ --cursor: not-allowed;
565
+ --text-color: var(--hop-Checkbox-text-color-disabled);
566
+ --icon-color: var(--hop-Checkbox-icon-color-disabled);
567
+ }
568
+ .Checkbox-module__hop-Checkbox--sm___DgkQg {
569
+ --box-block-size: var(--hop-Checkbox-box-sm-block-size);
570
+ --box-inline-size: var(--hop-Checkbox-box-sm-inline-size);
571
+ --text-top-offset: var(--hop-Checkbox-text-sm-top-offset);
572
+ --text-margin-inline-start: var(--hop-Checkbox-text-sm-margin-inline-start);
573
+ }
574
+ .Checkbox-module__hop-Checkbox--md___8uKCT {
575
+ --box-block-size: var(--hop-Checkbox-box-md-block-size);
576
+ --box-inline-size: var(--hop-Checkbox-box-md-inline-size);
577
+ --text-top-offset: var(--hop-Checkbox-text-md-top-offset);
578
+ --text-margin-inline-start: var(--hop-Checkbox-text-md-margin-inline-start);
579
+ }
580
+ .Checkbox-module__hop-Checkbox__icon___yslf0,
581
+ .Checkbox-module__hop-Checkbox__icon-list___uo0bB {
582
+ flex: 0 0 auto;
583
+ order: 3;
584
+ color: var(--icon-color);
585
+ }
586
+ .Checkbox-module__hop-Checkbox__box___FPnJ8 {
587
+ display: flex;
588
+ flex: 0 0 auto;
589
+ align-items: center;
590
+ justify-content: center;
591
+ order: 1;
592
+ box-sizing: border-box;
593
+ inline-size: var(--box-inline-size, var(--hop-Checkbox-box-md-inline-size));
594
+ block-size: var(--box-block-size, var(--hop-Checkbox-box-md-block-size));
595
+ background-color: var(--box-background-color);
596
+ border: var(--hop-Checkbox-box-border-size) solid var(--box-border-color);
597
+ border-radius: var(--box-border-radius);
598
+ outline: var(--box-outline, none);
599
+ outline-offset: 0.125rem;
600
+ transition: background-color var(--transition-duration) var(--hop-easing-productive), border var(--transition-duration) var(--hop-easing-productive);
601
+ }
602
+ .Checkbox-module__hop-Checkbox__check___PCbF6 {
603
+ display: var(--check-display);
604
+ color: var(--check-color);
605
+ }
606
+ .Checkbox-module__hop-Checkbox__text___pdshj {
607
+ flex: 0 1 auto;
608
+ order: 2;
609
+ min-inline-size: 0;
610
+ margin-block-start: var(--text-top-offset, var(--hop-Checkbox-text-md-top-offset));
611
+ margin-inline-start: var(--text-margin-inline-start, var(--hop-Checkbox-text-md-margin-inline-start));
612
+ color: var(--text-color);
613
+ }
614
+
615
+ /* css-module:/home/runner/work/wl-hopper/wl-hopper/packages/components/src/checkbox/src/CheckboxField.module.css/#css-module-data */
616
+ .CheckboxField-module__hop-CheckboxField___EeawF {
617
+ --hop-CheckboxField-description-color: var(--hop-neutral-text-weak);
618
+ --hop-CheckboxField-description-color-disabled: var(--hop-neutral-text-disabled);
619
+ --hop-CheckboxField-sm-row-gap: var(--hop-space-stack-xs);
620
+ --hop-CheckboxField-checkbox-sm-inline-size: 1rem;
621
+ --hop-CheckboxField-description-sm-margin-inline-start: calc(var(--hop-CheckboxField-checkbox-sm-inline-size) + var(--hop-space-inline-sm));
622
+ --hop-CheckboxField-md-row-gap: var(--hop-space-stack-xs);
623
+ --hop-CheckboxField-checkbox-md-inline-size: 1.5rem;
624
+ --hop-CheckboxField-description-md-margin-inline-start: calc(var(--hop-CheckboxField-checkbox-md-inline-size) + var(--hop-space-inline-md));
625
+ --description-color: var(--hop-CheckboxField-description-color);
626
+ display: flex;
627
+ flex-direction: column;
628
+ row-gap: var(--row-gap, var(--hop-space-stack-sm));
629
+ align-items: flex-start;
630
+ justify-content: flex-start;
631
+ box-sizing: border-box;
632
+ inline-size: max-content;
633
+ max-inline-size: 100%;
634
+ }
635
+ .CheckboxField-module__hop-CheckboxField___EeawF[data-disabled] {
636
+ --description-color: var(--hop-CheckboxField-description-color-disabled);
637
+ }
638
+ .CheckboxField-module__hop-CheckboxField--sm___QGCXc {
639
+ --row-gap: var(--hop-CheckboxField-sm-row-gap);
640
+ --description-margin-inline-start: var(--hop-CheckboxField-description-sm-margin-inline-start);
641
+ }
642
+ .CheckboxField-module__hop-CheckboxField--md___Qm0Er {
643
+ --row-gap: var(--hop-CheckboxField-md-row-gap);
644
+ --description-margin-inline-start: var(--hop-CheckboxField-description-md-margin-inline-start);
645
+ }
646
+ .CheckboxField-module__hop-CheckboxField__description___TlNzS {
647
+ order: 2;
648
+ margin-inline-start: var(--description-margin-inline-start, var(--hop-CheckboxField-description-md-margin-inline-start));
649
+ color: var(--description-color);
650
+ }
651
+ .CheckboxField-module__hop-CheckboxField__checkbox___srYzU {
652
+ order: 1;
653
+ }
654
+
655
+ /* css-module:/home/runner/work/wl-hopper/wl-hopper/packages/components/src/typography/Label/src/Label.module.css/#css-module-data */
656
+ .Label-module__hop-Label___mvHHn {
657
+ --hop-Label-font-size: var(--hop-heading-xs-font-size);
658
+ --hop-Label-font-family: var(--hop-heading-xs-font-family);
659
+ --hop-Label-font-weight: var(--hop-heading-xs-font-weight);
660
+ --hop-Label-line-height: var(--hop-heading-xs-line-height);
661
+ --hop-Label-color: var(--hop-neutral-text-weak);
662
+ }
663
+ :where(.Label-module__hop-Label___mvHHn) {
664
+ font-family: var(--hop-Label-font-family);
665
+ font-size: var(--hop-Label-font-size);
666
+ font-weight: var(--hop-Label-font-weight);
667
+ line-height: var(--hop-Label-line-height);
668
+ color: var(--hop-Label-color);
669
+ }
670
+ :where(.Label-module__hop-Label__indicator___eN8aZ) {
671
+ padding-inline-start: var(--hop-space-20);
672
+ }
673
+
674
+ /* css-module:/home/runner/work/wl-hopper/wl-hopper/packages/components/src/checkbox/src/CheckboxGroup.module.css/#css-module-data */
675
+ .CheckboxGroup-module__hop-CheckboxGroup___Q0dnE {
676
+ --hop-CheckboxGroup-align-items: flex-start;
677
+ --hop-CheckboxGroup-justify-content: flex-start;
678
+ --hop-CheckboxGroup-bordered-border-color: var(--hop-neutral-border-weak);
679
+ --hop-CheckboxGroup-sm-column-gap: var(--hop-space-inline-sm);
680
+ --hop-CheckboxGroup-sm-row-gap: var(--hop-space-stack-sm);
681
+ --hop-CheckboxGroup-list-sm-column-gap: var(--hop-space-inline-sm);
682
+ --hop-CheckboxGroup-list-sm-row-gap: var(--hop-space-stack-sm);
683
+ --hop-CheckboxGroup-bordered-sm-padding: var(--hop-space-inset-sm);
684
+ --hop-CheckboxGroup-bordered-sm-column-gap: var(--hop-space-inline-sm);
685
+ --hop-CheckboxGroup-bordered-sm-row-gap: var(--hop-space-stack-sm);
686
+ --hop-CheckboxGroup-list-bordered-sm-column-gap: 0;
687
+ --hop-CheckboxGroup-list-bordered-sm-row-gap: 0;
688
+ --hop-CheckboxGroup-md-column-gap: var(--hop-space-inline-md);
689
+ --hop-CheckboxGroup-md-row-gap: var(--hop-space-stack-md);
690
+ --hop-CheckboxGroup-list-md-column-gap: var(--hop-space-inline-md);
691
+ --hop-CheckboxGroup-list-md-row-gap: var(--hop-space-stack-md);
692
+ --hop-CheckboxGroup-bordered-md-padding: var(--hop-space-inset-md);
693
+ --hop-CheckboxGroup-bordered-md-column-gap: var(--hop-space-inline-sm);
694
+ --hop-CheckboxGroup-bordered-md-row-gap: var(--hop-space-stack-sm);
695
+ --hop-CheckboxGroup-list-bordered-md-column-gap: 0;
696
+ --hop-CheckboxGroup-list-bordered-md-row-gap: 0;
697
+ --hop-CheckboxGroup-vertical-flex-direction: column;
698
+ --hop-CheckboxGroup-horizontal-flex-direction: row;
699
+ --checkbox-border-size: 0.0625rem;
700
+ --checkbox-border-color: var(--hop-neutral-border-weak);
701
+ --flex-direction: var(--hop-CheckboxGroup-vertical-flex-direction);
702
+ --align-items: var(--hop-CheckboxGroup-align-items);
703
+ --justify-content: var(--hop-CheckboxGroup-justify-content);
704
+ --flex-wrap: wrap;
705
+ display: flex;
706
+ flex-direction: column;
707
+ gap: var(--row-gap, var(--hop-space-stack-md)) var(--column-gap, var(--hop-space-inline-md));
708
+ align-items: var(--align-items);
709
+ justify-content: var(--justify-content);
710
+ box-sizing: border-box;
711
+ inline-size: max-content;
712
+ max-inline-size: 100%;
713
+ }
714
+ .CheckboxGroup-module__hop-CheckboxGroup--bordered___xETdz {
715
+ --list-border: var(--checkbox-border-size) solid var(--checkbox-border-color);
716
+ --list-border-radius: var(--hop-shape-rounded-md);
717
+ }
718
+ .CheckboxGroup-module__hop-CheckboxGroup--sm___x1qGa {
719
+ --column-gap: var(--hop-CheckboxGroup-sm-column-gap);
720
+ --row-gap: var(--hop-CheckboxGroup-sm-row-gap);
721
+ --list-column-gap: var(--hop-CheckboxGroup-list-sm-column-gap);
722
+ --list-row-gap: var(--hop-CheckboxGroup-list-sm-row-gap);
723
+ }
724
+ .CheckboxGroup-module__hop-CheckboxGroup--md___Ss8IQ {
725
+ --column-gap: var(--hop-CheckboxGroup-md-column-gap);
726
+ --row-gap: var(--hop-CheckboxGroup-md-row-gap);
727
+ --list-column-gap: var(--hop-CheckboxGroup-list-md-column-gap);
728
+ --list-row-gap: var(--hop-CheckboxGroup-list-md-row-gap);
729
+ }
730
+ .CheckboxGroup-module__hop-CheckboxGroup--bordered___xETdz.CheckboxGroup-module__hop-CheckboxGroup--sm___x1qGa {
731
+ --checkbox-padding: var(--hop-CheckboxGroup-bordered-sm-padding);
732
+ --column-gap: var(--hop-CheckboxGroup-bordered-sm-column-gap);
733
+ --row-gap: var(--hop-CheckboxGroup-bordered-sm-row-gap);
734
+ --list-column-gap: var(--hop-CheckboxGroup-list-bordered-sm-column-gap);
735
+ --list-row-gap: var(--hop-CheckboxGroup-list-bordered-sm-row-gap);
736
+ }
737
+ .CheckboxGroup-module__hop-CheckboxGroup--bordered___xETdz.CheckboxGroup-module__hop-CheckboxGroup--md___Ss8IQ {
738
+ --checkbox-padding: var(--hop-CheckboxGroup-bordered-md-padding);
739
+ --column-gap: var(--hop-CheckboxGroup-bordered-md-column-gap);
740
+ --row-gap: var(--hop-CheckboxGroup-bordered-md-row-gap);
741
+ --list-column-gap: var(--hop-CheckboxGroup-list-bordered-md-column-gap);
742
+ --list-row-gap: var(--hop-CheckboxGroup-list-bordered-md-row-gap);
743
+ }
744
+ .CheckboxGroup-module__hop-CheckboxGroup___Q0dnE[data-orientation=horizontal] {
745
+ --flex-direction: var(--hop-CheckboxGroup-horizontal-flex-direction);
746
+ }
747
+ .CheckboxGroup-module__hop-CheckboxGroup--bordered___xETdz[data-orientation=horizontal] {
748
+ --flex-wrap: nowrap;
749
+ }
750
+ .CheckboxGroup-module__hop-CheckboxGroup___Q0dnE > .CheckboxGroup-module__hop-CheckboxGroup__label___Th6rN {
751
+ order: 1;
752
+ }
753
+ .CheckboxGroup-module__hop-CheckboxGroup__list___KbICS {
754
+ display: flex;
755
+ flex-flow: var(--flex-direction) var(--flex-wrap);
756
+ gap: var(--list-row-gap, var(--hop-space-stack-md)) var(--list-column-gap, var(--hop-space-inline-md));
757
+ order: 2;
758
+ box-sizing: border-box;
759
+ inline-size: max-content;
760
+ max-inline-size: 100%;
761
+ border: var(--list-border, none);
762
+ border-radius: var(--list-border-radius, 0);
763
+ }
764
+ .CheckboxGroup-module__hop-CheckboxGroup__list___KbICS > .CheckboxGroup-module__hop-CheckboxGroup__checkbox___gdKoC {
765
+ position: relative;
766
+ flex: 0 1 auto;
767
+ align-content: start;
768
+ inline-size: auto;
769
+ min-inline-size: 0;
770
+ padding: var(--checkbox-padding, 0);
771
+ }
772
+ .CheckboxGroup-module__hop-CheckboxGroup--bordered___xETdz .CheckboxGroup-module__hop-CheckboxGroup__list___KbICS > .CheckboxGroup-module__hop-CheckboxGroup__checkbox___gdKoC ~ .CheckboxGroup-module__hop-CheckboxGroup__checkbox___gdKoC::before {
773
+ content: "";
774
+ position: absolute;
775
+ display: block;
776
+ }
777
+ .CheckboxGroup-module__hop-CheckboxGroup--bordered___xETdz[data-orientation=vertical] .CheckboxGroup-module__hop-CheckboxGroup__list___KbICS > .CheckboxGroup-module__hop-CheckboxGroup__checkbox___gdKoC ~ .CheckboxGroup-module__hop-CheckboxGroup__checkbox___gdKoC::before {
778
+ inset-block-start: 0;
779
+ inset-inline: 0;
780
+ border-block-start: var(--list-border, none);
781
+ }
782
+ .CheckboxGroup-module__hop-CheckboxGroup--bordered___xETdz[data-orientation=horizontal] .CheckboxGroup-module__hop-CheckboxGroup__list___KbICS > .CheckboxGroup-module__hop-CheckboxGroup__checkbox___gdKoC ~ .CheckboxGroup-module__hop-CheckboxGroup__checkbox___gdKoC::before {
783
+ inset-block: 0;
784
+ inset-inline-start: 0;
785
+ border-inline-start: var(--list-border, none);
786
+ }
787
+ .CheckboxGroup-module__hop-CheckboxGroup___Q0dnE > .CheckboxGroup-module__hop-CheckboxGroup__error-message___K7vVY,
788
+ .CheckboxGroup-module__hop-CheckboxGroup___Q0dnE > .CheckboxGroup-module__hop-CheckboxGroup__helper-message___Ra9RG {
789
+ order: 3;
790
+ }
791
+
792
+ /* css-module:/home/runner/work/wl-hopper/wl-hopper/packages/components/src/radio/src/Radio.module.css/#css-module-data */
793
+ .Radio-module__hop-Radio___8KZXA {
794
+ --hop-Radio-box-border-size: 0.0625rem;
795
+ --hop-Radio-box-border-color: var(--hop-neutral-border);
796
+ --hop-Radio-box-background-color: var(--hop-neutral-surface);
797
+ --hop-Radio-box-outline-size: 0.125rem;
798
+ --hop-Radio-box-outline-color: var(--hop-primary-border-focus);
799
+ --hop-Radio-bullet-color: var(--hop-neutral-icon-selected);
800
+ --hop-Radio-bullet-display: none;
801
+ --hop-Radio-text-color: var(--hop-neutral-text);
802
+ --hop-Radio-icon-color: var(--hop-neutral-icon);
803
+ --hop-Radio-box-border-color-hovered: var(--hop-neutral-border-hover);
804
+ --hop-Radio-box-background-color-hovered: var(--hop-neutral-surface-hover);
805
+ --hop-Radio-text-color-hovered: var(--hop-neutral-text-hover);
806
+ --hop-Radio-icon-color-hovered: var(--hop-neutral-icon-hover);
807
+ --hop-Radio-box-border-color-pressed: var(--hop-neutral-border-press);
808
+ --hop-Radio-box-background-color-pressed: var(--hop-neutral-surface-press);
809
+ --hop-Radio-text-color-pressed: var(--hop-neutral-text-press);
810
+ --hop-Radio-icon-color-pressed: var(--hop-neutral-icon-press);
811
+ --hop-Radio-box-border-color-selected: var(--hop-neutral-border-selected);
812
+ --hop-Radio-box-background-color-selected: var(--hop-neutral-surface-selected);
813
+ --hop-Radio-bullet-display-selected: block;
814
+ --hop-Radio-text-color-selected: var(--hop-neutral-text);
815
+ --hop-Radio-icon-color-selected: var(--hop-neutral-icon);
816
+ --hop-Radio-box-border-color-disabled: var(--hop-neutral-border-disabled);
817
+ --hop-Radio-box-background-color-disabled: var(--hop-neutral-surface-disabled);
818
+ --hop-Radio-bullet-color-disabled: var(--hop-neutral-icon-disabled);
819
+ --hop-Radio-text-color-disabled: var(--hop-neutral-text-disabled);
820
+ --hop-Radio-icon-color-disabled: var(--hop-neutral-icon-disabled);
821
+ --hop-Radio-box-border-color-focused: var(--hop-neutral-border-hover);
822
+ --hop-Radio-box-background-color-focused: var(--hop-neutral-surface-hover);
823
+ --hop-Radio-text-color-focused: var(--hop-neutral-text);
824
+ --hop-Radio-icon-color-focused: var(--hop-neutral-icon);
825
+ --hop-Radio-box-border-color-invalid: var(--hop-danger-border-strong);
826
+ --hop-Radio-box-background-color-invalid: var(--hop-neutral-surface);
827
+ --hop-Radio-box-border-color-hovered-invalid: var(--hop-danger-border-strong);
828
+ --hop-Radio-box-background-color-hovered-invalid: var(--hop-danger-surface);
829
+ --hop-Radio-box-border-color-pressed-invalid: var(--hop-danger-border-press);
830
+ --hop-Radio-box-background-color-pressed-invalid: var(--hop-danger-surface-weak);
831
+ --hop-Radio-box-border-color-focused-invalid: var(--hop-danger-border-strong);
832
+ --hop-Radio-box-background-color-focused-invalid: var(--hop-danger-surface);
833
+ --hop-Radio-box-border-color-selected-invalid: var(--hop-danger-border-strong);
834
+ --hop-Radio-box-background-color-selected-invalid: var(--hop-danger-surface-strong);
835
+ --hop-Radio-bullet-color-invalid: var(--hop-danger-icon-strong);
836
+ --hop-Radio-text-color-invalid: var(--hop-danger-text-weak);
837
+ --hop-Radio-icon-color-invalid: var(--hop-danger-icon-weak);
838
+ --hop-Radio-text-color-hovered-invalid: var(--hop-danger-text-weak-hover);
839
+ --hop-Radio-icon-color-hovered-invalid: var(--hop-danger-icon-weak-hover);
840
+ --hop-Radio-text-color-pressed-invalid: var(--hop-danger-text-weak-press);
841
+ --hop-Radio-box-sm-inline-size: 1rem;
842
+ --hop-Radio-box-sm-block-size: 1rem;
843
+ --hop-Radio-text-sm-top-offset: calc((var(--box-inline-size) - (var(--hop-body-sm-line-height) * var(--hop-body-sm-font-size))) / 2);
844
+ --hop-Radio-text-sm-margin-inline-start: calc(var(--hop-space-inline-sm) - var(--hop-space-inline-xs));
845
+ --hop-Radio-box-md-inline-size: 1.5rem;
846
+ --hop-Radio-box-md-block-size: 1.5rem;
847
+ --hop-Radio-text-md-top-offset: calc((var(--box-inline-size) - (var(--hop-body-md-line-height) * var(--hop-body-md-font-size))) / 2);
848
+ --hop-Radio-text-md-margin-inline-start: calc(var(--hop-space-inline-md) - var(--hop-space-inline-xs));
849
+ --box-background-color: var(--hop-Radio-box-background-color);
850
+ --box-border-color: var(--hop-Radio-box-border-color);
851
+ --box-border-radius: var(--hop-shape-circle);
852
+ --bullet-color: var(--hop-Radio-bullet-color);
853
+ --bullet-display: var(--hop-Radio-bullet-display);
854
+ --cursor: pointer;
855
+ --text-color: var(--hop-Radio-text-color);
856
+ --icon-color: var(--hop-Radio-icon-color);
857
+ --transition-duration: var(--hop-easing-duration-2);
858
+ cursor: var(--cursor);
859
+ display: flex;
860
+ column-gap: var(--hop-space-inline-xs);
861
+ align-items: flex-start;
862
+ justify-content: flex-start;
863
+ box-sizing: border-box;
864
+ inline-size: max-content;
865
+ max-inline-size: 100%;
866
+ }
867
+ .Radio-module__hop-Radio___8KZXA[data-focus-visible],
868
+ .Radio-module__hop-Radio--focused___UOv6k {
869
+ --box-background-color: var(--hop-Radio-box-background-color-focused);
870
+ --box-border-color: var(--hop-Radio-box-border-color-focused);
871
+ --box-outline: var(--hop-Radio-box-outline-size) solid var(--hop-Radio-box-outline-color);
872
+ --text-color: var(--hop-Radio-text-color-focused);
873
+ --icon-color: var(--hop-Radio-icon-color-focused);
874
+ }
875
+ .Radio-module__hop-Radio___8KZXA[data-hovered],
876
+ .Radio-module__hop-Radio--hovered___3648m {
877
+ --box-background-color: var(--hop-Radio-box-background-color-hovered);
878
+ --box-border-color: var(--hop-Radio-box-border-color-hovered);
879
+ --text-color: var(--hop-Radio-text-color-hovered);
880
+ --icon-color: var(--hop-Radio-icon-color-hovered);
881
+ }
882
+ .Radio-module__hop-Radio___8KZXA[data-pressed],
883
+ .Radio-module__hop-Radio--pressed___M5r4O {
884
+ --box-background-color: var(--hop-Radio-box-background-color-pressed);
885
+ --box-border-color: var(--hop-Radio-box-border-color-pressed);
886
+ --text-color: var(--hop-Radio-text-color-pressed);
887
+ --icon-color: var(--hop-Radio-icon-color-pressed);
888
+ }
889
+ .Radio-module__hop-Radio___8KZXA[data-selected] {
890
+ --box-background-color: var(--hop-Radio-box-background-color-selected);
891
+ --box-border-color: var(--hop-Radio-box-border-color-selected);
892
+ --bullet-display: var(--hop-Radio-bullet-display-selected);
893
+ --text-color: var(--hop-Radio-text-color-selected);
894
+ --icon-color: var(--hop-Radio-icon-color-selected);
895
+ }
896
+ .Radio-module__hop-Radio___8KZXA[data-invalid] {
897
+ --box-background-color: var(--hop-Radio-box-background-color-invalid);
898
+ --box-border-color: var(--hop-Radio-box-border-color-invalid);
899
+ --bullet-color: var(--hop-Radio-bullet-color-invalid);
900
+ --text-color: var(--hop-Radio-text-color-invalid);
901
+ --icon-color: var(--hop-Radio-icon-color-invalid);
902
+ }
903
+ .Radio-module__hop-Radio___8KZXA:where([data-invalid])[data-focus-visible] {
904
+ --box-background-color: var(--hop-Radio-box-background-color-focused-invalid);
905
+ --box-border-color: var(--hop-Radio-box-border-color-focused-invalid);
906
+ }
907
+ .Radio-module__hop-Radio___8KZXA:where([data-invalid])[data-hovered] {
908
+ --box-background-color: var(--hop-Radio-box-background-color-hovered-invalid);
909
+ --box-border-color: var(--hop-Radio-box-border-color-hovered-invalid);
910
+ --text-color: var(--hop-Radio-text-color-hovered-invalid);
911
+ --icon-color: var(--hop-Radio-text-color-hovered-invalid);
912
+ }
913
+ .Radio-module__hop-Radio___8KZXA:where([data-invalid])[data-pressed] {
914
+ --box-background-color: var(--hop-Radio-box-background-color-pressed-invalid);
915
+ --box-border-color: var(--hop-Radio-box-border-color-pressed-invalid);
916
+ --text-color: var(--hop-Radio-text-color-pressed-invalid);
917
+ --icon-color: var(--hop-Radio-icon-color-pressed-invalid);
918
+ }
919
+ .Radio-module__hop-Radio___8KZXA:where([data-invalid])[data-selected] {
920
+ --box-background-color: var(--hop-Radio-box-background-color-selected-invalid);
921
+ --box-border-color: var(--hop-Radio-box-border-color-selected-invalid);
922
+ }
923
+ .Radio-module__hop-Radio___8KZXA[data-disabled] {
924
+ --box-background-color: var(--hop-Radio-box-background-color-disabled);
925
+ --box-border-color: var(--hop-Radio-box-border-color-disabled);
926
+ --bullet-color: var(--hop-Radio-bullet-color-disabled);
927
+ --cursor: not-allowed;
928
+ --text-color: var(--hop-Radio-text-color-disabled);
929
+ --icon-color: var(--hop-Radio-icon-color-disabled);
930
+ }
931
+ .Radio-module__hop-Radio--sm___9nkSB {
932
+ --box-inline-size: var(--hop-Radio-box-sm-inline-size);
933
+ --box-block-size: var(--hop-Radio-box-sm-block-size);
934
+ --text-top-offset: var(--hop-Radio-text-sm-top-offset);
935
+ --text-margin-inline-start: var(--hop-Radio-text-sm-margin-inline-start);
936
+ }
937
+ .Radio-module__hop-Radio--md___FD8ks {
938
+ --box-inline-size: var(--hop-Radio-box-md-inline-size);
939
+ --box-block-size: var(--hop-Radio-box-md-block-size);
940
+ --text-top-offset: var(--hop-Radio-text-md-top-offset);
941
+ --text-margin-inline-start: var(--hop-Radio-text-md-margin-inline-start);
942
+ }
943
+ .Radio-module__hop-Radio__icon___Axpaq,
944
+ .Radio-module__hop-Radio__icon-list___TH7pN {
945
+ flex: 0 0 auto;
946
+ order: 3;
947
+ color: var(--icon-color);
948
+ }
949
+ .Radio-module__hop-Radio__box___wDQH6 {
950
+ display: flex;
951
+ flex: 0 0 auto;
952
+ align-items: center;
953
+ justify-content: center;
954
+ order: 1;
955
+ box-sizing: border-box;
956
+ inline-size: var(--box-inline-size, var(--hop-Radio-box-md-inline-size));
957
+ block-size: var(--box-block-size, var(--hop-Radio-box-md-block-size));
958
+ background-color: var(--box-background-color);
959
+ border: var(--hop-Radio-box-border-size) solid var(--box-border-color);
960
+ border-radius: var(--box-border-radius);
961
+ outline: var(--box-outline, none);
962
+ outline-offset: 0.125rem;
963
+ transition: background-color var(--transition-duration) var(--hop-easing-productive), border var(--transition-duration) var(--hop-easing-productive);
964
+ }
965
+ .Radio-module__hop-Radio__bullet___oXHWw {
966
+ display: var(--bullet-display);
967
+ color: var(--bullet-color);
968
+ }
969
+ .Radio-module__hop-Radio__text___Kqa3G {
970
+ flex: 0 1 auto;
971
+ order: 2;
972
+ min-inline-size: 0;
973
+ margin-block-start: var(--text-top-offset, var(--hop-Radio-text-md-top-offset));
974
+ margin-inline-start: var(--text-margin-inline-start, var(--hop-Radio-text-md-margin-inline-start));
975
+ color: var(--text-color);
976
+ }
977
+
978
+ /* css-module:/home/runner/work/wl-hopper/wl-hopper/packages/components/src/radio/src/RadioField.module.css/#css-module-data */
979
+ .RadioField-module__hop-RadioField___7cWiA {
980
+ --hop-RadioField-description-color: var(--hop-neutral-text-weak);
981
+ --hop-RadioField-description-color-disabled: var(--hop-neutral-text-disabled);
982
+ --hop-RadioField-sm-row-gap: var(--hop-space-stack-xs);
983
+ --hop-RadioField-radio-sm-inline-size: 1rem;
984
+ --hop-RadioField-description-sm-margin-inline-start: calc(var(--hop-RadioField-radio-sm-inline-size) + var(--hop-space-inline-sm));
985
+ --hop-RadioField-md-row-gap: var(--hop-space-stack-xs);
986
+ --hop-RadioField-radio-md-inline-size: 1.5rem;
987
+ --hop-RadioField-description-md-margin-inline-start: calc(var(--hop-RadioField-radio-md-inline-size) + var(--hop-space-inline-md));
988
+ --description-color: var(--hop-RadioField-description-color);
989
+ display: flex;
990
+ flex-direction: column;
991
+ row-gap: var(--row-gap, var(--hop-space-stack-sm));
992
+ align-items: flex-start;
993
+ justify-content: flex-start;
994
+ box-sizing: border-box;
995
+ inline-size: max-content;
996
+ max-inline-size: 100%;
997
+ }
998
+ .RadioField-module__hop-RadioField___7cWiA[data-disabled] {
999
+ --description-color: var(--hop-RadioField-description-color-disabled);
1000
+ }
1001
+ .RadioField-module__hop-RadioField--sm___Q6gn3 {
1002
+ --row-gap: var(--hop-RadioField-sm-row-gap);
1003
+ --description-margin-inline-start: var(--hop-RadioField-description-sm-margin-inline-start);
1004
+ }
1005
+ .RadioField-module__hop-RadioField--md___mzMoL {
1006
+ --row-gap: var(--hop-RadioField-md-row-gap);
1007
+ --description-margin-inline-start: var(--hop-RadioField-description-md-margin-inline-start);
1008
+ }
1009
+ .RadioField-module__hop-RadioField__description___-wcF0 {
1010
+ order: 2;
1011
+ margin-inline-start: var(--description-margin-inline-start, var(--hop-RadioField-description-md-margin-inline-start));
1012
+ color: var(--description-color);
1013
+ }
1014
+ .RadioField-module__hop-RadioField__radio___yCxtZ {
1015
+ order: 1;
1016
+ }
1017
+
1018
+ /* css-module:/home/runner/work/wl-hopper/wl-hopper/packages/components/src/radio/src/RadioGroup.module.css/#css-module-data */
1019
+ .RadioGroup-module__hop-RadioGroup___3D-CQ {
1020
+ --hop-RadioGroup-align-items: flex-start;
1021
+ --hop-RadioGroup-justify-content: flex-start;
1022
+ --hop-RadioGroup-bordered-border-color: var(--hop-neutral-border-weak);
1023
+ --hop-RadioGroup-sm-column-gap: var(--hop-space-inline-sm);
1024
+ --hop-RadioGroup-sm-row-gap: var(--hop-space-stack-sm);
1025
+ --hop-RadioGroup-list-sm-column-gap: var(--hop-space-inline-sm);
1026
+ --hop-RadioGroup-list-sm-row-gap: var(--hop-space-stack-sm);
1027
+ --hop-RadioGroup-bordered-sm-padding: var(--hop-space-inset-sm);
1028
+ --hop-RadioGroup-bordered-sm-column-gap: var(--hop-space-inline-sm);
1029
+ --hop-RadioGroup-bordered-sm-row-gap: var(--hop-space-stack-sm);
1030
+ --hop-RadioGroup-list-bordered-sm-column-gap: 0;
1031
+ --hop-RadioGroup-list-bordered-sm-row-gap: 0;
1032
+ --hop-RadioGroup-md-column-gap: var(--hop-space-inline-md);
1033
+ --hop-RadioGroup-md-row-gap: var(--hop-space-stack-md);
1034
+ --hop-RadioGroup-list-md-column-gap: var(--hop-space-inline-md);
1035
+ --hop-RadioGroup-list-md-row-gap: var(--hop-space-stack-md);
1036
+ --hop-RadioGroup-bordered-md-padding: var(--hop-space-inset-md);
1037
+ --hop-RadioGroup-bordered-md-column-gap: var(--hop-space-inline-sm);
1038
+ --hop-RadioGroup-bordered-md-row-gap: var(--hop-space-stack-sm);
1039
+ --hop-RadioGroup-list-bordered-md-column-gap: 0;
1040
+ --hop-RadioGroup-list-bordered-md-row-gap: 0;
1041
+ --hop-RadioGroup-vertical-flex-direction: column;
1042
+ --hop-RadioGroup-horizontal-flex-direction: row;
1043
+ --radio-border-size: 0.0625rem;
1044
+ --radio-border-color: var(--hop-neutral-border-weak);
1045
+ --flex-direction: var(--hop-RadioGroup-vertical-flex-direction);
1046
+ --align-items: var(--hop-RadioGroup-align-items);
1047
+ --justify-content: var(--hop-RadioGroup-justify-content);
1048
+ --flex-wrap: wrap;
1049
+ --inline-size: max-content;
1050
+ display: flex;
1051
+ flex-direction: column;
1052
+ gap: var(--row-gap, var(--hop-space-stack-md)) var(--column-gap, var(--hop-space-inline-md));
1053
+ align-items: var(--align-items);
1054
+ justify-content: var(--justify-content);
1055
+ box-sizing: border-box;
1056
+ inline-size: var(--inline-size);
1057
+ max-inline-size: 100%;
1058
+ }
1059
+ .RadioGroup-module__hop-RadioGroup--bordered___xUBDY {
1060
+ --list-border: var(--radio-border-size) solid var(--radio-border-color);
1061
+ --list-border-radius: var(--hop-shape-rounded-md);
1062
+ }
1063
+ .RadioGroup-module__hop-RadioGroup--sm___Wuezk {
1064
+ --column-gap: var(--hop-RadioGroup-sm-column-gap);
1065
+ --row-gap: var(--hop-RadioGroup-sm-row-gap);
1066
+ --list-column-gap: var(--hop-RadioGroup-list-sm-column-gap);
1067
+ --list-row-gap: var(--hop-RadioGroup-list-sm-row-gap);
1068
+ }
1069
+ .RadioGroup-module__hop-RadioGroup--md___qDKnW {
1070
+ --column-gap: var(--hop-RadioGroup-md-column-gap);
1071
+ --row-gap: var(--hop-RadioGroup-md-row-gap);
1072
+ --list-column-gap: var(--hop-RadioGroup-list-md-column-gap);
1073
+ --list-row-gap: var(--hop-RadioGroup-list-md-row-gap);
1074
+ }
1075
+ .RadioGroup-module__hop-RadioGroup--bordered___xUBDY.RadioGroup-module__hop-RadioGroup--sm___Wuezk {
1076
+ --radio-padding: var(--hop-RadioGroup-bordered-sm-padding);
1077
+ --column-gap: var(--hop-RadioGroup-bordered-sm-column-gap);
1078
+ --row-gap: var(--hop-RadioGroup-bordered-sm-row-gap);
1079
+ --list-column-gap: var(--hop-RadioGroup-list-bordered-sm-column-gap);
1080
+ --list-row-gap: var(--hop-RadioGroup-list-bordered-sm-row-gap);
1081
+ }
1082
+ .RadioGroup-module__hop-RadioGroup--bordered___xUBDY.RadioGroup-module__hop-RadioGroup--md___qDKnW {
1083
+ --radio-padding: var(--hop-RadioGroup-bordered-md-padding);
1084
+ --column-gap: var(--hop-RadioGroup-bordered-md-column-gap);
1085
+ --row-gap: var(--hop-RadioGroup-bordered-md-row-gap);
1086
+ --list-column-gap: var(--hop-RadioGroup-list-bordered-md-column-gap);
1087
+ --list-row-gap: var(--hop-RadioGroup-list-bordered-md-row-gap);
1088
+ }
1089
+ .RadioGroup-module__hop-RadioGroup___3D-CQ[data-orientation=horizontal] {
1090
+ --flex-direction: var(--hop-RadioGroup-horizontal-flex-direction);
1091
+ }
1092
+ .RadioGroup-module__hop-RadioGroup--bordered___xUBDY[data-orientation=horizontal] {
1093
+ --flex-wrap: nowrap;
1094
+ }
1095
+ .RadioGroup-module__hop-RadioGroup___3D-CQ > .RadioGroup-module__hop-RadioGroup__label___RPhTV {
1096
+ order: 1;
1097
+ }
1098
+ .RadioGroup-module__hop-RadioGroup__list___fsKD3 {
1099
+ display: flex;
1100
+ flex-flow: var(--flex-direction) var(--flex-wrap);
1101
+ gap: var(--list-row-gap, var(--hop-space-stack-md)) var(--list-column-gap, var(--hop-space-inline-md));
1102
+ order: 2;
1103
+ box-sizing: border-box;
1104
+ inline-size: var(--inline-size);
1105
+ max-inline-size: 100%;
1106
+ border: var(--list-border, none);
1107
+ border-radius: var(--list-border-radius, 0);
1108
+ }
1109
+ .RadioGroup-module__hop-RadioGroup__list___fsKD3 > .RadioGroup-module__hop-RadioGroup__radio___uu6mp {
1110
+ position: relative;
1111
+ flex: 0 1 auto;
1112
+ align-content: start;
1113
+ inline-size: auto;
1114
+ min-inline-size: 0;
1115
+ padding: var(--radio-padding, 0);
1116
+ }
1117
+ .RadioGroup-module__hop-RadioGroup--bordered___xUBDY .RadioGroup-module__hop-RadioGroup__list___fsKD3 > .RadioGroup-module__hop-RadioGroup__radio___uu6mp ~ .RadioGroup-module__hop-RadioGroup__radio___uu6mp::before {
1118
+ content: "";
1119
+ position: absolute;
1120
+ display: block;
1121
+ }
1122
+ .RadioGroup-module__hop-RadioGroup--bordered___xUBDY[data-orientation=vertical] .RadioGroup-module__hop-RadioGroup__list___fsKD3 > .RadioGroup-module__hop-RadioGroup__radio___uu6mp ~ .RadioGroup-module__hop-RadioGroup__radio___uu6mp::before {
1123
+ inset-block-start: 0;
1124
+ inset-inline: 0;
1125
+ border-block-start: var(--list-border, none);
1126
+ }
1127
+ .RadioGroup-module__hop-RadioGroup--bordered___xUBDY[data-orientation=horizontal] .RadioGroup-module__hop-RadioGroup__list___fsKD3 > .RadioGroup-module__hop-RadioGroup__radio___uu6mp ~ .RadioGroup-module__hop-RadioGroup__radio___uu6mp::before {
1128
+ inset-block: 0;
1129
+ inset-inline-start: 0;
1130
+ border-inline-start: var(--list-border, none);
1131
+ }
1132
+ .RadioGroup-module__hop-RadioGroup___3D-CQ > .RadioGroup-module__hop-RadioGroup__error-message___VVQJs,
1133
+ .RadioGroup-module__hop-RadioGroup___3D-CQ > .RadioGroup-module__hop-RadioGroup__helper-message___0axK9 {
1134
+ order: 3;
1135
+ }
1136
+
1137
+ /* css-module:/home/runner/work/wl-hopper/wl-hopper/packages/components/src/ListBox/src/ListBoxItemSkeleton.module.css/#css-module-data */
1138
+ .ListBoxItemSkeleton-module__hop-ListBoxItemSkeleton___TYOGA {
1139
+ --hop-ListBoxItemSkeleton-background-color: var(--hop-rock-50);
1140
+ --hop-ListBoxItemSkeleton-background-color-dark: var(--hop-rock-75);
1141
+ --hop-ListBoxItemSkeleton-border-radius: var(--hop-shape-rounded-md);
1142
+ --hop-ListBoxItemSkeleton-animation-duration: 1.4s;
1143
+ --hop-ListBoxItemSkeleton-animation-reduced-motion-duration: 3.4s;
1144
+ --hop-ListBoxItemSkeleton-linear-gradient:
1145
+ linear-gradient(
1146
+
1147
+ 90deg,
1148
+ var(--hop-ListBoxItemSkeleton-background-color) 25%,
1149
+ var(--hop-ListBoxItemSkeleton-background-color-dark) 37%,
1150
+ var(--hop-ListBoxItemSkeleton-background-color-dark) 63%,
1151
+ var(--hop-ListBoxItemSkeleton-background-color) 100% );
1152
+ --hop-ListBoxItemSkeleton-xs-height: 1.25rem;
1153
+ --hop-ListBoxItemSkeleton-sm-height: 1.25rem;
1154
+ --hop-ListBoxItemSkeleton-md-height: 1.25rem;
1155
+ --hop-ListBoxItemSkeleton-lg-height: 1.5rem;
1156
+ --animation-duration: var(--hop-ListBoxItemSkeleton-animation-duration);
1157
+ grid-area: label;
1158
+ box-sizing: border-box;
1159
+ block-size: var(--height);
1160
+ background-color: var(--hop-ListBoxItemSkeleton-background-color);
1161
+ background-image: var(--hop-ListBoxItemSkeleton-linear-gradient);
1162
+ background-size: 400% 100%;
1163
+ border-radius: var(--hop-ListBoxItemSkeleton-border-radius);
1164
+ animation-name: ListBoxItemSkeleton-module__placeholder-shimmer___yey8v;
1165
+ animation-duration: var(--animation-duration);
1166
+ animation-timing-function: ease-in-out;
1167
+ animation-fill-mode: forwards;
1168
+ animation-iteration-count: infinite;
1169
+ @media (prefers-reduced-motion: reduce) {
1170
+ --animation-duration: var(--hop-ListBoxItemSkeleton-animation-reduced-motion-duration);
1171
+ }
1172
+ }
1173
+ .ListBoxItemSkeleton-module__hop-ListBoxItemSkeleton--xs___DQWyN {
1174
+ --height: var(--hop-ListBoxItemSkeleton-xs-height);
1175
+ }
1176
+ .ListBoxItemSkeleton-module__hop-ListBoxItemSkeleton--sm___dV4JT {
1177
+ --height: var(--hop-ListBoxItemSkeleton-sm-height);
1178
+ }
1179
+ .ListBoxItemSkeleton-module__hop-ListBoxItemSkeleton--md___RExw1 {
1180
+ --height: var(--hop-ListBoxItemSkeleton-md-height);
1181
+ }
1182
+ .ListBoxItemSkeleton-module__hop-ListBoxItemSkeleton--lg___jni6f {
1183
+ --height: var(--hop-ListBoxItemSkeleton-lg-height);
1184
+ }
1185
+ @keyframes ListBoxItemSkeleton-module__placeholder-shimmer___yey8v {
1186
+ 0% {
1187
+ background-position: 125% 50%;
1188
+ }
1189
+ 100% {
1190
+ background-position: -25% 50%;
1191
+ }
1192
+ }
1193
+
1194
+ /* css-module:/home/runner/work/wl-hopper/wl-hopper/packages/components/src/ListBox/src/ListBoxItem.module.css/#css-module-data */
1195
+ .ListBoxItem-module__hop-ListBoxItem___0duRn {
1196
+ --hop-ListBoxItem-background-color: transparent;
1197
+ --hop-ListBoxItem-border-radius: var(--hop-shape-rounded-md);
1198
+ --hop-ListBoxItem-text-color: var(--hop-neutral-text);
1199
+ --hop-ListBoxItem-icon-color: var(--hop-neutral-icon);
1200
+ --hop-ListBoxItem-outline-size: 0.125rem;
1201
+ --hop-ListBoxItem-outline-color: var(--hop-primary-border-focus);
1202
+ --hop-ListBoxItem-row-gap: var(--hop-space-stack-xs);
1203
+ --hop-ListBoxItem-column-gap: var(--hop-space-inline-sm);
1204
+ --hop-ListBoxItem-indicator-inline-size: calc( 1rem + var(--hop-ListBoxItem-column-gap));
1205
+ --hop-ListBoxItem-description-text-color: var(--hop-neutral-text-weak);
1206
+ --hop-ListBoxItem-grid-template-areas: "indicator avatar icon label end-icon badge";
1207
+ --hop-ListBoxItem-grid-template-areas-with-description: "indicator avatar icon label end-icon badge" ". . . description description description";
1208
+ --hop-ListBoxItem-grid-template-areas-loading: "label";
1209
+ --hop-ListBoxItem-grid-template-columns: var(--hop-ListBoxItem-indicator-inline-size) auto auto 1fr auto auto;
1210
+ --hop-ListBoxItem-grid-template-columns-not-selected: 0 auto auto 1fr auto auto;
1211
+ --hop-ListBoxItem-grid-template-columns-loading: 1fr;
1212
+ --hop-ListBoxItem-badge-margin-block: calc(-1 * (var(--hop-space-stack-xs) / 2));
1213
+ --hop-ListBoxItem-xs-padding-block: var(--hop-space-inset-xs);
1214
+ --hop-ListBoxItem-xs-padding-inline: var(--hop-space-inset-md);
1215
+ --hop-ListBoxItem-xs-min-height: 2rem;
1216
+ --hop-ListBoxItem-xs-avatar-margin-block: 0;
1217
+ --hop-ListBoxItem-xs-label-font-weight: var(--hop-body-sm-font-weight);
1218
+ --hop-ListBoxItem-xs-label-font-weight-selected: var(--hop-body-sm-medium-font-weight);
1219
+ --hop-ListBoxItem-sm-padding-block: var(--hop-space-inset-sm);
1220
+ --hop-ListBoxItem-sm-padding-inline: var(--hop-space-inset-md);
1221
+ --hop-ListBoxItem-sm-min-height: 2.5rem;
1222
+ --hop-ListBoxItem-sm-avatar-margin-block: 0;
1223
+ --hop-ListBoxItem-sm-label-font-weight: var(--hop-body-sm-font-weight);
1224
+ --hop-ListBoxItem-sm-label-font-weight-selected: var(--hop-body-sm-medium-font-weight);
1225
+ --hop-ListBoxItem-md-padding-block: var(--hop-space-inset-md);
1226
+ --hop-ListBoxItem-md-padding-inline: var(--hop-space-inset-md);
1227
+ --hop-ListBoxItem-md-min-height: 3.5rem;
1228
+ --hop-ListBoxItem-md-avatar-margin-block: calc(-1 * var(--hop-space-stack-xs));
1229
+ --hop-ListBoxItem-md-label-font-weight: var(--hop-body-sm-font-weight);
1230
+ --hop-ListBoxItem-md-label-font-weight-selected: var(--hop-body-sm-medium-font-weight);
1231
+ --hop-ListBoxItem-lg-padding-block: var(--hop-space-inset-md);
1232
+ --hop-ListBoxItem-lg-padding-inline: var(--hop-space-inset-md);
1233
+ --hop-ListBoxItem-lg-min-height: 4rem;
1234
+ --hop-ListBoxItem-lg-avatar-margin-block: calc(-1 * var(--hop-space-stack-xs));
1235
+ --hop-ListBoxItem-lg-label-font-weight: var(--hop-body-md-font-weight);
1236
+ --hop-ListBoxItem-lg-label-font-weight-selected: var(--hop-body-md-medium-font-weight);
1237
+ --hop-ListBoxItem-background-color-hovered: var(--hop-neutral-surface-hover);
1238
+ --hop-ListBoxItem-text-color-hovered: var(--hop-neutral-text-hover);
1239
+ --hop-ListBoxItem-icon-color-hovered: var(--hop-neutral-icon-hover);
1240
+ --hop-ListBoxItem-background-color-pressed: var(--hop-neutral-surface-press);
1241
+ --hop-ListBoxItem-text-color-pressed: var(--hop-neutral-text-press);
1242
+ --hop-ListBoxItem-icon-color-pressed: var(--hop-neutral-icon-press);
1243
+ --hop-ListBoxItem-background-color-focused: var(--hop-neutral-surface-hover);
1244
+ --hop-ListBoxItem-text-color-focused: var(--hop-neutral-text-hover);
1245
+ --hop-ListBoxItem-icon-color-focused: var(--hop-neutral-icon-hover);
1246
+ --hop-ListBoxItem-background-color-selected: transparent;
1247
+ --hop-ListBoxItem-text-color-selected: var(--hop-neutral-text);
1248
+ --hop-ListBoxItem-icon-color-selected: var(--hop-neutral-icon);
1249
+ --hop-ListBoxItem-background-color-invalid: transparent;
1250
+ --hop-ListBoxItem-background-color-invalid-hovered: var(--hop-danger-surface-hover);
1251
+ --hop-ListBoxItem-background-color-invalid-pressed: var(--hop-danger-surface-press);
1252
+ --hop-ListBoxItem-background-color-invalid-focused: var(--hop-danger-surface-hover);
1253
+ --hop-ListBoxItem-background-color-invalid-selected: transparent;
1254
+ --hop-ListBoxItem-background-color-invalid-disabled: transparent;
1255
+ --hop-ListBoxItem-text-color-invalid: var(--hop-danger-text-weak);
1256
+ --hop-ListBoxItem-text-color-invalid-hovered: var(--hop-danger-text-strong);
1257
+ --hop-ListBoxItem-text-color-invalid-pressed: var(--hop-danger-text-strong);
1258
+ --hop-ListBoxItem-text-color-invalid-focused: var(--hop-danger-text-strong);
1259
+ --hop-ListBoxItem-text-color-invalid-selected: var(--hop-danger-text-weak);
1260
+ --hop-ListBoxItem-text-color-invalid-disabled: var(--hop-danger-text-disabled);
1261
+ --hop-ListBoxItem-icon-color-invalid: var(--hop-danger-icon-weak);
1262
+ --hop-ListBoxItem-icon-color-invalid-hovered: var(--hop-danger-icon-strong);
1263
+ --hop-ListBoxItem-icon-color-invalid-pressed: var(--hop-danger-icon-strong);
1264
+ --hop-ListBoxItem-icon-color-invalid-focused: var(--hop-danger-icon-strong);
1265
+ --hop-ListBoxItem-icon-color-invalid-selected: var(--hop-danger-icon-weak);
1266
+ --hop-ListBoxItem-icon-color-invalid-disabled: var(--hop-danger-icon-disabled);
1267
+ --hop-ListBoxItem-description-text-color-invalid-hovered: inherit;
1268
+ --hop-ListBoxItem-description-text-color-invalid-pressed: inherit;
1269
+ --hop-ListBoxItem-description-text-color-invalid-focused: inherit;
1270
+ --hop-ListBoxItem-background-color-disabled: transparent;
1271
+ --hop-ListBoxItem-text-color-disabled: var(--hop-neutral-text-disabled);
1272
+ --hop-ListBoxItem-icon-color-disabled: var(--hop-neutral-icon-disabled);
1273
+ --background-color: var(--hop-ListBoxItem-background-color);
1274
+ --text-color: var(--hop-ListBoxItem-text-color);
1275
+ --icon-color: var(--hop-ListBoxItem-icon-color);
1276
+ --outline: none;
1277
+ --cursor: default;
1278
+ --checkmark-opacity: 0;
1279
+ --description-text-color: var(--hop-ListBoxItem-description-text-color);
1280
+ --row-gap: 0;
1281
+ --grid-template-areas: var(--hop-ListBoxItem-grid-template-areas);
1282
+ --grid-template-columns: var(--hop-ListBoxItem-grid-template-columns);
1283
+ --checkmark-transition: opacity 0.2s ease-in-out .2s;
1284
+ cursor: var(--cursor);
1285
+ box-sizing: border-box;
1286
+ color: var(--text-color);
1287
+ background-color: var(--background-color);
1288
+ border-radius: var(--hop-ListBoxItem-border-radius);
1289
+ outline: var(--outline);
1290
+ outline-offset: calc(-1 * var(--hop-ListBoxItem-outline-size));
1291
+ }
1292
+ .ListBoxItem-module__hop-ListBoxItem--xs___dm4VD {
1293
+ --padding-block: var(--hop-ListBoxItem-xs-padding-block);
1294
+ --padding-inline: var(--hop-ListBoxItem-xs-padding-inline);
1295
+ --min-height: var(--hop-ListBoxItem-xs-min-height);
1296
+ --avatar-margin-block: var(--hop-ListBoxItem-xs-avatar-margin-block);
1297
+ --label-font-weight: var(--hop-ListBoxItem-xs-label-font-weight);
1298
+ }
1299
+ .ListBoxItem-module__hop-ListBoxItem--sm___Dykwg {
1300
+ --padding-block: var(--hop-ListBoxItem-sm-padding-block);
1301
+ --padding-inline: var(--hop-ListBoxItem-sm-padding-inline);
1302
+ --min-height: var(--hop-ListBoxItem-sm-min-height);
1303
+ --avatar-margin-block: var(--hop-ListBoxItem-sm-avatar-margin-block);
1304
+ --label-font-weight: var(--hop-ListBoxItem-sm-label-font-weight);
1305
+ }
1306
+ .ListBoxItem-module__hop-ListBoxItem--md___LbxNg {
1307
+ --padding-block: var(--hop-ListBoxItem-md-padding-block);
1308
+ --padding-inline: var(--hop-ListBoxItem-md-padding-inline);
1309
+ --min-height: var(--hop-ListBoxItem-md-min-height);
1310
+ --avatar-margin-block: var(--hop-ListBoxItem-md-avatar-margin-block);
1311
+ --label-font-weight: var(--hop-ListBoxItem-md-label-font-weight);
1312
+ }
1313
+ .ListBoxItem-module__hop-ListBoxItem--lg___XU3oU {
1314
+ --padding-block: var(--hop-ListBoxItem-lg-padding-block);
1315
+ --padding-inline: var(--hop-ListBoxItem-lg-padding-inline);
1316
+ --min-height: var(--hop-ListBoxItem-lg-min-height);
1317
+ --avatar-margin-block: var(--hop-ListBoxItem-lg-avatar-margin-block);
1318
+ --label-font-weight: var(--hop-ListBoxItem-lg-label-font-weight);
1319
+ }
1320
+ .ListBoxItem-module__hop-ListBoxItem___0duRn[data-selection-mode] {
1321
+ --cursor: pointer;
1322
+ }
1323
+ .ListBoxItem-module__hop-ListBoxItem___0duRn:not([data-selection-mode]) {
1324
+ --grid-template-columns: var(--hop-ListBoxItem-grid-template-columns-not-selected);
1325
+ }
1326
+ .ListBoxItem-module__hop-ListBoxItem__inner___GE9a-:not([data-list-has-selection]):has(.ListBoxItem-module__hop-ListBoxItem__checkmark___Fe3CI) {
1327
+ --grid-template-columns: var(--hop-ListBoxItem-grid-template-columns-not-selected);
1328
+ }
1329
+ .ListBoxItem-module__hop-ListBoxItem__inner___GE9a-[data-list-has-selection-end]:has(.ListBoxItem-module__hop-ListBoxItem__checkmark___Fe3CI) {
1330
+ --checkmark-transition: none;
1331
+ }
1332
+ .ListBoxItem-module__hop-ListBoxItem___0duRn[data-selected] {
1333
+ --background-color: var(--hop-ListBoxItem-background-color-selected);
1334
+ --text-color: var(--hop-ListBoxItem-text-color-selected);
1335
+ --icon-color: var(--hop-ListBoxItem-icon-color-selected);
1336
+ --checkmark-opacity: 1;
1337
+ }
1338
+ .ListBoxItem-module__hop-ListBoxItem--xs___dm4VD[data-selected] {
1339
+ --label-font-weight: var(--hop-ListBoxItem-xs-label-font-weight-selected);
1340
+ }
1341
+ .ListBoxItem-module__hop-ListBoxItem--sm___Dykwg[data-selected] {
1342
+ --label-font-weight: var(--hop-ListBoxItem-sm-label-font-weight-selected);
1343
+ }
1344
+ .ListBoxItem-module__hop-ListBoxItem--md___LbxNg[data-selected] {
1345
+ --label-font-weight: var(--hop-ListBoxItem-md-label-font-weight-selected);
1346
+ }
1347
+ .ListBoxItem-module__hop-ListBoxItem--lg___XU3oU[data-selected] {
1348
+ --label-font-weight: var(--hop-ListBoxItem-lg-label-font-weight-selected);
1349
+ }
1350
+ .ListBoxItem-module__hop-ListBoxItem___0duRn[data-focus-visible] {
1351
+ --background-color: var(--hop-ListBoxItem-background-color-focused);
1352
+ --text-color: var(--hop-ListBoxItem-text-color-focused);
1353
+ --icon-color: var(--hop-ListBoxItem-icon-color-focused);
1354
+ --outline: var(--hop-ListBoxItem-outline-size) solid var(--hop-ListBoxItem-outline-color);
1355
+ }
1356
+ .ListBoxItem-module__hop-ListBoxItem___0duRn[data-hovered] {
1357
+ --background-color: var(--hop-ListBoxItem-background-color-hovered);
1358
+ --text-color: var(--hop-ListBoxItem-text-color-hovered);
1359
+ --icon-color: var(--hop-ListBoxItem-icon-color-hovered);
1360
+ }
1361
+ .ListBoxItem-module__hop-ListBoxItem___0duRn[data-pressed] {
1362
+ --background-color: var(--hop-ListBoxItem-background-color-pressed);
1363
+ --text-color: var(--hop-ListBoxItem-text-color-pressed);
1364
+ --icon-color: var(--hop-ListBoxItem-icon-color-pressed);
1365
+ }
1366
+ .ListBoxItem-module__hop-ListBoxItem___0duRn[data-disabled] {
1367
+ --background-color: var(--hop-ListBoxItem-background-color-disabled);
1368
+ --text-color: var(--hop-ListBoxItem-text-color-disabled);
1369
+ --icon-color: var(--hop-ListBoxItem-icon-color-disabled);
1370
+ --description-text-color: var(--hop-ListBoxItem-text-color-disabled);
1371
+ --cursor: not-allowed;
1372
+ }
1373
+ .ListBoxItem-module__hop-ListBoxItem___0duRn[data-invalid] {
1374
+ --background-color: var(--hop-ListBoxItem-background-color-invalid);
1375
+ --text-color: var(--hop-ListBoxItem-text-color-invalid);
1376
+ --icon-color: var(--hop-ListBoxItem-icon-color-invalid);
1377
+ }
1378
+ .ListBoxItem-module__hop-ListBoxItem___0duRn[data-invalid][data-selected] {
1379
+ --background-color: var(--hop-ListBoxItem-background-color-invalid-selected);
1380
+ --text-color: var(--hop-ListBoxItem-text-color-invalid-selected);
1381
+ --icon-color: var(--hop-ListBoxItem-icon-color-invalid-selected);
1382
+ }
1383
+ .ListBoxItem-module__hop-ListBoxItem___0duRn[data-invalid][data-focus-visible] {
1384
+ --background-color: var(--hop-ListBoxItem-background-color-invalid-focused);
1385
+ --text-color: var(--hop-ListBoxItem-text-color-invalid-focused);
1386
+ --icon-color: var(--hop-ListBoxItem-icon-color-invalid-focused);
1387
+ --description-text-color: var(--hop-ListBoxItem-description-text-color-invalid-focused);
1388
+ }
1389
+ .ListBoxItem-module__hop-ListBoxItem___0duRn[data-invalid][data-hovered] {
1390
+ --background-color: var(--hop-ListBoxItem-background-color-invalid-hovered);
1391
+ --text-color: var(--hop-ListBoxItem-text-color-invalid-hovered);
1392
+ --icon-color: var(--hop-ListBoxItem-icon-color-invalid-hovered);
1393
+ --description-text-color: var(--hop-ListBoxItem-description-text-color-invalid-hovered);
1394
+ }
1395
+ .ListBoxItem-module__hop-ListBoxItem___0duRn[data-invalid][data-pressed] {
1396
+ --background-color: var(--hop-ListBoxItem-background-color-invalid-pressed);
1397
+ --text-color: var(--hop-ListBoxItem-text-color-invalid-pressed);
1398
+ --icon-color: var(--hop-ListBoxItem-icon-color-invalid-pressed);
1399
+ --description-text-color: var(--hop-ListBoxItem-description-text-color-invalid-pressed);
1400
+ }
1401
+ .ListBoxItem-module__hop-ListBoxItem___0duRn[data-invalid][data-disabled] {
1402
+ --background-color: var(--hop-ListBoxItem-background-color-invalid-disabled);
1403
+ --text-color: var(--hop-ListBoxItem-text-color-invalid-disabled);
1404
+ --icon-color: var(--hop-ListBoxItem-icon-color-invalid-disabled);
1405
+ }
1406
+ .ListBoxItem-module__hop-ListBoxItem___0duRn:has(.ListBoxItem-module__hop-ListBoxItem__description___-pa0W) {
1407
+ --row-gap: var(--hop-ListBoxItem-row-gap);
1408
+ --grid-template-areas: var(--hop-ListBoxItem-grid-template-areas-with-description);
1409
+ }
1410
+ .ListBoxItem-module__hop-ListBoxItem___0duRn[data-loading] {
1411
+ --grid-template-areas: var(--hop-ListBoxItem-grid-template-areas-loading);
1412
+ --grid-template-columns: var(--hop-ListBoxItem-grid-template-columns-loading);
1413
+ }
1414
+ .ListBoxItem-module__hop-ListBoxItem__inner___GE9a- {
1415
+ display: grid;
1416
+ grid-template-areas: var(--grid-template-areas);
1417
+ grid-template-columns: var(--grid-template-columns);
1418
+ row-gap: var(--row-gap);
1419
+ align-items: center;
1420
+ box-sizing: border-box;
1421
+ min-block-size: var(--min-height);
1422
+ padding-block: var(--padding-block);
1423
+ padding-inline: var(--padding-inline);
1424
+ transition: grid-template-columns .3s ease-in-out;
1425
+ }
1426
+ .ListBoxItem-module__hop-ListBoxItem__checkmark___Fe3CI {
1427
+ grid-area: indicator;
1428
+ margin-inline-end: var(--hop-ListBoxItem-column-gap);
1429
+ color: var(--icon-color);
1430
+ opacity: var(--checkmark-opacity);
1431
+ transition: var(--checkmark-transition);
1432
+ }
1433
+ .ListBoxItem-module__hop-ListBoxItem__radio-group___hSfVk,
1434
+ .ListBoxItem-module__hop-ListBoxItem__checkbox___Zclpw {
1435
+ pointer-events: none;
1436
+ user-select: none;
1437
+ grid-area: indicator;
1438
+ margin-inline-end: var(--hop-ListBoxItem-column-gap);
1439
+ }
1440
+ .ListBoxItem-module__hop-ListBoxItem__avatar___BOBDw {
1441
+ grid-area: avatar;
1442
+ margin-block: var(--avatar-margin-block, 0);
1443
+ margin-inline-end: var(--hop-ListBoxItem-column-gap);
1444
+ }
1445
+ .ListBoxItem-module__hop-ListBoxItem__icon-list___XbL4U,
1446
+ .ListBoxItem-module__hop-ListBoxItem__icon___yllrL {
1447
+ grid-area: icon;
1448
+ flex: 0 0 auto;
1449
+ margin-inline-end: var(--hop-ListBoxItem-column-gap);
1450
+ color: var(--icon-color);
1451
+ }
1452
+ .ListBoxItem-module__hop-ListBoxItem__label___KYWRG {
1453
+ overflow: hidden;
1454
+ grid-area: label;
1455
+ min-inline-size: 0;
1456
+ font-weight: var(--label-font-weight);
1457
+ text-overflow: ellipsis;
1458
+ white-space: nowrap;
1459
+ }
1460
+ .ListBoxItem-module__hop-ListBoxItem__end-icon-list___MRDNE,
1461
+ .ListBoxItem-module__hop-ListBoxItem__end-icon___TPYxZ {
1462
+ grid-area: end-icon;
1463
+ margin-inline-start: var(--hop-ListBoxItem-column-gap);
1464
+ color: var(--icon-color);
1465
+ }
1466
+ .ListBoxItem-module__hop-ListBoxItem__badge___gTJYQ {
1467
+ grid-area: badge;
1468
+ margin-block: var(--hop-ListBoxItem-badge-margin-block);
1469
+ margin-inline-start: var(--hop-ListBoxItem-column-gap);
1470
+ }
1471
+ .ListBoxItem-module__hop-ListBoxItem__description___-pa0W {
1472
+ overflow: hidden;
1473
+ display: -webkit-box;
1474
+ grid-area: description;
1475
+ -webkit-box-orient: vertical;
1476
+ -webkit-line-clamp: 2;
1477
+ line-clamp: 2;
1478
+ color: var(--description-text-color);
1479
+ }
1480
+
1481
+ /* css-module:/home/runner/work/wl-hopper/wl-hopper/packages/components/src/ListBox/src/ListBox.module.css/#css-module-data */
1482
+ .ListBox-module__hop-ListBox___FMNx2 {
1483
+ --hop-ListBox-background-color: var(--hop-neutral-surface);
1484
+ --hop-ListBox-border-color: var(--hop-neutral-border-weak);
1485
+ --hop-ListBox-border-radius: var(--hop-shape-rounded-md);
1486
+ --hop-ListBox-border-size: 0.0625rem;
1487
+ --hop-ListBox-padding-inline: var(--hop-space-inset-sm);
1488
+ --hop-ListBox-padding-block: var(--hop-space-inset-sm);
1489
+ --hop-ListBox-min-width: 13.625rem;
1490
+ --hop-ListBox-max-width: 18rem;
1491
+ --hop-ListBox-width: max-content;
1492
+ --hop-ListBox-fluid-width: 100%;
1493
+ --hop-ListBox-fluid-max-width: 100%;
1494
+ --hop-ListBox-section-padding-block: var(--hop-ListBox-padding-block);
1495
+ --hop-ListBox-section-padding-inline: var(--hop-ListBox-padding-inline);
1496
+ --hop-ListBox-section-margin-block: var(--hop-space-stack-sm);
1497
+ --hop-ListBox-section-margin-inline: calc(-1 * var(--hop-ListBox-padding-inline));
1498
+ --hop-ListBox-section-border-size: var(--hop-ListBox-border-size);
1499
+ --hop-ListBox-section-border-color: var(--hop-ListBox-border-color);
1500
+ --hop-ListBox-section-header-color: var(--hop-neutral-text-weak);
1501
+ --hop-ListBox-section-header-font-family: var(--hop-overline-font-family);
1502
+ --hop-ListBox-section-header-font-size: var(--hop-overline-font-size);
1503
+ --hop-ListBox-section-header-font-weight: var(--hop-overline-font-weight);
1504
+ --hop-ListBox-section-header-letter-spacing: 0.015rem;
1505
+ --hop-ListBox-section-header-line-height: var(--hop-overline-line-height);
1506
+ --hop-ListBox-section-header-text-transform: uppercase;
1507
+ --hop-ListBox-section-header-padding: var(--hop-space-inset-stretch-sm);
1508
+ --hop-ListBox-section-header-top-offset: var(--hop-overline-top-offset);
1509
+ --hop-ListBox-section-header-bottom-offset: var(--hop-overline-bottom-offset);
1510
+ --hop-ListBox-divider-margin-block: var(--hop-space-stack-sm);
1511
+ --hop-ListBox-divider-margin-inline: calc(-1 * var(--hop-ListBox-padding-inline));
1512
+ --max-width: var(--hop-ListBox-max-width);
1513
+ --width: var(--hop-ListBox-width);
1514
+ --section-padding-block-start: var(--hop-ListBox-section-padding-block);
1515
+ --section-padding-block-end: var(--hop-ListBox-section-padding-block);
1516
+ --section-margin-block-start: 0;
1517
+ --section-margin-block-end: 0;
1518
+ --section-border-block-start: 0;
1519
+ --section-border-block-end: var(--hop-ListBox-section-border-size) solid var(--hop-ListBox-section-border-color);
1520
+ overflow: hidden auto;
1521
+ box-sizing: border-box;
1522
+ inline-size: var(--width);
1523
+ min-inline-size: var(--hop-ListBox-min-width);
1524
+ max-inline-size: var(--max-width);
1525
+ padding-block: var(--hop-ListBox-padding-block);
1526
+ padding-inline: var(--hop-ListBox-padding-inline);
1527
+ background-color: var(--hop-ListBox-background-color);
1528
+ border: var(--hop-ListBox-border-size) solid var(--hop-ListBox-border-color);
1529
+ border-radius: var(--hop-ListBox-border-radius);
1530
+ }
1531
+ .ListBox-module__hop-ListBox--fluid___GbXKG {
1532
+ --max-width: var(--hop-ListBox-fluid-max-width);
1533
+ --width: var(--hop-ListBox-fluid-width);
1534
+ }
1535
+ .ListBox-module__hop-ListBox__section___BDi3P {
1536
+ margin-block: var(--section-margin-block-start) var(--section-margin-block-end);
1537
+ margin-inline: var(--hop-ListBox-section-margin-inline);
1538
+ padding-block: var(--section-padding-block-start) var(--section-padding-block-end);
1539
+ padding-inline: var(--hop-ListBox-section-padding-inline);
1540
+ border-block-start: var(--section-border-block-start);
1541
+ border-block-end: var(--section-border-block-end);
1542
+ }
1543
+ .ListBox-module__hop-ListBox__item___mh8wf + .ListBox-module__hop-ListBox__section___BDi3P {
1544
+ --section-margin-block-start: var(--hop-ListBox-section-margin-block);
1545
+ --section-border-block-start: var(--hop-ListBox-section-border-size) solid var(--hop-ListBox-section-border-color);
1546
+ }
1547
+ .ListBox-module__hop-ListBox__section___BDi3P:has(+ .ListBox-module__hop-ListBox__item___mh8wf) {
1548
+ --section-margin-block-end: var(--hop-ListBox-section-margin-block);
1549
+ }
1550
+ .ListBox-module__hop-ListBox__section___BDi3P:first-child {
1551
+ --section-padding-block-start: 0;
1552
+ }
1553
+ .ListBox-module__hop-ListBox__section___BDi3P:last-child {
1554
+ --section-padding-block-end: 0;
1555
+ --section-border-block-end: 0;
1556
+ }
1557
+ .ListBox-module__hop-ListBox__section-header___zF1td {
1558
+ margin: 0;
1559
+ padding: var(--hop-ListBox-section-header-padding);
1560
+ font-family: var(--hop-ListBox-section-header-font-family);
1561
+ font-size: var(--hop-ListBox-section-header-font-size);
1562
+ font-weight: var(--hop-ListBox-section-header-font-weight);
1563
+ line-height: var(--hop-ListBox-section-header-line-height);
1564
+ color: var(--hop-ListBox-section-header-color);
1565
+ text-transform: var(--hop-ListBox-section-header-text-transform);
1566
+ letter-spacing: var(--hop-ListBox-section-header-letter-spacing);
1567
+ }
1568
+ .ListBox-module__hop-ListBox__section-header___zF1td::before,
1569
+ .ListBox-module__hop-ListBox__section-header___zF1td::after {
1570
+ content: "";
1571
+ display: block;
1572
+ box-sizing: border-box;
1573
+ inline-size: 0;
1574
+ block-size: 0;
1575
+ }
1576
+ .ListBox-module__hop-ListBox__section-header___zF1td::before {
1577
+ margin-block-end: var(--hop-ListBox-section-header-bottom-offset);
1578
+ }
1579
+ .ListBox-module__hop-ListBox__section-header___zF1td::after {
1580
+ margin-block-start: var(--hop-ListBox-section-header-top-offset);
1581
+ }
1582
+ .ListBox-module__hop-ListBox__divider___RLZsm {
1583
+ margin-block: var(--hop-ListBox-divider-margin-block);
1584
+ margin-inline: var(--hop-ListBox-divider-margin-inline);
1585
+ }
1586
+
1587
+ /* css-module:/home/runner/work/wl-hopper/wl-hopper/packages/components/src/Spinner/src/Spinner.module.css/#css-module-data */
1588
+ @keyframes Spinner-module__spin___gZdkA {
1589
+ 0% {
1590
+ transform: rotate(0deg);
1591
+ }
1592
+ 100% {
1593
+ transform: rotate(360deg);
1594
+ }
1595
+ }
1596
+ .Spinner-module__hop-Spinner___lbVrH {
1597
+ --hop-Spinner-border-radius: var(--hop-shape-circle);
1598
+ --hop-Spinner-sm-wheel-size: 1rem;
1599
+ --hop-Spinner-md-wheel-size: 1.25rem;
1600
+ --hop-Spinner-lg-wheel-size: 1.5rem;
1601
+ --hop-Spinner-track-width: 0.125rem;
1602
+ --hop-Spinner-track-opacity: 0.2;
1603
+ --hop-Spinner-track-border: var(--hop-Spinner-track-width) solid currentcolor;
1604
+ --hop-Spinner-fill-animation: Spinner-module__spin___gZdkA .8s infinite linear;
1605
+ --hop-Spinner-fill-animation-reduced-motion-duration: 2s;
1606
+ --hop-Spinner-fill-border: var(--hop-Spinner-track-width) solid transparent;
1607
+ --hop-Spinner-fill-border-inline-start: var(--hop-Spinner-track-width) solid currentcolor;
1608
+ --hop-Spinner-label-margin-inline-start: var(--hop-space-inline-sm);
1609
+ display: grid;
1610
+ grid-template-areas: "spinner label";
1611
+ grid-template-columns: min-content auto;
1612
+ align-items: center;
1613
+ box-sizing: border-box;
1614
+ }
1615
+ .Spinner-module__hop-Spinner--sm___Fq8e0 {
1616
+ --width: var(--hop-Spinner-sm-wheel-size);
1617
+ --height: var(--hop-Spinner-sm-wheel-size);
1618
+ }
1619
+ .Spinner-module__hop-Spinner--md___MNc-8 {
1620
+ --width: var(--hop-Spinner-md-wheel-size);
1621
+ --height: var(--hop-Spinner-md-wheel-size);
1622
+ }
1623
+ .Spinner-module__hop-Spinner--lg___dlN-q {
1624
+ --width: var(--hop-Spinner-lg-wheel-size);
1625
+ --height: var(--hop-Spinner-lg-wheel-size);
1626
+ }
1627
+ .Spinner-module__hop-Spinner__track___S48QH {
1628
+ grid-area: spinner;
1629
+ box-sizing: border-box;
1630
+ inline-size: var(--width, var(--hop-Spinner-md-wheel-size));
1631
+ block-size: var(--height, var(--hop-Spinner-md-wheel-size));
1632
+ opacity: var(--hop-Spinner-track-opacity);
1633
+ border: var(--hop-Spinner-track-border);
1634
+ border-radius: var(--hop-Spinner-border-radius);
1635
+ }
1636
+ .Spinner-module__hop-Spinner__fill___qQ88k {
1637
+ grid-area: spinner;
1638
+ box-sizing: border-box;
1639
+ inline-size: var(--width, var(--hop-Spinner-md-wheel-size));
1640
+ block-size: var(--height, var(--hop-Spinner-md-wheel-size));
1641
+ border: var(--hop-Spinner-fill-border);
1642
+ border-inline-start: var(--hop-Spinner-fill-border-inline-start);
1643
+ border-radius: var(--hop-Spinner-border-radius);
1644
+ animation: var(--hop-Spinner-fill-animation);
1645
+ }
1646
+ @media (prefers-reduced-motion: reduce) {
1647
+ .Spinner-module__hop-Spinner__fill___qQ88k {
1648
+ animation-duration: var(--hop-Spinner-fill-animation-reduced-motion-duration);
1649
+ }
1650
+ }
1651
+ .Spinner-module__hop-Spinner__label___P1FJ3 {
1652
+ grid-area: label;
1653
+ margin-inline-start: var(--hop-Spinner-label-margin-inline-start);
1654
+ }
1655
+
1656
+ /* css-module:/home/runner/work/wl-hopper/wl-hopper/packages/components/src/buttons/src/Button.module.css/#css-module-data */
1657
+ .Button-module__hop-Button___mVpRP {
1658
+ --hop-Button-border-radius: var(--hop-shape-rounded-md);
1659
+ --hop-Button-focus-ring-color: var(--hop-primary-border-focus);
1660
+ --hop-Button-icon-only-padding: 0;
1661
+ --hop-Button-sm-height: 2rem;
1662
+ --hop-Button-md-height: 2.5rem;
1663
+ --hop-Button-primary-color: var(--hop-primary-text-strong);
1664
+ --hop-Button-primary-color-hover: var(--hop-primary-text-strong-hover);
1665
+ --hop-Button-primary-color-pressed: var(--hop-primary-text-strong);
1666
+ --hop-Button-primary-color-disabled: var(--hop-neutral-text-disabled);
1667
+ --hop-Button-primary-background-color: var(--hop-primary-surface-strong);
1668
+ --hop-Button-primary-background-color-hover: var(--hop-primary-surface-strong-hover);
1669
+ --hop-Button-primary-background-color-pressed: var(--hop-primary-surface-strong-press);
1670
+ --hop-Button-primary-background-color-disabled: var(--hop-neutral-surface-disabled);
1671
+ --hop-Button-primary-border: 0.0625rem solid var(--hop-Button-primary-background-color);
1672
+ --hop-Button-primary-border-hover: 0.0625rem solid var(--hop-Button-primary-background-color-hover);
1673
+ --hop-Button-primary-border-pressed: 0.0625rem solid var(--hop-Button-primary-background-color-pressed);
1674
+ --hop-Button-primary-border-disabled: 0.0625rem solid var(--hop-Button-primary-background-color-disabled);
1675
+ --hop-Button-primary-spinner-color: var(--hop-primary-icon-strong);
1676
+ --hop-Button-primary-sm-padding-x: var(--hop-space-inset-sm);
1677
+ --hop-Button-primary-sm-padding-y: 0;
1678
+ --hop-Button-primary-md-padding-x: var(--hop-space-inset-md);
1679
+ --hop-Button-primary-md-padding-y: 0;
1680
+ --hop-Button-secondary-color: var(--hop-neutral-text);
1681
+ --hop-Button-secondary-color-hover: var(--hop-neutral-text-hover);
1682
+ --hop-Button-secondary-color-pressed: var(--hop-neutral-text-press);
1683
+ --hop-Button-secondary-color-disabled: var(--hop-neutral-text-disabled);
1684
+ --hop-Button-secondary-background-color: var(--hop-neutral-surface);
1685
+ --hop-Button-secondary-background-color-hover: var(--hop-neutral-surface-hover);
1686
+ --hop-Button-secondary-background-color-pressed: var(--hop-neutral-surface-press);
1687
+ --hop-Button-secondary-background-color-disabled: var(--hop-neutral-surface-disabled);
1688
+ --hop-Button-secondary-border: 0.0625rem solid var(--hop-neutral-border-strong);
1689
+ --hop-Button-secondary-border-hover: 0.0625rem solid var(--hop-neutral-border-strong-hover);
1690
+ --hop-Button-secondary-border-pressed: 0.0625rem solid var(--hop-neutral-border-strong);
1691
+ --hop-Button-secondary-border-disabled: 0.0625rem solid var(--hop-Button-secondary-background-color-disabled);
1692
+ --hop-Button-secondary-spinner-color: var(--hop-neutral-icon);
1693
+ --hop-Button-secondary-sm-padding-x: var(--hop-space-inset-sm);
1694
+ --hop-Button-secondary-sm-padding-y: 0;
1695
+ --hop-Button-secondary-md-padding-x: var(--hop-space-inset-md);
1696
+ --hop-Button-secondary-md-padding-y: 0;
1697
+ --hop-Button-upsell-color: var(--hop-upsell-text);
1698
+ --hop-Button-upsell-color-hover: var(--hop-upsell-text-hover);
1699
+ --hop-Button-upsell-color-pressed: var(--hop-upsell-text-press);
1700
+ --hop-Button-upsell-color-disabled: var(--hop-neutral-text-disabled);
1701
+ --hop-Button-upsell-background-color: var(--hop-upsell-surface);
1702
+ --hop-Button-upsell-background-color-hover: var(--hop-upsell-surface-hover);
1703
+ --hop-Button-upsell-background-color-pressed: var(--hop-upsell-surface-press);
1704
+ --hop-Button-upsell-background-color-disabled: var(--hop-neutral-surface-disabled);
1705
+ --hop-Button-upsell-border: 0.0625rem solid var(--hop-Button-upsell-background-color);
1706
+ --hop-Button-upsell-border-hover: 0.0625rem solid var(--hop-Button-upsell-background-color-hover);
1707
+ --hop-Button-upsell-border-pressed: 0.0625rem solid var(--hop-Button-upsell-background-color-pressed);
1708
+ --hop-Button-upsell-border-disabled: 0.0625rem solid var(--hop-Button-upsell-background-color-disabled);
1709
+ --hop-Button-upsell-spinner-color: var(--hop-upsell-icon);
1710
+ --hop-Button-upsell-sm-padding-x: var(--hop-space-inset-sm);
1711
+ --hop-Button-upsell-sm-padding-y: 0;
1712
+ --hop-Button-upsell-md-padding-x: var(--hop-space-inset-md);
1713
+ --hop-Button-upsell-md-padding-y: 0;
1714
+ --hop-Button-danger-color: var(--hop-danger-text-strong);
1715
+ --hop-Button-danger-color-hover: var(--hop-danger-text-strong-hover);
1716
+ --hop-Button-danger-color-pressed: var(--hop-danger-text-strong-hover);
1717
+ --hop-Button-danger-color-disabled: var(--hop-neutral-text-disabled);
1718
+ --hop-Button-danger-background-color: var(--hop-danger-surface-strong);
1719
+ --hop-Button-danger-background-color-hover: var(--hop-danger-surface-strong-hover);
1720
+ --hop-Button-danger-background-color-pressed: var(--hop-danger-surface-press);
1721
+ --hop-Button-danger-background-color-disabled: var(--hop-neutral-surface-disabled);
1722
+ --hop-Button-danger-border: 0.0625rem solid var(--hop-Button-danger-background-color);
1723
+ --hop-Button-danger-border-hover: 0.0625rem solid var(--hop-Button-danger-background-color-hover);
1724
+ --hop-Button-danger-border-pressed: 0.0625rem solid var(--hop-Button-danger-background-color-pressed);
1725
+ --hop-Button-danger-border-disabled: 0.0625rem solid var(--hop-Button-danger-background-color-disabled);
1726
+ --hop-Button-danger-spinner-color: var(--hop-primary-icon-strong);
1727
+ --hop-Button-danger-sm-padding-x: var(--hop-space-inset-sm);
1728
+ --hop-Button-danger-sm-padding-y: 0;
1729
+ --hop-Button-danger-md-padding-x: var(--hop-space-inset-md);
1730
+ --hop-Button-danger-md-padding-y: 0;
1731
+ --hop-Button-ghost-primary-color: var(--hop-primary-text);
1732
+ --hop-Button-ghost-primary-color-hover: var(--hop-primary-text-hover);
1733
+ --hop-Button-ghost-primary-color-pressed: var(--hop-primary-text-press);
1734
+ --hop-Button-ghost-primary-color-disabled: var(--hop-neutral-text-disabled);
1735
+ --hop-Button-ghost-primary-background-color: transparent;
1736
+ --hop-Button-ghost-primary-background-color-hover: var(--hop-neutral-surface-hover);
1737
+ --hop-Button-ghost-primary-background-color-pressed: var(--hop-primary-surface-weak-press);
1738
+ --hop-Button-ghost-primary-background-color-disabled: transparent;
1739
+ --hop-Button-ghost-primary-border: 0.0625rem solid var(--hop-Button-ghost-primary-background-color);
1740
+ --hop-Button-ghost-primary-border-hover: 0.0625rem solid var(--hop-Button-ghost-primary-background-color-hover);
1741
+ --hop-Button-ghost-primary-border-pressed: 0.0625rem solid var(--hop-Button-ghost-primary-background-color-pressed);
1742
+ --hop-Button-ghost-primary-border-disabled: 0.0625rem solid var(--hop-Button-ghost-primary-background-color-disabled);
1743
+ --hop-Button-ghost-primary-spinner-color: var(--hop-neutral-icon);
1744
+ --hop-Button-ghost-primary-sm-padding-x: var(--hop-space-inset-xs);
1745
+ --hop-Button-ghost-primary-sm-padding-y: 0;
1746
+ --hop-Button-ghost-primary-md-padding-x: var(--hop-space-inset-sm);
1747
+ --hop-Button-ghost-primary-md-padding-y: 0;
1748
+ --hop-Button-ghost-secondary-color: var(--hop-neutral-text-weak);
1749
+ --hop-Button-ghost-secondary-color-hover: var(--hop-neutral-text-weak-hover);
1750
+ --hop-Button-ghost-secondary-color-pressed: var(--hop-neutral-text-weak-press);
1751
+ --hop-Button-ghost-secondary-color-disabled: var(--hop-neutral-text-disabled);
1752
+ --hop-Button-ghost-secondary-background-color: transparent;
1753
+ --hop-Button-ghost-secondary-background-color-hover: var(--hop-neutral-surface-hover);
1754
+ --hop-Button-ghost-secondary-background-color-pressed: var(--hop-neutral-surface-press);
1755
+ --hop-Button-ghost-secondary-background-color-disabled: transparent;
1756
+ --hop-Button-ghost-secondary-border: 0.0625rem solid var(--hop-Button-ghost-secondary-background-color);
1757
+ --hop-Button-ghost-secondary-border-hover: 0.0625rem solid var(--hop-Button-ghost-secondary-background-color-hover);
1758
+ --hop-Button-ghost-secondary-border-pressed: 0.0625rem solid var(--hop-Button-ghost-secondary-background-color-pressed);
1759
+ --hop-Button-ghost-secondary-border-disabled: 0.0625rem solid var(--hop-Button-ghost-secondary-background-color-disabled);
1760
+ --hop-Button-ghost-secondary-spinner-color: var(--hop-neutral-icon);
1761
+ --hop-Button-ghost-secondary-sm-padding-x: var(--hop-space-inset-xs);
1762
+ --hop-Button-ghost-secondary-sm-padding-y: 0;
1763
+ --hop-Button-ghost-secondary-md-padding-x: var(--hop-space-inset-sm);
1764
+ --hop-Button-ghost-secondary-md-padding-y: 0;
1765
+ --hop-Button-ghost-danger-color: var(--hop-danger-text-weak);
1766
+ --hop-Button-ghost-danger-color-hover: var(--hop-danger-text-hover);
1767
+ --hop-Button-ghost-danger-color-pressed: var(--hop-danger-text-press);
1768
+ --hop-Button-ghost-danger-color-disabled: var(--hop-neutral-text-disabled);
1769
+ --hop-Button-ghost-danger-background-color: transparent;
1770
+ --hop-Button-ghost-danger-background-color-hover: var(--hop-neutral-surface-hover);
1771
+ --hop-Button-ghost-danger-background-color-pressed: var(--hop-danger-surface-weak-press);
1772
+ --hop-Button-ghost-danger-background-color-disabled: transparent;
1773
+ --hop-Button-ghost-danger-border: 0.0625rem solid var(--hop-Button-ghost-danger-background-color);
1774
+ --hop-Button-ghost-danger-border-hover: 0.0625rem solid var(--hop-Button-ghost-danger-background-color-hover);
1775
+ --hop-Button-ghost-danger-border-pressed: 0.0625rem solid var(--hop-Button-ghost-danger-background-color-pressed);
1776
+ --hop-Button-ghost-danger-border-disabled: 0.0625rem solid var(--hop-Button-ghost-danger-background-color-disabled);
1777
+ --hop-Button-ghost-danger-spinner-color: var(--hop-neutral-icon);
1778
+ --hop-Button-ghost-danger-sm-padding-x: var(--hop-space-inset-xs);
1779
+ --hop-Button-ghost-danger-sm-padding-y: 0;
1780
+ --hop-Button-ghost-danger-md-padding-x: var(--hop-space-inset-sm);
1781
+ --hop-Button-ghost-danger-md-padding-y: 0;
1782
+ --inline-size: max-content;
1783
+ --block-size: var(--hop-Button-md-height);
1784
+ --background-color: var(--hop-primary-surface-strong);
1785
+ --color: var(--hop-primary-text-strong);
1786
+ --spinner: var(--hop-primary-icon-strong);
1787
+ --border: 0;
1788
+ --padding-inline: 0;
1789
+ --padding-block: 0;
1790
+ cursor: pointer;
1791
+ position: relative;
1792
+ overflow: hidden;
1793
+ display: grid;
1794
+ grid-template-areas: "start-icon content end-icon";
1795
+ grid-template-columns: auto min-content auto;
1796
+ column-gap: var(--hop-space-inline-xs);
1797
+ align-items: center;
1798
+ box-sizing: border-box;
1799
+ inline-size: var(--inline-size);
1800
+ block-size: var(--block-size);
1801
+ padding-block: var(--padding-block);
1802
+ padding-inline: var(--padding-inline);
1803
+ color: var(--color);
1804
+ text-decoration: none;
1805
+ white-space: nowrap;
1806
+ background-color: var(--background-color);
1807
+ border: var(--border);
1808
+ border-radius: var(--hop-Button-border-radius);
1809
+ outline: none;
1810
+ outline-offset: 0.125rem;
1811
+ transition:
1812
+ color var(--hop-easing-duration-2) var(--hop-easing-productive),
1813
+ background-color var(--hop-easing-duration-2) var(--hop-easing-productive),
1814
+ border var(--hop-easing-duration-2) var(--hop-easing-productive);
1815
+ }
1816
+ .Button-module__hop-Button___mVpRP[data-focus-visible] {
1817
+ outline: 0.125rem solid var(--hop-Button-focus-ring-color);
1818
+ }
1819
+ .Button-module__hop-Button--icon-only___xAh-6 {
1820
+ --padding-block: var(--hop-Button-icon-only-padding);
1821
+ --padding-inline: var(--hop-Button-icon-only-padding);
1822
+ column-gap: 0;
1823
+ aspect-ratio: 1;
1824
+ }
1825
+ .Button-module__hop-Button___mVpRP[data-disabled],
1826
+ .Button-module__hop-Button___mVpRP[data-loading] {
1827
+ cursor: not-allowed;
1828
+ }
1829
+ .Button-module__hop-Button--fluid___EFWA- {
1830
+ --inline-size: 100%;
1831
+ }
1832
+ .Button-module__hop-Button--sm___-ue3C {
1833
+ --block-size: var(--hop-Button-sm-height);
1834
+ }
1835
+ .Button-module__hop-Button--primary___EKPMl.Button-module__hop-Button--sm___-ue3C:not(.Button-module__hop-Button--icon-only___xAh-6) {
1836
+ --padding-inline: var(--hop-Button-primary-sm-padding-x);
1837
+ --padding-block: var(--hop-Button-primary-sm-padding-y);
1838
+ }
1839
+ .Button-module__hop-Button--primary___EKPMl.Button-module__hop-Button--md___BDVkz:not(.Button-module__hop-Button--icon-only___xAh-6) {
1840
+ --padding-inline: var(--hop-Button-primary-md-padding-x);
1841
+ --padding-block: var(--hop-Button-primary-md-padding-y);
1842
+ }
1843
+ .Button-module__hop-Button--secondary___bcVUb.Button-module__hop-Button--md___BDVkz:not(.Button-module__hop-Button--icon-only___xAh-6) {
1844
+ --padding-inline: var(--hop-Button-secondary-md-padding-x);
1845
+ --padding-block: var(--hop-Button-secondary-md-padding-y);
1846
+ }
1847
+ .Button-module__hop-Button--secondary___bcVUb.Button-module__hop-Button--sm___-ue3C:not(.Button-module__hop-Button--icon-only___xAh-6) {
1848
+ --padding-inline: var(--hop-Button-secondary-sm-padding-x);
1849
+ --padding-block: var(--hop-Button-secondary-sm-padding-y);
1850
+ }
1851
+ .Button-module__hop-Button--upsell___6nknl.Button-module__hop-Button--md___BDVkz:not(.Button-module__hop-Button--icon-only___xAh-6) {
1852
+ --padding-inline: var(--hop-Button-upsell-md-padding-x);
1853
+ --padding-block: var(--hop-Button-upsell-md-padding-y);
1854
+ }
1855
+ .Button-module__hop-Button--upsell___6nknl.Button-module__hop-Button--sm___-ue3C:not(.Button-module__hop-Button--icon-only___xAh-6) {
1856
+ --padding-inline: var(--hop-Button-upsell-sm-padding-x);
1857
+ --padding-block: var(--hop-Button-upsell-sm-padding-y);
1858
+ }
1859
+ .Button-module__hop-Button--danger___MkovL.Button-module__hop-Button--md___BDVkz:not(.Button-module__hop-Button--icon-only___xAh-6) {
1860
+ --padding-inline: var(--hop-Button-danger-md-padding-x);
1861
+ --padding-block: var(--hop-Button-danger-md-padding-y);
1862
+ }
1863
+ .Button-module__hop-Button--danger___MkovL.Button-module__hop-Button--sm___-ue3C:not(.Button-module__hop-Button--icon-only___xAh-6) {
1864
+ --padding-inline: var(--hop-Button-danger-sm-padding-x);
1865
+ --padding-block: var(--hop-Button-danger-sm-padding-y);
1866
+ }
1867
+ .Button-module__hop-Button--ghost-danger___zlbPD.Button-module__hop-Button--md___BDVkz:not(.Button-module__hop-Button--icon-only___xAh-6) {
1868
+ --padding-inline: var(--hop-Button-ghost-danger-md-padding-x);
1869
+ --padding-block: var(--hop-Button-ghost-danger-md-padding-y);
1870
+ }
1871
+ .Button-module__hop-Button--ghost-danger___zlbPD.Button-module__hop-Button--sm___-ue3C:not(.Button-module__hop-Button--icon-only___xAh-6) {
1872
+ --padding-inline: var(--hop-Button-ghost-danger-sm-padding-x);
1873
+ --padding-block: var(--hop-Button-ghost-danger-sm-padding-y);
1874
+ }
1875
+ .Button-module__hop-Button--ghost-secondary___l-orO.Button-module__hop-Button--md___BDVkz:not(.Button-module__hop-Button--icon-only___xAh-6) {
1876
+ --padding-inline: var(--hop-Button-ghost-secondary-md-padding-x);
1877
+ --padding-block: var(--hop-Button-ghost-secondary-md-padding-y);
1878
+ }
1879
+ .Button-module__hop-Button--ghost-secondary___l-orO.Button-module__hop-Button--sm___-ue3C:not(.Button-module__hop-Button--icon-only___xAh-6) {
1880
+ --padding-inline: var(--hop-Button-ghost-secondary-sm-padding-x);
1881
+ --padding-block: var(--hop-Button-ghost-secondary-sm-padding-y);
1882
+ }
1883
+ .Button-module__hop-Button--ghost-primary___F6-yL.Button-module__hop-Button--md___BDVkz:not(.Button-module__hop-Button--icon-only___xAh-6) {
1884
+ --padding-inline: var(--hop-Button-ghost-primary-md-padding-x);
1885
+ --padding-block: var(--hop-Button-ghost-primary-md-padding-y);
1886
+ }
1887
+ .Button-module__hop-Button--ghost-primary___F6-yL.Button-module__hop-Button--sm___-ue3C:not(.Button-module__hop-Button--icon-only___xAh-6) {
1888
+ --padding-inline: var(--hop-Button-ghost-primary-sm-padding-x);
1889
+ --padding-block: var(--hop-Button-ghost-primary-sm-padding-y);
1890
+ }
1891
+ .Button-module__hop-Button--primary___EKPMl {
1892
+ --background-color: var(--hop-Button-primary-background-color);
1893
+ --color: var(--hop-Button-primary-color);
1894
+ --border: var(--hop-Button-primary-border);
1895
+ --spinner-color: var(--hop-Button-primary-spinner-color);
1896
+ }
1897
+ .Button-module__hop-Button--primary___EKPMl[data-disabled]:not([data-loading]) {
1898
+ --background-color: var(--hop-Button-primary-background-color-disabled);
1899
+ --color: var(--hop-Button-primary-color-disabled);
1900
+ --border: var(--hop-Button-primary-border-disabled);
1901
+ }
1902
+ .Button-module__hop-Button--primary___EKPMl[data-hovered]:not([data-disabled], [data-loading]),
1903
+ .Button-module__hop-Button--primary___EKPMl[data-focus-visible]:not([data-disabled], [data-loading]) {
1904
+ --background-color: var(--hop-Button-primary-background-color-hover);
1905
+ --color: var(--hop-Button-primary-color-hover);
1906
+ --border: var(--hop-Button-primary-border-hover);
1907
+ }
1908
+ .Button-module__hop-Button--primary___EKPMl[data-pressed]:not([data-loading]) {
1909
+ --background-color: var(--hop-Button-primary-background-color-pressed);
1910
+ --color: var(--hop-Button-primary-color-pressed);
1911
+ --border: var(--hop-Button-primary-border-pressed);
1912
+ }
1913
+ .Button-module__hop-Button--secondary___bcVUb {
1914
+ --background-color: var(--hop-Button-secondary-background-color);
1915
+ --color: var(--hop-Button-secondary-color);
1916
+ --border: var(--hop-Button-secondary-border);
1917
+ --spinner-color: var(--hop-Button-secondary-spinner-color);
1918
+ }
1919
+ .Button-module__hop-Button--secondary___bcVUb[data-disabled]:not([data-loading]) {
1920
+ --background-color: var(--hop-Button-secondary-background-color-disabled);
1921
+ --color: var(--hop-Button-secondary-color-disabled);
1922
+ --border: var(--hop-Button-secondary-border-disabled);
1923
+ }
1924
+ .Button-module__hop-Button--secondary___bcVUb[data-hovered]:not([data-disabled], [data-loading]),
1925
+ .Button-module__hop-Button--secondary___bcVUb[data-focus-visible]:not([data-disabled], [data-loading]) {
1926
+ --background-color: var(--hop-Button-secondary-background-color-hover);
1927
+ --color: var(--hop-Button-secondary-color-hover);
1928
+ --border: var(--hop-Button-secondary-border-hover);
1929
+ }
1930
+ .Button-module__hop-Button--secondary___bcVUb[data-pressed]:not([data-loading]) {
1931
+ --background-color: var(--hop-Button-secondary-background-color-pressed);
1932
+ --color: var(--hop-Button-secondary-color-pressed);
1933
+ --border: var(--hop-Button-secondary-border-pressed);
1934
+ }
1935
+ .Button-module__hop-Button--upsell___6nknl {
1936
+ --background-color: var(--hop-Button-upsell-background-color);
1937
+ --color: var(--hop-Button-upsell-color);
1938
+ --border: var(--hop-Button-upsell-border);
1939
+ --spinner-color: var(--hop-Button-upsell-spinner-color);
1940
+ }
1941
+ .Button-module__hop-Button--upsell___6nknl[data-disabled]:not([data-loading]) {
1942
+ --background-color: var(--hop-Button-upsell-background-color-disabled);
1943
+ --color: var(--hop-Button-upsell-color-disabled);
1944
+ --border: var(--hop-Button-upsell-border-disabled);
1945
+ }
1946
+ .Button-module__hop-Button--upsell___6nknl[data-hovered]:not([data-disabled], [data-loading]),
1947
+ .Button-module__hop-Button--upsell___6nknl[data-focus-visible]:not([data-disabled], [data-loading]) {
1948
+ --background-color: var(--hop-Button-upsell-background-color-hover);
1949
+ --color: var(--hop-Button-upsell-color-hover);
1950
+ --border: var(--hop-Button-upsell-border-hover);
1951
+ }
1952
+ .Button-module__hop-Button--upsell___6nknl[data-pressed]:not([data-loading]) {
1953
+ --background-color: var(--hop-Button-upsell-background-color-pressed);
1954
+ --color: var(--hop-Button-upsell-color-pressed);
1955
+ --border: var(--hop-Button-upsell-border-pressed);
1956
+ }
1957
+ .Button-module__hop-Button--danger___MkovL {
1958
+ --background-color: var(--hop-Button-danger-background-color);
1959
+ --color: var(--hop-Button-danger-color);
1960
+ --border: var(--hop-Button-danger-border);
1961
+ --spinner-color: var(--hop-Button-danger-spinner-color);
1962
+ }
1963
+ .Button-module__hop-Button--danger___MkovL[data-disabled]:not([data-loading]) {
1964
+ --background-color: var(--hop-Button-danger-background-color-disabled);
1965
+ --color: var(--hop-Button-danger-color-disabled);
1966
+ --border: var(--hop-Button-danger-border-disabled);
1967
+ }
1968
+ .Button-module__hop-Button--danger___MkovL[data-hovered]:not([data-disabled], [data-loading]),
1969
+ .Button-module__hop-Button--danger___MkovL[data-focus-visible]:not([data-disabled], [data-loading]) {
1970
+ --background-color: var(--hop-Button-danger-background-color-hover);
1971
+ --color: var(--hop-Button-danger-color-hover);
1972
+ --border: var(--hop-Button-danger-border-hover);
1973
+ }
1974
+ .Button-module__hop-Button--danger___MkovL[data-pressed]:not([data-loading]) {
1975
+ --background-color: var(--hop-Button-danger-background-color-pressed);
1976
+ --color: var(--hop-Button-danger-color-pressed);
1977
+ --border: var(--hop-Button-danger-border-pressed);
1978
+ }
1979
+ .Button-module__hop-Button--ghost-primary___F6-yL {
1980
+ --background-color: var(--hop-Button-ghost-primary-background-color);
1981
+ --color: var(--hop-Button-ghost-primary-color);
1982
+ --border: var(--hop-Button-ghost-primary-border);
1983
+ --spinner-color: var(--hop-Button-ghost-primary-spinner-color);
1984
+ }
1985
+ .Button-module__hop-Button--ghost-primary___F6-yL[data-disabled]:not([data-loading]) {
1986
+ --background-color: var(--hop-Button-ghost-primary-background-color-disabled);
1987
+ --color: var(--hop-Button-ghost-primary-color-disabled);
1988
+ --border: var(--hop-Button-ghost-primary-border-disabled);
1989
+ }
1990
+ .Button-module__hop-Button--ghost-primary___F6-yL[data-hovered]:not([data-disabled], [data-loading]),
1991
+ .Button-module__hop-Button--ghost-primary___F6-yL[data-focus-visible]:not([data-disabled], [data-loading]) {
1992
+ --background-color: var(--hop-Button-ghost-primary-background-color-hover);
1993
+ --color: var(--hop-Button-ghost-primary-color-hover);
1994
+ --border: var(--hop-Button-ghost-primary-border-hover);
1995
+ }
1996
+ .Button-module__hop-Button--ghost-primary___F6-yL[data-pressed]:not([data-loading]) {
1997
+ --background-color: var(--hop-Button-ghost-primary-background-color-pressed);
1998
+ --color: var(--hop-Button-ghost-primary-color-pressed);
1999
+ --border: var(--hop-Button-ghost-primary-border-pressed);
2000
+ }
2001
+ .Button-module__hop-Button--ghost-secondary___l-orO {
2002
+ --background-color: var(--hop-Button-ghost-secondary-background-color);
2003
+ --color: var(--hop-Button-ghost-secondary-color);
2004
+ --border: var(--hop-Button-ghost-secondary-border);
2005
+ --spinner-color: var(--hop-Button-ghost-secondary-spinner-color);
2006
+ }
2007
+ .Button-module__hop-Button--ghost-secondary___l-orO[data-disabled]:not([data-loading]) {
2008
+ --background-color: var(--hop-Button-ghost-secondary-background-color-disabled);
2009
+ --color: var(--hop-Button-ghost-secondary-color-disabled);
2010
+ --border: var(--hop-Button-ghost-secondary-border-disabled);
2011
+ }
2012
+ .Button-module__hop-Button--ghost-secondary___l-orO[data-hovered]:not([data-disabled], [data-loading]),
2013
+ .Button-module__hop-Button--ghost-secondary___l-orO[data-focus-visible]:not([data-disabled], [data-loading]) {
2014
+ --background-color: var(--hop-Button-ghost-secondary-background-color-hover);
2015
+ --color: var(--hop-Button-ghost-secondary-color-hover);
2016
+ --border: var(--hop-Button-ghost-secondary-border-hover);
2017
+ }
2018
+ .Button-module__hop-Button--ghost-secondary___l-orO[data-pressed]:not([data-loading]) {
2019
+ --background-color: var(--hop-Button-ghost-secondary-background-color-pressed);
2020
+ --color: var(--hop-Button-ghost-secondary-color-pressed);
2021
+ --border: var(--hop-Button-ghost-secondary-border-pressed);
2022
+ }
2023
+ .Button-module__hop-Button--ghost-danger___zlbPD {
2024
+ --background-color: var(--hop-Button-ghost-danger-background-color);
2025
+ --color: var(--hop-Button-ghost-danger-color);
2026
+ --border: var(--hop-Button-ghost-danger-border);
2027
+ --spinner-color: var(--hop-Button-ghost-danger-spinner-color);
2028
+ }
2029
+ .Button-module__hop-Button--ghost-danger___zlbPD[data-disabled]:not([data-loading]) {
2030
+ --background-color: var(--hop-Button-ghost-danger-background-color-disabled);
2031
+ --color: var(--hop-Button-ghost-danger-color-disabled);
2032
+ --border: var(--hop-Button-ghost-danger-border-disabled);
2033
+ }
2034
+ .Button-module__hop-Button--ghost-danger___zlbPD[data-hovered]:not([data-disabled], [data-loading]),
2035
+ .Button-module__hop-Button--ghost-danger___zlbPD[data-focus-visible]:not([data-disabled], [data-loading]) {
2036
+ --background-color: var(--hop-Button-ghost-danger-background-color-hover);
2037
+ --color: var(--hop-Button-ghost-danger-color-hover);
2038
+ --border: var(--hop-Button-ghost-danger-border-hover);
2039
+ }
2040
+ .Button-module__hop-Button--ghost-danger___zlbPD[data-pressed]:not([data-loading]) {
2041
+ --background-color: var(--hop-Button-ghost-danger-background-color-pressed);
2042
+ --color: var(--hop-Button-ghost-danger-color-pressed);
2043
+ --border: var(--hop-Button-ghost-danger-border-pressed);
2044
+ }
2045
+ .Button-module__hop-Button__Spinner___1RnXX {
2046
+ position: absolute;
2047
+ justify-self: center;
2048
+ color: var(--spinner-color);
2049
+ }
2050
+ .Button-module__hop-Button__icon___MFwf2,
2051
+ .Button-module__hop-Button__icon-list___jC-21 {
2052
+ grid-area: start-icon;
2053
+ justify-self: end;
2054
+ }
2055
+ .Button-module__hop-Button__text___ebwCf {
2056
+ user-select: none;
2057
+ overflow: visible;
2058
+ grid-area: content;
2059
+ font-weight: var(--hop-font-weight-505);
2060
+ text-wrap: nowrap;
2061
+ }
2062
+ .Button-module__hop-Button--ghost-primary___F6-yL[data-hovered]:not([data-loading]) .Button-module__hop-Button__text___ebwCf,
2063
+ .Button-module__hop-Button--ghost-secondary___l-orO[data-hovered]:not([data-loading]) .Button-module__hop-Button__text___ebwCf,
2064
+ .Button-module__hop-Button--ghost-danger___zlbPD[data-hovered]:not([data-loading]) .Button-module__hop-Button__text___ebwCf,
2065
+ .Button-module__hop-Button--ghost-primary___F6-yL[data-pressed]:not([data-loading]) .Button-module__hop-Button__text___ebwCf,
2066
+ .Button-module__hop-Button--ghost-secondary___l-orO[data-pressed]:not([data-loading]) .Button-module__hop-Button__text___ebwCf,
2067
+ .Button-module__hop-Button--ghost-danger___zlbPD[data-pressed]:not([data-loading]) .Button-module__hop-Button__text___ebwCf,
2068
+ .Button-module__hop-Button--ghost-primary___F6-yL[data-focus-visible]:not([data-loading]) .Button-module__hop-Button__text___ebwCf,
2069
+ .Button-module__hop-Button--ghost-secondary___l-orO[data-focus-visible]:not([data-loading]) .Button-module__hop-Button__text___ebwCf,
2070
+ .Button-module__hop-Button--ghost-danger___zlbPD[data-focus-visible]:not([data-loading]) .Button-module__hop-Button__text___ebwCf {
2071
+ text-decoration: underline;
2072
+ text-underline-offset: 0.125rem;
2073
+ }
2074
+ .Button-module__hop-Button__end-icon___oyHTu,
2075
+ .Button-module__hop-Button__end-icon-list___1U3mE {
2076
+ grid-area: end-icon;
2077
+ }
2078
+ .Button-module__hop-Button___mVpRP .Button-module__hop-Button__icon-list___jC-21,
2079
+ .Button-module__hop-Button___mVpRP .Button-module__hop-Button__end-icon-list___1U3mE {
2080
+ flex-wrap: nowrap;
2081
+ }
2082
+ .Button-module__hop-Button___mVpRP[data-loading] > *:not(.Button-module__hop-Button__Spinner___1RnXX) {
2083
+ opacity: 0;
2084
+ }
2085
+
2086
+ /* css-module:/home/runner/work/wl-hopper/wl-hopper/packages/components/src/buttons/src/ButtonGroup.module.css/#css-module-data */
2087
+ .ButtonGroup-module__hop-ButtonGroup___V-GZD {
2088
+ display: inline-flex;
2089
+ flex-wrap: nowrap;
2090
+ gap: var(--hop-space-inline-md);
2091
+ }
2092
+ .ButtonGroup-module__hop-ButtonGroup--horizontal___ZRbG5 {
2093
+ justify-content: center;
2094
+ }
2095
+ .ButtonGroup-module__hop-ButtonGroup--vertical___v3JGj {
2096
+ flex-direction: column;
2097
+ gap: var(--hop-space-stack-md);
2098
+ align-items: center;
2099
+ }
2100
+ .ButtonGroup-module__hop-ButtonGroup--start___sc1iw.ButtonGroup-module__hop-ButtonGroup--vertical___v3JGj {
2101
+ align-items: flex-start;
2102
+ }
2103
+ .ButtonGroup-module__hop-ButtonGroup--center___hfVSv.ButtonGroup-module__hop-ButtonGroup--vertical___v3JGj {
2104
+ align-items: center;
2105
+ }
2106
+ .ButtonGroup-module__hop-ButtonGroup--end___OwOEL.ButtonGroup-module__hop-ButtonGroup--vertical___v3JGj {
2107
+ align-items: flex-end;
2108
+ }
2109
+ .ButtonGroup-module__hop-ButtonGroup--start___sc1iw.ButtonGroup-module__hop-ButtonGroup--horizontal___ZRbG5 {
2110
+ justify-content: flex-start;
2111
+ }
2112
+ .ButtonGroup-module__hop-ButtonGroup--center___hfVSv.ButtonGroup-module__hop-ButtonGroup--horizontal___ZRbG5 {
2113
+ justify-content: center;
2114
+ }
2115
+ .ButtonGroup-module__hop-ButtonGroup--end___OwOEL.ButtonGroup-module__hop-ButtonGroup--horizontal___ZRbG5 {
2116
+ justify-content: flex-end;
2117
+ }
2118
+ .ButtonGroup-module__hop-ButtonGroup--wrap___lgR5H {
2119
+ flex-wrap: wrap;
2120
+ }
2121
+ .ButtonGroup-module__hop-ButtonGroup--fluid___M4OVp {
2122
+ inline-size: 100%;
2123
+ }
2124
+
2125
+ /* css-module:/home/runner/work/wl-hopper/wl-hopper/packages/components/src/buttons/src/EmbeddedButton.module.css/#css-module-data */
2126
+ .EmbeddedButton-module__hop-EmbeddedButton___1GbQx {
2127
+ --hop-EmbeddedButton-border-radius: var(--hop-shape-rounded-md);
2128
+ --hop-EmbeddedButton-focus-ring-color: var(--hop-primary-border-focus);
2129
+ --hop-EmbeddedButton-effect-border-radius: var(--hop-shape-circle);
2130
+ --hop-EmbeddedButton-md-height: 1.5rem;
2131
+ --hop-EmbeddedButton-md-width: 1.5rem;
2132
+ --hop-EmbeddedButton-md-effect-height: 1rem;
2133
+ --hop-EmbeddedButton-md-effect-width: 1rem;
2134
+ --hop-EmbeddedButton-lg-height: 1.5rem;
2135
+ --hop-EmbeddedButton-lg-width: 1.5rem;
2136
+ --hop-EmbeddedButton-lg-effect-height: 1.5rem;
2137
+ --hop-EmbeddedButton-lg-effect-width: 1.5rem;
2138
+ --hop-EmbeddedButton-neutral-color: var(--hop-neutral-icon-weak);
2139
+ --hop-EmbeddedButton-neutral-color-hovered: var(--hop-neutral-icon-weak-hover);
2140
+ --hop-EmbeddedButton-neutral-color-focused: var(--hop-neutral-icon-weak-hover);
2141
+ --hop-EmbeddedButton-neutral-color-pressed: var(--hop-neutral-icon-weak-press);
2142
+ --hop-EmbeddedButton-neutral-color-disabled: var(--hop-neutral-icon-disabled);
2143
+ --hop-EmbeddedButton-neutral-effect-background-color: transparent;
2144
+ --hop-EmbeddedButton-neutral-effect-background-color-hovered: var(--hop-neutral-surface-weak-hover);
2145
+ --hop-EmbeddedButton-neutral-effect-background-color-focused: var(--hop-neutral-surface-weak-hover);
2146
+ --hop-EmbeddedButton-neutral-effect-background-color-pressed: var(--hop-neutral-surface-weak-press);
2147
+ --hop-EmbeddedButton-neutral-effect-background-color-disabled: transparent;
2148
+ --hop-EmbeddedButton-subdued-color: var(--hop-neutral-icon-weak);
2149
+ --hop-EmbeddedButton-subdued-color-hovered: var(--hop-neutral-icon-weak-hover);
2150
+ --hop-EmbeddedButton-subdued-color-focused: var(--hop-neutral-icon-weak-hover);
2151
+ --hop-EmbeddedButton-subdued-color-pressed: var(--hop-neutral-icon-weak-press);
2152
+ --hop-EmbeddedButton-subdued-color-disabled: var(--hop-neutral-icon-disabled);
2153
+ --hop-EmbeddedButton-subdued-effect-background-color: transparent;
2154
+ --hop-EmbeddedButton-subdued-effect-background-color-hovered: var(--hop-neutral-surface-weak-hover);
2155
+ --hop-EmbeddedButton-subdued-effect-background-color-focused: var(--hop-neutral-surface-weak-hover);
2156
+ --hop-EmbeddedButton-subdued-effect-background-color-pressed: var(--hop-neutral-surface-weak-press);
2157
+ --hop-EmbeddedButton-subdued-effect-background-color-disabled: transparent;
2158
+ --hop-EmbeddedButton-progress-color: var(--hop-status-progress-icon);
2159
+ --hop-EmbeddedButton-progress-color-hovered: var(--hop-status-progress-icon-hover);
2160
+ --hop-EmbeddedButton-progress-color-focused: var(--hop-status-progress-icon-hover);
2161
+ --hop-EmbeddedButton-progress-color-pressed: var(--hop-status-progress-icon-press);
2162
+ --hop-EmbeddedButton-progress-color-disabled: var(--hop-status-progress-icon-disabled);
2163
+ --hop-EmbeddedButton-progress-effect-background-color: transparent;
2164
+ --hop-EmbeddedButton-progress-effect-background-color-hovered: var(--hop-status-progress-surface-hover);
2165
+ --hop-EmbeddedButton-progress-effect-background-color-focused: var(--hop-status-progress-surface-hover);
2166
+ --hop-EmbeddedButton-progress-effect-background-color-pressed: var(--hop-status-progress-surface-press);
2167
+ --hop-EmbeddedButton-progress-effect-background-color-disabled: transparent;
2168
+ --hop-EmbeddedButton-positive-color: var(--hop-status-positive-icon);
2169
+ --hop-EmbeddedButton-positive-color-hovered: var(--hop-status-positive-icon-hover);
2170
+ --hop-EmbeddedButton-positive-color-focused: var(--hop-status-positive-icon-hover);
2171
+ --hop-EmbeddedButton-positive-color-pressed: var(--hop-status-positive-icon-press);
2172
+ --hop-EmbeddedButton-positive-color-disabled: var(--hop-status-positive-icon-disabled);
2173
+ --hop-EmbeddedButton-positive-effect-background-color: transparent;
2174
+ --hop-EmbeddedButton-positive-effect-background-color-hovered: var(--hop-status-positive-surface-hover);
2175
+ --hop-EmbeddedButton-positive-effect-background-color-focused: var(--hop-status-positive-surface-hover);
2176
+ --hop-EmbeddedButton-positive-effect-background-color-pressed: var(--hop-status-positive-surface-press);
2177
+ --hop-EmbeddedButton-positive-effect-background-color-disabled: transparent;
2178
+ --hop-EmbeddedButton-caution-color: var(--hop-status-caution-icon);
2179
+ --hop-EmbeddedButton-caution-color-hovered: var(--hop-status-caution-icon-hover);
2180
+ --hop-EmbeddedButton-caution-color-focused: var(--hop-status-caution-icon-hover);
2181
+ --hop-EmbeddedButton-caution-color-pressed: var(--hop-status-caution-icon-press);
2182
+ --hop-EmbeddedButton-caution-color-disabled: var(--hop-status-caution-icon-disabled);
2183
+ --hop-EmbeddedButton-caution-effect-background-color: transparent;
2184
+ --hop-EmbeddedButton-caution-effect-background-color-hovered: var(--hop-status-caution-surface-hover);
2185
+ --hop-EmbeddedButton-caution-effect-background-color-focused: var(--hop-status-caution-surface-hover);
2186
+ --hop-EmbeddedButton-caution-effect-background-color-pressed: var(--hop-status-caution-surface-press);
2187
+ --hop-EmbeddedButton-caution-effect-background-color-disabled: transparent;
2188
+ --hop-EmbeddedButton-negative-color: var(--hop-status-negative-icon);
2189
+ --hop-EmbeddedButton-negative-color-hovered: var(--hop-status-negative-icon-hover);
2190
+ --hop-EmbeddedButton-negative-color-focused: var(--hop-status-negative-icon-hover);
2191
+ --hop-EmbeddedButton-negative-color-pressed: var(--hop-status-negative-icon-press);
2192
+ --hop-EmbeddedButton-negative-color-disabled: var(--hop-status-negative-icon-disabled);
2193
+ --hop-EmbeddedButton-negative-effect-background-color: transparent;
2194
+ --hop-EmbeddedButton-negative-effect-background-color-hovered: var(--hop-status-negative-surface-hover);
2195
+ --hop-EmbeddedButton-negative-effect-background-color-focused: var(--hop-status-negative-surface-hover);
2196
+ --hop-EmbeddedButton-negative-effect-background-color-pressed: var(--hop-status-negative-surface-press);
2197
+ --hop-EmbeddedButton-negative-effect-background-color-disabled: transparent;
2198
+ --hop-EmbeddedButton-option1-color: var(--hop-status-option1-icon);
2199
+ --hop-EmbeddedButton-option1-color-hovered: var(--hop-status-option1-icon-hover);
2200
+ --hop-EmbeddedButton-option1-color-focused: var(--hop-status-option1-icon-hover);
2201
+ --hop-EmbeddedButton-option1-color-pressed: var(--hop-status-option1-icon-press);
2202
+ --hop-EmbeddedButton-option1-color-disabled: var(--hop-status-option1-icon-disabled);
2203
+ --hop-EmbeddedButton-option1-effect-background-color: transparent;
2204
+ --hop-EmbeddedButton-option1-effect-background-color-hovered: var(--hop-status-option1-surface-hover);
2205
+ --hop-EmbeddedButton-option1-effect-background-color-focused: var(--hop-status-option1-surface-hover);
2206
+ --hop-EmbeddedButton-option1-effect-background-color-pressed: var(--hop-status-option1-surface-press);
2207
+ --hop-EmbeddedButton-option1-effect-background-color-disabled: transparent;
2208
+ --hop-EmbeddedButton-option2-color: var(--hop-status-option2-icon);
2209
+ --hop-EmbeddedButton-option2-color-hovered: var(--hop-status-option2-icon-hover);
2210
+ --hop-EmbeddedButton-option2-color-focused: var(--hop-status-option2-icon-hover);
2211
+ --hop-EmbeddedButton-option2-color-pressed: var(--hop-status-option2-icon-press);
2212
+ --hop-EmbeddedButton-option2-color-disabled: var(--hop-status-option2-icon-disabled);
2213
+ --hop-EmbeddedButton-option2-effect-background-color: transparent;
2214
+ --hop-EmbeddedButton-option2-effect-background-color-hovered: var(--hop-status-option2-surface-hover);
2215
+ --hop-EmbeddedButton-option2-effect-background-color-focused: var(--hop-status-option2-surface-hover);
2216
+ --hop-EmbeddedButton-option2-effect-background-color-pressed: var(--hop-status-option2-surface-press);
2217
+ --hop-EmbeddedButton-option2-effect-background-color-disabled: transparent;
2218
+ --hop-EmbeddedButton-option3-color: var(--hop-status-option3-icon);
2219
+ --hop-EmbeddedButton-option3-color-hovered: var(--hop-status-option3-icon-hover);
2220
+ --hop-EmbeddedButton-option3-color-focused: var(--hop-status-option3-icon-hover);
2221
+ --hop-EmbeddedButton-option3-color-pressed: var(--hop-status-option3-icon-press);
2222
+ --hop-EmbeddedButton-option3-color-disabled: var(--hop-status-option3-icon-disabled);
2223
+ --hop-EmbeddedButton-option3-effect-background-color: transparent;
2224
+ --hop-EmbeddedButton-option3-effect-background-color-hovered: var(--hop-status-option3-surface-hover);
2225
+ --hop-EmbeddedButton-option3-effect-background-color-focused: var(--hop-status-option3-surface-hover);
2226
+ --hop-EmbeddedButton-option3-effect-background-color-pressed: var(--hop-status-option3-surface-press);
2227
+ --hop-EmbeddedButton-option3-effect-background-color-disabled: transparent;
2228
+ --hop-EmbeddedButton-option4-color: var(--hop-status-option4-icon);
2229
+ --hop-EmbeddedButton-option4-color-hovered: var(--hop-status-option4-icon-hover);
2230
+ --hop-EmbeddedButton-option4-color-focused: var(--hop-status-option4-icon-hover);
2231
+ --hop-EmbeddedButton-option4-color-pressed: var(--hop-status-option4-icon-press);
2232
+ --hop-EmbeddedButton-option4-color-disabled: var(--hop-status-option4-icon-disabled);
2233
+ --hop-EmbeddedButton-option4-effect-background-color: transparent;
2234
+ --hop-EmbeddedButton-option4-effect-background-color-hovered: var(--hop-status-option4-surface-hover);
2235
+ --hop-EmbeddedButton-option4-effect-background-color-focused: var(--hop-status-option4-surface-hover);
2236
+ --hop-EmbeddedButton-option4-effect-background-color-pressed: var(--hop-status-option4-surface-press);
2237
+ --hop-EmbeddedButton-option4-effect-background-color-disabled: transparent;
2238
+ --hop-EmbeddedButton-option5-color: var(--hop-status-option5-icon);
2239
+ --hop-EmbeddedButton-option5-color-hovered: var(--hop-status-option5-icon-hover);
2240
+ --hop-EmbeddedButton-option5-color-focused: var(--hop-status-option5-icon-hover);
2241
+ --hop-EmbeddedButton-option5-color-pressed: var(--hop-status-option5-icon-press);
2242
+ --hop-EmbeddedButton-option5-color-disabled: var(--hop-status-option5-icon-disabled);
2243
+ --hop-EmbeddedButton-option5-effect-background-color: transparent;
2244
+ --hop-EmbeddedButton-option5-effect-background-color-hovered: var(--hop-status-option5-surface-hover);
2245
+ --hop-EmbeddedButton-option5-effect-background-color-focused: var(--hop-status-option5-surface-hover);
2246
+ --hop-EmbeddedButton-option5-effect-background-color-pressed: var(--hop-status-option5-surface-press);
2247
+ --hop-EmbeddedButton-option5-effect-background-color-disabled: transparent;
2248
+ --hop-EmbeddedButton-option6-color: var(--hop-status-option6-icon);
2249
+ --hop-EmbeddedButton-option6-color-hovered: var(--hop-status-option6-icon-hover);
2250
+ --hop-EmbeddedButton-option6-color-focused: var(--hop-status-option6-icon-hover);
2251
+ --hop-EmbeddedButton-option6-color-pressed: var(--hop-status-option6-icon-press);
2252
+ --hop-EmbeddedButton-option6-color-disabled: var(--hop-status-option6-icon-disabled);
2253
+ --hop-EmbeddedButton-option6-effect-background-color: transparent;
2254
+ --hop-EmbeddedButton-option6-effect-background-color-hovered: var(--hop-status-option6-surface-hover);
2255
+ --hop-EmbeddedButton-option6-effect-background-color-focused: var(--hop-status-option6-surface-hover);
2256
+ --hop-EmbeddedButton-option6-effect-background-color-pressed: var(--hop-status-option6-surface-press);
2257
+ --hop-EmbeddedButton-option6-effect-background-color-disabled: transparent;
2258
+ --hop-EmbeddedButton-selected-color: var(--hop-neutral-icon-weak-selected);
2259
+ --hop-EmbeddedButton-selected-effect-background-color: var(--hop-neutral-surface-weak-selected);
2260
+ --spinner: var(--hop-primary-icon-strong);
2261
+ --padding-inline: 0;
2262
+ --padding-block: 0;
2263
+ --effect-background-color: var(--hop-EmbeddedButton-neutral-effect-background-color);
2264
+ --color: var(--hop-EmbeddedButton-neutral-color);
2265
+ --transition: var(--hop-easing-duration-2) var(--hop-easing-productive);
2266
+ --effect-border-radius: var(--hop-EmbeddedButton-effect-border-radius);
2267
+ --focus-ring-size: 0.125rem;
2268
+ cursor: pointer;
2269
+ position: relative;
2270
+ overflow: hidden;
2271
+ display: flex;
2272
+ flex-shrink: 0;
2273
+ align-items: center;
2274
+ justify-content: center;
2275
+ box-sizing: border-box;
2276
+ inline-size: var(--inline-size);
2277
+ block-size: var(--block-size);
2278
+ padding-block: var(--padding-block);
2279
+ padding-inline: var(--padding-inline);
2280
+ color: var(--color);
2281
+ text-decoration: none;
2282
+ white-space: nowrap;
2283
+ background: none;
2284
+ border: none;
2285
+ border-radius: var(--hop-EmbeddedButton-border-radius);
2286
+ outline: none;
2287
+ transition: color var(--transition);
2288
+ }
2289
+ .EmbeddedButton-module__hop-EmbeddedButton___1GbQx::before {
2290
+ content: "";
2291
+ position: absolute;
2292
+ inset-block-start: 50%;
2293
+ inset-inline-start: 50%;
2294
+ transform: translate(-50%, -50%);
2295
+ display: block;
2296
+ inline-size: var(--effect-inline-size);
2297
+ block-size: var(--effect-block-size);
2298
+ background-color: var(--effect-background-color);
2299
+ border-radius: var(--effect-border-radius);
2300
+ transition: background-color var(--transition);
2301
+ }
2302
+ .EmbeddedButton-module__hop-EmbeddedButton--md___FCTYh {
2303
+ --inline-size: var(--hop-EmbeddedButton-md-width);
2304
+ --block-size: var(--hop-EmbeddedButton-md-height);
2305
+ --focus-ring-offset: calc(-1 * var(--focus-ring-size));
2306
+ }
2307
+ .EmbeddedButton-module__hop-EmbeddedButton--lg___D0xsi {
2308
+ --inline-size: var(--hop-EmbeddedButton-lg-width);
2309
+ --block-size: var(--hop-EmbeddedButton-lg-height);
2310
+ --focus-ring-offset: 0;
2311
+ }
2312
+ .EmbeddedButton-module__hop-EmbeddedButton--md___FCTYh::before {
2313
+ --effect-inline-size: var(--hop-EmbeddedButton-md-effect-width);
2314
+ --effect-block-size: var(--hop-EmbeddedButton-md-effect-height);
2315
+ }
2316
+ .EmbeddedButton-module__hop-EmbeddedButton--lg___D0xsi::before {
2317
+ --effect-inline-size: var(--hop-EmbeddedButton-lg-effect-width);
2318
+ --effect-block-size: var(--hop-EmbeddedButton-lg-effect-height);
2319
+ }
2320
+ .EmbeddedButton-module__hop-EmbeddedButton--neutral___Zm-js {
2321
+ --color: var(--hop-EmbeddedButton-neutral-color);
2322
+ --effect-background-color: var(--hop-EmbeddedButton-neutral-effect-background-color);
2323
+ }
2324
+ .EmbeddedButton-module__hop-EmbeddedButton--subdued___WBkWw {
2325
+ --color: var(--hop-EmbeddedButton-subdued-color);
2326
+ --effect-background-color: var(--hop-EmbeddedButton-subdued-effect-background-color);
2327
+ }
2328
+ .EmbeddedButton-module__hop-EmbeddedButton--progress___-hN3z {
2329
+ --color: var(--hop-EmbeddedButton-progress-color);
2330
+ --effect-background-color: var(--hop-EmbeddedButton-progress-effect-background-color);
2331
+ }
2332
+ .EmbeddedButton-module__hop-EmbeddedButton--positive___l6LUR {
2333
+ --color: var(--hop-EmbeddedButton-positive-color);
2334
+ --effect-background-color: var(--hop-EmbeddedButton-positive-effect-background-color);
2335
+ }
2336
+ .EmbeddedButton-module__hop-EmbeddedButton--caution___cRFs6 {
2337
+ --color: var(--hop-EmbeddedButton-caution-color);
2338
+ --effect-background-color: var(--hop-EmbeddedButton-caution-effect-background-color);
2339
+ }
2340
+ .EmbeddedButton-module__hop-EmbeddedButton--negative___IpUMs {
2341
+ --color: var(--hop-EmbeddedButton-negative-color);
2342
+ --effect-background-color: var(--hop-EmbeddedButton-negative-effect-background-color);
2343
+ }
2344
+ .EmbeddedButton-module__hop-EmbeddedButton--option1___OljFH {
2345
+ --color: var(--hop-EmbeddedButton-option1-color);
2346
+ --effect-background-color: var(--hop-EmbeddedButton-option1-effect-background-color);
2347
+ }
2348
+ .EmbeddedButton-module__hop-EmbeddedButton--option2___esb4r {
2349
+ --color: var(--hop-EmbeddedButton-option2-color);
2350
+ --effect-background-color: var(--hop-EmbeddedButton-option2-effect-background-color);
2351
+ }
2352
+ .EmbeddedButton-module__hop-EmbeddedButton--option3___hqADK {
2353
+ --color: var(--hop-EmbeddedButton-option3-color);
2354
+ --effect-background-color: var(--hop-EmbeddedButton-option3-effect-background-color);
2355
+ }
2356
+ .EmbeddedButton-module__hop-EmbeddedButton--option4___aZ9UG {
2357
+ --color: var(--hop-EmbeddedButton-option4-color);
2358
+ --effect-background-color: var(--hop-EmbeddedButton-option4-effect-background-color);
2359
+ }
2360
+ .EmbeddedButton-module__hop-EmbeddedButton--option5___hBLgP {
2361
+ --color: var(--hop-EmbeddedButton-option5-color);
2362
+ --effect-background-color: var(--hop-EmbeddedButton-option5-effect-background-color);
2363
+ }
2364
+ .EmbeddedButton-module__hop-EmbeddedButton--option6___dkgz3 {
2365
+ --color: var(--hop-EmbeddedButton-option6-color);
2366
+ --effect-background-color: var(--hop-EmbeddedButton-option6-effect-background-color);
2367
+ }
2368
+ .EmbeddedButton-module__hop-EmbeddedButton___1GbQx[data-selected] {
2369
+ --color: var(--hop-EmbeddedButton-selected-color);
2370
+ --effect-background-color: var(--hop-EmbeddedButton-selected-effect-background-color);
2371
+ }
2372
+ .EmbeddedButton-module__hop-EmbeddedButton___1GbQx[data-focus-visible] {
2373
+ outline: var(--focus-ring-size) solid var(--hop-EmbeddedButton-focus-ring-color);
2374
+ outline-offset: var(--focus-ring-offset);
2375
+ }
2376
+ .EmbeddedButton-module__hop-EmbeddedButton___1GbQx[data-disabled] {
2377
+ cursor: not-allowed;
2378
+ }
2379
+ .EmbeddedButton-module__hop-EmbeddedButton--neutral___Zm-js[data-hovered] {
2380
+ --effect-background-color: var(--hop-EmbeddedButton-neutral-effect-background-color-hovered);
2381
+ --color: var(--hop-EmbeddedButton-neutral-color-hovered);
2382
+ }
2383
+ .EmbeddedButton-module__hop-EmbeddedButton--neutral___Zm-js[data-focus-visible] {
2384
+ --effect-background-color: var(--hop-EmbeddedButton-neutral-effect-background-color-focused);
2385
+ --color: var(--hop-EmbeddedButton-neutral-color-focused);
2386
+ }
2387
+ .EmbeddedButton-module__hop-EmbeddedButton--neutral___Zm-js[data-pressed] {
2388
+ --effect-background-color: var(--hop-EmbeddedButton-neutral-effect-background-color-pressed);
2389
+ --color: var(--hop-EmbeddedButton-neutral-color-pressed);
2390
+ }
2391
+ .EmbeddedButton-module__hop-EmbeddedButton--neutral___Zm-js[data-disabled] {
2392
+ --effect-background-color: var(--hop-EmbeddedButton-neutral-effect-background-color-disabled);
2393
+ --color: var(--hop-EmbeddedButton-neutral-color-disabled);
2394
+ }
2395
+ .EmbeddedButton-module__hop-EmbeddedButton--subdued___WBkWw[data-hovered] {
2396
+ --effect-background-color: var(--hop-EmbeddedButton-subdued-effect-background-color-hovered);
2397
+ --color: var(--hop-EmbeddedButton-subdued-color-hovered);
2398
+ }
2399
+ .EmbeddedButton-module__hop-EmbeddedButton--subdued___WBkWw[data-focus-visible] {
2400
+ --effect-background-color: var(--hop-EmbeddedButton-subdued-effect-background-color-focused);
2401
+ --color: var(--hop-EmbeddedButton-subdued-color-focused);
2402
+ }
2403
+ .EmbeddedButton-module__hop-EmbeddedButton--subdued___WBkWw[data-pressed] {
2404
+ --effect-background-color: var(--hop-EmbeddedButton-subdued-effect-background-color-pressed);
2405
+ --color: var(--hop-EmbeddedButton-subdued-color-pressed);
2406
+ }
2407
+ .EmbeddedButton-module__hop-EmbeddedButton--subdued___WBkWw[data-disabled] {
2408
+ --effect-background-color: var(--hop-EmbeddedButton-subdued-effect-background-color-disabled);
2409
+ --color: var(--hop-EmbeddedButton-subdued-color-disabled);
2410
+ }
2411
+ .EmbeddedButton-module__hop-EmbeddedButton--progress___-hN3z[data-hovered] {
2412
+ --effect-background-color: var(--hop-EmbeddedButton-progress-effect-background-color-hovered);
2413
+ --color: var(--hop-EmbeddedButton-progress-color-hovered);
2414
+ }
2415
+ .EmbeddedButton-module__hop-EmbeddedButton--progress___-hN3z[data-focus-visible] {
2416
+ --effect-background-color: var(--hop-EmbeddedButton-progress-effect-background-color-focused);
2417
+ --color: var(--hop-EmbeddedButton-progress-color-focused);
2418
+ }
2419
+ .EmbeddedButton-module__hop-EmbeddedButton--progress___-hN3z[data-pressed] {
2420
+ --effect-background-color: var(--hop-EmbeddedButton-progress-effect-background-color-pressed);
2421
+ --color: var(--hop-EmbeddedButton-progress-color-pressed);
2422
+ }
2423
+ .EmbeddedButton-module__hop-EmbeddedButton--progress___-hN3z[data-disabled] {
2424
+ --effect-background-color: var(--hop-EmbeddedButton-progress-effect-background-color-disabled);
2425
+ --color: var(--hop-EmbeddedButton-progress-color-disabled);
2426
+ }
2427
+ .EmbeddedButton-module__hop-EmbeddedButton--positive___l6LUR[data-hovered] {
2428
+ --effect-background-color: var(--hop-EmbeddedButton-positive-effect-background-color-hovered);
2429
+ --color: var(--hop-EmbeddedButton-positive-color-hovered);
2430
+ }
2431
+ .EmbeddedButton-module__hop-EmbeddedButton--positive___l6LUR[data-focus-visible] {
2432
+ --effect-background-color: var(--hop-EmbeddedButton-positive-effect-background-color-focused);
2433
+ --color: var(--hop-EmbeddedButton-positive-color-focused);
2434
+ }
2435
+ .EmbeddedButton-module__hop-EmbeddedButton--positive___l6LUR[data-pressed] {
2436
+ --effect-background-color: var(--hop-EmbeddedButton-positive-effect-background-color-pressed);
2437
+ --color: var(--hop-EmbeddedButton-positive-color-pressed);
2438
+ }
2439
+ .EmbeddedButton-module__hop-EmbeddedButton--positive___l6LUR[data-disabled] {
2440
+ --effect-background-color: var(--hop-EmbeddedButton-positive-effect-background-color-disabled);
2441
+ --color: var(--hop-EmbeddedButton-positive-color-disabled);
2442
+ }
2443
+ .EmbeddedButton-module__hop-EmbeddedButton--caution___cRFs6[data-hovered] {
2444
+ --effect-background-color: var(--hop-EmbeddedButton-caution-effect-background-color-hovered);
2445
+ --color: var(--hop-EmbeddedButton-caution-color-hovered);
2446
+ }
2447
+ .EmbeddedButton-module__hop-EmbeddedButton--caution___cRFs6[data-focus-visible] {
2448
+ --effect-background-color: var(--hop-EmbeddedButton-caution-effect-background-color-focused);
2449
+ --color: var(--hop-EmbeddedButton-caution-color-focused);
2450
+ }
2451
+ .EmbeddedButton-module__hop-EmbeddedButton--caution___cRFs6[data-pressed] {
2452
+ --effect-background-color: var(--hop-EmbeddedButton-caution-effect-background-color-pressed);
2453
+ --color: var(--hop-EmbeddedButton-caution-color-pressed);
2454
+ }
2455
+ .EmbeddedButton-module__hop-EmbeddedButton--caution___cRFs6[data-disabled] {
2456
+ --effect-background-color: var(--hop-EmbeddedButton-caution-effect-background-color-disabled);
2457
+ --color: var(--hop-EmbeddedButton-caution-color-disabled);
2458
+ }
2459
+ .EmbeddedButton-module__hop-EmbeddedButton--negative___IpUMs[data-hovered] {
2460
+ --effect-background-color: var(--hop-EmbeddedButton-negative-effect-background-color-hovered);
2461
+ --color: var(--hop-EmbeddedButton-negative-color-hovered);
2462
+ }
2463
+ .EmbeddedButton-module__hop-EmbeddedButton--negative___IpUMs[data-focus-visible] {
2464
+ --effect-background-color: var(--hop-EmbeddedButton-negative-effect-background-color-focused);
2465
+ --color: var(--hop-EmbeddedButton-negative-color-focused);
2466
+ }
2467
+ .EmbeddedButton-module__hop-EmbeddedButton--negative___IpUMs[data-pressed] {
2468
+ --effect-background-color: var(--hop-EmbeddedButton-negative-effect-background-color-pressed);
2469
+ --color: var(--hop-EmbeddedButton-negative-color-pressed);
2470
+ }
2471
+ .EmbeddedButton-module__hop-EmbeddedButton--negative___IpUMs[data-disabled] {
2472
+ --effect-background-color: var(--hop-EmbeddedButton-negative-effect-background-color-disabled);
2473
+ --color: var(--hop-EmbeddedButton-negative-color-disabled);
2474
+ }
2475
+ .EmbeddedButton-module__hop-EmbeddedButton--option1___OljFH[data-hovered] {
2476
+ --effect-background-color: var(--hop-EmbeddedButton-option1-effect-background-color-hovered);
2477
+ --color: var(--hop-EmbeddedButton-option1-color-hovered);
2478
+ }
2479
+ .EmbeddedButton-module__hop-EmbeddedButton--option1___OljFH[data-focus-visible] {
2480
+ --effect-background-color: var(--hop-EmbeddedButton-option1-effect-background-color-focused);
2481
+ --color: var(--hop-EmbeddedButton-option1-color-focused);
2482
+ }
2483
+ .EmbeddedButton-module__hop-EmbeddedButton--option1___OljFH[data-pressed] {
2484
+ --effect-background-color: var(--hop-EmbeddedButton-option1-effect-background-color-pressed);
2485
+ --color: var(--hop-EmbeddedButton-option1-color-pressed);
2486
+ }
2487
+ .EmbeddedButton-module__hop-EmbeddedButton--option1___OljFH[data-disabled] {
2488
+ --effect-background-color: var(--hop-EmbeddedButton-option1-effect-background-color-disabled);
2489
+ --color: var(--hop-EmbeddedButton-option1-color-disabled);
2490
+ }
2491
+ .EmbeddedButton-module__hop-EmbeddedButton--option2___esb4r[data-hovered] {
2492
+ --effect-background-color: var(--hop-EmbeddedButton-option2-effect-background-color-hovered);
2493
+ --color: var(--hop-EmbeddedButton-option2-color-hovered);
2494
+ }
2495
+ .EmbeddedButton-module__hop-EmbeddedButton--option2___esb4r[data-focus-visible] {
2496
+ --effect-background-color: var(--hop-EmbeddedButton-option2-effect-background-color-focused);
2497
+ --color: var(--hop-EmbeddedButton-option2-color-focused);
2498
+ }
2499
+ .EmbeddedButton-module__hop-EmbeddedButton--option2___esb4r[data-pressed] {
2500
+ --effect-background-color: var(--hop-EmbeddedButton-option2-effect-background-color-pressed);
2501
+ --color: var(--hop-EmbeddedButton-option2-color-pressed);
2502
+ }
2503
+ .EmbeddedButton-module__hop-EmbeddedButton--option2___esb4r[data-disabled] {
2504
+ --effect-background-color: var(--hop-EmbeddedButton-option2-effect-background-color-disabled);
2505
+ --color: var(--hop-EmbeddedButton-option2-color-disabled);
2506
+ }
2507
+ .EmbeddedButton-module__hop-EmbeddedButton--option3___hqADK[data-hovered] {
2508
+ --effect-background-color: var(--hop-EmbeddedButton-option3-effect-background-color-hovered);
2509
+ --color: var(--hop-EmbeddedButton-option3-color-hovered);
2510
+ }
2511
+ .EmbeddedButton-module__hop-EmbeddedButton--option3___hqADK[data-focus-visible] {
2512
+ --effect-background-color: var(--hop-EmbeddedButton-option3-effect-background-color-focused);
2513
+ --color: var(--hop-EmbeddedButton-option3-color-focused);
2514
+ }
2515
+ .EmbeddedButton-module__hop-EmbeddedButton--option3___hqADK[data-pressed] {
2516
+ --effect-background-color: var(--hop-EmbeddedButton-option3-effect-background-color-pressed);
2517
+ --color: var(--hop-EmbeddedButton-option3-color-pressed);
2518
+ }
2519
+ .EmbeddedButton-module__hop-EmbeddedButton--option3___hqADK[data-disabled] {
2520
+ --effect-background-color: var(--hop-EmbeddedButton-option3-effect-background-color-disabled);
2521
+ --color: var(--hop-EmbeddedButton-option3-color-disabled);
2522
+ }
2523
+ .EmbeddedButton-module__hop-EmbeddedButton--option4___aZ9UG[data-hovered] {
2524
+ --effect-background-color: var(--hop-EmbeddedButton-option4-effect-background-color-hovered);
2525
+ --color: var(--hop-EmbeddedButton-option4-color-hovered);
2526
+ }
2527
+ .EmbeddedButton-module__hop-EmbeddedButton--option4___aZ9UG[data-focus-visible] {
2528
+ --effect-background-color: var(--hop-EmbeddedButton-option4-effect-background-color-focused);
2529
+ --color: var(--hop-EmbeddedButton-option4-color-focused);
2530
+ }
2531
+ .EmbeddedButton-module__hop-EmbeddedButton--option4___aZ9UG[data-pressed] {
2532
+ --effect-background-color: var(--hop-EmbeddedButton-option4-effect-background-color-pressed);
2533
+ --color: var(--hop-EmbeddedButton-option4-color-pressed);
2534
+ }
2535
+ .EmbeddedButton-module__hop-EmbeddedButton--option4___aZ9UG[data-disabled] {
2536
+ --effect-background-color: var(--hop-EmbeddedButton-option4-effect-background-color-disabled);
2537
+ --color: var(--hop-EmbeddedButton-option4-color-disabled);
2538
+ }
2539
+ .EmbeddedButton-module__hop-EmbeddedButton--option5___hBLgP[data-hovered] {
2540
+ --effect-background-color: var(--hop-EmbeddedButton-option5-effect-background-color-hovered);
2541
+ --color: var(--hop-EmbeddedButton-option5-color-hovered);
2542
+ }
2543
+ .EmbeddedButton-module__hop-EmbeddedButton--option5___hBLgP[data-focus-visible] {
2544
+ --effect-background-color: var(--hop-EmbeddedButton-option5-effect-background-color-focused);
2545
+ --color: var(--hop-EmbeddedButton-option5-color-focused);
2546
+ }
2547
+ .EmbeddedButton-module__hop-EmbeddedButton--option5___hBLgP[data-pressed] {
2548
+ --effect-background-color: var(--hop-EmbeddedButton-option5-effect-background-color-pressed);
2549
+ --color: var(--hop-EmbeddedButton-option5-color-pressed);
2550
+ }
2551
+ .EmbeddedButton-module__hop-EmbeddedButton--option5___hBLgP[data-disabled] {
2552
+ --effect-background-color: var(--hop-EmbeddedButton-option5-effect-background-color-disabled);
2553
+ --color: var(--hop-EmbeddedButton-option5-color-disabled);
2554
+ }
2555
+ .EmbeddedButton-module__hop-EmbeddedButton--option6___dkgz3[data-hovered] {
2556
+ --effect-background-color: var(--hop-EmbeddedButton-option6-effect-background-color-hovered);
2557
+ --color: var(--hop-EmbeddedButton-option6-color-hovered);
2558
+ }
2559
+ .EmbeddedButton-module__hop-EmbeddedButton--option6___dkgz3[data-focus-visible] {
2560
+ --effect-background-color: var(--hop-EmbeddedButton-option6-effect-background-color-focused);
2561
+ --color: var(--hop-EmbeddedButton-option6-color-focused);
2562
+ }
2563
+ .EmbeddedButton-module__hop-EmbeddedButton--option6___dkgz3[data-pressed] {
2564
+ --effect-background-color: var(--hop-EmbeddedButton-option6-effect-background-color-pressed);
2565
+ --color: var(--hop-EmbeddedButton-option6-color-pressed);
2566
+ }
2567
+ .EmbeddedButton-module__hop-EmbeddedButton--option6___dkgz3[data-disabled] {
2568
+ --effect-background-color: var(--hop-EmbeddedButton-option6-effect-background-color-disabled);
2569
+ --color: var(--hop-EmbeddedButton-option6-color-disabled);
2570
+ }
2571
+ .EmbeddedButton-module__hop-EmbeddedButton__icon___-XQ2i {
2572
+ position: relative;
2573
+ }
2574
+
2575
+ /* css-module:/home/runner/work/wl-hopper/wl-hopper/packages/components/src/Form/src/Form.module.css/#css-module-data */
2576
+ .Form-module__hop-Form___tKcK9 {
2577
+ display: flex;
2578
+ flex-direction: column;
2579
+ gap: var(--hop-space-stack-lg);
2580
+ }
2581
+
2582
+ /* css-module:/home/runner/work/wl-hopper/wl-hopper/packages/components/src/inputs/src/InputGroup.module.css/#css-module-data */
2583
+ .InputGroup-module__hop-InputGroup___nX1AB {
2584
+ --hop-InputGroup-background: var(--hop-neutral-surface);
2585
+ --hop-InputGroup-border-color: var(--hop-neutral-border);
2586
+ --hop-InputGroup-border-width: 0.0625rem;
2587
+ --hop-InputGroup-display: inline-flex;
2588
+ --hop-InputGroup-display-number: grid;
2589
+ --hop-InputGroup-gap: var(--hop-space-inline-sm);
2590
+ --hop-InputGroup-gap-textarea: 0;
2591
+ --hop-InputGroup-gap-number: 0;
2592
+ --hop-InputGroup-flex-direction: row;
2593
+ --hop-InputGroup-flex-direction-textarea: column;
2594
+ --hop-InputGroup-align-items: center;
2595
+ --hop-InputGroup-align-items-textarea: flex-end;
2596
+ --hop-InputGroup-inline-size: fit-content;
2597
+ --hop-InputGroup-sm-block-size: 2rem;
2598
+ --hop-InputGroup-md-block-size: 2.5rem;
2599
+ --hop-InputGroup-block-size-textarea: auto;
2600
+ --hop-InputGroup-border-radius: var(--hop-shape-rounded-md);
2601
+ --hop-InputGroup-padding-inline: var(--hop-space-inset-md);
2602
+ --hop-InputGroup-padding-block: 0;
2603
+ --hop-InputGroup-padding-inline-textarea: var(--hop-space-inset-xs);
2604
+ --hop-InputGroup-padding-block-textarea: var(--hop-space-inset-xs);
2605
+ --hop-InputGroup-border-color-hover: var(--hop-neutral-border-hover);
2606
+ --hop-InputGroup-border-color-focus: var(--hop-primary-border-focus);
2607
+ --hop-InputGroup-background-hover: var(--hop-neutral-surface-hover);
2608
+ --hop-InputGroup-border-color-invalid: var(--hop-danger-border-strong);
2609
+ --hop-InputGroup-input-color: var(--hop-neutral-text);
2610
+ --hop-InputGroup-input-color-disabled: var(--hop-neutral-text-disabled);
2611
+ --hop-InputGroup-input-sm-font-family: var(--hop-body-sm-font-family);
2612
+ --hop-InputGroup-input-sm-font-size: var(--hop-body-sm-font-size);
2613
+ --hop-InputGroup-input-sm-font-weight: var(--hop-body-sm-font-weight);
2614
+ --hop-InputGroup-input-sm-line-height: var(--hop-body-sm-line-height);
2615
+ --hop-InputGroup-input-sm-block-size: 1.5rem;
2616
+ --hop-InputGroup-input-md-font-family: var(--hop-body-md-font-family);
2617
+ --hop-InputGroup-input-md-font-size: var(--hop-body-md-font-size);
2618
+ --hop-InputGroup-input-md-font-weight: var(--hop-body-md-font-weight);
2619
+ --hop-InputGroup-input-md-line-height: var(--hop-body-md-line-height);
2620
+ --hop-InputGroup-input-md-block-size: 2rem;
2621
+ --hop-InputGroup-input-padding: 0;
2622
+ --hop-InputGroup-textarea-padding: var(--hop-space-inset-xs) calc(var(--hop-space-inset-md) - var(--hop-space-inset-xs));
2623
+ --hop-InputGroup-background-disabled: var(--hop-neutral-surface-disabled);
2624
+ --hop-InputGroup-border-color-disabled: var(--hop-neutral-border-disabled);
2625
+ --hop-InputGroup-placeholder-font-family: inherit;
2626
+ --hop-InputGroup-placeholder-font-size: inherit;
2627
+ --hop-InputGroup-placeholder-font-weight: inherit;
2628
+ --hop-InputGroup-placeholder-line-height: inherit;
2629
+ --hop-InputGroup-placeholder-color: var(--hop-neutral-text-weakest);
2630
+ --hop-InputGroup-placeholder-color-disabled: var(--hop-neutral-text-disabled);
2631
+ --inline-size: var(--hop-InputGroup-inline-size);
2632
+ --border: var(--hop-InputGroup-border-width) solid var(--hop-InputGroup-border-color);
2633
+ --background: var(--hop-InputGroup-background);
2634
+ --block-size: var(--hop-InputGroup-md-block-size);
2635
+ --display: var(--hop-InputGroup-display);
2636
+ --gap: var(--hop-InputGroup-gap);
2637
+ --flex-direction: var(--hop-InputGroup-flex-direction);
2638
+ --align-items: var(--hop-InputGroup-align-items);
2639
+ --padding-inline: var(--hop-InputGroup-padding-inline);
2640
+ --padding-block: var(--hop-InputGroup-padding-block);
2641
+ --input-font-family: var(--hop-InputGroup-input-md-font-family);
2642
+ --input-font-size: var(--hop-InputGroup-input-md-font-size);
2643
+ --input-font-weight: var(--hop-InputGroup-input-md-font-weight);
2644
+ --input-line-height: var(--hop-InputGroup-input-md-line-height);
2645
+ --input-block-size: var(--hop-InputGroup-input-md-block-size);
2646
+ --input-inline-size: initial;
2647
+ --input-color: var(--hop-InputGroup-input-color);
2648
+ --input-placeholder-color: var(--hop-InputGroup-placeholder-color);
2649
+ position: relative;
2650
+ display: var(--display);
2651
+ flex-direction: var(--flex-direction);
2652
+ gap: var(--gap);
2653
+ align-items: var(--align-items);
2654
+ box-sizing: border-box;
2655
+ inline-size: var(--inline-size);
2656
+ block-size: var(--block-size);
2657
+ padding-block: var(--padding-block);
2658
+ padding-inline: var(--padding-inline);
2659
+ background: var(--background);
2660
+ border: var(--border);
2661
+ border-radius: var(--hop-InputGroup-border-radius);
2662
+ }
2663
+ .InputGroup-module__hop-InputGroup--fluid___cl9VB {
2664
+ --inline-size: 100%;
2665
+ --input-inline-size: 100%;
2666
+ }
2667
+ .InputGroup-module__hop-InputGroup--sm___W9UwB {
2668
+ --block-size: var(--hop-InputGroup-sm-block-size);
2669
+ --input-font-family: var(--hop-InputGroup-input-sm-font-family);
2670
+ --input-font-size: var(--hop-InputGroup-input-sm-font-size);
2671
+ --input-font-weight: var(--hop-InputGroup-input-sm-font-weight);
2672
+ --input-line-height: var(--hop-InputGroup-input-sm-line-height);
2673
+ --input-block-size: var(--hop-InputGroup-input-sm-block-size);
2674
+ }
2675
+ .InputGroup-module__hop-InputGroup___nX1AB[data-input-type=textarea] {
2676
+ --gap: var(--hop-InputGroup-gap-textarea);
2677
+ --flex-direction: var(--hop-InputGroup-flex-direction-textarea);
2678
+ --align-items: var(--hop-InputGroup-align-items-textarea);
2679
+ --block-size: var(--hop-InputGroup-block-size-textarea);
2680
+ --padding-inline: var(--hop-InputGroup-padding-inline-textarea);
2681
+ --padding-block: var(--hop-InputGroup-padding-block-textarea);
2682
+ }
2683
+ .InputGroup-module__hop-InputGroup___nX1AB[data-input-type=number] {
2684
+ --display: var(--hop-InputGroup-display-number);
2685
+ --gap: var(--hop-InputGroup-gap-number);
2686
+ }
2687
+ .InputGroup-module__hop-InputGroup___nX1AB[data-hovered] {
2688
+ --background: var(--hop-InputGroup-background-hover);
2689
+ --border: var(--hop-InputGroup-border-width) solid var(--hop-InputGroup-border-color-hover) ;
2690
+ }
2691
+ .InputGroup-module__hop-InputGroup___nX1AB[data-focus-within] {
2692
+ --border: var(--hop-InputGroup-border-width) solid var(--hop-InputGroup-border-color-focus) ;
2693
+ }
2694
+ .InputGroup-module__hop-InputGroup___nX1AB[data-invalid] {
2695
+ --border: var(--hop-InputGroup-border-width) solid var(--hop-InputGroup-border-color-invalid) ;
2696
+ }
2697
+ .InputGroup-module__hop-InputGroup___nX1AB[data-disabled] {
2698
+ --background: var(--hop-InputGroup-background-disabled);
2699
+ --border: 0.0625rem solid var(--hop-InputGroup-border-color-disabled);
2700
+ --input-color: var(--hop-InputGroup-input-color-disabled);
2701
+ --input-placeholder-color: var(--hop-InputGroup-placeholder-color-disabled);
2702
+ }
2703
+ .InputGroup-module__hop-InputGroup__input___VIhOd,
2704
+ .InputGroup-module__hop-InputGroup__textarea___9H21Z {
2705
+ flex: 1 1 auto;
2706
+ box-sizing: border-box;
2707
+ inline-size: var(--input-inline-size);
2708
+ min-inline-size: 0;
2709
+ font-family: var(--input-font-family);
2710
+ font-size: var(--input-font-size);
2711
+ font-weight: var(--input-font-weight);
2712
+ line-height: var(--input-line-height);
2713
+ color: var(--input-color);
2714
+ background: transparent;
2715
+ border: none;
2716
+ outline: none;
2717
+ }
2718
+ .InputGroup-module__hop-InputGroup__input___VIhOd {
2719
+ block-size: var(--input-block-size);
2720
+ padding: var(--hop-InputGroup-input-padding);
2721
+ }
2722
+ .InputGroup-module__hop-InputGroup__textarea___9H21Z {
2723
+ padding: var(--hop-InputGroup-textarea-padding);
2724
+ }
2725
+ .InputGroup-module__hop-InputGroup__input___VIhOd::placeholder {
2726
+ font-family: var(--hop-InputGroup-placeholder-font-family);
2727
+ font-size: var(--hop-InputGroup-placeholder-font-size);
2728
+ font-weight: var(--hop-InputGroup-placeholder-font-weight);
2729
+ line-height: var(--hop-InputGroup-placeholder-line-height);
2730
+ color: var(--input-placeholder-color);
2731
+ }
2732
+
2733
+ /* css-module:/home/runner/work/wl-hopper/wl-hopper/packages/components/src/typography/Heading/src/Heading.module.css/#css-module-data */
2734
+ .Heading-module__hop-Heading___qD-ZA {
2735
+ --hop-Heading-xs-font-size: var(--hop-heading-xs-font-size);
2736
+ --hop-Heading-xs-font-family: var(--hop-heading-xs-font-family);
2737
+ --hop-Heading-xs-font-weight: var(--hop-heading-xs-font-weight);
2738
+ --hop-Heading-xs-line-height: var(--hop-heading-xs-line-height);
2739
+ --hop-Heading-sm-font-size: var(--hop-heading-sm-font-size);
2740
+ --hop-Heading-sm-font-family: var(--hop-heading-sm-font-family);
2741
+ --hop-Heading-sm-font-weight: var(--hop-heading-sm-font-weight);
2742
+ --hop-Heading-sm-line-height: var(--hop-heading-sm-line-height);
2743
+ --hop-Heading-md-font-size: var(--hop-heading-md-font-size);
2744
+ --hop-Heading-md-font-family: var(--hop-heading-md-font-family);
2745
+ --hop-Heading-md-font-weight: var(--hop-heading-md-font-weight);
2746
+ --hop-Heading-md-line-height: var(--hop-heading-md-line-height);
2747
+ --hop-Heading-lg-font-size: var(--hop-heading-lg-font-size);
2748
+ --hop-Heading-lg-font-family: var(--hop-heading-lg-font-family);
2749
+ --hop-Heading-lg-font-weight: var(--hop-heading-lg-font-weight);
2750
+ --hop-Heading-lg-line-height: var(--hop-heading-lg-line-height);
2751
+ --hop-Heading-xl-font-size: var(--hop-heading-xl-font-size);
2752
+ --hop-Heading-xl-font-family: var(--hop-heading-xl-font-family);
2753
+ --hop-Heading-xl-font-weight: var(--hop-heading-xl-font-weight);
2754
+ --hop-Heading-xl-line-height: var(--hop-heading-xl-line-height);
2755
+ --hop-Heading-2xl-font-size: var(--hop-heading-2xl-font-size);
2756
+ --hop-Heading-2xl-font-family: var(--hop-heading-2xl-font-family);
2757
+ --hop-Heading-2xl-font-weight: var(--hop-heading-2xl-font-weight);
2758
+ --hop-Heading-2xl-line-height: var(--hop-heading-2xl-line-height);
2759
+ --hop-Heading-3xl-font-size: var(--hop-heading-3xl-font-size);
2760
+ --hop-Heading-3xl-font-family: var(--hop-heading-3xl-font-family);
2761
+ --hop-Heading-3xl-font-weight: var(--hop-heading-3xl-font-weight);
2762
+ --hop-Heading-3xl-line-height: var(--hop-heading-3xl-line-height);
2763
+ --hop-Heading-inherit-size-font-size: inherit;
2764
+ --hop-Heading-inherit-size-font-family: inherit;
2765
+ --hop-Heading-inherit-size-font-weight: inherit;
2766
+ --hop-Heading-inherit-size-line-height: inherit;
2767
+ }
2768
+ :where(.Heading-module__hop-Heading___qD-ZA) {
2769
+ margin: 0;
2770
+ font-family: var(--font-family);
2771
+ font-size: var(--font-size);
2772
+ font-weight: var(--font-weight);
2773
+ line-height: var(--line-height);
2774
+ }
2775
+ :where(.Heading-module__hop-Heading--xs___mwtYu) {
2776
+ --font-size: var(--hop-Heading-xs-font-size);
2777
+ --font-family: var(--hop-Heading-xs-font-family);
2778
+ --font-weight: var(--hop-Heading-xs-font-weight);
2779
+ --line-height: var(--hop-Heading-xs-line-height);
2780
+ }
2781
+ :where(.Heading-module__hop-Heading--sm___H6NDx) {
2782
+ --font-size: var(--hop-Heading-sm-font-size);
2783
+ --font-family: var(--hop-Heading-sm-font-family);
2784
+ --font-weight: var(--hop-Heading-sm-font-weight);
2785
+ --line-height: var(--hop-Heading-sm-line-height);
2786
+ }
2787
+ :where(.Heading-module__hop-Heading--md___EMItL) {
2788
+ --font-size: var(--hop-Heading-md-font-size);
2789
+ --font-family: var(--hop-Heading-md-font-family);
2790
+ --font-weight: var(--hop-Heading-md-font-weight);
2791
+ --line-height: var(--hop-Heading-md-line-height);
2792
+ }
2793
+ :where(.Heading-module__hop-Heading--lg___qwUN7) {
2794
+ --font-size: var(--hop-Heading-lg-font-size);
2795
+ --font-family: var(--hop-Heading-lg-font-family);
2796
+ --font-weight: var(--hop-Heading-lg-font-weight);
2797
+ --line-height: var(--hop-Heading-lg-line-height);
2798
+ }
2799
+ :where(.Heading-module__hop-Heading--xl___3ROoJ) {
2800
+ --font-size: var(--hop-Heading-xl-font-size);
2801
+ --font-family: var(--hop-Heading-xl-font-family);
2802
+ --font-weight: var(--hop-Heading-xl-font-weight);
2803
+ --line-height: var(--hop-Heading-xl-line-height);
2804
+ }
2805
+ :where(.Heading-module__hop-Heading--2xl___9FgeA) {
2806
+ --font-size: var(--hop-Heading-2xl-font-size);
2807
+ --font-family: var(--hop-Heading-2xl-font-family);
2808
+ --font-weight: var(--hop-Heading-2xl-font-weight);
2809
+ --line-height: var(--hop-Heading-2xl-line-height);
2810
+ }
2811
+ :where(.Heading-module__hop-Heading--3xl___Lg0Pe) {
2812
+ --font-size: var(--hop-Heading-3xl-font-size);
2813
+ --font-family: var(--hop-Heading-3xl-font-family);
2814
+ --font-weight: var(--hop-Heading-3xl-font-weight);
2815
+ --line-height: var(--hop-Heading-3xl-line-height);
2816
+ }
2817
+
2818
+ /* css-module:/home/runner/work/wl-hopper/wl-hopper/packages/components/src/inputs/src/NumberField.module.css/#css-module-data */
2819
+ .NumberField-module__hop-NumberField___uNRUm {
2820
+ --hop-NumberField-gap: var(--hop-space-stack-xs);
2821
+ --hop-NumberField-inline-size: 20rem;
2822
+ --hop-NumberField-inline-size-fluid: 100%;
2823
+ --hop-NumberField-prefix-color: var(--hop-neutral-text-weak);
2824
+ --hop-NumberField-prefix-margin-inline-end: var(--hop-space-inline-sm);
2825
+ --hop-NumberField-input-group-display: grid;
2826
+ --hop-NumberField-input-group-template: "prefix input stepup" auto "prefix input stepdown" auto / auto 1fr auto;
2827
+ --hop-NumberField-input-group-template-mobile: "stepdown prefix input stepup" auto / auto auto 1fr auto;
2828
+ --hop-NumberField-stepper-color: var(--hop-neutral-icon);
2829
+ --hop-NumberField-stepper-color-hovered: var(--hop-neutral-icon-hover);
2830
+ --hop-NumberField-stepper-color-pressed: var(--hop-neutral-icon-press);
2831
+ --hop-NumberField-stepper-color-disabled: var(--hop-neutral-icon-disabled);
2832
+ --hop-NumberField-stepper-background-color: var(--hop-neutral-surface);
2833
+ --hop-NumberField-stepper-background-color-hovered: var(--hop-neutral-surface-hover);
2834
+ --hop-NumberField-stepper-background-color-pressed: var(--hop-neutral-surface-press);
2835
+ --hop-NumberField-stepper-background-color-disabled: transparent;
2836
+ --hop-NumberField-stepper-border-radius: calc(var(--hop-shape-rounded-sm));
2837
+ --hop-NumberField-stepper-border-radius-increment: var(--hop-NumberField-stepper-border-radius) var(--hop-NumberField-stepper-border-radius) 0 0;
2838
+ --hop-NumberField-stepper-border-radius-decrement: 0 0 var(--hop-NumberField-stepper-border-radius) var(--hop-NumberField-stepper-border-radius);
2839
+ --hop-NumberField-stepper-border-radius-mobile-increment: 0 var(--hop-shape-rounded-md) var(--hop-shape-rounded-md) 0;
2840
+ --hop-NumberField-stepper-border-radius-mobile-decrement: var(--hop-shape-rounded-md) 0 0 var(--hop-shape-rounded-md);
2841
+ --hop-NumberField-stepper-height: 0.86rem;
2842
+ --hop-NumberField-stepper-height-mobile: 100%;
2843
+ --hop-NumberField-stepper-width: 1.5rem;
2844
+ --hop-NumberField-stepper-border-color: var(--hop-neutral-border);
2845
+ --hop-NumberField-stepper-border-width: 0.0625rem;
2846
+ --hop-NumberField-stepper-align-self-increment: end;
2847
+ --hop-NumberField-stepper-align-self-decrement: start;
2848
+ --hop-NumberField-stepper-align-self-increment-mobile: center;
2849
+ --hop-NumberField-stepper-align-self-decrement-mobile: center;
2850
+ --hop-NumberField-stepper-margin-inline-increment: var(--hop-space-inline-sm) calc(-1 * var(--hop-space-inline-sm));
2851
+ --hop-NumberField-stepper-margin-inline-decrement: var(--hop-space-inline-sm) calc(-1 * var(--hop-space-inline-sm));
2852
+ --hop-NumberField-stepper-margin-inline-increment-mobile: var(--hop-space-inline-sm) calc(-1 * var(--hop-space-inline-md));
2853
+ --hop-NumberField-stepper-margin-inline-decrement-mobile: calc(-1 * var(--hop-space-inline-md)) var(--hop-space-inline-sm);
2854
+ --inline-size: var(--hop-NumberField-inline-size);
2855
+ --stepper-color: var(--hop-NumberField-stepper-color);
2856
+ --stepper-background-color: var(--hop-NumberField-stepper-background-color);
2857
+ --stepper-border: var(--hop-NumberField-stepper-border-width) solid var(--hop-NumberField-stepper-border-color);
2858
+ --stepper-height: var(--hop-NumberField-stepper-height);
2859
+ --input-group-display: var(--hop-NumberField-input-group-display);
2860
+ --input-group-template: var(--hop-NumberField-input-group-template);
2861
+ overflow: hidden;
2862
+ display: flex;
2863
+ flex-direction: column;
2864
+ gap: var(--hop-NumberField-gap);
2865
+ inline-size: var(--inline-size);
2866
+ }
2867
+ .NumberField-module__hop-NumberField--fluid___XRWc0 {
2868
+ --inline-size: var(--hop-NumberField-inline-size-fluid);
2869
+ }
2870
+ .NumberField-module__hop-NumberField--mobile___hYLCb {
2871
+ --input-group-template: var(--hop-NumberField-input-group-template-mobile);
2872
+ --stepper-height: var(--hop-NumberField-stepper-height-mobile);
2873
+ }
2874
+ .NumberField-module__hop-NumberField__Label___xannL {
2875
+ order: 0;
2876
+ }
2877
+ .NumberField-module__hop-NumberField__prefix___UQSza {
2878
+ grid-area: prefix;
2879
+ margin-inline-end: var(--hop-NumberField-prefix-margin-inline-end);
2880
+ color: var(--hop-NumberField-prefix-color);
2881
+ }
2882
+ .NumberField-module__hop-NumberField__InputGroup___QEVBp {
2883
+ grid-template: var(--input-group-template);
2884
+ order: 1;
2885
+ }
2886
+ .NumberField-module__hop-NumberField__ErrorMessage___NAuFd,
2887
+ .NumberField-module__hop-NumberField__HelperMessage___Al9-3 {
2888
+ order: 3;
2889
+ }
2890
+ .NumberField-module__hop-NumberField__stepper-button___QbXaE {
2891
+ cursor: pointer;
2892
+ display: flex;
2893
+ grid-area: var(--grid-area, unset);
2894
+ align-items: center;
2895
+ align-self: var(--stepper-align-self);
2896
+ justify-content: center;
2897
+ box-sizing: border-box;
2898
+ inline-size: var(--hop-NumberField-stepper-width);
2899
+ max-inline-size: 100%;
2900
+ block-size: var(--stepper-height);
2901
+ margin-inline: var(--stepper-margin-inline);
2902
+ padding: 0;
2903
+ color: var(--stepper-color);
2904
+ background-color: var(--stepper-background-color);
2905
+ border-color: var(--hop-NumberField-stepper-border-color);
2906
+ border-style: solid;
2907
+ border-width: var(--stepper-border-width);
2908
+ border-radius: var(--stepper-border-radius, 0);
2909
+ outline: none;
2910
+ }
2911
+ .NumberField-module__hop-NumberField__stepper-button--increment___XBV9d {
2912
+ --stepper-border-radius: var(--hop-NumberField-stepper-border-radius-increment);
2913
+ --stepper-border-width: var(--hop-NumberField-stepper-border-width) var(--hop-NumberField-stepper-border-width) 0 var(--hop-NumberField-stepper-border-width);
2914
+ --stepper-align-self: var(--hop-NumberField-stepper-align-self-increment);
2915
+ --stepper-margin-inline: var(--hop-NumberField-stepper-margin-inline-increment);
2916
+ --grid-area: stepup;
2917
+ }
2918
+ .NumberField-module__hop-NumberField__stepper-button--decrement___ArgW8 {
2919
+ --stepper-border-radius: var(--hop-NumberField-stepper-border-radius-decrement);
2920
+ --stepper-border-width: 0 var(--hop-NumberField-stepper-border-width) var(--hop-NumberField-stepper-border-width) var(--hop-NumberField-stepper-border-width);
2921
+ --stepper-align-self: var(--hop-NumberField-stepper-align-self-decrement);
2922
+ --stepper-margin-inline: var(--hop-NumberField-stepper-margin-inline-decrement);
2923
+ --grid-area: stepdown;
2924
+ }
2925
+ .NumberField-module__hop-NumberField__stepper-button--mobile___USm3a.NumberField-module__hop-NumberField__stepper-button--increment___XBV9d {
2926
+ --stepper-border-width: 0 0 0 var(--hop-NumberField-stepper-border-width);
2927
+ --stepper-align-self: var(--hop-NumberField-stepper-align-self-increment-mobile);
2928
+ --stepper-margin-inline: var(--hop-NumberField-stepper-margin-inline-increment-mobile);
2929
+ --stepper-border-radius: var(--hop-NumberField-stepper-border-radius-mobile-increment);
2930
+ }
2931
+ .NumberField-module__hop-NumberField__stepper-button--mobile___USm3a.NumberField-module__hop-NumberField__stepper-button--decrement___ArgW8 {
2932
+ --stepper-border-width: 0 var(--hop-NumberField-stepper-border-width) 0 0;
2933
+ --stepper-align-self: var(--hop-NumberField-stepper-align-self-decrement-mobile);
2934
+ --stepper-margin-inline: var(--hop-NumberField-stepper-margin-inline-decrement-mobile);
2935
+ --stepper-border-radius: var(--hop-NumberField-stepper-border-radius-mobile-decrement);
2936
+ }
2937
+ .NumberField-module__hop-NumberField__stepper-button___QbXaE[data-hovered] {
2938
+ color: var(--hop-NumberField-stepper-color-hovered);
2939
+ background-color: var(--hop-NumberField-stepper-background-color-hovered);
2940
+ }
2941
+ .NumberField-module__hop-NumberField__stepper-button___QbXaE[data-pressed] {
2942
+ color: var(--hop-NumberField-stepper-color-pressed);
2943
+ background-color: var(--hop-NumberField-stepper-background-color-pressed);
2944
+ }
2945
+ .NumberField-module__hop-NumberField__stepper-button___QbXaE[data-disabled] {
2946
+ cursor: not-allowed;
2947
+ color: var(--hop-NumberField-stepper-color-disabled);
2948
+ background-color: var(--hop-NumberField-stepper-background-color-disabled);
2949
+ }
2950
+ .NumberField-module__hop-NumberField__stepper-button__icon___0-N8E {
2951
+ display: block;
2952
+ max-block-size: 100%;
2953
+ }
2954
+ .NumberField-module__hop-NumberField__input___JVKok {
2955
+ grid-area: input;
2956
+ }
2957
+
2958
+ /* css-module:/home/runner/work/wl-hopper/wl-hopper/packages/components/src/inputs/src/TextArea.module.css/#css-module-data */
2959
+ .TextArea-module__hop-TextArea___J0kzu {
2960
+ --hop-TextArea-gap: var(--hop-space-stack-xs);
2961
+ --hop-TextArea-inline-size: 20rem;
2962
+ --hop-TextArea-prefix-color: var(--hop-neutral-text-weak);
2963
+ --hop-TextArea-char-count-padding: 0 calc(var(--hop-space-inset-md) - var(--hop-space-inset-xs)) var(--hop-space-inset-xs);
2964
+ --hop-TextArea-char-count-color: var(--hop-neutral-text-weakest);
2965
+ --hop-TextArea-char-count-color-disabled: var(--hop-neutral-text-disabled);
2966
+ --hop-TextArea-char-count-color-invalid: var(--hop-danger-text-weak);
2967
+ --hop-TextArea-input-min-height: 2rem;
2968
+ --inline-size: var(--hop-TextArea-inline-size);
2969
+ --resize: none;
2970
+ --char-count-color: var(--hop-TextArea-char-count-color);
2971
+ display: flex;
2972
+ flex-direction: column;
2973
+ gap: var(--hop-TextArea-gap);
2974
+ inline-size: var(--inline-size);
2975
+ max-inline-size: 100%;
2976
+ }
2977
+ .TextArea-module__hop-TextArea--fluid___l8sl5 {
2978
+ --inline-size: 100%;
2979
+ }
2980
+ .TextArea-module__hop-TextArea___J0kzu[data-resize-mode=vertical] {
2981
+ --resize: vertical;
2982
+ }
2983
+ .TextArea-module__hop-TextArea___J0kzu[data-over-max-length] {
2984
+ --char-count-color: var(--hop-TextArea-char-count-color-invalid);
2985
+ }
2986
+ .TextArea-module__hop-TextArea___J0kzu[data-disabled] {
2987
+ --char-count-color: var(--hop-TextArea-char-count-color-disabled);
2988
+ }
2989
+ .TextArea-module__hop-TextArea__Label___8erAW {
2990
+ order: 0;
2991
+ }
2992
+ .TextArea-module__hop-TextArea__prefix___CrM8H {
2993
+ color: var(--hop-TextArea-prefix-color);
2994
+ }
2995
+ .TextArea-module__hop-TextArea__InputGroup___P-hh6 {
2996
+ order: 1;
2997
+ }
2998
+ .TextArea-module__hop-TextArea__textarea___4XbjQ {
2999
+ resize: var(--resize);
3000
+ min-block-size: var(--hop-TextArea-input-min-height);
3001
+ }
3002
+ .TextArea-module__hop-TextArea__char-count___KoGsg {
3003
+ padding: var(--hop-TextArea-char-count-padding);
3004
+ color: var(--char-count-color);
3005
+ }
3006
+ .TextArea-module__hop-TextArea__ErrorMessage___uMu4X,
3007
+ .TextArea-module__hop-TextArea__HelperMessage___Y5jyT {
3008
+ order: 3;
3009
+ }
3010
+
3011
+ /* css-module:/home/runner/work/wl-hopper/wl-hopper/packages/components/src/inputs/src/TextField.module.css/#css-module-data */
3012
+ .TextField-module__hop-TextField___RJoLH {
3013
+ --hop-TextField-gap: var(--hop-space-stack-xs);
3014
+ --hop-TextField-inline-size: 20rem;
3015
+ --hop-TextField-prefix-color: var(--hop-neutral-text-weak);
3016
+ --inline-size: var(--hop-TextField-inline-size);
3017
+ display: flex;
3018
+ flex-direction: column;
3019
+ gap: var(--hop-TextField-gap);
3020
+ inline-size: var(--inline-size);
3021
+ max-inline-size: 100%;
3022
+ }
3023
+ .TextField-module__hop-TextField--fluid___Hm8BC {
3024
+ --inline-size: 100%;
3025
+ }
3026
+ .TextField-module__hop-TextField__Label___2WysA {
3027
+ order: 0;
3028
+ }
3029
+ .TextField-module__hop-TextField__prefix___BNLea {
3030
+ color: var(--hop-TextField-prefix-color);
3031
+ }
3032
+ .TextField-module__hop-TextField__InputGroup___hKpqa {
3033
+ order: 1;
3034
+ }
3035
+ .TextField-module__hop-TextField__ErrorMessage___TjS1F,
3036
+ .TextField-module__hop-TextField__HelperMessage___F5toa {
3037
+ order: 3;
3038
+ }
3039
+
3040
+ /* css-module:/home/runner/work/wl-hopper/wl-hopper/packages/components/src/inputs/src/PasswordField.module.css/#css-module-data */
3041
+ .PasswordField-module__hop-PasswordField___thQxm {
3042
+ --hop-PasswordField-gap: var(--hop-space-stack-xs);
3043
+ --hop-PasswordField-inline-size: 20rem;
3044
+ --inline-size: var(--hop-PasswordField-inline-size);
3045
+ display: flex;
3046
+ flex-direction: column;
3047
+ gap: var(--hop-PasswordField-gap);
3048
+ inline-size: var(--inline-size);
3049
+ max-inline-size: 100%;
3050
+ }
3051
+ .PasswordField-module__hop-PasswordField--fluid___aWRUj {
3052
+ --inline-size: 100%;
3053
+ }
3054
+ .PasswordField-module__hop-PasswordField__Label___-GInu {
3055
+ order: 0;
3056
+ }
3057
+ .PasswordField-module__hop-PasswordField__InputGroup___sETiV {
3058
+ order: 1;
3059
+ }
3060
+ .PasswordField-module__hop-PasswordField__ErrorMessage___1qMsk,
3061
+ .PasswordField-module__hop-PasswordField__HelperMessage___148Z6 {
3062
+ order: 3;
3063
+ }
3064
+
3065
+ /* css-module:/home/runner/work/wl-hopper/wl-hopper/packages/components/src/inputs/src/SearchField.module.css/#css-module-data */
3066
+ .SearchField-module__hop-SearchField___XTMBu {
3067
+ --hop-SearchField-gap: var(--hop-space-stack-xs);
3068
+ --hop-SearchField-inline-size: 20rem;
3069
+ --hop-SearchField-color: var(--hop-neutral-text-weak);
3070
+ --hop-SearchField-padding: var(--hop-space-inset-md);
3071
+ --inline-size: var(--hop-SearchField-inline-size);
3072
+ --input-group-padding-inline-end: var(--hop-SearchField-padding);
3073
+ --input-group-padding-inline-start: var(--hop-SearchField-padding);
3074
+ --clear-button-display: flex;
3075
+ display: flex;
3076
+ flex-direction: column;
3077
+ gap: var(--hop-SearchField-gap);
3078
+ inline-size: var(--inline-size);
3079
+ max-inline-size: 100%;
3080
+ }
3081
+ .SearchField-module__hop-SearchField--fluid___vrM5S {
3082
+ --inline-size: 100%;
3083
+ }
3084
+ .SearchField-module__hop-SearchField__Label___vq1vb {
3085
+ order: 0;
3086
+ }
3087
+ .SearchField-module__hop-SearchField__prefix___IL75f {
3088
+ color: var(--hop-SearchField-color);
3089
+ }
3090
+ .SearchField-module__hop-SearchField__InputGroup___lG0Ig {
3091
+ order: 1;
3092
+ padding-inline: var(--input-group-padding-inline-start) var(--input-group-padding-inline-end);
3093
+ }
3094
+ .SearchField-module__hop-SearchField--clearable___FWBj0 {
3095
+ --input-group-padding-inline-end: 0;
3096
+ }
3097
+ .SearchField-module__hop-SearchField__ErrorMessage___USGKz,
3098
+ .SearchField-module__hop-SearchField__HelperMessage___wN32w {
3099
+ order: 3;
3100
+ }
3101
+ .SearchField-module__hop-SearchField___XTMBu input::-webkit-search-cancel-button,
3102
+ .SearchField-module__hop-SearchField___XTMBu input::-webkit-search-decoration {
3103
+ appearance: none;
3104
+ }
3105
+ .SearchField-module__hop-SearchField___XTMBu[data-empty] {
3106
+ --clear-button-display: none;
3107
+ }
3108
+ .SearchField-module__hop-SearchField__ClearButton___baj2F {
3109
+ display: var(--clear-button-display);
3110
+ }
3111
+
3112
+ /* css-module:/home/runner/work/wl-hopper/wl-hopper/packages/components/src/Link/src/Link.module.css/#css-module-data */
3113
+ .Link-module__hop-Link___IJ3ZM {
3114
+ --hop-Link-border-radius: var(--hop-shape-rounded-sm);
3115
+ --hop-Link-focus-ring-color: var(--hop-primary-border-focus);
3116
+ --hop-Link-color-disabled: var(--hop-neutral-text-disabled);
3117
+ --hop-Link-column-gap: var(--hop-space-inline-xs);
3118
+ --hop-Link-primary-text-color: var(--hop-primary-text);
3119
+ --hop-Link-primary-text-disabled-color: var(--hop-primary-text-disabled);
3120
+ --hop-Link-primary-text-hover-color: var(--hop-primary-text-hover);
3121
+ --hop-Link-primary-text-pressed-color: var(--hop-primary-text-press);
3122
+ --hop-Link-neutral-text-color: var(--hop-neutral-text);
3123
+ --hop-Link-neutral-text-disabled-color: var(--hop-neutral-text-disabled);
3124
+ --hop-Link-neutral-text-hover-color: var(--hop-neutral-text-hover);
3125
+ --hop-Link-neutral-text-pressed-color: var(--hop-neutral-text-press);
3126
+ cursor: pointer;
3127
+ display: inline-flex;
3128
+ column-gap: var(--hop-Link-column-gap);
3129
+ align-items: center;
3130
+ box-sizing: border-box;
3131
+ inline-size: fit-content;
3132
+ text-decoration: none;
3133
+ text-underline-offset: 0.125rem;
3134
+ border-radius: var(--hop-Link-border-radius);
3135
+ outline: none;
3136
+ outline-offset: 0.125rem;
3137
+ }
3138
+ .Link-module__hop-Link___IJ3ZM[data-focus-visible] {
3139
+ outline: 0.125rem solid var(--hop-Link-focus-ring-color);
3140
+ }
3141
+ .Link-module__hop-Link___IJ3ZM[data-disabled] {
3142
+ cursor: default;
3143
+ }
3144
+ .Link-module__hop-Link--quiet___cVz8M[data-focus-visible],
3145
+ .Link-module__hop-Link--quiet___cVz8M[data-hovered] {
3146
+ text-decoration: underline;
3147
+ }
3148
+ .Link-module__hop-Link___IJ3ZM:not(.Link-module__hop-Link--quiet___cVz8M) {
3149
+ text-decoration: underline;
3150
+ }
3151
+ .Link-module__hop-Link--primary___gUmwX {
3152
+ color: var(--hop-Link-primary-text-color);
3153
+ }
3154
+ .Link-module__hop-Link--primary___gUmwX[data-disabled] {
3155
+ color: var(--hop-Link-primary-text-disabled-color);
3156
+ }
3157
+ .Link-module__hop-Link--primary___gUmwX:not([data-disabled])[data-focus-visible],
3158
+ .Link-module__hop-Link--primary___gUmwX:not([data-disabled])[data-hovered] {
3159
+ color: var(--hop-Link-primary-text-hover-color);
3160
+ }
3161
+ .Link-module__hop-Link--primary___gUmwX:not([data-disabled])[data-pressed] {
3162
+ color: var(--hop-Link-primary-text-pressed-color);
3163
+ }
3164
+ .Link-module__hop-Link--secondary___9ScJe {
3165
+ color: var(--hop-Link-neutral-text-color);
3166
+ }
3167
+ .Link-module__hop-Link--secondary___9ScJe[data-disabled] {
3168
+ color: var(--hop-Link-neutral-text-disabled-color);
3169
+ }
3170
+ .Link-module__hop-Link--secondary___9ScJe:not([data-disabled])[data-focus-visible],
3171
+ .Link-module__hop-Link--secondary___9ScJe:not([data-disabled])[data-hovered] {
3172
+ color: var(--hop-Link-neutral-text-hover-color);
3173
+ }
3174
+ .Link-module__hop-Link--secondary___9ScJe:not([data-disabled])[data-pressed] {
3175
+ color: var(--hop-Link-neutral-text-pressed-color);
3176
+ }
3177
+ .Link-module__hop-Link__icon___9Kjdm,
3178
+ .Link-module__hop-Link__icon-list___kRvsY {
3179
+ order: 2;
3180
+ }
3181
+ .Link-module__hop-Link__text___OrbOg {
3182
+ order: 1;
3183
+ }
3184
+ .Link-module__hop-Link__start-icon___dgSSJ,
3185
+ .Link-module__hop-Link__start-icon-list___SO2wL {
3186
+ order: 0;
3187
+ }
3188
+
3189
+ /* css-module:/home/runner/work/wl-hopper/wl-hopper/packages/components/src/Select/src/SelectValue.module.css/#css-module-data */
3190
+ .SelectValue-module__hop-SelectValue___vmhD5 {
3191
+ --hop-SelectValue-display: flex;
3192
+ --hop-SelectValue-column-gap: var(--hop-space-inline-sm);
3193
+ overflow: hidden;
3194
+ display: var(--hop-SelectValue-display);
3195
+ flex: 1 1 auto;
3196
+ column-gap: var(--hop-SelectValue-column-gap);
3197
+ align-items: center;
3198
+ box-sizing: border-box;
3199
+ text-overflow: ellipsis;
3200
+ white-space: nowrap;
3201
+ }
3202
+ .SelectValue-module__hop-SelectValue__avatar___LzO40 {
3203
+ order: 1;
3204
+ }
3205
+ .SelectValue-module__hop-SelectValue__icon___2SitP {
3206
+ order: 2;
3207
+ }
3208
+ .SelectValue-module__hop-SelectValue__text___yJC6I {
3209
+ overflow: hidden;
3210
+ flex: 1 1 auto;
3211
+ order: 3;
3212
+ min-inline-size: 0;
3213
+ text-overflow: ellipsis;
3214
+ white-space: nowrap;
3215
+ }
3216
+ .SelectValue-module__hop-SelectValue__end-icon___3K-em {
3217
+ order: 4;
3218
+ }
3219
+
3220
+ /* css-module:/home/runner/work/wl-hopper/wl-hopper/packages/components/src/switch/src/Switch.module.css/#css-module-data */
3221
+ .Switch-module__hop-Switch___akbj7 {
3222
+ --hop-Switch-border-size: 0.0625rem;
3223
+ --hop-Switch-border-color: var(--hop-neutral-border);
3224
+ --hop-Switch-border-radius: var(--hop-shape-rounded-lg);
3225
+ --hop-Switch-background-color: var(--hop-neutral-surface);
3226
+ --hop-Switch-thumb-color: var(--hop-neutral-icon);
3227
+ --hop-Switch-text-color: var(--hop-neutral-text);
3228
+ --hop-Switch-border-color-hover: var(--hop-neutral-border-hover);
3229
+ --hop-Switch-background-color-hover: var(--hop-neutral-surface-hover);
3230
+ --hop-Switch-thumb-color-hover: var(--hop-neutral-icon-hover);
3231
+ --hop-Switch-text-color-hover: var(--hop-neutral-text-hover);
3232
+ --hop-Switch-border-color-pressed: var(--hop-neutral-border-press);
3233
+ --hop-Switch-background-color-pressed: var(--hop-neutral-surface-press);
3234
+ --hop-Switch-thumb-color-pressed: var(--hop-neutral-icon-press);
3235
+ --hop-Switch-text-color-pressed: var(--hop-neutral-text-press);
3236
+ --hop-Switch-border-color-focus: var(--hop-neutral-border-hover);
3237
+ --hop-Switch-background-color-focus: var(--hop-neutral-surface-hover);
3238
+ --hop-Switch-thumb-color-focus: var(--hop-neutral-icon-hover);
3239
+ --hop-Switch-focus-ring-color: var(--hop-primary-border-focus);
3240
+ --hop-Switch-text-color-focus: var(--hop-neutral-text);
3241
+ --hop-Switch-border-color-selected: var(--hop-neutral-border-selected);
3242
+ --hop-Switch-background-color-selected: var(--hop-neutral-surface-selected);
3243
+ --hop-Switch-thumb-color-selected: var(--hop-neutral-icon-selected);
3244
+ --hop-Switch-text-color-selected: var(--hop-neutral-text);
3245
+ --hop-Switch-border-color-disabled: var(--hop-neutral-border-disabled);
3246
+ --hop-Switch-background-color-disabled: var(--hop-neutral-surface-disabled);
3247
+ --hop-Switch-thumb-color-disabled: var(--hop-neutral-icon-disabled);
3248
+ --hop-Switch-text-color-disabled: var(--hop-neutral-text-disabled);
3249
+ --hop-Switch-inline-size-md: 3rem;
3250
+ --hop-Switch-block-size-md: 1.5rem;
3251
+ --hop-Switch-thumb-size-md: 1rem;
3252
+ --hop-Switch-inset-inline-start-md: var(--hop-space-inset-xs);
3253
+ --hop-Switch-text-top-offset-md: calc((var(--block-size) - (var(--hop-body-md-line-height) * var(--hop-body-md-font-size))) / 2);
3254
+ --hop-Switch-inline-size-sm: 2rem;
3255
+ --hop-Switch-block-size-sm: 1rem;
3256
+ --hop-Switch-thumb-size-sm: 0.75rem;
3257
+ --hop-Switch-inset-inline-start-sm: calc(var(--hop-space-inset-xs) / 2);
3258
+ --hop-Switch-text-top-offset-sm: calc((var(--block-size) - (var(--hop-body-sm-line-height) * var(--hop-body-sm-font-size))) / 2);
3259
+ --border-size: var(--hop-Switch-border-size);
3260
+ --border-color: var(--hop-Switch-border-color);
3261
+ --border-radius: var(--hop-Switch-border-radius);
3262
+ --background-color: var(--hop-Switch-background-color);
3263
+ --column-gap: var(--hop-space-inline-sm);
3264
+ --thumb-color: var(--hop-Switch-thumb-color);
3265
+ --thumb-transform: translate(0, -50%);
3266
+ --outline: none;
3267
+ --cursor: pointer;
3268
+ --text-color: var(--hop-Switch-text-color);
3269
+ cursor: var(--cursor);
3270
+ display: inline-flex;
3271
+ column-gap: var(--column-gap);
3272
+ align-items: flex-start;
3273
+ justify-content: flex-start;
3274
+ box-sizing: border-box;
3275
+ inline-size: max-content;
3276
+ max-inline-size: 100%;
3277
+ }
3278
+ .Switch-module__hop-Switch--sm___HFQwG {
3279
+ --inline-size: var(--hop-Switch-inline-size-sm);
3280
+ --block-size: var(--hop-Switch-block-size-sm);
3281
+ --thumb-size: var(--hop-Switch-thumb-size-sm);
3282
+ --inset-inline-start: var(--hop-Switch-inset-inline-start-sm);
3283
+ --text-top-offset: var(--hop-Switch-text-top-offset-sm);
3284
+ }
3285
+ .Switch-module__hop-Switch--md___U7SW7 {
3286
+ --inline-size: var(--hop-Switch-inline-size-md);
3287
+ --block-size: var(--hop-Switch-block-size-md);
3288
+ --thumb-size: var(--hop-Switch-thumb-size-md);
3289
+ --inset-inline-start: var(--hop-Switch-inset-inline-start-md);
3290
+ --text-top-offset: var(--hop-Switch-text-top-offset-md);
3291
+ }
3292
+ .Switch-module__hop-Switch___akbj7[data-hovered] {
3293
+ --border-color: var(--hop-Switch-border-color-hover);
3294
+ --background-color: var(--hop-Switch-background-color-hover);
3295
+ --thumb-color: var(--hop-Switch-thumb-color-hover);
3296
+ --text-color: var(--hop-Switch-text-color-hover);
3297
+ }
3298
+ .Switch-module__hop-Switch___akbj7[data-pressed],
3299
+ .Switch-module__hop-Switch___akbj7[data-pressed][data-focus-visible] {
3300
+ --border-color: var(--hop-Switch-border-color-pressed);
3301
+ --background-color: var(--hop-Switch-background-color-pressed);
3302
+ --thumb-color: var(--hop-Switch-thumb-color-pressed);
3303
+ --text-color: var(--hop-Switch-text-color-pressed);
3304
+ }
3305
+ .Switch-module__hop-Switch___akbj7[data-focus-visible] {
3306
+ --border-color: var(--hop-Switch-border-color-focus);
3307
+ --background-color: var(--hop-Switch-background-color-focus);
3308
+ --thumb-color: var(--hop-Switch-thumb-color-focus);
3309
+ --outline: 0.125rem solid var(--hop-Switch-focus-ring-color);
3310
+ --text-color: var(--hop-Switch-text-color-focus);
3311
+ }
3312
+ .Switch-module__hop-Switch___akbj7[data-selected],
3313
+ .Switch-module__hop-Switch___akbj7[data-selected][data-pressed] {
3314
+ --border-color: var(--hop-Switch-border-color-selected);
3315
+ --background-color: var(--hop-Switch-background-color-selected);
3316
+ --thumb-color: var(--hop-Switch-thumb-color-selected);
3317
+ --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%);
3318
+ --text-color: var(--hop-Switch-text-color-selected);
3319
+ }
3320
+ .Switch-module__hop-Switch___akbj7[data-disabled] {
3321
+ --border-color: var(--hop-Switch-border-color-disabled);
3322
+ --background-color: var(--hop-Switch-background-color-disabled);
3323
+ --thumb-color: var(--hop-Switch-thumb-color-disabled);
3324
+ --text-color: var(--hop-Switch-text-color-disabled);
3325
+ --cursor: not-allowed;
3326
+ }
3327
+ .Switch-module__hop-Switch__indicator___7OPLk {
3328
+ position: relative;
3329
+ flex: 0 0 auto;
3330
+ box-sizing: border-box;
3331
+ inline-size: var(--inline-size, var(--hop-Switch-inline-size-md));
3332
+ block-size: var(--block-size, var(--hop-Switch-block-size-md));
3333
+ background-color: var(--background-color);
3334
+ border: var(--border-size) solid var(--border-color);
3335
+ border-radius: var(--border-radius);
3336
+ outline: var(--outline);
3337
+ outline-offset: 0.125rem;
3338
+ transition: background var(--hop-easing-duration-2), border-color var(--hop-easing-duration-2);
3339
+ }
3340
+ .Switch-module__hop-Switch__indicator___7OPLk::before {
3341
+ content: "";
3342
+ position: absolute;
3343
+ inset-block-start: 50%;
3344
+ inset-inline-start: var(--inset-inline-start);
3345
+ transform: var(--thumb-transform);
3346
+ flex: 0 0 auto;
3347
+ order: 1;
3348
+ box-sizing: border-box;
3349
+ inline-size: var(--thumb-size);
3350
+ block-size: var(--thumb-size);
3351
+ background-color: var(--thumb-color);
3352
+ border-radius: var(--hop-shape-circle);
3353
+ transition: transform var(--hop-easing-duration-2), background var(--hop-easing-duration-2);
3354
+ }
3355
+ .Switch-module__hop-Switch__text___9051d {
3356
+ flex: 0 1 auto;
3357
+ order: 2;
3358
+ min-inline-size: 0;
3359
+ margin-block-start: var(--text-top-offset, var(--hop-Switch-text-top-offset-md));
3360
+ color: var(--text-color);
3361
+ }
3362
+ .Switch-module__hop-Switch__icon-list___hWpWK,
3363
+ .Switch-module__hop-Switch__icon___N9lYg {
3364
+ order: 3;
3365
+ }
3366
+
3367
+ /* css-module:/home/runner/work/wl-hopper/wl-hopper/packages/components/src/switch/src/SwitchField.module.css/#css-module-data */
3368
+ .SwitchField-module__hop-SwitchField___8-YvL {
3369
+ --hop-SwitchField-description-color: var(--hop-neutral-text-weak);
3370
+ --hop-SwitchField-description-color-disabled: var(--hop-neutral-text-disabled);
3371
+ --hop-SwitchField-sm-row-gap: var(--hop-space-stack-xs);
3372
+ --hop-SwitchField-switch-sm-inline-size: 2rem;
3373
+ --hop-SwitchField-description-sm-margin-inline-start: calc(var(--hop-SwitchField-switch-sm-inline-size) + var(--hop-space-inline-sm));
3374
+ --hop-SwitchField-md-row-gap: var(--hop-space-stack-xs);
3375
+ --hop-SwitchField-switch-md-inline-size: 3rem;
3376
+ --hop-SwitchField-description-md-margin-inline-start: calc(var(--hop-SwitchField-switch-md-inline-size) + var(--hop-space-inline-sm));
3377
+ --description-color: var(--hop-SwitchField-description-color);
3378
+ display: flex;
3379
+ flex-direction: column;
3380
+ row-gap: var(--row-gap, var(--hop-space-stack-sm));
3381
+ align-items: flex-start;
3382
+ justify-content: flex-start;
3383
+ box-sizing: border-box;
3384
+ inline-size: max-content;
3385
+ max-inline-size: 100%;
3386
+ }
3387
+ .SwitchField-module__hop-SwitchField___8-YvL[data-disabled] {
3388
+ --description-color: var(--hop-SwitchField-description-color-disabled);
3389
+ }
3390
+ .SwitchField-module__hop-SwitchField--sm___YL31L {
3391
+ --row-gap: var(--hop-SwitchField-sm-row-gap);
3392
+ --description-margin-inline-start: var(--hop-SwitchField-description-sm-margin-inline-start);
3393
+ }
3394
+ .SwitchField-module__hop-SwitchField--md___tmG-f {
3395
+ --row-gap: var(--hop-SwitchField-md-row-gap);
3396
+ --description-margin-inline-start: var(--hop-SwitchField-description-md-margin-inline-start);
3397
+ }
3398
+ .SwitchField-module__hop-SwitchField__description___-Hhcq {
3399
+ order: 2;
3400
+ margin-inline-start: var(--description-margin-inline-start, var(--hop-SwitchField-description-md-margin-inline-start));
3401
+ color: var(--description-color);
3402
+ }
3403
+ .SwitchField-module__hop-SwitchField__switch___syGui {
3404
+ order: 1;
3405
+ }
3406
+
3407
+ /* css-module:/home/runner/work/wl-hopper/wl-hopper/packages/components/src/tag/src/Tag.module.css/#css-module-data */
3408
+ .Tag-module__hop-Tag___KGnAq {
3409
+ --hop-Tag-border-size: 0.0625rem;
3410
+ --hop-Tag-border-radius: var(--hop-shape-pill);
3411
+ --hop-Tag-sm-block-size: 1.25rem;
3412
+ --hop-Tag-sm-padding-inline: var(--hop-space-inset-sm);
3413
+ --hop-Tag-sm-column-gap: var(--hop-space-inline-xs);
3414
+ --hop-Tag-sm-icon-margin-inline-start: 0;
3415
+ --hop-Tag-sm-element-margin-inline-end-sm: calc(-1 * var(--hop-space-inline-xs));
3416
+ --hop-Tag-sm-element-margin-inline-end-zero: calc(-1 * var(--hop-Tag-sm-padding-inline));
3417
+ --hop-Tag-sm-badge-margin-inline-end: var(--hop-Tag-sm-element-margin-inline-end-zero);
3418
+ --hop-Tag-sm-avatar-margin-inline-start: calc(var(--hop-Tag-sm-element-margin-inline-end-sm) - (var(--hop-space-inline-xs) / 2));
3419
+ --hop-Tag-sm-clear-btn-margin-inline: calc(-1 * var(--hop-Tag-sm-column-gap)) var(--hop-Tag-sm-element-margin-inline-end-zero);
3420
+ --hop-Tag-sm-spinner-margin-inline-end: var(--hop-Tag-sm-element-margin-inline-end-sm);
3421
+ --hop-Tag-md-block-size: 1.5rem;
3422
+ --hop-Tag-md-padding-inline: var(--hop-space-inset-sm);
3423
+ --hop-Tag-md-column-gap: var(--hop-space-inline-xs);
3424
+ --hop-Tag-md-icon-margin-inline-start: 0;
3425
+ --hop-Tag-md-element-margin-inline-end-sm: calc(-1 * var(--hop-space-inline-xs));
3426
+ --hop-Tag-md-element-margin-inline-end-zero: calc(-1 * var(--hop-Tag-md-padding-inline));
3427
+ --hop-Tag-md-badge-margin-inline-end: var(--hop-Tag-md-element-margin-inline-end-zero);
3428
+ --hop-Tag-md-avatar-margin-inline-start: var(--hop-Tag-md-element-margin-inline-end-sm);
3429
+ --hop-Tag-md-clear-btn-margin-inline: calc(-1 * var(--hop-Tag-md-column-gap)) var(--hop-Tag-md-element-margin-inline-end-zero);
3430
+ --hop-Tag-md-spinner-margin-inline-end: var(--hop-Tag-md-element-margin-inline-end-sm);
3431
+ --hop-Tag-lg-block-size: 2rem;
3432
+ --hop-Tag-lg-padding-inline: var(--hop-space-inset-md);
3433
+ --hop-Tag-lg-column-gap: var(--hop-space-inline-sm);
3434
+ --hop-Tag-lg-icon-margin-inline-start: calc(-1 * var(--hop-space-inline-sm));
3435
+ --hop-Tag-lg-element-margin-inline-end-sm: calc(-1 * (var(--hop-Tag-lg-padding-inline) - var(--hop-space-inline-xs)));
3436
+ --hop-Tag-lg-badge-margin-inline-end: var(--hop-Tag-lg-element-margin-inline-end-sm);
3437
+ --hop-Tag-lg-avatar-margin-inline-start: var(--hop-Tag-lg-element-margin-inline-end-sm);
3438
+ --hop-Tag-lg-clear-btn-margin-inline: 0 var(--hop-Tag-lg-element-margin-inline-end-sm);
3439
+ --hop-Tag-lg-spinner-margin-inline-end: var(--hop-Tag-lg-element-margin-inline-end-sm);
3440
+ --hop-Tag-neutral-border-color: var(--hop-neutral-border);
3441
+ --hop-Tag-neutral-background-color: var(--hop-neutral-surface);
3442
+ --hop-Tag-neutral-text-color: var(--hop-neutral-text);
3443
+ --hop-Tag-subdued-border-color: var(--hop-neutral-border);
3444
+ --hop-Tag-subdued-background-color: var(--hop-neutral-surface-weak);
3445
+ --hop-Tag-subdued-text-color: var(--hop-neutral-text);
3446
+ --hop-Tag-progress-border-color: transparent;
3447
+ --hop-Tag-progress-background-color: var(--hop-status-progress-surface);
3448
+ --hop-Tag-progress-text-color: var(--hop-status-progress-text);
3449
+ --hop-Tag-positive-border-color: transparent;
3450
+ --hop-Tag-positive-background-color: var(--hop-status-positive-surface);
3451
+ --hop-Tag-positive-text-color: var(--hop-status-positive-text);
3452
+ --hop-Tag-caution-border-color: transparent;
3453
+ --hop-Tag-caution-background-color: var(--hop-status-caution-surface);
3454
+ --hop-Tag-caution-text-color: var(--hop-status-caution-text);
3455
+ --hop-Tag-negative-border-color: transparent;
3456
+ --hop-Tag-negative-background-color: var(--hop-status-negative-surface);
3457
+ --hop-Tag-negative-text-color: var(--hop-status-negative-text);
3458
+ --hop-Tag-option1-border-color: transparent;
3459
+ --hop-Tag-option1-background-color: var(--hop-status-option1-surface);
3460
+ --hop-Tag-option1-text-color: var(--hop-status-option1-text);
3461
+ --hop-Tag-option2-border-color: transparent;
3462
+ --hop-Tag-option2-background-color: var(--hop-status-option2-surface);
3463
+ --hop-Tag-option2-text-color: var(--hop-status-option2-text);
3464
+ --hop-Tag-option3-border-color: transparent;
3465
+ --hop-Tag-option3-background-color: var(--hop-status-option3-surface);
3466
+ --hop-Tag-option3-text-color: var(--hop-status-option3-text);
3467
+ --hop-Tag-option4-border-color: transparent;
3468
+ --hop-Tag-option4-background-color: var(--hop-status-option4-surface);
3469
+ --hop-Tag-option4-text-color: var(--hop-status-option4-text);
3470
+ --hop-Tag-option5-border-color: transparent;
3471
+ --hop-Tag-option5-background-color: var(--hop-status-option5-surface);
3472
+ --hop-Tag-option5-text-color: var(--hop-status-option5-text);
3473
+ --hop-Tag-option6-border-color: transparent;
3474
+ --hop-Tag-option6-background-color: var(--hop-status-option6-surface);
3475
+ --hop-Tag-option6-text-color: var(--hop-status-option6-text);
3476
+ --hop-Tag-focus-ring-color: var(--hop-primary-border-focus);
3477
+ --hop-Tag-neutral-background-color-focus: var(--hop-neutral-surface-hover);
3478
+ --hop-Tag-neutral-border-color-focus: var(--hop-neutral-border-hover);
3479
+ --hop-Tag-neutral-text-color-focus: var(--hop-neutral-text-hover);
3480
+ --hop-Tag-subdued-background-color-focus: var(--hop-neutral-surface-weak-hover);
3481
+ --hop-Tag-subdued-border-color-focus: var(--hop-neutral-border-hover);
3482
+ --hop-Tag-subdued-text-color-focus: var(--hop-neutral-text-hover);
3483
+ --hop-Tag-progress-background-color-focus: var(--hop-status-progress-surface-hover);
3484
+ --hop-Tag-progress-border-color-focus: transparent;
3485
+ --hop-Tag-progress-text-color-focus: var(--hop-status-progress-text-hover);
3486
+ --hop-Tag-positive-background-color-focus: var(--hop-status-positive-surface-hover);
3487
+ --hop-Tag-positive-border-color-focus: transparent;
3488
+ --hop-Tag-positive-text-color-focus: var(--hop-status-positive-text-hover);
3489
+ --hop-Tag-caution-background-color-focus: var(--hop-status-caution-surface-hover);
3490
+ --hop-Tag-caution-border-color-focus: transparent;
3491
+ --hop-Tag-caution-text-color-focus: var(--hop-status-caution-text-hover);
3492
+ --hop-Tag-negative-background-color-focus: var(--hop-status-negative-surface-hover);
3493
+ --hop-Tag-negative-border-color-focus: transparent;
3494
+ --hop-Tag-negative-text-color-focus: var(--hop-status-negative-text-hover);
3495
+ --hop-Tag-option1-background-color-focus: var(--hop-status-option1-surface-hover);
3496
+ --hop-Tag-option1-border-color-focus: transparent;
3497
+ --hop-Tag-option1-text-color-focus: var(--hop-status-option1-text-hover);
3498
+ --hop-Tag-option2-background-color-focus: var(--hop-status-option2-surface-hover);
3499
+ --hop-Tag-option2-border-color-focus: transparent;
3500
+ --hop-Tag-option2-text-color-focus: var(--hop-status-option2-text-hover);
3501
+ --hop-Tag-option3-background-color-focus: var(--hop-status-option3-surface-hover);
3502
+ --hop-Tag-option3-border-color-focus: transparent;
3503
+ --hop-Tag-option3-text-color-focus: var(--hop-status-option3-text-hover);
3504
+ --hop-Tag-option4-background-color-focus: var(--hop-status-option4-surface-hover);
3505
+ --hop-Tag-option4-border-color-focus: transparent;
3506
+ --hop-Tag-option4-text-color-focus: var(--hop-status-option4-text-hover);
3507
+ --hop-Tag-option5-background-color-focus: var(--hop-status-option5-surface-hover);
3508
+ --hop-Tag-option5-border-color-focus: transparent;
3509
+ --hop-Tag-option5-text-color-focus: var(--hop-status-option5-text-hover);
3510
+ --hop-Tag-option6-background-color-focus: var(--hop-status-option6-surface-hover);
3511
+ --hop-Tag-option6-border-color-focus: transparent;
3512
+ --hop-Tag-option6-text-color-focus: var(--hop-status-option6-text-hover);
3513
+ --hop-Tag-neutral-background-color-hover: var(--hop-neutral-surface-hover);
3514
+ --hop-Tag-neutral-border-color-hover: var(--hop-neutral-border-hover);
3515
+ --hop-Tag-neutral-text-color-hover: var(--hop-neutral-text-hover);
3516
+ --hop-Tag-subdued-background-color-hover: var(--hop-neutral-surface-weak-hover);
3517
+ --hop-Tag-subdued-border-color-hover: var(--hop-neutral-border-hover);
3518
+ --hop-Tag-subdued-text-color-hover: var(--hop-neutral-text-hover);
3519
+ --hop-Tag-progress-background-color-hover: var(--hop-status-progress-surface-hover);
3520
+ --hop-Tag-progress-border-color-hover: transparent;
3521
+ --hop-Tag-progress-text-color-hover: var(--hop-status-progress-text-hover);
3522
+ --hop-Tag-positive-background-color-hover: var(--hop-status-positive-surface-hover);
3523
+ --hop-Tag-positive-border-color-hover: transparent;
3524
+ --hop-Tag-positive-text-color-hover: var(--hop-status-positive-text-hover);
3525
+ --hop-Tag-caution-background-color-hover: var(--hop-status-caution-surface-hover);
3526
+ --hop-Tag-caution-border-color-hover: transparent;
3527
+ --hop-Tag-caution-text-color-hover: var(--hop-status-caution-text-hover);
3528
+ --hop-Tag-negative-background-color-hover: var(--hop-status-negative-surface-hover);
3529
+ --hop-Tag-negative-border-color-hover: transparent;
3530
+ --hop-Tag-negative-text-color-hover: var(--hop-status-negative-text-hover);
3531
+ --hop-Tag-option1-background-color-hover: var(--hop-status-option1-surface-hover);
3532
+ --hop-Tag-option1-border-color-hover: transparent;
3533
+ --hop-Tag-option1-text-color-hover: var(--hop-status-option1-text-hover);
3534
+ --hop-Tag-option2-background-color-hover: var(--hop-status-option2-surface-hover);
3535
+ --hop-Tag-option2-border-color-hover: transparent;
3536
+ --hop-Tag-option2-text-color-hover: var(--hop-status-option2-text-hover);
3537
+ --hop-Tag-option3-background-color-hover: var(--hop-status-option3-surface-hover);
3538
+ --hop-Tag-option3-border-color-hover: transparent;
3539
+ --hop-Tag-option3-text-color-hover: var(--hop-status-option3-text-hover);
3540
+ --hop-Tag-option4-background-color-hover: var(--hop-status-option4-surface-hover);
3541
+ --hop-Tag-option4-border-color-hover: transparent;
3542
+ --hop-Tag-option4-text-color-hover: var(--hop-status-option4-text-hover);
3543
+ --hop-Tag-option5-background-color-hover: var(--hop-status-option5-surface-hover);
3544
+ --hop-Tag-option5-border-color-hover: transparent;
3545
+ --hop-Tag-option5-text-color-hover: var(--hop-status-option5-text-hover);
3546
+ --hop-Tag-option6-background-color-hover: var(--hop-status-option6-surface-hover);
3547
+ --hop-Tag-option6-border-color-hover: transparent;
3548
+ --hop-Tag-option6-text-color-hover: var(--hop-status-option6-text-hover);
3549
+ --hop-Tag-background-color-selected: var(--hop-neutral-surface-selected);
3550
+ --hop-Tag-border-color-selected: var(--hop-neutral-border-selected);
3551
+ --hop-Tag-text-color-selected: var(--hop-neutral-text-selected);
3552
+ --hop-Tag-neutral-background-color-press: var(--hop-neutral-surface-press);
3553
+ --hop-Tag-neutral-border-color-press: var(--hop-neutral-border-press);
3554
+ --hop-Tag-neutral-text-color-press: var(--hop-neutral-text-press);
3555
+ --hop-Tag-subdued-background-color-press: var(--hop-neutral-surface-weak-press);
3556
+ --hop-Tag-subdued-border-color-press: var(--hop-neutral-border-press);
3557
+ --hop-Tag-subdued-text-color-press: var(--hop-neutral-text-press);
3558
+ --hop-Tag-progress-background-color-press: var(--hop-status-progress-surface-press);
3559
+ --hop-Tag-progress-border-color-press: transparent;
3560
+ --hop-Tag-progress-text-color-press: var(--hop-status-progress-text-press);
3561
+ --hop-Tag-positive-background-color-press: var(--hop-status-positive-surface-press);
3562
+ --hop-Tag-positive-border-color-press: transparent;
3563
+ --hop-Tag-positive-text-color-press: var(--hop-status-positive-text-press);
3564
+ --hop-Tag-caution-background-color-press: var(--hop-status-caution-surface-press);
3565
+ --hop-Tag-caution-border-color-press: transparent;
3566
+ --hop-Tag-caution-text-color-press: var(--hop-status-caution-text-press);
3567
+ --hop-Tag-negative-background-color-press: var(--hop-status-negative-surface-press);
3568
+ --hop-Tag-negative-border-color-press: transparent;
3569
+ --hop-Tag-negative-text-color-press: var(--hop-status-negative-text-press);
3570
+ --hop-Tag-option1-background-color-press: var(--hop-status-option1-surface-press);
3571
+ --hop-Tag-option1-border-color-press: transparent;
3572
+ --hop-Tag-option1-text-color-press: var(--hop-status-option1-text-press);
3573
+ --hop-Tag-option2-background-color-press: var(--hop-status-option2-surface-press);
3574
+ --hop-Tag-option2-border-color-press: transparent;
3575
+ --hop-Tag-option2-text-color-press: var(--hop-status-option2-text-press);
3576
+ --hop-Tag-option3-background-color-press: var(--hop-status-option3-surface-press);
3577
+ --hop-Tag-option3-border-color-press: transparent;
3578
+ --hop-Tag-option3-text-color-press: var(--hop-status-option3-text-press);
3579
+ --hop-Tag-option4-background-color-press: var(--hop-status-option4-surface-press);
3580
+ --hop-Tag-option4-border-color-press: transparent;
3581
+ --hop-Tag-option4-text-color-press: var(--hop-status-option4-text-press);
3582
+ --hop-Tag-option5-background-color-press: var(--hop-status-option5-surface-press);
3583
+ --hop-Tag-option5-border-color-press: transparent;
3584
+ --hop-Tag-option5-text-color-press: var(--hop-status-option5-text-press);
3585
+ --hop-Tag-option6-background-color-press: var(--hop-status-option6-surface-press);
3586
+ --hop-Tag-option6-border-color-press: transparent;
3587
+ --hop-Tag-option6-text-color-press: var(--hop-status-option6-text-press);
3588
+ --hop-Tag-border-color-invalid: var(--hop-danger-border-strong);
3589
+ --hop-Tag-neutral-background-color-disabled: var(--hop-neutral-surface-disabled);
3590
+ --hop-Tag-neutral-border-color-disabled: var(--hop-neutral-border-weak);
3591
+ --hop-Tag-neutral-text-color-disabled: var(--hop-neutral-text-disabled);
3592
+ --hop-Tag-subdued-background-color-disabled: var(--hop-neutral-surface-disabled);
3593
+ --hop-Tag-subdued-border-color-disabled: var(--hop-neutral-border-weak);
3594
+ --hop-Tag-subdued-text-color-disabled: var(--hop-neutral-text-disabled);
3595
+ --hop-Tag-progress-background-color-disabled: var(--hop-status-progress-surface-disabled);
3596
+ --hop-Tag-progress-border-color-disabled: transparent;
3597
+ --hop-Tag-progress-text-color-disabled: var(--hop-status-progress-text-disabled);
3598
+ --hop-Tag-positive-background-color-disabled: var(--hop-status-positive-surface-disabled);
3599
+ --hop-Tag-positive-border-color-disabled: transparent;
3600
+ --hop-Tag-positive-text-color-disabled: var(--hop-status-positive-text-disabled);
3601
+ --hop-Tag-caution-background-color-disabled: var(--hop-status-caution-surface-disabled);
3602
+ --hop-Tag-caution-border-color-disabled: transparent;
3603
+ --hop-Tag-caution-text-color-disabled: var(--hop-status-caution-text-disabled);
3604
+ --hop-Tag-negative-background-color-disabled: var(--hop-status-negative-surface-disabled);
3605
+ --hop-Tag-negative-border-color-disabled: transparent;
3606
+ --hop-Tag-negative-text-color-disabled: var(--hop-status-negative-text-disabled);
3607
+ --hop-Tag-option1-background-color-disabled: var(--hop-status-option1-surface-disabled);
3608
+ --hop-Tag-option1-border-color-disabled: transparent;
3609
+ --hop-Tag-option1-text-color-disabled: var(--hop-status-option1-text-disabled);
3610
+ --hop-Tag-option2-background-color-disabled: var(--hop-status-option2-surface-disabled);
3611
+ --hop-Tag-option2-border-color-disabled: transparent;
3612
+ --hop-Tag-option2-text-color-disabled: var(--hop-status-option2-text-disabled);
3613
+ --hop-Tag-option3-background-color-disabled: var(--hop-status-option3-surface-disabled);
3614
+ --hop-Tag-option3-border-color-disabled: transparent;
3615
+ --hop-Tag-option3-text-color-disabled: var(--hop-status-option3-text-disabled);
3616
+ --hop-Tag-option4-background-color-disabled: var(--hop-status-option4-surface-disabled);
3617
+ --hop-Tag-option4-border-color-disabled: transparent;
3618
+ --hop-Tag-option4-text-color-disabled: var(--hop-status-option4-text-disabled);
3619
+ --hop-Tag-option5-background-color-disabled: var(--hop-status-option5-surface-disabled);
3620
+ --hop-Tag-option5-border-color-disabled: transparent;
3621
+ --hop-Tag-option5-text-color-disabled: var(--hop-status-option5-text-disabled);
3622
+ --hop-Tag-option6-background-color-disabled: var(--hop-status-option6-surface-disabled);
3623
+ --hop-Tag-option6-border-color-disabled: transparent;
3624
+ --hop-Tag-option6-text-color-disabled: var(--hop-status-option6-text-disabled);
3625
+ --border-radius: var(--hop-Tag-border-radius);
3626
+ --border-size: var(--hop-Tag-border-size);
3627
+ --badge-secondary-margin-inline-start: calc(-1 * var(--column-gap));
3628
+ --focus-ring-color: var(--hop-Tag-focus-ring-color);
3629
+ overflow: hidden;
3630
+ display: inline-flex;
3631
+ column-gap: var(--column-gap);
3632
+ align-items: center;
3633
+ justify-content: center;
3634
+ box-sizing: border-box;
3635
+ inline-size: max-content;
3636
+ max-inline-size: 100%;
3637
+ block-size: var(--block-size);
3638
+ padding-inline: var(--padding-inline);
3639
+ color: var(--text-color);
3640
+ white-space: nowrap;
3641
+ background-color: var(--background-color);
3642
+ border: var(--border-size) solid var(--border-color);
3643
+ border-radius: var(--border-radius);
3644
+ outline: none;
3645
+ outline-offset: 0.125rem;
3646
+ }
3647
+ .Tag-module__hop-Tag--sm___e6uUD {
3648
+ --block-size: var(--hop-Tag-sm-block-size);
3649
+ --padding-inline: var(--hop-Tag-sm-padding-inline);
3650
+ --column-gap: var(--hop-Tag-sm-column-gap);
3651
+ --clear-btn-margin-inline: var(--hop-Tag-sm-clear-btn-margin-inline);
3652
+ --avatar-margin-inline-start: var(--hop-Tag-sm-avatar-margin-inline-start);
3653
+ --spinner-margin-inline-end: var(--hop-Tag-sm-spinner-margin-inline-end);
3654
+ }
3655
+ .Tag-module__hop-Tag--sm___e6uUD:not(:has(.Tag-module__hop-Tag__remove-btn___N4NWZ, .Tag-module__hop-Tag__Spinner___bw0F4)) {
3656
+ --badge-margin-inline-end: var(--hop-Tag-sm-badge-margin-inline-end);
3657
+ }
3658
+ .Tag-module__hop-Tag--sm___e6uUD:not(:has(.Tag-module__hop-Tag__avatar___8sp7f)) {
3659
+ --icon-margin-inline-start: var(--hop-Tag-sm-icon-margin-inline-start);
3660
+ }
3661
+ .Tag-module__hop-Tag--md___1SLjD {
3662
+ --block-size: var(--hop-Tag-md-block-size);
3663
+ --padding-inline: var(--hop-Tag-md-padding-inline);
3664
+ --column-gap: var(--hop-Tag-md-column-gap);
3665
+ --clear-btn-margin-inline: var(--hop-Tag-md-clear-btn-margin-inline);
3666
+ --avatar-margin-inline-start: var(--hop-Tag-md-avatar-margin-inline-start);
3667
+ --spinner-margin-inline-end: var(--hop-Tag-md-spinner-margin-inline-end);
3668
+ }
3669
+ .Tag-module__hop-Tag--md___1SLjD:not(:has(.Tag-module__hop-Tag__remove-btn___N4NWZ, .Tag-module__hop-Tag__Spinner___bw0F4)) {
3670
+ --badge-margin-inline-end: var(--hop-Tag-md-badge-margin-inline-end);
3671
+ }
3672
+ .Tag-module__hop-Tag--md___1SLjD:not(:has(.Tag-module__hop-Tag__avatar___8sp7f)) {
3673
+ --icon-margin-inline-start: var(--hop-Tag-md-icon-margin-inline-start);
3674
+ }
3675
+ .Tag-module__hop-Tag--lg___h-7c- {
3676
+ --block-size: var(--hop-Tag-lg-block-size);
3677
+ --padding-inline: var(--hop-Tag-lg-padding-inline);
3678
+ --column-gap: var(--hop-Tag-lg-column-gap);
3679
+ --clear-btn-margin-inline: var(--hop-Tag-lg-clear-btn-margin-inline);
3680
+ --avatar-margin-inline-start: var(--hop-Tag-lg-avatar-margin-inline-start);
3681
+ --spinner-margin-inline-end: var(--hop-Tag-lg-spinner-margin-inline-end);
3682
+ }
3683
+ .Tag-module__hop-Tag--lg___h-7c-:not(:has(.Tag-module__hop-Tag__remove-btn___N4NWZ, .Tag-module__hop-Tag__Spinner___bw0F4)) {
3684
+ --badge-margin-inline-end: var(--hop-Tag-lg-badge-margin-inline-end);
3685
+ }
3686
+ .Tag-module__hop-Tag--lg___h-7c-:not(:has(.Tag-module__hop-Tag__avatar___8sp7f)) {
3687
+ --icon-margin-inline-start: var(--hop-Tag-lg-icon-margin-inline-start);
3688
+ }
3689
+ .Tag-module__hop-Tag--neutral___-Ebyx {
3690
+ --border-color: var(--hop-Tag-neutral-border-color);
3691
+ --background-color: var(--hop-Tag-neutral-background-color);
3692
+ --text-color: var(--hop-Tag-neutral-text-color);
3693
+ }
3694
+ .Tag-module__hop-Tag--subdued___v1Xes {
3695
+ --border-color: var(--hop-Tag-subdued-border-color);
3696
+ --background-color: var(--hop-Tag-subdued-background-color);
3697
+ --text-color: var(--hop-Tag-subdued-text-color);
3698
+ }
3699
+ .Tag-module__hop-Tag--progress___MqG2E {
3700
+ --border-color: var(--hop-Tag-progress-border-color);
3701
+ --background-color: var(--hop-Tag-progress-background-color);
3702
+ --text-color: var(--hop-Tag-progress-text-color);
3703
+ }
3704
+ .Tag-module__hop-Tag--positive___HTRyK {
3705
+ --border-color: var(--hop-Tag-positive-border-color);
3706
+ --background-color: var(--hop-Tag-positive-background-color);
3707
+ --text-color: var(--hop-Tag-positive-text-color);
3708
+ }
3709
+ .Tag-module__hop-Tag--caution___zWO7H {
3710
+ --border-color: var(--hop-Tag-caution-border-color);
3711
+ --background-color: var(--hop-Tag-caution-background-color);
3712
+ --text-color: var(--hop-Tag-caution-text-color);
3713
+ }
3714
+ .Tag-module__hop-Tag--negative___ir4C0 {
3715
+ --border-color: var(--hop-Tag-negative-border-color);
3716
+ --background-color: var(--hop-Tag-negative-background-color);
3717
+ --text-color: var(--hop-Tag-negative-text-color);
3718
+ }
3719
+ .Tag-module__hop-Tag--option1___2wfCi {
3720
+ --border-color: var(--hop-Tag-option1-border-color);
3721
+ --background-color: var(--hop-Tag-option1-background-color);
3722
+ --text-color: var(--hop-Tag-option1-text-color);
3723
+ }
3724
+ .Tag-module__hop-Tag--option2___yrzab {
3725
+ --border-color: var(--hop-Tag-option2-border-color);
3726
+ --background-color: var(--hop-Tag-option2-background-color);
3727
+ --text-color: var(--hop-Tag-option2-text-color);
3728
+ }
3729
+ .Tag-module__hop-Tag--option3___GrKyt {
3730
+ --border-color: var(--hop-Tag-option3-border-color);
3731
+ --background-color: var(--hop-Tag-option3-background-color);
3732
+ --text-color: var(--hop-Tag-option3-text-color);
3733
+ }
3734
+ .Tag-module__hop-Tag--option4___QNrtm {
3735
+ --border-color: var(--hop-Tag-option4-border-color);
3736
+ --background-color: var(--hop-Tag-option4-background-color);
3737
+ --text-color: var(--hop-Tag-option4-text-color);
3738
+ }
3739
+ .Tag-module__hop-Tag--option5___aiY5h {
3740
+ --border-color: var(--hop-Tag-option5-border-color);
3741
+ --background-color: var(--hop-Tag-option5-background-color);
3742
+ --text-color: var(--hop-Tag-option5-text-color);
3743
+ }
3744
+ .Tag-module__hop-Tag--option6___a6LqR {
3745
+ --border-color: var(--hop-Tag-option6-border-color);
3746
+ --background-color: var(--hop-Tag-option6-background-color);
3747
+ --text-color: var(--hop-Tag-option6-text-color);
3748
+ }
3749
+ .Tag-module__hop-Tag___KGnAq[data-href] {
3750
+ cursor: pointer;
3751
+ }
3752
+ .Tag-module__hop-Tag--neutral___-Ebyx[data-focus-visible] {
3753
+ --border-color: var(--hop-Tag-neutral-border-color-focus);
3754
+ --background-color: var(--hop-Tag-neutral-background-color-focus);
3755
+ --text-color: var(--hop-Tag-neutral-text-color-focus);
3756
+ }
3757
+ .Tag-module__hop-Tag--neutral___-Ebyx[data-hovered] {
3758
+ --border-color: var(--hop-Tag-neutral-border-color-hover);
3759
+ --background-color: var(--hop-Tag-neutral-background-color-hover);
3760
+ --text-color: var(--hop-Tag-neutral-text-color-hover);
3761
+ }
3762
+ .Tag-module__hop-Tag--neutral___-Ebyx[data-pressed] {
3763
+ --border-color: var(--hop-Tag-neutral-border-color-press);
3764
+ --background-color: var(--hop-Tag-neutral-background-color-press);
3765
+ --text-color: var(--hop-Tag-neutral-text-color-press);
3766
+ }
3767
+ .Tag-module__hop-Tag--neutral___-Ebyx[data-disabled] {
3768
+ --border-color: var(--hop-Tag-neutral-border-color-disabled);
3769
+ --background-color: var(--hop-Tag-neutral-background-color-disabled);
3770
+ --text-color: var(--hop-Tag-neutral-text-color-disabled);
3771
+ }
3772
+ .Tag-module__hop-Tag--subdued___v1Xes[data-focus-visible] {
3773
+ --border-color: var(--hop-Tag-subdued-border-color-focus);
3774
+ --background-color: var(--hop-Tag-subdued-background-color-focus);
3775
+ --text-color: var(--hop-Tag-subdued-text-color-focus);
3776
+ }
3777
+ .Tag-module__hop-Tag--subdued___v1Xes[data-hovered] {
3778
+ --border-color: var(--hop-Tag-subdued-border-color-hover);
3779
+ --background-color: var(--hop-Tag-subdued-background-color-hover);
3780
+ --text-color: var(--hop-Tag-subdued-text-color-hover);
3781
+ }
3782
+ .Tag-module__hop-Tag--subdued___v1Xes[data-pressed] {
3783
+ --border-color: var(--hop-Tag-subdued-border-color-press);
3784
+ --background-color: var(--hop-Tag-subdued-background-color-press);
3785
+ --text-color: var(--hop-Tag-subdued-text-color-press);
3786
+ }
3787
+ .Tag-module__hop-Tag--subdued___v1Xes[data-disabled] {
3788
+ --border-color: var(--hop-Tag-subdued-border-color-disabled);
3789
+ --background-color: var(--hop-Tag-subdued-background-color-disabled);
3790
+ --text-color: var(--hop-Tag-subdued-text-color-disabled);
3791
+ }
3792
+ .Tag-module__hop-Tag--progress___MqG2E[data-focus-visible] {
3793
+ --border-color: var(--hop-Tag-progress-border-color-focus);
3794
+ --background-color: var(--hop-Tag-progress-background-color-focus);
3795
+ --text-color: var(--hop-Tag-progress-text-color-focus);
3796
+ }
3797
+ .Tag-module__hop-Tag--progress___MqG2E[data-hovered] {
3798
+ --border-color: var(--hop-Tag-progress-border-color-hover);
3799
+ --background-color: var(--hop-Tag-progress-background-color-hover);
3800
+ --text-color: var(--hop-Tag-progress-text-color-hover);
3801
+ }
3802
+ .Tag-module__hop-Tag--progress___MqG2E[data-pressed] {
3803
+ --border-color: var(--hop-Tag-progress-border-color-press);
3804
+ --background-color: var(--hop-Tag-progress-background-color-press);
3805
+ --text-color: var(--hop-Tag-progress-text-color-press);
3806
+ }
3807
+ .Tag-module__hop-Tag--progress___MqG2E[data-disabled] {
3808
+ --border-color: var(--hop-Tag-progress-border-color-disabled);
3809
+ --background-color: var(--hop-Tag-progress-background-color-disabled);
3810
+ --text-color: var(--hop-Tag-progress-text-color-disabled);
3811
+ }
3812
+ .Tag-module__hop-Tag--positive___HTRyK[data-focus-visible] {
3813
+ --border-color: var(--hop-Tag-positive-border-color-focus);
3814
+ --background-color: var(--hop-Tag-positive-background-color-focus);
3815
+ --text-color: var(--hop-Tag-positive-text-color-focus);
3816
+ }
3817
+ .Tag-module__hop-Tag--positive___HTRyK[data-hovered] {
3818
+ --border-color: var(--hop-Tag-positive-border-color-hover);
3819
+ --background-color: var(--hop-Tag-positive-background-color-hover);
3820
+ --text-color: var(--hop-Tag-positive-text-color-hover);
3821
+ }
3822
+ .Tag-module__hop-Tag--positive___HTRyK[data-pressed] {
3823
+ --border-color: var(--hop-Tag-positive-border-color-press);
3824
+ --background-color: var(--hop-Tag-positive-background-color-press);
3825
+ --text-color: var(--hop-Tag-positive-text-color-press);
3826
+ }
3827
+ .Tag-module__hop-Tag--positive___HTRyK[data-disabled] {
3828
+ --border-color: var(--hop-Tag-positive-border-color-disabled);
3829
+ --background-color: var(--hop-Tag-positive-background-color-disabled);
3830
+ --text-color: var(--hop-Tag-positive-text-color-disabled);
3831
+ }
3832
+ .Tag-module__hop-Tag--caution___zWO7H[data-focus-visible] {
3833
+ --border-color: var(--hop-Tag-caution-border-color-focus);
3834
+ --background-color: var(--hop-Tag-caution-background-color-focus);
3835
+ --text-color: var(--hop-Tag-caution-text-color-focus);
3836
+ }
3837
+ .Tag-module__hop-Tag--caution___zWO7H[data-hovered] {
3838
+ --border-color: var(--hop-Tag-caution-border-color-hover);
3839
+ --background-color: var(--hop-Tag-caution-background-color-hover);
3840
+ --text-color: var(--hop-Tag-caution-text-color-hover);
3841
+ }
3842
+ .Tag-module__hop-Tag--caution___zWO7H[data-pressed] {
3843
+ --border-color: var(--hop-Tag-caution-border-color-press);
3844
+ --background-color: var(--hop-Tag-caution-background-color-press);
3845
+ --text-color: var(--hop-Tag-caution-text-color-press);
3846
+ }
3847
+ .Tag-module__hop-Tag--caution___zWO7H[data-disabled] {
3848
+ --border-color: var(--hop-Tag-caution-border-color-disabled);
3849
+ --background-color: var(--hop-Tag-caution-background-color-disabled);
3850
+ --text-color: var(--hop-Tag-caution-text-color-disabled);
3851
+ }
3852
+ .Tag-module__hop-Tag--negative___ir4C0[data-focus-visible] {
3853
+ --border-color: var(--hop-Tag-negative-border-color-focus);
3854
+ --background-color: var(--hop-Tag-negative-background-color-focus);
3855
+ --text-color: var(--hop-Tag-negative-text-color-focus);
3856
+ }
3857
+ .Tag-module__hop-Tag--negative___ir4C0[data-hovered] {
3858
+ --border-color: var(--hop-Tag-negative-border-color-hover);
3859
+ --background-color: var(--hop-Tag-negative-background-color-hover);
3860
+ --text-color: var(--hop-Tag-negative-text-color-hover);
3861
+ }
3862
+ .Tag-module__hop-Tag--negative___ir4C0[data-pressed] {
3863
+ --border-color: var(--hop-Tag-negative-border-color-press);
3864
+ --background-color: var(--hop-Tag-negative-background-color-press);
3865
+ --text-color: var(--hop-Tag-negative-text-color-press);
3866
+ }
3867
+ .Tag-module__hop-Tag--negative___ir4C0[data-disabled] {
3868
+ --border-color: var(--hop-Tag-negative-border-color-disabled);
3869
+ --background-color: var(--hop-Tag-negative-background-color-disabled);
3870
+ --text-color: var(--hop-Tag-negative-text-color-disabled);
3871
+ }
3872
+ .Tag-module__hop-Tag--option1___2wfCi[data-focus-visible] {
3873
+ --border-color: var(--hop-Tag-option1-border-color-focus);
3874
+ --background-color: var(--hop-Tag-option1-background-color-focus);
3875
+ --text-color: var(--hop-Tag-option1-text-color-focus);
3876
+ }
3877
+ .Tag-module__hop-Tag--option1___2wfCi[data-hovered] {
3878
+ --border-color: var(--hop-Tag-option1-border-color-hover);
3879
+ --background-color: var(--hop-Tag-option1-background-color-hover);
3880
+ --text-color: var(--hop-Tag-option1-text-color-hover);
3881
+ }
3882
+ .Tag-module__hop-Tag--option1___2wfCi[data-pressed] {
3883
+ --border-color: var(--hop-Tag-option1-border-color-press);
3884
+ --background-color: var(--hop-Tag-option1-background-color-press);
3885
+ --text-color: var(--hop-Tag-option1-text-color-press);
3886
+ }
3887
+ .Tag-module__hop-Tag--option1___2wfCi[data-disabled] {
3888
+ --border-color: var(--hop-Tag-option1-border-color-disabled);
3889
+ --background-color: var(--hop-Tag-option1-background-color-disabled);
3890
+ --text-color: var(--hop-Tag-option1-text-color-disabled);
3891
+ }
3892
+ .Tag-module__hop-Tag--option2___yrzab[data-focus-visible] {
3893
+ --border-color: var(--hop-Tag-option2-border-color-focus);
3894
+ --background-color: var(--hop-Tag-option2-background-color-focus);
3895
+ --text-color: var(--hop-Tag-option2-text-color-focus);
3896
+ }
3897
+ .Tag-module__hop-Tag--option2___yrzab[data-hovered] {
3898
+ --border-color: var(--hop-Tag-option2-border-color-hover);
3899
+ --background-color: var(--hop-Tag-option2-background-color-hover);
3900
+ --text-color: var(--hop-Tag-option2-text-color-hover);
3901
+ }
3902
+ .Tag-module__hop-Tag--option2___yrzab[data-pressed] {
3903
+ --border-color: var(--hop-Tag-option2-border-color-press);
3904
+ --background-color: var(--hop-Tag-option2-background-color-press);
3905
+ --text-color: var(--hop-Tag-option2-text-color-press);
3906
+ }
3907
+ .Tag-module__hop-Tag--option2___yrzab[data-disabled] {
3908
+ --border-color: var(--hop-Tag-option2-border-color-disabled);
3909
+ --background-color: var(--hop-Tag-option2-background-color-disabled);
3910
+ --text-color: var(--hop-Tag-option2-text-color-disabled);
3911
+ }
3912
+ .Tag-module__hop-Tag--option3___GrKyt[data-focus-visible] {
3913
+ --border-color: var(--hop-Tag-option3-border-color-focus);
3914
+ --background-color: var(--hop-Tag-option3-background-color-focus);
3915
+ --text-color: var(--hop-Tag-option3-text-color-focus);
3916
+ }
3917
+ .Tag-module__hop-Tag--option3___GrKyt[data-hovered] {
3918
+ --border-color: var(--hop-Tag-option3-border-color-hover);
3919
+ --background-color: var(--hop-Tag-option3-background-color-hover);
3920
+ --text-color: var(--hop-Tag-option3-text-color-hover);
3921
+ }
3922
+ .Tag-module__hop-Tag--option3___GrKyt[data-pressed] {
3923
+ --border-color: var(--hop-Tag-option3-border-color-press);
3924
+ --background-color: var(--hop-Tag-option3-background-color-press);
3925
+ --text-color: var(--hop-Tag-option3-text-color-press);
3926
+ }
3927
+ .Tag-module__hop-Tag--option3___GrKyt[data-disabled] {
3928
+ --border-color: var(--hop-Tag-option3-border-color-disabled);
3929
+ --background-color: var(--hop-Tag-option3-background-color-disabled);
3930
+ --text-color: var(--hop-Tag-option3-text-color-disabled);
3931
+ }
3932
+ .Tag-module__hop-Tag--option4___QNrtm[data-focus-visible] {
3933
+ --border-color: var(--hop-Tag-option4-border-color-focus);
3934
+ --background-color: var(--hop-Tag-option4-background-color-focus);
3935
+ --text-color: var(--hop-Tag-option4-text-color-focus);
3936
+ }
3937
+ .Tag-module__hop-Tag--option4___QNrtm[data-hovered] {
3938
+ --border-color: var(--hop-Tag-option4-border-color-hover);
3939
+ --background-color: var(--hop-Tag-option4-background-color-hover);
3940
+ --text-color: var(--hop-Tag-option4-text-color-hover);
3941
+ }
3942
+ .Tag-module__hop-Tag--option4___QNrtm[data-pressed] {
3943
+ --border-color: var(--hop-Tag-option4-border-color-press);
3944
+ --background-color: var(--hop-Tag-option4-background-color-press);
3945
+ --text-color: var(--hop-Tag-option4-text-color-press);
3946
+ }
3947
+ .Tag-module__hop-Tag--option4___QNrtm[data-disabled] {
3948
+ --border-color: var(--hop-Tag-option4-border-color-disabled);
3949
+ --background-color: var(--hop-Tag-option4-background-color-disabled);
3950
+ --text-color: var(--hop-Tag-option4-text-color-disabled);
3951
+ }
3952
+ .Tag-module__hop-Tag--option5___aiY5h[data-focus-visible] {
3953
+ --border-color: var(--hop-Tag-option5-border-color-focus);
3954
+ --background-color: var(--hop-Tag-option5-background-color-focus);
3955
+ --text-color: var(--hop-Tag-option5-text-color-focus);
3956
+ }
3957
+ .Tag-module__hop-Tag--option5___aiY5h[data-hovered] {
3958
+ --border-color: var(--hop-Tag-option5-border-color-hover);
3959
+ --background-color: var(--hop-Tag-option5-background-color-hover);
3960
+ --text-color: var(--hop-Tag-option5-text-color-hover);
3961
+ }
3962
+ .Tag-module__hop-Tag--option5___aiY5h[data-pressed] {
3963
+ --border-color: var(--hop-Tag-option5-border-color-press);
3964
+ --background-color: var(--hop-Tag-option5-background-color-press);
3965
+ --text-color: var(--hop-Tag-option5-text-color-press);
3966
+ }
3967
+ .Tag-module__hop-Tag--option5___aiY5h[data-disabled] {
3968
+ --border-color: var(--hop-Tag-option5-border-color-disabled);
3969
+ --background-color: var(--hop-Tag-option5-background-color-disabled);
3970
+ --text-color: var(--hop-Tag-option5-text-color-disabled);
3971
+ }
3972
+ .Tag-module__hop-Tag--option6___a6LqR[data-focus-visible] {
3973
+ --border-color: var(--hop-Tag-option6-border-color-focus);
3974
+ --background-color: var(--hop-Tag-option6-background-color-focus);
3975
+ --text-color: var(--hop-Tag-option6-text-color-focus);
3976
+ }
3977
+ .Tag-module__hop-Tag--option6___a6LqR[data-hovered] {
3978
+ --border-color: var(--hop-Tag-option6-border-color-hover);
3979
+ --background-color: var(--hop-Tag-option6-background-color-hover);
3980
+ --text-color: var(--hop-Tag-option6-text-color-hover);
3981
+ }
3982
+ .Tag-module__hop-Tag--option6___a6LqR[data-pressed] {
3983
+ --border-color: var(--hop-Tag-option6-border-color-press);
3984
+ --background-color: var(--hop-Tag-option6-background-color-press);
3985
+ --text-color: var(--hop-Tag-option6-text-color-press);
3986
+ }
3987
+ .Tag-module__hop-Tag--option6___a6LqR[data-disabled] {
3988
+ --border-color: var(--hop-Tag-option6-border-color-disabled);
3989
+ --background-color: var(--hop-Tag-option6-background-color-disabled);
3990
+ --text-color: var(--hop-Tag-option6-text-color-disabled);
3991
+ }
3992
+ .Tag-module__hop-Tag___KGnAq[data-focus-visible] {
3993
+ outline: 0.125rem solid var(--focus-ring-color);
3994
+ }
3995
+ .Tag-module__hop-Tag___KGnAq[data-hovered] {
3996
+ cursor: pointer;
3997
+ }
3998
+ .Tag-module__hop-Tag___KGnAq[data-selected] {
3999
+ --background-color: var(--hop-Tag-background-color-selected);
4000
+ --border-color: var(--hop-Tag-border-color-selected);
4001
+ --text-color: var(--hop-Tag-text-color-selected);
4002
+ }
4003
+ .Tag-module__hop-Tag___KGnAq[data-pressed] {
4004
+ cursor: pointer;
4005
+ }
4006
+ .Tag-module__hop-Tag___KGnAq[data-invalid] {
4007
+ --border-color: var(--hop-Tag-border-color-invalid);
4008
+ }
4009
+ .Tag-module__hop-Tag___KGnAq[data-disabled] {
4010
+ cursor: not-allowed;
4011
+ }
4012
+ .Tag-module__hop-Tag__avatar___8sp7f {
4013
+ flex: 0 0 auto;
4014
+ order: 1;
4015
+ margin-inline-start: var(--avatar-margin-inline-start);
4016
+ }
4017
+ .Tag-module__hop-Tag__icon___Ry8kN,
4018
+ .Tag-module__hop-Tag__icon-list___lkO5j {
4019
+ flex: 0 0 auto;
4020
+ flex-wrap: nowrap;
4021
+ order: 2;
4022
+ margin-inline-start: var(--icon-margin-inline-start, 0);
4023
+ }
4024
+ .Tag-module__hop-Tag__text___wdgyp {
4025
+ overflow: hidden;
4026
+ flex: 1 1 auto;
4027
+ order: 3;
4028
+ min-inline-size: 0;
4029
+ text-align: center;
4030
+ text-overflow: ellipsis;
4031
+ }
4032
+ .Tag-module__hop-Tag__badge___qJRsU {
4033
+ flex: 0 0 auto;
4034
+ order: 4;
4035
+ margin-inline-end: var(--badge-margin-inline-end);
4036
+ }
4037
+ .Tag-module__hop-Tag__badge___qJRsU[data-variant=secondary] {
4038
+ margin-inline-start: var(--badge-secondary-margin-inline-start);
4039
+ color: inherit;
4040
+ background: none;
4041
+ }
4042
+ .Tag-module__hop-Tag--sm___e6uUD .Tag-module__hop-Tag__badge___qJRsU {
4043
+ block-size: 100%;
4044
+ }
4045
+ .Tag-module__hop-Tag__remove-btn___N4NWZ,
4046
+ .Tag-module__hop-Tag__Spinner___bw0F4 {
4047
+ flex: 0 0 auto;
4048
+ order: 5;
4049
+ }
4050
+ .Tag-module__hop-Tag__Spinner___bw0F4 {
4051
+ margin-inline-end: var(--spinner-margin-inline-end);
4052
+ }
4053
+ .Tag-module__hop-Tag__remove-btn___N4NWZ {
4054
+ margin-inline: var(--clear-btn-margin-inline);
4055
+ }
4056
+
4057
+ /* css-module:/home/runner/work/wl-hopper/wl-hopper/packages/components/src/tag/src/TagGroup.module.css/#css-module-data */
4058
+ .TagGroup-module__hop-TagGroup___1JF88 {
4059
+ --hop-TagGroup-row-gap: var(--hop-space-inline-sm);
4060
+ --hop-TagGroup-list-column-gap: var(--hop-space-inline-sm);
4061
+ --hop-TagGroup-list-row-gap: var(--hop-space-inline-sm);
4062
+ --hop-TagGroup-list-focus-ring-color: var(--hop-primary-border-focus);
4063
+ --hop-TagGroup-list-border-radius: var(--hop-shape-rounded-sm);
4064
+ --row-gap: var(--hop-TagGroup-row-gap);
4065
+ --list-column-gap: var(--hop-TagGroup-list-column-gap);
4066
+ --list-row-gap: var(--hop-TagGroup-list-row-gap);
4067
+ --list-focus-ring-color: var(--hop-TagGroup-list-focus-ring-color);
4068
+ --list-border-radius: var(--hop-TagGroup-list-border-radius);
4069
+ display: flex;
4070
+ flex-direction: column;
4071
+ row-gap: var(--row-gap);
4072
+ align-items: flex-start;
4073
+ justify-content: flex-start;
4074
+ box-sizing: border-box;
4075
+ inline-size: max-content;
4076
+ max-inline-size: 100%;
4077
+ }
4078
+ .TagGroup-module__hop-TagGroup___1JF88 > .TagGroup-module__hop-TagGroup__label___ktkn2 {
4079
+ order: 1;
4080
+ }
4081
+ .TagGroup-module__hop-TagGroup__list___KfOWe {
4082
+ display: flex;
4083
+ flex-wrap: wrap;
4084
+ gap: var(--list-row-gap) var(--list-column-gap);
4085
+ align-items: center;
4086
+ order: 2;
4087
+ border-radius: var(--list-border-radius);
4088
+ outline: none;
4089
+ }
4090
+ .TagGroup-module__hop-TagGroup__list___KfOWe[data-focus-visible] {
4091
+ outline: 0.125rem solid var(--list-focus-ring-color);
4092
+ outline-offset: 0.125rem;
4093
+ }
4094
+ .TagGroup-module__hop-TagGroup___1JF88 > .TagGroup-module__hop-TagGroup__error-message___biZ4y,
4095
+ .TagGroup-module__hop-TagGroup___1JF88 > .TagGroup-module__hop-TagGroup__helper-message___qcq0h {
4096
+ order: 3;
4097
+ }
4098
+
4099
+ /* css-module:/home/runner/work/wl-hopper/wl-hopper/packages/components/src/overlays/Popover/src/Popover.module.css/#css-module-data */
4100
+ :where(.Popover-module__hop-Popover___VDTYB *) {
4101
+ font-family: var(--font-family);
4102
+ font-size: var(--font-size);
4103
+ font-weight: var(--font-weight);
4104
+ line-height: var(--line-height);
4105
+ outline: none;
4106
+ }
4107
+ .Popover-module__hop-Popover___VDTYB {
4108
+ --hop-Popover-max-inline-width: calc(100% - (var(--container-padding) * 2));
4109
+ --hop-Popover-inline-width: 25rem;
4110
+ --hop-Popover-dropdown-inline-width: var(--trigger-width);
4111
+ --hop-Popover-dropdown-auto-inline-width: auto;
4112
+ --width: var(--hop-Popover-inline-width);
4113
+ --max-width: var(--hop-Popover-max-inline-width);
4114
+ display: flex;
4115
+ flex-direction: column;
4116
+ inline-size: var(--width);
4117
+ max-inline-size: var(--max-width);
4118
+ }
4119
+ .Popover-module__hop-Popover___VDTYB[data-trigger=Select] {
4120
+ --width: var(--hop-Popover-dropdown-inline-width);
4121
+ }
4122
+ .Popover-module__hop-Popover___VDTYB[data-auto-width] {
4123
+ --width: var(--hop-Popover-dropdown-auto-inline-width);
4124
+ }
4125
+ .Popover-module__hop-Popover___VDTYB[data-entering] {
4126
+ animation: Popover-module__fade___uwIjr 0.25s;
4127
+ }
4128
+ .Popover-module__hop-Popover___VDTYB[data-exiting] {
4129
+ animation: Popover-module__fade___uwIjr 0.25s reverse;
4130
+ }
4131
+ @keyframes Popover-module__fade___uwIjr {
4132
+ from {
4133
+ opacity: 0;
4134
+ }
4135
+ to {
4136
+ opacity: 1;
4137
+ }
4138
+ }
4139
+ .Popover-module__hop-Popover__wrapper___rBazX {
4140
+ display: flex;
4141
+ flex: 1 1 auto;
4142
+ flex-direction: column;
4143
+ min-block-size: 0;
4144
+ }
4145
+ .Popover-module__hop-Popover__dialog___6ncUU,
4146
+ .Popover-module__hop-Popover__dropdown___kjrcJ {
4147
+ --hop-Popover-background: var(--hop-neutral-surface);
4148
+ --hop-Popover-font-family: var(--hop-body-sm-font-family);
4149
+ --hop-Popover-font-size: var(--hop-body-sm-font-size);
4150
+ --hop-Popover-font-weight: var(--hop-body-sm-font-weight);
4151
+ --hop-Popover-line-height: var(--hop-body-sm-line-height);
4152
+ --hop-Popover-color: var(--hop-neutral-text);
4153
+ --hop-Popover-grid-template: "header header" "content content" 1fr "footer action" / auto auto;
4154
+ --hop-Popover-column-gap: var(--hop-space-inset-sm);
4155
+ --hop-Popover-row-gap: var(--hop-space-stack-sm);
4156
+ --hop-Popover-dialog-padding: var(--hop-space-inset-md);
4157
+ --hop-Popover-dropdown-padding: var(--hop-space-inset-sm);
4158
+ --hop-Popover-title-font-family: var(--hop-body-sm-font-family);
4159
+ --hop-Popover-title-font-weight: var(--hop-body-sm-semibold-font-weight);
4160
+ --hop-Popover-content-font-size: var(--hop-body-sm-font-size);
4161
+ --hop-Popover-content-line-height: var(--hop-body-sm-line-height);
4162
+ --hop-Popover-content-color: var(--hop-neutral-text-weak);
4163
+ --hop-Popover-footer-font-size: var(--hop-body-sm-font-size);
4164
+ --hop-Popover-footer-line-height: var(--hop-body-sm-line-height);
4165
+ --hop-Popover-footer-link-color: var(--hop-primary-text);
4166
+ --hop-Popover-footer-margin: var(--hop-space-stack-md) 0 0;
4167
+ --hop-Popover-border: 0.0625rem solid var(--hop-neutral-border-weak);
4168
+ --hop-Popover-border-radius: var(--hop-shape-rounded-md);
4169
+ --hop-Popover-box-shadow: var(--hop-elevation-lifted);
4170
+ --hop-Popover-dropdown-grid-template: "header" "content" 1fr "footer" / auto;
4171
+ --hop-Popover-list-box-dropdown-max-height: 18.75rem;
4172
+ --hop-Popover-footer-dropdown-margin: var(--hop-Popover-dropdown-padding) calc(-1 * var(--hop-Popover-dropdown-padding)) calc(-1 * var(--hop-Popover-dropdown-padding));
4173
+ --hop-Popover-footer-dropdown-footer-padding: var(--hop-space-inset-sm);
4174
+ --hop-Popover-footer-dropdown-footer-border-top: 0.0625rem solid var(--hop-neutral-border-weak);
4175
+ --font-family: var(--hop-Popover-font-family);
4176
+ --font-size: var(--hop-Popover-font-size);
4177
+ --font-weight: var(--hop-Popover-font-weight);
4178
+ --line-height: var(--hop-Popover-line-height);
4179
+ --grid-template: var(--hop-Popover-grid-template);
4180
+ --footer-margin: var(--hop-Popover-footer-margin);
4181
+ --footer-place-self: center start;
4182
+ display: grid;
4183
+ grid-template: var(--grid-template);
4184
+ box-sizing: border-box;
4185
+ min-block-size: 0;
4186
+ padding: var(--padding);
4187
+ background-color: var(--hop-Popover-background);
4188
+ border: var(--hop-Popover-border);
4189
+ border-radius: var(--hop-Popover-border-radius);
4190
+ box-shadow: var(--hop-Popover-box-shadow);
4191
+ }
4192
+ .Popover-module__hop-Popover__dropdown___kjrcJ {
4193
+ --footer-margin: var(--hop-Popover-footer-dropdown-margin);
4194
+ --footer-place-self: stretch;
4195
+ --grid-template: var(--hop-Popover-dropdown-grid-template);
4196
+ --padding: var(--hop-Popover-dropdown-padding);
4197
+ }
4198
+ .Popover-module__hop-Popover__dialog___6ncUU {
4199
+ --padding: var(--hop-Popover-dialog-padding);
4200
+ }
4201
+ .Popover-module__hop-Popover__title___qZBhF {
4202
+ grid-area: header;
4203
+ color: var(--hop-Popover-color);
4204
+ }
4205
+ .Popover-module__hop-Popover__content___e35rK {
4206
+ --font-size: var(--hop-Popover-content-font-size);
4207
+ --line-height: var(--hop-Popover-content-line-height);
4208
+ grid-area: content;
4209
+ margin-block: var(--hop-Popover-row-gap) 0;
4210
+ margin-inline: 0;
4211
+ padding: 0;
4212
+ color: var(--hop-Popover-content-color);
4213
+ }
4214
+ .Popover-module__hop-Popover__dropdown___kjrcJ .Popover-module__hop-Popover__list-box___uD0ue {
4215
+ grid-area: content;
4216
+ inline-size: auto;
4217
+ min-inline-size: auto;
4218
+ max-inline-size: none;
4219
+ max-block-size: var(--hop-Popover-list-box-dropdown-max-height);
4220
+ padding: 0;
4221
+ border: none;
4222
+ }
4223
+ .Popover-module__hop-Popover__footer___OyNk- {
4224
+ --font-size: var(--hop-Popover-footer-font-size);
4225
+ --line-height: var(--hop-Popover-footer-line-height);
4226
+ grid-area: footer;
4227
+ place-self: var(--footer-place-self);
4228
+ margin: var(--footer-margin);
4229
+ color: var(--hop-Popover-color);
4230
+ }
4231
+ .Popover-module__hop-Popover__dropdown___kjrcJ .Popover-module__hop-Popover__footer___OyNk- {
4232
+ padding: var(--hop-Popover-footer-dropdown-footer-padding);
4233
+ border-block-start: var(--hop-Popover-footer-dropdown-footer-border-top);
4234
+ }
4235
+ .Popover-module__hop-Popover__actions___l8RIe,
4236
+ .Popover-module__hop-Popover__action___xdB8e {
4237
+ grid-area: action;
4238
+ justify-self: end;
4239
+ margin-block-start: var(--hop-Popover-row-gap);
4240
+ }
4241
+ .Popover-module__hop-Popover___VDTYB:has(.Popover-module__hop-Popover__actions___l8RIe, .Popover-module__hop-Popover__action___xdB8e) .Popover-module__hop-Popover__footer___OyNk- {
4242
+ margin-inline-end: var(--hop-Popover-column-gap);
4243
+ }
4244
+
4245
+ /* css-module:/home/runner/work/wl-hopper/wl-hopper/packages/components/src/Select/src/Select.module.css/#css-module-data */
4246
+ .Select-module__hop-Select___-8SYI {
4247
+ --hop-Select-row-gap: var(--hop-space-stack-xs);
4248
+ --hop-Select-inline-size: 20rem;
4249
+ --hop-Select-inline-size-fluid: 100%;
4250
+ --hop-Select-max-inline-size: 100%;
4251
+ --hop-Select-button-background-color: var(--hop-neutral-surface);
4252
+ --hop-Select-button-border-color: var(--hop-neutral-border);
4253
+ --hop-Select-button-border-radius: var(--hop-shape-rounded-md);
4254
+ --hop-Select-button-border-size: var(--hop-space-10);
4255
+ --hop-Select-button-color: var(--hop-neutral-text);
4256
+ --hop-Select-button-cursor: pointer;
4257
+ --hop-Select-button-padding-inline: var(--hop-space-inset-md);
4258
+ --hop-Select-button-padding-block: 0;
4259
+ --hop-Select-button-placeholder-color: var(--hop-neutral-text-weakest);
4260
+ --hop-Select-button-column-gap: var(--hop-space-inline-sm);
4261
+ --hop-Select-button-sm-block-size: 2rem;
4262
+ --hop-Select-button-md-block-size: 2.5rem;
4263
+ --hop-Select-prefix-color: var(--hop-neutral-text-weak);
4264
+ --hop-Select-button-icon-color: var(--hop-neutral-icon-weak);
4265
+ --hop-Select-button-background-color-hovered: var(--hop-neutral-surface-hover);
4266
+ --hop-Select-button-border-color-hovered: var(--hop-neutral-border-hover);
4267
+ --hop-Select-button-color-hovered: var(--hop-neutral-text-hover);
4268
+ --hop-Select-button-icon-color-hovered: var(--hop-neutral-icon-hover);
4269
+ --hop-Select-button-background-color-focused: var(--hop-neutral-surface-hover);
4270
+ --hop-Select-button-border-color-focused: var(--hop-primary-border-focus);
4271
+ --hop-Select-button-color-focused: var(--hop-neutral-text-hover);
4272
+ --hop-Select-button-icon-color-focused: var(--hop-neutral-icon-hover);
4273
+ --hop-Select-button-outline-color-focused: var(--hop-primary-border-focus);
4274
+ --hop-Select-button-background-color-selected: var(--hop-neutral-surface);
4275
+ --hop-Select-button-border-color-selected: var(--hop-neutral-border-selected);
4276
+ --hop-Select-button-color-selected: var(--hop-neutral-text);
4277
+ --hop-Select-button-icon-color-selected: var(--hop-neutral-icon);
4278
+ --hop-Select-button-border-color-invalid: var(--hop-danger-border-strong);
4279
+ --hop-Select-button-background-color-disabled: var(--hop-neutral-surface-disabled);
4280
+ --hop-Select-button-border-color-disabled: var(--hop-neutral-border-disabled);
4281
+ --hop-Select-button-color-disabled: var(--hop-neutral-text-disabled);
4282
+ --hop-Select-button-icon-color-disabled: var(--hop-neutral-icon-disabled);
4283
+ --hop-Select-button-cursor-disabled: not-allowed;
4284
+ --inline-size: var(--hop-Select-inline-size);
4285
+ --button-background-color: var(--hop-Select-button-background-color);
4286
+ --button-border-color: var(--hop-Select-button-border-color);
4287
+ --button-color: var(--hop-Select-button-color);
4288
+ --button-icon-color: var(--hop-Select-button-icon-color);
4289
+ --button-cursor: var(--hop-Select-button-cursor);
4290
+ display: flex;
4291
+ flex-direction: column;
4292
+ row-gap: var(--hop-Select-row-gap);
4293
+ box-sizing: border-box;
4294
+ inline-size: var(--inline-size);
4295
+ max-inline-size: var(--hop-Select-max-inline-size);
4296
+ }
4297
+ .Select-module__hop-Select--fluid___xc7Ku {
4298
+ --inline-size: var(--hop-Select-inline-size-fluid);
4299
+ }
4300
+ .Select-module__hop-Select__label___g3Dp1 {
4301
+ order: 1;
4302
+ }
4303
+ .Select-module__hop-Select__button___bVgEW {
4304
+ cursor: var(--button-cursor);
4305
+ display: flex;
4306
+ column-gap: var(--hop-Select-button-column-gap);
4307
+ align-items: center;
4308
+ order: 2;
4309
+ block-size: var(--button-block-size);
4310
+ padding-block: var(--hop-Select-button-padding-block);
4311
+ padding-inline: var(--hop-Select-button-padding-inline);
4312
+ color: var(--button-color);
4313
+ text-align: start;
4314
+ background-color: var(--button-background-color);
4315
+ border: var(--hop-Select-button-border-size) solid var(--button-border-color);
4316
+ border-radius: var(--hop-Select-button-border-radius);
4317
+ outline: none;
4318
+ }
4319
+ .Select-module__hop-Select__button--sm___lAmUR {
4320
+ --button-block-size: var(--hop-Select-button-sm-block-size);
4321
+ }
4322
+ .Select-module__hop-Select__button--md___imFfM {
4323
+ --button-block-size: var(--hop-Select-button-md-block-size);
4324
+ }
4325
+ .Select-module__hop-Select__button___bVgEW[data-hovered] {
4326
+ --button-background-color: var(--hop-Select-button-background-color-hovered);
4327
+ --button-border-color: var(--hop-Select-button-border-color-hovered);
4328
+ --button-color: var(--hop-Select-button-color-hovered);
4329
+ --button-icon-color: var(--hop-Select-button-icon-color-hovered);
4330
+ }
4331
+ .Select-module__hop-Select__button___bVgEW[data-pressed] {
4332
+ --button-background-color: var(--hop-Select-button-background-color-selected);
4333
+ --button-border-color: var(--hop-Select-button-border-color-selected);
4334
+ --button-color: var(--hop-Select-button-color-selected);
4335
+ --button-icon-color: var(--hop-Select-button-icon-color-selected);
4336
+ }
4337
+ .Select-module__hop-Select__button___bVgEW[data-invalid] {
4338
+ --button-border-color: var(--hop-Select-button-border-color-invalid);
4339
+ }
4340
+ .Select-module__hop-Select__button___bVgEW[data-focus-visible] {
4341
+ --button-background-color: var(--hop-Select-button-background-color-focused);
4342
+ --button-border-color: var(--hop-Select-button-border-color-focused);
4343
+ --button-color: var(--hop-Select-button-color-focused);
4344
+ --button-icon-color: var(--hop-Select-button-icon-color-focused);
4345
+ outline: var(--hop-Select-button-border-size) solid var(--hop-Select-button-outline-color-focused);
4346
+ outline-offset: -0.125rem;
4347
+ }
4348
+ .Select-module__hop-Select__button___bVgEW:has([data-placeholder]) {
4349
+ --button-color: var(--hop-Select-button-placeholder-color);
4350
+ }
4351
+ .Select-module__hop-Select__button___bVgEW[data-disabled] {
4352
+ --button-background-color: var(--hop-Select-button-background-color-disabled);
4353
+ --button-border-color: var(--hop-Select-button-border-color-disabled);
4354
+ --button-color: var(--hop-Select-button-color-disabled);
4355
+ --button-icon-color: var(--hop-Select-button-icon-color-disabled);
4356
+ --button-cursor: var(--hop-Select-button-cursor-disabled);
4357
+ }
4358
+ .Select-module__hop-Select__prefix___IpM32 {
4359
+ color: var(--hop-Select-prefix-color);
4360
+ }
4361
+ .Select-module__hop-Select__button-icon___nOSOw {
4362
+ margin-inline-start: auto;
4363
+ color: var(--button-icon-color);
4364
+ }
4365
+ .Select-module__hop-Select__helper-message___sMWir,
4366
+ .Select-module__hop-Select__error-message___co23W {
4367
+ order: 3;
4368
+ }