@sproutsocial/racine 23.2.1 → 24.1.0

package/CHANGELOG.md

@@ -1,5 +1,42 @@
 # Change Log
 
+## 24.1.0
+
+### Minor Changes
+
+- 25d94a2: Racine now includes a new Duration component. It is a primitive component used to format durations of time according to our date & time formatting guidelines Additionally, the package includes a formatDuration helper, which can be used to get a stringified version of a duration.
+- bd3fc39: ### Deprecation Notice: Flow Type System
+
+  We are officially deprecating the use of the Flow type system in `@sproutsocial/racine`. This change affects all Flow types used in this library. Flow support will be discontinued entirely on **October 24th**.
+
+  To ensure a smooth transition, please migrate your projects away from Flow types and start using TypeScript as soon as possible.
+
+  If you have any questions or need assistance, feel free to reach out to the team.
+
+  Thank you for your understanding and cooperation as we work towards improving our codebase.
+
+## 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

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/Duration/Duration.js

@@ -0,0 +1,129 @@
+"use strict";
+
+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); }
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.formatDuration = exports.default = void 0;
+var React = _interopRequireWildcard(require("react"));
+var _lruMemoize = _interopRequireDefault(require("lru-memoize"));
+var _constants = require("../utils/constants");
+var _VisuallyHidden = require("../VisuallyHidden");
+var _constants2 = require("./constants");
+var _styles = require("./styles");
+var _jsxRuntime = require("react/jsx-runtime");
+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; }
+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(obj, key, value) { key = _toPropertyKey(key); if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
+function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol" == _typeof(i) ? i : String(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 _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); }
+function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) arr2[i] = arr[i]; return arr2; }
+function _iterableToArrayLimit(r, l) { var t = null == r ? null : "undefined" != typeof Symbol && r[Symbol.iterator] || r["@@iterator"]; if (null != t) { var e, n, i, u, a = [], f = !0, o = !1; try { if (i = (t = t.call(r)).next, 0 === l) { if (Object(t) !== t) return; f = !1; } else for (; !(f = (e = i.call(t)).done) && (a.push(e.value), a.length !== l); f = !0); } catch (r) { o = !0, n = r; } finally { try { if (!f && null != t.return && (u = t.return(), Object(u) !== u)) return; } finally { if (o) throw n; } } return a; } }
+function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
+var getDivisionAndRemainder = function getDivisionAndRemainder(numerator, denominator) {
+  return [Math.floor(numerator / denominator), numerator % denominator];
+};
+var _createDurationFormatter = function _createDurationFormatter(locale, unitDisplay) {
+  var timeUnitFormatter = function timeUnitFormatter(locale, unit, unitDisplay) {
+    return Intl.NumberFormat(locale, {
+      style: "unit",
+      unit: unit,
+      unitDisplay: unitDisplay
+    }).format;
+  };
+  var formatDays = timeUnitFormatter(locale, "day", unitDisplay);
+  var formatHours = timeUnitFormatter(locale, "hour", unitDisplay);
+  var formatMinutes = timeUnitFormatter(locale, "minute", unitDisplay);
+  var formatSeconds = timeUnitFormatter(locale, "second", unitDisplay);
+  var formatMilliseconds = timeUnitFormatter(locale, "millisecond", unitDisplay);
+  var formatList = new Intl.ListFormat(locale, {
+    style: "narrow",
+    type: "unit"
+  });
+  return function (milliseconds) {
+    if (milliseconds <= 0) {
+      return formatMilliseconds(0);
+    }
+    var days;
+    var hours;
+    var minutes;
+    var seconds;
+    var _getDivisionAndRemain = getDivisionAndRemainder(milliseconds, 86400000);
+    var _getDivisionAndRemain2 = _slicedToArray(_getDivisionAndRemain, 2);
+    days = _getDivisionAndRemain2[0];
+    milliseconds = _getDivisionAndRemain2[1];
+    var _getDivisionAndRemain3 = getDivisionAndRemainder(milliseconds, 3600000);
+    var _getDivisionAndRemain4 = _slicedToArray(_getDivisionAndRemain3, 2);
+    hours = _getDivisionAndRemain4[0];
+    milliseconds = _getDivisionAndRemain4[1];
+    var _getDivisionAndRemain5 = getDivisionAndRemainder(milliseconds, 60000);
+    var _getDivisionAndRemain6 = _slicedToArray(_getDivisionAndRemain5, 2);
+    minutes = _getDivisionAndRemain6[0];
+    milliseconds = _getDivisionAndRemain6[1];
+    var _getDivisionAndRemain7 = getDivisionAndRemainder(milliseconds, 1000);
+    var _getDivisionAndRemain8 = _slicedToArray(_getDivisionAndRemain7, 2);
+    seconds = _getDivisionAndRemain8[0];
+    milliseconds = _getDivisionAndRemain8[1];
+    var list = [days ? formatDays(days) : null, hours ? formatHours(hours) : null, minutes ? formatMinutes(minutes) : null, seconds ? formatSeconds(seconds) : null, milliseconds ? formatMilliseconds(milliseconds) : null].filter(function (listItem) {
+      return listItem !== null;
+    });
+    return formatList.format(list);
+  };
+};
+
+// Memoize to reduce the energy of creating new instances of Intl.NumberFormat
+var memoizer = (0, _lruMemoize.default)(_constants2.MEMO_CACHE_SIZE, _constants2.COMPARE_OBJECTS);
+var createDurationFormatter = memoizer(_createDurationFormatter);
+var isValidNumber = function isValidNumber(value) {
+  return typeof value === "number" && isFinite(value);
+};
+var getDuration = function getDuration(_ref) {
+  var returnType = _ref.returnType,
+    props = _ref.props;
+  var _props$display = props.display,
+    display = _props$display === void 0 ? "long" : _props$display,
+    invalidMillisecondsLabel = props.invalidMillisecondsLabel,
+    _props$locale = props.locale,
+    locale = _props$locale === void 0 ? "en-US" : _props$locale,
+    _props$milliseconds = props.milliseconds,
+    milliseconds = _props$milliseconds === void 0 ? null : _props$milliseconds,
+    qa = props.qa;
+  var isReturnTypeString = returnType === "string";
+  if (!isValidNumber(milliseconds)) {
+    return isReturnTypeString ? _constants.EM_DASH : /*#__PURE__*/(0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
+      children: [invalidMillisecondsLabel ?
+      /*#__PURE__*/
+      // Give screen readers something useful to read off + hide the em dash
+      (0, _jsxRuntime.jsx)(_VisuallyHidden.VisuallyHidden, {
+        children: invalidMillisecondsLabel
+      }) : null, /*#__PURE__*/(0, _jsxRuntime.jsx)(_styles.Container, _objectSpread(_objectSpread({
+        "aria-hidden": true
+      }, qa), {}, {
+        children: _constants.EM_DASH
+      }))]
+    });
+  }
+  var fullText = createDurationFormatter(locale, display)(milliseconds);
+  return isReturnTypeString ? fullText : /*#__PURE__*/(0, _jsxRuntime.jsx)(_styles.Container, _objectSpread(_objectSpread({}, qa), {}, {
+    children: fullText
+  }));
+};
+var formatDuration = exports.formatDuration = function formatDuration(props) {
+  return getDuration({
+    returnType: "string",
+    props: props
+  });
+};
+var Duration = function Duration(props) {
+  return getDuration({
+    returnType: "component",
+    props: props
+  });
+};
+var _default = exports.default = Duration;

