carbon-react 149.0.2 → 150.1.0

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)));
 });

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

@@ -1,8 +1,8 @@
 import React from "react";
 import { MarginProps } from "styled-system";
+import { IconType } from "../icon";
 import { CommonInputProps } from "../../__internal__/input";
 import { ValidationProps } from "../../__internal__/validations";
-import { IconType } from "../icon";
 export declare const ALIGN_DEFAULT = "left";
 export declare const SIZE_DEFAULT = "medium";
 export declare const LABEL_WIDTH_DEFAULT = 30;

package/lib/components/textbox/textbox.component.js

@@ -6,23 +6,24 @@ Object.defineProperty(exports, "__esModule", {
 exports.default = exports.Textbox = exports.SIZE_DEFAULT = exports.LABEL_WIDTH_DEFAULT = exports.LABEL_VALIDATION_DEFAULT = exports.ALIGN_DEFAULT = void 0;
 var _react = _interopRequireWildcard(require("react"));
 var _propTypes = _interopRequireDefault(require("prop-types"));
-var _utils = require("../../style/utils");
-var _input = require("../../__internal__/input");
-var _inputIconToggle = _interopRequireDefault(require("../../__internal__/input-icon-toggle"));
+var _box = _interopRequireDefault(require("../box"));
 var _formField = _interopRequireDefault(require("../../__internal__/form-field"));
-var _useUniqueId = _interopRequireDefault(require("../../hooks/__internal__/useUniqueId"));
+var _hintText = _interopRequireDefault(require("../../__internal__/hint-text"));
+var _input = require("../../__internal__/input");
 var _inputBehaviour = require("../../__internal__/input-behaviour");
-var _prefix = _interopRequireDefault(require("./__internal__/prefix.style"));
+var _inputIconToggle = _interopRequireDefault(require("../../__internal__/input-icon-toggle"));
 var _tooltipProvider = require("../../__internal__/tooltip-provider");
-var _useCharacterCount = _interopRequireDefault(require("../../hooks/__internal__/useCharacterCount"));
-var _useInputAccessibility = _interopRequireDefault(require("../../hooks/__internal__/useInputAccessibility/useInputAccessibility"));
-var _textbox = require("./textbox.style");
 var _validationMessage = _interopRequireDefault(require("../../__internal__/validation-message"));
+var _utils = require("../../style/utils");
 var _newValidation = _interopRequireDefault(require("../carbon-provider/__internal__/new-validation.context"));
 var _numeralDate = _interopRequireDefault(require("../numeral-date/__internal__/numeral-date.context"));
-var _box = _interopRequireDefault(require("../box"));
 var _logger = _interopRequireDefault(require("../../__internal__/utils/logger"));
+var _useCharacterCount = _interopRequireDefault(require("../../hooks/__internal__/useCharacterCount"));
+var _useUniqueId = _interopRequireDefault(require("../../hooks/__internal__/useUniqueId"));
 var _guid = _interopRequireDefault(require("../../__internal__/utils/helpers/guid"));
+var _useInputAccessibility = _interopRequireDefault(require("../../hooks/__internal__/useInputAccessibility/useInputAccessibility"));
+var _textbox = _interopRequireDefault(require("./textbox.style"));
+var _prefix = _interopRequireDefault(require("./__internal__/prefix.style"));
 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,16 +217,18 @@ const Textbox = exports.Textbox = /*#__PURE__*/_react.default.forwardRef(({
     "data-element": dataElement,
     validationIconId: validationRedesignOptIn ? undefined : validationId,
     validationRedesignOptIn: validationRedesignOptIn
-  }, (0, _utils.filterStyledSystemMarginProps)(props)), (inputHint || labelHelp && validationRedesignOptIn) && /*#__PURE__*/_react.default.createElement(_textbox.StyledHintText, {
+  }, (0, _utils.filterStyledSystemMarginProps)(props)), (inputHint || labelHelp && validationRedesignOptIn) && /*#__PURE__*/_react.default.createElement(_hintText.default, {
+    align: labelAlign,
+    "data-element": "input-hint",
     id: inputHintId,
-    "data-element": "input-hint"
+    isComponentInline: labelInline
   }, inputHint || labelHelp), validationRedesignOptIn ? /*#__PURE__*/_react.default.createElement(_box.default, {
     position: "relative"
   }, /*#__PURE__*/_react.default.createElement(_validationMessage.default, {
     error: error,
     validationId: validationId,
     warning: warning
-  }), !disableErrorBorder && (error || warning) && /*#__PURE__*/_react.default.createElement(_textbox.ErrorBorder, {
+  }), !disableErrorBorder && (error || warning) && /*#__PURE__*/_react.default.createElement(_textbox.default, {
     warning: !!(!error && warning)
   }), input) : input), characterCount));
 });

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

