@sproutsocial/racine 24.1.0 → 25.0.0

package/CHANGELOG.md

@@ -1,5 +1,39 @@
 # Change Log
 
+## 25.0.0
+
+### Major Changes
+
+- 8f63add: Discontinuation of Flow Type System
+
+  We have officially discontinued the use of the Flow type system in `@sproutsocial/racine`. All Flow types have been removed from the codebase as part of this major release.
+
+  To continue using `@sproutsocial/racine`, please ensure your projects have migrated away from Flow and are now using TypeScript.
+
+### Patch Changes
+
+- bd717d0: # Allows overrides to Avatar border prop
+  - Before this change, Avatar component accepted a `border` prop as one of its system props, however it did not have any effect due to a default border style in the component.
+  - With this change, Avatar now allows `border` prop overrides.
+  - The `border` prop accepts system values `500`, `600`, and `700` for `1px solid`, `2px solid`, and `3px solid`, respectively. Valid strings such as `'1px dashed'` or `'4px solid'` are also accepted.
+- 63beb74: Update displayUnits prop on Duration component to account for partial durations with missing display units
+- Updated dependencies [8f63add]
+- Updated dependencies [15009dd]
+  - @sproutsocial/seeds-react-system-props@3.0.0
+  - @sproutsocial/seeds-react-utilities@4.0.0
+  - @sproutsocial/seeds-react-mixins@3.0.0
+  - @sproutsocial/seeds-react-hooks@3.0.0
+  - @sproutsocial/seeds-react-theme@2.0.0
+  - @sproutsocial/seeds-border@1.6.1
+
+## 24.2.0
+
+### Minor Changes
+
+- 538d167: - Added `displayUnits` prop to the Duration component to give users manual control over which time units are displayed
+  - `display` prop on the Duration component now defaults to "narrow" instead of "long"
+  - Exporting a new helper function for Duration named `getDurationMaxDisplayUnits` that gets the largest number of display units based on the milliseconds value
+
 ## 24.1.0
 
 ### Minor Changes

package/codemods/__tests__/icon-library.test.js

@@ -4,13 +4,7 @@ const transform = require("../icon-library");
 
 describe("icon-library codemod", () => {
   function createTest(testName, input, output, options = {}) {
-    return defineInlineTest(
-      transform,
-      { parser: "flow", ...options },
-      input,
-      output,
-      testName
-    );
+    return defineInlineTest(transform, { ...options }, input, output, testName);
   }
 
   createTest(
@@ -173,11 +167,11 @@ const iconType = typeof Icon;
 
   createTest(
     "Retain first comments when Icon import is removed",
-    `// @flow
+    `
 import { Icon } from '@sproutsocial/racine';
 
 <Icon name={iconName} />`,
-    `// @flow
+    `
 import { IconShim } from 'script/core/react/IconShim';
 
 <IconShim name={iconName} />
@@ -190,7 +184,7 @@ import { IconShim } from 'script/core/react/IconShim';
 
   createTest(
     "Retain first comments and add new comments",
-    `// @flow
+    `//
 import { Badge, Icon } from '@sproutsocial/racine';
 
 <>
@@ -198,7 +192,7 @@ import { Badge, Icon } from '@sproutsocial/racine';
   <Icon name='not-a-real-name' />
   <Badge iconName={iconName} />
 </>`,
-    `// @flow
+    `//
 /*TODO (icon-library codemod): Please manually migrate icon names passed to 2 component(s) in this file.
    Look for usages of these components: Icon, Badge*/
 import { Badge, Icon } from '@sproutsocial/racine';

package/commonjs/Avatar/Avatar.js

@@ -11,6 +11,7 @@ var _styledComponents = _interopRequireWildcard(require("styled-components"));
 var _Box = _interopRequireDefault(require("../Box"));
 var _Image = _interopRequireDefault(require("../Image"));
 var _Text = _interopRequireDefault(require("../Text"));
+var _seedsReactSystemProps = require("@sproutsocial/seeds-react-system-props");
 var _jsxRuntime = require("react/jsx-runtime");
 var _excluded = ["fontSize"],
   _excluded2 = ["appearance", "name", "src", "type", "size", "bg", "color", "initials"];
@@ -51,14 +52,14 @@ var AvatarText = (0, _styledComponents.default)(function (_ref) {
 var Container = (0, _styledComponents.default)(_Box.default).withConfig({
   displayName: "Avatar__Container",
   componentId: "sc-1ffu253-1"
-})(["", ""], function (_ref3) {
+})(["", " ", ""], function (_ref3) {
   var theme = _ref3.theme,
     $type = _ref3.$type,
     bg = _ref3.bg,
     borderColor = _ref3.borderColor,
     $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]);
-});
+}, _seedsReactSystemProps.BORDER);
 var getInitials = function getInitials(name) {
   var fallback = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : "?";
   if (!name || typeof name !== "string") return fallback;

package/commonjs/Duration/Duration.js

@@ -1,6 +1,5 @@
 "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
 });
@@ -11,25 +10,18 @@ var _constants = require("../utils/constants");
 var _VisuallyHidden = require("../VisuallyHidden");
 var _constants2 = require("./constants");
 var _styles = require("./styles");
+var _utils = require("./utils");
 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 _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; }