package/commonjs/Duration/DurationTypes.js

@@ -0,0 +1,5 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});

package/commonjs/Duration/constants.js

@@ -0,0 +1,8 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.MEMO_CACHE_SIZE = exports.COMPARE_OBJECTS = void 0;
+var MEMO_CACHE_SIZE = exports.MEMO_CACHE_SIZE = 10;
+var COMPARE_OBJECTS = exports.COMPARE_OBJECTS = true;

package/commonjs/Duration/index.js

@@ -0,0 +1,39 @@
+"use strict";
+
+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); }
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+var _exportNames = {
+  Duration: true,
+  formatDuration: true
+};
+Object.defineProperty(exports, "Duration", {
+  enumerable: true,
+  get: function get() {
+    return _Duration.default;
+  }
+});
+exports.default = void 0;
+Object.defineProperty(exports, "formatDuration", {
+  enumerable: true,
+  get: function get() {
+    return _Duration.formatDuration;
+  }
+});
+var _Duration = _interopRequireWildcard(require("./Duration"));
+var _DurationTypes = require("./DurationTypes");
+Object.keys(_DurationTypes).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
+  if (key in exports && exports[key] === _DurationTypes[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function get() {
+      return _DurationTypes[key];
+    }
+  });
+});
+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; }
+var _default = exports.default = _Duration.default;

