carbon-react 124.6.0 → 125.0.0

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

@@ -1,7 +1,10 @@
 import React from "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";
+    /** Size of card for applying padding */
+    spacing: CardSpacing;
 }
 declare const _default: React.Context<CardContextProps>;
 export default _default;

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

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

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

@@ -1,11 +1,12 @@
 import React from "react";
 import { StyledCardColumnProps } from "./card-column.style";
-export interface CardColumnProps extends Partial<StyledCardColumnProps> {
+import { TagProps } from "../../../__internal__/utils/helpers/tags/tags";
+export interface CardColumnProps extends Partial<StyledCardColumnProps>, Pick<TagProps, "data-element" | "data-role"> {
     /** Child elements */
     children: React.ReactNode;
 }
 declare const CardColumn: {
-    ({ align, children }: CardColumnProps): React.JSX.Element;
+    ({ align, children, ...rest }: CardColumnProps): React.JSX.Element;
     displayName: string;
 };
 export default CardColumn;

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

@@ -1,12 +1,17 @@
+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 from "react";
 import PropTypes from "prop-types";
 import StyledCardColumn from "./card-column.style";
+import tagComponent from "../../../__internal__/utils/helpers/tags/tags";
 const CardColumn = ({
   align = "center",
-  children
-}) => /*#__PURE__*/React.createElement(StyledCardColumn, {
-  align: align,
-  "data-element": "card-column"
-}, children);
+  children,
+  ...rest
+}) => /*#__PURE__*/React.createElement(StyledCardColumn, _extends({
+  align: align
+}, tagComponent("card-column", {
+  "data-element": "card-column",
+  ...rest
+})), children);
 CardColumn.displayName = "CardColumn";
 export default CardColumn;

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

@@ -1,11 +1,15 @@
 import React from "react";
-import { StyledCardFooterProps } from "./card-footer.style";
-export interface CardFooterProps extends Partial<StyledCardFooterProps> {
+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"> {
     /** Child nodes */
     children: React.ReactNode;
+    /** Specify styling variant to render */
+    variant?: "default" | "transparent";
 }
 declare const CardFooter: {
-    ({ spacing, children, variant, ...rest }: CardFooterProps): React.JSX.Element;
+    ({ children, variant, ...rest }: CardFooterProps): React.JSX.Element;
     displayName: string;
 };
 export default CardFooter;

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

@@ -4,21 +4,23 @@ import PropTypes from "prop-types";
 import { filterStyledSystemMarginProps, filterStyledSystemPaddingProps } from "../../../style/utils";
 import StyledCardFooter from "./card-footer.style";
 import CardContext from "../__internal__/card-context";
+import tagComponent from "../../../__internal__/utils/helpers/tags/tags";
 const CardFooter = ({
-  spacing = "medium",
   children,
   variant = "default",
   ...rest
 }) => {
   const {
-    roundness
+    roundness,
+    spacing
   } = useContext(CardContext);
   return /*#__PURE__*/React.createElement(StyledCardFooter, _extends({
-    key: "card-footer",
-    "data-element": "card-footer",
     spacing: spacing,
     variant: variant
-  }, filterStyledSystemMarginProps(rest), filterStyledSystemPaddingProps(rest), {
+  }, filterStyledSystemMarginProps(rest), filterStyledSystemPaddingProps(rest), tagComponent("card-footer", {
+    "data-element": "card-footer",
+    ...rest
+  }), {
     roundness: roundness
   }), children);
 };

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

@@ -1,11 +1,11 @@
 import { SpaceProps } from "styled-system";
-import { CardSpacing } from "../card.config";
 import { CardContextProps } from "../__internal__/card-context";
