@hopper-ui/components 1.1.0 → 1.2.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (198) hide show
  1. package/CHANGELOG.md +11 -0
  2. package/README.md +1 -1
  3. package/dist/Avatar/src/AnonymousAvatar.css +10 -10
  4. package/dist/Avatar/src/AnonymousAvatar.js +2 -2
  5. package/dist/Avatar/src/Avatar.css +37 -37
  6. package/dist/Avatar/src/Avatar.js +3 -3
  7. package/dist/Avatar/src/AvatarContext.d.ts +1 -1
  8. package/dist/Avatar/src/DeletedAvatar.css +10 -10
  9. package/dist/Avatar/src/DeletedAvatar.js +2 -2
  10. package/dist/Avatar/src/RichIconAvatarImage.css +10 -10
  11. package/dist/Avatar/src/RichIconAvatarImage.js +1 -1
  12. package/dist/Avatar/src/index.css +37 -37
  13. package/dist/Avatar/src/index.js +5 -5
  14. package/dist/Badge/src/Badge.css +10 -10
  15. package/dist/Badge/src/Badge.js +2 -2
  16. package/dist/Badge/src/index.css +10 -10
  17. package/dist/Badge/src/index.js +2 -2
  18. package/dist/Divider/src/Divider.css +2 -2
  19. package/dist/Divider/src/Divider.js +1 -1
  20. package/dist/Divider/src/index.css +2 -2
  21. package/dist/Divider/src/index.js +1 -1
  22. package/dist/ErrorMessage/src/ErrorMessage.css +11 -11
  23. package/dist/ErrorMessage/src/ErrorMessage.js +2 -2
  24. package/dist/ErrorMessage/src/index.css +11 -11
  25. package/dist/ErrorMessage/src/index.js +2 -2
  26. package/dist/Form/src/Form.css +4111 -0
  27. package/dist/Form/src/Form.d.ts +28 -0
  28. package/dist/Form/src/Form.js +114 -0
  29. package/dist/Form/src/FormContext.d.ts +8 -0
  30. package/dist/Form/src/FormContext.js +2 -0
  31. package/dist/Form/src/index.css +4111 -0
  32. package/dist/Form/src/index.d.ts +5 -0
  33. package/dist/Form/src/index.js +114 -0
  34. package/dist/HelperMessage/src/HelperMessage.css +11 -11
  35. package/dist/HelperMessage/src/HelperMessage.js +2 -2
  36. package/dist/HelperMessage/src/index.css +11 -11
  37. package/dist/HelperMessage/src/index.js +2 -2
  38. package/dist/IconList/src/IconList.css +1 -1
  39. package/dist/IconList/src/IconList.js +1 -1
  40. package/dist/IconList/src/index.css +1 -1
  41. package/dist/IconList/src/index.js +1 -1
  42. package/dist/Link/src/Link.css +31 -31
  43. package/dist/Link/src/Link.js +3 -3
  44. package/dist/Link/src/index.css +31 -31
  45. package/dist/Link/src/index.js +3 -3
  46. package/dist/ListBox/src/ListBox.css +369 -169
  47. package/dist/ListBox/src/ListBox.js +12 -11
  48. package/dist/ListBox/src/ListBoxItem.css +425 -225
  49. package/dist/ListBox/src/ListBoxItem.js +10 -9
  50. package/dist/ListBox/src/ListBoxItemSkeleton.css +7 -7
  51. package/dist/ListBox/src/ListBoxItemSkeleton.js +1 -1
  52. package/dist/ListBox/src/index.css +369 -169
  53. package/dist/ListBox/src/index.js +12 -11
  54. package/dist/Spinner/src/Spinner.css +19 -19
  55. package/dist/Spinner/src/Spinner.js +2 -2
  56. package/dist/Spinner/src/index.css +19 -19
  57. package/dist/Spinner/src/index.js +2 -2
  58. package/dist/buttons/src/Button.css +94 -94
  59. package/dist/buttons/src/Button.js +6 -6
  60. package/dist/buttons/src/ButtonGroup.css +11 -11
  61. package/dist/buttons/src/ButtonGroup.js +1 -1
  62. package/dist/buttons/src/ClearButton.css +375 -28
  63. package/dist/buttons/src/ClearButton.js +3 -3
  64. package/dist/buttons/src/EmbeddedButton.css +375 -28
  65. package/dist/buttons/src/EmbeddedButton.d.ts +9 -0
  66. package/dist/buttons/src/EmbeddedButton.js +1 -1
  67. package/dist/buttons/src/index.css +480 -133
  68. package/dist/buttons/src/index.js +9 -9
  69. package/dist/checkbox/src/Checkbox.css +31 -31
  70. package/dist/checkbox/src/Checkbox.js +3 -3
  71. package/dist/checkbox/src/CheckboxField.css +15 -15
  72. package/dist/checkbox/src/CheckboxField.js +1 -1
  73. package/dist/checkbox/src/CheckboxGroup.css +62 -59
  74. package/dist/checkbox/src/CheckboxGroup.js +1 -1
  75. package/dist/checkbox/src/index.css +62 -59
  76. package/dist/checkbox/src/index.js +6 -6
  77. package/dist/{chunk-SR3GAXY5.js → chunk-2XO5CZBO.js} +2 -2
  78. package/dist/{chunk-VFYGHX3N.js → chunk-354H4FNA.js} +1 -1
  79. package/dist/{chunk-TGXZJJJA.js → chunk-5IB23E3O.js} +6 -2
  80. package/dist/{chunk-UMD6RDUS.js → chunk-BKCMCC7V.js} +1 -1
  81. package/dist/{chunk-YE7RARJB.js → chunk-CEUQHDEQ.js} +1 -1
  82. package/dist/{chunk-WAUGFWZA.js → chunk-CKKLDA5J.js} +2 -2
  83. package/dist/{chunk-PQV24MM4.js → chunk-COIGQP33.js} +3 -3
  84. package/dist/{chunk-VVY3ONWS.js → chunk-EJUIYBAC.js} +1 -1
  85. package/dist/chunk-EURJK4ZT.js +7 -0
  86. package/dist/{chunk-YEYNRBMQ.js → chunk-F4H76S4H.js} +6 -2
  87. package/dist/{chunk-A7HLXFSP.js → chunk-FA4IXLWZ.js} +9 -7
  88. package/dist/chunk-FOD7XUSJ.js +150 -0
  89. package/dist/{chunk-ZNGSZW7M.js → chunk-FOKTHCFK.js} +3 -3
  90. package/dist/{chunk-XGI4LDIF.js → chunk-HCRWIU7V.js} +4 -4
  91. package/dist/{chunk-BGRKDTCG.js → chunk-IUOLKHYQ.js} +1 -1
  92. package/dist/{chunk-FQO2QRSC.js → chunk-IXWYHDGU.js} +1 -1
  93. package/dist/{chunk-TMWNNF4J.js → chunk-J44DIB5J.js} +3 -3
  94. package/dist/{chunk-TVV4RMFR.js → chunk-JJ4EFTES.js} +1 -1
  95. package/dist/{chunk-P7UUQGGF.js → chunk-L5KI4ZCL.js} +2 -2
  96. package/dist/{chunk-6PH4IIEW.js → chunk-M3K4IYX6.js} +1 -1
  97. package/dist/{chunk-TKB5Q2WX.js → chunk-MJHMFANK.js} +1 -1
  98. package/dist/{chunk-BLQ72S4U.js → chunk-PFABSIDM.js} +1 -1
  99. package/dist/{chunk-GXFFLWNF.js → chunk-PQXVL3YJ.js} +1 -1
  100. package/dist/{chunk-YRUBXLBX.js → chunk-Q63YLWI6.js} +6 -3
  101. package/dist/{chunk-BQZQTNI6.js → chunk-RQKU3XDG.js} +1 -1
  102. package/dist/chunk-RWAVMW7T.js +70 -0
  103. package/dist/{chunk-6K6W32Q7.js → chunk-S5CK32KM.js} +6 -4
  104. package/dist/{chunk-I6OII2RA.js → chunk-SZSQZ4C7.js} +3 -3
  105. package/dist/{chunk-Q52NUBN7.js → chunk-T6MAOVLH.js} +2 -2
  106. package/dist/{chunk-BXPZ6HPC.js → chunk-TCOZUCPD.js} +142 -159
  107. package/dist/{chunk-GCJT5PQ4.js → chunk-TG623HPA.js} +7 -5
  108. package/dist/{chunk-6CDXS774.js → chunk-U56LEEEA.js} +6 -6
  109. package/dist/{chunk-AT7ZY6GA.js → chunk-UT4CSUUM.js} +1 -1
  110. package/dist/{chunk-CXCOSGTO.js → chunk-V5Q245NH.js} +4 -2
  111. package/dist/chunk-VISBUD2K.js +172 -0
  112. package/dist/{chunk-KA6KVIVV.js → chunk-VYKPDMP3.js} +3 -3
  113. package/dist/{chunk-XHZ4R2MB.js → chunk-W2BQZEW6.js} +4 -4
  114. package/dist/{chunk-RD6VCI72.js → chunk-W474WFOP.js} +20 -8
  115. package/dist/{chunk-QY6U3R3W.js → chunk-X253QCYD.js} +3 -2
  116. package/dist/{chunk-6MSRPPI6.js → chunk-XT2MZWEV.js} +1 -1
  117. package/dist/{chunk-ICDMJUNE.js → chunk-XUJNQNB3.js} +1 -1
  118. package/dist/i18n/src/index.js +1 -1
  119. package/dist/i18n/src/useLocalizedString.js +1 -1
  120. package/dist/index.css +1521 -694
  121. package/dist/index.d.ts +5 -3
  122. package/dist/index.js +46 -44
  123. package/dist/inputs/src/InputGroup.css +14 -14
  124. package/dist/inputs/src/InputGroup.d.ts +2 -1
  125. package/dist/inputs/src/InputGroup.js +1 -1
  126. package/dist/inputs/src/NumberField.css +65 -62
  127. package/dist/inputs/src/NumberField.d.ts +1 -0
  128. package/dist/inputs/src/NumberField.js +18 -173
  129. package/dist/inputs/src/PasswordField.css +524 -174
  130. package/dist/inputs/src/PasswordField.d.ts +1 -0
  131. package/dist/inputs/src/PasswordField.js +9 -9
  132. package/dist/inputs/src/SearchField.css +530 -180
  133. package/dist/inputs/src/SearchField.d.ts +1 -0
  134. package/dist/inputs/src/SearchField.js +10 -10
  135. package/dist/inputs/src/TextArea.css +59 -56
  136. package/dist/inputs/src/TextArea.js +8 -8
  137. package/dist/inputs/src/TextField.css +525 -175
  138. package/dist/inputs/src/TextField.d.ts +2 -0
  139. package/dist/inputs/src/TextField.js +11 -11
  140. package/dist/inputs/src/index.css +694 -205
  141. package/dist/inputs/src/index.d.ts +2 -0
  142. package/dist/inputs/src/index.js +17 -14
  143. package/dist/overlays/Popover/src/Popover.css +1521 -694
  144. package/dist/overlays/Popover/src/Popover.js +46 -44
  145. package/dist/overlays/Popover/src/index.css +1521 -694
  146. package/dist/overlays/Popover/src/index.js +46 -44
  147. package/dist/radio/src/Radio.css +31 -31
  148. package/dist/radio/src/Radio.js +3 -3
  149. package/dist/radio/src/RadioField.css +15 -15
  150. package/dist/radio/src/RadioField.js +1 -1
  151. package/dist/radio/src/RadioGroup.css +62 -59
  152. package/dist/radio/src/RadioGroup.js +1 -1
  153. package/dist/radio/src/index.css +62 -59
  154. package/dist/radio/src/index.js +6 -6
  155. package/dist/switch/src/Switch.css +25 -25
  156. package/dist/switch/src/Switch.js +3 -3
  157. package/dist/switch/src/SwitchField.css +15 -15
  158. package/dist/switch/src/SwitchField.js +1 -1
  159. package/dist/switch/src/index.css +31 -31
  160. package/dist/switch/src/index.js +4 -4
  161. package/dist/tag/src/Tag.css +1041 -2332
  162. package/dist/tag/src/Tag.d.ts +6 -1
  163. package/dist/tag/src/Tag.js +7 -99
  164. package/dist/tag/src/TagGroup.css +24 -21
  165. package/dist/tag/src/TagGroup.d.ts +7 -2
  166. package/dist/tag/src/TagGroup.js +1 -1
  167. package/dist/tag/src/index.css +1104 -2296
  168. package/dist/tag/src/index.js +9 -94
  169. package/dist/typography/Heading/src/Heading.css +9 -9
  170. package/dist/typography/Heading/src/Heading.js +1 -1
  171. package/dist/typography/Heading/src/index.css +9 -9
  172. package/dist/typography/Heading/src/index.js +1 -1
  173. package/dist/typography/Label/src/Label.css +5 -2
  174. package/dist/typography/Label/src/Label.d.ts +8 -0
  175. package/dist/typography/Label/src/Label.js +2 -1
  176. package/dist/typography/Label/src/index.css +5 -2
  177. package/dist/typography/Label/src/index.js +2 -1
  178. package/dist/typography/OverlineText/src/OverlineText.css +6 -6
  179. package/dist/typography/OverlineText/src/OverlineText.js +1 -1
  180. package/dist/typography/OverlineText/src/index.css +6 -6
  181. package/dist/typography/OverlineText/src/index.js +1 -1
  182. package/dist/typography/Text/src/Text.css +9 -9
  183. package/dist/typography/Text/src/Text.js +1 -1
  184. package/dist/typography/Text/src/index.css +9 -9
  185. package/dist/typography/Text/src/index.js +1 -1
  186. package/dist/utils/src/index.js +1 -1
  187. package/package.json +3 -3
  188. package/dist/Chip/src/Chip.css +0 -261
  189. package/dist/Chip/src/Chip.d.ts +0 -27
  190. package/dist/Chip/src/Chip.js +0 -10
  191. package/dist/Chip/src/ChipContext.d.ts +0 -10
  192. package/dist/Chip/src/ChipContext.js +0 -2
  193. package/dist/Chip/src/index.css +0 -261
  194. package/dist/Chip/src/index.d.ts +0 -7
  195. package/dist/Chip/src/index.js +0 -10
  196. package/dist/chunk-632B5YBQ.js +0 -7
  197. package/dist/chunk-7VS566A2.js +0 -43
  198. package/dist/chunk-OETAIO6N.js +0 -105
@@ -1,5 +1,5 @@
1
1
  /* css-module:/home/runner/work/wl-hopper/wl-hopper/packages/components/src/typography/Text/src/Text.module.css/#css-module-data */