-var getDivisionAndRemainder = function getDivisionAndRemainder(numerator, denominator) {
-  return [Math.floor(numerator / denominator), numerator % denominator];
-};
-var _createDurationFormatter = function _createDurationFormatter(locale, unitDisplay) {
+var _createDurationFormatter = function _createDurationFormatter(locale, unitDisplay, displayUnits) {
   var timeUnitFormatter = function timeUnitFormatter(locale, unit, unitDisplay) {
     return Intl.NumberFormat(locale, {
       style: "unit",
@@ -37,41 +29,31 @@ var _createDurationFormatter = function _createDurationFormatter(locale, unitDis
       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 formatterByUnit = _defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty({}, _constants2.UNITS.days, timeUnitFormatter(locale, "day", unitDisplay)), _constants2.UNITS.hours, timeUnitFormatter(locale, "hour", unitDisplay)), _constants2.UNITS.minutes, timeUnitFormatter(locale, "minute", unitDisplay)), _constants2.UNITS.seconds, timeUnitFormatter(locale, "second", unitDisplay)), _constants2.UNITS.milliseconds, timeUnitFormatter(locale, "millisecond", unitDisplay));
   var formatList = new Intl.ListFormat(locale, {
     style: "narrow",
     type: "unit"
   });
-  return function (milliseconds) {
-    if (milliseconds <= 0) {
-      return formatMilliseconds(0);
+  return function (value) {
+    var lowestUnit = (0, _utils.getLowestUnit)(displayUnits);
+
+    // if the value is zero or negative, we just want to return 0 for the lowest unit (ex "0 minutes")
+    if (value <= 0) {
+      return formatterByUnit[lowestUnit](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;
+    var millisecondsByUnit = (0, _utils.splitMillisecondsIntoUnits)(value, displayUnits);
+    var list = [];
+    _constants2.ORDERED_UNITS.forEach(function (unit) {
+      if (unit in millisecondsByUnit) {
+        var unitValue = millisecondsByUnit[unit];
+
+        // we want to add to the list if one of two conditions are met:
+        // 1) the unit has a value greater than 0 OR
+        // 2) the unit has value 0 AND the unit is the lowest unit AND the list is already empty
+        if (unitValue !== 0 || unitValue === 0 && unit === lowestUnit && list.length === 0) {
+          list.push(formatterByUnit[unit](millisecondsByUnit[unit]));
+        }
+      }
     });
     return formatList.format(list);
   };
@@ -80,22 +62,21 @@ var _createDurationFormatter = function _createDurationFormatter(locale, unitDis
 // 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,
+    display = _props$display === void 0 ? _constants2.DEFAULT_DISPLAY : _props$display,
+    _props$displayUnits = props.displayUnits,
+    displayUnits = _props$displayUnits === void 0 ? _constants2.DEFAULT_DISPLAY_UNITS : _props$displayUnits,
     invalidMillisecondsLabel = props.invalidMillisecondsLabel,
     _props$locale = props.locale,
-    locale = _props$locale === void 0 ? "en-US" : _props$locale,
+    locale = _props$locale === void 0 ? _constants2.DEFAULT_LOCALE : _props$locale,
     _props$milliseconds = props.milliseconds,
-    milliseconds = _props$milliseconds === void 0 ? null : _props$milliseconds,
+    milliseconds = _props$milliseconds === void 0 ? _constants2.DEFAULT_MILLISECONDS : _props$milliseconds,
     qa = props.qa;
   var isReturnTypeString = returnType === "string";
-  if (!isValidNumber(milliseconds)) {
+  if (!(0, _utils.isValidNumber)(milliseconds)) {
     return isReturnTypeString ? _constants.EM_DASH : /*#__PURE__*/(0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
       children: [invalidMillisecondsLabel ?
       /*#__PURE__*/
@@ -109,7 +90,8 @@ var getDuration = function getDuration(_ref) {
       }))]
     });
   }
-  var fullText = createDurationFormatter(locale, display)(milliseconds);
+  var validatedDisplayUnits = Object.keys(displayUnits).length === 0 ? _constants2.DEFAULT_DISPLAY_UNITS : displayUnits;
+  var fullText = createDurationFormatter(locale, display, validatedDisplayUnits)(milliseconds);
   return isReturnTypeString ? fullText : /*#__PURE__*/(0, _jsxRuntime.jsx)(_styles.Container, _objectSpread(_objectSpread({}, qa), {}, {
     children: fullText
   }));

package/commonjs/Duration/constants.js

@@ -3,6 +3,25 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.MEMO_CACHE_SIZE = exports.COMPARE_OBJECTS = void 0;
+exports.UNITS = exports.ORDERED_UNITS = exports.MILLISECONDS_IN = exports.MEMO_CACHE_SIZE = exports.DEFAULT_MILLISECONDS = exports.DEFAULT_LOCALE = exports.DEFAULT_DISPLAY_UNITS = exports.DEFAULT_DISPLAY = exports.COMPARE_OBJECTS = void 0;
+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 _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); }
+var COMPARE_OBJECTS = exports.COMPARE_OBJECTS = true;
 var MEMO_CACHE_SIZE = exports.MEMO_CACHE_SIZE = 10;
-var COMPARE_OBJECTS = exports.COMPARE_OBJECTS = true;
+var UNITS = exports.UNITS = {
+  days: "days",
+  hours: "hours",
+  minutes: "minutes",
+  seconds: "seconds",
+  milliseconds: "milliseconds"
+};
+var MILLISECONDS_IN = exports.MILLISECONDS_IN = _defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty({}, UNITS.days, 1 * 1000 * 60 * 60 * 24), UNITS.hours, 1 * 1000 * 60 * 60), UNITS.minutes, 1 * 1000 * 60), UNITS.seconds, 1 * 1000), UNITS.milliseconds, 1);
+var ORDERED_UNITS = exports.ORDERED_UNITS = [UNITS.days, UNITS.hours, UNITS.minutes, UNITS.seconds, UNITS.milliseconds];
+
+// Duration props defaults
+var DEFAULT_DISPLAY = exports.DEFAULT_DISPLAY = "narrow";
+var DEFAULT_DISPLAY_UNITS = exports.DEFAULT_DISPLAY_UNITS = _defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty({}, UNITS.days, true), UNITS.hours, true), UNITS.minutes, true), UNITS.seconds, true), UNITS.milliseconds, false);
+var DEFAULT_LOCALE = exports.DEFAULT_LOCALE = "en-US";
+var DEFAULT_MILLISECONDS = exports.DEFAULT_MILLISECONDS = null;

