@emotion/core#Global JavaScript Examples

render() {
    const { children, location } = this.props

    const { isDarkThemeActive } = this.state

    const currentActiveTheme = isDarkThemeActive ? darkTheme : lightTheme

    return (
      <div>
        <Global styles={baseStyles} />
        <Header
          location={location}
          isDarkThemeActive={isDarkThemeActive}
          toggleActiveTheme={this.toggleActiveTheme}
        />
        <EmotionThemeProvider theme={currentActiveTheme}>
          {children}
        </EmotionThemeProvider>
      </div>
    )
  }

function ComponentPreviewContent({
  window,
  document,
  hasBodyMargin,
  bg,
  setDocument,
  containerRef,
  highlightedComponents,
}) {
  useEffect(() => {
    if (setDocument) {
      setDocument(document);
    }
  }, [setDocument, document]);

  return (
    <BasisProvider theme={defaultTheme} window={window}>
      {!hasBodyMargin && (
        <Global
          styles={{
            body: {
              margin: 0,
            },
          }}
        />
      )}
      <BackgroundProvider value={bg ?? null}>
        <LivePreview
          Component={LivePreviewWrapper}
          containerRef={containerRef}
          highlightedComponents={highlightedComponents}
        />
      </BackgroundProvider>
    </BasisProvider>
  );
}

Layout = ({ children }) => {
  return (
    <ThemeProvider theme={theme}>
      <CSSReset />
      <Global styles={globalStyles} />
      {children}
    </ThemeProvider>
  )
}

render() {
    const { children, location } = this.props;

    const { isDarkThemeActive } = this.state;

    const currentActiveTheme = isDarkThemeActive ? darkTheme : lightTheme;

    return (
      <div>
        <Global styles={baseStyles} />
        <Header
          location={location}
          isDarkThemeActive={isDarkThemeActive}
          toggleActiveTheme={this.toggleActiveTheme}
        />
        <EmotionThemeProvider theme={currentActiveTheme}>{children}</EmotionThemeProvider>
      </div>
    );
  }

Sidebar = React.forwardRef(
  ({menus, query, handleChange, onClick, open}, ref) => {
    const currentDocRef = useRef();
    const {
      menuDisplayName = {},
      themeConfig: {menu: {search} = {}} = {},
    } = useConfig();
    const currentDoc = useCurrentDoc();

    useEffect(() => {
      if (ref.current && currentDocRef.current) {
        ref.current.scrollTo(0, currentDocRef.current.offsetTop);
      }
    }, [ref]);

    return (
      <Container>
        <Box onClick={onClick} sx={styles.overlay({open})}>
          {open && <Global styles={styles.global} />}
        </Box>
        <Box
          className="sidebar"
          ref={ref}
          sx={{...styles.wrapper({open}), px: 0}}
          data-testid="sidebar"
        >
          <div>
            {search !== false ? (
              <SearchContainer>
                <NavSearch
                  placeholder="Type to search..."
                  value={query}
                  onChange={handleChange}
                />
              </SearchContainer>
            ) : null}
            {menus &&
              Object.keys(menus).map((key) => (
                <Group key={key}>
                  {key !== NO_GROUP ? <Label>{key}</Label> : null}
                  {(menus[key] || []).map((menu) => {
                    if (!menu) return null;
                    if (!menu.route) {
                      return (
                        <div key={menu.id} className="nav-group">
                          <NavGroup item={menu} sidebarRef={ref} />
                        </div>
                      );
                    }
                    if (menu.route === currentDoc.route) {
                      return (
                        <NavLink key={menu.id} item={menu} ref={currentDocRef}>
                          {get(menu.name, menuDisplayName) || menu.name}
                        </NavLink>
                      );
                    }
                    return (
                      <NavLink key={menu.id} item={menu}>
                        {get(menu.name, menuDisplayName) || menu.name}
                      </NavLink>
                    );
                  })}
                </Group>
              ))}
          </div>
        </Box>
      </Container>
    );
  },
)

Sidebar = React.forwardRef((props, ref) => {
  const [query, setQuery] = useState('')
  const menus = useMenus({ query })
  const currentDoc = useCurrentDoc()
  const currentDocRef = useRef()
  const handleChange = ev => {
    setQuery(ev.target.value)
  }
  useEffect(() => {
    if (ref.current && currentDocRef.current) {
      ref.current.scrollTo(0, currentDocRef.current.offsetTop)
    }
  }, [])
  return (
    <>
      <Box onClick={props.onClick} sx={styles.overlay(props)}>
        {props.open && <Global styles={styles.global} />}
      </Box>
      <Box ref={ref} sx={styles.wrapper(props)} data-testid="sidebar">
        <div sx={{ boxSizing: 'border-box', width: 300, paddingX: 32 }}>
          <NavSearch
            placeholder="Type to search..."
            value={query}
            onChange={handleChange}
          />
          {menus &&
            menus.map(menu => {
              if (!menu.route)
                return <NavGroup key={menu.id} item={menu} sidebarRef={ref} />
              if (menu.route === currentDoc.route) {
                return (
                  <NavLink key={menu.id} item={menu} ref={currentDocRef}>
                    {menu.name}
                  </NavLink>
                )
              }
              return (
                <NavLink key={menu.id} item={menu}>
                  {menu.name}
                </NavLink>
              )
            })}
        </div>
      </Box>
    </>
  )
})

GlobalStyles = () => {
  const theme = useTheme()

  return (
    <Fragment>
      {/* <link rel='stylesheet' href='https://unpkg.com/@fortawesome/[email protected]/styles.css' integrity='sha384-bM49M0p1PhqzW3LfkRUPZncLHInFknBRbB7S0jPGePYM+u7mLTBbwL0Pj/dQ7WqR' crossOrigin='anonymous' /> */}
      <Global styles={css(resetStyles)} />
      <Global styles={css`
        * {
          box-sizing: border-box;
          ${smoothTransitions({ duration: '0.1s' })};
        }

        html {
          ${theme.font('body')};
          font-size: 16px;

          ${theme.media.when({ minW: 'desktop' })} {
            font-size: 18px;
          }
        }

        a {
          cursor: pointer;
          text-decoration: none;
          border-bottom: 1px solid transparent;
        }

        h1, h2, h3 {
          ${theme.font('header')};
          margin: 1em 0;
          font-weight: bolder;
          line-height: 1em;
        }

        h1 {
          font-size: 2.1rem;
          margin: 1rem 0;
        }

        h2 {
          font-size: 1.5rem;
        }

        h3 {
          font-size: 1.2rem;
        }
      `} />
    </Fragment>
  )
}

render() {
    const { Component, pageProps } = this.props;
    return (
      <ThemeProvider theme={theme}>
        <Global
          styles={css`
            @import url('https://fonts.googleapis.com/css2?family=Inconsolata:wght@400;500;700&display=swap');

            @font-face {
              font-family: 'FT Base';
              src: url('/fonts/FTBase-Bold.woff2') format('woff2'),
                url('/fonts/FTBase-Bold.woff') format('woff');
              font-weight: bold;
              font-style: normal;
            }

            @font-face {
              font-family: 'FT Base';
              src: url('/fonts/FTBase-Regular.woff2') format('woff2'),
                url('/fonts/FTBase-Regular.woff') format('woff');
              font-weight: normal;
              font-style: normal;
            }

            @font-face {
              font-family: 'FT Base';
              src: url('/fonts/FTBase-Medium.woff2') format('woff2'),
                url('/fonts/FTBase-Medium.woff') format('woff');
              font-weight: 500;
              font-style: normal;
            }

            html,
            body {
              background: 'red';
            }
          `}
        />
        <TinaProvider cms={this.cms}>
          <TinacmsGithubProvider
            onLogin={enterEditMode}
            onLogout={exitEditMode}
            error={pageProps.error}
          >
            <TinaStyles />
            <Component {...pageProps} />
          </TinacmsGithubProvider>
        </TinaProvider>
      </ThemeProvider>
    );
  }

export default function Layout({ children, data, location }) {
  return (
    <>
      <Helmet
        meta={[
          {
            name: "description",
            content:
              "Your web3 username, a name for all your cryptocurrency addresses, and decentralised websites.",
          },
          {
            name: "keywords",
            content:
              "ENS, Ethereum, Ethereum Name Service, .eth domains, blockchain domains",
          },
          {
            name: "twitter:card",
            content: "summary",
          },
          {
            name: "twitter:title",
            content: "Ethereum Name Service",
          },
          {
            property: "og:image",
            content: `https://ens.domains${twitter}`,
          },
        ]}
        title={getTitle(location.pathname)}
        link={[
          { rel: "shortcut icon", type: "image/x-icon", href: `${favicon}` },
        ]}
      />
      <Global
        styles={css`
          html, body, #___gatsby, #gatsby-focus-wrapper {
            height: ${location?.pathname === '/governance' ? '100%' : 'initial'};
          }
          body {
            font-family: Overpass;
          }
          #gatsby-focus-wrapper {
            height: 100vh;
          }
        `}
      />
      {children}
    </>
  )
}

