@sproutsocial/racine 12.24.0 → 13.1.1

package/__flow__/Tooltip/index.js

@@ -1,57 +1,18 @@
 // @flow
 import * as React from 'react';
-import {useState, useEffect} from 'react';
-import {TooltipContent} from './styles';
-import Popout, {type EnumPlacements} from '../Popout';
+import { useState, useEffect } from 'react';
 import MOTION from '@sproutsocial/seeds-motion/dist/seeds-motion-unitless';
-
+import Popout from "../Popout";
+import { TooltipContent } from "./styles";
+import type { TypeTooltipProps } from "./index.flow";
 let idCounter = 0;
-
-type TypeProps = {
-  /** The content that the tooltip should be attached to. Hovering or focusing this element will cause the tooltip to appear */
-  children: React.Node,
-  /** The content to be displayed within the tooltip. If there is no content, just the children are rendered */
-  content: React.Node,
-  /** The placement of the tooltip in relation to the children */
-  placement?: EnumPlacements,
-  /** The time (in ms) that a user has to be hovered/focused before the tooltip will appear  */
-  enterDelay?: number,
-  /** Used to override the appearance of the Tooltip content. By default, strings will have the 'pill' appearance, and more complex content will have the 'box' appearance. You can change those defaults by setting this prop. */
-  appearance?: 'pill' | 'box',
-  qa?: Object,
-  zIndex?: number,
-  /** Props to be spread onto the underlying Popout component */
-  popoutProps?: Object,
-  /** Truncates text into a single line with ellipsis */
-  truncated?: boolean,
-};
-
-const wrapContent = (
-  content,
-  show,
-  hide,
-  Wrapper,
-  appearance,
-  ariaProps: any,
-  wrapperStyles: {[key: string]: any}
-) => {
-  return (
-    <Wrapper
-      appearance={appearance}
-      onMouseOver={show}
-      onMouseOut={hide}
-      onFocus={show}
-      onBlur={hide}
-      style={
-        Object.keys(wrapperStyles).length === 0 ? undefined : wrapperStyles
-      }
-      {...ariaProps}
-    >
+const wrapContent = (content, show, hide, Wrapper, appearance, ariaProps: any, wrapperStyles: {
+  [key: string]: any
+}) => {
+  return <Wrapper appearance={appearance} onMouseOver={show} onMouseOut={hide} onFocus={show} onBlur={hide} style={Object.keys(wrapperStyles).length === 0 ? undefined : wrapperStyles} {...ariaProps}>
       {React.isValidElement(content) ? React.cloneElement(content) : content}
-    </Wrapper>
-  );
+    </Wrapper>;
 };
-
 const Tooltip = ({
   content,
   children,
@@ -63,22 +24,16 @@ const Tooltip = ({
   popoutProps,
   truncated = false,
   ...rest
-}: TypeProps) => {
+}: TypeTooltipProps) => {
   const [shouldShow, setShouldShow] = useState(false);
   const [isOpen, setIsOpen] = useState(false);
   const [id] = useState(`Racine-tooltip-${idCounter++}`);
   const isInvalidContent = content === null || content === undefined;
-
   const show = () => setShouldShow(true);
   const hide = () => setShouldShow(false);
-
   const exitDelay = MOTION.MOTION_DURATION_FAST * 1000;
-
-  const defaultAppearance =
-    appearance || (typeof content === 'object' ? 'box' : 'pill');
-
+  const defaultAppearance = appearance || (typeof content === 'object' ? 'box' : 'pill');
   const shouldTooltipContentsBeInteractive = defaultAppearance === 'box';
-
   useEffect(() => {
     let timeout;
     if (shouldShow) {
@@ -88,61 +43,32 @@ const Tooltip = ({
     }
     return () => clearTimeout(timeout);
   }, [isOpen, shouldShow, enterDelay, exitDelay]);
-
   const wrappedContent = wrapContent(
-    // $FlowIssue - https://github.com/facebook/flow/issues/6392
-    content,
-    shouldTooltipContentsBeInteractive ? show : undefined,
-    shouldTooltipContentsBeInteractive ? hide : undefined,
-    Content,
-    defaultAppearance,
-    {
-      id,
-      // $FlowIssue
-      ...rest,
-    },
-    {}
-  );
-
-  const ariaPropsForWrappedChildren = isOpen
-    ? {
-        'aria-describedby': id,
-      }
-    : {};
-  const wrapperStylesForWrappedChildren = truncated
-    ? {
-        overflow: 'hidden',
-        textOverflow: 'ellipsis',
-        whiteSpace: 'nowrap',
-      }
-    : {};
+  // $FlowIssue - https://github.com/facebook/flow/issues/6392
+  content, shouldTooltipContentsBeInteractive ? show : undefined, shouldTooltipContentsBeInteractive ? hide : undefined, Content, defaultAppearance,
+  // $FlowIssue
+  {
+    id,
+    ...rest
+  }, {});
+  const ariaPropsForWrappedChildren = isOpen ? {
+    'aria-describedby': id
+  } : {};
+  const wrapperStylesForWrappedChildren = truncated ? {
+    overflow: 'hidden',
+    textOverflow: 'ellipsis',
+    whiteSpace: 'nowrap'
+  } : {};
   const wrappedChildren = wrapContent(
-    // $FlowIssue - https://github.com/facebook/flow/issues/6392
-    children,
-    show,
-    hide,
-    'span',
-    defaultAppearance,
-    ariaPropsForWrappedChildren,
-    wrapperStylesForWrappedChildren
-  );
-
-  return (
-    <Popout
-      content={!isInvalidContent ? wrappedContent : undefined}
-      isOpen={isOpen}
-      placement={placement}
-      qa={{'data-qa-tooltip': id, ...qa}}
-      focusOnContent={false}
-      zIndex={zIndex}
-      display={truncated ? 'flex' : undefined}
-      {...popoutProps}
-    >
+  // $FlowIssue - https://github.com/facebook/flow/issues/6392
+  children, show, hide, 'span', defaultAppearance, ariaPropsForWrappedChildren, wrapperStylesForWrappedChildren);
+  return <Popout content={!isInvalidContent ? wrappedContent : undefined} isOpen={isOpen} placement={placement} qa={{
+    'data-qa-tooltip': id,
+    ...qa
+  }} focusOnContent={false} zIndex={zIndex} display={truncated ? 'flex' : undefined} {...popoutProps}>
       {wrappedChildren}
-    </Popout>
-  );
+    </Popout>;
 };
-
 const Content = ({
   appearance = 'pill',
   children,
@@ -150,23 +76,9 @@ const Content = ({
 }: {
   appearance?: 'pill' | 'box',
   children: string | React.Element<any>,
-}) => (
-  <TooltipContent
-    appearance={appearance}
-    borderRadius={appearance === 'box' ? 500 : '5000em'}
-    px={400}
-    py={appearance === 'box' ? 400 : 200}
-    m={200}
-    color="text.body"
-    bg="container.background.base"
-    boxShadow="medium"
-    border={500}
-    borderColor="container.border.base"
-    // $FlowIssue - upgrade v0.112.0
-    {...rest}
-  >
+}) =>
+// $FlowIssue - upgrade v0.112.0
+<TooltipContent appearance={appearance} borderRadius={appearance === 'box' ? 500 : '5000em'} px={400} py={appearance === 'box' ? 400 : 200} m={200} color="text.body" bg="container.background.base" boxShadow="medium" border={500} borderColor="container.border.base" {...rest}>
     {children}
-  </TooltipContent>
-);
-
-export default Tooltip;
+  </TooltipContent>;
+export default Tooltip;

package/__flow__/Tooltip/styles.js

@@ -1,11 +1,9 @@
 //@flow
 import styled from 'styled-components';
-import Box from '../Box';
-
-import type {TypeTheme} from '../types/theme.flow';
-
+import Box from "../Box";
+import type { TypeTheme } from "../types/theme.flow";
 export const TooltipContent = styled<typeof Box, TypeTheme, any>(Box)`
-  font-family: ${(props) => props.theme.fontFamily};
-  ${(props) => props.theme.typography[200]}
-  text-align: ${(props) => (props.appearance === 'box' ? 'left' : 'center')};
-`;
+  font-family: ${props => props.theme.fontFamily};
+  ${props => props.theme.typography[200]}
+  text-align: ${props => props.appearance === 'box' ? 'left' : 'center'};
+`;

package/__flow__/VisuallyHidden/index.js

@@ -1,9 +1,7 @@
 //@flow
-import {visuallyHidden} from '../utils/mixins';
-import styled, {type StyledComponent} from 'styled-components';
-
-import type {TypeTheme} from '../types/theme.flow';
-
+import styled, { type StyledComponent } from 'styled-components';
+import { visuallyHidden } from "../utils/mixins";
+import type { TypeTheme } from "../types/theme.flow";
 export const VisuallyHidden: StyledComponent<any, TypeTheme, *> = styled.span`
   ${visuallyHidden}
-`;
+`;

package/__flow__/dataviz/index.js

@@ -1,14 +1,11 @@
 // @flow
 import React from 'react';
-import Box from '../Box';
-import {withTheme} from 'styled-components';
-
-export const DataVizRotation = withTheme((p) => {
+import { withTheme } from 'styled-components';
+import Box from "../Box";
+export const DataVizRotation = withTheme(p => {
   return p.theme.colors.DATAVIZ_COLORS_LIST.map((color, i) => {
-    return (
-      <Box key={color} py={300} px={400} bg={color}>
+    return <Box key={color} py={300} px={400} bg={color}>
         {i + 1}
-      </Box>
-    );
+      </Box>;
   });
-});
+});

package/__flow__/index.js

@@ -1,77 +1,153 @@
 // @flow
-export type {EnumIconNames} from './EnumIconNames';
-export type {TypeTheme, TypeSproutTheme} from './types/theme.flow';
-export * from './systemProps';
-export {visuallyHidden, focusRing, disabled} from './utils/mixins';
-export {useSelect, useMultiselect, useTextContent} from './utils/hooks';
-export {useInteractiveColor} from './utils/useInteractiveColor';
-export {default as theme} from './themes/light/theme';
-export {default as darkTheme} from './themes/dark/theme';
-export {
-  sproutLightTheme,
-  sproutDarkTheme,
-} from './themes/extendedThemes/sproutTheme';
-export {default as Icon} from './Icon';
-// DEPRECATED: Alert has been renamed to Banner
-export {default as Alert} from './Banner';
-export {default as Banner} from './Banner';
-export {default as Badge} from './Badge';
-export {default as Indicator} from './Indicator';
-export {default as Card} from './Card';
-export {default as CharacterCounter} from './CharacterCounter';
-export {default as Checkbox} from './Checkbox';
-export {default as Radio} from './Radio';
-export {default as Textarea} from './Textarea';
-export {default as ToggleHint} from './ToggleHint';
-export {default as Loader} from './Loader';
-export {default as Text} from './Text';
-export {default as Image} from './Image';
-export {default as KeyboardKey} from './KeyboardKey';
-export {default as ChartLegend} from './ChartLegend';
-export {default as Table} from './Table';
-export type {TypeTableRow} from './Table';
-export {default as TableCell} from './TableCell';
-export type {TypeTableCell} from './TableCell';
-export {default as TableHeaderCell} from './TableHeaderCell';
-export {default as TableRowAccordion} from './TableRowAccordion';
-export {default as Box} from './Box';
-export {default as Label} from './Label';
-export {default as Input} from './Input';
-export {default as Select} from './Select';
-export {default as Button} from './Button';
-export {default as Link} from './Link';
-export {default as Switch} from './Switch';
-export {default as Token} from './Token';
-export {default as TokenInput} from './TokenInput';
-export type {TypeTokenSpec} from './TokenInput';
-export {default as Tabs} from './Tabs';
-export {default as Modal} from './Modal';
-export {default as Popout} from './Popout';
-export type {EnumPlacements} from './Popout';
-export {default as ThemeProvider} from './ThemeProvider';
-export {default as Tooltip} from './Tooltip';
-export {default as Drawer} from './Drawer';
-export {default as LoaderButton} from './LoaderButton';
-export {default as Numeral} from './Numeral';
-export {default as Collapsible} from './Collapsible';
-export {default as SegmentedControl} from './SegmentedControl';
-export {default as EmptyState} from './EmptyState';
-export {default as FormField} from './FormField';
-export {default as Fieldset} from './Fieldset';
-export {default as Message} from './Message';
-export {default as Stack} from './Stack';
-export {default as Avatar} from './Avatar';
-export {default as Breadcrumb} from './Breadcrumb';
-export {default as Skeleton} from './Skeleton';
-export {default as ToastContainer, toast} from './Toast';
-export type {TypeToastOptions} from './Toast';
-export {default as Menu, MenuButton} from './Menu';
-export {MenuButtonContext} from './Menu/hooks';
-export {MenuItemContainer} from './Menu/styles';
-export {default as Listbox, ListboxButton} from './Listbox';
-export {default as OverflowList} from './OverflowList';
-export {SingleDatePicker, DateRangePicker} from './DatePicker';
-export {VisuallyHidden} from './VisuallyHidden';
-export {default as PartnerLogo} from './PartnerLogo';
-export type {TypePartnerNames} from './PartnerLogo/TypePartnerNames';
-export {default as SpotIllustration} from './SpotIllustration';
+
+/* Asset types */
+export type { EnumIconNames } from "./EnumIconNames";
+export type { EnumIllustrationNames } from "./EnumIllustrationNames";
+export type { EnumLogoNames } from "./EnumLogoNames";
+
+/* Theme and related types */
+export * from "./systemProps";
+export { default as theme } from "./themes/light/theme";
+export { default as darkTheme } from "./themes/dark/theme";
+export { sproutLightTheme, sproutDarkTheme } from "./themes/extendedThemes/sproutTheme";
+export type { TypeTheme, TypeSproutTheme } from "./types/theme.flow";
+export { default as ThemeProvider } from "./ThemeProvider";
+
+/* Utilities and related types */
+export { useSelect, useMultiselect, useTextContent } from "./utils/hooks";
+export { visuallyHidden, focusRing, disabled } from "./utils/mixins";
+export { useInteractiveColor } from "./utils/useInteractiveColor";
+
+/* Components */
+export { default as Avatar } from "./Avatar";
+export { default as Badge } from "./Badge";
+export { default as Banner } from "./Banner";
+export { default as Box } from "./Box";
+export { default as Breadcrumb } from "./Breadcrumb";
+export { default as Button } from "./Button";
+export { default as Card } from "./Card";
+export { default as CharacterCounter } from "./CharacterCounter";
+export { default as ChartLegend } from "./ChartLegend";
+export { default as Checkbox } from "./Checkbox";
+export { default as Collapsible } from "./Collapsible";
+/* should Stateful date pickers be exported? */
+export { DateRangePicker, SingleDatePicker } from "./DatePicker";
+export { default as Drawer } from "./Drawer";
+export { default as EmptyState } from "./EmptyState";
+export { default as Fieldset } from "./Fieldset";
+export { default as FormField } from "./FormField";
+export { default as Icon } from "./Icon";
+export { default as Image } from "./Image";
+export { default as Indicator } from "./Indicator";
+export { default as Input } from "./Input";
+export { default as KeyboardKey } from "./KeyboardKey";
+export { default as Label } from "./Label";
+export { default as Link } from "./Link";
+export { default as Listbox, ListboxButton } from "./Listbox";
+export { default as Loader } from "./Loader";
+export { default as LoaderButton } from "./LoaderButton";
+export { default as Menu, MenuButton } from "./Menu";
+export { MenuButtonContext } from "./Menu/hooks";
+export { MenuItemContainer } from "./Menu/styles";
+export { default as Message } from "./Message";
+export { default as Modal } from "./Modal";
+export { default as Numeral } from "./Numeral";
+export { default as OverflowList } from "./OverflowList";
+export { default as PartnerLogo } from "./PartnerLogo";
+export { default as Popout } from "./Popout";
+/* Should Portal be exported?
+export {default as Portal} from './Portal';
+export type {TypePortalProps} from './Portal/index.flow';
+*/
+export { default as Radio } from "./Radio";
+export { default as SegmentedControl } from "./SegmentedControl";
+export { default as Select } from "./Select";
+export { default as Skeleton } from "./Skeleton";
+export { default as SpotIllustration } from "./SpotIllustration";
+export { default as Stack } from "./Stack";
+export { default as Switch } from "./Switch";
+export { default as Table } from "./Table";
+export { default as TableCell } from "./TableCell";
+export { default as TableHeaderCell } from "./TableHeaderCell";
+export { default as TableRowAccordion } from "./TableRowAccordion";
+export { default as Tabs } from "./Tabs";
+export { default as Text } from "./Text";
+export { default as Textarea } from "./Textarea";
+export { default as ToastContainer, toast } from "./Toast";
+export { default as ToggleHint } from "./ToggleHint";
+export { default as Token } from "./Token";
+export { default as TokenInput } from "./TokenInput";
+export { default as Tooltip } from "./Tooltip";
+export { VisuallyHidden } from "./VisuallyHidden";
+
+/* Components types */
+export type { TypeAvatarProps } from "./Avatar/index.flow";
+export type { TypeBadgeProps } from "./Badge/index.flow";
+export type { TypeBannerProps, EnumBannerType } from "./Banner/index.flow";
+export type { TypeBoxProps } from "./Box/index.flow";
+export type { TypeBreadcrumbProps, TypeBreadcrumbItemProps } from "./Breadcrumb/index.flow";
+export type { TypeButtonProps } from "./Button/index.flow";
+export type { TypeCardProps } from "./Card/index.flow";
+export type { TypeCharacterCounterProps } from "./CharacterCounter/index.flow";
+export type { TypeChartLegendProps } from "./ChartLegend/index.flow";
+export type { TypeCheckboxProps } from "./Checkbox/index.flow";
+export type { TypeCollapsibleProps } from "./Collapsible/index.flow";
+export type { TypeDateRangePickerProps } from "./DatePicker/DateRangePicker.flow";
+export type { TypeSingleDatePickerProps } from "./DatePicker/SingleDatePicker.flow";
+export type { TypeDrawerProps, TypeDrawerCloseButtonProps, TypeDrawerHeaderProps } from "./Drawer/index.flow";
+export type { TypeEmptyStateProps } from "./EmptyState/index.flow";
+export type { TypeFieldsetProps } from "./Fieldset/index.flow";
+export type { TypeFormFieldProps } from "./FormField/index.flow";
+export type { TypeIconProps, TypeIconName, TypeToggleProps } from "./Icon/index.flow";
+export type { TypeImageProps } from "./Image/index.flow";
+export type { TypeIndicatorProps } from "./Indicator/index.flow";
+export type { TypeInputProps } from "./Input/index.flow";
+export type { TypeKeyboardKeyProps } from "./KeyboardKey/index.flow";
+export type { TypeLabelProps } from "./Label/index.flow";
+export type { TypeLinkProps } from "./Link/index.flow";
+export type { TypeListboxProps, TypeListboxButtonProps } from "./Listbox/index.flow";
+export type { TypeLoaderProps } from "./Loader/index.flow";
+export type { TypeLoaderButtonProps } from "./LoaderButton/index.flow";
+export type { TypeMenuButtonContext, TypeMenuButtonProps, TypeMenuContext, TypeMenuGroupProps, TypeMenuItemProps, TypeMenuItemRoles, TypeMenuProps, TypeMenuRoles } from "./Menu/index.flow";
+export type { EnumDensities, TypeMessageProps } from "./Message/index.flow";
+export type { TypeModalProps, TypeModalContentProps, TypeModalFooterProps, TypeModalHeaderProps } from "./Modal/index.flow";
+export type { TypeNumeralProps } from "./Numeral/index.flow";
+export type { TypeOverflowListProps, TypeVirtualizedListProps } from "./OverflowList/index.flow";
+export type { TypePartnerLogoProps } from "./PartnerLogo/index.flow";
+export type { TypePartnerNames } from "./PartnerLogo/TypePartnerNames";
+export type { EnumPlacements, TypePopoutProps } from "./Popout/index.flow";
+export type { TypeRadioProps } from "./Radio/index.flow";
+export type { TypeSegmentedControlProps, TypeSegmentedControlItemProps } from "./SegmentedControl/index.flow";
+export type { TypeSelectProps } from "./Select/index.flow";
+export type { TypeSpotIllustrationProps } from "./SpotIllustration/index.flow";
+export type { TypeStackProps } from "./Stack/index.flow";
+export type { TypeSwitchProps } from "./Switch/index.flow";
+export type { TypeTableProps, TypeTableRow } from "./Table/index.flow";
+export type { TypeTableCell } from "./TableCell/index.flow";
+export type { TypeEnumSortDirections, TypeTableHeaderCell,
+// Component props type, but why also TypeTableHeaderCell?
+TypeTableHeaderCellProps } from "./TableHeaderCell/index.flow";
+export type { TypeTableRowAccordionProps } from "./TableRowAccordion/index.flow";
+export type { TypeTabsProps, TypeTabButtonsProps } from "./Tabs/index.flow";
+export type { TypeTextProps } from "./Text/index.flow";
+export type { TypeTextareaProps } from "./Textarea/index.flow";
+export type { TypeToastOptions, TypeToastTheme } from "./Toast/index.flow";
+export type { TypeToggleHintProps } from "./ToggleHint/index.flow";
+export type { TypeTokenProps } from "./Token/index.flow";
+export type { TypeTokenInputProps, TypeTokenSpec } from "./TokenInput/index.flow";
+export type { TypeTooltipProps } from "./Tooltip/index.flow";
+
+/* Deprecated exports */
+/**
+ * @deprecated Use badgeColor instead
+ */
+export { legacyBadgeColors } from "./Badge/constants";
+/**
+ * @deprecated Alert has been renamed to Banner
+ */
+export { default as Alert } from "./Banner";
+
+/**
+ * Should this be exported? @deprecated?
+ */
+export { DataVizRotation } from "./dataviz";

package/__flow__/systemProps/background.js

@@ -1,18 +1,8 @@
 // @flow strict-local
 
-import {background} from 'styled-system';
-import type {
-  BackgroundImageProperty,
-  BackgroundPositionProperty,
-  BackgroundProperty,
-  BackgroundRepeatProperty,
-  BackgroundSizeProperty,
-} from 'csstype';
-
-import type {
-  StyledSystemStyleFn,
-  TypeResponsiveBaseSystemProp,
-} from './types.flow.js';
+import { background } from 'styled-system';
+import type { BackgroundImageProperty, BackgroundPositionProperty, BackgroundProperty, BackgroundRepeatProperty, BackgroundSizeProperty } from 'csstype';
+import type { StyledSystemStyleFn, TypeResponsiveBaseSystemProp } from "./types.flow.js";
 
 // https://styled-system.com/table#background
 
@@ -24,5 +14,4 @@ export type TypeBackgroundSystemProps = $ReadOnly<{|
   backgroundPosition?: TypeResponsiveBaseSystemProp<BackgroundPositionProperty<void>>,
   backgroundRepeat?: TypeResponsiveBaseSystemProp<BackgroundRepeatProperty>,
 |}>;
-
-export const backgroundSystemProps: StyledSystemStyleFn = background;
+export const backgroundSystemProps: StyledSystemStyleFn = background;

package/__flow__/systemProps/border.js

@@ -1,38 +1,8 @@
 // @flow strict-local
 
-import {border} from 'styled-system';
-import type {
-  BorderBottomColorProperty,
-  BorderBottomLeftRadiusProperty,
-  BorderBottomProperty,
-  BorderBottomRightRadiusProperty,
-  BorderBottomStyleProperty,
-  BorderBottomWidthProperty,
-  BorderColorProperty,
-  BorderLeftColorProperty,
-  BorderLeftProperty,
-  BorderLeftStyleProperty,
-  BorderLeftWidthProperty,
-  BorderProperty,
-  BorderRadiusProperty,
-  BorderRightColorProperty,
-  BorderRightProperty,
-  BorderRightStyleProperty,
-  BorderRightWidthProperty,
-  BorderStyleProperty,
-  BorderTopColorProperty,
-  BorderTopLeftRadiusProperty,
-  BorderTopProperty,
-  BorderTopRightRadiusProperty,
-  BorderTopStyleProperty,
-  BorderTopWidthProperty,
-  BorderWidthProperty,
-} from 'csstype';
-
-import type {
-  StyledSystemStyleFn,
-  TypeResponsiveBaseSystemProp,
-} from './types.flow.js';
+import { border } from 'styled-system';
+import type { BorderBottomColorProperty, BorderBottomLeftRadiusProperty, BorderBottomProperty, BorderBottomRightRadiusProperty, BorderBottomStyleProperty, BorderBottomWidthProperty, BorderColorProperty, BorderLeftColorProperty, BorderLeftProperty, BorderLeftStyleProperty, BorderLeftWidthProperty, BorderProperty, BorderRadiusProperty, BorderRightColorProperty, BorderRightProperty, BorderRightStyleProperty, BorderRightWidthProperty, BorderStyleProperty, BorderTopColorProperty, BorderTopLeftRadiusProperty, BorderTopProperty, BorderTopRightRadiusProperty, BorderTopStyleProperty, BorderTopWidthProperty, BorderWidthProperty } from 'csstype';
+import type { StyledSystemStyleFn, TypeResponsiveBaseSystemProp } from "./types.flow.js";
 
 // https://styled-system.com/table#border
 
@@ -72,5 +42,4 @@ export type TypeBorderSystemProps = $ReadOnly<{|
   borderX?: TypeResponsiveBaseSystemProp<BorderLeftProperty<number>>,
   borderY?: TypeResponsiveBaseSystemProp<BorderTopProperty<number>>,
 |}>;
-
-export const borderSystemProps: StyledSystemStyleFn = border;
+export const borderSystemProps: StyledSystemStyleFn = border;

package/__flow__/systemProps/color.js

@@ -1,26 +1,16 @@
 // @flow strict-local
 
-import {color} from 'styled-system';
-import type {
-  BackgroundColorProperty,
-  ColorProperty,
-  OpacityProperty,
-} from 'csstype';
-
-import type {
-  StyledSystemStyleFn,
-  TypeResponsiveBaseSystemProp,
-} from './types.flow.js';
+import { color } from 'styled-system';
+import type { BackgroundColorProperty, ColorProperty, OpacityProperty } from 'csstype';
+import type { StyledSystemStyleFn, TypeResponsiveBaseSystemProp } from "./types.flow.js";
 
 // https://styled-system.com/table#color
 
-type TypeBackgroundColorSystemProp =
-  TypeResponsiveBaseSystemProp<BackgroundColorProperty>;
+type TypeBackgroundColorSystemProp = TypeResponsiveBaseSystemProp<BackgroundColorProperty>;
 export type TypeColorSystemProps = $ReadOnly<{|
   backgroundColor?: TypeBackgroundColorSystemProp,
   bg?: TypeBackgroundColorSystemProp,
   color?: TypeResponsiveBaseSystemProp<ColorProperty>,
   opacity?: TypeResponsiveBaseSystemProp<OpacityProperty>,
 |}>;
-
-export const colorSystemProps: StyledSystemStyleFn = color;
+export const colorSystemProps: StyledSystemStyleFn = color;

package/__flow__/systemProps/custom.js

@@ -1,12 +1,8 @@
 // @flow strict-local
 
-import {compose, system} from 'styled-system';
-import type {CursorProperty, WhiteSpaceProperty} from 'csstype';
-
-import type {
-  StyledSystemStyleFn,
-  TypeResponsiveBaseSystemProp,
-} from './types.flow.js';
+import { compose, system } from 'styled-system';
+import type { CursorProperty, WhiteSpaceProperty } from 'csstype';
+import type { StyledSystemStyleFn, TypeResponsiveBaseSystemProp } from "./types.flow.js";
 
 // https://styled-system.com/custom-props
 
@@ -14,10 +10,7 @@ export type TypeCustomSystemProps = $ReadOnly<{|
   cursor?: TypeResponsiveBaseSystemProp<CursorProperty>,
   whiteSpace?: TypeResponsiveBaseSystemProp<WhiteSpaceProperty>,
 |}>;
-
-export const customSystemProps: StyledSystemStyleFn = compose(
-  system({
-    cursor: true,
-    whiteSpace: true,
-  })
-);
+export const customSystemProps: StyledSystemStyleFn = compose(system({
+  cursor: true,
+  whiteSpace: true
+}));