carbon-react 144.22.1 → 146.0.0

package/esm/components/text-editor/__internal__/toolbar/toolbar-button/toolbar-button.style.js

@@ -14,23 +14,13 @@ const StyledToolbarButton = styled.button.attrs({
   cursor: pointer;
 
   ${({
-  isActive,
-  theme
+  isActive
 }) => css`
     :focus,
     :active {
       z-index: 1;
       position: relative;
-
-      ${theme.focusRedesignOptOut && /* istanbul ignore next */
-css`
-        outline: 2px solid var(--colorsSemanticFocus500);
-        outline-offset: -2px;
-      `}
-
-      ${!theme.focusRedesignOptOut && css`
-        ${addFocusStyling()}
-      `}
+      ${addFocusStyling()}
     }
 
     :hover {

package/esm/components/text-editor/text-editor.style.js

@@ -57,17 +57,13 @@ const StyledEditorContainer = styled.div`
 const StyledEditorOutline = styled.div`
   ${({
   isFocused,
-  hasError,
-  theme
+  hasError
 }) => css`
     border-radius: var(--borderRadius050);
     outline: none;
 
     ${isFocused && css`
-      ${!theme.focusRedesignOptOut ? addFocusStyling() : `
-        outline: 3px solid var(--colorsSemanticFocus500);
-        outline-offset: ${hasError ? "2px" : "1px"};
-      `}
+      ${addFocusStyling()}
     `}
   `}
 `;

package/esm/components/tile-select/tile-select.style.js

@@ -55,14 +55,10 @@ const StyledTileSelect = styled.div`
       }
     `}
 `;
-const oldFocusStyling = `
-  outline: solid 3px var(--colorsSemanticFocus500);
-`;
 const StyledFocusWrapper = styled.div`
   ${({
   checked,
-  hasFocus,
-  theme
+  hasFocus
 }) => css`
     position: relative;
     border: 1px solid var(--colorsActionMinor250);
@@ -75,7 +71,7 @@ const StyledFocusWrapper = styled.div`
     `}
 
     ${hasFocus && css`
-      ${!theme.focusRedesignOptOut ? addFocusStyling() : /* istanbul ignore next */oldFocusStyling}
+      ${addFocusStyling()}
       z-index: 15;
     `}
   `}

package/esm/components/vertical-menu/vertical-menu.style.js

@@ -10,10 +10,6 @@ export const StyledList = styled.ul`
   margin: 0;
   padding: 0;
 `;
-const oldFocusStyling = `
-  outline: 3px solid var(--colorsSemanticFocus500);
-  outline-offset: -3px;
-`;
 export const StyledVerticalMenuItem = styled.div`
   min-height: ${({
   height
@@ -38,9 +34,7 @@ export const StyledVerticalMenuItem = styled.div`
   }
 
   &:focus {
-    ${({
-  theme
-}) => !theme.focusRedesignOptOut ? addFocusStyling(true) : /* istanbul ignore next */oldFocusStyling}
+    ${addFocusStyling(true)}
   }
 
   ${({

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/__internal__/input/input-presentation.style.js

@@ -11,9 +11,6 @@ var _addFocusStyling = _interopRequireDefault(require("../../style/utils/add-foc
 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; }
-const oldFocusStyling = `
-  outline: solid 3px var(--colorsSemanticFocus500);
-`;
 const StyledInputPresentationContainer = exports.StyledInputPresentationContainer = _styledComponents.default.div`
   flex: 0 0 ${({
   inputWidth
@@ -96,11 +93,10 @@ const InputPresentationStyle = _styledComponents.default.div`
     `}
 
     ${({
-  hasFocus,
-  theme
+  hasFocus
 }) => hasFocus && (0, _styledComponents.css)`
       & {
-        ${!theme.focusRedesignOptOut ? (0, _addFocusStyling.default)() : /* istanbul ignore next */oldFocusStyling}
+        ${(0, _addFocusStyling.default)()}
         z-index: 2;
       }
     `}

package/lib/__internal__/input-icon-toggle/input-icon-toggle.style.js

@@ -10,9 +10,6 @@ var _addFocusStyling = _interopRequireDefault(require("../../style/utils/add-foc
 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; }
-const oldFocusStyling = `
-  outline: solid 3px var(--colorsSemanticFocus500);
-`;
 const InputIconToggleStyle = _styledComponents.default.span.attrs(({
   onClick
 }) => ({
@@ -47,12 +44,8 @@ const InputIconToggleStyle = _styledComponents.default.span.attrs(({
       cursor: default;
     `}
 
-  ${({
-  theme
-}) => `
     &:focus {
-      ${!theme.focusRedesignOptOut ? (0, _addFocusStyling.default)() : /* istanbul ignore next */oldFocusStyling}
-    }  
-  `}
+    ${(0, _addFocusStyling.default)()}
+  }
 `;
 var _default = exports.default = InputIconToggleStyle;

package/lib/__internal__/validations/validation-icon.style.js

@@ -17,9 +17,6 @@ const validationIconTypes = {
   info: "var(--colorsSemanticInfo500)",
   warning: "var(--colorsSemanticCaution500)"
 };
-const oldFocusStyling = `
-  outline: solid 2px var(--colorsSemanticFocus500);
-`;
 const ValidationIconStyle = _styledComponents.default.span`
   background: none;
   cursor: default;
@@ -43,9 +40,7 @@ const ValidationIconStyle = _styledComponents.default.span`
   }
 
   ${_icon.default}:focus {
-    ${({
-  theme
-}) => !theme.focusRedesignOptOut ? (0, _addFocusStyling.default)() : /* istanbul ignore next */oldFocusStyling}
+    ${(0, _addFocusStyling.default)()}
   }
 
   ${_styledSystem.margin}

package/lib/components/accordion/accordion.style.js

@@ -111,9 +111,6 @@ const StyledAccordionHeadingsContainer = exports.StyledAccordionHeadingsContaine
       }
     `}
 `;
-const oldFocusStyling = `
-  outline: solid 3px var(--colorsSemanticFocus500);
-`;
 const StyledAccordionTitleContainer = exports.StyledAccordionTitleContainer = _styledComponents.default.div`
   ${({
   buttonHeading,
@@ -121,7 +118,6 @@ const StyledAccordionTitleContainer = exports.StyledAccordionTitleContainer = _s
   iconAlign,
   size,
   hasButtonProps,
-  theme,
   isExpanded,
   variant
 }) => (0, _styledComponents.css)`
@@ -140,7 +136,7 @@ const StyledAccordionTitleContainer = exports.StyledAccordionTitleContainer = _s
     z-index: 1;
 
     &:focus {
-      ${!theme.focusRedesignOptOut ? (0, _addFocusStyling.default)() : /* istanbul ignore next */oldFocusStyling}
+      ${(0, _addFocusStyling.default)()}
     }
 
     ${variant === "subtle" && (0, _styledComponents.css)`

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

@@ -14,9 +14,6 @@ var _base = _interopRequireDefault(require("../../style/themes/base"));
 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; }
-const oldFocusStyling = `
-  outline: solid 3px var(--colorsSemanticFocus500);
-`;
 const Menu = exports.Menu = _styledComponents.default.ul`
   ${({
   isOpen
@@ -128,9 +125,7 @@ const StyledMenuItem = exports.StyledMenuItem = _styledComponents.default.button
   font-weight: 500;
 
   &:focus {
-    ${({
-  theme
-}) => `${!theme.focusRedesignOptOut ? (0, _addFocusStyling.default)() : /* istanbul ignore next */oldFocusStyling}`}
+    ${(0, _addFocusStyling.default)()}
     z-index: 1;
     border-radius: var(--borderRadius000);
   }
@@ -197,13 +192,9 @@ const ButtonIcon = exports.ButtonIcon = (0, _styledComponents.default)(_icon.def
   }
 `;
 const StyledButtonIcon = exports.StyledButtonIcon = _styledComponents.default.div`
-  ${({
-  theme
-}) => `
-    &:focus {
-      ${!theme.focusRedesignOptOut ? (0, _addFocusStyling.default)() : /* istanbul ignore next */oldFocusStyling}
-    }    
-  `}
+  &:focus {
+    ${(0, _addFocusStyling.default)()}
+  }
   border-radius: var(--borderRadius050);
 `;
 const MenuItemIcon = exports.MenuItemIcon = (0, _styledComponents.default)(_icon.default)`

package/lib/components/advanced-color-picker/advanced-color-picker-cell.style.js

@@ -11,9 +11,6 @@ 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; }
 const transparentSvg = "%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%" + "2Fsvg%22%20width%3D%22400%22%20height%3D%22400%22%20fill-opacity%3D%22." + "45%22%3E%3Crect%20x%3D%22200%22%20width%3D%22200%22%20height%3D%22200%22%20%2" + "F%3E%3Crect%20y%3D%22200%22%20width%3D%22200%22%20height%3D%22200%22%20%2F%3E%3C%2Fsvg%3E";
-const oldFocusStyling = `
-  outline: solid 3px var(--colorsSemanticFocus500);
-`;
 const StyledAdvancedColorPickerCell = _styledComponents.default.button.attrs({
   type: "button"
 })`
@@ -40,11 +37,7 @@ const StyledAdvancedColorPickerCell = _styledComponents.default.button.attrs({
   }
 
   &:focus {
-    ${({
-  theme
-}) => `
-      ${!theme.focusRedesignOptOut ? (0, _addFocusStyling.default)() : /* istanbul ignore next */oldFocusStyling}
-    `}
+    ${(0, _addFocusStyling.default)()}
   }
 
   &::-moz-focus-inner {

package/lib/components/anchor-navigation/anchor-navigation-item/anchor-navigation-item.style.js

@@ -9,9 +9,6 @@ var _addFocusStyling = _interopRequireDefault(require("../../../style/utils/add-
 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; }
-const oldFocusStyling = `
-  outline: solid 3px var(--colorsSemanticFocus500);
-`;
 const StyledNavigationItem = _styledComponents.default.li`
   width: 100%;
 
@@ -28,9 +25,7 @@ const StyledNavigationItem = _styledComponents.default.li`
     border-bottom-right-radius: var(--borderRadius100);
 
     &:focus {
-      ${({
-  theme
-}) => `${!theme.focusRedesignOptOut ? (0, _addFocusStyling.default)() : /* istanbul ignore next */oldFocusStyling}`}
+      ${(0, _addFocusStyling.default)()}
       position: relative;
     }
 

package/lib/components/batch-selection/batch-selection.style.js

@@ -11,9 +11,6 @@ var _addFocusStyling = _interopRequireDefault(require("../../style/utils/add-foc
 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; }
-const oldFocusStyling = `
-  outline: solid 3px var(--colorsSemanticFocus500);
-`;
 const StyledBatchSelection = exports.StyledBatchSelection = _styledComponents.default.div`
   ${({
   disabled,
@@ -29,9 +26,7 @@ const StyledBatchSelection = exports.StyledBatchSelection = _styledComponents.de
     ${_icon.default} {
       ${!disabled && `color: var(--colorsActionMajorYin065);`}
       &:focus {
-        ${({
-  theme
-}) => `${!theme.focusRedesignOptOut ? (0, _addFocusStyling.default)() : /* istanbul ignore next */oldFocusStyling}`}
+        ${(0, _addFocusStyling.default)()}
       }
     }
 
@@ -73,9 +68,7 @@ const StyledBatchSelection = exports.StyledBatchSelection = _styledComponents.de
     ${_iconButton.default}:focus {
       border-radius: var(--borderRadius100);
       z-index: 1;
-      ${({
-  theme
-}) => `${!theme.focusRedesignOptOut ? (0, _addFocusStyling.default)() : /* istanbul ignore next */oldFocusStyling}`}
+      ${(0, _addFocusStyling.default)()}
     }
 
     ${disabled && (0, _styledComponents.css)`

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/button/button.style.js

@@ -62,13 +62,11 @@ function stylingForType({
     ${iconOnly && stylingForIconOnly(size)}
   `;
 }
-const oldFocusStyling = "outline: solid 3px var(--colorsSemanticFocus500);";
 const StyledButton = _styledComponents.default.button`
   ${_styledSystem.space}
   ${({
   disabled,
-  noWrap,
-  theme
+  noWrap
 }) => (0, _styledComponents.css)`
     align-items: center;
     cursor: ${disabled ? "not-allowed" : "pointer"};
@@ -84,7 +82,7 @@ const StyledButton = _styledComponents.default.button`
     border-radius: var(--borderRadius400);
 
     &:focus {
-      ${!theme.focusRedesignOptOut ? (0, _addFocusStyling.default)() : /* istanbul ignore next */oldFocusStyling}
+      ${(0, _addFocusStyling.default)()}
     }
 
     ${stylingForType}

package/lib/components/button-toggle/button-toggle.style.js

@@ -44,9 +44,6 @@ const StyledButtonToggleContentWrapper = exports.StyledButtonToggleContentWrappe
   height: 100%;
   flex-flow: wrap;
 `;
-const oldFocusStyling = `
-  outline: solid 3px var(--colorsSemanticFocus500);
-`;
 const StyledButtonToggle = exports.StyledButtonToggle = _styledComponents.default.button`
   display: inline-flex;
   justify-content: center;
@@ -87,9 +84,7 @@ const StyledButtonToggle = exports.StyledButtonToggle = _styledComponents.defaul
     `}  
     
   &:focus {
-    ${({
-  theme
-}) => `${!theme.focusRedesignOptOut ? (0, _addFocusStyling.default)() : /* istanbul ignore next */oldFocusStyling}`}
+    ${(0, _addFocusStyling.default)()}
     z-index: 100;
   }
 

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

@@ -4,14 +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. */
-    focusRedesignOptOut?: boolean;
 }
 declare const _default: React.Context<NewValidationContextProps>;
 export default _default;

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, }: CarbonProviderProps) => React.JSX.Element;
 export default CarbonProvider;

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

@@ -4,52 +4,24 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = exports.CarbonProvider = void 0;
-var _react = _interopRequireWildcard(require("react"));
+var _react = _interopRequireDefault(require("react"));
 var _propTypes = _interopRequireDefault(require("prop-types"));
 var _styledComponents = require("styled-components");
 var _carbonScopedTokensProvider = _interopRequireDefault(require("../../style/design-tokens/carbon-scoped-tokens-provider"));
 var _themes = require("../../style/themes");
 var _newValidation = _interopRequireDefault(require("./__internal__/new-validation.context"));
 var _topModalProvider = _interopRequireDefault(require("./__internal__/top-modal-provider.component"));
-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. ");
+  validationRedesignOptIn = false
+}) => /*#__PURE__*/_react.default.createElement(_styledComponents.ThemeProvider, {
+  theme: theme
+}, /*#__PURE__*/_react.default.createElement(_carbonScopedTokensProvider.default, null, /*#__PURE__*/_react.default.createElement(_newValidation.default.Provider, {
+  value: {
+    validationRedesignOptIn
   }
-  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. ");
-  }
-  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
-    }
-  }, /*#__PURE__*/_react.default.createElement(_topModalProvider.default, null, children))));
-};
+}, /*#__PURE__*/_react.default.createElement(_topModalProvider.default, null, children))));
 exports.CarbonProvider = CarbonProvider;
 var _default = exports.default = CarbonProvider;

package/lib/components/card/card.style.js

@@ -85,20 +85,17 @@ const StyledCardContent = exports.StyledCardContent = _styledComponents.default.
   return {};
 })`
   ${({
-  interactive,
-  theme
+  interactive
 }) => interactive && (0, _styledComponents.css)`
       cursor: pointer;
       display: inline-flex;
       flex-direction: column;
       height: 100%;
 
-      ${!theme.focusRedesignOptOut && (0, _styledComponents.css)`
-        :focus {
-          ${(0, _addFocusStyling.default)()};
-          position: relative;
-        }
-      `}
+      :focus {
+        ${(0, _addFocusStyling.default)()};
+        position: relative;
+      }
     `}
 
   align-items: stretch;

package/lib/components/checkbox/checkbox.style.js

@@ -17,9 +17,6 @@ var _addFocusStyling = _interopRequireDefault(require("../../style/utils/add-foc
 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; }
-const oldFocusStyling = `
-box-shadow: 0 0 0 3px var(--colorsSemanticFocus500);
-`;
 const StyledCheckbox = _styledComponents.default.div`
   ${_styledSystem.margin}
   ${({
@@ -78,14 +75,10 @@ const StyledCheckbox = _styledComponents.default.div`
 
     // prettier-ignore
     ${_hiddenCheckableInput.default}:not([disabled]) {
-      ${({
-  theme
-}) => `
         &:focus + ${_checkableInputSvgWrapper.default} ,
         &:hover + ${_checkableInputSvgWrapper.default} {
-          ${!theme.focusRedesignOptOut ? (0, _addFocusStyling.default)() : /* istanbul ignore next */oldFocusStyling}
-        }
-      `}
+          ${(0, _addFocusStyling.default)()}
+      }
     }
 
     ${_label.StyledLabelContainer} {

package/lib/components/date/__internal__/date-picker/day-picker.style.js

@@ -10,9 +10,6 @@ var _addFocusStyling = _interopRequireDefault(require("../../../../style/utils/a
 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; }
-const oldFocusStyling = `
-  outline: solid 3px var(--colorsSemanticFocus500);
-`;
 const officialReactDayPickerStyling = () => (0, _styledComponents.css)`
   /* Variables declaration */
   /* prettier-ignore */
@@ -458,22 +455,14 @@ const StyledDayPicker = _styledComponents.default.div`
   }
 
   .rdp-focused:not(.rdp-disabled):not(.rdp-outside) {
-    ${({
-  theme
-}) => (0, _styledComponents.css)`
-      ${!theme.focusRedesignOptOut ? (0, _addFocusStyling.default)(true) : /* istanbul ignore next */oldFocusStyling}
-    `}
+    ${(0, _addFocusStyling.default)(true)}
     border-radius: var(--borderRadius400);
   }
 
   .rdp-day.rdp-selected {
-    ${({
-  theme
-}) => (0, _styledComponents.css)`
-      &:focus {
-        ${!theme.focusRedesignOptOut ? (0, _addFocusStyling.default)(true) : /* istanbul ignore next */oldFocusStyling}
-      }
-    `}
+    &:focus {
+      ${(0, _addFocusStyling.default)(true)}
+    }
   }
 `;
 StyledDayPicker.defaultProps = {

package/lib/components/date/__internal__/navbar/button.style.js

@@ -8,9 +8,6 @@ var _styledComponents = _interopRequireDefault(require("styled-components"));
 var _addFocusStyling = _interopRequireDefault(require("../../../../style/utils/add-focus-styling"));
 var _themes = require("../../../../style/themes");
 function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
-const oldFocusStyling = `
-  outline: solid 3px var(--colorsSemanticFocus500);
-`;
 const StyledButton = _styledComponents.default.button.attrs({
   type: "button"
 })`
@@ -27,13 +24,9 @@ const StyledButton = _styledComponents.default.button.attrs({
   box-sizing: border-box;
   border-radius: var(--borderRadius050);
 
-  ${({
-  theme
-}) => `
-    &:focus {
-      ${!theme.focusRedesignOptOut ? (0, _addFocusStyling.default)() : /* istanbul ignore next */oldFocusStyling}
-    }
-  `}
+  &:focus {
+    ${(0, _addFocusStyling.default)()}
+  }
 `;
 StyledButton.defaultProps = {
   theme: _themes.baseTheme

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 */