carbon-react 118.5.2 → 119.0.0

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

@@ -1,6 +1,7 @@
 import React from "react";
 import { MarginProps } from "styled-system";
 import { ValidationProps } from "../validations";
+import { LabelProps } from "../label";
 import { TagProps } from "../utils/helpers/tags/tags";
 import { IconType } from "../../components/icon";
 interface CommonFormFieldProps extends MarginProps, ValidationProps {
@@ -28,6 +29,7 @@ interface CommonFormFieldProps extends MarginProps, ValidationProps {
     labelSpacing?: 1 | 2;
     /** Label width */
     labelWidth?: number;
+    labelAs?: LabelProps["as"];
     /** If true the label switches position with the input */
     reverse?: boolean;
     /** Id of the validation icon */
@@ -57,7 +59,7 @@ export interface FormFieldProps extends CommonFormFieldProps, TagProps {
     useValidationIcon?: boolean;
 }
 declare const FormField: {
-    ({ 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): React.JSX.Element;
+    ({ children, "data-component": dataComponent, disabled, fieldHelp: fieldHelpContent, fieldHelpInline, error, warning, info, tooltipId, fieldHelpId, label, labelId, labelAlign, labelHelp, labelHelpIcon, labelInline, labelSpacing, labelWidth, labelAs, id, reverse, isOptional, useValidationIcon, adaptiveLabelBreakpoint, isRequired, validationIconId, validationRedesignOptIn, ...rest }: FormFieldProps): React.JSX.Element;
     displayName: string;
 };
 export default FormField;

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

@@ -29,6 +29,7 @@ const FormField = _ref => {
     labelInline,
     labelSpacing = 2,
     labelWidth,
+    labelAs,
     id,
     reverse,
     isOptional,
@@ -104,7 +105,8 @@ const FormField = _ref => {
     pr: !reverse ? labelSpacing : undefined,
     pl: reverse ? labelSpacing : undefined,
     isRequired: isRequired,
-    validationIconId: validationIconId
+    validationIconId: validationIconId,
+    as: labelAs
   }, label), fieldHelpInline && fieldHelp, !reverse && children), !fieldHelpInline && fieldHelp);
 };
 FormField.displayName = "FormField";

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

@@ -3,6 +3,7 @@ import { StyledLabelProps, StyledLabelContainerProps } from "./label.style";
 import { ValidationProps } from "../validations";
 import { IconType } from "../../components/icon";
 export interface LabelProps extends ValidationProps, StyledLabelProps, StyledLabelContainerProps {
+    as?: "span" | "label";
     /** Children elements */
     children?: React.ReactNode;
     /** A message that the Help component will display */
@@ -20,6 +21,6 @@ export interface LabelProps extends ValidationProps, StyledLabelProps, StyledLab
     /** Id of the validation icon */
     validationIconId?: string;
 }
-export declare const Label: ({ align, children, disabled, error, help, helpIcon, htmlFor, info, inline, isRequired, labelId, optional, pr, pl, tooltipId, useValidationIcon, validationIconId, warning, width, }: LabelProps) => React.JSX.Element;
-declare const _default: React.MemoExoticComponent<({ align, children, disabled, error, help, helpIcon, htmlFor, info, inline, isRequired, labelId, optional, pr, pl, tooltipId, useValidationIcon, validationIconId, warning, width, }: LabelProps) => React.JSX.Element>;
+export declare const Label: ({ align, as, children, disabled, error, help, helpIcon, htmlFor, info, inline, isRequired, labelId, optional, pr, pl, tooltipId, useValidationIcon, validationIconId, warning, width, }: LabelProps) => React.JSX.Element;
+declare const _default: React.MemoExoticComponent<({ align, as, children, disabled, error, help, helpIcon, htmlFor, info, inline, isRequired, labelId, optional, pr, pl, tooltipId, useValidationIcon, validationIconId, warning, width, }: LabelProps) => React.JSX.Element>;
 export default _default;

package/esm/__internal__/label/label.component.js

