carbon-react 149.0.2 → 150.1.0

package/esm/__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/esm/__internal__/hint-text/hint-text.component.js

@@ -0,0 +1,34 @@
+import React, { useContext } from "react";
+import PropTypes from "prop-types";
+import StyledHintText from "./hint-text.style";
+import NewValidationContext from "../../components/carbon-provider/__internal__/new-validation.context";
+export const HintText = ({
+  align,
+  children,
+  fontWeight,
+  id,
+  isComponentInline = false,
+  isDarkBackground = false,
+  isDisabled = false,
+  marginBottom = "var(--spacing100)",
+  marginTop = "var(--spacing000)",
+  maxWidth
+}) => {
+  const {
+    validationRedesignOptIn
+  } = useContext(NewValidationContext);
+  if (isComponentInline && !validationRedesignOptIn) return null;
+  return /*#__PURE__*/React.createElement(StyledHintText, {
+    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);
+};
+export default HintText;

package/esm/__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/esm/__internal__/hint-text/hint-text.style.js

@@ -0,0 +1,50 @@
+import styled, { css } from "styled-components";
+const getColor = (isDarkBackground, isDisabled) => {
+  if (isDarkBackground) {
+    return "var(--colorsUtilityYang080)";
+  }
+  if (isDisabled) {
+    return "var(--colorsUtilityYin030)";
+  }
+  return "var(--colorsUtilityYin055)";
+};
+const StyledHintText = styled.div`
+  display: flex;
+  align-items: center;
+  font-size: 14px;
+
+  ${({
+  align
+}) => css`
+    justify-content: ${align !== "right" ? "flex-start" : "flex-end"};
+  `}
+  margin-bottom: ${({
+  marginBottom
+}) => marginBottom};
+  margin-top: ${({
+  marginTop
+}) => marginTop};
+
+  ${({
+  isDarkBackground,
+  isDisabled
+}) => css`
+    color: ${getColor(isDarkBackground, isDisabled)};
+  `}
+
+  ${({
+  fontWeight
+}) => fontWeight && css`
+      font-weight: ${fontWeight};
+    `}
+  ${({
+  maxWidth
+}) => maxWidth && css`
+      max-width: ${maxWidth};
+    `}
+
+  ::after {
+    content: " ";
+  }
+`;
+export default StyledHintText;

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

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

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

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

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

@@ -4,7 +4,7 @@ import PropTypes from "prop-types";
 import invariant from "invariant";
 import FormField from "../../../__internal__/form-field";
 import guid from "../../../__internal__/utils/helpers/guid";
-import StyledButtonToggleGroup, { StyledHintText } from "./button-toggle-group.style";
+import StyledButtonToggleGroup from "./button-toggle-group.style";
 import { ButtonToggle } from "..";
 import { filterStyledSystemMarginProps } from "../../../style/utils";
 import { TooltipProvider } from "../../../__internal__/tooltip-provider";
@@ -12,6 +12,7 @@ import { InputGroupBehaviour } from "../../../__internal__/input-behaviour";
 import Events from "../../../__internal__/utils/helpers/events";
 import NewValidationContext from "../../carbon-provider/__internal__/new-validation.context";
 import ButtonToggleGroupContext from "./__internal__/button-toggle-group.context";
+import HintText from "../../../__internal__/hint-text";
 const BUTTON_TOGGLE_SELECTOR = '[data-element="button-toggle-button"]';
 const ButtonToggleGroup = ({
   children,
@@ -129,9 +130,10 @@ const ButtonToggleGroup = ({
       childButtonCallbackRef,
       hintTextId: inputHint ? hintTextId.current : undefined
     }
-  }, inputHint && /*#__PURE__*/React.createElement(StyledHintText, {
+  }, inputHint && /*#__PURE__*/React.createElement(HintText, {
     id: hintTextId.current,
-    isDisabled: disabled
+    isDisabled: disabled,
+    marginBottom: "var(--spacing150)"
   }, inputHint), /*#__PURE__*/React.createElement(StyledButtonToggleGroup, _extends({
     ref: wrapperRef
   }, label ? {

package/esm/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/esm/components/button-toggle/button-toggle-group/button-toggle-group.style.js

@@ -41,18 +41,6 @@ const StyledButtonToggleGroup = styled.div`
       width: ${`${inputWidth}%`};
     `}
 `;
-export const StyledHintText = styled.div`
-  ::after {
-    content: " ";
-  }
-
-  margin-top: var(--spacing000);
-  margin-bottom: var(--spacing150);
-  color: ${({
-  isDisabled
-}) => isDisabled ? "var(--colorsUtilityYin030)" : "var(--colorsUtilityYin055)"};
-  font-size: 14px;
-`;
 StyledButtonToggleGroup.defaultProps = {
   theme: baseTheme
 };

package/esm/components/checkbox/checkbox-group/checkbox-group.component.js

@@ -2,7 +2,7 @@ function _extends() { return _extends = Object.assign ? Object.assign.bind() : f
 import React, { useContext, useRef } from "react";
 import PropTypes from "prop-types";
 import tagComponent from "../../../__internal__/utils/helpers/tags/tags";
-import StyledCheckboxGroup, { StyledHintText } from "./checkbox-group.style";
+import StyledCheckboxGroup from "./checkbox-group.style";
 import Fieldset from "../../../__internal__/fieldset";
 import { filterStyledSystemMarginProps } from "../../../style/utils";
 import { TooltipProvider } from "../../../__internal__/tooltip-provider";
@@ -10,10 +10,11 @@ import FormSpacingProvider from "../../../__internal__/form-spacing-provider";
 import NewValidationContext from "../../carbon-provider/__internal__/new-validation.context";
 import ValidationMessage from "../../../__internal__/validation-message/validation-message.component";
 import Box from "../../box";
-import { ErrorBorder } from "../../textbox/textbox.style";
+import ErrorBorder from "../../textbox/textbox.style";
 import CheckboxGroupContext from "./__internal__/checkbox-group.context";
 import guid from "../../../__internal__/utils/helpers/guid";
 import useInputAccessibility from "../../../hooks/__internal__/useInputAccessibility";
+import HintText from "../../../__internal__/hint-text";
 export const CheckboxGroup = ({
   children,
   legend,
@@ -61,8 +62,10 @@ export const CheckboxGroup = ({
     "aria-describedby": combinedAriaDescribedBy
   }, tagComponent("checkboxgroup", rest), {
     blockGroupBehaviour: !(error || warning)
-  }, filterStyledSystemMarginProps(rest)), legendHelp && /*#__PURE__*/React.createElement(StyledHintText, {
-    id: inputHintId
+  }, filterStyledSystemMarginProps(rest)), legendHelp && /*#__PURE__*/React.createElement(HintText, {
+    align: legendAlign,
+    id: inputHintId,
+    marginTop: "-4px"
   }, legendHelp), /*#__PURE__*/React.createElement(Box, {
     position: "relative"
   }, /*#__PURE__*/React.createElement(ValidationMessage, {

package/esm/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/esm/components/checkbox/checkbox-group/checkbox-group.style.js

@@ -4,12 +4,6 @@ import StyledIcon from "../../icon/icon.style";
 import CheckboxStyle from "../checkbox.style";
 import { StyledLabelContainer } from "../../../__internal__/label/label.style";
 import StyledValidationIcon from "../../../__internal__/validations/validation-icon.style";
-export const StyledHintText = styled.div`
-  margin-top: -4px;
-  margin-bottom: 8px;
-  color: var(--colorsUtilityYin055);
-  font-size: 14px;
-`;
 const StyledCheckboxGroup = styled.div`
   display: flex;
   flex-direction: column;

package/esm/components/date/__internal__/date-fns-fp/index.d.ts

@@ -1,7 +1,7 @@
-export { default as format } from "date-fns/fp/format";
-export { default as formatISO } from "date-fns/fp/formatISO";
-export { default as isMatch } from "date-fns/fp/isMatch";
-export { default as isValid } from "date-fns/fp/isValid";
-export { default as parse } from "date-fns/fp/parse";
-export { default as parseWithOptions } from "date-fns/fp/parseWithOptions";
-export { default as parseISO } from "date-fns/fp/parseISO";
+export { format } from "date-fns/fp/format";
+export { formatISO } from "date-fns/fp/formatISO";
+export { isMatch } from "date-fns/fp/isMatch";
+export { isValid } from "date-fns/fp/isValid";
+export { parse } from "date-fns/fp/parse";
+export { parseWithOptions } from "date-fns/fp/parseWithOptions";
+export { parseISO } from "date-fns/fp/parseISO";

package/esm/components/date/__internal__/date-fns-fp/index.js

@@ -1,9 +1,9 @@
 // Separate index.ts to export only required sub-modules from date-fns/fp
 // import { format, formatISO, isMatch, parse, parseISO } from "date-fns/fp" adds extra 300kb to bundle size.
-export { default as format } from "date-fns/fp/format";
-export { default as formatISO } from "date-fns/fp/formatISO";
-export { default as isMatch } from "date-fns/fp/isMatch";
-export { default as isValid } from "date-fns/fp/isValid";
-export { default as parse } from "date-fns/fp/parse";
-export { default as parseWithOptions } from "date-fns/fp/parseWithOptions";
-export { default as parseISO } from "date-fns/fp/parseISO";
+export { format } from "date-fns/fp/format";
+export { formatISO } from "date-fns/fp/formatISO";
+export { isMatch } from "date-fns/fp/isMatch";
+export { isValid } from "date-fns/fp/isValid";
+export { parse } from "date-fns/fp/parse";
+export { parseWithOptions } from "date-fns/fp/parseWithOptions";
+export { parseISO } from "date-fns/fp/parseISO";

package/esm/components/date/__internal__/date-formats/index.d.ts

@@ -3,5 +3,5 @@ interface LocaleFormats {
     formats: string[];
     format: string;
 }
-declare const getFormatData: ({ code }: DateFnsLocale, dateFormatOverride?: string) => LocaleFormats;
+declare const getFormatData: (locale?: Partial<Pick<DateFnsLocale, "code">>, dateFormatOverride?: string) => LocaleFormats;
 export default getFormatData;

package/esm/components/date/__internal__/date-formats/index.js

@@ -70,9 +70,8 @@ const getTrailingChar = format => {
   const lastChar = format.split("").pop();
   return ["y", "M", "d"].includes(lastChar) ? "" : lastChar;
 };
-const getFormatData = ({
-  code = "en-GB"
-}, dateFormatOverride) => {
+const getFormatData = (locale, dateFormatOverride) => {
+  const code = locale?.code || "en-GB";
   if (dateFormatOverride) {
     const {
       format

package/esm/components/date/__internal__/date-picker/date-picker.component.js

@@ -40,12 +40,6 @@ export const DatePicker = ({
   const {
     weekStartsOn
   } = options || /* istanbul ignore next */{};
-  const monthsLong = useMemo(() => Array.from({
-    length: 12
-  }).map((_, i) => {
-    const month = localize?.month(i);
-    return month[0].toUpperCase() + month.slice(1);
-  }), [localize]);
   const weekdaysLong = useMemo(() => Array.from({
     length: 7
   }).map((_, i) => localize?.day(i)), [localize]);
@@ -156,10 +150,7 @@ export const DatePicker = ({
     disabled: getDisabledDays(minDate, maxDate),
     locale: {
       localize: {
-        ...defaultLocale.localize,
-        months: monthsLong,
-        weekdaysLong,
-        weekdaysShort
+        ...defaultLocale.localize
       }
     },
     selected: selectedDays,

package/esm/components/date/__internal__/utils.d.ts

@@ -1,4 +1,4 @@
-import { Matcher } from "react-day-picker";
+import type { Locale, Matcher } from "react-day-picker";
 export declare function isValidLocaleDate(date: string, locale: Locale): boolean;
 export declare function parseDate(formatString?: string, valueString?: string): Date | undefined;
 export declare function isDateValid(date?: Date): boolean | undefined;

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

@@ -8,12 +8,13 @@ import useUniqueId from "../../hooks/__internal__/useUniqueId";
 import useInputAccessibility from "../../hooks/__internal__/useInputAccessibility/useInputAccessibility";
 import ValidationMessage from "../../__internal__/validation-message";
 import { StyledHiddenFileInput, StyledFileInputPresentation } from "./file-input.style";
-import { StyledHintText, ErrorBorder } from "../textbox/textbox.style";
+import ErrorBorder from "../textbox/textbox.style";
 import ButtonMinor from "../button-minor";
 import Typography from "../typography";
 import FileUploadStatus from "./__internal__/file-upload-status";
 import Box from "../box";
 import useLocale from "../../hooks/__internal__/useLocale";
+import HintText from "../../__internal__/hint-text";
 const FileInput = /*#__PURE__*/React.forwardRef(({
   accept,
   buttonText,
@@ -114,7 +115,7 @@ const FileInput = /*#__PURE__*/React.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.createElement(React.Fragment, null, inputHint && /*#__PURE__*/React.createElement(StyledHintText, null, inputHint), /*#__PURE__*/React.createElement(Box, {
+  const input = /*#__PURE__*/React.createElement(React.Fragment, null, inputHint && /*#__PURE__*/React.createElement(HintText, null, inputHint), /*#__PURE__*/React.createElement(Box, {
     position: "relative"
   }, /*#__PURE__*/React.createElement(ValidationMessage, {
     error: error,

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

@@ -7,7 +7,7 @@ import Events from "../../__internal__/utils/helpers/events";
 import { StyledNumeralDate, StyledDateField, StyledFieldset } from "./numeral-date.style";
 import Textbox from "../textbox";
 import Box from "../box";
-import { ErrorBorder, StyledHintText } from "../textbox/textbox.style";
+import ErrorBorder from "../textbox/textbox.style";
 import ValidationMessage from "../../__internal__/validation-message";
 import guid from "../../__internal__/utils/helpers/guid";
 import useLocale from "../../hooks/__internal__/useLocale";
@@ -18,6 +18,7 @@ import Logger from "../../__internal__/utils/logger";
 import FieldHelp from "../../__internal__/field-help";
 import useIsAboveBreakpoint from "../../hooks/__internal__/useIsAboveBreakpoint";
 import useInputAccessibility from "../../hooks/__internal__/useInputAccessibility";
+import HintText from "../../__internal__/hint-text";
 let deprecateUncontrolledWarnTriggered = false;
 export const ALLOWED_DATE_FORMATS = [["dd", "mm", "yyyy"], ["mm", "dd", "yyyy"], ["yyyy", "mm", "dd"], ["dd", "mm"], ["mm", "dd"], ["mm", "yyyy"]];
 const incorrectDateFormatMessage = "Forbidden prop dateFormat supplied to NumeralDate. " + "Only one of these date formats is allowed: " + "['dd', 'mm', 'yyyy'], " + "['mm', 'dd', 'yyyy'], " + "['yyyy', 'mm', 'dd'], " + "['dd', 'mm'], " + "['mm', 'dd'], " + "['mm', 'yyyy']";
@@ -336,7 +337,8 @@ export const NumeralDate = ({
     isDisabled: disabled,
     name: name,
     "aria-describedby": combinedAriaDescribedBy
-  }, filterStyledSystemMarginProps(rest)), labelHelp && /*#__PURE__*/React.createElement(StyledHintText, {
+  }, filterStyledSystemMarginProps(rest)), labelHelp && /*#__PURE__*/React.createElement(HintText, {
+    align: labelAlign,
     id: inputHintId.current
   }, labelHelp), /*#__PURE__*/React.createElement(Box, {
     position: "relative",

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

@@ -3,7 +3,7 @@ import React, { useContext, useRef } from "react";
 import PropTypes from "prop-types";
 import tagComponent from "../../../__internal__/utils/helpers/tags/tags";
 import Fieldset from "../../../__internal__/fieldset";
-import RadioButtonGroupStyle, { StyledHintText } from "../radio-button-group/radio-button-group.style";
+import RadioButtonGroupStyle from "../radio-button-group/radio-button-group.style";
 import RadioButtonMapper from "../../../__internal__/radio-button-mapper/radio-button-mapper.component";
 import useIsAboveBreakpoint from "../../../hooks/__internal__/useIsAboveBreakpoint";
 import { filterStyledSystemMarginProps } from "../../../style/utils";
@@ -12,9 +12,10 @@ import Logger from "../../../__internal__/utils/logger";
 import NewValidationContext from "../../carbon-provider/__internal__/new-validation.context";
 import ValidationMessage from "../../../__internal__/validation-message/validation-message.component";
 import Box from "../../box";
-import { ErrorBorder } from "../../textbox/textbox.style";
 import guid from "../../../__internal__/utils/helpers/guid";
 import useInputAccessibility from "../../../hooks/__internal__/useInputAccessibility";
+import ErrorBorder from "../../textbox/textbox.style";
+import HintText from "../../../__internal__/hint-text";
 let deprecateUncontrolledWarnTriggered = false;
 export const RadioButtonGroup = ({
   children,
@@ -85,8 +86,10 @@ export const RadioButtonGroup = ({
     blockGroupBehaviour: !(error || warning)
   }, combinedAriaDescribedBy && {
     "aria-describedby": combinedAriaDescribedBy
-  }), legendHelp && /*#__PURE__*/React.createElement(StyledHintText, {
-    id: inputHintId
+  }), legendHelp && /*#__PURE__*/React.createElement(HintText, {
+    align: legendAlign,
+    id: inputHintId,
+    marginTop: "-4px"
   }, legendHelp), /*#__PURE__*/React.createElement(Box, {
     position: "relative"
   }, /*#__PURE__*/React.createElement(ValidationMessage, {

package/esm/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/esm/components/radio-button/radio-button-group/radio-button-group.style.js

@@ -1,10 +1,4 @@
 import styled, { css } from "styled-components";
-export const StyledHintText = styled.div`
-  margin-top: -4px;
-  margin-bottom: 8px;
-  color: var(--colorsUtilityYin055);
-  font-size: 14px;
-`;
 const RadioButtonGroupStyle = styled.div`
   ${({
   inline,

package/esm/components/switch/switch.component.js

@@ -10,9 +10,10 @@ import Logger from "../../__internal__/utils/logger";
 import ValidationMessage from "../../__internal__/validation-message/validation-message.component";
 import useFormSpacing from "../../hooks/__internal__/useFormSpacing";
 import useIsAboveBreakpoint from "../../hooks/__internal__/useIsAboveBreakpoint";
-import StyledSwitch, { ErrorBorder, StyledHintText } from "./switch.style";
+import StyledSwitch, { ErrorBorder } from "./switch.style";
 import SwitchSlider from "./__internal__/switch-slider.component";
 import guid from "../../__internal__/utils/helpers/guid";
+import HintText from "../../__internal__/hint-text";
 let deprecateUncontrolledWarnTriggered = false;
 const Switch = /*#__PURE__*/React.forwardRef(({
   autoFocus,
@@ -207,10 +208,13 @@ const Switch = /*#__PURE__*/React.forwardRef(({
     mb: labelInline ? 0 : 1,
     mr: reverse ? 0 : 1,
     ml: reverse ? 0 : 1
-  }, /*#__PURE__*/React.createElement(StyledHintText, {
+  }, /*#__PURE__*/React.createElement(HintText, {
     "data-role": "hint-text",
+    fontWeight: "400",
     id: inputHintId.current,
-    isDarkBackground: isDarkBackground
+    isDarkBackground: isDarkBackground,
+    marginTop: "8px",
+    maxWidth: "160px"
   }, labelHelp))), /*#__PURE__*/React.createElement(Box, {
     ml: reverse ? errorMargin : 0,
     mr: !reverse ? errorMargin : 0,

package/esm/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/esm/components/switch/switch.style.js

@@ -27,18 +27,6 @@ export const ErrorBorder = styled.span`
     `;
 }}
 `;
-export const StyledHintText = styled.div`
-  margin-top: 8px;
-  margin-bottom: 8px;
-  font-size: 14px;
-  font-weight: 400;
-  max-width: 160px;
-  ${({
-  isDarkBackground
-}) => css`
-    color: ${isDarkBackground ? "var(--colorsUtilityYang080)" : "var(--colorsUtilityYin055)"};
-  `}
-`;
 const StyledSwitch = styled.div`
   ${({
   fieldHelpInline,

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

@@ -18,8 +18,9 @@ import { COMPONENT_PREFIX, markdownNodes, theme } from "./__internal__/constants
 import { validateUrl } from "./__internal__/helpers";
 import { AutoLinkerPlugin, CharacterCounterPlugin, ContentEditor, LinkMonitorPlugin, OnChangePlugin, Placeholder, ToolbarPlugin } from "./__internal__/plugins";
 import TextEditorContext from "./text-editor.context";
-import StyledTextEditor, { StyledEditorToolbarWrapper, StyledHintText, StyledValidationMessage, StyledWrapper } from "./text-editor.style";
+import StyledTextEditor, { StyledEditorToolbarWrapper, StyledValidationMessage, StyledWrapper } from "./text-editor.style";
 import { createEmpty } from "./__internal__";
+import HintText from "../../__internal__/hint-text";
 export const TextEditor = ({
   characterLimit = 3000,
   error,
@@ -110,9 +111,9 @@ export const TextEditor = ({
     isRequired: required,
     optional: isOptional,
     labelId: `${namespace}-label`
-  }, labelText), inputHint && /*#__PURE__*/React.createElement(StyledHintText, {
-    "data-role": `${namespace}-input-hint`,
-    id: `${namespace}-input-hint`
+  }, labelText), inputHint && /*#__PURE__*/React.createElement(HintText, {
+    id: `${namespace}-input-hint`,
+    marginBottom: "var(--spacing100)"
   }, inputHint), /*#__PURE__*/React.createElement(LexicalComposer, {
     initialConfig: initialConfig
   }, /*#__PURE__*/React.createElement(EditorRefPlugin, {

package/esm/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/esm/components/text-editor/text-editor.style.js

@@ -4,16 +4,6 @@ import addFocusStyling from "../../style/utils/add-focus-styling";
 export const StyledTextEditor = styled(Box)`
   position: relative;
 `;
-export const StyledHintText = styled.div`
-  ::after {
-    content: " ";
-  }
-
-  margin-top: var(--spacing000);
-  margin-bottom: var(--spacing150);
-  color: var(--colorsUtilityYin055);
-  font-size: 14px;
-`;
 export const StyledWrapper = styled.div`
   ${({
   error,

package/esm/components/textarea/textarea.component.js

@@ -12,11 +12,12 @@ import StyledTextarea, { DEFAULT_MIN_HEIGHT } from "./textarea.style";
 import { TooltipProvider } from "../../__internal__/tooltip-provider";
 import useInputAccessibility from "../../hooks/__internal__/useInputAccessibility";
 import NewValidationContext from "../carbon-provider/__internal__/new-validation.context";
-import { ErrorBorder, StyledHintText } from "../textbox/textbox.style";
+import ErrorBorder from "../textbox/textbox.style";
 import ValidationMessage from "../../__internal__/validation-message";
 import Box from "../box";
 import Logger from "../../__internal__/utils/logger";
 import useFormSpacing from "../../hooks/__internal__/useFormSpacing";
+import HintText from "../../__internal__/hint-text";
 let deprecateUncontrolledWarnTriggered = false;
 let warnBorderRadiusArrayTooLarge = false;
 const Textarea = /*#__PURE__*/React.forwardRef(({
@@ -244,7 +245,8 @@ const Textarea = /*#__PURE__*/React.forwardRef(({
     useValidationIcon: computeLabelPropValues(validationOnLabel),
     adaptiveLabelBreakpoint: adaptiveLabelBreakpoint,
     validationRedesignOptIn: validationRedesignOptIn
-  }, (inputHint || labelHelp && validationRedesignOptIn) && /*#__PURE__*/React.createElement(StyledHintText, {
+  }, (inputHint || labelHelp && validationRedesignOptIn) && /*#__PURE__*/React.createElement(HintText, {
+    align: labelAlign,
     id: inputHintId,
     "data-element": "input-hint"
   }, inputHint || labelHelp), validationRedesignOptIn ? /*#__PURE__*/React.createElement(Box, {

package/esm/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/esm/components/textbox/textbox.component.js

@@ -1,23 +1,24 @@
 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); }
 import React, { useContext, useRef, useState } from "react";
 import PropTypes from "prop-types";
-import { filterStyledSystemMarginProps } from "../../style/utils";
-import { Input, InputPresentation } from "../../__internal__/input";
-import InputIconToggle from "../../__internal__/input-icon-toggle";
+import Box from "../box";
 import FormField from "../../__internal__/form-field";
-import useUniqueId from "../../hooks/__internal__/useUniqueId";
+import HintText from "../../__internal__/hint-text";
+import { Input, InputPresentation } from "../../__internal__/input";
 import { InputBehaviour } from "../../__internal__/input-behaviour";
-import StyledPrefix from "./__internal__/prefix.style";
+import InputIconToggle from "../../__internal__/input-icon-toggle";
 import { TooltipProvider } from "../../__internal__/tooltip-provider";
-import useCharacterCount from "../../hooks/__internal__/useCharacterCount";
-import useInputAccessibility from "../../hooks/__internal__/useInputAccessibility/useInputAccessibility";
-import { ErrorBorder, StyledHintText } from "./textbox.style";
 import ValidationMessage from "../../__internal__/validation-message";
+import { filterStyledSystemMarginProps } from "../../style/utils";
 import NewValidationContext from "../carbon-provider/__internal__/new-validation.context";
 import NumeralDateContext from "../numeral-date/__internal__/numeral-date.context";
-import Box from "../box";
 import Logger from "../../__internal__/utils/logger";
+import useCharacterCount from "../../hooks/__internal__/useCharacterCount";
+import useUniqueId from "../../hooks/__internal__/useUniqueId";
 import guid from "../../__internal__/utils/helpers/guid";
+import useInputAccessibility from "../../hooks/__internal__/useInputAccessibility/useInputAccessibility";
+import ErrorBorder from "./textbox.style";
+import StyledPrefix from "./__internal__/prefix.style";
 export const ALIGN_DEFAULT = "left";
 export const SIZE_DEFAULT = "medium";
 export const LABEL_WIDTH_DEFAULT = 30;
@@ -207,9 +208,11 @@ const Textbox = /*#__PURE__*/React.forwardRef(({
     "data-element": dataElement,
     validationIconId: validationRedesignOptIn ? undefined : validationId,
     validationRedesignOptIn: validationRedesignOptIn
-  }, filterStyledSystemMarginProps(props)), (inputHint || labelHelp && validationRedesignOptIn) && /*#__PURE__*/React.createElement(StyledHintText, {
+  }, filterStyledSystemMarginProps(props)), (inputHint || labelHelp && validationRedesignOptIn) && /*#__PURE__*/React.createElement(HintText, {
+    align: labelAlign,
+    "data-element": "input-hint",
     id: inputHintId,
-    "data-element": "input-hint"
+    isComponentInline: labelInline
   }, inputHint || labelHelp), validationRedesignOptIn ? /*#__PURE__*/React.createElement(Box, {
     position: "relative"
   }, /*#__PURE__*/React.createElement(ValidationMessage, {