carbon-react 106.1.4 → 106.1.7

package/esm/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/esm/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/esm/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/esm/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/esm/components/date/__internal__/date-formats/index.js

@@ -1,39 +1,107 @@
-// 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))
   };
 };
 

package/esm/components/date/__internal__/utils.js

@@ -28,21 +28,31 @@ function hasMatchedFormat(formatString, valueString, fullFormat, fullValue) {
   return formatString.length === valueString.length && isMatch(formatString, valueString);
 }
 
+const THRESHOLD_FOR_ADDITIONAL_YEARS = 69;
 export function additionalYears(formatString, value) {
   if (formatString.split("y").length - 1 !== 2) {
     return [formatString, value];
   }
 
-  let year = value.substring(value.length - 2);
-  const dayAndMonth = value.substring(0, value.length - 2);
+  const formatStartWithYear = formatString.startsWith("yy");
+  const yearStringStartIndex = formatStartWithYear ? 0 : value.length - 2;
+  const yearStringEndIndex = formatStartWithYear ? 2 : value.length;
+  const dayAndMonthStringStartIndex = formatStartWithYear ? yearStringEndIndex : 0;
+  const dayAndMonthStringEndIndex = formatStartWithYear ? value.length : value.length - 2;
+  let year = value.substring(yearStringStartIndex, yearStringEndIndex);
+  const dayAndMonth = value.substring(dayAndMonthStringStartIndex, dayAndMonthStringEndIndex);
   const yearAsNumber = Number(year);
 
-  if (yearAsNumber < 69) {
+  if (yearAsNumber < THRESHOLD_FOR_ADDITIONAL_YEARS) {
     year = String(2000 + yearAsNumber);
   } else {
     year = String(1900 + yearAsNumber);
   }
 
+  if (formatStartWithYear) {
+    return [`yyyy${formatString.substring(2, formatString.length)}`, `${year}${dayAndMonth}`];
+  }
+
   return [`${formatString.substring(0, formatString.length - 2)}yyyy`, `${dayAndMonth}${year}`];
 }
 

package/esm/components/date/date.component.js

@@ -72,7 +72,7 @@ const DateInput = ({
     } = ev.target;
     const [matchedFormat, matchedValue] = findMatchedFormatAndValue(ev.target.value, formats);
     const formattedValueString = ev.type === "blur" ? formattedValue(format, selectedDays) : ev.target.value;
-    const rawValue = isDateValid(parseDate(matchedFormat, matchedValue)) ? formatToISO(matchedFormat, matchedValue) : computeInvalidRawValue(ev.target.value);
+    const rawValue = isDateValid(parseDate(matchedFormat, matchedValue)) ? formatToISO(...additionalYears(matchedFormat, matchedValue)) : computeInvalidRawValue(ev.target.value);
     ev.target = { ...(name && {
         name
       }),
@@ -195,7 +195,9 @@ const DateInput = ({
       return;
     }
 
-    isBlurBlocked.current = true;
+    if (setInputRefMap) {
+      isBlurBlocked.current = true;
+    }
 
     if (ev.target.type === "text" && !open) {
       setOpen(true);
@@ -205,6 +207,11 @@ const DateInput = ({
     }
   };
 
+  const handleIconMouseDown = e => {
+    isBlurBlocked.current = true;
+    handleMouseDown(e);
+  };
+
   const handlePickerMouseDown = () => {
     isBlurBlocked.current = true;
   };
@@ -247,7 +254,7 @@ const DateInput = ({
 
     if (matchedFormat && matchedValue && isDateValid(parseDate(matchedFormat, matchedValue))) {
       setSelectedDays(parseDate(...additionalYears(matchedFormat, matchedValue)));
-    } else if (checkISOFormatAndLength(value)) {
+    } else if (checkISOFormatAndLength(value) && isInitialValue.current) {
       setSelectedDays(parseISODate(value));
     } else {
       setSelectedDays(undefined);
@@ -255,7 +262,7 @@ const DateInput = ({
   }, [value, formats]);
 
   const computedValue = () => {
-    if (checkISOFormatAndLength(value)) {
+    if (checkISOFormatAndLength(value) && isInitialValue.current) {
       return formattedValue(format, parseISODate(value));
     }
 
@@ -265,6 +272,7 @@ const DateInput = ({
     const replaceSeparators = () => value.split("").map(char => char === valueSeparator ? formatSeparator : char).join("");
 
     if (isInitialValue.current && valueSeparator !== formatSeparator && isDateValid(parseDate(format, replaceSeparators()))) {
+      isInitialValue.current = false;
       const [matchedFormat, matchedValue] = findMatchedFormatAndValue(replaceSeparators(), formats);
       return formattedValue(format, parseDate(...additionalYears(matchedFormat, matchedValue)));
     }
@@ -289,7 +297,7 @@ const DateInput = ({
     onKeyDown: handleKeyDown,
     iconOnClick: handleClick,
     onMouseDown: handleMouseDown,
-    iconOnMouseDown: handleMouseDown,
+    iconOnMouseDown: handleIconMouseDown,
     inputIcon: "calendar",
     labelInline: labelInline,
     inputRef: assignInput,

package/esm/components/date-range/date-range.component.d.ts

@@ -13,25 +13,73 @@ declare function DateRange({ endDateProps, id, labelsInline, name, onBlur, onCha
     value: any;
 }): JSX.Element;
 declare namespace DateRange {
-    namespace propTypes {
-        const endLabel: PropTypes.Requireable<string>;
-        const onChange: PropTypes.Validator<(...args: any[]) => any>;
-        const onBlur: PropTypes.Requireable<(...args: any[]) => any>;
-        const value: PropTypes.Validator<(string | null | undefined)[]>;
-        const startError: PropTypes.Requireable<string | boolean>;
-        const startWarning: PropTypes.Requireable<string | boolean>;
-        const startInfo: PropTypes.Requireable<string | boolean>;
-        const endError: PropTypes.Requireable<string | boolean>;
-        const endWarning: PropTypes.Requireable<string | boolean>;
-        const endInfo: PropTypes.Requireable<string | boolean>;
-        const validationOnLabel: PropTypes.Requireable<boolean>;
-        const startLabel: PropTypes.Requireable<string>;
-        const labelsInline: PropTypes.Requireable<boolean>;
-        const startDateProps: PropTypes.Requireable<PropTypes.InferProps<any>>;
-        const endDateProps: PropTypes.Requireable<PropTypes.InferProps<any>>;
-        const name: PropTypes.Requireable<string>;
-        const id: PropTypes.Requireable<string>;
-        const tooltipPosition: PropTypes.Requireable<string>;
-    }
+    const propTypes: {
+        /**
+         * Optional label for endDate field
+         */
+        endLabel: PropTypes.Requireable<string>;
+        /** Custom callback - receives array of startDate and endDate */
+        onChange: PropTypes.Validator<(...args: any[]) => any>;
+        /** Custom callback - receives array of startDate and endDate */
+        onBlur: PropTypes.Requireable<(...args: any[]) => any>;
+        /** An array containing the value of startDate and endDate */
+        value: PropTypes.Validator<(string | null | undefined)[]>;
+        /** Indicate that error has occurred on start date
+        Pass string to display icon, tooltip and red border
+        Pass true boolean to only display red border */
+        startError: PropTypes.Requireable<string | boolean>;
+        /** Indicate that warning has occurred on start date
+        Pass string to display icon, tooltip and orange border
+        Pass true boolean to only display orange border */
+        startWarning: PropTypes.Requireable<string | boolean>;
+        /** Indicate additional information for start date
+        Pass string to display icon, tooltip and blue border
+        Pass true boolean to only display blue border */
+        startInfo: PropTypes.Requireable<string | boolean>;
+        /** Indicate that error has occurred on end date
+        Pass string to display icon, tooltip and red border
+        Pass true boolean to only display red border */
+        endError: PropTypes.Requireable<string | boolean>;
+        /** Indicate that warning has occurred on end date
+        Pass string to display icon, tooltip and orange border
+        Pass true boolean to only display orange border */
+        endWarning: PropTypes.Requireable<string | boolean>;
+        /** Indicate additional information for end date
+        Pass string to display icon, tooltip and blue border
+        Pass true boolean to only display blue border */
+        endInfo: PropTypes.Requireable<string | boolean>;
+        /** When true, validation icons will be placed on labels instead of being placed on the inputs */
+        validationOnLabel: PropTypes.Requireable<boolean>;
+        /**
+         * Optional label for startDate field
+         */
+        startLabel: PropTypes.Requireable<string>;
+        /** Display labels inline */
+        labelsInline: PropTypes.Requireable<boolean>;
+        /** Props for the child start Date component. For more information see the Date component's [prop table](https://carbon.sage.com/iframe.html?id=date-input--default-story&viewMode=docs#props) */
+        startDateProps: PropTypes.Requireable<PropTypes.InferProps<any>>;
+        /** Props for the child end Date component. For more information see the Date component's [prop table](https://carbon.sage.com/iframe.html?id=date-input--default-story&viewMode=docs#props) */
+        endDateProps: PropTypes.Requireable<PropTypes.InferProps<any>>;
+        /** An optional string prop to provide a name to the component */
+        name: PropTypes.Requireable<string>;
+        /** An optional string prop to provide an id to the component */
+        id: PropTypes.Requireable<string>;
+        /** 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/esm/components/decimal/decimal.component.d.ts

@@ -76,6 +76,20 @@ declare namespace Decimal {
         locale: 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;
     };
     namespace defaultProps {
         const precision: number;

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

@@ -7,11 +7,39 @@ declare function Detail({ className, icon, footnote, children, ...rest }: {
     children: any;
 }): JSX.Element;
 declare namespace Detail {
-    namespace propTypes {
-        const className: PropTypes.Requireable<string>;
-        const icon: PropTypes.Requireable<string>;
-        const footnote: PropTypes.Requireable<string>;
-        const children: PropTypes.Requireable<PropTypes.ReactNodeLike>;
-    }
+    const propTypes: {
+        /**
+         * Custom className
+         */
+        className: PropTypes.Requireable<string>;
+        /**
+         * <a href="https://carbon.sage.com/?path=/docs/icon--list-of-icons#list-of-icons" target="_blank">List of supported icons</a>
+         *
+         * The type of icon to use.
+         */
+        icon: PropTypes.Requireable<string>;
+        /**
+         * A small detail to display under the main content.
+         */
+        footnote: PropTypes.Requireable<string>;
+        /**
+         * The rendered children of the component.
+         */
+        children: PropTypes.Requireable<PropTypes.ReactNodeLike>;
+        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/esm/components/draggable/draggable-container.component.d.ts

@@ -5,9 +5,29 @@ declare function DraggableContainer({ children, getOrder, ...rest }: {
     getOrder: any;
 }): JSX.Element;
 declare namespace DraggableContainer {
-    namespace propTypes {
-        const getOrder: PropTypes.Requireable<(...args: any[]) => any>;
-        function children(props: any, propName: any, componentName: any): undefined;
-    }
+    const propTypes: {
+        /** Callback fired when order is changed */
+        getOrder: PropTypes.Requireable<(...args: any[]) => any>;
+        /**
+         * The content of the component
+         *
+         *  `<DraggableItem />` is required to make `Draggable` works
+         * */
+        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;
+    };
 }
 import PropTypes from "prop-types";