@coinbase/cds-web 8.41.0 → 8.43.0

package/esm/cards/MediaCard/MediaCardLayout.js

@@ -0,0 +1,77 @@
+import React, { memo, useMemo } from 'react';
+import { Box } from '../../layout';
+import { HStack } from '../../layout/HStack';
+import { VStack } from '../../layout/VStack';
+import { Text } from '../../typography/Text';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+export const MediaCardLayout = /*#__PURE__*/memo(_ref => {
+  let {
+    title,
+    subtitle,
+    description,
+    thumbnail,
+    media,
+    mediaPlacement = 'end',
+    classNames = {},
+    styles = {}
+  } = _ref;
+  const titleNode = useMemo(() => {
+    if (typeof title === 'string') {
+      return /*#__PURE__*/_jsx(Text, {
+        as: "div",
+        font: "headline",
+        numberOfLines: 2,
+        children: title
+      });
+    }
+    return title;
+  }, [title]);
+  const subtitleNode = useMemo(() => typeof subtitle === 'string' ? /*#__PURE__*/_jsx(Text, {
+    as: "div",
+    color: "fgMuted",
+    font: "legal",
+    numberOfLines: 1,
+    children: subtitle
+  }) : subtitle, [subtitle]);
+  const headerNode = useMemo(() => /*#__PURE__*/_jsxs(VStack, {
+    className: classNames === null || classNames === void 0 ? void 0 : classNames.headerContainer,
+    style: styles === null || styles === void 0 ? void 0 : styles.headerContainer,
+    children: [subtitleNode, titleNode]
+  }), [subtitleNode, titleNode, styles === null || styles === void 0 ? void 0 : styles.headerContainer, classNames === null || classNames === void 0 ? void 0 : classNames.headerContainer]);
+  const descriptionNode = useMemo(() => typeof description === 'string' ? /*#__PURE__*/_jsx(Text, {
+    as: "p",
+    color: "fgMuted",
+    font: "label2",
+    numberOfLines: 2,
+    children: description
+  }) : description, [description]);
+  const contentNode = useMemo(() => /*#__PURE__*/_jsxs(VStack, {
+    className: classNames === null || classNames === void 0 ? void 0 : classNames.contentContainer,
+    flexBasis: "50%",
+    gap: 4,
+    justifyContent: "space-between",
+    padding: 2,
+    style: styles === null || styles === void 0 ? void 0 : styles.contentContainer,
+    children: [thumbnail, /*#__PURE__*/_jsxs(VStack, {
+      className: classNames === null || classNames === void 0 ? void 0 : classNames.textContainer,
+      style: styles === null || styles === void 0 ? void 0 : styles.textContainer,
+      children: [headerNode, descriptionNode]
+    })]
+  }), [thumbnail, headerNode, descriptionNode, styles === null || styles === void 0 ? void 0 : styles.contentContainer, classNames === null || classNames === void 0 ? void 0 : classNames.contentContainer, classNames === null || classNames === void 0 ? void 0 : classNames.textContainer, styles === null || styles === void 0 ? void 0 : styles.textContainer]);
+  const mediaNode = useMemo(() => {
+    if (media) {
+      return /*#__PURE__*/_jsx(Box, {
+        className: classNames === null || classNames === void 0 ? void 0 : classNames.mediaContainer,
+        flexBasis: "50%",
+        style: styles === null || styles === void 0 ? void 0 : styles.mediaContainer,
+        children: media
+      });
+    }
+  }, [media, styles === null || styles === void 0 ? void 0 : styles.mediaContainer, classNames === null || classNames === void 0 ? void 0 : classNames.mediaContainer]);
+  return /*#__PURE__*/_jsxs(HStack, {
+    className: classNames === null || classNames === void 0 ? void 0 : classNames.layoutContainer,
+    flexGrow: 1,
+    style: styles === null || styles === void 0 ? void 0 : styles.layoutContainer,
+    children: [mediaPlacement === 'start' ? mediaNode : contentNode, mediaPlacement === 'end' ? mediaNode : contentNode]
+  });
+});

