carbon-react 144.22.0 → 145.0.0

package/esm/components/box/box.style.js

@@ -23,11 +23,10 @@ const StyledBox = styled.div`
   ${calculatePosition}
 
   ${({
-  theme,
   borderRadius = "borderRadius000"
-}) => !theme.roundedCornersOptOut && css`
-      border-radius: var(--${borderRadius});
-    `}
+}) => css`
+    border-radius: var(--${borderRadius});
+  `}
   
   ${({
   cssProps,

package/esm/components/carbon-provider/__internal__/new-validation.context.d.ts

@@ -4,10 +4,6 @@ export interface NewValidationContextProps {
      *
      * NOTE - Will eventually be set to `true` by default in the future. */
     validationRedesignOptIn?: boolean;
-    /** (Deprecated) Feature flag for opting out of styling components to have rounded corners.
-     *
-     * NOTE - This feature flag will soon be removed, along with the legacy styling. */
-    roundedCornersOptOut?: boolean;
     /** (Deprecated) Feature flag for opting out of the focus redesign.
      *
      * NOTE -  This feature flag will soon be removed, along with the legacy styling. */

package/esm/components/carbon-provider/carbon-provider.component.d.ts

@@ -6,5 +6,5 @@ export interface CarbonProviderProps extends NewValidationContextProps {
     /** Theme which specifies styles to apply to all child components. Set to `sageTheme` by default. */
     theme?: Partial<ThemeObject>;
 }
-export declare const CarbonProvider: ({ children, theme, validationRedesignOptIn, roundedCornersOptOut, focusRedesignOptOut, }: CarbonProviderProps) => React.JSX.Element;
+export declare const CarbonProvider: ({ children, theme, validationRedesignOptIn, focusRedesignOptOut, }: CarbonProviderProps) => React.JSX.Element;
 export default CarbonProvider;

package/esm/components/carbon-provider/carbon-provider.component.js

@@ -6,25 +6,17 @@ import { sageTheme } from "../../style/themes";
 import NewValidationContext from "./__internal__/new-validation.context";
 import TopModalProvider from "./__internal__/top-modal-provider.component";
 import Logger from "../../__internal__/utils/logger";
-let deprecatedRoundedCornersOptOut = false;
 let deprecatedFocusRedesignOptOut = false;
 export const CarbonProvider = ({
   children,
   theme = sageTheme,
   validationRedesignOptIn = false,
-  roundedCornersOptOut = false,
   focusRedesignOptOut = false
 }) => {
   const {
-    roundedCornersOptOut: existingRoundedCornersOptOut,
     focusRedesignOptOut: existingFocusRedesignOptOut
   } = useContext(NewValidationContext);
-  const roundedCornersOptOutValue = existingRoundedCornersOptOut || roundedCornersOptOut;
   const focusRedesignOptOutValue = existingFocusRedesignOptOut || focusRedesignOptOut;
-  if (!deprecatedRoundedCornersOptOut && roundedCornersOptOutValue) {
-    deprecatedRoundedCornersOptOut = true;
-    Logger.deprecate("The `roundedCornersOptOut` feature flag has been deprecated and will soon be removed. " + "Along with this feature flag, the legacy pre-rounded corners styling will also be removed. ");
-  }
   if (!deprecatedFocusRedesignOptOut && focusRedesignOptOutValue) {
     deprecatedFocusRedesignOptOut = true;
     Logger.deprecate("The `focusRedesignOptOut` feature flag has been deprecated and will soon be removed. " + "Along with this feature flag, the legacy focus styling will also be removed. ");
@@ -32,13 +24,11 @@ export const CarbonProvider = ({
   return /*#__PURE__*/React.createElement(ThemeProvider, {
     theme: {
       ...theme,
-      roundedCornersOptOut: roundedCornersOptOutValue,
       focusRedesignOptOut: focusRedesignOptOutValue
     }
   }, /*#__PURE__*/React.createElement(CarbonScopedTokensProvider, null, /*#__PURE__*/React.createElement(NewValidationContext.Provider, {
     value: {
-      validationRedesignOptIn,
-      roundedCornersOptOut: roundedCornersOptOutValue
+      validationRedesignOptIn
     }
   }, /*#__PURE__*/React.createElement(TopModalProvider, null, children))));
 };

package/esm/components/dismissible-box/dismissible-box.component.d.ts

@@ -3,7 +3,7 @@ import { SpaceProps } from "styled-system";
 import { StyledDismissibleBoxProps } from "./dismissible-box.style";
 import { BoxProps } from "../box";
 import { TagProps } from "../../__internal__/utils/helpers/tags";
-export interface DismissibleBoxProps extends SpaceProps, StyledDismissibleBoxProps, Omit<BoxProps, "display" | "justifyContent">, Omit<TagProps, "data-component"> {
+export interface DismissibleBoxProps extends SpaceProps, StyledDismissibleBoxProps, Omit<BoxProps, "display" | "justifyContent" | "bg" | "backgroundColor">, Omit<TagProps, "data-component"> {
     /** The content to render in the component */
     children?: React.ReactNode;
     /** Data tag prop bag for close Button */

package/esm/components/loader/loader-square.style.js

@@ -10,7 +10,7 @@ const loaderAnimation = keyframes`
     transform: scale(1);
   }
 `;
-const getDimensions = (size, roundedCornersOptOut) => {
+const getDimensions = size => {
   let width;
   let marginRight;
   switch (size) {
@@ -30,7 +30,6 @@ const getDimensions = (size, roundedCornersOptOut) => {
     width: ${width};
     height: ${width};
     margin-right: ${marginRight};
-    ${!roundedCornersOptOut && "border-radius: var(--borderRadiusCircle);"}
   `;
 };
 const StyledLoaderSquare = styled.div`
@@ -38,13 +37,13 @@ const StyledLoaderSquare = styled.div`
   size,
   isInsideButton,
   isActive,