package/commonjs/Duration/styles.js

@@ -0,0 +1,13 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.Container = void 0;
+var _styledComponents = _interopRequireDefault(require("styled-components"));
+var _seedsReactText = _interopRequireDefault(require("@sproutsocial/seeds-react-text"));
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+var Container = exports.Container = (0, _styledComponents.default)(_seedsReactText.default).withConfig({
+  displayName: "styles__Container",
+  componentId: "sc-6o8ar7-0"
+})(["font-variant-numeric:tabular-nums;"]);

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/commonjs/index.js

@@ -264,6 +264,18 @@ Object.keys(_Drawer).forEach(function (key) {
     }
   });
 });
+var _Duration = require("./Duration");
+Object.keys(_Duration).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
+  if (key in exports && exports[key] === _Duration[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function get() {
+      return _Duration[key];
+    }
+  });
+});
 var _EmptyState = require("./EmptyState");
 Object.keys(_EmptyState).forEach(function (key) {
   if (key === "default" || key === "__esModule") return;

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/Duration/Duration.d.ts

@@ -0,0 +1,6 @@
+import * as React from "react";
+import type { TypeDurationProps } from "./DurationTypes";
+export declare const formatDuration: (props: TypeDurationProps) => string;
+declare const Duration: (props: TypeDurationProps) => React.ReactNode;
+export default Duration;
+//# sourceMappingURL=Duration.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Duration.d.ts","sourceRoot":"","sources":["../../../src/Duration/Duration.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAO/B,OAAO,KAAK,EAAE,iBAAiB,EAAE,MAAM,iBAAiB,CAAC;AA+GzD,eAAO,MAAM,cAAc,UAAW,iBAAiB,KAAG,MAEzD,CAAC;AAEF,QAAA,MAAM,QAAQ,UAAW,iBAAiB,oBAEzC,CAAC;AAEF,eAAe,QAAQ,CAAC"}

package/dist/types/Duration/DurationTypes.d.ts

@@ -0,0 +1,14 @@
+import { TypeTextProps } from "@sproutsocial/seeds-react-text";
+import { TypeQaProps } from "../types/shared";
+export interface TypeDurationProps extends Omit<TypeTextProps, "children"> {
+    /** The style of the formatted milliseconds */
+    milliseconds: number | null;
+    /** Locale to format. See https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl#locales_argument */
+    locale?: Intl.LocalesArgument;
+    /** The style of the formatted duration */
+    display?: "long" | "narrow";
+    /** Text to be read off by screen readers for invalid values (i.e., any value rendered as '—' (em dash)) */
+    invalidMillisecondsLabel?: string;
+    qa?: TypeQaProps;
+}
+//# sourceMappingURL=DurationTypes.d.ts.map

package/dist/types/Duration/DurationTypes.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"DurationTypes.d.ts","sourceRoot":"","sources":["../../../src/Duration/DurationTypes.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,aAAa,EAAE,MAAM,gCAAgC,CAAC;AAC/D,OAAO,EAAE,WAAW,EAAE,MAAM,mBAAmB,CAAC;AAEhD,MAAM,WAAW,iBAAkB,SAAQ,IAAI,CAAC,aAAa,EAAE,UAAU,CAAC;IACxE,8CAA8C;IAC9C,YAAY,EAAE,MAAM,GAAG,IAAI,CAAC;IAE5B,mIAAmI;IACnI,MAAM,CAAC,EAAE,IAAI,CAAC,eAAe,CAAC;IAE9B,0CAA0C;IAC1C,OAAO,CAAC,EAAE,MAAM,GAAG,QAAQ,CAAC;IAE5B,2GAA2G;IAC3G,wBAAwB,CAAC,EAAE,MAAM,CAAC;IAElC,EAAE,CAAC,EAAE,WAAW,CAAC;CAClB"}

package/dist/types/Duration/__tests__/Duration.typetest.d.ts

@@ -0,0 +1,2 @@
+export declare const DurationTypeTest: () => import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=Duration.typetest.d.ts.map

package/dist/types/Duration/__tests__/Duration.typetest.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Duration.typetest.d.ts","sourceRoot":"","sources":["../../../../src/Duration/__tests__/Duration.typetest.tsx"],"names":[],"mappings":"AAQA,eAAO,MAAM,gBAAgB,+CAoB5B,CAAC"}

package/dist/types/Duration/__tests__/features/testDuration.d.ts

@@ -0,0 +1,3 @@
+declare const testDuration: (milliseconds: any, options: {} | undefined, texts: any) => void;
+export default testDuration;
+//# sourceMappingURL=testDuration.d.ts.map

package/dist/types/Duration/__tests__/features/testDuration.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"testDuration.d.ts","sourceRoot":"","sources":["../../../../../src/Duration/__tests__/features/testDuration.tsx"],"names":[],"mappings":"AAWA,QAAA,MAAM,YAAY,kEAsBjB,CAAC;AAEF,eAAe,YAAY,CAAC"}

package/dist/types/Duration/constants.d.ts

@@ -0,0 +1,3 @@
+export declare const MEMO_CACHE_SIZE = 10;
+export declare const COMPARE_OBJECTS = true;
+//# sourceMappingURL=constants.d.ts.map

package/dist/types/Duration/constants.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"constants.d.ts","sourceRoot":"","sources":["../../../src/Duration/constants.ts"],"names":[],"mappings":"AAAA,eAAO,MAAM,eAAe,KAAK,CAAC;AAClC,eAAO,MAAM,eAAe,OAAO,CAAC"}

