carbon-react 106.1.3 → 106.1.6

package/esm/style/themes/mint/mint-theme.config.js

@@ -9,21 +9,23 @@ export default (palette => {
     },
 
     get compatibility() {
+      var _this$colors, _this$colors2, _this$colors3, _this$colors4, _this$colors5, _this$colors6, _this$colors7, _this$colors8, _this$colors9, _this$colors10, _this$colors11, _this$colors12, _this$colors13, _this$colors14;
+
       return {
-        colorsActionMajor150: this.colors.loadingBarBackground,
-        colorsActionMajor500: this.colors.primary,
-        colorsActionMajor600: this.colors.secondary,
-        colorsActionMajor700: this.colors.tertiary,
-        colorsComponentsMenuAutumnStandard600: this.colors.primary,
-        colorsComponentsMenuSpringChild600: this.colors.primary,
-        colorsComponentsMenuAutumnChild600: this.colors.primary,
-        colorsComponentsMenuSummerChild600: this.colors.primary,
-        colorsComponentsMenuWinterChild600: this.colors.primary,
-        colorsComponentsMenuSpringChildAlt600: this.colors.primary,
-        colorsComponentsMenuAutumnChildAlt600: this.colors.primary,
-        colorsComponentsMenuWinterChildAlt600: this.colors.primary,
-        colorsComponentsMenuSummerChildAlt600: this.colors.primary,
-        colorsBaseTheme: this.colors.primary
+        colorsActionMajor150: this === null || this === void 0 ? void 0 : (_this$colors = this.colors) === null || _this$colors === void 0 ? void 0 : _this$colors.loadingBarBackground,
+        colorsActionMajor500: this === null || this === void 0 ? void 0 : (_this$colors2 = this.colors) === null || _this$colors2 === void 0 ? void 0 : _this$colors2.primary,
+        colorsActionMajor600: this === null || this === void 0 ? void 0 : (_this$colors3 = this.colors) === null || _this$colors3 === void 0 ? void 0 : _this$colors3.secondary,
+        colorsActionMajor700: this === null || this === void 0 ? void 0 : (_this$colors4 = this.colors) === null || _this$colors4 === void 0 ? void 0 : _this$colors4.tertiary,
+        colorsComponentsMenuAutumnStandard600: this === null || this === void 0 ? void 0 : (_this$colors5 = this.colors) === null || _this$colors5 === void 0 ? void 0 : _this$colors5.primary,
+        colorsComponentsMenuSpringChild600: this === null || this === void 0 ? void 0 : (_this$colors6 = this.colors) === null || _this$colors6 === void 0 ? void 0 : _this$colors6.primary,
+        colorsComponentsMenuAutumnChild600: this === null || this === void 0 ? void 0 : (_this$colors7 = this.colors) === null || _this$colors7 === void 0 ? void 0 : _this$colors7.primary,
+        colorsComponentsMenuSummerChild600: this === null || this === void 0 ? void 0 : (_this$colors8 = this.colors) === null || _this$colors8 === void 0 ? void 0 : _this$colors8.primary,
+        colorsComponentsMenuWinterChild600: this === null || this === void 0 ? void 0 : (_this$colors9 = this.colors) === null || _this$colors9 === void 0 ? void 0 : _this$colors9.primary,
+        colorsComponentsMenuSpringChildAlt600: this === null || this === void 0 ? void 0 : (_this$colors10 = this.colors) === null || _this$colors10 === void 0 ? void 0 : _this$colors10.primary,
+        colorsComponentsMenuAutumnChildAlt600: this === null || this === void 0 ? void 0 : (_this$colors11 = this.colors) === null || _this$colors11 === void 0 ? void 0 : _this$colors11.primary,
+        colorsComponentsMenuWinterChildAlt600: this === null || this === void 0 ? void 0 : (_this$colors12 = this.colors) === null || _this$colors12 === void 0 ? void 0 : _this$colors12.primary,
+        colorsComponentsMenuSummerChildAlt600: this === null || this === void 0 ? void 0 : (_this$colors13 = this.colors) === null || _this$colors13 === void 0 ? void 0 : _this$colors13.primary,
+        colorsBaseTheme: this === null || this === void 0 ? void 0 : (_this$colors14 = this.colors) === null || _this$colors14 === void 0 ? void 0 : _this$colors14.primary
       };
     }
 

package/esm/style/themes/none/index.d.ts

@@ -1,5 +1,2 @@
-import { ThemeObject } from "../base";
-
-declare const noneTheme: ThemeObject;
-
-export default noneTheme;
+declare const _default: Partial<import("../base").ThemeObject>;
+export default _default;

package/esm/style/themes/none/none-theme.config.d.ts

@@ -1,4 +1,3 @@
-declare function _default(): {
-    name: string;
-};
+import { ThemeObject } from "../base";
+declare const _default: () => Partial<ThemeObject>;
 export default _default;

package/esm/style/themes/sage/index.d.ts

@@ -446,17 +446,14 @@ declare var _default: {
         opacity800: string;
     };
     name: string;
-    palette: import("../../palette").Palette & import("../base").ColorsWithHex & {
-        blackOpacity: (opacity: number) => string;
-        whiteOpacity: (opacity: number) => string;
-    };
-    spacing: number;
-    space: string[];
-    colors: import("../base").Colors;
-    disabled: {
+    palette?: import("../base/base-theme.config").BasePalette | undefined;
+    spacing?: number | undefined;
+    space?: string[] | undefined;
+    colors?: Partial<import("../base/base-theme.config").Colors> | undefined;
+    disabled?: {
         background: string;
-    };
-    zIndex: {
+    } | undefined;
+    zIndex?: {
         smallOverlay: number;
         overlay: number;
         popover: number;
@@ -466,6 +463,6 @@ declare var _default: {
         fullScreenModal: number;
         notification: number;
         aboveAll: number;
-    };
+    } | undefined;
 };
 export default _default;

package/esm/style/themes/small/index.d.ts

@@ -1,2 +1,2 @@
-declare var _default: import("../base").ThemeObject;
+declare const _default: Partial<import("../base").ThemeObject>;
 export default _default;

package/esm/style/themes/test-utils.d.ts

@@ -1 +1 @@
-export function assertIsSubset(obj: any, comparison: any): void;
+export declare const assertIsSubset: (obj: Record<string, unknown>, comparison: Record<string, unknown>) => void;

package/esm/style/utils/add-hex-symbols.d.ts

@@ -1,2 +1,2 @@
-declare function _default(configObject: any): any;
+declare const _default: (configObject: Record<string, string>) => Record<string, string>;
 export default _default;

package/esm/style/utils/at-opacity.d.ts

@@ -1,2 +1,7 @@
-declare function _default(base: any): (opacity: any) => string;
+declare const _default: (base: string) => (opacity: number | string) => string;
+/**
+ * Given a base color hex will return a function that expects
+ * some given opactiy and returns the base color at that
+ * opacity.
+ */
 export default _default;

package/esm/style/utils/at-opacity.js

@@ -4,6 +4,8 @@
  * opacity.
  */
 export default (base => {
-  const rgb = base.match(/[^#]{2}/g).map(pair => parseInt(pair, 16));
-  return opacity => `rgba(${rgb.join(",")},${opacity})`;
+  var _base$match;
+
+  const rgb = base === null || base === void 0 ? void 0 : (_base$match = base.match(/[^#]{2}/g)) === null || _base$match === void 0 ? void 0 : _base$match.map(pair => parseInt(pair, 16));
+  return opacity => `rgba(${rgb === null || rgb === void 0 ? void 0 : rgb.join(",")},${opacity})`;
 });

package/esm/style/utils/color.d.ts

@@ -1,8 +1,4 @@
-export function toColor(theme: any, color: any): any;
-declare function _default({ color, bg, backgroundColor, ...rest }: {
-    [x: string]: any;
-    color: any;
-    bg: any;
-    backgroundColor: any;
-}): any;
+import { ThemeObject } from "style/themes/base";
+export declare const toColor: (theme: ThemeObject, color: string) => string;
+declare const _default: ({ color, bg, backgroundColor, ...rest }: Record<string, unknown>) => any;
 export default _default;

package/esm/style/utils/color.js

@@ -1,6 +1,7 @@
 // eslint-disable-next-line no-restricted-imports
 import { color as styledColor } from "styled-system";
 import tokens from "@sage/design-tokens/js/base/common";
+
 /*
  * styled-system/color allows users to use a color from the theme, from the `colors` object.
  *
@@ -20,8 +21,9 @@ import tokens from "@sage/design-tokens/js/base/common";
  *
  * This allows us to keep our themes as plain objects.
  */
-
 export const toColor = (theme, color) => {
+  var _color$match;
+
   if (color.startsWith("--") && color.slice(2) in tokens) {
     return `var(${color})`;
   }
@@ -30,13 +32,13 @@ export const toColor = (theme, color) => {
     palette
   } = theme;
   const percentage = color.match(/\d+/);
-  const method = color.match(/[a-zA-Z]+/);
+  const method = (_color$match = color.match(/[a-zA-Z]+/)) === null || _color$match === void 0 ? void 0 : _color$match.toString();
 
-  if (method in palette) {
+  if (method && method in palette) {
     const match = palette[method];
 
     if (typeof match === "function") {
-      const arg = ["blackOpacity", "whiteOpacity"].includes(method.toString()) ? `0.${percentage}` : percentage;
+      const arg = ["blackOpacity", "whiteOpacity"].includes(method) ? `0.${percentage}` : percentage;
       return match(arg);
     }
 
@@ -51,12 +53,10 @@ export default (({
   backgroundColor,
   ...rest
 }) => {
+  const obj = {};
+  obj.color = color ? toColor(rest.theme, color) : undefined;
+  obj.bg = bg || backgroundColor ? toColor(rest.theme, bg || backgroundColor) : undefined;
   return styledColor({ ...rest,
-    ...(color && {
-      color: toColor(rest.theme, color)
-    }),
-    ...((bg || backgroundColor) && {
-      bg: toColor(rest.theme, bg || backgroundColor)
-    })
+    ...obj
   });
 });

package/esm/style/utils/filter-out-styled-system-spacing-props.d.ts

@@ -1,4 +1,2 @@
+declare const filterOutStyledSystemSpacingProps: (obj: Record<string, unknown>) => Record<string, unknown>;
 export default filterOutStyledSystemSpacingProps;
-declare function filterOutStyledSystemSpacingProps(obj: any): {
-    [k: string]: any;
-};

package/esm/style/utils/filter-styled-system-margin-props.d.ts

@@ -1 +1,3 @@
-export default function filterStyledSystemMarginProps(originalObject: any): {};
+import { MarginProps } from "styled-system";
+export declare const marginPropertyNames: string[];
+export default function filterStyledSystemMarginProps(originalObject: Record<string, unknown> | MarginProps): MarginProps;

package/esm/style/utils/filter-styled-system-margin-props.js

@@ -1,5 +1,5 @@
 import filterObjectProperties from "../../__internal__/filter-object-properties";
-const marginPropertyNames = ["margin", "m", "marginLeft", "ml", "marginRight", "mr", "marginTop", "mt", "marginBottom", "mb", "marginX", "mx", "marginY", "my"];
+export const marginPropertyNames = ["margin", "m", "marginLeft", "ml", "marginRight", "mr", "marginTop", "mt", "marginBottom", "mb", "marginX", "mx", "marginY", "my"];
 export default function filterStyledSystemMarginProps(originalObject) {
   return filterObjectProperties(originalObject, marginPropertyNames);
 }

package/esm/style/utils/filter-styled-system-padding-props.d.ts

@@ -1 +1,3 @@
-export default function filterStyledSystemPaddingProps(originalObject: any): {};
+import { PaddingProps } from "styled-system";
+export declare const paddingPropertyNames: string[];
+export default function filterStyledSystemPaddingProps(originalObject: Record<string, unknown>): PaddingProps;

package/esm/style/utils/filter-styled-system-padding-props.js

@@ -1,5 +1,5 @@
 import filterObjectProperties from "../../__internal__/filter-object-properties";
-const paddingPropertyNames = ["padding", "p", "paddingLeft", "pl", "paddingRight", "pr", "paddingTop", "pt", "paddingBottom", "pb", "paddingX", "px", "paddingY", "py"];
+export const paddingPropertyNames = ["padding", "p", "paddingLeft", "pl", "paddingRight", "pr", "paddingTop", "pt", "paddingBottom", "pb", "paddingX", "px", "paddingY", "py"];
 export default function filterStyledSystemPaddingProps(originalObject) {
   return filterObjectProperties(originalObject, paddingPropertyNames);
 }

package/esm/style/utils/get-rgb-values.d.ts

@@ -1,3 +1,3 @@
-export default getRgbValues;
 /** Given a base color in hex will return its rgb values. */
-declare function getRgbValues(baseColor: any): number[];
+declare const getRgbValues: (baseColor: string) => number[];
+export default getRgbValues;

package/esm/style/utils/get-rgb-values.js

@@ -1,6 +1,6 @@
 /** Given a base color in hex will return its rgb values. */
 const getRgbValues = baseColor => {
-  return [parseInt(baseColor.substr(1, 2), 16), parseInt(baseColor.substr(3, 2), 16), parseInt(baseColor.substr(5, 2), 16)];
+  return [parseInt(baseColor.substring(1, 3), 16), parseInt(baseColor.substring(3, 5), 16), parseInt(baseColor.substring(5, 6), 16)];
 };
 
 export default getRgbValues;

package/esm/style/utils/index.d.ts

@@ -1,4 +1,4 @@
 import filterStyledSystemPaddingProps from "./filter-styled-system-padding-props";
 import filterStyledSystemMarginProps from "./filter-styled-system-margin-props";
 import filterOutStyledSystemSpacingProps from "./filter-out-styled-system-spacing-props";
-export { filterStyledSystemPaddingProps, filterStyledSystemMarginProps, filterOutStyledSystemSpacingProps };
+export { filterStyledSystemPaddingProps, filterStyledSystemMarginProps, filterOutStyledSystemSpacingProps, };

package/esm/style/utils/merge-deep.d.ts

@@ -1,12 +1,8 @@
 /**
  * Simple object check.
- * @param item
- * @returns {boolean}
  */
-export function isObject(item: any): boolean;
+export declare function isObject(item: unknown): unknown;
 /**
  * Deep merge two objects.
- * @param target
- * @param ...sources
  */
-export function mergeDeep(target: any, ...sources: any[]): any;
+export declare function mergeDeep(target: Record<string, unknown>, ...sources: Record<string, unknown>[]): Record<string, unknown>;

package/esm/style/utils/merge-deep.js

@@ -1,39 +1,36 @@
 /**
  * Simple object check.
- * @param item
- * @returns {boolean}
  */
 export function isObject(item) {
   return item && typeof item === "object" && !Array.isArray(item);
 }
-/**
- * Deep merge two objects.
- * @param target
- * @param ...sources
- */
 
-export function mergeDeep(target, ...sources) {
-  const merge = (_target, ..._sources) => {
-    if (!_sources.length) return _target;
+function merge(_target, ..._sources) {
+  if (!_sources.length) return _target;
 
-    const source = _sources.shift();
+  const source = _sources.shift();
 
-    if (isObject(_target) && isObject(source)) {
-      for (const key in source) {
-        if (isObject(source[key])) {
-          merge(_target[key], source[key]);
-        } else {
-          Object.assign(_target, {
-            [key]: source[key]
-          });
-        }
+  if (isObject(_target) && isObject(source)) {
+    for (const key in source) {
+      if (isObject(source[key])) {
+        merge(_target[key], source[key]);
+      } else {
+        Object.assign(_target, {
+          [key]: source[key]
+        });
       }
     }
+  }
 
-    return merge(_target, ..._sources);
-  }; // ensure function is not mutative
+  return merge(_target, ..._sources);
+}
+/**
+ * Deep merge two objects.
+ */
 
 
+export function mergeDeep(target, ...sources) {
+  // ensure function is not mutative
   const newTarget = JSON.parse(JSON.stringify(target));
   return merge(newTarget, ...sources);
 }

package/esm/style/utils/mix.d.ts

@@ -1,2 +1,5 @@
-declare function _default(inputColorA: any, inputColorB: any, weight?: number): string;
+declare const _default: (inputColorA: string, inputColorB: string, weight?: number) => string;
+/**
+ * A Javascript implementation of the Sass `mix` mixin.
+ */
 export default _default;

package/esm/style/utils/mix.js

@@ -16,11 +16,16 @@ const processHexes = (...hexes) => {
 
 export default ((inputColorA, inputColorB, weight = 50) => {
   const [colorA, colorB] = processHexes(inputColorA, inputColorB);
-  const colorAPairs = colorA.match(/.{1,2}/g),
-        colorBPairs = colorB.match(/.{1,2}/g);
-  const hex = colorAPairs.reduce((acc, pair, i) => {
-    const val1 = hexToDec(pair),
-          val2 = hexToDec(colorBPairs[i]);
+  const colorAPairs = colorA.match(/.{1,2}/g);
+  const colorBPairs = colorB.match(/.{1,2}/g);
+
+  if (!colorBPairs) {
+    return "";
+  }
+
+  const hex = colorAPairs === null || colorAPairs === void 0 ? void 0 : colorAPairs.reduce((acc, pair, i) => {
+    const val1 = hexToDec(pair);
+    const val2 = hexToDec(colorBPairs[i]);
     const combination = decToHex(Math.round(val2 + (val1 - val2) * (weight / 100.0)));
     return acc + combination.padStart(2, "0");
   }, "").toUpperCase();

package/esm/style/utils/shade.d.ts

@@ -1,2 +1,2 @@
-declare function _default(color: any): (weight: any) => string;
+declare const _default: (color: string) => (weight: number | string) => string;
 export default _default;

package/esm/style/utils/tint.d.ts

@@ -1,2 +1,2 @@
-declare function _default(color: any): (weight: any) => string;
+declare const _default: (color: string) => (weight: number | string) => string;
 export default _default;

package/esm/style/utils/width.d.ts

@@ -1,4 +1,3 @@
-declare function _default({ width }: {
-    width: any;
-}): any;
+import { styleFn } from "styled-system";
+declare const _default: ({ width }: Record<string, string>) => styleFn;
 export default _default;

package/lib/__internal__/checkable-input/checkable-input.d.ts

@@ -1,10 +1,10 @@
 import * as React from "react";
 
-import { ValidationPropTypes } from "../validations";
+import { ValidationProps } from "../validations";
 import { CommonHiddenCheckableInputProps } from "./hidden-checkable-input";
 
 export interface CommonCheckableInputProps
-  extends ValidationPropTypes,
+  extends ValidationProps,
     CommonHiddenCheckableInputProps {
   /** If true, the component will be disabled */
   disabled?: boolean;

package/lib/__internal__/fieldset/fieldset.component.d.ts

@@ -14,22 +14,52 @@ declare function Fieldset({ legend, children, inline, legendWidth, legendAlign,
     blockGroupBehaviour: any;
 }): JSX.Element;
 declare namespace Fieldset {
-    namespace propTypes {
-        const children: PropTypes.Validator<string | number | boolean | {} | PropTypes.ReactElementLike | PropTypes.ReactNodeArray>;
-        const legend: PropTypes.Requireable<string>;
-        const error: PropTypes.Requireable<string | boolean>;
-        const warning: PropTypes.Requireable<string | boolean>;
-        const info: PropTypes.Requireable<string | boolean>;
-        const inline: PropTypes.Requireable<boolean>;
-        const legendWidth: PropTypes.Requireable<number>;
-        const legendAlign: PropTypes.Requireable<string>;
-        const legendSpacing: PropTypes.Requireable<number>;
-        const isRequired: PropTypes.Requireable<boolean>;
-        const blockGroupBehaviour: PropTypes.Requireable<boolean>;
-    }
+    const propTypes: {
+        /** Fieldset content */
+        children: PropTypes.Validator<string | number | boolean | {} | PropTypes.ReactElementLike | PropTypes.ReactNodeArray>;
+        /** The content for the Fieldset Legend */
+        legend: PropTypes.Requireable<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>;
+        /** When true, legend is placed in line with the children */
+        inline: 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>;
+        /** If true, an asterisk will be added to the label */
+        isRequired: PropTypes.Requireable<boolean>;
+        /** Controls whether group behaviour should be enabled */
+        blockGroupBehaviour: 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;
+    };
     namespace defaultProps {
-        const inline_1: boolean;
-        export { inline_1 as inline };
+        const inline: boolean;
     }
 }
 import PropTypes from "prop-types";

package/lib/__internal__/form-field/form-field.component.d.ts

@@ -61,6 +61,20 @@ declare namespace FormField {
         isRequired: PropTypes.Requireable<boolean>;
         /** Id of the validation icon */
         validationIconId: 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/__internal__/form-field/form-field.d.ts

@@ -1,10 +1,8 @@
 import * as React from "react";
 import { MarginProps } from "styled-system";
-import { ValidationPropTypes } from "../validations";
+import { ValidationProps } from "../validations";
 
-export interface CommonFormFieldPropTypes
-  extends MarginProps,
-    ValidationPropTypes {
+export interface CommonFormFieldPropTypes extends MarginProps, ValidationProps {
   /** If true, the component will be disabled */
   disabled?: boolean;
   /** Help content to be displayed under an input */

package/lib/__internal__/input/input-presentation.style.d.ts

@@ -2,5 +2,5 @@ import { CommonInputPresentationProps } from "./input-presentation.component";
 import { InputContextProps } from "../input-behaviour";
 import { CarbonProviderProps } from "../../components/carbon-provider";
 export declare const StyledInputPresentationContainer: import("styled-components").StyledComponent<"div", any, Pick<CommonInputPresentationProps, "inputWidth">, never>;
-declare const InputPresentationStyle: import("styled-components").StyledComponent<"div", any, Pick<InputContextProps, "hasFocus"> & Pick<CommonInputPresentationProps, "disabled" | "align" | "error" | "info" | "warning" | "readOnly" | "size"> & Pick<CarbonProviderProps, "validationRedesignOptIn">, never>;
+declare const InputPresentationStyle: import("styled-components").StyledComponent<"div", any, Pick<InputContextProps, "hasFocus"> & Pick<CommonInputPresentationProps, "disabled" | "error" | "info" | "warning" | "align" | "readOnly" | "size"> & Pick<CarbonProviderProps, "validationRedesignOptIn">, never>;
 export default InputPresentationStyle;

package/lib/__internal__/label/label.d.ts

@@ -1,7 +1,7 @@
 import * as React from "react";
-import { ValidationPropTypes } from "../validations";
+import { ValidationProps } from "../validations";
 
-export interface LabelPropTypes extends ValidationPropTypes {
+export interface LabelPropTypes extends ValidationProps {
   /** Label width */
   width?: number;
   /** Label alignment */

package/lib/__internal__/validations/validation-icon.component.d.ts

@@ -1,4 +1,5 @@
 import React from "react";
+import { MarginProps } from "styled-system";
 export interface ValidationProps {
     /** Indicate that error has occurred
      * Pass string to display icon, tooltip and red border
@@ -17,7 +18,7 @@ export interface ValidationProps {
     warning?: boolean | string;
 }
 declare type TooltipPositions = "top" | "bottom" | "left" | "right";
-export interface ValidationIconProps extends ValidationProps {
+export interface ValidationIconProps extends ValidationProps, Pick<MarginProps, "mr" | "ml"> {
     /** A small string to indicate the size of the icon */
     size?: "small" | "medium" | "large";
     /** The unique id of the component (used with aria-describedby for accessibility) */
@@ -42,10 +43,6 @@ export interface ValidationIconProps extends ValidationProps {
     isPartOfInput?: boolean;
     /** Overrides the default tabindex of the component */
     tabIndex?: number;
-    /** Margin right, given number will be multiplied by base spacing unit (8) */
-    mr?: number;
-    /** Margin left, given number will be multiplied by base spacing unit (8) */
-    ml?: number;
 }
 export declare const ValidationIcon: ({ error, warning, info, size, onFocus, onBlur, iconId, tooltipId, isPartOfInput, tabIndex, onClick, tooltipPosition, tooltipFlipOverrides, ...rest }: ValidationIconProps) => JSX.Element | null;
 export default ValidationIcon;

package/lib/__spec_helper__/test-utils.d.ts

@@ -19,7 +19,7 @@ export function click(wrapper: any): any;
 export namespace simulate {
     export { keydown };
 }
-export const carbonThemesJestTable: (string | import("../style/themes/base").ThemeObject)[][];
+export const carbonThemesJestTable: (string | Partial<import("style/themes/base/base-theme.config").ThemeObject> | undefined)[][];
 import { mockMatchMedia } from "./mock-match-media";
 export function testStyledSystemSpacing(component: any, defaults: any, styleContainer: any, assertOpts: any): void;
 export function testStyledSystemMargin(component: any, defaults: any, styleContainer: any, assertOpts: any): void;

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

@@ -4,7 +4,21 @@ declare function AccordionGroup({ children, ...rest }: {
     children: any;
 }): JSX.Element;
 declare namespace AccordionGroup {
-    namespace propTypes {
-        function children(props: any, propName: any, componentName: any): undefined;
-    }
+    const propTypes: {
+        children: (props: any, propName: any, componentName: any) => undefined;
+        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;
+    };
 }

package/lib/components/accordion/accordion.component.js

@@ -67,7 +67,7 @@ const Accordion = /*#__PURE__*/_react.default.forwardRef(({
   });
   (0, _react.useEffect)(() => {
     setContentHeight(accordionContent.current.scrollHeight);
-  }, [isExpanded, children]);
+  }, [isExpanded]);
   const toggleAccordion = (0, _react.useCallback)(ev => {
     if (!isControlled) {
       setIsExpandedInternal(!isExpanded);