carbon-react 111.14.0 → 111.16.0

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

@@ -1,11 +1,14 @@
 import React from "react";
 import { SpaceProps, LayoutProps, FlexboxProps, ColorProps, PositionProps } from "styled-system";
+import * as DesignTokens from "@sage/design-tokens/js/base/common";
 declare const GAP_VALUES: readonly [0, 1, 2, 3, 4, 5, 6, 7, 8];
 export declare type OverflowWrap = "break-word" | "anywhere";
 export declare type ScrollVariant = "light" | "dark";
 export declare type BoxSizing = "content-box" | "border-box";
 export declare type AllowedNumericalValues = typeof GAP_VALUES[number];
 export declare type Gap = AllowedNumericalValues | string;
+declare type DesignTokensType = keyof typeof DesignTokens;
+declare type BoxShadowsType = Extract<DesignTokensType, `boxShadow${string}`>;
 export interface BoxProps extends SpaceProps, LayoutProps, FlexboxProps, ColorProps, Omit<PositionProps, "zIndex"> {
     as?: keyof JSX.IntrinsicElements | React.ComponentType<any>;
     /** String to set Box content break strategy. Note "anywhere" is not supported in Safari */
@@ -22,6 +25,8 @@ export interface BoxProps extends SpaceProps, LayoutProps, FlexboxProps, ColorPr
     columnGap?: Gap;
     /** Row gap an integer multiplier of the base spacing constant (8px) or any valid CSS string." */
     rowGap?: Gap;
+    /** Design Token for Box Shadow. Note: please check that the box shadow design token you are using is compatible with the Box component. */
+    boxShadow?: BoxShadowsType;
 }
-declare const Box: import("styled-components").StyledComponent<"div", any, BoxProps, never>;
+export declare const Box: import("styled-components").StyledComponent<"div", any, BoxProps, never>;
 export default Box;

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

@@ -4,7 +4,7 @@ import BaseTheme from "../../style/themes/base";
 import styledColor from "../../style/utils/color";
 import boxConfig from "./box.config";
 const GAP_VALUES = [0, 1, 2, 3, 4, 5, 6, 7, 8];
-const Box = styled.div`
+export const Box = styled.div`
   ${space}
   ${layout}
   ${flexbox}