package/esm/cards/MediaCard/__figma__/MediaCard.figma.js

@@ -0,0 +1,50 @@
+function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
+function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
+function _defineProperty(e, r, t) { return (r = _toPropertyKey(r)) in e ? Object.defineProperty(e, r, { value: t, enumerable: !0, configurable: !0, writable: !0 }) : e[r] = t, e; }
+function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol" == typeof i ? i : i + ""; }
+function _toPrimitive(t, r) { if ("object" != typeof t || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r || "default"); if ("object" != typeof i) return i; throw new TypeError("@@toPrimitive must return a primitive value."); } return ("string" === r ? String : Number)(t); }
+import React from 'react';
+import { ethBackground } from '@coinbase/cds-common/internal/data/assets';
+import { figma } from '@figma/code-connect';
+import { RemoteImage } from '../../../media';
+import { MediaCard } from '../';
+import { jsx as _jsx } from "react/jsx-runtime";
+figma.connect(MediaCard, 'https://www.figma.com/design/k5CtyJccNQUGMI5bI4lJ2g/%E2%9C%A8-CDS-Components?node-id=72941-18302&m=dev', {
+  imports: ["import { MediaCard } from '@coinbase/cds-web/cards/MediaCard'", "import { Avatar } from '@coinbase/cds-web/media/Avatar'"],
+  props: {
+    title: figma.string('title'),
+    subtitle: figma.boolean('show subtitle', {
+      true: figma.string('↳ subtitle'),
+      false: undefined
+    }),
+    description: figma.boolean('show subdetail', {
+      true: figma.instance('↳ subdetail'),
+      false: undefined
+    }),
+    thumbnail: figma.boolean('show media', {
+      true: figma.instance('↳ media'),
+      false: undefined
+    }),
+    mediaPlacement: figma.enum('image placement', {
+      left: 'start',
+      right: 'end',
+      none: undefined
+    }),
+    media: figma.enum('image placement', {
+      left: /*#__PURE__*/_jsx(RemoteImage, {
+        alt: "Media",
+        shape: "rectangle",
+        source: ethBackground,
+        width: "100%"
+      }),
+      right: /*#__PURE__*/_jsx(RemoteImage, {
+        alt: "Media",
+        shape: "rectangle",
+        source: ethBackground,
+        width: "100%"
+      }),
+      none: undefined
+    })
+  },
+  example: props => /*#__PURE__*/_jsx(MediaCard, _objectSpread({}, props))
+});

package/esm/cards/MediaCard/index.js

