carbon-react 106.1.3 → 106.1.6

package/lib/components/action-popover/action-popover.component.d.ts

@@ -11,28 +11,45 @@ declare function ActionPopover({ children, id, onOpen, onClose, rightAlignMenu,
     horizontalAlignment: any;
 }): JSX.Element;
 declare namespace ActionPopover {
-    namespace propTypes {
-        const id: PropTypes.Requireable<string>;
-        const onOpen: PropTypes.Requireable<(...args: any[]) => any>;
-        const onClose: PropTypes.Requireable<(...args: any[]) => any>;
-        const rightAlignMenu: PropTypes.Requireable<boolean>;
+    const propTypes: {
+        /** Unique ID */
+        id: PropTypes.Requireable<string>;
+        /** Callback to be called on menu open */
+        onOpen: PropTypes.Requireable<(...args: any[]) => any>;
+        /** Callback to be called on menu close */
+        onClose: PropTypes.Requireable<(...args: any[]) => any>;
+        /** Boolean to control whether menu should align to right */
+        rightAlignMenu: PropTypes.Requireable<boolean>;
         /** Children for popover component */
-        function children(props: any, propName: any, componentName: any): undefined;
-        /** Children for popover component */
-        function children(props: any, propName: any, componentName: any): undefined;
-        const renderButton: PropTypes.Requireable<(...args: any[]) => any>;
-        const horizontalAlignment: PropTypes.Requireable<string>;
-        const placement: PropTypes.Requireable<string>;
-    }
+        children(props: any, propName: any, componentName: any): undefined;
+        /** Render a custom menu button to override default ellipsis icon */
+        renderButton: PropTypes.Requireable<(...args: any[]) => any>;
+        /** Horizontal alignment of menu items content */
+        horizontalAlignment: PropTypes.Requireable<string>;
+        /** Set whether the menu should open above or below the button */
+        placement: PropTypes.Requireable<string>;
+        marginBottom?: import("styled-system").ResponsiveValue<string | number | symbol, Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>> | undefined;
+        margin?: import("styled-system").ResponsiveValue<string | number | symbol, Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>> | undefined;
+        m?: import("styled-system").ResponsiveValue<string | number | symbol, Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>> | undefined;
+        marginLeft?: import("styled-system").ResponsiveValue<string | number | symbol, Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>> | undefined;
+        ml?: import("styled-system").ResponsiveValue<string | number | symbol, Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>> | undefined;
+        marginRight?: import("styled-system").ResponsiveValue<string | number | symbol, Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>> | undefined;
+        mr?: import("styled-system").ResponsiveValue<string | number | symbol, Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>> | undefined;
+        marginTop?: import("styled-system").ResponsiveValue<string | number | symbol, Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>> | undefined;
+        mt?: import("styled-system").ResponsiveValue<string | number | symbol, Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>> | undefined;
+        mb?: import("styled-system").ResponsiveValue<string | number | symbol, Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>> | undefined;
+        marginX?: import("styled-system").ResponsiveValue<string | number | symbol, Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>> | undefined;
+        mx?: import("styled-system").ResponsiveValue<string | number | symbol, Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>> | undefined;
+        marginY?: import("styled-system").ResponsiveValue<string | number | symbol, Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>> | undefined;
+        my?: import("styled-system").ResponsiveValue<string | number | symbol, Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>> | undefined;
+    };
     namespace defaultProps {
-        const id_1: null;
-        export { id_1 as id };
+        export const id: null;
         export { onOpen };
         export { onClose };
-        const horizontalAlignment_1: string;
-        export { horizontalAlignment_1 as horizontalAlignment };
+        export const horizontalAlignment: string;
     }
 }
 import PropTypes from "prop-types";
-declare function onOpen_1(): void;
-declare function onClose_1(): void;
+declare function onOpen(): void;
+declare function onClose(): void;

package/lib/components/advanced-color-picker/advanced-color-picker.component.d.ts

