imbric-theme 0.1.1

package/hook/useMedia.js

@@ -0,0 +1,22 @@
+import { useEffect, useState } from 'react'
+
+const useMedia = (queries, values, defaultValue) => {
+  const mediaQueryLists = queries.map((q) => window.matchMedia(q))
+  const getValue = () => {
+    const index = mediaQueryLists.findIndex((mql) => mql.matches)
+    return typeof values[index] !== 'undefined' ? values[index] : defaultValue
+  }
+
+  const [value, setValue] = useState(getValue)
+
+  useEffect(() => {
+    const handler = () => setValue(getValue)
+    mediaQueryLists.forEach((mql) => mql.addListener(handler))
+
+    return () => mediaQueryLists.forEach((mql) => mql.removeListener(handler))
+  }, [])
+
+  return value
+}
+
+export default useMedia

package/index.js

@@ -0,0 +1,31 @@
+// Layout
+export { default as CenteredContent } from './layout/CenteredContent'
+export { default as Container } from './layout/Container'
+export { default as FullHeightContent } from './layout/FullHeightContent'
+export { default as Spacer } from './layout/Spacer'
+
+// Atoms
+export { default as Avatar } from './atoms/Avatar'
+export { default as Button } from './atoms/Button'
+export { default as Card } from './atoms/Card'
+export { default as Check } from './atoms/Check'
+export { default as Divider } from './atoms/Divider'
+export { default as Heading } from './atoms/Heading'
+export { default as Icon } from './atoms/Icon'
+export { default as Input } from './atoms/Input'
+export { default as Link } from './atoms/Link'
+export { default as Modal } from './atoms/Modal'
+export { default as Paragraph } from './atoms/Paragraph'
+export { default as Picture } from './atoms/Picture'
+export { default as Textarea } from './atoms/Textarea'
+
+// Molecules
+export { default as Accordion } from './molecules/Accordion'
+export { default as AddButton } from './molecules/AddButton'
+export { default as ButtonIcon } from './molecules/ButtonIcon'
+export { default as Dropdown } from './molecules/Dropdown'
+export { default as LoadingError } from './molecules/LoadingError'
+export { default as Score } from './molecules/Score'
+export { default as Task } from './molecules/Task'
+export { default as TaskCounter } from './molecules/TaskCounter'
+export { default as IconLabel } from './molecules/IconLabel'

package/jest.config.js

@@ -0,0 +1,23 @@
+module.exports = {
+  moduleNameMapper: {
+    '\\.css$': 'identity-obj-proxy',
+    '\\.svg$': '<rootDir>/utils/testUtils/svgrMock.js',
+  },
+  setupFilesAfterEnv: ['./jest.setup.js'],
+  transform: {
+    '^.+\\.stories\\.jsx?$': '@storybook/addon-storyshots/injectFileName',
+    '^.+\\.jsx?$': 'babel-jest',
+  },
+  collectCoverageFrom: [
+    '{atoms,molecules,layout}/**/!(index).js',
+    '{hocs,helpers}/*.js',
+  ],
+  coverageThreshold: {
+    global: {
+      statements: 60,
+      branches: 60,
+      lines: 60,
+      functions: 60,
+    },
+  },
+}

package/jest.setup.js

@@ -0,0 +1,13 @@
+// https://console.spec.whatwg.org/#loglevel-severity
+const CONSOLE_LEVELS = ['debug', 'log', 'info', 'warn', 'error']
+
+// Notice that by default the levels will be ["error"]
+const allowedConsoleLevels = CONSOLE_LEVELS.slice(
+  CONSOLE_LEVELS.indexOf(process.env.CONSOLE_LEVEL)
+)
+
+global.console = CONSOLE_LEVELS.reduce((levels, level) => {
+  return allowedConsoleLevels.includes(level)
+    ? { ...levels, [level]: console[level] }
+    : { ...levels, [level]: jest.fn() }
+}, {})

package/layout/CenteredContent/CenteredContent.js

