carbon-react 118.3.3 → 118.4.1

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

@@ -3,7 +3,7 @@ function _extends() { _extends = Object.assign || function (target) { for (var i
 import React, { useCallback, useEffect, useRef, useState, useContext } from "react";
 import PropTypes from "prop-types";
 import invariant from "invariant";
-import { MenuItemIcon, SubMenuItemIcon, StyledMenuItem } from "../action-popover.style";
+import { MenuItemIcon, SubMenuItemIcon, StyledMenuItem, StyledMenuItemWrapper } from "../action-popover.style";
 import Events from "../../../__internal__/utils/helpers/events";
 import createGuid from "../../../__internal__/utils/helpers/guid";
 import ActionPopoverContext from "../action-popover-context";
@@ -172,7 +172,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.isEnterKey(e)) {
@@ -180,6 +181,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);
@@ -194,20 +210,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 = () => {
@@ -217,13 +221,15 @@ const ActionPopoverItem = ({
     });
   };
 
-  return /*#__PURE__*/React.createElement(StyledMenuItem, _extends({}, rest, {
+  return /*#__PURE__*/React.createElement(StyledMenuItemWrapper, submenu && wrapperDivProps, /*#__PURE__*/React.createElement("div", {
+    onKeyDown: onKeyDown,
+    role: "presentation"
+  }, /*#__PURE__*/React.createElement(StyledMenuItem, _extends({}, rest, {
     ref: ref,
     onClick: onClick,
-    onKeyDown: onKeyDown,
     type: "button",
-    tabIndex: 0,
     role: "menuitem",
+    tabIndex: 0,
     isDisabled: disabled,
     horizontalAlignment: horizontalAlignment
   }, disabled && {
@@ -232,7 +238,11 @@ const ActionPopoverItem = ({
     as: "a",
     download,
     href
-  }, submenu && itemSubmenuProps), /*#__PURE__*/React.isValidElement(submenu) ? /*#__PURE__*/React.cloneElement(submenu, {
+  }, submenu && itemSubmenuProps), submenu && checkRef(ref) && isLeftAligned ? /*#__PURE__*/React.createElement(SubMenuItemIcon, {
+    type: "chevron_left"
+  }) : null, horizontalAlignment === "left" ? renderMenuItemIcon() : null, children, horizontalAlignment === "right" ? renderMenuItemIcon() : null, submenu && checkRef(ref) && !isLeftAligned ? /*#__PURE__*/React.createElement(SubMenuItemIcon, {
+    type: "chevron_right"
+  }) : null), /*#__PURE__*/React.isValidElement(submenu) ? /*#__PURE__*/React.cloneElement(submenu, {
     parentID: `ActionPopoverItem_${guid}`,
     menuID: `ActionPopoverMenu_${guid}`,
     "data-element": "action-popover-submenu",
@@ -242,11 +252,7 @@ const ActionPopoverItem = ({
     setOpen,
     setFocusIndex,
     focusIndex
-  }) : null, submenu && checkRef(ref) && isLeftAligned ? /*#__PURE__*/React.createElement(SubMenuItemIcon, {
-    type: "chevron_left"
-  }) : null, horizontalAlignment === "left" ? renderMenuItemIcon() : null, children, horizontalAlignment === "right" ? renderMenuItemIcon() : null, submenu && checkRef(ref) && !isLeftAligned ? /*#__PURE__*/React.createElement(SubMenuItemIcon, {
-    type: "chevron_right"
-  }) : null);
+  }) : null));
 };
 
 ActionPopoverItem.propTypes = {

package/esm/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/esm/components/action-popover/action-popover.style.js

@@ -16,7 +16,11 @@ const Menu = styled.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
 `;
 const StyledMenuItem = styled.button`
   text-decoration: none;
@@ -69,6 +73,9 @@ const StyledMenuItem = styled.button`
       }
     `}
 `;
+const StyledMenuItemWrapper = styled.div`
+  position: relative;
+`;
 const MenuItemDivider = styled.div.attrs({
   "data-element": "action-popover-divider"
 })`
@@ -135,4 +142,4 @@ const MenuButtonOverrideWrapper = styled.div`
     }
   }
 `;
-export { Menu, MenuButton, ButtonIcon, StyledButtonIcon, MenuItemIcon, MenuItemDivider, SubMenuItemIcon, MenuButtonOverrideWrapper, StyledMenuItem };
+export { Menu, MenuButton, ButtonIcon, StyledButtonIcon, MenuItemIcon, MenuItemDivider, SubMenuItemIcon, MenuButtonOverrideWrapper, StyledMenuItem, StyledMenuItemWrapper };

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"));