How to use the @paprika/helpers/lib/customPropTypes.ShirtSizes.MEDIUM function in @paprika/helpers

import classNames from "classnames";
import { ShirtSizes } from "@paprika/helpers/lib/customPropTypes";
import SpinnerStyles from "./Spinner.styles";

const propTypes = {
  a11yText: PropTypes.string,
  className: PropTypes.string,
  caption: PropTypes.string,
  size: PropTypes.oneOf(ShirtSizes.DEFAULT),
};

const defaultProps = {
  a11yText: null,
  className: null,
  caption: null,
  size: ShirtSizes.MEDIUM,
};

const spinnerSize = {
  large: "spinner--large",
  medium: "spinner--medium",
  small: "spinner--small",
};

const Spinner = ({ a11yText, className, caption, size, ...moreProps }) => {
  const rootClasses = classNames(className, spinnerSize[size]);

  const bestAria = a11yText || caption || "Loading"; // TODO: l10n

  return (
    <div data-pka-anchor="spinner">
      <div></div></div>

`;

const activeStyles = `
  box-shadow: ${tokens.highlight.active.noBorder.boxShadow};
  border-color: ${tokens.highlight.active.noBorder.borderColor};
`;

// Sizes

const sizeStyles = {
  [ShirtSizes.SMALL]: `
    ${stylers.fontSize(-2)};
    min-height: ${stylers.spacer(3)};
    padding: 3px ${tokens.space};
  `,
  [ShirtSizes.MEDIUM]: `
    ${stylers.fontSize(-1)};
    min-height: ${stylers.spacer(4)};
    padding: 6.5px ${tokens.spaceLg};
  `,
  [ShirtSizes.LARGE]: `
    ${stylers.fontSize()};
    min-height: ${stylers.spacer(5)};
    padding: 9px ${stylers.spacer(2)};
  `,
};

// Kinds

const kindStyles = props => ({
  [Kinds.DEFAULT]: `
    ${skeuomorphicStyles}

  width: ${({ size }) => mapShirtSizesToValues[size] || mapShirtSizesToValues[ShirtSizes.MEDIUM]};
  ${stylers.z(1)};

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

const iconStyles = {
  [ShirtSizes.SMALL]: `
    ${stylers.fontSize(-2)}
    margin-left: 3px;
    padding: 0 ${tokens.spaceSm};
  `,
  [ShirtSizes.MEDIUM]: `
    ${stylers.fontSize()}
    margin-left: 2px;
    padding: 0 ${tokens.spaceSm};
  `,
  [ShirtSizes.LARGE]: `
    ${stylers.fontSize(2)}
    margin-left: ${tokens.spaceSm};
    padding: 0 ${tokens.spaceSm};
  `,
};

const inputStyles = css`
  line-height: 1;
  position: relative;

  input.form-input__input {

type: PropTypes.oneOf(InputValidTypes.ALL),
  value: PropTypes.string,
};

const defaultProps = {
  a11yText: null,
  className: null,
  defaultValue: null,
  hasClearButton: false,
  hasError: false,
  icon: null,
  inputRef: () => {},
  isDisabled: false,
  isReadOnly: false,
  onClear: () => {},
  size: ShirtSizes.MEDIUM,
  type: "text",
  value: "",
};

const Input = props => {
  const [value, setValue] = React.useState(props.defaultValue);

  const inputClearHandler = e => {
    e.target.value = "";
    props.onChange(e);
    props.onClear();
  };

  const renderClear = () => {
    const { hasClearButton, isDisabled, isReadOnly, size, value } = props;
    if (!hasClearButton || isDisabled || isReadOnly || !value) return null;

isReadOnly: PropTypes.bool,
  maxHeight: PropTypes.string,
  size: PropTypes.oneOf(ShirtSizes.DEFAULT),
  value: PropTypes.string,
};

const defaultProps = {
  a11yText: null,
  canExpand: true,
  className: null,
  hasError: false,
  inputRef: () => {},
  isDisabled: false,
  isReadOnly: false,
  maxHeight: "300px",
  size: ShirtSizes.MEDIUM,
  value: "",
};

class Textarea extends React.Component {
  componentDidMount() {
    if (this.props.canExpand) {
      this.resize();
      window.addEventListener("resize", this.resize);
    }
  }

  componentDidUpdate(prevProps) {
    if (this.props.canExpand && this.props.value !== prevProps.value) {
      this.resize();
    }
  }

import { ShirtSizes } from "@paprika/helpers/lib/customPropTypes";
import Button from "./Button";
import buttonStyles from "./Button.styles";

const LinkPropTypes = {
  children: PropTypes.node.isRequired,
  href: PropTypes.string.isRequired,
  isOpenNewTab: PropTypes.bool,
  kind: PropTypes.oneOf(Button.Kinds.ALL),
  size: PropTypes.oneOf(ShirtSizes.DEFAULT),
};

const LinkDefaultProps = {
  isOpenNewTab: true,
  kind: Button.Kinds.DEFAULT,
  size: ShirtSizes.MEDIUM,
};

const LinkButton = React.forwardRef((props, ref) => {
  const isOpenNewTabProps = {};
  if (props.isOpenNewTab) {
    isOpenNewTabProps.target = "_blank";
    isOpenNewTabProps.rel = "noopener noreferrer";
  }
  return (
    <a href="{props.href}">
      {props.children}
    </a>
  );
});

LinkButton.Kinds = Button.Kinds;

canPropagate: true,
  children: null,
  icon: null,
  href: null,
  isOpenNewTab: true,
  isActive: false,
  isDisabled: false,
  isDropdown: false,
  isFullWidth: false,
  isPending: false,
  isSemantic: true,
  isSubmit: false,
  kind: Kinds.DEFAULT,
  onClick: () => {},
  role: "button",
  size: ShirtSizes.MEDIUM,
  tabIndex: 0,
};

const buttonPropTypes = {
  children: PropTypes.node,
};

const buttonDefaultProps = {
  children: null,
};

const ButtonIcon = props =>
  props.children ? (
    <span>
      {props.children}
    </span>

align-items: center;
  display: flex;
  flex-direction: column;
  height: 100%;

  &::before,
  &::after {
    content: "";
    display: block;
    flex: 0 1 ${tokens.modal.top};
  }
`;

const mapShirtSizesToValues = {
  [ShirtSizes.SMALL]: tokens.modal.sizes.sm,
  [ShirtSizes.MEDIUM]: tokens.modal.sizes.md,
  [ShirtSizes.LARGE]: tokens.modal.sizes.lg,
};

export const Dialog = styled.div`
  background-color: ${tokens.modal.backgroundColor};
  border-radius: ${tokens.modal.borderRadius};
  display: flex;
  flex-direction: column;
  height: 100%;
  justify-content: flex-start;
  overflow: auto;
  transition: all ${tokens.overlay.animationDuration}ms ease;
  width: 100%;
  ${({ state }) => states[state]};
  ${stylers.boxSizingStyles};
`;