carbon-react 109.3.4 → 109.5.0

package/esm/__internal__/full-screen-heading/full-screen-heading.component.d.ts

@@ -0,0 +1,7 @@
+import React from "react";
+import { StyledFullScreenHeadingProps } from "./full-screen-heading.style";
+export interface FullScreenHeadingProps extends StyledFullScreenHeadingProps {
+    children?: React.ReactNode;
+}
+declare const FullScreenHeading: React.ForwardRefExoticComponent<FullScreenHeadingProps & React.RefAttributes<HTMLDivElement>>;
+export default FullScreenHeading;

package/esm/__internal__/full-screen-heading/full-screen-heading.component.js

@@ -7,13 +7,17 @@ import StyledFullScreenHeading, { StyledHeaderContainer } from "./full-screen-he
 const FullScreenHeading = /*#__PURE__*/React.forwardRef((props, ref) => {
   const {
     children,
-    ...otherProps
+    hasContent
   } = props;
-  return /*#__PURE__*/React.createElement(StyledFullScreenHeading, _extends({}, otherProps, tagComponent("full-screen-heading", props), {
+  return /*#__PURE__*/React.createElement(StyledFullScreenHeading, _extends({
+    hasContent: hasContent
+  }, tagComponent("full-screen-heading", props), {
     ref: ref
   }), /*#__PURE__*/React.createElement(StyledHeaderContainer, null, children));
 });
 FullScreenHeading.propTypes = {
-  children: PropTypes.node
+  "children": PropTypes.node,
+  "hasContent": PropTypes.bool
 };
+FullScreenHeading.displayName = "FullScreenHeading";
 export default FullScreenHeading;

package/esm/__internal__/full-screen-heading/full-screen-heading.style.d.ts

@@ -0,0 +1,6 @@
+export interface StyledFullScreenHeadingProps {
+    hasContent?: boolean;
+}
+export declare const StyledHeaderContainer: import("styled-components").StyledComponent<"div", any, {}, never>;
+declare const StyledFullScreenHeading: import("styled-components").StyledComponent<"div", any, StyledFullScreenHeadingProps, never>;
+export default StyledFullScreenHeading;

package/esm/__internal__/full-screen-heading/index.d.ts

@@ -0,0 +1,2 @@
+export { default } from "./full-screen-heading.component";
+export type { FullScreenHeadingProps } from "./full-screen-heading.component";

package/esm/components/box/box.component.d.ts

@@ -2,12 +2,15 @@ import React from "react";
 import { SpaceProps, LayoutProps, FlexboxProps, ColorProps } from "styled-system";
 export declare type OverflowWrap = "break-word" | "anywhere";
 export declare type ScrollVariant = "light" | "dark";
+export declare type BoxSizing = "content-box" | "border-box";
 export interface BoxProps extends SpaceProps, LayoutProps, FlexboxProps, ColorProps {
     as?: keyof JSX.IntrinsicElements | React.ComponentType<any>;
     /** String to set Box content break strategy. Note "anywhere" is not supported in Safari */
     overflowWrap?: OverflowWrap;
     /** scroll styling attribute */
     scrollVariant?: ScrollVariant;
+    /** set the box-sizing attribute of the Box component */
+    boxSizing?: BoxSizing;
 }
 declare const Box: import("styled-components").StyledComponent<"div", any, BoxProps, never>;
 export default Box;

package/esm/components/box/box.component.js

@@ -41,6 +41,12 @@ const Box = styled.div`
         background-color: ${boxConfig[scrollVariant].thumb};
       }
     `}
+
+  ${({
+  boxSizing
+}) => boxSizing && css`
+      box-sizing: ${boxSizing};
+    `}
 `;
 Box.defaultProps = {
   theme: BaseTheme

package/esm/components/heading/heading.style.d.ts

@@ -0,0 +1,15 @@
+export const StyledHeadingIcon: import("styled-components").StyledComponent<import("react").ForwardRefExoticComponent<import("../icon").IconProps & import("react").RefAttributes<HTMLSpanElement>>, any, {}, never>;
+export const StyledHeading: import("styled-components").StyledComponent<"div", any, {}, never>;
+export const StyledSubHeader: import("styled-components").StyledComponent<"div", any, {}, never>;
+export const StyledHeader: import("styled-components").StyledComponent<"div", any, {}, never>;
+export const StyledSeparator: import("styled-components").StyledComponent<"hr", any, {}, never>;
+export const StyledHeaderHelp: import("styled-components").StyledComponent<{
+    ({ as, ariaLabel, children, className, href, helpId, isFocused, tabIndex, tooltipBgColor, tooltipFontColor, tooltipFlipOverrides, tooltipId, tooltipPosition, type, ...rest }: import("../help").HelpProps): JSX.Element;
+    displayName: string;
+}, any, {}, never>;
+export const StyledHeadingTitle: import("styled-components").StyledComponent<typeof Typography, any, {}, never>;
+export const StyledDivider: import("styled-components").StyledComponent<({ adaptiveMxBreakpoint, ml, mr, ...rest }: import("../hr").HrProps) => JSX.Element, any, {}, never>;
+export const StyledHeaderContent: import("styled-components").StyledComponent<"div", any, {}, never>;
+export const StyledHeadingBackButton: import("styled-components").StyledComponent<import("react").ForwardRefExoticComponent<import("../link").LinkProps & import("react").RefAttributes<HTMLButtonElement | HTMLLinkElement>>, any, {}, never>;
+export const StyledHeadingPills: import("styled-components").StyledComponent<"span", any, {}, never>;
+import Typography from "../typography";

package/esm/components/icon-button/icon-button.component.d.ts

@@ -0,0 +1,23 @@
+import React from "react";
+import { MarginProps } from "styled-system";
+import { IconProps } from "../icon";
+export interface IconButtonProps extends MarginProps {
+    /** Prop to specify the aria-label of the icon-button component */
+    "aria-label"?: string;
+    /** Icon meant to be rendered, should be an Icon component */
+    children: React.ReactElement<IconProps>;
+    /** Callback triggered on blur */
+    onBlur?: (ev: React.FocusEvent<HTMLButtonElement>) => void;
+    /** Callback triggered on focus */
+    onFocus?: (ev: React.FocusEvent<HTMLButtonElement>) => void;
+    /** Callback triggered on mouse enter */
+    onMouseEnter?: (ev: React.MouseEvent<HTMLButtonElement>) => void;
+    /** Callback triggered on mouse leave */
+    onMouseLeave?: (ev: React.MouseEvent<HTMLButtonElement>) => void;
+    /** Action callback */
+    onAction: (e: React.KeyboardEvent<HTMLButtonElement> | React.MouseEvent<HTMLButtonElement>) => void;
+    /** Set the button to disabled */
+    disabled?: boolean;
+}
+declare const IconButton: React.ForwardRefExoticComponent<IconButtonProps & React.RefAttributes<HTMLButtonElement>>;
+export default IconButton;

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

@@ -2,13 +2,10 @@ function _extends() { _extends = Object.assign || function (target) { for (var i
 
 import React, { useState, useCallback } from "react";
 import PropTypes from "prop-types";
-import styledSystemPropTypes from "@styled-system/prop-types";
 import Events from "../../__internal__/utils/helpers/events";
 import StyledIconButton from "./icon-button.style";
-import Icon from "../icon";
 import { filterStyledSystemMarginProps } from "../../style/utils";
 import { TooltipProvider } from "../../__internal__/tooltip-provider";
-const marginPropTypes = filterStyledSystemMarginProps(styledSystemPropTypes.space);
 const IconButton = /*#__PURE__*/React.forwardRef(({
   "aria-label": ariaLabel,
   onAction,
@@ -16,10 +13,10 @@ const IconButton = /*#__PURE__*/React.forwardRef(({
   disabled,
   ...rest
 }, ref) => {
-  const [internalRef, setInternalRef] = useState(null);
+  const [internalRef, setInternalRef] = useState();
   const marginProps = filterStyledSystemMarginProps(rest);
 
-  const onKeyDown = e => {
+  const handleKeyDown = e => {
     if (Events.isEnterKey(e) || Events.isSpaceKey(e)) {
       e.preventDefault();
       onAction(e);
@@ -28,7 +25,7 @@ const IconButton = /*#__PURE__*/React.forwardRef(({
     }
   };
 
-  const handleOnAction = e => {
+  const handleOnClick = e => {
     onAction(e);
   };
 
@@ -40,8 +37,8 @@ const IconButton = /*#__PURE__*/React.forwardRef(({
   }, [ref]);
   return /*#__PURE__*/React.createElement(StyledIconButton, _extends({}, rest, {
     "aria-label": ariaLabel,
-    onKeyDown: onKeyDown,
-    onClick: handleOnAction,
+    onKeyDown: handleKeyDown,
+    onClick: handleOnClick,
     ref: setRefs,
     disabled: disabled
   }, marginProps), /*#__PURE__*/React.createElement(TooltipProvider, {
@@ -50,20 +47,169 @@ const IconButton = /*#__PURE__*/React.forwardRef(({
     target: internalRef
   }, children));
 });
-IconButton.propTypes = { ...marginPropTypes,
-
-  /** Children prop is restricted to one Icon Component */
-  children: PropTypes.shape({
-    type: PropTypes.oneOf([Icon, PropTypes.element])
-  }).isRequired,
-
-  /** Callback */
-  onAction: PropTypes.func.isRequired,
-
-  /** Prop to specify the aria-label of the icon-button component */
+IconButton.propTypes = {
   "aria-label": PropTypes.string,
-
-  /** Set the button to disabled */
-  disabled: PropTypes.bool
+  "children": PropTypes.element.isRequired,
+  "disabled": PropTypes.bool,
+  "m": PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.oneOf([null]), PropTypes.number, PropTypes.shape({
+    "__@toStringTag": PropTypes.string.isRequired,
+    "description": PropTypes.string,
+    "toString": PropTypes.func.isRequired,
+    "valueOf": PropTypes.func.isRequired
+  }), PropTypes.string])), PropTypes.number, PropTypes.object, PropTypes.shape({
+    "__@toStringTag": PropTypes.string.isRequired,
+    "description": PropTypes.string,
+    "toString": PropTypes.func.isRequired,
+    "valueOf": PropTypes.func.isRequired
+  }), PropTypes.string]),
+  "margin": PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.oneOf([null]), PropTypes.number, PropTypes.shape({
+    "__@toStringTag": PropTypes.string.isRequired,
+    "description": PropTypes.string,
+    "toString": PropTypes.func.isRequired,
+    "valueOf": PropTypes.func.isRequired
+  }), PropTypes.string])), PropTypes.number, PropTypes.object, PropTypes.shape({
+    "__@toStringTag": PropTypes.string.isRequired,
+    "description": PropTypes.string,
+    "toString": PropTypes.func.isRequired,
+    "valueOf": PropTypes.func.isRequired
+  }), PropTypes.string]),
+  "marginBottom": PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.oneOf([null]), PropTypes.number, PropTypes.shape({
+    "__@toStringTag": PropTypes.string.isRequired,
+    "description": PropTypes.string,
+    "toString": PropTypes.func.isRequired,
+    "valueOf": PropTypes.func.isRequired
+  }), PropTypes.string])), PropTypes.number, PropTypes.object, PropTypes.shape({
+    "__@toStringTag": PropTypes.string.isRequired,
+    "description": PropTypes.string,
+    "toString": PropTypes.func.isRequired,
+    "valueOf": PropTypes.func.isRequired
+  }), PropTypes.string]),
+  "marginLeft": PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.oneOf([null]), PropTypes.number, PropTypes.shape({
+    "__@toStringTag": PropTypes.string.isRequired,
+    "description": PropTypes.string,
+    "toString": PropTypes.func.isRequired,
+    "valueOf": PropTypes.func.isRequired
+  }), PropTypes.string])), PropTypes.number, PropTypes.object, PropTypes.shape({
+    "__@toStringTag": PropTypes.string.isRequired,
+    "description": PropTypes.string,
+    "toString": PropTypes.func.isRequired,
+    "valueOf": PropTypes.func.isRequired
+  }), PropTypes.string]),
+  "marginRight": PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.oneOf([null]), PropTypes.number, PropTypes.shape({
+    "__@toStringTag": PropTypes.string.isRequired,
+    "description": PropTypes.string,
+    "toString": PropTypes.func.isRequired,
+    "valueOf": PropTypes.func.isRequired
+  }), PropTypes.string])), PropTypes.number, PropTypes.object, PropTypes.shape({
+    "__@toStringTag": PropTypes.string.isRequired,
+    "description": PropTypes.string,
+    "toString": PropTypes.func.isRequired,
+    "valueOf": PropTypes.func.isRequired
+  }), PropTypes.string]),
+  "marginTop": PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.oneOf([null]), PropTypes.number, PropTypes.shape({
+    "__@toStringTag": PropTypes.string.isRequired,
+    "description": PropTypes.string,
+    "toString": PropTypes.func.isRequired,
+    "valueOf": PropTypes.func.isRequired
+  }), PropTypes.string])), PropTypes.number, PropTypes.object, PropTypes.shape({
+    "__@toStringTag": PropTypes.string.isRequired,
+    "description": PropTypes.string,
+    "toString": PropTypes.func.isRequired,
+    "valueOf": PropTypes.func.isRequired
+  }), PropTypes.string]),
+  "marginX": PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.oneOf([null]), PropTypes.number, PropTypes.shape({
+    "__@toStringTag": PropTypes.string.isRequired,
+    "description": PropTypes.string,
+    "toString": PropTypes.func.isRequired,
+    "valueOf": PropTypes.func.isRequired
+  }), PropTypes.string])), PropTypes.number, PropTypes.object, PropTypes.shape({
+    "__@toStringTag": PropTypes.string.isRequired,
+    "description": PropTypes.string,
+    "toString": PropTypes.func.isRequired,
+    "valueOf": PropTypes.func.isRequired
+  }), PropTypes.string]),
+  "marginY": PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.oneOf([null]), PropTypes.number, PropTypes.shape({
+    "__@toStringTag": PropTypes.string.isRequired,
+    "description": PropTypes.string,
+    "toString": PropTypes.func.isRequired,
+    "valueOf": PropTypes.func.isRequired
+  }), PropTypes.string])), PropTypes.number, PropTypes.object, PropTypes.shape({
+    "__@toStringTag": PropTypes.string.isRequired,
+    "description": PropTypes.string,
+    "toString": PropTypes.func.isRequired,
+    "valueOf": PropTypes.func.isRequired
+  }), PropTypes.string]),
+  "mb": PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.oneOf([null]), PropTypes.number, PropTypes.shape({
+    "__@toStringTag": PropTypes.string.isRequired,
+    "description": PropTypes.string,
+    "toString": PropTypes.func.isRequired,
+    "valueOf": PropTypes.func.isRequired
+  }), PropTypes.string])), PropTypes.number, PropTypes.object, PropTypes.shape({
+    "__@toStringTag": PropTypes.string.isRequired,
+    "description": PropTypes.string,
+    "toString": PropTypes.func.isRequired,
+    "valueOf": PropTypes.func.isRequired
+  }), PropTypes.string]),
+  "ml": PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.oneOf([null]), PropTypes.number, PropTypes.shape({
+    "__@toStringTag": PropTypes.string.isRequired,
+    "description": PropTypes.string,
+    "toString": PropTypes.func.isRequired,
+    "valueOf": PropTypes.func.isRequired
+  }), PropTypes.string])), PropTypes.number, PropTypes.object, PropTypes.shape({
+    "__@toStringTag": PropTypes.string.isRequired,
+    "description": PropTypes.string,
+    "toString": PropTypes.func.isRequired,
+    "valueOf": PropTypes.func.isRequired
+  }), PropTypes.string]),
+  "mr": PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.oneOf([null]), PropTypes.number, PropTypes.shape({
+    "__@toStringTag": PropTypes.string.isRequired,
+    "description": PropTypes.string,
+    "toString": PropTypes.func.isRequired,
+    "valueOf": PropTypes.func.isRequired
+  }), PropTypes.string])), PropTypes.number, PropTypes.object, PropTypes.shape({
+    "__@toStringTag": PropTypes.string.isRequired,
+    "description": PropTypes.string,
+    "toString": PropTypes.func.isRequired,
+    "valueOf": PropTypes.func.isRequired
+  }), PropTypes.string]),
+  "mt": PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.oneOf([null]), PropTypes.number, PropTypes.shape({
+    "__@toStringTag": PropTypes.string.isRequired,
+    "description": PropTypes.string,
+    "toString": PropTypes.func.isRequired,
+    "valueOf": PropTypes.func.isRequired
+  }), PropTypes.string])), PropTypes.number, PropTypes.object, PropTypes.shape({
+    "__@toStringTag": PropTypes.string.isRequired,
+    "description": PropTypes.string,
+    "toString": PropTypes.func.isRequired,
+    "valueOf": PropTypes.func.isRequired
+  }), PropTypes.string]),
+  "mx": PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.oneOf([null]), PropTypes.number, PropTypes.shape({
+    "__@toStringTag": PropTypes.string.isRequired,
+    "description": PropTypes.string,
+    "toString": PropTypes.func.isRequired,
+    "valueOf": PropTypes.func.isRequired
+  }), PropTypes.string])), PropTypes.number, PropTypes.object, PropTypes.shape({
+    "__@toStringTag": PropTypes.string.isRequired,
+    "description": PropTypes.string,
+    "toString": PropTypes.func.isRequired,
+    "valueOf": PropTypes.func.isRequired
+  }), PropTypes.string]),
+  "my": PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.oneOf([null]), PropTypes.number, PropTypes.shape({
+    "__@toStringTag": PropTypes.string.isRequired,
+    "description": PropTypes.string,
+    "toString": PropTypes.func.isRequired,
+    "valueOf": PropTypes.func.isRequired
+  }), PropTypes.string])), PropTypes.number, PropTypes.object, PropTypes.shape({
+    "__@toStringTag": PropTypes.string.isRequired,
+    "description": PropTypes.string,
+    "toString": PropTypes.func.isRequired,
+    "valueOf": PropTypes.func.isRequired
+  }), PropTypes.string]),
+  "onAction": PropTypes.func.isRequired,
+  "onBlur": PropTypes.func,
+  "onFocus": PropTypes.func,
+  "onMouseEnter": PropTypes.func,
+  "onMouseLeave": PropTypes.func
 };
+IconButton.displayName = "IconButton";
 export default IconButton;

package/esm/components/icon-button/icon-button.style.d.ts

@@ -0,0 +1,4 @@
+declare const StyledIconButton: import("styled-components").StyledComponent<"button", any, {
+    type: "button";
+}, "type">;
+export default StyledIconButton;

package/esm/components/icon-button/index.d.ts

@@ -1,2 +1,2 @@
-export { default } from "./icon-button";
-export * from "./icon-button";
+export { default } from "./icon-button.component";
+export type { IconButtonProps } from "./icon-button.component";

package/esm/components/pages/index.d.ts

@@ -1,2 +1,4 @@
-export { default } from "./pages";
-export { default as Page } from "./page/page";
+export { default } from "./pages.component";
+export { default as Page } from "./page/page.component";
+export type { PagesProps } from "./pages.component";
+export type { PageProps } from "./page";

package/esm/components/pages/page/index.d.ts

@@ -0,0 +1,2 @@
+export { default } from "./page.component";
+export type { PageProps } from "./page.component";

package/esm/components/pages/page/index.js

@@ -0,0 +1 @@
+export { default } from "./page.component";

package/esm/components/pages/page/page.component.d.ts

@@ -0,0 +1,15 @@
+import React from "react";
+import { PaddingProps } from "styled-system";
+export interface PageProps extends PaddingProps {
+    /** The title for the page, normally a Heading component. */
+    title: React.ReactNode;
+    /** This component supports children. */
+    children: React.ReactNode;
+    /** @ignore @private */
+    transitionName?: () => string;
+}
+declare const Page: {
+    ({ title, children, ...rest }: PageProps): JSX.Element;
+    displayName: string;
+};
+export default Page;

package/esm/components/pages/page/page.component.js

@@ -7,30 +7,36 @@ import tagComponent from "../../../__internal__/utils/helpers/tags/tags";
 import FullScreenHeading from "../../../__internal__/full-screen-heading";
 import Box from "../../box";
 import { StyledPage, StyledPageContent } from "./page.style";
+import { filterStyledSystemPaddingProps } from "../../../style/utils";
 
 const Page = ({
   title,
   children,
-  ...props
+  ...rest
 }) => {
-  const styledPageNodeRef = useRef();
+  const styledPageNodeRef = useRef(null);
+  const {
+    transitionName
+  } = rest;
   return /*#__PURE__*/React.createElement(CSSTransition, _extends({
     className: "carbon-carousel__transition",
     timeout: {
       appear: 0,
       enter: 0,
       exit: 0
-    } // eslint-disable-next-line react/prop-types
-    ,
-    classNames: props.transitionName(),
+    }
+  }, transitionName && {
+    classNames: transitionName()
+  }, {
     nodeRef: styledPageNodeRef
-  }, props), /*#__PURE__*/React.createElement(StyledPage, _extends({}, tagComponent("page", props), {
+  }, rest), /*#__PURE__*/React.createElement(StyledPage, _extends({}, tagComponent("page", rest), {
     ref: styledPageNodeRef
   }), /*#__PURE__*/React.createElement(FullScreenHeading, {
-    hasContent: title
-  }, title), /*#__PURE__*/React.createElement(StyledPageContent, {
-    "data-element": "carbon-page-content"
-  }, /*#__PURE__*/React.createElement(Box, {
+    hasContent: true
+  }, title), /*#__PURE__*/React.createElement(StyledPageContent, _extends({
+    "data-element": "carbon-page-content",
+    p: "30px 40px"
+  }, filterStyledSystemPaddingProps(rest)), /*#__PURE__*/React.createElement(Box, {
     boxSizing: "border-box",
     maxWidth: "100%",
     minWidth: "auto",
@@ -40,14 +46,163 @@ const Page = ({
 };
 
 Page.propTypes = {
-  /**
-   * The title for the page, normally a Heading component.
-   */
-  title: PropTypes.node.isRequired,
-
-  /**
-   * This component supports children.
-   */
-  children: PropTypes.node.isRequired
+  "children": PropTypes.node,
+  "p": PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.oneOf([null]), PropTypes.number, PropTypes.shape({
+    "__@toStringTag": PropTypes.string.isRequired,
+    "description": PropTypes.string,
+    "toString": PropTypes.func.isRequired,
+    "valueOf": PropTypes.func.isRequired
+  }), PropTypes.string])), PropTypes.number, PropTypes.object, PropTypes.shape({
+    "__@toStringTag": PropTypes.string.isRequired,
+    "description": PropTypes.string,
+    "toString": PropTypes.func.isRequired,
+    "valueOf": PropTypes.func.isRequired
+  }), PropTypes.string]),
+  "padding": PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.oneOf([null]), PropTypes.number, PropTypes.shape({
+    "__@toStringTag": PropTypes.string.isRequired,
+    "description": PropTypes.string,
+    "toString": PropTypes.func.isRequired,
+    "valueOf": PropTypes.func.isRequired
+  }), PropTypes.string])), PropTypes.number, PropTypes.object, PropTypes.shape({
+    "__@toStringTag": PropTypes.string.isRequired,
+    "description": PropTypes.string,
+    "toString": PropTypes.func.isRequired,
+    "valueOf": PropTypes.func.isRequired
+  }), PropTypes.string]),
+  "paddingBottom": PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.oneOf([null]), PropTypes.number, PropTypes.shape({
+    "__@toStringTag": PropTypes.string.isRequired,
+    "description": PropTypes.string,
+    "toString": PropTypes.func.isRequired,
+    "valueOf": PropTypes.func.isRequired
+  }), PropTypes.string])), PropTypes.number, PropTypes.object, PropTypes.shape({
+    "__@toStringTag": PropTypes.string.isRequired,
+    "description": PropTypes.string,
+    "toString": PropTypes.func.isRequired,
+    "valueOf": PropTypes.func.isRequired
+  }), PropTypes.string]),
+  "paddingLeft": PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.oneOf([null]), PropTypes.number, PropTypes.shape({
+    "__@toStringTag": PropTypes.string.isRequired,
+    "description": PropTypes.string,
+    "toString": PropTypes.func.isRequired,
+    "valueOf": PropTypes.func.isRequired
+  }), PropTypes.string])), PropTypes.number, PropTypes.object, PropTypes.shape({
+    "__@toStringTag": PropTypes.string.isRequired,
+    "description": PropTypes.string,
+    "toString": PropTypes.func.isRequired,
+    "valueOf": PropTypes.func.isRequired
+  }), PropTypes.string]),
+  "paddingRight": PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.oneOf([null]), PropTypes.number, PropTypes.shape({
+    "__@toStringTag": PropTypes.string.isRequired,
+    "description": PropTypes.string,
+    "toString": PropTypes.func.isRequired,
+    "valueOf": PropTypes.func.isRequired
+  }), PropTypes.string])), PropTypes.number, PropTypes.object, PropTypes.shape({
+    "__@toStringTag": PropTypes.string.isRequired,
+    "description": PropTypes.string,
+    "toString": PropTypes.func.isRequired,
+    "valueOf": PropTypes.func.isRequired
+  }), PropTypes.string]),
+  "paddingTop": PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.oneOf([null]), PropTypes.number, PropTypes.shape({
+    "__@toStringTag": PropTypes.string.isRequired,
+    "description": PropTypes.string,
+    "toString": PropTypes.func.isRequired,
+    "valueOf": PropTypes.func.isRequired
+  }), PropTypes.string])), PropTypes.number, PropTypes.object, PropTypes.shape({
+    "__@toStringTag": PropTypes.string.isRequired,
+    "description": PropTypes.string,
+    "toString": PropTypes.func.isRequired,
+    "valueOf": PropTypes.func.isRequired
+  }), PropTypes.string]),
+  "paddingX": PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.oneOf([null]), PropTypes.number, PropTypes.shape({
+    "__@toStringTag": PropTypes.string.isRequired,
+    "description": PropTypes.string,
+    "toString": PropTypes.func.isRequired,
+    "valueOf": PropTypes.func.isRequired
+  }), PropTypes.string])), PropTypes.number, PropTypes.object, PropTypes.shape({
+    "__@toStringTag": PropTypes.string.isRequired,
+    "description": PropTypes.string,
+    "toString": PropTypes.func.isRequired,
+    "valueOf": PropTypes.func.isRequired
+  }), PropTypes.string]),
+  "paddingY": PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.oneOf([null]), PropTypes.number, PropTypes.shape({
+    "__@toStringTag": PropTypes.string.isRequired,
+    "description": PropTypes.string,
+    "toString": PropTypes.func.isRequired,
+    "valueOf": PropTypes.func.isRequired
+  }), PropTypes.string])), PropTypes.number, PropTypes.object, PropTypes.shape({
+    "__@toStringTag": PropTypes.string.isRequired,
+    "description": PropTypes.string,
+    "toString": PropTypes.func.isRequired,
+    "valueOf": PropTypes.func.isRequired
+  }), PropTypes.string]),
+  "pb": PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.oneOf([null]), PropTypes.number, PropTypes.shape({
+    "__@toStringTag": PropTypes.string.isRequired,
+    "description": PropTypes.string,
+    "toString": PropTypes.func.isRequired,
+    "valueOf": PropTypes.func.isRequired
+  }), PropTypes.string])), PropTypes.number, PropTypes.object, PropTypes.shape({
+    "__@toStringTag": PropTypes.string.isRequired,
+    "description": PropTypes.string,
+    "toString": PropTypes.func.isRequired,
+    "valueOf": PropTypes.func.isRequired
+  }), PropTypes.string]),
+  "pl": PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.oneOf([null]), PropTypes.number, PropTypes.shape({
+    "__@toStringTag": PropTypes.string.isRequired,
+    "description": PropTypes.string,
+    "toString": PropTypes.func.isRequired,
+    "valueOf": PropTypes.func.isRequired
+  }), PropTypes.string])), PropTypes.number, PropTypes.object, PropTypes.shape({
+    "__@toStringTag": PropTypes.string.isRequired,
+    "description": PropTypes.string,
+    "toString": PropTypes.func.isRequired,
+    "valueOf": PropTypes.func.isRequired
+  }), PropTypes.string]),
+  "pr": PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.oneOf([null]), PropTypes.number, PropTypes.shape({
+    "__@toStringTag": PropTypes.string.isRequired,
+    "description": PropTypes.string,
+    "toString": PropTypes.func.isRequired,
+    "valueOf": PropTypes.func.isRequired
+  }), PropTypes.string])), PropTypes.number, PropTypes.object, PropTypes.shape({
+    "__@toStringTag": PropTypes.string.isRequired,
+    "description": PropTypes.string,
+    "toString": PropTypes.func.isRequired,
+    "valueOf": PropTypes.func.isRequired
+  }), PropTypes.string]),
+  "pt": PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.oneOf([null]), PropTypes.number, PropTypes.shape({
+    "__@toStringTag": PropTypes.string.isRequired,
+    "description": PropTypes.string,
+    "toString": PropTypes.func.isRequired,
+    "valueOf": PropTypes.func.isRequired
+  }), PropTypes.string])), PropTypes.number, PropTypes.object, PropTypes.shape({
+    "__@toStringTag": PropTypes.string.isRequired,
+    "description": PropTypes.string,
+    "toString": PropTypes.func.isRequired,
+    "valueOf": PropTypes.func.isRequired
+  }), PropTypes.string]),
+  "px": PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.oneOf([null]), PropTypes.number, PropTypes.shape({
+    "__@toStringTag": PropTypes.string.isRequired,
+    "description": PropTypes.string,
+    "toString": PropTypes.func.isRequired,
+    "valueOf": PropTypes.func.isRequired
+  }), PropTypes.string])), PropTypes.number, PropTypes.object, PropTypes.shape({
+    "__@toStringTag": PropTypes.string.isRequired,
+    "description": PropTypes.string,
+    "toString": PropTypes.func.isRequired,
+    "valueOf": PropTypes.func.isRequired
+  }), PropTypes.string]),
+  "py": PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.oneOf([null]), PropTypes.number, PropTypes.shape({
+    "__@toStringTag": PropTypes.string.isRequired,
+    "description": PropTypes.string,
+    "toString": PropTypes.func.isRequired,
+    "valueOf": PropTypes.func.isRequired
+  }), PropTypes.string])), PropTypes.number, PropTypes.object, PropTypes.shape({
+    "__@toStringTag": PropTypes.string.isRequired,
+    "description": PropTypes.string,
+    "toString": PropTypes.func.isRequired,
+    "valueOf": PropTypes.func.isRequired
+  }), PropTypes.string]),
+  "title": PropTypes.node,
+  "transitionName": PropTypes.func
 };
+Page.displayName = "Page";
 export default Page;

package/esm/components/pages/page/page.style.d.ts

@@ -0,0 +1,3 @@
+declare const StyledPage: import("styled-components").StyledComponent<"article", any, {}, never>;
+declare const StyledPageContent: import("styled-components").StyledComponent<"div", any, {}, never>;
+export { StyledPage, StyledPageContent };

package/esm/components/pages/page/page.style.js

@@ -1,12 +1,13 @@
 import styled from "styled-components";
+import { padding } from "styled-system";
 import BaseTheme from "../../../style/themes/base";
 const StyledPage = styled.article`
   width: 100%;
   height: 100%;
 `;
 const StyledPageContent = styled.div`
+  ${padding}
   box-sizing: border-box;
-  padding: 30px 40px;
   width: 100%;
   height: 100%;
   overflow-y: auto;
@@ -14,4 +15,7 @@ const StyledPageContent = styled.div`
 StyledPage.defaultProps = {
   theme: BaseTheme
 };
+StyledPageContent.defaultProps = {
+  theme: BaseTheme
+};
 export { StyledPage, StyledPageContent };