Layout = ({children, /*pageContext = {},*/ doc = {}, ...rest}) => {
  const {
    themeConfig: {mainContainer: {fullscreen, align = 'center'} = {}},
  } = useConfig();
  const [query, setQuery] = useState('');
  const [open, setOpen] = useState(false);
  const ref = useRef();
  const menus = useExtendedMenus({query});

  const handleChange = (ev) => {
    setQuery(ev.target.value);
  };

  const {updated} = doc.value || {};
  const mainStyles = {
    marginLeft: align !== 'left' ? 'auto' : 0,
    marginRight: align !== 'right' ? 'auto' : 0,
    ...(fullscreen ? {maxWidth: 'none'} : undefined),
  };

  return (
    <Flex sx={{'& > div': {flex: '1 1 auto'}}} data-testid="layout">
      <Global styles={globalStyles} />
      <Box sx={styles.main}>
        <Header onOpen={() => setOpen((s) => !s)} />
        <div sx={styles.wrapper}>
          <Sidebar
            ref={ref}
            open={open}
            menus={menus}
            handleChange={handleChange}
            onFocus={() => setOpen(true)}
            onBlur={() => setOpen(false)}
            onClick={() => setOpen(false)}
          />
          <MainContainer
            style={mainStyles}
            data-testid="main-container"
            doc={doc}
            {...rest}
          >
            <Flex
              sx={{
                width: '100%',
                justifyContent: 'stretch',
                [`@media screen and (max-width: ${breakpoints.desktop}px)`]: {
                  flexDirection: 'column',
                },
              }}
            >
              <Content>
                <div>{children}</div>
                <Footer updated={updated} menus={menus} />
              </Content>
              <NavHeadings />
            </Flex>
          </MainContainer>
        </div>
      </Box>
    </Flex>
  );
}

Layout = ({ children, title, description }) => (
  <Blockstack>
    <ThemeProvider theme={theme}>
      <CartContextProvider>
        <Fragment>
          <Global
            styles={css`
          *,
          *:before,
          *:after {
            box-sizing: inherit;
          }
          html {
            text-rendering: optimizeLegibility;
            overflow-x: hidden;
            box-sizing: border-box;
            -ms-overflow-style: scrollbar;
            -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
            -webkit-font-smoothing: antialiased;
            -moz-osx-font-smoothing: grayscale;
          }
          html,
          body {
            width: 100%;
            height: 100%;
            margin: 0;
            padding: 0;
          }

          body {
            display: flex;
            flex-direction: column;
            min-height: 100vh;
          }
          a {
            color: ${theme.colors.link};
            transition: color 0.5s;
            text-decoration: none;
          }
          a:hover {
            text-decoration: none;
            color: ${theme.colors.linkHover};
          }
          h1 {
            font-family: ${theme.fontFamily.heading};
          }

          ${headroom}
        `}
          />
          <SEO title={title} description={description} />
          <NavBar />
          {children}
          <Footer />
        </Fragment>
      </CartContextProvider>
    </ThemeProvider>
  </Blockstack>
)

AlgoliaEmailsItem = (props) => {
  const [showDialog, setShowDialog] = React.useState(false);
  const openDialog = () => setShowDialog(true);
  const closeDialog = () => setShowDialog(false);

  //console.log("**** props=AlgoliaEmailsItem=", props)
  return (
    <Wrapper>
      <Global
        styles={css`
        .ais-Hits-item {
          width: calc(33% - 1rem) !important;
          @media (max-width: 600px) {
            width: calc(100% - 1rem) !important;
          }
        }
        `}
      />
      {props && props.hit &&
        <>
          <Image>
            <a href={`/shops/${props.hit.emprezzoID}/`} title={props.hit.subject && props.hit.subject.toLowerCase()} target="_blank">
              {props.hit.screenshot && props.hit.screenshot != "-" &&
                <img src={props.hit.screenshot} />
              }
            </a>
          </Image>

          <StyledLink href="javascript:void(0)" onClick={() => openDialog()} title={props.hit.shopName}>
            <Information>
              <ShopName>{(props.hit.shopName || "").substring(0, 22)}
                {` `}{props.hit.date}</ShopName>
              <Title>{props.hit.subject && props.hit.subject.toLowerCase().substring(0, 24)}</Title>
            </Information>
          </StyledLink>



          <StyledDialog isOpen={showDialog} onDismiss={closeDialog}>
            <button className="close-button" onClick={closeDialog} style={{ float: "right", cursor: "pointer" }}>
              <span aria-hidden>X</span>
            </button>
            <div>
              {props.hit.screenshot && props.hit.screenshot != "-" &&
                <img src={props.hit.screenshot} />
              }
              <h3 style={{ 'font-size': '1.1rem', 'margin-bottom': '9px' }}>{props.hit.subject}</h3>
              <span style={{ 'margin-bottom': '12px', 'font-style': 'italic' }}> {props.hit.date}</span>
              <div className="dialogDescription">{props.hit.description && props.hit.description}</div>
            </div>
          </StyledDialog>
        </>
      }
    </Wrapper>
  );
}

export default function() {
  const [search, setSearch] = useSearchQuery();
  const [scans] = useScans(search);
  
  const elements = [
    scans
      ? scans.length
        ? {
            key: "scans",
            element: (
              <Results
                search={search}
                clear={() => setSearch(null)}
                scans={scans}
              />
            ),
          }
        : {
            key: "no-results",
            element: (
              <ResultsTitle
                scans={[]}
                search={search}
                clear={() => setSearch(null)}
              />
            ),
          }
      : {
          key: "loading",
          element: "",
        },
  ];

  return (
    <Container>
      <Global
        styles={{
          body: {
            overflowY: "scroll",
          },
        }}
      />
      <div style={{ position: "relative" }}>
        <AppHeader>
          <img src={Logo} alt="" />

          <AppIntro>
            <FormattedMessage id="app-intro" />
          </AppIntro>
        </AppHeader>

        <Search search={search} onSearch={setSearch} />

        <br />

        <div key={"result"}>{elements[0].element}</div>
      </div>
    </Container>
  );
}

