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

&, &:hover {
    background: none;
    border-color: transparent;
  }
`;

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)};
  `,
};

// injected by Dialog.js
    onClose,
    ...moreProps
  } = props;

  return (
    <div kind="{kind}" data-pka-anchor="sidepanel.header">
      <div tabindex="-1">{props.children}</div>
      <div>
        {hasCloseButton ? (
          
        ) : null}
      </div>
    </div>
  );
});

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

const iconButtonSizes = {
  [ShirtSizes.SMALL]: css`
    font-size: 14px;
    height: ${stylers.spacer(3)};
    line-height: ${Number.parseInt(tokens.space, 10) * 3 - 2}px;
    padding: 0;
    width: ${stylers.spacer(3)};
  `,
  [ShirtSizes.MEDIUM]: css`
    font-size: 18px;
    height: ${stylers.spacer(4)};
    line-height: ${Number.parseInt(tokens.space, 10) * 4 - 2}px;
    padding: 0;
    width: ${stylers.spacer(4)};
  `,
  [ShirtSizes.LARGE]: css`
    font-size: 22px;
    height: ${stylers.spacer(5)};

const defaultProps = {
  isAcceptVisible: true,
  isCancelVisible: true,
  isClearVisible: true,
  isDisabled: false,
  kindAccept: Button.Kinds.PRIMARY,
  kindCancel: Button.Kinds.MINOR,
  kindClear: Button.Kinds.MINOR,
  labelAccept: "Accept",
  labelCancel: "Cancel",
  labelClear: "Clear",
  onClickAccept: null,
  onClickCancel: null,
  onClickClear: null,
  size: ShirtSizes.SMALL,
};

export function FooterComponent(props, ref) {
  const [, dispatch] = useListBox();

  const {
    labelCancel,
    labelAccept,
    labelClear,
    isCancelVisible,
    isAcceptVisible,
    isClearVisible,
    kindAccept,
    kindCancel,
    kindClear,
    size,

export const FocusLock = styled.div`
  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};

return (
    <div kind="{kind}" role="alert" aria-live="{ariaLive}">
      {kind === Kinds.VISUALLY_HIDDEN ? null : }
      <div>{children}</div>
      {hasCloseButton &amp;&amp; kind !== Kinds.VISUALLY_HIDDEN ? (
        
      ) : null}
    </div>
  );
}

const getLabelLeftPadding = (radioSize, hasLabel) => {
  return hasLabel ? `${toInt(radioSize) + toInt(tokens.space)}px` : radioSize;
};

const smallRadioSize = tokens.radio.sizeSm;
const mediumRadioSize = tokens.radio.sizeMd;
const largeRadioSize = tokens.radio.sizeLg;

const getHalfSizeCss = sizeCss => `${toInt(sizeCss) / 2}px`;
const smallRadioHalfSize = getHalfSizeCss(smallRadioSize);
const mediumRadioHalfSize = getHalfSizeCss(mediumRadioSize);
const largeRadioHalfSize = getHalfSizeCss(largeRadioSize);

const styles = {
  [ShirtSizes.SMALL]: {
    baseFontSize: {
      fontSize: `${fontSizeValue(-1)}px`,
    },
    radioStyles: {
      height: smallRadioSize,
      width: smallRadioSize,
      borderRadius: smallRadioHalfSize,
    },
    radioIconBackgroundStyles: {
      borderRadius: "4px",
      height: "8px",
      top: "4px",
      width: "8px",
    },
    radioIconStyles: {
      fontSize: `${fontSizeValue(-4)}px`,

<div>
        <button data-pka-anchor="datepicker.calendar.apply" size="{ShirtSizes.SMALL}" kind="{Button.Kinds.PRIMARY}">
          {I18n.t("actions.apply")}
        </button>
        <button data-pka-anchor="datepicker.calendar.cancel" size="{ShirtSizes.SMALL}" kind="{Button.Kinds.MINOR}">
          {I18n.t("actions.cancel")}
        </button>
      </div>
    
  );
}

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};
  `,
};