-export interface StyledCardFooterProps extends SpaceProps, CardContextProps {
-    /** Predefined size of CardFooter for applying padding. For more granular control, this prop can be over-ridden by the spacing props from styled-system */
-    spacing: CardSpacing;
+import { CardFooterProps } from "./card-footer.component";
+export interface StyledCardFooterProps extends SpaceProps {
     /** Specify styling variant to render */
-    variant: "default" | "transparent";
+    variant: Required<CardFooterProps>["variant"];
+    roundness: CardFooterProps["roundness"];
+    spacing: CardContextProps["spacing"];
 }
 declare const StyledCardFooter: import("styled-components").StyledComponent<"div", any, StyledCardFooterProps, never>;
 export default StyledCardFooter;

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

@@ -1,11 +1,12 @@
 import React from "react";
-import { StyledCardRowProps } from "./card-row.style";
-export interface CardRowProps extends Partial<StyledCardRowProps> {
+import { PaddingProps } from "styled-system";
+import { TagProps } from "../../../__internal__/utils/helpers/tags/tags";
+export interface CardRowProps extends PaddingProps, Pick<TagProps, "data-element" | "data-role"> {
     /** Child nodes */
     children: React.ReactNode;
 }
 declare const CardRow: {
-    ({ children, spacing, ...rest }: CardRowProps): React.JSX.Element;
+    ({ children, ...rest }: CardRowProps): React.JSX.Element;
     displayName: string;
 };
 export default CardRow;

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

@@ -1,17 +1,26 @@
 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 from "react";
+import React, { useContext, useRef } from "react";
 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 guid from "../../../__internal__/utils/helpers/guid";
 const CardRow = ({
   children,
-  spacing = "medium",
   ...rest
 }) => {
+  const {
+    spacing
+  } = useContext(CardContext);
+  const id = useRef(guid());
   return /*#__PURE__*/React.createElement(StyledCardRow, _extends({
-    "data-element": "card-row",
+    id: id.current,
     spacing: spacing
-  }, filterStyledSystemPaddingProps(rest)), children);
+  }, filterStyledSystemPaddingProps(rest), tagComponent("card-row", {
+    "data-element": "card-row",
+    ...rest
+  })), children);
 };
 CardRow.displayName = "CardRow";
 export default CardRow;

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

@@ -1,10 +1,6 @@
-import { PaddingProps } from "styled-system";
 import { CardSpacing } from "../card.config";
-export interface StyledCardRowProps extends PaddingProps {
-    /**
-     * Spacing prop is set in Card and defines the padding for the CardRow (the first CardRow has no padding by default).
-     * For more granular control of CardRow padding these can be over-ridden by Padding props from styled-system.
-     */
+import { CardRowProps } from "./card-row.component";
+export interface StyledCardRowProps extends CardRowProps {
     spacing: CardSpacing;
 }
 declare const StyledCardRow: import("styled-components").StyledComponent<"div", any, StyledCardRowProps, never>;

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

@@ -15,7 +15,18 @@ const StyledCardRow = styled.div`
     padding-bottom: ${paddingSizes[spacing]};
   `}
 
