carbon-react 125.13.0 → 126.0.1

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

@@ -43,8 +43,6 @@ export interface CheckableInputProps extends CommonCheckableInputProps {
     type: string;
     /** Value passed to the input */
     value?: string;
-    /** Text alignment of the label */
-    labelAlign?: "left" | "right";
     /** When true label is inline */
     labelInline?: boolean;
 }

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

@@ -23,7 +23,6 @@ const CheckableInput = /*#__PURE__*/React.forwardRef(({
   value,
   inputWidth,
   label,
-  labelAlign,
   labelHelp,
   labelInline = true,
   labelSpacing = 1,
@@ -65,7 +64,6 @@ const CheckableInput = /*#__PURE__*/React.forwardRef(({
     id,
     info,
     label,
-    labelAlign,
     labelHelp,
     labelHelpIcon: "info",
     labelId,
@@ -210,7 +208,6 @@ CheckableInput.propTypes = {
   "itemScope": PropTypes.bool,
   "itemType": PropTypes.string,
   "label": PropTypes.node,
-  "labelAlign": PropTypes.oneOf(["left", "right"]),
   "labelHelp": PropTypes.node,
   "labelInline": PropTypes.bool,
   "labelSpacing": PropTypes.oneOf([1, 2]),

package/esm/components/button-toggle/button-toggle-group/button-toggle-group.component.d.ts

@@ -34,8 +34,6 @@ export interface ButtonToggleGroupProps extends MarginProps, TagProps {
     labelWidth?: number;
     /** If true all ButtonToggle children will flex to the full width of the ButtonToggleGroup parent */
     fullWidth?: boolean;
-    /** The alignment for the text in the label. */
-    labelAlign?: "left" | "right";
     /** Callback triggered by pressing one of the child buttons. Use with controlled components to set the value prop to the value argument */
     onChange?: (ev: React.MouseEvent<HTMLButtonElement>, value?: string, name?: string) => void;
     /** Determines which child button is selected when the component is used as a controlled component */
@@ -63,7 +61,7 @@ declare type ButtonToggleGroupContextType = {
 };
 export declare const ButtonToggleGroupContext: React.Context<ButtonToggleGroupContextType>;
 declare const ButtonToggleGroup: {
-    ({ children, fieldHelp, fieldHelpInline, "aria-label": ariaLabel, label, labelHelp, labelSpacing, inputWidth, fullWidth, labelInline, labelWidth, labelAlign, name, onChange, value, "data-component": dataComponent, "data-element": dataElement, "data-role": dataRole, helpAriaLabel, id, allowDeselect, className, ...props }: ButtonToggleGroupProps): React.JSX.Element;
+    ({ children, fieldHelp, fieldHelpInline, "aria-label": ariaLabel, label, labelHelp, labelSpacing, inputWidth, fullWidth, labelInline, labelWidth, name, onChange, value, "data-component": dataComponent, "data-element": dataElement, "data-role": dataRole, helpAriaLabel, id, allowDeselect, className, ...props }: ButtonToggleGroupProps): React.JSX.Element;
     displayName: string;
 };
 export default ButtonToggleGroup;

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

@@ -32,7 +32,6 @@ const ButtonToggleGroup = ({
   fullWidth,
   labelInline,
   labelWidth,
-  labelAlign,
   name,
   onChange,
   value,
@@ -119,7 +118,6 @@ const ButtonToggleGroup = ({
     fieldHelpInline: fieldHelpInline,
     labelInline: labelInline,
     labelWidth: labelWidth,
-    labelAlign: labelAlign,
     labelId: labelId.current,
     "data-component": dataComponent,
     "data-role": dataRole,

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

@@ -14,8 +14,6 @@ export interface CheckboxProps extends CommonCheckableInputProps, MarginProps {
     "data-role"?: string;
     /** Aria label for rendered help component */
     helpAriaLabel?: string;
-    /** Text alignment of the label */
-    labelAlign?: "left" | "right";
     /** When true label is inline */
     labelInline?: boolean;
     /** Accepts a callback function which is triggered on click event */

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

@@ -230,7 +230,6 @@ Checkbox.propTypes = {
   "itemScope": PropTypes.bool,
   "itemType": PropTypes.string,
   "label": PropTypes.node,
-  "labelAlign": PropTypes.oneOf(["left", "right"]),
   "labelHelp": PropTypes.node,
   "labelInline": PropTypes.bool,
   "labelSpacing": PropTypes.oneOf([1, 2]),

package/esm/components/message/message-content/message-content.component.d.ts

@@ -6,6 +6,8 @@ export interface MessageContentProps {
     children?: React.ReactNode;
     /** determines if the close icon is shown */
     showCloseIcon?: boolean;
+    /** @ignore @private used to reduce the left-padding for the transparent variant */
+    reduceLeftPadding?: boolean;
 }
-declare const MessageContent: ({ title, children, showCloseIcon, }: MessageContentProps) => React.JSX.Element;
+declare const MessageContent: ({ title, children, showCloseIcon, reduceLeftPadding, }: MessageContentProps) => React.JSX.Element;
 export default MessageContent;

package/esm/components/message/message-content/message-content.component.js

@@ -5,10 +5,12 @@ import MessageContentStyle from "./message-content.style";
 const MessageContent = ({
   title,
   children,
-  showCloseIcon
+  showCloseIcon,
+  reduceLeftPadding = false
 }) => {
   return /*#__PURE__*/React.createElement(MessageContentStyle, {
     showCloseIcon: showCloseIcon,
+    reduceLeftPadding: reduceLeftPadding,
     "data-element": "message-content"
   }, /*#__PURE__*/React.createElement(Content, {
     title: title

package/esm/components/message/message-content/message-content.style.d.ts

@@ -1,3 +1,3 @@
 import { MessageContentProps } from "./message-content.component";
-declare const MessageContentStyle: import("styled-components").StyledComponent<"div", any, Pick<MessageContentProps, "showCloseIcon">, never>;
+declare const MessageContentStyle: import("styled-components").StyledComponent<"div", any, Pick<MessageContentProps, "showCloseIcon" | "reduceLeftPadding">, never>;
 export default MessageContentStyle;

package/esm/components/message/message-content/message-content.style.js

@@ -3,7 +3,9 @@ const MessageContentStyle = styled.div`
   padding: 15px ${({
   showCloseIcon
 }) => showCloseIcon ? "50px" : "20px"} 15px
-    20px;
+    ${({
+  reduceLeftPadding
+}) => reduceLeftPadding ? "10px" : "20px"};
   white-space: pre-wrap;
   flex: 1;
 `;

package/esm/components/message/message.component.js

@@ -49,7 +49,8 @@ const Message = /*#__PURE__*/React.forwardRef(({
     transparent: transparent
   }), /*#__PURE__*/React.createElement(MessageContent, {
     showCloseIcon: showCloseIcon,
-    title: title
+    title: title,
+    reduceLeftPadding: transparent
   }, children), renderCloseIcon()) : null;
 });
 Message.propTypes = {

package/esm/components/radio-button/radio-button.component.d.ts

@@ -12,8 +12,6 @@ export interface RadioButtonProps extends CommonCheckableInputProps, MarginProps
     "data-element"?: string;
     /** Identifier used for testing purposes, applied to the root element of the component. */
     "data-role"?: string;
-    /** Text alignment of the label */
-    labelAlign?: "left" | "right";
     /** Accepts a callback function which is triggered on click event */
     onClick?: (ev: React.MouseEvent<HTMLInputElement>) => void;
     /** the value of the Radio Button, passed on form submit */

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

@@ -21,7 +21,6 @@ const RadioButton = /*#__PURE__*/React.forwardRef(({
   inputWidth,
   label,
   labelHelp,
-  labelAlign,
   labelSpacing = 1,
   labelWidth,
   name,
@@ -85,7 +84,6 @@ const RadioButton = /*#__PURE__*/React.forwardRef(({
     onChange: handleChange,
     onBlur,
     onFocus,
-    labelAlign,
     labelInline: true,
     labelWidth,
     label,
@@ -232,7 +230,6 @@ RadioButton.propTypes = {
   "itemScope": PropTypes.bool,
   "itemType": PropTypes.string,
   "label": PropTypes.node,
-  "labelAlign": PropTypes.oneOf(["left", "right"]),
   "labelHelp": PropTypes.node,
   "labelSpacing": PropTypes.oneOf([1, 2]),
   "labelWidth": PropTypes.number,

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

@@ -12,8 +12,6 @@ export interface SwitchProps extends CommonCheckableInputProps, MarginProps {
     adaptiveLabelBreakpoint?: number;
     /** Set the default value of the Switch if component is meant to be used as uncontrolled */
     defaultChecked?: boolean;
-    /** Text alignment of the label */
-    labelAlign?: "left" | "right";
     /** When true label is inline */
     labelInline?: boolean;
     /** Triggers loading animation */

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

@@ -280,7 +280,6 @@ Switch.propTypes = {
   "itemScope": PropTypes.bool,
   "itemType": PropTypes.string,
   "label": PropTypes.node,
-  "labelAlign": PropTypes.oneOf(["left", "right"]),
   "labelHelp": PropTypes.node,
   "labelInline": PropTypes.bool,
   "labelSpacing": PropTypes.oneOf([1, 2]),

package/esm/components/time/__internal__/time-toggle/time-toggle.style.d.ts

@@ -1,6 +1,6 @@
 /// <reference types="react" />
 declare const _default: import("styled-components").StyledComponent<{
-    ({ children, fieldHelp, fieldHelpInline, "aria-label": ariaLabel, label, labelHelp, labelSpacing, inputWidth, fullWidth, labelInline, labelWidth, labelAlign, name, onChange, value, "data-component": dataComponent, "data-element": dataElement, "data-role": dataRole, helpAriaLabel, id, allowDeselect, className, ...props }: import("../../../button-toggle").ButtonToggleGroupProps): import("react").JSX.Element;
+    ({ children, fieldHelp, fieldHelpInline, "aria-label": ariaLabel, label, labelHelp, labelSpacing, inputWidth, fullWidth, labelInline, labelWidth, name, onChange, value, "data-component": dataComponent, "data-element": dataElement, "data-role": dataRole, helpAriaLabel, id, allowDeselect, className, ...props }: import("../../../button-toggle").ButtonToggleGroupProps): import("react").JSX.Element;
     displayName: string;
 }, any, {
     disabled?: boolean | undefined;

package/lib/__internal__/checkable-input/checkable-input.component.d.ts

@@ -43,8 +43,6 @@ export interface CheckableInputProps extends CommonCheckableInputProps {
     type: string;
     /** Value passed to the input */
     value?: string;
-    /** Text alignment of the label */
-    labelAlign?: "left" | "right";
     /** When true label is inline */
     labelInline?: boolean;
 }

package/lib/__internal__/checkable-input/checkable-input.component.js

@@ -32,7 +32,6 @@ const CheckableInput = /*#__PURE__*/_react.default.forwardRef(({
   value,
   inputWidth,
   label,
-  labelAlign,
   labelHelp,
   labelInline = true,
   labelSpacing = 1,
@@ -74,7 +73,6 @@ const CheckableInput = /*#__PURE__*/_react.default.forwardRef(({
     id,
     info,
     label,
-    labelAlign,
     labelHelp,
     labelHelpIcon: "info",
     labelId,
@@ -219,7 +217,6 @@ CheckableInput.propTypes = {
   "itemScope": _propTypes.default.bool,
   "itemType": _propTypes.default.string,
   "label": _propTypes.default.node,
-  "labelAlign": _propTypes.default.oneOf(["left", "right"]),
   "labelHelp": _propTypes.default.node,
   "labelInline": _propTypes.default.bool,
   "labelSpacing": _propTypes.default.oneOf([1, 2]),

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

@@ -34,8 +34,6 @@ export interface ButtonToggleGroupProps extends MarginProps, TagProps {
     labelWidth?: number;
     /** If true all ButtonToggle children will flex to the full width of the ButtonToggleGroup parent */
     fullWidth?: boolean;
-    /** The alignment for the text in the label. */
-    labelAlign?: "left" | "right";
     /** Callback triggered by pressing one of the child buttons. Use with controlled components to set the value prop to the value argument */
     onChange?: (ev: React.MouseEvent<HTMLButtonElement>, value?: string, name?: string) => void;
     /** Determines which child button is selected when the component is used as a controlled component */
@@ -63,7 +61,7 @@ declare type ButtonToggleGroupContextType = {
 };
 export declare const ButtonToggleGroupContext: React.Context<ButtonToggleGroupContextType>;
 declare const ButtonToggleGroup: {
-    ({ children, fieldHelp, fieldHelpInline, "aria-label": ariaLabel, label, labelHelp, labelSpacing, inputWidth, fullWidth, labelInline, labelWidth, labelAlign, name, onChange, value, "data-component": dataComponent, "data-element": dataElement, "data-role": dataRole, helpAriaLabel, id, allowDeselect, className, ...props }: ButtonToggleGroupProps): React.JSX.Element;
+    ({ children, fieldHelp, fieldHelpInline, "aria-label": ariaLabel, label, labelHelp, labelSpacing, inputWidth, fullWidth, labelInline, labelWidth, name, onChange, value, "data-component": dataComponent, "data-element": dataElement, "data-role": dataRole, helpAriaLabel, id, allowDeselect, className, ...props }: ButtonToggleGroupProps): React.JSX.Element;
     displayName: string;
 };
 export default ButtonToggleGroup;

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

@@ -41,7 +41,6 @@ const ButtonToggleGroup = ({
   fullWidth,
   labelInline,
   labelWidth,
-  labelAlign,
   name,
   onChange,
   value,
@@ -128,7 +127,6 @@ const ButtonToggleGroup = ({
     fieldHelpInline: fieldHelpInline,
     labelInline: labelInline,
     labelWidth: labelWidth,
-    labelAlign: labelAlign,
     labelId: labelId.current,
     "data-component": dataComponent,
     "data-role": dataRole,

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

@@ -14,8 +14,6 @@ export interface CheckboxProps extends CommonCheckableInputProps, MarginProps {
     "data-role"?: string;
     /** Aria label for rendered help component */
     helpAriaLabel?: string;
-    /** Text alignment of the label */
-    labelAlign?: "left" | "right";
     /** When true label is inline */
     labelInline?: boolean;
     /** Accepts a callback function which is triggered on click event */

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

@@ -239,7 +239,6 @@ Checkbox.propTypes = {
   "itemScope": _propTypes.default.bool,
   "itemType": _propTypes.default.string,
   "label": _propTypes.default.node,
-  "labelAlign": _propTypes.default.oneOf(["left", "right"]),
   "labelHelp": _propTypes.default.node,
   "labelInline": _propTypes.default.bool,
   "labelSpacing": _propTypes.default.oneOf([1, 2]),

package/lib/components/message/message-content/message-content.component.d.ts

@@ -6,6 +6,8 @@ export interface MessageContentProps {
     children?: React.ReactNode;
     /** determines if the close icon is shown */
     showCloseIcon?: boolean;
+    /** @ignore @private used to reduce the left-padding for the transparent variant */
+    reduceLeftPadding?: boolean;
 }
-declare const MessageContent: ({ title, children, showCloseIcon, }: MessageContentProps) => React.JSX.Element;
+declare const MessageContent: ({ title, children, showCloseIcon, reduceLeftPadding, }: MessageContentProps) => React.JSX.Element;
 export default MessageContent;

package/lib/components/message/message-content/message-content.component.js

@@ -12,10 +12,12 @@ function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { de
 const MessageContent = ({
   title,
   children,
-  showCloseIcon
+  showCloseIcon,
+  reduceLeftPadding = false
 }) => {
   return /*#__PURE__*/_react.default.createElement(_messageContent.default, {
     showCloseIcon: showCloseIcon,
+    reduceLeftPadding: reduceLeftPadding,
     "data-element": "message-content"
   }, /*#__PURE__*/_react.default.createElement(_content.default, {
     title: title

package/lib/components/message/message-content/message-content.style.d.ts

@@ -1,3 +1,3 @@
 import { MessageContentProps } from "./message-content.component";
-declare const MessageContentStyle: import("styled-components").StyledComponent<"div", any, Pick<MessageContentProps, "showCloseIcon">, never>;
+declare const MessageContentStyle: import("styled-components").StyledComponent<"div", any, Pick<MessageContentProps, "showCloseIcon" | "reduceLeftPadding">, never>;
 export default MessageContentStyle;

package/lib/components/message/message-content/message-content.style.js

@@ -10,7 +10,9 @@ const MessageContentStyle = _styledComponents.default.div`
   padding: 15px ${({
   showCloseIcon
 }) => showCloseIcon ? "50px" : "20px"} 15px
-    20px;
+    ${({
+  reduceLeftPadding
+}) => reduceLeftPadding ? "10px" : "20px"};
   white-space: pre-wrap;
   flex: 1;
 `;

package/lib/components/message/message.component.js

@@ -58,7 +58,8 @@ const Message = exports.Message = /*#__PURE__*/_react.default.forwardRef(({
     transparent: transparent
   }), /*#__PURE__*/_react.default.createElement(_messageContent.default, {
     showCloseIcon: showCloseIcon,
-    title: title
+    title: title,
+    reduceLeftPadding: transparent
   }, children), renderCloseIcon()) : null;
 });
 Message.propTypes = {

package/lib/components/radio-button/radio-button.component.d.ts

@@ -12,8 +12,6 @@ export interface RadioButtonProps extends CommonCheckableInputProps, MarginProps
     "data-element"?: string;
     /** Identifier used for testing purposes, applied to the root element of the component. */
     "data-role"?: string;
-    /** Text alignment of the label */
-    labelAlign?: "left" | "right";
     /** Accepts a callback function which is triggered on click event */
     onClick?: (ev: React.MouseEvent<HTMLInputElement>) => void;
     /** the value of the Radio Button, passed on form submit */

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

@@ -30,7 +30,6 @@ const RadioButton = exports.RadioButton = /*#__PURE__*/_react.default.forwardRef
   inputWidth,
   label,
   labelHelp,
-  labelAlign,
   labelSpacing = 1,
   labelWidth,
   name,
@@ -94,7 +93,6 @@ const RadioButton = exports.RadioButton = /*#__PURE__*/_react.default.forwardRef
     onChange: handleChange,
     onBlur,
     onFocus,
-    labelAlign,
     labelInline: true,
     labelWidth,
     label,
@@ -241,7 +239,6 @@ RadioButton.propTypes = {
   "itemScope": _propTypes.default.bool,
   "itemType": _propTypes.default.string,
   "label": _propTypes.default.node,
-  "labelAlign": _propTypes.default.oneOf(["left", "right"]),
   "labelHelp": _propTypes.default.node,
   "labelSpacing": _propTypes.default.oneOf([1, 2]),
   "labelWidth": _propTypes.default.number,

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

@@ -12,8 +12,6 @@ export interface SwitchProps extends CommonCheckableInputProps, MarginProps {
     adaptiveLabelBreakpoint?: number;
     /** Set the default value of the Switch if component is meant to be used as uncontrolled */
     defaultChecked?: boolean;
-    /** Text alignment of the label */
-    labelAlign?: "left" | "right";
     /** When true label is inline */
     labelInline?: boolean;
     /** Triggers loading animation */

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

@@ -289,7 +289,6 @@ Switch.propTypes = {
   "itemScope": _propTypes.default.bool,
   "itemType": _propTypes.default.string,
   "label": _propTypes.default.node,
-  "labelAlign": _propTypes.default.oneOf(["left", "right"]),
   "labelHelp": _propTypes.default.node,
   "labelInline": _propTypes.default.bool,
   "labelSpacing": _propTypes.default.oneOf([1, 2]),

package/lib/components/time/__internal__/time-toggle/time-toggle.style.d.ts

@@ -1,6 +1,6 @@
 /// <reference types="react" />
 declare const _default: import("styled-components").StyledComponent<{
-    ({ children, fieldHelp, fieldHelpInline, "aria-label": ariaLabel, label, labelHelp, labelSpacing, inputWidth, fullWidth, labelInline, labelWidth, labelAlign, name, onChange, value, "data-component": dataComponent, "data-element": dataElement, "data-role": dataRole, helpAriaLabel, id, allowDeselect, className, ...props }: import("../../../button-toggle").ButtonToggleGroupProps): import("react").JSX.Element;
+    ({ children, fieldHelp, fieldHelpInline, "aria-label": ariaLabel, label, labelHelp, labelSpacing, inputWidth, fullWidth, labelInline, labelWidth, name, onChange, value, "data-component": dataComponent, "data-element": dataElement, "data-role": dataRole, helpAriaLabel, id, allowDeselect, className, ...props }: import("../../../button-toggle").ButtonToggleGroupProps): import("react").JSX.Element;
     displayName: string;
 }, any, {
     disabled?: boolean | undefined;

package/package.json

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