@primer/components 31.2.1-rc.a088bdc0 → 32.0.0

package/lib/Timeline.d.ts

@@ -1,407 +1,33 @@
 /// <reference types="hoist-non-react-statics" />
 import React from 'react';
-import { BoxProps } from './Box';
+import { SxProp } from './sx';
 import { ComponentProps } from './utils/types';
-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 & {
+declare const Timeline: import("styled-components").StyledComponent<"div", any, {
     clipSidebar?: boolean | undefined;
-}, 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>;
+} & 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>;
 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, 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 & {
+declare const _default: string & import("styled-components").StyledComponentBase<"div", any, {
     clipSidebar?: boolean | undefined;
-}, 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>;
+} & SxProp, never> & import("hoist-non-react-statics").NonReactStatics<never, {}> & {
+    Item: import("styled-components").StyledComponent<"div", any, {
+        condensed?: boolean | undefined;
+    } & SxProp, never>;
     Badge: {
-        (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;
-            role?: React.AriaRole | undefined;
-            sx?: import("./sx").BetterSystemStyleObject | 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;
+        (props: TimelineBadgeProps): JSX.Element;
         displayName: string;
     };
-    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>;
+    Body: import("styled-components").StyledComponent<"div", any, SxProp, never>;
+    Break: import("styled-components").StyledComponent<"div", any, SxProp, never>;
 };
 export default _default;

package/lib/Timeline.js

@@ -11,7 +11,7 @@ var _react = _interopRequireDefault(require("react"));
 
 var _styledComponents = _interopRequireWildcard(require("styled-components"));
 
-var _Box = _interopRequireDefault(require("./Box"));
+var _ = require(".");
 
 var _constants = require("./constants");
 
@@ -23,26 +23,25 @@ function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj &&
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
-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); }
-
-const Timeline = (0, _styledComponents.default)(_Box.default).withConfig({
+const Timeline = _styledComponents.default.div.withConfig({
   displayName: "Timeline",
   componentId: "c4dq2e-0"
 })(["display:flex;flex-direction:column;", " ", ";"], props => props.clipSidebar && (0, _styledComponents.css)([".Timeline-Item:first-child{padding-top:0;}.Timeline-Item:last-child{padding-bottom:0;}"]), _sx.default);
-const TimelineItem = (0, _styledComponents.default)(_Box.default).attrs(props => ({
+
+const TimelineItem = _styledComponents.default.div.attrs(props => ({
   className: (0, _classnames.default)('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:", ";}", " ", ";", ";"], (0, _constants.get)('space.3'), (0, _constants.get)('space.3'), (0, _constants.get)('colors.border.muted'), props => props.condensed && (0, _styledComponents.css)(["padding-top:", ";padding-bottom:0;&:last-child{padding-bottom:", ";}.TimelineItem-Badge{height:16px;margin-top:", ";margin-bottom:", ";color:", ";background-color:", ";border:0;}"], (0, _constants.get)('space.1'), (0, _constants.get)('space.3'), (0, _constants.get)('space.2'), (0, _constants.get)('space.2'), (0, _constants.get)('colors.fg.muted'), (0, _constants.get)('colors.canvas.default')), _constants.COMMON, _sx.default);
+})(["display:flex;position:relative;padding:", " 0;margin-left:", ";&::before{position:absolute;top:0;bottom:0;left:0;display:block;width:2px;content:'';background-color:", ";}", " ", ";"], (0, _constants.get)('space.3'), (0, _constants.get)('space.3'), (0, _constants.get)('colors.border.muted'), props => props.condensed && (0, _styledComponents.css)(["padding-top:", ";padding-bottom:0;&:last-child{padding-bottom:", ";}.TimelineItem-Badge{height:16px;margin-top:", ";margin-bottom:", ";color:", ";background-color:", ";border:0;}"], (0, _constants.get)('space.1'), (0, _constants.get)('space.3'), (0, _constants.get)('space.2'), (0, _constants.get)('space.2'), (0, _constants.get)('colors.fg.muted'), (0, _constants.get)('colors.canvas.default')), _sx.default);
 
 const TimelineBadge = props => {
-  return /*#__PURE__*/_react.default.createElement(_Box.default, {
+  return /*#__PURE__*/_react.default.createElement(_.Box, {
     position: "relative",
     zIndex: 1
-  }, /*#__PURE__*/_react.default.createElement(_Box.default, _extends({
+  }, /*#__PURE__*/_react.default.createElement(_.Box, {
     display: "flex",
-    className: (0, _classnames.default)(props.className, 'TimelineItem-Badge'),
+    className: "TimelineItem-Badge",
     flexShrink: 0,
     borderRadius: "50%",
     borderWidth: "2px",
@@ -56,19 +55,23 @@ const TimelineBadge = props => {
     mr: 2,
     ml: "-15px",
     alignItems: "center",
-    justifyContent: "center"
-  }, props), props.children));
+    justifyContent: "center",
+    sx: props.sx
+  }, props.children));
 };
 
 TimelineBadge.displayName = "TimelineBadge";
-const TimelineBody = (0, _styledComponents.default)(_Box.default).withConfig({
+
+const TimelineBody = _styledComponents.default.div.withConfig({
   displayName: "Timeline__TimelineBody",
   componentId: "c4dq2e-2"
 })(["min-width:0;max-width:100%;margin-top:", ";color:", ";flex:auto;font-size:", ";", ";"], (0, _constants.get)('space.1'), (0, _constants.get)('colors.fg.muted'), (0, _constants.get)('fontSizes.1'), _sx.default);
-const TimelineBreak = (0, _styledComponents.default)(_Box.default).withConfig({
+
+const TimelineBreak = _styledComponents.default.div.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 ", ";", ";"], (0, _constants.get)('space.3'), (0, _constants.get)('colors.canvas.default'), (0, _constants.get)('space.1'), (0, _constants.get)('colors.border.default'), _sx.default);
+
 TimelineItem.displayName = 'Timeline.Item';
 TimelineBadge.displayName = 'Timeline.Badge';
 TimelineBody.displayName = 'Timeline.Body';