package/dist/types/Duration/index.d.ts

@@ -0,0 +1,6 @@
+import Duration, { formatDuration } from "./Duration";
+export default Duration;
+export { Duration };
+export { formatDuration };
+export * from "./DurationTypes";
+//# sourceMappingURL=index.d.ts.map

package/dist/types/Duration/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/Duration/index.ts"],"names":[],"mappings":"AAAA,OAAO,QAAQ,EAAE,EAAE,cAAc,EAAE,MAAM,YAAY,CAAC;AAEtD,eAAe,QAAQ,CAAC;AACxB,OAAO,EAAE,QAAQ,EAAE,CAAC;AACpB,OAAO,EAAE,cAAc,EAAE,CAAC;AAC1B,cAAc,iBAAiB,CAAC"}

package/dist/types/Duration/styles.d.ts

@@ -0,0 +1,11 @@
+export declare const Container: import("styled-components").StyledComponent<{
+    ({ fontSize, children, qa, color, ...rest }: import("@sproutsocial/seeds-react-text").TypeTextProps): import("react/jsx-runtime").JSX.Element;
+    Headline: import("styled-components").StyledComponent<"span", any, import("@sproutsocial/seeds-react-text").TypeTextProps, never>;
+    SubHeadline: import("styled-components").StyledComponent<"span", any, import("@sproutsocial/seeds-react-text").TypeTextProps, never>;
+    SmallSubHeadline: import("styled-components").StyledComponent<"span", any, import("@sproutsocial/seeds-react-text").TypeTextProps, never>;
+    Byline: import("styled-components").StyledComponent<"span", any, import("@sproutsocial/seeds-react-text").TypeTextProps, never>;
+    SmallByline: import("styled-components").StyledComponent<"span", any, import("@sproutsocial/seeds-react-text").TypeTextProps, never>;
+    BodyCopy: import("styled-components").StyledComponent<"span", any, import("@sproutsocial/seeds-react-text").TypeTextProps, never>;
+    SmallBodyCopy: import("styled-components").StyledComponent<"span", any, import("@sproutsocial/seeds-react-text").TypeTextProps, never>;
+}, import("styled-components").DefaultTheme, {}, never>;
+//# sourceMappingURL=styles.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"styles.d.ts","sourceRoot":"","sources":["../../../src/Duration/styles.ts"],"names":[],"mappings":"AAGA,eAAO,MAAM,SAAS;;;;;;;;;uDAErB,CAAC"}

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/dist/types/index.d.ts

