carbon-react 153.7.1 → 154.0.0

package/esm/__internal__/utils/{createStrictContext.js → createStrictContext/createStrictContext.js}

@@ -1,5 +1,5 @@
 import React from "react";
-import Logger from "./logger";
+import Logger from "../logger";
 /**
  * Creates a React context with a provider and a hook for accessing the context.
  * Logs an error and returns a default value if the hook is used outside of the provider.

package/esm/__internal__/utils/createStrictContext/index.d.ts

@@ -0,0 +1 @@
+export { default } from "./createStrictContext";

package/esm/__internal__/utils/createStrictContext/index.js

@@ -0,0 +1 @@
+export { default } from "./createStrictContext";

package/esm/components/action-popover/__internal__/action-popover.context.d.ts

@@ -1,4 +1,4 @@
-import React from "react";
+/// <reference types="react" />
 export type Alignment = "left" | "right";
 type ActionPopoverContextType = {
     setOpenPopover: (isOpen: boolean) => void;
@@ -6,5 +6,6 @@ type ActionPopoverContextType = {
     submenuPosition: Alignment;
     isOpenPopover: boolean;
 };
-declare const ActionPopoverContext: React.Context<ActionPopoverContextType | null>;
-export default ActionPopoverContext;
+export declare const ActionPopoverProvider: import("react").Provider<ActionPopoverContextType | null>;
+export declare const useActionPopoverContext: () => ActionPopoverContextType;
+export {};

package/esm/components/action-popover/__internal__/action-popover.context.js

@@ -1,3 +1,9 @@
-import React from "react";
-const ActionPopoverContext = /*#__PURE__*/React.createContext(null);
-export default ActionPopoverContext;
+import { createContext, useContext } from "react";
+import invariant from "invariant";
+const ActionPopoverContext = /*#__PURE__*/createContext(null);
+export const ActionPopoverProvider = ActionPopoverContext.Provider;
+export const useActionPopoverContext = () => {
+  const context = useContext(ActionPopoverContext);
+  !context ? process.env.NODE_ENV !== "production" ? invariant(false, "Carbon ActionPopover: Context not found. Have you wrapped your Carbon subcomponents properly? See stack trace for more details.") : invariant(false) : void 0;
+  return context;
+};

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

@@ -1,10 +1,10 @@
 function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
-import React, { useCallback, useEffect, useRef, useState, useContext } from "react";
+import React, { useCallback, useEffect, useRef, useState } from "react";
 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 "../__internal__/action-popover.context";
