carbon-react 110.3.0 → 110.4.0

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__/utils/helpers/tags/index.d.ts

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

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;

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

@@ -1,7 +1,7 @@
 import styled, { css } from "styled-components";
 import { StyledButtonToggleLabel } from "../button-toggle/button-toggle.style";
 import ValidationIconStyle from "../../__internal__/validations/validation-icon.style";
-const ButtonToggleGroupStyle = styled.div`
+const StyledButtonToggleGroup = styled.div`
   display: flex;
 
   ${({
@@ -34,4 +34,4 @@ const ButtonToggleGroupStyle = styled.div`
     margin-left: 4px;
   }
 `;
-export default ButtonToggleGroupStyle;
+export default StyledButtonToggleGroup;

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

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

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

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

package/lib/{components/button-toggle-group/documentation → __internal__/radio-button-mapper}/index.js

@@ -6,10 +6,10 @@ Object.defineProperty(exports, "__esModule", {
 Object.defineProperty(exports, "default", {
   enumerable: true,
   get: function () {
-    return _notes.default;
+    return _radioButtonMapper.default;
   }
 });
 
-var _notes = _interopRequireDefault(require("./notes.md"));
+var _radioButtonMapper = _interopRequireDefault(require("./radio-button-mapper.component"));
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }

package/lib/__internal__/radio-button-mapper/package.json

@@ -0,0 +1,6 @@
+{
+  "sideEffects": false,
+  "module": "../../../esm/__internal__/radio-button-mapper/index.js",
+  "main": "./index.js",
+  "types": "./index.d.ts"
+}

package/lib/__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/lib/__internal__/utils/helpers/tags/index.d.ts

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

package/lib/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/lib/components/button-toggle/button-toggle.component.js

@@ -9,6 +9,8 @@ var _react = _interopRequireWildcard(require("react"));
 
 var _propTypes = _interopRequireDefault(require("prop-types"));
 
+var _invariant = _interopRequireDefault(require("invariant"));
+
 var _buttonToggle = require("./button-toggle.style");
 
 var _guid = _interopRequireDefault(require("../../__internal__/utils/helpers/guid"));
@@ -25,26 +27,26 @@ function _getRequireWildcardCache() { if (typeof WeakMap !== "function") return
 
 function _interopRequireWildcard(obj) { if (obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
 
-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" ? (0, _invariant.default)(false, "Either prop `buttonIcon` must be defined, or this node must have children") : (0, _invariant.default)(false) : void 0;
   const {
     onMouseEnter,
     onMouseLeave