@sproutsocial/racine 24.0.0 → 24.2.0

package/CHANGELOG.md

@@ -1,5 +1,28 @@
 # Change Log
 
+## 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
+
+- 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

package/commonjs/Duration/Duration.js

@@ -0,0 +1,138 @@
+"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 _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 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 _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 = function getLowestUnit(displayUnits) {
+  return _toConsumableArray(_constants2.ORDERED_UNITS).reverse().find(function (unit) {
+    return displayUnits[unit];
+  }) || _constants2.UNITS.milliseconds;
+};
+var splitMillisecondsIntoUnits = function splitMillisecondsIntoUnits(milliseconds, displayUnits) {
+  var lowestUnit = getLowestUnit(displayUnits);
+  var remainder = milliseconds % _constants2.MILLISECONDS_IN[lowestUnit];
+  if (2 * remainder >= _constants2.MILLISECONDS_IN[lowestUnit]) {
+    // if the remainder is large, add enough seconds to increse the lowest unit
+    milliseconds += _constants2.MILLISECONDS_IN[lowestUnit] - remainder;
+  }
+  var units = {};
+  _constants2.ORDERED_UNITS.forEach(function (unit) {
+    if (displayUnits[unit]) {
+      units[unit] = Math.floor(milliseconds / _constants2.MILLISECONDS_IN[unit]);
+      milliseconds -= units[unit] * _constants2.MILLISECONDS_IN[unit];
+    }
+  });
+  return units;
+};
+var _createDurationFormatter = function _createDurationFormatter(locale, unitDisplay, displayUnits) {
+  var timeUnitFormatter = function timeUnitFormatter(locale, unit, unitDisplay) {
+    return Intl.NumberFormat(locale, {
+      style: "unit",
+      unit: unit,
+      unitDisplay: unitDisplay
+    }).format;
+  };
+  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 (value) {
+    var lowestUnit = 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 millisecondsByUnit = 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);
+  };
+};
+
+// 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 getDuration = function getDuration(_ref) {
+  var returnType = _ref.returnType,
+    props = _ref.props;
+  var _props$display = 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 ? _constants2.DEFAULT_LOCALE : _props$locale,
+    _props$milliseconds = props.milliseconds,
+    milliseconds = _props$milliseconds === void 0 ? _constants2.DEFAULT_MILLISECONDS : _props$milliseconds,
+    qa = props.qa;
+  var isReturnTypeString = returnType === "string";
+  if (!(0, _utils.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 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
+  }));
+};
+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,27 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+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 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

@@ -0,0 +1,47 @@
+"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,
+  getDurationMaxDisplayUnits: 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;
+  }
+});
+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;
+  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/Duration/utils.js

@@ -0,0 +1,42 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.isValidNumber = 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 _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; }
+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 ¯\_(ツ)_/¯
+      if (milliseconds > _constants.MILLISECONDS_IN[unit]) {
+        displayUnits[unit] = true;
+      }
+    }
+  } catch (err) {
+    _iterator.e(err);
+  } finally {
+    _iterator.f();
+  }
+  return displayUnits;
+};

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/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;AAiB/B,OAAO,KAAK,EACV,iBAAiB,EAIlB,MAAM,iBAAiB,CAAC;AAmJzB,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,26 @@
+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 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?: TypeDurationLocale;
+    /** The style of the formatted duration */
+    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;
+}
+//# 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,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/__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,20 @@
+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