@@ -50,6 +50,20 @@ declare namespace AdvancedColorPicker {
         onBlur: PropTypes.Requireable<(...args: any[]) => any>;
         /** The ARIA role to be applied to the container */
         role: PropTypes.Requireable<string>;
+        marginBottom?: import("styled-system").ResponsiveValue<string | number | symbol, Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>> | undefined;
+        margin?: import("styled-system").ResponsiveValue<string | number | symbol, Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>> | undefined;
+        m?: import("styled-system").ResponsiveValue<string | number | symbol, Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>> | undefined;
+        marginLeft?: import("styled-system").ResponsiveValue<string | number | symbol, Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>> | undefined;
+        ml?: import("styled-system").ResponsiveValue<string | number | symbol, Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>> | undefined;
+        marginRight?: import("styled-system").ResponsiveValue<string | number | symbol, Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>> | undefined;
+        mr?: import("styled-system").ResponsiveValue<string | number | symbol, Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>> | undefined;
+        marginTop?: import("styled-system").ResponsiveValue<string | number | symbol, Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>> | undefined;
+        mt?: import("styled-system").ResponsiveValue<string | number | symbol, Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>> | undefined;
+        mb?: import("styled-system").ResponsiveValue<string | number | symbol, Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>> | undefined;
+        marginX?: import("styled-system").ResponsiveValue<string | number | symbol, Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>> | undefined;
+        mx?: import("styled-system").ResponsiveValue<string | number | symbol, Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>> | undefined;
+        marginY?: import("styled-system").ResponsiveValue<string | number | symbol, Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>> | undefined;
+        my?: import("styled-system").ResponsiveValue<string | number | symbol, Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>> | undefined;
     };
 }
 import PropTypes from "prop-types";

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

@@ -1,7 +1,2 @@
 export default Box;
-declare const Box: import("styled-components").StyledComponent<"div", any, {
-    [x: string]: any;
-    color: any;
-    bg: any;
-    backgroundColor: any;
-}, never>;
+declare const Box: import("styled-components").StyledComponent<"div", any, {}, never>;

package/lib/components/button-toggle-group/button-toggle-group.component.d.ts

