@audius/harmony 0.0.33 → 0.1.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/assets/icons/Album.svg.js +21 -7
- package/dist/assets/icons/Album.svg.js.map +1 -1
- package/dist/assets/icons/AllTime.svg.js +21 -7
- package/dist/assets/icons/AllTime.svg.js.map +1 -1
- package/dist/assets/icons/Appearance.svg.js +21 -7
- package/dist/assets/icons/Appearance.svg.js.map +1 -1
- package/dist/assets/icons/ArrowLeft.svg.js +21 -7
- package/dist/assets/icons/ArrowLeft.svg.js.map +1 -1
- package/dist/assets/icons/ArrowRight.svg.js +21 -7
- package/dist/assets/icons/ArrowRight.svg.js.map +1 -1
- package/dist/assets/icons/ArtistBadge.svg.js +21 -7
- package/dist/assets/icons/ArtistBadge.svg.js.map +1 -1
- package/dist/assets/icons/AudiusLogo.svg.js +21 -7
- package/dist/assets/icons/AudiusLogo.svg.js.map +1 -1
- package/dist/assets/icons/AudiusLogoColor.svg.js +21 -7
- package/dist/assets/icons/AudiusLogoColor.svg.js.map +1 -1
- package/dist/assets/icons/AudiusLogoHorizontal.svg.js +24 -8
- package/dist/assets/icons/AudiusLogoHorizontal.svg.js.map +1 -1
- package/dist/assets/icons/AudiusLogoHorizontalColor.svg.js +24 -8
- package/dist/assets/icons/AudiusLogoHorizontalColor.svg.js.map +1 -1
- package/dist/assets/icons/AudiusLogoVertical.svg.js +21 -7
- package/dist/assets/icons/AudiusLogoVertical.svg.js.map +1 -1
- package/dist/assets/icons/Blog.svg.js +21 -7
- package/dist/assets/icons/Blog.svg.js.map +1 -1
- package/dist/assets/icons/BoxHeart.svg.js +21 -7
- package/dist/assets/icons/BoxHeart.svg.js.map +1 -1
- package/dist/assets/icons/CalendarDay.svg.js +21 -7
- package/dist/assets/icons/CalendarDay.svg.js.map +1 -1
- package/dist/assets/icons/CalendarMonth.svg.js +21 -7
- package/dist/assets/icons/CalendarMonth.svg.js.map +1 -1
- package/dist/assets/icons/CalendarWeek.svg.js +21 -7
- package/dist/assets/icons/CalendarWeek.svg.js.map +1 -1
- package/dist/assets/icons/Camera.svg.js +21 -7
- package/dist/assets/icons/Camera.svg.js.map +1 -1
- package/dist/assets/icons/Campfire.svg.js +21 -7
- package/dist/assets/icons/Campfire.svg.js.map +1 -1
- package/dist/assets/icons/CaretDown.svg.js +21 -7
- package/dist/assets/icons/CaretDown.svg.js.map +1 -1
- package/dist/assets/icons/CaretLeft.svg.js +21 -7
- package/dist/assets/icons/CaretLeft.svg.js.map +1 -1
- package/dist/assets/icons/CaretRight.svg.js +21 -7
- package/dist/assets/icons/CaretRight.svg.js.map +1 -1
- package/dist/assets/icons/CaretUp.svg.js +21 -7
- package/dist/assets/icons/CaretUp.svg.js.map +1 -1
- package/dist/assets/icons/Cart.svg.js +21 -7
- package/dist/assets/icons/Cart.svg.js.map +1 -1
- package/dist/assets/icons/CastAirplay.svg.js +21 -7
- package/dist/assets/icons/CastAirplay.svg.js.map +1 -1
- package/dist/assets/icons/CastChromecast.svg.js +21 -7
- package/dist/assets/icons/CastChromecast.svg.js.map +1 -1
- package/dist/assets/icons/Check.svg.js +21 -7
- package/dist/assets/icons/Check.svg.js.map +1 -1
- package/dist/assets/icons/Close.svg.js +21 -7
- package/dist/assets/icons/Close.svg.js.map +1 -1
- package/dist/assets/icons/CloseAlt.svg.js +21 -7
- package/dist/assets/icons/CloseAlt.svg.js.map +1 -1
- package/dist/assets/icons/CloudDownload.svg.js +21 -7
- package/dist/assets/icons/CloudDownload.svg.js.map +1 -1
- package/dist/assets/icons/CloudDownloadError.svg.js +21 -7
- package/dist/assets/icons/CloudDownloadError.svg.js.map +1 -1
- package/dist/assets/icons/CloudDownloadInactive.svg.js +21 -7
- package/dist/assets/icons/CloudDownloadInactive.svg.js.map +1 -1
- package/dist/assets/icons/CloudDownloadPaused.svg.js +21 -7
- package/dist/assets/icons/CloudDownloadPaused.svg.js.map +1 -1
- package/dist/assets/icons/CloudDownloadQueued.svg.js +21 -7
- package/dist/assets/icons/CloudDownloadQueued.svg.js.map +1 -1
- package/dist/assets/icons/CloudUpload.svg.js +21 -7
- package/dist/assets/icons/CloudUpload.svg.js.map +1 -1
- package/dist/assets/icons/Coinbase.svg.js +21 -7
- package/dist/assets/icons/Coinbase.svg.js.map +1 -1
- package/dist/assets/icons/CoinbasePay.svg.js +21 -7
- package/dist/assets/icons/CoinbasePay.svg.js.map +1 -1
- package/dist/assets/icons/Collectible.svg.js +21 -7
- package/dist/assets/icons/Collectible.svg.js.map +1 -1
- package/dist/assets/icons/Compose.svg.js +21 -7
- package/dist/assets/icons/Compose.svg.js.map +1 -1
- package/dist/assets/icons/Copy.svg.js +21 -7
- package/dist/assets/icons/Copy.svg.js.map +1 -1
- package/dist/assets/icons/Cosign.svg.js +21 -7
- package/dist/assets/icons/Cosign.svg.js.map +1 -1
- package/dist/assets/icons/CreatePlaylist.svg.js +21 -7
- package/dist/assets/icons/CreatePlaylist.svg.js.map +1 -1
- package/dist/assets/icons/CreditCard.svg.js +21 -7
- package/dist/assets/icons/CreditCard.svg.js.map +1 -1
- package/dist/assets/icons/Crown.svg.js +21 -7
- package/dist/assets/icons/Crown.svg.js.map +1 -1
- package/dist/assets/icons/Dashboard.svg.js +21 -7
- package/dist/assets/icons/Dashboard.svg.js.map +1 -1
- package/dist/assets/icons/Desktop.svg.js +21 -7
- package/dist/assets/icons/Desktop.svg.js.map +1 -1
- package/dist/assets/icons/Discord.svg.js +21 -7
- package/dist/assets/icons/Discord.svg.js.map +1 -1
- package/dist/assets/icons/Donate.svg.js +21 -7
- package/dist/assets/icons/Donate.svg.js.map +1 -1
- package/dist/assets/icons/Drag.svg.js +21 -7
- package/dist/assets/icons/Drag.svg.js.map +1 -1
- package/dist/assets/icons/Earnings.svg.js +21 -7
- package/dist/assets/icons/Earnings.svg.js.map +1 -1
- package/dist/assets/icons/EmailAddress.svg.js +21 -7
- package/dist/assets/icons/EmailAddress.svg.js.map +1 -1
- package/dist/assets/icons/Embed.svg.js +21 -7
- package/dist/assets/icons/Embed.svg.js.map +1 -1
- package/dist/assets/icons/Error.svg.js +21 -7
- package/dist/assets/icons/Error.svg.js.map +1 -1
- package/dist/assets/icons/Explore.svg.js +21 -7
- package/dist/assets/icons/Explore.svg.js.map +1 -1
- package/dist/assets/icons/ExternalLink.svg.js +21 -7
- package/dist/assets/icons/ExternalLink.svg.js.map +1 -1
- package/dist/assets/icons/Facebook.svg.js +21 -7
- package/dist/assets/icons/Facebook.svg.js.map +1 -1
- package/dist/assets/icons/Feed.svg.js +21 -7
- package/dist/assets/icons/Feed.svg.js.map +1 -1
- package/dist/assets/icons/Filter.svg.js +21 -7
- package/dist/assets/icons/Filter.svg.js.map +1 -1
- package/dist/assets/icons/Folder.svg.js +21 -7
- package/dist/assets/icons/Folder.svg.js.map +1 -1
- package/dist/assets/icons/Foundation.svg.js +21 -7
- package/dist/assets/icons/Foundation.svg.js.map +1 -1
- package/dist/assets/icons/Gift.svg.js +21 -7
- package/dist/assets/icons/Gift.svg.js.map +1 -1
- package/dist/assets/icons/Headphones.svg.js +21 -7
- package/dist/assets/icons/Headphones.svg.js.map +1 -1
- package/dist/assets/icons/Heart.svg.js +21 -7
- package/dist/assets/icons/Heart.svg.js.map +1 -1
- package/dist/assets/icons/Image.svg.js +21 -7
- package/dist/assets/icons/Image.svg.js.map +1 -1
- package/dist/assets/icons/Indent.svg.js +21 -7
- package/dist/assets/icons/Indent.svg.js.map +1 -1
- package/dist/assets/icons/Info.svg.js +21 -7
- package/dist/assets/icons/Info.svg.js.map +1 -1
- package/dist/assets/icons/Instagram.svg.js +21 -7
- package/dist/assets/icons/Instagram.svg.js.map +1 -1
- package/dist/assets/icons/KebabHorizontal.svg.js +21 -7
- package/dist/assets/icons/KebabHorizontal.svg.js.map +1 -1
- package/dist/assets/icons/Key.svg.js +21 -7
- package/dist/assets/icons/Key.svg.js.map +1 -1
- package/dist/assets/icons/Library.svg.js +21 -7
- package/dist/assets/icons/Library.svg.js.map +1 -1
- package/dist/assets/icons/LifeRing.svg.js +21 -7
- package/dist/assets/icons/LifeRing.svg.js.map +1 -1
- package/dist/assets/icons/Link.svg.js +21 -7
- package/dist/assets/icons/Link.svg.js.map +1 -1
- package/dist/assets/icons/LinkByStripe.svg.js +21 -7
- package/dist/assets/icons/LinkByStripe.svg.js.map +1 -1
- package/dist/assets/icons/ListeningHistory.svg.js +21 -7
- package/dist/assets/icons/ListeningHistory.svg.js.map +1 -1
- package/dist/assets/icons/Listens.svg.js +21 -7
- package/dist/assets/icons/Listens.svg.js.map +1 -1
- package/dist/assets/icons/Lock.svg.js +21 -7
- package/dist/assets/icons/Lock.svg.js.map +1 -1
- package/dist/assets/icons/LockUnlocked.svg.js +21 -7
- package/dist/assets/icons/LockUnlocked.svg.js.map +1 -1
- package/dist/assets/icons/LogoCircle.svg.js +21 -7
- package/dist/assets/icons/LogoCircle.svg.js.map +1 -1
- package/dist/assets/icons/LogoCircleCoinbase.svg.js +21 -7
- package/dist/assets/icons/LogoCircleCoinbase.svg.js.map +1 -1
- package/dist/assets/icons/LogoCircleETH.svg.js +21 -7
- package/dist/assets/icons/LogoCircleETH.svg.js.map +1 -1
- package/dist/assets/icons/LogoCircleSOL.svg.js +21 -7
- package/dist/assets/icons/LogoCircleSOL.svg.js.map +1 -1
- package/dist/assets/icons/LogoCircleSTR.svg.js +21 -7
- package/dist/assets/icons/LogoCircleSTR.svg.js.map +1 -1
- package/dist/assets/icons/LogoCircleUSD.svg.js +21 -7
- package/dist/assets/icons/LogoCircleUSD.svg.js.map +1 -1
- package/dist/assets/icons/LogoCircleUSDC.svg.js +21 -7
- package/dist/assets/icons/LogoCircleUSDC.svg.js.map +1 -1
- package/dist/assets/icons/LogoPhantom.svg.js +21 -7
- package/dist/assets/icons/LogoPhantom.svg.js.map +1 -1
- package/dist/assets/icons/LogoSolana.svg.js +21 -7
- package/dist/assets/icons/LogoSolana.svg.js.map +1 -1
- package/dist/assets/icons/Merch.svg.js +21 -7
- package/dist/assets/icons/Merch.svg.js.map +1 -1
- package/dist/assets/icons/Message.svg.js +21 -7
- package/dist/assets/icons/Message.svg.js.map +1 -1
- package/dist/assets/icons/MessageBlock.svg.js +21 -7
- package/dist/assets/icons/MessageBlock.svg.js.map +1 -1
- package/dist/assets/icons/MessageLocked.svg.js +21 -7
- package/dist/assets/icons/MessageLocked.svg.js.map +1 -1
- package/dist/assets/icons/MessageUnblock.svg.js +21 -7
- package/dist/assets/icons/MessageUnblock.svg.js.map +1 -1
- package/dist/assets/icons/Metamask.svg.js +21 -7
- package/dist/assets/icons/Metamask.svg.js.map +1 -1
- package/dist/assets/icons/Minus.svg.js +21 -7
- package/dist/assets/icons/Minus.svg.js.map +1 -1
- package/dist/assets/icons/MoneyBracket.svg.js +78 -0
- package/dist/assets/icons/MoneyBracket.svg.js.map +1 -0
- package/dist/assets/icons/Mood.svg.js +21 -7
- package/dist/assets/icons/Mood.svg.js.map +1 -1
- package/dist/assets/icons/MultiselectAdd.svg.js +21 -7
- package/dist/assets/icons/MultiselectAdd.svg.js.map +1 -1
- package/dist/assets/icons/MultiselectRemove.svg.js +21 -7
- package/dist/assets/icons/MultiselectRemove.svg.js.map +1 -1
- package/dist/assets/icons/NoWifi.svg.js +21 -7
- package/dist/assets/icons/NoWifi.svg.js.map +1 -1
- package/dist/assets/icons/Note.svg.js +21 -7
- package/dist/assets/icons/Note.svg.js.map +1 -1
- package/dist/assets/icons/NotificationOff.svg.js +21 -7
- package/dist/assets/icons/NotificationOff.svg.js.map +1 -1
- package/dist/assets/icons/NotificationOn.svg.js +21 -7
- package/dist/assets/icons/NotificationOn.svg.js.map +1 -1
- package/dist/assets/icons/Pause.svg.js +21 -7
- package/dist/assets/icons/Pause.svg.js.map +1 -1
- package/dist/assets/icons/Pencil.svg.js +21 -7
- package/dist/assets/icons/Pencil.svg.js.map +1 -1
- package/dist/assets/icons/Play.svg.js +21 -7
- package/dist/assets/icons/Play.svg.js.map +1 -1
- package/dist/assets/icons/PlaybackPause.svg.js +24 -8
- package/dist/assets/icons/PlaybackPause.svg.js.map +1 -1
- package/dist/assets/icons/PlaybackPlay.svg.js +24 -8
- package/dist/assets/icons/PlaybackPlay.svg.js.map +1 -1
- package/dist/assets/icons/Playlists.svg.js +21 -7
- package/dist/assets/icons/Playlists.svg.js.map +1 -1
- package/dist/assets/icons/Plus.svg.js +21 -7
- package/dist/assets/icons/Plus.svg.js.map +1 -1
- package/dist/assets/icons/PodcastBack.svg.js +21 -7
- package/dist/assets/icons/PodcastBack.svg.js.map +1 -1
- package/dist/assets/icons/PodcastForward.svg.js +21 -7
- package/dist/assets/icons/PodcastForward.svg.js.map +1 -1
- package/dist/assets/icons/QuestionCircle.svg.js +21 -7
- package/dist/assets/icons/QuestionCircle.svg.js.map +1 -1
- package/dist/assets/icons/Radar.svg.js +21 -7
- package/dist/assets/icons/Radar.svg.js.map +1 -1
- package/dist/assets/icons/Receive.svg.js +21 -7
- package/dist/assets/icons/Receive.svg.js.map +1 -1
- package/dist/assets/icons/RecoveryEmail.svg.js +21 -7
- package/dist/assets/icons/RecoveryEmail.svg.js.map +1 -1
- package/dist/assets/icons/Refresh.svg.js +21 -7
- package/dist/assets/icons/Refresh.svg.js.map +1 -1
- package/dist/assets/icons/Remix.svg.js +21 -7
- package/dist/assets/icons/Remix.svg.js.map +1 -1
- package/dist/assets/icons/Remove.svg.js +21 -7
- package/dist/assets/icons/Remove.svg.js.map +1 -1
- package/dist/assets/icons/RepeatOff.svg.js +21 -7
- package/dist/assets/icons/RepeatOff.svg.js.map +1 -1
- package/dist/assets/icons/Repost.svg.js +21 -7
- package/dist/assets/icons/Repost.svg.js.map +1 -1
- package/dist/assets/icons/Robot.svg.js +21 -7
- package/dist/assets/icons/Robot.svg.js.map +1 -1
- package/dist/assets/icons/Rocket.svg.js +21 -7
- package/dist/assets/icons/Rocket.svg.js.map +1 -1
- package/dist/assets/icons/Save.svg.js +21 -7
- package/dist/assets/icons/Save.svg.js.map +1 -1
- package/dist/assets/icons/Search.svg.js +21 -7
- package/dist/assets/icons/Search.svg.js.map +1 -1
- package/dist/assets/icons/Send.svg.js +21 -7
- package/dist/assets/icons/Send.svg.js.map +1 -1
- package/dist/assets/icons/Settings.svg.js +21 -7
- package/dist/assets/icons/Settings.svg.js.map +1 -1
- package/dist/assets/icons/Share.svg.js +21 -7
- package/dist/assets/icons/Share.svg.js.map +1 -1
- package/dist/assets/icons/ShieldCheck.svg.js +21 -7
- package/dist/assets/icons/ShieldCheck.svg.js.map +1 -1
- package/dist/assets/icons/ShieldUser.svg.js +81 -0
- package/dist/assets/icons/ShieldUser.svg.js.map +1 -0
- package/dist/assets/icons/Shuffle.svg.js +21 -7
- package/dist/assets/icons/Shuffle.svg.js.map +1 -1
- package/dist/assets/icons/SignOut.svg.js +21 -7
- package/dist/assets/icons/SignOut.svg.js.map +1 -1
- package/dist/assets/icons/SkipNext.svg.js +21 -7
- package/dist/assets/icons/SkipNext.svg.js.map +1 -1
- package/dist/assets/icons/SkipPrevious.svg.js +21 -7
- package/dist/assets/icons/SkipPrevious.svg.js.map +1 -1
- package/dist/assets/icons/Skull.svg.js +21 -7
- package/dist/assets/icons/Skull.svg.js.map +1 -1
- package/dist/assets/icons/SnapChat.svg.js +21 -7
- package/dist/assets/icons/SnapChat.svg.js.map +1 -1
- package/dist/assets/icons/Sort.svg.js +21 -7
- package/dist/assets/icons/Sort.svg.js.map +1 -1
- package/dist/assets/icons/SortDown.svg.js +21 -7
- package/dist/assets/icons/SortDown.svg.js.map +1 -1
- package/dist/assets/icons/SortUp.svg.js +21 -7
- package/dist/assets/icons/SortUp.svg.js.map +1 -1
- package/dist/assets/icons/Soundwave.svg.js +21 -7
- package/dist/assets/icons/Soundwave.svg.js.map +1 -1
- package/dist/assets/icons/Speaker.svg.js +21 -7
- package/dist/assets/icons/Speaker.svg.js.map +1 -1
- package/dist/assets/icons/SpecialAccess.svg.js +21 -7
- package/dist/assets/icons/SpecialAccess.svg.js.map +1 -1
- package/dist/assets/icons/Star.svg.js +21 -7
- package/dist/assets/icons/Star.svg.js.map +1 -1
- package/dist/assets/icons/Stars.svg.js +21 -7
- package/dist/assets/icons/Stars.svg.js.map +1 -1
- package/dist/assets/icons/Support.svg.js +21 -7
- package/dist/assets/icons/Support.svg.js.map +1 -1
- package/dist/assets/icons/Tastemaker.svg.js +21 -7
- package/dist/assets/icons/Tastemaker.svg.js.map +1 -1
- package/dist/assets/icons/Telegram.svg.js +21 -7
- package/dist/assets/icons/Telegram.svg.js.map +1 -1
- package/dist/assets/icons/ThumbsDown.svg.js +21 -7
- package/dist/assets/icons/ThumbsDown.svg.js.map +1 -1
- package/dist/assets/icons/ThumbsUp.svg.js +21 -7
- package/dist/assets/icons/ThumbsUp.svg.js.map +1 -1
- package/dist/assets/icons/TikTok.svg.js +21 -7
- package/dist/assets/icons/TikTok.svg.js.map +1 -1
- package/dist/assets/icons/Tipping.svg.js +21 -7
- package/dist/assets/icons/Tipping.svg.js.map +1 -1
- package/dist/assets/icons/TokenBronze.svg.js +21 -7
- package/dist/assets/icons/TokenBronze.svg.js.map +1 -1
- package/dist/assets/icons/TokenGold.svg.js +21 -7
- package/dist/assets/icons/TokenGold.svg.js.map +1 -1
- package/dist/assets/icons/TokenNoTier.svg.js +21 -7
- package/dist/assets/icons/TokenNoTier.svg.js.map +1 -1
- package/dist/assets/icons/TokenPlatinum.svg.js +21 -7
- package/dist/assets/icons/TokenPlatinum.svg.js.map +1 -1
- package/dist/assets/icons/TokenSilver.svg.js +21 -7
- package/dist/assets/icons/TokenSilver.svg.js.map +1 -1
- package/dist/assets/icons/Transaction.svg.js +21 -7
- package/dist/assets/icons/Transaction.svg.js.map +1 -1
- package/dist/assets/icons/Trash.svg.js +21 -7
- package/dist/assets/icons/Trash.svg.js.map +1 -1
- package/dist/assets/icons/Trending.svg.js +21 -7
- package/dist/assets/icons/Trending.svg.js.map +1 -1
- package/dist/assets/icons/TriangleExclamation.svg.js +21 -7
- package/dist/assets/icons/TriangleExclamation.svg.js.map +1 -1
- package/dist/assets/icons/Trophy.svg.js +21 -7
- package/dist/assets/icons/Trophy.svg.js.map +1 -1
- package/dist/assets/icons/Turntable.svg.js +21 -7
- package/dist/assets/icons/Turntable.svg.js.map +1 -1
- package/dist/assets/icons/Twitter.svg.js +21 -7
- package/dist/assets/icons/Twitter.svg.js.map +1 -1
- package/dist/assets/icons/User.svg.js +21 -7
- package/dist/assets/icons/User.svg.js.map +1 -1
- package/dist/assets/icons/UserArrowRotate.svg.js +81 -0
- package/dist/assets/icons/UserArrowRotate.svg.js.map +1 -0
- package/dist/assets/icons/UserFollow.svg.js +21 -7
- package/dist/assets/icons/UserFollow.svg.js.map +1 -1
- package/dist/assets/icons/UserFollowers.svg.js +21 -7
- package/dist/assets/icons/UserFollowers.svg.js.map +1 -1
- package/dist/assets/icons/UserFollowing.svg.js +21 -7
- package/dist/assets/icons/UserFollowing.svg.js.map +1 -1
- package/dist/assets/icons/UserGroup.svg.js +21 -7
- package/dist/assets/icons/UserGroup.svg.js.map +1 -1
- package/dist/assets/icons/UserList.svg.js +21 -7
- package/dist/assets/icons/UserList.svg.js.map +1 -1
- package/dist/assets/icons/UserUnfollow.svg.js +21 -7
- package/dist/assets/icons/UserUnfollow.svg.js.map +1 -1
- package/dist/assets/icons/ValidationCheck.svg.js +21 -7
- package/dist/assets/icons/ValidationCheck.svg.js.map +1 -1
- package/dist/assets/icons/ValidationX.svg.js +21 -7
- package/dist/assets/icons/ValidationX.svg.js.map +1 -1
- package/dist/assets/icons/Verified.svg.js +31 -22
- package/dist/assets/icons/Verified.svg.js.map +1 -1
- package/dist/assets/icons/VisibilityHidden.svg.js +21 -7
- package/dist/assets/icons/VisibilityHidden.svg.js.map +1 -1
- package/dist/assets/icons/VisibilityPublic.svg.js +21 -7
- package/dist/assets/icons/VisibilityPublic.svg.js.map +1 -1
- package/dist/assets/icons/VolumeLevel0.svg.js +21 -7
- package/dist/assets/icons/VolumeLevel0.svg.js.map +1 -1
- package/dist/assets/icons/VolumeLevel1.svg.js +21 -7
- package/dist/assets/icons/VolumeLevel1.svg.js.map +1 -1
- package/dist/assets/icons/VolumeLevel2.svg.js +21 -7
- package/dist/assets/icons/VolumeLevel2.svg.js.map +1 -1
- package/dist/assets/icons/VolumeLevel3.svg.js +21 -7
- package/dist/assets/icons/VolumeLevel3.svg.js.map +1 -1
- package/dist/assets/icons/Wallet.svg.js +21 -7
- package/dist/assets/icons/Wallet.svg.js.map +1 -1
- package/dist/assets/icons/Wand.svg.js +21 -7
- package/dist/assets/icons/Wand.svg.js.map +1 -1
- package/dist/assets/icons/Waveform.svg.js +21 -7
- package/dist/assets/icons/Waveform.svg.js.map +1 -1
- package/dist/assets/icons/Withdraw.svg.js +21 -7
- package/dist/assets/icons/Withdraw.svg.js.map +1 -1
- package/dist/assets/icons/ccBy.svg.js +21 -7
- package/dist/assets/icons/ccBy.svg.js.map +1 -1
- package/dist/assets/icons/ccCC.svg.js +21 -7
- package/dist/assets/icons/ccCC.svg.js.map +1 -1
- package/dist/assets/icons/ccNC-EU.svg.js +21 -7
- package/dist/assets/icons/ccNC-EU.svg.js.map +1 -1
- package/dist/assets/icons/ccNC-JP.svg.js +21 -7
- package/dist/assets/icons/ccNC-JP.svg.js.map +1 -1
- package/dist/assets/icons/ccNC.svg.js +21 -7
- package/dist/assets/icons/ccNC.svg.js.map +1 -1
- package/dist/assets/icons/ccND.svg.js +21 -7
- package/dist/assets/icons/ccND.svg.js.map +1 -1
- package/dist/assets/icons/ccPD.svg.js +21 -7
- package/dist/assets/icons/ccPD.svg.js.map +1 -1
- package/dist/assets/icons/ccRemix.svg.js +21 -7
- package/dist/assets/icons/ccRemix.svg.js.map +1 -1
- package/dist/assets/icons/ccSA.svg.js +21 -7
- package/dist/assets/icons/ccSA.svg.js.map +1 -1
- package/dist/assets/icons/ccSampling.svg.js +21 -7
- package/dist/assets/icons/ccSampling.svg.js.map +1 -1
- package/dist/assets/icons/ccSamplingPlus.svg.js +21 -7
- package/dist/assets/icons/ccSamplingPlus.svg.js.map +1 -1
- package/dist/assets/icons/ccShare.svg.js +21 -7
- package/dist/assets/icons/ccShare.svg.js.map +1 -1
- package/dist/assets/icons/ccZero.svg.js +21 -7
- package/dist/assets/icons/ccZero.svg.js.map +1 -1
- package/dist/assets/icons/file3GA.svg.js +21 -7
- package/dist/assets/icons/file3GA.svg.js.map +1 -1
- package/dist/assets/icons/file3GP.svg.js +21 -7
- package/dist/assets/icons/file3GP.svg.js.map +1 -1
- package/dist/assets/icons/fileAAC.svg.js +21 -7
- package/dist/assets/icons/fileAAC.svg.js.map +1 -1
- package/dist/assets/icons/fileAIF.svg.js +21 -7
- package/dist/assets/icons/fileAIF.svg.js.map +1 -1
- package/dist/assets/icons/fileAIFC.svg.js +21 -7
- package/dist/assets/icons/fileAIFC.svg.js.map +1 -1
- package/dist/assets/icons/fileAIFF.svg.js +21 -7
- package/dist/assets/icons/fileAIFF.svg.js.map +1 -1
- package/dist/assets/icons/fileAMR.svg.js +21 -7
- package/dist/assets/icons/fileAMR.svg.js.map +1 -1
- package/dist/assets/icons/fileAWB.svg.js +21 -7
- package/dist/assets/icons/fileAWB.svg.js.map +1 -1
- package/dist/assets/icons/fileFLAC.svg.js +21 -7
- package/dist/assets/icons/fileFLAC.svg.js.map +1 -1
- package/dist/assets/icons/fileM4A.svg.js +21 -7
- package/dist/assets/icons/fileM4A.svg.js.map +1 -1
- package/dist/assets/icons/fileM4B.svg.js +21 -7
- package/dist/assets/icons/fileM4B.svg.js.map +1 -1
- package/dist/assets/icons/fileM4P.svg.js +21 -7
- package/dist/assets/icons/fileM4P.svg.js.map +1 -1
- package/dist/assets/icons/fileM4R.svg.js +21 -7
- package/dist/assets/icons/fileM4R.svg.js.map +1 -1
- package/dist/assets/icons/fileM4V.svg.js +21 -7
- package/dist/assets/icons/fileM4V.svg.js.map +1 -1
- package/dist/assets/icons/fileMP2.svg.js +21 -7
- package/dist/assets/icons/fileMP2.svg.js.map +1 -1
- package/dist/assets/icons/fileMP3.svg.js +21 -7
- package/dist/assets/icons/fileMP3.svg.js.map +1 -1
- package/dist/assets/icons/fileMP4.svg.js +21 -7
- package/dist/assets/icons/fileMP4.svg.js.map +1 -1
- package/dist/assets/icons/fileMPGA.svg.js +21 -7
- package/dist/assets/icons/fileMPGA.svg.js.map +1 -1
- package/dist/assets/icons/fileOGA.svg.js +21 -7
- package/dist/assets/icons/fileOGA.svg.js.map +1 -1
- package/dist/assets/icons/fileOGG.svg.js +21 -7
- package/dist/assets/icons/fileOGG.svg.js.map +1 -1
- package/dist/assets/icons/fileOGM.svg.js +21 -7
- package/dist/assets/icons/fileOGM.svg.js.map +1 -1
- package/dist/assets/icons/fileOGV.svg.js +21 -7
- package/dist/assets/icons/fileOGV.svg.js.map +1 -1
- package/dist/assets/icons/fileOGX.svg.js +21 -7
- package/dist/assets/icons/fileOGX.svg.js.map +1 -1
- package/dist/assets/icons/fileOPUS.svg.js +21 -7
- package/dist/assets/icons/fileOPUS.svg.js.map +1 -1
- package/dist/assets/icons/fileSPX.svg.js +21 -7
- package/dist/assets/icons/fileSPX.svg.js.map +1 -1
- package/dist/assets/icons/fileTS.svg.js +21 -7
- package/dist/assets/icons/fileTS.svg.js.map +1 -1
- package/dist/assets/icons/fileTSA.svg.js +21 -7
- package/dist/assets/icons/fileTSA.svg.js.map +1 -1
- package/dist/assets/icons/fileTSV.svg.js +21 -7
- package/dist/assets/icons/fileTSV.svg.js.map +1 -1
- package/dist/assets/icons/fileUnknown.svg.js +24 -8
- package/dist/assets/icons/fileUnknown.svg.js.map +1 -1
- package/dist/assets/icons/fileWAV.svg.js +21 -7
- package/dist/assets/icons/fileWAV.svg.js.map +1 -1
- package/dist/assets/icons/fileWAVE.svg.js +21 -7
- package/dist/assets/icons/fileWAVE.svg.js.map +1 -1
- package/dist/assets/icons/fileWEBM.svg.js +21 -7
- package/dist/assets/icons/fileWEBM.svg.js.map +1 -1
- package/dist/assets/icons/fileXWMA.svg.js +21 -7
- package/dist/assets/icons/fileXWMA.svg.js.map +1 -1
- package/dist/components/artwork/Artwork.d.ts +17 -0
- package/dist/components/artwork/Artwork.d.ts.map +1 -0
- package/dist/components/artwork/Artwork.js +47 -0
- package/dist/components/artwork/Artwork.js.map +1 -0
- package/dist/components/artwork/Artwork.stories.d.ts +8 -0
- package/dist/components/artwork/Artwork.stories.d.ts.map +1 -0
- package/dist/components/artwork/index.d.ts +2 -0
- package/dist/components/artwork/index.d.ts.map +1 -0
- package/dist/components/avatar/Avatar.d.ts +8 -1
- package/dist/components/avatar/Avatar.d.ts.map +1 -1
- package/dist/components/avatar/Avatar.js +16 -45
- package/dist/components/avatar/Avatar.js.map +1 -1
- package/dist/components/avatar/Avatar.stories.d.ts.map +1 -1
- package/dist/components/avatar/index.d.ts +1 -1
- package/dist/components/avatar/index.d.ts.map +1 -1
- package/dist/components/button/BaseButton/BaseButton.d.ts +2 -2
- package/dist/components/button/BaseButton/types.d.ts +2 -2
- package/dist/components/button/BaseButton/types.d.ts.map +1 -1
- package/dist/components/button/Button/Button.d.ts +1 -1
- package/dist/components/button/Button/Button.js +7 -8
- package/dist/components/button/Button/Button.js.map +1 -1
- package/dist/components/button/Button/types.d.ts +2 -2
- package/dist/components/button/Button/types.d.ts.map +1 -1
- package/dist/components/button/FilterButton/FilterButton.d.ts.map +1 -1
- package/dist/components/button/FilterButton/FilterButton.js +63 -69
- package/dist/components/button/FilterButton/FilterButton.js.map +1 -1
- package/dist/components/button/FilterButton/types.d.ts +38 -23
- package/dist/components/button/FilterButton/types.d.ts.map +1 -1
- package/dist/components/button/FollowButton/FollowButton.js +1 -1
- package/dist/components/button/FollowButton/FollowButton.js.map +1 -1
- package/dist/components/button/IconButton/IconButton.d.ts +3 -3
- package/dist/components/button/IconButton/IconButton.d.ts.map +1 -1
- package/dist/components/button/IconButton/IconButton.js +4 -3
- package/dist/components/button/IconButton/IconButton.js.map +1 -1
- package/dist/components/button/OptionsFilterButton/OptionsFilterButton.d.ts +18 -0
- package/dist/components/button/OptionsFilterButton/OptionsFilterButton.d.ts.map +1 -0
- package/dist/components/button/OptionsFilterButton/OptionsFilterButton.js +123 -0
- package/dist/components/button/OptionsFilterButton/OptionsFilterButton.js.map +1 -0
- package/dist/components/button/{FilterButton/FilterButton.stories.d.ts → OptionsFilterButton/OptionsFilterButton.stories.d.ts} +4 -4
- package/dist/components/button/OptionsFilterButton/OptionsFilterButton.stories.d.ts.map +1 -0
- package/dist/components/button/OptionsFilterButton/SelectPopupKeyHandler.d.ts +18 -0
- package/dist/components/button/OptionsFilterButton/SelectPopupKeyHandler.d.ts.map +1 -0
- package/dist/components/button/OptionsFilterButton/SelectPopupKeyHandler.js +82 -0
- package/dist/components/button/OptionsFilterButton/SelectPopupKeyHandler.js.map +1 -0
- package/dist/components/button/OptionsFilterButton/types.d.ts +62 -0
- package/dist/components/button/OptionsFilterButton/types.d.ts.map +1 -0
- package/dist/components/button/UnstyledButton.d.ts +11 -0
- package/dist/components/button/UnstyledButton.d.ts.map +1 -0
- package/dist/components/button/UnstyledButton.js +13 -0
- package/dist/components/button/UnstyledButton.js.map +1 -0
- package/dist/components/button/index.d.ts +3 -0
- package/dist/components/button/index.d.ts.map +1 -1
- package/dist/components/completion-check/CompletionCheck.js +0 -1
- package/dist/components/completion-check/CompletionCheck.js.map +1 -1
- package/dist/components/hint/Hint.d.ts +1 -1
- package/dist/components/hint/Hint.d.ts.map +1 -1
- package/dist/components/hint/Hint.js +5 -3
- package/dist/components/hint/Hint.js.map +1 -1
- package/dist/components/icon.d.ts +1 -0
- package/dist/components/icon.d.ts.map +1 -1
- package/dist/components/index.d.ts +7 -0
- package/dist/components/index.d.ts.map +1 -1
- package/dist/components/input/PasswordInput/PasswordInput.js +2 -0
- package/dist/components/input/PasswordInput/PasswordInput.js.map +1 -1
- package/dist/components/input/SelectablePill/SelectablePill.js +2 -2
- package/dist/components/input/SelectablePill/SelectablePill.js.map +1 -1
- package/dist/components/input/TextInput/TextInput.d.ts.map +1 -1
- package/dist/components/input/TextInput/TextInput.js +3 -4
- package/dist/components/input/TextInput/TextInput.js.map +1 -1
- package/dist/components/layout/Box/Box.js +6 -6
- package/dist/components/layout/Box/Box.js.map +1 -1
- package/dist/components/layout/Box/types.d.ts +8 -8
- package/dist/components/layout/Box/types.d.ts.map +1 -1
- package/dist/components/layout/Divider/Divider.d.ts.map +1 -1
- package/dist/components/layout/Divider/Divider.js +4 -4
- package/dist/components/layout/Divider/Divider.js.map +1 -1
- package/dist/components/layout/Divider/types.d.ts +2 -0
- package/dist/components/layout/Divider/types.d.ts.map +1 -1
- package/dist/components/layout/Paper/Paper.d.ts.map +1 -1
- package/dist/components/layout/Paper/Paper.js +2 -1
- package/dist/components/layout/Paper/Paper.js.map +1 -1
- package/dist/components/layout/index.d.ts +0 -1
- package/dist/components/layout/index.d.ts.map +1 -1
- package/dist/components/modal/Modal.js +1 -1
- package/dist/components/modal/Modal.js.map +1 -1
- package/dist/components/modal/ModalHeader.js +2 -0
- package/dist/components/modal/ModalHeader.js.map +1 -1
- package/dist/components/music-badge/MusicBadge.d.ts +25 -0
- package/dist/components/music-badge/MusicBadge.d.ts.map +1 -0
- package/dist/components/music-badge/MusicBadge.js +40 -0
- package/dist/components/music-badge/MusicBadge.js.map +1 -0
- package/dist/components/music-badge/MusicBadge.stories.d.ts +7 -0
- package/dist/components/music-badge/MusicBadge.stories.d.ts.map +1 -0
- package/dist/components/music-badge/index.d.ts +3 -0
- package/dist/components/music-badge/index.d.ts.map +1 -0
- package/dist/components/pill/Pill.d.ts +31 -0
- package/dist/components/pill/Pill.d.ts.map +1 -0
- package/dist/components/pill/Pill.js +59 -0
- package/dist/components/pill/Pill.js.map +1 -0
- package/dist/components/pill/Pill.stories.d.ts +10 -0
- package/dist/components/pill/Pill.stories.d.ts.map +1 -0
- package/dist/components/pill/index.d.ts +3 -0
- package/dist/components/pill/index.d.ts.map +1 -0
- package/dist/components/popup/Popup.d.ts.map +1 -0
- package/dist/components/{layout/Popup → popup}/Popup.js +13 -9
- package/dist/components/popup/Popup.js.map +1 -0
- package/dist/components/popup/Popup.module.css.js +4 -0
- package/dist/components/popup/Popup.stories.d.ts.map +1 -0
- package/dist/components/popup/index.d.ts.map +1 -0
- package/dist/components/{layout/Popup → popup}/types.d.ts +3 -3
- package/dist/components/popup/types.d.ts.map +1 -0
- package/dist/components/popup-menu/PopupMenu.d.ts +2 -2
- package/dist/components/popup-menu/PopupMenu.js +1 -1
- package/dist/components/popup-menu/PopupMenu.js.map +1 -1
- package/dist/components/popup-menu/types.d.ts +1 -1
- package/dist/components/popup-menu/types.d.ts.map +1 -1
- package/dist/components/radio-group/RadioGroup.js +0 -1
- package/dist/components/radio-group/RadioGroup.js.map +1 -1
- package/dist/components/segmented-control/SegmentedControl.js +1 -1
- package/dist/components/segmented-control/SegmentedControl.js.map +1 -1
- package/dist/components/skeleton/Skeleton.d.ts +5 -0
- package/dist/components/skeleton/Skeleton.d.ts.map +1 -0
- package/dist/components/skeleton/Skeleton.js +27 -0
- package/dist/components/skeleton/Skeleton.js.map +1 -0
- package/dist/components/skeleton/Skeleton.stories.d.ts +7 -0
- package/dist/components/skeleton/Skeleton.stories.d.ts.map +1 -0
- package/dist/components/skeleton/index.d.ts +2 -0
- package/dist/components/skeleton/index.d.ts.map +1 -0
- package/dist/components/tag/Tag.js +5 -10
- package/dist/components/tag/Tag.js.map +1 -1
- package/dist/components/text/Text.d.ts.map +1 -0
- package/dist/components/text/Text.js +52 -0
- package/dist/components/text/Text.js.map +1 -0
- package/dist/components/text/Text.stories.d.ts.map +1 -0
- package/dist/components/text/constants.d.ts.map +1 -0
- package/dist/components/text/{Text/constants.js → constants.js} +4 -4
- package/dist/components/text/constants.js.map +1 -0
- package/dist/components/text/index.d.ts +3 -1
- package/dist/components/text/index.d.ts.map +1 -1
- package/dist/components/text/textContext.d.ts +7 -0
- package/dist/components/text/textContext.d.ts.map +1 -0
- package/dist/components/text/textContext.js +6 -0
- package/dist/components/text/textContext.js.map +1 -0
- package/dist/components/text/{Text/types.d.ts → types.d.ts} +1 -1
- package/dist/components/text/types.d.ts.map +1 -0
- package/dist/components/text-link/TextLink.d.ts +3 -7
- package/dist/components/text-link/TextLink.d.ts.map +1 -1
- package/dist/components/text-link/TextLink.js +8 -6
- package/dist/components/text-link/TextLink.js.map +1 -1
- package/dist/components/text-link/types.d.ts +4 -7
- package/dist/components/text-link/types.d.ts.map +1 -1
- package/dist/foundations/color/color.d.ts +12 -0
- package/dist/foundations/color/color.d.ts.map +1 -1
- package/dist/foundations/color/primitive.d.ts +9 -0
- package/dist/foundations/color/primitive.d.ts.map +1 -1
- package/dist/foundations/color/primitive.js +9 -0
- package/dist/foundations/color/primitive.js.map +1 -1
- package/dist/foundations/color/semantic.d.ts +3 -0
- package/dist/foundations/color/semantic.d.ts.map +1 -1
- package/dist/foundations/color/semantic.js +2 -1
- package/dist/foundations/color/semantic.js.map +1 -1
- package/dist/foundations/corner-radius/cornerRadius.d.ts +1 -0
- package/dist/foundations/corner-radius/cornerRadius.d.ts.map +1 -1
- package/dist/foundations/corner-radius/cornerRadius.js +2 -1
- package/dist/foundations/corner-radius/cornerRadius.js.map +1 -1
- package/dist/foundations/spacing/spacing.d.ts +1 -0
- package/dist/foundations/spacing/spacing.d.ts.map +1 -1
- package/dist/foundations/spacing/spacing.js +1 -0
- package/dist/foundations/spacing/spacing.js.map +1 -1
- package/dist/foundations/typography/typography.d.ts +1 -0
- package/dist/foundations/typography/typography.d.ts.map +1 -1
- package/dist/foundations/typography/typography.js +5 -3
- package/dist/foundations/typography/typography.js.map +1 -1
- package/dist/harmony.css +1 -1
- package/dist/icons/utilityIcons.d.ts +3 -0
- package/dist/icons/utilityIcons.d.ts.map +1 -1
- package/dist/icons/utilityIcons.js +7 -1
- package/dist/icons/utilityIcons.js.map +1 -1
- package/dist/index.js +12 -4
- package/dist/index.js.map +1 -1
- package/package.json +4 -2
- package/dist/components/button/FilterButton/FilterButton.stories.d.ts.map +0 -1
- package/dist/components/layout/Popup/Popup.d.ts.map +0 -1
- package/dist/components/layout/Popup/Popup.js.map +0 -1
- package/dist/components/layout/Popup/Popup.module.css.js +0 -4
- package/dist/components/layout/Popup/Popup.stories.d.ts.map +0 -1
- package/dist/components/layout/Popup/index.d.ts.map +0 -1
- package/dist/components/layout/Popup/types.d.ts.map +0 -1
- package/dist/components/text/Text/Text.d.ts.map +0 -1
- package/dist/components/text/Text/Text.js +0 -42
- package/dist/components/text/Text/Text.js.map +0 -1
- package/dist/components/text/Text/Text.stories.d.ts.map +0 -1
- package/dist/components/text/Text/constants.d.ts.map +0 -1
- package/dist/components/text/Text/constants.js.map +0 -1
- package/dist/components/text/Text/index.d.ts +0 -4
- package/dist/components/text/Text/index.d.ts.map +0 -1
- package/dist/components/text/Text/types.d.ts.map +0 -1
- /package/dist/components/{layout/Popup → popup}/Popup.d.ts +0 -0
- /package/dist/components/{layout/Popup → popup}/Popup.module.css.js.map +0 -0
- /package/dist/components/{layout/Popup → popup}/Popup.stories.d.ts +0 -0
- /package/dist/components/{layout/Popup → popup}/index.d.ts +0 -0
- /package/dist/components/text/{Text/Text.d.ts → Text.d.ts} +0 -0
- /package/dist/components/text/{Text/Text.stories.d.ts → Text.stories.d.ts} +0 -0
- /package/dist/components/text/{Text/constants.d.ts → constants.d.ts} +0 -0
|
@@ -0,0 +1,40 @@
|
|
|
1
|
+
import { __assign } from '../../_virtual/_tslib.js';
|
|
2
|
+
import { jsxs, jsx } from '@emotion/react/jsx-runtime';
|
|
3
|
+
import { useTheme } from '@emotion/react';
|
|
4
|
+
import Color from 'color';
|
|
5
|
+
import { Flex } from '../layout/Flex/Flex.js';
|
|
6
|
+
import { Text } from '../text/Text.js';
|
|
7
|
+
|
|
8
|
+
var MusicBadge = function (props) {
|
|
9
|
+
var _a = props.variant, variant = _a === void 0 ? 'default' : _a, _b = props.size, size = _b === void 0 ? 'm' : _b, Icon = props.icon, colorProp = props.color, children = props.children;
|
|
10
|
+
var color = useTheme().color;
|
|
11
|
+
var gap = size === 'm' ? 's' : 'xs';
|
|
12
|
+
var height = size === 'm' ? '2xl' : 'xl';
|
|
13
|
+
var backgroundColor = colorProp
|
|
14
|
+
? color.special[colorProp]
|
|
15
|
+
: variant === 'default'
|
|
16
|
+
? color.background.default
|
|
17
|
+
: color.background.accent;
|
|
18
|
+
var textColor = colorProp
|
|
19
|
+
? color.special[colorProp]
|
|
20
|
+
: variant === 'default'
|
|
21
|
+
? color.text.default
|
|
22
|
+
: color.text.accent;
|
|
23
|
+
var iconColor = colorProp
|
|
24
|
+
? color.special[colorProp]
|
|
25
|
+
: variant === 'default'
|
|
26
|
+
? color.icon.default
|
|
27
|
+
: color.icon.accent;
|
|
28
|
+
var borderColor = colorProp
|
|
29
|
+
? Color(color.special[colorProp]).fade(0.5).toString()
|
|
30
|
+
: variant === 'default'
|
|
31
|
+
? color.border.strong
|
|
32
|
+
: color.border.accent;
|
|
33
|
+
return (jsxs(Flex, __assign({ alignItems: 'center', justifyContent: 'center', borderRadius: 's', border: 'strong', gap: gap, h: height, ph: size, css: {
|
|
34
|
+
backgroundColor: Color(backgroundColor).fade(0.92).toString(),
|
|
35
|
+
borderColor: borderColor
|
|
36
|
+
} }, { children: [Icon ? jsx(Icon, { size: size, fill: iconColor }) : null, jsx(Text, __assign({ variant: 'label', size: size, css: { color: textColor } }, { children: children }))] })));
|
|
37
|
+
};
|
|
38
|
+
|
|
39
|
+
export { MusicBadge };
|
|
40
|
+
//# sourceMappingURL=MusicBadge.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"MusicBadge.js","sources":["../../../src/components/music-badge/MusicBadge.tsx"],"sourcesContent":["import { ComponentPropsWithoutRef } from 'react'\n\nimport { useTheme } from '@emotion/react'\nimport Color from 'color'\n\nimport type { IconComponent } from 'components/icon'\nimport { SpecialColors } from 'foundations'\n\nimport { Flex } from '../layout/Flex'\nimport { Text } from '../text/Text'\n\nexport type MusicBadgeVariant = 'default' | 'accent'\nexport type MusicBadgeSize = 's' | 'm'\n\nexport type MusicBadgeProps = {\n /**\n * The type of the MusicBadge\n */\n variant?: MusicBadgeVariant\n /**\n * The size of the MusicBadge\n */\n size?: 's' | 'm'\n /**\n * The icon to display in the left of the MusicBadge\n */\n icon?: IconComponent\n /**\n * Override the colors of the MusicBadge\n */\n color?: SpecialColors\n} & ComponentPropsWithoutRef<'div'>\n\nexport const MusicBadge = (props: MusicBadgeProps) => {\n const {\n variant = 'default',\n size = 'm',\n icon: Icon,\n color: colorProp,\n children\n } = props\n const { color } = useTheme()\n\n const gap = size === 'm' ? 's' : 'xs'\n const height = size === 'm' ? '2xl' : 'xl'\n\n const backgroundColor = colorProp\n ? color.special[colorProp]\n : variant === 'default'\n ? color.background.default\n : color.background.accent\n const textColor = colorProp\n ? color.special[colorProp]\n : variant === 'default'\n ? color.text.default\n : color.text.accent\n const iconColor = colorProp\n ? color.special[colorProp]\n : variant === 'default'\n ? color.icon.default\n : color.icon.accent\n const borderColor = colorProp\n ? Color(color.special[colorProp]).fade(0.5).toString()\n : variant === 'default'\n ? color.border.strong\n : color.border.accent\n\n return (\n <Flex\n alignItems='center'\n justifyContent='center'\n borderRadius='s'\n border='strong'\n gap={gap}\n h={height}\n ph={size}\n css={{\n backgroundColor: Color(backgroundColor).fade(0.92).toString(),\n borderColor\n }}\n >\n {Icon ? <Icon size={size} fill={iconColor} /> : null}\n <Text variant='label' size={size} css={{ color: textColor }}>\n {children}\n </Text>\n </Flex>\n )\n}\n"],"names":["_jsxs","_jsx"],"mappings":";;;;;;;AAiCO,IAAM,UAAU,GAAG,UAAC,KAAsB,EAAA;AAE7C,IAAA,IAAA,EAKE,GAAA,KAAK,CALY,OAAA,EAAnB,OAAO,GAAG,EAAA,KAAA,KAAA,CAAA,GAAA,SAAS,GAAA,EAAA,EACnB,EAIE,GAAA,KAAK,CAJG,IAAA,EAAV,IAAI,GAAG,EAAA,KAAA,KAAA,CAAA,GAAA,GAAG,GAAA,EAAA,EACJ,IAAI,GAGR,KAAK,CAAA,IAHG,EACH,SAAS,GAEd,KAAK,CAAA,KAFS,EAChB,QAAQ,GACN,KAAK,SADC,CACD;AACD,IAAA,IAAA,KAAK,GAAK,QAAQ,EAAE,MAAf,CAAe;AAE5B,IAAA,IAAM,GAAG,GAAG,IAAI,KAAK,GAAG,GAAG,GAAG,GAAG,IAAI,CAAA;AACrC,IAAA,IAAM,MAAM,GAAG,IAAI,KAAK,GAAG,GAAG,KAAK,GAAG,IAAI,CAAA;IAE1C,IAAM,eAAe,GAAG,SAAS;AAC/B,UAAE,KAAK,CAAC,OAAO,CAAC,SAAS,CAAC;UACxB,OAAO,KAAK,SAAS;AACvB,cAAE,KAAK,CAAC,UAAU,CAAC,OAAO;AAC1B,cAAE,KAAK,CAAC,UAAU,CAAC,MAAM,CAAA;IAC3B,IAAM,SAAS,GAAG,SAAS;AACzB,UAAE,KAAK,CAAC,OAAO,CAAC,SAAS,CAAC;UACxB,OAAO,KAAK,SAAS;AACvB,cAAE,KAAK,CAAC,IAAI,CAAC,OAAO;AACpB,cAAE,KAAK,CAAC,IAAI,CAAC,MAAM,CAAA;IACrB,IAAM,SAAS,GAAG,SAAS;AACzB,UAAE,KAAK,CAAC,OAAO,CAAC,SAAS,CAAC;UACxB,OAAO,KAAK,SAAS;AACvB,cAAE,KAAK,CAAC,IAAI,CAAC,OAAO;AACpB,cAAE,KAAK,CAAC,IAAI,CAAC,MAAM,CAAA;IACrB,IAAM,WAAW,GAAG,SAAS;AAC3B,UAAE,KAAK,CAAC,KAAK,CAAC,OAAO,CAAC,SAAS,CAAC,CAAC,CAAC,IAAI,CAAC,GAAG,CAAC,CAAC,QAAQ,EAAE;UACpD,OAAO,KAAK,SAAS;AACvB,cAAE,KAAK,CAAC,MAAM,CAAC,MAAM;AACrB,cAAE,KAAK,CAAC,MAAM,CAAC,MAAM,CAAA;AAEvB,IAAA,QACEA,IAAA,CAAC,IAAI,EAAA,QAAA,CAAA,EACH,UAAU,EAAC,QAAQ,EACnB,cAAc,EAAC,QAAQ,EACvB,YAAY,EAAC,GAAG,EAChB,MAAM,EAAC,QAAQ,EACf,GAAG,EAAE,GAAG,EACR,CAAC,EAAE,MAAM,EACT,EAAE,EAAE,IAAI,EACR,GAAG,EAAE;AACH,YAAA,eAAe,EAAE,KAAK,CAAC,eAAe,CAAC,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC,QAAQ,EAAE;AAC7D,YAAA,WAAW,EAAA,WAAA;AACZ,SAAA,EAAA,EAAA,EAAA,QAAA,EAAA,CAEA,IAAI,GAAGC,GAAC,CAAA,IAAI,IAAC,IAAI,EAAE,IAAI,EAAE,IAAI,EAAE,SAAS,EAAA,CAAI,GAAG,IAAI,EACpDA,GAAA,CAAC,IAAI,EAAC,QAAA,CAAA,EAAA,OAAO,EAAC,OAAO,EAAC,IAAI,EAAE,IAAI,EAAE,GAAG,EAAE,EAAE,KAAK,EAAE,SAAS,EAAE,EAAA,EAAA,EAAA,QAAA,EACxD,QAAQ,EACJ,CAAA,CAAA,CAAA,EAAA,CAAA,CACF,EACR;AACH;;;;"}
|
|
@@ -0,0 +1,7 @@
|
|
|
1
|
+
import type { Meta, StoryObj } from '@storybook/react';
|
|
2
|
+
import { MusicBadge } from './MusicBadge';
|
|
3
|
+
declare const meta: Meta<typeof MusicBadge>;
|
|
4
|
+
export default meta;
|
|
5
|
+
type Story = StoryObj<typeof MusicBadge>;
|
|
6
|
+
export declare const Default: Story;
|
|
7
|
+
//# sourceMappingURL=MusicBadge.stories.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"MusicBadge.stories.d.ts","sourceRoot":"","sources":["../../../src/components/music-badge/MusicBadge.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,IAAI,EAAE,QAAQ,EAAE,MAAM,kBAAkB,CAAA;AAItD,OAAO,EAAE,UAAU,EAAE,MAAM,cAAc,CAAA;AAEzC,QAAA,MAAM,IAAI,EAAE,IAAI,CAAC,OAAO,UAAU,CAGjC,CAAA;AAED,eAAe,IAAI,CAAA;AAEnB,KAAK,KAAK,GAAG,QAAQ,CAAC,OAAO,UAAU,CAAC,CAAA;AAExC,eAAO,MAAM,OAAO,EAAE,KAKrB,CAAA"}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/music-badge/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAE,MAAM,cAAc,CAAA;AACzC,YAAY,EAAE,eAAe,EAAE,MAAM,cAAc,CAAA"}
|
|
@@ -0,0 +1,31 @@
|
|
|
1
|
+
/// <reference types="react" />
|
|
2
|
+
import { CSSObject } from '@emotion/react';
|
|
3
|
+
import { BaseButtonProps } from "../button/BaseButton/types";
|
|
4
|
+
export type PillProps = BaseButtonProps & {
|
|
5
|
+
variant?: 'default' | 'active' | 'custom';
|
|
6
|
+
};
|
|
7
|
+
/**
|
|
8
|
+
* The Pill button is located in the sidebar and is used to open the
|
|
9
|
+
* Add Playlist/Add Folder popover menu.
|
|
10
|
+
* It can also be used in the NEW pill in the notification card.
|
|
11
|
+
*/
|
|
12
|
+
export declare const Pill: (props: {
|
|
13
|
+
iconLeft?: import("..").IconComponent | null | undefined;
|
|
14
|
+
iconRight?: import("..").IconComponent | null | undefined;
|
|
15
|
+
isStaticIcon?: boolean | undefined;
|
|
16
|
+
isLoading?: boolean | undefined;
|
|
17
|
+
widthToHideText?: number | undefined;
|
|
18
|
+
minWidth?: number | undefined;
|
|
19
|
+
fullWidth?: boolean | undefined;
|
|
20
|
+
styles?: {
|
|
21
|
+
button?: CSSObject | undefined;
|
|
22
|
+
icon?: CSSObject | undefined;
|
|
23
|
+
} | undefined;
|
|
24
|
+
asChild?: boolean | undefined;
|
|
25
|
+
} & Omit<import("react").DetailedHTMLProps<import("react").ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, "ref"> & {
|
|
26
|
+
_isHovered?: boolean | undefined;
|
|
27
|
+
_isPressed?: boolean | undefined;
|
|
28
|
+
} & {
|
|
29
|
+
variant?: "default" | "active" | "custom" | undefined;
|
|
30
|
+
} & import("react").RefAttributes<HTMLButtonElement>) => import("react").ReactElement<any, string | import("react").JSXElementConstructor<any>> | null;
|
|
31
|
+
//# sourceMappingURL=Pill.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"Pill.d.ts","sourceRoot":"","sources":["../../../src/components/pill/Pill.tsx"],"names":[],"mappings":";AAEA,OAAO,EAAE,SAAS,EAAY,MAAM,gBAAgB,CAAA;AAGpD,OAAO,EAAE,eAAe,EAAE,mCAA0C;AAGpE,MAAM,MAAM,SAAS,GAAG,eAAe,GAAG;IACxC,OAAO,CAAC,EAAE,SAAS,GAAG,QAAQ,GAAG,QAAQ,CAAA;CAC1C,CAAA;AAED;;;;GAIG;AACH,eAAO,MAAM,IAAI;;;;;;;;;;;;;;;;;;sJA+DhB,CAAA"}
|
|
@@ -0,0 +1,59 @@
|
|
|
1
|
+
import { __rest, __assign } from '../../_virtual/_tslib.js';
|
|
2
|
+
import { jsx } from '@emotion/react/jsx-runtime';
|
|
3
|
+
import { forwardRef } from 'react';
|
|
4
|
+
import { useTheme } from '@emotion/react';
|
|
5
|
+
import { BaseButton } from '../button/BaseButton/BaseButton.js';
|
|
6
|
+
import { Text } from '../text/Text.js';
|
|
7
|
+
|
|
8
|
+
/**
|
|
9
|
+
* The Pill button is located in the sidebar and is used to open the
|
|
10
|
+
* Add Playlist/Add Folder popover menu.
|
|
11
|
+
* It can also be used in the NEW pill in the notification card.
|
|
12
|
+
*/
|
|
13
|
+
var Pill = forwardRef(function (props, ref) {
|
|
14
|
+
var _a = props.variant, variant = _a === void 0 ? 'default' : _a, children = props.children, other = __rest(props, ["variant", "children"]);
|
|
15
|
+
var onClick = other.onClick;
|
|
16
|
+
var _b = useTheme(), color = _b.color, spacing = _b.spacing, cornerRadius = _b.cornerRadius;
|
|
17
|
+
var backgroundColors = {
|
|
18
|
+
default: color.background.surface2,
|
|
19
|
+
active: color.background.accent,
|
|
20
|
+
custom: undefined
|
|
21
|
+
};
|
|
22
|
+
var hoverBackgroundColors = {
|
|
23
|
+
default: color.background.accent,
|
|
24
|
+
active: color.background.accent,
|
|
25
|
+
custom: undefined
|
|
26
|
+
};
|
|
27
|
+
var textColors = {
|
|
28
|
+
default: color.text.subdued,
|
|
29
|
+
active: color.text.staticWhite,
|
|
30
|
+
custom: color.text.staticWhite
|
|
31
|
+
};
|
|
32
|
+
var hoverTextColors = {
|
|
33
|
+
default: color.text.staticWhite,
|
|
34
|
+
active: color.text.staticWhite,
|
|
35
|
+
custom: color.text.staticWhite
|
|
36
|
+
};
|
|
37
|
+
var buttonCss = {
|
|
38
|
+
gap: spacing['2xs'],
|
|
39
|
+
paddingInline: 6,
|
|
40
|
+
paddingBlock: spacing['2xs'],
|
|
41
|
+
borderWidth: 0,
|
|
42
|
+
borderRadius: cornerRadius.circle,
|
|
43
|
+
backgroundColor: backgroundColors[variant],
|
|
44
|
+
color: textColors[variant],
|
|
45
|
+
'&:hover': {
|
|
46
|
+
backgroundColor: hoverBackgroundColors[variant],
|
|
47
|
+
color: hoverTextColors[variant]
|
|
48
|
+
},
|
|
49
|
+
pointerEvents: onClick ? 'auto' : 'none'
|
|
50
|
+
};
|
|
51
|
+
var iconCss = {
|
|
52
|
+
height: 10,
|
|
53
|
+
width: 10
|
|
54
|
+
};
|
|
55
|
+
return (jsx(BaseButton, __assign({ ref: ref, styles: { button: buttonCss, icon: iconCss }, asChild: !onClick }, other, { children: jsx(Text, __assign({ variant: 'label', size: 's' }, { children: children })) })));
|
|
56
|
+
});
|
|
57
|
+
|
|
58
|
+
export { Pill };
|
|
59
|
+
//# sourceMappingURL=Pill.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"Pill.js","sources":["../../../src/components/pill/Pill.tsx"],"sourcesContent":["import { Ref, forwardRef } from 'react'\n\nimport { CSSObject, useTheme } from '@emotion/react'\n\nimport { BaseButton } from 'components/button/BaseButton/BaseButton'\nimport { BaseButtonProps } from 'components/button/BaseButton/types'\nimport { Text } from 'components/text'\n\nexport type PillProps = BaseButtonProps & {\n variant?: 'default' | 'active' | 'custom'\n}\n\n/**\n * The Pill button is located in the sidebar and is used to open the\n * Add Playlist/Add Folder popover menu.\n * It can also be used in the NEW pill in the notification card.\n */\nexport const Pill = forwardRef(\n (props: PillProps, ref: Ref<HTMLButtonElement>) => {\n const { variant = 'default', children, ...other } = props\n const { onClick } = other\n const { color, spacing, cornerRadius } = useTheme()\n\n const backgroundColors = {\n default: color.background.surface2,\n active: color.background.accent,\n custom: undefined\n }\n\n const hoverBackgroundColors = {\n default: color.background.accent,\n active: color.background.accent,\n custom: undefined\n }\n\n const textColors = {\n default: color.text.subdued,\n active: color.text.staticWhite,\n custom: color.text.staticWhite\n }\n\n const hoverTextColors = {\n default: color.text.staticWhite,\n active: color.text.staticWhite,\n custom: color.text.staticWhite\n }\n\n const buttonCss: CSSObject = {\n gap: spacing['2xs'],\n paddingInline: 6,\n paddingBlock: spacing['2xs'],\n borderWidth: 0,\n borderRadius: cornerRadius.circle,\n backgroundColor: backgroundColors[variant],\n color: textColors[variant],\n '&:hover': {\n backgroundColor: hoverBackgroundColors[variant],\n color: hoverTextColors[variant]\n },\n pointerEvents: onClick ? 'auto' : 'none'\n }\n\n const iconCss = {\n height: 10,\n width: 10\n }\n\n return (\n <BaseButton\n ref={ref}\n styles={{ button: buttonCss, icon: iconCss }}\n asChild={!onClick}\n {...other}\n >\n <Text variant='label' size='s'>\n {children}\n </Text>\n </BaseButton>\n )\n }\n)\n"],"names":["_jsx"],"mappings":";;;;;;;AAYA;;;;AAIG;IACU,IAAI,GAAG,UAAU,CAC5B,UAAC,KAAgB,EAAE,GAA2B,EAAA;IACpC,IAAA,EAAA,GAA4C,KAAK,CAA9B,OAAA,EAAnB,OAAO,GAAG,EAAA,KAAA,KAAA,CAAA,GAAA,SAAS,KAAA,EAAE,QAAQ,GAAe,KAAK,CAAA,QAApB,EAAK,KAAK,GAAA,MAAA,CAAK,KAAK,EAAnD,CAAA,SAAA,EAAA,UAAA,CAA2C,CAAF,CAAU;AACjD,IAAA,IAAA,OAAO,GAAK,KAAK,CAAA,OAAV,CAAU;AACnB,IAAA,IAAA,EAAmC,GAAA,QAAQ,EAAE,EAA3C,KAAK,GAAA,EAAA,CAAA,KAAA,EAAE,OAAO,GAAA,EAAA,CAAA,OAAA,EAAE,YAAY,GAAA,EAAA,CAAA,YAAe,CAAA;AAEnD,IAAA,IAAM,gBAAgB,GAAG;AACvB,QAAA,OAAO,EAAE,KAAK,CAAC,UAAU,CAAC,QAAQ;AAClC,QAAA,MAAM,EAAE,KAAK,CAAC,UAAU,CAAC,MAAM;AAC/B,QAAA,MAAM,EAAE,SAAS;KAClB,CAAA;AAED,IAAA,IAAM,qBAAqB,GAAG;AAC5B,QAAA,OAAO,EAAE,KAAK,CAAC,UAAU,CAAC,MAAM;AAChC,QAAA,MAAM,EAAE,KAAK,CAAC,UAAU,CAAC,MAAM;AAC/B,QAAA,MAAM,EAAE,SAAS;KAClB,CAAA;AAED,IAAA,IAAM,UAAU,GAAG;AACjB,QAAA,OAAO,EAAE,KAAK,CAAC,IAAI,CAAC,OAAO;AAC3B,QAAA,MAAM,EAAE,KAAK,CAAC,IAAI,CAAC,WAAW;AAC9B,QAAA,MAAM,EAAE,KAAK,CAAC,IAAI,CAAC,WAAW;KAC/B,CAAA;AAED,IAAA,IAAM,eAAe,GAAG;AACtB,QAAA,OAAO,EAAE,KAAK,CAAC,IAAI,CAAC,WAAW;AAC/B,QAAA,MAAM,EAAE,KAAK,CAAC,IAAI,CAAC,WAAW;AAC9B,QAAA,MAAM,EAAE,KAAK,CAAC,IAAI,CAAC,WAAW;KAC/B,CAAA;AAED,IAAA,IAAM,SAAS,GAAc;AAC3B,QAAA,GAAG,EAAE,OAAO,CAAC,KAAK,CAAC;AACnB,QAAA,aAAa,EAAE,CAAC;AAChB,QAAA,YAAY,EAAE,OAAO,CAAC,KAAK,CAAC;AAC5B,QAAA,WAAW,EAAE,CAAC;QACd,YAAY,EAAE,YAAY,CAAC,MAAM;AACjC,QAAA,eAAe,EAAE,gBAAgB,CAAC,OAAO,CAAC;AAC1C,QAAA,KAAK,EAAE,UAAU,CAAC,OAAO,CAAC;AAC1B,QAAA,SAAS,EAAE;AACT,YAAA,eAAe,EAAE,qBAAqB,CAAC,OAAO,CAAC;AAC/C,YAAA,KAAK,EAAE,eAAe,CAAC,OAAO,CAAC;AAChC,SAAA;QACD,aAAa,EAAE,OAAO,GAAG,MAAM,GAAG,MAAM;KACzC,CAAA;AAED,IAAA,IAAM,OAAO,GAAG;AACd,QAAA,MAAM,EAAE,EAAE;AACV,QAAA,KAAK,EAAE,EAAE;KACV,CAAA;AAED,IAAA,QACEA,GAAC,CAAA,UAAU,aACT,GAAG,EAAE,GAAG,EACR,MAAM,EAAE,EAAE,MAAM,EAAE,SAAS,EAAE,IAAI,EAAE,OAAO,EAAE,EAC5C,OAAO,EAAE,CAAC,OAAO,EACb,EAAA,KAAK,cAETA,GAAC,CAAA,IAAI,aAAC,OAAO,EAAC,OAAO,EAAC,IAAI,EAAC,GAAG,EAAA,EAAA,EAAA,QAAA,EAC3B,QAAQ,EACJ,CAAA,CAAA,EAAA,CAAA,CACI,EACd;AACH,CAAC;;;;"}
|
|
@@ -0,0 +1,10 @@
|
|
|
1
|
+
import { Meta, StoryObj } from '@storybook/react';
|
|
2
|
+
import { Pill } from './Pill';
|
|
3
|
+
declare const meta: Meta<typeof Pill>;
|
|
4
|
+
export default meta;
|
|
5
|
+
type Story = StoryObj<typeof Pill>;
|
|
6
|
+
export declare const Primary: Story;
|
|
7
|
+
export declare const Active: Story;
|
|
8
|
+
export declare const Rewards: Story;
|
|
9
|
+
export declare const ClaimRewards: Story;
|
|
10
|
+
//# sourceMappingURL=Pill.stories.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"Pill.stories.d.ts","sourceRoot":"","sources":["../../../src/components/pill/Pill.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,IAAI,EAAE,QAAQ,EAAE,MAAM,kBAAkB,CAAA;AAIjD,OAAO,EAAE,IAAI,EAAE,MAAM,QAAQ,CAAA;AAE7B,QAAA,MAAM,IAAI,EAAE,IAAI,CAAC,OAAO,IAAI,CAG3B,CAAA;AAED,eAAe,IAAI,CAAA;AAEnB,KAAK,KAAK,GAAG,QAAQ,CAAC,OAAO,IAAI,CAAC,CAAA;AAElC,eAAO,MAAM,OAAO,EAAE,KAMrB,CAAA;AAED,eAAO,MAAM,MAAM,EAAE,KAEpB,CAAA;AAED,eAAO,MAAM,OAAO,EAAE,KAMrB,CAAA;AAED,eAAO,MAAM,YAAY,EAAE,KAW1B,CAAA"}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/pill/index.ts"],"names":[],"mappings":"AAAA,YAAY,EAAE,SAAS,EAAE,MAAM,QAAQ,CAAA;AACvC,OAAO,EAAE,IAAI,EAAE,MAAM,QAAQ,CAAA"}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"Popup.d.ts","sourceRoot":"","sources":["../../../src/components/popup/Popup.tsx"],"names":[],"mappings":";AAuBA,OAAO,KAAK,EAAE,UAAU,EAAU,MAAM,SAAS,CAAA;AA+JjD;;;;;GAKG;AACH,eAAO,MAAM,KAAK,sKAyPhB,CAAA"}
|
|
@@ -1,19 +1,21 @@
|
|
|
1
|
-
import { __assign } from '
|
|
1
|
+
import { __assign } from '../../_virtual/_tslib.js';
|
|
2
2
|
import { jsx, Fragment, jsxs } from '@emotion/react/jsx-runtime';
|
|
3
3
|
import { forwardRef, useState, useCallback, useRef, useEffect } from 'react';
|
|
4
4
|
import { useTheme } from '@emotion/react';
|
|
5
5
|
import cn from 'classnames';
|
|
6
6
|
import ReactDOM from 'react-dom';
|
|
7
7
|
import { useTransition, animated } from 'react-spring';
|
|
8
|
-
import '
|
|
9
|
-
import { PlainButton } from '
|
|
10
|
-
import { IconClose } from '
|
|
8
|
+
import '../button/Button/Button.js';
|
|
9
|
+
import { PlainButton } from '../button/PlainButton/PlainButton.js';
|
|
10
|
+
import { IconClose } from '../../icons/utilityIcons.js';
|
|
11
11
|
import '@emotion/css';
|
|
12
|
-
import '
|
|
13
|
-
import '
|
|
14
|
-
import '
|
|
15
|
-
import
|
|
16
|
-
import
|
|
12
|
+
import '../button/FollowButton/FollowButton.js';
|
|
13
|
+
import '../button/FilterButton/FilterButton.js';
|
|
14
|
+
import '../button/OptionsFilterButton/OptionsFilterButton.js';
|
|
15
|
+
import '../button/IconButton/IconButton.js';
|
|
16
|
+
import '../button/UnstyledButton.js';
|
|
17
|
+
import { useClickOutside } from '../../hooks/useClickOutside.js';
|
|
18
|
+
import { getScrollParent } from '../../utils/getScrollParent.js';
|
|
17
19
|
import styles from './Popup.module.css.js';
|
|
18
20
|
|
|
19
21
|
var messages = {
|
|
@@ -241,11 +243,13 @@ var Popup = forwardRef(function Popup(props, ref) {
|
|
|
241
243
|
return function () { };
|
|
242
244
|
}, [isVisible, handleClose]);
|
|
243
245
|
useEffect(function () {
|
|
246
|
+
var _a;
|
|
244
247
|
if (popupState === 'closed' && isVisibleProp) {
|
|
245
248
|
setPopupState('opening');
|
|
246
249
|
}
|
|
247
250
|
else if (popupState === 'open' && !isVisibleProp) {
|
|
248
251
|
setPopupState('closing');
|
|
252
|
+
(_a = anchorRef.current) === null || _a === void 0 ? void 0 : _a.focus();
|
|
249
253
|
}
|
|
250
254
|
}, [isVisibleProp, popupState]);
|
|
251
255
|
var transitions = useTransition(isVisibleProp, null, {
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"Popup.js","sources":["../../../src/components/popup/Popup.tsx"],"sourcesContent":["import {\n forwardRef,\n MutableRefObject,\n Ref,\n useCallback,\n useEffect,\n useRef,\n useState\n} from 'react'\n\nimport { useTheme } from '@emotion/react'\nimport cn from 'classnames'\nimport ReactDOM from 'react-dom'\nimport { useTransition, animated } from 'react-spring'\n\nimport { PlainButton } from 'components/button'\nimport { IconClose } from 'icons'\nimport { ModalState } from 'utils/modalState'\n\nimport { useClickOutside } from '../../hooks/useClickOutside'\nimport { getScrollParent } from '../../utils/getScrollParent'\n\nimport styles from './Popup.module.css'\nimport type { PopupProps, Origin } from './types'\n\nconst messages = {\n close: 'close popup'\n}\n\n/**\n * Number of pixels between the edge of the container and the popup\n * before the popup needs to reposition itself to be in view.\n */\nconst CONTAINER_INSET_PADDING = 16\n\n/**\n * Figures out whether the specified position would overflow the window\n * and picks a better position accordingly\n * @param {Origin} anchorOrigin where the origin is on the trigger\n * @param {Origin} transformOrigin where the origin is on the popup\n * @param {DOMRect} anchorRect the position and size of the trigger\n * @param {DOMRect} wrapperRect the position and size of the popup\n * @return {{ anchorOrigin: Origin, transformOrigin: Origin }} the new origin after accounting for overflow\n */\nconst getComputedOrigins = (\n anchorOrigin: Origin,\n transformOrigin: Origin,\n anchorRect: DOMRect,\n wrapperRect: DOMRect,\n portal: HTMLElement,\n containerRef?: MutableRefObject<HTMLDivElement | undefined>\n) => {\n if (!anchorRect || !wrapperRect) return { anchorOrigin, transformOrigin }\n\n let containerWidth, containerHeight\n if (containerRef && containerRef.current) {\n containerWidth =\n containerRef.current.getBoundingClientRect().width -\n CONTAINER_INSET_PADDING\n containerHeight =\n containerRef.current.getBoundingClientRect().height -\n CONTAINER_INSET_PADDING\n } else {\n containerWidth =\n portal.getBoundingClientRect().width - CONTAINER_INSET_PADDING\n containerHeight =\n portal.getBoundingClientRect().height - CONTAINER_INSET_PADDING\n }\n\n // Get new wrapper position\n const anchorTranslation = getOriginTranslation(anchorOrigin, anchorRect)\n const wrapperTranslation = getOriginTranslation(transformOrigin, wrapperRect)\n const wrapperX = anchorRect.x + anchorTranslation.x - wrapperTranslation.x\n const wrapperY = anchorRect.y + anchorTranslation.y - wrapperTranslation.y\n\n // Check bounds of the wrapper in new position are inside container\n const overflowRight = wrapperX + wrapperRect.width > containerWidth\n const overflowLeft = wrapperX < 0\n const overflowBottom = wrapperY + wrapperRect.height > containerHeight\n const overflowTop = wrapperY < 0\n\n // For all overflows, flip the position\n if (overflowRight) {\n anchorOrigin.horizontal = 'left'\n transformOrigin.horizontal = 'right'\n }\n if (overflowLeft) {\n anchorOrigin.horizontal = 'right'\n transformOrigin.horizontal = 'left'\n }\n if (overflowTop) {\n anchorOrigin.vertical = 'bottom'\n transformOrigin.vertical = 'top'\n }\n if (overflowBottom) {\n anchorOrigin.vertical = 'top'\n transformOrigin.vertical = 'bottom'\n }\n return { anchorOrigin, transformOrigin }\n}\n\n/**\n * Figures out whether the specified position would still overflow the window\n * after being computed and adds extra offsets\n */\nconst getAdjustedPosition = (\n top: number,\n left: number,\n wrapperRect: DOMRect,\n portal: HTMLElement\n): { adjustedTop: number; adjustedLeft: number } => {\n if (!wrapperRect) return { adjustedTop: 0, adjustedLeft: 0 }\n\n const containerWidth =\n portal.getBoundingClientRect().width - CONTAINER_INSET_PADDING\n const containerHeight =\n portal.getBoundingClientRect().height - CONTAINER_INSET_PADDING\n // Account for the portal being a scrollable container.\n // This will happen if the document body itself is what scrolls.\n const containerTop = -1 * portal.getBoundingClientRect().top\n\n const overflowRight = left + wrapperRect.width > containerWidth\n const overflowLeft = left < 0\n const overflowBottom = top + wrapperRect.height > containerHeight\n const overflowTop = top < 0\n\n const adjusted = { adjustedTop: containerTop, adjustedLeft: 0 }\n if (overflowRight) {\n adjusted.adjustedLeft =\n adjusted.adjustedLeft - (left + wrapperRect.width - containerWidth)\n }\n if (overflowLeft) {\n adjusted.adjustedLeft = adjusted.adjustedLeft + wrapperRect.width\n }\n if (overflowTop) {\n adjusted.adjustedTop =\n adjusted.adjustedTop - (top + wrapperRect.height - containerHeight)\n }\n if (overflowBottom) {\n adjusted.adjustedTop = adjusted.adjustedTop + wrapperRect.height\n }\n return adjusted\n}\n\n/**\n * Gets the x, y offsets for the given origin using the dimensions\n * @param origin the relative origin\n * @param dimensions the dimensions to use with the relative origin\n * @returns the x and y coordinates of the new origin relative to the old one\n */\nconst getOriginTranslation = (\n origin: Origin,\n dimensions: { width: number; height: number }\n) => {\n let x = 0\n let y = 0\n const { width, height } = dimensions\n if (origin.horizontal === 'center') {\n x += width / 2\n } else if (origin.horizontal === 'right') {\n x += width\n }\n if (origin.vertical === 'center') {\n y += height / 2\n } else if (origin.vertical === 'bottom') {\n y += height\n }\n return { x, y }\n}\n\nconst defaultAnchorOrigin: Origin = {\n horizontal: 'center',\n vertical: 'bottom'\n}\n\nconst defaultTransformOrigin: Origin = {\n horizontal: 'center',\n vertical: 'top'\n}\n\nconst closingAnimationDuration = 90\n\n/**\n * A popup is an in-place container that shows on top of the UI. A popup does\n * not impact the rest of the UI (e.g. dimming background or shifting elements).\n * It differs from modals, which do take over the whole UI and are usually\n * center-screened.\n */\nexport const Popup = forwardRef<HTMLDivElement, PopupProps>(function Popup(\n props: PopupProps,\n ref: Ref<HTMLDivElement>\n) {\n const {\n anchorRef,\n checkIfClickInside,\n children,\n className,\n isVisible: isVisibleProp,\n onAfterClose,\n onClose,\n anchorOrigin: anchorOriginProp = defaultAnchorOrigin,\n transformOrigin: transformOriginProp = defaultTransformOrigin,\n dismissOnMouseLeave,\n hideCloseButton = false,\n showHeader,\n title,\n zIndex,\n containerRef,\n portalLocation = document.body,\n shadow = 'mid',\n fixed\n } = props\n const { spring, shadows } = useTheme()\n const [popupState, setPopupState] = useState<ModalState>('closed')\n\n const isVisible = popupState !== 'closed'\n\n const handleClose = useCallback(() => {\n onClose?.()\n setTimeout(() => {\n if (onAfterClose) {\n onAfterClose()\n }\n }, closingAnimationDuration)\n }, [onClose, onAfterClose])\n\n const [anchorOrigin, transformOrigin] = [\n anchorOriginProp,\n transformOriginProp\n ]\n\n const popupRef: React.MutableRefObject<HTMLDivElement> = useClickOutside(\n handleClose,\n checkIfClickInside,\n isVisible,\n typeof ref === 'function' ? undefined : ref\n )\n\n const wrapperRef = useRef<HTMLDivElement>(null)\n const originalTopPosition = useRef<number>(0)\n const [computedTransformOrigin, setComputedTransformOrigin] =\n useState(anchorOrigin)\n\n // On visible, set the position\n useEffect(() => {\n if (isVisible) {\n const [anchorRect, wrapperRect] = [anchorRef, wrapperRef].map((r) =>\n r?.current?.getBoundingClientRect()\n )\n if (!anchorRect || !wrapperRect) return\n\n const {\n anchorOrigin: anchorOriginComputed,\n transformOrigin: transformOriginComputed\n } = getComputedOrigins(\n anchorOrigin,\n transformOrigin,\n anchorRect,\n wrapperRect,\n portalLocation,\n containerRef\n )\n setComputedTransformOrigin(transformOriginComputed)\n\n const anchorTranslation = getOriginTranslation(\n anchorOriginComputed,\n anchorRect\n )\n const wrapperTranslation = getOriginTranslation(\n transformOriginComputed,\n wrapperRect\n )\n\n const top = anchorRect.y + anchorTranslation.y - wrapperTranslation.y\n const left = anchorRect.x + anchorTranslation.x - wrapperTranslation.x\n\n const { adjustedTop, adjustedLeft } = getAdjustedPosition(\n top,\n left,\n wrapperRect,\n portalLocation\n )\n\n if (wrapperRef.current) {\n wrapperRef.current.style.top = `${top + adjustedTop}px`\n wrapperRef.current.style.left = `${left + adjustedLeft}px`\n }\n\n originalTopPosition.current = top\n }\n }, [\n isVisible,\n wrapperRef,\n anchorRef,\n anchorOrigin,\n transformOrigin,\n setComputedTransformOrigin,\n originalTopPosition,\n portalLocation,\n containerRef\n ])\n\n // Callback invoked on each scroll. Uses original top position to scroll with content.\n // Takes scrollParent to get the current scroll position as well as the intitial scroll position\n // when the popup became visible.\n const watchScroll = useCallback(\n (scrollParent: Element, initialScrollPosition: number) => {\n const scrollTop = scrollParent.scrollTop\n if (wrapperRef.current) {\n wrapperRef.current.style.top = `${\n originalTopPosition.current - scrollTop + initialScrollPosition\n }px`\n }\n },\n [wrapperRef, originalTopPosition]\n )\n\n // Set up scroll listeners\n useEffect(() => {\n if (isVisible && anchorRef.current) {\n const scrollParent = getScrollParent(anchorRef.current)\n if (!scrollParent) return\n\n const initialScrollPosition = scrollParent.scrollTop\n const listener = () => watchScroll(scrollParent, initialScrollPosition)\n scrollParent.addEventListener('scroll', listener)\n return () => {\n scrollParent.removeEventListener('scroll', listener)\n }\n }\n\n return () => {}\n }, [isVisible, watchScroll, anchorRef])\n\n // Set up key listeners\n useEffect(() => {\n if (isVisible) {\n const escapeListener = (e: KeyboardEvent) => {\n if (e.code === 'Escape') {\n handleClose()\n }\n }\n\n window.addEventListener('keydown', escapeListener)\n\n return () => window.removeEventListener('keydown', escapeListener)\n }\n return () => {}\n }, [isVisible, handleClose])\n\n useEffect(() => {\n if (popupState === 'closed' && isVisibleProp) {\n setPopupState('opening')\n } else if (popupState === 'open' && !isVisibleProp) {\n setPopupState('closing')\n anchorRef.current?.focus()\n }\n }, [isVisibleProp, popupState])\n\n const transitions = useTransition(isVisibleProp, null, {\n from: {\n transform: `scale(0)`,\n opacity: 0\n },\n enter: {\n transform: `scale(1)`,\n opacity: 1\n },\n leave: {\n transform: `scale(0)`,\n opacity: 0\n },\n config: spring.standard,\n unique: true,\n onDestroyed: (isDestroyed) => {\n setPopupState(isDestroyed ? 'closed' : 'open')\n }\n })\n\n const rootStyle = { zIndex, position: fixed ? ('fixed' as const) : undefined }\n\n const handleMouseLeave = useCallback(() => {\n if (dismissOnMouseLeave) {\n onClose?.()\n }\n }, [dismissOnMouseLeave, onClose])\n\n return (\n <>\n {/* Portal the popup out of the dom structure so that it has a separate stacking context */}\n {popupState !== 'closed'\n ? ReactDOM.createPortal(\n <div\n ref={wrapperRef}\n className={styles.root}\n style={rootStyle}\n onMouseLeave={handleMouseLeave}\n >\n {transitions.map(({ item, key, props }) =>\n item ? (\n <animated.div\n className={cn(styles.popup, className)}\n css={{ boxShadow: shadows[shadow] }}\n ref={popupRef}\n key={key}\n style={{\n ...props,\n transformOrigin: `${computedTransformOrigin.horizontal} ${computedTransformOrigin.vertical}`\n }}\n >\n {showHeader && (\n <div\n className={cn(styles.header, {\n [styles.noAfter]: hideCloseButton\n })}\n >\n {hideCloseButton ? null : (\n <PlainButton\n variant='subdued'\n aria-label={messages.close}\n onClick={handleClose}\n iconLeft={IconClose}\n />\n )}\n <div className={styles.title}>{title}</div>\n </div>\n )}\n {children}\n </animated.div>\n ) : null\n )}\n </div>,\n portalLocation\n )\n : null}\n </>\n )\n})\n"],"names":["_jsx","_Fragment","_jsxs"],"mappings":"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"}
|
|
@@ -0,0 +1,4 @@
|
|
|
1
|
+
var styles = {"root":"Popup-module_root__oJaYT","popup":"Popup-module_popup__sggYn","header":"Popup-module_header__46gUY","noAfter":"Popup-module_noAfter__3sZG2","title":"Popup-module_title__TzMOz","iconRemove":"Popup-module_iconRemove__flj-K"};
|
|
2
|
+
|
|
3
|
+
export { styles as default };
|
|
4
|
+
//# sourceMappingURL=Popup.module.css.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"Popup.stories.d.ts","sourceRoot":"","sources":["../../../src/components/popup/Popup.stories.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,IAAI,EAAE,QAAQ,EAAE,MAAM,kBAAkB,CAAA;AAOtD,OAAO,EAAE,KAAK,EAAE,MAAM,SAAS,CAAA;AA0B/B,QAAA,MAAM,IAAI,EAAE,IAAI,CAAC,OAAO,KAAK,CAuB5B,CAAA;AAED,eAAe,IAAI,CAAA;AAEnB,KAAK,KAAK,GAAG,QAAQ,CAAC,OAAO,KAAK,CAAC,CAAA;AAEnC,eAAO,MAAM,OAAO,EAAE,KAAoB,CAAA"}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/popup/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,KAAK,EAAE,MAAM,SAAS,CAAA;AAC/B,YAAY,EAAE,UAAU,EAAE,MAAM,EAAE,MAAM,SAAS,CAAA"}
|
|
@@ -1,5 +1,5 @@
|
|
|
1
|
-
import type { MutableRefObject,
|
|
2
|
-
import { ShadowOptions } from "
|
|
1
|
+
import type { MutableRefObject, ReactElement } from 'react';
|
|
2
|
+
import { ShadowOptions } from "../../foundations";
|
|
3
3
|
export type Origin = {
|
|
4
4
|
vertical: 'top' | 'center' | 'bottom';
|
|
5
5
|
horizontal: 'left' | 'center' | 'right';
|
|
@@ -29,7 +29,7 @@ export type PopupProps = {
|
|
|
29
29
|
/**
|
|
30
30
|
* Children to render inside the Popup
|
|
31
31
|
*/
|
|
32
|
-
children?:
|
|
32
|
+
children?: ReactElement;
|
|
33
33
|
/**
|
|
34
34
|
* Whether to dismiss the popup on mouse leave
|
|
35
35
|
*/
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../src/components/popup/types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,gBAAgB,EAAE,YAAY,EAAE,MAAM,OAAO,CAAA;AAE3D,OAAO,EAAE,aAAa,EAAE,0BAAmB;AAE3C,MAAM,MAAM,MAAM,GAAG;IACnB,QAAQ,EAAE,KAAK,GAAG,QAAQ,GAAG,QAAQ,CAAA;IACrC,UAAU,EAAE,MAAM,GAAG,QAAQ,GAAG,OAAO,CAAA;CACxC,CAAA;AAED,MAAM,MAAM,UAAU,GAAG;IACvB,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB;;OAEG;IACH,SAAS,EAAE,gBAAgB,CAAC,WAAW,GAAG,IAAI,CAAC,CAAA;IAE/C;;OAEG;IACH,SAAS,EAAE,OAAO,CAAA;IAElB;;;;OAIG;IACH,YAAY,CAAC,EAAE,MAAM,CAAA;IAErB;;;;OAIG;IACH,eAAe,CAAC,EAAE,MAAM,CAAA;IAExB;;OAEG;IACH,QAAQ,CAAC,EAAE,YAAY,CAAA;IAEvB;;OAEG;IACH,mBAAmB,CAAC,EAAE,OAAO,CAAA;IAE7B;;OAEG;IACH,UAAU,CAAC,EAAE,OAAO,CAAA;IAEpB;;OAEG;IACH,KAAK,CAAC,EAAE,MAAM,CAAA;IAEd;;OAEG;IACH,eAAe,CAAC,EAAE,OAAO,CAAA;IAEzB;;OAEG;IACH,MAAM,CAAC,EAAE,MAAM,CAAA;IAEf;;;;OAIG;IACH,YAAY,CAAC,EAAE,gBAAgB,CAAC,cAAc,GAAG,SAAS,CAAC,CAAA;IAE3D;;OAEG;IACH,OAAO,CAAC,EAAE,MAAM,IAAI,CAAA;IAEpB;;OAEG;IACH,YAAY,CAAC,EAAE,MAAM,IAAI,CAAA;IAEzB;;;;OAIG;IACH,kBAAkB,CAAC,EAAE,CAAC,MAAM,EAAE,WAAW,KAAK,OAAO,CAAA;IAErD;;;OAGG;IACH,cAAc,CAAC,EAAE,WAAW,CAAA;IAC5B,MAAM,CAAC,EAAE,aAAa,CAAA;IACtB,KAAK,CAAC,EAAE,OAAO,CAAA;CAChB,CAAA"}
|
|
@@ -16,8 +16,8 @@ export declare const PopupMenu: (props: {
|
|
|
16
16
|
hideCloseButton?: boolean | undefined;
|
|
17
17
|
zIndex?: number | undefined;
|
|
18
18
|
containerRef?: import("react").MutableRefObject<HTMLDivElement | undefined> | undefined;
|
|
19
|
-
transformOrigin?: import("../
|
|
20
|
-
anchorOrigin?: import("../
|
|
19
|
+
transformOrigin?: import("../popup").Origin | undefined;
|
|
20
|
+
anchorOrigin?: import("../popup").Origin | undefined;
|
|
21
21
|
fixed?: boolean | undefined;
|
|
22
22
|
} & import("react").RefAttributes<HTMLDivElement>) => import("react").ReactElement<any, string | import("react").JSXElementConstructor<any>> | null;
|
|
23
23
|
//# sourceMappingURL=PopupMenu.d.ts.map
|
|
@@ -2,7 +2,7 @@ import { __assign } from '../../_virtual/_tslib.js';
|
|
|
2
2
|
import { jsxs, jsx } from '@emotion/react/jsx-runtime';
|
|
3
3
|
import { forwardRef, useRef, useState, useCallback } from 'react';
|
|
4
4
|
import cn from 'classnames';
|
|
5
|
-
import { Popup } from '../
|
|
5
|
+
import { Popup } from '../popup/Popup.js';
|
|
6
6
|
import styles from './PopupMenu.module.css.js';
|
|
7
7
|
|
|
8
8
|
/**
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"PopupMenu.js","sources":["../../../src/components/popup-menu/PopupMenu.tsx"],"sourcesContent":["import { forwardRef, useCallback, useRef, useState, MouseEvent } from 'react'\n\nimport cn from 'classnames'\n\nimport { Popup } from '../
|
|
1
|
+
{"version":3,"file":"PopupMenu.js","sources":["../../../src/components/popup-menu/PopupMenu.tsx"],"sourcesContent":["import { forwardRef, useCallback, useRef, useState, MouseEvent } from 'react'\n\nimport cn from 'classnames'\n\nimport { Popup } from '../popup'\n\nimport styles from './PopupMenu.module.css'\nimport { PopupMenuItem, PopupMenuProps } from './types'\n\n/**\n * A menu that shows on top of the UI. Ideal for overflow menus, dropdowns, etc\n */\nexport const PopupMenu = forwardRef<HTMLDivElement, PopupMenuProps>(\n function PopupMenu(props, ref) {\n const {\n items,\n onClose,\n renderMenu,\n renderTrigger,\n dismissOnMouseLeave,\n hideCloseButton,\n title,\n className,\n zIndex,\n containerRef,\n anchorOrigin,\n transformOrigin,\n id,\n fixed\n } = props\n const clickInsideRef = useRef<any>()\n const anchorRef = useRef<HTMLElement>(null)\n\n const [isPopupVisible, setIsPopupVisible] = useState<boolean>(false)\n\n const triggerPopup = useCallback(\n (onMouseEnter?: boolean) => {\n if (onMouseEnter && isPopupVisible) return\n setIsPopupVisible(!isPopupVisible)\n },\n [isPopupVisible, setIsPopupVisible]\n )\n\n const handlePopupClose = useCallback(() => {\n setIsPopupVisible(false)\n if (onClose) onClose()\n }, [setIsPopupVisible, onClose])\n\n const handleMenuItemClick = useCallback(\n (item: PopupMenuItem) => (e: MouseEvent<HTMLLIElement>) => {\n e.stopPropagation()\n item.onClick(e)\n handlePopupClose()\n },\n [handlePopupClose]\n )\n\n const triggerId = id ? `${id}-trigger` : undefined\n\n const triggerProps = {\n 'aria-controls': isPopupVisible ? id : undefined,\n 'aria-haspopup': true,\n 'aria-expanded': isPopupVisible ? ('true' as const) : undefined,\n id: triggerId\n }\n\n return (\n <div ref={clickInsideRef}>\n {renderTrigger(anchorRef, triggerPopup, triggerProps)}\n <Popup\n anchorRef={anchorRef}\n checkIfClickInside={(target: EventTarget) => {\n if (target instanceof Element && clickInsideRef) {\n return clickInsideRef.current.contains(target)\n }\n return false\n }}\n isVisible={isPopupVisible}\n showHeader={Boolean(title)}\n hideCloseButton={hideCloseButton}\n onClose={handlePopupClose}\n ref={ref}\n title={title || ''}\n zIndex={zIndex}\n containerRef={containerRef}\n transformOrigin={transformOrigin}\n anchorOrigin={anchorOrigin}\n className={cn(styles.popup, className)}\n dismissOnMouseLeave={dismissOnMouseLeave}\n fixed={fixed}\n >\n {renderMenu ? (\n renderMenu(items)\n ) : (\n <ul\n className={styles.menu}\n role='menu'\n aria-labelledby={triggerId}\n tabIndex={-1}\n >\n {items.map((item, i) => (\n <li\n key={typeof item.text === 'string' ? item.text : i}\n role='menuitem'\n className={cn(styles.item, item.className)}\n onClick={handleMenuItemClick(item)}\n tabIndex={i === 0 ? 0 : -1}\n >\n {item.icon ? (\n <div className={cn(styles.icon, item.iconClassName)}>\n {item.icon}\n </div>\n ) : null}\n {item.text}\n </li>\n ))}\n </ul>\n )}\n </Popup>\n </div>\n )\n }\n)\n"],"names":["_jsxs","_jsx"],"mappings":"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"}
|
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import { ComponentProps, MouseEvent } from 'react';
|
|
2
|
-
import { PopupProps } from '../
|
|
2
|
+
import { PopupProps } from '../popup';
|
|
3
3
|
type ApplicablePopupProps = Pick<PopupProps, 'title' | 'className' | 'hideCloseButton' | 'zIndex' | 'containerRef' | 'transformOrigin' | 'anchorOrigin' | 'fixed'>;
|
|
4
4
|
export type PopupMenuProps = {
|
|
5
5
|
/**
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../src/components/popup-menu/types.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,cAAc,EAAE,UAAU,EAAE,MAAM,OAAO,CAAA;AAElD,OAAO,EAAE,UAAU,EAAE,MAAM,
|
|
1
|
+
{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../src/components/popup-menu/types.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,cAAc,EAAE,UAAU,EAAE,MAAM,OAAO,CAAA;AAElD,OAAO,EAAE,UAAU,EAAE,MAAM,UAAU,CAAA;AAErC,KAAK,oBAAoB,GAAG,IAAI,CAC9B,UAAU,EACR,OAAO,GACP,WAAW,GACX,iBAAiB,GACjB,QAAQ,GACR,cAAc,GACd,iBAAiB,GACjB,cAAc,GACd,OAAO,CACV,CAAA;AAED,MAAM,MAAM,cAAc,GAAG;IAC3B;;OAEG;IACH,KAAK,EAAE,aAAa,EAAE,CAAA;IAEtB;;OAEG;IACH,OAAO,CAAC,EAAE,MAAM,IAAI,CAAA;IAEpB;;OAEG;IACH,UAAU,CAAC,EAAE,CAAC,SAAS,EAAE,aAAa,EAAE,KAAK,GAAG,CAAC,OAAO,CAAA;IAExD;;OAEG;IACH,mBAAmB,CAAC,EAAE,OAAO,CAAA;IAE7B;;;;OAIG;IACH,aAAa,EAAE,CACb,SAAS,EAAE,KAAK,CAAC,gBAAgB,CAAC,GAAG,CAAC,EACtC,YAAY,EAAE,CAAC,YAAY,CAAC,EAAE,OAAO,KAAK,IAAI,EAC9C,YAAY,EAAE,OAAO,CAAC,cAAc,CAAC,QAAQ,CAAC,CAAC,KAC5C,KAAK,CAAC,SAAS,CAAA;IACpB;;OAEG;IACH,EAAE,CAAC,EAAE,MAAM,CAAA;CACZ,GAAG,oBAAoB,CAAA;AAExB,MAAM,MAAM,aAAa,GAAG;IAC1B;;OAEG;IACH,SAAS,CAAC,EAAE,MAAM,CAAA;IAElB;;OAEG;IACH,IAAI,CAAC,EAAE,KAAK,CAAC,SAAS,CAAA;IAEtB;;OAEG;IACH,aAAa,CAAC,EAAE,MAAM,CAAA;IAEtB;;OAEG;IACH,OAAO,EAAE,CAAC,KAAK,EAAE,UAAU,CAAC,WAAW,CAAC,KAAK,IAAI,CAAA;IAEjD;;OAEG;IACH,IAAI,EAAE,MAAM,GAAG,KAAK,CAAC,SAAS,CAAA;IAE9B;;OAEG;IACH,OAAO,CAAC,EAAE,MAAM,GAAG,KAAK,CAAC,SAAS,CAAA;CACnC,CAAA"}
|
|
@@ -6,7 +6,6 @@ import '../layout/Box/Box.js';
|
|
|
6
6
|
import '@emotion/react';
|
|
7
7
|
import { Flex } from '../layout/Flex/Flex.js';
|
|
8
8
|
import '../layout/Paper/Paper.js';
|
|
9
|
-
import '../layout/Popup/Popup.js';
|
|
10
9
|
import { RadioGroupContext } from './RadioGroupContext.js';
|
|
11
10
|
|
|
12
11
|
var RadioGroup = function (props) {
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"RadioGroup.js","sources":["../../../src/components/radio-group/RadioGroup.tsx"],"sourcesContent":["import { ChangeEvent, ReactNode, useCallback } from 'react'\n\nimport { useControlled } from '../../hooks/useControlled'\nimport { Flex, FlexProps } from '../layout'\n\nimport { RadioGroupContext } from './RadioGroupContext'\n\nexport type RadioGroupProps = {\n name: string\n onChange?: (e: ChangeEvent<HTMLInputElement>) => void\n children?: ReactNode\n defaultValue?: string\n value?: string | null\n} & FlexProps\n\nexport const RadioGroup = (props: RadioGroupProps) => {\n const {\n name,\n onChange,\n children,\n value: valueProp,\n defaultValue,\n ...other\n } = props\n const [value, setValueState] = useControlled({\n controlledProp: valueProp,\n defaultValue,\n componentName: 'RadioButtonGroup'\n })\n const handleChange = useCallback(\n (e: ChangeEvent<HTMLInputElement>) => {\n setValueState(e.target.value)\n onChange?.(e)\n },\n [setValueState, onChange]\n )\n return (\n <RadioGroupContext.Provider value={{ name, onChange: handleChange, value }}>\n <Flex role='radiogroup' direction='column' {...other}>\n {children}\n </Flex>\n </RadioGroupContext.Provider>\n )\n}\n"],"names":["_jsx"],"mappings":"
|
|
1
|
+
{"version":3,"file":"RadioGroup.js","sources":["../../../src/components/radio-group/RadioGroup.tsx"],"sourcesContent":["import { ChangeEvent, ReactNode, useCallback } from 'react'\n\nimport { useControlled } from '../../hooks/useControlled'\nimport { Flex, FlexProps } from '../layout'\n\nimport { RadioGroupContext } from './RadioGroupContext'\n\nexport type RadioGroupProps = {\n name: string\n onChange?: (e: ChangeEvent<HTMLInputElement>) => void\n children?: ReactNode\n defaultValue?: string\n value?: string | null\n} & FlexProps\n\nexport const RadioGroup = (props: RadioGroupProps) => {\n const {\n name,\n onChange,\n children,\n value: valueProp,\n defaultValue,\n ...other\n } = props\n const [value, setValueState] = useControlled({\n controlledProp: valueProp,\n defaultValue,\n componentName: 'RadioButtonGroup'\n })\n const handleChange = useCallback(\n (e: ChangeEvent<HTMLInputElement>) => {\n setValueState(e.target.value)\n onChange?.(e)\n },\n [setValueState, onChange]\n )\n return (\n <RadioGroupContext.Provider value={{ name, onChange: handleChange, value }}>\n <Flex role='radiogroup' direction='column' {...other}>\n {children}\n </Flex>\n </RadioGroupContext.Provider>\n )\n}\n"],"names":["_jsx"],"mappings":";;;;;;;;;;AAeO,IAAM,UAAU,GAAG,UAAC,KAAsB,EAAA;AAE7C,IAAA,IAAA,IAAI,GAMF,KAAK,CAAA,IANH,EACJ,QAAQ,GAKN,KAAK,CALC,QAAA,EACR,QAAQ,GAIN,KAAK,CAJC,QAAA,EACD,SAAS,GAGd,KAAK,CAAA,KAHS,EAChB,YAAY,GAEV,KAAK,CAAA,YAFK,EACT,KAAK,GACN,MAAA,CAAA,KAAK,EAPH,CAAA,MAAA,EAAA,UAAA,EAAA,UAAA,EAAA,OAAA,EAAA,cAAA,CAOL,CADS,CACD;IACH,IAAA,EAAA,GAAyB,aAAa,CAAC;AAC3C,QAAA,cAAc,EAAE,SAAS;AACzB,QAAA,YAAY,EAAA,YAAA;AACZ,QAAA,aAAa,EAAE,kBAAkB;AAClC,KAAA,CAAC,EAJK,KAAK,GAAA,EAAA,CAAA,CAAA,CAAA,EAAE,aAAa,QAIzB,CAAA;AACF,IAAA,IAAM,YAAY,GAAG,WAAW,CAC9B,UAAC,CAAgC,EAAA;AAC/B,QAAA,aAAa,CAAC,CAAC,CAAC,MAAM,CAAC,KAAK,CAAC,CAAA;AAC7B,QAAA,QAAQ,aAAR,QAAQ,KAAA,KAAA,CAAA,GAAA,KAAA,CAAA,GAAR,QAAQ,CAAG,CAAC,CAAC,CAAA;AACf,KAAC,EACD,CAAC,aAAa,EAAE,QAAQ,CAAC,CAC1B,CAAA;AACD,IAAA,QACEA,GAAC,CAAA,iBAAiB,CAAC,QAAQ,aAAC,KAAK,EAAE,EAAE,IAAI,MAAA,EAAE,QAAQ,EAAE,YAAY,EAAE,KAAK,EAAA,KAAA,EAAE,EAAA,EAAA,EAAA,QAAA,EACxEA,IAAC,IAAI,EAAA,QAAA,CAAA,EAAC,IAAI,EAAC,YAAY,EAAC,SAAS,EAAC,QAAQ,IAAK,KAAK,EAAA,EAAA,QAAA,EACjD,QAAQ,EACJ,CAAA,CAAA,EAAA,CAAA,CACoB,EAC9B;AACH;;;;"}
|
|
@@ -6,7 +6,7 @@ import { useSpring, animated } from '@react-spring/web';
|
|
|
6
6
|
import cn from 'classnames';
|
|
7
7
|
import { mergeRefs } from 'react-merge-refs';
|
|
8
8
|
import useMeasure from 'react-use-measure';
|
|
9
|
-
import { Text } from '../text/Text
|
|
9
|
+
import { Text } from '../text/Text.js';
|
|
10
10
|
import styles from './SegmentedControl.module.css.js';
|
|
11
11
|
|
|
12
12
|
/**
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"SegmentedControl.js","sources":["../../../src/components/segmented-control/SegmentedControl.tsx"],"sourcesContent":["import { createRef, Fragment, useState, useRef, useEffect } from 'react'\n\nimport { ResizeObserver } from '@juggle/resize-observer'\nimport { useSpring, animated } from '@react-spring/web'\nimport cn from 'classnames'\nimport { mergeRefs } from 'react-merge-refs'\nimport useMeasure from 'react-use-measure'\n\nimport { Text } from 'components/text/Text'\n\nimport styles from './SegmentedControl.module.css'\nimport { SegmentedControlProps } from './types'\n\n/**\n * A hybrid somewhere between a button group, radio buttons, and tabs;\n * segmented controls are used to switch between different options or views.\n */\nexport const SegmentedControl = <T extends string>(\n props: SegmentedControlProps<T>\n) => {\n const optionRefs = useRef(\n props.options.map((_) => createRef<HTMLLabelElement>())\n )\n const [selected, setSelected] = useState(props.options[0].key)\n const [maxOptionWidth, setMaxOptionWidth] = useState(0)\n\n const selectedOption = props.selected || selected\n\n const onSetSelected = (option: T) => {\n // Call props function if controlled\n if (props.onSelectOption) props.onSelectOption(option)\n setSelected(option)\n }\n\n const [tabProps, tabApi] = useSpring(() => ({\n to: { left: '0px', width: '0px' }\n }))\n\n useEffect(() => {\n setMaxOptionWidth(\n optionRefs.current.reduce((currentMax, ref) => {\n const rect = ref.current?.getBoundingClientRect()\n return Math.max(rect?.width ?? 0, currentMax)\n }, 0)\n )\n }, [])\n\n // Watch for resizes and repositions so that we move and resize the slider appropriately\n const [selectedRef, bounds] = useMeasure({\n offsetSize: true,\n polyfill: ResizeObserver\n })\n\n const [forceRefresh, setForceRefresh] = useState(false)\n useEffect(() => {\n setTimeout(() => {\n setForceRefresh(!forceRefresh)\n }, props.forceRefreshAfterMs)\n // eslint-disable-next-line react-hooks/exhaustive-deps\n }, [])\n\n useEffect(() => {\n let selectedRefIdx = props.options.findIndex(\n (option) => option.key === selectedOption\n )\n if (selectedRefIdx === -1) selectedRefIdx = 0\n\n const { clientWidth: width, offsetLeft: left } = optionRefs.current[\n selectedRefIdx\n ]?.current ?? { clientWidth: 0, offsetLeft: 0 }\n\n tabApi.start({\n to: { left: `${left}px`, width: `${width}px` }\n })\n }, [\n props.options,\n props.equalWidth,\n selectedOption,\n props.selected,\n tabApi,\n selected,\n optionRefs,\n bounds,\n forceRefresh\n ])\n\n return (\n <div\n className={cn(styles.tabs, props.className, {\n [styles.containerFullWidth]: !!props.fullWidth,\n [styles.isMobile]: props.isMobile,\n [styles.disabled]: props.disabled\n })}\n role='radiogroup'\n aria-label={props.label}\n aria-labelledby={props['aria-labelledby']}\n >\n <animated.div className={styles.tabBackground} style={tabProps} />\n {props.options.map((option, idx) => {\n const isOptionDisabled = props.disabled || option.disabled\n return (\n <Fragment key={option.key}>\n <label\n ref={\n option.key === selectedOption\n ? mergeRefs([optionRefs.current[idx], selectedRef])\n : optionRefs.current[idx]\n }\n className={cn(styles.tab, {\n [styles.tabFullWidth]: !!props.fullWidth,\n [styles.disabled]: !props.disabled && option.disabled,\n [styles.isMobile]: props.isMobile\n })}\n style={\n props.equalWidth && maxOptionWidth\n ? { width: `${maxOptionWidth}px` }\n : undefined\n }\n >\n {option.icon}\n <input\n type='radio'\n checked={option.key === selectedOption}\n onChange={() => {\n onSetSelected(option.key)\n }}\n disabled={isOptionDisabled}\n />\n <Text\n color={\n option.variant ?? (isOptionDisabled ? 'subdued' : 'default')\n }\n css={{\n cursor: isOptionDisabled ? 'auto' : 'pointer'\n }}\n >\n {option.text}\n </Text>\n </label>\n {idx !== props.options.length - 1 ? (\n <div\n className={cn(styles.separator, {\n [styles.invisible]:\n // Hide separator right of the selected option\n selectedOption === option.key ||\n // Hide separator right of the last option\n idx === props.options.length - 1 ||\n // Hide separator right of an option if the next one is selected\n selectedOption === props.options[idx + 1].key\n })}\n />\n ) : null}\n </Fragment>\n )\n })}\n </div>\n )\n}\n"],"names":["_jsxs","_jsx"],"mappings":"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"}
|
|
1
|
+
{"version":3,"file":"SegmentedControl.js","sources":["../../../src/components/segmented-control/SegmentedControl.tsx"],"sourcesContent":["import { createRef, Fragment, useState, useRef, useEffect } from 'react'\n\nimport { ResizeObserver } from '@juggle/resize-observer'\nimport { useSpring, animated } from '@react-spring/web'\nimport cn from 'classnames'\nimport { mergeRefs } from 'react-merge-refs'\nimport useMeasure from 'react-use-measure'\n\nimport { Text } from 'components/text'\n\nimport styles from './SegmentedControl.module.css'\nimport { SegmentedControlProps } from './types'\n\n/**\n * A hybrid somewhere between a button group, radio buttons, and tabs;\n * segmented controls are used to switch between different options or views.\n */\nexport const SegmentedControl = <T extends string>(\n props: SegmentedControlProps<T>\n) => {\n const optionRefs = useRef(\n props.options.map((_) => createRef<HTMLLabelElement>())\n )\n const [selected, setSelected] = useState(props.options[0].key)\n const [maxOptionWidth, setMaxOptionWidth] = useState(0)\n\n const selectedOption = props.selected || selected\n\n const onSetSelected = (option: T) => {\n // Call props function if controlled\n if (props.onSelectOption) props.onSelectOption(option)\n setSelected(option)\n }\n\n const [tabProps, tabApi] = useSpring(() => ({\n to: { left: '0px', width: '0px' }\n }))\n\n useEffect(() => {\n setMaxOptionWidth(\n optionRefs.current.reduce((currentMax, ref) => {\n const rect = ref.current?.getBoundingClientRect()\n return Math.max(rect?.width ?? 0, currentMax)\n }, 0)\n )\n }, [])\n\n // Watch for resizes and repositions so that we move and resize the slider appropriately\n const [selectedRef, bounds] = useMeasure({\n offsetSize: true,\n polyfill: ResizeObserver\n })\n\n const [forceRefresh, setForceRefresh] = useState(false)\n useEffect(() => {\n setTimeout(() => {\n setForceRefresh(!forceRefresh)\n }, props.forceRefreshAfterMs)\n // eslint-disable-next-line react-hooks/exhaustive-deps\n }, [])\n\n useEffect(() => {\n let selectedRefIdx = props.options.findIndex(\n (option) => option.key === selectedOption\n )\n if (selectedRefIdx === -1) selectedRefIdx = 0\n\n const { clientWidth: width, offsetLeft: left } = optionRefs.current[\n selectedRefIdx\n ]?.current ?? { clientWidth: 0, offsetLeft: 0 }\n\n tabApi.start({\n to: { left: `${left}px`, width: `${width}px` }\n })\n }, [\n props.options,\n props.equalWidth,\n selectedOption,\n props.selected,\n tabApi,\n selected,\n optionRefs,\n bounds,\n forceRefresh\n ])\n\n return (\n <div\n className={cn(styles.tabs, props.className, {\n [styles.containerFullWidth]: !!props.fullWidth,\n [styles.isMobile]: props.isMobile,\n [styles.disabled]: props.disabled\n })}\n role='radiogroup'\n aria-label={props.label}\n aria-labelledby={props['aria-labelledby']}\n >\n <animated.div className={styles.tabBackground} style={tabProps} />\n {props.options.map((option, idx) => {\n const isOptionDisabled = props.disabled || option.disabled\n return (\n <Fragment key={option.key}>\n <label\n ref={\n option.key === selectedOption\n ? mergeRefs([optionRefs.current[idx], selectedRef])\n : optionRefs.current[idx]\n }\n className={cn(styles.tab, {\n [styles.tabFullWidth]: !!props.fullWidth,\n [styles.disabled]: !props.disabled && option.disabled,\n [styles.isMobile]: props.isMobile\n })}\n style={\n props.equalWidth && maxOptionWidth\n ? { width: `${maxOptionWidth}px` }\n : undefined\n }\n >\n {option.icon}\n <input\n type='radio'\n checked={option.key === selectedOption}\n onChange={() => {\n onSetSelected(option.key)\n }}\n disabled={isOptionDisabled}\n />\n <Text\n color={\n option.variant ?? (isOptionDisabled ? 'subdued' : 'default')\n }\n css={{\n cursor: isOptionDisabled ? 'auto' : 'pointer'\n }}\n >\n {option.text}\n </Text>\n </label>\n {idx !== props.options.length - 1 ? (\n <div\n className={cn(styles.separator, {\n [styles.invisible]:\n // Hide separator right of the selected option\n selectedOption === option.key ||\n // Hide separator right of the last option\n idx === props.options.length - 1 ||\n // Hide separator right of an option if the next one is selected\n selectedOption === props.options[idx + 1].key\n })}\n />\n ) : null}\n </Fragment>\n )\n })}\n </div>\n )\n}\n"],"names":["_jsxs","_jsx"],"mappings":"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"}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"Skeleton.d.ts","sourceRoot":"","sources":["../../../src/components/skeleton/Skeleton.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAO,QAAQ,EAAE,MAAM,eAAe,CAAA;AAW7C,KAAK,aAAa,GAAG,QAAQ,CAAA;AAE7B,eAAO,MAAM,QAAQ,UAAW,aAAa,qDAmB5C,CAAA"}
|
|
@@ -0,0 +1,27 @@
|
|
|
1
|
+
import { __assign } from '../../_virtual/_tslib.js';
|
|
2
|
+
import { jsx } from '@emotion/react/jsx-runtime';
|
|
3
|
+
import { keyframes, useTheme } from '@emotion/react';
|
|
4
|
+
import { Box } from '../layout/Box/Box.js';
|
|
5
|
+
|
|
6
|
+
var shimmer = keyframes({
|
|
7
|
+
from: {
|
|
8
|
+
backgroundPosition: 'right'
|
|
9
|
+
},
|
|
10
|
+
to: {
|
|
11
|
+
backgroundPosition: 'left'
|
|
12
|
+
}
|
|
13
|
+
});
|
|
14
|
+
var Skeleton = function (props) {
|
|
15
|
+
var color = useTheme().color;
|
|
16
|
+
var color1 = color.neutral.n50;
|
|
17
|
+
var color2 = color.neutral.n100;
|
|
18
|
+
var css = {
|
|
19
|
+
backgroundImage: "linear-gradient(\n 90deg,\n ".concat(color1, " 0%,\n ").concat(color1, " 32%,\n ").concat(color2, " 46%,\n ").concat(color2, " 54%,\n ").concat(color1, " 68%,\n ").concat(color2, " 100%\n )"),
|
|
20
|
+
animation: "".concat(shimmer, " 1.5s forwards infinite ease"),
|
|
21
|
+
backgroundSize: '400%'
|
|
22
|
+
};
|
|
23
|
+
return jsx(Box, __assign({ borderRadius: 's', css: css, "aria-busy": true }, props));
|
|
24
|
+
};
|
|
25
|
+
|
|
26
|
+
export { Skeleton };
|
|
27
|
+
//# sourceMappingURL=Skeleton.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"Skeleton.js","sources":["../../../src/components/skeleton/Skeleton.tsx"],"sourcesContent":["import { keyframes, useTheme } from '@emotion/react'\n\nimport { Box, BoxProps } from '../layout/Box'\n\nconst shimmer = keyframes({\n from: {\n backgroundPosition: 'right'\n },\n to: {\n backgroundPosition: 'left'\n }\n})\n\ntype SkeletonProps = BoxProps\n\nexport const Skeleton = (props: SkeletonProps) => {\n const { color } = useTheme()\n const color1 = color.neutral.n50\n const color2 = color.neutral.n100\n const css = {\n backgroundImage: `linear-gradient(\n 90deg,\n ${color1} 0%,\n ${color1} 32%,\n ${color2} 46%,\n ${color2} 54%,\n ${color1} 68%,\n ${color2} 100%\n )`,\n animation: `${shimmer} 1.5s forwards infinite ease`,\n backgroundSize: '400%'\n }\n\n return <Box borderRadius='s' css={css} aria-busy {...props} />\n}\n"],"names":["_jsx"],"mappings":";;;;;AAIA,IAAM,OAAO,GAAG,SAAS,CAAC;AACxB,IAAA,IAAI,EAAE;AACJ,QAAA,kBAAkB,EAAE,OAAO;AAC5B,KAAA;AACD,IAAA,EAAE,EAAE;AACF,QAAA,kBAAkB,EAAE,MAAM;AAC3B,KAAA;AACF,CAAA,CAAC,CAAA;AAIK,IAAM,QAAQ,GAAG,UAAC,KAAoB,EAAA;AACnC,IAAA,IAAA,KAAK,GAAK,QAAQ,EAAE,MAAf,CAAe;AAC5B,IAAA,IAAM,MAAM,GAAG,KAAK,CAAC,OAAO,CAAC,GAAG,CAAA;AAChC,IAAA,IAAM,MAAM,GAAG,KAAK,CAAC,OAAO,CAAC,IAAI,CAAA;AACjC,IAAA,IAAM,GAAG,GAAG;AACV,QAAA,eAAe,EAAE,wCAAA,CAAA,MAAA,CAEb,MAAM,EAAA,cAAA,CAAA,CAAA,MAAA,CACN,MAAM,EAAA,eAAA,CAAA,CAAA,MAAA,CACN,MAAM,EAAA,eAAA,CAAA,CAAA,MAAA,CACN,MAAM,EAAA,eAAA,CAAA,CAAA,MAAA,CACN,MAAM,EAAA,eAAA,CAAA,CAAA,MAAA,CACN,MAAM,EACR,cAAA,CAAA;QACF,SAAS,EAAE,EAAG,CAAA,MAAA,CAAA,OAAO,EAA8B,8BAAA,CAAA;AACnD,QAAA,cAAc,EAAE,MAAM;KACvB,CAAA;AAED,IAAA,OAAOA,GAAC,CAAA,GAAG,EAAC,QAAA,CAAA,EAAA,YAAY,EAAC,GAAG,EAAC,GAAG,EAAE,GAAG,EAAgB,WAAA,EAAA,IAAA,EAAA,EAAA,KAAK,EAAI,CAAA;AAChE;;;;"}
|
|
@@ -0,0 +1,7 @@
|
|
|
1
|
+
import type { Meta, StoryObj } from '@storybook/react';
|
|
2
|
+
import { Skeleton } from './Skeleton';
|
|
3
|
+
declare const meta: Meta<typeof Skeleton>;
|
|
4
|
+
export default meta;
|
|
5
|
+
type Story = StoryObj<typeof Skeleton>;
|
|
6
|
+
export declare const Default: Story;
|
|
7
|
+
//# sourceMappingURL=Skeleton.stories.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"Skeleton.stories.d.ts","sourceRoot":"","sources":["../../../src/components/skeleton/Skeleton.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,IAAI,EAAE,QAAQ,EAAE,MAAM,kBAAkB,CAAA;AAEtD,OAAO,EAAE,QAAQ,EAAE,MAAM,YAAY,CAAA;AAErC,QAAA,MAAM,IAAI,EAAE,IAAI,CAAC,OAAO,QAAQ,CAG/B,CAAA;AAED,eAAe,IAAI,CAAA;AAEnB,KAAK,KAAK,GAAG,QAAQ,CAAC,OAAO,QAAQ,CAAC,CAAA;AAEtC,eAAO,MAAM,OAAO,EAAE,KAKrB,CAAA"}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/skeleton/index.ts"],"names":[],"mappings":"AAAA,cAAc,YAAY,CAAA"}
|