@@ -0,0 +1,30 @@
+import React from 'react'
+import PropTypes from 'prop-types'
+
+import styles from './CenteredContent.module.css'
+import withStyles from '../../hocs/withStyles'
+
+export const CenteredContent = ({ getStyles, children, isPlayground }) => {
+  return (
+    <div
+      className={getStyles('centered-content', {
+        'is-playground': isPlayground,
+      })}
+    >
+      {children}
+    </div>
+  )
+}
+
+CenteredContent.propTypes = {
+  children: PropTypes.node.isRequired,
+  getStyles: PropTypes.func.isRequired,
+  isPlayground: PropTypes.bool,
+}
+
+CenteredContent.defaultProps = {
+  isPlayground: false,
+  getStyles: () => {},
+}
+
+export default withStyles(styles)(CenteredContent)

package/layout/CenteredContent/CenteredContent.module.css

@@ -0,0 +1,12 @@
+.centered-content {
+  display: flex;
+  height: 100%;
+  flex: auto;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+}
+
+.is-playground {
+  border: var(--border-width-thick) dashed var(--color-primary);
+}

package/layout/CenteredContent/CenteredContent.stories.js

@@ -0,0 +1,22 @@
+import { CenteredContent, styles } from '.'
+
+import { getTemplate } from '../../helpers/storybook'
+
+const Template = getTemplate(CenteredContent, styles)
+
+export default {
+  title: 'Layout/CenteredContent',
+  component: CenteredContent,
+  args: {
+    isPlayground: true,
+    children: `Farthings pulled strain? Half they'll greater land sordid Elessar. Glamdring um 17 13 motion? Creaked fate spawning chief lords loved loveliest ashes Elfs witness. Brook born Caradhras dining raining! Seeing-stones taking unlost working. A wizard is never late, Frodo Baggins. Nor is he early. He arrives precisely when he means to. Oakenshield despite distinct prosperous wields relight dark weighed leader reaches rid honor. Moments poison Sackville-Bagginses echoes dozens fend get. Scales exist apple Gundabad retaken bunch agreeable mantle cannot name's seasoning private.
+    Brave dry defeats? Remembered unleashed Denethor niceties legacy. Streets cares pretty Brandybucks ostler. Intact dispatch their expenses suffered flaming bacon should Fili? Jacksie begins hallway needed tracked Gondor's wonderful popularity. Seemed ears perfectly Oakenshield's pale fall animals stabs betrayed grumbling? Stuff awake Brandybuck large done. Curse you and all the halflings!
+    Dared sit torment goes Anárion forgiven west. Summon Bucklebury ship. Terms none Farthings. Tea choose Dwarvish! Leagues gracious carpet payment Brandywine senses very thousand! Don't you leave him, Samwise Gamgee. Firestorm raising Shire reaction mud morninged shines death should! It'll Halflings nab pot drove start. Carpet Lasgalen seen sleepies!
+    Seeing renown knocked battered contend World shepherd. Roof sautéed kingdom agree curtain lived preparing down material Galion appearance! Faramir one-fourteenth study talked amongst fisherman barren recoil responsible. There is one Dwarf yet in Moria who still draws breath. Boats wait exaggerate guessed Muil usurper suffice. Unspoken swears stands serpent depart Mithril. Ugly threat Dwarf possessions yours homage long-term unmade. Well-earned suffice tapestry tongue piled smoke lacerations talisman helps Dragon-Slayer crown? Blanket shan't dare appearances hours grave Muil.`,
+  },
+  argTypes: {
+    children: { control: 'text' },
+  },
+}
+
+export const Default = Template.bind({})

package/layout/CenteredContent/__snapshots__/CenteredContent.stories.js.snap