@@ -21,6 +21,7 @@ export * from "@sproutsocial/seeds-react-checkbox";
 export * from "./Collapsible";
 export * from "./DatePicker";
 export * from "./Drawer";
+export * from "./Duration";
 export * from "./EmptyState";
 export * from "./Fieldset";
 export * from "./FormField";

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

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/index.ts"],"names":[],"mappings":"AACA,YAAY,EAAE,aAAa,EAAE,MAAM,2BAA2B,CAAC;AAC/D,YAAY,EAAE,qBAAqB,EAAE,MAAM,mCAAmC,CAAC;AAC/E,YAAY,EAAE,4BAA4B,IAAI,aAAa,EAAE,MAAM,mCAAmC,CAAC;AAEvG,OAAO,EAAE,iBAAiB,IAAI,qBAAqB,EAAE,MAAM,mCAAmC,CAAC;AAC/F,OAAO,EAAE,wBAAwB,IAAI,gBAAgB,EAAE,MAAM,mCAAmC,CAAC;AAGjG,cAAc,wCAAwC,CAAC;AACvD,cAAc,iCAAiC,CAAC;AAChD,OAAO,EAAE,OAAO,IAAI,aAAa,EAAE,MAAM,0CAA0C,CAAC;AAGpF,OAAO,EACL,SAAS,EACT,cAAc,EACd,cAAc,EACd,UAAU,EACV,mBAAmB,GACpB,MAAM,iCAAiC,CAAC;AACzC,cAAc,kCAAkC,CAAC;AAGjD,cAAc,UAAU,CAAC;AACzB,cAAc,SAAS,CAAC;AACxB,cAAc,UAAU,CAAC;AACzB,cAAc,+BAA+B,CAAC;AAC9C,cAAc,cAAc,CAAC;AAC7B,cAAc,kCAAkC,CAAC;AACjD,cAAc,QAAQ,CAAC;AACvB,cAAc,oBAAoB,CAAC;AACnC,cAAc,eAAe,CAAC;AAC9B,cAAc,oCAAoC,CAAC;AACnD,cAAc,eAAe,CAAC;AAC9B,cAAc,cAAc,CAAC;AAC7B,cAAc,UAAU,CAAC;AACzB,cAAc,cAAc,CAAC;AAC7B,cAAc,YAAY,CAAC;AAC3B,cAAc,aAAa,CAAC;AAC5B,cAAc,gCAAgC,CAAC;AAC/C,cAAc,SAAS,CAAC;AACxB,cAAc,aAAa,CAAC;AAC5B,cAAc,iCAAiC,CAAC;AAChD,cAAc,eAAe,CAAC;AAC9B,cAAc,SAAS,CAAC;AACxB,cAAc,QAAQ,CAAC;AACvB,cAAc,WAAW,CAAC;AAC1B,cAAc,UAAU,CAAC;AACzB,cAAc,gBAAgB,CAAC;AAC/B,cAAc,QAAQ,CAAC;AACvB,cAAc,WAAW,CAAC;AAC1B,cAAc,SAAS,CAAC;AACxB,cAAc,WAAW,CAAC;AAC1B,cAAc,wCAAwC,CAAC;AACvD,cAAc,kCAAkC,CAAC;AACjD,cAAc,kCAAkC,CAAC;AACjD,cAAc,iCAAiC,CAAC;AAChD,cAAc,oBAAoB,CAAC;AACnC,cAAc,UAAU,CAAC;AACzB,cAAc,YAAY,CAAC;AAC3B,cAAc,oBAAoB,CAAC;AACnC,cAAc,SAAS,CAAC;AACxB,cAAc,kCAAkC,CAAC;AACjD,cAAc,SAAS,CAAC;AACxB,cAAc,aAAa,CAAC;AAC5B,cAAc,mBAAmB,CAAC;AAClC,cAAc,qBAAqB,CAAC;AACpC,cAAc,QAAQ,CAAC;AACvB,cAAc,gCAAgC,CAAC;AAC/C,cAAc,YAAY,CAAC;AAC3B,cAAc,SAAS,CAAC;AACxB,cAAc,cAAc,CAAC;AAC7B,cAAc,SAAS,CAAC;AACxB,cAAc,cAAc,CAAC;AAC7B,cAAc,WAAW,CAAC;AAC1B,cAAc,kBAAkB,CAAC;AAEjC;;GAEG;AACH,OAAO,EAAE,MAAM,IAAI,KAAK,EAAE,MAAM,UAAU,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/index.ts"],"names":[],"mappings":"AACA,YAAY,EAAE,aAAa,EAAE,MAAM,2BAA2B,CAAC;AAC/D,YAAY,EAAE,qBAAqB,EAAE,MAAM,mCAAmC,CAAC;AAC/E,YAAY,EAAE,4BAA4B,IAAI,aAAa,EAAE,MAAM,mCAAmC,CAAC;AAEvG,OAAO,EAAE,iBAAiB,IAAI,qBAAqB,EAAE,MAAM,mCAAmC,CAAC;AAC/F,OAAO,EAAE,wBAAwB,IAAI,gBAAgB,EAAE,MAAM,mCAAmC,CAAC;AAGjG,cAAc,wCAAwC,CAAC;AACvD,cAAc,iCAAiC,CAAC;AAChD,OAAO,EAAE,OAAO,IAAI,aAAa,EAAE,MAAM,0CAA0C,CAAC;AAGpF,OAAO,EACL,SAAS,EACT,cAAc,EACd,cAAc,EACd,UAAU,EACV,mBAAmB,GACpB,MAAM,iCAAiC,CAAC;AACzC,cAAc,kCAAkC,CAAC;AAGjD,cAAc,UAAU,CAAC;AACzB,cAAc,SAAS,CAAC;AACxB,cAAc,UAAU,CAAC;AACzB,cAAc,+BAA+B,CAAC;AAC9C,cAAc,cAAc,CAAC;AAC7B,cAAc,kCAAkC,CAAC;AACjD,cAAc,QAAQ,CAAC;AACvB,cAAc,oBAAoB,CAAC;AACnC,cAAc,eAAe,CAAC;AAC9B,cAAc,oCAAoC,CAAC;AACnD,cAAc,eAAe,CAAC;AAC9B,cAAc,cAAc,CAAC;AAC7B,cAAc,UAAU,CAAC;AACzB,cAAc,YAAY,CAAC;AAC3B,cAAc,cAAc,CAAC;AAC7B,cAAc,YAAY,CAAC;AAC3B,cAAc,aAAa,CAAC;AAC5B,cAAc,gCAAgC,CAAC;AAC/C,cAAc,SAAS,CAAC;AACxB,cAAc,aAAa,CAAC;AAC5B,cAAc,iCAAiC,CAAC;AAChD,cAAc,eAAe,CAAC;AAC9B,cAAc,SAAS,CAAC;AACxB,cAAc,QAAQ,CAAC;AACvB,cAAc,WAAW,CAAC;AAC1B,cAAc,UAAU,CAAC;AACzB,cAAc,gBAAgB,CAAC;AAC/B,cAAc,QAAQ,CAAC;AACvB,cAAc,WAAW,CAAC;AAC1B,cAAc,SAAS,CAAC;AACxB,cAAc,WAAW,CAAC;AAC1B,cAAc,wCAAwC,CAAC;AACvD,cAAc,kCAAkC,CAAC;AACjD,cAAc,kCAAkC,CAAC;AACjD,cAAc,iCAAiC,CAAC;AAChD,cAAc,oBAAoB,CAAC;AACnC,cAAc,UAAU,CAAC;AACzB,cAAc,YAAY,CAAC;AAC3B,cAAc,oBAAoB,CAAC;AACnC,cAAc,SAAS,CAAC;AACxB,cAAc,kCAAkC,CAAC;AACjD,cAAc,SAAS,CAAC;AACxB,cAAc,aAAa,CAAC;AAC5B,cAAc,mBAAmB,CAAC;AAClC,cAAc,qBAAqB,CAAC;AACpC,cAAc,QAAQ,CAAC;AACvB,cAAc,gCAAgC,CAAC;AAC/C,cAAc,YAAY,CAAC;AAC3B,cAAc,SAAS,CAAC;AACxB,cAAc,cAAc,CAAC;AAC7B,cAAc,SAAS,CAAC;AACxB,cAAc,cAAc,CAAC;AAC7B,cAAc,WAAW,CAAC;AAC1B,cAAc,kBAAkB,CAAC;AAEjC;;GAEG;AACH,OAAO,EAAE,MAAM,IAAI,KAAK,EAAE,MAAM,UAAU,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/Duration/Duration.js

