carbon-react 118.3.3 → 118.4.1

package/lib/components/action-popover/action-popover-item/action-popover-item.component.js

@@ -194,7 +194,8 @@ const ActionPopoverItem = ({
           (_ref$current5 = ref.current) === null || _ref$current5 === void 0 ? void 0 : _ref$current5.click();
         }
 
-        e.preventDefault();
+        e.preventDefault(); // this type assertion should be safe as the onclick handler is designed to catch events propagating from the inner buttons
+
         onClick(e);
       }
     } else if (_events.default.isEnterKey(e)) {
@@ -202,6 +203,21 @@ const ActionPopoverItem = ({
     }
   }, [disabled, download, isHref, isLeftAligned, onClick, submenu]);
   const itemSubmenuProps = { ...(!disabled && {
+      onClick: e => {
+        var _ref$current6;
+
+        setOpen(true);
+        (_ref$current6 = ref.current) === null || _ref$current6 === void 0 ? void 0 : _ref$current6.focus();
+        e.preventDefault();
+        e.stopPropagation();
+      }
+    }),
+    "aria-haspopup": "true",
+    "aria-label": l.actionPopover.ariaLabel(),
+    "aria-controls": `ActionPopoverMenu_${guid}`,
+    "aria-expanded": isOpen
+  };
+  const wrapperDivProps = { ...(!disabled && {
       onMouseEnter: e => {
         if (mouseEnterTimer.current) clearTimeout(mouseEnterTimer.current);
         setFocusIndex(-1);
@@ -216,20 +232,8 @@ const ActionPopoverItem = ({
           setOpen(false);
         }, INTERVAL);
         e.stopPropagation();
-      },
-      onClick: e => {
-        var _ref$current6;
-
-        setOpen(true);
-        (_ref$current6 = ref.current) === null || _ref$current6 === void 0 ? void 0 : _ref$current6.focus();
-        e.preventDefault();
-        e.stopPropagation();
       }
-    }),
-    "aria-haspopup": "true",
-    "aria-label": l.actionPopover.ariaLabel(),
-    "aria-controls": `ActionPopoverMenu_${guid}`,
-    "aria-expanded": isOpen
+    })
   };
 
   const renderMenuItemIcon = () => {
@@ -239,13 +243,15 @@ const ActionPopoverItem = ({
     });
   };
 