@@ -1,3 +1,4 @@
+function _extends() { _extends = Object.assign ? Object.assign.bind() : 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, { useState, useContext } from "react";
 import PropTypes from "prop-types";
 import Help from "../../components/help";
@@ -27,6 +28,7 @@ const tooltipPosition = _ref2 => {
 export const Label = _ref3 => {
   let {
     align = "right",
+    as = "label",
     children,
     disabled,
     error,
@@ -102,14 +104,17 @@ export const Label = _ref3 => {
     optional: optional,
     pr: pr,
     pl: pl
-  }, /*#__PURE__*/React.createElement(StyledLabel, {
+  }, /*#__PURE__*/React.createElement(StyledLabel, _extends({
     "data-element": "label",
     disabled: disabled,
-    id: labelId,
-    htmlFor: htmlFor,
+    id: labelId
+  }, as === "label" ? {
+    htmlFor
+  } : {}, {
     onMouseEnter: handleMouseEnter,
     onMouseLeave: handleMouseLeave,
-    isRequired: isRequired
-  }, children), icon());
+    isRequired: isRequired,
+    as: as
+  }), children), icon());
 };
 export default /*#__PURE__*/React.memo(Label);

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

@@ -1,6 +1,7 @@
 import React from "react";
+import { SpaceProps } from "styled-system";
 import { TagProps } from "../../__internal__/utils/helpers/tags";
-export interface BreadcrumbsProps extends TagProps {
+export interface BreadcrumbsProps extends TagProps, SpaceProps {
     /** Child crumbs to display */
     children: React.ReactNode;
 }

package/esm/components/breadcrumbs/breadcrumbs.component.js

@@ -15,13 +15,321 @@ const Breadcrumbs = /*#__PURE__*/React.forwardRef((_ref, ref) => {
     role: "navigation"
   }, tagComponent("breadcrumbs", rest), {
     "aria-label": l.breadcrumbs.ariaLabel()
-  }), /*#__PURE__*/React.createElement("ol", null, children));
+  }, rest), /*#__PURE__*/React.createElement("ol", null, children));
 });
 Breadcrumbs.propTypes = {
   "children": PropTypes.node,
   "data-component": PropTypes.string,
   "data-element": PropTypes.string,
-  "data-role": PropTypes.string
+  "data-role": PropTypes.string,
+  "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]),
+  "p": 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]),
+  "padding": 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]),
+  "paddingBottom": 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]),
+  "paddingLeft": 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]),
+  "paddingRight": 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]),
+  "paddingTop": 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]),
+  "paddingX": 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]),
+  "paddingY": 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]),
+  "pb": 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]),
+  "pl": 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]),
+  "pr": 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]),
+  "pt": 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]),
+  "px": 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]),
+  "py": 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])
 };
 export { Breadcrumbs };
 Breadcrumbs.displayName = "Breadcrumbs";

package/esm/components/breadcrumbs/breadcrumbs.style.js

@@ -1,9 +1,18 @@
 import styled from "styled-components";
+import { space } from "styled-system";
+import baseTheme from "../../style/themes/base";
 const StyledBreadcrumbs = styled.nav`
+  ${space}
+
   ol {
+    padding: 0;
+    margin: 0;
     list-style: none;
     display: flex;
     flex-wrap: wrap;
   }
 `;
+StyledBreadcrumbs.defaultProps = {
+  theme: baseTheme
+};
 export default StyledBreadcrumbs;

package/esm/components/breadcrumbs/crumb/crumb.component.d.ts

@@ -4,8 +4,6 @@ import { TagProps } from "../../../__internal__/utils/helpers/tags";
 export interface CrumbProps extends Omit<LinkProps, "tooltipMessage" | "tooltipPosition" | "iconType" | "iconAlign" | "isSkipLink" | "isDarkBackground" | "ariaLabel" | "className" | "variant" | "target" | "rel" | "icon" | "disabled">, TagProps {
     /** This sets the Crumb to current, does not render Link */
     isCurrent?: boolean;
-    /** The href string for Crumb Link */
-    href: string;
 }
 declare const Crumb: React.ForwardRefExoticComponent<CrumbProps & React.RefAttributes<HTMLLinkElement>>;
 export default Crumb;