-  theme,
   backgroundColor
 }) => css`
     animation: ${loaderAnimation} 1s infinite ease-in-out both;
     background-color: ${backgroundColor};
     display: inline-block;
-    ${getDimensions(size, theme.roundedCornersOptOut)}
+    ${getDimensions(size)}
+    border-radius: var(--borderRadiusCircle);
 
     ${isInsideButton && css`
       background-color: ${isActive ? "var(--colorsUtilityYang100)" : "var(--colorsSemanticNeutral500)"};

package/esm/components/pill/pill.style.js

@@ -58,9 +58,7 @@ const StyledPill = styled.span`
       align-items: center;
       justify-content: center;
       border: 2px solid ${pillColor};
-      ${!theme.roundedCornersOptOut && css`
-        border-radius: var(--borderRadius025);
-      `}
+      border-radius: var(--borderRadius025);
       height: auto;
 
       ${!wrapText && css`
@@ -87,10 +85,6 @@ const StyledPill = styled.span`
         line-height: 16px;
         font-size: 12px;
         padding: 0 8px;
-
-        ${theme.roundedCornersOptOut && css`
-          border-radius: 12px;
-        `}
       `}
 
       ${size === "M" && css`
@@ -98,10 +92,6 @@ const StyledPill = styled.span`
         line-height: 20px;
         font-size: 14px;
         padding: 0 8px;
-
-        ${theme.roundedCornersOptOut && css`
-          border-radius: 12px;
-        `}
       `}
 
       ${size === "L" && css`
@@ -109,10 +99,6 @@ const StyledPill = styled.span`
         line-height: 24px;
         font-size: 14px;
         padding: 0 8px;
-
-        ${theme.roundedCornersOptOut && css`
-          border-radius: 13px;
-        `}
       `}
 
       ${size === "XL" && css`
@@ -120,18 +106,12 @@ const StyledPill = styled.span`
         line-height: 28px;
         font-size: 16px;
         padding: 0 12px;
-
-        ${theme.roundedCornersOptOut && css`
-          border-radius: 15px;
-        `}
       `}
 
       ${isDeletable && css`
         ${StyledIconButton} {
           -webkit-appearance: none;
-          ${!theme.roundedCornersOptOut && css`
-            border-radius: var(--borderRadius000);
-          `}
+          border-radius: var(--borderRadius000);
           border: none;
           bottom: 0;
           font-size: 100%;
@@ -150,11 +130,8 @@ const StyledPill = styled.span`
             `}
 
             background-color: ${buttonFocusColor};
-            ${!theme.roundedCornersOptOut && css`
-              border-radius: var(--borderRadius000) var(--borderRadius025)
-                var(--borderRadius025) var(--borderRadius000);
-            `}
-
+            border-radius: var(--borderRadius000) var(--borderRadius025)
+              var(--borderRadius025) var(--borderRadius000);
             ::-moz-focus-inner {
               border: 0;
             }
@@ -198,10 +175,6 @@ const StyledPill = styled.span`
                 font-size: 16px;
               }
             }
-
-            ${theme.roundedCornersOptOut && css`
-              border-radius: 0 10px 10px 0;
-            `}
           }
         `}
 
@@ -212,10 +185,6 @@ const StyledPill = styled.span`
             width: 24px;
             padding: 0;
             line-height: 15px;
-
-            ${theme.roundedCornersOptOut && css`
-              border-radius: 0 10px 10px 0;
-            `}
           }
         `}
 
@@ -226,10 +195,6 @@ const StyledPill = styled.span`
             width: 28px;
             padding: 0;
             line-height: 16px;
-
-            ${theme.roundedCornersOptOut && css`
-              border-radius: 0 11px 11px 0;
-            `}
           }
         `}
 