@@ -2,5 +2,4 @@ declare const ErrorBorder: import("styled-components").StyledComponent<"span", a
     warning: boolean;
     inline?: boolean | undefined;
 }, never>;
-declare const StyledHintText: import("styled-components").StyledComponent<"div", any, {}, never>;
-export { StyledHintText, ErrorBorder };
+export default ErrorBorder;

package/lib/components/textbox/textbox.style.js

@@ -3,11 +3,11 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.StyledHintText = exports.ErrorBorder = 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 ErrorBorder = exports.ErrorBorder = _styledComponents.default.span`
+const ErrorBorder = _styledComponents.default.span`
   ${({
   warning,
   inline
@@ -21,13 +21,4 @@ const ErrorBorder = exports.ErrorBorder = _styledComponents.default.span`
     top: 0px;
   `}
 `;
-const StyledHintText = exports.StyledHintText = _styledComponents.default.div`
-  ::after {
-    content: " ";
-  }
-
-  margin-top: 0px;
-  margin-bottom: 8px;
-  color: var(--colorsUtilityYin055);
-  font-size: 14px;
-`;
+var _default = exports.default = ErrorBorder;

package/lib/components/time/time.component.js

@@ -12,12 +12,13 @@ var _tags = _interopRequireDefault(require("../../__internal__/utils/helpers/tag
 var _useInputAccessibility = _interopRequireDefault(require("../../hooks/__internal__/useInputAccessibility"));
 var _fieldset = _interopRequireDefault(require("../../__internal__/fieldset"));
 var _box = _interopRequireDefault(require("../box"));
-var _textbox = require("../textbox/textbox.style");
+var _textbox = _interopRequireDefault(require("../textbox/textbox.style"));
 var _validationMessage = _interopRequireDefault(require("../../__internal__/validation-message"));
 var _number = _interopRequireDefault(require("../number"));
 var _typography = _interopRequireDefault(require("../typography"));
-var _time = require("./time.style");
+var _time = _interopRequireDefault(require("./time.style"));
 var _timeToggle = require("./__internal__/time-toggle");
+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; }
@@ -181,7 +182,8 @@ const Time = /*#__PURE__*/_react.default.forwardRef(({
     id: internalId.current
   }, rest, (0, _tags.default)("time", rest), {
     "aria-describedby": inputHint ? combinedAriaDescribedBy : ariaDescribedBy
-  }), inputHint && /*#__PURE__*/_react.default.createElement(_time.StyledHintText, {
+  }), inputHint && /*#__PURE__*/_react.default.createElement(_hintText.default, {
+    align: labelAlign,
     id: inputHintId.current,
     isDisabled: disabled
   }, inputHint), /*#__PURE__*/_react.default.createElement(_box.default, {
@@ -191,11 +193,11 @@ const Time = /*#__PURE__*/_react.default.forwardRef(({
     validationId: validationId,
     error: error,
     warning: warning
-  }), hasValidationFailure && /*#__PURE__*/_react.default.createElement(_textbox.ErrorBorder, {
+  }), hasValidationFailure && /*#__PURE__*/_react.default.createElement(_textbox.default, {
     warning: !!(!error && warning)
   }), /*#__PURE__*/_react.default.createElement(_box.default, {
     display: "flex"
-  }, /*#__PURE__*/_react.default.createElement("div", null, /*#__PURE__*/_react.default.createElement(_time.StyledLabel, {
+  }, /*#__PURE__*/_react.default.createElement("div", null, /*#__PURE__*/_react.default.createElement(_time.default, {
     "aria-label": hrsAriaLabel,
     htmlFor: internalHrsId.current,
     disabled: disabled,
@@ -223,7 +225,7 @@ const Time = /*#__PURE__*/_react.default.forwardRef(({
     isDisabled: disabled,
     variant: "span",
     mb: "-4px"
-  }, ":")), /*#__PURE__*/_react.default.createElement("div", null, /*#__PURE__*/_react.default.createElement(_time.StyledLabel, {
+  }, ":")), /*#__PURE__*/_react.default.createElement("div", null, /*#__PURE__*/_react.default.createElement(_time.default, {
     "aria-label": minsAriaLabel,
     htmlFor: internalMinsId.current,
     disabled: disabled,

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

@@ -1,6 +1,3 @@
 /// <reference types="react" />
-export declare const StyledLabel: import("styled-components").StyledComponent<import("react").MemoExoticComponent<({ align, as, children, disabled, error, help, helpIcon, htmlFor, info, inline, isDarkBackground, isRequired, labelId, optional, pr, pl, tooltipId, useValidationIcon, validationIconId, warning, width, className, "aria-label": ariaLabel, }: import("../../__internal__/label").LabelProps) => import("react").JSX.Element>, any, {}, never>;
-export declare const StyledHintText: import("styled-components").StyledComponent<"div", any, {
-    isDisabled?: boolean | undefined;
-    hasError?: boolean | undefined;
-}, never>;
+declare const StyledLabel: import("styled-components").StyledComponent<import("react").MemoExoticComponent<({ align, as, children, disabled, error, help, helpIcon, htmlFor, info, inline, isDarkBackground, isRequired, labelId, optional, pr, pl, tooltipId, useValidationIcon, validationIconId, warning, width, className, "aria-label": ariaLabel, }: import("../../__internal__/label").LabelProps) => import("react").JSX.Element>, any, {}, never>;
+export default StyledLabel;

package/lib/components/time/time.style.js

@@ -3,24 +3,13 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.StyledLabel = exports.StyledHintText = void 0;
+exports.default = void 0;
 var _styledComponents = _interopRequireDefault(require("styled-components"));
 var _label = _interopRequireDefault(require("../../__internal__/label"));
 function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
-const StyledLabel = exports.StyledLabel = (0, _styledComponents.default)(_label.default)`
+const StyledLabel = (0, _styledComponents.default)(_label.default)`
   label {
     font-weight: var(--fontWeights400);
   }
 `;
-const StyledHintText = exports.StyledHintText = _styledComponents.default.div`
-  ::after {
-    content: " ";
-  }
-
-  margin-top: var(--spacing000);
-  margin-bottom: var(--spacing100);
-  color: ${({
-  isDisabled
-}) => isDisabled ? "var(--colorsUtilityYin030)" : "var(--colorsUtilityYin055)"};
-  font-size: 14px;
-`;
+var _default = exports.default = StyledLabel;

package/lib/locales/de-de.js

@@ -4,8 +4,7 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = void 0;
-var _de = _interopRequireDefault(require("date-fns/locale/de"));
-function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+var _de = require("date-fns/locale/de");
 const isSingular = count => (typeof count === "string" ? parseInt(count) : count) === 1;
 const deDE = {
   locale: () => "de-DE",
@@ -37,7 +36,7 @@ const deDE = {
     visuallyHiddenHint: formattedCount => `Sie können bis zu ${formattedCount} Zeichen eingeben.`
   },
   date: {
-    dateFnsLocale: () => _de.default,
+    dateFnsLocale: () => _de.de,
     ariaLabels: {
       previousMonthButton: () => "Vorheriger Monat",
       nextMonthButton: () => "Nächster Monat"

package/lib/locales/en-ca.js

@@ -4,12 +4,11 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = void 0;
-var _enCA = _interopRequireDefault(require("date-fns/locale/en-CA"));
-function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+var _enCA = require("date-fns/locale/en-CA");
 const enCA = {
   locale: () => "en-CA",
   date: {
-    dateFnsLocale: () => _enCA.default,
+    dateFnsLocale: () => _enCA.enCA,
     ariaLabels: {
       previousMonthButton: () => "Previous month",
       nextMonthButton: () => "Next month"

package/lib/locales/en-gb.js

@@ -4,8 +4,7 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = void 0;
-var _enGB = _interopRequireDefault(require("date-fns/locale/en-GB"));
-function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+var _enGB = require("date-fns/locale/en-GB");
 const isSingular = count => (typeof count === "string" ? parseInt(count) : count) === 1;
 const enGB = {
   locale: () => "en-GB",
@@ -37,7 +36,7 @@ const enGB = {
     visuallyHiddenHint: formattedCount => `You can enter up to ${formattedCount} characters`
   },
   date: {
-    dateFnsLocale: () => _enGB.default,
+    dateFnsLocale: () => _enGB.enGB,
     ariaLabels: {
       previousMonthButton: () => "Previous month",
       nextMonthButton: () => "Next month"

package/lib/locales/en-us.js

@@ -4,12 +4,11 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = void 0;
-var _enUS = _interopRequireDefault(require("date-fns/locale/en-US"));
-function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+var _enUS = require("date-fns/locale/en-US");
 const enUS = {
   locale: () => "en-US",
   date: {
-    dateFnsLocale: () => _enUS.default,
+    dateFnsLocale: () => _enUS.enUS,
     ariaLabels: {
       previousMonthButton: () => "Previous month",
       nextMonthButton: () => "Next month"

package/lib/locales/es-es.js

@@ -4,8 +4,7 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = void 0;
-var _es = _interopRequireDefault(require("date-fns/locale/es"));
-function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+var _es = require("date-fns/locale/es");
 const isSingular = count => (typeof count === "string" ? parseInt(count) : count) === 1;
 const esES = {
   locale: () => "es-ES",
@@ -37,7 +36,7 @@ const esES = {
     visuallyHiddenHint: formattedCount => `Puedes introducir hasta ${formattedCount} caracteres.`
   },
   date: {
-    dateFnsLocale: () => _es.default,
+    dateFnsLocale: () => _es.es,
     ariaLabels: {
       previousMonthButton: () => "Mes anterior",
       nextMonthButton: () => "Mes siguiente"

package/lib/locales/fr-ca.js

@@ -4,8 +4,7 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = void 0;
-var _frCA = _interopRequireDefault(require("date-fns/locale/fr-CA"));
-function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+var _frCA = require("date-fns/locale/fr-CA");
 const isSingular = count => (typeof count === "string" ? parseInt(count) : count) === 1;
 const frCA = {
   locale: () => "fr-CA",
@@ -37,7 +36,7 @@ const frCA = {
     visuallyHiddenHint: formattedCount => `vous pouvez saisir jusqu'à ${formattedCount} caractères.`
   },
   date: {
-    dateFnsLocale: () => _frCA.default,
+    dateFnsLocale: () => _frCA.frCA,
     ariaLabels: {
       previousMonthButton: () => "Mois précédent",
       nextMonthButton: () => "Mois suivant"

package/lib/locales/fr-fr.js

@@ -4,8 +4,7 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = void 0;
-var _fr = _interopRequireDefault(require("date-fns/locale/fr"));
-function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+var _fr = require("date-fns/locale/fr");
 const isSingular = count => (typeof count === "string" ? parseInt(count) : count) === 1;
 const frFR = {
   locale: () => "fr-FR",
@@ -37,7 +36,7 @@ const frFR = {
     visuallyHiddenHint: formattedCount => `vous pouvez saisir jusqu'à ${formattedCount} caractères.`
   },
   date: {
-    dateFnsLocale: () => _fr.default,
+    dateFnsLocale: () => _fr.fr,
     ariaLabels: {
       previousMonthButton: () => "Mois précédent",
       nextMonthButton: () => "Mois suivant"

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "carbon-react",
-  "version": "149.0.2",
+  "version": "150.1.0",
   "description": "A library of reusable React components for easily building user interfaces.",
   "files": [
     "lib",
@@ -116,7 +116,6 @@
     "core-js": "^3.33.3",
     "css-loader": "^6.8.1",
     "cz-conventional-changelog": "^3.3.0",
-    "date-fns-tz": "^1.3.8",
     "dayjs": "^1.11.10",
     "eslint": "^8.55.0",
     "eslint-config-airbnb": "^19.0.0",
@@ -179,7 +178,7 @@
     "chalk": "^4.1.2",
     "classnames": "~2.3.2",
     "crypto-js": "^4.2.0",
-    "date-fns": "^2.30.0",
+    "date-fns": "^4.1.0",
     "immutable": "~3.8.2",
     "invariant": "^2.2.4",
     "lexical": "^0.21.0",