2
- .Text-module__hop-Text___HnTiu {
2
+ .Text-module__hop-Text___7s-NC {
3
3
  --hop-Text-xs-font-size: var(--hop-body-xs-font-size);
4
4
  --hop-Text-xs-font-family: var(--hop-body-xs-font-family);
5
5
  --hop-Text-xs-font-weight: var(--hop-body-xs-font-weight);
@@ -29,49 +29,49 @@
29
29
  --hop-Text-inherit-size-font-weight: inherit;
30
30
  --hop-Text-inherit-size-line-height: inherit;
31
31
  }
32
- :where(.Text-module__hop-Text___HnTiu) {
32
+ :where(.Text-module__hop-Text___7s-NC) {
33
33
  font-family: var(--font-family);
34
34
  font-size: var(--font-size);
35
35
  font-weight: var(--font-weight);
36
36
  line-height: var(--line-height);
37
37
  }
38
- :where(.Text-module__hop-Text--xs___ndb-c) {
38
+ :where(.Text-module__hop-Text--xs___uRZNm) {
39
39
  --font-size: var(--hop-Text-xs-font-size);
40
40
  --font-family: var(--hop-Text-xs-font-family);
41
41
  --font-weight: var(--hop-Text-xs-font-weight);
42
42
  --line-height: var(--hop-Text-xs-line-height);
43
43
  }
44
- :where(.Text-module__hop-Text--sm___cv0bL) {
44
+ :where(.Text-module__hop-Text--sm___LfDaA) {
45
45
  --font-size: var(--hop-Text-sm-font-size);
46
46
  --font-family: var(--hop-Text-sm-font-family);
47
47
  --font-weight: var(--hop-Text-sm-font-weight);
48
48
  --line-height: var(--hop-Text-sm-line-height);
49
49
  }
50
- :where(.Text-module__hop-Text--md___daNZS) {
50
+ :where(.Text-module__hop-Text--md___aGVbv) {
51
51
  --font-size: var(--hop-Text-md-font-size);
52
52
  --font-family: var(--hop-Text-md-font-family);
53
53
  --font-weight: var(--hop-Text-md-font-weight);
54
54
  --line-height: var(--hop-Text-md-line-height);
55
55
  }
56
- :where(.Text-module__hop-Text--lg___ByUWL) {
56
+ :where(.Text-module__hop-Text--lg___TgsRg) {
57
57
  --font-size: var(--hop-Text-lg-font-size);
58
58
  --font-family: var(--hop-Text-lg-font-family);
59
59
  --font-weight: var(--hop-Text-lg-font-weight);
60
60
  --line-height: var(--hop-Text-lg-line-height);
61
61
  }
62
- :where(.Text-module__hop-Text--xl___Udc-p) {
62
+ :where(.Text-module__hop-Text--xl___gAcxP) {
63
63
  --font-size: var(--hop-Text-xl-font-size);
64
64
  --font-family: var(--hop-Text-xl-font-family);
65
65
  --font-weight: var(--hop-Text-xl-font-weight);
66
66
  --line-height: var(--hop-Text-xl-line-height);
67
67
  }
68
- :where(.Text-module__hop-Text--2xl___sxc7S) {
68
+ :where(.Text-module__hop-Text--2xl___n-9B9) {
69
69
  --font-size: var(--hop-Text-2xl-font-size);
70
70
  --font-family: var(--hop-Text-2xl-font-family);
71
71
  --font-weight: var(--hop-Text-2xl-font-weight);
72
72
  --line-height: var(--hop-Text-2xl-line-height);
73
73
  }
74
- :where(.Text-module__hop-Text--inherit___WU81u) {
74
+ :where(.Text-module__hop-Text--inherit___SEa0P) {
75
75
  --font-size: var(--hop-Text-inherit-size-font-size);
76
76
  --font-family: var(--hop-Text-inherit-size-font-family);
77
77
  --font-weight: var(--hop-Text-inherit-size-font-weight);
@@ -79,7 +79,7 @@
79
79
  }
80
80
 
81
81
  /* css-module:/home/runner/work/wl-hopper/wl-hopper/packages/components/src/Avatar/src/RichIconAvatarImage.module.css/#css-module-data */
82
- .RichIconAvatarImage-module__hop-RichIconAvatarImage___9cs6o {
82
+ .RichIconAvatarImage-module__hop-RichIconAvatarImage___sG-Yd {
83
83
  --hop-RichIconAvatarImage-background-color: var(--hop-decorative-option7-surface);
84
84
  --hop-RichIconAvatarImage-border-radius: var(--hop-shape-circle);
85
85
  --hop-RichIconAvatarImage-icon-color: var(--hop-decorative-option7-icon);
@@ -110,46 +110,46 @@
110
110
  background-color: var(--background-color);
111
111
  border-radius: var(--hop-RichIconAvatarImage-border-radius);
112
112
  }
113
- .RichIconAvatarImage-module__hop-RichIconAvatarImage--xs___XYcPi {
113
+ .RichIconAvatarImage-module__hop-RichIconAvatarImage--xs___h-WpU {
114
114
  --size: var(--hop-RichIconAvatarImage-xs-size);
115
115
  --icon-size: var(--hop-RichIconAvatarImage-icon-xs-size);
116
116
  }
117
- .RichIconAvatarImage-module__hop-RichIconAvatarImage--sm___CONVZ {
117
+ .RichIconAvatarImage-module__hop-RichIconAvatarImage--sm___QasW- {
118
118
  --size: var(--hop-RichIconAvatarImage-sm-size);
119
119
  --icon-size: var(--hop-RichIconAvatarImage-icon-sm-size);
120
120
  }
121
- .RichIconAvatarImage-module__hop-RichIconAvatarImage--md___c6v95 {
121
+ .RichIconAvatarImage-module__hop-RichIconAvatarImage--md___QjQ3I {
122
122
  --size: var(--hop-RichIconAvatarImage-md-size);
123
123
  --icon-size: var(--hop-RichIconAvatarImage-icon-md-size);
124
124
  }
125
- .RichIconAvatarImage-module__hop-RichIconAvatarImage--lg___xPXKj {
125
+ .RichIconAvatarImage-module__hop-RichIconAvatarImage--lg___PrX57 {
126
126
  --size: var(--hop-RichIconAvatarImage-lg-size);
127
127
  --icon-size: var(--hop-RichIconAvatarImage-icon-lg-size);
128
128
  }
129
- .RichIconAvatarImage-module__hop-RichIconAvatarImage--xl___2zIed {
129
+ .RichIconAvatarImage-module__hop-RichIconAvatarImage--xl___fZOdF {
130
130
  --size: var(--hop-RichIconAvatarImage-xl-size);
131
131
  --icon-size: var(--hop-RichIconAvatarImage-icon-xl-size);
132
132
  }
133
- .RichIconAvatarImage-module__hop-RichIconAvatarImage--2xl___Zgfsg {
133
+ .RichIconAvatarImage-module__hop-RichIconAvatarImage--2xl___E-1I9 {
134
134
  --size: var(--hop-RichIconAvatarImage-2xl-size);
135
135
  --icon-size: var(--hop-RichIconAvatarImage-icon-2xl-size);
136
136
  }
137
- .RichIconAvatarImage-module__hop-RichIconAvatarImage___9cs6o[data-disabled] {
137
+ .RichIconAvatarImage-module__hop-RichIconAvatarImage___sG-Yd[data-disabled] {
138
138
  --background-color: var(--hop-RichIconAvatarImage-background-color-disabled);
139
139
  }
140
- .RichIconAvatarImage-module__hop-RichIconAvatarImage__icon___wjKFz {
140
+ .RichIconAvatarImage-module__hop-RichIconAvatarImage__icon___JDA4Q {
141
141
  position: relative;
142
142
  display: block;
143
143
  inline-size: var(--icon-size, var(--hop-RichIconAvatarImage-icon-md-size));
144
144
  block-size: var(--icon-size, var(--hop-RichIconAvatarImage-icon-md-size));
145
145
  }
146
- .RichIconAvatarImage-module__hop-RichIconAvatarImage___9cs6o[data-disabled] .RichIconAvatarImage-module__hop-RichIconAvatarImage__icon___wjKFz {
146
+ .RichIconAvatarImage-module__hop-RichIconAvatarImage___sG-Yd[data-disabled] .RichIconAvatarImage-module__hop-RichIconAvatarImage__icon___JDA4Q {
147
147
  --hop-RichIcon-placeholder-background: var(--hop-RichIconAvatarImage-background-color-disabled);
148
148
  --hop-RichIcon-placeholder-shadow: var(--hop-RichIconAvatarImage-icon-color-disabled);
149
149
  }
150
150
 
151
151
  /* css-module:/home/runner/work/wl-hopper/wl-hopper/packages/components/src/Avatar/src/Avatar.module.css/#css-module-data */
152
- .Avatar-module__hop-Avatar___fT8iZ {
152
+ .Avatar-module__hop-Avatar___3ivfl {
153
153
  --hop-Avatar-border-radius: var(--hop-shape-circle);
154
154
  --hop-Avatar-mix-blend-mode: normal;
155
155
  --hop-Avatar-decorative-1-background-color: var(--hop-decorative-option1-surface-strong);
@@ -194,67 +194,67 @@
194
194
  background-color: var(--background-color, transparent);
195
195
  border-radius: var(--hop-Avatar-border-radius);
196
196
  }
197
- .Avatar-module__hop-Avatar--xs___kKBMv {
197
+ .Avatar-module__hop-Avatar--xs___noWqr {
198
198
  --size: var(--hop-Avatar-xs-size);
199
199
  }
200
- .Avatar-module__hop-Avatar--sm___PdVKz {
200
+ .Avatar-module__hop-Avatar--sm___EG5oC {
201
201
  --size: var(--hop-Avatar-sm-size);
202
202
  }
203
- .Avatar-module__hop-Avatar--md___3CYGy {
203
+ .Avatar-module__hop-Avatar--md___Q-9En {
204
204
  --size: var(--hop-Avatar-md-size);
205
205
  }
206
- .Avatar-module__hop-Avatar--lg___2xN4n {
206
+ .Avatar-module__hop-Avatar--lg___FBR3Q {
207
207
  --size: var(--hop-Avatar-lg-size);
208
208
  }
209
- .Avatar-module__hop-Avatar--xl___g3C7I {
209
+ .Avatar-module__hop-Avatar--xl___-BzUR {
210
210
  --size: var(--hop-Avatar-xl-size);
211
211
  }
212
- .Avatar-module__hop-Avatar--2xl___9n9-v {
212
+ .Avatar-module__hop-Avatar--2xl___64QDk {
213
213
  --size: var(--hop-Avatar-2xl-size);
214
214
  }
215
- .Avatar-module__hop-Avatar--decorative-option1___LxMkW {
215
+ .Avatar-module__hop-Avatar--decorative-option1___NjQ2P {
216
216
  --background-color: var(--hop-Avatar-decorative-1-background-color);
217
217
  --text-color: var(--hop-Avatar-decorative-1-text-color);
218
218
  }
219
- .Avatar-module__hop-Avatar--decorative-option2___hsrVs {
219
+ .Avatar-module__hop-Avatar--decorative-option2___gJJB9 {
220
220
  --background-color: var(--hop-Avatar-decorative-2-background-color);
221
221
  --text-color: var(--hop-Avatar-decorative-2-text-color);
222
222
  }
223
- .Avatar-module__hop-Avatar--decorative-option3___vVkVP {
223
+ .Avatar-module__hop-Avatar--decorative-option3___d5E6d {
224
224
  --background-color: var(--hop-Avatar-decorative-3-background-color);
225
225
  --text-color: var(--hop-Avatar-decorative-3-text-color);
226
226
  }
227
- .Avatar-module__hop-Avatar--decorative-option4___RTYeY {
227
+ .Avatar-module__hop-Avatar--decorative-option4___BHoQj {
228
228
  --background-color: var(--hop-Avatar-decorative-4-background-color);
229
229
  --text-color: var(--hop-Avatar-decorative-4-text-color);
230
230
  }
231
- .Avatar-module__hop-Avatar--decorative-option5___nfoHP {
231
+ .Avatar-module__hop-Avatar--decorative-option5___UmjOH {
232
232
  --background-color: var(--hop-Avatar-decorative-5-background-color);
233
233
  --text-color: var(--hop-Avatar-decorative-5-text-color);
234
234
  }
235
- .Avatar-module__hop-Avatar--decorative-option6___Lw1n- {
235
+ .Avatar-module__hop-Avatar--decorative-option6___8CVbo {
236
236
  --background-color: var(--hop-Avatar-decorative-6-background-color);
237
237
  --text-color: var(--hop-Avatar-decorative-6-text-color);
238
238
  }
239
- .Avatar-module__hop-Avatar--decorative-option7___pGWQV {
239
+ .Avatar-module__hop-Avatar--decorative-option7___4ZFln {
240
240
  --background-color: var(--hop-Avatar-decorative-7-background-color);
241
241
  --text-color: var(--hop-Avatar-decorative-7-text-color);
242
242
  }
243
- .Avatar-module__hop-Avatar--decorative-option8___iKwn8 {
243
+ .Avatar-module__hop-Avatar--decorative-option8___MvBiM {
244
244
  --background-color: var(--hop-Avatar-decorative-8-background-color);
245
245
  --text-color: var(--hop-Avatar-decorative-8-text-color);
246
246
  }
247
- .Avatar-module__hop-Avatar--decorative-option9___CRHN1 {
247
+ .Avatar-module__hop-Avatar--decorative-option9___z9oHT {
248
248
  --background-color: var(--hop-Avatar-decorative-9-background-color);
249
249
  --text-color: var(--hop-Avatar-decorative-9-text-color);
250
250
  }
251
- .Avatar-module__hop-Avatar___fT8iZ[data-disabled] {
251
+ .Avatar-module__hop-Avatar___3ivfl[data-disabled] {
252
252
  --background-color: var(--hop-Avatar-background-color-disabled);
253
253
  --text-color: var(--hop-Avatar-text-color-disabled);
254
254
  --mix-blend-mode: var(--hop-Avatar-mix-blend-mode-disabled);
255
255
  isolation: isolate;
256
256
  }
257
- .Avatar-module__hop-Avatar__image___IyBz1 {
257
+ .Avatar-module__hop-Avatar__image___8lARV {
258
258
  position: relative;
259
259
  display: block;
260
260
  box-sizing: border-box;
@@ -265,7 +265,7 @@
265
265
  }
266
266
 
267
267
  /* css-module:/home/runner/work/wl-hopper/wl-hopper/packages/components/src/typography/OverlineText/src/OverlineText.module.css/#css-module-data */
268
- :where(.OverlineText-module__hop-OverlineText___OCaWy) {
268
+ :where(.OverlineText-module__hop-OverlineText___kurkU) {
269
269
  --hop-OverlineText-font-family: var(--hop-overline-font-family);
270
270
  --hop-OverlineText-font-size: var(--hop-overline-font-size);
271
271
  --hop-OverlineText-font-weight: var(--hop-overline-font-weight);
@@ -289,26 +289,26 @@
289
289
  text-transform: uppercase;
290
290
  letter-spacing: var(--letter-spacing);
291
291
  }
292
- .OverlineText-module__hop-OverlineText__text___C3XIa {
292
+ .OverlineText-module__hop-OverlineText__text___7uNsa {
293
293
  box-sizing: border-box;
294
294
  }
295
- .OverlineText-module__hop-OverlineText__text___C3XIa::before,
296
- .OverlineText-module__hop-OverlineText__text___C3XIa::after {
295
+ .OverlineText-module__hop-OverlineText__text___7uNsa::before,
296
+ .OverlineText-module__hop-OverlineText__text___7uNsa::after {
297
297
  content: "";
298
298
  display: block;
299
299
  box-sizing: border-box;
300
300
  inline-size: 0;
301
301
  block-size: 0;
302
302
  }
303
- .OverlineText-module__hop-OverlineText__text___C3XIa::before {
303
+ .OverlineText-module__hop-OverlineText__text___7uNsa::before {
304
304
  margin-block-end: var(--bottom-offset);
305
305
  }
306
- .OverlineText-module__hop-OverlineText__text___C3XIa::after {
306
+ .OverlineText-module__hop-OverlineText__text___7uNsa::after {
307
307
  margin-block-start: var(--top-offset);
308
308
  }
309
309
 
310
310
  /* css-module:/home/runner/work/wl-hopper/wl-hopper/packages/components/src/Badge/src/Badge.module.css/#css-module-data */
311
- .Badge-module__hop-Badge___TeU9H {
311
+ .Badge-module__hop-Badge___lrDM9 {
312
312
  --hop-Badge-height: 1.5rem;
313
313
  --hop-Badge-padding-inline: var(--hop-space-inset-sm);
314
314
  --hop-Badge-border-radius: var(--hop-shape-pill);
@@ -332,21 +332,21 @@
332
332
  background-color: var(--background-color, var(--hop-Badge-primary-background-color));
333
333
  border-radius: var(--border-radius);
334
334
  }
335
- .Badge-module__hop-Badge--primary___NOZgt {
335
+ .Badge-module__hop-Badge--primary___B9IJu {
336
336
  --background-color: var(--hop-Badge-primary-background-color);
337
337
  --text-color: var(--hop-Badge-primary-text-color);
338
338
  }
339
- .Badge-module__hop-Badge--secondary___vODxB {
339
+ .Badge-module__hop-Badge--secondary___rsYF4 {
340
340
  --background-color: var(--hop-Badge-secondary-background-color);
341
341
  --text-color: var(--hop-Badge-secondary-text-color);
342
342
  }
343
- .Badge-module__hop-Badge___TeU9H[data-disabled] {
343
+ .Badge-module__hop-Badge___lrDM9[data-disabled] {
344
344
  --background-color: var(--hop-Badge-background-color-disabled);
345
345
  --text-color: var(--hop-Badge-text-color-disabled);
346
346
  }
347
347
 
348
348
  /* css-module:/home/runner/work/wl-hopper/wl-hopper/packages/components/src/IconList/src/IconList.module.css/#css-module-data */
349
- .IconList-module__hop-IconList___omUb3 {
349
+ .IconList-module__hop-IconList___-mdbp {
350
350
  --hop-IconList-gap: var(--hop-space-inline-xs);
351
351
  display: flex;
352
352
  flex-wrap: wrap;
@@ -355,7 +355,7 @@
355
355
  }
356
356
 
357
357
  /* css-module:/home/runner/work/wl-hopper/wl-hopper/packages/components/src/Spinner/src/Spinner.module.css/#css-module-data */
358
- @keyframes Spinner-module__spin___lyTxx {
358
+ @keyframes Spinner-module__spin___SWfvR {
359
359
  0% {
360
360
  transform: rotate(0deg);
361
361
  }
@@ -363,7 +363,7 @@
363
363
  transform: rotate(360deg);
364
364
  }
365
365
  }
366
- .Spinner-module__hop-Spinner___HpocQ {
366
+ .Spinner-module__hop-Spinner___apf3U {
367
367
  --hop-Spinner-border-radius: var(--hop-shape-circle);
368
368
  --hop-Spinner-sm-wheel-size: 1rem;
369
369
  --hop-Spinner-md-wheel-size: 1.25rem;
@@ -371,7 +371,7 @@
371
371
  --hop-Spinner-track-width: 0.125rem;
372
372
  --hop-Spinner-track-opacity: 0.2;
373
373
  --hop-Spinner-track-border: var(--hop-Spinner-track-width) solid currentcolor;
374
- --hop-Spinner-fill-animation: Spinner-module__spin___lyTxx .8s infinite linear;
374
+ --hop-Spinner-fill-animation: Spinner-module__spin___SWfvR .8s infinite linear;
375
375
  --hop-Spinner-fill-animation-reduced-motion-duration: 2s;
376
376
  --hop-Spinner-fill-border: var(--hop-Spinner-track-width) solid transparent;
377
377
  --hop-Spinner-fill-border-inline-start: var(--hop-Spinner-track-width) solid currentcolor;
@@ -382,19 +382,19 @@
382
382
  align-items: center;
383
383
  box-sizing: border-box;
384
384
  }
385
- .Spinner-module__hop-Spinner--sm___4IKBk {
385
+ .Spinner-module__hop-Spinner--sm___iii5s {
386
386
  --width: var(--hop-Spinner-sm-wheel-size);
387
387
  --height: var(--hop-Spinner-sm-wheel-size);
388
388
  }
389
- .Spinner-module__hop-Spinner--md___ShZNF {
389
+ .Spinner-module__hop-Spinner--md___XWByD {
390
390
  --width: var(--hop-Spinner-md-wheel-size);
391
391
  --height: var(--hop-Spinner-md-wheel-size);
392
392
  }
393
- .Spinner-module__hop-Spinner--lg___TjYWE {
393
+ .Spinner-module__hop-Spinner--lg___8MyXM {
394
394
  --width: var(--hop-Spinner-lg-wheel-size);
395
395
  --height: var(--hop-Spinner-lg-wheel-size);
396
396
  }
397
- .Spinner-module__hop-Spinner__track___AfGNc {
397
+ .Spinner-module__hop-Spinner__track___jLA3R {
398
398
  grid-area: spinner;
399
399
  box-sizing: border-box;
400
400
  inline-size: var(--width, var(--hop-Spinner-md-wheel-size));
@@ -403,7 +403,7 @@
403
403
  border: var(--hop-Spinner-track-border);
404
404
  border-radius: var(--hop-Spinner-border-radius);
405
405
  }
406
- .Spinner-module__hop-Spinner__fill___STOGj {
406
+ .Spinner-module__hop-Spinner__fill___9aaOq {
407
407
  grid-area: spinner;
408
408
  box-sizing: border-box;
409
409
  inline-size: var(--width, var(--hop-Spinner-md-wheel-size));
@@ -414,17 +414,17 @@
414
414
  animation: var(--hop-Spinner-fill-animation);
415
415
  }
416
416
  @media (prefers-reduced-motion: reduce) {
417
- .Spinner-module__hop-Spinner__fill___STOGj {
417
+ .Spinner-module__hop-Spinner__fill___9aaOq {
418
418
  animation-duration: var(--hop-Spinner-fill-animation-reduced-motion-duration);
419
419
  }
420
420
  }
421
- .Spinner-module__hop-Spinner__label___XLsyu {
421
+ .Spinner-module__hop-Spinner__label___fNaHT {
422
422
  grid-area: label;
423
423
  margin-inline-start: var(--hop-Spinner-label-margin-inline-start);
424
424
  }
425
425
 
426
426
  /* css-module:/home/runner/work/wl-hopper/wl-hopper/packages/components/src/buttons/src/Button.module.css/#css-module-data */
427
- .Button-module__hop-Button___hVNkV {
427
+ .Button-module__hop-Button___ot9lw {
428
428
  --hop-Button-border-radius: var(--hop-shape-rounded-md);
429
429
  --hop-Button-focus-ring-color: var(--hop-primary-border-focus);
430
430
  --hop-Button-icon-only-padding: 0;
@@ -583,327 +583,319 @@
583
583
  background-color var(--hop-easing-duration-2) var(--hop-easing-productive),
584
584
  border var(--hop-easing-duration-2) var(--hop-easing-productive);
585
585
  }
586
- .Button-module__hop-Button___hVNkV[data-focus-visible] {
586
+ .Button-module__hop-Button___ot9lw[data-focus-visible] {
587
587
  outline: 0.125rem solid var(--hop-Button-focus-ring-color);
588
588
  }
589
- .Button-module__hop-Button--icon-only___UP8Ng {
589
+ .Button-module__hop-Button--icon-only___i5ahP {
590
590
  --padding-block: var(--hop-Button-icon-only-padding);
591
591
  --padding-inline: var(--hop-Button-icon-only-padding);
592
592
  column-gap: 0;
593
593
  aspect-ratio: 1;
594
594
  }
595
- .Button-module__hop-Button___hVNkV[data-disabled],
596
- .Button-module__hop-Button___hVNkV[data-loading] {
595
+ .Button-module__hop-Button___ot9lw[data-disabled],
596
+ .Button-module__hop-Button___ot9lw[data-loading] {
597
597
  cursor: not-allowed;
598
598
  }
599
- .Button-module__hop-Button--fluid___i-q6U {
599
+ .Button-module__hop-Button--fluid___7p5MN {
600
600
  --inline-size: 100%;
601
601
  }
602
- .Button-module__hop-Button--sm___TSOaw {
602
+ .Button-module__hop-Button--sm___8f5C7 {
603
603
  --block-size: var(--hop-Button-sm-height);
604
604
  }
605
- .Button-module__hop-Button--primary___bK7ig.Button-module__hop-Button--sm___TSOaw:not(.Button-module__hop-Button--icon-only___UP8Ng) {
605
+ .Button-module__hop-Button--primary___eGhk1.Button-module__hop-Button--sm___8f5C7:not(.Button-module__hop-Button--icon-only___i5ahP) {
606
606
  --padding-inline: var(--hop-Button-primary-sm-padding-x);
607
607
  --padding-block: var(--hop-Button-primary-sm-padding-y);
608
608
  }
609
- .Button-module__hop-Button--primary___bK7ig.Button-module__hop-Button--md___bw44A:not(.Button-module__hop-Button--icon-only___UP8Ng) {
609
+ .Button-module__hop-Button--primary___eGhk1.Button-module__hop-Button--md___Nq4Ho:not(.Button-module__hop-Button--icon-only___i5ahP) {
610
610
  --padding-inline: var(--hop-Button-primary-md-padding-x);
611
611
  --padding-block: var(--hop-Button-primary-md-padding-y);
612
612
  }
613
- .Button-module__hop-Button--secondary___iQ-Xg.Button-module__hop-Button--md___bw44A:not(.Button-module__hop-Button--icon-only___UP8Ng) {
613
+ .Button-module__hop-Button--secondary___EK4MQ.Button-module__hop-Button--md___Nq4Ho:not(.Button-module__hop-Button--icon-only___i5ahP) {
614
614
  --padding-inline: var(--hop-Button-secondary-md-padding-x);
615
615
  --padding-block: var(--hop-Button-secondary-md-padding-y);
616
616
  }
617
- .Button-module__hop-Button--secondary___iQ-Xg.Button-module__hop-Button--sm___TSOaw:not(.Button-module__hop-Button--icon-only___UP8Ng) {
617
+ .Button-module__hop-Button--secondary___EK4MQ.Button-module__hop-Button--sm___8f5C7:not(.Button-module__hop-Button--icon-only___i5ahP) {
618
618
  --padding-inline: var(--hop-Button-secondary-sm-padding-x);
619
619
  --padding-block: var(--hop-Button-secondary-sm-padding-y);
620
620
  }
621
- .Button-module__hop-Button--upsell___MaRoN.Button-module__hop-Button--md___bw44A:not(.Button-module__hop-Button--icon-only___UP8Ng) {
621
+ .Button-module__hop-Button--upsell___tKts9.Button-module__hop-Button--md___Nq4Ho:not(.Button-module__hop-Button--icon-only___i5ahP) {
622
622
  --padding-inline: var(--hop-Button-upsell-md-padding-x);
623
623
  --padding-block: var(--hop-Button-upsell-md-padding-y);
624
624
  }
625
- .Button-module__hop-Button--upsell___MaRoN.Button-module__hop-Button--sm___TSOaw:not(.Button-module__hop-Button--icon-only___UP8Ng) {
625
+ .Button-module__hop-Button--upsell___tKts9.Button-module__hop-Button--sm___8f5C7:not(.Button-module__hop-Button--icon-only___i5ahP) {
626
626
  --padding-inline: var(--hop-Button-upsell-sm-padding-x);
627
627
  --padding-block: var(--hop-Button-upsell-sm-padding-y);
628
628
  }
629
- .Button-module__hop-Button--danger___vlH3V.Button-module__hop-Button--md___bw44A:not(.Button-module__hop-Button--icon-only___UP8Ng) {
629
+ .Button-module__hop-Button--danger___kCc82.Button-module__hop-Button--md___Nq4Ho:not(.Button-module__hop-Button--icon-only___i5ahP) {
630
630
  --padding-inline: var(--hop-Button-danger-md-padding-x);
631
631
  --padding-block: var(--hop-Button-danger-md-padding-y);
632
632
  }
633
- .Button-module__hop-Button--danger___vlH3V.Button-module__hop-Button--sm___TSOaw:not(.Button-module__hop-Button--icon-only___UP8Ng) {
633
+ .Button-module__hop-Button--danger___kCc82.Button-module__hop-Button--sm___8f5C7:not(.Button-module__hop-Button--icon-only___i5ahP) {
634
634
  --padding-inline: var(--hop-Button-danger-sm-padding-x);
635
635
  --padding-block: var(--hop-Button-danger-sm-padding-y);
636
636
  }
637
- .Button-module__hop-Button--ghost-danger___JaoY-.Button-module__hop-Button--md___bw44A:not(.Button-module__hop-Button--icon-only___UP8Ng) {
637
+ .Button-module__hop-Button--ghost-danger___p0AWu.Button-module__hop-Button--md___Nq4Ho:not(.Button-module__hop-Button--icon-only___i5ahP) {
638
638
  --padding-inline: var(--hop-Button-ghost-danger-md-padding-x);
639
639
  --padding-block: var(--hop-Button-ghost-danger-md-padding-y);
640
640
  }
641
- .Button-module__hop-Button--ghost-danger___JaoY-.Button-module__hop-Button--sm___TSOaw:not(.Button-module__hop-Button--icon-only___UP8Ng) {
641
+ .Button-module__hop-Button--ghost-danger___p0AWu.Button-module__hop-Button--sm___8f5C7:not(.Button-module__hop-Button--icon-only___i5ahP) {
642
642
  --padding-inline: var(--hop-Button-ghost-danger-sm-padding-x);
643
643
  --padding-block: var(--hop-Button-ghost-danger-sm-padding-y);
644
644
  }
645
- .Button-module__hop-Button--ghost-secondary___JeWkk.Button-module__hop-Button--md___bw44A:not(.Button-module__hop-Button--icon-only___UP8Ng) {
645
+ .Button-module__hop-Button--ghost-secondary___Mh--L.Button-module__hop-Button--md___Nq4Ho:not(.Button-module__hop-Button--icon-only___i5ahP) {
646
646
  --padding-inline: var(--hop-Button-ghost-secondary-md-padding-x);
647
647
  --padding-block: var(--hop-Button-ghost-secondary-md-padding-y);
648
648
  }
649
- .Button-module__hop-Button--ghost-secondary___JeWkk.Button-module__hop-Button--sm___TSOaw:not(.Button-module__hop-Button--icon-only___UP8Ng) {
649
+ .Button-module__hop-Button--ghost-secondary___Mh--L.Button-module__hop-Button--sm___8f5C7:not(.Button-module__hop-Button--icon-only___i5ahP) {
650
650
  --padding-inline: var(--hop-Button-ghost-secondary-sm-padding-x);
651
651
  --padding-block: var(--hop-Button-ghost-secondary-sm-padding-y);
652
652
  }
653
- .Button-module__hop-Button--ghost-primary___HBhCX.Button-module__hop-Button--md___bw44A:not(.Button-module__hop-Button--icon-only___UP8Ng) {
653
+ .Button-module__hop-Button--ghost-primary___bHqEG.Button-module__hop-Button--md___Nq4Ho:not(.Button-module__hop-Button--icon-only___i5ahP) {
654
654
  --padding-inline: var(--hop-Button-ghost-primary-md-padding-x);
655
655
  --padding-block: var(--hop-Button-ghost-primary-md-padding-y);
656
656
  }
657
- .Button-module__hop-Button--ghost-primary___HBhCX.Button-module__hop-Button--sm___TSOaw:not(.Button-module__hop-Button--icon-only___UP8Ng) {
657
+ .Button-module__hop-Button--ghost-primary___bHqEG.Button-module__hop-Button--sm___8f5C7:not(.Button-module__hop-Button--icon-only___i5ahP) {
658
658
  --padding-inline: var(--hop-Button-ghost-primary-sm-padding-x);
659
659
  --padding-block: var(--hop-Button-ghost-primary-sm-padding-y);
660
660
  }
661
- .Button-module__hop-Button--primary___bK7ig {
661
+ .Button-module__hop-Button--primary___eGhk1 {
662
662
  --background-color: var(--hop-Button-primary-background-color);
663
663
  --color: var(--hop-Button-primary-color);
664
664
  --border: var(--hop-Button-primary-border);
665
665
  --spinner-color: var(--hop-Button-primary-spinner-color);
666
666
  }
667
- .Button-module__hop-Button--primary___bK7ig[data-disabled]:not([data-loading]) {
667
+ .Button-module__hop-Button--primary___eGhk1[data-disabled]:not([data-loading]) {
668
668
  --background-color: var(--hop-Button-primary-background-color-disabled);
669
669
  --color: var(--hop-Button-primary-color-disabled);
670
670
  --border: var(--hop-Button-primary-border-disabled);
671
671
  }
672
- .Button-module__hop-Button--primary___bK7ig[data-hovered]:not([data-disabled], [data-loading]),
673
- .Button-module__hop-Button--primary___bK7ig[data-focus-visible]:not([data-disabled], [data-loading]) {
672
+ .Button-module__hop-Button--primary___eGhk1[data-hovered]:not([data-disabled], [data-loading]),
673
+ .Button-module__hop-Button--primary___eGhk1[data-focus-visible]:not([data-disabled], [data-loading]) {
674
674
  --background-color: var(--hop-Button-primary-background-color-hover);
675
675
  --color: var(--hop-Button-primary-color-hover);
676
676
  --border: var(--hop-Button-primary-border-hover);
677
677
  }
678
- .Button-module__hop-Button--primary___bK7ig[data-pressed]:not([data-loading]) {
678
+ .Button-module__hop-Button--primary___eGhk1[data-pressed]:not([data-loading]) {
679
679
  --background-color: var(--hop-Button-primary-background-color-pressed);
680
680
  --color: var(--hop-Button-primary-color-pressed);
681
681
  --border: var(--hop-Button-primary-border-pressed);
682
682
  }
683
- .Button-module__hop-Button--secondary___iQ-Xg {
683
+ .Button-module__hop-Button--secondary___EK4MQ {
684
684
  --background-color: var(--hop-Button-secondary-background-color);
685
685
  --color: var(--hop-Button-secondary-color);
686
686
  --border: var(--hop-Button-secondary-border);
687
687
  --spinner-color: var(--hop-Button-secondary-spinner-color);
688
688
  }
689
- .Button-module__hop-Button--secondary___iQ-Xg[data-disabled]:not([data-loading]) {
689
+ .Button-module__hop-Button--secondary___EK4MQ[data-disabled]:not([data-loading]) {
690
690
  --background-color: var(--hop-Button-secondary-background-color-disabled);
691
691
  --color: var(--hop-Button-secondary-color-disabled);
692
692
  --border: var(--hop-Button-secondary-border-disabled);
693
693
  }
694
- .Button-module__hop-Button--secondary___iQ-Xg[data-hovered]:not([data-disabled], [data-loading]),
695
- .Button-module__hop-Button--secondary___iQ-Xg[data-focus-visible]:not([data-disabled], [data-loading]) {
694
+ .Button-module__hop-Button--secondary___EK4MQ[data-hovered]:not([data-disabled], [data-loading]),
695
+ .Button-module__hop-Button--secondary___EK4MQ[data-focus-visible]:not([data-disabled], [data-loading]) {
696
696
  --background-color: var(--hop-Button-secondary-background-color-hover);
697
697
  --color: var(--hop-Button-secondary-color-hover);
698
698
  --border: var(--hop-Button-secondary-border-hover);
699
699
  }
700
- .Button-module__hop-Button--secondary___iQ-Xg[data-pressed]:not([data-loading]) {
700
+ .Button-module__hop-Button--secondary___EK4MQ[data-pressed]:not([data-loading]) {
701
701
  --background-color: var(--hop-Button-secondary-background-color-pressed);
702
702
  --color: var(--hop-Button-secondary-color-pressed);
703
703
  --border: var(--hop-Button-secondary-border-pressed);
704
704
  }
705
- .Button-module__hop-Button--upsell___MaRoN {
705
+ .Button-module__hop-Button--upsell___tKts9 {
706
706
  --background-color: var(--hop-Button-upsell-background-color);
707
707
  --color: var(--hop-Button-upsell-color);
708
708
  --border: var(--hop-Button-upsell-border);
709
709
  --spinner-color: var(--hop-Button-upsell-spinner-color);
710
710
  }
711
- .Button-module__hop-Button--upsell___MaRoN[data-disabled]:not([data-loading]) {
711
+ .Button-module__hop-Button--upsell___tKts9[data-disabled]:not([data-loading]) {
712
712
  --background-color: var(--hop-Button-upsell-background-color-disabled);
713
713
  --color: var(--hop-Button-upsell-color-disabled);
714
714
  --border: var(--hop-Button-upsell-border-disabled);
715
715
  }
716
- .Button-module__hop-Button--upsell___MaRoN[data-hovered]:not([data-disabled], [data-loading]),
717
- .Button-module__hop-Button--upsell___MaRoN[data-focus-visible]:not([data-disabled], [data-loading]) {
716
+ .Button-module__hop-Button--upsell___tKts9[data-hovered]:not([data-disabled], [data-loading]),
717
+ .Button-module__hop-Button--upsell___tKts9[data-focus-visible]:not([data-disabled], [data-loading]) {
718
718
  --background-color: var(--hop-Button-upsell-background-color-hover);
719
719
  --color: var(--hop-Button-upsell-color-hover);
720
720
  --border: var(--hop-Button-upsell-border-hover);
721
721
  }
722
- .Button-module__hop-Button--upsell___MaRoN[data-pressed]:not([data-loading]) {
722
+ .Button-module__hop-Button--upsell___tKts9[data-pressed]:not([data-loading]) {
723
723
  --background-color: var(--hop-Button-upsell-background-color-pressed);
724
724
  --color: var(--hop-Button-upsell-color-pressed);
725
725
  --border: var(--hop-Button-upsell-border-pressed);
726
726
  }
727
- .Button-module__hop-Button--danger___vlH3V {
727
+ .Button-module__hop-Button--danger___kCc82 {
728
728
  --background-color: var(--hop-Button-danger-background-color);
729
729
  --color: var(--hop-Button-danger-color);
730
730
  --border: var(--hop-Button-danger-border);
731
731
  --spinner-color: var(--hop-Button-danger-spinner-color);
732
732
  }
733
- .Button-module__hop-Button--danger___vlH3V[data-disabled]:not([data-loading]) {
733
+ .Button-module__hop-Button--danger___kCc82[data-disabled]:not([data-loading]) {
734
734
  --background-color: var(--hop-Button-danger-background-color-disabled);
735
735
  --color: var(--hop-Button-danger-color-disabled);
736
736
  --border: var(--hop-Button-danger-border-disabled);
737
737
  }
738
- .Button-module__hop-Button--danger___vlH3V[data-hovered]:not([data-disabled], [data-loading]),
739
- .Button-module__hop-Button--danger___vlH3V[data-focus-visible]:not([data-disabled], [data-loading]) {
738
+ .Button-module__hop-Button--danger___kCc82[data-hovered]:not([data-disabled], [data-loading]),
739
+ .Button-module__hop-Button--danger___kCc82[data-focus-visible]:not([data-disabled], [data-loading]) {
740
740
  --background-color: var(--hop-Button-danger-background-color-hover);
741
741
  --color: var(--hop-Button-danger-color-hover);
742
742
  --border: var(--hop-Button-danger-border-hover);
743
743
  }
744
- .Button-module__hop-Button--danger___vlH3V[data-pressed]:not([data-loading]) {
744
+ .Button-module__hop-Button--danger___kCc82[data-pressed]:not([data-loading]) {
745
745
  --background-color: var(--hop-Button-danger-background-color-pressed);
746
746
  --color: var(--hop-Button-danger-color-pressed);
747
747
  --border: var(--hop-Button-danger-border-pressed);
748
748
  }
749
- .Button-module__hop-Button--ghost-primary___HBhCX {
749
+ .Button-module__hop-Button--ghost-primary___bHqEG {
750
750
  --background-color: var(--hop-Button-ghost-primary-background-color);
751
751
  --color: var(--hop-Button-ghost-primary-color);
752
752
  --border: var(--hop-Button-ghost-primary-border);
753
753
  --spinner-color: var(--hop-Button-ghost-primary-spinner-color);
754
754
  }
755
- .Button-module__hop-Button--ghost-primary___HBhCX[data-disabled]:not([data-loading]) {
755
+ .Button-module__hop-Button--ghost-primary___bHqEG[data-disabled]:not([data-loading]) {
756
756
  --background-color: var(--hop-Button-ghost-primary-background-color-disabled);
757
757
  --color: var(--hop-Button-ghost-primary-color-disabled);
758
758
  --border: var(--hop-Button-ghost-primary-border-disabled);
759
759
  }
760
- .Button-module__hop-Button--ghost-primary___HBhCX[data-hovered]:not([data-disabled], [data-loading]),
761
- .Button-module__hop-Button--ghost-primary___HBhCX[data-focus-visible]:not([data-disabled], [data-loading]) {
760
+ .Button-module__hop-Button--ghost-primary___bHqEG[data-hovered]:not([data-disabled], [data-loading]),
761
+ .Button-module__hop-Button--ghost-primary___bHqEG[data-focus-visible]:not([data-disabled], [data-loading]) {
762
762
  --background-color: var(--hop-Button-ghost-primary-background-color-hover);
763
763
  --color: var(--hop-Button-ghost-primary-color-hover);
764
764
  --border: var(--hop-Button-ghost-primary-border-hover);
765
765
  }
766
- .Button-module__hop-Button--ghost-primary___HBhCX[data-pressed]:not([data-loading]) {
766
+ .Button-module__hop-Button--ghost-primary___bHqEG[data-pressed]:not([data-loading]) {
767
767
  --background-color: var(--hop-Button-ghost-primary-background-color-pressed);
768
768
  --color: var(--hop-Button-ghost-primary-color-pressed);
769
769
  --border: var(--hop-Button-ghost-primary-border-pressed);
770
770
  }
771
- .Button-module__hop-Button--ghost-secondary___JeWkk {
771
+ .Button-module__hop-Button--ghost-secondary___Mh--L {
772
772
  --background-color: var(--hop-Button-ghost-secondary-background-color);
773
773
  --color: var(--hop-Button-ghost-secondary-color);
774
774
  --border: var(--hop-Button-ghost-secondary-border);
775
775
  --spinner-color: var(--hop-Button-ghost-secondary-spinner-color);
776
776
  }
777
- .Button-module__hop-Button--ghost-secondary___JeWkk[data-disabled]:not([data-loading]) {
777
+ .Button-module__hop-Button--ghost-secondary___Mh--L[data-disabled]:not([data-loading]) {
778
778
  --background-color: var(--hop-Button-ghost-secondary-background-color-disabled);
779
779
  --color: var(--hop-Button-ghost-secondary-color-disabled);
780
780
  --border: var(--hop-Button-ghost-secondary-border-disabled);
781
781
  }
782
- .Button-module__hop-Button--ghost-secondary___JeWkk[data-hovered]:not([data-disabled], [data-loading]),
783
- .Button-module__hop-Button--ghost-secondary___JeWkk[data-focus-visible]:not([data-disabled], [data-loading]) {
782
+ .Button-module__hop-Button--ghost-secondary___Mh--L[data-hovered]:not([data-disabled], [data-loading]),
783
+ .Button-module__hop-Button--ghost-secondary___Mh--L[data-focus-visible]:not([data-disabled], [data-loading]) {
784
784
  --background-color: var(--hop-Button-ghost-secondary-background-color-hover);
785
785
  --color: var(--hop-Button-ghost-secondary-color-hover);
786
786
  --border: var(--hop-Button-ghost-secondary-border-hover);
787
787
  }
788
- .Button-module__hop-Button--ghost-secondary___JeWkk[data-pressed]:not([data-loading]) {
788
+ .Button-module__hop-Button--ghost-secondary___Mh--L[data-pressed]:not([data-loading]) {
789
789
  --background-color: var(--hop-Button-ghost-secondary-background-color-pressed);
790
790
  --color: var(--hop-Button-ghost-secondary-color-pressed);
791
791
  --border: var(--hop-Button-ghost-secondary-border-pressed);
792
792
  }
793
- .Button-module__hop-Button--ghost-danger___JaoY- {
793
+ .Button-module__hop-Button--ghost-danger___p0AWu {
794
794
  --background-color: var(--hop-Button-ghost-danger-background-color);
795
795
  --color: var(--hop-Button-ghost-danger-color);
796
796
  --border: var(--hop-Button-ghost-danger-border);
797
797
  --spinner-color: var(--hop-Button-ghost-danger-spinner-color);
798
798
  }
799
- .Button-module__hop-Button--ghost-danger___JaoY-[data-disabled]:not([data-loading]) {
799
+ .Button-module__hop-Button--ghost-danger___p0AWu[data-disabled]:not([data-loading]) {
800
800
  --background-color: var(--hop-Button-ghost-danger-background-color-disabled);
801
801
  --color: var(--hop-Button-ghost-danger-color-disabled);
802
802
  --border: var(--hop-Button-ghost-danger-border-disabled);
803
803
  }
804
- .Button-module__hop-Button--ghost-danger___JaoY-[data-hovered]:not([data-disabled], [data-loading]),
805
- .Button-module__hop-Button--ghost-danger___JaoY-[data-focus-visible]:not([data-disabled], [data-loading]) {
804
+ .Button-module__hop-Button--ghost-danger___p0AWu[data-hovered]:not([data-disabled], [data-loading]),
805
+ .Button-module__hop-Button--ghost-danger___p0AWu[data-focus-visible]:not([data-disabled], [data-loading]) {
806
806
  --background-color: var(--hop-Button-ghost-danger-background-color-hover);
807
807
  --color: var(--hop-Button-ghost-danger-color-hover);
808
808
  --border: var(--hop-Button-ghost-danger-border-hover);
809
809
  }
810
- .Button-module__hop-Button--ghost-danger___JaoY-[data-pressed]:not([data-loading]) {
810
+ .Button-module__hop-Button--ghost-danger___p0AWu[data-pressed]:not([data-loading]) {
811
811
  --background-color: var(--hop-Button-ghost-danger-background-color-pressed);
812
812
  --color: var(--hop-Button-ghost-danger-color-pressed);
813
813
  --border: var(--hop-Button-ghost-danger-border-pressed);
814
814
  }
815
- .Button-module__hop-Button__Spinner___qhpjO {
815
+ .Button-module__hop-Button__Spinner___pYUr5 {
816
816
  position: absolute;
817
817
  justify-self: center;
818
818
  color: var(--spinner-color);
819
819
  }
820
- .Button-module__hop-Button__icon___lufK8,
821
- .Button-module__hop-Button__icon-list___QNRCt {
820
+ .Button-module__hop-Button__icon___8a7Yy,
821
+ .Button-module__hop-Button__icon-list___7KNrU {
822
822
  grid-area: start-icon;
823
823
  justify-self: end;
824
824
  }
825
- .Button-module__hop-Button__text___MfT24 {
825
+ .Button-module__hop-Button__text___a4lmJ {
826
826
  user-select: none;
827
827
  overflow: visible;
828
828
  grid-area: content;
829
829
  font-weight: var(--hop-font-weight-505);
830
830
  text-wrap: nowrap;
831
831
  }
832
- .Button-module__hop-Button--ghost-primary___HBhCX[data-hovered]:not([data-loading]) .Button-module__hop-Button__text___MfT24,
833
- .Button-module__hop-Button--ghost-secondary___JeWkk[data-hovered]:not([data-loading]) .Button-module__hop-Button__text___MfT24,
834
- .Button-module__hop-Button--ghost-danger___JaoY-[data-hovered]:not([data-loading]) .Button-module__hop-Button__text___MfT24,
835
- .Button-module__hop-Button--ghost-primary___HBhCX[data-pressed]:not([data-loading]) .Button-module__hop-Button__text___MfT24,
836
- .Button-module__hop-Button--ghost-secondary___JeWkk[data-pressed]:not([data-loading]) .Button-module__hop-Button__text___MfT24,
837
- .Button-module__hop-Button--ghost-danger___JaoY-[data-pressed]:not([data-loading]) .Button-module__hop-Button__text___MfT24,
838
- .Button-module__hop-Button--ghost-primary___HBhCX[data-focus-visible]:not([data-loading]) .Button-module__hop-Button__text___MfT24,
839
- .Button-module__hop-Button--ghost-secondary___JeWkk[data-focus-visible]:not([data-loading]) .Button-module__hop-Button__text___MfT24,
840
- .Button-module__hop-Button--ghost-danger___JaoY-[data-focus-visible]:not([data-loading]) .Button-module__hop-Button__text___MfT24 {
832
+ .Button-module__hop-Button--ghost-primary___bHqEG[data-hovered]:not([data-loading]) .Button-module__hop-Button__text___a4lmJ,
833
+ .Button-module__hop-Button--ghost-secondary___Mh--L[data-hovered]:not([data-loading]) .Button-module__hop-Button__text___a4lmJ,
834
+ .Button-module__hop-Button--ghost-danger___p0AWu[data-hovered]:not([data-loading]) .Button-module__hop-Button__text___a4lmJ,
835
+ .Button-module__hop-Button--ghost-primary___bHqEG[data-pressed]:not([data-loading]) .Button-module__hop-Button__text___a4lmJ,
836
+ .Button-module__hop-Button--ghost-secondary___Mh--L[data-pressed]:not([data-loading]) .Button-module__hop-Button__text___a4lmJ,
837
+ .Button-module__hop-Button--ghost-danger___p0AWu[data-pressed]:not([data-loading]) .Button-module__hop-Button__text___a4lmJ,
838
+ .Button-module__hop-Button--ghost-primary___bHqEG[data-focus-visible]:not([data-loading]) .Button-module__hop-Button__text___a4lmJ,
839
+ .Button-module__hop-Button--ghost-secondary___Mh--L[data-focus-visible]:not([data-loading]) .Button-module__hop-Button__text___a4lmJ,
840
+ .Button-module__hop-Button--ghost-danger___p0AWu[data-focus-visible]:not([data-loading]) .Button-module__hop-Button__text___a4lmJ {
841
841
  text-decoration: underline;
842
842
  text-underline-offset: 0.125rem;
843
843
  }
844
- .Button-module__hop-Button__end-icon___Wx11c,
845
- .Button-module__hop-Button__end-icon-list___7VMeu {
844
+ .Button-module__hop-Button__end-icon___oJS-s,
845
+ .Button-module__hop-Button__end-icon-list___iyDSw {
846
846
  grid-area: end-icon;
847
847
  }
848
- .Button-module__hop-Button___hVNkV .Button-module__hop-Button__icon-list___QNRCt,
849
- .Button-module__hop-Button___hVNkV .Button-module__hop-Button__end-icon-list___7VMeu {
848
+ .Button-module__hop-Button___ot9lw .Button-module__hop-Button__icon-list___7KNrU,
849
+ .Button-module__hop-Button___ot9lw .Button-module__hop-Button__end-icon-list___iyDSw {
850
850
  flex-wrap: nowrap;
851
851
  }
852
- .Button-module__hop-Button___hVNkV[data-loading] > *:not(.Button-module__hop-Button__Spinner___qhpjO) {
852
+ .Button-module__hop-Button___ot9lw[data-loading] > *:not(.Button-module__hop-Button__Spinner___pYUr5) {
853
853
  opacity: 0;
854
854
  }
855
855
 
856
856
  /* css-module:/home/runner/work/wl-hopper/wl-hopper/packages/components/src/buttons/src/ButtonGroup.module.css/#css-module-data */
857
- .ButtonGroup-module__hop-ButtonGroup___04OMd {
857
+ .ButtonGroup-module__hop-ButtonGroup___pg9lD {
858
858
  display: inline-flex;
859
859
  flex-wrap: nowrap;
860
860
  gap: var(--hop-space-inline-md);
861
861
  }
862
- .ButtonGroup-module__hop-ButtonGroup--horizontal___gfk88 {
862
+ .ButtonGroup-module__hop-ButtonGroup--horizontal___IeYfB {
863
863
  justify-content: center;
864
864
  }
865
- .ButtonGroup-module__hop-ButtonGroup--vertical___AWwpV {
865
+ .ButtonGroup-module__hop-ButtonGroup--vertical___20OwE {
866
866
  flex-direction: column;
867
867
  gap: var(--hop-space-stack-md);
868
868
  align-items: center;
869
869
  }
870
- .ButtonGroup-module__hop-ButtonGroup--start___2HDvA.ButtonGroup-module__hop-ButtonGroup--vertical___AWwpV {
870
+ .ButtonGroup-module__hop-ButtonGroup--start___8cAOO.ButtonGroup-module__hop-ButtonGroup--vertical___20OwE {
871
871
  align-items: flex-start;
872
872
  }
873
- .ButtonGroup-module__hop-ButtonGroup--center___cWrk2.ButtonGroup-module__hop-ButtonGroup--vertical___AWwpV {
873
+ .ButtonGroup-module__hop-ButtonGroup--center___bXsRU.ButtonGroup-module__hop-ButtonGroup--vertical___20OwE {
874
874
  align-items: center;
875
875
  }
876
- .ButtonGroup-module__hop-ButtonGroup--end___h-8op.ButtonGroup-module__hop-ButtonGroup--vertical___AWwpV {
876
+ .ButtonGroup-module__hop-ButtonGroup--end___QRAcI.ButtonGroup-module__hop-ButtonGroup--vertical___20OwE {
877
877
  align-items: flex-end;
878
878
  }
879
- .ButtonGroup-module__hop-ButtonGroup--start___2HDvA.ButtonGroup-module__hop-ButtonGroup--horizontal___gfk88 {
879
+ .ButtonGroup-module__hop-ButtonGroup--start___8cAOO.ButtonGroup-module__hop-ButtonGroup--horizontal___IeYfB {
880
880
  justify-content: flex-start;
881
881
  }
882
- .ButtonGroup-module__hop-ButtonGroup--center___cWrk2.ButtonGroup-module__hop-ButtonGroup--horizontal___gfk88 {
882
+ .ButtonGroup-module__hop-ButtonGroup--center___bXsRU.ButtonGroup-module__hop-ButtonGroup--horizontal___IeYfB {
883
883
  justify-content: center;
884
884
  }
885
- .ButtonGroup-module__hop-ButtonGroup--end___h-8op.ButtonGroup-module__hop-ButtonGroup--horizontal___gfk88 {
885
+ .ButtonGroup-module__hop-ButtonGroup--end___QRAcI.ButtonGroup-module__hop-ButtonGroup--horizontal___IeYfB {
886
886
  justify-content: flex-end;
887
887
  }
888
- .ButtonGroup-module__hop-ButtonGroup--wrap___-uxgb {
888
+ .ButtonGroup-module__hop-ButtonGroup--wrap___72Z7i {
889
889
  flex-wrap: wrap;
890
890
  }
891
- .ButtonGroup-module__hop-ButtonGroup--fluid___TAcci {
891
+ .ButtonGroup-module__hop-ButtonGroup--fluid___cVwde {
892
892
  inline-size: 100%;
893
893
  }
894
894
 
895
895
  /* css-module:/home/runner/work/wl-hopper/wl-hopper/packages/components/src/buttons/src/EmbeddedButton.module.css/#css-module-data */
896
- .EmbeddedButton-module__hop-EmbeddedButton___YX-wK {
896
+ .EmbeddedButton-module__hop-EmbeddedButton___Ef3WW {
897
897
  --hop-EmbeddedButton-border-radius: var(--hop-shape-rounded-md);
898
898
  --hop-EmbeddedButton-focus-ring-color: var(--hop-primary-border-focus);
899
- --hop-EmbeddedButton-color: var(--hop-neutral-icon-weak);
900
- --hop-EmbeddedButton-color-hover: var(--hop-neutral-icon-weak-hover);
901
- --hop-EmbeddedButton-color-pressed: var(--hop-neutral-icon-weak-press);
902
- --hop-EmbeddedButton-color-disabled: var(--hop-neutral-icon-disabled);
903
- --hop-EmbeddedButton-effect-background-color: transparent;
904
- --hop-EmbeddedButton-effect-background-color-hover: var(--hop-neutral-surface-weak-hover);
905
- --hop-EmbeddedButton-effect-background-color-pressed: var(--hop-neutral-surface-weak-press);
906
- --hop-EmbeddedButton-effect-background-color-disabled: transparent;
907
899
  --hop-EmbeddedButton-effect-border-radius: var(--hop-shape-circle);
908
900
  --hop-EmbeddedButton-md-height: 1.5rem;
909
901
  --hop-EmbeddedButton-md-width: 1.5rem;
@@ -913,11 +905,133 @@
913
905
  --hop-EmbeddedButton-lg-width: 1.5rem;
914
906
  --hop-EmbeddedButton-lg-effect-height: 1.5rem;
915
907
  --hop-EmbeddedButton-lg-effect-width: 1.5rem;
908
+ --hop-EmbeddedButton-neutral-color: var(--hop-neutral-icon-weak);
909
+ --hop-EmbeddedButton-neutral-color-hovered: var(--hop-neutral-icon-weak-hover);
910
+ --hop-EmbeddedButton-neutral-color-focused: var(--hop-neutral-icon-weak-hover);
911
+ --hop-EmbeddedButton-neutral-color-pressed: var(--hop-neutral-icon-weak-press);
912
+ --hop-EmbeddedButton-neutral-color-disabled: var(--hop-neutral-icon-disabled);
913
+ --hop-EmbeddedButton-neutral-effect-background-color: transparent;
914
+ --hop-EmbeddedButton-neutral-effect-background-color-hovered: var(--hop-neutral-surface-weak-hover);
915
+ --hop-EmbeddedButton-neutral-effect-background-color-focused: var(--hop-neutral-surface-weak-hover);
916
+ --hop-EmbeddedButton-neutral-effect-background-color-pressed: var(--hop-neutral-surface-weak-press);
917
+ --hop-EmbeddedButton-neutral-effect-background-color-disabled: transparent;
918
+ --hop-EmbeddedButton-subdued-color: var(--hop-neutral-icon-weak);
919
+ --hop-EmbeddedButton-subdued-color-hovered: var(--hop-neutral-icon-weak-hover);
920
+ --hop-EmbeddedButton-subdued-color-focused: var(--hop-neutral-icon-weak-hover);
921
+ --hop-EmbeddedButton-subdued-color-pressed: var(--hop-neutral-icon-weak-press);
922
+ --hop-EmbeddedButton-subdued-color-disabled: var(--hop-neutral-icon-disabled);
923
+ --hop-EmbeddedButton-subdued-effect-background-color: transparent;
924
+ --hop-EmbeddedButton-subdued-effect-background-color-hovered: var(--hop-neutral-surface-weak-hover);
925
+ --hop-EmbeddedButton-subdued-effect-background-color-focused: var(--hop-neutral-surface-weak-hover);
926
+ --hop-EmbeddedButton-subdued-effect-background-color-pressed: var(--hop-neutral-surface-weak-press);
927
+ --hop-EmbeddedButton-subdued-effect-background-color-disabled: transparent;
928
+ --hop-EmbeddedButton-progress-color: var(--hop-status-progress-icon);
929
+ --hop-EmbeddedButton-progress-color-hovered: var(--hop-status-progress-icon-hover);
930
+ --hop-EmbeddedButton-progress-color-focused: var(--hop-status-progress-icon-hover);
931
+ --hop-EmbeddedButton-progress-color-pressed: var(--hop-status-progress-icon-press);
932
+ --hop-EmbeddedButton-progress-color-disabled: var(--hop-status-progress-icon-disabled);
933
+ --hop-EmbeddedButton-progress-effect-background-color: transparent;
934
+ --hop-EmbeddedButton-progress-effect-background-color-hovered: var(--hop-status-progress-surface-hover);
935
+ --hop-EmbeddedButton-progress-effect-background-color-focused: var(--hop-status-progress-surface-hover);
936
+ --hop-EmbeddedButton-progress-effect-background-color-pressed: var(--hop-status-progress-surface-press);
937
+ --hop-EmbeddedButton-progress-effect-background-color-disabled: transparent;
938
+ --hop-EmbeddedButton-positive-color: var(--hop-status-positive-icon);
939
+ --hop-EmbeddedButton-positive-color-hovered: var(--hop-status-positive-icon-hover);
940
+ --hop-EmbeddedButton-positive-color-focused: var(--hop-status-positive-icon-hover);
941
+ --hop-EmbeddedButton-positive-color-pressed: var(--hop-status-positive-icon-press);
942
+ --hop-EmbeddedButton-positive-color-disabled: var(--hop-status-positive-icon-disabled);
943
+ --hop-EmbeddedButton-positive-effect-background-color: transparent;
944
+ --hop-EmbeddedButton-positive-effect-background-color-hovered: var(--hop-status-positive-surface-hover);
945
+ --hop-EmbeddedButton-positive-effect-background-color-focused: var(--hop-status-positive-surface-hover);
946
+ --hop-EmbeddedButton-positive-effect-background-color-pressed: var(--hop-status-positive-surface-press);
947
+ --hop-EmbeddedButton-positive-effect-background-color-disabled: transparent;
948
+ --hop-EmbeddedButton-caution-color: var(--hop-status-caution-icon);
949
+ --hop-EmbeddedButton-caution-color-hovered: var(--hop-status-caution-icon-hover);
950
+ --hop-EmbeddedButton-caution-color-focused: var(--hop-status-caution-icon-hover);
951
+ --hop-EmbeddedButton-caution-color-pressed: var(--hop-status-caution-icon-press);
952
+ --hop-EmbeddedButton-caution-color-disabled: var(--hop-status-caution-icon-disabled);
953
+ --hop-EmbeddedButton-caution-effect-background-color: transparent;
954
+ --hop-EmbeddedButton-caution-effect-background-color-hovered: var(--hop-status-caution-surface-hover);
955
+ --hop-EmbeddedButton-caution-effect-background-color-focused: var(--hop-status-caution-surface-hover);
956
+ --hop-EmbeddedButton-caution-effect-background-color-pressed: var(--hop-status-caution-surface-press);
957
+ --hop-EmbeddedButton-caution-effect-background-color-disabled: transparent;
958
+ --hop-EmbeddedButton-negative-color: var(--hop-status-negative-icon);
959
+ --hop-EmbeddedButton-negative-color-hovered: var(--hop-status-negative-icon-hover);
960
+ --hop-EmbeddedButton-negative-color-focused: var(--hop-status-negative-icon-hover);
961
+ --hop-EmbeddedButton-negative-color-pressed: var(--hop-status-negative-icon-press);
962
+ --hop-EmbeddedButton-negative-color-disabled: var(--hop-status-negative-icon-disabled);
963
+ --hop-EmbeddedButton-negative-effect-background-color: transparent;
964
+ --hop-EmbeddedButton-negative-effect-background-color-hovered: var(--hop-status-negative-surface-hover);
965
+ --hop-EmbeddedButton-negative-effect-background-color-focused: var(--hop-status-negative-surface-hover);
966
+ --hop-EmbeddedButton-negative-effect-background-color-pressed: var(--hop-status-negative-surface-press);
967
+ --hop-EmbeddedButton-negative-effect-background-color-disabled: transparent;
968
+ --hop-EmbeddedButton-option1-color: var(--hop-status-option1-icon);
969
+ --hop-EmbeddedButton-option1-color-hovered: var(--hop-status-option1-icon-hover);
970
+ --hop-EmbeddedButton-option1-color-focused: var(--hop-status-option1-icon-hover);
971
+ --hop-EmbeddedButton-option1-color-pressed: var(--hop-status-option1-icon-press);
972
+ --hop-EmbeddedButton-option1-color-disabled: var(--hop-status-option1-icon-disabled);
973
+ --hop-EmbeddedButton-option1-effect-background-color: transparent;
974
+ --hop-EmbeddedButton-option1-effect-background-color-hovered: var(--hop-status-option1-surface-hover);
975
+ --hop-EmbeddedButton-option1-effect-background-color-focused: var(--hop-status-option1-surface-hover);
976
+ --hop-EmbeddedButton-option1-effect-background-color-pressed: var(--hop-status-option1-surface-press);
977
+ --hop-EmbeddedButton-option1-effect-background-color-disabled: transparent;
978
+ --hop-EmbeddedButton-option2-color: var(--hop-status-option2-icon);
979
+ --hop-EmbeddedButton-option2-color-hovered: var(--hop-status-option2-icon-hover);
980
+ --hop-EmbeddedButton-option2-color-focused: var(--hop-status-option2-icon-hover);
981
+ --hop-EmbeddedButton-option2-color-pressed: var(--hop-status-option2-icon-press);
982
+ --hop-EmbeddedButton-option2-color-disabled: var(--hop-status-option2-icon-disabled);
983
+ --hop-EmbeddedButton-option2-effect-background-color: transparent;
984
+ --hop-EmbeddedButton-option2-effect-background-color-hovered: var(--hop-status-option2-surface-hover);
985
+ --hop-EmbeddedButton-option2-effect-background-color-focused: var(--hop-status-option2-surface-hover);
986
+ --hop-EmbeddedButton-option2-effect-background-color-pressed: var(--hop-status-option2-surface-press);
987
+ --hop-EmbeddedButton-option2-effect-background-color-disabled: transparent;
988
+ --hop-EmbeddedButton-option3-color: var(--hop-status-option3-icon);
989
+ --hop-EmbeddedButton-option3-color-hovered: var(--hop-status-option3-icon-hover);
990
+ --hop-EmbeddedButton-option3-color-focused: var(--hop-status-option3-icon-hover);
991
+ --hop-EmbeddedButton-option3-color-pressed: var(--hop-status-option3-icon-press);
992
+ --hop-EmbeddedButton-option3-color-disabled: var(--hop-status-option3-icon-disabled);
993
+ --hop-EmbeddedButton-option3-effect-background-color: transparent;
994
+ --hop-EmbeddedButton-option3-effect-background-color-hovered: var(--hop-status-option3-surface-hover);
995
+ --hop-EmbeddedButton-option3-effect-background-color-focused: var(--hop-status-option3-surface-hover);
996
+ --hop-EmbeddedButton-option3-effect-background-color-pressed: var(--hop-status-option3-surface-press);
997
+ --hop-EmbeddedButton-option3-effect-background-color-disabled: transparent;
998
+ --hop-EmbeddedButton-option4-color: var(--hop-status-option4-icon);
999
+ --hop-EmbeddedButton-option4-color-hovered: var(--hop-status-option4-icon-hover);
1000
+ --hop-EmbeddedButton-option4-color-focused: var(--hop-status-option4-icon-hover);
1001
+ --hop-EmbeddedButton-option4-color-pressed: var(--hop-status-option4-icon-press);
1002
+ --hop-EmbeddedButton-option4-color-disabled: var(--hop-status-option4-icon-disabled);
1003
+ --hop-EmbeddedButton-option4-effect-background-color: transparent;
1004
+ --hop-EmbeddedButton-option4-effect-background-color-hovered: var(--hop-status-option4-surface-hover);
1005
+ --hop-EmbeddedButton-option4-effect-background-color-focused: var(--hop-status-option4-surface-hover);
1006
+ --hop-EmbeddedButton-option4-effect-background-color-pressed: var(--hop-status-option4-surface-press);
1007
+ --hop-EmbeddedButton-option4-effect-background-color-disabled: transparent;
1008
+ --hop-EmbeddedButton-option5-color: var(--hop-status-option5-icon);
1009
+ --hop-EmbeddedButton-option5-color-hovered: var(--hop-status-option5-icon-hover);
1010
+ --hop-EmbeddedButton-option5-color-focused: var(--hop-status-option5-icon-hover);
1011
+ --hop-EmbeddedButton-option5-color-pressed: var(--hop-status-option5-icon-press);
1012
+ --hop-EmbeddedButton-option5-color-disabled: var(--hop-status-option5-icon-disabled);
1013
+ --hop-EmbeddedButton-option5-effect-background-color: transparent;
1014
+ --hop-EmbeddedButton-option5-effect-background-color-hovered: var(--hop-status-option5-surface-hover);
1015
+ --hop-EmbeddedButton-option5-effect-background-color-focused: var(--hop-status-option5-surface-hover);
1016
+ --hop-EmbeddedButton-option5-effect-background-color-pressed: var(--hop-status-option5-surface-press);
1017
+ --hop-EmbeddedButton-option5-effect-background-color-disabled: transparent;
1018
+ --hop-EmbeddedButton-option6-color: var(--hop-status-option6-icon);
1019
+ --hop-EmbeddedButton-option6-color-hovered: var(--hop-status-option6-icon-hover);
1020
+ --hop-EmbeddedButton-option6-color-focused: var(--hop-status-option6-icon-hover);
1021
+ --hop-EmbeddedButton-option6-color-pressed: var(--hop-status-option6-icon-press);
1022
+ --hop-EmbeddedButton-option6-color-disabled: var(--hop-status-option6-icon-disabled);
1023
+ --hop-EmbeddedButton-option6-effect-background-color: transparent;
1024
+ --hop-EmbeddedButton-option6-effect-background-color-hovered: var(--hop-status-option6-surface-hover);
1025
+ --hop-EmbeddedButton-option6-effect-background-color-focused: var(--hop-status-option6-surface-hover);
1026
+ --hop-EmbeddedButton-option6-effect-background-color-pressed: var(--hop-status-option6-surface-press);
1027
+ --hop-EmbeddedButton-option6-effect-background-color-disabled: transparent;
1028
+ --hop-EmbeddedButton-selected-color: var(--hop-neutral-icon-weak-selected);
1029
+ --hop-EmbeddedButton-selected-effect-background-color: var(--hop-neutral-surface-weak-selected);
916
1030
  --spinner: var(--hop-primary-icon-strong);
917
1031
  --padding-inline: 0;
918
1032
  --padding-block: 0;
919
- --effect-background-color: var(--hop-EmbeddedButton-effect-background-color);
920
- --color: var(--hop-EmbeddedButton-color);
1033
+ --effect-background-color: var(--hop-EmbeddedButton-neutral-effect-background-color);
1034
+ --color: var(--hop-EmbeddedButton-neutral-color);
921
1035
  --transition: var(--hop-easing-duration-2) var(--hop-easing-productive);
922
1036
  --effect-border-radius: var(--hop-EmbeddedButton-effect-border-radius);
923
1037
  --focus-ring-size: 0.125rem;
@@ -942,7 +1056,7 @@
942
1056
  outline: none;
943
1057
  transition: color var(--transition);
944
1058
  }
945
- .EmbeddedButton-module__hop-EmbeddedButton___YX-wK::before {
1059
+ .EmbeddedButton-module__hop-EmbeddedButton___Ef3WW::before {
946
1060
  content: "";
947
1061
  position: absolute;
948
1062
  inset-block-start: 50%;
@@ -955,2177 +1069,500 @@
955
1069
  border-radius: var(--effect-border-radius);
956
1070
  transition: background-color var(--transition);
957
1071
  }
958
- .EmbeddedButton-module__hop-EmbeddedButton--md___4MiXk {
1072
+ .EmbeddedButton-module__hop-EmbeddedButton--md___2JVnP {
959
1073
  --inline-size: var(--hop-EmbeddedButton-md-width);
960
1074
  --block-size: var(--hop-EmbeddedButton-md-height);
961
1075
  --focus-ring-offset: calc(-1 * var(--focus-ring-size));
962
1076
  }
963
- .EmbeddedButton-module__hop-EmbeddedButton--lg___xPKbb {
1077
+ .EmbeddedButton-module__hop-EmbeddedButton--lg___msSgm {
964
1078
  --inline-size: var(--hop-EmbeddedButton-lg-width);
965
1079
  --block-size: var(--hop-EmbeddedButton-lg-height);
966
1080
  --focus-ring-offset: 0;
967
1081
  }
968
- .EmbeddedButton-module__hop-EmbeddedButton--md___4MiXk::before {
1082
+ .EmbeddedButton-module__hop-EmbeddedButton--md___2JVnP::before {
969
1083
  --effect-inline-size: var(--hop-EmbeddedButton-md-effect-width);
970
1084
  --effect-block-size: var(--hop-EmbeddedButton-md-effect-height);
971
1085
  }
972
- .EmbeddedButton-module__hop-EmbeddedButton--lg___xPKbb::before {
1086
+ .EmbeddedButton-module__hop-EmbeddedButton--lg___msSgm::before {
973
1087
  --effect-inline-size: var(--hop-EmbeddedButton-lg-effect-width);
974
1088
  --effect-block-size: var(--hop-EmbeddedButton-lg-effect-height);
975
1089
  }
976
- .EmbeddedButton-module__hop-EmbeddedButton___YX-wK[data-focus-visible] {
977
- outline: var(--focus-ring-size) solid var(--hop-EmbeddedButton-focus-ring-color);
978
- outline-offset: var(--focus-ring-offset);
979
- }
980
- .EmbeddedButton-module__hop-EmbeddedButton___YX-wK[data-disabled] {
981
- --effect-background-color: var(--hop-EmbeddedButton-effect-background-color-disabled);
982
- --color: var(--hop-EmbeddedButton-color-disabled);
983
- cursor: not-allowed;
984
- }
985
- .EmbeddedButton-module__hop-EmbeddedButton___YX-wK[data-hovered]:not([data-disabled], [data-pressed]),
986
- .EmbeddedButton-module__hop-EmbeddedButton___YX-wK[data-focus-visible]:not([data-disabled], [data-pressed]) {
987
- --effect-background-color: var(--hop-EmbeddedButton-effect-background-color-hover);
988
- --color: var(--hop-EmbeddedButton-color-hover);
989
- }
990
- .EmbeddedButton-module__hop-EmbeddedButton___YX-wK[data-pressed]:not([data-disabled]) {
991
- --effect-background-color: var(--hop-EmbeddedButton-effect-background-color-pressed);
992
- --color: var(--hop-EmbeddedButton-color-pressed);
993
- }
994
- .EmbeddedButton-module__hop-EmbeddedButton__icon___wEbGV {
995
- position: relative;
996
- }
997
-
998
- /* css-module:/home/runner/work/wl-hopper/wl-hopper/packages/components/src/checkbox/src/Checkbox.module.css/#css-module-data */
999
- .Checkbox-module__hop-Checkbox___uSRQR {
1000
- --hop-Checkbox-box-border-size: 0.0625rem;
1001
- --hop-Checkbox-box-border-color: var(--hop-neutral-border);
1002
- --hop-Checkbox-box-background-color: var(--hop-neutral-surface);
1003
- --hop-Checkbox-box-outline-size: 0.125rem;
1004
- --hop-Checkbox-box-outline-color: var(--hop-primary-border-focus);
1005
- --hop-Checkbox-check-color: var(--hop-neutral-icon-selected);
1006
- --hop-Checkbox-check-display: none;
1007
- --hop-Checkbox-text-color: var(--hop-neutral-text);
1008
- --hop-Checkbox-icon-color: var(--hop-neutral-icon);
1009
- --hop-Checkbox-box-border-color-hovered: var(--hop-neutral-border-hover);
1010
- --hop-Checkbox-box-background-color-hovered: var(--hop-neutral-surface-hover);
1011
- --hop-Checkbox-text-color-hovered: var(--hop-neutral-text-hover);
1012
- --hop-Checkbox-icon-color-hovered: var(--hop-neutral-icon-hover);
1013
- --hop-Checkbox-box-border-color-pressed: var(--hop-neutral-border-press);
1014
- --hop-Checkbox-box-background-color-pressed: var(--hop-neutral-surface-press);
1015
- --hop-Checkbox-text-color-pressed: var(--hop-neutral-text-press);
1016
- --hop-Checkbox-icon-color-pressed: var(--hop-neutral-icon-press);
1017
- --hop-Checkbox-box-border-color-selected: var(--hop-neutral-border-selected);
1018
- --hop-Checkbox-box-background-color-selected: var(--hop-neutral-surface-selected);
1019
- --hop-Checkbox-check-display-selected: block;
1020
- --hop-Checkbox-text-color-selected: var(--hop-neutral-text);
1021
- --hop-Checkbox-icon-color-selected: var(--hop-neutral-icon);
1022
- --hop-Checkbox-box-border-color-disabled: var(--hop-neutral-border-disabled);
1023
- --hop-Checkbox-box-background-color-disabled: var(--hop-neutral-surface-disabled);
1024
- --hop-Checkbox-check-color-disabled: var(--hop-neutral-icon-disabled);
1025
- --hop-Checkbox-text-color-disabled: var(--hop-neutral-text-disabled);
1026
- --hop-Checkbox-icon-color-disabled: var(--hop-neutral-icon-disabled);
1027
- --hop-Checkbox-box-border-color-focused: var(--hop-neutral-border-hover);
1028
- --hop-Checkbox-box-background-color-focused: var(--hop-neutral-surface-hover);
1029
- --hop-Checkbox-text-color-focused: var(--hop-neutral-text-hover);
1030
- --hop-Checkbox-icon-color-focused: var(--hop-neutral-icon-hover);
1031
- --hop-Checkbox-box-border-color-invalid: var(--hop-danger-border-strong);
1032
- --hop-Checkbox-box-background-color-invalid: var(--hop-neutral-surface);
1033
- --hop-Checkbox-box-border-color-hovered-invalid: var(--hop-danger-border-strong);
1034
- --hop-Checkbox-box-background-color-hovered-invalid: var(--hop-danger-surface-weak-hover);
1035
- --hop-Checkbox-box-border-color-pressed-invalid: var(--hop-danger-border-press);
1036
- --hop-Checkbox-box-background-color-pressed-invalid: var(--hop-danger-surface-weak-press);
1037
- --hop-Checkbox-box-border-color-focused-invalid: var(--hop-danger-border-press);
1038
- --hop-Checkbox-box-background-color-focused-invalid: var(--hop-danger-surface);
1039
- --hop-Checkbox-box-border-color-selected-invalid: var(--hop-danger-border-strong);
1040
- --hop-Checkbox-box-background-color-selected-invalid: var(--hop-danger-surface-strong);
1041
- --hop-Checkbox-check-color-invalid: var(--hop-danger-icon-strong);
1042
- --hop-Checkbox-text-color-invalid: var(--hop-danger-text-weak);
1043
- --hop-Checkbox-text-color-hovered-invalid: var(--hop-danger-text-weak-hover);
1044
- --hop-Checkbox-text-color-pressed-invalid: var(--hop-danger-text-weak-press);
1045
- --hop-Checkbox-icon-color-invalid: var(--hop-danger-icon-weak);
1046
- --hop-Checkbox-icon-color-hovered-invalid: var(--hop-danger-icon-weak-hover);
1047
- --hop-Checkbox-icon-color-pressed-invalid: var(--hop-danger-icon-weak-press);
1048
- --hop-Checkbox-box-sm-block-size: 1rem;
1049
- --hop-Checkbox-box-sm-inline-size: 1rem;
1050
- --hop-Checkbox-text-sm-top-offset: calc((var(--box-inline-size) - (var(--hop-body-sm-line-height) * var(--hop-body-sm-font-size))) / 2);
1051
- --hop-Checkbox-text-sm-margin-inline-start: calc(var(--hop-space-inline-sm) - var(--hop-space-inline-xs));
1052
- --hop-Checkbox-box-md-block-size: 1.5rem;
1053
- --hop-Checkbox-box-md-inline-size: 1.5rem;
1054
- --hop-Checkbox-text-md-top-offset: calc((var(--box-inline-size) - (var(--hop-body-md-line-height) * var(--hop-body-md-font-size))) / 2);
1055
- --hop-Checkbox-text-md-margin-inline-start: calc(var(--hop-space-inline-md) - var(--hop-space-inline-xs));
1056
- --box-background-color: var(--hop-Checkbox-box-background-color);
1057
- --box-border-color: var(--hop-Checkbox-box-border-color);
1058
- --box-border-radius: var(--hop-shape-rounded-sm);
1059
- --check-color: var(--hop-Checkbox-check-color);
1060
- --check-display: var(--hop-Checkbox-check-display);
1061
- --cursor: pointer;
1062
- --text-color: var(--hop-Checkbox-text-color);
1063
- --icon-color: var(--hop-Checkbox-icon-color);
1064
- --transition-duration: var(--hop-easing-duration-2);
1065
- cursor: var(--cursor);
1066
- display: flex;
1067
- column-gap: var(--hop-space-inline-xs);
1068
- align-items: flex-start;
1069
- justify-content: flex-start;
1070
- box-sizing: border-box;
1071
- inline-size: max-content;
1072
- max-inline-size: 100%;
1073
- }
1074
- .Checkbox-module__hop-Checkbox___uSRQR[data-focus-visible],
1075
- .Checkbox-module__hop-Checkbox--focused___l2Kcq {
1076
- --box-background-color: var(--hop-Checkbox-box-background-color-focused);
1077
- --box-border-color: var(--hop-Checkbox-box-border-color-focused);
1078
- --box-outline: var(--hop-Checkbox-box-outline-size) solid var(--hop-Checkbox-box-outline-color);
1079
- --text-color: var(--hop-Checkbox-text-color-focused);
1080
- --icon-color: var(--hop-Checkbox-icon-color-focused);
1081
- }
1082
- .Checkbox-module__hop-Checkbox___uSRQR[data-hovered],
1083
- .Checkbox-module__hop-Checkbox--hovered___KKr7X {
1084
- --box-background-color: var(--hop-Checkbox-box-background-color-hovered);
1085
- --box-border-color: var(--hop-Checkbox-box-border-color-hovered);
1086
- --text-color: var(--hop-Checkbox-text-color-hovered);
1087
- --icon-color: var(--hop-Checkbox-icon-color-hovered);
1088
- }
1089
- .Checkbox-module__hop-Checkbox___uSRQR[data-pressed],
1090
- .Checkbox-module__hop-Checkbox--pressed___vlnLv {
1091
- --box-background-color: var(--hop-Checkbox-box-background-color-pressed);
1092
- --box-border-color: var(--hop-Checkbox-box-border-color-pressed);
1093
- --text-color: var(--hop-Checkbox-text-color-pressed);
1094
- --icon-color: var(--hop-Checkbox-icon-color-pressed);
1095
- }
1096
- .Checkbox-module__hop-Checkbox___uSRQR[data-selected] {
1097
- --box-background-color: var(--hop-Checkbox-box-background-color-selected);
1098
- --box-border-color: var(--hop-Checkbox-box-border-color-selected);
1099
- --check-display: var(--hop-Checkbox-check-display-selected);
1100
- --text-color: var(--hop-Checkbox-text-color-selected);
1101
- --icon-color: var(--hop-Checkbox-icon-color-selected);
1102
- }
1103
- .Checkbox-module__hop-Checkbox___uSRQR[data-invalid] {
1104
- --box-background-color: var(--hop-Checkbox-box-background-color-invalid);
1105
- --box-border-color: var(--hop-Checkbox-box-border-color-invalid);
1106
- --check-color: var(--hop-Checkbox-check-color-invalid);
1107
- --text-color: var(--hop-Checkbox-text-color-invalid);
1108
- --icon-color: var(--hop-Checkbox-icon-color-invalid);
1109
- }
1110
- .Checkbox-module__hop-Checkbox___uSRQR[data-invalid]:where([data-focus-visible], .Checkbox-module__hop-Checkbox--focused___l2Kcq) {
1111
- --box-background-color: var(--hop-Checkbox-box-background-color-focused-invalid);
1112
- --box-border-color: var(--hop-Checkbox-box-border-color-focused-invalid);
1113
- }
1114
- .Checkbox-module__hop-Checkbox___uSRQR[data-invalid]:where([data-hovered], .Checkbox-module__hop-Checkbox--hovered___KKr7X) {
1115
- --box-background-color: var(--hop-Checkbox-box-background-color-hovered-invalid);
1116
- --box-border-color: var(--hop-Checkbox-box-border-color-hovered-invalid);
1117
- --text-color: var(--hop-Checkbox-text-color-hovered-invalid);
1118
- --icon-color: var(--hop-Checkbox-icon-color-hovered-invalid);
1119
- }
1120
- .Checkbox-module__hop-Checkbox___uSRQR[data-invalid]:where([data-pressed], .Checkbox-module__hop-Checkbox--pressed___vlnLv) {
1121
- --box-background-color: var(--hop-Checkbox-box-background-color-pressed-invalid);
1122
- --box-border-color: var(--hop-Checkbox-box-border-color-pressed-invalid);
1123
- --text-color: var(--hop-Checkbox-text-color-pressed-invalid);
1124
- --icon-color: var(--hop-Checkbox-icon-color-pressed-invalid);
1125
- }
1126
- .Checkbox-module__hop-Checkbox___uSRQR:where([data-invalid])[data-selected] {
1127
- --box-background-color: var(--hop-Checkbox-box-background-color-selected-invalid);
1128
- --box-border-color: var(--hop-Checkbox-box-border-color-selected-invalid);
1129
- }
1130
- .Checkbox-module__hop-Checkbox___uSRQR[data-disabled] {
1131
- --box-background-color: var(--hop-Checkbox-box-background-color-disabled);
1132
- --box-border-color: var(--hop-Checkbox-box-border-color-disabled);
1133
- --check-color: var(--hop-Checkbox-check-color-disabled);
1134
- --cursor: not-allowed;
1135
- --text-color: var(--hop-Checkbox-text-color-disabled);
1136
- --icon-color: var(--hop-Checkbox-icon-color-disabled);
1137
- }
1138
- .Checkbox-module__hop-Checkbox--sm___FNsCG {
1139
- --box-block-size: var(--hop-Checkbox-box-sm-block-size);
1140
- --box-inline-size: var(--hop-Checkbox-box-sm-inline-size);
1141
- --text-top-offset: var(--hop-Checkbox-text-sm-top-offset);
1142
- --text-margin-inline-start: var(--hop-Checkbox-text-sm-margin-inline-start);
1143
- }
1144
- .Checkbox-module__hop-Checkbox--md___NSNfJ {
1145
- --box-block-size: var(--hop-Checkbox-box-md-block-size);
1146
- --box-inline-size: var(--hop-Checkbox-box-md-inline-size);
1147
- --text-top-offset: var(--hop-Checkbox-text-md-top-offset);
1148
- --text-margin-inline-start: var(--hop-Checkbox-text-md-margin-inline-start);
1149
- }
1150
- .Checkbox-module__hop-Checkbox__icon___RWn1y,
1151
- .Checkbox-module__hop-Checkbox__icon-list___FaUCo {
1152
- flex: 0 0 auto;
1153
- order: 3;
1154
- color: var(--icon-color);
1155
- }
1156
- .Checkbox-module__hop-Checkbox__box___zmD2H {
1157
- display: flex;
1158
- flex: 0 0 auto;
1159
- align-items: center;
1160
- justify-content: center;
1161
- order: 1;
1162
- box-sizing: border-box;
1163
- inline-size: var(--box-inline-size, var(--hop-Checkbox-box-md-inline-size));
1164
- block-size: var(--box-block-size, var(--hop-Checkbox-box-md-block-size));
1165
- background-color: var(--box-background-color);
1166
- border: var(--hop-Checkbox-box-border-size) solid var(--box-border-color);
1167
- border-radius: var(--box-border-radius);
1168
- outline: var(--box-outline, none);
1169
- outline-offset: 0.125rem;
1170
- transition: background-color var(--transition-duration) var(--hop-easing-productive), border var(--transition-duration) var(--hop-easing-productive);
1171
- }
1172
- .Checkbox-module__hop-Checkbox__check___NpzB3 {
1173
- display: var(--check-display);
1174
- color: var(--check-color);
1175
- }
1176
- .Checkbox-module__hop-Checkbox__text___mh-4B {
1177
- flex: 0 1 auto;
1178
- order: 2;
1179
- min-inline-size: 0;
1180
- margin-block-start: var(--text-top-offset, var(--hop-Checkbox-text-md-top-offset));
1181
- margin-inline-start: var(--text-margin-inline-start, var(--hop-Checkbox-text-md-margin-inline-start));
1182
- color: var(--text-color);
1183
- }
1184
-
1185
- /* css-module:/home/runner/work/wl-hopper/wl-hopper/packages/components/src/checkbox/src/CheckboxField.module.css/#css-module-data */
1186
- .CheckboxField-module__hop-CheckboxField___p-fIU {
1187
- --hop-CheckboxField-description-color: var(--hop-neutral-text-weak);
1188
- --hop-CheckboxField-description-color-disabled: var(--hop-neutral-text-disabled);
1189
- --hop-CheckboxField-sm-row-gap: var(--hop-space-stack-xs);
1190
- --hop-CheckboxField-checkbox-sm-inline-size: 1rem;
1191
- --hop-CheckboxField-description-sm-margin-inline-start: calc(var(--hop-CheckboxField-checkbox-sm-inline-size) + var(--hop-space-inline-sm));
1192
- --hop-CheckboxField-md-row-gap: var(--hop-space-stack-xs);
1193
- --hop-CheckboxField-checkbox-md-inline-size: 1.5rem;
1194
- --hop-CheckboxField-description-md-margin-inline-start: calc(var(--hop-CheckboxField-checkbox-md-inline-size) + var(--hop-space-inline-md));
1195
- --description-color: var(--hop-CheckboxField-description-color);
1196
- display: flex;
1197
- flex-direction: column;
1198
- row-gap: var(--row-gap, var(--hop-space-stack-sm));
1199
- align-items: flex-start;
1200
- justify-content: flex-start;
1201
- box-sizing: border-box;
1202
- inline-size: max-content;
1203
- max-inline-size: 100%;
1204
- }
1205
- .CheckboxField-module__hop-CheckboxField___p-fIU[data-disabled] {
1206
- --description-color: var(--hop-CheckboxField-description-color-disabled);
1207
- }
1208
- .CheckboxField-module__hop-CheckboxField--sm___QAiMa {
1209
- --row-gap: var(--hop-CheckboxField-sm-row-gap);
1210
- --description-margin-inline-start: var(--hop-CheckboxField-description-sm-margin-inline-start);
1211
- }
1212
- .CheckboxField-module__hop-CheckboxField--md___4hscu {
1213
- --row-gap: var(--hop-CheckboxField-md-row-gap);
1214
- --description-margin-inline-start: var(--hop-CheckboxField-description-md-margin-inline-start);
1215
- }
1216
- .CheckboxField-module__hop-CheckboxField__description___IYs3I {
1217
- order: 2;
1218
- margin-inline-start: var(--description-margin-inline-start, var(--hop-CheckboxField-description-md-margin-inline-start));
1219
- color: var(--description-color);
1220
- }
1221
- .CheckboxField-module__hop-CheckboxField__checkbox___YXNop {
1222
- order: 1;
1223
- }
1224
-
1225
- /* css-module:/home/runner/work/wl-hopper/wl-hopper/packages/components/src/ErrorMessage/src/ErrorMessage.module.css/#css-module-data */
1226
- .ErrorMessage-module__hop-ErrorMessage___dDEnR {
1227
- --hop-ErrorMessage-color: var(--hop-danger-text-weak);
1228
- --hop-ErrorMessage-font-family: var(--hop-body-xs-font-family);
1229
- --hop-ErrorMessage-font-size: var(--hop-body-xs-font-size);
1230
- --hop-ErrorMessage-font-weight: var(--hop-body-xs-font-weight);
1231
- --hop-ErrorMessage-line-height: var(--hop-body-xs-line-height);
1232
- --hop-ErrorMessage-column-gap: var(--hop-space-inline-xs);
1233
- display: flex;
1234
- column-gap: var(--hop-ErrorMessage-column-gap);
1235
- align-items: center;
1236
- box-sizing: border-box;
1237
- font-family: var(--hop-ErrorMessage-font-family);
1238
- font-size: var(--hop-ErrorMessage-font-size);
1239
- font-weight: var(--hop-ErrorMessage-font-weight);
1240
- line-height: var(--hop-ErrorMessage-line-height);
1241
- color: var(--hop-ErrorMessage-color);
1242
- }
1243
- .ErrorMessage-module__hop-ErrorMessage__icon___pGy0- {
1244
- flex: 0 0 auto;
1245
- align-self: flex-start;
1246
- }
1247
-
1248
- /* css-module:/home/runner/work/wl-hopper/wl-hopper/packages/components/src/HelperMessage/src/HelperMessage.module.css/#css-module-data */
1249
- .HelperMessage-module__hop-HelperMessage___U0gBi {
1250
- --hop-HelperMessage-color: var(--hop-neutral-text-weak);
1251
- --hop-HelperMessage-column-gap: var(--hop-space-inline-xs);
1252
- display: flex;
1253
- column-gap: var(--hop-HelperMessage-column-gap);
1254
- align-items: center;
1255
- box-sizing: border-box;
1256
- color: var(--hop-HelperMessage-color);
1257
- }
1258
- .HelperMessage-module__hop-HelperMessage__icon___z35Yf {
1259
- flex: 0 0 auto;
1260
- align-self: flex-start;
1261
- }
1262
-
1263
- /* css-module:/home/runner/work/wl-hopper/wl-hopper/packages/components/src/typography/Label/src/Label.module.css/#css-module-data */
1264
- .Label-module__hop-Label___5okv4 {
1265
- --hop-Label-font-size: var(--hop-heading-xs-font-size);
1266
- --hop-Label-font-family: var(--hop-heading-xs-font-family);
1267
- --hop-Label-font-weight: var(--hop-heading-xs-font-weight);
1268
- --hop-Label-line-height: var(--hop-heading-xs-line-height);
1269
- --hop-Label-color: var(--hop-neutral-text-weak);
1270
- }
1271
- :where(.Label-module__hop-Label___5okv4) {
1272
- font-family: var(--hop-Label-font-family);
1273
- font-size: var(--hop-Label-font-size);
1274
- font-weight: var(--hop-Label-font-weight);
1275
- line-height: var(--hop-Label-line-height);
1276
- color: var(--hop-Label-color);
1277
- }
1278
-
1279
- /* css-module:/home/runner/work/wl-hopper/wl-hopper/packages/components/src/checkbox/src/CheckboxGroup.module.css/#css-module-data */
1280
- .CheckboxGroup-module__hop-CheckboxGroup___-Gmwt {
1281
- --hop-CheckboxGroup-align-items: flex-start;
1282
- --hop-CheckboxGroup-justify-content: flex-start;
1283
- --hop-CheckboxGroup-bordered-border-color: var(--hop-neutral-border-weak);
1284
- --hop-CheckboxGroup-sm-column-gap: var(--hop-space-inline-sm);
1285
- --hop-CheckboxGroup-sm-row-gap: var(--hop-space-stack-sm);
1286
- --hop-CheckboxGroup-list-sm-column-gap: var(--hop-space-inline-sm);
1287
- --hop-CheckboxGroup-list-sm-row-gap: var(--hop-space-stack-sm);
1288
- --hop-CheckboxGroup-bordered-sm-padding: var(--hop-space-inset-sm);
1289
- --hop-CheckboxGroup-bordered-sm-column-gap: var(--hop-space-inline-sm);
1290
- --hop-CheckboxGroup-bordered-sm-row-gap: var(--hop-space-stack-sm);
1291
- --hop-CheckboxGroup-list-bordered-sm-column-gap: 0;
1292
- --hop-CheckboxGroup-list-bordered-sm-row-gap: 0;
1293
- --hop-CheckboxGroup-md-column-gap: var(--hop-space-inline-md);
1294
- --hop-CheckboxGroup-md-row-gap: var(--hop-space-stack-md);
1295
- --hop-CheckboxGroup-list-md-column-gap: var(--hop-space-inline-md);
1296
- --hop-CheckboxGroup-list-md-row-gap: var(--hop-space-stack-md);
1297
- --hop-CheckboxGroup-bordered-md-padding: var(--hop-space-inset-md);
1298
- --hop-CheckboxGroup-bordered-md-column-gap: var(--hop-space-inline-sm);
1299
- --hop-CheckboxGroup-bordered-md-row-gap: var(--hop-space-stack-sm);
1300
- --hop-CheckboxGroup-list-bordered-md-column-gap: 0;
1301
- --hop-CheckboxGroup-list-bordered-md-row-gap: 0;
1302
- --hop-CheckboxGroup-vertical-flex-direction: column;
1303
- --hop-CheckboxGroup-horizontal-flex-direction: row;
1304
- --checkbox-border-size: 0.0625rem;
1305
- --checkbox-border-color: var(--hop-neutral-border-weak);
1306
- --flex-direction: var(--hop-CheckboxGroup-vertical-flex-direction);
1307
- --align-items: var(--hop-CheckboxGroup-align-items);
1308
- --justify-content: var(--hop-CheckboxGroup-justify-content);
1309
- --flex-wrap: wrap;
1310
- display: flex;
1311
- flex-direction: column;
1312
- gap: var(--row-gap, var(--hop-space-stack-md)) var(--column-gap, var(--hop-space-inline-md));
1313
- align-items: var(--align-items);
1314
- justify-content: var(--justify-content);
1315
- box-sizing: border-box;
1316
- inline-size: max-content;
1317
- max-inline-size: 100%;
1318
- }
1319
- .CheckboxGroup-module__hop-CheckboxGroup--bordered___Av4tA {
1320
- --list-border: var(--checkbox-border-size) solid var(--checkbox-border-color);
1321
- --list-border-radius: var(--hop-shape-rounded-md);
1322
- }
1323
- .CheckboxGroup-module__hop-CheckboxGroup--sm___a-rGV {
1324
- --column-gap: var(--hop-CheckboxGroup-sm-column-gap);
1325
- --row-gap: var(--hop-CheckboxGroup-sm-row-gap);
1326
- --list-column-gap: var(--hop-CheckboxGroup-list-sm-column-gap);
1327
- --list-row-gap: var(--hop-CheckboxGroup-list-sm-row-gap);
1328
- }
1329
- .CheckboxGroup-module__hop-CheckboxGroup--md___gesFW {
1330
- --column-gap: var(--hop-CheckboxGroup-md-column-gap);
1331
- --row-gap: var(--hop-CheckboxGroup-md-row-gap);
1332
- --list-column-gap: var(--hop-CheckboxGroup-list-md-column-gap);
1333
- --list-row-gap: var(--hop-CheckboxGroup-list-md-row-gap);
1334
- }
1335
- .CheckboxGroup-module__hop-CheckboxGroup--bordered___Av4tA.CheckboxGroup-module__hop-CheckboxGroup--sm___a-rGV {
1336
- --checkbox-padding: var(--hop-CheckboxGroup-bordered-sm-padding);
1337
- --column-gap: var(--hop-CheckboxGroup-bordered-sm-column-gap);
1338
- --row-gap: var(--hop-CheckboxGroup-bordered-sm-row-gap);
1339
- --list-column-gap: var(--hop-CheckboxGroup-list-bordered-sm-column-gap);
1340
- --list-row-gap: var(--hop-CheckboxGroup-list-bordered-sm-row-gap);
1341
- }
1342
- .CheckboxGroup-module__hop-CheckboxGroup--bordered___Av4tA.CheckboxGroup-module__hop-CheckboxGroup--md___gesFW {
1343
- --checkbox-padding: var(--hop-CheckboxGroup-bordered-md-padding);
1344
- --column-gap: var(--hop-CheckboxGroup-bordered-md-column-gap);
1345
- --row-gap: var(--hop-CheckboxGroup-bordered-md-row-gap);
1346
- --list-column-gap: var(--hop-CheckboxGroup-list-bordered-md-column-gap);
1347
- --list-row-gap: var(--hop-CheckboxGroup-list-bordered-md-row-gap);
1348
- }
1349
- .CheckboxGroup-module__hop-CheckboxGroup___-Gmwt[data-orientation=horizontal] {
1350
- --flex-direction: var(--hop-CheckboxGroup-horizontal-flex-direction);
1351
- }
1352
- .CheckboxGroup-module__hop-CheckboxGroup--bordered___Av4tA[data-orientation=horizontal] {
1353
- --flex-wrap: nowrap;
1354
- }
1355
- .CheckboxGroup-module__hop-CheckboxGroup___-Gmwt > .CheckboxGroup-module__hop-CheckboxGroup__label___CekdI {
1356
- order: 1;
1357
- }
1358
- .CheckboxGroup-module__hop-CheckboxGroup__list___Zjl4m {
1359
- display: flex;
1360
- flex-flow: var(--flex-direction) var(--flex-wrap);
1361
- gap: var(--list-row-gap, var(--hop-space-stack-md)) var(--list-column-gap, var(--hop-space-inline-md));
1362
- order: 2;
1363
- box-sizing: border-box;
1364
- inline-size: max-content;
1365
- max-inline-size: 100%;
1366
- border: var(--list-border, none);
1367
- border-radius: var(--list-border-radius, 0);
1368
- }
1369
- .CheckboxGroup-module__hop-CheckboxGroup__list___Zjl4m > .CheckboxGroup-module__hop-CheckboxGroup__checkbox___7GpOF {
1370
- position: relative;
1371
- flex: 0 1 auto;
1372
- align-content: start;
1373
- inline-size: auto;
1374
- min-inline-size: 0;
1375
- padding: var(--checkbox-padding, 0);
1376
- }
1377
- .CheckboxGroup-module__hop-CheckboxGroup--bordered___Av4tA .CheckboxGroup-module__hop-CheckboxGroup__list___Zjl4m > .CheckboxGroup-module__hop-CheckboxGroup__checkbox___7GpOF ~ .CheckboxGroup-module__hop-CheckboxGroup__checkbox___7GpOF::before {
1378
- content: "";
1379
- position: absolute;
1380
- display: block;
1381
- }
1382
- .CheckboxGroup-module__hop-CheckboxGroup--bordered___Av4tA[data-orientation=vertical] .CheckboxGroup-module__hop-CheckboxGroup__list___Zjl4m > .CheckboxGroup-module__hop-CheckboxGroup__checkbox___7GpOF ~ .CheckboxGroup-module__hop-CheckboxGroup__checkbox___7GpOF::before {
1383
- inset-block-start: 0;
1384
- inset-inline: 0;
1385
- border-block-start: var(--list-border, none);
1386
- }
1387
- .CheckboxGroup-module__hop-CheckboxGroup--bordered___Av4tA[data-orientation=horizontal] .CheckboxGroup-module__hop-CheckboxGroup__list___Zjl4m > .CheckboxGroup-module__hop-CheckboxGroup__checkbox___7GpOF ~ .CheckboxGroup-module__hop-CheckboxGroup__checkbox___7GpOF::before {
1388
- inset-block: 0;
1389
- inset-inline-start: 0;
1390
- border-inline-start: var(--list-border, none);
1391
- }
1392
- .CheckboxGroup-module__hop-CheckboxGroup___-Gmwt > .CheckboxGroup-module__hop-CheckboxGroup__error-message___NU59S,
1393
- .CheckboxGroup-module__hop-CheckboxGroup___-Gmwt > .CheckboxGroup-module__hop-CheckboxGroup__helper-message___FNKdd {
1394
- order: 3;
1395
- }
1396
-
1397
- /* css-module:/home/runner/work/wl-hopper/wl-hopper/packages/components/src/Chip/src/Chip.module.css/#css-module-data */
1398
- .Chip-module__hop-Chip___HJaWb {
1399
- --hop-Chip-border-size: 0.0625rem;
1400
- --hop-Chip-border-radius: var(--hop-shape-pill);
1401
- --hop-Chip-column-gap: var(--hop-space-inline-xs);
1402
- --hop-Chip-xs-block-size: 1rem;
1403
- --hop-Chip-xs-padding-inline: var(--hop-space-inset-sm);
1404
- --hop-Chip-sm-block-size: 1.25rem;
1405
- --hop-Chip-sm-padding-inline: var(--hop-space-inset-sm);
1406
- --hop-Chip-md-block-size: 1.5rem;
1407
- --hop-Chip-md-padding-inline: var(--hop-space-inset-sm);
1408
- --hop-Chip-lg-block-size: 2rem;
1409
- --hop-Chip-lg-padding-inline: var(--hop-space-inset-md);
1410
- --hop-Chip-neutral-border-color: var(--hop-neutral-border-weak);
1411
- --hop-Chip-neutral-background-color: var(--hop-neutral-surface);
1412
- --hop-Chip-neutral-text-color: var(--hop-neutral-text);
1413
- --hop-Chip-progress-border-color: transparent;
1414
- --hop-Chip-progress-background-color: var(--hop-status-progress-surface);
1415
- --hop-Chip-progress-text-color: var(--hop-status-progress-text);
1416
- --hop-Chip-positive-border-color: transparent;
1417
- --hop-Chip-positive-background-color: var(--hop-status-positive-surface);
1418
- --hop-Chip-positive-text-color: var(--hop-status-positive-text);
1419
- --hop-Chip-caution-border-color: transparent;
1420
- --hop-Chip-caution-background-color: var(--hop-status-caution-surface);
1421
- --hop-Chip-caution-text-color: var(--hop-status-caution-text);
1422
- --hop-Chip-negative-border-color: transparent;
1423
- --hop-Chip-negative-background-color: var(--hop-status-negative-surface);
1424
- --hop-Chip-negative-text-color: var(--hop-status-negative-text);
1425
- --hop-Chip-option1-border-color: transparent;
1426
- --hop-Chip-option1-background-color: var(--hop-status-option1-surface);
1427
- --hop-Chip-option1-text-color: var(--hop-status-option1-text);
1428
- --hop-Chip-option2-border-color: transparent;
1429
- --hop-Chip-option2-background-color: var(--hop-status-option2-surface);
1430
- --hop-Chip-option2-text-color: var(--hop-status-option2-text);
1431
- --hop-Chip-option3-border-color: transparent;
1432
- --hop-Chip-option3-background-color: var(--hop-status-option3-surface);
1433
- --hop-Chip-option3-text-color: var(--hop-status-option3-text);
1434
- --hop-Chip-option4-border-color: transparent;
1435
- --hop-Chip-option4-background-color: var(--hop-status-option4-surface);
1436
- --hop-Chip-option4-text-color: var(--hop-status-option4-text);
1437
- --hop-Chip-option5-border-color: transparent;
1438
- --hop-Chip-option5-background-color: var(--hop-status-option5-surface);
1439
- --hop-Chip-option5-text-color: var(--hop-status-option5-text);
1440
- --hop-Chip-option6-border-color: transparent;
1441
- --hop-Chip-option6-background-color: var(--hop-status-option6-surface);
1442
- --hop-Chip-option6-text-color: var(--hop-status-option6-text);
1443
- --hop-Chip-inactive-border-color: transparent;
1444
- --hop-Chip-inactive-background-color: var(--hop-status-inactive-surface);
1445
- --hop-Chip-inactive-text-color: var(--hop-status-inactive-text);
1446
- --hop-Chip-disabled-border-color: var(--hop-neutral-border-weak);
1447
- --hop-Chip-disabled-background-color: var(--hop-neutral-surface-disabled);
1448
- --hop-Chip-disabled-text-color: var(--hop-neutral-text-disabled);
1449
- --border-radius: var(--hop-Chip-border-radius);
1450
- --border-size: var(--hop-Chip-border-size);
1451
- --column-gap: var(--hop-Chip-column-gap);
1452
- overflow: hidden;
1453
- display: inline-flex;
1454
- column-gap: var(--column-gap);
1455
- align-items: center;
1456
- justify-content: center;
1457
- box-sizing: border-box;
1458
- inline-size: max-content;
1459
- max-inline-size: 100%;
1460
- block-size: var(--block-size);
1461
- padding-inline: var(--padding-inline);
1462
- color: var(--text-color);
1463
- white-space: nowrap;
1464
- background-color: var(--background-color);
1465
- border: var(--border-size) solid var(--border-color);
1466
- border-radius: var(--border-radius);
1467
- }
1468
- .Chip-module__hop-Chip--xs___vDJkg {
1469
- --block-size: var(--hop-Chip-xs-block-size);
1470
- --padding-inline: var(--hop-Chip-xs-padding-inline);
1471
- }
1472
- .Chip-module__hop-Chip--sm___Y0X6y {
1473
- --block-size: var(--hop-Chip-sm-block-size);
1474
- --padding-inline: var(--hop-Chip-sm-padding-inline);
1475
- }
1476
- .Chip-module__hop-Chip--md___9c4ot {
1477
- --block-size: var(--hop-Chip-md-block-size);
1478
- --padding-inline: var(--hop-Chip-md-padding-inline);
1479
- }
1480
- .Chip-module__hop-Chip--lg___jcVXN {
1481
- --block-size: var(--hop-Chip-lg-block-size);
1482
- --padding-inline: var(--hop-Chip-lg-padding-inline);
1483
- }
1484
- .Chip-module__hop-Chip--neutral___lts0u {
1485
- --border-color: var(--hop-Chip-neutral-border-color);
1486
- --background-color: var(--hop-Chip-neutral-background-color);
1487
- --text-color: var(--hop-Chip-neutral-text-color);
1488
- }
1489
- .Chip-module__hop-Chip--progress___yTDza {
1490
- --border-color: var(--hop-Chip-progress-border-color);
1491
- --background-color: var(--hop-Chip-progress-background-color);
1492
- --text-color: var(--hop-Chip-progress-text-color);
1493
- }
1494
- .Chip-module__hop-Chip--positive___djDT1 {
1495
- --border-color: var(--hop-Chip-positive-border-color);
1496
- --background-color: var(--hop-Chip-positive-background-color);
1497
- --text-color: var(--hop-Chip-positive-text-color);
1498
- }
1499
- .Chip-module__hop-Chip--caution___eDhbs {
1500
- --border-color: var(--hop-Chip-caution-border-color);
1501
- --background-color: var(--hop-Chip-caution-background-color);
1502
- --text-color: var(--hop-Chip-caution-text-color);
1503
- }
1504
- .Chip-module__hop-Chip--negative___HIDOw {
1505
- --border-color: var(--hop-Chip-negative-border-color);
1506
- --background-color: var(--hop-Chip-negative-background-color);
1507
- --text-color: var(--hop-Chip-negative-text-color);
1508
- }
1509
- .Chip-module__hop-Chip--option1___Ma4Tf {
1510
- --border-color: var(--hop-Chip-option1-border-color);
1511
- --background-color: var(--hop-Chip-option1-background-color);
1512
- --text-color: var(--hop-Chip-option1-text-color);
1513
- }
1514
- .Chip-module__hop-Chip--option2___Fo9R4 {
1515
- --border-color: var(--hop-Chip-option2-border-color);
1516
- --background-color: var(--hop-Chip-option2-background-color);
1517
- --text-color: var(--hop-Chip-option2-text-color);
1518
- }
1519
- .Chip-module__hop-Chip--option3___-c7Pd {
1520
- --border-color: var(--hop-Chip-option3-border-color);
1521
- --background-color: var(--hop-Chip-option3-background-color);
1522
- --text-color: var(--hop-Chip-option3-text-color);
1523
- }
1524
- .Chip-module__hop-Chip--option4___oIso5 {
1525
- --border-color: var(--hop-Chip-option4-border-color);
1526
- --background-color: var(--hop-Chip-option4-background-color);
1527
- --text-color: var(--hop-Chip-option4-text-color);
1528
- }
1529
- .Chip-module__hop-Chip--option5___hnJ7c {
1530
- --border-color: var(--hop-Chip-option5-border-color);
1531
- --background-color: var(--hop-Chip-option5-background-color);
1532
- --text-color: var(--hop-Chip-option5-text-color);
1533
- }
1534
- .Chip-module__hop-Chip--option6___6CcZr {
1535
- --border-color: var(--hop-Chip-option6-border-color);
1536
- --background-color: var(--hop-Chip-option6-background-color);
1537
- --text-color: var(--hop-Chip-option6-text-color);
1538
- }
1539
- .Chip-module__hop-Chip--inactive___Rt57r {
1540
- --border-color: var(--hop-Chip-inactive-border-color);
1541
- --background-color: var(--hop-Chip-inactive-background-color);
1542
- --text-color: var(--hop-Chip-inactive-text-color);
1543
- }
1544
- .Chip-module__hop-Chip--disabled___T2I5e {
1545
- --border-color: var(--hop-Chip-disabled-border-color);
1546
- --background-color: var(--hop-Chip-disabled-background-color);
1547
- --text-color: var(--hop-Chip-disabled-text-color);
1548
- }
1549
- .Chip-module__hop-Chip__icon___qZOEC,
1550
- .Chip-module__hop-Chip__icon-list___L2RkJ {
1551
- flex: 0 0 auto;
1552
- flex-wrap: nowrap;
1553
- order: 1;
1554
- }
1555
- .Chip-module__hop-Chip__text___vvk79 {
1556
- overflow: hidden;
1557
- flex: 1 1 auto;
1558
- order: 2;
1559
- min-inline-size: 0;
1560
- text-align: center;
1561
- text-overflow: ellipsis;
1562
- }
1563
- .Chip-module__hop-Chip__end-icon___LObTV,
1564
- .Chip-module__hop-Chip__end-icon-list___52z52 {
1565
- flex: 0 0 auto;
1566
- flex-wrap: nowrap;
1567
- order: 3;
1568
- }
1569
-
1570
- /* css-module:/home/runner/work/wl-hopper/wl-hopper/packages/components/src/Divider/src/Divider.module.css/#css-module-data */
1571
- :where(.Divider-module__hop-Divider___Sa2-p) {
1572
- --hop-Divider-border-color: var(--hop-neutral-border-weak);
1573
- --hop-Divider-border-size: 0.0625rem;
1574
- --hop-Divider-horizontal-border-block-end: var(--hop-Divider-border-size) solid var(--hop-Divider-border-color);
1575
- --hop-Divider-horizontal-border-inline-start: none;
1576
- --hop-Divider-horizontal-inline-size: auto;
1577
- --hop-Divider-horizontal-block-size: 0;
1578
- --hop-Divider-vertical-border-inline-start: var(--hop-Divider-border-size) solid var(--hop-Divider-border-color);
1579
- --hop-Divider-vertical-border-block-end: none;
1580
- --hop-Divider-vertical-inline-size: 0;
1581
- --hop-Divider-vertical-block-size: auto;
1582
- --border-block-end: var(--hop-Divider-horizontal-border-block-end);
1583
- --border-inline-start: var(--hop-Divider-horizontal-border-inline-start);
1584
- --inline-size: var(--hop-Divider-horizontal-inline-size);
1585
- --block-size: var(--hop-Divider-horizontal-block-size);
1586
- display: block;
1587
- flex: 0 0 auto;
1588
- box-sizing: border-box;
1589
- inline-size: var(--inline-size);
1590
- block-size: var(--block-size);
1591
- margin: 0;
1592
- border: none;
1593
- border-block-end: var(--border-block-end);
1594
- border-inline-start: var(--border-inline-start);
1595
- }
1596
- .Divider-module__hop-Divider--vertical___xNCN7 {
1597
- --border-block-end: var(--hop-Divider-vertical-border-block-end);
1598
- --border-inline-start: var(--hop-Divider-vertical-border-inline-start);
1599
- --inline-size: var(--hop-Divider-vertical-inline-size);
1600
- --block-size: var(--hop-Divider-vertical-block-size);
1601
- }
1602
-
1603
- /* css-module:/home/runner/work/wl-hopper/wl-hopper/packages/components/src/inputs/src/InputGroup.module.css/#css-module-data */
1604
- .InputGroup-module__hop-InputGroup___MpyEZ {
1605
- --hop-InputGroup-background: var(--hop-neutral-surface);
1606
- --hop-InputGroup-border-color: var(--hop-neutral-border);
1607
- --hop-InputGroup-border-width: 0.0625rem;
1608
- --hop-InputGroup-display: inline-flex;
1609
- --hop-InputGroup-display-number: grid;
1610
- --hop-InputGroup-gap: var(--hop-space-inline-sm);
1611
- --hop-InputGroup-gap-textarea: 0;
1612
- --hop-InputGroup-gap-number: 0;
1613
- --hop-InputGroup-flex-direction: row;
1614
- --hop-InputGroup-flex-direction-textarea: column;
1615
- --hop-InputGroup-align-items: center;
1616
- --hop-InputGroup-align-items-textarea: flex-end;
1617
- --hop-InputGroup-inline-size: fit-content;
1618
- --hop-InputGroup-inline-size-number: 100%;
1619
- --hop-InputGroup-sm-block-size: 2rem;
1620
- --hop-InputGroup-md-block-size: 2.5rem;
1621
- --hop-InputGroup-block-size-textarea: auto;
1622
- --hop-InputGroup-border-radius: var(--hop-shape-rounded-md);
1623
- --hop-InputGroup-padding-inline: var(--hop-space-inset-md);
1624
- --hop-InputGroup-padding-block: 0;
1625
- --hop-InputGroup-padding-inline-textarea: var(--hop-space-inset-xs);
1626
- --hop-InputGroup-padding-block-textarea: var(--hop-space-inset-xs);
1627
- --hop-InputGroup-border-color-hover: var(--hop-neutral-border-hover);
1628
- --hop-InputGroup-border-color-focus: var(--hop-primary-border-focus);
1629
- --hop-InputGroup-background-hover: var(--hop-neutral-surface-hover);
1630
- --hop-InputGroup-border-color-invalid: var(--hop-danger-border-strong);
1631
- --hop-InputGroup-input-color: var(--hop-neutral-text);
1632
- --hop-InputGroup-input-color-disabled: var(--hop-neutral-text-disabled);
1633
- --hop-InputGroup-input-sm-font-family: var(--hop-body-sm-font-family);
1634
- --hop-InputGroup-input-sm-font-size: var(--hop-body-sm-font-size);
1635
- --hop-InputGroup-input-sm-font-weight: var(--hop-body-sm-font-weight);
1636
- --hop-InputGroup-input-sm-line-height: var(--hop-body-sm-line-height);
1637
- --hop-InputGroup-input-sm-block-size: 1.5rem;
1638
- --hop-InputGroup-input-md-font-family: var(--hop-body-md-font-family);
1639
- --hop-InputGroup-input-md-font-size: var(--hop-body-md-font-size);
1640
- --hop-InputGroup-input-md-font-weight: var(--hop-body-md-font-weight);
1641
- --hop-InputGroup-input-md-line-height: var(--hop-body-md-line-height);
1642
- --hop-InputGroup-input-md-block-size: 2rem;
1643
- --hop-InputGroup-input-padding: 0;
1644
- --hop-InputGroup-textarea-padding: var(--hop-space-inset-xs) calc(var(--hop-space-inset-md) - var(--hop-space-inset-xs));
1645
- --hop-InputGroup-background-disabled: var(--hop-neutral-surface-disabled);
1646
- --hop-InputGroup-border-color-disabled: var(--hop-neutral-border-disabled);
1647
- --hop-InputGroup-placeholder-font-family: inherit;
1648
- --hop-InputGroup-placeholder-font-size: inherit;
1649
- --hop-InputGroup-placeholder-font-weight: inherit;
1650
- --hop-InputGroup-placeholder-line-height: inherit;
1651
- --hop-InputGroup-placeholder-color: var(--hop-neutral-text-weakest);
1652
- --hop-InputGroup-placeholder-color-disabled: var(--hop-neutral-text-disabled);
1653
- --inline-size: var(--hop-InputGroup-inline-size);
1654
- --border: var(--hop-InputGroup-border-width) solid var(--hop-InputGroup-border-color);
1655
- --background: var(--hop-InputGroup-background);
1656
- --block-size: var(--hop-InputGroup-md-block-size);
1657
- --display: var(--hop-InputGroup-display);
1658
- --gap: var(--hop-InputGroup-gap);
1659
- --flex-direction: var(--hop-InputGroup-flex-direction);
1660
- --align-items: var(--hop-InputGroup-align-items);
1661
- --padding-inline: var(--hop-InputGroup-padding-inline);
1662
- --padding-block: var(--hop-InputGroup-padding-block);
1663
- --input-font-family: var(--hop-InputGroup-input-md-font-family);
1664
- --input-font-size: var(--hop-InputGroup-input-md-font-size);
1665
- --input-font-weight: var(--hop-InputGroup-input-md-font-weight);
1666
- --input-line-height: var(--hop-InputGroup-input-md-line-height);
1667
- --input-block-size: var(--hop-InputGroup-input-md-block-size);
1668
- --input-inline-size: initial;
1669
- --input-color: var(--hop-InputGroup-input-color);
1670
- --input-placeholder-color: var(--hop-InputGroup-placeholder-color);
1671
- position: relative;
1672
- display: var(--display);
1673
- flex-direction: var(--flex-direction);
1674
- gap: var(--gap);
1675
- align-items: var(--align-items);
1676
- box-sizing: border-box;
1677
- inline-size: var(--inline-size);
1678
- block-size: var(--block-size);
1679
- padding-block: var(--padding-block);
1680
- padding-inline: var(--padding-inline);
1681
- background: var(--background);
1682
- border: var(--border);
1683
- border-radius: var(--hop-InputGroup-border-radius);
1684
- }
1685
- .InputGroup-module__hop-InputGroup--fluid___nXqi6 {
1686
- --inline-size: 100%;
1687
- --input-inline-size: 100%;
1688
- }
1689
- .InputGroup-module__hop-InputGroup--sm___tvLAO {
1690
- --block-size: var(--hop-InputGroup-sm-block-size);
1691
- --input-font-family: var(--hop-InputGroup-input-sm-font-family);
1692
- --input-font-size: var(--hop-InputGroup-input-sm-font-size);
1693
- --input-font-weight: var(--hop-InputGroup-input-sm-font-weight);
1694
- --input-line-height: var(--hop-InputGroup-input-sm-line-height);
1695
- --input-block-size: var(--hop-InputGroup-input-sm-block-size);
1696
- }
1697
- .InputGroup-module__hop-InputGroup___MpyEZ[data-input-type=textarea] {
1698
- --gap: var(--hop-InputGroup-gap-textarea);
1699
- --flex-direction: var(--hop-InputGroup-flex-direction-textarea);
1700
- --align-items: var(--hop-InputGroup-align-items-textarea);
1701
- --block-size: var(--hop-InputGroup-block-size-textarea);
1702
- --padding-inline: var(--hop-InputGroup-padding-inline-textarea);
1703
- --padding-block: var(--hop-InputGroup-padding-block-textarea);
1704
- }
1705
- .InputGroup-module__hop-InputGroup___MpyEZ[data-input-type=number] {
1706
- --display: var(--hop-InputGroup-display-number);
1707
- --gap: var(--hop-InputGroup-gap-number);
1708
- --inline-size: var(--hop-InputGroup-inline-size-number);
1709
- }
1710
- .InputGroup-module__hop-InputGroup___MpyEZ[data-hovered] {
1711
- --background: var(--hop-InputGroup-background-hover);
1712
- --border: var(--hop-InputGroup-border-width) solid var(--hop-InputGroup-border-color-hover) ;
1713
- }
1714
- .InputGroup-module__hop-InputGroup___MpyEZ[data-focus-within] {
1715
- --border: var(--hop-InputGroup-border-width) solid var(--hop-InputGroup-border-color-focus) ;
1716
- }
1717
- .InputGroup-module__hop-InputGroup___MpyEZ[data-invalid] {
1718
- --border: var(--hop-InputGroup-border-width) solid var(--hop-InputGroup-border-color-invalid) ;
1719
- }
1720
- .InputGroup-module__hop-InputGroup___MpyEZ[data-disabled] {
1721
- --background: var(--hop-InputGroup-background-disabled);
1722
- --border: 0.0625rem solid var(--hop-InputGroup-border-color-disabled);
1723
- --input-color: var(--hop-InputGroup-input-color-disabled);
1724
- --input-placeholder-color: var(--hop-InputGroup-placeholder-color-disabled);
1725
- }
1726
- .InputGroup-module__hop-InputGroup__input___lecEl,
1727
- .InputGroup-module__hop-InputGroup__textarea___e89Dj {
1728
- flex: 1 1 auto;
1729
- box-sizing: border-box;
1730
- inline-size: var(--input-inline-size);
1731
- min-inline-size: 0;
1732
- font-family: var(--input-font-family);
1733
- font-size: var(--input-font-size);
1734
- font-weight: var(--input-font-weight);
1735
- line-height: var(--input-line-height);
1736
- color: var(--input-color);
1737
- background: transparent;
1738
- border: none;
1739
- outline: none;
1740
- }
1741
- .InputGroup-module__hop-InputGroup__input___lecEl {
1742
- block-size: var(--input-block-size);
1743
- padding: var(--hop-InputGroup-input-padding);
1744
- }
1745
- .InputGroup-module__hop-InputGroup__textarea___e89Dj {
1746
- padding: var(--hop-InputGroup-textarea-padding);
1747
- }
1748
- .InputGroup-module__hop-InputGroup__input___lecEl::placeholder {
1749
- font-family: var(--hop-InputGroup-placeholder-font-family);
1750
- font-size: var(--hop-InputGroup-placeholder-font-size);
1751
- font-weight: var(--hop-InputGroup-placeholder-font-weight);
1752
- line-height: var(--hop-InputGroup-placeholder-line-height);
1753
- color: var(--input-placeholder-color);
1754
- }
1755
-
1756
- /* css-module:/home/runner/work/wl-hopper/wl-hopper/packages/components/src/typography/Heading/src/Heading.module.css/#css-module-data */
1757
- .Heading-module__hop-Heading___hJVqv {
1758
- --hop-Heading-xs-font-size: var(--hop-heading-xs-font-size);
1759
- --hop-Heading-xs-font-family: var(--hop-heading-xs-font-family);
1760
- --hop-Heading-xs-font-weight: var(--hop-heading-xs-font-weight);
1761
- --hop-Heading-xs-line-height: var(--hop-heading-xs-line-height);
1762
- --hop-Heading-sm-font-size: var(--hop-heading-sm-font-size);
1763
- --hop-Heading-sm-font-family: var(--hop-heading-sm-font-family);
1764
- --hop-Heading-sm-font-weight: var(--hop-heading-sm-font-weight);
1765
- --hop-Heading-sm-line-height: var(--hop-heading-sm-line-height);
1766
- --hop-Heading-md-font-size: var(--hop-heading-md-font-size);
1767
- --hop-Heading-md-font-family: var(--hop-heading-md-font-family);
1768
- --hop-Heading-md-font-weight: var(--hop-heading-md-font-weight);
1769
- --hop-Heading-md-line-height: var(--hop-heading-md-line-height);
1770
- --hop-Heading-lg-font-size: var(--hop-heading-lg-font-size);
1771
- --hop-Heading-lg-font-family: var(--hop-heading-lg-font-family);
1772
- --hop-Heading-lg-font-weight: var(--hop-heading-lg-font-weight);
1773
- --hop-Heading-lg-line-height: var(--hop-heading-lg-line-height);
1774
- --hop-Heading-xl-font-size: var(--hop-heading-xl-font-size);
1775
- --hop-Heading-xl-font-family: var(--hop-heading-xl-font-family);
1776
- --hop-Heading-xl-font-weight: var(--hop-heading-xl-font-weight);
1777
- --hop-Heading-xl-line-height: var(--hop-heading-xl-line-height);
1778
- --hop-Heading-2xl-font-size: var(--hop-heading-2xl-font-size);
1779
- --hop-Heading-2xl-font-family: var(--hop-heading-2xl-font-family);
1780
- --hop-Heading-2xl-font-weight: var(--hop-heading-2xl-font-weight);
1781
- --hop-Heading-2xl-line-height: var(--hop-heading-2xl-line-height);
1782
- --hop-Heading-3xl-font-size: var(--hop-heading-3xl-font-size);
1783
- --hop-Heading-3xl-font-family: var(--hop-heading-3xl-font-family);
1784
- --hop-Heading-3xl-font-weight: var(--hop-heading-3xl-font-weight);
1785
- --hop-Heading-3xl-line-height: var(--hop-heading-3xl-line-height);
1786
- --hop-Heading-inherit-size-font-size: inherit;
1787
- --hop-Heading-inherit-size-font-family: inherit;
1788
- --hop-Heading-inherit-size-font-weight: inherit;
1789
- --hop-Heading-inherit-size-line-height: inherit;
1790
- }
1791
- :where(.Heading-module__hop-Heading___hJVqv) {
1792
- margin: 0;
1793
- font-family: var(--font-family);
1794
- font-size: var(--font-size);
1795
- font-weight: var(--font-weight);
1796
- line-height: var(--line-height);
1797
- }
1798
- :where(.Heading-module__hop-Heading--xs___Gkvx5) {
1799
- --font-size: var(--hop-Heading-xs-font-size);
1800
- --font-family: var(--hop-Heading-xs-font-family);
1801
- --font-weight: var(--hop-Heading-xs-font-weight);
1802
- --line-height: var(--hop-Heading-xs-line-height);
1803
- }
1804
- :where(.Heading-module__hop-Heading--sm___GUTqC) {
1805
- --font-size: var(--hop-Heading-sm-font-size);
1806
- --font-family: var(--hop-Heading-sm-font-family);
1807
- --font-weight: var(--hop-Heading-sm-font-weight);
1808
- --line-height: var(--hop-Heading-sm-line-height);
1809
- }
1810
- :where(.Heading-module__hop-Heading--md___AqJfy) {
1811
- --font-size: var(--hop-Heading-md-font-size);
1812
- --font-family: var(--hop-Heading-md-font-family);
1813
- --font-weight: var(--hop-Heading-md-font-weight);
1814
- --line-height: var(--hop-Heading-md-line-height);
1815
- }
1816
- :where(.Heading-module__hop-Heading--lg___pDVN1) {
1817
- --font-size: var(--hop-Heading-lg-font-size);
1818
- --font-family: var(--hop-Heading-lg-font-family);
1819
- --font-weight: var(--hop-Heading-lg-font-weight);
1820
- --line-height: var(--hop-Heading-lg-line-height);
1821
- }
1822
- :where(.Heading-module__hop-Heading--xl___T0hGA) {
1823
- --font-size: var(--hop-Heading-xl-font-size);
1824
- --font-family: var(--hop-Heading-xl-font-family);
1825
- --font-weight: var(--hop-Heading-xl-font-weight);
1826
- --line-height: var(--hop-Heading-xl-line-height);
1827
- }
1828
- :where(.Heading-module__hop-Heading--2xl___qJRjZ) {
1829
- --font-size: var(--hop-Heading-2xl-font-size);
1830
- --font-family: var(--hop-Heading-2xl-font-family);
1831
- --font-weight: var(--hop-Heading-2xl-font-weight);
1832
- --line-height: var(--hop-Heading-2xl-line-height);
1833
- }
1834
- :where(.Heading-module__hop-Heading--3xl___uQNVA) {
1835
- --font-size: var(--hop-Heading-3xl-font-size);
1836
- --font-family: var(--hop-Heading-3xl-font-family);
1837
- --font-weight: var(--hop-Heading-3xl-font-weight);
1838
- --line-height: var(--hop-Heading-3xl-line-height);
1839
- }
1840
-
1841
- /* css-module:/home/runner/work/wl-hopper/wl-hopper/packages/components/src/inputs/src/TextArea.module.css/#css-module-data */
1842
- .TextArea-module__hop-TextArea___uQGKH {
1843
- --hop-TextArea-gap: var(--hop-space-stack-xs);
1844
- --hop-TextArea-inline-size: 20rem;
1845
- --hop-TextArea-prefix-color: var(--hop-neutral-text-weak);
1846
- --hop-TextArea-char-count-padding: 0 calc(var(--hop-space-inset-md) - var(--hop-space-inset-xs)) var(--hop-space-inset-xs);
1847
- --hop-TextArea-char-count-color: var(--hop-neutral-text-weakest);
1848
- --hop-TextArea-char-count-color-disabled: var(--hop-neutral-text-disabled);
1849
- --hop-TextArea-char-count-color-invalid: var(--hop-danger-text-weak);
1850
- --hop-TextArea-input-min-height: 2rem;
1851
- --inline-size: var(--hop-TextArea-inline-size);
1852
- --resize: none;
1853
- --char-count-color: var(--hop-TextArea-char-count-color);
1854
- display: flex;
1855
- flex-direction: column;
1856
- gap: var(--hop-TextArea-gap);
1857
- inline-size: var(--inline-size);
1858
- }
1859
- .TextArea-module__hop-TextArea--fluid___sNZwX {
1860
- --inline-size: 100%;
1861
- }
1862
- .TextArea-module__hop-TextArea___uQGKH[data-resize-mode=vertical] {
1863
- --resize: vertical;
1864
- }
1865
- .TextArea-module__hop-TextArea___uQGKH[data-over-max-length] {
1866
- --char-count-color: var(--hop-TextArea-char-count-color-invalid);
1867
- }
1868
- .TextArea-module__hop-TextArea___uQGKH[data-disabled] {
1869
- --char-count-color: var(--hop-TextArea-char-count-color-disabled);
1870
- }
1871
- .TextArea-module__hop-TextArea__Label___x0-91 {
1872
- order: 0;
1873
- }
1874
- .TextArea-module__hop-TextArea__prefix___ozMT- {
1875
- color: var(--hop-TextArea-prefix-color);
1876
- }
1877
- .TextArea-module__hop-TextArea__InputGroup___1hWlx {
1878
- order: 1;
1879
- }
1880
- .TextArea-module__hop-TextArea__textarea___r0SC4 {
1881
- resize: var(--resize);
1882
- min-block-size: var(--hop-TextArea-input-min-height);
1883
- }
1884
- .TextArea-module__hop-TextArea__char-count___TBxZb {
1885
- padding: var(--hop-TextArea-char-count-padding);
1886
- color: var(--char-count-color);
1887
- }
1888
- .TextArea-module__hop-TextArea__ErrorMessage___F5Ho0,
1889
- .TextArea-module__hop-TextArea__HelperMessage___EXkDT {
1890
- order: 3;
1891
- }
1892
-
1893
- /* css-module:/home/runner/work/wl-hopper/wl-hopper/packages/components/src/inputs/src/TextField.module.css/#css-module-data */
1894
- .TextField-module__hop-TextField___Pmegw {
1895
- --hop-TextField-gap: var(--hop-space-stack-xs);
1896
- --hop-TextField-inline-size: 20rem;
1897
- --hop-TextField-prefix-color: var(--hop-neutral-text-weak);
1898
- --inline-size: var(--hop-TextField-inline-size);
1899
- display: flex;
1900
- flex-direction: column;
1901
- gap: var(--hop-TextField-gap);
1902
- inline-size: var(--inline-size);
1903
- }
1904
- .TextField-module__hop-TextField--fluid___gB9AM {
1905
- --inline-size: 100%;
1906
- }
1907
- .TextField-module__hop-TextField__Label___5O2K- {
1908
- order: 0;
1909
- }
1910
- .TextField-module__hop-TextField__prefix___YFY4G {
1911
- color: var(--hop-TextField-prefix-color);
1912
- }
1913
- .TextField-module__hop-TextField__InputGroup___qnReJ {
1914
- order: 1;
1915
- }
1916
- .TextField-module__hop-TextField__ErrorMessage___IU7x-,
1917
- .TextField-module__hop-TextField__HelperMessage___QChBo {
1918
- order: 3;
1919
- }
1920
-
1921
- /* css-module:/home/runner/work/wl-hopper/wl-hopper/packages/components/src/inputs/src/PasswordField.module.css/#css-module-data */
1922
- .PasswordField-module__hop-PasswordField___K1Viz {
1923
- --hop-PasswordField-gap: var(--hop-space-stack-xs);
1924
- --hop-PasswordField-inline-size: 20rem;
1925
- --inline-size: var(--hop-PasswordField-inline-size);
1926
- display: flex;
1927
- flex-direction: column;
1928
- gap: var(--hop-PasswordField-gap);
1929
- inline-size: var(--inline-size);
1930
- }
1931
- .PasswordField-module__hop-PasswordField--fluid___A9xrf {
1932
- --inline-size: 100%;
1933
- }
1934
- .PasswordField-module__hop-PasswordField__Label___PEh-V {
1935
- order: 0;
1936
- }
1937
- .PasswordField-module__hop-PasswordField__InputGroup___-KMzA {
1938
- order: 1;
1939
- }
1940
- .PasswordField-module__hop-PasswordField__ErrorMessage___hiN1T,
1941
- .PasswordField-module__hop-PasswordField__HelperMessage___Dc3vM {
1942
- order: 3;
1943
- }
1944
-
1945
- /* css-module:/home/runner/work/wl-hopper/wl-hopper/packages/components/src/inputs/src/SearchField.module.css/#css-module-data */
1946
- .SearchField-module__hop-SearchField___Bzhek {
1947
- --hop-SearchField-gap: var(--hop-space-stack-xs);
1948
- --hop-SearchField-inline-size: 20rem;
1949
- --hop-SearchField-color: var(--hop-neutral-text-weak);
1950
- --hop-SearchField-padding: var(--hop-space-inset-md);
1951
- --inline-size: var(--hop-SearchField-inline-size);
1952
- --input-group-padding-inline-end: var(--hop-SearchField-padding);
1953
- --input-group-padding-inline-start: var(--hop-SearchField-padding);
1954
- --clear-button-display: flex;
1955
- display: flex;
1956
- flex-direction: column;
1957
- gap: var(--hop-SearchField-gap);
1958
- inline-size: var(--inline-size);
1090
+ .EmbeddedButton-module__hop-EmbeddedButton--neutral___UmAU5 {
1091
+ --color: var(--hop-EmbeddedButton-neutral-color);
1092
+ --effect-background-color: var(--hop-EmbeddedButton-neutral-effect-background-color);
1959
1093
  }
1960
- .SearchField-module__hop-SearchField--fluid___-XKVD {
1961
- --inline-size: 100%;
1094
+ .EmbeddedButton-module__hop-EmbeddedButton--subdued___DvRSb {
1095
+ --color: var(--hop-EmbeddedButton-subdued-color);
1096
+ --effect-background-color: var(--hop-EmbeddedButton-subdued-effect-background-color);
1962
1097
  }
1963
- .SearchField-module__hop-SearchField__Label___laPoU {
1964
- order: 0;
1098
+ .EmbeddedButton-module__hop-EmbeddedButton--progress___JHpxs {
1099
+ --color: var(--hop-EmbeddedButton-progress-color);
1100
+ --effect-background-color: var(--hop-EmbeddedButton-progress-effect-background-color);
1965
1101
  }
1966
- .SearchField-module__hop-SearchField__prefix___-OhTw {
1967
- color: var(--hop-SearchField-color);
1102
+ .EmbeddedButton-module__hop-EmbeddedButton--positive___3R-QA {
1103
+ --color: var(--hop-EmbeddedButton-positive-color);
1104
+ --effect-background-color: var(--hop-EmbeddedButton-positive-effect-background-color);
1968
1105
  }
1969
- .SearchField-module__hop-SearchField__InputGroup___-gzSx {
1970
- order: 1;
1971
- padding-inline: var(--input-group-padding-inline-start) var(--input-group-padding-inline-end);
1106
+ .EmbeddedButton-module__hop-EmbeddedButton--caution___AYJP5 {
1107
+ --color: var(--hop-EmbeddedButton-caution-color);
1108
+ --effect-background-color: var(--hop-EmbeddedButton-caution-effect-background-color);
1972
1109
  }
1973
- .SearchField-module__hop-SearchField--clearable___1bAv6 {
1974
- --input-group-padding-inline-end: 0;
1110
+ .EmbeddedButton-module__hop-EmbeddedButton--negative___NYJpR {
1111
+ --color: var(--hop-EmbeddedButton-negative-color);
1112
+ --effect-background-color: var(--hop-EmbeddedButton-negative-effect-background-color);
1975
1113
  }
1976
- .SearchField-module__hop-SearchField__ErrorMessage___j3nmG,
1977
- .SearchField-module__hop-SearchField__HelperMessage___WEhqH {
1978
- order: 3;
1114
+ .EmbeddedButton-module__hop-EmbeddedButton--option1___HjCqc {
1115
+ --color: var(--hop-EmbeddedButton-option1-color);
1116
+ --effect-background-color: var(--hop-EmbeddedButton-option1-effect-background-color);
1979
1117
  }
1980
- .SearchField-module__hop-SearchField___Bzhek input::-webkit-search-cancel-button,
1981
- .SearchField-module__hop-SearchField___Bzhek input::-webkit-search-decoration {
1982
- appearance: none;
1118
+ .EmbeddedButton-module__hop-EmbeddedButton--option2___-arDT {
1119
+ --color: var(--hop-EmbeddedButton-option2-color);
1120
+ --effect-background-color: var(--hop-EmbeddedButton-option2-effect-background-color);
1983
1121
  }
1984
- .SearchField-module__hop-SearchField___Bzhek[data-empty] {
1985
- --clear-button-display: none;
1122
+ .EmbeddedButton-module__hop-EmbeddedButton--option3___ydPzK {
1123
+ --color: var(--hop-EmbeddedButton-option3-color);
1124
+ --effect-background-color: var(--hop-EmbeddedButton-option3-effect-background-color);
1986
1125
  }
1987
- .SearchField-module__hop-SearchField__ClearButton___SN3ZA {
1988
- display: var(--clear-button-display);
1126
+ .EmbeddedButton-module__hop-EmbeddedButton--option4___Lahu0 {
1127
+ --color: var(--hop-EmbeddedButton-option4-color);
1128
+ --effect-background-color: var(--hop-EmbeddedButton-option4-effect-background-color);
1989
1129
  }
1990
-
1991
- /* css-module:/home/runner/work/wl-hopper/wl-hopper/packages/components/src/Link/src/Link.module.css/#css-module-data */
1992
- .Link-module__hop-Link___aC99m {
1993
- --hop-Link-border-radius: var(--hop-shape-rounded-sm);
1994
- --hop-Link-focus-ring-color: var(--hop-primary-border-focus);
1995
- --hop-Link-color-disabled: var(--hop-neutral-text-disabled);
1996
- --hop-Link-column-gap: var(--hop-space-inline-xs);
1997
- --hop-Link-primary-text-color: var(--hop-primary-text);
1998
- --hop-Link-primary-text-disabled-color: var(--hop-primary-text-disabled);
1999
- --hop-Link-primary-text-hover-color: var(--hop-primary-text-hover);
2000
- --hop-Link-primary-text-pressed-color: var(--hop-primary-text-press);
2001
- --hop-Link-neutral-text-color: var(--hop-neutral-text);
2002
- --hop-Link-neutral-text-disabled-color: var(--hop-neutral-text-disabled);
2003
- --hop-Link-neutral-text-hover-color: var(--hop-neutral-text-hover);
2004
- --hop-Link-neutral-text-pressed-color: var(--hop-neutral-text-press);
2005
- cursor: pointer;
2006
- display: inline-flex;
2007
- column-gap: var(--hop-Link-column-gap);
2008
- align-items: center;
2009
- box-sizing: border-box;
2010
- inline-size: fit-content;
2011
- text-decoration: none;
2012
- text-underline-offset: 0.125rem;
2013
- border-radius: var(--hop-Link-border-radius);
2014
- outline: none;
2015
- outline-offset: 0.125rem;
1130
+ .EmbeddedButton-module__hop-EmbeddedButton--option5___FN9cX {
1131
+ --color: var(--hop-EmbeddedButton-option5-color);
1132
+ --effect-background-color: var(--hop-EmbeddedButton-option5-effect-background-color);
2016
1133
  }
2017
- .Link-module__hop-Link___aC99m[data-focus-visible] {
2018
- outline: 0.125rem solid var(--hop-Link-focus-ring-color);
1134
+ .EmbeddedButton-module__hop-EmbeddedButton--option6___VaTPy {
1135
+ --color: var(--hop-EmbeddedButton-option6-color);
1136
+ --effect-background-color: var(--hop-EmbeddedButton-option6-effect-background-color);
2019
1137
  }
2020
- .Link-module__hop-Link___aC99m[data-disabled] {
2021
- cursor: default;
1138
+ .EmbeddedButton-module__hop-EmbeddedButton___Ef3WW[data-selected] {
1139
+ --color: var(--hop-EmbeddedButton-selected-color);
1140
+ --effect-background-color: var(--hop-EmbeddedButton-selected-effect-background-color);
2022
1141
  }
2023
- .Link-module__hop-Link--quiet___f5kFR[data-focus-visible],
2024
- .Link-module__hop-Link--quiet___f5kFR[data-hovered] {
2025
- text-decoration: underline;
1142
+ .EmbeddedButton-module__hop-EmbeddedButton___Ef3WW[data-focus-visible] {
1143
+ outline: var(--focus-ring-size) solid var(--hop-EmbeddedButton-focus-ring-color);
1144
+ outline-offset: var(--focus-ring-offset);
2026
1145
  }
2027
- .Link-module__hop-Link___aC99m:not(.Link-module__hop-Link--quiet___f5kFR) {
2028
- text-decoration: underline;
1146
+ .EmbeddedButton-module__hop-EmbeddedButton___Ef3WW[data-disabled] {
1147
+ cursor: not-allowed;
2029
1148
  }
2030
- .Link-module__hop-Link--primary___hGo6S {
2031
- color: var(--hop-Link-primary-text-color);
1149
+ .EmbeddedButton-module__hop-EmbeddedButton--neutral___UmAU5[data-hovered] {
1150
+ --effect-background-color: var(--hop-EmbeddedButton-neutral-effect-background-color-hovered);
1151
+ --color: var(--hop-EmbeddedButton-neutral-color-hovered);
2032
1152
  }
2033
- .Link-module__hop-Link--primary___hGo6S[data-disabled] {
2034
- color: var(--hop-Link-primary-text-disabled-color);
1153
+ .EmbeddedButton-module__hop-EmbeddedButton--neutral___UmAU5[data-focus-visible] {
1154
+ --effect-background-color: var(--hop-EmbeddedButton-neutral-effect-background-color-focused);
1155
+ --color: var(--hop-EmbeddedButton-neutral-color-focused);
2035
1156
  }
2036
- .Link-module__hop-Link--primary___hGo6S:not([data-disabled])[data-focus-visible],
2037
- .Link-module__hop-Link--primary___hGo6S:not([data-disabled])[data-hovered] {
2038
- color: var(--hop-Link-primary-text-hover-color);
1157
+ .EmbeddedButton-module__hop-EmbeddedButton--neutral___UmAU5[data-pressed] {
1158
+ --effect-background-color: var(--hop-EmbeddedButton-neutral-effect-background-color-pressed);
1159
+ --color: var(--hop-EmbeddedButton-neutral-color-pressed);
2039
1160
  }
2040
- .Link-module__hop-Link--primary___hGo6S:not([data-disabled])[data-pressed] {
2041
- color: var(--hop-Link-primary-text-pressed-color);
1161
+ .EmbeddedButton-module__hop-EmbeddedButton--neutral___UmAU5[data-disabled] {
1162
+ --effect-background-color: var(--hop-EmbeddedButton-neutral-effect-background-color-disabled);
1163
+ --color: var(--hop-EmbeddedButton-neutral-color-disabled);
2042
1164
  }
2043
- .Link-module__hop-Link--secondary___PARtM {
2044
- color: var(--hop-Link-neutral-text-color);
1165
+ .EmbeddedButton-module__hop-EmbeddedButton--subdued___DvRSb[data-hovered] {
1166
+ --effect-background-color: var(--hop-EmbeddedButton-subdued-effect-background-color-hovered);
1167
+ --color: var(--hop-EmbeddedButton-subdued-color-hovered);
2045
1168
  }
2046
- .Link-module__hop-Link--secondary___PARtM[data-disabled] {
2047
- color: var(--hop-Link-neutral-text-disabled-color);
1169
+ .EmbeddedButton-module__hop-EmbeddedButton--subdued___DvRSb[data-focus-visible] {
1170
+ --effect-background-color: var(--hop-EmbeddedButton-subdued-effect-background-color-focused);
1171
+ --color: var(--hop-EmbeddedButton-subdued-color-focused);
2048
1172
  }
2049
- .Link-module__hop-Link--secondary___PARtM:not([data-disabled])[data-focus-visible],
2050
- .Link-module__hop-Link--secondary___PARtM:not([data-disabled])[data-hovered] {
2051
- color: var(--hop-Link-neutral-text-hover-color);
1173
+ .EmbeddedButton-module__hop-EmbeddedButton--subdued___DvRSb[data-pressed] {
1174
+ --effect-background-color: var(--hop-EmbeddedButton-subdued-effect-background-color-pressed);
1175
+ --color: var(--hop-EmbeddedButton-subdued-color-pressed);
2052
1176
  }
2053
- .Link-module__hop-Link--secondary___PARtM:not([data-disabled])[data-pressed] {
2054
- color: var(--hop-Link-neutral-text-pressed-color);
1177
+ .EmbeddedButton-module__hop-EmbeddedButton--subdued___DvRSb[data-disabled] {
1178
+ --effect-background-color: var(--hop-EmbeddedButton-subdued-effect-background-color-disabled);
1179
+ --color: var(--hop-EmbeddedButton-subdued-color-disabled);
2055
1180
  }
2056
- .Link-module__hop-Link__icon___s7bL3,
2057
- .Link-module__hop-Link__icon-list___nHoUZ {
2058
- order: 2;
1181
+ .EmbeddedButton-module__hop-EmbeddedButton--progress___JHpxs[data-hovered] {
1182
+ --effect-background-color: var(--hop-EmbeddedButton-progress-effect-background-color-hovered);
1183
+ --color: var(--hop-EmbeddedButton-progress-color-hovered);
2059
1184
  }
2060
- .Link-module__hop-Link__text___WH945 {
2061
- order: 1;
1185
+ .EmbeddedButton-module__hop-EmbeddedButton--progress___JHpxs[data-focus-visible] {
1186
+ --effect-background-color: var(--hop-EmbeddedButton-progress-effect-background-color-focused);
1187
+ --color: var(--hop-EmbeddedButton-progress-color-focused);
2062
1188
  }
2063
- .Link-module__hop-Link__start-icon___4Suu1,
2064
- .Link-module__hop-Link__start-icon-list___fCZzm {
2065
- order: 0;
1189
+ .EmbeddedButton-module__hop-EmbeddedButton--progress___JHpxs[data-pressed] {
1190
+ --effect-background-color: var(--hop-EmbeddedButton-progress-effect-background-color-pressed);
1191
+ --color: var(--hop-EmbeddedButton-progress-color-pressed);
2066
1192
  }
2067
-
2068
- /* css-module:/home/runner/work/wl-hopper/wl-hopper/packages/components/src/radio/src/Radio.module.css/#css-module-data */
2069
- .Radio-module__hop-Radio___kje-D {
2070
- --hop-Radio-box-border-size: 0.0625rem;
2071
- --hop-Radio-box-border-color: var(--hop-neutral-border);
2072
- --hop-Radio-box-background-color: var(--hop-neutral-surface);
2073
- --hop-Radio-box-outline-size: 0.125rem;
2074
- --hop-Radio-box-outline-color: var(--hop-primary-border-focus);
2075
- --hop-Radio-bullet-color: var(--hop-neutral-icon-selected);
2076
- --hop-Radio-bullet-display: none;
2077
- --hop-Radio-text-color: var(--hop-neutral-text);
2078
- --hop-Radio-icon-color: var(--hop-neutral-icon);
2079
- --hop-Radio-box-border-color-hovered: var(--hop-neutral-border-hover);
2080
- --hop-Radio-box-background-color-hovered: var(--hop-neutral-surface-hover);
2081
- --hop-Radio-text-color-hovered: var(--hop-neutral-text-hover);
2082
- --hop-Radio-icon-color-hovered: var(--hop-neutral-icon-hover);
2083
- --hop-Radio-box-border-color-pressed: var(--hop-neutral-border-press);
2084
- --hop-Radio-box-background-color-pressed: var(--hop-neutral-surface-press);
2085
- --hop-Radio-text-color-pressed: var(--hop-neutral-text-press);
2086
- --hop-Radio-icon-color-pressed: var(--hop-neutral-icon-press);
2087
- --hop-Radio-box-border-color-selected: var(--hop-neutral-border-selected);
2088
- --hop-Radio-box-background-color-selected: var(--hop-neutral-surface-selected);
2089
- --hop-Radio-bullet-display-selected: block;
2090
- --hop-Radio-text-color-selected: var(--hop-neutral-text);
2091
- --hop-Radio-icon-color-selected: var(--hop-neutral-icon);
2092
- --hop-Radio-box-border-color-disabled: var(--hop-neutral-border-disabled);
2093
- --hop-Radio-box-background-color-disabled: var(--hop-neutral-surface-disabled);
2094
- --hop-Radio-bullet-color-disabled: var(--hop-neutral-icon-disabled);
2095
- --hop-Radio-text-color-disabled: var(--hop-neutral-text-disabled);
2096
- --hop-Radio-icon-color-disabled: var(--hop-neutral-icon-disabled);
2097
- --hop-Radio-box-border-color-focused: var(--hop-neutral-border-hover);
2098
- --hop-Radio-box-background-color-focused: var(--hop-neutral-surface-hover);
2099
- --hop-Radio-text-color-focused: var(--hop-neutral-text);
2100
- --hop-Radio-icon-color-focused: var(--hop-neutral-icon);
2101
- --hop-Radio-box-border-color-invalid: var(--hop-danger-border-strong);
2102
- --hop-Radio-box-background-color-invalid: var(--hop-neutral-surface);
2103
- --hop-Radio-box-border-color-hovered-invalid: var(--hop-danger-border-strong);
2104
- --hop-Radio-box-background-color-hovered-invalid: var(--hop-danger-surface);
2105
- --hop-Radio-box-border-color-pressed-invalid: var(--hop-danger-border-press);
2106
- --hop-Radio-box-background-color-pressed-invalid: var(--hop-danger-surface-weak);
2107
- --hop-Radio-box-border-color-focused-invalid: var(--hop-danger-border-strong);
2108
- --hop-Radio-box-background-color-focused-invalid: var(--hop-danger-surface);
2109
- --hop-Radio-box-border-color-selected-invalid: var(--hop-danger-border-strong);
2110
- --hop-Radio-box-background-color-selected-invalid: var(--hop-danger-surface-strong);
2111
- --hop-Radio-bullet-color-invalid: var(--hop-danger-icon-strong);
2112
- --hop-Radio-text-color-invalid: var(--hop-danger-text-weak);
2113
- --hop-Radio-icon-color-invalid: var(--hop-danger-icon-weak);
2114
- --hop-Radio-text-color-hovered-invalid: var(--hop-danger-text-weak-hover);
2115
- --hop-Radio-icon-color-hovered-invalid: var(--hop-danger-icon-weak-hover);
2116
- --hop-Radio-text-color-pressed-invalid: var(--hop-danger-text-weak-press);
2117
- --hop-Radio-box-sm-inline-size: 1rem;
2118
- --hop-Radio-box-sm-block-size: 1rem;
2119
- --hop-Radio-text-sm-top-offset: calc((var(--box-inline-size) - (var(--hop-body-sm-line-height) * var(--hop-body-sm-font-size))) / 2);
2120
- --hop-Radio-text-sm-margin-inline-start: calc(var(--hop-space-inline-sm) - var(--hop-space-inline-xs));
2121
- --hop-Radio-box-md-inline-size: 1.5rem;
2122
- --hop-Radio-box-md-block-size: 1.5rem;
2123
- --hop-Radio-text-md-top-offset: calc((var(--box-inline-size) - (var(--hop-body-md-line-height) * var(--hop-body-md-font-size))) / 2);
2124
- --hop-Radio-text-md-margin-inline-start: calc(var(--hop-space-inline-md) - var(--hop-space-inline-xs));
2125
- --box-background-color: var(--hop-Radio-box-background-color);
2126
- --box-border-color: var(--hop-Radio-box-border-color);
2127
- --box-border-radius: var(--hop-shape-circle);
2128
- --bullet-color: var(--hop-Radio-bullet-color);
2129
- --bullet-display: var(--hop-Radio-bullet-display);
2130
- --cursor: pointer;
2131
- --text-color: var(--hop-Radio-text-color);
2132
- --icon-color: var(--hop-Radio-icon-color);
2133
- --transition-duration: var(--hop-easing-duration-2);
2134
- cursor: var(--cursor);
2135
- display: flex;
2136
- column-gap: var(--hop-space-inline-xs);
2137
- align-items: flex-start;
2138
- justify-content: flex-start;
2139
- box-sizing: border-box;
2140
- inline-size: max-content;
2141
- max-inline-size: 100%;
1193
+ .EmbeddedButton-module__hop-EmbeddedButton--progress___JHpxs[data-disabled] {
1194
+ --effect-background-color: var(--hop-EmbeddedButton-progress-effect-background-color-disabled);
1195
+ --color: var(--hop-EmbeddedButton-progress-color-disabled);
2142
1196
  }
2143
- .Radio-module__hop-Radio___kje-D[data-focus-visible],
2144
- .Radio-module__hop-Radio--focused___WiNxl {
2145
- --box-background-color: var(--hop-Radio-box-background-color-focused);
2146
- --box-border-color: var(--hop-Radio-box-border-color-focused);
2147
- --box-outline: var(--hop-Radio-box-outline-size) solid var(--hop-Radio-box-outline-color);
2148
- --text-color: var(--hop-Radio-text-color-focused);
2149
- --icon-color: var(--hop-Radio-icon-color-focused);
2150
- }
2151
- .Radio-module__hop-Radio___kje-D[data-hovered],
2152
- .Radio-module__hop-Radio--hovered___JZ4wW {
2153
- --box-background-color: var(--hop-Radio-box-background-color-hovered);
2154
- --box-border-color: var(--hop-Radio-box-border-color-hovered);
2155
- --text-color: var(--hop-Radio-text-color-hovered);
2156
- --icon-color: var(--hop-Radio-icon-color-hovered);
2157
- }
2158
- .Radio-module__hop-Radio___kje-D[data-pressed],
2159
- .Radio-module__hop-Radio--pressed___FbKXV {
2160
- --box-background-color: var(--hop-Radio-box-background-color-pressed);
2161
- --box-border-color: var(--hop-Radio-box-border-color-pressed);
2162
- --text-color: var(--hop-Radio-text-color-pressed);
2163
- --icon-color: var(--hop-Radio-icon-color-pressed);
2164
- }
2165
- .Radio-module__hop-Radio___kje-D[data-selected] {
2166
- --box-background-color: var(--hop-Radio-box-background-color-selected);
2167
- --box-border-color: var(--hop-Radio-box-border-color-selected);
2168
- --bullet-display: var(--hop-Radio-bullet-display-selected);
2169
- --text-color: var(--hop-Radio-text-color-selected);
2170
- --icon-color: var(--hop-Radio-icon-color-selected);
2171
- }
2172
- .Radio-module__hop-Radio___kje-D[data-invalid] {
2173
- --box-background-color: var(--hop-Radio-box-background-color-invalid);
2174
- --box-border-color: var(--hop-Radio-box-border-color-invalid);
2175
- --bullet-color: var(--hop-Radio-bullet-color-invalid);
2176
- --text-color: var(--hop-Radio-text-color-invalid);
2177
- --icon-color: var(--hop-Radio-icon-color-invalid);
2178
- }
2179
- .Radio-module__hop-Radio___kje-D:where([data-invalid])[data-focus-visible] {
2180
- --box-background-color: var(--hop-Radio-box-background-color-focused-invalid);
2181
- --box-border-color: var(--hop-Radio-box-border-color-focused-invalid);
2182
- }
2183
- .Radio-module__hop-Radio___kje-D:where([data-invalid])[data-hovered] {
2184
- --box-background-color: var(--hop-Radio-box-background-color-hovered-invalid);
2185
- --box-border-color: var(--hop-Radio-box-border-color-hovered-invalid);
2186
- --text-color: var(--hop-Radio-text-color-hovered-invalid);
2187
- --icon-color: var(--hop-Radio-text-color-hovered-invalid);
2188
- }
2189
- .Radio-module__hop-Radio___kje-D:where([data-invalid])[data-pressed] {
2190
- --box-background-color: var(--hop-Radio-box-background-color-pressed-invalid);
2191
- --box-border-color: var(--hop-Radio-box-border-color-pressed-invalid);
2192
- --text-color: var(--hop-Radio-text-color-pressed-invalid);
2193
- --icon-color: var(--hop-Radio-icon-color-pressed-invalid);
2194
- }
2195
- .Radio-module__hop-Radio___kje-D:where([data-invalid])[data-selected] {
2196
- --box-background-color: var(--hop-Radio-box-background-color-selected-invalid);
2197
- --box-border-color: var(--hop-Radio-box-border-color-selected-invalid);
2198
- }
2199
- .Radio-module__hop-Radio___kje-D[data-disabled] {
2200
- --box-background-color: var(--hop-Radio-box-background-color-disabled);
2201
- --box-border-color: var(--hop-Radio-box-border-color-disabled);
2202
- --bullet-color: var(--hop-Radio-bullet-color-disabled);
2203
- --cursor: not-allowed;
2204
- --text-color: var(--hop-Radio-text-color-disabled);
2205
- --icon-color: var(--hop-Radio-icon-color-disabled);
2206
- }
2207
- .Radio-module__hop-Radio--sm___2I3ad {
2208
- --box-inline-size: var(--hop-Radio-box-sm-inline-size);
2209
- --box-block-size: var(--hop-Radio-box-sm-block-size);
2210
- --text-top-offset: var(--hop-Radio-text-sm-top-offset);
2211
- --text-margin-inline-start: var(--hop-Radio-text-sm-margin-inline-start);
2212
- }
2213
- .Radio-module__hop-Radio--md___LkLVW {
2214
- --box-inline-size: var(--hop-Radio-box-md-inline-size);
2215
- --box-block-size: var(--hop-Radio-box-md-block-size);
2216
- --text-top-offset: var(--hop-Radio-text-md-top-offset);
2217
- --text-margin-inline-start: var(--hop-Radio-text-md-margin-inline-start);
2218
- }
2219
- .Radio-module__hop-Radio__icon___ZWDWh,
2220
- .Radio-module__hop-Radio__icon-list___pNFMD {
2221
- flex: 0 0 auto;
2222
- order: 3;
2223
- color: var(--icon-color);
1197
+ .EmbeddedButton-module__hop-EmbeddedButton--positive___3R-QA[data-hovered] {
1198
+ --effect-background-color: var(--hop-EmbeddedButton-positive-effect-background-color-hovered);
1199
+ --color: var(--hop-EmbeddedButton-positive-color-hovered);
2224
1200
  }
2225
- .Radio-module__hop-Radio__box___-Sj0e {
2226
- display: flex;
2227
- flex: 0 0 auto;
2228
- align-items: center;
2229
- justify-content: center;
2230
- order: 1;
2231
- box-sizing: border-box;
2232
- inline-size: var(--box-inline-size, var(--hop-Radio-box-md-inline-size));
2233
- block-size: var(--box-block-size, var(--hop-Radio-box-md-block-size));
2234
- background-color: var(--box-background-color);
2235
- border: var(--hop-Radio-box-border-size) solid var(--box-border-color);
2236
- border-radius: var(--box-border-radius);
2237
- outline: var(--box-outline, none);
2238
- outline-offset: 0.125rem;
2239
- transition: background-color var(--transition-duration) var(--hop-easing-productive), border var(--transition-duration) var(--hop-easing-productive);
1201
+ .EmbeddedButton-module__hop-EmbeddedButton--positive___3R-QA[data-focus-visible] {
1202
+ --effect-background-color: var(--hop-EmbeddedButton-positive-effect-background-color-focused);
1203
+ --color: var(--hop-EmbeddedButton-positive-color-focused);
2240
1204
  }
2241
- .Radio-module__hop-Radio__bullet___-iiHZ {
2242
- display: var(--bullet-display);
2243
- color: var(--bullet-color);
1205
+ .EmbeddedButton-module__hop-EmbeddedButton--positive___3R-QA[data-pressed] {
1206
+ --effect-background-color: var(--hop-EmbeddedButton-positive-effect-background-color-pressed);
1207
+ --color: var(--hop-EmbeddedButton-positive-color-pressed);
2244
1208
  }
2245
- .Radio-module__hop-Radio__text___LvdVH {
2246
- flex: 0 1 auto;
2247
- order: 2;
2248
- min-inline-size: 0;
2249
- margin-block-start: var(--text-top-offset, var(--hop-Radio-text-md-top-offset));
2250
- margin-inline-start: var(--text-margin-inline-start, var(--hop-Radio-text-md-margin-inline-start));
2251
- color: var(--text-color);
1209
+ .EmbeddedButton-module__hop-EmbeddedButton--positive___3R-QA[data-disabled] {
1210
+ --effect-background-color: var(--hop-EmbeddedButton-positive-effect-background-color-disabled);
1211
+ --color: var(--hop-EmbeddedButton-positive-color-disabled);
2252
1212
  }
2253
-
2254
- /* css-module:/home/runner/work/wl-hopper/wl-hopper/packages/components/src/radio/src/RadioField.module.css/#css-module-data */
2255
- .RadioField-module__hop-RadioField___Jgsbe {
2256
- --hop-RadioField-description-color: var(--hop-neutral-text-weak);
2257
- --hop-RadioField-description-color-disabled: var(--hop-neutral-text-disabled);
2258
- --hop-RadioField-sm-row-gap: var(--hop-space-stack-xs);
2259
- --hop-RadioField-radio-sm-inline-size: 1rem;
2260
- --hop-RadioField-description-sm-margin-inline-start: calc(var(--hop-RadioField-radio-sm-inline-size) + var(--hop-space-inline-sm));
2261
- --hop-RadioField-md-row-gap: var(--hop-space-stack-xs);
2262
- --hop-RadioField-radio-md-inline-size: 1.5rem;
2263
- --hop-RadioField-description-md-margin-inline-start: calc(var(--hop-RadioField-radio-md-inline-size) + var(--hop-space-inline-md));
2264
- --description-color: var(--hop-RadioField-description-color);
2265
- display: flex;
2266
- flex-direction: column;
2267
- row-gap: var(--row-gap, var(--hop-space-stack-sm));
2268
- align-items: flex-start;
2269
- justify-content: flex-start;
2270
- box-sizing: border-box;
2271
- inline-size: max-content;
2272
- max-inline-size: 100%;
2273
- }
2274
- .RadioField-module__hop-RadioField___Jgsbe[data-disabled] {
2275
- --description-color: var(--hop-RadioField-description-color-disabled);
2276
- }
2277
- .RadioField-module__hop-RadioField--sm___OOojW {
2278
- --row-gap: var(--hop-RadioField-sm-row-gap);
2279
- --description-margin-inline-start: var(--hop-RadioField-description-sm-margin-inline-start);
1213
+ .EmbeddedButton-module__hop-EmbeddedButton--caution___AYJP5[data-hovered] {
1214
+ --effect-background-color: var(--hop-EmbeddedButton-caution-effect-background-color-hovered);
1215
+ --color: var(--hop-EmbeddedButton-caution-color-hovered);
2280
1216
  }
2281
- .RadioField-module__hop-RadioField--md___XP22b {
2282
- --row-gap: var(--hop-RadioField-md-row-gap);
2283
- --description-margin-inline-start: var(--hop-RadioField-description-md-margin-inline-start);
1217
+ .EmbeddedButton-module__hop-EmbeddedButton--caution___AYJP5[data-focus-visible] {
1218
+ --effect-background-color: var(--hop-EmbeddedButton-caution-effect-background-color-focused);
1219
+ --color: var(--hop-EmbeddedButton-caution-color-focused);
2284
1220
  }
2285
- .RadioField-module__hop-RadioField__description___01pmv {
2286
- order: 2;
2287
- margin-inline-start: var(--description-margin-inline-start, var(--hop-RadioField-description-md-margin-inline-start));
2288
- color: var(--description-color);
1221
+ .EmbeddedButton-module__hop-EmbeddedButton--caution___AYJP5[data-pressed] {
1222
+ --effect-background-color: var(--hop-EmbeddedButton-caution-effect-background-color-pressed);
1223
+ --color: var(--hop-EmbeddedButton-caution-color-pressed);
2289
1224
  }
2290
- .RadioField-module__hop-RadioField__radio___68qIi {
2291
- order: 1;
1225
+ .EmbeddedButton-module__hop-EmbeddedButton--caution___AYJP5[data-disabled] {
1226
+ --effect-background-color: var(--hop-EmbeddedButton-caution-effect-background-color-disabled);
1227
+ --color: var(--hop-EmbeddedButton-caution-color-disabled);
2292
1228
  }
2293
-
2294
- /* css-module:/home/runner/work/wl-hopper/wl-hopper/packages/components/src/radio/src/RadioGroup.module.css/#css-module-data */
2295
- .RadioGroup-module__hop-RadioGroup___PfE2S {
2296
- --hop-RadioGroup-align-items: flex-start;
2297
- --hop-RadioGroup-justify-content: flex-start;
2298
- --hop-RadioGroup-bordered-border-color: var(--hop-neutral-border-weak);
2299
- --hop-RadioGroup-sm-column-gap: var(--hop-space-inline-sm);
2300
- --hop-RadioGroup-sm-row-gap: var(--hop-space-stack-sm);
2301
- --hop-RadioGroup-list-sm-column-gap: var(--hop-space-inline-sm);
2302
- --hop-RadioGroup-list-sm-row-gap: var(--hop-space-stack-sm);
2303
- --hop-RadioGroup-bordered-sm-padding: var(--hop-space-inset-sm);
2304
- --hop-RadioGroup-bordered-sm-column-gap: var(--hop-space-inline-sm);
2305
- --hop-RadioGroup-bordered-sm-row-gap: var(--hop-space-stack-sm);
2306
- --hop-RadioGroup-list-bordered-sm-column-gap: 0;
2307
- --hop-RadioGroup-list-bordered-sm-row-gap: 0;
2308
- --hop-RadioGroup-md-column-gap: var(--hop-space-inline-md);
2309
- --hop-RadioGroup-md-row-gap: var(--hop-space-stack-md);
2310
- --hop-RadioGroup-list-md-column-gap: var(--hop-space-inline-md);
2311
- --hop-RadioGroup-list-md-row-gap: var(--hop-space-stack-md);
2312
- --hop-RadioGroup-bordered-md-padding: var(--hop-space-inset-md);
2313
- --hop-RadioGroup-bordered-md-column-gap: var(--hop-space-inline-sm);
2314
- --hop-RadioGroup-bordered-md-row-gap: var(--hop-space-stack-sm);
2315
- --hop-RadioGroup-list-bordered-md-column-gap: 0;
2316
- --hop-RadioGroup-list-bordered-md-row-gap: 0;
2317
- --hop-RadioGroup-vertical-flex-direction: column;
2318
- --hop-RadioGroup-horizontal-flex-direction: row;
2319
- --radio-border-size: 0.0625rem;
2320
- --radio-border-color: var(--hop-neutral-border-weak);
2321
- --flex-direction: var(--hop-RadioGroup-vertical-flex-direction);
2322
- --align-items: var(--hop-RadioGroup-align-items);
2323
- --justify-content: var(--hop-RadioGroup-justify-content);
2324
- --flex-wrap: wrap;
2325
- --inline-size: max-content;
2326
- display: flex;
2327
- flex-direction: column;
2328
- gap: var(--row-gap, var(--hop-space-stack-md)) var(--column-gap, var(--hop-space-inline-md));
2329
- align-items: var(--align-items);
2330
- justify-content: var(--justify-content);
2331
- box-sizing: border-box;
2332
- inline-size: var(--inline-size);
2333
- max-inline-size: 100%;
1229
+ .EmbeddedButton-module__hop-EmbeddedButton--negative___NYJpR[data-hovered] {
1230
+ --effect-background-color: var(--hop-EmbeddedButton-negative-effect-background-color-hovered);
1231
+ --color: var(--hop-EmbeddedButton-negative-color-hovered);
2334
1232
  }
2335
- .RadioGroup-module__hop-RadioGroup--bordered___otQxq {
2336
- --list-border: var(--radio-border-size) solid var(--radio-border-color);
2337
- --list-border-radius: var(--hop-shape-rounded-md);
2338
- }
2339
- .RadioGroup-module__hop-RadioGroup--sm___Fdbjb {
2340
- --column-gap: var(--hop-RadioGroup-sm-column-gap);
2341
- --row-gap: var(--hop-RadioGroup-sm-row-gap);
2342
- --list-column-gap: var(--hop-RadioGroup-list-sm-column-gap);
2343
- --list-row-gap: var(--hop-RadioGroup-list-sm-row-gap);
2344
- }
2345
- .RadioGroup-module__hop-RadioGroup--md___OyWcZ {
2346
- --column-gap: var(--hop-RadioGroup-md-column-gap);
2347
- --row-gap: var(--hop-RadioGroup-md-row-gap);
2348
- --list-column-gap: var(--hop-RadioGroup-list-md-column-gap);
2349
- --list-row-gap: var(--hop-RadioGroup-list-md-row-gap);
2350
- }
2351
- .RadioGroup-module__hop-RadioGroup--bordered___otQxq.RadioGroup-module__hop-RadioGroup--sm___Fdbjb {
2352
- --radio-padding: var(--hop-RadioGroup-bordered-sm-padding);
2353
- --column-gap: var(--hop-RadioGroup-bordered-sm-column-gap);
2354
- --row-gap: var(--hop-RadioGroup-bordered-sm-row-gap);
2355
- --list-column-gap: var(--hop-RadioGroup-list-bordered-sm-column-gap);
2356
- --list-row-gap: var(--hop-RadioGroup-list-bordered-sm-row-gap);
2357
- }
2358
- .RadioGroup-module__hop-RadioGroup--bordered___otQxq.RadioGroup-module__hop-RadioGroup--md___OyWcZ {
2359
- --radio-padding: var(--hop-RadioGroup-bordered-md-padding);
2360
- --column-gap: var(--hop-RadioGroup-bordered-md-column-gap);
2361
- --row-gap: var(--hop-RadioGroup-bordered-md-row-gap);
2362
- --list-column-gap: var(--hop-RadioGroup-list-bordered-md-column-gap);
2363
- --list-row-gap: var(--hop-RadioGroup-list-bordered-md-row-gap);
2364
- }
2365
- .RadioGroup-module__hop-RadioGroup___PfE2S[data-orientation=horizontal] {
2366
- --flex-direction: var(--hop-RadioGroup-horizontal-flex-direction);
2367
- }
2368
- .RadioGroup-module__hop-RadioGroup--bordered___otQxq[data-orientation=horizontal] {
2369
- --flex-wrap: nowrap;
2370
- }
2371
- .RadioGroup-module__hop-RadioGroup___PfE2S > .RadioGroup-module__hop-RadioGroup__label___hDwDK {
2372
- order: 1;
1233
+ .EmbeddedButton-module__hop-EmbeddedButton--negative___NYJpR[data-focus-visible] {
1234
+ --effect-background-color: var(--hop-EmbeddedButton-negative-effect-background-color-focused);
1235
+ --color: var(--hop-EmbeddedButton-negative-color-focused);
2373
1236
  }
2374
- .RadioGroup-module__hop-RadioGroup__list___YVU4N {
2375
- display: flex;
2376
- flex-flow: var(--flex-direction) var(--flex-wrap);
2377
- gap: var(--list-row-gap, var(--hop-space-stack-md)) var(--list-column-gap, var(--hop-space-inline-md));
2378
- order: 2;
2379
- box-sizing: border-box;
2380
- inline-size: var(--inline-size);
2381
- max-inline-size: 100%;
2382
- border: var(--list-border, none);
2383
- border-radius: var(--list-border-radius, 0);
1237
+ .EmbeddedButton-module__hop-EmbeddedButton--negative___NYJpR[data-pressed] {
1238
+ --effect-background-color: var(--hop-EmbeddedButton-negative-effect-background-color-pressed);
1239
+ --color: var(--hop-EmbeddedButton-negative-color-pressed);
2384
1240
  }
2385
- .RadioGroup-module__hop-RadioGroup__list___YVU4N > .RadioGroup-module__hop-RadioGroup__radio___-aKOE {
2386
- position: relative;
2387
- flex: 0 1 auto;
2388
- align-content: start;
2389
- inline-size: auto;
2390
- min-inline-size: 0;
2391
- padding: var(--radio-padding, 0);
1241
+ .EmbeddedButton-module__hop-EmbeddedButton--negative___NYJpR[data-disabled] {
1242
+ --effect-background-color: var(--hop-EmbeddedButton-negative-effect-background-color-disabled);
1243
+ --color: var(--hop-EmbeddedButton-negative-color-disabled);
2392
1244
  }
2393
- .RadioGroup-module__hop-RadioGroup--bordered___otQxq .RadioGroup-module__hop-RadioGroup__list___YVU4N > .RadioGroup-module__hop-RadioGroup__radio___-aKOE ~ .RadioGroup-module__hop-RadioGroup__radio___-aKOE::before {
2394
- content: "";
2395
- position: absolute;
2396
- display: block;
1245
+ .EmbeddedButton-module__hop-EmbeddedButton--option1___HjCqc[data-hovered] {
1246
+ --effect-background-color: var(--hop-EmbeddedButton-option1-effect-background-color-hovered);
1247
+ --color: var(--hop-EmbeddedButton-option1-color-hovered);
2397
1248
  }
2398
- .RadioGroup-module__hop-RadioGroup--bordered___otQxq[data-orientation=vertical] .RadioGroup-module__hop-RadioGroup__list___YVU4N > .RadioGroup-module__hop-RadioGroup__radio___-aKOE ~ .RadioGroup-module__hop-RadioGroup__radio___-aKOE::before {
2399
- inset-block-start: 0;
2400
- inset-inline: 0;
2401
- border-block-start: var(--list-border, none);
1249
+ .EmbeddedButton-module__hop-EmbeddedButton--option1___HjCqc[data-focus-visible] {
1250
+ --effect-background-color: var(--hop-EmbeddedButton-option1-effect-background-color-focused);
1251
+ --color: var(--hop-EmbeddedButton-option1-color-focused);
2402
1252
  }
2403
- .RadioGroup-module__hop-RadioGroup--bordered___otQxq[data-orientation=horizontal] .RadioGroup-module__hop-RadioGroup__list___YVU4N > .RadioGroup-module__hop-RadioGroup__radio___-aKOE ~ .RadioGroup-module__hop-RadioGroup__radio___-aKOE::before {
2404
- inset-block: 0;
2405
- inset-inline-start: 0;
2406
- border-inline-start: var(--list-border, none);
1253
+ .EmbeddedButton-module__hop-EmbeddedButton--option1___HjCqc[data-pressed] {
1254
+ --effect-background-color: var(--hop-EmbeddedButton-option1-effect-background-color-pressed);
1255
+ --color: var(--hop-EmbeddedButton-option1-color-pressed);
2407
1256
  }
2408
- .RadioGroup-module__hop-RadioGroup___PfE2S > .RadioGroup-module__hop-RadioGroup__error-message___6-YxH,
2409
- .RadioGroup-module__hop-RadioGroup___PfE2S > .RadioGroup-module__hop-RadioGroup__helper-message___ot4ud {
2410
- order: 3;
1257
+ .EmbeddedButton-module__hop-EmbeddedButton--option1___HjCqc[data-disabled] {
1258
+ --effect-background-color: var(--hop-EmbeddedButton-option1-effect-background-color-disabled);
1259
+ --color: var(--hop-EmbeddedButton-option1-color-disabled);
2411
1260
  }
2412
-
2413
- /* css-module:/home/runner/work/wl-hopper/wl-hopper/packages/components/src/ListBox/src/ListBoxItemSkeleton.module.css/#css-module-data */
2414
- .ListBoxItemSkeleton-module__hop-ListBoxItemSkeleton___F7Sqr {
2415
- --hop-ListBoxItemSkeleton-background-color: var(--hop-rock-50);
2416
- --hop-ListBoxItemSkeleton-background-color-dark: var(--hop-rock-75);
2417
- --hop-ListBoxItemSkeleton-border-radius: var(--hop-shape-rounded-md);
2418
- --hop-ListBoxItemSkeleton-animation-duration: 1.4s;
2419
- --hop-ListBoxItemSkeleton-animation-reduced-motion-duration: 3.4s;
2420
- --hop-ListBoxItemSkeleton-linear-gradient:
2421
- linear-gradient(
2422
-
2423
- 90deg,
2424
- var(--hop-ListBoxItemSkeleton-background-color) 25%,
2425
- var(--hop-ListBoxItemSkeleton-background-color-dark) 37%,
2426
- var(--hop-ListBoxItemSkeleton-background-color-dark) 63%,
2427
- var(--hop-ListBoxItemSkeleton-background-color) 100% );
2428
- --hop-ListBoxItemSkeleton-xs-height: 1.25rem;
2429
- --hop-ListBoxItemSkeleton-sm-height: 1.25rem;
2430
- --hop-ListBoxItemSkeleton-md-height: 1.25rem;
2431
- --hop-ListBoxItemSkeleton-lg-height: 1.5rem;
2432
- --animation-duration: var(--hop-ListBoxItemSkeleton-animation-duration);
2433
- grid-area: label;
2434
- box-sizing: border-box;
2435
- block-size: var(--height);
2436
- background-color: var(--hop-ListBoxItemSkeleton-background-color);
2437
- background-image: var(--hop-ListBoxItemSkeleton-linear-gradient);
2438
- background-size: 400% 100%;
2439
- border-radius: var(--hop-ListBoxItemSkeleton-border-radius);
2440
- animation-name: ListBoxItemSkeleton-module__placeholder-shimmer___OFdvy;
2441
- animation-duration: var(--animation-duration);
2442
- animation-timing-function: ease-in-out;
2443
- animation-fill-mode: forwards;
2444
- animation-iteration-count: infinite;
2445
- @media (prefers-reduced-motion: reduce) {
2446
- --animation-duration: var(--hop-ListBoxItemSkeleton-animation-reduced-motion-duration);
2447
- }
1261
+ .EmbeddedButton-module__hop-EmbeddedButton--option2___-arDT[data-hovered] {
1262
+ --effect-background-color: var(--hop-EmbeddedButton-option2-effect-background-color-hovered);
1263
+ --color: var(--hop-EmbeddedButton-option2-color-hovered);
2448
1264
  }
2449
- .ListBoxItemSkeleton-module__hop-ListBoxItemSkeleton--xs___EV-BP {
2450
- --height: var(--hop-ListBoxItemSkeleton-xs-height);
1265
+ .EmbeddedButton-module__hop-EmbeddedButton--option2___-arDT[data-focus-visible] {
1266
+ --effect-background-color: var(--hop-EmbeddedButton-option2-effect-background-color-focused);
1267
+ --color: var(--hop-EmbeddedButton-option2-color-focused);
2451
1268
  }
2452
- .ListBoxItemSkeleton-module__hop-ListBoxItemSkeleton--sm___0syeJ {
2453
- --height: var(--hop-ListBoxItemSkeleton-sm-height);
1269
+ .EmbeddedButton-module__hop-EmbeddedButton--option2___-arDT[data-pressed] {
1270
+ --effect-background-color: var(--hop-EmbeddedButton-option2-effect-background-color-pressed);
1271
+ --color: var(--hop-EmbeddedButton-option2-color-pressed);
2454
1272
  }
2455
- .ListBoxItemSkeleton-module__hop-ListBoxItemSkeleton--md___IEB0s {
2456
- --height: var(--hop-ListBoxItemSkeleton-md-height);
1273
+ .EmbeddedButton-module__hop-EmbeddedButton--option2___-arDT[data-disabled] {
1274
+ --effect-background-color: var(--hop-EmbeddedButton-option2-effect-background-color-disabled);
1275
+ --color: var(--hop-EmbeddedButton-option2-color-disabled);
2457
1276
  }
2458
- .ListBoxItemSkeleton-module__hop-ListBoxItemSkeleton--lg___8RrK4 {
2459
- --height: var(--hop-ListBoxItemSkeleton-lg-height);
1277
+ .EmbeddedButton-module__hop-EmbeddedButton--option3___ydPzK[data-hovered] {
1278
+ --effect-background-color: var(--hop-EmbeddedButton-option3-effect-background-color-hovered);
1279
+ --color: var(--hop-EmbeddedButton-option3-color-hovered);
2460
1280
  }
2461
- @keyframes ListBoxItemSkeleton-module__placeholder-shimmer___OFdvy {
2462
- 0% {
2463
- background-position: 125% 50%;
2464
- }
2465
- 100% {
2466
- background-position: -25% 50%;
2467
- }
1281
+ .EmbeddedButton-module__hop-EmbeddedButton--option3___ydPzK[data-focus-visible] {
1282
+ --effect-background-color: var(--hop-EmbeddedButton-option3-effect-background-color-focused);
1283
+ --color: var(--hop-EmbeddedButton-option3-color-focused);
2468
1284
  }
2469
-
2470
- /* css-module:/home/runner/work/wl-hopper/wl-hopper/packages/components/src/ListBox/src/ListBoxItem.module.css/#css-module-data */
2471
- .ListBoxItem-module__hop-ListBoxItem___iKH4- {
2472
- --hop-ListBoxItem-background-color: transparent;
2473
- --hop-ListBoxItem-border-radius: var(--hop-shape-rounded-md);
2474
- --hop-ListBoxItem-text-color: var(--hop-neutral-text);
2475
- --hop-ListBoxItem-icon-color: var(--hop-neutral-icon);
2476
- --hop-ListBoxItem-outline-size: 0.125rem;
2477
- --hop-ListBoxItem-outline-color: var(--hop-primary-border-focus);
2478
- --hop-ListBoxItem-row-gap: var(--hop-space-stack-xs);
2479
- --hop-ListBoxItem-column-gap: var(--hop-space-inline-sm);
2480
- --hop-ListBoxItem-indicator-inline-size: calc( 1rem + var(--hop-ListBoxItem-column-gap));
2481
- --hop-ListBoxItem-description-text-color: var(--hop-neutral-text-weak);
2482
- --hop-ListBoxItem-grid-template-areas: "indicator avatar icon label end-icon badge";
2483
- --hop-ListBoxItem-grid-template-areas-with-description: "indicator avatar icon label end-icon badge" ". avatar . description description description";
2484
- --hop-ListBoxItem-grid-template-areas-loading: "label";
2485
- --hop-ListBoxItem-grid-template-columns: var(--hop-ListBoxItem-indicator-inline-size) auto auto 1fr auto auto;
2486
- --hop-ListBoxItem-grid-template-columns-not-selected: 0 auto auto 1fr auto auto;
2487
- --hop-ListBoxItem-grid-template-columns-loading: 1fr;
2488
- --hop-ListBoxItem-xs-padding-block: var(--hop-space-inset-xs);
2489
- --hop-ListBoxItem-xs-padding-inline: var(--hop-space-inset-md);
2490
- --hop-ListBoxItem-xs-min-height: 2rem;
2491
- --hop-ListBoxItem-sm-padding-block: var(--hop-space-inset-sm);
2492
- --hop-ListBoxItem-sm-padding-inline: var(--hop-space-inset-md);
2493
- --hop-ListBoxItem-sm-min-height: 2.5rem;
2494
- --hop-ListBoxItem-md-padding-block: var(--hop-space-inset-md);
2495
- --hop-ListBoxItem-md-padding-inline: var(--hop-space-inset-md);
2496
- --hop-ListBoxItem-md-min-height: 3.5rem;
2497
- --hop-ListBoxItem-lg-padding-block: var(--hop-space-inset-md);
2498
- --hop-ListBoxItem-lg-padding-inline: var(--hop-space-inset-md);
2499
- --hop-ListBoxItem-lg-min-height: 4rem;
2500
- --hop-ListBoxItem-background-color-hovered: var(--hop-neutral-surface-hover);
2501
- --hop-ListBoxItem-text-color-hovered: var(--hop-neutral-text-hover);
2502
- --hop-ListBoxItem-icon-color-hovered: var(--hop-neutral-icon-hover);
2503
- --hop-ListBoxItem-background-color-pressed: var(--hop-neutral-surface-press);
2504
- --hop-ListBoxItem-text-color-pressed: var(--hop-neutral-text-press);
2505
- --hop-ListBoxItem-icon-color-pressed: var(--hop-neutral-icon-press);
2506
- --hop-ListBoxItem-background-color-focused: var(--hop-neutral-surface-hover);
2507
- --hop-ListBoxItem-text-color-focused: var(--hop-neutral-text-hover);
2508
- --hop-ListBoxItem-icon-color-focused: var(--hop-neutral-icon-hover);
2509
- --hop-ListBoxItem-background-color-selected: transparent;
2510
- --hop-ListBoxItem-text-color-selected: var(--hop-neutral-text);
2511
- --hop-ListBoxItem-icon-color-selected: var(--hop-neutral-icon);
2512
- --hop-ListBoxItem-background-color-invalid: transparent;
2513
- --hop-ListBoxItem-background-color-invalid-hovered: var(--hop-danger-surface-hover);
2514
- --hop-ListBoxItem-background-color-invalid-pressed: var(--hop-danger-surface-press);
2515
- --hop-ListBoxItem-background-color-invalid-focused: var(--hop-danger-surface-hover);
2516
- --hop-ListBoxItem-background-color-invalid-selected: transparent;
2517
- --hop-ListBoxItem-background-color-invalid-disabled: transparent;
2518
- --hop-ListBoxItem-text-color-invalid: var(--hop-danger-text-weak);
2519
- --hop-ListBoxItem-text-color-invalid-hovered: var(--hop-danger-text-strong);
2520
- --hop-ListBoxItem-text-color-invalid-pressed: var(--hop-danger-text-strong);
2521
- --hop-ListBoxItem-text-color-invalid-focused: var(--hop-danger-text-strong);
2522
- --hop-ListBoxItem-text-color-invalid-selected: var(--hop-danger-text-weak);
2523
- --hop-ListBoxItem-text-color-invalid-disabled: var(--hop-danger-text-disabled);
2524
- --hop-ListBoxItem-icon-color-invalid: var(--hop-danger-icon-weak);
2525
- --hop-ListBoxItem-icon-color-invalid-hovered: var(--hop-danger-icon-strong);
2526
- --hop-ListBoxItem-icon-color-invalid-pressed: var(--hop-danger-icon-strong);
2527
- --hop-ListBoxItem-icon-color-invalid-focused: var(--hop-danger-icon-strong);
2528
- --hop-ListBoxItem-icon-color-invalid-selected: var(--hop-danger-icon-weak);
2529
- --hop-ListBoxItem-icon-color-invalid-disabled: var(--hop-danger-icon-disabled);
2530
- --hop-ListBoxItem-description-text-color-invalid-hovered: inherit;
2531
- --hop-ListBoxItem-description-text-color-invalid-pressed: inherit;
2532
- --hop-ListBoxItem-description-text-color-invalid-focused: inherit;
2533
- --hop-ListBoxItem-background-color-disabled: transparent;
2534
- --hop-ListBoxItem-text-color-disabled: var(--hop-neutral-text-disabled);
2535
- --hop-ListBoxItem-icon-color-disabled: var(--hop-neutral-icon-disabled);
2536
- --background-color: var(--hop-ListBoxItem-background-color);
2537
- --text-color: var(--hop-ListBoxItem-text-color);
2538
- --icon-color: var(--hop-ListBoxItem-icon-color);
2539
- --outline: none;
2540
- --cursor: default;
2541
- --checkmark-opacity: 0;
2542
- --description-text-color: var(--hop-ListBoxItem-description-text-color);
2543
- --row-gap: 0;
2544
- --grid-template-areas: var(--hop-ListBoxItem-grid-template-areas);
2545
- --grid-template-columns: var(--hop-ListBoxItem-grid-template-columns);
2546
- --checkmark-transition: opacity 0.2s ease-in-out .2s;
2547
- cursor: var(--cursor);
2548
- box-sizing: border-box;
2549
- color: var(--text-color);
2550
- background-color: var(--background-color);
2551
- border-radius: var(--hop-ListBoxItem-border-radius);
2552
- outline: var(--outline);
2553
- }
2554
- .ListBoxItem-module__hop-ListBoxItem--xs___WKAJM {
2555
- --padding-block: var(--hop-ListBoxItem-xs-padding-block);
2556
- --padding-inline: var(--hop-ListBoxItem-xs-padding-inline);
2557
- --min-height: var(--hop-ListBoxItem-xs-min-height);
2558
- }
2559
- .ListBoxItem-module__hop-ListBoxItem--sm___qMqJu {
2560
- --padding-block: var(--hop-ListBoxItem-sm-padding-block);
2561
- --padding-inline: var(--hop-ListBoxItem-sm-padding-inline);
2562
- --min-height: var(--hop-ListBoxItem-sm-min-height);
2563
- }
2564
- .ListBoxItem-module__hop-ListBoxItem--md___7gqf9 {
2565
- --padding-block: var(--hop-ListBoxItem-md-padding-block);
2566
- --padding-inline: var(--hop-ListBoxItem-md-padding-inline);
2567
- --min-height: var(--hop-ListBoxItem-md-min-height);
2568
- }
2569
- .ListBoxItem-module__hop-ListBoxItem--lg___am7Ho {
2570
- --padding-block: var(--hop-ListBoxItem-lg-padding-block);
2571
- --padding-inline: var(--hop-ListBoxItem-lg-padding-inline);
2572
- --min-height: var(--hop-ListBoxItem-lg-min-height);
2573
- }
2574
- .ListBoxItem-module__hop-ListBoxItem___iKH4-[data-selection-mode] {
2575
- --cursor: pointer;
2576
- }
2577
- .ListBoxItem-module__hop-ListBoxItem___iKH4-:not([data-selection-mode]) {
2578
- --grid-template-columns: var(--hop-ListBoxItem-grid-template-columns-not-selected);
2579
- }
2580
- .ListBoxItem-module__hop-ListBoxItem__inner___jTC0B:not([data-list-has-selection]):has(.ListBoxItem-module__hop-ListBoxItem__checkmark___6GyY1) {
2581
- --grid-template-columns: var(--hop-ListBoxItem-grid-template-columns-not-selected);
2582
- }
2583
- .ListBoxItem-module__hop-ListBoxItem__inner___jTC0B[data-list-has-selection-end]:has(.ListBoxItem-module__hop-ListBoxItem__checkmark___6GyY1) {
2584
- --checkmark-transition: none;
2585
- }
2586
- .ListBoxItem-module__hop-ListBoxItem___iKH4-[data-selected] {
2587
- --background-color: var(--hop-ListBoxItem-background-color-selected);
2588
- --text-color: var(--hop-ListBoxItem-text-color-selected);
2589
- --icon-color: var(--hop-ListBoxItem-icon-color-selected);
2590
- --checkmark-opacity: 1;
2591
- }
2592
- .ListBoxItem-module__hop-ListBoxItem___iKH4-[data-focus-visible] {
2593
- --background-color: var(--hop-ListBoxItem-background-color-focused);
2594
- --text-color: var(--hop-ListBoxItem-text-color-focused);
2595
- --icon-color: var(--hop-ListBoxItem-icon-color-focused);
2596
- --outline: var(--hop-ListBoxItem-outline-size) solid var(--hop-ListBoxItem-outline-color);
2597
- }
2598
- .ListBoxItem-module__hop-ListBoxItem___iKH4-[data-hovered] {
2599
- --background-color: var(--hop-ListBoxItem-background-color-hovered);
2600
- --text-color: var(--hop-ListBoxItem-text-color-hovered);
2601
- --icon-color: var(--hop-ListBoxItem-icon-color-hovered);
2602
- }
2603
- .ListBoxItem-module__hop-ListBoxItem___iKH4-[data-pressed] {
2604
- --background-color: var(--hop-ListBoxItem-background-color-pressed);
2605
- --text-color: var(--hop-ListBoxItem-text-color-pressed);
2606
- --icon-color: var(--hop-ListBoxItem-icon-color-pressed);
2607
- }
2608
- .ListBoxItem-module__hop-ListBoxItem___iKH4-[data-disabled] {
2609
- --background-color: var(--hop-ListBoxItem-background-color-disabled);
2610
- --text-color: var(--hop-ListBoxItem-text-color-disabled);
2611
- --icon-color: var(--hop-ListBoxItem-icon-color-disabled);
2612
- --description-text-color: var(--hop-ListBoxItem-text-color-disabled);
2613
- --cursor: not-allowed;
2614
- }
2615
- .ListBoxItem-module__hop-ListBoxItem___iKH4-[data-invalid] {
2616
- --background-color: var(--hop-ListBoxItem-background-color-invalid);
2617
- --text-color: var(--hop-ListBoxItem-text-color-invalid);
2618
- --icon-color: var(--hop-ListBoxItem-icon-color-invalid);
2619
- }
2620
- .ListBoxItem-module__hop-ListBoxItem___iKH4-[data-invalid][data-selected] {
2621
- --background-color: var(--hop-ListBoxItem-background-color-invalid-selected);
2622
- --text-color: var(--hop-ListBoxItem-text-color-invalid-selected);
2623
- --icon-color: var(--hop-ListBoxItem-icon-color-invalid-selected);
2624
- }
2625
- .ListBoxItem-module__hop-ListBoxItem___iKH4-[data-invalid][data-focus-visible] {
2626
- --background-color: var(--hop-ListBoxItem-background-color-invalid-focused);
2627
- --text-color: var(--hop-ListBoxItem-text-color-invalid-focused);
2628
- --icon-color: var(--hop-ListBoxItem-icon-color-invalid-focused);
2629
- --description-text-color: var(--hop-ListBoxItem-description-text-color-invalid-focused);
2630
- }
2631
- .ListBoxItem-module__hop-ListBoxItem___iKH4-[data-invalid][data-hovered] {
2632
- --background-color: var(--hop-ListBoxItem-background-color-invalid-hovered);
2633
- --text-color: var(--hop-ListBoxItem-text-color-invalid-hovered);
2634
- --icon-color: var(--hop-ListBoxItem-icon-color-invalid-hovered);
2635
- --description-text-color: var(--hop-ListBoxItem-description-text-color-invalid-hovered);
2636
- }
2637
- .ListBoxItem-module__hop-ListBoxItem___iKH4-[data-invalid][data-pressed] {
2638
- --background-color: var(--hop-ListBoxItem-background-color-invalid-pressed);
2639
- --text-color: var(--hop-ListBoxItem-text-color-invalid-pressed);
2640
- --icon-color: var(--hop-ListBoxItem-icon-color-invalid-pressed);
2641
- --description-text-color: var(--hop-ListBoxItem-description-text-color-invalid-pressed);
2642
- }
2643
- .ListBoxItem-module__hop-ListBoxItem___iKH4-[data-invalid][data-disabled] {
2644
- --background-color: var(--hop-ListBoxItem-background-color-invalid-disabled);
2645
- --text-color: var(--hop-ListBoxItem-text-color-invalid-disabled);
2646
- --icon-color: var(--hop-ListBoxItem-icon-color-invalid-disabled);
2647
- }
2648
- .ListBoxItem-module__hop-ListBoxItem___iKH4-:has(.ListBoxItem-module__hop-ListBoxItem__description___jWtkG) {
2649
- --row-gap: var(--hop-ListBoxItem-row-gap);
2650
- --grid-template-areas: var(--hop-ListBoxItem-grid-template-areas-with-description);
2651
- }
2652
- .ListBoxItem-module__hop-ListBoxItem___iKH4-[data-loading] {
2653
- --grid-template-areas: var(--hop-ListBoxItem-grid-template-areas-loading);
2654
- --grid-template-columns: var(--hop-ListBoxItem-grid-template-columns-loading);
2655
- }
2656
- .ListBoxItem-module__hop-ListBoxItem__inner___jTC0B {
2657
- display: grid;
2658
- grid-template-areas: var(--grid-template-areas);
2659
- grid-template-columns: var(--grid-template-columns);
2660
- row-gap: var(--row-gap);
2661
- align-items: center;
2662
- box-sizing: border-box;
2663
- min-block-size: var(--min-height);
2664
- padding-block: var(--padding-block);
2665
- padding-inline: var(--padding-inline);
2666
- transition: grid-template-columns .3s ease-in-out;
2667
- }
2668
- .ListBoxItem-module__hop-ListBoxItem__checkmark___6GyY1 {
2669
- grid-area: indicator;
2670
- margin-inline-end: var(--hop-ListBoxItem-column-gap);
2671
- color: var(--icon-color);
2672
- opacity: var(--checkmark-opacity);
2673
- transition: var(--checkmark-transition);
2674
- }
2675
- .ListBoxItem-module__hop-ListBoxItem__radio-group___PPRRO,
2676
- .ListBoxItem-module__hop-ListBoxItem__checkbox___VYOzU {
2677
- pointer-events: none;
2678
- user-select: none;
2679
- grid-area: indicator;
2680
- margin-inline-end: var(--hop-ListBoxItem-column-gap);
1285
+ .EmbeddedButton-module__hop-EmbeddedButton--option3___ydPzK[data-pressed] {
1286
+ --effect-background-color: var(--hop-EmbeddedButton-option3-effect-background-color-pressed);
1287
+ --color: var(--hop-EmbeddedButton-option3-color-pressed);
2681
1288
  }
2682
- .ListBoxItem-module__hop-ListBoxItem__avatar___VH5yz {
2683
- grid-area: avatar;
2684
- margin-inline-end: var(--hop-ListBoxItem-column-gap);
1289
+ .EmbeddedButton-module__hop-EmbeddedButton--option3___ydPzK[data-disabled] {
1290
+ --effect-background-color: var(--hop-EmbeddedButton-option3-effect-background-color-disabled);
1291
+ --color: var(--hop-EmbeddedButton-option3-color-disabled);
2685
1292
  }
2686
- .ListBoxItem-module__hop-ListBoxItem__icon-list___iphhb,
2687
- .ListBoxItem-module__hop-ListBoxItem__icon___ZiAaD {
2688
- grid-area: icon;
2689
- flex: 0 0 auto;
2690
- margin-inline-end: var(--hop-ListBoxItem-column-gap);
2691
- color: var(--icon-color);
1293
+ .EmbeddedButton-module__hop-EmbeddedButton--option4___Lahu0[data-hovered] {
1294
+ --effect-background-color: var(--hop-EmbeddedButton-option4-effect-background-color-hovered);
1295
+ --color: var(--hop-EmbeddedButton-option4-color-hovered);
2692
1296
  }
2693
- .ListBoxItem-module__hop-ListBoxItem__label___SskOq {
2694
- overflow: hidden;
2695
- grid-area: label;
2696
- min-inline-size: 0;
2697
- text-overflow: ellipsis;
2698
- white-space: nowrap;
1297
+ .EmbeddedButton-module__hop-EmbeddedButton--option4___Lahu0[data-focus-visible] {
1298
+ --effect-background-color: var(--hop-EmbeddedButton-option4-effect-background-color-focused);
1299
+ --color: var(--hop-EmbeddedButton-option4-color-focused);
2699
1300
  }
2700
- .ListBoxItem-module__hop-ListBoxItem__end-icon-list___dgScQ,
2701
- .ListBoxItem-module__hop-ListBoxItem__end-icon___r--xS {
2702
- grid-area: end-icon;
2703
- margin-inline-start: var(--hop-ListBoxItem-column-gap);
2704
- color: var(--icon-color);
1301
+ .EmbeddedButton-module__hop-EmbeddedButton--option4___Lahu0[data-pressed] {
1302
+ --effect-background-color: var(--hop-EmbeddedButton-option4-effect-background-color-pressed);
1303
+ --color: var(--hop-EmbeddedButton-option4-color-pressed);
2705
1304
  }
2706
- .ListBoxItem-module__hop-ListBoxItem__badge___nOu91 {
2707
- grid-area: badge;
2708
- margin-inline-start: var(--hop-ListBoxItem-column-gap);
1305
+ .EmbeddedButton-module__hop-EmbeddedButton--option4___Lahu0[data-disabled] {
1306
+ --effect-background-color: var(--hop-EmbeddedButton-option4-effect-background-color-disabled);
1307
+ --color: var(--hop-EmbeddedButton-option4-color-disabled);
2709
1308
  }
2710
- .ListBoxItem-module__hop-ListBoxItem__description___jWtkG {
2711
- overflow: hidden;
2712
- display: -webkit-box;
2713
- grid-area: description;
2714
- -webkit-box-orient: vertical;
2715
- -webkit-line-clamp: 2;
2716
- line-clamp: 2;
2717
- color: var(--description-text-color);
1309
+ .EmbeddedButton-module__hop-EmbeddedButton--option5___FN9cX[data-hovered] {
1310
+ --effect-background-color: var(--hop-EmbeddedButton-option5-effect-background-color-hovered);
1311
+ --color: var(--hop-EmbeddedButton-option5-color-hovered);
2718
1312
  }
2719
-
2720
- /* css-module:/home/runner/work/wl-hopper/wl-hopper/packages/components/src/ListBox/src/ListBox.module.css/#css-module-data */
2721
- .ListBox-module__hop-ListBox___cyQ8m {
2722
- --hop-ListBox-background-color: var(--hop-neutral-surface);
2723
- --hop-ListBox-border-color: var(--hop-neutral-border-weak);
2724
- --hop-ListBox-border-radius: var(--hop-shape-rounded-md);
2725
- --hop-ListBox-border-size: 0.0625rem;
2726
- --hop-ListBox-padding-inline: var(--hop-space-inset-sm);
2727
- --hop-ListBox-padding-block: var(--hop-space-inset-sm);
2728
- --hop-ListBox-min-width: 13.625rem;
2729
- --hop-ListBox-max-width: 18rem;
2730
- --hop-ListBox-width: max-content;
2731
- --hop-ListBox-fluid-width: 100%;
2732
- --hop-ListBox-fluid-max-width: 100%;
2733
- --hop-ListBox-section-padding-block: var(--hop-ListBox-padding-block);
2734
- --hop-ListBox-section-padding-inline: var(--hop-ListBox-padding-inline);
2735
- --hop-ListBox-section-margin-block: var(--hop-space-stack-sm);
2736
- --hop-ListBox-section-margin-inline: calc(-1 * var(--hop-ListBox-padding-inline));
2737
- --hop-ListBox-section-border-size: var(--hop-ListBox-border-size);
2738
- --hop-ListBox-section-border-color: var(--hop-ListBox-border-color);
2739
- --hop-ListBox-section-header-font-family: var(--hop-overline-font-family);
2740
- --hop-ListBox-section-header-font-size: var(--hop-overline-font-size);
2741
- --hop-ListBox-section-header-font-weight: var(--hop-overline-font-weight);
2742
- --hop-ListBox-section-header-letter-spacing: 0.015rem;
2743
- --hop-ListBox-section-header-line-height: var(--hop-overline-line-height);
2744
- --hop-ListBox-section-header-text-transform: uppercase;
2745
- --hop-ListBox-section-header-padding: var(--hop-space-inset-stretch-sm);
2746
- --hop-ListBox-section-header-top-offset: var(--hop-overline-top-offset);
2747
- --hop-ListBox-section-header-bottom-offset: var(--hop-overline-bottom-offset);
2748
- --hop-ListBox-divider-margin-block: var(--hop-space-stack-sm);
2749
- --hop-ListBox-divider-margin-inline: calc(-1 * var(--hop-ListBox-padding-inline));
2750
- --max-width: var(--hop-ListBox-max-width);
2751
- --width: var(--hop-ListBox-width);
2752
- --section-padding-block-start: var(--hop-ListBox-section-padding-block);
2753
- --section-padding-block-end: var(--hop-ListBox-section-padding-block);
2754
- --section-margin-block-start: 0;
2755
- --section-margin-block-end: 0;
2756
- --section-border-block-start: 0;
2757
- --section-border-block-end: var(--hop-ListBox-section-border-size) solid var(--hop-ListBox-section-border-color);
2758
- overflow-y: auto;
2759
- box-sizing: border-box;
2760
- inline-size: var(--width);
2761
- min-inline-size: var(--hop-ListBox-min-width);
2762
- max-inline-size: var(--max-width);
2763
- padding-block: var(--hop-ListBox-padding-block);
2764
- padding-inline: var(--hop-ListBox-padding-inline);
2765
- background-color: var(--hop-ListBox-background-color);
2766
- border: var(--hop-ListBox-border-size) solid var(--hop-ListBox-border-color);
2767
- border-radius: var(--hop-ListBox-border-radius);
2768
- }
2769
- .ListBox-module__hop-ListBox--fluid___TImf9 {
2770
- --max-width: var(--hop-ListBox-fluid-max-width);
2771
- --width: var(--hop-ListBox-fluid-width);
2772
- }
2773
- .ListBox-module__hop-ListBox__section___nULeu {
2774
- margin-block: var(--section-margin-block-start) var(--section-margin-block-end);
2775
- margin-inline: var(--hop-ListBox-section-margin-inline);
2776
- padding-block: var(--section-padding-block-start) var(--section-padding-block-end);
2777
- padding-inline: var(--hop-ListBox-section-padding-inline);
2778
- border-block-start: var(--section-border-block-start);
2779
- border-block-end: var(--section-border-block-end);
2780
- }
2781
- .ListBox-module__hop-ListBox__item___r3RgS + .ListBox-module__hop-ListBox__section___nULeu {
2782
- --section-margin-block-start: var(--hop-ListBox-section-margin-block);
2783
- --section-border-block-start: var(--hop-ListBox-section-border-size) solid var(--hop-ListBox-section-border-color);
2784
- }
2785
- .ListBox-module__hop-ListBox__section___nULeu:has(+ .ListBox-module__hop-ListBox__item___r3RgS) {
2786
- --section-margin-block-end: var(--hop-ListBox-section-margin-block);
2787
- }
2788
- .ListBox-module__hop-ListBox__section___nULeu:first-child {
2789
- --section-padding-block-start: 0;
2790
- }
2791
- .ListBox-module__hop-ListBox__section___nULeu:last-child {
2792
- --section-padding-block-end: 0;
2793
- --section-border-block-end: 0;
2794
- }
2795
- .ListBox-module__hop-ListBox__section-header___DWGXa {
2796
- margin: 0;
2797
- padding: var(--hop-ListBox-section-header-padding);
2798
- font-family: var(--hop-ListBox-section-header-font-family);
2799
- font-size: var(--hop-ListBox-section-header-font-size);
2800
- font-weight: var(--hop-ListBox-section-header-font-weight);
2801
- line-height: var(--hop-ListBox-section-header-line-height);
2802
- text-transform: var(--hop-ListBox-section-header-text-transform);
2803
- letter-spacing: var(--hop-ListBox-section-header-letter-spacing);
2804
- }
2805
- .ListBox-module__hop-ListBox__section-header___DWGXa::before,
2806
- .ListBox-module__hop-ListBox__section-header___DWGXa::after {
2807
- content: "";
2808
- display: block;
2809
- box-sizing: border-box;
2810
- inline-size: 0;
2811
- block-size: 0;
1313
+ .EmbeddedButton-module__hop-EmbeddedButton--option5___FN9cX[data-focus-visible] {
1314
+ --effect-background-color: var(--hop-EmbeddedButton-option5-effect-background-color-focused);
1315
+ --color: var(--hop-EmbeddedButton-option5-color-focused);
2812
1316
  }
2813
- .ListBox-module__hop-ListBox__section-header___DWGXa::before {
2814
- margin-block-end: var(--hop-ListBox-section-header-bottom-offset);
1317
+ .EmbeddedButton-module__hop-EmbeddedButton--option5___FN9cX[data-pressed] {
1318
+ --effect-background-color: var(--hop-EmbeddedButton-option5-effect-background-color-pressed);
1319
+ --color: var(--hop-EmbeddedButton-option5-color-pressed);
2815
1320
  }
2816
- .ListBox-module__hop-ListBox__section-header___DWGXa::after {
2817
- margin-block-start: var(--hop-ListBox-section-header-top-offset);
1321
+ .EmbeddedButton-module__hop-EmbeddedButton--option5___FN9cX[data-disabled] {
1322
+ --effect-background-color: var(--hop-EmbeddedButton-option5-effect-background-color-disabled);
1323
+ --color: var(--hop-EmbeddedButton-option5-color-disabled);
2818
1324
  }
2819
- .ListBox-module__hop-ListBox__divider___ncxbm {
2820
- margin-block: var(--hop-ListBox-divider-margin-block);
2821
- margin-inline: var(--hop-ListBox-divider-margin-inline);
1325
+ .EmbeddedButton-module__hop-EmbeddedButton--option6___VaTPy[data-hovered] {
1326
+ --effect-background-color: var(--hop-EmbeddedButton-option6-effect-background-color-hovered);
1327
+ --color: var(--hop-EmbeddedButton-option6-color-hovered);
2822
1328
  }
2823
-
2824
- /* css-module:/home/runner/work/wl-hopper/wl-hopper/packages/components/src/overlays/Popover/src/Popover.module.css/#css-module-data */
2825
- :where(.Popover-module__hop-Popover___1SG-H *) {
2826
- font-family: var(--font-family);
2827
- font-size: var(--font-size);
2828
- font-weight: var(--font-weight);
2829
- line-height: var(--line-height);
2830
- outline: none;
1329
+ .EmbeddedButton-module__hop-EmbeddedButton--option6___VaTPy[data-focus-visible] {
1330
+ --effect-background-color: var(--hop-EmbeddedButton-option6-effect-background-color-focused);
1331
+ --color: var(--hop-EmbeddedButton-option6-color-focused);
2831
1332
  }
2832
- .Popover-module__hop-Popover__dialog___Smzz- {
2833
- --hop-Popover-background: var(--hop-neutral-surface);
2834
- --hop-Popover-font-family: var(--hop-body-sm-font-family);
2835
- --hop-Popover-font-size: var(--hop-body-sm-font-size);
2836
- --hop-Popover-font-weight: var(--hop-body-sm-font-weight);
2837
- --hop-Popover-line-height: var(--hop-body-sm-line-height);
2838
- --hop-Popover-color: var(--hop-neutral-text);
2839
- --hop-Popover-title-font-family: var(--hop-body-sm-font-family);
2840
- --hop-Popover-title-font-weight: var(--hop-body-sm-semibold-font-weight);
2841
- --hop-Popover-content-font-size: var(--hop-body-sm-font-size);
2842
- --hop-Popover-content-line-height: var(--hop-body-sm-line-height);
2843
- --hop-Popover-content-color: var(--hop-neutral-text-weak);
2844
- --hop-Popover-footer-font-size: var(--hop-body-sm-font-size);
2845
- --hop-Popover-footer-line-height: var(--hop-body-sm-line-height);
2846
- --hop-Popover-footer-link-color: var(--hop-primary-text);
2847
- --hop-Popover-border: 0.0625rem solid var(--hop-neutral-border-weak);
2848
- --hop-Popover-border-radius: var(--hop-shape-rounded-md);
2849
- --hop-Popover-box-shadow: var(--hop-elevation-lifted);
2850
- --hop-Popover-max-inline-width: calc(100% - var(--hop-space-inline-md));
2851
- --font-family: var(--hop-Popover-font-family);
2852
- --font-size: var(--hop-Popover-font-size);
2853
- --font-weight: var(--hop-Popover-font-weight);
2854
- --line-height: var(--hop-Popover-line-height);
2855
- --width: var(--hop-Popover-max-inline-width);
2856
- display: grid;
2857
- grid-template-areas: "header header" "content content" "footer action";
2858
- grid-template-columns: repeat(2, auto);
2859
- column-gap: var(--hop-space-inset-sm);
2860
- box-sizing: border-box;
2861
- inline-size: var(--width);
2862
- max-inline-size: var(--width);
2863
- padding: var(--hop-space-inset-md);
2864
- background-color: var(--hop-Popover-background);
2865
- border: var(--hop-Popover-border);
2866
- border-radius: var(--hop-Popover-border-radius);
2867
- box-shadow: var(--hop-Popover-box-shadow);
2868
- @media (width >= 40rem) {
2869
- --width: 25rem;
2870
- }
1333
+ .EmbeddedButton-module__hop-EmbeddedButton--option6___VaTPy[data-pressed] {
1334
+ --effect-background-color: var(--hop-EmbeddedButton-option6-effect-background-color-pressed);
1335
+ --color: var(--hop-EmbeddedButton-option6-color-pressed);
2871
1336
  }
2872
- .Popover-module__hop-Popover__title___ZwhJ9 {
2873
- grid-area: header;
2874
- color: var(--hop-Popover-color);
1337
+ .EmbeddedButton-module__hop-EmbeddedButton--option6___VaTPy[data-disabled] {
1338
+ --effect-background-color: var(--hop-EmbeddedButton-option6-effect-background-color-disabled);
1339
+ --color: var(--hop-EmbeddedButton-option6-color-disabled);
2875
1340
  }
2876
- .Popover-module__hop-Popover__actions___YGimS,
2877
- .Popover-module__hop-Popover__action___G3Beb {
2878
- grid-area: action;
2879
- justify-self: end;
2880
- margin-block-start: var(--hop-space-stack-sm);
2881
- }
2882
- .Popover-module__hop-Popover__content___Agt74 {
2883
- --font-size: var(--hop-Popover-content-font-size);
2884
- --line-height: var(--hop-Popover-content-line-height);
2885
- grid-area: content;
2886
- margin-block: var(--hop-space-stack-sm) 0;
2887
- margin-inline: 0;
2888
- padding: 0;
2889
- color: var(--hop-Popover-content-color);
2890
- }
2891
- .Popover-module__hop-Popover__footer___S49O3 {
2892
- --font-size: var(--hop-Popover-footer-font-size);
2893
- --line-height: var(--hop-Popover-footer-line-height);
2894
- grid-area: footer;
2895
- place-self: center start;
2896
- margin-block-start: var(--hop-space-stack-sm);
2897
- color: var(--hop-Popover-color);
2898
- }
2899
-
2900
- /* css-module:/home/runner/work/wl-hopper/wl-hopper/packages/components/src/switch/src/Switch.module.css/#css-module-data */
2901
- .Switch-module__hop-Switch___O8KNx {
2902
- --hop-Switch-border-size: 0.0625rem;
2903
- --hop-Switch-border-color: var(--hop-neutral-border);
2904
- --hop-Switch-border-radius: var(--hop-shape-rounded-lg);
2905
- --hop-Switch-background-color: var(--hop-neutral-surface);
2906
- --hop-Switch-thumb-color: var(--hop-neutral-icon);
2907
- --hop-Switch-text-color: var(--hop-neutral-text);
2908
- --hop-Switch-border-color-hover: var(--hop-neutral-border-hover);
2909
- --hop-Switch-background-color-hover: var(--hop-neutral-surface-hover);
2910
- --hop-Switch-thumb-color-hover: var(--hop-neutral-icon-hover);
2911
- --hop-Switch-text-color-hover: var(--hop-neutral-text-hover);
2912
- --hop-Switch-border-color-pressed: var(--hop-neutral-border-press);
2913
- --hop-Switch-background-color-pressed: var(--hop-neutral-surface-press);
2914
- --hop-Switch-thumb-color-pressed: var(--hop-neutral-icon-press);
2915
- --hop-Switch-text-color-pressed: var(--hop-neutral-text-press);
2916
- --hop-Switch-border-color-focus: var(--hop-neutral-border-hover);
2917
- --hop-Switch-background-color-focus: var(--hop-neutral-surface-hover);
2918
- --hop-Switch-thumb-color-focus: var(--hop-neutral-icon-hover);
2919
- --hop-Switch-focus-ring-color: var(--hop-primary-border-focus);
2920
- --hop-Switch-text-color-focus: var(--hop-neutral-text);
2921
- --hop-Switch-border-color-selected: var(--hop-neutral-border-selected);
2922
- --hop-Switch-background-color-selected: var(--hop-neutral-surface-selected);
2923
- --hop-Switch-thumb-color-selected: var(--hop-neutral-icon-selected);
2924
- --hop-Switch-text-color-selected: var(--hop-neutral-text);
2925
- --hop-Switch-border-color-disabled: var(--hop-neutral-border-disabled);
2926
- --hop-Switch-background-color-disabled: var(--hop-neutral-surface-disabled);
2927
- --hop-Switch-thumb-color-disabled: var(--hop-neutral-icon-disabled);
2928
- --hop-Switch-text-color-disabled: var(--hop-neutral-text-disabled);
2929
- --hop-Switch-inline-size-md: 3rem;
2930
- --hop-Switch-block-size-md: 1.5rem;
2931
- --hop-Switch-thumb-size-md: 1rem;
2932
- --hop-Switch-inset-inline-start-md: var(--hop-space-inset-xs);
2933
- --hop-Switch-text-top-offset-md: calc((var(--block-size) - (var(--hop-body-md-line-height) * var(--hop-body-md-font-size))) / 2);
2934
- --hop-Switch-inline-size-sm: 2rem;
2935
- --hop-Switch-block-size-sm: 1rem;
2936
- --hop-Switch-thumb-size-sm: 0.75rem;
2937
- --hop-Switch-inset-inline-start-sm: calc(var(--hop-space-inset-xs) / 2);
2938
- --hop-Switch-text-top-offset-sm: calc((var(--block-size) - (var(--hop-body-sm-line-height) * var(--hop-body-sm-font-size))) / 2);
2939
- --border-size: var(--hop-Switch-border-size);
2940
- --border-color: var(--hop-Switch-border-color);
2941
- --border-radius: var(--hop-Switch-border-radius);
2942
- --background-color: var(--hop-Switch-background-color);
2943
- --column-gap: var(--hop-space-inline-sm);
2944
- --thumb-color: var(--hop-Switch-thumb-color);
2945
- --thumb-transform: translate(0, -50%);
2946
- --outline: none;
2947
- --cursor: pointer;
2948
- --text-color: var(--hop-Switch-text-color);
2949
- cursor: var(--cursor);
2950
- display: inline-flex;
2951
- column-gap: var(--column-gap);
2952
- align-items: flex-start;
2953
- justify-content: flex-start;
2954
- box-sizing: border-box;
2955
- inline-size: max-content;
2956
- max-inline-size: 100%;
2957
- }
2958
- .Switch-module__hop-Switch--sm___S19Re {
2959
- --inline-size: var(--hop-Switch-inline-size-sm);
2960
- --block-size: var(--hop-Switch-block-size-sm);
2961
- --thumb-size: var(--hop-Switch-thumb-size-sm);
2962
- --inset-inline-start: var(--hop-Switch-inset-inline-start-sm);
2963
- --text-top-offset: var(--hop-Switch-text-top-offset-sm);
2964
- }
2965
- .Switch-module__hop-Switch--md___zJnb3 {
2966
- --inline-size: var(--hop-Switch-inline-size-md);
2967
- --block-size: var(--hop-Switch-block-size-md);
2968
- --thumb-size: var(--hop-Switch-thumb-size-md);
2969
- --inset-inline-start: var(--hop-Switch-inset-inline-start-md);
2970
- --text-top-offset: var(--hop-Switch-text-top-offset-md);
2971
- }
2972
- .Switch-module__hop-Switch___O8KNx[data-hovered] {
2973
- --border-color: var(--hop-Switch-border-color-hover);
2974
- --background-color: var(--hop-Switch-background-color-hover);
2975
- --thumb-color: var(--hop-Switch-thumb-color-hover);
2976
- --text-color: var(--hop-Switch-text-color-hover);
2977
- }
2978
- .Switch-module__hop-Switch___O8KNx[data-pressed],
2979
- .Switch-module__hop-Switch___O8KNx[data-pressed][data-focus-visible] {
2980
- --border-color: var(--hop-Switch-border-color-pressed);
2981
- --background-color: var(--hop-Switch-background-color-pressed);
2982
- --thumb-color: var(--hop-Switch-thumb-color-pressed);
2983
- --text-color: var(--hop-Switch-text-color-pressed);
2984
- }
2985
- .Switch-module__hop-Switch___O8KNx[data-focus-visible] {
2986
- --border-color: var(--hop-Switch-border-color-focus);
2987
- --background-color: var(--hop-Switch-background-color-focus);
2988
- --thumb-color: var(--hop-Switch-thumb-color-focus);
2989
- --outline: 0.125rem solid var(--hop-Switch-focus-ring-color);
2990
- --text-color: var(--hop-Switch-text-color-focus);
2991
- }
2992
- .Switch-module__hop-Switch___O8KNx[data-selected],
2993
- .Switch-module__hop-Switch___O8KNx[data-selected][data-pressed] {
2994
- --border-color: var(--hop-Switch-border-color-selected);
2995
- --background-color: var(--hop-Switch-background-color-selected);
2996
- --thumb-color: var(--hop-Switch-thumb-color-selected);
2997
- --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%);
2998
- --text-color: var(--hop-Switch-text-color-selected);
2999
- }
3000
- .Switch-module__hop-Switch___O8KNx[data-disabled] {
3001
- --border-color: var(--hop-Switch-border-color-disabled);
3002
- --background-color: var(--hop-Switch-background-color-disabled);
3003
- --thumb-color: var(--hop-Switch-thumb-color-disabled);
3004
- --text-color: var(--hop-Switch-text-color-disabled);
3005
- --cursor: not-allowed;
3006
- }
3007
- .Switch-module__hop-Switch__indicator___1aOFY {
1341
+ .EmbeddedButton-module__hop-EmbeddedButton__icon___YTaCR {
3008
1342
  position: relative;
3009
- flex: 0 0 auto;
3010
- box-sizing: border-box;
3011
- inline-size: var(--inline-size, var(--hop-Switch-inline-size-md));
3012
- block-size: var(--block-size, var(--hop-Switch-block-size-md));
3013
- background-color: var(--background-color);
3014
- border: var(--border-size) solid var(--border-color);
3015
- border-radius: var(--border-radius);
3016
- outline: var(--outline);
3017
- outline-offset: 0.125rem;
3018
- transition: background var(--hop-easing-duration-2), border-color var(--hop-easing-duration-2);
3019
- }
3020
- .Switch-module__hop-Switch__indicator___1aOFY::before {
3021
- content: "";
3022
- position: absolute;
3023
- inset-block-start: 50%;
3024
- inset-inline-start: var(--inset-inline-start);
3025
- transform: var(--thumb-transform);
3026
- flex: 0 0 auto;
3027
- order: 1;
3028
- box-sizing: border-box;
3029
- inline-size: var(--thumb-size);
3030
- block-size: var(--thumb-size);
3031
- background-color: var(--thumb-color);
3032
- border-radius: var(--hop-shape-circle);
3033
- transition: transform var(--hop-easing-duration-2), background var(--hop-easing-duration-2);
3034
- }
3035
- .Switch-module__hop-Switch__text___pxT8d {
3036
- flex: 0 1 auto;
3037
- order: 2;
3038
- min-inline-size: 0;
3039
- margin-block-start: var(--text-top-offset, var(--hop-Switch-text-top-offset-md));
3040
- color: var(--text-color);
3041
- }
3042
- .Switch-module__hop-Switch__icon-list___fvPJj,
3043
- .Switch-module__hop-Switch__icon___xoa-8 {
3044
- order: 3;
3045
- }
3046
-
3047
- /* css-module:/home/runner/work/wl-hopper/wl-hopper/packages/components/src/switch/src/SwitchField.module.css/#css-module-data */
3048
- .SwitchField-module__hop-SwitchField___jJcKw {
3049
- --hop-SwitchField-description-color: var(--hop-neutral-text-weak);
3050
- --hop-SwitchField-description-color-disabled: var(--hop-neutral-text-disabled);
3051
- --hop-SwitchField-sm-row-gap: var(--hop-space-stack-xs);
3052
- --hop-SwitchField-switch-sm-inline-size: 2rem;
3053
- --hop-SwitchField-description-sm-margin-inline-start: calc(var(--hop-SwitchField-switch-sm-inline-size) + var(--hop-space-inline-sm));
3054
- --hop-SwitchField-md-row-gap: var(--hop-space-stack-xs);
3055
- --hop-SwitchField-switch-md-inline-size: 3rem;
3056
- --hop-SwitchField-description-md-margin-inline-start: calc(var(--hop-SwitchField-switch-md-inline-size) + var(--hop-space-inline-sm));
3057
- --description-color: var(--hop-SwitchField-description-color);
3058
- display: flex;
3059
- flex-direction: column;
3060
- row-gap: var(--row-gap, var(--hop-space-stack-sm));
3061
- align-items: flex-start;
3062
- justify-content: flex-start;
3063
- box-sizing: border-box;
3064
- inline-size: max-content;
3065
- max-inline-size: 100%;
3066
- }
3067
- .SwitchField-module__hop-SwitchField___jJcKw[data-disabled] {
3068
- --description-color: var(--hop-SwitchField-description-color-disabled);
3069
- }
3070
- .SwitchField-module__hop-SwitchField--sm___GA-Gy {
3071
- --row-gap: var(--hop-SwitchField-sm-row-gap);
3072
- --description-margin-inline-start: var(--hop-SwitchField-description-sm-margin-inline-start);
3073
- }
3074
- .SwitchField-module__hop-SwitchField--md___vj2y9 {
3075
- --row-gap: var(--hop-SwitchField-md-row-gap);
3076
- --description-margin-inline-start: var(--hop-SwitchField-description-md-margin-inline-start);
3077
- }
3078
- .SwitchField-module__hop-SwitchField__description___22sTZ {
3079
- order: 2;
3080
- margin-inline-start: var(--description-margin-inline-start, var(--hop-SwitchField-description-md-margin-inline-start));
3081
- color: var(--description-color);
3082
- }
3083
- .SwitchField-module__hop-SwitchField__switch___qIcZO {
3084
- order: 1;
3085
1343
  }
3086
1344
 
3087
1345
  /* css-module:/home/runner/work/wl-hopper/wl-hopper/packages/components/src/tag/src/Tag.module.css/#css-module-data */
3088
- .Tag-module__hop-Tag___k---H {
1346
+ .Tag-module__hop-Tag___RskTT {
3089
1347
  --hop-Tag-border-size: 0.0625rem;
3090
1348
  --hop-Tag-border-radius: var(--hop-shape-pill);
3091
- --hop-Tag-border-color: var(--hop-neutral-border);
3092
- --hop-Tag-background-color: var(--hop-neutral-surface-weak);
3093
- --hop-Tag-text-color: var(--hop-neutral-text);
1349
+ --hop-Tag-sm-block-size: 1.25rem;
1350
+ --hop-Tag-sm-padding-inline: var(--hop-space-inset-sm);
1351
+ --hop-Tag-sm-column-gap: var(--hop-space-inline-xs);
1352
+ --hop-Tag-sm-icon-margin-inline-start: 0;
1353
+ --hop-Tag-sm-element-margin-inline-end-sm: calc(-1 * var(--hop-space-inline-xs));
1354
+ --hop-Tag-sm-element-margin-inline-end-zero: calc(-1 * var(--hop-Tag-sm-padding-inline));
1355
+ --hop-Tag-sm-badge-margin-inline-end: var(--hop-Tag-sm-element-margin-inline-end-zero);
1356
+ --hop-Tag-sm-avatar-margin-inline-start: calc(var(--hop-Tag-sm-element-margin-inline-end-sm) - (var(--hop-space-inline-xs) / 2));
1357
+ --hop-Tag-sm-clear-btn-margin-inline: calc(-1 * var(--hop-Tag-sm-column-gap)) var(--hop-Tag-sm-element-margin-inline-end-zero);
1358
+ --hop-Tag-sm-spinner-margin-inline-end: var(--hop-Tag-sm-element-margin-inline-end-sm);
3094
1359
  --hop-Tag-md-block-size: 1.5rem;
3095
- --hop-Tag-md-padding-inline-start: var(--hop-space-inset-xs);
3096
- --hop-Tag-md-padding-inline-start-text-first: var(--hop-space-inset-sm);
3097
- --hop-Tag-md-padding-inline-end: var(--hop-space-inset-xs);
3098
- --hop-Tag-md-padding-inline-end-text-last: var(--hop-space-inset-sm);
1360
+ --hop-Tag-md-padding-inline: var(--hop-space-inset-sm);
3099
1361
  --hop-Tag-md-column-gap: var(--hop-space-inline-xs);
1362
+ --hop-Tag-md-icon-margin-inline-start: 0;
1363
+ --hop-Tag-md-element-margin-inline-end-sm: calc(-1 * var(--hop-space-inline-xs));
1364
+ --hop-Tag-md-element-margin-inline-end-zero: calc(-1 * var(--hop-Tag-md-padding-inline));
1365
+ --hop-Tag-md-badge-margin-inline-end: var(--hop-Tag-md-element-margin-inline-end-zero);
1366
+ --hop-Tag-md-avatar-margin-inline-start: var(--hop-Tag-md-element-margin-inline-end-sm);
1367
+ --hop-Tag-md-clear-btn-margin-inline: calc(-1 * var(--hop-Tag-md-column-gap)) var(--hop-Tag-md-element-margin-inline-end-zero);
1368
+ --hop-Tag-md-spinner-margin-inline-end: var(--hop-Tag-md-element-margin-inline-end-sm);
3100
1369
  --hop-Tag-lg-block-size: 2rem;
3101
- --hop-Tag-lg-padding-inline-start: var(--hop-space-inset-xs);
3102
- --hop-Tag-lg-padding-inline-start-text-first: var(--hop-space-inset-md);
3103
- --hop-Tag-lg-padding-inline-end: var(--hop-space-inset-xs);
3104
- --hop-Tag-lg-padding-inline-end-text-last: var(--hop-space-inset-md);
1370
+ --hop-Tag-lg-padding-inline: var(--hop-space-inset-md);
3105
1371
  --hop-Tag-lg-column-gap: var(--hop-space-inline-sm);
3106
- --hop-Tag-background-color-focus: var(--hop-neutral-surface-weak-hover);
3107
- --hop-Tag-border-color-focus: var(--hop-neutral-border-hover);
3108
- --hop-Tag-text-color-focus: var(--hop-neutral-text-hover);
1372
+ --hop-Tag-lg-icon-margin-inline-start: calc(-1 * var(--hop-space-inline-sm));
1373
+ --hop-Tag-lg-element-margin-inline-end-sm: calc(-1 * (var(--hop-Tag-lg-padding-inline) - var(--hop-space-inline-xs)));
1374
+ --hop-Tag-lg-badge-margin-inline-end: var(--hop-Tag-lg-element-margin-inline-end-sm);
1375
+ --hop-Tag-lg-avatar-margin-inline-start: var(--hop-Tag-lg-element-margin-inline-end-sm);
1376
+ --hop-Tag-lg-clear-btn-margin-inline: 0 var(--hop-Tag-lg-element-margin-inline-end-sm);
1377
+ --hop-Tag-lg-spinner-margin-inline-end: var(--hop-Tag-lg-element-margin-inline-end-sm);
1378
+ --hop-Tag-neutral-border-color: var(--hop-neutral-border);
1379
+ --hop-Tag-neutral-background-color: var(--hop-neutral-surface);
1380
+ --hop-Tag-neutral-text-color: var(--hop-neutral-text);
1381
+ --hop-Tag-subdued-border-color: var(--hop-neutral-border);
1382
+ --hop-Tag-subdued-background-color: var(--hop-neutral-surface-weak);
1383
+ --hop-Tag-subdued-text-color: var(--hop-neutral-text);
1384
+ --hop-Tag-progress-border-color: transparent;
1385
+ --hop-Tag-progress-background-color: var(--hop-status-progress-surface);
1386
+ --hop-Tag-progress-text-color: var(--hop-status-progress-text);
1387
+ --hop-Tag-positive-border-color: transparent;
1388
+ --hop-Tag-positive-background-color: var(--hop-status-positive-surface);
1389
+ --hop-Tag-positive-text-color: var(--hop-status-positive-text);
1390
+ --hop-Tag-caution-border-color: transparent;
1391
+ --hop-Tag-caution-background-color: var(--hop-status-caution-surface);
1392
+ --hop-Tag-caution-text-color: var(--hop-status-caution-text);
1393
+ --hop-Tag-negative-border-color: transparent;
1394
+ --hop-Tag-negative-background-color: var(--hop-status-negative-surface);
1395
+ --hop-Tag-negative-text-color: var(--hop-status-negative-text);
1396
+ --hop-Tag-option1-border-color: transparent;
1397
+ --hop-Tag-option1-background-color: var(--hop-status-option1-surface);
1398
+ --hop-Tag-option1-text-color: var(--hop-status-option1-text);
1399
+ --hop-Tag-option2-border-color: transparent;
1400
+ --hop-Tag-option2-background-color: var(--hop-status-option2-surface);
1401
+ --hop-Tag-option2-text-color: var(--hop-status-option2-text);
1402
+ --hop-Tag-option3-border-color: transparent;
1403
+ --hop-Tag-option3-background-color: var(--hop-status-option3-surface);
1404
+ --hop-Tag-option3-text-color: var(--hop-status-option3-text);
1405
+ --hop-Tag-option4-border-color: transparent;
1406
+ --hop-Tag-option4-background-color: var(--hop-status-option4-surface);
1407
+ --hop-Tag-option4-text-color: var(--hop-status-option4-text);
1408
+ --hop-Tag-option5-border-color: transparent;
1409
+ --hop-Tag-option5-background-color: var(--hop-status-option5-surface);
1410
+ --hop-Tag-option5-text-color: var(--hop-status-option5-text);
1411
+ --hop-Tag-option6-border-color: transparent;
1412
+ --hop-Tag-option6-background-color: var(--hop-status-option6-surface);
1413
+ --hop-Tag-option6-text-color: var(--hop-status-option6-text);
3109
1414
  --hop-Tag-focus-ring-color: var(--hop-primary-border-focus);
3110
- --hop-Tag-background-color-hover: var(--hop-neutral-surface-weak-hover);
3111
- --hop-Tag-border-color-hover: var(--hop-neutral-border-hover);
3112
- --hop-Tag-text-color-hover: var(--hop-neutral-text-hover);
3113
- --hop-Tag-background-color-selected: var(--hop-neutral-surface-weak-selected);
1415
+ --hop-Tag-neutral-background-color-focus: var(--hop-neutral-surface-hover);
1416
+ --hop-Tag-neutral-border-color-focus: var(--hop-neutral-border-hover);
1417
+ --hop-Tag-neutral-text-color-focus: var(--hop-neutral-text-hover);
1418
+ --hop-Tag-subdued-background-color-focus: var(--hop-neutral-surface-weak-hover);
1419
+ --hop-Tag-subdued-border-color-focus: var(--hop-neutral-border-hover);
1420
+ --hop-Tag-subdued-text-color-focus: var(--hop-neutral-text-hover);
1421
+ --hop-Tag-progress-background-color-focus: var(--hop-status-progress-surface-hover);
1422
+ --hop-Tag-progress-border-color-focus: transparent;
1423
+ --hop-Tag-progress-text-color-focus: var(--hop-status-progress-text-hover);
1424
+ --hop-Tag-positive-background-color-focus: var(--hop-status-positive-surface-hover);
1425
+ --hop-Tag-positive-border-color-focus: transparent;
1426
+ --hop-Tag-positive-text-color-focus: var(--hop-status-positive-text-hover);
1427
+ --hop-Tag-caution-background-color-focus: var(--hop-status-caution-surface-hover);
1428
+ --hop-Tag-caution-border-color-focus: transparent;
1429
+ --hop-Tag-caution-text-color-focus: var(--hop-status-caution-text-hover);
1430
+ --hop-Tag-negative-background-color-focus: var(--hop-status-negative-surface-hover);
1431
+ --hop-Tag-negative-border-color-focus: transparent;
1432
+ --hop-Tag-negative-text-color-focus: var(--hop-status-negative-text-hover);
1433
+ --hop-Tag-option1-background-color-focus: var(--hop-status-option1-surface-hover);
1434
+ --hop-Tag-option1-border-color-focus: transparent;
1435
+ --hop-Tag-option1-text-color-focus: var(--hop-status-option1-text-hover);
1436
+ --hop-Tag-option2-background-color-focus: var(--hop-status-option2-surface-hover);
1437
+ --hop-Tag-option2-border-color-focus: transparent;
1438
+ --hop-Tag-option2-text-color-focus: var(--hop-status-option2-text-hover);
1439
+ --hop-Tag-option3-background-color-focus: var(--hop-status-option3-surface-hover);
1440
+ --hop-Tag-option3-border-color-focus: transparent;
1441
+ --hop-Tag-option3-text-color-focus: var(--hop-status-option3-text-hover);
1442
+ --hop-Tag-option4-background-color-focus: var(--hop-status-option4-surface-hover);
1443
+ --hop-Tag-option4-border-color-focus: transparent;
1444
+ --hop-Tag-option4-text-color-focus: var(--hop-status-option4-text-hover);
1445
+ --hop-Tag-option5-background-color-focus: var(--hop-status-option5-surface-hover);
1446
+ --hop-Tag-option5-border-color-focus: transparent;
1447
+ --hop-Tag-option5-text-color-focus: var(--hop-status-option5-text-hover);
1448
+ --hop-Tag-option6-background-color-focus: var(--hop-status-option6-surface-hover);
1449
+ --hop-Tag-option6-border-color-focus: transparent;
1450
+ --hop-Tag-option6-text-color-focus: var(--hop-status-option6-text-hover);
1451
+ --hop-Tag-neutral-background-color-hover: var(--hop-neutral-surface-hover);
1452
+ --hop-Tag-neutral-border-color-hover: var(--hop-neutral-border-hover);
1453
+ --hop-Tag-neutral-text-color-hover: var(--hop-neutral-text-hover);
1454
+ --hop-Tag-subdued-background-color-hover: var(--hop-neutral-surface-weak-hover);
1455
+ --hop-Tag-subdued-border-color-hover: var(--hop-neutral-border-hover);
1456
+ --hop-Tag-subdued-text-color-hover: var(--hop-neutral-text-hover);
1457
+ --hop-Tag-progress-background-color-hover: var(--hop-status-progress-surface-hover);
1458
+ --hop-Tag-progress-border-color-hover: transparent;
1459
+ --hop-Tag-progress-text-color-hover: var(--hop-status-progress-text-hover);
1460
+ --hop-Tag-positive-background-color-hover: var(--hop-status-positive-surface-hover);
1461
+ --hop-Tag-positive-border-color-hover: transparent;
1462
+ --hop-Tag-positive-text-color-hover: var(--hop-status-positive-text-hover);
1463
+ --hop-Tag-caution-background-color-hover: var(--hop-status-caution-surface-hover);
1464
+ --hop-Tag-caution-border-color-hover: transparent;
1465
+ --hop-Tag-caution-text-color-hover: var(--hop-status-caution-text-hover);
1466
+ --hop-Tag-negative-background-color-hover: var(--hop-status-negative-surface-hover);
1467
+ --hop-Tag-negative-border-color-hover: transparent;
1468
+ --hop-Tag-negative-text-color-hover: var(--hop-status-negative-text-hover);
1469
+ --hop-Tag-option1-background-color-hover: var(--hop-status-option1-surface-hover);
1470
+ --hop-Tag-option1-border-color-hover: transparent;
1471
+ --hop-Tag-option1-text-color-hover: var(--hop-status-option1-text-hover);
1472
+ --hop-Tag-option2-background-color-hover: var(--hop-status-option2-surface-hover);
1473
+ --hop-Tag-option2-border-color-hover: transparent;
1474
+ --hop-Tag-option2-text-color-hover: var(--hop-status-option2-text-hover);
1475
+ --hop-Tag-option3-background-color-hover: var(--hop-status-option3-surface-hover);
1476
+ --hop-Tag-option3-border-color-hover: transparent;
1477
+ --hop-Tag-option3-text-color-hover: var(--hop-status-option3-text-hover);
1478
+ --hop-Tag-option4-background-color-hover: var(--hop-status-option4-surface-hover);
1479
+ --hop-Tag-option4-border-color-hover: transparent;
1480
+ --hop-Tag-option4-text-color-hover: var(--hop-status-option4-text-hover);
1481
+ --hop-Tag-option5-background-color-hover: var(--hop-status-option5-surface-hover);
1482
+ --hop-Tag-option5-border-color-hover: transparent;
1483
+ --hop-Tag-option5-text-color-hover: var(--hop-status-option5-text-hover);
1484
+ --hop-Tag-option6-background-color-hover: var(--hop-status-option6-surface-hover);
1485
+ --hop-Tag-option6-border-color-hover: transparent;
1486
+ --hop-Tag-option6-text-color-hover: var(--hop-status-option6-text-hover);
1487
+ --hop-Tag-background-color-selected: var(--hop-neutral-surface-selected);
3114
1488
  --hop-Tag-border-color-selected: var(--hop-neutral-border-selected);
3115
- --hop-Tag-text-color-selected: var(--hop-neutral-text);
3116
- --hop-Tag-background-color-press: var(--hop-neutral-surface-weak-press);
3117
- --hop-Tag-border-color-press: var(--hop-neutral-border-press);
3118
- --hop-Tag-text-color-press: var(--hop-neutral-text-press);
1489
+ --hop-Tag-text-color-selected: var(--hop-neutral-text-selected);
1490
+ --hop-Tag-neutral-background-color-press: var(--hop-neutral-surface-press);
1491
+ --hop-Tag-neutral-border-color-press: var(--hop-neutral-border-press);
1492
+ --hop-Tag-neutral-text-color-press: var(--hop-neutral-text-press);
1493
+ --hop-Tag-subdued-background-color-press: var(--hop-neutral-surface-weak-press);
1494
+ --hop-Tag-subdued-border-color-press: var(--hop-neutral-border-press);
1495
+ --hop-Tag-subdued-text-color-press: var(--hop-neutral-text-press);
1496
+ --hop-Tag-progress-background-color-press: var(--hop-status-progress-surface-press);
1497
+ --hop-Tag-progress-border-color-press: transparent;
1498
+ --hop-Tag-progress-text-color-press: var(--hop-status-progress-text-press);
1499
+ --hop-Tag-positive-background-color-press: var(--hop-status-positive-surface-press);
1500
+ --hop-Tag-positive-border-color-press: transparent;
1501
+ --hop-Tag-positive-text-color-press: var(--hop-status-positive-text-press);
1502
+ --hop-Tag-caution-background-color-press: var(--hop-status-caution-surface-press);
1503
+ --hop-Tag-caution-border-color-press: transparent;
1504
+ --hop-Tag-caution-text-color-press: var(--hop-status-caution-text-press);
1505
+ --hop-Tag-negative-background-color-press: var(--hop-status-negative-surface-press);
1506
+ --hop-Tag-negative-border-color-press: transparent;
1507
+ --hop-Tag-negative-text-color-press: var(--hop-status-negative-text-press);
1508
+ --hop-Tag-option1-background-color-press: var(--hop-status-option1-surface-press);
1509
+ --hop-Tag-option1-border-color-press: transparent;
1510
+ --hop-Tag-option1-text-color-press: var(--hop-status-option1-text-press);
1511
+ --hop-Tag-option2-background-color-press: var(--hop-status-option2-surface-press);
1512
+ --hop-Tag-option2-border-color-press: transparent;
1513
+ --hop-Tag-option2-text-color-press: var(--hop-status-option2-text-press);
1514
+ --hop-Tag-option3-background-color-press: var(--hop-status-option3-surface-press);
1515
+ --hop-Tag-option3-border-color-press: transparent;
1516
+ --hop-Tag-option3-text-color-press: var(--hop-status-option3-text-press);
1517
+ --hop-Tag-option4-background-color-press: var(--hop-status-option4-surface-press);
1518
+ --hop-Tag-option4-border-color-press: transparent;
1519
+ --hop-Tag-option4-text-color-press: var(--hop-status-option4-text-press);
1520
+ --hop-Tag-option5-background-color-press: var(--hop-status-option5-surface-press);
1521
+ --hop-Tag-option5-border-color-press: transparent;
1522
+ --hop-Tag-option5-text-color-press: var(--hop-status-option5-text-press);
1523
+ --hop-Tag-option6-background-color-press: var(--hop-status-option6-surface-press);
1524
+ --hop-Tag-option6-border-color-press: transparent;
1525
+ --hop-Tag-option6-text-color-press: var(--hop-status-option6-text-press);
3119
1526
  --hop-Tag-border-color-invalid: var(--hop-danger-border-strong);
3120
- --hop-Tag-background-color-disabled: var(--hop-neutral-surface-disabled);
3121
- --hop-Tag-border-color-disabled: var(--hop-neutral-border-disabled);
3122
- --hop-Tag-text-color-disabled: var(--hop-neutral-text-disabled);
1527
+ --hop-Tag-neutral-background-color-disabled: var(--hop-neutral-surface-disabled);
1528
+ --hop-Tag-neutral-border-color-disabled: var(--hop-neutral-border-weak);
1529
+ --hop-Tag-neutral-text-color-disabled: var(--hop-neutral-text-disabled);
1530
+ --hop-Tag-subdued-background-color-disabled: var(--hop-neutral-surface-disabled);
1531
+ --hop-Tag-subdued-border-color-disabled: var(--hop-neutral-border-weak);
1532
+ --hop-Tag-subdued-text-color-disabled: var(--hop-neutral-text-disabled);
1533
+ --hop-Tag-progress-background-color-disabled: var(--hop-status-progress-surface-disabled);
1534
+ --hop-Tag-progress-border-color-disabled: transparent;
1535
+ --hop-Tag-progress-text-color-disabled: var(--hop-status-progress-text-disabled);
1536
+ --hop-Tag-positive-background-color-disabled: var(--hop-status-positive-surface-disabled);
1537
+ --hop-Tag-positive-border-color-disabled: transparent;
1538
+ --hop-Tag-positive-text-color-disabled: var(--hop-status-positive-text-disabled);
1539
+ --hop-Tag-caution-background-color-disabled: var(--hop-status-caution-surface-disabled);
1540
+ --hop-Tag-caution-border-color-disabled: transparent;
1541
+ --hop-Tag-caution-text-color-disabled: var(--hop-status-caution-text-disabled);
1542
+ --hop-Tag-negative-background-color-disabled: var(--hop-status-negative-surface-disabled);
1543
+ --hop-Tag-negative-border-color-disabled: transparent;
1544
+ --hop-Tag-negative-text-color-disabled: var(--hop-status-negative-text-disabled);
1545
+ --hop-Tag-option1-background-color-disabled: var(--hop-status-option1-surface-disabled);
1546
+ --hop-Tag-option1-border-color-disabled: transparent;
1547
+ --hop-Tag-option1-text-color-disabled: var(--hop-status-option1-text-disabled);
1548
+ --hop-Tag-option2-background-color-disabled: var(--hop-status-option2-surface-disabled);
1549
+ --hop-Tag-option2-border-color-disabled: transparent;
1550
+ --hop-Tag-option2-text-color-disabled: var(--hop-status-option2-text-disabled);
1551
+ --hop-Tag-option3-background-color-disabled: var(--hop-status-option3-surface-disabled);
1552
+ --hop-Tag-option3-border-color-disabled: transparent;
1553
+ --hop-Tag-option3-text-color-disabled: var(--hop-status-option3-text-disabled);
1554
+ --hop-Tag-option4-background-color-disabled: var(--hop-status-option4-surface-disabled);
1555
+ --hop-Tag-option4-border-color-disabled: transparent;
1556
+ --hop-Tag-option4-text-color-disabled: var(--hop-status-option4-text-disabled);
1557
+ --hop-Tag-option5-background-color-disabled: var(--hop-status-option5-surface-disabled);
1558
+ --hop-Tag-option5-border-color-disabled: transparent;
1559
+ --hop-Tag-option5-text-color-disabled: var(--hop-status-option5-text-disabled);
1560
+ --hop-Tag-option6-background-color-disabled: var(--hop-status-option6-surface-disabled);
1561
+ --hop-Tag-option6-border-color-disabled: transparent;
1562
+ --hop-Tag-option6-text-color-disabled: var(--hop-status-option6-text-disabled);
3123
1563
  --border-radius: var(--hop-Tag-border-radius);
3124
1564
  --border-size: var(--hop-Tag-border-size);
3125
- --border-color: var(--hop-Tag-border-color);
3126
- --background-color: var(--hop-Tag-background-color);
3127
- --text-color: var(--hop-Tag-text-color);
3128
- --badge-secondary-inline-margin-start: calc(-1 * var(--column-gap));
1565
+ --badge-secondary-margin-inline-start: calc(-1 * var(--column-gap));
3129
1566
  --focus-ring-color: var(--hop-Tag-focus-ring-color);
3130
1567
  overflow: hidden;
3131
1568
  display: inline-flex;
@@ -3136,7 +1573,7 @@
3136
1573
  inline-size: max-content;
3137
1574
  max-inline-size: 100%;
3138
1575
  block-size: var(--block-size);
3139
- padding-inline: var(--padding-inline-start) var(--padding-inline-end);
1576
+ padding-inline: var(--padding-inline);
3140
1577
  color: var(--text-color);
3141
1578
  white-space: nowrap;
3142
1579
  background-color: var(--background-color);
@@ -3145,104 +1582,475 @@
3145
1582
  outline: none;
3146
1583
  outline-offset: 0.125rem;
3147
1584
  }
3148
- .Tag-module__hop-Tag--md___wMJTU {
1585
+ .Tag-module__hop-Tag--sm___dT9Zg {
1586
+ --block-size: var(--hop-Tag-sm-block-size);
1587
+ --padding-inline: var(--hop-Tag-sm-padding-inline);
1588
+ --column-gap: var(--hop-Tag-sm-column-gap);
1589
+ --clear-btn-margin-inline: var(--hop-Tag-sm-clear-btn-margin-inline);
1590
+ --avatar-margin-inline-start: var(--hop-Tag-sm-avatar-margin-inline-start);
1591
+ --spinner-margin-inline-end: var(--hop-Tag-sm-spinner-margin-inline-end);
1592
+ }
1593
+ .Tag-module__hop-Tag--sm___dT9Zg:not(:has(.Tag-module__hop-Tag__remove-btn___gqTvd, .Tag-module__hop-Tag__Spinner___itlq9)) {
1594
+ --badge-margin-inline-end: var(--hop-Tag-sm-badge-margin-inline-end);
1595
+ }
1596
+ .Tag-module__hop-Tag--sm___dT9Zg:not(:has(.Tag-module__hop-Tag__avatar___k-w6U)) {
1597
+ --icon-margin-inline-start: var(--hop-Tag-sm-icon-margin-inline-start);
1598
+ }
1599
+ .Tag-module__hop-Tag--md___EFXGm {
3149
1600
  --block-size: var(--hop-Tag-md-block-size);
3150
- --padding-inline-start: var(--hop-Tag-md-padding-inline-start);
3151
- --padding-inline-end: var(--hop-Tag-md-padding-inline-end);
1601
+ --padding-inline: var(--hop-Tag-md-padding-inline);
3152
1602
  --column-gap: var(--hop-Tag-md-column-gap);
3153
- --clear-btn-margin-inline: calc(-1 * var(--hop-space-inline-xs));
3154
- }
3155
- .Tag-module__hop-Tag--md___wMJTU:not(:has(.Tag-module__hop-Tag__icon___DvajY, .Tag-module__hop-Tag__icon-list___x4CpF)) {
3156
- --padding-inline-start: var(--hop-Tag-md-padding-inline-start-text-first);
1603
+ --clear-btn-margin-inline: var(--hop-Tag-md-clear-btn-margin-inline);
1604
+ --avatar-margin-inline-start: var(--hop-Tag-md-avatar-margin-inline-start);
1605
+ --spinner-margin-inline-end: var(--hop-Tag-md-spinner-margin-inline-end);
3157
1606
  }
3158
- .Tag-module__hop-Tag--md___wMJTU:not(:has(.Tag-module__hop-Tag__badge___3b9Gq, .Tag-module__hop-Tag__remove-btn___KIdVL, .Tag-module__hop-Tag__Spinner___BOJ61)) {
3159
- --padding-inline-end: var(--hop-Tag-md-padding-inline-end-text-last);
1607
+ .Tag-module__hop-Tag--md___EFXGm:not(:has(.Tag-module__hop-Tag__remove-btn___gqTvd, .Tag-module__hop-Tag__Spinner___itlq9)) {
1608
+ --badge-margin-inline-end: var(--hop-Tag-md-badge-margin-inline-end);
3160
1609
  }
3161
- .Tag-module__hop-Tag--md___wMJTU:not(:has(.Tag-module__hop-Tag__remove-btn___KIdVL, .Tag-module__hop-Tag__Spinner___BOJ61)) {
3162
- --badge-margin-inline-end: calc(-1 * var(--padding-inline-end));
1610
+ .Tag-module__hop-Tag--md___EFXGm:not(:has(.Tag-module__hop-Tag__avatar___k-w6U)) {
1611
+ --icon-margin-inline-start: var(--hop-Tag-md-icon-margin-inline-start);
3163
1612
  }
3164
- .Tag-module__hop-Tag--lg___VTvaj {
1613
+ .Tag-module__hop-Tag--lg___-7S-k {
3165
1614
  --block-size: var(--hop-Tag-lg-block-size);
3166
- --padding-inline-start: var(--hop-Tag-lg-padding-inline-start);
3167
- --padding-inline-end: var(--hop-Tag-lg-padding-inline-end);
1615
+ --padding-inline: var(--hop-Tag-lg-padding-inline);
3168
1616
  --column-gap: var(--hop-Tag-lg-column-gap);
3169
- --clear-btn-margin-inline: 0;
3170
- --badge-margin-inline-end: 0;
3171
- }
3172
- .Tag-module__hop-Tag--lg___VTvaj:not(:has(.Tag-module__hop-Tag__icon___DvajY, .Tag-module__hop-Tag__icon-list___x4CpF)) {
3173
- --padding-inline-start: var(--hop-Tag-lg-padding-inline-start-text-first);
3174
- }
3175
- .Tag-module__hop-Tag--lg___VTvaj:not(:has(.Tag-module__hop-Tag__badge___3b9Gq, .Tag-module__hop-Tag__remove-btn___KIdVL, .Tag-module__hop-Tag__Spinner___BOJ61)) {
3176
- --padding-inline-end: var(--hop-Tag-lg-padding-inline-end-text-last);
3177
- }
3178
- .Tag-module__hop-Tag___k---H[data-href] {
1617
+ --clear-btn-margin-inline: var(--hop-Tag-lg-clear-btn-margin-inline);
1618
+ --avatar-margin-inline-start: var(--hop-Tag-lg-avatar-margin-inline-start);
1619
+ --spinner-margin-inline-end: var(--hop-Tag-lg-spinner-margin-inline-end);
1620
+ }
1621
+ .Tag-module__hop-Tag--lg___-7S-k:not(:has(.Tag-module__hop-Tag__remove-btn___gqTvd, .Tag-module__hop-Tag__Spinner___itlq9)) {
1622
+ --badge-margin-inline-end: var(--hop-Tag-lg-badge-margin-inline-end);
1623
+ }
1624
+ .Tag-module__hop-Tag--lg___-7S-k:not(:has(.Tag-module__hop-Tag__avatar___k-w6U)) {
1625
+ --icon-margin-inline-start: var(--hop-Tag-lg-icon-margin-inline-start);
1626
+ }
1627
+ .Tag-module__hop-Tag--neutral___ziL-o {
1628
+ --border-color: var(--hop-Tag-neutral-border-color);
1629
+ --background-color: var(--hop-Tag-neutral-background-color);
1630
+ --text-color: var(--hop-Tag-neutral-text-color);
1631
+ }
1632
+ .Tag-module__hop-Tag--subdued___bYJN1 {
1633
+ --border-color: var(--hop-Tag-subdued-border-color);
1634
+ --background-color: var(--hop-Tag-subdued-background-color);
1635
+ --text-color: var(--hop-Tag-subdued-text-color);
1636
+ }
1637
+ .Tag-module__hop-Tag--progress___Scd9q {
1638
+ --border-color: var(--hop-Tag-progress-border-color);
1639
+ --background-color: var(--hop-Tag-progress-background-color);
1640
+ --text-color: var(--hop-Tag-progress-text-color);
1641
+ }
1642
+ .Tag-module__hop-Tag--positive___GJ1Wb {
1643
+ --border-color: var(--hop-Tag-positive-border-color);
1644
+ --background-color: var(--hop-Tag-positive-background-color);
1645
+ --text-color: var(--hop-Tag-positive-text-color);
1646
+ }
1647
+ .Tag-module__hop-Tag--caution___de6ZF {
1648
+ --border-color: var(--hop-Tag-caution-border-color);
1649
+ --background-color: var(--hop-Tag-caution-background-color);
1650
+ --text-color: var(--hop-Tag-caution-text-color);
1651
+ }
1652
+ .Tag-module__hop-Tag--negative___Dz8WI {
1653
+ --border-color: var(--hop-Tag-negative-border-color);
1654
+ --background-color: var(--hop-Tag-negative-background-color);
1655
+ --text-color: var(--hop-Tag-negative-text-color);
1656
+ }
1657
+ .Tag-module__hop-Tag--option1___Va6Mb {
1658
+ --border-color: var(--hop-Tag-option1-border-color);
1659
+ --background-color: var(--hop-Tag-option1-background-color);
1660
+ --text-color: var(--hop-Tag-option1-text-color);
1661
+ }
1662
+ .Tag-module__hop-Tag--option2___eck-O {
1663
+ --border-color: var(--hop-Tag-option2-border-color);
1664
+ --background-color: var(--hop-Tag-option2-background-color);
1665
+ --text-color: var(--hop-Tag-option2-text-color);
1666
+ }
1667
+ .Tag-module__hop-Tag--option3___ZlmMR {
1668
+ --border-color: var(--hop-Tag-option3-border-color);
1669
+ --background-color: var(--hop-Tag-option3-background-color);
1670
+ --text-color: var(--hop-Tag-option3-text-color);
1671
+ }
1672
+ .Tag-module__hop-Tag--option4___L3EmX {
1673
+ --border-color: var(--hop-Tag-option4-border-color);
1674
+ --background-color: var(--hop-Tag-option4-background-color);
1675
+ --text-color: var(--hop-Tag-option4-text-color);
1676
+ }
1677
+ .Tag-module__hop-Tag--option5___B7Tp- {
1678
+ --border-color: var(--hop-Tag-option5-border-color);
1679
+ --background-color: var(--hop-Tag-option5-background-color);
1680
+ --text-color: var(--hop-Tag-option5-text-color);
1681
+ }
1682
+ .Tag-module__hop-Tag--option6___GvCgh {
1683
+ --border-color: var(--hop-Tag-option6-border-color);
1684
+ --background-color: var(--hop-Tag-option6-background-color);
1685
+ --text-color: var(--hop-Tag-option6-text-color);
1686
+ }
1687
+ .Tag-module__hop-Tag___RskTT[data-href] {
3179
1688
  cursor: pointer;
3180
1689
  }
3181
- .Tag-module__hop-Tag___k---H[data-focus-visible] {
3182
- --background-color: var(--hop-Tag-background-color-focus);
3183
- --border-color: var(--hop-Tag-border-color-focus);
3184
- --text-color: var(--hop-Tag-text-color-focus);
1690
+ .Tag-module__hop-Tag--neutral___ziL-o[data-focus-visible] {
1691
+ --border-color: var(--hop-Tag-neutral-border-color-focus);
1692
+ --background-color: var(--hop-Tag-neutral-background-color-focus);
1693
+ --text-color: var(--hop-Tag-neutral-text-color-focus);
1694
+ }
1695
+ .Tag-module__hop-Tag--neutral___ziL-o[data-hovered] {
1696
+ --border-color: var(--hop-Tag-neutral-border-color-hover);
1697
+ --background-color: var(--hop-Tag-neutral-background-color-hover);
1698
+ --text-color: var(--hop-Tag-neutral-text-color-hover);
1699
+ }
1700
+ .Tag-module__hop-Tag--neutral___ziL-o[data-pressed] {
1701
+ --border-color: var(--hop-Tag-neutral-border-color-press);
1702
+ --background-color: var(--hop-Tag-neutral-background-color-press);
1703
+ --text-color: var(--hop-Tag-neutral-text-color-press);
1704
+ }
1705
+ .Tag-module__hop-Tag--neutral___ziL-o[data-disabled] {
1706
+ --border-color: var(--hop-Tag-neutral-border-color-disabled);
1707
+ --background-color: var(--hop-Tag-neutral-background-color-disabled);
1708
+ --text-color: var(--hop-Tag-neutral-text-color-disabled);
1709
+ }
1710
+ .Tag-module__hop-Tag--subdued___bYJN1[data-focus-visible] {
1711
+ --border-color: var(--hop-Tag-subdued-border-color-focus);
1712
+ --background-color: var(--hop-Tag-subdued-background-color-focus);
1713
+ --text-color: var(--hop-Tag-subdued-text-color-focus);
1714
+ }
1715
+ .Tag-module__hop-Tag--subdued___bYJN1[data-hovered] {
1716
+ --border-color: var(--hop-Tag-subdued-border-color-hover);
1717
+ --background-color: var(--hop-Tag-subdued-background-color-hover);
1718
+ --text-color: var(--hop-Tag-subdued-text-color-hover);
1719
+ }
1720
+ .Tag-module__hop-Tag--subdued___bYJN1[data-pressed] {
1721
+ --border-color: var(--hop-Tag-subdued-border-color-press);
1722
+ --background-color: var(--hop-Tag-subdued-background-color-press);
1723
+ --text-color: var(--hop-Tag-subdued-text-color-press);
1724
+ }
1725
+ .Tag-module__hop-Tag--subdued___bYJN1[data-disabled] {
1726
+ --border-color: var(--hop-Tag-subdued-border-color-disabled);
1727
+ --background-color: var(--hop-Tag-subdued-background-color-disabled);
1728
+ --text-color: var(--hop-Tag-subdued-text-color-disabled);
1729
+ }
1730
+ .Tag-module__hop-Tag--progress___Scd9q[data-focus-visible] {
1731
+ --border-color: var(--hop-Tag-progress-border-color-focus);
1732
+ --background-color: var(--hop-Tag-progress-background-color-focus);
1733
+ --text-color: var(--hop-Tag-progress-text-color-focus);
1734
+ }
1735
+ .Tag-module__hop-Tag--progress___Scd9q[data-hovered] {
1736
+ --border-color: var(--hop-Tag-progress-border-color-hover);
1737
+ --background-color: var(--hop-Tag-progress-background-color-hover);
1738
+ --text-color: var(--hop-Tag-progress-text-color-hover);
1739
+ }
1740
+ .Tag-module__hop-Tag--progress___Scd9q[data-pressed] {
1741
+ --border-color: var(--hop-Tag-progress-border-color-press);
1742
+ --background-color: var(--hop-Tag-progress-background-color-press);
1743
+ --text-color: var(--hop-Tag-progress-text-color-press);
1744
+ }
1745
+ .Tag-module__hop-Tag--progress___Scd9q[data-disabled] {
1746
+ --border-color: var(--hop-Tag-progress-border-color-disabled);
1747
+ --background-color: var(--hop-Tag-progress-background-color-disabled);
1748
+ --text-color: var(--hop-Tag-progress-text-color-disabled);
1749
+ }
1750
+ .Tag-module__hop-Tag--positive___GJ1Wb[data-focus-visible] {
1751
+ --border-color: var(--hop-Tag-positive-border-color-focus);
1752
+ --background-color: var(--hop-Tag-positive-background-color-focus);
1753
+ --text-color: var(--hop-Tag-positive-text-color-focus);
1754
+ }
1755
+ .Tag-module__hop-Tag--positive___GJ1Wb[data-hovered] {
1756
+ --border-color: var(--hop-Tag-positive-border-color-hover);
1757
+ --background-color: var(--hop-Tag-positive-background-color-hover);
1758
+ --text-color: var(--hop-Tag-positive-text-color-hover);
1759
+ }
1760
+ .Tag-module__hop-Tag--positive___GJ1Wb[data-pressed] {
1761
+ --border-color: var(--hop-Tag-positive-border-color-press);
1762
+ --background-color: var(--hop-Tag-positive-background-color-press);
1763
+ --text-color: var(--hop-Tag-positive-text-color-press);
1764
+ }
1765
+ .Tag-module__hop-Tag--positive___GJ1Wb[data-disabled] {
1766
+ --border-color: var(--hop-Tag-positive-border-color-disabled);
1767
+ --background-color: var(--hop-Tag-positive-background-color-disabled);
1768
+ --text-color: var(--hop-Tag-positive-text-color-disabled);
1769
+ }
1770
+ .Tag-module__hop-Tag--caution___de6ZF[data-focus-visible] {
1771
+ --border-color: var(--hop-Tag-caution-border-color-focus);
1772
+ --background-color: var(--hop-Tag-caution-background-color-focus);
1773
+ --text-color: var(--hop-Tag-caution-text-color-focus);
1774
+ }
1775
+ .Tag-module__hop-Tag--caution___de6ZF[data-hovered] {
1776
+ --border-color: var(--hop-Tag-caution-border-color-hover);
1777
+ --background-color: var(--hop-Tag-caution-background-color-hover);
1778
+ --text-color: var(--hop-Tag-caution-text-color-hover);
1779
+ }
1780
+ .Tag-module__hop-Tag--caution___de6ZF[data-pressed] {
1781
+ --border-color: var(--hop-Tag-caution-border-color-press);
1782
+ --background-color: var(--hop-Tag-caution-background-color-press);
1783
+ --text-color: var(--hop-Tag-caution-text-color-press);
1784
+ }
1785
+ .Tag-module__hop-Tag--caution___de6ZF[data-disabled] {
1786
+ --border-color: var(--hop-Tag-caution-border-color-disabled);
1787
+ --background-color: var(--hop-Tag-caution-background-color-disabled);
1788
+ --text-color: var(--hop-Tag-caution-text-color-disabled);
1789
+ }
1790
+ .Tag-module__hop-Tag--negative___Dz8WI[data-focus-visible] {
1791
+ --border-color: var(--hop-Tag-negative-border-color-focus);
1792
+ --background-color: var(--hop-Tag-negative-background-color-focus);
1793
+ --text-color: var(--hop-Tag-negative-text-color-focus);
1794
+ }
1795
+ .Tag-module__hop-Tag--negative___Dz8WI[data-hovered] {
1796
+ --border-color: var(--hop-Tag-negative-border-color-hover);
1797
+ --background-color: var(--hop-Tag-negative-background-color-hover);
1798
+ --text-color: var(--hop-Tag-negative-text-color-hover);
1799
+ }
1800
+ .Tag-module__hop-Tag--negative___Dz8WI[data-pressed] {
1801
+ --border-color: var(--hop-Tag-negative-border-color-press);
1802
+ --background-color: var(--hop-Tag-negative-background-color-press);
1803
+ --text-color: var(--hop-Tag-negative-text-color-press);
1804
+ }
1805
+ .Tag-module__hop-Tag--negative___Dz8WI[data-disabled] {
1806
+ --border-color: var(--hop-Tag-negative-border-color-disabled);
1807
+ --background-color: var(--hop-Tag-negative-background-color-disabled);
1808
+ --text-color: var(--hop-Tag-negative-text-color-disabled);
1809
+ }
1810
+ .Tag-module__hop-Tag--option1___Va6Mb[data-focus-visible] {
1811
+ --border-color: var(--hop-Tag-option1-border-color-focus);
1812
+ --background-color: var(--hop-Tag-option1-background-color-focus);
1813
+ --text-color: var(--hop-Tag-option1-text-color-focus);
1814
+ }
1815
+ .Tag-module__hop-Tag--option1___Va6Mb[data-hovered] {
1816
+ --border-color: var(--hop-Tag-option1-border-color-hover);
1817
+ --background-color: var(--hop-Tag-option1-background-color-hover);
1818
+ --text-color: var(--hop-Tag-option1-text-color-hover);
1819
+ }
1820
+ .Tag-module__hop-Tag--option1___Va6Mb[data-pressed] {
1821
+ --border-color: var(--hop-Tag-option1-border-color-press);
1822
+ --background-color: var(--hop-Tag-option1-background-color-press);
1823
+ --text-color: var(--hop-Tag-option1-text-color-press);
1824
+ }
1825
+ .Tag-module__hop-Tag--option1___Va6Mb[data-disabled] {
1826
+ --border-color: var(--hop-Tag-option1-border-color-disabled);
1827
+ --background-color: var(--hop-Tag-option1-background-color-disabled);
1828
+ --text-color: var(--hop-Tag-option1-text-color-disabled);
1829
+ }
1830
+ .Tag-module__hop-Tag--option2___eck-O[data-focus-visible] {
1831
+ --border-color: var(--hop-Tag-option2-border-color-focus);
1832
+ --background-color: var(--hop-Tag-option2-background-color-focus);
1833
+ --text-color: var(--hop-Tag-option2-text-color-focus);
1834
+ }
1835
+ .Tag-module__hop-Tag--option2___eck-O[data-hovered] {
1836
+ --border-color: var(--hop-Tag-option2-border-color-hover);
1837
+ --background-color: var(--hop-Tag-option2-background-color-hover);
1838
+ --text-color: var(--hop-Tag-option2-text-color-hover);
1839
+ }
1840
+ .Tag-module__hop-Tag--option2___eck-O[data-pressed] {
1841
+ --border-color: var(--hop-Tag-option2-border-color-press);
1842
+ --background-color: var(--hop-Tag-option2-background-color-press);
1843
+ --text-color: var(--hop-Tag-option2-text-color-press);
1844
+ }
1845
+ .Tag-module__hop-Tag--option2___eck-O[data-disabled] {
1846
+ --border-color: var(--hop-Tag-option2-border-color-disabled);
1847
+ --background-color: var(--hop-Tag-option2-background-color-disabled);
1848
+ --text-color: var(--hop-Tag-option2-text-color-disabled);
1849
+ }
1850
+ .Tag-module__hop-Tag--option3___ZlmMR[data-focus-visible] {
1851
+ --border-color: var(--hop-Tag-option3-border-color-focus);
1852
+ --background-color: var(--hop-Tag-option3-background-color-focus);
1853
+ --text-color: var(--hop-Tag-option3-text-color-focus);
1854
+ }
1855
+ .Tag-module__hop-Tag--option3___ZlmMR[data-hovered] {
1856
+ --border-color: var(--hop-Tag-option3-border-color-hover);
1857
+ --background-color: var(--hop-Tag-option3-background-color-hover);
1858
+ --text-color: var(--hop-Tag-option3-text-color-hover);
1859
+ }
1860
+ .Tag-module__hop-Tag--option3___ZlmMR[data-pressed] {
1861
+ --border-color: var(--hop-Tag-option3-border-color-press);
1862
+ --background-color: var(--hop-Tag-option3-background-color-press);
1863
+ --text-color: var(--hop-Tag-option3-text-color-press);
1864
+ }
1865
+ .Tag-module__hop-Tag--option3___ZlmMR[data-disabled] {
1866
+ --border-color: var(--hop-Tag-option3-border-color-disabled);
1867
+ --background-color: var(--hop-Tag-option3-background-color-disabled);
1868
+ --text-color: var(--hop-Tag-option3-text-color-disabled);
1869
+ }
1870
+ .Tag-module__hop-Tag--option4___L3EmX[data-focus-visible] {
1871
+ --border-color: var(--hop-Tag-option4-border-color-focus);
1872
+ --background-color: var(--hop-Tag-option4-background-color-focus);
1873
+ --text-color: var(--hop-Tag-option4-text-color-focus);
1874
+ }
1875
+ .Tag-module__hop-Tag--option4___L3EmX[data-hovered] {
1876
+ --border-color: var(--hop-Tag-option4-border-color-hover);
1877
+ --background-color: var(--hop-Tag-option4-background-color-hover);
1878
+ --text-color: var(--hop-Tag-option4-text-color-hover);
1879
+ }
1880
+ .Tag-module__hop-Tag--option4___L3EmX[data-pressed] {
1881
+ --border-color: var(--hop-Tag-option4-border-color-press);
1882
+ --background-color: var(--hop-Tag-option4-background-color-press);
1883
+ --text-color: var(--hop-Tag-option4-text-color-press);
1884
+ }
1885
+ .Tag-module__hop-Tag--option4___L3EmX[data-disabled] {
1886
+ --border-color: var(--hop-Tag-option4-border-color-disabled);
1887
+ --background-color: var(--hop-Tag-option4-background-color-disabled);
1888
+ --text-color: var(--hop-Tag-option4-text-color-disabled);
1889
+ }
1890
+ .Tag-module__hop-Tag--option5___B7Tp-[data-focus-visible] {
1891
+ --border-color: var(--hop-Tag-option5-border-color-focus);
1892
+ --background-color: var(--hop-Tag-option5-background-color-focus);
1893
+ --text-color: var(--hop-Tag-option5-text-color-focus);
1894
+ }
1895
+ .Tag-module__hop-Tag--option5___B7Tp-[data-hovered] {
1896
+ --border-color: var(--hop-Tag-option5-border-color-hover);
1897
+ --background-color: var(--hop-Tag-option5-background-color-hover);
1898
+ --text-color: var(--hop-Tag-option5-text-color-hover);
1899
+ }
1900
+ .Tag-module__hop-Tag--option5___B7Tp-[data-pressed] {
1901
+ --border-color: var(--hop-Tag-option5-border-color-press);
1902
+ --background-color: var(--hop-Tag-option5-background-color-press);
1903
+ --text-color: var(--hop-Tag-option5-text-color-press);
1904
+ }
1905
+ .Tag-module__hop-Tag--option5___B7Tp-[data-disabled] {
1906
+ --border-color: var(--hop-Tag-option5-border-color-disabled);
1907
+ --background-color: var(--hop-Tag-option5-background-color-disabled);
1908
+ --text-color: var(--hop-Tag-option5-text-color-disabled);
1909
+ }
1910
+ .Tag-module__hop-Tag--option6___GvCgh[data-focus-visible] {
1911
+ --border-color: var(--hop-Tag-option6-border-color-focus);
1912
+ --background-color: var(--hop-Tag-option6-background-color-focus);
1913
+ --text-color: var(--hop-Tag-option6-text-color-focus);
1914
+ }
1915
+ .Tag-module__hop-Tag--option6___GvCgh[data-hovered] {
1916
+ --border-color: var(--hop-Tag-option6-border-color-hover);
1917
+ --background-color: var(--hop-Tag-option6-background-color-hover);
1918
+ --text-color: var(--hop-Tag-option6-text-color-hover);
1919
+ }
1920
+ .Tag-module__hop-Tag--option6___GvCgh[data-pressed] {
1921
+ --border-color: var(--hop-Tag-option6-border-color-press);
1922
+ --background-color: var(--hop-Tag-option6-background-color-press);
1923
+ --text-color: var(--hop-Tag-option6-text-color-press);
1924
+ }
1925
+ .Tag-module__hop-Tag--option6___GvCgh[data-disabled] {
1926
+ --border-color: var(--hop-Tag-option6-border-color-disabled);
1927
+ --background-color: var(--hop-Tag-option6-background-color-disabled);
1928
+ --text-color: var(--hop-Tag-option6-text-color-disabled);
1929
+ }
1930
+ .Tag-module__hop-Tag___RskTT[data-focus-visible] {
3185
1931
  outline: 0.125rem solid var(--focus-ring-color);
3186
1932
  }
3187
- .Tag-module__hop-Tag___k---H[data-hovered] {
3188
- --background-color: var(--hop-Tag-background-color-hover);
3189
- --border-color: var(--hop-Tag-border-color-hover);
3190
- --text-color: var(--hop-Tag-text-color-hover);
1933
+ .Tag-module__hop-Tag___RskTT[data-hovered] {
3191
1934
  cursor: pointer;
3192
1935
  }
3193
- .Tag-module__hop-Tag___k---H[data-selected] {
1936
+ .Tag-module__hop-Tag___RskTT[data-selected] {
3194
1937
  --background-color: var(--hop-Tag-background-color-selected);
3195
1938
  --border-color: var(--hop-Tag-border-color-selected);
3196
1939
  --text-color: var(--hop-Tag-text-color-selected);
3197
1940
  }
3198
- .Tag-module__hop-Tag___k---H[data-pressed] {
3199
- --background-color: var(--hop-Tag-background-color-press);
3200
- --border-color: var(--hop-Tag-border-color-press);
3201
- --text-color: var(--hop-Tag-text-color-press);
1941
+ .Tag-module__hop-Tag___RskTT[data-pressed] {
3202
1942
  cursor: pointer;
3203
1943
  }
3204
- .Tag-module__hop-Tag___k---H[data-invalid] {
1944
+ .Tag-module__hop-Tag___RskTT[data-invalid] {
3205
1945
  --border-color: var(--hop-Tag-border-color-invalid);
3206
1946
  }
3207
- .Tag-module__hop-Tag___k---H[data-disabled] {
3208
- --background-color: var(--hop-Tag-background-color-disabled);
3209
- --border-color: var(--hop-Tag-border-color-disabled);
3210
- --text-color: var(--hop-Tag-text-color-disabled);
1947
+ .Tag-module__hop-Tag___RskTT[data-disabled] {
3211
1948
  cursor: not-allowed;
3212
1949
  }
3213
- .Tag-module__hop-Tag__icon___DvajY,
3214
- .Tag-module__hop-Tag__icon-list___x4CpF {
1950
+ .Tag-module__hop-Tag__avatar___k-w6U {
3215
1951
  flex: 0 0 auto;
3216
- flex-wrap: nowrap;
3217
1952
  order: 1;
1953
+ margin-inline-start: var(--avatar-margin-inline-start);
1954
+ }
1955
+ .Tag-module__hop-Tag__icon___nUqBw,
1956
+ .Tag-module__hop-Tag__icon-list___ybqv1 {
1957
+ flex: 0 0 auto;
1958
+ flex-wrap: nowrap;
1959
+ order: 2;
1960
+ margin-inline-start: var(--icon-margin-inline-start, 0);
3218
1961
  }
3219
- .Tag-module__hop-Tag__text___nkMOg {
1962
+ .Tag-module__hop-Tag__text___TYNqw {
3220
1963
  overflow: hidden;
3221
1964
  flex: 1 1 auto;
3222
- order: 2;
1965
+ order: 3;
3223
1966
  min-inline-size: 0;
3224
1967
  text-align: center;
3225
1968
  text-overflow: ellipsis;
3226
1969
  }
3227
- .Tag-module__hop-Tag__badge___3b9Gq {
1970
+ .Tag-module__hop-Tag__badge___oUeLt {
3228
1971
  flex: 0 0 auto;
3229
- order: 3;
1972
+ order: 4;
3230
1973
  margin-inline-end: var(--badge-margin-inline-end);
3231
1974
  }
3232
- .Tag-module__hop-Tag__badge___3b9Gq.Tag-module__hop-Badge--secondary___sb6Pa {
3233
- margin-inline-start: var(--badge-secondary-inline-margin-start);
1975
+ .Tag-module__hop-Tag__badge___oUeLt[data-variant=secondary] {
1976
+ margin-inline-start: var(--badge-secondary-margin-inline-start);
1977
+ color: inherit;
1978
+ background: none;
1979
+ }
1980
+ .Tag-module__hop-Tag--sm___dT9Zg .Tag-module__hop-Tag__badge___oUeLt {
1981
+ block-size: 100%;
3234
1982
  }
3235
- .Tag-module__hop-Tag__remove-btn___KIdVL,
3236
- .Tag-module__hop-Tag__Spinner___BOJ61 {
1983
+ .Tag-module__hop-Tag__remove-btn___gqTvd,
1984
+ .Tag-module__hop-Tag__Spinner___itlq9 {
3237
1985
  flex: 0 0 auto;
3238
- order: 4;
1986
+ order: 5;
3239
1987
  }
3240
- .Tag-module__hop-Tag__remove-btn___KIdVL {
1988
+ .Tag-module__hop-Tag__Spinner___itlq9 {
1989
+ margin-inline-end: var(--spinner-margin-inline-end);
1990
+ }
1991
+ .Tag-module__hop-Tag__remove-btn___gqTvd {
3241
1992
  margin-inline: var(--clear-btn-margin-inline);
3242
1993
  }
3243
1994
 
1995
+ /* css-module:/home/runner/work/wl-hopper/wl-hopper/packages/components/src/ErrorMessage/src/ErrorMessage.module.css/#css-module-data */
1996
+ .ErrorMessage-module__hop-ErrorMessage___6qmlS {
1997
+ --hop-ErrorMessage-color: var(--hop-danger-text-weak);
1998
+ --hop-ErrorMessage-font-family: var(--hop-body-xs-font-family);
1999
+ --hop-ErrorMessage-font-size: var(--hop-body-xs-font-size);
2000
+ --hop-ErrorMessage-font-weight: var(--hop-body-xs-font-weight);
2001
+ --hop-ErrorMessage-line-height: var(--hop-body-xs-line-height);
2002
+ --hop-ErrorMessage-column-gap: var(--hop-space-inline-xs);
2003
+ display: flex;
2004
+ column-gap: var(--hop-ErrorMessage-column-gap);
2005
+ align-items: center;
2006
+ box-sizing: border-box;
2007
+ font-family: var(--hop-ErrorMessage-font-family);
2008
+ font-size: var(--hop-ErrorMessage-font-size);
2009
+ font-weight: var(--hop-ErrorMessage-font-weight);
2010
+ line-height: var(--hop-ErrorMessage-line-height);
2011
+ color: var(--hop-ErrorMessage-color);
2012
+ }
2013
+ .ErrorMessage-module__hop-ErrorMessage__icon___m4Mae {
2014
+ flex: 0 0 auto;
2015
+ align-self: flex-start;
2016
+ }
2017
+
2018
+ /* css-module:/home/runner/work/wl-hopper/wl-hopper/packages/components/src/HelperMessage/src/HelperMessage.module.css/#css-module-data */
2019
+ .HelperMessage-module__hop-HelperMessage___KQaJ4 {
2020
+ --hop-HelperMessage-color: var(--hop-neutral-text-weak);
2021
+ --hop-HelperMessage-column-gap: var(--hop-space-inline-xs);
2022
+ display: flex;
2023
+ column-gap: var(--hop-HelperMessage-column-gap);
2024
+ align-items: center;
2025
+ box-sizing: border-box;
2026
+ color: var(--hop-HelperMessage-color);
2027
+ }
2028
+ .HelperMessage-module__hop-HelperMessage__icon___1a1jj {
2029
+ flex: 0 0 auto;
2030
+ align-self: flex-start;
2031
+ }
2032
+
2033
+ /* css-module:/home/runner/work/wl-hopper/wl-hopper/packages/components/src/typography/Label/src/Label.module.css/#css-module-data */
2034
+ .Label-module__hop-Label___L4zrw {
2035
+ --hop-Label-font-size: var(--hop-heading-xs-font-size);
2036
+ --hop-Label-font-family: var(--hop-heading-xs-font-family);
2037
+ --hop-Label-font-weight: var(--hop-heading-xs-font-weight);
2038
+ --hop-Label-line-height: var(--hop-heading-xs-line-height);
2039
+ --hop-Label-color: var(--hop-neutral-text-weak);
2040
+ }
2041
+ :where(.Label-module__hop-Label___L4zrw) {
2042
+ font-family: var(--hop-Label-font-family);
2043
+ font-size: var(--hop-Label-font-size);
2044
+ font-weight: var(--hop-Label-font-weight);
2045
+ line-height: var(--hop-Label-line-height);
2046
+ color: var(--hop-Label-color);
2047
+ }
2048
+ :where(.Label-module__hop-Label__indicator___mWy1n) {
2049
+ padding-inline-start: var(--hop-space-20);
2050
+ }
2051
+
3244
2052
  /* css-module:/home/runner/work/wl-hopper/wl-hopper/packages/components/src/tag/src/TagGroup.module.css/#css-module-data */
3245
- .TagGroup-module__hop-TagGroup___8bpFk {
2053
+ .TagGroup-module__hop-TagGroup___nGYNE {
3246
2054
  --hop-TagGroup-row-gap: var(--hop-space-inline-sm);
3247
2055
  --hop-TagGroup-list-column-gap: var(--hop-space-inline-sm);
3248
2056
  --hop-TagGroup-list-row-gap: var(--hop-space-inline-sm);
@@ -3262,10 +2070,10 @@
3262
2070
  inline-size: max-content;
3263
2071
  max-inline-size: 100%;
3264
2072
  }
3265
- .TagGroup-module__hop-TagGroup___8bpFk > .TagGroup-module__hop-TagGroup__label___OoqBw {
2073
+ .TagGroup-module__hop-TagGroup___nGYNE > .TagGroup-module__hop-TagGroup__label___sR56G {
3266
2074
  order: 1;
3267
2075
  }
3268
- .TagGroup-module__hop-TagGroup__list___o5U5A {
2076
+ .TagGroup-module__hop-TagGroup__list___8M4Dw {
3269
2077
  display: flex;
3270
2078
  flex-wrap: wrap;
3271
2079
  gap: var(--list-row-gap) var(--list-column-gap);
@@ -3274,11 +2082,11 @@
3274
2082
  border-radius: var(--list-border-radius);
3275
2083
  outline: none;
3276
2084
  }
3277
- .TagGroup-module__hop-TagGroup__list___o5U5A[data-focus-visible] {
2085
+ .TagGroup-module__hop-TagGroup__list___8M4Dw[data-focus-visible] {
3278
2086
  outline: 0.125rem solid var(--list-focus-ring-color);
3279
2087
  outline-offset: 0.125rem;
3280
2088
  }
3281
- .TagGroup-module__hop-TagGroup___8bpFk > .TagGroup-module__hop-TagGroup__error-message___-Vy2o,
3282
- .TagGroup-module__hop-TagGroup___8bpFk > .TagGroup-module__hop-TagGroup__helper-message___Ys-Hl {
2089
+ .TagGroup-module__hop-TagGroup___nGYNE > .TagGroup-module__hop-TagGroup__error-message___Wzu9G,
2090
+ .TagGroup-module__hop-TagGroup___nGYNE > .TagGroup-module__hop-TagGroup__helper-message___VOUZz {
3283
2091
  order: 3;
3284
2092
  }