@sproutsocial/racine 20.16.0 → 21.0.0

package/CHANGELOG.md

@@ -1,5 +1,27 @@
 # Change Log
 
+## 21.0.0
+
+### Major Changes
+
+- 61ebd8a: **Breaking Change**:
+
+  Uses `@sproutsocial/seeds-partner-logos` for Partner Logo assets
+
+  Uses `@sproutsocial/seeds-illustrations` for Spot Illustration assets
+
+  - Partner logo assets are now stored in a new package called `@sproutsocial/seeds-partner-logos`.
+  - Spot illustration assets are now stored in a new package called `@sproutsocial/seeds-illustrations`.
+  - `@sproutsocial/seeds-partner-logos` and `@sproutsocial/seeds-illustrations` are now peer dependencies of Racine.
+  - Sprites: Instead of using logo.svg or illustration.svg from Racine’s dist/directory, the sprites should be imported from the respective packages. Attach these spritesheets to the DOM in the same way as the `@sproutsocial/seeds-icons` sprites.
+  - Dependencies: Add `@sproutsocial/seeds-partner-logos` and `@sproutsocial/seeds-illustrations` to your application’s dependencies.
+
+## 20.17.0
+
+### Minor Changes
+
+- 57799e9: Add profile groups spot illustration
+
 ## 20.16.0
 
 ### Minor Changes

package/__flow__/Avatar/Avatar.flow.js

@@ -1,15 +1,15 @@
 // @flow
