@newhighsco/chipset 6.14.10 → 6.14.12

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@newhighsco/chipset",
   "description": "Shareable, theme-able component library by New High Score",
-  "version": "6.14.10",
+  "version": "6.14.12",
   "author": "New High Score <hello@newhighsco.re>",
   "license": "ISC",
   "config": {
@@ -26,7 +26,7 @@
   },
   "scripts": {
     "prepare": "is-ci || husky install",
-    "start": "start-storybook --docs --no-manager-cache",
+    "start": "start-storybook --port 49928 --docs --no-manager-cache",
     "prebuild": "rm -rf build",
     "build": "build-storybook --output-dir build --docs --quiet",
     "pretest": "yarn lint",
@@ -42,48 +42,48 @@
     "format:css": "yarn lint:css --fix"
   },
   "dependencies": {
-    "@dr.pogodin/react-themes": "1.4.6",
+    "@dr.pogodin/react-themes": "1.4.7",
     "classnames": "2.3.2",
-    "react-device-detect": "2.2.2"
+    "react-device-detect": "2.2.3"
   },
   "devDependencies": {
-    "@babel/core": "7.20.2",
-    "@babel/polyfill": "7.12.1",
+    "@babel/core": "7.20.12",
     "@babel/preset-env": "7.20.2",
     "@babel/preset-react": "7.18.6",
-    "@commitlint/cli": "17.2.0",
+    "@commitlint/cli": "17.4.2",
     "@fullhuman/postcss-purgecss": "5.0.0",
     "@newhighsco/browserslist-config": "1.1.0",
-    "@newhighsco/commitlint-config": "1.1.9",
+    "@newhighsco/commitlint-config": "1.1.13",
     "@newhighsco/editor-config": "1.2.0",
-    "@newhighsco/eslint-config": "3.4.4",
-    "@newhighsco/postcss-config": "3.5.96",
-    "@newhighsco/prettier-config": "2.1.3",
-    "@newhighsco/release-config": "1.3.9",
-    "@newhighsco/storybook-preset": "4.5.49",
-    "@newhighsco/stylelint-config": "3.1.24",
-    "@storybook/builder-webpack5": "6.5.13",
-    "@storybook/manager-webpack5": "6.5.13",
-    "@storybook/react": "6.5.13",
-    "@wojtekmaj/enzyme-adapter-react-17": "0.7.0",
-    "babel-jest": "27.5.1",
-    "babel-loader": "9.1.0",
-    "chromatic": "6.11.4",
-    "enzyme": "3.11.0",
-    "eslint": "8.26.0",
-    "husky": "8.0.1",
-    "is-ci": "3.0.1",
+    "@newhighsco/eslint-config": "4.0.11",
+    "@newhighsco/postcss-config": "3.5.113",
+    "@newhighsco/prettier-config": "2.1.8",
+    "@newhighsco/release-config": "1.3.15",
+    "@newhighsco/storybook-preset": "4.5.62",
+    "@newhighsco/stylelint-config": "3.1.33",
+    "@storybook/builder-webpack5": "6.5.16",
+    "@storybook/manager-webpack5": "6.5.16",
+    "@storybook/react": "6.5.16",
+    "@testing-library/jest-dom": "5.16.5",
+    "@testing-library/react": "13.4.0",
+    "babel-loader": "9.1.2",
+    "chromatic": "6.17.0",
+    "eslint": "8.33.0",
+    "husky": "8.0.3",
     "identity-obj-proxy": "3.0.0",
-    "jest": "27.5.1",
+    "is-ci": "3.0.1",
+    "jest": "29.4.2",
+    "jest-environment-jsdom": "29.4.2",
+    "jest-environment-node-single-context": "29.0.0",
     "npm-run-all": "4.1.5",
-    "postcss": "8.4.18",
-    "prettier": "2.7.1",
+    "postcss": "8.4.21",
+    "prettier": "2.8.4",
     "react": "18.2.0",
     "react-dom": "18.2.0",
-    "sass-true": "6.1.0",
-    "semantic-release": "19.0.5",
-    "stylelint": "14.14.1",
-    "webpack": "5.74.0"
+    "sass-true": "7.0.0",
+    "semantic-release": "20.1.0",
+    "stylelint": "14.16.1",
+    "webpack": "5.75.0"
   },
   "peerDependencies": {
     "react": "18.2.0",

package/src/components/Backdrop/Backdrop.jsx

@@ -1,8 +1,8 @@
-import React from 'react'
-import { node, string } from 'prop-types'
 import classNames from 'classnames'
-import Element from '../Element'
+import { node, string } from 'prop-types'
+import React from 'react'
 
+import Element from '../Element'
 import styles from './Backdrop.module.scss'
 
 /**

package/src/components/Button/Button.jsx

@@ -1,6 +1,7 @@
-import React from 'react'
-import { bool, func, node, object, oneOfType, shape, string } from 'prop-types'
 import classNames from 'classnames'
+import { bool, func, node, object, oneOfType, shape, string } from 'prop-types'
+import React from 'react'
+
 import SmartLink from '../SmartLink'
 
 const Button = ({ active, children, theme, className, setRef, ...rest }) => {

package/src/components/Button/ButtonGroup.jsx

@@ -1,6 +1,6 @@
-import React from 'react'
-import { node, shape, string } from 'prop-types'
 import classNames from 'classnames'
+import { node, shape, string } from 'prop-types'
+import React from 'react'
 
 const ButtonGroup = ({ children, theme, className }) => {
   if (!children) return null

package/src/components/Button/index.jsx

@@ -1,9 +1,9 @@
 import React, { forwardRef } from 'react'
+
 import { withTheme } from '../../providers'
 import PureButton from './Button'
-import PureButtonGroup from './ButtonGroup'
-
 import theme from './Button.module.scss'
+import PureButtonGroup from './ButtonGroup'
 
 const { displayName } = PureButton
 const ButtonWithRef = forwardRef((props, ref) => (

package/src/components/Card/Card.jsx

@@ -1,4 +1,4 @@
-import React from 'react'
+import classNames from 'classnames'
 import {
   func,
   node,
@@ -8,7 +8,8 @@ import {
   shape,
   string
 } from 'prop-types'
-import classNames from 'classnames'
+import React from 'react'
+
 import CardHeading from './CardHeading'
 import CardImage from './CardImage'
 

package/src/components/Card/CardHeading.jsx

@@ -1,5 +1,6 @@
-import React from 'react'
 import { func, node, object, oneOfType, string } from 'prop-types'
+import React from 'react'
+
 import SmartLink from '../SmartLink'
 
 const CardHeading = ({ href, target, children, ref, theme }) => {

package/src/components/Card/CardImage.jsx

@@ -1,5 +1,6 @@
-import React from 'react'
 import { func, number, object, oneOfType, string } from 'prop-types'
+import React from 'react'
+
 import Image from '../Image'
 import ResponsiveMedia from '../ResponsiveMedia'
 

package/src/components/Card/index.jsx

@@ -1,7 +1,7 @@
 import React, { forwardRef } from 'react'
+
 import { withTheme } from '../../providers'
 import PureCard from './Card'
-
 import theme from './Card.module.scss'
 
 const { displayName } = PureCard

package/src/components/ContentContainer/ContentContainer.jsx

@@ -1,6 +1,7 @@
-import React from 'react'
-import { bool, node, shape, string } from 'prop-types'
 import classNames from 'classnames'
+import { bool, node, shape, string } from 'prop-types'
+import React from 'react'
+
 import Element from '../Element'
 
 /**

package/src/components/ContentContainer/index.js

@@ -1,6 +1,5 @@
 import { withTheme } from '../../providers'
 import PureContentContainer from './ContentContainer'
-
 import theme from './ContentContainer.module.scss'
 
 const { displayName } = PureContentContainer

package/src/components/CreditLockup/CreditLockup.jsx

@@ -1,8 +1,8 @@
-import React from 'react'
 import { oneOf, shape, string } from 'prop-types'
-import SmartLink from '../SmartLink'
-import Icon from '../Icon'
+import React from 'react'
 
+import Icon from '../Icon'
+import SmartLink from '../SmartLink'
 import { ReactComponent as LogoSvg } from './images/logo.svg'
 
 const name = 'New High Score'

package/src/components/CreditLockup/index.js

@@ -1,6 +1,5 @@
 import { withTheme } from '../../providers'
 import PureCreditLockup from './CreditLockup'
-
 import theme from './CreditLockup.module.scss'
 
 const { displayName } = PureCreditLockup

package/src/components/Element/Element.jsx

@@ -1,5 +1,5 @@
-import React from 'react'
 import { func, node, oneOfType, string } from 'prop-types'
+import React from 'react'
 
 const Element = ({ as: Component = 'div', ...rest }) => <Component {...rest} />
 

package/src/components/FooterContainer/FooterContainer.jsx

@@ -1,10 +1,9 @@
-import React from 'react'
 import { node } from 'prop-types'
+import React from 'react'
+
 import ContentContainer from '../ContentContainer'
 
 const FooterContainer = ({ children, theme, ...rest }) => {
-  if (!children) return null
-
   return (
     <ContentContainer as="footer" role="contentinfo" theme={theme} {...rest}>
       {children}

package/src/components/Grid/Grid.jsx

@@ -1,6 +1,6 @@
-import React from 'react'
-import { bool, node, oneOf, shape, string } from 'prop-types'
 import classNames from 'classnames'
+import { bool, node, oneOf, shape, string } from 'prop-types'
+import React from 'react'
 
 /**
  * `Grid` provides  a simple `inline-block` based responsive grid

package/src/components/Grid/GridItem.jsx

@@ -1,6 +1,6 @@
-import React from 'react'
-import { arrayOf, node, oneOf, shape, string } from 'prop-types'
 import classNames from 'classnames'
+import { arrayOf, node, oneOf, shape, string } from 'prop-types'
+import React from 'react'
 
 const GridItem = ({ sizes, children, theme, className, ...rest }) => {
   if (!children) return null

package/src/components/Grid/index.js

@@ -1,8 +1,7 @@
 import { withTheme } from '../../providers'
 import PureGrid from './Grid'
-import PureGridItem from './GridItem'
-
 import theme from './Grid.module.scss'
+import PureGridItem from './GridItem'
 
 const { displayName } = PureGrid
 const Grid = withTheme(displayName, theme)(PureGrid)

package/src/components/HeaderContainer/HeaderContainer.jsx

@@ -1,10 +1,9 @@
-import React from 'react'
 import { node } from 'prop-types'
+import React from 'react'
+
 import ContentContainer from '../ContentContainer'
 
 const HeaderContainer = ({ children, theme, ...rest }) => {
-  if (!children) return null
-
   return (
     <ContentContainer
       id="top"

package/src/components/Icon/Icon.jsx

@@ -1,6 +1,7 @@
-import React from 'react'
-import { node, number, oneOfType, shape, string } from 'prop-types'
 import classNames from 'classnames'
+import { node, number, oneOfType, shape, string } from 'prop-types'
+import React from 'react'
+
 import VisuallyHidden from '../VisuallyHidden'
 
 /**

package/src/components/Icon/index.js

@@ -1,6 +1,5 @@
 import { withTheme } from '../../providers'
 import PureIcon from './Icon'
-
 import theme from './Icon.module.scss'
 
 const { displayName } = PureIcon

package/src/components/Image/Image.jsx

@@ -1,5 +1,5 @@
-import React from 'react'
 import { arrayOf, oneOf, shape, string } from 'prop-types'
+import React from 'react'
 
 const Image = ({
   src,

package/src/components/Landmark/Landmark.jsx

@@ -1,7 +1,7 @@
-import React from 'react'
 import { node } from 'prop-types'
-import VisuallyHidden from '../VisuallyHidden'
+import React from 'react'
 
+import VisuallyHidden from '../VisuallyHidden'
 import styles from './Landmark.module.scss'
 
 /**
@@ -11,7 +11,7 @@ const Landmark = ({ children, ...rest }) => (
   <>
     {/* eslint-disable jsx-a11y/anchor-is-valid */}
     <a className={styles.root} {...rest}>
