@primer/components 0.0.0-2021119233622 → 0.0.0-20211196522

package/lib-esm/Dialog.d.ts

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

package/lib-esm/Dialog.js

@@ -1,33 +1,36 @@
 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 React, { useRef, forwardRef } from 'react';
-import PropTypes from 'prop-types';
+import React, { forwardRef, useRef } from 'react';
 import styled from 'styled-components';
-import { COMMON, LAYOUT, get } from './constants';
-import theme from './theme';
-import sx from './sx';
-import Text from './Text';
-import Flex from './Flex';
 import ButtonClose from './Button/ButtonClose';
+import { get } from './constants';
+import Box from './Box';
 import useDialog from './hooks/useDialog';
-const StyledDialog = styled.div.withConfig({
-  displayName: "Dialog__StyledDialog",
-  componentId: "dh15lb-0"
-})(["box-shadow:0px 4px 32px rgba(0,0,0,0.35);border-radius:", ";position:fixed;top:0;left:50%;transform:translateX(-50%);max-height:80vh;z-index:999;margin:10vh auto;background-color:", ";width:", ";outline:none;@media screen and (max-width:750px){width:100vw;margin:0;border-radius:0;height:100vh;}", ";", ";", ";"], get('radii.2'), get('colors.white'), props => props.narrow ? '320px' : props.wide ? '640px' : '440px', LAYOUT, COMMON, sx);
-const DialogHeaderBase = styled(Flex).withConfig({
+import sx from './sx';
+import Text from './Text';
+import { useCombinedRefs } from './hooks/useCombinedRefs';
+
+const noop = () => null;
+
+const DialogBase = styled.div.withConfig({
+  displayName: "Dialog__DialogBase",
+  componentId: "sc-1vcjhsg-0"
+})(["box-shadow:", ";border-radius:", ";position:fixed;top:0;left:50%;transform:translateX(-50%);max-height:80vh;z-index:999;margin:10vh auto;background-color:", ";width:", ";outline:none;@media screen and (max-width:750px){width:100vw;margin:0;border-radius:0;height:100vh;}", ";"], get('shadows.shadow.large'), get('radii.2'), get('colors.canvas.default'), props => props.narrow ? '320px' : props.wide ? '640px' : '440px', sx);
+const DialogHeaderBase = styled(Box).withConfig({
   displayName: "Dialog__DialogHeaderBase",
-  componentId: "dh15lb-1"
-})(["border-radius:4px 4px 0px 0px;border-bottom:1px solid #dad5da;@media screen and (max-width:750px){border-radius:0px;}", ";"], sx);
+  componentId: "sc-1vcjhsg-1"
+})(["border-radius:", " ", " 0px 0px;border-bottom:1px solid ", ";display:flex;@media screen and (max-width:750px){border-radius:0px;}", ";"], get('radii.2'), get('radii.2'), get('colors.border.default'), sx);
 
 function DialogHeader({
   theme,
   children,
+  backgroundColor = 'gray.1',
   ...rest
 }) {
   if (React.Children.toArray(children).every(ch => typeof ch === 'string')) {
     children = /*#__PURE__*/React.createElement(Text, {
       theme: theme,
-      color: "gray.9",
+      color: "fg.default",
       fontSize: 1,
       fontWeight: "bold",
       fontFamily: "sans-serif"
@@ -36,26 +39,26 @@ function DialogHeader({
 
   return /*#__PURE__*/React.createElement(DialogHeaderBase, _extends({
     theme: theme,
-    p: 3
+    p: 3,
+    backgroundColor: backgroundColor
   }, rest), children);
 }
 
 DialogHeader.displayName = "DialogHeader";
 const Overlay = styled.span.withConfig({
   displayName: "Dialog__Overlay",
-  componentId: "dh15lb-2"
-})(["&:before{position:fixed;top:0;right:0;bottom:0;left:0;z-index:80;display:block;cursor:default;content:' ';background:transparent;z-index:99;background:rgba(27,31,35,0.5);}"]);
-const Dialog = forwardRef(({
+  componentId: "sc-1vcjhsg-2"
+})(["&:before{position:fixed;top:0;right:0;bottom:0;left:0;display:block;cursor:default;content:' ';background:transparent;z-index:99;background:", ";}"], get('colors.primer.canvas.backdrop'));
+const Dialog = /*#__PURE__*/forwardRef(({
   children,
-  onDismiss,
+  onDismiss = noop,
   isOpen,
   initialFocusRef,
   returnFocusRef,
   ...props
 }, forwardedRef) => {
-  const backupRef = useRef(null);
   const overlayRef = useRef(null);
-  const modalRef = forwardedRef !== null && forwardedRef !== void 0 ? forwardedRef : backupRef;
+  const modalRef = useCombinedRefs(forwardedRef);
   const closeButtonRef = useRef(null);
 
   const onCloseClick = () => {
@@ -79,7 +82,7 @@ const Dialog = forwardRef(({
   });
   return isOpen ? /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(Overlay, {
     ref: overlayRef
-  }), /*#__PURE__*/React.createElement(StyledDialog, _extends({
+  }), /*#__PURE__*/React.createElement(DialogBase, _extends({
     tabIndex: -1,
     ref: modalRef,
     role: "dialog",
@@ -94,31 +97,13 @@ const Dialog = forwardRef(({
     }
   }), children)) : null;
 });
-Dialog.defaultProps = {
-  theme
-};
-Dialog.propTypes = { ...COMMON.propTypes,
-  ...LAYOUT.propTypes,
-  initialFocusRef: PropTypes.oneOfType([PropTypes.func, PropTypes.shape({
-    current: PropTypes.any
-  })]),
-  isOpen: PropTypes.bool.isRequired,
-  narrow: PropTypes.bool,
-  onDismiss: PropTypes.func.isRequired,
-  ...sx.propTypes,
-  returnFocusRef: PropTypes.oneOfType([PropTypes.func, PropTypes.shape({
-    current: PropTypes.any
-  })]),
-  theme: PropTypes.object,
-  wide: PropTypes.bool
-};
 DialogHeader.defaultProps = {
-  backgroundColor: 'gray.1',
-  theme
+  backgroundColor: 'canvas.subtle'
 };
-DialogHeader.propTypes = { ...Flex.propTypes
+DialogHeader.propTypes = { ...Box.propTypes
 };
 DialogHeader.displayName = 'Dialog.Header';
 Dialog.displayName = 'Dialog';
-Dialog.Header = DialogHeader;
-export default Dialog;
+export default Object.assign(Dialog, {
+  Header: DialogHeader
+});