carbon-react 110.2.4 → 110.4.1

package/esm/__internal__/i18n-context/index.d.ts

@@ -1,2 +1,3 @@
-declare var _default: import("react").Context<import("../../locales/locale").default>;
+/// <reference types="react" />
+declare const _default: import("react").Context<import("../../locales/locale").default>;
 export default _default;

package/esm/__internal__/popover/popover.component.d.ts

@@ -13,6 +13,7 @@ export interface PopoverProps {
     onFirstUpdate?: (state: Partial<State>) => void;
     disablePortal?: boolean;
     reference: React.RefObject<HTMLElement>;
+    isOpen?: boolean;
 }
-declare const Popover: ({ children, placement, disablePortal, reference, onFirstUpdate, modifiers, disableBackgroundUI, }: PopoverProps) => JSX.Element;
+declare const Popover: ({ children, placement, disablePortal, reference, onFirstUpdate, modifiers, disableBackgroundUI, isOpen, }: PopoverProps) => JSX.Element;
 export default Popover;

package/esm/__internal__/popover/popover.component.js

@@ -3,7 +3,7 @@ import PropTypes from "prop-types";
 import ReactDOM from "react-dom";
 import { createPopper } from "@popperjs/core";
 import useResizeObserver from "../../hooks/__internal__/useResizeObserver";
-import StyledBackdrop from "./popover.style";
+import { StyledBackdrop, StyledPopoverContent } from "./popover.style";
 import CarbonScopedTokensProvider from "../../style/design-tokens/carbon-scoped-tokens-provider/carbon-scoped-tokens-provider.component";
 import { ModalContext } from "../../components/modal/modal.component";
 