@@ -0,0 +1,61 @@
+const _excluded = ["root"],
+  _excluded2 = ["root"],
+  _excluded3 = ["title", "subtitle", "description", "thumbnail", "media", "children", "mediaPlacement", "as", "classNames", "styles", "className", "style"];
+function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
+function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
+function _defineProperty(e, r, t) { return (r = _toPropertyKey(r)) in e ? Object.defineProperty(e, r, { value: t, enumerable: !0, configurable: !0, writable: !0 }) : e[r] = t, e; }
+function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol" == typeof i ? i : i + ""; }
+function _toPrimitive(t, r) { if ("object" != typeof t || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r || "default"); if ("object" != typeof i) return i; throw new TypeError("@@toPrimitive must return a primitive value."); } return ("string" === r ? String : Number)(t); }
+function _objectWithoutProperties(e, t) { if (null == e) return {}; var o, r, i = _objectWithoutPropertiesLoose(e, t); if (Object.getOwnPropertySymbols) { var n = Object.getOwnPropertySymbols(e); for (r = 0; r < n.length; r++) o = n[r], -1 === t.indexOf(o) && {}.propertyIsEnumerable.call(e, o) && (i[o] = e[o]); } return i; }
+function _objectWithoutPropertiesLoose(r, e) { if (null == r) return {}; var t = {}; for (var n in r) if ({}.hasOwnProperty.call(r, n)) { if (-1 !== e.indexOf(n)) continue; t[n] = r[n]; } return t; }
+import React, { forwardRef, memo } from 'react';
+import { cx } from '../../cx';
+import { CardRoot } from '../CardRoot';
+import { MediaCardLayout } from './MediaCardLayout';
+import { jsx as _jsx } from "react/jsx-runtime";
+const mediaCardContainerProps = {
+  borderRadius: 500,
+  flexDirection: 'row',
+  background: 'bgAlternate',
+  overflow: 'hidden'
+};
+export const MediaCard = /*#__PURE__*/memo(/*#__PURE__*/forwardRef((_ref, ref) => {
+  let {
+      title,
+      subtitle,
+      description,
+      thumbnail,
+      media,
+      children,
+      mediaPlacement = 'end',
+      as,
+      classNames: {
+        root: rootClassName
+      } = {},
+      styles: {
+        root: rootStyle
+      } = {},
+      className,
+      style
+    } = _ref,
+    layoutClassNames = _objectWithoutProperties(_ref.classNames, _excluded),
+    layoutStyles = _objectWithoutProperties(_ref.styles, _excluded2),
+    props = _objectWithoutProperties(_ref, _excluded3);
+  return /*#__PURE__*/_jsx(CardRoot, _objectSpread(_objectSpread(_objectSpread({
+    ref: ref,
+    as: as,
+    className: cx(rootClassName, className),
+    style: _objectSpread(_objectSpread({}, rootStyle), style)
+  }, mediaCardContainerProps), props), {}, {
+    children: /*#__PURE__*/_jsx(MediaCardLayout, {
+      classNames: layoutClassNames,
+      description: description,
+      media: media,
+      mediaPlacement: mediaPlacement,
+      styles: layoutStyles,
+      subtitle: subtitle,
+      thumbnail: thumbnail,
+      title: title
+    })
+  }));
+}));

package/esm/cards/MessagingCard/MessagingCardLayout.js