export default function SocialCard(props) {
  return (
    <div
      style={{
        display: 'flex',
        flexDirection: 'column',
        alignItems: 'flex-start',
        boxSizing: 'border-box',
        width: 1200,
        height: 628,
        padding: 80,
        fontFamily: "'Source Sans Pro'",
        color: 'black',
        backgroundImage: `url(${image})`
      }}
    >
      <Global
        styles={css`
          ${fonts}
          svg.arrow-icon path {
            vector-effect: none;
            stroke-width: 4px;
          }
        `}
      />
      <div
        style={{
          fontSize: 32,
          fontWeight: 600,
          marginBottom: 16,
          color: 'black',
          ...smallCaps
        }}
      >
        {props.subtitle}
        {props.category && (
          <Fragment>
            {' '}
            <IconArrowRight
              className="arrow-icon"
              style={{
                width: '0.5em',
                height: '0.5em',
                verticalAlign: '0.05em'
              }}
            />{' '}
            {props.category}
          </Fragment>
        )}
      </div>
      <TextFit
        min={80}
        max={120}
        style={{
          width: '100%',
          height: 250,
          marginBottom: 'auto',
          lineHeight: 1.2,
          colors: 'black'
        }}
      >
        {props.title.replace(/\s+(\S*)$/, '\xA0$1')}
      </TextFit>
      <div>
        <svg viewBox="0 0 440.7 178.23" style={{ height: 105 }}>
          <g fill="#2d2b2d">
            <path d="M188.87 88.58v.23a36.51 36.51 0 01-73 0v-.23H98.22v33.07H82.6a12.77 12.77 0 000-14.7c-3-4.5-4.49-11.43-4.49-18.37H0c0 66.73 30.83 89.65 64.82 89.65 45.06 0 61.27-34.78 79.44-34.78 15 0 52.23 21.38 68.78 1.32 13-15.82 7.31-44.67 7.31-44.67l151.45-.12a11.52 11.52 0 008.51 5.34v2.9c-1.82.35-3.16 1.42-3.16 2.7 0 1.55 2 2.82 4.48 2.82s4.48-1.27 4.48-2.82c0-1.28-1.33-2.35-3.16-2.7v-2.93a18 18 0 006-2 21.11 21.11 0 017.2-1.9v3.28c-1.83.36-3.16 1.43-3.16 2.7 0 1.56 2 2.83 4.48 2.83s4.48-1.27 4.48-2.83c0-1.27-1.34-2.34-3.17-2.7v-3.51a102.16 102.16 0 0116.33.78v4c-1.83.36-3.16 1.42-3.16 2.7 0 1.56 2 2.83 4.48 2.83s4.48-1.27 4.48-2.83c0-1.28-1.34-2.34-3.16-2.7v-3.65c8.41 1 15.36 2.19 16.25 1a9.61 9.61 0 002-5.34s4.75.33 4.75-9.42z" />
            <path d="M152.37 121.62a32.85 32.85 0 0032.76-31h-6.58a26.26 26.26 0 01-52.36 0h-6.58a32.85 32.85 0 0032.76 31z" />
          </g>
          <g fill="#2d2b2d">
            <path d="M26.78 35.83C26.78 13.36 41.01 0 59.28 0a28.24 28.24 0 0120.75 8.7l-6.51 7.85c-3.45-3.36-7.48-6-13.86-6-12.18 0-20.37 9.45-20.37 24.86 0 15.66 7.27 25.16 21 25.16 3.82 0 7.6-1.1 9.79-3V42.76h-12.9v-10h23.86v30.28c-4.58 4.62-12.52 8.15-21.93 8.15-18.52 0-32.33-12.64-32.33-35.36zM107.54 39.82V1.29h12.18v39.48c0 15 5.59 19.87 13.9 19.87s14.2-4.92 14.2-19.87V1.29h11.71v38.56c0 22.55-10 31.37-25.91 31.37s-26.08-8.85-26.08-31.4zM188.2 1.29h12.18v68.67H188.2zM243.22 11.51h-19.77V1.29h51.82v10.25h-19.82v58.42h-12.23zM307.45 1.29h14.28l22.38 68.67h-12.86l-10.46-36.57c-2.18-7.26-4.2-15.1-6.21-22.64h-.42c-1.89 7.61-3.91 15.38-6.09 22.64l-10.54 36.54h-12.44zm-9.16 40.51h32.34v9.49h-32.31zM363.13 1.29h23.14c14.28 0 25.29 5 25.29 20.37 0 14.76-11 21.46-25.29 21.46h-11v26.84h-12.14zm21.88 32.09c9.41 0 14.53-3.91 14.53-11.72s-5.12-10.62-14.53-10.62h-9.7v22.34zm-1 6.49l8.82-7.27 21.44 37.36h-13.72z" />
          </g>
          <g fill="#2d2b2d">
            <path d="M235.17 109.19h10.28c7.61 0 12.49 2.89 12.49 9.21 0 3.95-2 7.11-5.86 8.26v.23c4.91.83 8.2 3.9 8.2 9.15 0 7.29-5.53 11-14.1 11h-11zm9.19 16.68c7.77 0 10.92-2.74 10.92-7.21 0-5.31-3.66-7.26-10.61-7.26h-6.85v14.47zm1.1 19c7.54 0 12.17-2.72 12.17-8.79 0-5.45-4.43-8-12.17-8h-7.64v16.83zM271.55 133.29c0-9.24 5.76-14.55 12.39-14.55s12.4 5.31 12.4 14.55-5.76 14.44-12.4 14.44-12.39-5.27-12.39-14.44zm22.12 0c0-7.27-4.15-12.31-9.73-12.31s-9.73 5-9.73 12.31 4.16 12.2 9.73 12.2 9.73-4.89 9.73-12.2zM308.06 133.29c0-9.24 5.76-14.55 12.39-14.55s12.4 5.31 12.4 14.55-5.76 14.44-12.4 14.44-12.39-5.27-12.39-14.44zm22.12 0c0-7.27-4.15-12.31-9.73-12.31s-9.72 5-9.72 12.31 4.15 12.2 9.72 12.2 9.73-4.89 9.73-12.2zM346.32 105.72h2.52v30.48h.12l13.63-16.73h2.93l-9 10.93 10.5 16.68h-2.83l-9.16-14.79-6.19 7.27v7.52h-2.52z" />
          </g>
        </svg>
      </div>
    </div>
  );
}

export default function GlobalStyles() {
  return (
    <Global
      styles={css`
        @import url("https://fonts.googleapis.com/css2?family=Solway:wght@400&family=Finger+Paint&display=swap");

        :root {
          --gradient: linear-gradient(101deg, #78e4ff, #ff48fa);
          --gradientSecondary: linear-gradient(to right, #f7ff00, #db36a4);
        }
        *,
        *:before,
        *:after {
          box-sizing: border-box;
          padding: 0;
          margin: 0;
        }
        html {
          background: #111;
          color: #fff;
          font-family: "Solway", serif;
          scroll-behavior: smooth;
        }

        h1,
        h2,
        h3,
        h4 {
          font-family: "Finger Paint", cursive;
          text-align: center;
        }
        p {
          text-align: justify;
          margin: 1.8rem;
          font-size: 1.3rem;
          overflow-x: auto;
        }
        li {
          margin: 1rem;
          font-size: 1.1rem;
        }
        section {
          margin: 3rem 0rem;
          display: flex;
          align-items: center;
          justify-content: center;
          flex-direction: column;
        }
      `}
    />
  )
}

export default function SocialCard(props) {
  return (
		<div
			style={{
				display: "flex",
				flexDirection: "column",
				alignItems: "flex-start",
				boxSizing: "border-box",
				width: 1200,
				height: 628,
				padding: 80,
				fontFamily: "'Source Sans Pro'",
				color: "white",
				backgroundImage: `url(${image})`,
			}}
		>
			<Global
				styles={css`
					${fonts}
					svg.arrow-icon path {
						vector-effect: none;
						stroke-width: 4px;
					}
				`}
			/>
			<div
				style={{
					fontSize: 32,
					fontWeight: 600,
					marginBottom: 16,
					color: colors.primaryLight,
					...smallCaps,
				}}
			>
				{props.subtitle}
				{props.category && (
					<Fragment>
						{" "}
						<IconArrowRight
							className="arrow-icon"
							style={{
								width: "0.5em",
								height: "0.5em",
								verticalAlign: "0.05em",
							}}
						/>{" "}
						{props.category}
					</Fragment>
				)}
			</div>
			<TextFit
				min={80}
				max={120}
				style={{
					width: "100%",
					height: 250,
					marginBottom: "auto",
					lineHeight: 1.2,
					colors: colors.text1,
				}}
			>
				{props.title.replace(/\s+(\S*)$/, "\xA0$1")}
			</TextFit>
			
			
			<TextFit
				min={80}
				max={120}
				style={{
					width: "100%",
					height: 250,
					marginBottom: "auto",
					lineHeight: 1.2,
					colors: "orange",
				}}
			>
				Firecamp
			</TextFit>

		</div>
	);
}

