carbon-react 149.0.2 → 150.1.0

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

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

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

@@ -13,14 +13,4 @@ const ErrorBorder = styled.span`
     top: 0px;
   `}
 `;
-const StyledHintText = styled.div`
-  ::after {
-    content: " ";
-  }
-
-  margin-top: 0px;
-  margin-bottom: 8px;
-  color: var(--colorsUtilityYin055);
-  font-size: 14px;
-`;
-export { StyledHintText, ErrorBorder };
+export default ErrorBorder;

package/esm/components/time/time.component.js

@@ -7,12 +7,13 @@ import tagComponent from "../../__internal__/utils/helpers/tags/tags";
 import useInputAccessibility from "../../hooks/__internal__/useInputAccessibility";
 import Fieldset from "../../__internal__/fieldset";
 import Box from "../box";
-import { ErrorBorder } from "../textbox/textbox.style";
+import ErrorBorder from "../textbox/textbox.style";
 import ValidationMessage from "../../__internal__/validation-message";
 import Number from "../number";
 import Typography from "../typography";
-import { StyledLabel as Label, StyledHintText as Hint } from "./time.style";
+import StyledLabel from "./time.style";
 import { TimeToggle } from "./__internal__/time-toggle";
+import HintText from "../../__internal__/hint-text";
 const Time = /*#__PURE__*/React.forwardRef(({
   label,
   labelAlign,
@@ -172,7 +173,8 @@ const Time = /*#__PURE__*/React.forwardRef(({
     id: internalId.current
   }, rest, tagComponent("time", rest), {
     "aria-describedby": inputHint ? combinedAriaDescribedBy : ariaDescribedBy
-  }), inputHint && /*#__PURE__*/React.createElement(Hint, {
+  }), inputHint && /*#__PURE__*/React.createElement(HintText, {
+    align: labelAlign,
     id: inputHintId.current,
     isDisabled: disabled
   }, inputHint), /*#__PURE__*/React.createElement(Box, {
@@ -186,7 +188,7 @@ const Time = /*#__PURE__*/React.forwardRef(({
     warning: !!(!error && warning)
   }), /*#__PURE__*/React.createElement(Box, {
     display: "flex"
-  }, /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement(Label, {
+  }, /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement(StyledLabel, {
     "aria-label": hrsAriaLabel,
     htmlFor: internalHrsId.current,
     disabled: disabled,
@@ -214,7 +216,7 @@ const Time = /*#__PURE__*/React.forwardRef(({
     isDisabled: disabled,
     variant: "span",
     mb: "-4px"
-  }, ":")), /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement(Label, {
+  }, ":")), /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement(StyledLabel, {
     "aria-label": minsAriaLabel,
     htmlFor: internalMinsId.current,
     disabled: disabled,

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

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

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

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

package/esm/locales/de-de.js

@@ -1,4 +1,4 @@
-import deDEDateLocale from "date-fns/locale/de";
+import { de as deDEDateLocale } from "date-fns/locale/de";
 const isSingular = count => (typeof count === "string" ? parseInt(count) : count) === 1;
 const deDE = {
   locale: () => "de-DE",

package/esm/locales/en-ca.js

@@ -1,4 +1,4 @@
-import enCADateLocale from "date-fns/locale/en-CA";
+import { enCA as enCADateLocale } from "date-fns/locale/en-CA";
 const enCA = {
   locale: () => "en-CA",
   date: {

package/esm/locales/en-gb.js

@@ -1,4 +1,4 @@
-import enGBDateLocale from "date-fns/locale/en-GB";
+import { enGB as enGBDateLocale } from "date-fns/locale/en-GB";
 const isSingular = count => (typeof count === "string" ? parseInt(count) : count) === 1;
 const enGB = {
   locale: () => "en-GB",

package/esm/locales/en-us.js

@@ -1,4 +1,4 @@
-import enUSDateLocale from "date-fns/locale/en-US";
+import { enUS as enUSDateLocale } from "date-fns/locale/en-US";
 const enUS = {
   locale: () => "en-US",
   date: {

package/esm/locales/es-es.js

@@ -1,4 +1,4 @@
-import esESDateLocale from "date-fns/locale/es";
+import { es as esESDateLocale } from "date-fns/locale/es";
 const isSingular = count => (typeof count === "string" ? parseInt(count) : count) === 1;
 const esES = {
   locale: () => "es-ES",

package/esm/locales/fr-ca.js

@@ -1,4 +1,4 @@
-import frCADateLocale from "date-fns/locale/fr-CA";
+import { frCA as frCADateLocale } from "date-fns/locale/fr-CA";
 const isSingular = count => (typeof count === "string" ? parseInt(count) : count) === 1;
 const frCA = {
   locale: () => "fr-CA",

package/esm/locales/fr-fr.js

@@ -1,4 +1,4 @@
-import frFRDateLocale from "date-fns/locale/fr";
+import { fr as frFRDateLocale } from "date-fns/locale/fr";
 const isSingular = count => (typeof count === "string" ? parseInt(count) : count) === 1;
 const frFR = {
   locale: () => "fr-FR",

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

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

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

@@ -0,0 +1,44 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = exports.HintText = void 0;
+var _react = _interopRequireWildcard(require("react"));
+var _propTypes = _interopRequireDefault(require("prop-types"));
+var _hintText = _interopRequireDefault(require("./hint-text.style"));
+var _newValidation = _interopRequireDefault(require("../../components/carbon-provider/__internal__/new-validation.context"));
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
+function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
+const HintText = ({
+  align,
+  children,
+  fontWeight,
+  id,
+  isComponentInline = false,
+  isDarkBackground = false,
+  isDisabled = false,
+  marginBottom = "var(--spacing100)",
+  marginTop = "var(--spacing000)",
+  maxWidth
+}) => {
+  const {
+    validationRedesignOptIn
+  } = (0, _react.useContext)(_newValidation.default);
+  if (isComponentInline && !validationRedesignOptIn) return null;
+  return /*#__PURE__*/_react.default.createElement(_hintText.default, {
+    align: align,
+    "data-element": "input-hint",
+    "data-role": "hint-text",
+    fontWeight: fontWeight,
+    id: id,
+    isDarkBackground: isDarkBackground,
+    isDisabled: isDisabled,
+    marginBottom: marginBottom,
+    marginTop: marginTop,
+    maxWidth: maxWidth
+  }, children);
+};
+exports.HintText = HintText;
+var _default = exports.default = HintText;

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

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

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

@@ -0,0 +1,58 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _styledComponents = _interopRequireWildcard(require("styled-components"));
+function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
+function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
+const getColor = (isDarkBackground, isDisabled) => {
+  if (isDarkBackground) {
+    return "var(--colorsUtilityYang080)";
+  }
+  if (isDisabled) {
+    return "var(--colorsUtilityYin030)";
+  }
+  return "var(--colorsUtilityYin055)";
+};
+const StyledHintText = _styledComponents.default.div`
+  display: flex;
+  align-items: center;
+  font-size: 14px;
+
+  ${({
+  align
+}) => (0, _styledComponents.css)`
+    justify-content: ${align !== "right" ? "flex-start" : "flex-end"};
+  `}
+  margin-bottom: ${({
+  marginBottom
+}) => marginBottom};
+  margin-top: ${({
+  marginTop
+}) => marginTop};
+
+  ${({
+  isDarkBackground,
+  isDisabled
+}) => (0, _styledComponents.css)`
+    color: ${getColor(isDarkBackground, isDisabled)};
+  `}
+
+  ${({
+  fontWeight
+}) => fontWeight && (0, _styledComponents.css)`
+      font-weight: ${fontWeight};
+    `}
+  ${({
+  maxWidth
+}) => maxWidth && (0, _styledComponents.css)`
+      max-width: ${maxWidth};
+    `}
+
+  ::after {
+    content: " ";
+  }
+`;
+var _default = exports.default = StyledHintText;

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

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

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

@@ -0,0 +1,13 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+Object.defineProperty(exports, "default", {
+  enumerable: true,
+  get: function () {
+    return _hintText.default;
+  }
+});
+var _hintText = _interopRequireDefault(require("./hint-text.component"));
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }

package/lib/__internal__/hint-text/package.json

@@ -0,0 +1,6 @@
+{
+  "sideEffects": false,
+  "module": "../../../esm/__internal__/hint-text/index.js",
+  "main": "./index.js",
+  "types": "./index.d.ts"
+}

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

@@ -9,7 +9,7 @@ var _propTypes = _interopRequireDefault(require("prop-types"));
 var _invariant = _interopRequireDefault(require("invariant"));
 var _formField = _interopRequireDefault(require("../../../__internal__/form-field"));
 var _guid = _interopRequireDefault(require("../../../__internal__/utils/helpers/guid"));
-var _buttonToggleGroup = _interopRequireWildcard(require("./button-toggle-group.style"));
+var _buttonToggleGroup = _interopRequireDefault(require("./button-toggle-group.style"));
 var _ = require("..");
 var _utils = require("../../../style/utils");
 var _tooltipProvider = require("../../../__internal__/tooltip-provider");
@@ -17,6 +17,7 @@ var _inputBehaviour = require("../../../__internal__/input-behaviour");
 var _events = _interopRequireDefault(require("../../../__internal__/utils/helpers/events"));
 var _newValidation = _interopRequireDefault(require("../../carbon-provider/__internal__/new-validation.context"));
 var _buttonToggleGroup2 = _interopRequireDefault(require("./__internal__/button-toggle-group.context"));
+var _hintText = _interopRequireDefault(require("../../../__internal__/hint-text"));
 function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
 function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
 function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
@@ -138,9 +139,10 @@ const ButtonToggleGroup = ({
       childButtonCallbackRef,
       hintTextId: inputHint ? hintTextId.current : undefined
     }
-  }, inputHint && /*#__PURE__*/_react.default.createElement(_buttonToggleGroup.StyledHintText, {
+  }, inputHint && /*#__PURE__*/_react.default.createElement(_hintText.default, {
     id: hintTextId.current,
-    isDisabled: disabled
+    isDisabled: disabled,
+    marginBottom: "var(--spacing150)"
   }, inputHint), /*#__PURE__*/_react.default.createElement(_buttonToggleGroup.default, _extends({
     ref: wrapperRef
   }, label ? {

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

@@ -1,7 +1,4 @@
 import { ButtonToggleGroupProps } from ".";
 declare type StyledButtonToggleGroupProps = Pick<ButtonToggleGroupProps, "inputWidth" | "fullWidth" | "disabled" | "labelInline">;
 declare const StyledButtonToggleGroup: import("styled-components").StyledComponent<"div", any, StyledButtonToggleGroupProps, never>;
-export declare const StyledHintText: import("styled-components").StyledComponent<"div", any, {
-    isDisabled?: boolean | undefined;
-}, never>;
 export default StyledButtonToggleGroup;

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

@@ -3,7 +3,7 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.default = exports.StyledHintText = void 0;
+exports.default = void 0;
 var _styledComponents = _interopRequireWildcard(require("styled-components"));
 var _styledSystem = require("styled-system");
 var _themes = require("../../../style/themes");
@@ -49,18 +49,6 @@ const StyledButtonToggleGroup = _styledComponents.default.div`
       width: ${`${inputWidth}%`};
     `}
 `;
