carbon-react 110.1.1 → 110.2.0

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

@@ -32,6 +32,10 @@ interface CommonFormFieldProps extends MarginProps, ValidationProps {
     reverse?: boolean;
     /** Id of the validation icon */
     validationIconId?: string;
+    /**
+     * @private @ignore
+     * Flag dedicating if latest validation design should be used */
+    validationRedesignOptIn?: boolean;
 }
 export interface FormFieldProps extends CommonFormFieldProps, TagProps {
     /** Breakpoint for adaptive label (inline labels change to top aligned). Enables the adaptive behaviour when set */
@@ -53,7 +57,7 @@ export interface FormFieldProps extends CommonFormFieldProps, TagProps {
     useValidationIcon?: boolean;
 }
 declare const FormField: {
-    ({ children, disabled, fieldHelp: fieldHelpContent, fieldHelpInline, error, warning, info, tooltipId, fieldHelpId, label, labelId, labelAlign, labelHelp, labelHelpIcon, labelInline, labelSpacing, labelWidth, id, reverse, isOptional, useValidationIcon, adaptiveLabelBreakpoint, isRequired, validationIconId, ...rest }: FormFieldProps): JSX.Element;
+    ({ children, "data-component": dataComponent, disabled, fieldHelp: fieldHelpContent, fieldHelpInline, error, warning, info, tooltipId, fieldHelpId, label, labelId, labelAlign, labelHelp, labelHelpIcon, labelInline, labelSpacing, labelWidth, id, reverse, isOptional, useValidationIcon, adaptiveLabelBreakpoint, isRequired, validationIconId, validationRedesignOptIn, ...rest }: FormFieldProps): JSX.Element;
     displayName: string;
 };
 export default FormField;

package/esm/__internal__/form-field/form-field.component.js

@@ -13,6 +13,7 @@ import useIsAboveBreakpoint from "../../hooks/__internal__/useIsAboveBreakpoint"
 
 const FormField = ({
   children,
+  "data-component": dataComponent,
   disabled,
   fieldHelp: fieldHelpContent,
   fieldHelpInline,
@@ -36,6 +37,7 @@ const FormField = ({
   adaptiveLabelBreakpoint,
   isRequired,
   validationIconId,
+  validationRedesignOptIn,
   ...rest
 }) => {
   const invalidValidationProp = useMemo(() => {
@@ -71,15 +73,15 @@ const FormField = ({
     labelWidth: labelWidth,
     id: fieldHelpId
   }, fieldHelpContent) : null;
-  return /*#__PURE__*/React.createElement(FormFieldStyle, _extends({}, tagComponent(rest["data-component"], rest), marginProps), /*#__PURE__*/React.createElement(FieldLineStyle, {
+  return /*#__PURE__*/React.createElement(FormFieldStyle, _extends({}, tagComponent(dataComponent, rest), marginProps), /*#__PURE__*/React.createElement(FieldLineStyle, {
     inline: inlineLabel
   }, reverse && children, label && /*#__PURE__*/React.createElement(Label, {
     labelId: labelId,
     align: labelAlign,
     disabled: disabled,
-    error: !rest.validationRedesignOptIn && error,
-    warning: !rest.validationRedesignOptIn && warning,
-    info: !rest.validationRedesignOptIn && info,
+    error: !validationRedesignOptIn && error,
+    warning: !validationRedesignOptIn && warning,
+    info: !validationRedesignOptIn && info,
     help: labelHelp,
     tooltipId: tooltipId,
     htmlFor: id,
@@ -98,7 +100,7 @@ const FormField = ({
 FormField.propTypes = {
   "adaptiveLabelBreakpoint": PropTypes.number,
   "children": PropTypes.node,
-  "data-component": PropTypes.string.isRequired,
+  "data-component": PropTypes.string,
   "data-element": PropTypes.string,
   "data-role": PropTypes.string,
   "disabled": PropTypes.bool,
@@ -276,6 +278,7 @@ FormField.propTypes = {
   "tooltipId": PropTypes.string,
   "useValidationIcon": PropTypes.bool,
   "validationIconId": PropTypes.string,
+  "validationRedesignOptIn": PropTypes.bool,
   "warning": PropTypes.oneOfType([PropTypes.string, PropTypes.bool])
 };
 FormField.displayName = "FormField";

package/esm/__internal__/utils/helpers/tags/tags.d.ts

@@ -1,13 +1,16 @@
 interface DataProps {
+    /** Identifier used for testing purposes, applied to the root element of the component. */
     "data-element"?: string;
+    /** Identifier used for testing purposes, applied to the root element of the component. */
     "data-role"?: string;
     [restKeys: string]: any;
 }
 export interface TagProps extends DataProps {
-    "data-component": string;
+    /** Identifier used for testing purposes, applied to the root element of the component. */
+    "data-component"?: string;
 }
 /**
  * Builds props object containing top level data tags
  */
-declare function tagComponent(componentName: string, props: DataProps): TagProps;
+declare function tagComponent(componentName: string | undefined, props: DataProps): TagProps;
 export default tagComponent;

package/esm/__spec_helper__/mock-match-media.d.ts

@@ -1,6 +1,8 @@
 declare function setupMatchMediaMock(): void;
 declare function mockMatchMedia(
   matches?: boolean
-): { removeListener: jest.Mock };
+): {
+  removeListener: jest.Mock;
+};
 
 export { setupMatchMediaMock, mockMatchMedia };

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

@@ -1,6 +1,6 @@
 /// <reference types="react" />
 import { ReactWrapper, ShallowWrapper } from "enzyme";
-import { LayoutProps, FlexboxProps, BackgroundProps } from "styled-system";
+import { LayoutProps, FlexboxProps, BackgroundProps, PositionProps } from "styled-system";
 import { ReactTestRendererJSON } from "react-test-renderer";
 import { mockMatchMedia } from "./mock-match-media";
 declare const toCSSCase: (str: string) => string;
@@ -47,5 +47,6 @@ declare const testStyledSystemWidth: (component: (widthProperties?: {
 declare const testStyledSystemLayout: (component: (layoutProperties?: LayoutProps<Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>> | undefined) => JSX.Element, styleContainer?: ((wrapper: ReactWrapper) => ReactWrapper) | undefined) => void;
 declare const testStyledSystemFlexBox: (component: (flexboxProperties?: FlexboxProps<Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>> | undefined) => JSX.Element, styleContainer?: ((wrapper: ReactWrapper) => ReactWrapper) | undefined) => void;
 declare const testStyledSystemBackground: (component: (backgroundProperties?: BackgroundProps<Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>, import("csstype").Property.Background<import("styled-system").TLengthStyledSystem>> | undefined) => JSX.Element, styleContainer?: ((wrapper: ReactWrapper) => ReactWrapper) | undefined) => void;
+declare const testStyledSystemPosition: (component: (positionProperties?: PositionProps<Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>> | undefined) => JSX.Element, styleContainer?: ((wrapper: ReactWrapper) => ReactWrapper) | undefined) => void;
 declare const expectConsoleOutput: (message: string, type?: "warn" | "error") => () => void;
-export { assertStyleMatch, toCSSCase, hoverList, selectedItemOf, childrenFrom, makeArrayKeys, keyboard, assertKeyboardTraversal, assertHoverTraversal, listFrom, click, simulate, carbonThemesJestTable, mockMatchMedia, testStyledSystemSpacing, testStyledSystemMargin, testStyledSystemPadding, testStyledSystemColor, testStyledSystemWidth, testStyledSystemLayout, testStyledSystemFlexBox, testStyledSystemBackground, expectConsoleOutput, };
+export { assertStyleMatch, toCSSCase, hoverList, selectedItemOf, childrenFrom, makeArrayKeys, keyboard, assertKeyboardTraversal, assertHoverTraversal, listFrom, click, simulate, carbonThemesJestTable, mockMatchMedia, testStyledSystemSpacing, testStyledSystemMargin, testStyledSystemPadding, testStyledSystemColor, testStyledSystemWidth, testStyledSystemLayout, testStyledSystemFlexBox, testStyledSystemBackground, testStyledSystemPosition, expectConsoleOutput, };

package/esm/__spec_helper__/test-utils.js

@@ -109,6 +109,7 @@ const widthProps = ["width", "width", "200px"];
 const layoutProps = [widthProps, ["height", "height", "200px"], ["minWidth", "min-width", "120px"], ["maxWidth", "max-width", "120px"], ["minHeight", "min-height", "120px"], ["maxHeight", "max-height", "120px"], ["size", "width", "120px"], ["size", "height", "120px"], ["display", "display", "inline-block"], ["verticalAlign", "vertical-align", "baseline"], ["overflow", "overflow", "hidden"], ["overflowX", "overflow-x", "hidden"], ["overflowY", "overflow-y", "hidden"]];
 const flexBoxProps = [["alignItems", "alignItems", "center"], ["alignContent", "alignContent", "center"], ["justifyItems", "justifyItems", "center"], ["justifyContent", "justifyContent", "center"], ["flexWrap", "flexWrap", "wrap"], ["flexDirection", "flexDirection", "row-reverse"], ["flex", "flex", "1"], ["flexGrow", "flexGrow", "1"], ["flexShrink", "flexShrink", "1"], ["flexBasis", "flexBasis", "100px"], ["justifySelf", "justifySelf", "center"], ["alignSelf", "alignSelf", "center"], ["order", "order", "1"]];
 const backgroundProps = [["background", "background", "lightblue url('foo.jpg') no-repeat fixed center"], ["backgroundImage", "background-image", "url(foo.jpg)"], ["backgroundSize", "background-size", "center"], ["backgroundRepeat", "background-repeat", "no-repeat"]];
+const positionProps = [["top", "0px"], ["bottom", "0px"], ["right", "0px"], ["left", "0px"], ["position", "fixed"], ["position", "sticky"], ["position", "absolute"], ["position", "static"], ["position", "relative"]];
 export const getDefaultValue = value => {
   const spaceArrayLength = space.length - 1;
   if (value === undefined) return value;
@@ -302,6 +303,21 @@ const testStyledSystemBackground = (component, styleContainer) => {
       }, styleContainer ? styleContainer(wrapper) : wrapper);
     });
   });
+};
+
+const testStyledSystemPosition = (component, styleContainer) => {
+  describe.each(positionProps)('when a prop is specified using the "%s" styled system props', (styledSystemProp, value) => {
+    it(`then ${styledSystemProp} should have been set correctly`, () => {
+      const props = {
+        [styledSystemProp]: value
+      };
+      const wrapper = mount(component({ ...props
+      }));
+      assertStyleMatch({
+        [styledSystemProp]: value
+      }, styleContainer ? styleContainer(wrapper) : wrapper);
+    });
+  });
 }; // this util will catch that a console output occurred without polluting the output when running the unit tests
 
 
@@ -335,4 +351,4 @@ const expectConsoleOutput = (message, type = "error") => {
   };
 };
 
-export { assertStyleMatch, toCSSCase, hoverList, selectedItemOf, childrenFrom, makeArrayKeys, keyboard, assertKeyboardTraversal, assertHoverTraversal, listFrom, click, simulate, carbonThemesJestTable, mockMatchMedia, testStyledSystemSpacing, testStyledSystemMargin, testStyledSystemPadding, testStyledSystemColor, testStyledSystemWidth, testStyledSystemLayout, testStyledSystemFlexBox, testStyledSystemBackground, expectConsoleOutput };
+export { assertStyleMatch, toCSSCase, hoverList, selectedItemOf, childrenFrom, makeArrayKeys, keyboard, assertKeyboardTraversal, assertHoverTraversal, listFrom, click, simulate, carbonThemesJestTable, mockMatchMedia, testStyledSystemSpacing, testStyledSystemMargin, testStyledSystemPadding, testStyledSystemColor, testStyledSystemWidth, testStyledSystemLayout, testStyledSystemFlexBox, testStyledSystemBackground, testStyledSystemPosition, expectConsoleOutput };

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

@@ -1,9 +1,9 @@
 import React from "react";
-import { SpaceProps, LayoutProps, FlexboxProps, ColorProps } from "styled-system";
+import { SpaceProps, LayoutProps, FlexboxProps, ColorProps, PositionProps } from "styled-system";
 export declare type OverflowWrap = "break-word" | "anywhere";
 export declare type ScrollVariant = "light" | "dark";
 export declare type BoxSizing = "content-box" | "border-box";
-export interface BoxProps extends SpaceProps, LayoutProps, FlexboxProps, ColorProps {
+export interface BoxProps extends SpaceProps, LayoutProps, FlexboxProps, ColorProps, Omit<PositionProps, "zIndex"> {
     as?: keyof JSX.IntrinsicElements | React.ComponentType<any>;
     /** String to set Box content break strategy. Note "anywhere" is not supported in Safari */
     overflowWrap?: OverflowWrap;
@@ -11,6 +11,8 @@ export interface BoxProps extends SpaceProps, LayoutProps, FlexboxProps, ColorPr
     scrollVariant?: ScrollVariant;
     /** set the box-sizing attribute of the Box component */
     boxSizing?: BoxSizing;
+    /** Allows a tabindex to be specified */
+    tabIndex?: number | string;
 }
 declare const Box: import("styled-components").StyledComponent<"div", any, BoxProps, never>;
 export default Box;

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

@@ -1,5 +1,5 @@
 import styled, { css } from "styled-components";
-import { space, layout, flexbox } from "styled-system";
+import { space, layout, flexbox, position } from "styled-system";
 import BaseTheme from "../../style/themes/base";
 import styledColor from "../../style/utils/color";
 import boxConfig from "./box.config";
@@ -7,6 +7,7 @@ const Box = styled.div`
   ${space}
   ${layout}
   ${flexbox}
+  ${position}
   ${({
   color,
   bg,

package/esm/components/button-toggle/button-toggle-icon.component.d.ts

@@ -0,0 +1,15 @@
+/// <reference types="react" />
+import { StyledButtonToggleIconProps } from "./button-toggle.style";
+import { IconType } from "../icon";
+export interface ButtonToggleIconProps extends StyledButtonToggleIconProps {
+    /**
+     * <a href="https://brand.sage.com/d/NdbrveWvNheA/foundations#/icons/icons" target="_blank">List of supported icons</a>
+     *
+     * buttonIcon to render.
+     */
+    buttonIcon: IconType;
+    /** Sets the icon in the disabled state */
+    disabled?: boolean;
+}
+declare const ButtonToggleIcon: ({ buttonIcon, buttonIconSize, disabled, hasContent, }: ButtonToggleIconProps) => JSX.Element;
+export default ButtonToggleIcon;

package/esm/components/button-toggle/button-toggle-icon.component.js

@@ -1,25 +1,28 @@
-function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
-
 import React from "react";
 import PropTypes from "prop-types";
 import { StyledButtonToggleIcon } from "./button-toggle.style";
 import Icon from "../icon";
 
-const ButtonToggleIcon = props => /*#__PURE__*/React.createElement(StyledButtonToggleIcon, props, /*#__PURE__*/React.createElement(Icon, _extends({
-  type: props.buttonIcon,
-  fontSize: props.buttonIconSize,
-  bgSize: "extra-small"
-}, props)));
+const ButtonToggleIcon = ({
+  buttonIcon,
+  buttonIconSize,
+  disabled,
+  hasContent
+}) => /*#__PURE__*/React.createElement(StyledButtonToggleIcon, {
+  buttonIconSize: buttonIconSize,
+  hasContent: hasContent
+}, /*#__PURE__*/React.createElement(Icon, {
+  "aria-hidden": true,
+  type: buttonIcon,
+  fontSize: buttonIconSize,
+  bgSize: "extra-small",
+  disabled: disabled
+}));
 
 ButtonToggleIcon.propTypes = {
-  /**
-   * <a href="https://brand.sage.com/d/NdbrveWvNheA/foundations#/icons/icons" target="_blank">List of supported icons</a>
-   *
-   * buttonIcon to render.
-   */
-  buttonIcon: PropTypes.string,
-
-  /** Sets the size of the buttonIcon (eg. large) */
-  buttonIconSize: PropTypes.oneOf(["small", "large"])
+  "buttonIcon": PropTypes.oneOf(["add", "admin", "alert", "analysis", "arrow_down", "arrow_left_boxed", "arrow_left_right_small", "arrow_left_small", "arrow_left", "arrow_right_small", "arrow_right", "arrow_up", "arrow", "attach", "bank", "basket_with_squares", "basket", "bin", "block_arrow_right", "blocked_square", "blocked", "bold", "boxed_shapes", "bulk_destroy", "bullet_list_dotted", "bullet_list_numbers", "bullet_list", "business", "calendar_today", "calendar", "call", "camera", "card_view", "caret_down", "caret_large_down", "caret_large_left", "caret_large_right", "caret_large_up", "caret_left", "caret_right", "caret_up", "cart", "chart_bar", "chart_line", "chart_pie", "chat_notes", "chat", "chevron_down_thick", "chevron_down", "chevron_left_thick", "chevron_left", "chevron_right_thick", "chevron_right", "chevron_up_thick", "chevron_up", "circle_with_dots", "circles_connection", "clock", "close", "coins", "collaborate", "computer_clock", "connect", "contacts", "copy", "create", "credit_card_slash", "credit_card", "cross_circle", "cross", "csv", "delete", "delivery", "disconnect", "disputed", "document_right_align", "document_tick", "document_vertical_lines", "download", "draft", "drag_vertical", "drag", "dropdown", "duplicate", "edit", "edited", "ellipsis_horizontal", "ellipsis_vertical", "email_switch", "email", "entry", "envelope_dollar", "envelope_euro", "error_square", "error", "euro", "expand", "factory", "favourite_lined", "favourite", "fax", "feedback", "file_excel", "file_generic", "file_image", "file_pdf", "file_word", "files_leaning", "filter_new", "filter", "fit_height", "fit_width", "flag", "folder", "gift", "go", "graph", "grid", "help", "hide", "home", "image", "in_progress", "in_transit", "individual", "info", "italic", "key", "ledger_arrow_left", "ledger_arrow_right", "ledger", "lightbulb_off", "lightbulb_on", "link", "list_view", "location", "locked", "logout", "lookup", "marker", "message", "minus_large", "minus", "mobile", "money_bag", "none", "old_warning", "pause_circle", "pause", "pdf", "people_switch", "people", "person_info", "person_tick", "person", "phone", "piggy_bank", "play_circle", "play", "plus_large", "plus", "pound", "print", "progress", "progressed", "question_hollow", "question_mark", "question", "refresh_clock", "refresh", "remove", "sage_coin", "save", "scan", "search", "services", "settings_old", "settings", "share", "shop", "sort_down", "sort_up", "spanner", "split_container", "split", "square_dot", "squares_nine", "stacked_boxes", "stacked_squares", "submitted", "sync", "tag", "talk", "three_boxes", "tick_circle", "tick", "true_tick", "undo", "unlocked", "upload", "uploaded", "video", "view", "warning"]).isRequired,
+  "buttonIconSize": PropTypes.oneOf(["large", "small"]),
+  "disabled": PropTypes.bool,
+  "hasContent": PropTypes.bool
 };
 export default ButtonToggleIcon;

package/esm/components/button-toggle/button-toggle-input.component.d.ts

@@ -0,0 +1,25 @@
+import React from "react";
+export interface ButtonToggleInputProps {
+    /** Prop to specify the aria-label of the component */
+    "aria-label"?: string;
+    /** Prop to specify the aria-labelledby property of the component */
+    "aria-labelledby"?: string;
+    /** Set the checked value of the radio button */
+    checked?: boolean;
+    /** Disable all user interaction. */
+    disabled?: boolean;
+    /** Unique ID attribute for input */
+    guid?: string;
+    /** Name used on the hidden radio button. */
+    name?: string;
+    /** Callback triggered by blur event on the input. */
+    onBlur?: (ev: React.FocusEvent<HTMLInputElement>) => void;
+    /** Callback triggered by change event on the input. */
+    onChange?: (ev: React.ChangeEvent<HTMLInputElement>) => void;
+    /** Callback triggered by focus event on the input. */
+    onFocus?: (ev: React.FocusEvent<HTMLInputElement>) => void;
+    /** Value for the input */
+    value?: string;
+}
+declare const ButtonToggleInput: React.ForwardRefExoticComponent<ButtonToggleInputProps & React.RefAttributes<HTMLInputElement>>;
+export default ButtonToggleInput;

package/esm/components/button-toggle/button-toggle-input.component.js

@@ -15,7 +15,7 @@ const ButtonToggleInput = /*#__PURE__*/React.forwardRef((props, forwardRef) => {
       props.onBlur(ev);
     }
 
-    if (onBlur) onBlur(ev);
+    if (onBlur) onBlur();
   };
 
   const handleFocus = ev => {
@@ -23,7 +23,7 @@ const ButtonToggleInput = /*#__PURE__*/React.forwardRef((props, forwardRef) => {
       props.onFocus(ev);
     }
 
-    if (onFocus) onFocus(ev);
+    if (onFocus) onFocus();
   };
 
   return /*#__PURE__*/React.createElement(StyledButtonToggleInput, _extends({}, props, {
@@ -35,28 +35,16 @@ const ButtonToggleInput = /*#__PURE__*/React.forwardRef((props, forwardRef) => {
   }));
 });
 ButtonToggleInput.propTypes = {
-  /** Set the checked value of the radio button */
-  checked: PropTypes.bool,
-
-  /** Name used on the hidden radio button. */
-  name: PropTypes.string,
-
-  /** Disable all user interaction. */
-  disabled: PropTypes.bool,
-
-  /** Unique ID attribute for input */
-  guid: PropTypes.string,
-
-  /** Value for the input */
-  value: PropTypes.string,
-
-  /** Callback triggered by change event on the input. */
-  onChange: PropTypes.func,
-
-  /** Callback triggered by blur event on the input. */
-  onBlur: PropTypes.func,
-
-  /** Callback triggered by focus event on the input. */
-  onFocus: PropTypes.func
+  "aria-label": PropTypes.string,
+  "aria-labelledby": PropTypes.string,
+  "checked": PropTypes.bool,
+  "disabled": PropTypes.bool,
+  "guid": PropTypes.string,
+  "name": PropTypes.string,
+  "onBlur": PropTypes.func,
+  "onChange": PropTypes.func,
+  "onFocus": PropTypes.func,
+  "value": PropTypes.string
 };
+ButtonToggleInput.displayName = "ButtonToggleInput";
 export default ButtonToggleInput;

package/esm/components/button-toggle/button-toggle.component.d.ts

@@ -0,0 +1,24 @@
+import React from "react";
+import { StyledButtonToggleLabelProps } from "./button-toggle.style";
+import { ButtonToggleInputProps } from "./button-toggle-input.component";
+export interface ButtonToggleProps extends ButtonToggleInputProps, Partial<StyledButtonToggleLabelProps> {
+    /** A required prop. This is the button text. */
+    children: React.ReactNode;
+    /** 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. */
+    "data-element"?: string;
+    /** Identifier used for testing purposes, applied to the root element of the component. */
+    "data-role"?: string;
+    /** Set the default value of the Group if component is meant to be used as uncontrolled. */
+    defaultChecked?: boolean;
+    /** Remove spacing from between buttons. */
+    grouped?: boolean;
+    /** Callback triggered by click event on the input. */
+    onClick?: (ev: React.MouseEvent<HTMLInputElement>) => void;
+}
+export declare const ButtonToggle: {
+    (props: ButtonToggleProps): JSX.Element;
+    displayName: string;
+};
+export default ButtonToggle;

package/esm/components/button-toggle/button-toggle.component.js

@@ -11,7 +11,7 @@ const ButtonToggle = props => {
     "aria-label": ariaLabel,
     "aria-labelledby": ariaLabelledBy,
     buttonIcon,
-    buttonIconSize,
+    buttonIconSize = "small",
     checked,
     children,
     "data-component": dataComponent,
@@ -23,7 +23,7 @@ const ButtonToggle = props => {
     onBlur,
     onChange,
     onFocus,
-    size,
+    size = "medium",
     value
   } = props;
   const {
@@ -36,16 +36,17 @@ const ButtonToggle = props => {
 
   if (buttonIcon) {
     icon = /*#__PURE__*/React.createElement(ButtonToggleIcon, {
-      "aria-hidden": true,
       buttonIcon: buttonIcon,
       buttonIconSize: buttonIconSize,
-      hasNoContent: !children,
-      disabled: disabled
+      disabled: disabled,
+      hasContent: !!children
     });
   }
 
   function handleClick() {
-    inputRef.current.focus();
+    var _inputRef$current;
+
+    (_inputRef$current = inputRef.current) === null || _inputRef$current === void 0 ? void 0 : _inputRef$current.focus();
   }
 
   return /*#__PURE__*/React.createElement(StyledButtonToggle, {
@@ -79,64 +80,27 @@ const ButtonToggle = props => {
 };
 
 ButtonToggle.propTypes = {
-  /** Prop to specify the aria-label of the component */
   "aria-label": PropTypes.string,
-
-  /** Prop to specify the aria-labelledby property of the component */
   "aria-labelledby": PropTypes.string,
-
-  /** Set the checked value of the radio button */
-  checked: PropTypes.bool,
-
-  /** Identifier used for testing purposes, applied to the root element of the component. */
+  "buttonIcon": PropTypes.oneOf(["add", "admin", "alert", "analysis", "arrow_down", "arrow_left_boxed", "arrow_left_right_small", "arrow_left_small", "arrow_left", "arrow_right_small", "arrow_right", "arrow_up", "arrow", "attach", "bank", "basket_with_squares", "basket", "bin", "block_arrow_right", "blocked_square", "blocked", "bold", "boxed_shapes", "bulk_destroy", "bullet_list_dotted", "bullet_list_numbers", "bullet_list", "business", "calendar_today", "calendar", "call", "camera", "card_view", "caret_down", "caret_large_down", "caret_large_left", "caret_large_right", "caret_large_up", "caret_left", "caret_right", "caret_up", "cart", "chart_bar", "chart_line", "chart_pie", "chat_notes", "chat", "chevron_down_thick", "chevron_down", "chevron_left_thick", "chevron_left", "chevron_right_thick", "chevron_right", "chevron_up_thick", "chevron_up", "circle_with_dots", "circles_connection", "clock", "close", "coins", "collaborate", "computer_clock", "connect", "contacts", "copy", "create", "credit_card_slash", "credit_card", "cross_circle", "cross", "csv", "delete", "delivery", "disconnect", "disputed", "document_right_align", "document_tick", "document_vertical_lines", "download", "draft", "drag_vertical", "drag", "dropdown", "duplicate", "edit", "edited", "ellipsis_horizontal", "ellipsis_vertical", "email_switch", "email", "entry", "envelope_dollar", "envelope_euro", "error_square", "error", "euro", "expand", "factory", "favourite_lined", "favourite", "fax", "feedback", "file_excel", "file_generic", "file_image", "file_pdf", "file_word", "files_leaning", "filter_new", "filter", "fit_height", "fit_width", "flag", "folder", "gift", "go", "graph", "grid", "help", "hide", "home", "image", "in_progress", "in_transit", "individual", "info", "italic", "key", "ledger_arrow_left", "ledger_arrow_right", "ledger", "lightbulb_off", "lightbulb_on", "link", "list_view", "location", "locked", "logout", "lookup", "marker", "message", "minus_large", "minus", "mobile", "money_bag", "none", "old_warning", "pause_circle", "pause", "pdf", "people_switch", "people", "person_info", "person_tick", "person", "phone", "piggy_bank", "play_circle", "play", "plus_large", "plus", "pound", "print", "progress", "progressed", "question_hollow", "question_mark", "question", "refresh_clock", "refresh", "remove", "sage_coin", "save", "scan", "search", "services", "settings_old", "settings", "share", "shop", "sort_down", "sort_up", "spanner", "split_container", "split", "square_dot", "squares_nine", "stacked_boxes", "stacked_squares", "submitted", "sync", "tag", "talk", "three_boxes", "tick_circle", "tick", "true_tick", "undo", "unlocked", "upload", "uploaded", "video", "view", "warning"]),
+  "buttonIconSize": PropTypes.oneOf(["large", "small"]),
+  "checked": PropTypes.bool,
+  "children": PropTypes.node,
   "data-component": PropTypes.string,
-
-  /** Identifier used for testing purposes, applied to the root element of the component. */
   "data-element": PropTypes.string,
-
-  /** Identifier used for testing purposes, applied to the root element of the component. */
   "data-role": PropTypes.string,
-
-  /** Name used on the hidden radio button. */
-  name: PropTypes.string,
-
-  /** Callback triggered by change event on the input. */
-  onChange: PropTypes.func,
-
-  /** Callback triggered by focus event on the input. */
-  onFocus: PropTypes.func,
-
-  /** Callback triggered by blur event on the input. */
-  onBlur: PropTypes.func,
-
-  /** ButtonToggle size */
-  size: PropTypes.oneOf(["small", "medium", "large"]),
-
-  /** buttonIcon to render. */
-  buttonIcon: PropTypes.string,
-
-  /** Sets the size of the buttonIcon (eg. large) */
-  buttonIconSize: PropTypes.oneOf(["small", "large"]),
-
-  /** Remove spacing from between buttons. */
-  grouped: PropTypes.bool,
-
-  /** Disable all user interaction. */
-  disabled: PropTypes.bool,
-
-  /** A required prop. This is the button text. */
-  children: PropTypes.node.isRequired,
-
-  /** Set the default value of the Group if component is meant to be used as uncontrolled. */
-  defaultChecked: PropTypes.bool,
-  // eslint-disable-line react/no-unused-prop-types
-
-  /** Value for the input */
-  value: PropTypes.string
-};
-ButtonToggle.defaultProps = {
-  size: "medium",
-  buttonIconSize: "small"
+  "defaultChecked": PropTypes.bool,
+  "disabled": PropTypes.bool,
+  "grouped": PropTypes.bool,
+  "guid": PropTypes.string,
+  "name": PropTypes.string,
+  "onBlur": PropTypes.func,
+  "onChange": PropTypes.func,
+  "onClick": PropTypes.func,
+  "onFocus": PropTypes.func,
+  "size": PropTypes.oneOf(["large", "medium", "small"]),
+  "value": PropTypes.string
 };
+export { ButtonToggle };
 ButtonToggle.displayName = "ButtonToggle";
 export default ButtonToggle;

package/esm/components/button-toggle/button-toggle.style.d.ts

@@ -0,0 +1,26 @@
+import { IconType } from "../icon";
+export declare type ButtonToggleIconSizes = "small" | "large";
+declare const StyledButtonToggleContentWrapper: import("styled-components").StyledComponent<"div", any, {}, never>;
+export interface StyledButtonToggleLabelProps {
+    /** buttonIcon to render. */
+    buttonIcon?: IconType;
+    /** Sets the size of the buttonIcon (eg. large) */
+    buttonIconSize?: ButtonToggleIconSizes;
+    /** Disable all user interaction. */
+    disabled?: boolean;
+    /** ButtonToggle size */
+    size: "small" | "medium" | "large";
+}
+declare const StyledButtonToggleLabel: import("styled-components").StyledComponent<"label", any, StyledButtonToggleLabelProps, never>;
+export interface StyledButtonToggleIconProps {
+    /** Sets the size of the buttonIcon (eg. large) */
+    buttonIconSize?: ButtonToggleIconSizes;
+    hasContent?: boolean;
+}
+declare const StyledButtonToggleIcon: import("styled-components").StyledComponent<"div", any, StyledButtonToggleIconProps, never>;
+export interface StyledButtonToggleProps {
+    grouped?: boolean;
+}
+declare const StyledButtonToggle: import("styled-components").StyledComponent<"div", any, StyledButtonToggleProps, never>;
+declare const StyledButtonToggleInput: import("styled-components").StyledComponent<"input", any, {}, never>;
+export { StyledButtonToggle, StyledButtonToggleLabel, StyledButtonToggleIcon, StyledButtonToggleInput, StyledButtonToggleContentWrapper, };

package/esm/components/button-toggle/button-toggle.style.js

@@ -1,4 +1,3 @@
-import PropTypes from "prop-types";
 import styled, { css } from "styled-components";
 import StyledIcon from "../icon/icon.style";
 const heightConfig = {
@@ -107,10 +106,9 @@ const iconFontSizes = {
 };
 const StyledButtonToggleIcon = styled.div`
   ${({
-  hasNoContent
-}) => hasNoContent ? "" : css`
-          margin-right: 8px;
-        `}
+  hasContent
+}) => hasContent && `margin-right: 8px;`}
+
   ${({
   buttonIconSize
 }) => buttonIconSize === "large" && css`
@@ -155,7 +153,4 @@ const StyledButtonToggleInput = styled.input`
   height: 0;
   opacity: 0;
 `;
-StyledButtonToggleIcon.propTypes = {
-  buttonIconSize: PropTypes.string
-};
 export { StyledButtonToggle, StyledButtonToggleLabel, StyledButtonToggleIcon, StyledButtonToggleInput, StyledButtonToggleContentWrapper };

package/esm/components/button-toggle/index.d.ts

@@ -1,2 +1,2 @@
-export { default } from "./button-toggle";
-export { ButtonToggleProps } from "./button-toggle";
+export { default } from "./button-toggle.component";
+export type { ButtonToggleProps } from "./button-toggle.component";

package/esm/components/content/content.style.js

@@ -33,7 +33,6 @@ const StyledContentTitle = styled.div`
   return css`
       display: ${inline ? "inline-block" : "block"};
       font-weight: bold;
-      color: var(--colorsUtilityYin090);
       width: ${titleWidth && `calc(${titleWidth}% - 30px)`};
       text-align: ${!inline && align};
 

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

@@ -1,6 +1,6 @@
 import { format, formatISO, isMatch, parse, parseISO } from "date-fns/fp";
 export function parseDate(formatString, valueString) {
-  if (!valueString || !formatString) return "";
+  if (!valueString || !formatString) return null;
   return parse(new Date(), formatString, valueString);
 }
 export function formatToISO(formatString, valueString) {