carbon-react 105.1.2 → 105.2.0

package/esm/components/button/button.component.js

@@ -1,8 +1,23 @@
-function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
+function _extends() {
+  _extends =
+    Object.assign ||
+    function (target) {
+      for (var i = 1; i < arguments.length; i++) {
+        var source = arguments[i];
+        for (var key in source) {
+          if (Object.prototype.hasOwnProperty.call(source, key)) {
+            target[key] = source[key];
+          }
+        }
+      }
+      return target;
+    };
+  return _extends.apply(this, arguments);
+}
 
-import React, { useState, useCallback } from "react";
+import React, { useCallback, useState } from "react";
 import PropTypes from "prop-types";
-import propTypes from "@styled-system/prop-types";
+import invariant from "invariant";
 import Icon from "../icon";
 import StyledButton, { StyledButtonSubtext } from "./button.style";
 import tagComponent from "../../__internal__/utils/helpers/tags/tags";
@@ -20,51 +35,110 @@ function renderChildren({
   buttonType,
   iconTooltipMessage,
   iconTooltipPosition,
-  tooltipTarget
-  /* eslint-enable */
-
+  tooltipTarget,
 }) {
   const iconColorMap = {
     primary: "--colorsActionMajorYang100",
     secondary: "--colorsActionMajor500",
     tertiary: "--colorsActionMajor500",
-    darkBackground: "--colorsActionMajor500"
+    darkBackground: "--colorsActionMajor500",
+    dashed: "--colorsActionMajor500",
   };
+
   const iconProps = {
     "aria-hidden": true,
-    type: iconType,
     disabled,
-    bgSize: "extra-small",
     color: iconColorMap[buttonType],
-    bg: "transparent"
+    bg: "transparent",
+    bgSize: "extra-small",
   };
-  return /*#__PURE__*/React.createElement(React.Fragment, null, iconType && iconPosition === "before" && children && /*#__PURE__*/React.createElement(Icon, iconProps), /*#__PURE__*/React.createElement("span", null, /*#__PURE__*/React.createElement("span", {
-    "data-element": "main-text"
-  }, children), size === "large" && /*#__PURE__*/React.createElement(StyledButtonSubtext, {
-    "data-element": "subtext"
-  }, subtext)), iconType && !children && /*#__PURE__*/React.createElement(TooltipProvider, {
-    disabled: disabled,
-    focusable: false,
-    target: tooltipTarget
-  }, /*#__PURE__*/React.createElement(Icon, _extends({}, iconProps, {
-    tooltipMessage: iconTooltipMessage,
-    tooltipPosition: iconTooltipPosition
-  }))), iconType && iconPosition === "after" && children && /*#__PURE__*/React.createElement(Icon, iconProps));
+
+  return /*#__PURE__*/ React.createElement(
+    React.Fragment,
+    null,
+    iconType &&
+      iconPosition === "before" &&
+      children &&
+      /*#__PURE__*/ React.createElement(
+        Icon,
+        _extends(
+          {
+            type: iconType,
+          },
+          iconProps
+        )
+      ),
+    /*#__PURE__*/ React.createElement(
+      "span",
+      null,
+      /*#__PURE__*/ React.createElement(
+        "span",
+        {
+          "data-element": "main-text",
+        },
+        children
+      ),
+      size === "large" &&
+        /*#__PURE__*/ React.createElement(
+          StyledButtonSubtext,
+          {
+            "data-element": "subtext",
+          },
+          subtext
+        )
+    ),
+    iconType &&
+      !children &&
+      /*#__PURE__*/ React.createElement(
+        TooltipProvider,
+        {
+          disabled: disabled,
+          focusable: false,
+          target: tooltipTarget,
+        },
+        /*#__PURE__*/ React.createElement(
+          Icon,
+          _extends(
+            {
+              type: iconType,
+            },
+            iconProps,
+            {
+              tooltipMessage: iconTooltipMessage,
+              tooltipPosition: iconTooltipPosition,
+            }
+          )
+        )
+      ),
+    iconType &&
+      iconPosition === "after" &&
+      children &&
+      /*#__PURE__*/ React.createElement(
+        Icon,
+        _extends(
+          {
+            type: iconType,
+          },
+          iconProps
+        )
+      )
+  );
 }
 
 let deprecatedWarnTriggered = false;
 
 const Button = ({
-  size,
-  subtext,
+  size = "medium",
+  subtext = "",
   as,
   children,
   forwardRef,
   "aria-label": ariaLabel,
-  disabled,
-  buttonType: buttonTypeProp,
+  disabled = false,
+  destructive = false,
+  buttonType: buttonTypeProp = "secondary",
   iconType,
-  iconPosition,
+  iconPosition = "before",
   href,
   m = 0,
   px,
@@ -73,28 +147,40 @@ const Button = ({
   rel,
   iconTooltipMessage,
   iconTooltipPosition,
+  fullWidth = false,
   ...rest
 }) => {
   if (!deprecatedWarnTriggered && as) {
     deprecatedWarnTriggered = true;
-    Logger.deprecate( // eslint-disable-next-line max-len
-    "The `as` prop is deprecated and will soon be removed from the `Button` component interface. You should use the `buttonType` prop to achieve the same styling. The following codemod is available to help with updating your code https://github.com/Sage/carbon-codemod/tree/master/transforms/rename-prop");
+    Logger.deprecate(
+      // eslint-disable-next-line max-len
+      "The `as` prop is deprecated and will soon be removed from the `Button` component interface. You should use the `buttonType` prop to achieve the same styling. The following codemod is available to help with updating your code https://github.com/Sage/carbon-codemod/tree/master/transforms/rename-prop"
+    );
   }
 
-  const [internalRef, setInternalRef] = useState(null);
-  const buttonType = as || buttonTypeProp;
+  invariant(
+    !!(children || iconType),
+    "Either prop `iconType` must be defined or this node must have children."
+  );
 
-  if (subtext.length > 0 && size !== "large") {
-    throw new Error("subtext prop has no effect unless the button is large");
+  if (subtext) {
+    invariant(
+      size === "large",
+      "subtext prop has no effect unless the button is large."
+    );
   }
 
+  const [internalRef, setInternalRef] = useState();
+  const buttonType = as || buttonTypeProp;
   let paddingX;
 
-  const handleLinkKeyDown = event => {
+  const handleLinkKeyDown = (event) => {
     // If space key click link
     if (event.key === " ") {
       event.preventDefault();
-      internalRef.click();
+      internalRef === null || internalRef === void 0
+        ? void 0
+        : internalRef.click();
     }
   };
 
@@ -111,154 +197,3217 @@ const Button = ({
       paddingX = 3;
   }
 
-  const setRefs = useCallback(reference => {
-    setInternalRef(reference);
-    if (!forwardRef) return;
-    if (typeof forwardRef === "object") forwardRef.current = reference;
-    if (typeof forwardRef === "function") forwardRef(reference);
-  }, [forwardRef]);
-  return /*#__PURE__*/React.createElement(StyledButton, _extends({
-    "aria-label": !children && iconType ? ariaLabel || iconType : undefined,
-    as: !disabled && href ? "a" : "button",
-    onKeyDown: href && handleLinkKeyDown,
-    draggable: false,
-    buttonType: buttonType,
-    disabled: disabled,
-    role: "button",
-    type: href ? undefined : "button",
-    iconType: iconType,
-    size: size,
-    px: px ?? paddingX,
-    m: m,
-    noWrap: noWrap,
-    iconOnly: !children && iconType,
-    iconPosition: iconPosition,
-    target: target,
-    rel: rel
-  }, tagComponent("button", rest), rest, href && {
-    href
-  }, {
-    ref: setRefs
-  }), renderChildren({
-    iconType,
-    iconPosition,
-    size,
-    subtext,
-    children,
-    disabled,
-    buttonType,
-    iconTooltipMessage,
-    iconTooltipPosition,
-    tooltipTarget: internalRef
-  }));
+  const setRefs = useCallback(
+    (reference) => {
+      setInternalRef(reference);
+      if (!forwardRef) return;
+      if (typeof forwardRef === "object") forwardRef.current = reference;
+      if (typeof forwardRef === "function") forwardRef(reference);
+    },
+    [forwardRef]
+  );
+  return /*#__PURE__*/ React.createElement(
+    StyledButton,
+    _extends(
+      {
+        "aria-label": !children && iconType ? ariaLabel || iconType : undefined,
+        as: !disabled && href ? "a" : "button",
+        onKeyDown: href ? handleLinkKeyDown : undefined,
+        draggable: false,
+        buttonType: buttonType,
+        disabled: disabled,
+        destructive: destructive,
+        role: "button",
+        type: href ? undefined : "button",
+        iconType: iconType,
+        size: size,
+        px: px ?? paddingX,
+        m: m,
+        noWrap: noWrap,
+        iconOnly: !!(!children && iconType),
+        iconPosition: iconPosition,
+        target: target,
+        rel: rel,
+        fullWidth: fullWidth,
+      },
+      tagComponent("button", rest),
+      rest,
+      href && {
+        href,
+      },
+      {
+        ref: setRefs,
+      }
+    ),
+    renderChildren({
+      iconType,
+      iconPosition,
+      size,
+      subtext,
+      children,
+      disabled,
+      buttonType,
+      iconTooltipMessage,
+      iconTooltipPosition,
+      tooltipTarget: internalRef,
+    })
+  );
 };
 
 Button.propTypes = {
-  /** Styled system spacing props */
-  ...propTypes.space,
-
-  /** Prop to specify the aria-label text. Only to be used in Button when only an icon is rendered. This is required to comply with WCAG 4.1.2 - Buttons must have discernible text  */
+  /**
+   * Prop to specify the aria-label text.
+   *  Only to be used in Button when only an icon is rendered.
+   * This is required to comply with WCAG 4.1.2 - Buttons must have discernible text
+   */
   "aria-label": PropTypes.string,
-
-  /** Color variants for new business themes: "primary" | "secondary" | "tertiary" | "dashed" | "darkBackground" */
-  buttonType: PropTypes.oneOf(["primary", "secondary", "tertiary", "dashed", "darkBackground"]),
-
-  /** The text the button displays */
-  children: (props, propName, ...rest) => {
-    if (!props.iconType && !props.children) {
-      return new Error("Either prop `iconType` must be defined or this node must have children.");
-    }
-
-    return PropTypes.node(props, propName, ...rest);
-  },
-
-  /** Apply disabled state to the button */
-  disabled: PropTypes.bool,
-
-  /** Apply destructive style to the button */
+  /**
+   * [Legacy] Button types for legacy theme: "primary" | "secondary"
+   */
+  as: PropTypes.oneOf([
+    "darkBackground",
+    "dashed",
+    "primary",
+    "secondary",
+    "tertiary",
+  ]),
+  /**
+   * Color variants for new business themes: "primary" | "secondary" | "tertiary" | "darkBackground"
+   */
+  buttonType: PropTypes.oneOf([
+    "darkBackground",
+    "dashed",
+    "primary",
+    "secondary",
+    "tertiary",
+  ]),
+  /**
+   * The text the button displays
+   */
+  children: PropTypes.node,
+  /**
+   * Apply destructive style to the button
+   */
   destructive: PropTypes.bool,
-
-  /** Defines an Icon position related to the children: "before" | "after" */
-  iconPosition: PropTypes.oneOf(["before", "after"]),
-
   /**
-   * <a href="https://brand.sage.com/d/NdbrveWvNheA/foundations#/icons/icons" target="_blank">List of supported icons</a>
-   *
-   * Defines an Icon type within the button (see Icon for options)
-   * */
-  iconType: (props, propName, ...rest) => {
-    if (!props.iconType && !props.children) {
-      return new Error("Either prop `iconType` must be defined or this node must have children.");
-    }
-
-    return PropTypes.node(props, propName, ...rest);
-  },
-
-  /** Assigns a size to the button: "small" | "medium" | "large" */
-  size: PropTypes.oneOf(["small", "medium", "large"]),
-
-  /** Second text child, renders under main text, only when size is "large" */
+   * Apply disabled state to the button
+   */
+  disabled: PropTypes.bool,
+  /**
+   * Ref to be forwarded
+   */
+  forwardRef: PropTypes.oneOfType([
+    PropTypes.func,
+    PropTypes.shape({
+      current: PropTypes.oneOfType([PropTypes.oneOf([null]), PropTypes.object])
+        .isRequired,
+    }),
+  ]),
+  /**
+   * Apply fullWidth style to the button
+   */
+  fullWidth: PropTypes.bool,
+  /**
+   * Used to transform button into anchor
+   */
+  href: PropTypes.string,
+  /**
+   * Defines an Icon position related to the children: "before" | "after"
+   */
+  iconPosition: PropTypes.oneOf(["after", "before"]),
+  /**
+   * Provides a tooltip message when the icon is hovered.
+   */
+  iconTooltipMessage: PropTypes.string,
+  /**
+   * Provides positioning when the tooltip is displayed.
+   */
+  iconTooltipPosition: PropTypes.oneOf(["bottom", "left", "right", "top"]),
+  /**
+   * Defines an Icon type within the button
+   */
+  iconType: PropTypes.oneOf([
+    "add",
+    "alert",
+    "analysis",
+    "arrow_down",
+    "arrow_left_boxed",
+    "arrow_left_right_small",
+    "arrow_left_small",
+    "arrow_left",
+    "arrow_right_small",
+    "arrow_right",
+    "arrow_up",
+    "attach",
+    "bank",
+    "basket_with_squares",
+    "basket",
+    "bin",
+    "block_arrow_right",
+    "blocked_square",
+    "blocked",
+    "bold",
+    "boxed_shapes",
+    "bulk_destroy",
+    "bullet_list_dotted",
+    "bullet_list_numbers",
+    "bullet_list",
+    "business",
+    "calendar_today",
+    "calendar",
+    "call",
+    "camera",
+    "card_view",
+    "caret_down",
+    "caret_large_down",
+    "caret_large_left",
+    "caret_large_right",
+    "caret_large_up",
+    "caret_left",
+    "caret_right",
+    "caret_up",
+    "cart",
+    "chart_bar",
+    "chart_line",
+    "chart_pie",
+    "chat_notes",
+    "chat",
+    "chevron_down_thick",
+    "chevron_down",
+    "chevron_left_thick",
+    "chevron_left",
+    "chevron_right_thick",
+    "chevron_right",
+    "chevron_up_thick",
+    "chevron_up",
+    "circle_with_dots",
+    "circles_connection",
+    "clock",
+    "close",
+    "coins",
+    "collaborate",
+    "computer_clock",
+    "connect",
+    "copy",
+    "credit_card_slash",
+    "credit_card",
+    "cross_circle",
+    "cross",
+    "csv",
+    "delete",
+    "delivery",
+    "disconnect",
+    "disputed",
+    "document_right_align",
+    "document_tick",
+    "document_vertical_lines",
+    "download",
+    "draft",
+    "drag_vertical",
+    "drag",
+    "dropdown",
+    "duplicate",
+    "edit",
+    "edited",
+    "ellipsis_horizontal",
+    "ellipsis_vertical",
+    "email_switch",
+    "email",
+    "error_square",
+    "error",
+    "euro",
+    "expand",
+    "factory",
+    "favourite_lined",
+    "favourite",
+    "fax",
+    "feedback",
+    "file_excel",
+    "file_generic",
+    "file_image",
+    "file_pdf",
+    "file_word",
+    "files_leaning",
+    "filter_new",
+    "filter",
+    "fit_height",
+    "fit_width",
+    "flag",
+    "folder",
+    "gift",
+    "graph",
+    "grid",
+    "help",
+    "hide",
+    "home",
+    "image",
+    "in_progress",
+    "in_transit",
+    "individual",
+    "info",
+    "italic",
+    "key",
+    "ledger_arrow_left",
+    "ledger_arrow_right",
+    "ledger",
+    "link",
+    "list_view",
+    "location",
+    "locked",
+    "logout",
+    "lookup",
+    "marker",
+    "message",
+    "messages",
+    "minus_large",
+    "minus",
+    "mobile",
+    "money_bag",
+    "pause_circle",
+    "pause",
+    "pdf",
+    "people_switch",
+    "people",
+    "person_info",
+    "person_tick",
+    "person",
+    "phone",
+    "play_circle",
+    "play",
+    "plus_large",
+    "plus",
+    "pound",
+    "print",
+    "progress",
+    "progressed",
+    "question",
+    "refresh_clock",
+    "refresh",
+    "remove",
+    "sage_coin",
+    "save",
+    "scan",
+    "search",
+    "services",
+    "settings",
+    "share",
+    "shop",
+    "sort_down",
+    "sort_up",
+    "spanner",
+    "split_container",
+    "split",
+    "square_dot",
+    "squares_nine",
+    "stacked_boxes",
+    "stacked_squares",
+    "submitted",
+    "sync",
+    "tag",
+    "three_boxes",
+    "tick_circle",
+    "tick",
+    "unlocked",
+    "upload",
+    "uploaded",
+    "video",
+    "view",
+    "warning",
+  ]),
+  /**
+   * Margin on top, left, bottom and right
+   */
+  m: PropTypes.oneOfType([
+    PropTypes.arrayOf(
+      PropTypes.oneOfType([
+        PropTypes.oneOf([null]),
+        PropTypes.number,
+        PropTypes.shape({
+          "__@toStringTag": PropTypes.string.isRequired,
+          /**
+           * Expose the [[Description]] internal slot of a symbol directly.
+           */
+          description: PropTypes.string,
+          /**
+           * Returns a string representation of an object.
+           */
+          toString: PropTypes.func.isRequired,
+          /**
+           * Returns the primitive value of the specified object.
+           */
+          valueOf: PropTypes.func.isRequired,
+        }),
+        PropTypes.string,
+      ])
+    ),
+    PropTypes.number,
+    PropTypes.object,
+    PropTypes.shape({
+      "__@toStringTag": PropTypes.string.isRequired,
+      /**
+       * Expose the [[Description]] internal slot of a symbol directly.
+       */
+      description: PropTypes.string,
+      /**
+       * Returns a string representation of an object.
+       */
+      toString: PropTypes.func.isRequired,
+      /**
+       * Returns the primitive value of the specified object.
+       */
+      valueOf: PropTypes.func.isRequired,
+    }),
+    PropTypes.string,
+  ]),
+  /**
+   * Margin on top, left, bottom and right
+   */
+  margin: PropTypes.oneOfType([
+    PropTypes.arrayOf(
+      PropTypes.oneOfType([
+        PropTypes.oneOf([null]),
+        PropTypes.number,
+        PropTypes.shape({
+          "__@toStringTag": PropTypes.string.isRequired,
+          /**
+           * Expose the [[Description]] internal slot of a symbol directly.
+           */
+          description: PropTypes.string,
+          /**
+           * Returns a string representation of an object.
+           */
+          toString: PropTypes.func.isRequired,
+          /**
+           * Returns the primitive value of the specified object.
+           */
+          valueOf: PropTypes.func.isRequired,
+        }),
+        PropTypes.string,
+      ])
+    ),
+    PropTypes.number,
+    PropTypes.object,
+    PropTypes.shape({
+      "__@toStringTag": PropTypes.string.isRequired,
+      /**
+       * Expose the [[Description]] internal slot of a symbol directly.
+       */
+      description: PropTypes.string,
+      /**
+       * Returns a string representation of an object.
+       */
+      toString: PropTypes.func.isRequired,
+      /**
+       * Returns the primitive value of the specified object.
+       */
+      valueOf: PropTypes.func.isRequired,
+    }),
+    PropTypes.string,
+  ]),
+  /**
+   * Margin on bottom
+   */
+  marginBottom: PropTypes.oneOfType([
+    PropTypes.arrayOf(
+      PropTypes.oneOfType([
+        PropTypes.oneOf([null]),
+        PropTypes.number,
+        PropTypes.shape({
+          "__@toStringTag": PropTypes.string.isRequired,
+          /**
+           * Expose the [[Description]] internal slot of a symbol directly.
+           */
+          description: PropTypes.string,
+          /**
+           * Returns a string representation of an object.
+           */
+          toString: PropTypes.func.isRequired,
+          /**
+           * Returns the primitive value of the specified object.
+           */
+          valueOf: PropTypes.func.isRequired,
+        }),
+        PropTypes.string,
+      ])
+    ),
+    PropTypes.number,
+    PropTypes.object,
+    PropTypes.shape({
+      "__@toStringTag": PropTypes.string.isRequired,
+      /**
+       * Expose the [[Description]] internal slot of a symbol directly.
+       */
+      description: PropTypes.string,
+      /**
+       * Returns a string representation of an object.
+       */
+      toString: PropTypes.func.isRequired,
+      /**
+       * Returns the primitive value of the specified object.
+       */
+      valueOf: PropTypes.func.isRequired,
+    }),
+    PropTypes.string,
+  ]),
+  /**
+   * Margin on left
+   */
+  marginLeft: PropTypes.oneOfType([
+    PropTypes.arrayOf(
+      PropTypes.oneOfType([
+        PropTypes.oneOf([null]),
+        PropTypes.number,
+        PropTypes.shape({
+          "__@toStringTag": PropTypes.string.isRequired,
+          /**
+           * Expose the [[Description]] internal slot of a symbol directly.
+           */
+          description: PropTypes.string,
+          /**
+           * Returns a string representation of an object.
+           */
+          toString: PropTypes.func.isRequired,
+          /**
+           * Returns the primitive value of the specified object.
+           */
+          valueOf: PropTypes.func.isRequired,
+        }),
+        PropTypes.string,
+      ])
+    ),
+    PropTypes.number,
+    PropTypes.object,
+    PropTypes.shape({
+      "__@toStringTag": PropTypes.string.isRequired,
+      /**
+       * Expose the [[Description]] internal slot of a symbol directly.
+       */
+      description: PropTypes.string,
+      /**
+       * Returns a string representation of an object.
+       */
+      toString: PropTypes.func.isRequired,
+      /**
+       * Returns the primitive value of the specified object.
+       */
+      valueOf: PropTypes.func.isRequired,
+    }),
+    PropTypes.string,
+  ]),
+  /**
+   * Margin on right
+   */
+  marginRight: PropTypes.oneOfType([
+    PropTypes.arrayOf(
+      PropTypes.oneOfType([
+        PropTypes.oneOf([null]),
+        PropTypes.number,
+        PropTypes.shape({
+          "__@toStringTag": PropTypes.string.isRequired,
+          /**
+           * Expose the [[Description]] internal slot of a symbol directly.
+           */
+          description: PropTypes.string,
+          /**
+           * Returns a string representation of an object.
+           */
+          toString: PropTypes.func.isRequired,
+          /**
+           * Returns the primitive value of the specified object.
+           */
+          valueOf: PropTypes.func.isRequired,
+        }),
+        PropTypes.string,
+      ])
+    ),
+    PropTypes.number,
+    PropTypes.object,
+    PropTypes.shape({
+      "__@toStringTag": PropTypes.string.isRequired,
+      /**
+       * Expose the [[Description]] internal slot of a symbol directly.
+       */
+      description: PropTypes.string,
+      /**
+       * Returns a string representation of an object.
+       */
+      toString: PropTypes.func.isRequired,
+      /**
+       * Returns the primitive value of the specified object.
+       */
+      valueOf: PropTypes.func.isRequired,
+    }),
+    PropTypes.string,
+  ]),
+  /**
+   * Margin on top
+   */
+  marginTop: PropTypes.oneOfType([
+    PropTypes.arrayOf(
+      PropTypes.oneOfType([
+        PropTypes.oneOf([null]),
+        PropTypes.number,
+        PropTypes.shape({
+          "__@toStringTag": PropTypes.string.isRequired,
+          /**
+           * Expose the [[Description]] internal slot of a symbol directly.
+           */
+          description: PropTypes.string,
+          /**
+           * Returns a string representation of an object.
+           */
+          toString: PropTypes.func.isRequired,
+          /**
+           * Returns the primitive value of the specified object.
+           */
+          valueOf: PropTypes.func.isRequired,
+        }),
+        PropTypes.string,
+      ])
+    ),
+    PropTypes.number,
+    PropTypes.object,
+    PropTypes.shape({
+      "__@toStringTag": PropTypes.string.isRequired,
+      /**
+       * Expose the [[Description]] internal slot of a symbol directly.
+       */
+      description: PropTypes.string,
+      /**
+       * Returns a string representation of an object.
+       */
+      toString: PropTypes.func.isRequired,
+      /**
+       * Returns the primitive value of the specified object.
+       */
+      valueOf: PropTypes.func.isRequired,
+    }),
+    PropTypes.string,
+  ]),
+  /**
+   * Margin on left and right
+   */
+  marginX: PropTypes.oneOfType([
+    PropTypes.arrayOf(
+      PropTypes.oneOfType([
+        PropTypes.oneOf([null]),
+        PropTypes.number,
+        PropTypes.shape({
+          "__@toStringTag": PropTypes.string.isRequired,
+          /**
+           * Expose the [[Description]] internal slot of a symbol directly.
+           */
+          description: PropTypes.string,
+          /**
+           * Returns a string representation of an object.
+           */
+          toString: PropTypes.func.isRequired,
+          /**
+           * Returns the primitive value of the specified object.
+           */
+          valueOf: PropTypes.func.isRequired,
+        }),
+        PropTypes.string,
+      ])
+    ),
+    PropTypes.number,
+    PropTypes.object,
+    PropTypes.shape({
+      "__@toStringTag": PropTypes.string.isRequired,
+      /**
+       * Expose the [[Description]] internal slot of a symbol directly.
+       */
+      description: PropTypes.string,
+      /**
+       * Returns a string representation of an object.
+       */
+      toString: PropTypes.func.isRequired,
+      /**
+       * Returns the primitive value of the specified object.
+       */
+      valueOf: PropTypes.func.isRequired,
+    }),
+    PropTypes.string,
+  ]),
+  /**
+   * Margin on top and bottom
+   */
+  marginY: PropTypes.oneOfType([
+    PropTypes.arrayOf(
+      PropTypes.oneOfType([
+        PropTypes.oneOf([null]),
+        PropTypes.number,
+        PropTypes.shape({
+          "__@toStringTag": PropTypes.string.isRequired,
+          /**
+           * Expose the [[Description]] internal slot of a symbol directly.
+           */
+          description: PropTypes.string,
+          /**
+           * Returns a string representation of an object.
+           */
+          toString: PropTypes.func.isRequired,
+          /**
+           * Returns the primitive value of the specified object.
+           */
+          valueOf: PropTypes.func.isRequired,
+        }),
+        PropTypes.string,
+      ])
+    ),
+    PropTypes.number,
+    PropTypes.object,
+    PropTypes.shape({
+      "__@toStringTag": PropTypes.string.isRequired,
+      /**
+       * Expose the [[Description]] internal slot of a symbol directly.
+       */
+      description: PropTypes.string,
+      /**
+       * Returns a string representation of an object.
+       */
+      toString: PropTypes.func.isRequired,
+      /**
+       * Returns the primitive value of the specified object.
+       */
+      valueOf: PropTypes.func.isRequired,
+    }),
+    PropTypes.string,
+  ]),
+  /**
+   * Margin on bottom
+   */
+  mb: PropTypes.oneOfType([
+    PropTypes.arrayOf(
+      PropTypes.oneOfType([
+        PropTypes.oneOf([null]),
+        PropTypes.number,
+        PropTypes.shape({
+          "__@toStringTag": PropTypes.string.isRequired,
+          /**
+           * Expose the [[Description]] internal slot of a symbol directly.
+           */
+          description: PropTypes.string,
+          /**
+           * Returns a string representation of an object.
+           */
+          toString: PropTypes.func.isRequired,
+          /**
+           * Returns the primitive value of the specified object.
+           */
+          valueOf: PropTypes.func.isRequired,
+        }),
+        PropTypes.string,
+      ])
+    ),
+    PropTypes.number,
+    PropTypes.object,
+    PropTypes.shape({
+      "__@toStringTag": PropTypes.string.isRequired,
+      /**
+       * Expose the [[Description]] internal slot of a symbol directly.
+       */
+      description: PropTypes.string,
+      /**
+       * Returns a string representation of an object.
+       */
+      toString: PropTypes.func.isRequired,
+      /**
+       * Returns the primitive value of the specified object.
+       */
+      valueOf: PropTypes.func.isRequired,
+    }),
+    PropTypes.string,
+  ]),
+  /**
+   * Margin on left
+   */
+  ml: PropTypes.oneOfType([
+    PropTypes.arrayOf(
+      PropTypes.oneOfType([
+        PropTypes.oneOf([null]),
+        PropTypes.number,
+        PropTypes.shape({
+          "__@toStringTag": PropTypes.string.isRequired,
+          /**
+           * Expose the [[Description]] internal slot of a symbol directly.
+           */
+          description: PropTypes.string,
+          /**
+           * Returns a string representation of an object.
+           */
+          toString: PropTypes.func.isRequired,
+          /**
+           * Returns the primitive value of the specified object.
+           */
+          valueOf: PropTypes.func.isRequired,
+        }),
+        PropTypes.string,
+      ])
+    ),
+    PropTypes.number,
+    PropTypes.object,
+    PropTypes.shape({
+      "__@toStringTag": PropTypes.string.isRequired,
+      /**
+       * Expose the [[Description]] internal slot of a symbol directly.
+       */
+      description: PropTypes.string,
+      /**
+       * Returns a string representation of an object.
+       */
+      toString: PropTypes.func.isRequired,
+      /**
+       * Returns the primitive value of the specified object.
+       */
+      valueOf: PropTypes.func.isRequired,
+    }),
+    PropTypes.string,
+  ]),
+  /**
+   * Margin on right
+   */
+  mr: PropTypes.oneOfType([
+    PropTypes.arrayOf(
+      PropTypes.oneOfType([
+        PropTypes.oneOf([null]),
+        PropTypes.number,
+        PropTypes.shape({
+          "__@toStringTag": PropTypes.string.isRequired,
+          /**
+           * Expose the [[Description]] internal slot of a symbol directly.
+           */
+          description: PropTypes.string,
+          /**
+           * Returns a string representation of an object.
+           */
+          toString: PropTypes.func.isRequired,
+          /**
+           * Returns the primitive value of the specified object.
+           */
+          valueOf: PropTypes.func.isRequired,
+        }),
+        PropTypes.string,
+      ])
+    ),
+    PropTypes.number,
+    PropTypes.object,
+    PropTypes.shape({
+      "__@toStringTag": PropTypes.string.isRequired,
+      /**
+       * Expose the [[Description]] internal slot of a symbol directly.
+       */
+      description: PropTypes.string,
+      /**
+       * Returns a string representation of an object.
+       */
+      toString: PropTypes.func.isRequired,
+      /**
+       * Returns the primitive value of the specified object.
+       */
+      valueOf: PropTypes.func.isRequired,
+    }),
+    PropTypes.string,
+  ]),
+  /**
+   * Margin on top
+   */
+  mt: PropTypes.oneOfType([
+    PropTypes.arrayOf(
+      PropTypes.oneOfType([
+        PropTypes.oneOf([null]),
+        PropTypes.number,
+        PropTypes.shape({
+          "__@toStringTag": PropTypes.string.isRequired,
+          /**
+           * Expose the [[Description]] internal slot of a symbol directly.
+           */
+          description: PropTypes.string,
+          /**
+           * Returns a string representation of an object.
+           */
+          toString: PropTypes.func.isRequired,
+          /**
+           * Returns the primitive value of the specified object.
+           */
+          valueOf: PropTypes.func.isRequired,
+        }),
+        PropTypes.string,
+      ])
+    ),
+    PropTypes.number,
+    PropTypes.object,
+    PropTypes.shape({
+      "__@toStringTag": PropTypes.string.isRequired,
+      /**
+       * Expose the [[Description]] internal slot of a symbol directly.
+       */
+      description: PropTypes.string,
+      /**
+       * Returns a string representation of an object.
+       */
+      toString: PropTypes.func.isRequired,
+      /**
+       * Returns the primitive value of the specified object.
+       */
+      valueOf: PropTypes.func.isRequired,
+    }),
+    PropTypes.string,
+  ]),
+  /**
+   * Margin on left and right
+   */
+  mx: PropTypes.oneOfType([
+    PropTypes.arrayOf(
+      PropTypes.oneOfType([
+        PropTypes.oneOf([null]),
+        PropTypes.number,
+        PropTypes.shape({
+          "__@toStringTag": PropTypes.string.isRequired,
+          /**
+           * Expose the [[Description]] internal slot of a symbol directly.
+           */
+          description: PropTypes.string,
+          /**
+           * Returns a string representation of an object.
+           */
+          toString: PropTypes.func.isRequired,
+          /**
+           * Returns the primitive value of the specified object.
+           */
+          valueOf: PropTypes.func.isRequired,
+        }),
+        PropTypes.string,
+      ])
+    ),
+    PropTypes.number,
+    PropTypes.object,
+    PropTypes.shape({
+      "__@toStringTag": PropTypes.string.isRequired,
+      /**
+       * Expose the [[Description]] internal slot of a symbol directly.
+       */
+      description: PropTypes.string,
+      /**
+       * Returns a string representation of an object.
+       */
+      toString: PropTypes.func.isRequired,
+      /**
+       * Returns the primitive value of the specified object.
+       */
+      valueOf: PropTypes.func.isRequired,
+    }),
+    PropTypes.string,
+  ]),
+  /**
+   * Margin on top and bottom
+   */
+  my: PropTypes.oneOfType([
+    PropTypes.arrayOf(
+      PropTypes.oneOfType([
+        PropTypes.oneOf([null]),
+        PropTypes.number,
+        PropTypes.shape({
+          "__@toStringTag": PropTypes.string.isRequired,
+          /**
+           * Expose the [[Description]] internal slot of a symbol directly.
+           */
+          description: PropTypes.string,
+          /**
+           * Returns a string representation of an object.
+           */
+          toString: PropTypes.func.isRequired,
+          /**
+           * Returns the primitive value of the specified object.
+           */
+          valueOf: PropTypes.func.isRequired,
+        }),
+        PropTypes.string,
+      ])
+    ),
+    PropTypes.number,
+    PropTypes.object,
+    PropTypes.shape({
+      "__@toStringTag": PropTypes.string.isRequired,
+      /**
+       * Expose the [[Description]] internal slot of a symbol directly.
+       */
+      description: PropTypes.string,
+      /**
+       * Returns a string representation of an object.
+       */
+      toString: PropTypes.func.isRequired,
+      /**
+       * Returns the primitive value of the specified object.
+       */
+      valueOf: PropTypes.func.isRequired,
+    }),
+    PropTypes.string,
+  ]),
+  /**
+   * Name attribute
+   */
+  name: PropTypes.string,
+  /**
+   * If provided, the text inside a button will not wrap
+   */
+  noWrap: PropTypes.bool,
+  /**
+   * Specify a callback triggered on blur
+   */
+  onBlur: PropTypes.func,
+  /**
+   * Specify a callback triggered on change
+   */
+  onChange: PropTypes.func,
+  /**
+   * onClick handler
+   */
+  onClick: PropTypes.func,
+  /**
+   * Specify a callback triggered on focus
+   */
+  onFocus: PropTypes.func,
+  /**
+   * Specify a callback triggered on keyDown
+   */
+  onKeyDown: PropTypes.func,
+  /**
+   * Padding on top, left, bottom and right
+   */
+  p: PropTypes.oneOfType([
+    PropTypes.arrayOf(
+      PropTypes.oneOfType([
+        PropTypes.oneOf([null]),
+        PropTypes.number,
+        PropTypes.shape({
+          "__@toStringTag": PropTypes.string.isRequired,
+          /**
+           * Expose the [[Description]] internal slot of a symbol directly.
+           */
+          description: PropTypes.string,
+          /**
+           * Returns a string representation of an object.
+           */
+          toString: PropTypes.func.isRequired,
+          /**
+           * Returns the primitive value of the specified object.
+           */
+          valueOf: PropTypes.func.isRequired,
+        }),
+        PropTypes.string,
+      ])
+    ),
+    PropTypes.number,
+    PropTypes.object,
+    PropTypes.shape({
+      "__@toStringTag": PropTypes.string.isRequired,
+      /**
+       * Expose the [[Description]] internal slot of a symbol directly.
+       */
+      description: PropTypes.string,
+      /**
+       * Returns a string representation of an object.
+       */
+      toString: PropTypes.func.isRequired,
+      /**
+       * Returns the primitive value of the specified object.
+       */
+      valueOf: PropTypes.func.isRequired,
+    }),
+    PropTypes.string,
+  ]),
+  /**
+   * Padding on top, left, bottom and right
+   */
+  padding: PropTypes.oneOfType([
+    PropTypes.arrayOf(
+      PropTypes.oneOfType([
+        PropTypes.oneOf([null]),
+        PropTypes.number,
+        PropTypes.shape({
+          "__@toStringTag": PropTypes.string.isRequired,
+          /**
+           * Expose the [[Description]] internal slot of a symbol directly.
+           */
+          description: PropTypes.string,
+          /**
+           * Returns a string representation of an object.
+           */
+          toString: PropTypes.func.isRequired,
+          /**
+           * Returns the primitive value of the specified object.
+           */
+          valueOf: PropTypes.func.isRequired,
+        }),
+        PropTypes.string,
+      ])
+    ),
+    PropTypes.number,
+    PropTypes.object,
+    PropTypes.shape({
+      "__@toStringTag": PropTypes.string.isRequired,
+      /**
+       * Expose the [[Description]] internal slot of a symbol directly.
+       */
+      description: PropTypes.string,
+      /**
+       * Returns a string representation of an object.
+       */
+      toString: PropTypes.func.isRequired,
+      /**
+       * Returns the primitive value of the specified object.
+       */
+      valueOf: PropTypes.func.isRequired,
+    }),
+    PropTypes.string,
+  ]),
+  /**
+   * Padding on bottom
+   */
+  paddingBottom: PropTypes.oneOfType([
+    PropTypes.arrayOf(
+      PropTypes.oneOfType([
+        PropTypes.oneOf([null]),
+        PropTypes.number,
+        PropTypes.shape({
+          "__@toStringTag": PropTypes.string.isRequired,
+          /**
+           * Expose the [[Description]] internal slot of a symbol directly.
+           */
+          description: PropTypes.string,
+          /**
+           * Returns a string representation of an object.
+           */
+          toString: PropTypes.func.isRequired,
+          /**
+           * Returns the primitive value of the specified object.
+           */
+          valueOf: PropTypes.func.isRequired,
+        }),
+        PropTypes.string,
+      ])
+    ),
+    PropTypes.number,
+    PropTypes.object,
+    PropTypes.shape({
+      "__@toStringTag": PropTypes.string.isRequired,
+      /**
+       * Expose the [[Description]] internal slot of a symbol directly.
+       */
+      description: PropTypes.string,
+      /**
+       * Returns a string representation of an object.
+       */
+      toString: PropTypes.func.isRequired,
+      /**
+       * Returns the primitive value of the specified object.
+       */
+      valueOf: PropTypes.func.isRequired,
+    }),
+    PropTypes.string,
+  ]),
+  /**
+   * Padding on left
+   */
+  paddingLeft: PropTypes.oneOfType([
+    PropTypes.arrayOf(
+      PropTypes.oneOfType([
+        PropTypes.oneOf([null]),
+        PropTypes.number,
+        PropTypes.shape({
+          "__@toStringTag": PropTypes.string.isRequired,
+          /**
+           * Expose the [[Description]] internal slot of a symbol directly.
+           */
+          description: PropTypes.string,
+          /**
+           * Returns a string representation of an object.
+           */
+          toString: PropTypes.func.isRequired,
+          /**
+           * Returns the primitive value of the specified object.
+           */
+          valueOf: PropTypes.func.isRequired,
+        }),
+        PropTypes.string,
+      ])
+    ),
+    PropTypes.number,
+    PropTypes.object,
+    PropTypes.shape({
+      "__@toStringTag": PropTypes.string.isRequired,
+      /**
+       * Expose the [[Description]] internal slot of a symbol directly.
+       */
+      description: PropTypes.string,
+      /**
+       * Returns a string representation of an object.
+       */
+      toString: PropTypes.func.isRequired,
+      /**
+       * Returns the primitive value of the specified object.
+       */
+      valueOf: PropTypes.func.isRequired,
+    }),
+    PropTypes.string,
+  ]),
+  /**
+   * Padding on right
+   */
+  paddingRight: PropTypes.oneOfType([
+    PropTypes.arrayOf(
+      PropTypes.oneOfType([
+        PropTypes.oneOf([null]),
+        PropTypes.number,
+        PropTypes.shape({
+          "__@toStringTag": PropTypes.string.isRequired,
+          /**
+           * Expose the [[Description]] internal slot of a symbol directly.
+           */
+          description: PropTypes.string,
+          /**
+           * Returns a string representation of an object.
+           */
+          toString: PropTypes.func.isRequired,
+          /**
+           * Returns the primitive value of the specified object.
+           */
+          valueOf: PropTypes.func.isRequired,
+        }),
+        PropTypes.string,
+      ])
+    ),
+    PropTypes.number,
+    PropTypes.object,
+    PropTypes.shape({
+      "__@toStringTag": PropTypes.string.isRequired,
+      /**
+       * Expose the [[Description]] internal slot of a symbol directly.
+       */
+      description: PropTypes.string,
+      /**
+       * Returns a string representation of an object.
+       */
+      toString: PropTypes.func.isRequired,
+      /**
+       * Returns the primitive value of the specified object.
+       */
+      valueOf: PropTypes.func.isRequired,
+    }),
+    PropTypes.string,
+  ]),
+  /**
+   * Padding on top
+   */
+  paddingTop: PropTypes.oneOfType([
+    PropTypes.arrayOf(
+      PropTypes.oneOfType([
+        PropTypes.oneOf([null]),
+        PropTypes.number,
+        PropTypes.shape({
+          "__@toStringTag": PropTypes.string.isRequired,
+          /**
+           * Expose the [[Description]] internal slot of a symbol directly.
+           */
+          description: PropTypes.string,
+          /**
+           * Returns a string representation of an object.
+           */
+          toString: PropTypes.func.isRequired,
+          /**
+           * Returns the primitive value of the specified object.
+           */
+          valueOf: PropTypes.func.isRequired,
+        }),
+        PropTypes.string,
+      ])
+    ),
+    PropTypes.number,
+    PropTypes.object,
+    PropTypes.shape({
+      "__@toStringTag": PropTypes.string.isRequired,
+      /**
+       * Expose the [[Description]] internal slot of a symbol directly.
+       */
+      description: PropTypes.string,
+      /**
+       * Returns a string representation of an object.
+       */
+      toString: PropTypes.func.isRequired,
+      /**
+       * Returns the primitive value of the specified object.
+       */
+      valueOf: PropTypes.func.isRequired,
+    }),
+    PropTypes.string,
+  ]),
+  /**
+   * Padding on left and right
+   */
+  paddingX: PropTypes.oneOfType([
+    PropTypes.arrayOf(
+      PropTypes.oneOfType([
+        PropTypes.oneOf([null]),
+        PropTypes.number,
+        PropTypes.shape({
+          "__@toStringTag": PropTypes.string.isRequired,
+          /**
+           * Expose the [[Description]] internal slot of a symbol directly.
+           */
+          description: PropTypes.string,
+          /**
+           * Returns a string representation of an object.
+           */
+          toString: PropTypes.func.isRequired,
+          /**
+           * Returns the primitive value of the specified object.
+           */
+          valueOf: PropTypes.func.isRequired,
+        }),
+        PropTypes.string,
+      ])
+    ),
+    PropTypes.number,
+    PropTypes.object,
+    PropTypes.shape({
+      "__@toStringTag": PropTypes.string.isRequired,
+      /**
+       * Expose the [[Description]] internal slot of a symbol directly.
+       */
+      description: PropTypes.string,
+      /**
+       * Returns a string representation of an object.
+       */
+      toString: PropTypes.func.isRequired,
+      /**
+       * Returns the primitive value of the specified object.
+       */
+      valueOf: PropTypes.func.isRequired,
+    }),
+    PropTypes.string,
+  ]),
+  /**
+   * Padding on top and bottom
+   */
+  paddingY: PropTypes.oneOfType([
+    PropTypes.arrayOf(
+      PropTypes.oneOfType([
+        PropTypes.oneOf([null]),
+        PropTypes.number,
+        PropTypes.shape({
+          "__@toStringTag": PropTypes.string.isRequired,
+          /**
+           * Expose the [[Description]] internal slot of a symbol directly.
+           */
+          description: PropTypes.string,
+          /**
+           * Returns a string representation of an object.
+           */
+          toString: PropTypes.func.isRequired,
+          /**
+           * Returns the primitive value of the specified object.
+           */
+          valueOf: PropTypes.func.isRequired,
+        }),
+        PropTypes.string,
+      ])
+    ),
+    PropTypes.number,
+    PropTypes.object,
+    PropTypes.shape({
+      "__@toStringTag": PropTypes.string.isRequired,
+      /**
+       * Expose the [[Description]] internal slot of a symbol directly.
+       */
+      description: PropTypes.string,
+      /**
+       * Returns a string representation of an object.
+       */
+      toString: PropTypes.func.isRequired,
+      /**
+       * Returns the primitive value of the specified object.
+       */
+      valueOf: PropTypes.func.isRequired,
+    }),
+    PropTypes.string,
+  ]),
+  /**
+   * Padding on bottom
+   */
+  pb: PropTypes.oneOfType([
+    PropTypes.arrayOf(
+      PropTypes.oneOfType([
+        PropTypes.oneOf([null]),
+        PropTypes.number,
+        PropTypes.shape({
+          "__@toStringTag": PropTypes.string.isRequired,
+          /**
+           * Expose the [[Description]] internal slot of a symbol directly.
+           */
+          description: PropTypes.string,
+          /**
+           * Returns a string representation of an object.
+           */
+          toString: PropTypes.func.isRequired,
+          /**
+           * Returns the primitive value of the specified object.
+           */
+          valueOf: PropTypes.func.isRequired,
+        }),
+        PropTypes.string,
+      ])
+    ),
+    PropTypes.number,
+    PropTypes.object,
+    PropTypes.shape({
+      "__@toStringTag": PropTypes.string.isRequired,
+      /**
+       * Expose the [[Description]] internal slot of a symbol directly.
+       */
+      description: PropTypes.string,
+      /**
+       * Returns a string representation of an object.
+       */
+      toString: PropTypes.func.isRequired,
+      /**
+       * Returns the primitive value of the specified object.
+       */
+      valueOf: PropTypes.func.isRequired,
+    }),
+    PropTypes.string,
+  ]),
+  /**
+   * Padding on left
+   */
+  pl: PropTypes.oneOfType([
+    PropTypes.arrayOf(
+      PropTypes.oneOfType([
+        PropTypes.oneOf([null]),
+        PropTypes.number,
+        PropTypes.shape({
+          "__@toStringTag": PropTypes.string.isRequired,
+          /**
+           * Expose the [[Description]] internal slot of a symbol directly.
+           */
+          description: PropTypes.string,
+          /**
+           * Returns a string representation of an object.
+           */
+          toString: PropTypes.func.isRequired,
+          /**
+           * Returns the primitive value of the specified object.
+           */
+          valueOf: PropTypes.func.isRequired,
+        }),
+        PropTypes.string,
+      ])
+    ),
+    PropTypes.number,
+    PropTypes.object,
+    PropTypes.shape({
+      "__@toStringTag": PropTypes.string.isRequired,
+      /**
+       * Expose the [[Description]] internal slot of a symbol directly.
+       */
+      description: PropTypes.string,
+      /**
+       * Returns a string representation of an object.
+       */
+      toString: PropTypes.func.isRequired,
+      /**
+       * Returns the primitive value of the specified object.
+       */
+      valueOf: PropTypes.func.isRequired,
+    }),
+    PropTypes.string,
+  ]),
+  /**
+   * Padding on right
+   */
+  pr: PropTypes.oneOfType([
+    PropTypes.arrayOf(
+      PropTypes.oneOfType([
+        PropTypes.oneOf([null]),
+        PropTypes.number,
+        PropTypes.shape({
+          "__@toStringTag": PropTypes.string.isRequired,
+          /**
+           * Expose the [[Description]] internal slot of a symbol directly.
+           */
+          description: PropTypes.string,
+          /**
+           * Returns a string representation of an object.
+           */
+          toString: PropTypes.func.isRequired,
+          /**
+           * Returns the primitive value of the specified object.
+           */
+          valueOf: PropTypes.func.isRequired,
+        }),
+        PropTypes.string,
+      ])
+    ),
+    PropTypes.number,
+    PropTypes.object,
+    PropTypes.shape({
+      "__@toStringTag": PropTypes.string.isRequired,
+      /**
+       * Expose the [[Description]] internal slot of a symbol directly.
+       */
+      description: PropTypes.string,
+      /**
+       * Returns a string representation of an object.
+       */
+      toString: PropTypes.func.isRequired,
+      /**
+       * Returns the primitive value of the specified object.
+       */
+      valueOf: PropTypes.func.isRequired,
+    }),
+    PropTypes.string,
+  ]),
+  /**
+   * Padding on top
+   */
+  pt: PropTypes.oneOfType([
+    PropTypes.arrayOf(
+      PropTypes.oneOfType([
+        PropTypes.oneOf([null]),
+        PropTypes.number,
+        PropTypes.shape({
+          "__@toStringTag": PropTypes.string.isRequired,
+          /**
+           * Expose the [[Description]] internal slot of a symbol directly.
+           */
+          description: PropTypes.string,
+          /**
+           * Returns a string representation of an object.
+           */
+          toString: PropTypes.func.isRequired,
+          /**
+           * Returns the primitive value of the specified object.
+           */
+          valueOf: PropTypes.func.isRequired,
+        }),
+        PropTypes.string,
+      ])
+    ),
+    PropTypes.number,
+    PropTypes.object,
+    PropTypes.shape({
+      "__@toStringTag": PropTypes.string.isRequired,
+      /**
+       * Expose the [[Description]] internal slot of a symbol directly.
+       */
+      description: PropTypes.string,
+      /**
+       * Returns a string representation of an object.
+       */
+      toString: PropTypes.func.isRequired,
+      /**
+       * Returns the primitive value of the specified object.
+       */
+      valueOf: PropTypes.func.isRequired,
+    }),
+    PropTypes.string,
+  ]),
+  /**
+   * Padding on left and right
+   */
+  px: PropTypes.oneOfType([
+    PropTypes.arrayOf(
+      PropTypes.oneOfType([
+        PropTypes.oneOf([null]),
+        PropTypes.number,
+        PropTypes.shape({
+          "__@toStringTag": PropTypes.string.isRequired,
+          /**
+           * Expose the [[Description]] internal slot of a symbol directly.
+           */
+          description: PropTypes.string,
+          /**
+           * Returns a string representation of an object.
+           */
+          toString: PropTypes.func.isRequired,
+          /**
+           * Returns the primitive value of the specified object.
+           */
+          valueOf: PropTypes.func.isRequired,
+        }),
+        PropTypes.string,
+      ])
+    ),
+    PropTypes.number,
+    PropTypes.object,
+    PropTypes.shape({
+      "__@toStringTag": PropTypes.string.isRequired,
+      /**
+       * Expose the [[Description]] internal slot of a symbol directly.
+       */
+      description: PropTypes.string,
+      /**
+       * Returns a string representation of an object.
+       */
+      toString: PropTypes.func.isRequired,
+      /**
+       * Returns the primitive value of the specified object.
+       */
+      valueOf: PropTypes.func.isRequired,
+    }),
+    PropTypes.string,
+  ]),
+  /**
+   * Padding on top and bottom
+   */
+  py: PropTypes.oneOfType([
+    PropTypes.arrayOf(
+      PropTypes.oneOfType([
+        PropTypes.oneOf([null]),
+        PropTypes.number,
+        PropTypes.shape({
+          "__@toStringTag": PropTypes.string.isRequired,
+          /**
+           * Expose the [[Description]] internal slot of a symbol directly.
+           */
+          description: PropTypes.string,
+          /**
+           * Returns a string representation of an object.
+           */
+          toString: PropTypes.func.isRequired,
+          /**
+           * Returns the primitive value of the specified object.
+           */
+          valueOf: PropTypes.func.isRequired,
+        }),
+        PropTypes.string,
+      ])
+    ),
+    PropTypes.number,
+    PropTypes.object,
+    PropTypes.shape({
+      "__@toStringTag": PropTypes.string.isRequired,
+      /**
+       * Expose the [[Description]] internal slot of a symbol directly.
+       */
+      description: PropTypes.string,
+      /**
+       * Returns a string representation of an object.
+       */
+      toString: PropTypes.func.isRequired,
+      /**
+       * Returns the primitive value of the specified object.
+       */
+      valueOf: PropTypes.func.isRequired,
+    }),
+    PropTypes.string,
+  ]),
+  /**
+   * HTML rel attribute
+   */
+  rel: PropTypes.string,
+  /**
+   * Assigns a size to the button: "small" | "medium" | "large"
+   */
+  size: PropTypes.oneOf(["large", "medium", "small"]),
+  /**
+   * Second text child, renders under main text, only when size is "large"
+   */
   subtext: PropTypes.string,
+  /**
+   * HTML target attribute
+   */
+  target: PropTypes.string,
+  /**
+   * HTML button type property
+   */
+  type: PropTypes.string,
+};
 
-  /** Ref to be forwarded */
-  forwardRef: PropTypes.oneOfType([PropTypes.object, PropTypes.func]),
-
-  /** Button types for legacy theme: "primary" | "secondary" */
-  as: PropTypes.oneOf(["primary", "secondary"]),
-
-  /** Used to transform button into anchor */
-  href: PropTypes.string,
+const ButtonWithForwardRef = /*#__PURE__*/ React.forwardRef((props, ref) =>
+  /*#__PURE__*/ React.createElement(
+    Button,
+    _extends(
+      {
+        forwardRef: ref,
+      },
+      props
+    )
+  )
+);
 
-  /** Apply fullWidth style to the button */
+ButtonWithForwardRef.propTypes = {
+  /**
+   * Prop to specify the aria-label text.
+   *  Only to be used in Button when only an icon is rendered.
+   * This is required to comply with WCAG 4.1.2 - Buttons must have discernible text
+   */
+  "aria-label": PropTypes.string,
+  /**
+   * [Legacy] Button types for legacy theme: "primary" | "secondary"
+   */
+  as: PropTypes.oneOf([
+    "darkBackground",
+    "dashed",
+    "primary",
+    "secondary",
+    "tertiary",
+  ]),
+  /**
+   * Color variants for new business themes: "primary" | "secondary" | "tertiary" | "darkBackground"
+   */
+  buttonType: PropTypes.oneOf([
+    "darkBackground",
+    "dashed",
+    "primary",
+    "secondary",
+    "tertiary",
+  ]),
+  /**
+   * The text the button displays
+   */
+  children: PropTypes.node,
+  /**
+   * Apply destructive style to the button
+   */
+  destructive: PropTypes.bool,
+  /**
+   * Apply disabled state to the button
+   */
+  disabled: PropTypes.bool,
+  /**
+   * Ref to be forwarded
+   */
+  forwardRef: PropTypes.oneOfType([
+    PropTypes.func,
+    PropTypes.shape({
+      current: PropTypes.oneOfType([PropTypes.oneOf([null]), PropTypes.object])
+        .isRequired,
+    }),
+  ]),
+  /**
+   * Apply fullWidth style to the button
+   */
   fullWidth: PropTypes.bool,
-
-  /** If provided, the text inside a button will not wrap */
+  /**
+   * Used to transform button into anchor
+   */
+  href: PropTypes.string,
+  /**
+   * Defines an Icon position related to the children: "before" | "after"
+   */
+  iconPosition: PropTypes.oneOf(["after", "before"]),
+  /**
+   * Provides a tooltip message when the icon is hovered.
+   */
+  iconTooltipMessage: PropTypes.string,
+  /**
+   * Provides positioning when the tooltip is displayed.
+   */
+  iconTooltipPosition: PropTypes.oneOf(["bottom", "left", "right", "top"]),
+  /**
+   * Defines an Icon type within the button
+   */
+  iconType: PropTypes.oneOf([
+    "add",
+    "alert",
+    "analysis",
+    "arrow_down",
+    "arrow_left_boxed",
+    "arrow_left_right_small",
+    "arrow_left_small",
+    "arrow_left",
+    "arrow_right_small",
+    "arrow_right",
+    "arrow_up",
+    "attach",
+    "bank",
+    "basket_with_squares",
+    "basket",
+    "bin",
+    "block_arrow_right",
+    "blocked_square",
+    "blocked",
+    "bold",
+    "boxed_shapes",
+    "bulk_destroy",
+    "bullet_list_dotted",
+    "bullet_list_numbers",
+    "bullet_list",
+    "business",
+    "calendar_today",
+    "calendar",
+    "call",
+    "camera",
+    "card_view",
+    "caret_down",
+    "caret_large_down",
+    "caret_large_left",
+    "caret_large_right",
+    "caret_large_up",
+    "caret_left",
+    "caret_right",
+    "caret_up",
+    "cart",
+    "chart_bar",
+    "chart_line",
+    "chart_pie",
+    "chat_notes",
+    "chat",
+    "chevron_down_thick",
+    "chevron_down",
+    "chevron_left_thick",
+    "chevron_left",
+    "chevron_right_thick",
+    "chevron_right",
+    "chevron_up_thick",
+    "chevron_up",
+    "circle_with_dots",
+    "circles_connection",
+    "clock",
+    "close",
+    "coins",
+    "collaborate",
+    "computer_clock",
+    "connect",
+    "copy",
+    "credit_card_slash",
+    "credit_card",
+    "cross_circle",
+    "cross",
+    "csv",
+    "delete",
+    "delivery",
+    "disconnect",
+    "disputed",
+    "document_right_align",
+    "document_tick",
+    "document_vertical_lines",
+    "download",
+    "draft",
+    "drag_vertical",
+    "drag",
+    "dropdown",
+    "duplicate",
+    "edit",
+    "edited",
+    "ellipsis_horizontal",
+    "ellipsis_vertical",
+    "email_switch",
+    "email",
+    "error_square",
+    "error",
+    "euro",
+    "expand",
+    "factory",
+    "favourite_lined",
+    "favourite",
+    "fax",
+    "feedback",
+    "file_excel",
+    "file_generic",
+    "file_image",
+    "file_pdf",
+    "file_word",
+    "files_leaning",
+    "filter_new",
+    "filter",
+    "fit_height",
+    "fit_width",
+    "flag",
+    "folder",
+    "gift",
+    "graph",
+    "grid",
+    "help",
+    "hide",
+    "home",
+    "image",
+    "in_progress",
+    "in_transit",
+    "individual",
+    "info",
+    "italic",
+    "key",
+    "ledger_arrow_left",
+    "ledger_arrow_right",
+    "ledger",
+    "link",
+    "list_view",
+    "location",
+    "locked",
+    "logout",
+    "lookup",
+    "marker",
+    "message",
+    "messages",
+    "minus_large",
+    "minus",
+    "mobile",
+    "money_bag",
+    "pause_circle",
+    "pause",
+    "pdf",
+    "people_switch",
+    "people",
+    "person_info",
+    "person_tick",
+    "person",
+    "phone",
+    "play_circle",
+    "play",
+    "plus_large",
+    "plus",
+    "pound",
+    "print",
+    "progress",
+    "progressed",
+    "question",
+    "refresh_clock",
+    "refresh",
+    "remove",
+    "sage_coin",
+    "save",
+    "scan",
+    "search",
+    "services",
+    "settings",
+    "share",
+    "shop",
+    "sort_down",
+    "sort_up",
+    "spanner",
+    "split_container",
+    "split",
+    "square_dot",
+    "squares_nine",
+    "stacked_boxes",
+    "stacked_squares",
+    "submitted",
+    "sync",
+    "tag",
+    "three_boxes",
+    "tick_circle",
+    "tick",
+    "unlocked",
+    "upload",
+    "uploaded",
+    "video",
+    "view",
+    "warning",
+  ]),
+  key: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
+  /**
+   * Margin on top, left, bottom and right
+   */
+  m: PropTypes.oneOfType([
+    PropTypes.arrayOf(
+      PropTypes.oneOfType([
+        PropTypes.oneOf([null]),
+        PropTypes.number,
+        PropTypes.shape({
+          "__@toStringTag": PropTypes.string.isRequired,
+          /**
+           * Expose the [[Description]] internal slot of a symbol directly.
+           */
+          description: PropTypes.string,
+          /**
+           * Returns a string representation of an object.
+           */
+          toString: PropTypes.func.isRequired,
+          /**
+           * Returns the primitive value of the specified object.
+           */
+          valueOf: PropTypes.func.isRequired,
+        }),
+        PropTypes.string,
+      ])
+    ),
+    PropTypes.number,
+    PropTypes.object,
+    PropTypes.shape({
+      "__@toStringTag": PropTypes.string.isRequired,
+      /**
+       * Expose the [[Description]] internal slot of a symbol directly.
+       */
+      description: PropTypes.string,
+      /**
+       * Returns a string representation of an object.
+       */
+      toString: PropTypes.func.isRequired,
+      /**
+       * Returns the primitive value of the specified object.
+       */
+      valueOf: PropTypes.func.isRequired,
+    }),
+    PropTypes.string,
+  ]),
+  /**
+   * Margin on top, left, bottom and right
+   */
+  margin: PropTypes.oneOfType([
+    PropTypes.arrayOf(
+      PropTypes.oneOfType([
+        PropTypes.oneOf([null]),
+        PropTypes.number,
+        PropTypes.shape({
+          "__@toStringTag": PropTypes.string.isRequired,
+          /**
+           * Expose the [[Description]] internal slot of a symbol directly.
+           */
+          description: PropTypes.string,
+          /**
+           * Returns a string representation of an object.
+           */
+          toString: PropTypes.func.isRequired,
+          /**
+           * Returns the primitive value of the specified object.
+           */
+          valueOf: PropTypes.func.isRequired,
+        }),
+        PropTypes.string,
+      ])
+    ),
+    PropTypes.number,
+    PropTypes.object,
+    PropTypes.shape({
+      "__@toStringTag": PropTypes.string.isRequired,
+      /**
+       * Expose the [[Description]] internal slot of a symbol directly.
+       */
+      description: PropTypes.string,
+      /**
+       * Returns a string representation of an object.
+       */
+      toString: PropTypes.func.isRequired,
+      /**
+       * Returns the primitive value of the specified object.
+       */
+      valueOf: PropTypes.func.isRequired,
+    }),
+    PropTypes.string,
+  ]),
+  /**
+   * Margin on bottom
+   */
+  marginBottom: PropTypes.oneOfType([
+    PropTypes.arrayOf(
+      PropTypes.oneOfType([
+        PropTypes.oneOf([null]),
+        PropTypes.number,
+        PropTypes.shape({
+          "__@toStringTag": PropTypes.string.isRequired,
+          /**
+           * Expose the [[Description]] internal slot of a symbol directly.
+           */
+          description: PropTypes.string,
+          /**
+           * Returns a string representation of an object.
+           */
+          toString: PropTypes.func.isRequired,
+          /**
+           * Returns the primitive value of the specified object.
+           */
+          valueOf: PropTypes.func.isRequired,
+        }),
+        PropTypes.string,
+      ])
+    ),
+    PropTypes.number,
+    PropTypes.object,
+    PropTypes.shape({
+      "__@toStringTag": PropTypes.string.isRequired,
+      /**
+       * Expose the [[Description]] internal slot of a symbol directly.
+       */
+      description: PropTypes.string,
+      /**
+       * Returns a string representation of an object.
+       */
+      toString: PropTypes.func.isRequired,
+      /**
+       * Returns the primitive value of the specified object.
+       */
+      valueOf: PropTypes.func.isRequired,
+    }),
+    PropTypes.string,
+  ]),
+  /**
+   * Margin on left
+   */
+  marginLeft: PropTypes.oneOfType([
+    PropTypes.arrayOf(
+      PropTypes.oneOfType([
+        PropTypes.oneOf([null]),
+        PropTypes.number,
+        PropTypes.shape({
+          "__@toStringTag": PropTypes.string.isRequired,
+          /**
+           * Expose the [[Description]] internal slot of a symbol directly.
+           */
+          description: PropTypes.string,
+          /**
+           * Returns a string representation of an object.
+           */
+          toString: PropTypes.func.isRequired,
+          /**
+           * Returns the primitive value of the specified object.
+           */
+          valueOf: PropTypes.func.isRequired,
+        }),
+        PropTypes.string,
+      ])
+    ),
+    PropTypes.number,
+    PropTypes.object,
+    PropTypes.shape({
+      "__@toStringTag": PropTypes.string.isRequired,
+      /**
+       * Expose the [[Description]] internal slot of a symbol directly.
+       */
+      description: PropTypes.string,
+      /**
+       * Returns a string representation of an object.
+       */
+      toString: PropTypes.func.isRequired,
+      /**
+       * Returns the primitive value of the specified object.
+       */
+      valueOf: PropTypes.func.isRequired,
+    }),
+    PropTypes.string,
+  ]),
+  /**
+   * Margin on right
+   */
+  marginRight: PropTypes.oneOfType([
+    PropTypes.arrayOf(
+      PropTypes.oneOfType([
+        PropTypes.oneOf([null]),
+        PropTypes.number,
+        PropTypes.shape({
+          "__@toStringTag": PropTypes.string.isRequired,
+          /**
+           * Expose the [[Description]] internal slot of a symbol directly.
+           */
+          description: PropTypes.string,
+          /**
+           * Returns a string representation of an object.
+           */
+          toString: PropTypes.func.isRequired,
+          /**
+           * Returns the primitive value of the specified object.
+           */
+          valueOf: PropTypes.func.isRequired,
+        }),
+        PropTypes.string,
+      ])
+    ),
+    PropTypes.number,
+    PropTypes.object,
+    PropTypes.shape({
+      "__@toStringTag": PropTypes.string.isRequired,
+      /**
+       * Expose the [[Description]] internal slot of a symbol directly.
+       */
+      description: PropTypes.string,
+      /**
+       * Returns a string representation of an object.
+       */
+      toString: PropTypes.func.isRequired,
+      /**
+       * Returns the primitive value of the specified object.
+       */
+      valueOf: PropTypes.func.isRequired,
+    }),
+    PropTypes.string,
+  ]),
+  /**
+   * Margin on top
+   */
+  marginTop: PropTypes.oneOfType([
+    PropTypes.arrayOf(
+      PropTypes.oneOfType([
+        PropTypes.oneOf([null]),
+        PropTypes.number,
+        PropTypes.shape({
+          "__@toStringTag": PropTypes.string.isRequired,
+          /**
+           * Expose the [[Description]] internal slot of a symbol directly.
+           */
+          description: PropTypes.string,
+          /**
+           * Returns a string representation of an object.
+           */
+          toString: PropTypes.func.isRequired,
+          /**
+           * Returns the primitive value of the specified object.
+           */
+          valueOf: PropTypes.func.isRequired,
+        }),
+        PropTypes.string,
+      ])
+    ),
+    PropTypes.number,
+    PropTypes.object,
+    PropTypes.shape({
+      "__@toStringTag": PropTypes.string.isRequired,
+      /**
+       * Expose the [[Description]] internal slot of a symbol directly.
+       */
+      description: PropTypes.string,
+      /**
+       * Returns a string representation of an object.
+       */
+      toString: PropTypes.func.isRequired,
+      /**
+       * Returns the primitive value of the specified object.
+       */
+      valueOf: PropTypes.func.isRequired,
+    }),
+    PropTypes.string,
+  ]),
+  /**
+   * Margin on left and right
+   */
+  marginX: PropTypes.oneOfType([
+    PropTypes.arrayOf(
+      PropTypes.oneOfType([
+        PropTypes.oneOf([null]),
+        PropTypes.number,
+        PropTypes.shape({
+          "__@toStringTag": PropTypes.string.isRequired,
+          /**
+           * Expose the [[Description]] internal slot of a symbol directly.
+           */
+          description: PropTypes.string,
+          /**
+           * Returns a string representation of an object.
+           */
+          toString: PropTypes.func.isRequired,
+          /**
+           * Returns the primitive value of the specified object.
+           */
+          valueOf: PropTypes.func.isRequired,
+        }),
+        PropTypes.string,
+      ])
+    ),
+    PropTypes.number,
+    PropTypes.object,
+    PropTypes.shape({
+      "__@toStringTag": PropTypes.string.isRequired,
+      /**
+       * Expose the [[Description]] internal slot of a symbol directly.
+       */
+      description: PropTypes.string,
+      /**
+       * Returns a string representation of an object.
+       */
+      toString: PropTypes.func.isRequired,
+      /**
+       * Returns the primitive value of the specified object.
+       */
+      valueOf: PropTypes.func.isRequired,
+    }),
+    PropTypes.string,
+  ]),
+  /**
+   * Margin on top and bottom
+   */
+  marginY: PropTypes.oneOfType([
+    PropTypes.arrayOf(
+      PropTypes.oneOfType([
+        PropTypes.oneOf([null]),
+        PropTypes.number,
+        PropTypes.shape({
+          "__@toStringTag": PropTypes.string.isRequired,
+          /**
+           * Expose the [[Description]] internal slot of a symbol directly.
+           */
+          description: PropTypes.string,
+          /**
+           * Returns a string representation of an object.
+           */
+          toString: PropTypes.func.isRequired,
+          /**
+           * Returns the primitive value of the specified object.
+           */
+          valueOf: PropTypes.func.isRequired,
+        }),
+        PropTypes.string,
+      ])
+    ),
+    PropTypes.number,
+    PropTypes.object,
+    PropTypes.shape({
+      "__@toStringTag": PropTypes.string.isRequired,
+      /**
+       * Expose the [[Description]] internal slot of a symbol directly.
+       */
+      description: PropTypes.string,
+      /**
+       * Returns a string representation of an object.
+       */
+      toString: PropTypes.func.isRequired,
+      /**
+       * Returns the primitive value of the specified object.
+       */
+      valueOf: PropTypes.func.isRequired,
+    }),
+    PropTypes.string,
+  ]),
+  /**
+   * Margin on bottom
+   */
+  mb: PropTypes.oneOfType([
+    PropTypes.arrayOf(
+      PropTypes.oneOfType([
+        PropTypes.oneOf([null]),
+        PropTypes.number,
+        PropTypes.shape({
+          "__@toStringTag": PropTypes.string.isRequired,
+          /**
+           * Expose the [[Description]] internal slot of a symbol directly.
+           */
+          description: PropTypes.string,
+          /**
+           * Returns a string representation of an object.
+           */
+          toString: PropTypes.func.isRequired,
+          /**
+           * Returns the primitive value of the specified object.
+           */
+          valueOf: PropTypes.func.isRequired,
+        }),
+        PropTypes.string,
+      ])
+    ),
+    PropTypes.number,
+    PropTypes.object,
+    PropTypes.shape({
+      "__@toStringTag": PropTypes.string.isRequired,
+      /**
+       * Expose the [[Description]] internal slot of a symbol directly.
+       */
+      description: PropTypes.string,
+      /**
+       * Returns a string representation of an object.
+       */
+      toString: PropTypes.func.isRequired,
+      /**
+       * Returns the primitive value of the specified object.
+       */
+      valueOf: PropTypes.func.isRequired,
+    }),
+    PropTypes.string,
+  ]),
+  /**
+   * Margin on left
+   */
+  ml: PropTypes.oneOfType([
+    PropTypes.arrayOf(
+      PropTypes.oneOfType([
+        PropTypes.oneOf([null]),
+        PropTypes.number,
+        PropTypes.shape({
+          "__@toStringTag": PropTypes.string.isRequired,
+          /**
+           * Expose the [[Description]] internal slot of a symbol directly.
+           */
+          description: PropTypes.string,
+          /**
+           * Returns a string representation of an object.
+           */
+          toString: PropTypes.func.isRequired,
+          /**
+           * Returns the primitive value of the specified object.
+           */
+          valueOf: PropTypes.func.isRequired,
+        }),
+        PropTypes.string,
+      ])
+    ),
+    PropTypes.number,
+    PropTypes.object,
+    PropTypes.shape({
+      "__@toStringTag": PropTypes.string.isRequired,
+      /**
+       * Expose the [[Description]] internal slot of a symbol directly.
+       */
+      description: PropTypes.string,
+      /**
+       * Returns a string representation of an object.
+       */
+      toString: PropTypes.func.isRequired,
+      /**
+       * Returns the primitive value of the specified object.
+       */
+      valueOf: PropTypes.func.isRequired,
+    }),
+    PropTypes.string,
+  ]),
+  /**
+   * Margin on right
+   */
+  mr: PropTypes.oneOfType([
+    PropTypes.arrayOf(
+      PropTypes.oneOfType([
+        PropTypes.oneOf([null]),
+        PropTypes.number,
+        PropTypes.shape({
+          "__@toStringTag": PropTypes.string.isRequired,
+          /**
+           * Expose the [[Description]] internal slot of a symbol directly.
+           */
+          description: PropTypes.string,
+          /**
+           * Returns a string representation of an object.
+           */
+          toString: PropTypes.func.isRequired,
+          /**
+           * Returns the primitive value of the specified object.
+           */
+          valueOf: PropTypes.func.isRequired,
+        }),
+        PropTypes.string,
+      ])
+    ),
+    PropTypes.number,
+    PropTypes.object,
+    PropTypes.shape({
+      "__@toStringTag": PropTypes.string.isRequired,
+      /**
+       * Expose the [[Description]] internal slot of a symbol directly.
+       */
+      description: PropTypes.string,
+      /**
+       * Returns a string representation of an object.
+       */
+      toString: PropTypes.func.isRequired,
+      /**
+       * Returns the primitive value of the specified object.
+       */
+      valueOf: PropTypes.func.isRequired,
+    }),
+    PropTypes.string,
+  ]),
+  /**
+   * Margin on top
+   */
+  mt: PropTypes.oneOfType([
+    PropTypes.arrayOf(
+      PropTypes.oneOfType([
+        PropTypes.oneOf([null]),
+        PropTypes.number,
+        PropTypes.shape({
+          "__@toStringTag": PropTypes.string.isRequired,
+          /**
+           * Expose the [[Description]] internal slot of a symbol directly.
+           */
+          description: PropTypes.string,
+          /**
+           * Returns a string representation of an object.
+           */
+          toString: PropTypes.func.isRequired,
+          /**
+           * Returns the primitive value of the specified object.
+           */
+          valueOf: PropTypes.func.isRequired,
+        }),
+        PropTypes.string,
+      ])
+    ),
+    PropTypes.number,
+    PropTypes.object,
+    PropTypes.shape({
+      "__@toStringTag": PropTypes.string.isRequired,
+      /**
+       * Expose the [[Description]] internal slot of a symbol directly.
+       */
+      description: PropTypes.string,
+      /**
+       * Returns a string representation of an object.
+       */
+      toString: PropTypes.func.isRequired,
+      /**
+       * Returns the primitive value of the specified object.
+       */
+      valueOf: PropTypes.func.isRequired,
+    }),
+    PropTypes.string,
+  ]),
+  /**
+   * Margin on left and right
+   */
+  mx: PropTypes.oneOfType([
+    PropTypes.arrayOf(
+      PropTypes.oneOfType([
+        PropTypes.oneOf([null]),
+        PropTypes.number,
+        PropTypes.shape({
+          "__@toStringTag": PropTypes.string.isRequired,
+          /**
+           * Expose the [[Description]] internal slot of a symbol directly.
+           */
+          description: PropTypes.string,
+          /**
+           * Returns a string representation of an object.
+           */
+          toString: PropTypes.func.isRequired,
+          /**
+           * Returns the primitive value of the specified object.
+           */
+          valueOf: PropTypes.func.isRequired,
+        }),
+        PropTypes.string,
+      ])
+    ),
+    PropTypes.number,
+    PropTypes.object,
+    PropTypes.shape({
+      "__@toStringTag": PropTypes.string.isRequired,
+      /**
+       * Expose the [[Description]] internal slot of a symbol directly.
+       */
+      description: PropTypes.string,
+      /**
+       * Returns a string representation of an object.
+       */
+      toString: PropTypes.func.isRequired,
+      /**
+       * Returns the primitive value of the specified object.
+       */
+      valueOf: PropTypes.func.isRequired,
+    }),
+    PropTypes.string,
+  ]),
+  /**
+   * Margin on top and bottom
+   */
+  my: PropTypes.oneOfType([
+    PropTypes.arrayOf(
+      PropTypes.oneOfType([
+        PropTypes.oneOf([null]),
+        PropTypes.number,
+        PropTypes.shape({
+          "__@toStringTag": PropTypes.string.isRequired,
+          /**
+           * Expose the [[Description]] internal slot of a symbol directly.
+           */
+          description: PropTypes.string,
+          /**
+           * Returns a string representation of an object.
+           */
+          toString: PropTypes.func.isRequired,
+          /**
+           * Returns the primitive value of the specified object.
+           */
+          valueOf: PropTypes.func.isRequired,
+        }),
+        PropTypes.string,
+      ])
+    ),
+    PropTypes.number,
+    PropTypes.object,
+    PropTypes.shape({
+      "__@toStringTag": PropTypes.string.isRequired,
+      /**
+       * Expose the [[Description]] internal slot of a symbol directly.
+       */
+      description: PropTypes.string,
+      /**
+       * Returns a string representation of an object.
+       */
+      toString: PropTypes.func.isRequired,
+      /**
+       * Returns the primitive value of the specified object.
+       */
+      valueOf: PropTypes.func.isRequired,
+    }),
+    PropTypes.string,
+  ]),
+  /**
+   * Name attribute
+   */
+  name: PropTypes.string,
+  /**
+   * If provided, the text inside a button will not wrap
+   */
   noWrap: PropTypes.bool,
-
-  /** Specify a callback triggered on blur */
+  /**
+   * Specify a callback triggered on blur
+   */
   onBlur: PropTypes.func,
-
-  /** Specify a callback triggered on change */
+  /**
+   * Specify a callback triggered on change
+   */
   onChange: PropTypes.func,
-
-  /** Specify a callback triggered on click */
+  /**
+   * onClick handler
+   */
   onClick: PropTypes.func,
-
-  /** Specify a callback triggered on focus */
+  /**
+   * Specify a callback triggered on focus
+   */
   onFocus: PropTypes.func,
-
-  /** Specify a callback triggered on keyDown */
+  /**
+   * Specify a callback triggered on keyDown
+   */
   onKeyDown: PropTypes.func,
-
-  /** Provides a tooltip message when the icon is hovered. */
-  iconTooltipMessage: PropTypes.string,
-
-  /** Provides positioning when the tooltip is displayed. */
-  iconTooltipPosition: PropTypes.oneOf(["top", "bottom", "left", "right"]),
-
-  /** HTML button type property */
-  type: PropTypes.string,
-
-  /** HTML target attribute */
+  /**
+   * Padding on top, left, bottom and right
+   */
+  p: PropTypes.oneOfType([
+    PropTypes.arrayOf(
+      PropTypes.oneOfType([
+        PropTypes.oneOf([null]),
+        PropTypes.number,
+        PropTypes.shape({
+          "__@toStringTag": PropTypes.string.isRequired,
+          /**
+           * Expose the [[Description]] internal slot of a symbol directly.
+           */
+          description: PropTypes.string,
+          /**
+           * Returns a string representation of an object.
+           */
+          toString: PropTypes.func.isRequired,
+          /**
+           * Returns the primitive value of the specified object.
+           */
+          valueOf: PropTypes.func.isRequired,
+        }),
+        PropTypes.string,
+      ])
+    ),
+    PropTypes.number,
+    PropTypes.object,
+    PropTypes.shape({
+      "__@toStringTag": PropTypes.string.isRequired,
+      /**
+       * Expose the [[Description]] internal slot of a symbol directly.
+       */
+      description: PropTypes.string,
+      /**
+       * Returns a string representation of an object.
+       */
+      toString: PropTypes.func.isRequired,
+      /**
+       * Returns the primitive value of the specified object.
+       */
+      valueOf: PropTypes.func.isRequired,
+    }),
+    PropTypes.string,
+  ]),
+  /**
+   * Padding on top, left, bottom and right
+   */
+  padding: PropTypes.oneOfType([
+    PropTypes.arrayOf(
+      PropTypes.oneOfType([
+        PropTypes.oneOf([null]),
+        PropTypes.number,
+        PropTypes.shape({
+          "__@toStringTag": PropTypes.string.isRequired,
+          /**
+           * Expose the [[Description]] internal slot of a symbol directly.
+           */
+          description: PropTypes.string,
+          /**
+           * Returns a string representation of an object.
+           */
+          toString: PropTypes.func.isRequired,
+          /**
+           * Returns the primitive value of the specified object.
+           */
+          valueOf: PropTypes.func.isRequired,
+        }),
+        PropTypes.string,
+      ])
+    ),
+    PropTypes.number,
+    PropTypes.object,
+    PropTypes.shape({
+      "__@toStringTag": PropTypes.string.isRequired,
+      /**
+       * Expose the [[Description]] internal slot of a symbol directly.
+       */
+      description: PropTypes.string,
+      /**
+       * Returns a string representation of an object.
+       */
+      toString: PropTypes.func.isRequired,
+      /**
+       * Returns the primitive value of the specified object.
+       */
+      valueOf: PropTypes.func.isRequired,
+    }),
+    PropTypes.string,
+  ]),
+  /**
+   * Padding on bottom
+   */
+  paddingBottom: PropTypes.oneOfType([
+    PropTypes.arrayOf(
+      PropTypes.oneOfType([
+        PropTypes.oneOf([null]),
+        PropTypes.number,
+        PropTypes.shape({
+          "__@toStringTag": PropTypes.string.isRequired,
+          /**
+           * Expose the [[Description]] internal slot of a symbol directly.
+           */
+          description: PropTypes.string,
+          /**
+           * Returns a string representation of an object.
+           */
+          toString: PropTypes.func.isRequired,
+          /**
+           * Returns the primitive value of the specified object.
+           */
+          valueOf: PropTypes.func.isRequired,
+        }),
+        PropTypes.string,
+      ])
+    ),
+    PropTypes.number,
+    PropTypes.object,
+    PropTypes.shape({
+      "__@toStringTag": PropTypes.string.isRequired,
+      /**
+       * Expose the [[Description]] internal slot of a symbol directly.
+       */
+      description: PropTypes.string,
+      /**
+       * Returns a string representation of an object.
+       */
+      toString: PropTypes.func.isRequired,
+      /**
+       * Returns the primitive value of the specified object.
+       */
+      valueOf: PropTypes.func.isRequired,
+    }),
+    PropTypes.string,
+  ]),
+  /**
+   * Padding on left
+   */
+  paddingLeft: PropTypes.oneOfType([
+    PropTypes.arrayOf(
+      PropTypes.oneOfType([
+        PropTypes.oneOf([null]),
+        PropTypes.number,
+        PropTypes.shape({
+          "__@toStringTag": PropTypes.string.isRequired,
+          /**
+           * Expose the [[Description]] internal slot of a symbol directly.
+           */
+          description: PropTypes.string,
+          /**
+           * Returns a string representation of an object.
+           */
+          toString: PropTypes.func.isRequired,
+          /**
+           * Returns the primitive value of the specified object.
+           */
+          valueOf: PropTypes.func.isRequired,
+        }),
+        PropTypes.string,
+      ])
+    ),
+    PropTypes.number,
+    PropTypes.object,
+    PropTypes.shape({
+      "__@toStringTag": PropTypes.string.isRequired,
+      /**
+       * Expose the [[Description]] internal slot of a symbol directly.
+       */
+      description: PropTypes.string,
+      /**
+       * Returns a string representation of an object.
+       */
+      toString: PropTypes.func.isRequired,
+      /**
+       * Returns the primitive value of the specified object.
+       */
+      valueOf: PropTypes.func.isRequired,
+    }),
+    PropTypes.string,
+  ]),
+  /**
+   * Padding on right
+   */
+  paddingRight: PropTypes.oneOfType([
+    PropTypes.arrayOf(
+      PropTypes.oneOfType([
+        PropTypes.oneOf([null]),
+        PropTypes.number,
+        PropTypes.shape({
+          "__@toStringTag": PropTypes.string.isRequired,
+          /**
+           * Expose the [[Description]] internal slot of a symbol directly.
+           */
+          description: PropTypes.string,
+          /**
+           * Returns a string representation of an object.
+           */
+          toString: PropTypes.func.isRequired,
+          /**
+           * Returns the primitive value of the specified object.
+           */
+          valueOf: PropTypes.func.isRequired,
+        }),
+        PropTypes.string,
+      ])
+    ),
+    PropTypes.number,
+    PropTypes.object,
+    PropTypes.shape({
+      "__@toStringTag": PropTypes.string.isRequired,
+      /**
+       * Expose the [[Description]] internal slot of a symbol directly.
+       */
+      description: PropTypes.string,
+      /**
+       * Returns a string representation of an object.
+       */
+      toString: PropTypes.func.isRequired,
+      /**
+       * Returns the primitive value of the specified object.
+       */
+      valueOf: PropTypes.func.isRequired,
+    }),
+    PropTypes.string,
+  ]),
+  /**
+   * Padding on top
+   */
+  paddingTop: PropTypes.oneOfType([
+    PropTypes.arrayOf(
+      PropTypes.oneOfType([
+        PropTypes.oneOf([null]),
+        PropTypes.number,
+        PropTypes.shape({
+          "__@toStringTag": PropTypes.string.isRequired,
+          /**
+           * Expose the [[Description]] internal slot of a symbol directly.
+           */
+          description: PropTypes.string,
+          /**
+           * Returns a string representation of an object.
+           */
+          toString: PropTypes.func.isRequired,
+          /**
+           * Returns the primitive value of the specified object.
+           */
+          valueOf: PropTypes.func.isRequired,
+        }),
+        PropTypes.string,
+      ])
+    ),
+    PropTypes.number,
+    PropTypes.object,
+    PropTypes.shape({
+      "__@toStringTag": PropTypes.string.isRequired,
+      /**
+       * Expose the [[Description]] internal slot of a symbol directly.
+       */
+      description: PropTypes.string,
+      /**
+       * Returns a string representation of an object.
+       */
+      toString: PropTypes.func.isRequired,
+      /**
+       * Returns the primitive value of the specified object.
+       */
+      valueOf: PropTypes.func.isRequired,
+    }),
+    PropTypes.string,
+  ]),
+  /**
+   * Padding on left and right
+   */
+  paddingX: PropTypes.oneOfType([
+    PropTypes.arrayOf(
+      PropTypes.oneOfType([
+        PropTypes.oneOf([null]),
+        PropTypes.number,
+        PropTypes.shape({
+          "__@toStringTag": PropTypes.string.isRequired,
+          /**
+           * Expose the [[Description]] internal slot of a symbol directly.
+           */
+          description: PropTypes.string,
+          /**
+           * Returns a string representation of an object.
+           */
+          toString: PropTypes.func.isRequired,
+          /**
+           * Returns the primitive value of the specified object.
+           */
+          valueOf: PropTypes.func.isRequired,
+        }),
+        PropTypes.string,
+      ])
+    ),
+    PropTypes.number,
+    PropTypes.object,
+    PropTypes.shape({
+      "__@toStringTag": PropTypes.string.isRequired,
+      /**
+       * Expose the [[Description]] internal slot of a symbol directly.
+       */
+      description: PropTypes.string,
+      /**
+       * Returns a string representation of an object.
+       */
+      toString: PropTypes.func.isRequired,
+      /**
+       * Returns the primitive value of the specified object.
+       */
+      valueOf: PropTypes.func.isRequired,
+    }),
+    PropTypes.string,
+  ]),
+  /**
+   * Padding on top and bottom
+   */
+  paddingY: PropTypes.oneOfType([
+    PropTypes.arrayOf(
+      PropTypes.oneOfType([
+        PropTypes.oneOf([null]),
+        PropTypes.number,
+        PropTypes.shape({
+          "__@toStringTag": PropTypes.string.isRequired,
+          /**
+           * Expose the [[Description]] internal slot of a symbol directly.
+           */
+          description: PropTypes.string,
+          /**
+           * Returns a string representation of an object.
+           */
+          toString: PropTypes.func.isRequired,
+          /**
+           * Returns the primitive value of the specified object.
+           */
+          valueOf: PropTypes.func.isRequired,
+        }),
+        PropTypes.string,
+      ])
+    ),
+    PropTypes.number,
+    PropTypes.object,
+    PropTypes.shape({
+      "__@toStringTag": PropTypes.string.isRequired,
+      /**
+       * Expose the [[Description]] internal slot of a symbol directly.
+       */
+      description: PropTypes.string,
+      /**
+       * Returns a string representation of an object.
+       */
+      toString: PropTypes.func.isRequired,
+      /**
+       * Returns the primitive value of the specified object.
+       */
+      valueOf: PropTypes.func.isRequired,
+    }),
+    PropTypes.string,
+  ]),
+  /**
+   * Padding on bottom
+   */
+  pb: PropTypes.oneOfType([
+    PropTypes.arrayOf(
+      PropTypes.oneOfType([
+        PropTypes.oneOf([null]),
+        PropTypes.number,
+        PropTypes.shape({
+          "__@toStringTag": PropTypes.string.isRequired,
+          /**
+           * Expose the [[Description]] internal slot of a symbol directly.
+           */
+          description: PropTypes.string,
+          /**
+           * Returns a string representation of an object.
+           */
+          toString: PropTypes.func.isRequired,
+          /**
+           * Returns the primitive value of the specified object.
+           */
+          valueOf: PropTypes.func.isRequired,
+        }),
+        PropTypes.string,
+      ])
+    ),
+    PropTypes.number,
+    PropTypes.object,
+    PropTypes.shape({
+      "__@toStringTag": PropTypes.string.isRequired,
+      /**
+       * Expose the [[Description]] internal slot of a symbol directly.
+       */
+      description: PropTypes.string,
+      /**
+       * Returns a string representation of an object.
+       */
+      toString: PropTypes.func.isRequired,
+      /**
+       * Returns the primitive value of the specified object.
+       */
+      valueOf: PropTypes.func.isRequired,
+    }),
+    PropTypes.string,
+  ]),
+  /**
+   * Padding on left
+   */
+  pl: PropTypes.oneOfType([
+    PropTypes.arrayOf(
+      PropTypes.oneOfType([
+        PropTypes.oneOf([null]),
+        PropTypes.number,
+        PropTypes.shape({
+          "__@toStringTag": PropTypes.string.isRequired,
+          /**
+           * Expose the [[Description]] internal slot of a symbol directly.
+           */
+          description: PropTypes.string,
+          /**
+           * Returns a string representation of an object.
+           */
+          toString: PropTypes.func.isRequired,
+          /**
+           * Returns the primitive value of the specified object.
+           */
+          valueOf: PropTypes.func.isRequired,
+        }),
+        PropTypes.string,
+      ])
+    ),
+    PropTypes.number,
+    PropTypes.object,
+    PropTypes.shape({
+      "__@toStringTag": PropTypes.string.isRequired,
+      /**
+       * Expose the [[Description]] internal slot of a symbol directly.
+       */
+      description: PropTypes.string,
+      /**
+       * Returns a string representation of an object.
+       */
+      toString: PropTypes.func.isRequired,
+      /**
+       * Returns the primitive value of the specified object.
+       */
+      valueOf: PropTypes.func.isRequired,
+    }),
+    PropTypes.string,
+  ]),
+  /**
+   * Padding on right
+   */
+  pr: PropTypes.oneOfType([
+    PropTypes.arrayOf(
+      PropTypes.oneOfType([
+        PropTypes.oneOf([null]),
+        PropTypes.number,
+        PropTypes.shape({
+          "__@toStringTag": PropTypes.string.isRequired,
+          /**
+           * Expose the [[Description]] internal slot of a symbol directly.
+           */
+          description: PropTypes.string,
+          /**
+           * Returns a string representation of an object.
+           */
+          toString: PropTypes.func.isRequired,
+          /**
+           * Returns the primitive value of the specified object.
+           */
+          valueOf: PropTypes.func.isRequired,
+        }),
+        PropTypes.string,
+      ])
+    ),
+    PropTypes.number,
+    PropTypes.object,
+    PropTypes.shape({
+      "__@toStringTag": PropTypes.string.isRequired,
+      /**
+       * Expose the [[Description]] internal slot of a symbol directly.
+       */
+      description: PropTypes.string,
+      /**
+       * Returns a string representation of an object.
+       */
+      toString: PropTypes.func.isRequired,
+      /**
+       * Returns the primitive value of the specified object.
+       */
+      valueOf: PropTypes.func.isRequired,
+    }),
+    PropTypes.string,
+  ]),
+  /**
+   * Padding on top
+   */
+  pt: PropTypes.oneOfType([
+    PropTypes.arrayOf(
+      PropTypes.oneOfType([
+        PropTypes.oneOf([null]),
+        PropTypes.number,
+        PropTypes.shape({
+          "__@toStringTag": PropTypes.string.isRequired,
+          /**
+           * Expose the [[Description]] internal slot of a symbol directly.
+           */
+          description: PropTypes.string,
+          /**
+           * Returns a string representation of an object.
+           */
+          toString: PropTypes.func.isRequired,
+          /**
+           * Returns the primitive value of the specified object.
+           */
+          valueOf: PropTypes.func.isRequired,
+        }),
+        PropTypes.string,
+      ])
+    ),
+    PropTypes.number,
+    PropTypes.object,
+    PropTypes.shape({
+      "__@toStringTag": PropTypes.string.isRequired,
+      /**
+       * Expose the [[Description]] internal slot of a symbol directly.
+       */
+      description: PropTypes.string,
+      /**
+       * Returns a string representation of an object.
+       */
+      toString: PropTypes.func.isRequired,
+      /**
+       * Returns the primitive value of the specified object.
+       */
+      valueOf: PropTypes.func.isRequired,
+    }),
+    PropTypes.string,
+  ]),
+  /**
+   * Padding on left and right
+   */
+  px: PropTypes.oneOfType([
+    PropTypes.arrayOf(
+      PropTypes.oneOfType([
+        PropTypes.oneOf([null]),
+        PropTypes.number,
+        PropTypes.shape({
+          "__@toStringTag": PropTypes.string.isRequired,
+          /**
+           * Expose the [[Description]] internal slot of a symbol directly.
+           */
+          description: PropTypes.string,
+          /**
+           * Returns a string representation of an object.
+           */
+          toString: PropTypes.func.isRequired,
+          /**
+           * Returns the primitive value of the specified object.
+           */
+          valueOf: PropTypes.func.isRequired,
+        }),
+        PropTypes.string,
+      ])
+    ),
+    PropTypes.number,
+    PropTypes.object,
+    PropTypes.shape({
+      "__@toStringTag": PropTypes.string.isRequired,
+      /**
+       * Expose the [[Description]] internal slot of a symbol directly.
+       */
+      description: PropTypes.string,
+      /**
+       * Returns a string representation of an object.
+       */
+      toString: PropTypes.func.isRequired,
+      /**
+       * Returns the primitive value of the specified object.
+       */
+      valueOf: PropTypes.func.isRequired,
+    }),
+    PropTypes.string,
+  ]),
+  /**
+   * Padding on top and bottom
+   */
+  py: PropTypes.oneOfType([
+    PropTypes.arrayOf(
+      PropTypes.oneOfType([
+        PropTypes.oneOf([null]),
+        PropTypes.number,
+        PropTypes.shape({
+          "__@toStringTag": PropTypes.string.isRequired,
+          /**
+           * Expose the [[Description]] internal slot of a symbol directly.
+           */
+          description: PropTypes.string,
+          /**
+           * Returns a string representation of an object.
+           */
+          toString: PropTypes.func.isRequired,
+          /**
+           * Returns the primitive value of the specified object.
+           */
+          valueOf: PropTypes.func.isRequired,
+        }),
+        PropTypes.string,
+      ])
+    ),
+    PropTypes.number,
+    PropTypes.object,
+    PropTypes.shape({
+      "__@toStringTag": PropTypes.string.isRequired,
+      /**
+       * Expose the [[Description]] internal slot of a symbol directly.
+       */
+      description: PropTypes.string,
+      /**
+       * Returns a string representation of an object.
+       */
+      toString: PropTypes.func.isRequired,
+      /**
+       * Returns the primitive value of the specified object.
+       */
+      valueOf: PropTypes.func.isRequired,
+    }),
+    PropTypes.string,
+  ]),
+  /**
+   * HTML rel attribute
+   */
+  rel: PropTypes.string,
+  /**
+   * Assigns a size to the button: "small" | "medium" | "large"
+   */
+  size: PropTypes.oneOf(["large", "medium", "small"]),
+  /**
+   * Second text child, renders under main text, only when size is "large"
+   */
+  subtext: PropTypes.string,
+  /**
+   * HTML target attribute
+   */
   target: PropTypes.string,
-
-  /** HTML rel attribute */
-  rel: PropTypes.string
-};
-Button.defaultProps = {
-  buttonType: "secondary",
-  size: "medium",
-  fullWidth: false,
-  disabled: false,
-  destructive: false,
-  iconPosition: "before",
-  subtext: ""
+  /**
+   * HTML button type property
+   */
+  type: PropTypes.string,
 };
-const ButtonWithForwardRef = /*#__PURE__*/React.forwardRef((props, ref) => /*#__PURE__*/React.createElement(Button, _extends({
-  forwardRef: ref
-}, props)));
+
 ButtonWithForwardRef.displayName = "Button";
-ButtonWithForwardRef.defaultProps = Button.defaultProps;
 Button.displayName = "Button";
 export { ButtonWithForwardRef };
-export default Button;
+export default Button;