@@ -69,6 +69,12 @@ const Box = styled.div`
         row-gap: ${boxConfig.gap(rowGap)};
       `}
     `};
+
+  ${({
+  boxShadow
+}) => boxShadow && css`
+      box-shadow: var(--${boxShadow});
+    `}
 `;
 Box.defaultProps = {
   theme: BaseTheme

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

@@ -1,6 +1,9 @@
 import React from "react";
 import { MarginProps } from "styled-system";
+import * as DesignTokens from "@sage/design-tokens/js/base/common";
 import { CardSpacing } from "./card.config";
+declare type DesignTokensType = keyof typeof DesignTokens;
+declare type BoxShadowsType = Extract<DesignTokensType, `boxShadow${string}`>;
 export interface CardProps extends MarginProps {
     /** Identifier used for testing purposes, applied to the root element of the component. */
     "data-element"?: string;
@@ -23,9 +26,13 @@ export interface CardProps extends MarginProps {
     interactive?: boolean;
     /** Size of card for applying padding */
     spacing?: CardSpacing;
+    /** Design token for custom Box Shadow. Note: please check that the box shadow design token you are using is compatible with the Card component. */
+    boxShadow?: BoxShadowsType;
+    /** Design token for custom Box Shadow on hover. Interactive prop must be True. Note: please check that the box shadow design token you are using is compatible with the Card component. */
+    hoverBoxShadow?: BoxShadowsType;
 }
 declare const Card: {
-    ({ "data-element": dataElement, "data-role": dataRole, dataRole: oldDataRole, action, children, cardWidth, draggable, interactive, spacing, ...rest }: CardProps): JSX.Element;
+    ({ "data-element": dataElement, "data-role": dataRole, dataRole: oldDataRole, action, children, cardWidth, draggable, interactive, spacing, boxShadow, hoverBoxShadow, ...rest }: CardProps): JSX.Element;
     displayName: string;
 };
 export default Card;

package/esm/components/card/card.component.js

@@ -24,6 +24,8 @@ const Card = ({
   draggable,
   interactive,
   spacing = "medium",
+  boxShadow,
+  hoverBoxShadow,
   ...rest
 }) => {
   if (!isDeprecationWarningTriggered && oldDataRole) {
@@ -56,6 +58,8 @@ const Card = ({
     interactive: !!interactive,
     draggable: !!draggable,
     spacing: spacing,
+    boxShadow: boxShadow,
+    hoverBoxShadow: hoverBoxShadow,
     onClick: interactive && !draggable ? action : undefined
   }, interactive && {
     tabIndex: 0,
@@ -67,12 +71,14 @@ const Card = ({
 
 Card.propTypes = {
   "action": PropTypes.func,
+  "boxShadow": PropTypes.any,
   "cardWidth": PropTypes.string,
   "children": PropTypes.node,
   "data-element": PropTypes.string,
   "data-role": PropTypes.string,
   "dataRole": PropTypes.string,
   "draggable": PropTypes.bool,
+  "hoverBoxShadow": PropTypes.any,
   "interactive": PropTypes.bool,
   "m": PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.oneOf([null]), PropTypes.number, PropTypes.shape({
     "__@toStringTag": PropTypes.string.isRequired,

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

@@ -1,10 +1,15 @@
 import { MarginProps } from "styled-system";
+import * as DesignTokens from "@sage/design-tokens/js/base/common";
 import { CardSpacing } from "./card.config";
+declare type DesignTokensType = keyof typeof DesignTokens;
+export declare type BoxShadowsType = Extract<DesignTokensType, `boxShadow${string}`>;
 export interface StyledCardProps extends MarginProps {
     cardWidth: string;
     interactive: boolean;
     draggable: boolean;
     spacing: CardSpacing;
+    boxShadow?: BoxShadowsType;
+    hoverBoxShadow?: BoxShadowsType;
 }
 declare const StyledCard: import("styled-components").StyledComponent<"div", any, StyledCardProps, never>;
 export default StyledCard;

package/esm/components/card/card.style.js

@@ -11,11 +11,13 @@ const StyledCard = styled.div`
   cardWidth,
   interactive,
   draggable,
-  spacing
+  spacing,
+  boxShadow = "boxShadow050",
+  hoverBoxShadow = "boxShadow100"
 }) => css`
     background-color: var(--colorsUtilityYang100);
     border: none;
-    box-shadow: var(--boxShadow050);
+    box-shadow: var(--${boxShadow});
     color: var(--colorsUtilityYin090);
     margin: 25px;
     padding: ${paddingSizes[spacing]};
@@ -30,7 +32,7 @@ const StyledCard = styled.div`
 
       :hover,
       :focus {
-        box-shadow: var(--boxShadow100);
+        box-shadow: var(--${hoverBoxShadow});
       }
     `}
 

package/esm/components/dialog/dialog.style.js

@@ -62,7 +62,7 @@ const StyledDialog = styled.div`
   }
 
   ${StyledFormFooter}.sticky {
-    ${calculateWidthValue};
+    ${calculateWidthValue}
     ${props => calculateFormSpacingValues(props, false)}
   }
 

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

@@ -465,6 +465,7 @@ DismissibleBox.propTypes = {
     "trimStart": PropTypes.func.isRequired,
     "valueOf": PropTypes.func.isRequired
   }), PropTypes.string]),
+  "boxShadow": PropTypes.any,
   "boxSizing": PropTypes.oneOf(["border-box", "content-box"]),
   "children": PropTypes.node,
   "color": PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.oneOf([null]), PropTypes.number, PropTypes.shape({

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

@@ -1,5 +1,5 @@
 import React from "react";
-import { SpaceProps } from "styled-system";
+import { SpaceProps, PaddingProps } from "styled-system";
 import { FormButtonAlignment } from "./form.config";
 export interface FormProps extends SpaceProps {
     /** Alignment of buttons */
@@ -28,9 +28,11 @@ export interface FormProps extends SpaceProps {
     height?: string;
     /** Applies styling for full width buttons. Please note that you will still need to pass the `fullWidth` prop to the button you compose */
     fullWidthButtons?: boolean;
+    /** Padding to be set on the form footer */
+    footerPadding?: PaddingProps;
 }
 export declare const Form: {
-    ({ children, saveButton, leftSideButtons, rightSideButtons, errorCount, warningCount, onSubmit, buttonAlignment, stickyFooter, fieldSpacing, noValidate, height, fullWidthButtons, ...rest }: FormProps): JSX.Element;
+    ({ children, saveButton, leftSideButtons, rightSideButtons, errorCount, warningCount, onSubmit, buttonAlignment, stickyFooter, fieldSpacing, noValidate, height, fullWidthButtons, footerPadding, ...rest }: FormProps): JSX.Element;
     displayName: string;
 };
 export default Form;

package/esm/components/form/form.component.js

@@ -21,6 +21,7 @@ const Form = ({
   noValidate = true,
   height,
   fullWidthButtons = false,
+  footerPadding = {},
   ...rest
 }) => {
   const {
@@ -31,7 +32,9 @@ const Form = ({
   } = useContext(ModalContext);
   const formRef = useRef(null);
   const formFooterRef = useRef(null);
+  const hasPadding = !!Object.keys(footerPadding).length;
   const renderFooter = !!(saveButton || leftSideButtons || rightSideButtons || errorCount || warningCount);
+  const classNames = `${stickyFooter ? "sticky" : ""} ${hasPadding ? "padded" : ""}`.trimEnd();
   return /*#__PURE__*/React.createElement(StyledForm, _extends({
     ref: formRef,
     stickyFooter: stickyFooter,
@@ -47,28 +50,28 @@ const Form = ({
     className: stickyFooter ? "sticky" : "",
     stickyFooter: stickyFooter,
     isInModal: isInModal
-  }, children), !fullWidthButtons && renderFooter && /*#__PURE__*/React.createElement(StyledFormFooter, {
+  }, children), !fullWidthButtons && renderFooter && /*#__PURE__*/React.createElement(StyledFormFooter, _extends({
     "data-element": "form-footer",
-    className: stickyFooter ? "sticky" : "",
+    className: classNames,
     ref: formFooterRef,
     stickyFooter: stickyFooter,
     buttonAlignment: buttonAlignment,
     isInModal: isInModal
-  }, leftSideButtons && /*#__PURE__*/React.createElement(StyledLeftButtons, {
+  }, footerPadding), leftSideButtons && /*#__PURE__*/React.createElement(StyledLeftButtons, {
     buttonAlignment: buttonAlignment
   }, leftSideButtons), /*#__PURE__*/React.createElement(FormSummary, {
     errorCount: errorCount,
     warningCount: warningCount
   }, saveButton), rightSideButtons && /*#__PURE__*/React.createElement(StyledRightButtons, {
     buttonAlignment: buttonAlignment
-  }, rightSideButtons)), fullWidthButtons && renderFooter && /*#__PURE__*/React.createElement(StyledFormFooter, {
+  }, rightSideButtons)), fullWidthButtons && renderFooter && /*#__PURE__*/React.createElement(StyledFormFooter, _extends({
     "data-element": "form-footer",
-    className: stickyFooter ? "sticky" : "",
+    className: classNames,
     ref: formFooterRef,
     stickyFooter: stickyFooter,
     buttonAlignment: buttonAlignment,
     fullWidthButtons: fullWidthButtons
-  }, leftSideButtons && /*#__PURE__*/React.createElement(StyledLeftButtons, {
+  }, footerPadding), leftSideButtons && /*#__PURE__*/React.createElement(StyledLeftButtons, {
     fullWidthButtons: fullWidthButtons
   }, leftSideButtons), rightSideButtons && /*#__PURE__*/React.createElement(StyledRightButtons, {
     fullWidthButtons: fullWidthButtons
@@ -84,6 +87,162 @@ Form.propTypes = {
   "children": PropTypes.node,
   "errorCount": PropTypes.number,
   "fieldSpacing": PropTypes.oneOf([0, 1, 2, 3, 4, 5, 6, 7]),
+  "footerPadding": PropTypes.shape({
+    "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])
+  }),
   "fullWidthButtons": PropTypes.bool,
   "height": PropTypes.string,
   "leftSideButtons": PropTypes.node,

package/esm/components/form/form.style.js

@@ -1,5 +1,5 @@
 import styled, { css } from "styled-components";
-import { space } from "styled-system";
+import { space, padding } from "styled-system";
 import StyledFormField from "../../__internal__/form-field/form-field.style";
 import { StyledFieldset } from "../../__internal__/fieldset/fieldset.style";
 import StyledButton from "../button/button.style";
@@ -56,7 +56,12 @@ export const StyledFormFooter = styled.div`
       align-items: stretch;
     `}
   `}
+
+  ${padding}
 `;
+StyledFormFooter.defaultProps = {
+  theme: baseTheme
+};
 
 const formBottomMargins = fieldSpacing => ({
   0: "var(--spacing000)",

package/esm/components/sidebar/__internal__/sidebar-header/sidebar-header.component.d.ts

@@ -1,9 +1,15 @@
 import React from "react";
-interface SidebarHeaderProps {
+import { PaddingProps } from "styled-system";
+export interface SidebarHeaderProps extends PaddingProps {
     /** This component supports children. */
     children?: React.ReactNode;
     /** A custom id. */
     id: string;
+    /** Close icon button to be rendered */
+    closeIcon?: React.ReactNode;
 }
-declare const SidebarHeader: ({ children, id }: SidebarHeaderProps) => JSX.Element;
+declare const SidebarHeader: {
+    ({ children, id, closeIcon, ...rest }: SidebarHeaderProps): JSX.Element;
+    displayName: string;
+};
 export default SidebarHeader;

package/esm/components/sidebar/__internal__/sidebar-header/sidebar-header.component.js

@@ -1,17 +1,179 @@
+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 from "react";
 import PropTypes from "prop-types";
-import SidebarHeaderStyle from "./sidebar-header.style";
+import StyledSidebarHeader from "./sidebar-header.style";
 
 const SidebarHeader = ({
   children,
-  id
-}) => /*#__PURE__*/React.createElement(SidebarHeaderStyle, {
+  id,
+  closeIcon,
+  ...rest
+}) => /*#__PURE__*/React.createElement(StyledSidebarHeader, _extends({
+  hasClose: !!closeIcon,
   id: id,
-  "data-component": "sidebar-header"
-}, children);
+  "data-component": "sidebar-header",
+  p: "27px 32px 32px"
+}, rest), children, closeIcon);
 
 SidebarHeader.propTypes = {
   "children": PropTypes.node,
-  "id": PropTypes.string.isRequired
+  "closeIcon": PropTypes.node,
+  "id": PropTypes.string.isRequired,
+  "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])
 };
+SidebarHeader.displayName = "SidebarHeader";
 export default SidebarHeader;

package/esm/components/sidebar/__internal__/sidebar-header/sidebar-header.style.d.ts

@@ -1,2 +1,4 @@
-declare const SidebarHeaderStyle: import("styled-components").StyledComponent<"div", any, {}, never>;
-export default SidebarHeaderStyle;
+declare const StyledSidebarHeader: import("styled-components").StyledComponent<"div", any, {
+    hasClose?: boolean | undefined;
+}, never>;
+export default StyledSidebarHeader;