@sproutsocial/racine 8.4.0-collapsible-updates.0 → 8.5.1

package/CHANGELOG.md

@@ -1,5 +1,65 @@
 # Change Log
 
+## 8.5.1
+
+### Patch Changes
+
+- 48628f0: Sync icons from Figma
+
+## 8.5.0
+
+### Minor Changes
+
+- 343c636: adds tiktok network color to theme, adds tiktok icon, adds sentiment icons
+
+## 8.4.0
+
+### Minor Changes
+
+- 311f9bb: Added placement prop to menuButton component
+
+## 8.3.0
+
+### Minor Changes
+
+- 13699d6: Updating Link component to include flexbox shorthand props
+
+## 8.2.0
+
+### Minor Changes
+
+- a3887f0: Avatar now has an option for predefined color combos in line with design's accessibility and color guidelines. Overrides are still enabled via styled-system.
+
+## 8.1.4
+
+### Patch Changes
+
+- c920778: removing duplicate icon
+
+## 8.1.3
+
+### Patch Changes
+
+- 90dbdfc: update autosizer import
+
+## 8.1.2
+
+### Patch Changes
+
+- e5bb567: update bigcommerce icon name
+
+## 8.1.1
+
+### Patch Changes
+
+- b470c46: Fix big commerce icon and naming convention
+
+## 8.1.0
+
+### Minor Changes
+
+- cda796b: adds bigcommerce icon
+
 ## 8.0.0
 
 ### Major Changes

package/__flow__/Avatar/index.js

@@ -1,7 +1,11 @@
 // @flow
 import * as React from "react";
 import { useState, useCallback, useMemo, memo } from "react";
-import styled from "styled-components";
+import styled, { css, type StyledComponent } from "styled-components";
+import classnames from "classnames";
+
+import type { TypeTheme } from "../types/theme.flow";
+
 import Box from "../Box";
 import Image from "../Image";
 import Text from "../Text";
