@sproutsocial/racine 20.16.0 → 21.0.0

package/lib/themes/light/theme.js

@@ -5,23 +5,23 @@ function _defineProperty(obj, key, value) { key = _toPropertyKey(key); if (key i
 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); }
 /* eslint-disable no-restricted-imports */
-import { transparentize } from 'polished';
-import COLORS from '@sproutsocial/seeds-color';
-import NETWORKCOLORS from '@sproutsocial/seeds-networkcolor';
+import { transparentize } from "polished";
+import COLORS from "@sproutsocial/seeds-color";
+import NETWORKCOLORS from "@sproutsocial/seeds-networkcolor";
 // eslint-disable-next-line no-restricted-syntax
-import * as TYPOGRAPHY from '@sproutsocial/seeds-typography';
-import SPACE from '@sproutsocial/seeds-space';
-import DEPTH from '@sproutsocial/seeds-depth';
-import MOTION from '@sproutsocial/seeds-motion';
-import BORDER from '@sproutsocial/seeds-border';
+import * as TYPOGRAPHY from "@sproutsocial/seeds-typography";
+import SPACE from "@sproutsocial/seeds-space";
+import DEPTH from "@sproutsocial/seeds-depth";
+import MOTION from "@sproutsocial/seeds-motion";
+import BORDER from "@sproutsocial/seeds-border";
 // json-to-scss is not working with the alias right now
 //import {TypeThemeMode} from '@src/types/theme';
 
 import literalColors from "./literal-colors";
 import { datavizPalette } from "./dataviz-palette";
 import { green, blue, purple, yellow, orange, red, neutral, magenta, pink, aqua, teal } from "./decorative-palettes";
-export var breakpoints = ['900px', '1200px', '1500px', '1800px'];
-var MODE = 'light';
+export var breakpoints = ["900px", "1200px", "1500px", "1800px"];
+var MODE = "light";
 
 // If you are making changes to the colors in the theme file tag the Design Systems team on your PR! Thank you!!
 
