carbon-react 147.0.1 → 147.2.0

package/esm/__internal__/fieldset/fieldset.component.js

@@ -12,7 +12,7 @@ const Fieldset = ({
   children,
   inline = false,
   legendWidth,
-  legendAlign = "right",
+  legendAlign,
   legendSpacing = 2,
   error,
   warning,
@@ -60,6 +60,14 @@ const Fieldset = ({
     }
     return null;
   };
+  let legendAlignment;
+  if (inline && !legendAlign) {
+    legendAlignment = "right";
+  } else if (!legendAlign) {
+    legendAlignment = "left";
+  } else {
+    legendAlignment = legendAlign;
+  }
   return /*#__PURE__*/React.createElement(InputGroupBehaviour, {
     blockGroupBehaviour: blockGroupBehaviour
   }, /*#__PURE__*/React.createElement(StyledFieldset, _extends({
@@ -73,7 +81,7 @@ const Fieldset = ({
     onMouseLeave: onMouseLeave,
     inline: inline,
     width: legendWidth,
-    align: legendAlign,
+    align: legendAlignment,
     rightPadding: legendSpacing
   }, legendMargin, {
     "data-element": "legend",

package/esm/__internal__/fieldset/fieldset.style.d.ts

@@ -8,7 +8,7 @@ declare type StyledLegendContentProps = {
     isDisabled?: boolean;
 };
 declare const StyledLegendContent: import("styled-components").StyledComponent<"span", any, StyledLegendContentProps, never>;
-declare type StyledLegendProps = {
+export declare type StyledLegendProps = {
     inline?: boolean;
     width?: number;
     align?: "left" | "right";

package/esm/__internal__/fieldset/fieldset.style.js

@@ -60,17 +60,28 @@ const StyledLegend = styled.legend`
   padding: 0;
   font-weight: var(--fontWeights500);
   color: var(--colorsUtilityYin090);
+
+  ${({
+  align,
+  inline
+}) => align && css`
+      text-align: ${align};
+      justify-content: ${align === "right" ? "flex-end" : "flex-start"};
+
+      ${!inline && css`
+        width: -moz-available;
+      `}
+    `};
+
   ${({
   inline,
   width,
-  align,
   rightPadding
 }) => inline && css`
       float: left;
       box-sizing: border-box;
       margin: 0;
       ${width && `width: ${width}%`};
-      justify-content: ${align === "right" ? "flex-end" : "flex-start"};
       padding-right: ${rightPadding === 1 ? "var(--spacing100)" : "var(--spacing200)"};
     `}
   ${margin}

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

@@ -26,7 +26,7 @@ export const CheckboxGroup = props => {
     isOptional,
     legendInline,
     legendWidth,
-    legendAlign,
+    legendAlign = "left",
     legendSpacing,
     legendHelp,
     tooltipPosition,

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

@@ -51,8 +51,10 @@ export interface NumeralDateProps<DateType extends NumeralDateObject = FullDate>
     name?: string;
     /** Label */
     label?: string;
-    /** [Legacy] Label alignment. Works only when labelInline is true */
+    /** Label alignment */
     labelAlign?: "left" | "right";
+    /** Field labels alignment */
+    fieldLabelsAlign?: "left" | "right";
     /**
      * Text applied to label help tooltip, will be rendered as
      * hint text when `validationRedesignOptIn` is true.
@@ -94,5 +96,5 @@ export interface NumeralDateProps<DateType extends NumeralDateObject = FullDate>
     isOptional?: boolean;
 }
 export declare type ValidDateFormat = (typeof ALLOWED_DATE_FORMATS)[number];
-export declare const NumeralDate: <DateType extends NumeralDateObject = FullDate>({ dateFormat, defaultValue, disabled, error, warning, "data-component": dataComponent, "data-element": dataElement, "data-role": dataRole, info, id, name, onBlur, onChange, value, validationOnLabel, label, labelInline, labelWidth, labelAlign, labelHelp, labelSpacing, fieldHelp, adaptiveLabelBreakpoint, required, isOptional, readOnly, size, enableInternalError, enableInternalWarning, tooltipPosition, helpAriaLabel, dayRef, monthRef, yearRef, ...rest }: NumeralDateProps<DateType>) => React.JSX.Element;
+export declare const NumeralDate: <DateType extends NumeralDateObject = FullDate>({ dateFormat, defaultValue, disabled, error, warning, "data-component": dataComponent, "data-element": dataElement, "data-role": dataRole, info, id, name, onBlur, onChange, value, validationOnLabel, label, labelInline, labelWidth, labelAlign, fieldLabelsAlign, labelHelp, labelSpacing, fieldHelp, adaptiveLabelBreakpoint, required, isOptional, readOnly, size, enableInternalError, enableInternalWarning, tooltipPosition, helpAriaLabel, dayRef, monthRef, yearRef, ...rest }: NumeralDateProps<DateType>) => React.JSX.Element;
 export default NumeralDate;

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

@@ -97,6 +97,7 @@ export const NumeralDate = ({
   labelInline,
   labelWidth,
   labelAlign,
+  fieldLabelsAlign,
   labelHelp,
   labelSpacing,
   fieldHelp,
@@ -262,9 +263,9 @@ export const NumeralDate = ({
         isYearInput: datePart.length === 4,
         hasValidationIconInField: !validationOnLabel && isEnd && validationInField
       }, /*#__PURE__*/React.createElement(Textbox, _extends({
-        maxWidth: "fit-content",
         id: inputIds.current[datePart],
         label: getDateLabel(datePart, locale),
+        labelAlign: fieldLabelsAlign,
         disabled: disabled,
         readOnly: readOnly,
         error: !!internalError,
@@ -294,6 +295,9 @@ export const NumeralDate = ({
       "data-role": dataRole,
       id: uniqueId,
       legend: label,
+      legendMargin: {
+        mb: 0
+      },
       isRequired: required,
       isOptional: isOptional,
       isDisabled: disabled,
@@ -302,6 +306,7 @@ export const NumeralDate = ({
       warning: validationOnLabel && internalWarning,
       info: validationOnLabel && info,
       inline: inline,
+      size: size,
       labelHelp: labelHelp,
       legendAlign: labelAlign,
       legendWidth: labelWidth,
@@ -309,8 +314,9 @@ export const NumeralDate = ({
       validationId: validationId,
       "aria-describedby": ariaDescribedBy
     }, filterStyledSystemMarginProps(rest)), /*#__PURE__*/React.createElement(Box, {
-      display: "block",
-      mt: 1
+      display: "flex",
+      flexDirection: "column",
+      mt: inline ? 0 : 1
     }, renderInputs(), fieldHelp && /*#__PURE__*/React.createElement(FieldHelp, {
       id: fieldHelpId
     }, fieldHelp))));
@@ -321,6 +327,10 @@ export const NumeralDate = ({
     "data-role": dataRole,
     id: uniqueId,
     legend: label,
+    legendMargin: {
+      mb: 0
+    },
+    legendAlign: labelAlign,
     isRequired: required,
     isOptional: isOptional,
     isDisabled: disabled,
@@ -330,7 +340,7 @@ export const NumeralDate = ({
     id: inputHintId.current
   }, labelHelp), /*#__PURE__*/React.createElement(Box, {
     position: "relative",
-    mt: 1
+    mt: labelHelp ? 0 : 1
   }, (internalError || internalWarning) && /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(ValidationMessage, {
     error: internalError,
     warning: internalWarning,

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

@@ -1,4 +1,5 @@
 /// <reference types="react" />
+import { FieldsetProps } from "../../__internal__/fieldset";
 interface StyledDateFieldProps {
     isYearInput?: boolean;
     hasValidationIconInField: boolean;
@@ -8,5 +9,9 @@ export declare const StyledNumeralDate: import("styled-components").StyledCompon
     name?: string | undefined;
 }, never>;
 export declare const StyledDateField: import("styled-components").StyledComponent<"div", any, StyledDateFieldProps, never>;
-export declare const StyledFieldset: import("styled-components").StyledComponent<({ legend, children, inline, legendWidth, legendAlign, legendSpacing, error, warning, info, isRequired, blockGroupBehaviour, legendMargin, isDisabled, isOptional, labelHelp, validationId, ...rest }: import("../../__internal__/fieldset").FieldsetProps) => import("react").JSX.Element, any, {}, never>;
+interface StyledFieldsetProps extends FieldsetProps {
+    inline?: boolean;
+    size?: "small" | "medium" | "large";
+}
+export declare const StyledFieldset: import("styled-components").StyledComponent<({ legend, children, inline, legendWidth, legendAlign, legendSpacing, error, warning, info, isRequired, blockGroupBehaviour, legendMargin, isDisabled, isOptional, labelHelp, validationId, ...rest }: FieldsetProps) => import("react").JSX.Element, any, StyledFieldsetProps, never>;
 export {};

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

@@ -46,17 +46,26 @@ export const StyledDateField = styled.div`
     }
   `}
 `;
+// We need to match height of the legend to the input container when it is inline to center it vertically,
+// as Safari does not support display: flex on fieldset elements.
+const sizeHeight = {
+  small: "57px",
+  medium: "65px",
+  large: "73px"
+};
 export const StyledFieldset = styled(Fieldset)`
   ${({
-  inline
+  inline,
+  size
 }) => css`
     ${inline && css`
-      display: flex;
-      align-items: center;
+      ${StyledLegend} {
+        height: ${size && sizeHeight[size]};
+      }
     `}
-  `}
 
-  ${StyledLegend} {
-    margin-bottom: 0;
-  }
+    ${!inline && css`
+      width: min-content;
+    `}
+  `}
 `;

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

@@ -0,0 +1,2 @@
+declare const getColoursForPortrait: (backgroundColour: string | undefined, darkBackground?: boolean, largeText?: boolean, strict?: boolean, foregroundColor?: string | undefined) => string;
+export default getColoursForPortrait;

package/esm/components/portrait/__internal__/utils.js

@@ -0,0 +1,75 @@
+const getContrastRatio = (luminance1, luminance2) => {
+  const [L1, L2] = luminance1 > luminance2 ? [luminance1, luminance2] : [luminance2, luminance1];
+  return (L1 + 0.05) / (L2 + 0.05);
+};
+const calculateLuminance = hexColor => {
+  const hex = hexColor.replace("#", "");
+  const r = parseInt(hex.slice(0, 2), 16);
+  const g = parseInt(hex.slice(2, 4), 16);
+  const b = parseInt(hex.slice(4, 6), 16);
+  const normalize = value => {
+    const v = value / 255;
+    return v <= 0.03928 ? v / 12.92 : ((v + 0.055) / 1.055) ** 2.4;
+  };
+  const normalizedR = normalize(r);
+  const normalizedG = normalize(g);
+  const normalizedB = normalize(b);
+  const luminance = 0.2126 * normalizedR + 0.7152 * normalizedG + 0.0722 * normalizedB;
+  return luminance;
+};
+function getAccessibleForegroundColor(backgroundColor, largeText, strict) {
+  const bgLuminance = calculateLuminance(backgroundColor);
+  const whiteLuminance = calculateLuminance("#FFFFFF");
+  const blackLuminance = calculateLuminance("#000000");
+  const whiteContrast = getContrastRatio(bgLuminance, whiteLuminance);
+  const blackContrast = getContrastRatio(bgLuminance, blackLuminance);
+  const strictThreshold = largeText ? 4.5 : 7.0;
+  const nonStrictThreshold = largeText ? 3.0 : 4.5;
+  const minContrast = strict ? strictThreshold : nonStrictThreshold;
+
+  /* istanbul ignore else */
+  if (whiteContrast >= minContrast && whiteContrast > blackContrast) {
+    return "#FFFFFF";
+  }
+
+  /* istanbul ignore else */
+  if (blackContrast >= minContrast) {
+    return "var(--colorsUtilityYin090)";
+  }
+
+  // If no color meets the contrast ratio, return the color with the highest contrast
+  // In theory this is possible only if the background color is a shade of grey, but
+  // this is a fallback mechanism as finding a colour which fails both contrast ratios
+  // is highly unlikely.
+  /* istanbul ignore next */
+  return whiteContrast > blackContrast ? "#FFFFFF" : "var(--colorsUtilityYin090)";
+}
+const getColoursForPortrait = (backgroundColour,
+// Whether the portrait is on a dark background
+darkBackground = false,
+// Whether the text is large
+largeText = false,
+/**
+ * Whether to use strict contrast (i.e., WCAG AAA). If this is false, it uses WCAG AA contrast
+ * ratios (4.5:1 for normal text, 3:1 for large text). If true, it uses 7:1 for normal text and
+ * 4.5:1 for large text.
+ */
+strict = false,
+// The custom foreground colour, if any
+foregroundColor = undefined) => {
+  let fgColor = "var(--colorsUtilityYin090)";
+  let bgColor = "var(--colorsUtilityReadOnly400)";
+  if (darkBackground && !backgroundColour && !foregroundColor) {
+    bgColor = "var(--colorsUtilityYin090)";
+    fgColor = "var(--colorsUtilityReadOnly600)";
+  }
+  if (backgroundColour) {
+    bgColor = backgroundColour;
+    fgColor = getAccessibleForegroundColor(backgroundColour, largeText, strict);
+  }
+  if (foregroundColor) {
+    fgColor = foregroundColor;
+  }
+  return `background-color: ${bgColor}; color: ${fgColor};`;
+};
+export default getColoursForPortrait;

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

@@ -38,6 +38,10 @@ export interface PortraitProps extends MarginProps {
     tooltipBgColor?: string;
     /** [Legacy] Override font color of the Tooltip, provide any color from palette or any valid css color value. */
     tooltipFontColor?: string;
+    /** The hex code of the background colour */
+    backgroundColor?: string;
+    /** The hex code of the foreground colour. This will only take effect if use in conjunction with `backgroundColor` */
+    foregroundColor?: string;
 }
-declare const Portrait: ({ alt, name, darkBackground, iconType, initials, shape, size, src, onClick, tooltipMessage, tooltipId, tooltipIsVisible, tooltipPosition, tooltipType, tooltipSize, tooltipBgColor, tooltipFontColor, ...rest }: PortraitProps) => React.JSX.Element;
+declare const Portrait: ({ alt, backgroundColor, foregroundColor, name, darkBackground, iconType, initials, shape, size, src, onClick, tooltipMessage, tooltipId, tooltipIsVisible, tooltipPosition, tooltipType, tooltipSize, tooltipBgColor, tooltipFontColor, ...rest }: PortraitProps) => React.JSX.Element;
 export default Portrait;

package/esm/components/portrait/portrait.component.js

@@ -7,6 +7,8 @@ import { StyledCustomImg, StyledIcon, StyledPortraitContainer, StyledPortraitIni
 import { filterStyledSystemMarginProps } from "../../style/utils";
 const Portrait = ({
   alt,
+  backgroundColor,
+  foregroundColor = undefined,
   name,
   darkBackground = false,
   iconType = "individual",
@@ -66,7 +68,9 @@ const Portrait = ({
         hasValidImg: hasValidImg,
         darkBackground: darkBackground,
         size: size,
-        shape: shape
+        shape: shape,
+        backgroundColor: backgroundColor,
+        foregroundColor: foregroundColor
       }), portrait));
     }
     return /*#__PURE__*/React.createElement(StyledPortraitContainer, _extends({}, filterStyledSystemMarginProps(rest), {
@@ -75,7 +79,9 @@ const Portrait = ({
       hasValidImg: hasValidImg,
       darkBackground: darkBackground,
       size: size,
-      shape: shape
+      shape: shape,
+      backgroundColor: backgroundColor,
+      foregroundColor: foregroundColor
     }), portrait);
   };
   return renderComponent();

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

@@ -2,6 +2,8 @@ import React from "react";
 import { MarginProps } from "styled-system";
 import { PortraitSizes, PortraitShapes } from "./portrait.component";
 declare type StyledPortraitProps = {
+    backgroundColor?: string;
+    foregroundColor?: string;
     darkBackground?: boolean;
     size: PortraitSizes;
     shape?: PortraitShapes;

package/esm/components/portrait/portrait.style.js

@@ -1,9 +1,10 @@
 import styled from "styled-components";
 import { margin } from "styled-system";
-import BaseTheme from "../../style/themes/base";
 import Icon from "../icon";
-import { PORTRAIT_SIZE_PARAMS } from "./portrait.config";
 import profileConfigSizes from "../profile/profile.config";
+import BaseTheme from "../../style/themes/base";
+import { PORTRAIT_SIZE_PARAMS } from "./portrait.config";
+import getColoursForPortrait from "./__internal__/utils";
 export const StyledPortraitInitials = styled.div`
   font-weight: 500;
   font-size: ${({
@@ -37,12 +38,12 @@ export const StyledIcon = styled(Icon)`
   }
 `;
 export const StyledPortraitContainer = styled.div`
-  color: ${({
-  darkBackground
-}) => darkBackground ? "var(--colorsUtilityReadOnly600)" : "var(--colorsUtilityYin090)"};
-  background-color: ${({
-  darkBackground
-}) => darkBackground ? "var(--colorsUtilityYin090)" : "var(--colorsUtilityReadOnly400)"};
+  ${({
+  darkBackground,
+  backgroundColor,
+  size,
+  foregroundColor
+}) => getColoursForPortrait(backgroundColor, darkBackground, !["XS", "S"].includes(size), true, foregroundColor)};
   ${({
   hasValidImg,
   size

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

@@ -24,6 +24,10 @@ export interface ProfileProps extends MarginProps {
     size?: ProfileSize;
     /** Use a dark background. */
     darkBackground?: boolean;
+    /** The hex code of the background colour to be passed to the avatar */
+    backgroundColor?: string;
+    /** The hex code of the foreground colour to be passed to the avatar. Must be used in conjunction with `backgroundColor` */
+    foregroundColor?: string;
 }
-export declare const Profile: ({ src, alt, className, initials, name, size, email, text, darkBackground, ...props }: ProfileProps) => React.JSX.Element;
+export declare const Profile: ({ src, alt, className, initials, name, size, email, text, darkBackground, backgroundColor, foregroundColor, ...props }: ProfileProps) => React.JSX.Element;
 export default Profile;

package/esm/components/profile/profile.component.js

@@ -21,6 +21,8 @@ export const Profile = ({
   email,
   text,
   darkBackground,
+  backgroundColor,
+  foregroundColor,
   ...props
 }) => {
   const getInitials = () => {
@@ -32,7 +34,10 @@ export const Profile = ({
     alt,
     name,
     initials: getInitials(),
-    size
+    size,
+    backgroundColor,
+    foregroundColor,
+    "data-role": "profile-portrait"
   };
   const avatar = () => {
     if (src) {

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

@@ -10,5 +10,5 @@ declare const ProfileEmailStyle: import("styled-components").StyledComponent<imp
 declare const ProfileTextStyle: import("styled-components").StyledComponent<"span", any, ProfileSProps, never>;
 declare const ProfileStyle: import("styled-components").StyledComponent<"div", any, Pick<ProfileSProps, "darkBackground" | "hasSrc">, never>;
 declare const ProfileDetailsStyle: import("styled-components").StyledComponent<"div", any, Pick<ProfileSProps, "size" | "hasSrc">, never>;
-declare const ProfileAvatarStyle: import("styled-components").StyledComponent<({ alt, name, darkBackground, iconType, initials, shape, size, src, onClick, tooltipMessage, tooltipId, tooltipIsVisible, tooltipPosition, tooltipType, tooltipSize, tooltipBgColor, tooltipFontColor, ...rest }: import("../portrait").PortraitProps) => import("react").JSX.Element, any, {}, never>;
+declare const ProfileAvatarStyle: import("styled-components").StyledComponent<({ alt, backgroundColor, foregroundColor, name, darkBackground, iconType, initials, shape, size, src, onClick, tooltipMessage, tooltipId, tooltipIsVisible, tooltipPosition, tooltipType, tooltipSize, tooltipBgColor, tooltipFontColor, ...rest }: import("../portrait").PortraitProps) => import("react").JSX.Element, any, {}, never>;
 export { ProfileStyle, ProfileNameStyle, ProfileDetailsStyle, ProfileAvatarStyle, ProfileEmailStyle, ProfileTextStyle, };

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

@@ -29,7 +29,7 @@ export const RadioButtonGroup = props => {
     inline = false,
     legendInline = false,
     legendWidth,
-    legendAlign,
+    legendAlign = "left",
     legendSpacing,
     labelSpacing = 1,
     adaptiveLegendBreakpoint,

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

@@ -194,8 +194,6 @@ const Switch = /*#__PURE__*/React.forwardRef(({
     width: labelInline ? "100%" : "auto"
   }, /*#__PURE__*/React.createElement(Box, {
     "data-role": "label-wrapper"
-    // width={labelInline ? rest.labelWidth : 30}
-    // minWidth={label && labelInline ? "32px" : 0}
   }, /*#__PURE__*/React.createElement(Label, {
     isDarkBackground: isDarkBackground,
     labelId: labelId.current,

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

@@ -28,6 +28,10 @@ interface TimeInputProps extends Omit<TagProps, "data-component">, Omit<Validati
 export interface TimeProps extends Omit<TagProps, "data-component">, MarginProps {
     /** Label text for the component */
     label?: string;
+    /** Label alignment */
+    labelAlign?: "left" | "right";
+    /** Field labels alignment */
+    fieldLabelsAlign?: "left" | "right";
     /** Sets the size of the inputs */
     size?: Sizes;
     /** Additional hint text rendered above the input elements */

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

@@ -15,6 +15,8 @@ import { StyledLabel as Label, StyledHintText as Hint } from "./time.style";
 import { TimeToggle } from "./__internal__/time-toggle";
 const Time = /*#__PURE__*/React.forwardRef(({
   label,
+  labelAlign,
+  fieldLabelsAlign,
   size = "medium",
   inputHint,
   hoursInputProps = {},
@@ -141,7 +143,8 @@ const Time = /*#__PURE__*/React.forwardRef(({
     legendMargin: {
       mb: 0
     },
-    width: "fit-content",
+    width: "min-content",
+    legendAlign: labelAlign,
     isRequired: required,
     isOptional: isOptional,
     isDisabled: disabled,
@@ -153,7 +156,8 @@ const Time = /*#__PURE__*/React.forwardRef(({
     id: inputHintId.current,
     isDisabled: disabled
   }, inputHint), /*#__PURE__*/React.createElement(Box, {
-    position: "relative"
+    position: "relative",
+    mt: inputHint ? 0 : 1
   }, /*#__PURE__*/React.createElement(ValidationMessage, {
     validationId: validationId,
     error: error,
@@ -165,7 +169,8 @@ const Time = /*#__PURE__*/React.forwardRef(({
   }, /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement(Label, {
     "aria-label": hrsAriaLabel,
     htmlFor: internalHrsId.current,
-    disabled: disabled
+    disabled: disabled,
+    align: fieldLabelsAlign
   }, hrsLabel), /*#__PURE__*/React.createElement(Number, _extends({}, hoursInputProps, {
     label: undefined,
     "data-component": "hours",
@@ -192,7 +197,8 @@ const Time = /*#__PURE__*/React.forwardRef(({
   }, ":")), /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement(Label, {
     "aria-label": minsAriaLabel,
     htmlFor: internalMinsId.current,
-    disabled: disabled
+    disabled: disabled,
+    align: fieldLabelsAlign
   }, minsLabel), /*#__PURE__*/React.createElement(Number, _extends({}, minutesInputProps, {
     label: undefined,
     "data-component": "minutes",
@@ -209,7 +215,8 @@ const Time = /*#__PURE__*/React.forwardRef(({
   }))), showToggle && /*#__PURE__*/React.createElement(Box, {
     display: "flex",
     flexDirection: "column",
-    justifyContent: "flex-end"
+    justifyContent: "flex-end",
+    width: "max-content"
   }, /*#__PURE__*/React.createElement(TimeToggle, {
     toggleProps: toggleProps,
     size: size,
@@ -224,6 +231,7 @@ if (process.env.NODE_ENV !== "production") {
     "data-element": PropTypes.string,
     "data-role": PropTypes.string,
     "disabled": PropTypes.bool,
+    "fieldLabelsAlign": PropTypes.oneOf(["left", "right"]),
     "hoursInputProps": PropTypes.shape({
       "aria-label": PropTypes.string,
       "data-element": PropTypes.string,
@@ -236,6 +244,7 @@ if (process.env.NODE_ENV !== "production") {
     "inputHint": PropTypes.string,
     "isOptional": PropTypes.bool,
     "label": PropTypes.string,
+    "labelAlign": PropTypes.oneOf(["left", "right"]),
     "m": PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.oneOf([null]), PropTypes.number, PropTypes.shape({
       "__@toStringTag": PropTypes.string.isRequired,
       "description": PropTypes.string,

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

@@ -11,7 +11,7 @@ export const StyledHintText = styled.div`
   }
 
   margin-top: var(--spacing000);
-  margin-bottom: var(--spacing150);
+  margin-bottom: var(--spacing100);
   color: ${({
   isDisabled
 }) => isDisabled ? "var(--colorsUtilityYin030)" : "var(--colorsUtilityYin055)"};

package/lib/__internal__/fieldset/fieldset.component.js

@@ -21,7 +21,7 @@ const Fieldset = ({
   children,
   inline = false,
   legendWidth,
-  legendAlign = "right",
+  legendAlign,
   legendSpacing = 2,
   error,
   warning,
@@ -69,6 +69,14 @@ const Fieldset = ({
     }
     return null;
   };
+  let legendAlignment;
+  if (inline && !legendAlign) {
+    legendAlignment = "right";
+  } else if (!legendAlign) {
+    legendAlignment = "left";
+  } else {
+    legendAlignment = legendAlign;
+  }
   return /*#__PURE__*/_react.default.createElement(_inputBehaviour.InputGroupBehaviour, {
     blockGroupBehaviour: blockGroupBehaviour
   }, /*#__PURE__*/_react.default.createElement(_fieldset.StyledFieldset, _extends({
@@ -82,7 +90,7 @@ const Fieldset = ({
     onMouseLeave: onMouseLeave,
     inline: inline,
     width: legendWidth,
-    align: legendAlign,
+    align: legendAlignment,
     rightPadding: legendSpacing
   }, legendMargin, {
     "data-element": "legend",

package/lib/__internal__/fieldset/fieldset.style.d.ts

@@ -8,7 +8,7 @@ declare type StyledLegendContentProps = {
     isDisabled?: boolean;
 };
 declare const StyledLegendContent: import("styled-components").StyledComponent<"span", any, StyledLegendContentProps, never>;
-declare type StyledLegendProps = {
+export declare type StyledLegendProps = {
     inline?: boolean;
     width?: number;
     align?: "left" | "right";

package/lib/__internal__/fieldset/fieldset.style.js

@@ -69,17 +69,28 @@ const StyledLegend = exports.StyledLegend = _styledComponents.default.legend`
   padding: 0;
   font-weight: var(--fontWeights500);
   color: var(--colorsUtilityYin090);
+
+  ${({
+  align,
+  inline
+}) => align && (0, _styledComponents.css)`
+      text-align: ${align};
+      justify-content: ${align === "right" ? "flex-end" : "flex-start"};
+
+      ${!inline && (0, _styledComponents.css)`
+        width: -moz-available;
+      `}
+    `};
+
   ${({
   inline,
   width,
-  align,
   rightPadding
 }) => inline && (0, _styledComponents.css)`
       float: left;
       box-sizing: border-box;
       margin: 0;
       ${width && `width: ${width}%`};
-      justify-content: ${align === "right" ? "flex-end" : "flex-start"};
       padding-right: ${rightPadding === 1 ? "var(--spacing100)" : "var(--spacing200)"};
     `}
   ${_styledSystem.margin}

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

@@ -35,7 +35,7 @@ const CheckboxGroup = props => {
     isOptional,
     legendInline,
     legendWidth,
-    legendAlign,
+    legendAlign = "left",
     legendSpacing,
     legendHelp,
     tooltipPosition,

package/lib/components/numeral-date/numeral-date.component.d.ts

@@ -51,8 +51,10 @@ export interface NumeralDateProps<DateType extends NumeralDateObject = FullDate>
     name?: string;
     /** Label */
     label?: string;
-    /** [Legacy] Label alignment. Works only when labelInline is true */
+    /** Label alignment */
     labelAlign?: "left" | "right";
+    /** Field labels alignment */
+    fieldLabelsAlign?: "left" | "right";
     /**
      * Text applied to label help tooltip, will be rendered as
      * hint text when `validationRedesignOptIn` is true.
@@ -94,5 +96,5 @@ export interface NumeralDateProps<DateType extends NumeralDateObject = FullDate>
     isOptional?: boolean;
 }
 export declare type ValidDateFormat = (typeof ALLOWED_DATE_FORMATS)[number];
-export declare const NumeralDate: <DateType extends NumeralDateObject = FullDate>({ dateFormat, defaultValue, disabled, error, warning, "data-component": dataComponent, "data-element": dataElement, "data-role": dataRole, info, id, name, onBlur, onChange, value, validationOnLabel, label, labelInline, labelWidth, labelAlign, labelHelp, labelSpacing, fieldHelp, adaptiveLabelBreakpoint, required, isOptional, readOnly, size, enableInternalError, enableInternalWarning, tooltipPosition, helpAriaLabel, dayRef, monthRef, yearRef, ...rest }: NumeralDateProps<DateType>) => React.JSX.Element;
+export declare const NumeralDate: <DateType extends NumeralDateObject = FullDate>({ dateFormat, defaultValue, disabled, error, warning, "data-component": dataComponent, "data-element": dataElement, "data-role": dataRole, info, id, name, onBlur, onChange, value, validationOnLabel, label, labelInline, labelWidth, labelAlign, fieldLabelsAlign, labelHelp, labelSpacing, fieldHelp, adaptiveLabelBreakpoint, required, isOptional, readOnly, size, enableInternalError, enableInternalWarning, tooltipPosition, helpAriaLabel, dayRef, monthRef, yearRef, ...rest }: NumeralDateProps<DateType>) => React.JSX.Element;
 export default NumeralDate;

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

@@ -106,6 +106,7 @@ const NumeralDate = ({
   labelInline,
   labelWidth,
   labelAlign,
+  fieldLabelsAlign,
   labelHelp,
   labelSpacing,
   fieldHelp,
@@ -271,9 +272,9 @@ const NumeralDate = ({
         isYearInput: datePart.length === 4,
         hasValidationIconInField: !validationOnLabel && isEnd && validationInField
       }, /*#__PURE__*/_react.default.createElement(_textbox.default, _extends({
-        maxWidth: "fit-content",
         id: inputIds.current[datePart],
         label: getDateLabel(datePart, locale),
+        labelAlign: fieldLabelsAlign,
         disabled: disabled,
         readOnly: readOnly,
         error: !!internalError,
@@ -303,6 +304,9 @@ const NumeralDate = ({
       "data-role": dataRole,
       id: uniqueId,
       legend: label,
+      legendMargin: {
+        mb: 0
+      },
       isRequired: required,
       isOptional: isOptional,
       isDisabled: disabled,
@@ -311,6 +315,7 @@ const NumeralDate = ({
       warning: validationOnLabel && internalWarning,
       info: validationOnLabel && info,
       inline: inline,
+      size: size,
       labelHelp: labelHelp,
       legendAlign: labelAlign,
       legendWidth: labelWidth,
@@ -318,8 +323,9 @@ const NumeralDate = ({
       validationId: validationId,
       "aria-describedby": ariaDescribedBy
     }, (0, _utils.filterStyledSystemMarginProps)(rest)), /*#__PURE__*/_react.default.createElement(_box.default, {
-      display: "block",
-      mt: 1
+      display: "flex",
+      flexDirection: "column",
+      mt: inline ? 0 : 1
     }, renderInputs(), fieldHelp && /*#__PURE__*/_react.default.createElement(_fieldHelp.default, {
       id: fieldHelpId
     }, fieldHelp))));
@@ -330,6 +336,10 @@ const NumeralDate = ({
     "data-role": dataRole,
     id: uniqueId,
     legend: label,
+    legendMargin: {
+      mb: 0
+    },
+    legendAlign: labelAlign,
     isRequired: required,
     isOptional: isOptional,
     isDisabled: disabled,
@@ -339,7 +349,7 @@ const NumeralDate = ({
     id: inputHintId.current
   }, labelHelp), /*#__PURE__*/_react.default.createElement(_box.default, {
     position: "relative",
-    mt: 1
+    mt: labelHelp ? 0 : 1
   }, (internalError || internalWarning) && /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(_validationMessage.default, {
     error: internalError,
     warning: internalWarning,

package/lib/components/numeral-date/numeral-date.style.d.ts

@@ -1,4 +1,5 @@
 /// <reference types="react" />
+import { FieldsetProps } from "../../__internal__/fieldset";
 interface StyledDateFieldProps {
     isYearInput?: boolean;
     hasValidationIconInField: boolean;
@@ -8,5 +9,9 @@ export declare const StyledNumeralDate: import("styled-components").StyledCompon
     name?: string | undefined;
 }, never>;
 export declare const StyledDateField: import("styled-components").StyledComponent<"div", any, StyledDateFieldProps, never>;
-export declare const StyledFieldset: import("styled-components").StyledComponent<({ legend, children, inline, legendWidth, legendAlign, legendSpacing, error, warning, info, isRequired, blockGroupBehaviour, legendMargin, isDisabled, isOptional, labelHelp, validationId, ...rest }: import("../../__internal__/fieldset").FieldsetProps) => import("react").JSX.Element, any, {}, never>;
+interface StyledFieldsetProps extends FieldsetProps {
+    inline?: boolean;
+    size?: "small" | "medium" | "large";
+}
+export declare const StyledFieldset: import("styled-components").StyledComponent<({ legend, children, inline, legendWidth, legendAlign, legendSpacing, error, warning, info, isRequired, blockGroupBehaviour, legendMargin, isDisabled, isOptional, labelHelp, validationId, ...rest }: FieldsetProps) => import("react").JSX.Element, any, StyledFieldsetProps, never>;
 export {};

package/lib/components/numeral-date/numeral-date.style.js

@@ -55,17 +55,26 @@ const StyledDateField = exports.StyledDateField = _styledComponents.default.div`
     }
   `}
 `;
+// We need to match height of the legend to the input container when it is inline to center it vertically,
+// as Safari does not support display: flex on fieldset elements.
+const sizeHeight = {
+  small: "57px",
+  medium: "65px",
+  large: "73px"
+};
 const StyledFieldset = exports.StyledFieldset = (0, _styledComponents.default)(_fieldset.default)`
   ${({
-  inline
+  inline,
+  size
 }) => (0, _styledComponents.css)`
     ${inline && (0, _styledComponents.css)`
-      display: flex;
-      align-items: center;
+      ${_fieldset2.StyledLegend} {
+        height: ${size && sizeHeight[size]};
+      }
     `}
-  `}
 
-  ${_fieldset2.StyledLegend} {
-    margin-bottom: 0;
-  }
+    ${!inline && (0, _styledComponents.css)`
+      width: min-content;
+    `}
+  `}
 `;

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

@@ -0,0 +1,2 @@
+declare const getColoursForPortrait: (backgroundColour: string | undefined, darkBackground?: boolean, largeText?: boolean, strict?: boolean, foregroundColor?: string | undefined) => string;
+export default getColoursForPortrait;

package/lib/components/portrait/__internal__/utils.js

@@ -0,0 +1,81 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+const getContrastRatio = (luminance1, luminance2) => {
+  const [L1, L2] = luminance1 > luminance2 ? [luminance1, luminance2] : [luminance2, luminance1];
+  return (L1 + 0.05) / (L2 + 0.05);
+};
+const calculateLuminance = hexColor => {
+  const hex = hexColor.replace("#", "");
+  const r = parseInt(hex.slice(0, 2), 16);
+  const g = parseInt(hex.slice(2, 4), 16);
+  const b = parseInt(hex.slice(4, 6), 16);
+  const normalize = value => {
+    const v = value / 255;
+    return v <= 0.03928 ? v / 12.92 : ((v + 0.055) / 1.055) ** 2.4;
+  };
+  const normalizedR = normalize(r);
+  const normalizedG = normalize(g);
+  const normalizedB = normalize(b);
+  const luminance = 0.2126 * normalizedR + 0.7152 * normalizedG + 0.0722 * normalizedB;
+  return luminance;
+};
+function getAccessibleForegroundColor(backgroundColor, largeText, strict) {
+  const bgLuminance = calculateLuminance(backgroundColor);
+  const whiteLuminance = calculateLuminance("#FFFFFF");
+  const blackLuminance = calculateLuminance("#000000");
+  const whiteContrast = getContrastRatio(bgLuminance, whiteLuminance);
+  const blackContrast = getContrastRatio(bgLuminance, blackLuminance);
+  const strictThreshold = largeText ? 4.5 : 7.0;
+  const nonStrictThreshold = largeText ? 3.0 : 4.5;
+  const minContrast = strict ? strictThreshold : nonStrictThreshold;
+
+  /* istanbul ignore else */
+  if (whiteContrast >= minContrast && whiteContrast > blackContrast) {
+    return "#FFFFFF";
+  }
+
+  /* istanbul ignore else */
+  if (blackContrast >= minContrast) {
+    return "var(--colorsUtilityYin090)";
+  }
+
+  // If no color meets the contrast ratio, return the color with the highest contrast
+  // In theory this is possible only if the background color is a shade of grey, but
+  // this is a fallback mechanism as finding a colour which fails both contrast ratios
+  // is highly unlikely.
+  /* istanbul ignore next */
+  return whiteContrast > blackContrast ? "#FFFFFF" : "var(--colorsUtilityYin090)";
+}
+const getColoursForPortrait = (backgroundColour,
+// Whether the portrait is on a dark background
+darkBackground = false,
+// Whether the text is large
+largeText = false,
+/**
+ * Whether to use strict contrast (i.e., WCAG AAA). If this is false, it uses WCAG AA contrast
+ * ratios (4.5:1 for normal text, 3:1 for large text). If true, it uses 7:1 for normal text and
+ * 4.5:1 for large text.
+ */
+strict = false,
+// The custom foreground colour, if any
+foregroundColor = undefined) => {
+  let fgColor = "var(--colorsUtilityYin090)";
+  let bgColor = "var(--colorsUtilityReadOnly400)";
+  if (darkBackground && !backgroundColour && !foregroundColor) {
+    bgColor = "var(--colorsUtilityYin090)";
+    fgColor = "var(--colorsUtilityReadOnly600)";
+  }
+  if (backgroundColour) {
+    bgColor = backgroundColour;
+    fgColor = getAccessibleForegroundColor(backgroundColour, largeText, strict);
+  }
+  if (foregroundColor) {
+    fgColor = foregroundColor;
+  }
+  return `background-color: ${bgColor}; color: ${fgColor};`;
+};
+var _default = exports.default = getColoursForPortrait;

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

@@ -38,6 +38,10 @@ export interface PortraitProps extends MarginProps {
     tooltipBgColor?: string;
     /** [Legacy] Override font color of the Tooltip, provide any color from palette or any valid css color value. */
     tooltipFontColor?: string;
+    /** The hex code of the background colour */
+    backgroundColor?: string;
+    /** The hex code of the foreground colour. This will only take effect if use in conjunction with `backgroundColor` */
+    foregroundColor?: string;
 }
-declare const Portrait: ({ alt, name, darkBackground, iconType, initials, shape, size, src, onClick, tooltipMessage, tooltipId, tooltipIsVisible, tooltipPosition, tooltipType, tooltipSize, tooltipBgColor, tooltipFontColor, ...rest }: PortraitProps) => React.JSX.Element;
+declare const Portrait: ({ alt, backgroundColor, foregroundColor, name, darkBackground, iconType, initials, shape, size, src, onClick, tooltipMessage, tooltipId, tooltipIsVisible, tooltipPosition, tooltipType, tooltipSize, tooltipBgColor, tooltipFontColor, ...rest }: PortraitProps) => React.JSX.Element;
 export default Portrait;

package/lib/components/portrait/portrait.component.js

@@ -16,6 +16,8 @@ function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e;
 function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
 const Portrait = ({
   alt,
+  backgroundColor,
+  foregroundColor = undefined,
   name,
   darkBackground = false,
   iconType = "individual",
@@ -75,7 +77,9 @@ const Portrait = ({
         hasValidImg: hasValidImg,
         darkBackground: darkBackground,
         size: size,
-        shape: shape
+        shape: shape,
+        backgroundColor: backgroundColor,
+        foregroundColor: foregroundColor
       }), portrait));
     }
     return /*#__PURE__*/_react.default.createElement(_portrait.StyledPortraitContainer, _extends({}, (0, _utils.filterStyledSystemMarginProps)(rest), {
@@ -84,7 +88,9 @@ const Portrait = ({
       hasValidImg: hasValidImg,
       darkBackground: darkBackground,
       size: size,
-      shape: shape
+      shape: shape,
+      backgroundColor: backgroundColor,
+      foregroundColor: foregroundColor
     }), portrait);
   };
   return renderComponent();

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

@@ -2,6 +2,8 @@ import React from "react";
 import { MarginProps } from "styled-system";
 import { PortraitSizes, PortraitShapes } from "./portrait.component";
 declare type StyledPortraitProps = {
+    backgroundColor?: string;
+    foregroundColor?: string;
     darkBackground?: boolean;
     size: PortraitSizes;
     shape?: PortraitShapes;

package/lib/components/portrait/portrait.style.js

@@ -6,10 +6,11 @@ Object.defineProperty(exports, "__esModule", {
 exports.StyledPortraitInitials = exports.StyledPortraitContainer = exports.StyledIcon = exports.StyledCustomImg = void 0;
 var _styledComponents = _interopRequireDefault(require("styled-components"));
 var _styledSystem = require("styled-system");
-var _base = _interopRequireDefault(require("../../style/themes/base"));
 var _icon = _interopRequireDefault(require("../icon"));
-var _portrait = require("./portrait.config");
 var _profile = _interopRequireDefault(require("../profile/profile.config"));
+var _base = _interopRequireDefault(require("../../style/themes/base"));
+var _portrait = require("./portrait.config");
+var _utils = _interopRequireDefault(require("./__internal__/utils"));
 function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
 const StyledPortraitInitials = exports.StyledPortraitInitials = _styledComponents.default.div`
   font-weight: 500;
@@ -44,12 +45,12 @@ const StyledIcon = exports.StyledIcon = (0, _styledComponents.default)(_icon.def
   }
 `;
 const StyledPortraitContainer = exports.StyledPortraitContainer = _styledComponents.default.div`
-  color: ${({
-  darkBackground
-}) => darkBackground ? "var(--colorsUtilityReadOnly600)" : "var(--colorsUtilityYin090)"};
-  background-color: ${({
-  darkBackground
-}) => darkBackground ? "var(--colorsUtilityYin090)" : "var(--colorsUtilityReadOnly400)"};
+  ${({
+  darkBackground,
+  backgroundColor,
+  size,
+  foregroundColor
+}) => (0, _utils.default)(backgroundColor, darkBackground, !["XS", "S"].includes(size), true, foregroundColor)};
   ${({
   hasValidImg,
   size

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

@@ -24,6 +24,10 @@ export interface ProfileProps extends MarginProps {
     size?: ProfileSize;
     /** Use a dark background. */
     darkBackground?: boolean;
+    /** The hex code of the background colour to be passed to the avatar */
+    backgroundColor?: string;
+    /** The hex code of the foreground colour to be passed to the avatar. Must be used in conjunction with `backgroundColor` */
+    foregroundColor?: string;
 }
-export declare const Profile: ({ src, alt, className, initials, name, size, email, text, darkBackground, ...props }: ProfileProps) => React.JSX.Element;
+export declare const Profile: ({ src, alt, className, initials, name, size, email, text, darkBackground, backgroundColor, foregroundColor, ...props }: ProfileProps) => React.JSX.Element;
 export default Profile;

package/lib/components/profile/profile.component.js

@@ -28,6 +28,8 @@ const Profile = ({
   email,
   text,
   darkBackground,
+  backgroundColor,
+  foregroundColor,
   ...props
 }) => {
   const getInitials = () => {
@@ -39,7 +41,10 @@ const Profile = ({
     alt,
     name,
     initials: getInitials(),
-    size
+    size,
+    backgroundColor,
+    foregroundColor,
+    "data-role": "profile-portrait"
   };
   const avatar = () => {
     if (src) {

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

@@ -10,5 +10,5 @@ declare const ProfileEmailStyle: import("styled-components").StyledComponent<imp
 declare const ProfileTextStyle: import("styled-components").StyledComponent<"span", any, ProfileSProps, never>;
 declare const ProfileStyle: import("styled-components").StyledComponent<"div", any, Pick<ProfileSProps, "darkBackground" | "hasSrc">, never>;
 declare const ProfileDetailsStyle: import("styled-components").StyledComponent<"div", any, Pick<ProfileSProps, "size" | "hasSrc">, never>;
-declare const ProfileAvatarStyle: import("styled-components").StyledComponent<({ alt, name, darkBackground, iconType, initials, shape, size, src, onClick, tooltipMessage, tooltipId, tooltipIsVisible, tooltipPosition, tooltipType, tooltipSize, tooltipBgColor, tooltipFontColor, ...rest }: import("../portrait").PortraitProps) => import("react").JSX.Element, any, {}, never>;
+declare const ProfileAvatarStyle: import("styled-components").StyledComponent<({ alt, backgroundColor, foregroundColor, name, darkBackground, iconType, initials, shape, size, src, onClick, tooltipMessage, tooltipId, tooltipIsVisible, tooltipPosition, tooltipType, tooltipSize, tooltipBgColor, tooltipFontColor, ...rest }: import("../portrait").PortraitProps) => import("react").JSX.Element, any, {}, never>;
 export { ProfileStyle, ProfileNameStyle, ProfileDetailsStyle, ProfileAvatarStyle, ProfileEmailStyle, ProfileTextStyle, };

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

@@ -38,7 +38,7 @@ const RadioButtonGroup = props => {
     inline = false,
     legendInline = false,
     legendWidth,
-    legendAlign,
+    legendAlign = "left",
     legendSpacing,
     labelSpacing = 1,
     adaptiveLegendBreakpoint,

package/lib/components/switch/switch.component.js

@@ -203,8 +203,6 @@ const Switch = exports.Switch = /*#__PURE__*/_react.default.forwardRef(({
     width: labelInline ? "100%" : "auto"
   }, /*#__PURE__*/_react.default.createElement(_box.default, {
     "data-role": "label-wrapper"
-    // width={labelInline ? rest.labelWidth : 30}
-    // minWidth={label && labelInline ? "32px" : 0}
   }, /*#__PURE__*/_react.default.createElement(_label.default, {
     isDarkBackground: isDarkBackground,
     labelId: labelId.current,

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

@@ -28,6 +28,10 @@ interface TimeInputProps extends Omit<TagProps, "data-component">, Omit<Validati
 export interface TimeProps extends Omit<TagProps, "data-component">, MarginProps {
     /** Label text for the component */
     label?: string;
+    /** Label alignment */
+    labelAlign?: "left" | "right";
+    /** Field labels alignment */
+    fieldLabelsAlign?: "left" | "right";
     /** Sets the size of the inputs */
     size?: Sizes;
     /** Additional hint text rendered above the input elements */

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

@@ -24,6 +24,8 @@ function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e;
 function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
 const Time = /*#__PURE__*/_react.default.forwardRef(({
   label,
+  labelAlign,
+  fieldLabelsAlign,
   size = "medium",
   inputHint,
   hoursInputProps = {},
@@ -150,7 +152,8 @@ const Time = /*#__PURE__*/_react.default.forwardRef(({
     legendMargin: {
       mb: 0
     },
-    width: "fit-content",
+    width: "min-content",
+    legendAlign: labelAlign,
     isRequired: required,
     isOptional: isOptional,
     isDisabled: disabled,
@@ -162,7 +165,8 @@ const Time = /*#__PURE__*/_react.default.forwardRef(({
     id: inputHintId.current,
     isDisabled: disabled
   }, inputHint), /*#__PURE__*/_react.default.createElement(_box.default, {
-    position: "relative"
+    position: "relative",
+    mt: inputHint ? 0 : 1
   }, /*#__PURE__*/_react.default.createElement(_validationMessage.default, {
     validationId: validationId,
     error: error,
@@ -174,7 +178,8 @@ const Time = /*#__PURE__*/_react.default.forwardRef(({
   }, /*#__PURE__*/_react.default.createElement("div", null, /*#__PURE__*/_react.default.createElement(_time.StyledLabel, {
     "aria-label": hrsAriaLabel,
     htmlFor: internalHrsId.current,
-    disabled: disabled
+    disabled: disabled,
+    align: fieldLabelsAlign
   }, hrsLabel), /*#__PURE__*/_react.default.createElement(_number.default, _extends({}, hoursInputProps, {
     label: undefined,
     "data-component": "hours",
@@ -201,7 +206,8 @@ const Time = /*#__PURE__*/_react.default.forwardRef(({
   }, ":")), /*#__PURE__*/_react.default.createElement("div", null, /*#__PURE__*/_react.default.createElement(_time.StyledLabel, {
     "aria-label": minsAriaLabel,
     htmlFor: internalMinsId.current,
-    disabled: disabled
+    disabled: disabled,
+    align: fieldLabelsAlign
   }, minsLabel), /*#__PURE__*/_react.default.createElement(_number.default, _extends({}, minutesInputProps, {
     label: undefined,
     "data-component": "minutes",
@@ -218,7 +224,8 @@ const Time = /*#__PURE__*/_react.default.forwardRef(({
   }))), showToggle && /*#__PURE__*/_react.default.createElement(_box.default, {
     display: "flex",
     flexDirection: "column",
-    justifyContent: "flex-end"
+    justifyContent: "flex-end",
+    width: "max-content"
   }, /*#__PURE__*/_react.default.createElement(_timeToggle.TimeToggle, {
     toggleProps: toggleProps,
     size: size,
@@ -233,6 +240,7 @@ if (process.env.NODE_ENV !== "production") {
     "data-element": _propTypes.default.string,
     "data-role": _propTypes.default.string,
     "disabled": _propTypes.default.bool,
+    "fieldLabelsAlign": _propTypes.default.oneOf(["left", "right"]),
     "hoursInputProps": _propTypes.default.shape({
       "aria-label": _propTypes.default.string,
       "data-element": _propTypes.default.string,
@@ -245,6 +253,7 @@ if (process.env.NODE_ENV !== "production") {
     "inputHint": _propTypes.default.string,
     "isOptional": _propTypes.default.bool,
     "label": _propTypes.default.string,
+    "labelAlign": _propTypes.default.oneOf(["left", "right"]),
     "m": _propTypes.default.oneOfType([_propTypes.default.arrayOf(_propTypes.default.oneOfType([_propTypes.default.oneOf([null]), _propTypes.default.number, _propTypes.default.shape({
       "__@toStringTag": _propTypes.default.string.isRequired,
       "description": _propTypes.default.string,

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

@@ -18,7 +18,7 @@ const StyledHintText = exports.StyledHintText = _styledComponents.default.div`
   }
 
   margin-top: var(--spacing000);
-  margin-bottom: var(--spacing150);
+  margin-bottom: var(--spacing100);
   color: ${({
   isDisabled
 }) => isDisabled ? "var(--colorsUtilityYin030)" : "var(--colorsUtilityYin055)"};

package/package.json

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