carbon-react 116.2.2 → 117.0.0

package/esm/__internal__/character-count/character-count.component.d.ts

@@ -1,7 +1,7 @@
 /// <reference types="react" />
 interface CharacterCountProps {
-    value: string;
-    limit: string;
+    value: number;
+    limit: number;
     isOverLimit: boolean;
     "data-element"?: string;
 }

package/esm/__internal__/character-count/character-count.component.js

@@ -1,22 +1,31 @@
 import React from "react";
 import PropTypes from "prop-types";
 import StyledCharacterCount from "./character-count.style";
+import useLocale from "../../hooks/__internal__/useLocale";
 
 const CharacterCount = ({
   value,
   limit,
   isOverLimit,
   "data-element": dataElement
-}) => /*#__PURE__*/React.createElement(StyledCharacterCount, {
-  "aria-live": "polite",
-  isOverLimit: isOverLimit,
-  "data-element": dataElement
-}, `${value}/${limit}`);
+}) => {
+  const limitMinusValue = +limit - +value;
+  const valueMinusLimit = +value - +limit;
+  const l = useLocale();
+
+  const getFormatNumber = (rawValue, locale) => new Intl.NumberFormat(locale).format(rawValue);
+
+  return /*#__PURE__*/React.createElement(StyledCharacterCount, {
+    "aria-live": "polite",
+    isOverLimit: isOverLimit,
+    "data-element": dataElement
+  }, !isOverLimit ? l.characterCount.charactersLeft(limitMinusValue, getFormatNumber(limitMinusValue, l.locale())) : l.characterCount.tooManyCharacters(valueMinusLimit, getFormatNumber(valueMinusLimit, l.locale())));
+};
 
 CharacterCount.propTypes = {
   "data-element": PropTypes.string,
   "isOverLimit": PropTypes.bool.isRequired,
-  "limit": PropTypes.string.isRequired,
-  "value": PropTypes.string.isRequired
+  "limit": PropTypes.number.isRequired,
+  "value": PropTypes.number.isRequired
 };
 export default CharacterCount;

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

@@ -27,7 +27,6 @@ export interface DateInputProps
     | "iconOnMouseDown"
     | "enforceCharacterLimit"
     | "characterLimit"
