@@ -227,4 +264,3 @@ const Slider = ({
}
export default Slider
-
diff --git a/packages/stems/src/Scrubber/hooks.ts b/packages/stems/src/Scrubber/hooks.ts
index 9555955b48..d5d389b230 100644
--- a/packages/stems/src/Scrubber/hooks.ts
+++ b/packages/stems/src/Scrubber/hooks.ts
@@ -30,7 +30,12 @@ export const useAnimations = (
/** Animates from the current position to the end over the remaining seconds. */
const play = useCallback(() => {
const timeRemaining = totalSeconds - elapsedSeconds
- animate(trackRef, handleRef, `transform ${timeRemaining}s linear`, 'translate(100%)')
+ animate(
+ trackRef,
+ handleRef,
+ `transform ${timeRemaining}s linear`,
+ 'translate(100%)'
+ )
}, [trackRef, handleRef, elapsedSeconds, totalSeconds])
/**
@@ -41,7 +46,9 @@ export const useAnimations = (
*/
const pause = useCallback(() => {
const trackWidth = trackRef.current.offsetWidth
- const trackTransform = window.getComputedStyle(trackRef.current).getPropertyValue('transform')
+ const trackTransform = window
+ .getComputedStyle(trackRef.current)
+ .getPropertyValue('transform')
const trackPosition = parseFloat(trackTransform.split(',')[4])
const percentComplete = trackPosition / trackWidth
@@ -49,9 +56,17 @@ export const useAnimations = (
}, [trackRef, handleRef])
/** Sets the animation to a given percentage: [0, 1]. */
- const setPercent = useCallback((percentComplete: number) => {
- animate(trackRef, handleRef, 'none', `translate(${percentComplete * 100}%)`)
- }, [trackRef, handleRef])
+ const setPercent = useCallback(
+ (percentComplete: number) => {
+ animate(
+ trackRef,
+ handleRef,
+ 'none',
+ `translate(${percentComplete * 100}%)`
+ )
+ },
+ [trackRef, handleRef]
+ )
/**
* Handle window focus events so that the scrubber can repair itself
@@ -61,7 +76,9 @@ export const useAnimations = (
timeData.current = { elapsedSeconds, totalSeconds }
useEffect(() => {
const onWindowFocus = () => {
- setPercent(timeData.current.elapsedSeconds / timeData.current.totalSeconds)
+ setPercent(
+ timeData.current.elapsedSeconds / timeData.current.totalSeconds
+ )
}
window.addEventListener('focus', onWindowFocus)
return () => window.removeEventListener('focus', onWindowFocus)
diff --git a/packages/stems/src/Scrubber/types.ts b/packages/stems/src/Scrubber/types.ts
index fd0e628190..8e9926a1ee 100644
--- a/packages/stems/src/Scrubber/types.ts
+++ b/packages/stems/src/Scrubber/types.ts
@@ -54,7 +54,7 @@ type ScrubberProps = {
/**
* Individually exposed styling options.
*/
- style?: {
+ style?: {
railListenedColor?: string
railUnlistenedColor?: string
showHandle?: boolean
diff --git a/packages/stems/src/assets/icons/audiusLogoGlyph.svg b/packages/stems/src/assets/icons/audiusLogoGlyph.svg
new file mode 100644
index 0000000000..965fe6eb77
--- /dev/null
+++ b/packages/stems/src/assets/icons/audiusLogoGlyph.svg
@@ -0,0 +1,11 @@
+
+
\ No newline at end of file
diff --git a/packages/stems/src/assets/icons/audiusLogoHorizontal.svg b/packages/stems/src/assets/icons/audiusLogoHorizontal.svg
new file mode 100755
index 0000000000..91f30b83e5
--- /dev/null
+++ b/packages/stems/src/assets/icons/audiusLogoHorizontal.svg
@@ -0,0 +1,11 @@
+
+
\ No newline at end of file
diff --git a/packages/stems/src/assets/icons/badgeArtist.svg b/packages/stems/src/assets/icons/badgeArtist.svg
new file mode 100755
index 0000000000..a3494b4027
--- /dev/null
+++ b/packages/stems/src/assets/icons/badgeArtist.svg
@@ -0,0 +1,11 @@
+
+
\ No newline at end of file
diff --git a/packages/stems/src/assets/icons/badgeUser.svg b/packages/stems/src/assets/icons/badgeUser.svg
new file mode 100644
index 0000000000..86a6ec4f98
--- /dev/null
+++ b/packages/stems/src/assets/icons/badgeUser.svg
@@ -0,0 +1,10 @@
+
+
\ No newline at end of file
diff --git a/packages/stems/src/assets/icons/bgWaveLarge.svg b/packages/stems/src/assets/icons/bgWaveLarge.svg
new file mode 100644
index 0000000000..bd80733164
--- /dev/null
+++ b/packages/stems/src/assets/icons/bgWaveLarge.svg
@@ -0,0 +1,3 @@
+
diff --git a/packages/stems/src/assets/icons/bgWaveSmall.svg b/packages/stems/src/assets/icons/bgWaveSmall.svg
new file mode 100644
index 0000000000..266fc3eae1
--- /dev/null
+++ b/packages/stems/src/assets/icons/bgWaveSmall.svg
@@ -0,0 +1,3 @@
+
diff --git a/packages/stems/src/assets/icons/iconAirplay.svg b/packages/stems/src/assets/icons/iconAirplay.svg
new file mode 100644
index 0000000000..6f0d166efd
--- /dev/null
+++ b/packages/stems/src/assets/icons/iconAirplay.svg
@@ -0,0 +1,11 @@
+
+
\ No newline at end of file
diff --git a/packages/stems/src/assets/icons/iconAlbum.svg b/packages/stems/src/assets/icons/iconAlbum.svg
new file mode 100755
index 0000000000..81abe0e40e
--- /dev/null
+++ b/packages/stems/src/assets/icons/iconAlbum.svg
@@ -0,0 +1,12 @@
+
+
\ No newline at end of file
diff --git a/packages/stems/src/assets/icons/iconAllTime.svg b/packages/stems/src/assets/icons/iconAllTime.svg
new file mode 100644
index 0000000000..97b3107c61
--- /dev/null
+++ b/packages/stems/src/assets/icons/iconAllTime.svg
@@ -0,0 +1,10 @@
+
+
\ No newline at end of file
diff --git a/packages/stems/src/assets/icons/iconAnnouncement.svg b/packages/stems/src/assets/icons/iconAnnouncement.svg
new file mode 100755
index 0000000000..b9498f0b42
--- /dev/null
+++ b/packages/stems/src/assets/icons/iconAnnouncement.svg
@@ -0,0 +1,12 @@
+
+
\ No newline at end of file
diff --git a/packages/stems/src/assets/icons/iconAnnouncementUnread.svg b/packages/stems/src/assets/icons/iconAnnouncementUnread.svg
new file mode 100755
index 0000000000..9bceb60af7
--- /dev/null
+++ b/packages/stems/src/assets/icons/iconAnnouncementUnread.svg
@@ -0,0 +1,12 @@
+
+
\ No newline at end of file
diff --git a/packages/stems/src/assets/icons/iconArrow.svg b/packages/stems/src/assets/icons/iconArrow.svg
new file mode 100755
index 0000000000..38dbff3891
--- /dev/null
+++ b/packages/stems/src/assets/icons/iconArrow.svg
@@ -0,0 +1,12 @@
+
+
\ No newline at end of file
diff --git a/packages/stems/src/assets/icons/iconArrowGrey.svg b/packages/stems/src/assets/icons/iconArrowGrey.svg
new file mode 100644
index 0000000000..5fc5e448f6
--- /dev/null
+++ b/packages/stems/src/assets/icons/iconArrowGrey.svg
@@ -0,0 +1,11 @@
+
+
\ No newline at end of file
diff --git a/packages/stems/src/assets/icons/iconArrowWhite.svg b/packages/stems/src/assets/icons/iconArrowWhite.svg
new file mode 100644
index 0000000000..f16a030a67
--- /dev/null
+++ b/packages/stems/src/assets/icons/iconArrowWhite.svg
@@ -0,0 +1,15 @@
+
+
\ No newline at end of file
diff --git a/packages/stems/src/assets/icons/iconBigSearch.svg b/packages/stems/src/assets/icons/iconBigSearch.svg
new file mode 100755
index 0000000000..972c0493b7
--- /dev/null
+++ b/packages/stems/src/assets/icons/iconBigSearch.svg
@@ -0,0 +1,13 @@
+
+
\ No newline at end of file
diff --git a/packages/stems/src/assets/icons/iconCalendar.svg b/packages/stems/src/assets/icons/iconCalendar.svg
new file mode 100755
index 0000000000..eb7c7e5857
--- /dev/null
+++ b/packages/stems/src/assets/icons/iconCalendar.svg
@@ -0,0 +1,12 @@
+
+
\ No newline at end of file
diff --git a/packages/stems/src/assets/icons/iconCamera.svg b/packages/stems/src/assets/icons/iconCamera.svg
new file mode 100644
index 0000000000..e44157f997
--- /dev/null
+++ b/packages/stems/src/assets/icons/iconCamera.svg
@@ -0,0 +1,11 @@
+
+
\ No newline at end of file
diff --git a/packages/stems/src/assets/icons/iconCareers.svg b/packages/stems/src/assets/icons/iconCareers.svg
new file mode 100644
index 0000000000..9ecc2a4446
--- /dev/null
+++ b/packages/stems/src/assets/icons/iconCareers.svg
@@ -0,0 +1,11 @@
+
+
\ No newline at end of file
diff --git a/packages/stems/src/assets/icons/iconCaretDown.svg b/packages/stems/src/assets/icons/iconCaretDown.svg
new file mode 100755
index 0000000000..756dbc9151
--- /dev/null
+++ b/packages/stems/src/assets/icons/iconCaretDown.svg
@@ -0,0 +1,12 @@
+
+
\ No newline at end of file
diff --git a/packages/stems/src/assets/icons/iconCaretRight.svg b/packages/stems/src/assets/icons/iconCaretRight.svg
new file mode 100755
index 0000000000..f368fe63ac
--- /dev/null
+++ b/packages/stems/src/assets/icons/iconCaretRight.svg
@@ -0,0 +1,12 @@
+
+
\ No newline at end of file
diff --git a/packages/stems/src/assets/icons/iconCheck.svg b/packages/stems/src/assets/icons/iconCheck.svg
new file mode 100755
index 0000000000..e7e70cf12b
--- /dev/null
+++ b/packages/stems/src/assets/icons/iconCheck.svg
@@ -0,0 +1,12 @@
+
+
\ No newline at end of file
diff --git a/packages/stems/src/assets/icons/iconChromecast.svg b/packages/stems/src/assets/icons/iconChromecast.svg
new file mode 100644
index 0000000000..b5b76e2e3f
--- /dev/null
+++ b/packages/stems/src/assets/icons/iconChromecast.svg
@@ -0,0 +1,10 @@
+
+
\ No newline at end of file
diff --git a/packages/stems/src/assets/icons/iconCoSign.svg b/packages/stems/src/assets/icons/iconCoSign.svg
new file mode 100644
index 0000000000..772ae1f5d5
--- /dev/null
+++ b/packages/stems/src/assets/icons/iconCoSign.svg
@@ -0,0 +1,9 @@
+
+
\ No newline at end of file
diff --git a/packages/stems/src/assets/icons/iconContact.svg b/packages/stems/src/assets/icons/iconContact.svg
new file mode 100644
index 0000000000..d9ad6186da
--- /dev/null
+++ b/packages/stems/src/assets/icons/iconContact.svg
@@ -0,0 +1,10 @@
+
+
\ No newline at end of file
diff --git a/packages/stems/src/assets/icons/iconCreateAccount.svg b/packages/stems/src/assets/icons/iconCreateAccount.svg
new file mode 100644
index 0000000000..2477af3e6f
--- /dev/null
+++ b/packages/stems/src/assets/icons/iconCreateAccount.svg
@@ -0,0 +1,10 @@
+
+
\ No newline at end of file
diff --git a/packages/stems/src/assets/icons/iconCreatePlaylist.svg b/packages/stems/src/assets/icons/iconCreatePlaylist.svg
new file mode 100755
index 0000000000..a5f405b512
--- /dev/null
+++ b/packages/stems/src/assets/icons/iconCreatePlaylist.svg
@@ -0,0 +1,12 @@
+
+
\ No newline at end of file
diff --git a/packages/stems/src/assets/icons/iconDashboard.svg b/packages/stems/src/assets/icons/iconDashboard.svg
new file mode 100755
index 0000000000..77af1ae926
--- /dev/null
+++ b/packages/stems/src/assets/icons/iconDashboard.svg
@@ -0,0 +1,12 @@
+
+
\ No newline at end of file
diff --git a/packages/stems/src/assets/icons/iconDay.svg b/packages/stems/src/assets/icons/iconDay.svg
new file mode 100644
index 0000000000..27473c0bf9
--- /dev/null
+++ b/packages/stems/src/assets/icons/iconDay.svg
@@ -0,0 +1,10 @@
+
+
\ No newline at end of file
diff --git a/packages/stems/src/assets/icons/iconDiscord.svg b/packages/stems/src/assets/icons/iconDiscord.svg
new file mode 100644
index 0000000000..7a9e8ac983
--- /dev/null
+++ b/packages/stems/src/assets/icons/iconDiscord.svg
@@ -0,0 +1,10 @@
+
+
\ No newline at end of file
diff --git a/packages/stems/src/assets/icons/iconDownload.svg b/packages/stems/src/assets/icons/iconDownload.svg
new file mode 100644
index 0000000000..96c9871f7f
--- /dev/null
+++ b/packages/stems/src/assets/icons/iconDownload.svg
@@ -0,0 +1,10 @@
+
+
\ No newline at end of file
diff --git a/packages/stems/src/assets/icons/iconDrag.svg b/packages/stems/src/assets/icons/iconDrag.svg
new file mode 100755
index 0000000000..7367e568c4
--- /dev/null
+++ b/packages/stems/src/assets/icons/iconDrag.svg
@@ -0,0 +1,12 @@
+
+
\ No newline at end of file
diff --git a/packages/stems/src/assets/icons/iconExplore.svg b/packages/stems/src/assets/icons/iconExplore.svg
new file mode 100755
index 0000000000..9b1cb423a0
--- /dev/null
+++ b/packages/stems/src/assets/icons/iconExplore.svg
@@ -0,0 +1,11 @@
+
+
\ No newline at end of file
diff --git a/packages/stems/src/assets/icons/iconExploreDJ.svg b/packages/stems/src/assets/icons/iconExploreDJ.svg
new file mode 100755
index 0000000000..df3ed74656
--- /dev/null
+++ b/packages/stems/src/assets/icons/iconExploreDJ.svg
@@ -0,0 +1,9 @@
+
+
\ No newline at end of file
diff --git a/packages/stems/src/assets/icons/iconExploreFeelingLucky.svg b/packages/stems/src/assets/icons/iconExploreFeelingLucky.svg
new file mode 100755
index 0000000000..ddc4d1902f
--- /dev/null
+++ b/packages/stems/src/assets/icons/iconExploreFeelingLucky.svg
@@ -0,0 +1,11 @@
+
+
\ No newline at end of file
diff --git a/packages/stems/src/assets/icons/iconExploreMobileForYou.svg b/packages/stems/src/assets/icons/iconExploreMobileForYou.svg
new file mode 100644
index 0000000000..4e2582a85c
--- /dev/null
+++ b/packages/stems/src/assets/icons/iconExploreMobileForYou.svg
@@ -0,0 +1,10 @@
+
+
\ No newline at end of file
diff --git a/packages/stems/src/assets/icons/iconExploreMobileMoods.svg b/packages/stems/src/assets/icons/iconExploreMobileMoods.svg
new file mode 100644
index 0000000000..cdf6ac0b4c
--- /dev/null
+++ b/packages/stems/src/assets/icons/iconExploreMobileMoods.svg
@@ -0,0 +1,10 @@
+
+
\ No newline at end of file
diff --git a/packages/stems/src/assets/icons/iconExploreMostLoved.svg b/packages/stems/src/assets/icons/iconExploreMostLoved.svg
new file mode 100755
index 0000000000..bb4d06d0f7
--- /dev/null
+++ b/packages/stems/src/assets/icons/iconExploreMostLoved.svg
@@ -0,0 +1,9 @@
+
+
\ No newline at end of file
diff --git a/packages/stems/src/assets/icons/iconExploreNewReleases.svg b/packages/stems/src/assets/icons/iconExploreNewReleases.svg
new file mode 100755
index 0000000000..59a9b04b1b
--- /dev/null
+++ b/packages/stems/src/assets/icons/iconExploreNewReleases.svg
@@ -0,0 +1,9 @@
+
+
\ No newline at end of file
diff --git a/packages/stems/src/assets/icons/iconExploreRotation.svg b/packages/stems/src/assets/icons/iconExploreRotation.svg
new file mode 100755
index 0000000000..68c9bda14b
--- /dev/null
+++ b/packages/stems/src/assets/icons/iconExploreRotation.svg
@@ -0,0 +1,9 @@
+
+
\ No newline at end of file
diff --git a/packages/stems/src/assets/icons/iconExploreTopAlbums.svg b/packages/stems/src/assets/icons/iconExploreTopAlbums.svg
new file mode 100755
index 0000000000..dab7316eab
--- /dev/null
+++ b/packages/stems/src/assets/icons/iconExploreTopAlbums.svg
@@ -0,0 +1,9 @@
+
+
\ No newline at end of file
diff --git a/packages/stems/src/assets/icons/iconExploreTopPlaylists.svg b/packages/stems/src/assets/icons/iconExploreTopPlaylists.svg
new file mode 100755
index 0000000000..6db57741b4
--- /dev/null
+++ b/packages/stems/src/assets/icons/iconExploreTopPlaylists.svg
@@ -0,0 +1,9 @@
+
+
\ No newline at end of file
diff --git a/packages/stems/src/assets/icons/iconExploreUnderRadar.svg b/packages/stems/src/assets/icons/iconExploreUnderRadar.svg
new file mode 100755
index 0000000000..0e82e1ec92
--- /dev/null
+++ b/packages/stems/src/assets/icons/iconExploreUnderRadar.svg
@@ -0,0 +1,9 @@
+
+
\ No newline at end of file
diff --git a/packages/stems/src/assets/icons/iconFacebook.svg b/packages/stems/src/assets/icons/iconFacebook.svg
new file mode 100755
index 0000000000..7ab7be9612
--- /dev/null
+++ b/packages/stems/src/assets/icons/iconFacebook.svg
@@ -0,0 +1,11 @@
+
+
\ No newline at end of file
diff --git a/packages/stems/src/assets/icons/iconFeed.svg b/packages/stems/src/assets/icons/iconFeed.svg
new file mode 100755
index 0000000000..1cc5c149ab
--- /dev/null
+++ b/packages/stems/src/assets/icons/iconFeed.svg
@@ -0,0 +1,12 @@
+
+
\ No newline at end of file
diff --git a/packages/stems/src/assets/icons/iconFileAcc.svg b/packages/stems/src/assets/icons/iconFileAcc.svg
new file mode 100755
index 0000000000..6d1ced2039
--- /dev/null
+++ b/packages/stems/src/assets/icons/iconFileAcc.svg
@@ -0,0 +1,16 @@
+
+
\ No newline at end of file
diff --git a/packages/stems/src/assets/icons/iconFileAiff.svg b/packages/stems/src/assets/icons/iconFileAiff.svg
new file mode 100755
index 0000000000..735a11cf05
--- /dev/null
+++ b/packages/stems/src/assets/icons/iconFileAiff.svg
@@ -0,0 +1,16 @@
+
+
\ No newline at end of file
diff --git a/packages/stems/src/assets/icons/iconFileAlac.svg b/packages/stems/src/assets/icons/iconFileAlac.svg
new file mode 100755
index 0000000000..54f0fbee65
--- /dev/null
+++ b/packages/stems/src/assets/icons/iconFileAlac.svg
@@ -0,0 +1,16 @@
+
+
\ No newline at end of file
diff --git a/packages/stems/src/assets/icons/iconFileApe.svg b/packages/stems/src/assets/icons/iconFileApe.svg
new file mode 100755
index 0000000000..d26c1f0770
--- /dev/null
+++ b/packages/stems/src/assets/icons/iconFileApe.svg
@@ -0,0 +1,16 @@
+
+
\ No newline at end of file
diff --git a/packages/stems/src/assets/icons/iconFileFlac.svg b/packages/stems/src/assets/icons/iconFileFlac.svg
new file mode 100755
index 0000000000..f5a1cc4d18
--- /dev/null
+++ b/packages/stems/src/assets/icons/iconFileFlac.svg
@@ -0,0 +1,16 @@
+
+
\ No newline at end of file
diff --git a/packages/stems/src/assets/icons/iconFileMp3.svg b/packages/stems/src/assets/icons/iconFileMp3.svg
new file mode 100755
index 0000000000..11fcf20d28
--- /dev/null
+++ b/packages/stems/src/assets/icons/iconFileMp3.svg
@@ -0,0 +1,16 @@
+
+
\ No newline at end of file
diff --git a/packages/stems/src/assets/icons/iconFileOgg.svg b/packages/stems/src/assets/icons/iconFileOgg.svg
new file mode 100755
index 0000000000..be9fc2f62a
--- /dev/null
+++ b/packages/stems/src/assets/icons/iconFileOgg.svg
@@ -0,0 +1,16 @@
+
+
\ No newline at end of file
diff --git a/packages/stems/src/assets/icons/iconFileUnknown.svg b/packages/stems/src/assets/icons/iconFileUnknown.svg
new file mode 100755
index 0000000000..e5193ad780
--- /dev/null
+++ b/packages/stems/src/assets/icons/iconFileUnknown.svg
@@ -0,0 +1,16 @@
+
+
\ No newline at end of file
diff --git a/packages/stems/src/assets/icons/iconFileWav.svg b/packages/stems/src/assets/icons/iconFileWav.svg
new file mode 100755
index 0000000000..ef79c780a1
--- /dev/null
+++ b/packages/stems/src/assets/icons/iconFileWav.svg
@@ -0,0 +1,16 @@
+
+
\ No newline at end of file
diff --git a/packages/stems/src/assets/icons/iconFileWma.svg b/packages/stems/src/assets/icons/iconFileWma.svg
new file mode 100755
index 0000000000..0bcba2e82e
--- /dev/null
+++ b/packages/stems/src/assets/icons/iconFileWma.svg
@@ -0,0 +1,16 @@
+
+
\ No newline at end of file
diff --git a/packages/stems/src/assets/icons/iconFilter.svg b/packages/stems/src/assets/icons/iconFilter.svg
new file mode 100755
index 0000000000..a3d6d39fff
--- /dev/null
+++ b/packages/stems/src/assets/icons/iconFilter.svg
@@ -0,0 +1,12 @@
+
+
\ No newline at end of file
diff --git a/packages/stems/src/assets/icons/iconFollow.svg b/packages/stems/src/assets/icons/iconFollow.svg
new file mode 100755
index 0000000000..ec393155a7
--- /dev/null
+++ b/packages/stems/src/assets/icons/iconFollow.svg
@@ -0,0 +1,11 @@
+
+
\ No newline at end of file
diff --git a/packages/stems/src/assets/icons/iconFollowing.svg b/packages/stems/src/assets/icons/iconFollowing.svg
new file mode 100755
index 0000000000..000c378f42
--- /dev/null
+++ b/packages/stems/src/assets/icons/iconFollowing.svg
@@ -0,0 +1,12 @@
+
+
\ No newline at end of file
diff --git a/packages/stems/src/assets/icons/iconHeart.svg b/packages/stems/src/assets/icons/iconHeart.svg
new file mode 100755
index 0000000000..181a6863ab
--- /dev/null
+++ b/packages/stems/src/assets/icons/iconHeart.svg
@@ -0,0 +1,12 @@
+
+
\ No newline at end of file
diff --git a/packages/stems/src/assets/icons/iconHidden.svg b/packages/stems/src/assets/icons/iconHidden.svg
new file mode 100644
index 0000000000..482ed2f21d
--- /dev/null
+++ b/packages/stems/src/assets/icons/iconHidden.svg
@@ -0,0 +1,10 @@
+
+
\ No newline at end of file
diff --git a/packages/stems/src/assets/icons/iconImage.svg b/packages/stems/src/assets/icons/iconImage.svg
new file mode 100755
index 0000000000..8544237d2f
--- /dev/null
+++ b/packages/stems/src/assets/icons/iconImage.svg
@@ -0,0 +1,12 @@
+
+
\ No newline at end of file
diff --git a/packages/stems/src/assets/icons/iconIndent.svg b/packages/stems/src/assets/icons/iconIndent.svg
new file mode 100755
index 0000000000..190c2398dd
--- /dev/null
+++ b/packages/stems/src/assets/icons/iconIndent.svg
@@ -0,0 +1,12 @@
+
+
\ No newline at end of file
diff --git a/packages/stems/src/assets/icons/iconInfo.svg b/packages/stems/src/assets/icons/iconInfo.svg
new file mode 100755
index 0000000000..87b88c187b
--- /dev/null
+++ b/packages/stems/src/assets/icons/iconInfo.svg
@@ -0,0 +1,11 @@
+
+
\ No newline at end of file
diff --git a/packages/stems/src/assets/icons/iconInstagram.svg b/packages/stems/src/assets/icons/iconInstagram.svg
new file mode 100755
index 0000000000..5cd3101124
--- /dev/null
+++ b/packages/stems/src/assets/icons/iconInstagram.svg
@@ -0,0 +1,11 @@
+
+
\ No newline at end of file
diff --git a/packages/stems/src/assets/icons/iconKebabHorizontal.svg b/packages/stems/src/assets/icons/iconKebabHorizontal.svg
new file mode 100755
index 0000000000..8e37f47f54
--- /dev/null
+++ b/packages/stems/src/assets/icons/iconKebabHorizontal.svg
@@ -0,0 +1,12 @@
+
+
\ No newline at end of file
diff --git a/packages/stems/src/assets/icons/iconKebabVertical.svg b/packages/stems/src/assets/icons/iconKebabVertical.svg
new file mode 100755
index 0000000000..64c11b5098
--- /dev/null
+++ b/packages/stems/src/assets/icons/iconKebabVertical.svg
@@ -0,0 +1,12 @@
+
+
\ No newline at end of file
diff --git a/packages/stems/src/assets/icons/iconListens.svg b/packages/stems/src/assets/icons/iconListens.svg
new file mode 100755
index 0000000000..c0d1afc9d3
--- /dev/null
+++ b/packages/stems/src/assets/icons/iconListens.svg
@@ -0,0 +1,12 @@
+
+
\ No newline at end of file
diff --git a/packages/stems/src/assets/icons/iconMail.svg b/packages/stems/src/assets/icons/iconMail.svg
new file mode 100755
index 0000000000..bd7713a13d
--- /dev/null
+++ b/packages/stems/src/assets/icons/iconMail.svg
@@ -0,0 +1,18 @@
+
+
\ No newline at end of file
diff --git a/packages/stems/src/assets/icons/iconMonth.svg b/packages/stems/src/assets/icons/iconMonth.svg
new file mode 100644
index 0000000000..ce8ecbafef
--- /dev/null
+++ b/packages/stems/src/assets/icons/iconMonth.svg
@@ -0,0 +1,10 @@
+
+
\ No newline at end of file
diff --git a/packages/stems/src/assets/icons/iconMore.svg b/packages/stems/src/assets/icons/iconMore.svg
new file mode 100644
index 0000000000..c89aac8ec5
--- /dev/null
+++ b/packages/stems/src/assets/icons/iconMore.svg
@@ -0,0 +1,13 @@
+
+
\ No newline at end of file
diff --git a/packages/stems/src/assets/icons/iconMultiselectAdd.svg b/packages/stems/src/assets/icons/iconMultiselectAdd.svg
new file mode 100755
index 0000000000..10efd60fae
--- /dev/null
+++ b/packages/stems/src/assets/icons/iconMultiselectAdd.svg
@@ -0,0 +1,17 @@
+
+
\ No newline at end of file
diff --git a/packages/stems/src/assets/icons/iconMultiselectRemove.svg b/packages/stems/src/assets/icons/iconMultiselectRemove.svg
new file mode 100755
index 0000000000..59910121fc
--- /dev/null
+++ b/packages/stems/src/assets/icons/iconMultiselectRemove.svg
@@ -0,0 +1,17 @@
+
+
\ No newline at end of file
diff --git a/packages/stems/src/assets/icons/iconNote.svg b/packages/stems/src/assets/icons/iconNote.svg
new file mode 100755
index 0000000000..028096883d
--- /dev/null
+++ b/packages/stems/src/assets/icons/iconNote.svg
@@ -0,0 +1,12 @@
+
+
\ No newline at end of file
diff --git a/packages/stems/src/assets/icons/iconNotification.svg b/packages/stems/src/assets/icons/iconNotification.svg
new file mode 100644
index 0000000000..45a17c4154
--- /dev/null
+++ b/packages/stems/src/assets/icons/iconNotification.svg
@@ -0,0 +1,10 @@
+
+
\ No newline at end of file
diff --git a/packages/stems/src/assets/icons/iconNotificationOff.svg b/packages/stems/src/assets/icons/iconNotificationOff.svg
new file mode 100755
index 0000000000..ae7e64340d
--- /dev/null
+++ b/packages/stems/src/assets/icons/iconNotificationOff.svg
@@ -0,0 +1,11 @@
+
+
\ No newline at end of file
diff --git a/packages/stems/src/assets/icons/iconOffline.svg b/packages/stems/src/assets/icons/iconOffline.svg
new file mode 100644
index 0000000000..8ac67abe0a
--- /dev/null
+++ b/packages/stems/src/assets/icons/iconOffline.svg
@@ -0,0 +1,16 @@
+
+
\ No newline at end of file
diff --git a/packages/stems/src/assets/icons/iconPause.svg b/packages/stems/src/assets/icons/iconPause.svg
new file mode 100755
index 0000000000..41badbe9b8
--- /dev/null
+++ b/packages/stems/src/assets/icons/iconPause.svg
@@ -0,0 +1,11 @@
+
+
\ No newline at end of file
diff --git a/packages/stems/src/assets/icons/iconPencil.svg b/packages/stems/src/assets/icons/iconPencil.svg
new file mode 100755
index 0000000000..1d4b8536b5
--- /dev/null
+++ b/packages/stems/src/assets/icons/iconPencil.svg
@@ -0,0 +1,12 @@
+
+
\ No newline at end of file
diff --git a/packages/stems/src/assets/icons/iconPlay.svg b/packages/stems/src/assets/icons/iconPlay.svg
new file mode 100755
index 0000000000..1493127d0a
--- /dev/null
+++ b/packages/stems/src/assets/icons/iconPlay.svg
@@ -0,0 +1,12 @@
+
+
\ No newline at end of file
diff --git a/packages/stems/src/assets/icons/iconPlaylists.svg b/packages/stems/src/assets/icons/iconPlaylists.svg
new file mode 100755
index 0000000000..e2c7612873
--- /dev/null
+++ b/packages/stems/src/assets/icons/iconPlaylists.svg
@@ -0,0 +1,12 @@
+
+
\ No newline at end of file
diff --git a/packages/stems/src/assets/icons/iconProfPicUpload.svg b/packages/stems/src/assets/icons/iconProfPicUpload.svg
new file mode 100644
index 0000000000..f4262343db
--- /dev/null
+++ b/packages/stems/src/assets/icons/iconProfPicUpload.svg
@@ -0,0 +1,79 @@
+
+
+
diff --git a/packages/stems/src/assets/icons/iconRefresh.svg b/packages/stems/src/assets/icons/iconRefresh.svg
new file mode 100755
index 0000000000..fa38608a7e
--- /dev/null
+++ b/packages/stems/src/assets/icons/iconRefresh.svg
@@ -0,0 +1,12 @@
+
+
\ No newline at end of file
diff --git a/packages/stems/src/assets/icons/iconRemix.svg b/packages/stems/src/assets/icons/iconRemix.svg
new file mode 100644
index 0000000000..dc1b42a60b
--- /dev/null
+++ b/packages/stems/src/assets/icons/iconRemix.svg
@@ -0,0 +1,12 @@
+
+
\ No newline at end of file
diff --git a/packages/stems/src/assets/icons/iconRemove.svg b/packages/stems/src/assets/icons/iconRemove.svg
new file mode 100755
index 0000000000..ac87fe9dba
--- /dev/null
+++ b/packages/stems/src/assets/icons/iconRemove.svg
@@ -0,0 +1,12 @@
+
+
\ No newline at end of file
diff --git a/packages/stems/src/assets/icons/iconRepost.svg b/packages/stems/src/assets/icons/iconRepost.svg
new file mode 100755
index 0000000000..4dcee6b3b6
--- /dev/null
+++ b/packages/stems/src/assets/icons/iconRepost.svg
@@ -0,0 +1,12 @@
+
+
\ No newline at end of file
diff --git a/packages/stems/src/assets/icons/iconRising.svg b/packages/stems/src/assets/icons/iconRising.svg
new file mode 100644
index 0000000000..c97c92a1c9
--- /dev/null
+++ b/packages/stems/src/assets/icons/iconRising.svg
@@ -0,0 +1,17 @@
+
+
\ No newline at end of file
diff --git a/packages/stems/src/assets/icons/iconRocket.svg b/packages/stems/src/assets/icons/iconRocket.svg
new file mode 100755
index 0000000000..8f469e662c
--- /dev/null
+++ b/packages/stems/src/assets/icons/iconRocket.svg
@@ -0,0 +1,12 @@
+
+
\ No newline at end of file
diff --git a/packages/stems/src/assets/icons/iconSave.svg b/packages/stems/src/assets/icons/iconSave.svg
new file mode 100755
index 0000000000..256acedf2c
--- /dev/null
+++ b/packages/stems/src/assets/icons/iconSave.svg
@@ -0,0 +1,12 @@
+
+
\ No newline at end of file
diff --git a/packages/stems/src/assets/icons/iconSearch.svg b/packages/stems/src/assets/icons/iconSearch.svg
new file mode 100755
index 0000000000..5c12fcd9b6
--- /dev/null
+++ b/packages/stems/src/assets/icons/iconSearch.svg
@@ -0,0 +1,12 @@
+
+
\ No newline at end of file
diff --git a/packages/stems/src/assets/icons/iconSettings.svg b/packages/stems/src/assets/icons/iconSettings.svg
new file mode 100755
index 0000000000..ebea9c8427
--- /dev/null
+++ b/packages/stems/src/assets/icons/iconSettings.svg
@@ -0,0 +1,12 @@
+
+
\ No newline at end of file
diff --git a/packages/stems/src/assets/icons/iconShare.svg b/packages/stems/src/assets/icons/iconShare.svg
new file mode 100644
index 0000000000..e58bfc3a40
--- /dev/null
+++ b/packages/stems/src/assets/icons/iconShare.svg
@@ -0,0 +1,12 @@
+
+
\ No newline at end of file
diff --git a/packages/stems/src/assets/icons/iconSignOut.svg b/packages/stems/src/assets/icons/iconSignOut.svg
new file mode 100644
index 0000000000..09ec4b0dcc
--- /dev/null
+++ b/packages/stems/src/assets/icons/iconSignOut.svg
@@ -0,0 +1,11 @@
+
+
\ No newline at end of file
diff --git a/packages/stems/src/assets/icons/iconSort.svg b/packages/stems/src/assets/icons/iconSort.svg
new file mode 100755
index 0000000000..aef4a088b2
--- /dev/null
+++ b/packages/stems/src/assets/icons/iconSort.svg
@@ -0,0 +1,12 @@
+
+
\ No newline at end of file
diff --git a/packages/stems/src/assets/icons/iconSpeaker.svg b/packages/stems/src/assets/icons/iconSpeaker.svg
new file mode 100755
index 0000000000..4affaec248
--- /dev/null
+++ b/packages/stems/src/assets/icons/iconSpeaker.svg
@@ -0,0 +1,12 @@
+
+
\ No newline at end of file
diff --git a/packages/stems/src/assets/icons/iconStar.svg b/packages/stems/src/assets/icons/iconStar.svg
new file mode 100755
index 0000000000..98d6a1482b
--- /dev/null
+++ b/packages/stems/src/assets/icons/iconStar.svg
@@ -0,0 +1,12 @@
+
+
\ No newline at end of file
diff --git a/packages/stems/src/assets/icons/iconStop.svg b/packages/stems/src/assets/icons/iconStop.svg
new file mode 100644
index 0000000000..2ad25ab37a
--- /dev/null
+++ b/packages/stems/src/assets/icons/iconStop.svg
@@ -0,0 +1,12 @@
+
+
\ No newline at end of file
diff --git a/packages/stems/src/assets/icons/iconTrophy.svg b/packages/stems/src/assets/icons/iconTrophy.svg
new file mode 100755
index 0000000000..6cd09610ac
--- /dev/null
+++ b/packages/stems/src/assets/icons/iconTrophy.svg
@@ -0,0 +1,12 @@
+
+
\ No newline at end of file
diff --git a/packages/stems/src/assets/icons/iconTwitter.svg b/packages/stems/src/assets/icons/iconTwitter.svg
new file mode 100755
index 0000000000..16b4e5c7e0
--- /dev/null
+++ b/packages/stems/src/assets/icons/iconTwitter.svg
@@ -0,0 +1,11 @@
+
+
\ No newline at end of file
diff --git a/packages/stems/src/assets/icons/iconTwitterBird.svg b/packages/stems/src/assets/icons/iconTwitterBird.svg
new file mode 100644
index 0000000000..2bf13689b7
--- /dev/null
+++ b/packages/stems/src/assets/icons/iconTwitterBird.svg
@@ -0,0 +1,21 @@
+
+
\ No newline at end of file
diff --git a/packages/stems/src/assets/icons/iconUnfollow.svg b/packages/stems/src/assets/icons/iconUnfollow.svg
new file mode 100755
index 0000000000..c12bdb2e62
--- /dev/null
+++ b/packages/stems/src/assets/icons/iconUnfollow.svg
@@ -0,0 +1,12 @@
+
+
\ No newline at end of file
diff --git a/packages/stems/src/assets/icons/iconUpload.svg b/packages/stems/src/assets/icons/iconUpload.svg
new file mode 100755
index 0000000000..76af9fbf99
--- /dev/null
+++ b/packages/stems/src/assets/icons/iconUpload.svg
@@ -0,0 +1,12 @@
+
+
\ No newline at end of file
diff --git a/packages/stems/src/assets/icons/iconUser.svg b/packages/stems/src/assets/icons/iconUser.svg
new file mode 100644
index 0000000000..bc1b053ce4
--- /dev/null
+++ b/packages/stems/src/assets/icons/iconUser.svg
@@ -0,0 +1,8 @@
+
+
\ No newline at end of file
diff --git a/packages/stems/src/assets/icons/iconValidationCheck.svg b/packages/stems/src/assets/icons/iconValidationCheck.svg
new file mode 100644
index 0000000000..3137a98de5
--- /dev/null
+++ b/packages/stems/src/assets/icons/iconValidationCheck.svg
@@ -0,0 +1,16 @@
+
+
\ No newline at end of file
diff --git a/packages/stems/src/assets/icons/iconValidationX.svg b/packages/stems/src/assets/icons/iconValidationX.svg
new file mode 100644
index 0000000000..2c1ef8df19
--- /dev/null
+++ b/packages/stems/src/assets/icons/iconValidationX.svg
@@ -0,0 +1,11 @@
+
+
\ No newline at end of file
diff --git a/packages/stems/src/assets/icons/iconVerified.svg b/packages/stems/src/assets/icons/iconVerified.svg
new file mode 100755
index 0000000000..d0b4970c87
--- /dev/null
+++ b/packages/stems/src/assets/icons/iconVerified.svg
@@ -0,0 +1,11 @@
+
+
\ No newline at end of file
diff --git a/packages/stems/src/assets/icons/iconVolume.svg b/packages/stems/src/assets/icons/iconVolume.svg
new file mode 100755
index 0000000000..5c75f15993
--- /dev/null
+++ b/packages/stems/src/assets/icons/iconVolume.svg
@@ -0,0 +1,13 @@
+
+
\ No newline at end of file
diff --git a/packages/stems/src/assets/icons/iconVolume0.svg b/packages/stems/src/assets/icons/iconVolume0.svg
new file mode 100755
index 0000000000..2b80ecb1cc
--- /dev/null
+++ b/packages/stems/src/assets/icons/iconVolume0.svg
@@ -0,0 +1,12 @@
+
+
\ No newline at end of file
diff --git a/packages/stems/src/assets/icons/iconVolume1.svg b/packages/stems/src/assets/icons/iconVolume1.svg
new file mode 100755
index 0000000000..1868e32436
--- /dev/null
+++ b/packages/stems/src/assets/icons/iconVolume1.svg
@@ -0,0 +1,12 @@
+
+
\ No newline at end of file
diff --git a/packages/stems/src/assets/icons/iconVolume2.svg b/packages/stems/src/assets/icons/iconVolume2.svg
new file mode 100755
index 0000000000..8bb488223b
--- /dev/null
+++ b/packages/stems/src/assets/icons/iconVolume2.svg
@@ -0,0 +1,12 @@
+
+
\ No newline at end of file
diff --git a/packages/stems/src/assets/icons/iconVolume3.svg b/packages/stems/src/assets/icons/iconVolume3.svg
new file mode 100755
index 0000000000..18a191be0f
--- /dev/null
+++ b/packages/stems/src/assets/icons/iconVolume3.svg
@@ -0,0 +1,12 @@
+
+
\ No newline at end of file
diff --git a/packages/stems/src/assets/icons/iconWand.svg b/packages/stems/src/assets/icons/iconWand.svg
new file mode 100644
index 0000000000..01b39a806a
--- /dev/null
+++ b/packages/stems/src/assets/icons/iconWand.svg
@@ -0,0 +1,6 @@
+
+
\ No newline at end of file
diff --git a/packages/stems/src/assets/icons/logoMetaMask.svg b/packages/stems/src/assets/icons/logoMetaMask.svg
new file mode 100644
index 0000000000..0f7b63b9f7
--- /dev/null
+++ b/packages/stems/src/assets/icons/logoMetaMask.svg
@@ -0,0 +1,79 @@
+
+
\ No newline at end of file
diff --git a/packages/stems/src/assets/icons/pbIconNext.svg b/packages/stems/src/assets/icons/pbIconNext.svg
new file mode 100755
index 0000000000..2f2492db51
--- /dev/null
+++ b/packages/stems/src/assets/icons/pbIconNext.svg
@@ -0,0 +1,12 @@
+
+
\ No newline at end of file
diff --git a/packages/stems/src/assets/icons/pbIconPause.svg b/packages/stems/src/assets/icons/pbIconPause.svg
new file mode 100755
index 0000000000..de3b93913c
--- /dev/null
+++ b/packages/stems/src/assets/icons/pbIconPause.svg
@@ -0,0 +1,10 @@
+
+
\ No newline at end of file
diff --git a/packages/stems/src/assets/icons/pbIconPlay.svg b/packages/stems/src/assets/icons/pbIconPlay.svg
new file mode 100755
index 0000000000..979f0820f7
--- /dev/null
+++ b/packages/stems/src/assets/icons/pbIconPlay.svg
@@ -0,0 +1,12 @@
+
+
\ No newline at end of file
diff --git a/packages/stems/src/assets/icons/pbIconPrev.svg b/packages/stems/src/assets/icons/pbIconPrev.svg
new file mode 100755
index 0000000000..0a42d0de58
--- /dev/null
+++ b/packages/stems/src/assets/icons/pbIconPrev.svg
@@ -0,0 +1,13 @@
+
+
\ No newline at end of file
diff --git a/packages/stems/src/assets/icons/pbIconPrevious.svg b/packages/stems/src/assets/icons/pbIconPrevious.svg
new file mode 100755
index 0000000000..16d5621382
--- /dev/null
+++ b/packages/stems/src/assets/icons/pbIconPrevious.svg
@@ -0,0 +1,12 @@
+
+
\ No newline at end of file
diff --git a/packages/stems/src/assets/icons/pbIconRepeat.svg b/packages/stems/src/assets/icons/pbIconRepeat.svg
new file mode 100755
index 0000000000..11bb20cf27
--- /dev/null
+++ b/packages/stems/src/assets/icons/pbIconRepeat.svg
@@ -0,0 +1,16 @@
+
+
\ No newline at end of file
diff --git a/packages/stems/src/assets/icons/pbIconRepeatAll.svg b/packages/stems/src/assets/icons/pbIconRepeatAll.svg
new file mode 100755
index 0000000000..e95a0ec38f
--- /dev/null
+++ b/packages/stems/src/assets/icons/pbIconRepeatAll.svg
@@ -0,0 +1,12 @@
+
+
\ No newline at end of file
diff --git a/packages/stems/src/assets/icons/pbIconRepeatOff.svg b/packages/stems/src/assets/icons/pbIconRepeatOff.svg
new file mode 100755
index 0000000000..e33f1e6ad1
--- /dev/null
+++ b/packages/stems/src/assets/icons/pbIconRepeatOff.svg
@@ -0,0 +1,12 @@
+
+
\ No newline at end of file
diff --git a/packages/stems/src/assets/icons/pbIconRepeatSingle.svg b/packages/stems/src/assets/icons/pbIconRepeatSingle.svg
new file mode 100755
index 0000000000..ce4488f763
--- /dev/null
+++ b/packages/stems/src/assets/icons/pbIconRepeatSingle.svg
@@ -0,0 +1,14 @@
+
+
\ No newline at end of file
diff --git a/packages/stems/src/assets/icons/pbIconShuffle.svg b/packages/stems/src/assets/icons/pbIconShuffle.svg
new file mode 100755
index 0000000000..5fcc8bea19
--- /dev/null
+++ b/packages/stems/src/assets/icons/pbIconShuffle.svg
@@ -0,0 +1,15 @@
+
+
\ No newline at end of file
diff --git a/packages/stems/src/assets/icons/pbIconStop.svg b/packages/stems/src/assets/icons/pbIconStop.svg
new file mode 100755
index 0000000000..6ebc3293f5
--- /dev/null
+++ b/packages/stems/src/assets/icons/pbIconStop.svg
@@ -0,0 +1,11 @@
+
+
\ No newline at end of file
diff --git a/packages/stems/src/assets/icons/pbIconVolume.svg b/packages/stems/src/assets/icons/pbIconVolume.svg
new file mode 100755
index 0000000000..5c75f15993
--- /dev/null
+++ b/packages/stems/src/assets/icons/pbIconVolume.svg
@@ -0,0 +1,13 @@
+
+
\ No newline at end of file
diff --git a/packages/stems/src/assets/styles/animations.css b/packages/stems/src/assets/styles/animations.css
new file mode 100644
index 0000000000..235d761bd6
--- /dev/null
+++ b/packages/stems/src/assets/styles/animations.css
@@ -0,0 +1,10 @@
+/**
+ * Audius Animation Options
+ *
+ * In order to provider consistent animations durations and
+ * easings across the app, prefer using predefined values.
+ */
+
+:root {
+ --quick: 0.07s ease-in-out;
+}
\ No newline at end of file
diff --git a/packages/stems/src/assets/styles/colors.css b/packages/stems/src/assets/styles/colors.css
index e444801c32..58447b3a0c 100644
--- a/packages/stems/src/assets/styles/colors.css
+++ b/packages/stems/src/assets/styles/colors.css
@@ -61,3 +61,50 @@
--primary-gradient: linear-gradient(135deg, #EE00ED 0%, #C514E0 100%);
--secondary-gradient: linear-gradient(315deg, #6B0FB3 0%, #7E1BCC 100%);
}
+
+/**
+ * Static color palette. Never overridden by theme.
+ * You should not override these values!
+ */
+ :root {
+ --static-primary: #CC0FE0;
+ --static-primary-dark-1: #B80ECA;
+ --static-primary-dark-2: #A30CB3;
+ --static-primary-light-1: #D127E3;
+ --static-primary-light-2: #D63FE6;
+
+ --static-secondary: #7E1BCC;
+ --static-secondary-transparent: rgba(126, 27, 204, 0.85);
+ --static-secondary-dark-1: #7118B8;
+ --static-secondary-dark-2: #6516A3;
+ --static-secondary-light-1: #8B32D1;
+ --static-secondary-light-2: #9849D6;
+
+ --static-neutral: #858199;
+ --static-neutral-dark-1: #78748A;
+ --static-neutral-dark-2: #6A677A;
+ --static-neutral-dark-3: #4D535A;
+ --static-neutral-light-1: #9D9AAD;
+ --static-neutral-light-2: #AAA7B8;
+ --static-neutral-light-3: #B6B3C2;
+ --static-neutral-light-4: #C2C0CC;
+ --static-neutral-light-5: #CECDD6;
+ --static-neutral-light-6: #DAD9E0;
+ --static-neutral-light-7: #E7E6EB;
+ --static-neutral-light-8: #F2F2F4;
+ --static-neutral-light-9: #F7F7F9;
+ --static-neutral-light-10: #FCFCFC;
+ --static-white: #FFFFFF;
+
+ --static-accent-red: #D0021B;
+ --static-accent-red-dark-1: #AA0115;
+ --static-accent-red-light-1: #D51B32;
+
+ --static-accent-green: #0BA400;
+ --static-accent-green-dark-1: #0A9400;
+ --static-accent-green-light-1: #23AD1A;
+
+ --static-accent-orange: #FF9400;
+ --static-accent-orange-dark-1: #F28100;
+ --static-accent-orange-light-1: #FFA70F;
+}
\ No newline at end of file
diff --git a/packages/stems/src/index.tsx b/packages/stems/src/index.tsx
index 634442c4ef..4bc98e667e 100644
--- a/packages/stems/src/index.tsx
+++ b/packages/stems/src/index.tsx
@@ -1 +1,9 @@
+export * from './Icons'
+
+export {
+ default as Button,
+ ButtonProps,
+ Type as ButtonType,
+ Size as ButtonSize
+} from './Button'
export { default as Scrubber } from './Scrubber'
diff --git a/packages/stems/src/typings.d.ts b/packages/stems/src/typings.d.ts
index 90723ec941..722202b83a 100644
--- a/packages/stems/src/typings.d.ts
+++ b/packages/stems/src/typings.d.ts
@@ -7,7 +7,8 @@ declare module '*.css' {
export default content
}
-interface SvgrComponent extends React.StatelessComponent
> {}
+interface SvgrComponent
+ extends React.StatelessComponent> {}
declare module '*.svg' {
const svgUrl: string
diff --git a/packages/stems/stories/index.stories.tsx b/packages/stems/stories/index.stories.tsx
index cf82c05efb..bb8e1a4315 100644
--- a/packages/stems/stories/index.stories.tsx
+++ b/packages/stems/stories/index.stories.tsx
@@ -7,10 +7,13 @@ import { host } from 'storybook-host'
import '../src/assets/styles/colors.css'
import '../src/assets/styles/fonts.css'
import '../src/assets/styles/sizes.css'
+import '../src/assets/styles/animations.css'
+import Button from '../src/Button'
import Scrubber from '../src/Scrubber'
+import { IconPlay } from '../src/Icons'
storiesOf('Stems', module)
- .addDecorator(withSmartKnobs)
+ .addDecorator(withSmartKnobs())
.addDecorator(withKnobs)
.addDecorator(
host({
@@ -19,10 +22,7 @@ storiesOf('Stems', module)
width: 800
})
)
- .add('Scrubber', () =>
-
- )
+ .add('Button', () => } text='Click Me' />)
+ .add('Scrubber', () => (
+
+ ))