carbon-react 138.2.2 → 140.0.0

package/esm/__internal__/fieldset/fieldset.component.js

@@ -3,7 +3,7 @@ import React, { useContext, useEffect, useState } from "react";
 import PropTypes from "prop-types";
 import { StyledFieldset, StyledLegend, StyledLegendContent } from "./fieldset.style";
 import ValidationIcon from "../validations/validation-icon.component";
-import { NewValidationContext } from "../../components/carbon-provider/carbon-provider.component";
+import NewValidationContext from "../../components/carbon-provider/__internal__/new-validation.context";
 import { InputGroupBehaviour, InputGroupContext } from "../input-behaviour";
 import useFormSpacing from "../../hooks/__internal__/useFormSpacing";
 const Fieldset = ({

package/esm/__internal__/focus-trap/focus-trap.component.js

@@ -1,9 +1,9 @@
 import React, { useCallback, useContext, useEffect, useMemo, useRef, useState } from "react";
 import PropTypes from "prop-types";
 import { defaultFocusableSelectors, setElementFocus, onTabGuardFocus, trapFunction } from "./focus-trap-utils";
-import { ModalContext } from "../../components/modal/modal.component";
+import ModalContext from "../../components/modal/__internal__/modal.context";
 import usePrevious from "../../hooks/__internal__/usePrevious";
-import TopModalContext from "../../components/carbon-provider/top-modal-context";
+import TopModalContext from "../../components/carbon-provider/__internal__/top-modal.context";
 export const TAB_GUARD_TOP = "tab-guard-top";
 export const TAB_GUARD_BOTTOM = "tab-guard-bottom";
 

package/esm/__internal__/form-field/form-field.component.js

@@ -6,7 +6,7 @@ import FormFieldStyle, { FieldLineStyle } from "./form-field.style";
 import Label from "../label";
 import FieldHelp from "../field-help";
 import tagComponent from "../utils/helpers/tags/tags";
-import { TabContext } from "../../components/tabs/tab";
+import TabContext from "../../components/tabs/tab/__internal__/tab.context";
 import useIsAboveBreakpoint from "../../hooks/__internal__/useIsAboveBreakpoint";
 import useFormSpacing from "../../hooks/__internal__/useFormSpacing";
 const FormField = ({

package/esm/__internal__/form-spacing-provider/form-spacing-provider.component.d.ts

@@ -1,5 +1,5 @@
 import React from "react";
-import { FormSpacingContextProps } from "./form-spacing-context";
+import { FormSpacingContextProps } from "./form-spacing.context";
 interface FormSpacingProviderProps extends FormSpacingContextProps {
     children: React.ReactNode;
 }

package/esm/__internal__/form-spacing-provider/form-spacing-provider.component.js

@@ -1,6 +1,6 @@
 import React from "react";
 import PropTypes from "prop-types";
-import { FormSpacingContext } from "./form-spacing-context";
+import { FormSpacingContext } from "./form-spacing.context";
 const FormSpacingProvider = ({
   marginBottom,
   children

package/esm/__internal__/form-spacing-provider/index.d.ts

@@ -1,3 +1,3 @@
-export { FormSpacingContext } from "./form-spacing-context";
-export type { FormSpacingContextProps } from "./form-spacing-context";
+export { FormSpacingContext } from "./form-spacing.context";
+export type { FormSpacingContextProps } from "./form-spacing.context";
 export { default } from "./form-spacing-provider.component";

package/esm/__internal__/form-spacing-provider/index.js

@@ -1,2 +1,2 @@
-export { FormSpacingContext } from "./form-spacing-context";
+export { FormSpacingContext } from "./form-spacing.context";
 export { default } from "./form-spacing-provider.component";

package/esm/__internal__/input/input-presentation.component.js

@@ -2,7 +2,7 @@ import React, { useContext } from "react";
 import PropTypes from "prop-types";
 import InputPresentationStyle, { StyledInputPresentationContainer } from "./input-presentation.style";
 import { InputContext, InputGroupContext } from "../input-behaviour";
-import { NewValidationContext } from "../../components/carbon-provider/carbon-provider.component";
+import NewValidationContext from "../../components/carbon-provider/__internal__/new-validation.context";
 const InputPresentation = ({
   align,
   borderRadius = "borderRadius050",

package/esm/__internal__/input/input.component.js

@@ -3,7 +3,7 @@ import React, { useEffect, useContext, useRef, useCallback } from "react";
 import PropTypes from "prop-types";
 import StyledInput from "./input.style";
 import { InputContext, InputGroupContext } from "../input-behaviour";
-import { SelectTextboxContext } from "../../components/select/select-textbox/select-textbox-context";
+import { SelectTextboxContext } from "../../components/select/__internal__/select-textbox/select-textbox.context";
 function selectTextOnFocus(input) {
   // setTimeout is required so the dom has a chance to place the cursor in the input
   setTimeout(() => {

package/esm/__internal__/popover/popover.component.js

@@ -5,7 +5,7 @@ import { flip } from "@floating-ui/dom";
 import useFloating from "../../hooks/__internal__/useFloating";
 import { StyledBackdrop, StyledPopoverContent } from "./popover.style";
 import CarbonScopedTokensProvider from "../../style/design-tokens/carbon-scoped-tokens-provider/carbon-scoped-tokens-provider.component";
-import { ModalContext } from "../../components/modal/modal.component";
+import ModalContext from "../../components/modal/__internal__/modal.context";
 const defaultMiddleware = [flip({
   fallbackStrategy: "initialPlacement"
 })];

package/esm/__internal__/utils/helpers/events/events.d.ts

@@ -17,7 +17,7 @@ declare const Events: {
     /**
      * Determines if event is a keyboard event
      */
-    isKeyboardEvent: (ev: React.SyntheticEvent | Event) => ev is KeyboardEvent | React.KeyboardEvent<Element>;
+    isKeyboardEvent: (ev: React.SyntheticEvent | Event) => ev is React.KeyboardEvent<Element> | KeyboardEvent;
     /**
      * Determines if a number key along the top of the keyboard or a number key on the
      * keypad is pressed

package/esm/components/action-popover/action-popover-item/action-popover-item.component.d.ts

@@ -1,5 +1,5 @@
 import React from "react";
-import { Alignment } from "../action-popover-context";
+import { Alignment } from "../__internal__/action-popover.context";
 import { IconType } from "../../icon";
 export interface ActionPopoverItemProps {
     /** The text label to display for this Item */

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

@@ -5,7 +5,7 @@ import invariant from "invariant";
 import { MenuItemIcon, SubMenuItemIcon, StyledMenuItem, StyledMenuItemInnerText, StyledMenuItemOuterContainer, 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";
+import ActionPopoverContext from "../__internal__/action-popover.context";
 import ActionPopoverMenu from "../action-popover-menu/action-popover-menu.component";
 const INTERVAL = 150;
 function checkRef(ref) {

package/esm/components/action-popover/action-popover-menu/action-popover-menu.component.d.ts

@@ -1,5 +1,5 @@
 import React from "react";
-import { Alignment } from "../action-popover-context";
+import { Alignment } from "../__internal__/action-popover.context";
 export interface ActionPopoverMenuBaseProps {
     /** Children for the menu */
     children?: React.ReactNode;

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

@@ -6,7 +6,7 @@ import { Menu } from "../action-popover.style";
 import Events from "../../../__internal__/utils/helpers/events";
 import ActionPopoverItem from "../action-popover-item/action-popover-item.component";
 import ActionPopoverDivider from "../action-popover-divider/action-popover-divider.component";
-import ActionPopoverContext from "../action-popover-context";
+import ActionPopoverContext from "../__internal__/action-popover.context";
 const ActionPopoverMenu = /*#__PURE__*/React.forwardRef(({
   children,
   parentID,

package/esm/components/action-popover/action-popover.component.d.ts

@@ -1,6 +1,6 @@
 import React from "react";
 import { MarginProps } from "styled-system";
-import { Alignment } from "./action-popover-context";
+import { Alignment } from "./__internal__/action-popover.context";
 export interface RenderButtonProps {
     tabIndex: number;
     "data-element": string;

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

@@ -10,7 +10,7 @@ import useLocale from "../../hooks/__internal__/useLocale";
 import ActionPopoverMenu from "./action-popover-menu/action-popover-menu.component";
 import ActionPopoverItem from "./action-popover-item/action-popover-item.component";
 import ActionPopoverDivider from "./action-popover-divider/action-popover-divider.component";
-import ActionPopoverContext from "./action-popover-context";
+import ActionPopoverContext from "./__internal__/action-popover.context";
 import useModalManager from "../../hooks/__internal__/useModalManager";
 const onOpenDefault = () => {};
 const onCloseDefault = () => {};

package/esm/components/button/button.component.js

@@ -6,7 +6,7 @@ import Icon from "../icon";
 import StyledButton, { StyledButtonSubtext, StyledButtonMainText } from "./button.style";
 import tagComponent from "../../__internal__/utils/helpers/tags/tags";
 import { TooltipProvider } from "../../__internal__/tooltip-provider";
-import { ButtonBarContext } from "../button-bar/button-bar.component";
+import ButtonBarContext from "../button-bar/__internal__/button-bar.context";
 import SplitButtonContext from "../split-button/__internal__/split-button.context";
 function renderChildren({
   /* eslint-disable react/prop-types */

package/esm/components/button-bar/__internal__/button-bar.context.d.ts

@@ -0,0 +1,13 @@
+import React from "react";
+export interface ButtonBarContextProps {
+    /** Apply fullWidth style to the button bar */
+    fullWidth?: boolean;
+    /** Defines an Icon position for buttons: "before" | "after" */
+    iconPosition?: "before" | "after";
+    /** Assigns a size to the buttons: "small" | "medium" | "large" */
+    size?: "small" | "medium" | "large";
+    /** Color variants for new business themes: "primary" | "secondary" | "tertiary" | "darkBackground" */
+    buttonType?: "primary" | "secondary" | "primary";
+}
+declare const _default: React.Context<ButtonBarContextProps>;
+export default _default;

package/esm/components/button-bar/button-bar.component.d.ts

@@ -1,20 +1,10 @@
 import React from "react";
 import { SpaceProps } from "styled-system";
-export interface ButtonBarContextProps {
-    /** Apply fullWidth style to the button bar */
-    fullWidth?: boolean;
-    /** Defines an Icon position for buttons: "before" | "after" */
-    iconPosition?: "before" | "after";
-    /** Assigns a size to the buttons: "small" | "medium" | "large" */
-    size?: "small" | "medium" | "large";
-    /** Color variants for new business themes: "primary" | "secondary" | "tertiary" | "darkBackground" */
-    buttonType?: "primary" | "secondary" | "primary";
-}
+import { ButtonBarContextProps } from "./__internal__/button-bar.context";
 export interface ButtonBarProps extends ButtonBarContextProps, SpaceProps {
     /** Button or IconButton Elements, to be rendered inside the component */
     children: React.ReactNode;
 }
-export declare const ButtonBarContext: React.Context<ButtonBarContextProps>;
 export declare const ButtonBar: {
     ({ children, size, iconPosition, fullWidth, ...rest }: ButtonBarProps): React.JSX.Element;
     displayName: string;

package/esm/components/button-bar/button-bar.component.js

@@ -2,7 +2,7 @@ function _extends() { _extends = Object.assign ? Object.assign.bind() : function
 import React from "react";
 import PropTypes from "prop-types";
 import StyledButtonBar from "./button-bar.style";
-export const ButtonBarContext = /*#__PURE__*/React.createContext({});
+import ButtonBarContext from "./__internal__/button-bar.context";
 export const ButtonBar = ({
   children,
   size = "medium",

package/esm/components/button-minor/button-minor.component.js

@@ -2,7 +2,7 @@ function _extends() { _extends = Object.assign ? Object.assign.bind() : function
 import React, { useContext } from "react";
 import PropTypes from "prop-types";
 import StyledButtonMinor from "./button-minor.style";
-import { ButtonBarContext } from "../button-bar/button-bar.component";
+import ButtonBarContext from "../button-bar/__internal__/button-bar.context";
 const ButtonMinor = /*#__PURE__*/React.forwardRef(({
   buttonType: buttonTypeProp = "secondary",
   disabled = false,

package/esm/components/button-toggle/button-toggle-group/__internal__/button-toggle-group.context.d.ts

@@ -0,0 +1,16 @@
+import React from "react";
+declare type ButtonToggleGroupContextType = {
+    onButtonClick: (value: string) => void;
+    handleKeyDown: (ev: React.KeyboardEvent<HTMLButtonElement>) => void;
+    pressedButtonValue?: string;
+    onChange?: (ev: React.MouseEvent<HTMLButtonElement>, value?: string) => void;
+    allowDeselect?: boolean;
+    isInGroup: boolean;
+    isDisabled?: boolean;
+    firstButton?: HTMLButtonElement;
+    childButtonCallbackRef?: (button: HTMLButtonElement | null) => void;
+    /** Identifier for the hint text, if it exists, that is rendered by ButtonToggleGroup */
+    hintTextId?: string;
+};
+declare const _default: React.Context<ButtonToggleGroupContextType>;
+export default _default;

package/esm/components/button-toggle/button-toggle-group/__internal__/button-toggle-group.context.js

@@ -0,0 +1,9 @@
+import React from "react";
+export default /*#__PURE__*/React.createContext({
+  onButtonClick: /* istanbul ignore next */() => {},
+  handleKeyDown: /* istanbul ignore next */() => {},
+  pressedButtonValue: undefined,
+  allowDeselect: false,
+  isInGroup: false,
+  isDisabled: false
+});

package/esm/components/button-toggle/button-toggle-group/button-toggle-group.component.d.ts

@@ -44,20 +44,6 @@ export interface ButtonToggleGroupProps extends MarginProps, TagProps {
      */
     className?: string;
 }
-declare type ButtonToggleGroupContextType = {
-    onButtonClick: (value: string) => void;
-    handleKeyDown: (ev: React.KeyboardEvent<HTMLButtonElement>) => void;
-    pressedButtonValue?: string;
-    onChange?: (ev: React.MouseEvent<HTMLButtonElement>, value?: string) => void;
-    allowDeselect?: boolean;
-    isInGroup: boolean;
-    isDisabled?: boolean;
-    firstButton?: HTMLButtonElement;
-    childButtonCallbackRef?: (button: HTMLButtonElement | null) => void;
-    /** Identifier for the hint text, if it exists, that is rendered by ButtonToggleGroup */
-    hintTextId?: string;
-};
-export declare const ButtonToggleGroupContext: React.Context<ButtonToggleGroupContextType>;
 declare const ButtonToggleGroup: {
     ({ children, fieldHelp, fieldHelpInline, "aria-label": ariaLabel, label, labelHelp, labelSpacing, inputHint, inputWidth, fullWidth, labelInline, labelWidth, onChange, value, "data-component": dataComponent, "data-element": dataElement, "data-role": dataRole, helpAriaLabel, id, allowDeselect, disabled, className, ...props }: ButtonToggleGroupProps): React.JSX.Element;
     displayName: string;

package/esm/components/button-toggle/button-toggle-group/button-toggle-group.component.js

@@ -1,5 +1,5 @@
 function _extends() { _extends = Object.assign ? Object.assign.bind() : 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, { createContext, useMemo, useState, useRef, useContext } from "react";
+import React, { useMemo, useState, useRef, useContext } from "react";
 import PropTypes from "prop-types";
 import invariant from "invariant";
 import FormField from "../../../__internal__/form-field";
@@ -10,16 +10,9 @@ import { filterStyledSystemMarginProps } from "../../../style/utils";
 import { TooltipProvider } from "../../../__internal__/tooltip-provider";
 import { InputGroupBehaviour } from "../../../__internal__/input-behaviour";
 import Events from "../../../__internal__/utils/helpers/events";
-import { NewValidationContext } from "../../carbon-provider/carbon-provider.component";
+import NewValidationContext from "../../carbon-provider/__internal__/new-validation.context";
+import ButtonToggleGroupContext from "./__internal__/button-toggle-group.context";
 const BUTTON_TOGGLE_SELECTOR = '[data-element="button-toggle-button"]';
-export const ButtonToggleGroupContext = /*#__PURE__*/createContext({
-  onButtonClick: /* istanbul ignore next */() => {},
-  handleKeyDown: /* istanbul ignore next */() => {},
-  pressedButtonValue: undefined,
-  allowDeselect: false,
-  isInGroup: false,
-  isDisabled: false
-});
 const ButtonToggleGroup = ({
   children,
   fieldHelp,

package/esm/components/button-toggle/button-toggle.component.js

@@ -4,7 +4,7 @@ import PropTypes from "prop-types";
 import invariant from "invariant";
 import { StyledButtonToggle, StyledButtonToggleWrapper } from "./button-toggle.style";
 import guid from "../../__internal__/utils/helpers/guid";
-import { ButtonToggleGroupContext } from "./button-toggle-group/button-toggle-group.component";
+import ButtonToggleGroupContext from "./button-toggle-group/__internal__/button-toggle-group.context";
 import ButtonToggleIcon from "./button-toggle-icon.component";
 import Logger from "../../__internal__/utils/logger";
 import { InputGroupContext } from "../../__internal__/input-behaviour";

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

@@ -0,0 +1,14 @@
+import React from "react";
+export interface NewValidationContextProps {
+    /** Feature flag for opting in to the latest validation designs for components that support it.
+     *
+     * NOTE - Will eventually be set to `true` by default in the future. */
+    validationRedesignOptIn?: boolean;
+    /** Feature flag for opting out of styling components to have rounded corners.
+     *
+     * NOTE - Will eventually be set to `false` by default in the future. */
+    roundedCornersOptOut?: boolean;
+    focusRedesignOptOut?: boolean;
+}
+declare const _default: React.Context<NewValidationContextProps>;
+export default _default;

package/esm/components/carbon-provider/__internal__/top-modal-provider.component.d.ts

@@ -0,0 +1,5 @@
+import React, { ReactNode } from "react";
+export declare const TopModalProvider: ({ children }: {
+    children: ReactNode;
+}) => React.JSX.Element;
+export default TopModalProvider;

package/esm/components/carbon-provider/{top-modal-context.js → __internal__/top-modal-provider.component.js}

@@ -1,8 +1,7 @@
-import React, { createContext, useState, useEffect, useRef } from "react";
-const TopModalContext = /*#__PURE__*/createContext({
-  topModal: null
-});
-export const TopModalContextProvider = ({
+import React, { useState, useEffect, useRef } from "react";
+import PropTypes from "prop-types";
+import TopModalContext from "./top-modal.context";
+export const TopModalProvider = ({
   children
 }) => {
   const [topModal, setTopModal] = useState(null);
@@ -28,4 +27,4 @@ export const TopModalContextProvider = ({
     }
   }, children);
 };
-export default TopModalContext;
+export default TopModalProvider;

package/esm/components/carbon-provider/__internal__/top-modal.context.d.ts

@@ -0,0 +1,6 @@
+import React from "react";
+declare type TopModalContextProps = {
+    topModal: HTMLElement | null;
+};
+declare const _default: React.Context<TopModalContextProps>;
+export default _default;

package/esm/components/carbon-provider/__internal__/top-modal.context.js

@@ -0,0 +1,4 @@
+import React from "react";
+export default /*#__PURE__*/React.createContext({
+  topModal: null
+});

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

@@ -1,17 +1,10 @@
 import React from "react";
 import type { ThemeObject } from "../../style/themes";
-export interface CarbonProviderProps {
+import { NewValidationContextProps } from "./__internal__/new-validation.context";
+export interface CarbonProviderProps extends NewValidationContextProps {
     children: React.ReactNode;
     /** Theme which specifies styles to apply to all child components. Set to `sageTheme` by default. */
     theme?: Partial<ThemeObject>;
-    /** Feature flag for opting in to the new validation redesign for components that support it.
-     *
-     * NOTE - Will eventually be set to `true` by default in the future. */
-    validationRedesignOptIn?: boolean;
-    /** Feature flag for opting out of styling components to have rounded corners. */
-    roundedCornersOptOut?: boolean;
-    focusRedesignOptOut?: boolean;
 }
-export declare const NewValidationContext: React.Context<Pick<CarbonProviderProps, "validationRedesignOptIn" | "roundedCornersOptOut" | "focusRedesignOptOut">>;
 export declare const CarbonProvider: ({ children, theme, validationRedesignOptIn, roundedCornersOptOut, focusRedesignOptOut, }: CarbonProviderProps) => React.JSX.Element;
 export default CarbonProvider;

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

@@ -1,10 +1,10 @@
-import React, { createContext, useContext } from "react";
+import React, { useContext } from "react";
 import PropTypes from "prop-types";
 import { ThemeProvider } from "styled-components";
 import CarbonScopedTokensProvider from "../../style/design-tokens/carbon-scoped-tokens-provider";
 import { sageTheme } from "../../style/themes";
-import { TopModalContextProvider } from "./top-modal-context";
-export const NewValidationContext = /*#__PURE__*/createContext({});
+import NewValidationContext from "./__internal__/new-validation.context";
+import TopModalProvider from "./__internal__/top-modal-provider.component";
 export const CarbonProvider = ({
   children,
   theme = sageTheme,
@@ -29,6 +29,6 @@ export const CarbonProvider = ({
       validationRedesignOptIn,
       roundedCornersOptOut: roundedCornersOptOutValue
     }
-  }, /*#__PURE__*/React.createElement(TopModalContextProvider, null, children))));
+  }, /*#__PURE__*/React.createElement(TopModalProvider, null, children))));
 };
 export default CarbonProvider;

package/esm/components/card/__internal__/{card-context/index.d.ts → card.context.d.ts}

@@ -1,5 +1,5 @@
 import React from "react";
-import { CardSpacing } from "../../card.config";
+import { CardSpacing } from "../card.config";
 export interface CardContextProps {
     /** Sets the level of roundness of the corners, "default" is 8px and "large" is 16px */
     roundness?: "default" | "large";

package/esm/components/card/card-footer/card-footer.component.d.ts

@@ -1,6 +1,6 @@
 import React from "react";
 import { SpaceProps } from "styled-system";
-import { CardContextProps } from "../__internal__/card-context";
+import { CardContextProps } from "../__internal__/card.context";
 import { TagProps } from "../../../__internal__/utils/helpers/tags/tags";
 export interface CardFooterProps extends SpaceProps, Pick<CardContextProps, "roundness">, Pick<TagProps, "data-element" | "data-role"> {
     /** Child nodes */

package/esm/components/card/card-footer/card-footer.component.js

@@ -3,7 +3,7 @@ import React, { useContext } from "react";
 import PropTypes from "prop-types";
 import { filterStyledSystemMarginProps, filterStyledSystemPaddingProps } from "../../../style/utils";
 import StyledCardFooter from "./card-footer.style";
-import CardContext from "../__internal__/card-context";
+import CardContext from "../__internal__/card.context";
 import tagComponent from "../../../__internal__/utils/helpers/tags/tags";
 const CardFooter = ({
   children,

package/esm/components/card/card-footer/card-footer.style.d.ts

@@ -1,5 +1,5 @@
 import { SpaceProps } from "styled-system";
-import { CardContextProps } from "../__internal__/card-context";
+import { CardContextProps } from "../__internal__/card.context";
 import { CardFooterProps } from "./card-footer.component";
 export interface StyledCardFooterProps extends SpaceProps {
     /** Specify styling variant to render */

package/esm/components/card/card-row/card-row.component.js

@@ -4,7 +4,7 @@ import PropTypes from "prop-types";
 import { filterStyledSystemPaddingProps } from "../../../style/utils";
 import StyledCardRow from "./card-row.style";
 import tagComponent from "../../../__internal__/utils/helpers/tags/tags";
-import CardContext from "../__internal__/card-context";
+import CardContext from "../__internal__/card.context";
 import guid from "../../../__internal__/utils/helpers/guid";
 const CardRow = ({
   children,

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

@@ -1,7 +1,7 @@
 import React from "react";
 import { MarginProps } from "styled-system";
 import * as DesignTokens from "@sage/design-tokens/js/base/common";
-import { CardContextProps } from "./__internal__/card-context";
+import { CardContextProps } from "./__internal__/card.context";
 import { TagProps } from "../../__internal__/utils/helpers/tags/tags";
 declare type DesignTokensType = keyof typeof DesignTokens;
 declare type BoxShadowsType = Extract<DesignTokensType, `boxShadow${string}`>;

package/esm/components/card/card.component.js

@@ -2,7 +2,7 @@ function _extends() { _extends = Object.assign ? Object.assign.bind() : function
 import React, { useState } from "react";
 import PropTypes from "prop-types";
 import { filterStyledSystemMarginProps } from "../../style/utils";
-import CardContext from "./__internal__/card-context";
+import CardContext from "./__internal__/card.context";
 import { StyledCard, StyledCardContent } from "./card.style";
 import Icon from "../icon";
 import tagComponent from "../../__internal__/utils/helpers/tags/tags";

package/esm/components/card/card.style.d.ts

@@ -1,6 +1,6 @@
 import { MarginProps } from "styled-system";
 import * as DesignTokens from "@sage/design-tokens/js/base/common";
-import { CardContextProps } from "./__internal__/card-context";
+import { CardContextProps } from "./__internal__/card.context";
 import { CardProps } from "./card.component";
 export declare const paddingSizes: {
     small: string;

package/esm/components/checkbox/checkbox-group/__internal__/checkbox-group.context.d.ts

@@ -0,0 +1,4 @@
+import React from "react";
+import { ValidationProps } from "../../../../__internal__/validations";
+declare const _default: React.Context<ValidationProps>;
+export default _default;

package/esm/components/checkbox/checkbox-group/__internal__/checkbox-group.context.js

@@ -0,0 +1,2 @@
+import React from "react";
+export default /*#__PURE__*/React.createContext({});

package/esm/components/checkbox/checkbox-group/checkbox-group.component.d.ts

@@ -30,7 +30,6 @@ export interface CheckboxGroupProps extends ValidationProps, MarginProps {
     /** When true, Checkboxes are in line */
     inline?: boolean;
 }
-export declare const CheckboxGroupContext: React.Context<ValidationProps>;
 export declare const CheckboxGroup: {
     (props: CheckboxGroupProps): React.JSX.Element;
     displayName: string;

package/esm/components/checkbox/checkbox-group/checkbox-group.component.js

@@ -7,11 +7,11 @@ import Fieldset from "../../../__internal__/fieldset";
 import { filterStyledSystemMarginProps } from "../../../style/utils";
 import { TooltipProvider } from "../../../__internal__/tooltip-provider";
 import FormSpacingProvider from "../../../__internal__/form-spacing-provider";
-import { NewValidationContext } from "../../carbon-provider/carbon-provider.component";
+import NewValidationContext from "../../carbon-provider/__internal__/new-validation.context";
 import ValidationMessage from "../../../__internal__/validation-message/validation-message.component";
 import Box from "../../box";
 import { ErrorBorder } from "../../textbox/textbox.style";
-export const CheckboxGroupContext = /*#__PURE__*/React.createContext({});
+import CheckboxGroupContext from "./__internal__/checkbox-group.context";
 export const CheckboxGroup = props => {
   const {
     validationRedesignOptIn

package/esm/components/checkbox/checkbox.component.js

@@ -6,10 +6,10 @@ import CheckableInput from "../../__internal__/checkable-input/checkable-input.c
 import CheckboxSvg from "./checkbox-svg.component";
 import useIsAboveBreakpoint from "../../hooks/__internal__/useIsAboveBreakpoint";
 import { TooltipProvider } from "../../__internal__/tooltip-provider";
-import { CheckboxGroupContext } from "./checkbox-group/checkbox-group.component";
+import CheckboxGroupContext from "./checkbox-group/__internal__/checkbox-group.context";
 import Logger from "../../__internal__/utils/logger";
 import useFormSpacing from "../../hooks/__internal__/useFormSpacing";
-import { NewValidationContext } from "../carbon-provider/carbon-provider.component";
+import NewValidationContext from "../carbon-provider/__internal__/new-validation.context";
 let deprecateUncontrolledWarnTriggered = false;
 const Checkbox = /*#__PURE__*/React.forwardRef(({
   "aria-labelledby": ariaLabelledBy,

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

@@ -1,7 +1,7 @@
 import React from "react";
 import { TextboxProps } from "../textbox";
 import { PickerProps } from "./__internal__/date-picker";
-import { InputName } from "../date-range/date-range.context";
+import { InputName } from "../date-range/__internal__/date-range.context";
 export interface DateChangeEvent {
     target: {
         id?: string;

package/esm/components/date/date.component.js

@@ -9,7 +9,7 @@ import getFormatData from "./__internal__/date-formats";
 import StyledDateInput from "./date.style";
 import Textbox from "../textbox";
 import DatePicker from "./__internal__/date-picker";
-import DateRangeContext from "../date-range/date-range.context";
+import DateRangeContext from "../date-range/__internal__/date-range.context";
 import useClickAwayListener from "../../hooks/__internal__/useClickAwayListener";
 import useFormSpacing from "../../hooks/__internal__/useFormSpacing";
 import guid from "../../__internal__/utils/helpers/guid";

package/esm/components/date-range/__internal__/date-range.context.js

@@ -0,0 +1,2 @@
+import React from "react";
+export default /*#__PURE__*/React.createContext({});

package/esm/components/date-range/date-range.component.js

@@ -10,7 +10,7 @@ import Events from "../../__internal__/utils/helpers/events";
 import useLocale from "../../hooks/__internal__/useLocale";
 import usePrevious from "../../hooks/__internal__/usePrevious";
 import getFormatData from "../date/__internal__/date-formats";
-import DateRangeContext from "./date-range.context";
+import DateRangeContext from "./__internal__/date-range.context";
 export const DateRange = ({
   endDateProps = {},
   id,

package/esm/components/date-range/index.d.ts

@@ -1,3 +1,3 @@
 export { default } from "./date-range.component";
 export type { DateRangeChangeEvent } from "./date-range.component";
-export type { DateRangeContextProps } from "./date-range.context";
+export type { DateRangeContextProps } from "./__internal__/date-range.context";

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

@@ -10,7 +10,7 @@ export interface ContentPaddingInterface {
     py?: PaddingValues;
     px?: PaddingValues;
 }
-export interface DialogProps extends ModalProps, TagProps {
+export interface DialogProps extends ModalProps, Omit<TagProps, "data-component"> {
     /** Custom class name  */
     className?: string;
     /** Prop to specify the aria-describedby property of the Dialog component */