-    | "warnOverLimit"
     | "iconTabIndex"
   > {
   /** Boolean to allow the input to have an empty value */

package/esm/components/decimal/decimal.component.js

@@ -317,6 +317,7 @@ Decimal.propTypes = {
   "id": PropTypes.string,
   "info": PropTypes.oneOfType([PropTypes.string, PropTypes.bool]),
   "inlist": PropTypes.any,
+  "inputHint": PropTypes.string,
   "inputIcon": PropTypes.oneOf(["add", "admin", "alert_on", "alert", "analysis", "arrow_bottom_right_circle", "arrow_down", "arrow_left_boxed", "arrow_left_right_small", "arrow_left_small", "arrow_left", "arrow_right_small", "arrow_right", "arrow_top_left_circle", "arrow_up", "arrow", "arrows_left_right", "attach", "bank_with_card", "bank", "basket_with_squares", "basket", "bed", "bin", "block_arrow_right", "blocked_square", "blocked", "bold", "box_arrow_left", "boxed_shapes", "bulk_destroy", "bullet_list_dotted", "bullet_list_numbers", "bullet_list", "business", "calendar_today", "calendar", "call", "camera", "car_lock", "car_money", "car_repair", "card_view", "caret_down", "caret_large_down", "caret_large_left", "caret_large_right", "caret_large_up", "caret_left", "caret_right", "caret_up", "cart", "cash", "chart_bar", "chart_line", "chart_pie", "chat_notes", "chat", "chevron_down_thick", "chevron_down", "chevron_left_thick", "chevron_left", "chevron_right_thick", "chevron_right", "chevron_up_thick", "chevron_up", "circle_with_dots", "circles_connection", "clock", "close", "coins", "collaborate", "computer_clock", "connect", "construction", "contacts", "copy", "create", "credit_card_slash", "credit_card", "cross_circle", "cross", "csv", "dashboard", "delete", "delivery", "disconnect", "disputed", "document_right_align", "document_tick", "document_vertical_lines", "download", "draft", "drag_vertical", "drag", "drill", "dropdown", "duplicate", "edit", "edited", "ellipsis_horizontal", "ellipsis_vertical", "email_switch", "email", "entry", "envelope_dollar", "envelope_euro", "error_square", "error", "euro", "expand", "factory", "favourite_lined", "favourite", "fax", "feedback", "file_excel", "file_generic", "file_image", "file_pdf", "file_word", "files_leaning", "filter_new", "filter", "fit_height", "fit_width", "flag", "folder", "form_refresh", "gift", "go", "graduation_hat", "graph", "grid", "hand_cash_coins", "hand_cash_note", "help", "hide", "home", "image", "in_progress", "in_transit", "individual", "info", "italic", "key", "laptop", "ledger_arrow_left", "ledger_arrow_right", "ledger", "lightbulb_off", "lightbulb_on", "link", "list_view", "location", "locked", "logout", "lookup", "marker", "message", "minus_large", "minus", "mobile", "money_bag", "none", "old_warning", "palm_tree", "pause_circle", "pause", "pdf", "people_switch", "people", "percentage_boxed", "person_info", "person_tick", "person", "petrol_pump", "phone", "piggy_bank", "plane", "play_circle", "play", "plus_large", "plus", "pound", "print", "progress", "progressed", "question_hollow", "question_mark", "question", "refresh_clock", "refresh", "remove", "sage_coin", "save", "scan", "search", "services", "settings_old", "settings", "share", "shop", "sort_down", "sort_up", "spanner", "split_container", "split", "square_dot", "squares_nine", "stacked_boxes", "stacked_squares", "submitted", "sync", "tag", "talk", "theatre_masks", "three_boxes", "tick_circle", "tick_thick", "tick", "true_tick", "u_turn_left", "u_turn_right", "undo", "unlocked", "upload", "uploaded", "video", "view", "warning"]),
   "inputMode": PropTypes.oneOf(["decimal", "email", "none", "numeric", "search", "tel", "text", "url"]),
   "inputRef": PropTypes.func,

package/esm/components/grouped-character/grouped-character.component.js

@@ -190,7 +190,7 @@ GroupedCharacter.propTypes = {
   "autoFocus": PropTypes.bool,
   "autoSave": PropTypes.string,
   "capture": PropTypes.oneOfType([PropTypes.oneOf(["environment", "user"]), PropTypes.bool]),
-  "characterLimit": PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
+  "characterLimit": PropTypes.number,
   "checked": PropTypes.bool,
   "children": PropTypes.node,
   "className": PropTypes.string,
@@ -235,6 +235,7 @@ GroupedCharacter.propTypes = {
   "id": PropTypes.string,
   "info": PropTypes.oneOfType([PropTypes.string, PropTypes.bool]),
   "inlist": PropTypes.any,
+  "inputHint": PropTypes.string,
   "inputIcon": PropTypes.oneOf(["add", "admin", "alert_on", "alert", "analysis", "arrow_bottom_right_circle", "arrow_down", "arrow_left_boxed", "arrow_left_right_small", "arrow_left_small", "arrow_left", "arrow_right_small", "arrow_right", "arrow_top_left_circle", "arrow_up", "arrow", "arrows_left_right", "attach", "bank_with_card", "bank", "basket_with_squares", "basket", "bed", "bin", "block_arrow_right", "blocked_square", "blocked", "bold", "box_arrow_left", "boxed_shapes", "bulk_destroy", "bullet_list_dotted", "bullet_list_numbers", "bullet_list", "business", "calendar_today", "calendar", "call", "camera", "car_lock", "car_money", "car_repair", "card_view", "caret_down", "caret_large_down", "caret_large_left", "caret_large_right", "caret_large_up", "caret_left", "caret_right", "caret_up", "cart", "cash", "chart_bar", "chart_line", "chart_pie", "chat_notes", "chat", "chevron_down_thick", "chevron_down", "chevron_left_thick", "chevron_left", "chevron_right_thick", "chevron_right", "chevron_up_thick", "chevron_up", "circle_with_dots", "circles_connection", "clock", "close", "coins", "collaborate", "computer_clock", "connect", "construction", "contacts", "copy", "create", "credit_card_slash", "credit_card", "cross_circle", "cross", "csv", "dashboard", "delete", "delivery", "disconnect", "disputed", "document_right_align", "document_tick", "document_vertical_lines", "download", "draft", "drag_vertical", "drag", "drill", "dropdown", "duplicate", "edit", "edited", "ellipsis_horizontal", "ellipsis_vertical", "email_switch", "email", "entry", "envelope_dollar", "envelope_euro", "error_square", "error", "euro", "expand", "factory", "favourite_lined", "favourite", "fax", "feedback", "file_excel", "file_generic", "file_image", "file_pdf", "file_word", "files_leaning", "filter_new", "filter", "fit_height", "fit_width", "flag", "folder", "form_refresh", "gift", "go", "graduation_hat", "graph", "grid", "hand_cash_coins", "hand_cash_note", "help", "hide", "home", "image", "in_progress", "in_transit", "individual", "info", "italic", "key", "laptop", "ledger_arrow_left", "ledger_arrow_right", "ledger", "lightbulb_off", "lightbulb_on", "link", "list_view", "location", "locked", "logout", "lookup", "marker", "message", "minus_large", "minus", "mobile", "money_bag", "none", "old_warning", "palm_tree", "pause_circle", "pause", "pdf", "people_switch", "people", "percentage_boxed", "person_info", "person_tick", "person", "petrol_pump", "phone", "piggy_bank", "plane", "play_circle", "play", "plus_large", "plus", "pound", "print", "progress", "progressed", "question_hollow", "question_mark", "question", "refresh_clock", "refresh", "remove", "sage_coin", "save", "scan", "search", "services", "settings_old", "settings", "share", "shop", "sort_down", "sort_up", "spanner", "split_container", "split", "square_dot", "squares_nine", "stacked_boxes", "stacked_squares", "submitted", "sync", "tag", "talk", "theatre_masks", "three_boxes", "tick_circle", "tick_thick", "tick", "true_tick", "u_turn_left", "u_turn_right", "undo", "unlocked", "upload", "uploaded", "video", "view", "warning"]),
   "inputMode": PropTypes.oneOf(["decimal", "email", "none", "numeric", "search", "tel", "text", "url"]),
   "inputRef": PropTypes.func,
@@ -659,7 +660,6 @@ GroupedCharacter.propTypes = {
   "value": PropTypes.string,
   "vocab": PropTypes.string,
   "warning": PropTypes.oneOfType([PropTypes.string, PropTypes.bool]),
-  "warnOverLimit": PropTypes.bool,
   "width": PropTypes.oneOfType([PropTypes.number, PropTypes.string])
 };
 export { GroupedCharacter };

package/esm/components/i18n-provider/i18n-provider.component.js

@@ -24,6 +24,11 @@ I18nProvider.propTypes = {
     "batchSelection": PropTypes.shape({
       "selected": PropTypes.func.isRequired
     }),
+    "characterCount": PropTypes.shape({
+      "charactersLeft": PropTypes.func.isRequired,
+      "hintString": PropTypes.func.isRequired,
+      "tooManyCharacters": PropTypes.func.isRequired
+    }),
     "confirm": PropTypes.shape({
       "no": PropTypes.func.isRequired,
       "yes": PropTypes.func.isRequired

package/esm/components/number/number.component.js

@@ -115,7 +115,7 @@ Number.propTypes = {
   "autoFocus": PropTypes.bool,
   "autoSave": PropTypes.string,
   "capture": PropTypes.oneOfType([PropTypes.oneOf(["environment", "user"]), PropTypes.bool]),
-  "characterLimit": PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
+  "characterLimit": PropTypes.number,
   "checked": PropTypes.bool,
   "children": PropTypes.node,
   "className": PropTypes.string,
@@ -159,6 +159,7 @@ Number.propTypes = {
   "id": PropTypes.string,
   "info": PropTypes.oneOfType([PropTypes.string, PropTypes.bool]),
   "inlist": PropTypes.any,
+  "inputHint": PropTypes.string,
   "inputIcon": PropTypes.oneOf(["add", "admin", "alert_on", "alert", "analysis", "arrow_bottom_right_circle", "arrow_down", "arrow_left_boxed", "arrow_left_right_small", "arrow_left_small", "arrow_left", "arrow_right_small", "arrow_right", "arrow_top_left_circle", "arrow_up", "arrow", "arrows_left_right", "attach", "bank_with_card", "bank", "basket_with_squares", "basket", "bed", "bin", "block_arrow_right", "blocked_square", "blocked", "bold", "box_arrow_left", "boxed_shapes", "bulk_destroy", "bullet_list_dotted", "bullet_list_numbers", "bullet_list", "business", "calendar_today", "calendar", "call", "camera", "car_lock", "car_money", "car_repair", "card_view", "caret_down", "caret_large_down", "caret_large_left", "caret_large_right", "caret_large_up", "caret_left", "caret_right", "caret_up", "cart", "cash", "chart_bar", "chart_line", "chart_pie", "chat_notes", "chat", "chevron_down_thick", "chevron_down", "chevron_left_thick", "chevron_left", "chevron_right_thick", "chevron_right", "chevron_up_thick", "chevron_up", "circle_with_dots", "circles_connection", "clock", "close", "coins", "collaborate", "computer_clock", "connect", "construction", "contacts", "copy", "create", "credit_card_slash", "credit_card", "cross_circle", "cross", "csv", "dashboard", "delete", "delivery", "disconnect", "disputed", "document_right_align", "document_tick", "document_vertical_lines", "download", "draft", "drag_vertical", "drag", "drill", "dropdown", "duplicate", "edit", "edited", "ellipsis_horizontal", "ellipsis_vertical", "email_switch", "email", "entry", "envelope_dollar", "envelope_euro", "error_square", "error", "euro", "expand", "factory", "favourite_lined", "favourite", "fax", "feedback", "file_excel", "file_generic", "file_image", "file_pdf", "file_word", "files_leaning", "filter_new", "filter", "fit_height", "fit_width", "flag", "folder", "form_refresh", "gift", "go", "graduation_hat", "graph", "grid", "hand_cash_coins", "hand_cash_note", "help", "hide", "home", "image", "in_progress", "in_transit", "individual", "info", "italic", "key", "laptop", "ledger_arrow_left", "ledger_arrow_right", "ledger", "lightbulb_off", "lightbulb_on", "link", "list_view", "location", "locked", "logout", "lookup", "marker", "message", "minus_large", "minus", "mobile", "money_bag", "none", "old_warning", "palm_tree", "pause_circle", "pause", "pdf", "people_switch", "people", "percentage_boxed", "person_info", "person_tick", "person", "petrol_pump", "phone", "piggy_bank", "plane", "play_circle", "play", "plus_large", "plus", "pound", "print", "progress", "progressed", "question_hollow", "question_mark", "question", "refresh_clock", "refresh", "remove", "sage_coin", "save", "scan", "search", "services", "settings_old", "settings", "share", "shop", "sort_down", "sort_up", "spanner", "split_container", "split", "square_dot", "squares_nine", "stacked_boxes", "stacked_squares", "submitted", "sync", "tag", "talk", "theatre_masks", "three_boxes", "tick_circle", "tick_thick", "tick", "true_tick", "u_turn_left", "u_turn_right", "undo", "unlocked", "upload", "uploaded", "video", "view", "warning"]),
   "inputMode": PropTypes.oneOf(["decimal", "email", "none", "numeric", "search", "tel", "text", "url"]),
   "inputRef": PropTypes.func,
@@ -582,7 +583,6 @@ Number.propTypes = {
   "value": PropTypes.string,
   "vocab": PropTypes.string,
   "warning": PropTypes.oneOfType([PropTypes.string, PropTypes.bool]),
-  "warnOverLimit": PropTypes.bool,
   "width": PropTypes.oneOfType([PropTypes.number, PropTypes.string])
 };
 export { Number };

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

@@ -19,7 +19,7 @@ export interface TextareaProps extends ValidationProps, MarginProps, Omit<Common
     /** Automatically focus the input on component mount */
     autoFocus?: boolean;
     /** Character limit of the textarea */
-    characterLimit?: string | number;
+    characterLimit?: number;
     /** Type of the icon that will be rendered next to the input */
     children?: React.ReactNode;
     /** The visible width of the text control, in average character widths */
@@ -34,6 +34,8 @@ export interface TextareaProps extends ValidationProps, MarginProps, Omit<Common
     error?: boolean | string;
     /** Allows the Textareas Height to change based on user input */
     expandable?: boolean;
+    /** A hint string rendered before the input but after the label. Intended to describe the purpose or content of the input. */
+    inputHint?: string;
     /** Help content to be displayed under an input */
     fieldHelp?: React.ReactNode;
     /** Aria label for rendered help component */
@@ -89,8 +91,6 @@ export interface TextareaProps extends ValidationProps, MarginProps, Omit<Common
     validationOnLabel?: boolean;
     /** The value of the Textbox */
     value?: string;
-    /** Whether to display the character count message in red */
-    warnOverLimit?: boolean;
     /** Indicate that warning has occurred
     Pass string to display icon, tooltip and orange border
     Pass true boolean to only display orange border */

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

@@ -13,23 +13,22 @@ import StyledTextarea, { MIN_HEIGHT } from "./textarea.style";
 import { TooltipProvider } from "../../__internal__/tooltip-provider";
 import useInputAccessibility from "../../hooks/__internal__/useInputAccessibility";
 import { NewValidationContext } from "../carbon-provider/carbon-provider.component";
-import { ErrorBorder, StyledHintText } from "../textbox/textbox.style";
+import { ErrorBorder, StyledHintText, StyledInputHint } 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"; // TODO: Change characterLimit type to number - batch with other breaking changes
-
+import useFormSpacing from "../../hooks/__internal__/useFormSpacing";
 let deprecateInputRefWarnTriggered = false;
 const Textarea = /*#__PURE__*/React.forwardRef(({
   "aria-labelledby": ariaLabelledBy,
   autoFocus,
+  inputHint,
   fieldHelp,
   label,
   size,
   children,
   characterLimit,
   enforceCharacterLimit = true,
-  warnOverLimit = false,
   onChange,
   disabled = false,
   labelInline,
@@ -115,8 +114,7 @@ const Textarea = /*#__PURE__*/React.forwardRef(({
     label,
     fieldHelp
   });
-  const [maxLength, characterCount] = useCharacterCount(value, // TODO: Can be removed after the characterLimit type is changed to number
-  typeof characterLimit === "string" ? parseInt(characterLimit, 10) : characterLimit, warnOverLimit, enforceCharacterLimit);
+  const [maxLength, characterCount, characterCountHintId, characterCountHint] = useCharacterCount(value, characterLimit, enforceCharacterLimit);
   useEffect(() => {
     if (rows) {
       var _internalRef$current;
@@ -144,6 +142,12 @@ const Textarea = /*#__PURE__*/React.forwardRef(({
     };
   }, [expandable]);
   const hasIconInside = !!(inputIcon || validationIconId && !validationOnLabel);
+  const hintId = useRef(guid());
+  const characterCountHintIdValue = characterCount ? characterCountHintId : undefined;
+  const inputHintIdValue = inputHint ? hintId.current : undefined;
+  const hintIdValue = characterLimit ? characterCountHintIdValue : inputHintIdValue;
+  const ariaDescribedByValues = [validationRedesignOptIn ? undefined : ariaDescribedBy, hintIdValue];
+  const ariaDescribedByValue = ariaDescribedByValues.filter(Boolean).join(" ");
   const input = /*#__PURE__*/React.createElement(InputPresentation, {
     size: size,
     disabled: disabled,
@@ -156,7 +160,7 @@ const Textarea = /*#__PURE__*/React.forwardRef(({
   }, /*#__PURE__*/React.createElement(Input, _extends({
     "aria-invalid": !!error,
     "aria-labelledby": ariaLabelledBy,
-    "aria-describedby": validationRedesignOptIn ? undefined : ariaDescribedBy,
+    "aria-describedby": ariaDescribedByValue,
     autoFocus: autoFocus,
     name: name,
     value: value,
@@ -211,7 +215,10 @@ const Textarea = /*#__PURE__*/React.forwardRef(({
     useValidationIcon: computeLabelPropValues(validationOnLabel),
     adaptiveLabelBreakpoint: adaptiveLabelBreakpoint,
     validationRedesignOptIn: validationRedesignOptIn
-  }, validationRedesignOptIn && labelHelp && /*#__PURE__*/React.createElement(StyledHintText, null, labelHelp), validationRedesignOptIn ? /*#__PURE__*/React.createElement(Box, {
+  }, characterLimit || inputHint ? /*#__PURE__*/React.createElement(StyledInputHint, {
+    id: hintIdValue,
+    "data-element": "input-hint"
+  }, characterCountHint || inputHint) : null, validationRedesignOptIn && labelHelp && /*#__PURE__*/React.createElement(StyledHintText, null, labelHelp), validationRedesignOptIn ? /*#__PURE__*/React.createElement(Box, {
     position: "relative"
   }, /*#__PURE__*/React.createElement(ValidationMessage, {
     error: error,
@@ -282,7 +289,7 @@ Textarea.propTypes = {
   "autoFocus": PropTypes.bool,
   "autoSave": PropTypes.string,
   "capture": PropTypes.oneOfType([PropTypes.oneOf(["environment", "user"]), PropTypes.bool]),
-  "characterLimit": PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
+  "characterLimit": PropTypes.number,
   "checked": PropTypes.bool,
   "children": PropTypes.node,
   "className": PropTypes.string,
@@ -323,6 +330,7 @@ Textarea.propTypes = {
   "id": PropTypes.string,
   "info": PropTypes.oneOfType([PropTypes.string, PropTypes.bool]),
   "inlist": PropTypes.any,
+  "inputHint": PropTypes.string,
   "inputIcon": PropTypes.oneOf(["add", "admin", "alert_on", "alert", "analysis", "arrow_bottom_right_circle", "arrow_down", "arrow_left_boxed", "arrow_left_right_small", "arrow_left_small", "arrow_left", "arrow_right_small", "arrow_right", "arrow_top_left_circle", "arrow_up", "arrow", "arrows_left_right", "attach", "bank_with_card", "bank", "basket_with_squares", "basket", "bed", "bin", "block_arrow_right", "blocked_square", "blocked", "bold", "box_arrow_left", "boxed_shapes", "bulk_destroy", "bullet_list_dotted", "bullet_list_numbers", "bullet_list", "business", "calendar_today", "calendar", "call", "camera", "car_lock", "car_money", "car_repair", "card_view", "caret_down", "caret_large_down", "caret_large_left", "caret_large_right", "caret_large_up", "caret_left", "caret_right", "caret_up", "cart", "cash", "chart_bar", "chart_line", "chart_pie", "chat_notes", "chat", "chevron_down_thick", "chevron_down", "chevron_left_thick", "chevron_left", "chevron_right_thick", "chevron_right", "chevron_up_thick", "chevron_up", "circle_with_dots", "circles_connection", "clock", "close", "coins", "collaborate", "computer_clock", "connect", "construction", "contacts", "copy", "create", "credit_card_slash", "credit_card", "cross_circle", "cross", "csv", "dashboard", "delete", "delivery", "disconnect", "disputed", "document_right_align", "document_tick", "document_vertical_lines", "download", "draft", "drag_vertical", "drag", "drill", "dropdown", "duplicate", "edit", "edited", "ellipsis_horizontal", "ellipsis_vertical", "email_switch", "email", "entry", "envelope_dollar", "envelope_euro", "error_square", "error", "euro", "expand", "factory", "favourite_lined", "favourite", "fax", "feedback", "file_excel", "file_generic", "file_image", "file_pdf", "file_word", "files_leaning", "filter_new", "filter", "fit_height", "fit_width", "flag", "folder", "form_refresh", "gift", "go", "graduation_hat", "graph", "grid", "hand_cash_coins", "hand_cash_note", "help", "hide", "home", "image", "in_progress", "in_transit", "individual", "info", "italic", "key", "laptop", "ledger_arrow_left", "ledger_arrow_right", "ledger", "lightbulb_off", "lightbulb_on", "link", "list_view", "location", "locked", "logout", "lookup", "marker", "message", "minus_large", "minus", "mobile", "money_bag", "none", "old_warning", "palm_tree", "pause_circle", "pause", "pdf", "people_switch", "people", "percentage_boxed", "person_info", "person_tick", "person", "petrol_pump", "phone", "piggy_bank", "plane", "play_circle", "play", "plus_large", "plus", "pound", "print", "progress", "progressed", "question_hollow", "question_mark", "question", "refresh_clock", "refresh", "remove", "sage_coin", "save", "scan", "search", "services", "settings_old", "settings", "share", "shop", "sort_down", "sort_up", "spanner", "split_container", "split", "square_dot", "squares_nine", "stacked_boxes", "stacked_squares", "submitted", "sync", "tag", "talk", "theatre_masks", "three_boxes", "tick_circle", "tick_thick", "tick", "true_tick", "u_turn_left", "u_turn_right", "undo", "unlocked", "upload", "uploaded", "video", "view", "warning"]),
   "inputMode": PropTypes.oneOf(["decimal", "email", "none", "numeric", "search", "tel", "text", "url"]),
   "inputRef": PropTypes.func,
@@ -743,7 +751,6 @@ Textarea.propTypes = {
   "value": PropTypes.string,
   "vocab": PropTypes.string,
   "warning": PropTypes.oneOfType([PropTypes.string, PropTypes.bool]),
-  "warnOverLimit": PropTypes.bool,
   "width": PropTypes.oneOfType([PropTypes.number, PropTypes.string])
 };
 export { Textarea };

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

@@ -16,6 +16,8 @@ export interface CommonTextboxProps extends ValidationProps, MarginProps, Omit<C
     adaptiveLabelBreakpoint?: number;
     /** Integer to determine a timeout for the deferred callback */
     deferTimeout?: number;
+    /** A hint string rendered before the input but after the label. Intended to describe the purpose or content of the input. */
+    inputHint?: string;
     /** Help content to be displayed under an input */
     fieldHelp?: React.ReactNode;
     /**
@@ -91,11 +93,9 @@ export interface TextboxProps extends CommonTextboxProps {
     /** Container for DatePicker or SelectList components */
     positionedChildren?: React.ReactNode;
     /** Character limit of the textarea */
-    characterLimit?: string | number;
+    characterLimit?: number;
     /** Stop the user typing over the characterLimit */
     enforceCharacterLimit?: boolean;
-    /** Whether to display the character count message in red */
-    warnOverLimit?: boolean;
 }
 export declare const Textbox: React.ForwardRefExoticComponent<TextboxProps & React.RefAttributes<HTMLInputElement>>;
 export default Textbox;

package/esm/components/textbox/textbox.component.js

@@ -1,6 +1,6 @@
 function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
 
-import React, { useContext } from "react";
+import React, { useContext, useRef } from "react";
 import PropTypes from "prop-types";
 import { filterStyledSystemMarginProps } from "../../style/utils";
 import { Input, InputPresentation } from "../../__internal__/input";
@@ -12,12 +12,13 @@ import StyledPrefix from "./__internal__/prefix.style";
 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 { ErrorBorder, StyledInputHint, StyledHintText } from "./textbox.style";
 import ValidationMessage from "../../__internal__/validation-message";
 import { NewValidationContext } from "../carbon-provider/carbon-provider.component";
 import NumeralDateContext from "../numeral-date/numeral-date-context";
 import Box from "../box";
 import Logger from "../../__internal__/utils/logger";
+import guid from "../../__internal__/utils/helpers/guid";
 let deprecateInputRefWarnTriggered = false;
 const Textbox = /*#__PURE__*/React.forwardRef(({
   "aria-labelledby": ariaLabelledBy,
@@ -34,6 +35,7 @@ const Textbox = /*#__PURE__*/React.forwardRef(({
   labelSpacing,
   id,
   formattedValue,
+  inputHint,
   fieldHelp,
   error,
   warning,
@@ -70,13 +72,11 @@ const Textbox = /*#__PURE__*/React.forwardRef(({
   "data-role": dataRole,
   enforceCharacterLimit = true,
   characterLimit,
-  warnOverLimit = false,
   helpAriaLabel,
   ...props
 }, ref) => {
   const characterCountValue = typeof value === "string" ? value : "";
-  const [maxLength, characterCount] = useCharacterCount(characterCountValue, // TODO: Can be removed after the characterLimit type is changed to number
-  typeof characterLimit === "string" ? parseInt(characterLimit, 10) : characterLimit, warnOverLimit, enforceCharacterLimit);
+  const [maxLength, characterCount, characterCountHintId, characterCountHint] = useCharacterCount(characterCountValue, characterLimit, enforceCharacterLimit);
   const {
     validationRedesignOptIn
   } = useContext(NewValidationContext);
@@ -106,6 +106,12 @@ const Textbox = /*#__PURE__*/React.forwardRef(({
     label,
     fieldHelp
   });
+  const hintId = useRef(guid());
+  const characterCountHintIdValue = characterCount ? characterCountHintId : undefined;
+  const inputHintIdValue = inputHint ? hintId.current : undefined;
+  const hintIdValue = characterLimit ? characterCountHintIdValue : inputHintIdValue;
+  const ariaDescribedByValues = [validationRedesignOptIn ? undefined : ariaDescribedBy, hintIdValue];
+  const ariaDescribedByValue = ariaDescribedByValues.filter(Boolean).join(" ");
   const hasIconInside = !!(inputIcon || validationIconId && !validationOnLabel);
   const input = /*#__PURE__*/React.createElement(InputPresentation, {
     align: align,
@@ -128,7 +134,7 @@ const Textbox = /*#__PURE__*/React.forwardRef(({
     align: align,
     "aria-invalid": !!error,
     "aria-labelledby": ariaLabelledBy,
-    "aria-describedby": validationRedesignOptIn ? undefined : ariaDescribedBy,
+    "aria-describedby": ariaDescribedByValue,
     autoFocus: autoFocus,
     deferTimeout: deferTimeout,
     disabled: disabled,
@@ -189,7 +195,10 @@ const Textbox = /*#__PURE__*/React.forwardRef(({
     "data-element": dataElement,
     validationIconId: validationRedesignOptIn ? undefined : validationIconId,
     validationRedesignOptIn: validationRedesignOptIn
-  }, filterStyledSystemMarginProps(props)), validationRedesignOptIn && labelHelp && /*#__PURE__*/React.createElement(StyledHintText, null, labelHelp), validationRedesignOptIn ? /*#__PURE__*/React.createElement(Box, {
+  }, filterStyledSystemMarginProps(props)), characterLimit || inputHint ? /*#__PURE__*/React.createElement(StyledInputHint, {
+    id: hintIdValue,
+    "data-element": "input-hint"
+  }, characterCountHint || inputHint) : null, validationRedesignOptIn && labelHelp && /*#__PURE__*/React.createElement(StyledHintText, null, labelHelp), validationRedesignOptIn ? /*#__PURE__*/React.createElement(Box, {
     position: "relative"
   }, /*#__PURE__*/React.createElement(ValidationMessage, {
     error: error,
@@ -260,7 +269,7 @@ Textbox.propTypes = {
   "autoFocus": PropTypes.bool,
   "autoSave": PropTypes.string,
   "capture": PropTypes.oneOfType([PropTypes.oneOf(["environment", "user"]), PropTypes.bool]),
-  "characterLimit": PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
+  "characterLimit": PropTypes.number,
   "checked": PropTypes.bool,
   "children": PropTypes.node,
   "className": PropTypes.string,
@@ -304,6 +313,7 @@ Textbox.propTypes = {
   "id": PropTypes.string,
   "info": PropTypes.oneOfType([PropTypes.string, PropTypes.bool]),
   "inlist": PropTypes.any,
+  "inputHint": PropTypes.string,
   "inputIcon": PropTypes.oneOf(["add", "admin", "alert_on", "alert", "analysis", "arrow_bottom_right_circle", "arrow_down", "arrow_left_boxed", "arrow_left_right_small", "arrow_left_small", "arrow_left", "arrow_right_small", "arrow_right", "arrow_top_left_circle", "arrow_up", "arrow", "arrows_left_right", "attach", "bank_with_card", "bank", "basket_with_squares", "basket", "bed", "bin", "block_arrow_right", "blocked_square", "blocked", "bold", "box_arrow_left", "boxed_shapes", "bulk_destroy", "bullet_list_dotted", "bullet_list_numbers", "bullet_list", "business", "calendar_today", "calendar", "call", "camera", "car_lock", "car_money", "car_repair", "card_view", "caret_down", "caret_large_down", "caret_large_left", "caret_large_right", "caret_large_up", "caret_left", "caret_right", "caret_up", "cart", "cash", "chart_bar", "chart_line", "chart_pie", "chat_notes", "chat", "chevron_down_thick", "chevron_down", "chevron_left_thick", "chevron_left", "chevron_right_thick", "chevron_right", "chevron_up_thick", "chevron_up", "circle_with_dots", "circles_connection", "clock", "close", "coins", "collaborate", "computer_clock", "connect", "construction", "contacts", "copy", "create", "credit_card_slash", "credit_card", "cross_circle", "cross", "csv", "dashboard", "delete", "delivery", "disconnect", "disputed", "document_right_align", "document_tick", "document_vertical_lines", "download", "draft", "drag_vertical", "drag", "drill", "dropdown", "duplicate", "edit", "edited", "ellipsis_horizontal", "ellipsis_vertical", "email_switch", "email", "entry", "envelope_dollar", "envelope_euro", "error_square", "error", "euro", "expand", "factory", "favourite_lined", "favourite", "fax", "feedback", "file_excel", "file_generic", "file_image", "file_pdf", "file_word", "files_leaning", "filter_new", "filter", "fit_height", "fit_width", "flag", "folder", "form_refresh", "gift", "go", "graduation_hat", "graph", "grid", "hand_cash_coins", "hand_cash_note", "help", "hide", "home", "image", "in_progress", "in_transit", "individual", "info", "italic", "key", "laptop", "ledger_arrow_left", "ledger_arrow_right", "ledger", "lightbulb_off", "lightbulb_on", "link", "list_view", "location", "locked", "logout", "lookup", "marker", "message", "minus_large", "minus", "mobile", "money_bag", "none", "old_warning", "palm_tree", "pause_circle", "pause", "pdf", "people_switch", "people", "percentage_boxed", "person_info", "person_tick", "person", "petrol_pump", "phone", "piggy_bank", "plane", "play_circle", "play", "plus_large", "plus", "pound", "print", "progress", "progressed", "question_hollow", "question_mark", "question", "refresh_clock", "refresh", "remove", "sage_coin", "save", "scan", "search", "services", "settings_old", "settings", "share", "shop", "sort_down", "sort_up", "spanner", "split_container", "split", "square_dot", "squares_nine", "stacked_boxes", "stacked_squares", "submitted", "sync", "tag", "talk", "theatre_masks", "three_boxes", "tick_circle", "tick_thick", "tick", "true_tick", "u_turn_left", "u_turn_right", "undo", "unlocked", "upload", "uploaded", "video", "view", "warning"]),
   "inputMode": PropTypes.oneOf(["decimal", "email", "none", "numeric", "search", "tel", "text", "url"]),
   "inputRef": PropTypes.func,
@@ -727,7 +737,6 @@ Textbox.propTypes = {
   "value": PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.string), PropTypes.number, PropTypes.string]),
   "vocab": PropTypes.string,
   "warning": PropTypes.oneOfType([PropTypes.string, PropTypes.bool]),
-  "warnOverLimit": PropTypes.bool,
   "width": PropTypes.oneOfType([PropTypes.number, PropTypes.string])
 };
 export { Textbox };

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

@@ -1,5 +1,6 @@
 declare const ErrorBorder: import("styled-components").StyledComponent<"span", any, {
     warning: boolean;
 }, never>;
-declare const StyledHintText: import("styled-components").StyledComponent<"p", any, {}, never>;
-export { StyledHintText, ErrorBorder };
+declare const StyledInputHint: import("styled-components").StyledComponent<"p", any, {}, never>;
+declare const StyledHintText: import("styled-components").StyledComponent<"div", any, {}, never>;
+export { StyledHintText, ErrorBorder, StyledInputHint };

package/esm/components/textbox/textbox.style.js

@@ -12,10 +12,18 @@ const ErrorBorder = styled.span`
       top: 0px;
     `}
 `;
-const StyledHintText = styled.p`
+const StyledInputHint = styled.p`
+  display: block;
+  flex: 1;
+  margin-top: -3px;
+  margin-bottom: 8px;
+  color: var(--colorsUtilityYin055);
+  white-space: pre-wrap;
+`;
+const StyledHintText = styled.div`
   margin-top: 0px;
   margin-bottom: 8px;
   color: var(--colorsUtilityYin055);
   font-size: 14px;
 `;
-export { StyledHintText, ErrorBorder };
+export { StyledHintText, ErrorBorder, StyledInputHint };

package/esm/hooks/__internal__/useCharacterCount/useCharacterCount.d.ts

@@ -1,3 +1,8 @@
 /// <reference types="react" />
-declare const useCharacterCount: (value?: string, characterLimit?: number | undefined, warnOverLimit?: boolean, enforceCharacterLimit?: boolean) => [number | undefined, JSX.Element | null];
+declare const useCharacterCount: (value?: string, characterLimit?: number | undefined, enforceCharacterLimit?: boolean) => [
+    number | undefined,
+    JSX.Element | null,
+    string | undefined,
+    string | null
+];
 export default useCharacterCount;

package/esm/hooks/__internal__/useCharacterCount/useCharacterCount.js

@@ -1,12 +1,13 @@
-import React, { useMemo } from "react";
+import React, { useMemo, useRef } from "react";
 import CharacterCount from "../../../__internal__/character-count";
 import useLocale from "../useLocale";
+import guid from "../../../__internal__/utils/helpers/guid";
 
-const getFormatNumber = (value, locale) => new Intl.NumberFormat(locale).format(value);
-
-const useCharacterCount = (value = "", characterLimit, warnOverLimit = false, enforceCharacterLimit = true) => {
+const useCharacterCount = (value = "", characterLimit, enforceCharacterLimit = true) => {
   const isCharacterLimitValid = typeof characterLimit === "number" && !Number.isNaN(characterLimit);
   const l = useLocale();
+  const hintString = l.characterCount.hintString();
+  const hintId = useRef(guid());
   const isOverLimit = useMemo(() => {
     if (value && isCharacterLimitValid) {
       return value.length > characterLimit;
@@ -15,11 +16,11 @@ const useCharacterCount = (value = "", characterLimit, warnOverLimit = false, en
     return false;
   }, [value, characterLimit, isCharacterLimitValid]);
   return [enforceCharacterLimit && isCharacterLimitValid ? characterLimit : undefined, isCharacterLimitValid ? /*#__PURE__*/React.createElement(CharacterCount, {
-    isOverLimit: isOverLimit && warnOverLimit,
-    value: getFormatNumber(value.length, l.locale()),
-    limit: getFormatNumber(characterLimit, l.locale()),
+    isOverLimit: isOverLimit,
+    value: value.length,
+    limit: characterLimit,
     "data-element": "character-limit"
-  }) : null];
+  }) : null, hintId.current, isCharacterLimitValid ? hintString : null];
 };
 
 export default useCharacterCount;

package/esm/locales/en-gb.js

@@ -18,6 +18,11 @@ const enGB = {
     no: () => "No",
     yes: () => "Yes"
   },
+  characterCount: {
+    hintString: () => "Input contains a character counter",
+    tooManyCharacters: (count, formattedCount) => count === 1 ? `You have ${formattedCount} character too many` : `You have ${formattedCount} characters too many`,
+    charactersLeft: (count, formattedCount) => count === 1 ? `You have ${formattedCount} character remaining` : `You have ${formattedCount} characters remaining`
+  },
   date: {
     dateFnsLocale: () => enGBDateLocale
   },

package/esm/locales/locale.d.ts

@@ -11,6 +11,11 @@ interface Locale {
     batchSelection: {
         selected: (count: number | string) => string;
     };
+    characterCount: {
+        hintString: () => string;
+        tooManyCharacters: (count: number, formattedCount: string) => string;
+        charactersLeft: (count: number, formattedCount: string) => string;
+    };
     confirm: {
         no: () => string;
         yes: () => string;

package/esm/locales/pl-pl.d.ts

@@ -1,3 +1,5 @@
 import Locale from "./locale";
+export declare const PolishPlural: (singularNominativ: string, pluralNominativ: string, pluralGenitive: string, value: number) => string;
 declare const plPL: Locale;
+export { PolishPlural as PolishPlurals };
 export default plPL;

package/esm/locales/pl-pl.js

@@ -2,6 +2,17 @@ import { pl as plDateLocale } from "./date-fns-locales";
 
 const isSingular = count => (typeof count === "string" ? parseInt(count) : count) === 1;
 
+export const PolishPlural = (singularNominativ, pluralNominativ, pluralGenitive, value) => {
+  if (value === 1) {
+    return singularNominativ;
+  }
+
+  if (value % 10 >= 2 && value % 10 <= 4 && (value % 100 < 10 || value % 100 >= 20)) {
+    return pluralNominativ;
+  }
+
+  return pluralGenitive;
+};
 const plPL = {
   locale: () => "pl-PL",
   actions: {
@@ -18,6 +29,11 @@ const plPL = {
     no: () => "Nie",
     yes: () => "Tak"
   },
+  characterCount: {
+    hintString: () => "Pole zawiera licznik znaków",
+    tooManyCharacters: (count, formattedCount) => `Masz o ${formattedCount} ${PolishPlural("znak", "znaki", "znaków", count)} za dużo`,
+    charactersLeft: (count, formattedCount) => `Masz ${formattedCount} ${PolishPlural("pozostały", "pozostałe", "pozostałych", count)} ${PolishPlural("znak", "znaki", "znaków", count)}`
+  },
   date: {
     dateFnsLocale: () => plDateLocale
   },
@@ -135,4 +151,5 @@ const plPL = {
     }
   }
 };
+export { PolishPlural as PolishPlurals };
 export default plPL;

package/lib/__internal__/character-count/character-count.component.d.ts

@@ -1,7 +1,7 @@
 /// <reference types="react" />
 interface CharacterCountProps {
-    value: string;
-    limit: string;
+    value: number;
+    limit: number;
     isOverLimit: boolean;
     "data-element"?: string;
 }

package/lib/__internal__/character-count/character-count.component.js

@@ -11,6 +11,8 @@ var _propTypes = _interopRequireDefault(require("prop-types"));
 
 var _characterCount = _interopRequireDefault(require("./character-count.style"));
 
+var _useLocale = _interopRequireDefault(require("../../hooks/__internal__/useLocale"));
+
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
 const CharacterCount = ({
@@ -18,17 +20,25 @@ const CharacterCount = ({
   limit,
   isOverLimit,
   "data-element": dataElement
-}) => /*#__PURE__*/_react.default.createElement(_characterCount.default, {
-  "aria-live": "polite",
-  isOverLimit: isOverLimit,
-  "data-element": dataElement
-}, `${value}/${limit}`);
+}) => {
+  const limitMinusValue = +limit - +value;
+  const valueMinusLimit = +value - +limit;
+  const l = (0, _useLocale.default)();
+
+  const getFormatNumber = (rawValue, locale) => new Intl.NumberFormat(locale).format(rawValue);
+
+  return /*#__PURE__*/_react.default.createElement(_characterCount.default, {
+    "aria-live": "polite",
+    isOverLimit: isOverLimit,
+    "data-element": dataElement
+  }, !isOverLimit ? l.characterCount.charactersLeft(limitMinusValue, getFormatNumber(limitMinusValue, l.locale())) : l.characterCount.tooManyCharacters(valueMinusLimit, getFormatNumber(valueMinusLimit, l.locale())));
+};
 
 CharacterCount.propTypes = {
   "data-element": _propTypes.default.string,
   "isOverLimit": _propTypes.default.bool.isRequired,
-  "limit": _propTypes.default.string.isRequired,
-  "value": _propTypes.default.string.isRequired
+  "limit": _propTypes.default.number.isRequired,
+  "value": _propTypes.default.number.isRequired
 };
 var _default = CharacterCount;
 exports.default = _default;

package/lib/components/date/date.d.ts

@@ -27,7 +27,6 @@ export interface DateInputProps
     | "iconOnMouseDown"
     | "enforceCharacterLimit"
     | "characterLimit"
-    | "warnOverLimit"
     | "iconTabIndex"
   > {
   /** Boolean to allow the input to have an empty value */

package/lib/components/decimal/decimal.component.js

@@ -341,6 +341,7 @@ Decimal.propTypes = {
   "id": _propTypes.default.string,
   "info": _propTypes.default.oneOfType([_propTypes.default.string, _propTypes.default.bool]),
   "inlist": _propTypes.default.any,
+  "inputHint": _propTypes.default.string,
   "inputIcon": _propTypes.default.oneOf(["add", "admin", "alert_on", "alert", "analysis", "arrow_bottom_right_circle", "arrow_down", "arrow_left_boxed", "arrow_left_right_small", "arrow_left_small", "arrow_left", "arrow_right_small", "arrow_right", "arrow_top_left_circle", "arrow_up", "arrow", "arrows_left_right", "attach", "bank_with_card", "bank", "basket_with_squares", "basket", "bed", "bin", "block_arrow_right", "blocked_square", "blocked", "bold", "box_arrow_left", "boxed_shapes", "bulk_destroy", "bullet_list_dotted", "bullet_list_numbers", "bullet_list", "business", "calendar_today", "calendar", "call", "camera", "car_lock", "car_money", "car_repair", "card_view", "caret_down", "caret_large_down", "caret_large_left", "caret_large_right", "caret_large_up", "caret_left", "caret_right", "caret_up", "cart", "cash", "chart_bar", "chart_line", "chart_pie", "chat_notes", "chat", "chevron_down_thick", "chevron_down", "chevron_left_thick", "chevron_left", "chevron_right_thick", "chevron_right", "chevron_up_thick", "chevron_up", "circle_with_dots", "circles_connection", "clock", "close", "coins", "collaborate", "computer_clock", "connect", "construction", "contacts", "copy", "create", "credit_card_slash", "credit_card", "cross_circle", "cross", "csv", "dashboard", "delete", "delivery", "disconnect", "disputed", "document_right_align", "document_tick", "document_vertical_lines", "download", "draft", "drag_vertical", "drag", "drill", "dropdown", "duplicate", "edit", "edited", "ellipsis_horizontal", "ellipsis_vertical", "email_switch", "email", "entry", "envelope_dollar", "envelope_euro", "error_square", "error", "euro", "expand", "factory", "favourite_lined", "favourite", "fax", "feedback", "file_excel", "file_generic", "file_image", "file_pdf", "file_word", "files_leaning", "filter_new", "filter", "fit_height", "fit_width", "flag", "folder", "form_refresh", "gift", "go", "graduation_hat", "graph", "grid", "hand_cash_coins", "hand_cash_note", "help", "hide", "home", "image", "in_progress", "in_transit", "individual", "info", "italic", "key", "laptop", "ledger_arrow_left", "ledger_arrow_right", "ledger", "lightbulb_off", "lightbulb_on", "link", "list_view", "location", "locked", "logout", "lookup", "marker", "message", "minus_large", "minus", "mobile", "money_bag", "none", "old_warning", "palm_tree", "pause_circle", "pause", "pdf", "people_switch", "people", "percentage_boxed", "person_info", "person_tick", "person", "petrol_pump", "phone", "piggy_bank", "plane", "play_circle", "play", "plus_large", "plus", "pound", "print", "progress", "progressed", "question_hollow", "question_mark", "question", "refresh_clock", "refresh", "remove", "sage_coin", "save", "scan", "search", "services", "settings_old", "settings", "share", "shop", "sort_down", "sort_up", "spanner", "split_container", "split", "square_dot", "squares_nine", "stacked_boxes", "stacked_squares", "submitted", "sync", "tag", "talk", "theatre_masks", "three_boxes", "tick_circle", "tick_thick", "tick", "true_tick", "u_turn_left", "u_turn_right", "undo", "unlocked", "upload", "uploaded", "video", "view", "warning"]),
   "inputMode": _propTypes.default.oneOf(["decimal", "email", "none", "numeric", "search", "tel", "text", "url"]),
   "inputRef": _propTypes.default.func,

package/lib/components/grouped-character/grouped-character.component.js

@@ -211,7 +211,7 @@ GroupedCharacter.propTypes = {
   "autoFocus": _propTypes.default.bool,
   "autoSave": _propTypes.default.string,
   "capture": _propTypes.default.oneOfType([_propTypes.default.oneOf(["environment", "user"]), _propTypes.default.bool]),
-  "characterLimit": _propTypes.default.oneOfType([_propTypes.default.number, _propTypes.default.string]),
+  "characterLimit": _propTypes.default.number,
   "checked": _propTypes.default.bool,
   "children": _propTypes.default.node,
   "className": _propTypes.default.string,
@@ -256,6 +256,7 @@ GroupedCharacter.propTypes = {
   "id": _propTypes.default.string,
   "info": _propTypes.default.oneOfType([_propTypes.default.string, _propTypes.default.bool]),
   "inlist": _propTypes.default.any,
+  "inputHint": _propTypes.default.string,
   "inputIcon": _propTypes.default.oneOf(["add", "admin", "alert_on", "alert", "analysis", "arrow_bottom_right_circle", "arrow_down", "arrow_left_boxed", "arrow_left_right_small", "arrow_left_small", "arrow_left", "arrow_right_small", "arrow_right", "arrow_top_left_circle", "arrow_up", "arrow", "arrows_left_right", "attach", "bank_with_card", "bank", "basket_with_squares", "basket", "bed", "bin", "block_arrow_right", "blocked_square", "blocked", "bold", "box_arrow_left", "boxed_shapes", "bulk_destroy", "bullet_list_dotted", "bullet_list_numbers", "bullet_list", "business", "calendar_today", "calendar", "call", "camera", "car_lock", "car_money", "car_repair", "card_view", "caret_down", "caret_large_down", "caret_large_left", "caret_large_right", "caret_large_up", "caret_left", "caret_right", "caret_up", "cart", "cash", "chart_bar", "chart_line", "chart_pie", "chat_notes", "chat", "chevron_down_thick", "chevron_down", "chevron_left_thick", "chevron_left", "chevron_right_thick", "chevron_right", "chevron_up_thick", "chevron_up", "circle_with_dots", "circles_connection", "clock", "close", "coins", "collaborate", "computer_clock", "connect", "construction", "contacts", "copy", "create", "credit_card_slash", "credit_card", "cross_circle", "cross", "csv", "dashboard", "delete", "delivery", "disconnect", "disputed", "document_right_align", "document_tick", "document_vertical_lines", "download", "draft", "drag_vertical", "drag", "drill", "dropdown", "duplicate", "edit", "edited", "ellipsis_horizontal", "ellipsis_vertical", "email_switch", "email", "entry", "envelope_dollar", "envelope_euro", "error_square", "error", "euro", "expand", "factory", "favourite_lined", "favourite", "fax", "feedback", "file_excel", "file_generic", "file_image", "file_pdf", "file_word", "files_leaning", "filter_new", "filter", "fit_height", "fit_width", "flag", "folder", "form_refresh", "gift", "go", "graduation_hat", "graph", "grid", "hand_cash_coins", "hand_cash_note", "help", "hide", "home", "image", "in_progress", "in_transit", "individual", "info", "italic", "key", "laptop", "ledger_arrow_left", "ledger_arrow_right", "ledger", "lightbulb_off", "lightbulb_on", "link", "list_view", "location", "locked", "logout", "lookup", "marker", "message", "minus_large", "minus", "mobile", "money_bag", "none", "old_warning", "palm_tree", "pause_circle", "pause", "pdf", "people_switch", "people", "percentage_boxed", "person_info", "person_tick", "person", "petrol_pump", "phone", "piggy_bank", "plane", "play_circle", "play", "plus_large", "plus", "pound", "print", "progress", "progressed", "question_hollow", "question_mark", "question", "refresh_clock", "refresh", "remove", "sage_coin", "save", "scan", "search", "services", "settings_old", "settings", "share", "shop", "sort_down", "sort_up", "spanner", "split_container", "split", "square_dot", "squares_nine", "stacked_boxes", "stacked_squares", "submitted", "sync", "tag", "talk", "theatre_masks", "three_boxes", "tick_circle", "tick_thick", "tick", "true_tick", "u_turn_left", "u_turn_right", "undo", "unlocked", "upload", "uploaded", "video", "view", "warning"]),
   "inputMode": _propTypes.default.oneOf(["decimal", "email", "none", "numeric", "search", "tel", "text", "url"]),
   "inputRef": _propTypes.default.func,
@@ -680,7 +681,6 @@ GroupedCharacter.propTypes = {
   "value": _propTypes.default.string,
   "vocab": _propTypes.default.string,
   "warning": _propTypes.default.oneOfType([_propTypes.default.string, _propTypes.default.bool]),
-  "warnOverLimit": _propTypes.default.bool,
   "width": _propTypes.default.oneOfType([_propTypes.default.number, _propTypes.default.string])
 };
 GroupedCharacter.displayName = "GroupedCharacter";

package/lib/components/i18n-provider/i18n-provider.component.js

@@ -38,6 +38,11 @@ I18nProvider.propTypes = {
     "batchSelection": _propTypes.default.shape({
       "selected": _propTypes.default.func.isRequired
     }),
+    "characterCount": _propTypes.default.shape({
+      "charactersLeft": _propTypes.default.func.isRequired,
+      "hintString": _propTypes.default.func.isRequired,
+      "tooManyCharacters": _propTypes.default.func.isRequired
+    }),
     "confirm": _propTypes.default.shape({
       "no": _propTypes.default.func.isRequired,
       "yes": _propTypes.default.func.isRequired

package/lib/components/number/number.component.js

@@ -135,7 +135,7 @@ Number.propTypes = {
   "autoFocus": _propTypes.default.bool,
   "autoSave": _propTypes.default.string,
   "capture": _propTypes.default.oneOfType([_propTypes.default.oneOf(["environment", "user"]), _propTypes.default.bool]),
-  "characterLimit": _propTypes.default.oneOfType([_propTypes.default.number, _propTypes.default.string]),
+  "characterLimit": _propTypes.default.number,
   "checked": _propTypes.default.bool,
   "children": _propTypes.default.node,
   "className": _propTypes.default.string,
@@ -179,6 +179,7 @@ Number.propTypes = {
   "id": _propTypes.default.string,
   "info": _propTypes.default.oneOfType([_propTypes.default.string, _propTypes.default.bool]),
   "inlist": _propTypes.default.any,
+  "inputHint": _propTypes.default.string,
   "inputIcon": _propTypes.default.oneOf(["add", "admin", "alert_on", "alert", "analysis", "arrow_bottom_right_circle", "arrow_down", "arrow_left_boxed", "arrow_left_right_small", "arrow_left_small", "arrow_left", "arrow_right_small", "arrow_right", "arrow_top_left_circle", "arrow_up", "arrow", "arrows_left_right", "attach", "bank_with_card", "bank", "basket_with_squares", "basket", "bed", "bin", "block_arrow_right", "blocked_square", "blocked", "bold", "box_arrow_left", "boxed_shapes", "bulk_destroy", "bullet_list_dotted", "bullet_list_numbers", "bullet_list", "business", "calendar_today", "calendar", "call", "camera", "car_lock", "car_money", "car_repair", "card_view", "caret_down", "caret_large_down", "caret_large_left", "caret_large_right", "caret_large_up", "caret_left", "caret_right", "caret_up", "cart", "cash", "chart_bar", "chart_line", "chart_pie", "chat_notes", "chat", "chevron_down_thick", "chevron_down", "chevron_left_thick", "chevron_left", "chevron_right_thick", "chevron_right", "chevron_up_thick", "chevron_up", "circle_with_dots", "circles_connection", "clock", "close", "coins", "collaborate", "computer_clock", "connect", "construction", "contacts", "copy", "create", "credit_card_slash", "credit_card", "cross_circle", "cross", "csv", "dashboard", "delete", "delivery", "disconnect", "disputed", "document_right_align", "document_tick", "document_vertical_lines", "download", "draft", "drag_vertical", "drag", "drill", "dropdown", "duplicate", "edit", "edited", "ellipsis_horizontal", "ellipsis_vertical", "email_switch", "email", "entry", "envelope_dollar", "envelope_euro", "error_square", "error", "euro", "expand", "factory", "favourite_lined", "favourite", "fax", "feedback", "file_excel", "file_generic", "file_image", "file_pdf", "file_word", "files_leaning", "filter_new", "filter", "fit_height", "fit_width", "flag", "folder", "form_refresh", "gift", "go", "graduation_hat", "graph", "grid", "hand_cash_coins", "hand_cash_note", "help", "hide", "home", "image", "in_progress", "in_transit", "individual", "info", "italic", "key", "laptop", "ledger_arrow_left", "ledger_arrow_right", "ledger", "lightbulb_off", "lightbulb_on", "link", "list_view", "location", "locked", "logout", "lookup", "marker", "message", "minus_large", "minus", "mobile", "money_bag", "none", "old_warning", "palm_tree", "pause_circle", "pause", "pdf", "people_switch", "people", "percentage_boxed", "person_info", "person_tick", "person", "petrol_pump", "phone", "piggy_bank", "plane", "play_circle", "play", "plus_large", "plus", "pound", "print", "progress", "progressed", "question_hollow", "question_mark", "question", "refresh_clock", "refresh", "remove", "sage_coin", "save", "scan", "search", "services", "settings_old", "settings", "share", "shop", "sort_down", "sort_up", "spanner", "split_container", "split", "square_dot", "squares_nine", "stacked_boxes", "stacked_squares", "submitted", "sync", "tag", "talk", "theatre_masks", "three_boxes", "tick_circle", "tick_thick", "tick", "true_tick", "u_turn_left", "u_turn_right", "undo", "unlocked", "upload", "uploaded", "video", "view", "warning"]),
   "inputMode": _propTypes.default.oneOf(["decimal", "email", "none", "numeric", "search", "tel", "text", "url"]),
   "inputRef": _propTypes.default.func,
@@ -602,7 +603,6 @@ Number.propTypes = {
   "value": _propTypes.default.string,
   "vocab": _propTypes.default.string,
   "warning": _propTypes.default.oneOfType([_propTypes.default.string, _propTypes.default.bool]),
-  "warnOverLimit": _propTypes.default.bool,
   "width": _propTypes.default.oneOfType([_propTypes.default.number, _propTypes.default.string])
 };
 Number.displayName = "Number";

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

@@ -19,7 +19,7 @@ export interface TextareaProps extends ValidationProps, MarginProps, Omit<Common
     /** Automatically focus the input on component mount */
     autoFocus?: boolean;
     /** Character limit of the textarea */
-    characterLimit?: string | number;
+    characterLimit?: number;
     /** Type of the icon that will be rendered next to the input */
     children?: React.ReactNode;
     /** The visible width of the text control, in average character widths */
@@ -34,6 +34,8 @@ export interface TextareaProps extends ValidationProps, MarginProps, Omit<Common
     error?: boolean | string;
     /** Allows the Textareas Height to change based on user input */
     expandable?: boolean;
+    /** A hint string rendered before the input but after the label. Intended to describe the purpose or content of the input. */
+    inputHint?: string;
     /** Help content to be displayed under an input */
     fieldHelp?: React.ReactNode;
     /** Aria label for rendered help component */
@@ -89,8 +91,6 @@ export interface TextareaProps extends ValidationProps, MarginProps, Omit<Common
     validationOnLabel?: boolean;
     /** The value of the Textbox */
     value?: string;
-    /** Whether to display the character count message in red */
-    warnOverLimit?: boolean;
     /** Indicate that warning has occurred
     Pass string to display icon, tooltip and orange border
     Pass true boolean to only display orange border */

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

@@ -54,13 +54,13 @@ let deprecateInputRefWarnTriggered = false;
 const Textarea = /*#__PURE__*/_react.default.forwardRef(({
   "aria-labelledby": ariaLabelledBy,
   autoFocus,
+  inputHint,
   fieldHelp,
   label,
   size,
   children,
   characterLimit,
   enforceCharacterLimit = true,
-  warnOverLimit = false,
   onChange,
   disabled = false,
   labelInline,
@@ -147,8 +147,7 @@ const Textarea = /*#__PURE__*/_react.default.forwardRef(({
     label,
     fieldHelp
   });
-  const [maxLength, characterCount] = (0, _useCharacterCount.default)(value, // TODO: Can be removed after the characterLimit type is changed to number
-  typeof characterLimit === "string" ? parseInt(characterLimit, 10) : characterLimit, warnOverLimit, enforceCharacterLimit);
+  const [maxLength, characterCount, characterCountHintId, characterCountHint] = (0, _useCharacterCount.default)(value, characterLimit, enforceCharacterLimit);
   (0, _react.useEffect)(() => {
     if (rows) {
       var _internalRef$current;
@@ -176,6 +175,12 @@ const Textarea = /*#__PURE__*/_react.default.forwardRef(({
     };
   }, [expandable]);
   const hasIconInside = !!(inputIcon || validationIconId && !validationOnLabel);
+  const hintId = (0, _react.useRef)((0, _guid.default)());
+  const characterCountHintIdValue = characterCount ? characterCountHintId : undefined;
+  const inputHintIdValue = inputHint ? hintId.current : undefined;
+  const hintIdValue = characterLimit ? characterCountHintIdValue : inputHintIdValue;
+  const ariaDescribedByValues = [validationRedesignOptIn ? undefined : ariaDescribedBy, hintIdValue];
+  const ariaDescribedByValue = ariaDescribedByValues.filter(Boolean).join(" ");
 
   const input = /*#__PURE__*/_react.default.createElement(_input.InputPresentation, {
     size: size,
@@ -189,7 +194,7 @@ const Textarea = /*#__PURE__*/_react.default.forwardRef(({
   }, /*#__PURE__*/_react.default.createElement(_input2.default, _extends({
     "aria-invalid": !!error,
     "aria-labelledby": ariaLabelledBy,
-    "aria-describedby": validationRedesignOptIn ? undefined : ariaDescribedBy,
+    "aria-describedby": ariaDescribedByValue,
     autoFocus: autoFocus,
     name: name,
     value: value,
@@ -245,7 +250,10 @@ const Textarea = /*#__PURE__*/_react.default.forwardRef(({
     useValidationIcon: computeLabelPropValues(validationOnLabel),
     adaptiveLabelBreakpoint: adaptiveLabelBreakpoint,
     validationRedesignOptIn: validationRedesignOptIn
-  }, validationRedesignOptIn && labelHelp && /*#__PURE__*/_react.default.createElement(_textbox.StyledHintText, null, labelHelp), validationRedesignOptIn ? /*#__PURE__*/_react.default.createElement(_box.default, {
+  }, characterLimit || inputHint ? /*#__PURE__*/_react.default.createElement(_textbox.StyledInputHint, {
+    id: hintIdValue,
+    "data-element": "input-hint"
+  }, characterCountHint || inputHint) : null, validationRedesignOptIn && labelHelp && /*#__PURE__*/_react.default.createElement(_textbox.StyledHintText, null, labelHelp), validationRedesignOptIn ? /*#__PURE__*/_react.default.createElement(_box.default, {
     position: "relative"
   }, /*#__PURE__*/_react.default.createElement(_validationMessage.default, {
     error: error,
@@ -318,7 +326,7 @@ Textarea.propTypes = {
   "autoFocus": _propTypes.default.bool,
   "autoSave": _propTypes.default.string,
   "capture": _propTypes.default.oneOfType([_propTypes.default.oneOf(["environment", "user"]), _propTypes.default.bool]),
-  "characterLimit": _propTypes.default.oneOfType([_propTypes.default.number, _propTypes.default.string]),
+  "characterLimit": _propTypes.default.number,
   "checked": _propTypes.default.bool,
   "children": _propTypes.default.node,
   "className": _propTypes.default.string,
@@ -359,6 +367,7 @@ Textarea.propTypes = {
   "id": _propTypes.default.string,
   "info": _propTypes.default.oneOfType([_propTypes.default.string, _propTypes.default.bool]),
   "inlist": _propTypes.default.any,
+  "inputHint": _propTypes.default.string,
   "inputIcon": _propTypes.default.oneOf(["add", "admin", "alert_on", "alert", "analysis", "arrow_bottom_right_circle", "arrow_down", "arrow_left_boxed", "arrow_left_right_small", "arrow_left_small", "arrow_left", "arrow_right_small", "arrow_right", "arrow_top_left_circle", "arrow_up", "arrow", "arrows_left_right", "attach", "bank_with_card", "bank", "basket_with_squares", "basket", "bed", "bin", "block_arrow_right", "blocked_square", "blocked", "bold", "box_arrow_left", "boxed_shapes", "bulk_destroy", "bullet_list_dotted", "bullet_list_numbers", "bullet_list", "business", "calendar_today", "calendar", "call", "camera", "car_lock", "car_money", "car_repair", "card_view", "caret_down", "caret_large_down", "caret_large_left", "caret_large_right", "caret_large_up", "caret_left", "caret_right", "caret_up", "cart", "cash", "chart_bar", "chart_line", "chart_pie", "chat_notes", "chat", "chevron_down_thick", "chevron_down", "chevron_left_thick", "chevron_left", "chevron_right_thick", "chevron_right", "chevron_up_thick", "chevron_up", "circle_with_dots", "circles_connection", "clock", "close", "coins", "collaborate", "computer_clock", "connect", "construction", "contacts", "copy", "create", "credit_card_slash", "credit_card", "cross_circle", "cross", "csv", "dashboard", "delete", "delivery", "disconnect", "disputed", "document_right_align", "document_tick", "document_vertical_lines", "download", "draft", "drag_vertical", "drag", "drill", "dropdown", "duplicate", "edit", "edited", "ellipsis_horizontal", "ellipsis_vertical", "email_switch", "email", "entry", "envelope_dollar", "envelope_euro", "error_square", "error", "euro", "expand", "factory", "favourite_lined", "favourite", "fax", "feedback", "file_excel", "file_generic", "file_image", "file_pdf", "file_word", "files_leaning", "filter_new", "filter", "fit_height", "fit_width", "flag", "folder", "form_refresh", "gift", "go", "graduation_hat", "graph", "grid", "hand_cash_coins", "hand_cash_note", "help", "hide", "home", "image", "in_progress", "in_transit", "individual", "info", "italic", "key", "laptop", "ledger_arrow_left", "ledger_arrow_right", "ledger", "lightbulb_off", "lightbulb_on", "link", "list_view", "location", "locked", "logout", "lookup", "marker", "message", "minus_large", "minus", "mobile", "money_bag", "none", "old_warning", "palm_tree", "pause_circle", "pause", "pdf", "people_switch", "people", "percentage_boxed", "person_info", "person_tick", "person", "petrol_pump", "phone", "piggy_bank", "plane", "play_circle", "play", "plus_large", "plus", "pound", "print", "progress", "progressed", "question_hollow", "question_mark", "question", "refresh_clock", "refresh", "remove", "sage_coin", "save", "scan", "search", "services", "settings_old", "settings", "share", "shop", "sort_down", "sort_up", "spanner", "split_container", "split", "square_dot", "squares_nine", "stacked_boxes", "stacked_squares", "submitted", "sync", "tag", "talk", "theatre_masks", "three_boxes", "tick_circle", "tick_thick", "tick", "true_tick", "u_turn_left", "u_turn_right", "undo", "unlocked", "upload", "uploaded", "video", "view", "warning"]),
   "inputMode": _propTypes.default.oneOf(["decimal", "email", "none", "numeric", "search", "tel", "text", "url"]),
   "inputRef": _propTypes.default.func,
@@ -779,7 +788,6 @@ Textarea.propTypes = {
   "value": _propTypes.default.string,
   "vocab": _propTypes.default.string,
   "warning": _propTypes.default.oneOfType([_propTypes.default.string, _propTypes.default.bool]),
-  "warnOverLimit": _propTypes.default.bool,
   "width": _propTypes.default.oneOfType([_propTypes.default.number, _propTypes.default.string])
 };
 Textarea.displayName = "Textarea";

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

@@ -16,6 +16,8 @@ export interface CommonTextboxProps extends ValidationProps, MarginProps, Omit<C
     adaptiveLabelBreakpoint?: number;
     /** Integer to determine a timeout for the deferred callback */
     deferTimeout?: number;
+    /** A hint string rendered before the input but after the label. Intended to describe the purpose or content of the input. */
+    inputHint?: string;
     /** Help content to be displayed under an input */
     fieldHelp?: React.ReactNode;
     /**
@@ -91,11 +93,9 @@ export interface TextboxProps extends CommonTextboxProps {
     /** Container for DatePicker or SelectList components */
     positionedChildren?: React.ReactNode;
     /** Character limit of the textarea */
-    characterLimit?: string | number;
+    characterLimit?: number;
     /** Stop the user typing over the characterLimit */
     enforceCharacterLimit?: boolean;
-    /** Whether to display the character count message in red */
-    warnOverLimit?: boolean;
 }
 export declare const Textbox: React.ForwardRefExoticComponent<TextboxProps & React.RefAttributes<HTMLInputElement>>;
 export default Textbox;

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

@@ -41,6 +41,8 @@ var _box = _interopRequireDefault(require("../box"));
 
 var _logger = _interopRequireDefault(require("../../__internal__/utils/logger"));
 
+var _guid = _interopRequireDefault(require("../../__internal__/utils/helpers/guid"));
+
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
 function _getRequireWildcardCache() { if (typeof WeakMap !== "function") return null; var cache = new WeakMap(); _getRequireWildcardCache = function () { return cache; }; return cache; }
@@ -66,6 +68,7 @@ const Textbox = /*#__PURE__*/_react.default.forwardRef(({
   labelSpacing,
   id,
   formattedValue,
+  inputHint,
   fieldHelp,
   error,
   warning,
@@ -102,13 +105,11 @@ const Textbox = /*#__PURE__*/_react.default.forwardRef(({
   "data-role": dataRole,
   enforceCharacterLimit = true,
   characterLimit,
-  warnOverLimit = false,
   helpAriaLabel,
   ...props
 }, ref) => {
   const characterCountValue = typeof value === "string" ? value : "";
-  const [maxLength, characterCount] = (0, _useCharacterCount.default)(characterCountValue, // TODO: Can be removed after the characterLimit type is changed to number
-  typeof characterLimit === "string" ? parseInt(characterLimit, 10) : characterLimit, warnOverLimit, enforceCharacterLimit);
+  const [maxLength, characterCount, characterCountHintId, characterCountHint] = (0, _useCharacterCount.default)(characterCountValue, characterLimit, enforceCharacterLimit);
   const {
     validationRedesignOptIn
   } = (0, _react.useContext)(_carbonProvider.NewValidationContext);
@@ -139,6 +140,12 @@ const Textbox = /*#__PURE__*/_react.default.forwardRef(({
     label,
     fieldHelp
   });
+  const hintId = (0, _react.useRef)((0, _guid.default)());
+  const characterCountHintIdValue = characterCount ? characterCountHintId : undefined;
+  const inputHintIdValue = inputHint ? hintId.current : undefined;
+  const hintIdValue = characterLimit ? characterCountHintIdValue : inputHintIdValue;
+  const ariaDescribedByValues = [validationRedesignOptIn ? undefined : ariaDescribedBy, hintIdValue];
+  const ariaDescribedByValue = ariaDescribedByValues.filter(Boolean).join(" ");
   const hasIconInside = !!(inputIcon || validationIconId && !validationOnLabel);
 
   const input = /*#__PURE__*/_react.default.createElement(_input.InputPresentation, {
@@ -162,7 +169,7 @@ const Textbox = /*#__PURE__*/_react.default.forwardRef(({
     align: align,
     "aria-invalid": !!error,
     "aria-labelledby": ariaLabelledBy,
-    "aria-describedby": validationRedesignOptIn ? undefined : ariaDescribedBy,
+    "aria-describedby": ariaDescribedByValue,
     autoFocus: autoFocus,
     deferTimeout: deferTimeout,
     disabled: disabled,
@@ -224,7 +231,10 @@ const Textbox = /*#__PURE__*/_react.default.forwardRef(({
     "data-element": dataElement,
     validationIconId: validationRedesignOptIn ? undefined : validationIconId,
     validationRedesignOptIn: validationRedesignOptIn
-  }, (0, _utils.filterStyledSystemMarginProps)(props)), validationRedesignOptIn && labelHelp && /*#__PURE__*/_react.default.createElement(_textbox.StyledHintText, null, labelHelp), validationRedesignOptIn ? /*#__PURE__*/_react.default.createElement(_box.default, {
+  }, (0, _utils.filterStyledSystemMarginProps)(props)), characterLimit || inputHint ? /*#__PURE__*/_react.default.createElement(_textbox.StyledInputHint, {
+    id: hintIdValue,
+    "data-element": "input-hint"
+  }, characterCountHint || inputHint) : null, validationRedesignOptIn && labelHelp && /*#__PURE__*/_react.default.createElement(_textbox.StyledHintText, null, labelHelp), validationRedesignOptIn ? /*#__PURE__*/_react.default.createElement(_box.default, {
     position: "relative"
   }, /*#__PURE__*/_react.default.createElement(_validationMessage.default, {
     error: error,
@@ -297,7 +307,7 @@ Textbox.propTypes = {
   "autoFocus": _propTypes.default.bool,
   "autoSave": _propTypes.default.string,
   "capture": _propTypes.default.oneOfType([_propTypes.default.oneOf(["environment", "user"]), _propTypes.default.bool]),
-  "characterLimit": _propTypes.default.oneOfType([_propTypes.default.number, _propTypes.default.string]),
+  "characterLimit": _propTypes.default.number,
   "checked": _propTypes.default.bool,
   "children": _propTypes.default.node,
   "className": _propTypes.default.string,
@@ -341,6 +351,7 @@ Textbox.propTypes = {
   "id": _propTypes.default.string,
   "info": _propTypes.default.oneOfType([_propTypes.default.string, _propTypes.default.bool]),
   "inlist": _propTypes.default.any,
+  "inputHint": _propTypes.default.string,
   "inputIcon": _propTypes.default.oneOf(["add", "admin", "alert_on", "alert", "analysis", "arrow_bottom_right_circle", "arrow_down", "arrow_left_boxed", "arrow_left_right_small", "arrow_left_small", "arrow_left", "arrow_right_small", "arrow_right", "arrow_top_left_circle", "arrow_up", "arrow", "arrows_left_right", "attach", "bank_with_card", "bank", "basket_with_squares", "basket", "bed", "bin", "block_arrow_right", "blocked_square", "blocked", "bold", "box_arrow_left", "boxed_shapes", "bulk_destroy", "bullet_list_dotted", "bullet_list_numbers", "bullet_list", "business", "calendar_today", "calendar", "call", "camera", "car_lock", "car_money", "car_repair", "card_view", "caret_down", "caret_large_down", "caret_large_left", "caret_large_right", "caret_large_up", "caret_left", "caret_right", "caret_up", "cart", "cash", "chart_bar", "chart_line", "chart_pie", "chat_notes", "chat", "chevron_down_thick", "chevron_down", "chevron_left_thick", "chevron_left", "chevron_right_thick", "chevron_right", "chevron_up_thick", "chevron_up", "circle_with_dots", "circles_connection", "clock", "close", "coins", "collaborate", "computer_clock", "connect", "construction", "contacts", "copy", "create", "credit_card_slash", "credit_card", "cross_circle", "cross", "csv", "dashboard", "delete", "delivery", "disconnect", "disputed", "document_right_align", "document_tick", "document_vertical_lines", "download", "draft", "drag_vertical", "drag", "drill", "dropdown", "duplicate", "edit", "edited", "ellipsis_horizontal", "ellipsis_vertical", "email_switch", "email", "entry", "envelope_dollar", "envelope_euro", "error_square", "error", "euro", "expand", "factory", "favourite_lined", "favourite", "fax", "feedback", "file_excel", "file_generic", "file_image", "file_pdf", "file_word", "files_leaning", "filter_new", "filter", "fit_height", "fit_width", "flag", "folder", "form_refresh", "gift", "go", "graduation_hat", "graph", "grid", "hand_cash_coins", "hand_cash_note", "help", "hide", "home", "image", "in_progress", "in_transit", "individual", "info", "italic", "key", "laptop", "ledger_arrow_left", "ledger_arrow_right", "ledger", "lightbulb_off", "lightbulb_on", "link", "list_view", "location", "locked", "logout", "lookup", "marker", "message", "minus_large", "minus", "mobile", "money_bag", "none", "old_warning", "palm_tree", "pause_circle", "pause", "pdf", "people_switch", "people", "percentage_boxed", "person_info", "person_tick", "person", "petrol_pump", "phone", "piggy_bank", "plane", "play_circle", "play", "plus_large", "plus", "pound", "print", "progress", "progressed", "question_hollow", "question_mark", "question", "refresh_clock", "refresh", "remove", "sage_coin", "save", "scan", "search", "services", "settings_old", "settings", "share", "shop", "sort_down", "sort_up", "spanner", "split_container", "split", "square_dot", "squares_nine", "stacked_boxes", "stacked_squares", "submitted", "sync", "tag", "talk", "theatre_masks", "three_boxes", "tick_circle", "tick_thick", "tick", "true_tick", "u_turn_left", "u_turn_right", "undo", "unlocked", "upload", "uploaded", "video", "view", "warning"]),
   "inputMode": _propTypes.default.oneOf(["decimal", "email", "none", "numeric", "search", "tel", "text", "url"]),
   "inputRef": _propTypes.default.func,
@@ -764,7 +775,6 @@ Textbox.propTypes = {
   "value": _propTypes.default.oneOfType([_propTypes.default.arrayOf(_propTypes.default.string), _propTypes.default.number, _propTypes.default.string]),
   "vocab": _propTypes.default.string,
   "warning": _propTypes.default.oneOfType([_propTypes.default.string, _propTypes.default.bool]),
-  "warnOverLimit": _propTypes.default.bool,
   "width": _propTypes.default.oneOfType([_propTypes.default.number, _propTypes.default.string])
 };
 Textbox.displayName = "Textbox";

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

@@ -1,5 +1,6 @@
 declare const ErrorBorder: import("styled-components").StyledComponent<"span", any, {
     warning: boolean;
 }, never>;
-declare const StyledHintText: import("styled-components").StyledComponent<"p", any, {}, never>;
-export { StyledHintText, ErrorBorder };
+declare const StyledInputHint: import("styled-components").StyledComponent<"p", any, {}, never>;
+declare const StyledHintText: import("styled-components").StyledComponent<"div", any, {}, never>;
+export { StyledHintText, ErrorBorder, StyledInputHint };

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

@@ -3,7 +3,7 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.ErrorBorder = exports.StyledHintText = void 0;
+exports.StyledInputHint = exports.ErrorBorder = exports.StyledHintText = void 0;
 
 var _styledComponents = _interopRequireWildcard(require("styled-components"));
 
@@ -25,7 +25,16 @@ const ErrorBorder = _styledComponents.default.span`
     `}
 `;
 exports.ErrorBorder = ErrorBorder;
-const StyledHintText = _styledComponents.default.p`
+const StyledInputHint = _styledComponents.default.p`
+  display: block;
+  flex: 1;
+  margin-top: -3px;
+  margin-bottom: 8px;
+  color: var(--colorsUtilityYin055);
+  white-space: pre-wrap;
+`;
+exports.StyledInputHint = StyledInputHint;
+const StyledHintText = _styledComponents.default.div`
   margin-top: 0px;
   margin-bottom: 8px;
   color: var(--colorsUtilityYin055);

package/lib/hooks/__internal__/useCharacterCount/useCharacterCount.d.ts

@@ -1,3 +1,8 @@
 /// <reference types="react" />
-declare const useCharacterCount: (value?: string, characterLimit?: number | undefined, warnOverLimit?: boolean, enforceCharacterLimit?: boolean) => [number | undefined, JSX.Element | null];
+declare const useCharacterCount: (value?: string, characterLimit?: number | undefined, enforceCharacterLimit?: boolean) => [
+    number | undefined,
+    JSX.Element | null,
+    string | undefined,
+    string | null
+];
 export default useCharacterCount;

package/lib/hooks/__internal__/useCharacterCount/useCharacterCount.js

@@ -11,17 +11,19 @@ var _characterCount = _interopRequireDefault(require("../../../__internal__/char
 
 var _useLocale = _interopRequireDefault(require("../useLocale"));
 
+var _guid = _interopRequireDefault(require("../../../__internal__/utils/helpers/guid"));
+
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
 function _getRequireWildcardCache() { if (typeof WeakMap !== "function") return null; var cache = new WeakMap(); _getRequireWildcardCache = function () { return cache; }; return cache; }
 
 function _interopRequireWildcard(obj) { if (obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
 
-const getFormatNumber = (value, locale) => new Intl.NumberFormat(locale).format(value);
-
-const useCharacterCount = (value = "", characterLimit, warnOverLimit = false, enforceCharacterLimit = true) => {
+const useCharacterCount = (value = "", characterLimit, enforceCharacterLimit = true) => {
   const isCharacterLimitValid = typeof characterLimit === "number" && !Number.isNaN(characterLimit);
   const l = (0, _useLocale.default)();
+  const hintString = l.characterCount.hintString();
+  const hintId = (0, _react.useRef)((0, _guid.default)());
   const isOverLimit = (0, _react.useMemo)(() => {
     if (value && isCharacterLimitValid) {
       return value.length > characterLimit;
@@ -30,11 +32,11 @@ const useCharacterCount = (value = "", characterLimit, warnOverLimit = false, en
     return false;
   }, [value, characterLimit, isCharacterLimitValid]);
   return [enforceCharacterLimit && isCharacterLimitValid ? characterLimit : undefined, isCharacterLimitValid ? /*#__PURE__*/_react.default.createElement(_characterCount.default, {
-    isOverLimit: isOverLimit && warnOverLimit,
-    value: getFormatNumber(value.length, l.locale()),
-    limit: getFormatNumber(characterLimit, l.locale()),
+    isOverLimit: isOverLimit,
+    value: value.length,
+    limit: characterLimit,
     "data-element": "character-limit"
-  }) : null];
+  }) : null, hintId.current, isCharacterLimitValid ? hintString : null];
 };
 
 var _default = useCharacterCount;

package/lib/locales/en-gb.js

@@ -25,6 +25,11 @@ const enGB = {
     no: () => "No",
     yes: () => "Yes"
   },
+  characterCount: {
+    hintString: () => "Input contains a character counter",
+    tooManyCharacters: (count, formattedCount) => count === 1 ? `You have ${formattedCount} character too many` : `You have ${formattedCount} characters too many`,
+    charactersLeft: (count, formattedCount) => count === 1 ? `You have ${formattedCount} character remaining` : `You have ${formattedCount} characters remaining`
+  },
   date: {
     dateFnsLocale: () => _dateFnsLocales.enGB
   },

package/lib/locales/locale.d.ts

@@ -11,6 +11,11 @@ interface Locale {
     batchSelection: {
         selected: (count: number | string) => string;
     };
+    characterCount: {
+        hintString: () => string;
+        tooManyCharacters: (count: number, formattedCount: string) => string;
+        charactersLeft: (count: number, formattedCount: string) => string;
+    };
     confirm: {
         no: () => string;
         yes: () => string;

package/lib/locales/pl-pl.d.ts

@@ -1,3 +1,5 @@
 import Locale from "./locale";
+export declare const PolishPlural: (singularNominativ: string, pluralNominativ: string, pluralGenitive: string, value: number) => string;
 declare const plPL: Locale;
+export { PolishPlural as PolishPlurals };
 export default plPL;

package/lib/locales/pl-pl.js

@@ -3,12 +3,25 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.default = void 0;
+exports.default = exports.PolishPlurals = exports.PolishPlural = void 0;
 
 var _dateFnsLocales = require("./date-fns-locales");
 
 const isSingular = count => (typeof count === "string" ? parseInt(count) : count) === 1;
 
+const PolishPlural = (singularNominativ, pluralNominativ, pluralGenitive, value) => {
+  if (value === 1) {
+    return singularNominativ;
+  }
+
+  if (value % 10 >= 2 && value % 10 <= 4 && (value % 100 < 10 || value % 100 >= 20)) {
+    return pluralNominativ;
+  }
+
+  return pluralGenitive;
+};
+
+exports.PolishPlurals = exports.PolishPlural = PolishPlural;
 const plPL = {
   locale: () => "pl-PL",
   actions: {
@@ -25,6 +38,11 @@ const plPL = {
     no: () => "Nie",
     yes: () => "Tak"
   },
+  characterCount: {
+    hintString: () => "Pole zawiera licznik znaków",
+    tooManyCharacters: (count, formattedCount) => `Masz o ${formattedCount} ${PolishPlural("znak", "znaki", "znaków", count)} za dużo`,
+    charactersLeft: (count, formattedCount) => `Masz ${formattedCount} ${PolishPlural("pozostały", "pozostałe", "pozostałych", count)} ${PolishPlural("znak", "znaki", "znaków", count)}`
+  },
   date: {
     dateFnsLocale: () => _dateFnsLocales.pl
   },

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "carbon-react",
-  "version": "116.2.2",
+  "version": "117.0.0",
   "description": "A library of reusable React components for easily building user interfaces.",
   "files": [
     "lib",