@@ -0,0 +1,27 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Storyshots Layout/CenteredContent Default 1`] = `
+<div
+  style={
+    Object {
+      "alignContent": "flex-start",
+      "display": "flex",
+      "flexDirection": "column",
+      "flexWrap": "wrap",
+      "gap": "10px 30px",
+      "height": "100%",
+      "justifyContent": "flex-start",
+      "maxHeight": "auto",
+    }
+  }
+>
+  <div
+    className="centered-content is-playground"
+  >
+    Farthings pulled strain? Half they'll greater land sordid Elessar. Glamdring um 17 13 motion? Creaked fate spawning chief lords loved loveliest ashes Elfs witness. Brook born Caradhras dining raining! Seeing-stones taking unlost working. A wizard is never late, Frodo Baggins. Nor is he early. He arrives precisely when he means to. Oakenshield despite distinct prosperous wields relight dark weighed leader reaches rid honor. Moments poison Sackville-Bagginses echoes dozens fend get. Scales exist apple Gundabad retaken bunch agreeable mantle cannot name's seasoning private.
+    Brave dry defeats? Remembered unleashed Denethor niceties legacy. Streets cares pretty Brandybucks ostler. Intact dispatch their expenses suffered flaming bacon should Fili? Jacksie begins hallway needed tracked Gondor's wonderful popularity. Seemed ears perfectly Oakenshield's pale fall animals stabs betrayed grumbling? Stuff awake Brandybuck large done. Curse you and all the halflings!
+    Dared sit torment goes Anárion forgiven west. Summon Bucklebury ship. Terms none Farthings. Tea choose Dwarvish! Leagues gracious carpet payment Brandywine senses very thousand! Don't you leave him, Samwise Gamgee. Firestorm raising Shire reaction mud morninged shines death should! It'll Halflings nab pot drove start. Carpet Lasgalen seen sleepies!
+    Seeing renown knocked battered contend World shepherd. Roof sautéed kingdom agree curtain lived preparing down material Galion appearance! Faramir one-fourteenth study talked amongst fisherman barren recoil responsible. There is one Dwarf yet in Moria who still draws breath. Boats wait exaggerate guessed Muil usurper suffice. Unspoken swears stands serpent depart Mithril. Ugly threat Dwarf possessions yours homage long-term unmade. Well-earned suffice tapestry tongue piled smoke lacerations talisman helps Dragon-Slayer crown? Blanket shan't dare appearances hours grave Muil.
+  </div>
+</div>
+`;

package/layout/CenteredContent/index.js

@@ -0,0 +1,2 @@
+export { default, CenteredContent } from './CenteredContent'
+export { default as styles } from './CenteredContent.module.css'

package/layout/Container/Container.js

@@ -0,0 +1,29 @@
+import React from 'react'
+import PropTypes from 'prop-types'
+import styles from './Container.module.css'
+import withStyles from '../../hocs/withStyles'
+
+export const Container = ({ getStyles, children, isPlayground }) => {
+  return (
+    <div
+      className={getStyles('container', {
+        'is-playground': isPlayground,
+      })}
+    >
+      {children}
+    </div>
+  )
+}
+
+Container.propTypes = {
+  children: PropTypes.node.isRequired,
+  getStyles: PropTypes.func.isRequired,
+  isPlayground: PropTypes.bool,
+}
+
+Container.defaultProps = {
+  isPlayground: false,
+  getStyles: () => {},
+}
+
+export default withStyles(styles)(Container)

package/layout/Container/Container.module.css

@@ -0,0 +1,14 @@
+.container {
+  display: flex;
+  width: 100%;
+  max-width: var(--container-max-width);
+  height: 100%;
+  flex: auto;
+  justify-content: center;
+  padding: 20px 15px 20px;
+  margin: 0 auto;
+}
+
+.is-playground {
+  border: var(--border-width-thick) dashed var(--color-primary);
+}

package/layout/Container/Container.stories.js

@@ -0,0 +1,22 @@
+import { Container, styles } from '.'
+
+import { getTemplate } from '../../helpers/storybook'
+
+const Template = getTemplate(Container, styles)
+
+export default {
+  title: 'Layout/Container',
+  component: Container,
+  args: {
+    isPlayground: true,
+    children: `Farthings pulled strain? Half they'll greater land sordid Elessar. Glamdring um 17 13 motion? Creaked fate spawning chief lords loved loveliest ashes Elfs witness. Brook born Caradhras dining raining! Seeing-stones taking unlost working. A wizard is never late, Frodo Baggins. Nor is he early. He arrives precisely when he means to. Oakenshield despite distinct prosperous wields relight dark weighed leader reaches rid honor. Moments poison Sackville-Bagginses echoes dozens fend get. Scales exist apple Gundabad retaken bunch agreeable mantle cannot name's seasoning private.
+    Brave dry defeats? Remembered unleashed Denethor niceties legacy. Streets cares pretty Brandybucks ostler. Intact dispatch their expenses suffered flaming bacon should Fili? Jacksie begins hallway needed tracked Gondor's wonderful popularity. Seemed ears perfectly Oakenshield's pale fall animals stabs betrayed grumbling? Stuff awake Brandybuck large done. Curse you and all the halflings!
+    Dared sit torment goes Anárion forgiven west. Summon Bucklebury ship. Terms none Farthings. Tea choose Dwarvish! Leagues gracious carpet payment Brandywine senses very thousand! Don't you leave him, Samwise Gamgee. Firestorm raising Shire reaction mud morninged shines death should! It'll Halflings nab pot drove start. Carpet Lasgalen seen sleepies!
+    Seeing renown knocked battered contend World shepherd. Roof sautéed kingdom agree curtain lived preparing down material Galion appearance! Faramir one-fourteenth study talked amongst fisherman barren recoil responsible. There is one Dwarf yet in Moria who still draws breath. Boats wait exaggerate guessed Muil usurper suffice. Unspoken swears stands serpent depart Mithril. Ugly threat Dwarf possessions yours homage long-term unmade. Well-earned suffice tapestry tongue piled smoke lacerations talisman helps Dragon-Slayer crown? Blanket shan't dare appearances hours grave Muil.`,
+  },
+  argTypes: {
+    children: { control: 'text' },
+  },
+}
+
+export const Default = Template.bind({})

