carbon-react 109.3.5 → 109.4.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/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 };

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

@@ -0,0 +1,23 @@
+import React from "react";
+import Page from "./page";
+import { ThemeObject } from "../../style/themes/base";
+export interface PagesProps {
+    /** [legacy] Custom className */
+    className?: string;
+    /** The selected tab on page load */
+    initialpageIndex?: number | string;
+    /** The current page's index */
+    pageIndex?: number | string;
+    /** Individual Page components */
+    children?: React.ReactNode;
+    /** Controls which transition to use (fade or slide). */
+    transition?: string;
+    /** @ignore @private */
+    theme?: Partial<ThemeObject>;
+}
+declare const Pages: {
+    ({ pageIndex: incomingPageIndex, initialpageIndex, transition, children, ...props }: PagesProps): JSX.Element;
+    displayName: string;
+};
+export default Pages;
+export { Page };

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

@@ -2,7 +2,7 @@ import React, { useCallback, useEffect, useRef, useState } from "react";
 import PropTypes from "prop-types";
 import { TransitionGroup } from "react-transition-group";
 import tagComponent from "../../__internal__/utils/helpers/tags/tags";
-import Page from "./page/page.component";
+import Page from "./page";
 import { PagesWrapperStyle, PagesContent } from "./pages.style";
 const NEXT = "next";
 const PREVIOUS = "previous";
