carbon-react 147.0.0 → 147.1.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/box/box.component.d.ts

@@ -31,7 +31,7 @@ export interface BoxProps extends FlexboxProps, Omit<GridProps, "gridGap" | "gri
     rowGap?: Gap;
     /** Design Token for Box Shadow. Note: please check that the box shadow design token you are using is compatible with the Box component. */
     boxShadow?: BoxShadowsType;
-    /** Design Token for Border Radius. Note: please check that the border radius design token you are using is compatible with the Box component. **This prop will not do anything if you have the roundedCornerOptOut flag set in the CarbonProvider** */
+    /** Design Token for Border Radius. Note: please check that the border radius design token you are using is compatible with the Box component. */
     borderRadius?: BorderRadiusType;
     /**
      * @private

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/dialog/dialog.component.js

@@ -39,6 +39,9 @@ const Dialog = /*#__PURE__*/forwardRef(({
   topModalOverride,
   closeButtonDataProps,
   restoreFocusOnClose = true,
+  "aria-labelledby": ariaLabelledBy,
+  "aria-describedby": ariaDescribedBy,
+  "aria-label": ariaLabel,
   ...rest
 }, ref) => {
   const locale = useLocale();
@@ -86,11 +89,11 @@ const Dialog = /*#__PURE__*/forwardRef(({
   const dialogProps = {
     size,
     dialogHeight,
-    "aria-labelledby": title && typeof title === "string" ? titleId : rest["aria-labelledby"],
-    "aria-describedby": subtitle && typeof subtitle === "string" ? subtitleId : rest["aria-describedby"],
-    "aria-label": rest["aria-label"]
+    "aria-labelledby": title && typeof title === "string" ? titleId : ariaLabelledBy,
+    "aria-describedby": subtitle && typeof subtitle === "string" ? subtitleId : ariaDescribedBy,
+    "aria-label": ariaLabel
   };
-  return /*#__PURE__*/React.createElement(Modal, {
+  return /*#__PURE__*/React.createElement(Modal, _extends({
     open: open,
     onCancel: onCancel,
     disableEscKey: disableEscKey,
@@ -98,7 +101,7 @@ const Dialog = /*#__PURE__*/forwardRef(({
     className: className ? `${className} carbon-dialog` : "carbon-dialog",
     topModalOverride: topModalOverride,
     restoreFocusOnClose: restoreFocusOnClose
-  }, /*#__PURE__*/React.createElement(FocusTrap, {
+  }, rest), /*#__PURE__*/React.createElement(FocusTrap, {
     autoFocus: !disableAutoFocus,
     focusFirstElement: focusFirstElement,
     bespokeTrap: bespokeFocusTrap,

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/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/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/box/box.component.d.ts

@@ -31,7 +31,7 @@ export interface BoxProps extends FlexboxProps, Omit<GridProps, "gridGap" | "gri
     rowGap?: Gap;
     /** Design Token for Box Shadow. Note: please check that the box shadow design token you are using is compatible with the Box component. */
     boxShadow?: BoxShadowsType;
-    /** Design Token for Border Radius. Note: please check that the border radius design token you are using is compatible with the Box component. **This prop will not do anything if you have the roundedCornerOptOut flag set in the CarbonProvider** */
+    /** Design Token for Border Radius. Note: please check that the border radius design token you are using is compatible with the Box component. */
     borderRadius?: BorderRadiusType;
     /**
      * @private

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/dialog/dialog.component.js

@@ -48,6 +48,9 @@ const Dialog = exports.Dialog = /*#__PURE__*/(0, _react.forwardRef)(({
   topModalOverride,
   closeButtonDataProps,
   restoreFocusOnClose = true,
+  "aria-labelledby": ariaLabelledBy,
+  "aria-describedby": ariaDescribedBy,
+  "aria-label": ariaLabel,
   ...rest
 }, ref) => {
   const locale = (0, _useLocale.default)();
@@ -95,11 +98,11 @@ const Dialog = exports.Dialog = /*#__PURE__*/(0, _react.forwardRef)(({
   const dialogProps = {
     size,
     dialogHeight,
-    "aria-labelledby": title && typeof title === "string" ? titleId : rest["aria-labelledby"],
-    "aria-describedby": subtitle && typeof subtitle === "string" ? subtitleId : rest["aria-describedby"],
-    "aria-label": rest["aria-label"]
+    "aria-labelledby": title && typeof title === "string" ? titleId : ariaLabelledBy,
+    "aria-describedby": subtitle && typeof subtitle === "string" ? subtitleId : ariaDescribedBy,
+    "aria-label": ariaLabel
   };
-  return /*#__PURE__*/_react.default.createElement(_modal.default, {
+  return /*#__PURE__*/_react.default.createElement(_modal.default, _extends({
     open: open,
     onCancel: onCancel,
     disableEscKey: disableEscKey,
@@ -107,7 +110,7 @@ const Dialog = exports.Dialog = /*#__PURE__*/(0, _react.forwardRef)(({
     className: className ? `${className} carbon-dialog` : "carbon-dialog",
     topModalOverride: topModalOverride,
     restoreFocusOnClose: restoreFocusOnClose
-  }, /*#__PURE__*/_react.default.createElement(_focusTrap.default, {
+  }, rest), /*#__PURE__*/_react.default.createElement(_focusTrap.default, {
     autoFocus: !disableAutoFocus,
     focusFirstElement: focusFirstElement,
     bespokeTrap: bespokeFocusTrap,

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/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/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.0",
+  "version": "147.1.0",
   "description": "A library of reusable React components for easily building user interfaces.",
   "files": [
     "lib",