@sproutsocial/racine 12.6.0 → 12.7.0

package/CHANGELOG.md

@@ -1,5 +1,11 @@
 # Change Log
 
+## 12.7.0
+
+### Minor Changes
+
+- dbdd391: Adds global-trend and tag small spot illustrations to the Spot illustration component
+
 ## 12.6.0
 
 ### Minor Changes

package/README.md

@@ -23,6 +23,17 @@
 
 ## Installation
 
+To work on Racine, you will need to set up your environment to use Artifactory. 
+
+Follow the instructions to do so [on the wiki](https://sprout.atlassian.net/wiki/spaces/INFRA/pages/3380249272/Getting+started+with+Artifactory+for+NPM+Yarn.).  
+
+Then, copy the `_auth` and `email` settings in your `$HOME/.npmrc` into environmental variables in your shell's rc file (e.g. `$HOME/.zshrc` or `$HOME/.bashrc`), then re-`source` your rc file.
+```shell
+export JFROG_AUTH="_auth string goes here"
+export JFROG_EMAIL="email string goes here"
+```
+
+
 Install Racine using npm or yarn:
 
 ```sh
@@ -71,8 +82,14 @@ Racine uses [Storybook](https://storybook.js.org) as a local development environ
 Racine uses [Storybook](https://storybook.js.org) for local development. Here's how to get started:
 
 1. Clone this repo: `git clone https://github.com/sproutsocial/racine`
-2. Install dependencies: `yarn`
-3. Run the dev app: `yarn start`
+2. Follow these instructions to configure Artifactory for dependencies: https://sprout.atlassian.net/wiki/spaces/INFRA/pages/3380249272/Getting+started+with+Artifactory+for+NPM+Yarn
+3. Copy the `_auth` and `email` settings in your `$HOME/.npmrc` into environmental variables in your shell's rc file (e.g. `$HOME/.zshrc` or `$HOME/.bashrc`), then re-`source` your rc file.
+```shell
+export JFROG_AUTH="_auth string goes here"
+export JFROG_EMAIL="email string goes here"
+```
+4. Install dependencies: `yarn`
+5. Run the dev app: `yarn start`
 
 <details>
 <summary>💡 If you need to test local Racine changes in another project, click here to learn how.</summary>
@@ -119,16 +136,15 @@ Test any local package in another project by utilizing [yarn link](https://yarnp
 
 ## Contributing 
 
-Contributions to Racine are welcomed and encouraged from every member of the team. Whether you're adding a new component or simply fixing a bug, every improvement to the library is future leverage for our peers, our product, and our customers. 
+The Design Systems team works on a regular two-week sprint cadence to iterate against Racine's roadmap and assist in any ad-hoc issues that may come up. That said, contributions to Racine are welcomed from any member of the wider Sprout org. Whether you're adding a new component or simply fixing a bug, every improvement to the library is future leverage for our peers, our product, and our customers. 
 
 ### **🔍 Step 1: Find a way to contribute**
 
 There are a few ways to get involved:
 
-- Join #eng-design-systems on Slack to participate in discussions about Racine's development.
-- Check out [the issues tab of this repository](https://github.com/sproutsocial/racine/issues). Issues are how we track work, discuss ideas and changes to Racine, and collect bugs and features that need to be addressed. If you're looking for an easy way to jump in, we have [a label which shows issues that are good for first-time contributors](https://github.com/sproutsocial/racine/issues?q=is%3Aopen+is%3Aissue+label%3A%22♥%EF%B8%8F+good+first+issue%22).
-- [Racine uses a GitHub project board to track our backlog, in-flight changes, and future changes](https://github.com/sproutsocial/racine/projects/2). It's a great way to get a broad look at what's happening in Racine. 
-- Come to the bi-weekly Racine Component Review meeting, where engineers gather to discuss new components and changes to existing ones. 
+- Join #eng-ui-systems on Slack to participate in discussions about Racine's development.
+- Check out [the issues tab of this repository](https://github.com/sproutsocial/racine/issues). Issues contain community-collected bugs and features that need attention. If you're looking for an easy way to jump in, we have [a label which shows issues that are good for first-time contributors](https://github.com/sproutsocial/racine/issues?q=is%3Aopen+is%3Aissue+label%3A%22♥%EF%B8%8F+good+first+issue%22).
+- The Design Systems team [uses Jira to track our backlog, in-flight changes, and future changes](https://sprout.atlassian.net/jira/software/c/projects/DS/boards/601/backlog). It's a great way to get a broad look at what's happening in Racine, and tracks the squad's work from sprint to sprint, and release to release.
 
 ### **🗺 Step 2: Find your way around**
 
@@ -155,7 +171,13 @@ And you can interact with Racine via the command line with these commands:
 
 ### **✅ Step 3: Make your changes**
 
-Racine uses a tool called [changesets](https://github.com/atlassian/changesets) to automatically pick new version numbers and update the changelog whenever we publish a new version of the package. 
+If you're not a member of the Design Systems team, you'll want to start by creating a [fork of the Racine repo](https://docs.github.com/en/pull-requests/collaborating-with-pull-requests/working-with-forks/about-forks) using the "Fork" button in the top-right of the repo homescreen on GitHub. Before you start writing code, make sure your fork is up-to-date with the latest changes from the main `sproutsocial/racine` repo, and then create a new feature branch based off your local `dev`.
+
+If you are a member of the Design Systems team you'll have write access to `sproutsocial/racine`, which means you can branch directly off `dev` and start working. Either way, once you've got your new feature branch feel free to start coding! As updates are merged into `dev` on `sproutsocial/racine` by other developers over time you'll want to pull those updates into your feature branch, ideally via rebase, to avoid any conflicts when you open a pull request.
+
+*Need to make an urgent update? Branch off `main` instead of dev, and open your PR later against `main`. We consider this a hotfix and only support it for critical time-sensitive updates, so check with the Design Systems team prior to making this kind of contribution.*
+
+As you develop you'll want to track the scope of the changes you make. Racine supports this with a tool called [changesets](https://github.com/atlassian/changesets) to automatically pick new version numbers and update the changelog whenever we publish a new version of the package. 
 
 **Run `yarn change` to generate a changeset that will be used to derive the next version number for Racine from your changes.**
 
@@ -173,19 +195,19 @@ The changeset CLI will also ask you to input a message detailing your changes. T
 
 ### **🗣 Step 4: Create a pull request**
 
-Once you're ready to submit your changes for review, open a PR to this repository. A few things will happen:
+Once you're ready to submit your changes for review, open a PR against the `dev` branch in `sproutsocial/racine`. A few things will happen:
 
 - The Racine maintainers will be tagged to review your code. Feel free to tag any specific individuals who you think should take a look. 
 - Racine's test suite will be ran on CI, and the status will be reported on the PR. You can run `yarn test` to run these tests locally. If there are any issues, they will need to be resolved before the PR can be merged. 
-- Netlify will create a preview deploy of Racine's Storybook so that you can see your changes and share them with others. 
+- If you're a member of the Design Systems team: Netlify will create a preview deploy of Racine's Storybook so that you can see your changes and share them with others. Due to limited Netlify seats only a limited group of developers can generate builds.
 
-Once your tests are passing and you have at least one approving review, feel free to merge your changes into Racine!
+You may be asked to make changes to match Racine's contribution guidelines, so expect to keep attention on your PR for a little bit.  Once your tests are passing and you have at least one approving Design Systems review, a member of the Design Systems team will merge your changes for inclusion in a future release of Racine!
 
 ### **☁️ Step 5: Publish your changes to npm**
 
 As PRs get merged into Racine, changsets will keep a running PR open called `Version Packages`. This PR will detail all of the changes that have been made to the package since the last publish. **Anyone can release a new version of Racine by merging this PR.**
 
-When the PR is merged, [GitHub will kick off a publish of the new version](https://github.com/sproutsocial/racine/actions?query=workflow%3ARelease). There will be a notification in #eng-design-systems in Slack when the new version is available. 
+When the PR is merged, [GitHub will kick off a publish of the new version](https://github.com/sproutsocial/racine/actions?query=workflow%3ARelease). There will be a notification in #eng-ui-systems in Slack when the new version is available. 
 
 ### **✍ Step 6: Document your changes**
 

package/__flow__/Checkbox/styles.js

@@ -182,90 +182,90 @@ const getIcon = (type, color) => {
 
 // eslint-disable-next-line prettier/prettier
 export const CheckboxContainer: StyledComponent<any, TypeTheme, *> = styled.span(
-    (props) => css`
-      display: inline-flex;
-      align-items: center;
-      box-sizing: border-box;
-      position: relative;
-      transition: all ${props.theme.duration.fast} ${props.theme.easing.ease_in};
-
-      @supports (-webkit-appearance: none) {
-        &:before {
-          /* stylelint-disable */
-          content: url("data:image/svg+xml;utf8,${getIcon(
-            props.indeterminate ? "indeterminate" : "check",
-
-            props.checked
-              ? props.theme.colors.form.background.base
-              : props.theme.colors.form.border.base
-          )}");
-          opacity: ${props.checked ? 1 : 0};
-          position: absolute;
-          width: ${props.theme.space[400]};
-          height: ${props.theme.space[400]};
-          text-align: center;
-          transform: translateY(1px);
-          line-height: 1;
-          margin: auto;
-          pointer-events: none;
-          transition: ${props.theme.duration.fast}
-            ${props.theme.easing.ease_inout};
+  (props) => css`
+    display: inline-flex;
+    align-items: center;
+    box-sizing: border-box;
+    position: relative;
+    transition: all ${props.theme.duration.fast} ${props.theme.easing.ease_in};
+
+    @supports (-webkit-appearance: none) {
+      &:before {
+        /* stylelint-disable */
+        content: url("data:image/svg+xml;utf8,${getIcon(
+          props.indeterminate ? "indeterminate" : "check",
+
+          props.checked
+            ? props.theme.colors.form.background.base
+            : props.theme.colors.form.border.base
+        )}");
+        opacity: ${props.checked ? 1 : 0};
+        position: absolute;
+        width: ${props.theme.space[400]};
+        height: ${props.theme.space[400]};
+        text-align: center;
+        transform: translateY(1px);
+        line-height: 1;
+        margin: auto;
+        pointer-events: none;
+        transition: ${props.theme.duration.fast}
+          ${props.theme.easing.ease_inout};
+      }
+
+      &:hover:before {
+        opacity: ${props.disabled && !props.checked ? 0 : 1};
+      }
+
+      ${props.disabled &&
+      css`
+        opacity: 0.4;
+      `}
+
+      input[type='checkbox'] {
+        box-sizing: border-box;
+        appearance: none;
+        margin: 0;
+        padding: 0;
+        width: ${props.theme.space[400]};
+        height: ${props.theme.space[400]};
+        border: 1px solid ${props.theme.colors.form.border.base};
+        border-radius: 4px;
+        background-color: ${props.theme.colors.form.background.base};
+        transition: all ${props.theme.duration.fast}
+          ${props.theme.easing.ease_in};
+        cursor: ${props.disabled ? "not-allowed" : "pointer"};
+        flex-shrink: 0;
+
+        &:not(:checked) {
+          ${!props.indeterminate &&
+          css`
+            border-color: ${props.theme.colors
+              .neutral[300]} !important; /* We don't want the focus ring to remove the border */
+            background-color: ${props.theme.colors.form.background.base};
+          `}
         }
 
-        &:hover:before {
-          opacity: ${props.disabled && !props.checked ? 0 : 1};
+        &:checked {
+          border-color: ${props.theme.colors.form.border.selected};
+          background-color: ${props.theme.colors.form.background.selected};
         }
 
-        ${props.disabled &&
+        ${props.indeterminate &&
+        props.checked &&
         css`
-          opacity: 0.4;
+          border-color: ${props.theme.colors.form.border.selected} !important;
+          background-color: ${props.theme.colors.form.background
+            .selected} !important;
         `}
 
-        input[type='checkbox'] {
-          box-sizing: border-box;
-          appearance: none;
-          margin: 0;
-          padding: 0;
-          width: ${props.theme.space[400]};
-          height: ${props.theme.space[400]};
-          border: 1px solid ${props.theme.colors.form.border.base};
-          border-radius: 4px;
-          background-color: ${props.theme.colors.form.background.base};
-          transition: all ${props.theme.duration.fast}
-            ${props.theme.easing.ease_in};
-          cursor: ${props.disabled ? "not-allowed" : "pointer"};
-          flex-shrink: 0;
-
-          &:not(:checked) {
-            ${!props.indeterminate &&
-            css`
-              border-color: ${props.theme.colors
-                .neutral[300]} !important; /* We don't want the focus ring to remove the border */
-              background-color: ${props.theme.colors.form.background.base};
-            `}
-          }
-
-          &:checked {
-            border-color: ${props.theme.colors.form.border.selected};
-            background-color: ${props.theme.colors.form.background.selected};
-          }
-
-          ${props.indeterminate &&
-          props.checked &&
-          css`
-            border-color: ${props.theme.colors.form.border.selected} !important;
-            background-color: ${props.theme.colors.form.background
-              .selected} !important;
-          `}
-
-          &:focus {
-            ${focusRing}
-          }
+        &:focus {
+          ${focusRing}
         }
       }
+    }
 
-      ${COMMON}
-    `
-  );
+    ${COMMON}
+  `
+);
 
 export default Container;

package/__flow__/Collapsible/index.js

@@ -73,8 +73,9 @@ const Trigger = ({ children, ...rest }) => {
 };
 
 const Panel = ({ children, ...rest }) => {
-  const { isOpen, id, offset, collapsedHeight, openHeight } =
-    useContext(CollapsibleContext);
+  const { isOpen, id, offset, collapsedHeight, openHeight } = useContext(
+    CollapsibleContext
+  );
   const ref = useRef();
   const measurement = useMeasure(ref);
   const [isHidden, setIsHidden] = useState(undefined);

package/__flow__/EnumIllustrationNames.js

@@ -1,2 +1,2 @@
 // @flow
-    export type EnumIllustrationNames = "abacus" | "analytics-offering" | "astronaut" | "brand-keyword" | "business" | "calendar-event" | "calendar-reporting" | "cat-error" | "cat-no-access" | "cat" | "checkbox-alert" | "coffee-cup" | "compose-window" | "compose" | "computer-error" | "connect" | "contact" | "conversation" | "custom-branding" | "customer-service" | "dashboard" | "exclamation-mark" | "face-happy" | "find-bookmark" | "flask" | "general-topic" | "global-features" | "hands-raised" | "headset" | "heartbeat-connection" | "invoice" | "jewel" | "keyword-tracking" | "lightbulb-alt" | "lightbulb" | "like-conversation" | "link-broken" | "link-messages" | "link-sections" | "link-upload" | "listening-pendo" | "listening-tour" | "loading" | "mailbox-empty" | "mailbox-full" | "network-data" | "no-messages-found" | "no-notifications" | "notification" | "notifications-onboarding" | "organize-message" | "outbox-queue" | "outbox-reviews" | "pdf" | "podium" | "pointer" | "publish-assets" | "publish-links" | "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" | "stamp" | "storefront" | "success" | "tag-message" | "team-roles" | "team" | "telescope" | "tha-mel" | "thumbs-up" | "toggle-switch" | "toolset-strength" | "tracking-time" | "twitter-messages" | "twitter-profiles" | "unsubscribe" | "upward-trend" | "user-task" | "view-connections" | "vip-list" | "warning" | "wifi";
+    export type EnumIllustrationNames = "abacus" | "analytics-offering" | "astronaut" | "brand-keyword" | "business" | "calendar-event" | "calendar-reporting" | "cat-error" | "cat-no-access" | "cat" | "checkbox-alert" | "coffee-cup" | "compose-window" | "compose" | "computer-error" | "connect" | "contact" | "conversation" | "custom-branding" | "customer-service" | "dashboard" | "exclamation-mark" | "face-happy" | "find-bookmark" | "flask" | "general-topic" | "global-features" | "global-trend" | "hands-raised" | "headset" | "heartbeat-connection" | "invoice" | "jewel" | "keyword-tracking" | "lightbulb-alt" | "lightbulb" | "like-conversation" | "link-broken" | "link-messages" | "link-sections" | "link-upload" | "listening-pendo" | "listening-tour" | "loading" | "mailbox-empty" | "mailbox-full" | "network-data" | "no-messages-found" | "no-notifications" | "notification" | "notifications-onboarding" | "organize-message" | "outbox-queue" | "outbox-reviews" | "pdf" | "podium" | "pointer" | "publish-assets" | "publish-links" | "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" | "stamp" | "storefront" | "success" | "tag-message" | "tag" | "team-roles" | "team" | "telescope" | "tha-mel" | "thumbs-up" | "toggle-switch" | "toolset-strength" | "tracking-time" | "twitter-messages" | "twitter-profiles" | "unsubscribe" | "upward-trend" | "user-task" | "view-connections" | "vip-list" | "warning" | "wifi";

package/__flow__/IllustrationViewBoxes.js

@@ -1 +1 @@
-module.exports = {"abacus":"0 0 249 157","analytics-offering":"0 0 220 231","astronaut":"0 0 277 298","brand-keyword":"0 0 240 230","business":"0 0 88 56","calendar-event":"0 0 110 42","calendar-reporting":"0 0 248 182","cat-error":"0 0 284 180","cat-no-access":"0 0 370 273","cat":"0 0 240 171","checkbox-alert":"0 0 193 169","coffee-cup":"0 0 196 234","compose-window":"0 0 372 188","compose":"0 0 62 45","computer-error":"0 0 237 259","connect":"0 0 242 162","contact":"0 0 305 145","conversation":"0 0 330 236","custom-branding":"0 0 168 164","customer-service":"0 0 302 155","dashboard":"0 0 337 195","exclamation-mark":"0 0 219 143","face-happy":"0 0 238 173","find-bookmark":"0 0 276 228","flask":"0 0 255 230","general-topic":"0 0 101 63","global-features":"0 0 239 226","hands-raised":"0 0 192 176","headset":"0 0 106 54","heartbeat-connection":"0 0 335 201","invoice":"0 0 171 178","jewel":"0 0 154 137","keyword-tracking":"0 0 400 232","lightbulb-alt":"0 0 89 54","lightbulb":"0 0 49 43","like-conversation":"0 0 293 258","link-broken":"0 0 340 236","link-messages":"0 0 233 250","link-sections":"0 0 270 273","link-upload":"0 0 180 140","listening-pendo":"0 0 544 109","listening-tour":"0 0 236 212","loading":"0 0 62 39","mailbox-empty":"0 0 309 240","mailbox-full":"0 0 352 252","network-data":"0 0 369 229","no-messages-found":"0 0 272 211","no-notifications":"0 0 281 134","notification":"0 0 252 194","notifications-onboarding":"0 0 352 163","organize-message":"0 0 276 220","outbox-queue":"0 0 246 176","outbox-reviews":"0 0 246 176","pdf":"0 0 36 35","podium":"0 0 106 46","pointer":"0 0 54 37","publish-assets":"0 0 336 263","publish-links":"0 0 266 252","puzzle-piece":"0 0 56 44","question-mark":"0 0 302 191","reporting-folder":"0 0 314 247","reporting":"0 0 331 226","review-location":"0 0 251 227","review":"0 0 251 143","robot-assembly":"0 0 375 253","robot-error":"0 0 281 286","robot-happy":"0 0 222 190","rocket":"0 0 101 56","schedule-date":"0 0 386 240","schedule-messages":"0 0 372 217","search-keywords":"0 0 237 243","search-success":"0 0 235 243","search-trends":"0 0 249 187","search":"0 0 337 196","security":"0 0 216 284","sentiment":"0 0 316 246","shopping-bag":"0 0 112 58","spark-line":"0 0 227 113","stamp":"0 0 291 253","storefront":"0 0 111 45","success":"0 0 200 200","tag-message":"0 0 346 226","team-roles":"0 0 358 298","team":"0 0 347 249","telescope":"0 0 272 255","tha-mel":"0 0 181 152","thumbs-up":"0 0 169 250","toggle-switch":"0 0 299 127","toolset-strength":"0 0 348 231","tracking-time":"0 0 360 195","twitter-messages":"0 0 220 228","twitter-profiles":"0 0 335 187","unsubscribe":"0 0 212 163","upward-trend":"0 0 65 49","user-task":"0 0 313 176","view-connections":"0 0 356 201","vip-list":"0 0 212 228","warning":"0 0 55 38","wifi":"0 0 55 43"};
+module.exports = {"abacus":"0 0 249 157","analytics-offering":"0 0 220 231","astronaut":"0 0 277 298","brand-keyword":"0 0 240 230","business":"0 0 88 56","calendar-event":"0 0 110 42","calendar-reporting":"0 0 248 182","cat-error":"0 0 284 180","cat-no-access":"0 0 370 273","cat":"0 0 240 171","checkbox-alert":"0 0 193 169","coffee-cup":"0 0 196 234","compose-window":"0 0 372 188","compose":"0 0 62 45","computer-error":"0 0 237 259","connect":"0 0 242 162","contact":"0 0 305 145","conversation":"0 0 330 236","custom-branding":"0 0 168 164","customer-service":"0 0 302 155","dashboard":"0 0 337 195","exclamation-mark":"0 0 219 143","face-happy":"0 0 238 173","find-bookmark":"0 0 276 228","flask":"0 0 255 230","general-topic":"0 0 101 63","global-features":"0 0 239 226","global-trend":"0 0 56 42","hands-raised":"0 0 192 176","headset":"0 0 106 54","heartbeat-connection":"0 0 335 201","invoice":"0 0 171 178","jewel":"0 0 154 137","keyword-tracking":"0 0 400 232","lightbulb-alt":"0 0 89 54","lightbulb":"0 0 49 43","like-conversation":"0 0 293 258","link-broken":"0 0 340 236","link-messages":"0 0 233 250","link-sections":"0 0 270 273","link-upload":"0 0 180 140","listening-pendo":"0 0 544 109","listening-tour":"0 0 236 212","loading":"0 0 62 39","mailbox-empty":"0 0 309 240","mailbox-full":"0 0 352 252","network-data":"0 0 369 229","no-messages-found":"0 0 272 211","no-notifications":"0 0 281 134","notification":"0 0 252 194","notifications-onboarding":"0 0 352 163","organize-message":"0 0 276 220","outbox-queue":"0 0 246 176","outbox-reviews":"0 0 246 176","pdf":"0 0 36 35","podium":"0 0 106 46","pointer":"0 0 54 37","publish-assets":"0 0 336 263","publish-links":"0 0 266 252","puzzle-piece":"0 0 56 44","question-mark":"0 0 302 191","reporting-folder":"0 0 314 247","reporting":"0 0 331 226","review-location":"0 0 251 227","review":"0 0 251 143","robot-assembly":"0 0 375 253","robot-error":"0 0 281 286","robot-happy":"0 0 222 190","rocket":"0 0 101 56","schedule-date":"0 0 386 240","schedule-messages":"0 0 372 217","search-keywords":"0 0 237 243","search-success":"0 0 235 243","search-trends":"0 0 249 187","search":"0 0 337 196","security":"0 0 216 284","sentiment":"0 0 316 246","shopping-bag":"0 0 112 58","spark-line":"0 0 227 113","stamp":"0 0 291 253","storefront":"0 0 111 45","success":"0 0 200 200","tag-message":"0 0 346 226","tag":"0 0 62 42","team-roles":"0 0 358 298","team":"0 0 347 249","telescope":"0 0 272 255","tha-mel":"0 0 181 152","thumbs-up":"0 0 169 250","toggle-switch":"0 0 299 127","toolset-strength":"0 0 348 231","tracking-time":"0 0 360 195","twitter-messages":"0 0 220 228","twitter-profiles":"0 0 335 187","unsubscribe":"0 0 212 163","upward-trend":"0 0 65 49","user-task":"0 0 313 176","view-connections":"0 0 356 201","vip-list":"0 0 212 228","warning":"0 0 55 38","wifi":"0 0 55 43"};

package/__flow__/Image/index.js

@@ -80,8 +80,16 @@ export default class Image extends React.Component<TypeProps, TypeState> {
   };
 
   render() {
-    const { alt, title, onClick, onError, onLoad, src, qa, ...rest } =
-      this.props;
+    const {
+      alt,
+      title,
+      onClick,
+      onError,
+      onLoad,
+      src,
+      qa,
+      ...rest
+    } = this.props;
 
     return (
       <ImageContainer

package/__flow__/SegmentedControl/index.js

@@ -17,8 +17,9 @@ type TypeSegmentedControlContext = {
   onChange: (e: SyntheticInputEvent<HTMLInputElement>) => void,
 };
 
-const SegmentedControlContext =
-  React.createContext<?TypeSegmentedControlContext>(null);
+const SegmentedControlContext = React.createContext<?TypeSegmentedControlContext>(
+  null
+);
 
 type TypeSegmentedControlItemProps = {
   /** The value of this item. Should be unique among sibling items. */

package/__flow__/SpotIllustration/illustrationNames.js

@@ -27,6 +27,7 @@ export const illustrationNames = [
   "flask",
   "general-topic",
   "global-features",
+  "global-trend",
   "hands-raised",
   "headset",
   "heartbeat-connection",
@@ -82,6 +83,7 @@ export const illustrationNames = [
   "storefront",
   "success",
   "tag-message",
+  "tag",
   "team-roles",
   "team",
   "telescope",

package/__flow__/SpotIllustration/index.stories.js

@@ -74,6 +74,16 @@ export const smallSpots = (args) => (
       <SpotIllustration name="pdf" />
       <SpotIllustration name="wifi" customFill="yellow" />
     </Box>
+    <Box
+      width={1}
+      display="flex"
+      justifyContent="space-between"
+      alignItems="center"
+      mt={600}
+    >
+      <SpotIllustration name="tag" />
+      <SpotIllustration name="global-trend" />
+    </Box>
   </Box>
 );
 

package/__flow__/SpotIllustration/spotIllustrations/global-trend.svg

@@ -0,0 +1,5 @@
+<svg width="56" height="42" viewBox="0 0 56 42" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M43 2.5C43 3.88071 41.8807 5 40.5 5C39.1193 5 38 3.88071 38 2.5C38 1.11929 39.1193 0 40.5 0C41.8807 0 43 1.11929 43 2.5ZM51.043 13C51.5953 13 52.043 13.4477 52.043 14V16.957H55C55.5523 16.957 56 17.4047 56 17.957C56 18.5093 55.5523 18.957 55 18.957H52.043V22C52.043 22.5523 51.5953 23 51.043 23C50.4907 23 50.043 22.5523 50.043 22V18.957H47C46.4477 18.957 46 18.5093 46 17.957C46 17.4047 46.4477 16.957 47 16.957H50.043V14C50.043 13.4477 50.4907 13 51.043 13ZM24.4706 22H40.5294C41.8939 22 43 23.1193 43 24.5V34.8846C43 36.2653 41.8939 37.3846 40.5294 37.3846H38.5V42L32.5 37.3846H24.4706C23.1061 37.3846 22 36.2653 22 34.8846V24.5C22 23.1193 23.1061 22 24.4706 22Z" fill="#56ADF5"/>
+<path d="M31.7847 24.0031C31.7847 24.5554 32.2324 25.0031 32.7847 25.0031H33.8832L30.3816 28.5047L27.5705 26.1621C27.1997 25.8531 26.661 25.8531 26.2901 26.1621L22.7775 29.0893C22.3532 29.4429 22.2959 30.0734 22.6495 30.4977C23.003 30.922 23.6336 30.9793 24.0579 30.6257L26.9303 28.232L29.8028 30.6257C30.2001 30.9569 30.7844 30.9303 31.1501 30.5646L35.2974 26.4173V27.5158C35.2974 28.068 35.7451 28.5158 36.2974 28.5158C36.8497 28.5158 37.2974 28.068 37.2974 27.5158V24.0031C37.2974 23.4508 36.8497 23.0031 36.2974 23.0031H32.7847C32.2324 23.0031 31.7847 23.4508 31.7847 24.0031Z" fill="#273333"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M0.180362 18.1357C0.496289 8.16047 8.68218 0.170898 18.7341 0.170898C28.9863 0.170898 37.2974 8.48195 37.2974 18.7341C37.2974 18.7912 37.2971 18.8481 37.2966 18.905H37.4683C39.3139 18.905 40.81 20.4012 40.81 22.2468V31.9741C40.81 33.8197 39.3139 35.3159 37.4683 35.3159H36.5447V40.6555L29.5206 35.3159H27.0475L27.0556 35.332C26.8149 35.4529 26.5713 35.5687 26.3248 35.6793C26.2507 35.7125 26.1763 35.7453 26.1017 35.7776C23.8421 36.7556 21.3503 37.2974 18.7341 37.2974C8.48195 37.2974 0.170898 28.9863 0.170898 18.7341C0.170898 18.5339 0.174069 18.3344 0.180362 18.1357ZM35.2974 18.7341C35.2974 18.7912 35.2971 18.8481 35.2965 18.905H26.7591C26.7593 18.8481 26.7594 18.7912 26.7594 18.7341C26.7594 17.0574 26.6675 15.4291 26.494 13.8797H34.5746C35.0445 15.415 35.2974 17.045 35.2974 18.7341ZM24.7594 18.7341C24.7594 18.7912 24.7593 18.8481 24.7591 18.905H22.2468C20.4012 18.905 18.905 20.4012 18.905 22.2468V23.5886H12.9874C12.8067 22.0551 12.7088 20.426 12.7088 18.7341C12.7088 17.0422 12.8067 15.4131 12.9874 13.8797H24.4809C24.6616 15.4131 24.7594 17.0422 24.7594 18.7341ZM13.2787 25.5886H18.905V31.9741C18.905 33.0828 19.4449 34.0653 20.2761 34.6732C19.6958 35.1246 19.0714 35.2974 18.7341 35.2974C18.1277 35.2974 17.4488 34.9942 16.7261 34.2301C16.0014 33.4638 15.3028 32.3013 14.695 30.7818C14.1067 29.3112 13.622 27.5524 13.2787 25.5886ZM2.18305 18.0939C2.17497 18.3063 2.1709 18.5197 2.1709 18.7341C2.1709 20.4233 2.42374 22.0533 2.89365 23.5886H10.9742C10.8008 22.0392 10.7088 20.4109 10.7088 18.7341C10.7088 17.0574 10.8008 15.4291 10.9742 13.8797H2.89365C2.48339 15.2201 2.23858 16.6327 2.18305 18.0939ZM3.6513 11.8797H11.2501C11.6168 9.65667 12.1582 7.64333 12.838 5.94366C13.3355 4.69993 13.9182 3.59633 14.5817 2.6957C9.706 3.95441 5.70048 7.37779 3.6513 11.8797ZM18.7341 2.1709C18.1277 2.1709 17.4488 2.47403 16.7261 3.23821C16.0014 4.0045 15.3028 5.16701 14.695 6.68644C14.1067 8.15712 13.622 9.91593 13.2787 11.8797H24.1896C23.8463 9.91593 23.3616 8.15712 22.7733 6.68644C22.1655 5.16701 21.4668 4.0045 20.7421 3.23821C20.0195 2.47403 19.3406 2.1709 18.7341 2.1709ZM26.2182 11.8797H33.817C31.7678 7.37779 27.7623 3.95441 22.8865 2.6957C23.5501 3.59633 24.1328 4.69993 24.6303 5.94366C25.3101 7.64333 25.8515 9.65667 26.2182 11.8797ZM11.2501 25.5886H3.6513C5.70048 30.0905 9.706 33.5139 14.5817 34.7726C13.9182 33.8719 13.3355 32.7684 12.838 31.5246C12.1582 29.825 11.6168 27.8116 11.2501 25.5886ZM22.2468 20.905C21.5058 20.905 20.905 21.5058 20.905 22.2468V31.9741C20.905 32.7152 21.5058 33.3159 22.2468 33.3159H30.1945L34.5447 36.6228V33.3159H37.4683C38.2093 33.3159 38.81 32.7152 38.81 31.9741V22.2468C38.81 21.5058 38.2093 20.905 37.4683 20.905H22.2468Z" fill="#273333"/>
+</svg>

package/__flow__/SpotIllustration/spotIllustrations/tag.svg

@@ -0,0 +1,5 @@
+<svg width="62" height="42" viewBox="0 0 62 42" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M49 2.5C49 3.88071 47.8807 5 46.5 5C45.1193 5 44 3.88071 44 2.5C44 1.11929 45.1193 0 46.5 0C47.8807 0 49 1.11929 49 2.5ZM10.123 12.5983L13.393 27.426L37.7938 41.5138L49 22.1041L24.5992 8.01624L10.123 12.5983ZM20.1022 22.1858C22.1512 22.1858 23.8123 20.5247 23.8123 18.4757C23.8123 16.4267 22.1512 14.7656 20.1022 14.7656C18.0532 14.7656 16.3921 16.4267 16.3921 18.4757C16.3921 20.5247 18.0532 22.1858 20.1022 22.1858ZM57.043 13C57.5953 13 58.043 13.4477 58.043 14V16.957H61C61.5523 16.957 62 17.4047 62 17.957C62 18.5093 61.5523 18.957 61 18.957H58.043V22C58.043 22.5523 57.5953 23 57.043 23C56.4907 23 56.043 22.5523 56.043 22V18.957H53C52.4477 18.957 52 18.5093 52 17.957C52 17.4047 52.4477 16.957 53 16.957H56.043V14C56.043 13.4477 56.4907 13 57.043 13Z" fill="#56ADF5"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M14 14.5C14 12.0147 16.0147 10 18.5 10C20.9852 10 23 12.0147 23 14.5C23 16.9853 20.9852 19 18.5 19C16.0147 19 14 16.9853 14 14.5ZM18.5 12C17.1192 12 16 13.1193 16 14.5C16 15.8807 17.1192 17 18.5 17C19.8807 17 21 15.8807 21 14.5C21 13.1193 19.8807 12 18.5 12Z" fill="#273333"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M8.74877 7.80461C5.33091 6.82661 2.97088 3.90031 2.55435 0.544189L0.56958 0.79052C1.06369 4.77173 3.78604 8.27385 7.77087 9.59542L11.0272 24.3617L36.6757 39.1698L48.8819 18.028L23.2334 3.21987L8.74877 7.80461ZM12.7905 23.0703L35.9437 36.4378L46.1499 18.7601L22.9967 5.3926L9.81238 9.56575L12.7905 23.0703Z" fill="#273333"/>
+</svg>

package/__flow__/TableCell/index.js

@@ -22,8 +22,15 @@ export type TypeTableCell = {
  */
 export default class TableCell extends React.Component<TypeTableCell> {
   render() {
-    const { id, content, colSpan, width, align, children, ...rest } =
-      this.props;
+    const {
+      id,
+      content,
+      colSpan,
+      width,
+      align,
+      children,
+      ...rest
+    } = this.props;
 
     return (
       <Container

package/__flow__/ToggleHint/index.js

@@ -32,8 +32,15 @@ export default class ToggleHint extends React.Component<TypeProps> {
   };
 
   render() {
-    const { icon, isOpen, openString, closeString, qa, className, ...rest } =
-      this.props;
+    const {
+      icon,
+      isOpen,
+      openString,
+      closeString,
+      qa,
+      className,
+      ...rest
+    } = this.props;
 
     return (
       <Container

package/__flow__/systemProps/color.js

@@ -14,8 +14,7 @@ import type {
 
 // https://styled-system.com/table#color
 
-type TypeBackgroundColorSystemProp =
-  TypeResponsiveBaseSystemProp<BackgroundColorProperty>;
+type TypeBackgroundColorSystemProp = TypeResponsiveBaseSystemProp<BackgroundColorProperty>;
 export type TypeColorSystemProps = $ReadOnly<{|
   backgroundColor?: TypeBackgroundColorSystemProp,
   bg?: TypeBackgroundColorSystemProp,

package/__flow__/themes/extendedThemes/sproutTheme/dark/theme.js

@@ -14,6 +14,11 @@ export const navigation = {
     background: {
       base: baseDarkTheme.colors.neutral[900],
     },
+    widget: {
+      background: {
+        base: baseDarkTheme.colors.neutral[800],
+      },
+    },
   },
   settings: {
     listItem: {

package/__flow__/themes/extendedThemes/sproutTheme/light/theme.js

@@ -14,6 +14,11 @@ export const navigation = {
     background: {
       base: baseLightTheme.colors.neutral[800],
     },
+    widget: {
+      background: {
+        base: baseLightTheme.colors.neutral[1000],
+      },
+    },
   },
   settings: {
     listItem: {

package/__flow__/utils/responsiveProps/index.test.js

@@ -19,13 +19,21 @@ describe("normalizeResponsiveProp", () => {
 
   it("should handle arrays with 4 values", () => {
     expect(normalizeResponsiveProp([0, 1, 2, 3])).toMatchObject([
-      0, 1, 2, 3, 3,
+      0,
+      1,
+      2,
+      3,
+      3,
     ]);
   });
 
   it("should handle arrays with 5 values", () => {
     expect(normalizeResponsiveProp([0, 1, 2, 3, 4])).toMatchObject([
-      0, 1, 2, 3, 4,
+      0,
+      1,
+      2,
+      3,
+      4,
     ]);
   });
 });

package/commonjs/SpotIllustration/illustrationNames.js

@@ -2,5 +2,5 @@
 
 exports.__esModule = true;
 exports.illustrationNames = void 0;
-var illustrationNames = ["abacus", "analytics-offering", "astronaut", "brand-keyword", "business", "calendar-event", "calendar-reporting", "cat-error", "cat-no-access", "cat", "checkbox-alert", "coffee-cup", "compose-window", "compose", "computer-error", "connect", "contact", "conversation", "custom-branding", "customer-service", "dashboard", "exclamation-mark", "face-happy", "find-bookmark", "flask", "general-topic", "global-features", "hands-raised", "headset", "heartbeat-connection", "invoice", "jewel", "keyword-tracking", "lightbulb-alt", "lightbulb", "like-conversation", "link-broken", "link-messages", "link-sections", "link-upload", "listening-pendo", "listening-tour", "loading", "mailbox-empty", "mailbox-full", "network-data", "no-messages-found", "no-notifications", "notification", "notifications-onboarding", "organize-message", "outbox-queue", "outbox-reviews", "pdf", "podium", "pointer", "publish-assets", "publish-links", "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", "stamp", "storefront", "success", "tag-message", "team-roles", "team", "telescope", "tha-mel", "thumbs-up", "toggle-switch", "toolset-strength", "tracking-time", "twitter-messages", "twitter-profiles", "unsubscribe", "upward-trend", "user-task", "view-connections", "vip-list", "warning", "wifi"];
+var illustrationNames = ["abacus", "analytics-offering", "astronaut", "brand-keyword", "business", "calendar-event", "calendar-reporting", "cat-error", "cat-no-access", "cat", "checkbox-alert", "coffee-cup", "compose-window", "compose", "computer-error", "connect", "contact", "conversation", "custom-branding", "customer-service", "dashboard", "exclamation-mark", "face-happy", "find-bookmark", "flask", "general-topic", "global-features", "global-trend", "hands-raised", "headset", "heartbeat-connection", "invoice", "jewel", "keyword-tracking", "lightbulb-alt", "lightbulb", "like-conversation", "link-broken", "link-messages", "link-sections", "link-upload", "listening-pendo", "listening-tour", "loading", "mailbox-empty", "mailbox-full", "network-data", "no-messages-found", "no-notifications", "notification", "notifications-onboarding", "organize-message", "outbox-queue", "outbox-reviews", "pdf", "podium", "pointer", "publish-assets", "publish-links", "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", "stamp", "storefront", "success", "tag-message", "tag", "team-roles", "team", "telescope", "tha-mel", "thumbs-up", "toggle-switch", "toolset-strength", "tracking-time", "twitter-messages", "twitter-profiles", "unsubscribe", "upward-trend", "user-task", "view-connections", "vip-list", "warning", "wifi"];
 exports.illustrationNames = illustrationNames;

package/commonjs/themes/extendedThemes/sproutTheme/dark/theme.js

@@ -21,6 +21,11 @@ var navigation = {
   secondary: {
     background: {
       base: _theme.default.colors.neutral[900]
+    },
+    widget: {
+      background: {
+        base: _theme.default.colors.neutral[800]
+      }
     }
   },
   settings: {

package/commonjs/themes/extendedThemes/sproutTheme/light/theme.js

@@ -21,6 +21,11 @@ var navigation = {
   secondary: {
     background: {
       base: _theme.default.colors.neutral[800]
+    },
+    widget: {
+      background: {
+        base: _theme.default.colors.neutral[1000]
+      }
     }
   },
   settings: {