-import * as React from 'react';
+import * as React from "react";
 export type TypeAvatarProps = {
   /** Circles are used for social profile avatars, leaf is for internal Sprout user avatars */
-  appearance?: 'circle' | 'leaf',
+  appearance?: "circle" | "leaf",
   /** The name of the user that the avatar represents */
   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',
+  type?: "neutral" | "purple" | "green" | "blue" | "yellow" | "red" | "orange",
   /** @deprecated Avatar now uses the theme by default and using `variant` is no longer needed */
-  variant?: 'dark' | 'light',
+  variant?: "dark" | "light",
   bg?: string,
   color?: string,
   size?: string,

package/__flow__/Avatar/constants.flow.js

@@ -1,11 +1,11 @@
 // @flow
 export const AvatarColorOptions = Object.freeze({
-  auto: 'auto',
-  neutral: 'neutral',
-  purple: 'purple',
-  green: 'green',
-  blue: 'blue',
-  yellow: 'yellow',
-  red: 'red',
-  orange: 'orange'
+  auto: "auto",
+  neutral: "neutral",
+  purple: "purple",
+  green: "green",
+  blue: "blue",
+  yellow: "yellow",
+  red: "red",
+  orange: "orange"
 });

package/__flow__/Badge/Badge.flow.js

@@ -1,5 +1,5 @@
 // @flow
-import * as React from 'react';
+import * as React from "react";
 import type { TypeIconName } from "../Icon/index.flow";
 import { badgeColors } from "./constants.flow";
 export type TypeBadgeColor = $Keys<typeof badgeColors>;
@@ -8,7 +8,7 @@ export type TypeBadgeProps = {
   /** DEPRECATED: Use children instead of text */
   text?: React.Node,
   /** Size default is deprecated in favor of small and large */
-  size?: 'small' | 'large' | 'default',
+  size?: "small" | "large" | "default",
   badgeColor?: TypeBadgeColor,
   iconName?: TypeIconName,
   /** DEPRECATED: Possibly only used for testing. Refrain from using at all if possible. (optional) */

package/__flow__/Badge/constants.flow.js

@@ -14,15 +14,15 @@ declare export var legacyBadgeColors: {|
   suggestion: TypeLegacyBadgeColor,
 |};
 export const badgeColors = Object.freeze({
-  green: 'green',
-  blue: 'blue',
-  purple: 'purple',
-  yellow: 'yellow',
-  orange: 'orange',
-  red: 'red',
-  neutral: 'neutral',
-  magenta: 'magenta',
-  pink: 'pink',
-  aqua: 'aqua',
-  teal: 'teal'
+  green: "green",
+  blue: "blue",
+  purple: "purple",
+  yellow: "yellow",
+  orange: "orange",
+  red: "red",
+  neutral: "neutral",
+  magenta: "magenta",
+  pink: "pink",
+  aqua: "aqua",
+  teal: "teal"
 });

package/__flow__/Banner/Banner.flow.js

@@ -1,7 +1,7 @@
 // @flow
-import * as React from 'react';
+import * as React from "react";
 import type { TypeIconProps } from "../Icon/index.flow";
-export type EnumBannerType = 'success' | 'info' | 'error' | 'warning' | 'opportunity';
+export type EnumBannerType = "success" | "info" | "error" | "warning" | "opportunity";
 export type TypeBannerProps = {
   text: React.Node,
   /** Type of banner. */

package/__flow__/Box/Box.flow.js

@@ -1,6 +1,6 @@
 // @flow
-import * as React from 'react';
-import type { StyledComponent } from 'styled-components';
+import * as React from "react";
+import type { StyledComponent } from "styled-components";
 import type { TypeStyledComponentsCommonProps } from "../types/styled-components.flow";
 import type { TypeSystemCommonProps, TypeSystemBorderProps, TypeSystemLayoutProps, TypeSystemPositionProps, TypeSystemFlexboxProps, TypeSystemGridProps } from "../types/system-props.flow";
 import type { TypeTheme } from "../types/theme.flow";

package/__flow__/Breadcrumb/Breadcrumb.flow.js

@@ -1,5 +1,5 @@
 // @flow
-import * as React from 'react';
+import * as React from "react";
 import type { TypeLinkProps } from "../Link/index.flow";
 import type { TypeWithDisplayName } from "../types/shared.flow";
 export type TypeBreadcrumbProps = {

package/__flow__/Button/Button.flow.js

@@ -1,6 +1,6 @@
 // @flow
-import * as React from 'react';
-import { type StyledComponent } from 'styled-components';
+import * as React from "react";
+import { type StyledComponent } from "styled-components";
 import type { TypeTheme } from "../types/theme.flow";
 import type { TypeSystemCommonProps, TypeSystemLayoutProps, TypeSystemFlexboxProps, TypeSystemGridProps } from "../types/system-props.flow";
 export type TypeButtonProps = {
@@ -10,9 +10,9 @@ export type TypeButtonProps = {
   ...TypeSystemGridProps,
   /** If the button is being used as an anchor, this prop will cause the link to open in a new tab. */
   external?: boolean,
-  size?: 'large' | 'default',
+  size?: "large" | "default",
   /** What the button looks like. "default" is deprecated in favor of "unstyled" */
-  appearance?: 'primary' | 'secondary' | 'pill' | 'destructive' | 'unstyled' | 'placeholder',
+  appearance?: "primary" | "secondary" | "pill" | "destructive" | "unstyled" | "placeholder",
   /** Set the button to display in its active state */
   active?: boolean,
   /** Disables user action and applies a disabled style on the button */
@@ -21,7 +21,7 @@ export type TypeButtonProps = {
   /** Setting this prop will cause the component to be rendered as an anchor element instead of a button element  */
   href?: string,
   /** Used to get a reference to the underlying button */
-  innerRef?: React.Ref<'button'>,
+  innerRef?: React.Ref<"button">,
   /** Action to perform when the button is clicked */
   onClick?: (e: SyntheticEvent<HTMLButtonElement>) => any,
   title?: string,

package/__flow__/Card/Card.flow.js

@@ -1,5 +1,5 @@
 // @flow
-import * as React from 'react';
+import * as React from "react";
 import type { TypeCardProps, TypeCardLink, TypeCardArea } from "./CardTypes.flow";
 declare var Card: React.StatelessFunctionalComponent<TypeCardProps>;
 declare export var CardLink: React.StatelessFunctionalComponent<TypeCardLink>;

package/__flow__/Card/CardTypes.flow.js

@@ -1,6 +1,6 @@
 // @flow
 
-import * as React from 'react';
+import * as React from "react";
 import type { TypeIconProps } from "../Icon/index.flow";
 import type { TypeStyledComponentsCommonProps, TypePropsWithChildren } from "../types/index.flow";
 import type { TypeBorderSystemProps, TypeColorSystemProps, TypeFlexboxSystemProps, TypeGridSystemProps, TypeLayoutSystemProps, TypePositionSystemProps, TypeSpaceSystemProps, TypeTypographySystemProps } from "../systemProps/index.flow";
@@ -16,13 +16,13 @@ export type TypeSharedCardSystemProps = TypePropsWithChildren<{|
   key?: React.Key,
 |}>;
 export type TypeCardStyleProps = {|
-  elevation?: 'low' | 'medium' | 'high',
+  elevation?: "low" | "medium" | "high",
   disabled?: boolean,
   compositionalComponents?: boolean,
   selected?: boolean,
 |};
 export type TypeCardStyleTransientProps = {|
-  $elevation?: 'low' | 'medium' | 'high',
+  $elevation?: "low" | "medium" | "high",
   $disabled?: boolean,
   $compositionalComponents?: boolean,
   $selected?: boolean,
@@ -40,7 +40,7 @@ export type TypeCardStyles = {|
 |};
 declare type TypeOnClick = (event: SyntheticMouseEvent<HTMLElement> | SyntheticMouseEvent<HTMLElement>) => void;
 export type TypeCardConditions = {|
-  role: 'link' | 'button' | 'checkbox' | 'presentation',
+  role: "link" | "button" | "checkbox" | "presentation",
   href?: string,
   onClick?: TypeOnClick,
   selected?: boolean,
@@ -56,12 +56,12 @@ export type TypeCardProps = {
 };
 export type TypeCardArea = {
   ...TypeSharedCardSystemProps,
-  $divider?: 'top' | 'bottom',
+  $divider?: "top" | "bottom",
   ...
 };
 export type TypeStyledSelectedIcon = {
   ...TypeIconProps,
-  $selected: $PropertyType<TypeCardStyleTransientProps, '$selected'>,
+  $selected: $PropertyType<TypeCardStyleTransientProps, "$selected">,
   ...
 };
 export type TypeCardLink = {

package/__flow__/CharacterCounter/CharacterCounter.flow.js

@@ -1,11 +1,11 @@
 // @flow
-import * as React from 'react';
+import * as React from "react";
 export type TypeCharacterCounterProps = {
   /** Current value of relative input/textarea */
   currentValue: number,
   /** Max amount of characters for input/textarea */
   maxValue: number,
-  size?: 'default' | 'mini',
+  size?: "default" | "mini",
   ...
 };
 declare var CharacterCounter: React.ComponentType<TypeCharacterCounterProps>;

package/__flow__/ChartLegend/ChartLegend.flow.js

@@ -1,6 +1,6 @@
 // @flow
-import * as React from 'react';
-export type TypeChartLegendTheme = 'compare' | 'contrast' | 'extended';
+import * as React from "react";
+export type TypeChartLegendTheme = "compare" | "contrast" | "extended";
 export type TypeChartLegendProps = {
   /** Inline or stacked y plots */
   stacked?: boolean,

package/__flow__/Checkbox/Checkbox.flow.js

@@ -1,5 +1,5 @@
 // @flow
-import * as React from 'react';
+import * as React from "react";
 export type TypeCheckboxProps = {
   /** ID of the form element, should match the "for" value of the associated label */
   id: string,
@@ -14,7 +14,7 @@ export type TypeCheckboxProps = {
   indeterminate?: boolean,
   disabled?: boolean,
   onChange: (event: SyntheticEvent<HTMLInputElement>) => void,
-  appearance?: 'pill' | 'default',
+  appearance?: "pill" | "default",
   qa?: Object,
   tabIndex?: string | number,
   inputProps?: Object,

package/__flow__/Collapsible/Collapsible.flow.js

@@ -1,5 +1,5 @@
 // @flow
-import * as React from 'react';
+import * as React from "react";
 import type { TypeWithDisplayName } from "../types/shared.flow";
 export type TypeCollapsibleProps = {
   isOpen: boolean,

package/__flow__/DatePicker/DateRangePicker/DateRangePicker.flow.js

@@ -1,7 +1,7 @@
 // @flow
-import * as React from 'react';
+import * as React from "react";
 import { type TypeCommonDatePickerProps } from "../common.flow";
-export type EnumFocusedInput = null | 'startDate' | 'endDate';
+export type EnumFocusedInput = null | "startDate" | "endDate";
 export type TypeDateRangePickerProps = {
   startDate: ?moment$Moment,
   endDate: ?moment$Moment,

package/__flow__/DatePicker/DateRangePicker/StatefulDateRangePicker.flow.js

@@ -1,11 +1,11 @@
 // @flow
-import * as React from 'react';
+import * as React from "react";
 import type { TypeDateRangePickerProps } from "./DateRangePicker.flow";
 export type TypeStatefulDateRangePickerProps = {
   ...TypeDateRangePickerProps,
-  onDatesChange?: $PropertyType<TypeDateRangePickerProps, 'onDatesChange'>,
-  focusedInput?: $PropertyType<TypeDateRangePickerProps, 'focusedInput'>,
-  onFocusChange?: $PropertyType<TypeDateRangePickerProps, 'onFocusChange'>,
+  onDatesChange?: $PropertyType<TypeDateRangePickerProps, "onDatesChange">,
+  focusedInput?: $PropertyType<TypeDateRangePickerProps, "focusedInput">,
+  onFocusChange?: $PropertyType<TypeDateRangePickerProps, "onFocusChange">,
   ...
 };
 declare export var StatefulDateRangePicker: React.StatelessFunctionalComponent<TypeStatefulDateRangePickerProps>;

package/__flow__/DatePicker/SingleDatePicker/SingleDatePicker.flow.js

@@ -1,5 +1,5 @@
 // @flow
-import * as React from 'react';
+import * as React from "react";
 import { type TypeCommonDatePickerProps } from "../common.flow";
 export type TypeSingleDatePickerProps = {
   date: ?moment$Moment,

package/__flow__/DatePicker/SingleDatePicker/StatefulSingleDatePicker.flow.js

@@ -1,5 +1,5 @@
 // @flow
-import * as React from 'react';
+import * as React from "react";
 import type { TypeSingleDatePickerProps } from "./SingleDatePicker.flow";
 export type TypeStatefulSingleDatePickerProps = {
   ...TypeSingleDatePickerProps,

package/__flow__/DatePicker/common.flow.js

@@ -1,5 +1,5 @@
 // @flow
-import { type Node } from 'react';
+import { type Node } from "react";
 export type TypeCommonDatePickerProps = {|
   daySize?: number,
   isOutsideRange?: (date: moment$Moment) => boolean,

package/__flow__/Drawer/Drawer.flow.js

@@ -1,5 +1,5 @@
 // @flow
-import * as React from 'react';
+import * as React from "react";
 import type { TypeWithDisplayName } from "../types/shared.flow";
 export type TypeDrawerContext = $Shape<{
   /** Callback for close button */
@@ -26,7 +26,7 @@ export type TypeDrawerProps = {
   /** Label for the close button. Usually this should be "Close" */
   closeButtonLabel: string,
   /** Whether the drawer slides in from the left or right side of the screen */
-  direction?: 'left' | 'right',
+  direction?: "left" | "right",
   /** In some cases, you may not want the user to be able to click outside of the drawer to close it. You can disable that with this prop. */
   disableCloseOnClickOutside?: boolean,
   id: string,

package/__flow__/EmptyState/EmptyState.flow.js

@@ -1,5 +1,5 @@
 // @flow
-import * as React from 'react';
+import * as React from "react";
 export type TypeEmptyStateProps = {
   /** An image in (preferably in SVG format) */
   media?: React.Node,

package/__flow__/Fieldset/Fieldset.flow.js

@@ -1,11 +1,11 @@
 // @flow
-import * as React from 'react';
+import * as React from "react";
 import type { TypeWithDisplayName } from "../types/shared.flow";
 export type TypeFieldsetProps = {
   /** Label text to display above the fieldset */
   label: React.Node,
   helperText?: React.Node,
-  layout?: 'vertical' | 'horizontal',
+  layout?: "vertical" | "horizontal",
   children: React.Node,
   ...
 };

package/__flow__/FormField/FormField.flow.js

@@ -1,5 +1,5 @@
 // @flow
-import * as React from 'react';
+import * as React from "react";
 import type { TypeBoxProps } from "../Box/index.flow";
 export type TypeFormFieldProps = {
   ...TypeBoxProps,

package/__flow__/Icon/Icon.flow.js

@@ -1,20 +1,20 @@
 // @flow
-import * as React from 'react';
-import type { StyledComponent } from 'styled-components';
-import type { EnumIconNames } from '@sproutsocial/seeds-icons';
-import type { EnumLogoNames } from "../EnumLogoNames.flow";
+import * as React from "react";
+import type { StyledComponent } from "styled-components";
+import type { EnumIconNames } from "@sproutsocial/seeds-icons";
+import type { EnumLogoNamesWithoutVariants } from "@sproutsocial/seeds-partner-logos";
 import type { TypeWithDisplayName } from "../types/shared.flow";
 import type { TypeTheme } from "../types/theme.flow";
-export type TypeIconSize = 'mini' // 12x12
+export type TypeIconSize = "mini" // 12x12
 // TODO: deprecate default  in favor of small in future release
-| 'default' // 16x16
-| 'small' // 16x16
-| 'medium' // 24x24
-| 'large' // 32x32
-| 'jumbo'; // 64x64
+| "default" // 16x16
+| "small" // 16x16
+| "medium" // 24x24
+| "large" // 32x32
+| "jumbo"; // 64x64
 
 export type TypeIconNames = EnumIconNames;
-export type TypeIconName = TypeIconNames | EnumLogoNames;
+export type TypeIconName = TypeIconNames | EnumLogoNamesWithoutVariants;
 export type TypeIconProps = {
   /** Name of the icon in the svg sprite */
   name: TypeIconName,
@@ -34,7 +34,7 @@ export type TypeToggleProps = {
   /** Whether the active icon should be shown or not */
   isActive: boolean,
   /** The size of the icon. `small` is the default */
-  size?: 'mini' | 'default' | 'small' | 'medium' | 'large' | 'jumbo',
+  size?: "mini" | "default" | "small" | "medium" | "large" | "jumbo",
   fixedWidth?: boolean,
   ariaLabel?: string,
   ...

package/__flow__/Image/Image.flow.js

@@ -1,6 +1,6 @@
 // @flow
 // eslint-disable-next-line no-unused-vars -- used in class extend... why is this erroring?
-import * as React from 'react';
+import * as React from "react";
 export type TypeImageProps = {
   src: string,
   /** Alt text is required for non-decorative images */
@@ -16,10 +16,10 @@ export type TypeImageProps = {
 };
 declare class Image extends React.Component<TypeImageProps> {
   static defaultProps: {|
-    title: $PropertyType<TypeImageProps, 'title'>,
-    onError: $PropertyType<TypeImageProps, 'onError'>,
-    onClick: $PropertyType<TypeImageProps, 'onClick'>,
-    onLoad: $PropertyType<TypeImageProps, 'onLoad'>,
+    title: $PropertyType<TypeImageProps, "title">,
+    onError: $PropertyType<TypeImageProps, "onError">,
+    onClick: $PropertyType<TypeImageProps, "onClick">,
+    onLoad: $PropertyType<TypeImageProps, "onLoad">,
   |}
 }
 declare export default typeof Image;

package/__flow__/Indicator/Indicator.flow.js

@@ -1,5 +1,5 @@
 // @flow
-import * as React from 'react';
+import * as React from "react";
 export type TypeIndicatorProps = {
   tooltip: string,
   ...

package/__flow__/Input/Input.flow.js

@@ -1,5 +1,5 @@
 // @flow
-import * as React from 'react';
+import * as React from "react";
 import type { TypeWithDisplayName } from "../types/shared.flow";
 export type TypeInputProps = {
   /** ID of the form element, should match the "for" value of the associated label */
@@ -16,7 +16,7 @@ export type TypeInputProps = {
   /** Current value of the input */
   value?: string,
   /** HTML type attribute */
-  type?: 'date' | 'email' | 'number' | 'password' | 'text' | 'url' | 'search',
+  type?: "date" | "email" | "number" | "password" | "text" | "url" | "search",
   /** Set option to display earlier typed values */
   autoComplete?: boolean,
   /** Will autofocus the element when mounted to the DOM */
@@ -50,13 +50,13 @@ export type TypeInputProps = {
   onKeyDown?: (e: SyntheticKeyboardEvent<HTMLInputElement>, value: string) => void,
   onKeyUp?: (e: SyntheticKeyboardEvent<HTMLInputElement>, value: string) => void,
   onPaste?: (e: SyntheticInputEvent<HTMLInputElement>, value: string) => void,
-  size?: 'large' | 'small' | 'default',
+  size?: "large" | "small" | "default",
   qa?: Object,
   /**
       Controls the styles of the input. Primary is our standard input styles and secondary is a borderless input.
       Note that this prop should only be used to alter styles and not functionality.
   */
-  appearance?: 'primary' | 'secondary',
+  appearance?: "primary" | "secondary",
   ...
 };
 declare class Input extends React.Component<TypeInputProps> {

package/__flow__/KeyboardKey/KeyboardKey.flow.js

@@ -1,5 +1,5 @@
 // @flow
-import * as React from 'react';
+import * as React from "react";
 export type TypeKeyboardKeyProps = {
   /** Text to display inside of key */
   children: string,

package/__flow__/Label/Label.flow.js

@@ -1,5 +1,5 @@
 // @flow
-import * as React from 'react';
+import * as React from "react";
 import Text from "../Text/index.flow";
 export type TypeLabelBaseProps = {
   ...React.ElementConfig<typeof Text>,

package/__flow__/Link/Link.flow.js

@@ -1,5 +1,5 @@
 // @flow
-import * as React from 'react';
+import * as React from "react";
 import type { TypeStyledComponentsCommonProps } from "../types/styled-components.flow";
 export type TypeLinkProps = {
   /** Optional prop to make the URL open in a new tab */
@@ -11,7 +11,7 @@ export type TypeLinkProps = {
   disabled?: boolean,
   /** Can be used in addition to an href but still renders as a link. Omitting href will render as button */
   onClick?: (e: SyntheticEvent<HTMLButtonElement>) => void,
-  as?: $PropertyType<TypeStyledComponentsCommonProps, 'as'>,
+  as?: $PropertyType<TypeStyledComponentsCommonProps, "as">,
   underline?: boolean,
   qa?: Object,
   ...

package/__flow__/Listbox/Listbox.flow.js

@@ -1,22 +1,22 @@
 // @flow
-import * as React from 'react';
+import * as React from "react";
 import Button from "../Button/index.flow";
 import Popout from "../Popout/index.flow";
 import Menu from "../Menu/index.flow";
 import type { TypeMenuProps, TypeMenuButtonContext } from "../Menu/index.flow";
 export type TypeListboxProps = {
   ...TypeMenuProps,
-  role?: 'listbox',
+  role?: "listbox",
   ...
 };
 export type TypeListboxButtonProps = {
   ...$Exact<React.ElementConfig<typeof Button>>,
   ...TypeMenuButtonContext,
-  size?: 'large' | 'default' | 'small',
+  size?: "large" | "default" | "small",
   content: React.Node,
   popoutProps?: $Shape<React.ElementConfig<typeof Popout>>,
-  'aria-label'?: string,
-  'aria-labelledby'?: string,
+  "aria-label"?: string,
+  "aria-labelledby"?: string,
   ...
 };
 declare class Listbox extends React.Component<TypeListboxProps> {

package/__flow__/Loader/Loader.flow.js

@@ -1,12 +1,12 @@
 // @flow
-import * as React from 'react';
+import * as React from "react";
 export type TypeLoaderProps = {
-  size?: 'small' | 'large',
+  size?: "small" | "large",
   /** Text for the loader. This text is not visible, but is used for accessibility purposed */
   text?: string,
   /** Whether the loader should wait 2 seconds before it displays */
   delay?: boolean,
-  color?: 'light' | 'dark',
+  color?: "light" | "dark",
   qa?: Object,
   ...
 };

package/__flow__/LoaderButton/LoaderButton.flow.js

@@ -1,5 +1,5 @@
 // @flow
-import * as React from 'react';
+import * as React from "react";
 import type { TypeButtonProps } from "../Button/index.flow";
 export type TypeLoaderButtonProps = {
   ...TypeButtonProps,

package/__flow__/Menu/Menu.flow.js

@@ -1,6 +1,6 @@
 // @flow
-import * as React from 'react';
-import type { StyledComponent } from 'styled-components';
+import * as React from "react";
+import type { StyledComponent } from "styled-components";
 import Box from "../Box/index.flow";
 import Button from "../Button/index.flow";
 import Popout from "../Popout/index.flow";
@@ -62,15 +62,15 @@ export type TypeMenuItemProps = {
   role?: TypeMenuItemRoles,
   elemAfter?: React.Node,
   elemBefore?: React.Node,
-  as?: $PropertyType<TypeStyledComponentsCommonProps, 'as'>,
-  'data-qa-menu-item'?: string,
+  as?: $PropertyType<TypeStyledComponentsCommonProps, "as">,
+  "data-qa-menu-item"?: string,
   alignItems?: string,
   ...
 };
 export type TypeMenuItemSwitchProps = {
   ...TypeMenuItemProps,
   /** Determines whether the Switch will be rendered as elemBefore or elemAfter. */
-  placement: 'before' | 'after',
+  placement: "before" | "after",
   /** Pass any valid Text props except children to the label.
    * children is omitted because Menu.Switch's children is rendered as the label's children.*/
   labelProps?: {
@@ -92,9 +92,9 @@ export type TypeMenuGroupProps = {
   children: React.Node,
   /** If provided, a visible title will be rendered for the group. */
   title?: React.Node,
-  titleAs?: $PropertyType<TypeStyledComponentsCommonProps, 'as'>,
+  titleAs?: $PropertyType<TypeStyledComponentsCommonProps, "as">,
   /** Use the flush appearance if you're using the menu outside of a popout */
-  appearance?: 'default' | 'flush',
+  appearance?: "default" | "flush",
   disabled?: boolean,
   ...
 };
@@ -106,8 +106,8 @@ export type TypeMenuButtonProps = {
   ...$Exact<React.ElementConfig<typeof Button>>,
   ...TypeMenuButtonContext,
   id?: string,
-  'aria-labelledby'?: string,
-  'aria-label'?: string,
+  "aria-labelledby"?: string,
+  "aria-label"?: string,
   content: React.Node,
   popoutProps?: $Shape<React.ElementConfig<typeof Popout>>,
   placement?: EnumPlacements,