@primer/components 0.0.0-2021102995710 → 0.0.0-202110303104

package/lib-esm/TabNav.js

@@ -2,14 +2,14 @@ import classnames from 'classnames'; // eslint-disable-next-line import/no-names
 
 import React from 'react';
 import styled from 'styled-components';
-import { get } from './constants';
+import { COMMON, get } from './constants';
 import sx from './sx';
 const ITEM_CLASS = 'TabNav-item';
 const SELECTED_CLASS = 'selected';
 const TabNavBase = styled.div.withConfig({
   displayName: "TabNav__TabNavBase",
   componentId: "sc-1xod0ow-0"
-})(["margin-top:0;border-bottom:1px solid ", ";", ""], get('colors.border.default'), sx);
+})(["margin-top:0;border-bottom:1px solid ", ";", " ", ""], get('colors.border.default'), COMMON, sx);
 const TabNavBody = styled.nav.withConfig({
   displayName: "TabNav__TabNavBody",
   componentId: "sc-1xod0ow-1"
@@ -32,7 +32,7 @@ const TabNavLink = styled.a.attrs(props => ({
 })).withConfig({
   displayName: "TabNav__TabNavLink",
   componentId: "sc-1xod0ow-2"
-})(["padding:8px 12px;font-size:", ";line-height:20px;color:", ";text-decoration:none;background-color:transparent;border:1px solid transparent;border-bottom:0;&:hover,&:focus{color:", ";text-decoration:none;}&.selected{color:", ";border-color:", ";border-top-right-radius:", ";border-top-left-radius:", ";background-color:", ";}", ";"], get('fontSizes.1'), get('colors.fg.default'), get('colors.fg.default'), get('colors.fg.default'), get('colors.border.default'), get('radii.2'), get('radii.2'), get('colors.canvas.default'), sx);
+})(["padding:8px 12px;font-size:", ";line-height:20px;color:", ";text-decoration:none;background-color:transparent;border:1px solid transparent;border-bottom:0;&:hover,&:focus{color:", ";text-decoration:none;}&.selected{color:", ";border-color:", ";border-top-right-radius:", ";border-top-left-radius:", ";background-color:", ";}", ";", ";"], get('fontSizes.1'), get('colors.fg.default'), get('colors.fg.default'), get('colors.fg.default'), get('colors.border.default'), get('radii.2'), get('radii.2'), get('colors.canvas.default'), COMMON, sx);
 TabNavLink.displayName = 'TabNav.Link';
 export default Object.assign(TabNav, {
   Link: TabNavLink

package/lib-esm/TextInputWithTokens.d.ts

@@ -44,7 +44,7 @@ declare const TextInputWithTokens: React.ForwardRefExoticComponent<Pick<{
 } & {
     as?: string | React.ComponentType<any> | undefined;
     forwardedAs?: string | React.ComponentType<any> | undefined;
-}, string | number | symbol>, "maxWidth" | "minWidth" | "width" | "theme" | "block" | "icon" | "variant" | "sx" | "className" | "disabled" | "contrast"> & {
+}, string | number | symbol>, "maxWidth" | "minWidth" | "width" | "theme" | "block" | "icon" | "sx" | "variant" | "className" | "disabled" | "contrast"> & {
     className?: string | undefined;
     icon?: React.ComponentType<{
         className?: string | undefined;
@@ -62,9 +62,9 @@ declare const TextInputWithTokens: React.ForwardRefExoticComponent<Pick<{
     style?: React.CSSProperties | undefined;
     title?: string | undefined;
     block?: boolean | undefined;
+    sx?: import("./sx").BetterSystemStyleObject | undefined;
     variant?: "small" | "large" | undefined;
     role?: React.AriaRole | undefined;
-    sx?: import("./sx").BetterSystemStyleObject | undefined;
     key?: React.Key | null | undefined;
     defaultChecked?: boolean | undefined;
     defaultValue?: string | number | readonly string[] | undefined;
@@ -319,7 +319,7 @@ declare const TextInputWithTokens: React.ForwardRefExoticComponent<Pick<{
     contrast?: boolean | undefined;
 } & {
     theme?: any;
-}, "maxWidth" | "minWidth" | "width" | "theme" | "block" | "variant" | "sx" | "disabled" | "contrast">, string | number | symbol> & React.RefAttributes<HTMLInputElement> & {
+}, "maxWidth" | "minWidth" | "width" | "theme" | "block" | "sx" | "variant" | "disabled" | "contrast">, string | number | symbol> & React.RefAttributes<HTMLInputElement> & {
     selectedTokenIndex: number | undefined;
     setSelectedTokenIndex: React.Dispatch<React.SetStateAction<number | undefined>>;
 }, string | number | symbol> & React.RefAttributes<HTMLInputElement>>;

package/lib-esm/Timeline.d.ts

@@ -1,33 +1,407 @@
 /// <reference types="hoist-non-react-statics" />
 import React from 'react';
-import { SxProp } from './sx';
+import { BoxProps } from './Box';
 import { ComponentProps } from './utils/types';
-declare const Timeline: import("styled-components").StyledComponent<"div", any, {
+declare const Timeline: import("styled-components").StyledComponent<"div", any, import("styled-system").SpaceProps<Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>, string | number | symbol> & import("styled-system").ColorProps<Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>, string | number | symbol> & import("styled-system").TypographyProps<Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>> & import("styled-system").LayoutProps<Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>> & import("styled-system").FlexboxProps<Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>> & import("styled-system").GridProps<Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>> & import("styled-system").BackgroundProps<Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>, import("csstype").Property.Background<import("styled-system").TLengthStyledSystem>> & import("styled-system").BorderProps<Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>, import("csstype").Property.Border<import("styled-system").TLengthStyledSystem>> & import("styled-system").PositionProps<Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>> & import("styled-system").ShadowProps<Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>> & import("./sx").SxProp & {
     clipSidebar?: boolean | undefined;
-} & SxProp, never>;
-declare const TimelineItem: import("styled-components").StyledComponent<"div", any, {
-    condensed?: boolean | undefined;
-} & SxProp, never>;
-export declare type TimelineBadgeProps = {
-    children?: React.ReactNode;
-} & SxProp;
-declare const TimelineBody: import("styled-components").StyledComponent<"div", any, SxProp, never>;
-declare const TimelineBreak: import("styled-components").StyledComponent<"div", any, SxProp, never>;
+}, never>;
+declare type StyledTimelineItemProps = {
+    condensed?: boolean;
+};
+declare const TimelineItem: import("styled-components").StyledComponent<"div", any, import("styled-system").SpaceProps<Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>, string | number | symbol> & import("styled-system").ColorProps<Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>, string | number | symbol> & import("styled-system").TypographyProps<Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>> & import("styled-system").LayoutProps<Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>> & import("styled-system").FlexboxProps<Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>> & import("styled-system").GridProps<Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>> & import("styled-system").BackgroundProps<Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>, import("csstype").Property.Background<import("styled-system").TLengthStyledSystem>> & import("styled-system").BorderProps<Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>, import("csstype").Property.Border<import("styled-system").TLengthStyledSystem>> & import("styled-system").PositionProps<Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>> & import("styled-system").ShadowProps<Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>> & import("./sx").SxProp & StyledTimelineItemProps, never>;
+export declare type TimelineBadgeProps = BoxProps;
+declare const TimelineBody: import("styled-components").StyledComponent<"div", any, import("styled-system").SpaceProps<Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>, string | number | symbol> & import("styled-system").ColorProps<Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>, string | number | symbol> & import("styled-system").TypographyProps<Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>> & import("styled-system").LayoutProps<Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>> & import("styled-system").FlexboxProps<Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>> & import("styled-system").GridProps<Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>> & import("styled-system").BackgroundProps<Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>, import("csstype").Property.Background<import("styled-system").TLengthStyledSystem>> & import("styled-system").BorderProps<Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>, import("csstype").Property.Border<import("styled-system").TLengthStyledSystem>> & import("styled-system").PositionProps<Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>> & import("styled-system").ShadowProps<Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>> & import("./sx").SxProp, never>;
+declare const TimelineBreak: import("styled-components").StyledComponent<"div", any, import("styled-system").SpaceProps<Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>, string | number | symbol> & import("styled-system").ColorProps<Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>, string | number | symbol> & import("styled-system").TypographyProps<Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>> & import("styled-system").LayoutProps<Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>> & import("styled-system").FlexboxProps<Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>> & import("styled-system").GridProps<Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>> & import("styled-system").BackgroundProps<Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>, import("csstype").Property.Background<import("styled-system").TLengthStyledSystem>> & import("styled-system").BorderProps<Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>, import("csstype").Property.Border<import("styled-system").TLengthStyledSystem>> & import("styled-system").PositionProps<Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>> & import("styled-system").ShadowProps<Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>> & import("./sx").SxProp, never>;
 export declare type TimelineProps = ComponentProps<typeof Timeline>;
 export declare type TimelineItemsProps = ComponentProps<typeof TimelineItem>;
 export declare type TimelineBodyProps = ComponentProps<typeof TimelineBody>;
 export declare type TimelineBreakProps = ComponentProps<typeof TimelineBreak>;
-declare const _default: string & import("styled-components").StyledComponentBase<"div", any, {
+declare const _default: string & import("styled-components").StyledComponentBase<"div", any, import("styled-system").SpaceProps<Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>, string | number | symbol> & import("styled-system").ColorProps<Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>, string | number | symbol> & import("styled-system").TypographyProps<Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>> & import("styled-system").LayoutProps<Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>> & import("styled-system").FlexboxProps<Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>> & import("styled-system").GridProps<Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>> & import("styled-system").BackgroundProps<Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>, import("csstype").Property.Background<import("styled-system").TLengthStyledSystem>> & import("styled-system").BorderProps<Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>, import("csstype").Property.Border<import("styled-system").TLengthStyledSystem>> & import("styled-system").PositionProps<Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>> & import("styled-system").ShadowProps<Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>> & import("./sx").SxProp & {
     clipSidebar?: boolean | undefined;
-} & SxProp, never> & import("hoist-non-react-statics").NonReactStatics<never, {}> & {
-    Item: import("styled-components").StyledComponent<"div", any, {
-        condensed?: boolean | undefined;
-    } & SxProp, never>;
+}, never> & import("hoist-non-react-statics").NonReactStatics<never, {}> & {
+    Item: import("styled-components").StyledComponent<"div", any, import("styled-system").SpaceProps<Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>, string | number | symbol> & import("styled-system").ColorProps<Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>, string | number | symbol> & import("styled-system").TypographyProps<Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>> & import("styled-system").LayoutProps<Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>> & import("styled-system").FlexboxProps<Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>> & import("styled-system").GridProps<Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>> & import("styled-system").BackgroundProps<Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>, import("csstype").Property.Background<import("styled-system").TLengthStyledSystem>> & import("styled-system").BorderProps<Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>, import("csstype").Property.Border<import("styled-system").TLengthStyledSystem>> & import("styled-system").PositionProps<Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>> & import("styled-system").ShadowProps<Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>> & import("./sx").SxProp & StyledTimelineItemProps, never>;
     Badge: {
-        (props: TimelineBadgeProps): JSX.Element;
+        (props: {
+            lineHeight?: import("styled-system").ResponsiveValue<string | number | symbol, Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>> | undefined;
+            border?: import("styled-system").ResponsiveValue<import("csstype").Property.Border<import("styled-system").TLengthStyledSystem>, Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>> | undefined;
+            alignContent?: import("styled-system").ResponsiveValue<import("csstype").Property.AlignContent, Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>> | undefined;
+            alignItems?: import("styled-system").ResponsiveValue<import("csstype").Property.AlignItems, Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>> | undefined;
+            alignSelf?: import("styled-system").ResponsiveValue<import("csstype").Property.AlignSelf, Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>> | undefined;
+            backgroundColor?: import("styled-system").ResponsiveValue<string | number | symbol, Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>> | undefined;
+            backgroundImage?: import("styled-system").ResponsiveValue<import("csstype").Property.BackgroundImage, Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>> | undefined;
+            backgroundRepeat?: import("styled-system").ResponsiveValue<import("csstype").Property.BackgroundRepeat, Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>> | undefined;
+            backgroundSize?: import("styled-system").ResponsiveValue<import("csstype").Property.BackgroundSize<import("styled-system").TLengthStyledSystem>, Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>> | undefined;
+            borderBottomColor?: import("styled-system").ResponsiveValue<string | number | symbol, Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>> | undefined;
+            borderBottomLeftRadius?: import("styled-system").ResponsiveValue<string | number | symbol, Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>> | undefined;
+            borderBottomRightRadius?: import("styled-system").ResponsiveValue<string | number | symbol, Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>> | undefined;
+            borderBottomStyle?: import("styled-system").ResponsiveValue<import("csstype").Property.BorderBottomStyle, Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>> | undefined;
+            borderBottomWidth?: import("styled-system").ResponsiveValue<string | number | symbol, Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>> | undefined;
+            borderLeftColor?: import("styled-system").ResponsiveValue<string | number | symbol, Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>> | undefined;
+            borderLeftStyle?: import("styled-system").ResponsiveValue<import("csstype").Property.BorderLeftStyle, Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>> | undefined;
+            borderLeftWidth?: import("styled-system").ResponsiveValue<string | number | symbol, Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>> | undefined;
+            borderRightColor?: import("styled-system").ResponsiveValue<string | number | symbol, Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>> | undefined;
+            borderRightStyle?: import("styled-system").ResponsiveValue<import("csstype").Property.BorderRightStyle, Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>> | undefined;
+            borderRightWidth?: import("styled-system").ResponsiveValue<string | number | symbol, Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>> | undefined;
+            borderTopColor?: import("styled-system").ResponsiveValue<string | number | symbol, Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>> | undefined;
+            borderTopLeftRadius?: import("styled-system").ResponsiveValue<string | number | symbol, Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>> | undefined;
+            borderTopRightRadius?: import("styled-system").ResponsiveValue<string | number | symbol, Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>> | undefined;
+            borderTopStyle?: import("styled-system").ResponsiveValue<import("csstype").Property.BorderTopStyle, Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>> | undefined;
+            borderTopWidth?: import("styled-system").ResponsiveValue<string | number | symbol, Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>> | undefined;
+            bottom?: import("styled-system").ResponsiveValue<import("csstype").Property.Bottom<import("styled-system").TLengthStyledSystem>, Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>> | undefined;
+            boxShadow?: import("styled-system").ResponsiveValue<number | import("csstype").Property.BoxShadow, Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>> | undefined;
+            color?: (string & import("styled-system").ResponsiveValue<string | number | symbol, Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>>) | undefined;
+            display?: import("styled-system").ResponsiveValue<import("csstype").Property.Display, Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>> | undefined;
+            flexBasis?: import("styled-system").ResponsiveValue<import("csstype").Property.FlexBasis<import("styled-system").TLengthStyledSystem>, Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>> | undefined;
+            flexDirection?: import("styled-system").ResponsiveValue<import("csstype").Property.FlexDirection, Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>> | undefined;
+            flexGrow?: import("styled-system").ResponsiveValue<import("csstype").Property.FlexGrow, Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>> | undefined;
+            flexShrink?: import("styled-system").ResponsiveValue<import("csstype").Property.FlexShrink, Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>> | undefined;
+            flexWrap?: import("styled-system").ResponsiveValue<import("csstype").Property.FlexWrap, Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>> | undefined;
+            fontFamily?: import("styled-system").ResponsiveValue<import("csstype").Property.FontFamily, Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>> | undefined;
+            fontSize?: import("styled-system").ResponsiveValue<string | number | symbol, Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>> | undefined;
+            fontStyle?: import("styled-system").ResponsiveValue<import("csstype").Property.FontStyle, Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>> | undefined;
+            fontWeight?: import("styled-system").ResponsiveValue<string | number | symbol, Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>> | undefined;
+            gridAutoColumns?: import("styled-system").ResponsiveValue<import("csstype").Property.GridAutoColumns<import("styled-system").TLengthStyledSystem>, Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>> | undefined;
+            gridAutoFlow?: import("styled-system").ResponsiveValue<import("csstype").Property.GridAutoFlow, Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>> | undefined;
+            gridAutoRows?: import("styled-system").ResponsiveValue<import("csstype").Property.GridAutoRows<import("styled-system").TLengthStyledSystem>, Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>> | undefined;
+            gridTemplateAreas?: import("styled-system").ResponsiveValue<import("csstype").Property.GridTemplateAreas, Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>> | undefined;
+            gridTemplateColumns?: import("styled-system").ResponsiveValue<import("csstype").Property.GridTemplateColumns<import("styled-system").TLengthStyledSystem>, Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>> | undefined;
+            gridTemplateRows?: import("styled-system").ResponsiveValue<import("csstype").Property.GridTemplateRows<import("styled-system").TLengthStyledSystem>, Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>> | undefined;
+            height?: import("styled-system").ResponsiveValue<import("csstype").Property.Height<import("styled-system").TLengthStyledSystem>, Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>> | undefined;
+            justifyContent?: import("styled-system").ResponsiveValue<import("csstype").Property.JustifyContent, Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>> | undefined;
+            justifyItems?: import("styled-system").ResponsiveValue<import("csstype").Property.JustifyItems, Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>> | undefined;
+            justifySelf?: import("styled-system").ResponsiveValue<import("csstype").Property.JustifySelf, Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>> | undefined;
+            left?: import("styled-system").ResponsiveValue<import("csstype").Property.Left<import("styled-system").TLengthStyledSystem>, Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>> | undefined;
+            letterSpacing?: import("styled-system").ResponsiveValue<string | number | symbol, Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>> | undefined;
+            marginBottom?: import("styled-system").ResponsiveValue<string | number | symbol, Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>> | undefined;
+            marginLeft?: import("styled-system").ResponsiveValue<string | number | symbol, Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>> | undefined;
+            marginRight?: import("styled-system").ResponsiveValue<string | number | symbol, Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>> | undefined;
+            marginTop?: import("styled-system").ResponsiveValue<string | number | symbol, Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>> | undefined;
+            maxHeight?: import("styled-system").ResponsiveValue<import("csstype").Property.MaxHeight<import("styled-system").TLengthStyledSystem>, Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>> | undefined;
+            maxWidth?: import("styled-system").ResponsiveValue<import("csstype").Property.MaxWidth<import("styled-system").TLengthStyledSystem>, Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>> | undefined;
+            minHeight?: import("styled-system").ResponsiveValue<import("csstype").Property.MinHeight<import("styled-system").TLengthStyledSystem>, Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>> | undefined;
+            minWidth?: import("styled-system").ResponsiveValue<import("csstype").Property.MinWidth<import("styled-system").TLengthStyledSystem>, Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>> | undefined;
+            opacity?: import("styled-system").ResponsiveValue<import("csstype").Property.Opacity, Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>> | undefined;
+            order?: import("styled-system").ResponsiveValue<import("csstype").Property.Order, Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>> | undefined;
+            overflowX?: import("styled-system").ResponsiveValue<import("csstype").Property.OverflowX, Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>> | undefined;
+            overflowY?: import("styled-system").ResponsiveValue<import("csstype").Property.OverflowY, Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>> | undefined;
+            paddingBottom?: import("styled-system").ResponsiveValue<string | number | symbol, Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>> | undefined;
+            paddingLeft?: import("styled-system").ResponsiveValue<string | number | symbol, Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>> | undefined;
+            paddingRight?: import("styled-system").ResponsiveValue<string | number | symbol, Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>> | undefined;
+            paddingTop?: import("styled-system").ResponsiveValue<string | number | symbol, Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>> | undefined;
+            position?: import("styled-system").ResponsiveValue<import("csstype").Property.Position, Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>> | undefined;
+            right?: import("styled-system").ResponsiveValue<import("csstype").Property.Right<import("styled-system").TLengthStyledSystem>, Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>> | undefined;
+            textAlign?: import("styled-system").ResponsiveValue<import("csstype").Property.TextAlign, Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>> | undefined;
+            textShadow?: import("styled-system").ResponsiveValue<number | import("csstype").Property.TextShadow, Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>> | undefined;
+            top?: import("styled-system").ResponsiveValue<import("csstype").Property.Top<import("styled-system").TLengthStyledSystem>, Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>> | undefined;
+            translate?: "yes" | "no" | undefined;
+            verticalAlign?: import("styled-system").ResponsiveValue<import("csstype").Property.VerticalAlign<import("styled-system").TLengthStyledSystem>, Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>> | undefined;
+            width?: import("styled-system").ResponsiveValue<import("csstype").Property.Width<import("styled-system").TLengthStyledSystem>, Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>> | undefined;
+            zIndex?: import("styled-system").ResponsiveValue<import("csstype").Property.ZIndex, Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>> | undefined;
+            background?: import("styled-system").ResponsiveValue<import("csstype").Property.Background<import("styled-system").TLengthStyledSystem>, Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>> | undefined;
+            backgroundPosition?: import("styled-system").ResponsiveValue<import("csstype").Property.BackgroundPosition<import("styled-system").TLengthStyledSystem>, Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>> | undefined;
+            borderBottom?: import("styled-system").ResponsiveValue<import("csstype").Property.BorderBottom<import("styled-system").TLengthStyledSystem>, Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>> | undefined;
+            borderColor?: import("styled-system").ResponsiveValue<string | number | symbol, Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>> | undefined;
+            borderLeft?: import("styled-system").ResponsiveValue<import("csstype").Property.BorderLeft<import("styled-system").TLengthStyledSystem>, Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>> | undefined;
+            borderRadius?: import("styled-system").ResponsiveValue<string | number | symbol, Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>> | undefined;
+            borderRight?: import("styled-system").ResponsiveValue<import("csstype").Property.BorderRight<import("styled-system").TLengthStyledSystem>, Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>> | undefined;
+            borderStyle?: import("styled-system").ResponsiveValue<import("csstype").Property.BorderStyle, Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>> | undefined;
+            borderTop?: import("styled-system").ResponsiveValue<import("csstype").Property.BorderTop<import("styled-system").TLengthStyledSystem>, Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>> | undefined;
+            borderWidth?: import("styled-system").ResponsiveValue<string | number | symbol, Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>> | undefined;
+            flex?: import("styled-system").ResponsiveValue<import("csstype").Property.Flex<import("styled-system").TLengthStyledSystem>, Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>> | undefined;
+            gridArea?: import("styled-system").ResponsiveValue<import("csstype").Property.GridArea, Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>> | undefined;
+            gridColumn?: import("styled-system").ResponsiveValue<import("csstype").Property.GridColumn, Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>> | undefined;
+            gridRow?: import("styled-system").ResponsiveValue<import("csstype").Property.GridRow, Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>> | undefined;
+            margin?: import("styled-system").ResponsiveValue<string | number | symbol, Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>> | undefined;
+            overflow?: import("styled-system").ResponsiveValue<import("csstype").Property.Overflow, Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>> | undefined;
+            padding?: import("styled-system").ResponsiveValue<string | number | symbol, Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>> | undefined;
+            gridColumnGap?: import("styled-system").ResponsiveValue<import("csstype").Property.GridColumnGap<import("styled-system").TLengthStyledSystem>, Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>> | undefined;
+            gridGap?: import("styled-system").ResponsiveValue<import("csstype").Property.GridGap<import("styled-system").TLengthStyledSystem>, Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>> | undefined;
+            gridRowGap?: import("styled-system").ResponsiveValue<import("csstype").Property.GridRowGap<import("styled-system").TLengthStyledSystem>, Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>> | undefined;
+            hidden?: boolean | undefined;
+            children?: React.ReactNode;
+            ref?: ((instance: HTMLDivElement | null) => void) | React.RefObject<HTMLDivElement> | null | undefined;
+            p?: import("styled-system").ResponsiveValue<string | number | symbol, Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>> | undefined;
+            slot?: string | undefined;
+            style?: React.CSSProperties | undefined;
+            title?: string | undefined;
+            bg?: import("styled-system").ResponsiveValue<string | number | symbol, Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>> | undefined;
+            m?: import("styled-system").ResponsiveValue<string | number | symbol, Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>> | undefined;
+            mt?: import("styled-system").ResponsiveValue<string | number | symbol, Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>> | undefined;
+            mr?: import("styled-system").ResponsiveValue<string | number | symbol, Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>> | undefined;
+            mb?: import("styled-system").ResponsiveValue<string | number | symbol, Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>> | undefined;
+            ml?: import("styled-system").ResponsiveValue<string | number | symbol, Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>> | undefined;
+            mx?: import("styled-system").ResponsiveValue<string | number | symbol, Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>> | undefined;
+            marginX?: import("styled-system").ResponsiveValue<string | number | symbol, Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>> | undefined;
+            my?: import("styled-system").ResponsiveValue<string | number | symbol, Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>> | undefined;
+            marginY?: import("styled-system").ResponsiveValue<string | number | symbol, Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>> | undefined;
+            pt?: import("styled-system").ResponsiveValue<string | number | symbol, Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>> | undefined;
+            pr?: import("styled-system").ResponsiveValue<string | number | symbol, Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>> | undefined;
+            pb?: import("styled-system").ResponsiveValue<string | number | symbol, Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>> | undefined;
+            pl?: import("styled-system").ResponsiveValue<string | number | symbol, Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>> | undefined;
+            px?: import("styled-system").ResponsiveValue<string | number | symbol, Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>> | undefined;
+            paddingX?: import("styled-system").ResponsiveValue<string | number | symbol, Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>> | undefined;
+            py?: import("styled-system").ResponsiveValue<string | number | symbol, Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>> | undefined;
+            paddingY?: import("styled-system").ResponsiveValue<string | number | symbol, Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>> | undefined;
+            size?: import("styled-system").ResponsiveValue<import("csstype").Property.Height<import("styled-system").TLengthStyledSystem>, Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>> | undefined;
+            sx?: import("./sx").BetterSystemStyleObject | undefined;
+            role?: React.AriaRole | undefined;
+            key?: React.Key | null | undefined;
+            defaultChecked?: boolean | undefined;
+            defaultValue?: string | number | readonly string[] | undefined;
+            suppressContentEditableWarning?: boolean | undefined;
+            suppressHydrationWarning?: boolean | undefined;
+            accessKey?: string | undefined;
+            className?: string | undefined;
+            contentEditable?: "inherit" | (boolean | "false" | "true") | undefined;
+            contextMenu?: string | undefined;
+            dir?: string | undefined;
+            draggable?: (boolean | "false" | "true") | undefined;
+            id?: string | undefined;
+            lang?: string | undefined;
+            placeholder?: string | undefined;
+            spellCheck?: (boolean | "false" | "true") | undefined;
+            tabIndex?: number | undefined;
+            radioGroup?: string | undefined;
+            about?: string | undefined;
+            datatype?: string | undefined;
+            inlist?: any;
+            prefix?: string | undefined;
+            property?: string | undefined;
+            resource?: string | undefined;
+            typeof?: string | undefined;
+            vocab?: string | undefined;
+            autoCapitalize?: string | undefined;
+            autoCorrect?: string | undefined;
+            autoSave?: string | undefined;
+            itemProp?: string | undefined;
+            itemScope?: boolean | undefined;
+            itemType?: string | undefined;
+            itemID?: string | undefined;
+            itemRef?: string | undefined;
+            results?: number | undefined;
+            security?: string | undefined;
+            unselectable?: "on" | "off" | undefined;
+            inputMode?: "search" | "none" | "text" | "tel" | "url" | "email" | "numeric" | "decimal" | undefined;
+            is?: string | undefined;
+            'aria-activedescendant'?: string | undefined;
+            'aria-atomic'?: boolean | "false" | "true" | undefined;
+            'aria-autocomplete'?: "none" | "both" | "inline" | "list" | undefined;
+            'aria-busy'?: boolean | "false" | "true" | undefined;
+            'aria-checked'?: boolean | "mixed" | "false" | "true" | undefined;
+            'aria-colcount'?: number | undefined;
+            'aria-colindex'?: number | undefined;
+            'aria-colspan'?: number | undefined;
+            'aria-controls'?: string | undefined;
+            'aria-current'?: boolean | "time" | "page" | "false" | "true" | "step" | "location" | "date" | undefined;
+            'aria-describedby'?: string | undefined;
+            'aria-details'?: string | undefined;
+            'aria-disabled'?: boolean | "false" | "true" | undefined;
+            'aria-dropeffect'?: "link" | "none" | "copy" | "move" | "execute" | "popup" | undefined;
+            'aria-errormessage'?: string | undefined;
+            'aria-expanded'?: boolean | "false" | "true" | undefined;
+            'aria-flowto'?: string | undefined;
+            'aria-grabbed'?: boolean | "false" | "true" | undefined;
+            'aria-haspopup'?: boolean | "grid" | "dialog" | "menu" | "listbox" | "false" | "true" | "tree" | undefined;
+            'aria-hidden'?: boolean | "false" | "true" | undefined;
+            'aria-invalid'?: boolean | "false" | "true" | "grammar" | "spelling" | undefined;
+            'aria-keyshortcuts'?: string | undefined;
+            'aria-label'?: string | undefined;
+            'aria-labelledby'?: string | undefined;
+            'aria-level'?: number | undefined;
+            'aria-live'?: "off" | "assertive" | "polite" | undefined;
+            'aria-modal'?: boolean | "false" | "true" | undefined;
+            'aria-multiline'?: boolean | "false" | "true" | undefined;
+            'aria-multiselectable'?: boolean | "false" | "true" | undefined;
+            'aria-orientation'?: "horizontal" | "vertical" | undefined;
+            'aria-owns'?: string | undefined;
+            'aria-placeholder'?: string | undefined;
+            'aria-posinset'?: number | undefined;
+            'aria-pressed'?: boolean | "mixed" | "false" | "true" | undefined;
+            'aria-readonly'?: boolean | "false" | "true" | undefined;
+            'aria-relevant'?: "all" | "text" | "additions" | "additions removals" | "additions text" | "removals" | "removals additions" | "removals text" | "text additions" | "text removals" | undefined;
+            'aria-required'?: boolean | "false" | "true" | undefined;
+            'aria-roledescription'?: string | undefined;
+            'aria-rowcount'?: number | undefined;
+            'aria-rowindex'?: number | undefined;
+            'aria-rowspan'?: number | undefined;
+            'aria-selected'?: boolean | "false" | "true" | undefined;
+            'aria-setsize'?: number | undefined;
+            'aria-sort'?: "none" | "ascending" | "descending" | "other" | undefined;
+            'aria-valuemax'?: number | undefined;
+            'aria-valuemin'?: number | undefined;
+            'aria-valuenow'?: number | undefined;
+            'aria-valuetext'?: string | undefined;
+            dangerouslySetInnerHTML?: {
+                __html: string;
+            } | undefined;
+            onCopy?: React.ClipboardEventHandler<HTMLDivElement> | undefined;
+            onCopyCapture?: React.ClipboardEventHandler<HTMLDivElement> | undefined;
+            onCut?: React.ClipboardEventHandler<HTMLDivElement> | undefined;
+            onCutCapture?: React.ClipboardEventHandler<HTMLDivElement> | undefined;
+            onPaste?: React.ClipboardEventHandler<HTMLDivElement> | undefined;
+            onPasteCapture?: React.ClipboardEventHandler<HTMLDivElement> | undefined;
+            onCompositionEnd?: React.CompositionEventHandler<HTMLDivElement> | undefined;
+            onCompositionEndCapture?: React.CompositionEventHandler<HTMLDivElement> | undefined;
+            onCompositionStart?: React.CompositionEventHandler<HTMLDivElement> | undefined;
+            onCompositionStartCapture?: React.CompositionEventHandler<HTMLDivElement> | undefined;
+            onCompositionUpdate?: React.CompositionEventHandler<HTMLDivElement> | undefined;
+            onCompositionUpdateCapture?: React.CompositionEventHandler<HTMLDivElement> | undefined;
+            onFocus?: React.FocusEventHandler<HTMLDivElement> | undefined;
+            onFocusCapture?: React.FocusEventHandler<HTMLDivElement> | undefined;
+            onBlur?: React.FocusEventHandler<HTMLDivElement> | undefined;
+            onBlurCapture?: React.FocusEventHandler<HTMLDivElement> | undefined;
+            onChange?: React.FormEventHandler<HTMLDivElement> | undefined;
+            onChangeCapture?: React.FormEventHandler<HTMLDivElement> | undefined;
+            onBeforeInput?: React.FormEventHandler<HTMLDivElement> | undefined;
+            onBeforeInputCapture?: React.FormEventHandler<HTMLDivElement> | undefined;
+            onInput?: React.FormEventHandler<HTMLDivElement> | undefined;
+            onInputCapture?: React.FormEventHandler<HTMLDivElement> | undefined;
+            onReset?: React.FormEventHandler<HTMLDivElement> | undefined;
+            onResetCapture?: React.FormEventHandler<HTMLDivElement> | undefined;
+            onSubmit?: React.FormEventHandler<HTMLDivElement> | undefined;
+            onSubmitCapture?: React.FormEventHandler<HTMLDivElement> | undefined;
+            onInvalid?: React.FormEventHandler<HTMLDivElement> | undefined;
+            onInvalidCapture?: React.FormEventHandler<HTMLDivElement> | undefined;
+            onLoad?: React.ReactEventHandler<HTMLDivElement> | undefined;
+            onLoadCapture?: React.ReactEventHandler<HTMLDivElement> | undefined;
+            onError?: React.ReactEventHandler<HTMLDivElement> | undefined;
+            onErrorCapture?: React.ReactEventHandler<HTMLDivElement> | undefined;
+            onKeyDown?: React.KeyboardEventHandler<HTMLDivElement> | undefined;
+            onKeyDownCapture?: React.KeyboardEventHandler<HTMLDivElement> | undefined;
+            onKeyPress?: React.KeyboardEventHandler<HTMLDivElement> | undefined;
+            onKeyPressCapture?: React.KeyboardEventHandler<HTMLDivElement> | undefined;
+            onKeyUp?: React.KeyboardEventHandler<HTMLDivElement> | undefined;
+            onKeyUpCapture?: React.KeyboardEventHandler<HTMLDivElement> | undefined;
+            onAbort?: React.ReactEventHandler<HTMLDivElement> | undefined;
+            onAbortCapture?: React.ReactEventHandler<HTMLDivElement> | undefined;
+            onCanPlay?: React.ReactEventHandler<HTMLDivElement> | undefined;
+            onCanPlayCapture?: React.ReactEventHandler<HTMLDivElement> | undefined;
+            onCanPlayThrough?: React.ReactEventHandler<HTMLDivElement> | undefined;
+            onCanPlayThroughCapture?: React.ReactEventHandler<HTMLDivElement> | undefined;
+            onDurationChange?: React.ReactEventHandler<HTMLDivElement> | undefined;
+            onDurationChangeCapture?: React.ReactEventHandler<HTMLDivElement> | undefined;
+            onEmptied?: React.ReactEventHandler<HTMLDivElement> | undefined;
+            onEmptiedCapture?: React.ReactEventHandler<HTMLDivElement> | undefined;
+            onEncrypted?: React.ReactEventHandler<HTMLDivElement> | undefined;
+            onEncryptedCapture?: React.ReactEventHandler<HTMLDivElement> | undefined;
+            onEnded?: React.ReactEventHandler<HTMLDivElement> | undefined;
+            onEndedCapture?: React.ReactEventHandler<HTMLDivElement> | undefined;
+            onLoadedData?: React.ReactEventHandler<HTMLDivElement> | undefined;
+            onLoadedDataCapture?: React.ReactEventHandler<HTMLDivElement> | undefined;
+            onLoadedMetadata?: React.ReactEventHandler<HTMLDivElement> | undefined;
+            onLoadedMetadataCapture?: React.ReactEventHandler<HTMLDivElement> | undefined;
+            onLoadStart?: React.ReactEventHandler<HTMLDivElement> | undefined;
+            onLoadStartCapture?: React.ReactEventHandler<HTMLDivElement> | undefined;
+            onPause?: React.ReactEventHandler<HTMLDivElement> | undefined;
+            onPauseCapture?: React.ReactEventHandler<HTMLDivElement> | undefined;
+            onPlay?: React.ReactEventHandler<HTMLDivElement> | undefined;
+            onPlayCapture?: React.ReactEventHandler<HTMLDivElement> | undefined;
+            onPlaying?: React.ReactEventHandler<HTMLDivElement> | undefined;
+            onPlayingCapture?: React.ReactEventHandler<HTMLDivElement> | undefined;
+            onProgress?: React.ReactEventHandler<HTMLDivElement> | undefined;
+            onProgressCapture?: React.ReactEventHandler<HTMLDivElement> | undefined;
+            onRateChange?: React.ReactEventHandler<HTMLDivElement> | undefined;
+            onRateChangeCapture?: React.ReactEventHandler<HTMLDivElement> | undefined;
+            onSeeked?: React.ReactEventHandler<HTMLDivElement> | undefined;
+            onSeekedCapture?: React.ReactEventHandler<HTMLDivElement> | undefined;
+            onSeeking?: React.ReactEventHandler<HTMLDivElement> | undefined;
+            onSeekingCapture?: React.ReactEventHandler<HTMLDivElement> | undefined;
+            onStalled?: React.ReactEventHandler<HTMLDivElement> | undefined;
+            onStalledCapture?: React.ReactEventHandler<HTMLDivElement> | undefined;
+            onSuspend?: React.ReactEventHandler<HTMLDivElement> | undefined;
+            onSuspendCapture?: React.ReactEventHandler<HTMLDivElement> | undefined;
+            onTimeUpdate?: React.ReactEventHandler<HTMLDivElement> | undefined;
+            onTimeUpdateCapture?: React.ReactEventHandler<HTMLDivElement> | undefined;
+            onVolumeChange?: React.ReactEventHandler<HTMLDivElement> | undefined;
+            onVolumeChangeCapture?: React.ReactEventHandler<HTMLDivElement> | undefined;
+            onWaiting?: React.ReactEventHandler<HTMLDivElement> | undefined;
+            onWaitingCapture?: React.ReactEventHandler<HTMLDivElement> | undefined;
+            onAuxClick?: React.MouseEventHandler<HTMLDivElement> | undefined;
+            onAuxClickCapture?: React.MouseEventHandler<HTMLDivElement> | undefined;
+            onClick?: React.MouseEventHandler<HTMLDivElement> | undefined;
+            onClickCapture?: React.MouseEventHandler<HTMLDivElement> | undefined;
+            onContextMenu?: React.MouseEventHandler<HTMLDivElement> | undefined;
+            onContextMenuCapture?: React.MouseEventHandler<HTMLDivElement> | undefined;
+            onDoubleClick?: React.MouseEventHandler<HTMLDivElement> | undefined;
+            onDoubleClickCapture?: React.MouseEventHandler<HTMLDivElement> | undefined;
+            onDrag?: React.DragEventHandler<HTMLDivElement> | undefined;
+            onDragCapture?: React.DragEventHandler<HTMLDivElement> | undefined;
+            onDragEnd?: React.DragEventHandler<HTMLDivElement> | undefined;
+            onDragEndCapture?: React.DragEventHandler<HTMLDivElement> | undefined;
+            onDragEnter?: React.DragEventHandler<HTMLDivElement> | undefined;
+            onDragEnterCapture?: React.DragEventHandler<HTMLDivElement> | undefined;
+            onDragExit?: React.DragEventHandler<HTMLDivElement> | undefined;
+            onDragExitCapture?: React.DragEventHandler<HTMLDivElement> | undefined;
+            onDragLeave?: React.DragEventHandler<HTMLDivElement> | undefined;
+            onDragLeaveCapture?: React.DragEventHandler<HTMLDivElement> | undefined;
+            onDragOver?: React.DragEventHandler<HTMLDivElement> | undefined;
+            onDragOverCapture?: React.DragEventHandler<HTMLDivElement> | undefined;
+            onDragStart?: React.DragEventHandler<HTMLDivElement> | undefined;
+            onDragStartCapture?: React.DragEventHandler<HTMLDivElement> | undefined;
+            onDrop?: React.DragEventHandler<HTMLDivElement> | undefined;
+            onDropCapture?: React.DragEventHandler<HTMLDivElement> | undefined;
+            onMouseDown?: React.MouseEventHandler<HTMLDivElement> | undefined;
+            onMouseDownCapture?: React.MouseEventHandler<HTMLDivElement> | undefined;
+            onMouseEnter?: React.MouseEventHandler<HTMLDivElement> | undefined;
+            onMouseLeave?: React.MouseEventHandler<HTMLDivElement> | undefined;
+            onMouseMove?: React.MouseEventHandler<HTMLDivElement> | undefined;
+            onMouseMoveCapture?: React.MouseEventHandler<HTMLDivElement> | undefined;
+            onMouseOut?: React.MouseEventHandler<HTMLDivElement> | undefined;
+            onMouseOutCapture?: React.MouseEventHandler<HTMLDivElement> | undefined;
+            onMouseOver?: React.MouseEventHandler<HTMLDivElement> | undefined;
+            onMouseOverCapture?: React.MouseEventHandler<HTMLDivElement> | undefined;
+            onMouseUp?: React.MouseEventHandler<HTMLDivElement> | undefined;
+            onMouseUpCapture?: React.MouseEventHandler<HTMLDivElement> | undefined;
+            onSelect?: React.ReactEventHandler<HTMLDivElement> | undefined;
+            onSelectCapture?: React.ReactEventHandler<HTMLDivElement> | undefined;
+            onTouchCancel?: React.TouchEventHandler<HTMLDivElement> | undefined;
+            onTouchCancelCapture?: React.TouchEventHandler<HTMLDivElement> | undefined;
+            onTouchEnd?: React.TouchEventHandler<HTMLDivElement> | undefined;
+            onTouchEndCapture?: React.TouchEventHandler<HTMLDivElement> | undefined;
+            onTouchMove?: React.TouchEventHandler<HTMLDivElement> | undefined;
+            onTouchMoveCapture?: React.TouchEventHandler<HTMLDivElement> | undefined;
+            onTouchStart?: React.TouchEventHandler<HTMLDivElement> | undefined;
+            onTouchStartCapture?: React.TouchEventHandler<HTMLDivElement> | undefined;
+            onPointerDown?: React.PointerEventHandler<HTMLDivElement> | undefined;
+            onPointerDownCapture?: React.PointerEventHandler<HTMLDivElement> | undefined;
+            onPointerMove?: React.PointerEventHandler<HTMLDivElement> | undefined;
+            onPointerMoveCapture?: React.PointerEventHandler<HTMLDivElement> | undefined;
+            onPointerUp?: React.PointerEventHandler<HTMLDivElement> | undefined;
+            onPointerUpCapture?: React.PointerEventHandler<HTMLDivElement> | undefined;
+            onPointerCancel?: React.PointerEventHandler<HTMLDivElement> | undefined;
+            onPointerCancelCapture?: React.PointerEventHandler<HTMLDivElement> | undefined;
+            onPointerEnter?: React.PointerEventHandler<HTMLDivElement> | undefined;
+            onPointerEnterCapture?: React.PointerEventHandler<HTMLDivElement> | undefined;
+            onPointerLeave?: React.PointerEventHandler<HTMLDivElement> | undefined;
+            onPointerLeaveCapture?: React.PointerEventHandler<HTMLDivElement> | undefined;
+            onPointerOver?: React.PointerEventHandler<HTMLDivElement> | undefined;
+            onPointerOverCapture?: React.PointerEventHandler<HTMLDivElement> | undefined;
+            onPointerOut?: React.PointerEventHandler<HTMLDivElement> | undefined;
+            onPointerOutCapture?: React.PointerEventHandler<HTMLDivElement> | undefined;
+            onGotPointerCapture?: React.PointerEventHandler<HTMLDivElement> | undefined;
+            onGotPointerCaptureCapture?: React.PointerEventHandler<HTMLDivElement> | undefined;
+            onLostPointerCapture?: React.PointerEventHandler<HTMLDivElement> | undefined;
+            onLostPointerCaptureCapture?: React.PointerEventHandler<HTMLDivElement> | undefined;
+            onScroll?: React.UIEventHandler<HTMLDivElement> | undefined;
+            onScrollCapture?: React.UIEventHandler<HTMLDivElement> | undefined;
+            onWheel?: React.WheelEventHandler<HTMLDivElement> | undefined;
+            onWheelCapture?: React.WheelEventHandler<HTMLDivElement> | undefined;
+            onAnimationStart?: React.AnimationEventHandler<HTMLDivElement> | undefined;
+            onAnimationStartCapture?: React.AnimationEventHandler<HTMLDivElement> | undefined;
+            onAnimationEnd?: React.AnimationEventHandler<HTMLDivElement> | undefined;
+            onAnimationEndCapture?: React.AnimationEventHandler<HTMLDivElement> | undefined;
+            onAnimationIteration?: React.AnimationEventHandler<HTMLDivElement> | undefined;
+            onAnimationIterationCapture?: React.AnimationEventHandler<HTMLDivElement> | undefined;
+            onTransitionEnd?: React.TransitionEventHandler<HTMLDivElement> | undefined;
+            onTransitionEndCapture?: React.TransitionEventHandler<HTMLDivElement> | undefined;
+            borderX?: import("styled-system").ResponsiveValue<import("csstype").Property.Border<import("styled-system").TLengthStyledSystem>, Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>> | undefined;
+            borderY?: import("styled-system").ResponsiveValue<import("csstype").Property.Border<import("styled-system").TLengthStyledSystem>, Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>> | undefined;
+        } & {
+            theme?: any;
+        }): JSX.Element;
         displayName: string;
     };
-    Body: import("styled-components").StyledComponent<"div", any, SxProp, never>;
-    Break: import("styled-components").StyledComponent<"div", any, SxProp, never>;
+    Body: import("styled-components").StyledComponent<"div", any, import("styled-system").SpaceProps<Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>, string | number | symbol> & import("styled-system").ColorProps<Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>, string | number | symbol> & import("styled-system").TypographyProps<Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>> & import("styled-system").LayoutProps<Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>> & import("styled-system").FlexboxProps<Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>> & import("styled-system").GridProps<Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>> & import("styled-system").BackgroundProps<Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>, import("csstype").Property.Background<import("styled-system").TLengthStyledSystem>> & import("styled-system").BorderProps<Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>, import("csstype").Property.Border<import("styled-system").TLengthStyledSystem>> & import("styled-system").PositionProps<Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>> & import("styled-system").ShadowProps<Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>> & import("./sx").SxProp, never>;
+    Break: import("styled-components").StyledComponent<"div", any, import("styled-system").SpaceProps<Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>, string | number | symbol> & import("styled-system").ColorProps<Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>, string | number | symbol> & import("styled-system").TypographyProps<Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>> & import("styled-system").LayoutProps<Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>> & import("styled-system").FlexboxProps<Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>> & import("styled-system").GridProps<Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>> & import("styled-system").BackgroundProps<Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>, import("csstype").Property.Background<import("styled-system").TLengthStyledSystem>> & import("styled-system").BorderProps<Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>, import("csstype").Property.Border<import("styled-system").TLengthStyledSystem>> & import("styled-system").PositionProps<Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>> & import("styled-system").ShadowProps<Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>> & import("./sx").SxProp, never>;
 };
 export default _default;