@sproutsocial/racine 12.15.0 → 12.16.0

package/CHANGELOG.md

@@ -1,5 +1,49 @@
 # Change Log
 
+## 12.16.0
+
+### Minor Changes
+
+- b2c4834: The `aria-label` and `aria-labelledby` props were added to the `TypeListboxButtonProps` flow type for the `ListboxButton` component
+- 8b80526: Updated Indicator color to support theming
+  - Indicator's color was previously hard-coded to teal.600
+  - We are now using a semantic theme value, "icon.info", so that the color of Indicator can reflect the current theme.
+  - Please note that "icon.info" currently resolves to a blue color in all bundled themes. Thus, unless you override the color, all Indicators currently in use will change from teal to blue.
+  - Support for overriding the Indicator color via the `color` system prop was added.
+- b2c4834: The `checked` and `indeterminate` props on the `Checkbox` component are now optional
+- 57cb24f: **Deprecation Notice:**
+
+  The `default` appearance for the `Button` component has been **deprecated** in favor of `unstyled`. To migrate, change all `Button` components which use the `default` appearance to use `unstyled` instead. Support for the `default` option will be removed in a future version.
+
+  The following components that use the `Button` component or its types must also be migrated to use `unstyled` instead of `default` for the `appearance`:
+
+  - `ListboxButton`
+  - `LoaderButton`
+  - `MenuButton`
+  - `Message.Button`
+  - `ModalCloseButton`
+
+- b2c4834: The following components now export their prop flow types:
+  - Loader
+  - Icon
+  - Numeral
+  - PartnerLogo
+  - Popout
+  - SpotIllustration
+  - Switch
+- b2c4834: The `ItemComponent` and `getItemProps` props on the `OverflowList` component are now optional
+- 8a70eff: We've made some enhancements to the Partner Logo component! The Partner Logo component API now closely aligns with the Icon component.
+
+  - Added support for different logo types ie. `wordmark` or `lockup`
+  - Added support for predefined sizes. ie. `mini`, `small`, `medium`, `large`, and `jumbo`.
+  - The partner Logo now has a fixed width by default.
+  
+- 5613a5c: A new Advocacy icon has been added to the icon library
+
+### Patch Changes
+
+- 56fa0b9: Updated Icon component to accept `size="small"` prop to closer align to the `PartnerLogo` component
+
 ## 12.15.0
 
 ### Minor Changes

package/__flow__/Avatar/index.stories.js

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

package/__flow__/Avatar/index.test.js

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

package/__flow__/Badge/index.stories.js

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

package/__flow__/Badge/index.test.js

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

package/__flow__/Banner/index.stories.js

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

package/__flow__/Banner/index.test.js

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

package/__flow__/Box/index.stories.js

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

package/__flow__/Box/index.test.js

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

package/__flow__/Breadcrumb/index.stories.js

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

package/__flow__/Breadcrumb/index.test.js

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

package/__flow__/Button/index.js

@@ -2,6 +2,12 @@
 import * as React from "react";
 import Container from "./styles";
 
