carbon-react 124.6.0 → 125.0.0

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

@@ -7,13 +7,18 @@ exports.default = void 0;
 var _react = _interopRequireDefault(require("react"));
 var _propTypes = _interopRequireDefault(require("prop-types"));
 var _cardColumn = _interopRequireDefault(require("./card-column.style"));
+var _tags = _interopRequireDefault(require("../../../__internal__/utils/helpers/tags/tags"));
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+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); }
 const CardColumn = ({
   align = "center",
-  children
-}) => /*#__PURE__*/_react.default.createElement(_cardColumn.default, {
-  align: align,
-  "data-element": "card-column"
-}, children);
+  children,
+  ...rest
+}) => /*#__PURE__*/_react.default.createElement(_cardColumn.default, _extends({
+  align: align
+}, (0, _tags.default)("card-column", {
+  "data-element": "card-column",
+  ...rest
+})), children);
 CardColumn.displayName = "CardColumn";
 var _default = exports.default = CardColumn;

package/lib/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/lib/components/card/card-footer/card-footer.component.js

@@ -9,25 +9,27 @@ var _propTypes = _interopRequireDefault(require("prop-types"));
 var _utils = require("../../../style/utils");
 var _cardFooter = _interopRequireDefault(require("./card-footer.style"));
 var _cardContext = _interopRequireDefault(require("../__internal__/card-context"));
+var _tags = _interopRequireDefault(require("../../../__internal__/utils/helpers/tags/tags"));
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 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 && Object.prototype.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; }
 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); }
 const CardFooter = ({
-  spacing = "medium",
   children,
   variant = "default",
   ...rest
 }) => {
   const {
-    roundness
+    roundness,
+    spacing
   } = (0, _react.useContext)(_cardContext.default);
   return /*#__PURE__*/_react.default.createElement(_cardFooter.default, _extends({
-    key: "card-footer",
-    "data-element": "card-footer",
     spacing: spacing,
     variant: variant
-  }, (0, _utils.filterStyledSystemMarginProps)(rest), (0, _utils.filterStyledSystemPaddingProps)(rest), {
+  }, (0, _utils.filterStyledSystemMarginProps)(rest), (0, _utils.filterStyledSystemPaddingProps)(rest), (0, _tags.default)("card-footer", {
+    "data-element": "card-footer",
+    ...rest
+  }), {
     roundness: roundness
   }), children);
 };

package/lib/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/lib/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/lib/components/card/card-row/card-row.component.js

@@ -4,21 +4,32 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = void 0;
-var _react = _interopRequireDefault(require("react"));
+var _react = _interopRequireWildcard(require("react"));
 var _propTypes = _interopRequireDefault(require("prop-types"));
 var _utils = require("../../../style/utils");
 var _cardRow = _interopRequireDefault(require("./card-row.style"));
+var _tags = _interopRequireDefault(require("../../../__internal__/utils/helpers/tags/tags"));
+var _cardContext = _interopRequireDefault(require("../__internal__/card-context"));
+var _guid = _interopRequireDefault(require("../../../__internal__/utils/helpers/guid"));
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+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 && Object.prototype.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; }
 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); }
 const CardRow = ({
   children,
-  spacing = "medium",
   ...rest
 }) => {
+  const {
+    spacing
+  } = (0, _react.useContext)(_cardContext.default);
+  const id = (0, _react.useRef)((0, _guid.default)());
   return /*#__PURE__*/_react.default.createElement(_cardRow.default, _extends({
-    "data-element": "card-row",
+    id: id.current,
     spacing: spacing
-  }, (0, _utils.filterStyledSystemPaddingProps)(rest)), children);
+  }, (0, _utils.filterStyledSystemPaddingProps)(rest), (0, _tags.default)("card-row", {
+    "data-element": "card-row",
+    ...rest
+  })), children);
 };
 CardRow.displayName = "CardRow";
 var _default = exports.default = CardRow;

package/lib/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/lib/components/card/card-row/card-row.style.js

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

package/lib/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/lib/components/card/card.component.js

@@ -8,77 +8,72 @@ var _react = _interopRequireWildcard(require("react"));
 var _propTypes = _interopRequireDefault(require("prop-types"));
 var _utils = require("../../style/utils");
 var _cardContext = _interopRequireDefault(require("./__internal__/card-context"));