package/esm/components/breadcrumbs/crumb/crumb.component.js

@@ -8,14 +8,16 @@ const Crumb = /*#__PURE__*/React.forwardRef((_ref, ref) => {
     href,
     isCurrent,
     children,
+    onClick,
     ...rest
   } = _ref;
   return /*#__PURE__*/React.createElement("li", null, /*#__PURE__*/React.createElement(StyledCrumb, _extends({
     ref: ref,
     isCurrent: isCurrent,
     "aria-current": isCurrent ? "page" : undefined
-  }, tagComponent("crumb", rest), !isCurrent && {
-    href
+  }, tagComponent("crumb", rest), rest, !isCurrent && {
+    href,
+    onClick
   }), children), !isCurrent && /*#__PURE__*/React.createElement(Divider, null));
 });
 Crumb.propTypes = {
@@ -71,7 +73,7 @@ Crumb.propTypes = {
   "data-component": PropTypes.string,
   "data-element": PropTypes.string,
   "data-role": PropTypes.string,
-  "href": PropTypes.string.isRequired,
+  "href": PropTypes.string,
   "isCurrent": PropTypes.bool,
   "onClick": PropTypes.func,
   "onKeyDown": PropTypes.func,

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

@@ -0,0 +1,64 @@
+import React from "react";
+import { MarginProps } from "styled-system";
+import { TagProps } from "../../../__internal__/utils/helpers/tags";
+export interface CustomEvent {
+    target: {
+        name?: string;
+        value?: string;
+    };
+}
+export interface ButtonToggleGroupProps extends 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;
+    /** aria-label for the group wrapper. Required for accessibility when no text label is provided */
+    "aria-label"?: string;
+    /** Text for the visible label of the button group. */
+    label?: string;
+    /** Text for the label's 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;
+    /** If true all ButtonToggle children will flex to the full width of the ButtonToggleGroup parent */
+    fullWidth?: boolean;
+    /** The alignment for the text in the label. */
+    labelAlign?: "left" | "right";
+    /** Callback triggered by pressing one of the child buttons. Use with controlled components to set the value prop to the value argument */
+    onChange?: (ev: React.MouseEvent<HTMLButtonElement>, value?: string, name?: string) => void;
+    /** Determines which child button is selected when the component is used as a controlled component */
+    value?: string;
+    /** Aria label for rendered help component */
+    helpAriaLabel?: string;
+    /** set this to true to allow the buttons within the group to be deselected when already selected, leaving no selected button */
+    allowDeselect?: boolean;
+}
+declare type ButtonToggleGroupContextType = {
+    onButtonClick: (value: string) => void;
+    handleKeyDown: (ev: React.KeyboardEvent<HTMLButtonElement>) => void;
+    pressedButtonValue?: string;
+    onChange?: (ev: React.MouseEvent<HTMLButtonElement>, value?: string, name?: string) => void;
+    name?: string;
+    allowDeselect?: boolean;
+    isInGroup: boolean;
+    firstButton?: HTMLButtonElement;
+    childButtonCallbackRef?: (button: HTMLButtonElement | null) => void;
+};
+export declare const ButtonToggleGroupContext: React.Context<ButtonToggleGroupContextType>;
+declare const ButtonToggleGroup: {
+    ({ children, fieldHelp, fieldHelpInline, "aria-label": ariaLabel, label, labelHelp, labelSpacing, inputWidth, fullWidth, labelInline, labelWidth, labelAlign, name, onChange, value, "data-component": dataComponent, "data-element": dataElement, "data-role": dataRole, helpAriaLabel, id, allowDeselect, ...props }: ButtonToggleGroupProps): React.JSX.Element;
+    displayName: string;
+};
+export default ButtonToggleGroup;