@seed-design/react 0.0.1-rc.2 → 0.0.1-rc.4

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 (403) hide show
  1. package/lib/components/ActionButton/ActionButton.cjs +57 -0
  2. package/lib/components/ActionButton/ActionButton.d.ts +3 -3
  3. package/lib/components/ActionButton/ActionButton.js +34 -0
  4. package/lib/components/ActionButton/index.cjs +9 -0
  5. package/lib/components/ActionButton/index.d.ts +1 -1
  6. package/lib/components/ActionButton/index.js +1 -0
  7. package/lib/components/ActionChip/ActionChip.cjs +17 -0
  8. package/lib/components/ActionChip/ActionChip.d.ts +2 -2
  9. package/lib/components/ActionChip/ActionChip.js +13 -0
  10. package/lib/components/ActionChip/index.cjs +9 -0
  11. package/lib/components/ActionChip/index.d.ts +1 -1
  12. package/lib/components/ActionChip/index.js +1 -0
  13. package/lib/components/ActionSheet/ActionSheet.cjs +66 -0
  14. package/lib/components/ActionSheet/ActionSheet.d.ts +4 -4
  15. package/lib/components/ActionSheet/ActionSheet.js +52 -0
  16. package/lib/components/ActionSheet/ActionSheet.namespace.cjs +19 -0
  17. package/lib/components/ActionSheet/ActionSheet.namespace.d.ts +1 -1
  18. package/lib/components/ActionSheet/ActionSheet.namespace.js +1 -0
  19. package/lib/components/ActionSheet/index.cjs +21 -0
  20. package/lib/components/ActionSheet/index.d.ts +2 -2
  21. package/lib/components/ActionSheet/index.js +3 -0
  22. package/lib/components/Avatar/Avatar.cjs +62 -0
  23. package/lib/components/Avatar/Avatar.d.ts +4 -4
  24. package/lib/components/Avatar/Avatar.js +36 -0
  25. package/lib/components/Avatar/Avatar.namespace.cjs +13 -0
  26. package/lib/components/Avatar/Avatar.namespace.d.ts +1 -1
  27. package/lib/components/Avatar/Avatar.namespace.js +1 -0
  28. package/lib/components/Avatar/index.cjs +15 -0
  29. package/lib/components/Avatar/index.d.ts +2 -2
  30. package/lib/components/Avatar/index.js +3 -0
  31. package/lib/components/Badge/Badge.cjs +12 -0
  32. package/lib/components/Badge/Badge.d.ts +2 -2
  33. package/lib/components/Badge/Badge.js +8 -0
  34. package/lib/components/Badge/index.cjs +9 -0
  35. package/lib/components/Badge/index.d.ts +1 -1
  36. package/lib/components/Badge/index.js +1 -0
  37. package/lib/components/BottomSheet/BottomSheet.cjs +65 -0
  38. package/lib/components/BottomSheet/BottomSheet.d.ts +16 -15
  39. package/lib/components/BottomSheet/BottomSheet.d.ts.map +1 -1
  40. package/lib/components/BottomSheet/BottomSheet.js +51 -0
  41. package/lib/components/BottomSheet/BottomSheet.namespace.cjs +19 -0
  42. package/lib/components/BottomSheet/BottomSheet.namespace.d.ts +1 -1
  43. package/lib/components/BottomSheet/BottomSheet.namespace.js +1 -0
  44. package/lib/components/BottomSheet/index.cjs +21 -0
  45. package/lib/components/BottomSheet/index.d.ts +2 -2
  46. package/lib/components/BottomSheet/index.js +3 -0
  47. package/lib/components/Box/Box.cjs +35 -0
  48. package/lib/components/Box/Box.d.ts +1 -1
  49. package/lib/components/Box/Box.js +12 -0
  50. package/lib/components/Box/index.cjs +9 -0
  51. package/lib/components/Box/index.d.ts +1 -1
  52. package/lib/components/Box/index.js +1 -0
  53. package/lib/components/Callout/Callout.cjs +38 -0
  54. package/lib/components/Callout/Callout.d.ts +3 -3
  55. package/lib/components/Callout/Callout.js +29 -0
  56. package/lib/components/Callout/Callout.namespace.cjs +14 -0
  57. package/lib/components/Callout/Callout.namespace.d.ts +1 -1
  58. package/lib/components/Callout/Callout.namespace.js +1 -0
  59. package/lib/components/Callout/index.cjs +16 -0
  60. package/lib/components/Callout/index.d.ts +2 -2
  61. package/lib/components/Callout/index.js +3 -0
  62. package/lib/components/Celcius/Celcius.cjs +9 -0
  63. package/lib/components/Celcius/Celcius.js +5 -0
  64. package/lib/components/Celcius/index.cjs +9 -0
  65. package/lib/components/Celcius/index.d.ts +1 -1
  66. package/lib/components/Celcius/index.js +1 -0
  67. package/lib/components/Checkbox/Checkbox.cjs +61 -0
  68. package/lib/components/Checkbox/Checkbox.d.ts +9 -8
  69. package/lib/components/Checkbox/Checkbox.d.ts.map +1 -1
  70. package/lib/components/Checkbox/Checkbox.js +53 -0
  71. package/lib/components/Checkbox/Checkbox.namespace.cjs +13 -0
  72. package/lib/components/Checkbox/Checkbox.namespace.d.ts +1 -1
  73. package/lib/components/Checkbox/Checkbox.namespace.js +1 -0
  74. package/lib/components/Checkbox/index.cjs +15 -0
  75. package/lib/components/Checkbox/index.d.ts +2 -2
  76. package/lib/components/Checkbox/index.js +3 -0
  77. package/lib/components/ChipTabs/ChipTabs.cjs +40 -0
  78. package/lib/components/ChipTabs/ChipTabs.d.ts +9 -8
  79. package/lib/components/ChipTabs/ChipTabs.d.ts.map +1 -1
  80. package/lib/components/ChipTabs/ChipTabs.js +31 -0
  81. package/lib/components/ChipTabs/ChipTabs.namespace.cjs +14 -0
  82. package/lib/components/ChipTabs/ChipTabs.namespace.d.ts +1 -1
  83. package/lib/components/ChipTabs/ChipTabs.namespace.js +1 -0
  84. package/lib/components/ChipTabs/index.cjs +16 -0
  85. package/lib/components/ChipTabs/index.d.ts +2 -2
  86. package/lib/components/ChipTabs/index.js +3 -0
  87. package/lib/components/Columns/Columns.cjs +58 -0
  88. package/lib/components/Columns/Columns.d.ts +1 -1
  89. package/lib/components/Columns/Columns.js +34 -0
  90. package/lib/components/Columns/index.cjs +10 -0
  91. package/lib/components/Columns/index.d.ts +1 -1
  92. package/lib/components/Columns/index.js +1 -0
  93. package/lib/components/ConsistentWidth/ConsistentWidth.cjs +23 -0
  94. package/lib/components/ConsistentWidth/ConsistentWidth.d.ts +3 -2
  95. package/lib/components/ConsistentWidth/ConsistentWidth.d.ts.map +1 -1
  96. package/lib/components/ConsistentWidth/ConsistentWidth.js +19 -0
  97. package/lib/components/ConsistentWidth/index.cjs +9 -0
  98. package/lib/components/ConsistentWidth/index.d.ts +1 -1
  99. package/lib/components/ConsistentWidth/index.js +1 -0
  100. package/lib/components/ControlChip/ControlChip.cjs +16 -0
  101. package/lib/components/ControlChip/ControlChip.d.ts +2 -2
  102. package/lib/components/ControlChip/ControlChip.js +12 -0
  103. package/lib/components/ControlChip/index.cjs +9 -0
  104. package/lib/components/ControlChip/index.d.ts +1 -1
  105. package/lib/components/ControlChip/index.js +1 -0
  106. package/lib/components/Count/Count.cjs +15 -0
  107. package/lib/components/Count/Count.d.ts +2 -1
  108. package/lib/components/Count/Count.d.ts.map +1 -1
  109. package/lib/components/Count/Count.js +11 -0
  110. package/lib/components/Count/index.cjs +9 -0
  111. package/lib/components/Count/index.d.ts +1 -1
  112. package/lib/components/Count/index.d.ts.map +1 -1
  113. package/lib/components/Count/index.js +1 -0
  114. package/lib/components/Dialog/Dialog.cjs +58 -0
  115. package/lib/components/Dialog/Dialog.d.ts +14 -13
  116. package/lib/components/Dialog/Dialog.d.ts.map +1 -1
  117. package/lib/components/Dialog/Dialog.js +45 -0
  118. package/lib/components/Dialog/Dialog.namespace.cjs +18 -0
  119. package/lib/components/Dialog/Dialog.namespace.d.ts +1 -1
  120. package/lib/components/Dialog/Dialog.namespace.js +1 -0
  121. package/lib/components/Dialog/index.cjs +20 -0
  122. package/lib/components/Dialog/index.d.ts +2 -2
  123. package/lib/components/Dialog/index.js +3 -0
  124. package/lib/components/ExtendedActionSheet/ExtendedActionSheet.cjs +53 -0
  125. package/lib/components/ExtendedActionSheet/ExtendedActionSheet.d.ts +4 -4
  126. package/lib/components/ExtendedActionSheet/ExtendedActionSheet.js +38 -0
  127. package/lib/components/ExtendedActionSheet/ExtendedActionSheet.namespace.cjs +20 -0
  128. package/lib/components/ExtendedActionSheet/ExtendedActionSheet.namespace.d.ts +1 -1
  129. package/lib/components/ExtendedActionSheet/ExtendedActionSheet.namespace.js +1 -0
  130. package/lib/components/ExtendedActionSheet/index.cjs +22 -0
  131. package/lib/components/ExtendedActionSheet/index.d.ts +2 -2
  132. package/lib/components/ExtendedActionSheet/index.js +3 -0
  133. package/lib/components/ExtendedFab/ExtendedFab.cjs +21 -0
  134. package/lib/components/ExtendedFab/ExtendedFab.d.ts +4 -3
  135. package/lib/components/ExtendedFab/ExtendedFab.d.ts.map +1 -1
  136. package/lib/components/ExtendedFab/ExtendedFab.js +17 -0
  137. package/lib/components/ExtendedFab/index.cjs +9 -0
  138. package/lib/components/ExtendedFab/index.d.ts +1 -1
  139. package/lib/components/ExtendedFab/index.js +1 -0
  140. package/lib/components/Fab/Fab.cjs +12 -0
  141. package/lib/components/Fab/Fab.d.ts +2 -2
  142. package/lib/components/Fab/Fab.js +8 -0
  143. package/lib/components/Fab/index.cjs +9 -0
  144. package/lib/components/Fab/index.d.ts +1 -1
  145. package/lib/components/Fab/index.js +1 -0
  146. package/lib/components/Flex/Flex.cjs +33 -0
  147. package/lib/components/Flex/Flex.d.ts +1 -1
  148. package/lib/components/Flex/Flex.js +10 -0
  149. package/lib/components/Flex/index.cjs +9 -0
  150. package/lib/components/Flex/index.d.ts +1 -1
  151. package/lib/components/Flex/index.js +1 -0
  152. package/lib/components/HelpBubble/HelpBubble.cjs +93 -0
  153. package/lib/components/HelpBubble/HelpBubble.d.ts +16 -15
  154. package/lib/components/HelpBubble/HelpBubble.d.ts.map +1 -1
  155. package/lib/components/HelpBubble/HelpBubble.js +79 -0
  156. package/lib/components/HelpBubble/HelpBubble.namespace.cjs +19 -0
  157. package/lib/components/HelpBubble/HelpBubble.namespace.d.ts +1 -1
  158. package/lib/components/HelpBubble/HelpBubble.namespace.js +1 -0
  159. package/lib/components/HelpBubble/index.cjs +21 -0
  160. package/lib/components/HelpBubble/index.d.ts +2 -2
  161. package/lib/components/HelpBubble/index.js +3 -0
  162. package/lib/components/Icon/Icon.cjs +118 -0
  163. package/lib/components/Icon/Icon.d.ts +5 -4
  164. package/lib/components/Icon/Icon.d.ts.map +1 -1
  165. package/lib/components/Icon/Icon.js +110 -0
  166. package/lib/components/Icon/index.cjs +11 -0
  167. package/lib/components/Icon/index.d.ts +1 -1
  168. package/lib/components/Icon/index.d.ts.map +1 -1
  169. package/lib/components/Icon/index.js +1 -0
  170. package/lib/components/IdentityPlaceholder/IdentityPlaceholder.cjs +62 -0
  171. package/lib/components/IdentityPlaceholder/IdentityPlaceholder.d.ts +2 -2
  172. package/lib/components/IdentityPlaceholder/IdentityPlaceholder.js +38 -0
  173. package/lib/components/IdentityPlaceholder/IdentityPlaceholder.namespace.cjs +10 -0
  174. package/lib/components/IdentityPlaceholder/IdentityPlaceholder.namespace.d.ts +1 -1
  175. package/lib/components/IdentityPlaceholder/IdentityPlaceholder.namespace.js +1 -0
  176. package/lib/components/IdentityPlaceholder/index.cjs +12 -0
  177. package/lib/components/IdentityPlaceholder/index.d.ts +2 -2
  178. package/lib/components/IdentityPlaceholder/index.js +3 -0
  179. package/lib/components/Inline/Inline.cjs +43 -0
  180. package/lib/components/Inline/Inline.d.ts +1 -1
  181. package/lib/components/Inline/Inline.js +20 -0
  182. package/lib/components/Inline/index.cjs +9 -0
  183. package/lib/components/Inline/index.d.ts +1 -1
  184. package/lib/components/Inline/index.js +1 -0
  185. package/lib/components/InlineBanner/InlineBanner.cjs +41 -0
  186. package/lib/components/InlineBanner/InlineBanner.d.ts +3 -3
  187. package/lib/components/InlineBanner/InlineBanner.js +32 -0
  188. package/lib/components/InlineBanner/InlineBanner.namespace.cjs +14 -0
  189. package/lib/components/InlineBanner/InlineBanner.namespace.d.ts +1 -1
  190. package/lib/components/InlineBanner/InlineBanner.namespace.js +1 -0
  191. package/lib/components/InlineBanner/index.cjs +16 -0
  192. package/lib/components/InlineBanner/index.d.ts +2 -2
  193. package/lib/components/InlineBanner/index.js +3 -0
  194. package/lib/components/LinkContent/LinkContent.cjs +16 -0
  195. package/lib/components/LinkContent/LinkContent.d.ts +8 -0
  196. package/lib/components/LinkContent/LinkContent.d.ts.map +1 -0
  197. package/lib/components/LinkContent/LinkContent.js +12 -0
  198. package/lib/components/LinkContent/index.cjs +9 -0
  199. package/lib/components/LinkContent/index.d.ts +2 -0
  200. package/lib/components/LinkContent/index.d.ts.map +1 -0
  201. package/lib/components/LinkContent/index.js +1 -0
  202. package/lib/components/LoadingIndicator/LoadingIndicator.cjs +27 -0
  203. package/lib/components/LoadingIndicator/LoadingIndicator.d.ts +2 -1
  204. package/lib/components/LoadingIndicator/LoadingIndicator.d.ts.map +1 -1
  205. package/lib/components/LoadingIndicator/LoadingIndicator.js +23 -0
  206. package/lib/components/LoadingIndicator/index.cjs +9 -0
  207. package/lib/components/LoadingIndicator/index.d.ts +1 -1
  208. package/lib/components/LoadingIndicator/index.js +1 -0
  209. package/lib/components/LoadingIndicator/usePendingButton.cjs +51 -0
  210. package/lib/components/LoadingIndicator/usePendingButton.js +26 -0
  211. package/lib/components/MannerTempBadge/MannerTempBadge.cjs +15 -0
  212. package/lib/components/MannerTempBadge/MannerTempBadge.d.ts +2 -2
  213. package/lib/components/MannerTempBadge/MannerTempBadge.js +11 -0
  214. package/lib/components/MannerTempBadge/index.cjs +9 -0
  215. package/lib/components/MannerTempBadge/index.d.ts +1 -1
  216. package/lib/components/MannerTempBadge/index.js +1 -0
  217. package/lib/components/ProgressCircle/ProgressCircle.cjs +25 -0
  218. package/lib/components/ProgressCircle/ProgressCircle.d.ts +6 -5
  219. package/lib/components/ProgressCircle/ProgressCircle.d.ts.map +1 -1
  220. package/lib/components/ProgressCircle/ProgressCircle.js +19 -0
  221. package/lib/components/ProgressCircle/ProgressCircle.namespace.cjs +11 -0
  222. package/lib/components/ProgressCircle/ProgressCircle.namespace.d.ts +1 -1
  223. package/lib/components/ProgressCircle/ProgressCircle.namespace.js +1 -0
  224. package/lib/components/ProgressCircle/index.cjs +13 -0
  225. package/lib/components/ProgressCircle/index.d.ts +2 -2
  226. package/lib/components/ProgressCircle/index.js +3 -0
  227. package/lib/components/PullToRefresh/PullToRefresh.cjs +22 -0
  228. package/lib/components/PullToRefresh/PullToRefresh.d.ts +6 -5
  229. package/lib/components/PullToRefresh/PullToRefresh.d.ts.map +1 -1
  230. package/lib/components/PullToRefresh/PullToRefresh.js +16 -0
  231. package/lib/components/PullToRefresh/PullToRefresh.namespace.cjs +11 -0
  232. package/lib/components/PullToRefresh/PullToRefresh.namespace.d.ts +1 -1
  233. package/lib/components/PullToRefresh/PullToRefresh.namespace.js +1 -0
  234. package/lib/components/PullToRefresh/index.cjs +13 -0
  235. package/lib/components/PullToRefresh/index.d.ts +2 -2
  236. package/lib/components/PullToRefresh/index.js +3 -0
  237. package/lib/components/ReactionButton/ReactionButton.cjs +50 -0
  238. package/lib/components/ReactionButton/ReactionButton.d.ts +3 -3
  239. package/lib/components/ReactionButton/ReactionButton.js +27 -0
  240. package/lib/components/ReactionButton/index.cjs +9 -0
  241. package/lib/components/ReactionButton/index.d.ts +1 -1
  242. package/lib/components/ReactionButton/index.js +1 -0
  243. package/lib/components/SegmentedControl/SegmentedControl.cjs +25 -0
  244. package/lib/components/SegmentedControl/SegmentedControl.d.ts +8 -7
  245. package/lib/components/SegmentedControl/SegmentedControl.d.ts.map +1 -1
  246. package/lib/components/SegmentedControl/SegmentedControl.js +18 -0
  247. package/lib/components/SegmentedControl/SegmentedControl.namespace.cjs +12 -0
  248. package/lib/components/SegmentedControl/SegmentedControl.namespace.d.ts +1 -1
  249. package/lib/components/SegmentedControl/SegmentedControl.namespace.js +1 -0
  250. package/lib/components/SegmentedControl/index.cjs +14 -0
  251. package/lib/components/SegmentedControl/index.d.ts +2 -2
  252. package/lib/components/SegmentedControl/index.js +3 -0
  253. package/lib/components/SelectBox/CheckSelectBox.cjs +52 -0
  254. package/lib/components/SelectBox/CheckSelectBox.d.ts +12 -11
  255. package/lib/components/SelectBox/CheckSelectBox.d.ts.map +1 -1
  256. package/lib/components/SelectBox/CheckSelectBox.js +41 -0
  257. package/lib/components/SelectBox/CheckSelectBox.namespace.cjs +16 -0
  258. package/lib/components/SelectBox/CheckSelectBox.namespace.d.ts +1 -1
  259. package/lib/components/SelectBox/CheckSelectBox.namespace.js +1 -0
  260. package/lib/components/SelectBox/RadioSelectBox.cjs +50 -0
  261. package/lib/components/SelectBox/RadioSelectBox.d.ts +12 -11
  262. package/lib/components/SelectBox/RadioSelectBox.d.ts.map +1 -1
  263. package/lib/components/SelectBox/RadioSelectBox.js +39 -0
  264. package/lib/components/SelectBox/RadioSelectBox.namespace.cjs +16 -0
  265. package/lib/components/SelectBox/RadioSelectBox.namespace.d.ts +1 -1
  266. package/lib/components/SelectBox/RadioSelectBox.namespace.js +1 -0
  267. package/lib/components/SelectBox/index.cjs +29 -0
  268. package/lib/components/SelectBox/index.d.ts +4 -4
  269. package/lib/components/SelectBox/index.js +6 -0
  270. package/lib/components/Skeleton/Skeleton.cjs +16 -0
  271. package/lib/components/Skeleton/Skeleton.d.ts +3 -3
  272. package/lib/components/Skeleton/Skeleton.js +12 -0
  273. package/lib/components/Skeleton/index.cjs +9 -0
  274. package/lib/components/Skeleton/index.d.ts +1 -1
  275. package/lib/components/Skeleton/index.js +1 -0
  276. package/lib/components/Snackbar/Snackbar.cjs +64 -0
  277. package/lib/components/Snackbar/Snackbar.d.ts +13 -12
  278. package/lib/components/Snackbar/Snackbar.d.ts.map +1 -1
  279. package/lib/components/Snackbar/Snackbar.js +52 -0
  280. package/lib/components/Snackbar/Snackbar.namespace.cjs +17 -0
  281. package/lib/components/Snackbar/Snackbar.namespace.d.ts +1 -1
  282. package/lib/components/Snackbar/Snackbar.namespace.js +1 -0
  283. package/lib/components/Snackbar/index.cjs +26 -0
  284. package/lib/components/Snackbar/index.d.ts +4 -4
  285. package/lib/components/Snackbar/index.js +5 -0
  286. package/lib/components/Snackbar/useSnackbarAdapter.cjs +28 -0
  287. package/lib/components/Snackbar/useSnackbarAdapter.d.ts +1 -1
  288. package/lib/components/Snackbar/useSnackbarAdapter.js +24 -0
  289. package/lib/components/Stack/Stack.cjs +32 -0
  290. package/lib/components/Stack/Stack.d.ts +1 -1
  291. package/lib/components/Stack/Stack.js +9 -0
  292. package/lib/components/Stack/index.cjs +9 -0
  293. package/lib/components/Stack/index.d.ts +1 -1
  294. package/lib/components/Stack/index.js +1 -0
  295. package/lib/components/Switch/Switch.cjs +35 -0
  296. package/lib/components/Switch/Switch.d.ts +9 -8
  297. package/lib/components/Switch/Switch.d.ts.map +1 -1
  298. package/lib/components/Switch/Switch.js +27 -0
  299. package/lib/components/Switch/Switch.namespace.cjs +13 -0
  300. package/lib/components/Switch/Switch.namespace.d.ts +1 -1
  301. package/lib/components/Switch/Switch.namespace.js +1 -0
  302. package/lib/components/Switch/index.cjs +15 -0
  303. package/lib/components/Switch/index.d.ts +2 -2
  304. package/lib/components/Switch/index.js +3 -0
  305. package/lib/components/Tabs/Tabs.cjs +49 -0
  306. package/lib/components/Tabs/Tabs.d.ts +4 -4
  307. package/lib/components/Tabs/Tabs.js +38 -0
  308. package/lib/components/Tabs/Tabs.namespace.cjs +16 -0
  309. package/lib/components/Tabs/Tabs.namespace.d.ts +1 -1
  310. package/lib/components/Tabs/Tabs.namespace.js +1 -0
  311. package/lib/components/Tabs/index.cjs +18 -0
  312. package/lib/components/Tabs/index.d.ts +2 -2
  313. package/lib/components/Tabs/index.js +3 -0
  314. package/lib/components/Text/Text.cjs +85 -0
  315. package/lib/components/Text/Text.d.ts +2 -2
  316. package/lib/components/Text/Text.js +81 -0
  317. package/lib/components/Text/index.cjs +9 -0
  318. package/lib/components/Text/index.d.ts +1 -1
  319. package/lib/components/Text/index.d.ts.map +1 -1
  320. package/lib/components/Text/index.js +1 -0
  321. package/lib/components/TextField/TextField.cjs +150 -0
  322. package/lib/components/TextField/TextField.d.ts +4 -4
  323. package/lib/components/TextField/TextField.js +129 -0
  324. package/lib/components/TextField/TextField.namespace.cjs +26 -0
  325. package/lib/components/TextField/TextField.namespace.d.ts +1 -1
  326. package/lib/components/TextField/TextField.namespace.d.ts.map +1 -1
  327. package/lib/components/TextField/TextField.namespace.js +1 -0
  328. package/lib/components/TextField/index.cjs +28 -0
  329. package/lib/components/TextField/index.d.ts +2 -2
  330. package/lib/components/TextField/index.d.ts.map +1 -1
  331. package/lib/components/TextField/index.js +3 -0
  332. package/lib/components/ToggleButton/ToggleButton.cjs +50 -0
  333. package/lib/components/ToggleButton/ToggleButton.d.ts +3 -3
  334. package/lib/components/ToggleButton/ToggleButton.js +27 -0
  335. package/lib/components/ToggleButton/index.cjs +9 -0
  336. package/lib/components/ToggleButton/index.d.ts +1 -1
  337. package/lib/components/ToggleButton/index.js +1 -0
  338. package/lib/components/VisuallyHidden/VisuallyHidden.cjs +15 -0
  339. package/lib/components/VisuallyHidden/VisuallyHidden.d.ts +1 -1
  340. package/lib/components/VisuallyHidden/VisuallyHidden.js +11 -0
  341. package/lib/components/VisuallyHidden/index.cjs +9 -0
  342. package/lib/components/VisuallyHidden/index.d.ts +1 -1
  343. package/lib/components/VisuallyHidden/index.d.ts.map +1 -1
  344. package/lib/components/VisuallyHidden/index.js +1 -0
  345. package/lib/components/index.cjs +274 -0
  346. package/lib/components/index.d.ts +42 -42
  347. package/lib/components/index.d.ts.map +1 -1
  348. package/lib/components/index.js +85 -0
  349. package/lib/components/private/Icon.cjs +15 -0
  350. package/lib/components/private/Icon.d.ts +2 -1
  351. package/lib/components/private/Icon.d.ts.map +1 -1
  352. package/lib/components/private/Icon.js +11 -0
  353. package/lib/components/private/useDismissible.cjs +78 -0
  354. package/lib/components/private/useDismissible.d.ts +1 -1
  355. package/lib/components/private/useDismissible.js +51 -0
  356. package/lib/index.cjs +274 -0
  357. package/lib/index.d.ts +1 -1
  358. package/lib/index.d.ts.map +1 -1
  359. package/lib/index.js +85 -2174
  360. package/lib/primitive.cjs +84 -0
  361. package/lib/primitive.d.ts +11 -11
  362. package/lib/primitive.js +11 -31
  363. package/lib/utils/createStyleContext.cjs +76 -0
  364. package/lib/utils/createStyleContext.js +72 -0
  365. package/lib/utils/createWithStateProps.cjs +23 -0
  366. package/lib/utils/createWithStateProps.d.ts +2 -1
  367. package/lib/utils/createWithStateProps.d.ts.map +1 -1
  368. package/lib/utils/createWithStateProps.js +19 -0
  369. package/lib/utils/styled.cjs +190 -0
  370. package/lib/utils/styled.d.ts +3 -2
  371. package/lib/utils/styled.d.ts.map +1 -1
  372. package/lib/utils/styled.js +185 -0
  373. package/lib/vars.cjs +14 -0
  374. package/lib/vars.d.ts +1 -1
  375. package/lib/vars.js +1 -21
  376. package/package.json +16 -25
  377. package/src/components/LinkContent/LinkContent.tsx +19 -0
  378. package/src/components/LinkContent/index.ts +4 -0
  379. package/src/components/index.ts +1 -1
  380. package/lib/components/LinkWithIcon/LinkWithIcon.d.ts +0 -8
  381. package/lib/components/LinkWithIcon/LinkWithIcon.d.ts.map +0 -1
  382. package/lib/components/LinkWithIcon/index.d.ts +0 -2
  383. package/lib/components/LinkWithIcon/index.d.ts.map +0 -1
  384. package/lib/index.js.map +0 -7
  385. package/lib/index.mjs +0 -2184
  386. package/lib/index.mjs.map +0 -7
  387. package/lib/primitive.js.map +0 -7
  388. package/lib/primitive.mjs +0 -13
  389. package/lib/primitive.mjs.map +0 -7
  390. package/lib/seed.css +0 -5017
  391. package/lib/seed.min.css +0 -1
  392. package/lib/vars.js.map +0 -7
  393. package/lib/vars.mjs +0 -3
  394. package/lib/vars.mjs.map +0 -7
  395. package/src/components/LinkWithIcon/LinkWithIcon.tsx +0 -22
  396. package/src/components/LinkWithIcon/index.ts +0 -4
  397. /package/src/components/Count/{index.tsx → index.ts} +0 -0
  398. /package/src/components/Icon/{index.tsx → index.ts} +0 -0
  399. /package/src/components/Text/{index.tsx → index.ts} +0 -0
  400. /package/src/components/TextField/{TextField.namespace.tsx → TextField.namespace.ts} +0 -0
  401. /package/src/components/TextField/{index.tsx → index.ts} +0 -0
  402. /package/src/components/VisuallyHidden/{index.tsx → index.ts} +0 -0
  403. /package/src/{index.tsx → index.ts} +0 -0
