@hopper-ui/components 1.0.1 → 1.0.3

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 (269) hide show
  1. package/CHANGELOG.md +14 -0
  2. package/dist/HopperProvider/src/HopperProvider.js +1 -1
  3. package/dist/HopperProvider/src/index.js +1 -1
  4. package/dist/IconList/src/IconList.css +1 -1
  5. package/dist/IconList/src/IconList.js +2 -2
  6. package/dist/IconList/src/IconListContext.js +1 -1
  7. package/dist/IconList/src/index.css +1 -1
  8. package/dist/IconList/src/index.js +2 -2
  9. package/dist/Link/src/Link.css +32 -32
  10. package/dist/Link/src/Link.js +6 -6
  11. package/dist/Link/src/LinkContext.js +1 -1
  12. package/dist/Link/src/index.css +32 -32
  13. package/dist/Link/src/index.js +6 -6
  14. package/dist/Spinner/src/Spinner.css +29 -29
  15. package/dist/Spinner/src/Spinner.js +5 -5
  16. package/dist/Spinner/src/SpinnerContext.js +1 -1
  17. package/dist/Spinner/src/index.css +29 -29
  18. package/dist/Spinner/src/index.js +5 -5
  19. package/dist/badge/src/Badge.css +80 -0
  20. package/dist/badge/src/Badge.d.ts +26 -0
  21. package/dist/badge/src/Badge.js +6 -0
  22. package/dist/badge/src/BadgeContext.d.ts +10 -0
  23. package/dist/badge/src/BadgeContext.js +2 -0
  24. package/dist/badge/src/index.css +80 -0
  25. package/dist/badge/src/index.d.ts +7 -0
  26. package/dist/badge/src/index.js +6 -0
  27. package/dist/buttons/src/Button.css +120 -120
  28. package/dist/buttons/src/Button.d.ts +1 -1
  29. package/dist/buttons/src/Button.js +10 -10
  30. package/dist/buttons/src/ButtonContext.d.ts +1 -1
  31. package/dist/buttons/src/ButtonContext.js +1 -1
  32. package/dist/buttons/src/ButtonGroup.css +11 -11
  33. package/dist/buttons/src/ButtonGroup.d.ts +1 -1
  34. package/dist/buttons/src/ButtonGroup.js +6 -83
  35. package/dist/buttons/src/ButtonGroupContext.js +1 -1
  36. package/dist/buttons/src/ClearButton.css +102 -0
  37. package/dist/buttons/src/ClearButton.d.ts +16 -0
  38. package/dist/buttons/src/ClearButton.js +9 -0
  39. package/dist/buttons/src/ClearButtonContext.d.ts +9 -0
  40. package/dist/buttons/src/ClearButtonContext.js +2 -0
  41. package/dist/buttons/src/EmbeddedButton.css +102 -0
  42. package/dist/buttons/src/EmbeddedButton.d.ts +20 -0
  43. package/dist/buttons/src/EmbeddedButton.js +6 -0
  44. package/dist/buttons/src/EmbeddedButtonContext.d.ts +8 -0
  45. package/dist/buttons/src/EmbeddedButtonContext.js +2 -0
  46. package/dist/buttons/src/index.css +262 -120
  47. package/dist/buttons/src/index.d.ts +7 -0
  48. package/dist/buttons/src/index.js +16 -10
  49. package/dist/checkbox/src/Checkbox.css +39 -35
  50. package/dist/checkbox/src/Checkbox.js +5 -5
  51. package/dist/checkbox/src/CheckboxContext.js +1 -1
  52. package/dist/checkbox/src/CheckboxField.css +16 -16
  53. package/dist/checkbox/src/CheckboxField.js +3 -3
  54. package/dist/checkbox/src/CheckboxFieldContext.js +1 -1
  55. package/dist/checkbox/src/CheckboxGroup.css +79 -75
  56. package/dist/checkbox/src/CheckboxGroup.js +3 -3
  57. package/dist/checkbox/src/CheckboxGroupContext.js +1 -1
  58. package/dist/checkbox/src/CheckboxList.js +1 -1
  59. package/dist/checkbox/src/CheckboxListContext.js +1 -1
  60. package/dist/checkbox/src/index.css +79 -75
  61. package/dist/checkbox/src/index.js +8 -8
  62. package/dist/chip/src/Chip.css +34 -34
  63. package/dist/chip/src/Chip.js +4 -4
  64. package/dist/chip/src/ChipContext.js +1 -1
  65. package/dist/chip/src/index.css +34 -34
  66. package/dist/chip/src/index.js +4 -4
  67. package/dist/{chunk-YSQDPG26.js → chunk-2P3A4VVY.js} +6 -1
  68. package/dist/{chunk-CJFCOPMQ.js → chunk-2VBOJKEP.js} +2 -2
  69. package/dist/{chunk-3KIUEBO3.js → chunk-3DWVMCIV.js} +2 -2
  70. package/dist/chunk-3NKF5TPD.js +7 -0
  71. package/dist/{chunk-H234F7HP.js → chunk-3XFTRBIC.js} +2 -2
  72. package/dist/{chunk-HUJ3PTM7.js → chunk-4RIAVSLK.js} +2 -2
  73. package/dist/chunk-5EPNXRCT.js +44 -0
  74. package/dist/chunk-6BFSSZCY.js +7 -0
  75. package/dist/{chunk-BIVAOAN2.js → chunk-7NT6M6KM.js} +3 -3
  76. package/dist/chunk-AQITZWYM.js +43 -0
  77. package/dist/chunk-BAKCRZAG.js +82 -0
  78. package/dist/{chunk-TRS7R4W3.js → chunk-CTK5YVBZ.js} +2 -2
  79. package/dist/chunk-CTOL6AVF.js +156 -0
  80. package/dist/chunk-D6UTDI2K.js +28 -0
  81. package/dist/{chunk-ZUMAL5WB.js → chunk-DJU2DUTQ.js} +4 -3
  82. package/dist/{chunk-EADFYPVX.js → chunk-DLTYFRKN.js} +4 -4
  83. package/dist/chunk-DXVKHP4V.js +7 -0
  84. package/dist/{chunk-VYNBJRJW.js → chunk-EE75ND6V.js} +2 -2
  85. package/dist/chunk-EWMWQ2MC.js +7 -0
  86. package/dist/chunk-GF2U6E4D.js +56 -0
  87. package/dist/chunk-GXBVNCVP.js +43 -0
  88. package/dist/{chunk-BPM4ETTB.js → chunk-H6CDFWVR.js} +11 -3
  89. package/dist/chunk-I67NHYK4.js +7 -0
  90. package/dist/{chunk-KKFX7YII.js → chunk-IOLNBXZM.js} +6 -5
  91. package/dist/chunk-IXB2WK56.js +7 -0
  92. package/dist/{chunk-CE3ABLD2.js → chunk-JLF7DSUY.js} +4 -4
  93. package/dist/{chunk-3FT5XSWV.js → chunk-JLFHTZUA.js} +4 -4
  94. package/dist/chunk-LCAS3YQV.js +7 -0
  95. package/dist/chunk-LJXTJRSB.js +1 -0
  96. package/dist/chunk-LYV2D5RZ.js +69 -0
  97. package/dist/chunk-O4XPUINW.js +7 -0
  98. package/dist/chunk-O7IJYNVQ.js +7 -0
  99. package/dist/chunk-OGMLQRES.js +91 -0
  100. package/dist/chunk-OQW6BT6B.js +373 -0
  101. package/dist/{chunk-6EMOC7TA.js → chunk-OUN5KSHD.js} +2 -2
  102. package/dist/{chunk-HVKOIMMW.js → chunk-QCA3ZR56.js} +1 -1
  103. package/dist/chunk-QW45G6K4.js +7 -0
  104. package/dist/chunk-RXBKOHT2.js +83 -0
  105. package/dist/chunk-SC6ZK5ON.js +7 -0
  106. package/dist/chunk-TIPN4VYD.js +46 -0
  107. package/dist/chunk-TXZ6BMFR.js +7 -0
  108. package/dist/chunk-UARL5M2W.js +32 -0
  109. package/dist/{chunk-SC4G54ML.js → chunk-UY7WQ7TC.js} +8 -8
  110. package/dist/{chunk-G7RKLBFT.js → chunk-WLSLSMK7.js} +3 -3
  111. package/dist/chunk-WPNVVGFW.js +7 -0
  112. package/dist/chunk-WWRB4K4M.js +44 -0
  113. package/dist/{chunk-OE5BLFZI.js → chunk-X6SER3TZ.js} +1 -1
  114. package/dist/{chunk-FD4HMY5A.js → chunk-XFKAXBB5.js} +4 -4
  115. package/dist/{chunk-YFTLWL74.js → chunk-XIOIAME2.js} +1 -1
  116. package/dist/chunk-XLKYXKWE.js +7 -0
  117. package/dist/chunk-Y7HUXUHX.js +30 -0
  118. package/dist/chunk-YQHNOQ3N.js +96 -0
  119. package/dist/chunk-Z3ID4UEE.js +55 -0
  120. package/dist/chunk-ZSFJVMJN.js +7 -0
  121. package/dist/errorMessage/src/ErrorMessage.css +12 -12
  122. package/dist/errorMessage/src/ErrorMessage.d.ts +1 -1
  123. package/dist/errorMessage/src/ErrorMessage.js +4 -4
  124. package/dist/errorMessage/src/ErrorMessageContext.d.ts +1 -1
  125. package/dist/errorMessage/src/ErrorMessageContext.js +1 -1
  126. package/dist/errorMessage/src/index.css +12 -12
  127. package/dist/errorMessage/src/index.d.ts +1 -1
  128. package/dist/errorMessage/src/index.js +4 -4
  129. package/dist/helperMessage/src/HelperMessage.css +12 -12
  130. package/dist/helperMessage/src/HelperMessage.d.ts +1 -1
  131. package/dist/helperMessage/src/HelperMessage.js +4 -4
  132. package/dist/helperMessage/src/HelperMessageContext.d.ts +1 -1
  133. package/dist/helperMessage/src/HelperMessageContext.js +1 -1
  134. package/dist/helperMessage/src/index.css +12 -12
  135. package/dist/helperMessage/src/index.d.ts +1 -1
  136. package/dist/helperMessage/src/index.js +4 -4
  137. package/dist/i18n/src/index.js +2 -2
  138. package/dist/i18n/src/useLocalizedString.js +2 -2
  139. package/dist/inputs/src/InputGroup.css +111 -0
  140. package/dist/inputs/src/InputGroup.d.ts +24 -0
  141. package/dist/inputs/src/InputGroup.js +6 -0
  142. package/dist/inputs/src/InputGroupContext.d.ts +8 -0
  143. package/dist/inputs/src/InputGroupContext.js +2 -0
  144. package/dist/inputs/src/PasswordField.css +2527 -0
  145. package/dist/inputs/src/PasswordField.d.ts +33 -0
  146. package/dist/inputs/src/PasswordField.js +186 -0
  147. package/dist/inputs/src/PasswordFieldContext.d.ts +8 -0
  148. package/dist/inputs/src/PasswordFieldContext.js +2 -0
  149. package/dist/inputs/src/SearchField.css +2548 -0
  150. package/dist/inputs/src/SearchField.d.ts +42 -0
  151. package/dist/inputs/src/SearchField.js +186 -0
  152. package/dist/inputs/src/SearchFieldContext.d.ts +8 -0
  153. package/dist/inputs/src/SearchFieldContext.js +2 -0
  154. package/dist/inputs/src/TextField.css +2531 -0
  155. package/dist/inputs/src/TextField.d.ts +49 -0
  156. package/dist/inputs/src/TextField.js +79 -0
  157. package/dist/inputs/src/TextFieldContext.d.ts +8 -0
  158. package/dist/inputs/src/TextFieldContext.js +2 -0
  159. package/dist/inputs/src/index.css +2531 -0
  160. package/dist/inputs/src/index.d.ts +7 -0
  161. package/dist/inputs/src/index.js +79 -0
  162. package/dist/layout/src/Content.d.ts +17 -0
  163. package/dist/layout/src/Content.js +3 -0
  164. package/dist/layout/src/ContentContext.d.ts +10 -0
  165. package/dist/layout/src/ContentContext.js +2 -0
  166. package/dist/layout/src/Flex.js +1 -1
  167. package/dist/layout/src/Footer.d.ts +17 -0
  168. package/dist/layout/src/Footer.js +3 -0
  169. package/dist/layout/src/FooterContext.d.ts +10 -0
  170. package/dist/layout/src/FooterContext.js +2 -0
  171. package/dist/layout/src/Grid.js +2 -55
  172. package/dist/layout/src/Inline.js +3 -31
  173. package/dist/layout/src/Stack.js +3 -29
  174. package/dist/overlays/Popover/src/Popover.css +2456 -0
  175. package/dist/overlays/Popover/src/Popover.d.ts +20 -0
  176. package/dist/overlays/Popover/src/Popover.js +76 -0
  177. package/dist/overlays/Popover/src/PopoverContext.d.ts +9 -0
  178. package/dist/overlays/Popover/src/PopoverContext.js +2 -0
  179. package/dist/overlays/Popover/src/index.css +2456 -0
  180. package/dist/overlays/Popover/src/index.d.ts +6 -0
  181. package/dist/overlays/Popover/src/index.js +76 -0
  182. package/dist/radio/src/Radio.css +31 -31
  183. package/dist/radio/src/Radio.js +5 -5
  184. package/dist/radio/src/RadioContext.js +1 -1
  185. package/dist/radio/src/RadioField.css +16 -16
  186. package/dist/radio/src/RadioField.js +5 -4
  187. package/dist/radio/src/RadioFieldContext.js +1 -1
  188. package/dist/radio/src/RadioGroup.css +137 -137
  189. package/dist/radio/src/RadioGroup.js +4 -4
  190. package/dist/radio/src/RadioGroupContext.js +1 -1
  191. package/dist/radio/src/RadioList.js +1 -1
  192. package/dist/radio/src/RadioListContext.js +1 -1
  193. package/dist/radio/src/index.css +71 -71
  194. package/dist/radio/src/index.js +9 -9
  195. package/dist/switch/src/Switch.css +26 -26
  196. package/dist/switch/src/Switch.js +5 -5
  197. package/dist/switch/src/SwitchContext.js +1 -1
  198. package/dist/switch/src/SwitchField.css +16 -16
  199. package/dist/switch/src/SwitchField.js +3 -3
  200. package/dist/switch/src/SwitchFieldContext.js +1 -1
  201. package/dist/switch/src/index.css +32 -32
  202. package/dist/switch/src/index.js +6 -6
  203. package/dist/tag/src/Tag.css +2380 -0
  204. package/dist/tag/src/Tag.d.ts +28 -0
  205. package/dist/tag/src/Tag.js +74 -0
  206. package/dist/tag/src/TagContext.d.ts +8 -0
  207. package/dist/tag/src/TagContext.js +2 -0
  208. package/dist/tag/src/TagGroup.css +239 -0
  209. package/dist/tag/src/TagGroup.d.ts +24 -0
  210. package/dist/tag/src/TagGroup.js +10 -0
  211. package/dist/tag/src/TagGroupContext.d.ts +8 -0
  212. package/dist/tag/src/TagGroupContext.js +2 -0
  213. package/dist/tag/src/TagList.d.ts +15 -0
  214. package/dist/tag/src/TagList.js +4 -0
  215. package/dist/tag/src/TagListContext.d.ts +8 -0
  216. package/dist/tag/src/TagListContext.js +2 -0
  217. package/dist/tag/src/index.css +2380 -0
  218. package/dist/tag/src/index.d.ts +9 -0
  219. package/dist/tag/src/index.js +74 -0
  220. package/dist/typography/Heading/src/Heading.css +2380 -0
  221. package/dist/typography/Heading/src/Heading.d.ts +57 -0
  222. package/dist/typography/Heading/src/Heading.js +74 -0
  223. package/dist/typography/Heading/src/HeadingContext.d.ts +8 -0
  224. package/dist/typography/Heading/src/HeadingContext.js +2 -0
  225. package/dist/typography/Heading/src/index.css +2380 -0
  226. package/dist/typography/Heading/src/index.d.ts +5 -0
  227. package/dist/typography/Heading/src/index.js +74 -0
  228. package/dist/{Label → typography/Label}/src/Label.css +14 -14
  229. package/dist/{Label → typography/Label}/src/Label.d.ts +2 -3
  230. package/dist/typography/Label/src/Label.js +4 -0
  231. package/dist/typography/Label/src/LabelContext.js +2 -0
  232. package/dist/{Label → typography/Label}/src/index.css +14 -14
  233. package/dist/{Label → typography/Label}/src/index.d.ts +1 -1
  234. package/dist/typography/Label/src/index.js +4 -0
  235. package/dist/typography/OverlineText/src/OverlineText.css +42 -0
  236. package/dist/typography/OverlineText/src/OverlineText.d.ts +15 -0
  237. package/dist/typography/OverlineText/src/OverlineText.js +4 -0
  238. package/dist/typography/OverlineText/src/OverlineTextContext.d.ts +8 -0
  239. package/dist/typography/OverlineText/src/OverlineTextContext.js +2 -0
  240. package/dist/typography/OverlineText/src/index.css +42 -0
  241. package/dist/typography/OverlineText/src/index.d.ts +5 -0
  242. package/dist/typography/OverlineText/src/index.js +4 -0
  243. package/dist/{Text → typography/Text}/src/Text.css +10 -10
  244. package/dist/typography/Text/src/Text.js +6 -0
  245. package/dist/typography/Text/src/TextContext.js +2 -0
  246. package/dist/{Text → typography/Text}/src/index.css +10 -10
  247. package/dist/typography/Text/src/index.js +6 -0
  248. package/dist/utils/src/ClearSlots.js +1 -1
  249. package/dist/utils/src/SlotProvider.js +1 -1
  250. package/dist/utils/src/assertion.d.ts +15 -0
  251. package/dist/utils/src/assertion.js +2 -0
  252. package/dist/utils/src/composeClassnameRenderProps.js +1 -1
  253. package/dist/utils/src/cssModule.js +1 -1
  254. package/dist/utils/src/index.d.ts +1 -0
  255. package/dist/utils/src/index.js +3 -2
  256. package/dist/utils/src/isTextOnlyChildren.js +1 -1
  257. package/dist/utils/src/useRenderProps.js +1 -1
  258. package/dist/utils/src/useSlot.js +1 -1
  259. package/package.json +13 -12
  260. package/dist/Label/src/Label.js +0 -4
  261. package/dist/Label/src/LabelContext.js +0 -2
  262. package/dist/Label/src/index.js +0 -4
  263. package/dist/Text/src/Text.js +0 -6
  264. package/dist/Text/src/TextContext.js +0 -2
  265. package/dist/Text/src/index.js +0 -6
  266. /package/dist/{Label → typography/Label}/src/LabelContext.d.ts +0 -0
  267. /package/dist/{Text → typography/Text}/src/Text.d.ts +0 -0
  268. /package/dist/{Text → typography/Text}/src/TextContext.d.ts +0 -0
  269. /package/dist/{Text → typography/Text}/src/index.d.ts +0 -0
