carbon-react 118.3.3 → 118.4.0

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

@@ -28,7 +28,7 @@ export interface BoxProps extends SpaceProps, LayoutProps, FlexboxProps, ColorPr
     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. */
+    /** 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** */
     borderRadius?: BorderRadiusType;
 }
 export declare const Box: import("styled-components").StyledComponent<"div", any, BoxProps, never>;

package/esm/components/box/box.component.js

@@ -35,8 +35,11 @@ export const Box = styled.div`
   ${calculatePosition}
 
   ${({
+  theme,
   borderRadius = "borderRadius000"
-}) => `border-radius: var(--${borderRadius});`}
+}) => !theme.roundedCornersOptOut && css`
+      border-radius: var(--${borderRadius});
+    `}
 
   ${({
   color,

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

@@ -4,7 +4,8 @@ export interface CarbonProviderProps {
     theme?: Partial<ThemeObject>;
     children: React.ReactNode;
     validationRedesignOptIn?: boolean;
+    roundedCornersOptOut?: boolean;
 }
-export declare const NewValidationContext: React.Context<Pick<CarbonProviderProps, "validationRedesignOptIn">>;
-export declare const CarbonProvider: ({ children, theme, validationRedesignOptIn, }: CarbonProviderProps) => JSX.Element;
+export declare const NewValidationContext: React.Context<Pick<CarbonProviderProps, "validationRedesignOptIn" | "roundedCornersOptOut">>;
+export declare const CarbonProvider: ({ children, theme, validationRedesignOptIn, roundedCornersOptOut, }: CarbonProviderProps) => JSX.Element;
 export default CarbonProvider;

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

@@ -1,4 +1,4 @@
-import React, { createContext } from "react";
+import React, { createContext, useContext } from "react";
 import PropTypes from "prop-types";
 import { ThemeProvider } from "styled-components";
 import mintTheme from "../../style/themes/mint";
@@ -9,17 +9,28 @@ export const NewValidationContext = /*#__PURE__*/createContext({});
 const CarbonProvider = ({
   children,
   theme = mintTheme,
-  validationRedesignOptIn = false
-}) => /*#__PURE__*/React.createElement(ThemeProvider, {
-  theme: theme
-}, /*#__PURE__*/React.createElement(CarbonScopedTokensProvider, null, /*#__PURE__*/React.createElement(NewValidationContext.Provider, {
-  value: {
-    validationRedesignOptIn
-  }
-}, /*#__PURE__*/React.createElement(TopModalContextProvider, null, children))));
+  validationRedesignOptIn = false,
+  roundedCornersOptOut = false
+}) => {
+  const {
+    roundedCornersOptOut: existingRoundedCornersOptOut
+  } = useContext(NewValidationContext);
+  const roundedCornersOptOutValue = existingRoundedCornersOptOut || roundedCornersOptOut;
+  return /*#__PURE__*/React.createElement(ThemeProvider, {
+    theme: { ...theme,
+      roundedCornersOptOut: roundedCornersOptOutValue
+    }
+  }, /*#__PURE__*/React.createElement(CarbonScopedTokensProvider, null, /*#__PURE__*/React.createElement(NewValidationContext.Provider, {
+    value: {
+      validationRedesignOptIn,
+      roundedCornersOptOut: roundedCornersOptOutValue
+    }
+  }, /*#__PURE__*/React.createElement(TopModalContextProvider, null, children))));
+};
 
 CarbonProvider.propTypes = {
   "children": PropTypes.node,
+  "roundedCornersOptOut": PropTypes.bool,
   "theme": PropTypes.shape({
     "colors": PropTypes.shape({
       "destructive": PropTypes.shape({

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

@@ -1,4 +1,5 @@
 import styled, { css, keyframes } from "styled-components";
+import baseTheme from "../../style/themes/base";
 const loaderAnimation = keyframes`
   0%, 80%, 100% {
     opacity: 0;
@@ -10,35 +11,31 @@ const loaderAnimation = keyframes`
   }
 `;
 
-const getDimentions = size => {
+const getDimentions = (size, roundedCornersOptOut) => {
   let width;
   let marginRight;
-  let borderRadius;
 
   switch (size) {
     case "medium":
       width = "16px";
       marginRight = "8px";
-      borderRadius = "var(--borderRadiusCircle)";
       break;
 
     case "large":
       width = "20px";
       marginRight = "8px";
-      borderRadius = "var(--borderRadiusCircle)";
       break;
 
     default:
       width = "12px";
       marginRight = "6px";
-      borderRadius = "var(--borderRadiusCircle)";
   }
 
   return css`
     width: ${width};
     height: ${width};
     margin-right: ${marginRight};
-    border-radius: ${borderRadius};
+    ${!roundedCornersOptOut && "border-radius: var(--borderRadiusCircle);"}
   `;
 };
 
@@ -46,12 +43,13 @@ const StyledLoaderSquare = styled.div`
   ${({
   size,
   isInsideButton,
-  isActive
+  isActive,
+  theme
 }) => css`
     animation: ${loaderAnimation} 1s infinite ease-in-out both;
     background-color: var(--colorsActionMajor500);
     display: inline-block;
-    ${getDimentions(size)}
+    ${getDimentions(size, theme.roundedCornersOptOut)}
 
     ${isInsideButton && css`
       background-color: ${isActive ? "var(--colorsUtilityYang100)" : "var(--colorsSemanticNeutral500)"};
@@ -74,6 +72,7 @@ const StyledLoaderSquare = styled.div`
 StyledLoaderSquare.defaultProps = {
   size: "small",
   isInsideButton: false,
-  isActive: true
+  isActive: true,
+  theme: baseTheme
 };
 export default StyledLoaderSquare;

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

@@ -69,7 +69,9 @@ const StyledPill = styled.span`
       align-items: center;
       justify-content: center;
       border: 2px solid ${pillColor};
-      border-radius: var(--borderRadius025);
+      ${!theme.roundedCornersOptOut && css`
+        border-radius: var(--borderRadius025);
+      `}
       height: auto;
       ${!wrapText && css`
         white-space: nowrap;
@@ -92,30 +94,64 @@ const StyledPill = styled.span`
         min-height: 16px;
         line-height: 16px;
         font-size: 10px;
+
+        ${theme.roundedCornersOptOut && css`
+          border-radius: 12px;
+
+          button {
+            border-radius: 0 10px 10px 0;
+          }
+        `}
       `}
 
       ${size === "M" && css`
         min-height: 20px;
         line-height: 20px;
         font-size: 12px;
+
+        ${theme.roundedCornersOptOut && css`
+          border-radius: 12px;
+
+          button {
+            border-radius: 0 10px 10px 0;
+          }
+        `}
       `}
 
       ${size === "L" && css`
         min-height: 24px;
         line-height: 24px;
         font-size: 14px;
+
+        ${theme.roundedCornersOptOut && css`
+          border-radius: 13px;
+
+          button {
+            border-radius: 0 11px 11px 0;
+          }
+        `}
       `}
 
       ${size === "XL" && css`
         min-height: 26px;
         line-height: 26px;
         font-size: 16px;
+
+        ${theme.roundedCornersOptOut && css`
+          border-radius: 15px;
+
+          button {
+            border-radius: 0 12px 12px 0;
+          }
+        `}
       `}
 
       ${isDeletable && css`
         button {
           -webkit-appearance: none;
-          border-radius: var(--borderRadius000);
+          ${!theme.roundedCornersOptOut && css`
+            border-radius: var(--borderRadius000);
+          `}
           border: none;
           bottom: 0;
           font-size: 100%;
@@ -130,8 +166,10 @@ const StyledPill = styled.span`
             outline: none;
             box-shadow: 0 0 0 3px var(--colorsSemanticFocus500);
             background-color: ${buttonFocusColor};
-            border-radius: var(--borderRadius000) var(--borderRadius025)
-              var(--borderRadius025) var(--borderRadius000);
+            ${!theme.roundedCornersOptOut && css`
+              border-radius: var(--borderRadius000) var(--borderRadius025)
+                var(--borderRadius025) var(--borderRadius000);
+            `}
 
             & {
               color: ${contentColor};
@@ -179,7 +217,6 @@ const StyledPill = styled.span`
           button {
             padding: 0;
             line-height: 14px;
-
             ${addStyleToPillIcon("7px")}
           }
         `}
@@ -191,7 +228,6 @@ const StyledPill = styled.span`
             width: 24px;
             padding: 0;
             line-height: 15px;
-
             ${addStyleToPillIcon("10px")}
           }
         `}
@@ -203,7 +239,6 @@ const StyledPill = styled.span`
             width: 28px;
             padding: 0;
             line-height: 16px;
-
             ${addStyleToPillIcon("12px")}
           }
         `}
@@ -215,7 +250,6 @@ const StyledPill = styled.span`
             width: 32px;
             padding: 0;
             line-height: 18px;
-
             ${addStyleToPillIcon("13px")}
           }
         `}

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

