carbon-react 111.12.4 → 111.12.6

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

@@ -1,6 +1,8 @@
 import React from "react";
 export interface CommonInputProps extends Omit<React.InputHTMLAttributes<HTMLInputElement>, "type"> {
     align?: "right" | "left";
+    /** Override the variant component */
+    as?: React.ElementType;
     /** If true the Component will be focused when rendered */
     autoFocus?: boolean;
     /** If true, the component will be disabled */
@@ -29,10 +31,14 @@ export interface CommonInputProps extends Omit<React.InputHTMLAttributes<HTMLInp
     required?: boolean;
 }
 export interface InputProps extends CommonInputProps {
+    /** The visible width of the text control, in average character widths */
+    cols?: number;
     /** Integer to determine a timeout for the defered callback */
     deferTimeout?: number;
     /** Defered callback to be called after the onChange event */
     onChangeDeferred?: (ev: React.ChangeEvent<HTMLInputElement>) => void;
+    /** The number of visible text lines for the control */
+    rows?: number;
     /** HTML type attribute of the input */
     type?: string;
 }

package/esm/__internal__/input/input.component.js

@@ -208,6 +208,7 @@ Input.propTypes = {
   "aria-valuemin": PropTypes.number,
   "aria-valuenow": PropTypes.number,
   "aria-valuetext": PropTypes.string,
+  "as": PropTypes.elementType,
   "autoCapitalize": PropTypes.string,
   "autoComplete": PropTypes.string,
   "autoCorrect": PropTypes.string,
@@ -218,6 +219,7 @@ Input.propTypes = {
   "children": PropTypes.node,
   "className": PropTypes.string,
   "color": PropTypes.string,
+  "cols": PropTypes.number,
   "contentEditable": PropTypes.oneOfType([PropTypes.oneOf(["false", "inherit", "true"]), PropTypes.bool]),
   "contextMenu": PropTypes.string,
   "crossOrigin": PropTypes.string,
@@ -482,6 +484,7 @@ Input.propTypes = {
     "trimStart": PropTypes.func.isRequired,
     "valueOf": PropTypes.func.isRequired
   })]),
+  "rows": PropTypes.number,
   "security": PropTypes.string,
   "size": PropTypes.number,
   "slot": PropTypes.string,

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

@@ -1,2 +1,2 @@
-export { default } from "./radio-button-mapper";
-export * from "./radio-button-mapper";
+export { default } from "./radio-button-mapper.component";
+export type { RadioButtonMapperProps, MappedChildProps, } from "./radio-button-mapper.component";

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

@@ -0,0 +1,29 @@
+import React from "react";
+interface InputEvents {
+    /** Callback fired when each RadioButton is blurred */
+    onBlur?: (event: React.FocusEvent<HTMLInputElement>) => void;
+    /** Callback fired when the user selects a RadioButton */
+    onChange?: (event: React.ChangeEvent<HTMLInputElement>) => void;
+    /** Callback fired on mouse down */
+    onMouseDown?: (event: React.MouseEvent<HTMLInputElement>) => void;
+    /** Callback fired on key down */
+    onKeyDown?: (event: React.KeyboardEvent<HTMLInputElement>) => void;
+}
+export interface RadioButtonMapperProps extends InputEvents {
+    /** 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;
+    /** Value of the selected RadioButton */
+    value?: string;
+}
+export interface MappedChildProps {
+    defaultChecked?: boolean;
+    checked: boolean;
+    name: string;
+}
+declare const RadioButtonMapper: {
+    ({ children, name, onBlur, onChange, onMouseDown, onKeyDown, value, }: RadioButtonMapperProps): JSX.Element;
+    displayName: string;
+};
+export default RadioButtonMapper;

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