package/layout/Container/__snapshots__/Container.stories.js.snap

@@ -0,0 +1,27 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Storyshots Layout/Container Default 1`] = `
+<div
+  style={
+    Object {
+      "alignContent": "flex-start",
+      "display": "flex",
+      "flexDirection": "column",
+      "flexWrap": "wrap",
+      "gap": "10px 30px",
+      "height": "100%",
+      "justifyContent": "flex-start",
+      "maxHeight": "auto",
+    }
+  }
+>
+  <div
+    className="container is-playground"
+  >
+    Farthings pulled strain? Half they'll greater land sordid Elessar. Glamdring um 17 13 motion? Creaked fate spawning chief lords loved loveliest ashes Elfs witness. Brook born Caradhras dining raining! Seeing-stones taking unlost working. A wizard is never late, Frodo Baggins. Nor is he early. He arrives precisely when he means to. Oakenshield despite distinct prosperous wields relight dark weighed leader reaches rid honor. Moments poison Sackville-Bagginses echoes dozens fend get. Scales exist apple Gundabad retaken bunch agreeable mantle cannot name's seasoning private.
+    Brave dry defeats? Remembered unleashed Denethor niceties legacy. Streets cares pretty Brandybucks ostler. Intact dispatch their expenses suffered flaming bacon should Fili? Jacksie begins hallway needed tracked Gondor's wonderful popularity. Seemed ears perfectly Oakenshield's pale fall animals stabs betrayed grumbling? Stuff awake Brandybuck large done. Curse you and all the halflings!
+    Dared sit torment goes Anárion forgiven west. Summon Bucklebury ship. Terms none Farthings. Tea choose Dwarvish! Leagues gracious carpet payment Brandywine senses very thousand! Don't you leave him, Samwise Gamgee. Firestorm raising Shire reaction mud morninged shines death should! It'll Halflings nab pot drove start. Carpet Lasgalen seen sleepies!
+    Seeing renown knocked battered contend World shepherd. Roof sautéed kingdom agree curtain lived preparing down material Galion appearance! Faramir one-fourteenth study talked amongst fisherman barren recoil responsible. There is one Dwarf yet in Moria who still draws breath. Boats wait exaggerate guessed Muil usurper suffice. Unspoken swears stands serpent depart Mithril. Ugly threat Dwarf possessions yours homage long-term unmade. Well-earned suffice tapestry tongue piled smoke lacerations talisman helps Dragon-Slayer crown? Blanket shan't dare appearances hours grave Muil.
+  </div>
+</div>
+`;

package/layout/Container/index.js

@@ -0,0 +1,2 @@
+export { default, Container } from './Container'
+export { default as styles } from './Container.module.css'

package/layout/FullHeightContent/FullHeightContent.js

@@ -0,0 +1,40 @@
+import React from 'react'
+import PropTypes from 'prop-types'
+
+import Spacer from '../Spacer'
+
+import styles from './FullHeightContent.module.css'
+import withStyles from '../../hocs/withStyles'
+
+export const FullHeightContent = ({
+  getStyles,
+  isPlayground,
+  content,
+  footer,
+}) => {
+  return (
+    <div
+      className={getStyles('full-height-content', {
+        'is-playground': isPlayground,
+      })}
+    >
+      <div className={styles.content}>{content}</div>
+      <Spacer.Vertical size="sm" />
+      <div className={styles.footer}>{footer}</div>
+    </div>
+  )
+}
+
+FullHeightContent.propTypes = {
+  getStyles: PropTypes.func.isRequired,
+  content: PropTypes.node.isRequired,
+  footer: PropTypes.node.isRequired,
+  isPlayground: PropTypes.bool,
+}
+
+FullHeightContent.defaultProps = {
+  isPlayground: false,
+  getStyles: () => {},
+}
+
+export default withStyles(styles)(FullHeightContent)

package/layout/FullHeightContent/FullHeightContent.module.css

@@ -0,0 +1,21 @@
+.full-height-content {
+  display: flex;
+  height: 100%;
+  flex: auto;
+  flex-direction: column;
+  justify-content: space-between;
+}
+
+.content {
+  display: flex;
+  flex-direction: column;
+  align-items: stretch;
+}
+
+.footer {
+  text-align: center;
+}
+
+.is-playground {
+  border: var(--border-width-thick) dashed var(--color-primary);
+}

package/layout/FullHeightContent/FullHeightContent.stories.js

@@ -0,0 +1,22 @@
+import { FullHeightContent, styles } from '.'
+
+import { getTemplate } from '../../helpers/storybook'
+
+const Template = getTemplate(FullHeightContent, styles)
+
+export default {
+  title: 'Layout/FullHeightContent',
+  component: FullHeightContent,
+  args: {
+    isPlayground: true,
+    content:
+      'Mice defiling required Bilbo sailing unspoiled this hunting. 14th refuge knowing breath Middle-earth sack demon children?',
+    footer:
+      'Ambition living aid indeed mutton suffered l failing kindness Éothain? Red others Goblin-town spot stuff riddles hero?',
+  },
+  argTypes: {
+    children: { control: 'array' },
+  },
+}
+
+export const Default = Template.bind({})

package/layout/FullHeightContent/__snapshots__/FullHeightContent.stories.js.snap

@@ -0,0 +1,41 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Storyshots Layout/FullHeightContent Default 1`] = `
+<div
+  style={
+    Object {
+      "alignContent": "flex-start",
+      "display": "flex",
+      "flexDirection": "column",
+      "flexWrap": "wrap",
+      "gap": "10px 30px",
+      "height": "100%",
+      "justifyContent": "flex-start",
+      "maxHeight": "auto",
+    }
+  }
+>
+  <div
+    className="full-height-content is-playground"
+  >
+    <div
+      className="content"
+    >
+      Mice defiling required Bilbo sailing unspoiled this hunting. 14th refuge knowing breath Middle-earth sack demon children?
+    </div>
+    <div
+      className="spacer vertical"
+      style={
+        Object {
+          "height": 15,
+        }
+      }
+    />
+    <div
+      className="footer"
+    >
+      Ambition living aid indeed mutton suffered l failing kindness Éothain? Red others Goblin-town spot stuff riddles hero?
+    </div>
+  </div>
+</div>
+`;