@@ -0,0 +1,2531 @@
1
+ /* css-module:/home/runner/work/wl-hopper/wl-hopper/packages/components/src/inputs/src/InputGroup.module.css/#css-module-data */
2
+ .InputGroup-module__hop-InputGroup___EJcIH {
3
+ --hop-InputGroup-background: var(--hop-neutral-surface);
4
+ --hop-InputGroup-border-color: var(--hop-neutral-border);
5
+ --hop-InputGroup-border-width: 0.0625rem;
6
+ --hop-InputGroup-gap: var(--hop-space-inline-sm);
7
+ --hop-InputGroup-sm-block-size: 2rem;
8
+ --hop-InputGroup-md-block-size: 2.5rem;
9
+ --hop-InputGroup-border-radius: var(--hop-shape-rounded-md);
10
+ --hop-InputGroup-padding-inline: var(--hop-space-inset-md);
11
+ --hop-InputGroup-border-color-hover: var(--hop-neutral-border-hover);
12
+ --hop-InputGroup-border-color-focus: var(--hop-primary-border-focus);
13
+ --hop-InputGroup-background-hover: var(--hop-neutral-surface-hover);
14
+ --hop-InputGroup-border-color-invalid: var(--hop-danger-border-strong);
15
+ --hop-InputGroup-input-color: var(--hop-neutral-text);
16
+ --hop-InputGroup-input-sm-font-family: var(--hop-body-sm-font-family);
17
+ --hop-InputGroup-input-sm-font-size: var(--hop-body-sm-font-size);
18
+ --hop-InputGroup-input-sm-font-weight: var(--hop-body-sm-font-weight);
19
+ --hop-InputGroup-input-sm-line-height: var(--hop-body-sm-line-height);
20
+ --hop-InputGroup-input-sm-block-size: 1.5rem;
21
+ --hop-InputGroup-input-md-font-family: var(--hop-body-md-font-family);
22
+ --hop-InputGroup-input-md-font-size: var(--hop-body-md-font-size);
23
+ --hop-InputGroup-input-md-font-weight: var(--hop-body-md-font-weight);
24
+ --hop-InputGroup-input-md-line-height: var(--hop-body-md-line-height);
25
+ --hop-InputGroup-input-md-block-size: 2rem;
26
+ --hop-InputGroup-background-disabled: var(--hop-neutral-surface-disabled);
27
+ --hop-InputGroup-border-color-disabled: var(--hop-neutral-border-disabled);
28
+ --hop-InputGroup-placeholder-font-family: inherit;
29
+ --hop-InputGroup-placeholder-font-size: inherit;
30
+ --hop-InputGroup-placeholder-font-weight: inherit;
31
+ --hop-InputGroup-placeholder-line-height: inherit;
32
+ --hop-InputGroup-placeholder-color: var(--hop-neutral-text-weakest);
33
+ --hop-InputGroup-placeholder-color-disabled: var(--hop-neutral-text-disabled);
34
+ --inline-size: fit-content;
35
+ --border: var(--hop-InputGroup-border-width) solid var(--hop-InputGroup-border-color);
36
+ --background: var(--hop-InputGroup-background);
37
+ --block-size: var(--hop-InputGroup-md-block-size);
38
+ position: relative;
39
+ display: inline-flex;
40
+ gap: var(--hop-InputGroup-gap);
41
+ align-items: center;
42
+ box-sizing: border-box;
43
+ inline-size: var(--inline-size);
44
+ block-size: var(--block-size);
45
+ padding-inline: var(--hop-InputGroup-padding-inline);
46
+ background: var(--background);
47
+ border: var(--border);
48
+ border-radius: var(--hop-InputGroup-border-radius);
49
+ }
50
+ .InputGroup-module__hop-InputGroup--fluid___ixFk2 {
51
+ --inline-size: 100% ;
52
+ }
53
+ .InputGroup-module__hop-InputGroup--sm___KN-DI {
54
+ --block-size: var(--hop-InputGroup-sm-block-size);
55
+ }
56
+ .InputGroup-module__hop-InputGroup___EJcIH[data-hovered] {
57
+ --background: var(--hop-InputGroup-background-hover);
58
+ --border: var(--hop-InputGroup-border-width) solid var(--hop-InputGroup-border-color-hover) ;
59
+ }
60
+ .InputGroup-module__hop-InputGroup___EJcIH[data-focus-within] {
61
+ --border: var(--hop-InputGroup-border-width) solid var(--hop-InputGroup-border-color-focus) ;
62
+ }
63
+ .InputGroup-module__hop-InputGroup___EJcIH[data-invalid] {
64
+ --border: var(--hop-InputGroup-border-width) solid var(--hop-InputGroup-border-color-invalid) ;
65
+ }
66
+ .InputGroup-module__hop-InputGroup___EJcIH[data-disabled] {
67
+ --background: var(--hop-InputGroup-background-disabled);
68
+ --border: 0.0625rem solid var(--hop-InputGroup-border-color-disabled) ;
69
+ }
70
+ .InputGroup-module__hop-InputGroup__input___Uvn7W {
71
+ --input-font-family: var(--hop-InputGroup-input-md-font-family);
72
+ --input-font-size: var(--hop-InputGroup-input-md-font-size);
73
+ --input-font-weight: var(--hop-InputGroup-input-md-font-weight);
74
+ --input-line-height: var(--hop-InputGroup-input-md-line-height);
75
+ --input-block-size: var(--hop-InputGroup-input-md-block-size);
76
+ --input-inline-size: initial;
77
+ --input-placeholder-color: var(--hop-InputGroup-placeholder-color);
78
+ flex: 1 1 auto;
79
+ inline-size: var(--input-inline-size);
80
+ min-inline-size: 0;
81
+ block-size: var(--input-block-size);
82
+ padding: 0;
83
+ font-family: var(--input-font-family);
84
+ font-size: var(--input-font-size);
85
+ font-weight: var(--input-font-weight);
86
+ line-height: var(--input-line-height);
87
+ color: var(--hop-InputGroup-input-color);
88
+ background: transparent;
89
+ border: none;
90
+ outline: none;
91
+ }
92
+ .InputGroup-module__hop-InputGroup--fluid___ixFk2 .InputGroup-module__hop-InputGroup__input___Uvn7W {
93
+ --input-inline-size: 100%;
94
+ }
95
+ .InputGroup-module__hop-InputGroup--sm___KN-DI .InputGroup-module__hop-InputGroup__input___Uvn7W {
96
+ --input-font-family: var(--hop-InputGroup-input-sm-font-family);
97
+ --input-font-size: var(--hop-InputGroup-input-sm-font-size);
98
+ --input-font-weight: var(--hop-InputGroup-input-sm-font-weight);
99
+ --input-line-height: var(--hop-InputGroup-input-sm-line-height);
100
+ --input-block-size: var(--hop-InputGroup-input-sm-block-size);
101
+ }
102
+ .InputGroup-module__hop-InputGroup__input___Uvn7W::placeholder {
103
+ font-family: var(--hop-InputGroup-placeholder-font-family);
104
+ font-size: var(--hop-InputGroup-placeholder-font-size);
105
+ font-weight: var(--hop-InputGroup-placeholder-font-weight);
106
+ line-height: var(--hop-InputGroup-placeholder-line-height);
107
+ color: var(--input-placeholder-color);
108
+ }
109
+ .InputGroup-module__hop-InputGroup__input___Uvn7W[data-disabled]::placeholder {
110
+ --input-placeholder-color: var(--hop-InputGroup-placeholder-color-disabled);
111
+ }
112
+
113
+ /* css-module:/home/runner/work/wl-hopper/wl-hopper/packages/components/src/IconList/src/IconList.module.css/#css-module-data */
114
+ .IconList-module__hop-IconList___bEeEm {
115
+ --hop-IconList-gap: var(--hop-space-inline-xs);
116
+ display: flex;
117
+ flex-wrap: wrap;
118
+ gap: var(--hop-IconList-gap);
119
+ box-sizing: border-box;
120
+ }
121
+
122
+ /* css-module:/home/runner/work/wl-hopper/wl-hopper/packages/components/src/typography/Label/src/Label.module.css/#css-module-data */
123
+ .Label-module__hop-Label___tg1n7 {
124
+ --hop-Label-xs-font-size: var(--hop-body-xs-font-size);
125
+ --hop-Label-xs-font-family: var(--hop-body-xs-font-family);
126
+ --hop-Label-xs-font-weight: var(--hop-body-xs-font-weight);
127
+ --hop-Label-xs-line-height: var(--hop-body-xs-line-height);
128
+ --hop-Label-sm-font-size: var(--hop-body-sm-font-size);
129
+ --hop-Label-sm-font-family: var(--hop-body-sm-font-family);
130
+ --hop-Label-sm-font-weight: var(--hop-body-sm-font-weight);
131
+ --hop-Label-sm-line-height: var(--hop-body-sm-line-height);
132
+ --hop-Label-md-font-size: var(--hop-body-md-font-size);
133
+ --hop-Label-md-font-family: var(--hop-body-md-font-family);
134
+ --hop-Label-md-font-weight: var(--hop-body-md-font-weight);
135
+ --hop-Label-md-line-height: var(--hop-body-md-line-height);
136
+ --hop-Label-lg-font-size: var(--hop-body-lg-font-size);
137
+ --hop-Label-lg-font-family: var(--hop-body-lg-font-family);
138
+ --hop-Label-lg-font-weight: var(--hop-body-lg-font-weight);
139
+ --hop-Label-lg-line-height: var(--hop-body-lg-line-height);
140
+ --hop-Label-xl-font-size: var(--hop-body-xl-font-size);
141
+ --hop-Label-xl-font-family: var(--hop-body-xl-font-family);
142
+ --hop-Label-xl-font-weight: var(--hop-body-xl-font-weight);
143
+ --hop-Label-xl-line-height: var(--hop-body-xl-line-height);
144
+ --hop-Label-2xl-font-size: var(--hop-body-2xl-font-size);
145
+ --hop-Label-2xl-font-family: var(--hop-body-2xl-font-family);
146
+ --hop-Label-2xl-font-weight: var(--hop-body-2xl-font-weight);
147
+ --hop-Label-2xl-line-height: var(--hop-body-2xl-line-height);
148
+ --hop-Label-inherit-size-font-size: inherit;
149
+ --hop-Label-inherit-size-font-family: inherit;
150
+ --hop-Label-inherit-size-font-weight: inherit;
151
+ --hop-Label-inherit-size-line-height: inherit;
152
+ }
153
+ :where(.Label-module__hop-Label___tg1n7) {
154
+ font-family: var(--font-family);
155
+ font-size: var(--font-size);
156
+ font-weight: var(--font-weight);
157
+ line-height: var(--line-height);
158
+ }
159
+ :where(.Label-module__hop-Label--xs___4pWwc) {
160
+ --font-size: var(--hop-Label-xs-font-size);
161
+ --font-family: var(--hop-Label-xs-font-family);
162
+ --font-weight: var(--hop-Label-xs-font-weight);
163
+ --line-height: var(--hop-Label-xs-line-height);
164
+ }
165
+ :where(.Label-module__hop-Label--sm___lRRVW) {
166
+ --font-size: var(--hop-Label-sm-font-size);
167
+ --font-family: var(--hop-Label-sm-font-family);
168
+ --font-weight: var(--hop-Label-sm-font-weight);
169
+ --line-height: var(--hop-Label-sm-line-height);
170
+ }
171
+ :where(.Label-module__hop-Label--md___2oL46) {
172
+ --font-size: var(--hop-Label-md-font-size);
173
+ --font-family: var(--hop-Label-md-font-family);
174
+ --font-weight: var(--hop-Label-md-font-weight);
175
+ --line-height: var(--hop-Label-md-line-height);
176
+ }
177
+ :where(.Label-module__hop-Label--lg___GE3zR) {
178
+ --font-size: var(--hop-Label-lg-font-size);
179
+ --font-family: var(--hop-Label-lg-font-family);
180
+ --font-weight: var(--hop-Label-lg-font-weight);
181
+ --line-height: var(--hop-Label-lg-line-height);
182
+ }
183
+ :where(.Label-module__hop-Label--xl___8-86h) {
184
+ --font-size: var(--hop-Label-xl-font-size);
185
+ --font-family: var(--hop-Label-xl-font-family);
186
+ --font-weight: var(--hop-Label-xl-font-weight);
187
+ --line-height: var(--hop-Label-xl-line-height);
188
+ }
189
+ :where(.Label-module__hop-Label--2xl___HSwTt) {
190
+ --font-size: var(--hop-Label-2xl-font-size);
191
+ --font-family: var(--hop-Label-2xl-font-family);
192
+ --font-weight: var(--hop-Label-2xl-font-weight);
193
+ --line-height: var(--hop-Label-2xl-line-height);
194
+ }
195
+ :where(.Label-module__hop-Label--inherit___h8Ebb) {
196
+ --font-size: var(--hop-Label-inherit-size-font-size);
197
+ --font-family: var(--hop-Label-inherit-size-font-family);
198
+ --font-weight: var(--hop-Label-inherit-size-font-weight);
199
+ --line-height: var(--hop-Label-inherit-size-line-height);
200
+ }
201
+
202
+ /* css-module:/home/runner/work/wl-hopper/wl-hopper/packages/components/src/Spinner/src/Spinner.module.css/#css-module-data */
203
+ @keyframes Spinner-module__spin___AHP-g {
204
+ 0% {
205
+ transform: rotate(0deg);
206
+ }
207
+ 100% {
208
+ transform: rotate(360deg);
209
+ }
210
+ }
211
+ .Spinner-module__hop-Spinner___g8YMK {
212
+ --hop-Spinner-border-radius: var(--hop-shape-circle);
213
+ --hop-Spinner-sm-wheel-size: 1rem;
214
+ --hop-Spinner-md-wheel-size: 1.25rem;
215
+ --hop-Spinner-lg-wheel-size: 1.5rem;
216
+ --hop-Spinner-track-width: 0.125rem;
217
+ --hop-Spinner-track-opacity: 0.2;
218
+ --hop-Spinner-track-border: var(--hop-Spinner-track-width) solid currentcolor;
219
+ --hop-Spinner-fill-animation: Spinner-module__spin___AHP-g .8s infinite linear;
220
+ --hop-Spinner-fill-animation-reduced-motion-duration: 2s;
221
+ --hop-Spinner-fill-border: var(--hop-Spinner-track-width) solid transparent;
222
+ --hop-Spinner-fill-border-inline-start: var(--hop-Spinner-track-width) solid currentcolor;
223
+ --hop-Spinner-label-margin-inline-start: var(--hop-space-inline-sm);
224
+ display: grid;
225
+ grid-template-areas: "spinner label";
226
+ grid-template-columns: min-content auto;
227
+ align-items: center;
228
+ box-sizing: border-box;
229
+ }
230
+ .Spinner-module__hop-Spinner--sm___ENKbf {
231
+ --width: var(--hop-Spinner-sm-wheel-size);
232
+ --height: var(--hop-Spinner-sm-wheel-size);
233
+ }
234
+ .Spinner-module__hop-Spinner--md___dU1Hu {
235
+ --width: var(--hop-Spinner-md-wheel-size);
236
+ --height: var(--hop-Spinner-md-wheel-size);
237
+ }
238
+ .Spinner-module__hop-Spinner--lg___e6crn {
239
+ --width: var(--hop-Spinner-lg-wheel-size);
240
+ --height: var(--hop-Spinner-lg-wheel-size);
241
+ }
242
+ .Spinner-module__hop-Spinner__track___aQB8a {
243
+ grid-area: spinner;
244
+ box-sizing: border-box;
245
+ inline-size: var(--width, var(--hop-Spinner-md-wheel-size));
246
+ block-size: var(--height, var(--hop-Spinner-md-wheel-size));
247
+ opacity: var(--hop-Spinner-track-opacity);
248
+ border: var(--hop-Spinner-track-border);
249
+ border-radius: var(--hop-Spinner-border-radius);
250
+ }
251
+ .Spinner-module__hop-Spinner__fill___PUZTX {
252
+ grid-area: spinner;
253
+ box-sizing: border-box;
254
+ inline-size: var(--width, var(--hop-Spinner-md-wheel-size));
255
+ block-size: var(--height, var(--hop-Spinner-md-wheel-size));
256
+ border: var(--hop-Spinner-fill-border);
257
+ border-inline-start: var(--hop-Spinner-fill-border-inline-start);
258
+ border-radius: var(--hop-Spinner-border-radius);
259
+ animation: var(--hop-Spinner-fill-animation);
260
+ }
261
+ @media (prefers-reduced-motion: reduce) {
262
+ .Spinner-module__hop-Spinner__fill___PUZTX {
263
+ animation-duration: var(--hop-Spinner-fill-animation-reduced-motion-duration);
264
+ }
265
+ }
266
+ .Spinner-module__hop-Spinner__label___j4f6H {
267
+ grid-area: label;
268
+ margin-inline-start: var(--hop-Spinner-label-margin-inline-start);
269
+ }
270
+
271
+ /* css-module:/home/runner/work/wl-hopper/wl-hopper/packages/components/src/typography/Text/src/Text.module.css/#css-module-data */
272
+ .Text-module__hop-Text___M-T6r {
273
+ --hop-Text-xs-font-size: var(--hop-body-xs-font-size);
274
+ --hop-Text-xs-font-family: var(--hop-body-xs-font-family);
275
+ --hop-Text-xs-font-weight: var(--hop-body-xs-font-weight);
276
+ --hop-Text-xs-line-height: var(--hop-body-xs-line-height);
277
+ --hop-Text-sm-font-size: var(--hop-body-sm-font-size);
278
+ --hop-Text-sm-font-family: var(--hop-body-sm-font-family);
279
+ --hop-Text-sm-font-weight: var(--hop-body-sm-font-weight);
280
+ --hop-Text-sm-line-height: var(--hop-body-sm-line-height);
281
+ --hop-Text-md-font-size: var(--hop-body-md-font-size);
282
+ --hop-Text-md-font-family: var(--hop-body-md-font-family);
283
+ --hop-Text-md-font-weight: var(--hop-body-md-font-weight);
284
+ --hop-Text-md-line-height: var(--hop-body-md-line-height);
285
+ --hop-Text-lg-font-size: var(--hop-body-lg-font-size);
286
+ --hop-Text-lg-font-family: var(--hop-body-lg-font-family);
287
+ --hop-Text-lg-font-weight: var(--hop-body-lg-font-weight);
288
+ --hop-Text-lg-line-height: var(--hop-body-lg-line-height);
289
+ --hop-Text-xl-font-size: var(--hop-body-xl-font-size);
290
+ --hop-Text-xl-font-family: var(--hop-body-xl-font-family);
291
+ --hop-Text-xl-font-weight: var(--hop-body-xl-font-weight);
292
+ --hop-Text-xl-line-height: var(--hop-body-xl-line-height);
293
+ --hop-Text-2xl-font-size: var(--hop-body-2xl-font-size);
294
+ --hop-Text-2xl-font-family: var(--hop-body-2xl-font-family);
295
+ --hop-Text-2xl-font-weight: var(--hop-body-2xl-font-weight);
296
+ --hop-Text-2xl-line-height: var(--hop-body-2xl-line-height);
297
+ --hop-Text-inherit-size-font-size: inherit;
298
+ --hop-Text-inherit-size-font-family: inherit;
299
+ --hop-Text-inherit-size-font-weight: inherit;
300
+ --hop-Text-inherit-size-line-height: inherit;
301
+ }
302
+ :where(.Text-module__hop-Text___M-T6r) {
303
+ font-family: var(--font-family);
304
+ font-size: var(--font-size);
305
+ font-weight: var(--font-weight);
306
+ line-height: var(--line-height);
307
+ }
308
+ :where(.Text-module__hop-Text--xs___4XQLX) {
309
+ --font-size: var(--hop-Text-xs-font-size);
310
+ --font-family: var(--hop-Text-xs-font-family);
311
+ --font-weight: var(--hop-Text-xs-font-weight);
312
+ --line-height: var(--hop-Text-xs-line-height);
313
+ }
314
+ :where(.Text-module__hop-Text--sm___dM76a) {
315
+ --font-size: var(--hop-Text-sm-font-size);
316
+ --font-family: var(--hop-Text-sm-font-family);
317
+ --font-weight: var(--hop-Text-sm-font-weight);
318
+ --line-height: var(--hop-Text-sm-line-height);
319
+ }
320
+ :where(.Text-module__hop-Text--md___M60JS) {
321
+ --font-size: var(--hop-Text-md-font-size);
322
+ --font-family: var(--hop-Text-md-font-family);
323
+ --font-weight: var(--hop-Text-md-font-weight);
324
+ --line-height: var(--hop-Text-md-line-height);
325
+ }
326
+ :where(.Text-module__hop-Text--lg___5mCtN) {
327
+ --font-size: var(--hop-Text-lg-font-size);
328
+ --font-family: var(--hop-Text-lg-font-family);
329
+ --font-weight: var(--hop-Text-lg-font-weight);
330
+ --line-height: var(--hop-Text-lg-line-height);
331
+ }
332
+ :where(.Text-module__hop-Text--xl___bi1Vo) {
333
+ --font-size: var(--hop-Text-xl-font-size);
334
+ --font-family: var(--hop-Text-xl-font-family);
335
+ --font-weight: var(--hop-Text-xl-font-weight);
336
+ --line-height: var(--hop-Text-xl-line-height);
337
+ }
338
+ :where(.Text-module__hop-Text--2xl___5SCg1) {
339
+ --font-size: var(--hop-Text-2xl-font-size);
340
+ --font-family: var(--hop-Text-2xl-font-family);
341
+ --font-weight: var(--hop-Text-2xl-font-weight);
342
+ --line-height: var(--hop-Text-2xl-line-height);
343
+ }
344
+ :where(.Text-module__hop-Text--inherit___X6rIb) {
345
+ --font-size: var(--hop-Text-inherit-size-font-size);
346
+ --font-family: var(--hop-Text-inherit-size-font-family);
347
+ --font-weight: var(--hop-Text-inherit-size-font-weight);
348
+ --line-height: var(--hop-Text-inherit-size-line-height);
349
+ }
350
+
351
+ /* css-module:/home/runner/work/wl-hopper/wl-hopper/packages/components/src/buttons/src/Button.module.css/#css-module-data */
352
+ .Button-module__hop-Button___FaloC {
353
+ --hop-Button-border-radius: var(--hop-shape-rounded-md);
354
+ --hop-Button-focus-ring-color: var(--hop-primary-border-focus);
355
+ --hop-Button-icon-only-padding: 0;
356
+ --hop-Button-sm-height: 2rem;
357
+ --hop-Button-md-height: 2.5rem;
358
+ --hop-Button-primary-color: var(--hop-primary-text-strong);
359
+ --hop-Button-primary-color-hover: var(--hop-primary-text-strong-hover);
360
+ --hop-Button-primary-color-pressed: var(--hop-primary-text-strong);
361
+ --hop-Button-primary-color-disabled: var(--hop-neutral-text-disabled);
362
+ --hop-Button-primary-background-color: var(--hop-primary-surface-strong);
363
+ --hop-Button-primary-background-color-hover: var(--hop-primary-surface-strong-hover);
364
+ --hop-Button-primary-background-color-pressed: var(--hop-primary-surface-strong-press);
365
+ --hop-Button-primary-background-color-disabled: var(--hop-neutral-surface-disabled);
366
+ --hop-Button-primary-border: 0.0625rem solid var(--hop-Button-primary-background-color);
367
+ --hop-Button-primary-border-hover: 0.0625rem solid var(--hop-Button-primary-background-color-hover);
368
+ --hop-Button-primary-border-pressed: 0.0625rem solid var(--hop-Button-primary-background-color-pressed);
369
+ --hop-Button-primary-border-disabled: 0.0625rem solid var(--hop-Button-primary-background-color-disabled);
370
+ --hop-Button-primary-spinner-color: var(--hop-primary-icon-strong);
371
+ --hop-Button-primary-sm-padding-x: var(--hop-space-inset-sm);
372
+ --hop-Button-primary-sm-padding-y: 0;
373
+ --hop-Button-primary-md-padding-x: var(--hop-space-inset-md);
374
+ --hop-Button-primary-md-padding-y: 0;
375
+ --hop-Button-secondary-color: var(--hop-neutral-text);
376
+ --hop-Button-secondary-color-hover: var(--hop-neutral-text-hover);
377
+ --hop-Button-secondary-color-pressed: var(--hop-neutral-text-press);
378
+ --hop-Button-secondary-color-disabled: var(--hop-neutral-text-disabled);
379
+ --hop-Button-secondary-background-color: var(--hop-neutral-surface);
380
+ --hop-Button-secondary-background-color-hover: var(--hop-neutral-surface-hover);
381
+ --hop-Button-secondary-background-color-pressed: var(--hop-neutral-surface-press);
382
+ --hop-Button-secondary-background-color-disabled: var(--hop-neutral-surface-disabled);
383
+ --hop-Button-secondary-border: 0.0625rem solid var(--hop-neutral-border-strong);
384
+ --hop-Button-secondary-border-hover: 0.0625rem solid var(--hop-neutral-border-strong-hover);
385
+ --hop-Button-secondary-border-pressed: 0.0625rem solid var(--hop-neutral-border-strong);
386
+ --hop-Button-secondary-border-disabled: 0.0625rem solid var(--hop-Button-secondary-background-color-disabled);
387
+ --hop-Button-secondary-spinner-color: var(--hop-neutral-icon);
388
+ --hop-Button-secondary-sm-padding-x: var(--hop-space-inset-sm);
389
+ --hop-Button-secondary-sm-padding-y: 0;
390
+ --hop-Button-secondary-md-padding-x: var(--hop-space-inset-md);
391
+ --hop-Button-secondary-md-padding-y: 0;
392
+ --hop-Button-upsell-color: var(--hop-upsell-text);
393
+ --hop-Button-upsell-color-hover: var(--hop-upsell-text-hover);
394
+ --hop-Button-upsell-color-pressed: var(--hop-upsell-text-press);
395
+ --hop-Button-upsell-color-disabled: var(--hop-neutral-text-disabled);
396
+ --hop-Button-upsell-background-color: var(--hop-upsell-surface);
397
+ --hop-Button-upsell-background-color-hover: var(--hop-upsell-surface-hover);
398
+ --hop-Button-upsell-background-color-pressed: var(--hop-upsell-surface-press);
399
+ --hop-Button-upsell-background-color-disabled: var(--hop-neutral-surface-disabled);
400
+ --hop-Button-upsell-border: 0.0625rem solid var(--hop-Button-upsell-background-color);
401
+ --hop-Button-upsell-border-hover: 0.0625rem solid var(--hop-Button-upsell-background-color-hover);
402
+ --hop-Button-upsell-border-pressed: 0.0625rem solid var(--hop-Button-upsell-background-color-pressed);
403
+ --hop-Button-upsell-border-disabled: 0.0625rem solid var(--hop-Button-upsell-background-color-disabled);
404
+ --hop-Button-upsell-spinner-color: var(--hop-upsell-icon);
405
+ --hop-Button-upsell-sm-padding-x: var(--hop-space-inset-sm);
406
+ --hop-Button-upsell-sm-padding-y: 0;
407
+ --hop-Button-upsell-md-padding-x: var(--hop-space-inset-md);
408
+ --hop-Button-upsell-md-padding-y: 0;
409
+ --hop-Button-danger-color: var(--hop-danger-text-strong);
410
+ --hop-Button-danger-color-hover: var(--hop-danger-text-strong-hover);
411
+ --hop-Button-danger-color-pressed: var(--hop-danger-text-strong-hover);
412
+ --hop-Button-danger-color-disabled: var(--hop-neutral-text-disabled);
413
+ --hop-Button-danger-background-color: var(--hop-danger-surface-strong);
414
+ --hop-Button-danger-background-color-hover: var(--hop-danger-surface-strong-hover);
415
+ --hop-Button-danger-background-color-pressed: var(--hop-danger-surface-press);
416
+ --hop-Button-danger-background-color-disabled: var(--hop-neutral-surface-disabled);
417
+ --hop-Button-danger-border: 0.0625rem solid var(--hop-Button-danger-background-color);
418
+ --hop-Button-danger-border-hover: 0.0625rem solid var(--hop-Button-danger-background-color-hover);
419
+ --hop-Button-danger-border-pressed: 0.0625rem solid var(--hop-Button-danger-background-color-pressed);
420
+ --hop-Button-danger-border-disabled: 0.0625rem solid var(--hop-Button-danger-background-color-disabled);
421
+ --hop-Button-danger-spinner-color: var(--hop-primary-icon-strong);
422
+ --hop-Button-danger-sm-padding-x: var(--hop-space-inset-sm);
423
+ --hop-Button-danger-sm-padding-y: 0;
424
+ --hop-Button-danger-md-padding-x: var(--hop-space-inset-md);
425
+ --hop-Button-danger-md-padding-y: 0;
426
+ --hop-Button-ghost-primary-color: var(--hop-primary-text);
427
+ --hop-Button-ghost-primary-color-hover: var(--hop-primary-text-hover);
428
+ --hop-Button-ghost-primary-color-pressed: var(--hop-primary-text-press);
429
+ --hop-Button-ghost-primary-color-disabled: var(--hop-neutral-text-disabled);
430
+ --hop-Button-ghost-primary-background-color: transparent;
431
+ --hop-Button-ghost-primary-background-color-hover: var(--hop-neutral-surface-hover);
432
+ --hop-Button-ghost-primary-background-color-pressed: var(--hop-primary-surface-weak-press);
433
+ --hop-Button-ghost-primary-background-color-disabled: transparent;
434
+ --hop-Button-ghost-primary-border: 0.0625rem solid var(--hop-Button-ghost-primary-background-color);
435
+ --hop-Button-ghost-primary-border-hover: 0.0625rem solid var(--hop-Button-ghost-primary-background-color-hover);
436
+ --hop-Button-ghost-primary-border-pressed: 0.0625rem solid var(--hop-Button-ghost-primary-background-color-pressed);
437
+ --hop-Button-ghost-primary-border-disabled: 0.0625rem solid var(--hop-Button-ghost-primary-background-color-disabled);
438
+ --hop-Button-ghost-primary-spinner-color: var(--hop-neutral-icon);
439
+ --hop-Button-ghost-primary-sm-padding-x: var(--hop-space-inset-xs);
440
+ --hop-Button-ghost-primary-sm-padding-y: 0;
441
+ --hop-Button-ghost-primary-md-padding-x: var(--hop-space-inset-sm);
442
+ --hop-Button-ghost-primary-md-padding-y: 0;
443
+ --hop-Button-ghost-secondary-color: var(--hop-neutral-text);
444
+ --hop-Button-ghost-secondary-color-hover: var(--hop-neutral-text-hover);
445
+ --hop-Button-ghost-secondary-color-pressed: var(--hop-neutral-text-press);
446
+ --hop-Button-ghost-secondary-color-disabled: var(--hop-neutral-text-disabled);
447
+ --hop-Button-ghost-secondary-background-color: transparent;
448
+ --hop-Button-ghost-secondary-background-color-hover: var(--hop-neutral-surface-hover);
449
+ --hop-Button-ghost-secondary-background-color-pressed: var(--hop-neutral-surface-press);
450
+ --hop-Button-ghost-secondary-background-color-disabled: transparent;
451
+ --hop-Button-ghost-secondary-border: 0.0625rem solid var(--hop-Button-ghost-secondary-background-color);
452
+ --hop-Button-ghost-secondary-border-hover: 0.0625rem solid var(--hop-Button-ghost-secondary-background-color-hover);
453
+ --hop-Button-ghost-secondary-border-pressed: 0.0625rem solid var(--hop-Button-ghost-secondary-background-color-pressed);
454
+ --hop-Button-ghost-secondary-border-disabled: 0.0625rem solid var(--hop-Button-ghost-secondary-background-color-disabled);
455
+ --hop-Button-ghost-secondary-spinner-color: var(--hop-neutral-icon);
456
+ --hop-Button-ghost-secondary-sm-padding-x: var(--hop-space-inset-xs);
457
+ --hop-Button-ghost-secondary-sm-padding-y: 0;
458
+ --hop-Button-ghost-secondary-md-padding-x: var(--hop-space-inset-sm);
459
+ --hop-Button-ghost-secondary-md-padding-y: 0;
460
+ --hop-Button-ghost-danger-color: var(--hop-danger-text-weak);
461
+ --hop-Button-ghost-danger-color-hover: var(--hop-danger-text-hover);
462
+ --hop-Button-ghost-danger-color-pressed: var(--hop-danger-text-press);
463
+ --hop-Button-ghost-danger-color-disabled: var(--hop-neutral-text-disabled);
464
+ --hop-Button-ghost-danger-background-color: transparent;
465
+ --hop-Button-ghost-danger-background-color-hover: var(--hop-neutral-surface-hover);
466
+ --hop-Button-ghost-danger-background-color-pressed: var(--hop-danger-surface-weak-press);
467
+ --hop-Button-ghost-danger-background-color-disabled: transparent;
468
+ --hop-Button-ghost-danger-border: 0.0625rem solid var(--hop-Button-ghost-danger-background-color);
469
+ --hop-Button-ghost-danger-border-hover: 0.0625rem solid var(--hop-Button-ghost-danger-background-color-hover);
470
+ --hop-Button-ghost-danger-border-pressed: 0.0625rem solid var(--hop-Button-ghost-danger-background-color-pressed);
471
+ --hop-Button-ghost-danger-border-disabled: 0.0625rem solid var(--hop-Button-ghost-danger-background-color-disabled);
472
+ --hop-Button-ghost-danger-spinner-color: var(--hop-neutral-icon);
473
+ --hop-Button-ghost-danger-sm-padding-x: var(--hop-space-inset-xs);
474
+ --hop-Button-ghost-danger-sm-padding-y: 0;
475
+ --hop-Button-ghost-danger-md-padding-x: var(--hop-space-inset-sm);
476
+ --hop-Button-ghost-danger-md-padding-y: 0;
477
+ --inline-size: max-content;
478
+ --block-size: var(--hop-Button-md-height);
479
+ --background-color: var(--hop-primary-surface-strong);
480
+ --color: var(--hop-primary-text-strong);
481
+ --spinner: var(--hop-primary-icon-strong);
482
+ --border: 0;
483
+ --padding-inline: 0;
484
+ --padding-block: 0;
485
+ cursor: pointer;
486
+ position: relative;
487
+ overflow: hidden;
488
+ display: grid;
489
+ grid-template-areas: "start-icon content end-icon";
490
+ grid-template-columns: auto min-content auto;
491
+ column-gap: var(--hop-space-inline-xs);
492
+ align-items: center;
493
+ box-sizing: border-box;
494
+ inline-size: var(--inline-size);
495
+ block-size: var(--block-size);
496
+ padding-block: var(--padding-block);
497
+ padding-inline: var(--padding-inline);
498
+ color: var(--color);
499
+ text-decoration: none;
500
+ white-space: nowrap;
501
+ background-color: var(--background-color);
502
+ border: var(--border);
503
+ border-radius: var(--hop-Button-border-radius);
504
+ outline: none;
505
+ outline-offset: 0.125rem;
506
+ transition:
507
+ color var(--hop-easing-duration-2) var(--hop-easing-productive),
508
+ background-color var(--hop-easing-duration-2) var(--hop-easing-productive),
509
+ border var(--hop-easing-duration-2) var(--hop-easing-productive);
510
+ }
511
+ .Button-module__hop-Button___FaloC[data-focus-visible] {
512
+ outline: 0.125rem solid var(--hop-Button-focus-ring-color);
513
+ }
514
+ .Button-module__hop-Button--icon-only___I7AGj {
515
+ --padding-block: var(--hop-Button-icon-only-padding);
516
+ --padding-inline: var(--hop-Button-icon-only-padding);
517
+ column-gap: 0;
518
+ aspect-ratio: 1;
519
+ }
520
+ .Button-module__hop-Button___FaloC[data-disabled],
521
+ .Button-module__hop-Button___FaloC[data-loading] {
522
+ cursor: not-allowed;
523
+ }
524
+ .Button-module__hop-Button--fluid___WpcgG {
525
+ --inline-size: 100%;
526
+ }
527
+ .Button-module__hop-Button--sm___RzTLv {
528
+ --block-size: var(--hop-Button-sm-height);
529
+ }
530
+ .Button-module__hop-Button--primary___XnfK-.Button-module__hop-Button--sm___RzTLv:not(.Button-module__hop-Button--icon-only___I7AGj) {
531
+ --padding-inline: var(--hop-Button-primary-sm-padding-x);
532
+ --padding-block: var(--hop-Button-primary-sm-padding-y);
533
+ }
534
+ .Button-module__hop-Button--primary___XnfK-.Button-module__hop-Button--md___FgAvl:not(.Button-module__hop-Button--icon-only___I7AGj) {
535
+ --padding-inline: var(--hop-Button-primary-md-padding-x);
536
+ --padding-block: var(--hop-Button-primary-md-padding-y);
537
+ }
538
+ .Button-module__hop-Button--secondary___EbTA7.Button-module__hop-Button--md___FgAvl:not(.Button-module__hop-Button--icon-only___I7AGj) {
539
+ --padding-inline: var(--hop-Button-secondary-md-padding-x);
540
+ --padding-block: var(--hop-Button-secondary-md-padding-y);
541
+ }
542
+ .Button-module__hop-Button--secondary___EbTA7.Button-module__hop-Button--sm___RzTLv:not(.Button-module__hop-Button--icon-only___I7AGj) {
543
+ --padding-inline: var(--hop-Button-secondary-sm-padding-x);
544
+ --padding-block: var(--hop-Button-secondary-sm-padding-y);
545
+ }
546
+ .Button-module__hop-Button--upsell___THmQF.Button-module__hop-Button--md___FgAvl:not(.Button-module__hop-Button--icon-only___I7AGj) {
547
+ --padding-inline: var(--hop-Button-upsell-md-padding-x);
548
+ --padding-block: var(--hop-Button-upsell-md-padding-y);
549
+ }
550
+ .Button-module__hop-Button--upsell___THmQF.Button-module__hop-Button--sm___RzTLv:not(.Button-module__hop-Button--icon-only___I7AGj) {
551
+ --padding-inline: var(--hop-Button-upsell-sm-padding-x);
552
+ --padding-block: var(--hop-Button-upsell-sm-padding-y);
553
+ }
554
+ .Button-module__hop-Button--danger___bIFTk.Button-module__hop-Button--md___FgAvl:not(.Button-module__hop-Button--icon-only___I7AGj) {
555
+ --padding-inline: var(--hop-Button-danger-md-padding-x);
556
+ --padding-block: var(--hop-Button-danger-md-padding-y);
557
+ }
558
+ .Button-module__hop-Button--danger___bIFTk.Button-module__hop-Button--sm___RzTLv:not(.Button-module__hop-Button--icon-only___I7AGj) {
559
+ --padding-inline: var(--hop-Button-danger-sm-padding-x);
560
+ --padding-block: var(--hop-Button-danger-sm-padding-y);
561
+ }
562
+ .Button-module__hop-Button--ghost-danger___k-QFo.Button-module__hop-Button--md___FgAvl:not(.Button-module__hop-Button--icon-only___I7AGj) {
563
+ --padding-inline: var(--hop-Button-ghost-danger-md-padding-x);
564
+ --padding-block: var(--hop-Button-ghost-danger-md-padding-y);
565
+ }
566
+ .Button-module__hop-Button--ghost-danger___k-QFo.Button-module__hop-Button--sm___RzTLv:not(.Button-module__hop-Button--icon-only___I7AGj) {
567
+ --padding-inline: var(--hop-Button-ghost-danger-sm-padding-x);
568
+ --padding-block: var(--hop-Button-ghost-danger-sm-padding-y);
569
+ }
570
+ .Button-module__hop-Button--ghost-secondary___HcAv6.Button-module__hop-Button--md___FgAvl:not(.Button-module__hop-Button--icon-only___I7AGj) {
571
+ --padding-inline: var(--hop-Button-ghost-secondary-md-padding-x);
572
+ --padding-block: var(--hop-Button-ghost-secondary-md-padding-y);
573
+ }
574
+ .Button-module__hop-Button--ghost-secondary___HcAv6.Button-module__hop-Button--sm___RzTLv:not(.Button-module__hop-Button--icon-only___I7AGj) {
575
+ --padding-inline: var(--hop-Button-ghost-secondary-sm-padding-x);
576
+ --padding-block: var(--hop-Button-ghost-secondary-sm-padding-y);
577
+ }
578
+ .Button-module__hop-Button--ghost-primary___aRJ8l.Button-module__hop-Button--md___FgAvl:not(.Button-module__hop-Button--icon-only___I7AGj) {
579
+ --padding-inline: var(--hop-Button-ghost-primary-md-padding-x);
580
+ --padding-block: var(--hop-Button-ghost-primary-md-padding-y);
581
+ }
582
+ .Button-module__hop-Button--ghost-primary___aRJ8l.Button-module__hop-Button--sm___RzTLv:not(.Button-module__hop-Button--icon-only___I7AGj) {
583
+ --padding-inline: var(--hop-Button-ghost-primary-sm-padding-x);
584
+ --padding-block: var(--hop-Button-ghost-primary-sm-padding-y);
585
+ }
586
+ .Button-module__hop-Button--primary___XnfK- {
587
+ --background-color: var(--hop-Button-primary-background-color);
588
+ --color: var(--hop-Button-primary-color);
589
+ --border: var(--hop-Button-primary-border);
590
+ --spinner-color: var(--hop-Button-primary-spinner-color);
591
+ }
592
+ .Button-module__hop-Button--primary___XnfK-[data-disabled]:not([data-loading]) {
593
+ --background-color: var(--hop-Button-primary-background-color-disabled);
594
+ --color: var(--hop-Button-primary-color-disabled);
595
+ --border: var(--hop-Button-primary-border-disabled);
596
+ }
597
+ .Button-module__hop-Button--primary___XnfK-[data-hovered]:not([data-disabled], [data-loading]),
598
+ .Button-module__hop-Button--primary___XnfK-[data-focus-visible]:not([data-disabled], [data-loading]) {
599
+ --background-color: var(--hop-Button-primary-background-color-hover);
600
+ --color: var(--hop-Button-primary-color-hover);
601
+ --border: var(--hop-Button-primary-border-hover);
602
+ }
603
+ .Button-module__hop-Button--primary___XnfK-[data-pressed]:not([data-loading]) {
604
+ --background-color: var(--hop-Button-primary-background-color-pressed);
605
+ --color: var(--hop-Button-primary-color-pressed);
606
+ --border: var(--hop-Button-primary-border-pressed);
607
+ }
608
+ .Button-module__hop-Button--secondary___EbTA7 {
609
+ --background-color: var(--hop-Button-secondary-background-color);
610
+ --color: var(--hop-Button-secondary-color);
611
+ --border: var(--hop-Button-secondary-border);
612
+ --spinner-color: var(--hop-Button-secondary-spinner-color);
613
+ }
614
+ .Button-module__hop-Button--secondary___EbTA7[data-disabled]:not([data-loading]) {
615
+ --background-color: var(--hop-Button-secondary-background-color-disabled);
616
+ --color: var(--hop-Button-secondary-color-disabled);
617
+ --border: var(--hop-Button-secondary-border-disabled);
618
+ }
619
+ .Button-module__hop-Button--secondary___EbTA7[data-hovered]:not([data-disabled], [data-loading]),
620
+ .Button-module__hop-Button--secondary___EbTA7[data-focus-visible]:not([data-disabled], [data-loading]) {
621
+ --background-color: var(--hop-Button-secondary-background-color-hover);
622
+ --color: var(--hop-Button-secondary-color-hover);
623
+ --border: var(--hop-Button-secondary-border-hover);
624
+ }
625
+ .Button-module__hop-Button--secondary___EbTA7[data-pressed]:not([data-loading]) {
626
+ --background-color: var(--hop-Button-secondary-background-color-pressed);
627
+ --color: var(--hop-Button-secondary-color-pressed);
628
+ --border: var(--hop-Button-secondary-border-pressed);
629
+ }
630
+ .Button-module__hop-Button--upsell___THmQF {
631
+ --background-color: var(--hop-Button-upsell-background-color);
632
+ --color: var(--hop-Button-upsell-color);
633
+ --border: var(--hop-Button-upsell-border);
634
+ --spinner-color: var(--hop-Button-upsell-spinner-color);
635
+ }
636
+ .Button-module__hop-Button--upsell___THmQF[data-disabled]:not([data-loading]) {
637
+ --background-color: var(--hop-Button-upsell-background-color-disabled);
638
+ --color: var(--hop-Button-upsell-color-disabled);
639
+ --border: var(--hop-Button-upsell-border-disabled);
640
+ }
641
+ .Button-module__hop-Button--upsell___THmQF[data-hovered]:not([data-disabled], [data-loading]),
642
+ .Button-module__hop-Button--upsell___THmQF[data-focus-visible]:not([data-disabled], [data-loading]) {
643
+ --background-color: var(--hop-Button-upsell-background-color-hover);
644
+ --color: var(--hop-Button-upsell-color-hover);
645
+ --border: var(--hop-Button-upsell-border-hover);
646
+ }
647
+ .Button-module__hop-Button--upsell___THmQF[data-pressed]:not([data-loading]) {
648
+ --background-color: var(--hop-Button-upsell-background-color-pressed);
649
+ --color: var(--hop-Button-upsell-color-pressed);
650
+ --border: var(--hop-Button-upsell-border-pressed);
651
+ }
652
+ .Button-module__hop-Button--danger___bIFTk {
653
+ --background-color: var(--hop-Button-danger-background-color);
654
+ --color: var(--hop-Button-danger-color);
655
+ --border: var(--hop-Button-danger-border);
656
+ --spinner-color: var(--hop-Button-danger-spinner-color);
657
+ }
658
+ .Button-module__hop-Button--danger___bIFTk[data-disabled]:not([data-loading]) {
659
+ --background-color: var(--hop-Button-danger-background-color-disabled);
660
+ --color: var(--hop-Button-danger-color-disabled);
661
+ --border: var(--hop-Button-danger-border-disabled);
662
+ }
663
+ .Button-module__hop-Button--danger___bIFTk[data-hovered]:not([data-disabled], [data-loading]),
664
+ .Button-module__hop-Button--danger___bIFTk[data-focus-visible]:not([data-disabled], [data-loading]) {
665
+ --background-color: var(--hop-Button-danger-background-color-hover);
666
+ --color: var(--hop-Button-danger-color-hover);
667
+ --border: var(--hop-Button-danger-border-hover);
668
+ }
669
+ .Button-module__hop-Button--danger___bIFTk[data-pressed]:not([data-loading]) {
670
+ --background-color: var(--hop-Button-danger-background-color-pressed);
671
+ --color: var(--hop-Button-danger-color-pressed);
672
+ --border: var(--hop-Button-danger-border-pressed);
673
+ }
674
+ .Button-module__hop-Button--ghost-primary___aRJ8l {
675
+ --background-color: var(--hop-Button-ghost-primary-background-color);
676
+ --color: var(--hop-Button-ghost-primary-color);
677
+ --border: var(--hop-Button-ghost-primary-border);
678
+ --spinner-color: var(--hop-Button-ghost-primary-spinner-color);
679
+ }
680
+ .Button-module__hop-Button--ghost-primary___aRJ8l[data-disabled]:not([data-loading]) {
681
+ --background-color: var(--hop-Button-ghost-primary-background-color-disabled);
682
+ --color: var(--hop-Button-ghost-primary-color-disabled);
683
+ --border: var(--hop-Button-ghost-primary-border-disabled);
684
+ }
685
+ .Button-module__hop-Button--ghost-primary___aRJ8l[data-hovered]:not([data-disabled], [data-loading]),
686
+ .Button-module__hop-Button--ghost-primary___aRJ8l[data-focus-visible]:not([data-disabled], [data-loading]) {
687
+ --background-color: var(--hop-Button-ghost-primary-background-color-hover);
688
+ --color: var(--hop-Button-ghost-primary-color-hover);
689
+ --border: var(--hop-Button-ghost-primary-border-hover);
690
+ }
691
+ .Button-module__hop-Button--ghost-primary___aRJ8l[data-pressed]:not([data-loading]) {
692
+ --background-color: var(--hop-Button-ghost-primary-background-color-pressed);
693
+ --color: var(--hop-Button-ghost-primary-color-pressed);
694
+ --border: var(--hop-Button-ghost-primary-border-pressed);
695
+ }
696
+ .Button-module__hop-Button--ghost-secondary___HcAv6 {
697
+ --background-color: var(--hop-Button-ghost-secondary-background-color);
698
+ --color: var(--hop-Button-ghost-secondary-color);
699
+ --border: var(--hop-Button-ghost-secondary-border);
700
+ --spinner-color: var(--hop-Button-ghost-secondary-spinner-color);
701
+ }
702
+ .Button-module__hop-Button--ghost-secondary___HcAv6[data-disabled]:not([data-loading]) {
703
+ --background-color: var(--hop-Button-ghost-secondary-background-color-disabled);
704
+ --color: var(--hop-Button-ghost-secondary-color-disabled);
705
+ --border: var(--hop-Button-ghost-secondary-border-disabled);
706
+ }
707
+ .Button-module__hop-Button--ghost-secondary___HcAv6[data-hovered]:not([data-disabled], [data-loading]),
708
+ .Button-module__hop-Button--ghost-secondary___HcAv6[data-focus-visible]:not([data-disabled], [data-loading]) {
709
+ --background-color: var(--hop-Button-ghost-secondary-background-color-hover);
710
+ --color: var(--hop-Button-ghost-secondary-color-hover);
711
+ --border: var(--hop-Button-ghost-secondary-border-hover);
712
+ }
713
+ .Button-module__hop-Button--ghost-secondary___HcAv6[data-pressed]:not([data-loading]) {
714
+ --background-color: var(--hop-Button-ghost-secondary-background-color-pressed);
715
+ --color: var(--hop-Button-ghost-secondary-color-pressed);
716
+ --border: var(--hop-Button-ghost-secondary-border-pressed);
717
+ }
718
+ .Button-module__hop-Button--ghost-danger___k-QFo {
719
+ --background-color: var(--hop-Button-ghost-danger-background-color);
720
+ --color: var(--hop-Button-ghost-danger-color);
721
+ --border: var(--hop-Button-ghost-danger-border);
722
+ --spinner-color: var(--hop-Button-ghost-danger-spinner-color);
723
+ }
724
+ .Button-module__hop-Button--ghost-danger___k-QFo[data-disabled]:not([data-loading]) {
725
+ --background-color: var(--hop-Button-ghost-danger-background-color-disabled);
726
+ --color: var(--hop-Button-ghost-danger-color-disabled);
727
+ --border: var(--hop-Button-ghost-danger-border-disabled);
728
+ }
729
+ .Button-module__hop-Button--ghost-danger___k-QFo[data-hovered]:not([data-disabled], [data-loading]),
730
+ .Button-module__hop-Button--ghost-danger___k-QFo[data-focus-visible]:not([data-disabled], [data-loading]) {
731
+ --background-color: var(--hop-Button-ghost-danger-background-color-hover);
732
+ --color: var(--hop-Button-ghost-danger-color-hover);
733
+ --border: var(--hop-Button-ghost-danger-border-hover);
734
+ }
735
+ .Button-module__hop-Button--ghost-danger___k-QFo[data-pressed]:not([data-loading]) {
736
+ --background-color: var(--hop-Button-ghost-danger-background-color-pressed);
737
+ --color: var(--hop-Button-ghost-danger-color-pressed);
738
+ --border: var(--hop-Button-ghost-danger-border-pressed);
739
+ }
740
+ .Button-module__hop-Button__Spinner___KBKEz {
741
+ position: absolute;
742
+ justify-self: center;
743
+ color: var(--spinner-color);
744
+ }
745
+ .Button-module__hop-Button__icon___fzwBg,
746
+ .Button-module__hop-Button__icon-list___mBFYH {
747
+ grid-area: start-icon;
748
+ justify-self: end;
749
+ }
750
+ .Button-module__hop-Button__text___4wltD {
751
+ user-select: none;
752
+ overflow: visible;
753
+ grid-area: content;
754
+ font-weight: var(--hop-font-weight-505);
755
+ text-wrap: nowrap;
756
+ }
757
+ .Button-module__hop-Button--ghost-primary___aRJ8l[data-hovered]:not([data-loading]) .Button-module__hop-Button__text___4wltD,
758
+ .Button-module__hop-Button--ghost-secondary___HcAv6[data-hovered]:not([data-loading]) .Button-module__hop-Button__text___4wltD,
759
+ .Button-module__hop-Button--ghost-danger___k-QFo[data-hovered]:not([data-loading]) .Button-module__hop-Button__text___4wltD,
760
+ .Button-module__hop-Button--ghost-primary___aRJ8l[data-pressed]:not([data-loading]) .Button-module__hop-Button__text___4wltD,
761
+ .Button-module__hop-Button--ghost-secondary___HcAv6[data-pressed]:not([data-loading]) .Button-module__hop-Button__text___4wltD,
762
+ .Button-module__hop-Button--ghost-danger___k-QFo[data-pressed]:not([data-loading]) .Button-module__hop-Button__text___4wltD,
763
+ .Button-module__hop-Button--ghost-primary___aRJ8l[data-focus-visible]:not([data-loading]) .Button-module__hop-Button__text___4wltD,
764
+ .Button-module__hop-Button--ghost-secondary___HcAv6[data-focus-visible]:not([data-loading]) .Button-module__hop-Button__text___4wltD,
765
+ .Button-module__hop-Button--ghost-danger___k-QFo[data-focus-visible]:not([data-loading]) .Button-module__hop-Button__text___4wltD {
766
+ text-decoration: underline;
767
+ text-underline-offset: 0.125rem;
768
+ }
769
+ .Button-module__hop-Button__end-icon___UV66v,
770
+ .Button-module__hop-Button__end-icon-list___x1eFR {
771
+ grid-area: end-icon;
772
+ }
773
+ .Button-module__hop-Button___FaloC .Button-module__hop-Button__icon-list___mBFYH,
774
+ .Button-module__hop-Button___FaloC .Button-module__hop-Button__end-icon-list___x1eFR {
775
+ flex-wrap: nowrap;
776
+ }
777
+ .Button-module__hop-Button___FaloC[data-loading] > *:not(.Button-module__hop-Button__Spinner___KBKEz) {
778
+ opacity: 0;
779
+ }
780
+
781
+ /* css-module:/home/runner/work/wl-hopper/wl-hopper/packages/components/src/buttons/src/ButtonGroup.module.css/#css-module-data */
782
+ .ButtonGroup-module__hop-ButtonGroup___J-bP3 {
783
+ display: inline-flex;
784
+ flex-wrap: nowrap;
785
+ gap: var(--hop-space-inline-md);
786
+ }
787
+ .ButtonGroup-module__hop-ButtonGroup--horizontal___5DrPu {
788
+ justify-content: center;
789
+ }
790
+ .ButtonGroup-module__hop-ButtonGroup--vertical___6mZqj {
791
+ flex-direction: column;
792
+ gap: var(--hop-space-stack-md);
793
+ align-items: center;
794
+ }
795
+ .ButtonGroup-module__hop-ButtonGroup--start___OQ5-x.ButtonGroup-module__hop-ButtonGroup--vertical___6mZqj {
796
+ align-items: flex-start;
797
+ }
798
+ .ButtonGroup-module__hop-ButtonGroup--center___Wa8qq.ButtonGroup-module__hop-ButtonGroup--vertical___6mZqj {
799
+ align-items: center;
800
+ }
801
+ .ButtonGroup-module__hop-ButtonGroup--end___Bnq-S.ButtonGroup-module__hop-ButtonGroup--vertical___6mZqj {
802
+ align-items: flex-end;
803
+ }
804
+ .ButtonGroup-module__hop-ButtonGroup--start___OQ5-x.ButtonGroup-module__hop-ButtonGroup--horizontal___5DrPu {
805
+ justify-content: flex-start;
806
+ }
807
+ .ButtonGroup-module__hop-ButtonGroup--center___Wa8qq.ButtonGroup-module__hop-ButtonGroup--horizontal___5DrPu {
808
+ justify-content: center;
809
+ }
810
+ .ButtonGroup-module__hop-ButtonGroup--end___Bnq-S.ButtonGroup-module__hop-ButtonGroup--horizontal___5DrPu {
811
+ justify-content: flex-end;
812
+ }
813
+ .ButtonGroup-module__hop-ButtonGroup--wrap___w7xGi {
814
+ flex-wrap: wrap;
815
+ }
816
+ .ButtonGroup-module__hop-ButtonGroup--fluid___cYLTZ {
817
+ inline-size: 100%;
818
+ }
819
+
820
+ /* css-module:/home/runner/work/wl-hopper/wl-hopper/packages/components/src/buttons/src/EmbeddedButton.module.css/#css-module-data */
821
+ .EmbeddedButton-module__hop-EmbeddedButton___1uONR {
822
+ --hop-EmbeddedButton-border-radius: var(--hop-shape-rounded-md);
823
+ --hop-EmbeddedButton-focus-ring-color: var(--hop-primary-border-focus);
824
+ --hop-EmbeddedButton-color: var(--hop-neutral-icon-weak);
825
+ --hop-EmbeddedButton-color-hover: var(--hop-neutral-icon-weak-hover);
826
+ --hop-EmbeddedButton-color-pressed: var(--hop-neutral-icon-weak-press);
827
+ --hop-EmbeddedButton-color-disabled: var(--hop-neutral-icon-disabled);
828
+ --hop-EmbeddedButton-effect-background-color: transparent;
829
+ --hop-EmbeddedButton-effect-background-color-hover: var(--hop-neutral-surface-weak-hover);
830
+ --hop-EmbeddedButton-effect-background-color-pressed: var(--hop-neutral-surface-weak-press);
831
+ --hop-EmbeddedButton-effect-background-color-disabled: transparent;
832
+ --hop-EmbeddedButton-effect-border-radius: var(--hop-shape-circle);
833
+ --hop-EmbeddedButton-md-height: 1.5rem;
834
+ --hop-EmbeddedButton-md-width: 1.5rem;
835
+ --hop-EmbeddedButton-md-effect-height: 1rem;
836
+ --hop-EmbeddedButton-md-effect-width: 1rem;
837
+ --hop-EmbeddedButton-lg-height: 1.5rem;
838
+ --hop-EmbeddedButton-lg-width: 1.5rem;
839
+ --hop-EmbeddedButton-lg-effect-height: 1.5rem;
840
+ --hop-EmbeddedButton-lg-effect-width: 1.5rem;
841
+ --spinner: var(--hop-primary-icon-strong);
842
+ --padding-inline: 0;
843
+ --padding-block: 0;
844
+ --effect-background-color: var(--hop-EmbeddedButton-effect-background-color);
845
+ --color: var(--hop-EmbeddedButton-color);
846
+ --transition: var(--hop-easing-duration-2) var(--hop-easing-productive);
847
+ --effect-border-radius: var(--hop-EmbeddedButton-effect-border-radius);
848
+ --focus-ring-size: 0.125rem;
849
+ cursor: pointer;
850
+ position: relative;
851
+ overflow: hidden;
852
+ display: flex;
853
+ flex-shrink: 0;
854
+ align-items: center;
855
+ justify-content: center;
856
+ box-sizing: border-box;
857
+ inline-size: var(--inline-size);
858
+ block-size: var(--block-size);
859
+ padding-block: var(--padding-block);
860
+ padding-inline: var(--padding-inline);
861
+ color: var(--color);
862
+ text-decoration: none;
863
+ white-space: nowrap;
864
+ background: none;
865
+ border: none;
866
+ border-radius: var(--hop-EmbeddedButton-border-radius);
867
+ outline: none;
868
+ transition: color var(--transition);
869
+ }
870
+ .EmbeddedButton-module__hop-EmbeddedButton___1uONR::before {
871
+ content: "";
872
+ position: absolute;
873
+ inset-block-start: 50%;
874
+ inset-inline-start: 50%;
875
+ transform: translate(-50%, -50%);
876
+ display: block;
877
+ inline-size: var(--effect-inline-size);
878
+ block-size: var(--effect-block-size);
879
+ background-color: var(--effect-background-color);
880
+ border-radius: var(--effect-border-radius);
881
+ transition: background-color var(--transition);
882
+ }
883
+ .EmbeddedButton-module__hop-EmbeddedButton--md___uix0V {
884
+ --inline-size: var(--hop-EmbeddedButton-md-width);
885
+ --block-size: var(--hop-EmbeddedButton-md-height);
886
+ --focus-ring-offset: calc(-1 * var(--focus-ring-size));
887
+ }
888
+ .EmbeddedButton-module__hop-EmbeddedButton--lg___8U58d {
889
+ --inline-size: var(--hop-EmbeddedButton-lg-width);
890
+ --block-size: var(--hop-EmbeddedButton-lg-height);
891
+ --focus-ring-offset: 0;
892
+ }
893
+ .EmbeddedButton-module__hop-EmbeddedButton--md___uix0V::before {
894
+ --effect-inline-size: var(--hop-EmbeddedButton-md-effect-width);
895
+ --effect-block-size: var(--hop-EmbeddedButton-md-effect-height);
896
+ }
897
+ .EmbeddedButton-module__hop-EmbeddedButton--lg___8U58d::before {
898
+ --effect-inline-size: var(--hop-EmbeddedButton-lg-effect-width);
899
+ --effect-block-size: var(--hop-EmbeddedButton-lg-effect-height);
900
+ }
901
+ .EmbeddedButton-module__hop-EmbeddedButton___1uONR[data-focus-visible] {
902
+ outline: var(--focus-ring-size) solid var(--hop-EmbeddedButton-focus-ring-color);
903
+ outline-offset: var(--focus-ring-offset);
904
+ }
905
+ .EmbeddedButton-module__hop-EmbeddedButton___1uONR[data-disabled] {
906
+ --effect-background-color: var(--hop-EmbeddedButton-effect-background-color-disabled);
907
+ --color: var(--hop-EmbeddedButton-color-disabled);
908
+ cursor: not-allowed;
909
+ }
910
+ .EmbeddedButton-module__hop-EmbeddedButton___1uONR[data-hovered]:not([data-disabled], [data-pressed]),
911
+ .EmbeddedButton-module__hop-EmbeddedButton___1uONR[data-focus-visible]:not([data-disabled], [data-pressed]) {
912
+ --effect-background-color: var(--hop-EmbeddedButton-effect-background-color-hover);
913
+ --color: var(--hop-EmbeddedButton-color-hover);
914
+ }
915
+ .EmbeddedButton-module__hop-EmbeddedButton___1uONR[data-pressed]:not([data-disabled]) {
916
+ --effect-background-color: var(--hop-EmbeddedButton-effect-background-color-pressed);
917
+ --color: var(--hop-EmbeddedButton-color-pressed);
918
+ }
919
+ .EmbeddedButton-module__hop-EmbeddedButton__icon___pPbur {
920
+ position: relative;
921
+ }
922
+
923
+ /* css-module:/home/runner/work/wl-hopper/wl-hopper/packages/components/src/errorMessage/src/ErrorMessage.module.css/#css-module-data */
924
+ .ErrorMessage-module__hop-ErrorMessage___rwfLE {
925
+ --hop-ErrorMessage-color: var(--hop-danger-text-weak);
926
+ --hop-ErrorMessage-font-family: var(--hop-body-xs-font-family);
927
+ --hop-ErrorMessage-font-size: var(--hop-body-xs-font-size);
928
+ --hop-ErrorMessage-font-weight: var(--hop-body-xs-font-weight);
929
+ --hop-ErrorMessage-line-height: var(--hop-body-xs-line-height);
930
+ --hop-ErrorMessage-column-gap: var(--hop-space-inline-xs);
931
+ display: flex;
932
+ column-gap: var(--hop-ErrorMessage-column-gap);
933
+ align-items: center;
934
+ box-sizing: border-box;
935
+ font-family: var(--hop-ErrorMessage-font-family);
936
+ font-size: var(--hop-ErrorMessage-font-size);
937
+ font-weight: var(--hop-ErrorMessage-font-weight);
938
+ line-height: var(--hop-ErrorMessage-line-height);
939
+ color: var(--hop-ErrorMessage-color);
940
+ }
941
+ .ErrorMessage-module__hop-ErrorMessage__icon___OY9OV {
942
+ flex: 0 0 auto;
943
+ align-self: flex-start;
944
+ }
945
+
946
+ /* css-module:/home/runner/work/wl-hopper/wl-hopper/packages/components/src/helperMessage/src/HelperMessage.module.css/#css-module-data */
947
+ .HelperMessage-module__hop-HelperMessage___Az4ZT {
948
+ --hop-HelperMessage-color: var(--hop-neutral-text-weak);
949
+ --hop-HelperMessage-column-gap: var(--hop-space-inline-xs);
950
+ display: flex;
951
+ column-gap: var(--hop-HelperMessage-column-gap);
952
+ align-items: center;
953
+ box-sizing: border-box;
954
+ color: var(--hop-HelperMessage-color);
955
+ }
956
+ .HelperMessage-module__hop-HelperMessage__icon___TKk7m {
957
+ flex: 0 0 auto;
958
+ align-self: flex-start;
959
+ }
960
+
961
+ /* css-module:/home/runner/work/wl-hopper/wl-hopper/packages/components/src/typography/OverlineText/src/OverlineText.module.css/#css-module-data */
962
+ :where(.OverlineText-module__hop-OverlineText___QDaCi) {
963
+ --hop-OverlineText-font-family: var(--hop-overline-font-family);
964
+ --hop-OverlineText-font-size: var(--hop-overline-font-size);
965
+ --hop-OverlineText-font-weight: var(--hop-overline-font-weight);
966
+ --hop-OverlineText-letter-spacing: 0.015rem;
967
+ --hop-OverlineText-line-height: var(--hop-overline-line-height);
968
+ --hop-OverlineText-top-offset: var(--hop-overline-top-offset);
969
+ --hop-OverlineText-bottom-offset: var(--hop-overline-bottom-offset);
970
+ --font-family: var(--hop-OverlineText-font-family);
971
+ --font-size: var(--hop-OverlineText-font-size);
972
+ --font-weight: var(--hop-OverlineText-font-weight);
973
+ --letter-spacing: var(--hop-OverlineText-letter-spacing);
974
+ --line-height: var(--hop-OverlineText-line-height);
975
+ --top-offset: var(--hop-OverlineText-top-offset);
976
+ --bottom-offset: var(--hop-OverlineText-bottom-offset);
977
+ box-sizing: border-box;
978
+ font-family: var(--font-family);
979
+ font-size: var(--font-size);
980
+ font-feature-settings: "case";
981
+ font-weight: var(--font-weight);
982
+ line-height: var(--line-height);
983
+ text-transform: uppercase;
984
+ letter-spacing: var(--letter-spacing);
985
+ }
986
+ .OverlineText-module__hop-OverlineText__text___kNB07 {
987
+ box-sizing: border-box;
988
+ }
989
+ .OverlineText-module__hop-OverlineText__text___kNB07::before,
990
+ .OverlineText-module__hop-OverlineText__text___kNB07::after {
991
+ content: "";
992
+ display: block;
993
+ box-sizing: border-box;
994
+ inline-size: 0;
995
+ block-size: 0;
996
+ }
997
+ .OverlineText-module__hop-OverlineText__text___kNB07::before {
998
+ margin-block-end: var(--bottom-offset);
999
+ }
1000
+ .OverlineText-module__hop-OverlineText__text___kNB07::after {
1001
+ margin-block-start: var(--top-offset);
1002
+ }
1003
+
1004
+ /* css-module:/home/runner/work/wl-hopper/wl-hopper/packages/components/src/badge/src/Badge.module.css/#css-module-data */
1005
+ .Badge-module__hop-Badge___HtEMK {
1006
+ --hop-Badge-height: 1.5rem;
1007
+ --hop-Badge-padding-inline: var(--hop-space-inset-sm);
1008
+ --hop-Badge-border-radius: var(--hop-shape-pill);
1009
+ --hop-Badge-primary-text-color: var(--hop-primary-text-strong);
1010
+ --hop-Badge-primary-background-color: var(--hop-primary-surface-strong);
1011
+ --hop-Badge-secondary-text-color: var(--hop-neutral-text);
1012
+ --hop-Badge-secondary-background-color: var(--hop-neutral-surface-weak);
1013
+ --hop-Badge-text-color-disabled: var(--hop-neutral-text-disabled);
1014
+ --hop-Badge-background-color-disabled: var(--hop-neutral-surface-disabled);
1015
+ --height: var(--hop-Badge-height);
1016
+ --padding-inline: var(--hop-Badge-padding-inline);
1017
+ --border-radius: var(--hop-Badge-border-radius);
1018
+ display: inline-flex;
1019
+ align-items: center;
1020
+ justify-content: center;
1021
+ box-sizing: border-box;
1022
+ inline-size: max-content;
1023
+ block-size: var(--height);
1024
+ padding-inline: var(--padding-inline);
1025
+ color: var(--text-color, var(--hop-Badge-primary-text-color));
1026
+ background-color: var(--background-color, var(--hop-Badge-primary-background-color));
1027
+ border-radius: var(--border-radius);
1028
+ }
1029
+ .Badge-module__hop-Badge--primary___-cwxH {
1030
+ --background-color: var(--hop-Badge-primary-background-color);
1031
+ --text-color: var(--hop-Badge-primary-text-color);
1032
+ }
1033
+ .Badge-module__hop-Badge--secondary___FXeeD {
1034
+ --background-color: var(--hop-Badge-secondary-background-color);
1035
+ --text-color: var(--hop-Badge-secondary-text-color);
1036
+ }
1037
+ .Badge-module__hop-Badge___HtEMK[data-disabled] {
1038
+ --background-color: var(--hop-Badge-background-color-disabled);
1039
+ --text-color: var(--hop-Badge-text-color-disabled);
1040
+ }
1041
+
1042
+ /* css-module:/home/runner/work/wl-hopper/wl-hopper/packages/components/src/checkbox/src/Checkbox.module.css/#css-module-data */
1043
+ .Checkbox-module__hop-Checkbox___1DFt5 {
1044
+ --hop-Checkbox-box-border-size: 0.0625rem;
1045
+ --hop-Checkbox-box-border-color: var(--hop-neutral-border);
1046
+ --hop-Checkbox-box-background-color: var(--hop-neutral-surface);
1047
+ --hop-Checkbox-check-color: var(--hop-neutral-icon-selected);
1048
+ --hop-Checkbox-check-display: none;
1049
+ --hop-Checkbox-text-color: var(--hop-neutral-text);
1050
+ --hop-Checkbox-icon-color: var(--hop-neutral-icon);
1051
+ --hop-Checkbox-box-border-color-hover: var(--hop-neutral-border-hover);
1052
+ --hop-Checkbox-box-background-color-hover: var(--hop-neutral-surface-hover);
1053
+ --hop-Checkbox-box-border-color-checked-hover: var(--hop-neutral-border-selected);
1054
+ --hop-Checkbox-box-background-color-checked-hover: var(--hop-neutral-surface-selected);
1055
+ --hop-Checkbox-text-color-hover: var(--hop-neutral-text-hover);
1056
+ --hop-Checkbox-icon-color-hover: var(--hop-neutral-icon);
1057
+ --hop-Checkbox-box-border-color-pressed: var(--hop-neutral-border-press);
1058
+ --hop-Checkbox-box-background-color-pressed: var(--hop-neutral-surface-press);
1059
+ --hop-Checkbox-box-border-color-checked-pressed: var(--hop-neutral-border-selected);
1060
+ --hop-Checkbox-box-background-color-checked-pressed: var(--hop-neutral-surface-selected);
1061
+ --hop-Checkbox-text-color-pressed: var(--hop-neutral-text-press);
1062
+ --hop-Checkbox-icon-color-pressed: var(--hop-neutral-icon-press);
1063
+ --hop-Checkbox-box-border-color-checked: var(--hop-neutral-border-selected);
1064
+ --hop-Checkbox-box-background-color-checked: var(--hop-neutral-surface-selected);
1065
+ --hop-Checkbox-check-display-checked: block;
1066
+ --hop-Checkbox-text-color-checked: var(--hop-neutral-text);
1067
+ --hop-Checkbox-icon-color-checked: var(--hop-neutral-icon);
1068
+ --hop-Checkbox-box-border-color-disabled: var(--hop-neutral-border-disabled);
1069
+ --hop-Checkbox-box-background-color-disabled: var(--hop-neutral-surface-disabled);
1070
+ --hop-Checkbox-box-border-color-checked-disabled: var(--hop-neutral-border-disabled);
1071
+ --hop-Checkbox-box-background-color-checked-disabled: var(--hop-neutral-surface-disabled);
1072
+ --hop-Checkbox-check-color-disabled: var(--hop-neutral-icon-disabled);
1073
+ --hop-Checkbox-text-color-disabled: var(--hop-neutral-text-disabled);
1074
+ --hop-Checkbox-icon-color-disabled: var(--hop-neutral-icon-disabled);
1075
+ --hop-Checkbox-box-border-color-focus: var(--hop-neutral-border-hover);
1076
+ --hop-Checkbox-box-background-color-focus: var(--hop-neutral-surface-hover);
1077
+ --hop-Checkbox-box-focus-ring-color: var(--hop-primary-border-focus);
1078
+ --hop-Checkbox-box-border-color-checked-focus: var(--hop-neutral-border-selected);
1079
+ --hop-Checkbox-box-background-color-checked-focus: var(--hop-neutral-surface-selected);
1080
+ --hop-Checkbox-text-color-focus: var(--hop-neutral-text);
1081
+ --hop-Checkbox-icon-color-focus: var(--hop-neutral-icon);
1082
+ --hop-Checkbox-box-border-color-invalid: var(--hop-danger-border-strong);
1083
+ --hop-Checkbox-box-background-color-invalid: var(--hop-neutral-surface);
1084
+ --hop-Checkbox-box-border-color-hover-invalid: var(--hop-danger-border-strong);
1085
+ --hop-Checkbox-box-background-color-hover-invalid: var(--hop-danger-surface-weak-hover);
1086
+ --hop-Checkbox-box-border-color-pressed-invalid: var(--hop-danger-border-press);
1087
+ --hop-Checkbox-box-background-color-pressed-invalid: var(--hop-danger-surface-weak-press);
1088
+ --hop-Checkbox-box-border-color-focus-invalid: var(--hop-danger-border-press);
1089
+ --hop-Checkbox-box-background-color-focus-invalid: var(--hop-danger-surface);
1090
+ --hop-Checkbox-box-border-color-checked-invalid: var(--hop-danger-border-strong);
1091
+ --hop-Checkbox-box-background-color-checked-invalid: var(--hop-danger-surface-strong);
1092
+ --hop-Checkbox-check-color-invalid: var(--hop-danger-icon-strong);
1093
+ --hop-Checkbox-text-color-invalid: var(--hop-danger-text-weak);
1094
+ --hop-Checkbox-text-color-hover-invalid: var(--hop-danger-text-weak-hover);
1095
+ --hop-Checkbox-text-color-pressed-invalid: var(--hop-danger-text-weak-press);
1096
+ --hop-Checkbox-icon-color-invalid: var(--hop-danger-icon-weak);
1097
+ --hop-Checkbox-icon-color-hover-invalid: var(--hop-danger-icon-weak-hover);
1098
+ --hop-Checkbox-icon-color-pressed-invalid: var(--hop-danger-icon-weak-press);
1099
+ --hop-Checkbox-box-sm-block-size: 1rem;
1100
+ --hop-Checkbox-box-sm-inline-size: 1rem;
1101
+ --hop-Checkbox-text-sm-top-offset: calc((var(--box-inline-size) - (var(--hop-body-sm-line-height) * var(--hop-body-sm-font-size))) / 2);
1102
+ --hop-Checkbox-text-sm-margin-inline-start: calc(var(--hop-space-inline-sm) - var(--hop-space-inline-xs));
1103
+ --hop-Checkbox-box-md-block-size: 1.5rem;
1104
+ --hop-Checkbox-box-md-inline-size: 1.5rem;
1105
+ --hop-Checkbox-text-md-top-offset: calc((var(--box-inline-size) - (var(--hop-body-md-line-height) * var(--hop-body-md-font-size))) / 2);
1106
+ --hop-Checkbox-text-md-margin-inline-start: calc(var(--hop-space-inline-md) - var(--hop-space-inline-xs));
1107
+ --box-background-color: var(--hop-Checkbox-box-background-color);
1108
+ --box-border-color: var(--hop-Checkbox-box-border-color);
1109
+ --box-border-radius: var(--hop-shape-rounded-sm);
1110
+ --check-color: var(--hop-Checkbox-check-color);
1111
+ --check-display: var(--hop-Checkbox-check-display);
1112
+ --cursor: pointer;
1113
+ --text-color: var(--hop-Checkbox-text-color);
1114
+ --icon-color: var(--hop-Checkbox-icon-color);
1115
+ --description-color: var(--hop-Checkbox-description-color);
1116
+ --transition-duration: var(--hop-easing-duration-2);
1117
+ cursor: var(--cursor);
1118
+ display: flex;
1119
+ column-gap: var(--hop-space-inline-xs);
1120
+ align-items: start;
1121
+ justify-content: start;
1122
+ box-sizing: border-box;
1123
+ inline-size: max-content;
1124
+ max-inline-size: 100%;
1125
+ }
1126
+ .Checkbox-module__hop-Checkbox___1DFt5[data-hovered] {
1127
+ --box-background-color: var(--hop-Checkbox-box-background-color-hover);
1128
+ --box-border-color: var(--hop-Checkbox-box-border-color-hover);
1129
+ --text-color: var(--hop-Checkbox-text-color-hover);
1130
+ --icon-color: var(--hop-Checkbox-icon-color-hover);
1131
+ --description-color: var(--hop-Checkbox-description-color-hover);
1132
+ }
1133
+ .Checkbox-module__hop-Checkbox___1DFt5[data-pressed],
1134
+ .Checkbox-module__hop-Checkbox___1DFt5[data-pressed][data-hovered],
1135
+ .Checkbox-module__hop-Checkbox___1DFt5[data-pressed][data-focus-visible] {
1136
+ --box-background-color: var(--hop-Checkbox-box-background-color-pressed);
1137
+ --box-border-color: var(--hop-Checkbox-box-border-color-pressed);
1138
+ --text-color: var(--hop-Checkbox-text-color-pressed);
1139
+ --icon-color: var(--hop-Checkbox-icon-color-pressed);
1140
+ }
1141
+ .Checkbox-module__hop-Checkbox___1DFt5[data-selected],
1142
+ .Checkbox-module__hop-Checkbox___1DFt5[data-selected][data-pressed] {
1143
+ --box-background-color: var(--hop-Checkbox-box-background-color-checked-hover);
1144
+ --box-border-color: var(--hop-Checkbox-box-border-color-checked-hover);
1145
+ --check-display: var(--hop-Checkbox-check-display-checked);
1146
+ --text-color: var(--hop-Checkbox-text-color-checked);
1147
+ --icon-color: var(--hop-Checkbox-icon-color-checked);
1148
+ --description-color: var(--hop-Checkbox-description-color-checked);
1149
+ }
1150
+ .Checkbox-module__hop-Checkbox___1DFt5[data-focus-visible] {
1151
+ --box-background-color: var(--hop-Checkbox-box-background-color-focus);
1152
+ --box-border-color: var(--hop-Checkbox-box-border-color-focus);
1153
+ --box-outline: 0.125rem solid var(--hop-Checkbox-box-focus-ring-color);
1154
+ --text-color: var(--hop-Checkbox-text-color-focus);
1155
+ --icon-color: var(--hop-Checkbox-icon-color-focus);
1156
+ --description-color: var(--hop-Checkbox-description-color-focus);
1157
+ }
1158
+ .Checkbox-module__hop-Checkbox___1DFt5[data-focus-visible][data-selected] {
1159
+ --box-background-color: var(--hop-Checkbox-box-background-color-checked-focus);
1160
+ --box-border-color: var(--hop-Checkbox-box-border-color-checked-focus);
1161
+ }
1162
+ .Checkbox-module__hop-Checkbox___1DFt5[data-invalid] {
1163
+ --box-background-color: var(--hop-Checkbox-box-background-color-invalid);
1164
+ --box-border-color: var(--hop-Checkbox-box-border-color-invalid);
1165
+ --check-color: var(--hop-Checkbox-check-color-invalid);
1166
+ --text-color: var(--hop-Checkbox-text-color-invalid);
1167
+ --icon-color: var(--hop-Checkbox-icon-color-invalid);
1168
+ --description-color: var(--hop-Checkbox-description-color-invalid);
1169
+ }
1170
+ .Checkbox-module__hop-Checkbox___1DFt5[data-invalid][data-hovered] {
1171
+ --box-background-color: var(--hop-Checkbox-box-background-color-hover-invalid);
1172
+ --box-border-color: var(--hop-Checkbox-box-border-color-hover-invalid);
1173
+ --text-color: var(--hop-Checkbox-text-color-hover-invalid);
1174
+ --icon-color: var(--hop-Checkbox-icon-color-hover-invalid);
1175
+ }
1176
+ .Checkbox-module__hop-Checkbox___1DFt5[data-invalid][data-focus-visible] {
1177
+ --box-background-color: var(--hop-Checkbox-box-background-color-focus-invalid);
1178
+ --box-border-color: var(--hop-Checkbox-box-border-color-focus-invalid);
1179
+ }
1180
+ .Checkbox-module__hop-Checkbox___1DFt5[data-invalid][data-selected] {
1181
+ --box-background-color: var(--hop-Checkbox-box-background-color-checked-invalid);
1182
+ --box-border-color: var(--hop-Checkbox-box-border-color-checked-invalid);
1183
+ }
1184
+ .Checkbox-module__hop-Checkbox___1DFt5[data-invalid][data-pressed] {
1185
+ --box-background-color: var(--hop-Checkbox-box-background-color-pressed-invalid);
1186
+ --box-border-color: var(--hop-Checkbox-box-border-color-pressed-invalid);
1187
+ --text-color: var(--hop-Checkbox-text-color-pressed-invalid);
1188
+ --icon-color: var(--hop-Checkbox-icon-color-pressed-invalid);
1189
+ }
1190
+ .Checkbox-module__hop-Checkbox___1DFt5[data-disabled] {
1191
+ --box-background-color: var(--hop-Checkbox-box-background-color-disabled);
1192
+ --box-border-color: var(--hop-Checkbox-box-border-color-disabled);
1193
+ --check-color: var(--hop-Checkbox-check-color-disabled);
1194
+ --cursor: not-allowed;
1195
+ --text-color: var(--hop-Checkbox-text-color-disabled);
1196
+ --icon-color: var(--hop-Checkbox-icon-color-disabled);
1197
+ --description-color: var(--hop-Checkbox-description-color-disabled);
1198
+ }
1199
+ .Checkbox-module__hop-Checkbox___1DFt5[data-disabled][data-selected] {
1200
+ --box-background-color: var(--hop-Checkbox-box-background-color-checked-disabled);
1201
+ --box-border-color: var(--hop-Checkbox-box-border-color-checked-disabled);
1202
+ }
1203
+ .Checkbox-module__hop-Checkbox--sm___qVMQC {
1204
+ --box-block-size: var(--hop-Checkbox-box-sm-block-size);
1205
+ --box-inline-size: var(--hop-Checkbox-box-sm-inline-size);
1206
+ --text-top-offset: var(--hop-Checkbox-text-sm-top-offset);
1207
+ --text-margin-inline-start: var(--hop-Checkbox-text-sm-margin-inline-start);
1208
+ }
1209
+ .Checkbox-module__hop-Checkbox--md___Foz8P {
1210
+ --box-block-size: var(--hop-Checkbox-box-md-block-size);
1211
+ --box-inline-size: var(--hop-Checkbox-box-md-inline-size);
1212
+ --text-top-offset: var(--hop-Checkbox-text-md-top-offset);
1213
+ --text-margin-inline-start: var(--hop-Checkbox-text-md-margin-inline-start);
1214
+ }
1215
+ .Checkbox-module__hop-Checkbox__icon___CuyIN,
1216
+ .Checkbox-module__hop-Checkbox__icon-list___r0ow6 {
1217
+ flex: 0 0 auto;
1218
+ order: 3;
1219
+ color: var(--icon-color);
1220
+ }
1221
+ .Checkbox-module__hop-Checkbox__box___7fJ21 {
1222
+ display: flex;
1223
+ flex: 0 0 auto;
1224
+ align-items: center;
1225
+ justify-content: center;
1226
+ order: 1;
1227
+ box-sizing: border-box;
1228
+ inline-size: var(--box-inline-size, var(--hop-Checkbox-box-md-inline-size));
1229
+ block-size: var(--box-block-size, var(--hop-Checkbox-box-md-block-size));
1230
+ background-color: var(--box-background-color);
1231
+ border: var(--hop-Checkbox-box-border-size) solid var(--box-border-color);
1232
+ border-radius: var(--box-border-radius);
1233
+ outline: var(--box-outline, none);
1234
+ outline-offset: 0.125rem;
1235
+ transition: background-color var(--transition-duration) var(--hop-easing-productive), border var(--transition-duration) var(--hop-easing-productive);
1236
+ }
1237
+ .Checkbox-module__hop-Checkbox__check___FNna9 {
1238
+ display: var(--check-display);
1239
+ color: var(--check-color);
1240
+ }
1241
+ .Checkbox-module__hop-Checkbox__text___C3jhg {
1242
+ flex: 0 1 auto;
1243
+ order: 2;
1244
+ min-inline-size: 0;
1245
+ margin-block-start: var(--text-top-offset, var(--hop-Checkbox-text-md-top-offset));
1246
+ margin-inline-start: var(--text-margin-inline-start, var(--hop-Checkbox-text-md-margin-inline-start));
1247
+ color: var(--text-color);
1248
+ }
1249
+
1250
+ /* css-module:/home/runner/work/wl-hopper/wl-hopper/packages/components/src/checkbox/src/CheckboxField.module.css/#css-module-data */
1251
+ .CheckboxField-module__hop-CheckboxField___9AeZ6 {
1252
+ --hop-CheckboxField-description-color: var(--hop-neutral-text-weak);
1253
+ --hop-CheckboxField-description-color-disabled: var(--hop-neutral-text-disabled);
1254
+ --hop-CheckboxField-sm-row-gap: var(--hop-space-stack-xs);
1255
+ --hop-CheckboxField-checkbox-sm-inline-size: 1rem;
1256
+ --hop-CheckboxField-description-sm-margin-inline-start: calc(var(--hop-CheckboxField-checkbox-sm-inline-size) + var(--hop-space-inline-sm));
1257
+ --hop-CheckboxField-md-row-gap: var(--hop-space-stack-xs);
1258
+ --hop-CheckboxField-checkbox-md-inline-size: 1.5rem;
1259
+ --hop-CheckboxField-description-md-margin-inline-start: calc(var(--hop-CheckboxField-checkbox-md-inline-size) + var(--hop-space-inline-md));
1260
+ --description-color: var(--hop-CheckboxField-description-color);
1261
+ display: flex;
1262
+ flex-direction: column;
1263
+ row-gap: var(--row-gap, var(--hop-space-stack-sm));
1264
+ align-items: flex-start;
1265
+ justify-content: flex-start;
1266
+ box-sizing: border-box;
1267
+ inline-size: max-content;
1268
+ max-inline-size: 100%;
1269
+ }
1270
+ .CheckboxField-module__hop-CheckboxField___9AeZ6[data-disabled] {
1271
+ --description-color: var(--hop-CheckboxField-description-color-disabled);
1272
+ }
1273
+ .CheckboxField-module__hop-CheckboxField--sm___f2P7p {
1274
+ --row-gap: var(--hop-CheckboxField-sm-row-gap);
1275
+ --description-margin-inline-start: var(--hop-CheckboxField-description-sm-margin-inline-start);
1276
+ }
1277
+ .CheckboxField-module__hop-CheckboxField--md___B8YaW {
1278
+ --row-gap: var(--hop-CheckboxField-md-row-gap);
1279
+ --description-margin-inline-start: var(--hop-CheckboxField-description-md-margin-inline-start);
1280
+ }
1281
+ .CheckboxField-module__hop-CheckboxField__description___3d2RO {
1282
+ order: 2;
1283
+ margin-inline-start: var(--description-margin-inline-start, var(--hop-CheckboxField-description-md-margin-inline-start));
1284
+ color: var(--description-color);
1285
+ }
1286
+ .CheckboxField-module__hop-CheckboxField__checkbox___gYG3u {
1287
+ order: 1;
1288
+ }
1289
+
1290
+ /* css-module:/home/runner/work/wl-hopper/wl-hopper/packages/components/src/checkbox/src/CheckboxGroup.module.css/#css-module-data */
1291
+ .CheckboxGroup-module__hop-CheckboxGroup___cbfu1 {
1292
+ --hop-CheckboxGroup-align-items: flex-start;
1293
+ --hop-CheckboxGroup-justify-content: flex-start;
1294
+ --hop-CheckboxGroup-bordered-border-color: var(--hop-neutral-border-weak);
1295
+ --hop-CheckboxGroup-sm-column-gap: var(--hop-space-inline-sm);
1296
+ --hop-CheckboxGroup-sm-row-gap: var(--hop-space-stack-sm);
1297
+ --hop-CheckboxGroup-list-sm-column-gap: var(--hop-space-inline-sm);
1298
+ --hop-CheckboxGroup-list-sm-row-gap: var(--hop-space-stack-sm);
1299
+ --hop-CheckboxGroup-bordered-sm-padding: var(--hop-space-inset-sm);
1300
+ --hop-CheckboxGroup-bordered-sm-column-gap: var(--hop-space-inline-sm);
1301
+ --hop-CheckboxGroup-bordered-sm-row-gap: var(--hop-space-stack-sm);
1302
+ --hop-CheckboxGroup-list-bordered-sm-column-gap: 0;
1303
+ --hop-CheckboxGroup-list-bordered-sm-row-gap: 0;
1304
+ --hop-CheckboxGroup-md-column-gap: var(--hop-space-inline-md);
1305
+ --hop-CheckboxGroup-md-row-gap: var(--hop-space-stack-md);
1306
+ --hop-CheckboxGroup-list-md-column-gap: var(--hop-space-inline-md);
1307
+ --hop-CheckboxGroup-list-md-row-gap: var(--hop-space-stack-md);
1308
+ --hop-CheckboxGroup-bordered-md-padding: var(--hop-space-inset-md);
1309
+ --hop-CheckboxGroup-bordered-md-column-gap: var(--hop-space-inline-sm);
1310
+ --hop-CheckboxGroup-bordered-md-row-gap: var(--hop-space-stack-sm);
1311
+ --hop-CheckboxGroup-list-bordered-md-column-gap: 0;
1312
+ --hop-CheckboxGroup-list-bordered-md-row-gap: 0;
1313
+ --hop-CheckboxGroup-vertical-flex-direction: column;
1314
+ --hop-CheckboxGroup-horizontal-flex-direction: row;
1315
+ --checkbox-border-size: 0.0625rem;
1316
+ --checkbox-border-color: var(--hop-neutral-border-weak);
1317
+ --flex-direction: var(--hop-CheckboxGroup-vertical-flex-direction);
1318
+ --align-items: var(--hop-CheckboxGroup-align-items);
1319
+ --justify-content: var(--hop-CheckboxGroup-justify-content);
1320
+ --flex-wrap: wrap;
1321
+ display: flex;
1322
+ flex-direction: column;
1323
+ gap: var(--row-gap, var(--hop-space-stack-md)) var(--column-gap, var(--hop-space-inline-md));
1324
+ align-items: var(--align-items);
1325
+ justify-content: var(--justify-content);
1326
+ box-sizing: border-box;
1327
+ inline-size: max-content;
1328
+ max-inline-size: 100%;
1329
+ }
1330
+ .CheckboxGroup-module__hop-CheckboxGroup--bordered___f-WNB {
1331
+ --list-border: var(--checkbox-border-size) solid var(--checkbox-border-color);
1332
+ --list-border-radius: var(--hop-shape-rounded-md);
1333
+ }
1334
+ .CheckboxGroup-module__hop-CheckboxGroup--sm___tbK-P {
1335
+ --column-gap: var(--hop-CheckboxGroup-sm-column-gap);
1336
+ --row-gap: var(--hop-CheckboxGroup-sm-row-gap);
1337
+ --list-column-gap: var(--hop-CheckboxGroup-list-sm-column-gap);
1338
+ --list-row-gap: var(--hop-CheckboxGroup-list-sm-row-gap);
1339
+ }
1340
+ .CheckboxGroup-module__hop-CheckboxGroup--md___HAY-5 {
1341
+ --column-gap: var(--hop-CheckboxGroup-md-column-gap);
1342
+ --row-gap: var(--hop-CheckboxGroup-md-row-gap);
1343
+ --list-column-gap: var(--hop-CheckboxGroup-list-md-column-gap);
1344
+ --list-row-gap: var(--hop-CheckboxGroup-list-md-row-gap);
1345
+ }
1346
+ .CheckboxGroup-module__hop-CheckboxGroup--bordered___f-WNB.CheckboxGroup-module__hop-CheckboxGroup--sm___tbK-P {
1347
+ --checkbox-padding: var(--hop-CheckboxGroup-bordered-sm-padding);
1348
+ --column-gap: var(--hop-CheckboxGroup-bordered-sm-column-gap);
1349
+ --row-gap: var(--hop-CheckboxGroup-bordered-sm-row-gap);
1350
+ --list-column-gap: var(--hop-CheckboxGroup-list-bordered-sm-column-gap);
1351
+ --list-row-gap: var(--hop-CheckboxGroup-list-bordered-sm-row-gap);
1352
+ }
1353
+ .CheckboxGroup-module__hop-CheckboxGroup--bordered___f-WNB.CheckboxGroup-module__hop-CheckboxGroup--md___HAY-5 {
1354
+ --checkbox-padding: var(--hop-CheckboxGroup-bordered-md-padding);
1355
+ --column-gap: var(--hop-CheckboxGroup-bordered-md-column-gap);
1356
+ --row-gap: var(--hop-CheckboxGroup-bordered-md-row-gap);
1357
+ --list-column-gap: var(--hop-CheckboxGroup-list-bordered-md-column-gap);
1358
+ --list-row-gap: var(--hop-CheckboxGroup-list-bordered-md-row-gap);
1359
+ }
1360
+ .CheckboxGroup-module__hop-CheckboxGroup___cbfu1[data-orientation=horizontal] {
1361
+ --flex-direction: var(--hop-CheckboxGroup-horizontal-flex-direction);
1362
+ }
1363
+ .CheckboxGroup-module__hop-CheckboxGroup--bordered___f-WNB[data-orientation=horizontal] {
1364
+ --flex-wrap: nowrap;
1365
+ }
1366
+ .CheckboxGroup-module__hop-CheckboxGroup___cbfu1 > .CheckboxGroup-module__hop-CheckboxGroup__label___aI2C1 {
1367
+ order: 1;
1368
+ }
1369
+ .CheckboxGroup-module__hop-CheckboxGroup__list___q1pNC {
1370
+ display: flex;
1371
+ flex-flow: var(--flex-direction) var(--flex-wrap);
1372
+ gap: var(--list-row-gap, var(--hop-space-stack-md)) var(--list-column-gap, var(--hop-space-inline-md));
1373
+ order: 2;
1374
+ box-sizing: border-box;
1375
+ inline-size: max-content;
1376
+ max-inline-size: 100%;
1377
+ border: var(--list-border, none);
1378
+ border-radius: var(--list-border-radius, 0);
1379
+ }
1380
+ .CheckboxGroup-module__hop-CheckboxGroup__list___q1pNC > .CheckboxGroup-module__hop-CheckboxGroup__checkbox___Tpw8k {
1381
+ position: relative;
1382
+ flex: 0 1 auto;
1383
+ align-content: start;
1384
+ inline-size: auto;
1385
+ min-inline-size: 0;
1386
+ padding: var(--checkbox-padding, 0);
1387
+ }
1388
+ .CheckboxGroup-module__hop-CheckboxGroup--bordered___f-WNB .CheckboxGroup-module__hop-CheckboxGroup__list___q1pNC > .CheckboxGroup-module__hop-CheckboxGroup__checkbox___Tpw8k ~ .CheckboxGroup-module__hop-CheckboxGroup__checkbox___Tpw8k::before {
1389
+ content: "";
1390
+ position: absolute;
1391
+ display: block;
1392
+ }
1393
+ .CheckboxGroup-module__hop-CheckboxGroup--bordered___f-WNB[data-orientation=vertical] .CheckboxGroup-module__hop-CheckboxGroup__list___q1pNC > .CheckboxGroup-module__hop-CheckboxGroup__checkbox___Tpw8k ~ .CheckboxGroup-module__hop-CheckboxGroup__checkbox___Tpw8k::before {
1394
+ inset-block-start: 0;
1395
+ inset-inline: 0;
1396
+ border-block-start: var(--list-border, none);
1397
+ }
1398
+ .CheckboxGroup-module__hop-CheckboxGroup--bordered___f-WNB[data-orientation=horizontal] .CheckboxGroup-module__hop-CheckboxGroup__list___q1pNC > .CheckboxGroup-module__hop-CheckboxGroup__checkbox___Tpw8k ~ .CheckboxGroup-module__hop-CheckboxGroup__checkbox___Tpw8k::before {
1399
+ inset-block: 0;
1400
+ inset-inline-start: 0;
1401
+ border-inline-start: var(--list-border, none);
1402
+ }
1403
+ .CheckboxGroup-module__hop-CheckboxGroup___cbfu1 > .CheckboxGroup-module__hop-CheckboxGroup__error-message___-5h6Q,
1404
+ .CheckboxGroup-module__hop-CheckboxGroup___cbfu1 > .CheckboxGroup-module__hop-CheckboxGroup__helper-message___0EE6B {
1405
+ order: 3;
1406
+ }
1407
+
1408
+ /* css-module:/home/runner/work/wl-hopper/wl-hopper/packages/components/src/chip/src/Chip.module.css/#css-module-data */
1409
+ .Chip-module__hop-Chip___KVUnP {
1410
+ --hop-Chip-border-size: 0.0625rem;
1411
+ --hop-Chip-border-radius: var(--hop-shape-pill);
1412
+ --hop-Chip-column-gap: var(--hop-space-inline-xs);
1413
+ --hop-Chip-xs-block-size: 1rem;
1414
+ --hop-Chip-xs-padding-inline: var(--hop-space-inset-sm);
1415
+ --hop-Chip-sm-block-size: 1.25rem;
1416
+ --hop-Chip-sm-padding-inline: var(--hop-space-inset-sm);
1417
+ --hop-Chip-md-block-size: 1.5rem;
1418
+ --hop-Chip-md-padding-inline: var(--hop-space-inset-sm);
1419
+ --hop-Chip-lg-block-size: 2rem;
1420
+ --hop-Chip-lg-padding-inline: var(--hop-space-inset-md);
1421
+ --hop-Chip-neutral-border-color: var(--hop-neutral-border-weak);
1422
+ --hop-Chip-neutral-background-color: var(--hop-neutral-surface);
1423
+ --hop-Chip-neutral-text-color: var(--hop-neutral-text);
1424
+ --hop-Chip-progress-border-color: transparent;
1425
+ --hop-Chip-progress-background-color: var(--hop-status-progress-surface);
1426
+ --hop-Chip-progress-text-color: var(--hop-status-progress-text);
1427
+ --hop-Chip-positive-border-color: transparent;
1428
+ --hop-Chip-positive-background-color: var(--hop-status-positive-surface);
1429
+ --hop-Chip-positive-text-color: var(--hop-status-positive-text);
1430
+ --hop-Chip-caution-border-color: transparent;
1431
+ --hop-Chip-caution-background-color: var(--hop-status-caution-surface);
1432
+ --hop-Chip-caution-text-color: var(--hop-status-caution-text);
1433
+ --hop-Chip-negative-border-color: transparent;
1434
+ --hop-Chip-negative-background-color: var(--hop-status-negative-surface);
1435
+ --hop-Chip-negative-text-color: var(--hop-status-negative-text);
1436
+ --hop-Chip-option1-border-color: transparent;
1437
+ --hop-Chip-option1-background-color: var(--hop-status-option1-surface);
1438
+ --hop-Chip-option1-text-color: var(--hop-status-option1-text);
1439
+ --hop-Chip-option2-border-color: transparent;
1440
+ --hop-Chip-option2-background-color: var(--hop-status-option2-surface);
1441
+ --hop-Chip-option2-text-color: var(--hop-status-option2-text);
1442
+ --hop-Chip-option3-border-color: transparent;
1443
+ --hop-Chip-option3-background-color: var(--hop-status-option3-surface);
1444
+ --hop-Chip-option3-text-color: var(--hop-status-option3-text);
1445
+ --hop-Chip-option4-border-color: transparent;
1446
+ --hop-Chip-option4-background-color: var(--hop-status-option4-surface);
1447
+ --hop-Chip-option4-text-color: var(--hop-status-option4-text);
1448
+ --hop-Chip-option5-border-color: transparent;
1449
+ --hop-Chip-option5-background-color: var(--hop-status-option5-surface);
1450
+ --hop-Chip-option5-text-color: var(--hop-status-option5-text);
1451
+ --hop-Chip-option6-border-color: transparent;
1452
+ --hop-Chip-option6-background-color: var(--hop-status-option6-surface);
1453
+ --hop-Chip-option6-text-color: var(--hop-status-option6-text);
1454
+ --hop-Chip-inactive-border-color: transparent;
1455
+ --hop-Chip-inactive-background-color: var(--hop-status-inactive-surface);
1456
+ --hop-Chip-inactive-text-color: var(--hop-status-inactive-text);
1457
+ --hop-Chip-disabled-border-color: var(--hop-neutral-border-weak);
1458
+ --hop-Chip-disabled-background-color: var(--hop-neutral-surface-disabled);
1459
+ --hop-Chip-disabled-text-color: var(--hop-neutral-text-disabled);
1460
+ --border-radius: var(--hop-Chip-border-radius);
1461
+ --border-size: var(--hop-Chip-border-size);
1462
+ --column-gap: var(--hop-Chip-column-gap);
1463
+ overflow: hidden;
1464
+ display: inline-flex;
1465
+ column-gap: var(--column-gap);
1466
+ align-items: center;
1467
+ justify-content: center;
1468
+ box-sizing: border-box;
1469
+ inline-size: max-content;
1470
+ max-inline-size: 100%;
1471
+ block-size: var(--block-size);
1472
+ padding-inline: var(--padding-inline);
1473
+ color: var(--text-color);
1474
+ white-space: nowrap;
1475
+ background-color: var(--background-color);
1476
+ border: var(--border-size) solid var(--border-color);
1477
+ border-radius: var(--border-radius);
1478
+ }
1479
+ .Chip-module__hop-Chip--xs___K9blS {
1480
+ --block-size: var(--hop-Chip-xs-block-size);
1481
+ --padding-inline: var(--hop-Chip-xs-padding-inline);
1482
+ }
1483
+ .Chip-module__hop-Chip--sm___U8plm {
1484
+ --block-size: var(--hop-Chip-sm-block-size);
1485
+ --padding-inline: var(--hop-Chip-sm-padding-inline);
1486
+ }
1487
+ .Chip-module__hop-Chip--md___oU8bV {
1488
+ --block-size: var(--hop-Chip-md-block-size);
1489
+ --padding-inline: var(--hop-Chip-md-padding-inline);
1490
+ }
1491
+ .Chip-module__hop-Chip--lg___T0jye {
1492
+ --block-size: var(--hop-Chip-lg-block-size);
1493
+ --padding-inline: var(--hop-Chip-lg-padding-inline);
1494
+ }
1495
+ .Chip-module__hop-Chip--neutral___Hepkw {
1496
+ --border-color: var(--hop-Chip-neutral-border-color);
1497
+ --background-color: var(--hop-Chip-neutral-background-color);
1498
+ --text-color: var(--hop-Chip-neutral-text-color);
1499
+ }
1500
+ .Chip-module__hop-Chip--progress___znAZi {
1501
+ --border-color: var(--hop-Chip-progress-border-color);
1502
+ --background-color: var(--hop-Chip-progress-background-color);
1503
+ --text-color: var(--hop-Chip-progress-text-color);
1504
+ }
1505
+ .Chip-module__hop-Chip--positive___tyQ-N {
1506
+ --border-color: var(--hop-Chip-positive-border-color);
1507
+ --background-color: var(--hop-Chip-positive-background-color);
1508
+ --text-color: var(--hop-Chip-positive-text-color);
1509
+ }
1510
+ .Chip-module__hop-Chip--caution___WMvPA {
1511
+ --border-color: var(--hop-Chip-caution-border-color);
1512
+ --background-color: var(--hop-Chip-caution-background-color);
1513
+ --text-color: var(--hop-Chip-caution-text-color);
1514
+ }
1515
+ .Chip-module__hop-Chip--negative___vev3J {
1516
+ --border-color: var(--hop-Chip-negative-border-color);
1517
+ --background-color: var(--hop-Chip-negative-background-color);
1518
+ --text-color: var(--hop-Chip-negative-text-color);
1519
+ }
1520
+ .Chip-module__hop-Chip--option1___WZaqu {
1521
+ --border-color: var(--hop-Chip-option1-border-color);
1522
+ --background-color: var(--hop-Chip-option1-background-color);
1523
+ --text-color: var(--hop-Chip-option1-text-color);
1524
+ }
1525
+ .Chip-module__hop-Chip--option2___GlsQ3 {
1526
+ --border-color: var(--hop-Chip-option2-border-color);
1527
+ --background-color: var(--hop-Chip-option2-background-color);
1528
+ --text-color: var(--hop-Chip-option2-text-color);
1529
+ }
1530
+ .Chip-module__hop-Chip--option3___QURDu {
1531
+ --border-color: var(--hop-Chip-option3-border-color);
1532
+ --background-color: var(--hop-Chip-option3-background-color);
1533
+ --text-color: var(--hop-Chip-option3-text-color);
1534
+ }
1535
+ .Chip-module__hop-Chip--option4___2Qznz {
1536
+ --border-color: var(--hop-Chip-option4-border-color);
1537
+ --background-color: var(--hop-Chip-option4-background-color);
1538
+ --text-color: var(--hop-Chip-option4-text-color);
1539
+ }
1540
+ .Chip-module__hop-Chip--option5___yTIji {
1541
+ --border-color: var(--hop-Chip-option5-border-color);
1542
+ --background-color: var(--hop-Chip-option5-background-color);
1543
+ --text-color: var(--hop-Chip-option5-text-color);
1544
+ }
1545
+ .Chip-module__hop-Chip--option6___FyrNE {
1546
+ --border-color: var(--hop-Chip-option6-border-color);
1547
+ --background-color: var(--hop-Chip-option6-background-color);
1548
+ --text-color: var(--hop-Chip-option6-text-color);
1549
+ }
1550
+ .Chip-module__hop-Chip--inactive___7y7LL {
1551
+ --border-color: var(--hop-Chip-inactive-border-color);
1552
+ --background-color: var(--hop-Chip-inactive-background-color);
1553
+ --text-color: var(--hop-Chip-inactive-text-color);
1554
+ }
1555
+ .Chip-module__hop-Chip--disabled___vO96s {
1556
+ --border-color: var(--hop-Chip-disabled-border-color);
1557
+ --background-color: var(--hop-Chip-disabled-background-color);
1558
+ --text-color: var(--hop-Chip-disabled-text-color);
1559
+ }
1560
+ .Chip-module__hop-Chip__icon___0V0Yr,
1561
+ .Chip-module__hop-Chip__icon-list___WP57P {
1562
+ flex: 0 0 auto;
1563
+ flex-wrap: nowrap;
1564
+ order: 1;
1565
+ }
1566
+ .Chip-module__hop-Chip__text___m-KTB {
1567
+ overflow: hidden;
1568
+ flex: 1 1 auto;
1569
+ order: 2;
1570
+ min-inline-size: 0;
1571
+ text-align: center;
1572
+ text-overflow: ellipsis;
1573
+ }
1574
+ .Chip-module__hop-Chip__end-icon___QuyDr,
1575
+ .Chip-module__hop-Chip__end-icon-list___Jso7r {
1576
+ flex: 0 0 auto;
1577
+ flex-wrap: nowrap;
1578
+ order: 3;
1579
+ }
1580
+
1581
+ /* css-module:/home/runner/work/wl-hopper/wl-hopper/packages/components/src/Link/src/Link.module.css/#css-module-data */
1582
+ .Link-module__hop-Link___vkXwU {
1583
+ --hop-Link-border-radius: var(--hop-shape-rounded-sm);
1584
+ --hop-Link-focus-ring-color: var(--hop-primary-border-focus);
1585
+ --hop-Link-color-disabled: var(--hop-neutral-text-disabled);
1586
+ --hop-Link-column-gap: var(--hop-space-inline-xs);
1587
+ --hop-Link-primary-text-color: var(--hop-primary-text);
1588
+ --hop-Link-primary-text-disabled-color: var(--hop-primary-text-disabled);
1589
+ --hop-Link-primary-text-hover-color: var(--hop-primary-text-hover);
1590
+ --hop-Link-primary-text-pressed-color: var(--hop-primary-text-press);
1591
+ --hop-Link-neutral-text-color: var(--hop-neutral-text);
1592
+ --hop-Link-neutral-text-disabled-color: var(--hop-neutral-text-disabled);
1593
+ --hop-Link-neutral-text-hover-color: var(--hop-neutral-text-hover);
1594
+ --hop-Link-neutral-text-pressed-color: var(--hop-neutral-text-press);
1595
+ cursor: pointer;
1596
+ display: inline-flex;
1597
+ column-gap: var(--hop-Link-column-gap);
1598
+ align-items: center;
1599
+ box-sizing: border-box;
1600
+ inline-size: fit-content;
1601
+ text-decoration: none;
1602
+ text-underline-offset: 0.125rem;
1603
+ border-radius: var(--hop-Link-border-radius);
1604
+ outline: none;
1605
+ outline-offset: 0.125rem;
1606
+ }
1607
+ .Link-module__hop-Link___vkXwU[data-focus-visible] {
1608
+ outline: 0.125rem solid var(--hop-Link-focus-ring-color);
1609
+ }
1610
+ .Link-module__hop-Link___vkXwU[data-disabled] {
1611
+ cursor: default;
1612
+ }
1613
+ .Link-module__hop-Link--quiet___FEyKa[data-focus-visible],
1614
+ .Link-module__hop-Link--quiet___FEyKa[data-hovered] {
1615
+ text-decoration: underline;
1616
+ }
1617
+ .Link-module__hop-Link___vkXwU:not(.Link-module__hop-Link--quiet___FEyKa) {
1618
+ text-decoration: underline;
1619
+ }
1620
+ .Link-module__hop-Link--primary___KRkww {
1621
+ color: var(--hop-Link-primary-text-color);
1622
+ }
1623
+ .Link-module__hop-Link--primary___KRkww[data-disabled] {
1624
+ color: var(--hop-Link-primary-text-disabled-color);
1625
+ }
1626
+ .Link-module__hop-Link--primary___KRkww:not([data-disabled])[data-focus-visible],
1627
+ .Link-module__hop-Link--primary___KRkww:not([data-disabled])[data-hovered] {
1628
+ color: var(--hop-Link-primary-text-hover-color);
1629
+ }
1630
+ .Link-module__hop-Link--primary___KRkww:not([data-disabled])[data-pressed] {
1631
+ color: var(--hop-Link-primary-text-pressed-color);
1632
+ }
1633
+ .Link-module__hop-Link--secondary___OU7bb {
1634
+ color: var(--hop-Link-neutral-text-color);
1635
+ }
1636
+ .Link-module__hop-Link--secondary___OU7bb[data-disabled] {
1637
+ color: var(--hop-Link-neutral-text-disabled-color);
1638
+ }
1639
+ .Link-module__hop-Link--secondary___OU7bb:not([data-disabled])[data-focus-visible],
1640
+ .Link-module__hop-Link--secondary___OU7bb:not([data-disabled])[data-hovered] {
1641
+ color: var(--hop-Link-neutral-text-hover-color);
1642
+ }
1643
+ .Link-module__hop-Link--secondary___OU7bb:not([data-disabled])[data-pressed] {
1644
+ color: var(--hop-Link-neutral-text-pressed-color);
1645
+ }
1646
+ .Link-module__hop-Link__icon___zgn-r,
1647
+ .Link-module__hop-Link__icon-list___tYGCE {
1648
+ order: 2;
1649
+ }
1650
+ .Link-module__hop-Link__text___fxC1y {
1651
+ order: 1;
1652
+ }
1653
+ .Link-module__hop-Link__start-icon___jTw3J,
1654
+ .Link-module__hop-Link__start-icon-list___6uk1L {
1655
+ order: 0;
1656
+ }
1657
+
1658
+ /* css-module:/home/runner/work/wl-hopper/wl-hopper/packages/components/src/radio/src/Radio.module.css/#css-module-data */
1659
+ .Radio-module__hop-Radio___EkCwX {
1660
+ --hop-Radio-box-border-size: 0.0625rem;
1661
+ --hop-Radio-box-border-color: var(--hop-neutral-border);
1662
+ --hop-Radio-box-background-color: var(--hop-neutral-surface);
1663
+ --hop-Radio-bullet-color: var(--hop-neutral-icon-selected);
1664
+ --hop-Radio-bullet-display: none;
1665
+ --hop-Radio-text-color: var(--hop-neutral-text);
1666
+ --hop-Radio-icon-color: var(--hop-neutral-icon);
1667
+ --hop-Radio-box-border-color-hover: var(--hop-neutral-border-hover);
1668
+ --hop-Radio-box-background-color-hover: var(--hop-neutral-surface-hover);
1669
+ --hop-Radio-box-border-color-selected-hover: var(--hop-neutral-border-selected);
1670
+ --hop-Radio-box-background-color-selected-hover: var(--hop-neutral-surface-selected);
1671
+ --hop-Radio-text-color-hover: var(--hop-neutral-text-hover);
1672
+ --hop-Radio-icon-color-hover: var(--hop-neutral-icon-hover);
1673
+ --hop-Radio-box-border-color-pressed: var(--hop-neutral-border-press);
1674
+ --hop-Radio-box-background-color-pressed: var(--hop-neutral-surface-press);
1675
+ --hop-Radio-box-border-color-selected-pressed: var(--hop-neutral-border-selected);
1676
+ --hop-Radio-box-background-color-selected-pressed: var(--hop-neutral-surface-selected);
1677
+ --hop-Radio-text-color-pressed: var(--hop-neutral-text-press);
1678
+ --hop-Radio-icon-color-pressed: var(--hop-neutral-icon-press);
1679
+ --hop-Radio-box-border-color-selected: var(--hop-neutral-border-selected);
1680
+ --hop-Radio-box-background-color-selected: var(--hop-neutral-surface-selected);
1681
+ --hop-Radio-bullet-display-selected: block;
1682
+ --hop-Radio-text-color-selected: var(--hop-neutral-text);
1683
+ --hop-Radio-icon-color-selected: var(--hop-neutral-icon);
1684
+ --hop-Radio-box-border-color-disabled: var(--hop-neutral-border-disabled);
1685
+ --hop-Radio-box-background-color-disabled: var(--hop-neutral-surface-disabled);
1686
+ --hop-Radio-box-border-color-selected-disabled: var(--hop-neutral-border-disabled);
1687
+ --hop-Radio-box-background-color-selected-disabled: var(--hop-neutral-surface-disabled);
1688
+ --hop-Radio-bullet-color-disabled: var(--hop-neutral-icon-disabled);
1689
+ --hop-Radio-text-color-disabled: var(--hop-neutral-text-disabled);
1690
+ --hop-Radio-icon-color-disabled: var(--hop-neutral-icon-disabled);
1691
+ --hop-Radio-box-border-color-focus: var(--hop-neutral-border-hover);
1692
+ --hop-Radio-box-background-color-focus: var(--hop-neutral-surface-hover);
1693
+ --hop-Radio-box-focus-ring-color: var(--hop-primary-border-focus);
1694
+ --hop-Radio-box-border-color-selected-focus: var(--hop-neutral-border-selected);
1695
+ --hop-Radio-box-background-color-selected-focus: var(--hop-neutral-surface-selected);
1696
+ --hop-Radio-text-color-focus: var(--hop-neutral-text);
1697
+ --hop-Radio-icon-color-focus: var(--hop-neutral-icon);
1698
+ --hop-Radio-box-border-color-invalid: var(--hop-danger-border-strong);
1699
+ --hop-Radio-box-background-color-invalid: var(--hop-neutral-surface);
1700
+ --hop-Radio-box-border-color-hover-invalid: var(--hop-danger-border-strong);
1701
+ --hop-Radio-box-background-color-hover-invalid: var(--hop-danger-surface);
1702
+ --hop-Radio-box-border-color-pressed-invalid: var(--hop-danger-border-press);
1703
+ --hop-Radio-box-background-color-pressed-invalid: var(--hop-danger-surface-weak);
1704
+ --hop-Radio-box-border-color-focus-invalid: var(--hop-danger-border-strong);
1705
+ --hop-Radio-box-background-color-focus-invalid: var(--hop-danger-surface);
1706
+ --hop-Radio-box-border-color-selected-invalid: var(--hop-danger-border-strong);
1707
+ --hop-Radio-box-background-color-selected-invalid: var(--hop-danger-surface-strong);
1708
+ --hop-Radio-bullet-color-invalid: var(--hop-danger-icon-strong);
1709
+ --hop-Radio-text-color-invalid: var(--hop-danger-text-weak);
1710
+ --hop-Radio-icon-color-invalid: var(--hop-danger-icon-weak);
1711
+ --hop-Radio-text-color-hover-invalid: var(--hop-danger-text-weak-hover);
1712
+ --hop-Radio-icon-color-hover-invalid: var(--hop-danger-icon-weak-hover);
1713
+ --hop-Radio-text-color-pressed-invalid: var(--hop-danger-text-weak-press);
1714
+ --hop-Radio-box-sm-inline-size: 1rem;
1715
+ --hop-Radio-box-sm-block-size: 1rem;
1716
+ --hop-Radio-text-sm-top-offset: calc((var(--box-inline-size) - (var(--hop-body-sm-line-height) * var(--hop-body-sm-font-size))) / 2);
1717
+ --hop-Radio-text-sm-margin-inline-start: calc(var(--hop-space-inline-sm) - var(--hop-space-inline-xs));
1718
+ --hop-Radio-box-md-inline-size: 1.5rem;
1719
+ --hop-Radio-box-md-block-size: 1.5rem;
1720
+ --hop-Radio-text-md-top-offset: calc((var(--box-inline-size) - (var(--hop-body-md-line-height) * var(--hop-body-md-font-size))) / 2);
1721
+ --hop-Radio-text-md-margin-inline-start: calc(var(--hop-space-inline-md) - var(--hop-space-inline-xs));
1722
+ --box-background-color: var(--hop-Radio-box-background-color);
1723
+ --box-border-color: var(--hop-Radio-box-border-color);
1724
+ --box-border-radius: var(--hop-shape-circle);
1725
+ --bullet-color: var(--hop-Radio-bullet-color);
1726
+ --bullet-display: var(--hop-Radio-bullet-display);
1727
+ --cursor: pointer;
1728
+ --text-color: var(--hop-Radio-text-color);
1729
+ --icon-color: var(--hop-Radio-icon-color);
1730
+ --description-color: var(--hop-Radio-description-color);
1731
+ --transition-duration: var(--hop-easing-duration-2);
1732
+ cursor: var(--cursor);
1733
+ display: flex;
1734
+ column-gap: var(--hop-space-inline-xs);
1735
+ align-items: start;
1736
+ justify-content: start;
1737
+ box-sizing: border-box;
1738
+ inline-size: max-content;
1739
+ max-inline-size: 100%;
1740
+ }
1741
+ .Radio-module__hop-Radio___EkCwX[data-hovered] {
1742
+ --box-background-color: var(--hop-Radio-box-background-color-hover);
1743
+ --box-border-color: var(--hop-Radio-box-border-color-hover);
1744
+ --text-color: var(--hop-Radio-text-color-hover);
1745
+ --icon-color: var(--hop-Radio-icon-color-hover);
1746
+ --description-color: var(--hop-Radio-description-color-hover);
1747
+ }
1748
+ .Radio-module__hop-Radio___EkCwX[data-pressed] {
1749
+ --box-background-color: var(--hop-Radio-box-background-color-pressed);
1750
+ --box-border-color: var(--hop-Radio-box-border-color-pressed);
1751
+ --text-color: var(--hop-Radio-text-color-pressed);
1752
+ --icon-color: var(--hop-Radio-icon-color-pressed);
1753
+ --description-color: var(--hop-Radio-description-color-pressed);
1754
+ }
1755
+ .Radio-module__hop-Radio___EkCwX[data-selected] {
1756
+ --box-background-color: var(--hop-Radio-box-background-color-selected-hover);
1757
+ --box-border-color: var(--hop-Radio-box-border-color-selected-hover);
1758
+ --bullet-display: var(--hop-Radio-bullet-display-selected);
1759
+ --text-color: var(--hop-Radio-text-color-selected);
1760
+ --icon-color: var(--hop-Radio-icon-color-selected);
1761
+ --description-color: var(--hop-Radio-description-color-selected);
1762
+ }
1763
+ .Radio-module__hop-Radio___EkCwX[data-focus-visible] {
1764
+ --box-background-color: var(--hop-Radio-box-background-color-focus);
1765
+ --box-border-color: var(--hop-Radio-box-border-color-focus);
1766
+ --box-outline: 0.125rem solid var(--hop-Radio-box-focus-ring-color);
1767
+ --text-color: var(--hop-Radio-text-color-focus);
1768
+ --icon-color: var(--hop-Radio-icon-color-focus);
1769
+ --description-color: var(--hop-Radio-description-color-focus);
1770
+ }
1771
+ .Radio-module__hop-Radio___EkCwX[data-focus-visible][data-selected] {
1772
+ --box-background-color: var(--hop-Radio-box-background-color-selected-focus);
1773
+ --box-border-color: var(--hop-Radio-box-border-color-selected-focus);
1774
+ }
1775
+ .Radio-module__hop-Radio___EkCwX[data-invalid] {
1776
+ --box-background-color: var(--hop-Radio-box-background-color-invalid);
1777
+ --box-border-color: var(--hop-Radio-box-border-color-invalid);
1778
+ --bullet-color: var(--hop-Radio-bullet-color-invalid);
1779
+ --text-color: var(--hop-Radio-text-color-invalid);
1780
+ --icon-color: var(--hop-Radio-icon-color-invalid);
1781
+ --description-color: var(--hop-Radio-description-color-invalid);
1782
+ }
1783
+ .Radio-module__hop-Radio___EkCwX[data-invalid][data-hovered] {
1784
+ --box-background-color: var(--hop-Radio-box-background-color-hover-invalid);
1785
+ --box-border-color: var(--hop-Radio-box-border-color-hover-invalid);
1786
+ --text-color: var(--hop-Radio-text-color-hover-invalid);
1787
+ --icon-color: var(--hop-Radio-text-color-hover-invalid);
1788
+ }
1789
+ .Radio-module__hop-Radio___EkCwX[data-invalid][data-pressed] {
1790
+ --box-background-color: var(--hop-Radio-box-background-color-pressed-invalid);
1791
+ --box-border-color: var(--hop-Radio-box-border-color-pressed-invalid);
1792
+ --text-color: var(--hop-Radio-text-color-pressed-invalid);
1793
+ --icon-color: var(--hop-Radio-icon-color-pressed-invalid);
1794
+ }
1795
+ .Radio-module__hop-Radio___EkCwX[data-invalid][data-focus-visible] {
1796
+ --box-background-color: var(--hop-Radio-box-background-color-focus-invalid);
1797
+ --box-border-color: var(--hop-Radio-box-border-color-focus-invalid);
1798
+ }
1799
+ .Radio-module__hop-Radio___EkCwX[data-invalid][data-selected] {
1800
+ --box-background-color: var(--hop-Radio-box-background-color-selected-invalid);
1801
+ --box-border-color: var(--hop-Radio-box-border-color-selected-invalid);
1802
+ }
1803
+ .Radio-module__hop-Radio___EkCwX[data-disabled] {
1804
+ --box-background-color: var(--hop-Radio-box-background-color-disabled);
1805
+ --box-border-color: var(--hop-Radio-box-border-color-disabled);
1806
+ --bullet-color: var(--hop-Radio-bullet-color-disabled);
1807
+ --cursor: not-allowed;
1808
+ --text-color: var(--hop-Radio-text-color-disabled);
1809
+ --icon-color: var(--hop-Radio-icon-color-disabled);
1810
+ --description-color: var(--hop-Radio-description-color-disabled);
1811
+ }
1812
+ .Radio-module__hop-Radio___EkCwX[data-disabled][data-selected] {
1813
+ --box-background-color: var(--hop-Radio-box-background-color-selected-disabled);
1814
+ --box-border-color: var(--hop-Radio-box-border-color-selected-disabled);
1815
+ }
1816
+ .Radio-module__hop-Radio--sm___-GEPO {
1817
+ --box-inline-size: var(--hop-Radio-box-sm-inline-size);
1818
+ --box-block-size: var(--hop-Radio-box-sm-block-size);
1819
+ --text-top-offset: var(--hop-Radio-text-sm-top-offset);
1820
+ --text-margin-inline-start: var(--hop-Radio-text-sm-margin-inline-start);
1821
+ }
1822
+ .Radio-module__hop-Radio--md___ao9Hn {
1823
+ --box-inline-size: var(--hop-Radio-box-md-inline-size);
1824
+ --box-block-size: var(--hop-Radio-box-md-block-size);
1825
+ --text-top-offset: var(--hop-Radio-text-md-top-offset);
1826
+ --text-margin-inline-start: var(--hop-Radio-text-md-margin-inline-start);
1827
+ }
1828
+ .Radio-module__hop-Radio__icon___jA99I,
1829
+ .Radio-module__hop-Radio__icon-list___mIXPB {
1830
+ flex: 0 0 auto;
1831
+ order: 3;
1832
+ color: var(--icon-color);
1833
+ }
1834
+ .Radio-module__hop-Radio__box___8S6fY {
1835
+ display: flex;
1836
+ flex: 0 0 auto;
1837
+ align-items: center;
1838
+ justify-content: center;
1839
+ order: 1;
1840
+ box-sizing: border-box;
1841
+ inline-size: var(--box-inline-size, var(--hop-Radio-box-md-inline-size));
1842
+ block-size: var(--box-block-size, var(--hop-Radio-box-md-block-size));
1843
+ background-color: var(--box-background-color);
1844
+ border: var(--hop-Radio-box-border-size) solid var(--box-border-color);
1845
+ border-radius: var(--box-border-radius);
1846
+ outline: var(--box-outline, none);
1847
+ outline-offset: 0.125rem;
1848
+ transition: background-color var(--transition-duration) var(--hop-easing-productive), border var(--transition-duration) var(--hop-easing-productive);
1849
+ }
1850
+ .Radio-module__hop-Radio__bullet___ZOkCk {
1851
+ display: var(--bullet-display);
1852
+ color: var(--bullet-color);
1853
+ }
1854
+ .Radio-module__hop-Radio__text___GmMaW {
1855
+ flex: 0 1 auto;
1856
+ order: 2;
1857
+ min-inline-size: 0;
1858
+ margin-block-start: var(--text-top-offset, var(--hop-Radio-text-md-top-offset));
1859
+ margin-inline-start: var(--text-margin-inline-start, var(--hop-Radio-text-md-margin-inline-start));
1860
+ color: var(--text-color);
1861
+ }
1862
+
1863
+ /* css-module:/home/runner/work/wl-hopper/wl-hopper/packages/components/src/radio/src/RadioField.module.css/#css-module-data */
1864
+ .RadioField-module__hop-RadioField___ZaNAp {
1865
+ --hop-RadioField-description-color: var(--hop-neutral-text-weak);
1866
+ --hop-RadioField-description-color-disabled: var(--hop-neutral-text-disabled);
1867
+ --hop-RadioField-sm-row-gap: var(--hop-space-stack-xs);
1868
+ --hop-RadioField-radio-sm-inline-size: 1rem;
1869
+ --hop-RadioField-description-sm-margin-inline-start: calc(var(--hop-RadioField-radio-sm-inline-size) + var(--hop-space-inline-sm));
1870
+ --hop-RadioField-md-row-gap: var(--hop-space-stack-xs);
1871
+ --hop-RadioField-radio-md-inline-size: 1.5rem;
1872
+ --hop-RadioField-description-md-margin-inline-start: calc(var(--hop-RadioField-radio-md-inline-size) + var(--hop-space-inline-md));
1873
+ --description-color: var(--hop-RadioField-description-color);
1874
+ display: flex;
1875
+ flex-direction: column;
1876
+ row-gap: var(--row-gap, var(--hop-space-stack-sm));
1877
+ align-items: flex-start;
1878
+ justify-content: flex-start;
1879
+ box-sizing: border-box;
1880
+ inline-size: max-content;
1881
+ max-inline-size: 100%;
1882
+ }
1883
+ .RadioField-module__hop-RadioField___ZaNAp[data-disabled] {
1884
+ --description-color: var(--hop-RadioField-description-color-disabled);
1885
+ }
1886
+ .RadioField-module__hop-RadioField--sm___7g2-S {
1887
+ --row-gap: var(--hop-RadioField-sm-row-gap);
1888
+ --description-margin-inline-start: var(--hop-RadioField-description-sm-margin-inline-start);
1889
+ }
1890
+ .RadioField-module__hop-RadioField--md___-5Row {
1891
+ --row-gap: var(--hop-RadioField-md-row-gap);
1892
+ --description-margin-inline-start: var(--hop-RadioField-description-md-margin-inline-start);
1893
+ }
1894
+ .RadioField-module__hop-RadioField__description___5wJkd {
1895
+ order: 2;
1896
+ margin-inline-start: var(--description-margin-inline-start, var(--hop-RadioField-description-md-margin-inline-start));
1897
+ color: var(--description-color);
1898
+ }
1899
+ .RadioField-module__hop-RadioField__radio___exdNe {
1900
+ order: 1;
1901
+ }
1902
+
1903
+ /* css-module:/home/runner/work/wl-hopper/wl-hopper/packages/components/src/radio/src/RadioGroup.module.css/#css-module-data */
1904
+ .RadioGroup-module__hop-RadioGroup___2BFRj {
1905
+ --hop-RadioGroup-align-items: flex-start;
1906
+ --hop-RadioGroup-justify-content: flex-start;
1907
+ --hop-RadioGroup-bordered-border-color: var(--hop-neutral-border-weak);
1908
+ --hop-RadioGroup-sm-column-gap: var(--hop-space-inline-sm);
1909
+ --hop-RadioGroup-sm-row-gap: var(--hop-space-stack-sm);
1910
+ --hop-RadioGroup-list-sm-column-gap: var(--hop-space-inline-sm);
1911
+ --hop-RadioGroup-list-sm-row-gap: var(--hop-space-stack-sm);
1912
+ --hop-RadioGroup-bordered-sm-padding: var(--hop-space-inset-sm);
1913
+ --hop-RadioGroup-bordered-sm-column-gap: var(--hop-space-inline-sm);
1914
+ --hop-RadioGroup-bordered-sm-row-gap: var(--hop-space-stack-sm);
1915
+ --hop-RadioGroup-list-bordered-sm-column-gap: 0;
1916
+ --hop-RadioGroup-list-bordered-sm-row-gap: 0;
1917
+ --hop-RadioGroup-md-column-gap: var(--hop-space-inline-md);
1918
+ --hop-RadioGroup-md-row-gap: var(--hop-space-stack-md);
1919
+ --hop-RadioGroup-list-md-column-gap: var(--hop-space-inline-md);
1920
+ --hop-RadioGroup-list-md-row-gap: var(--hop-space-stack-md);
1921
+ --hop-RadioGroup-bordered-md-padding: var(--hop-space-inset-md);
1922
+ --hop-RadioGroup-bordered-md-column-gap: var(--hop-space-inline-sm);
1923
+ --hop-RadioGroup-bordered-md-row-gap: var(--hop-space-stack-sm);
1924
+ --hop-RadioGroup-list-bordered-md-column-gap: 0;
1925
+ --hop-RadioGroup-list-bordered-md-row-gap: 0;
1926
+ --hop-RadioGroup-vertical-flex-direction: column;
1927
+ --hop-RadioGroup-horizontal-flex-direction: row;
1928
+ --radio-border-size: 0.0625rem;
1929
+ --radio-border-color: var(--hop-neutral-border-weak);
1930
+ --flex-direction: var(--hop-RadioGroup-vertical-flex-direction);
1931
+ --align-items: var(--hop-RadioGroup-align-items);
1932
+ --justify-content: var(--hop-RadioGroup-justify-content);
1933
+ --flex-wrap: wrap;
1934
+ --inline-size: max-content;
1935
+ display: flex;
1936
+ flex-direction: column;
1937
+ gap: var(--row-gap, var(--hop-space-stack-md)) var(--column-gap, var(--hop-space-inline-md));
1938
+ align-items: var(--align-items);
1939
+ justify-content: var(--justify-content);
1940
+ box-sizing: border-box;
1941
+ inline-size: var(--inline-size);
1942
+ max-inline-size: 100%;
1943
+ }
1944
+ .RadioGroup-module__hop-RadioGroup--bordered___TWlEk {
1945
+ --list-border: var(--radio-border-size) solid var(--radio-border-color);
1946
+ --list-border-radius: var(--hop-shape-rounded-md);
1947
+ }
1948
+ .RadioGroup-module__hop-RadioGroup--sm___sU8V8 {
1949
+ --column-gap: var(--hop-RadioGroup-sm-column-gap);
1950
+ --row-gap: var(--hop-RadioGroup-sm-row-gap);
1951
+ --list-column-gap: var(--hop-RadioGroup-list-sm-column-gap);
1952
+ --list-row-gap: var(--hop-RadioGroup-list-sm-row-gap);
1953
+ }
1954
+ .RadioGroup-module__hop-RadioGroup--md___o0jW4 {
1955
+ --column-gap: var(--hop-RadioGroup-md-column-gap);
1956
+ --row-gap: var(--hop-RadioGroup-md-row-gap);
1957
+ --list-column-gap: var(--hop-RadioGroup-list-md-column-gap);
1958
+ --list-row-gap: var(--hop-RadioGroup-list-md-row-gap);
1959
+ }
1960
+ .RadioGroup-module__hop-RadioGroup--bordered___TWlEk.RadioGroup-module__hop-RadioGroup--sm___sU8V8 {
1961
+ --radio-padding: var(--hop-RadioGroup-bordered-sm-padding);
1962
+ --column-gap: var(--hop-RadioGroup-bordered-sm-column-gap);
1963
+ --row-gap: var(--hop-RadioGroup-bordered-sm-row-gap);
1964
+ --list-column-gap: var(--hop-RadioGroup-list-bordered-sm-column-gap);
1965
+ --list-row-gap: var(--hop-RadioGroup-list-bordered-sm-row-gap);
1966
+ }
1967
+ .RadioGroup-module__hop-RadioGroup--bordered___TWlEk.RadioGroup-module__hop-RadioGroup--md___o0jW4 {
1968
+ --radio-padding: var(--hop-RadioGroup-bordered-md-padding);
1969
+ --column-gap: var(--hop-RadioGroup-bordered-md-column-gap);
1970
+ --row-gap: var(--hop-RadioGroup-bordered-md-row-gap);
1971
+ --list-column-gap: var(--hop-RadioGroup-list-bordered-md-column-gap);
1972
+ --list-row-gap: var(--hop-RadioGroup-list-bordered-md-row-gap);
1973
+ }
1974
+ .RadioGroup-module__hop-RadioGroup___2BFRj[data-orientation=horizontal] {
1975
+ --flex-direction: var(--hop-RadioGroup-horizontal-flex-direction);
1976
+ }
1977
+ .RadioGroup-module__hop-RadioGroup--bordered___TWlEk[data-orientation=horizontal] {
1978
+ --flex-wrap: nowrap;
1979
+ }
1980
+ .RadioGroup-module__hop-RadioGroup___2BFRj > .RadioGroup-module__hop-RadioGroup__label___DohOP {
1981
+ order: 1;
1982
+ }
1983
+ .RadioGroup-module__hop-RadioGroup__list___csilJ {
1984
+ display: flex;
1985
+ flex-flow: var(--flex-direction) var(--flex-wrap);
1986
+ gap: var(--list-row-gap, var(--hop-space-stack-md)) var(--list-column-gap, var(--hop-space-inline-md));
1987
+ order: 2;
1988
+ box-sizing: border-box;
1989
+ inline-size: var(--inline-size);
1990
+ max-inline-size: 100%;
1991
+ border: var(--list-border, none);
1992
+ border-radius: var(--list-border-radius, 0);
1993
+ }
1994
+ .RadioGroup-module__hop-RadioGroup__list___csilJ > .RadioGroup-module__hop-RadioGroup__radio___SpMaJ {
1995
+ position: relative;
1996
+ flex: 0 1 auto;
1997
+ align-content: start;
1998
+ inline-size: auto;
1999
+ min-inline-size: 0;
2000
+ padding: var(--radio-padding, 0);
2001
+ }
2002
+ .RadioGroup-module__hop-RadioGroup--bordered___TWlEk .RadioGroup-module__hop-RadioGroup__list___csilJ > .RadioGroup-module__hop-RadioGroup__radio___SpMaJ ~ .RadioGroup-module__hop-RadioGroup__radio___SpMaJ::before {
2003
+ content: "";
2004
+ position: absolute;
2005
+ display: block;
2006
+ }
2007
+ .RadioGroup-module__hop-RadioGroup--bordered___TWlEk[data-orientation=vertical] .RadioGroup-module__hop-RadioGroup__list___csilJ > .RadioGroup-module__hop-RadioGroup__radio___SpMaJ ~ .RadioGroup-module__hop-RadioGroup__radio___SpMaJ::before {
2008
+ inset-block-start: 0;
2009
+ inset-inline: 0;
2010
+ border-block-start: var(--list-border, none);
2011
+ }
2012
+ .RadioGroup-module__hop-RadioGroup--bordered___TWlEk[data-orientation=horizontal] .RadioGroup-module__hop-RadioGroup__list___csilJ > .RadioGroup-module__hop-RadioGroup__radio___SpMaJ ~ .RadioGroup-module__hop-RadioGroup__radio___SpMaJ::before {
2013
+ inset-block: 0;
2014
+ inset-inline-start: 0;
2015
+ border-inline-start: var(--list-border, none);
2016
+ }
2017
+ .RadioGroup-module__hop-RadioGroup___2BFRj > .RadioGroup-module__hop-RadioGroup__error-message___4TlqM,
2018
+ .RadioGroup-module__hop-RadioGroup___2BFRj > .RadioGroup-module__hop-RadioGroup__helper-message___FFuEK {
2019
+ order: 3;
2020
+ }
2021
+
2022
+ /* css-module:/home/runner/work/wl-hopper/wl-hopper/packages/components/src/switch/src/Switch.module.css/#css-module-data */
2023
+ .Switch-module__hop-Switch___n4jxE {
2024
+ --hop-Switch-border-size: 0.0625rem;
2025
+ --hop-Switch-border-color: var(--hop-neutral-border);
2026
+ --hop-Switch-border-radius: var(--hop-shape-rounded-lg);
2027
+ --hop-Switch-background-color: var(--hop-neutral-surface);
2028
+ --hop-Switch-thumb-color: var(--hop-neutral-icon);
2029
+ --hop-Switch-text-color: var(--hop-neutral-text);
2030
+ --hop-Switch-border-color-hover: var(--hop-neutral-border-hover);
2031
+ --hop-Switch-background-color-hover: var(--hop-neutral-surface-hover);
2032
+ --hop-Switch-thumb-color-hover: var(--hop-neutral-icon-hover);
2033
+ --hop-Switch-text-color-hover: var(--hop-neutral-text-hover);
2034
+ --hop-Switch-border-color-pressed: var(--hop-neutral-border-press);
2035
+ --hop-Switch-background-color-pressed: var(--hop-neutral-surface-press);
2036
+ --hop-Switch-thumb-color-pressed: var(--hop-neutral-icon-press);
2037
+ --hop-Switch-text-color-pressed: var(--hop-neutral-text-press);
2038
+ --hop-Switch-border-color-focus: var(--hop-neutral-border-hover);
2039
+ --hop-Switch-background-color-focus: var(--hop-neutral-surface-hover);
2040
+ --hop-Switch-thumb-color-focus: var(--hop-neutral-icon-hover);
2041
+ --hop-Switch-focus-ring-color: var(--hop-primary-border-focus);
2042
+ --hop-Switch-text-color-focus: var(--hop-neutral-text);
2043
+ --hop-Switch-border-color-selected: var(--hop-neutral-border-selected);
2044
+ --hop-Switch-background-color-selected: var(--hop-neutral-surface-selected);
2045
+ --hop-Switch-thumb-color-selected: var(--hop-neutral-icon-selected);
2046
+ --hop-Switch-text-color-selected: var(--hop-neutral-text);
2047
+ --hop-Switch-border-color-disabled: var(--hop-neutral-border-disabled);
2048
+ --hop-Switch-background-color-disabled: var(--hop-neutral-surface-disabled);
2049
+ --hop-Switch-thumb-color-disabled: var(--hop-neutral-icon-disabled);
2050
+ --hop-Switch-text-color-disabled: var(--hop-neutral-text-disabled);
2051
+ --hop-Switch-inline-size-md: 3rem;
2052
+ --hop-Switch-block-size-md: 1.5rem;
2053
+ --hop-Switch-thumb-size-md: 1rem;
2054
+ --hop-Switch-inset-inline-start-md: var(--hop-space-inset-xs);
2055
+ --hop-Switch-text-top-offset-md: calc((var(--block-size) - (var(--hop-body-md-line-height) * var(--hop-body-md-font-size))) / 2);
2056
+ --hop-Switch-inline-size-sm: 2rem;
2057
+ --hop-Switch-block-size-sm: 1rem;
2058
+ --hop-Switch-thumb-size-sm: 0.75rem;
2059
+ --hop-Switch-inset-inline-start-sm: calc(var(--hop-space-inset-xs) / 2);
2060
+ --hop-Switch-text-top-offset-sm: calc((var(--block-size) - (var(--hop-body-sm-line-height) * var(--hop-body-sm-font-size))) / 2);
2061
+ --border-size: var(--hop-Switch-border-size);
2062
+ --border-color: var(--hop-Switch-border-color);
2063
+ --border-radius: var(--hop-Switch-border-radius);
2064
+ --background-color: var(--hop-Switch-background-color);
2065
+ --column-gap: var(--hop-space-inline-sm);
2066
+ --thumb-color: var(--hop-Switch-thumb-color);
2067
+ --thumb-transform: translate(0, -50%);
2068
+ --outline: none;
2069
+ --cursor: pointer;
2070
+ --text-color: var(--hop-Switch-text-color);
2071
+ cursor: var(--cursor);
2072
+ display: inline-flex;
2073
+ column-gap: var(--column-gap);
2074
+ align-items: center;
2075
+ align-items: start;
2076
+ justify-content: start;
2077
+ box-sizing: border-box;
2078
+ inline-size: max-content;
2079
+ max-inline-size: 100%;
2080
+ }
2081
+ .Switch-module__hop-Switch--sm___-f1X2 {
2082
+ --inline-size: var(--hop-Switch-inline-size-sm);
2083
+ --block-size: var(--hop-Switch-block-size-sm);
2084
+ --thumb-size: var(--hop-Switch-thumb-size-sm);
2085
+ --inset-inline-start: var(--hop-Switch-inset-inline-start-sm);
2086
+ --text-top-offset: var(--hop-Switch-text-top-offset-sm);
2087
+ }
2088
+ .Switch-module__hop-Switch--md___QZsov {
2089
+ --inline-size: var(--hop-Switch-inline-size-md);
2090
+ --block-size: var(--hop-Switch-block-size-md);
2091
+ --thumb-size: var(--hop-Switch-thumb-size-md);
2092
+ --inset-inline-start: var(--hop-Switch-inset-inline-start-md);
2093
+ --text-top-offset: var(--hop-Switch-text-top-offset-md);
2094
+ }
2095
+ .Switch-module__hop-Switch___n4jxE[data-hovered] {
2096
+ --border-color: var(--hop-Switch-border-color-hover);
2097
+ --background-color: var(--hop-Switch-background-color-hover);
2098
+ --thumb-color: var(--hop-Switch-thumb-color-hover);
2099
+ --text-color: var(--hop-Switch-text-color-hover);
2100
+ }
2101
+ .Switch-module__hop-Switch___n4jxE[data-pressed],
2102
+ .Switch-module__hop-Switch___n4jxE[data-pressed][data-focus-visible] {
2103
+ --border-color: var(--hop-Switch-border-color-pressed);
2104
+ --background-color: var(--hop-Switch-background-color-pressed);
2105
+ --thumb-color: var(--hop-Switch-thumb-color-pressed);
2106
+ --text-color: var(--hop-Switch-text-color-pressed);
2107
+ }
2108
+ .Switch-module__hop-Switch___n4jxE[data-focus-visible] {
2109
+ --border-color: var(--hop-Switch-border-color-focus);
2110
+ --background-color: var(--hop-Switch-background-color-focus);
2111
+ --thumb-color: var(--hop-Switch-thumb-color-focus);
2112
+ --outline: 0.125rem solid var(--hop-Switch-focus-ring-color);
2113
+ --text-color: var(--hop-Switch-text-color-focus);
2114
+ }
2115
+ .Switch-module__hop-Switch___n4jxE[data-selected],
2116
+ .Switch-module__hop-Switch___n4jxE[data-selected][data-pressed] {
2117
+ --border-color: var(--hop-Switch-border-color-selected);
2118
+ --background-color: var(--hop-Switch-background-color-selected);
2119
+ --thumb-color: var(--hop-Switch-thumb-color-selected);
2120
+ --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%);
2121
+ --text-color: var(--hop-Switch-text-color-selected);
2122
+ }
2123
+ .Switch-module__hop-Switch___n4jxE[data-disabled] {
2124
+ --border-color: var(--hop-Switch-border-color-disabled);
2125
+ --background-color: var(--hop-Switch-background-color-disabled);
2126
+ --thumb-color: var(--hop-Switch-thumb-color-disabled);
2127
+ --text-color: var(--hop-Switch-text-color-disabled);
2128
+ --cursor: not-allowed;
2129
+ }
2130
+ .Switch-module__hop-Switch__indicator___iRVTh {
2131
+ position: relative;
2132
+ flex: 0 0 auto;
2133
+ box-sizing: border-box;
2134
+ inline-size: var(--inline-size, var(--hop-Switch-inline-size-md));
2135
+ block-size: var(--block-size, var(--hop-Switch-block-size-md));
2136
+ background-color: var(--background-color);
2137
+ border: var(--border-size) solid var(--border-color);
2138
+ border-radius: var(--border-radius);
2139
+ outline: var(--outline);
2140
+ outline-offset: 0.125rem;
2141
+ transition: background var(--hop-easing-duration-2), border-color var(--hop-easing-duration-2);
2142
+ }
2143
+ .Switch-module__hop-Switch__indicator___iRVTh::before {
2144
+ content: "";
2145
+ position: absolute;
2146
+ inset-block-start: 50%;
2147
+ inset-inline-start: var(--inset-inline-start);
2148
+ transform: var(--thumb-transform);
2149
+ flex: 0 0 auto;
2150
+ order: 1;
2151
+ box-sizing: border-box;
2152
+ inline-size: var(--thumb-size);
2153
+ block-size: var(--thumb-size);
2154
+ background-color: var(--thumb-color);
2155
+ border-radius: var(--hop-shape-circle);
2156
+ transition: transform var(--hop-easing-duration-2), background var(--hop-easing-duration-2);
2157
+ }
2158
+ .Switch-module__hop-Switch__text___QeO6o {
2159
+ flex: 0 1 auto;
2160
+ order: 2;
2161
+ min-inline-size: 0;
2162
+ margin-block-start: var(--text-top-offset, var(--hop-Switch-text-top-offset-md));
2163
+ color: var(--text-color);
2164
+ }
2165
+ .Switch-module__hop-Switch__icon-list___ka5FC,
2166
+ .Switch-module__hop-Switch__icon___j9U5W {
2167
+ order: 3;
2168
+ }
2169
+
2170
+ /* css-module:/home/runner/work/wl-hopper/wl-hopper/packages/components/src/switch/src/SwitchField.module.css/#css-module-data */
2171
+ .SwitchField-module__hop-SwitchField___OlYHx {
2172
+ --hop-SwitchField-description-color: var(--hop-neutral-text-weak);
2173
+ --hop-SwitchField-description-color-disabled: var(--hop-neutral-text-disabled);
2174
+ --hop-SwitchField-sm-row-gap: var(--hop-space-stack-xs);
2175
+ --hop-SwitchField-switch-sm-inline-size: 2rem;
2176
+ --hop-SwitchField-description-sm-margin-inline-start: calc(var(--hop-SwitchField-switch-sm-inline-size) + var(--hop-space-inline-sm));
2177
+ --hop-SwitchField-md-row-gap: var(--hop-space-stack-xs);
2178
+ --hop-SwitchField-switch-md-inline-size: 3rem;
2179
+ --hop-SwitchField-description-md-margin-inline-start: calc(var(--hop-SwitchField-switch-md-inline-size) + var(--hop-space-inline-sm));
2180
+ --description-color: var(--hop-SwitchField-description-color);
2181
+ display: flex;
2182
+ flex-direction: column;
2183
+ row-gap: var(--row-gap, var(--hop-space-stack-sm));
2184
+ align-items: flex-start;
2185
+ justify-content: flex-start;
2186
+ box-sizing: border-box;
2187
+ inline-size: max-content;
2188
+ max-inline-size: 100%;
2189
+ }
2190
+ .SwitchField-module__hop-SwitchField___OlYHx[data-disabled] {
2191
+ --description-color: var(--hop-SwitchField-description-color-disabled);
2192
+ }
2193
+ .SwitchField-module__hop-SwitchField--sm___7s7Ty {
2194
+ --row-gap: var(--hop-SwitchField-sm-row-gap);
2195
+ --description-margin-inline-start: var(--hop-SwitchField-description-sm-margin-inline-start);
2196
+ }
2197
+ .SwitchField-module__hop-SwitchField--md___gIbMI {
2198
+ --row-gap: var(--hop-SwitchField-md-row-gap);
2199
+ --description-margin-inline-start: var(--hop-SwitchField-description-md-margin-inline-start);
2200
+ }
2201
+ .SwitchField-module__hop-SwitchField__description___Jj-gO {
2202
+ order: 2;
2203
+ margin-inline-start: var(--description-margin-inline-start, var(--hop-SwitchField-description-md-margin-inline-start));
2204
+ color: var(--description-color);
2205
+ }
2206
+ .SwitchField-module__hop-SwitchField__switch___OZkSD {
2207
+ order: 1;
2208
+ }
2209
+
2210
+ /* css-module:/home/runner/work/wl-hopper/wl-hopper/packages/components/src/tag/src/Tag.module.css/#css-module-data */
2211
+ .Tag-module__hop-Tag___Arrz- {
2212
+ --hop-Tag-border-size: 0.0625rem;
2213
+ --hop-Tag-border-radius: var(--hop-shape-pill);
2214
+ --hop-Tag-border-color: var(--hop-neutral-border);
2215
+ --hop-Tag-background-color: var(--hop-neutral-surface-weak);
2216
+ --hop-Tag-text-color: var(--hop-neutral-text);
2217
+ --hop-Tag-md-block-size: 1.5rem;
2218
+ --hop-Tag-md-padding-inline-start: var(--hop-space-inset-xs);
2219
+ --hop-Tag-md-padding-inline-start-text-first: var(--hop-space-inset-sm);
2220
+ --hop-Tag-md-padding-inline-end: var(--hop-space-inset-xs);
2221
+ --hop-Tag-md-padding-inline-end-text-last: var(--hop-space-inset-sm);
2222
+ --hop-Tag-md-column-gap: var(--hop-space-inline-xs);
2223
+ --hop-Tag-lg-block-size: 2rem;
2224
+ --hop-Tag-lg-padding-inline-start: var(--hop-space-inset-xs);
2225
+ --hop-Tag-lg-padding-inline-start-text-first: var(--hop-space-inset-md);
2226
+ --hop-Tag-lg-padding-inline-end: var(--hop-space-inset-xs);
2227
+ --hop-Tag-lg-padding-inline-end-text-last: var(--hop-space-inset-md);
2228
+ --hop-Tag-lg-column-gap: var(--hop-space-inline-sm);
2229
+ --hop-Tag-background-color-focus: var(--hop-neutral-surface-weak-hover);
2230
+ --hop-Tag-border-color-focus: var(--hop-neutral-border-hover);
2231
+ --hop-Tag-text-color-focus: var(--hop-neutral-text-hover);
2232
+ --hop-Tag-focus-ring-color: var(--hop-primary-border-focus);
2233
+ --hop-Tag-background-color-hover: var(--hop-neutral-surface-weak-hover);
2234
+ --hop-Tag-border-color-hover: var(--hop-neutral-border-hover);
2235
+ --hop-Tag-text-color-hover: var(--hop-neutral-text-hover);
2236
+ --hop-Tag-background-color-selected: var(--hop-neutral-surface-weak-selected);
2237
+ --hop-Tag-border-color-selected: var(--hop-neutral-border-selected);
2238
+ --hop-Tag-text-color-selected: var(--hop-neutral-text);
2239
+ --hop-Tag-background-color-press: var(--hop-neutral-surface-weak-press);
2240
+ --hop-Tag-border-color-press: var(--hop-neutral-border-press);
2241
+ --hop-Tag-text-color-press: var(--hop-neutral-text-press);
2242
+ --hop-Tag-border-color-invalid: var(--hop-danger-border-strong);
2243
+ --hop-Tag-background-color-disabled: var(--hop-neutral-surface-disabled);
2244
+ --hop-Tag-border-color-disabled: var(--hop-neutral-border-disabled);
2245
+ --hop-Tag-text-color-disabled: var(--hop-neutral-text-disabled);
2246
+ --border-radius: var(--hop-Tag-border-radius);
2247
+ --border-size: var(--hop-Tag-border-size);
2248
+ --border-color: var(--hop-Tag-border-color);
2249
+ --background-color: var(--hop-Tag-background-color);
2250
+ --text-color: var(--hop-Tag-text-color);
2251
+ --badge-secondary-inline-margin-start: calc(-1 * var(--column-gap));
2252
+ --focus-ring-color: var(--hop-Tag-focus-ring-color);
2253
+ overflow: hidden;
2254
+ display: inline-flex;
2255
+ column-gap: var(--column-gap);
2256
+ align-items: center;
2257
+ justify-content: center;
2258
+ box-sizing: border-box;
2259
+ inline-size: max-content;
2260
+ max-inline-size: 100%;
2261
+ block-size: var(--block-size);
2262
+ padding-inline: var(--padding-inline-start) var(--padding-inline-end);
2263
+ color: var(--text-color);
2264
+ white-space: nowrap;
2265
+ background-color: var(--background-color);
2266
+ border: var(--border-size) solid var(--border-color);
2267
+ border-radius: var(--border-radius);
2268
+ outline: none;
2269
+ outline-offset: 0.125rem;
2270
+ }
2271
+ .Tag-module__hop-Tag--md___Ig1m0 {
2272
+ --block-size: var(--hop-Tag-md-block-size);
2273
+ --padding-inline-start: var(--hop-Tag-md-padding-inline-start);
2274
+ --padding-inline-end: var(--hop-Tag-md-padding-inline-end);
2275
+ --column-gap: var(--hop-Tag-md-column-gap);
2276
+ --clear-btn-margin-inline: calc(-1 * var(--hop-space-inline-xs));
2277
+ }
2278
+ .Tag-module__hop-Tag--md___Ig1m0:not(:has(.Tag-module__hop-Tag__icon___Q2RKs, .Tag-module__hop-Tag__icon-list___p4FYl)) {
2279
+ --padding-inline-start: var(--hop-Tag-md-padding-inline-start-text-first);
2280
+ }
2281
+ .Tag-module__hop-Tag--md___Ig1m0:not(:has(.Tag-module__hop-Tag__badge___aFb39, .Tag-module__hop-Tag__remove-btn___5kLUr, .Tag-module__hop-Tag__Spinner___QMS-T)) {
2282
+ --padding-inline-end: var(--hop-Tag-md-padding-inline-end-text-last);
2283
+ }
2284
+ .Tag-module__hop-Tag--md___Ig1m0:not(:has(.Tag-module__hop-Tag__remove-btn___5kLUr, .Tag-module__hop-Tag__Spinner___QMS-T)) {
2285
+ --badge-margin-inline-end: calc(-1 * var(--padding-inline-end));
2286
+ }
2287
+ .Tag-module__hop-Tag--lg___J1-GI {
2288
+ --block-size: var(--hop-Tag-lg-block-size);
2289
+ --padding-inline-start: var(--hop-Tag-lg-padding-inline-start);
2290
+ --padding-inline-end: var(--hop-Tag-lg-padding-inline-end);
2291
+ --column-gap: var(--hop-Tag-lg-column-gap);
2292
+ --clear-btn-margin-inline: 0;
2293
+ --badge-margin-inline-end: 0;
2294
+ }
2295
+ .Tag-module__hop-Tag--lg___J1-GI:not(:has(.Tag-module__hop-Tag__icon___Q2RKs, .Tag-module__hop-Tag__icon-list___p4FYl)) {
2296
+ --padding-inline-start: var(--hop-Tag-lg-padding-inline-start-text-first);
2297
+ }
2298
+ .Tag-module__hop-Tag--lg___J1-GI:not(:has(.Tag-module__hop-Tag__badge___aFb39, .Tag-module__hop-Tag__remove-btn___5kLUr, .Tag-module__hop-Tag__Spinner___QMS-T)) {
2299
+ --padding-inline-end: var(--hop-Tag-lg-padding-inline-end-text-last);
2300
+ }
2301
+ .Tag-module__hop-Tag___Arrz-[data-href] {
2302
+ cursor: pointer;
2303
+ }
2304
+ .Tag-module__hop-Tag___Arrz-[data-focus-visible] {
2305
+ --background-color: var(--hop-Tag-background-color-focus);
2306
+ --border-color: var(--hop-Tag-border-color-focus);
2307
+ --text-color: var(--hop-Tag-text-color-focus);
2308
+ outline: 0.125rem solid var(--focus-ring-color);
2309
+ }
2310
+ .Tag-module__hop-Tag___Arrz-[data-hovered] {
2311
+ --background-color: var(--hop-Tag-background-color-hover);
2312
+ --border-color: var(--hop-Tag-border-color-hover);
2313
+ --text-color: var(--hop-Tag-text-color-hover);
2314
+ cursor: pointer;
2315
+ }
2316
+ .Tag-module__hop-Tag___Arrz-[data-selected] {
2317
+ --background-color: var(--hop-Tag-background-color-selected);
2318
+ --border-color: var(--hop-Tag-border-color-selected);
2319
+ --text-color: var(--hop-Tag-text-color-selected);
2320
+ }
2321
+ .Tag-module__hop-Tag___Arrz-[data-pressed] {
2322
+ --background-color: var(--hop-Tag-background-color-press);
2323
+ --border-color: var(--hop-Tag-border-color-press);
2324
+ --text-color: var(--hop-Tag-text-color-press);
2325
+ cursor: pointer;
2326
+ }
2327
+ .Tag-module__hop-Tag___Arrz-[data-invalid] {
2328
+ --border-color: var(--hop-Tag-border-color-invalid);
2329
+ }
2330
+ .Tag-module__hop-Tag___Arrz-[data-disabled] {
2331
+ --background-color: var(--hop-Tag-background-color-disabled);
2332
+ --border-color: var(--hop-Tag-border-color-disabled);
2333
+ --text-color: var(--hop-Tag-text-color-disabled);
2334
+ cursor: not-allowed;
2335
+ }
2336
+ .Tag-module__hop-Tag__icon___Q2RKs,
2337
+ .Tag-module__hop-Tag__icon-list___p4FYl {
2338
+ flex: 0 0 auto;
2339
+ flex-wrap: nowrap;
2340
+ order: 1;
2341
+ }
2342
+ .Tag-module__hop-Tag__text___2zDrG {
2343
+ overflow: hidden;
2344
+ flex: 1 1 auto;
2345
+ order: 2;
2346
+ min-inline-size: 0;
2347
+ text-align: center;
2348
+ text-overflow: ellipsis;
2349
+ }
2350
+ .Tag-module__hop-Tag__badge___aFb39 {
2351
+ flex: 0 0 auto;
2352
+ order: 3;
2353
+ margin-inline-end: var(--badge-margin-inline-end);
2354
+ }
2355
+ .Tag-module__hop-Tag__badge___aFb39.Tag-module__hop-Badge--secondary___guKe6 {
2356
+ margin-inline-start: var(--badge-secondary-inline-margin-start);
2357
+ }
2358
+ .Tag-module__hop-Tag__remove-btn___5kLUr,
2359
+ .Tag-module__hop-Tag__Spinner___QMS-T {
2360
+ flex: 0 0 auto;
2361
+ order: 4;
2362
+ }
2363
+ .Tag-module__hop-Tag__remove-btn___5kLUr {
2364
+ margin-inline: var(--clear-btn-margin-inline);
2365
+ }
2366
+
2367
+ /* css-module:/home/runner/work/wl-hopper/wl-hopper/packages/components/src/tag/src/TagGroup.module.css/#css-module-data */
2368
+ .TagGroup-module__hop-TagGroup___-9K4- {
2369
+ --hop-TagGroup-row-gap: var(--hop-space-inline-sm);
2370
+ --hop-TagGroup-list-column-gap: var(--hop-space-inline-sm);
2371
+ --hop-TagGroup-list-row-gap: var(--hop-space-inline-sm);
2372
+ --hop-TagGroup-list-focus-ring-color: var(--hop-primary-border-focus);
2373
+ --hop-TagGroup-list-border-radius: var(--hop-shape-rounded-sm);
2374
+ --row-gap: var(--hop-TagGroup-row-gap);
2375
+ --list-column-gap: var(--hop-TagGroup-list-column-gap);
2376
+ --list-row-gap: var(--hop-TagGroup-list-row-gap);
2377
+ --list-focus-ring-color: var(--hop-TagGroup-list-focus-ring-color);
2378
+ --list-border-radius: var(--hop-TagGroup-list-border-radius);
2379
+ display: flex;
2380
+ flex-direction: column;
2381
+ row-gap: var(--row-gap);
2382
+ align-items: flex-start;
2383
+ justify-content: flex-start;
2384
+ box-sizing: border-box;
2385
+ inline-size: max-content;
2386
+ max-inline-size: 100%;
2387
+ }
2388
+ .TagGroup-module__hop-TagGroup___-9K4- > .TagGroup-module__hop-TagGroup__label___HliMe {
2389
+ order: 1;
2390
+ }
2391
+ .TagGroup-module__hop-TagGroup__list___wzY6r {
2392
+ display: flex;
2393
+ flex-wrap: wrap;
2394
+ gap: var(--list-row-gap) var(--list-column-gap);
2395
+ align-items: center;
2396
+ order: 2;
2397
+ border-radius: var(--list-border-radius);
2398
+ outline: none;
2399
+ }
2400
+ .TagGroup-module__hop-TagGroup__list___wzY6r[data-focus-visible] {
2401
+ outline: 0.125rem solid var(--list-focus-ring-color);
2402
+ outline-offset: 0.125rem;
2403
+ }
2404
+ .TagGroup-module__hop-TagGroup___-9K4- > .TagGroup-module__hop-TagGroup__error-message___KGiI-,
2405
+ .TagGroup-module__hop-TagGroup___-9K4- > .TagGroup-module__hop-TagGroup__helper-message___B4nYY {
2406
+ order: 3;
2407
+ }
2408
+
2409
+ /* css-module:/home/runner/work/wl-hopper/wl-hopper/packages/components/src/typography/Heading/src/Heading.module.css/#css-module-data */
2410
+ .Heading-module__hop-Heading___XEMpo {
2411
+ --hop-Heading-xs-font-size: var(--hop-heading-xs-font-size);
2412
+ --hop-Heading-xs-font-family: var(--hop-heading-xs-font-family);
2413
+ --hop-Heading-xs-font-weight: var(--hop-heading-xs-font-weight);
2414
+ --hop-Heading-xs-line-height: var(--hop-heading-xs-line-height);
2415
+ --hop-Heading-sm-font-size: var(--hop-heading-sm-font-size);
2416
+ --hop-Heading-sm-font-family: var(--hop-heading-sm-font-family);
2417
+ --hop-Heading-sm-font-weight: var(--hop-heading-sm-font-weight);
2418
+ --hop-Heading-sm-line-height: var(--hop-heading-sm-line-height);
2419
+ --hop-Heading-md-font-size: var(--hop-heading-md-font-size);
2420
+ --hop-Heading-md-font-family: var(--hop-heading-md-font-family);
2421
+ --hop-Heading-md-font-weight: var(--hop-heading-md-font-weight);
2422
+ --hop-Heading-md-line-height: var(--hop-heading-md-line-height);
2423
+ --hop-Heading-lg-font-size: var(--hop-heading-lg-font-size);
2424
+ --hop-Heading-lg-font-family: var(--hop-heading-lg-font-family);
2425
+ --hop-Heading-lg-font-weight: var(--hop-heading-lg-font-weight);
2426
+ --hop-Heading-lg-line-height: var(--hop-heading-lg-line-height);
2427
+ --hop-Heading-xl-font-size: var(--hop-heading-xl-font-size);
2428
+ --hop-Heading-xl-font-family: var(--hop-heading-xl-font-family);
2429
+ --hop-Heading-xl-font-weight: var(--hop-heading-xl-font-weight);
2430
+ --hop-Heading-xl-line-height: var(--hop-heading-xl-line-height);
2431
+ --hop-Heading-2xl-font-size: var(--hop-heading-2xl-font-size);
2432
+ --hop-Heading-2xl-font-family: var(--hop-heading-2xl-font-family);
2433
+ --hop-Heading-2xl-font-weight: var(--hop-heading-2xl-font-weight);
2434
+ --hop-Heading-2xl-line-height: var(--hop-heading-2xl-line-height);
2435
+ --hop-Heading-3xl-font-size: var(--hop-heading-3xl-font-size);
2436
+ --hop-Heading-3xl-font-family: var(--hop-heading-3xl-font-family);
2437
+ --hop-Heading-3xl-font-weight: var(--hop-heading-3xl-font-weight);
2438
+ --hop-Heading-3xl-line-height: var(--hop-heading-3xl-line-height);
2439
+ --hop-Heading-inherit-size-font-size: inherit;
2440
+ --hop-Heading-inherit-size-font-family: inherit;
2441
+ --hop-Heading-inherit-size-font-weight: inherit;
2442
+ --hop-Heading-inherit-size-line-height: inherit;
2443
+ }
2444
+ :where(.Heading-module__hop-Heading___XEMpo) {
2445
+ margin: 0;
2446
+ font-family: var(--font-family);
2447
+ font-size: var(--font-size);
2448
+ font-weight: var(--font-weight);
2449
+ line-height: var(--line-height);
2450
+ }
2451
+ :where(.Heading-module__hop-Heading--xs___QP1iF) {
2452
+ --font-size: var(--hop-Heading-xs-font-size);
2453
+ --font-family: var(--hop-Heading-xs-font-family);
2454
+ --font-weight: var(--hop-Heading-xs-font-weight);
2455
+ --line-height: var(--hop-Heading-xs-line-height);
2456
+ }
2457
+ :where(.Heading-module__hop-Heading--sm___q3RaI) {
2458
+ --font-size: var(--hop-Heading-sm-font-size);
2459
+ --font-family: var(--hop-Heading-sm-font-family);
2460
+ --font-weight: var(--hop-Heading-sm-font-weight);
2461
+ --line-height: var(--hop-Heading-sm-line-height);
2462
+ }
2463
+ :where(.Heading-module__hop-Heading--md___wAHF9) {
2464
+ --font-size: var(--hop-Heading-md-font-size);
2465
+ --font-family: var(--hop-Heading-md-font-family);
2466
+ --font-weight: var(--hop-Heading-md-font-weight);
2467
+ --line-height: var(--hop-Heading-md-line-height);
2468
+ }
2469
+ :where(.Heading-module__hop-Heading--lg___1yXCu) {
2470
+ --font-size: var(--hop-Heading-lg-font-size);
2471
+ --font-family: var(--hop-Heading-lg-font-family);
2472
+ --font-weight: var(--hop-Heading-lg-font-weight);
2473
+ --line-height: var(--hop-Heading-lg-line-height);
2474
+ }
2475
+ :where(.Heading-module__hop-Heading--xl___N5H9A) {
2476
+ --font-size: var(--hop-Heading-xl-font-size);
2477
+ --font-family: var(--hop-Heading-xl-font-family);
2478
+ --font-weight: var(--hop-Heading-xl-font-weight);
2479
+ --line-height: var(--hop-Heading-xl-line-height);
2480
+ }
2481
+ :where(.Heading-module__hop-Heading--2xl___9j09H) {
2482
+ --font-size: var(--hop-Heading-2xl-font-size);
2483
+ --font-family: var(--hop-Heading-2xl-font-family);
2484
+ --font-weight: var(--hop-Heading-2xl-font-weight);
2485
+ --line-height: var(--hop-Heading-2xl-line-height);
2486
+ }
2487
+ :where(.Heading-module__hop-Heading--3xl___LGn-R) {
2488
+ --font-size: var(--hop-Heading-3xl-font-size);
2489
+ --font-family: var(--hop-Heading-3xl-font-family);
2490
+ --font-weight: var(--hop-Heading-3xl-font-weight);
2491
+ --line-height: var(--hop-Heading-3xl-line-height);
2492
+ }
2493
+
2494
+ /* css-module:/home/runner/work/wl-hopper/wl-hopper/packages/components/src/inputs/src/TextField.module.css/#css-module-data */
2495
+ .TextField-module__hop-TextField___LVxGo {
2496
+ --hop-TextField-gap: var(--hop-space-stack-xs);
2497
+ --hop-TextField-inline-size: 20rem;
2498
+ --hop-TextField-prefix-color: var(--hop-neutral-text-weak);
2499
+ --hop-TextField-font-family: var(--hop-heading-xs-font-family);
2500
+ --hop-TextField-font-size: var(--hop-heading-xs-font-size);
2501
+ --hop-TextField-font-weight: var(--hop-heading-xs-font-weight);
2502
+ --hop-TextField-line-height: var(--hop-heading-xs-line-height);
2503
+ --hop-TextField-color: var(--hop-neutral-text-weak);
2504
+ --inline-size: var(--hop-TextField-inline-size);
2505
+ display: flex;
2506
+ flex-direction: column;
2507
+ gap: var(--hop-TextField-gap);
2508
+ inline-size: var(--inline-size);
2509
+ }
2510
+ .TextField-module__hop-TextField--fluid___Zxhx8 {
2511
+ --inline-size: 100%;
2512
+ }
2513
+ .TextField-module__hop-TextField__Label___j-hHO {
2514
+ order: 0;
2515
+ font-family: var(--hop-TextField-font-family);
2516
+ font-size: var(--hop-TextField-font-size);
2517
+ font-weight: var(--hop-TextField-font-weight);
2518
+ line-height: var(--hop-TextField-line-height);
2519
+ color: var(--hop-TextField-color);
2520
+ }
2521
+ .TextField-module__hop-TextField__prefix___W7szZ {
2522
+ color: var(--hop-TextField-prefix-color);
2523
+ }
2524
+ .TextField-module__hop-TextField__InputGroup___6TfYD {
2525
+ order: 1;
2526
+ inline-size: 100%;
2527
+ }
2528
+ .TextField-module__hop-TextField__ErrorMessage___rDG7U,
2529
+ .TextField-module__hop-TextField__HelperMessage___l-32U {
2530
+ order: 3;
2531
+ }