@@ -0,0 +1 @@
+{"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

@@ -0,0 +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

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

@@ -0,0 +1,8 @@
+import type { TypeDurationDisplayUnits, TypeDurationMilliseconds } from "./DurationTypes";
+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,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,wBAmBxC,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/Duration/Duration.js

@@ -0,0 +1,131 @@
+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 _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; }
+import * as React from "react";
+import memoize from "lru-memoize";
+import { EM_DASH } from "../utils/constants";
+import { VisuallyHidden } from "../VisuallyHidden";
+import { COMPARE_OBJECTS, DEFAULT_DISPLAY, DEFAULT_DISPLAY_UNITS, DEFAULT_LOCALE, DEFAULT_MILLISECONDS, MEMO_CACHE_SIZE, MILLISECONDS_IN, ORDERED_UNITS, UNITS } from "./constants";
+import { Container } from "./styles";
+import { isValidNumber } from "./utils";
+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 getLowestUnit = function getLowestUnit(displayUnits) {
+  return _toConsumableArray(ORDERED_UNITS).reverse().find(function (unit) {
+    return displayUnits[unit];
+  }) || UNITS.milliseconds;
+};
+var splitMillisecondsIntoUnits = function splitMillisecondsIntoUnits(milliseconds, displayUnits) {
+  var lowestUnit = getLowestUnit(displayUnits);
+  var remainder = milliseconds % MILLISECONDS_IN[lowestUnit];
+  if (2 * remainder >= MILLISECONDS_IN[lowestUnit]) {
+    // if the remainder is large, add enough seconds to increse the lowest unit
+    milliseconds += MILLISECONDS_IN[lowestUnit] - remainder;
+  }
+  var units = {};
+  ORDERED_UNITS.forEach(function (unit) {
+    if (displayUnits[unit]) {
+      units[unit] = Math.floor(milliseconds / MILLISECONDS_IN[unit]);
+      milliseconds -= units[unit] * MILLISECONDS_IN[unit];
+    }
+  });
+  return units;
+};
+var _createDurationFormatter = function _createDurationFormatter(locale, unitDisplay, displayUnits) {
+  var timeUnitFormatter = function timeUnitFormatter(locale, unit, unitDisplay) {
+    return Intl.NumberFormat(locale, {
+      style: "unit",
+      unit: unit,
+      unitDisplay: unitDisplay
+    }).format;
+  };
+  var formatterByUnit = _defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty({}, UNITS.days, timeUnitFormatter(locale, "day", unitDisplay)), UNITS.hours, timeUnitFormatter(locale, "hour", unitDisplay)), UNITS.minutes, timeUnitFormatter(locale, "minute", unitDisplay)), UNITS.seconds, timeUnitFormatter(locale, "second", unitDisplay)), UNITS.milliseconds, timeUnitFormatter(locale, "millisecond", unitDisplay));
+  var formatList = new Intl.ListFormat(locale, {
+    style: "narrow",
+    type: "unit"
+  });
+  return function (value) {
+    var lowestUnit = 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 millisecondsByUnit = splitMillisecondsIntoUnits(value, displayUnits);
+    var list = [];
+    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);
+  };
+};
+
+// 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 getDuration = function getDuration(_ref) {
+  var returnType = _ref.returnType,
+    props = _ref.props;
+  var _props$display = props.display,
+    display = _props$display === void 0 ? DEFAULT_DISPLAY : _props$display,
+    _props$displayUnits = props.displayUnits,
+    displayUnits = _props$displayUnits === void 0 ? DEFAULT_DISPLAY_UNITS : _props$displayUnits,
+    invalidMillisecondsLabel = props.invalidMillisecondsLabel,
+    _props$locale = props.locale,
+    locale = _props$locale === void 0 ? DEFAULT_LOCALE : _props$locale,
+    _props$milliseconds = props.milliseconds,
+    milliseconds = _props$milliseconds === void 0 ? DEFAULT_MILLISECONDS : _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 validatedDisplayUnits = Object.keys(displayUnits).length === 0 ? DEFAULT_DISPLAY_UNITS : displayUnits;
+  var fullText = createDurationFormatter(locale, display, validatedDisplayUnits)(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,21 @@
+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); }
+export var COMPARE_OBJECTS = true;
+export var MEMO_CACHE_SIZE = 10;
+export var UNITS = {
+  days: "days",
+  hours: "hours",
+  minutes: "minutes",
+  seconds: "seconds",
+  milliseconds: "milliseconds"
+};
+export var 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);
+export var ORDERED_UNITS = [UNITS.days, UNITS.hours, UNITS.minutes, UNITS.seconds, UNITS.milliseconds];
+
+// Duration props defaults
+export var DEFAULT_DISPLAY = "narrow";
+export var DEFAULT_DISPLAY_UNITS = _defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty({}, UNITS.days, true), UNITS.hours, true), UNITS.minutes, true), UNITS.seconds, true), UNITS.milliseconds, false);
+export var DEFAULT_LOCALE = "en-US";
+export var DEFAULT_MILLISECONDS = null;

package/lib/Duration/index.js

@@ -0,0 +1,7 @@
+import Duration, { formatDuration } from "./Duration";
+import { getDurationMaxDisplayUnits } from "./utils";
+export default Duration;
+export { Duration };
+export { formatDuration };
+export { getDurationMaxDisplayUnits };
+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/Duration/utils.js

@@ -0,0 +1,36 @@
+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 _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; }
+import { MILLISECONDS_IN, ORDERED_UNITS } from "./constants";
+export var isValidNumber = function isValidNumber(value) {
+  return typeof value === "number" && isFinite(value);
+};
+export var getDurationMaxDisplayUnits = function getDurationMaxDisplayUnits(_ref) {
+  var milliseconds = _ref.milliseconds,
+    _ref$maxDisplayUnits = _ref.maxDisplayUnits,
+    maxDisplayUnits = _ref$maxDisplayUnits === void 0 ? ORDERED_UNITS.length : _ref$maxDisplayUnits;
+  var displayUnits = {};
+  if (!isValidNumber(milliseconds)) {
+    return displayUnits;
+  }
+  var _iterator = _createForOfIteratorHelper(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 ¯\_(ツ)_/¯
+      if (milliseconds > MILLISECONDS_IN[unit]) {
+        displayUnits[unit] = true;
+      }
+    }
+  } catch (err) {
+    _iterator.e(err);
+  } finally {
+    _iterator.f();
+  }
+  return displayUnits;
+};

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": "24.0.0",
+  "version": "24.2.0",
   "license": "MIT",
   "engines": {
     "node": ">=18"