@sproutsocial/racine 13.7.1 → 14.0.0

package/__flow__/index.flow.js

@@ -0,0 +1,146 @@
+// @flow
+
+/* Asset types */
+export type { EnumIconNames } from "./EnumIconNames.flow";
+export type { EnumIllustrationNames } from "./EnumIllustrationNames.flow";
+export type { EnumLogoNames } from "./EnumLogoNames.flow";
+
+/* Theme and related types */
+export * from "./systemProps";
+export { default as theme } from "./themes/light/theme.flow";
+export { default as darkTheme } from "./themes/dark/theme.flow";
+export { sproutLightTheme, sproutDarkTheme } from "./themes/extendedThemes/sproutTheme/index.flow";
+export type { TypeTheme, TypeSproutTheme } from "./types/theme.flow";
+export { default as ThemeProvider } from "./ThemeProvider/index.flow";
+
+/* Utilities and related types */
+export { useSelect, useMultiselect, useTextContent } from "./utils/hooks.flow";
+export { visuallyHidden, focusRing, disabled } from "./utils/mixins.flow";
+export { useInteractiveColor } from "./utils/useInteractiveColor.flow";
+
+/* Components */
+export { default as Avatar } from "./Avatar/index.flow";
+export { default as Badge } from "./Badge/index.flow";
+export { default as Banner } from "./Banner/index.flow";
+export { default as Box } from "./Box/index.flow";
+export { default as Breadcrumb } from "./Breadcrumb/index.flow";
+export { default as Button } from "./Button/index.flow";
+export { default as Card } from "./Card/index.flow";
+export { default as CharacterCounter } from "./CharacterCounter/index.flow";
+export { default as ChartLegend } from "./ChartLegend/index.flow";
+export { default as Checkbox } from "./Checkbox/index.flow";
+export { default as Collapsible } from "./Collapsible/index.flow";
+export { DateRangePicker, SingleDatePicker } from "./DatePicker/index.flow";
+export { default as Drawer } from "./Drawer/index.flow";
+export { default as EmptyState } from "./EmptyState/index.flow";
+export { default as Fieldset } from "./Fieldset/index.flow";
+export { default as FormField } from "./FormField/index.flow";
+export { default as Icon } from "./Icon/index.flow";
+export { default as Image } from "./Image/index.flow";
+export { default as Indicator } from "./Indicator/index.flow";
+export { default as Input } from "./Input/index.flow";
+export { default as KeyboardKey } from "./KeyboardKey/index.flow";
+export { default as Label } from "./Label/index.flow";
+export { default as Link } from "./Link/index.flow";
+export { default as Listbox, ListboxButton } from "./Listbox/index.flow";
+export { default as Loader } from "./Loader/index.flow";
+export { default as LoaderButton } from "./LoaderButton/index.flow";
+export { default as Menu, MenuButton, MenuButtonContext, MenuItemContainer } from "./Menu/index.flow";
+export { default as Message } from "./Message/index.flow";
+export { default as Modal } from "./Modal/index.flow";
+export { default as Numeral } from "./Numeral/index.flow";
+export { default as OverflowList } from "./OverflowList/index.flow";
+export { default as PartnerLogo } from "./PartnerLogo/index.flow";
+export { default as Popout } from "./Popout/index.flow";
+export { default as Radio } from "./Radio/index.flow";
+export { default as SegmentedControl } from "./SegmentedControl/index.flow";
+export { default as Select } from "./Select/index.flow";
+export { default as Skeleton } from "./Skeleton/index.flow";
+export { default as SpotIllustration } from "./SpotIllustration/index.flow";
+export { default as Stack } from "./Stack/index.flow";
+export { default as Switch } from "./Switch/index.flow";
+export { default as Table } from "./Table/index.flow";
+export { default as TableCell } from "./TableCell/index.flow";
+export { default as TableHeaderCell } from "./TableHeaderCell/index.flow";
+export { default as TableRowAccordion } from "./TableRowAccordion/index.flow";
+export { default as Tabs } from "./Tabs/index.flow";
+export { default as Text } from "./Text/index.flow";
+export { default as Textarea } from "./Textarea/index.flow";
+export { default as ToastContainer, toast } from "./Toast/index.flow";
+export { default as ToggleHint } from "./ToggleHint/index.flow";
+export { default as Token } from "./Token/index.flow";
+export { default as TokenInput } from "./TokenInput/index.flow";
+export { default as Tooltip } from "./Tooltip/index.flow";
+export { VisuallyHidden } from "./VisuallyHidden/index.flow";
+
+/* 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, TypeSingleDatePickerProps } from "./DatePicker/index.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.flow";
+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, TypeTableCellProps } 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/index.flow";
+
+/**
+ * @deprecated Alert has been renamed to Banner
+ */
+export { default as Alert } from "./Banner/index.flow";
+
+/**
+ * Should this be exported? @deprecated?
+ */
+export { DataVizRotation } from "./dataviz/index.flow";