package/lib/seed.css DELETED
@@ -1,5017 +0,0 @@
1
- :root {
2
- --seed-safe-area-top: 0px;
3
- --seed-safe-area-bottom: 0px;
4
- }
5
-
6
- @supports (left: constant(safe-area-inset-left)) {
7
- :root {
8
- --seed-safe-area-top: constant(safe-area-inset-top);
9
- --seed-safe-area-bottom: constant(safe-area-inset-bottom);
10
- }
11
- }
12
-
13
- @supports (left: env(safe-area-inset-left)) {
14
- :root {
15
- --seed-safe-area-top: env(safe-area-inset-top);
16
- --seed-safe-area-bottom: env(safe-area-inset-bottom);
17
- }
18
- }
19
-
20
- .seed-loading-indicator {
21
- display: inline-flex;
22
- position: absolute;
23
- }
24
-
25
- .seed-icon, .seed-prefix-icon, .seed-suffix-icon {
26
- flex-shrink: 0;
27
- justify-content: center;
28
- align-items: center;
29
- display: inline-flex;
30
- }
31
-
32
- .seed-icon {
33
- width: var(--seed-icon-size);
34
- height: var(--seed-icon-size);
35
- color: var(--seed-icon-color, currentColor);
36
- }
37
-
38
- .seed-prefix-icon {
39
- width: var(--seed-prefix-icon-size);
40
- height: var(--seed-prefix-icon-size);
41
- margin-left: var(--seed-prefix-icon-margin-left);
42
- margin-right: var(--seed-prefix-icon-margin-right);
43
- margin-top: var(--seed-prefix-icon-margin-top);
44
- color: var(--seed-prefix-icon-color, currentColor);
45
- }
46
-
47
- .seed-suffix-icon {
48
- width: var(--seed-suffix-icon-size);
49
- height: var(--seed-suffix-icon-size);
50
- margin-left: var(--seed-suffix-icon-margin-left);
51
- margin-right: var(--seed-suffix-icon-margin-right);
52
- margin-top: var(--seed-suffix-icon-margin-top);
53
- color: var(--seed-suffix-icon-color, currentColor);
54
- }
55
-
56
- .seed-count {
57
- font-size: var(--seed-count-font-size);
58
- line-height: var(--seed-count-line-height);
59
- font-weight: var(--seed-count-font-weight);
60
- color: var(--seed-count-color);
61
- }
62
-
63
- .seed-box {
64
- --seed-box-background: initial;
65
- --seed-box-color: initial;
66
- background-color: var(--seed-box-background);
67
- color: var(--seed-box-color);
68
- --seed-box-border-style: solid;
69
- --seed-box-border-color: initial;
70
- border-style: var(--seed-box-border-style);
71
- border-color: var(--seed-box-border-color);
72
- --seed-box-border-width: 0;
73
- --seed-box-border-top-width: var(--seed-box-border-width);
74
- --seed-box-border-bottom-width: var(--seed-box-border-width);
75
- --seed-box-border-left-width: var(--seed-box-border-width);
76
- --seed-box-border-right-width: var(--seed-box-border-width);
77
- border-top-width: var(--seed-box-border-top-width);
78
- border-bottom-width: var(--seed-box-border-bottom-width);
79
- border-left-width: var(--seed-box-border-left-width);
80
- border-right-width: var(--seed-box-border-right-width);
81
- --seed-box-padding: 0;
82
- --seed-box-padding-y: var(--seed-box-padding);
83
- --seed-box-padding-x: var(--seed-box-padding);
84
- --seed-box-padding-bottom: var(--seed-box-padding-y);
85
- --seed-box-padding-top: var(--seed-box-padding-y);
86
- --seed-box-padding-left: var(--seed-box-padding-x);
87
- --seed-box-padding-right: var(--seed-box-padding-x);
88
- padding-top: var(--seed-box-padding-top);
89
- padding-bottom: var(--seed-box-padding-bottom);
90
- padding-left: var(--seed-box-padding-left);
91
- padding-right: var(--seed-box-padding-right);
92
- --seed-box-min-height: initial;
93
- --seed-box-max-height: initial;
94
- --seed-box-height: initial;
95
- --seed-box-min-width: initial;
96
- --seed-box-max-width: initial;
97
- --seed-box-width: initial;
98
- min-height: var(--seed-box-min-height);
99
- max-height: var(--seed-box-max-height);
100
- height: var(--seed-box-height);
101
- min-width: var(--seed-box-min-width);
102
- max-width: var(--seed-box-max-width);
103
- width: var(--seed-box-width);
104
- --seed-box-top: initial;
105
- --seed-box-bottom: initial;
106
- --seed-box-left: initial;
107
- --seed-box-right: initial;
108
- top: var(--seed-box-top);
109
- bottom: var(--seed-box-bottom);
110
- left: var(--seed-box-left);
111
- right: var(--seed-box-right);
112
- --seed-box-border-radius: initial;
113
- --seed-box-border-bottom-left-radius: var(--seed-box-border-radius);
114
- --seed-box-border-bottom-right-radius: var(--seed-box-border-radius);
115
- --seed-box-border-top-left-radius: var(--seed-box-border-radius);
116
- --seed-box-border-top-right-radius: var(--seed-box-border-radius);
117
- border-bottom-left-radius: var(--seed-box-border-bottom-left-radius);
118
- border-bottom-right-radius: var(--seed-box-border-bottom-right-radius);
119
- border-top-left-radius: var(--seed-box-border-top-left-radius);
120
- border-top-right-radius: var(--seed-box-border-top-right-radius);
121
- --seed-box-display: block;
122
- --seed-box-position: initial;
123
- display: var(--seed-box-display);
124
- position: var(--seed-box-position);
125
- --seed-box-overflow-x: initial;
126
- --seed-box-overflow-y: initial;
127
- overflow-x: var(--seed-box-overflow-x);
128
- overflow-y: var(--seed-box-overflow-y);
129
- --seed-box-flex-grow: initial;
130
- --seed-box-flex-shrink: initial;
131
- flex-grow: var(--seed-box-flex-grow);
132
- flex-shrink: var(--seed-box-flex-shrink);
133
- --seed-box-flex-direction: initial;
134
- --seed-box-flex-wrap: initial;
135
- --seed-box-justify-content: initial;
136
- --seed-box-align-items: stretch;
137
- --seed-box-align-content: stretch;
138
- --seed-box-align-self: auto;
139
- --seed-box-gap: initial;
140
- flex-direction: var(--seed-box-flex-direction);
141
- flex-wrap: var(--seed-box-flex-wrap);
142
- justify-content: var(--seed-box-justify-content);
143
- align-items: var(--seed-box-align-items);
144
- align-content: var(--seed-box-align-content);
145
- align-self: var(--seed-box-align-self);
146
- gap: var(--seed-box-gap);
147
- }
148
-
149
- .seed-consistent-width:before {
150
- content: attr(data-text);
151
- visibility: hidden;
152
- height: 0;
153
- font-weight: var(--seed-font-weight-regular);
154
- display: block;
155
- }
156
-
157
- .seed-consistent-width:after {
158
- content: attr(data-text);
159
- visibility: hidden;
160
- height: 0;
161
- font-weight: var(--seed-font-weight-bold);
162
- display: block;
163
- }
164
-
165
- :root[data-seed] {
166
- color-scheme: light dark;
167
- }
168
-
169
- :root[data-seed="light-only"] {
170
- color-scheme: light;
171
- }
172
-
173
- :root[data-seed="dark-only"] {
174
- color-scheme: dark;
175
- }
176
-
177
- :root[data-seed] {
178
- --seed-dimension-x0_5: 2px;
179
- --seed-dimension-x1: 4px;
180
- --seed-dimension-x1_5: 6px;
181
- --seed-dimension-x2: 8px;
182
- --seed-dimension-x2_5: 10px;
183
- --seed-dimension-x3: 12px;
184
- --seed-dimension-x3_5: 14px;
185
- --seed-dimension-x4: 16px;
186
- --seed-dimension-x4_5: 18px;
187
- --seed-dimension-x5: 20px;
188
- --seed-dimension-x6: 24px;
189
- --seed-dimension-x7: 28px;
190
- --seed-dimension-x8: 32px;
191
- --seed-dimension-x9: 36px;
192
- --seed-dimension-x10: 40px;
193
- --seed-dimension-x12: 48px;
194
- --seed-dimension-x13: 52px;
195
- --seed-dimension-x14: 56px;
196
- --seed-dimension-x16: 64px;
197
- --seed-dimension-spacing-x-between-chips: var(--seed-dimension-x2);
198
- --seed-dimension-spacing-x-global-gutter: var(--seed-dimension-x4);
199
- --seed-dimension-spacing-y-component-default: var(--seed-dimension-x3);
200
- --seed-dimension-spacing-y-nav-to-title: var(--seed-dimension-x5);
201
- --seed-duration-d1: 50ms;
202
- --seed-duration-d2: .1s;
203
- --seed-duration-d3: .15s;
204
- --seed-duration-d4: .2s;
205
- --seed-duration-d5: .25s;
206
- --seed-duration-d6: .3s;
207
- --seed-font-size-t1: .6875rem;
208
- --seed-font-size-t2: .75rem;
209
- --seed-font-size-t3: .8125rem;
210
- --seed-font-size-t4: .875rem;
211
- --seed-font-size-t5: 1rem;
212
- --seed-font-size-t6: 1.125rem;
213
- --seed-font-size-t7: 1.25rem;
214
- --seed-font-size-t8: 1.375rem;
215
- --seed-font-size-t9: 1.5rem;
216
- --seed-font-size-t10: 1.625rem;
217
- --seed-font-size-t2-static: 12px;
218
- --seed-font-size-t5-static: 16px;
219
- --seed-font-size-t6-static: 18px;
220
- --seed-font-weight-regular: 400;
221
- --seed-font-weight-medium: 500;
222
- --seed-font-weight-bold: 700;
223
- --seed-line-height-t1: .9375rem;
224
- --seed-line-height-t2: 1rem;
225
- --seed-line-height-t3: 1.125rem;
226
- --seed-line-height-t4: 1.1875rem;
227
- --seed-line-height-t5: 1.375rem;
228
- --seed-line-height-t6: 1.5rem;
229
- --seed-line-height-t7: 1.6875rem;
230
- --seed-line-height-t8: 1.875rem;
231
- --seed-line-height-t9: 2rem;
232
- --seed-line-height-t10: 2.1875rem;
233
- --seed-radius-r0_5: 2px;
234
- --seed-radius-r1: 4px;
235
- --seed-radius-r1_5: 6px;
236
- --seed-radius-r2: 8px;
237
- --seed-radius-r2_5: 10px;
238
- --seed-radius-r3: 12px;
239
- --seed-radius-r3_5: 14px;
240
- --seed-radius-r4: 16px;
241
- --seed-radius-r5: 20px;
242
- --seed-radius-r6: 24px;
243
- --seed-radius-full: 9999px;
244
- --seed-timing-function-linear: cubic-bezier(0, 0, 1, 1);
245
- --seed-timing-function-easing: cubic-bezier(.35, 0, .35, 1);
246
- --seed-timing-function-enter: cubic-bezier(0, 0, .15, 1);
247
- --seed-timing-function-exit: cubic-bezier(.35, 0, 1, 1);
248
- --seed-timing-function-enter-expressive: cubic-bezier(.03, .4, .1, 1);
249
- --seed-timing-function-exit-expressive: cubic-bezier(.35, 0, .95, .55);
250
- }
251
-
252
- :root[data-seed][data-seed="light-only"][data-seed-scale-color="dark"], :root[data-seed][data-seed-scale-color="light"]:not([data-seed="dark-only"]), :root[data-seed]:not([data-seed="dark-only"]) [data-seed-scale-color="light"] {
253
- --seed-color-palette-blue-100: #eff6ff;
254
- --seed-color-palette-blue-200: #e2edfc;
255
- --seed-color-palette-blue-300: #cbdffa;
256
- --seed-color-palette-blue-400: #aacefd;
257
- --seed-color-palette-blue-500: #85b8fd;
258
- --seed-color-palette-blue-600: #5e98fe;
259
- --seed-color-palette-blue-700: #217cf9;
260
- --seed-color-palette-blue-800: #135fcd;
261
- --seed-color-palette-blue-900: #0b4596;
262
- --seed-color-palette-blue-1000: #032451;
263
- --seed-color-palette-carrot-100: #fff2ec;
264
- --seed-color-palette-carrot-200: #ffe8db;
265
- --seed-color-palette-carrot-300: #ffd5c0;
266
- --seed-color-palette-carrot-400: #ffb999;
267
- --seed-color-palette-carrot-500: #ff9364;
268
- --seed-color-palette-carrot-600: #f60;
269
- --seed-color-palette-carrot-700: #e84500;
270
- --seed-color-palette-carrot-800: #b93901;
271
- --seed-color-palette-carrot-900: #862b00;
272
- --seed-color-palette-carrot-1000: #471601;
273
- --seed-color-palette-gray-00: #fff;
274
- --seed-color-palette-gray-100: #f7f8f9;
275
- --seed-color-palette-gray-200: #f3f4f5;
276
- --seed-color-palette-gray-300: #eeeff1;
277
- --seed-color-palette-gray-400: #dcdee3;
278
- --seed-color-palette-gray-500: #d1d3d8;
279
- --seed-color-palette-gray-600: #b0b3ba;
280
- --seed-color-palette-gray-700: #868b94;
281
- --seed-color-palette-gray-800: #555d6d;
282
- --seed-color-palette-gray-900: #2a3038;
283
- --seed-color-palette-gray-1000: #1a1c20;
284
- --seed-color-palette-green-100: #edfaf6;
285
- --seed-color-palette-green-200: #d9f6e9;
286
- --seed-color-palette-green-300: #b9e9d2;
287
- --seed-color-palette-green-400: #7ddcb3;
288
- --seed-color-palette-green-500: #42c593;
289
- --seed-color-palette-green-600: #10ab7d;
290
- --seed-color-palette-green-700: #079171;
291
- --seed-color-palette-green-800: #00745f;
292
- --seed-color-palette-green-900: #075445;
293
- --seed-color-palette-green-1000: #0a2b24;
294
- --seed-color-palette-purple-100: #f5f3fe;
295
- --seed-color-palette-purple-200: #efeafe;
296
- --seed-color-palette-purple-300: #e1d8ff;
297
- --seed-color-palette-purple-400: #d0c0ff;
298
- --seed-color-palette-purple-500: #b8a1ff;
299
- --seed-color-palette-purple-600: #9f84fb;
300
- --seed-color-palette-purple-700: #8969ea;
301
- --seed-color-palette-purple-800: #6d50cb;
302
- --seed-color-palette-purple-900: #50379b;
303
- --seed-color-palette-purple-1000: #29175d;
304
- --seed-color-palette-red-100: #fdf0f0;
305
- --seed-color-palette-red-200: #fde7e7;
306
- --seed-color-palette-red-300: #fed4d2;
307
- --seed-color-palette-red-400: #feb7b3;
308
- --seed-color-palette-red-500: #fe928d;
309
- --seed-color-palette-red-600: #fc6a66;
310
- --seed-color-palette-red-700: #fa342c;
311
- --seed-color-palette-red-800: #ca1d13;
312
- --seed-color-palette-red-900: #921708;
313
- --seed-color-palette-red-1000: #4a1209;
314
- --seed-color-palette-static-black: #000;
315
- --seed-color-palette-static-white: #fff;
316
- --seed-color-palette-static-black-alpha-50: #0000000d;
317
- --seed-color-palette-static-black-alpha-200: #0003;
318
- --seed-color-palette-static-black-alpha-500: #00000080;
319
- --seed-color-palette-static-white-alpha-200: #fff3;
320
- --seed-color-palette-static-white-alpha-800: #fffc;
321
- --seed-color-palette-yellow-100: #fff7de;
322
- --seed-color-palette-yellow-200: #fdefb9;
323
- --seed-color-palette-yellow-300: #fbdc65;
324
- --seed-color-palette-yellow-400: #e9c647;
325
- --seed-color-palette-yellow-500: #d4ab28;
326
- --seed-color-palette-yellow-600: #c49725;
327
- --seed-color-palette-yellow-700: #9b7821;
328
- --seed-color-palette-yellow-800: #755b22;
329
- --seed-color-palette-yellow-900: #4f3e1f;
330
- --seed-color-palette-yellow-1000: #2c2512;
331
- --seed-color-fg-brand: var(--seed-color-palette-carrot-600);
332
- --seed-color-fg-critical: var(--seed-color-palette-red-700);
333
- --seed-color-fg-disabled: var(--seed-color-palette-gray-500);
334
- --seed-color-fg-informative: var(--seed-color-palette-blue-700);
335
- --seed-color-fg-magic: var(--seed-color-palette-purple-700);
336
- --seed-color-fg-neutral: var(--seed-color-palette-gray-1000);
337
- --seed-color-fg-placeholder: var(--seed-color-palette-gray-600);
338
- --seed-color-fg-positive: var(--seed-color-palette-green-700);
339
- --seed-color-fg-critical-contrast: var(--seed-color-palette-red-900);
340
- --seed-color-fg-informative-contrast: var(--seed-color-palette-blue-900);
341
- --seed-color-fg-magic-contrast: var(--seed-color-palette-purple-900);
342
- --seed-color-fg-neutral-inverted: var(--seed-color-palette-gray-00);
343
- --seed-color-fg-neutral-muted: var(--seed-color-palette-gray-800);
344
- --seed-color-fg-neutral-subtle: var(--seed-color-palette-gray-700);
345
- --seed-color-fg-positive-contrast: var(--seed-color-palette-green-900);
346
- --seed-color-fg-warning-contrast: var(--seed-color-palette-yellow-900);
347
- --seed-color-bg-disabled: var(--seed-color-palette-gray-200);
348
- --seed-color-bg-overlay: var(--seed-color-palette-static-black-alpha-500);
349
- --seed-color-bg-brand-solid: var(--seed-color-palette-carrot-600);
350
- --seed-color-bg-brand-solid-pressed: var(--seed-color-palette-carrot-700);
351
- --seed-color-bg-critical-solid: var(--seed-color-palette-red-700);
352
- --seed-color-bg-critical-weak: var(--seed-color-palette-red-100);
353
- --seed-color-bg-critical-solid-pressed: var(--seed-color-palette-red-800);
354
- --seed-color-bg-critical-weak-pressed: var(--seed-color-palette-red-200);
355
- --seed-color-bg-informative-solid: var(--seed-color-palette-blue-700);
356
- --seed-color-bg-informative-weak: var(--seed-color-palette-blue-100);
357
- --seed-color-bg-informative-solid-pressed: var(--seed-color-palette-blue-800);
358
- --seed-color-bg-informative-weak-pressed: var(--seed-color-palette-blue-200);
359
- --seed-color-bg-layer-basement: var(--seed-color-palette-gray-200);
360
- --seed-color-bg-layer-default: var(--seed-color-palette-gray-00);
361
- --seed-color-bg-layer-fill: var(--seed-color-palette-gray-100);
362
- --seed-color-bg-layer-floating: var(--seed-color-palette-gray-00);
363
- --seed-color-bg-layer-default-pressed: var(--seed-color-palette-gray-100);
364
- --seed-color-bg-layer-floating-pressed: var(--seed-color-palette-gray-100);
365
- --seed-color-bg-magic-solid: var(--seed-color-palette-purple-700);
366
- --seed-color-bg-magic-weak: var(--seed-color-palette-purple-100);
367
- --seed-color-bg-magic-solid-pressed: var(--seed-color-palette-purple-800);
368
- --seed-color-bg-magic-weak-pressed: var(--seed-color-palette-purple-200);
369
- --seed-color-bg-neutral-inverted: var(--seed-color-palette-gray-900);
370
- --seed-color-bg-neutral-solid: var(--seed-color-palette-gray-1000);
371
- --seed-color-bg-neutral-weak: var(--seed-color-palette-gray-200);
372
- --seed-color-bg-neutral-inverted-pressed: var(--seed-color-palette-gray-800);
373
- --seed-color-bg-neutral-solid-muted: var(--seed-color-palette-gray-800);
374
- --seed-color-bg-neutral-solid-muted-pressed: var(--seed-color-palette-gray-900);
375
- --seed-color-bg-neutral-weak-pressed: var(--seed-color-palette-gray-300);
376
- --seed-color-bg-overlay-muted: var(--seed-color-palette-static-black-alpha-200);
377
- --seed-color-bg-positive-solid: var(--seed-color-palette-green-700);
378
- --seed-color-bg-positive-weak: var(--seed-color-palette-green-100);
379
- --seed-color-bg-positive-solid-pressed: var(--seed-color-palette-green-800);
380
- --seed-color-bg-positive-weak-pressed: var(--seed-color-palette-green-200);
381
- --seed-color-bg-warning-solid: var(--seed-color-palette-yellow-300);
382
- --seed-color-bg-warning-weak: var(--seed-color-palette-yellow-100);
383
- --seed-color-bg-warning-weak-pressed: var(--seed-color-palette-yellow-200);
384
- --seed-color-stroke-brand: var(--seed-color-palette-carrot-300);
385
- --seed-color-stroke-control: var(--seed-color-palette-gray-400);
386
- --seed-color-stroke-critical: var(--seed-color-palette-red-300);
387
- --seed-color-stroke-field: var(--seed-color-palette-gray-400);
388
- --seed-color-stroke-informative: var(--seed-color-palette-blue-300);
389
- --seed-color-stroke-neutral: var(--seed-color-palette-gray-300);
390
- --seed-color-stroke-positive: var(--seed-color-palette-green-300);
391
- --seed-color-stroke-field-focused: var(--seed-color-palette-gray-800);
392
- --seed-color-stroke-neutral-muted: var(--seed-color-palette-gray-200);
393
- --seed-color-stroke-on-image: var(--seed-color-palette-static-black-alpha-50);
394
- --seed-color-manner-temp-l1-bg: #eff0f1;
395
- --seed-color-manner-temp-l1-text: #62666a;
396
- --seed-color-manner-temp-l2-bg: #e7f2fc;
397
- --seed-color-manner-temp-l2-text: #2592f7;
398
- --seed-color-manner-temp-l3-bg: #e3f6fc;
399
- --seed-color-manner-temp-l3-text: #0099c8;
400
- --seed-color-manner-temp-l4-bg: #ebf9f4;
401
- --seed-color-manner-temp-l4-text: #03a07e;
402
- --seed-color-manner-temp-l5-bg: #fff5e5;
403
- --seed-color-manner-temp-l5-text: #d28500;
404
- --seed-color-manner-temp-l6-bg: #fff0e5;
405
- --seed-color-manner-temp-l6-text: #f06000;
406
- --seed-gradient-shimmer: #fff0 0%, #fff6 46%, #fff6 54%, #fff0 100%;
407
- }
408
-
409
- :root[data-seed][data-seed="dark-only"][data-seed-scale-color="light"], :root[data-seed][data-seed-scale-color="dark"]:not([data-seed="light-only"]), :root[data-seed]:not([data-seed="light-only"]) [data-seed-scale-color="dark"] {
410
- --seed-color-palette-blue-100: #202742;
411
- --seed-color-palette-blue-200: #1e3352;
412
- --seed-color-palette-blue-300: #1a4275;
413
- --seed-color-palette-blue-400: #0f559e;
414
- --seed-color-palette-blue-500: #1964d8;
415
- --seed-color-palette-blue-600: #1e82eb;
416
- --seed-color-palette-blue-700: #41a2f9;
417
- --seed-color-palette-blue-800: #83bcf9;
418
- --seed-color-palette-blue-900: #b9d7fb;
419
- --seed-color-palette-blue-1000: #e5f0fe;
420
- --seed-color-palette-carrot-100: #31241f;
421
- --seed-color-palette-carrot-200: #4b291c;
422
- --seed-color-palette-carrot-300: #6b311c;
423
- --seed-color-palette-carrot-400: #923600;
424
- --seed-color-palette-carrot-500: #bd4201;
425
- --seed-color-palette-carrot-600: #e65200;
426
- --seed-color-palette-carrot-700: #f60;
427
- --seed-color-palette-carrot-800: #ff9e65;
428
- --seed-color-palette-carrot-900: #eecebc;
429
- --seed-color-palette-carrot-1000: #f4eeea;
430
- --seed-color-palette-gray-00: #000;
431
- --seed-color-palette-gray-100: #16171b;
432
- --seed-color-palette-gray-200: #1b1c22;
433
- --seed-color-palette-gray-300: #2c2f35;
434
- --seed-color-palette-gray-400: #393d46;
435
- --seed-color-palette-gray-500: #5b606a;
436
- --seed-color-palette-gray-600: #868b94;
437
- --seed-color-palette-gray-700: #b0b3ba;
438
- --seed-color-palette-gray-800: #dcdee3;
439
- --seed-color-palette-gray-900: #e9eaec;
440
- --seed-color-palette-gray-1000: #f3f4f5;
441
- --seed-color-palette-green-100: #202926;
442
- --seed-color-palette-green-200: #20362e;
443
- --seed-color-palette-green-300: #20493b;
444
- --seed-color-palette-green-400: #19604c;
445
- --seed-color-palette-green-500: #117956;
446
- --seed-color-palette-green-600: #1b946d;
447
- --seed-color-palette-green-700: #22b27f;
448
- --seed-color-palette-green-800: #35ce9a;
449
- --seed-color-palette-green-900: #93e5c0;
450
- --seed-color-palette-green-1000: #d4f6ef;
451
- --seed-color-palette-purple-100: #28213b;
452
- --seed-color-palette-purple-200: #3b2873;
453
- --seed-color-palette-purple-300: #443081;
454
- --seed-color-palette-purple-400: #5a3bb1;
455
- --seed-color-palette-purple-500: #764fd9;
456
- --seed-color-palette-purple-600: #8e6bee;
457
- --seed-color-palette-purple-700: #a78df0;
458
- --seed-color-palette-purple-800: #beadf2;
459
- --seed-color-palette-purple-900: #d9cefa;
460
- --seed-color-palette-purple-1000: #f0edfc;
461
- --seed-color-palette-red-100: #322323;
462
- --seed-color-palette-red-200: #4f2624;
463
- --seed-color-palette-red-300: #742826;
464
- --seed-color-palette-red-400: #a12621;
465
- --seed-color-palette-red-500: #ca2319;
466
- --seed-color-palette-red-600: #f73526;
467
- --seed-color-palette-red-700: #ff6e60;
468
- --seed-color-palette-red-800: #ffa299;
469
- --seed-color-palette-red-900: #f8c5c3;
470
- --seed-color-palette-red-1000: #fdf2f2;
471
- --seed-color-palette-static-black: #000;
472
- --seed-color-palette-static-white: #fff;
473
- --seed-color-palette-static-black-alpha-50: #0000000d;
474
- --seed-color-palette-static-black-alpha-200: #0003;
475
- --seed-color-palette-static-black-alpha-500: #00000080;
476
- --seed-color-palette-static-white-alpha-200: #fff3;
477
- --seed-color-palette-static-white-alpha-800: #fffc;
478
- --seed-color-palette-yellow-100: #302819;
479
- --seed-color-palette-yellow-200: #413218;
480
- --seed-color-palette-yellow-300: #543e15;
481
- --seed-color-palette-yellow-400: #714e15;
482
- --seed-color-palette-yellow-500: #91601b;
483
- --seed-color-palette-yellow-600: #b6720d;
484
- --seed-color-palette-yellow-700: #ca901c;
485
- --seed-color-palette-yellow-800: #dab156;
486
- --seed-color-palette-yellow-900: #e5d49b;
487
- --seed-color-palette-yellow-1000: #f7f0cd;
488
- --seed-color-fg-brand: var(--seed-color-palette-carrot-700);
489
- --seed-color-fg-critical: var(--seed-color-palette-red-700);
490
- --seed-color-fg-disabled: var(--seed-color-palette-gray-500);
491
- --seed-color-fg-informative: var(--seed-color-palette-blue-700);
492
- --seed-color-fg-magic: var(--seed-color-palette-purple-700);
493
- --seed-color-fg-neutral: var(--seed-color-palette-gray-1000);
494
- --seed-color-fg-placeholder: var(--seed-color-palette-gray-600);
495
- --seed-color-fg-positive: var(--seed-color-palette-green-700);
496
- --seed-color-fg-critical-contrast: var(--seed-color-palette-red-900);
497
- --seed-color-fg-informative-contrast: var(--seed-color-palette-blue-900);
498
- --seed-color-fg-magic-contrast: var(--seed-color-palette-purple-900);
499
- --seed-color-fg-neutral-inverted: var(--seed-color-palette-gray-100);
500
- --seed-color-fg-neutral-muted: var(--seed-color-palette-gray-800);
501
- --seed-color-fg-neutral-subtle: var(--seed-color-palette-gray-700);
502
- --seed-color-fg-positive-contrast: var(--seed-color-palette-green-900);
503
- --seed-color-fg-warning-contrast: var(--seed-color-palette-yellow-900);
504
- --seed-color-bg-disabled: var(--seed-color-palette-gray-300);
505
- --seed-color-bg-overlay: var(--seed-color-palette-static-black-alpha-500);
506
- --seed-color-bg-brand-solid: var(--seed-color-palette-carrot-700);
507
- --seed-color-bg-brand-solid-pressed: var(--seed-color-palette-carrot-800);
508
- --seed-color-bg-critical-solid: var(--seed-color-palette-red-600);
509
- --seed-color-bg-critical-weak: var(--seed-color-palette-red-100);
510
- --seed-color-bg-critical-solid-pressed: var(--seed-color-palette-red-700);
511
- --seed-color-bg-critical-weak-pressed: var(--seed-color-palette-red-200);
512
- --seed-color-bg-informative-solid: var(--seed-color-palette-blue-600);
513
- --seed-color-bg-informative-weak: var(--seed-color-palette-blue-100);
514
- --seed-color-bg-informative-solid-pressed: var(--seed-color-palette-blue-700);
515
- --seed-color-bg-informative-weak-pressed: var(--seed-color-palette-blue-200);
516
- --seed-color-bg-layer-basement: var(--seed-color-palette-gray-00);
517
- --seed-color-bg-layer-default: var(--seed-color-palette-gray-100);
518
- --seed-color-bg-layer-fill: var(--seed-color-palette-gray-200);
519
- --seed-color-bg-layer-floating: var(--seed-color-palette-gray-200);
520
- --seed-color-bg-layer-default-pressed: var(--seed-color-palette-gray-300);
521
- --seed-color-bg-layer-floating-pressed: var(--seed-color-palette-gray-300);
522
- --seed-color-bg-magic-solid: var(--seed-color-palette-purple-600);
523
- --seed-color-bg-magic-weak: var(--seed-color-palette-purple-100);
524
- --seed-color-bg-magic-solid-pressed: var(--seed-color-palette-purple-700);
525
- --seed-color-bg-magic-weak-pressed: var(--seed-color-palette-purple-200);
526
- --seed-color-bg-neutral-inverted: var(--seed-color-palette-gray-1000);
527
- --seed-color-bg-neutral-solid: var(--seed-color-palette-gray-300);
528
- --seed-color-bg-neutral-weak: var(--seed-color-palette-gray-300);
529
- --seed-color-bg-neutral-inverted-pressed: var(--seed-color-palette-gray-800);
530
- --seed-color-bg-neutral-solid-muted: var(--seed-color-palette-gray-400);
531
- --seed-color-bg-neutral-solid-muted-pressed: var(--seed-color-palette-gray-500);
532
- --seed-color-bg-neutral-weak-pressed: var(--seed-color-palette-gray-400);
533
- --seed-color-bg-overlay-muted: var(--seed-color-palette-static-black-alpha-200);
534
- --seed-color-bg-positive-solid: var(--seed-color-palette-green-500);
535
- --seed-color-bg-positive-weak: var(--seed-color-palette-green-100);
536
- --seed-color-bg-positive-solid-pressed: var(--seed-color-palette-green-500);
537
- --seed-color-bg-positive-weak-pressed: var(--seed-color-palette-green-200);
538
- --seed-color-bg-warning-solid: var(--seed-color-palette-yellow-600);
539
- --seed-color-bg-warning-weak: var(--seed-color-palette-yellow-100);
540
- --seed-color-bg-warning-weak-pressed: var(--seed-color-palette-yellow-200);
541
- --seed-color-stroke-brand: var(--seed-color-palette-carrot-300);
542
- --seed-color-stroke-control: var(--seed-color-palette-gray-400);
543
- --seed-color-stroke-critical: var(--seed-color-palette-red-300);
544
- --seed-color-stroke-field: var(--seed-color-palette-gray-400);
545
- --seed-color-stroke-informative: var(--seed-color-palette-blue-300);
546
- --seed-color-stroke-neutral: var(--seed-color-palette-gray-300);
547
- --seed-color-stroke-positive: var(--seed-color-palette-green-300);
548
- --seed-color-stroke-field-focused: var(--seed-color-palette-gray-800);
549
- --seed-color-stroke-neutral-muted: var(--seed-color-palette-gray-200);
550
- --seed-color-stroke-on-image: var(--seed-color-palette-static-black-alpha-50);
551
- --seed-color-manner-temp-l1-bg: #222226;
552
- --seed-color-manner-temp-l1-text: #b1b5b9;
553
- --seed-color-manner-temp-l2-bg: #16212b;
554
- --seed-color-manner-temp-l2-text: #7cbaf4;
555
- --seed-color-manner-temp-l3-bg: #12262c;
556
- --seed-color-manner-temp-l3-text: #47c3eb;
557
- --seed-color-manner-temp-l4-bg: #162822;
558
- --seed-color-manner-temp-l4-text: #33cc94;
559
- --seed-color-manner-temp-l5-bg: #2e2312;
560
- --seed-color-manner-temp-l5-text: #ffa100;
561
- --seed-color-manner-temp-l6-bg: #2e1d12;
562
- --seed-color-manner-temp-l6-text: #ff9147;
563
- --seed-gradient-shimmer: #fff0 0%, #ffffff1a 46%, #ffffff1a 54%, #fff0 100%;
564
- }
565
-
566
- .seed-avatar__root {
567
- box-sizing: border-box;
568
- vertical-align: top;
569
- border-radius: var(--seed-radius-full);
570
- justify-content: center;
571
- align-items: center;
572
- display: inline-flex;
573
- position: relative;
574
- }
575
-
576
- .seed-avatar__image {
577
- object-fit: cover;
578
- border-radius: var(--seed-radius-full);
579
- width: 100%;
580
- height: 100%;
581
- display: block;
582
- overflow: hidden;
583
- }
584
-
585
- .seed-avatar__image:not([data-loading-status="loaded"]) {
586
- display: none;
587
- }
588
-
589
- .seed-avatar__fallback {
590
- object-fit: cover;
591
- border-radius: var(--seed-radius-full);
592
- justify-content: center;
593
- align-items: center;
594
- width: 100%;
595
- height: 100%;
596
- display: flex;
597
- overflow: hidden;
598
- }
599
-
600
- .seed-avatar__fallback[data-loading-status="loaded"] {
601
- display: none;
602
- }
603
-
604
- .seed-avatar__badge {
605
- box-sizing: border-box;
606
- z-index: 1;
607
- background: var(--seed-color-bg-layer-default);
608
- border-radius: var(--seed-radius-full);
609
- justify-content: center;
610
- align-items: center;
611
- display: flex;
612
- position: absolute;
613
- }
614
-
615
- .seed-avatar__root--size_20 {
616
- width: 20px;
617
- height: 20px;
618
- }
619
-
620
- .seed-avatar__badge--size_20 {
621
- width: 10px;
622
- height: 10px;
623
- top: 12.0721px;
624
- left: 12.0721px;
625
- }
626
-
627
- .seed-avatar__root--size_24 {
628
- width: 24px;
629
- height: 24px;
630
- }
631
-
632
- .seed-avatar__badge--size_24 {
633
- width: 12px;
634
- height: 12px;
635
- top: 14.4866px;
636
- left: 14.4866px;
637
- }
638
-
639
- .seed-avatar__root--size_36 {
640
- width: 36px;
641
- height: 36px;
642
- }
643
-
644
- .seed-avatar__badge--size_36 {
645
- width: 16px;
646
- height: 16px;
647
- top: 22.7298px;
648
- left: 22.7298px;
649
- }
650
-
651
- .seed-avatar__root--size_48 {
652
- width: 48px;
653
- height: 48px;
654
- }
655
-
656
- .seed-avatar__badge--size_48 {
657
- width: 24px;
658
- height: 24px;
659
- top: 28.9731px;
660
- left: 28.9731px;
661
- }
662
-
663
- .seed-avatar__root--size_64 {
664
- width: 64px;
665
- height: 64px;
666
- }
667
-
668
- .seed-avatar__badge--size_64 {
669
- width: 24px;
670
- height: 24px;
671
- top: 42.6308px;
672
- left: 42.6308px;
673
- }
674
-
675
- .seed-avatar__root--size_80 {
676
- width: 80px;
677
- height: 80px;
678
- }
679
-
680
- .seed-avatar__badge--size_80 {
681
- width: 24px;
682
- height: 24px;
683
- top: 56.2885px;
684
- left: 56.2885px;
685
- }
686
-
687
- .seed-avatar__root--size_96 {
688
- width: 96px;
689
- height: 96px;
690
- }
691
-
692
- .seed-avatar__badge--size_96 {
693
- width: 32px;
694
- height: 32px;
695
- top: 65.9463px;
696
- left: 65.9463px;
697
- }
698
-
699
- .seed-avatar-stack__root {
700
- box-sizing: border-box;
701
- align-items: center;
702
- display: inline-flex;
703
- }
704
-
705
- .seed-avatar-stack__item {
706
- border-radius: var(--seed-radius-full);
707
- background-clip: padding-box;
708
- display: block;
709
- }
710
-
711
- .seed-avatar-stack__item--size_20:not(:first-child) {
712
- margin-left: -5px;
713
- }
714
-
715
- .seed-avatar-stack__item--size_20 {
716
- clip-path: inset(-2px);
717
- box-shadow: 0 0 0 2px var(--seed-color-bg-layer-default);
718
- }
719
-
720
- .seed-avatar-stack__item--size_24:not(:first-child) {
721
- margin-left: -6px;
722
- }
723
-
724
- .seed-avatar-stack__item--size_24 {
725
- clip-path: inset(-2px);
726
- box-shadow: 0 0 0 2px var(--seed-color-bg-layer-default);
727
- }
728
-
729
- .seed-avatar-stack__item--size_36:not(:first-child) {
730
- margin-left: -8px;
731
- }
732
-
733
- .seed-avatar-stack__item--size_36 {
734
- clip-path: inset(-3px);
735
- box-shadow: 0 0 0 3px var(--seed-color-bg-layer-default);
736
- }
737
-
738
- .seed-avatar-stack__item--size_48:not(:first-child) {
739
- margin-left: -10px;
740
- }
741
-
742
- .seed-avatar-stack__item--size_48 {
743
- clip-path: inset(-4px);
744
- box-shadow: 0 0 0 4px var(--seed-color-bg-layer-default);
745
- }
746
-
747
- .seed-avatar-stack__item--size_64:not(:first-child) {
748
- margin-left: -10px;
749
- }
750
-
751
- .seed-avatar-stack__item--size_64 {
752
- clip-path: inset(-4px);
753
- box-shadow: 0 0 0 4px var(--seed-color-bg-layer-default);
754
- }
755
-
756
- .seed-action-button__root {
757
- box-sizing: border-box;
758
- cursor: pointer;
759
- text-transform: none;
760
- -webkit-font-smoothing: antialiased;
761
- -moz-osx-font-smoothing: grayscale;
762
- border: none;
763
- flex-shrink: 0;
764
- justify-content: center;
765
- align-items: center;
766
- font-family: inherit;
767
- text-decoration: none;
768
- display: inline-flex;
769
- }
770
-
771
- .seed-action-button__root:is(:focus, [data-focus]) {
772
- outline: none;
773
- }
774
-
775
- .seed-action-button__root:is(:disabled, [disabled], [data-disabled]) {
776
- cursor: not-allowed;
777
- }
778
-
779
- .seed-action-button__root {
780
- transition: background-color var(--seed-duration-d4) var(--seed-timing-function-easing);
781
- font-weight: var(--seed-font-weight-bold);
782
- }
783
-
784
- .seed-action-button__root--variant_brandSolid {
785
- background: var(--seed-color-bg-brand-solid);
786
- color: var(--seed-color-palette-static-white);
787
- --seed-prefix-icon-color: var(--seed-color-palette-static-white);
788
- --seed-suffix-icon-color: var(--seed-color-palette-static-white);
789
- --seed-icon-color: var(--seed-color-palette-static-white);
790
- --track-color: var(--seed-color-palette-static-white-alpha-200);
791
- --range-color: var(--seed-color-palette-static-white);
792
- }
793
-
794
- .seed-action-button__root--variant_brandSolid:is(:active, [data-active]) {
795
- background: var(--seed-color-bg-brand-solid-pressed);
796
- }
797
-
798
- .seed-action-button__root--variant_brandSolid:is(:disabled, [disabled], [data-disabled]) {
799
- background: var(--seed-color-bg-disabled);
800
- color: var(--seed-color-fg-disabled);
801
- --seed-prefix-icon-color: var(--seed-color-fg-disabled);
802
- --seed-suffix-icon-color: var(--seed-color-fg-disabled);
803
- --seed-icon-color: var(--seed-color-fg-disabled);
804
- }
805
-
806
- .seed-action-button__root--variant_brandSolid[data-loading] {
807
- background: var(--seed-color-bg-brand-solid-pressed);
808
- }
809
-
810
- .seed-action-button__root--variant_neutralSolid {
811
- background: var(--seed-color-bg-neutral-inverted);
812
- color: var(--seed-color-fg-neutral-inverted);
813
- --seed-prefix-icon-color: var(--seed-color-fg-neutral-inverted);
814
- --seed-suffix-icon-color: var(--seed-color-fg-neutral-inverted);
815
- --seed-icon-color: var(--seed-color-fg-neutral-inverted);
816
- --track-color: var(--seed-color-palette-static-white-alpha-200);
817
- --range-color: var(--seed-color-palette-static-white);
818
- }
819
-
820
- .seed-action-button__root--variant_neutralSolid:is(:active, [data-active]) {
821
- background: var(--seed-color-bg-neutral-inverted-pressed);
822
- }
823
-
824
- .seed-action-button__root--variant_neutralSolid:is(:disabled, [disabled], [data-disabled]) {
825
- background: var(--seed-color-bg-disabled);
826
- color: var(--seed-color-fg-disabled);
827
- --seed-prefix-icon-color: var(--seed-color-fg-disabled);
828
- --seed-suffix-icon-color: var(--seed-color-fg-disabled);
829
- --seed-icon-color: var(--seed-color-fg-disabled);
830
- }
831
-
832
- .seed-action-button__root--variant_neutralSolid[data-loading] {
833
- background: var(--seed-color-bg-neutral-inverted-pressed);
834
- }
835
-
836
- .seed-action-button__root--variant_neutralWeak {
837
- background: var(--seed-color-bg-neutral-weak);
838
- color: var(--seed-color-fg-neutral);
839
- --seed-prefix-icon-color: var(--seed-color-fg-neutral);
840
- --seed-suffix-icon-color: var(--seed-color-fg-neutral);
841
- --seed-icon-color: var(--seed-color-fg-neutral);
842
- --track-color: var(--seed-color-palette-gray-500);
843
- --range-color: var(--seed-color-fg-neutral);
844
- }
845
-
846
- .seed-action-button__root--variant_neutralWeak:is(:active, [data-active]) {
847
- background: var(--seed-color-bg-neutral-weak-pressed);
848
- }
849
-
850
- .seed-action-button__root--variant_neutralWeak:is(:disabled, [disabled], [data-disabled]) {
851
- background: var(--seed-color-bg-disabled);
852
- color: var(--seed-color-fg-disabled);
853
- --seed-prefix-icon-color: var(--seed-color-fg-disabled);
854
- --seed-suffix-icon-color: var(--seed-color-fg-disabled);
855
- --seed-icon-color: var(--seed-color-fg-disabled);
856
- }
857
-
858
- .seed-action-button__root--variant_neutralWeak[data-loading] {
859
- background: var(--seed-color-bg-neutral-weak-pressed);
860
- }
861
-
862
- .seed-action-button__root--variant_criticalSolid {
863
- background: var(--seed-color-bg-critical-solid);
864
- color: var(--seed-color-palette-static-white);
865
- --seed-prefix-icon-color: var(--seed-color-palette-static-white);
866
- --seed-suffix-icon-color: var(--seed-color-palette-static-white);
867
- --seed-icon-color: var(--seed-color-palette-static-white);
868
- --track-color: var(--seed-color-palette-static-white-alpha-200);
869
- --range-color: var(--seed-color-palette-static-white);
870
- }
871
-
872
- .seed-action-button__root--variant_criticalSolid:is(:active, [data-active]) {
873
- background: var(--seed-color-bg-critical-solid-pressed);
874
- }
875
-
876
- .seed-action-button__root--variant_criticalSolid:is(:disabled, [disabled], [data-disabled]) {
877
- background: var(--seed-color-bg-disabled);
878
- color: var(--seed-color-fg-disabled);
879
- --seed-prefix-icon-color: var(--seed-color-fg-disabled);
880
- --seed-suffix-icon-color: var(--seed-color-fg-disabled);
881
- --seed-icon-color: var(--seed-color-fg-disabled);
882
- }
883
-
884
- .seed-action-button__root--variant_criticalSolid[data-loading] {
885
- background: var(--seed-color-bg-critical-solid-pressed);
886
- }
887
-
888
- .seed-action-button__root--variant_brandOutline {
889
- background: var(--seed-color-bg-layer-default);
890
- border-style: solid;
891
- border-width: 1px;
892
- border-color: var(--seed-color-stroke-neutral);
893
- color: var(--seed-color-fg-brand);
894
- --seed-prefix-icon-color: var(--seed-color-fg-brand);
895
- --seed-suffix-icon-color: var(--seed-color-fg-brand);
896
- --seed-icon-color: var(--seed-color-fg-brand);
897
- --track-color: var(--seed-color-palette-carrot-200);
898
- --range-color: var(--seed-color-bg-brand-solid);
899
- }
900
-
901
- .seed-action-button__root--variant_brandOutline:is(:active, [data-active]) {
902
- background: var(--seed-color-bg-layer-default-pressed);
903
- }
904
-
905
- .seed-action-button__root--variant_brandOutline:is(:disabled, [disabled], [data-disabled]) {
906
- background: var(--seed-color-bg-layer-default);
907
- border-color: var(--seed-color-stroke-neutral);
908
- color: var(--seed-color-fg-disabled);
909
- --seed-prefix-icon-color: var(--seed-color-fg-disabled);
910
- --seed-suffix-icon-color: var(--seed-color-fg-disabled);
911
- --seed-icon-color: var(--seed-color-fg-disabled);
912
- }
913
-
914
- .seed-action-button__root--variant_brandOutline[data-loading] {
915
- background: var(--seed-color-bg-layer-default);
916
- }
917
-
918
- .seed-action-button__root--variant_neutralOutline {
919
- background: var(--seed-color-bg-layer-default);
920
- border-style: solid;
921
- border-width: 1px;
922
- border-color: var(--seed-color-stroke-neutral);
923
- color: var(--seed-color-fg-neutral);
924
- --seed-prefix-icon-color: var(--seed-color-fg-neutral);
925
- --seed-suffix-icon-color: var(--seed-color-fg-neutral);
926
- --seed-icon-color: var(--seed-color-fg-neutral);
927
- --track-color: var(--seed-color-palette-gray-500);
928
- --range-color: var(--seed-color-fg-neutral);
929
- }
930
-
931
- .seed-action-button__root--variant_neutralOutline:is(:active, [data-active]) {
932
- background: var(--seed-color-bg-layer-default-pressed);
933
- }
934
-
935
- .seed-action-button__root--variant_neutralOutline:is(:disabled, [disabled], [data-disabled]) {
936
- background: var(--seed-color-bg-layer-default);
937
- border-color: var(--seed-color-stroke-neutral);
938
- color: var(--seed-color-fg-disabled);
939
- --seed-prefix-icon-color: var(--seed-color-fg-disabled);
940
- --seed-suffix-icon-color: var(--seed-color-fg-disabled);
941
- --seed-icon-color: var(--seed-color-fg-disabled);
942
- }
943
-
944
- .seed-action-button__root--variant_neutralOutline[data-loading] {
945
- background: var(--seed-color-bg-layer-default);
946
- }
947
-
948
- .seed-action-button__root--size_xsmall {
949
- height: var(--seed-dimension-x8);
950
- border-radius: var(--seed-radius-full);
951
- --size: 14px;
952
- --thickness: 2px;
953
- --seed-prefix-icon-size: var(--seed-dimension-x3_5);
954
- --seed-suffix-icon-size: var(--seed-dimension-x3_5);
955
- --seed-icon-size: var(--seed-dimension-x3_5);
956
- }
957
-
958
- .seed-action-button__root--size_small {
959
- height: var(--seed-dimension-x9);
960
- border-radius: var(--seed-radius-r2);
961
- --size: 14px;
962
- --thickness: 2px;
963
- --seed-prefix-icon-size: var(--seed-dimension-x3_5);
964
- --seed-suffix-icon-size: var(--seed-dimension-x3_5);
965
- --seed-icon-size: var(--seed-dimension-x4);
966
- }
967
-
968
- .seed-action-button__root--size_medium {
969
- height: var(--seed-dimension-x10);
970
- border-radius: var(--seed-radius-r2);
971
- --size: 16px;
972
- --thickness: 2px;
973
- --seed-prefix-icon-size: var(--seed-dimension-x4);
974
- --seed-suffix-icon-size: var(--seed-dimension-x4);
975
- --seed-icon-size: 18px;
976
- }
977
-
978
- .seed-action-button__root--size_large {
979
- height: var(--seed-dimension-x13);
980
- border-radius: var(--seed-radius-r3);
981
- --size: 18px;
982
- --thickness: 2px;
983
- --seed-prefix-icon-size: 22px;
984
- --seed-suffix-icon-size: 22px;
985
- --seed-icon-size: 22px;
986
- }
987
-
988
- .seed-action-button__root--size_xsmall-layout_withText {
989
- gap: var(--seed-dimension-x1);
990
- padding-inline: var(--seed-dimension-x3_5);
991
- padding-block: var(--seed-dimension-x1_5);
992
- font-size: var(--seed-font-size-t4);
993
- }
994
-
995
- .seed-action-button__root--size_xsmall-layout_iconOnly {
996
- min-width: var(--seed-dimension-x8);
997
- padding-inline: var(--seed-dimension-x1_5);
998
- padding-block: var(--seed-dimension-x1_5);
999
- }
1000
-
1001
- .seed-action-button__root--size_small-layout_withText {
1002
- gap: var(--seed-dimension-x1);
1003
- padding-inline: var(--seed-dimension-x3_5);
1004
- padding-block: var(--seed-dimension-x2);
1005
- font-size: var(--seed-font-size-t4);
1006
- }
1007
-
1008
- .seed-action-button__root--size_small-layout_iconOnly {
1009
- min-width: var(--seed-dimension-x9);
1010
- padding-inline: var(--seed-dimension-x2);
1011
- padding-block: var(--seed-dimension-x2);
1012
- }
1013
-
1014
- .seed-action-button__root--size_medium-layout_withText {
1015
- gap: var(--seed-dimension-x1);
1016
- padding-inline: var(--seed-dimension-x4);
1017
- padding-block: var(--seed-dimension-x2_5);
1018
- font-size: var(--seed-font-size-t4);
1019
- }
1020
-
1021
- .seed-action-button__root--size_medium-layout_iconOnly {
1022
- min-width: var(--seed-dimension-x10);
1023
- padding-inline: var(--seed-dimension-x2_5);
1024
- padding-block: var(--seed-dimension-x2_5);
1025
- }
1026
-
1027
- .seed-action-button__root--size_large-layout_withText {
1028
- gap: var(--seed-dimension-x2);
1029
- padding-inline: var(--seed-dimension-x5);
1030
- padding-block: var(--seed-dimension-x3_5);
1031
- font-size: var(--seed-font-size-t6);
1032
- }
1033
-
1034
- .seed-action-button__root--size_large-layout_iconOnly {
1035
- min-width: var(--seed-dimension-x13);
1036
- padding-inline: var(--seed-dimension-x3_5);
1037
- padding-block: var(--seed-dimension-x3_5);
1038
- }
1039
-
1040
- .seed-toggle-button__root {
1041
- box-sizing: border-box;
1042
- cursor: pointer;
1043
- text-transform: none;
1044
- -webkit-font-smoothing: antialiased;
1045
- -moz-osx-font-smoothing: grayscale;
1046
- font-family: inherit;
1047
- font-weight: var(--seed-font-weight-bold);
1048
- border: none;
1049
- flex-shrink: 0;
1050
- justify-content: center;
1051
- align-items: center;
1052
- text-decoration: none;
1053
- display: inline-flex;
1054
- }
1055
-
1056
- .seed-toggle-button__root:is(:focus, [data-focus]) {
1057
- outline: none;
1058
- }
1059
-
1060
- .seed-toggle-button__root:is(:disabled, [disabled], [data-disabled]) {
1061
- cursor: not-allowed;
1062
- }
1063
-
1064
- .seed-toggle-button__root {
1065
- transition: background-color var(--seed-duration-d4) var(--seed-timing-function-easing);
1066
- }
1067
-
1068
- .seed-toggle-button__root--variant_brandSolid {
1069
- background: var(--seed-color-bg-brand-solid);
1070
- color: var(--seed-color-palette-static-white);
1071
- --track-color: var(--seed-color-palette-static-white-alpha-200);
1072
- --range-color: var(--seed-color-palette-static-white);
1073
- }
1074
-
1075
- .seed-toggle-button__root--variant_brandSolid:is(:active, [data-active]) {
1076
- background: var(--seed-color-bg-brand-solid-pressed);
1077
- }
1078
-
1079
- .seed-toggle-button__root--variant_brandSolid:is([aria-pressed="true"], [data-pressed]) {
1080
- background: var(--seed-color-bg-neutral-weak);
1081
- color: var(--seed-color-fg-neutral);
1082
- --track-color: var(--seed-color-palette-gray-500);
1083
- --range-color: var(--seed-color-fg-neutral);
1084
- --seed-prefix-icon-color: var(--seed-color-fg-neutral);
1085
- --seed-suffix-icon-color: var(--seed-color-fg-neutral);
1086
- }
1087
-
1088
- .seed-toggle-button__root--variant_brandSolid:is([aria-pressed="true"], [data-pressed]):is(:active, [data-active]) {
1089
- background: var(--seed-color-bg-neutral-weak-pressed);
1090
- }
1091
-
1092
- .seed-toggle-button__root--variant_brandSolid:is(:disabled, [disabled], [data-disabled]) {
1093
- background: var(--seed-color-bg-disabled);
1094
- color: var(--seed-color-fg-disabled);
1095
- --seed-prefix-icon-color: var(--seed-color-fg-disabled);
1096
- --seed-suffix-icon-color: var(--seed-color-fg-disabled);
1097
- }
1098
-
1099
- .seed-toggle-button__root--variant_brandSolid[data-loading] {
1100
- background: var(--seed-color-bg-brand-solid-pressed);
1101
- }
1102
-
1103
- .seed-toggle-button__root--variant_brandSolid:is([aria-pressed="true"], [data-pressed])[data-loading] {
1104
- background: var(--seed-color-bg-neutral-weak-pressed);
1105
- }
1106
-
1107
- .seed-toggle-button__root--variant_brandSolid {
1108
- --seed-prefix-icon-color: var(--seed-color-palette-static-white);
1109
- --seed-suffix-icon-color: var(--seed-color-palette-static-white);
1110
- }
1111
-
1112
- .seed-toggle-button__root--variant_neutralWeak {
1113
- background: var(--seed-color-bg-neutral-weak);
1114
- color: var(--seed-color-fg-neutral);
1115
- --track-color: var(--seed-color-palette-gray-500);
1116
- --range-color: var(--seed-color-fg-neutral);
1117
- }
1118
-
1119
- .seed-toggle-button__root--variant_neutralWeak:is(:active, [data-active]) {
1120
- background: var(--seed-color-bg-neutral-weak-pressed);
1121
- }
1122
-
1123
- .seed-toggle-button__root--variant_neutralWeak:is([aria-pressed="true"], [data-pressed]) {
1124
- background: var(--seed-color-bg-neutral-weak);
1125
- color: var(--seed-color-fg-neutral);
1126
- --track-color: var(--seed-color-palette-gray-500);
1127
- --range-color: var(--seed-color-fg-neutral);
1128
- --seed-prefix-icon-color: var(--seed-color-fg-neutral);
1129
- --seed-suffix-icon-color: var(--seed-color-fg-neutral);
1130
- }
1131
-
1132
- .seed-toggle-button__root--variant_neutralWeak:is([aria-pressed="true"], [data-pressed]):is(:active, [data-active]) {
1133
- background: var(--seed-color-bg-neutral-weak-pressed);
1134
- }
1135
-
1136
- .seed-toggle-button__root--variant_neutralWeak:is(:disabled, [disabled], [data-disabled]) {
1137
- background: var(--seed-color-bg-disabled);
1138
- color: var(--seed-color-fg-disabled);
1139
- --seed-prefix-icon-color: var(--seed-color-fg-disabled);
1140
- --seed-suffix-icon-color: var(--seed-color-fg-disabled);
1141
- }
1142
-
1143
- .seed-toggle-button__root--variant_neutralWeak[data-loading], .seed-toggle-button__root--variant_neutralWeak:is([aria-pressed="true"], [data-pressed])[data-loading] {
1144
- background: var(--seed-color-bg-neutral-weak-pressed);
1145
- }
1146
-
1147
- .seed-toggle-button__root--variant_neutralWeak {
1148
- --seed-prefix-icon-color: var(--seed-color-fg-neutral);
1149
- --seed-suffix-icon-color: var(--seed-color-fg-neutral);
1150
- }
1151
-
1152
- .seed-toggle-button__root--size_xsmall {
1153
- height: var(--seed-dimension-x8);
1154
- border-radius: var(--seed-radius-full);
1155
- gap: var(--seed-dimension-x1);
1156
- padding-inline: var(--seed-dimension-x3_5);
1157
- padding-block: var(--seed-dimension-x1_5);
1158
- font-size: var(--seed-font-size-t4);
1159
- --size: 14px;
1160
- --thickness: 2px;
1161
- --seed-prefix-icon-size: var(--seed-dimension-x3_5);
1162
- --seed-suffix-icon-size: var(--seed-dimension-x3_5);
1163
- }
1164
-
1165
- .seed-toggle-button__root--size_small {
1166
- height: var(--seed-dimension-x9);
1167
- border-radius: var(--seed-radius-full);
1168
- gap: var(--seed-dimension-x1);
1169
- padding-inline: var(--seed-dimension-x4);
1170
- padding-block: var(--seed-dimension-x2);
1171
- font-size: var(--seed-font-size-t4);
1172
- --size: 14px;
1173
- --thickness: 2px;
1174
- --seed-prefix-icon-size: var(--seed-dimension-x3_5);
1175
- --seed-suffix-icon-size: var(--seed-dimension-x3_5);
1176
- }
1177
-
1178
- .seed-reaction-button__root {
1179
- box-sizing: border-box;
1180
- cursor: pointer;
1181
- text-transform: none;
1182
- -webkit-font-smoothing: antialiased;
1183
- -moz-osx-font-smoothing: grayscale;
1184
- border: none;
1185
- flex-shrink: 0;
1186
- justify-content: center;
1187
- align-items: center;
1188
- font-family: inherit;
1189
- text-decoration: none;
1190
- display: inline-flex;
1191
- }
1192
-
1193
- .seed-reaction-button__root:is(:focus, [data-focus]) {
1194
- outline: none;
1195
- }
1196
-
1197
- .seed-reaction-button__root {
1198
- transition: background-color var(--seed-duration-d4) var(--seed-timing-function-easing);
1199
- background: var(--seed-color-bg-neutral-weak);
1200
- font-weight: var(--seed-font-weight-medium);
1201
- color: var(--seed-color-fg-neutral);
1202
- --track-color: var(--seed-color-palette-gray-500);
1203
- --range-color: var(--seed-color-fg-neutral);
1204
- --seed-count-line-height: 1px;
1205
- --seed-count-font-weight: var(--seed-font-weight-bold);
1206
- --seed-count-color: var(--seed-color-fg-neutral);
1207
- }
1208
-
1209
- .seed-reaction-button__root:is(:active, [data-active]) {
1210
- background: var(--seed-color-bg-neutral-weak-pressed);
1211
- }
1212
-
1213
- .seed-reaction-button__root:is([aria-pressed="true"], [data-pressed]) {
1214
- background: var(--seed-color-bg-layer-default);
1215
- color: var(--seed-color-fg-brand);
1216
- box-shadow: inset 0 0 0 1px var(--seed-color-stroke-brand);
1217
- --seed-prefix-icon-color: var(--seed-color-fg-brand);
1218
- --seed-count-color: var(--seed-color-fg-brand);
1219
- }
1220
-
1221
- .seed-reaction-button__root:is([aria-pressed="true"], [data-pressed]):is(:active, [data-active]) {
1222
- background: var(--seed-color-bg-layer-default-pressed);
1223
- }
1224
-
1225
- .seed-reaction-button__root:is(:disabled, [disabled], [data-disabled]) {
1226
- cursor: not-allowed;
1227
- background: var(--seed-color-bg-disabled);
1228
- color: var(--seed-color-fg-disabled);
1229
- box-shadow: inset 0 0 0 0px var(--seed-color-stroke-brand);
1230
- --seed-prefix-icon-color: var(--seed-color-fg-disabled);
1231
- --seed-count-color: var(--seed-color-fg-disabled);
1232
- }
1233
-
1234
- .seed-reaction-button__root[data-loading] {
1235
- background: var(--seed-color-bg-neutral-weak-pressed);
1236
- }
1237
-
1238
- .seed-reaction-button__root:is([aria-pressed="true"], [data-pressed])[data-loading] {
1239
- background: var(--seed-color-bg-layer-default-pressed);
1240
- box-shadow: inset 0 0 0 1px var(--seed-color-stroke-brand);
1241
- --track-color: var(--seed-color-palette-carrot-200);
1242
- --range-color: var(--seed-color-fg-brand);
1243
- }
1244
-
1245
- .seed-reaction-button__root--size_xsmall {
1246
- height: var(--seed-dimension-x8);
1247
- border-radius: var(--seed-radius-full);
1248
- gap: var(--seed-dimension-x1);
1249
- padding-inline: var(--seed-dimension-x3);
1250
- padding-block: var(--seed-dimension-x1_5);
1251
- font-size: var(--seed-font-size-t3);
1252
- line-height: var(--seed-line-height-t3);
1253
- --size: 14px;
1254
- --thickness: 2px;
1255
- --seed-prefix-icon-size: 18px;
1256
- --seed-count-font-size: var(--seed-font-size-t3);
1257
- --seed-count-line-height: var(--seed-line-height-t3);
1258
- }
1259
-
1260
- .seed-reaction-button__root--size_small {
1261
- height: var(--seed-dimension-x9);
1262
- border-radius: var(--seed-radius-full);
1263
- gap: var(--seed-dimension-x1);
1264
- padding-inline: var(--seed-dimension-x3_5);
1265
- padding-block: var(--seed-dimension-x2);
1266
- font-size: var(--seed-font-size-t3);
1267
- line-height: var(--seed-line-height-t3);
1268
- --size: 14px;
1269
- --thickness: 2px;
1270
- --seed-prefix-icon-size: 18px;
1271
- --seed-count-font-size: var(--seed-font-size-t3);
1272
- --seed-count-line-height: var(--seed-line-height-t3);
1273
- }
1274
-
1275
- .seed-bottom-sheet__positioner {
1276
- overscroll-behavior-y: none;
1277
- --sheet-z-index: 2;
1278
- z-index: calc(var(--sheet-z-index) + var(--layer-index, 0));
1279
- justify-content: center;
1280
- align-items: flex-end;
1281
- display: flex;
1282
- position: fixed;
1283
- inset: 0;
1284
- }
1285
-
1286
- .seed-bottom-sheet__backdrop {
1287
- background: var(--seed-color-bg-overlay);
1288
- z-index: calc(var(--sheet-z-index) + var(--layer-index, 0));
1289
- position: fixed;
1290
- inset: 0;
1291
- }
1292
-
1293
- .seed-bottom-sheet__backdrop:not(:is([data-state="open"], [data-open])) {
1294
- animation: seed-exit;
1295
- animation-timing-function: var(--seed-timing-function-exit);
1296
- animation-duration: var(--seed-duration-d2);
1297
- --seed-exit-translate-x: 0;
1298
- --seed-exit-translate-y: 0;
1299
- --seed-exit-opacity: 0;
1300
- --seed-exit-scale: 1;
1301
- animation-fill-mode: forwards;
1302
- }
1303
-
1304
- .seed-bottom-sheet__backdrop:is([data-state="open"], [data-open]) {
1305
- animation: seed-enter;
1306
- animation-timing-function: var(--seed-timing-function-enter);
1307
- animation-duration: var(--seed-duration-d2);
1308
- --seed-enter-translate-x: 0;
1309
- --seed-enter-translate-y: 0;
1310
- --seed-enter-opacity: 0;
1311
- --seed-enter-scale: 1;
1312
- }
1313
-
1314
- .seed-bottom-sheet__content {
1315
- box-sizing: border-box;
1316
- word-break: break-all;
1317
- z-index: calc(var(--sheet-z-index) + var(--layer-index, 0));
1318
- background: var(--seed-color-bg-layer-default);
1319
- border-top-left-radius: var(--seed-radius-r6);
1320
- border-top-right-radius: var(--seed-radius-r6);
1321
- flex-direction: column;
1322
- flex: 1;
1323
- display: flex;
1324
- position: relative;
1325
- }
1326
-
1327
- .seed-bottom-sheet__content:not(:is([data-state="open"], [data-open])) {
1328
- animation: seed-exit;
1329
- animation-timing-function: var(--seed-timing-function-exit);
1330
- animation-duration: var(--seed-duration-d4);
1331
- --seed-exit-translate-x: 0;
1332
- --seed-exit-translate-y: 100%;
1333
- --seed-exit-opacity: 1;
1334
- --seed-exit-scale: 1;
1335
- animation-fill-mode: forwards;
1336
- }
1337
-
1338
- .seed-bottom-sheet__content:is([data-state="open"], [data-open]) {
1339
- animation: seed-enter;
1340
- animation-timing-function: var(--seed-timing-function-enter-expressive);
1341
- animation-duration: var(--seed-duration-d6);
1342
- --seed-enter-translate-x: 0;
1343
- --seed-enter-translate-y: 100%;
1344
- --seed-enter-opacity: 1;
1345
- --seed-enter-scale: 1;
1346
- }
1347
-
1348
- .seed-bottom-sheet__header {
1349
- gap: var(--seed-dimension-x2);
1350
- padding-inline: var(--seed-dimension-spacing-x-global-gutter);
1351
- padding-top: var(--seed-dimension-x6);
1352
- padding-bottom: var(--seed-dimension-x4);
1353
- flex-direction: column;
1354
- display: flex;
1355
- }
1356
-
1357
- .seed-bottom-sheet__title {
1358
- color: var(--seed-color-fg-neutral);
1359
- font-size: var(--seed-font-size-t8);
1360
- line-height: var(--seed-line-height-t8);
1361
- font-weight: var(--seed-font-weight-bold);
1362
- margin: 0;
1363
- }
1364
-
1365
- .seed-bottom-sheet__description {
1366
- color: var(--seed-color-fg-neutral-muted);
1367
- font-size: var(--seed-font-size-t6);
1368
- line-height: var(--seed-line-height-t6);
1369
- font-weight: var(--seed-font-weight-regular);
1370
- white-space: pre-wrap;
1371
- margin: 0;
1372
- }
1373
-
1374
- .seed-bottom-sheet__body {
1375
- --seed-box-padding-x: var(--seed-dimension-spacing-x-global-gutter);
1376
- --seed-box-height: initial;
1377
- --seed-box-min-height: initial;
1378
- --seed-box-max-height: initial;
1379
- --seed-box-justify-content: initial;
1380
- --seed-box-align-items: initial;
1381
- padding-inline: var(--seed-box-padding-x);
1382
- height: var(--seed-box-height);
1383
- min-height: var(--seed-box-min-height);
1384
- max-height: var(--seed-box-max-height);
1385
- justify-content: var(--seed-box-justify-content);
1386
- align-items: var(--seed-box-align-items);
1387
- flex-direction: column;
1388
- display: flex;
1389
- }
1390
-
1391
- .seed-bottom-sheet__footer {
1392
- padding-inline: var(--seed-dimension-spacing-x-global-gutter);
1393
- padding-top: var(--seed-dimension-x3);
1394
- padding-bottom: var(--seed-dimension-x4);
1395
- flex-direction: column;
1396
- display: flex;
1397
- }
1398
-
1399
- .seed-bottom-sheet__closeButton {
1400
- top: var(--seed-dimension-x5);
1401
- right: var(--seed-dimension-x5);
1402
- border-radius: var(--seed-radius-full);
1403
- background: var(--seed-color-palette-gray-300);
1404
- --seed-icon-size: 14px;
1405
- --seed-icon-color: var(--seed-color-fg-neutral);
1406
- justify-content: center;
1407
- align-items: center;
1408
- width: 28px;
1409
- height: 28px;
1410
- display: flex;
1411
- position: absolute;
1412
- }
1413
-
1414
- .seed-bottom-sheet__closeButton:after {
1415
- content: "";
1416
- position: absolute;
1417
- inset: -8px;
1418
- }
1419
-
1420
- .seed-action-sheet__positioner {
1421
- overscroll-behavior-y: none;
1422
- --sheet-z-index: 2;
1423
- z-index: calc(var(--sheet-z-index) + var(--layer-index, 0));
1424
- justify-content: center;
1425
- align-items: flex-end;
1426
- display: flex;
1427
- position: fixed;
1428
- inset: 0;
1429
- }
1430
-
1431
- .seed-action-sheet__backdrop {
1432
- background: var(--seed-color-bg-overlay);
1433
- z-index: calc(var(--sheet-z-index) + var(--layer-index, 0));
1434
- position: fixed;
1435
- inset: 0;
1436
- }
1437
-
1438
- .seed-action-sheet__backdrop:not(:is([data-state="open"], [data-open])) {
1439
- animation: seed-exit;
1440
- animation-timing-function: var(--seed-timing-function-exit);
1441
- animation-duration: var(--seed-duration-d2);
1442
- --seed-exit-translate-x: 0;
1443
- --seed-exit-translate-y: 0;
1444
- --seed-exit-opacity: 0;
1445
- --seed-exit-scale: 1;
1446
- animation-fill-mode: forwards;
1447
- }
1448
-
1449
- .seed-action-sheet__backdrop:is([data-state="open"], [data-open]) {
1450
- animation: seed-enter;
1451
- animation-timing-function: var(--seed-timing-function-enter);
1452
- animation-duration: var(--seed-duration-d2);
1453
- --seed-enter-translate-x: 0;
1454
- --seed-enter-translate-y: 0;
1455
- --seed-enter-opacity: 0;
1456
- --seed-enter-scale: 1;
1457
- }
1458
-
1459
- .seed-action-sheet__content {
1460
- box-sizing: border-box;
1461
- word-break: break-all;
1462
- z-index: calc(var(--sheet-z-index) + var(--layer-index, 0));
1463
- background: var(--seed-color-bg-layer-floating);
1464
- border-top-left-radius: var(--seed-radius-r5);
1465
- border-top-right-radius: var(--seed-radius-r5);
1466
- flex-direction: column;
1467
- flex: 1;
1468
- display: flex;
1469
- position: relative;
1470
- }
1471
-
1472
- .seed-action-sheet__content:not(:is([data-state="open"], [data-open])) {
1473
- animation: seed-exit;
1474
- animation-timing-function: var(--seed-timing-function-exit);
1475
- animation-duration: var(--seed-duration-d4);
1476
- --seed-exit-translate-x: 0;
1477
- --seed-exit-translate-y: 100%;
1478
- --seed-exit-opacity: 1;
1479
- --seed-exit-scale: 1;
1480
- animation-fill-mode: forwards;
1481
- }
1482
-
1483
- .seed-action-sheet__content:is([data-state="open"], [data-open]) {
1484
- animation: seed-enter;
1485
- animation-timing-function: var(--seed-timing-function-enter-expressive);
1486
- animation-duration: var(--seed-duration-d6);
1487
- --seed-enter-translate-x: 0;
1488
- --seed-enter-translate-y: 100%;
1489
- --seed-enter-opacity: 1;
1490
- --seed-enter-scale: 1;
1491
- }
1492
-
1493
- .seed-action-sheet__header {
1494
- padding-inline: var(--seed-dimension-spacing-x-global-gutter);
1495
- padding-block: var(--seed-dimension-x3_5);
1496
- align-items: center;
1497
- gap: var(--seed-dimension-x1);
1498
- flex-direction: column;
1499
- display: flex;
1500
- position: relative;
1501
- }
1502
-
1503
- .seed-action-sheet__header:after {
1504
- content: "";
1505
- left: var(--seed-dimension-spacing-x-global-gutter);
1506
- right: var(--seed-dimension-spacing-x-global-gutter);
1507
- background: var(--seed-color-stroke-neutral);
1508
- height: 1px;
1509
- display: block;
1510
- position: absolute;
1511
- bottom: 0;
1512
- }
1513
-
1514
- .seed-action-sheet__title {
1515
- color: var(--seed-color-fg-neutral-muted);
1516
- font-size: var(--seed-font-size-t4);
1517
- line-height: var(--seed-line-height-t4);
1518
- font-weight: var(--seed-font-weight-bold);
1519
- }
1520
-
1521
- .seed-action-sheet__description {
1522
- color: var(--seed-color-fg-neutral-muted);
1523
- font-size: var(--seed-font-size-t3);
1524
- line-height: var(--seed-line-height-t3);
1525
- font-weight: var(--seed-font-weight-regular);
1526
- }
1527
-
1528
- .seed-action-sheet__list {
1529
- flex-direction: column;
1530
- align-items: stretch;
1531
- display: flex;
1532
- }
1533
-
1534
- .seed-action-sheet__closeButton {
1535
- background-color: var(--seed-color-bg-layer-floating);
1536
- min-height: 50px;
1537
- padding-inline: var(--seed-dimension-spacing-x-global-gutter);
1538
- padding-block: var(--seed-dimension-x3_5);
1539
- color: var(--seed-color-fg-neutral);
1540
- font-size: var(--seed-font-size-t5);
1541
- line-height: var(--seed-line-height-t5);
1542
- font-weight: var(--seed-font-weight-bold);
1543
- justify-content: center;
1544
- align-items: center;
1545
- display: flex;
1546
- }
1547
-
1548
- .seed-action-sheet__closeButton:is(:active, [data-active]) {
1549
- background-color: var(--seed-color-bg-layer-floating-pressed);
1550
- }
1551
-
1552
- .seed-action-sheet-item__root {
1553
- background-color: var(--seed-color-bg-layer-floating);
1554
- min-height: 50px;
1555
- padding-inline: var(--seed-dimension-spacing-x-global-gutter);
1556
- padding-block: var(--seed-dimension-x3_5);
1557
- font-size: var(--seed-font-size-t5);
1558
- line-height: var(--seed-line-height-t5);
1559
- font-weight: var(--seed-font-weight-regular);
1560
- justify-content: center;
1561
- align-items: center;
1562
- display: flex;
1563
- position: relative;
1564
- }
1565
-
1566
- .seed-action-sheet-item__root:is(:active, [data-active]) {
1567
- background-color: var(--seed-color-bg-layer-floating-pressed);
1568
- }
1569
-
1570
- .seed-action-sheet-item__root:after {
1571
- content: "";
1572
- left: var(--seed-dimension-spacing-x-global-gutter);
1573
- right: var(--seed-dimension-spacing-x-global-gutter);
1574
- background: var(--seed-color-stroke-neutral);
1575
- height: 1px;
1576
- display: block;
1577
- position: absolute;
1578
- bottom: 0;
1579
- }
1580
-
1581
- .seed-action-sheet-item__root--tone_neutral {
1582
- color: var(--seed-color-fg-neutral);
1583
- }
1584
-
1585
- .seed-action-sheet-item__root--tone_critical {
1586
- color: var(--seed-color-fg-critical);
1587
- }
1588
-
1589
- .seed-extended-action-sheet__positioner {
1590
- overscroll-behavior-y: none;
1591
- --sheet-z-index: 2;
1592
- z-index: calc(var(--sheet-z-index) + var(--layer-index, 0));
1593
- justify-content: center;
1594
- align-items: flex-end;
1595
- display: flex;
1596
- position: fixed;
1597
- inset: 0;
1598
- }
1599
-
1600
- .seed-extended-action-sheet__backdrop {
1601
- background: var(--seed-color-bg-overlay);
1602
- z-index: calc(var(--sheet-z-index) + var(--layer-index, 0));
1603
- position: fixed;
1604
- inset: 0;
1605
- }
1606
-
1607
- .seed-extended-action-sheet__backdrop:not(:is([data-state="open"], [data-open])) {
1608
- animation: seed-exit;
1609
- animation-timing-function: var(--seed-timing-function-exit);
1610
- animation-duration: var(--seed-duration-d2);
1611
- --seed-exit-translate-x: 0;
1612
- --seed-exit-translate-y: 0;
1613
- --seed-exit-opacity: 0;
1614
- --seed-exit-scale: 1;
1615
- animation-fill-mode: forwards;
1616
- }
1617
-
1618
- .seed-extended-action-sheet__backdrop:is([data-state="open"], [data-open]) {
1619
- animation: seed-enter;
1620
- animation-timing-function: var(--seed-timing-function-enter);
1621
- animation-duration: var(--seed-duration-d2);
1622
- --seed-enter-translate-x: 0;
1623
- --seed-enter-translate-y: 0;
1624
- --seed-enter-opacity: 0;
1625
- --seed-enter-scale: 1;
1626
- }
1627
-
1628
- .seed-extended-action-sheet__content {
1629
- box-sizing: border-box;
1630
- word-break: break-all;
1631
- z-index: calc(var(--sheet-z-index) + var(--layer-index, 0));
1632
- background: var(--seed-color-bg-layer-floating);
1633
- padding-inline: var(--seed-dimension-spacing-x-global-gutter);
1634
- padding-block: var(--seed-dimension-x4);
1635
- border-top-left-radius: var(--seed-radius-r5);
1636
- border-top-right-radius: var(--seed-radius-r5);
1637
- flex-direction: column;
1638
- flex: 1;
1639
- display: flex;
1640
- position: relative;
1641
- }
1642
-
1643
- .seed-extended-action-sheet__content:not(:is([data-state="open"], [data-open])) {
1644
- animation: seed-exit;
1645
- animation-timing-function: var(--seed-timing-function-exit);
1646
- animation-duration: var(--seed-duration-d4);
1647
- --seed-exit-translate-x: 0;
1648
- --seed-exit-translate-y: 100%;
1649
- --seed-exit-opacity: 1;
1650
- --seed-exit-scale: 1;
1651
- animation-fill-mode: forwards;
1652
- }
1653
-
1654
- .seed-extended-action-sheet__content:is([data-state="open"], [data-open]) {
1655
- animation: seed-enter;
1656
- animation-timing-function: var(--seed-timing-function-enter-expressive);
1657
- animation-duration: var(--seed-duration-d6);
1658
- --seed-enter-translate-x: 0;
1659
- --seed-enter-translate-y: 100%;
1660
- --seed-enter-opacity: 1;
1661
- --seed-enter-scale: 1;
1662
- }
1663
-
1664
- .seed-extended-action-sheet__header {
1665
- align-items: center;
1666
- gap: var(--seed-dimension-x1);
1667
- padding-bottom: var(--seed-dimension-x4);
1668
- flex-direction: column;
1669
- display: flex;
1670
- }
1671
-
1672
- .seed-extended-action-sheet__title {
1673
- color: var(--seed-color-fg-neutral);
1674
- font-size: var(--seed-font-size-t6);
1675
- line-height: var(--seed-line-height-t6);
1676
- font-weight: var(--seed-font-weight-bold);
1677
- }
1678
-
1679
- .seed-extended-action-sheet__list {
1680
- align-items: stretch;
1681
- gap: var(--seed-dimension-x2_5);
1682
- flex-direction: column;
1683
- display: flex;
1684
- }
1685
-
1686
- .seed-extended-action-sheet__group {
1687
- border-radius: var(--seed-radius-r4);
1688
- flex-direction: column;
1689
- align-items: stretch;
1690
- display: flex;
1691
- overflow: hidden;
1692
- }
1693
-
1694
- .seed-extended-action-sheet__footer {
1695
- padding-top: var(--seed-dimension-x2_5);
1696
- flex-direction: column;
1697
- align-items: stretch;
1698
- display: flex;
1699
- }
1700
-
1701
- .seed-extended-action-sheet__closeButton {
1702
- background-color: var(--seed-color-bg-neutral-weak);
1703
- min-height: 52px;
1704
- padding-inline: var(--seed-dimension-x5);
1705
- padding-block: var(--seed-dimension-x3_5);
1706
- border-radius: var(--seed-radius-r3);
1707
- color: var(--seed-color-fg-neutral);
1708
- font-size: var(--seed-font-size-t5);
1709
- line-height: var(--seed-line-height-t5);
1710
- font-weight: var(--seed-font-weight-medium);
1711
- justify-content: center;
1712
- align-items: center;
1713
- display: flex;
1714
- }
1715
-
1716
- .seed-extended-action-sheet__closeButton:is(:active, [data-active]) {
1717
- background-color: var(--seed-color-bg-neutral-weak-pressed);
1718
- }
1719
-
1720
- .seed-extended-action-sheet-item__root {
1721
- background-color: var(--seed-color-bg-neutral-weak);
1722
- min-height: 52px;
1723
- padding-inline: var(--seed-dimension-x4);
1724
- padding-block: var(--seed-dimension-x3_5);
1725
- justify-content: flex-start;
1726
- align-items: center;
1727
- gap: var(--seed-dimension-x3_5);
1728
- box-shadow: inset 0 calc(-1 * 1px) 0 var(--seed-color-stroke-neutral);
1729
- font-size: var(--seed-font-size-t5);
1730
- line-height: var(--seed-line-height-t5);
1731
- font-weight: var(--seed-font-weight-regular);
1732
- display: flex;
1733
- }
1734
-
1735
- .seed-extended-action-sheet-item__root:is(:active, [data-active]) {
1736
- background-color: var(--seed-color-bg-neutral-weak-pressed);
1737
- }
1738
-
1739
- .seed-extended-action-sheet-item__root:last-child {
1740
- box-shadow: none;
1741
- }
1742
-
1743
- .seed-extended-action-sheet-item__root {
1744
- --seed-prefix-icon-size: 22px;
1745
- }
1746
-
1747
- .seed-extended-action-sheet-item__root--tone_neutral {
1748
- color: var(--seed-color-fg-neutral);
1749
- --seed-prefix-icon-color: var(--seed-color-fg-neutral);
1750
- }
1751
-
1752
- .seed-extended-action-sheet-item__root--tone_critical {
1753
- color: var(--seed-color-fg-critical);
1754
- --seed-prefix-icon-color: var(--seed-color-fg-critical);
1755
- }
1756
-
1757
- .seed-fab__root {
1758
- box-sizing: border-box;
1759
- cursor: pointer;
1760
- text-transform: none;
1761
- -webkit-font-smoothing: antialiased;
1762
- -moz-osx-font-smoothing: grayscale;
1763
- border: none;
1764
- justify-content: center;
1765
- align-items: center;
1766
- font-family: inherit;
1767
- text-decoration: none;
1768
- display: inline-flex;
1769
- }
1770
-
1771
- .seed-fab__root:is(:focus, [data-focus]) {
1772
- outline: none;
1773
- }
1774
-
1775
- .seed-fab__root:is(:disabled, [disabled], [data-disabled]) {
1776
- cursor: not-allowed;
1777
- }
1778
-
1779
- .seed-fab__root {
1780
- background: var(--seed-color-bg-layer-floating);
1781
- border-radius: var(--seed-radius-full);
1782
- --seed-icon-size: 22px;
1783
- --seed-icon-color: var(--seed-color-fg-neutral);
1784
- width: 44px;
1785
- height: 44px;
1786
- box-shadow: 0 2px 6px #00000026;
1787
- }
1788
-
1789
- .seed-fab__root:is(:active, [data-active]) {
1790
- background: var(--seed-color-bg-layer-floating-pressed);
1791
- }
1792
-
1793
- .seed-extended-fab__root {
1794
- box-sizing: border-box;
1795
- cursor: pointer;
1796
- text-transform: none;
1797
- -webkit-font-smoothing: antialiased;
1798
- -moz-osx-font-smoothing: grayscale;
1799
- border: none;
1800
- flex-shrink: 0;
1801
- justify-content: center;
1802
- align-items: center;
1803
- font-family: inherit;
1804
- text-decoration: none;
1805
- display: inline-flex;
1806
- }
1807
-
1808
- .seed-extended-fab__root:is(:focus, [data-focus]) {
1809
- outline: none;
1810
- }
1811
-
1812
- .seed-extended-fab__root:is(:disabled, [disabled], [data-disabled]) {
1813
- cursor: not-allowed;
1814
- }
1815
-
1816
- .seed-extended-fab__root {
1817
- border-radius: var(--seed-radius-full);
1818
- box-shadow: 0 2px 6px #00000026;
1819
- }
1820
-
1821
- .seed-extended-fab__root--variant_neutralSolid {
1822
- background: var(--seed-color-bg-neutral-inverted);
1823
- color: var(--seed-color-fg-neutral-inverted);
1824
- }
1825
-
1826
- .seed-extended-fab__root--variant_neutralSolid:is(:active, [data-active]) {
1827
- background: var(--seed-color-bg-neutral-inverted-pressed);
1828
- }
1829
-
1830
- .seed-extended-fab__root--variant_neutralSolid {
1831
- --seed-prefix-icon-color: var(--seed-color-fg-neutral-inverted);
1832
- }
1833
-
1834
- .seed-extended-fab__root--variant_layerFloating {
1835
- background: var(--seed-color-bg-layer-floating);
1836
- color: var(--seed-color-fg-neutral);
1837
- }
1838
-
1839
- .seed-extended-fab__root--variant_layerFloating:is(:active, [data-active]) {
1840
- background: var(--seed-color-bg-layer-floating-pressed);
1841
- }
1842
-
1843
- .seed-extended-fab__root--variant_layerFloating {
1844
- --seed-prefix-icon-color: var(--seed-color-fg-neutral);
1845
- }
1846
-
1847
- .seed-extended-fab__root--size_small {
1848
- padding-inline: var(--seed-dimension-x3_5);
1849
- padding-block: var(--seed-dimension-x2_5);
1850
- gap: var(--seed-dimension-x1);
1851
- min-height: 40px;
1852
- font-size: var(--seed-font-size-t4);
1853
- line-height: var(--seed-line-height-t4);
1854
- font-weight: var(--seed-font-weight-medium);
1855
- --seed-prefix-icon-size: 16px;
1856
- }
1857
-
1858
- .seed-extended-fab__root--size_medium {
1859
- padding-inline: var(--seed-dimension-x4);
1860
- padding-block: var(--seed-dimension-x3);
1861
- gap: var(--seed-dimension-x1);
1862
- min-height: 48px;
1863
- font-size: var(--seed-font-size-t5);
1864
- line-height: var(--seed-line-height-t5);
1865
- font-weight: var(--seed-font-weight-bold);
1866
- --seed-prefix-icon-size: 16px;
1867
- }
1868
-
1869
- .seed-badge__root {
1870
- box-sizing: border-box;
1871
- text-transform: none;
1872
- text-align: start;
1873
- -webkit-font-smoothing: antialiased;
1874
- -moz-osx-font-smoothing: grayscale;
1875
- justify-content: center;
1876
- align-items: center;
1877
- text-decoration: none;
1878
- display: inline-flex;
1879
- }
1880
-
1881
- .seed-badge__root--size_medium {
1882
- min-height: var(--seed-dimension-x5);
1883
- padding-inline: var(--seed-dimension-x1_5);
1884
- padding-block: var(--seed-dimension-x0_5);
1885
- font-size: var(--seed-font-size-t1);
1886
- line-height: var(--seed-line-height-t1);
1887
- }
1888
-
1889
- .seed-badge__root--size_large {
1890
- min-height: var(--seed-dimension-x6);
1891
- padding-inline: var(--seed-dimension-x2);
1892
- padding-block: var(--seed-dimension-x1);
1893
- font-size: var(--seed-font-size-t2);
1894
- line-height: var(--seed-line-height-t2);
1895
- }
1896
-
1897
- .seed-badge__root--shape_pill {
1898
- border-radius: var(--seed-radius-full);
1899
- }
1900
-
1901
- .seed-badge__root--variant_weak {
1902
- font-weight: var(--seed-font-weight-medium);
1903
- }
1904
-
1905
- .seed-badge__root--variant_solid, .seed-badge__root--variant_outline {
1906
- font-weight: var(--seed-font-weight-bold);
1907
- }
1908
-
1909
- .seed-badge__root--shape_rectangle-size_medium {
1910
- border-radius: var(--seed-radius-r1);
1911
- }
1912
-
1913
- .seed-badge__root--shape_rectangle-size_large {
1914
- border-radius: var(--seed-radius-r1_5);
1915
- }
1916
-
1917
- .seed-badge__root--tone_neutral-variant_weak {
1918
- background-color: var(--seed-color-bg-neutral-weak);
1919
- color: var(--seed-color-fg-neutral);
1920
- }
1921
-
1922
- .seed-badge__root--tone_neutral-variant_solid {
1923
- background-color: var(--seed-color-bg-neutral-inverted);
1924
- color: var(--seed-color-fg-neutral-inverted);
1925
- }
1926
-
1927
- .seed-badge__root--tone_neutral-variant_outline {
1928
- box-shadow: inset 0 0 0 1px var(--seed-color-stroke-neutral);
1929
- color: var(--seed-color-fg-neutral);
1930
- }
1931
-
1932
- .seed-badge__root--tone_brand-variant_weak {
1933
- background-color: var(--seed-color-palette-carrot-100);
1934
- color: var(--seed-color-palette-carrot-900);
1935
- }
1936
-
1937
- .seed-badge__root--tone_brand-variant_solid {
1938
- background-color: var(--seed-color-bg-brand-solid);
1939
- color: var(--seed-color-palette-static-white);
1940
- }
1941
-
1942
- .seed-badge__root--tone_brand-variant_outline {
1943
- box-shadow: inset 0 0 0 1px var(--seed-color-stroke-brand);
1944
- color: var(--seed-color-fg-brand);
1945
- }
1946
-
1947
- .seed-badge__root--tone_informative-variant_weak {
1948
- background-color: var(--seed-color-bg-informative-weak);
1949
- color: var(--seed-color-fg-informative-contrast);
1950
- }
1951
-
1952
- .seed-badge__root--tone_informative-variant_solid {
1953
- background-color: var(--seed-color-bg-informative-solid);
1954
- color: var(--seed-color-palette-static-white);
1955
- }
1956
-
1957
- .seed-badge__root--tone_informative-variant_outline {
1958
- box-shadow: inset 0 0 0 1px var(--seed-color-stroke-informative);
1959
- color: var(--seed-color-fg-informative);
1960
- }
1961
-
1962
- .seed-badge__root--tone_positive-variant_weak {
1963
- background-color: var(--seed-color-bg-positive-weak);
1964
- color: var(--seed-color-fg-positive-contrast);
1965
- }
1966
-
1967
- .seed-badge__root--tone_positive-variant_solid {
1968
- background-color: var(--seed-color-bg-positive-solid);
1969
- color: var(--seed-color-palette-static-white);
1970
- }
1971
-
1972
- .seed-badge__root--tone_positive-variant_outline {
1973
- box-shadow: inset 0 0 0 1px var(--seed-color-stroke-positive);
1974
- color: var(--seed-color-fg-positive);
1975
- }
1976
-
1977
- .seed-badge__root--tone_critical-variant_weak {
1978
- background-color: var(--seed-color-bg-critical-weak);
1979
- color: var(--seed-color-fg-critical-contrast);
1980
- }
1981
-
1982
- .seed-badge__root--tone_critical-variant_solid {
1983
- background-color: var(--seed-color-bg-critical-solid);
1984
- color: var(--seed-color-palette-static-white);
1985
- }
1986
-
1987
- .seed-badge__root--tone_critical-variant_outline {
1988
- box-shadow: inset 0 0 0 1px var(--seed-color-stroke-critical);
1989
- color: var(--seed-color-fg-critical);
1990
- }
1991
-
1992
- .seed-radio__root {
1993
- box-sizing: border-box;
1994
- background-color: var(--seed-color-bg-layer-default);
1995
- border-style: solid;
1996
- border-width: 1px;
1997
- border-color: var(--seed-color-stroke-control);
1998
- border-radius: var(--seed-radius-full);
1999
- flex: none;
2000
- justify-content: center;
2001
- align-items: center;
2002
- display: flex;
2003
- }
2004
-
2005
- .seed-radio__root:is(:active, [data-active]) {
2006
- background-color: var(--seed-color-bg-layer-default-pressed);
2007
- }
2008
-
2009
- .seed-radio__root:is(:checked, [data-checked]) {
2010
- background-color: var(--seed-color-bg-brand-solid);
2011
- border-width: 0;
2012
- }
2013
-
2014
- .seed-radio__root:is(:active, [data-active]):is(:checked, [data-checked]) {
2015
- background-color: var(--seed-color-bg-brand-solid-pressed);
2016
- }
2017
-
2018
- .seed-radio__root:is(:disabled, [disabled], [data-disabled]) {
2019
- background-color: var(--seed-color-palette-gray-300);
2020
- }
2021
-
2022
- .seed-radio__root:is(:disabled, [disabled], [data-disabled]):is(:checked, [data-checked]) {
2023
- background-color: none;
2024
- border-color: var(--seed-color-palette-gray-300);
2025
- }
2026
-
2027
- .seed-radio__icon {
2028
- border-radius: var(--seed-radius-full);
2029
- display: none;
2030
- }
2031
-
2032
- .seed-radio__icon:is(:checked, [data-checked]) {
2033
- background-color: var(--seed-color-palette-static-white);
2034
- display: block;
2035
- }
2036
-
2037
- .seed-radio__icon:is(:disabled, [disabled], [data-disabled]):is(:checked, [data-checked]) {
2038
- background-color: var(--seed-color-palette-gray-300);
2039
- }
2040
-
2041
- .seed-radio__root--size_large {
2042
- width: var(--seed-dimension-x6);
2043
- height: var(--seed-dimension-x6);
2044
- }
2045
-
2046
- .seed-radio__icon--size_large {
2047
- width: var(--seed-dimension-x2_5);
2048
- height: var(--seed-dimension-x2_5);
2049
- }
2050
-
2051
- .seed-radio__icon--size_large:is(:disabled, [disabled], [data-disabled]) {
2052
- width: var(--seed-dimension-x3);
2053
- height: var(--seed-dimension-x3);
2054
- }
2055
-
2056
- .seed-radio__root--size_medium {
2057
- width: var(--seed-dimension-x5);
2058
- height: var(--seed-dimension-x5);
2059
- }
2060
-
2061
- .seed-radio__icon--size_medium {
2062
- width: var(--seed-dimension-x2);
2063
- height: var(--seed-dimension-x2);
2064
- }
2065
-
2066
- .seed-radio__icon--size_medium:is(:disabled, [disabled], [data-disabled]) {
2067
- width: var(--seed-dimension-x2_5);
2068
- height: var(--seed-dimension-x2_5);
2069
- }
2070
-
2071
- .seed-dialog__positioner {
2072
- overscroll-behavior-y: none;
2073
- --dialog-z-index: 2;
2074
- z-index: calc(var(--dialog-z-index) + var(--layer-index, 0));
2075
- justify-content: center;
2076
- align-items: center;
2077
- display: flex;
2078
- position: fixed;
2079
- inset: 0;
2080
- }
2081
-
2082
- .seed-dialog__backdrop {
2083
- background: var(--seed-color-bg-overlay);
2084
- z-index: calc(var(--dialog-z-index) + var(--layer-index, 0));
2085
- position: fixed;
2086
- inset: 0;
2087
- }
2088
-
2089
- .seed-dialog__backdrop:is([data-state="open"], [data-open]) {
2090
- animation: seed-enter;
2091
- animation-timing-function: var(--seed-timing-function-enter);
2092
- animation-duration: var(--seed-duration-d2);
2093
- --seed-enter-translate-x: 0;
2094
- --seed-enter-translate-y: 0;
2095
- --seed-enter-opacity: 0;
2096
- --seed-enter-scale: 1;
2097
- }
2098
-
2099
- .seed-dialog__backdrop:not(:is([data-state="open"], [data-open])) {
2100
- animation: seed-exit;
2101
- animation-timing-function: var(--seed-timing-function-exit);
2102
- animation-duration: var(--seed-duration-d2);
2103
- --seed-exit-translate-x: 0;
2104
- --seed-exit-translate-y: 0;
2105
- --seed-exit-opacity: 0;
2106
- --seed-exit-scale: 1;
2107
- animation-fill-mode: forwards;
2108
- }
2109
-
2110
- .seed-dialog__content {
2111
- box-sizing: border-box;
2112
- word-break: break-all;
2113
- z-index: calc(var(--dialog-z-index) + var(--layer-index, 0));
2114
- background: var(--seed-color-bg-layer-default);
2115
- max-width: 272px;
2116
- margin: auto var(--seed-dimension-x8);
2117
- padding: var(--seed-dimension-x5) var(--seed-dimension-x5);
2118
- border-radius: var(--seed-radius-r5);
2119
- flex-direction: column;
2120
- flex: 1;
2121
- display: flex;
2122
- position: relative;
2123
- }
2124
-
2125
- .seed-dialog__content:is([data-state="open"], [data-open]) {
2126
- animation: seed-enter;
2127
- animation-timing-function: var(--seed-timing-function-enter-expressive);
2128
- animation-duration: var(--seed-duration-d4);
2129
- --seed-enter-translate-x: 0;
2130
- --seed-enter-translate-y: 0;
2131
- --seed-enter-opacity: 0;
2132
- --seed-enter-scale: 1.3;
2133
- }
2134
-
2135
- .seed-dialog__content:not(:is([data-state="open"], [data-open])) {
2136
- animation: seed-exit;
2137
- animation-timing-function: var(--seed-timing-function-exit);
2138
- animation-duration: var(--seed-duration-d2);
2139
- --seed-exit-translate-x: 0;
2140
- --seed-exit-translate-y: 0;
2141
- --seed-exit-opacity: 0;
2142
- --seed-exit-scale: 1;
2143
- animation-fill-mode: forwards;
2144
- }
2145
-
2146
- .seed-dialog__header {
2147
- gap: var(--seed-dimension-x1_5);
2148
- flex-direction: column;
2149
- display: flex;
2150
- }
2151
-
2152
- .seed-dialog__title {
2153
- color: var(--seed-color-fg-neutral);
2154
- font-size: var(--seed-font-size-t7);
2155
- line-height: var(--seed-line-height-t7);
2156
- font-weight: var(--seed-font-weight-bold);
2157
- margin: 0;
2158
- }
2159
-
2160
- .seed-dialog__description {
2161
- color: var(--seed-color-fg-neutral);
2162
- font-size: var(--seed-font-size-t5);
2163
- line-height: var(--seed-line-height-t5);
2164
- font-weight: var(--seed-font-weight-regular);
2165
- white-space: pre-wrap;
2166
- margin: 0;
2167
- }
2168
-
2169
- .seed-dialog__footer {
2170
- padding-top: var(--seed-dimension-x4);
2171
- flex-direction: column;
2172
- align-items: stretch;
2173
- display: flex;
2174
- }
2175
-
2176
- .seed-checkbox__root {
2177
- vertical-align: top;
2178
- isolation: isolate;
2179
- cursor: pointer;
2180
- align-items: flex-start;
2181
- gap: var(--seed-dimension-x2);
2182
- max-inline-size: 100%;
2183
- display: inline-flex;
2184
- position: relative;
2185
- }
2186
-
2187
- .seed-checkbox__root:is(:disabled, [disabled], [data-disabled]) {
2188
- cursor: not-allowed;
2189
- }
2190
-
2191
- .seed-checkbox__control {
2192
- box-sizing: border-box;
2193
- flex-shrink: 0;
2194
- position: relative;
2195
- }
2196
-
2197
- .seed-checkbox__icon {
2198
- content: "";
2199
- text-align: center;
2200
- overflow: initial;
2201
- margin: auto;
2202
- display: none;
2203
- position: absolute;
2204
- inset: 0;
2205
- }
2206
-
2207
- .seed-checkbox__label {
2208
- color: var(--seed-color-fg-neutral);
2209
- }
2210
-
2211
- .seed-checkbox__label--weight_default {
2212
- font-weight: var(--seed-font-weight-regular);
2213
- }
2214
-
2215
- .seed-checkbox__label--weight_stronger {
2216
- font-weight: var(--seed-font-weight-bold);
2217
- }
2218
-
2219
- .seed-checkbox__control--variant_square {
2220
- border-style: solid;
2221
- border-width: 1px;
2222
- border-color: var(--seed-color-stroke-control);
2223
- }
2224
-
2225
- .seed-checkbox__control--variant_square:is(:checked, :indeterminate, [data-checked], [data-indeterminate]) {
2226
- background: var(--seed-color-bg-brand-solid);
2227
- border-width: 0;
2228
- }
2229
-
2230
- .seed-checkbox__control--variant_square:is(:active, [data-active]) {
2231
- background: var(--seed-color-bg-layer-default-pressed);
2232
- }
2233
-
2234
- .seed-checkbox__control--variant_square:is(:active, [data-active]):is(:checked, :indeterminate, [data-checked], [data-indeterminate]) {
2235
- background: var(--seed-color-bg-brand-solid-pressed);
2236
- }
2237
-
2238
- .seed-checkbox__control--variant_square:is(:disabled, [disabled], [data-disabled]) {
2239
- background: var(--seed-color-bg-disabled);
2240
- border-color: var(--seed-color-stroke-neutral);
2241
- }
2242
-
2243
- .seed-checkbox__control--variant_square:is(:disabled, [disabled], [data-disabled]):is(:active, [data-active]) {
2244
- background: var(--seed-color-bg-disabled);
2245
- }
2246
-
2247
- .seed-checkbox__icon--variant_square:is(:checked, :indeterminate, [data-checked], [data-indeterminate]) {
2248
- color: var(--seed-color-palette-static-white);
2249
- display: block;
2250
- }
2251
-
2252
- .seed-checkbox__icon--variant_square:is(:disabled, [disabled], [data-disabled]):is(:checked, :indeterminate, [data-checked], [data-indeterminate]) {
2253
- color: var(--seed-color-fg-disabled);
2254
- display: block;
2255
- }
2256
-
2257
- .seed-checkbox__label--variant_square:is(:disabled, [disabled], [data-disabled]) {
2258
- color: var(--seed-color-fg-disabled);
2259
- }
2260
-
2261
- .seed-checkbox__control--variant_ghost, .seed-checkbox__control--variant_ghost:is(:checked, :indeterminate, [data-checked], [data-indeterminate]) {
2262
- background: none;
2263
- }
2264
-
2265
- .seed-checkbox__control--variant_ghost:is(:active, [data-active]) {
2266
- background: var(--seed-color-bg-layer-default-pressed);
2267
- }
2268
-
2269
- .seed-checkbox__control--variant_ghost:is(:active, [data-active]):is(:checked, :indeterminate, [data-checked], [data-indeterminate]) {
2270
- background: var(--seed-color-palette-carrot-200);
2271
- }
2272
-
2273
- .seed-checkbox__control--variant_ghost:is(:disabled, [disabled], [data-disabled]):is(:checked, :indeterminate, [data-checked], [data-indeterminate]), .seed-checkbox__control--variant_ghost:is(:disabled, [disabled], [data-disabled]):is(:active, [data-active]) {
2274
- background: none;
2275
- }
2276
-
2277
- .seed-checkbox__icon--variant_ghost {
2278
- color: var(--seed-color-fg-placeholder);
2279
- display: block;
2280
- }
2281
-
2282
- .seed-checkbox__icon--variant_ghost:is(:checked, :indeterminate, [data-checked], [data-indeterminate]) {
2283
- color: var(--seed-color-fg-brand);
2284
- }
2285
-
2286
- .seed-checkbox__icon--variant_ghost:is(:disabled, [disabled], [data-disabled]):is(:checked, :indeterminate, [data-checked], [data-indeterminate]), .seed-checkbox__icon--variant_ghost:is(:disabled, [disabled], [data-disabled]), .seed-checkbox__label--variant_ghost:is(:disabled, [disabled], [data-disabled]) {
2287
- color: var(--seed-color-fg-disabled);
2288
- }
2289
-
2290
- .seed-checkbox__root--size_large {
2291
- min-height: var(--seed-dimension-x9);
2292
- }
2293
-
2294
- .seed-checkbox__control--size_large {
2295
- border-radius: var(--seed-radius-r1);
2296
- width: var(--seed-dimension-x6);
2297
- height: var(--seed-dimension-x6);
2298
- margin: calc((var(--seed-dimension-x9) - var(--seed-dimension-x6)) / 2) 0;
2299
- }
2300
-
2301
- .seed-checkbox__label--size_large {
2302
- font-size: var(--seed-font-size-t5);
2303
- line-height: var(--seed-line-height-t5);
2304
- margin-block-start: calc(18px - .65625rem);
2305
- }
2306
-
2307
- .seed-checkbox__root--size_medium {
2308
- min-height: var(--seed-dimension-x8);
2309
- }
2310
-
2311
- .seed-checkbox__control--size_medium {
2312
- border-radius: var(--seed-radius-r1);
2313
- width: var(--seed-dimension-x5);
2314
- height: var(--seed-dimension-x5);
2315
- margin: calc((var(--seed-dimension-x8) - var(--seed-dimension-x5)) / 2) 0;
2316
- }
2317
-
2318
- .seed-checkbox__label--size_medium {
2319
- font-size: var(--seed-font-size-t4);
2320
- line-height: var(--seed-line-height-t4);
2321
- margin-block-start: calc(16px - .59375rem);
2322
- }
2323
-
2324
- .seed-checkbox__icon--size_medium-variant_ghost {
2325
- width: 14px;
2326
- height: 14px;
2327
- }
2328
-
2329
- .seed-checkbox__icon--size_large-variant_ghost {
2330
- width: 18px;
2331
- height: 18px;
2332
- }
2333
-
2334
- .seed-checkbox__icon--size_medium-variant_square {
2335
- width: 12px;
2336
- height: 12px;
2337
- }
2338
-
2339
- .seed-checkbox__icon--size_large-variant_square {
2340
- width: 14px;
2341
- height: 14px;
2342
- }
2343
-
2344
- .seed-action-chip__root {
2345
- box-sizing: border-box;
2346
- cursor: pointer;
2347
- text-transform: none;
2348
- text-align: start;
2349
- -webkit-font-smoothing: antialiased;
2350
- -moz-osx-font-smoothing: grayscale;
2351
- font-family: inherit;
2352
- line-height: 1;
2353
- font-weight: var(--seed-font-weight-medium);
2354
- border-radius: var(--seed-radius-full);
2355
- background: var(--seed-color-bg-neutral-weak);
2356
- color: var(--seed-color-fg-neutral);
2357
- --seed-prefix-icon-color: var(--seed-color-fg-neutral);
2358
- --seed-suffix-icon-color: var(--seed-color-fg-neutral-subtle);
2359
- --seed-icon-color: var(--seed-color-fg-neutral);
2360
- --seed-count-line-height: 1px;
2361
- --seed-count-font-weight: var(--seed-font-weight-medium);
2362
- --seed-count-color: var(--seed-color-fg-neutral-muted);
2363
- border: none;
2364
- flex-shrink: 0;
2365
- justify-content: center;
2366
- align-items: center;
2367
- display: inline-flex;
2368
- }
2369
-
2370
- .seed-action-chip__root:is(:active, [data-active]) {
2371
- background: var(--seed-color-bg-neutral-weak-pressed);
2372
- }
2373
-
2374
- .seed-action-chip__root:is(:focus, [data-focus]) {
2375
- outline: none;
2376
- }
2377
-
2378
- .seed-action-chip__root:is(:disabled, [disabled], [data-disabled]) {
2379
- background: var(--seed-color-bg-disabled);
2380
- color: var(--seed-color-fg-disabled);
2381
- cursor: not-allowed;
2382
- --seed-prefix-icon-color: var(--seed-color-fg-disabled);
2383
- --seed-suffix-icon-color: var(--seed-color-fg-disabled);
2384
- --seed-icon-color: var(--seed-color-fg-disabled);
2385
- }
2386
-
2387
- .seed-action-chip__root--size_medium {
2388
- min-height: var(--seed-dimension-x9);
2389
- padding-block: var(--seed-dimension-x2);
2390
- gap: var(--seed-dimension-x1);
2391
- font-size: var(--seed-font-size-t4);
2392
- --seed-count-font-size: var(--seed-font-size-t4);
2393
- --seed-prefix-icon-size: var(--seed-dimension-x4);
2394
- --seed-suffix-icon-size: var(--seed-dimension-x3_5);
2395
- --seed-icon-size: var(--seed-dimension-x4);
2396
- }
2397
-
2398
- .seed-action-chip__root--size_small {
2399
- min-height: var(--seed-dimension-x8);
2400
- padding-block: var(--seed-dimension-x1_5);
2401
- gap: var(--seed-dimension-x1);
2402
- font-size: var(--seed-font-size-t4);
2403
- --seed-count-font-size: var(--seed-font-size-t4);
2404
- --seed-prefix-icon-size: var(--seed-dimension-x4);
2405
- --seed-suffix-icon-size: var(--seed-dimension-x3_5);
2406
- --seed-icon-size: var(--seed-dimension-x4);
2407
- }
2408
-
2409
- .seed-action-chip__root--size_medium-layout_withText {
2410
- padding-inline: var(--seed-dimension-x3_5);
2411
- }
2412
-
2413
- .seed-action-chip__root--size_medium-layout_iconOnly {
2414
- min-width: var(--seed-dimension-x9);
2415
- }
2416
-
2417
- .seed-action-chip__root--size_small-layout_withText {
2418
- padding-inline: var(--seed-dimension-x3);
2419
- }
2420
-
2421
- .seed-action-chip__root--size_small-layout_iconOnly {
2422
- min-width: var(--seed-dimension-x8);
2423
- }
2424
-
2425
- .seed-control-chip__root {
2426
- box-sizing: border-box;
2427
- cursor: pointer;
2428
- text-transform: none;
2429
- text-align: start;
2430
- -webkit-font-smoothing: antialiased;
2431
- -moz-osx-font-smoothing: grayscale;
2432
- border-radius: var(--seed-radius-full);
2433
- box-shadow: inset 0 0 0 1px var(--seed-color-stroke-neutral);
2434
- color: var(--seed-color-fg-neutral);
2435
- line-height: 1;
2436
- font-weight: var(--seed-font-weight-medium);
2437
- --seed-prefix-icon-color: var(--seed-color-fg-neutral);
2438
- --seed-suffix-icon-color: var(--seed-color-fg-neutral-subtle);
2439
- --seed-icon-color: var(--seed-color-fg-neutral);
2440
- --seed-count-line-height: 1px;
2441
- --seed-count-font-weight: var(--seed-font-weight-medium);
2442
- --seed-count-color: var(--seed-color-fg-neutral-muted);
2443
- border: none;
2444
- flex-shrink: 0;
2445
- justify-content: center;
2446
- align-items: center;
2447
- display: inline-flex;
2448
- }
2449
-
2450
- .seed-control-chip__root:is(:focus, [data-focus]) {
2451
- outline: none;
2452
- }
2453
-
2454
- .seed-control-chip__root:is(:active, [data-active]) {
2455
- background: var(--seed-color-bg-layer-default-pressed);
2456
- }
2457
-
2458
- .seed-control-chip__root:is(:checked, [data-checked]) {
2459
- box-shadow: none;
2460
- background: var(--seed-color-bg-neutral-solid-muted);
2461
- color: var(--seed-color-palette-static-white);
2462
- font-weight: var(--seed-font-weight-bold);
2463
- --seed-prefix-icon-color: var(--seed-color-palette-static-white);
2464
- --seed-suffix-icon-color: var(--seed-color-palette-static-white);
2465
- --seed-icon-color: var(--seed-color-palette-static-white);
2466
- --seed-count-color: var(--seed-color-palette-static-white-alpha-800);
2467
- }
2468
-
2469
- .seed-control-chip__root:is(:checked, [data-checked]):is(:active, [data-active]) {
2470
- background: var(--seed-color-bg-neutral-solid-muted-pressed);
2471
- }
2472
-
2473
- .seed-control-chip__root:is(:disabled, [disabled], [data-disabled]) {
2474
- cursor: not-allowed;
2475
- background: var(--seed-color-bg-disabled);
2476
- color: var(--seed-color-fg-disabled);
2477
- --seed-prefix-icon-color: var(--seed-color-fg-disabled);
2478
- --seed-suffix-icon-color: var(--seed-color-fg-disabled);
2479
- --seed-icon-color: var(--seed-color-fg-disabled);
2480
- }
2481
-
2482
- .seed-control-chip__root--size_medium {
2483
- min-height: var(--seed-dimension-x9);
2484
- padding-block: var(--seed-dimension-x2);
2485
- gap: var(--seed-dimension-x1);
2486
- font-size: var(--seed-font-size-t4);
2487
- --seed-prefix-icon-size: var(--seed-dimension-x4);
2488
- --seed-suffix-icon-size: var(--seed-dimension-x3_5);
2489
- --seed-icon-size: var(--seed-dimension-x4);
2490
- --seed-count-font-size: var(--seed-font-size-t4);
2491
- }
2492
-
2493
- .seed-control-chip__root--size_small {
2494
- min-height: var(--seed-dimension-x8);
2495
- padding-block: var(--seed-dimension-x1_5);
2496
- gap: var(--seed-dimension-x1);
2497
- font-size: var(--seed-font-size-t4);
2498
- --seed-prefix-icon-size: var(--seed-dimension-x4);
2499
- --seed-suffix-icon-size: var(--seed-dimension-x3_5);
2500
- --seed-icon-size: var(--seed-dimension-x4);
2501
- --seed-count-font-size: var(--seed-font-size-t4);
2502
- }
2503
-
2504
- .seed-control-chip__root--size_medium-layout_withText {
2505
- padding-inline: var(--seed-dimension-x3_5);
2506
- }
2507
-
2508
- .seed-control-chip__root--size_medium-layout_iconOnly {
2509
- min-width: var(--seed-dimension-x9);
2510
- }
2511
-
2512
- .seed-control-chip__root--size_small-layout_withText {
2513
- padding-inline: var(--seed-dimension-x3);
2514
- }
2515
-
2516
- .seed-control-chip__root--size_small-layout_iconOnly {
2517
- min-width: var(--seed-dimension-x8);
2518
- }
2519
-
2520
- .seed-callout__root {
2521
- box-sizing: border-box;
2522
- -webkit-font-smoothing: antialiased;
2523
- -moz-osx-font-smoothing: grayscale;
2524
- text-align: start;
2525
- width: 100%;
2526
- min-height: 50px;
2527
- padding-inline: var(--seed-dimension-x3_5);
2528
- padding-block: var(--seed-dimension-x3_5);
2529
- align-items: center;
2530
- gap: var(--seed-dimension-x3);
2531
- border-radius: var(--seed-radius-r2_5);
2532
- --seed-prefix-icon-size: var(--seed-dimension-x4);
2533
- --seed-suffix-icon-size: var(--seed-dimension-x4);
2534
- border: none;
2535
- font-family: inherit;
2536
- display: flex;
2537
- }
2538
-
2539
- .seed-callout__root:is(button) {
2540
- cursor: pointer;
2541
- }
2542
-
2543
- .seed-callout__content {
2544
- margin-inline-end: auto;
2545
- display: inline-flex;
2546
- }
2547
-
2548
- .seed-callout__title {
2549
- font-size: var(--seed-font-size-t4);
2550
- line-height: var(--seed-line-height-t4);
2551
- font-weight: var(--seed-font-weight-bold);
2552
- margin-inline-end: 1ch;
2553
- }
2554
-
2555
- .seed-callout__description {
2556
- font-size: var(--seed-font-size-t4);
2557
- line-height: var(--seed-line-height-t4);
2558
- font-weight: var(--seed-font-weight-regular);
2559
- }
2560
-
2561
- .seed-callout__link {
2562
- cursor: pointer;
2563
- font-family: inherit;
2564
- font-size: var(--seed-font-size-t4);
2565
- line-height: var(--seed-line-height-t4);
2566
- font-weight: var(--seed-font-weight-regular);
2567
- text-underline-offset: 2px;
2568
- background-color: #0000;
2569
- border: none;
2570
- margin-inline-start: 1ch;
2571
- padding: 0;
2572
- text-decoration: underline;
2573
- display: inline-block;
2574
- }
2575
-
2576
- .seed-callout__closeButton {
2577
- cursor: pointer;
2578
- width: var(--seed-dimension-x10);
2579
- height: var(--seed-dimension-x10);
2580
- margin: calc((var(--seed-dimension-x10) - var(--seed-dimension-x4)) * -.5);
2581
- background-color: #0000;
2582
- border: none;
2583
- flex-grow: 0;
2584
- flex-shrink: 0;
2585
- justify-content: center;
2586
- align-items: center;
2587
- padding: 0;
2588
- display: flex;
2589
- }
2590
-
2591
- .seed-callout__root--tone_neutral {
2592
- background-color: var(--seed-color-bg-neutral-weak);
2593
- --seed-prefix-icon-color: var(--seed-color-fg-neutral);
2594
- --seed-suffix-icon-color: var(--seed-color-fg-neutral);
2595
- }
2596
-
2597
- .seed-callout__root--tone_neutral:is(button):is(:active, [data-active]) {
2598
- background-color: var(--seed-color-bg-neutral-weak-pressed);
2599
- }
2600
-
2601
- .seed-callout__title--tone_neutral, .seed-callout__description--tone_neutral, .seed-callout__link--tone_neutral {
2602
- color: var(--seed-color-fg-neutral);
2603
- }
2604
-
2605
- .seed-callout__root--tone_informative {
2606
- background-color: var(--seed-color-bg-informative-weak);
2607
- --seed-prefix-icon-color: var(--seed-color-fg-informative-contrast);
2608
- --seed-suffix-icon-color: var(--seed-color-fg-informative-contrast);
2609
- }
2610
-
2611
- .seed-callout__root--tone_informative:is(button):is(:active, [data-active]) {
2612
- background-color: var(--seed-color-bg-informative-weak-pressed);
2613
- }
2614
-
2615
- .seed-callout__title--tone_informative, .seed-callout__description--tone_informative, .seed-callout__link--tone_informative {
2616
- color: var(--seed-color-fg-informative-contrast);
2617
- }
2618
-
2619
- .seed-callout__root--tone_warning {
2620
- background-color: var(--seed-color-bg-warning-weak);
2621
- --seed-prefix-icon-color: var(--seed-color-fg-warning-contrast);
2622
- --seed-suffix-icon-color: var(--seed-color-fg-warning-contrast);
2623
- }
2624
-
2625
- .seed-callout__root--tone_warning:is(button):is(:active, [data-active]) {
2626
- background-color: var(--seed-color-bg-warning-weak-pressed);
2627
- }
2628
-
2629
- .seed-callout__title--tone_warning, .seed-callout__description--tone_warning, .seed-callout__link--tone_warning {
2630
- color: var(--seed-color-fg-warning-contrast);
2631
- }
2632
-
2633
- .seed-callout__root--tone_critical {
2634
- background-color: var(--seed-color-bg-critical-weak);
2635
- --seed-prefix-icon-color: var(--seed-color-fg-critical-contrast);
2636
- --seed-suffix-icon-color: var(--seed-color-fg-critical-contrast);
2637
- }
2638
-
2639
- .seed-callout__root--tone_critical:is(button):is(:active, [data-active]) {
2640
- background-color: var(--seed-color-bg-critical-weak-pressed);
2641
- }
2642
-
2643
- .seed-callout__title--tone_critical, .seed-callout__description--tone_critical, .seed-callout__link--tone_critical {
2644
- color: var(--seed-color-fg-critical-contrast);
2645
- }
2646
-
2647
- .seed-callout__root--tone_magic {
2648
- background-color: var(--seed-color-bg-magic-weak);
2649
- --seed-prefix-icon-color: var(--seed-color-fg-magic-contrast);
2650
- --seed-suffix-icon-color: var(--seed-color-fg-magic-contrast);
2651
- }
2652
-
2653
- .seed-callout__root--tone_magic:is(button):is(:active, [data-active]) {
2654
- background-color: var(--seed-color-bg-magic-weak-pressed);
2655
- }
2656
-
2657
- .seed-callout__title--tone_magic, .seed-callout__description--tone_magic, .seed-callout__link--tone_magic {
2658
- color: var(--seed-color-fg-magic-contrast);
2659
- }
2660
-
2661
- .seed-manner-temp-badge__root {
2662
- box-sizing: border-box;
2663
- text-transform: none;
2664
- text-align: start;
2665
- -webkit-font-smoothing: antialiased;
2666
- -moz-osx-font-smoothing: grayscale;
2667
- border-radius: var(--seed-radius-full);
2668
- min-height: 20px;
2669
- padding-inline: var(--seed-dimension-x1_5);
2670
- padding-block: var(--seed-dimension-x0_5);
2671
- font-size: var(--seed-font-size-t1);
2672
- line-height: var(--seed-line-height-t1);
2673
- font-weight: var(--seed-font-weight-bold);
2674
- justify-content: center;
2675
- align-items: center;
2676
- text-decoration: none;
2677
- display: inline-flex;
2678
- }
2679
-
2680
- .seed-manner-temp-badge__root--level_l1 {
2681
- background-color: var(--seed-color-manner-temp-l1-bg);
2682
- color: var(--seed-color-manner-temp-l1-text);
2683
- }
2684
-
2685
- .seed-manner-temp-badge__root--level_l2 {
2686
- background-color: var(--seed-color-manner-temp-l2-bg);
2687
- color: var(--seed-color-manner-temp-l2-text);
2688
- }
2689
-
2690
- .seed-manner-temp-badge__root--level_l3 {
2691
- background-color: var(--seed-color-manner-temp-l3-bg);
2692
- color: var(--seed-color-manner-temp-l3-text);
2693
- }
2694
-
2695
- .seed-manner-temp-badge__root--level_l4 {
2696
- background-color: var(--seed-color-manner-temp-l4-bg);
2697
- color: var(--seed-color-manner-temp-l4-text);
2698
- }
2699
-
2700
- .seed-manner-temp-badge__root--level_l5 {
2701
- background-color: var(--seed-color-manner-temp-l5-bg);
2702
- color: var(--seed-color-manner-temp-l5-text);
2703
- }
2704
-
2705
- .seed-manner-temp-badge__root--level_l6 {
2706
- background-color: var(--seed-color-manner-temp-l6-bg);
2707
- color: var(--seed-color-manner-temp-l6-text);
2708
- }
2709
-
2710
- .seed-segmented-control__root {
2711
- box-sizing: border-box;
2712
- min-width: fit-content;
2713
- max-width: 100%;
2714
- padding: var(--seed-dimension-x1);
2715
- border-radius: var(--seed-radius-full);
2716
- background-color: var(--seed-color-bg-neutral-weak);
2717
- isolation: isolate;
2718
- grid-auto-columns: 1fr;
2719
- grid-auto-flow: column;
2720
- align-items: center;
2721
- display: grid;
2722
- position: relative;
2723
- }
2724
-
2725
- .seed-segmented-control__indicator {
2726
- z-index: -1;
2727
- will-change: transform;
2728
- transform: translateX(calc(var(--segment-index) * 100%));
2729
- inset-block: var(--seed-dimension-x1);
2730
- width: calc((100% - var(--seed-dimension-x1) * 2) / var(--segment-count));
2731
- border-radius: var(--seed-radius-full);
2732
- background-color: var(--seed-color-bg-layer-default);
2733
- transition: transform var(--seed-duration-d4) var(--seed-timing-function-easing);
2734
- position: absolute;
2735
- inset-inline-start: var(--seed-dimension-x1);
2736
- box-shadow: 0 1px 6px #0000000d;
2737
- }
2738
-
2739
- .seed-segmented-control__item {
2740
- text-align: center;
2741
- cursor: pointer;
2742
- user-select: none;
2743
- box-sizing: border-box;
2744
- overflow-wrap: break-word;
2745
- min-width: 86px;
2746
- min-height: var(--seed-dimension-x8);
2747
- padding-inline: var(--seed-dimension-x4);
2748
- border-radius: var(--seed-radius-full);
2749
- font-weight: var(--seed-font-weight-medium);
2750
- font-size: var(--seed-font-size-t5);
2751
- line-height: var(--seed-line-height-t5);
2752
- color: var(--seed-color-fg-neutral-muted);
2753
- justify-content: center;
2754
- align-items: center;
2755
- display: flex;
2756
- }
2757
-
2758
- .seed-segmented-control__item:is(:checked, [data-checked]) {
2759
- color: var(--seed-color-fg-neutral);
2760
- font-weight: var(--seed-font-weight-bold);
2761
- }
2762
-
2763
- .seed-segmented-control__item:is(:disabled, [disabled], [data-disabled]) {
2764
- cursor: not-allowed;
2765
- color: var(--seed-color-fg-disabled);
2766
- }
2767
-
2768
- .seed-segmented-control__item:not(:is(:checked, [data-checked])):is(:active, [data-active]) {
2769
- background-color: var(--seed-color-bg-neutral-weak-pressed);
2770
- }
2771
-
2772
- .seed-select-box-group__root {
2773
- flex-direction: column;
2774
- width: 100%;
2775
- display: flex;
2776
- }
2777
-
2778
- .seed-select-box__root {
2779
- cursor: pointer;
2780
- justify-content: space-between;
2781
- align-items: center;
2782
- gap: var(--seed-dimension-x2_5);
2783
- padding-inline: var(--seed-dimension-x4);
2784
- padding-block: var(--seed-dimension-x5);
2785
- border-radius: var(--seed-radius-r3);
2786
- box-shadow: inset 0 0 0 1px var(--seed-color-stroke-neutral);
2787
- display: flex;
2788
- }
2789
-
2790
- .seed-select-box__root:is(:active, [data-active]) {
2791
- background-color: var(--seed-color-bg-layer-default-pressed);
2792
- }
2793
-
2794
- .seed-select-box__root:is(:checked, [data-checked]) {
2795
- background-color: var(--seed-color-bg-neutral-weak);
2796
- box-shadow: inset 0 0 0 1px var(--seed-color-stroke-control);
2797
- }
2798
-
2799
- .seed-select-box__root:is(:checked, [data-checked]):is(:active, [data-active]) {
2800
- background-color: var(--seed-color-bg-neutral-weak-pressed);
2801
- }
2802
-
2803
- .seed-select-box__content {
2804
- gap: var(--seed-dimension-x0_5);
2805
- flex-direction: column;
2806
- display: flex;
2807
- }
2808
-
2809
- .seed-select-box__checkboxControl {
2810
- box-sizing: border-box;
2811
- width: var(--seed-dimension-x6);
2812
- height: var(--seed-dimension-x6);
2813
- background-color: var(--seed-color-bg-layer-default);
2814
- border-style: solid;
2815
- border-width: 1px;
2816
- border-color: var(--seed-color-stroke-control);
2817
- border-radius: var(--seed-radius-r1);
2818
- flex: none;
2819
- justify-content: center;
2820
- align-items: center;
2821
- display: flex;
2822
- }
2823
-
2824
- .seed-select-box__checkboxControl:is(:active, [data-active]) {
2825
- background-color: var(--seed-color-bg-layer-default-pressed);
2826
- }
2827
-
2828
- .seed-select-box__checkboxControl:is(:checked, [data-checked]) {
2829
- background-color: var(--seed-color-bg-brand-solid);
2830
- border-width: 0;
2831
- }
2832
-
2833
- .seed-select-box__checkboxControl:is(:checked, [data-checked]):is(:active, [data-active]) {
2834
- background-color: var(--seed-color-bg-brand-solid-pressed);
2835
- }
2836
-
2837
- .seed-select-box__checkboxIcon {
2838
- width: var(--seed-dimension-x3_5);
2839
- height: var(--seed-dimension-x3_5);
2840
- display: none;
2841
- }
2842
-
2843
- .seed-select-box__checkboxIcon:is(:checked, [data-checked]) {
2844
- color: var(--seed-color-palette-static-white);
2845
- display: block;
2846
- }
2847
-
2848
- .seed-select-box__radioControl {
2849
- box-sizing: border-box;
2850
- width: var(--seed-dimension-x6);
2851
- height: var(--seed-dimension-x6);
2852
- background-color: var(--seed-color-bg-layer-default);
2853
- border-style: solid;
2854
- border-width: 1px;
2855
- border-color: var(--seed-color-stroke-control);
2856
- border-radius: var(--seed-radius-full);
2857
- flex: none;
2858
- justify-content: center;
2859
- align-items: center;
2860
- display: flex;
2861
- }
2862
-
2863
- .seed-select-box__radioControl:is(:active, [data-active]) {
2864
- background-color: var(--seed-color-bg-layer-default-pressed);
2865
- }
2866
-
2867
- .seed-select-box__radioControl:is(:checked, [data-checked]) {
2868
- background-color: var(--seed-color-bg-brand-solid);
2869
- border-width: 0;
2870
- }
2871
-
2872
- .seed-select-box__radioControl:is(:checked, [data-checked]):is(:active, [data-active]) {
2873
- background-color: var(--seed-color-bg-brand-solid-pressed);
2874
- }
2875
-
2876
- .seed-select-box__radioIcon {
2877
- width: var(--seed-dimension-x2_5);
2878
- height: var(--seed-dimension-x2_5);
2879
- border-radius: var(--seed-radius-full);
2880
- display: none;
2881
- }
2882
-
2883
- .seed-select-box__radioIcon:is(:checked, [data-checked]) {
2884
- background-color: var(--seed-color-palette-static-white);
2885
- color: var(--seed-color-palette-static-white);
2886
- display: block;
2887
- }
2888
-
2889
- .seed-select-box__label {
2890
- color: var(--seed-color-fg-neutral);
2891
- font-weight: var(--seed-font-weight-bold);
2892
- font-size: var(--seed-font-size-t5);
2893
- line-height: var(--seed-line-height-t5);
2894
- }
2895
-
2896
- .seed-select-box__description {
2897
- color: var(--seed-color-fg-neutral-muted);
2898
- font-weight: var(--seed-font-weight-regular);
2899
- font-size: var(--seed-font-size-t4);
2900
- line-height: var(--seed-line-height-t4);
2901
- }
2902
-
2903
- .seed-switch__root {
2904
- box-sizing: border-box;
2905
- vertical-align: top;
2906
- isolation: isolate;
2907
- opacity: 1;
2908
- cursor: pointer;
2909
- justify-content: space-between;
2910
- align-items: flex-start;
2911
- display: inline-flex;
2912
- position: relative;
2913
- }
2914
-
2915
- .seed-switch__root:is(:disabled, [disabled], [data-disabled]) {
2916
- opacity: .38;
2917
- cursor: not-allowed;
2918
- }
2919
-
2920
- .seed-switch__control {
2921
- box-sizing: border-box;
2922
- border-radius: var(--seed-radius-full);
2923
- background: var(--seed-color-palette-gray-600);
2924
- transition: background-color 50ms cubic-bezier(.35, 0, .35, 1) 20ms;
2925
- display: block;
2926
- position: relative;
2927
- }
2928
-
2929
- .seed-switch__control:is(:checked, [data-checked]) {
2930
- background: var(--seed-color-bg-brand-solid);
2931
- }
2932
-
2933
- .seed-switch__thumb {
2934
- border-radius: var(--seed-radius-full);
2935
- background: var(--seed-color-palette-static-white);
2936
- transition: transform .15s cubic-bezier(.35, 0, .35, 1);
2937
- }
2938
-
2939
- .seed-switch__root--size_medium {
2940
- min-height: 32px;
2941
- }
2942
-
2943
- .seed-switch__control--size_medium {
2944
- min-block-size: 32px;
2945
- min-inline-size: 52px;
2946
- padding: 2px;
2947
- }
2948
-
2949
- .seed-switch__thumb--size_medium {
2950
- width: 28px;
2951
- height: 28px;
2952
- box-shadow: 0 3px 8px #00000026, 0 1px 3px #0000000f;
2953
- }
2954
-
2955
- .seed-switch__thumb--size_medium:is(:checked, [data-checked]) {
2956
- transform: translateX(20px);
2957
- }
2958
-
2959
- .seed-switch__root--size_small {
2960
- gap: var(--seed-dimension-x2);
2961
- min-height: 24px;
2962
- }
2963
-
2964
- .seed-switch__control--size_small {
2965
- min-block-size: 16px;
2966
- min-inline-size: 26px;
2967
- margin: 4px 0;
2968
- padding: 2px;
2969
- }
2970
-
2971
- .seed-switch__thumb--size_small {
2972
- width: 12px;
2973
- height: 12px;
2974
- }
2975
-
2976
- .seed-switch__thumb--size_small:is(:checked, [data-checked]) {
2977
- transform: translateX(10px);
2978
- }
2979
-
2980
- .seed-switch__label--size_small {
2981
- font-size: var(--seed-font-size-t4);
2982
- line-height: var(--seed-line-height-t4);
2983
- font-weight: var(--seed-font-weight-regular);
2984
- margin-top: calc(12px - .59375rem);
2985
- }
2986
-
2987
- .seed-help-bubble__backdrop {
2988
- z-index: 1000;
2989
- background: var(--seed-color-bg-overlay);
2990
- width: 100vw;
2991
- height: 100vh;
2992
- position: fixed;
2993
- inset: 0;
2994
- }
2995
-
2996
- .seed-help-bubble__backdrop:is(:hidden, [hidden], [data-hidden]) {
2997
- display: none !important;
2998
- }
2999
-
3000
- .seed-help-bubble__content {
3001
- background: var(--seed-color-bg-neutral-solid);
3002
- padding-inline: var(--seed-dimension-x3);
3003
- padding-block: var(--seed-dimension-x3);
3004
- border-radius: var(--seed-radius-r3);
3005
- word-break: keep-all;
3006
- --seed-box-max-width: initial;
3007
- max-width: var(--seed-box-max-width);
3008
- flex-direction: column;
3009
- display: flex;
3010
- }
3011
-
3012
- .seed-help-bubble__content:is(:hidden, [hidden], [data-hidden]) {
3013
- display: none !important;
3014
- }
3015
-
3016
- .seed-help-bubble__arrow {
3017
- fill: var(--seed-color-bg-neutral-solid);
3018
- width: 10px;
3019
- height: 6px;
3020
- }
3021
-
3022
- .seed-help-bubble__title {
3023
- color: var(--seed-color-palette-static-white);
3024
- font-size: var(--seed-font-size-t3);
3025
- font-weight: var(--seed-font-weight-bold);
3026
- }
3027
-
3028
- .seed-help-bubble__description {
3029
- color: var(--seed-color-palette-static-white);
3030
- font-size: var(--seed-font-size-t3);
3031
- font-weight: var(--seed-font-weight-regular);
3032
- }
3033
-
3034
- .seed-help-bubble__closeButton {
3035
- color: var(--seed-color-palette-static-white);
3036
- --seed-icon-size: 14px;
3037
- --seed-icon-color: var(--seed-color-palette-static-white);
3038
- justify-content: center;
3039
- align-items: center;
3040
- width: 32px;
3041
- height: 32px;
3042
- display: flex;
3043
- position: absolute;
3044
- top: 4px;
3045
- right: 4px;
3046
- }
3047
-
3048
- .seed-identity-placeholder__root {
3049
- box-sizing: border-box;
3050
- vertical-align: top;
3051
- background-color: var(--seed-color-palette-gray-400);
3052
- justify-content: center;
3053
- align-items: center;
3054
- width: 100%;
3055
- height: 100%;
3056
- display: inline-flex;
3057
- position: relative;
3058
- }
3059
-
3060
- .seed-identity-placeholder__image {
3061
- object-fit: cover;
3062
- fill: #f7f8fa;
3063
- width: 100%;
3064
- height: 100%;
3065
- display: block;
3066
- overflow: hidden;
3067
- }
3068
-
3069
- .seed-inline-banner__root {
3070
- box-sizing: border-box;
3071
- -webkit-font-smoothing: antialiased;
3072
- -moz-osx-font-smoothing: grayscale;
3073
- width: 100%;
3074
- min-height: var(--seed-dimension-x10);
3075
- padding-inline: var(--seed-dimension-x4);
3076
- padding-block: var(--seed-dimension-x2_5);
3077
- --seed-prefix-icon-size: var(--seed-dimension-x4);
3078
- --seed-prefix-icon-margin-right: var(--seed-dimension-x2);
3079
- --seed-prefix-icon-margin-top: calc((var(--seed-dimension-x10) - var(--seed-dimension-x4)) * .5 - var(--seed-dimension-x2_5));
3080
- --seed-suffix-icon-size: var(--seed-dimension-x4);
3081
- --seed-suffix-icon-margin-left: var(--seed-dimension-x4);
3082
- --seed-suffix-icon-margin-top: calc((var(--seed-dimension-x10) - var(--seed-dimension-x4)) * .5 - var(--seed-dimension-x2_5));
3083
- border: none;
3084
- align-items: flex-start;
3085
- font-family: inherit;
3086
- display: flex;
3087
- }
3088
-
3089
- .seed-inline-banner__root:is(button) {
3090
- cursor: pointer;
3091
- }
3092
-
3093
- .seed-inline-banner__content {
3094
- box-sizing: border-box;
3095
- text-align: start;
3096
- margin-inline-end: auto;
3097
- display: inline-flex;
3098
- }
3099
-
3100
- .seed-inline-banner__title {
3101
- font-size: var(--seed-font-size-t4);
3102
- line-height: var(--seed-line-height-t4);
3103
- font-weight: var(--seed-font-weight-bold);
3104
- margin-inline-end: 1ch;
3105
- }
3106
-
3107
- .seed-inline-banner__description {
3108
- font-size: var(--seed-font-size-t4);
3109
- line-height: var(--seed-line-height-t4);
3110
- font-weight: var(--seed-font-weight-medium);
3111
- }
3112
-
3113
- .seed-inline-banner__link {
3114
- cursor: pointer;
3115
- height: var(--seed-dimension-x10);
3116
- margin-left: var(--seed-dimension-x4);
3117
- font-family: inherit;
3118
- font-size: var(--seed-font-size-t2);
3119
- line-height: var(--seed-line-height-t2);
3120
- font-weight: var(--seed-font-weight-regular);
3121
- text-underline-offset: 2px;
3122
- background-color: #0000;
3123
- border: none;
3124
- flex-grow: 0;
3125
- flex-shrink: 0;
3126
- align-items: center;
3127
- text-decoration: underline;
3128
- display: flex;
3129
- }
3130
-
3131
- .seed-inline-banner__closeButton {
3132
- width: var(--seed-dimension-x10);
3133
- height: var(--seed-dimension-x10);
3134
- margin: calc((var(--seed-dimension-x10) - var(--seed-dimension-x4)) * -.5);
3135
- margin-top: calc((var(--seed-dimension-x10) - var(--seed-dimension-x4)) * -.5 + (var(--seed-dimension-x10) - var(--seed-dimension-x4)) * .5 - var(--seed-dimension-x2_5));
3136
- margin-left: calc((var(--seed-dimension-x10) - var(--seed-dimension-x4)) * -.5 + var(--seed-dimension-x4));
3137
- --seed-suffix-icon-margin-top: initial;
3138
- --seed-suffix-icon-margin-left: initial;
3139
- cursor: pointer;
3140
- background-color: #0000;
3141
- border: none;
3142
- flex-grow: 0;
3143
- flex-shrink: 0;
3144
- justify-content: center;
3145
- align-items: center;
3146
- padding: 0;
3147
- display: flex;
3148
- }
3149
-
3150
- .seed-inline-banner__root--variant_neutralWeak {
3151
- background-color: var(--seed-color-bg-neutral-weak);
3152
- color: var(--seed-color-fg-neutral);
3153
- --seed-prefix-icon-color: var(--seed-color-fg-neutral);
3154
- --seed-suffix-icon-color: var(--seed-color-fg-neutral);
3155
- }
3156
-
3157
- .seed-inline-banner__title--variant_neutralWeak, .seed-inline-banner__description--variant_neutralWeak, .seed-inline-banner__link--variant_neutralWeak {
3158
- color: var(--seed-color-fg-neutral);
3159
- }
3160
-
3161
- .seed-inline-banner__root--variant_positiveWeak {
3162
- background-color: var(--seed-color-bg-positive-weak);
3163
- color: var(--seed-color-fg-positive-contrast);
3164
- --seed-prefix-icon-color: var(--seed-color-fg-positive-contrast);
3165
- --seed-suffix-icon-color: var(--seed-color-fg-positive-contrast);
3166
- }
3167
-
3168
- .seed-inline-banner__title--variant_positiveWeak, .seed-inline-banner__description--variant_positiveWeak, .seed-inline-banner__link--variant_positiveWeak {
3169
- color: var(--seed-color-fg-positive-contrast);
3170
- }
3171
-
3172
- .seed-inline-banner__root--variant_informativeWeak {
3173
- background-color: var(--seed-color-bg-informative-weak);
3174
- color: var(--seed-color-fg-informative-contrast);
3175
- --seed-prefix-icon-color: var(--seed-color-fg-informative-contrast);
3176
- --seed-suffix-icon-color: var(--seed-color-fg-informative-contrast);
3177
- }
3178
-
3179
- .seed-inline-banner__title--variant_informativeWeak, .seed-inline-banner__description--variant_informativeWeak, .seed-inline-banner__link--variant_informativeWeak {
3180
- color: var(--seed-color-fg-informative-contrast);
3181
- }
3182
-
3183
- .seed-inline-banner__root--variant_warningWeak {
3184
- background-color: var(--seed-color-bg-warning-weak);
3185
- color: var(--seed-color-fg-warning-contrast);
3186
- --seed-prefix-icon-color: var(--seed-color-fg-warning-contrast);
3187
- --seed-suffix-icon-color: var(--seed-color-fg-warning-contrast);
3188
- }
3189
-
3190
- .seed-inline-banner__title--variant_warningWeak, .seed-inline-banner__description--variant_warningWeak, .seed-inline-banner__link--variant_warningWeak {
3191
- color: var(--seed-color-fg-warning-contrast);
3192
- }
3193
-
3194
- .seed-inline-banner__root--variant_warningSolid {
3195
- background-color: var(--seed-color-bg-warning-solid);
3196
- color: var(--seed-color-fg-neutral);
3197
- --seed-prefix-icon-color: var(--seed-color-fg-neutral);
3198
- --seed-suffix-icon-color: var(--seed-color-fg-neutral);
3199
- }
3200
-
3201
- .seed-inline-banner__title--variant_warningSolid, .seed-inline-banner__description--variant_warningSolid, .seed-inline-banner__link--variant_warningSolid {
3202
- color: var(--seed-color-fg-neutral);
3203
- }
3204
-
3205
- .seed-inline-banner__root--variant_criticalWeak {
3206
- background-color: var(--seed-color-bg-critical-weak);
3207
- color: var(--seed-color-fg-critical-contrast);
3208
- --seed-prefix-icon-color: var(--seed-color-fg-critical-contrast);
3209
- --seed-suffix-icon-color: var(--seed-color-fg-critical-contrast);
3210
- }
3211
-
3212
- .seed-inline-banner__title--variant_criticalWeak, .seed-inline-banner__description--variant_criticalWeak, .seed-inline-banner__link--variant_criticalWeak {
3213
- color: var(--seed-color-fg-critical-contrast);
3214
- }
3215
-
3216
- .seed-inline-banner__root--variant_criticalSolid {
3217
- background-color: var(--seed-color-bg-critical-solid);
3218
- color: var(--seed-color-palette-static-white);
3219
- --seed-prefix-icon-color: var(--seed-color-palette-static-white);
3220
- --seed-suffix-icon-color: var(--seed-color-palette-static-white);
3221
- }
3222
-
3223
- .seed-inline-banner__title--variant_criticalSolid, .seed-inline-banner__description--variant_criticalSolid, .seed-inline-banner__link--variant_criticalSolid {
3224
- color: var(--seed-color-palette-static-white);
3225
- }
3226
-
3227
- .seed-progress-circle__root {
3228
- box-sizing: border-box;
3229
- display: inline-flex;
3230
- position: relative;
3231
- }
3232
-
3233
- .seed-progress-circle__root[data-progress-state="indeterminate"] {
3234
- animation: 1.2s cubic-bezier(.35, .25, .65, .75) infinite rotate;
3235
- }
3236
-
3237
- .seed-progress-circle__track {
3238
- stroke: var(--track-color);
3239
- }
3240
-
3241
- .seed-progress-circle__range {
3242
- stroke: var(--range-color);
3243
- stroke-linecap: round;
3244
- transition-property: stroke-dasharray;
3245
- transition-duration: .3s;
3246
- transition-timing-function: cubic-bezier(0, 0, .15, 1);
3247
- }
3248
-
3249
- .seed-progress-circle__range[data-progress-state="indeterminate"] {
3250
- animation: 1.2s cubic-bezier(.35, 0, .65, 1) infinite progress-circle-head, 1.2s cubic-bezier(.35, 0, .65, .6) infinite progress-circle-tail;
3251
- }
3252
-
3253
- .seed-progress-circle__root--tone_neutral {
3254
- --track-color: var(--seed-color-palette-gray-200);
3255
- --range-color: var(--seed-color-palette-gray-500);
3256
- }
3257
-
3258
- .seed-progress-circle__root--tone_brand {
3259
- --track-color: var(--seed-color-palette-carrot-200);
3260
- --range-color: var(--seed-color-bg-brand-solid);
3261
- }
3262
-
3263
- .seed-progress-circle__root--tone_staticWhite {
3264
- --track-color: var(--seed-color-palette-static-white-alpha-200);
3265
- --range-color: var(--seed-color-palette-static-white);
3266
- }
3267
-
3268
- .seed-progress-circle__root--size_24 {
3269
- --size: var(--seed-dimension-x6);
3270
- --thickness: 3px;
3271
- }
3272
-
3273
- .seed-progress-circle__root--size_40 {
3274
- --size: var(--seed-dimension-x10);
3275
- --thickness: 5px;
3276
- }
3277
-
3278
- .seed-tabs__root {
3279
- position: relative;
3280
- }
3281
-
3282
- .seed-tabs__list {
3283
- isolation: isolate;
3284
- -ms-overflow-style: none;
3285
- scrollbar-width: none;
3286
- flex-wrap: nowrap;
3287
- align-content: stretch;
3288
- align-items: stretch;
3289
- display: flex;
3290
- position: relative;
3291
- overflow-x: auto;
3292
- }
3293
-
3294
- .seed-tabs__list::-webkit-scrollbar {
3295
- display: none;
3296
- }
3297
-
3298
- .seed-tabs__list {
3299
- background: var(--seed-color-bg-layer-default);
3300
- box-shadow: inset 0 -1px var(--seed-color-stroke-neutral);
3301
- }
3302
-
3303
- .seed-tabs__carousel {
3304
- display: block;
3305
- overflow: hidden;
3306
- }
3307
-
3308
- .seed-tabs__carouselCamera {
3309
- display: flex;
3310
- }
3311
-
3312
- .seed-tabs__carouselCamera[data-auto-height] {
3313
- align-items: flex-start;
3314
- }
3315
-
3316
- .seed-tabs__content {
3317
- flex: 0 0 100%;
3318
- min-width: 0;
3319
- overflow: hidden auto;
3320
- transform: translate3d(0, 0, 0);
3321
- }
3322
-
3323
- .seed-tabs__content:not([data-carousel]):not(:is(:selected, [data-selected])) {
3324
- display: none;
3325
- }
3326
-
3327
- .seed-tabs__indicator {
3328
- will-change: left, width;
3329
- transition-property: left, width;
3330
- transition-duration: var(--seed-duration-d4);
3331
- transition-timing-function: var(--seed-timing-function-easing);
3332
- left: var(--indicator-left, 0px);
3333
- width: var(--indicator-width, 0px);
3334
- color: var(--seed-color-fg-neutral);
3335
- border-bottom: 2px solid var(--seed-color-fg-neutral);
3336
- position: absolute;
3337
- bottom: 0;
3338
- }
3339
-
3340
- .seed-tabs__indicator[data-ssr] {
3341
- display: none;
3342
- }
3343
-
3344
- .seed-tabs__trigger {
3345
- cursor: pointer;
3346
- box-sizing: border-box;
3347
- white-space: nowrap;
3348
- color: var(--seed-color-fg-neutral-subtle);
3349
- background-color: #0000;
3350
- border: none;
3351
- justify-content: center;
3352
- align-items: flex-end;
3353
- display: flex;
3354
- position: relative;
3355
- }
3356
-
3357
- .seed-tabs__trigger:is(:selected, [data-selected]) {
3358
- color: var(--seed-color-fg-neutral);
3359
- }
3360
-
3361
- .seed-tabs__trigger:is(:disabled, [disabled], [data-disabled]) {
3362
- cursor: not-allowed;
3363
- color: var(--seed-color-fg-disabled);
3364
- }
3365
-
3366
- .seed-tabs__trigger:is(:selected, [data-selected])[data-ssr]:after {
3367
- content: "";
3368
- background-color: var(--seed-color-fg-neutral);
3369
- height: 2px;
3370
- position: absolute;
3371
- bottom: 0;
3372
- left: 0;
3373
- right: 0;
3374
- }
3375
-
3376
- .seed-tabs__triggerNotification {
3377
- top: 0;
3378
- right: calc(-1 * var(--seed-dimension-x1) - var(--seed-dimension-x0_5));
3379
- background-color: var(--seed-color-bg-brand-solid);
3380
- width: var(--seed-dimension-x1);
3381
- height: var(--seed-dimension-x1);
3382
- border-radius: var(--seed-radius-full);
3383
- align-self: flex-start;
3384
- position: absolute;
3385
- }
3386
-
3387
- .seed-tabs__list--triggerLayout_fill {
3388
- justify-content: space-around;
3389
- padding-inline: 0;
3390
- }
3391
-
3392
- .seed-tabs__indicator--triggerLayout_fill {
3393
- left: calc(var(--indicator-left, 0px) + var(--seed-dimension-spacing-x-global-gutter));
3394
- width: calc(var(--indicator-width, 0px) - 2 * var(--seed-dimension-spacing-x-global-gutter));
3395
- }
3396
-
3397
- .seed-tabs__trigger--triggerLayout_fill {
3398
- flex: 1;
3399
- }
3400
-
3401
- .seed-tabs__list--triggerLayout_hug {
3402
- padding-inline: var(--seed-dimension-spacing-x-global-gutter);
3403
- justify-content: flex-start;
3404
- }
3405
-
3406
- .seed-tabs__indicator--triggerLayout_hug {
3407
- left: calc(var(--indicator-left, 0px) + 0px);
3408
- width: calc(var(--indicator-width, 0px) - 2 * 0px);
3409
- }
3410
-
3411
- .seed-tabs__root--contentLayout_fill {
3412
- flex-direction: column;
3413
- height: 100%;
3414
- display: flex;
3415
- }
3416
-
3417
- .seed-tabs__carousel--contentLayout_fill {
3418
- flex: 1;
3419
- }
3420
-
3421
- .seed-tabs__carouselCamera--contentLayout_fill {
3422
- align-items: stretch;
3423
- height: 100%;
3424
- }
3425
-
3426
- .seed-tabs__root--contentLayout_hug {
3427
- display: block;
3428
- }
3429
-
3430
- .seed-tabs__root--size_small {
3431
- --tabs-list-height: 40px;
3432
- }
3433
-
3434
- .seed-tabs__list--size_small {
3435
- min-height: 40px;
3436
- }
3437
-
3438
- .seed-tabs__trigger--size_small {
3439
- min-height: 40px;
3440
- padding-inline: var(--seed-dimension-x2_5);
3441
- padding-block: var(--seed-dimension-x2_5);
3442
- font-size: var(--seed-font-size-t4);
3443
- line-height: var(--seed-line-height-t4);
3444
- font-weight: var(--seed-font-weight-bold);
3445
- }
3446
-
3447
- .seed-tabs__root--size_medium {
3448
- --tabs-list-height: 44px;
3449
- }
3450
-
3451
- .seed-tabs__list--size_medium {
3452
- min-height: 44px;
3453
- }
3454
-
3455
- .seed-tabs__trigger--size_medium {
3456
- min-height: 44px;
3457
- padding-inline: var(--seed-dimension-x2_5);
3458
- padding-block: var(--seed-dimension-x2_5);
3459
- font-size: var(--seed-font-size-t5);
3460
- line-height: var(--seed-line-height-t5);
3461
- font-weight: var(--seed-font-weight-bold);
3462
- }
3463
-
3464
- .seed-tabs__root--stickyList_true {
3465
- position: relative;
3466
- }
3467
-
3468
- .seed-tabs__list--stickyList_true {
3469
- z-index: 1;
3470
- position: sticky;
3471
- top: 0;
3472
- }
3473
-
3474
- .seed-chip-tabs__root {
3475
- position: relative;
3476
- }
3477
-
3478
- .seed-chip-tabs__list {
3479
- isolation: isolate;
3480
- -ms-overflow-style: none;
3481
- scrollbar-width: none;
3482
- padding: 0px var(--seed-dimension-x4);
3483
- flex-wrap: nowrap;
3484
- align-content: stretch;
3485
- align-items: stretch;
3486
- display: flex;
3487
- position: relative;
3488
- overflow-x: auto;
3489
- }
3490
-
3491
- .seed-chip-tabs__list::-webkit-scrollbar {
3492
- display: none;
3493
- }
3494
-
3495
- .seed-chip-tabs__carousel {
3496
- display: block;
3497
- overflow: hidden;
3498
- }
3499
-
3500
- .seed-chip-tabs__carouselCamera {
3501
- display: flex;
3502
- }
3503
-
3504
- .seed-chip-tabs__carouselCamera[data-auto-height] {
3505
- align-items: flex-start;
3506
- }
3507
-
3508
- .seed-chip-tabs__content {
3509
- flex: 0 0 100%;
3510
- min-width: 0;
3511
- overflow: hidden auto;
3512
- transform: translate3d(0, 0, 0);
3513
- }
3514
-
3515
- .seed-chip-tabs__content:not([data-carousel]):not(:is(:selected, [data-selected])) {
3516
- display: none;
3517
- }
3518
-
3519
- .seed-chip-tabs__trigger {
3520
- cursor: pointer;
3521
- box-sizing: border-box;
3522
- white-space: nowrap;
3523
- border-radius: var(--seed-radius-full);
3524
- padding: var(--seed-dimension-x2) var(--seed-dimension-x3_5);
3525
- min-height: 36px;
3526
- font-family: inherit;
3527
- font-size: var(--seed-font-size-t4);
3528
- font-weight: var(--seed-font-weight-bold);
3529
- border: none;
3530
- justify-content: center;
3531
- align-items: center;
3532
- display: flex;
3533
- }
3534
-
3535
- .seed-chip-tabs__list--variant_neutralSolid {
3536
- gap: 0;
3537
- }
3538
-
3539
- .seed-chip-tabs__trigger--variant_neutralSolid {
3540
- color: var(--seed-color-fg-neutral);
3541
- font-weight: var(--seed-font-weight-bold);
3542
- background-color: #0000;
3543
- }
3544
-
3545
- .seed-chip-tabs__trigger--variant_neutralSolid:is(:selected, [data-selected]) {
3546
- background-color: var(--seed-color-bg-neutral-inverted);
3547
- color: var(--seed-color-fg-neutral-inverted);
3548
- }
3549
-
3550
- .seed-chip-tabs__trigger--variant_neutralSolid:is(:active, [data-active]) {
3551
- background-color: var(--seed-color-bg-layer-default-pressed);
3552
- }
3553
-
3554
- .seed-chip-tabs__trigger--variant_neutralSolid:is(:selected, [data-selected]):is(:active, [data-active]) {
3555
- background-color: var(--seed-color-bg-neutral-inverted-pressed);
3556
- }
3557
-
3558
- .seed-chip-tabs__trigger--variant_neutralSolid:is(:disabled, [disabled], [data-disabled]) {
3559
- cursor: not-allowed;
3560
- color: var(--seed-color-fg-disabled);
3561
- }
3562
-
3563
- .seed-chip-tabs__trigger--variant_neutralSolid:is(:disabled, [disabled], [data-disabled]):is(:selected, [data-selected]) {
3564
- background-color: var(--seed-color-bg-disabled);
3565
- color: var(--seed-color-fg-disabled);
3566
- }
3567
-
3568
- .seed-chip-tabs__list--variant_brandSolid {
3569
- gap: 8px;
3570
- }
3571
-
3572
- .seed-chip-tabs__trigger--variant_brandSolid {
3573
- background-color: var(--seed-color-bg-neutral-weak);
3574
- color: var(--seed-color-fg-neutral-muted);
3575
- font-weight: var(--seed-font-weight-medium);
3576
- }
3577
-
3578
- .seed-chip-tabs__trigger--variant_brandSolid:is(:selected, [data-selected]) {
3579
- background-color: var(--seed-color-bg-brand-solid);
3580
- color: var(--seed-color-palette-static-white);
3581
- font-weight: var(--seed-font-weight-bold);
3582
- }
3583
-
3584
- .seed-chip-tabs__trigger--variant_brandSolid:is(:active, [data-active]) {
3585
- background-color: var(--seed-color-bg-neutral-weak-pressed);
3586
- }
3587
-
3588
- .seed-chip-tabs__trigger--variant_brandSolid:is(:selected, [data-selected]):is(:active, [data-active]) {
3589
- background-color: var(--seed-color-bg-brand-solid-pressed);
3590
- }
3591
-
3592
- .seed-chip-tabs__trigger--variant_brandSolid:is(:disabled, [disabled], [data-disabled]) {
3593
- cursor: not-allowed;
3594
- background-color: var(--seed-color-bg-disabled);
3595
- color: var(--seed-color-fg-disabled);
3596
- }
3597
-
3598
- .seed-chip-tabs__trigger--variant_brandSolid:is(:disabled, [disabled], [data-disabled]):is(:selected, [data-selected]) {
3599
- background-color: var(--seed-color-bg-disabled);
3600
- }
3601
-
3602
- .seed-chip-tabs__root--contentLayout_fill {
3603
- flex-direction: column;
3604
- height: 100%;
3605
- display: flex;
3606
- }
3607
-
3608
- .seed-chip-tabs__carousel--contentLayout_fill {
3609
- flex: 1;
3610
- }
3611
-
3612
- .seed-chip-tabs__carouselCamera--contentLayout_fill {
3613
- align-items: stretch;
3614
- height: 100%;
3615
- }
3616
-
3617
- .seed-chip-tabs__root--contentLayout_hug {
3618
- display: block;
3619
- }
3620
-
3621
- .seed-chip-tabs__root--stickyList_true {
3622
- position: relative;
3623
- }
3624
-
3625
- .seed-chip-tabs__list--stickyList_true {
3626
- z-index: 1;
3627
- position: sticky;
3628
- top: 0;
3629
- }
3630
-
3631
- .seed-skeleton__root {
3632
- box-sizing: border-box;
3633
- background: var(--seed-color-palette-gray-200);
3634
- --seed-box-width: initial;
3635
- --seed-box-height: initial;
3636
- width: --seed-box-width;
3637
- height: --seed-box-height;
3638
- display: inline-block;
3639
- overflow: hidden;
3640
- }
3641
-
3642
- .seed-skeleton__root:after {
3643
- content: "";
3644
- background-image: linear-gradient(90deg, var(--seed-gradient-shimmer));
3645
- width: 100%;
3646
- height: 100%;
3647
- animation-name: slide-x;
3648
- animation-duration: 1.5s;
3649
- animation-fill-mode: forwards;
3650
- animation-timing-function: var(--seed-timing-function-easing);
3651
- background-repeat: no-repeat;
3652
- animation-iteration-count: infinite;
3653
- display: block;
3654
- }
3655
-
3656
- .seed-skeleton__root--radius_0 {
3657
- border-radius: 0;
3658
- }
3659
-
3660
- .seed-skeleton__root--radius_8 {
3661
- border-radius: 8px;
3662
- }
3663
-
3664
- .seed-skeleton__root--radius_16 {
3665
- border-radius: 16px;
3666
- }
3667
-
3668
- .seed-skeleton__root--radius_full {
3669
- border-radius: var(--seed-radius-full);
3670
- }
3671
-
3672
- .seed-snackbar__root {
3673
- box-sizing: border-box;
3674
- background: var(--seed-color-bg-neutral-solid);
3675
- border-radius: var(--seed-radius-r2);
3676
- width: 100%;
3677
- padding-inline: var(--seed-dimension-x4);
3678
- padding-block: var(--seed-dimension-x2_5);
3679
- justify-content: space-between;
3680
- align-items: center;
3681
- gap: var(--seed-dimension-x2);
3682
- min-height: 44px;
3683
- animation: seed-enter;
3684
- animation-timing-function: var(--seed-timing-function-enter);
3685
- animation-duration: var(--seed-duration-d4);
3686
- --seed-enter-translate-x: 0;
3687
- --seed-enter-translate-y: 100%;
3688
- --seed-enter-opacity: 0;
3689
- --seed-enter-scale: 1;
3690
- display: flex;
3691
- }
3692
-
3693
- .seed-snackbar__root:not([data-open]) {
3694
- animation: seed-exit;
3695
- animation-timing-function: var(--seed-timing-function-exit);
3696
- animation-duration: var(--seed-duration-d4);
3697
- --seed-exit-translate-x: 0;
3698
- --seed-exit-translate-y: 100%;
3699
- --seed-exit-opacity: 0;
3700
- --seed-exit-scale: 1;
3701
- animation-fill-mode: forwards;
3702
- }
3703
-
3704
- .seed-snackbar__message {
3705
- color: var(--seed-color-palette-static-white);
3706
- font-size: var(--seed-font-size-t4);
3707
- line-height: var(--seed-line-height-t4);
3708
- font-weight: var(--seed-font-weight-regular);
3709
- flex-grow: 1;
3710
- margin: 0;
3711
- }
3712
-
3713
- .seed-snackbar__prefixIcon {
3714
- flex-shrink: 0;
3715
- width: 24px;
3716
- height: 24px;
3717
- }
3718
-
3719
- .seed-snackbar__actionButton {
3720
- box-sizing: border-box;
3721
- cursor: pointer;
3722
- text-transform: none;
3723
- -webkit-font-smoothing: antialiased;
3724
- -moz-osx-font-smoothing: grayscale;
3725
- background-color: unset;
3726
- color: var(--seed-color-fg-brand);
3727
- font-size: var(--seed-font-size-t4);
3728
- line-height: var(--seed-line-height-t4);
3729
- font-weight: var(--seed-font-weight-bold);
3730
- border: none;
3731
- outline: none;
3732
- flex-shrink: 0;
3733
- justify-content: center;
3734
- align-items: center;
3735
- text-decoration: none;
3736
- display: inline-flex;
3737
- position: relative;
3738
- }
3739
-
3740
- .seed-snackbar__actionButton:after {
3741
- content: "";
3742
- top: 50%;
3743
- left: calc(-1 * var(--seed-dimension-x2));
3744
- right: calc(-1 * var(--seed-dimension-x2));
3745
- background: none;
3746
- min-height: 44px;
3747
- position: absolute;
3748
- transform: translateY(-50%);
3749
- }
3750
-
3751
- .seed-snackbar__prefixIcon--variant_default {
3752
- display: none;
3753
- }
3754
-
3755
- .seed-snackbar__prefixIcon--variant_positive {
3756
- color: var(--seed-color-fg-positive);
3757
- }
3758
-
3759
- .seed-snackbar__prefixIcon--variant_critical {
3760
- color: var(--seed-color-fg-critical);
3761
- }
3762
-
3763
- .seed-snackbar-region__root {
3764
- z-index: 2147483647;
3765
- left: calc(env(safe-area-inset-left, 0px));
3766
- right: calc(env(safe-area-inset-right, 0px));
3767
- bottom: calc(env(safe-area-inset-bottom, 0px) + var(--snackbar-region-offset, 0px));
3768
- padding-inline: var(--seed-dimension-x2);
3769
- padding-block: var(--seed-dimension-x2);
3770
- transition-property: bottom;
3771
- transition-duration: var(--seed-duration-d4);
3772
- transition-timing-function: var(--seed-timing-function-easing);
3773
- flex-direction: column;
3774
- align-items: center;
3775
- display: flex;
3776
- }
3777
-
3778
- .seed-text__root {
3779
- text-align: var(--seed-text-align);
3780
- color: var(--seed-text-color);
3781
- font-size: var(--seed-font-size);
3782
- line-height: var(--seed-line-height);
3783
- font-weight: var(--seed-font-weight);
3784
- --seed-text-color: inherit;
3785
- --seed-font-size: inherit;
3786
- --seed-line-height: inherit;
3787
- --seed-font-weight: inherit;
3788
- --seed-text-align: inherit;
3789
- --seed-max-lines: initial;
3790
- margin: 0;
3791
- }
3792
-
3793
- .seed-text__root--textStyle_screenTitle {
3794
- --seed-font-size: var(--seed-font-size-t10);
3795
- --seed-line-height: var(--seed-line-height-t10);
3796
- --seed-font-weight: var(--seed-font-weight-bold);
3797
- }
3798
-
3799
- .seed-text__root--textStyle_articleBody {
3800
- --seed-font-size: var(--seed-font-size-t5);
3801
- --seed-line-height: var(--seed-line-height-t6);
3802
- --seed-font-weight: var(--seed-font-weight-regular);
3803
- }
3804
-
3805
- .seed-text__root--textStyle_t1Regular {
3806
- --seed-font-size: var(--seed-font-size-t1);
3807
- --seed-line-height: var(--seed-line-height-t1);
3808
- --seed-font-weight: var(--seed-font-weight-regular);
3809
- }
3810
-
3811
- .seed-text__root--textStyle_t1Medium {
3812
- --seed-font-size: var(--seed-font-size-t1);
3813
- --seed-line-height: var(--seed-line-height-t1);
3814
- --seed-font-weight: var(--seed-font-weight-medium);
3815
- }
3816
-
3817
- .seed-text__root--textStyle_t1Bold {
3818
- --seed-font-size: var(--seed-font-size-t1);
3819
- --seed-line-height: var(--seed-line-height-t1);
3820
- --seed-font-weight: var(--seed-font-weight-bold);
3821
- }
3822
-
3823
- .seed-text__root--textStyle_t2Regular {
3824
- --seed-font-size: var(--seed-font-size-t2);
3825
- --seed-line-height: var(--seed-line-height-t2);
3826
- --seed-font-weight: var(--seed-font-weight-regular);
3827
- }
3828
-
3829
- .seed-text__root--textStyle_t2Medium {
3830
- --seed-font-size: var(--seed-font-size-t2);
3831
- --seed-line-height: var(--seed-line-height-t2);
3832
- --seed-font-weight: var(--seed-font-weight-medium);
3833
- }
3834
-
3835
- .seed-text__root--textStyle_t2Bold {
3836
- --seed-font-size: var(--seed-font-size-t2);
3837
- --seed-line-height: var(--seed-line-height-t2);
3838
- --seed-font-weight: var(--seed-font-weight-bold);
3839
- }
3840
-
3841
- .seed-text__root--textStyle_t3Regular {
3842
- --seed-font-size: var(--seed-font-size-t3);
3843
- --seed-line-height: var(--seed-line-height-t3);
3844
- --seed-font-weight: var(--seed-font-weight-regular);
3845
- }
3846
-
3847
- .seed-text__root--textStyle_t3Medium {
3848
- --seed-font-size: var(--seed-font-size-t3);
3849
- --seed-line-height: var(--seed-line-height-t3);
3850
- --seed-font-weight: var(--seed-font-weight-medium);
3851
- }
3852
-
3853
- .seed-text__root--textStyle_t3Bold {
3854
- --seed-font-size: var(--seed-font-size-t3);
3855
- --seed-line-height: var(--seed-line-height-t3);
3856
- --seed-font-weight: var(--seed-font-weight-bold);
3857
- }
3858
-
3859
- .seed-text__root--textStyle_t4Regular {
3860
- --seed-font-size: var(--seed-font-size-t4);
3861
- --seed-line-height: var(--seed-line-height-t4);
3862
- --seed-font-weight: var(--seed-font-weight-regular);
3863
- }
3864
-
3865
- .seed-text__root--textStyle_t4Medium {
3866
- --seed-font-size: var(--seed-font-size-t4);
3867
- --seed-line-height: var(--seed-line-height-t4);
3868
- --seed-font-weight: var(--seed-font-weight-medium);
3869
- }
3870
-
3871
- .seed-text__root--textStyle_t4Bold {
3872
- --seed-font-size: var(--seed-font-size-t4);
3873
- --seed-line-height: var(--seed-line-height-t4);
3874
- --seed-font-weight: var(--seed-font-weight-bold);
3875
- }
3876
-
3877
- .seed-text__root--textStyle_t5Regular {
3878
- --seed-font-size: var(--seed-font-size-t5);
3879
- --seed-line-height: var(--seed-line-height-t5);
3880
- --seed-font-weight: var(--seed-font-weight-regular);
3881
- }
3882
-
3883
- .seed-text__root--textStyle_t5Medium {
3884
- --seed-font-size: var(--seed-font-size-t5);
3885
- --seed-line-height: var(--seed-line-height-t5);
3886
- --seed-font-weight: var(--seed-font-weight-medium);
3887
- }
3888
-
3889
- .seed-text__root--textStyle_t5Bold {
3890
- --seed-font-size: var(--seed-font-size-t5);
3891
- --seed-line-height: var(--seed-line-height-t5);
3892
- --seed-font-weight: var(--seed-font-weight-bold);
3893
- }
3894
-
3895
- .seed-text__root--textStyle_t6Bold {
3896
- --seed-font-size: var(--seed-font-size-t6);
3897
- --seed-line-height: var(--seed-line-height-t6);
3898
- --seed-font-weight: var(--seed-font-weight-bold);
3899
- }
3900
-
3901
- .seed-text__root--textStyle_t7Bold {
3902
- --seed-font-size: var(--seed-font-size-t7);
3903
- --seed-line-height: var(--seed-line-height-t7);
3904
- --seed-font-weight: var(--seed-font-weight-bold);
3905
- }
3906
-
3907
- .seed-text__root--textStyle_t8Bold {
3908
- --seed-font-size: var(--seed-font-size-t8);
3909
- --seed-line-height: var(--seed-line-height-t8);
3910
- --seed-font-weight: var(--seed-font-weight-bold);
3911
- }
3912
-
3913
- .seed-text__root--textStyle_t9Bold {
3914
- --seed-font-size: var(--seed-font-size-t9);
3915
- --seed-line-height: var(--seed-line-height-t9);
3916
- --seed-font-weight: var(--seed-font-weight-bold);
3917
- }
3918
-
3919
- .seed-text__root--textStyle_t10Bold {
3920
- --seed-font-size: var(--seed-font-size-t10);
3921
- --seed-line-height: var(--seed-line-height-t10);
3922
- --seed-font-weight: var(--seed-font-weight-bold);
3923
- }
3924
-
3925
- .seed-text__root--maxLines_none {
3926
- display: unset;
3927
- overflow: unset;
3928
- min-width: unset;
3929
- text-overflow: unset;
3930
- white-space: unset;
3931
- -webkit-line-clamp: unset;
3932
- }
3933
-
3934
- .seed-text__root--maxLines_single {
3935
- text-overflow: ellipsis;
3936
- white-space: nowrap;
3937
- -webkit-line-clamp: var(--seed-max-lines);
3938
- min-width: 0;
3939
- display: block;
3940
- overflow: hidden;
3941
- }
3942
-
3943
- .seed-text__root--maxLines_multi {
3944
- text-overflow: ellipsis;
3945
- min-width: 0;
3946
- white-space: initial;
3947
- -webkit-line-clamp: var(--seed-max-lines);
3948
- -webkit-box-orient: vertical;
3949
- display: -webkit-box;
3950
- overflow: hidden;
3951
- }
3952
-
3953
- .seed-link-with-icon__root {
3954
- cursor: pointer;
3955
- box-sizing: border-box;
3956
- -webkit-font-smoothing: antialiased;
3957
- -moz-osx-font-smoothing: grayscale;
3958
- text-align: center;
3959
- padding-inline: 0;
3960
- padding-block: var(--seed-dimension-x0_5);
3961
- font-family: inherit;
3962
- font-weight: var(--seed-font-weight-regular);
3963
- color: var(--seed-box-color);
3964
- --seed-suffix-icon-color: var(--seed-box-color);
3965
- background-color: #0000;
3966
- border: none;
3967
- outline: none;
3968
- align-items: center;
3969
- display: inline-flex;
3970
- }
3971
-
3972
- .seed-link-with-icon__root--size_t6 {
3973
- font-size: var(--seed-font-size-t6);
3974
- line-height: var(--seed-line-height-t6);
3975
- --seed-suffix-icon-size: var(--seed-dimension-x4);
3976
- }
3977
-
3978
- .seed-link-with-icon__root--size_t5 {
3979
- font-size: var(--seed-font-size-t5);
3980
- line-height: var(--seed-line-height-t5);
3981
- --seed-suffix-icon-size: var(--seed-dimension-x3_5);
3982
- }
3983
-
3984
- .seed-link-with-icon__root--size_t4 {
3985
- font-size: var(--seed-font-size-t4);
3986
- line-height: var(--seed-line-height-t4);
3987
- --seed-suffix-icon-size: var(--seed-dimension-x3_5);
3988
- }
3989
-
3990
- .seed-text-field__root {
3991
- flex-direction: column;
3992
- width: 100%;
3993
- display: flex;
3994
- }
3995
-
3996
- .seed-text-field__label {
3997
- color: var(--seed-color-fg-neutral);
3998
- font-weight: var(--seed-font-weight-bold);
3999
- }
4000
-
4001
- .seed-text-field__indicator {
4002
- color: var(--seed-color-fg-neutral);
4003
- font-weight: var(--seed-font-weight-regular);
4004
- }
4005
-
4006
- .seed-text-field__field {
4007
- background-color: var(--seed-color-bg-layer-default);
4008
- border-style: solid;
4009
- border-width: 1px;
4010
- border-color: var(--seed-color-stroke-field);
4011
- align-items: center;
4012
- display: flex;
4013
- }
4014
-
4015
- .seed-text-field__field:not([data-readonly]):is(:focus, [data-focus]) {
4016
- border-color: var(--seed-color-stroke-field-focused);
4017
- }
4018
-
4019
- .seed-text-field__field:is(:invalid, [data-invalid]) {
4020
- background-color: var(--seed-color-bg-critical-weak);
4021
- border-color: var(--seed-color-stroke-critical);
4022
- }
4023
-
4024
- .seed-text-field__field:is(:invalid, [data-invalid]):is(:focus, [data-focus]) {
4025
- background-color: var(--seed-color-bg-layer-default);
4026
- }
4027
-
4028
- .seed-text-field__field:is(:disabled, [disabled], [data-disabled]), .seed-text-field__field[data-readonly] {
4029
- background-color: var(--seed-color-bg-disabled);
4030
- }
4031
-
4032
- .seed-text-field__prefixText {
4033
- color: var(--seed-color-fg-neutral);
4034
- }
4035
-
4036
- .seed-text-field__prefixText:is(:disabled, [disabled], [data-disabled]) {
4037
- color: var(--seed-color-fg-disabled);
4038
- }
4039
-
4040
- .seed-text-field__prefixIcon {
4041
- color: var(--seed-color-fg-neutral);
4042
- flex-shrink: 0;
4043
- }
4044
-
4045
- .seed-text-field__prefixIcon:is(:disabled, [disabled], [data-disabled]) {
4046
- color: var(--seed-color-fg-disabled);
4047
- }
4048
-
4049
- .seed-text-field__suffixText {
4050
- color: var(--seed-color-fg-neutral);
4051
- }
4052
-
4053
- .seed-text-field__suffixText:is(:disabled, [disabled], [data-disabled]) {
4054
- color: var(--seed-color-fg-disabled);
4055
- }
4056
-
4057
- .seed-text-field__suffixIcon {
4058
- color: var(--seed-color-fg-neutral);
4059
- flex-shrink: 0;
4060
- }
4061
-
4062
- .seed-text-field__suffixIcon:is(:disabled, [disabled], [data-disabled]) {
4063
- color: var(--seed-color-fg-disabled);
4064
- }
4065
-
4066
- .seed-text-field__value {
4067
- box-sizing: border-box;
4068
- font: inherit;
4069
- }
4070
-
4071
- .seed-text-field__value:is(input) {
4072
- padding-inline: 0;
4073
- }
4074
-
4075
- .seed-text-field__value:is(textarea) {
4076
- width: 100%;
4077
- min-height: 90px;
4078
- padding-inline: 0;
4079
- }
4080
-
4081
- .seed-text-field__value {
4082
- resize: none;
4083
- height: 100%;
4084
- color: var(--seed-color-fg-neutral);
4085
- background: none;
4086
- border: none;
4087
- outline: none;
4088
- flex-grow: 1;
4089
- }
4090
-
4091
- .seed-text-field__value::placeholder {
4092
- color: var(--seed-color-fg-placeholder);
4093
- }
4094
-
4095
- .seed-text-field__value:is(:disabled, [disabled], [data-disabled]), .seed-text-field__value:is(:disabled, [disabled], [data-disabled])::placeholder {
4096
- color: var(--seed-color-fg-disabled);
4097
- }
4098
-
4099
- .seed-text-field__footer {
4100
- justify-content: space-between;
4101
- align-items: flex-start;
4102
- display: flex;
4103
- }
4104
-
4105
- .seed-text-field__description {
4106
- font-weight: var(--seed-font-weight-regular);
4107
- color: var(--seed-color-fg-neutral-subtle);
4108
- }
4109
-
4110
- .seed-text-field__errorMessage {
4111
- color: var(--seed-color-fg-critical);
4112
- flex-direction: row;
4113
- align-items: center;
4114
- display: flex;
4115
- }
4116
-
4117
- .seed-text-field__errorIcon {
4118
- flex: none;
4119
- }
4120
-
4121
- .seed-text-field__characterCountArea {
4122
- flex: none;
4123
- margin-inline-start: auto;
4124
- display: flex;
4125
- }
4126
-
4127
- .seed-text-field__characterCount {
4128
- color: var(--seed-color-fg-neutral);
4129
- font-weight: var(--seed-font-weight-regular);
4130
- }
4131
-
4132
- .seed-text-field__characterCount[data-empty] {
4133
- color: var(--seed-color-fg-neutral-subtle);
4134
- }
4135
-
4136
- .seed-text-field__maxCharacterCount {
4137
- color: var(--seed-color-fg-neutral-subtle);
4138
- font-weight: var(--seed-font-weight-regular);
4139
- }
4140
-
4141
- .seed-text-field__header--size_xlarge {
4142
- padding-bottom: var(--seed-dimension-x3);
4143
- gap: var(--seed-dimension-x1_5);
4144
- }
4145
-
4146
- .seed-text-field__label--size_xlarge, .seed-text-field__indicator--size_xlarge {
4147
- font-size: var(--seed-font-size-t5);
4148
- line-height: var(--seed-line-height-t5);
4149
- }
4150
-
4151
- .seed-text-field__field--size_xlarge {
4152
- border-radius: var(--seed-radius-r2_5);
4153
- gap: var(--seed-dimension-x2);
4154
- min-height: 56px;
4155
- padding-inline: var(--seed-dimension-x4);
4156
- }
4157
-
4158
- .seed-text-field__value--size_xlarge {
4159
- padding-block: var(--seed-dimension-x3);
4160
- font-size: var(--seed-font-size-t6);
4161
- line-height: var(--seed-line-height-t6);
4162
- }
4163
-
4164
- .seed-text-field__prefixText--size_xlarge {
4165
- font-size: var(--seed-font-size-t6);
4166
- line-height: var(--seed-line-height-t6);
4167
- }
4168
-
4169
- .seed-text-field__prefixIcon--size_xlarge {
4170
- width: var(--seed-dimension-x5);
4171
- height: var(--seed-dimension-x5);
4172
- }
4173
-
4174
- .seed-text-field__suffixText--size_xlarge {
4175
- font-size: var(--seed-font-size-t6);
4176
- line-height: var(--seed-line-height-t6);
4177
- }
4178
-
4179
- .seed-text-field__suffixIcon--size_xlarge {
4180
- width: var(--seed-dimension-x5);
4181
- height: var(--seed-dimension-x5);
4182
- }
4183
-
4184
- .seed-text-field__footer--size_xlarge {
4185
- gap: var(--seed-dimension-x3_5);
4186
- padding-top: var(--seed-dimension-x2);
4187
- min-height: 20px;
4188
- }
4189
-
4190
- .seed-text-field__description--size_xlarge, .seed-text-field__errorMessage--size_xlarge {
4191
- font-size: var(--seed-font-size-t4);
4192
- line-height: var(--seed-line-height-t4);
4193
- }
4194
-
4195
- .seed-text-field__errorIcon--size_xlarge {
4196
- width: var(--seed-dimension-x4);
4197
- height: var(--seed-dimension-x4);
4198
- margin-right: var(--seed-dimension-x1);
4199
- }
4200
-
4201
- .seed-text-field__characterCount--size_xlarge, .seed-text-field__maxCharacterCount--size_xlarge {
4202
- font-size: var(--seed-font-size-t2);
4203
- line-height: var(--seed-line-height-t2);
4204
- }
4205
-
4206
- .seed-text-field__header--size_large {
4207
- padding-bottom: var(--seed-dimension-x3);
4208
- gap: var(--seed-dimension-x1_5);
4209
- }
4210
-
4211
- .seed-text-field__label--size_large, .seed-text-field__indicator--size_large {
4212
- font-size: var(--seed-font-size-t5);
4213
- line-height: var(--seed-line-height-t5);
4214
- }
4215
-
4216
- .seed-text-field__field--size_large {
4217
- border-radius: var(--seed-radius-r2_5);
4218
- gap: var(--seed-dimension-x2);
4219
- min-height: 52px;
4220
- padding-inline: var(--seed-dimension-x4);
4221
- }
4222
-
4223
- .seed-text-field__value--size_large {
4224
- padding-block: var(--seed-dimension-x3);
4225
- font-size: var(--seed-font-size-t5);
4226
- line-height: var(--seed-line-height-t5);
4227
- }
4228
-
4229
- .seed-text-field__prefixText--size_large {
4230
- font-size: var(--seed-font-size-t5);
4231
- line-height: var(--seed-line-height-t5);
4232
- }
4233
-
4234
- .seed-text-field__prefixIcon--size_large {
4235
- width: var(--seed-dimension-x5);
4236
- height: var(--seed-dimension-x5);
4237
- }
4238
-
4239
- .seed-text-field__suffixText--size_large {
4240
- font-size: var(--seed-font-size-t5);
4241
- line-height: var(--seed-line-height-t5);
4242
- }
4243
-
4244
- .seed-text-field__suffixIcon--size_large {
4245
- width: var(--seed-dimension-x5);
4246
- height: var(--seed-dimension-x5);
4247
- }
4248
-
4249
- .seed-text-field__footer--size_large {
4250
- gap: var(--seed-dimension-x3_5);
4251
- padding-top: var(--seed-dimension-x2);
4252
- min-height: 20px;
4253
- }
4254
-
4255
- .seed-text-field__description--size_large, .seed-text-field__errorMessage--size_large {
4256
- font-size: var(--seed-font-size-t4);
4257
- line-height: var(--seed-line-height-t4);
4258
- }
4259
-
4260
- .seed-text-field__errorIcon--size_large {
4261
- width: var(--seed-dimension-x4);
4262
- height: var(--seed-dimension-x4);
4263
- margin-right: var(--seed-dimension-x1);
4264
- }
4265
-
4266
- .seed-text-field__characterCount--size_large, .seed-text-field__maxCharacterCount--size_large {
4267
- font-size: var(--seed-font-size-t2);
4268
- line-height: var(--seed-line-height-t2);
4269
- }
4270
-
4271
- .seed-text-field__header--size_medium {
4272
- padding-bottom: var(--seed-dimension-x3);
4273
- }
4274
-
4275
- .seed-text-field__label--size_medium, .seed-text-field__indicator--size_medium {
4276
- font-size: var(--seed-font-size-t4);
4277
- line-height: var(--seed-line-height-t4);
4278
- }
4279
-
4280
- .seed-text-field__field--size_medium {
4281
- border-radius: var(--seed-radius-r2);
4282
- gap: var(--seed-dimension-x1_5);
4283
- min-height: 40px;
4284
- padding-inline: var(--seed-dimension-x3_5);
4285
- }
4286
-
4287
- .seed-text-field__value--size_medium {
4288
- padding-block: var(--seed-dimension-x2_5);
4289
- font-size: var(--seed-font-size-t4);
4290
- line-height: var(--seed-line-height-t4);
4291
- }
4292
-
4293
- .seed-text-field__prefixText--size_medium {
4294
- font-size: var(--seed-font-size-t4);
4295
- line-height: var(--seed-line-height-t4);
4296
- }
4297
-
4298
- .seed-text-field__prefixIcon--size_medium {
4299
- width: var(--seed-dimension-x4);
4300
- height: var(--seed-dimension-x4);
4301
- }
4302
-
4303
- .seed-text-field__suffixText--size_medium {
4304
- font-size: var(--seed-font-size-t4);
4305
- line-height: var(--seed-line-height-t4);
4306
- }
4307
-
4308
- .seed-text-field__suffixIcon--size_medium {
4309
- width: var(--seed-dimension-x4);
4310
- height: var(--seed-dimension-x4);
4311
- }
4312
-
4313
- .seed-text-field__footer--size_medium {
4314
- gap: var(--seed-dimension-x3_5);
4315
- padding-top: var(--seed-dimension-x2);
4316
- min-height: var(--seed-dimension-x4);
4317
- }
4318
-
4319
- .seed-text-field__description--size_medium, .seed-text-field__errorMessage--size_medium {
4320
- font-size: var(--seed-font-size-t2);
4321
- line-height: var(--seed-line-height-t2);
4322
- }
4323
-
4324
- .seed-text-field__errorIcon--size_medium {
4325
- width: var(--seed-dimension-x3_5);
4326
- height: var(--seed-dimension-x3_5);
4327
- margin-right: var(--seed-dimension-x1);
4328
- }
4329
-
4330
- .seed-text-field__characterCount--size_medium, .seed-text-field__maxCharacterCount--size_medium {
4331
- font-size: var(--seed-font-size-t2);
4332
- line-height: var(--seed-line-height-t2);
4333
- }
4334
-
4335
- .seed-visually-hidden__root {
4336
- clip: rect(0 0 0 0);
4337
- white-space: nowrap;
4338
- border: 0;
4339
- width: 1px;
4340
- height: 1px;
4341
- margin: -1px;
4342
- padding: 0;
4343
- position: absolute;
4344
- overflow: hidden;
4345
- }
4346
-
4347
- .seed-app-screen__root {
4348
- --app-bar-offset: calc(var(--app-bar-height) + var(--seed-safe-area-top));
4349
- width: 100%;
4350
- height: 100%;
4351
- position: absolute;
4352
- left: 0;
4353
- right: 0;
4354
- overflow: hidden;
4355
- }
4356
-
4357
- .seed-app-screen__dim {
4358
- z-index: var(--z-index-dim);
4359
- width: 100%;
4360
- position: absolute;
4361
- top: 0;
4362
- left: 0;
4363
- right: 0;
4364
- }
4365
-
4366
- .seed-app-screen__layer {
4367
- z-index: var(--z-index-layer);
4368
- box-sizing: border-box;
4369
- -webkit-overflow-scrolling: touch;
4370
- width: 100%;
4371
- height: 100%;
4372
- position: absolute;
4373
- left: 0;
4374
- right: 0;
4375
- overflow-y: scroll;
4376
- }
4377
-
4378
- .seed-app-screen__layer::-webkit-scrollbar {
4379
- display: none;
4380
- }
4381
-
4382
- .seed-app-screen__layer {
4383
- background-color: var(--seed-color-bg-layer-default);
4384
- }
4385
-
4386
- .seed-app-screen__edge {
4387
- z-index: var(--z-index-edge);
4388
- width: 20px;
4389
- height: 100%;
4390
- position: absolute;
4391
- left: 0;
4392
- right: 0;
4393
- }
4394
-
4395
- .seed-app-screen__root--theme_cupertino {
4396
- --app-bar-height: 44px;
4397
- }
4398
-
4399
- .seed-app-screen__dim--theme_cupertino {
4400
- background: var(--seed-color-bg-overlay);
4401
- height: 100%;
4402
- }
4403
-
4404
- .seed-app-screen__root--theme_android {
4405
- --app-bar-height: 56px;
4406
- }
4407
-
4408
- .seed-app-screen__edge--theme_android {
4409
- display: none;
4410
- }
4411
-
4412
- .seed-app-screen__root--transitionStyle_slideFromRightIOS {
4413
- --z-index-dim: calc(var(--z-index-base) + 0);
4414
- --z-index-layer: calc(var(--z-index-base) + 2);
4415
- --z-index-edge: calc(var(--z-index-base) + 4);
4416
- --z-index-app-bar: calc(var(--z-index-base) + 7);
4417
- }
4418
-
4419
- .seed-app-screen__layer--transitionStyle_slideFromRightIOS {
4420
- transform: translate3d(0, 0, 0);
4421
- }
4422
-
4423
- [data-global-transition-state="enter-active"] .seed-app-screen__layer--transitionStyle_slideFromRightIOS[data-activity-is-top] {
4424
- --seed-enter-translate-x: 100%;
4425
- --seed-enter-translate-y: 0;
4426
- --seed-enter-opacity: 1;
4427
- --seed-enter-scale: 1;
4428
- animation: .3s cubic-bezier(.22, .1, .3, .85) seed-enter;
4429
- transform: translate3d(0, 0, 0);
4430
- }
4431
-
4432
- [data-global-transition-state="exit-active"] .seed-app-screen__layer--transitionStyle_slideFromRightIOS[data-activity-is-top] {
4433
- transform: translate3d(var(--swipe-back-displacement, 0), 0, 0);
4434
- --seed-exit-translate-x: 100%;
4435
- --seed-exit-translate-y: 0;
4436
- --seed-exit-opacity: 1;
4437
- --seed-exit-scale: 1;
4438
- animation: .3s cubic-bezier(.22, .1, .3, .85) forwards seed-exit;
4439
- }
4440
-
4441
- [data-global-transition-state="enter-done"] .seed-app-screen__layer--transitionStyle_slideFromRightIOS[data-activity-is-top] {
4442
- --seed-enter-translate-x: var(--swipe-back-displacement, 0);
4443
- --seed-enter-translate-y: 0;
4444
- --seed-enter-opacity: 1;
4445
- --seed-enter-scale: 1;
4446
- animation: .3s cubic-bezier(.22, .1, .3, .85) seed-enter;
4447
- transform: translate3d(0, 0, 0);
4448
- }
4449
-
4450
- [data-swipe-back-state="swiping"] .seed-app-screen__layer--transitionStyle_slideFromRightIOS[data-activity-is-top]:not(#\#) {
4451
- transform: translate3d(var(--swipe-back-displacement, 0), 0, 0);
4452
- animation: none;
4453
- }
4454
-
4455
- [data-global-transition-state="enter-active"][data-top-activity-type="full-screen"] .seed-app-screen__layer--transitionStyle_slideFromRightIOS:not([data-activity-is-top]) {
4456
- --seed-exit-translate-x: -30%;
4457
- --seed-exit-translate-y: 0;
4458
- --seed-exit-opacity: 1;
4459
- --seed-exit-scale: 1;
4460
- animation: .3s cubic-bezier(.22, .1, .3, .85) forwards seed-exit;
4461
- transform: translate3d(0, 0, 0);
4462
- }
4463
-
4464
- [data-global-transition-state="exit-active"][data-top-activity-type="full-screen"] .seed-app-screen__layer--transitionStyle_slideFromRightIOS:not([data-activity-is-top]) {
4465
- --seed-enter-translate-x: calc(-30% + var(--swipe-back-displacement, 0) * .3);
4466
- --seed-enter-translate-y: 0;
4467
- --seed-enter-opacity: 1;
4468
- --seed-enter-scale: 1;
4469
- animation: .3s cubic-bezier(.22, .1, .3, .85) seed-enter;
4470
- transform: translate3d(0, 0, 0);
4471
- }
4472
-
4473
- [data-global-transition-state="enter-done"][data-top-activity-type="full-screen"] .seed-app-screen__layer--transitionStyle_slideFromRightIOS:not([data-activity-is-top]) {
4474
- transform: translate3d(calc(-30% + var(--swipe-back-displacement, 0) * .3), 0, 0);
4475
- --seed-exit-translate-x: -30%;
4476
- --seed-exit-translate-y: 0;
4477
- --seed-exit-opacity: 1;
4478
- --seed-exit-scale: 1;
4479
- animation: .3s cubic-bezier(.22, .1, .3, .85) forwards seed-exit;
4480
- }
4481
-
4482
- [data-swipe-back-state="swiping"] .seed-app-screen__layer--transitionStyle_slideFromRightIOS:not([data-activity-is-top]):not(#\#) {
4483
- transform: translate3d(calc(-30% + var(--swipe-back-displacement, 0) * .3), 0, 0);
4484
- animation: none;
4485
- }
4486
-
4487
- [data-global-transition-state="enter-active"] .seed-app-screen__dim--transitionStyle_slideFromRightIOS[data-activity-is-top] {
4488
- --seed-enter-translate-x: 0;
4489
- --seed-enter-translate-y: 0;
4490
- --seed-enter-opacity: 0;
4491
- --seed-enter-scale: 1;
4492
- opacity: 1;
4493
- animation: .3s cubic-bezier(.22, .1, .3, .85) seed-enter;
4494
- }
4495
-
4496
- [data-global-transition-state="exit-active"] .seed-app-screen__dim--transitionStyle_slideFromRightIOS[data-activity-is-top] {
4497
- opacity: calc(1 - var(--swipe-back-displacement-ratio, 0));
4498
- --seed-exit-translate-x: 0;
4499
- --seed-exit-translate-y: 0;
4500
- --seed-exit-opacity: 0;
4501
- --seed-exit-scale: 1;
4502
- animation: .3s cubic-bezier(.22, .1, .3, .85) forwards seed-exit;
4503
- }
4504
-
4505
- [data-global-transition-state="enter-done"] .seed-app-screen__dim--transitionStyle_slideFromRightIOS[data-activity-is-top] {
4506
- --seed-enter-translate-x: 0;
4507
- --seed-enter-translate-y: 0;
4508
- --seed-enter-opacity: calc(1 - var(--swipe-back-displacement-ratio, 0));
4509
- --seed-enter-scale: 1;
4510
- opacity: 1;
4511
- animation: .3s cubic-bezier(.22, .1, .3, .85) seed-enter;
4512
- }
4513
-
4514
- [data-swipe-back-state="swiping"] .seed-app-screen__dim--transitionStyle_slideFromRightIOS[data-activity-is-top]:not(#\#) {
4515
- opacity: calc(1 - var(--swipe-back-displacement-ratio, 0));
4516
- animation: none;
4517
- }
4518
-
4519
- .seed-app-screen__root--transitionStyle_fadeFromBottomAndroid {
4520
- --z-index-dim: calc(var(--z-index-base) + 0);
4521
- --z-index-layer: calc(var(--z-index-base) + 3);
4522
- --z-index-edge: calc(var(--z-index-base) + 4);
4523
- --z-index-app-bar: calc(var(--z-index-base) + 4);
4524
- }
4525
-
4526
- .seed-app-screen__dim--transitionStyle_fadeFromBottomAndroid {
4527
- background: linear-gradient(var(--seed-color-bg-overlay), #0000);
4528
- height: 160px;
4529
- }
4530
-
4531
- [data-global-transition-state="enter-active"] .seed-app-screen__dim--transitionStyle_fadeFromBottomAndroid[data-activity-is-top] {
4532
- --seed-enter-translate-x: 0;
4533
- --seed-enter-translate-y: 0;
4534
- --seed-enter-opacity: 0;
4535
- --seed-enter-scale: 1;
4536
- opacity: 1;
4537
- animation: .3s cubic-bezier(.23, .1, .32, 1) seed-enter;
4538
- transform: translate3d(0, -8vh, 0);
4539
- }
4540
-
4541
- [data-global-transition-state="exit-active"] .seed-app-screen__dim--transitionStyle_fadeFromBottomAndroid[data-activity-is-top] {
4542
- opacity: 1;
4543
- --seed-exit-translate-x: 0;
4544
- --seed-exit-translate-y: 0;
4545
- --seed-exit-opacity: 0;
4546
- --seed-exit-scale: 1;
4547
- animation: .15s linear forwards seed-exit;
4548
- transform: translate3d(0, -8vh, 0);
4549
- }
4550
-
4551
- .seed-app-screen__layer--transitionStyle_fadeFromBottomAndroid {
4552
- transform: translate3d(0, 0, 0);
4553
- }
4554
-
4555
- [data-global-transition-state="enter-active"] .seed-app-screen__layer--transitionStyle_fadeFromBottomAndroid[data-activity-is-top] {
4556
- --seed-enter-translate-x: 0;
4557
- --seed-enter-translate-y: 8vh;
4558
- --seed-enter-opacity: 0;
4559
- --seed-enter-scale: 1;
4560
- opacity: 1;
4561
- animation: .3s cubic-bezier(.23, .1, .32, 1) seed-enter;
4562
- transform: translate3d(0, 0, 0);
4563
- }
4564
-
4565
- [data-global-transition-state="exit-active"] .seed-app-screen__layer--transitionStyle_fadeFromBottomAndroid[data-activity-is-top] {
4566
- opacity: 1;
4567
- --seed-exit-translate-x: 0;
4568
- --seed-exit-translate-y: 8vh;
4569
- --seed-exit-opacity: 0;
4570
- --seed-exit-scale: 1;
4571
- animation: .15s linear forwards seed-exit;
4572
- transform: translate3d(0, 0, 0);
4573
- }
4574
-
4575
- .seed-app-screen__layer--layerOffsetTop_safeArea {
4576
- padding-top: var(--seed-safe-area-top);
4577
- }
4578
-
4579
- .seed-app-screen__layer--layerOffsetTop_appBar {
4580
- padding-top: var(--app-bar-offset);
4581
- }
4582
-
4583
- .seed-app-screen__layer--layerOffsetBottom_safeArea {
4584
- padding-bottom: var(--seed-safe-area-bottom);
4585
- }
4586
-
4587
- .seed-app-bar__root {
4588
- z-index: var(--z-index-app-bar);
4589
- box-sizing: border-box;
4590
- align-items: flex-end;
4591
- width: 100%;
4592
- display: flex;
4593
- position: absolute;
4594
- }
4595
-
4596
- .seed-app-bar__root:before {
4597
- content: "";
4598
- pointer-events: none;
4599
- z-index: -1;
4600
- position: absolute;
4601
- inset: 0;
4602
- }
4603
-
4604
- .seed-app-bar__left {
4605
- align-items: center;
4606
- height: 100%;
4607
- display: flex;
4608
- }
4609
-
4610
- .seed-app-bar__right {
4611
- align-items: center;
4612
- height: 100%;
4613
- margin-left: auto;
4614
- display: flex;
4615
- }
4616
-
4617
- .seed-app-bar__iconButton {
4618
- justify-content: center;
4619
- align-items: center;
4620
- display: flex;
4621
- }
4622
-
4623
- .seed-app-bar__icon {
4624
- flex-shrink: 0;
4625
- display: inline-block;
4626
- }
4627
-
4628
- .seed-app-bar__root--theme_cupertino {
4629
- height: 44px;
4630
- padding-inline: var(--seed-dimension-x4);
4631
- }
4632
-
4633
- .seed-app-bar__iconButton--theme_cupertino {
4634
- width: 40px;
4635
- height: 40px;
4636
- }
4637
-
4638
- .seed-app-bar__iconButton--theme_cupertino:first-child {
4639
- margin-left: -8px;
4640
- }
4641
-
4642
- .seed-app-bar__iconButton--theme_cupertino:last-child {
4643
- margin-right: -8px;
4644
- }
4645
-
4646
- .seed-app-bar__icon--theme_cupertino {
4647
- width: 24px;
4648
- height: 24px;
4649
- }
4650
-
4651
- .seed-app-bar__root--theme_android {
4652
- height: 56px;
4653
- padding-inline: var(--seed-dimension-x4);
4654
- }
4655
-
4656
- .seed-app-bar__iconButton--theme_android {
4657
- width: 40px;
4658
- height: 40px;
4659
- }
4660
-
4661
- .seed-app-bar__iconButton--theme_android:first-child {
4662
- margin-left: -8px;
4663
- }
4664
-
4665
- .seed-app-bar__iconButton--theme_android:last-child {
4666
- margin-right: -8px;
4667
- }
4668
-
4669
- .seed-app-bar__icon--theme_android {
4670
- width: 24px;
4671
- height: 24px;
4672
- }
4673
-
4674
- .seed-app-bar__left--theme_android {
4675
- padding-right: 16px;
4676
- }
4677
-
4678
- [data-global-transition-state="enter-active"] .seed-app-bar__root--transitionStyle_slideFromRightIOS[data-activity-is-top]:before {
4679
- --seed-enter-translate-x: 100%;
4680
- --seed-enter-translate-y: 0;
4681
- --seed-enter-opacity: 1;
4682
- --seed-enter-scale: 1;
4683
- animation: .3s cubic-bezier(.22, .1, .3, .85) seed-enter;
4684
- transform: translate3d(0, 0, 0);
4685
- }
4686
-
4687
- [data-global-transition-state="exit-active"] .seed-app-bar__root--transitionStyle_slideFromRightIOS[data-activity-is-top]:before {
4688
- transform: translate3d(var(--swipe-back-displacement, 0), 0, 0);
4689
- --seed-exit-translate-x: 100%;
4690
- --seed-exit-translate-y: 0;
4691
- --seed-exit-opacity: 1;
4692
- --seed-exit-scale: 1;
4693
- animation: .3s cubic-bezier(.22, .1, .3, .85) forwards seed-exit;
4694
- }
4695
-
4696
- [data-global-transition-state="enter-done"] .seed-app-bar__root--transitionStyle_slideFromRightIOS[data-activity-is-top]:before {
4697
- --seed-enter-translate-x: var(--swipe-back-displacement, 0);
4698
- --seed-enter-translate-y: 0;
4699
- --seed-enter-opacity: 1;
4700
- --seed-enter-scale: 1;
4701
- animation: .3s cubic-bezier(.22, .1, .3, .85) seed-enter;
4702
- transform: translate3d(0, 0, 0);
4703
- }
4704
-
4705
- [data-global-transition-state="enter-active"] .seed-app-bar__icon--transitionStyle_slideFromRightIOS[data-activity-is-top] {
4706
- --seed-enter-translate-x: 0;
4707
- --seed-enter-translate-y: 0;
4708
- --seed-enter-opacity: 0;
4709
- --seed-enter-scale: 1;
4710
- opacity: 1;
4711
- animation: .3s cubic-bezier(.22, .1, .3, .85) seed-enter;
4712
- }
4713
-
4714
- [data-global-transition-state="exit-active"] .seed-app-bar__icon--transitionStyle_slideFromRightIOS[data-activity-is-top] {
4715
- opacity: calc(1 - var(--swipe-back-displacement-ratio, 0));
4716
- --seed-exit-translate-x: 0;
4717
- --seed-exit-translate-y: 0;
4718
- --seed-exit-opacity: 0;
4719
- --seed-exit-scale: 1;
4720
- animation: .3s cubic-bezier(.22, .1, .3, .85) forwards seed-exit;
4721
- }
4722
-
4723
- [data-global-transition-state="enter-done"] .seed-app-bar__icon--transitionStyle_slideFromRightIOS[data-activity-is-top] {
4724
- --seed-enter-translate-x: 0;
4725
- --seed-enter-translate-y: 0;
4726
- --seed-enter-opacity: calc(1 - var(--swipe-back-displacement-ratio, 0));
4727
- --seed-enter-scale: 1;
4728
- opacity: 1;
4729
- animation: .3s cubic-bezier(.22, .1, .3, .85) seed-enter;
4730
- }
4731
-
4732
- [data-swipe-back-state="swiping"] .seed-app-bar__icon--transitionStyle_slideFromRightIOS[data-activity-is-top]:not(#\#) {
4733
- opacity: calc(1 - var(--swipe-back-displacement-ratio, 0));
4734
- animation: none;
4735
- }
4736
-
4737
- [data-global-transition-state="enter-active"][data-top-activity-type="full-screen"] .seed-app-bar__icon--transitionStyle_slideFromRightIOS:not([data-activity-is-top]) {
4738
- opacity: 1;
4739
- --seed-exit-translate-x: 0;
4740
- --seed-exit-translate-y: 0;
4741
- --seed-exit-opacity: 0;
4742
- --seed-exit-scale: 1;
4743
- animation: .3s cubic-bezier(.22, .1, .3, .85) forwards seed-exit;
4744
- }
4745
-
4746
- [data-global-transition-state="exit-active"][data-top-activity-type="full-screen"] .seed-app-bar__icon--transitionStyle_slideFromRightIOS:not([data-activity-is-top]) {
4747
- --seed-enter-translate-x: 0;
4748
- --seed-enter-translate-y: 0;
4749
- --seed-enter-opacity: calc(1 - var(--swipe-back-displacement-ratio, 0));
4750
- --seed-enter-scale: 1;
4751
- opacity: 1;
4752
- animation: .3s cubic-bezier(.22, .1, .3, .85) seed-enter;
4753
- }
4754
-
4755
- [data-global-transition-state="enter-done"][data-top-activity-type="full-screen"] .seed-app-bar__icon--transitionStyle_slideFromRightIOS:not([data-activity-is-top]) {
4756
- opacity: calc(1 - var(--swipe-back-displacement-ratio, 0));
4757
- --seed-exit-translate-x: 0;
4758
- --seed-exit-translate-y: 0;
4759
- --seed-exit-opacity: 0;
4760
- --seed-exit-scale: 1;
4761
- animation: .3s cubic-bezier(.22, .1, .3, .85) forwards seed-exit;
4762
- }
4763
-
4764
- [data-swipe-back-state="swiping"] .seed-app-bar__icon--transitionStyle_slideFromRightIOS:not([data-activity-is-top]):not(#\#) {
4765
- opacity: calc(1 - var(--swipe-back-displacement-ratio, 0));
4766
- animation: none;
4767
- }
4768
-
4769
- [data-global-transition-state="enter-active"] .seed-app-bar__root--transitionStyle_fadeFromBottomAndroid[data-activity-is-top] {
4770
- --seed-enter-translate-x: 0;
4771
- --seed-enter-translate-y: 8vh;
4772
- --seed-enter-opacity: 0;
4773
- --seed-enter-scale: 1;
4774
- opacity: 1;
4775
- animation: .3s cubic-bezier(.23, .1, .32, 1) seed-enter;
4776
- transform: translate3d(0, 0, 0);
4777
- }
4778
-
4779
- [data-global-transition-state="exit-active"] .seed-app-bar__root--transitionStyle_fadeFromBottomAndroid[data-activity-is-top] {
4780
- opacity: 1;
4781
- --seed-exit-translate-x: 0;
4782
- --seed-exit-translate-y: 8vh;
4783
- --seed-exit-opacity: 0;
4784
- --seed-exit-scale: 1;
4785
- animation: .15s linear forwards seed-exit;
4786
- transform: translate3d(0, 0, 0);
4787
- }
4788
-
4789
- .seed-app-bar__root--tone_layer:before {
4790
- background-color: var(--seed-color-bg-layer-default);
4791
- }
4792
-
4793
- .seed-app-bar__icon--tone_layer {
4794
- color: var(--seed-color-fg-neutral);
4795
- }
4796
-
4797
- .seed-app-bar__root--tone_transparent:before {
4798
- background-color: #0000;
4799
- }
4800
-
4801
- .seed-app-bar__icon--tone_transparent {
4802
- color: var(--seed-color-palette-static-white);
4803
- }
4804
-
4805
- .seed-app-bar__root--divider_true:before {
4806
- box-shadow: inset 0px calc(-1 * 1px) 0 var(--seed-color-stroke-neutral-muted);
4807
- }
4808
-
4809
- .seed-app-bar-main__root {
4810
- flex: 1;
4811
- height: 100%;
4812
- }
4813
-
4814
- .seed-app-bar-main__title, .seed-app-bar-main__subtitle {
4815
- white-space: nowrap;
4816
- text-overflow: ellipsis;
4817
- overflow: hidden;
4818
- }
4819
-
4820
- .seed-app-bar-main__title--layout_titleOnly {
4821
- font-size: var(--seed-font-size-t6-static);
4822
- font-weight: var(--seed-font-weight-bold);
4823
- }
4824
-
4825
- .seed-app-bar-main__title--layout_withSubtitle {
4826
- font-size: var(--seed-font-size-t5-static);
4827
- font-weight: var(--seed-font-weight-bold);
4828
- }
4829
-
4830
- .seed-app-bar-main__subtitle--layout_withSubtitle {
4831
- font-size: var(--seed-font-size-t2-static);
4832
- font-weight: var(--seed-font-weight-regular);
4833
- }
4834
-
4835
- .seed-app-bar-main__root--theme_cupertino {
4836
- text-align: center;
4837
- height: 100%;
4838
- padding-inline: var(--centered-title-padding-x, 0);
4839
- pointer-events: none;
4840
- justify-content: center;
4841
- align-items: center;
4842
- display: flex;
4843
- position: absolute;
4844
- left: 0;
4845
- right: 0;
4846
- }
4847
-
4848
- .seed-app-bar-main__root--theme_android {
4849
- justify-content: flex-start;
4850
- align-items: center;
4851
- width: 100%;
4852
- display: flex;
4853
- }
4854
-
4855
- [data-global-transition-state="enter-active"] .seed-app-bar-main__root--transitionStyle_slideFromRightIOS[data-activity-is-top] {
4856
- --seed-enter-translate-x: 25%;
4857
- --seed-enter-translate-y: 0;
4858
- --seed-enter-opacity: 0;
4859
- --seed-enter-scale: 1;
4860
- opacity: 1;
4861
- animation: .3s cubic-bezier(.22, .1, .3, .85) seed-enter;
4862
- transform: translate3d(0, 0, 0);
4863
- }
4864
-
4865
- [data-global-transition-state="exit-active"] .seed-app-bar-main__root--transitionStyle_slideFromRightIOS[data-activity-is-top] {
4866
- transform: translate3d(calc(var(--swipe-back-displacement, 0) * .25), 0, 0);
4867
- opacity: calc(1 - var(--swipe-back-displacement-ratio, 0));
4868
- --seed-exit-translate-x: 25%;
4869
- --seed-exit-translate-y: 0;
4870
- --seed-exit-opacity: 0;
4871
- --seed-exit-scale: 1;
4872
- animation: .3s cubic-bezier(.22, .1, .3, .85) forwards seed-exit;
4873
- }
4874
-
4875
- [data-global-transition-state="enter-done"] .seed-app-bar-main__root--transitionStyle_slideFromRightIOS[data-activity-is-top] {
4876
- --seed-enter-translate-x: calc(var(--swipe-back-displacement, 0) * .25);
4877
- --seed-enter-translate-y: 0;
4878
- --seed-enter-opacity: calc(1 - var(--swipe-back-displacement-ratio, 0));
4879
- --seed-enter-scale: 1;
4880
- opacity: 1;
4881
- animation: .3s cubic-bezier(.22, .1, .3, .85) seed-enter;
4882
- transform: translate3d(0, 0, 0);
4883
- }
4884
-
4885
- [data-swipe-back-state="swiping"] .seed-app-bar-main__root--transitionStyle_slideFromRightIOS[data-activity-is-top]:not(#\#) {
4886
- transform: translate3d(calc(var(--swipe-back-displacement, 0) * .25), 0, 0);
4887
- opacity: calc(1 - var(--swipe-back-displacement-ratio, 0));
4888
- animation: none;
4889
- }
4890
-
4891
- [data-global-transition-state="enter-active"][data-top-activity-type="full-screen"] .seed-app-bar-main__root--transitionStyle_slideFromRightIOS:not([data-activity-is-top]) {
4892
- opacity: 1;
4893
- --seed-exit-translate-x: -25%;
4894
- --seed-exit-translate-y: 0;
4895
- --seed-exit-opacity: 0;
4896
- --seed-exit-scale: 1;
4897
- animation: .3s cubic-bezier(.22, .1, .3, .85) forwards seed-exit;
4898
- transform: translate3d(0, 0, 0);
4899
- }
4900
-
4901
- [data-global-transition-state="exit-active"][data-top-activity-type="full-screen"] .seed-app-bar-main__root--transitionStyle_slideFromRightIOS:not([data-activity-is-top]) {
4902
- --seed-enter-translate-x: calc(-25% + var(--swipe-back-displacement, 0) * .25);
4903
- --seed-enter-translate-y: 0;
4904
- --seed-enter-opacity: calc(1 - var(--swipe-back-displacement-ratio, 0));
4905
- --seed-enter-scale: 1;
4906
- opacity: 1;
4907
- animation: .3s cubic-bezier(.22, .1, .3, .85) seed-enter;
4908
- transform: translate3d(0, 0, 0);
4909
- }
4910
-
4911
- [data-global-transition-state="enter-done"][data-top-activity-type="full-screen"] .seed-app-bar-main__root--transitionStyle_slideFromRightIOS:not([data-activity-is-top]) {
4912
- transform: translate3d(calc(-25% + var(--swipe-back-displacement, 0) * .25), 0, 0);
4913
- opacity: calc(1 - var(--swipe-back-displacement-ratio, 0));
4914
- --seed-exit-translate-x: -25%;
4915
- --seed-exit-translate-y: 0;
4916
- --seed-exit-opacity: 0;
4917
- --seed-exit-scale: 1;
4918
- animation: .3s cubic-bezier(.22, .1, .3, .85) forwards seed-exit;
4919
- }
4920
-
4921
- [data-swipe-back-state="swiping"] .seed-app-bar-main__root--transitionStyle_slideFromRightIOS:not([data-activity-is-top]):not(#\#) {
4922
- transform: translate3d(calc(-25% + var(--swipe-back-displacement, 0) * .25), 0, 0);
4923
- opacity: calc(1 - var(--swipe-back-displacement-ratio, 0));
4924
- animation: none;
4925
- }
4926
-
4927
- .seed-app-bar-main__root--tone_layer, .seed-app-bar-main__title--tone_layer {
4928
- color: var(--seed-color-fg-neutral);
4929
- }
4930
-
4931
- .seed-app-bar-main__subtitle--tone_layer {
4932
- color: var(--seed-color-fg-neutral-muted);
4933
- }
4934
-
4935
- .seed-app-bar-main__root--tone_transparent, .seed-app-bar-main__title--tone_transparent, .seed-app-bar-main__subtitle--tone_transparent {
4936
- color: var(--seed-color-palette-static-white);
4937
- }
4938
-
4939
- .seed-pull-to-refresh__root {
4940
- --ptr-size: 44px;
4941
- --ptr-transition-duration: var(--seed-duration-d6);
4942
- height: 100%;
4943
- }
4944
-
4945
- .seed-pull-to-refresh__indicator {
4946
- transform: translateY(min(calc(var(--ptr-displacement, 0) - var(--ptr-size)), 0px));
4947
- transition: transform var(--seed-duration-d6);
4948
- justify-content: center;
4949
- align-items: center;
4950
- display: flex;
4951
- }
4952
-
4953
- .seed-pull-to-refresh__indicator[data-ptr-dragging] {
4954
- transition: none;
4955
- }
4956
-
4957
- @keyframes seed-enter {
4958
- from {
4959
- opacity: var(--seed-enter-opacity, 1);
4960
- transform: translate3d(var(--seed-enter-translate-x, 0), var(--seed-enter-translate-y, 0), 0) scale3d(var(--seed-enter-scale, 1), var(--seed-enter-scale, 1), var(--seed-enter-scale, 1)) rotate(var(--seed-enter-rotate, 0));
4961
- }
4962
- }
4963
-
4964
- @keyframes seed-exit {
4965
- to {
4966
- opacity: var(--seed-exit-opacity, 1);
4967
- transform: translate3d(var(--seed-exit-translate-x, 0), var(--seed-exit-translate-y, 0), 0) scale3d(var(--seed-exit-scale, 1), var(--seed-exit-scale, 1), var(--seed-exit-scale, 1)) rotate(var(--seed-exit-rotate, 0));
4968
- }
4969
- }
4970
-
4971
- @keyframes rotate {
4972
- from {
4973
- transform: rotate(0);
4974
- }
4975
-
4976
- to {
4977
- transform: rotate(360deg);
4978
- }
4979
- }
4980
-
4981
- @keyframes slide-x {
4982
- 0% {
4983
- transform: translateX(-100%);
4984
- }
4985
-
4986
- 100% {
4987
- transform: translateX(100%);
4988
- }
4989
- }
4990
-
4991
- @keyframes progress-circle-head {
4992
- 0% {
4993
- stroke-dasharray: 0 1000%;
4994
- }
4995
-
4996
- 75% {
4997
- stroke-dasharray: var(--circumference), 1000%;
4998
- }
4999
-
5000
- 100% {
5001
- stroke-dasharray: var(--circumference), 1000%;
5002
- }
5003
- }
5004
-
5005
- @keyframes progress-circle-tail {
5006
- 0% {
5007
- stroke-dashoffset: 0;
5008
- }
5009
-
5010
- 33.33% {
5011
- stroke-dashoffset: 0;
5012
- }
5013
-
5014
- 100% {
5015
- stroke-dashoffset: calc(var(--circumference) * -1);
5016
- }
5017
- }