@hopper-ui/components 1.2.1 → 1.3.1

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