-  return /*#__PURE__*/_react.default.createElement(_actionPopover.StyledMenuItem, _extends({}, rest, {
+  return /*#__PURE__*/_react.default.createElement(_actionPopover.StyledMenuItemWrapper, submenu && wrapperDivProps, /*#__PURE__*/_react.default.createElement("div", {
+    onKeyDown: onKeyDown,
+    role: "presentation"
+  }, /*#__PURE__*/_react.default.createElement(_actionPopover.StyledMenuItem, _extends({}, rest, {
     ref: ref,
     onClick: onClick,
-    onKeyDown: onKeyDown,
     type: "button",
-    tabIndex: 0,
     role: "menuitem",
+    tabIndex: 0,
     isDisabled: disabled,
     horizontalAlignment: horizontalAlignment
   }, disabled && {
@@ -254,7 +260,11 @@ const ActionPopoverItem = ({
     as: "a",
     download,
     href
-  }, submenu && itemSubmenuProps), /*#__PURE__*/_react.default.isValidElement(submenu) ? /*#__PURE__*/_react.default.cloneElement(submenu, {
+  }, submenu && itemSubmenuProps), submenu && checkRef(ref) && isLeftAligned ? /*#__PURE__*/_react.default.createElement(_actionPopover.SubMenuItemIcon, {
+    type: "chevron_left"
+  }) : null, horizontalAlignment === "left" ? renderMenuItemIcon() : null, children, horizontalAlignment === "right" ? renderMenuItemIcon() : null, submenu && checkRef(ref) && !isLeftAligned ? /*#__PURE__*/_react.default.createElement(_actionPopover.SubMenuItemIcon, {
+    type: "chevron_right"
+  }) : null), /*#__PURE__*/_react.default.isValidElement(submenu) ? /*#__PURE__*/_react.default.cloneElement(submenu, {
     parentID: `ActionPopoverItem_${guid}`,
     menuID: `ActionPopoverMenu_${guid}`,
     "data-element": "action-popover-submenu",
@@ -264,11 +274,7 @@ const ActionPopoverItem = ({
     setOpen,
     setFocusIndex,
     focusIndex
-  }) : null, submenu && checkRef(ref) && isLeftAligned ? /*#__PURE__*/_react.default.createElement(_actionPopover.SubMenuItemIcon, {
-    type: "chevron_left"
-  }) : null, horizontalAlignment === "left" ? renderMenuItemIcon() : null, children, horizontalAlignment === "right" ? renderMenuItemIcon() : null, submenu && checkRef(ref) && !isLeftAligned ? /*#__PURE__*/_react.default.createElement(_actionPopover.SubMenuItemIcon, {
-    type: "chevron_right"
-  }) : null);
+  }) : null));
 };
 
 exports.ActionPopoverItem = ActionPopoverItem;

package/lib/components/action-popover/action-popover.style.d.ts

@@ -7,6 +7,7 @@ declare type StyledMenuItemProps = {
     horizontalAlignment: "left" | "right";
 };
 declare const StyledMenuItem: import("styled-components").StyledComponent<"button", any, StyledMenuItemProps, never>;
+declare const StyledMenuItemWrapper: import("styled-components").StyledComponent<"div", any, {}, never>;
 declare const MenuItemDivider: import("styled-components").StyledComponent<"div", any, {
     "data-element": string;
 }, "data-element">;
@@ -16,4 +17,4 @@ declare const StyledButtonIcon: import("styled-components").StyledComponent<"div
 declare const MenuItemIcon: import("styled-components").StyledComponent<import("react").ForwardRefExoticComponent<import("../icon").IconProps & import("react").RefAttributes<HTMLSpanElement>>, any, {}, never>;
 declare const SubMenuItemIcon: import("styled-components").StyledComponent<import("react").ForwardRefExoticComponent<import("../icon").IconProps & import("react").RefAttributes<HTMLSpanElement>>, any, {}, never>;
 declare const MenuButtonOverrideWrapper: import("styled-components").StyledComponent<"div", any, {}, never>;
-export { Menu, MenuButton, ButtonIcon, StyledButtonIcon, MenuItemIcon, MenuItemDivider, SubMenuItemIcon, MenuButtonOverrideWrapper, StyledMenuItem, };
+export { Menu, MenuButton, ButtonIcon, StyledButtonIcon, MenuItemIcon, MenuItemDivider, SubMenuItemIcon, MenuButtonOverrideWrapper, StyledMenuItem, StyledMenuItemWrapper, };

package/lib/components/action-popover/action-popover.style.js

@@ -3,7 +3,7 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.StyledMenuItem = exports.MenuButtonOverrideWrapper = exports.SubMenuItemIcon = exports.MenuItemDivider = exports.MenuItemIcon = exports.StyledButtonIcon = exports.ButtonIcon = exports.MenuButton = exports.Menu = void 0;
+exports.StyledMenuItemWrapper = exports.StyledMenuItem = exports.MenuButtonOverrideWrapper = exports.SubMenuItemIcon = exports.MenuItemDivider = exports.MenuItemIcon = exports.StyledButtonIcon = exports.ButtonIcon = exports.MenuButton = exports.Menu = void 0;
 
 var _styledComponents = _interopRequireWildcard(require("styled-components"));
 
@@ -35,7 +35,11 @@ const Menu = _styledComponents.default.div`
   background-color: var(--colorsUtilityYang100);
   z-index: ${({
   theme
-}) => `${theme.zIndex.popover}`}; // TODO (tokens): implement elevation tokens - FE-4437
+}) => {
+  var _theme$zIndex;
+
+  return `${(_theme$zIndex = theme.zIndex) === null || _theme$zIndex === void 0 ? void 0 : _theme$zIndex.popover}`;
+}}; // TODO (tokens): implement elevation tokens - FE-4437
 `;
 exports.Menu = Menu;
 const StyledMenuItem = _styledComponents.default.button`
@@ -90,6 +94,10 @@ const StyledMenuItem = _styledComponents.default.button`
     `}
 `;
 exports.StyledMenuItem = StyledMenuItem;
+const StyledMenuItemWrapper = _styledComponents.default.div`
+  position: relative;
+`;
+exports.StyledMenuItemWrapper = StyledMenuItemWrapper;
 const MenuItemDivider = _styledComponents.default.div.attrs({
   "data-element": "action-popover-divider"
 })`

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