package/__flow__/index.js

@@ -1,153 +1,2 @@
 // @flow
-
-/* 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";
+export * from './index.flow';

package/__flow__/systemProps/background.js

@@ -1,17 +1,17 @@
 // @flow strict-local
 
 import { background } from 'styled-system';
-import type { BackgroundImageProperty, BackgroundPositionProperty, BackgroundProperty, BackgroundRepeatProperty, BackgroundSizeProperty } from 'csstype';
+import type { Property$BackgroundImage, Property$BackgroundPosition, Property$Background, Property$BackgroundRepeat, Property$BackgroundSize } from 'csstype';
 import type { StyledSystemStyleFn, TypeResponsiveBaseSystemProp } from "./types.flow.js";
 
 // https://styled-system.com/table#background
 
 export type TypeBackgroundSystemProps = $ReadOnly<{|
-  background?: TypeResponsiveBaseSystemProp<BackgroundProperty<void>>,
-  backgroundImage?: TypeResponsiveBaseSystemProp<BackgroundImageProperty>,
-  backgroundSize?: TypeResponsiveBaseSystemProp<BackgroundSizeProperty<void>>,
-  // eslint-disable-next-line prettier/prettier
-  backgroundPosition?: TypeResponsiveBaseSystemProp<BackgroundPositionProperty<void>>,
-  backgroundRepeat?: TypeResponsiveBaseSystemProp<BackgroundRepeatProperty>,
+  background?: TypeResponsiveBaseSystemProp<Property$Background<void>>,
+  backgroundImage?: TypeResponsiveBaseSystemProp<Property$BackgroundImage>,
+  backgroundSize?: TypeResponsiveBaseSystemProp<Property$BackgroundSize<void>>,
+  // prettier-ignore
+  backgroundPosition?: TypeResponsiveBaseSystemProp<Property$BackgroundPosition<void>>,
+  backgroundRepeat?: TypeResponsiveBaseSystemProp<Property$BackgroundRepeat>,
 |}>;
 export const backgroundSystemProps: StyledSystemStyleFn = background;

package/__flow__/systemProps/border.js

@@ -1,45 +1,46 @@
 // @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 { Property$BorderBottomColor, Property$BorderBottomLeftRadius, Property$BorderBottom, Property$BorderBottomRightRadius, Property$BorderBottomStyle, Property$BorderBottomWidth, Property$BorderColor, Property$BorderLeftColor, Property$BorderLeft, Property$BorderLeftStyle, Property$BorderLeftWidth, Property$Border, Property$BorderRadius, Property$BorderRightColor, Property$BorderRight, Property$BorderRightStyle, Property$BorderRightWidth, Property$BorderStyle, Property$BorderTopColor, Property$BorderTopLeftRadius, Property$BorderTop, Property$BorderTopRightRadius, Property$BorderTopStyle, Property$BorderTopWidth, Property$BorderWidth } from 'csstype';
 import type { StyledSystemStyleFn, TypeResponsiveBaseSystemProp } from "./types.flow.js";
 
 // https://styled-system.com/table#border
 
 export type TypeBorderSystemProps = $ReadOnly<{|
-  border?: TypeResponsiveBaseSystemProp<BorderProperty<number>>,
-  borderBottom?: TypeResponsiveBaseSystemProp<BorderBottomProperty<number>>,
-  borderBottomColor?: TypeResponsiveBaseSystemProp<BorderBottomColorProperty>,
-  // eslint-disable-next-line prettier/prettier
-  borderBottomLeftRadius?: TypeResponsiveBaseSystemProp<BorderBottomLeftRadiusProperty<number>>,
-  // eslint-disable-next-line prettier/prettier
-  borderBottomRightRadius?: TypeResponsiveBaseSystemProp<BorderBottomRightRadiusProperty<number>>,
-  borderBottomStyle?: TypeResponsiveBaseSystemProp<BorderBottomStyleProperty>,
-  // eslint-disable-next-line prettier/prettier
-  borderBottomWidth?: TypeResponsiveBaseSystemProp<BorderBottomWidthProperty<number>>,
-  borderColor?: TypeResponsiveBaseSystemProp<BorderColorProperty>,
-  borderLeft?: TypeResponsiveBaseSystemProp<BorderLeftProperty<number>>,
-  borderLeftColor?: TypeResponsiveBaseSystemProp<BorderLeftColorProperty>,
-  borderLeftStyle?: TypeResponsiveBaseSystemProp<BorderLeftStyleProperty>,
-  // eslint-disable-next-line prettier/prettier
-  borderLeftWidth?: TypeResponsiveBaseSystemProp<BorderLeftWidthProperty<number>>,
-  borderRadius?: TypeResponsiveBaseSystemProp<BorderRadiusProperty<number>>,
-  borderRight?: TypeResponsiveBaseSystemProp<BorderRightProperty<number>>,
-  borderRightColor?: TypeResponsiveBaseSystemProp<BorderRightColorProperty>,
-  borderRightStyle?: TypeResponsiveBaseSystemProp<BorderRightStyleProperty>,
-  // eslint-disable-next-line prettier/prettier
-  borderRightWidth?: TypeResponsiveBaseSystemProp<BorderRightWidthProperty<number>>,
-  borderStyle?: TypeResponsiveBaseSystemProp<BorderStyleProperty>,
-  borderTop?: TypeResponsiveBaseSystemProp<BorderTopProperty<number>>,
-  borderTopColor?: TypeResponsiveBaseSystemProp<BorderTopColorProperty>,
-  // eslint-disable-next-line prettier/prettier
-  borderTopLeftRadius?: TypeResponsiveBaseSystemProp<BorderTopLeftRadiusProperty<number>>,
-  // eslint-disable-next-line prettier/prettier
-  borderTopRightRadius?: TypeResponsiveBaseSystemProp<BorderTopRightRadiusProperty<number>>,
-  borderTopStyle?: TypeResponsiveBaseSystemProp<BorderTopStyleProperty>,
-  borderTopWidth?: TypeResponsiveBaseSystemProp<BorderTopWidthProperty<number>>,
-  borderWidth?: TypeResponsiveBaseSystemProp<BorderWidthProperty<number>>,
-  borderX?: TypeResponsiveBaseSystemProp<BorderLeftProperty<number>>,
-  borderY?: TypeResponsiveBaseSystemProp<BorderTopProperty<number>>,
+  border?: TypeResponsiveBaseSystemProp<Property$Border<number>>,
+  borderBottom?: TypeResponsiveBaseSystemProp<Property$BorderBottom<number>>,
+  borderBottomColor?: TypeResponsiveBaseSystemProp<Property$BorderBottomColor>,
+  // prettier-ignore
+  borderBottomLeftRadius?: TypeResponsiveBaseSystemProp<Property$BorderBottomLeftRadius<number>>,
+  // prettier-ignore
+  borderBottomRightRadius?: TypeResponsiveBaseSystemProp<Property$BorderBottomRightRadius<number>>,
+  borderBottomStyle?: TypeResponsiveBaseSystemProp<Property$BorderBottomStyle>,
+  // prettier-ignore
+  borderBottomWidth?: TypeResponsiveBaseSystemProp<Property$BorderBottomWidth<number>>,
+  borderColor?: TypeResponsiveBaseSystemProp<Property$BorderColor>,
+  borderLeft?: TypeResponsiveBaseSystemProp<Property$BorderLeft<number>>,
+  borderLeftColor?: TypeResponsiveBaseSystemProp<Property$BorderLeftColor>,
+  borderLeftStyle?: TypeResponsiveBaseSystemProp<Property$BorderLeftStyle>,
+  // prettier-ignore
+  borderLeftWidth?: TypeResponsiveBaseSystemProp<Property$BorderLeftWidth<number>>,
+  borderRadius?: TypeResponsiveBaseSystemProp<Property$BorderRadius<number>>,
+  borderRight?: TypeResponsiveBaseSystemProp<Property$BorderRight<number>>,
+  borderRightColor?: TypeResponsiveBaseSystemProp<Property$BorderRightColor>,
+  borderRightStyle?: TypeResponsiveBaseSystemProp<Property$BorderRightStyle>,
+  // prettier-ignore
+  borderRightWidth?: TypeResponsiveBaseSystemProp<Property$BorderRightWidth<number>>,
+  borderStyle?: TypeResponsiveBaseSystemProp<Property$BorderStyle>,
+  borderTop?: TypeResponsiveBaseSystemProp<Property$BorderTop<number>>,
+  borderTopColor?: TypeResponsiveBaseSystemProp<Property$BorderTopColor>,
+  // prettier-ignore
+  borderTopLeftRadius?: TypeResponsiveBaseSystemProp<Property$BorderTopLeftRadius<number>>,
+  // prettier-ignore
+  borderTopRightRadius?: TypeResponsiveBaseSystemProp<Property$BorderTopRightRadius<number>>,
+  borderTopStyle?: TypeResponsiveBaseSystemProp<Property$BorderTopStyle>,
+  // prettier-ignore
+  borderTopWidth?: TypeResponsiveBaseSystemProp<Property$BorderTopWidth<number>>,
+  borderWidth?: TypeResponsiveBaseSystemProp<Property$BorderWidth<number>>,
+  borderX?: TypeResponsiveBaseSystemProp<Property$BorderLeft<number>>,
+  borderY?: TypeResponsiveBaseSystemProp<Property$BorderTop<number>>,
 |}>;
 export const borderSystemProps: StyledSystemStyleFn = border;

package/__flow__/systemProps/color.js

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

package/__flow__/systemProps/custom.js

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

package/__flow__/systemProps/flexbox.js

@@ -1,25 +1,25 @@
 // @flow strict-local
 
 import { flexbox } from 'styled-system';
-import type { AlignItemsProperty, AlignContentProperty, JustifyContentProperty, JustifyItemsProperty, FlexWrapProperty, FlexDirectionProperty, FlexProperty, FlexBasisProperty, JustifySelfProperty, AlignSelfProperty, Globals } from 'csstype';
+import type { Property$AlignItems, Property$AlignContent, Property$JustifyContent, Property$JustifyItems, Property$FlexWrap, Property$FlexDirection, Property$Flex, Property$FlexBasis, Property$JustifySelf, Property$AlignSelf, Globals } from 'csstype';
 import type { StyledSystemStyleFn, TypeResponsiveBaseSystemProp } from "./types.flow.js";
 
 // https://styled-system.com/table#flexbox
 
 type TypeGlobalsNumber = Globals | number;
 export type TypeFlexboxSystemProps = $ReadOnly<{|
-  alignItems?: TypeResponsiveBaseSystemProp<AlignItemsProperty>,
-  alignContent?: TypeResponsiveBaseSystemProp<AlignContentProperty>,
-  justifyItems?: TypeResponsiveBaseSystemProp<JustifyContentProperty>,
-  justifyContent?: TypeResponsiveBaseSystemProp<JustifyItemsProperty>,
-  flexWrap?: TypeResponsiveBaseSystemProp<FlexWrapProperty>,
-  flexDirection?: TypeResponsiveBaseSystemProp<FlexDirectionProperty>,
-  flex?: TypeResponsiveBaseSystemProp<FlexProperty<void>>,
+  alignItems?: TypeResponsiveBaseSystemProp<Property$AlignItems>,
+  alignContent?: TypeResponsiveBaseSystemProp<Property$AlignContent>,
+  justifyItems?: TypeResponsiveBaseSystemProp<Property$JustifyContent>,
+  justifyContent?: TypeResponsiveBaseSystemProp<Property$JustifyItems>,
+  flexWrap?: TypeResponsiveBaseSystemProp<Property$FlexWrap>,
+  flexDirection?: TypeResponsiveBaseSystemProp<Property$FlexDirection>,
+  flex?: TypeResponsiveBaseSystemProp<Property$Flex<void>>,
   flexGrow?: TypeResponsiveBaseSystemProp<TypeGlobalsNumber>,
   flexShrink?: TypeResponsiveBaseSystemProp<TypeGlobalsNumber>,
-  flexBasis?: TypeResponsiveBaseSystemProp<FlexBasisProperty<void>>,
-  justifySelf?: TypeResponsiveBaseSystemProp<JustifySelfProperty>,
-  alignSelf?: TypeResponsiveBaseSystemProp<AlignSelfProperty>,
+  flexBasis?: TypeResponsiveBaseSystemProp<Property$FlexBasis<void>>,
+  justifySelf?: TypeResponsiveBaseSystemProp<Property$JustifySelf>,
+  alignSelf?: TypeResponsiveBaseSystemProp<Property$AlignSelf>,
   order?: TypeResponsiveBaseSystemProp<TypeGlobalsNumber>,
 |}>;
 export const flexboxSystemProps: StyledSystemStyleFn = flexbox;

package/__flow__/systemProps/grid.js

@@ -1,25 +1,26 @@
 // @flow strict-local
 
 import { grid } from 'styled-system';
-import type { GridAreaProperty, GridAutoColumnsProperty, GridAutoFlowProperty, GridAutoRowsProperty, GridColumnProperty, GridColumnGapProperty, GridGapProperty, GridRowProperty, GridRowGapProperty, GridTemplateAreasProperty, GridTemplateColumnsProperty, GridTemplateRowsProperty } from 'csstype';
+import type { Property$GridArea, Property$GridAutoColumns, Property$GridAutoFlow, Property$GridAutoRows, Property$GridColumn, Property$GridColumnGap, Property$GridGap, Property$GridRow, Property$GridRowGap, Property$GridTemplateAreas, Property$GridTemplateColumns, Property$GridTemplateRows } from 'csstype';
 import type { StyledSystemStyleFn, TypeResponsiveBaseSystemProp } from "./types.flow.js";
 
 // https://styled-system.com/table#grid-layout
 
 export type TypeGridSystemProps = $ReadOnly<{|
-  gridArea?: TypeResponsiveBaseSystemProp<GridAreaProperty>,
-  gridAutoColumns?: TypeResponsiveBaseSystemProp<GridAutoColumnsProperty<void>>,
-  gridAutoFlow?: TypeResponsiveBaseSystemProp<GridAutoFlowProperty>,
-  gridAutoRows?: TypeResponsiveBaseSystemProp<GridAutoRowsProperty<void>>,
-  gridColumn?: TypeResponsiveBaseSystemProp<GridColumnProperty>,
-  gridColumnGap?: TypeResponsiveBaseSystemProp<GridColumnGapProperty<void>>,
-  gridGap?: TypeResponsiveBaseSystemProp<GridGapProperty<void>>,
-  gridRow?: TypeResponsiveBaseSystemProp<GridRowProperty>,
-  gridRowGap?: TypeResponsiveBaseSystemProp<GridRowGapProperty<void>>,
-  gridTemplateAreas?: TypeResponsiveBaseSystemProp<GridTemplateAreasProperty>,
-  // eslint-disable-next-line prettier/prettier
-  gridTemplateColumns?: TypeResponsiveBaseSystemProp<GridTemplateColumnsProperty<void>>,
-  // eslint-disable-next-line prettier/prettier
-  gridTemplateRows?: TypeResponsiveBaseSystemProp<GridTemplateRowsProperty<void>>,
+  gridArea?: TypeResponsiveBaseSystemProp<Property$GridArea>,
+  // prettier-ignore
+  gridAutoColumns?: TypeResponsiveBaseSystemProp<Property$GridAutoColumns<void>>,
+  gridAutoFlow?: TypeResponsiveBaseSystemProp<Property$GridAutoFlow>,
+  gridAutoRows?: TypeResponsiveBaseSystemProp<Property$GridAutoRows<void>>,
+  gridColumn?: TypeResponsiveBaseSystemProp<Property$GridColumn>,
+  gridColumnGap?: TypeResponsiveBaseSystemProp<Property$GridColumnGap<void>>,
+  gridGap?: TypeResponsiveBaseSystemProp<Property$GridGap<void>>,
+  gridRow?: TypeResponsiveBaseSystemProp<Property$GridRow>,
+  gridRowGap?: TypeResponsiveBaseSystemProp<Property$GridRowGap<void>>,
+  gridTemplateAreas?: TypeResponsiveBaseSystemProp<Property$GridTemplateAreas>,
+  // prettier-ignore
+  gridTemplateColumns?: TypeResponsiveBaseSystemProp<Property$GridTemplateColumns<void>>,
+  // prettier-ignore
+  gridTemplateRows?: TypeResponsiveBaseSystemProp<Property$GridTemplateRows<void>>,
 |}>;
 export const gridSystemProps: StyledSystemStyleFn = grid;

package/__flow__/systemProps/layout.js

@@ -1,25 +1,25 @@
 // @flow strict-local
 
 import { layout } from 'styled-system';
-import type { DisplayProperty, HeightProperty, MaxHeightProperty, MaxWidthProperty, MinHeightProperty, MinWidthProperty, OverflowProperty, OverflowXProperty, OverflowYProperty, VerticalAlignProperty, WidthProperty } from 'csstype';
+import type { Property$Display, Property$Height, Property$MaxHeight, Property$MaxWidth, Property$MinHeight, Property$MinWidth, Property$Overflow, Property$OverflowX, Property$OverflowY, Property$VerticalAlign, Property$Width } from 'csstype';
 import type { StyledSystemStyleFn, TypeResponsiveBaseSystemProp } from "./types.flow.js";
 
 // https://styled-system.com/table#layout
 
-type TypeHeightProp = HeightProperty<number>;
-type TypeWidthProp = WidthProperty<number>;
+type TypeHeightProp = Property$Height<number>;
+type TypeWidthProp = Property$Width<number>;
 export type TypeLayoutSystemProps = $ReadOnly<{|
-  display?: TypeResponsiveBaseSystemProp<DisplayProperty>,
+  display?: TypeResponsiveBaseSystemProp<Property$Display>,
   height?: TypeResponsiveBaseSystemProp<TypeHeightProp>,
-  maxHeight?: TypeResponsiveBaseSystemProp<MaxHeightProperty<number>>,
-  maxWidth?: TypeResponsiveBaseSystemProp<MaxWidthProperty<number>>,
-  minHeight?: TypeResponsiveBaseSystemProp<MinHeightProperty<number>>,
-  minWidth?: TypeResponsiveBaseSystemProp<MinWidthProperty<number>>,
-  overflow?: TypeResponsiveBaseSystemProp<OverflowProperty>,
-  overflowX?: TypeResponsiveBaseSystemProp<OverflowXProperty>,
-  overflowY?: TypeResponsiveBaseSystemProp<OverflowYProperty>,
+  maxHeight?: TypeResponsiveBaseSystemProp<Property$MaxHeight<number>>,
+  maxWidth?: TypeResponsiveBaseSystemProp<Property$MaxWidth<number>>,
+  minHeight?: TypeResponsiveBaseSystemProp<Property$MinHeight<number>>,
+  minWidth?: TypeResponsiveBaseSystemProp<Property$MinWidth<number>>,
+  overflow?: TypeResponsiveBaseSystemProp<Property$Overflow>,
+  overflowX?: TypeResponsiveBaseSystemProp<Property$OverflowX>,
+  overflowY?: TypeResponsiveBaseSystemProp<Property$OverflowY>,
   size?: TypeResponsiveBaseSystemProp<TypeHeightProp & TypeWidthProp>,
-  verticalAlign?: TypeResponsiveBaseSystemProp<VerticalAlignProperty<void>>,
+  verticalAlign?: TypeResponsiveBaseSystemProp<Property$VerticalAlign<void>>,
   width?: TypeResponsiveBaseSystemProp<TypeWidthProp>,
 |}>;
 export const layoutSystemProps: StyledSystemStyleFn = layout;

package/__flow__/systemProps/position.js

@@ -1,17 +1,17 @@
 // @flow strict-local
 
 import { position } from 'styled-system';
-import type { BottomProperty, LeftProperty, PositionProperty, RightProperty, TopProperty, ZIndexProperty } from 'csstype';
+import type { Property$Bottom, Property$Left, Property$Position, Property$Right, Property$Top, Property$ZIndex } from 'csstype';
 import type { StyledSystemStyleFn, TypeResponsiveBaseSystemProp } from "./types.flow.js";
 
 // https://styled-system.com/table#position
 
 export type TypePositionSystemProps = $ReadOnly<{|
-  bottom?: TypeResponsiveBaseSystemProp<BottomProperty<number>>,
-  left?: TypeResponsiveBaseSystemProp<LeftProperty<number>>,
-  position?: TypeResponsiveBaseSystemProp<PositionProperty>,
-  right?: TypeResponsiveBaseSystemProp<RightProperty<number>>,
-  top?: TypeResponsiveBaseSystemProp<TopProperty<number>>,
-  zIndex?: TypeResponsiveBaseSystemProp<ZIndexProperty>,
+  bottom?: TypeResponsiveBaseSystemProp<Property$Bottom<number>>,
+  left?: TypeResponsiveBaseSystemProp<Property$Left<number>>,
+  position?: TypeResponsiveBaseSystemProp<Property$Position>,
+  right?: TypeResponsiveBaseSystemProp<Property$Right<number>>,
+  top?: TypeResponsiveBaseSystemProp<Property$Top<number>>,
+  zIndex?: TypeResponsiveBaseSystemProp<Property$ZIndex>,
 |}>;
 export const positionSystemProps: StyledSystemStyleFn = position;

package/__flow__/systemProps/shadow.js

@@ -1,13 +1,13 @@
 // @flow strict-local
 
 import { shadow } from 'styled-system';
-import type { BoxShadowProperty, TextShadowProperty } from 'csstype';
+import type { Property$BoxShadow, Property$TextShadow } from 'csstype';
 import type { StyledSystemStyleFn, TypeResponsiveBaseSystemProp } from "./types.flow.js";
 
 // https://styled-system.com/table#shadow
 
 export type TypeShadowSystemProps = $ReadOnly<{|
-  boxShadow?: TypeResponsiveBaseSystemProp<BoxShadowProperty>,
-  textShadow?: TypeResponsiveBaseSystemProp<TextShadowProperty>,
+  boxShadow?: TypeResponsiveBaseSystemProp<Property$BoxShadow>,
+  textShadow?: TypeResponsiveBaseSystemProp<Property$TextShadow>,
 |}>;
 export const shadowSystemProps: StyledSystemStyleFn = shadow;