carbon-react 134.1.2 → 135.0.0

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

@@ -12,7 +12,7 @@ declare type StyledHeadingTitleProps = {
     withMargin?: boolean;
 };
 declare const StyledHeadingTitle: import("styled-components").StyledComponent<{
-    ({ "data-component": dataComponent, variant, as, id, fontSize, fontWeight, textTransform, lineHeight, textDecoration, display, listStyleType, whiteSpace, wordWrap, textAlign, textOverflow, truncate, color, backgroundColor, bg, opacity, children, className, screenReaderOnly, isDisabled, "aria-hidden": ariaHidden, ...rest }: import("../typography").TypographyProps): import("react").JSX.Element;
+    ({ "data-component": dataComponent, variant, as, id, fontSize, fontWeight, textTransform, lineHeight, textDecoration, display, listStyleType, whiteSpace, wordBreak, wordWrap, textAlign, textOverflow, truncate, color, backgroundColor, bg, opacity, children, className, screenReaderOnly, isDisabled, "aria-hidden": ariaHidden, ...rest }: import("../typography").TypographyProps): import("react").JSX.Element;
     displayName: string;
 }, any, StyledHeadingTitleProps, never>;
 declare const StyledHeadingPills: import("styled-components").StyledComponent<"span", any, {}, never>;

package/esm/components/loader-spinner/loader-spinner.style.d.ts

