@openameba/spindle-ui 0.27.0 → 0.27.2-alpha.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (366) hide show
  1. package/Breadcrumb/Breadcrumb.css +1 -1
  2. package/Breadcrumb/BreadcrumbItem.mjs +7 -0
  3. package/Breadcrumb/BreadcrumbList.mjs +12 -0
  4. package/Breadcrumb/index.mjs +2 -0
  5. package/Button/Button.mjs +7 -0
  6. package/Button/index.mjs +1 -0
  7. package/ButtonGroup/ButtonGroup.mjs +13 -0
  8. package/ButtonGroup/index.mjs +1 -0
  9. package/CHANGELOG.md +55 -0
  10. package/Form/Checkbox.mjs +11 -0
  11. package/Form/DropDown.mjs +38 -0
  12. package/Form/InlineDropDown.mjs +30 -0
  13. package/Form/InputLabel.mjs +5 -0
  14. package/Form/InvalidMessage.mjs +9 -0
  15. package/Form/Radio.mjs +11 -0
  16. package/Form/TextArea.mjs +5 -0
  17. package/Form/TextField.mjs +9 -0
  18. package/Form/ToggleSwitch.mjs +8 -0
  19. package/Form/index.mjs +8 -0
  20. package/HeroCarousel/HeroCarousel.mjs +27 -0
  21. package/HeroCarousel/HeroCarouselItem.mjs +20 -0
  22. package/HeroCarousel/hooks/useAutoPlayCarousel.mjs +158 -0
  23. package/HeroCarousel/hooks/useAutoSlide.mjs +40 -0
  24. package/HeroCarousel/hooks/useCarouselFocus.mjs +22 -0
  25. package/HeroCarousel/hooks/useSliderMoveEvent.mjs +47 -0
  26. package/HeroCarousel/hooks/useSliderTransition.mjs +30 -0
  27. package/HeroCarousel/hooks/useValueRef.mjs +8 -0
  28. package/HeroCarousel/index.mjs +1 -0
  29. package/Icon/755.mjs +6 -0
  30. package/Icon/Abemakun.mjs +6 -0
  31. package/Icon/Abematv.mjs +6 -0
  32. package/Icon/Accesslink.mjs +6 -0
  33. package/Icon/Accesspage.mjs +6 -0
  34. package/Icon/AccesspageFill.mjs +6 -0
  35. package/Icon/AddressbookFill.mjs +6 -0
  36. package/Icon/AlbumAddFill.mjs +6 -0
  37. package/Icon/AlbumFill.mjs +6 -0
  38. package/Icon/AlignCenter.mjs +6 -0
  39. package/Icon/AlignLeft.mjs +6 -0
  40. package/Icon/AlignRight.mjs +6 -0
  41. package/Icon/AllFill.mjs +6 -0
  42. package/Icon/Amebacoin.mjs +6 -0
  43. package/Icon/Amebapick.mjs +9 -0
  44. package/Icon/Amegold.mjs +6 -0
  45. package/Icon/Amember.mjs +6 -0
  46. package/Icon/ArrowDown.mjs +6 -0
  47. package/Icon/ArrowDownBold.mjs +6 -0
  48. package/Icon/ArrowLeft.mjs +6 -0
  49. package/Icon/ArrowLeftBold.mjs +6 -0
  50. package/Icon/ArrowRight.mjs +6 -0
  51. package/Icon/ArrowRightBold.mjs +6 -0
  52. package/Icon/ArrowRightCircle.mjs +6 -0
  53. package/Icon/ArrowRightCircleFill.mjs +6 -0
  54. package/Icon/ArrowUp.mjs +6 -0
  55. package/Icon/ArrowUpBold.mjs +6 -0
  56. package/Icon/ArrowpagingDown.mjs +6 -0
  57. package/Icon/ArrowpagingDownCircle.mjs +6 -0
  58. package/Icon/ArrowpagingLeft.mjs +6 -0
  59. package/Icon/ArrowpagingLeftCircle.mjs +6 -0
  60. package/Icon/ArrowpagingRight.mjs +6 -0
  61. package/Icon/ArrowpagingRightCircle.mjs +6 -0
  62. package/Icon/ArrowpagingUp.mjs +6 -0
  63. package/Icon/ArrowpagingUpCircle.mjs +6 -0
  64. package/Icon/Article.mjs +6 -0
  65. package/Icon/ArticleSlash.mjs +6 -0
  66. package/Icon/Articledesign.mjs +6 -0
  67. package/Icon/Astrogy.mjs +6 -0
  68. package/Icon/AstrogyFill.mjs +6 -0
  69. package/Icon/Baby.mjs +7 -0
  70. package/Icon/Bbs.mjs +6 -0
  71. package/Icon/Beginner.mjs +6 -0
  72. package/Icon/Bell.mjs +6 -0
  73. package/Icon/BellFill.mjs +6 -0
  74. package/Icon/BellFillSlash.mjs +6 -0
  75. package/Icon/BellSlash.mjs +6 -0
  76. package/Icon/Blog.mjs +6 -0
  77. package/Icon/Bold.mjs +6 -0
  78. package/Icon/Book.mjs +6 -0
  79. package/Icon/BookFill.mjs +6 -0
  80. package/Icon/Bookmark.mjs +6 -0
  81. package/Icon/BookmarkFill.mjs +6 -0
  82. package/Icon/Bookshelf.mjs +6 -0
  83. package/Icon/BookshelfFill.mjs +6 -0
  84. package/Icon/Border.mjs +6 -0
  85. package/Icon/BottomnavFollowfeedActive.mjs +6 -0
  86. package/Icon/BottomnavFollowfeedInactive.mjs +6 -0
  87. package/Icon/BottomnavHomeActive.mjs +6 -0
  88. package/Icon/BottomnavHomeInactive.mjs +6 -0
  89. package/Icon/BottomnavMypageActive.mjs +6 -0
  90. package/Icon/BottomnavSearchActive.mjs +6 -0
  91. package/Icon/BottomnavSearchInactive.mjs +6 -0
  92. package/Icon/BottomnvavMypageInactive.mjs +6 -0
  93. package/Icon/Bullets.mjs +6 -0
  94. package/Icon/Calendar.mjs +6 -0
  95. package/Icon/CameraFill.mjs +6 -0
  96. package/Icon/CautionFill.mjs +6 -0
  97. package/Icon/Check.mjs +6 -0
  98. package/Icon/CheckBold.mjs +6 -0
  99. package/Icon/CheckCircle.mjs +6 -0
  100. package/Icon/CheckCircleFill.mjs +6 -0
  101. package/Icon/CheckRectangle.mjs +6 -0
  102. package/Icon/Checklist.mjs +6 -0
  103. package/Icon/ChevronDown.mjs +6 -0
  104. package/Icon/ChevronDownBold.mjs +6 -0
  105. package/Icon/ChevronLeft.mjs +6 -0
  106. package/Icon/ChevronLeftBold.mjs +6 -0
  107. package/Icon/ChevronRight.mjs +6 -0
  108. package/Icon/ChevronRightBold.mjs +6 -0
  109. package/Icon/ChevronUp.mjs +6 -0
  110. package/Icon/ChevronUpBold.mjs +6 -0
  111. package/Icon/Circle.mjs +6 -0
  112. package/Icon/CircleBold.mjs +6 -0
  113. package/Icon/CircleFill.mjs +6 -0
  114. package/Icon/Clock.mjs +6 -0
  115. package/Icon/ClockFill.mjs +6 -0
  116. package/Icon/Coin.mjs +6 -0
  117. package/Icon/Comment.mjs +6 -0
  118. package/Icon/CommentFill.mjs +6 -0
  119. package/Icon/CommentPen.mjs +6 -0
  120. package/Icon/CommentTwoFill.mjs +6 -0
  121. package/Icon/CommentTwoSlashFill.mjs +6 -0
  122. package/Icon/Community.mjs +6 -0
  123. package/Icon/Compass.mjs +7 -0
  124. package/Icon/Coupon.mjs +6 -0
  125. package/Icon/Crop.mjs +6 -0
  126. package/Icon/CropDin.mjs +6 -0
  127. package/Icon/CropLandscape.mjs +6 -0
  128. package/Icon/Cross.mjs +6 -0
  129. package/Icon/CrossBold.mjs +6 -0
  130. package/Icon/CrossCircle.mjs +6 -0
  131. package/Icon/CrossCircleFill.mjs +6 -0
  132. package/Icon/CrossRectangle.mjs +6 -0
  133. package/Icon/Cutlery.mjs +6 -0
  134. package/Icon/DiamondTwo.mjs +11 -0
  135. package/Icon/Dice.mjs +7 -0
  136. package/Icon/Dot.mjs +6 -0
  137. package/Icon/Dotmoney.mjs +6 -0
  138. package/Icon/Download.mjs +6 -0
  139. package/Icon/Embed.mjs +6 -0
  140. package/Icon/EmotionFill.mjs +6 -0
  141. package/Icon/EntryLost.mjs +6 -0
  142. package/Icon/Exclamationmark.mjs +6 -0
  143. package/Icon/ExclamationmarkBalloon.mjs +6 -0
  144. package/Icon/ExclamationmarkBalloonFill.mjs +6 -0
  145. package/Icon/ExclamationmarkBold.mjs +6 -0
  146. package/Icon/ExclamationmarkCircle.mjs +6 -0
  147. package/Icon/ExclamationmarkCircleFill.mjs +6 -0
  148. package/Icon/Expand.mjs +6 -0
  149. package/Icon/ExpandExit.mjs +6 -0
  150. package/Icon/Facebook.mjs +6 -0
  151. package/Icon/File.mjs +6 -0
  152. package/Icon/FileAdd.mjs +6 -0
  153. package/Icon/FileAddFill.mjs +6 -0
  154. package/Icon/FileCircle.mjs +6 -0
  155. package/Icon/FileCircleFill.mjs +6 -0
  156. package/Icon/FileFill.mjs +6 -0
  157. package/Icon/Filter.mjs +6 -0
  158. package/Icon/FilterCheck.mjs +6 -0
  159. package/Icon/Fit.mjs +6 -0
  160. package/Icon/FlagFill.mjs +6 -0
  161. package/Icon/FlagRanking.mjs +6 -0
  162. package/Icon/FlagRankingTrim.mjs +10 -0
  163. package/Icon/Flash.mjs +6 -0
  164. package/Icon/FlashAuto.mjs +6 -0
  165. package/Icon/FlashOff.mjs +6 -0
  166. package/Icon/Flowervase.mjs +6 -0
  167. package/Icon/Folder.mjs +6 -0
  168. package/Icon/FolderFill.mjs +6 -0
  169. package/Icon/FolderTwo.mjs +6 -0
  170. package/Icon/FolderTwoFill.mjs +6 -0
  171. package/Icon/Font.mjs +6 -0
  172. package/Icon/Fontstyle.mjs +6 -0
  173. package/Icon/Game.mjs +6 -0
  174. package/Icon/GameFill.mjs +6 -0
  175. package/Icon/GameKantan.mjs +6 -0
  176. package/Icon/Gear.mjs +6 -0
  177. package/Icon/GearFill.mjs +6 -0
  178. package/Icon/Genre.mjs +6 -0
  179. package/Icon/GenreAdd.mjs +6 -0
  180. package/Icon/GenreDone.mjs +6 -0
  181. package/Icon/GraphBar.mjs +6 -0
  182. package/Icon/Gruppo.mjs +6 -0
  183. package/Icon/HandWaveFill.mjs +6 -0
  184. package/Icon/Hatenabookmark.mjs +6 -0
  185. package/Icon/Heart.mjs +6 -0
  186. package/Icon/HeartFill.mjs +6 -0
  187. package/Icon/History.mjs +6 -0
  188. package/Icon/HomeFill.mjs +6 -0
  189. package/Icon/Hot.mjs +6 -0
  190. package/Icon/Htmltag.mjs +6 -0
  191. package/Icon/ImageAddFill.mjs +6 -0
  192. package/Icon/ImageBanFill.mjs +6 -0
  193. package/Icon/ImageFill.mjs +6 -0
  194. package/Icon/ImageFillSlash.mjs +6 -0
  195. package/Icon/ImageQuestionFill.mjs +6 -0
  196. package/Icon/Information.mjs +6 -0
  197. package/Icon/Instagram.mjs +6 -0
  198. package/Icon/Italic.mjs +6 -0
  199. package/Icon/Kaomoji.mjs +6 -0
  200. package/Icon/Keyboard.mjs +6 -0
  201. package/Icon/KeyboardDownFill.mjs +6 -0
  202. package/Icon/KeyboardFill.mjs +6 -0
  203. package/Icon/Koeblog.mjs +6 -0
  204. package/Icon/LineCircle.mjs +6 -0
  205. package/Icon/LineSquare.mjs +6 -0
  206. package/Icon/Link.mjs +6 -0
  207. package/Icon/ListBulleted.mjs +6 -0
  208. package/Icon/ListNumbered.mjs +6 -0
  209. package/Icon/Loading.mjs +6 -0
  210. package/Icon/LockFill.mjs +6 -0
  211. package/Icon/LockOpenFill.mjs +6 -0
  212. package/Icon/Magicwand.mjs +6 -0
  213. package/Icon/Mail.mjs +6 -0
  214. package/Icon/MailCheck.mjs +6 -0
  215. package/Icon/MailCircle.mjs +6 -0
  216. package/Icon/MailCircleFill.mjs +6 -0
  217. package/Icon/MailFill.mjs +6 -0
  218. package/Icon/Megaphone.mjs +6 -0
  219. package/Icon/MenuHamburger.mjs +6 -0
  220. package/Icon/MenuHamburgerBold.mjs +6 -0
  221. package/Icon/MenuHamburgerFourline.mjs +6 -0
  222. package/Icon/MenuHorizotal.mjs +6 -0
  223. package/Icon/MenuVertical.mjs +6 -0
  224. package/Icon/Messageboard.mjs +6 -0
  225. package/Icon/Microphone.mjs +6 -0
  226. package/Icon/MicrophoneFill.mjs +6 -0
  227. package/Icon/Minus.mjs +6 -0
  228. package/Icon/MinusBold.mjs +6 -0
  229. package/Icon/Moon.mjs +6 -0
  230. package/Icon/MoonFill.mjs +6 -0
  231. package/Icon/MovieCameraFill.mjs +6 -0
  232. package/Icon/MoviePlay.mjs +6 -0
  233. package/Icon/MoviePlayFill.mjs +6 -0
  234. package/Icon/MovieStop.mjs +6 -0
  235. package/Icon/MusicFill.mjs +6 -0
  236. package/Icon/New.mjs +6 -0
  237. package/Icon/Newbook.mjs +6 -0
  238. package/Icon/NewbookFill.mjs +6 -0
  239. package/Icon/News.mjs +6 -0
  240. package/Icon/Nice.mjs +6 -0
  241. package/Icon/NiceDone.mjs +6 -0
  242. package/Icon/Nodate.mjs +6 -0
  243. package/Icon/Now.mjs +6 -0
  244. package/Icon/Officialstar.mjs +6 -0
  245. package/Icon/OfficialstarFill.mjs +6 -0
  246. package/Icon/OnedariFill.mjs +6 -0
  247. package/Icon/OpenCl.mjs +6 -0
  248. package/Icon/Openblank.mjs +6 -0
  249. package/Icon/OpenblankFill.mjs +6 -0
  250. package/Icon/Ownd.mjs +6 -0
  251. package/Icon/PaletteFill.mjs +6 -0
  252. package/Icon/Pause.mjs +6 -0
  253. package/Icon/PauseBold.mjs +6 -0
  254. package/Icon/Pawprint.mjs +6 -0
  255. package/Icon/Pencil.mjs +6 -0
  256. package/Icon/PencilAdd.mjs +6 -0
  257. package/Icon/PencilBold.mjs +6 -0
  258. package/Icon/Person.mjs +6 -0
  259. package/Icon/PersonFill.mjs +6 -0
  260. package/Icon/PersonThreeFill.mjs +6 -0
  261. package/Icon/PersonTwoAddFill.mjs +6 -0
  262. package/Icon/PersonTwoDeleteFill.mjs +6 -0
  263. package/Icon/PersonTwoDoneFill.mjs +6 -0
  264. package/Icon/PersonTwoFill.mjs +6 -0
  265. package/Icon/Peta.mjs +6 -0
  266. package/Icon/Pigg.mjs +6 -0
  267. package/Icon/PinFill.mjs +6 -0
  268. package/Icon/PlayCircle.mjs +6 -0
  269. package/Icon/PlayFill.mjs +6 -0
  270. package/Icon/Plus.mjs +6 -0
  271. package/Icon/PlusBold.mjs +6 -0
  272. package/Icon/PlusCircle.mjs +6 -0
  273. package/Icon/PlusCircleFill.mjs +6 -0
  274. package/Icon/PremiumFill.mjs +6 -0
  275. package/Icon/Present.mjs +6 -0
  276. package/Icon/Profilecard.mjs +6 -0
  277. package/Icon/Qr.mjs +6 -0
  278. package/Icon/Question.mjs +6 -0
  279. package/Icon/QuestionmarkCircle.mjs +6 -0
  280. package/Icon/QuestionmarkCircleFill.mjs +6 -0
  281. package/Icon/RankingCrown.mjs +6 -0
  282. package/Icon/RankingCrownFill.mjs +6 -0
  283. package/Icon/RankingPlatformFill.mjs +6 -0
  284. package/Icon/Reblog.mjs +6 -0
  285. package/Icon/ReblogSlash.mjs +6 -0
  286. package/Icon/Redo.mjs +6 -0
  287. package/Icon/RedoBold.mjs +6 -0
  288. package/Icon/Refresh.mjs +6 -0
  289. package/Icon/ReplyCircleFill.mjs +6 -0
  290. package/Icon/ReplyFill.mjs +6 -0
  291. package/Icon/Requ.mjs +6 -0
  292. package/Icon/Sad.mjs +6 -0
  293. package/Icon/Saveblog.mjs +6 -0
  294. package/Icon/ScreenFull.mjs +6 -0
  295. package/Icon/ScreenInline.mjs +6 -0
  296. package/Icon/Search.mjs +6 -0
  297. package/Icon/Service.mjs +6 -0
  298. package/Icon/Share.mjs +6 -0
  299. package/Icon/ShineFill.mjs +6 -0
  300. package/Icon/Shirt.mjs +6 -0
  301. package/Icon/SidefaceClose.mjs +6 -0
  302. package/Icon/SidefaceOpen.mjs +6 -0
  303. package/Icon/Smartphone.mjs +6 -0
  304. package/Icon/SmartphoneFill.mjs +6 -0
  305. package/Icon/Sort.mjs +6 -0
  306. package/Icon/SortFeed.mjs +6 -0
  307. package/Icon/SortTile.mjs +6 -0
  308. package/Icon/SpeakerOffFill.mjs +6 -0
  309. package/Icon/SpeakerOnFill.mjs +6 -0
  310. package/Icon/Sprout.mjs +6 -0
  311. package/Icon/Stampside.mjs +6 -0
  312. package/Icon/Star.mjs +6 -0
  313. package/Icon/StarCircleFill.mjs +6 -0
  314. package/Icon/StarFaceFill.mjs +6 -0
  315. package/Icon/StarFill.mjs +6 -0
  316. package/Icon/StopFill.mjs +6 -0
  317. package/Icon/Strikethrough.mjs +6 -0
  318. package/Icon/Sun.mjs +6 -0
  319. package/Icon/SunFill.mjs +6 -0
  320. package/Icon/Switching.mjs +6 -0
  321. package/Icon/SwitchingCamera.mjs +6 -0
  322. package/Icon/TagFill.mjs +6 -0
  323. package/Icon/TagOfficialFill.mjs +6 -0
  324. package/Icon/Thumbsup.mjs +6 -0
  325. package/Icon/ThumbsupFill.mjs +6 -0
  326. package/Icon/Title.mjs +6 -0
  327. package/Icon/TopbloggerRibbon.mjs +6 -0
  328. package/Icon/TranscriptOff.mjs +6 -0
  329. package/Icon/TranscriptOn.mjs +6 -0
  330. package/Icon/Transmission.mjs +6 -0
  331. package/Icon/Trashcan.mjs +6 -0
  332. package/Icon/Trend.mjs +6 -0
  333. package/Icon/TrendFill.mjs +6 -0
  334. package/Icon/TriangleDown.mjs +6 -0
  335. package/Icon/TriangleLeft.mjs +6 -0
  336. package/Icon/TriangleRight.mjs +6 -0
  337. package/Icon/TriangleUp.mjs +6 -0
  338. package/Icon/TrianglearrowDown.mjs +6 -0
  339. package/Icon/TrianglearrowDownright.mjs +6 -0
  340. package/Icon/TrianglearrowRight.mjs +6 -0
  341. package/Icon/TrianglearrowUp.mjs +6 -0
  342. package/Icon/TrianglearrowUpright.mjs +6 -0
  343. package/Icon/TriangleendLeft.mjs +6 -0
  344. package/Icon/TriangleendRight.mjs +6 -0
  345. package/Icon/TrophyFill.mjs +6 -0
  346. package/Icon/TvFill.mjs +6 -0
  347. package/Icon/Twitter.mjs +6 -0
  348. package/Icon/Underline.mjs +6 -0
  349. package/Icon/Undo.mjs +6 -0
  350. package/Icon/UndoBold.mjs +6 -0
  351. package/Icon/Wallet.mjs +6 -0
  352. package/Icon/Webview.mjs +6 -0
  353. package/Icon/Youtube.mjs +6 -0
  354. package/Icon/index.mjs +325 -0
  355. package/IconButton/IconButton.mjs +5 -0
  356. package/IconButton/index.mjs +1 -0
  357. package/LinkButton/LinkButton.mjs +7 -0
  358. package/LinkButton/index.mjs +1 -0
  359. package/README.md +3 -1
  360. package/Toast/Toast.mjs +67 -0
  361. package/Toast/index.mjs +1 -0
  362. package/index.css +1 -1
  363. package/index.mjs +11 -0
  364. package/package.json +11 -3
  365. package/tsconfig.cjs.json +10 -0
  366. package/tsconfig.esm.json +8 -0
