carbon-react 150.0.0 → 150.1.0

package/esm/components/time/time.style.js

@@ -1,19 +1,8 @@
 import styled from "styled-components";
 import Label from "../../__internal__/label";
-export const StyledLabel = styled(Label)`
+const StyledLabel = styled(Label)`
   label {
     font-weight: var(--fontWeights400);
   }
 `;
-export const StyledHintText = styled.div`
-  ::after {
-    content: " ";
-  }
-
-  margin-top: var(--spacing000);
-  margin-bottom: var(--spacing100);
-  color: ${({
-  isDisabled
-}) => isDisabled ? "var(--colorsUtilityYin030)" : "var(--colorsUtilityYin055)"};
-  font-size: 14px;
-`;
+export default StyledLabel;

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

@@ -0,0 +1,25 @@
+import React from "react";
+export interface HintTextProps {
+    /** The alignment of the hint text */
+    align?: "left" | "right";
+    /** Children elements */
+    children?: React.ReactNode;
+    /** Sets the font weight for the hint text */
+    fontWeight?: string;
+    /** Sets the id for the component. */
+    id?: string;
+    /** Indicates whether the parent component is inline. */
+    isComponentInline?: boolean;
+    /** Indicates whether the parent component has a dark background. */
+    isDarkBackground?: boolean;
+    /** Indicates whether the parent component is disabled. */
+    isDisabled?: boolean;
+    /** Margin bottom for the hint text */
+    marginBottom?: string;
+    /** Margin top for the hint text */
+    marginTop?: string;
+    /** Max width for the hint text */
+    maxWidth?: string;
+}
+export declare const HintText: ({ align, children, fontWeight, id, isComponentInline, isDarkBackground, isDisabled, marginBottom, marginTop, maxWidth, }: HintTextProps) => React.JSX.Element | null;
+export default HintText;

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

@@ -0,0 +1,44 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = exports.HintText = void 0;
+var _react = _interopRequireWildcard(require("react"));
+var _propTypes = _interopRequireDefault(require("prop-types"));
+var _hintText = _interopRequireDefault(require("./hint-text.style"));
+var _newValidation = _interopRequireDefault(require("../../components/carbon-provider/__internal__/new-validation.context"));
+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; }
+const HintText = ({
+  align,
+  children,
+  fontWeight,
+  id,
+  isComponentInline = false,
+  isDarkBackground = false,
+  isDisabled = false,
+  marginBottom = "var(--spacing100)",
+  marginTop = "var(--spacing000)",
+  maxWidth
+}) => {
+  const {
+    validationRedesignOptIn
+  } = (0, _react.useContext)(_newValidation.default);
+  if (isComponentInline && !validationRedesignOptIn) return null;
+  return /*#__PURE__*/_react.default.createElement(_hintText.default, {
+    align: align,
+    "data-element": "input-hint",
+    "data-role": "hint-text",
+    fontWeight: fontWeight,
+    id: id,
+    isDarkBackground: isDarkBackground,
+    isDisabled: isDisabled,
+    marginBottom: marginBottom,
+    marginTop: marginTop,
+    maxWidth: maxWidth
+  }, children);
+};
+exports.HintText = HintText;
+var _default = exports.default = HintText;

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

@@ -0,0 +1,3 @@
+import { HintTextProps } from "./hint-text.component";
+declare const StyledHintText: import("styled-components").StyledComponent<"div", any, HintTextProps, never>;
+export default StyledHintText;

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

@@ -9,7 +9,7 @@ var _propTypes = _interopRequireDefault(require("prop-types"));
 var _invariant = _interopRequireDefault(require("invariant"));
 var _formField = _interopRequireDefault(require("../../../__internal__/form-field"));
 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 +17,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; }
@@ -138,9 +139,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 ? {

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/checkbox/checkbox-group/checkbox-group.component.js

@@ -7,7 +7,7 @@ exports.default = exports.CheckboxGroup = void 0;
 var _react = _interopRequireWildcard(require("react"));
 var _propTypes = _interopRequireDefault(require("prop-types"));
 var _tags = _interopRequireDefault(require("../../../__internal__/utils/helpers/tags/tags"));
-var _checkboxGroup = _interopRequireWildcard(require("./checkbox-group.style"));
+var _checkboxGroup = _interopRequireDefault(require("./checkbox-group.style"));
 var _fieldset = _interopRequireDefault(require("../../../__internal__/fieldset"));
 var _utils = require("../../../style/utils");
 var _tooltipProvider = require("../../../__internal__/tooltip-provider");
@@ -15,10 +15,11 @@ var _formSpacingProvider = _interopRequireDefault(require("../../../__internal__
 var _newValidation = _interopRequireDefault(require("../../carbon-provider/__internal__/new-validation.context"));
 var _validationMessage = _interopRequireDefault(require("../../../__internal__/validation-message/validation-message.component"));
 var _box = _interopRequireDefault(require("../../box"));
-var _textbox = require("../../textbox/textbox.style");
+var _textbox = _interopRequireDefault(require("../../textbox/textbox.style"));
 var _checkboxGroup2 = _interopRequireDefault(require("./__internal__/checkbox-group.context"));
 var _guid = _interopRequireDefault(require("../../../__internal__/utils/helpers/guid"));
 var _useInputAccessibility = _interopRequireDefault(require("../../../hooks/__internal__/useInputAccessibility"));
+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; }
@@ -70,15 +71,17 @@ const CheckboxGroup = ({
     "aria-describedby": combinedAriaDescribedBy
   }, (0, _tags.default)("checkboxgroup", rest), {
     blockGroupBehaviour: !(error || warning)
-  }, (0, _utils.filterStyledSystemMarginProps)(rest)), legendHelp && /*#__PURE__*/_react.default.createElement(_checkboxGroup.StyledHintText, {
-    id: inputHintId
+  }, (0, _utils.filterStyledSystemMarginProps)(rest)), legendHelp && /*#__PURE__*/_react.default.createElement(_hintText.default, {
+    align: legendAlign,
+    id: inputHintId,
+    marginTop: "-4px"
   }, legendHelp), /*#__PURE__*/_react.default.createElement(_box.default, {
     position: "relative"
   }, /*#__PURE__*/_react.default.createElement(_validationMessage.default, {
     error: error,
     warning: warning,
     validationId: validationId
-  }), (error || warning) && /*#__PURE__*/_react.default.createElement(_textbox.ErrorBorder, {
+  }), (error || warning) && /*#__PURE__*/_react.default.createElement(_textbox.default, {
     warning: !!(!error && warning),
     inline: inline
   }), /*#__PURE__*/_react.default.createElement(_checkboxGroup.default, {

package/lib/components/checkbox/checkbox-group/checkbox-group.style.d.ts

@@ -1,4 +1,3 @@
-export declare const StyledHintText: import("styled-components").StyledComponent<"div", any, {}, never>;
 declare const StyledCheckboxGroup: import("styled-components").StyledComponent<"div", any, {
     legendInline?: boolean | undefined;
     inline?: boolean | undefined;

package/lib/components/checkbox/checkbox-group/checkbox-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 _formField = _interopRequireDefault(require("../../../__internal__/form-field/form-field.style"));
 var _icon = _interopRequireDefault(require("../../icon/icon.style"));
@@ -13,12 +13,6 @@ var _validationIcon = _interopRequireDefault(require("../../../__internal__/vali
 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; }
-const StyledHintText = exports.StyledHintText = _styledComponents.default.div`
-  margin-top: -4px;
-  margin-bottom: 8px;
-  color: var(--colorsUtilityYin055);
-  font-size: 14px;
-`;
 const StyledCheckboxGroup = _styledComponents.default.div`
   display: flex;
   flex-direction: column;