-var _card = _interopRequireDefault(require("./card.style"));
+var _card = require("./card.style");
 var _icon = _interopRequireDefault(require("../icon"));
-var _ = require(".");
-var _logger = _interopRequireDefault(require("../../__internal__/utils/logger"));
+var _tags = _interopRequireDefault(require("../../__internal__/utils/helpers/tags/tags"));
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 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 && Object.prototype.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; }
 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); }
-function hasDisplayName(child, displayName) {
-  return child.type.displayName === displayName;
-}
-let isDeprecationWarningTriggered = false;
 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.default.deprecate("The `dataRole` prop of `Card` is now deprecated. Please use the kebab-case version `data-role` instead.");
+  const [contentRef, setContentRef] = (0, _react.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 = (0, _react.useCallback)(() => _react.default.Children.map(children, (child, index) => {
-    if (! /*#__PURE__*/_react.default.isValidElement(child) || /*#__PURE__*/_react.default.isValidElement(child) && !hasDisplayName(child, _.CardRow.displayName) && !hasDisplayName(child, _.CardFooter.displayName)) return child;
-    if (index !== 0) return /*#__PURE__*/_react.default.cloneElement(child, {
-      spacing
-    });
-    const childProps = {
-      spacing,
-      ...child.props
-    };
-    if (hasDisplayName(child, _.CardRow.displayName)) {
-      const pad = _react.default.Children.toArray(children).filter(row => /*#__PURE__*/_react.default.isValidElement(row) && hasDisplayName(row, _.CardRow.displayName)).length === 1 ? "pt" : "py";
-      childProps[pad] = 0;
-    }
-    return /*#__PURE__*/_react.default.cloneElement(child, childProps);
-  }), [children, spacing]);
-  return /*#__PURE__*/_react.default.createElement(_card.default, _extends({
-    "data-component": "card",
-    "data-element": dataElement,
-    "data-role": dataRole || oldDataRole,
-    cardWidth: cardWidth,
-    interactive: !!interactive,
+  return /*#__PURE__*/_react.default.createElement(_card.StyledCard, _extends({
+    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
-  }, (0, _utils.filterStyledSystemMarginProps)(rest)), draggable && /*#__PURE__*/_react.default.createElement(_icon.default, {
+  }, (0, _utils.filterStyledSystemMarginProps)(rest), (0, _tags.default)("card", {
+    "data-element": dataElement,
+    "data-role": dataRole
+  })), draggable && /*#__PURE__*/_react.default.createElement(_icon.default, {
     type: "drag"
   }), /*#__PURE__*/_react.default.createElement(_cardContext.default.Provider, {
     value: {
-      roundness
+      roundness,
+      spacing
     }
-  }, renderChildren()));
+  }, /*#__PURE__*/_react.default.createElement(_card.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";
 var _default = exports.default = Card;

package/lib/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/lib/components/card/card.style.js

@@ -3,19 +3,25 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.default = void 0;
+exports.paddingSizes = exports.marginSizes = exports.StyledCardContent = exports.StyledCard = void 0;
 var _styledComponents = _interopRequireWildcard(require("styled-components"));
 var _styledSystem = require("styled-system");
 var _base = _interopRequireDefault(require("../../style/themes/base"));
+var _addFocusStyling = _interopRequireDefault(require("../../style/utils/add-focus-styling"));
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 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 && Object.prototype.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 paddingSizes = {
-  small: "0 24px",
-  medium: "0 32px",
-  large: "0 48px"
+const paddingSizes = exports.paddingSizes = {
+  small: "0 var(--spacing300)",
+  medium: "0 var(--spacing400)",
+  large: "0 var(--spacing600)"
 };
-const StyledCard = _styledComponents.default.div`
+const marginSizes = exports.marginSizes = {
+  small: "0 -24px",
+  medium: "0 -32px",
+  large: "0 -48px"
+};
+const StyledCard = exports.StyledCard = _styledComponents.default.div`
   ${({
   cardWidth,
   interactive,
@@ -35,6 +41,7 @@ const StyledCard = _styledComponents.default.div`
     flex-direction: column;
     height: ${height};
     justify-content: space-between;
+    align-items: normal;
     margin: 25px;
     outline: none;
     padding: ${paddingSizes[spacing]};
@@ -44,8 +51,6 @@ const StyledCard = _styledComponents.default.div`
     ${_styledSystem.margin}
 
     ${interactive && (0, _styledComponents.css)`
-      cursor: pointer;
-
       :hover,
       :focus {
         box-shadow: var(--${hoverBoxShadow});
@@ -61,7 +66,77 @@ const StyledCard = _styledComponents.default.div`
     }
   `}
 `;
+const StyledCardContent = exports.StyledCardContent = _styledComponents.default.div.attrs(({
+  href,
+  onClick
+}) => {
+  if (href) {
+    return {
+      as: "a"
+    };
+  }
+  if (onClick) {
+    return {
+      as: "button",
+      role: "button",
+      type: "button"
+    };
+  }
+  return {};
+})`
+  ${({
+  interactive,
+  theme
+}) => interactive && (0, _styledComponents.css)`
+      cursor: pointer;
+
+      ${!theme.focusRedesignOptOut && (0, _styledComponents.css)`
+        :focus {
+          ${(0, _addFocusStyling.default)()};
+          position: relative;
+        }
+      `}
+    `}
+
+  outline: none;
+  text-decoration: none;
+  background-color: inherit;
+  border: none;
+  padding: 0;
+
+  ${({
+  spacing
+}) => `
+    padding: ${paddingSizes[spacing]};
+    margin: ${marginSizes[spacing]};
+  `}
+
+  ${({
+  roundness,
+  hasFooter
+}) => (0, _styledComponents.css)`
+    ${roundness === "default" && (0, _styledComponents.css)`
+      border-top-left-radius: var(--borderRadius100);
+      border-top-right-radius: var(--borderRadius100);
+      ${!hasFooter && (0, _styledComponents.css)`
+        border-bottom-left-radius: var(--borderRadius100);
+        border-bottom-right-radius: var(--borderRadius100);
+      `}
+    `}
+
+    ${roundness !== "default" && (0, _styledComponents.css)`
+      border-top-left-radius: var(--borderRadius200);
+      border-top-right-radius: var(--borderRadius200);
+      ${!hasFooter && (0, _styledComponents.css)`
+        border-bottom-left-radius: var(--borderRadius200);
+        border-bottom-right-radius: var(--borderRadius200);
+      `}
+    `}
+  `}
+`;
 StyledCard.defaultProps = {
   theme: _base.default
 };
-var _default = exports.default = StyledCard;
+StyledCardContent.defaultProps = {
+  theme: _base.default
+};

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

@@ -333,8 +333,15 @@ const SelectList = /*#__PURE__*/_react.default.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
+  (0, _react.useEffect)(() => {
+    if (currentOptionsListIndex > -1) {
+      virtualizer.scrollToIndex(currentOptionsListIndex, SCROLL_OPTIONS);
+    }
+  }, [currentOptionsListIndex, virtualizer]);
   (0, _react.useEffect)(() => {
     if (isLoading && currentOptionsListIndex === lastOptionIndex && lastOptionIndex > -1) {
       virtualizer.scrollToIndex(lastOptionIndex, {

package/lib/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/lib/locales/{pl-pl.js → __internal__/pl-pl.js}

@@ -4,7 +4,7 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = exports.PolishPlurals = exports.PolishPlural = void 0;
-var _dateFnsLocales = require("./date-fns-locales");
+var _dateFnsLocales = require("../date-fns-locales");
 const isSingular = count => (typeof count === "string" ? parseInt(count) : count) === 1;
 const PolishPlural = (singularNominativ, pluralNominativ, pluralGenitive, value) => {
   if (value === 1) {

package/lib/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/lib/locales/index.js

@@ -9,12 +9,5 @@ Object.defineProperty(exports, "EnGb", {
     return _enGb.default;
   }
 });
-Object.defineProperty(exports, "PlPl", {
-  enumerable: true,
-  get: function () {
-    return _plPl.default;
-  }
-});
 var _enGb = _interopRequireDefault(require("./en-gb"));
-var _plPl = _interopRequireDefault(require("./pl-pl"));
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "carbon-react",
-  "version": "124.6.0",
+  "version": "125.0.0",
   "description": "A library of reusable React components for easily building user interfaces.",
   "files": [
     "lib",