export default function GlobalStyle() {
  const theme = useTheme();

  return (
    <Global
      styles={css`
        @import url("https://fonts.googleapis.com/css?family=Roboto&display=swap");
        @import url("https://fonts.googleapis.com/css?family=Inter&display=swap");

        *,
        *::after,
        *::before {
          margin: 0;
          padding: 0;
          box-sizing: border-box;
        }

        *::selection {
          background: ${lighten("0.35", "#d6d6d6")}!important;
        }

        body {
          font-size: 16px;
          font-family: "Inter", sans-serif;
          background-color: #0e0e0e;
          text-rendering: optimizelegibility;
        }

        h1 {
          font-size: 32px;
          color: ${theme.colors.background};
          font-weight: normal;
          margin-bottom: 24px;
        }

        h2 {
          font-size: 24px;
        }

        h3 {
          font-size: 18px;
        }

        h4 {
          font-size: 16px;
        }

        h2,
        h3,
        h4,
        h5,
        h6 {
          color: #d6d6d6;
          margin: 24px 0 16px 0;
          font-weight: normal;
        }

        p {
          color: #d6d6d6;
          font-size: 16px;
          line-height: 28px;
          margin-bottom: 16px;
          font-weight: 400;
        }

        code.inline-code {
          display: inline-block;
          vertical-align: middle;
          line-height: 1;
          padding: 0.2em 0.2em 0.3em 0.2em;
          background-color: #44475a;
          color: rgba(248, 248, 242);
          font-size: 14px;
          border-radius: 3px;
          font-feature-settings: "clig" 0, "calt" 0;
          font-variant: no-common-ligatures no-discretionary-ligatures
            no-historical-ligatures no-contextual;
        }

        a {
          color: #d6d6d6;
          font-weight: bold;

          &:hover {
            color: #5991c1;
            transition: all 100ms cubic-bezier(0.4, 0, 0.2, 1) 0s;
            opacity: 1;
          }
        }

        blockquote {
          margin: 0;

          p {
            padding: 1rem;
            background: #232323;
            border-radius: 5px;
          }
        }

        hr {
          border: 0;
          height: 0;
          border-top: 1px solid rgba(0, 0, 0, 0.1);
          border-bottom: 1px solid rgba(255, 255, 255, 0.3);
        }

        table {
          border-collapse: collapse;
          border-spacing: 0;
          width: 100%;
          margin-bottom: 16px;
          color: #444;
        }

        th,
        td {
          text-align: left;
          padding: 12px;
        }

        tr:nth-of-type(2n) td {
          background-color: ${theme.colors.sidebar.itemActive};
        }

        tr {
          background-color: #ffffff;
        }

        iframe {
          margin-bottom: 16px;
        }

        img {
          max-width: 100%;
        }

        ul,
        ol {
          color: #d6d6d6;
          padding-left: 15px;
          margin-bottom: 16px;

          li {
            line-height: 28px;
          }
        }

        .gatsby-highlight {
          position: relative;

          .token {
            font-style: normal !important;
          }
        }

        pre[class*="language-"]::before {
          background: #d9d7e0;
          border-radius: 0 0 4px 4px;
          color: #232129;
          font-size: 12px;
          font-family: SFMono-Regular, Menlo, Monaco, Consolas,
            "Liberation Mono", "Courier New", monospace;
          letter-spacing: 0.075em;
          line-height: 1;
          padding: 0.25rem 0.5rem;
          position: absolute;
          left: 1rem;
          text-align: right;
          text-transform: uppercase;
          top: 0;
        }

        pre[class*="language-"] code {
          font-family: SFMono-Regular, Menlo, Monaco, Consolas,
            "Liberation Mono", "Courier New", monospace;
          font-variant: no-common-ligatures no-discretionary-ligatures
            no-historical-ligatures no-contextual;
        }

        pre[class~="language-js"]::before,
        pre[class~="language-javascript"]::before {
          content: "js";
          background: #f7df1e;
        }

        pre[class~="language-jsx"]::before {
          content: "jsx";
          background: #61dafb;
        }

        pre[class~="language-typescript"]::before,
        pre[class~="language-ts"]::before {
          content: "ts";
          background: #294e80;
          color: #fff;
        }

        pre[class~="language-tsx"]::before {
          content: "tsx";
          background: #294e80;
          color: #fff;
        }

        pre[class~="language-graphql"]::before {
          content: "GraphQL";
          background: #e10098;
          color: #fff;
        }

        pre[class~="language-html"]::before {
          content: "html";
          background: #005a9c;
          color: #fff;
        }

        pre[class~="language-css"]::before {
          content: "css";
          background: #ff9800;
          color: #fff;
        }

        pre[class~="language-mdx"]::before {
          content: "mdx";
          background: #f9ac00;
          color: #fff;
        }

        pre[class~="language-shell"]::before {
          content: "shell";
        }

        pre[class~="language-sh"]::before {
          content: "sh";
        }

        pre[class~="language-bash"]::before {
          content: "bash";
        }

        pre[class~="language-yaml"]::before {
          content: "yaml";
          background: #ffa8df;
        }

        pre[class~="language-markdown"]::before {
          content: "md";
        }

        pre[class~="language-json"]::before,
        pre[class~="language-json5"]::before {
          content: "json";
          background: linen;
        }

        pre[class~="language-diff"]::before {
          content: "diff";
          background: #e6ffed;
        }

        pre[class~="language-text"]::before {
          content: "text";
          background: #fff;
        }

        pre[class~="language-flow"]::before {
          content: "flow";
          background: #e8bd36;
        }
      `}
    />
  );
}

Sidebar = React.forwardRef((props, ref) => {
  const menus = useMenus({})
  const currentDoc = useCurrentDoc()
  const currentDocRef = useRef()
  useEffect(() => {
    if (ref.current && currentDocRef.current) {
      ref.current.scrollTo(0, currentDocRef.current.offsetTop)
    }
  }, [])

  const groupedMenu = menus.reduce((accMenu, menuItem) => {
    let group = menuItem.group;
    if (!group && Array.isArray(menuItem.menu) && menuItem.menu.length >= 1) {
      group = menuItem.menu[0].group;
    }

    if (group && accMenu.hasOwnProperty(group)) {
      accMenu[group].push(menuItem);
    } else if (group) {
      accMenu[group] = [menuItem];
    } else {
      if (accMenu.hasOwnProperty(null)) {
        accMenu[null].push(menuItem);
      } else {
        accMenu[null] = [menuItem]
      }
    }

    return accMenu;
  }, {});

  return (
    <>
      <Box onClick={props.onClick} sx={styles.overlay(props)}>
        {props.open && <Global styles={styles.global} />}
      </Box>
      <Box ref={ref} sx={styles.wrapper(props)} data-testid="sidebar">
        {
          groupedMenu &&
          Object.entries(groupedMenu).map(([group, subMenu], idx) => (
            <React.Fragment key={idx}>
              <div
                sx={{
                  fontSize: 1,
                  color: 'rgb(249, 172, 0)',
                  textTransform: 'lowercase',
                  fontVariant: 'small-caps',
                  minHeight: '15px',
                  fontWeight: 'bold',
                  letterSpacing: 'caps',
                  paddingTop: idx === 0 ? 0 : 4,
                }}
                key={idx}
              >
                {group === 'null' ? '' : group}
              </div>
              {
                subMenu.map(menu => {
                  if (!menu.route)
                    return <NavGroup key={menu.id} item={menu} sidebarRef={ref} />
                  if (menu.route === currentDoc.route) {
                    return (
                      <NavLink key={menu.id} item={menu} ref={currentDocRef}>
                        {menu.name}
                      </NavLink>
                    )
                  }
                  return (
                    <NavLink key={menu.id} item={menu}>
                      {menu.name}
                    </NavLink>
                  )
                })
              }
            </React.Fragment>
          ))
        }
      </Box>
    </>
  )
})

GlobalStyle = () => (
  <Global
    styles={css`
      *,
      *:after,
      *:before {
        box-sizing: border-box;
      }
      html {
        line-height: 1.15;
        background-color: #0c0c0c;
        -webkit-text-size-adjust: 100%;
        height: 100%;
      }
      body {
        height: 100%;
        margin: 0;
        padding: 0;
        color: rgba(255, 255, 255, 0.9);
        background-color: #0c0c0c;
        background: radial-gradient(ellipse at center, transparent 0%, transparent 40%, #0c0c0c 80%, #0c0c0c 100%),
          linear-gradient(270deg, #111111, #2c2c2c, #111111);
        background-size: 100%, 800% 800%;
        animation: ${backgroundShift} 20s ease infinite;
      }
      #__next {
        height: 100%;
      }
      main {
        display: block;
      }
      h1 {
        font-size: 2em;
        margin: 0.67em 0;
      }
      hr {
        box-sizing: content-box;
        height: 0;
        overflow: visible;
      }
      pre {
        font-family: monospace, monospace;
        font-size: 1em;
      }
      a {
        background-color: transparent;
      }
      abbr[title] {
        border-bottom: none;
        text-decoration: underline;
        text-decoration: underline dotted;
      }
      b,
      strong {
        font-weight: bolder;
      }
      code,
      kbd,
      samp {
        font-family: monospace, monospace;
        font-size: 1em;
      }
      small {
        font-size: 80%;
      }
      sub,
      sup {
        font-size: 75%;
        line-height: 0;
        position: relative;
        vertical-align: baseline;
      }
      sub {
        bottom: -0.25em;
      }
      sup {
        top: -0.5em;
      }
      img {
        border-style: none;
      }
      button,
      input,
      optgroup,
      select,
      textarea {
        font-family: inherit;
        font-size: 100%;
        line-height: 1.15;
        margin: 0;
      }
      button,
      input {
        overflow: visible;
      }
      button,
      select {
        text-transform: none;
      }
      button,
      [type="button"],
      [type="reset"],
      [type="submit"] {
        -webkit-appearance: button;
      }
      button::-moz-focus-inner,
      [type="button"]::-moz-focus-inner,
      [type="reset"]::-moz-focus-inner,
      [type="submit"]::-moz-focus-inner {
        border-style: none;
        padding: 0;
      }
      button:-moz-focusring,
      [type="button"]:-moz-focusring,
      [type="reset"]:-moz-focusring,
      [type="submit"]:-moz-focusring {
        outline: 1px dotted ButtonText;
      }
      fieldset {
        padding: 0.35em 0.75em 0.625em;
      }
      legend {
        box-sizing: border-box;
        color: inherit;
        display: table;
        max-width: 100%;
        padding: 0;
        white-space: normal;
      }
      progress {
        vertical-align: baseline;
      }
      textarea {
        overflow: auto;
      }
      [type="checkbox"],
      [type="radio"] {
        box-sizing: border-box;
        padding: 0;
      }
      [type="number"]::-webkit-inner-spin-button,
      [type="number"]::-webkit-outer-spin-button {
        height: auto;
      }
      [type="search"] {
        -webkit-appearance: textfield;
        outline-offset: -2px;
      }
      [type="search"]::-webkit-search-decoration {
        -webkit-appearance: none;
      }
      ::-webkit-file-upload-button {
        -webkit-appearance: button;
        font: inherit;
      }
      details {
        display: block;
      }
      summary {
        display: list-item;
      }
      template {
        display: none;
      }
      [hidden] {
        display: none;
      }
    `}
  />
)