@@ -2,7 +2,7 @@
 import { LoaderSpinnerProps } from "./loader-spinner.component";
 export declare const StyledSpinnerWrapper: import("styled-components").StyledComponent<"div", any, Pick<LoaderSpinnerProps, "size">, never>;
 export declare const StyledLabel: import("styled-components").StyledComponent<{
-    ({ "data-component": dataComponent, variant, as, id, fontSize, fontWeight, textTransform, lineHeight, textDecoration, display, listStyleType, whiteSpace, wordWrap, textAlign, textOverflow, truncate, color, backgroundColor, bg, opacity, children, className, screenReaderOnly, isDisabled, "aria-hidden": ariaHidden, ...rest }: import("../typography").TypographyProps): import("react").JSX.Element;
+    ({ "data-component": dataComponent, variant, as, id, fontSize, fontWeight, textTransform, lineHeight, textDecoration, display, listStyleType, whiteSpace, wordBreak, wordWrap, textAlign, textOverflow, truncate, color, backgroundColor, bg, opacity, children, className, screenReaderOnly, isDisabled, "aria-hidden": ariaHidden, ...rest }: import("../typography").TypographyProps): import("react").JSX.Element;
     displayName: string;
 }, any, Required<Pick<LoaderSpinnerProps, "size">>, never>;
 interface StyledSpinnerCircleSvgProps extends Omit<LoaderSpinnerProps, "showSpinnerLabel"> {

package/esm/components/portal/portal.js

@@ -60,6 +60,7 @@ export const Portal = ({
       node = document.createElement("div");
       node.classList.add(portalClassName);
       node.setAttribute("data-portal-exit", uniqueId);
+      node.setAttribute("data-role", "carbon-portal-exit");
       if (id !== undefined) {
         node.setAttribute("id", id);
       }

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

@@ -26,8 +26,6 @@ export interface ToastProps {
     closeButtonDataProps?: Pick<TagProps, "data-role" | "data-element">;
     /** Time for Toast to remain on screen */
     timeout?: string | number;
-    /** Centers the Toast on the screen */
-    isCenter?: boolean;
     /** Target Portal ID where the Toast will render */
     targetPortalId?: string;
     /** Maximum toast width */

package/esm/components/toast/toast.component.js

@@ -9,15 +9,12 @@ import IconButton from "../icon-button";
 import Events from "../../__internal__/utils/helpers/events";
 import useLocale from "../../hooks/__internal__/useLocale";
 import useModalManager from "../../hooks/__internal__/useModalManager";
-import Logger from "../../__internal__/utils/logger";
-let isDeprecationWarningTriggered = false;
 const Toast = /*#__PURE__*/React.forwardRef(({
-  align,
+  align = "center",
   alignY,
   children,
   className,
   id,
-  isCenter = true,
   maxWidth,
   onDismiss,
   open = true,
@@ -41,10 +38,6 @@ const Toast = /*#__PURE__*/React.forwardRef(({
   if (ref && typeof ref === "object" && "current" in ref) {
     refToPass = ref;
   }
-  if (isCenter !== undefined && !isDeprecationWarningTriggered) {
-    isDeprecationWarningTriggered = true;
-    Logger.deprecate(`isCenter prop in ${Toast.displayName} is being deprecated in favour of the align prop.`);
-  }
   const dismissToast = useCallback(ev => {
     if (onDismiss && Events.isEscKey(ev)) {
       ev.stopImmediatePropagation();
@@ -131,7 +124,6 @@ const Toast = /*#__PURE__*/React.forwardRef(({
       isNotification: isNotification,
       className: className
     }, tagComponent(restProps["data-component"] || "toast", restProps), {
-      isCenter: isCenter,
       variant: toastVariant,
       id: id,
       maxWidth: maxWidth,
@@ -140,25 +132,26 @@ const Toast = /*#__PURE__*/React.forwardRef(({
       tabIndex,
       onBlur: () => setTabIndex(undefined)
     }), !isNotice && /*#__PURE__*/React.createElement(TypeIcon, {
-      variant: isNotification ? "info" : variant
+      variant: isNotification ? "info" : variant,
+      "data-role": "toast-type-icon"
     }, /*#__PURE__*/React.createElement(Icon, {
       type: toastIcon
     })), /*#__PURE__*/React.createElement(StyledToastContent, {
       isNotice: isNotice,
-      isDismiss: !!onDismiss
+      isDismiss: !!onDismiss,
+      "data-role": "toast-content"
     }, children), renderCloseIcon()));
   }
   return /*#__PURE__*/React.createElement(StyledPortal, {
     id: targetPortalId,
     align: align,
     alignY: alignY,
-    isCenter: isCenter,
     isNotice: isNotice
   }, /*#__PURE__*/React.createElement(ToastWrapper, {
     align: align,
-    isCenter: isCenter,
     ref: refToPass,
-    isNotice: isNotice
+    isNotice: isNotice,
+    "data-role": "toast-wrapper"
   }, /*#__PURE__*/React.createElement(TransitionGroup, null, renderToastContent())));
 });
 if (process.env.NODE_ENV !== "production") {
@@ -174,7 +167,6 @@ if (process.env.NODE_ENV !== "production") {
     "data-component": PropTypes.string,
     "disableAutoFocus": PropTypes.bool,
     "id": PropTypes.string,
-    "isCenter": PropTypes.bool,
     "maxWidth": PropTypes.string,
     "onDismiss": PropTypes.func,
     "open": PropTypes.bool,

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

@@ -4,7 +4,6 @@ import { MessageVariant } from "../message/message.component";
 declare const StyledPortal: import("styled-components").StyledComponent<({ children, className, id, onReposition, inertOptOut, }: import("../portal/portal").PortalProps) => import("react").JSX.Element, any, {
     align?: "left" | "right" | "center" | undefined;
     alignY?: "bottom" | "top" | "center" | undefined;
-    isCenter?: boolean | undefined;
     isNotice?: boolean | undefined;
 }, never>;
 declare type ToastVariants = MessageVariant;
@@ -12,7 +11,6 @@ declare type ToastStyleProps = {
     align?: "left" | "center" | "right";
     alignY?: "top" | "center" | "bottom";
     maxWidth?: string;
-    isCenter?: boolean;
     isNotice?: boolean;
     isNotification?: boolean;
     variant: ToastVariants;
@@ -24,7 +22,6 @@ declare const StyledToastContent: import("styled-components").StyledComponent<"d
 }, never>;
 declare const ToastWrapper: import("styled-components").StyledComponent<"div", any, {
     align?: "left" | "right" | "center" | undefined;
-    isCenter?: boolean | undefined;
     isNotice?: boolean | undefined;
 }, never>;
 export { StyledPortal, StyledToast, TypeIcon, StyledToastContent, ToastWrapper, };

package/esm/components/toast/toast.style.js

@@ -7,7 +7,6 @@ import StyledIcon from "../icon/icon.style";
 const StyledPortal = styled(Portal)`
   ${({
   theme,
-  isCenter,
   isNotice,
   align,
   alignY
@@ -16,11 +15,6 @@ const StyledPortal = styled(Portal)`
     top: 0;
     z-index: ${theme.zIndex.notification};
 
-    ${isCenter && css`
-      margin-left: 50%;
-      transform: translateX(-50%);
-    `}
-
     ${align === "left" && css`
       left: 0;
       transform: translateX(50%);
@@ -82,7 +76,6 @@ const iconPositionStyles = css`
 const StyledToast = styled.div`
   ${({
   maxWidth,
-  isCenter,
   align,
   isNotification,
   alignY,
@@ -113,8 +106,8 @@ const StyledToast = styled.div`
     margin-bottom: ${alignY === "bottom" && !isNotice ? "30px" : "0"};
     max-width: ${!maxWidth ? "300px" : maxWidth};
     position: relative;
-    margin-right: ${isCenter || align === "right" ? "auto" : "30px"};
-    margin-left: ${isCenter || align === "left" ? "auto" : "30px"};
+    margin-right: ${align === "center" || align === "right" ? "auto" : "30px"};
+    margin-left: ${align === "center" || align === "left" ? "auto" : "30px"};
 
     ${isNotification && css`
       border: 1px solid var(--colorsSemanticInfo500);
@@ -134,8 +127,8 @@ const StyledToast = styled.div`
     &${animationName}-enter${animationName}-enter-active {
     opacity: 1;
     transform: ${({
-  isCenter
-}) => isCenter ? " scale(1) translateY(0)" : "scale(1)"};
+  align
+}) => align === "center" ? " scale(1) translateY(0)" : "scale(1)"};
     transition: all 300ms cubic-bezier(0.25, 0.25, 0, 1.5);
   }
 
@@ -225,16 +218,6 @@ const ToastWrapper = styled.div`
       display: flex;
     `}
 
-  ${({
-  isCenter
-}) => isCenter && css`
-      position: relative;
-      width: auto;
-      height: auto;
-      justify-content: center;
-      display: flex;
-    `}
-
   ${({
   isNotice
 }) => isNotice && css`

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

@@ -28,6 +28,8 @@ export interface TypographyProps extends SpaceProps, TagProps {
     listStyleType?: string;
     /** Override the white-space */
     whiteSpace?: string;
+    /** Override the word-break */
+    wordBreak?: string;
     /** Override the word-wrap */
     wordWrap?: string;
     /** Override the text-align */
@@ -59,7 +61,7 @@ export interface TypographyProps extends SpaceProps, TagProps {
     "aria-hidden"?: "true" | "false";
 }
 export declare const Typography: {
-    ({ "data-component": dataComponent, variant, as, id, fontSize, fontWeight, textTransform, lineHeight, textDecoration, display, listStyleType, whiteSpace, wordWrap, textAlign, textOverflow, truncate, color, backgroundColor, bg, opacity, children, className, screenReaderOnly, isDisabled, "aria-hidden": ariaHidden, ...rest }: TypographyProps): React.JSX.Element;
+    ({ "data-component": dataComponent, variant, as, id, fontSize, fontWeight, textTransform, lineHeight, textDecoration, display, listStyleType, whiteSpace, wordBreak, wordWrap, textAlign, textOverflow, truncate, color, backgroundColor, bg, opacity, children, className, screenReaderOnly, isDisabled, "aria-hidden": ariaHidden, ...rest }: TypographyProps): React.JSX.Element;
     displayName: string;
 };
 export default Typography;

package/esm/components/typography/typography.component.js

@@ -18,6 +18,7 @@ export const Typography = ({
   display,
   listStyleType,
   whiteSpace,
+  wordBreak,
   wordWrap,
   textAlign,
   textOverflow,
@@ -46,6 +47,7 @@ export const Typography = ({
     listStyleType: listStyleType,
     whiteSpace: whiteSpace,
     wordWrap: wordWrap,
+    wordBreak: wordBreak,
     textAlign: textAlign,
     textOverflow: textOverflow,
     truncate: truncate,

package/esm/components/typography/typography.style.js

@@ -151,6 +151,7 @@ const StyledTypography = styled.span.attrs(({
   variant,
   listStyleType,
   whiteSpace,
+  wordBreak,
   wordWrap,
   textAlign,
   textOverflow,
@@ -166,6 +167,7 @@ const StyledTypography = styled.span.attrs(({
     margin: ${defaultMargin};
     padding: 0;
     white-space: ${truncate ? "nowrap" : whiteSpace};
+    word-break: ${wordBreak};
     word-wrap: ${wordWrap};
     text-align: ${textAlign};
     text-overflow: ${textOverflow || truncate && "ellipsis"};

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

@@ -12,7 +12,7 @@ declare type StyledHeadingTitleProps = {
     withMargin?: boolean;
 };
 declare const StyledHeadingTitle: import("styled-components").StyledComponent<{
-    ({ "data-component": dataComponent, variant, as, id, fontSize, fontWeight, textTransform, lineHeight, textDecoration, display, listStyleType, whiteSpace, wordWrap, textAlign, textOverflow, truncate, color, backgroundColor, bg, opacity, children, className, screenReaderOnly, isDisabled, "aria-hidden": ariaHidden, ...rest }: import("../typography").TypographyProps): import("react").JSX.Element;
+    ({ "data-component": dataComponent, variant, as, id, fontSize, fontWeight, textTransform, lineHeight, textDecoration, display, listStyleType, whiteSpace, wordBreak, wordWrap, textAlign, textOverflow, truncate, color, backgroundColor, bg, opacity, children, className, screenReaderOnly, isDisabled, "aria-hidden": ariaHidden, ...rest }: import("../typography").TypographyProps): import("react").JSX.Element;
     displayName: string;
 }, any, StyledHeadingTitleProps, never>;
 declare const StyledHeadingPills: import("styled-components").StyledComponent<"span", any, {}, never>;

package/lib/components/loader-spinner/loader-spinner.style.d.ts

@@ -2,7 +2,7 @@
 import { LoaderSpinnerProps } from "./loader-spinner.component";
 export declare const StyledSpinnerWrapper: import("styled-components").StyledComponent<"div", any, Pick<LoaderSpinnerProps, "size">, never>;
 export declare const StyledLabel: import("styled-components").StyledComponent<{
-    ({ "data-component": dataComponent, variant, as, id, fontSize, fontWeight, textTransform, lineHeight, textDecoration, display, listStyleType, whiteSpace, wordWrap, textAlign, textOverflow, truncate, color, backgroundColor, bg, opacity, children, className, screenReaderOnly, isDisabled, "aria-hidden": ariaHidden, ...rest }: import("../typography").TypographyProps): import("react").JSX.Element;
+    ({ "data-component": dataComponent, variant, as, id, fontSize, fontWeight, textTransform, lineHeight, textDecoration, display, listStyleType, whiteSpace, wordBreak, wordWrap, textAlign, textOverflow, truncate, color, backgroundColor, bg, opacity, children, className, screenReaderOnly, isDisabled, "aria-hidden": ariaHidden, ...rest }: import("../typography").TypographyProps): import("react").JSX.Element;
     displayName: string;
 }, any, Required<Pick<LoaderSpinnerProps, "size">>, never>;
 interface StyledSpinnerCircleSvgProps extends Omit<LoaderSpinnerProps, "showSpinnerLabel"> {

package/lib/components/portal/portal.js

@@ -69,6 +69,7 @@ const Portal = ({
       node = document.createElement("div");
       node.classList.add(portalClassName);
       node.setAttribute("data-portal-exit", uniqueId);
+      node.setAttribute("data-role", "carbon-portal-exit");
       if (id !== undefined) {
         node.setAttribute("id", id);
       }

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

@@ -26,8 +26,6 @@ export interface ToastProps {
     closeButtonDataProps?: Pick<TagProps, "data-role" | "data-element">;
     /** Time for Toast to remain on screen */
     timeout?: string | number;
-    /** Centers the Toast on the screen */
-    isCenter?: boolean;
     /** Target Portal ID where the Toast will render */
     targetPortalId?: string;
     /** Maximum toast width */

package/lib/components/toast/toast.component.js

@@ -14,19 +14,16 @@ var _iconButton = _interopRequireDefault(require("../icon-button"));
 var _events = _interopRequireDefault(require("../../__internal__/utils/helpers/events"));
 var _useLocale = _interopRequireDefault(require("../../hooks/__internal__/useLocale"));
 var _useModalManager = _interopRequireDefault(require("../../hooks/__internal__/useModalManager"));
-var _logger = _interopRequireDefault(require("../../__internal__/utils/logger"));
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
 function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
 function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
-let isDeprecationWarningTriggered = false;
 const Toast = exports.Toast = /*#__PURE__*/_react.default.forwardRef(({
-  align,
+  align = "center",
   alignY,
   children,
   className,
   id,
-  isCenter = true,
   maxWidth,
   onDismiss,
   open = true,
@@ -50,10 +47,6 @@ const Toast = exports.Toast = /*#__PURE__*/_react.default.forwardRef(({
   if (ref && typeof ref === "object" && "current" in ref) {
     refToPass = ref;
   }
-  if (isCenter !== undefined && !isDeprecationWarningTriggered) {
-    isDeprecationWarningTriggered = true;
-    _logger.default.deprecate(`isCenter prop in ${Toast.displayName} is being deprecated in favour of the align prop.`);
-  }
   const dismissToast = (0, _react.useCallback)(ev => {
     if (onDismiss && _events.default.isEscKey(ev)) {
       ev.stopImmediatePropagation();
@@ -140,7 +133,6 @@ const Toast = exports.Toast = /*#__PURE__*/_react.default.forwardRef(({
       isNotification: isNotification,
       className: className
     }, (0, _tags.default)(restProps["data-component"] || "toast", restProps), {
-      isCenter: isCenter,
       variant: toastVariant,
       id: id,
       maxWidth: maxWidth,
@@ -149,25 +141,26 @@ const Toast = exports.Toast = /*#__PURE__*/_react.default.forwardRef(({
       tabIndex,
       onBlur: () => setTabIndex(undefined)
     }), !isNotice && /*#__PURE__*/_react.default.createElement(_toast.TypeIcon, {
-      variant: isNotification ? "info" : variant
+      variant: isNotification ? "info" : variant,
+      "data-role": "toast-type-icon"
     }, /*#__PURE__*/_react.default.createElement(_icon.default, {
       type: toastIcon
     })), /*#__PURE__*/_react.default.createElement(_toast.StyledToastContent, {
       isNotice: isNotice,
-      isDismiss: !!onDismiss
+      isDismiss: !!onDismiss,
+      "data-role": "toast-content"
     }, children), renderCloseIcon()));
   }
   return /*#__PURE__*/_react.default.createElement(_toast.StyledPortal, {
     id: targetPortalId,
     align: align,
     alignY: alignY,
-    isCenter: isCenter,
     isNotice: isNotice
   }, /*#__PURE__*/_react.default.createElement(_toast.ToastWrapper, {
     align: align,
-    isCenter: isCenter,
     ref: refToPass,
-    isNotice: isNotice
+    isNotice: isNotice,
+    "data-role": "toast-wrapper"
   }, /*#__PURE__*/_react.default.createElement(_reactTransitionGroup.TransitionGroup, null, renderToastContent())));
 });
 if (process.env.NODE_ENV !== "production") {
@@ -183,7 +176,6 @@ if (process.env.NODE_ENV !== "production") {
     "data-component": _propTypes.default.string,
     "disableAutoFocus": _propTypes.default.bool,
     "id": _propTypes.default.string,
-    "isCenter": _propTypes.default.bool,
     "maxWidth": _propTypes.default.string,
     "onDismiss": _propTypes.default.func,
     "open": _propTypes.default.bool,

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

@@ -4,7 +4,6 @@ import { MessageVariant } from "../message/message.component";
 declare const StyledPortal: import("styled-components").StyledComponent<({ children, className, id, onReposition, inertOptOut, }: import("../portal/portal").PortalProps) => import("react").JSX.Element, any, {
     align?: "left" | "right" | "center" | undefined;
     alignY?: "bottom" | "top" | "center" | undefined;
-    isCenter?: boolean | undefined;
     isNotice?: boolean | undefined;
 }, never>;
 declare type ToastVariants = MessageVariant;
@@ -12,7 +11,6 @@ declare type ToastStyleProps = {
     align?: "left" | "center" | "right";
     alignY?: "top" | "center" | "bottom";
     maxWidth?: string;
-    isCenter?: boolean;
     isNotice?: boolean;
     isNotification?: boolean;
     variant: ToastVariants;
@@ -24,7 +22,6 @@ declare const StyledToastContent: import("styled-components").StyledComponent<"d
 }, never>;
 declare const ToastWrapper: import("styled-components").StyledComponent<"div", any, {
     align?: "left" | "right" | "center" | undefined;
-    isCenter?: boolean | undefined;
     isNotice?: boolean | undefined;
 }, never>;
 export { StyledPortal, StyledToast, TypeIcon, StyledToastContent, ToastWrapper, };

package/lib/components/toast/toast.style.js

@@ -22,7 +22,6 @@ function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e;
 const StyledPortal = exports.StyledPortal = (0, _styledComponents.default)(_portal.default)`
   ${({
   theme,
-  isCenter,
   isNotice,
   align,
   alignY
@@ -31,11 +30,6 @@ const StyledPortal = exports.StyledPortal = (0, _styledComponents.default)(_port
     top: 0;
     z-index: ${theme.zIndex.notification};
 
-    ${isCenter && (0, _styledComponents.css)`
-      margin-left: 50%;
-      transform: translateX(-50%);
-    `}
-
     ${align === "left" && (0, _styledComponents.css)`
       left: 0;
       transform: translateX(50%);
@@ -97,7 +91,6 @@ const iconPositionStyles = (0, _styledComponents.css)`
 const StyledToast = exports.StyledToast = _styledComponents.default.div`
   ${({
   maxWidth,
-  isCenter,
   align,
   isNotification,
   alignY,
@@ -128,8 +121,8 @@ const StyledToast = exports.StyledToast = _styledComponents.default.div`
     margin-bottom: ${alignY === "bottom" && !isNotice ? "30px" : "0"};
     max-width: ${!maxWidth ? "300px" : maxWidth};
     position: relative;
-    margin-right: ${isCenter || align === "right" ? "auto" : "30px"};
-    margin-left: ${isCenter || align === "left" ? "auto" : "30px"};
+    margin-right: ${align === "center" || align === "right" ? "auto" : "30px"};
+    margin-left: ${align === "center" || align === "left" ? "auto" : "30px"};
 
     ${isNotification && (0, _styledComponents.css)`
       border: 1px solid var(--colorsSemanticInfo500);
@@ -149,8 +142,8 @@ const StyledToast = exports.StyledToast = _styledComponents.default.div`
     &${animationName}-enter${animationName}-enter-active {
     opacity: 1;
     transform: ${({
-  isCenter
-}) => isCenter ? " scale(1) translateY(0)" : "scale(1)"};
+  align
+}) => align === "center" ? " scale(1) translateY(0)" : "scale(1)"};
     transition: all 300ms cubic-bezier(0.25, 0.25, 0, 1.5);
   }
 
@@ -240,16 +233,6 @@ const ToastWrapper = exports.ToastWrapper = _styledComponents.default.div`
       display: flex;
     `}
 
-  ${({
-  isCenter
-}) => isCenter && (0, _styledComponents.css)`
-      position: relative;
-      width: auto;
-      height: auto;
-      justify-content: center;
-      display: flex;
-    `}
-
   ${({
   isNotice
 }) => isNotice && (0, _styledComponents.css)`

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

@@ -28,6 +28,8 @@ export interface TypographyProps extends SpaceProps, TagProps {
     listStyleType?: string;
     /** Override the white-space */
     whiteSpace?: string;
+    /** Override the word-break */
+    wordBreak?: string;
     /** Override the word-wrap */
     wordWrap?: string;
     /** Override the text-align */
@@ -59,7 +61,7 @@ export interface TypographyProps extends SpaceProps, TagProps {
     "aria-hidden"?: "true" | "false";
 }
 export declare const Typography: {
-    ({ "data-component": dataComponent, variant, as, id, fontSize, fontWeight, textTransform, lineHeight, textDecoration, display, listStyleType, whiteSpace, wordWrap, textAlign, textOverflow, truncate, color, backgroundColor, bg, opacity, children, className, screenReaderOnly, isDisabled, "aria-hidden": ariaHidden, ...rest }: TypographyProps): React.JSX.Element;
+    ({ "data-component": dataComponent, variant, as, id, fontSize, fontWeight, textTransform, lineHeight, textDecoration, display, listStyleType, whiteSpace, wordBreak, wordWrap, textAlign, textOverflow, truncate, color, backgroundColor, bg, opacity, children, className, screenReaderOnly, isDisabled, "aria-hidden": ariaHidden, ...rest }: TypographyProps): React.JSX.Element;
     displayName: string;
 };
 export default Typography;

package/lib/components/typography/typography.component.js

@@ -25,6 +25,7 @@ const Typography = ({
   display,
   listStyleType,
   whiteSpace,
+  wordBreak,
   wordWrap,
   textAlign,
   textOverflow,
@@ -53,6 +54,7 @@ const Typography = ({
     listStyleType: listStyleType,
     whiteSpace: whiteSpace,
     wordWrap: wordWrap,
+    wordBreak: wordBreak,
     textAlign: textAlign,
     textOverflow: textOverflow,
     truncate: truncate,

package/lib/components/typography/typography.style.js

@@ -160,6 +160,7 @@ const StyledTypography = _styledComponents.default.span.attrs(({
   variant,
   listStyleType,
   whiteSpace,
+  wordBreak,
   wordWrap,
   textAlign,
   textOverflow,
@@ -175,6 +176,7 @@ const StyledTypography = _styledComponents.default.span.attrs(({
     margin: ${defaultMargin};
     padding: 0;
     white-space: ${truncate ? "nowrap" : whiteSpace};
+    word-break: ${wordBreak};
     word-wrap: ${wordWrap};
     text-align: ${textAlign};
     text-overflow: ${textOverflow || truncate && "ellipsis"};

package/package.json

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

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

@@ -1,25 +0,0 @@
-import React from "react";
-import { TagProps } from "../../__internal__/utils/helpers/tags/tags";
-export interface CarouselProps extends TagProps {
-    /** Individual tabs */
-    children?: React.ReactNode;
-    /** [legacy] Custom className */
-    className?: string;
-    /** Enables the next button */
-    enableNextButton?: boolean;
-    /** Enables the previous button */
-    enablePreviousButton?: boolean;
-    /** Enables the slide selector */
-    enableSlideSelector?: boolean;
-    /** The selected tab on page load */
-    initialSlideIndex?: number | string;
-    /** Action to be called on slide change */
-    onSlideChange?: (index: number, transitionDirection: string) => void;
-    /** The selected slide */
-    slideIndex?: number | string;
-}
-export declare const Carousel: {
-    ({ children, className, enableSlideSelector, enablePreviousButton, enableNextButton, initialSlideIndex, onSlideChange, slideIndex, ...props }: CarouselProps): React.JSX.Element;
-    displayName: string;
-};
-export default Carousel;