How to use the preact-emotion.div function in preact-emotion

background-color: transparent;
    border: 1px solid var(--border-color);
    border-radius: 0;
    height: 1.6em;
    color: var(--font-color);
    font-size: var(--font-size);
  }
`

const DialogClose = styled.span`
  position: absolute;
  top: 1em;
  right: 1em;
`

const Checkbox = styled.div`
  user-select: none;

  /* Base for label styling */
  [type='checkbox'] {
    position: absolute;
    left: -9999px;
  }

  label {
    position: relative;
    padding-right: 2em;
    cursor: pointer;
  }

  /* checkbox aspect */
  label:before {

}

const darkTheme = {
  backgroundColor: '#022B3A',
  fontColor: '#CACED1',
  borderColor: '#1F7A8C',
  linkColor: '#1F7A8C',
  dialogBackground: 'rgba(0, 0, 0, 0.7)'
}

const themes = {
  light: lightTheme,
  dark: darkTheme
}

const Theme = styled.div`
  --background-color: ${({ theme }) => themes[theme].backgroundColor};
  --font-color: ${({ theme }) => themes[theme].fontColor};
  --border-color: ${({ theme }) => themes[theme].borderColor};
  --link-color: ${({ theme }) => themes[theme].linkColor};

  --dialog-background: ${({ theme }) => themes[theme].dialogBackground};
  --font-size: 16px;

  font-size: var(--font-size);
  font-family: -apple-system, sans-serif;
  color: var(--font-color);
  background-color: var(--background-color);

  /* Believe me, it's ok */
  a,
  a:visited,

import { h, Component } from 'preact' // eslint-disable-line no-unused-vars
import styled from 'preact-emotion'
import { createSelector, createStructuredSelector } from 'reselect'
import { SpeakerNotes } from './SpeakerNotes'
import { Consumer } from '../controlApp'
import { PresentationFrame } from './PresentationFrame'
import { Controls } from './Controls'
import { Bookmarklet } from './Bookmarklet'

const BlocksContainer = styled.div`
  display: flex;
  flex-direction: column;
  height: var(--blocks-height);

  & > * {
    width: 100%;
    border-top: 2px solid var(--border-color);
    overflow: scroll;
    height: calc(var(--blocks-height) / ${(props) => props.children.length});
  }
`

const BlockContainer = styled.div`
  order: ${(props) => props.order};
  flex-grow: 1;
  display: ${(props) => (props.order < 0 ? 'none' : 'block')};

content: 'delete';
    font-weight: bold;
    font-size: 3em;
    font-family: 'Material Icons';
    opacity: 0.3;

    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);

    z-index: -1;
  }
`

const DraggableItem = styled.div`
  height: 3em;
  line-height: calc(3em - 2px);
  text-align: center;
  border: 1px solid var(--border-color);
`

const swap = (arr, a, b) => {
  const newArr = arr.slice()
  const indexA = arr.indexOf(a)
  const indexB = arr.indexOf(b)

  newArr[indexA] = b
  newArr[indexB] = a

  return newArr
}

${sharedCss};
    background: ${rgba(COLOR_ACCENT, .05)};
    border: 0;
    position: sticky;
    top: 0;
    font-family: 'Source Code Pro', Consolas, Monaco, monospace;
    font-size: inherit;
    max-height: 100vh;

    @media all and (max-width: 500px) {
        height: 300px;
        position: relative;
    }
`;

const Compiled = styled.div`
    ${sharedCss};
    padding-left: 2rem;
    padding-right: 1rem;
    overflow: auto;
    overflow-x: hidden;
`;

const ShinyButton = styled.button`
    background: #444;
    color: #DDD;
    cursor: pointer;
    font: inherit;
    transition: background 200ms ease;

    &:hover,
    &:focus {

import { h } from 'preact'
import styled from 'preact-emotion'

const Container = styled.div`
  height: var(--blocks-height);
  text-align: center;
  font-size: 6vh;

  > a {
    display: block;
    width: 100%;
    height: 100%;
    line-height: calc(100vh - var(--header-height));
  }
`

export const bookmarkletUrl = (url) =>
  `javascript:(function()%7Bconst%20loadScript%20%3D%20(src)%20%3D%3E%20new%20Promise((resolve%2C%20reject)%20%3D%3E%20%7Bconst%20script%20%3D%20document.createElement('script')%3Bscript.src%20%3D%20src%3Bscript.onload%20%3D%20resolve%3Bscript.onerror%20%3D%20reject%3Bdocument.head.appendChild(script)%3B%7D)%3BloadScript("${url}/plugin/remeal.js").then(()%20%3D%3E%20initRemeal("${url}", true))%7D)()`

export const Bookmarklet = ({ url }) => (

import {
  map,
  mapTo,
  tap,
  takeUntil,
  switchMap,
  switchMapTo,
  throttleTime
} from 'rxjs/operators'
import { Subject } from 'rxjs/Subject'
import { wait } from '../utils/wait'
import { POINTER_MOVE_EVENT, POINTER_STOP_EVENT } from '../../constants'
import { sendCommand } from '../services/socket'
import { calculateCircle } from '../../helpers/calculateCircle'

const Container = styled.div`
  position: absolute;
  top: 0;
  right: 0;
  height: 100%;
  width: 100%;
`

const Layer = styled.svg`
  height: 100%;
  width: 100%;
`

const Overlay = styled.path`
  fill: rgba(0, 0, 0, 0.5);
  fill-rule: evenodd;
  stroke: none;

import styled from "preact-emotion";

export const Wrapper = styled.div`
  padding: 1em;
  width: 100%;
  max-width: 64em;
  margin: 0 auto;
`;

export const H1 = styled.h1`
  color: #333;
  text-transform: uppercase;
  text-align: center;
  margin-top: 0;
`;

export const H2 = styled.h2`
  text-transform: uppercase;
  margin: 0 0 0.5em;

import { h, Component } from 'preact'
import styled from 'preact-emotion'
import { createStructuredSelector } from 'reselect'
import { parseUrl } from '../utils/parseUrl'
import { PresentationPointer } from './PresentationPointer'
import { Consumer } from '../controlApp'

const Iframe = styled.iframe`
  height: 100%;
  width: 100%;
  border: none;
`

const Container = styled.div`
  height: 100%;
  width: 100%;
  position: relative;
  overflow: hidden;
`

const pointerSelector = createStructuredSelector({
  pointer: (state) => state.config.pointer,
  ratio: (state) => state.config.ratio
})

export class PresentationFrame extends Component {
  shouldComponentUpdate({ url }) {
    const { host, pathname } = parseUrl(url)
    const { host: oldHost, pathname: oldPath } = parseUrl(this.props.url)

const Container = styled.div`
  display: flex;
  align-content: stretch;
  align-items: stretch;
  height: 100%;
`

const Button = styled.div`
  text-align: center;
  border-top: ${(props) =>
    props.borderTop ? '2px solid var(--border-color)' : 'none'};
  font-size: 5vh;
`

const Column = styled.div`
  width: ${(props) => props.width};
  border-right: ${(props) =>
    props.mode === 'left' ? '2px solid var(--border-color)' : 'none'};

  > ${Button} {
    --height: calc(100% / ${(props) => props.children.length});
    height: var(--height);

    i {
      display: inline-block;
      position: relative;
      top: 50%;
      transform: translateY(-50%);
    }
  }
`