@@ -76,6 +76,20 @@ declare namespace ButtonToggleGroup {
         value: PropTypes.Requireable<string>;
         /** Aria label for rendered help component */
         helpAriaLabel: PropTypes.Requireable<string>;
+        marginBottom?: import("styled-system").ResponsiveValue<string | number | symbol, Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>> | undefined;
+        margin?: import("styled-system").ResponsiveValue<string | number | symbol, Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>> | undefined;
+        m?: import("styled-system").ResponsiveValue<string | number | symbol, Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>> | undefined;
+        marginLeft?: import("styled-system").ResponsiveValue<string | number | symbol, Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>> | undefined;
+        ml?: import("styled-system").ResponsiveValue<string | number | symbol, Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>> | undefined;
+        marginRight?: import("styled-system").ResponsiveValue<string | number | symbol, Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>> | undefined;
+        mr?: import("styled-system").ResponsiveValue<string | number | symbol, Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>> | undefined;
+        marginTop?: import("styled-system").ResponsiveValue<string | number | symbol, Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>> | undefined;
+        mt?: import("styled-system").ResponsiveValue<string | number | symbol, Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>> | undefined;
+        mb?: import("styled-system").ResponsiveValue<string | number | symbol, Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>> | undefined;
+        marginX?: import("styled-system").ResponsiveValue<string | number | symbol, Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>> | undefined;
+        mx?: import("styled-system").ResponsiveValue<string | number | symbol, Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>> | undefined;
+        marginY?: import("styled-system").ResponsiveValue<string | number | symbol, Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>> | undefined;
+        my?: import("styled-system").ResponsiveValue<string | number | symbol, Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>> | undefined;
     };
     const defaultProps: {
         validationOnLabel: boolean;

package/lib/components/button-toggle-group/button-toggle-group.d.ts

@@ -2,7 +2,7 @@ import * as React from "react";
 import { MarginProps } from "styled-system";
 
 import { ButtonToggleProps } from "../button-toggle";
-import { ValidationPropTypes } from "../../__internal__/validations";
+import { ValidationProps } from "../../__internal__/validations";
 
 type ButtonToggle =
   | React.ReactElement<ButtonToggleProps>
@@ -10,9 +10,7 @@ type ButtonToggle =
   | null
   | undefined;
 
-export interface ButtonToggleGroupProps
-  extends ValidationPropTypes,
-    MarginProps {
+export interface ButtonToggleGroupProps extends ValidationProps, MarginProps {
   /** Identifier used for testing purposes, applied to the root element of the component. */
   "data-component"?: string;
   /** Identifier used for testing purposes, applied to the root element of the component. */

package/lib/components/carbon-provider/carbon-provider.component.d.ts

@@ -1,7 +1,7 @@
 import React from "react";
 import { ThemeObject } from "../../style/themes/base";
 export interface CarbonProviderProps {
-    theme?: ThemeObject;
+    theme?: Partial<ThemeObject>;
     children: React.ReactNode;
     validationRedesignOptIn?: boolean;
 }

package/lib/components/carbon-provider/carbon-provider.component.js

@@ -97,29 +97,30 @@ CarbonProvider.propTypes = {
     colors: _propTypes.default.shape({
       destructive: _propTypes.default.shape({
         hover: _propTypes.default.string.isRequired,
-      }).isRequired,
-      error: _propTypes.default.string.isRequired,
-      focus: _propTypes.default.string.isRequired,
-      info: _propTypes.default.string.isRequired,
-      loadingBarBackground: _propTypes.default.string.isRequired,
-      placeholder: _propTypes.default.string.isRequired,
-      primary: _propTypes.default.string.isRequired,
-      secondary: _propTypes.default.string.isRequired,
-      tertiary: _propTypes.default.string.isRequired,
-      warning: _propTypes.default.string.isRequired,
-      warningText: _propTypes.default.string.isRequired,
-      white: _propTypes.default.oneOf(["#FFFFFF"]).isRequired,
-    }).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,
-    }).isRequired,
-    name: _propTypes.default.string.isRequired,
+    }),
+    name: _propTypes.default.string,
     palette: _propTypes.default.shape({
       blackOpacity: _propTypes.default.func.isRequired,
       whiteOpacity: _propTypes.default.func.isRequired,
-    }).isRequired,
-    space: _propTypes.default.arrayOf(_propTypes.default.string).isRequired,
-    spacing: _propTypes.default.number.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,
@@ -130,7 +131,7 @@ CarbonProvider.propTypes = {
       overlay: _propTypes.default.number.isRequired,
       popover: _propTypes.default.number.isRequired,
       smallOverlay: _propTypes.default.number.isRequired,
-    }).isRequired,
+    }),
   }),
   validationRedesignOptIn: _propTypes.default.bool,
 };

package/lib/components/card/card-row/card-row.component.d.ts