@@ -0,0 +1,195 @@
+function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
+function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
+function _defineProperty(e, r, t) { return (r = _toPropertyKey(r)) in e ? Object.defineProperty(e, r, { value: t, enumerable: !0, configurable: !0, writable: !0 }) : e[r] = t, e; }
+function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol" == typeof i ? i : i + ""; }
+function _toPrimitive(t, r) { if ("object" != typeof t || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r || "default"); if ("object" != typeof i) return i; throw new TypeError("@@toPrimitive must return a primitive value."); } return ("string" === r ? String : Number)(t); }
+import { memo, useMemo } from 'react';
+import { Button } from '../../buttons/Button';
+import { IconButton } from '../../buttons/IconButton';
+import { Box, VStack } from '../../layout';
+import { HStack } from '../../layout/HStack';
+import { Pressable } from '../../system/Pressable';
+import { Tag } from '../../tag/Tag';
+import { Text } from '../../typography/Text';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+export const MessagingCardLayout = /*#__PURE__*/memo(_ref => {
+  let {
+    type,
+    title,
+    description,
+    tag,
+    action,
+    onActionButtonClick,
+    actionButtonAccessibilityLabel,
+    onDismissButtonClick,
+    dismissButtonAccessibilityLabel,
+    mediaPlacement = 'end',
+    media,
+    styles = {},
+    classNames = {},
+    dismissButton
+  } = _ref;
+  const titleNode = useMemo(() => {
+    if (typeof title === 'string') {
+      return /*#__PURE__*/_jsx(Text, {
+        as: "div",
+        color: type === 'upsell' ? 'fgInverse' : 'fg',
+        font: "headline",
+        numberOfLines: 2,
+        children: title
+      });
+    }
+    return title;
+  }, [title, type]);
+  const descriptionNode = useMemo(() => {
+    if (typeof description === 'string') {
+      return /*#__PURE__*/_jsx(Text, {
+        as: "p",
+        color: type === 'upsell' ? 'fgInverse' : 'fg',
+        font: "label2",
+        numberOfLines: 3,
+        children: description
+      });
+    }
+    return description;
+  }, [description, type]);
+  const tagNode = useMemo(() => {
+    if (typeof tag === 'string') {
+      return /*#__PURE__*/_jsx(Tag, {
+        children: tag
+      });
+    }
+    return tag;
+  }, [tag]);
+  const actionButtonNode = useMemo(() => {
+    if (!action) return null;
+
+    // If action is a string, render in a default button
+    if (typeof action === 'string') {
+      const handleActionClick = event => {
+        event.preventDefault();
+        event.stopPropagation();
+        onActionButtonClick === null || onActionButtonClick === void 0 || onActionButtonClick(event);
+      };
+      if (type === 'upsell') {
+        return /*#__PURE__*/_jsx(Button, {
+          compact: true,
+          accessibilityLabel: actionButtonAccessibilityLabel !== null && actionButtonAccessibilityLabel !== void 0 ? actionButtonAccessibilityLabel : action,
+          onClick: handleActionClick,
+          variant: "secondary",
+          children: action
+        });
+      }
+      return /*#__PURE__*/_jsx(Pressable, {
+        accessibilityLabel: actionButtonAccessibilityLabel !== null && actionButtonAccessibilityLabel !== void 0 ? actionButtonAccessibilityLabel : action,
+        background: "transparent",
+        onClick: handleActionClick,
+        paddingY: 1,
+        children: /*#__PURE__*/_jsx(Text, {
+          color: "fgPrimary",
+          font: "headline",
+          children: action
+        })
+      });
+    }
+
+    // Otherwise, render action as-is (custom React element)
+    return action;
+  }, [action, actionButtonAccessibilityLabel, onActionButtonClick, type]);
+  const computedDismissButtonAccessibilityLabel = useMemo(() => {
+    if (dismissButtonAccessibilityLabel) return dismissButtonAccessibilityLabel;
+    if (typeof title === 'string') return "Dismiss ".concat(title);
+    return 'Dismiss card';
+  }, [dismissButtonAccessibilityLabel, title]);
+  const dismissButtonNode = useMemo(() => {
+    if (dismissButton) {
+      return dismissButton;
+    }
+    if (onDismissButtonClick) {
+      const handleDismiss = event => {
+        event.preventDefault();
+        event.stopPropagation();
+        onDismissButtonClick(event);
+      };
+      return /*#__PURE__*/_jsx(HStack, {
+        className: classNames === null || classNames === void 0 ? void 0 : classNames.dismissButtonContainer,
+        paddingEnd: 1,
+        paddingTop: 1,
+        position: "absolute",
+        right: 0,
+        style: styles === null || styles === void 0 ? void 0 : styles.dismissButtonContainer,
+        top: 0,
+        children: /*#__PURE__*/_jsx(IconButton, {
+          compact: true,
+          accessibilityLabel: computedDismissButtonAccessibilityLabel,
+          name: "close",
+          onClick: handleDismiss,
+          variant: "secondary"
+        })
+      });
+    }
+    return null;
+  }, [classNames === null || classNames === void 0 ? void 0 : classNames.dismissButtonContainer, computedDismissButtonAccessibilityLabel, dismissButton, onDismissButtonClick, styles === null || styles === void 0 ? void 0 : styles.dismissButtonContainer]);
+  const contentContainerPaddingProps = useMemo(() => {
+    if (mediaPlacement === 'start' && dismissButtonNode) {
+      // needs to add additional padding to the end of the content area when media is placed at the start and there is a dismiss button
+      // this is to avoid dismiss button from overlapping with the content area
+      return {
+        paddingY: 2,
+        paddingStart: 2,
+        paddingEnd: 6
+      };
+    }
+    return {
+      padding: 2
+    };
+  }, [dismissButtonNode, mediaPlacement]);
+  const mediaContainerPaddingProps = useMemo(() => {
+    if (type === 'upsell') return;
+    if (mediaPlacement === 'start') {
+      return {
+        paddingStart: 3,
+        paddingEnd: 1
+      };
+    }
+    // when media is placed at the end, we need to add additional padding to the end of the media container
+    // this is to avoid the dismiss button from overlapping with the media
+    return dismissButtonNode ? {
+      paddingStart: 1,
+      paddingEnd: 6
+    } : {
+      paddingStart: 1,
+      paddingEnd: 3
+    };
+  }, [dismissButtonNode, mediaPlacement, type]);
+  return /*#__PURE__*/_jsxs(HStack, {
+    alignItems: "stretch",
+    className: classNames === null || classNames === void 0 ? void 0 : classNames.layoutContainer,
+    flexDirection: mediaPlacement === 'start' ? 'row-reverse' : 'row',
+    flexGrow: 1,
+    position: "relative",
+    style: styles === null || styles === void 0 ? void 0 : styles.layoutContainer,
+    children: [/*#__PURE__*/_jsxs(VStack, _objectSpread(_objectSpread({
+      alignItems: "flex-start",
+      className: classNames === null || classNames === void 0 ? void 0 : classNames.contentContainer,
+      flexGrow: 1,
+      gap: 2,
+      style: styles === null || styles === void 0 ? void 0 : styles.contentContainer
+    }, contentContainerPaddingProps), {}, {
+      children: [/*#__PURE__*/_jsxs(VStack, {
+        alignItems: "flex-start",
+        className: classNames === null || classNames === void 0 ? void 0 : classNames.textContainer,
+        gap: 0.5,
+        style: styles === null || styles === void 0 ? void 0 : styles.textContainer,
+        children: [tagNode, titleNode, descriptionNode]
+      }), actionButtonNode]
+    })), /*#__PURE__*/_jsx(Box, _objectSpread(_objectSpread({
+      alignItems: "center",
+      className: classNames === null || classNames === void 0 ? void 0 : classNames.mediaContainer,
+      flexShrink: 0,
+      style: styles === null || styles === void 0 ? void 0 : styles.mediaContainer
+    }, mediaContainerPaddingProps), {}, {
+      children: media
+    })), dismissButtonNode]
+  });
+});