package/commonjs/Duration/index.js

@@ -6,7 +6,8 @@ Object.defineProperty(exports, "__esModule", {
 });
 var _exportNames = {
   Duration: true,
-  formatDuration: true
+  formatDuration: true,
+  getDurationMaxDisplayUnits: true
 };
 Object.defineProperty(exports, "Duration", {
   enumerable: true,
@@ -21,7 +22,14 @@ Object.defineProperty(exports, "formatDuration", {
     return _Duration.formatDuration;
   }
 });
+Object.defineProperty(exports, "getDurationMaxDisplayUnits", {
+  enumerable: true,
+  get: function get() {
+    return _utils.getDurationMaxDisplayUnits;
+  }
+});
 var _Duration = _interopRequireWildcard(require("./Duration"));
+var _utils = require("./utils");
 var _DurationTypes = require("./DurationTypes");
 Object.keys(_DurationTypes).forEach(function (key) {
   if (key === "default" || key === "__esModule") return;

package/commonjs/Duration/utils.js

@@ -0,0 +1,76 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.splitMillisecondsIntoUnits = exports.isValidNumber = exports.getLowestUnit = exports.getDurationMaxDisplayUnits = void 0;
+var _constants = require("./constants");
+function _createForOfIteratorHelper(o, allowArrayLike) { var it = typeof Symbol !== "undefined" && o[Symbol.iterator] || o["@@iterator"]; if (!it) { if (Array.isArray(o) || (it = _unsupportedIterableToArray(o)) || allowArrayLike && o && typeof o.length === "number") { if (it) o = it; var i = 0; var F = function F() {}; return { s: F, n: function n() { if (i >= o.length) return { done: true }; return { done: false, value: o[i++] }; }, e: function e(_e) { throw _e; }, f: F }; } throw new TypeError("Invalid attempt to iterate non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); } var normalCompletion = true, didErr = false, err; return { s: function s() { it = it.call(o); }, n: function n() { var step = it.next(); normalCompletion = step.done; return step; }, e: function e(_e2) { didErr = true; err = _e2; }, f: function f() { try { if (!normalCompletion && it.return != null) it.return(); } finally { if (didErr) throw err; } } }; }
+function _toConsumableArray(arr) { return _arrayWithoutHoles(arr) || _iterableToArray(arr) || _unsupportedIterableToArray(arr) || _nonIterableSpread(); }
+function _nonIterableSpread() { throw new TypeError("Invalid attempt to spread 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 _iterableToArray(iter) { if (typeof Symbol !== "undefined" && iter[Symbol.iterator] != null || iter["@@iterator"] != null) return Array.from(iter); }
+function _arrayWithoutHoles(arr) { if (Array.isArray(arr)) return _arrayLikeToArray(arr); }
+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; }
+var getLowestUnit = exports.getLowestUnit = function getLowestUnit(displayUnits) {
+  return _toConsumableArray(_constants.ORDERED_UNITS).reverse().find(function (unit) {
+    return displayUnits[unit];
+  }) || _constants.UNITS.milliseconds;
+};
+var splitMillisecondsIntoUnits = exports.splitMillisecondsIntoUnits = function splitMillisecondsIntoUnits(milliseconds, displayUnits) {
+  var lowestUnit = getLowestUnit(displayUnits);
+  var remainder = milliseconds % _constants.MILLISECONDS_IN[lowestUnit];
+  if (2 * remainder >= _constants.MILLISECONDS_IN[lowestUnit]) {
+    // if the remainder is large, add enough seconds to increse the lowest unit
+    milliseconds += _constants.MILLISECONDS_IN[lowestUnit] - remainder;
+  }
+  var units = {};
+  _constants.ORDERED_UNITS.forEach(function (unit) {
+    if (displayUnits[unit]) {
+      units[unit] = Math.floor(milliseconds / _constants.MILLISECONDS_IN[unit]);
+      milliseconds -= units[unit] * _constants.MILLISECONDS_IN[unit];
+    }
+  });
+  return units;
+};
+var isValidNumber = exports.isValidNumber = function isValidNumber(value) {
+  return typeof value === "number" && isFinite(value);
+};
+var getDurationMaxDisplayUnits = exports.getDurationMaxDisplayUnits = function getDurationMaxDisplayUnits(_ref) {
+  var milliseconds = _ref.milliseconds,
+    _ref$maxDisplayUnits = _ref.maxDisplayUnits,
+    maxDisplayUnits = _ref$maxDisplayUnits === void 0 ? _constants.ORDERED_UNITS.length : _ref$maxDisplayUnits;
+  var displayUnits = {};
+  if (!isValidNumber(milliseconds)) {
+    return displayUnits;
+  }
+  var _iterator = _createForOfIteratorHelper(_constants.ORDERED_UNITS),
+    _step;
+  try {
+    for (_iterator.s(); !(_step = _iterator.n()).done;) {
+      var unit = _step.value;
+      if (Object.keys(displayUnits).length >= maxDisplayUnits) {
+        break;
+      }
+
+      // @ts-expect-error - stupid typescript isn't smart enough to check the isValidNumber check above ¯\_(ツ)_/¯
+      var millisecondsByUnit = splitMillisecondsIntoUnits(milliseconds, {
+        days: true,
+        hours: true,
+        minutes: true,
+        seconds: true,
+        milliseconds: true
+      });
+
+      // @ts-expect-error - stupid typescript isn't smart enough to check the isValidNumber check above ¯\_(ツ)_/¯
+      if (milliseconds > _constants.MILLISECONDS_IN[unit] && millisecondsByUnit[unit] > 0) {
+        displayUnits[unit] = true;
+      }
+    }
+  } catch (err) {
+    _iterator.e(err);
+  } finally {
+    _iterator.f();
+  }
+  return displayUnits;
+};

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;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"}
+{"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;AAwCvB,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/Duration/Duration.d.ts.map

@@ -1 +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"}
+{"version":3,"file":"Duration.d.ts","sourceRoot":"","sources":["../../../src/Duration/Duration.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAgB/B,OAAO,KAAK,EACV,iBAAiB,EAIlB,MAAM,iBAAiB,CAAC;AAqHzB,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

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

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

@@ -1 +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"}
+{"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,MAAM,wBAAwB,GAAG,MAAM,GAAG,IAAI,CAAC;AAErD,MAAM,MAAM,kBAAkB,GAAG,IAAI,CAAC,eAAe,CAAC;AAEtD,MAAM,MAAM,mBAAmB,GAAG,MAAM,GAAG,QAAQ,CAAC;AAEpD,MAAM,WAAW,wBAAwB;IACvC,IAAI,CAAC,EAAE,OAAO,CAAC;IACf,KAAK,CAAC,EAAE,OAAO,CAAC;IAChB,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,YAAY,CAAC,EAAE,OAAO,CAAC;CACxB;AAED,MAAM,WAAW,iBAAkB,SAAQ,IAAI,CAAC,aAAa,EAAE,UAAU,CAAC;IACxE,uCAAuC;IACvC,YAAY,EAAE,wBAAwB,CAAC;IAEvC,mIAAmI;IACnI,MAAM,CAAC,EAAE,kBAAkB,CAAC;IAE5B,0CAA0C;IAC1C,OAAO,CAAC,EAAE,mBAAmB,CAAC;IAE9B,0CAA0C;IAC1C,YAAY,CAAC,EAAE,wBAAwB,CAAC;IAExC,2GAA2G;IAC3G,wBAAwB,CAAC,EAAE,MAAM,CAAC;IAElC,EAAE,CAAC,EAAE,WAAW,CAAC;CAClB"}

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

@@ -1,3 +1,20 @@
-export declare const MEMO_CACHE_SIZE = 10;
 export declare const COMPARE_OBJECTS = true;
+export declare const MEMO_CACHE_SIZE = 10;
+export declare const UNITS: {
+    days: string;
+    hours: string;
+    minutes: string;
+    seconds: string;
+    milliseconds: string;
+};
+export declare const MILLISECONDS_IN: {
+    [x: string]: number;
+};
+export declare const ORDERED_UNITS: string[];
+export declare const DEFAULT_DISPLAY = "narrow";
+export declare const DEFAULT_DISPLAY_UNITS: {
+    [x: string]: boolean;
+};
+export declare const DEFAULT_LOCALE = "en-US";
+export declare const DEFAULT_MILLISECONDS: null;
 //# sourceMappingURL=constants.d.ts.map

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

@@ -1 +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"}
+{"version":3,"file":"constants.d.ts","sourceRoot":"","sources":["../../../src/Duration/constants.ts"],"names":[],"mappings":"AAAA,eAAO,MAAM,eAAe,OAAO,CAAC;AACpC,eAAO,MAAM,eAAe,KAAK,CAAC;AAClC,eAAO,MAAM,KAAK;;;;;;CAMjB,CAAC;AACF,eAAO,MAAM,eAAe;;CAM3B,CAAC;AACF,eAAO,MAAM,aAAa,UAMzB,CAAC;AAGF,eAAO,MAAM,eAAe,WAAW,CAAC;AACxC,eAAO,MAAM,qBAAqB;;CAMjC,CAAC;AACF,eAAO,MAAM,cAAc,UAAU,CAAC;AACtC,eAAO,MAAM,oBAAoB,MAAO,CAAC"}

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

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

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

@@ -1 +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"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/Duration/index.ts"],"names":[],"mappings":"AAAA,OAAO,QAAQ,EAAE,EAAE,cAAc,EAAE,MAAM,YAAY,CAAC;AACtD,OAAO,EACL,0BAA0B,EAC1B,KAAK,mCAAmC,EACzC,MAAM,SAAS,CAAC;AAEjB,eAAe,QAAQ,CAAC;AACxB,OAAO,EAAE,QAAQ,EAAE,CAAC;AACpB,OAAO,EAAE,cAAc,EAAE,CAAC;AAC1B,OAAO,EAAE,0BAA0B,EAAE,CAAC;AACtC,YAAY,EAAE,mCAAmC,EAAE,CAAC;AACpD,cAAc,iBAAiB,CAAC"}

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

@@ -0,0 +1,16 @@
+import type { TypeDurationDisplayUnits, TypeDurationMilliseconds } from "./DurationTypes";
+export declare const getLowestUnit: (displayUnits: TypeDurationDisplayUnits) => string;
+export declare const splitMillisecondsIntoUnits: (milliseconds: number, displayUnits: TypeDurationDisplayUnits) => {
+    days?: number;
+    hours?: number;
+    minutes?: number;
+    seconds?: number;
+    milliseconds?: number;
+};
+export declare const isValidNumber: (value: unknown) => boolean;
+export interface TypeGetDurationMaxDisplayUnitsProps {
+    milliseconds: TypeDurationMilliseconds;
+    maxDisplayUnits: number;
+}
+export declare const getDurationMaxDisplayUnits: ({ milliseconds, maxDisplayUnits, }: TypeGetDurationMaxDisplayUnitsProps) => TypeDurationDisplayUnits;
+//# sourceMappingURL=utils.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"utils.d.ts","sourceRoot":"","sources":["../../../src/Duration/utils.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EACV,wBAAwB,EACxB,wBAAwB,EACzB,MAAM,iBAAiB,CAAC;AAGzB,eAAO,MAAM,aAAa,iBAAkB,wBAAwB,WAEhD,CAAC;AAErB,eAAO,MAAM,0BAA0B,iBACvB,MAAM,gBACN,wBAAwB,KACrC;IACD,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,YAAY,CAAC,EAAE,MAAM,CAAC;CAoBvB,CAAC;AAEF,eAAO,MAAM,aAAa,UAAW,OAAO,KAAG,OACD,CAAC;AAE/C,MAAM,WAAW,mCAAmC;IAClD,YAAY,EAAE,wBAAwB,CAAC;IACvC,eAAe,EAAE,MAAM,CAAC;CACzB;AAED,eAAO,MAAM,0BAA0B,uCAGpC,mCAAmC,KAAG,wBA4BxC,CAAC"}

package/lib/Avatar/Avatar.js

@@ -20,6 +20,7 @@ import styled, { css } from "styled-components";
 import Box from "../Box";
 import Image from "../Image";
 import Text from "../Text";
+import { BORDER } from "@sproutsocial/seeds-react-system-props";
 import { jsx as _jsx } from "react/jsx-runtime";
 var defaultType = "neutral";
 
@@ -42,14 +43,14 @@ var AvatarText = styled(function (_ref) {
 var Container = styled(Box).withConfig({
   displayName: "Avatar__Container",
   componentId: "sc-1ffu253-1"
-})(["", ""], function (_ref3) {
+})(["", " ", ""], function (_ref3) {
   var theme = _ref3.theme,
     $type = _ref3.$type,
     bg = _ref3.bg,
     borderColor = _ref3.borderColor,
     $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]);
-});
+}, BORDER);
 var getInitials = function getInitials(name) {
   var fallback = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : "?";
   if (!name || typeof name !== "string") return fallback;