@@ -92,7 +92,7 @@ var colors = _objectSpread(_objectSpread({
         active: COLORS.COLOR_BLUE_900
       },
       border: {
-        base: 'transparent'
+        base: "transparent"
       },
       text: {
         base: COLORS.COLOR_NEUTRAL_0,
@@ -101,7 +101,7 @@ var colors = _objectSpread(_objectSpread({
     },
     secondary: {
       background: {
-        base: 'transparent',
+        base: "transparent",
         hover: COLORS.COLOR_NEUTRAL_800,
         active: COLORS.COLOR_NEUTRAL_900
       },
@@ -115,12 +115,12 @@ var colors = _objectSpread(_objectSpread({
     },
     pill: {
       background: {
-        base: 'transparent',
+        base: "transparent",
         hover: COLORS.COLOR_NEUTRAL_100,
         active: COLORS.COLOR_NEUTRAL_200
       },
       border: {
-        base: 'transparent',
+        base: "transparent",
         hover: COLORS.COLOR_NEUTRAL_800
       },
       text: {
@@ -135,7 +135,7 @@ var colors = _objectSpread(_objectSpread({
         active: COLORS.COLOR_RED_1000
       },
       border: {
-        base: 'transparent'
+        base: "transparent"
       },
       text: {
         base: COLORS.COLOR_NEUTRAL_0,
@@ -144,7 +144,7 @@ var colors = _objectSpread(_objectSpread({
     },
     placeholder: {
       background: {
-        base: 'transparent',
+        base: "transparent",
         hover: COLORS.COLOR_NEUTRAL_0,
         active: COLORS.COLOR_NEUTRAL_0
       },
@@ -158,10 +158,10 @@ var colors = _objectSpread(_objectSpread({
     },
     unstyled: {
       background: {
-        base: 'transparent'
+        base: "transparent"
       },
       border: {
-        base: 'transparent'
+        base: "transparent"
       },
       text: {
         base: COLORS.COLOR_NEUTRAL_700,
@@ -229,7 +229,7 @@ var colors = _objectSpread(_objectSpread({
   },
   listItem: {
     background: {
-      base: 'transparent',
+      base: "transparent",
       hover: COLORS.COLOR_NEUTRAL_100,
       selected: COLORS.COLOR_NEUTRAL_800
     }
@@ -390,7 +390,7 @@ var theme = {
   fontWeights: fontWeights,
   space: _objectSpread(_objectSpread({}, space), {}, {
     space: space,
-    '-space': Object.keys(space).reduce(function (negativeSpace, key) {
+    "-space": Object.keys(space).reduce(function (negativeSpace, key) {
       // The values are strings (eg 24px) so we concatenate a negative sign
       negativeSpace[key] = "-".concat(space[key]);
       return negativeSpace;

package/lib/types/shared.flow.js

@@ -1 +1 @@
-import * as React from 'react';
+import * as React from "react";

package/lib/types/styled-components.flow.js

@@ -1 +1 @@
-import * as React from 'react';
+import * as React from "react";

package/lib/types/system-props.flow.js

@@ -1 +1 @@
-'no babel-plugin-flow-react-proptypes';
+"no babel-plugin-flow-react-proptypes";

package/lib/utils/a11yTest.js

@@ -3,7 +3,7 @@ function _regeneratorRuntime() { "use strict"; /*! regenerator-runtime -- Copyri
 function asyncGeneratorStep(gen, resolve, reject, _next, _throw, key, arg) { try { var info = gen[key](arg); var value = info.value; } catch (error) { reject(error); return; } if (info.done) { resolve(value); } else { Promise.resolve(value).then(_next, _throw); } }
 function _asyncToGenerator(fn) { return function () { var self = this, args = arguments; return new Promise(function (resolve, reject) { var gen = fn.apply(self, args); function _next(value) { asyncGeneratorStep(gen, resolve, reject, _next, _throw, "next", value); } function _throw(err) { asyncGeneratorStep(gen, resolve, reject, _next, _throw, "throw", err); } _next(undefined); }); }; }
 /* eslint-env jest, node */
-import { axe } from 'jest-axe';
+import { axe } from "jest-axe";
 
 // use runA11yCheck from react-test-library utils file if using react-testing-library
 export var a11yCheck = /*#__PURE__*/function () {

package/lib/utils/chartColors.js

@@ -1,4 +1,4 @@
-import { COLOR_BLUE_500, COLOR_BLUE_800, COLOR_GREEN_500, COLOR_GREEN_800, COLOR_MAGENTA_500, COLOR_MAGENTA_800, COLOR_NEUTRAL_500, COLOR_NEUTRAL_700, COLOR_ORANGE_500, COLOR_ORANGE_800, COLOR_PINK_500, COLOR_PINK_800, COLOR_PINK_700, COLOR_PURPLE_500, COLOR_PURPLE_700, COLOR_PURPLE_800, COLOR_RED_500, COLOR_RED_700, COLOR_RED_800, COLOR_TEAL_500, COLOR_TEAL_800, COLOR_YELLOW_500, COLOR_YELLOW_800 } from '@sproutsocial/seeds-color';
+import { COLOR_BLUE_500, COLOR_BLUE_800, COLOR_GREEN_500, COLOR_GREEN_800, COLOR_MAGENTA_500, COLOR_MAGENTA_800, COLOR_NEUTRAL_500, COLOR_NEUTRAL_700, COLOR_ORANGE_500, COLOR_ORANGE_800, COLOR_PINK_500, COLOR_PINK_800, COLOR_PINK_700, COLOR_PURPLE_500, COLOR_PURPLE_700, COLOR_PURPLE_800, COLOR_RED_500, COLOR_RED_700, COLOR_RED_800, COLOR_TEAL_500, COLOR_TEAL_800, COLOR_YELLOW_500, COLOR_YELLOW_800 } from "@sproutsocial/seeds-color";
 export var COMPARE_THEME = [COLOR_TEAL_500, COLOR_TEAL_800, COLOR_PURPLE_500, COLOR_PURPLE_800];
 export var CONTRAST_THEME = [COLOR_TEAL_500, COLOR_PURPLE_700, COLOR_PINK_700, COLOR_YELLOW_500, COLOR_BLUE_500, COLOR_MAGENTA_500, COLOR_NEUTRAL_500, COLOR_GREEN_500, COLOR_ORANGE_500, COLOR_RED_700];
 export var EXTENDED_THEME = [COLOR_GREEN_500, COLOR_TEAL_500, COLOR_BLUE_500, COLOR_PURPLE_500, COLOR_MAGENTA_500, COLOR_PINK_500, COLOR_RED_500, COLOR_ORANGE_500, COLOR_YELLOW_500, COLOR_NEUTRAL_500, COLOR_GREEN_800, COLOR_TEAL_800, COLOR_BLUE_800, COLOR_PURPLE_800, COLOR_MAGENTA_800, COLOR_PINK_800, COLOR_RED_800, COLOR_ORANGE_800, COLOR_YELLOW_800, COLOR_NEUTRAL_700];

package/lib/utils/constants.js

@@ -1 +1 @@
-export var EM_DASH = '—'; // shift + option + hyphen on a mac keyboard
+export var EM_DASH = "—"; // shift + option + hyphen on a mac keyboard

package/lib/utils/dataQaLabelQueries.js

@@ -4,7 +4,7 @@ function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o =
 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 { buildQueries, queryAllByAttribute } from '@testing-library/react';
+import { buildQueries, queryAllByAttribute } from "@testing-library/react";
 var getKeyValuePair = function getKeyValuePair(object) {
   var key = Object.keys(object)[0];
   var value = object[key];

package/lib/utils/hooks.flow.js

@@ -4,7 +4,7 @@ function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o =
 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 { useState, useCallback } from 'react';
+import { useState, useCallback } from "react";
 
 // https://stackoverflow.com/questions/44700904/how-to-get-a-functions-return-type-in-flow
 // eslint-disable-next-line flowtype/type-id-match

package/lib/utils/hooks.js

@@ -1,4 +1,4 @@
-'no babel-plugin-flow-react-proptypes';
+"no babel-plugin-flow-react-proptypes";
 
 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; }
@@ -12,7 +12,7 @@ function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o =
 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 { useState, useCallback, useEffect, useMemo, useReducer, useRef } from 'react';
+import { useState, useCallback, useEffect, useMemo, useReducer, useRef } from "react";
 import { canUseDOM } from "./";
 export function useTextContent(initial) {
   var _useState = useState(initial),
@@ -72,12 +72,12 @@ export function useMutationObserverOnce(targetNode, config, callback) {
 }
 export var useSelect = function useSelect() {
   var _ref = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {
-      initialValue: '',
+      initialValue: "",
       // eslint-disable-next-line @typescript-eslint/no-empty-function
       onChange: function onChange() {}
     },
     _ref$initialValue = _ref.initialValue,
-    initialValue = _ref$initialValue === void 0 ? '' : _ref$initialValue,
+    initialValue = _ref$initialValue === void 0 ? "" : _ref$initialValue,
     _ref$onChange = _ref.onChange,
     userOnChange = _ref$onChange === void 0 ? function () {} : _ref$onChange;
   var _useState7 = useState(initialValue),
@@ -98,11 +98,11 @@ export var useSelect = function useSelect() {
 var valueReducer = function valueReducer(state, action) {
   var newState = new Set(state);
   switch (action.type) {
-    case 'reset':
+    case "reset":
       {
         return new Set();
       }
-    case 'toggle_item':
+    case "toggle_item":
     default:
       {
         if (action.value) {
@@ -135,7 +135,7 @@ export var useMultiselect = function useMultiselect() {
   };
   var onChange = useCallback(function (newValue) {
     dispatch({
-      type: 'toggle_item',
+      type: "toggle_item",
       value: newValue
     });
   }, [dispatch]);
@@ -150,7 +150,7 @@ export var useMultiselect = function useMultiselect() {
   }, [userOnChange, value]);
   var onClear = useCallback(function () {
     dispatch({
-      type: 'reset'
+      type: "reset"
     });
   }, [dispatch]);
   return {
@@ -184,7 +184,7 @@ export function useWhyDidYouUpdate(name, props) {
       // If changesObj not empty then output to console
       if (Object.keys(changesObj).length) {
         // eslint-disable-next-line no-console
-        console.log('[why-did-you-update]', name, changesObj);
+        console.log("[why-did-you-update]", name, changesObj);
       }
     }
 

package/lib/utils/index.js

@@ -2,7 +2,7 @@ function _createForOfIteratorHelper(o, allowArrayLike) { var it = typeof Symbol
 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; }
 export var canUseDOM = function canUseDOM() {
-  return Boolean(typeof window !== 'undefined' && window.document && window.document.createElement);
+  return Boolean(typeof window !== "undefined" && window.document && window.document.createElement);
 };
 // Allows a component to pass its own ref *and* a ref prop to the same element.
 // Via https://www.davedrinks.coffee/how-do-i-use-two-react-refs/
@@ -17,7 +17,7 @@ export var mergeRefs = function mergeRefs(refs) {
     try {
       for (_iterator.s(); !(_step = _iterator.n()).done;) {
         var ref = _step.value;
-        if (typeof ref === 'function') {
+        if (typeof ref === "function") {
           ref(inst);
         } else if (ref) {
           ref.current = inst;
@@ -41,7 +41,7 @@ export function includes(coll, el) {
 
 // https://stackoverflow.com/questions/71193818/react-onclick-argument-of-type-eventtarget-is-not-assignable-to-parameter-of-t
 export function assertIsNode(e) {
-  if (!e || !('nodeType' in e)) {
+  if (!e || !("nodeType" in e)) {
     throw new Error("Node expected");
   }
 }

package/lib/utils/innerText.flow.js

@@ -1 +1 @@
-import * as React from 'react';
+import * as React from "react";

package/lib/utils/innerText.js

@@ -2,23 +2,23 @@ var hasOwnProperty = function hasOwnProperty(obj, property) {
   return Object.prototype.hasOwnProperty.call(obj, property);
 };
 var hasChildren = function hasChildren(node) {
-  return hasOwnProperty(node, 'children');
+  return hasOwnProperty(node, "children");
 };
 var hasProps = function hasProps(node) {
-  return hasOwnProperty(node, 'props');
+  return hasOwnProperty(node, "props");
 };
 var reduceNodeToString = function reduceNodeToString(previous, current) {
   return previous.length ? "".concat(previous, " ").concat(innerText(current)) : innerText(current);
 };
 var innerText = function innerText(node) {
-  if (node === null || typeof node === 'undefined' || typeof node === 'boolean') {
-    return '';
-  } else if (typeof node === 'string') {
+  if (node === null || typeof node === "undefined" || typeof node === "boolean") {
+    return "";
+  } else if (typeof node === "string") {
     return node;
-  } else if (typeof node === 'number') {
+  } else if (typeof node === "number") {
     return node.toString();
   } else if (Array.isArray(node)) {
-    return node.reduce(reduceNodeToString, '');
+    return node.reduce(reduceNodeToString, "");
     // eslint-disable-next-line @typescript-eslint/ban-ts-comment
     // @ts-ignore - hasProps checks for props, but may be able to fix this
   } else if (hasProps(node) && hasChildren(node.props)) {
@@ -26,6 +26,6 @@ var innerText = function innerText(node) {
     // @ts-ignore - how can we make sure ts knows this is ok?
     return innerText(node.props.children);
   }
-  return '';
+  return "";
 };
 export default innerText;

package/lib/utils/mixins.js

@@ -1,9 +1,9 @@
-import { transparentize } from 'polished';
-import { css } from 'styled-components';
+import { transparentize } from "polished";
+import { css } from "styled-components";
 import theme from "../themes/light/theme";
 export var svgToDataURL = function svgToDataURL(svgStr) {
-  var encoded = encodeURIComponent(svgStr).replace(/'/g, '%27').replace(/"/g, '%22');
-  var header = 'data:image/svg+xml,';
+  var encoded = encodeURIComponent(svgStr).replace(/'/g, "%27").replace(/"/g, "%22");
+  var header = "data:image/svg+xml,";
   var dataUrl = header + encoded;
   return dataUrl;
 };

package/lib/utils/react-testing-library.flow.js

@@ -1,3 +1,3 @@
-import * as React from 'react';
-import { act as defaultAct, cleanup as defaultCleanup, createEvent as defaultCreateEvent, fireEvent as defaultFireEvent, waitFor as defaultWaitFor, waitForElementToBeRemoved as defaultWaitForElementToBeRemoved } from '@testing-library/react';
-import defaultUserEvent from '@testing-library/user-event';
+import * as React from "react";
+import { act as defaultAct, cleanup as defaultCleanup, createEvent as defaultCreateEvent, fireEvent as defaultFireEvent, waitFor as defaultWaitFor, waitForElementToBeRemoved as defaultWaitForElementToBeRemoved } from "@testing-library/react";
+import defaultUserEvent from "@testing-library/user-event";

package/lib/utils/react-testing-library.js

@@ -7,8 +7,8 @@ function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t =
 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); }
-import { act, cleanup, createEvent, fireEvent, queries, render, screen as defaultScreen, waitFor, waitForElementToBeRemoved, within } from '@testing-library/react';
-import userEvent from '@testing-library/user-event';
+import { act, cleanup, createEvent, fireEvent, queries, render, screen as defaultScreen, waitFor, waitForElementToBeRemoved, within } from "@testing-library/react";
+import userEvent from "@testing-library/user-event";
 import ThemeProvider from "../ThemeProvider";
 import { a11yCheck } from "./a11yTest";
 import { dataQaLabelQueries } from "./dataQaLabelQueries";

package/lib/utils/responsiveProps/index.js

@@ -9,7 +9,7 @@ import theme from "../../themes/light/theme";
 var breakpoints = theme.breakpoints;
 var LENGTH = breakpoints.length + 1;
 export var normalizeResponsiveProp = function normalizeResponsiveProp(value) {
-  if (['string', 'number'].includes(_typeof(value))) {
+  if (["string", "number"].includes(_typeof(value))) {
     return Array(LENGTH).fill(value);
   }
   if (value.length) {

package/lib/utils/responsiveProps/index.test.flow.js

@@ -1,21 +1,21 @@
 import { normalizeResponsiveProp } from "./index.flow";
-describe('normalizeResponsiveProp', function () {
-  it('should handle single, literal values', function () {
+describe("normalizeResponsiveProp", function () {
+  it("should handle single, literal values", function () {
     expect(normalizeResponsiveProp(0)).toMatchObject([0, 0, 0, 0, 0]);
   });
-  it('should handle arrays with 1 value', function () {
+  it("should handle arrays with 1 value", function () {
     expect(normalizeResponsiveProp([0])).toMatchObject([0, 0, 0, 0, 0]);
   });
-  it('should handle arrays with 2 values', function () {
+  it("should handle arrays with 2 values", function () {
     expect(normalizeResponsiveProp([0, 1])).toMatchObject([0, 1, 1, 1, 1]);
   });
-  it('should handle arrays with 3 values', function () {
+  it("should handle arrays with 3 values", function () {
     expect(normalizeResponsiveProp([0, 1, 2])).toMatchObject([0, 1, 2, 2, 2]);
   });
-  it('should handle arrays with 4 values', function () {
+  it("should handle arrays with 4 values", function () {
     expect(normalizeResponsiveProp([0, 1, 2, 3])).toMatchObject([0, 1, 2, 3, 3]);
   });
-  it('should handle arrays with 5 values', function () {
+  it("should handle arrays with 5 values", function () {
     expect(normalizeResponsiveProp([0, 1, 2, 3, 4])).toMatchObject([0, 1, 2, 3, 4]);
   });
 });

package/lib/utils/system-props/gap.js

@@ -1,15 +1,15 @@
-import { system } from 'styled-system';
+import { system } from "styled-system";
 export var gap = system({
   gap: {
-    property: 'gap',
-    scale: 'space'
+    property: "gap",
+    scale: "space"
   },
   rowGap: {
-    property: 'rowGap',
-    scale: 'space'
+    property: "rowGap",
+    scale: "space"
   },
   columnGap: {
-    property: 'columnGap',
-    scale: 'space'
+    property: "columnGap",
+    scale: "space"
   }
 });

package/lib/utils/system-props/system-props.js

@@ -1,9 +1,9 @@
 // eslint-disable-next-line no-restricted-syntax
-import * as styles from 'styled-system';
+import * as styles from "styled-system";
 import { gap } from "./gap";
 var typeScale = styles.variant({
-  key: 'typography',
-  prop: 'typeScale'
+  key: "typography",
+  prop: "typeScale"
 });
 export var COMMON = styles.compose(styles.color, styles.space, styles.system({
   cursor: true,

package/lib/utils/use-measure.js

@@ -4,7 +4,7 @@ function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o =
 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 { useState, useLayoutEffect } from 'react';
+import { useState, useLayoutEffect } from "react";
 var initialBounds = Object.freeze({
   x: 0,
   y: 0,
@@ -24,7 +24,7 @@ export function useMeasure(ref) {
     var element = ref.current;
     if (!element ||
     // in non-browser environments (e.g. Jest tests) ResizeObserver is not defined
-    !('ResizeObserver' in window)) {
+    !("ResizeObserver" in window)) {
       return;
     }
     var resizeObserver = new ResizeObserver(function (_ref) {

package/lib/utils/useInteractiveColor.js

@@ -1,5 +1,5 @@
-import { darken, lighten } from 'polished';
-import { useTheme } from 'styled-components';
+import { darken, lighten } from "polished";
+import { useTheme } from "styled-components";
 
 /**
  * The useInteractiveColor hook has context of theme mode (light or dark)
@@ -10,14 +10,14 @@ import { useTheme } from 'styled-components';
 var useInteractiveColor = function useInteractiveColor(themeColor) {
   // Throw error if used outside of a ThemeProvider (styled-components)
   if (!useTheme()) {
-    throw new Error('useInteractiveColor() must be used within a Styled Components ThemeProvider');
+    throw new Error("useInteractiveColor() must be used within a Styled Components ThemeProvider");
   }
 
   // Get the current theme mode ie. 'light' or 'dark'
   var themeMode = useTheme().mode;
 
   // If the theme mode is dark, return a lightened version of the themeValue
-  if (themeMode === 'dark') {
+  if (themeMode === "dark") {
     return lighten(0.2, themeColor);
   } else {
     // If the theme mode is light, return a darkened version of the themeValue

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@sproutsocial/racine",
-  "version": "20.16.0",
+  "version": "21.0.0",
   "license": "MIT",
   "engines": {
     "node": ">=18"
@@ -29,13 +29,12 @@
     "clean:modules": "rm -rf node_modules",
     "build-package": "node ./bin/buildPackage.js",
     "watch-package": "node ./bin/buildPackage.js --watch",
-    "build-svgs": "node ./bin/buildSVG.js",
     "build-app": "BABEL_ENV=es node ./bin/buildApp.js",
     "build:ts-declarations": "tsc --project tsconfig.build.json && tsc-alias -p tsconfig.build.json",
     "watch-app": "BABEL_ENV=es node ./bin/buildApp.js --watch",
-    "start-package-only": "npm-run-all install-deps clean -p build-svgs watch-package",
-    "dev:storybook": "npm-run-all clean -p build-svgs watch-package watch-app",
-    "build": "npm-run-all -s clean build-svgs build:ts-declarations build-package build-app",
+    "start-package-only": "npm-run-all install-deps clean -p watch-package",
+    "dev:storybook": "npm-run-all clean -p watch-package watch-app",
+    "build": "npm-run-all -s clean build:ts-declarations build-package build-app",
     "format": "prettier --write .",
     "format:check": "prettier -c .",
     "lint": "eslint --max-warnings=0 --fix .",
@@ -54,7 +53,7 @@
     "release": "yarn build && yarn test && yarn changeset publish",
     "storybook": "rm -rf node_modules/.cache/storybook && storybook dev -c .storybook -p 9999",
     "build-storybook": "storybook build --quiet -c .storybook -o .storybook-dist",
-    "build-chromatic": "yarn build-svgs && storybook build --quiet -c .storybook -o .storybook-dist",
+    "build-chromatic": "storybook build --quiet -c .storybook -o .storybook-dist",
     "ts-to-flow": "flowgen $FILE -o $OUTPUT --add-flow-header --no-module-exports"
   },
   "dependencies": {
@@ -94,8 +93,10 @@
     "@sproutsocial/seeds-color": "*",
     "@sproutsocial/seeds-depth": "*",
     "@sproutsocial/seeds-icons": "*",
+    "@sproutsocial/seeds-illustrations": "*",
     "@sproutsocial/seeds-motion": "*",
     "@sproutsocial/seeds-networkcolor": "*",
+    "@sproutsocial/seeds-partner-logos": "*",
     "@sproutsocial/seeds-space": "*",
     "@sproutsocial/seeds-tsconfig": "*",
     "@sproutsocial/seeds-typography": "*",
@@ -132,7 +133,7 @@
     "babel-plugin-polished": "^1.1.0",
     "babel-plugin-styled-components": "^2.0.7",
     "babel-polyfill": "^6.26.0",
-    "backstopjs": "6.2.2",
+    "backstopjs": "6.3.3",
     "chalk": "^2.3.2",
     "chokidar": "^3.0.2",
     "csstype": "^3.1.1",
@@ -166,8 +167,7 @@
     "rimraf": "^2.6.3",
     "storybook": "^7.2.1",
     "storybook-dark-mode": "^3.0.1",
-    "svgo": "^1.3.0",
-    "svgstore": "^3.0.1",
+    "styled-components": "^5.2.3",
     "tsc-alias": "^1.8.2",
     "typescript": "^5.1.6",
     "webpack": "^5.88.2",
@@ -184,6 +184,8 @@
     "@sproutsocial/seeds-networkcolor": ">=2.14.0",
     "@sproutsocial/seeds-space": ">=0.4.0",
     "@sproutsocial/seeds-typography": ">=2.0.0",
+    "@sproutsocial/seeds-partner-logos": ">=1.5.0",
+    "@sproutsocial/seeds-illustrations": ">=1.3.0",
     "moment": "^2.29.4",
     "prop-types": "^15.0.0",
     "react": "^16.8.0 || ^17.0.0",

package/__flow__/EnumIllustrationNames.flow.js

@@ -1,2 +0,0 @@
-// @flow
-export type EnumIllustrationNames = "abacus" | "analytics-offering" | "asset-cards" | "astronaut" | "binoculars" | "brand-keyword" | "browser-doc" | "business" | "calendar-event" | "calendar-reporting" | "cat-error" | "cat-no-access" | "cat" | "checkbox-alert" | "coffee-cup" | "competitors" | "compose-window" | "compose" | "computer-error" | "connect" | "contact" | "conversation" | "custom-branding" | "custom-post-variables" | "customer-service" | "dashboard" | "exclamation-mark" | "face-happy" | "find-bookmark" | "flask" | "general-topic" | "global-features" | "global-trend" | "grow-large" | "grow" | "hands-raised" | "headset" | "heartbeat-connection" | "instagram-links" | "invoice" | "jewel" | "keyword-tracking" | "lightbulb-alt" | "lightbulb" | "like-conversation" | "link-broken" | "link-messages" | "link-sections" | "link-upload" | "listening-pendo" | "listening-sentiment" | "listening-topic-templates" | "listening-tour" | "listening" | "loading" | "mailbox-empty" | "mailbox-full" | "megaphone" | "message" | "molecule" | "network-data" | "no-messages-found" | "no-notifications" | "note" | "notification" | "notifications-onboarding" | "notifications" | "organize-message" | "outbox-queue" | "outbox-reviews" | "pdf" | "planning" | "podium" | "pointer" | "publish-assets" | "publish-links" | "publishing-notifications" | "publishing" | "puzzle-piece" | "question-mark" | "reporting-folder" | "reporting" | "review-location" | "review" | "robot-assembly" | "robot-error" | "robot-happy" | "rocket" | "schedule-date" | "schedule-messages" | "search-keywords" | "search-success" | "search-trends" | "search" | "security" | "sentiment" | "shopping-bag" | "spark-line" | "sprout-mobile-app" | "stamp" | "storefront" | "success" | "tag-message" | "tag" | "team-roles" | "team" | "telescope" | "tha-mel" | "thumbs-up" | "toggle-switch" | "toolset-strength" | "tracking-time" | "twitter-messages" | "twitter-profiles" | "under-construction" | "unsubscribe" | "upward-trend" | "user-task" | "user-team" | "variable-table" | "view-connections" | "vip-list" | "warning" | "wifi" | "workflow-steps";

package/__flow__/EnumLogoNames.flow.js

@@ -1,2 +0,0 @@
-// @flow
-export type EnumLogoNames = "adobe-experience-manager" | "android" | "apple-app-store" | "apple" | "bigcommerce" | "bitly" | "bynder" | "canva" | "dropbox" | "facebook-audience-network" | "facebook" | "facebook-groups" | "facebook-shops" | "feedly" | "github" | "glassdoor" | "google-analytics" | "google-business-messages" | "google-drive" | "google-my-business" | "google-play-store" | "hubspot" | "instagram" | "linkedin-audience-network" | "linkedin" | "marketo" | "messenger" | "microsoft-dynamics" | "pinterest" | "reddit" | "salesforce-cloud" | "salesforce" | "shopify" | "slack" | "sproutsocial" | "tableau" | "threads" | "tiktok" | "tripadvisor" | "trustpilot" | "tumblr" | "twitter-audience-network" | "twitter" | "whatsapp" | "woocommerce" | "x-twitter" | "yelp" | "youtube" | "zendesk";