@@ -0,0 +1,6 @@
1
+ import * as React from 'react';
2
+ function SvgWebview(props) {
3
+ return (React.createElement("svg", Object.assign({ width: "1em", height: "1em", viewBox: "0 0 24 24", fill: "currentColor", role: "img" }, props),
4
+ React.createElement("path", { d: "M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm4.31 7.88h3.39c.19.68.3 1.39.3 2.12 0 .72-.1 1.42-.28 2.08h-3.4c.19-1.4.19-2.8-.01-4.2zm2.54-2h-2.96c-.32-1.16-.78-2.32-1.37-3.47 1.82.6 3.35 1.85 4.33 3.47zm-8.68 8.2h3.65c-.41 1.3-1.02 2.61-1.83 3.91-.8-1.3-1.41-2.61-1.82-3.91zm4.13-2H9.7c-.22-1.4-.22-2.8.02-4.2h4.58c.22 1.41.23 2.8 0 4.2zM12 4c.79 1.3 1.39 2.59 1.8 3.88h-3.6C10.61 6.6 11.21 5.3 12 4zm-2.51.41C8.9 5.57 8.44 6.72 8.12 7.88H5.15a8.002 8.002 0 014.34-3.47zm-1.81 9.67h-3.4A7.91 7.91 0 014 12c0-.73.11-1.44.29-2.12h3.39c-.19 1.4-.19 2.8 0 4.2zm-2.55 2H8.1c.32 1.17.79 2.34 1.39 3.51a8.036 8.036 0 01-4.36-3.51zm9.38 3.51c.6-1.17 1.07-2.34 1.39-3.51h2.97a8.036 8.036 0 01-4.36 3.51z" })));
5
+ }
6
+ export default SvgWebview;
@@ -0,0 +1,6 @@
1
+ import * as React from 'react';
2
+ function SvgYoutube(props) {
3
+ return (React.createElement("svg", Object.assign({ width: "1em", height: "1em", viewBox: "0 0 24 24", fill: "currentColor", role: "img" }, props),
4
+ React.createElement("path", { d: "M20.62 7.64c-.21-.78-.82-1.39-1.59-1.6-1.4-.38-7.03-.38-7.03-.38s-5.63 0-7.03.38c-.77.21-1.38.82-1.59 1.6C3 9.05 3 12 3 12s0 2.95.38 4.36c.21.78.82 1.39 1.59 1.6 1.4.38 7.03.38 7.03.38s5.63 0 7.03-.38c.77-.21 1.38-.82 1.59-1.6C21 14.95 21 12 21 12s0-2.95-.38-4.36zm-10.46 7.04V9.32l4.7 2.68-4.7 2.68z" })));
5
+ }
6
+ export default SvgYoutube;
package/Icon/index.mjs ADDED
@@ -0,0 +1,325 @@
1
+ export { default as Svg755 } from './755';
2
+ export { default as Abemakun } from './Abemakun';
3
+ export { default as Abematv } from './Abematv';
4
+ export { default as Accesslink } from './Accesslink';
5
+ export { default as Accesspage } from './Accesspage';
6
+ export { default as AccesspageFill } from './AccesspageFill';
7
+ export { default as AddressbookFill } from './AddressbookFill';
8
+ export { default as AlbumAddFill } from './AlbumAddFill';
9
+ export { default as AlbumFill } from './AlbumFill';
10
+ export { default as AlignCenter } from './AlignCenter';
11
+ export { default as AlignLeft } from './AlignLeft';
12
+ export { default as AlignRight } from './AlignRight';
13
+ export { default as AllFill } from './AllFill';
14
+ export { default as Amebacoin } from './Amebacoin';
15
+ export { default as Amebapick } from './Amebapick';
16
+ export { default as Amegold } from './Amegold';
17
+ export { default as Amember } from './Amember';
18
+ export { default as ArrowDown } from './ArrowDown';
19
+ export { default as ArrowDownBold } from './ArrowDownBold';
20
+ export { default as ArrowLeft } from './ArrowLeft';
21
+ export { default as ArrowLeftBold } from './ArrowLeftBold';
22
+ export { default as ArrowRight } from './ArrowRight';
23
+ export { default as ArrowRightBold } from './ArrowRightBold';
24
+ export { default as ArrowRightCircle } from './ArrowRightCircle';
25
+ export { default as ArrowRightCircleFill } from './ArrowRightCircleFill';
26
+ export { default as ArrowUp } from './ArrowUp';
27
+ export { default as ArrowUpBold } from './ArrowUpBold';
28
+ export { default as ArrowpagingDown } from './ArrowpagingDown';
29
+ export { default as ArrowpagingDownCircle } from './ArrowpagingDownCircle';
30
+ export { default as ArrowpagingLeft } from './ArrowpagingLeft';
31
+ export { default as ArrowpagingLeftCircle } from './ArrowpagingLeftCircle';
32
+ export { default as ArrowpagingRight } from './ArrowpagingRight';
33
+ export { default as ArrowpagingRightCircle } from './ArrowpagingRightCircle';
34
+ export { default as ArrowpagingUp } from './ArrowpagingUp';
35
+ export { default as ArrowpagingUpCircle } from './ArrowpagingUpCircle';
36
+ export { default as Article } from './Article';
37
+ export { default as ArticleSlash } from './ArticleSlash';
38
+ export { default as Articledesign } from './Articledesign';
39
+ export { default as Astrogy } from './Astrogy';
40
+ export { default as AstrogyFill } from './AstrogyFill';
41
+ export { default as Baby } from './Baby';
42
+ export { default as Bbs } from './Bbs';
43
+ export { default as Beginner } from './Beginner';
44
+ export { default as Bell } from './Bell';
45
+ export { default as BellFill } from './BellFill';
46
+ export { default as BellFillSlash } from './BellFillSlash';
47
+ export { default as BellSlash } from './BellSlash';
48
+ export { default as Blog } from './Blog';
49
+ export { default as Bold } from './Bold';
50
+ export { default as Book } from './Book';
51
+ export { default as BookFill } from './BookFill';
52
+ export { default as Bookmark } from './Bookmark';
53
+ export { default as BookmarkFill } from './BookmarkFill';
54
+ export { default as Bookshelf } from './Bookshelf';
55
+ export { default as BookshelfFill } from './BookshelfFill';
56
+ export { default as Border } from './Border';
57
+ export { default as BottomnavFollowfeedActive } from './BottomnavFollowfeedActive';
58
+ export { default as BottomnavFollowfeedInactive } from './BottomnavFollowfeedInactive';
59
+ export { default as BottomnavHomeActive } from './BottomnavHomeActive';
60
+ export { default as BottomnavHomeInactive } from './BottomnavHomeInactive';
61
+ export { default as BottomnavMypageActive } from './BottomnavMypageActive';
62
+ export { default as BottomnavSearchActive } from './BottomnavSearchActive';
63
+ export { default as BottomnavSearchInactive } from './BottomnavSearchInactive';
64
+ export { default as BottomnvavMypageInactive } from './BottomnvavMypageInactive';
65
+ export { default as Bullets } from './Bullets';
66
+ export { default as Calendar } from './Calendar';
67
+ export { default as CameraFill } from './CameraFill';
68
+ export { default as CautionFill } from './CautionFill';
69
+ export { default as Check } from './Check';
70
+ export { default as CheckBold } from './CheckBold';
71
+ export { default as CheckCircle } from './CheckCircle';
72
+ export { default as CheckCircleFill } from './CheckCircleFill';
73
+ export { default as CheckRectangle } from './CheckRectangle';
74
+ export { default as Checklist } from './Checklist';
75
+ export { default as ChevronDown } from './ChevronDown';
76
+ export { default as ChevronDownBold } from './ChevronDownBold';
77
+ export { default as ChevronLeft } from './ChevronLeft';
78
+ export { default as ChevronLeftBold } from './ChevronLeftBold';
79
+ export { default as ChevronRight } from './ChevronRight';
80
+ export { default as ChevronRightBold } from './ChevronRightBold';
81
+ export { default as ChevronUp } from './ChevronUp';
82
+ export { default as ChevronUpBold } from './ChevronUpBold';
83
+ export { default as Circle } from './Circle';
84
+ export { default as CircleBold } from './CircleBold';
85
+ export { default as CircleFill } from './CircleFill';
86
+ export { default as Clock } from './Clock';
87
+ export { default as ClockFill } from './ClockFill';
88
+ export { default as Coin } from './Coin';
89
+ export { default as Comment } from './Comment';
90
+ export { default as CommentFill } from './CommentFill';
91
+ export { default as CommentPen } from './CommentPen';
92
+ export { default as CommentTwoFill } from './CommentTwoFill';
93
+ export { default as CommentTwoSlashFill } from './CommentTwoSlashFill';
94
+ export { default as Community } from './Community';
95
+ export { default as Compass } from './Compass';
96
+ export { default as Coupon } from './Coupon';
97
+ export { default as Crop } from './Crop';
98
+ export { default as CropDin } from './CropDin';
99
+ export { default as CropLandscape } from './CropLandscape';
100
+ export { default as Cross } from './Cross';
101
+ export { default as CrossBold } from './CrossBold';
102
+ export { default as CrossCircle } from './CrossCircle';
103
+ export { default as CrossCircleFill } from './CrossCircleFill';
104
+ export { default as CrossRectangle } from './CrossRectangle';
105
+ export { default as Cutlery } from './Cutlery';
106
+ export { default as DiamondTwo } from './DiamondTwo';
107
+ export { default as Dice } from './Dice';
108
+ export { default as Dot } from './Dot';
109
+ export { default as Dotmoney } from './Dotmoney';
110
+ export { default as Download } from './Download';
111
+ export { default as Embed } from './Embed';
112
+ export { default as EmotionFill } from './EmotionFill';
113
+ export { default as EntryLost } from './EntryLost';
114
+ export { default as Exclamationmark } from './Exclamationmark';
115
+ export { default as ExclamationmarkBalloon } from './ExclamationmarkBalloon';
116
+ export { default as ExclamationmarkBalloonFill } from './ExclamationmarkBalloonFill';
117
+ export { default as ExclamationmarkBold } from './ExclamationmarkBold';
118
+ export { default as ExclamationmarkCircle } from './ExclamationmarkCircle';
119
+ export { default as ExclamationmarkCircleFill } from './ExclamationmarkCircleFill';
120
+ export { default as Expand } from './Expand';
121
+ export { default as ExpandExit } from './ExpandExit';
122
+ export { default as Facebook } from './Facebook';
123
+ export { default as File } from './File';
124
+ export { default as FileAdd } from './FileAdd';
125
+ export { default as FileAddFill } from './FileAddFill';
126
+ export { default as FileCircle } from './FileCircle';
127
+ export { default as FileCircleFill } from './FileCircleFill';
128
+ export { default as FileFill } from './FileFill';
129
+ export { default as Filter } from './Filter';
130
+ export { default as FilterCheck } from './FilterCheck';
131
+ export { default as Fit } from './Fit';
132
+ export { default as FlagFill } from './FlagFill';
133
+ export { default as FlagRanking } from './FlagRanking';
134
+ export { default as FlagRankingTrim } from './FlagRankingTrim';
135
+ export { default as Flash } from './Flash';
136
+ export { default as FlashAuto } from './FlashAuto';
137
+ export { default as FlashOff } from './FlashOff';
138
+ export { default as Flowervase } from './Flowervase';
139
+ export { default as Folder } from './Folder';
140
+ export { default as FolderFill } from './FolderFill';
141
+ export { default as FolderTwo } from './FolderTwo';
142
+ export { default as FolderTwoFill } from './FolderTwoFill';
143
+ export { default as Font } from './Font';
144
+ export { default as Fontstyle } from './Fontstyle';
145
+ export { default as Game } from './Game';
146
+ export { default as GameFill } from './GameFill';
147
+ export { default as GameKantan } from './GameKantan';
148
+ export { default as Gear } from './Gear';
149
+ export { default as GearFill } from './GearFill';
150
+ export { default as Genre } from './Genre';
151
+ export { default as GenreAdd } from './GenreAdd';
152
+ export { default as GenreDone } from './GenreDone';
153
+ export { default as GraphBar } from './GraphBar';
154
+ export { default as Gruppo } from './Gruppo';
155
+ export { default as HandWaveFill } from './HandWaveFill';
156
+ export { default as Hatenabookmark } from './Hatenabookmark';
157
+ export { default as Heart } from './Heart';
158
+ export { default as HeartFill } from './HeartFill';
159
+ export { default as History } from './History';
160
+ export { default as HomeFill } from './HomeFill';
161
+ export { default as Hot } from './Hot';
162
+ export { default as Htmltag } from './Htmltag';
163
+ export { default as ImageAddFill } from './ImageAddFill';
164
+ export { default as ImageBanFill } from './ImageBanFill';
165
+ export { default as ImageFill } from './ImageFill';
166
+ export { default as ImageFillSlash } from './ImageFillSlash';
167
+ export { default as ImageQuestionFill } from './ImageQuestionFill';
168
+ export { default as Information } from './Information';
169
+ export { default as Instagram } from './Instagram';
170
+ export { default as Italic } from './Italic';
171
+ export { default as Kaomoji } from './Kaomoji';
172
+ export { default as Keyboard } from './Keyboard';
173
+ export { default as KeyboardDownFill } from './KeyboardDownFill';
174
+ export { default as KeyboardFill } from './KeyboardFill';
175
+ export { default as Koeblog } from './Koeblog';
176
+ export { default as LineCircle } from './LineCircle';
177
+ export { default as LineSquare } from './LineSquare';
178
+ export { default as Link } from './Link';
179
+ export { default as ListBulleted } from './ListBulleted';
180
+ export { default as ListNumbered } from './ListNumbered';
181
+ export { default as Loading } from './Loading';
182
+ export { default as LockFill } from './LockFill';
183
+ export { default as LockOpenFill } from './LockOpenFill';
184
+ export { default as Magicwand } from './Magicwand';
185
+ export { default as Mail } from './Mail';
186
+ export { default as MailCheck } from './MailCheck';
187
+ export { default as MailCircle } from './MailCircle';
188
+ export { default as MailCircleFill } from './MailCircleFill';
189
+ export { default as MailFill } from './MailFill';
190
+ export { default as Megaphone } from './Megaphone';
191
+ export { default as MenuHamburger } from './MenuHamburger';
192
+ export { default as MenuHamburgerBold } from './MenuHamburgerBold';
193
+ export { default as MenuHamburgerFourline } from './MenuHamburgerFourline';
194
+ export { default as MenuHorizotal } from './MenuHorizotal';
195
+ export { default as MenuVertical } from './MenuVertical';
196
+ export { default as Messageboard } from './Messageboard';
197
+ export { default as Microphone } from './Microphone';
198
+ export { default as MicrophoneFill } from './MicrophoneFill';
199
+ export { default as Minus } from './Minus';
200
+ export { default as MinusBold } from './MinusBold';
201
+ export { default as Moon } from './Moon';
202
+ export { default as MoonFill } from './MoonFill';
203
+ export { default as MovieCameraFill } from './MovieCameraFill';
204
+ export { default as MoviePlay } from './MoviePlay';
205
+ export { default as MoviePlayFill } from './MoviePlayFill';
206
+ export { default as MovieStop } from './MovieStop';
207
+ export { default as MusicFill } from './MusicFill';
208
+ export { default as New } from './New';
209
+ export { default as Newbook } from './Newbook';
210
+ export { default as NewbookFill } from './NewbookFill';
211
+ export { default as News } from './News';
212
+ export { default as Nice } from './Nice';
213
+ export { default as NiceDone } from './NiceDone';
214
+ export { default as Nodate } from './Nodate';
215
+ export { default as Now } from './Now';
216
+ export { default as Officialstar } from './Officialstar';
217
+ export { default as OfficialstarFill } from './OfficialstarFill';
218
+ export { default as OnedariFill } from './OnedariFill';
219
+ export { default as OpenCl } from './OpenCl';
220
+ export { default as Openblank } from './Openblank';
221
+ export { default as OpenblankFill } from './OpenblankFill';
222
+ export { default as Ownd } from './Ownd';
223
+ export { default as PaletteFill } from './PaletteFill';
224
+ export { default as Pause } from './Pause';
225
+ export { default as PauseBold } from './PauseBold';
226
+ export { default as Pawprint } from './Pawprint';
227
+ export { default as Pencil } from './Pencil';
228
+ export { default as PencilAdd } from './PencilAdd';
229
+ export { default as PencilBold } from './PencilBold';
230
+ export { default as Person } from './Person';
231
+ export { default as PersonFill } from './PersonFill';
232
+ export { default as PersonThreeFill } from './PersonThreeFill';
233
+ export { default as PersonTwoAddFill } from './PersonTwoAddFill';
234
+ export { default as PersonTwoDeleteFill } from './PersonTwoDeleteFill';
235
+ export { default as PersonTwoDoneFill } from './PersonTwoDoneFill';
236
+ export { default as PersonTwoFill } from './PersonTwoFill';
237
+ export { default as Peta } from './Peta';
238
+ export { default as Pigg } from './Pigg';
239
+ export { default as PinFill } from './PinFill';
240
+ export { default as PlayCircle } from './PlayCircle';
241
+ export { default as PlayFill } from './PlayFill';
242
+ export { default as Plus } from './Plus';
243
+ export { default as PlusBold } from './PlusBold';
244
+ export { default as PlusCircle } from './PlusCircle';
245
+ export { default as PlusCircleFill } from './PlusCircleFill';
246
+ export { default as PremiumFill } from './PremiumFill';
247
+ export { default as Present } from './Present';
248
+ export { default as Profilecard } from './Profilecard';
249
+ export { default as Qr } from './Qr';
250
+ export { default as Question } from './Question';
251
+ export { default as QuestionmarkCircle } from './QuestionmarkCircle';
252
+ export { default as QuestionmarkCircleFill } from './QuestionmarkCircleFill';
253
+ export { default as RankingCrown } from './RankingCrown';
254
+ export { default as RankingCrownFill } from './RankingCrownFill';
255
+ export { default as RankingPlatformFill } from './RankingPlatformFill';
256
+ export { default as Reblog } from './Reblog';
257
+ export { default as ReblogSlash } from './ReblogSlash';
258
+ export { default as Redo } from './Redo';
259
+ export { default as RedoBold } from './RedoBold';
260
+ export { default as Refresh } from './Refresh';
261
+ export { default as ReplyCircleFill } from './ReplyCircleFill';
262
+ export { default as ReplyFill } from './ReplyFill';
263
+ export { default as Requ } from './Requ';
264
+ export { default as Sad } from './Sad';
265
+ export { default as Saveblog } from './Saveblog';
266
+ export { default as ScreenFull } from './ScreenFull';
267
+ export { default as ScreenInline } from './ScreenInline';
268
+ export { default as Search } from './Search';
269
+ export { default as Service } from './Service';
270
+ export { default as Share } from './Share';
271
+ export { default as ShineFill } from './ShineFill';
272
+ export { default as Shirt } from './Shirt';
273
+ export { default as SidefaceClose } from './SidefaceClose';
274
+ export { default as SidefaceOpen } from './SidefaceOpen';
275
+ export { default as Smartphone } from './Smartphone';
276
+ export { default as SmartphoneFill } from './SmartphoneFill';
277
+ export { default as Sort } from './Sort';
278
+ export { default as SortFeed } from './SortFeed';
279
+ export { default as SortTile } from './SortTile';
280
+ export { default as SpeakerOffFill } from './SpeakerOffFill';
281
+ export { default as SpeakerOnFill } from './SpeakerOnFill';
282
+ export { default as Sprout } from './Sprout';
283
+ export { default as Stampside } from './Stampside';
284
+ export { default as Star } from './Star';
285
+ export { default as StarCircleFill } from './StarCircleFill';
286
+ export { default as StarFaceFill } from './StarFaceFill';
287
+ export { default as StarFill } from './StarFill';
288
+ export { default as StopFill } from './StopFill';
289
+ export { default as Strikethrough } from './Strikethrough';
290
+ export { default as Sun } from './Sun';
291
+ export { default as SunFill } from './SunFill';
292
+ export { default as Switching } from './Switching';
293
+ export { default as SwitchingCamera } from './SwitchingCamera';
294
+ export { default as TagFill } from './TagFill';
295
+ export { default as TagOfficialFill } from './TagOfficialFill';
296
+ export { default as Thumbsup } from './Thumbsup';
297
+ export { default as ThumbsupFill } from './ThumbsupFill';
298
+ export { default as Title } from './Title';
299
+ export { default as TopbloggerRibbon } from './TopbloggerRibbon';
300
+ export { default as TranscriptOff } from './TranscriptOff';
301
+ export { default as TranscriptOn } from './TranscriptOn';
302
+ export { default as Transmission } from './Transmission';
303
+ export { default as Trashcan } from './Trashcan';
304
+ export { default as Trend } from './Trend';
305
+ export { default as TrendFill } from './TrendFill';
306
+ export { default as TriangleDown } from './TriangleDown';
307
+ export { default as TriangleLeft } from './TriangleLeft';
308
+ export { default as TriangleRight } from './TriangleRight';
309
+ export { default as TriangleUp } from './TriangleUp';
310
+ export { default as TrianglearrowDown } from './TrianglearrowDown';
311
+ export { default as TrianglearrowDownright } from './TrianglearrowDownright';
312
+ export { default as TrianglearrowRight } from './TrianglearrowRight';
313
+ export { default as TrianglearrowUp } from './TrianglearrowUp';
314
+ export { default as TrianglearrowUpright } from './TrianglearrowUpright';
315
+ export { default as TriangleendLeft } from './TriangleendLeft';
316
+ export { default as TriangleendRight } from './TriangleendRight';
317
+ export { default as TrophyFill } from './TrophyFill';
318
+ export { default as TvFill } from './TvFill';
319
+ export { default as Twitter } from './Twitter';
320
+ export { default as Underline } from './Underline';
321
+ export { default as Undo } from './Undo';
322
+ export { default as UndoBold } from './UndoBold';
323
+ export { default as Wallet } from './Wallet';
324
+ export { default as Webview } from './Webview';
325
+ export { default as Youtube } from './Youtube';
@@ -0,0 +1,5 @@
1
+ import React, { forwardRef } from 'react';
2
+ const BLOCK_NAME = 'spui-IconButton';
3
+ export const IconButton = forwardRef(function IconButton({ children, size = 'large', variant = 'contained', ...rest }, ref) {
4
+ return (React.createElement("button", Object.assign({ className: `${BLOCK_NAME} ${BLOCK_NAME}--${size} ${BLOCK_NAME}--${variant}`, ref: ref }, rest), children));
5
+ });
@@ -0,0 +1 @@
1
+ export { IconButton } from './IconButton';
@@ -0,0 +1,7 @@
1
+ import React, { forwardRef } from 'react';
2
+ const BLOCK_NAME = 'spui-LinkButton';
3
+ export const LinkButton = forwardRef(function LinkButton({ children, layout = 'intrinsic', size = 'large', variant = 'contained', icon, ...rest }, ref) {
4
+ return (React.createElement("a", Object.assign({ className: `${BLOCK_NAME} ${BLOCK_NAME}--${layout} ${BLOCK_NAME}--${size} ${BLOCK_NAME}--${variant}`, ref: ref }, rest), icon ? (React.createElement(React.Fragment, null,
5
+ React.createElement("span", { className: `${BLOCK_NAME}-icon ${BLOCK_NAME}-icon--${size}` }, icon),
6
+ children)) : (children)));
7
+ });
@@ -0,0 +1 @@
1
+ export { LinkButton } from './LinkButton';
package/README.md CHANGED
@@ -37,7 +37,9 @@ function App() {
37
37
  ReactDOM.render(<App />, document.querySelector('#app'));
38
38
  ```
39
39
 
40
- 詳細は[コンポーネント一覧](#コンポーネント一覧)、[サンプルアプリケーション](#サンプルアプリケーション)を参照してください。
40
+ Spindle UIはmodule版の配信もしています。利用する際には、[導入ガイド](https://github.com/openameba/spindle/pull/175)を参考にしてください。
41
+
42
+ さらなる詳細は[コンポーネント一覧](#コンポーネント一覧)、[サンプルアプリケーション](#サンプルアプリケーション)を参照してください。
41
43
 
42
44
  > **_NOTE:_** アイコン利用時は[Spindle IconsのReactコンポーネント](/packages/spindle-icons#react)を読み、注意点を確認してください。
43
45
 
@@ -0,0 +1,67 @@
1
+ import React, { useCallback, useEffect, useRef, useState } from 'react';
2
+ export const BLOCK_NAME = 'spui-Toast';
3
+ // Duration for css animation.
4
+ export const ANIMATION_DURATION = 500;
5
+ const MIN_DURATION = 4000;
6
+ const MAX_DURATION = 100000;
7
+ const getAnimationClassName = (isShow, animation) => {
8
+ return isShow ? `${BLOCK_NAME}-${animation}--in` : '';
9
+ };
10
+ const limitDuration = (duration) => {
11
+ if (duration < MIN_DURATION || duration > MAX_DURATION) {
12
+ return MIN_DURATION;
13
+ }
14
+ return duration;
15
+ };
16
+ export const Toast = ({ children, active = false, duration = 4000, animation = 'slide', position = 'top', hasError = false, onHide, }) => {
17
+ const [isShow, setIsShow] = useState(false);
18
+ const animationClassName = getAnimationClassName(isShow, animation);
19
+ const errorContentClassName = hasError ? `${BLOCK_NAME}-content--error` : '';
20
+ const formattedDuration = limitDuration(duration) - ANIMATION_DURATION;
21
+ const timeoutID = useRef(null);
22
+ const transitionElementRef = useRef(null);
23
+ const setIsShowWithTimeout = useCallback(() => {
24
+ // Out animation is executed after `formattedDuration` seconds.
25
+ if (timeoutID.current === null && isShow) {
26
+ timeoutID.current = window.setTimeout(() => {
27
+ setIsShow(false);
28
+ }, formattedDuration);
29
+ }
30
+ }, [isShow, timeoutID, setIsShow, formattedDuration]);
31
+ const resetTimeout = useCallback(() => {
32
+ if (timeoutID.current) {
33
+ window.clearTimeout(timeoutID.current);
34
+ timeoutID.current = null;
35
+ }
36
+ }, [timeoutID]);
37
+ const handleTransitionEnd = useCallback(() => {
38
+ if (onHide && !isShow) {
39
+ onHide();
40
+ timeoutID.current = null;
41
+ }
42
+ }, [isShow, setIsShow, onHide]);
43
+ useEffect(() => {
44
+ // Animation is not stopped even if `active` props is changed while running animation.
45
+ if (active && timeoutID.current === null) {
46
+ setIsShow(true);
47
+ }
48
+ }, [active]);
49
+ useEffect(() => {
50
+ setIsShowWithTimeout();
51
+ return resetTimeout;
52
+ }, [setIsShowWithTimeout, resetTimeout]);
53
+ useEffect(() => {
54
+ const transitionElement = transitionElementRef.current;
55
+ // When out animation is finished, `onHide` method is invoked.
56
+ if (transitionElement) {
57
+ transitionElement.addEventListener('transitionend', handleTransitionEnd);
58
+ }
59
+ return () => {
60
+ if (transitionElement) {
61
+ transitionElement.removeEventListener('transitionend', handleTransitionEnd);
62
+ }
63
+ };
64
+ }, [transitionElementRef, handleTransitionEnd]);
65
+ return (React.createElement("div", { className: `${BLOCK_NAME} ${BLOCK_NAME}--${position} ${BLOCK_NAME}--${animation} ${animationClassName}`, ref: transitionElementRef },
66
+ React.createElement("div", { className: `${BLOCK_NAME}--content ${errorContentClassName}`, tabIndex: 0, onMouseOver: resetTimeout, onMouseOut: setIsShowWithTimeout, onFocus: resetTimeout, onBlur: setIsShowWithTimeout }, children)));
67
+ };
@@ -0,0 +1 @@
1
+ export { Toast } from './Toast';
package/index.css CHANGED
@@ -1 +1 @@
1
- :root{--ameba-green:#2d8c3c;--ameba-black:#000;--ameba-yellow-green:#82be28;--ameba-neutral-gray:#f6f6f6;--ameba-white:#fff;--ameba-yellow:#f5e100;--primary-green-100:#0f5c1f;--primary-green-90:#186b27;--primary-green-80:#237b31;--primary-green-70:#298737;--primary-green-60:#389e46;--primary-green-50:#41ad4f;--primary-green-40:#5eb969;--primary-green-30:#7bc583;--primary-green-20:#a1d5a7;--primary-green-10:#c6e5c9;--primary-green-5:#e7f5e9;--secondary-green-100:#366600;--secondary-green-90:#427504;--secondary-green-80:#477d00;--secondary-green-70:#5e9b15;--secondary-green-60:#73ae20;--secondary-green-50:#82be28;--secondary-green-40:#95c84d;--secondary-green-30:#a9d16f;--secondary-green-20:#c2de99;--secondary-green-10:#daebc1;--secondary-green-5:#f0f7e6;--gray-100:#08121a;--gray-90-alpha:rgba(8,18,26,0.95);--gray-80-alpha:rgba(8,18,26,0.8);--gray-70-alpha:rgba(8,18,26,0.74);--gray-60-alpha:rgba(8,18,26,0.61);--gray-50-alpha:rgba(8,18,26,0.47);--gray-40-alpha:rgba(8,18,26,0.4);--gray-30-alpha:rgba(8,18,26,0.3);--gray-20-alpha:rgba(8,18,26,0.16);--gray-10-alpha:rgba(8,18,26,0.08);--gray-5-alpha:rgba(8,18,26,0.04);--gray-90:#141e25;--gray-80:#394148;--gray-70:#464d53;--gray-60:#686e73;--gray-50:#8b9093;--gray-40:#9ca0a3;--gray-30:#b5b8ba;--gray-20:#d8d9da;--gray-10:#ebeced;--gray-5:#f5f6f6;--white-100:#fff;--white-90-alpha:hsla(0,0%,100%,0.9);--white-80-alpha:hsla(0,0%,100%,0.8);--white-70-alpha:hsla(0,0%,100%,0.7);--white-60-alpha:hsla(0,0%,100%,0.6);--white-50-alpha:hsla(0,0%,100%,0.5);--white-40-alpha:hsla(0,0%,100%,0.43);--white-30-alpha:hsla(0,0%,100%,0.3);--white-20-alpha:hsla(0,0%,100%,0.16);--white-10-alpha:hsla(0,0%,100%,0.1);--white-5-alpha:hsla(0,0%,100%,0.05);--black-100:#000;--black-90-alpha:rgba(0,0,0,0.9);--black-80-alpha:rgba(0,0,0,0.8);--black-70-alpha:rgba(0,0,0,0.7);--black-60-alpha:rgba(0,0,0,0.6);--black-50-alpha:rgba(0,0,0,0.5);--black-40-alpha:rgba(0,0,0,0.4);--black-30-alpha:rgba(0,0,0,0.3);--black-20-alpha:rgba(0,0,0,0.2);--black-10-alpha:rgba(0,0,0,0.1);--black-5-alpha:rgba(0,0,0,0.05);--caution-red-100:#d91c0b;--caution-red-20-alpha:rgba(217,28,11,0.2);--caution-red-5-alpha:rgba(217,28,11,0.05);--caution-red-vivid-100:#ff6a59;--caution-red-vivid-20-alpha:rgba(255,106,89,0.2);--caution-red-vivid-5-alpha:rgba(255,106,89,0.05);--expressive-blue:#4795c8;--expressive-green:#4ac3aa;--expressive-purple:#ca5ce6;--expressive-lavender:#755ce6;--expressive-orange:#e6815c;--expressive-yellow:#e6ac5c;--expressive-pink:#e6456a;--facebook-blue:#1877f2;--twitter-blue:#1da1f2;--instagram-pink:#f20076;--focus-blue-100:#0091ff;--focus-blue-30-alpha:rgba(0,145,255,0.3);--color-background:var(--gray-5);--color-surface-primary:var(--white-100);--color-surface-secondary:var(--gray-5);--color-surface-tertiary:var(--gray-10-alpha);--color-surface-quaternary:var(--gray-20-alpha);--color-surface-accent-primary:var(--primary-green-70);--color-surface-accent-primary-light:var(--primary-green-5);--color-surface-accent-secondary:var(--secondary-green-50);--color-surface-accent-secondary-light:var(--secondary-green-5);--color-surface-caution:var(--caution-red-100);--color-surface-caution-light:var(--caution-red-5-alpha);--color-text-high-emphasis:var(--gray-100);--color-text-medium-emphasis:var(--gray-70-alpha);--color-text-low-emphasis:var(--gray-60-alpha);--color-text-disabled:var(--gray-30-alpha);--color-text-high-emphasis-inverse:var(--white-100);--color-text-accent-primary:var(--primary-green-80);--color-text-accent-secondary:var(--secondary-green-70);--color-text-caution:var(--caution-red-100);--color-highlight-error:var(--caution-red-20);--color-highlight-hover:var(--black-30-alpha);--color-object-high-emphasis:var(--gray-100);--color-object-medium-emphasis:var(--gray-70-alpha);--color-object-low-emphasis:var(--gray-60-alpha);--color-object-disable:var(--gray-30-alpha);--color-object-accent-primary:var(--primary-green-70);--color-object-accent-secondary:var(--secondary-green-70);--color-object-caution:var(--caution-red-100);--color-object-high-emphasis-inverse:var(--white-100);--color-focus-clarity:var(--focus-blue-100);--color-focus-ambiguous:var(--focus-blue-30-alpha);--color-border-high-emphasis:var(--gray-60-alpha);--color-border-medium-emphasis:var(--gray-30-alpha);--color-border-low-emphasis:var(--gray-10-alpha);--color-border-accent-primary:var(--primary-green-70);--color-border-high-emphasis-inverse:var(--white-100);--color-border-caution:var(--caution-red-100);--color-third-party-facebook-blue:var(--facebook-blue);--color-third-party-twitter-blue:var(--twitter-blue);--color-third-party-instagram-pink:var(--instagram-pink)}.spui-Breadcrumb{background:var(--color-surface-secondary);border-radius:70px;display:inline-block;overflow:hidden;padding:0 16px}.spui-Breadcrumb-list{align-items:center;display:flex;list-style:none;margin:0;padding:0}.spui-Breadcrumb-item{align-items:center;display:flex;min-height:56px}.spui-Breadcrumb a{align-items:center;border-radius:4px;display:flex;letter-spacing:.1em;line-height:1.3;padding:4px 8px;position:relative;text-decoration:none}.spui-Breadcrumb a:not([aria-current]){color:var(--color-text-accent-primary);font-weight:700}.spui-Breadcrumb a[aria-current]{color:var(--color-text-low-emphasis);font-weight:400}.spui-Breadcrumb a:before{border-radius:4px;content:"";left:0;min-height:56px;position:absolute;top:-50%;width:100%}.spui-Breadcrumb a:hover{text-decoration:underline}.spui-Breadcrumb a:focus{box-shadow:0 0 0 1px var(--color-surface-secondary),0 0 0 3px var(--color-focus-clarity);outline:none}.spui-Breadcrumb a:focus:not(:focus-visible){box-shadow:none}.spui-Breadcrumb-chevron{color:var(--color-object-low-emphasis);height:16px;padding:0 4px;width:16px}.spui-Breadcrumb-item:last-of-type>.spui-Breadcrumb-chevron{display:none;padding:0}@media screen and (max-width:375px){.spui-Breadcrumb{padding:0 14px}.spui-Breadcrumb-item{min-height:40px}.spui-Breadcrumb a{font-size:.8125em;padding:2px 6px}.spui-Breadcrumb a:not([aria-current]):before{min-height:40px}.spui-Breadcrumb-chevron{height:12px;padding:0 2px;width:12px}}:root{--Button-tapHighlightColor:var(--gray-5-alpha);--Button-onFocus-boxShadow:0 0 0 1px var(--color-surface-primary),0 0 0 3px var(--color-focus-clarity);--Button--contained-backgroundColor:var(--color-surface-accent-primary);--Button--contained-color:var(--color-text-high-emphasis-inverse);--Button--contained-onActive-backgroundColor:var(--primary-green-100);--Button--contained-onHover-backgroundColor:var(--primary-green-100);--Button--outlined-borderColor:var(--color-border-accent-primary);--Button--outlined-color:var(--color-text-accent-primary);--Button--outlined-onActive-backgroundColor:var(--primary-green-5);--Button--outlined-onHover-backgroundColor:var(--primary-green-5);--Button--lighted-backgroundColor:var(--color-surface-accent-primary-light);--Button--lighted-color:var(--color-text-accent-primary);--Button--lighted-onActive-backgroundColor:var(--primary-green-10);--Button--lighted-onHover-backgroundColor:var(--primary-green-10);--Button--neutral-backgroundColor:var(--color-surface-tertiary);--Button--neutral-color:var(--color-text-medium-emphasis);--Button--neutral-onActive-backgroundColor:var(--gray-20-alpha);--Button--neutral-onHover-backgroundColor:var(--gray-20-alpha);--Button--danger-borderColor:var(--color-border-caution);--Button--danger-color:var(--color-text-caution);--Button--danger-onActive-backgroundColor:var(--caution-red-5-alpha);--Button--danger-onHover-backgroundColor:var(--caution-red-5-alpha)}.spui-Button{align-items:center;box-sizing:border-box;display:inline-flex;font-family:inherit;font-weight:700;justify-content:center;line-height:1.3;margin:0;-webkit-tap-highlight-color:var(--Button-tapHighlightColor);text-align:center;transition:background-color .3s}.spui-Button:disabled{opacity:.3}.spui-Button:focus{box-shadow:var(--Button-onFocus-boxShadow);outline:none}.spui-Button:focus:not(:focus-visible){box-shadow:none}.spui-Button--fullWidth{width:100%}.spui-Button--large{border-radius:3em;font-size:1em;min-height:48px;padding-left:16px;padding-right:16px}.spui-Button--medium{border-radius:2.85714em;font-size:.875em;min-height:40px;padding-left:16px;padding-right:16px}.spui-Button--small{border-radius:2.46154em;font-size:.8125em;min-height:32px;padding-left:10px;padding-right:10px}@media (-ms-high-contrast:active),(-ms-high-contrast:none){.spui-Button--large,.spui-Button--medium,.spui-Button--small{height:1px}}.spui-Button--contained{background-color:var(--Button--contained-backgroundColor);border:none;color:var(--Button--contained-color);padding-bottom:8px;padding-top:8px}.spui-Button--contained:active{background-color:var(--Button--contained-onActive-backgroundColor)}@media (hover:hover){.spui-Button--contained:not([disabled]):hover{background-color:var(--Button--contained-onHover-backgroundColor)}}.spui-Button--outlined{background-color:transparent;border:2px solid var(--Button--outlined-borderColor);color:var(--Button--outlined-color);padding-bottom:6px;padding-top:6px}.spui-Button--outlined:active{background-color:var(--Button--outlined-onActive-backgroundColor)}@media (hover:hover){.spui-Button--outlined:not([disabled]):hover{background-color:var(--Button--outlined-onHover-backgroundColor)}}.spui-Button--lighted{background-color:var(--Button--lighted-backgroundColor);border:none;color:var(--Button--lighted-color);padding-bottom:8px;padding-top:8px}.spui-Button--lighted:active{background-color:var(--Button--lighted-onActive-backgroundColor)}@media (hover:hover){.spui-Button--lighted:not([disabled]):hover{background-color:var(--Button--lighted-onHover-backgroundColor)}}.spui-Button--neutral{background-color:var(--Button--neutral-backgroundColor);border:none;color:var(--Button--neutral-color);padding-bottom:8px;padding-top:8px}.spui-Button--neutral:active{background-color:var(--Button--neutral-onActive-backgroundColor)}@media (hover:hover){.spui-Button--neutral:not([disabled]):hover{background-color:var(--Button--neutral-onHover-backgroundColor)}}.spui-Button--danger{background-color:transparent;border:2px solid var(--Button--danger-borderColor);color:var(--Button--danger-color);padding-bottom:6px;padding-top:6px}.spui-Button--danger:active{background-color:var(--Button--danger-onActive-backgroundColor)}@media (hover:hover){.spui-Button--danger:not([disabled]):hover{background-color:var(--Button--danger-onHover-backgroundColor)}}.spui-Button-icon{line-height:0}.spui-Button-icon--large{font-size:1.375em;margin-right:6px}.spui-Button-icon--medium{font-size:1.429em;margin-right:4px}.spui-Button-icon--small{font-size:1.23em;margin-right:2px}.spui-ButtonGroup{display:flex}.spui-ButtonGroup--row{flex-direction:row}.spui-ButtonGroup--column{flex-direction:column}.spui-ButtonGroup--large.spui-ButtonGroup--row>*{margin-right:16px}.spui-ButtonGroup--large.spui-ButtonGroup--row>:last-child{margin-right:0}.spui-ButtonGroup--large.spui-ButtonGroup--column>*{margin-bottom:16px}.spui-ButtonGroup--large.spui-ButtonGroup--column>:last-child{margin-bottom:0}.spui-ButtonGroup--medium.spui-ButtonGroup--row>*{margin-right:12px}.spui-ButtonGroup--medium.spui-ButtonGroup--row>:last-child{margin-right:0}.spui-ButtonGroup--medium.spui-ButtonGroup--column>*{margin-bottom:12px}.spui-ButtonGroup--medium.spui-ButtonGroup--column>:last-child{margin-bottom:0}.spui-ButtonGroup--small.spui-ButtonGroup--row>*{margin-right:8px}.spui-ButtonGroup--small.spui-ButtonGroup--row>:last-child{margin-right:0}.spui-ButtonGroup--small.spui-ButtonGroup--column>*{margin-bottom:12px}.spui-ButtonGroup--small.spui-ButtonGroup--column>:last-child{margin-bottom:0}.spui-Checkbox-label{align-items:center;border-radius:2px;color:var(--color-text-low-emphasis);display:inline-flex;font-size:1em;font-weight:700;line-height:1;position:relative}.spui-Checkbox-input{clip:rect(1px,1px,1px,1px);height:1px;margin-top:0;overflow:hidden;position:absolute;width:1px}.spui-Checkbox-icon{align-items:center;border:1px solid var(--color-border-medium-emphasis);border-radius:4px;box-sizing:border-box;color:transparent;display:inline-flex;font-size:.875em;height:18px;justify-content:center;width:18px}.spui-Checkbox-input:checked+.spui-Checkbox-icon{background-color:var(--color-object-accent-primary);border:1px solid var(--color-object-accent-primary);color:var(--color-text-high-emphasis-inverse)}.spui-Checkbox-input:disabled+.spui-Checkbox-icon{opacity:.3}.spui-Checkbox-outline{border-radius:2px;bottom:-2px;height:22px;left:-2px;position:absolute;right:-2px;top:-2px;width:22px}.spui-Checkbox-input:focus~.spui-Checkbox-outline{box-shadow:0 0 0 2px var(--color-focus-clarity)}.spui-Checkbox-input:focus:not(:focus-visible)~.spui-Checkbox-outline{box-shadow:none}.spui-Checkbox-text:not(:empty){margin-left:8px}.spui-Checkbox-input:checked~.spui-Checkbox-text{color:var(--color-object-accent-primary)}.spui-Checkbox-input:disabled~.spui-Checkbox-text{color:var(--color-text-disabled)}.spui-DropDown-label{display:inline-block;position:relative}.spui-DropDown-select{-webkit-appearance:listitem;margin:0;opacity:0;outline:none}.spui-DropDown-select,.spui-DropDown-visual{box-sizing:border-box;font-size:1em;min-height:40px;padding:.5em calc(40px + 1em) .5em 1em}.spui-DropDown-visual{align-items:center;border:1px solid var(--color-border-medium-emphasis);border-radius:8px;color:var(--color-text-disabled);display:flex;height:100%;left:0;position:absolute;top:0;width:100%}.spui-DropDown-label.is-active .spui-DropDown-visual{color:var(--color-text-high-emphasis)}.spui-DropDown-icon{align-items:center;background-color:var(--color-surface-secondary);border:1px solid var(--color-border-medium-emphasis);border-bottom-right-radius:8px;border-top-right-radius:8px;box-sizing:border-box;color:var(--color-object-low-emphasis);display:flex;height:100%;justify-content:center;position:absolute;right:0;top:0;width:40px}.spui-DropDown-outline{border-radius:8px;display:inline-block;height:100%;left:0;pointer-events:none;position:absolute;top:0;width:100%}.spui-DropDown-select:focus~.spui-DropDown-outline{border-color:var(--color-border-high-emphasis);box-shadow:0 0 0 3px var(--color-focus-ambiguous)}.spui-DropDown-select:focus:not(:focus-visible)~.spui-DropDown-outline{border-color:var(--color-border-medium-emphasis);box-shadow:none}.spui-DropDown-label.is-error .spui-DropDown-icon,.spui-DropDown-label.is-error .spui-DropDown-visual{background-color:var(--color-surface-caution-light);border-color:var(--color-border-caution)}.spui-InlineDropDown-label{display:inline-block;position:relative}.spui-InlineDropDown-select{-webkit-appearance:listitem;box-sizing:border-box;font-size:1em;margin:0;opacity:0;outline:none;position:absolute;top:0;width:100%}.spui-InlineDropDown-select--medium{min-height:40px}.spui-InlineDropDown-select--small{min-height:32px}.spui-InlineDropDown-text,.spui-InlineDropDown-visual{border-radius:8px;display:flex}.spui-InlineDropDown-text{align-items:center;box-sizing:border-box;color:var(--color-text-medium-emphasis);font-weight:700;height:100%;left:0;padding:.5em 0}.spui-InlineDropDown-text--medium{font-size:.875em;min-height:40px}.spui-InlineDropDown-text--small{font-size:.8125em;min-height:32px}.spui-InlineDropDown-icon{align-items:center;background-color:transparent;border-bottom-right-radius:8px;border-top-right-radius:8px;box-sizing:border-box;color:var(--color-object-medium-emphasis);display:flex;justify-content:center;margin-left:4px}.spui-InlineDropDown-icon--medium{font-size:.875em}.spui-InlineDropDown-icon--small{font-size:.8125em}.spui-InlineDropDown-outline{border-radius:8px;display:inline-block;height:100%;left:0;pointer-events:none;position:absolute;top:0;width:100%}.spui-InlineDropDown-select:focus~.spui-InlineDropDown-outline{border-color:var(--color-border-medium-emphasis);box-shadow:0 0 0 3px var(--color-focus-ambiguous)}.spui-InlineDropDown-select:focus:not(:focus-visible)~.spui-InlineDropDown-outline{border-color:var(--color-border-medium-emphasis);box-shadow:none}.spui-InputLabel{color:var(--color-text-medium-emphasis);display:block;font-size:.875em;font-weight:700;line-height:1.4}.spui-InputLabel:empty{display:none}.spui-InvalidMessage{color:var(--color-text-caution);display:flex;font-size:.75em;font-weight:700;line-height:1.4;margin:8px 0 0;min-height:1.1em;transition:height .3s}.spui-InvalidMessage[hidden]{display:none}.spui-InvalidMessage-icon{font-size:1.33em;line-height:1;margin-right:.25em}.spui-InvalidMessage-body{position:relative;top:1px}.spui-Radio-label{align-items:center;border-radius:2px;color:var(--color-text-low-emphasis);display:inline-flex;font-size:1em;font-weight:700;line-height:1;position:relative}.spui-Radio-input{clip:rect(1px,1px,1px,1px);height:1px;margin-top:0;overflow:hidden;position:absolute;width:1px}.spui-Radio-icon{align-items:center;border:1px solid var(--color-border-medium-emphasis);border-radius:50%;box-sizing:border-box;color:transparent;display:inline-flex;font-size:.875em;height:20px;justify-content:center;vertical-align:top;width:20px}.spui-Radio-input:checked+.spui-Radio-icon{background-color:var(--color-object-accent-primary);border:1px solid var(--color-object-accent-primary);color:var(--color-text-high-emphasis-inverse)}.spui-Radio-input:disabled+.spui-Radio-icon{opacity:.3}.spui-Radio-outline{border-radius:50%;bottom:-2px;height:24px;left:-2px;position:absolute;right:-2px;top:-2px;width:24px}.spui-Radio-input:focus~.spui-Radio-outline{box-shadow:0 0 0 2px var(--color-focus-clarity)}.spui-Radio-input:focus:not(:focus-visible)~.spui-Radio-outline{box-shadow:none}.spui-Radio-text:not(:empty){margin-left:8px}.spui-Radio-input:checked~.spui-Radio-text{color:var(--color-object-accent-primary)}.spui-Radio-input:disabled~.spui-Radio-text{color:var(--color-text-disabled)}.spui-TextArea{background-color:var(--color-surface-primary);border:1px solid var(--color-border-medium-emphasis);border-radius:8px;box-sizing:border-box;color:var(--color-text-high-emphasis);font-size:1em;line-height:1.4;margin:0;min-height:92px;outline:none;padding:12px 16px;transition:box-shadow .3s;width:100%}@media (prefers-reduced-motion:reduce){.spui-TextArea{transition:box-shadow .1ms}}.spui-TextArea::placeholder{color:var(--color-text-disabled)}.spui-TextArea:focus{border-color:var(--color-border-high-emphasis);box-shadow:0 0 0 3px var(--color-focus-ambiguous)}.spui-TextArea:focus:not(:focus-visible){border-color:var(--color-border-medium-emphasis);box-shadow:none}.spui-TextArea.is-error{background-color:var(--color-surface-caution-light);border-color:var(--color-border-caution)}.spui-TextField{background-color:var(--color-surface-primary);border:1px solid var(--color-border-medium-emphasis);border-radius:8px;box-sizing:border-box;color:var(--color-text-high-emphasis);font-size:1em;margin:0;outline:none;padding:0 16px;transition:box-shadow .3s;width:100%}@media (prefers-reduced-motion:reduce){.spui-TextField{transition:box-shadow .1ms}}.spui-TextField::placeholder{color:var(--color-text-disabled)}.spui-TextField:focus{border-color:var(--color-border-high-emphasis);box-shadow:0 0 0 3px var(--color-focus-ambiguous)}.spui-TextField:focus:not(:focus-visible){border-color:var(--color-border-medium-emphasis);box-shadow:none}.spui-TextField.is-error{background-color:var(--color-surface-caution-light);border-color:var(--color-border-caution)}.spui-TextField--large{min-height:48px}.spui-TextField--medium{min-height:40px}.spui-ToggleSwitch{display:inline-block;height:32px;position:relative;width:52px}.spui-ToggleSwitch-input{opacity:0;outline:none}.spui-ToggleSwitch-input:disabled~.spui-ToggleSwitch-visual{opacity:.3}.spui-ToggleSwitch-visual{background-color:var(--color-surface-quaternary);border-radius:16px;box-sizing:border-box;display:inline-block;height:100%;left:0;position:absolute;top:0;width:100%}.spui-ToggleSwitch-input:checked~.spui-ToggleSwitch-visual{background-color:var(--color-surface-accent-primary)}.spui-ToggleSwitch-visual:before{background-color:var(--color-object-high-emphasis-inverse);border:1px solid var(--color-border-low-emphasis);border-radius:100%;box-sizing:border-box;content:"";display:inline-block;height:24px;left:4px;position:absolute;top:4px;transition:transform .3s ease-out;width:24px}.spui-ToggleSwitch-input:checked~.spui-ToggleSwitch-visual:before{transform:translate(20px)}.spui-ToggleSwitch-outline{border-radius:16px;bottom:-2px;left:-2px;position:absolute;right:-2px;top:-2px;z-index:-1}.spui-ToggleSwitch-input:focus~.spui-ToggleSwitch-outline{box-shadow:0 0 0 2px var(--color-focus-clarity)}.spui-ToggleSwitch-input:focus:not(:focus-visible)~.spui-ToggleSwitch-outline{box-shadow:none}:root{--HeroCarouselItem-onFocus-boxShadow:0 0 0 1px var(--color-surface-primary),0 0 0 3px var(--color-focus-clarity)}.spui-HeroCarouselItem-listItem{list-style:none;padding:0 .44em;width:100%}.spui-HeroCarouselItem-link{border:1px solid var(--color-border-low-emphasis);border-radius:12px;box-sizing:border-box;display:flex;flex-direction:column;height:12em;text-decoration:none;width:17.5em}.spui-HeroCarouselItem-link:focus{box-shadow:var(--HeroCarouselItem-onFocus-boxShadow);outline:none}.spui-HeroCarouselItem-link:focus:not(:focus-visible){box-shadow:none}.spui-HeroCarouselItem-imageBlock{align-items:center;border-bottom:1px solid var(--color-border-low-emphasis);border-radius:12px 12px 0 0;display:flex;height:9.5em;justify-content:center;overflow:hidden}.spui-HeroCarouselItem-image{height:100%;object-fit:cover;width:100%}.spui-HeroCarouselItem-titleContainer{align-items:center;box-sizing:border-box;display:flex;height:2.89em;justify-content:center;padding:0 .5em}.spui-HeroCarouselItem-title{color:var(--color-text-high-emphasis);font-size:.9375em;font-weight:700;margin:0;overflow:hidden;text-align:center;text-overflow:ellipsis;white-space:nowrap}@media screen and (min-width:768px){.spui-HeroCarouselItem-listItem{padding:0 .75em}.spui-HeroCarouselItem-link{height:13.8em;width:20em}.spui-HeroCarouselItem-titleContainer{height:3.3em}.spui-HeroCarouselItem-title{font-size:1em}.spui-HeroCarouselItem-imageBlock{height:10.9em}}:root{--HeroCarousel-onFocus-boxShadow:0 0 0 1px var(--color-surface-primary),0 0 0 3px var(--color-focus-clarity)}.spui-HeroCarousel-container{align-items:center;display:flex;height:12.5em;justify-content:center;overflow:hidden}.spui-HeroCarousel-list{display:flex;margin-right:.88em;padding:0 .44em;transition:transform .5s;width:17.5em}.spui-HeroCarousel-controls{align-items:center;border:1px solid var(--color-border-low-emphasis);border-radius:100px;display:flex;height:2.5em;margin:.88em auto 0;width:7.63em}.spui-HeroCarousel-control{align-items:center;background-color:transparent;border:none;display:flex;font-size:1em;height:100%;justify-content:center;padding:0;width:33.33333%}.spui-HeroCarousel-control:hover{opacity:.7}.spui-HeroCarousel-control:focus{box-shadow:var(--HeroCarousel-onFocus-boxShadow);outline:none}.spui-HeroCarousel-control:focus:not(:focus-visible){box-shadow:none}.spui-HeroCarousel-control--prev{border-radius:100px 0 0 100px;border-right:1px solid var(--color-border-low-emphasis)}.spui-HeroCarousel-control--next{border-left:1px solid var(--color-border-low-emphasis);border-radius:0 100px 100px 0}@media (prefers-reduced-motion:reduce){.spui-HeroCarousel-list{transition:1ms}}@media screen and (min-width:768px){.spui-HeroCarousel-container{height:14.3em}.spui-HeroCarousel-list{margin-right:1.5em;padding:0 .75em;width:20em}.spui-HeroCarousel-controls{height:2.75em;margin-top:1.25em;width:8.38em}}.spui-HeroCarousel-control>svg{color:var(--color-text-low-emphasis);height:1.13em;width:1.13em}@media screen and (min-width:768px){.spui-HeroCarousel-control>svg{height:1.25em;width:1.25em}}:root{--IconButton-tapHighlightColor:var(--gray-5-alpha);--IconButton-onFocus-boxShadow:0 0 0 1px var(--color-surface-primary),0 0 0 3px var(--color-focus-clarity);--IconButton--contained-backgroundColor:var(--color-surface-accent-primary);--IconButton--contained-color:var(--color-object-high-emphasis-inverse);--IconButton--contained-onActive-backgroundColor:var(--primary-green-100);--IconButton--contained-onHover-backgroundColor:var(--primary-green-100);--IconButton--outlined-borderColor:var(--color-border-accent-primary);--IconButton--outlined-color:var(--color-object-accent-primary);--IconButton--outlined-onActive-backgroundColor:var(--primary-green-5);--IconButton--outlined-onHover-backgroundColor:var(--primary-green-5);--IconButton--lighted-backgroundColor:var(--color-surface-accent-primary-light);--IconButton--lighted-color:var(--color-object-accent-primary);--IconButton--lighted-onActive-backgroundColor:var(--primary-green-10);--IconButton--lighted-onHover-backgroundColor:var(--primary-green-10);--IconButton--neutral-backgroundColor:var(--color-surface-tertiary);--IconButton--neutral-color:var(--color-object-medium-emphasis);--IconButton--neutral-onActive-backgroundColor:var(--gray-20-alpha);--IconButton--neutral-onHover-backgroundColor:var(--gray-20-alpha);--IconButton--danger-borderColor:var(--color-border-caution);--IconButton--danger-color:var(--color-object-caution);--IconButton--danger-onActive-backgroundColor:var(--caution-red-5-alpha);--IconButton--danger-onHover-backgroundColor:var(--caution-red-5-alpha)}.spui-IconButton{align-items:center;border-radius:100%;box-sizing:border-box;display:inline-flex;justify-content:center;margin:0;-webkit-tap-highlight-color:var(--IconButton-tapHighlightColor);text-align:center;transition:background-color .3s}.spui-IconButton:disabled{opacity:.3}.spui-IconButton:focus{box-shadow:var(--IconButton-onFocus-boxShadow);outline:none}.spui-IconButton:focus:not(:focus-visible){box-shadow:none}.spui-IconButton--large{font-size:1.375em;height:48px;width:48px}.spui-IconButton--medium{font-size:1.25em;height:40px;width:40px}.spui-IconButton--small{font-size:1em;height:32px;width:32px}.spui-IconButton--exSmall{font-size:1em;height:24px;width:24px}.spui-IconButton--contained{background-color:var(--IconButton--contained-backgroundColor);border:none;color:var(--IconButton--contained-color)}.spui-IconButton--contained:active{background-color:var(--IconButton--contained-onActive-backgroundColor)}@media (hover:hover){.spui-IconButton--contained:not([disabled]):hover{background-color:var(--IconButton--contained-onHover-backgroundColor)}}.spui-IconButton--outlined{background-color:transparent;border:2px solid var(--IconButton--outlined-borderColor);color:var(--IconButton--outlined-color)}.spui-IconButton--outlined:active{background-color:var(--IconButton--outlined-onActive-backgroundColor)}@media (hover:hover){.spui-IconButton--outlined:not([disabled]):hover{background-color:var(--IconButton--outlined-onHover-backgroundColor)}}.spui-IconButton--lighted{background-color:var(--IconButton--lighted-backgroundColor);border:none;color:var(--IconButton--lighted-color);padding-bottom:8px;padding-top:8px}.spui-IconButton--lighted:active{background-color:var(--IconButton--lighted-onActive-backgroundColor)}@media (hover:hover){.spui-IconButton--lighted:not([disabled]):hover{background-color:var(--IconButton--lighted-onHover-backgroundColor)}}.spui-IconButton--neutral{background-color:var(--IconButton--neutral-backgroundColor);border:none;color:var(--IconButton--neutral-color)}.spui-IconButton--neutral:active{background-color:var(--IconButton--neutral-onActive-backgroundColor)}@media (hover:hover){.spui-IconButton--neutral:not([disabled]):hover{background-color:var(--IconButton--neutral-onHover-backgroundColor)}}.spui-IconButton--danger{background-color:transparent;border:2px solid var(--IconButton--danger-borderColor);color:var(--IconButton--danger-color)}.spui-IconButton--danger:active{background-color:var(--IconButton--danger-onActive-backgroundColor)}@media (hover:hover){.spui-IconButton--danger:hover{background-color:var(--IconButton--danger-onHover-backgroundColor)}}:root{--LinkButton-tapHighlightColor:var(--gray-5-alpha);--LinkButton-onFocus-boxShadow:0 0 0 1px var(--color-surface-primary),0 0 0 3px var(--color-focus-clarity);--LinkButton--contained-backgroundColor:var(--color-surface-accent-primary);--LinkButton--contained-color:var(--color-text-high-emphasis-inverse);--LinkButton--contained-onActive-backgroundColor:var(--primary-green-100);--LinkButton--contained-onHover-backgroundColor:var(--primary-green-100);--LinkButton--outlined-borderColor:var(--color-border-accent-primary);--LinkButton--outlined-color:var(--color-text-accent-primary);--LinkButton--outlined-onActive-backgroundColor:var(--primary-green-5);--LinkButton--outlined-onHover-backgroundColor:var(--primary-green-5);--LinkButton--lighted-backgroundColor:var(--color-surface-accent-primary-light);--LinkButton--lighted-color:var(--color-text-accent-primary);--LinkButton--lighted-onActive-backgroundColor:var(--primary-green-10);--LinkButton--lighted-onHover-backgroundColor:var(--primary-green-10);--LinkButton--neutral-backgroundColor:var(--color-surface-tertiary);--LinkButton--neutral-color:var(--color-text-medium-emphasis);--LinkButton--neutral-onActive-backgroundColor:var(--gray-20-alpha);--LinkButton--neutral-onHover-backgroundColor:var(--gray-20-alpha);--LinkButton--danger-borderColor:var(--color-border-caution);--LinkButton--danger-color:var(--color-text-caution);--LinkButton--danger-onActive-backgroundColor:var(--caution-red-5-alpha);--LinkButton--danger-onHover-backgroundColor:var(--caution-red-5-alpha)}.spui-LinkButton{align-items:center;box-sizing:border-box;display:inline-flex;font-family:inherit;font-weight:700;justify-content:center;line-height:1.3;-webkit-tap-highlight-color:var(--LinkButton-tapHighlightColor);text-align:center;text-decoration:none;transition:background-color .3s}.spui-LinkButton:focus{box-shadow:var(--LinkButton-onFocus-boxShadow);outline:none}.spui-LinkButton:focus:not(:focus-visible){box-shadow:none}.spui-LinkButton--fullWidth{width:100%}.spui-LinkButton--large{border-radius:3em;font-size:1em;min-height:48px;padding-left:16px;padding-right:16px}.spui-LinkButton--medium{border-radius:2.85714em;font-size:.875em;min-height:40px;padding-left:16px;padding-right:16px}.spui-LinkButton--small{border-radius:2.46154em;font-size:.8125em;min-height:32px;padding-left:10px;padding-right:10px}@media (-ms-high-contrast:active),(-ms-high-contrast:none){.spui-LinkButton--large,.spui-LinkButton--medium,.spui-LinkButton--small{height:1px}}.spui-LinkButton--contained{background-color:var(--LinkButton--contained-backgroundColor);border:none;color:var(--LinkButton--contained-color);padding-bottom:8px;padding-top:8px}.spui-LinkButton--contained:active{background-color:var(--LinkButton--contained-onActive-backgroundColor)}@media (hover:hover){.spui-LinkButton--contained:hover{background-color:var(--LinkButton--contained-onHover-backgroundColor)}}.spui-LinkButton--outlined{background-color:transparent;border:2px solid var(--LinkButton--outlined-borderColor);color:var(--LinkButton--outlined-color);padding-bottom:6px;padding-top:6px}.spui-LinkButton--outlined:active{background-color:var(--LinkButton--outlined-onActive-backgroundColor)}@media (hover:hover){.spui-LinkButton--outlined:hover{background-color:var(--LinkButton--outlined-onHover-backgroundColor)}}.spui-LinkButton--lighted{background-color:var(--LinkButton--lighted-backgroundColor);border:none;color:var(--LinkButton--lighted-color);padding-bottom:8px;padding-top:8px}.spui-LinkButton--lighted:active{background-color:var(--LinkButton--lighted-onActive-backgroundColor)}@media (hover:hover){.spui-LinkButton--lighted:hover{background-color:var(--LinkButton--lighted-onHover-backgroundColor)}}.spui-LinkButton--neutral{background-color:var(--LinkButton--neutral-backgroundColor);border:none;color:var(--LinkButton--neutral-color);padding-bottom:8px;padding-top:8px}.spui-LinkButton--neutral:active{background-color:var(--LinkButton--neutral-onActive-backgroundColor)}@media (hover:hover){.spui-LinkButton--neutral:hover{background-color:var(--LinkButton--neutral-onHover-backgroundColor)}}.spui-LinkButton--danger{background-color:transparent;border:2px solid var(--LinkButton--danger-borderColor);color:var(--LinkButton--danger-color);padding-bottom:6px;padding-top:6px}.spui-LinkButton--danger:active{background-color:var(--LinkButton--danger-onActive-backgroundColor)}@media (hover:hover){.spui-LinkButton--danger:hover{background-color:var(--LinkButton--danger-onHover-backgroundColor)}}.spui-LinkButton-icon{line-height:0}.spui-LinkButton-icon--large{font-size:1.375em;margin-right:6px}.spui-LinkButton-icon--medium{font-size:1.429em;margin-right:4px}.spui-LinkButton-icon--small{font-size:1.23em;margin-right:2px}:root{--Toast-z-index:1}.spui-Toast{left:0;position:fixed;right:0;text-align:center;z-index:var(--Toast-z-index)}.spui-Toast--content{background-color:var(--color-surface-accent-primary-light);border-radius:40px;box-shadow:0 4.75px 14.25px rgba(8,18,26,.12);box-sizing:border-box;color:var(--color-text-accent-primary);cursor:default;display:inline-block;font-family:inherit;font-size:16px;font-weight:700;margin:0;padding:11px 16px}.spui-Toast-content--error{background-color:var(--color-surface-caution-light);color:var(--color-text-caution);position:relative}.spui-Toast-content--error:before{background-color:var(--color-surface-primary);border-radius:40px;content:"";height:100%;left:0;position:absolute;top:0;width:100%;z-index:-1}.spui-Toast--top{top:16px}.spui-Toast--bottom{bottom:0}.spui-Toast--slide{transform:translateY(-100px);transition:transform .5s ease}.spui-Toast-slide--in{transform:translateY(0)}@media (prefers-reduced-motion:reduce){.spui-Toast--slide{transition-duration:.1ms}}
1
+ :root{--ameba-green:#2d8c3c;--ameba-black:#000;--ameba-yellow-green:#82be28;--ameba-neutral-gray:#f6f6f6;--ameba-white:#fff;--ameba-yellow:#f5e100;--primary-green-100:#0f5c1f;--primary-green-90:#186b27;--primary-green-80:#237b31;--primary-green-70:#298737;--primary-green-60:#389e46;--primary-green-50:#41ad4f;--primary-green-40:#5eb969;--primary-green-30:#7bc583;--primary-green-20:#a1d5a7;--primary-green-10:#c6e5c9;--primary-green-5:#e7f5e9;--secondary-green-100:#366600;--secondary-green-90:#427504;--secondary-green-80:#477d00;--secondary-green-70:#5e9b15;--secondary-green-60:#73ae20;--secondary-green-50:#82be28;--secondary-green-40:#95c84d;--secondary-green-30:#a9d16f;--secondary-green-20:#c2de99;--secondary-green-10:#daebc1;--secondary-green-5:#f0f7e6;--gray-100:#08121a;--gray-90-alpha:rgba(8,18,26,0.95);--gray-80-alpha:rgba(8,18,26,0.8);--gray-70-alpha:rgba(8,18,26,0.74);--gray-60-alpha:rgba(8,18,26,0.61);--gray-50-alpha:rgba(8,18,26,0.47);--gray-40-alpha:rgba(8,18,26,0.4);--gray-30-alpha:rgba(8,18,26,0.3);--gray-20-alpha:rgba(8,18,26,0.16);--gray-10-alpha:rgba(8,18,26,0.08);--gray-5-alpha:rgba(8,18,26,0.04);--gray-90:#141e25;--gray-80:#394148;--gray-70:#464d53;--gray-60:#686e73;--gray-50:#8b9093;--gray-40:#9ca0a3;--gray-30:#b5b8ba;--gray-20:#d8d9da;--gray-10:#ebeced;--gray-5:#f5f6f6;--white-100:#fff;--white-90-alpha:hsla(0,0%,100%,0.9);--white-80-alpha:hsla(0,0%,100%,0.8);--white-70-alpha:hsla(0,0%,100%,0.7);--white-60-alpha:hsla(0,0%,100%,0.6);--white-50-alpha:hsla(0,0%,100%,0.5);--white-40-alpha:hsla(0,0%,100%,0.43);--white-30-alpha:hsla(0,0%,100%,0.3);--white-20-alpha:hsla(0,0%,100%,0.16);--white-10-alpha:hsla(0,0%,100%,0.1);--white-5-alpha:hsla(0,0%,100%,0.05);--black-100:#000;--black-90-alpha:rgba(0,0,0,0.9);--black-80-alpha:rgba(0,0,0,0.8);--black-70-alpha:rgba(0,0,0,0.7);--black-60-alpha:rgba(0,0,0,0.6);--black-50-alpha:rgba(0,0,0,0.5);--black-40-alpha:rgba(0,0,0,0.4);--black-30-alpha:rgba(0,0,0,0.3);--black-20-alpha:rgba(0,0,0,0.2);--black-10-alpha:rgba(0,0,0,0.1);--black-5-alpha:rgba(0,0,0,0.05);--caution-red-100:#d91c0b;--caution-red-20-alpha:rgba(217,28,11,0.2);--caution-red-5-alpha:rgba(217,28,11,0.05);--caution-red-vivid-100:#ff6a59;--caution-red-vivid-20-alpha:rgba(255,106,89,0.2);--caution-red-vivid-5-alpha:rgba(255,106,89,0.05);--expressive-blue:#4795c8;--expressive-green:#4ac3aa;--expressive-purple:#ca5ce6;--expressive-lavender:#755ce6;--expressive-orange:#e6815c;--expressive-yellow:#e6ac5c;--expressive-pink:#e6456a;--facebook-blue:#1877f2;--twitter-blue:#1da1f2;--instagram-pink:#f20076;--focus-blue-100:#0091ff;--focus-blue-30-alpha:rgba(0,145,255,0.3);--color-background:var(--gray-5);--color-surface-primary:var(--white-100);--color-surface-secondary:var(--gray-5);--color-surface-tertiary:var(--gray-10-alpha);--color-surface-quaternary:var(--gray-20-alpha);--color-surface-accent-primary:var(--primary-green-70);--color-surface-accent-primary-light:var(--primary-green-5);--color-surface-accent-secondary:var(--secondary-green-50);--color-surface-accent-secondary-light:var(--secondary-green-5);--color-surface-caution:var(--caution-red-100);--color-surface-caution-light:var(--caution-red-5-alpha);--color-text-high-emphasis:var(--gray-100);--color-text-medium-emphasis:var(--gray-70-alpha);--color-text-low-emphasis:var(--gray-60-alpha);--color-text-disabled:var(--gray-30-alpha);--color-text-high-emphasis-inverse:var(--white-100);--color-text-accent-primary:var(--primary-green-80);--color-text-accent-secondary:var(--secondary-green-70);--color-text-caution:var(--caution-red-100);--color-highlight-error:var(--caution-red-20);--color-highlight-hover:var(--black-30-alpha);--color-object-high-emphasis:var(--gray-100);--color-object-medium-emphasis:var(--gray-70-alpha);--color-object-low-emphasis:var(--gray-60-alpha);--color-object-disable:var(--gray-30-alpha);--color-object-accent-primary:var(--primary-green-70);--color-object-accent-secondary:var(--secondary-green-70);--color-object-caution:var(--caution-red-100);--color-object-high-emphasis-inverse:var(--white-100);--color-focus-clarity:var(--focus-blue-100);--color-focus-ambiguous:var(--focus-blue-30-alpha);--color-border-high-emphasis:var(--gray-60-alpha);--color-border-medium-emphasis:var(--gray-30-alpha);--color-border-low-emphasis:var(--gray-10-alpha);--color-border-accent-primary:var(--primary-green-70);--color-border-high-emphasis-inverse:var(--white-100);--color-border-caution:var(--caution-red-100);--color-third-party-facebook-blue:var(--facebook-blue);--color-third-party-twitter-blue:var(--twitter-blue);--color-third-party-instagram-pink:var(--instagram-pink)}.spui-Breadcrumb{background:var(--color-surface-secondary);border-radius:70px;display:inline-block;overflow:hidden;padding:0 16px}.spui-Breadcrumb-list{align-items:center;display:flex;list-style:none;margin:0;padding:0}.spui-Breadcrumb-item{align-items:center;display:flex;min-height:56px}.spui-Breadcrumb a{align-items:center;border-radius:4px;display:flex;letter-spacing:.1em;line-height:1.3;padding:4px 8px;position:relative;text-decoration:none}.spui-Breadcrumb a:not([aria-current]){color:var(--color-text-accent-primary);font-weight:700}.spui-Breadcrumb a[aria-current]{color:var(--color-text-low-emphasis);font-weight:400}.spui-Breadcrumb a:before{border-radius:4px;content:"";left:0;min-height:56px;position:absolute;top:-50%;width:100%}.spui-Breadcrumb a:hover{text-decoration:underline}.spui-Breadcrumb a:focus{box-shadow:0 0 0 1px var(--color-surface-secondary),0 0 0 3px var(--color-focus-clarity);outline:none}.spui-Breadcrumb a:focus:not(:focus-visible){box-shadow:none}.spui-Breadcrumb-chevron{color:var(--color-object-low-emphasis);height:16px;padding:0 4px;width:16px}.spui-Breadcrumb-item:last-of-type>.spui-Breadcrumb-chevron{display:none;padding:0}@media screen and (max-width:768px){.spui-Breadcrumb{padding:0 14px}.spui-Breadcrumb-item{min-height:40px}.spui-Breadcrumb a{font-size:.8125em;padding:2px 6px}.spui-Breadcrumb a:not([aria-current]):before{min-height:40px}.spui-Breadcrumb-chevron{height:12px;padding:0 2px;width:12px}}:root{--Button-tapHighlightColor:var(--gray-5-alpha);--Button-onFocus-boxShadow:0 0 0 1px var(--color-surface-primary),0 0 0 3px var(--color-focus-clarity);--Button--contained-backgroundColor:var(--color-surface-accent-primary);--Button--contained-color:var(--color-text-high-emphasis-inverse);--Button--contained-onActive-backgroundColor:var(--primary-green-100);--Button--contained-onHover-backgroundColor:var(--primary-green-100);--Button--outlined-borderColor:var(--color-border-accent-primary);--Button--outlined-color:var(--color-text-accent-primary);--Button--outlined-onActive-backgroundColor:var(--primary-green-5);--Button--outlined-onHover-backgroundColor:var(--primary-green-5);--Button--lighted-backgroundColor:var(--color-surface-accent-primary-light);--Button--lighted-color:var(--color-text-accent-primary);--Button--lighted-onActive-backgroundColor:var(--primary-green-10);--Button--lighted-onHover-backgroundColor:var(--primary-green-10);--Button--neutral-backgroundColor:var(--color-surface-tertiary);--Button--neutral-color:var(--color-text-medium-emphasis);--Button--neutral-onActive-backgroundColor:var(--gray-20-alpha);--Button--neutral-onHover-backgroundColor:var(--gray-20-alpha);--Button--danger-borderColor:var(--color-border-caution);--Button--danger-color:var(--color-text-caution);--Button--danger-onActive-backgroundColor:var(--caution-red-5-alpha);--Button--danger-onHover-backgroundColor:var(--caution-red-5-alpha)}.spui-Button{align-items:center;box-sizing:border-box;display:inline-flex;font-family:inherit;font-weight:700;justify-content:center;line-height:1.3;margin:0;-webkit-tap-highlight-color:var(--Button-tapHighlightColor);text-align:center;transition:background-color .3s}.spui-Button:disabled{opacity:.3}.spui-Button:focus{box-shadow:var(--Button-onFocus-boxShadow);outline:none}.spui-Button:focus:not(:focus-visible){box-shadow:none}.spui-Button--fullWidth{width:100%}.spui-Button--large{border-radius:3em;font-size:1em;min-height:48px;padding-left:16px;padding-right:16px}.spui-Button--medium{border-radius:2.85714em;font-size:.875em;min-height:40px;padding-left:16px;padding-right:16px}.spui-Button--small{border-radius:2.46154em;font-size:.8125em;min-height:32px;padding-left:10px;padding-right:10px}@media (-ms-high-contrast:active),(-ms-high-contrast:none){.spui-Button--large,.spui-Button--medium,.spui-Button--small{height:1px}}.spui-Button--contained{background-color:var(--Button--contained-backgroundColor);border:none;color:var(--Button--contained-color);padding-bottom:8px;padding-top:8px}.spui-Button--contained:active{background-color:var(--Button--contained-onActive-backgroundColor)}@media (hover:hover){.spui-Button--contained:not([disabled]):hover{background-color:var(--Button--contained-onHover-backgroundColor)}}.spui-Button--outlined{background-color:transparent;border:2px solid var(--Button--outlined-borderColor);color:var(--Button--outlined-color);padding-bottom:6px;padding-top:6px}.spui-Button--outlined:active{background-color:var(--Button--outlined-onActive-backgroundColor)}@media (hover:hover){.spui-Button--outlined:not([disabled]):hover{background-color:var(--Button--outlined-onHover-backgroundColor)}}.spui-Button--lighted{background-color:var(--Button--lighted-backgroundColor);border:none;color:var(--Button--lighted-color);padding-bottom:8px;padding-top:8px}.spui-Button--lighted:active{background-color:var(--Button--lighted-onActive-backgroundColor)}@media (hover:hover){.spui-Button--lighted:not([disabled]):hover{background-color:var(--Button--lighted-onHover-backgroundColor)}}.spui-Button--neutral{background-color:var(--Button--neutral-backgroundColor);border:none;color:var(--Button--neutral-color);padding-bottom:8px;padding-top:8px}.spui-Button--neutral:active{background-color:var(--Button--neutral-onActive-backgroundColor)}@media (hover:hover){.spui-Button--neutral:not([disabled]):hover{background-color:var(--Button--neutral-onHover-backgroundColor)}}.spui-Button--danger{background-color:transparent;border:2px solid var(--Button--danger-borderColor);color:var(--Button--danger-color);padding-bottom:6px;padding-top:6px}.spui-Button--danger:active{background-color:var(--Button--danger-onActive-backgroundColor)}@media (hover:hover){.spui-Button--danger:not([disabled]):hover{background-color:var(--Button--danger-onHover-backgroundColor)}}.spui-Button-icon{line-height:0}.spui-Button-icon--large{font-size:1.375em;margin-right:6px}.spui-Button-icon--medium{font-size:1.429em;margin-right:4px}.spui-Button-icon--small{font-size:1.23em;margin-right:2px}.spui-ButtonGroup{display:flex}.spui-ButtonGroup--row{flex-direction:row}.spui-ButtonGroup--column{flex-direction:column}.spui-ButtonGroup--large.spui-ButtonGroup--row>*{margin-right:16px}.spui-ButtonGroup--large.spui-ButtonGroup--row>:last-child{margin-right:0}.spui-ButtonGroup--large.spui-ButtonGroup--column>*{margin-bottom:16px}.spui-ButtonGroup--large.spui-ButtonGroup--column>:last-child{margin-bottom:0}.spui-ButtonGroup--medium.spui-ButtonGroup--row>*{margin-right:12px}.spui-ButtonGroup--medium.spui-ButtonGroup--row>:last-child{margin-right:0}.spui-ButtonGroup--medium.spui-ButtonGroup--column>*{margin-bottom:12px}.spui-ButtonGroup--medium.spui-ButtonGroup--column>:last-child{margin-bottom:0}.spui-ButtonGroup--small.spui-ButtonGroup--row>*{margin-right:8px}.spui-ButtonGroup--small.spui-ButtonGroup--row>:last-child{margin-right:0}.spui-ButtonGroup--small.spui-ButtonGroup--column>*{margin-bottom:12px}.spui-ButtonGroup--small.spui-ButtonGroup--column>:last-child{margin-bottom:0}.spui-Checkbox-label{align-items:center;border-radius:2px;color:var(--color-text-low-emphasis);display:inline-flex;font-size:1em;font-weight:700;line-height:1;position:relative}.spui-Checkbox-input{clip:rect(1px,1px,1px,1px);height:1px;margin-top:0;overflow:hidden;position:absolute;width:1px}.spui-Checkbox-icon{align-items:center;border:1px solid var(--color-border-medium-emphasis);border-radius:4px;box-sizing:border-box;color:transparent;display:inline-flex;font-size:.875em;height:18px;justify-content:center;width:18px}.spui-Checkbox-input:checked+.spui-Checkbox-icon{background-color:var(--color-object-accent-primary);border:1px solid var(--color-object-accent-primary);color:var(--color-text-high-emphasis-inverse)}.spui-Checkbox-input:disabled+.spui-Checkbox-icon{opacity:.3}.spui-Checkbox-outline{border-radius:2px;bottom:-2px;height:22px;left:-2px;position:absolute;right:-2px;top:-2px;width:22px}.spui-Checkbox-input:focus~.spui-Checkbox-outline{box-shadow:0 0 0 2px var(--color-focus-clarity)}.spui-Checkbox-input:focus:not(:focus-visible)~.spui-Checkbox-outline{box-shadow:none}.spui-Checkbox-text:not(:empty){margin-left:8px}.spui-Checkbox-input:checked~.spui-Checkbox-text{color:var(--color-object-accent-primary)}.spui-Checkbox-input:disabled~.spui-Checkbox-text{color:var(--color-text-disabled)}.spui-DropDown-label{display:inline-block;position:relative}.spui-DropDown-select{-webkit-appearance:listitem;margin:0;opacity:0;outline:none}.spui-DropDown-select,.spui-DropDown-visual{box-sizing:border-box;font-size:1em;min-height:40px;padding:.5em calc(40px + 1em) .5em 1em}.spui-DropDown-visual{align-items:center;border:1px solid var(--color-border-medium-emphasis);border-radius:8px;color:var(--color-text-disabled);display:flex;height:100%;left:0;position:absolute;top:0;width:100%}.spui-DropDown-label.is-active .spui-DropDown-visual{color:var(--color-text-high-emphasis)}.spui-DropDown-icon{align-items:center;background-color:var(--color-surface-secondary);border:1px solid var(--color-border-medium-emphasis);border-bottom-right-radius:8px;border-top-right-radius:8px;box-sizing:border-box;color:var(--color-object-low-emphasis);display:flex;height:100%;justify-content:center;position:absolute;right:0;top:0;width:40px}.spui-DropDown-outline{border-radius:8px;display:inline-block;height:100%;left:0;pointer-events:none;position:absolute;top:0;width:100%}.spui-DropDown-select:focus~.spui-DropDown-outline{border-color:var(--color-border-high-emphasis);box-shadow:0 0 0 3px var(--color-focus-ambiguous)}.spui-DropDown-select:focus:not(:focus-visible)~.spui-DropDown-outline{border-color:var(--color-border-medium-emphasis);box-shadow:none}.spui-DropDown-label.is-error .spui-DropDown-icon,.spui-DropDown-label.is-error .spui-DropDown-visual{background-color:var(--color-surface-caution-light);border-color:var(--color-border-caution)}.spui-InlineDropDown-label{display:inline-block;position:relative}.spui-InlineDropDown-select{-webkit-appearance:listitem;box-sizing:border-box;font-size:1em;margin:0;opacity:0;outline:none;position:absolute;top:0;width:100%}.spui-InlineDropDown-select--medium{min-height:40px}.spui-InlineDropDown-select--small{min-height:32px}.spui-InlineDropDown-text,.spui-InlineDropDown-visual{border-radius:8px;display:flex}.spui-InlineDropDown-text{align-items:center;box-sizing:border-box;color:var(--color-text-medium-emphasis);font-weight:700;height:100%;left:0;padding:.5em 0}.spui-InlineDropDown-text--medium{font-size:.875em;min-height:40px}.spui-InlineDropDown-text--small{font-size:.8125em;min-height:32px}.spui-InlineDropDown-icon{align-items:center;background-color:transparent;border-bottom-right-radius:8px;border-top-right-radius:8px;box-sizing:border-box;color:var(--color-object-medium-emphasis);display:flex;justify-content:center;margin-left:4px}.spui-InlineDropDown-icon--medium{font-size:.875em}.spui-InlineDropDown-icon--small{font-size:.8125em}.spui-InlineDropDown-outline{border-radius:8px;display:inline-block;height:100%;left:0;pointer-events:none;position:absolute;top:0;width:100%}.spui-InlineDropDown-select:focus~.spui-InlineDropDown-outline{border-color:var(--color-border-medium-emphasis);box-shadow:0 0 0 3px var(--color-focus-ambiguous)}.spui-InlineDropDown-select:focus:not(:focus-visible)~.spui-InlineDropDown-outline{border-color:var(--color-border-medium-emphasis);box-shadow:none}.spui-InputLabel{color:var(--color-text-medium-emphasis);display:block;font-size:.875em;font-weight:700;line-height:1.4}.spui-InputLabel:empty{display:none}.spui-InvalidMessage{color:var(--color-text-caution);display:flex;font-size:.75em;font-weight:700;line-height:1.4;margin:8px 0 0;min-height:1.1em;transition:height .3s}.spui-InvalidMessage[hidden]{display:none}.spui-InvalidMessage-icon{font-size:1.33em;line-height:1;margin-right:.25em}.spui-InvalidMessage-body{position:relative;top:1px}.spui-Radio-label{align-items:center;border-radius:2px;color:var(--color-text-low-emphasis);display:inline-flex;font-size:1em;font-weight:700;line-height:1;position:relative}.spui-Radio-input{clip:rect(1px,1px,1px,1px);height:1px;margin-top:0;overflow:hidden;position:absolute;width:1px}.spui-Radio-icon{align-items:center;border:1px solid var(--color-border-medium-emphasis);border-radius:50%;box-sizing:border-box;color:transparent;display:inline-flex;font-size:.875em;height:20px;justify-content:center;vertical-align:top;width:20px}.spui-Radio-input:checked+.spui-Radio-icon{background-color:var(--color-object-accent-primary);border:1px solid var(--color-object-accent-primary);color:var(--color-text-high-emphasis-inverse)}.spui-Radio-input:disabled+.spui-Radio-icon{opacity:.3}.spui-Radio-outline{border-radius:50%;bottom:-2px;height:24px;left:-2px;position:absolute;right:-2px;top:-2px;width:24px}.spui-Radio-input:focus~.spui-Radio-outline{box-shadow:0 0 0 2px var(--color-focus-clarity)}.spui-Radio-input:focus:not(:focus-visible)~.spui-Radio-outline{box-shadow:none}.spui-Radio-text:not(:empty){margin-left:8px}.spui-Radio-input:checked~.spui-Radio-text{color:var(--color-object-accent-primary)}.spui-Radio-input:disabled~.spui-Radio-text{color:var(--color-text-disabled)}.spui-TextArea{background-color:var(--color-surface-primary);border:1px solid var(--color-border-medium-emphasis);border-radius:8px;box-sizing:border-box;color:var(--color-text-high-emphasis);font-size:1em;line-height:1.4;margin:0;min-height:92px;outline:none;padding:12px 16px;transition:box-shadow .3s;width:100%}@media (prefers-reduced-motion:reduce){.spui-TextArea{transition:box-shadow .1ms}}.spui-TextArea::placeholder{color:var(--color-text-disabled)}.spui-TextArea:focus{border-color:var(--color-border-high-emphasis);box-shadow:0 0 0 3px var(--color-focus-ambiguous)}.spui-TextArea:focus:not(:focus-visible){border-color:var(--color-border-medium-emphasis);box-shadow:none}.spui-TextArea.is-error{background-color:var(--color-surface-caution-light);border-color:var(--color-border-caution)}.spui-TextField{background-color:var(--color-surface-primary);border:1px solid var(--color-border-medium-emphasis);border-radius:8px;box-sizing:border-box;color:var(--color-text-high-emphasis);font-size:1em;margin:0;outline:none;padding:0 16px;transition:box-shadow .3s;width:100%}@media (prefers-reduced-motion:reduce){.spui-TextField{transition:box-shadow .1ms}}.spui-TextField::placeholder{color:var(--color-text-disabled)}.spui-TextField:focus{border-color:var(--color-border-high-emphasis);box-shadow:0 0 0 3px var(--color-focus-ambiguous)}.spui-TextField:focus:not(:focus-visible){border-color:var(--color-border-medium-emphasis);box-shadow:none}.spui-TextField.is-error{background-color:var(--color-surface-caution-light);border-color:var(--color-border-caution)}.spui-TextField--large{min-height:48px}.spui-TextField--medium{min-height:40px}.spui-ToggleSwitch{display:inline-block;height:32px;position:relative;width:52px}.spui-ToggleSwitch-input{opacity:0;outline:none}.spui-ToggleSwitch-input:disabled~.spui-ToggleSwitch-visual{opacity:.3}.spui-ToggleSwitch-visual{background-color:var(--color-surface-quaternary);border-radius:16px;box-sizing:border-box;display:inline-block;height:100%;left:0;position:absolute;top:0;width:100%}.spui-ToggleSwitch-input:checked~.spui-ToggleSwitch-visual{background-color:var(--color-surface-accent-primary)}.spui-ToggleSwitch-visual:before{background-color:var(--color-object-high-emphasis-inverse);border:1px solid var(--color-border-low-emphasis);border-radius:100%;box-sizing:border-box;content:"";display:inline-block;height:24px;left:4px;position:absolute;top:4px;transition:transform .3s ease-out;width:24px}.spui-ToggleSwitch-input:checked~.spui-ToggleSwitch-visual:before{transform:translate(20px)}.spui-ToggleSwitch-outline{border-radius:16px;bottom:-2px;left:-2px;position:absolute;right:-2px;top:-2px;z-index:-1}.spui-ToggleSwitch-input:focus~.spui-ToggleSwitch-outline{box-shadow:0 0 0 2px var(--color-focus-clarity)}.spui-ToggleSwitch-input:focus:not(:focus-visible)~.spui-ToggleSwitch-outline{box-shadow:none}:root{--HeroCarouselItem-onFocus-boxShadow:0 0 0 1px var(--color-surface-primary),0 0 0 3px var(--color-focus-clarity)}.spui-HeroCarouselItem-listItem{list-style:none;padding:0 .44em;width:100%}.spui-HeroCarouselItem-link{border:1px solid var(--color-border-low-emphasis);border-radius:12px;box-sizing:border-box;display:flex;flex-direction:column;height:12em;text-decoration:none;width:17.5em}.spui-HeroCarouselItem-link:focus{box-shadow:var(--HeroCarouselItem-onFocus-boxShadow);outline:none}.spui-HeroCarouselItem-link:focus:not(:focus-visible){box-shadow:none}.spui-HeroCarouselItem-imageBlock{align-items:center;border-bottom:1px solid var(--color-border-low-emphasis);border-radius:12px 12px 0 0;display:flex;height:9.5em;justify-content:center;overflow:hidden}.spui-HeroCarouselItem-image{height:100%;object-fit:cover;width:100%}.spui-HeroCarouselItem-titleContainer{align-items:center;box-sizing:border-box;display:flex;height:2.89em;justify-content:center;padding:0 .5em}.spui-HeroCarouselItem-title{color:var(--color-text-high-emphasis);font-size:.9375em;font-weight:700;margin:0;overflow:hidden;text-align:center;text-overflow:ellipsis;white-space:nowrap}@media screen and (min-width:768px){.spui-HeroCarouselItem-listItem{padding:0 .75em}.spui-HeroCarouselItem-link{height:13.8em;width:20em}.spui-HeroCarouselItem-titleContainer{height:3.3em}.spui-HeroCarouselItem-title{font-size:1em}.spui-HeroCarouselItem-imageBlock{height:10.9em}}:root{--HeroCarousel-onFocus-boxShadow:0 0 0 1px var(--color-surface-primary),0 0 0 3px var(--color-focus-clarity)}.spui-HeroCarousel-container{align-items:center;display:flex;height:12.5em;justify-content:center;overflow:hidden}.spui-HeroCarousel-list{display:flex;margin-right:.88em;padding:0 .44em;transition:transform .5s;width:17.5em}.spui-HeroCarousel-controls{align-items:center;border:1px solid var(--color-border-low-emphasis);border-radius:100px;display:flex;height:2.5em;margin:.88em auto 0;width:7.63em}.spui-HeroCarousel-control{align-items:center;background-color:transparent;border:none;display:flex;font-size:1em;height:100%;justify-content:center;padding:0;width:33.33333%}.spui-HeroCarousel-control:hover{opacity:.7}.spui-HeroCarousel-control:focus{box-shadow:var(--HeroCarousel-onFocus-boxShadow);outline:none}.spui-HeroCarousel-control:focus:not(:focus-visible){box-shadow:none}.spui-HeroCarousel-control--prev{border-radius:100px 0 0 100px;border-right:1px solid var(--color-border-low-emphasis)}.spui-HeroCarousel-control--next{border-left:1px solid var(--color-border-low-emphasis);border-radius:0 100px 100px 0}@media (prefers-reduced-motion:reduce){.spui-HeroCarousel-list{transition:1ms}}@media screen and (min-width:768px){.spui-HeroCarousel-container{height:14.3em}.spui-HeroCarousel-list{margin-right:1.5em;padding:0 .75em;width:20em}.spui-HeroCarousel-controls{height:2.75em;margin-top:1.25em;width:8.38em}}.spui-HeroCarousel-control>svg{color:var(--color-text-low-emphasis);height:1.13em;width:1.13em}@media screen and (min-width:768px){.spui-HeroCarousel-control>svg{height:1.25em;width:1.25em}}:root{--IconButton-tapHighlightColor:var(--gray-5-alpha);--IconButton-onFocus-boxShadow:0 0 0 1px var(--color-surface-primary),0 0 0 3px var(--color-focus-clarity);--IconButton--contained-backgroundColor:var(--color-surface-accent-primary);--IconButton--contained-color:var(--color-object-high-emphasis-inverse);--IconButton--contained-onActive-backgroundColor:var(--primary-green-100);--IconButton--contained-onHover-backgroundColor:var(--primary-green-100);--IconButton--outlined-borderColor:var(--color-border-accent-primary);--IconButton--outlined-color:var(--color-object-accent-primary);--IconButton--outlined-onActive-backgroundColor:var(--primary-green-5);--IconButton--outlined-onHover-backgroundColor:var(--primary-green-5);--IconButton--lighted-backgroundColor:var(--color-surface-accent-primary-light);--IconButton--lighted-color:var(--color-object-accent-primary);--IconButton--lighted-onActive-backgroundColor:var(--primary-green-10);--IconButton--lighted-onHover-backgroundColor:var(--primary-green-10);--IconButton--neutral-backgroundColor:var(--color-surface-tertiary);--IconButton--neutral-color:var(--color-object-medium-emphasis);--IconButton--neutral-onActive-backgroundColor:var(--gray-20-alpha);--IconButton--neutral-onHover-backgroundColor:var(--gray-20-alpha);--IconButton--danger-borderColor:var(--color-border-caution);--IconButton--danger-color:var(--color-object-caution);--IconButton--danger-onActive-backgroundColor:var(--caution-red-5-alpha);--IconButton--danger-onHover-backgroundColor:var(--caution-red-5-alpha)}.spui-IconButton{align-items:center;border-radius:100%;box-sizing:border-box;display:inline-flex;justify-content:center;margin:0;-webkit-tap-highlight-color:var(--IconButton-tapHighlightColor);text-align:center;transition:background-color .3s}.spui-IconButton:disabled{opacity:.3}.spui-IconButton:focus{box-shadow:var(--IconButton-onFocus-boxShadow);outline:none}.spui-IconButton:focus:not(:focus-visible){box-shadow:none}.spui-IconButton--large{font-size:1.375em;height:48px;width:48px}.spui-IconButton--medium{font-size:1.25em;height:40px;width:40px}.spui-IconButton--small{font-size:1em;height:32px;width:32px}.spui-IconButton--exSmall{font-size:1em;height:24px;width:24px}.spui-IconButton--contained{background-color:var(--IconButton--contained-backgroundColor);border:none;color:var(--IconButton--contained-color)}.spui-IconButton--contained:active{background-color:var(--IconButton--contained-onActive-backgroundColor)}@media (hover:hover){.spui-IconButton--contained:not([disabled]):hover{background-color:var(--IconButton--contained-onHover-backgroundColor)}}.spui-IconButton--outlined{background-color:transparent;border:2px solid var(--IconButton--outlined-borderColor);color:var(--IconButton--outlined-color)}.spui-IconButton--outlined:active{background-color:var(--IconButton--outlined-onActive-backgroundColor)}@media (hover:hover){.spui-IconButton--outlined:not([disabled]):hover{background-color:var(--IconButton--outlined-onHover-backgroundColor)}}.spui-IconButton--lighted{background-color:var(--IconButton--lighted-backgroundColor);border:none;color:var(--IconButton--lighted-color);padding-bottom:8px;padding-top:8px}.spui-IconButton--lighted:active{background-color:var(--IconButton--lighted-onActive-backgroundColor)}@media (hover:hover){.spui-IconButton--lighted:not([disabled]):hover{background-color:var(--IconButton--lighted-onHover-backgroundColor)}}.spui-IconButton--neutral{background-color:var(--IconButton--neutral-backgroundColor);border:none;color:var(--IconButton--neutral-color)}.spui-IconButton--neutral:active{background-color:var(--IconButton--neutral-onActive-backgroundColor)}@media (hover:hover){.spui-IconButton--neutral:not([disabled]):hover{background-color:var(--IconButton--neutral-onHover-backgroundColor)}}.spui-IconButton--danger{background-color:transparent;border:2px solid var(--IconButton--danger-borderColor);color:var(--IconButton--danger-color)}.spui-IconButton--danger:active{background-color:var(--IconButton--danger-onActive-backgroundColor)}@media (hover:hover){.spui-IconButton--danger:hover{background-color:var(--IconButton--danger-onHover-backgroundColor)}}:root{--LinkButton-tapHighlightColor:var(--gray-5-alpha);--LinkButton-onFocus-boxShadow:0 0 0 1px var(--color-surface-primary),0 0 0 3px var(--color-focus-clarity);--LinkButton--contained-backgroundColor:var(--color-surface-accent-primary);--LinkButton--contained-color:var(--color-text-high-emphasis-inverse);--LinkButton--contained-onActive-backgroundColor:var(--primary-green-100);--LinkButton--contained-onHover-backgroundColor:var(--primary-green-100);--LinkButton--outlined-borderColor:var(--color-border-accent-primary);--LinkButton--outlined-color:var(--color-text-accent-primary);--LinkButton--outlined-onActive-backgroundColor:var(--primary-green-5);--LinkButton--outlined-onHover-backgroundColor:var(--primary-green-5);--LinkButton--lighted-backgroundColor:var(--color-surface-accent-primary-light);--LinkButton--lighted-color:var(--color-text-accent-primary);--LinkButton--lighted-onActive-backgroundColor:var(--primary-green-10);--LinkButton--lighted-onHover-backgroundColor:var(--primary-green-10);--LinkButton--neutral-backgroundColor:var(--color-surface-tertiary);--LinkButton--neutral-color:var(--color-text-medium-emphasis);--LinkButton--neutral-onActive-backgroundColor:var(--gray-20-alpha);--LinkButton--neutral-onHover-backgroundColor:var(--gray-20-alpha);--LinkButton--danger-borderColor:var(--color-border-caution);--LinkButton--danger-color:var(--color-text-caution);--LinkButton--danger-onActive-backgroundColor:var(--caution-red-5-alpha);--LinkButton--danger-onHover-backgroundColor:var(--caution-red-5-alpha)}.spui-LinkButton{align-items:center;box-sizing:border-box;display:inline-flex;font-family:inherit;font-weight:700;justify-content:center;line-height:1.3;-webkit-tap-highlight-color:var(--LinkButton-tapHighlightColor);text-align:center;text-decoration:none;transition:background-color .3s}.spui-LinkButton:focus{box-shadow:var(--LinkButton-onFocus-boxShadow);outline:none}.spui-LinkButton:focus:not(:focus-visible){box-shadow:none}.spui-LinkButton--fullWidth{width:100%}.spui-LinkButton--large{border-radius:3em;font-size:1em;min-height:48px;padding-left:16px;padding-right:16px}.spui-LinkButton--medium{border-radius:2.85714em;font-size:.875em;min-height:40px;padding-left:16px;padding-right:16px}.spui-LinkButton--small{border-radius:2.46154em;font-size:.8125em;min-height:32px;padding-left:10px;padding-right:10px}@media (-ms-high-contrast:active),(-ms-high-contrast:none){.spui-LinkButton--large,.spui-LinkButton--medium,.spui-LinkButton--small{height:1px}}.spui-LinkButton--contained{background-color:var(--LinkButton--contained-backgroundColor);border:none;color:var(--LinkButton--contained-color);padding-bottom:8px;padding-top:8px}.spui-LinkButton--contained:active{background-color:var(--LinkButton--contained-onActive-backgroundColor)}@media (hover:hover){.spui-LinkButton--contained:hover{background-color:var(--LinkButton--contained-onHover-backgroundColor)}}.spui-LinkButton--outlined{background-color:transparent;border:2px solid var(--LinkButton--outlined-borderColor);color:var(--LinkButton--outlined-color);padding-bottom:6px;padding-top:6px}.spui-LinkButton--outlined:active{background-color:var(--LinkButton--outlined-onActive-backgroundColor)}@media (hover:hover){.spui-LinkButton--outlined:hover{background-color:var(--LinkButton--outlined-onHover-backgroundColor)}}.spui-LinkButton--lighted{background-color:var(--LinkButton--lighted-backgroundColor);border:none;color:var(--LinkButton--lighted-color);padding-bottom:8px;padding-top:8px}.spui-LinkButton--lighted:active{background-color:var(--LinkButton--lighted-onActive-backgroundColor)}@media (hover:hover){.spui-LinkButton--lighted:hover{background-color:var(--LinkButton--lighted-onHover-backgroundColor)}}.spui-LinkButton--neutral{background-color:var(--LinkButton--neutral-backgroundColor);border:none;color:var(--LinkButton--neutral-color);padding-bottom:8px;padding-top:8px}.spui-LinkButton--neutral:active{background-color:var(--LinkButton--neutral-onActive-backgroundColor)}@media (hover:hover){.spui-LinkButton--neutral:hover{background-color:var(--LinkButton--neutral-onHover-backgroundColor)}}.spui-LinkButton--danger{background-color:transparent;border:2px solid var(--LinkButton--danger-borderColor);color:var(--LinkButton--danger-color);padding-bottom:6px;padding-top:6px}.spui-LinkButton--danger:active{background-color:var(--LinkButton--danger-onActive-backgroundColor)}@media (hover:hover){.spui-LinkButton--danger:hover{background-color:var(--LinkButton--danger-onHover-backgroundColor)}}.spui-LinkButton-icon{line-height:0}.spui-LinkButton-icon--large{font-size:1.375em;margin-right:6px}.spui-LinkButton-icon--medium{font-size:1.429em;margin-right:4px}.spui-LinkButton-icon--small{font-size:1.23em;margin-right:2px}:root{--Toast-z-index:1}.spui-Toast{left:0;position:fixed;right:0;text-align:center;z-index:var(--Toast-z-index)}.spui-Toast--content{background-color:var(--color-surface-accent-primary-light);border-radius:40px;box-shadow:0 4.75px 14.25px rgba(8,18,26,.12);box-sizing:border-box;color:var(--color-text-accent-primary);cursor:default;display:inline-block;font-family:inherit;font-size:16px;font-weight:700;margin:0;padding:11px 16px}.spui-Toast-content--error{background-color:var(--color-surface-caution-light);color:var(--color-text-caution);position:relative}.spui-Toast-content--error:before{background-color:var(--color-surface-primary);border-radius:40px;content:"";height:100%;left:0;position:absolute;top:0;width:100%;z-index:-1}.spui-Toast--top{top:16px}.spui-Toast--bottom{bottom:0}.spui-Toast--slide{transform:translateY(-100px);transition:transform .5s ease}.spui-Toast-slide--in{transform:translateY(0)}@media (prefers-reduced-motion:reduce){.spui-Toast--slide{transition-duration:.1ms}}
package/index.mjs ADDED
@@ -0,0 +1,11 @@
1
+ import { BreadcrumbItem, BreadcrumbList } from './Breadcrumb';
2
+ import { Button } from './Button';
3
+ import { ButtonGroup } from './ButtonGroup';
4
+ import * as Form from './Form';
5
+ import * as Icon from './Icon';
6
+ import { HeroCarousel } from './HeroCarousel';
7
+ import { IconButton } from './IconButton';
8
+ import { LinkButton } from './LinkButton';
9
+ import { Toast } from './Toast';
10
+ // Components are currently exported after "import" for projects using TS lower v3.8 that does not support "export * as".
11
+ export { BreadcrumbItem, BreadcrumbList, Button, ButtonGroup, Form, HeroCarousel, Icon, IconButton, LinkButton, Toast, };