How to use the @paprika/stylers.alignMiddle function in @paprika/stylers

import styled from "styled-components";
import tokens from "@paprika/tokens";
import stylers from "@paprika/stylers";

// Common Storybook story styles

export const Story = styled.div`
  padding: ${stylers.spacer(3)};

  h1 {
    margin-top: 0;
  }
`;

export const CenteredStory = styled.div`
  ${stylers.alignMiddle}
  align-items: center;
  display: flex;
  justify-content: center;
  min-height: 100vh;
  width: 100%;
`;

export const Rule = styled.hr`
  border: none;
  border-bottom: 1px solid ${tokens.border.color};
  margin: ${stylers.spacer(4)} 0;
`;

export const Small = styled.small`
  color: ${tokens.color.blackLighten40};
`;

import tokens from "@paprika/tokens";
import stylers from "@paprika/stylers";
import { css, keyframes } from "styled-components";
import { ShirtSizes } from "@paprika/helpers/lib/customPropTypes";
import Kinds from "./ButtonKinds";

// Common

const commonStyles = `
  ${stylers.alignMiddle}
  ${stylers.lineHeight(-1)}
  appearance: none;
  border-radius: ${tokens.button.borderRadius};
  border-style: solid;
  border-width: 1px;
  box-sizing: border-box;
  cursor: pointer;
  display: inline-flex;
  font-family: ${tokens.fontFamily.default};
  font-weight: bold;
  text-align: center;
  vertical-align: middle;
  text-decoration: none;

  &:focus {
    box-shadow: ${tokens.highlight.active.noBorder.boxShadow};

import React from "react";
import { select } from "@storybook/addon-knobs";
import styled from "styled-components";
import { CenteredStory } from "storybook/assets/styles/common.styles";
import tokens from "@paprika/tokens";
import stylers from "@paprika/stylers";
import Button from "@paprika/button";
import Popover from "../../src";

const PositioningElementStyled = styled.div`
  ${stylers.alignMiddle}
  ${stylers.fontSize(3)}

  border: 2px dashed ${tokens.color.purpleLighten30};
  color: ${tokens.color.purple};
  font-weight: 100;

  height: 150px;
  letter-spacing: 0.05em;

  margin: 30px 0 0 120px;
  padding: ${stylers.spacer(2)};
  text-align: center;
  width: 150px;
`;

const getPositioningElement = () => document.querySelector("#another-div");

import styled from "styled-components";
import tokens from "@paprika/tokens";
import stylers from "@paprika/stylers";
import backgroundImg from "./assets/images/paprika-background.jpg";

export const WelcomePage = styled.div`
  align-items: flex-end;
  background: url(${backgroundImg}) center no-repeat;
  background-size: cover;
  display: flex;
  height: 100%;
  text-align: center;
`;

export const WelcomeBody = styled.div`
  ${stylers.alignMiddle}
  flex-direction: column;
  height: 30%;
  padding: ${stylers.spacer(6)} ${stylers.spacer(3)};
  text-align: center;
  width: 100%;
`;

const headingShadow = Array(8)
  .fill("0 0 12px #f5f5f5")
  .join(",");

const headingStyles = `
  ${stylers.lineHeight(-2)};
  color: ${tokens.color.black};
  text-shadow: ${headingShadow}; 
`;