How to use the reakit.styled function in reakit

import Blockquote from "../elements/Blockquote";

const StyledParagraph = styled(Paragraph)`
  line-height: 1.5;
  @media (max-width: 768px) {
    padding: 0 16px;
  }
`;

const StyledHeading = styled(Heading)`
  @media (max-width: 768px) {
    padding: 0 16px;
  }
`;

const StyledList = styled(List)`
  list-style: initial;
  padding-left: 2em;
  li {
    line-height: 1.5;
  }
`;

const Anchor = ({ href, ...props }) => {
  if (/^(http|www)/.test(href)) {
    return (
      
        {props.children}
        
      
    );
  }

import React from "react";
import { NavLink } from "react-router-dom";
import { styled, Grid, List, Link, Input } from "reakit";
import { prop, ifProp } from "styled-tools";
import MenuContainer from "../containers/MenuContainer";

const Wrapper = styled(Grid)`
  grid-gap: 16px;
  align-content: start;
`;

const MenuList = styled(List)`
  ${List} {
    ${ifProp("alwaysVisible", "display: block !important")};
  }

  ${List.Item} {
    margin: 0;
  }
`;

const SectionLink = styled(Link)`
  display: block;
  line-height: 1.75;
  font-weight: 400;
  margin: 0;
  font-size: 1em;
  color: ${prop("theme.black")};

import React from "react";
import { NavLink } from "react-router-dom";
import { styled, Grid, List, Link, Input } from "reakit";
import { prop, ifProp } from "styled-tools";
import MenuContainer from "../containers/MenuContainer";

const Wrapper = styled(Grid)`
  grid-gap: 16px;
  align-content: start;
`;

const MenuList = styled(List)`
  ${List} {
    ${ifProp("alwaysVisible", "display: block !important")};
  }

  ${List.Item} {
    margin: 0;
  }
`;

const SectionLink = styled(Link)`
  display: block;

import React from "react";
import { styled, Grid, Heading, Inline } from "reakit";
import { Link } from "react-router-dom";
import LibraryBooksIcon from "react-icons/lib/md/library-books";
import CodeIcon from "react-icons/lib/go/code";
import ButtonPrimary from "../elements/ButtonPrimary";
import ButtonOutline from "../elements/ButtonOutline";
import ContentWrapper from "../elements/ContentWrapper";
import ButtonRounded from "../elements/ButtonRounded";
import HeroGitHubButton from "./HeroGitHubButton";
import track from "../utils/track";
import IconOnLeft from "../elements/IconOnLeft";

const Wrapper = styled(ContentWrapper)`
  display: grid;
  grid-template:
    "text" 160px
    "buttons" auto / min-content;
  grid-gap: 50px 30px;
  max-width: 768px;
  padding: 0 100px;
  place-items: center;
  align-content: baseline;

  @media (max-width: 768px) {
    padding: 0 20px;
    grid-gap: 30px;
    grid-template:
      "text"
      "buttons";

* Licensed under the Apache License, Version 2.0 (the "License");
 * you may not use this file except in compliance with the License.
 * You may obtain a copy of the License at
 *
 *      http://www.apache.org/licenses/LICENSE-2.0
 *
 * Unless required by applicable law or agreed to in writing, software
 * distributed under the License is distributed on an "AS IS" BASIS,
 * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
 * See the License for the specific language governing permissions and
 * limitations under the License.
 * =====
 */
import { styled } from 'reakit';

export const ListItem = styled('li')`
    font-family: lato;
    text-align: left;
    list-style-type: none;
    color: #706f70;

    padding: 16px;

    i {
        padding: 0px 8px;
        display: inline;
        position: relative;
        bottom: 2px;
    }
`;

import PropTypes from 'prop-types'
import { styled, List as BaseList } from 'reakit'

const List = styled(BaseList)``

List.propTypes = {
  ...List.propTypes,
  children: PropTypes.node,

  ordered: PropTypes.bool,
  unordered: PropTypes.bool
}

List.defaultProps = {}

export default List

import React from "react";
import PropTypes from "prop-types";
import { styled, Flex, Block } from "reakit";
import Preview from "./Preview";
import StateContainer from "../containers/StateContainer";
import EditorWithTabs from "./EditorWithTabs";

const Wrapper = styled(Flex)`
  flex-direction: column;
  margin: 2em 0 1em;
`;

const PreviewWrapper = styled(Block)`
  padding: 16px;
  background-color: rgba(0, 0, 0, 0.05);
  max-width: 100vw;
`;

const Playground = ({ code, evalInContext, ...props }) => (
  
    {({ state, setState }) => (

import React from "react";
import { styled, Grid, Heading } from "reakit";
import { Link } from "react-router-dom";
import LibraryBooksIcon from "react-icons/lib/md/library-books";
import CodeIcon from "react-icons/lib/go/code";
import ButtonPrimary from "../elements/ButtonPrimary";
import ButtonSecondary from "../elements/ButtonSecondary";
import LogoSymbol from "../elements/LogoSymbol";
import ContentWrapper from "../elements/ContentWrapper";
import ButtonRounded from "../elements/ButtonRounded";
import HeroGitHubButton from "./HeroGitHubButton";

const Wrapper = styled(ContentWrapper)`
  display: grid;
  grid-template:
    "logo text" 160px
    "buttons buttons" auto / 160px 1fr;
  grid-gap: 50px 30px;
  max-width: 768px;
  padding: 0 100px;
  place-items: center;
  align-content: baseline;

  @media (max-width: 768px) {
    padding: 0 20px;
    grid-gap: 30px;
    grid-template:
      "logo" 100px
      "text"

import PropTypes from 'prop-types'
import { styled, Box, Button as BaseButton } from 'reakit'
import { theme, ifProp } from 'styled-tools'

import { Icon } from '../Icon/Icon'
import withEnumProps from '../withEnumProps'

const Button = styled(BaseButton)`
  ${Icon} {
    margin-left: ${ifProp('rightIcon', theme('base.spaceHalf'), 0)};
    margin-right: ${ifProp('rightIcon', 0, theme('base.spaceHalf'))};
  }
`

Button.propTypes = {
  ...Box.propTypes,
  children: PropTypes.node,

  primary: PropTypes.bool,
  secondary: PropTypes.bool,
  success: PropTypes.bool,
  warning: PropTypes.bool,
  danger: PropTypes.bool,

import React from "react";
import { styled, Grid } from "reakit";
import { NavLink } from "react-router-dom";
import { prop } from "styled-tools";
import StyleguidistContainer from "../containers/StyleguidistContainer";

const Navigation = styled(Grid.as("nav"))`
  grid-auto-flow: column;
  grid-gap: 20px;
  font-size: 20px;
  height: 100%;
`;

const Link = styled(NavLink)`
  display: flex;
  align-items: center;
  padding-top: 5px;
  border-bottom: 5px solid transparent;
  color: ${prop("theme.black")};
  text-decoration: none;
  &:hover {
    border-color: ${prop("theme.pinkLight")};
  }