@@ -240,10 +205,6 @@ const StyledPill = styled.span`
             width: 32px;
             padding: 0;
             line-height: 18px;
-
-            ${theme.roundedCornersOptOut && css`
-              border-radius: 0 12px 12px 0;
-            `}
           }
         `}
       `}

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

@@ -1,5 +1,5 @@
 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); }
-import React, { useEffect, useState, useContext } from "react";
+import React, { useEffect, useState } from "react";
 import PropTypes from "prop-types";
 import MD5 from "crypto-js/md5";
 import invariant from "invariant";
@@ -9,7 +9,6 @@ import tagComponent from "../../__internal__/utils/helpers/tags/tags";
 import { PORTRAIT_SIZE_PARAMS } from "./portrait.config";
 import { StyledCustomImg, StyledIcon, StyledPortraitContainer, StyledPortraitInitials, StyledPortraitGravatar } from "./portrait.style";
 import { filterStyledSystemMarginProps } from "../../style/utils";
-import RoundedCornersOptOutContext from "../carbon-provider/__internal__/new-validation.context";
 let deprecatedGravatarWarnTriggered = false;
 const Portrait = ({
   alt,
@@ -18,7 +17,7 @@ const Portrait = ({
   gravatar = "",
   iconType = "individual",
   initials,
-  shape,
+  shape = "circle",
   size = "M",
   src,
   onClick,
@@ -33,10 +32,6 @@ const Portrait = ({
   ...rest
 }) => {
   const [externalError, setExternalError] = useState(false);
-  const {
-    roundedCornersOptOut
-  } = useContext(RoundedCornersOptOutContext);
-  const defaultShape = roundedCornersOptOut ? "square" : "circle";
   !!(src && gravatar) ? process.env.NODE_ENV !== "production" ? invariant(false, "The `src` prop cannot be used in conjunction with the `gravatar` prop." + " Please use one or the other.") : invariant(false) : void 0;
   const logGravatarDeprecationWarning = () => {
     deprecatedGravatarWarnTriggered = true;
@@ -99,7 +94,7 @@ const Portrait = ({
       }, tagProps, {
         darkBackground: darkBackground,
         size: size,
-        shape: shape || defaultShape
+        shape: shape
       }), portrait));
     }
     return /*#__PURE__*/React.createElement(StyledPortraitContainer, _extends({}, filterStyledSystemMarginProps(rest), {
@@ -107,7 +102,7 @@ const Portrait = ({
     }, tagProps, {
       darkBackground: darkBackground,
       size: size,
-      shape: shape || defaultShape
+      shape: shape
     }), portrait);
   };
   return renderComponent();

package/esm/components/progress-tracker/progress-tracker.style.js

@@ -47,8 +47,7 @@ const StyledProgressTracker = styled.div`
 const StyledProgressBar = styled.span`
   ${({
   progress,
-  error,
-  theme
+  error
 }) => css`
     display: flex;
     position: relative;
@@ -57,7 +56,7 @@ const StyledProgressBar = styled.span`
   progress,
   error
 })};
-    border-radius: ${theme.roundedCornersOptOut ? "25px" : "var(--borderRadius400)"};
+    border-radius: var(--borderRadius400);
     overflow-x: hidden;
     width: 100%
     min-height: fit-content;
@@ -108,8 +107,7 @@ const InnerBar = styled.span`
   ${({
   progress,
   size,
-  error,
-  theme
+  error
 }) => css`
     position: relative;
     left: 0;
@@ -117,7 +115,7 @@ const InnerBar = styled.span`
   progress,
   error
 })};
-    border-radius: ${theme.roundedCornersOptOut ? "25px" : "var(--borderRadius400)"};
+    border-radius: var(--borderRadius400);
     width: ${progress}%;
     min-width: 2px;
     height: ${getHeight(size)};

package/esm/components/switch/__internal__/switch-slider.style.d.ts

@@ -1,11 +1,9 @@
-import { ThemeObject } from "../../../style/themes/base";
 import { SwitchSliderProps } from "./switch-slider.component";
 interface StyledSwitchSliderProps extends Pick<SwitchSliderProps, "checked" | "disabled" | "size" | "error" | "warning"> {
     isLoading?: boolean;
-    theme?: Partial<ThemeObject>;
     isDarkBackground?: boolean;
 }
-declare const StyledSwitchSlider: import("styled-components").StyledComponent<"div", any, {}, never>;
+declare const StyledSwitchSlider: import("styled-components").StyledComponent<"div", any, StyledSwitchSliderProps, never>;
 declare const HiddenContent: import("styled-components").StyledComponent<"div", any, Pick<StyledSwitchSliderProps, "size">, never>;
 export { StyledSwitchSlider, HiddenContent };
 export default StyledSwitchSlider;