+/**
+ * @deprecated
+ * Use "unstyled" appearance instead of "default"
+ */
+type EnumDeprecatedAppearance = "default";
+
 export type TypeProps = {
   /** If the button is being used as an anchor, this prop will cause the link to open in a new tab. */
   external?: boolean,
@@ -12,9 +18,9 @@ export type TypeProps = {
     | "secondary"
     | "pill"
     | "destructive"
-    | "default"
     | "unstyled"
-    | "placeholder",
+    | "placeholder"
+    | EnumDeprecatedAppearance,
   /** Set the button to display in its active state */
   active?: boolean,
   /** Disables user action and applies a disabled style on the button */
@@ -55,8 +61,13 @@ const Button = ({
     );
   }
 
-  // plans to properly deprecate captured in DS-1096
+  /** "default" is @deprecated in favor of "unstyled"  */
   const appearanceCheck = appearance === "default" ? "unstyled" : appearance;
+  if (appearance === "default") {
+    console.warn(
+      "Warning: The `default` appearance has been deprecated on the Button component. Please use `unstyled` instead."
+    );
+  }
 
   return (
     <Container

package/__flow__/Button/index.stories.js

@@ -1,5 +1,6 @@
+// @flow
 import React from "react";
-import Button from "./index";
+import Button, { type TypeProps } from "./index";
 import Icon from "../Icon";
 import Box from "../Box";
 
@@ -7,19 +8,19 @@ export default {
   title: "Button",
 };
 
-export const defaultStory = (args) => (
+export const defaultStory = (args: TypeProps) => (
   <Button {...args} onClick={() => alert("Testing...")}>
-    Default
+    Unstyled
   </Button>
 );
 
-defaultStory.args = { appearance: "default" };
+defaultStory.args = { appearance: "unstyled" };
 
 defaultStory.story = {
-  name: "Default",
+  name: "Unstyled",
 };
 
-export const primary = (args) => (
+export const primary = (args: TypeProps) => (
   <Button {...args} onClick={() => alert("Testing...")}>
     Primary Button
   </Button>
@@ -31,7 +32,9 @@ primary.story = {
   name: "Primary",
 };
 
-export const secondary = (args) => <Button {...args}>Secondary Button</Button>;
+export const secondary = (args: TypeProps) => (
+  <Button {...args}>Secondary Button</Button>
+);
 
 secondary.args = { appearance: "secondary" };
 
@@ -39,7 +42,7 @@ secondary.story = {
   name: "Secondary",
 };
 
-export const destructive = (args) => (
+export const destructive = (args: TypeProps) => (
   <Button {...args}>Destructive Button</Button>
 );
 
@@ -48,7 +51,7 @@ destructive.story = {
   name: "Destructive",
 };
 
-export const placeholder = (args) => (
+export const placeholder = (args: TypeProps) => (
   <Button {...args}>Placeholder Button</Button>
 );
 
@@ -57,14 +60,16 @@ placeholder.story = {
   name: "Placeholder",
 };
 
-export const largeButton = (args) => <Button {...args}>Large Button</Button>;
+export const largeButton = (args: TypeProps) => (
+  <Button {...args}>Large Button</Button>
+);
 largeButton.args = { size: "large", appearance: "primary" };
 
 largeButton.story = {
   name: "Large button",
 };
 
-export const pillButton = (args) => (
+export const pillButton = (args: TypeProps) => (
   <Box bg="container.background.base" p={400}>
     <Button {...args}>
       <Icon name="reply" mr={350} />
@@ -77,7 +82,7 @@ pillButton.story = {
   name: "Pill button",
 };
 
-export const pillIconOnlyButton = (args) => (
+export const pillIconOnlyButton = (args: TypeProps) => (
   <Box bg="container.background.base" p={400}>
     <Button {...args} ariaLabel="This is a label">
       <Icon name="circle-check-outline" />
@@ -90,14 +95,16 @@ pillIconOnlyButton.story = {
   name: "Pill icon only button",
 };
 
-export const activeButton = (args) => <Button {...args}>Active Button</Button>;
+export const activeButton = (args: TypeProps) => (
+  <Button {...args}>Active Button</Button>
+);
 
 activeButton.args = { appearance: "secondary", active: true };
 activeButton.story = {
   name: "Active button",
 };
 
-export const buttonAsALink = (args) => (
+export const buttonAsALink = (args: TypeProps) => (
   <Button {...args}>Button using anchor element</Button>
 );
 buttonAsALink.args = {
@@ -109,7 +116,7 @@ buttonAsALink.story = {
   name: "Button as a link",
 };
 
-export const disabledButton = (args) => (
+export const disabledButton = (args: TypeProps) => (
   <Button {...args}>This Button is disabled</Button>
 );
 disabledButton.args = {
@@ -120,7 +127,7 @@ disabledButton.story = {
   name: "Disabled button",
 };
 
-export const fullWidthButton = (args) => (
+export const fullWidthButton = (args: TypeProps) => (
   <Button {...args}>Full-Width Button</Button>
 );
 fullWidthButton.args = {
@@ -131,7 +138,7 @@ fullWidthButton.story = {
   name: "Full width button",
 };
 
-export const withIcon = (args) => (
+export const withIcon = (args: TypeProps) => (
   <Button {...args}>
     <Icon name="twitter" mr={350} />
     Secondary Button

package/__flow__/CharacterCounter/index.stories.js

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

package/__flow__/CharacterCounter/index.test.js

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

package/__flow__/ChartLegend/index.stories.js

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

package/__flow__/ChartLegend/index.test.js

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

package/__flow__/Checkbox/index.js

@@ -19,8 +19,8 @@ export type TypeProps = {
   /** Label used to describe the input (if not used with an accompanying visual label) */
   ariaLabel?: string,
   labelProps?: Object,
-  checked: boolean,
-  indeterminate: boolean,
+  checked?: boolean,
+  indeterminate?: boolean,
   disabled?: boolean,
   onChange: (event: SyntheticEvent<HTMLInputElement>) => void,
   appearance?: "pill" | "default",
@@ -39,14 +39,14 @@ export default class Checkbox extends React.Component<TypeProps> {
   };
 
   componentDidUpdate(prevProps: TypeProps) {
-    if (prevProps.indeterminate !== this.props.indeterminate && this.el) {
-      this.el.indeterminate = this.props.indeterminate;
+    if (prevProps.indeterminate !== !!this.props.indeterminate && this.el) {
+      this.el.indeterminate = !!this.props.indeterminate;
     }
   }
 
   componentDidMount() {
     if (this.el) {
-      this.el.indeterminate = this.props.indeterminate;
+      this.el.indeterminate = !!this.props.indeterminate;
     }
   }
 

package/__flow__/Checkbox/index.stories.js

@@ -1,22 +1,23 @@
+// @flow
 import React from "react";
 import { action } from "@storybook/addon-actions";
 
-import Checkbox from "./";
+import Checkbox, { type TypeProps } from "./";
 
 export default {
   title: "Checkbox",
   component: Checkbox,
 };
 
-export const Checked = (args) => <Checkbox {...args} />;
+export const Checked = (args: TypeProps) => <Checkbox {...args} />;
 
 Checked.args = { checked: true };
 
-export const Unchecked = (args) => <Checkbox {...args} />;
+export const Unchecked = (args: TypeProps) => <Checkbox {...args} />;
 
 Unchecked.args = { checked: false };
 
-export const PillChecked = (args) => <Checkbox {...args} />;
+export const PillChecked = (args: TypeProps) => <Checkbox {...args} />;
 
 PillChecked.args = {
   checked: true,
@@ -27,7 +28,7 @@ PillChecked.story = {
   name: "Pill/Checked",
 };
 
-export const PillUnchecked = (args) => <Checkbox {...args} />;
+export const PillUnchecked = (args: TypeProps) => <Checkbox {...args} />;
 
 PillUnchecked.args = {
   checked: false,
@@ -38,7 +39,7 @@ PillUnchecked.story = {
   name: "Pill/Unchecked",
 };
 
-export const DisabledChecked = (args) => <Checkbox {...args} />;
+export const DisabledChecked = (args: TypeProps) => <Checkbox {...args} />;
 
 DisabledChecked.args = {
   checked: true,
@@ -49,7 +50,7 @@ DisabledChecked.story = {
   name: "Disabled/Checked",
 };
 
-export const DisabledUnchecked = (args) => <Checkbox {...args} />;
+export const DisabledUnchecked = (args: TypeProps) => <Checkbox {...args} />;
 
 DisabledUnchecked.args = {
   checked: false,
@@ -60,7 +61,7 @@ DisabledUnchecked.story = {
   name: "Disabled/Unchecked",
 };
 
-export const IndeterminateChecked = (args) => <Checkbox {...args} />;
+export const IndeterminateChecked = (args: TypeProps) => <Checkbox {...args} />;
 
 IndeterminateChecked.args = {
   checked: true,
@@ -71,7 +72,9 @@ IndeterminateChecked.story = {
   name: "Indeterminate/Checked",
 };
 
-export const IndeterminateUnchecked = (args) => <Checkbox {...args} />;
+export const IndeterminateUnchecked = (args: TypeProps) => (
+  <Checkbox {...args} />
+);
 
 IndeterminateUnchecked.args = {
   checked: false,
@@ -82,7 +85,7 @@ IndeterminateUnchecked.story = {
   name: "Indeterminate/Unchecked",
 };
 
-export const LabelledChecked = (args) => <Checkbox {...args} />;
+export const LabelledChecked = (args: TypeProps) => <Checkbox {...args} />;
 
 LabelledChecked.args = {
   checked: true,
@@ -93,7 +96,7 @@ LabelledChecked.story = {
   name: "Labelled/Checked",
 };
 
-export const LabelledUnchecked = (args) => <Checkbox {...args} />;
+export const LabelledUnchecked = (args: TypeProps) => <Checkbox {...args} />;
 
 LabelledUnchecked.args = {
   checked: false,
@@ -104,7 +107,7 @@ LabelledUnchecked.story = {
   name: "Labelled/Unchecked",
 };
 
-export const LabelledDisabled = (args) => <Checkbox {...args} />;
+export const LabelledDisabled = (args: TypeProps) => <Checkbox {...args} />;
 
 LabelledDisabled.args = {
   checked: true,
@@ -116,7 +119,9 @@ LabelledDisabled.story = {
   name: "Labelled/Disabled",
 };
 
-export const InputPropsOnMouseOver = (args) => <Checkbox {...args} />;
+export const InputPropsOnMouseOver = (args: TypeProps) => (
+  <Checkbox {...args} />
+);
 
 InputPropsOnMouseOver.args = {
   checked: true,

package/__flow__/Checkbox/index.test.js

@@ -1,3 +1,4 @@
+// @flow
 import React from "react";
 import { render, fireEvent } from "../utils/react-testing-library";
 import Checkbox from "./";
@@ -50,7 +51,12 @@ describe("Checkbox", () => {
 
   it("should display label when label not undefined and appearance is default", () => {
     const { getByLabelText } = render(
-      <Checkbox checked label="Checkbox Label" id="checkboxid" />
+      <Checkbox
+        checked
+        onChange={mockHandleClick}
+        label="Checkbox Label"
+        id="checkboxid"
+      />
     );
     expect(getByLabelText("Checkbox Label")).toBeInTheDocument();
   });
@@ -59,6 +65,7 @@ describe("Checkbox", () => {
     const { queryByLabelText } = render(
       <Checkbox
         checked
+        onChange={mockHandleClick}
         label="Checkbox Label"
         id="checkboxid"
         appearance="pill"
@@ -72,6 +79,7 @@ describe("Checkbox", () => {
     const options = render(
       <Checkbox
         checked
+        onChange={mockHandleClick}
         inputProps={{ onMouseOver: mockHandleMouseOver }}
         id="checkboxid"
         label="checkbox"

package/__flow__/Collapsible/index.stories.js

@@ -1,9 +1,18 @@
-import React, { useState } from "react";
+// @flow
+import React, { type Node as ReactNode, useState } from "react";
 import Collapsible from "./index";
 import Button from "../Button";
 import Box from "../Box";
 
-const StatefulCollapse = ({ children, offset = 0, initialIsOpen = false }) => {
+const StatefulCollapse = ({
+  children,
+  offset = 0,
+  initialIsOpen = false,
+}: {
+  children: ReactNode,
+  offset?: number,
+  initialIsOpen?: boolean,
+}) => {
   const [open, setOpen] = useState(initialIsOpen);
   const toggle = () => setOpen(!open);
 
@@ -95,6 +104,11 @@ const StatefulCollapseWithMinHeight = ({
   offset = 0,
   collapsedHeight = 0,
   openHeight,
+}: {
+  children: ReactNode,
+  offset?: number,
+  collapsedHeight?: number,
+  openHeight: number,
 }) => {
   const [open, setOpen] = useState(false);
   const toggle = () => setOpen(!open);

package/__flow__/Collapsible/index.test.js

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

package/__flow__/Drawer/index.stories.js

@@ -1,7 +1,8 @@
+// @flow
 import React, { useState } from "react";
 import { createGlobalStyle } from "styled-components";
 import { text, number, boolean } from "@storybook/addon-knobs";
-import Drawer from "./index";
+import Drawer, { type TypeDrawerProps } from "./index";
 import Button from "../Button";
 import Icon from "../Icon";
 import Box from "../Box";
@@ -14,7 +15,12 @@ const GlobalStyle = createGlobalStyle`
   }
 `;
 
-const StatefulDrawer = ({ isOpen = true, onClose, children, ...rest }) => {
+const StatefulDrawer = ({
+  isOpen = true,
+  onClose,
+  children,
+  ...rest
+}: TypeDrawerProps) => {
   const [isDrawerOpen, setIsDrawerOpen] = useState(isOpen);
   const onDrawerClose = () => {
     setIsDrawerOpen(false);
@@ -23,7 +29,7 @@ const StatefulDrawer = ({ isOpen = true, onClose, children, ...rest }) => {
 
   return (
     <React.Fragment>
-      <Drawer isOpen={isDrawerOpen} onClose={onDrawerClose} {...rest}>
+      <Drawer {...rest} isOpen={isDrawerOpen} onClose={onDrawerClose}>
         {children}
       </Drawer>
       <Button
@@ -36,7 +42,7 @@ const StatefulDrawer = ({ isOpen = true, onClose, children, ...rest }) => {
   );
 };
 
-const DrawerComponent = ({ direction, offset }) => {
+const DrawerComponent = ({ direction, offset }: $Shape<TypeDrawerProps>) => {
   const [isOpen, setIsOpen] = useState(false);
   const onOpen = () => setIsOpen(true);
   const onClose = () => setIsOpen(false);
@@ -71,7 +77,10 @@ const DrawerComponent = ({ direction, offset }) => {
   );
 };
 
-const NectarDrawerComponent = ({ direction, offset }) => {
+const NectarDrawerComponent = ({
+  direction,
+  offset,
+}: $Shape<TypeDrawerProps>) => {
   const [isNotificationsOpen, setIsNotificationsOpen] = useState(false);
   const [isPoplarOpen, setIsPoplarOpen] = useState(false);
   const openNotifications = () => {

package/__flow__/Drawer/index.test.js

@@ -1,5 +1,6 @@
+// @flow
 import React, { useState } from "react";
-import Drawer from "./";
+import Drawer, { type TypeDrawerProps } from "./";
 import {
   render as testRender,
   fireEvent,
@@ -14,7 +15,7 @@ const StatefulDrawer = ({ isOpen, onClose, children, ...rest }) => {
   };
 
   return (
-    <Drawer isOpen={isDrawerOpen} onClose={onDrawerClose} {...rest}>
+    <Drawer {...rest} isOpen={isDrawerOpen} onClose={onDrawerClose}>
       {children}
     </Drawer>
   );
@@ -36,7 +37,7 @@ const render = ({
   onClose = () => {},
   id = "drawer",
   closeButtonLabel = "close",
-} = {}) => {
+}: $Shape<TypeDrawerProps> = {}) => {
   const { baseElement } = testRender(<div id="main-content" />);
   const mainContentRef = baseElement.querySelector("#main-content");
 

package/__flow__/EmptyState/index.stories.js

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

package/__flow__/EmptyState/index.test.js

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

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-outline" | "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" | "bookmark" | "bot" | "browser" | "business" | "calendar-outline" | "calendar" | "camera-outline" | "camera-story" | "camera" | "campaign" | "canva" | "carousel" | "cart-plus-outline" | "cart-plus" | "check" | "chevron-down-filled" | "chevron-down" | "chevron-left" | "chevron-right" | "chevron-up-down-filled" | "chevron-up-filled" | "chevron-up" | "circle-check-outline" | "circle-check" | "circle" | "circle+" | "circles" | "circlex" | "click-to-view" | "clicks" | "clipboard-outline" | "clipboard" | "clock" | "closed-captioning" | "cloud" | "code" | "columns" | "comment-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" | "h3" | "h4" | "hamburger" | "hashtag" | "headset" | "heart-outline" | "heart" | "heartbeat" | "help-alt" | "help" | "hiking" | "history" | "home" | "hourglass" | "hubspot" | "image-caption" | "image" | "images" | "impressions-per-post" | "impressions" | "inactive-listener" | "inbox-action" | "inbox-views" | "inbox" | "indicator" | "industry" | "info" | "instagram" | "internal-activity-outline" | "internal-activity" | "italic" | "key" | "keyboard" | "laptop-phone" | "large-density" | "lift" | "like-outline" | "like" | "link" | "linkedin-audience-network" | "linkedin" | "list-ol" | "listening" | "lists" | "location-outline" | "location" | "lock" | "magic-wand" | "male" | "marketo" | "mention" | "message-preview-outline" | "message-preview" | "message" | "messages-outline" | "messages" | "messenger" | "metric-table" | "microsoft-dynamics" | "minus" | "mobile" | "monitor" | "moon" | "negative-sentiment" | "neutral-positive-sentiment" | "neutral-sentiment" | "new-trend" | "newspaper" | "no-access" | "notepad" | "notifications-publishing-outline" | "notifications-publishing" | "notifications" | "offline" | "online" | "paid-promotion-outline" | "paid-promotion" | "paid" | "paint" | "palette" | "paperclip" | "pause" | "pencil-outline" | "pencil" | "person" | "phone" | "pinterest-boards-outline" | "pinterest-boards" | "pinterest" | "play-circle" | "play" | "plug" | "plus" | "positive-sentiment" | "power-up-outline" | "power-up" | "profile-connect" | "profile-disconnect" | "publishing-outline" | "publishing" | "puzzle-piece" | "qr-code" | "queue" | "recommendation" | "reddit-alien" | "reddit" | "reels-outline" | "reels" | "referrals" | "refresh" | "rejected" | "reply-outline" | "reply" | "reporting-period" | "reporting" | "reports-home" | "reports" | "retweet" | "rss" | "sales" | "salesforce-cloud" | "salesforce" | "save-assets" | "saved-messages" | "saved-reply-outline" | "saved-reply" | "search" | "sent-message-outline" | "sent-message" | "share" | "shopify" | "shopping-bag-outline" | "shopping-bag" | "show-navigation" | "slack" | "small-density" | "smiley" | "some-access" | "sparkles" | "spike-alert" | "star-half-alt-solid" | "star-of-life" | "star-outline" | "star" | "sticky-note-outline" | "sticky-note" | "stories" | "story" | "suggestions" | "sun" | "tag-outline" | "tag" | "targeting-outline" | "targeting" | "tasks-outline" | "tasks" | "team-conversation-outline" | "team-conversation" | "team" | "text-asset" | "text" | "tiktok" | "times" | "tools" | "trash-can-outline" | "trash-can" | "trend-down" | "trend-neutral" | "trend-up" | "trends" | "triangle-black" | "triangle" | "tripadvisor-circle-outline" | "tripadvisor-circle" | "tripadvisor" | "trophy-outline" | "tumblr" | "twitter-audience-network" | "twitter" | "underline" | "unfollow-outline" | "unfollow" | "unlink" | "unlock" | "upload" | "user-circle" | "users" | "verified" | "video-camera-story" | "video-camera" | "vip" | "weight" | "whatsapp" | "window-maximize" | "window-minimize" | "window-regular" | "window-restore" | "woocommerce" | "x" | "yelp-full-star" | "yelp-half-star" | "yelp" | "youtube" | "zendesk";
+    export type EnumIconNames = "active-listener" | "add-item" | "add-keyword" | "add-team-member" | "add-variable" | "address-card-outline" | "address-card-solid" | "adobe-experience-manager" | "ads" | "advocacy-outline" | "advocacy" | "android" | "apple" | "approval-indicator-outline" | "approval-indicator" | "archive" | "arrow-down-line" | "arrow-down" | "arrow-left-line" | "arrow-left" | "arrow-right-line" | "arrow-right" | "arrow-up-line" | "arrow-up" | "arrows" | "asset-library-outline" | "asset-library" | "assign" | "atom" | "audio" | "back-to-top" | "bambu-icon-outline" | "bambu-icon" | "barcode" | "basketball" | "bell-outline" | "bigcommerce" | "bitly" | "bold" | "book" | "bookmark" | "bot" | "browser" | "business" | "calendar-outline" | "calendar" | "camera-outline" | "camera-story" | "camera" | "campaign" | "canva" | "carousel" | "cart-plus-outline" | "cart-plus" | "check" | "chevron-down-filled" | "chevron-down" | "chevron-left" | "chevron-right" | "chevron-up-down-filled" | "chevron-up-filled" | "chevron-up" | "circle-check-outline" | "circle-check" | "circle" | "circle+" | "circles" | "circlex" | "click-to-view" | "clicks" | "clipboard-outline" | "clipboard" | "clock" | "closed-captioning" | "cloud" | "code" | "columns" | "comment-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" | "h3" | "h4" | "hamburger" | "hashtag" | "headset" | "heart-outline" | "heart" | "heartbeat" | "help-alt" | "help" | "hiking" | "history" | "home" | "hourglass" | "hubspot" | "image-caption" | "image" | "images" | "impressions-per-post" | "impressions" | "inactive-listener" | "inbox-action" | "inbox-views" | "inbox" | "indicator" | "industry" | "info" | "instagram" | "internal-activity-outline" | "internal-activity" | "italic" | "key" | "keyboard" | "laptop-phone" | "large-density" | "lift" | "like-outline" | "like" | "link" | "linkedin-audience-network" | "linkedin" | "list-ol" | "listening" | "lists" | "location-outline" | "location" | "lock" | "magic-wand" | "male" | "marketo" | "mention" | "message-preview-outline" | "message-preview" | "message" | "messages-outline" | "messages" | "messenger" | "metric-table" | "microsoft-dynamics" | "minus" | "mobile" | "monitor" | "moon" | "negative-sentiment" | "neutral-positive-sentiment" | "neutral-sentiment" | "new-trend" | "newspaper" | "no-access" | "notepad" | "notifications-publishing-outline" | "notifications-publishing" | "notifications" | "offline" | "online" | "paid-promotion-outline" | "paid-promotion" | "paid" | "paint" | "palette" | "paperclip" | "pause" | "pencil-outline" | "pencil" | "person" | "phone" | "pinterest-boards-outline" | "pinterest-boards" | "pinterest" | "play-circle" | "play" | "plug" | "plus" | "positive-sentiment" | "power-up-outline" | "power-up" | "profile-connect" | "profile-disconnect" | "publishing-outline" | "publishing" | "puzzle-piece" | "qr-code" | "queue" | "recommendation" | "reddit-alien" | "reddit" | "reels-outline" | "reels" | "referrals" | "refresh" | "rejected" | "reply-outline" | "reply" | "reporting-period" | "reporting" | "reports-home" | "reports" | "retweet" | "rss" | "sales" | "salesforce-cloud" | "salesforce" | "save-assets" | "saved-messages" | "saved-reply-outline" | "saved-reply" | "search" | "sent-message-outline" | "sent-message" | "share" | "shopify" | "shopping-bag-outline" | "shopping-bag" | "show-navigation" | "slack" | "small-density" | "smiley" | "some-access" | "sparkles" | "spike-alert" | "star-half-alt-solid" | "star-of-life" | "star-outline" | "star" | "sticky-note-outline" | "sticky-note" | "stories" | "story" | "suggestions" | "sun" | "tag-outline" | "tag" | "targeting-outline" | "targeting" | "tasks-outline" | "tasks" | "team-conversation-outline" | "team-conversation" | "team" | "text-asset" | "text" | "tiktok" | "times" | "tools" | "trash-can-outline" | "trash-can" | "trend-down" | "trend-neutral" | "trend-up" | "trends" | "triangle-black" | "triangle" | "tripadvisor-circle-outline" | "tripadvisor-circle" | "tripadvisor" | "trophy-outline" | "tumblr" | "twitter-audience-network" | "twitter" | "underline" | "unfollow-outline" | "unfollow" | "unlink" | "unlock" | "upload" | "user-circle" | "users" | "verified" | "video-camera-story" | "video-camera" | "vip" | "weight" | "whatsapp" | "window-maximize" | "window-minimize" | "window-regular" | "window-restore" | "woocommerce" | "x" | "yelp-full-star" | "yelp-half-star" | "yelp" | "youtube" | "zendesk";