@sproutsocial/racine 19.0.0 → 20.0.0

package/lib/Menu/Menu.js

@@ -177,9 +177,9 @@ export var MenuItem = function MenuItem(_ref) {
     if (elemAfter) return elemAfter;
     if (isSelected && !isCheckboxOrRadio) {
       return /*#__PURE__*/React.createElement(Icon, {
-        name: "check",
+        name: "check-solid",
         "aria-hidden": true,
-        size: "mini",
+        size: "small",
         ml: 300
       });
     }

package/lib/Modal/Modal.js

@@ -43,7 +43,7 @@ var ModalCloseButton = function ModalCloseButton(props) {
   return /*#__PURE__*/React.createElement(Button, _extends({
     onClick: onClose
   }, props), /*#__PURE__*/React.createElement(Icon, {
-    name: "x",
+    name: "x-outline",
     ariaLabel: closeButtonLabel
   }));
 };

package/lib/Select/Select.js

@@ -81,9 +81,9 @@ var Select = /*#__PURE__*/function (_React$Component) {
       }, qa, inputProps), children), /*#__PURE__*/React.createElement(Arrow, {
         size: size
       }, /*#__PURE__*/React.createElement(Icon, {
-        name: "chevron-down",
+        name: "chevron-down-outline",
         fixedWidth: true,
-        size: this.props.size === 'small' ? 'mini' : 'default',
+        size: this.props.size === 'small' ? 'small' : 'medium',
         "aria-hidden": true
       })));
     }

package/lib/Select/styles.js