package/esm/cards/MessagingCard/__figma__/MessagingCard.figma.js

@@ -0,0 +1,42 @@
+function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
+function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
+function _defineProperty(e, r, t) { return (r = _toPropertyKey(r)) in e ? Object.defineProperty(e, r, { value: t, enumerable: !0, configurable: !0, writable: !0 }) : e[r] = t, e; }
+function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol" == typeof i ? i : i + ""; }
+function _toPrimitive(t, r) { if ("object" != typeof t || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r || "default"); if ("object" != typeof i) return i; throw new TypeError("@@toPrimitive must return a primitive value."); } return ("string" === r ? String : Number)(t); }
+import React from 'react';
+import { figma } from '@figma/code-connect';
+import { MessagingCard } from '../';
+import { jsx as _jsx } from "react/jsx-runtime";
+figma.connect(MessagingCard, 'https://www.figma.com/design/k5CtyJccNQUGMI5bI4lJ2g/%E2%9C%A8-CDS-Components?node-id=72941-20711&m=dev', {
+  imports: ["import { MessagingCard } from '@coinbase/cds-web/cards/MessagingCard'"],
+  props: {
+    type: figma.enum('type', {
+      upsell: 'upsell',
+      nudge: 'nudge'
+    }),
+    title: figma.boolean('show title', {
+      true: figma.string('↳ title'),
+      false: undefined
+    }),
+    description: figma.boolean('show subtitle', {
+      true: figma.string('↳ subtitle'),
+      false: undefined
+    }),
+    tag: figma.boolean('show tag', {
+      true: figma.instance('↳ tag'),
+      false: undefined
+    }),
+    media: figma.instance('media'),
+    mediaPlacement: figma.enum('media placement', {
+      left: 'start',
+      right: 'end'
+    }),
+    onDismissButtonClick: figma.boolean('show dismiss', {
+      true: () => {},
+      false: undefined
+    })
+  },
+  example: props => /*#__PURE__*/_jsx(MessagingCard, _objectSpread({
+    action: "Button"
+  }, props))
+});

