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

children: PropTypes.node.isRequired,

  /** Control the visibility of the modal */
  isOpen: PropTypes.bool.isRequired,

  /** Callback triggered when the modal needs to be close */
  onClose: PropTypes.func,

  /** Callback once the modal has been opened event */
  onAfterOpen: PropTypes.func,

  /** Callback once the modal has been closed event */
  onAfterClose: PropTypes.func,

  /* Control the size (max-width) of the modal */
  size: PropTypes.oneOf(ShirtSizes.DEFAULT),

  a11yText: PropTypes.string,
};

const defaultProps = {
  onAfterClose: () => {},
  onClose: () => {},
  onAfterOpen: () => {},
  size: ShirtSizes.MEDIUM,
  a11yText: null,
};

const Modal = props => {
  const { isOpen, onClose, onAfterClose, onAfterOpen, size, a11yText, ...moreProps } = props;

  const {

function handleChange(e) {
    setValue(e.target.value);
  }

  return (
    
      
        <input placeholder="Form placeholder" value="{value}">
        {text("children", "This field cannot be blank.")}
        
          <span>Description of this field.</span>
        
        
          Give me some help. <a href="wegalvanize.com">Learn more</a>.
        
      
    
  );
}

isDisabled: PropTypes.bool,

  /** Should label and children be inline or not, default is false. */
  isInline: PropTypes.bool,

  /** Should label be hidden, default is false. Note: this is discouraged because of accessibility requirements. */
  isLabelVisuallyHidden: PropTypes.bool,

  /** Should be read-only or not, default is false. */
  isReadOnly: PropTypes.bool,

  /** Label text of this field. */
  label: PropTypes.string.isRequired,

  /** Size of the label, child component, error, help and description (font size, min-height, padding, etc). */
  size: PropTypes.oneOf(ShirtSizes.DEFAULT),
};

const defaultProps = {
  hasOptionalLabel: false,
  hasRequiredLabel: false,
  id: null,
  isDisabled: false,
  isInline: false,
  isLabelVisuallyHidden: false,
  isReadOnly: false,
  size: ShirtSizes.MEDIUM,
};

function FormElement(props) {
  const {
    children,

import React from "react";
import PropTypes from "prop-types";
import Button from "@paprika/button";
import { ShirtSizes } from "@paprika/helpers/lib/customPropTypes";
import useI18n from "@paprika/l10n/lib/useI18n";
import Popover from "@paprika/popover";
import contentStyles from "./ContentStyles.styles";
import ConfirmationStyles from "./Confirmation.styles";

const propTypes = {
  buttonSize: PropTypes.oneOf(ShirtSizes.DEFAULT),
  confirmButtonType: PropTypes.oneOf(["primary", "destructive"]),
  confirmLabel: PropTypes.string.isRequired,
  description: PropTypes.node,
  onCancel: PropTypes.func.isRequired,
  onClose: PropTypes.func,
  onConfirm: PropTypes.func.isRequired,
  heading: PropTypes.string.isRequired,
};

const defaultProps = {
  buttonSize: ShirtSizes.MEDIUM,
  confirmButtonType: "destructive",
  description: null,
  onClose: () => {},
};

isSemantic: PropTypes.bool,

  /** If the type attribute should "submit", instead of the default "button". */
  isSubmit: PropTypes.bool,

  /** The visual style of the button. */
  kind: PropTypes.oneOf(Kinds.ALL),

  /** Callback to be executed when the button is clicked or activated by keyboard. Typically required. */
  onClick: PropTypes.func,

  /** Value for role attribute to override the default of "button". */
  role: PropTypes.string,

  /** Size of the button (font size, min-height, padding, etc). */
  size: PropTypes.oneOf(ShirtSizes.DEFAULT),

  /** Value for tabindex attribute to override the default of 0. */
  tabIndex: PropTypes.number,
};

const defaultProps = {
  a11yText: null,
  canPropagate: true,
  children: null,
  icon: null,
  href: null,
  isOpenNewTab: true,
  isActive: false,
  isDisabled: false,
  isDropdown: false,
  isFullWidth: false,

a11yText: PropTypes.string,

  /** If click events are allowed to propagate up the DOM tree. */
  canPropagate: PropTypes.bool,

  /** If the switch is on. */
  isChecked: PropTypes.bool,

  /** If the switch is disabled. */
  isDisabled: PropTypes.bool,

  /** Callback to be executed when the switch is toggled on or off. Typically required. */
  onChange: PropTypes.func,

  /** Size of the switch. */
  size: PropTypes.oneOf(ShirtSizes.DEFAULT),
};

const defaultProps = {
  a11yText: null,
  canPropagate: true,
  isChecked: false,
  isDisabled: false,
  onChange: () => {},
  size: ShirtSizes.MEDIUM,
};

function Switch(props) {
  const { a11yText, canPropagate, isChecked, isDisabled, size, onChange, ...moreProps } = props;

  return (

const radioProps = () => ({
  size: select("size", ShirtSizes.DEFAULT, "medium"),
  isDisabled: boolean("isDisabled", false),
  canDeselect: boolean("canDeselect", false),
  a11yLabelledByText: text("a11yLabelledByText", ""),
});

import DashIcon from "@paprika/icon/lib/Dash";
import checkboxStyles from "./Checkbox.styles";

export const checkboxStates = {
  CHECKED: "checked",
  UNCHECKED: "unchecked",
  INDETERMINATE: "indeterminate",
};

const propTypes = {
  a11yText: PropTypes.string,
  checkedState: PropTypes.oneOf(Object.values(checkboxStates)),
  children: PropTypes.node,
  isDisabled: PropTypes.bool,
  onChange: PropTypes.func.isRequired,
  size: PropTypes.oneOf(ShirtSizes.DEFAULT),
};

const defaultProps = {
  a11yText: null,
  checkedState: checkboxStates.UNCHECKED,
  children: null,
  isDisabled: false,
  size: ShirtSizes.MEDIUM,
};

const Checkbox = props => {
  const { a11yText, children, isDisabled, checkedState, size, onChange, ...moreProps } = props;
  const { CHECKED, INDETERMINATE } = checkboxStates;

  const checkboxId = React.useRef(uuid()).current;
  const inputRef = React.useRef(null);

.add("Showcase", () => {
    return (
      
    );
  })
  .add("Switch sizes", () => {

canDeselect: PropTypes.bool,

  /** Function used to evaluate which radio is selected by default. */
  defaultCheck: PropTypes.func,

  /** The individual radio itemss. */
  children: PropTypes.node,

  /** Are all radios disabled */
  isDisabled: PropTypes.bool,

  /** On change of radio selection. */
  onChange: PropTypes.func.isRequired,

  /** The size for all radio components. */
  size: PropTypes.oneOf(ShirtSizes.DEFAULT),
};

const defaultProps = {
  a11yLabelledByText: "",
  canDeselect: false,
  children: null,
  defaultCheck: () => {},
  isDisabled: false,
  size: ShirtSizes.MEDIUM,
};

function Group(props) {
  const { a11yLabelledByText, canDeselect, children, defaultCheck, ...moreGroupProps } = props;
  const defaultCheckedId = React.Children.toArray(children).find(defaultCheck).props.value.id;
  const [checkedId, setCheckedId] = React.useState(defaultCheckedId || null);
  const deselectableId = id => (checkedId === id ? null : id);