-  ${padding}
+  &:first-of-type:not(:only-of-type) {
+    padding-top: var(--spacing000);
+    padding-bottom: var(--spacing000);
+  }
+
+  &:only-of-type {
+    padding-top: var(--spacing000);
+  }
+
+  && {
+    ${padding}
+  }
 `;
 StyledCardRow.defaultProps = {
   theme: baseTheme

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

@@ -2,40 +2,43 @@ 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 { CardSpacing } from "./card.config";
+import { TagProps } from "../../__internal__/utils/helpers/tags/tags";
 declare type DesignTokensType = keyof typeof DesignTokens;
 declare type BoxShadowsType = Extract<DesignTokensType, `boxShadow${string}`>;
-export interface CardProps extends MarginProps, CardContextProps {
-    /** Identifier used for testing purposes, applied to the root element of the component. */
-    "data-element"?: string;
-    /** Identifier used for testing purposes, applied to the root element of the component. */
-    "data-role"?: string;
-    /**
-     * [DEPRECATED - use `data-role` instead]
-     * Identifier used for testing purposes, applied to the root element of the component.
+export interface CardProps extends MarginProps, Pick<TagProps, "data-element" | "data-role"> {
+    /** Action to be executed when card is clicked or enter pressed.
+     * Renders a button when passed and no draggable or href props set
      * */
-    dataRole?: string;
-    /** Action to be executed when card is clicked or enter pressed */
-    action?: (event: React.MouseEvent<HTMLDivElement>) => void;
+    onClick?: (event: React.MouseEvent<HTMLAnchorElement> | React.MouseEvent<HTMLDivElement> | React.KeyboardEvent<HTMLAnchorElement> | React.KeyboardEvent<HTMLDivElement>) => void;
     /** Style value for width of card */
-    cardWidth?: string;
+    width?: string;
     /** Child nodes */
     children: React.ReactNode;
     /** Flag to indicate if card is draggable */
     draggable?: boolean;
     /** Height of the component (any valid CSS value) */
     height?: string;
-    /** Flag to indicate if card is interactive */
-    interactive?: boolean;
-    /** Size of card for applying padding */
-    spacing?: CardSpacing;
     /** Design token for custom Box Shadow. Note: please check that the box shadow design token you are using is compatible with the Card component. */
     boxShadow?: BoxShadowsType;
-    /** Design token for custom Box Shadow on hover. Interactive prop must be True. Note: please check that the box shadow design token you are using is compatible with the Card component. */
+    /** Design token for custom Box Shadow on hover. One of `onClick` or `href` props must be true. Note: please check that the box shadow design token you are using is compatible with the Card component. */
     hoverBoxShadow?: BoxShadowsType;
+    /** Size of card for applying padding */
+    spacing?: CardContextProps["spacing"];
+    /** Sets the level of roundness of the corners, "default" is 8px and "large" is 16px */
+    roundness?: CardContextProps["roundness"];
+    /** The path to navigate to. Renders an anchor element when passed and no draggable prop set */
+    href?: string;
+    /** The footer to render underneath the Card content */
+    footer?: React.ReactNode;
+    /** Target property in which link should open ie: _blank, _self, _parent, _top */
+    target?: string;
+    /** String for rel property when card has an href prop set */
+    rel?: string;
+    /** Prop to specify an aria-label for the component */
+    "aria-label"?: string;
 }
 declare const Card: {
-    ({ "data-element": dataElement, "data-role": dataRole, dataRole: oldDataRole, action, children, cardWidth, draggable, height, interactive, spacing, boxShadow, hoverBoxShadow, roundness, ...rest }: CardProps): React.JSX.Element;
+    ({ "data-element": dataElement, "data-role": dataRole, children, width, draggable, height, onClick, href, spacing, boxShadow, hoverBoxShadow, roundness, footer, rel, target, "aria-label": ariaLabel, ...rest }: CardProps): React.JSX.Element;
     displayName: string;
 };
 export default Card;

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

@@ -1,75 +1,70 @@
 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, { useCallback } from "react";
+import React, { useState } from "react";
 import PropTypes from "prop-types";
 import { filterStyledSystemMarginProps } from "../../style/utils";
 import CardContext from "./__internal__/card-context";
-import StyledCard from "./card.style";
+import { StyledCard, StyledCardContent } from "./card.style";
 import Icon from "../icon";
-import { CardRow, CardFooter } from ".";
-import Logger from "../../__internal__/utils/logger";
-function hasDisplayName(child, displayName) {
-  return child.type.displayName === displayName;
-}
-let isDeprecationWarningTriggered = false;
+import tagComponent from "../../__internal__/utils/helpers/tags/tags";
 const Card = ({
   "data-element": dataElement,
   "data-role": dataRole,
-  dataRole: oldDataRole,
-  action,
   children,
-  cardWidth = "500px",
+  width = "500px",
   draggable,
   height,
-  interactive,
+  onClick,
+  href,
   spacing = "medium",
   boxShadow,
   hoverBoxShadow,
   roundness = "default",
+  footer,
+  rel,
+  target,
+  "aria-label": ariaLabel,
   ...rest
 }) => {
-  if (!isDeprecationWarningTriggered && oldDataRole) {
-    isDeprecationWarningTriggered = true;
-    Logger.deprecate("The `dataRole` prop of `Card` is now deprecated. Please use the kebab-case version `data-role` instead.");
+  const [contentRef, setContentRef] = useState(null);
+  const interactive = !!(onClick || href);
+  let footerWarningFired = false;
+  if (!footerWarningFired && interactive && contentRef?.querySelector("[data-component='card-footer']")) {
+    footerWarningFired = true;
+    // eslint-disable-next-line no-console
+    console.warn("This `Card` is interactive you should use the `footer` prop to render a `CardFooter` to avoid potential accessibility issues");
   }
-  const renderChildren = useCallback(() => React.Children.map(children, (child, index) => {
-    if (! /*#__PURE__*/React.isValidElement(child) || /*#__PURE__*/React.isValidElement(child) && !hasDisplayName(child, CardRow.displayName) && !hasDisplayName(child, CardFooter.displayName)) return child;
-    if (index !== 0) return /*#__PURE__*/React.cloneElement(child, {
-      spacing
-    });
-    const childProps = {
-      spacing,
-      ...child.props
-    };
-    if (hasDisplayName(child, CardRow.displayName)) {
-      const pad = React.Children.toArray(children).filter(row => /*#__PURE__*/React.isValidElement(row) && hasDisplayName(row, CardRow.displayName)).length === 1 ? "pt" : "py";
-      childProps[pad] = 0;
-    }
-    return /*#__PURE__*/React.cloneElement(child, childProps);
-  }), [children, spacing]);
   return /*#__PURE__*/React.createElement(StyledCard, _extends({
-    "data-component": "card",
-    "data-element": dataElement,
-    "data-role": dataRole || oldDataRole,
-    cardWidth: cardWidth,
-    interactive: !!interactive,
+    cardWidth: width,
+    interactive: interactive,
     draggable: !!draggable,
     spacing: spacing,
     boxShadow: boxShadow,
     hoverBoxShadow: hoverBoxShadow,
-    onClick: interactive && !draggable ? action : undefined,
-    height: height
-  }, interactive && {
-    tabIndex: 0,
-    type: "button"
-  }, {
+    height: height,
     roundness: roundness
-  }, filterStyledSystemMarginProps(rest)), draggable && /*#__PURE__*/React.createElement(Icon, {
+  }, filterStyledSystemMarginProps(rest), tagComponent("card", {
+    "data-element": dataElement,
+    "data-role": dataRole
+  })), draggable && /*#__PURE__*/React.createElement(Icon, {
     type: "drag"
   }), /*#__PURE__*/React.createElement(CardContext.Provider, {
     value: {
-      roundness
+      roundness,
+      spacing
     }
-  }, renderChildren()));
+  }, /*#__PURE__*/React.createElement(StyledCardContent, {
+    "data-element": "card-content-container",
+    onClick: !draggable ? onClick : undefined,
+    href: !draggable ? href : undefined,
+    rel: !draggable && href ? rel : undefined,
+    target: !draggable && href ? target : undefined,
+    interactive: interactive,
+    spacing: spacing,
+    roundness: roundness,
+    hasFooter: !!footer,
+    ref: setContentRef,
+    "aria-label": ariaLabel
+  }, children), footer));
 };
 Card.displayName = "Card";
 export default Card;

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

@@ -1,17 +1,46 @@
 import { MarginProps } from "styled-system";
 import * as DesignTokens from "@sage/design-tokens/js/base/common";
-import { CardSpacing } from "./card.config";
 import { CardContextProps } from "./__internal__/card-context";
+import { CardProps } from "./card.component";
+export declare const paddingSizes: {
+    small: string;
+    medium: string;
+    large: string;
+};
+export declare const marginSizes: {
+    small: string;
+    medium: string;
+    large: string;
+};
 declare type DesignTokensType = keyof typeof DesignTokens;
 export declare type BoxShadowsType = Extract<DesignTokensType, `boxShadow${string}`>;
-export interface StyledCardProps extends MarginProps, CardContextProps {
+export interface StyledCardProps extends MarginProps, Pick<CardContextProps, "roundness" | "spacing">, Pick<CardProps, "href" | "onClick"> {
     cardWidth: string;
     interactive: boolean;
     draggable: boolean;
     height?: string;
-    spacing: CardSpacing;
     boxShadow?: BoxShadowsType;
     hoverBoxShadow?: BoxShadowsType;
 }
 declare const StyledCard: import("styled-components").StyledComponent<"div", any, StyledCardProps, never>;
-export default StyledCard;
+interface StyledCardContentProps extends Pick<CardContextProps, "roundness" | "spacing"> {
+    interactive?: boolean;
+    href?: string;
+    hasFooter: boolean;
+    target?: string;
+    rel?: string;
+}
+declare const StyledCardContent: import("styled-components").StyledComponent<"div", any, ({
+    as: string;
+    role?: undefined;
+    type?: undefined;
+} | {
+    as: string;
+    role: "button";
+    type: string;
+} | {
+    as?: undefined;
+    role?: undefined;
+    type?: undefined;
+}) & StyledCardContentProps, "type" | "role" | "as">;
+export { StyledCard, StyledCardContent };

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

@@ -1,10 +1,16 @@
 import styled, { css } from "styled-components";
 import { margin } from "styled-system";
 import baseTheme from "../../style/themes/base";
-const paddingSizes = {
-  small: "0 24px",
-  medium: "0 32px",
-  large: "0 48px"
+import addFocusStyling from "../../style/utils/add-focus-styling";
+export const paddingSizes = {
+  small: "0 var(--spacing300)",
+  medium: "0 var(--spacing400)",
+  large: "0 var(--spacing600)"
+};
+export const marginSizes = {
+  small: "0 -24px",
+  medium: "0 -32px",
+  large: "0 -48px"
 };
 const StyledCard = styled.div`
   ${({
@@ -26,6 +32,7 @@ const StyledCard = styled.div`
     flex-direction: column;
     height: ${height};
     justify-content: space-between;
+    align-items: normal;
     margin: 25px;
     outline: none;
     padding: ${paddingSizes[spacing]};
@@ -35,8 +42,6 @@ const StyledCard = styled.div`
     ${margin}
 
     ${interactive && css`
-      cursor: pointer;
-
       :hover,
       :focus {
         box-shadow: var(--${hoverBoxShadow});
@@ -52,7 +57,78 @@ const StyledCard = styled.div`
     }
   `}
 `;
+const StyledCardContent = styled.div.attrs(({
+  href,
+  onClick
+}) => {
+  if (href) {
+    return {
+      as: "a"
+    };
+  }
+  if (onClick) {
+    return {
+      as: "button",
+      role: "button",
+      type: "button"
+    };
+  }
+  return {};
+})`
+  ${({
+  interactive,
+  theme
+}) => interactive && css`
+      cursor: pointer;
+
+      ${!theme.focusRedesignOptOut && css`
+        :focus {
+          ${addFocusStyling()};
+          position: relative;
+        }
+      `}
+    `}
+
+  outline: none;
+  text-decoration: none;
+  background-color: inherit;
+  border: none;
+  padding: 0;
+
+  ${({
+  spacing
+}) => `
+    padding: ${paddingSizes[spacing]};
+    margin: ${marginSizes[spacing]};
+  `}
+
+  ${({
+  roundness,
+  hasFooter
+}) => css`
+    ${roundness === "default" && css`
+      border-top-left-radius: var(--borderRadius100);
+      border-top-right-radius: var(--borderRadius100);
+      ${!hasFooter && css`
+        border-bottom-left-radius: var(--borderRadius100);
+        border-bottom-right-radius: var(--borderRadius100);
+      `}
+    `}
+
+    ${roundness !== "default" && css`
+      border-top-left-radius: var(--borderRadius200);
+      border-top-right-radius: var(--borderRadius200);
+      ${!hasFooter && css`
+        border-bottom-left-radius: var(--borderRadius200);
+        border-bottom-right-radius: var(--borderRadius200);
+      `}
+    `}
+  `}
+`;
 StyledCard.defaultProps = {
   theme: baseTheme
 };
-export default StyledCard;
+StyledCardContent.defaultProps = {
+  theme: baseTheme
+};
+export { StyledCard, StyledCardContent };

package/esm/components/select/select-list/select-list.component.js

@@ -324,8 +324,15 @@ const SelectList = /*#__PURE__*/React.forwardRef(({
       return;
     }
     setCurrentOptionsListIndex(indexOfMatch);
-    virtualizer.scrollToIndex(indexOfMatch, SCROLL_OPTIONS);
-  }, [getIndexOfMatch, highlightedValue, virtualizer, handleListScroll, listContainerRef]);
+  }, [getIndexOfMatch, highlightedValue]);
+
+  // ensure that the currently-selected option is always visible immediately after
+  // it has been changed
+  useEffect(() => {
+    if (currentOptionsListIndex > -1) {
+      virtualizer.scrollToIndex(currentOptionsListIndex, SCROLL_OPTIONS);
+    }
+  }, [currentOptionsListIndex, virtualizer]);
   useEffect(() => {
     if (isLoading && currentOptionsListIndex === lastOptionIndex && lastOptionIndex > -1) {
       virtualizer.scrollToIndex(lastOptionIndex, {

package/esm/locales/{pl-pl.d.ts → __internal__/pl-pl.d.ts}

@@ -1,4 +1,4 @@
-import Locale from "./locale";
+import Locale from "../locale";
 export declare const PolishPlural: (singularNominativ: string, pluralNominativ: string, pluralGenitive: string, value: number) => string;
 declare const plPL: Locale;
 export { PolishPlural as PolishPlurals };

package/esm/locales/{pl-pl.js → __internal__/pl-pl.js}

@@ -1,4 +1,4 @@
-import { pl as plDateLocale } from "./date-fns-locales";
+import { pl as plDateLocale } from "../date-fns-locales";
 const isSingular = count => (typeof count === "string" ? parseInt(count) : count) === 1;
 export const PolishPlural = (singularNominativ, pluralNominativ, pluralGenitive, value) => {
   if (value === 1) {

package/esm/locales/index.d.ts

@@ -1,3 +1,2 @@
 export type { default } from "./locale";
 export { default as EnGb } from "./en-gb";
-export { default as PlPl } from "./pl-pl";

package/esm/locales/index.js

@@ -1,2 +1 @@
-export { default as EnGb } from "./en-gb";
-export { default as PlPl } from "./pl-pl";
+export { default as EnGb } from "./en-gb";

package/lib/components/card/__internal__/card-context/index.d.ts

@@ -1,7 +1,10 @@
 import React from "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";
+    /** Size of card for applying padding */
+    spacing: CardSpacing;
 }
 declare const _default: React.Context<CardContextProps>;
 export default _default;

package/lib/components/card/__internal__/card-context/index.js

@@ -6,4 +6,6 @@ Object.defineProperty(exports, "__esModule", {
 exports.default = void 0;
 var _react = _interopRequireDefault(require("react"));
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
-var _default = exports.default = /*#__PURE__*/_react.default.createContext({});
+var _default = exports.default = /*#__PURE__*/_react.default.createContext({
+  spacing: "medium"
+});

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

@@ -1,11 +1,12 @@
 import React from "react";
 import { StyledCardColumnProps } from "./card-column.style";
-export interface CardColumnProps extends Partial<StyledCardColumnProps> {
+import { TagProps } from "../../../__internal__/utils/helpers/tags/tags";
+export interface CardColumnProps extends Partial<StyledCardColumnProps>, Pick<TagProps, "data-element" | "data-role"> {
     /** Child elements */
     children: React.ReactNode;
 }
 declare const CardColumn: {
-    ({ align, children }: CardColumnProps): React.JSX.Element;
+    ({ align, children, ...rest }: CardColumnProps): React.JSX.Element;
     displayName: string;
 };
 export default CardColumn;