@@ -5,9 +5,24 @@ declare function CardRow({ children, spacing, ...props }: {
     spacing?: string | undefined;
 }): JSX.Element;
 declare namespace CardRow {
-    namespace propTypes {
-        const children: PropTypes.Validator<string | number | boolean | {} | PropTypes.ReactElementLike | PropTypes.ReactNodeArray>;
-        const spacing: PropTypes.Requireable<string>;
-    }
+    const propTypes: {
+        children: PropTypes.Validator<string | number | boolean | {} | PropTypes.ReactElementLike | PropTypes.ReactNodeArray>;
+        /** Spacing prop is set in Card and defines the padding for the CardRow (the first CardRow has no padding by default). For more granular control of CardRow padding these can be over-ridden by Padding props from styled-system (see table below). */
+        spacing: PropTypes.Requireable<string>;
+        p?: import("styled-system").ResponsiveValue<string | number | symbol, Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>> | undefined;
+        padding?: import("styled-system").ResponsiveValue<string | number | symbol, Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>> | undefined;
+        pr?: import("styled-system").ResponsiveValue<string | number | symbol, Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>> | undefined;
+        pl?: import("styled-system").ResponsiveValue<string | number | symbol, Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>> | undefined;
+        paddingLeft?: import("styled-system").ResponsiveValue<string | number | symbol, Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>> | undefined;
+        paddingRight?: import("styled-system").ResponsiveValue<string | number | symbol, Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>> | undefined;
+        paddingTop?: import("styled-system").ResponsiveValue<string | number | symbol, Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>> | undefined;
+        pt?: import("styled-system").ResponsiveValue<string | number | symbol, Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>> | undefined;
+        paddingBottom?: import("styled-system").ResponsiveValue<string | number | symbol, Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>> | undefined;
+        pb?: import("styled-system").ResponsiveValue<string | number | symbol, Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>> | undefined;
+        paddingX?: import("styled-system").ResponsiveValue<string | number | symbol, Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>> | undefined;
+        px?: import("styled-system").ResponsiveValue<string | number | symbol, Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>> | undefined;
+        paddingY?: import("styled-system").ResponsiveValue<string | number | symbol, Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>> | undefined;
+        py?: import("styled-system").ResponsiveValue<string | number | symbol, Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>> | undefined;
+    };
 }
 import PropTypes from "prop-types";

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

@@ -13,15 +13,33 @@ declare namespace Card {
     namespace defaultProps {
         const spacing: string;
     }
-    namespace propTypes {
-        export const action: PropTypes.Requireable<(...args: any[]) => any>;
-        export const children: PropTypes.Validator<string | number | boolean | {} | PropTypes.ReactElementLike | PropTypes.ReactNodeArray>;
-        export const cardWidth: PropTypes.Requireable<string>;
-        export const interactive: PropTypes.Requireable<boolean>;
-        export const draggable: PropTypes.Requireable<boolean>;
-        const spacing_1: PropTypes.Requireable<string>;
-        export { spacing_1 as spacing };
-        export const dataRole: PropTypes.Requireable<string>;
-    }
+    const propTypes: {
+        /** action to be executed when card is clicked or enter pressed */
+        action: PropTypes.Requireable<(...args: any[]) => any>;
+        children: PropTypes.Validator<string | number | boolean | {} | PropTypes.ReactElementLike | PropTypes.ReactNodeArray>;
+        /** style value for width of card */
+        cardWidth: PropTypes.Requireable<string>;
+        /** flag to indicate if card is interactive */
+        interactive: PropTypes.Requireable<boolean>;
+        /** flag to indicate if card is draggable */
+        draggable: PropTypes.Requireable<boolean>;
+        /** size of card for applying padding (small | medium | large) */
+        spacing: PropTypes.Requireable<string>;
+        dataRole: PropTypes.Requireable<string>;
+        marginBottom?: import("styled-system").ResponsiveValue<string | number | symbol, Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>> | undefined;
+        margin?: import("styled-system").ResponsiveValue<string | number | symbol, Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>> | undefined;
+        m?: import("styled-system").ResponsiveValue<string | number | symbol, Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>> | undefined;
+        marginLeft?: import("styled-system").ResponsiveValue<string | number | symbol, Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>> | undefined;
+        ml?: import("styled-system").ResponsiveValue<string | number | symbol, Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>> | undefined;
+        marginRight?: import("styled-system").ResponsiveValue<string | number | symbol, Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>> | undefined;
+        mr?: import("styled-system").ResponsiveValue<string | number | symbol, Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>> | undefined;
+        marginTop?: import("styled-system").ResponsiveValue<string | number | symbol, Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>> | undefined;
+        mt?: import("styled-system").ResponsiveValue<string | number | symbol, Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>> | undefined;
+        mb?: import("styled-system").ResponsiveValue<string | number | symbol, Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>> | undefined;
+        marginX?: import("styled-system").ResponsiveValue<string | number | symbol, Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>> | undefined;
+        mx?: import("styled-system").ResponsiveValue<string | number | symbol, Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>> | undefined;
+        marginY?: import("styled-system").ResponsiveValue<string | number | symbol, Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>> | undefined;
+        my?: import("styled-system").ResponsiveValue<string | number | symbol, Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>> | undefined;
+    };
 }
 import PropTypes from "prop-types";