@@ -13,11 +17,24 @@ export type TypeProps = {
   name: string,
   /** URL of the avatar image. If a URL is not provided, the component will fall back to showing the user's initials */
   src?: string,
+  type?: "neutral" | "purple" | "green" | "blue" | "yellow" | "red" | "orange",
+  variant?: "dark" | "light",
+  bg?: string,
+  color?: string,
   size?: string,
 };
 
 const AvatarText = styled(({ fontSize, ...rest }) => <Text {...rest} />)`
   font-size: ${(props) => props.fontSize}px;
+  color: ${(props) => props.color}px;
+`;
+const Container: StyledComponent<any, TypeTheme, *> = styled(Box)`
+  ${({ theme, type, variant, bg }) => css`
+    color: ${theme.colors[type][variant === "dark" ? "200" : "900"]};
+    background: ${bg
+      ? bg
+      : theme.colors[type][variant === "dark" ? "900" : "200"]};
+  `}
 `;
 
 const getInitials = (name: string, fallback: string = "?"): string => {
@@ -34,7 +51,11 @@ export const Avatar = ({
   appearance = "circle",
   name,
   src,
+  variant = "light",
+  type = "neutral",
   size = "40px",
+  bg,
+  color,
   ...rest
 }: TypeProps) => {
   const [imageFailedLoading, setImageFailedLoading] = useState(false);
@@ -48,7 +69,8 @@ export const Avatar = ({
   const fontSize = Math.floor(Number(size.replace("px", "")) * 0.4);
 
   return (
-    <Box
+    <Container
+      className={classnames(variant)}
       size={size}
       overflow="hidden"
       borderRadius={appearance === "leaf" ? "40% 0 40% 0" : "50%"}
@@ -58,13 +80,20 @@ export const Avatar = ({
       justifyContent="center"
       alignItems="center"
       title={name}
-      bg="neutral.200"
+      bg={bg}
+      variant={variant}
+      type={type}
       data-qa-user-avatar={name}
       // $FlowIssue - upgrade v0.112.0
       {...rest}
     >
       {!src || imageFailedLoading ? (
-        <AvatarText lineHeight={size} fontWeight="semibold" fontSize={fontSize}>
+        <AvatarText
+          lineHeight={size}
+          fontWeight="semibold"
+          fontSize={fontSize}
+          color={color}
+        >
           {initials}
         </AvatarText>
       ) : (
@@ -77,7 +106,7 @@ export const Avatar = ({
           m={0}
         />
       )}
-    </Box>
+    </Container>
   );
 };
 

package/__flow__/Avatar/index.stories.js

@@ -11,6 +11,35 @@ defaultStory.story = {
   name: "Default",
 };
 
+export const customColors = () => (
+  <Avatar name="Joe Smith" bg="purple.500" color="red.200" />
+);
+
+customColors.story = {
+  name: "Override colors",
+};
+
+export const withVariants = () => (
+  <div display="inline-block">
+    <Avatar mt={5} name="Kent C. Dodds" type="neutral" variant="dark" />
+    <Avatar mt={5} name="Kent C. Dodds" type="neutral" variant="light" />
+    <Avatar mt={5} name="Kent C. Dodds" type="green" variant="dark" />
+    <Avatar mt={5} name="Kent C. Dodds" type="green" variant="light" />
+    <Avatar mt={5} name="Kent C. Dodds" type="purple" variant="dark" />
+    <Avatar mt={5} name="Kent C. Dodds" type="purple" variant="light" />
+    <Avatar mt={5} name="Kent C. Dodds" type="red" variant="light" />
+    <Avatar mt={5} name="Kent C. Dodds" type="red" variant="dark" />
+    <Avatar mt={5} name="Kent C. Dodds" type="yellow" variant="light" />
+    <Avatar mt={5} name="Kent C. Dodds" type="yellow" variant="dark" />
+    <Avatar mt={5} name="Kent C. Dodds" type="blue" variant="light" />
+    <Avatar mt={5} name="Kent C. Dodds" type="blue" variant="dark" />
+  </div>
+);
+
+withVariants.story = {
+  name: "With color types",
+};
+
 export const withImage = () => (
   <Avatar name="Kent C. Dodds" src="https://github.com/kentcdodds.png" />
 );

package/__flow__/Collapsible/index.js

@@ -11,8 +11,6 @@ type TypeCollapsibleContext = $Shape<{
   isOpen: boolean,
   id: string,
   offset: number,
-  openHeight: number,
-  collapsedHeight: number,
 }>;
 
 const CollapsibleContext = React.createContext<TypeCollapsibleContext>({});
@@ -22,42 +20,18 @@ type TypeProps = {
   children: React.Node,
   /** If the children of the collapsible panel have a top or bottom margin, it will throw off the calculations for the height of the content. The total amount of vertical margin (in pixels) can be supplied to this prop to correct this. */
   offset?: number,
-  collapsedHeight?: number,
-  openHeight?: number,
 };
 
-const Collapsible = ({
-  children,
-  isOpen = false,
-  offset = 0,
-  collapsedHeight = 0,
-  openHeight,
-}: TypeProps) => {
+const Collapsible = ({ children, isOpen = false, offset = 0 }: TypeProps) => {
   const [id] = useState(`Racine-collapsible-${idCounter++}`);
 
   return (
-    <CollapsibleContext.Provider
-      value={{ isOpen, id, offset, collapsedHeight, openHeight }}
-    >
+    <CollapsibleContext.Provider value={{ isOpen, id, offset }}>
       {children}
     </CollapsibleContext.Provider>
   );
 };
 
-const determineMaxHeight = (isHidden, openHeight, computedHeight) => {
-  // If isHidden is undefined this is the first render.  Return undefined so the max-height prop is not added
-  // This is a hack to prevent css from animating if it begins in the open state
-  // css animates when attribute values change (IE from 0 to another number)
-  // css does not animate when simply adding an attribute to an HTML element
-  if (isHidden === undefined) return undefined;
-
-  // If the user has defined an explicit open height, return that as the max height
-  if (!!openHeight) return openHeight;
-
-  // Otherwise, fallback to the computed height
-  return computedHeight;
-};
-
 const Trigger = ({ children, ...rest }) => {
   const { isOpen, id } = useContext(CollapsibleContext);
 
@@ -73,18 +47,17 @@ const Trigger = ({ children, ...rest }) => {
 };
 
 const Panel = ({ children, ...rest }) => {
-  const { isOpen, id, offset, collapsedHeight, openHeight } = useContext(
-    CollapsibleContext
-  );
+  const { isOpen, id, offset } = useContext(CollapsibleContext);
   const ref = useRef();
   const measurement = useMeasure(ref);
   const [isHidden, setIsHidden] = useState(undefined);
 
-  const maxHeight = determineMaxHeight(
-    isHidden,
-    openHeight,
-    measurement.height + offset
-  );
+  // If this is the initial render isHidden will be undefined
+  // When that is the case, set maxHeight to undefined rather than the comptued 0
+  // This prevents an initial expansion animation if a component starts out open
+  // There is no animation because css is not changing the maxHeight property after mount
+  const maxHeight =
+    isHidden === undefined ? undefined : measurement.height + offset;
 
   /* We use the "hidden" attribute to remove the contents of the panel from the tab order of the page, but it fucks with the animation. This logic sets a slight timeout on setting the prop so that the animation has time to complete before the attribute is set. */
   useEffect(() => {
@@ -103,16 +76,14 @@ const Panel = ({ children, ...rest }) => {
 
   return (
     <CollapsingBox
-      scrollable={isOpen}
-      maxHeight={isOpen ? maxHeight : collapsedHeight}
-      minHeight={collapsedHeight}
+      maxHeight={isOpen ? maxHeight : "0"}
       data-qa-collapsible={""}
       data-qa-collapsible-isopen={isOpen === true}
       {...rest}
     >
       <Box
         width="100%"
-        hidden={isHidden && collapsedHeight === 0}
+        hidden={isHidden}
         aria-hidden={!isOpen}
         id={id}
         ref={ref}

package/__flow__/Collapsible/index.stories.js

@@ -89,80 +89,3 @@ export const withTallContent = () => (
 withTallContent.story = {
   name: "With tall content",
 };
-
-const StatefulCollapseWithMinHeight = ({
-  children,
-  offset = 0,
-  collapsedHeight = 0,
-  openHeight,
-}) => {
-  const [open, setOpen] = useState(false);
-  const toggle = () => setOpen(!open);
-
-  return (
-    <Collapsible
-      id="test-id-1"
-      isOpen={open}
-      offset={offset}
-      openHeight={openHeight}
-      collapsedHeight={collapsedHeight}
-    >
-      <Collapsible.Panel>{children}</Collapsible.Panel>
-      <Collapsible.Trigger>
-        <Button onClick={toggle}>{open ? "Show Less" : "Show More"}</Button>
-      </Collapsible.Trigger>
-    </Collapsible>
-  );
-};
-
-export const withCollapsedHeight = () => {
-  return (
-    <StatefulCollapseWithMinHeight collapsedHeight={100} openHeight={300}>
-      <Box width="500px" p={400}>
-        Threepio! Come in, Threepio! Threepio! Get to the top! I can’t Where
-        could he be? Threepio! Threepio, will you come in? They aren’t here!
-        Something must have happened to them. See if they’ve been captured.
-        Hurry! One thing’s for sure. We’re all going to be a lot thinner! Get on
-        top of it! I’m trying! Thank goodness, they haven’t found them! Where
-        could they be? Use the comlink? Oh, my! I forgot I turned it off! Are
-        you there, sir? Threepio! We’ve had some problems… Will you shut up and
-        listen to me? Shut down all garbage mashers on the detention level, will
-        you? Do you copy? Shut down all the garbage mashers on the detention
-        level. Shut down all the garbage mashers on the detention level. No.
-        Shut them all down! Hurry! Listen to them! They’re dying, Artoo! Curse
-        my metal body! I wasn’t fast enough. It’s all my fault! My poor master!
-        Threepio, we’re all right! We’re all right. You did great. Threepio!
-        Come in, Threepio! Threepio! Get to the top! I can’t Where could he be?
-        Threepio! Threepio, will you come in? They aren’t here! Something must
-        have happened to them. See if they’ve been captured. Hurry! One thing’s
-        for sure. We’re all going to be a lot thinner! Get on top of it! I’m
-        trying! Thank goodness, they haven’t found them! Where could they be?
-        Use the comlink? Oh, my! I forgot I turned it off! Are you there, sir?
-        Threepio! We’ve had some problems… Will you shut up and listen to me?
-        Shut down all garbage mashers on the detention level, will you? Do you
-        copy? Shut down all the garbage mashers on the detention level. Shut
-        down all the garbage mashers on the detention level. No. Shut them all
-        down! Hurry! Listen to them! They’re dying, Artoo! Curse my metal body!
-        I wasn’t fast enough. It’s all my fault! My poor master! Threepio, we’re
-        all right! We’re all right. You did great. Threepio! Come in, Threepio!
-        Threepio! Get to the top! I can’t Where could he be? Threepio! Threepio,
-        will you come in? They aren’t here! Something must have happened to
-        them. See if they’ve been captured. Hurry! One thing’s for sure. We’re
-        all going to be a lot thinner! Get on top of it! I’m trying! Thank
-        goodness, they haven’t found them! Where could they be? Use the comlink?
-        Oh, my! I forgot I turned it off! Are you there, sir? Threepio! We’ve
-        had some problems… Will you shut up and listen to me? Shut down all
-        garbage mashers on the detention level, will you? Do you copy? Shut down
-        all the garbage mashers on the detention level. Shut down all the
-        garbage mashers on the detention level. No. Shut them all down! Hurry!
-        Listen to them! They’re dying, Artoo! Curse my metal body! I wasn’t fast
-        enough. It’s all my fault! My poor master! Threepio, we’re all right!
-        We’re all right. You did great.
-      </Box>
-    </StatefulCollapseWithMinHeight>
-  );
-};
-
-withCollapsedHeight.story = {
-  name: "With collapsedHeight",
-};

package/__flow__/Collapsible/styles.js

@@ -4,35 +4,9 @@ import Box from "../Box";
 
 import type { TypeTheme } from "../types/theme.flow";
 
-export const CollapsingBox = styled<typeof Box, TypeTheme, *>(Box)`
+export const CollapsingBox = styled<typeof Box, TypeTheme>(Box)`
   transition: max-height ${(p) => p.theme.duration.medium}
     ${(p) => p.theme.easing.ease_inout};
   will-change: max-height;
-  position: relative;
-  overflow: auto;
-  background:  /* Shadow covers */ linear-gradient(
-      ${(p) => p.theme.colors.neutral[100]} 30%,
-      rgba(255, 255, 255, 0)
-    ),
-    linear-gradient(
-        rgba(255, 255, 255, 0),
-        ${(p) => p.theme.colors.neutral[100]} 70%
-      )
-      0 100%,
-    /* Shadows */
-      radial-gradient(
-        farthest-side at 50% 0,
-        rgb(39 51 51 / 5%),
-        rgba(0, 0, 0, 0)
-      ),
-    radial-gradient(
-        farthest-side at 50% 100%,
-        rgb(39 51 51 / 5%),
-        rgba(0, 0, 0, 0)
-      )
-      0 100%;
-  background-repeat: no-repeat;
-  background-size: 100% 40px, 100% 40px, 100% 14px, 100% 14px;
-  background-attachment: local, local, scroll, scroll;
-  ${({ scrollable }) => (scrollable ? `overflow: auto` : `overflow: hidden`)};
+  overflow: hidden;
 `;

package/__flow__/EnumIconNames.js

@@ -1,2 +1,2 @@
 // @flow
-    export type EnumIconNames = "active-listener" | "add-item" | "add-keyword" | "add-team-member" | "add-variable" | "address-card-solid" | "adobe-experience-manager" | "ads" | "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" | "bitly" | "bold" | "book" | "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-alt-outline" | "comment-alt" | "comment-lines-alt-outline" | "comment" | "compact-density" | "compact-indicator" | "comparison" | "competitor" | "compose" | "content-suggestions" | "credit-card" | "crop" | "crown" | "dashboard" | "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" | "folder-open" | "folder" | "follow-outline" | "follow" | "follower-increase" | "following" | "font" | "full-access" | "gear" | "gears" | "glassdoor" | "glasses" | "globe" | "google-analytics-color" | "google-business-messages" | "google-drive" | "google-my-business" | "grip" | "h1" | "h2" | "hamburger" | "hashtag" | "headset" | "heart-outline" | "heart" | "heartbeat" | "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" | "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" | "plus" | "positive-sentiment" | "power-up" | "profile-connect" | "profile-disconnect" | "publishing-outline" | "publishing" | "puzzle-piece" | "qr-code" | "queue" | "recommendation" | "reddit-alien" | "reddit" | "referrals" | "refresh" | "rejected" | "reply-outline" | "reply" | "reporting-period" | "reporting" | "reports-home" | "reports" | "retweet" | "rss" | "sales" | "salesforce" | "save-assets" | "saved-messages" | "saved-reply-outline" | "saved-reply" | "search" | "sent-message-outline" | "sent-message" | "share" | "shopify" | "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-outline" | "tasks" | "team-conversation-outline" | "team-conversation" | "team" | "text-asset" | "text" | "times" | "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" | "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" | "x" | "yelp-full-star" | "yelp-half-star" | "yelp" | "youtube" | "zendesk";
+    export type EnumIconNames = "active-listener" | "add-item" | "add-keyword" | "add-team-member" | "add-variable" | "address-card-solid" | "adobe-experience-manager" | "ads" | "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" | "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-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" | "glassdoor" | "glasses" | "globe" | "google-analytics-color" | "google-business-messages" | "google-drive" | "google-my-business" | "grip" | "h1" | "h2" | "hamburger" | "hashtag" | "headset" | "heart-outline" | "heart" | "heartbeat" | "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" | "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" | "plus" | "positive-sentiment" | "power-up" | "profile-connect" | "profile-disconnect" | "publishing-outline" | "publishing" | "puzzle-piece" | "qr-code" | "queue" | "recommendation" | "reddit-alien" | "reddit" | "referrals" | "refresh" | "rejected" | "reply-outline" | "reply" | "reporting-period" | "reporting" | "reports-home" | "reports" | "retweet" | "rss" | "sales" | "salesforce" | "save-assets" | "saved-messages" | "saved-reply-outline" | "saved-reply" | "search" | "sent-message-outline" | "sent-message" | "share" | "shopify" | "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-outline" | "tasks" | "team-conversation-outline" | "team-conversation" | "team" | "text-asset" | "text" | "tiktok" | "times" | "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" | "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__/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-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","bitly":"0 0 16 16","bold":"0 0 16 16","book":"0 0 14 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","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","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","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":"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","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","plus":"0 0 16 18","positive-sentiment":"0 0 16 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","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":"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","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","times":"0 0 16 22","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","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","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-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","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","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":"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","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","plus":"0 0 16 18","positive-sentiment":"0 0 16 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","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":"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","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","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","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__/Link/styles.js

@@ -2,7 +2,7 @@
 import styled, { css } from "styled-components";
 import { focusRing, disabled } from "../utils/mixins";
 import Text from "../Text";
-import { TYPOGRAPHY, COMMON } from "../utils/system-props";
+import { TYPOGRAPHY, COMMON, FLEXBOX } from "../utils/system-props";
 
 import type { TypeTheme } from "../types/theme.flow";
 
@@ -48,6 +48,7 @@ const Container = styled<typeof Text, TypeTheme, any>(Text)`
 
    ${COMMON}
    ${TYPOGRAPHY}
+   ${FLEXBOX}
 `;
 
 export default Container;

package/__flow__/Menu/index.flow.js

@@ -2,7 +2,7 @@
 import * as React from "react";
 import Box from "../Box";
 import Button from "../Button";
-import Popout from "../Popout";
+import Popout, { type EnumPlacements } from "../Popout";
 import { MENU_ITEM_ROLES, MENU_ROLES } from "./constants";
 
 export type TypeMenuRoles = $Values<typeof MENU_ROLES>;
@@ -88,6 +88,7 @@ export type TypeMenuButtonProps = {
   "aria-label"?: string,
   content: React.Node,
   popoutProps?: $Shape<React.ElementConfig<typeof Popout>>,
+  placement?: EnumPlacements,
 };
 
 export type TypeListboxButtonProps = {

package/__flow__/Menu/index.js

@@ -427,6 +427,7 @@ export const MenuButton = ({
   onClick,
   closeOnItemClick = true,
   id = uniqueId("MenuButton-"),
+  placement = "bottom",
   ...props
 }: TypeMenuButtonProps) => {
   const [isOpen, setIsOpen] = useState(false);
@@ -446,7 +447,7 @@ export const MenuButton = ({
         isOpen={isOpen}
         setIsOpen={setIsOpen}
         content={<CustomPopoutContent>{content}</CustomPopoutContent>}
-        placement="bottom"
+        placement={placement}
         {...popoutProps}
         // $FlowIssue
         width={props.width}

package/__flow__/OverflowList/index.js

@@ -1,10 +1,7 @@
 // @flow
 import List from "./styles";
 import React, { useCallback, useMemo } from "react";
-import { CellMeasurer, CellMeasurerCache } from "react-virtualized";
-
-// imported separately so it can be mocked separately (otherwise height and width will always be 0 in jsdom)
-import AutoSizer from "react-virtualized/dist/es/AutoSizer";
+import { AutoSizer, CellMeasurer, CellMeasurerCache } from "react-virtualized";
 
 import Box from "../Box";
 

package/__flow__/OverflowList/index.test.js

@@ -3,11 +3,43 @@ import { render } from "../utils/react-testing-library";
 import "jest-styled-components";
 import List from "./";
 
-jest.mock("react-virtualized/dist/es/AutoSizer", () => ({ children }) =>
-  children({ height: 600, width: 600 })
-);
-
 describe("List", () => {
+  // Logic to make Autosizer work in RTL
+  const originalOffsetHeight = Object.getOwnPropertyDescriptor(
+    HTMLElement.prototype,
+    "offsetHeight"
+  );
+  const originalOffsetWidth = Object.getOwnPropertyDescriptor(
+    HTMLElement.prototype,
+    "offsetWidth"
+  );
+
+  beforeAll(() => {
+    Object.defineProperty(HTMLElement.prototype, "offsetHeight", {
+      configurable: true,
+      value: 200,
+    });
+    Object.defineProperty(HTMLElement.prototype, "offsetWidth", {
+      configurable: true,
+      value: 200,
+    });
+  });
+
+  afterAll(() => {
+    // $FlowIssue
+    Object.defineProperty(
+      HTMLElement.prototype,
+      "offsetHeight",
+      originalOffsetHeight
+    );
+    // $FlowIssue
+    Object.defineProperty(
+      HTMLElement.prototype,
+      "offsetWidth",
+      originalOffsetWidth
+    );
+  });
+
   it("should render properly", async () => {
     const { container, runA11yCheck } = render(<List />);
     expect(container).toBeTruthy();

package/__flow__/themes/default/theme.js

@@ -220,6 +220,7 @@ const colors = {
     microsoft_dynamics: NETWORKCOLORS.NETWORK_COLOR_MICROSOFT_DYNAMICS,
     yelp: NETWORKCOLORS.NETWORK_COLOR_YELP,
     whatsapp: NETWORKCOLORS.NETWORK_COLOR_WHATSAPP,
+    tiktok: NETWORKCOLORS.NETWORK_COLOR_TIKTOK,
   },
   ...literalColors,
 };