@sproutsocial/racine 12.15.0 → 12.16.0

package/__flow__/EnumLogoNames.js

@@ -1,2 +1,2 @@
 // @flow
-    export type EnumLogoNames = "bitly-dark" | "bitly" | "canva-dark" | "canva" | "dropbox-dark" | "dropbox" | "facebook-audience-network-dark" | "facebook-audience-network" | "facebook-dark" | "facebook-groups-dark" | "facebook-groups" | "facebook-shops-dark" | "facebook-shops" | "facebook" | "feedly-dark" | "feedly" | "glassdoor-dark" | "glassdoor" | "google-analytics-dark" | "google-analytics" | "google-business-messages-dark" | "google-business-messages" | "google-drive-dark" | "google-drive" | "google-my-business-dark" | "google-my-business" | "hubspot-dark" | "hubspot" | "instagram-dark" | "instagram" | "linkedin-audience-network-dark" | "linkedin-audience-network" | "linkedin-dark" | "linkedin" | "marketo-dark" | "marketo" | "messenger-dark" | "messenger" | "microsoft-dynamics-dark" | "microsoft-dynamics" | "pinterest-dark" | "pinterest" | "reddit-dark" | "reddit" | "salesforce-dark" | "salesforce" | "shopify-dark" | "shopify" | "slack-dark" | "slack" | "tiktok-dark" | "tiktok" | "tripadvisor-dark" | "tripadvisor" | "tumblr-dark" | "tumblr" | "twitter-audience-network-dark" | "twitter-audience-network" | "twitter-dark" | "twitter" | "whatsapp-dark" | "whatsapp" | "woocommerce-dark" | "woocommerce" | "yelp-dark" | "yelp" | "youtube-dark" | "youtube" | "zendesk-dark" | "zendesk";
+    export type EnumLogoNames = "bitly-dark" | "bitly" | "canva-dark" | "canva" | "dropbox-dark" | "dropbox-lockup-dark" | "dropbox-lockup" | "dropbox-wordmark-dark" | "dropbox-wordmark" | "dropbox" | "facebook-audience-network-dark" | "facebook-audience-network" | "facebook-dark" | "facebook-groups-dark" | "facebook-groups" | "facebook-shops-dark" | "facebook-shops" | "facebook" | "feedly-dark" | "feedly" | "glassdoor-dark" | "glassdoor" | "google-analytics-dark" | "google-analytics" | "google-business-messages-dark" | "google-business-messages" | "google-drive-dark" | "google-drive" | "google-my-business-dark" | "google-my-business" | "hubspot-dark" | "hubspot" | "instagram-dark" | "instagram" | "linkedin-audience-network-dark" | "linkedin-audience-network" | "linkedin-dark" | "linkedin" | "marketo-dark" | "marketo" | "messenger-dark" | "messenger" | "microsoft-dynamics-dark" | "microsoft-dynamics" | "pinterest-dark" | "pinterest" | "reddit-dark" | "reddit" | "salesforce-dark" | "salesforce" | "shopify-dark" | "shopify" | "slack-dark" | "slack" | "tiktok-dark" | "tiktok" | "tripadvisor-dark" | "tripadvisor" | "tumblr-dark" | "tumblr" | "twitter-audience-network-dark" | "twitter-audience-network" | "twitter-dark" | "twitter" | "whatsapp-dark" | "whatsapp" | "woocommerce-dark" | "woocommerce" | "yelp-dark" | "yelp" | "youtube-dark" | "youtube" | "zendesk-dark" | "zendesk-lockup-dark" | "zendesk-lockup" | "zendesk-wordmark-dark" | "zendesk-wordmark" | "zendesk";

package/__flow__/Fieldset/index.stories.js

@@ -1,3 +1,4 @@
+// @flow
 import React from "react";
 import { boolean } from "@storybook/addon-knobs";
 
@@ -16,16 +17,19 @@ export const radioGroup = () => (
   <Box width="443px">
     <Fieldset label="Select a location">
       <Radio
+        id="location-chicago"
         name="location"
         label="Chicago"
         checked={boolean("chicago", true)}
       />
       <Radio
+        id="location-seattle"
         name="location"
         label="Seattle"
         checked={boolean("seattle", false)}
       />
       <Radio
+        id="location-dublin"
         name="location"
         label="Dublin"
         checked={boolean("dublin", false)}
@@ -48,9 +52,11 @@ export const inputs = () => (
       }
     >
       <FormField label="First Name">
-        {(props) => <Input {...props} />}
+        {(props) => <Input {...props} name="first-name" />}
+      </FormField>
+      <FormField label="Last Name">
+        {(props) => <Input {...props} name="last-name" />}
       </FormField>
-      <FormField label="Last Name">{(props) => <Input {...props} />}</FormField>
     </Fieldset>
   </Box>
 );