-const StyledHintText = exports.StyledHintText = _styledComponents.default.div`
-  ::after {
-    content: " ";
-  }
-
-  margin-top: var(--spacing000);
-  margin-bottom: var(--spacing150);
-  color: ${({
-  isDisabled
-}) => isDisabled ? "var(--colorsUtilityYin030)" : "var(--colorsUtilityYin055)"};
-  font-size: 14px;
-`;
 StyledButtonToggleGroup.defaultProps = {
   theme: _themes.baseTheme
 };

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

@@ -7,7 +7,7 @@ exports.default = exports.CheckboxGroup = void 0;
 var _react = _interopRequireWildcard(require("react"));
 var _propTypes = _interopRequireDefault(require("prop-types"));
 var _tags = _interopRequireDefault(require("../../../__internal__/utils/helpers/tags/tags"));
-var _checkboxGroup = _interopRequireWildcard(require("./checkbox-group.style"));
+var _checkboxGroup = _interopRequireDefault(require("./checkbox-group.style"));
 var _fieldset = _interopRequireDefault(require("../../../__internal__/fieldset"));
 var _utils = require("../../../style/utils");
 var _tooltipProvider = require("../../../__internal__/tooltip-provider");
@@ -15,10 +15,11 @@ var _formSpacingProvider = _interopRequireDefault(require("../../../__internal__
 var _newValidation = _interopRequireDefault(require("../../carbon-provider/__internal__/new-validation.context"));
 var _validationMessage = _interopRequireDefault(require("../../../__internal__/validation-message/validation-message.component"));
 var _box = _interopRequireDefault(require("../../box"));
-var _textbox = require("../../textbox/textbox.style");
+var _textbox = _interopRequireDefault(require("../../textbox/textbox.style"));
 var _checkboxGroup2 = _interopRequireDefault(require("./__internal__/checkbox-group.context"));
 var _guid = _interopRequireDefault(require("../../../__internal__/utils/helpers/guid"));
 var _useInputAccessibility = _interopRequireDefault(require("../../../hooks/__internal__/useInputAccessibility"));
+var _hintText = _interopRequireDefault(require("../../../__internal__/hint-text"));
 function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
 function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
 function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
@@ -70,15 +71,17 @@ const CheckboxGroup = ({
     "aria-describedby": combinedAriaDescribedBy
   }, (0, _tags.default)("checkboxgroup", rest), {
     blockGroupBehaviour: !(error || warning)
-  }, (0, _utils.filterStyledSystemMarginProps)(rest)), legendHelp && /*#__PURE__*/_react.default.createElement(_checkboxGroup.StyledHintText, {
-    id: inputHintId
+  }, (0, _utils.filterStyledSystemMarginProps)(rest)), legendHelp && /*#__PURE__*/_react.default.createElement(_hintText.default, {
+    align: legendAlign,
+    id: inputHintId,
+    marginTop: "-4px"
   }, legendHelp), /*#__PURE__*/_react.default.createElement(_box.default, {
     position: "relative"
   }, /*#__PURE__*/_react.default.createElement(_validationMessage.default, {
     error: error,
     warning: warning,
     validationId: validationId
-  }), (error || warning) && /*#__PURE__*/_react.default.createElement(_textbox.ErrorBorder, {
+  }), (error || warning) && /*#__PURE__*/_react.default.createElement(_textbox.default, {
     warning: !!(!error && warning),
     inline: inline
   }), /*#__PURE__*/_react.default.createElement(_checkboxGroup.default, {

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

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

package/lib/components/checkbox/checkbox-group/checkbox-group.style.js

@@ -3,7 +3,7 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.default = exports.StyledHintText = void 0;
+exports.default = void 0;
 var _styledComponents = _interopRequireWildcard(require("styled-components"));
 var _formField = _interopRequireDefault(require("../../../__internal__/form-field/form-field.style"));
 var _icon = _interopRequireDefault(require("../../icon/icon.style"));
@@ -13,12 +13,6 @@ var _validationIcon = _interopRequireDefault(require("../../../__internal__/vali
 function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
 function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
 function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
-const StyledHintText = exports.StyledHintText = _styledComponents.default.div`
-  margin-top: -4px;
-  margin-bottom: 8px;
-  color: var(--colorsUtilityYin055);
-  font-size: 14px;
-`;
 const StyledCheckboxGroup = _styledComponents.default.div`
   display: flex;
   flex-direction: column;

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

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

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

@@ -6,50 +6,49 @@ Object.defineProperty(exports, "__esModule", {
 Object.defineProperty(exports, "format", {
   enumerable: true,
   get: function () {
-    return _format.default;
+    return _format.format;
   }
 });
 Object.defineProperty(exports, "formatISO", {
   enumerable: true,
   get: function () {
-    return _formatISO.default;
+    return _formatISO.formatISO;
   }
 });
 Object.defineProperty(exports, "isMatch", {
   enumerable: true,
   get: function () {
-    return _isMatch.default;
+    return _isMatch.isMatch;
   }
 });
 Object.defineProperty(exports, "isValid", {
   enumerable: true,
   get: function () {
-    return _isValid.default;
+    return _isValid.isValid;
   }
 });
 Object.defineProperty(exports, "parse", {
   enumerable: true,
   get: function () {
-    return _parse.default;
+    return _parse.parse;
   }
 });
 Object.defineProperty(exports, "parseISO", {
   enumerable: true,
   get: function () {
-    return _parseISO.default;
+    return _parseISO.parseISO;
   }
 });
 Object.defineProperty(exports, "parseWithOptions", {
   enumerable: true,
   get: function () {
-    return _parseWithOptions.default;
+    return _parseWithOptions.parseWithOptions;
   }
 });
-var _format = _interopRequireDefault(require("date-fns/fp/format"));
-var _formatISO = _interopRequireDefault(require("date-fns/fp/formatISO"));
-var _isMatch = _interopRequireDefault(require("date-fns/fp/isMatch"));
-var _isValid = _interopRequireDefault(require("date-fns/fp/isValid"));
-var _parse = _interopRequireDefault(require("date-fns/fp/parse"));
-var _parseWithOptions = _interopRequireDefault(require("date-fns/fp/parseWithOptions"));
-var _parseISO = _interopRequireDefault(require("date-fns/fp/parseISO"));
-function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+var _format = require("date-fns/fp/format");
+var _formatISO = require("date-fns/fp/formatISO");
+var _isMatch = require("date-fns/fp/isMatch");
+var _isValid = require("date-fns/fp/isValid");
+var _parse = require("date-fns/fp/parse");
+var _parseWithOptions = require("date-fns/fp/parseWithOptions");
+var _parseISO = require("date-fns/fp/parseISO");

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

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

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

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

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

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

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

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

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

@@ -13,12 +13,13 @@ var _useUniqueId = _interopRequireDefault(require("../../hooks/__internal__/useU
 var _useInputAccessibility = _interopRequireDefault(require("../../hooks/__internal__/useInputAccessibility/useInputAccessibility"));
 var _validationMessage = _interopRequireDefault(require("../../__internal__/validation-message"));
 var _fileInput = require("./file-input.style");
-var _textbox = require("../textbox/textbox.style");
+var _textbox = _interopRequireDefault(require("../textbox/textbox.style"));
 var _buttonMinor = _interopRequireDefault(require("../button-minor"));
 var _typography = _interopRequireDefault(require("../typography"));
 var _fileUploadStatus = _interopRequireDefault(require("./__internal__/file-upload-status"));
 var _box = _interopRequireDefault(require("../box"));
 var _useLocale = _interopRequireDefault(require("../../hooks/__internal__/useLocale"));
+var _hintText = _interopRequireDefault(require("../../__internal__/hint-text"));
 function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
 function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
 function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
@@ -123,12 +124,12 @@ const FileInput = exports.FileInput = /*#__PURE__*/_react.default.forwardRef(({
 
   // allow for single input that a single set of status props is provided
   const filesUploaded = Array.isArray(uploadStatus) ? uploadStatus : [uploadStatus];
-  const input = /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, inputHint && /*#__PURE__*/_react.default.createElement(_textbox.StyledHintText, null, inputHint), /*#__PURE__*/_react.default.createElement(_box.default, {
+  const input = /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, inputHint && /*#__PURE__*/_react.default.createElement(_hintText.default, null, inputHint), /*#__PURE__*/_react.default.createElement(_box.default, {
     position: "relative"
   }, /*#__PURE__*/_react.default.createElement(_validationMessage.default, {
     error: error,
     validationId: validationId
-  }), error && /*#__PURE__*/_react.default.createElement(_textbox.ErrorBorder, {
+  }), error && /*#__PURE__*/_react.default.createElement(_textbox.default, {
     warning: false
   }), /*#__PURE__*/_react.default.createElement(_fileInput.StyledHiddenFileInput, _extends({}, required && {
     required