carbon-react 150.0.0 → 151.0.0

package/lib/__internal__/hint-text/hint-text.style.js

@@ -0,0 +1,58 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _styledComponents = _interopRequireWildcard(require("styled-components"));
+function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
+function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
+const getColor = (isDarkBackground, isDisabled) => {
+  if (isDarkBackground) {
+    return "var(--colorsUtilityYang080)";
+  }
+  if (isDisabled) {
+    return "var(--colorsUtilityYin030)";
+  }
+  return "var(--colorsUtilityYin055)";
+};
+const StyledHintText = _styledComponents.default.div`
+  display: flex;
+  align-items: center;
+  font-size: 14px;
+
+  ${({
+  align
+}) => (0, _styledComponents.css)`
+    justify-content: ${align !== "right" ? "flex-start" : "flex-end"};
+  `}
+  margin-bottom: ${({
+  marginBottom
+}) => marginBottom};
+  margin-top: ${({
+  marginTop
+}) => marginTop};
+
+  ${({
+  isDarkBackground,
+  isDisabled
+}) => (0, _styledComponents.css)`
+    color: ${getColor(isDarkBackground, isDisabled)};
+  `}
+
+  ${({
+  fontWeight
+}) => fontWeight && (0, _styledComponents.css)`
+      font-weight: ${fontWeight};
+    `}
+  ${({
+  maxWidth
+}) => maxWidth && (0, _styledComponents.css)`
+      max-width: ${maxWidth};
+    `}
+
+  ::after {
+    content: " ";
+  }
+`;
+var _default = exports.default = StyledHintText;

package/lib/__internal__/hint-text/index.d.ts

@@ -0,0 +1,2 @@
+export { default } from "./hint-text.component";
+export type { HintTextProps } from "./hint-text.component";

package/lib/__internal__/hint-text/index.js

@@ -0,0 +1,13 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+Object.defineProperty(exports, "default", {
+  enumerable: true,
+  get: function () {
+    return _hintText.default;
+  }
+});
+var _hintText = _interopRequireDefault(require("./hint-text.component"));
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }

package/lib/__internal__/hint-text/package.json

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

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

@@ -2,15 +2,23 @@ interface RestProps {
     [restKeys: string]: any;
 }
 export interface TagProps {
-    /** @private @ignore 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;
 }
+interface InternalTagProps extends TagProps {
+    /**
+     * @private
+     * @internal
+     * @ignore
+     * Identifier used for testing purposes, applied to the root element of the component.
+     * INTERNAL USE ONLY.
+     */
+    "data-component"?: string;
+}
 /**
  * Builds props object containing top level data tags
  */
-declare function tagComponent(componentName: string | undefined, props: TagProps & RestProps): TagProps;
+declare function tagComponent(componentName: string | undefined, props: TagProps & RestProps): InternalTagProps;
 export default tagComponent;

package/lib/components/accordion/accordion-group/accordion-group.component.d.ts

@@ -4,7 +4,7 @@ import { TagProps } from "../../../__internal__/utils/helpers/tags";
 declare type AccordionGroupChild = React.ReactElement | boolean | null | undefined | AccordionGroupChildArray;
 interface AccordionGroupChildArray extends Array<AccordionGroupChild> {
 }
-export interface AccordionGroupProps extends MarginProps, Omit<TagProps, "data-component"> {
+export interface AccordionGroupProps extends MarginProps, TagProps {
     /** An Accordion or list of Accordion components to be rendered inside the AccordionGroup */
     children?: AccordionGroupChild;
 }

package/lib/components/accordion/accordion-group/accordion-group.component.js

@@ -10,6 +10,7 @@ var _invariant = _interopRequireDefault(require("invariant"));
 var _events = _interopRequireDefault(require("../../../__internal__/utils/helpers/events"));
 var _accordion = _interopRequireDefault(require("../accordion.component"));
 var _accordion2 = require("../accordion.style");
+var _tags = _interopRequireDefault(require("../../../__internal__/utils/helpers/tags"));
 function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
 function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
 function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
@@ -59,9 +60,7 @@ const AccordionGroup = ({
       focusAccordion(ev, refs.length - 1);
     }
   }, [focusAccordion, refs]);