+import { useActionPopoverContext } from "../__internal__/action-popover.context";
 import ActionPopoverMenu from "../action-popover-menu/action-popover-menu.component";
 const INTERVAL = 150;
 function checkRef(ref) {
@@ -47,15 +47,13 @@ export const ActionPopoverItem = ({
   isASubmenu = false,
   ...rest
 }) => {
-  const context = useContext(ActionPopoverContext);
-  !context ? process.env.NODE_ENV !== "production" ? invariant(false, "ActionPopoverItem must be used within an ActionPopover component") : invariant(false) : void 0;
   !(/*#__PURE__*/React.isValidElement(submenu) ? submenu.type === ActionPopoverMenu : true) ? process.env.NODE_ENV !== "production" ? invariant(false, "ActionPopoverItem only accepts submenu of type `ActionPopoverMenu`") : invariant(false) : void 0;
   const {
     setOpenPopover,
     isOpenPopover,
     focusButton,
     submenuPosition
-  } = context;
+  } = useActionPopoverContext();
   const isHref = !!href;
   const [containerPosition, setContainerPosition] = useState(undefined);
   const [guid] = useState(createGuid());

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

@@ -1,11 +1,11 @@
 function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
-import React, { useCallback, useMemo, useContext, useState } from "react";
+import React, { useCallback, useMemo, useState } from "react";
 import invariant from "invariant";
 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 "../__internal__/action-popover.context";
+import { useActionPopoverContext } from "../__internal__/action-popover.context";
 import { findFirstFocusableItem, findLastFocusableItem, getItems, isItemDisabled } from "../__internal__/action-popover-utils";
 const ActionPopoverMenu = /*#__PURE__*/React.forwardRef(({
   children,
@@ -20,12 +20,10 @@ const ActionPopoverMenu = /*#__PURE__*/React.forwardRef(({
   isASubmenu,
   ...rest
 }, ref) => {
-  const context = useContext(ActionPopoverContext);
-  !context ? process.env.NODE_ENV !== "production" ? invariant(false, "ActionPopoverMenu must be used within an ActionPopover component") : invariant(false) : void 0;
   const {
     focusButton,
     submenuPosition
-  } = context;
+  } = useActionPopoverContext();
   !(setOpen && setFocusIndex && typeof focusIndex !== "undefined") ? process.env.NODE_ENV !== "production" ? invariant(false, "ActionPopoverMenu must be used within an ActionPopover or ActionPopoverItem component") : invariant(false) : void 0;
   const hasProperChildren = useMemo(() => {
     const incorrectChild = React.Children.toArray(children).find(child => ! /*#__PURE__*/React.isValidElement(child) || child.type.displayName !== "ActionPopoverItem" && child.type.displayName !== "ActionPopoverDivider");

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 "./__internal__/action-popover.context";
+import { ActionPopoverProvider } from "./__internal__/action-popover.context";
 import useModalManager from "../../hooks/__internal__/useModalManager";
 import { findFirstFocusableItem, findLastFocusableItem, getItems, checkChildrenForString } from "./__internal__/action-popover-utils";
 import FlatTableContext from "../flat-table/__internal__/flat-table.context";
@@ -208,7 +208,7 @@ export const ActionPopover = /*#__PURE__*/forwardRef(({
     onClick: onButtonClick,
     isOpen,
     ref: buttonRef
-  }, rest, tagComponent("action-popover-wrapper", rest)), menuButton(menuID), /*#__PURE__*/React.createElement(ActionPopoverContext.Provider, {
+  }, rest, tagComponent("action-popover-wrapper", rest)), menuButton(menuID), /*#__PURE__*/React.createElement(ActionPopoverProvider, {
     value: {
       setOpenPopover: setOpen,
       focusButton,

package/esm/components/breadcrumbs/__internal__/breadcrumbs.context.d.ts

@@ -1,6 +1,6 @@
-import React from "react";
+/// <reference types="react" />
 export type BreadcrumbsContextType = {
     isDarkBackground: boolean;
 };
-declare const BreadcrumbsContext: React.Context<BreadcrumbsContextType>;
-export default BreadcrumbsContext;
+declare const BreadcrumbsProvider: import("react").Provider<BreadcrumbsContextType | null>, useBreadcrumbsContext: () => BreadcrumbsContextType;
+export { BreadcrumbsProvider, useBreadcrumbsContext };

package/esm/components/breadcrumbs/__internal__/breadcrumbs.context.js

@@ -1,5 +1,9 @@
-import React from "react";
-const BreadcrumbsContext = /*#__PURE__*/React.createContext({
-  isDarkBackground: false
+import createStrictContext from "../../../__internal__/utils/createStrictContext";
+const [BreadcrumbsProvider, useBreadcrumbsContext] = createStrictContext({
+  name: "BreadcrumbsContext",
+  errorMessage: "Carbon Breadcrumbs: Context not found. Have you wrapped your Carbon subcomponents properly? See stack trace for more details.",
+  defaultValue: {
+    isDarkBackground: false
+  }
 });
-export default BreadcrumbsContext;
+export { BreadcrumbsProvider, useBreadcrumbsContext };

package/esm/components/breadcrumbs/breadcrumbs.component.js

@@ -3,14 +3,14 @@ import React from "react";
 import tagComponent from "../../__internal__/utils/helpers/tags";
 import StyledBreadcrumbs from "./breadcrumbs.style";
 import useLocale from "../../hooks/__internal__/useLocale";
-import BreadcrumbsContext from "./__internal__/breadcrumbs.context";
+import { BreadcrumbsProvider } from "./__internal__/breadcrumbs.context";
 export const Breadcrumbs = /*#__PURE__*/React.forwardRef(({
   children,
   isDarkBackground = false,
   ...rest
 }, ref) => {
   const l = useLocale();
-  return /*#__PURE__*/React.createElement(BreadcrumbsContext.Provider, {
+  return /*#__PURE__*/React.createElement(BreadcrumbsProvider, {
     value: {
       isDarkBackground
     }

package/esm/components/breadcrumbs/crumb/crumb.component.js

@@ -1,8 +1,8 @@
 function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
-import React, { useContext } from "react";
+import React from "react";
 import tagComponent from "../../../__internal__/utils/helpers/tags";
 import { StyledCrumb, Divider } from "./crumb.style";
-import BreadcrumbsContext from "../__internal__/breadcrumbs.context";
+import { useBreadcrumbsContext } from "../__internal__/breadcrumbs.context";
 const Crumb = /*#__PURE__*/React.forwardRef(({
   href,
   isCurrent,
@@ -12,7 +12,7 @@ const Crumb = /*#__PURE__*/React.forwardRef(({
 }, ref) => {
   const {
     isDarkBackground
-  } = useContext(BreadcrumbsContext);
+  } = useBreadcrumbsContext();
   return /*#__PURE__*/React.createElement("li", null, /*#__PURE__*/React.createElement(StyledCrumb, _extends({
     ref: ref,
     isCurrent: isCurrent,

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

@@ -1,16 +1,16 @@
-import React from "react";
+/// <reference types="react" />
 type ButtonToggleGroupContextType = {
     onButtonClick: (value: string) => void;
     handleKeyDown: (ev: React.KeyboardEvent<HTMLButtonElement>) => void;
     pressedButtonValue?: string;
     onChange?: (ev: React.MouseEvent<HTMLButtonElement>, value?: string) => void;
-    allowDeselect?: boolean;
+    allowDeselect: boolean;
     isInGroup: boolean;
-    isDisabled?: 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;
+declare const ButtonToggleGroupProvider: import("react").Provider<ButtonToggleGroupContextType | null>, useButtonToggleGroupContext: () => ButtonToggleGroupContextType;
+export { ButtonToggleGroupProvider, useButtonToggleGroupContext };

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

@@ -1,9 +1,14 @@
-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
-});
+import createStrictContext from "../../../../__internal__/utils/createStrictContext";
+const [ButtonToggleGroupProvider, useButtonToggleGroupContext] = createStrictContext({
+  name: "ButtonToggleGroupContext",
+  errorMessage: "Carbon ButtonToggleGroup: Context not found. Have you wrapped your Carbon subcomponents properly? See stack trace for more details.",
+  defaultValue: {
+    onButtonClick: /* istanbul ignore next */() => {},
+    handleKeyDown: /* istanbul ignore next */() => {},
+    pressedButtonValue: undefined,
+    allowDeselect: false,
+    isInGroup: false,
+    isDisabled: false
+  }
+});
+export { ButtonToggleGroupProvider, useButtonToggleGroupContext };

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

@@ -11,8 +11,10 @@ import { TooltipProvider } from "../../../__internal__/tooltip-provider";
 import { InputGroupBehaviour } from "../../../__internal__/input-behaviour";
 import Events from "../../../__internal__/utils/helpers/events";
 import NewValidationContext from "../../carbon-provider/__internal__/new-validation.context";
-import ButtonToggleGroupContext from "./__internal__/button-toggle-group.context";
+import { ButtonToggleGroupProvider } from "./__internal__/button-toggle-group.context";
 import HintText from "../../../__internal__/hint-text";
+import Logger from "../../../__internal__/utils/logger";
+let deprecateUncontrolledWarnTriggered = false;
 const BUTTON_TOGGLE_SELECTOR = '[data-element="button-toggle-button"]';
 const ButtonToggleGroup = ({
   children,
@@ -31,8 +33,8 @@ const ButtonToggleGroup = ({
   value,
   helpAriaLabel,
   id,
-  allowDeselect,
-  disabled,
+  allowDeselect = false,
+  disabled = false,
   ...props
 }) => {
   const hasCorrectItemStructure = useMemo(() => {
@@ -40,6 +42,10 @@ const ButtonToggleGroup = ({
     return !incorrectChild;
   }, [children]);
   !hasCorrectItemStructure ? process.env.NODE_ENV !== "production" ? invariant(false, `\`ButtonToggleGroup\` only accepts children of type \`${ButtonToggle.displayName}\``) : invariant(false) : void 0;
+  if (!deprecateUncontrolledWarnTriggered && !onChange) {
+    deprecateUncontrolledWarnTriggered = true;
+    Logger.deprecate("Uncontrolled behaviour in `Button Toggle Group` is deprecated and support will soon be removed. Please make sure all your inputs are controlled.");
+  }
   const labelId = useRef(guid());
   const hintTextId = useRef(guid());
   const wrapperRef = useRef(null);
@@ -111,7 +117,7 @@ const ButtonToggleGroup = ({
     id: id,
     labelAs: "span",
     disabled: disabled
-  }, filterStyledSystemMarginProps(props), tagComponent(props["data-component"] ?? "button-toggle-group", props)), /*#__PURE__*/React.createElement(ButtonToggleGroupContext.Provider, {
+  }, filterStyledSystemMarginProps(props), tagComponent(props["data-component"] ?? "button-toggle-group", props)), /*#__PURE__*/React.createElement(ButtonToggleGroupProvider, {
     value: {
       onButtonClick,
       handleKeyDown,

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

@@ -14,7 +14,10 @@ export interface ButtonToggleProps extends Partial<StyledButtonToggleProps>, Tag
     onFocus?: (ev: React.FocusEvent<HTMLButtonElement>) => void;
     /** Callback triggered by click event on the button. */
     onClick?: (ev: React.MouseEvent<HTMLButtonElement>) => void;
-    /** Set the pressed state of the toggle button */
+    /**
+     * Set the pressed state of the toggle button
+     * @deprecated
+     * */
     pressed?: boolean;
     /** An optional string by which to identify the button in either an onClick handler, or an onChange handler on the parent ButtonToggleGroup. */
     value?: string;

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

@@ -3,11 +3,11 @@ import React, { useContext, useRef } from "react";
 import invariant from "invariant";
 import { StyledButtonToggle, StyledButtonToggleWrapper } from "./button-toggle.style";
 import guid from "../../__internal__/utils/helpers/guid";
-import ButtonToggleGroupContext from "./button-toggle-group/__internal__/button-toggle-group.context";
+import { useButtonToggleGroupContext } 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";
-let deprecateUncontrolledWarnTriggered = false;
+import Logger from "../../__internal__/utils/logger";
+let deprecatePressedWarnTriggered = false;
 export const ButtonToggle = ({
   "aria-label": ariaLabel,
   "aria-labelledby": ariaLabelledBy,
@@ -26,6 +26,10 @@ export const ButtonToggle = ({
   value
 }) => {
   !!!(children || buttonIcon) ? process.env.NODE_ENV !== "production" ? invariant(false, "Either prop `buttonIcon` must be defined, or this node must have children") : invariant(false) : void 0;
+  if (pressed && !deprecatePressedWarnTriggered) {
+    Logger.deprecate("The `pressed` prop is deprecated.");
+    deprecatePressedWarnTriggered = true;
+  }
   const buttonRef = useRef(null);
   const {
     onMouseEnter,
@@ -44,50 +48,31 @@ export const ButtonToggle = ({
     firstButton,
     childButtonCallbackRef,
     hintTextId
-  } = useContext(ButtonToggleGroupContext);
+  } = useButtonToggleGroupContext();
   const callbackRef = element => {
     buttonRef.current = element;
-    if (childButtonCallbackRef) {
-      childButtonCallbackRef(element);
-    }
+    childButtonCallbackRef?.(element);
   };
   const inputGuid = useRef(guid());
   function handleClick(ev) {
     if (onClick) {
       onClick(ev);
     }
-    if (onChange) {
-      let newValue = value;
-      if (allowDeselect && pressedButtonValue === value) {
-        newValue = undefined;
-      }
-      onChange(ev, newValue);
-    }
+    const newValue = allowDeselect && pressedButtonValue && pressedButtonValue === value ? undefined : value;
+    onChange?.(ev, newValue);
     if (value) {
       onButtonClick(value);
     }
   }
-  if (!deprecateUncontrolledWarnTriggered && !onChange) {
-    deprecateUncontrolledWarnTriggered = true;
-    Logger.deprecate("Uncontrolled behaviour in `Button Toggle` is deprecated and support will soon be removed. Please make sure all your inputs are controlled.");
-  }
   function handleFocus(ev) {
-    if (onFocus) {
-      onFocus(ev);
-    }
-    if (inputGroupOnFocus) {
-      inputGroupOnFocus();
-    }
+    onFocus?.(ev);
+    inputGroupOnFocus?.();
   }
   function handleBlur(ev) {
-    if (onBlur) {
-      onBlur(ev);
-    }
-    if (inputGroupOnBlur) {
-      inputGroupOnBlur();
-    }
+    onBlur?.(ev);
+    inputGroupOnBlur?.();
   }
-  const isPressed = isInGroup ? pressedButtonValue === value : pressed;
+  const isPressed = isInGroup ? pressedButtonValue && pressedButtonValue === value : pressed;
   const isFirstButton = buttonRef.current === firstButton;
 
   // if we're in a ButtonToggleGroup, only one button should be tabbable - the pressed button if there is one, or
@@ -100,7 +85,7 @@ export const ButtonToggle = ({
   }, /*#__PURE__*/React.createElement(StyledButtonToggle, _extends({
     "aria-label": ariaLabel,
     "aria-labelledby": ariaLabelledBy,
-    "aria-describedby": hintTextId || undefined,
+    "aria-describedby": hintTextId,
     "aria-pressed": !!isPressed,
     buttonIcon: buttonIcon,
     buttonIconSize: buttonIconSize,

package/esm/components/card/__internal__/card.context.d.ts

@@ -1,10 +1,10 @@
-import React from "react";
+/// <reference types="react" />
 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";
+    roundness: "default" | "large";
     /** Size of card for applying padding */
     spacing: CardSpacing;
 }
-declare const _default: React.Context<CardContextProps>;
-export default _default;
+declare const CardProvider: import("react").Provider<CardContextProps | null>, useCardContext: () => CardContextProps;
+export { CardProvider, useCardContext };

package/esm/components/card/__internal__/card.context.js

@@ -1,4 +1,10 @@
-import React from "react";
-export default /*#__PURE__*/React.createContext({
-  spacing: "medium"
-});
+import createStrictContext from "../../../__internal__/utils/createStrictContext";
+const [CardProvider, useCardContext] = createStrictContext({
+  name: "CardContext",
+  errorMessage: "Carbon Card: Context not found. Have you wrapped your Carbon subcomponents properly? See stack trace for more details.",
+  defaultValue: {
+    spacing: "medium",
+    roundness: "default"
+  }
+});
+export { CardProvider, useCardContext };

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

@@ -1,7 +1,7 @@
 import React from "react";
 import { StyledCardColumnProps } from "./card-column.style";
 import { TagProps } from "../../../__internal__/utils/helpers/tags/tags";
-export interface CardColumnProps extends Partial<StyledCardColumnProps>, Pick<TagProps, "data-element" | "data-role"> {
+export interface CardColumnProps extends Partial<StyledCardColumnProps>, TagProps {
     /** Child elements */
     children: React.ReactNode;
 }

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

@@ -2,7 +2,7 @@ import React from "react";
 import { SpaceProps } from "styled-system";
 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"> {
+export interface CardFooterProps extends SpaceProps, Partial<Pick<CardContextProps, "roundness">>, TagProps {
     /** Child nodes */
     children: React.ReactNode;
     /** Specify styling variant to render */

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

@@ -1,8 +1,8 @@
 function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
-import React, { useContext } from "react";
+import React from "react";
 import { filterStyledSystemMarginProps, filterStyledSystemPaddingProps } from "../../../style/utils";
 import StyledCardFooter from "./card-footer.style";
-import CardContext from "../__internal__/card.context";
+import { useCardContext } from "../__internal__/card.context";
 import tagComponent from "../../../__internal__/utils/helpers/tags/tags";
 const CardFooter = ({
   children,
@@ -12,7 +12,7 @@ const CardFooter = ({
   const {
     roundness,
     spacing
-  } = useContext(CardContext);
+  } = useCardContext();
   return /*#__PURE__*/React.createElement(StyledCardFooter, _extends({
     spacing: spacing,
     variant: variant

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

@@ -1,11 +1,6 @@
 import { SpaceProps } from "styled-system";
 import { CardContextProps } from "../__internal__/card.context";
 import { CardFooterProps } from "./card-footer.component";
-export interface StyledCardFooterProps extends SpaceProps {
-    /** Specify styling variant to render */
-    variant: Required<CardFooterProps>["variant"];
-    roundness: CardFooterProps["roundness"];
-    spacing: CardContextProps["spacing"];
-}
-declare const StyledCardFooter: import("styled-components").StyledComponent<"div", any, StyledCardFooterProps, never>;
+export type StyledCardFooterProps = SpaceProps & Required<Pick<CardFooterProps, "variant">> & Pick<CardContextProps, "roundness" | "spacing">;
+declare const StyledCardFooter: import("styled-components").StyledComponent<"div", any, SpaceProps<Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>, string | number | symbol> & Required<Pick<CardFooterProps, "variant">> & Pick<CardContextProps, "spacing" | "roundness">, never>;
 export default StyledCardFooter;

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

@@ -17,7 +17,7 @@ const StyledCardFooter = styled.div`
   ${({
   spacing,
   variant,
-  roundness = "default"
+  roundness
 }) => css`
     background-color: ${variant === "transparent" ? "transparent" : "var(--colorsUtilityMajor025)"};
     border-top: var(--colorsUtilityMajor100);

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

@@ -1,7 +1,7 @@
 import React from "react";
 import { PaddingProps } from "styled-system";
 import { TagProps } from "../../../__internal__/utils/helpers/tags/tags";
-export interface CardRowProps extends PaddingProps, Pick<TagProps, "data-element" | "data-role"> {
+export interface CardRowProps extends PaddingProps, TagProps {
     /** Child nodes */
     children: React.ReactNode;
 }

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

@@ -1,9 +1,9 @@
 function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
-import React, { useContext, useRef } from "react";
+import React, { useRef } from "react";
 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 { useCardContext } from "../__internal__/card.context";
 import guid from "../../../__internal__/utils/helpers/guid";
 const CardRow = ({
   children,
@@ -11,7 +11,7 @@ const CardRow = ({
 }) => {
   const {
     spacing
-  } = useContext(CardContext);
+  } = useCardContext();
   const id = useRef(guid());
   return /*#__PURE__*/React.createElement(StyledCardRow, _extends({
     id: id.current,

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

@@ -5,7 +5,7 @@ import { CardContextProps } from "./__internal__/card.context";
 import { TagProps } from "../../__internal__/utils/helpers/tags/tags";
 type DesignTokensType = keyof typeof DesignTokens;
 type BoxShadowsType = Extract<DesignTokensType, `boxShadow${string}`>;
-export interface CardProps extends MarginProps, Pick<TagProps, "data-element" | "data-role"> {
+export interface CardProps extends MarginProps, TagProps {
     /** Action to be executed when card is clicked or enter pressed.
      * Renders a button when passed and no draggable or href props set
      * */

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

@@ -1,7 +1,7 @@
 function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
 import React, { useState } from "react";
 import { filterStyledSystemMarginProps } from "../../style/utils";
-import CardContext from "./__internal__/card.context";
+import { CardProvider } from "./__internal__/card.context";
 import { StyledCard, StyledCardContent } from "./card.style";
 import Icon from "../icon";
 import tagComponent from "../../__internal__/utils/helpers/tags/tags";
@@ -46,7 +46,7 @@ const Card = ({
     "data-role": dataRole
   })), draggable && /*#__PURE__*/React.createElement(Icon, {
     type: "drag"
-  }), /*#__PURE__*/React.createElement(CardContext.Provider, {
+  }), /*#__PURE__*/React.createElement(CardProvider, {
     value: {
       roundness,
       spacing

package/esm/components/definition-list/__internal__/dl.context.d.ts

@@ -1,12 +1,4 @@
-import React from "react";
-export type ElementAlignment = "left" | "center" | "right";
-export interface DlContextProps {
-    /** Render the DefinitionList as a single column */
-    asSingleColumn?: boolean;
-    /** This string will specify the text align styling of the `<dt></dt>`. */
-    dtTextAlign?: ElementAlignment;
-    /** This string will specify the text align styling of the `<dd></dd>`. */
-    ddTextAlign?: ElementAlignment;
-}
-declare const _default: React.Context<DlContextProps>;
-export default _default;
+/// <reference types="react" />
+import { DlProps } from "../dl.component";
+declare const DlProvider: import("react").Provider<Required<Pick<DlProps, "dtTextAlign" | "ddTextAlign" | "asSingleColumn">> | null>, useDlContext: () => Required<Pick<DlProps, "dtTextAlign" | "ddTextAlign" | "asSingleColumn">>;
+export { DlProvider, useDlContext };

package/esm/components/definition-list/__internal__/dl.context.js

@@ -1,2 +1,11 @@
-import React from "react";
-export default /*#__PURE__*/React.createContext({});
+import createStrictContext from "../../../__internal__/utils/createStrictContext";
+const [DlProvider, useDlContext] = createStrictContext({
+  name: "DlContext",
+  errorMessage: "Carbon DefinitionList: Context not found. Have you wrapped your Carbon subcomponents properly? See stack trace for more details.",
+  defaultValue: {
+    asSingleColumn: false,
+    dtTextAlign: "right",
+    ddTextAlign: "left"
+  }
+});
+export { DlProvider, useDlContext };

package/esm/components/definition-list/dd/dd.component.js

@@ -1,7 +1,7 @@
 function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
-import React, { useContext } from "react";
+import React from "react";
 import { StyledDd } from "../definition-list.style";
-import DlContext from "../__internal__/dl.context";
+import { useDlContext } from "../__internal__/dl.context";
 import tagComponent from "../../../__internal__/utils/helpers/tags";
 const Dd = ({
   children,
@@ -13,7 +13,7 @@ const Dd = ({
   const {
     asSingleColumn,
     ddTextAlign
-  } = useContext(DlContext);
+  } = useDlContext();
   return /*#__PURE__*/React.createElement(StyledDd, _extends({
     "data-element": "dd",
     "data-role": "dd",