How to use the @paprika/stylers/lib/helpers.spacer function in @paprika/stylers

import { spaceSm, spacer } from "@paprika/stylers/lib/helpers";
import { css, keyframes } from "styled-components";
import tokens from "@paprika/tokens/lib/tokens";

const childPanel = css`
  border-bottom-left-radius: ${spaceSm};
  border-top-left-radius: ${spaceSm};
  height: calc(100% - ${spacer(7) + 80}px);
  margin-top: ${spacer(7)}px;
`;

function slideIn() {
  return keyframes`
  from {
    opacity: 0;
    transform: translateX(100%);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
  `;
}

import styled from "styled-components";
import { spacer } from "@paprika/stylers/lib/helpers";
import tokens from "@paprika/tokens/lib/tokens";

const Content = styled.div`
  background-color: ${tokens.color.white};
  border: 1px solid ${tokens.border.color};
  border-radius: ${tokens.border.radius};
  box-shadow: ${tokens.shadow};
  margin: ${spacer(2)};
  padding: ${spacer(2)};
`;

Content.displayName = "Takeover.Content";

export default Content;

import { fontSize, spacer } from "@paprika/stylers/lib/helpers";
import tokens from "@paprika/tokens/lib/tokens";
import Button from "@paprika/button";

const kind = {
  [Button.Kinds.DEFAULT]: `background: ${tokens.color.white}; color: ${tokens.color.black};`,
  [Button.Kinds.PRIMARY]: `background: ${tokens.color.purple}; color: ${tokens.color.white};`,
};

const compactStyles = `
  height: ${spacer(7)};
  padding: 0 ${spacer(2)};
  
  [data-pka-anchor="heading"] {
    ${fontSize(1)};
    font-weight: 700;
    margin: 0;
  }
`;

export const headerCSS = props => `
  align-items: center;
  border-bottom: 1px solid ${tokens.border.color};
  box-sizing: border-box;
  display: flex;
  height: ${spacer(8)};
  justify-content: space-between;

export const headerCSS = props => `
  align-items: center;
  border-bottom: 1px solid ${tokens.border.color};
  box-sizing: border-box;
  display: flex;
  height: ${spacer(8)};
  justify-content: space-between;
  min-height: ${spacer(6)};
  padding: ${spacer(2)} ${spacer(3)};
  width: 100%;
  &:focus {
    outline: 0;
  }

  [data-pka-anchor="heading"] {
    ${fontSize(3)};
    font-weight: 700;
    margin: 0;
  }

  ${props.isCompact ? compactStyles : ""}
  ${props.kind ? kind[props.kind] : ""}
`;

box-sizing: border-box;
  display: flex;
  justify-content: space-between;
  min-height: ${spacer(6)};
  width: 100%;
  z-index: 1;

  &:focus {
    outline: 0;
  }

  ${props => kind[props.kind]}
`;

export const Heading = styled(OriginalHeading)`
  margin: 0 0 0 ${spacer(2)};
`;

export const CloseButtonWrapper = styled.div`
  border-left: 1px solid ${tokens.border.color};
  padding: ${spacer(1)};
`;

import styled from "styled-components";
import { spacer } from "@paprika/stylers/lib/helpers";

const SPACE = spacer(2);

const Content = styled.div`
  padding: ${SPACE};
`;

Content.SPACE = SPACE;
Content.displayName = "Modal.Content";

export default Content;

return css`
      animation: ${animation} 0.7s ease;
      right: 0;
      top: ${props.offsetY}px;
      width: ${width};
      z-index: ${props.zIndex};
      ${props.isInline ? "position: relative;" : "position: fixed;"}
      ${props.isOpen ? "opacity: 1" : "opacity: 0"};
      ${childSidePanel}
    `;
  }}
`;

export const dialogContentStyles = css`
  padding: ${spacer(2)};
  ${props => {
    return props.isSticky ? `margin-bottom: ${props.footerHeight}px;` : "";
  }}
`;

export const headerCSS = props => `
  align-items: center;
  border-bottom: 1px solid ${tokens.border.color};
  box-sizing: border-box;
  display: flex;
  height: ${spacer(8)};
  justify-content: space-between;
  min-height: ${spacer(6)};
  padding: ${spacer(2)} ${spacer(3)};
  width: 100%;
  &:focus {
    outline: 0;
  }

  [data-pka-anchor="heading"] {
    ${fontSize(3)};
    font-weight: 700;
    margin: 0;
  }

  ${props.isCompact ? compactStyles : ""}
  ${props.kind ? kind[props.kind] : ""}
`;

export const headerCSS = props => `
  align-items: center;
  border-bottom: 1px solid ${tokens.border.color};
  box-sizing: border-box;
  display: flex;
  height: ${spacer(8)};
  justify-content: space-between;
  min-height: ${spacer(6)};
  padding: ${spacer(2)} ${spacer(3)};
  width: 100%;
  &:focus {
    outline: 0;
  }

  [data-pka-anchor="heading"] {
    ${fontSize(3)};
    font-weight: 700;
    margin: 0;
  }

  ${props.isCompact ? compactStyles : ""}
  ${props.kind ? kind[props.kind] : ""}

z-index: 1;

  &:focus {
    outline: 0;
  }

  ${props => kind[props.kind]}
`;

export const Heading = styled(OriginalHeading)`
  margin: 0 0 0 ${spacer(2)};
`;

export const CloseButtonWrapper = styled.div`
  border-left: 1px solid ${tokens.border.color};
  padding: ${spacer(1)};
`;