package/esm/components/switch/__internal__/switch-slider.style.js

@@ -1,6 +1,5 @@
 import styled, { css } from "styled-components";
 import StyledValidationIcon from "../../../__internal__/validations/validation-icon.style";
-import baseTheme from "../../../style/themes/base";
 import SwitchSliderPanel from "./switch-slider-panel.style";
 const StyledSwitchSlider = styled.div`
   ${({
@@ -10,7 +9,6 @@ const StyledSwitchSlider = styled.div`
   size,
   error,
   warning,
-  theme,
   isDarkBackground
 }) => css`
     display: flex;
@@ -24,7 +22,7 @@ const StyledSwitchSlider = styled.div`
     top: 0;
     width: 100%
     z-index: 2;
-    border-radius: ${theme?.roundedCornersOptOut ? "90px" : "var(--borderRadius400)"};
+    border-radius: var(--borderRadius400);
     border-style: solid;
     border-color: ${isDarkBackground ? "var(--colorsUtilityYang100)" : "var(--colorsActionMinor400)"};
     border-width: var(--borderWidth200);
@@ -83,10 +81,6 @@ const StyledSwitchSlider = styled.div`
         `}
       `}
 
-    ${size === "large" && css`
-        ${theme?.roundedCornersOptOut ? "border-radius: 30px;" : ""}
-      `}
-
     ${isLoading && css`
         &::before {
           display: none;
@@ -117,8 +111,5 @@ const HiddenContent = styled.div`
     padding-left: ${size === "large" ? "var(--spacing700)" : "var(--spacing500)"};
   `}
 `;
-StyledSwitchSlider.defaultProps = {
-  theme: baseTheme
-};
 export { StyledSwitchSlider, HiddenContent };
 export default StyledSwitchSlider;

package/esm/style/design-tokens/carbon-scoped-tokens-provider/carbon-scoped-tokens-provider.component.d.ts

@@ -1,10 +1,9 @@
 import { ThemeObject } from "../../themes/base";
-import { CarbonProviderProps } from "../../../components/carbon-provider";
 /**
  *
  * Converts theme properties to css variables form and set them locally for
  * given scope
  *
  */
-declare const CarbonScopedTokensProvider: import("styled-components").StyledComponent<"div", any, ThemeObject & Pick<CarbonProviderProps, "roundedCornersOptOut">, never>;
+declare const CarbonScopedTokensProvider: import("styled-components").StyledComponent<"div", any, ThemeObject, never>;
 export default CarbonScopedTokensProvider;

package/esm/style/design-tokens/carbon-scoped-tokens-provider/carbon-scoped-tokens-provider.component.js

@@ -1,6 +1,7 @@
 import styled from "styled-components";
 import { baseTheme } from "../../themes";
 import generateCssVariables from "../generate-css-variables.util";
+
 /**
  *
  * Converts theme properties to css variables form and set them locally for
@@ -16,7 +17,7 @@ const CarbonScopedTokensProvider = styled.div`
 
   ${({
   theme
-}) => generateCssVariables(theme.compatibility, theme.roundedCornersOptOut)}
+}) => generateCssVariables(theme.compatibility)}
 `;
 CarbonScopedTokensProvider.defaultProps = {
   theme: baseTheme

package/esm/style/design-tokens/generate-css-variables.util.d.ts

@@ -7,5 +7,5 @@ import { ThemeObject } from "../themes/base";
  * form of CSS variables along with styled-components ThemeProvider.
  *
  */
-declare const _default: (theme: ThemeObject | Record<string, string>, roundedCornersOptOut?: boolean) => string;
+declare const _default: (theme: ThemeObject | Record<string, string>) => string;
 export default _default;

package/esm/style/design-tokens/generate-css-variables.util.js

@@ -7,9 +7,4 @@
  *
  */
 
-export default (theme, roundedCornersOptOut) => Object.entries(theme).map(([key, value]) => {
-  if (roundedCornersOptOut && key.startsWith("borderRadius") && key !== "borderRadiusCircle") {
-    return `--${key}: 0px;`;
-  }
-  return `--${key}: ${value};`;
-}).join("\r\n");
+export default theme => Object.entries(theme).map(([key, value]) => `--${key}: ${value};`).join("\r\n");

package/lib/components/box/box.style.js

@@ -32,11 +32,10 @@ const StyledBox = _styledComponents.default.div`
   ${calculatePosition}
 
   ${({
-  theme,
   borderRadius = "borderRadius000"
-}) => !theme.roundedCornersOptOut && (0, _styledComponents.css)`
-      border-radius: var(--${borderRadius});
-    `}
+}) => (0, _styledComponents.css)`
+    border-radius: var(--${borderRadius});
+  `}
   
   ${({
   cssProps,

package/lib/components/carbon-provider/__internal__/new-validation.context.d.ts

@@ -4,10 +4,6 @@ export interface NewValidationContextProps {
      *
      * NOTE - Will eventually be set to `true` by default in the future. */
     validationRedesignOptIn?: boolean;
-    /** (Deprecated) Feature flag for opting out of styling components to have rounded corners.
-     *
-     * NOTE - This feature flag will soon be removed, along with the legacy styling. */
-    roundedCornersOptOut?: boolean;
     /** (Deprecated) Feature flag for opting out of the focus redesign.
      *
      * NOTE -  This feature flag will soon be removed, along with the legacy styling. */

package/lib/components/carbon-provider/carbon-provider.component.d.ts

@@ -6,5 +6,5 @@ export interface CarbonProviderProps extends NewValidationContextProps {
     /** Theme which specifies styles to apply to all child components. Set to `sageTheme` by default. */
     theme?: Partial<ThemeObject>;
 }
-export declare const CarbonProvider: ({ children, theme, validationRedesignOptIn, roundedCornersOptOut, focusRedesignOptOut, }: CarbonProviderProps) => React.JSX.Element;
+export declare const CarbonProvider: ({ children, theme, validationRedesignOptIn, focusRedesignOptOut, }: CarbonProviderProps) => React.JSX.Element;
 export default CarbonProvider;

package/lib/components/carbon-provider/carbon-provider.component.js

@@ -15,25 +15,17 @@ var _logger = _interopRequireDefault(require("../../__internal__/utils/logger"))
 function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
 function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
 function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
-let deprecatedRoundedCornersOptOut = false;
 let deprecatedFocusRedesignOptOut = false;
 const CarbonProvider = ({
   children,
   theme = _themes.sageTheme,
   validationRedesignOptIn = false,
-  roundedCornersOptOut = false,
   focusRedesignOptOut = false
 }) => {
   const {
-    roundedCornersOptOut: existingRoundedCornersOptOut,
     focusRedesignOptOut: existingFocusRedesignOptOut
   } = (0, _react.useContext)(_newValidation.default);
-  const roundedCornersOptOutValue = existingRoundedCornersOptOut || roundedCornersOptOut;
   const focusRedesignOptOutValue = existingFocusRedesignOptOut || focusRedesignOptOut;
-  if (!deprecatedRoundedCornersOptOut && roundedCornersOptOutValue) {
-    deprecatedRoundedCornersOptOut = true;
-    _logger.default.deprecate("The `roundedCornersOptOut` feature flag has been deprecated and will soon be removed. " + "Along with this feature flag, the legacy pre-rounded corners styling will also be removed. ");
-  }
   if (!deprecatedFocusRedesignOptOut && focusRedesignOptOutValue) {
     deprecatedFocusRedesignOptOut = true;
     _logger.default.deprecate("The `focusRedesignOptOut` feature flag has been deprecated and will soon be removed. " + "Along with this feature flag, the legacy focus styling will also be removed. ");
@@ -41,13 +33,11 @@ const CarbonProvider = ({
   return /*#__PURE__*/_react.default.createElement(_styledComponents.ThemeProvider, {
     theme: {
       ...theme,
-      roundedCornersOptOut: roundedCornersOptOutValue,
       focusRedesignOptOut: focusRedesignOptOutValue
     }
   }, /*#__PURE__*/_react.default.createElement(_carbonScopedTokensProvider.default, null, /*#__PURE__*/_react.default.createElement(_newValidation.default.Provider, {
     value: {
-      validationRedesignOptIn,
-      roundedCornersOptOut: roundedCornersOptOutValue
+      validationRedesignOptIn
     }
   }, /*#__PURE__*/_react.default.createElement(_topModalProvider.default, null, children))));
 };

package/lib/components/dismissible-box/dismissible-box.component.d.ts

@@ -3,7 +3,7 @@ import { SpaceProps } from "styled-system";
 import { StyledDismissibleBoxProps } from "./dismissible-box.style";
 import { BoxProps } from "../box";
 import { TagProps } from "../../__internal__/utils/helpers/tags";
-export interface DismissibleBoxProps extends SpaceProps, StyledDismissibleBoxProps, Omit<BoxProps, "display" | "justifyContent">, Omit<TagProps, "data-component"> {
+export interface DismissibleBoxProps extends SpaceProps, StyledDismissibleBoxProps, Omit<BoxProps, "display" | "justifyContent" | "bg" | "backgroundColor">, Omit<TagProps, "data-component"> {
     /** The content to render in the component */
     children?: React.ReactNode;
     /** Data tag prop bag for close Button */

package/lib/components/loader/loader-square.style.js

@@ -19,7 +19,7 @@ const loaderAnimation = (0, _styledComponents.keyframes)`
     transform: scale(1);
   }
 `;
-const getDimensions = (size, roundedCornersOptOut) => {
+const getDimensions = size => {
   let width;
   let marginRight;
   switch (size) {
@@ -39,7 +39,6 @@ const getDimensions = (size, roundedCornersOptOut) => {
     width: ${width};
     height: ${width};
     margin-right: ${marginRight};
-    ${!roundedCornersOptOut && "border-radius: var(--borderRadiusCircle);"}
   `;
 };
 const StyledLoaderSquare = _styledComponents.default.div`
@@ -47,13 +46,13 @@ const StyledLoaderSquare = _styledComponents.default.div`
   size,
   isInsideButton,
   isActive,
-  theme,
   backgroundColor
 }) => (0, _styledComponents.css)`
     animation: ${loaderAnimation} 1s infinite ease-in-out both;
     background-color: ${backgroundColor};
     display: inline-block;
-    ${getDimensions(size, theme.roundedCornersOptOut)}
+    ${getDimensions(size)}
+    border-radius: var(--borderRadiusCircle);
 
     ${isInsideButton && (0, _styledComponents.css)`
       background-color: ${isActive ? "var(--colorsUtilityYang100)" : "var(--colorsSemanticNeutral500)"};

package/lib/components/pill/pill.style.js

@@ -67,9 +67,7 @@ const StyledPill = _styledComponents.default.span`
       align-items: center;
       justify-content: center;
       border: 2px solid ${pillColor};
-      ${!theme.roundedCornersOptOut && (0, _styledComponents.css)`
-        border-radius: var(--borderRadius025);
-      `}
+      border-radius: var(--borderRadius025);
       height: auto;
 
       ${!wrapText && (0, _styledComponents.css)`
@@ -96,10 +94,6 @@ const StyledPill = _styledComponents.default.span`
         line-height: 16px;
         font-size: 12px;
         padding: 0 8px;
-
-        ${theme.roundedCornersOptOut && (0, _styledComponents.css)`
-          border-radius: 12px;
-        `}
       `}
 
       ${size === "M" && (0, _styledComponents.css)`
@@ -107,10 +101,6 @@ const StyledPill = _styledComponents.default.span`
         line-height: 20px;
         font-size: 14px;
         padding: 0 8px;
-
-        ${theme.roundedCornersOptOut && (0, _styledComponents.css)`
-          border-radius: 12px;
-        `}
       `}
 
       ${size === "L" && (0, _styledComponents.css)`
@@ -118,10 +108,6 @@ const StyledPill = _styledComponents.default.span`
         line-height: 24px;
         font-size: 14px;
         padding: 0 8px;
-
-        ${theme.roundedCornersOptOut && (0, _styledComponents.css)`
-          border-radius: 13px;
-        `}
       `}
 
       ${size === "XL" && (0, _styledComponents.css)`
@@ -129,18 +115,12 @@ const StyledPill = _styledComponents.default.span`
         line-height: 28px;
         font-size: 16px;
         padding: 0 12px;
-
-        ${theme.roundedCornersOptOut && (0, _styledComponents.css)`
-          border-radius: 15px;
-        `}
       `}
 
       ${isDeletable && (0, _styledComponents.css)`
         ${_iconButton.default} {
           -webkit-appearance: none;
-          ${!theme.roundedCornersOptOut && (0, _styledComponents.css)`
-            border-radius: var(--borderRadius000);
-          `}
+          border-radius: var(--borderRadius000);
           border: none;
           bottom: 0;
           font-size: 100%;
@@ -159,11 +139,8 @@ const StyledPill = _styledComponents.default.span`
             `}
 
             background-color: ${buttonFocusColor};
-            ${!theme.roundedCornersOptOut && (0, _styledComponents.css)`
-              border-radius: var(--borderRadius000) var(--borderRadius025)
-                var(--borderRadius025) var(--borderRadius000);
-            `}
-
+            border-radius: var(--borderRadius000) var(--borderRadius025)
+              var(--borderRadius025) var(--borderRadius000);
             ::-moz-focus-inner {
               border: 0;
             }
@@ -207,10 +184,6 @@ const StyledPill = _styledComponents.default.span`
                 font-size: 16px;
               }
             }
-
-            ${theme.roundedCornersOptOut && (0, _styledComponents.css)`
-              border-radius: 0 10px 10px 0;
-            `}
           }
         `}
 
@@ -221,10 +194,6 @@ const StyledPill = _styledComponents.default.span`
             width: 24px;
             padding: 0;
             line-height: 15px;
-
-            ${theme.roundedCornersOptOut && (0, _styledComponents.css)`
-              border-radius: 0 10px 10px 0;
-            `}
           }
         `}
 
@@ -235,10 +204,6 @@ const StyledPill = _styledComponents.default.span`
             width: 28px;
             padding: 0;
             line-height: 16px;
-
-            ${theme.roundedCornersOptOut && (0, _styledComponents.css)`
-              border-radius: 0 11px 11px 0;
-            `}
           }
         `}
 
@@ -249,10 +214,6 @@ const StyledPill = _styledComponents.default.span`
             width: 32px;
             padding: 0;
             line-height: 18px;
-
-            ${theme.roundedCornersOptOut && (0, _styledComponents.css)`
-              border-radius: 0 12px 12px 0;
-            `}
           }
         `}
       `}

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

@@ -14,7 +14,6 @@ var _tags = _interopRequireDefault(require("../../__internal__/utils/helpers/tag
 var _portrait = require("./portrait.config");
 var _portrait2 = require("./portrait.style");
 var _utils = require("../../style/utils");
-var _newValidation = _interopRequireDefault(require("../carbon-provider/__internal__/new-validation.context"));
 function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
 function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
 function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
@@ -27,7 +26,7 @@ const Portrait = ({
   gravatar = "",
   iconType = "individual",
   initials,
-  shape,
+  shape = "circle",
   size = "M",
   src,
   onClick,
@@ -42,10 +41,6 @@ const Portrait = ({
   ...rest
 }) => {
   const [externalError, setExternalError] = (0, _react.useState)(false);
-  const {
-    roundedCornersOptOut
-  } = (0, _react.useContext)(_newValidation.default);
-  const defaultShape = roundedCornersOptOut ? "square" : "circle";
   !!(src && gravatar) ? process.env.NODE_ENV !== "production" ? (0, _invariant.default)(false, "The `src` prop cannot be used in conjunction with the `gravatar` prop." + " Please use one or the other.") : (0, _invariant.default)(false) : void 0;
   const logGravatarDeprecationWarning = () => {
     deprecatedGravatarWarnTriggered = true;
@@ -108,7 +103,7 @@ const Portrait = ({
       }, tagProps, {
         darkBackground: darkBackground,
         size: size,
-        shape: shape || defaultShape
+        shape: shape
       }), portrait));
     }
     return /*#__PURE__*/_react.default.createElement(_portrait2.StyledPortraitContainer, _extends({}, (0, _utils.filterStyledSystemMarginProps)(rest), {
@@ -116,7 +111,7 @@ const Portrait = ({
     }, tagProps, {
       darkBackground: darkBackground,
       size: size,
-      shape: shape || defaultShape
+      shape: shape
     }), portrait);
   };
   return renderComponent();

package/lib/components/progress-tracker/progress-tracker.style.js

@@ -56,8 +56,7 @@ const StyledProgressTracker = exports.StyledProgressTracker = _styledComponents.
 const StyledProgressBar = exports.StyledProgressBar = _styledComponents.default.span`
   ${({
   progress,
-  error,
-  theme
+  error
 }) => (0, _styledComponents.css)`
     display: flex;
     position: relative;
@@ -66,7 +65,7 @@ const StyledProgressBar = exports.StyledProgressBar = _styledComponents.default.
   progress,
   error
 })};
-    border-radius: ${theme.roundedCornersOptOut ? "25px" : "var(--borderRadius400)"};
+    border-radius: var(--borderRadius400);
     overflow-x: hidden;
     width: 100%
     min-height: fit-content;
@@ -117,8 +116,7 @@ const InnerBar = exports.InnerBar = _styledComponents.default.span`
   ${({
   progress,
   size,
-  error,
-  theme
+  error
 }) => (0, _styledComponents.css)`
     position: relative;
     left: 0;
@@ -126,7 +124,7 @@ const InnerBar = exports.InnerBar = _styledComponents.default.span`
   progress,
   error
 })};
-    border-radius: ${theme.roundedCornersOptOut ? "25px" : "var(--borderRadius400)"};
+    border-radius: var(--borderRadius400);
     width: ${progress}%;
     min-width: 2px;
     height: ${getHeight(size)};

package/lib/components/switch/__internal__/switch-slider.style.d.ts

@@ -1,11 +1,9 @@
-import { ThemeObject } from "../../../style/themes/base";
 import { SwitchSliderProps } from "./switch-slider.component";
 interface StyledSwitchSliderProps extends Pick<SwitchSliderProps, "checked" | "disabled" | "size" | "error" | "warning"> {
     isLoading?: boolean;
-    theme?: Partial<ThemeObject>;
     isDarkBackground?: boolean;
 }
-declare const StyledSwitchSlider: import("styled-components").StyledComponent<"div", any, {}, never>;
+declare const StyledSwitchSlider: import("styled-components").StyledComponent<"div", any, StyledSwitchSliderProps, never>;
 declare const HiddenContent: import("styled-components").StyledComponent<"div", any, Pick<StyledSwitchSliderProps, "size">, never>;
 export { StyledSwitchSlider, HiddenContent };
 export default StyledSwitchSlider;

package/lib/components/switch/__internal__/switch-slider.style.js

@@ -6,7 +6,6 @@ Object.defineProperty(exports, "__esModule", {
 exports.default = exports.StyledSwitchSlider = exports.HiddenContent = void 0;
 var _styledComponents = _interopRequireWildcard(require("styled-components"));
 var _validationIcon = _interopRequireDefault(require("../../../__internal__/validations/validation-icon.style"));
-var _base = _interopRequireDefault(require("../../../style/themes/base"));
 var _switchSliderPanel = _interopRequireDefault(require("./switch-slider-panel.style"));
 function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
 function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
@@ -19,7 +18,6 @@ const StyledSwitchSlider = exports.StyledSwitchSlider = _styledComponents.defaul
   size,
   error,
   warning,
-  theme,
   isDarkBackground
 }) => (0, _styledComponents.css)`
     display: flex;
@@ -33,7 +31,7 @@ const StyledSwitchSlider = exports.StyledSwitchSlider = _styledComponents.defaul
     top: 0;
     width: 100%
     z-index: 2;
-    border-radius: ${theme?.roundedCornersOptOut ? "90px" : "var(--borderRadius400)"};
+    border-radius: var(--borderRadius400);
     border-style: solid;
     border-color: ${isDarkBackground ? "var(--colorsUtilityYang100)" : "var(--colorsActionMinor400)"};
     border-width: var(--borderWidth200);
@@ -92,10 +90,6 @@ const StyledSwitchSlider = exports.StyledSwitchSlider = _styledComponents.defaul
         `}
       `}
 
-    ${size === "large" && (0, _styledComponents.css)`
-        ${theme?.roundedCornersOptOut ? "border-radius: 30px;" : ""}
-      `}
-
     ${isLoading && (0, _styledComponents.css)`
         &::before {
           display: none;
@@ -126,7 +120,4 @@ const HiddenContent = exports.HiddenContent = _styledComponents.default.div`
     padding-left: ${size === "large" ? "var(--spacing700)" : "var(--spacing500)"};
   `}
 `;
-StyledSwitchSlider.defaultProps = {
-  theme: _base.default
-};
 var _default = exports.default = StyledSwitchSlider;

package/lib/style/design-tokens/carbon-scoped-tokens-provider/carbon-scoped-tokens-provider.component.d.ts

@@ -1,10 +1,9 @@
 import { ThemeObject } from "../../themes/base";
-import { CarbonProviderProps } from "../../../components/carbon-provider";
 /**
  *
  * Converts theme properties to css variables form and set them locally for
  * given scope
  *
  */
-declare const CarbonScopedTokensProvider: import("styled-components").StyledComponent<"div", any, ThemeObject & Pick<CarbonProviderProps, "roundedCornersOptOut">, never>;
+declare const CarbonScopedTokensProvider: import("styled-components").StyledComponent<"div", any, ThemeObject, never>;
 export default CarbonScopedTokensProvider;

package/lib/style/design-tokens/carbon-scoped-tokens-provider/carbon-scoped-tokens-provider.component.js

@@ -23,7 +23,7 @@ const CarbonScopedTokensProvider = _styledComponents.default.div`
 
   ${({
   theme
-}) => (0, _generateCssVariables.default)(theme.compatibility, theme.roundedCornersOptOut)}
+}) => (0, _generateCssVariables.default)(theme.compatibility)}
 `;
 CarbonScopedTokensProvider.defaultProps = {
   theme: _themes.baseTheme

package/lib/style/design-tokens/generate-css-variables.util.d.ts

@@ -7,5 +7,5 @@ import { ThemeObject } from "../themes/base";
  * form of CSS variables along with styled-components ThemeProvider.
  *
  */
-declare const _default: (theme: ThemeObject | Record<string, string>, roundedCornersOptOut?: boolean) => string;
+declare const _default: (theme: ThemeObject | Record<string, string>) => string;
 export default _default;

package/lib/style/design-tokens/generate-css-variables.util.js

@@ -12,10 +12,5 @@ exports.default = void 0;
  * form of CSS variables along with styled-components ThemeProvider.
  *
  */
-var _default = (theme, roundedCornersOptOut) => Object.entries(theme).map(([key, value]) => {
-  if (roundedCornersOptOut && key.startsWith("borderRadius") && key !== "borderRadiusCircle") {
-    return `--${key}: 0px;`;
-  }
-  return `--${key}: ${value};`;
-}).join("\r\n");
+var _default = theme => Object.entries(theme).map(([key, value]) => `--${key}: ${value};`).join("\r\n");
 exports.default = _default;

package/package.json

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