@sproutsocial/racine 23.2.0 → 24.0.0

package/CHANGELOG.md

@@ -1,5 +1,33 @@
 # Change Log
 
+## 24.0.0
+
+### Major Changes
+
+- e8cb094: Remove negative margin in Message.Footer to allow web-app-core to control this style.
+- 7e82fee: Removes deprecated `variant` prop from Avatar
+  - The `variant` prop has been deprecated for over a year, and is no longer necessary due to built-in theme support in the Avatar component.
+  - This change removes all references to the `variant` prop from the Avatar component and its documentation.
+
+### Minor Changes
+
+- 7e82fee: Adds `initials` prop to Avatar
+  - The new prop allows consumers to manually define the initials displayed on the Avatar component when an image is not provided or fails to load.
+  - The existing automatic initials generation (which uses the first character of the first 1-2 words of the `name` prop) will still be used if an `initials` prop is not provided.
+  - Also adds test cases for the new prop to ensure it functions as expected.
+
+### Patch Changes
+
+- 7e82fee: Removes background color while Avatar image is loading
+  - Before this change, an Avatar's background color would briefly appear while an Image-based Avatar was loading.
+  - After this change, an Avatar will not have its background color set until the image has failed to load, or if no `src` prop is provided.
+
+## 23.2.1
+
+### Patch Changes
+
+- dc8e3f6: Fix Badge component so that it now allows overriding the data-qa props
+
 ## 23.2.0
 
 ### Minor Changes

package/__flow__/Avatar/Avatar.flow.js