package/lib/components/checkbox/checkbox-group.component.d.ts

@@ -3,20 +3,53 @@ export default CheckboxGroup;
 import React from "react";
 declare function CheckboxGroup(props: any): JSX.Element;
 declare namespace CheckboxGroup {
-    namespace propTypes {
-        const legend: PropTypes.Requireable<string>;
-        const legendInline: PropTypes.Requireable<boolean>;
-        const legendWidth: PropTypes.Requireable<number>;
-        const legendAlign: PropTypes.Requireable<string>;
-        const legendSpacing: PropTypes.Requireable<number>;
-        const children: PropTypes.Validator<string | number | boolean | {} | PropTypes.ReactElementLike | PropTypes.ReactNodeArray>;
-        const groupName: PropTypes.Validator<string>;
-        const error: PropTypes.Requireable<string | boolean>;
-        const warning: PropTypes.Requireable<string | boolean>;
-        const info: PropTypes.Requireable<string | boolean>;
-        const labelSpacing: PropTypes.Requireable<number>;
-        const required: PropTypes.Requireable<boolean>;
-        const tooltipPosition: PropTypes.Requireable<string>;
-    }
+    const propTypes: {
+        /** The content for the CheckboxGroup Legend */
+        legend: PropTypes.Requireable<string>;
+        /** When true, legend is placed in line with the checkboxes */
+        legendInline: PropTypes.Requireable<boolean>;
+        /** Percentage width of legend (only when legend is inline)  */
+        legendWidth: PropTypes.Requireable<number>;
+        /** Text alignment of legend when inline */
+        legendAlign: PropTypes.Requireable<string>;
+        /** Spacing between legend and field for inline legend, number multiplied by base spacing unit (8) */
+        legendSpacing: PropTypes.Requireable<number>;
+        /** The Checkboxes to be rendered in the group */
+        children: PropTypes.Validator<string | number | boolean | {} | PropTypes.ReactElementLike | PropTypes.ReactNodeArray>;
+        /** Specifies the name prop to be applied to each button in the group */
+        groupName: PropTypes.Validator<string>;
+        /** Indicate that error has occurred
+        Pass string to display icon, tooltip and red border
+        Pass true boolean to only display red border */
+        error: PropTypes.Requireable<string | boolean>;
+        /** Indicate that warning has occurred
+        Pass string to display icon, tooltip and orange border
+        Pass true boolean to only display orange border */
+        warning: PropTypes.Requireable<string | boolean>;
+        /** Indicate additional information
+        Pass string to display icon, tooltip and blue border
+        Pass true boolean to only display blue border */
+        info: PropTypes.Requireable<string | boolean>;
+        /** Spacing between label and a field for inline label, given number will be multiplied by base spacing unit (8) */
+        labelSpacing: PropTypes.Requireable<number>;
+        /** Flag to configure component as mandatory */
+        required: PropTypes.Requireable<boolean>;
+        /** Overrides the default tooltip position */
+        tooltipPosition: PropTypes.Requireable<string>;
+        marginBottom?: import("styled-system").ResponsiveValue<string | number | symbol, Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>> | undefined;
+        margin?: import("styled-system").ResponsiveValue<string | number | symbol, Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>> | undefined;
+        m?: import("styled-system").ResponsiveValue<string | number | symbol, Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>> | undefined;
+        marginLeft?: import("styled-system").ResponsiveValue<string | number | symbol, Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>> | undefined;
+        ml?: import("styled-system").ResponsiveValue<string | number | symbol, Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>> | undefined;
+        marginRight?: import("styled-system").ResponsiveValue<string | number | symbol, Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>> | undefined;
+        mr?: import("styled-system").ResponsiveValue<string | number | symbol, Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>> | undefined;
+        marginTop?: import("styled-system").ResponsiveValue<string | number | symbol, Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>> | undefined;
+        mt?: import("styled-system").ResponsiveValue<string | number | symbol, Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>> | undefined;
+        mb?: import("styled-system").ResponsiveValue<string | number | symbol, Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>> | undefined;
+        marginX?: import("styled-system").ResponsiveValue<string | number | symbol, Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>> | undefined;
+        mx?: import("styled-system").ResponsiveValue<string | number | symbol, Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>> | undefined;
+        marginY?: import("styled-system").ResponsiveValue<string | number | symbol, Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>> | undefined;
+        my?: import("styled-system").ResponsiveValue<string | number | symbol, Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>> | undefined;
+    };
 }
 import PropTypes from "prop-types";