AlgoliaUncommonryItem = (props) => {
  //console.log("**** props", props)
  return (
    <Wrapper>
      <Global
        styles={css`
        .ais-Hits-item {
          width: calc(50% - 1rem) !important;
          @media (min-width: 1200px) {
            width: calc(33% - 1rem) !important;
          }
          @media (max-width: 600px) {
            width: calc(100% - 1rem) !important;
          }
        }
        `}
      />
      {props && props.hit &&
        <>
          <div style={{ width: "25%" }}>
            <a href={`/shops/${props.hit.emprezzoID}/`} title={props.hit.shopName} target="_blank">
              <Image>
                <img src={getClearbitLogoURL(props.hit.url) || props.hit.shopImage || props.hit.imageURL} />
              </Image>
            </a>
          </div>
          <Information>
            <a href={`/shops/${props.hit.emprezzoID}/`} title={props.hit.shopName}
              onClick={() => {
                props.insights('clickedObjectIDsAfterSearch', { eventName: `shop ${props.hit.emprezzoID} clicked` })
              }}
            >
              <div>
                <Title>{props.hit.shopName}</Title>


                <Tags>{props.hit.shopCategory}: {props.hit.shopTags}</Tags>
                <Stats> {props.hit.priceMin && <span style={{ paddingRight: "0" }}>${Math.round(props.hit.priceMin)}-${Math.round(props.hit.priceMax)} / ${Math.round(props.hit.priceAvg)} avg</span>

                }</Stats>

                <Stats>

                  {/*
                   <b>PAY</b> {props.hit.paypal == '1' &&
                  <span  style={{paddingRight: "0.25rem"}}><FaPaypal size="14" color="#666" /></span>
                }
                {props.hit.shopifyPay == '1' &&
                  <span  style={{paddingRight: "0.25rem"}}><FaShopify size="14" color="#666" /></span>
                }
                {props.hit.applePay == '1' &&
                  <span  style={{paddingRight: "0.25rem"}}><FaApple size="14" color="#666" /></span>
                }
                {props.hit.amazonPay == '1' &&
                  <span  style={{paddingRight: "0.25rem"}}><FaAmazon size="14" color="#666" /></span>
                }
        */}
                  {props.hit.freeShipMin != null && props.hit.freeShipMin != 0 &&
                    <span><FaTruck size="14" color="#666" class="icon" title="Free shipping minimum" /> ${props.hit.freeShipMin}+</span>
                  }
                  {props.hit.freeShipMin == 0 &&
                    <span title="most orders ship free!"><FaTruck size="14" color="#666" class="icon" title="Get free shipping on most orders!" />* </span>
                  }

                  {props.hit.baseShipRate > 0 &&
                    <span> <FaBoxOpen paddingRight='2px' size="14" color="#666" class="icon" title="Shipping rates from" />${props.hit.baseShipRate}+ </span>
                  }
                  {props.hit.returnDays != null && props.hit.returnDays != "0" &&
                    <span title={`${props.hit.returnDays} day returns`}> <FaUndoAlt paddingRight='5px' size="14" color="#666" title="return days" /> {props.hit.returnDays} </span>
                  }
                  {props.hit.returnShipFree != "." && props.hit.returnShipFree == "Yes" &&
                    <span> <FaRegStar size="14" color="#666" title="Most returns ship free" /></span>
                  }




                </Stats>
                <br />
              </div>
            </a>
          </Information>
        </>
      }
    </Wrapper>
  );
}

AlgoliaProductList = ({ defaultFilter, defaultSearchTerm, itemsPerPage, hideLeftPanel, hideCTAButton, showClearFilter, facetsToShow, showSearchBox, showSearchSuggestions, searchIndexName, enableShopProductSwitch, enableCart, noResultMessage }) => {

  const [currentIndexName, setCurrentIndexName] = React.useState(searchIndexName || `empProducts`)
  const changeCurrentIndexName = (e) => { setCurrentIndexName(e.target.value); setCurrentSuggestionIndexName(getSuggestionIndex(e.target.value)); setSuggestionQuery(''); }

  const getSuggestionIndex = (mainIndexName) => {
    if (mainIndexName == 'empProducts') return ('empProducts_query_suggestions');
    if (mainIndexName == 'uncommonry') return ('uncommonry_query_suggestions')
  }
  const [currentSuggestionIndexName, setCurrentSuggestionIndexName] = React.useState(getSuggestionIndex(currentIndexName))
  const [suggestionQuery, setSuggestionQuery] = React.useState();

  const algoliaClient = algoliasearch(
    process.env.GATSBY_ALGOLIA_APP_ID,
    process.env.GATSBY_ALGOLIA_SEARCH_KEY
  );
  const searchClient = {
    search(requests) {
      if (requests.length > 0 && defaultSearchTerm) requests[0].params.query = defaultSearchTerm
      return algoliaClient.search(requests);
    },
  };
  noResultMessage = noResultMessage || `No result found`;
  enableCart = enableCart || false;
  itemsPerPage = itemsPerPage || 12;
  
  aa('init', {
    appId: process.env.GATSBY_ALGOLIA_APP_ID,
    apiKey: process.env.GATSBY_ALGOLIA_SEARCH_KEY
  });

  const [currentHitComponent, setCurrentHitComponent] = React.useState();
  React.useEffect(() => {
    if (currentIndexName == 'empProducts') setCurrentHitComponent(() => connectHitInsights(aa)(AlgoliaProductItem));
    if (currentIndexName == 'uncommonry') setCurrentHitComponent(() => connectHitInsights(aa)(AlgoliaUncommonryItem));
    if (currentIndexName == 'emails') setCurrentHitComponent(() => connectHitInsights(aa)(AlgoliaEmailsItem));
  }, [currentIndexName]);

  const AlgoliaSuggestions = ({ hit }) => {
    return (
      <a href="javascript:" onClick={() => setSuggestionQuery(hit.query)}>{hit.query}</a>
    );
  }

  return (
    <SearchWrapper>
      {!enableCart &&
        <Global
          styles={css`
            .cart-section {
              display: none;
            }
        `}
        />
      }
      <InstantSearch indexName={currentIndexName} searchClient={searchClient}>
        <VirtualSearchBox defaultRefinement={suggestionQuery} />
        {!hideLeftPanel &&
          <LeftPanel>

            {showClearFilter &&
              <ClearRefinements />
            }
            {facetsToShow && facetsToShow.indexOf("category") >= 0 &&
              <>
                <FilterHeading>Category</FilterHeading>
                <RefinementList attribute="shopCategory" showMore='true' limit='5' />
              </>
            }
            {facetsToShow && facetsToShow.indexOf("brands") >= 0 && currentIndexName != 'uncommonry' &&
              <>
                <FilterHeading>Brands</FilterHeading>
                <RefinementList attribute="shopName" showMore='true' limit='5' />
              </>
            }
            {facetsToShow && facetsToShow.indexOf("payments") >= 0 && currentIndexName == 'uncommonry' &&
              <>
                <FilterHeading>Payments</FilterHeading>
                <RefinementList
                  attribute="shopifyPay"
                  transformItems={items =>
                    items.filter(item => (item.label == '1')).map(item => ({
                      ...item,
                      label: "Shop Pay",
                    }))
                  }
                />
                <RefinementList
                  attribute="paypal"
                  transformItems={items =>
                    items.filter(item => (item.label == '1')).map(item => ({
                      ...item,
                      label: "Paypal",
                    }))
                  }
                />
                <RefinementList
                  attribute="applePay"
                  transformItems={items =>
                    items.filter(item => (item.label == '1')).map(item => ({
                      ...item,
                      label: "Apple Pay",
                    }))
                  }
                />
                <RefinementList
                  attribute="amazonPay"
                  transformItems={items =>
                    items.filter(item => (item.label == '1')).map(item => ({
                      ...item,
                      label: "Amazon Pay",
                    }))
                  }
                />
              </>
            }
            {facetsToShow && facetsToShow.indexOf("pricerangeslider") >= 0 && currentIndexName == 'uncommonry' &&
              <>
                <FilterHeading>Average Price</FilterHeading>
                <AlgoliaRangeSlider attribute="price" />
              </>
            }
            {facetsToShow && facetsToShow.indexOf("prices") >= 0 && currentIndexName == 'empProducts' &&
              <>
                <FilterHeading>Prices</FilterHeading>
                <NumericMenu
                  attribute="price"
                  items={[
                    { label: 'All' },
                    { label: 'Under $50', end: 50 },
                    { label: '$50 - $100', start: 50, end: 100 },
                    { label: '$100 - $200', start: 100, end: 200 },
                    { label: '$200+', start: 200 },
                  ]}
                />
              </>
            }
            {/*
            {facetsToShow && facetsToShow.indexOf("giftcard") >= 0 && currentIndexName == 'empProducts' &&
              <>
                <FilterHeading>Gift Card</FilterHeading>
                <RefinementList
                  attribute="name"
                  transformItems={items =>
                    items.filter(item => (item.label.toLowerCase().indexOf('gift') >= 0))
                  }
                />
              </>
            }
            {facetsToShow && facetsToShow.indexOf("gifimage") >= 0 && currentIndexName == 'empProducts' &&
              <>
                <FilterHeading>GIF</FilterHeading>
                <RefinementList
                  attribute="imageURL"
                  transformItems={items =>
                    items.filter(item => (item.label.indexOf('.gif') >= 0)).map(item => ({
                      ...item,
                      label: "GIF",
                    }))
                  }
                />
              </>
            }
            */}

            {facetsToShow && facetsToShow.indexOf("storeoffers") >= 0 &&
              <>
                <FilterHeading>Store Offers</FilterHeading>
                <RefinementList
                  attribute="freeShipMin"
                  transformItems={items =>
                    items.filter(item => (item.label == 0)).map(item => ({
                      ...item,
                      label: "Free Shipping",
                    }))
                  }
                />
                <RefinementList
                  attribute="returnShipFree"
                  transformItems={items =>
                    items.filter(item => (item.label == 'Yes')).map(item => ({
                      ...item,
                      label: "Free Returns",
                    }))
                  }
                />
              </>
            }
          </LeftPanel>
        }
        <RightPanel>
          <Configure clickAnalytics={true} hitsPerPage={itemsPerPage} filters={defaultFilter} />
          <div class="searchline">
            <div class="indexSelect">
              {enableShopProductSwitch &&
                <div style={{ paddingBottom: '0.75rem' }}>
                  <select value={currentIndexName} onChange={changeCurrentIndexName}>
                    <option value="uncommonry">Shops</option>
                    <option value="empProducts">Products</option>
                  </select>
                </div>
              }
            </div>
            {facetsToShow && facetsToShow.indexOf("onsale") >= 0 &&
              <div class="saleFacet">
                <RefinementList
                  attribute="onSale"
                  transformItems={items =>
                    items.filter(item => (item.label == '1')).map(item => ({
                      ...item,
                      label: "On Sale",
                    }))
                  }
                />
              </div>
            }
          <div class="searchContainer">
            {showSearchBox &&
              <>
                <SearchBox defaultRefinement={suggestionQuery} />
              </>
            }<br style={{ clear: 'both' }} />
  {showSearchSuggestions && currentSuggestionIndexName &&
    <span style={{ 'font-weight': 'bold', 'padding': '0 1em 1em 0' }}>Trending </span>
  }
            {showSearchSuggestions && currentSuggestionIndexName &&

              <div className="suggestions">

                <InstantSearch
                  searchClient={searchClient}
                  indexName={currentSuggestionIndexName}
                >
                  <Configure hitsPerPage={5} />
                  <InfiniteHits hitComponent={AlgoliaSuggestions} />
                </InstantSearch>
              </div>
            }
            </div>
            {!hideCTAButton &&
              <div class="giftCard">
                <BuyGiftCard />
              </div>
            }
          </div>

          <AlgoliaStateResults noResultMessage={noResultMessage} />
          <Hits hitComponent={currentHitComponent} />
          <Pagination />
        </RightPanel>
      </InstantSearch>
    </SearchWrapper>
  );
}