@@ -29,6 +29,9 @@ const Pages = ({
   const handleVisiblePage = () => {
     let index = pageIndex;
     const visiblePage = React.Children.toArray(children)[index];
+    /* istanbul ignore if */
+
+    if (! /*#__PURE__*/React.isValidElement(visiblePage)) return visiblePage;
     index = visiblePage.props.id || index;
     const additionalProps = {
       transitionName,
@@ -82,18 +85,52 @@ const Pages = ({
 };
 
 Pages.propTypes = {
-  /** [legacy] Custom className */
-  className: PropTypes.string,
-
-  /** The selected tab on page load */
-  initialpageIndex: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
-  pageIndex: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
-
-  /** Individual tabs */
-  children: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.node), PropTypes.node]),
-
-  /** Controls which transition to use. */
-  transition: PropTypes.string
+  "children": PropTypes.node,
+  "className": PropTypes.string,
+  "initialpageIndex": PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
+  "pageIndex": PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
+  "theme": PropTypes.shape({
+    "colors": PropTypes.shape({
+      "destructive": PropTypes.shape({
+        "hover": PropTypes.string.isRequired
+      }),
+      "error": PropTypes.string,
+      "focus": PropTypes.string,
+      "info": PropTypes.string,
+      "loadingBarBackground": PropTypes.string,
+      "placeholder": PropTypes.string,
+      "primary": PropTypes.string,
+      "secondary": PropTypes.string,
+      "tertiary": PropTypes.string,
+      "warning": PropTypes.string,
+      "warningText": PropTypes.string,
+      "white": PropTypes.oneOf(["#FFFFFF"])
+    }),
+    "compatibility": PropTypes.object,
+    "disabled": PropTypes.shape({
+      "background": PropTypes.string.isRequired
+    }),
+    "name": PropTypes.string,
+    "palette": PropTypes.shape({
+      "blackOpacity": PropTypes.func.isRequired,
+      "whiteOpacity": PropTypes.func.isRequired
+    }),
+    "space": PropTypes.arrayOf(PropTypes.string),
+    "spacing": PropTypes.number,
+    "zIndex": PropTypes.shape({
+      "aboveAll": PropTypes.number.isRequired,
+      "fullScreenModal": PropTypes.number.isRequired,
+      "header": PropTypes.number.isRequired,
+      "modal": PropTypes.number.isRequired,
+      "nav": PropTypes.number.isRequired,
+      "notification": PropTypes.number.isRequired,
+      "overlay": PropTypes.number.isRequired,
+      "popover": PropTypes.number.isRequired,
+      "smallOverlay": PropTypes.number.isRequired
+    })
+  }),
+  "transition": PropTypes.string
 };
+Pages.displayName = "Pages";
 export default Pages;
 export { Page };

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

@@ -0,0 +1,3 @@
+declare const slideAnimation: import("styled-components").FlattenSimpleInterpolation;
+declare const fadeAnimation: import("styled-components").FlattenSimpleInterpolation;
+export { slideAnimation, fadeAnimation };

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

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

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

@@ -19,8 +19,8 @@ const PagesWrapperStyle = styled.div`
     overflow: hidden;
     position: relative;
   }
-  ${slideAnimation};
-  ${fadeAnimation};
+  ${slideAnimation}
+  ${fadeAnimation}
 `;
 PagesContent.defaultProps = {
   theme: BaseTheme

package/lib/__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/lib/__internal__/full-screen-heading/full-screen-heading.component.js

@@ -24,15 +24,19 @@ function _extends() { _extends = Object.assign || function (target) { for (var i
 const FullScreenHeading = /*#__PURE__*/_react.default.forwardRef((props, ref) => {
   const {
     children,
-    ...otherProps
+    hasContent
   } = props;
-  return /*#__PURE__*/_react.default.createElement(_fullScreenHeading.default, _extends({}, otherProps, (0, _tags.default)("full-screen-heading", props), {
+  return /*#__PURE__*/_react.default.createElement(_fullScreenHeading.default, _extends({
+    hasContent: hasContent
+  }, (0, _tags.default)("full-screen-heading", props), {
     ref: ref
   }), /*#__PURE__*/_react.default.createElement(_fullScreenHeading.StyledHeaderContainer, null, children));
 });
 
 FullScreenHeading.propTypes = {
-  children: _propTypes.default.node
+  "children": _propTypes.default.node,
+  "hasContent": _propTypes.default.bool
 };
+FullScreenHeading.displayName = "FullScreenHeading";
 var _default = FullScreenHeading;
 exports.default = _default;

package/lib/__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/lib/__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/lib/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/lib/components/box/box.component.js

@@ -59,6 +59,12 @@ const Box = _styledComponents.default.div`
         background-color: ${_box.default[scrollVariant].thumb};
       }
     `}
+
+  ${({
+  boxSizing
+}) => boxSizing && (0, _styledComponents.css)`
+      box-sizing: ${boxSizing};
+    `}
 `;
 Box.defaultProps = {
   theme: _base.default

package/lib/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/lib/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/lib/components/pages/page/index.d.ts

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

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

@@ -0,0 +1,15 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+Object.defineProperty(exports, "default", {
+  enumerable: true,
+  get: function () {
+    return _page.default;
+  }
+});
+
+var _page = _interopRequireDefault(require("./page.component"));
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }

package/lib/components/pages/page/package.json

@@ -1,3 +1,6 @@
 {
-  "main": "./page.js"
-}
+  "sideEffects": false,
+  "module": "../../../../esm/components/pages/page/index.js",
+  "main": "./index.js",
+  "types": "./index.d.ts"
+}

package/lib/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/lib/components/pages/page/page.component.js

@@ -19,6 +19,8 @@ var _box = _interopRequireDefault(require("../../box"));
 
 var _page = require("./page.style");
 
+var _utils = require("../../../style/utils");
+
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
 function _getRequireWildcardCache() { if (typeof WeakMap !== "function") return null; var cache = new WeakMap(); _getRequireWildcardCache = function () { return cache; }; return cache; }
@@ -30,26 +32,31 @@ function _extends() { _extends = Object.assign || function (target) { for (var i
 const Page = ({
   title,
   children,
-  ...props
+  ...rest
 }) => {
-  const styledPageNodeRef = (0, _react.useRef)();
+  const styledPageNodeRef = (0, _react.useRef)(null);
+  const {
+    transitionName
+  } = rest;
   return /*#__PURE__*/_react.default.createElement(_reactTransitionGroup.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.default.createElement(_page.StyledPage, _extends({}, (0, _tags.default)("page", props), {
+  }, rest), /*#__PURE__*/_react.default.createElement(_page.StyledPage, _extends({}, (0, _tags.default)("page", rest), {
     ref: styledPageNodeRef
   }), /*#__PURE__*/_react.default.createElement(_fullScreenHeading.default, {
-    hasContent: title
-  }, title), /*#__PURE__*/_react.default.createElement(_page.StyledPageContent, {
-    "data-element": "carbon-page-content"
-  }, /*#__PURE__*/_react.default.createElement(_box.default, {
+    hasContent: true
+  }, title), /*#__PURE__*/_react.default.createElement(_page.StyledPageContent, _extends({
+    "data-element": "carbon-page-content",
+    p: "30px 40px"
+  }, (0, _utils.filterStyledSystemPaddingProps)(rest)), /*#__PURE__*/_react.default.createElement(_box.default, {
     boxSizing: "border-box",
     maxWidth: "100%",
     minWidth: "auto",
@@ -59,15 +66,164 @@ const Page = ({
 };
 
 Page.propTypes = {
-  /**
-   * The title for the page, normally a Heading component.
-   */
-  title: _propTypes.default.node.isRequired,
-
-  /**
-   * This component supports children.
-   */
-  children: _propTypes.default.node.isRequired
+  "children": _propTypes.default.node,
+  "p": _propTypes.default.oneOfType([_propTypes.default.arrayOf(_propTypes.default.oneOfType([_propTypes.default.oneOf([null]), _propTypes.default.number, _propTypes.default.shape({
+    "__@toStringTag": _propTypes.default.string.isRequired,
+    "description": _propTypes.default.string,
+    "toString": _propTypes.default.func.isRequired,
+    "valueOf": _propTypes.default.func.isRequired
+  }), _propTypes.default.string])), _propTypes.default.number, _propTypes.default.object, _propTypes.default.shape({
+    "__@toStringTag": _propTypes.default.string.isRequired,
+    "description": _propTypes.default.string,
+    "toString": _propTypes.default.func.isRequired,
+    "valueOf": _propTypes.default.func.isRequired
+  }), _propTypes.default.string]),
+  "padding": _propTypes.default.oneOfType([_propTypes.default.arrayOf(_propTypes.default.oneOfType([_propTypes.default.oneOf([null]), _propTypes.default.number, _propTypes.default.shape({
+    "__@toStringTag": _propTypes.default.string.isRequired,
+    "description": _propTypes.default.string,
+    "toString": _propTypes.default.func.isRequired,
+    "valueOf": _propTypes.default.func.isRequired
+  }), _propTypes.default.string])), _propTypes.default.number, _propTypes.default.object, _propTypes.default.shape({
+    "__@toStringTag": _propTypes.default.string.isRequired,
+    "description": _propTypes.default.string,
+    "toString": _propTypes.default.func.isRequired,
+    "valueOf": _propTypes.default.func.isRequired
+  }), _propTypes.default.string]),
+  "paddingBottom": _propTypes.default.oneOfType([_propTypes.default.arrayOf(_propTypes.default.oneOfType([_propTypes.default.oneOf([null]), _propTypes.default.number, _propTypes.default.shape({
+    "__@toStringTag": _propTypes.default.string.isRequired,
+    "description": _propTypes.default.string,
+    "toString": _propTypes.default.func.isRequired,
+    "valueOf": _propTypes.default.func.isRequired
+  }), _propTypes.default.string])), _propTypes.default.number, _propTypes.default.object, _propTypes.default.shape({
+    "__@toStringTag": _propTypes.default.string.isRequired,
+    "description": _propTypes.default.string,
+    "toString": _propTypes.default.func.isRequired,
+    "valueOf": _propTypes.default.func.isRequired
+  }), _propTypes.default.string]),
+  "paddingLeft": _propTypes.default.oneOfType([_propTypes.default.arrayOf(_propTypes.default.oneOfType([_propTypes.default.oneOf([null]), _propTypes.default.number, _propTypes.default.shape({
+    "__@toStringTag": _propTypes.default.string.isRequired,
+    "description": _propTypes.default.string,
+    "toString": _propTypes.default.func.isRequired,
+    "valueOf": _propTypes.default.func.isRequired
+  }), _propTypes.default.string])), _propTypes.default.number, _propTypes.default.object, _propTypes.default.shape({
+    "__@toStringTag": _propTypes.default.string.isRequired,
+    "description": _propTypes.default.string,
+    "toString": _propTypes.default.func.isRequired,
+    "valueOf": _propTypes.default.func.isRequired
+  }), _propTypes.default.string]),
+  "paddingRight": _propTypes.default.oneOfType([_propTypes.default.arrayOf(_propTypes.default.oneOfType([_propTypes.default.oneOf([null]), _propTypes.default.number, _propTypes.default.shape({
+    "__@toStringTag": _propTypes.default.string.isRequired,
+    "description": _propTypes.default.string,
+    "toString": _propTypes.default.func.isRequired,
+    "valueOf": _propTypes.default.func.isRequired
+  }), _propTypes.default.string])), _propTypes.default.number, _propTypes.default.object, _propTypes.default.shape({
+    "__@toStringTag": _propTypes.default.string.isRequired,
+    "description": _propTypes.default.string,
+    "toString": _propTypes.default.func.isRequired,
+    "valueOf": _propTypes.default.func.isRequired
+  }), _propTypes.default.string]),
+  "paddingTop": _propTypes.default.oneOfType([_propTypes.default.arrayOf(_propTypes.default.oneOfType([_propTypes.default.oneOf([null]), _propTypes.default.number, _propTypes.default.shape({
+    "__@toStringTag": _propTypes.default.string.isRequired,
+    "description": _propTypes.default.string,
+    "toString": _propTypes.default.func.isRequired,
+    "valueOf": _propTypes.default.func.isRequired
+  }), _propTypes.default.string])), _propTypes.default.number, _propTypes.default.object, _propTypes.default.shape({
+    "__@toStringTag": _propTypes.default.string.isRequired,
+    "description": _propTypes.default.string,
+    "toString": _propTypes.default.func.isRequired,
+    "valueOf": _propTypes.default.func.isRequired
+  }), _propTypes.default.string]),
+  "paddingX": _propTypes.default.oneOfType([_propTypes.default.arrayOf(_propTypes.default.oneOfType([_propTypes.default.oneOf([null]), _propTypes.default.number, _propTypes.default.shape({
+    "__@toStringTag": _propTypes.default.string.isRequired,
+    "description": _propTypes.default.string,
+    "toString": _propTypes.default.func.isRequired,
+    "valueOf": _propTypes.default.func.isRequired
+  }), _propTypes.default.string])), _propTypes.default.number, _propTypes.default.object, _propTypes.default.shape({
+    "__@toStringTag": _propTypes.default.string.isRequired,
+    "description": _propTypes.default.string,
+    "toString": _propTypes.default.func.isRequired,
+    "valueOf": _propTypes.default.func.isRequired
+  }), _propTypes.default.string]),
+  "paddingY": _propTypes.default.oneOfType([_propTypes.default.arrayOf(_propTypes.default.oneOfType([_propTypes.default.oneOf([null]), _propTypes.default.number, _propTypes.default.shape({
+    "__@toStringTag": _propTypes.default.string.isRequired,
+    "description": _propTypes.default.string,
+    "toString": _propTypes.default.func.isRequired,
+    "valueOf": _propTypes.default.func.isRequired
+  }), _propTypes.default.string])), _propTypes.default.number, _propTypes.default.object, _propTypes.default.shape({
+    "__@toStringTag": _propTypes.default.string.isRequired,
+    "description": _propTypes.default.string,
+    "toString": _propTypes.default.func.isRequired,
+    "valueOf": _propTypes.default.func.isRequired
+  }), _propTypes.default.string]),
+  "pb": _propTypes.default.oneOfType([_propTypes.default.arrayOf(_propTypes.default.oneOfType([_propTypes.default.oneOf([null]), _propTypes.default.number, _propTypes.default.shape({
+    "__@toStringTag": _propTypes.default.string.isRequired,
+    "description": _propTypes.default.string,
+    "toString": _propTypes.default.func.isRequired,
+    "valueOf": _propTypes.default.func.isRequired
+  }), _propTypes.default.string])), _propTypes.default.number, _propTypes.default.object, _propTypes.default.shape({
+    "__@toStringTag": _propTypes.default.string.isRequired,
+    "description": _propTypes.default.string,
+    "toString": _propTypes.default.func.isRequired,
+    "valueOf": _propTypes.default.func.isRequired
+  }), _propTypes.default.string]),
+  "pl": _propTypes.default.oneOfType([_propTypes.default.arrayOf(_propTypes.default.oneOfType([_propTypes.default.oneOf([null]), _propTypes.default.number, _propTypes.default.shape({
+    "__@toStringTag": _propTypes.default.string.isRequired,
+    "description": _propTypes.default.string,
+    "toString": _propTypes.default.func.isRequired,
+    "valueOf": _propTypes.default.func.isRequired
+  }), _propTypes.default.string])), _propTypes.default.number, _propTypes.default.object, _propTypes.default.shape({
+    "__@toStringTag": _propTypes.default.string.isRequired,
+    "description": _propTypes.default.string,
+    "toString": _propTypes.default.func.isRequired,
+    "valueOf": _propTypes.default.func.isRequired
+  }), _propTypes.default.string]),
+  "pr": _propTypes.default.oneOfType([_propTypes.default.arrayOf(_propTypes.default.oneOfType([_propTypes.default.oneOf([null]), _propTypes.default.number, _propTypes.default.shape({
+    "__@toStringTag": _propTypes.default.string.isRequired,
+    "description": _propTypes.default.string,
+    "toString": _propTypes.default.func.isRequired,
+    "valueOf": _propTypes.default.func.isRequired
+  }), _propTypes.default.string])), _propTypes.default.number, _propTypes.default.object, _propTypes.default.shape({
+    "__@toStringTag": _propTypes.default.string.isRequired,
+    "description": _propTypes.default.string,
+    "toString": _propTypes.default.func.isRequired,
+    "valueOf": _propTypes.default.func.isRequired
+  }), _propTypes.default.string]),
+  "pt": _propTypes.default.oneOfType([_propTypes.default.arrayOf(_propTypes.default.oneOfType([_propTypes.default.oneOf([null]), _propTypes.default.number, _propTypes.default.shape({
+    "__@toStringTag": _propTypes.default.string.isRequired,
+    "description": _propTypes.default.string,
+    "toString": _propTypes.default.func.isRequired,
+    "valueOf": _propTypes.default.func.isRequired
+  }), _propTypes.default.string])), _propTypes.default.number, _propTypes.default.object, _propTypes.default.shape({
+    "__@toStringTag": _propTypes.default.string.isRequired,
+    "description": _propTypes.default.string,
+    "toString": _propTypes.default.func.isRequired,
+    "valueOf": _propTypes.default.func.isRequired
+  }), _propTypes.default.string]),
+  "px": _propTypes.default.oneOfType([_propTypes.default.arrayOf(_propTypes.default.oneOfType([_propTypes.default.oneOf([null]), _propTypes.default.number, _propTypes.default.shape({
+    "__@toStringTag": _propTypes.default.string.isRequired,
+    "description": _propTypes.default.string,
+    "toString": _propTypes.default.func.isRequired,
+    "valueOf": _propTypes.default.func.isRequired
+  }), _propTypes.default.string])), _propTypes.default.number, _propTypes.default.object, _propTypes.default.shape({
+    "__@toStringTag": _propTypes.default.string.isRequired,
+    "description": _propTypes.default.string,
+    "toString": _propTypes.default.func.isRequired,
+    "valueOf": _propTypes.default.func.isRequired
+  }), _propTypes.default.string]),
+  "py": _propTypes.default.oneOfType([_propTypes.default.arrayOf(_propTypes.default.oneOfType([_propTypes.default.oneOf([null]), _propTypes.default.number, _propTypes.default.shape({
+    "__@toStringTag": _propTypes.default.string.isRequired,
+    "description": _propTypes.default.string,
+    "toString": _propTypes.default.func.isRequired,
+    "valueOf": _propTypes.default.func.isRequired
+  }), _propTypes.default.string])), _propTypes.default.number, _propTypes.default.object, _propTypes.default.shape({
+    "__@toStringTag": _propTypes.default.string.isRequired,
+    "description": _propTypes.default.string,
+    "toString": _propTypes.default.func.isRequired,
+    "valueOf": _propTypes.default.func.isRequired
+  }), _propTypes.default.string]),
+  "title": _propTypes.default.node,
+  "transitionName": _propTypes.default.func
 };
+Page.displayName = "Page";
 var _default = Page;
 exports.default = _default;

package/lib/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/lib/components/pages/page/page.style.js

@@ -7,6 +7,8 @@ exports.StyledPageContent = exports.StyledPage = void 0;
 
 var _styledComponents = _interopRequireDefault(require("styled-components"));
 
+var _styledSystem = require("styled-system");
+
 var _base = _interopRequireDefault(require("../../../style/themes/base"));
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
@@ -17,8 +19,8 @@ const StyledPage = _styledComponents.default.article`
 `;
 exports.StyledPage = StyledPage;
 const StyledPageContent = _styledComponents.default.div`
+  ${_styledSystem.padding}
   box-sizing: border-box;
-  padding: 30px 40px;
   width: 100%;
   height: 100%;
   overflow-y: auto;
@@ -26,4 +28,7 @@ const StyledPageContent = _styledComponents.default.div`
 exports.StyledPageContent = StyledPageContent;
 StyledPage.defaultProps = {
   theme: _base.default
+};
+StyledPageContent.defaultProps = {
+  theme: _base.default
 };

package/lib/components/pages/pages.component.d.ts

@@ -0,0 +1,23 @@
+import React from "react";
+import Page from "./page";
+import { ThemeObject } from "../../style/themes/base";
+export interface PagesProps {
+    /** [legacy] Custom className */
+    className?: string;
+    /** The selected tab on page load */
+    initialpageIndex?: number | string;
+    /** The current page's index */
+    pageIndex?: number | string;
+    /** Individual Page components */
+    children?: React.ReactNode;
+    /** Controls which transition to use (fade or slide). */
+    transition?: string;
+    /** @ignore @private */
+    theme?: Partial<ThemeObject>;
+}
+declare const Pages: {
+    ({ pageIndex: incomingPageIndex, initialpageIndex, transition, children, ...props }: PagesProps): JSX.Element;
+    displayName: string;
+};
+export default Pages;
+export { Page };

package/lib/components/pages/pages.component.js

@@ -19,7 +19,7 @@ var _reactTransitionGroup = require("react-transition-group");
 
 var _tags = _interopRequireDefault(require("../../__internal__/utils/helpers/tags/tags"));
 
-var _page = _interopRequireDefault(require("./page/page.component"));
+var _page = _interopRequireDefault(require("./page"));
 
 var _pages = require("./pages.style");
 
@@ -55,7 +55,10 @@ const Pages = ({
     let index = pageIndex;
 
     const visiblePage = _react.default.Children.toArray(children)[index];
+    /* istanbul ignore if */
 
+
+    if (! /*#__PURE__*/_react.default.isValidElement(visiblePage)) return visiblePage;
     index = visiblePage.props.id || index;
     const additionalProps = {
       transitionName,
@@ -109,18 +112,52 @@ const Pages = ({
 };
 
 Pages.propTypes = {
-  /** [legacy] Custom className */
-  className: _propTypes.default.string,
-
-  /** The selected tab on page load */
-  initialpageIndex: _propTypes.default.oneOfType([_propTypes.default.number, _propTypes.default.string]),
-  pageIndex: _propTypes.default.oneOfType([_propTypes.default.number, _propTypes.default.string]),
-
-  /** Individual tabs */
-  children: _propTypes.default.oneOfType([_propTypes.default.arrayOf(_propTypes.default.node), _propTypes.default.node]),
-
-  /** Controls which transition to use. */
-  transition: _propTypes.default.string
+  "children": _propTypes.default.node,
+  "className": _propTypes.default.string,
+  "initialpageIndex": _propTypes.default.oneOfType([_propTypes.default.number, _propTypes.default.string]),
+  "pageIndex": _propTypes.default.oneOfType([_propTypes.default.number, _propTypes.default.string]),
+  "theme": _propTypes.default.shape({
+    "colors": _propTypes.default.shape({
+      "destructive": _propTypes.default.shape({
+        "hover": _propTypes.default.string.isRequired
+      }),
+      "error": _propTypes.default.string,
+      "focus": _propTypes.default.string,
+      "info": _propTypes.default.string,
+      "loadingBarBackground": _propTypes.default.string,
+      "placeholder": _propTypes.default.string,
+      "primary": _propTypes.default.string,
+      "secondary": _propTypes.default.string,
+      "tertiary": _propTypes.default.string,
+      "warning": _propTypes.default.string,
+      "warningText": _propTypes.default.string,
+      "white": _propTypes.default.oneOf(["#FFFFFF"])
+    }),
+    "compatibility": _propTypes.default.object,
+    "disabled": _propTypes.default.shape({
+      "background": _propTypes.default.string.isRequired
+    }),
+    "name": _propTypes.default.string,
+    "palette": _propTypes.default.shape({
+      "blackOpacity": _propTypes.default.func.isRequired,
+      "whiteOpacity": _propTypes.default.func.isRequired
+    }),
+    "space": _propTypes.default.arrayOf(_propTypes.default.string),
+    "spacing": _propTypes.default.number,
+    "zIndex": _propTypes.default.shape({
+      "aboveAll": _propTypes.default.number.isRequired,
+      "fullScreenModal": _propTypes.default.number.isRequired,
+      "header": _propTypes.default.number.isRequired,
+      "modal": _propTypes.default.number.isRequired,
+      "nav": _propTypes.default.number.isRequired,
+      "notification": _propTypes.default.number.isRequired,
+      "overlay": _propTypes.default.number.isRequired,
+      "popover": _propTypes.default.number.isRequired,
+      "smallOverlay": _propTypes.default.number.isRequired
+    })
+  }),
+  "transition": _propTypes.default.string
 };
+Pages.displayName = "Pages";
 var _default = Pages;
 exports.default = _default;

package/lib/components/pages/pages.config.d.ts

@@ -0,0 +1,3 @@
+declare const slideAnimation: import("styled-components").FlattenSimpleInterpolation;
+declare const fadeAnimation: import("styled-components").FlattenSimpleInterpolation;
+export { slideAnimation, fadeAnimation };

package/lib/components/pages/pages.style.d.ts

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

package/lib/components/pages/pages.style.js

@@ -33,8 +33,8 @@ const PagesWrapperStyle = _styledComponents.default.div`
     overflow: hidden;
     position: relative;
   }
-  ${_pages.slideAnimation};
-  ${_pages.fadeAnimation};
+  ${_pages.slideAnimation}
+  ${_pages.fadeAnimation}
 `;
 exports.PagesWrapperStyle = PagesWrapperStyle;
 PagesContent.defaultProps = {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "carbon-react",
-  "version": "109.3.5",
+  "version": "109.4.0",
   "description": "A library of reusable React components for easily building user interfaces.",
   "engineStrict": true,
   "engines": {

package/esm/components/pages/page/package.json

@@ -1,3 +0,0 @@
-{
-  "main": "./page.js"
-}

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

@@ -1,12 +0,0 @@
-import * as React from "react";
-
-export interface PageProps {
-  /** The title for the page, normally a Heading component. */
-  title: React.ReactNode;
-  /** This component supports children. */
-  children: React.ReactNode;
-}
-
-declare function Page(props: PageProps): JSX.Element;
-
-export default Page;

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

@@ -1,23 +0,0 @@
-import * as React from "react";
-import Page from "./page/page";
-import { ThemeObject } from "../../style/themes/base";
-
-export interface PagesProps {
-  /** [legacy] Custom className */
-  className?: string;
-  /** The selected tab on page load */
-  initialpageIndex?: number | string;
-  pageIndex?: number | string;
-  /** Individual tabs */
-  children?: React.ReactNode[] | React.ReactNode;
-  /** Controls which transition to use. */
-  transition?: string;
-}
-
-declare class Pages extends React.Component<PagesProps> {}
-declare function PagesWithTheme(
-  props: PagesProps & { theme: ThemeObject }
-): JSX.Element;
-
-export default Pages;
-export { PagesWithTheme as Pages, Page };

package/lib/components/pages/page/page.d.ts

@@ -1,12 +0,0 @@
-import * as React from "react";
-
-export interface PageProps {
-  /** The title for the page, normally a Heading component. */
-  title: React.ReactNode;
-  /** This component supports children. */
-  children: React.ReactNode;
-}
-
-declare function Page(props: PageProps): JSX.Element;
-
-export default Page;

package/lib/components/pages/pages.d.ts

@@ -1,23 +0,0 @@
-import * as React from "react";
-import Page from "./page/page";
-import { ThemeObject } from "../../style/themes/base";
-
-export interface PagesProps {
-  /** [legacy] Custom className */
-  className?: string;
-  /** The selected tab on page load */
-  initialpageIndex?: number | string;
-  pageIndex?: number | string;
-  /** Individual tabs */
-  children?: React.ReactNode[] | React.ReactNode;
-  /** Controls which transition to use. */
-  transition?: string;
-}
-
-declare class Pages extends React.Component<PagesProps> {}
-declare function PagesWithTheme(
-  props: PagesProps & { theme: ThemeObject }
-): JSX.Element;
-
-export default Pages;
-export { PagesWithTheme as Pages, Page };