@@ -14,12 +14,12 @@ const Popover = ({
   reference,
   onFirstUpdate,
   modifiers,
-  disableBackgroundUI
+  disableBackgroundUI,
+  isOpen = true
 }) => {
   var _reference$current;
 
-  const elementDOM = useRef(null); // TODO: Remove TempModalContext after modal has been converted to TS
-
+  const elementDOM = useRef(null);
   const {
     isInModal
   } = useContext(ModalContext);
@@ -52,6 +52,13 @@ const Popover = ({
 
     popperInstance === null || popperInstance === void 0 ? void 0 : (_popperInstance$curre = popperInstance.current) === null || _popperInstance$curre === void 0 ? void 0 : _popperInstance$curre.update();
   });
+  useEffect(() => {
+    if (isOpen) {
+      var _popperInstance$curre2;
+
+      popperInstance === null || popperInstance === void 0 ? void 0 : (_popperInstance$curre2 = popperInstance.current) === null || _popperInstance$curre2 === void 0 ? void 0 : _popperInstance$curre2.update();
+    }
+  }, [isOpen]);
   useLayoutEffect(() => {
     if (reference.current) {
       popperInstance.current = createPopper(reference.current, popperElementRef.current, {
@@ -82,6 +89,9 @@ const Popover = ({
       }
     };
   }, [disablePortal, mountNode]);
+  content = /*#__PURE__*/React.createElement(StyledPopoverContent, {
+    isOpen: isOpen
+  }, content);
 
   if (disableBackgroundUI) {
     content = /*#__PURE__*/React.createElement(StyledBackdrop, null, content);
@@ -98,6 +108,7 @@ Popover.propTypes = {
   "children": PropTypes.element.isRequired,
   "disableBackgroundUI": PropTypes.bool,
   "disablePortal": PropTypes.bool,
+  "isOpen": PropTypes.bool,
   "modifiers": PropTypes.arrayOf(PropTypes.shape({
     "enabled": PropTypes.bool,
     "name": PropTypes.string.isRequired,

package/esm/__internal__/popover/popover.style.d.ts

@@ -1,2 +1,6 @@
-declare const StyledBackdrop: import("styled-components").StyledComponent<"div", any, {}, never>;
-export default StyledBackdrop;
+export declare const StyledBackdrop: import("styled-components").StyledComponent<"div", any, {}, never>;
+declare type StyledPopoverContentProps = {
+    isOpen?: boolean;
+};
+export declare const StyledPopoverContent: import("styled-components").StyledComponent<"div", any, StyledPopoverContentProps, never>;
+export {};

package/esm/__internal__/popover/popover.style.js

@@ -1,6 +1,6 @@
 import styled from "styled-components";
 import baseTheme from "../../style/themes/base";
-const StyledBackdrop = styled.div`
+export const StyledBackdrop = styled.div`
   bottom: 0;
   left: 0;
   position: fixed;
@@ -14,4 +14,8 @@ const StyledBackdrop = styled.div`
 StyledBackdrop.defaultProps = {
   theme: baseTheme
 };
-export default StyledBackdrop;
+export const StyledPopoverContent = styled.div`
+  ${({
+  isOpen
+}) => !isOpen && "display: none;"}
+`;

package/esm/__internal__/radio-button-mapper/index.d.ts

@@ -0,0 +1,2 @@
+export { default } from "./radio-button-mapper";
+export * from "./radio-button-mapper";

package/esm/__internal__/radio-button-mapper/index.js

@@ -0,0 +1 @@
+export { default } from "./radio-button-mapper.component";

package/esm/__internal__/radio-button-mapper/radio-button-mapper.d.ts

@@ -0,0 +1,21 @@
+import React from "react";
+
+export interface RadioButtonMapperProps {
+  /** The RadioButton objects to be rendered in the group */
+  children?: React.ReactNode;
+  /** Specifies the name prop to be applied to each button in the group */
+  name: string;
+  /** Callback fired when each RadioButton is blurred */
+  onBlur?: (ev: React.FocusEvent<HTMLInputElement>) => void;
+  /** Callback fired when the user selects a RadioButton */
+  onChange?: (ev: React.ChangeEvent<HTMLInputElement>) => void;
+  /** Callback fired on key down */
+  onKeyDown?: (ev: React.KeyboardEvent<HTMLInputElement>) => void;
+  /** Value of the selected RadioButton */
+  value?: string;
+}
+
+declare function RadioButtonMapper(props?: RadioButtonMapperProps): JSX.Element;
+RadioButtonMapper.displayName = "RadioButtonMapper";
+
+export default RadioButtonMapper;

package/esm/__internal__/sticky-footer/index.d.ts

@@ -0,0 +1 @@
+export { default } from "./sticky-footer.component";

package/esm/__internal__/sticky-footer/sticky-footer.component.d.ts

@@ -0,0 +1,15 @@
+export default StickyFooter;
+declare function StickyFooter({ children, containerRef, disableSticky, ...rest }: {
+    [x: string]: any;
+    children: any;
+    containerRef: any;
+    disableSticky: any;
+}): JSX.Element;
+declare namespace StickyFooter {
+    namespace propTypes {
+        const children: PropTypes.Validator<string | number | boolean | PropTypes.ReactElementLike | PropTypes.ReactNodeArray>;
+        const containerRef: PropTypes.Validator<any>;
+        const disableSticky: PropTypes.Requireable<boolean>;
+    }
+}
+import PropTypes from "prop-types";

package/esm/__internal__/sticky-footer/sticky-footer.style.d.ts

@@ -0,0 +1,2 @@
+export default StyledStickyFooter;
+declare const StyledStickyFooter: import("styled-components").StyledComponent<"div", any, {}, never>;

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

@@ -1 +1,2 @@
 export { default } from "./tags";
+export type { TagProps } from "./tags";

package/esm/__spec_helper__/mock-resize-observer.d.ts

@@ -1,2 +1,2 @@
+declare const setupResizeObserverMock: () => void;
 export default setupResizeObserverMock;
-declare function setupResizeObserverMock(): void;

package/esm/__spec_helper__/mock-resize-observer.js

@@ -1,9 +1,9 @@
 const setupResizeObserverMock = () => {
-  if (!global.window) {
+  if (!window) {
     return;
   }
 
-  global.window.ResizeObserver = global.window.ResizeObserver || jest.fn().mockImplementation(() => ({
+  window.ResizeObserver = window.ResizeObserver || jest.fn().mockImplementation(() => ({
     disconnect: jest.fn(),
     observe: jest.fn(),
     unobserve: jest.fn()

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

@@ -2,8 +2,8 @@ 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;
+    /** Text to display for the button. */
+    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. */
@@ -18,7 +18,7 @@ export interface ButtonToggleProps extends ButtonToggleInputProps, Partial<Style
     onClick?: (ev: React.MouseEvent<HTMLInputElement>) => void;
 }
 export declare const ButtonToggle: {
-    (props: ButtonToggleProps): JSX.Element;
+    ({ "aria-label": ariaLabel, "aria-labelledby": ariaLabelledBy, buttonIcon, buttonIconSize, checked, children, "data-component": dataComponent, "data-element": dataElement, "data-role": dataRole, disabled, grouped, name, onBlur, onChange, onFocus, size, value, }: ButtonToggleProps): JSX.Element;
     displayName: string;
 };
 export default ButtonToggle;

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

@@ -1,31 +1,32 @@
 import React, { useContext, useRef } from "react";
 import PropTypes from "prop-types";
+import invariant from "invariant";
 import { StyledButtonToggle, StyledButtonToggleLabel, StyledButtonToggleContentWrapper } from "./button-toggle.style";
 import guid from "../../__internal__/utils/helpers/guid";
 import ButtonToggleIcon from "./button-toggle-icon.component";
 import ButtonToggleInput from "./button-toggle-input.component";
 import { InputGroupContext } from "../../__internal__/input-behaviour";
 
-const ButtonToggle = props => {
-  const {
-    "aria-label": ariaLabel,
-    "aria-labelledby": ariaLabelledBy,
-    buttonIcon,
-    buttonIconSize = "small",
-    checked,
-    children,
-    "data-component": dataComponent,
-    "data-element": dataElement,
-    "data-role": dataRole,
-    disabled,
-    grouped,
-    name,
-    onBlur,
-    onChange,
-    onFocus,
-    size = "medium",
-    value
-  } = props;
+const ButtonToggle = ({
+  "aria-label": ariaLabel,
+  "aria-labelledby": ariaLabelledBy,
+  buttonIcon,
+  buttonIconSize = "small",
+  checked,
+  children,
+  "data-component": dataComponent,
+  "data-element": dataElement,
+  "data-role": dataRole,
+  disabled,
+  grouped,
+  name,
+  onBlur,
+  onChange,
+  onFocus,
+  size = "medium",
+  value
+}) => {
+  !!!(children || buttonIcon) ? process.env.NODE_ENV !== "production" ? invariant(false, "Either prop `buttonIcon` must be defined, or this node must have children") : invariant(false) : void 0;
   const {
     onMouseEnter,
     onMouseLeave

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

@@ -2,7 +2,7 @@ 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. */
+    /** The icon to be rendered inside of the button */
     buttonIcon?: IconType;
     /** Sets the size of the buttonIcon (eg. large) */
     buttonIconSize?: ButtonToggleIconSizes;

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

@@ -0,0 +1,45 @@
+import React from "react";
+import { MarginProps } from "styled-system";
+import { ValidationProps } from "../../__internal__/validations";
+import { TagProps } from "../../__internal__/utils/helpers/tags";
+export interface ButtonToggleGroupProps extends ValidationProps, MarginProps, TagProps {
+    /** Unique id for the root element of the component */
+    id: string;
+    /** Specifies the name prop to be applied to each button in the group */
+    name: string;
+    /** Togglable buttons to be rendered. Only accepts children of type ButtonToggle */
+    children?: React.ReactNode;
+    /** When true, validation icon will be placed on label instead of being placed on the input */
+    validationOnLabel?: boolean;
+    /** Text for the label. */
+    label?: string;
+    /** Text for the labels help tooltip. */
+    labelHelp?: React.ReactNode;
+    /** Spacing between label and a field for inline label, given number will be multiplied by base spacing unit (8) */
+    labelSpacing?: 1 | 2;
+    /** The percentage width of the ButtonToggleGroup. */
+    inputWidth?: number | string;
+    /** The text for the field help. */
+    fieldHelp?: string;
+    /** Sets the field help to inline. */
+    fieldHelpInline?: boolean;
+    /** Sets the label to be inline. */
+    labelInline?: boolean;
+    /** The percentage width of the label. */
+    labelWidth?: number;
+    /** The alignment for the text in the label. */
+    labelAlign?: "left" | "right";
+    /** 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;
+    /** The value of the Button Toggle Group */
+    value?: string;
+    /** Aria label for rendered help component */
+    helpAriaLabel?: string;
+}
+declare const ButtonToggleGroup: {
+    ({ children, name, error, warning, info, validationOnLabel, label, labelHelp, labelSpacing, inputWidth, fieldHelp, fieldHelpInline, labelInline, labelWidth, labelAlign, onChange, onBlur, value, "data-component": dataComponent, "data-element": dataElement, "data-role": dataRole, helpAriaLabel, id, ...props }: ButtonToggleGroupProps): JSX.Element;
+    displayName: string;
+};
+export default ButtonToggleGroup;

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

@@ -1,17 +1,16 @@
 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 React, { useMemo } from "react";
 import PropTypes from "prop-types";
-import styledSystemPropTypes from "@styled-system/prop-types";
+import invariant from "invariant";
 import FormField from "../../__internal__/form-field";
-import ButtonToggleGroupStyle from "./button-toggle-group.style";
+import StyledButtonToggleGroup from "./button-toggle-group.style";
 import ButtonToggle from "../button-toggle";
-import RadioButtonMapper from "../../__internal__/radio-button-mapper/radio-button-mapper.component";
+import RadioButtonMapper from "../../__internal__/radio-button-mapper";
 import ValidationIcon from "../../__internal__/validations/validation-icon.component";
 import { InputGroupBehaviour } from "../../__internal__/input-behaviour";
 import { filterStyledSystemMarginProps } from "../../style/utils";
 import { TooltipProvider } from "../../__internal__/tooltip-provider";
-const marginPropTypes = filterStyledSystemMarginProps(styledSystemPropTypes.space);
 
 const ButtonToggleGroup = ({
   children,
@@ -44,6 +43,13 @@ const ButtonToggleGroup = ({
     warning,
     info
   };
+  const hasCorrectItemStructure = useMemo(() => {
+    const incorrectChild = React.Children.toArray(children).find(child => {
+      return ! /*#__PURE__*/React.isValidElement(child) || child.type.displayName !== ButtonToggle.displayName;
+    });
+    return !incorrectChild;
+  }, [children]);
+  !hasCorrectItemStructure ? process.env.NODE_ENV !== "production" ? invariant(false, `\`ButtonToggleGroup\` only accepts children of type \`${ButtonToggle.displayName}\``) : invariant(false) : void 0;
   return /*#__PURE__*/React.createElement(TooltipProvider, {
     helpAriaLabel: helpAriaLabel
   }, /*#__PURE__*/React.createElement(InputGroupBehaviour, null, /*#__PURE__*/React.createElement(FormField, _extends({
@@ -60,7 +66,7 @@ const ButtonToggleGroup = ({
     "data-role": dataRole,
     "data-element": dataElement,
     id: id
-  }, validationProps, filterStyledSystemMarginProps(props)), /*#__PURE__*/React.createElement(ButtonToggleGroupStyle, _extends({
+  }, validationProps, filterStyledSystemMarginProps(props)), /*#__PURE__*/React.createElement(StyledButtonToggleGroup, _extends({
     "aria-label": label,
     role: "radiogroup",
     inputWidth: inputWidth
@@ -74,95 +80,184 @@ const ButtonToggleGroup = ({
   }))))));
 };
 
-ButtonToggleGroup.propTypes = { ...marginPropTypes,
-
-  /** Identifier used for testing purposes, applied to the root element of the component. */
+ButtonToggleGroup.propTypes = {
+  "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,
-
-  /** Unique id for the root element of the component */
-  id: PropTypes.string.isRequired,
-
-  /** Specifies the name prop to be applied to each button in the group */
-  name: PropTypes.string.isRequired,
-
-  /** Togglable buttons to be rendered. Only accepts children of type ButtonToggle */
-  children: (props, propName, componentName) => {
-    let error;
-    const prop = props[propName];
-    React.Children.forEach(prop, child => {
-      if (!child) {
-        return;
-      }
-
-      if (ButtonToggle.displayName !== child.type.displayName) {
-        error = new Error(`\`${componentName}\` only accepts children of type \`${ButtonToggle.displayName}\`.`);
-      }
-    });
-    return error;
-  },
-
-  /** Indicate that error has occurred
-  Pass string to display icon, tooltip and red border
-  Pass true boolean to only display red border */
-  error: PropTypes.oneOfType([PropTypes.bool, PropTypes.string]),
-
-  /** Indicate that warning has occurred
-  Pass string to display icon, tooltip and orange border
-  Pass true boolean to only display orange border */
-  warning: PropTypes.oneOfType([PropTypes.bool, PropTypes.string]),
-
-  /** Indicate additional information
-  Pass string to display icon, tooltip and blue border
-  Pass true boolean to only display blue border */
-  info: PropTypes.oneOfType([PropTypes.bool, PropTypes.string]),
-
-  /** When true, validation icon will be placed on label instead of being placed on the input */
-  validationOnLabel: PropTypes.bool,
-
-  /** Text for the label. */
-  label: PropTypes.string,
-
-  /** Text for the labels help tooltip. */
-  labelHelp: PropTypes.node,
-
-  /** Spacing between label and a field for inline label, given number will be multiplied by base spacing unit (8) */
-  labelSpacing: PropTypes.oneOf([1, 2]),
-
-  /** The percentage width of the ButtonToggleGroup. */
-  inputWidth: PropTypes.number,
-
-  /** The text for the field help. */
-  fieldHelp: PropTypes.string,
-
-  /** Sets the field help to inline. */
-  fieldHelpInline: PropTypes.bool,
-
-  /** Sets the label to be inline. */
-  labelInline: PropTypes.bool,
-
-  /** The percentage width of the label. */
-  labelWidth: PropTypes.number,
-
-  /** The alignment for the text in the label. */
-  labelAlign: PropTypes.string,
-
-  /** Callback fired when each RadioButton is blurred */
-  onBlur: PropTypes.func,
-
-  /** callback to handle change event */
-  onChange: PropTypes.func,
-
-  /** The value of the Button Toggle Group */
-  value: PropTypes.string,
-
-  /** Aria label for rendered help component */
-  helpAriaLabel: PropTypes.string
+  "error": PropTypes.oneOfType([PropTypes.string, PropTypes.bool]),
+  "fieldHelp": PropTypes.string,
+  "fieldHelpInline": PropTypes.bool,
+  "helpAriaLabel": PropTypes.string,
+  "id": PropTypes.string.isRequired,
+  "info": PropTypes.oneOfType([PropTypes.string, PropTypes.bool]),
+  "inputWidth": PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
+  "label": PropTypes.string,
+  "labelAlign": PropTypes.oneOf(["left", "right"]),
+  "labelHelp": PropTypes.node,
+  "labelInline": PropTypes.bool,
+  "labelSpacing": PropTypes.oneOf([1, 2]),
+  "labelWidth": PropTypes.number,
+  "m": PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.oneOf([null]), PropTypes.number, PropTypes.shape({
+    "__@toStringTag": PropTypes.string.isRequired,
+    "description": PropTypes.string,
+    "toString": PropTypes.func.isRequired,
+    "valueOf": PropTypes.func.isRequired
+  }), PropTypes.string])), PropTypes.number, PropTypes.object, PropTypes.shape({
+    "__@toStringTag": PropTypes.string.isRequired,
+    "description": PropTypes.string,
+    "toString": PropTypes.func.isRequired,
+    "valueOf": PropTypes.func.isRequired
+  }), PropTypes.string]),
+  "margin": PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.oneOf([null]), PropTypes.number, PropTypes.shape({
+    "__@toStringTag": PropTypes.string.isRequired,
+    "description": PropTypes.string,
+    "toString": PropTypes.func.isRequired,
+    "valueOf": PropTypes.func.isRequired
+  }), PropTypes.string])), PropTypes.number, PropTypes.object, PropTypes.shape({
+    "__@toStringTag": PropTypes.string.isRequired,
+    "description": PropTypes.string,
+    "toString": PropTypes.func.isRequired,
+    "valueOf": PropTypes.func.isRequired
+  }), PropTypes.string]),
+  "marginBottom": PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.oneOf([null]), PropTypes.number, PropTypes.shape({
+    "__@toStringTag": PropTypes.string.isRequired,
+    "description": PropTypes.string,
+    "toString": PropTypes.func.isRequired,
+    "valueOf": PropTypes.func.isRequired
+  }), PropTypes.string])), PropTypes.number, PropTypes.object, PropTypes.shape({
+    "__@toStringTag": PropTypes.string.isRequired,
+    "description": PropTypes.string,
+    "toString": PropTypes.func.isRequired,
+    "valueOf": PropTypes.func.isRequired
+  }), PropTypes.string]),
+  "marginLeft": PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.oneOf([null]), PropTypes.number, PropTypes.shape({
+    "__@toStringTag": PropTypes.string.isRequired,
+    "description": PropTypes.string,
+    "toString": PropTypes.func.isRequired,
+    "valueOf": PropTypes.func.isRequired
+  }), PropTypes.string])), PropTypes.number, PropTypes.object, PropTypes.shape({
+    "__@toStringTag": PropTypes.string.isRequired,
+    "description": PropTypes.string,
+    "toString": PropTypes.func.isRequired,
+    "valueOf": PropTypes.func.isRequired
+  }), PropTypes.string]),
+  "marginRight": PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.oneOf([null]), PropTypes.number, PropTypes.shape({
+    "__@toStringTag": PropTypes.string.isRequired,
+    "description": PropTypes.string,
+    "toString": PropTypes.func.isRequired,
+    "valueOf": PropTypes.func.isRequired
+  }), PropTypes.string])), PropTypes.number, PropTypes.object, PropTypes.shape({
+    "__@toStringTag": PropTypes.string.isRequired,
+    "description": PropTypes.string,
+    "toString": PropTypes.func.isRequired,
+    "valueOf": PropTypes.func.isRequired
+  }), PropTypes.string]),
+  "marginTop": PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.oneOf([null]), PropTypes.number, PropTypes.shape({
+    "__@toStringTag": PropTypes.string.isRequired,
+    "description": PropTypes.string,
+    "toString": PropTypes.func.isRequired,
+    "valueOf": PropTypes.func.isRequired
+  }), PropTypes.string])), PropTypes.number, PropTypes.object, PropTypes.shape({
+    "__@toStringTag": PropTypes.string.isRequired,
+    "description": PropTypes.string,
+    "toString": PropTypes.func.isRequired,
+    "valueOf": PropTypes.func.isRequired
+  }), PropTypes.string]),
+  "marginX": PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.oneOf([null]), PropTypes.number, PropTypes.shape({
+    "__@toStringTag": PropTypes.string.isRequired,
+    "description": PropTypes.string,
+    "toString": PropTypes.func.isRequired,
+    "valueOf": PropTypes.func.isRequired
+  }), PropTypes.string])), PropTypes.number, PropTypes.object, PropTypes.shape({
+    "__@toStringTag": PropTypes.string.isRequired,
+    "description": PropTypes.string,
+    "toString": PropTypes.func.isRequired,
+    "valueOf": PropTypes.func.isRequired
+  }), PropTypes.string]),
+  "marginY": PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.oneOf([null]), PropTypes.number, PropTypes.shape({
+    "__@toStringTag": PropTypes.string.isRequired,
+    "description": PropTypes.string,
+    "toString": PropTypes.func.isRequired,
+    "valueOf": PropTypes.func.isRequired
+  }), PropTypes.string])), PropTypes.number, PropTypes.object, PropTypes.shape({
+    "__@toStringTag": PropTypes.string.isRequired,
+    "description": PropTypes.string,
+    "toString": PropTypes.func.isRequired,
+    "valueOf": PropTypes.func.isRequired
+  }), PropTypes.string]),
+  "mb": PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.oneOf([null]), PropTypes.number, PropTypes.shape({
+    "__@toStringTag": PropTypes.string.isRequired,
+    "description": PropTypes.string,
+    "toString": PropTypes.func.isRequired,
+    "valueOf": PropTypes.func.isRequired
+  }), PropTypes.string])), PropTypes.number, PropTypes.object, PropTypes.shape({
+    "__@toStringTag": PropTypes.string.isRequired,
+    "description": PropTypes.string,
+    "toString": PropTypes.func.isRequired,
+    "valueOf": PropTypes.func.isRequired
+  }), PropTypes.string]),
+  "ml": PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.oneOf([null]), PropTypes.number, PropTypes.shape({
+    "__@toStringTag": PropTypes.string.isRequired,
+    "description": PropTypes.string,
+    "toString": PropTypes.func.isRequired,
+    "valueOf": PropTypes.func.isRequired
+  }), PropTypes.string])), PropTypes.number, PropTypes.object, PropTypes.shape({
+    "__@toStringTag": PropTypes.string.isRequired,
+    "description": PropTypes.string,
+    "toString": PropTypes.func.isRequired,
+    "valueOf": PropTypes.func.isRequired
+  }), PropTypes.string]),
+  "mr": PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.oneOf([null]), PropTypes.number, PropTypes.shape({
+    "__@toStringTag": PropTypes.string.isRequired,
+    "description": PropTypes.string,
+    "toString": PropTypes.func.isRequired,
+    "valueOf": PropTypes.func.isRequired
+  }), PropTypes.string])), PropTypes.number, PropTypes.object, PropTypes.shape({
+    "__@toStringTag": PropTypes.string.isRequired,
+    "description": PropTypes.string,
+    "toString": PropTypes.func.isRequired,
+    "valueOf": PropTypes.func.isRequired
+  }), PropTypes.string]),
+  "mt": PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.oneOf([null]), PropTypes.number, PropTypes.shape({
+    "__@toStringTag": PropTypes.string.isRequired,
+    "description": PropTypes.string,
+    "toString": PropTypes.func.isRequired,
+    "valueOf": PropTypes.func.isRequired
+  }), PropTypes.string])), PropTypes.number, PropTypes.object, PropTypes.shape({
+    "__@toStringTag": PropTypes.string.isRequired,
+    "description": PropTypes.string,
+    "toString": PropTypes.func.isRequired,
+    "valueOf": PropTypes.func.isRequired
+  }), PropTypes.string]),
+  "mx": PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.oneOf([null]), PropTypes.number, PropTypes.shape({
+    "__@toStringTag": PropTypes.string.isRequired,
+    "description": PropTypes.string,
+    "toString": PropTypes.func.isRequired,
+    "valueOf": PropTypes.func.isRequired
+  }), PropTypes.string])), PropTypes.number, PropTypes.object, PropTypes.shape({
+    "__@toStringTag": PropTypes.string.isRequired,
+    "description": PropTypes.string,
+    "toString": PropTypes.func.isRequired,
+    "valueOf": PropTypes.func.isRequired
+  }), PropTypes.string]),
+  "my": PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.oneOf([null]), PropTypes.number, PropTypes.shape({
+    "__@toStringTag": PropTypes.string.isRequired,
+    "description": PropTypes.string,
+    "toString": PropTypes.func.isRequired,
+    "valueOf": PropTypes.func.isRequired
+  }), PropTypes.string])), PropTypes.number, PropTypes.object, PropTypes.shape({
+    "__@toStringTag": PropTypes.string.isRequired,
+    "description": PropTypes.string,
+    "toString": PropTypes.func.isRequired,
+    "valueOf": PropTypes.func.isRequired
+  }), PropTypes.string]),
+  "name": PropTypes.string.isRequired,
+  "onBlur": PropTypes.func,
+  "onChange": PropTypes.func,
+  "validationOnLabel": PropTypes.bool,
+  "value": PropTypes.string,
+  "warning": PropTypes.oneOfType([PropTypes.string, PropTypes.bool])
 };
 ButtonToggleGroup.displayName = "ButtonToggleGroup";
 export default ButtonToggleGroup;

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

@@ -0,0 +1,4 @@
+import { ButtonToggleGroupProps } from ".";
+import { ValidationProps } from "../../__internal__/validations";
+declare const StyledButtonToggleGroup: import("styled-components").StyledComponent<"div", any, ValidationProps & Pick<ButtonToggleGroupProps, "inputWidth">, never>;
+export default StyledButtonToggleGroup;