package/layout/FullHeightContent/index.js

@@ -0,0 +1,2 @@
+export { default, FullHeightContent } from './FullHeightContent'
+export { default as styles } from './FullHeightContent.module.css'

package/layout/Spacer/Spacer.js

@@ -0,0 +1,40 @@
+import React from 'react'
+import PropTypes from 'prop-types'
+
+import { Vertical, Horizontal } from './components'
+
+import styles from './Spacer.module.css'
+import { mapSize } from './helpers'
+import withStyles from '../../hocs/withStyles'
+
+export const Spacer = ({ getStyles, size, isPlayground }) => (
+  <div
+    className={getStyles('spacer', {
+      'is-playground': isPlayground,
+    })}
+    style={{
+      display: 'inline-block',
+      width: mapSize(size),
+      height: mapSize(size),
+    }}
+  />
+)
+
+Spacer.propTypes = {
+  size: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
+  getStyles: PropTypes.func.isRequired,
+  isPlayground: PropTypes.bool,
+}
+
+Spacer.defaultProps = {
+  size: 'none',
+  isPlayground: false,
+  getStyles: () => {},
+}
+
+const SpacerWithStyles = withStyles(styles)(Spacer)
+
+SpacerWithStyles.Vertical = Vertical
+SpacerWithStyles.Horizontal = Horizontal
+
+export default SpacerWithStyles

