@openameba/spindle-ui 0.26.1-alpha.0 → 0.26.3
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/CHANGELOG.md +22 -22
- package/HeroCarousel/HeroCarousel.css +1 -1
- package/HeroCarousel/HeroCarouselItem.css +1 -1
- package/HeroCarousel/HeroCarouselItem.d.ts +0 -1
- package/HeroCarousel/HeroCarouselItem.d.ts.map +1 -1
- package/HeroCarousel/HeroCarouselItem.js +0 -1
- package/HeroCarousel/HeroCarouselItem.js.map +1 -1
- package/README.md +1 -3
- package/index.css +1 -1
- package/package.json +3 -11
- package/Button/Button.mjs +0 -7
- package/Button/index.mjs +0 -1
- package/ButtonGroup/ButtonGroup.mjs +0 -13
- package/ButtonGroup/index.mjs +0 -1
- package/Form/Checkbox.mjs +0 -11
- package/Form/DropDown.mjs +0 -38
- package/Form/InlineDropDown.mjs +0 -30
- package/Form/InputLabel.mjs +0 -5
- package/Form/InvalidMessage.mjs +0 -9
- package/Form/Radio.mjs +0 -11
- package/Form/TextArea.mjs +0 -5
- package/Form/TextField.mjs +0 -9
- package/Form/ToggleSwitch.mjs +0 -8
- package/Form/index.mjs +0 -8
- package/HeroCarousel/HeroCarousel.mjs +0 -27
- package/HeroCarousel/HeroCarouselItem.mjs +0 -21
- package/HeroCarousel/hooks/useAutoPlayCarousel.mjs +0 -158
- package/HeroCarousel/hooks/useAutoSlide.mjs +0 -40
- package/HeroCarousel/hooks/useCarouselFocus.mjs +0 -22
- package/HeroCarousel/hooks/useSliderMoveEvent.mjs +0 -47
- package/HeroCarousel/hooks/useSliderTransition.mjs +0 -30
- package/HeroCarousel/hooks/useValueRef.mjs +0 -8
- package/HeroCarousel/index.mjs +0 -1
- package/Icon/755.mjs +0 -6
- package/Icon/Abemakun.mjs +0 -6
- package/Icon/Abematv.mjs +0 -6
- package/Icon/Accesslink.mjs +0 -6
- package/Icon/Accesspage.mjs +0 -6
- package/Icon/AccesspageFill.mjs +0 -6
- package/Icon/AddressbookFill.mjs +0 -6
- package/Icon/AlbumAddFill.mjs +0 -6
- package/Icon/AlbumFill.mjs +0 -6
- package/Icon/AlignCenter.mjs +0 -6
- package/Icon/AlignLeft.mjs +0 -6
- package/Icon/AlignRight.mjs +0 -6
- package/Icon/AllFill.mjs +0 -6
- package/Icon/Amebacoin.mjs +0 -6
- package/Icon/Amebapick.mjs +0 -9
- package/Icon/Amegold.mjs +0 -6
- package/Icon/Amember.mjs +0 -6
- package/Icon/ArrowDown.mjs +0 -6
- package/Icon/ArrowDownBold.mjs +0 -6
- package/Icon/ArrowLeft.mjs +0 -6
- package/Icon/ArrowLeftBold.mjs +0 -6
- package/Icon/ArrowRight.mjs +0 -6
- package/Icon/ArrowRightBold.mjs +0 -6
- package/Icon/ArrowRightCircle.mjs +0 -6
- package/Icon/ArrowRightCircleFill.mjs +0 -6
- package/Icon/ArrowUp.mjs +0 -6
- package/Icon/ArrowUpBold.mjs +0 -6
- package/Icon/ArrowpagingDown.mjs +0 -6
- package/Icon/ArrowpagingDownCircle.mjs +0 -6
- package/Icon/ArrowpagingLeft.mjs +0 -6
- package/Icon/ArrowpagingLeftCircle.mjs +0 -6
- package/Icon/ArrowpagingRight.mjs +0 -6
- package/Icon/ArrowpagingRightCircle.mjs +0 -6
- package/Icon/ArrowpagingUp.mjs +0 -6
- package/Icon/ArrowpagingUpCircle.mjs +0 -6
- package/Icon/Article.mjs +0 -6
- package/Icon/ArticleSlash.mjs +0 -6
- package/Icon/Articledesign.mjs +0 -6
- package/Icon/Astrogy.mjs +0 -6
- package/Icon/AstrogyFill.mjs +0 -6
- package/Icon/Baby.mjs +0 -7
- package/Icon/Bbs.mjs +0 -6
- package/Icon/Beginner.mjs +0 -6
- package/Icon/Bell.mjs +0 -6
- package/Icon/BellFill.mjs +0 -6
- package/Icon/BellFillSlash.mjs +0 -6
- package/Icon/BellSlash.mjs +0 -6
- package/Icon/Blog.mjs +0 -6
- package/Icon/Bold.mjs +0 -6
- package/Icon/Book.mjs +0 -6
- package/Icon/BookFill.mjs +0 -6
- package/Icon/Bookmark.mjs +0 -6
- package/Icon/BookmarkFill.mjs +0 -6
- package/Icon/Bookshelf.mjs +0 -6
- package/Icon/BookshelfFill.mjs +0 -6
- package/Icon/Border.mjs +0 -6
- package/Icon/BottomnavFollowfeedActive.mjs +0 -6
- package/Icon/BottomnavFollowfeedInactive.mjs +0 -6
- package/Icon/BottomnavHomeActive.mjs +0 -6
- package/Icon/BottomnavHomeInactive.mjs +0 -6
- package/Icon/BottomnavMypageActive.mjs +0 -6
- package/Icon/BottomnavSearchActive.mjs +0 -6
- package/Icon/BottomnavSearchInactive.mjs +0 -6
- package/Icon/BottomnvavMypageInactive.mjs +0 -6
- package/Icon/Bullets.mjs +0 -6
- package/Icon/Calendar.mjs +0 -6
- package/Icon/CameraFill.mjs +0 -6
- package/Icon/CautionFill.mjs +0 -6
- package/Icon/Check.mjs +0 -6
- package/Icon/CheckBold.mjs +0 -6
- package/Icon/CheckCircle.mjs +0 -6
- package/Icon/CheckCircleFill.mjs +0 -6
- package/Icon/CheckRectangle.mjs +0 -6
- package/Icon/Checklist.mjs +0 -6
- package/Icon/ChevronDown.mjs +0 -6
- package/Icon/ChevronDownBold.mjs +0 -6
- package/Icon/ChevronLeft.mjs +0 -6
- package/Icon/ChevronLeftBold.mjs +0 -6
- package/Icon/ChevronRight.mjs +0 -6
- package/Icon/ChevronRightBold.mjs +0 -6
- package/Icon/ChevronUp.mjs +0 -6
- package/Icon/ChevronUpBold.mjs +0 -6
- package/Icon/Circle.mjs +0 -6
- package/Icon/CircleBold.mjs +0 -6
- package/Icon/CircleFill.mjs +0 -6
- package/Icon/Clock.mjs +0 -6
- package/Icon/ClockFill.mjs +0 -6
- package/Icon/Coin.mjs +0 -6
- package/Icon/Comment.mjs +0 -6
- package/Icon/CommentFill.mjs +0 -6
- package/Icon/CommentPen.mjs +0 -6
- package/Icon/CommentTwoFill.mjs +0 -6
- package/Icon/CommentTwoSlashFill.mjs +0 -6
- package/Icon/Community.mjs +0 -6
- package/Icon/Compass.mjs +0 -7
- package/Icon/Coupon.mjs +0 -6
- package/Icon/Crop.mjs +0 -6
- package/Icon/CropDin.mjs +0 -6
- package/Icon/CropLandscape.mjs +0 -6
- package/Icon/Cross.mjs +0 -6
- package/Icon/CrossBold.mjs +0 -6
- package/Icon/CrossCircle.mjs +0 -6
- package/Icon/CrossCircleFill.mjs +0 -6
- package/Icon/CrossRectangle.mjs +0 -6
- package/Icon/Cutlery.mjs +0 -6
- package/Icon/DiamondTwo.mjs +0 -11
- package/Icon/Dice.mjs +0 -7
- package/Icon/Dot.mjs +0 -6
- package/Icon/Dotmoney.mjs +0 -6
- package/Icon/Download.mjs +0 -6
- package/Icon/Embed.mjs +0 -6
- package/Icon/EmotionFill.mjs +0 -6
- package/Icon/EntryLost.mjs +0 -6
- package/Icon/Exclamationmark.mjs +0 -6
- package/Icon/ExclamationmarkBalloon.mjs +0 -6
- package/Icon/ExclamationmarkBalloonFill.mjs +0 -6
- package/Icon/ExclamationmarkBold.mjs +0 -6
- package/Icon/ExclamationmarkCircle.mjs +0 -6
- package/Icon/ExclamationmarkCircleFill.mjs +0 -6
- package/Icon/Expand.mjs +0 -6
- package/Icon/ExpandExit.mjs +0 -6
- package/Icon/Facebook.mjs +0 -6
- package/Icon/File.mjs +0 -6
- package/Icon/FileAdd.mjs +0 -6
- package/Icon/FileAddFill.mjs +0 -6
- package/Icon/FileCircle.mjs +0 -6
- package/Icon/FileCircleFill.mjs +0 -6
- package/Icon/FileFill.mjs +0 -6
- package/Icon/Filter.mjs +0 -6
- package/Icon/FilterCheck.mjs +0 -6
- package/Icon/Fit.mjs +0 -6
- package/Icon/FlagFill.mjs +0 -6
- package/Icon/FlagRanking.mjs +0 -6
- package/Icon/FlagRankingTrim.mjs +0 -10
- package/Icon/Flash.mjs +0 -6
- package/Icon/FlashAuto.mjs +0 -6
- package/Icon/FlashOff.mjs +0 -6
- package/Icon/Flowervase.mjs +0 -6
- package/Icon/Folder.mjs +0 -6
- package/Icon/FolderFill.mjs +0 -6
- package/Icon/FolderTwo.mjs +0 -6
- package/Icon/FolderTwoFill.mjs +0 -6
- package/Icon/Font.mjs +0 -6
- package/Icon/Fontstyle.mjs +0 -6
- package/Icon/Game.mjs +0 -6
- package/Icon/GameFill.mjs +0 -6
- package/Icon/GameKantan.mjs +0 -6
- package/Icon/Gear.mjs +0 -6
- package/Icon/GearFill.mjs +0 -6
- package/Icon/Genre.mjs +0 -6
- package/Icon/GenreAdd.mjs +0 -6
- package/Icon/GenreDone.mjs +0 -6
- package/Icon/GraphBar.mjs +0 -6
- package/Icon/Gruppo.mjs +0 -6
- package/Icon/HandWaveFill.mjs +0 -6
- package/Icon/Hatenabookmark.mjs +0 -6
- package/Icon/Heart.mjs +0 -6
- package/Icon/HeartFill.mjs +0 -6
- package/Icon/History.mjs +0 -6
- package/Icon/HomeFill.mjs +0 -6
- package/Icon/Hot.mjs +0 -6
- package/Icon/Htmltag.mjs +0 -6
- package/Icon/ImageAddFill.mjs +0 -6
- package/Icon/ImageBanFill.mjs +0 -6
- package/Icon/ImageFill.mjs +0 -6
- package/Icon/ImageFillSlash.mjs +0 -6
- package/Icon/ImageQuestionFill.mjs +0 -6
- package/Icon/Information.mjs +0 -6
- package/Icon/Instagram.mjs +0 -6
- package/Icon/Italic.mjs +0 -6
- package/Icon/Kaomoji.mjs +0 -6
- package/Icon/Keyboard.mjs +0 -6
- package/Icon/KeyboardDownFill.mjs +0 -6
- package/Icon/KeyboardFill.mjs +0 -6
- package/Icon/Koeblog.mjs +0 -6
- package/Icon/LineCircle.mjs +0 -6
- package/Icon/LineSquare.mjs +0 -6
- package/Icon/Link.mjs +0 -6
- package/Icon/ListBulleted.mjs +0 -6
- package/Icon/ListNumbered.mjs +0 -6
- package/Icon/Loading.mjs +0 -6
- package/Icon/LockFill.mjs +0 -6
- package/Icon/LockOpenFill.mjs +0 -6
- package/Icon/Magicwand.mjs +0 -6
- package/Icon/Mail.mjs +0 -6
- package/Icon/MailCheck.mjs +0 -6
- package/Icon/MailCircle.mjs +0 -6
- package/Icon/MailCircleFill.mjs +0 -6
- package/Icon/MailFill.mjs +0 -6
- package/Icon/Megaphone.mjs +0 -6
- package/Icon/MenuHamburger.mjs +0 -6
- package/Icon/MenuHamburgerBold.mjs +0 -6
- package/Icon/MenuHamburgerFourline.mjs +0 -6
- package/Icon/MenuHorizotal.mjs +0 -6
- package/Icon/MenuVertical.mjs +0 -6
- package/Icon/Messageboard.mjs +0 -6
- package/Icon/Microphone.mjs +0 -6
- package/Icon/MicrophoneFill.mjs +0 -6
- package/Icon/Minus.mjs +0 -6
- package/Icon/MinusBold.mjs +0 -6
- package/Icon/Moon.mjs +0 -6
- package/Icon/MoonFill.mjs +0 -6
- package/Icon/MovieCameraFill.mjs +0 -6
- package/Icon/MoviePlay.mjs +0 -6
- package/Icon/MoviePlayFill.mjs +0 -6
- package/Icon/MovieStop.mjs +0 -6
- package/Icon/MusicFill.mjs +0 -6
- package/Icon/New.mjs +0 -6
- package/Icon/Newbook.mjs +0 -6
- package/Icon/NewbookFill.mjs +0 -6
- package/Icon/News.mjs +0 -6
- package/Icon/Nice.mjs +0 -6
- package/Icon/NiceDone.mjs +0 -6
- package/Icon/Nodate.mjs +0 -6
- package/Icon/Now.mjs +0 -6
- package/Icon/Officialstar.mjs +0 -6
- package/Icon/OfficialstarFill.mjs +0 -6
- package/Icon/OnedariFill.mjs +0 -6
- package/Icon/OpenCl.mjs +0 -6
- package/Icon/Openblank.mjs +0 -6
- package/Icon/OpenblankFill.mjs +0 -6
- package/Icon/Ownd.mjs +0 -6
- package/Icon/PaletteFill.mjs +0 -6
- package/Icon/Pause.mjs +0 -6
- package/Icon/PauseBold.mjs +0 -6
- package/Icon/Pawprint.mjs +0 -6
- package/Icon/Pencil.mjs +0 -6
- package/Icon/PencilAdd.mjs +0 -6
- package/Icon/PencilBold.mjs +0 -6
- package/Icon/Person.mjs +0 -6
- package/Icon/PersonFill.mjs +0 -6
- package/Icon/PersonThreeFill.mjs +0 -6
- package/Icon/PersonTwoAddFill.mjs +0 -6
- package/Icon/PersonTwoDeleteFill.mjs +0 -6
- package/Icon/PersonTwoDoneFill.mjs +0 -6
- package/Icon/PersonTwoFill.mjs +0 -6
- package/Icon/Peta.mjs +0 -6
- package/Icon/Pigg.mjs +0 -6
- package/Icon/PinFill.mjs +0 -6
- package/Icon/PlayCircle.mjs +0 -6
- package/Icon/PlayFill.mjs +0 -6
- package/Icon/Plus.mjs +0 -6
- package/Icon/PlusBold.mjs +0 -6
- package/Icon/PlusCircle.mjs +0 -6
- package/Icon/PlusCircleFill.mjs +0 -6
- package/Icon/PremiumFill.mjs +0 -6
- package/Icon/Present.mjs +0 -6
- package/Icon/Profilecard.mjs +0 -6
- package/Icon/Qr.mjs +0 -6
- package/Icon/Question.mjs +0 -6
- package/Icon/QuestionmarkCircle.mjs +0 -6
- package/Icon/QuestionmarkCircleFill.mjs +0 -6
- package/Icon/RankingCrown.mjs +0 -6
- package/Icon/RankingCrownFill.mjs +0 -6
- package/Icon/RankingPlatformFill.mjs +0 -6
- package/Icon/Reblog.mjs +0 -6
- package/Icon/ReblogSlash.mjs +0 -6
- package/Icon/Redo.mjs +0 -6
- package/Icon/RedoBold.mjs +0 -6
- package/Icon/Refresh.mjs +0 -6
- package/Icon/ReplyCircleFill.mjs +0 -6
- package/Icon/ReplyFill.mjs +0 -6
- package/Icon/Requ.mjs +0 -6
- package/Icon/Sad.mjs +0 -6
- package/Icon/Saveblog.mjs +0 -6
- package/Icon/ScreenFull.mjs +0 -6
- package/Icon/ScreenInline.mjs +0 -6
- package/Icon/Search.mjs +0 -6
- package/Icon/Service.mjs +0 -6
- package/Icon/Share.mjs +0 -6
- package/Icon/ShineFill.mjs +0 -6
- package/Icon/Shirt.mjs +0 -6
- package/Icon/SidefaceClose.mjs +0 -6
- package/Icon/SidefaceOpen.mjs +0 -6
- package/Icon/Smartphone.mjs +0 -6
- package/Icon/SmartphoneFill.mjs +0 -6
- package/Icon/Sort.mjs +0 -6
- package/Icon/SortFeed.mjs +0 -6
- package/Icon/SortTile.mjs +0 -6
- package/Icon/SpeakerOffFill.mjs +0 -6
- package/Icon/SpeakerOnFill.mjs +0 -6
- package/Icon/Sprout.mjs +0 -6
- package/Icon/Stampside.mjs +0 -6
- package/Icon/Star.mjs +0 -6
- package/Icon/StarCircleFill.mjs +0 -6
- package/Icon/StarFaceFill.mjs +0 -6
- package/Icon/StarFill.mjs +0 -6
- package/Icon/StopFill.mjs +0 -6
- package/Icon/Strikethrough.mjs +0 -6
- package/Icon/Sun.mjs +0 -6
- package/Icon/SunFill.mjs +0 -6
- package/Icon/Switching.mjs +0 -6
- package/Icon/SwitchingCamera.mjs +0 -6
- package/Icon/TagFill.mjs +0 -6
- package/Icon/TagOfficialFill.mjs +0 -6
- package/Icon/Thumbsup.mjs +0 -6
- package/Icon/ThumbsupFill.mjs +0 -6
- package/Icon/Title.mjs +0 -6
- package/Icon/TopbloggerRibbon.mjs +0 -6
- package/Icon/TranscriptOff.mjs +0 -6
- package/Icon/TranscriptOn.mjs +0 -6
- package/Icon/Transmission.mjs +0 -6
- package/Icon/Trashcan.mjs +0 -6
- package/Icon/Trend.mjs +0 -6
- package/Icon/TrendFill.mjs +0 -6
- package/Icon/TriangleDown.mjs +0 -6
- package/Icon/TriangleLeft.mjs +0 -6
- package/Icon/TriangleRight.mjs +0 -6
- package/Icon/TriangleUp.mjs +0 -6
- package/Icon/TrianglearrowDown.mjs +0 -6
- package/Icon/TrianglearrowDownright.mjs +0 -6
- package/Icon/TrianglearrowRight.mjs +0 -6
- package/Icon/TrianglearrowUp.mjs +0 -6
- package/Icon/TrianglearrowUpright.mjs +0 -6
- package/Icon/TriangleendLeft.mjs +0 -6
- package/Icon/TriangleendRight.mjs +0 -6
- package/Icon/TrophyFill.mjs +0 -6
- package/Icon/TvFill.mjs +0 -6
- package/Icon/Twitter.mjs +0 -6
- package/Icon/Underline.mjs +0 -6
- package/Icon/Undo.mjs +0 -6
- package/Icon/UndoBold.mjs +0 -6
- package/Icon/Wallet.mjs +0 -6
- package/Icon/Webview.mjs +0 -6
- package/Icon/Youtube.mjs +0 -6
- package/Icon/index.mjs +0 -325
- package/IconButton/IconButton.mjs +0 -5
- package/IconButton/index.mjs +0 -1
- package/LinkButton/LinkButton.mjs +0 -7
- package/LinkButton/index.mjs +0 -1
- package/Toast/Toast.mjs +0 -67
- package/Toast/index.mjs +0 -1
- package/index.mjs +0 -10
- package/tsconfig.cjs.json +0 -10
- package/tsconfig.esm.json +0 -8
package/CHANGELOG.md
CHANGED
|
@@ -3,30 +3,45 @@
|
|
|
3
3
|
All notable changes to this project will be documented in this file.
|
|
4
4
|
See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
|
|
5
5
|
|
|
6
|
-
## [0.26.
|
|
6
|
+
## [0.26.3](https://github.com/openameba/spindle/compare/@openameba/spindle-ui@0.26.2...@openameba/spindle-ui@0.26.3) (2022-03-14)
|
|
7
7
|
|
|
8
8
|
|
|
9
9
|
### Bug Fixes
|
|
10
10
|
|
|
11
|
-
* **spindle-ui:**
|
|
11
|
+
* **spindle-ui:** fix HeroCarousel image size ([fa5cd3c](https://github.com/openameba/spindle/commit/fa5cd3c0e4383070e217364e0f19a0599d3ce6ae))
|
|
12
12
|
|
|
13
13
|
|
|
14
14
|
|
|
15
15
|
|
|
16
16
|
|
|
17
|
-
|
|
17
|
+
## [0.26.2](https://github.com/openameba/spindle/compare/@openameba/spindle-ui@0.26.1...@openameba/spindle-ui@0.26.2) (2022-02-25)
|
|
18
|
+
|
|
19
|
+
|
|
20
|
+
### Bug Fixes
|
|
21
|
+
|
|
22
|
+
* **spindle-ui:** do not use CSS import in component ([af07e81](https://github.com/openameba/spindle/commit/af07e8177a13bed7ef2c8b42981cc3e6189950b2))
|
|
23
|
+
|
|
24
|
+
|
|
25
|
+
|
|
26
|
+
|
|
27
|
+
|
|
28
|
+
## [0.26.1](https://github.com/openameba/spindle/compare/@openameba/spindle-ui@0.26.0...@openameba/spindle-ui@0.26.1) (2022-02-24)
|
|
18
29
|
|
|
19
30
|
|
|
20
31
|
### Features
|
|
21
32
|
|
|
22
|
-
* **spindle-ui:**
|
|
33
|
+
* **spindle-ui:** fix HeroCarousel design ([ae1526b](https://github.com/openameba/spindle/commit/ae1526b6ee23cb1b9d6eb1af72438903c520c474))
|
|
23
34
|
|
|
24
|
-
## [0.25.2-alpha.0](https://github.com/openameba/spindle/compare/@openameba/spindle-ui@0.25.1...@openameba/spindle-ui@0.25.2-alpha.0) (2021-12-09)
|
|
25
35
|
|
|
26
36
|
|
|
27
|
-
### Bug Fixes
|
|
28
37
|
|
|
29
|
-
|
|
38
|
+
|
|
39
|
+
# [0.26.0](https://github.com/openameba/spindle/compare/@openameba/spindle-ui@0.25.1...@openameba/spindle-ui@0.26.0) (2022-02-21)
|
|
40
|
+
|
|
41
|
+
|
|
42
|
+
### Features
|
|
43
|
+
|
|
44
|
+
* **spindle-ui:** add HeroCarousel component ([d7e0a53](https://github.com/openameba/spindle/commit/d7e0a5302cfca4d7600188098ef4dd224998e2bb))
|
|
30
45
|
|
|
31
46
|
|
|
32
47
|
|
|
@@ -88,19 +103,12 @@ See [Conventional Commits](https://conventionalcommits.org) for commit guideline
|
|
|
88
103
|
### Features
|
|
89
104
|
|
|
90
105
|
* **spindle-icons:** update icons ([39ce767](https://github.com/openameba/spindle/commit/39ce7673df4556ee3b9a6ea6dc62ad25236a6fc9))
|
|
91
|
-
## [0.22.1-alpha.0](https://github.com/openameba/spindle/compare/@openameba/spindle-ui@0.22.0...@openameba/spindle-ui@0.22.1-alpha.0) (2021-09-06)
|
|
92
|
-
|
|
93
|
-
|
|
94
|
-
### Bug Fixes
|
|
95
|
-
|
|
96
|
-
* **spindle-ui:** set side effect for css ([f26be31](https://github.com/openameba/spindle/commit/f26be31bf53ec73fbe00222773ba691809dae5d5))
|
|
97
106
|
|
|
98
107
|
|
|
99
108
|
|
|
100
109
|
|
|
101
110
|
|
|
102
111
|
# [0.22.0](https://github.com/openameba/spindle/compare/@openameba/spindle-ui@0.21.2...@openameba/spindle-ui@0.22.0) (2021-09-06)
|
|
103
|
-
## [0.21.3-alpha.0](https://github.com/openameba/spindle/compare/@openameba/spindle-ui@0.21.2...@openameba/spindle-ui@0.21.3-alpha.0) (2021-07-30)
|
|
104
112
|
|
|
105
113
|
|
|
106
114
|
### Bug Fixes
|
|
@@ -122,14 +130,12 @@ See [Conventional Commits](https://conventionalcommits.org) for commit guideline
|
|
|
122
130
|
### BREAKING CHANGES
|
|
123
131
|
|
|
124
132
|
* **spindle-icons,spindle-ui:** setting icon was renamed to gear
|
|
125
|
-
* **spindle-ui:** set side effect for css ([ec4e8f1](https://github.com/openameba/spindle/commit/ec4e8f143cd6769cc6b3d49534233a46eaf79b2d))
|
|
126
133
|
|
|
127
134
|
|
|
128
135
|
|
|
129
136
|
|
|
130
137
|
|
|
131
138
|
## [0.21.2](https://github.com/openameba/spindle/compare/@openameba/spindle-ui@0.21.1...@openameba/spindle-ui@0.21.2) (2021-07-30)
|
|
132
|
-
## [0.21.2-alpha.0](https://github.com/openameba/spindle/compare/@openameba/spindle-ui@0.21.1...@openameba/spindle-ui@0.21.2-alpha.0) (2021-07-28)
|
|
133
139
|
|
|
134
140
|
**Note:** Version bump only for package @openameba/spindle-ui
|
|
135
141
|
|
|
@@ -190,9 +196,6 @@ See [Conventional Commits](https://conventionalcommits.org) for commit guideline
|
|
|
190
196
|
### Features
|
|
191
197
|
|
|
192
198
|
* **spindle-icons:** update icons ([ae07c8e](https://github.com/openameba/spindle/commit/ae07c8eca4f33789c45b3c3d6a2e7f8f17c11e81))
|
|
193
|
-
## [0.18.1-alpha.0](https://github.com/openameba/spindle/compare/@openameba/spindle-ui@0.18.0...@openameba/spindle-ui@0.18.1-alpha.0) (2021-06-11)
|
|
194
|
-
|
|
195
|
-
**Note:** Version bump only for package @openameba/spindle-ui
|
|
196
199
|
|
|
197
200
|
|
|
198
201
|
|
|
@@ -248,9 +251,6 @@ See [Conventional Commits](https://conventionalcommits.org) for commit guideline
|
|
|
248
251
|
### Bug Fixes
|
|
249
252
|
|
|
250
253
|
* **spindle-ui:** fix CSS variable name ([f76d2ee](https://github.com/openameba/spindle/commit/f76d2ee1840574a1247a20ea1ee212b85d99708e))
|
|
251
|
-
# [0.15.0-alpha.0](https://github.com/openameba/spindle/compare/@openameba/spindle-ui@0.14.0...@openameba/spindle-ui@0.15.0-alpha.0) (2021-03-15)
|
|
252
|
-
|
|
253
|
-
**Note:** Version bump only for package @openameba/spindle-ui
|
|
254
254
|
|
|
255
255
|
|
|
256
256
|
|
|
@@ -1 +1 @@
|
|
|
1
|
-
:root{--
|
|
1
|
+
: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}}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
: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}.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%}.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}.spui-HeroCarouselItem-titleContainer{height:3.3em}.spui-HeroCarouselItem-title{font-size:1em}.spui-HeroCarouselItem-imageBlock{height:10.9em}}
|
|
1
|
+
: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%;-o-object-fit:cover;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}}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"HeroCarouselItem.d.ts","sourceRoot":"","sources":["../../src/HeroCarousel/HeroCarouselItem.tsx"],"names":[],"mappings":"AAAA,OAAc,EAAe,EAAE,EAAE,MAAM,OAAO,CAAC;
|
|
1
|
+
{"version":3,"file":"HeroCarouselItem.d.ts","sourceRoot":"","sources":["../../src/HeroCarousel/HeroCarouselItem.tsx"],"names":[],"mappings":"AAAA,OAAc,EAAe,EAAE,EAAE,MAAM,OAAO,CAAC;AAE/C,oBAAY,YAAY,GAAG;IACzB,QAAQ,EAAE,MAAM,CAAC;IACjB,IAAI,EAAE,MAAM,CAAC;IACb,KAAK,EAAE,MAAM,CAAC;CACf,CAAC;AAEF,aAAK,KAAK,GAAG;IACX,YAAY,EAAE,YAAY,CAAC;IAC3B,aAAa,EAAE,OAAO,CAAC;IACvB,iBAAiB,EAAE,MAAM,CAAC;CAC3B,CAAC;AAIF,eAAO,MAAM,gBAAgB,EAAE,EAAE,CAAC,KAAK,CA0CtC,CAAC;AAEF,eAAe,gBAAgB,CAAC"}
|
|
@@ -21,7 +21,6 @@ var __importStar = (this && this.__importStar) || function (mod) {
|
|
|
21
21
|
Object.defineProperty(exports, "__esModule", { value: true });
|
|
22
22
|
exports.HeroCarouselItem = void 0;
|
|
23
23
|
var react_1 = __importStar(require("react"));
|
|
24
|
-
require("./HeroCarouselItem.css");
|
|
25
24
|
var BLOCK_NAME = 'spui-HeroCarouselItem';
|
|
26
25
|
exports.HeroCarouselItem = react_1.default.memo(function HeroCarouselItem(_a) {
|
|
27
26
|
var carouselItem = _a.carouselItem, isLinkClicked = _a.isLinkClicked, itemLinkClassName = _a.itemLinkClassName;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"HeroCarouselItem.js","sourceRoot":"","sources":["../../src/HeroCarousel/HeroCarouselItem.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;AAAA,6CAA+C;
|
|
1
|
+
{"version":3,"file":"HeroCarouselItem.js","sourceRoot":"","sources":["../../src/HeroCarousel/HeroCarouselItem.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;AAAA,6CAA+C;AAc/C,IAAM,UAAU,GAAG,uBAAuB,CAAC;AAE9B,QAAA,gBAAgB,GAAc,eAAK,CAAC,IAAI,CACnD,SAAS,gBAAgB,CAAC,EAIzB;QAHC,YAAY,kBAAA,EACZ,aAAa,mBAAA,EACb,iBAAiB,uBAAA;IAEjB,IAAM,eAAe,GAAG,mBAAW,CACjC,UAAC,CAAyC;QACxC,IAAI,CAAC,aAAa,EAAE;YAClB,CAAC,CAAC,cAAc,EAAE,CAAC;SACpB;IACH,CAAC,EACD,CAAC,aAAa,CAAC,CAChB,CAAC;IAEF,OAAO,CACL,sCAAI,SAAS,EAAK,UAAU,cAAW;QACrC,qCACE,SAAS,EAAK,iBAAiB,SAAI,UAAU,UAAO,EACpD,IAAI,EAAE,YAAY,CAAC,IAAI,EACvB,OAAO,EAAE,eAAe;YAExB,wCAAM,SAAS,EAAK,UAAU,gBAAa;gBACzC,uCACE,GAAG,EAAC,EAAE,EACN,SAAS,EAAK,UAAU,WAAQ,EAChC,GAAG,EAAE,YAAY,CAAC,QAAQ,GAC1B,CACG;YACP,uCAAK,SAAS,EAAK,UAAU,oBAAiB;gBAC5C,qCAAG,SAAS,EAAK,UAAU,WAAQ,IAAG,YAAY,CAAC,KAAK,CAAK,CACzD,CACJ,CACD,CACN,CAAC;AACJ,CAAC,EACD,UAAC,SAAS,EAAE,SAAS;IACnB,OAAA,SAAS,CAAC,aAAa,KAAK,SAAS,CAAC,aAAa;QACnD,SAAS,CAAC,iBAAiB,KAAK,SAAS,CAAC,iBAAiB;QAC3D,SAAS,CAAC,YAAY,CAAC,KAAK,KAAK,SAAS,CAAC,YAAY,CAAC,KAAK;QAC7D,SAAS,CAAC,YAAY,CAAC,IAAI,KAAK,SAAS,CAAC,YAAY,CAAC,IAAI;QAC3D,SAAS,CAAC,YAAY,CAAC,QAAQ,KAAK,SAAS,CAAC,YAAY,CAAC,QAAQ;AAJnE,CAImE,CACtE,CAAC;AAEF,kBAAe,wBAAgB,CAAC"}
|
package/README.md
CHANGED
|
@@ -37,9 +37,7 @@ function App() {
|
|
|
37
37
|
ReactDOM.render(<App />, document.querySelector('#app'));
|
|
38
38
|
```
|
|
39
39
|
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
さらなる詳細は[コンポーネント一覧](#コンポーネント一覧)、[サンプルアプリケーション](#サンプルアプリケーション)を参照してください。
|
|
40
|
+
詳細は[コンポーネント一覧](#コンポーネント一覧)、[サンプルアプリケーション](#サンプルアプリケーション)を参照してください。
|
|
43
41
|
|
|
44
42
|
> **_NOTE:_** アイコン利用時は[Spindle IconsのReactコンポーネント](/packages/spindle-icons#react)を読み、注意点を確認してください。
|
|
45
43
|
|
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);--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{--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:11.6em;justify-content:center;overflow:hidden;padding:.6rem 0}.spui-HeroCarousel-list{display:flex;margin-right:.88em;padding:0 .44em;transition:transform .5s;width:16.7em}.spui-HeroCarousel-controls{align-items:center;border:1px solid var(--color-border-low-emphasis);border-radius:100px;display:flex;margin:.88em auto 0;width:fit-content}.spui-HeroCarousel-control{align-items:center;background-color:transparent;border:none;display:flex;height:3em;justify-content:center;padding:0;width:3em}.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:13em}.spui-HeroCarousel-list{margin-right:1.5em;padding:0 .75em;width:18.5em}.spui-HeroCarousel-controls{margin-top:1.25em}.spui-HeroCarousel-control{height:3.3em;width:3.3em}}.spui-HeroCarousel-control>svg{color:var(--color-text-low-emphasis);height:1.35em;width:1.35em}@media screen and (min-width:768px){.spui-HeroCarousel-control>svg{height:1.5em;width:1.5em}}: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);--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/package.json
CHANGED
|
@@ -1,13 +1,9 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@openameba/spindle-ui",
|
|
3
|
-
"version": "0.26.
|
|
3
|
+
"version": "0.26.3",
|
|
4
4
|
"main": "./index.js",
|
|
5
|
-
"module": "./index.mjs",
|
|
6
5
|
"types": "./index.d.ts",
|
|
7
6
|
"style": "./index.css",
|
|
8
|
-
"sideEffects": [
|
|
9
|
-
"*.css"
|
|
10
|
-
],
|
|
11
7
|
"scripts": {
|
|
12
8
|
"test": "run-p bundlesize lint test:interaction",
|
|
13
9
|
"lint": "yarn lint:style",
|
|
@@ -26,11 +22,7 @@
|
|
|
26
22
|
"cp": "npx cpx 'dist/**/*' .",
|
|
27
23
|
"prebuild": "yarn clean",
|
|
28
24
|
"build": "run-p build:*",
|
|
29
|
-
"build:script": "
|
|
30
|
-
"build:script:cjs": "tsc -p tsconfig.cjs.json",
|
|
31
|
-
"build:script:esm": "run-s build:script:esm:*",
|
|
32
|
-
"build:script:esm:js": "tsc -p tsconfig.esm.json",
|
|
33
|
-
"build:script:esm:rename": "npx renamer --find js --replace mjs 'dist/**'",
|
|
25
|
+
"build:script": "tsc",
|
|
34
26
|
"build:style": "postcss src/**/*.css src/*.css --base src -d dist/",
|
|
35
27
|
"preicon": "npx rimraf 'src/Icon/!(*.stories).tsx' && npx cpx '../spindle-icons/dist/svg/!(sprite).svg' icon-tmp",
|
|
36
28
|
"icon": "svgr --out-dir src/Icon icon-tmp",
|
|
@@ -80,5 +72,5 @@
|
|
|
80
72
|
"stylelint-selector-bem-pattern": "^2.1.0",
|
|
81
73
|
"ts-jest": "^27.0.0"
|
|
82
74
|
},
|
|
83
|
-
"gitHead": "
|
|
75
|
+
"gitHead": "fcce6f89102da4087f419288cf445fe725848dd7"
|
|
84
76
|
}
|
package/Button/Button.mjs
DELETED
|
@@ -1,7 +0,0 @@
|
|
|
1
|
-
import React, { forwardRef } from 'react';
|
|
2
|
-
const BLOCK_NAME = 'spui-Button';
|
|
3
|
-
export const Button = forwardRef(function Button({ children, layout = 'intrinsic', size = 'large', variant = 'contained', icon, ...rest }, ref) {
|
|
4
|
-
return (React.createElement("button", 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
|
-
});
|
package/Button/index.mjs
DELETED
|
@@ -1 +0,0 @@
|
|
|
1
|
-
export { Button } from './Button';
|
|
@@ -1,13 +0,0 @@
|
|
|
1
|
-
import React from 'react';
|
|
2
|
-
const BLOCK_NAME = 'spui-ButtonGroup';
|
|
3
|
-
export const ButtonGroup = ({ children, className, direction = 'row', size = 'large', ...rest }) => {
|
|
4
|
-
const classnames = [
|
|
5
|
-
BLOCK_NAME,
|
|
6
|
-
`${BLOCK_NAME}--${direction}`,
|
|
7
|
-
`${BLOCK_NAME}--${size}`,
|
|
8
|
-
className,
|
|
9
|
-
]
|
|
10
|
-
.filter(Boolean)
|
|
11
|
-
.join(' ');
|
|
12
|
-
return (React.createElement("div", Object.assign({ className: classnames }, rest), children));
|
|
13
|
-
};
|
package/ButtonGroup/index.mjs
DELETED
|
@@ -1 +0,0 @@
|
|
|
1
|
-
export { ButtonGroup } from './ButtonGroup';
|
package/Form/Checkbox.mjs
DELETED
|
@@ -1,11 +0,0 @@
|
|
|
1
|
-
import React, { forwardRef } from 'react';
|
|
2
|
-
import { CheckBold } from '../Icon';
|
|
3
|
-
const BLOCK_NAME = 'spui-Checkbox';
|
|
4
|
-
export const Checkbox = forwardRef(function Checkbox({ children, ...rest }, ref) {
|
|
5
|
-
return (React.createElement("label", { className: `${BLOCK_NAME}-label` },
|
|
6
|
-
React.createElement("input", Object.assign({ className: `${BLOCK_NAME}-input`, ref: ref, type: "checkbox" }, rest)),
|
|
7
|
-
React.createElement("span", { className: `${BLOCK_NAME}-icon` },
|
|
8
|
-
React.createElement(CheckBold, { "aria-hidden": "true" })),
|
|
9
|
-
React.createElement("span", { className: `${BLOCK_NAME}-outline` }),
|
|
10
|
-
children && React.createElement("span", { className: `${BLOCK_NAME}-text` }, children)));
|
|
11
|
-
});
|
package/Form/DropDown.mjs
DELETED
|
@@ -1,38 +0,0 @@
|
|
|
1
|
-
import React, { forwardRef, useEffect, useRef, useState } from 'react';
|
|
2
|
-
import mergeRefs from 'react-merge-refs';
|
|
3
|
-
import { ChevronDownBold } from '../Icon';
|
|
4
|
-
const BLOCK_NAME = 'spui-DropDown';
|
|
5
|
-
export const DropDown = forwardRef(function DropDown({ children, hasError = false, onChange, ...rest }, ref) {
|
|
6
|
-
const selectEl = useRef(null);
|
|
7
|
-
const [text, setText] = useState('');
|
|
8
|
-
const [disabled, setDisabled] = useState(false);
|
|
9
|
-
const update = () => {
|
|
10
|
-
if (selectEl && selectEl.current) {
|
|
11
|
-
const selectedEl = selectEl.current.options[selectEl.current.selectedIndex];
|
|
12
|
-
const value = selectedEl.text;
|
|
13
|
-
const disabled = selectedEl.disabled;
|
|
14
|
-
setText(value);
|
|
15
|
-
setDisabled(disabled);
|
|
16
|
-
}
|
|
17
|
-
};
|
|
18
|
-
const handleChange = (event) => {
|
|
19
|
-
if (typeof onChange === 'function') {
|
|
20
|
-
onChange(event);
|
|
21
|
-
}
|
|
22
|
-
update();
|
|
23
|
-
};
|
|
24
|
-
// Update text once
|
|
25
|
-
useEffect(update, []);
|
|
26
|
-
return (React.createElement("label", { className: [
|
|
27
|
-
`${BLOCK_NAME}-label`,
|
|
28
|
-
!disabled ? 'is-active' : '',
|
|
29
|
-
hasError ? 'is-error' : '',
|
|
30
|
-
]
|
|
31
|
-
.filter(Boolean)
|
|
32
|
-
.join(' ') },
|
|
33
|
-
React.createElement("span", { className: `${BLOCK_NAME}-visual` }, text),
|
|
34
|
-
React.createElement("span", { className: `${BLOCK_NAME}-icon` },
|
|
35
|
-
React.createElement(ChevronDownBold, { "aria-hidden": "true" })),
|
|
36
|
-
React.createElement("select", Object.assign({ className: `${BLOCK_NAME}-select`, ref: mergeRefs([selectEl, ref]), onChange: handleChange }, rest), children),
|
|
37
|
-
React.createElement("span", { className: `${BLOCK_NAME}-outline` })));
|
|
38
|
-
});
|
package/Form/InlineDropDown.mjs
DELETED
|
@@ -1,30 +0,0 @@
|
|
|
1
|
-
import React, { forwardRef, useEffect, useRef, useState } from 'react';
|
|
2
|
-
import mergeRefs from 'react-merge-refs';
|
|
3
|
-
import { ChevronDownBold } from '../Icon';
|
|
4
|
-
const BLOCK_NAME = 'spui-InlineDropDown';
|
|
5
|
-
export const InlineDropDown = forwardRef(function InlineDropDown({ children, visualSize = 'medium', onChange, ...rest }, ref) {
|
|
6
|
-
const selectEl = useRef(null);
|
|
7
|
-
const [text, setText] = useState('');
|
|
8
|
-
const update = () => {
|
|
9
|
-
if (selectEl && selectEl.current) {
|
|
10
|
-
const selectedEl = selectEl.current.options[selectEl.current.selectedIndex];
|
|
11
|
-
const value = selectedEl.text;
|
|
12
|
-
setText(value);
|
|
13
|
-
}
|
|
14
|
-
};
|
|
15
|
-
const handleChange = (event) => {
|
|
16
|
-
if (typeof onChange === 'function') {
|
|
17
|
-
onChange(event);
|
|
18
|
-
}
|
|
19
|
-
update();
|
|
20
|
-
};
|
|
21
|
-
// Update text once
|
|
22
|
-
useEffect(update, []);
|
|
23
|
-
return (React.createElement("label", { className: [`${BLOCK_NAME}-label`].filter(Boolean).join(' ') },
|
|
24
|
-
React.createElement("span", { className: `${BLOCK_NAME}-visual` },
|
|
25
|
-
React.createElement("span", { className: `${BLOCK_NAME}-text ${BLOCK_NAME}-text--${visualSize}` }, text),
|
|
26
|
-
React.createElement("span", { className: `${BLOCK_NAME}-icon ${BLOCK_NAME}-icon--${visualSize}` },
|
|
27
|
-
React.createElement(ChevronDownBold, { "aria-hidden": "true" }))),
|
|
28
|
-
React.createElement("select", Object.assign({ className: `${BLOCK_NAME}-select ${BLOCK_NAME}-select--${visualSize}`, ref: mergeRefs([selectEl, ref]), onChange: handleChange }, rest), children),
|
|
29
|
-
React.createElement("span", { className: `${BLOCK_NAME}-outline` })));
|
|
30
|
-
});
|
package/Form/InputLabel.mjs
DELETED
package/Form/InvalidMessage.mjs
DELETED
|
@@ -1,9 +0,0 @@
|
|
|
1
|
-
import React from 'react';
|
|
2
|
-
import { ExclamationmarkCircleFill } from '../Icon';
|
|
3
|
-
const BLOCK_NAME = 'spui-InvalidMessage';
|
|
4
|
-
export const InvalidMessage = ({ children, visible = false, ...rest }) => {
|
|
5
|
-
return (React.createElement("p", Object.assign({ className: BLOCK_NAME, hidden: !visible }, rest),
|
|
6
|
-
React.createElement("span", { className: `${BLOCK_NAME}-icon` },
|
|
7
|
-
React.createElement(ExclamationmarkCircleFill, { "aria-hidden": "true" })),
|
|
8
|
-
React.createElement("span", { className: `${BLOCK_NAME}-body` }, children)));
|
|
9
|
-
};
|
package/Form/Radio.mjs
DELETED
|
@@ -1,11 +0,0 @@
|
|
|
1
|
-
import React, { forwardRef } from 'react';
|
|
2
|
-
import { CheckBold } from '../Icon';
|
|
3
|
-
const BLOCK_NAME = 'spui-Radio';
|
|
4
|
-
export const Radio = forwardRef(function Radio({ children, id = '', ...rest }, ref) {
|
|
5
|
-
return (React.createElement("label", { className: `${BLOCK_NAME}-label`, htmlFor: id },
|
|
6
|
-
React.createElement("input", Object.assign({ className: `${BLOCK_NAME}-input`, id: id, ref: ref, type: "radio" }, rest)),
|
|
7
|
-
React.createElement("span", { className: `${BLOCK_NAME}-icon` },
|
|
8
|
-
React.createElement(CheckBold, { "aria-hidden": "true" })),
|
|
9
|
-
React.createElement("span", { className: `${BLOCK_NAME}-outline` }),
|
|
10
|
-
children && React.createElement("span", { className: `${BLOCK_NAME}-text` }, children)));
|
|
11
|
-
});
|
package/Form/TextArea.mjs
DELETED
|
@@ -1,5 +0,0 @@
|
|
|
1
|
-
import React, { forwardRef } from 'react';
|
|
2
|
-
const BLOCK_NAME = 'spui-TextArea';
|
|
3
|
-
export const TextArea = forwardRef(function TextArea({ children, hasError = false, id = '', ...rest }, ref) {
|
|
4
|
-
return (React.createElement("textarea", Object.assign({ className: [`${BLOCK_NAME}`, hasError ? 'is-error' : ''].join(' '), id: id, ref: ref }, rest), children));
|
|
5
|
-
});
|
package/Form/TextField.mjs
DELETED
|
@@ -1,9 +0,0 @@
|
|
|
1
|
-
import React, { forwardRef } from 'react';
|
|
2
|
-
const BLOCK_NAME = 'spui-TextField';
|
|
3
|
-
export const TextField = forwardRef(function TextField({ hasError = false, id = '', variant = 'medium', ...rest }, ref) {
|
|
4
|
-
return (React.createElement("input", Object.assign({ className: [
|
|
5
|
-
`${BLOCK_NAME}`,
|
|
6
|
-
`${BLOCK_NAME}--${variant}`,
|
|
7
|
-
hasError ? 'is-error' : '',
|
|
8
|
-
].join(' '), id: id, ref: ref }, rest)));
|
|
9
|
-
});
|
package/Form/ToggleSwitch.mjs
DELETED
|
@@ -1,8 +0,0 @@
|
|
|
1
|
-
import React, { forwardRef } from 'react';
|
|
2
|
-
const BLOCK_NAME = 'spui-ToggleSwitch';
|
|
3
|
-
export const ToggleSwitch = forwardRef(function ToggleSwitch({ id = '', ...rest }, ref) {
|
|
4
|
-
return (React.createElement("label", { className: BLOCK_NAME },
|
|
5
|
-
React.createElement("input", Object.assign({ className: `${BLOCK_NAME}-input`, id: id, ref: ref, type: "checkbox" }, rest)),
|
|
6
|
-
React.createElement("span", { className: `${BLOCK_NAME}-visual` }),
|
|
7
|
-
React.createElement("span", { className: `${BLOCK_NAME}-outline` })));
|
|
8
|
-
});
|
package/Form/index.mjs
DELETED
|
@@ -1,8 +0,0 @@
|
|
|
1
|
-
export { Checkbox } from './Checkbox';
|
|
2
|
-
export { DropDown } from './DropDown';
|
|
3
|
-
export { InputLabel } from './InputLabel';
|
|
4
|
-
export { InvalidMessage } from './InvalidMessage';
|
|
5
|
-
export { Radio } from './Radio';
|
|
6
|
-
export { TextArea } from './TextArea';
|
|
7
|
-
export { TextField } from './TextField';
|
|
8
|
-
export { ToggleSwitch } from './ToggleSwitch';
|
|
@@ -1,27 +0,0 @@
|
|
|
1
|
-
import React from 'react';
|
|
2
|
-
import ChevronLeftBold from '../Icon/ChevronLeftBold';
|
|
3
|
-
import ChevronRightBold from '../Icon/ChevronRightBold';
|
|
4
|
-
import Pause from '../Icon/Pause';
|
|
5
|
-
import PlayFill from '../Icon/PlayFill';
|
|
6
|
-
import HeroCarouselItem from './HeroCarouselItem';
|
|
7
|
-
import { useAutoPlayCarousel } from './hooks/useAutoPlayCarousel';
|
|
8
|
-
const BLOCK_NAME = 'spui-HeroCarousel';
|
|
9
|
-
const ITEM_LINK_CLASS_NAME = 'js-auto-play-carousel-item-link';
|
|
10
|
-
export const HeroCarousel = React.memo(function HeroCarousel({ carouselList, }) {
|
|
11
|
-
if (carouselList.length === 0) {
|
|
12
|
-
return null;
|
|
13
|
-
}
|
|
14
|
-
const { handleSlideToPrev, handleSlideToNext, handleMouseEnter, handleMouseDown, handleMouseLeave, handleTouchStart, handleTransitionEnd, isAutoPlaying, isLinkClicked, itemsToRender, listRef, listStyles, toggleAutoPlay, handleFocus, handleBlur, } = useAutoPlayCarousel({
|
|
15
|
-
items: carouselList,
|
|
16
|
-
itemLinkClassName: ITEM_LINK_CLASS_NAME,
|
|
17
|
-
});
|
|
18
|
-
return (React.createElement("div", null,
|
|
19
|
-
React.createElement("div", { className: `${BLOCK_NAME}-container`, onBlur: handleBlur, onFocus: handleFocus, onMouseDown: handleMouseDown, onMouseEnter: handleMouseEnter, onMouseLeave: handleMouseLeave, onTouchStart: handleTouchStart, onTransitionEnd: handleTransitionEnd },
|
|
20
|
-
React.createElement("ul", { "aria-roledescription": "\u30AB\u30EB\u30FC\u30BB\u30EB", className: `${BLOCK_NAME}-list`, ref: listRef, role: "group", style: listStyles }, itemsToRender.map((item, index) => (React.createElement(HeroCarouselItem, { carouselItem: item, isLinkClicked: isLinkClicked, itemLinkClassName: ITEM_LINK_CLASS_NAME, key: `hero-carousel-${index}` }))))),
|
|
21
|
-
React.createElement("div", { className: `${BLOCK_NAME}-controls` },
|
|
22
|
-
React.createElement("button", { "aria-label": "1\u3064\u524D\u306E\u30A2\u30A4\u30C6\u30E0\u306B\u79FB\u52D5", className: `${BLOCK_NAME}-control ${BLOCK_NAME}-control--prev`, type: "button", onClick: handleSlideToPrev },
|
|
23
|
-
React.createElement(ChevronLeftBold, { "aria-hidden": true })),
|
|
24
|
-
React.createElement("button", { "aria-label": isAutoPlaying ? 'スライドを停止' : 'スライドを再生', className: `${BLOCK_NAME}-control`, type: "button", onClick: toggleAutoPlay }, isAutoPlaying ? (React.createElement(Pause, { "aria-hidden": true })) : (React.createElement(PlayFill, { "aria-hidden": true }))),
|
|
25
|
-
React.createElement("button", { "aria-label": "1\u3064\u5F8C\u308D\u306E\u30A2\u30A4\u30C6\u30E0\u306B\u79FB\u52D5", className: `${BLOCK_NAME}-control ${BLOCK_NAME}-control--next`, type: "button", onClick: handleSlideToNext },
|
|
26
|
-
React.createElement(ChevronRightBold, { "aria-hidden": true })))));
|
|
27
|
-
});
|
|
@@ -1,21 +0,0 @@
|
|
|
1
|
-
import React, { useCallback } from 'react';
|
|
2
|
-
import './HeroCarouselItem.css';
|
|
3
|
-
const BLOCK_NAME = 'spui-HeroCarouselItem';
|
|
4
|
-
export const HeroCarouselItem = React.memo(function HeroCarouselItem({ carouselItem, isLinkClicked, itemLinkClassName, }) {
|
|
5
|
-
const handleLinkClick = useCallback((e) => {
|
|
6
|
-
if (!isLinkClicked) {
|
|
7
|
-
e.preventDefault();
|
|
8
|
-
}
|
|
9
|
-
}, [isLinkClicked]);
|
|
10
|
-
return (React.createElement("li", { className: `${BLOCK_NAME}-listItem` },
|
|
11
|
-
React.createElement("a", { className: `${itemLinkClassName} ${BLOCK_NAME}-link`, href: carouselItem.link, onClick: handleLinkClick },
|
|
12
|
-
React.createElement("span", { className: `${BLOCK_NAME}-imageBlock` },
|
|
13
|
-
React.createElement("img", { alt: "", className: `${BLOCK_NAME}-image`, src: carouselItem.imageUrl })),
|
|
14
|
-
React.createElement("div", { className: `${BLOCK_NAME}-titleContainer` },
|
|
15
|
-
React.createElement("p", { className: `${BLOCK_NAME}-title` }, carouselItem.title)))));
|
|
16
|
-
}, (prevProps, nextProps) => prevProps.isLinkClicked === nextProps.isLinkClicked &&
|
|
17
|
-
prevProps.itemLinkClassName === nextProps.itemLinkClassName &&
|
|
18
|
-
prevProps.carouselItem.title === nextProps.carouselItem.title &&
|
|
19
|
-
prevProps.carouselItem.link === nextProps.carouselItem.link &&
|
|
20
|
-
prevProps.carouselItem.imageUrl === nextProps.carouselItem.imageUrl);
|
|
21
|
-
export default HeroCarouselItem;
|