export default function Web3Provider({
  infuraURL,
  contracts,
  onNetworkChange,
  children,
}) {
  const [web3, setWeb3] = useState(() => createWeb3(infuraURL));

  useEffect(() => {
    if (infuraURL !== web3.infuraURL) setWeb3(createWeb3(infuraURL));
  }, [infuraURL, web3.infuraURL]);

  useEffect(() => {
    let cancelled = false;
    (async () => {
      if (web3.modal.cachedProvider) {
        const _web3 = await createWeb3FromModal(web3.modal, web3.infuraURL);
        if (!cancelled) setWeb3(_web3);
      }
    })();

    if (window.ethereum) {
      const listener = async () => {
        setWeb3(await createWeb3FromModal(web3.modal, web3.infuraURL));
      };
      window.ethereum.on("accountsChanged", listener);
      return () => {
        cancelled = true;
        window.ethereum.removeListener("accountsChanged", listener);
      };
    }
    return () => (cancelled = true);
  }, [web3.modal, web3.infuraURL]);

  // Instantiate contracts.
  useEffect(() => {
    let cancelled = false;
    const networkIdToName = {
      1: "mainnet",
      42: "kovan",
    };
    (async () => {
      const ETHNetID = await web3.eth.net.getId();
      if (!cancelled && ETHNetID !== web3.ETHNet?.ID) {
        web3.ETHNet = {
          ID: ETHNetID,
          name: { 42: "kovan", 1: "mainnet" }[ETHNetID],
        };
        setWeb3({ ...web3 });
        if (onNetworkChange) onNetworkChange(web3.ETHNet);
      }

      if (networkIdToName[ETHNetID] !== process.env.NEXT_PUBLIC_NETWORK) return;

      if (contracts !== web3._contracts) {
        const [account] = await web3.eth.getAccounts();
        if (!cancelled) {
          web3.contracts = contracts.reduce(
            (acc, { name, abi, address, options }) => {
              acc[name] = new web3.eth.Contract(
                abi,
                address[web3.ETHNet.name],
                {
                  from: account,
                  ...options,
                }
              );
              acc[name].jsonInterfaceMap = acc[name]._jsonInterface.reduce(
                (_acc, method) => {
                  _acc[method.name] = method;
                  return _acc;
                },
                {}
              );
              return acc;
            },
            {}
          );
          web3._contracts = contracts;
          setWeb3({ ...web3 });
        }
      }
    })();
    return () => (cancelled = true);
  }, [web3, onNetworkChange, contracts]);
  return (
    <Context.Provider
      value={useMemo(
        () => ({
          web3,
          setWeb3,
          async connect() {
            web3.modal.clearCachedProvider();
            setWeb3(await createWeb3FromModal(web3.modal, web3.infuraURL));
          },
        }),
        [web3, setWeb3]
      )}
    >
      <Global styles={{ ".web3modal-modal-lightbox": { zIndex: 1000 } }} />
      {children}
    </Context.Provider>
  );
}

function Page({ pageContext, children }) {
  const { header, status, layout = "default" } = pageContext;
  const title = header ? `${header} | Basis` : "Basis";

  return (
    <RecoilRoot>
      <BasisProvider theme={theme} InternalLink={GatsbyLink}>
        <Global
          styles={{
            body: {
              margin: 0,
              fontFamily: theme.fonts.body,
              fontSize: theme.fontSizes[1],
              lineHeight: theme.lineHeights[2],
              color: theme.colors.black,
            },
            a: {
              color: "inherit",
              textDecoration: "none",
            },
            ":focus": {
              outline: 0,
            },
            '[data-basis-keyboard-mode="true"] :not([aria-invalid="true"]):focus': {
              boxShadow: `0 0 0px ${theme.radii[1]} ${theme.colors.secondary.lightBlue.t80}`,
            },
          }}
        />
        <SEO title={title} />
        <Splitbee />
        {layout === "empty" ? (
          <main>{children}</main>
        ) : (
          <div
            css={{
              height: "100vh",
              display: "grid",
              gridTemplateColumns: "224px 1fr",
            }}
          >
            <Sidebar />
            <main
              css={{
                minHeight: 0,
                display: "flex",
                flexDirection: "column",
                overflow: "auto",
              }}
            >
              {header && (
                <div
                  css={{
                    borderBottom: `1px solid ${theme.colors.grey.t16}`,
                  }}
                >
                  <div
                    css={{
                      display: "flex",
                      padding: `${theme.space[5]} ${theme.space[6]} 0`,
                    }}
                  >
                    <Text as="h1" textStyle="heading4">
                      {header}
                    </Text>
                    {status && (
                      <Container margin="0 0 0 9">
                        <ComponentStatusIndicator status={status} />
                      </Container>
                    )}
                    <FeedbackFish projectId="42362f272b4510">
                      <div css={{ marginLeft: "auto" }}>
                        <Button variant="secondary">Feedback</Button>
                      </div>
                    </FeedbackFish>
                  </div>
                  <Location>
                    {({ location }) => {
                      const urls = getTabsUrls(location);

                      return (
                        <ul
                          css={{
                            display: "flex",
                            margin: `${theme.space[6]} 0 0`,
                            padding: 0,
                          }}
                        >
                          {urls.map(({ name, href, isCurrent }) => (
                            <li
                              css={{
                                listStyleType: "none",
                                color: isCurrent
                                  ? theme.colors.black
                                  : theme.colors.grey.t65,
                                ...(isCurrent && {
                                  "::after": {
                                    content: "''",
                                    display: "block",
                                    height: theme.borderWidths[1],
                                    margin: `0 ${theme.space[6]}`,
                                    backgroundColor: theme.colors.black,
                                  },
                                }),
                              }}
                              key={name}
                            >
                              <GatsbyLink
                                css={{
                                  display: "flex",
                                  alignItems: "center",
                                  boxSizing: "border-box",
                                  width: "100%",
                                  padding: `${theme.space[2]} ${theme.space[6]}`,
                                  color: isCurrent
                                    ? theme.colors.black
                                    : theme.colors.grey.t75,
                                }}
                                to={href}
                              >
                                {name}
                              </GatsbyLink>
                            </li>
                          ))}
                        </ul>
                      );
                    }}
                  </Location>
                </div>
              )}
              <div
                css={{
                  display: "flex",
                  flexDirection: "column",
                  flexGrow: 1,
                  minHeight: 0,
                  overflowY: "auto",
                }}
              >
                {children}
              </div>
            </main>
          </div>
        )}
      </BasisProvider>
    </RecoilRoot>
  );
}