@@ -63,16 +69,19 @@ export const horizontalRadios = () => (
   <Box width="443px">
     <Fieldset label="Select a location" layout="horizontal">
       <Radio
+        id="location-chicago"
         name="location"
         label="Chicago"
         checked={boolean("chicago", true)}
       />
       <Radio
+        id="location-seattle"
         name="location"
         label="Seattle"
         checked={boolean("seattle", false)}
       />
       <Radio
+        id="location-dublin"
         name="location"
         label="Dublin"
         checked={boolean("dublin", false)}
@@ -89,9 +98,11 @@ export const horizontalInputs = () => (
   <Box width="443px">
     <Fieldset label="Your Name" layout="horizontal">
       <FormField label="First Name">
-        {(props) => <Input {...props} />}
+        {(props) => <Input {...props} name="first-name" />}
+      </FormField>
+      <FormField label="Last Name">
+        {(props) => <Input {...props} name="last-name" />}
       </FormField>
-      <FormField label="Last Name">{(props) => <Input {...props} />}</FormField>
     </Fieldset>
   </Box>
 );
@@ -110,8 +121,12 @@ export const customFieldset = () => (
         </Fieldset.HelperText>
       }
     >
-      <FormField label="Name">{(props) => <Input {...props} />}</FormField>
-      <FormField label="Zodiac">{(props) => <Input {...props} />}</FormField>
+      <FormField label="Name">
+        {(props) => <Input {...props} name="name" />}
+      </FormField>
+      <FormField label="Zodiac">
+        {(props) => <Input {...props} name="zodiac" />}
+      </FormField>
     </Fieldset>
   </Box>
 );

package/__flow__/FormField/index.stories.js

@@ -1,3 +1,4 @@
+// @flow
 import React from "react";
 
 import Box from "../Box";
