@primer/components 0.0.0-2021102918546 → 0.0.0-202110303104

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;

package/lib-esm/Timeline.js

@@ -1,27 +1,29 @@
+function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
+
 import classnames from 'classnames';
 import React from 'react';
 import styled, { css } from 'styled-components';
-import { Box } from '.';
-import { get } from './constants';
+import Box from './Box';
+import { COMMON, get } from './constants';
 import sx from './sx';
-const Timeline = styled.div.withConfig({
+const Timeline = styled(Box).withConfig({
   displayName: "Timeline",
   componentId: "c4dq2e-0"
 })(["display:flex;flex-direction:column;", " ", ";"], props => props.clipSidebar && css([".Timeline-Item:first-child{padding-top:0;}.Timeline-Item:last-child{padding-bottom:0;}"]), sx);
-const TimelineItem = styled.div.attrs(props => ({
+const TimelineItem = styled(Box).attrs(props => ({
   className: classnames('Timeline-Item', props.className)
 })).withConfig({
   displayName: "Timeline__TimelineItem",
   componentId: "c4dq2e-1"
-})(["display:flex;position:relative;padding:", " 0;margin-left:", ";&::before{position:absolute;top:0;bottom:0;left:0;display:block;width:2px;content:'';background-color:", ";}", " ", ";"], get('space.3'), get('space.3'), get('colors.border.muted'), props => props.condensed && css(["padding-top:", ";padding-bottom:0;&:last-child{padding-bottom:", ";}.TimelineItem-Badge{height:16px;margin-top:", ";margin-bottom:", ";color:", ";background-color:", ";border:0;}"], get('space.1'), get('space.3'), get('space.2'), get('space.2'), get('colors.fg.muted'), get('colors.canvas.default')), sx);
+})(["display:flex;position:relative;padding:", " 0;margin-left:", ";&::before{position:absolute;top:0;bottom:0;left:0;display:block;width:2px;content:'';background-color:", ";}", " ", ";", ";"], get('space.3'), get('space.3'), get('colors.border.muted'), props => props.condensed && css(["padding-top:", ";padding-bottom:0;&:last-child{padding-bottom:", ";}.TimelineItem-Badge{height:16px;margin-top:", ";margin-bottom:", ";color:", ";background-color:", ";border:0;}"], get('space.1'), get('space.3'), get('space.2'), get('space.2'), get('colors.fg.muted'), get('colors.canvas.default')), COMMON, sx);
 
 const TimelineBadge = props => {
   return /*#__PURE__*/React.createElement(Box, {
     position: "relative",
     zIndex: 1
-  }, /*#__PURE__*/React.createElement(Box, {
+  }, /*#__PURE__*/React.createElement(Box, _extends({
     display: "flex",
-    className: "TimelineItem-Badge",
+    className: classnames(props.className, 'TimelineItem-Badge'),
     flexShrink: 0,
     borderRadius: "50%",
     borderWidth: "2px",
@@ -35,17 +37,16 @@ const TimelineBadge = props => {
     mr: 2,
     ml: "-15px",
     alignItems: "center",
-    justifyContent: "center",
-    sx: props.sx
-  }, props.children));
+    justifyContent: "center"
+  }, props), props.children));
 };
 
 TimelineBadge.displayName = "TimelineBadge";
-const TimelineBody = styled.div.withConfig({
+const TimelineBody = styled(Box).withConfig({
   displayName: "Timeline__TimelineBody",
   componentId: "c4dq2e-2"
 })(["min-width:0;max-width:100%;margin-top:", ";color:", ";flex:auto;font-size:", ";", ";"], get('space.1'), get('colors.fg.muted'), get('fontSizes.1'), sx);
-const TimelineBreak = styled.div.withConfig({
+const TimelineBreak = styled(Box).withConfig({
   displayName: "Timeline__TimelineBreak",
   componentId: "c4dq2e-3"
 })(["position:relative z-index:1;height:24px;margin:0;margin-bottom:-", ";margin-left:0;background-color:", ";border:0;border-top:", " solid ", ";", ";"], get('space.3'), get('colors.canvas.default'), get('space.1'), get('colors.border.default'), sx);