MyApp = ({ Component, pageProps }) => {
  return (
    <Fragment>
      <Global
        styles={{
          body: { margin: 0 }
        }}
      />
      <div
        // https://github.com/sindresorhus/github-markdown-css
        css={css`
          .octicon {
            display: inline-block;
            fill: currentColor;
            vertical-align: text-bottom;
          }

          .anchor {
            float: left;
            line-height: 1;
            margin-left: -20px;
            padding-right: 4px;
          }

          .anchor:focus {
            outline: none;
          }

          h1 .octicon-link,
          h2 .octicon-link,
          h3 .octicon-link,
          h4 .octicon-link,
          h5 .octicon-link,
          h6 .octicon-link {
            color: #1b1f23;
            vertical-align: middle;
            visibility: hidden;
          }

          h1:hover .anchor,
          h2:hover .anchor,
          h3:hover .anchor,
          h4:hover .anchor,
          h5:hover .anchor,
          h6:hover .anchor {
            text-decoration: none;
          }

          h1:hover .anchor .octicon-link,
          h2:hover .anchor .octicon-link,
          h3:hover .anchor .octicon-link,
          h4:hover .anchor .octicon-link,
          h5:hover .anchor .octicon-link,
          h6:hover .anchor .octicon-link {
            visibility: visible;
          }

          h1:hover .anchor .octicon-link:before,
          h2:hover .anchor .octicon-link:before,
          h3:hover .anchor .octicon-link:before,
          h4:hover .anchor .octicon-link:before,
          h5:hover .anchor .octicon-link:before,
          h6:hover .anchor .octicon-link:before {
            width: 16px;
            height: 16px;
            content: ' ';
            display: inline-block;
            background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' version='1.1' width='16' height='16' aria-hidden='true'%3E%3Cpath fill-rule='evenodd' d='M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z'%3E%3C/path%3E%3C/svg%3E");
          }
           {
            -ms-text-size-adjust: 100%;
            -webkit-text-size-adjust: 100%;
            line-height: 1.5;
            color: #24292e;
            font-family: -apple-system, BlinkMacSystemFont, Segoe UI, Helvetica,
              Arial, sans-serif, Apple Color Emoji, Segoe UI Emoji;
            font-size: 16px;
            line-height: 1.5;
            word-wrap: break-word;
          }

          details {
            display: block;
          }

          summary {
            display: list-item;
          }

          a {
            background-color: initial;
          }

          a:active,
          a:hover {
            outline-width: 0;
          }

          strong {
            font-weight: inherit;
            font-weight: bolder;
          }

          h1 {
            font-size: 2em;
            margin: 0.67em 0;
          }

          img {
            border-style: none;
          }

          code,
          kbd,
          pre {
            font-family: monospace, monospace;
            font-size: 1em;
          }
          hr {
            box-sizing: initial;
            height: 0;
            overflow: visible;
          }

          input {
            font: inherit;
            margin: 0;
          }

          input {
            overflow: visible;
          }

          [type='checkbox'] {
            box-sizing: border-box;
            padding: 0;
          }

          * {
            box-sizing: border-box;
          }

          input {
            font-family: inherit;
            font-size: inherit;
            line-height: inherit;
          }

          a {
            color: #0366d6;
            text-decoration: none;
          }

          a:hover {
            text-decoration: underline;
          }

          strong {
            font-weight: 600;
          }

          hr {
            height: 0;
            margin: 15px 0;
            overflow: hidden;
            background: transparent;
            border: 0;
            border-bottom: 1px solid #dfe2e5;
          }

          hr:after,
          hr:before {
            display: table;
            content: '';
          }

          hr:after {
            clear: both;
          }

          table {
            border-spacing: 0;
            border-collapse: collapse;
          }

          td,
          th {
            padding: 0;
          }

          details summary {
            cursor: pointer;
          }

          kbd {
            display: inline-block;
            padding: 3px 5px;
            font: 11px SFMono-Regular, Consolas, Liberation Mono, Menlo,
              monospace;
            line-height: 10px;
            color: #444d56;
            vertical-align: middle;
            background-color: #fafbfc;
            border: 1px solid #d1d5da;
            border-radius: 3px;
            box-shadow: inset 0 -1px 0 #d1d5da;
          }

          h1,
          h2,
          h3,
          h4,
          h5,
          h6 {
            margin-top: 0;
            margin-bottom: 0;
          }

          h1 {
            font-size: 32px;
          }

          h1,
          h2 {
            font-weight: 600;
          }

          h2 {
            font-size: 24px;
          }

          h3 {
            font-size: 20px;
          }

          h3,
          h4 {
            font-weight: 600;
          }

          h4 {
            font-size: 16px;
          }

          h5 {
            font-size: 14px;
          }

          h5,
          h6 {
            font-weight: 600;
          }

          h6 {
            font-size: 12px;
          }

          p {
            margin-top: 0;
            margin-bottom: 10px;
          }

          blockquote {
            margin: 0;
          }

          ol,
          ul {
            padding-left: 0;
            margin-top: 0;
            margin-bottom: 0;
          }

          ol ol,
          ul ol {
            list-style-type: lower-roman;
          }

          ol ol ol,
          ol ul ol,
          ul ol ol,
          ul ul ol {
            list-style-type: lower-alpha;
          }

          dd {
            margin-left: 0;
          }

          code,
          pre {
            font-family: SFMono-Regular, Consolas, Liberation Mono, Menlo,
              monospace;
            font-size: 12px;
          }

          pre {
            margin-top: 0;
            margin-bottom: 0;
          }

          input::-webkit-inner-spin-button,
          input::-webkit-outer-spin-button {
            margin: 0;
            -webkit-appearance: none;
            appearance: none;
          }

          :checked + .radio-label {
            position: relative;
            z-index: 1;
            border-color: #0366d6;
          }

          .border {
            border: 1px solid #e1e4e8 !important;
          }

          .border-0 {
            border: 0 !important;
          }

          .border-bottom {
            border-bottom: 1px solid #e1e4e8 !important;
          }

          .rounded-1 {
            border-radius: 3px !important;
          }

          .bg-white {
            background-color: #fff !important;
          }

          .bg-gray-light {
            background-color: #fafbfc !important;
          }

          .text-gray-light {
            color: #6a737d !important;
          }

          .mb-0 {
            margin-bottom: 0 !important;
          }

          .my-2 {
            margin-top: 8px !important;
            margin-bottom: 8px !important;
          }

          .pl-0 {
            padding-left: 0 !important;
          }

          .py-0 {
            padding-top: 0 !important;
            padding-bottom: 0 !important;
          }

          .pl-1 {
            padding-left: 4px !important;
          }

          .pl-2 {
            padding-left: 8px !important;
          }

          .py-2 {
            padding-top: 8px !important;
            padding-bottom: 8px !important;
          }

          .pl-3,
          .px-3 {
            padding-left: 16px !important;
          }

          .px-3 {
            padding-right: 16px !important;
          }

          .pl-4 {
            padding-left: 24px !important;
          }

          .pl-5 {
            padding-left: 32px !important;
          }

          .pl-6 {
            padding-left: 40px !important;
          }

          .f6 {
            font-size: 12px !important;
          }

          .lh-condensed {
            line-height: 1.25 !important;
          }

          .text-bold {
            font-weight: 600 !important;
          }

          .pl-c {
            color: #6a737d;
          }

          .pl-c1,
          .pl-s .pl-v {
            color: #005cc5;
          }

          .pl-e,
          .pl-en {
            color: #6f42c1;
          }

          .pl-s .pl-s1,
          .pl-smi {
            color: #24292e;
          }

          .pl-ent {
            color: #22863a;
          }

          .pl-k {
            color: #d73a49;
          }

          .pl-pds,
          .pl-s,
          .pl-s .pl-pse .pl-s1,
          .pl-sr,
          .pl-sr .pl-cce,
          .pl-sr .pl-sra,
          .pl-sr .pl-sre {
            color: #032f62;
          }

          .pl-smw,
          .pl-v {
            color: #e36209;
          }

          .pl-bu {
            color: #b31d28;
          }

          .pl-ii {
            color: #fafbfc;
            background-color: #b31d28;
          }

          .pl-c2 {
            color: #fafbfc;
            background-color: #d73a49;
          }

          .pl-c2:before {
            content: '^M';
          }

          .pl-sr .pl-cce {
            font-weight: 700;
            color: #22863a;
          }

          .pl-ml {
            color: #735c0f;
          }

          .pl-mh,
          .pl-mh .pl-en,
          .pl-ms {
            font-weight: 700;
            color: #005cc5;
          }

          .pl-mi {
            font-style: italic;
            color: #24292e;
          }

          .pl-mb {
            font-weight: 700;
            color: #24292e;
          }

          .pl-md {
            color: #b31d28;
            background-color: #ffeef0;
          }

          .pl-mi1 {
            color: #22863a;
            background-color: #f0fff4;
          }

          .pl-mc {
            color: #e36209;
            background-color: #ffebda;
          }

          .pl-mi2 {
            color: #f6f8fa;
            background-color: #005cc5;
          }

          .pl-mdr {
            font-weight: 700;
            color: #6f42c1;
          }

          .pl-ba {
            color: #586069;
          }

          .pl-sg {
            color: #959da5;
          }

          .pl-corl {
            text-decoration: underline;
            color: #032f62;
          }

          .mb-0 {
            margin-bottom: 0 !important;
          }

          .my-2 {
            margin-bottom: 8px !important;
          }

          .my-2 {
            margin-top: 8px !important;
          }

          .pl-0 {
            padding-left: 0 !important;
          }

          .py-0 {
            padding-top: 0 !important;
            padding-bottom: 0 !important;
          }

          .pl-1 {
            padding-left: 4px !important;
          }

          .pl-2 {
            padding-left: 8px !important;
          }

          .py-2 {
            padding-top: 8px !important;
            padding-bottom: 8px !important;
          }

          .pl-3 {
            padding-left: 16px !important;
          }

          .pl-4 {
            padding-left: 24px !important;
          }

          .pl-5 {
            padding-left: 32px !important;
          }

          .pl-6 {
            padding-left: 40px !important;
          }

          .pl-7 {
            padding-left: 48px !important;
          }

          .pl-8 {
            padding-left: 64px !important;
          }

          .pl-9 {
            padding-left: 80px !important;
          }

          .pl-10 {
            padding-left: 96px !important;
          }

          .pl-11 {
            padding-left: 112px !important;
          }

          .pl-12 {
            padding-left: 128px !important;
          }

          hr {
            border-bottom-color: #eee;
          }

          kbd {
            display: inline-block;
            padding: 3px 5px;
            font: 11px SFMono-Regular, Consolas, Liberation Mono, Menlo,
              monospace;
            line-height: 10px;
            color: #444d56;
            vertical-align: middle;
            background-color: #fafbfc;
            border: 1px solid #d1d5da;
            border-radius: 3px;
            box-shadow: inset 0 -1px 0 #d1d5da;
          }

          .markdown-body:after,
          .markdown-body:before {
            display: table;
            content: '';
          }

          .markdown-body:after {
            clear: both;
          }

          > :first-child {
            margin-top: 0 !important;
          }

          > :last-child {
            margin-bottom: 0 !important;
          }

          a:not([href]) {
            color: inherit;
            text-decoration: none;
          }

          blockquote,
          details,
          dl,
          ol,
          p,
          pre,
          table,
          ul {
            margin-top: 0;
            margin-bottom: 16px;
          }

          hr {
            height: 0.25em;
            padding: 0;
            margin: 24px 0;
            background-color: #e1e4e8;
            border: 0;
          }

          blockquote {
            padding: 0 1em;
            color: #6a737d;
            border-left: 0.25em solid #dfe2e5;
          }

          blockquote > :first-child {
            margin-top: 0;
          }

          blockquote > :last-child {
            margin-bottom: 0;
          }

          h1,
          h2,
          h3,
          h4,
          h5,
          h6 {
            margin-top: 24px;
            margin-bottom: 16px;
            font-weight: 600;
            line-height: 1.25;
          }

          h1 {
            font-size: 2em;
          }

          h1,
          h2 {
            color: #5b6c5b;
            padding-bottom: 0.3em;
          }

          h2 {
            font-size: 1.5em;
          }

          h3 {
            font-size: 1.25em;
          }

          h4 {
            font-size: 1em;
          }

          h5 {
            font-size: 0.875em;
          }

          h6 {
            font-size: 0.85em;
            color: #6a737d;
          }

          ol,
          ul {
            padding-left: 2em;
          }

          ol ol,
          ol ul,
          ul ol,
          ul ul {
            margin-top: 0;
            margin-bottom: 0;
          }

          li {
            word-wrap: break-all;
          }

          li > p {
            margin-top: 16px;
          }

          li + li {
            margin-top: 0.25em;
          }

          dl {
            padding: 0;
          }

          dl dt {
            padding: 0;
            margin-top: 16px;
            font-size: 1em;
            font-style: italic;
            font-weight: 600;
          }

          dl dd {
            padding: 0 16px;
            margin-bottom: 16px;
          }

          table {
            display: block;
            width: 100%;
            overflow: auto;
          }

          table th {
            font-weight: 600;
          }

          table td,
          table th {
            padding: 6px 13px;
            border: 1px solid #dfe2e5;
          }

          table tr {
            background-color: #fff;
            border-top: 1px solid #c6cbd1;
          }

          table tr:nth-child(2n) {
            background-color: #f6f8fa;
          }

          img {
            max-width: 100%;
            box-sizing: initial;
          }

          img[align='right'] {
            padding-left: 20px;
          }

          img[align='left'] {
            padding-right: 20px;
          }

          code {
            padding: 0.2em 0.4em;
            margin: 0;
            font-size: 85%;
            background-color: rgba(27, 31, 35, 0.05);
            border-radius: 3px;
          }

          .highlight {
            margin-bottom: 16px;
          }

          .highlight pre {
            margin-bottom: 0;
            word-break: normal;
          }

          .commit-tease-sha {
            display: inline-block;
            font-family: SFMono-Regular, Consolas, Liberation Mono, Menlo,
              monospace;
            font-size: 90%;
            color: #444d56;
          }

          .full-commit .btn-outline:not(:disabled):hover {
            color: #005cc5;
            border-color: #005cc5;
          }

          .blob-wrapper {
            overflow-x: auto;
            overflow-y: hidden;
          }

          .blob-wrapper-embedded {
            max-height: 240px;
            overflow-y: auto;
          }

          .blob-num {
            width: 1%;
            min-width: 50px;
            padding-right: 10px;
            padding-left: 10px;
            font-family: SFMono-Regular, Consolas, Liberation Mono, Menlo,
              monospace;
            font-size: 12px;
            line-height: 20px;
            color: rgba(27, 31, 35, 0.3);
            text-align: right;
            white-space: nowrap;
            vertical-align: top;
            cursor: pointer;
            -webkit-user-select: none;
            -moz-user-select: none;
            -ms-user-select: none;
            user-select: none;
          }

          .blob-num:hover {
            color: rgba(27, 31, 35, 0.6);
          }

          .blob-num:before {
            content: attr(data-line-number);
          }

          .blob-code {
            position: relative;
            padding-right: 10px;
            padding-left: 10px;
            line-height: 20px;
            vertical-align: top;
          }

          .blob-code-inner {
            overflow: visible;
            font-family: SFMono-Regular, Consolas, Liberation Mono, Menlo,
              monospace;
            font-size: 12px;
            color: #24292e;
            word-wrap: normal;
            white-space: pre;
          }

          .pl-token.active,
          .pl-token:hover {
            cursor: pointer;
            background: #ffea7f;
          }

          .tab-size[data-tab-size='1'] {
            -moz-tab-size: 1;
            tab-size: 1;
          }

          .tab-size[data-tab-size='2'] {
            -moz-tab-size: 2;
            tab-size: 2;
          }

          .tab-size[data-tab-size='3'] {
            -moz-tab-size: 3;
            tab-size: 3;
          }

          .tab-size[data-tab-size='4'] {
            -moz-tab-size: 4;
            tab-size: 4;
          }

          .tab-size[data-tab-size='5'] {
            -moz-tab-size: 5;
            tab-size: 5;
          }

          .tab-size[data-tab-size='6'] {
            -moz-tab-size: 6;
            tab-size: 6;
          }

          .tab-size[data-tab-size='7'] {
            -moz-tab-size: 7;
            tab-size: 7;
          }

          .tab-size[data-tab-size='8'] {
            -moz-tab-size: 8;
            tab-size: 8;
          }

          .tab-size[data-tab-size='9'] {
            -moz-tab-size: 9;
            tab-size: 9;
          }

          .tab-size[data-tab-size='10'] {
            -moz-tab-size: 10;
            tab-size: 10;
          }

          .tab-size[data-tab-size='11'] {
            -moz-tab-size: 11;
            tab-size: 11;
          }

          .tab-size[data-tab-size='12'] {
            -moz-tab-size: 12;
            tab-size: 12;
          }

          .task-list-item {
            list-style-type: none;
          }

          .task-list-item + .task-list-item {
            margin-top: 3px;
          }

          .task-list-item input {
            margin: 0 0.2em 0.25em -1.6em;
            vertical-align: middle;
          }
        `}
      >
        <Component {...pageProps} />
      </div>
    </Fragment>
  );
}