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

&.form-input--medium input.form-input__input {
    ${stylers.fontSize(-1)}
    height: ${stylers.spacer(4)};
  }

  &.form-input--large input.form-input__input {
    ${stylers.fontSize()}
    height: ${stylers.spacer(5)};
  }

  // Icons

  .form-input__icon,
  .form-input__clear {
    ${stylers.z(1)};
    color: ${tokens.textColor.icon};
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
  }

  .form-input__icon {
    ${({ size }) => iconStyles[size]};

    svg {
      vertical-align: middle;
    }
  }

  .form-input__clear {
    border-radius: ${tokens.border.radius};

color: ${tokens.color.black};
  display: inline-block;
  margin: 0 0 0 ${stylers.spacer(4)};
  padding: ${stylers.spacer(2)} 0 ${tokens.space} 0;
  position: relative;
  transition: border-color 0.3s ease;

  ${({ isDisabled }) => (isDisabled ? disabledStyles : null)}
  ${({ isSelected }) => (isSelected ? activeStyles : null)}
  
  &:first-child {
    margin-left: 0;
  }

  &:focus {
    ${stylers.z(1)}
  }

  &:hover {
    border-color: ${tokens.color.creme};
  }

  &.tab-link {
    color: ${tokens.color.black};
    text-decoration: none;
  }
`;

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

const indicatorSize = stylers.spacer(3);
const topPadding = tokens.space;
const activeDotSize = tokens.space;

const lineStyles = css`
  ${stylers.z(1)}

  border-left: 2px solid ${tokens.border.color};
  content: "";
  height: calc(100% - ${indicatorSize} + ${topPadding});
  left: 50%;
  position: absolute;
  top: ${indicatorSize};
  transform: translateX(-50%);
`;

const activeLineStyles = css`
  ${lineStyles}
  ${stylers.z(2)}

  border-color: ${tokens.color.blue};
  height: calc((100% - ${indicatorSize} + ${topPadding}) / 2);

const zStyles = props => `
  left: ${zOffset * props.level}px;
  top: ${(zOffset / 4) * props.level}px;
  ${stylers.z(props.level)};
`;

const itemStyles = css`
  ${stylers.fontSize()};
  ${stylers.lineHeight()}
  cursor: pointer;
  display: block;
  font-family: ${tokens.fontFamily.default};
  font-weight: normal;
  padding: ${tokens.spaceSm} ${stylers.spacer(2)};
  text-decoration: none;

  &:focus {
    box-shadow: ${tokens.highlight.active.withBorder.insetBoxShadow};
    outline: none;
    position: relative;
    ${stylers.z(1)}
  }

  ${({ isDestructive, isDisabled }) => {
    let colorString;
    if (isDisabled) {
      colorString = isDestructive ? "orangeDisabled" : "blackDisabled";
      return { color: tokens.color[colorString] };
    }

    colorString = isDestructive ? "orangeDarken10" : "colorBlack";
    return { color: tokens.color[colorString] };
  }}}

  &:hover {
    ${({ isDestructive, isDisabled }) => {
      if (!isDisabled) {

height: 100%;
  justify-content: flex-start;
  overflow: auto;
  transition: all ${tokens.overlay.animationDuration}ms ease;
  width: 100%;
  ${({ state }) => states[state]};
  ${stylers.boxSizingStyles};
`;

export const Wrapper = styled.div`
  flex: 0 1 auto;
  margin: ${tokens.modal.margin};
  max-height: calc(100% - ${tokens.modal.margin} - ${tokens.modal.margin});
  max-width: calc(100% - ${tokens.modal.margin} - ${tokens.modal.margin});
  width: ${({ size }) => mapShirtSizesToValues[size] || mapShirtSizesToValues[ShirtSizes.MEDIUM]};
  ${stylers.z(1)};
`;

export const Header = styled(OriginalHeader)`
  flex: none;
`;

export const ContentWrapper = styled.div`
  overflow-y: auto;
`;

export const Content = styled(OriginalContent)`
  ${Header} + ${ContentWrapper} > & {
    margin-top: -${OriginalContent.SPACE};
  }
`;

line-height: 1;
  position: relative;

  &:before {
    ${({ isLast }) => !isLast && lineStyles}
    ${({ isComplete }) => isComplete && `border-color: ${tokens.color.black}`}
  }

  &:after {
    ${({ isActive, isLast }) => isActive && !isLast && activeLineStyles}
  }
`;

export const indicatorDotStyles = css`
  ${stylers.fontSize()}
  ${stylers.z(2)}

  align-items: center;
  background-color: ${tokens.color.white};
  border: 2px solid ${tokens.color.blackLighten40};
  border-radius: 100%;
  display: flex;
  height: ${indicatorSize};
  justify-content: center;
  position: relative;
  width: ${indicatorSize};

  ${({ isActive, isComplete }) => isComplete && !isActive && doneStyles}
  ${({ isActive }) => isActive && activeStyles}
`;