@@ -16,9 +17,10 @@ export const defaultStory = () => (
     <FormField label="Title" helperText="This is a line of helper text">
       {(props) => (
         <Input
+          {...props}
+          name="title"
           placeholder="Enter a title"
           value={text("Form field value", "")}
-          {...props}
         />
       )}
     </FormField>
@@ -29,15 +31,16 @@ export const defaultStory = () => (
     >
       {(props) => (
         <Textarea
+          {...props}
+          name="description"
           placeholder="Enter a description"
           value={text("Text area value", "")}
-          {...props}
         />
       )}
     </FormField>
     <FormField label="Reason">
       {(props) => (
-        <Select {...props}>
+        <Select {...props} name="reason">
           <option value="">Select a reason</option>
           <option value="something">Something goes here</option>
         </Select>
@@ -60,9 +63,10 @@ export const error = () => (
     >
       {(props) => (
         <Input
+          {...props}
+          name="title"
           placeholder="Enter a title"
           value={text("Form field value", "")}
-          {...props}
         />
       )}
     </FormField>
@@ -75,9 +79,10 @@ export const error = () => (
     >
       {(props) => (
         <Textarea
+          {...props}
+          name="description"
           placeholder="Enter a description"
           value={text("Text area value", "")}
-          {...props}
         />
       )}
     </FormField>
@@ -87,7 +92,7 @@ export const error = () => (
       isInvalid={boolean("Reason is invalid", true)}
     >
       {(props) => (
-        <Select {...props}>
+        <Select {...props} name="reason">
           <option value="">Select a reason</option>
           <option value="something">Something goes here</option>
         </Select>

package/__flow__/FormField/index.test.js

@@ -1,3 +1,4 @@
+// @flow
 import React from "react";
 import { render } from "../utils/react-testing-library";
 import Input from "../Input";
@@ -15,10 +16,10 @@ describe("FormField", () => {
       >
         {(props) => (
           <Input
+            {...props}
             placeholder="Enter a title"
             name="title"
             value={inputVal}
-            {...props}
           />
         )}
       </FormField>
@@ -35,7 +36,7 @@ describe("FormField", () => {
         isInvalid={true}
       >
         {(props) => (
-          <Input placeholder="Enter a title" name="title" value="" {...props} />
+          <Input {...props} placeholder="Enter a title" name="title" value="" />
         )}
       </FormField>
     );
@@ -49,7 +50,7 @@ describe("FormField", () => {
         isInvalid={true}
       >
         {(props) => (
-          <Input placeholder="Enter a title" name="title" value="" {...props} />
+          <Input {...props} placeholder="Enter a title" name="title" value="" />
         )}
       </FormField>
     );
@@ -61,7 +62,7 @@ describe("FormField", () => {
     const { getByTestId } = render(
       <FormField id={manualId} label={label} isLabelHidden={true}>
         {(props) => (
-          <Input placeholder="Enter a title" name="title" value="" {...props} />
+          <Input {...props} placeholder="Enter a title" name="title" value="" />
         )}
       </FormField>
     );

package/__flow__/Icon/index.js

@@ -7,12 +7,14 @@ import Container from "./styles";
 import Box from "../Box";
 import deprecatedIcons from "./deprecatedIcons";
 
-type TypeProps = {
+export type TypeProps = {
   /** Name of the icon in the svg sprite */
   name: EnumIconNames | $Keys<typeof deprecatedIcons>,
   size?:
     | "mini" // 12x12
+    // TODO: deprecate default  in favor of small in future release
     | "default" // 16x16
+    | "small" // 16x16
     | "medium" // 24x24
     | "large" // 32x32
     | "jumbo", // 64x64
@@ -78,7 +80,8 @@ type TypeToggleProps = {
   inactiveName: EnumIconNames,
   /** Whether the active icon should be shown or not */
   isActive: boolean,
-  size?: "mini" | "default" | "medium" | "large" | "jumbo",
+  /** The size of the icon. `small` is the default */
+  size?: "mini" | "default" | "small" | "medium" | "large" | "jumbo",
   fixedWidth?: boolean,
   ariaLabel?: string,
 };

package/__flow__/Icon/index.stories.js

@@ -1,5 +1,6 @@
+// @flow
 import React, { useState } from "react";
-import Icon from "./";
+import Icon, { type TypeProps } from "./";
 import Button from "../Button";
 import Box from "../Box";
 import deprecatedNames from "./deprecatedIcons";
@@ -8,7 +9,7 @@ export default {
   title: "Icon",
 };
 
-export const mini12X12 = (args) => <Icon {...args} />;
+export const mini12X12 = (args: TypeProps) => <Icon {...args} />;
 
 mini12X12.args = {
   color: "icon.base",
@@ -20,7 +21,7 @@ mini12X12.story = {
   name: "Mini (12 x 12)",
 };
 
-export const default16X16 = (args) => <Icon {...args} />;
+export const default16X16 = (args: TypeProps) => <Icon {...args} />;
 
 default16X16.args = {
   color: "icon.base",
@@ -31,7 +32,7 @@ default16X16.story = {
   name: "Default (16 x 16)",
 };
 
-export const medium24X24 = (args) => <Icon {...args} />;
+export const medium24X24 = (args: TypeProps) => <Icon {...args} />;
 
 medium24X24.args = {
   color: "icon.base",
@@ -43,7 +44,7 @@ medium24X24.story = {
   name: "Medium (24 x 24)",
 };
 
-export const large32X32 = (args) => <Icon {...args} />;
+export const large32X32 = (args: TypeProps) => <Icon {...args} />;
 
 large32X32.args = {
   color: "icon.base",
@@ -55,7 +56,7 @@ large32X32.story = {
   name: "Large (32 x 32)",
 };
 
-export const jumbo64X64 = (args) => <Icon {...args} />;
+export const jumbo64X64 = (args: TypeProps) => <Icon {...args} />;
 
 jumbo64X64.args = {
   color: "icon.base",
@@ -67,7 +68,7 @@ jumbo64X64.story = {
   name: "Jumbo (64 x 64)",
 };
 
-export const defaultFixedWidth = (args) => <Icon {...args} />;
+export const defaultFixedWidth = (args: TypeProps) => <Icon {...args} />;
 
 defaultFixedWidth.args = {
   color: "icon.success",

package/__flow__/Icon/index.test.js

@@ -1,3 +1,4 @@
+// @flow
 import React from "react";
 import { render } from "../utils/react-testing-library";
 import Icon from "./";

package/__flow__/Icon/styles.js

@@ -7,7 +7,9 @@ import type { TypeTheme } from "../types/theme.flow";
 
 const sizes = {
   mini: "12px",
+  /** TODO: deprecate default  in favor of small in future release */
   default: "16px",
+  small: "16px",
   medium: "24px",
   large: "32px",
   jumbo: "64px",

package/__flow__/IconViewBoxes.js

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

package/__flow__/Image/index.stories.js

@@ -1,3 +1,4 @@
+// @flow
 import React from "react";
 import Image from "./";
 

package/__flow__/Image/index.test.js

@@ -1,3 +1,4 @@
+// @flow
 import React from "react";
 import { render, fireEvent } from "../utils/react-testing-library";
 import Image from "./";

package/__flow__/Indicator/index.stories.js

@@ -1,3 +1,4 @@
+// @flow
 import React from "react";
 import { text } from "@storybook/addon-knobs";
 

package/__flow__/Indicator/index.test.js

@@ -1,3 +1,4 @@
+// @flow
 import React from "react";
 import { render } from "../utils/react-testing-library";
 import Indicator from "./";

package/__flow__/Indicator/styles.js

@@ -14,7 +14,7 @@ const Container: StyledComponent<{ ... }, TypeTheme, *> = styled.span.attrs({
   height: ${(props) => props.theme.space[400]};
   font-size: 10px;
   line-height: 0;
-  color: ${(props) => props.theme.colors.teal[600]};
+  color: ${(props) => props.color ?? props.theme.colors.icon.info};
   text-align: center;
 
   > div {

package/__flow__/Input/index.stories.js

@@ -1,3 +1,4 @@
+// @flow
 import React from "react";
 import { text } from "@storybook/addon-knobs";
 
@@ -10,6 +11,8 @@ export default {
 
 export const defaultStory = () => (
   <Input
+    id="test"
+    name="test"
     placeholder={text("placeholder", "Please enter a value...")}
     value={text("value", "")}
     ariaLabel={text("ariaLabel", "Descriptive label goes here")}
@@ -22,6 +25,8 @@ defaultStory.story = {
 
 export const small = () => (
   <Input
+    id="small"
+    name="small"
     placeholder={text("placeholder", "Please enter a value...")}
     value={text("value", "")}
     ariaLabel={text("ariaLabel", "Descriptive label goes here")}
@@ -35,6 +40,8 @@ small.story = {
 
 export const large = () => (
   <Input
+    id="large"
+    name="large"
     placeholder={text("placeholder", "Please enter a value...")}
     value={text("value", "")}
     ariaLabel={text("ariaLabel", "Descriptive label goes here")}
@@ -48,6 +55,8 @@ large.story = {
 
 export const disabled = () => (
   <Input
+    id="disabled"
+    name="disabled"
     placeholder={text("placeholder", "Please enter a value...")}
     value={text("value", "")}
     ariaLabel={text("ariaLabel", "Descriptive label goes here")}
@@ -61,6 +70,8 @@ disabled.story = {
 
 export const readOnly = () => (
   <Input
+    id="readOnly"
+    name="readOnly"
     placeholder={text("placeholder", "Please enter a value...")}
     value={text("value", "")}
     ariaLabel={text("ariaLabel", "Descriptive label goes here")}
@@ -74,6 +85,8 @@ readOnly.story = {
 
 export const required = () => (
   <Input
+    id="required"
+    name="required"
     value={text("value", "")}
     placeholder={text("placeholder", "Please enter a value...")}
     ariaLabel={text("ariaLabel", "Descriptive label goes here")}
@@ -87,6 +100,8 @@ required.story = {
 
 export const error = () => (
   <Input
+    id="error"
+    name="error"
     value={text("value", "")}
     isInvalid
     placeholder={text("placeholder", "blah@something")}
@@ -100,6 +115,8 @@ error.story = {
 
 export const leftIcon = () => (
   <Input
+    id="left-icon"
+    name="left-icon"
     value={text("value", "")}
     elemBefore={<Icon fixedWidth name="lock" />}
     placeholder={text("placeholder", "Password")}
@@ -113,6 +130,8 @@ leftIcon.story = {
 
 export const rightIcon = () => (
   <Input
+    id="right-icon"
+    name="right-icon"
     value={text("value", "")}
     elemAfter={<Icon fixedWidth name="lock" />}
     placeholder="Password"
@@ -126,6 +145,8 @@ rightIcon.story = {
 
 export const leftAndRightIcons = () => (
   <Input
+    id="left-right-icons"
+    name="left-right-icons"
     elemBefore={<Icon fixedWidth name="search" />}
     elemAfter={<Icon fixedWidth name="lock" />}
     placeholder={text("placeholder", "Please enter a value...")}
@@ -145,6 +166,8 @@ export const SearchInput = () => {
   const [value, setValue] = React.useState("");
   return (
     <Input
+      id="search"
+      name="search"
       type="search"
       placeholder={text("placeholder", "Please enter a value...")}
       value={value}
@@ -164,6 +187,8 @@ export const SmallSearchInput = () => {
 
   return (
     <Input
+      id="small-search"
+      name="small-search"
       type="search"
       size="small"
       placeholder={text("placeholder", "Please enter a value...")}
@@ -184,6 +209,8 @@ export const LargeSearchInput = () => {
 
   return (
     <Input
+      id="large-search"
+      name="large-search"
       type="search"
       size="large"
       placeholder={text("placeholder", "Please enter a value...")}
@@ -201,6 +228,8 @@ LargeSearchInput.story = {
 
 export const uncontrolledSearchInput = () => (
   <Input
+    id="uncontrolled-search"
+    name="uncontrolled-search"
     type="search"
     placeholder={text("placeholder", "Please enter a value...")}
     clearButtonLabel={text("clearButtonLabel", "Clear search")}
@@ -217,6 +246,8 @@ export const NonSearchClearButtonInput = () => {
 
   return (
     <Input
+      id="clear-button"
+      name="clear-button"
       type="text"
       placeholder={text("placeholder", "Please enter a value...")}
       value={value}
@@ -234,6 +265,8 @@ NonSearchClearButtonInput.story = {
 
 export const autofocus = () => (
   <Input
+    id="autofocus"
+    name="autofocus"
     autoFocus
     placeholder={text("placeholder", "Please enter a value...")}
     value={text("value", "")}
@@ -247,6 +280,8 @@ autofocus.story = {
 
 export const maxLength = () => (
   <Input
+    id="maxlength"
+    name="maxlength"
     autoFocus
     placeholder={text("placeholder", "Max Length is 10")}
     maxLength={10}
@@ -260,6 +295,8 @@ maxLength.story = {
 
 export const secondary = () => (
   <Input
+    id="secondary"
+    name="secondary"
     appearance="secondary"
     placeholder={text("placeholder", "Please enter a value...")}
     value={text("value", "")}

package/__flow__/Input/index.test.js

@@ -1,3 +1,4 @@
+// @flow
 import React from "react";
 import "jest-styled-components";
 import { render, fireEvent, userEvent } from "../utils/react-testing-library";

package/__flow__/KeyboardKey/index.stories.js

@@ -1,3 +1,4 @@
+// @flow
 import React from "react";
 import { text } from "@storybook/addon-knobs";
 

package/__flow__/KeyboardKey/index.test.js

@@ -1,3 +1,4 @@
+// @flow
 import React from "react";
 import { render } from "../utils/react-testing-library";
 import KeyboardKey from "./";

package/__flow__/Label/index.stories.js

@@ -1,3 +1,4 @@
+// @flow
 import React from "react";
 import { text } from "@storybook/addon-knobs";
 
@@ -8,7 +9,7 @@ export default {
 };
 
 export const defaultStory = () => (
-  <Label>{text("children", "Example label")}</Label>
+  <Label htmlFor="default">{text("children", "Example label")}</Label>
 );
 
 defaultStory.story = {

package/__flow__/Label/index.test.js

@@ -1,3 +1,4 @@
+// @flow
 import React from "react";
 import { render } from "../utils/react-testing-library";
 import Label from "./";

package/__flow__/Link/index.stories.js

@@ -1,3 +1,4 @@
+// @flow
 import React from "react";
 import { boolean, text } from "@storybook/addon-knobs";
 import { Box } from "../index";

package/__flow__/Link/index.test.js

@@ -1,3 +1,4 @@
+// @flow
 import React from "react";
 import "jest-styled-components";
 import { render } from "../utils/react-testing-library";