@@ -1,6 +1,6 @@
 function _extends() { _extends = Object.assign || 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); }
 
-import React, { useEffect, useState } from "react";
+import React, { useEffect, useState, useContext } from "react";
 import PropTypes from "prop-types";
 import Tooltip from "../tooltip";
 import tagComponent from "../../__internal__/utils/helpers/tags/tags";
@@ -8,6 +8,7 @@ import PortraitGravatar from "./portrait-gravatar.component";
 import PortraitInitials from "./portrait-initials.component";
 import { StyledCustomImg, StyledIcon, StyledPortraitContainer } from "./portrait.style";
 import { filterStyledSystemMarginProps } from "../../style/utils";
+import { NewValidationContext as RoundedCornersOptOutContext } from "../carbon-provider/carbon-provider.component";
 
 const Portrait = ({
   alt = "",
@@ -15,7 +16,7 @@ const Portrait = ({
   gravatar,
   iconType = "individual",
   initials,
-  shape = "circle",
+  shape,
   size = "M",
   src,
   onClick,
@@ -30,6 +31,10 @@ const Portrait = ({
   ...rest
 }) => {
   const [externalError, setExternalError] = useState(false);
+  const {
+    roundedCornersOptOut
+  } = useContext(RoundedCornersOptOutContext);
+  const defaultShape = roundedCornersOptOut ? "square" : "circle";
   useEffect(() => {
     setExternalError(false);
   }, [gravatar, src]);
@@ -39,14 +44,14 @@ const Portrait = ({
     let portrait = /*#__PURE__*/React.createElement(StyledIcon, {
       type: iconType,
       size: size,
-      shape: shape,
+      shape: shape || defaultShape,
       darkBackground: darkBackground
     });
 
     if (initials) {
       portrait = /*#__PURE__*/React.createElement(PortraitInitials, {
         size: size,
-        shape: shape,
+        shape: shape || defaultShape,
         initials: initials,
         darkBackground: darkBackground,
         alt: alt
@@ -58,7 +63,7 @@ const Portrait = ({
         src: src,
         alt: alt,
         size: size,
-        shape: shape,
+        shape: shape || defaultShape,
         "data-element": "user-image",
         onError: () => setExternalError(true)
       });
@@ -67,7 +72,7 @@ const Portrait = ({
     if (gravatar && !externalError) {
       portrait = /*#__PURE__*/React.createElement(PortraitGravatar, {
         gravatarEmail: gravatar,
-        shape: shape,
+        shape: shape || defaultShape,
         size: size,
         alt: alt,
         errorCallback: () => setExternalError(true)

package/esm/components/progress-tracker/progress-tracker.config.d.ts

@@ -0,0 +1 @@
+export declare const PROGRESS_TRACKER_SIZES: string[];

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

@@ -48,7 +48,8 @@ const StyledProgressBar = styled.span`
   ${({
   size,
   progress,
-  error
+  error,
+  theme
 }) => css`
     display: flex;
     position: relative;
@@ -57,7 +58,7 @@ const StyledProgressBar = styled.span`
   progress,
   error
 })};
-    border-radius: var(--borderRadius400);
+    border-radius: ${theme.roundedCornersOptOut ? "25px" : "var(--borderRadius400)"};
     overflow-x: hidden;
     height: ${getHeight(size)};
     width: 100%;
@@ -96,7 +97,8 @@ const InnerBar = styled.span`
   progress,
   size = "medium",
   length,
-  error
+  error,
+  theme
 }) => css`
     position: relative;
     left: 0;
@@ -104,12 +106,18 @@ const InnerBar = styled.span`
   progress,
   error
 })};
-    border-radius: var(--borderRadius400);
+    border-radius: ${theme.roundedCornersOptOut ? "25px" : "var(--borderRadius400)"};
     width: calc(${length} * ${progress && progress / 100});
     min-width: 2px;
     height: ${getHeight(size)};
   `}
 `;
+InnerBar.defaultProps = {
+  theme: baseTheme
+};
+StyledProgressBar.defaultProps = {
+  theme: baseTheme
+};
 StyledProgressTracker.defaultProps = {
   theme: baseTheme
 };

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

@@ -1,6 +1,2 @@
-import { SwitchSliderProps } from "./switch-slider.component";
-interface StyledSwitchSliderProps extends Pick<SwitchSliderProps, "checked" | "disabled" | "size" | "error" | "warning"> {
-    isLoading?: boolean;
-}
-declare const StyledSwitchSlider: import("styled-components").StyledComponent<"span", any, StyledSwitchSliderProps, never>;
+declare const StyledSwitchSlider: import("styled-components").StyledComponent<"span", any, {}, never>;
 export default StyledSwitchSlider;

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

@@ -1,6 +1,7 @@
 import styled, { css } from "styled-components";
 import SwitchSliderPanel from "./switch-slider-panel.style";
 import StyledValidationIcon from "../../../__internal__/validations/validation-icon.style";
+import baseTheme from "../../../style/themes/base";
 const StyledSwitchSlider = styled.span`
   ${({
   checked,
@@ -8,7 +9,8 @@ const StyledSwitchSlider = styled.span`
   disabled,
   size,
   error,
-  warning
+  warning,
+  theme
 }) => css`
     display: flex;
     font-size: 12px;
@@ -22,7 +24,7 @@ const StyledSwitchSlider = styled.span`
     width: 64px;
     min-width: fit-content;
     z-index: 2;
-    border-radius: var(--borderRadius400);
+    border-radius: ${theme !== null && theme !== void 0 && theme.roundedCornersOptOut ? "90px" : "var(--borderRadius400)"};
     border-style: solid;
     border-color: var(--colorsActionMinor400);
     border-width: var(--borderWidth200);
@@ -76,6 +78,7 @@ const StyledSwitchSlider = styled.span`
     `}
 
     ${size === "large" && css`
+      ${theme !== null && theme !== void 0 && theme.roundedCornersOptOut ? "border-radius: 30px;" : ""}
       &::before {
         height: 32px;
         width: 32px;
@@ -107,4 +110,7 @@ const StyledSwitchSlider = styled.span`
     }
   `}
 `;
+StyledSwitchSlider.defaultProps = {
+  theme: baseTheme
+};
 export default StyledSwitchSlider;

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

@@ -1,9 +1,10 @@
 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, never>;
+declare const CarbonScopedTokensProvider: import("styled-components").StyledComponent<"div", any, ThemeObject & Pick<CarbonProviderProps, "roundedCornersOptOut">, never>;
 export default CarbonScopedTokensProvider;

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

@@ -1,13 +1,13 @@
 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
  * given scope
  *
  */
-
 const CarbonScopedTokensProvider = styled.div`
   margin: 0;
   padding: 0;
@@ -16,7 +16,7 @@ const CarbonScopedTokensProvider = styled.div`
 
   ${({
   theme
-}) => generateCssVariables(theme.compatibility)}
+}) => generateCssVariables(theme.compatibility, theme.roundedCornersOptOut)}
 `;
 CarbonScopedTokensProvider.defaultProps = {
   theme: baseTheme

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

@@ -1,5 +1,5 @@
 import { ThemeObject } from "../themes/base";
-declare const _default: (theme: ThemeObject | Record<string, string>) => string;
+declare const _default: (theme: ThemeObject | Record<string, string>, roundedCornersOptOupt?: boolean | undefined) => string;
 /**
  *
  * Converts theme properties to the string in form of css variable definitions.

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

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

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

@@ -28,7 +28,7 @@ export interface BoxProps extends SpaceProps, LayoutProps, FlexboxProps, ColorPr
     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. */
+    /** 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** */
     borderRadius?: BorderRadiusType;
 }
 export declare const Box: import("styled-components").StyledComponent<"div", any, BoxProps, never>;

package/lib/components/box/box.component.js

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

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

@@ -4,7 +4,8 @@ export interface CarbonProviderProps {
     theme?: Partial<ThemeObject>;
     children: React.ReactNode;
     validationRedesignOptIn?: boolean;
+    roundedCornersOptOut?: boolean;
 }
-export declare const NewValidationContext: React.Context<Pick<CarbonProviderProps, "validationRedesignOptIn">>;
-export declare const CarbonProvider: ({ children, theme, validationRedesignOptIn, }: CarbonProviderProps) => JSX.Element;
+export declare const NewValidationContext: React.Context<Pick<CarbonProviderProps, "validationRedesignOptIn" | "roundedCornersOptOut">>;
+export declare const CarbonProvider: ({ children, theme, validationRedesignOptIn, roundedCornersOptOut, }: CarbonProviderProps) => JSX.Element;
 export default CarbonProvider;

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

@@ -29,18 +29,29 @@ exports.NewValidationContext = NewValidationContext;
 const CarbonProvider = ({
   children,
   theme = _mint.default,
-  validationRedesignOptIn = false
-}) => /*#__PURE__*/_react.default.createElement(_styledComponents.ThemeProvider, {
-  theme: theme
-}, /*#__PURE__*/_react.default.createElement(_carbonScopedTokensProvider.default, null, /*#__PURE__*/_react.default.createElement(NewValidationContext.Provider, {
-  value: {
-    validationRedesignOptIn
-  }
-}, /*#__PURE__*/_react.default.createElement(_topModalContext.TopModalContextProvider, null, children))));
+  validationRedesignOptIn = false,
+  roundedCornersOptOut = false
+}) => {
+  const {
+    roundedCornersOptOut: existingRoundedCornersOptOut
+  } = (0, _react.useContext)(NewValidationContext);
+  const roundedCornersOptOutValue = existingRoundedCornersOptOut || roundedCornersOptOut;
+  return /*#__PURE__*/_react.default.createElement(_styledComponents.ThemeProvider, {
+    theme: { ...theme,
+      roundedCornersOptOut: roundedCornersOptOutValue
+    }
+  }, /*#__PURE__*/_react.default.createElement(_carbonScopedTokensProvider.default, null, /*#__PURE__*/_react.default.createElement(NewValidationContext.Provider, {
+    value: {
+      validationRedesignOptIn,
+      roundedCornersOptOut: roundedCornersOptOutValue
+    }
+  }, /*#__PURE__*/_react.default.createElement(_topModalContext.TopModalContextProvider, null, children))));
+};
 
 exports.CarbonProvider = CarbonProvider;
 CarbonProvider.propTypes = {
   "children": _propTypes.default.node,
+  "roundedCornersOptOut": _propTypes.default.bool,
   "theme": _propTypes.default.shape({
     "colors": _propTypes.default.shape({
       "destructive": _propTypes.default.shape({

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

@@ -7,6 +7,10 @@ exports.default = void 0;
 
 var _styledComponents = _interopRequireWildcard(require("styled-components"));
 
+var _base = _interopRequireDefault(require("../../style/themes/base"));
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
 function _getRequireWildcardCache() { if (typeof WeakMap !== "function") return null; var cache = new WeakMap(); _getRequireWildcardCache = function () { return cache; }; return cache; }
 
 function _interopRequireWildcard(obj) { if (obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
@@ -22,35 +26,31 @@ const loaderAnimation = (0, _styledComponents.keyframes)`
   }
 `;
 
-const getDimentions = size => {
+const getDimentions = (size, roundedCornersOptOut) => {
   let width;
   let marginRight;
-  let borderRadius;
 
   switch (size) {
     case "medium":
       width = "16px";
       marginRight = "8px";
-      borderRadius = "var(--borderRadiusCircle)";
       break;
 
     case "large":
       width = "20px";
       marginRight = "8px";
-      borderRadius = "var(--borderRadiusCircle)";
       break;
 
     default:
       width = "12px";
       marginRight = "6px";
-      borderRadius = "var(--borderRadiusCircle)";
   }
 
   return (0, _styledComponents.css)`
     width: ${width};
     height: ${width};
     margin-right: ${marginRight};
-    border-radius: ${borderRadius};
+    ${!roundedCornersOptOut && "border-radius: var(--borderRadiusCircle);"}
   `;
 };
 
@@ -58,12 +58,13 @@ const StyledLoaderSquare = _styledComponents.default.div`
   ${({
   size,
   isInsideButton,
-  isActive
+  isActive,
+  theme
 }) => (0, _styledComponents.css)`
     animation: ${loaderAnimation} 1s infinite ease-in-out both;
     background-color: var(--colorsActionMajor500);
     display: inline-block;
-    ${getDimentions(size)}
+    ${getDimentions(size, theme.roundedCornersOptOut)}
 
     ${isInsideButton && (0, _styledComponents.css)`
       background-color: ${isActive ? "var(--colorsUtilityYang100)" : "var(--colorsSemanticNeutral500)"};
@@ -86,7 +87,8 @@ const StyledLoaderSquare = _styledComponents.default.div`
 StyledLoaderSquare.defaultProps = {
   size: "small",
   isInsideButton: false,
-  isActive: true
+  isActive: true,
+  theme: _base.default
 };
 var _default = StyledLoaderSquare;
 exports.default = _default;

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

@@ -89,7 +89,9 @@ const StyledPill = _styledComponents.default.span`
       align-items: center;
       justify-content: center;
       border: 2px solid ${pillColor};
-      border-radius: var(--borderRadius025);
+      ${!theme.roundedCornersOptOut && (0, _styledComponents.css)`
+        border-radius: var(--borderRadius025);
+      `}
       height: auto;
       ${!wrapText && (0, _styledComponents.css)`
         white-space: nowrap;
@@ -112,30 +114,64 @@ const StyledPill = _styledComponents.default.span`
         min-height: 16px;
         line-height: 16px;
         font-size: 10px;
+
+        ${theme.roundedCornersOptOut && (0, _styledComponents.css)`
+          border-radius: 12px;
+
+          button {
+            border-radius: 0 10px 10px 0;
+          }
+        `}
       `}
 
       ${size === "M" && (0, _styledComponents.css)`
         min-height: 20px;
         line-height: 20px;
         font-size: 12px;
+
+        ${theme.roundedCornersOptOut && (0, _styledComponents.css)`
+          border-radius: 12px;
+
+          button {
+            border-radius: 0 10px 10px 0;
+          }
+        `}
       `}
 
       ${size === "L" && (0, _styledComponents.css)`
         min-height: 24px;
         line-height: 24px;
         font-size: 14px;
+
+        ${theme.roundedCornersOptOut && (0, _styledComponents.css)`
+          border-radius: 13px;
+
+          button {
+            border-radius: 0 11px 11px 0;
+          }
+        `}
       `}
 
       ${size === "XL" && (0, _styledComponents.css)`
         min-height: 26px;
         line-height: 26px;
         font-size: 16px;
+
+        ${theme.roundedCornersOptOut && (0, _styledComponents.css)`
+          border-radius: 15px;
+
+          button {
+            border-radius: 0 12px 12px 0;
+          }
+        `}
       `}
 
       ${isDeletable && (0, _styledComponents.css)`
         button {
           -webkit-appearance: none;
-          border-radius: var(--borderRadius000);
+          ${!theme.roundedCornersOptOut && (0, _styledComponents.css)`
+            border-radius: var(--borderRadius000);
+          `}
           border: none;
           bottom: 0;
           font-size: 100%;
@@ -150,8 +186,10 @@ const StyledPill = _styledComponents.default.span`
             outline: none;
             box-shadow: 0 0 0 3px var(--colorsSemanticFocus500);
             background-color: ${buttonFocusColor};
-            border-radius: var(--borderRadius000) var(--borderRadius025)
-              var(--borderRadius025) var(--borderRadius000);
+            ${!theme.roundedCornersOptOut && (0, _styledComponents.css)`
+              border-radius: var(--borderRadius000) var(--borderRadius025)
+                var(--borderRadius025) var(--borderRadius000);
+            `}
 
             & {
               color: ${contentColor};
@@ -199,7 +237,6 @@ const StyledPill = _styledComponents.default.span`
           button {
             padding: 0;
             line-height: 14px;
-
             ${addStyleToPillIcon("7px")}
           }
         `}
@@ -211,7 +248,6 @@ const StyledPill = _styledComponents.default.span`
             width: 24px;
             padding: 0;
             line-height: 15px;
-
             ${addStyleToPillIcon("10px")}
           }
         `}
@@ -223,7 +259,6 @@ const StyledPill = _styledComponents.default.span`
             width: 28px;
             padding: 0;
             line-height: 16px;
-
             ${addStyleToPillIcon("12px")}
           }
         `}
@@ -235,7 +270,6 @@ const StyledPill = _styledComponents.default.span`
             width: 32px;
             padding: 0;
             line-height: 18px;
-
             ${addStyleToPillIcon("13px")}
           }
         `}

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

@@ -21,6 +21,8 @@ var _portrait = require("./portrait.style");
 
 var _utils = require("../../style/utils");
 
+var _carbonProvider = require("../carbon-provider/carbon-provider.component");
+
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
 function _getRequireWildcardCache() { if (typeof WeakMap !== "function") return null; var cache = new WeakMap(); _getRequireWildcardCache = function () { return cache; }; return cache; }
@@ -35,7 +37,7 @@ const Portrait = ({
   gravatar,
   iconType = "individual",
   initials,
-  shape = "circle",
+  shape,
   size = "M",
   src,
   onClick,
@@ -50,6 +52,10 @@ const Portrait = ({
   ...rest
 }) => {
   const [externalError, setExternalError] = (0, _react.useState)(false);
+  const {
+    roundedCornersOptOut
+  } = (0, _react.useContext)(_carbonProvider.NewValidationContext);
+  const defaultShape = roundedCornersOptOut ? "square" : "circle";
   (0, _react.useEffect)(() => {
     setExternalError(false);
   }, [gravatar, src]);
@@ -59,14 +65,14 @@ const Portrait = ({
     let portrait = /*#__PURE__*/_react.default.createElement(_portrait.StyledIcon, {
       type: iconType,
       size: size,
-      shape: shape,
+      shape: shape || defaultShape,
       darkBackground: darkBackground
     });
 
     if (initials) {
       portrait = /*#__PURE__*/_react.default.createElement(_portraitInitials.default, {
         size: size,
-        shape: shape,
+        shape: shape || defaultShape,
         initials: initials,
         darkBackground: darkBackground,
         alt: alt
@@ -78,7 +84,7 @@ const Portrait = ({
         src: src,
         alt: alt,
         size: size,
-        shape: shape,
+        shape: shape || defaultShape,
         "data-element": "user-image",
         onError: () => setExternalError(true)
       });
@@ -87,7 +93,7 @@ const Portrait = ({
     if (gravatar && !externalError) {
       portrait = /*#__PURE__*/_react.default.createElement(_portraitGravatar.default, {
         gravatarEmail: gravatar,
-        shape: shape,
+        shape: shape || defaultShape,
         size: size,
         alt: alt,
         errorCallback: () => setExternalError(true)

package/lib/components/progress-tracker/progress-tracker.config.d.ts

@@ -0,0 +1 @@
+export declare const PROGRESS_TRACKER_SIZES: string[];

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

@@ -64,7 +64,8 @@ const StyledProgressBar = _styledComponents.default.span`
   ${({
   size,
   progress,
-  error
+  error,
+  theme
 }) => (0, _styledComponents.css)`
     display: flex;
     position: relative;
@@ -73,7 +74,7 @@ const StyledProgressBar = _styledComponents.default.span`
   progress,
   error
 })};
-    border-radius: var(--borderRadius400);
+    border-radius: ${theme.roundedCornersOptOut ? "25px" : "var(--borderRadius400)"};
     overflow-x: hidden;
     height: ${getHeight(size)};
     width: 100%;
@@ -116,7 +117,8 @@ const InnerBar = _styledComponents.default.span`
   progress,
   size = "medium",
   length,
-  error
+  error,
+  theme
 }) => (0, _styledComponents.css)`
     position: relative;
     left: 0;
@@ -124,13 +126,19 @@ const InnerBar = _styledComponents.default.span`
   progress,
   error
 })};
-    border-radius: var(--borderRadius400);
+    border-radius: ${theme.roundedCornersOptOut ? "25px" : "var(--borderRadius400)"};
     width: calc(${length} * ${progress && progress / 100});
     min-width: 2px;
     height: ${getHeight(size)};
   `}
 `;
 exports.InnerBar = InnerBar;
+InnerBar.defaultProps = {
+  theme: _base.default
+};
+StyledProgressBar.defaultProps = {
+  theme: _base.default
+};
 StyledProgressTracker.defaultProps = {
   theme: _base.default
 };

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

@@ -1,6 +1,2 @@
-import { SwitchSliderProps } from "./switch-slider.component";
-interface StyledSwitchSliderProps extends Pick<SwitchSliderProps, "checked" | "disabled" | "size" | "error" | "warning"> {
-    isLoading?: boolean;
-}
-declare const StyledSwitchSlider: import("styled-components").StyledComponent<"span", any, StyledSwitchSliderProps, never>;
+declare const StyledSwitchSlider: import("styled-components").StyledComponent<"span", any, {}, never>;
 export default StyledSwitchSlider;

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

@@ -11,6 +11,8 @@ var _switchSliderPanel = _interopRequireDefault(require("./switch-slider-panel.s
 
 var _validationIcon = _interopRequireDefault(require("../../../__internal__/validations/validation-icon.style"));
 
+var _base = _interopRequireDefault(require("../../../style/themes/base"));
+
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
 function _getRequireWildcardCache() { if (typeof WeakMap !== "function") return null; var cache = new WeakMap(); _getRequireWildcardCache = function () { return cache; }; return cache; }
@@ -24,7 +26,8 @@ const StyledSwitchSlider = _styledComponents.default.span`
   disabled,
   size,
   error,