@@ -0,0 +1,122 @@
+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); }
+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(obj, key, value) { key = _toPropertyKey(key); if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
+function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol" == _typeof(i) ? i : String(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 _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); }
+function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) arr2[i] = arr[i]; return arr2; }
+function _iterableToArrayLimit(r, l) { var t = null == r ? null : "undefined" != typeof Symbol && r[Symbol.iterator] || r["@@iterator"]; if (null != t) { var e, n, i, u, a = [], f = !0, o = !1; try { if (i = (t = t.call(r)).next, 0 === l) { if (Object(t) !== t) return; f = !1; } else for (; !(f = (e = i.call(t)).done) && (a.push(e.value), a.length !== l); f = !0); } catch (r) { o = !0, n = r; } finally { try { if (!f && null != t.return && (u = t.return(), Object(u) !== u)) return; } finally { if (o) throw n; } } return a; } }
+function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
+import * as React from "react";
+import memoize from "lru-memoize";
+import { EM_DASH } from "../utils/constants";
+import { VisuallyHidden } from "../VisuallyHidden";
+import { MEMO_CACHE_SIZE, COMPARE_OBJECTS } from "./constants";
+import { Container } from "./styles";
+import { jsx as _jsx } from "react/jsx-runtime";
+import { Fragment as _Fragment } from "react/jsx-runtime";
+import { jsxs as _jsxs } from "react/jsx-runtime";
+var getDivisionAndRemainder = function getDivisionAndRemainder(numerator, denominator) {
+  return [Math.floor(numerator / denominator), numerator % denominator];
+};
+var _createDurationFormatter = function _createDurationFormatter(locale, unitDisplay) {
+  var timeUnitFormatter = function timeUnitFormatter(locale, unit, unitDisplay) {
+    return Intl.NumberFormat(locale, {
+      style: "unit",
+      unit: unit,
+      unitDisplay: unitDisplay
+    }).format;
+  };
+  var formatDays = timeUnitFormatter(locale, "day", unitDisplay);
+  var formatHours = timeUnitFormatter(locale, "hour", unitDisplay);
+  var formatMinutes = timeUnitFormatter(locale, "minute", unitDisplay);
+  var formatSeconds = timeUnitFormatter(locale, "second", unitDisplay);
+  var formatMilliseconds = timeUnitFormatter(locale, "millisecond", unitDisplay);
+  var formatList = new Intl.ListFormat(locale, {
+    style: "narrow",
+    type: "unit"
+  });
+  return function (milliseconds) {
+    if (milliseconds <= 0) {
+      return formatMilliseconds(0);
+    }
+    var days;
+    var hours;
+    var minutes;
+    var seconds;
+    var _getDivisionAndRemain = getDivisionAndRemainder(milliseconds, 86400000);
+    var _getDivisionAndRemain2 = _slicedToArray(_getDivisionAndRemain, 2);
+    days = _getDivisionAndRemain2[0];
+    milliseconds = _getDivisionAndRemain2[1];
+    var _getDivisionAndRemain3 = getDivisionAndRemainder(milliseconds, 3600000);
+    var _getDivisionAndRemain4 = _slicedToArray(_getDivisionAndRemain3, 2);
+    hours = _getDivisionAndRemain4[0];
+    milliseconds = _getDivisionAndRemain4[1];
+    var _getDivisionAndRemain5 = getDivisionAndRemainder(milliseconds, 60000);
+    var _getDivisionAndRemain6 = _slicedToArray(_getDivisionAndRemain5, 2);
+    minutes = _getDivisionAndRemain6[0];
+    milliseconds = _getDivisionAndRemain6[1];
+    var _getDivisionAndRemain7 = getDivisionAndRemainder(milliseconds, 1000);
+    var _getDivisionAndRemain8 = _slicedToArray(_getDivisionAndRemain7, 2);
+    seconds = _getDivisionAndRemain8[0];
+    milliseconds = _getDivisionAndRemain8[1];
+    var list = [days ? formatDays(days) : null, hours ? formatHours(hours) : null, minutes ? formatMinutes(minutes) : null, seconds ? formatSeconds(seconds) : null, milliseconds ? formatMilliseconds(milliseconds) : null].filter(function (listItem) {
+      return listItem !== null;
+    });
+    return formatList.format(list);
+  };
+};
+
+// Memoize to reduce the energy of creating new instances of Intl.NumberFormat
+var memoizer = memoize(MEMO_CACHE_SIZE, COMPARE_OBJECTS);
+var createDurationFormatter = memoizer(_createDurationFormatter);
+var isValidNumber = function isValidNumber(value) {
+  return typeof value === "number" && isFinite(value);
+};
+var getDuration = function getDuration(_ref) {
+  var returnType = _ref.returnType,
+    props = _ref.props;
+  var _props$display = props.display,
+    display = _props$display === void 0 ? "long" : _props$display,
+    invalidMillisecondsLabel = props.invalidMillisecondsLabel,
+    _props$locale = props.locale,
+    locale = _props$locale === void 0 ? "en-US" : _props$locale,
+    _props$milliseconds = props.milliseconds,
+    milliseconds = _props$milliseconds === void 0 ? null : _props$milliseconds,
+    qa = props.qa;
+  var isReturnTypeString = returnType === "string";
+  if (!isValidNumber(milliseconds)) {
+    return isReturnTypeString ? EM_DASH : /*#__PURE__*/_jsxs(_Fragment, {
+      children: [invalidMillisecondsLabel ?
+      /*#__PURE__*/
+      // Give screen readers something useful to read off + hide the em dash
+      _jsx(VisuallyHidden, {
+        children: invalidMillisecondsLabel
+      }) : null, /*#__PURE__*/_jsx(Container, _objectSpread(_objectSpread({
+        "aria-hidden": true
+      }, qa), {}, {
+        children: EM_DASH
+      }))]
+    });
+  }
+  var fullText = createDurationFormatter(locale, display)(milliseconds);
+  return isReturnTypeString ? fullText : /*#__PURE__*/_jsx(Container, _objectSpread(_objectSpread({}, qa), {}, {
+    children: fullText
+  }));
+};
+export var formatDuration = function formatDuration(props) {
+  return getDuration({
+    returnType: "string",
+    props: props
+  });
+};
+var Duration = function Duration(props) {
+  return getDuration({
+    returnType: "component",
+    props: props
+  });
+};
+export default Duration;

package/lib/Duration/DurationTypes.js

@@ -0,0 +1 @@
+export {};

package/lib/Duration/constants.js

@@ -0,0 +1,2 @@
+export var MEMO_CACHE_SIZE = 10;
+export var COMPARE_OBJECTS = true;

package/lib/Duration/index.js

@@ -0,0 +1,5 @@
+import Duration, { formatDuration } from "./Duration";
+export default Duration;
+export { Duration };
+export { formatDuration };
+export * from "./DurationTypes";

package/lib/Duration/styles.js

@@ -0,0 +1,6 @@
+import styled from "styled-components";
+import Text from "@sproutsocial/seeds-react-text";
+export var Container = styled(Text).withConfig({
+  displayName: "styles__Container",
+  componentId: "sc-6o8ar7-0"
+})(["font-variant-numeric:tabular-nums;"]);

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

@@ -26,6 +26,7 @@ export * from "@sproutsocial/seeds-react-checkbox";
 export * from "./Collapsible";
 export * from "./DatePicker";
 export * from "./Drawer";
+export * from "./Duration";
 export * from "./EmptyState";
 export * from "./Fieldset";
 export * from "./FormField";

package/package.json

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