-      {children && <VisuallyHidden>{children}</VisuallyHidden>}
+      <VisuallyHidden>{children}</VisuallyHidden>
     </a>
     {/* eslint-enable jsx-a11y/anchor-is-valid */}
   </>

package/src/components/List/List.jsx

@@ -1,6 +1,7 @@
-import React from 'react'
-import { bool, node, oneOf, shape, string } from 'prop-types'
 import classNames from 'classnames'
+import { bool, node, oneOf, shape, string } from 'prop-types'
+import React from 'react'
+
 import Element from '../Element'
 
 const List = ({

package/src/components/List/index.js

@@ -1,6 +1,5 @@
 import { withTheme } from '../../providers'
 import PureList from './List'
-
 import theme from './List.module.scss'
 
 const { displayName } = PureList

package/src/components/LiveStream/LiveStream.jsx

@@ -1,8 +1,10 @@
-import React, { useEffect, useState } from 'react'
-import { bool, shape, string } from 'prop-types'
 import classNames from 'classnames'
+import { bool, shape, string } from 'prop-types'
+import React, { useEffect, useState } from 'react'
+
 import Grid from '../Grid'
 import ResponsiveMedia from '../ResponsiveMedia'
+import VisuallyHidden from '../VisuallyHidden'
 import { getLiveStreamUrls } from './utils'
 
 const LiveStream = ({
@@ -15,8 +17,7 @@ const LiveStream = ({
   theme,
   className
 }) => {
-  if (!href) return null
-
+  const [loading, setLoading] = useState(true)
   const [liveStreamUrls, setLiveSteamUrls] = useState({
     videoUrl: null,
     chatUrl: null
@@ -24,19 +25,23 @@ const LiveStream = ({
 
   useEffect(() => {
     const loadUrls = async () => {
-      setLiveSteamUrls(
-        await getLiveStreamUrls({
-          href,
-          autoPlay,
-          muted,
-          darkMode,
-          showChat
-        })
-      )
+      const urls = await getLiveStreamUrls({
+        href,
+        autoPlay,
+        muted,
+        darkMode,
+        showChat
+      })
+
+      setLiveSteamUrls(urls)
+      setLoading(false)
     }
 
     loadUrls()
-  }, [href])
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [])
+
+  if (loading) return <VisuallyHidden>Loading live stream</VisuallyHidden>
 
   const { videoUrl, chatUrl } = liveStreamUrls
 
@@ -47,9 +52,8 @@ const LiveStream = ({
       <Grid.Item className={theme?.video}>
         <ResponsiveMedia ratio="16:9">
           <iframe
-            data-test-id="LiveStreamVideo"
             title="Live stream"
-            src={videoUrl.toString()}
+            src={videoUrl.href}
             allowFullScreen={allowFullScreen}
             loading="lazy"
           />
@@ -57,12 +61,7 @@ const LiveStream = ({
       </Grid.Item>
       {chatUrl && (
         <Grid.Item className={theme?.chat}>
-          <iframe
-            data-test-id="LiveStreamChat"
-            title="Live chat"
-            src={chatUrl.toString()}
-            loading="lazy"
-          />
+          <iframe title="Live chat" src={chatUrl.href} loading="lazy" />
         </Grid.Item>
       )}
     </Grid>

package/src/components/LiveStream/index.js

@@ -1,6 +1,5 @@
 import { withTheme } from '../../providers'
 import PureLiveStream from './LiveStream'
-
 import theme from './LiveStream.module.scss'
 
 const { displayName } = PureLiveStream

package/src/components/LiveStream/utils.js

@@ -1,11 +1,11 @@
 import fetch from 'node-fetch'
-import urlJoin from 'url-join'
 import { isMobile } from 'react-device-detect'
+import urlJoin from 'url-join'
 
 const getExternalUrl = url =>
   `https://api.allorigins.win/get?url=${encodeURIComponent(url)}`
 
-const location = typeof window !== 'undefined' ? window.location : null
+const { hostname } = window.location
 
 const PROVIDERS = {
   facebook: {
@@ -19,8 +19,7 @@ const PROVIDERS = {
       })
 
       return url
-    },
-    getChatUrl: () => ''
+    }
   },
   twitch: {
     urlRegEx: /^(https?:\/\/)?(www\.)?(twitch\.tv)\/(.+)$/,
@@ -29,7 +28,7 @@ const PROVIDERS = {
       const url = new URL('https://player.twitch.tv')
       url.search = new URLSearchParams({
         channel,
-        parent: location?.hostname,
+        parent: hostname,
         autoplay: !!autoPlay,
         muted: !!muted
       })
@@ -39,7 +38,7 @@ const PROVIDERS = {
     getChatUrl: ({ channel, darkMode }) => {
       const url = new URL(`https://www.twitch.tv/embed/${channel}/chat`)
       url.search = new URLSearchParams({
-        parent: location?.hostname,
+        parent: hostname,
         ...(darkMode && { darkpopout: '' })
       })
 
@@ -49,13 +48,17 @@ const PROVIDERS = {
   youtube: {
     urlRegEx: /^(https?:\/\/)?(www\.)?(youtube\.com)(\/c(hannel)?)?\/(.+)$/,
     getChannelParam: async url => {
-      const { contents } = await fetch(
-        getExternalUrl(urlJoin(url, 'live'))
-      ).then(response => response.json())
+      try {
+        const { contents } = await fetch(
+          getExternalUrl(urlJoin(url, 'live'))
+        ).then(response => response.json())
 
-      return contents.match(
-        /"liveStreamabilityRenderer":{"videoId":"(\w+?)"/
-      )?.[1]
+        return contents?.match(
+          /"liveStreamabilityRenderer":{"videoId":"([\w|-]+?)"/
+        )?.[1]
+      } catch {
+        return null
+      }
     },
     getVideoUrl: ({ channel, autoPlay, muted }) => {
       const url = new URL(`https://www.youtube-nocookie.com/embed/${channel}`)
@@ -72,7 +75,7 @@ const PROVIDERS = {
       const url = new URL('https://www.youtube.com/live_chat')
       url.search = new URLSearchParams({
         v: channel,
-        embed_domain: location?.hostname,
+        embed_domain: hostname,
         ...(darkMode && { dark_theme: 1 })
       })
 
@@ -82,6 +85,8 @@ const PROVIDERS = {
 }
 
 const getProvider = url => {
+  if (!url) return null
+
   const keys = Object.keys(PROVIDERS)
   let i = keys.length
 
@@ -100,9 +105,10 @@ export const getLiveStreamUrls = async ({
   showChat
 }) => {
   const provider = getProvider(href)
-  const channel = await (provider && provider.getChannelParam(href))
-  const videoUrl = channel && provider.getVideoUrl({ channel, autoPlay, muted })
-  const chatUrl = channel && provider.getChatUrl({ channel, darkMode })
+  const channel = await provider?.getChannelParam(href)
+  const videoUrl =
+    channel && provider?.getVideoUrl?.({ channel, autoPlay, muted })
+  const chatUrl = channel && provider?.getChatUrl?.({ channel, darkMode })
 
   return { videoUrl, chatUrl: showChat && chatUrl }
 }

package/src/components/Navigation/Navigation.jsx

@@ -1,15 +1,15 @@
-import React from 'react'
-import { array, bool, func, shape, string } from 'prop-types'
 import classNames from 'classnames'
+import { array, bool, func, shape, string } from 'prop-types'
+import React from 'react'
+
 import { useToggle } from '../../hooks'
 import Button from '../Button'
 import Icon from '../Icon'
 import List from '../List'
 import SmartLink from '../SmartLink'
 import VisuallyHidden from '../VisuallyHidden'
-
-import { ReactComponent as MenuSvg } from './images/menu.svg'
 import { ReactComponent as CloseSvg } from './images/close.svg'
+import { ReactComponent as MenuSvg } from './images/menu.svg'
 
 const Navigation = ({
   title = 'Navigation',
@@ -21,10 +21,10 @@ const Navigation = ({
   theme,
   className
 }) => {
-  if (!links.length) return null
-
   const [visible, setVisibility] = useToggle(!toggle)
 
+  if (!links.length) return null
+
   const toggleVisibility = () => {
     setVisibility()
     onToggle({ visible })

package/src/components/Navigation/index.js

@@ -1,6 +1,5 @@
 import { withTheme } from '../../providers'
 import PureNavigation from './Navigation'
-
 import theme from './Navigation.module.scss'
 
 const { displayName } = PureNavigation

package/src/components/PageContainer/PageContainer.jsx

@@ -1,13 +1,12 @@
-import React from 'react'
 import { node } from 'prop-types'
+import React from 'react'
+
 import ContentContainer from '../ContentContainer'
 
 /**
  * The `PageContainer` flexes to fill the unused space within its parent
  */
 const PageContainer = ({ header, footer, children, theme, ...rest }) => {
-  if (!children) return null
-
   return (
     <>
       {header}

package/src/components/PageContainer/index.js

@@ -1,6 +1,5 @@
 import { withTheme } from '../../providers'
 import PurePageContainer from './PageContainer'
-
 import theme from './PageContainer.module.scss'
 
 const { displayName } = PurePageContainer

package/src/components/Prose/Prose.jsx

@@ -1,6 +1,6 @@
-import React from 'react'
-import { node, shape, string } from 'prop-types'
 import classNames from 'classnames'
+import { node, shape, string } from 'prop-types'
+import React from 'react'
 
 const Prose = ({ html, children, theme, className, ...rest }) => {
   if (!html && !children) return null

package/src/components/Prose/index.js

@@ -1,6 +1,5 @@
 import { withTheme } from '../../providers'
 import PureProse from './Prose'
-
 import theme from './Prose.module.scss'
 
 const { displayName } = PureProse

package/src/components/ResponsiveMedia/ResponsiveMedia.jsx

@@ -1,4 +1,4 @@
-import React from 'react'
+import classNames from 'classnames'
 import {
   func,
   node,
@@ -8,7 +8,7 @@ import {
   shape,
   string
 } from 'prop-types'
-import classNames from 'classnames'
+import React from 'react'
 
 const ratioRegExp = /^\d+:\d+$/
 

package/src/components/ResponsiveMedia/index.js

@@ -1,6 +1,5 @@
 import { withTheme } from '../../providers'
 import PureResponsiveMedia from './ResponsiveMedia'
-
 import theme from './ResponsiveMedia.module.scss'
 
 const { displayName } = PureResponsiveMedia

package/src/components/SiteContainer/SiteContainer.jsx

@@ -1,6 +1,7 @@
-import React from 'react'
-import { node, shape, string } from 'prop-types'
 import classNames from 'classnames'
+import { node, shape, string } from 'prop-types'
+import React from 'react'
+
 import Element from '../Element'
 
 /**

package/src/components/SiteContainer/index.js

@@ -1,6 +1,5 @@
 import { withTheme } from '../../providers'
 import PureSiteContainer from './SiteContainer'
-
 import theme from './SiteContainer.module.scss'
 
 const { displayName } = PureSiteContainer

package/src/components/SmartLink/SmartLink.jsx

@@ -1,5 +1,6 @@
-import React from 'react'
 import { func, node, object, oneOf, oneOfType, string } from 'prop-types'
+import React from 'react'
+
 import { absoluteUrl } from '../../utils'
 
 /**

package/src/components/SmartLink/index.jsx

@@ -1,4 +1,5 @@
 import React, { forwardRef } from 'react'
+
 import PureSmartLink from './SmartLink'
 
 const { displayName } = PureSmartLink

package/src/components/Tooltip/Tooltip.jsx

@@ -1,6 +1,7 @@
-import React from 'react'
-import { bool, node, oneOf, shape, string } from 'prop-types'
 import classNames from 'classnames'
+import { bool, node, oneOf, shape, string } from 'prop-types'
+import React from 'react'
+
 import { useToggle } from '../../hooks'
 import SmartLink from '../SmartLink'
 
@@ -21,10 +22,10 @@ const Tooltip = ({
   theme,
   className
 }) => {
-  if (!heading && !children) return null
-
   const [visible, setVisibility] = useToggle(!hidden)
 
+  if (!heading && !children) return null
+
   return (
     <span
       className={classNames(theme?.root, className)}

package/src/components/Tooltip/index.js

@@ -1,6 +1,5 @@
 import { withTheme } from '../../providers'
 import PureTooltip from './Tooltip'
-
 import theme from './Tooltip.module.scss'
 
 const { displayName } = PureTooltip

package/src/components/VisuallyHidden/VisuallyHidden.jsx

@@ -1,7 +1,7 @@
-import React from 'react'
 import { node } from 'prop-types'
-import Element from '../Element'
+import React from 'react'
 
+import Element from '../Element'
 import styles from './VisuallyHidden.module.scss'
 
 /**

package/src/components/index.js

@@ -1,7 +1,7 @@
-export { default as ContentContainer } from './ContentContainer'
 export { default as Backdrop } from './Backdrop'
 export { default as Button } from './Button'
 export { default as Card } from './Card'
+export { default as ContentContainer } from './ContentContainer'
 export { default as CreditLockup } from './CreditLockup'
 export { default as Element } from './Element'
 export { default as FooterContainer } from './FooterContainer'

package/src/docs/README.stories.mdx

@@ -1,8 +1,8 @@
 import { Meta, Title } from '@storybook/addon-docs'
-import { CreditLockup, Image, SmartLink } from '../../src'
-import packageInfo from '../../package.json'
 
 import { ReactComponent as LogoSvg } from '../../.storybook/static/logo.svg'
+import packageInfo from '../../package.json'
+import { CreditLockup, Image, SmartLink } from '../../src'
 
 <Meta title="Docs/README" />
 

package/src/index.js

@@ -1,4 +1,4 @@
-export * from './utils'
 export * from './components'
 export * from './hooks'
 export * from './providers'
+export * from './utils'