package/lib/components/file-input/file-input.component.js

@@ -13,12 +13,13 @@ var _useUniqueId = _interopRequireDefault(require("../../hooks/__internal__/useU
 var _useInputAccessibility = _interopRequireDefault(require("../../hooks/__internal__/useInputAccessibility/useInputAccessibility"));
 var _validationMessage = _interopRequireDefault(require("../../__internal__/validation-message"));
 var _fileInput = require("./file-input.style");
-var _textbox = require("../textbox/textbox.style");
+var _textbox = _interopRequireDefault(require("../textbox/textbox.style"));
 var _buttonMinor = _interopRequireDefault(require("../button-minor"));
 var _typography = _interopRequireDefault(require("../typography"));
 var _fileUploadStatus = _interopRequireDefault(require("./__internal__/file-upload-status"));
 var _box = _interopRequireDefault(require("../box"));
 var _useLocale = _interopRequireDefault(require("../../hooks/__internal__/useLocale"));
+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; }
@@ -123,12 +124,12 @@ const FileInput = exports.FileInput = /*#__PURE__*/_react.default.forwardRef(({
 
   // allow for single input that a single set of status props is provided
   const filesUploaded = Array.isArray(uploadStatus) ? uploadStatus : [uploadStatus];
-  const input = /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, inputHint && /*#__PURE__*/_react.default.createElement(_textbox.StyledHintText, null, inputHint), /*#__PURE__*/_react.default.createElement(_box.default, {
+  const input = /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, inputHint && /*#__PURE__*/_react.default.createElement(_hintText.default, null, inputHint), /*#__PURE__*/_react.default.createElement(_box.default, {
     position: "relative"
   }, /*#__PURE__*/_react.default.createElement(_validationMessage.default, {
     error: error,
     validationId: validationId
-  }), error && /*#__PURE__*/_react.default.createElement(_textbox.ErrorBorder, {
+  }), error && /*#__PURE__*/_react.default.createElement(_textbox.default, {
     warning: false
   }), /*#__PURE__*/_react.default.createElement(_fileInput.StyledHiddenFileInput, _extends({}, required && {
     required

package/lib/components/numeral-date/numeral-date.component.js

@@ -12,7 +12,7 @@ var _events = _interopRequireDefault(require("../../__internal__/utils/helpers/e
 var _numeralDate = require("./numeral-date.style");
 var _textbox = _interopRequireDefault(require("../textbox"));
 var _box = _interopRequireDefault(require("../box"));
-var _textbox2 = require("../textbox/textbox.style");
+var _textbox2 = _interopRequireDefault(require("../textbox/textbox.style"));
 var _validationMessage = _interopRequireDefault(require("../../__internal__/validation-message"));
 var _guid = _interopRequireDefault(require("../../__internal__/utils/helpers/guid"));
 var _useLocale = _interopRequireDefault(require("../../hooks/__internal__/useLocale"));
@@ -23,6 +23,7 @@ var _logger = _interopRequireDefault(require("../../__internal__/utils/logger"))
 var _fieldHelp = _interopRequireDefault(require("../../__internal__/field-help"));
 var _useIsAboveBreakpoint = _interopRequireDefault(require("../../hooks/__internal__/useIsAboveBreakpoint"));
 var _useInputAccessibility = _interopRequireDefault(require("../../hooks/__internal__/useInputAccessibility"));
+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; }
@@ -345,7 +346,8 @@ const NumeralDate = ({
     isDisabled: disabled,
     name: name,
     "aria-describedby": combinedAriaDescribedBy
-  }, (0, _utils.filterStyledSystemMarginProps)(rest)), labelHelp && /*#__PURE__*/_react.default.createElement(_textbox2.StyledHintText, {
+  }, (0, _utils.filterStyledSystemMarginProps)(rest)), labelHelp && /*#__PURE__*/_react.default.createElement(_hintText.default, {
+    align: labelAlign,
     id: inputHintId.current
   }, labelHelp), /*#__PURE__*/_react.default.createElement(_box.default, {
     position: "relative",
@@ -354,7 +356,7 @@ const NumeralDate = ({
     error: internalError,
     warning: internalWarning,
     validationId: validationId
-  }), /*#__PURE__*/_react.default.createElement(_textbox2.ErrorBorder, {
+  }), /*#__PURE__*/_react.default.createElement(_textbox2.default, {
     warning: !!(!internalError && internalWarning)
   })), renderInputs()));
 };

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

@@ -8,7 +8,7 @@ var _react = _interopRequireWildcard(require("react"));
 var _propTypes = _interopRequireDefault(require("prop-types"));
 var _tags = _interopRequireDefault(require("../../../__internal__/utils/helpers/tags/tags"));
 var _fieldset = _interopRequireDefault(require("../../../__internal__/fieldset"));
-var _radioButtonGroup = _interopRequireWildcard(require("../radio-button-group/radio-button-group.style"));
+var _radioButtonGroup = _interopRequireDefault(require("../radio-button-group/radio-button-group.style"));
 var _radioButtonMapper = _interopRequireDefault(require("../../../__internal__/radio-button-mapper/radio-button-mapper.component"));
 var _useIsAboveBreakpoint = _interopRequireDefault(require("../../../hooks/__internal__/useIsAboveBreakpoint"));
 var _utils = require("../../../style/utils");
@@ -17,9 +17,10 @@ var _logger = _interopRequireDefault(require("../../../__internal__/utils/logger
 var _newValidation = _interopRequireDefault(require("../../carbon-provider/__internal__/new-validation.context"));
 var _validationMessage = _interopRequireDefault(require("../../../__internal__/validation-message/validation-message.component"));
 var _box = _interopRequireDefault(require("../../box"));
-var _textbox = require("../../textbox/textbox.style");
 var _guid = _interopRequireDefault(require("../../../__internal__/utils/helpers/guid"));
 var _useInputAccessibility = _interopRequireDefault(require("../../../hooks/__internal__/useInputAccessibility"));
+var _textbox = _interopRequireDefault(require("../../textbox/textbox.style"));
+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; }
@@ -94,15 +95,17 @@ const RadioButtonGroup = ({
     blockGroupBehaviour: !(error || warning)
   }, combinedAriaDescribedBy && {
     "aria-describedby": combinedAriaDescribedBy
-  }), legendHelp && /*#__PURE__*/_react.default.createElement(_radioButtonGroup.StyledHintText, {
-    id: inputHintId
+  }), legendHelp && /*#__PURE__*/_react.default.createElement(_hintText.default, {
+    align: legendAlign,
+    id: inputHintId,
+    marginTop: "-4px"
   }, legendHelp), /*#__PURE__*/_react.default.createElement(_box.default, {
     position: "relative"
   }, /*#__PURE__*/_react.default.createElement(_validationMessage.default, {
     error: error,
     warning: warning,
     validationId: validationId
-  }), (error || warning) && /*#__PURE__*/_react.default.createElement(_textbox.ErrorBorder, {
+  }), (error || warning) && /*#__PURE__*/_react.default.createElement(_textbox.default, {
     "data-role": "radio-error-border",
     inline: inline,
     warning: !!(!error && warning)

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

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

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

@@ -3,16 +3,10 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.default = exports.StyledHintText = void 0;
+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 StyledHintText = exports.StyledHintText = _styledComponents.default.div`
-  margin-top: -4px;
-  margin-bottom: 8px;
-  color: var(--colorsUtilityYin055);
-  font-size: 14px;
-`;
 const RadioButtonGroupStyle = _styledComponents.default.div`
   ${({
   inline,

package/lib/components/switch/switch.component.js

@@ -18,6 +18,7 @@ var _useIsAboveBreakpoint = _interopRequireDefault(require("../../hooks/__intern
 var _switch = _interopRequireWildcard(require("./switch.style"));
 var _switchSlider = _interopRequireDefault(require("./__internal__/switch-slider.component"));
 var _guid = _interopRequireDefault(require("../../__internal__/utils/helpers/guid"));
+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; }
@@ -216,10 +217,13 @@ const Switch = exports.Switch = /*#__PURE__*/_react.default.forwardRef(({
     mb: labelInline ? 0 : 1,
     mr: reverse ? 0 : 1,
     ml: reverse ? 0 : 1
-  }, /*#__PURE__*/_react.default.createElement(_switch.StyledHintText, {
+  }, /*#__PURE__*/_react.default.createElement(_hintText.default, {
     "data-role": "hint-text",
+    fontWeight: "400",
     id: inputHintId.current,
-    isDarkBackground: isDarkBackground
+    isDarkBackground: isDarkBackground,
+    marginTop: "8px",
+    maxWidth: "160px"
   }, labelHelp))), /*#__PURE__*/_react.default.createElement(_box.default, {
     ml: reverse ? errorMargin : 0,
     mr: !reverse ? errorMargin : 0,

package/lib/components/switch/switch.style.d.ts

@@ -1,11 +1,7 @@
-interface StyledHintTextProps {
-    isDarkBackground?: boolean;
-}
 export declare const ErrorBorder: import("styled-components").StyledComponent<"span", any, {
     reverse: boolean;
     warning: boolean;
     isDarkBackground: boolean;
 }, never>;
-export declare const StyledHintText: import("styled-components").StyledComponent<"div", any, StyledHintTextProps, never>;
 declare const StyledSwitch: import("styled-components").StyledComponent<"div", any, {}, never>;
 export default StyledSwitch;

package/lib/components/switch/switch.style.js

@@ -3,7 +3,7 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.default = exports.StyledHintText = exports.ErrorBorder = void 0;
+exports.default = exports.ErrorBorder = void 0;
 var _styledComponents = _interopRequireWildcard(require("styled-components"));
 var _styledSystem = require("styled-system");
 var _checkableInput = require("../../__internal__/checkable-input/checkable-input.style");
@@ -36,18 +36,6 @@ const ErrorBorder = exports.ErrorBorder = _styledComponents.default.span`
     `;
 }}
 `;
-const StyledHintText = exports.StyledHintText = _styledComponents.default.div`
-  margin-top: 8px;
-  margin-bottom: 8px;
-  font-size: 14px;
-  font-weight: 400;
-  max-width: 160px;
-  ${({
-  isDarkBackground
-}) => (0, _styledComponents.css)`
-    color: ${isDarkBackground ? "var(--colorsUtilityYang080)" : "var(--colorsUtilityYin055)"};
-  `}
-`;
 const StyledSwitch = _styledComponents.default.div`
   ${({
   fieldHelpInline,

package/lib/components/text-editor/text-editor.component.js

@@ -25,6 +25,7 @@ var _plugins = require("./__internal__/plugins");
 var _textEditor = _interopRequireDefault(require("./text-editor.context"));
 var _textEditor2 = _interopRequireWildcard(require("./text-editor.style"));
 var _internal__ = require("./__internal__");
+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; }
@@ -120,9 +121,9 @@ const TextEditor = ({
     isRequired: required,
     optional: isOptional,
     labelId: `${namespace}-label`
-  }, labelText), inputHint && /*#__PURE__*/_react.default.createElement(_textEditor2.StyledHintText, {
-    "data-role": `${namespace}-input-hint`,
-    id: `${namespace}-input-hint`
+  }, labelText), inputHint && /*#__PURE__*/_react.default.createElement(_hintText.default, {
+    id: `${namespace}-input-hint`,
+    marginBottom: "var(--spacing100)"
   }, inputHint), /*#__PURE__*/_react.default.createElement(_LexicalComposer.LexicalComposer, {
     initialConfig: initialConfig
   }, /*#__PURE__*/_react.default.createElement(_LexicalEditorRefPlugin.EditorRefPlugin, {

package/lib/components/text-editor/text-editor.style.d.ts

@@ -11,7 +11,6 @@ interface StyledEditorToolbarWrapperProps {
     focused?: boolean;
 }
 export declare const StyledTextEditor: import("styled-components").StyledComponent<import("react").ForwardRefExoticComponent<import("../box").BoxProps & import("react").RefAttributes<HTMLDivElement>>, any, {}, never>;
-export declare const StyledHintText: import("styled-components").StyledComponent<"div", any, {}, never>;
 export declare const StyledWrapper: import("styled-components").StyledComponent<"div", any, StyledWrapperProps, never>;
 export declare const StyledEditorToolbarWrapper: import("styled-components").StyledComponent<"div", any, StyledEditorToolbarWrapperProps, never>;
 export declare const StyledValidationMessage: import("styled-components").StyledComponent<"div", any, StyledValidationMessageProps, never>;

package/lib/components/text-editor/text-editor.style.js

@@ -3,7 +3,7 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.default = exports.StyledWrapper = exports.StyledValidationMessage = exports.StyledTextEditor = exports.StyledHintText = exports.StyledEditorToolbarWrapper = void 0;
+exports.default = exports.StyledWrapper = exports.StyledValidationMessage = exports.StyledTextEditor = exports.StyledEditorToolbarWrapper = void 0;
 var _styledComponents = _interopRequireWildcard(require("styled-components"));
 var _box = _interopRequireDefault(require("../box"));
 var _addFocusStyling = _interopRequireDefault(require("../../style/utils/add-focus-styling"));
@@ -13,16 +13,6 @@ function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e;
 const StyledTextEditor = exports.StyledTextEditor = (0, _styledComponents.default)(_box.default)`
   position: relative;
 `;
-const StyledHintText = exports.StyledHintText = _styledComponents.default.div`
-  ::after {
-    content: " ";
-  }
-
-  margin-top: var(--spacing000);
-  margin-bottom: var(--spacing150);
-  color: var(--colorsUtilityYin055);
-  font-size: 14px;
-`;
 const StyledWrapper = exports.StyledWrapper = _styledComponents.default.div`
   ${({
   error,

package/lib/components/textarea/textarea.component.js

@@ -17,11 +17,12 @@ var _textarea = _interopRequireWildcard(require("./textarea.style"));
 var _tooltipProvider = require("../../__internal__/tooltip-provider");
 var _useInputAccessibility = _interopRequireDefault(require("../../hooks/__internal__/useInputAccessibility"));
 var _newValidation = _interopRequireDefault(require("../carbon-provider/__internal__/new-validation.context"));
-var _textbox = require("../textbox/textbox.style");
+var _textbox = _interopRequireDefault(require("../textbox/textbox.style"));
 var _validationMessage = _interopRequireDefault(require("../../__internal__/validation-message"));
 var _box = _interopRequireDefault(require("../box"));
 var _logger = _interopRequireDefault(require("../../__internal__/utils/logger"));
 var _useFormSpacing = _interopRequireDefault(require("../../hooks/__internal__/useFormSpacing"));
+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; }
@@ -253,7 +254,8 @@ const Textarea = exports.OriginalTextarea = exports.Textarea = /*#__PURE__*/_rea
     useValidationIcon: computeLabelPropValues(validationOnLabel),
     adaptiveLabelBreakpoint: adaptiveLabelBreakpoint,
     validationRedesignOptIn: validationRedesignOptIn
-  }, (inputHint || labelHelp && validationRedesignOptIn) && /*#__PURE__*/_react.default.createElement(_textbox.StyledHintText, {
+  }, (inputHint || labelHelp && validationRedesignOptIn) && /*#__PURE__*/_react.default.createElement(_hintText.default, {
+    align: labelAlign,
     id: inputHintId,
     "data-element": "input-hint"
   }, inputHint || labelHelp), validationRedesignOptIn ? /*#__PURE__*/_react.default.createElement(_box.default, {
@@ -262,7 +264,7 @@ const Textarea = exports.OriginalTextarea = exports.Textarea = /*#__PURE__*/_rea
     error: error,
     validationId: validationId,
     warning: warning
-  }), (error || warning) && /*#__PURE__*/_react.default.createElement(_textbox.ErrorBorder, {
+  }), (error || warning) && /*#__PURE__*/_react.default.createElement(_textbox.default, {
     warning: !!(!error && warning)
   }), input) : input), characterCount)));
 });