-  warning
+  warning,
+  theme
 }) => (0, _styledComponents.css)`
     display: flex;
     font-size: 12px;
@@ -38,7 +41,7 @@ const StyledSwitchSlider = _styledComponents.default.span`
     width: 64px;
     min-width: fit-content;
     z-index: 2;
-    border-radius: var(--borderRadius400);
+    border-radius: ${theme !== null && theme !== void 0 && theme.roundedCornersOptOut ? "90px" : "var(--borderRadius400)"};
     border-style: solid;
     border-color: var(--colorsActionMinor400);
     border-width: var(--borderWidth200);
@@ -92,6 +95,7 @@ const StyledSwitchSlider = _styledComponents.default.span`
     `}
 
     ${size === "large" && (0, _styledComponents.css)`
+      ${theme !== null && theme !== void 0 && theme.roundedCornersOptOut ? "border-radius: 30px;" : ""}
       &::before {
         height: 32px;
         width: 32px;
@@ -123,5 +127,8 @@ const StyledSwitchSlider = _styledComponents.default.span`
     }
   `}
 `;
+StyledSwitchSlider.defaultProps = {
+  theme: _base.default
+};
 var _default = StyledSwitchSlider;
 exports.default = _default;

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

@@ -1,9 +1,10 @@
 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, never>;
+declare const CarbonScopedTokensProvider: import("styled-components").StyledComponent<"div", any, ThemeObject & Pick<CarbonProviderProps, "roundedCornersOptOut">, never>;
 export default CarbonScopedTokensProvider;

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

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

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

@@ -1,5 +1,5 @@
 import { ThemeObject } from "../themes/base";
-declare const _default: (theme: ThemeObject | Record<string, string>) => string;
+declare const _default: (theme: ThemeObject | Record<string, string>, roundedCornersOptOupt?: boolean | undefined) => string;
 /**
  *
  * Converts theme properties to the string in form of css variable definitions.

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

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

package/package.json

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