@@ -8,8 +8,6 @@ export type TypeAvatarProps = {
   /** URL of the avatar image. If a URL is not provided, the component will fall back to showing the user's initials */
   src?: string,
   type?: "neutral" | "purple" | "green" | "blue" | "yellow" | "red" | "orange",
-  /** @deprecated Avatar now uses the theme by default and using `variant` is no longer needed */
-  variant?: "dark" | "light",
   bg?: string,
   color?: string,
   size?: string,

package/commonjs/Avatar/Avatar.js

@@ -8,13 +8,12 @@ exports.getAvatarColor = exports.default = exports.Avatar = void 0;
 var _react = _interopRequireWildcard(require("react"));
 var React = _react;
 var _styledComponents = _interopRequireWildcard(require("styled-components"));
-var _classnames = _interopRequireDefault(require("classnames"));
 var _Box = _interopRequireDefault(require("../Box"));
 var _Image = _interopRequireDefault(require("../Image"));
 var _Text = _interopRequireDefault(require("../Text"));
 var _jsxRuntime = require("react/jsx-runtime");
 var _excluded = ["fontSize"],
-  _excluded2 = ["appearance", "name", "src", "variant", "type", "size", "bg", "color"];
+  _excluded2 = ["appearance", "name", "src", "type", "size", "bg", "color", "initials"];
 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 _getRequireWildcardCache(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; }
@@ -54,12 +53,11 @@ var Container = (0, _styledComponents.default)(_Box.default).withConfig({
   componentId: "sc-1ffu253-1"
 })(["", ""], function (_ref3) {
   var theme = _ref3.theme,
-    type = _ref3.type,
+    $type = _ref3.$type,
     bg = _ref3.bg,
-    $src = _ref3.$src,
     borderColor = _ref3.borderColor,
-    imageFailedLoading = _ref3.imageFailedLoading;
-  return (0, _styledComponents.css)(["background:", ";border:", ";border-color:", ";color:", ";"], bg ? bg : theme.colors.container.background.decorative[type], $src && !imageFailedLoading ? 'none' : "1px solid", borderColor ? borderColor : theme.colors.container.border.decorative[type], theme.colors.text.decorative[type]);
+    $displayFallback = _ref3.$displayFallback;
+  return (0, _styledComponents.css)(["background:", ";border:", ";border-color:", ";color:", ";"], $displayFallback ? bg ? bg : theme.colors.container.background.decorative[$type] : "none", $displayFallback ? "1px solid" : "none", borderColor ? borderColor : theme.colors.container.border.decorative[$type], theme.colors.text.decorative[$type]);
 });
 var getInitials = function getInitials(name) {
   var fallback = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : "?";
@@ -92,23 +90,22 @@ var Avatar = exports.Avatar = function Avatar(_ref4) {
     _ref4$name = _ref4.name,
     name = _ref4$name === void 0 ? "" : _ref4$name,
     src = _ref4.src,
-    _ref4$variant = _ref4.variant,
-    variant = _ref4$variant === void 0 ? "light" : _ref4$variant,
     _ref4$type = _ref4.type,
     type = _ref4$type === void 0 ? defaultType : _ref4$type,
     _ref4$size = _ref4.size,
     size = _ref4$size === void 0 ? "40px" : _ref4$size,
     bg = _ref4.bg,
     color = _ref4.color,
+    initials = _ref4.initials,
     rest = _objectWithoutProperties(_ref4, _excluded2);
   var colorType = getAvatarColor(name, type);
   var _useState = (0, _react.useState)(false),
     _useState2 = _slicedToArray(_useState, 2),
     imageFailedLoading = _useState2[0],
     setImageFailedLoading = _useState2[1];
-  var initials = (0, _react.useMemo)(function () {
-    return getInitials(name);
-  }, [name]);
+  var displayInitials = (0, _react.useMemo)(function () {
+    return initials || getInitials(name);
+  }, [initials, name]);
   var handleError = (0, _react.useCallback)(function () {
     setImageFailedLoading(true);
   }, [setImageFailedLoading]);
@@ -116,7 +113,6 @@ var Avatar = exports.Avatar = function Avatar(_ref4) {
   // Font size for initials is half the size of the avatar, rounded down.
   var fontSize = Math.floor(Number(size.replace("px", "")) * 0.4);
   return /*#__PURE__*/(0, _jsxRuntime.jsx)(Container, _objectSpread(_objectSpread({
-    className: (0, _classnames.default)(variant),
     size: size,
     overflow: "hidden",
     borderRadius: appearance === "leaf" ? "40% 0 40% 0" : "50%",
@@ -127,11 +123,9 @@ var Avatar = exports.Avatar = function Avatar(_ref4) {
     alignItems: "center",
     title: name,
     bg: bg,
-    variant: variant,
-    type: colorType,
+    $type: colorType,
     "data-qa-user-avatar": name,
-    $src: src,
-    imageFailedLoading: imageFailedLoading
+    $displayFallback: !src || imageFailedLoading
   }, rest), {}, {
     children: !src || imageFailedLoading ? /*#__PURE__*/(0, _jsxRuntime.jsx)(AvatarText, {
       lineHeight: size,
@@ -139,7 +133,7 @@ var Avatar = exports.Avatar = function Avatar(_ref4) {
       fontSize: fontSize,
       type: colorType,
       color: color,
-      children: initials
+      children: displayInitials
     }) : /*#__PURE__*/(0, _jsxRuntime.jsx)(_Image.default, {
       alt: name,
       width: "auto",

package/commonjs/Badge/Badge.js

@@ -36,8 +36,9 @@ var Badge = function Badge(_ref) {
   if (children && text) {
     throw new Error("can't use both `children` and `text` props. Text is deprecated, consider using children.");
   }
-  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_styles.default, _objectSpread(_objectSpread({}, rest), {}, {
-    // size previously included default, which currently maps to small.  Once consumers have updated this can be simplified.
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_styles.default
+  // size previously included default, which currently maps to small.  Once consumers have updated this can be simplified.
+  , _objectSpread(_objectSpread({
     size: size === "default" ? "large" : size,
     badgeColor: badgeColor,
     "data-tip": tip,
@@ -49,7 +50,8 @@ var Badge = function Badge(_ref) {
     // eslint-disable-next-line @typescript-eslint/ban-ts-comment
     // @ts-ignore
     ,
-    color: color,
+    color: color
+  }, rest), {}, {
     children: /*#__PURE__*/(0, _jsxRuntime.jsxs)(_Box.default, {
       display: "flex",
       alignItems: "center",

package/commonjs/Message/styles.js

@@ -87,7 +87,7 @@ var MessageBody = exports.MessageBody = (0, _styledComponents.default)(_Box.defa
 var MessageFooter = exports.MessageFooter = (0, _styledComponents.default)(_Box.default).withConfig({
   displayName: "styles__MessageFooter",
   componentId: "sc-161ezbx-3"
-})(["padding-bottom:", ";padding-left:", ";padding-right:", ";border-radius:0 0 ", " ", ";display:flex;justify-content:space-between;align-items:center;flex-wrap:", ";> :first-child{margin-left:-", ";}"], function (props) {
+})(["padding-bottom:", ";padding-left:", ";padding-right:", ";border-radius:0 0 ", " ", ";display:flex;justify-content:space-between;align-items:center;flex-wrap:", ";"], function (props) {
   return props.density === _constants.MESSAGE_DENSITIES.CONDENSED ? 0 : props.theme.space[300];
 }, function (props) {
   return getContentPadding(props);
@@ -99,8 +99,6 @@ var MessageFooter = exports.MessageFooter = (0, _styledComponents.default)(_Box.
   return props.theme.radii.outer;
 }, function (props) {
   return props.density === _constants.MESSAGE_DENSITIES.CONDENSED ? "nowrap" : "wrap";
-}, function (props) {
-  return props.theme.space[350];
 });
 var MessageMeta = exports.MessageMeta = (0, _styledComponents.default)(_Box.default).withConfig({
   displayName: "styles__MessageMeta",

package/dist/types/Avatar/Avatar.d.ts

@@ -1,7 +1,7 @@
 import * as React from "react";
 import type { TypeAvatarProps, TypeAvatarType } from "./AvatarTypes";
 export declare const getAvatarColor: (name: string, type: TypeAvatarType) => TypeAvatarType;
-export declare const Avatar: ({ appearance, name, src, variant, type, size, bg, color, ...rest }: TypeAvatarProps) => import("react/jsx-runtime").JSX.Element;
-declare const _default: React.MemoExoticComponent<({ appearance, name, src, variant, type, size, bg, color, ...rest }: TypeAvatarProps) => import("react/jsx-runtime").JSX.Element>;
+export declare const Avatar: ({ appearance, name, src, type, size, bg, color, initials, ...rest }: TypeAvatarProps) => import("react/jsx-runtime").JSX.Element;
+declare const _default: React.MemoExoticComponent<({ appearance, name, src, type, size, bg, color, initials, ...rest }: TypeAvatarProps) => import("react/jsx-runtime").JSX.Element>;
 export default _default;
 //# sourceMappingURL=Avatar.d.ts.map

package/dist/types/Avatar/Avatar.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Avatar.d.ts","sourceRoot":"","sources":["../../../src/Avatar/Avatar.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAQ/B,OAAO,KAAK,EACV,eAAe,EAEf,cAAc,EACf,MAAM,eAAe,CAAC;AAgCvB,eAAO,MAAM,cAAc,SACnB,MAAM,QACN,cAAc,KACnB,cAuBF,CAAC;AAEF,eAAO,MAAM,MAAM,uEAUhB,eAAe,4CAqDjB,CAAC;uHArDC,eAAe;AAsDlB,wBAA4B"}
+{"version":3,"file":"Avatar.d.ts","sourceRoot":"","sources":["../../../src/Avatar/Avatar.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAO/B,OAAO,KAAK,EACV,eAAe,EAEf,cAAc,EACf,MAAM,eAAe,CAAC;AAoCvB,eAAO,MAAM,cAAc,SACnB,MAAM,QACN,cAAc,KACnB,cAuBF,CAAC;AAEF,eAAO,MAAM,MAAM,wEAUhB,eAAe,4CAqDjB,CAAC;wHArDC,eAAe;AAsDlB,wBAA4B"}

package/dist/types/Avatar/AvatarTypes.d.ts

@@ -1,26 +1,21 @@
 import { TypeContainerProps as TypeBoxContainerProps } from "../Box";
 import { AvatarColorOptions } from "./constants";
 export type TypeAvatarType = keyof typeof AvatarColorOptions;
-export type TypeAvatarVariant = "dark" | "light";
 export interface TypeAvatarProps extends TypeBoxContainerProps {
     /** Circles are used for social profile avatars, leaf is for internal Sprout user avatars */
     appearance?: "circle" | "leaf";
     /** The name of the user that the avatar represents */
     name?: string;
+    /** The initials of the user that the avatar represents.
+     *  If not provided, the first letter of the first 1-2 words of the `name` prop will be used. */
+    initials?: string;
     /** URL of the avatar image. If a URL is not provided, the component will fall back to showing the user's initials */
     src?: string;
     type?: TypeAvatarType;
-    /** @deprecated Avatar now uses the theme by default and using `variant` is no longer needed */
-    variant?: TypeAvatarVariant;
-    bg?: string;
-    color?: string;
     size?: string;
 }
 export interface TypeAvatarContainerProps extends TypeBoxContainerProps {
-    type: TypeAvatarType;
-    variant: TypeAvatarVariant;
-    bg?: string;
-    $src?: TypeAvatarProps["src"];
-    imageFailedLoading?: boolean;
+    $type: TypeAvatarType;
+    $displayFallback: boolean;
 }
 //# sourceMappingURL=AvatarTypes.d.ts.map

package/dist/types/Avatar/AvatarTypes.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"AvatarTypes.d.ts","sourceRoot":"","sources":["../../../src/Avatar/AvatarTypes.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,kBAAkB,IAAI,qBAAqB,EAAE,MAAM,UAAU,CAAC;AACvE,OAAO,EAAE,kBAAkB,EAAE,MAAM,aAAa,CAAC;AAEjD,MAAM,MAAM,cAAc,GAAG,MAAM,OAAO,kBAAkB,CAAC;AAC7D,MAAM,MAAM,iBAAiB,GAAG,MAAM,GAAG,OAAO,CAAC;AAGjD,MAAM,WAAW,eAAgB,SAAQ,qBAAqB;IAC5D,4FAA4F;IAC5F,UAAU,CAAC,EAAE,QAAQ,GAAG,MAAM,CAAC;IAE/B,sDAAsD;IACtD,IAAI,CAAC,EAAE,MAAM,CAAC;IAEd,qHAAqH;IACrH,GAAG,CAAC,EAAE,MAAM,CAAC;IACb,IAAI,CAAC,EAAE,cAAc,CAAC;IACtB,+FAA+F;IAC/F,OAAO,CAAC,EAAE,iBAAiB,CAAC;IAC5B,EAAE,CAAC,EAAE,MAAM,CAAC;IACZ,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,IAAI,CAAC,EAAE,MAAM,CAAC;CACf;AAED,MAAM,WAAW,wBAAyB,SAAQ,qBAAqB;IACrE,IAAI,EAAE,cAAc,CAAC;IACrB,OAAO,EAAE,iBAAiB,CAAC;IAC3B,EAAE,CAAC,EAAE,MAAM,CAAC;IACZ,IAAI,CAAC,EAAE,eAAe,CAAC,KAAK,CAAC,CAAC;IAC9B,kBAAkB,CAAC,EAAE,OAAO,CAAC;CAC9B"}
+{"version":3,"file":"AvatarTypes.d.ts","sourceRoot":"","sources":["../../../src/Avatar/AvatarTypes.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,kBAAkB,IAAI,qBAAqB,EAAE,MAAM,UAAU,CAAC;AACvE,OAAO,EAAE,kBAAkB,EAAE,MAAM,aAAa,CAAC;AAEjD,MAAM,MAAM,cAAc,GAAG,MAAM,OAAO,kBAAkB,CAAC;AAG7D,MAAM,WAAW,eAAgB,SAAQ,qBAAqB;IAC5D,4FAA4F;IAC5F,UAAU,CAAC,EAAE,QAAQ,GAAG,MAAM,CAAC;IAE/B,sDAAsD;IACtD,IAAI,CAAC,EAAE,MAAM,CAAC;IACd;oGACgG;IAChG,QAAQ,CAAC,EAAE,MAAM,CAAC;IAElB,qHAAqH;IACrH,GAAG,CAAC,EAAE,MAAM,CAAC;IACb,IAAI,CAAC,EAAE,cAAc,CAAC;IACtB,IAAI,CAAC,EAAE,MAAM,CAAC;CACf;AAED,MAAM,WAAW,wBAAyB,SAAQ,qBAAqB;IACrE,KAAK,EAAE,cAAc,CAAC;IACtB,gBAAgB,EAAE,OAAO,CAAC;CAC3B"}

package/dist/types/Message/styles.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"styles.d.ts","sourceRoot":"","sources":["../../../src/Message/styles.ts"],"names":[],"mappings":"AAKA,OAAO,EAAE,gBAAgB,EAAE,MAAM,gBAAgB,CAAC;AAGlD,QAAA,MAAM,SAAS;QACT,MAAM;SASX,CAAC;AAIF,eAAO,MAAM,aAAa,8RAgBxB,CAAC;AAiDH,eAAO,MAAM,WAAW,yPASvB,CAAC;AAEF,eAAO,MAAM,aAAa,yPAgBzB,CAAC;AAEF,eAAO,MAAM,WAAW,yPAsBvB,CAAC;AAEF,eAAe,SAAS,CAAC"}
+{"version":3,"file":"styles.d.ts","sourceRoot":"","sources":["../../../src/Message/styles.ts"],"names":[],"mappings":"AAKA,OAAO,EAAE,gBAAgB,EAAE,MAAM,gBAAgB,CAAC;AAGlD,QAAA,MAAM,SAAS;QACT,MAAM;SASX,CAAC;AAIF,eAAO,MAAM,aAAa,8RAgBxB,CAAC;AAiDH,eAAO,MAAM,WAAW,yPASvB,CAAC;AAEF,eAAO,MAAM,aAAa,yPAazB,CAAC;AAEF,eAAO,MAAM,WAAW,yPAsBvB,CAAC;AAEF,eAAe,SAAS,CAAC"}

package/lib/Avatar/Avatar.js

@@ -1,6 +1,6 @@
 function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (o) { return typeof o; } : function (o) { return o && "function" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? "symbol" : typeof o; }, _typeof(o); }
 var _excluded = ["fontSize"],
-  _excluded2 = ["appearance", "name", "src", "variant", "type", "size", "bg", "color"];
+  _excluded2 = ["appearance", "name", "src", "type", "size", "bg", "color", "initials"];
 function _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest(); }
 function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
 function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o === "string") return _arrayLikeToArray(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === "Object" && o.constructor) n = o.constructor.name; if (n === "Map" || n === "Set") return Array.from(o); if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); }
@@ -17,7 +17,6 @@ function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) r
 import * as React from "react";
 import { useState, useCallback, useMemo, memo } from "react";
 import styled, { css } from "styled-components";
-import classnames from "classnames";
 import Box from "../Box";
 import Image from "../Image";
 import Text from "../Text";
@@ -45,12 +44,11 @@ var Container = styled(Box).withConfig({
   componentId: "sc-1ffu253-1"
 })(["", ""], function (_ref3) {
   var theme = _ref3.theme,
-    type = _ref3.type,
+    $type = _ref3.$type,
     bg = _ref3.bg,
-    $src = _ref3.$src,
     borderColor = _ref3.borderColor,
-    imageFailedLoading = _ref3.imageFailedLoading;
-  return css(["background:", ";border:", ";border-color:", ";color:", ";"], bg ? bg : theme.colors.container.background.decorative[type], $src && !imageFailedLoading ? 'none' : "1px solid", borderColor ? borderColor : theme.colors.container.border.decorative[type], theme.colors.text.decorative[type]);
+    $displayFallback = _ref3.$displayFallback;
+  return css(["background:", ";border:", ";border-color:", ";color:", ";"], $displayFallback ? bg ? bg : theme.colors.container.background.decorative[$type] : "none", $displayFallback ? "1px solid" : "none", borderColor ? borderColor : theme.colors.container.border.decorative[$type], theme.colors.text.decorative[$type]);
 });
 var getInitials = function getInitials(name) {
   var fallback = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : "?";
@@ -83,23 +81,22 @@ export var Avatar = function Avatar(_ref4) {
     _ref4$name = _ref4.name,
     name = _ref4$name === void 0 ? "" : _ref4$name,
     src = _ref4.src,
-    _ref4$variant = _ref4.variant,
-    variant = _ref4$variant === void 0 ? "light" : _ref4$variant,
     _ref4$type = _ref4.type,
     type = _ref4$type === void 0 ? defaultType : _ref4$type,
     _ref4$size = _ref4.size,
     size = _ref4$size === void 0 ? "40px" : _ref4$size,
     bg = _ref4.bg,
     color = _ref4.color,
+    initials = _ref4.initials,
     rest = _objectWithoutProperties(_ref4, _excluded2);
   var colorType = getAvatarColor(name, type);
   var _useState = useState(false),
     _useState2 = _slicedToArray(_useState, 2),
     imageFailedLoading = _useState2[0],
     setImageFailedLoading = _useState2[1];
-  var initials = useMemo(function () {
-    return getInitials(name);
-  }, [name]);
+  var displayInitials = useMemo(function () {
+    return initials || getInitials(name);
+  }, [initials, name]);
   var handleError = useCallback(function () {
     setImageFailedLoading(true);
   }, [setImageFailedLoading]);
@@ -107,7 +104,6 @@ export var Avatar = function Avatar(_ref4) {
   // Font size for initials is half the size of the avatar, rounded down.
   var fontSize = Math.floor(Number(size.replace("px", "")) * 0.4);
   return /*#__PURE__*/_jsx(Container, _objectSpread(_objectSpread({
-    className: classnames(variant),
     size: size,
     overflow: "hidden",
     borderRadius: appearance === "leaf" ? "40% 0 40% 0" : "50%",
@@ -118,11 +114,9 @@ export var Avatar = function Avatar(_ref4) {
     alignItems: "center",
     title: name,
     bg: bg,
-    variant: variant,
-    type: colorType,
+    $type: colorType,
     "data-qa-user-avatar": name,
-    $src: src,
-    imageFailedLoading: imageFailedLoading
+    $displayFallback: !src || imageFailedLoading
   }, rest), {}, {
     children: !src || imageFailedLoading ? /*#__PURE__*/_jsx(AvatarText, {
       lineHeight: size,
@@ -130,7 +124,7 @@ export var Avatar = function Avatar(_ref4) {
       fontSize: fontSize,
       type: colorType,
       color: color,
-      children: initials
+      children: displayInitials
     }) : /*#__PURE__*/_jsx(Image, {
       alt: name,
       width: "auto",

package/lib/Badge/Badge.js

@@ -28,8 +28,9 @@ var Badge = function Badge(_ref) {
   if (children && text) {
     throw new Error("can't use both `children` and `text` props. Text is deprecated, consider using children.");
   }
-  return /*#__PURE__*/_jsx(Container, _objectSpread(_objectSpread({}, rest), {}, {
-    // size previously included default, which currently maps to small.  Once consumers have updated this can be simplified.
+  return /*#__PURE__*/_jsx(Container
+  // size previously included default, which currently maps to small.  Once consumers have updated this can be simplified.
+  , _objectSpread(_objectSpread({
     size: size === "default" ? "large" : size,
     badgeColor: badgeColor,
     "data-tip": tip,
@@ -41,7 +42,8 @@ var Badge = function Badge(_ref) {
     // eslint-disable-next-line @typescript-eslint/ban-ts-comment
     // @ts-ignore
     ,
-    color: color,
+    color: color
+  }, rest), {}, {
     children: /*#__PURE__*/_jsxs(Box, {
       display: "flex",
       alignItems: "center",

package/lib/Message/styles.js

@@ -80,7 +80,7 @@ export var MessageBody = styled(Box).withConfig({
 export var MessageFooter = styled(Box).withConfig({
   displayName: "styles__MessageFooter",
   componentId: "sc-161ezbx-3"
-})(["padding-bottom:", ";padding-left:", ";padding-right:", ";border-radius:0 0 ", " ", ";display:flex;justify-content:space-between;align-items:center;flex-wrap:", ";> :first-child{margin-left:-", ";}"], function (props) {
+})(["padding-bottom:", ";padding-left:", ";padding-right:", ";border-radius:0 0 ", " ", ";display:flex;justify-content:space-between;align-items:center;flex-wrap:", ";"], function (props) {
   return props.density === MESSAGE_DENSITIES.CONDENSED ? 0 : props.theme.space[300];
 }, function (props) {
   return getContentPadding(props);
@@ -92,8 +92,6 @@ export var MessageFooter = styled(Box).withConfig({
   return props.theme.radii.outer;
 }, function (props) {
   return props.density === MESSAGE_DENSITIES.CONDENSED ? "nowrap" : "wrap";
-}, function (props) {
-  return props.theme.space[350];
 });
 export var MessageMeta = styled(Box).withConfig({
   displayName: "styles__MessageMeta",

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@sproutsocial/racine",
-  "version": "23.2.0",
+  "version": "24.0.0",
   "license": "MIT",
   "engines": {
     "node": ">=18"