-  return /*#__PURE__*/_react.default.createElement(_accordion2.StyledAccordionGroup, _extends({}, rest, {
-    "data-component": "accordion-group"
-  }), filteredChildren.map((child, index) =>
+  return /*#__PURE__*/_react.default.createElement(_accordion2.StyledAccordionGroup, _extends({}, rest, (0, _tags.default)("accordion-group", rest)), filteredChildren.map((child, index) =>
   /*#__PURE__*/
   // casted to ReactElement as there is no overload for an FunctionComponentElement in cloneElement
   _react.default.cloneElement(child, {

package/lib/components/accordion/accordion.component.d.ts

@@ -1,7 +1,8 @@
 import React from "react";
 import { SpaceProps } from "styled-system";
+import { TagProps } from "../../__internal__/utils/helpers/tags";
 import { StyledAccordionContainerProps } from "./accordion.style";
-export interface AccordionProps extends StyledAccordionContainerProps, SpaceProps {
+export interface AccordionProps extends StyledAccordionContainerProps, SpaceProps, TagProps {
     /** Content of the Accordion component */
     children?: React.ReactNode;
     /** Set the default state of expansion of the Accordion if component is meant to be used as uncontrolled */

package/lib/components/accordion/accordion.component.js

@@ -6,6 +6,7 @@ Object.defineProperty(exports, "__esModule", {
 exports.default = exports.Accordion = void 0;
 var _react = _interopRequireWildcard(require("react"));
 var _propTypes = _interopRequireDefault(require("prop-types"));
+var _tags = _interopRequireDefault(require("../../__internal__/utils/helpers/tags"));
 var _useResizeObserver = _interopRequireDefault(require("../../hooks/__internal__/useResizeObserver"));
 var _guid = _interopRequireDefault(require("../../__internal__/utils/helpers/guid"));
 var _events = _interopRequireDefault(require("../../__internal__/utils/helpers/events"));
@@ -73,12 +74,10 @@ const Accordion = exports.Accordion = /*#__PURE__*/_react.default.forwardRef(({
   const getIconType = () => size === "small" || variant === "subtle" ? "chevron_down_thick" : "chevron_down";
   return /*#__PURE__*/_react.default.createElement(_accordion.StyledAccordionContainer, _extends({
     id: accordionId,
-    "data-component": "accordion",
-    "data-role": "accordion-container",
     width: width,
     borders: variant === "subtle" ? "none" : borders,
     variant: variant
-  }, rest), /*#__PURE__*/_react.default.createElement(_accordion.StyledAccordionTitleContainer, _extends({
+  }, rest, (0, _tags.default)("accordion", rest)), /*#__PURE__*/_react.default.createElement(_accordion.StyledAccordionTitleContainer, _extends({
     "data-element": "accordion-title-container",
     id: headerId,
     "aria-expanded": isExpanded,
@@ -130,6 +129,8 @@ if (process.env.NODE_ENV !== "production") {
   Accordion.propTypes = {
     "borders": _propTypes.default.oneOf(["default", "full", "none"]),
     "children": _propTypes.default.node,
+    "data-element": _propTypes.default.string,
+    "data-role": _propTypes.default.string,
     "defaultExpanded": _propTypes.default.bool,
     "disableContentPadding": _propTypes.default.bool,
     "error": _propTypes.default.string,

package/lib/components/action-popover/action-popover.component.d.ts

@@ -1,5 +1,6 @@
 import React from "react";
 import { MarginProps } from "styled-system";
+import { TagProps } from "../../__internal__/utils/helpers/tags";
 import { Alignment } from "./__internal__/action-popover.context";
 export interface RenderButtonProps {
     tabIndex: number;
@@ -13,7 +14,7 @@ export interface RenderButtonProps {
         "aria-expanded": string;
     };
 }
-export interface ActionPopoverProps extends MarginProps {
+export interface ActionPopoverProps extends MarginProps, TagProps {
     /** Children for popover component */
     children?: React.ReactNode;
     /** Horizontal alignment of menu items content */

package/lib/components/action-popover/action-popover.component.js

@@ -7,6 +7,7 @@ exports.default = exports.ActionPopover = void 0;
 var _react = _interopRequireWildcard(require("react"));
 var _propTypes = _interopRequireDefault(require("prop-types"));
 var _invariant = _interopRequireDefault(require("invariant"));
+var _tags = _interopRequireDefault(require("../../__internal__/utils/helpers/tags"));
 var _actionPopover = require("./action-popover.style");
 var _events = _interopRequireDefault(require("../../__internal__/utils/helpers/events"));
 var _popover = _interopRequireDefault(require("../../__internal__/popover"));
@@ -209,13 +210,11 @@ const ActionPopover = exports.ActionPopover = /*#__PURE__*/(0, _react.forwardRef
   };
   return /*#__PURE__*/_react.default.createElement(_actionPopover.MenuButton, _extends({
     id: parentID,
-    "data-component": "action-popover-wrapper",
-    "data-role": "action-popover-wrapper",
     onKeyDown: onButtonKeyDown,
     onClick: onButtonClick,
     isOpen,
     ref: buttonRef
-  }, rest), menuButton(menuID), /*#__PURE__*/_react.default.createElement(_actionPopover2.default.Provider, {
+  }, rest, (0, _tags.default)("action-popover-wrapper", rest)), menuButton(menuID), /*#__PURE__*/_react.default.createElement(_actionPopover2.default.Provider, {
     value: {
       setOpenPopover: setOpen,
       focusButton,
@@ -236,6 +235,8 @@ if (process.env.NODE_ENV !== "production") {
     "aria-label": _propTypes.default.string,
     "aria-labelledby": _propTypes.default.string,
     "children": _propTypes.default.node,
+    "data-element": _propTypes.default.string,
+    "data-role": _propTypes.default.string,
     "horizontalAlignment": _propTypes.default.oneOf(["left", "right"]),
     "id": _propTypes.default.string,
     "m": _propTypes.default.oneOfType([_propTypes.default.arrayOf(_propTypes.default.oneOfType([_propTypes.default.oneOf([null]), _propTypes.default.number, _propTypes.default.shape({

package/lib/components/advanced-color-picker/advanced-color-picker.component.d.ts

@@ -1,11 +1,12 @@
 import React from "react";
 import { MarginProps } from "styled-system";
 import { ModalProps } from "../modal";
+import { TagProps } from "../../__internal__/utils/helpers/tags";
 export interface AdvancedColor {
     label: string;
     value: string;
 }
-export interface AdvancedColorPickerProps extends MarginProps, Pick<ModalProps, "restoreFocusOnClose"> {
+export interface AdvancedColorPickerProps extends MarginProps, Pick<ModalProps, "restoreFocusOnClose">, TagProps {
     /** Prop to specify the aria-describedby property of the component */
     "aria-describedby"?: string;
     /**
@@ -14,7 +15,7 @@ export interface AdvancedColorPickerProps extends MarginProps, Pick<ModalProps,
      */
     "aria-label"?: string;
     /**
-     * Prop to specify the aria-labeledby property of the component
+     * Prop to specify the aria-labelledby property of the component
      * To be used when the title prop is a custom React Node,
      * or the component is labelled by an internal element other than the title.
      */

package/lib/components/advanced-color-picker/advanced-color-picker.component.js

@@ -14,6 +14,7 @@ var _guid = _interopRequireDefault(require("../../__internal__/utils/helpers/gui
 var _useLocale = _interopRequireDefault(require("../../hooks/__internal__/useLocale"));
 var _definitionList = require("../definition-list");
 var _logger = _interopRequireDefault(require("../../__internal__/utils/logger"));
+var _tags = _interopRequireDefault(require("../../__internal__/utils/helpers/tags"));
 function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
 function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
 function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
@@ -130,9 +131,7 @@ const AdvancedColorPicker = ({
   }
   return /*#__PURE__*/_react.default.createElement(_advancedColorPicker.StyledAdvancedColorPickerWrapper, _extends({
     m: "15px auto auto 15px"
-  }, (0, _utils.filterStyledSystemMarginProps)(props), {
-    "data-role": "advanced-color-picker-wrapper"
-  }), /*#__PURE__*/_react.default.createElement(_advancedColorPicker.StyledAdvancedColorPickerCell, {
+  }, (0, _utils.filterStyledSystemMarginProps)(props), (0, _tags.default)("advanced-color-picker", props)), /*#__PURE__*/_react.default.createElement(_advancedColorPicker.StyledAdvancedColorPickerCell, {
     "data-element": "color-picker-cell",
     "aria-label": l.advancedColorPicker.ariaLabel(),
     "aria-describedby": descriptionId.current,

package/lib/components/alert/alert.component.d.ts

@@ -1,4 +1,4 @@
 import React from "react";
 import { DialogProps } from "../dialog";
-export declare const Alert: ({ children, size, topModalOverride, closeButtonDataProps, ...rest }: DialogProps) => React.JSX.Element;
+export declare const Alert: ({ children, size, topModalOverride, closeButtonDataProps, ...rest }: Omit<DialogProps, "data-component">) => React.JSX.Element;
 export default Alert;

package/lib/components/alert/alert.component.js

@@ -16,11 +16,12 @@ const Alert = ({
   closeButtonDataProps,
   ...rest
 }) => /*#__PURE__*/_react.default.createElement(_dialog.default, _extends({
-  "data-component": "alert",
   role: "alertdialog",
   size: size,
   topModalOverride: topModalOverride,
   closeButtonDataProps: closeButtonDataProps
-}, rest), children);
+}, rest, {
+  "data-component": "alert"
+}), children);
 exports.Alert = Alert;
 var _default = exports.default = Alert;

package/lib/components/anchor-navigation/anchor-navigation.component.d.ts

@@ -1,6 +1,6 @@
 import React from "react";
 import { TagProps } from "../../__internal__/utils/helpers/tags";
-export interface AnchorNavigationProps extends Omit<TagProps, "data-component"> {
+export interface AnchorNavigationProps extends TagProps {
     /** Child elements */
     children?: React.ReactNode;
     /** The AnchorNavigationItems components to be rendered in the sticky navigation.

package/lib/components/badge/badge.component.d.ts

@@ -1,5 +1,6 @@
 import React from "react";
-export interface BadgeProps {
+import { TagProps } from "../../__internal__/utils/helpers/tags";
+export interface BadgeProps extends TagProps {
     /** Prop to specify an aria-label for the component */
     "aria-label"?: string;
     /** The badge will be added to this element */
@@ -11,5 +12,5 @@ export interface BadgeProps {
     /** Callback fired when badge is clicked */
     onClick?: (ev: React.MouseEvent<HTMLElement>) => void;
 }
-export declare const Badge: ({ "aria-label": ariaLabel, children, counter, color, onClick, }: BadgeProps) => React.JSX.Element;
+export declare const Badge: ({ "aria-label": ariaLabel, children, counter, color, onClick, "data-element": dataElement, "data-role": dataRole, }: BadgeProps) => React.JSX.Element;
 export default Badge;

package/lib/components/badge/badge.component.js

@@ -16,7 +16,9 @@ const Badge = ({
   children,
   counter = 0,
   color = "--colorsActionMajor500",
-  onClick
+  onClick,
+  "data-element": dataElement,
+  "data-role": dataRole
 }) => {
   const shouldDisplayCounter = +counter > 0;
   const counterToDisplay = +counter > 99 ? 99 : counter;
@@ -31,8 +33,9 @@ const Badge = ({
     };
     if (shouldDisplayCounter) {
       return /*#__PURE__*/_react.default.createElement(_badge.StyledBadge, _extends({
-        "data-role": "badge",
         "data-component": "badge",
+        "data-element": dataElement,
+        "data-role": dataRole,
         color: color
       }, props, {
         onFocus: () => {

package/lib/components/batch-selection/batch-selection.component.d.ts

@@ -1,5 +1,6 @@
 import React from "react";
-export interface BatchSelectionProps {
+import { TagProps } from "../../__internal__/utils/helpers/tags";
+export interface BatchSelectionProps extends TagProps {
     /** Content to be rendered after selected count */
     children: React.ReactNode;
     /** Color of the background, transparent if not defined */
@@ -11,5 +12,5 @@ export interface BatchSelectionProps {
     /** Number of selected elements */
     selectedCount: number;
 }
-export declare const BatchSelection: ({ disabled, children, colorTheme, selectedCount, hidden, }: BatchSelectionProps) => React.JSX.Element;
+export declare const BatchSelection: ({ disabled, children, colorTheme, selectedCount, hidden, "data-element": dataElement, "data-role": dataRole, }: BatchSelectionProps) => React.JSX.Element;
 export default BatchSelection;

package/lib/components/batch-selection/batch-selection.component.js

@@ -15,13 +15,16 @@ const BatchSelection = ({
   children,
   colorTheme = "transparent",
   selectedCount,
-  hidden
+  hidden,
+  "data-element": dataElement,
+  "data-role": dataRole
 }) => {
   const l = (0, _useLocale.default)();
   return /*#__PURE__*/_react.default.createElement(_batchSelection.StyledBatchSelection, {
     colorTheme: colorTheme,
     "data-component": "batch-selection",
-    "data-role": "batch-selection",
+    "data-element": dataElement,
+    "data-role": dataRole,
     disabled: disabled,
     hidden: hidden
   }, /*#__PURE__*/_react.default.createElement(_batchSelection.StyledSelectionCount, {

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

@@ -49,6 +49,8 @@ export interface BoxProps extends FlexboxProps, Omit<GridProps, "gridGap" | "gri
     opacity?: string | number;
     /** Set the container to be hidden from screen readers */
     "aria-hidden"?: "true" | "false";
+    /** @private @internal @ignore */
+    "data-component"?: string;
 }
 export declare const Box: React.ForwardRefExoticComponent<BoxProps & React.RefAttributes<HTMLDivElement>>;
 export default Box;

package/lib/components/breadcrumbs/breadcrumbs.component.js

@@ -24,15 +24,13 @@ const Breadcrumbs = exports.Breadcrumbs = /*#__PURE__*/_react.default.forwardRef
     }
   }, /*#__PURE__*/_react.default.createElement(_breadcrumbs.default, _extends({
     ref: ref,
-    role: "navigation"
-  }, (0, _tags.default)("breadcrumbs", rest), {
+    role: "navigation",
     "aria-label": l.breadcrumbs.ariaLabel()
-  }, rest), /*#__PURE__*/_react.default.createElement("ol", null, children)));
+  }, rest, (0, _tags.default)("breadcrumbs", rest)), /*#__PURE__*/_react.default.createElement("ol", null, children)));
 });
 if (process.env.NODE_ENV !== "production") {
   Breadcrumbs.propTypes = {
     "children": _propTypes.default.node,
-    "data-component": _propTypes.default.string,
     "data-element": _propTypes.default.string,
     "data-role": _propTypes.default.string,
     "isDarkBackground": _propTypes.default.bool,

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

@@ -28,7 +28,7 @@ const Crumb = /*#__PURE__*/_react.default.forwardRef(({
     isCurrent: isCurrent,
     "aria-current": isCurrent ? "page" : undefined,
     isDarkBackground: isDarkBackground
-  }, (0, _tags.default)("crumb", rest), rest, !isCurrent && {
+  }, rest, (0, _tags.default)("crumb", rest), !isCurrent && {
     href,
     onClick
   }), children), !isCurrent && /*#__PURE__*/_react.default.createElement(_crumb.Divider, {
@@ -93,7 +93,6 @@ if (process.env.NODE_ENV !== "production") {
     "aria-valuenow": _propTypes.default.number,
     "aria-valuetext": _propTypes.default.string,
     "children": _propTypes.default.node,
-    "data-component": _propTypes.default.string,
     "data-element": _propTypes.default.string,
     "data-role": _propTypes.default.string,
     "hasFocus": _propTypes.default.bool,

package/lib/components/button/button.component.js

@@ -186,7 +186,6 @@ if (process.env.NODE_ENV !== "production") {
     "buttonType": _propTypes.default.oneOf(["darkBackground", "gradient-grey", "gradient-white", "primary", "secondary", "tertiary"]),
     "children": _propTypes.default.node,
     "className": _propTypes.default.string,
-    "data-component": _propTypes.default.string,
     "data-element": _propTypes.default.string,
     "data-role": _propTypes.default.string,
     "destructive": _propTypes.default.bool,

package/lib/components/button-bar/button-bar.component.d.ts

@@ -1,7 +1,8 @@
 import React from "react";
 import { SpaceProps } from "styled-system";
 import { ButtonBarContextProps } from "./__internal__/button-bar.context";
-export interface ButtonBarProps extends ButtonBarContextProps, SpaceProps {
+import { TagProps } from "../../__internal__/utils/helpers/tags";
+export interface ButtonBarProps extends ButtonBarContextProps, SpaceProps, TagProps {
     /** Button or IconButton Elements, to be rendered inside the component */
     children: React.ReactNode;
 }

package/lib/components/button-bar/button-bar.component.js

@@ -8,6 +8,7 @@ var _react = _interopRequireDefault(require("react"));
 var _propTypes = _interopRequireDefault(require("prop-types"));
 var _buttonBar = _interopRequireDefault(require("./button-bar.style"));
 var _buttonBar2 = _interopRequireDefault(require("./__internal__/button-bar.context"));
+var _tags = _interopRequireDefault(require("../../__internal__/utils/helpers/tags"));
 function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
 function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
 const ButtonBar = ({
@@ -16,7 +17,7 @@ const ButtonBar = ({
   iconPosition = "before",
   fullWidth = false,
   ...rest
-}) => /*#__PURE__*/_react.default.createElement(_buttonBar.default, _extends({}, rest, {
+}) => /*#__PURE__*/_react.default.createElement(_buttonBar.default, _extends({}, rest, (0, _tags.default)("button-bar", rest), {
   fullWidth: fullWidth,
   size: size
 }), /*#__PURE__*/_react.default.createElement(_buttonBar2.default.Provider, {

package/lib/components/button-minor/button-minor.component.js

@@ -55,7 +55,6 @@ if (process.env.NODE_ENV !== "production") {
     "buttonType": _propTypes.default.oneOf(["darkBackground", "gradient-grey", "gradient-white", "primary", "secondary", "tertiary"]),
     "children": _propTypes.default.node,
     "className": _propTypes.default.string,
-    "data-component": _propTypes.default.string,
     "data-element": _propTypes.default.string,
     "data-role": _propTypes.default.string,
     "destructive": _propTypes.default.bool,

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

@@ -38,9 +38,11 @@ export interface ButtonToggleGroupProps extends MarginProps, TagProps {
     allowDeselect?: boolean;
     /** Disable all user interaction. */
     disabled?: boolean;
+    /** @private @internal @ignore */
+    "data-component"?: string;
 }
 declare const ButtonToggleGroup: {
-    ({ children, fieldHelp, fieldHelpInline, "aria-label": ariaLabel, label, labelHelp, labelSpacing, inputHint, inputWidth, fullWidth, labelInline, labelWidth, onChange, value, "data-component": dataComponent, "data-element": dataElement, "data-role": dataRole, helpAriaLabel, id, allowDeselect, disabled, ...props }: ButtonToggleGroupProps): React.JSX.Element;
+    ({ children, fieldHelp, fieldHelpInline, "aria-label": ariaLabel, label, labelHelp, labelSpacing, inputHint, inputWidth, fullWidth, labelInline, labelWidth, onChange, value, helpAriaLabel, id, allowDeselect, disabled, ...props }: ButtonToggleGroupProps): React.JSX.Element;
     displayName: string;
 };
 export default ButtonToggleGroup;

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

@@ -8,8 +8,9 @@ var _react = _interopRequireWildcard(require("react"));
 var _propTypes = _interopRequireDefault(require("prop-types"));
 var _invariant = _interopRequireDefault(require("invariant"));
 var _formField = _interopRequireDefault(require("../../../__internal__/form-field"));
+var _tags = _interopRequireDefault(require("../../../__internal__/utils/helpers/tags"));
 var _guid = _interopRequireDefault(require("../../../__internal__/utils/helpers/guid"));
-var _buttonToggleGroup = _interopRequireWildcard(require("./button-toggle-group.style"));
+var _buttonToggleGroup = _interopRequireDefault(require("./button-toggle-group.style"));
 var _ = require("..");
 var _utils = require("../../../style/utils");
 var _tooltipProvider = require("../../../__internal__/tooltip-provider");
@@ -17,6 +18,7 @@ var _inputBehaviour = require("../../../__internal__/input-behaviour");
 var _events = _interopRequireDefault(require("../../../__internal__/utils/helpers/events"));
 var _newValidation = _interopRequireDefault(require("../../carbon-provider/__internal__/new-validation.context"));
 var _buttonToggleGroup2 = _interopRequireDefault(require("./__internal__/button-toggle-group.context"));
+var _hintText = _interopRequireDefault(require("../../../__internal__/hint-text"));
 function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
 function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
 function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
@@ -37,9 +39,6 @@ const ButtonToggleGroup = ({
   labelWidth,
   onChange,
   value,
-  "data-component": dataComponent = "button-toggle-group",
-  "data-element": dataElement,
-  "data-role": dataRole,
   helpAriaLabel,
   id,
   allowDeselect,
@@ -119,13 +118,10 @@ const ButtonToggleGroup = ({
     labelInline: computeLabelPropValues(labelInline),
     labelWidth: computeLabelPropValues(labelWidth),
     labelId: labelId.current,
-    "data-component": dataComponent,
-    "data-role": dataRole,
-    "data-element": dataElement,
     id: id,
     labelAs: "span",
     disabled: disabled
-  }, (0, _utils.filterStyledSystemMarginProps)(props)), /*#__PURE__*/_react.default.createElement(_buttonToggleGroup2.default.Provider, {
+  }, (0, _utils.filterStyledSystemMarginProps)(props), (0, _tags.default)(props["data-component"] ?? "button-toggle-group", props)), /*#__PURE__*/_react.default.createElement(_buttonToggleGroup2.default.Provider, {
     value: {
       onButtonClick,
       handleKeyDown,
@@ -138,9 +134,10 @@ const ButtonToggleGroup = ({
       childButtonCallbackRef,
       hintTextId: inputHint ? hintTextId.current : undefined
     }
-  }, inputHint && /*#__PURE__*/_react.default.createElement(_buttonToggleGroup.StyledHintText, {
+  }, inputHint && /*#__PURE__*/_react.default.createElement(_hintText.default, {
     id: hintTextId.current,
-    isDisabled: disabled
+    isDisabled: disabled,
+    marginBottom: "var(--spacing150)"
   }, inputHint), /*#__PURE__*/_react.default.createElement(_buttonToggleGroup.default, _extends({
     ref: wrapperRef
   }, label ? {
@@ -152,9 +149,6 @@ const ButtonToggleGroup = ({
     inputWidth: inputWidth,
     fullWidth: fullWidth,
     role: "group",
-    "data-component": dataComponent,
-    "data-role": dataRole,
-    "data-element": dataElement,
     id: id,
     disabled: disabled
   }), children)))));

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

@@ -1,7 +1,4 @@
 import { ButtonToggleGroupProps } from ".";
 declare type StyledButtonToggleGroupProps = Pick<ButtonToggleGroupProps, "inputWidth" | "fullWidth" | "disabled" | "labelInline">;
 declare const StyledButtonToggleGroup: import("styled-components").StyledComponent<"div", any, StyledButtonToggleGroupProps, never>;
-export declare const StyledHintText: import("styled-components").StyledComponent<"div", any, {
-    isDisabled?: boolean | undefined;
-}, never>;
 export default StyledButtonToggleGroup;

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

@@ -3,7 +3,7 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.default = exports.StyledHintText = void 0;
+exports.default = void 0;
 var _styledComponents = _interopRequireWildcard(require("styled-components"));
 var _styledSystem = require("styled-system");
 var _themes = require("../../../style/themes");
@@ -49,18 +49,6 @@ const StyledButtonToggleGroup = _styledComponents.default.div`
       width: ${`${inputWidth}%`};
     `}
 `;
-const StyledHintText = exports.StyledHintText = _styledComponents.default.div`
-  ::after {
-    content: " ";
-  }
-
-  margin-top: var(--spacing000);
-  margin-bottom: var(--spacing150);
-  color: ${({
-  isDisabled
-}) => isDisabled ? "var(--colorsUtilityYin030)" : "var(--colorsUtilityYin055)"};
-  font-size: 14px;
-`;
 StyledButtonToggleGroup.defaultProps = {
   theme: _themes.baseTheme
 };

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

@@ -1,18 +1,13 @@
 import React from "react";
 import { StyledButtonToggleProps } from "./button-toggle.style";
-export interface ButtonToggleProps extends Partial<StyledButtonToggleProps> {
+import { TagProps } from "../../__internal__/utils/helpers/tags";
+export interface ButtonToggleProps extends Partial<StyledButtonToggleProps>, TagProps {
     /** Prop to specify the aria-label of the component */
     "aria-label"?: string;
     /** Prop to specify the aria-labelledby property of the component */
     "aria-labelledby"?: string;
     /** 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. */
-    "data-element"?: string;
-    /** Identifier used for testing purposes, applied to the root element of the component. */
-    "data-role"?: string;
     /** Callback triggered by blur event on the button. */
     onBlur?: (ev: React.FocusEvent<HTMLButtonElement>) => void;
     /** Callback triggered by focus event on the button. */
@@ -23,6 +18,8 @@ export interface ButtonToggleProps extends Partial<StyledButtonToggleProps> {
     pressed?: boolean;
     /** An optional string by which to identify the button in either an onClick handler, or an onChange handler on the parent ButtonToggleGroup. */
     value?: string;
+    /** @private @internal @ignore */
+    "data-component"?: string;
 }
 export declare const ButtonToggle: {
     ({ "aria-label": ariaLabel, "aria-labelledby": ariaLabelledBy, buttonIcon, buttonIconSize, children, "data-component": dataComponent, "data-element": dataElement, "data-role": dataRole, disabled, onBlur, onFocus, onClick, pressed, size, value, }: ButtonToggleProps): React.JSX.Element;