package/esm/cards/MessagingCard/index.js

@@ -0,0 +1,70 @@
+const _excluded = ["root"],
+  _excluded2 = ["root"],
+  _excluded3 = ["as", "type", "title", "description", "tag", "action", "onActionButtonClick", "actionButtonAccessibilityLabel", "onDismissButtonClick", "dismissButtonAccessibilityLabel", "mediaPlacement", "media", "dismissButton", "styles", "classNames", "className", "style"];
+function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
+function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
+function _defineProperty(e, r, t) { return (r = _toPropertyKey(r)) in e ? Object.defineProperty(e, r, { value: t, enumerable: !0, configurable: !0, writable: !0 }) : e[r] = t, e; }
+function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol" == typeof i ? i : i + ""; }
+function _toPrimitive(t, r) { if ("object" != typeof t || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r || "default"); if ("object" != typeof i) return i; throw new TypeError("@@toPrimitive must return a primitive value."); } return ("string" === r ? String : Number)(t); }
+function _objectWithoutProperties(e, t) { if (null == e) return {}; var o, r, i = _objectWithoutPropertiesLoose(e, t); if (Object.getOwnPropertySymbols) { var n = Object.getOwnPropertySymbols(e); for (r = 0; r < n.length; r++) o = n[r], -1 === t.indexOf(o) && {}.propertyIsEnumerable.call(e, o) && (i[o] = e[o]); } return i; }
+function _objectWithoutPropertiesLoose(r, e) { if (null == r) return {}; var t = {}; for (var n in r) if ({}.hasOwnProperty.call(r, n)) { if (-1 !== e.indexOf(n)) continue; t[n] = r[n]; } return t; }
+import { forwardRef, memo } from 'react';
+import { cx } from '../../cx';
+import { CardRoot } from '../CardRoot';
+import { MessagingCardLayout } from './MessagingCardLayout';
+import { jsx as _jsx } from "react/jsx-runtime";
+export const MessagingCard = /*#__PURE__*/memo(/*#__PURE__*/forwardRef((_ref, ref) => {
+  let {
+      as,
+      type,
+      title,
+      description,
+      tag,
+      action,
+      onActionButtonClick,
+      actionButtonAccessibilityLabel,
+      onDismissButtonClick,
+      dismissButtonAccessibilityLabel,
+      mediaPlacement,
+      media,
+      dismissButton,
+      styles: {
+        root: rootStyle
+      } = {},
+      classNames: {
+        root: rootClassName
+      } = {},
+      className,
+      style
+    } = _ref,
+    layoutStyles = _objectWithoutProperties(_ref.styles, _excluded),
+    layoutClassNames = _objectWithoutProperties(_ref.classNames, _excluded2),
+    props = _objectWithoutProperties(_ref, _excluded3);
+  return /*#__PURE__*/_jsx(CardRoot, _objectSpread(_objectSpread({
+    ref: ref,
+    as: as,
+    background: type === 'upsell' ? 'bgPrimary' : 'bgAlternate',
+    borderRadius: 500,
+    borderWidth: 0,
+    className: cx(rootClassName, className),
+    overflow: "hidden",
+    style: _objectSpread(_objectSpread({}, rootStyle), style)
+  }, props), {}, {
+    children: /*#__PURE__*/_jsx(MessagingCardLayout, {
+      action: action,
+      actionButtonAccessibilityLabel: actionButtonAccessibilityLabel,
+      classNames: layoutClassNames,
+      description: description,
+      dismissButton: dismissButton,
+      dismissButtonAccessibilityLabel: dismissButtonAccessibilityLabel,
+      media: media,
+      mediaPlacement: mediaPlacement,
+      onActionButtonClick: onActionButtonClick,
+      onDismissButtonClick: onDismissButtonClick,
+      styles: layoutStyles,
+      tag: tag,
+      title: title,
+      type: type
+    })
+  }));
+}));