@@ -14,7 +14,7 @@ const RadioButtonMapper = ({
   const anyChecked = useMemo(() => {
     let result = false;
     filteredChildren.forEach(child => {
-      if (Object.prototype.hasOwnProperty.call(child.props, "defaultChecked")) {
+      if ( /*#__PURE__*/React.isValidElement(child) && Object.prototype.hasOwnProperty.call(child.props, "defaultChecked")) {
         result = true;
       }
     });
@@ -22,18 +22,21 @@ const RadioButtonMapper = ({
   }, [filteredChildren]);
   const isControlled = value !== undefined;
   const [checkedValue, setCheckedValue] = useState(false);
-  const onChangeProp = useCallback(e => {
-    if (onChange) {
-      onChange(e);
-    }
+  const onChangeProp = useCallback(event => {
+    onChange === null || onChange === void 0 ? void 0 : onChange(event);
+    /* istanbul ignore else */
 
     if (!isControlled) {
-      setCheckedValue(e.target.value);
+      setCheckedValue(event.target.value);
     }
   }, [onChange, setCheckedValue, isControlled]);
   const buttons = filteredChildren.map(child => {
     let checked;
 
+    if (! /*#__PURE__*/React.isValidElement(child)) {
+      return child;
+    }
+
     if (isControlled) {
       // The user is controlling the input via the value prop
       checked = value === child.props.value;
@@ -45,7 +48,7 @@ const RadioButtonMapper = ({
       checked = checkedValue === child.props.value;
     }
 
-    return /*#__PURE__*/React.cloneElement(child, {
+    const childProps = {
       defaultChecked: undefined,
       checked,
       name,
@@ -53,29 +56,20 @@ const RadioButtonMapper = ({
       onMouseDown,
       onChange: onChangeProp,
       onKeyDown
-    });
+    };
+    return /*#__PURE__*/React.cloneElement(child, childProps);
   });
-  return buttons;
+  return /*#__PURE__*/React.createElement(React.Fragment, null, buttons);
 };
 
 RadioButtonMapper.propTypes = {
-  /** The RadioButton objects to be rendered in the group */
-  children: PropTypes.node,
-
-  /** Specifies the name prop to be applied to each button in the group */
-  name: PropTypes.string.isRequired,
-
-  /** Callback fired when each RadioButton is blurred */
-  onBlur: PropTypes.func,
-
-  /** Callback fired when the user selects a RadioButton */
-  onChange: PropTypes.func,
-
-  /** Callback fired on key down */
-  onKeyDown: PropTypes.func,
-
-  /** Value of the selected RadioButton */
-  value: PropTypes.string
+  "children": PropTypes.node,
+  "name": PropTypes.string.isRequired,
+  "onBlur": PropTypes.func,
+  "onChange": PropTypes.func,
+  "onKeyDown": PropTypes.func,
+  "onMouseDown": PropTypes.func,
+  "value": PropTypes.string
 };
 RadioButtonMapper.displayName = "RadioButtonMapper";
 export default RadioButtonMapper;

package/esm/components/checkbox/checkbox.style.d.ts

@@ -1,6 +1,6 @@
 import { MarginProps } from "styled-system";
 import { ValidationProps } from "../../__internal__/validations";
-interface StyledCheckboxProps extends ValidationProps, MarginProps {
+export interface StyledCheckboxProps extends ValidationProps, MarginProps {
     disabled?: boolean;
     fieldHelpInline?: boolean;
     inputWidth?: number | string;

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

@@ -289,7 +289,9 @@ const DateInput = ({
     "data-component": dataComponent || "date",
     "data-element": dataElement,
     "data-role": dataRole
-  }, filterStyledSystemMarginProps(rest)), /*#__PURE__*/React.createElement(Textbox, _extends({}, filterOutStyledSystemSpacingProps(rest), {
+  }, filterStyledSystemMarginProps(rest), {
+    applyDateRangeStyling: !!inputRefMap
+  }), /*#__PURE__*/React.createElement(Textbox, _extends({}, filterOutStyledSystemSpacingProps(rest), {
     value: computedValue(),
     onBlur: handleBlur,
     onChange: handleChange,

package/esm/components/date/date.style.js

@@ -1,9 +1,12 @@
-import styled from "styled-components";
+import styled, { css } from "styled-components";
 import PropTypes from "prop-types";
 import { margin } from "styled-system";
 import baseTheme from "../../style/themes/base";
 import StyledInput from "../../__internal__/input/input.style";
 import StyledInputPresentation from "../../__internal__/input/input-presentation.style";
+import { FieldLineStyle } from "../../__internal__/form-field/form-field.style";
+import StyledValidationMessage from "../../__internal__/validation-message/validation-message.style";
+import StyledLabel from "../../__internal__/label/label.style";
 const datePickerWidth = {
   large: "140px",
   medium: "135px",
@@ -22,6 +25,20 @@ const StyledDateInput = styled.div`
       margin-right: -8px;
     }
   }
+
+  ${({
+  applyDateRangeStyling,
+  size,
+  labelInline
+}) => applyDateRangeStyling && !labelInline && css`
+      ${FieldLineStyle} {
+        max-width: ${datePickerWidth[size]};
+      }
+
+      ${StyledValidationMessage}, ${StyledLabel} {
+        overflow-wrap: anywhere;
+      }
+    `}
 `;
 StyledDateInput.propTypes = {
   size: PropTypes.oneOf(["small", "medium", "large"])

package/esm/components/decimal/decimal.component.js

@@ -259,6 +259,7 @@ Decimal.propTypes = {
   "aria-valuemin": PropTypes.number,
   "aria-valuenow": PropTypes.number,
   "aria-valuetext": PropTypes.string,
+  "as": PropTypes.elementType,
   "autoCapitalize": PropTypes.string,
   "autoComplete": PropTypes.string,
   "autoCorrect": PropTypes.string,

package/esm/components/grouped-character/grouped-character.component.js

@@ -174,6 +174,7 @@ GroupedCharacter.propTypes = {
   "aria-valuemin": PropTypes.number,
   "aria-valuenow": PropTypes.number,
   "aria-valuetext": PropTypes.string,
+  "as": PropTypes.elementType,
   "autoCapitalize": PropTypes.string,
   "autoComplete": PropTypes.string,
   "autoCorrect": PropTypes.string,

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

@@ -1,6 +1,4 @@
-export {
-  default,
-  default as RadioButton,
-  PrivateRadioButton,
-} from "./radio-button";
-export { default as RadioButtonGroup } from "./radio-button-group";
+import RadioButton from "./radio-button.component";
+import RadioButtonGroup from "./radio-button-group.component";
+export { RadioButton, RadioButtonGroup };
+export default RadioButton;

package/esm/components/radio-button/index.js

@@ -1,4 +1,4 @@
-import RadioButton, { PrivateRadioButton } from "./radio-button.component";
+import RadioButton from "./radio-button.component";
 import RadioButtonGroup from "./radio-button-group.component";
-export { RadioButton, RadioButtonGroup, PrivateRadioButton };
+export { RadioButton, RadioButtonGroup };
 export default RadioButton;

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

@@ -0,0 +1,42 @@
+import React from "react";
+import { MarginProps } from "styled-system";
+import { ValidationProps } from "../../__internal__/validations";
+export interface RadioButtonGroupProps extends ValidationProps, MarginProps {
+    /** Breakpoint for adaptive legend (inline labels change to top aligned). Enables the adaptive behaviour when set */
+    adaptiveLegendBreakpoint?: number;
+    /** Breakpoint for adaptive spacing (left margin changes to 0). Enables the adaptive behaviour when set */
+    adaptiveSpacingBreakpoint?: number;
+    /** The RadioButton objects to be rendered in the group */
+    children: React.ReactNode;
+    /** When true, RadioButtons are in line */
+    inline?: boolean;
+    /** Spacing between labels and radio buttons, given number will be multiplied by base spacing unit (8) */
+    labelSpacing?: 1 | 2;
+    /** The content for the RadioGroup Legend */
+    legend?: string;
+    /** Text alignment of legend when inline */
+    legendAlign?: "left" | "right";
+    /** When true, legend is placed in line with the radiobuttons */
+    legendInline?: boolean;
+    /** Spacing between legend and field for inline legend, number multiplied by base spacing unit (8) */
+    legendSpacing?: 1 | 2;
+    /** Percentage width of legend (only when legend is inline)  */
+    legendWidth?: number;
+    /** 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;
+    /** Flag to configure component as mandatory */
+    required?: boolean;
+    /** value of the selected RadioButton */
+    value?: string;
+    /** Overrides the default tooltip position */
+    tooltipPosition?: "top" | "bottom" | "left" | "right";
+}
+export declare const RadioButtonGroup: {
+    (props: RadioButtonGroupProps): JSX.Element;
+    displayName: string;
+};
+export default RadioButtonGroup;

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

@@ -2,7 +2,6 @@ function _extends() { _extends = Object.assign || function (target) { for (var i
 
 import React from "react";
 import PropTypes from "prop-types";
-import styledSystemPropTypes from "@styled-system/prop-types";
 import tagComponent from "../../__internal__/utils/helpers/tags/tags";
 import Fieldset from "../../__internal__/fieldset";
 import RadioButtonGroupStyle from "./radio-button-group.style";
@@ -10,7 +9,6 @@ import RadioButtonMapper from "../../__internal__/radio-button-mapper/radio-butt
 import useIsAboveBreakpoint from "../../hooks/__internal__/useIsAboveBreakpoint";
 import { filterStyledSystemMarginProps } from "../../style/utils";
 import { TooltipProvider } from "../../__internal__/tooltip-provider";
-const marginPropTypes = filterStyledSystemMarginProps(styledSystemPropTypes.space);
 
 const RadioButtonGroup = props => {
   const {
@@ -40,7 +38,7 @@ const RadioButtonGroup = props => {
   let inlineLegend = legendInline;
 
   if (adaptiveLegendBreakpoint) {
-    inlineLegend = isAboveLegendBreakpoint;
+    inlineLegend = !!isAboveLegendBreakpoint;
   }
 
   let marginLeft = marginProps.ml;
@@ -75,6 +73,10 @@ const RadioButtonGroup = props => {
     onChange: onChange,
     value: value
   }, React.Children.map(children, child => {
+    if (! /*#__PURE__*/React.isValidElement(child)) {
+      return child;
+    }
+
     return /*#__PURE__*/React.cloneElement(child, {
       inline,
       labelSpacing,
@@ -87,69 +89,181 @@ const RadioButtonGroup = props => {
   })))));
 };
 
-RadioButtonGroup.propTypes = { ...marginPropTypes,
-
-  /** The RadioButton objects to be rendered in the group */
-  children: PropTypes.node.isRequired,
-
-  /** Specifies the name prop to be applied to each button in the group */
-  name: PropTypes.string.isRequired,
-
-  /** The content for the RadioGroup Legend */
-  legend: PropTypes.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.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]),
-
-  /** Callback fired when each RadioButton is blurred */
-  onBlur: PropTypes.func,
-
-  /** Callback fired when the user selects a RadioButton */
-  onChange: PropTypes.func,
-
-  /** value of the selected RadioButton */
-  value: PropTypes.string,
-
-  /** When true, RadioButtons are in line */
-  inline: PropTypes.bool,
-
-  /** When true, legend is placed in line with the radiobuttons */
-  legendInline: PropTypes.bool,
-
-  /** Percentage width of legend (only when legend is inline)  */
-  legendWidth: PropTypes.number,
-
-  /** Text alignment of legend when inline */
-  legendAlign: PropTypes.oneOf(["left", "right"]),
-
-  /** Spacing between legend and field for inline legend, number multiplied by base spacing unit (8) */
-  legendSpacing: PropTypes.oneOf([1, 2]),
-
-  /** Spacing between labels and radio buttons, given number will be multiplied by base spacing unit (8) */
-  labelSpacing: PropTypes.oneOf([1, 2]),
-
-  /** Breakpoint for adaptive legend (inline labels change to top aligned). Enables the adaptive behaviour when set */
-  adaptiveLegendBreakpoint: PropTypes.number,
-
-  /** Breakpoint for adaptive spacing (left margin changes to 0). Enables the adaptive behaviour when set */
-  adaptiveSpacingBreakpoint: PropTypes.number,
-
-  /** Flag to configure component as mandatory */
-  required: PropTypes.bool,
-
-  /** Overrides the default tooltip position */
-  tooltipPosition: PropTypes.oneOf(["top", "bottom", "left", "right"])
+RadioButtonGroup.propTypes = {
+  "adaptiveLegendBreakpoint": PropTypes.number,
+  "adaptiveSpacingBreakpoint": PropTypes.number,
+  "children": PropTypes.node,
+  "error": PropTypes.oneOfType([PropTypes.string, PropTypes.bool]),
+  "info": PropTypes.oneOfType([PropTypes.string, PropTypes.bool]),
+  "inline": PropTypes.bool,
+  "labelSpacing": PropTypes.oneOf([1, 2]),
+  "legend": PropTypes.string,
+  "legendAlign": PropTypes.oneOf(["left", "right"]),
+  "legendInline": PropTypes.bool,
+  "legendSpacing": PropTypes.oneOf([1, 2]),
+  "legendWidth": 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,
+  "required": PropTypes.bool,
+  "tooltipPosition": PropTypes.oneOf(["bottom", "left", "right", "top"]),
+  "value": PropTypes.string,
+  "warning": PropTypes.oneOfType([PropTypes.string, PropTypes.bool])
 };
+export { RadioButtonGroup };
+RadioButtonGroup.displayName = "RadioButtonGroup";
 export default RadioButtonGroup;

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

@@ -0,0 +1,5 @@
+declare const RadioButtonGroupStyle: import("styled-components").StyledComponent<"div", any, {
+    inline?: boolean | undefined;
+    legendInline?: boolean | undefined;
+}, never>;
+export default RadioButtonGroupStyle;

package/esm/components/radio-button/radio-button-svg.component.d.ts

@@ -0,0 +1,3 @@
+import React from "react";
+declare const _default: React.MemoExoticComponent<() => JSX.Element>;
+export default _default;

package/esm/components/radio-button/radio-button-svg.component.js

@@ -1,4 +1,5 @@
 import React from "react";
+import PropTypes from "prop-types";
 import StyledCheckableInputSvgWrapper from "../../__internal__/checkable-input/checkable-input-svg-wrapper.style";
 
 const RadioButtonSvg = () => {

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

@@ -0,0 +1,28 @@
+import React from "react";
+import { MarginProps } from "styled-system";
+import { CommonCheckableInputProps } from "../../__internal__/checkable-input";
+interface InternalRadioButtonProps {
+    inline?: boolean;
+    required?: boolean;
+}
+export interface RadioButtonProps extends CommonCheckableInputProps, MarginProps {
+    /** 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;
+    /** Text alignment of the label */
+    labelAlign?: "left" | "right";
+    /** Accepts a callback function which is triggered on click event */
+    onClick?: (ev: React.MouseEvent<HTMLInputElement>) => void;
+    /** the value of the Radio Button, passed on form submit */
+    value: string;
+    /** Overrides the default tooltip position */
+    tooltipPosition?: "top" | "bottom" | "left" | "right";
+    /** Aria label for rendered help component */
+    helpAriaLabel?: string;
+}
+export declare const RadioButton: React.ForwardRefExoticComponent<RadioButtonProps & InternalRadioButtonProps & React.RefAttributes<HTMLInputElement>>;
+declare const _default: React.MemoExoticComponent<React.ForwardRefExoticComponent<RadioButtonProps & InternalRadioButtonProps & React.RefAttributes<HTMLInputElement>>>;
+export default _default;