package/layout/Spacer/Spacer.module.css

@@ -0,0 +1,12 @@
+.is-playground {
+  border: var(--border-width-thick) dashed var(--color-primary);
+}
+
+.horizontal {
+  display: inline-block;
+}
+
+.vertical {
+  display: block;
+  width: 100%;
+}

package/layout/Spacer/Spacer.stories.js

@@ -0,0 +1,25 @@
+import { Spacer, options, styles } from '.'
+
+import {
+  getTemplate,
+  getListTemplate,
+  getOptionsArgTypes,
+} from '../../helpers/storybook'
+
+const Template = getTemplate(Spacer, styles)
+const ListTemplate = getListTemplate(Spacer, styles)
+
+export default {
+  title: 'Layout/Spacer/Default',
+  component: Spacer,
+  args: { isPlayground: true },
+  argTypes: {
+    size: getOptionsArgTypes(options.sizes),
+  },
+  parameters: { __sb: { fd: 'row' } },
+}
+
+export const Default = Template.bind({})
+
+export const Sizes = ListTemplate.bind({})
+Sizes.args = { items: options.sizes.map((size) => ({ size })) }

package/layout/Spacer/__snapshots__/Spacer.stories.js.snap

@@ -0,0 +1,97 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Storyshots Layout/Spacer/Default Default 1`] = `
+<div
+  style={
+    Object {
+      "alignContent": "flex-start",
+      "display": "flex",
+      "flexDirection": "row",
+      "flexWrap": "wrap",
+      "gap": "10px 30px",
+      "height": "100%",
+      "justifyContent": "flex-start",
+      "maxHeight": "auto",
+    }
+  }
+>
+  <div
+    className="spacer is-playground"
+    style={
+      Object {
+        "display": "inline-block",
+        "height": 0,
+        "width": 0,
+      }
+    }
+  />
+</div>
+`;
+
+exports[`Storyshots Layout/Spacer/Default Sizes 1`] = `
+<div
+  style={
+    Object {
+      "alignContent": "flex-start",
+      "display": "flex",
+      "flexDirection": "row",
+      "flexWrap": "wrap",
+      "gap": "10px 30px",
+      "height": "100%",
+      "justifyContent": "flex-start",
+      "maxHeight": "auto",
+    }
+  }
+>
+  <div
+    className="spacer is-playground"
+    style={
+      Object {
+        "display": "inline-block",
+        "height": 0,
+        "width": 0,
+      }
+    }
+  />
+  <div
+    className="spacer is-playground"
+    style={
+      Object {
+        "display": "inline-block",
+        "height": 5,
+        "width": 5,
+      }
+    }
+  />
+  <div
+    className="spacer is-playground"
+    style={
+      Object {
+        "display": "inline-block",
+        "height": 15,
+        "width": 15,
+      }
+    }
+  />
+  <div
+    className="spacer is-playground"
+    style={
+      Object {
+        "display": "inline-block",
+        "height": 20,
+        "width": 20,
+      }
+    }
+  />
+  <div
+    className="spacer is-playground"
+    style={
+      Object {
+        "display": "inline-block",
+        "height": 40,
+        "width": 40,
+      }
+    }
+  />
+</div>
+`;

package/layout/Spacer/components/Horizontal/Horizontal.js

@@ -0,0 +1,43 @@
+import React from 'react'
+import PropTypes from 'prop-types'
+import { mapSize } from '../../helpers'
+
+import styles from '../../Spacer.module.css'
+import withStyles from '../../../../hocs/withStyles'
+
+export const Horizontal = ({
+  getStyles,
+  size,
+  height,
+  maxHeight,
+  isPlayground,
+}) => (
+  <div
+    className={getStyles('spacer', 'horizontal', {
+      'is-playground': isPlayground,
+    })}
+    style={{
+      height,
+      maxHeight,
+      width: mapSize(size),
+    }}
+  />
+)
+
+Horizontal.propTypes = {
+  getStyles: PropTypes.func.isRequired,
+  size: PropTypes.string,
+  isPlayground: PropTypes.bool,
+  height: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
+  maxHeight: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
+}
+
+Horizontal.defaultProps = {
+  size: 'none',
+  height: '100%',
+  maxHeight: 'auto',
+  isPlayground: false,
+  getStyles: () => {},
+}
+
+export default withStyles(styles)(Horizontal)