package/esm/cards/NudgeCard.js

@@ -44,6 +44,33 @@ const getCardBodyPaddingProps = _ref => {
     paddingEnd: (_ref14 = (_ref15 = paddingEnd !== null && paddingEnd !== void 0 ? paddingEnd : paddingX) !== null && _ref15 !== void 0 ? _ref15 : padding) !== null && _ref14 !== void 0 ? _ref14 : 3
   };
 };
+/**
+ * @deprecated Use `MessagingCard` with `type="nudge"` instead. NudgeCard will be removed in a future major release.
+ *
+ * Migration guide:
+ * ```tsx
+ * // Before
+ * <NudgeCard
+ *   title="Title"
+ *   description="Description"
+ *   pictogram="addToWatchlist"
+ *   action="Learn more"
+ *   onActionPress={handleAction}
+ *   onDismissPress={handleDismiss}
+ * />
+ *
+ * // After
+ * <MessagingCard
+ *   type="nudge"
+ *   title="Title"
+ *   description="Description"
+ *   media={<Pictogram dimension="48x48" name="addToWatchlist" />}
+ *   actions={<Button compact variant="secondary">Learn more</Button>}
+ *   onDismiss={handleDismiss}
+ *   mediaPlacement="end"
+ * />
+ * ```
+ */
 export const NudgeCard = _ref16 => {
   let {
       title,

package/esm/cards/UpsellCard.js

@@ -5,6 +5,33 @@ import { HStack, VStack } from '../layout';
 import { Pressable } from '../system';
 import { Text } from '../typography/Text';
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+/**
+ * @deprecated Use `MessagingCard` with `type="upsell"` instead. UpsellCard will be removed in a future major release.
+ *
+ * Migration guide:
+ * ```tsx
+ * // Before
+ * <UpsellCard
+ *   title="Title"
+ *   description="Description"
+ *   media={<RemoteImage ... />}
+ *   action="Get Started"
+ *   onActionPress={handleAction}
+ *   onDismissPress={handleDismiss}
+ * />
+ *
+ * // After
+ * <MessagingCard
+ *   type="upsell"
+ *   title="Title"
+ *   description="Description"
+ *   media={<RemoteImage ... />}
+ *   actions={<Button compact variant="secondary">Get Started</Button>}
+ *   onDismiss={handleDismiss}
+ *   mediaPlacement="end"
+ * />
+ * ```
+ */
 export const UpsellCard = /*#__PURE__*/memo(_ref => {
   let {
     title,

package/esm/cards/index.js

@@ -4,6 +4,7 @@ export * from './CardFooter';
 export * from './CardGroup';
 export * from './CardHeader';
 export * from './CardMedia';
+export * from './CardRoot';
 // Card variants
 export * from './AnnouncementCard';
 export * from './FeatureEntryCard';
@@ -14,4 +15,8 @@ export * from './FloatingAssetCard';
 export * from './NudgeCard';
 export * from './UpsellCard';
 // Phoenix cards
-export * from './ContentCard';
+export * from './ContentCard';
+// Media card
+export * from './MediaCard';
+// Messaging card
+export * from './MessagingCard';

package/esm/carousel/Carousel.css

@@ -1 +1,2 @@
-@layer cds{.defaultCarouselCss-d3is9f4 img{pointer-events:none;}}
+@layer cds{.defaultCarouselCss-d3is9f4 img{pointer-events:none;}
+.screenReaderOnlyCss-shdwk7s{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;-webkit-clip:rect(0 0 0 0);clip:rect(0 0 0 0);white-space:nowrap;border:0;}}