@@ -68,15 +68,14 @@ var Container = styled.div.withConfig({
 export var Arrow = styled.span.withConfig({
   displayName: "styles__Arrow",
   componentId: "sc-egruk2-1"
-})(["position:absolute;top:48%;right:", ";transform:translateY(-50%);color:", ";pointer-events:none;"], function (props) {
+})(["position:absolute;top:50%;right:", ";transform:translateY(-50%);color:", ";pointer-events:none;"], function (props) {
   switch (props.size) {
     case 'large':
-      return props.theme.space[400];
+      return props.theme.space[350];
     case 'small':
-      return props.theme.space[300];
     case 'default':
     default:
-      return props.theme.space[350];
+      return props.theme.space[300];
   }
 }, function (props) {
   return props.theme.colors.icon.base;

package/lib/Switch/Switch.js

@@ -41,7 +41,7 @@ var Switch = function Switch(_ref) {
   }, rest), checked ? /*#__PURE__*/React.createElement(Icon, {
     "aria-hidden": true,
     size: "mini",
-    name: "check"
+    name: "check-solid"
   }) : null);
 };
 export default Switch;

package/lib/TableHeaderCell/TableHeaderCell.js

@@ -32,11 +32,11 @@ export var TableHeaderCell = /*#__PURE__*/function (_React$Component) {
     _this = _super.call.apply(_super, [this].concat(args));
     _defineProperty(_assertThisInitialized(_this), "getSortIcon", function (isSorted, ariaSortDirection) {
       var sortDirection = _this.props.sortDirection;
-      var iconName = 'chevron-up-down-filled';
+      var iconName = 'caret-up-down-outline';
       if (isSorted && sortDirection === SORT_DIRECTIONS.ASC) {
-        iconName = 'chevron-up-filled';
+        iconName = 'caret-up-solid';
       } else if (isSorted && sortDirection === SORT_DIRECTIONS.DESC) {
-        iconName = 'chevron-down-filled';
+        iconName = 'caret-down-solid';
       }
       return /*#__PURE__*/React.createElement(SortIcon, null, /*#__PURE__*/React.createElement(Icon, {
         size: "mini",

package/lib/TableRowAccordion/TableRowAccordion.js

@@ -80,7 +80,7 @@ var TableRowAccordion = /*#__PURE__*/function (_React$Component) {
           onClick: this.handleToggle,
           role: "button"
         }, /*#__PURE__*/React.createElement(Icon, {
-          name: isExpanded ? 'chevron-up' : 'chevron-down',
+          name: isExpanded ? 'chevron-up-outline' : 'chevron-down-outline',
           "aria-hidden": true
         }))
       })), /*#__PURE__*/React.createElement(Detail, {

package/lib/Toast/Toast.js

@@ -29,10 +29,10 @@ var ToastContainer = function ToastContainer() {
   }));
 };
 var themeIcon = {
-  success: 'circle-check-filled',
-  info: 'info',
-  warning: 'triangle',
-  error: 'triangle'
+  success: 'circle-check-outline',
+  info: 'circle-i-outline',
+  warning: 'triangle-exclamation-outline',
+  error: 'triangle-exclamation-outline'
 };
 export function toast(options) {
   var props = {
@@ -102,7 +102,7 @@ var Toast = function Toast(_ref) {
       color: "text.body",
       "data-qa-toast-content": ""
     }, content)), /*#__PURE__*/React.createElement(IconBox, null, /*#__PURE__*/React.createElement(Icon, {
-      name: "x",
+      name: "x-outline",
       ml: 400,
       color: "icon.base",
       "aria-hidden": true

package/lib/ToggleHint/ToggleHint.js

@@ -35,12 +35,12 @@ var ToggleHint = /*#__PURE__*/function (_React$Component) {
     _defineProperty(_assertThisInitialized(_this), "getIcon", function () {
       if (_this.props.icon === 'chevron') {
         return /*#__PURE__*/React.createElement(Icon, {
-          name: "chevron-down",
+          name: "chevron-down-outline",
           "aria-hidden": true
         });
       }
       return /*#__PURE__*/React.createElement(Icon, {
-        name: _this.props.isOpen ? 'minus' : 'plus',
+        name: _this.props.isOpen ? 'minus-outline' : 'plus-outline',
         "aria-hidden": true
       });
     });

package/lib/Token/Token.js

@@ -44,7 +44,7 @@ var Token = function Token(_ref) {
   }, "This is an invalid token"), /*#__PURE__*/React.createElement(Icon, {
     "aria-hidden": true,
     pr: 300,
-    name: "error",
+    name: "circle-exclamation-solid",
     size: "mini"
   }), /*#__PURE__*/React.createElement(VisuallyHidden, null, "Invalid")), closeable ? /*#__PURE__*/React.createElement(Box, {
     display: "flex",
@@ -57,7 +57,7 @@ var Token = function Token(_ref) {
   }, children), /*#__PURE__*/React.createElement(Icon, {
     "aria-hidden": true,
     pl: 300,
-    name: "x",
+    name: "x-solid",
     size: "mini"
   })) : children);
 };

package/lib/index.flow.js

@@ -28,7 +28,7 @@ export { default as Drawer } from "./Drawer/index.flow";
 export { default as EmptyState } from "./EmptyState/index.flow";
 export { default as Fieldset } from "./Fieldset/index.flow";
 export { default as FormField } from "./FormField/index.flow";
-export { default as Icon } from "./Icon/index.flow";
+export * from "./Icon/index.flow";
 export { default as Image } from "./Image/index.flow";
 export { default as Indicator } from "./Indicator/index.flow";
 export { default as Input } from "./Input/index.flow";

package/lib/index.js

@@ -1,6 +1,5 @@
 /* Asset types */
 
-export { default as IconNames } from "./iconNames";
 export { default as SpotIllustrationNames } from "./illustrationNames";
 export { default as PartnerLogoNames } from "./logoNames";
 

package/lib/logoNames.js

@@ -1 +1 @@
-export default ["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-alien", "reddit", "salesforce-cloud", "salesforce", "shopify", "slack", "sproutsocial", "tableau", "tiktok", "tripadvisor", "tumblr", "twitter-audience-network", "twitter", "whatsapp", "woocommerce", "yelp", "youtube", "zendesk"];
+export default ["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", "tiktok", "tripadvisor", "tumblr", "twitter-audience-network", "twitter", "whatsapp", "woocommerce", "yelp", "youtube", "zendesk"];

package/lib/utils/mixins.js

@@ -9,5 +9,5 @@ export var svgToDataURL = function svgToDataURL(svgStr) {
 };
 export var visuallyHidden = css(["position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);border:0;"]);
 export var focusRing = css(["box-shadow:0 0 0 1px ", ",0 0px 0px 4px ", ";outline:none;&::-moz-focus-inner{border:0;}"], theme.colors.button.primary.background.base, transparentize(0.7, theme.colors.button.primary.background.base));
-export var pill = css(["min-width:", ";min-height:", ";padding:", " ", ";border-radius:", ";"], theme.space[600], theme.space[600], theme.space[300], theme.space[350], theme.radii.pill);
+export var pill = css(["min-width:", ";min-height:", ";padding:", ";border-radius:", ";"], theme.space[600], theme.space[600], theme.space[300], theme.radii.pill);
 export var disabled = css(["opacity:0.4;pointer-events:none;"]);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@sproutsocial/racine",
-  "version": "19.0.0",
+  "version": "20.0.0",
   "license": "MIT",
   "files": [
     "__flow__",
@@ -92,9 +92,9 @@
   "devDependencies": {
     "@babel/cli": "^7.5.5",
     "@babel/core": "^7.20.2",
-    "@babel/eslint-parser": "^7.19.1",
-    "@babel/plugin-syntax-flow": "^7.18.6",
-    "@babel/plugin-syntax-jsx": "^7.18.6",
+    "@babel/eslint-parser": "^7.22.10",
+    "@babel/plugin-syntax-flow": "^7.22.5",
+    "@babel/plugin-syntax-jsx": "^7.22.5",
     "@babel/preset-env": "^7.20.2",
     "@babel/preset-flow": "^7.0.0",
     "@babel/preset-react": "^7.0.0",
@@ -104,6 +104,7 @@
     "@sproutsocial/seeds-border": "^1.1.0",
     "@sproutsocial/seeds-color": "^1.5.3",
     "@sproutsocial/seeds-depth": "^3.0.0",
+    "@sproutsocial/seeds-icons": "*",
     "@sproutsocial/seeds-motion": "^1.2.0",
     "@sproutsocial/seeds-networkcolor": "^2.11.0",
     "@sproutsocial/seeds-space": "^0.4.7",
@@ -129,8 +130,8 @@
     "@types/react-modal": "^3.16.0",
     "@types/styled-components": "^5.1.26",
     "@types/styled-system": "^5.1.15",
-    "@typescript-eslint/eslint-plugin": "^5.43.0",
-    "@typescript-eslint/parser": "^5.43.0",
+    "@typescript-eslint/eslint-plugin": "^6.3.0",
+    "@typescript-eslint/parser": "^6.3.0",
     "babel-eslint": "^10.1.0",
     "babel-jest": "29.x.x",
     "babel-loader": "8.2.3",
@@ -143,21 +144,21 @@
     "chalk": "^2.3.2",
     "chokidar": "^3.0.2",
     "csstype": "^3.1.1",
-    "eslint": "7.27.0",
-    "eslint-config-prettier": "^6.11.0",
-    "eslint-config-react-app": "^5.2.1",
+    "eslint": "^8.46.0",
+    "eslint-config-prettier": "^9.0.0",
+    "eslint-config-react-app": "^7.0.1",
     "eslint-import-resolver-babel-module": "^5.3.1",
-    "eslint-import-resolver-typescript": "^3.5.2",
+    "eslint-import-resolver-typescript": "^3.6.0",
     "eslint-plugin-babel": "^5.3.1",
-    "eslint-plugin-flowtype": "^5.7.2",
-    "eslint-plugin-import": "^2.26.0",
-    "eslint-plugin-jest": "^27.1.5",
-    "eslint-plugin-jest-dom": "^4.0.3",
+    "eslint-plugin-flowtype": "^8.0.3",
+    "eslint-plugin-import": "^2.28.0",
+    "eslint-plugin-jest": "^27.2.3",
+    "eslint-plugin-jest-dom": "^5.0.2",
     "eslint-plugin-jsx-a11y": "^6.3.1",
-    "eslint-plugin-prettier": "^3.1.4",
-    "eslint-plugin-react": "^7.31.10",
+    "eslint-plugin-prettier": "^5.0.0",
+    "eslint-plugin-react": "^7.33.1",
     "eslint-plugin-react-hooks": "^4.6.0",
-    "eslint-plugin-testing-library": "^5.9.1",
+    "eslint-plugin-testing-library": "^5.11.1",
     "flow-bin": "0.131.0",
     "flowgen": "^1.21.0",
     "glob": "^7.1.6",
@@ -198,15 +199,16 @@
     "@sproutsocial/seeds-border": ">=0.3.0",
     "@sproutsocial/seeds-color": ">=1.2.0",
     "@sproutsocial/seeds-depth": ">=1.0.0",
+    "@sproutsocial/seeds-icons": "^1.0.0",
     "@sproutsocial/seeds-motion": ">=1.1.0",
     "@sproutsocial/seeds-networkcolor": ">=2.2.0",
     "@sproutsocial/seeds-space": ">=0.4.0",
     "@sproutsocial/seeds-typography": ">=2.0.0",
     "moment": "^2.29.4",
     "prop-types": "^15.0.0",
+    "react": "^16.8.0 || ^17.0.0",
     "react-dates": "^21.8.0",
     "react-dom": "^16.8.0 || ^17.0.0",
-    "react": "^16.8.0 || ^17.0.0",
     "styled-components": "^5.2.3"
   },
   "resolutions": {

package/__flow__/EnumIconNames.flow.js

@@ -1,2 +0,0 @@
-// @flow
-export type EnumIconNames = "active-listener" | "add-item" | "add-keyword" | "add-team-member" | "add-variable" | "address-card-outline" | "address-card-solid" | "adobe-experience-manager" | "ads" | "advocacy-outline" | "advocacy" | "android" | "apple" | "approval-indicator-outline" | "approval-indicator" | "archive" | "arrow-down-line" | "arrow-down" | "arrow-left-line" | "arrow-left" | "arrow-right-line" | "arrow-right" | "arrow-up-line" | "arrow-up" | "arrows" | "asset-library-outline" | "asset-library" | "assign" | "atom" | "audio" | "back-to-top" | "bambu-icon-outline" | "bambu-icon" | "barcode" | "basketball" | "bell-outline" | "bigcommerce" | "bitly" | "bold" | "book" | "bookmark" | "bot" | "browser" | "business" | "calendar-outline" | "calendar" | "camera-outline" | "camera-story" | "camera" | "campaign" | "canva" | "carousel" | "cart-plus-outline" | "cart-plus" | "check" | "chevron-down-filled" | "chevron-down" | "chevron-left" | "chevron-right" | "chevron-up-down-filled" | "chevron-up-filled" | "chevron-up" | "circle-check-outline" | "circle-check" | "circle" | "circle+" | "circles" | "circlex" | "click-to-view" | "clicks" | "clipboard-outline" | "clipboard" | "clock" | "closed-captioning" | "cloud" | "code" | "columns" | "comment-ai-outline" | "comment-ai" | "comment-alt-outline" | "comment-alt" | "comment-lines-alt-outline" | "comment" | "compact-density" | "compact-indicator" | "comparison" | "competitor" | "compose" | "content-suggestions" | "credit-card" | "crop" | "crown" | "dashboard" | "deconstructed-negative-sentiment" | "deconstructed-neutral-sentiment" | "deconstructed-positive-sentiment" | "discovery" | "dislike-outline" | "dislike" | "dm-link-outline" | "dm-link" | "dotdotdot" | "download" | "drafts-outline" | "drafts" | "dropbox" | "duplicate-outline" | "duplicate" | "emoji-outline" | "emoji" | "empty-image" | "engagement-per-post" | "engagements" | "error" | "exchange-alt" | "expanded-indicator" | "export" | "extended-circles" | "external-link-alt" | "external-link" | "extreme-negative-sentiment" | "eye-outline" | "eye-slash-outline" | "eye-slash" | "eye" | "facebook-audience-network" | "facebook-branded-content-outline" | "facebook-branded-content" | "facebook-groups" | "facebook" | "fb-reactions-angry" | "fb-reactions-haha" | "fb-reactions-like" | "fb-reactions-love" | "fb-reactions-sad" | "fb-reactions-wow" | "feedly" | "feeds" | "female" | "file-chart-line" | "file-edit" | "file-times-solid" | "filter" | "flag-outline" | "flag" | "flat-negative-sentiment-outline" | "flat-negative-sentiment" | "flat-neutral-sentiment-outline" | "flat-neutral-sentiment" | "flat-positive-sentiment-outline" | "flat-positive-sentiment" | "folder-open" | "folder" | "follow-outline" | "follow" | "follower-increase" | "following" | "font" | "full-access" | "gear" | "gears" | "github" | "glassdoor" | "glasses" | "globe" | "google-analytics-color" | "google-business-messages" | "google-drive" | "google-my-business" | "grip" | "h1" | "h2" | "h3" | "h4" | "hamburger" | "hand-sparkle-outline" | "hand-sparkle" | "hashtag" | "headset" | "heart-outline" | "heart" | "heartbeat" | "help-alt" | "help" | "hiking" | "history" | "home" | "hourglass" | "hubspot" | "image-caption" | "image" | "images" | "impressions-per-post" | "impressions" | "inactive-listener" | "inbox-action" | "inbox-views" | "inbox" | "indicator" | "industry" | "info" | "instagram" | "internal-activity-outline" | "internal-activity" | "italic" | "key" | "keyboard" | "laptop-phone" | "large-density" | "lift" | "like-outline" | "like" | "link" | "linkedin-audience-network" | "linkedin" | "list-ol" | "listening" | "lists" | "location-outline" | "location" | "lock" | "magic-wand" | "male" | "marketo" | "mention" | "message-preview-outline" | "message-preview" | "message" | "messages-outline" | "messages" | "messenger" | "metric-table" | "microsoft-dynamics" | "minus" | "mobile" | "monitor" | "moon" | "negative-sentiment" | "neutral-positive-sentiment" | "neutral-sentiment" | "new-trend" | "newspaper" | "no-access" | "notepad" | "notifications-publishing-outline" | "notifications-publishing" | "notifications" | "offline" | "online" | "paid-promotion-outline" | "paid-promotion" | "paid" | "paint" | "palette" | "paperclip" | "pause" | "pencil-outline" | "pencil" | "person" | "phone" | "pinterest-boards-outline" | "pinterest-boards" | "pinterest" | "play-circle" | "play" | "plug" | "plus" | "positive-sentiment" | "power-up-outline" | "power-up" | "profile-connect" | "profile-disconnect" | "publishing-outline" | "publishing" | "puzzle-piece" | "qr-code" | "queue" | "quotes-solid" | "recommendation" | "reddit-alien" | "reddit" | "reels-outline" | "reels" | "referrals" | "refresh" | "rejected" | "reply-outline" | "reply" | "reporting-period" | "reporting" | "reports-home" | "reports" | "retweet" | "route" | "rss" | "sales" | "salesforce-cloud" | "salesforce" | "save-assets" | "saved-messages" | "saved-reply-outline" | "saved-reply" | "search" | "send-again-outline" | "send-again" | "sent-message-outline" | "sent-message" | "share" | "shopify" | "shopping-bag-outline" | "shopping-bag" | "show-navigation" | "slack" | "small-density" | "smiley" | "some-access" | "sparkles" | "spike-alert" | "star-half-alt-solid" | "star-of-life" | "star-outline" | "star" | "sticky-note-outline" | "sticky-note" | "stories" | "story" | "suggestions" | "sun" | "tag-outline" | "tag" | "targeting-outline" | "targeting" | "tasks-check" | "tasks-outline" | "tasks" | "team-conversation-outline" | "team-conversation" | "team-sprout-outline" | "team-sprout" | "team" | "text-asset" | "text" | "tiktok" | "times" | "tools" | "trash-can-outline" | "trash-can" | "trend-down" | "trend-neutral" | "trend-up" | "trends" | "triangle-black" | "triangle" | "tripadvisor-circle-outline" | "tripadvisor-circle" | "tripadvisor" | "trophy-outline" | "tumblr" | "twitter-audience-network" | "twitter" | "underline" | "unfollow-outline" | "unfollow" | "unlink" | "unlock" | "upload" | "user-circle" | "users" | "verified" | "video-camera-story" | "video-camera" | "vip" | "weight" | "whatsapp" | "window-maximize" | "window-minimize" | "window-regular" | "window-restore" | "woocommerce" | "x" | "yelp-full-star" | "yelp-half-star" | "yelp" | "youtube" | "zendesk";

package/__flow__/Icon/deprecatedIcons.flow.js

@@ -1,40 +0,0 @@
-// @flow
-// In February of 2020, the Design Systems team renamed and consolidated some icons in an effort to introduce consistency in the naming of our icons. This object maps old, deprecated icon names to the "correct" name of the icon {"deprecated key": "correct icon name value"}
-export default Object.freeze({
-  backtotop: 'back-to-top',
-  'circle-check-filled': 'circle-check',
-  'circle-check-no-fill': 'circle-check',
-  'circle-check-inverse-outline': 'circle-check-outline',
-  'circle-check-inverse': 'circle-check-outline',
-  'circle+-filled': 'circle+',
-  'circlex-filled': 'circlex',
-  'circle+-nofill': 'circle+',
-  'circlex-nofill': 'circlex',
-  creditcard: 'credit-card',
-  'direct-message': 'messages',
-  'facebook-nofill': 'facebook',
-  googleanalytics: 'google-analytics-color',
-  'instagram-brand-keyword': 'hashtag',
-  'help-white': 'help',
-  'info-white': 'info',
-  'instagram-nofill': 'instagram',
-  'key-circle': 'key',
-  'key-square': 'key',
-  'linkedin-nofill': 'linkedin',
-  'listening-home': 'listening',
-  'location-pub': 'location',
-  'location-pub-outline': 'location-outline',
-  'publishing-calendar': 'calendar',
-  qrcode: 'qr-code',
-  'sparkles-solid': 'sparkles',
-  'star-inverse': 'star-outline',
-  'triangle-white': 'triangle',
-  'triangle-nofill': 'triangle',
-  'tripadvisor-circle-filled': 'tripadvisor-circle',
-  'tripadvisor-circle-empty': 'tripadvisor-circle-outline',
-  'tumblr-square': 'tumblr',
-  'tumblr-nofill': 'tumblr',
-  'twitter-business-mention': 'search',
-  'verified-nofill': 'verified',
-  'window-maximize-solid': 'window-maximize'
-});