package/lib/components/checkbox/checkbox-group.d.ts

@@ -1,8 +1,8 @@
 import * as React from "react";
 import { MarginProps } from "styled-system";
-import { ValidationPropTypes } from "../../__internal__/validations";
+import { ValidationProps } from "../../__internal__/validations";
 
-interface CheckboxGroupProps extends ValidationPropTypes, MarginProps {
+interface CheckboxGroupProps extends ValidationProps, MarginProps {
   /** The content for the CheckboxGroup Legend */
   legend?: string;
   /** When true, legend is placed in line with the checkboxes */

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

@@ -100,6 +100,20 @@ declare namespace Checkbox {
         tooltipPosition: PropTypes.Requireable<string>;
         /** Aria label for rendered help component */
         helpAriaLabel: PropTypes.Requireable<string>;
+        marginBottom?: import("styled-system").ResponsiveValue<string | number | symbol, Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>> | undefined;
+        margin?: import("styled-system").ResponsiveValue<string | number | symbol, Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>> | undefined;
+        m?: import("styled-system").ResponsiveValue<string | number | symbol, Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>> | undefined;
+        marginLeft?: import("styled-system").ResponsiveValue<string | number | symbol, Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>> | undefined;
+        ml?: import("styled-system").ResponsiveValue<string | number | symbol, Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>> | undefined;
+        marginRight?: import("styled-system").ResponsiveValue<string | number | symbol, Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>> | undefined;
+        mr?: import("styled-system").ResponsiveValue<string | number | symbol, Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>> | undefined;
+        marginTop?: import("styled-system").ResponsiveValue<string | number | symbol, Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>> | undefined;
+        mt?: import("styled-system").ResponsiveValue<string | number | symbol, Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>> | undefined;
+        mb?: import("styled-system").ResponsiveValue<string | number | symbol, Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>> | undefined;
+        marginX?: import("styled-system").ResponsiveValue<string | number | symbol, Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>> | undefined;
+        mx?: import("styled-system").ResponsiveValue<string | number | symbol, Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>> | undefined;
+        marginY?: import("styled-system").ResponsiveValue<string | number | symbol, Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>> | undefined;
+        my?: import("styled-system").ResponsiveValue<string | number | symbol, Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>> | undefined;
     };
     const defaultProps: {
         reverse: boolean;

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

@@ -10,14 +10,36 @@ declare function Content({ variant, children, title, inline, align, titleWidth,
     bodyFullWidth?: boolean | undefined;
 }): JSX.Element;
 declare namespace Content {
-    namespace propTypes {
-        const variant: PropTypes.Requireable<string>;
-        const children: PropTypes.Requireable<PropTypes.ReactNodeLike>;
-        const title: PropTypes.Requireable<PropTypes.ReactNodeLike>;
-        const inline: PropTypes.Requireable<boolean>;
-        const align: PropTypes.Requireable<string>;
-        const titleWidth: PropTypes.Requireable<string>;
-        const bodyFullWidth: PropTypes.Requireable<boolean>;
-    }
+    const propTypes: {
+        /** Applies a theme to the Content Value: primary, secondary */
+        variant: PropTypes.Requireable<string>;
+        /** The body of the content component */
+        children: PropTypes.Requireable<PropTypes.ReactNodeLike>;
+        /** The title of the content component */
+        title: PropTypes.Requireable<PropTypes.ReactNodeLike>;
+        /** Displays the content inline with the title */
+        inline: PropTypes.Requireable<boolean>;
+        /** Aligns the content (left, center or right) */
+        align: PropTypes.Requireable<string>;
+        /** Sets a custom width for the title element */
+        titleWidth: PropTypes.Requireable<string>;
+        /** Over-rides the calculation of body width based on titleWidth.
+         * Sometimes we need the body to be full width while keeping a title width similar to other widths */
+        bodyFullWidth: PropTypes.Requireable<boolean>;
+        marginBottom?: import("styled-system").ResponsiveValue<string | number | symbol, Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>> | undefined;
+        margin?: import("styled-system").ResponsiveValue<string | number | symbol, Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>> | undefined;
+        m?: import("styled-system").ResponsiveValue<string | number | symbol, Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>> | undefined;
+        marginLeft?: import("styled-system").ResponsiveValue<string | number | symbol, Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>> | undefined;
+        ml?: import("styled-system").ResponsiveValue<string | number | symbol, Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>> | undefined;
+        marginRight?: import("styled-system").ResponsiveValue<string | number | symbol, Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>> | undefined;
+        mr?: import("styled-system").ResponsiveValue<string | number | symbol, Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>> | undefined;
+        marginTop?: import("styled-system").ResponsiveValue<string | number | symbol, Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>> | undefined;
+        mt?: import("styled-system").ResponsiveValue<string | number | symbol, Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>> | undefined;
+        mb?: import("styled-system").ResponsiveValue<string | number | symbol, Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>> | undefined;
+        marginX?: import("styled-system").ResponsiveValue<string | number | symbol, Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>> | undefined;
+        mx?: import("styled-system").ResponsiveValue<string | number | symbol, Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>> | undefined;
+        marginY?: import("styled-system").ResponsiveValue<string | number | symbol, Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>> | undefined;
+        my?: import("styled-system").ResponsiveValue<string | number | symbol, Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>> | undefined;
+    };
 }
 import PropTypes from "prop-types";

package/lib/components/date/__internal__/date-formats/index.js

@@ -4,42 +4,110 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = void 0;
-// The order of this array is important
-const EU_FORMATS = ["d M yyyy", "dd M yyyy", "d MM yyyy", "dd MM yyyy", "d M yy", "dd M yy", "d MM yy", "dd MM yy", "d", "d M", "dd", "d MM", "dd M", "dd MM"]; // The order of this array is important
+// The order of this array is important, when an input value matches more than one format the last one is used
+const EU_FORMATS = ["d M yyyy", "dd M yyyy", "d MM yyyy", "dd MM yyyy", "d M yy", "dd M yy", "d MM yy", "dd MM yy", "d", "d M", "dd", "d MM", "dd M", "dd MM"]; // The order of this array is important, when an input value matches more than one format the last one is used
 
-const NA_FORMATS = ["M", "M d", "MM", "M dd", "MM d", "MM dd", "M d yy", "MM d yy", "M dd yy", "MM dd yy", "M d yyyy", "MM d yyyy", "M dd yyyy", "MM dd yyyy"];
+const NA_FORMATS = ["M", "M d", "MM", "M dd", "MM d", "MM dd", "M d yy", "MM d yy", "M dd yy", "MM dd yy", "M d yyyy", "MM d yyyy", "M dd yyyy", "MM dd yyyy"]; // The order of this array is important, when an input value matches more than one format the last one is used
+
+const CN_FORMATS = ["yyyy M", "yyyy M d", "yyyy MM d", "yyyy M dd", "yyyy MM dd", "yy M", "yy MM", "yy M d", "yy MM d", "yy M dd", "yy MM dd", "M", "M d", "MM", "M dd", "MM d", "MM dd"];
 const SEPARATORS = ["", ".", ",", "-", "/", ":"];
+const STANDARD_FORMAT_LENGTH = 10;
+
+const generateFormats = (formatArray, separator, trailingChar) => {
+  const separators = SEPARATORS.includes(separator) ? SEPARATORS : [...SEPARATORS, separator];
+  return formatArray.reduce((arr, formatString) => {
+    const array = [...arr, formatString];
+
+    if (formatString.includes(" ")) {
+      separators.forEach(char => {
+        if (separator === char && trailingChar) {
+          array.push(`${formatString.replace(/ /g, char)}${trailingChar}`);
+        }
+
+        array.push(formatString.replace(/ /g, char));
+      });
+    }
+
+    return array;
+  }, []);
+};
+
+const getOutputFormatForLocale = localeCode => {
+  const formatMap = {
+    day: "dd",
+    month: "MM",
+    year: "yyyy"
+  };
+  const formatter = new Intl.DateTimeFormat(localeCode);
+  let separator;
+  const format = formatter.formatToParts(new Date()).map(({
+    type,
+    value
+  }) => {
+    if (type !== "literal") {
+      return formatMap[type];
+    }
+
+    if (!separator) {
+      separator = value;
+    }
+
+    return value;
+  }).join("");
+
+  if (localeCode.startsWith("bg")) {
+    // this locale adds an additional char that has no effect on the output formatting
+    return {
+      format: format.substring(0, STANDARD_FORMAT_LENGTH),
+      separator
+    };
+  }
 
-const generateFormats = formatArray => formatArray.reduce((arr, formatString) => {
-  const array = [...arr, formatString];
+  return {
+    format,
+    separator
+  };
+};
 
-  if (formatString.includes(" ")) {
-    SEPARATORS.forEach(char => array.push(formatString.replace(/ /g, char)));
+const getInputFormatsArrayForLocale = format => {
+  if (format.startsWith("y")) {
+    return CN_FORMATS;
   }
 
-  return array;
-}, []);
+  if (format.startsWith("M")) {
+    return NA_FORMATS;
+  }
+
+  return EU_FORMATS;
+}; // we need this to handle for formats that add extra chars at the end of the format
+
+
+const getTrailingChar = format => {
+  const lastChar = format.split("").pop();
+  return ["y", "M", "d"].includes(lastChar) ? "" : lastChar;
+};
 
 const getFormatData = ({
   code
 }) => {
   if (["en-CA", "en-US"].includes(code)) {
+    const format = "MM/dd/yyyy";
+    const formats = getInputFormatsArrayForLocale(format);
     return {
-      format: "MM/dd/yyyy",
-      formats: generateFormats(NA_FORMATS)
-    };
-  }
-
-  if (code === "de") {
-    return {
-      format: "dd.MM.yyyy",
-      formats: generateFormats(EU_FORMATS)
+      format,
+      formats: generateFormats(formats, "/")
     };
   }
 
+  const {
+    format,
+    separator
+  } = getOutputFormatForLocale(code);
+  const outputFormat = ["fr-CA", "en-ZA", "ar-EG"].includes(code) ? "dd/MM/yyyy" : format;
+  const formatsForLocale = getInputFormatsArrayForLocale(outputFormat);
   return {
-    format: "dd/MM/yyyy",
-    formats: generateFormats(EU_FORMATS)
+    format: outputFormat,
+    formats: generateFormats(formatsForLocale, separator, getTrailingChar(format))
   };
 };