@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.
- package/Breadcrumb/Breadcrumb.css +1 -1
- package/Breadcrumb/BreadcrumbItem.mjs +7 -0
- package/Breadcrumb/BreadcrumbList.mjs +12 -0
- package/Breadcrumb/index.mjs +2 -0
- package/Button/Button.mjs +7 -0
- package/Button/index.mjs +1 -0
- package/ButtonGroup/ButtonGroup.mjs +13 -0
- package/ButtonGroup/index.mjs +1 -0
- package/CHANGELOG.md +55 -0
- package/Form/Checkbox.mjs +11 -0
- package/Form/DropDown.mjs +38 -0
- package/Form/InlineDropDown.mjs +30 -0
- package/Form/InputLabel.mjs +5 -0
- package/Form/InvalidMessage.mjs +9 -0
- package/Form/Radio.mjs +11 -0
- package/Form/TextArea.mjs +5 -0
- package/Form/TextField.mjs +9 -0
- package/Form/ToggleSwitch.mjs +8 -0
- package/Form/index.mjs +8 -0
- package/HeroCarousel/HeroCarousel.mjs +27 -0
- package/HeroCarousel/HeroCarouselItem.mjs +20 -0
- package/HeroCarousel/hooks/useAutoPlayCarousel.mjs +158 -0
- package/HeroCarousel/hooks/useAutoSlide.mjs +40 -0
- package/HeroCarousel/hooks/useCarouselFocus.mjs +22 -0
- package/HeroCarousel/hooks/useSliderMoveEvent.mjs +47 -0
- package/HeroCarousel/hooks/useSliderTransition.mjs +30 -0
- package/HeroCarousel/hooks/useValueRef.mjs +8 -0
- package/HeroCarousel/index.mjs +1 -0
- package/Icon/755.mjs +6 -0
- package/Icon/Abemakun.mjs +6 -0
- package/Icon/Abematv.mjs +6 -0
- package/Icon/Accesslink.mjs +6 -0
- package/Icon/Accesspage.mjs +6 -0
- package/Icon/AccesspageFill.mjs +6 -0
- package/Icon/AddressbookFill.mjs +6 -0
- package/Icon/AlbumAddFill.mjs +6 -0
- package/Icon/AlbumFill.mjs +6 -0
- package/Icon/AlignCenter.mjs +6 -0
- package/Icon/AlignLeft.mjs +6 -0
- package/Icon/AlignRight.mjs +6 -0
- package/Icon/AllFill.mjs +6 -0
- package/Icon/Amebacoin.mjs +6 -0
- package/Icon/Amebapick.mjs +9 -0
- package/Icon/Amegold.mjs +6 -0
- package/Icon/Amember.mjs +6 -0
- package/Icon/ArrowDown.mjs +6 -0
- package/Icon/ArrowDownBold.mjs +6 -0
- package/Icon/ArrowLeft.mjs +6 -0
- package/Icon/ArrowLeftBold.mjs +6 -0
- package/Icon/ArrowRight.mjs +6 -0
- package/Icon/ArrowRightBold.mjs +6 -0
- package/Icon/ArrowRightCircle.mjs +6 -0
- package/Icon/ArrowRightCircleFill.mjs +6 -0
- package/Icon/ArrowUp.mjs +6 -0
- package/Icon/ArrowUpBold.mjs +6 -0
- package/Icon/ArrowpagingDown.mjs +6 -0
- package/Icon/ArrowpagingDownCircle.mjs +6 -0
- package/Icon/ArrowpagingLeft.mjs +6 -0
- package/Icon/ArrowpagingLeftCircle.mjs +6 -0
- package/Icon/ArrowpagingRight.mjs +6 -0
- package/Icon/ArrowpagingRightCircle.mjs +6 -0
- package/Icon/ArrowpagingUp.mjs +6 -0
- package/Icon/ArrowpagingUpCircle.mjs +6 -0
- package/Icon/Article.mjs +6 -0
- package/Icon/ArticleSlash.mjs +6 -0
- package/Icon/Articledesign.mjs +6 -0
- package/Icon/Astrogy.mjs +6 -0
- package/Icon/AstrogyFill.mjs +6 -0
- package/Icon/Baby.mjs +7 -0
- package/Icon/Bbs.mjs +6 -0
- package/Icon/Beginner.mjs +6 -0
- package/Icon/Bell.mjs +6 -0
- package/Icon/BellFill.mjs +6 -0
- package/Icon/BellFillSlash.mjs +6 -0
- package/Icon/BellSlash.mjs +6 -0
- package/Icon/Blog.mjs +6 -0
- package/Icon/Bold.mjs +6 -0
- package/Icon/Book.mjs +6 -0
- package/Icon/BookFill.mjs +6 -0
- package/Icon/Bookmark.mjs +6 -0
- package/Icon/BookmarkFill.mjs +6 -0
- package/Icon/Bookshelf.mjs +6 -0
- package/Icon/BookshelfFill.mjs +6 -0
- package/Icon/Border.mjs +6 -0
- package/Icon/BottomnavFollowfeedActive.mjs +6 -0
- package/Icon/BottomnavFollowfeedInactive.mjs +6 -0
- package/Icon/BottomnavHomeActive.mjs +6 -0
- package/Icon/BottomnavHomeInactive.mjs +6 -0
- package/Icon/BottomnavMypageActive.mjs +6 -0
- package/Icon/BottomnavSearchActive.mjs +6 -0
- package/Icon/BottomnavSearchInactive.mjs +6 -0
- package/Icon/BottomnvavMypageInactive.mjs +6 -0
- package/Icon/Bullets.mjs +6 -0
- package/Icon/Calendar.mjs +6 -0
- package/Icon/CameraFill.mjs +6 -0
- package/Icon/CautionFill.mjs +6 -0
- package/Icon/Check.mjs +6 -0
- package/Icon/CheckBold.mjs +6 -0
- package/Icon/CheckCircle.mjs +6 -0
- package/Icon/CheckCircleFill.mjs +6 -0
- package/Icon/CheckRectangle.mjs +6 -0
- package/Icon/Checklist.mjs +6 -0
- package/Icon/ChevronDown.mjs +6 -0
- package/Icon/ChevronDownBold.mjs +6 -0
- package/Icon/ChevronLeft.mjs +6 -0
- package/Icon/ChevronLeftBold.mjs +6 -0
- package/Icon/ChevronRight.mjs +6 -0
- package/Icon/ChevronRightBold.mjs +6 -0
- package/Icon/ChevronUp.mjs +6 -0
- package/Icon/ChevronUpBold.mjs +6 -0
- package/Icon/Circle.mjs +6 -0
- package/Icon/CircleBold.mjs +6 -0
- package/Icon/CircleFill.mjs +6 -0
- package/Icon/Clock.mjs +6 -0
- package/Icon/ClockFill.mjs +6 -0
- package/Icon/Coin.mjs +6 -0
- package/Icon/Comment.mjs +6 -0
- package/Icon/CommentFill.mjs +6 -0
- package/Icon/CommentPen.mjs +6 -0
- package/Icon/CommentTwoFill.mjs +6 -0
- package/Icon/CommentTwoSlashFill.mjs +6 -0
- package/Icon/Community.mjs +6 -0
- package/Icon/Compass.mjs +7 -0
- package/Icon/Coupon.mjs +6 -0
- package/Icon/Crop.mjs +6 -0
- package/Icon/CropDin.mjs +6 -0
- package/Icon/CropLandscape.mjs +6 -0
- package/Icon/Cross.mjs +6 -0
- package/Icon/CrossBold.mjs +6 -0
- package/Icon/CrossCircle.mjs +6 -0
- package/Icon/CrossCircleFill.mjs +6 -0
- package/Icon/CrossRectangle.mjs +6 -0
- package/Icon/Cutlery.mjs +6 -0
- package/Icon/DiamondTwo.mjs +11 -0
- package/Icon/Dice.mjs +7 -0
- package/Icon/Dot.mjs +6 -0
- package/Icon/Dotmoney.mjs +6 -0
- package/Icon/Download.mjs +6 -0
- package/Icon/Embed.mjs +6 -0
- package/Icon/EmotionFill.mjs +6 -0
- package/Icon/EntryLost.mjs +6 -0
- package/Icon/Exclamationmark.mjs +6 -0
- package/Icon/ExclamationmarkBalloon.mjs +6 -0
- package/Icon/ExclamationmarkBalloonFill.mjs +6 -0
- package/Icon/ExclamationmarkBold.mjs +6 -0
- package/Icon/ExclamationmarkCircle.mjs +6 -0
- package/Icon/ExclamationmarkCircleFill.mjs +6 -0
- package/Icon/Expand.mjs +6 -0
- package/Icon/ExpandExit.mjs +6 -0
- package/Icon/Facebook.mjs +6 -0
- package/Icon/File.mjs +6 -0
- package/Icon/FileAdd.mjs +6 -0
- package/Icon/FileAddFill.mjs +6 -0
- package/Icon/FileCircle.mjs +6 -0
- package/Icon/FileCircleFill.mjs +6 -0
- package/Icon/FileFill.mjs +6 -0
- package/Icon/Filter.mjs +6 -0
- package/Icon/FilterCheck.mjs +6 -0
- package/Icon/Fit.mjs +6 -0
- package/Icon/FlagFill.mjs +6 -0
- package/Icon/FlagRanking.mjs +6 -0
- package/Icon/FlagRankingTrim.mjs +10 -0
- package/Icon/Flash.mjs +6 -0
- package/Icon/FlashAuto.mjs +6 -0
- package/Icon/FlashOff.mjs +6 -0
- package/Icon/Flowervase.mjs +6 -0
- package/Icon/Folder.mjs +6 -0
- package/Icon/FolderFill.mjs +6 -0
- package/Icon/FolderTwo.mjs +6 -0
- package/Icon/FolderTwoFill.mjs +6 -0
- package/Icon/Font.mjs +6 -0
- package/Icon/Fontstyle.mjs +6 -0
- package/Icon/Game.mjs +6 -0
- package/Icon/GameFill.mjs +6 -0
- package/Icon/GameKantan.mjs +6 -0
- package/Icon/Gear.mjs +6 -0
- package/Icon/GearFill.mjs +6 -0
- package/Icon/Genre.mjs +6 -0
- package/Icon/GenreAdd.mjs +6 -0
- package/Icon/GenreDone.mjs +6 -0
- package/Icon/GraphBar.mjs +6 -0
- package/Icon/Gruppo.mjs +6 -0
- package/Icon/HandWaveFill.mjs +6 -0
- package/Icon/Hatenabookmark.mjs +6 -0
- package/Icon/Heart.mjs +6 -0
- package/Icon/HeartFill.mjs +6 -0
- package/Icon/History.mjs +6 -0
- package/Icon/HomeFill.mjs +6 -0
- package/Icon/Hot.mjs +6 -0
- package/Icon/Htmltag.mjs +6 -0
- package/Icon/ImageAddFill.mjs +6 -0
- package/Icon/ImageBanFill.mjs +6 -0
- package/Icon/ImageFill.mjs +6 -0
- package/Icon/ImageFillSlash.mjs +6 -0
- package/Icon/ImageQuestionFill.mjs +6 -0
- package/Icon/Information.mjs +6 -0
- package/Icon/Instagram.mjs +6 -0
- package/Icon/Italic.mjs +6 -0
- package/Icon/Kaomoji.mjs +6 -0
- package/Icon/Keyboard.mjs +6 -0
- package/Icon/KeyboardDownFill.mjs +6 -0
- package/Icon/KeyboardFill.mjs +6 -0
- package/Icon/Koeblog.mjs +6 -0
- package/Icon/LineCircle.mjs +6 -0
- package/Icon/LineSquare.mjs +6 -0
- package/Icon/Link.mjs +6 -0
- package/Icon/ListBulleted.mjs +6 -0
- package/Icon/ListNumbered.mjs +6 -0
- package/Icon/Loading.mjs +6 -0
- package/Icon/LockFill.mjs +6 -0
- package/Icon/LockOpenFill.mjs +6 -0
- package/Icon/Magicwand.mjs +6 -0
- package/Icon/Mail.mjs +6 -0
- package/Icon/MailCheck.mjs +6 -0
- package/Icon/MailCircle.mjs +6 -0
- package/Icon/MailCircleFill.mjs +6 -0
- package/Icon/MailFill.mjs +6 -0
- package/Icon/Megaphone.mjs +6 -0
- package/Icon/MenuHamburger.mjs +6 -0
- package/Icon/MenuHamburgerBold.mjs +6 -0
- package/Icon/MenuHamburgerFourline.mjs +6 -0
- package/Icon/MenuHorizotal.mjs +6 -0
- package/Icon/MenuVertical.mjs +6 -0
- package/Icon/Messageboard.mjs +6 -0
- package/Icon/Microphone.mjs +6 -0
- package/Icon/MicrophoneFill.mjs +6 -0
- package/Icon/Minus.mjs +6 -0
- package/Icon/MinusBold.mjs +6 -0
- package/Icon/Moon.mjs +6 -0
- package/Icon/MoonFill.mjs +6 -0
- package/Icon/MovieCameraFill.mjs +6 -0
- package/Icon/MoviePlay.mjs +6 -0
- package/Icon/MoviePlayFill.mjs +6 -0
- package/Icon/MovieStop.mjs +6 -0
- package/Icon/MusicFill.mjs +6 -0
- package/Icon/New.mjs +6 -0
- package/Icon/Newbook.mjs +6 -0
- package/Icon/NewbookFill.mjs +6 -0
- package/Icon/News.mjs +6 -0
- package/Icon/Nice.mjs +6 -0
- package/Icon/NiceDone.mjs +6 -0
- package/Icon/Nodate.mjs +6 -0
- package/Icon/Now.mjs +6 -0
- package/Icon/Officialstar.mjs +6 -0
- package/Icon/OfficialstarFill.mjs +6 -0
- package/Icon/OnedariFill.mjs +6 -0
- package/Icon/OpenCl.mjs +6 -0
- package/Icon/Openblank.mjs +6 -0
- package/Icon/OpenblankFill.mjs +6 -0
- package/Icon/Ownd.mjs +6 -0
- package/Icon/PaletteFill.mjs +6 -0
- package/Icon/Pause.mjs +6 -0
- package/Icon/PauseBold.mjs +6 -0
- package/Icon/Pawprint.mjs +6 -0
- package/Icon/Pencil.mjs +6 -0
- package/Icon/PencilAdd.mjs +6 -0
- package/Icon/PencilBold.mjs +6 -0
- package/Icon/Person.mjs +6 -0
- package/Icon/PersonFill.mjs +6 -0
- package/Icon/PersonThreeFill.mjs +6 -0
- package/Icon/PersonTwoAddFill.mjs +6 -0
- package/Icon/PersonTwoDeleteFill.mjs +6 -0
- package/Icon/PersonTwoDoneFill.mjs +6 -0
- package/Icon/PersonTwoFill.mjs +6 -0
- package/Icon/Peta.mjs +6 -0
- package/Icon/Pigg.mjs +6 -0
- package/Icon/PinFill.mjs +6 -0
- package/Icon/PlayCircle.mjs +6 -0
- package/Icon/PlayFill.mjs +6 -0
- package/Icon/Plus.mjs +6 -0
- package/Icon/PlusBold.mjs +6 -0
- package/Icon/PlusCircle.mjs +6 -0
- package/Icon/PlusCircleFill.mjs +6 -0
- package/Icon/PremiumFill.mjs +6 -0
- package/Icon/Present.mjs +6 -0
- package/Icon/Profilecard.mjs +6 -0
- package/Icon/Qr.mjs +6 -0
- package/Icon/Question.mjs +6 -0
- package/Icon/QuestionmarkCircle.mjs +6 -0
- package/Icon/QuestionmarkCircleFill.mjs +6 -0
- package/Icon/RankingCrown.mjs +6 -0
- package/Icon/RankingCrownFill.mjs +6 -0
- package/Icon/RankingPlatformFill.mjs +6 -0
- package/Icon/Reblog.mjs +6 -0
- package/Icon/ReblogSlash.mjs +6 -0
- package/Icon/Redo.mjs +6 -0
- package/Icon/RedoBold.mjs +6 -0
- package/Icon/Refresh.mjs +6 -0
- package/Icon/ReplyCircleFill.mjs +6 -0
- package/Icon/ReplyFill.mjs +6 -0
- package/Icon/Requ.mjs +6 -0
- package/Icon/Sad.mjs +6 -0
- package/Icon/Saveblog.mjs +6 -0
- package/Icon/ScreenFull.mjs +6 -0
- package/Icon/ScreenInline.mjs +6 -0
- package/Icon/Search.mjs +6 -0
- package/Icon/Service.mjs +6 -0
- package/Icon/Share.mjs +6 -0
- package/Icon/ShineFill.mjs +6 -0
- package/Icon/Shirt.mjs +6 -0
- package/Icon/SidefaceClose.mjs +6 -0
- package/Icon/SidefaceOpen.mjs +6 -0
- package/Icon/Smartphone.mjs +6 -0
- package/Icon/SmartphoneFill.mjs +6 -0
- package/Icon/Sort.mjs +6 -0
- package/Icon/SortFeed.mjs +6 -0
- package/Icon/SortTile.mjs +6 -0
- package/Icon/SpeakerOffFill.mjs +6 -0
- package/Icon/SpeakerOnFill.mjs +6 -0
- package/Icon/Sprout.mjs +6 -0
- package/Icon/Stampside.mjs +6 -0
- package/Icon/Star.mjs +6 -0
- package/Icon/StarCircleFill.mjs +6 -0
- package/Icon/StarFaceFill.mjs +6 -0
- package/Icon/StarFill.mjs +6 -0
- package/Icon/StopFill.mjs +6 -0
- package/Icon/Strikethrough.mjs +6 -0
- package/Icon/Sun.mjs +6 -0
- package/Icon/SunFill.mjs +6 -0
- package/Icon/Switching.mjs +6 -0
- package/Icon/SwitchingCamera.mjs +6 -0
- package/Icon/TagFill.mjs +6 -0
- package/Icon/TagOfficialFill.mjs +6 -0
- package/Icon/Thumbsup.mjs +6 -0
- package/Icon/ThumbsupFill.mjs +6 -0
- package/Icon/Title.mjs +6 -0
- package/Icon/TopbloggerRibbon.mjs +6 -0
- package/Icon/TranscriptOff.mjs +6 -0
- package/Icon/TranscriptOn.mjs +6 -0
- package/Icon/Transmission.mjs +6 -0
- package/Icon/Trashcan.mjs +6 -0
- package/Icon/Trend.mjs +6 -0
- package/Icon/TrendFill.mjs +6 -0
- package/Icon/TriangleDown.mjs +6 -0
- package/Icon/TriangleLeft.mjs +6 -0
- package/Icon/TriangleRight.mjs +6 -0
- package/Icon/TriangleUp.mjs +6 -0
- package/Icon/TrianglearrowDown.mjs +6 -0
- package/Icon/TrianglearrowDownright.mjs +6 -0
- package/Icon/TrianglearrowRight.mjs +6 -0
- package/Icon/TrianglearrowUp.mjs +6 -0
- package/Icon/TrianglearrowUpright.mjs +6 -0
- package/Icon/TriangleendLeft.mjs +6 -0
- package/Icon/TriangleendRight.mjs +6 -0
- package/Icon/TrophyFill.mjs +6 -0
- package/Icon/TvFill.mjs +6 -0
- package/Icon/Twitter.mjs +6 -0
- package/Icon/Underline.mjs +6 -0
- package/Icon/Undo.mjs +6 -0
- package/Icon/UndoBold.mjs +6 -0
- package/Icon/Wallet.mjs +6 -0
- package/Icon/Webview.mjs +6 -0
- package/Icon/Youtube.mjs +6 -0
- package/Icon/index.mjs +325 -0
- package/IconButton/IconButton.mjs +5 -0
- package/IconButton/index.mjs +1 -0
- package/LinkButton/LinkButton.mjs +7 -0
- package/LinkButton/index.mjs +1 -0
- package/README.md +3 -1
- package/Toast/Toast.mjs +67 -0
- package/Toast/index.mjs +1 -0
- package/index.css +1 -1
- package/index.mjs +11 -0
- package/package.json +11 -3
- package/tsconfig.cjs.json +10 -0
- package/tsconfig.esm.json +8 -0
package/Icon/Webview.mjs
ADDED
|
@@ -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;
|
package/Icon/Youtube.mjs
ADDED
|
@@ -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
|
|
package/Toast/Toast.mjs
ADDED
|
@@ -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
|
+
};
|
package/Toast/index.mjs
ADDED
|
@@ -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, };
|