carbon-react 104.54.4 → 104.57.0

package/esm/__internal__/checkable-input/hidden-checkable-input.component.d.ts

@@ -1,5 +1,5 @@
 declare var _default: React.MemoExoticComponent<{
-    ({ name, checked, type, value, inputRef, onChange, autoFocus, ...props }: {
+    ({ name, checked, type, value, inputRef, onChange, autoFocus, role, ...props }: {
         [x: string]: any;
         name: any;
         checked: any;
@@ -8,6 +8,7 @@ declare var _default: React.MemoExoticComponent<{
         inputRef: any;
         onChange: any;
         autoFocus: any;
+        role: any;
     }): JSX.Element;
     propTypes: {
         /** Allows component to be focused on page load */
@@ -28,6 +29,8 @@ declare var _default: React.MemoExoticComponent<{
         onMouseEnter: PropTypes.Requireable<(...args: any[]) => any>;
         /** HTML type attribute of the input */
         type: PropTypes.Validator<string>;
+        /** Role attribute of the input */
+        role: PropTypes.Requireable<string>;
         /** Value of the input */
         value: PropTypes.Requireable<string>;
         /** A callback to retrieve the input reference */

package/esm/__internal__/checkable-input/hidden-checkable-input.component.js

@@ -13,6 +13,7 @@ const HiddenCheckableInput = ({
   inputRef,
   onChange,
   autoFocus,
+  role,
   ...props
 }) => {
   const {
@@ -57,7 +58,7 @@ const HiddenCheckableInput = ({
     "aria-checked": checked,
     checked: checked,
     name: name,
-    role: type,
+    role: role || type,
     type: type,
     value: value
   }, props, {
@@ -98,6 +99,9 @@ HiddenCheckableInput.propTypes = {
   /** HTML type attribute of the input */
   type: PropTypes.string.isRequired,
 
+  /** Role attribute of the input */
+  role: PropTypes.string,
+
   /** Value of the input */
   value: PropTypes.string,
 

package/esm/__internal__/checkable-input/hidden-checkable-input.d.ts

@@ -31,6 +31,8 @@ export interface HiddenCheckableInputProps
   extends CommonHiddenCheckableInputProps {
   /** HTML type attribute of the input */
   type: string;
+  /** Role attribute of the input */
+  role?: string;
 }
 
 declare function HiddenCheckableInput(

package/esm/__internal__/form-field/form-field.component.js

@@ -67,9 +67,9 @@ const FormField = ({
     labelId: labelId,
     align: labelAlign,
     disabled: disabled,
-    error: error,
-    warning: warning,
-    info: info,
+    error: !rest.validationRedesignOptIn && error,
+    warning: !rest.validationRedesignOptIn && warning,
+    info: !rest.validationRedesignOptIn && info,
     help: labelHelp,
     tooltipId: tooltipId,
     helpTabIndex: helpTabIndex,

package/esm/__internal__/input/input-presentation.component.js

@@ -2,6 +2,7 @@ import React, { useContext } from "react";
 import PropTypes from "prop-types";
 import InputPresentationStyle, { StyledInputPresentationContainer } from "./input-presentation.style";
 import { InputContext, InputGroupContext } from "../input-behaviour";
+import { NewValidationContext } from "../../components/carbon-provider/carbon-provider.component";
 
 const InputPresentation = ({
   children,
@@ -21,6 +22,9 @@ const InputPresentation = ({
     onMouseEnter,
     onMouseLeave
   } = useContext(InputContext);
+  const {
+    validationRedesignOptIn
+  } = useContext(NewValidationContext);
   const {
     onMouseEnter: onGroupMouseEnter,
     onMouseLeave: onGroupMouseLeave
@@ -50,7 +54,8 @@ const InputPresentation = ({
     size: size,
     warning: warning,
     error: error,
-    info: info
+    info: info,
+    validationRedesignOptIn: validationRedesignOptIn
   }, children));
 };
 

package/esm/__internal__/input/input-presentation.style.d.ts

@@ -5,4 +5,5 @@ declare const InputPresentationStyle: import("styled-components").StyledComponen
     warning: any;
     info: any;
     disabled: any;
+    validationRedesignOptIn: any;
 }, never>;

package/esm/__internal__/input/input-presentation.style.js

@@ -70,7 +70,8 @@ function stylingForValidations({
   error,
   warning,
   info,
-  disabled
+  disabled,
+  validationRedesignOptIn
 }) {
   let validationColor;
 
@@ -81,7 +82,7 @@ function stylingForValidations({
   if (error) {
     validationColor = "var(--colorsSemanticNegative500)";
   } else if (warning) {
-    validationColor = "var(--colorsSemanticCaution500)";
+    validationColor = validationRedesignOptIn ? "var(--colorsUtilityMajor300)" : "var(--colorsSemanticCaution500)";
   } else if (info) {
     validationColor = "var(--colorsSemanticInfo500)";
   } else {

package/esm/__internal__/validation-message/index.d.ts

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

package/esm/__internal__/validation-message/index.js

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

package/esm/__internal__/validation-message/validation-message.component.d.ts

@@ -0,0 +1,11 @@
+/// <reference types="react" />
+export interface ValidationMessageProps {
+    /** Indicate that error has occurred
+    Pass string to display hint with error */
+    error?: boolean | string;
+    /** Indicate that warning has occurred
+    Pass string to display hint with warning */
+    warning?: boolean | string;
+}
+declare const ValidationMessage: ({ error, warning }: ValidationMessageProps) => JSX.Element | null;
+export default ValidationMessage;

package/esm/__internal__/validation-message/validation-message.component.js

@@ -0,0 +1,15 @@
+import React from "react";
+import StyledValidationMessage from "./validation-message.style";
+
+const ValidationMessage = ({
+  error,
+  warning
+}) => {
+  const validation = error || warning;
+  const isStringValidation = typeof validation === "string";
+  return isStringValidation ? /*#__PURE__*/React.createElement(StyledValidationMessage, {
+    isWarning: !!(!error && warning)
+  }, validation) : null;
+};
+
+export default ValidationMessage;

package/esm/__internal__/validation-message/validation-message.style.d.ts

@@ -0,0 +1,5 @@
+interface StyledValidationMessageProps {
+    isWarning?: boolean;
+}
+declare const StyledValidationMessage: import("styled-components").StyledComponent<"p", any, StyledValidationMessageProps, never>;
+export default StyledValidationMessage;

package/esm/__internal__/validation-message/validation-message.style.js

@@ -0,0 +1,12 @@
+import styled, { css } from "styled-components";
+const StyledValidationMessage = styled.p`
+  ${({
+  isWarning
+}) => css`
+    color: ${isWarning ? "var(--colorsSemanticCaution600)" : "var(--colorsSemanticNegative500)"};
+    font-weight: ${isWarning ? "regular" : "bold"};
+    margin-top: 0px;
+    margin-bottom: 8px;
+  `}
+`;
+export default StyledValidationMessage;

package/esm/components/carbon-provider/carbon-provider.component.d.ts

@@ -1,12 +1,16 @@
+export const NewValidationContext: React.Context<{}>;
 export default CarbonProvider;
-declare function CarbonProvider({ children, theme }: {
+import React from "react";
+declare function CarbonProvider({ children, theme, validationRedesignOptIn, }: {
     children: any;
     theme?: import("../../style/themes/base").ThemeObject | undefined;
+    validationRedesignOptIn?: boolean | undefined;
 }): JSX.Element;
 declare namespace CarbonProvider {
     namespace propTypes {
         const children: PropTypes.Validator<string | number | boolean | {} | PropTypes.ReactElementLike | PropTypes.ReactNodeArray>;
         const theme: PropTypes.Requireable<object>;
+        const validationRedesignOptIn: PropTypes.Requireable<boolean>;
     }
 }
 import PropTypes from "prop-types";

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

@@ -1,18 +1,25 @@
-import React from "react";
+import React, { createContext } from "react";
 import PropTypes from "prop-types";
 import { ThemeProvider } from "styled-components";
 import mintTheme from "../../style/themes/mint";
 import CarbonScopedTokensProvider from "../../style/design-tokens/carbon-scoped-tokens-provider";
+export const NewValidationContext = /*#__PURE__*/createContext({});
 
 const CarbonProvider = ({
   children,
-  theme = mintTheme
+  theme = mintTheme,
+  validationRedesignOptIn = false
 }) => /*#__PURE__*/React.createElement(ThemeProvider, {
   theme: theme
-}, /*#__PURE__*/React.createElement(CarbonScopedTokensProvider, null, children));
+}, /*#__PURE__*/React.createElement(CarbonScopedTokensProvider, null, /*#__PURE__*/React.createElement(NewValidationContext.Provider, {
+  value: {
+    validationRedesignOptIn
+  }
+}, children)));
 
 CarbonProvider.propTypes = {
   children: PropTypes.node.isRequired,
-  theme: PropTypes.object
+  theme: PropTypes.object,
+  validationRedesignOptIn: PropTypes.bool
 };
 export default CarbonProvider;

package/esm/components/carbon-provider/carbon-provider.d.ts

@@ -5,6 +5,7 @@ import { ThemeObject } from "../../style/themes/base";
 export interface CarbonProviderProps {
   theme?: ThemeObject;
   children: React.ReactNode;
+  validationRedesignOptIn?: boolean;
 }
 
 declare function CarbonProvider(props: CarbonProviderProps): JSX.Element;

package/esm/components/date-range/date-range.style.js

@@ -16,7 +16,7 @@ const StyledDateRange = styled.div`
   }
 
   & ${StyledDateInput}:first-child {
-    margin-right: var(--spacing150);
+    margin-right: var(--spacing300);
   }
 
   ${StyledLabelContainer} {

package/esm/components/fieldset/fieldset.component.js

@@ -7,6 +7,7 @@ import { validProps } from "../../__internal__/utils/ether";
 import tagComponent from "../../__internal__/utils/helpers/tags/tags";
 import { filterStyledSystemMarginProps } from "../../style/utils";
 import { FieldsetStyle, LegendContainerStyle, FieldsetContentStyle } from "./fieldset.style";
+import { NewValidationContext } from "../carbon-provider/carbon-provider.component";
 const marginPropTypes = filterStyledSystemMarginProps(styledSystemPropTypes.space);
 
 const Fieldset = props => {
@@ -25,12 +26,16 @@ const Fieldset = props => {
     propTypes: Fieldset.propTypes,
     props
   });
-  return /*#__PURE__*/React.createElement(FieldsetStyle, _extends({}, tagComponent("fieldset", props), safeProps, {
+  return /*#__PURE__*/React.createElement(NewValidationContext.Provider, {
+    value: {
+      validationRedesignOptIn: false
+    }
+  }, /*#__PURE__*/React.createElement(FieldsetStyle, _extends({}, tagComponent("fieldset", props), safeProps, {
     m: 0
   }, filterStyledSystemMarginProps(props)), /*#__PURE__*/React.createElement(FieldsetContentStyle, {
     "data-component": "fieldset-style",
     inline: props.inline
-  }, legend(), props.children));
+  }, legend(), props.children)));
 };
 
 Fieldset.propTypes = {

package/esm/components/modal/__internal__/modal-manager.d.ts

@@ -1,9 +1,9 @@
 export default ModalManager;
-declare const ModalManager: ModalManagerInstance;
-declare class ModalManagerInstance {
+export class ModalManagerInstance {
     addModal: (modal: any, setTriggerRefocusFlag: any) => void;
     isTopmost(modal: any): boolean;
     removeModal(modal: any): void;
     clearList(): void;
     #private;
 }
+declare const ModalManager: ModalManagerInstance;

package/esm/components/modal/__internal__/modal-manager.js

@@ -6,17 +6,17 @@ function _createClass(Constructor, protoProps, staticProps) { if (protoProps) _d
 
 function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
 
-function _classPrivateFieldSet(receiver, privateMap, value) { var descriptor = _classExtractFieldDescriptor(receiver, privateMap, "set"); _classApplyDescriptorSet(receiver, descriptor, value); return value; }
-
-function _classApplyDescriptorSet(receiver, descriptor, value) { if (descriptor.set) { descriptor.set.call(receiver, value); } else { if (!descriptor.writable) { throw new TypeError("attempted to set read only private field"); } descriptor.value = value; } }
-
 function _classPrivateMethodGet(receiver, privateSet, fn) { if (!privateSet.has(receiver)) { throw new TypeError("attempted to get private field on non-instance"); } return fn; }
 
 function _classPrivateFieldGet(receiver, privateMap) { var descriptor = _classExtractFieldDescriptor(receiver, privateMap, "get"); return _classApplyDescriptorGet(receiver, descriptor); }
 
+function _classApplyDescriptorGet(receiver, descriptor) { if (descriptor.get) { return descriptor.get.call(receiver); } return descriptor.value; }
+
+function _classPrivateFieldSet(receiver, privateMap, value) { var descriptor = _classExtractFieldDescriptor(receiver, privateMap, "set"); _classApplyDescriptorSet(receiver, descriptor, value); return value; }
+
 function _classExtractFieldDescriptor(receiver, privateMap, action) { if (!privateMap.has(receiver)) { throw new TypeError("attempted to " + action + " private field on non-instance"); } return privateMap.get(receiver); }
 
-function _classApplyDescriptorGet(receiver, descriptor) { if (descriptor.get) { return descriptor.get.call(receiver); } return descriptor.value; }
+function _classApplyDescriptorSet(receiver, descriptor, value) { if (descriptor.set) { descriptor.set.call(receiver, value); } else { if (!descriptor.writable) { throw new TypeError("attempted to set read only private field"); } descriptor.value = value; } }
 
 var _modalList = /*#__PURE__*/new WeakMap();
 
@@ -30,7 +30,7 @@ let ModalManagerInstance = /*#__PURE__*/function () {
 
     _modalList.set(this, {
       writable: true,
-      value: []
+      value: void 0
     });
 
     _defineProperty(this, "addModal", (modal, setTriggerRefocusFlag) => {
@@ -48,6 +48,14 @@ let ModalManagerInstance = /*#__PURE__*/function () {
         setTriggerRefocusFlag
       });
     });
+
+    // Due to possibility of multiple carbon versions using it
+    // it is necessary to maintain same structure in this global variable
+    if (!window.__CARBON_INTERNALS_MODAL_LIST) {
+      window.__CARBON_INTERNALS_MODAL_LIST = [];
+    }
+
+    _classPrivateFieldSet(this, _modalList, window.__CARBON_INTERNALS_MODAL_LIST);
   }
 
   _createClass(ModalManagerInstance, [{
@@ -91,7 +99,9 @@ let ModalManagerInstance = /*#__PURE__*/function () {
   }, {
     key: "clearList",
     value: function clearList() {
-      _classPrivateFieldSet(this, _modalList, []);
+      window.__CARBON_INTERNALS_MODAL_LIST = [];
+
+      _classPrivateFieldSet(this, _modalList, window.__CARBON_INTERNALS_MODAL_LIST);
     }
   }]);
 
@@ -107,4 +117,5 @@ function _getTopModal2() {
 }
 
 const ModalManager = new ModalManagerInstance();
+export { ModalManagerInstance };
 export default ModalManager;

package/esm/components/numeral-date/numeral-date-context.d.ts

@@ -0,0 +1,3 @@
+declare var _default: React.Context<{}>;
+export default _default;
+import React from "react";

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

@@ -0,0 +1,2 @@
+import React from "react";
+export default /*#__PURE__*/React.createContext({});

package/esm/components/numeral-date/numeral-date.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, { useState, useEffect, useRef } from "react";
+import React, { useContext, useState, useEffect, useRef } from "react";
 import PropTypes from "prop-types";
 import styledSystemPropTypes from "@styled-system/prop-types";
 import invariant from "invariant";
@@ -8,11 +8,15 @@ import { filterStyledSystemMarginProps } from "../../style/utils";
 import Events from "../../__internal__/utils/helpers/events";
 import { StyledNumeralDate, StyledDateField } from "./numeral-date.style";
 import Textbox from "../textbox";
+import { StyledHintText } from "../textbox/textbox.style";
+import ValidationMessage from "../../__internal__/validation-message";
 import guid from "../../__internal__/utils/helpers/guid";
 import useLocale from "../../hooks/__internal__/useLocale";
 import FormField from "../../__internal__/form-field";
 import { InputGroupBehaviour } from "../../__internal__/input-behaviour";
 import { TooltipProvider } from "../../__internal__/tooltip-provider";
+import { NewValidationContext } from "../carbon-provider/carbon-provider.component";
+import NumeralDateContext from "./numeral-date-context";
 const marginPropTypes = filterStyledSystemMarginProps(styledSystemPropTypes.space);
 const ALLOWED_DATE_FORMATS = [["dd", "mm", "yyyy"], ["mm", "dd", "yyyy"], ["dd", "mm"], ["mm", "dd"], ["mm", "yyyy"]];
 
@@ -62,6 +66,9 @@ const NumeralDate = ({
   ...rest
 }) => {
   const l = useLocale();
+  const {
+    validationRedesignOptIn
+  } = useContext(NewValidationContext);
   const {
     current: uniqueId
   } = useRef(id || guid());
@@ -162,8 +169,12 @@ const NumeralDate = ({
     labelSpacing: labelSpacing,
     fieldHelp: fieldHelp,
     adaptiveLabelBreakpoint: adaptiveLabelBreakpoint,
-    isRequired: required
-  }, filterStyledSystemMarginProps(rest)), /*#__PURE__*/React.createElement(StyledNumeralDate, {
+    isRequired: required,
+    validationRedesignOptIn: validationRedesignOptIn
+  }, filterStyledSystemMarginProps(rest)), validationRedesignOptIn && labelHelp && /*#__PURE__*/React.createElement(StyledHintText, null, labelHelp), validationRedesignOptIn && /*#__PURE__*/React.createElement(ValidationMessage, {
+    error: internalError,
+    warning: internalWarning
+  }), /*#__PURE__*/React.createElement(StyledNumeralDate, {
     name: name,
     onKeyPress: onKeyPress,
     "data-component": "numeral-date"
@@ -173,7 +184,12 @@ const NumeralDate = ({
     const validation = error || warning || info;
     const isStringValidation = typeof validation === "string";
     const hasValidationIcon = isStringValidation && validation.length;
-    return /*#__PURE__*/React.createElement(StyledDateField, {
+    return /*#__PURE__*/React.createElement(NumeralDateContext.Provider, {
+      value: {
+        disableErrorBorder: index !== 0
+      },
+      key: datePart
+    }, /*#__PURE__*/React.createElement(StyledDateField, {
       key: datePart,
       isYearInput: datePart.length === 4,
       isMiddle: isMiddle,
@@ -196,14 +212,14 @@ const NumeralDate = ({
       info: !!info
     }, required && {
       required
-    }, isEnd && !validationOnLabel && {
+    }, isEnd && !validationRedesignOptIn && !validationOnLabel && {
       error: internalError,
       warning: internalWarning,
       info
     }, {
       size: size,
       tooltipPosition: tooltipPosition
-    })));
+    }))));
   })))));
 };
 

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

@@ -96,6 +96,7 @@ const Switch = ({
     labelHelp,
     value,
     type: "checkbox",
+    role: "switch",
     reverse: !reverse,
     // switched to preserve backward compatibility
     validationOnLabel: shouldValidationBeOnLabel && !disabled,

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

@@ -15,6 +15,9 @@ import StyledTextarea from "./textarea.style";
 import LocaleContext from "../../__internal__/i18n-context";
 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 ValidationMessage from "../../__internal__/validation-message";
 
 const getFormatNumber = (value, locale) => new Intl.NumberFormat(locale).format(value);
 
@@ -59,6 +62,12 @@ const Textarea = ({
   ...props
 }) => {
   const locale = useContext(LocaleContext);
+  const {
+    validationRedesignOptIn
+  } = useContext(NewValidationContext);
+
+  const computeLabelPropValues = prop => validationRedesignOptIn ? undefined : prop;
+
   const {
     current: id
   } = useRef(idProp || guid());
@@ -134,7 +143,7 @@ const Textarea = ({
     "data-role": dataRole,
     "data-element": dataElement
   }, filterStyledSystemMarginProps(props)), /*#__PURE__*/React.createElement(FormField, {
-    fieldHelp: fieldHelp,
+    fieldHelp: computeLabelPropValues(fieldHelp),
     fieldHelpId: fieldHelpId,
     error: error,
     warning: warning,
@@ -143,15 +152,19 @@ const Textarea = ({
     labelId: labelId,
     disabled: disabled,
     id: id,
-    labelInline: labelInline,
-    labelAlign: labelAlign,
-    labelWidth: labelWidth,
-    labelHelp: labelHelp,
+    labelInline: computeLabelPropValues(labelInline),
+    labelAlign: computeLabelPropValues(labelAlign),
+    labelWidth: computeLabelPropValues(labelWidth),
+    labelHelp: computeLabelPropValues(labelHelp),
     labelSpacing: labelSpacing,
     isRequired: props.required,
-    useValidationIcon: validationOnLabel,
-    adaptiveLabelBreakpoint: adaptiveLabelBreakpoint
-  }, /*#__PURE__*/React.createElement(InputPresentation, {
+    useValidationIcon: computeLabelPropValues(validationOnLabel),
+    adaptiveLabelBreakpoint: adaptiveLabelBreakpoint,
+    validationRedesignOptIn: validationRedesignOptIn
+  }, validationRedesignOptIn && labelHelp && /*#__PURE__*/React.createElement(StyledHintText, null, labelHelp), validationRedesignOptIn && /*#__PURE__*/React.createElement(ValidationMessage, {
+    error: error,
+    warning: warning
+  }), /*#__PURE__*/React.createElement(InputPresentation, {
     size: size,
     disabled: disabled,
     readOnly: readOnly,
@@ -159,10 +172,12 @@ const Textarea = ({
     error: error,
     warning: warning,
     info: info
-  }, /*#__PURE__*/React.createElement(Input, _extends({
+  }, validationRedesignOptIn && (error || warning) && /*#__PURE__*/React.createElement(ErrorBorder, {
+    warning: !!(!error && warning)
+  }), /*#__PURE__*/React.createElement(Input, _extends({
     "aria-invalid": !!error,
     "aria-labelledby": ariaLabelledBy,
-    "aria-describedby": ariaDescribedBy,
+    "aria-describedby": validationRedesignOptIn ? undefined : ariaDescribedBy,
     autoFocus: autoFocus,
     name: name,
     value: value,
@@ -185,8 +200,8 @@ const Textarea = ({
     error: error,
     warning: warning,
     info: info,
-    validationIconId: validationIconId,
-    useValidationIcon: !validationOnLabel
+    validationIconId: validationRedesignOptIn ? undefined : validationIconId,
+    useValidationIcon: !(validationRedesignOptIn || validationOnLabel)
   }))), characterCount())));
 };
 

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 from "react";
+import React, { useContext } from "react";
 import PropTypes from "prop-types";
 import styledSystemPropTypes from "@styled-system/prop-types";
 import { filterStyledSystemMarginProps } from "../../style/utils";
@@ -13,6 +13,10 @@ 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 ValidationMessage from "../../__internal__/validation-message";
+import { NewValidationContext } from "../carbon-provider/carbon-provider.component";
+import NumeralDateContext from "../numeral-date/numeral-date-context";
 const marginPropTypes = filterStyledSystemMarginProps(styledSystemPropTypes.space);
 
 const Textbox = ({
@@ -70,6 +74,15 @@ const Textbox = ({
   ...props
 }) => {
   const [maxLength, characterCount] = useCharacterCount(value, characterLimit, warnOverLimit, enforceCharacterLimit);
+  const {
+    validationRedesignOptIn
+  } = useContext(NewValidationContext);
+  const {
+    disableErrorBorder
+  } = useContext(NumeralDateContext);
+
+  const computeLabelPropValues = prop => validationRedesignOptIn ? undefined : prop;
+
   const {
     labelId: internalLabelId,
     validationIconId,
@@ -90,29 +103,35 @@ const Textbox = ({
     tooltipPosition: tooltipPosition
   }, /*#__PURE__*/React.createElement(InputBehaviour, null, /*#__PURE__*/React.createElement(FormField, _extends({
     disabled: disabled,
-    fieldHelp: fieldHelp,
     fieldHelpId: fieldHelpId,
+    fieldHelp: computeLabelPropValues(fieldHelp),
     error: error,
     warning: warning,
     info: info,
     label: label,
     labelId: labelId,
-    labelAlign: labelAlign,
-    labelHelp: labelHelp,
-    labelInline: labelInline,
+    labelAlign: computeLabelPropValues(labelAlign),
+    labelHelp: computeLabelPropValues(labelHelp),
+    labelInline: computeLabelPropValues(labelInline),
     labelSpacing: labelSpacing,
-    labelWidth: labelWidth,
+    labelWidth: computeLabelPropValues(labelWidth),
     id: id,
-    reverse: reverse,
+    reverse: computeLabelPropValues(reverse),
     isOptional: isOptional,
-    useValidationIcon: validationOnLabel,
+    useValidationIcon: computeLabelPropValues(validationOnLabel),
     adaptiveLabelBreakpoint: adaptiveLabelBreakpoint,
     isRequired: required,
     "data-component": dataComponent,
     "data-role": dataRole,
     "data-element": dataElement,
-    validationIconId: validationIconId
-  }, filterStyledSystemMarginProps(props)), /*#__PURE__*/React.createElement(InputPresentation, {
+    validationIconId: validationRedesignOptIn ? undefined : validationIconId,
+    validationRedesignOptIn: validationRedesignOptIn,
+    size: size,
+    readOnly: readOnly
+  }, filterStyledSystemMarginProps(props)), validationRedesignOptIn && labelHelp && /*#__PURE__*/React.createElement(StyledHintText, null, labelHelp), validationRedesignOptIn && /*#__PURE__*/React.createElement(ValidationMessage, {
+    error: error,
+    warning: warning
+  }), /*#__PURE__*/React.createElement(InputPresentation, {
     align: align,
     disabled: disabled,
     readOnly: readOnly,
@@ -122,15 +141,17 @@ const Textbox = ({
     info: info,
     inputWidth: inputWidth || 100 - labelWidth,
     positionedChildren: positionedChildren
-  }, leftChildren, prefix ? /*#__PURE__*/React.createElement(StyledPrefix, {
+  }, leftChildren, prefix && /*#__PURE__*/React.createElement(StyledPrefix, {
     "data-element": "textbox-prefix"
-  }, prefix) : null, /*#__PURE__*/React.createElement(Input, _extends({}, required && {
+  }, prefix), validationRedesignOptIn && !disableErrorBorder && (error || warning) && /*#__PURE__*/React.createElement(ErrorBorder, {
+    warning: !!(!error && warning)
+  }), /*#__PURE__*/React.createElement(Input, _extends({}, required && {
     required
   }, {
     align: align,
     "aria-invalid": !!error,
     "aria-labelledby": labelId,
-    "aria-describedby": ariaDescribedBy,
+    "aria-describedby": validationRedesignOptIn ? undefined : ariaDescribedBy,
     autoFocus: autoFocus,
     deferTimeout: deferTimeout,
     disabled: disabled,
@@ -158,9 +179,9 @@ const Textbox = ({
     onMouseDown: iconOnMouseDown || onMouseDown,
     readOnly: readOnly,
     size: size,
-    useValidationIcon: !validationOnLabel,
+    useValidationIcon: !(validationRedesignOptIn || validationOnLabel),
     warning: warning,
-    validationIconId: validationIconId
+    validationIconId: validationRedesignOptIn ? undefined : validationIconId
   }))), characterCount));
 };