Interface ImageProps

interface ImageProps {
    about?: string;
    accessKey?: string;
    alignContent: ResponsiveStyleValue<(readonly string[] | AlignContent | undefined)> | ((theme: Theme) => ResponsiveStyleValue<(readonly string[] | AlignContent | undefined)>);
    alignItems: ResponsiveStyleValue<(readonly string[] | AlignItems | undefined)> | ((theme: Theme) => ResponsiveStyleValue<(readonly string[] | AlignItems | undefined)>);
    alignSelf: ResponsiveStyleValue<(readonly string[] | AlignSelf | undefined)> | ((theme: Theme) => ResponsiveStyleValue<(readonly string[] | AlignSelf | undefined)>);
    alt: string;
    aria-activedescendant?: string;
    aria-atomic?: Booleanish;
    aria-autocomplete?:
        | "none"
        | "list"
        | "both"
        | "inline";
    aria-braillelabel?: string;
    aria-brailleroledescription?: string;
    aria-busy?: Booleanish;
    aria-checked?:
        | boolean
        | "mixed"
        | "false"
        | "true";
    aria-colcount?: number;
    aria-colindex?: number;
    aria-colindextext?: string;
    aria-colspan?: number;
    aria-controls?: string;
    aria-current?:
        | boolean
        | "page"
        | "time"
        | "step"
        | "false"
        | "true"
        | "location"
        | "date";
    aria-describedby?: string;
    aria-description?: string;
    aria-details?: string;
    aria-disabled?: Booleanish;
    aria-dropeffect?:
        | "link"
        | "none"
        | "copy"
        | "move"
        | "execute"
        | "popup";
    aria-errormessage?: string;
    aria-expanded?: Booleanish;
    aria-flowto?: string;
    aria-grabbed?: Booleanish;
    aria-haspopup?:
        | boolean
        | "menu"
        | "grid"
        | "dialog"
        | "listbox"
        | "false"
        | "true"
        | "tree";
    aria-hidden?: Booleanish;
    aria-invalid?:
        | boolean
        | "false"
        | "true"
        | "grammar"
        | "spelling";
    aria-keyshortcuts?: string;
    aria-label?: string;
    aria-labelledby?: string;
    aria-level?: number;
    aria-live?: "assertive" | "polite" | "off";
    aria-modal?: Booleanish;
    aria-multiline?: Booleanish;
    aria-multiselectable?: Booleanish;
    aria-orientation?: "horizontal" | "vertical";
    aria-owns?: string;
    aria-placeholder?: string;
    aria-posinset?: number;
    aria-pressed?:
        | boolean
        | "mixed"
        | "false"
        | "true";
    aria-readonly?: Booleanish;
    aria-relevant?:
        | "all"
        | "text"
        | "additions"
        | "additions removals"
        | "additions text"
        | "removals"
        | "removals additions"
        | "removals text"
        | "text additions"
        | "text removals";
    aria-required?: Booleanish;
    aria-roledescription?: string;
    aria-rowcount?: number;
    aria-rowindex?: number;
    aria-rowindextext?: string;
    aria-rowspan?: number;
    aria-selected?: Booleanish;
    aria-setsize?: number;
    aria-sort?:
        | "none"
        | "other"
        | "ascending"
        | "descending";
    aria-valuemax?: number;
    aria-valuemin?: number;
    aria-valuenow?: number;
    aria-valuetext?: string;
    aspectRatio?: number;
    autoCapitalize?:
        | string & {}
        | "none"
        | "on"
        | "off"
        | "sentences"
        | "words"
        | "characters";
    autoCorrect?: string;
    autoFocus?: boolean;
    autoSave?: string;
    bgcolor: ResponsiveStyleValue<(readonly string[] | BackgroundColor | undefined)> | ((theme: Theme) => ResponsiveStyleValue<(readonly string[] | BackgroundColor | undefined)>);
    border: ResponsiveStyleValue<
        | undefined
        | number
        | string & {}
        | "inset"
        | "none"
        | "Menu"
        | "hidden"
        | "medium"
        | "-moz-initial"
        | "inherit"
        | "initial"
        | "revert"
        | "revert-layer"
        | "unset"
        | "aliceblue"
        | "antiquewhite"
        | "aqua"
        | "aquamarine"
        | "azure"
        | "beige"
        | "bisque"
        | "black"
        | "blanchedalmond"
        | "blue"
        | "blueviolet"
        | "brown"
        | "burlywood"
        | "cadetblue"
        | "chartreuse"
        | "chocolate"
        | "coral"
        | "cornflowerblue"
        | "cornsilk"
        | "crimson"
        | "cyan"
        | "darkblue"
        | "darkcyan"
        | "darkgoldenrod"
        | "darkgray"
        | "darkgreen"
        | "darkgrey"
        | "darkkhaki"
        | "darkmagenta"
        | "darkolivegreen"
        | "darkorange"
        | "darkorchid"
        | "darkred"
        | "darksalmon"
        | "darkseagreen"
        | "darkslateblue"
        | "darkslategray"
        | "darkslategrey"
        | "darkturquoise"
        | "darkviolet"
        | "deeppink"
        | "deepskyblue"
        | "dimgray"
        | "dimgrey"
        | "dodgerblue"
        | "firebrick"
        | "floralwhite"
        | "forestgreen"
        | "fuchsia"
        | "gainsboro"
        | "ghostwhite"
        | "gold"
        | "goldenrod"
        | "gray"
        | "green"
        | "greenyellow"
        | "grey"
        | "honeydew"
        | "hotpink"
        | "indianred"
        | "indigo"
        | "ivory"
        | "khaki"
        | "lavender"
        | "lavenderblush"
        | "lawngreen"
        | "lemonchiffon"
        | "lightblue"
        | "lightcoral"
        | "lightcyan"
        | "lightgoldenrodyellow"
        | "lightgray"
        | "lightgreen"
        | "lightgrey"
        | "lightpink"
        | "lightsalmon"
        | "lightseagreen"
        | "lightskyblue"
        | "lightslategray"
        | "lightslategrey"
        | "lightsteelblue"
        | "lightyellow"
        | "lime"
        | "limegreen"
        | "linen"
        | "magenta"
        | "maroon"
        | "mediumaquamarine"
        | "mediumblue"
        | "mediumorchid"
        | "mediumpurple"
        | "mediumseagreen"
        | "mediumslateblue"
        | "mediumspringgreen"
        | "mediumturquoise"
        | "mediumvioletred"
        | "midnightblue"
        | "mintcream"
        | "mistyrose"
        | "moccasin"
        | "navajowhite"
        | "navy"
        | "oldlace"
        | "olive"
        | "olivedrab"
        | "orange"
        | "orangered"
        | "orchid"
        | "palegoldenrod"
        | "palegreen"
        | "paleturquoise"
        | "palevioletred"
        | "papayawhip"
        | "peachpuff"
        | "peru"
        | "pink"
        | "plum"
        | "powderblue"
        | "purple"
        | "rebeccapurple"
        | "red"
        | "rosybrown"
        | "royalblue"
        | "saddlebrown"
        | "salmon"
        | "sandybrown"
        | "seagreen"
        | "seashell"
        | "sienna"
        | "silver"
        | "skyblue"
        | "slateblue"
        | "slategray"
        | "slategrey"
        | "snow"
        | "springgreen"
        | "steelblue"
        | "tan"
        | "teal"
        | "thistle"
        | "tomato"
        | "transparent"
        | "turquoise"
        | "violet"
        | "wheat"
        | "white"
        | "whitesmoke"
        | "yellow"
        | "yellowgreen"
        | "ActiveBorder"
        | "ActiveCaption"
        | "AppWorkspace"
        | "Background"
        | "ButtonFace"
        | "ButtonHighlight"
        | "ButtonShadow"
        | "ButtonText"
        | "CaptionText"
        | "GrayText"
        | "Highlight"
        | "HighlightText"
        | "InactiveBorder"
        | "InactiveCaption"
        | "InactiveCaptionText"
        | "InfoBackground"
        | "InfoText"
        | "MenuText"
        | "Scrollbar"
        | "ThreeDDarkShadow"
        | "ThreeDFace"
        | "ThreeDHighlight"
        | "ThreeDLightShadow"
        | "ThreeDShadow"
        | "Window"
        | "WindowFrame"
        | "WindowText"
        | "currentcolor"
        | "thick"
        | "thin"
        | "dashed"
        | "dotted"
        | "double"
        | "groove"
        | "outset"
        | "ridge"
        | "solid"> | ((theme: Theme) => ResponsiveStyleValue<
        | undefined
        | number
        | string & {}
        | "inset"
        | "none"
        | "Menu"
        | "hidden"
        | "medium"
        | "-moz-initial"
        | "inherit"
        | "initial"
        | "revert"
        | "revert-layer"
        | "unset"
        | "aliceblue"
        | "antiquewhite"
        | "aqua"
        | "aquamarine"
        | "azure"
        | "beige"
        | "bisque"
        | "black"
        | "blanchedalmond"
        | "blue"
        | "blueviolet"
        | "brown"
        | "burlywood"
        | "cadetblue"
        | "chartreuse"
        | "chocolate"
        | "coral"
        | "cornflowerblue"
        | "cornsilk"
        | "crimson"
        | "cyan"
        | "darkblue"
        | "darkcyan"
        | "darkgoldenrod"
        | "darkgray"
        | "darkgreen"
        | "darkgrey"
        | "darkkhaki"
        | "darkmagenta"
        | "darkolivegreen"
        | "darkorange"
        | "darkorchid"
        | "darkred"
        | "darksalmon"
        | "darkseagreen"
        | "darkslateblue"
        | "darkslategray"
        | "darkslategrey"
        | "darkturquoise"
        | "darkviolet"
        | "deeppink"
        | "deepskyblue"
        | "dimgray"
        | "dimgrey"
        | "dodgerblue"
        | "firebrick"
        | "floralwhite"
        | "forestgreen"
        | "fuchsia"
        | "gainsboro"
        | "ghostwhite"
        | "gold"
        | "goldenrod"
        | "gray"
        | "green"
        | "greenyellow"
        | "grey"
        | "honeydew"
        | "hotpink"
        | "indianred"
        | "indigo"
        | "ivory"
        | "khaki"
        | "lavender"
        | "lavenderblush"
        | "lawngreen"
        | "lemonchiffon"
        | "lightblue"
        | "lightcoral"
        | "lightcyan"
        | "lightgoldenrodyellow"
        | "lightgray"
        | "lightgreen"
        | "lightgrey"
        | "lightpink"
        | "lightsalmon"
        | "lightseagreen"
        | "lightskyblue"
        | "lightslategray"
        | "lightslategrey"
        | "lightsteelblue"
        | "lightyellow"
        | "lime"
        | "limegreen"
        | "linen"
        | "magenta"
        | "maroon"
        | "mediumaquamarine"
        | "mediumblue"
        | "mediumorchid"
        | "mediumpurple"
        | "mediumseagreen"
        | "mediumslateblue"
        | "mediumspringgreen"
        | "mediumturquoise"
        | "mediumvioletred"
        | "midnightblue"
        | "mintcream"
        | "mistyrose"
        | "moccasin"
        | "navajowhite"
        | "navy"
        | "oldlace"
        | "olive"
        | "olivedrab"
        | "orange"
        | "orangered"
        | "orchid"
        | "palegoldenrod"
        | "palegreen"
        | "paleturquoise"
        | "palevioletred"
        | "papayawhip"
        | "peachpuff"
        | "peru"
        | "pink"
        | "plum"
        | "powderblue"
        | "purple"
        | "rebeccapurple"
        | "red"
        | "rosybrown"
        | "royalblue"
        | "saddlebrown"
        | "salmon"
        | "sandybrown"
        | "seagreen"
        | "seashell"
        | "sienna"
        | "silver"
        | "skyblue"
        | "slateblue"
        | "slategray"
        | "slategrey"
        | "snow"
        | "springgreen"
        | "steelblue"
        | "tan"
        | "teal"
        | "thistle"
        | "tomato"
        | "transparent"
        | "turquoise"
        | "violet"
        | "wheat"
        | "white"
        | "whitesmoke"
        | "yellow"
        | "yellowgreen"
        | "ActiveBorder"
        | "ActiveCaption"
        | "AppWorkspace"
        | "Background"
        | "ButtonFace"
        | "ButtonHighlight"
        | "ButtonShadow"
        | "ButtonText"
        | "CaptionText"
        | "GrayText"
        | "Highlight"
        | "HighlightText"
        | "InactiveBorder"
        | "InactiveCaption"
        | "InactiveCaptionText"
        | "InfoBackground"
        | "InfoText"
        | "MenuText"
        | "Scrollbar"
        | "ThreeDDarkShadow"
        | "ThreeDFace"
        | "ThreeDHighlight"
        | "ThreeDLightShadow"
        | "ThreeDShadow"
        | "Window"
        | "WindowFrame"
        | "WindowText"
        | "currentcolor"
        | "thick"
        | "thin"
        | "dashed"
        | "dotted"
        | "double"
        | "groove"
        | "outset"
        | "ridge"
        | "solid">);
    borderBottom: ResponsiveStyleValue<(BorderBottom<string | number> | readonly NonNullable<BorderBottom<string | number> | undefined>[] | undefined)> | ((theme: Theme) => ResponsiveStyleValue<(BorderBottom<string | number> | readonly NonNullable<BorderBottom<string | number> | undefined>[] | undefined)>);
    borderColor: ResponsiveStyleValue<(readonly string[] | BorderColor | undefined)> | ((theme: Theme) => ResponsiveStyleValue<(readonly string[] | BorderColor | undefined)>);
    borderLeft: ResponsiveStyleValue<(BorderLeft<string | number> | readonly NonNullable<BorderLeft<string | number> | undefined>[] | undefined)> | ((theme: Theme) => ResponsiveStyleValue<(BorderLeft<string | number> | readonly NonNullable<BorderLeft<string | number> | undefined>[] | undefined)>);
    borderRadius: ResponsiveStyleValue<(BorderRadius<string | number> | readonly NonNullable<BorderRadius<string | number> | undefined>[] | undefined)> | ((theme: Theme) => ResponsiveStyleValue<(BorderRadius<string | number> | readonly NonNullable<BorderRadius<string | number> | undefined>[] | undefined)>);
    borderRight: ResponsiveStyleValue<(BorderRight<string | number> | readonly NonNullable<BorderRight<string | number> | undefined>[] | undefined)> | ((theme: Theme) => ResponsiveStyleValue<(BorderRight<string | number> | readonly NonNullable<BorderRight<string | number> | undefined>[] | undefined)>);
    borderTop: ResponsiveStyleValue<(BorderTop<string | number> | readonly NonNullable<BorderTop<string | number> | undefined>[] | undefined)> | ((theme: Theme) => ResponsiveStyleValue<(BorderTop<string | number> | readonly NonNullable<BorderTop<string | number> | undefined>[] | undefined)>);
    bottom: ResponsiveStyleValue<(Bottom<string | number> | readonly NonNullable<Bottom<string | number> | undefined>[] | undefined)> | ((theme: Theme) => ResponsiveStyleValue<(Bottom<string | number> | readonly NonNullable<Bottom<string | number> | undefined>[] | undefined)>);
    boxShadow: ResponsiveStyleValue<(number | BoxShadow | undefined)> | ((theme: Theme) => ResponsiveStyleValue<(number | BoxShadow | undefined)>);
    boxSizing: ResponsiveStyleValue<(BoxSizing | readonly NonNullable<BoxSizing | undefined>[] | undefined)> | ((theme: Theme) => ResponsiveStyleValue<(BoxSizing | readonly NonNullable<BoxSizing | undefined>[] | undefined)>);
    children?: ReactNode;
    classes?: Partial<ClassNameMap<never>>;
    className?: string;
    color: ResponsiveStyleValue<(readonly string[] | Color | undefined)> | ((theme: Theme) => ResponsiveStyleValue<(readonly string[] | Color | undefined)>);
    columnGap: ResponsiveStyleValue<(ColumnGap<string | number> | readonly NonNullable<ColumnGap<string | number> | undefined>[] | undefined)> | ((theme: Theme) => ResponsiveStyleValue<(ColumnGap<string | number> | readonly NonNullable<ColumnGap<string | number> | undefined>[] | undefined)>);
    component?: ElementType<any, (keyof IntrinsicElements)>;
    content?: string;
    contentEditable?: "inherit" | Booleanish | "plaintext-only";
    contextMenu?: string;
    customAttribute?: {
        attribute: string;
        value: string | number;
    };
    dangerouslySetInnerHTML?: {
        __html: string | TrustedHTML;
    };
    datatype?: string;
    defaultChecked?: boolean;
    defaultValue?: string | number | readonly string[];
    dir?: string;
    display: ResponsiveStyleValue<(readonly string[] | Display | undefined)> | ((theme: Theme) => ResponsiveStyleValue<(readonly string[] | Display | undefined)>);
    displayPrint: ResponsiveStyleValue<(readonly string[] | Display | undefined)> | ((theme: Theme) => ResponsiveStyleValue<(readonly string[] | Display | undefined)>);
    draggable?: Booleanish;
    enterKeyHint?:
        | "search"
        | "next"
        | "done"
        | "enter"
        | "go"
        | "previous"
        | "send";
    errorFallback?: Element;
    flex: ResponsiveStyleValue<(Flex<string | number> | readonly NonNullable<Flex<string | number> | undefined>[] | undefined)> | ((theme: Theme) => ResponsiveStyleValue<(Flex<string | number> | readonly NonNullable<Flex<string | number> | undefined>[] | undefined)>);
    flexBasis: ResponsiveStyleValue<(FlexBasis<string | number> | readonly NonNullable<FlexBasis<string | number> | undefined>[] | undefined)> | ((theme: Theme) => ResponsiveStyleValue<(FlexBasis<string | number> | readonly NonNullable<FlexBasis<string | number> | undefined>[] | undefined)>);
    flexDirection: ResponsiveStyleValue<(FlexDirection | readonly NonNullable<FlexDirection | undefined>[] | undefined)> | ((theme: Theme) => ResponsiveStyleValue<(FlexDirection | readonly NonNullable<FlexDirection | undefined>[] | undefined)>);
    flexGrow: ResponsiveStyleValue<(FlexGrow | readonly NonNullable<FlexGrow | undefined>[] | undefined)> | ((theme: Theme) => ResponsiveStyleValue<(FlexGrow | readonly NonNullable<FlexGrow | undefined>[] | undefined)>);
    flexShrink: ResponsiveStyleValue<(FlexShrink | readonly NonNullable<FlexShrink | undefined>[] | undefined)> | ((theme: Theme) => ResponsiveStyleValue<(FlexShrink | readonly NonNullable<FlexShrink | undefined>[] | undefined)>);
    flexWrap: ResponsiveStyleValue<(FlexWrap | readonly NonNullable<FlexWrap | undefined>[] | undefined)> | ((theme: Theme) => ResponsiveStyleValue<(FlexWrap | readonly NonNullable<FlexWrap | undefined>[] | undefined)>);
    fontFamily: ResponsiveStyleValue<(readonly string[] | FontFamily | undefined)> | ((theme: Theme) => ResponsiveStyleValue<(readonly string[] | FontFamily | undefined)>);
    fontSize: ResponsiveStyleValue<(FontSize<string | number> | readonly NonNullable<FontSize<string | number> | undefined>[] | undefined)> | ((theme: Theme) => ResponsiveStyleValue<(FontSize<string | number> | readonly NonNullable<FontSize<string | number> | undefined>[] | undefined)>);
    fontStyle: ResponsiveStyleValue<(readonly string[] | FontStyle | undefined)> | ((theme: Theme) => ResponsiveStyleValue<(readonly string[] | FontStyle | undefined)>);
    fontWeight: ResponsiveStyleValue<
        | undefined
        | string
        | string & {}
        | number & {}> | ((theme: Theme) => ResponsiveStyleValue<
        | undefined
        | string
        | string & {}
        | number & {}>);
    gap: ResponsiveStyleValue<(Gap<string | number> | readonly NonNullable<Gap<string | number> | undefined>[] | undefined)> | ((theme: Theme) => ResponsiveStyleValue<(Gap<string | number> | readonly NonNullable<Gap<string | number> | undefined>[] | undefined)>);
    gridArea: ResponsiveStyleValue<(GridArea | readonly NonNullable<GridArea | undefined>[] | undefined)> | ((theme: Theme) => ResponsiveStyleValue<(GridArea | readonly NonNullable<GridArea | undefined>[] | undefined)>);
    gridAutoColumns: ResponsiveStyleValue<(GridAutoColumns<string | number> | readonly NonNullable<GridAutoColumns<string | number> | undefined>[] | undefined)> | ((theme: Theme) => ResponsiveStyleValue<(GridAutoColumns<string | number> | readonly NonNullable<GridAutoColumns<string | number> | undefined>[] | undefined)>);
    gridAutoFlow: ResponsiveStyleValue<(readonly string[] | GridAutoFlow | undefined)> | ((theme: Theme) => ResponsiveStyleValue<(readonly string[] | GridAutoFlow | undefined)>);
    gridAutoRows: ResponsiveStyleValue<(GridAutoRows<string | number> | readonly NonNullable<GridAutoRows<string | number> | undefined>[] | undefined)> | ((theme: Theme) => ResponsiveStyleValue<(GridAutoRows<string | number> | readonly NonNullable<GridAutoRows<string | number> | undefined>[] | undefined)>);
    gridColumn: ResponsiveStyleValue<(GridColumn | readonly NonNullable<GridColumn | undefined>[] | undefined)> | ((theme: Theme) => ResponsiveStyleValue<(GridColumn | readonly NonNullable<GridColumn | undefined>[] | undefined)>);
    gridRow: ResponsiveStyleValue<(GridRow | readonly NonNullable<GridRow | undefined>[] | undefined)> | ((theme: Theme) => ResponsiveStyleValue<(GridRow | readonly NonNullable<GridRow | undefined>[] | undefined)>);
    gridTemplateAreas: ResponsiveStyleValue<(readonly string[] | GridTemplateAreas | undefined)> | ((theme: Theme) => ResponsiveStyleValue<(readonly string[] | GridTemplateAreas | undefined)>);
    gridTemplateColumns: ResponsiveStyleValue<(GridTemplateColumns<string | number> | readonly NonNullable<GridTemplateColumns<string | number> | undefined>[] | undefined)> | ((theme: Theme) => ResponsiveStyleValue<(GridTemplateColumns<string | number> | readonly NonNullable<GridTemplateColumns<string | number> | undefined>[] | undefined)>);
    gridTemplateRows: ResponsiveStyleValue<(GridTemplateRows<string | number> | readonly NonNullable<GridTemplateRows<string | number> | undefined>[] | undefined)> | ((theme: Theme) => ResponsiveStyleValue<(GridTemplateRows<string | number> | readonly NonNullable<GridTemplateRows<string | number> | undefined>[] | undefined)>);
    height: ResponsiveStyleValue<(Height<string | number> | readonly NonNullable<Height<string | number> | undefined>[] | undefined)> | ((theme: Theme) => ResponsiveStyleValue<(Height<string | number> | readonly NonNullable<Height<string | number> | undefined>[] | undefined)>);
    hidden?: boolean;
    id?: string;
    imageSx?: SxProps<Theme>;
    inert?: boolean;
    inlist?: any;
    inputMode?:
        | "search"
        | "none"
        | "url"
        | "text"
        | "tel"
        | "email"
        | "numeric"
        | "decimal";
    is?: string;
    isLoading?: boolean;
    itemID?: string;
    itemProp?: string;
    itemRef?: string;
    itemScope?: boolean;
    itemType?: string;
    justifyContent: ResponsiveStyleValue<(readonly string[] | JustifyContent | undefined)> | ((theme: Theme) => ResponsiveStyleValue<(readonly string[] | JustifyContent | undefined)>);
    justifyItems: ResponsiveStyleValue<(readonly string[] | JustifyItems | undefined)> | ((theme: Theme) => ResponsiveStyleValue<(readonly string[] | JustifyItems | undefined)>);
    justifySelf: ResponsiveStyleValue<(readonly string[] | JustifySelf | undefined)> | ((theme: Theme) => ResponsiveStyleValue<(readonly string[] | JustifySelf | undefined)>);
    key?: null | Key;
    lang?: string;
    left: ResponsiveStyleValue<(Left<string | number> | readonly NonNullable<Left<string | number> | undefined>[] | undefined)> | ((theme: Theme) => ResponsiveStyleValue<(Left<string | number> | readonly NonNullable<Left<string | number> | undefined>[] | undefined)>);
    letterSpacing: ResponsiveStyleValue<(LetterSpacing<string | number> | readonly NonNullable<LetterSpacing<string | number> | undefined>[] | undefined)> | ((theme: Theme) => ResponsiveStyleValue<(LetterSpacing<string | number> | readonly NonNullable<LetterSpacing<string | number> | undefined>[] | undefined)>);
    lineHeight: ResponsiveStyleValue<(LineHeight<string | number> | readonly NonNullable<LineHeight<string | number> | undefined>[] | undefined)> | ((theme: Theme) => ResponsiveStyleValue<(LineHeight<string | number> | readonly NonNullable<LineHeight<string | number> | undefined>[] | undefined)>);
    loadingFallback?: Element;
    m: ResponsiveStyleValue<(Margin<string | number> | readonly NonNullable<Margin<string | number> | undefined>[] | undefined)> | ((theme: Theme) => ResponsiveStyleValue<(Margin<string | number> | readonly NonNullable<Margin<string | number> | undefined>[] | undefined)>);
    margin: ResponsiveStyleValue<(Margin<string | number> | readonly NonNullable<Margin<string | number> | undefined>[] | undefined)> | ((theme: Theme) => ResponsiveStyleValue<(Margin<string | number> | readonly NonNullable<Margin<string | number> | undefined>[] | undefined)>);
    marginBlock: ResponsiveStyleValue<(MarginBlock<string | number> | readonly NonNullable<MarginBlock<string | number> | undefined>[] | undefined)> | ((theme: Theme) => ResponsiveStyleValue<(MarginBlock<string | number> | readonly NonNullable<MarginBlock<string | number> | undefined>[] | undefined)>);
    marginBlockEnd: ResponsiveStyleValue<(MarginBlockEnd<string | number> | readonly NonNullable<MarginBlockEnd<string | number> | undefined>[] | undefined)> | ((theme: Theme) => ResponsiveStyleValue<(MarginBlockEnd<string | number> | readonly NonNullable<MarginBlockEnd<string | number> | undefined>[] | undefined)>);
    marginBlockStart: ResponsiveStyleValue<(MarginBlockStart<string | number> | readonly NonNullable<MarginBlockStart<string | number> | undefined>[] | undefined)> | ((theme: Theme) => ResponsiveStyleValue<(MarginBlockStart<string | number> | readonly NonNullable<MarginBlockStart<string | number> | undefined>[] | undefined)>);
    marginBottom: ResponsiveStyleValue<(MarginBottom<string | number> | readonly NonNullable<MarginBottom<string | number> | undefined>[] | undefined)> | ((theme: Theme) => ResponsiveStyleValue<(MarginBottom<string | number> | readonly NonNullable<MarginBottom<string | number> | undefined>[] | undefined)>);
    marginInline: ResponsiveStyleValue<(MarginInline<string | number> | readonly NonNullable<MarginInline<string | number> | undefined>[] | undefined)> | ((theme: Theme) => ResponsiveStyleValue<(MarginInline<string | number> | readonly NonNullable<MarginInline<string | number> | undefined>[] | undefined)>);
    marginInlineEnd: ResponsiveStyleValue<(MarginInlineEnd<string | number> | readonly NonNullable<MarginInlineEnd<string | number> | undefined>[] | undefined)> | ((theme: Theme) => ResponsiveStyleValue<(MarginInlineEnd<string | number> | readonly NonNullable<MarginInlineEnd<string | number> | undefined>[] | undefined)>);
    marginInlineStart: ResponsiveStyleValue<(MarginInlineStart<string | number> | readonly NonNullable<MarginInlineStart<string | number> | undefined>[] | undefined)> | ((theme: Theme) => ResponsiveStyleValue<(MarginInlineStart<string | number> | readonly NonNullable<MarginInlineStart<string | number> | undefined>[] | undefined)>);
    marginLeft: ResponsiveStyleValue<(MarginLeft<string | number> | readonly NonNullable<MarginLeft<string | number> | undefined>[] | undefined)> | ((theme: Theme) => ResponsiveStyleValue<(MarginLeft<string | number> | readonly NonNullable<MarginLeft<string | number> | undefined>[] | undefined)>);
    marginRight: ResponsiveStyleValue<(MarginRight<string | number> | readonly NonNullable<MarginRight<string | number> | undefined>[] | undefined)> | ((theme: Theme) => ResponsiveStyleValue<(MarginRight<string | number> | readonly NonNullable<MarginRight<string | number> | undefined>[] | undefined)>);
    marginTop: ResponsiveStyleValue<(MarginTop<string | number> | readonly NonNullable<MarginTop<string | number> | undefined>[] | undefined)> | ((theme: Theme) => ResponsiveStyleValue<(MarginTop<string | number> | readonly NonNullable<MarginTop<string | number> | undefined>[] | undefined)>);
    marginX: ResponsiveStyleValue<(MarginLeft<string | number> | readonly NonNullable<MarginLeft<string | number> | undefined>[] | undefined)> | ((theme: Theme) => ResponsiveStyleValue<(MarginLeft<string | number> | readonly NonNullable<MarginLeft<string | number> | undefined>[] | undefined)>);
    marginY: ResponsiveStyleValue<(MarginTop<string | number> | readonly NonNullable<MarginTop<string | number> | undefined>[] | undefined)> | ((theme: Theme) => ResponsiveStyleValue<(MarginTop<string | number> | readonly NonNullable<MarginTop<string | number> | undefined>[] | undefined)>);
    maxHeight: ResponsiveStyleValue<(MaxHeight<string | number> | readonly NonNullable<MaxHeight<string | number> | undefined>[] | undefined)> | ((theme: Theme) => ResponsiveStyleValue<(MaxHeight<string | number> | readonly NonNullable<MaxHeight<string | number> | undefined>[] | undefined)>);
    maxWidth: ResponsiveStyleValue<(MaxWidth<string | number> | readonly NonNullable<MaxWidth<string | number> | undefined>[] | undefined)> | ((theme: Theme) => ResponsiveStyleValue<(MaxWidth<string | number> | readonly NonNullable<MaxWidth<string | number> | undefined>[] | undefined)>);
    mb: ResponsiveStyleValue<(MarginBottom<string | number> | readonly NonNullable<MarginBottom<string | number> | undefined>[] | undefined)> | ((theme: Theme) => ResponsiveStyleValue<(MarginBottom<string | number> | readonly NonNullable<MarginBottom<string | number> | undefined>[] | undefined)>);
    minHeight: ResponsiveStyleValue<(MinHeight<string | number> | readonly NonNullable<MinHeight<string | number> | undefined>[] | undefined)> | ((theme: Theme) => ResponsiveStyleValue<(MinHeight<string | number> | readonly NonNullable<MinHeight<string | number> | undefined>[] | undefined)>);
    minWidth: ResponsiveStyleValue<(MinWidth<string | number> | readonly NonNullable<MinWidth<string | number> | undefined>[] | undefined)> | ((theme: Theme) => ResponsiveStyleValue<(MinWidth<string | number> | readonly NonNullable<MinWidth<string | number> | undefined>[] | undefined)>);
    ml: ResponsiveStyleValue<(MarginLeft<string | number> | readonly NonNullable<MarginLeft<string | number> | undefined>[] | undefined)> | ((theme: Theme) => ResponsiveStyleValue<(MarginLeft<string | number> | readonly NonNullable<MarginLeft<string | number> | undefined>[] | undefined)>);
    mr: ResponsiveStyleValue<(MarginRight<string | number> | readonly NonNullable<MarginRight<string | number> | undefined>[] | undefined)> | ((theme: Theme) => ResponsiveStyleValue<(MarginRight<string | number> | readonly NonNullable<MarginRight<string | number> | undefined>[] | undefined)>);
    mt: ResponsiveStyleValue<(MarginTop<string | number> | readonly NonNullable<MarginTop<string | number> | undefined>[] | undefined)> | ((theme: Theme) => ResponsiveStyleValue<(MarginTop<string | number> | readonly NonNullable<MarginTop<string | number> | undefined>[] | undefined)>);
    mx: ResponsiveStyleValue<(MarginLeft<string | number> | readonly NonNullable<MarginLeft<string | number> | undefined>[] | undefined)> | ((theme: Theme) => ResponsiveStyleValue<(MarginLeft<string | number> | readonly NonNullable<MarginLeft<string | number> | undefined>[] | undefined)>);
    my: ResponsiveStyleValue<(MarginTop<string | number> | readonly NonNullable<MarginTop<string | number> | undefined>[] | undefined)> | ((theme: Theme) => ResponsiveStyleValue<(MarginTop<string | number> | readonly NonNullable<MarginTop<string | number> | undefined>[] | undefined)>);
    nonce?: string;
    onAbort?: ReactEventHandler<HTMLDivElement>;
    onAbortCapture?: ReactEventHandler<HTMLDivElement>;
    onAnimationEnd?: AnimationEventHandler<HTMLDivElement>;
    onAnimationEndCapture?: AnimationEventHandler<HTMLDivElement>;
    onAnimationIteration?: AnimationEventHandler<HTMLDivElement>;
    onAnimationIterationCapture?: AnimationEventHandler<HTMLDivElement>;
    onAnimationStart?: AnimationEventHandler<HTMLDivElement>;
    onAnimationStartCapture?: AnimationEventHandler<HTMLDivElement>;
    onAuxClick?: MouseEventHandler<HTMLDivElement>;
    onAuxClickCapture?: MouseEventHandler<HTMLDivElement>;
    onBeforeInput?: FormEventHandler<HTMLDivElement>;
    onBeforeInputCapture?: FormEventHandler<HTMLDivElement>;
    onBeforeToggle?: ToggleEventHandler<HTMLDivElement>;
    onBlur?: FocusEventHandler<HTMLDivElement>;
    onBlurCapture?: FocusEventHandler<HTMLDivElement>;
    onCanPlay?: ReactEventHandler<HTMLDivElement>;
    onCanPlayCapture?: ReactEventHandler<HTMLDivElement>;
    onCanPlayThrough?: ReactEventHandler<HTMLDivElement>;
    onCanPlayThroughCapture?: ReactEventHandler<HTMLDivElement>;
    onChange?: FormEventHandler<HTMLDivElement>;
    onChangeCapture?: FormEventHandler<HTMLDivElement>;
    onClick?: MouseEventHandler<HTMLDivElement>;
    onClickCapture?: MouseEventHandler<HTMLDivElement>;
    onCompositionEnd?: CompositionEventHandler<HTMLDivElement>;
    onCompositionEndCapture?: CompositionEventHandler<HTMLDivElement>;
    onCompositionStart?: CompositionEventHandler<HTMLDivElement>;
    onCompositionStartCapture?: CompositionEventHandler<HTMLDivElement>;
    onCompositionUpdate?: CompositionEventHandler<HTMLDivElement>;
    onCompositionUpdateCapture?: CompositionEventHandler<HTMLDivElement>;
    onContextMenu?: MouseEventHandler<HTMLDivElement>;
    onContextMenuCapture?: MouseEventHandler<HTMLDivElement>;
    onCopy?: ClipboardEventHandler<HTMLDivElement>;
    onCopyCapture?: ClipboardEventHandler<HTMLDivElement>;
    onCut?: ClipboardEventHandler<HTMLDivElement>;
    onCutCapture?: ClipboardEventHandler<HTMLDivElement>;
    onDoubleClick?: MouseEventHandler<HTMLDivElement>;
    onDoubleClickCapture?: MouseEventHandler<HTMLDivElement>;
    onDrag?: DragEventHandler<HTMLDivElement>;
    onDragCapture?: DragEventHandler<HTMLDivElement>;
    onDragEnd?: DragEventHandler<HTMLDivElement>;
    onDragEndCapture?: DragEventHandler<HTMLDivElement>;
    onDragEnter?: DragEventHandler<HTMLDivElement>;
    onDragEnterCapture?: DragEventHandler<HTMLDivElement>;
    onDragExit?: DragEventHandler<HTMLDivElement>;
    onDragExitCapture?: DragEventHandler<HTMLDivElement>;
    onDragLeave?: DragEventHandler<HTMLDivElement>;
    onDragLeaveCapture?: DragEventHandler<HTMLDivElement>;
    onDragOver?: DragEventHandler<HTMLDivElement>;
    onDragOverCapture?: DragEventHandler<HTMLDivElement>;
    onDragStart?: DragEventHandler<HTMLDivElement>;
    onDragStartCapture?: DragEventHandler<HTMLDivElement>;
    onDrop?: DragEventHandler<HTMLDivElement>;
    onDropCapture?: DragEventHandler<HTMLDivElement>;
    onDurationChange?: ReactEventHandler<HTMLDivElement>;
    onDurationChangeCapture?: ReactEventHandler<HTMLDivElement>;
    onEmptied?: ReactEventHandler<HTMLDivElement>;
    onEmptiedCapture?: ReactEventHandler<HTMLDivElement>;
    onEncrypted?: ReactEventHandler<HTMLDivElement>;
    onEncryptedCapture?: ReactEventHandler<HTMLDivElement>;
    onEnded?: ReactEventHandler<HTMLDivElement>;
    onEndedCapture?: ReactEventHandler<HTMLDivElement>;
    onError?: ((event: SyntheticEvent<HTMLImageElement, Event>) => void);
    onErrorCapture?: ReactEventHandler<HTMLDivElement>;
    onFocus?: FocusEventHandler<HTMLDivElement>;
    onFocusCapture?: FocusEventHandler<HTMLDivElement>;
    onGotPointerCapture?: PointerEventHandler<HTMLDivElement>;
    onGotPointerCaptureCapture?: PointerEventHandler<HTMLDivElement>;
    onInput?: FormEventHandler<HTMLDivElement>;
    onInputCapture?: FormEventHandler<HTMLDivElement>;
    onInvalid?: FormEventHandler<HTMLDivElement>;
    onInvalidCapture?: FormEventHandler<HTMLDivElement>;
    onKeyDown?: KeyboardEventHandler<HTMLDivElement>;
    onKeyDownCapture?: KeyboardEventHandler<HTMLDivElement>;
    onKeyPress?: KeyboardEventHandler<HTMLDivElement>;
    onKeyPressCapture?: KeyboardEventHandler<HTMLDivElement>;
    onKeyUp?: KeyboardEventHandler<HTMLDivElement>;
    onKeyUpCapture?: KeyboardEventHandler<HTMLDivElement>;
    onLoad?: ((event: SyntheticEvent<HTMLImageElement, Event>) => void);
    onLoadCapture?: ReactEventHandler<HTMLDivElement>;
    onLoadedData?: ReactEventHandler<HTMLDivElement>;
    onLoadedDataCapture?: ReactEventHandler<HTMLDivElement>;
    onLoadedMetadata?: ReactEventHandler<HTMLDivElement>;
    onLoadedMetadataCapture?: ReactEventHandler<HTMLDivElement>;
    onLoadStart?: ReactEventHandler<HTMLDivElement>;
    onLoadStartCapture?: ReactEventHandler<HTMLDivElement>;
    onLostPointerCapture?: PointerEventHandler<HTMLDivElement>;
    onLostPointerCaptureCapture?: PointerEventHandler<HTMLDivElement>;
    onMouseDown?: MouseEventHandler<HTMLDivElement>;
    onMouseDownCapture?: MouseEventHandler<HTMLDivElement>;
    onMouseEnter?: MouseEventHandler<HTMLDivElement>;
    onMouseLeave?: MouseEventHandler<HTMLDivElement>;
    onMouseMove?: MouseEventHandler<HTMLDivElement>;
    onMouseMoveCapture?: MouseEventHandler<HTMLDivElement>;
    onMouseOut?: MouseEventHandler<HTMLDivElement>;
    onMouseOutCapture?: MouseEventHandler<HTMLDivElement>;
    onMouseOver?: MouseEventHandler<HTMLDivElement>;
    onMouseOverCapture?: MouseEventHandler<HTMLDivElement>;
    onMouseUp?: MouseEventHandler<HTMLDivElement>;
    onMouseUpCapture?: MouseEventHandler<HTMLDivElement>;
    onPaste?: ClipboardEventHandler<HTMLDivElement>;
    onPasteCapture?: ClipboardEventHandler<HTMLDivElement>;
    onPause?: ReactEventHandler<HTMLDivElement>;
    onPauseCapture?: ReactEventHandler<HTMLDivElement>;
    onPlay?: ReactEventHandler<HTMLDivElement>;
    onPlayCapture?: ReactEventHandler<HTMLDivElement>;
    onPlaying?: ReactEventHandler<HTMLDivElement>;
    onPlayingCapture?: ReactEventHandler<HTMLDivElement>;
    onPointerCancel?: PointerEventHandler<HTMLDivElement>;
    onPointerCancelCapture?: PointerEventHandler<HTMLDivElement>;
    onPointerDown?: PointerEventHandler<HTMLDivElement>;
    onPointerDownCapture?: PointerEventHandler<HTMLDivElement>;
    onPointerEnter?: PointerEventHandler<HTMLDivElement>;
    onPointerLeave?: PointerEventHandler<HTMLDivElement>;
    onPointerMove?: PointerEventHandler<HTMLDivElement>;
    onPointerMoveCapture?: PointerEventHandler<HTMLDivElement>;
    onPointerOut?: PointerEventHandler<HTMLDivElement>;
    onPointerOutCapture?: PointerEventHandler<HTMLDivElement>;
    onPointerOver?: PointerEventHandler<HTMLDivElement>;
    onPointerOverCapture?: PointerEventHandler<HTMLDivElement>;
    onPointerUp?: PointerEventHandler<HTMLDivElement>;
    onPointerUpCapture?: PointerEventHandler<HTMLDivElement>;
    onProgress?: ReactEventHandler<HTMLDivElement>;
    onProgressCapture?: ReactEventHandler<HTMLDivElement>;
    onRateChange?: ReactEventHandler<HTMLDivElement>;
    onRateChangeCapture?: ReactEventHandler<HTMLDivElement>;
    onReset?: FormEventHandler<HTMLDivElement>;
    onResetCapture?: FormEventHandler<HTMLDivElement>;
    onResize?: ReactEventHandler<HTMLDivElement>;
    onResizeCapture?: ReactEventHandler<HTMLDivElement>;
    onScroll?: UIEventHandler<HTMLDivElement>;
    onScrollCapture?: UIEventHandler<HTMLDivElement>;
    onSeeked?: ReactEventHandler<HTMLDivElement>;
    onSeekedCapture?: ReactEventHandler<HTMLDivElement>;
    onSeeking?: ReactEventHandler<HTMLDivElement>;
    onSeekingCapture?: ReactEventHandler<HTMLDivElement>;
    onSelect?: ReactEventHandler<HTMLDivElement>;
    onSelectCapture?: ReactEventHandler<HTMLDivElement>;
    onStalled?: ReactEventHandler<HTMLDivElement>;
    onStalledCapture?: ReactEventHandler<HTMLDivElement>;
    onSubmit?: FormEventHandler<HTMLDivElement>;
    onSubmitCapture?: FormEventHandler<HTMLDivElement>;
    onSuspend?: ReactEventHandler<HTMLDivElement>;
    onSuspendCapture?: ReactEventHandler<HTMLDivElement>;
    onTimeUpdate?: ReactEventHandler<HTMLDivElement>;
    onTimeUpdateCapture?: ReactEventHandler<HTMLDivElement>;
    onToggle?: ToggleEventHandler<HTMLDivElement>;
    onTouchCancel?: TouchEventHandler<HTMLDivElement>;
    onTouchCancelCapture?: TouchEventHandler<HTMLDivElement>;
    onTouchEnd?: TouchEventHandler<HTMLDivElement>;
    onTouchEndCapture?: TouchEventHandler<HTMLDivElement>;
    onTouchMove?: TouchEventHandler<HTMLDivElement>;
    onTouchMoveCapture?: TouchEventHandler<HTMLDivElement>;
    onTouchStart?: TouchEventHandler<HTMLDivElement>;
    onTouchStartCapture?: TouchEventHandler<HTMLDivElement>;
    onTransitionCancel?: TransitionEventHandler<HTMLDivElement>;
    onTransitionCancelCapture?: TransitionEventHandler<HTMLDivElement>;
    onTransitionEnd?: TransitionEventHandler<HTMLDivElement>;
    onTransitionEndCapture?: TransitionEventHandler<HTMLDivElement>;
    onTransitionRun?: TransitionEventHandler<HTMLDivElement>;
    onTransitionRunCapture?: TransitionEventHandler<HTMLDivElement>;
    onTransitionStart?: TransitionEventHandler<HTMLDivElement>;
    onTransitionStartCapture?: TransitionEventHandler<HTMLDivElement>;
    onVolumeChange?: ReactEventHandler<HTMLDivElement>;
    onVolumeChangeCapture?: ReactEventHandler<HTMLDivElement>;
    onWaiting?: ReactEventHandler<HTMLDivElement>;
    onWaitingCapture?: ReactEventHandler<HTMLDivElement>;
    onWheel?: WheelEventHandler<HTMLDivElement>;
    onWheelCapture?: WheelEventHandler<HTMLDivElement>;
    order: ResponsiveStyleValue<(Order | readonly NonNullable<Order | undefined>[] | undefined)> | ((theme: Theme) => ResponsiveStyleValue<(Order | readonly NonNullable<Order | undefined>[] | undefined)>);
    overflow: ResponsiveStyleValue<(readonly string[] | Overflow | undefined)> | ((theme: Theme) => ResponsiveStyleValue<(readonly string[] | Overflow | undefined)>);
    p: ResponsiveStyleValue<(Padding<string | number> | readonly NonNullable<Padding<string | number> | undefined>[] | undefined)> | ((theme: Theme) => ResponsiveStyleValue<(Padding<string | number> | readonly NonNullable<Padding<string | number> | undefined>[] | undefined)>);
    padding: ResponsiveStyleValue<(Padding<string | number> | readonly NonNullable<Padding<string | number> | undefined>[] | undefined)> | ((theme: Theme) => ResponsiveStyleValue<(Padding<string | number> | readonly NonNullable<Padding<string | number> | undefined>[] | undefined)>);
    paddingBlock: ResponsiveStyleValue<(PaddingBlock<string | number> | readonly NonNullable<PaddingBlock<string | number> | undefined>[] | undefined)> | ((theme: Theme) => ResponsiveStyleValue<(PaddingBlock<string | number> | readonly NonNullable<PaddingBlock<string | number> | undefined>[] | undefined)>);
    paddingBlockEnd: ResponsiveStyleValue<(PaddingBlockEnd<string | number> | readonly NonNullable<PaddingBlockEnd<string | number> | undefined>[] | undefined)> | ((theme: Theme) => ResponsiveStyleValue<(PaddingBlockEnd<string | number> | readonly NonNullable<PaddingBlockEnd<string | number> | undefined>[] | undefined)>);
    paddingBlockStart: ResponsiveStyleValue<(PaddingBlockStart<string | number> | readonly NonNullable<PaddingBlockStart<string | number> | undefined>[] | undefined)> | ((theme: Theme) => ResponsiveStyleValue<(PaddingBlockStart<string | number> | readonly NonNullable<PaddingBlockStart<string | number> | undefined>[] | undefined)>);
    paddingBottom: ResponsiveStyleValue<(PaddingBottom<string | number> | readonly NonNullable<PaddingBottom<string | number> | undefined>[] | undefined)> | ((theme: Theme) => ResponsiveStyleValue<(PaddingBottom<string | number> | readonly NonNullable<PaddingBottom<string | number> | undefined>[] | undefined)>);
    paddingInline: ResponsiveStyleValue<(PaddingInline<string | number> | readonly NonNullable<PaddingInline<string | number> | undefined>[] | undefined)> | ((theme: Theme) => ResponsiveStyleValue<(PaddingInline<string | number> | readonly NonNullable<PaddingInline<string | number> | undefined>[] | undefined)>);
    paddingInlineEnd: ResponsiveStyleValue<(PaddingInlineEnd<string | number> | readonly NonNullable<PaddingInlineEnd<string | number> | undefined>[] | undefined)> | ((theme: Theme) => ResponsiveStyleValue<(PaddingInlineEnd<string | number> | readonly NonNullable<PaddingInlineEnd<string | number> | undefined>[] | undefined)>);
    paddingInlineStart: ResponsiveStyleValue<(PaddingInlineStart<string | number> | readonly NonNullable<PaddingInlineStart<string | number> | undefined>[] | undefined)> | ((theme: Theme) => ResponsiveStyleValue<(PaddingInlineStart<string | number> | readonly NonNullable<PaddingInlineStart<string | number> | undefined>[] | undefined)>);
    paddingLeft: ResponsiveStyleValue<(PaddingLeft<string | number> | readonly NonNullable<PaddingLeft<string | number> | undefined>[] | undefined)> | ((theme: Theme) => ResponsiveStyleValue<(PaddingLeft<string | number> | readonly NonNullable<PaddingLeft<string | number> | undefined>[] | undefined)>);
    paddingRight: ResponsiveStyleValue<(PaddingRight<string | number> | readonly NonNullable<PaddingRight<string | number> | undefined>[] | undefined)> | ((theme: Theme) => ResponsiveStyleValue<(PaddingRight<string | number> | readonly NonNullable<PaddingRight<string | number> | undefined>[] | undefined)>);
    paddingTop: ResponsiveStyleValue<(PaddingTop<string | number> | readonly NonNullable<PaddingTop<string | number> | undefined>[] | undefined)> | ((theme: Theme) => ResponsiveStyleValue<(PaddingTop<string | number> | readonly NonNullable<PaddingTop<string | number> | undefined>[] | undefined)>);
    paddingX: ResponsiveStyleValue<(PaddingLeft<string | number> | readonly NonNullable<PaddingLeft<string | number> | undefined>[] | undefined)> | ((theme: Theme) => ResponsiveStyleValue<(PaddingLeft<string | number> | readonly NonNullable<PaddingLeft<string | number> | undefined>[] | undefined)>);
    paddingY: ResponsiveStyleValue<(PaddingTop<string | number> | readonly NonNullable<PaddingTop<string | number> | undefined>[] | undefined)> | ((theme: Theme) => ResponsiveStyleValue<(PaddingTop<string | number> | readonly NonNullable<PaddingTop<string | number> | undefined>[] | undefined)>);
    pb: ResponsiveStyleValue<(PaddingBottom<string | number> | readonly NonNullable<PaddingBottom<string | number> | undefined>[] | undefined)> | ((theme: Theme) => ResponsiveStyleValue<(PaddingBottom<string | number> | readonly NonNullable<PaddingBottom<string | number> | undefined>[] | undefined)>);
    pl: ResponsiveStyleValue<(PaddingLeft<string | number> | readonly NonNullable<PaddingLeft<string | number> | undefined>[] | undefined)> | ((theme: Theme) => ResponsiveStyleValue<(PaddingLeft<string | number> | readonly NonNullable<PaddingLeft<string | number> | undefined>[] | undefined)>);
    popover?: "" | "auto" | "manual";
    popoverTarget?: string;
    popoverTargetAction?: "toggle" | "hide" | "show";
    position: ResponsiveStyleValue<(Position | readonly NonNullable<Position | undefined>[] | undefined)> | ((theme: Theme) => ResponsiveStyleValue<(Position | readonly NonNullable<Position | undefined>[] | undefined)>);
    pr: ResponsiveStyleValue<(PaddingRight<string | number> | readonly NonNullable<PaddingRight<string | number> | undefined>[] | undefined)> | ((theme: Theme) => ResponsiveStyleValue<(PaddingRight<string | number> | readonly NonNullable<PaddingRight<string | number> | undefined>[] | undefined)>);
    prefix?: string;
    property?: string;
    pt: ResponsiveStyleValue<(PaddingTop<string | number> | readonly NonNullable<PaddingTop<string | number> | undefined>[] | undefined)> | ((theme: Theme) => ResponsiveStyleValue<(PaddingTop<string | number> | readonly NonNullable<PaddingTop<string | number> | undefined>[] | undefined)>);
    px: ResponsiveStyleValue<(PaddingLeft<string | number> | readonly NonNullable<PaddingLeft<string | number> | undefined>[] | undefined)> | ((theme: Theme) => ResponsiveStyleValue<(PaddingLeft<string | number> | readonly NonNullable<PaddingLeft<string | number> | undefined>[] | undefined)>);
    py: ResponsiveStyleValue<(PaddingTop<string | number> | readonly NonNullable<PaddingTop<string | number> | undefined>[] | undefined)> | ((theme: Theme) => ResponsiveStyleValue<(PaddingTop<string | number> | readonly NonNullable<PaddingTop<string | number> | undefined>[] | undefined)>);
    radioGroup?: string;
    ref?: Ref<unknown>;
    rel?: string;
    resource?: string;
    results?: number;
    rev?: string;
    right: ResponsiveStyleValue<(Right<string | number> | readonly NonNullable<Right<string | number> | undefined>[] | undefined)> | ((theme: Theme) => ResponsiveStyleValue<(Right<string | number> | readonly NonNullable<Right<string | number> | undefined>[] | undefined)>);
    role?: AriaRole;
    rootSx?: SxProps<Theme>;
    rowGap: ResponsiveStyleValue<(RowGap<string | number> | readonly NonNullable<RowGap<string | number> | undefined>[] | undefined)> | ((theme: Theme) => ResponsiveStyleValue<(RowGap<string | number> | readonly NonNullable<RowGap<string | number> | undefined>[] | undefined)>);
    security?: string;
    slot?: string;
    spellCheck?: Booleanish;
    src: string;
    srcSet?: string;
    style?: CSSProperties;
    suppressContentEditableWarning?: boolean;
    suppressHydrationWarning?: boolean;
    sx?: SxProps<Theme>;
    tabIndex?: number;
    textAlign: ResponsiveStyleValue<(TextAlign | readonly NonNullable<TextAlign | undefined>[] | undefined)> | ((theme: Theme) => ResponsiveStyleValue<(TextAlign | readonly NonNullable<TextAlign | undefined>[] | undefined)>);
    textOverflow: ResponsiveStyleValue<(readonly string[] | TextOverflow | undefined)> | ((theme: Theme) => ResponsiveStyleValue<(readonly string[] | TextOverflow | undefined)>);
    textTransform: ResponsiveStyleValue<(TextTransform | readonly NonNullable<TextTransform | undefined>[] | undefined)> | ((theme: Theme) => ResponsiveStyleValue<(TextTransform | readonly NonNullable<TextTransform | undefined>[] | undefined)>);
    title?: string;
    top: ResponsiveStyleValue<(Top<string | number> | readonly NonNullable<Top<string | number> | undefined>[] | undefined)> | ((theme: Theme) => ResponsiveStyleValue<(Top<string | number> | readonly NonNullable<Top<string | number> | undefined>[] | undefined)>);
    translate?: "yes" | "no";
    tw?: string;
    typeof?: string;
    typography: ResponsiveStyleValue<undefined | string> | ((theme: Theme) => ResponsiveStyleValue<undefined | string>);
    unselectable?: "on" | "off";
    visibility: ResponsiveStyleValue<(Visibility | readonly NonNullable<Visibility | undefined>[] | undefined)> | ((theme: Theme) => ResponsiveStyleValue<(Visibility | readonly NonNullable<Visibility | undefined>[] | undefined)>);
    vocab?: string;
    whiteSpace: ResponsiveStyleValue<(readonly string[] | WhiteSpace | undefined)> | ((theme: Theme) => ResponsiveStyleValue<(readonly string[] | WhiteSpace | undefined)>);
    width: ResponsiveStyleValue<(Width<string | number> | readonly NonNullable<Width<string | number> | undefined>[] | undefined)> | ((theme: Theme) => ResponsiveStyleValue<(Width<string | number> | readonly NonNullable<Width<string | number> | undefined>[] | undefined)>);
    zIndex: ResponsiveStyleValue<
        | undefined
        | string
        | string & {}
        | number & {}> | ((theme: Theme) => ResponsiveStyleValue<
        | undefined
        | string
        | string & {}
        | number & {}>);
}

Hierarchy

  • BoxProps
    • ImageProps

Properties

about? accessKey? alignContent alignItems alignSelf alt aria-activedescendant? aria-atomic? aria-autocomplete? aria-braillelabel? aria-brailleroledescription? aria-busy? aria-checked? aria-colcount? aria-colindex? aria-colindextext? aria-colspan? aria-controls? aria-current? aria-describedby? aria-description? aria-details? aria-disabled? aria-dropeffect? aria-errormessage? aria-expanded? aria-flowto? aria-grabbed? aria-haspopup? aria-hidden? aria-invalid? aria-keyshortcuts? aria-label? aria-labelledby? aria-level? aria-live? aria-modal? aria-multiline? aria-multiselectable? aria-orientation? aria-owns? aria-placeholder? aria-posinset? aria-pressed? aria-readonly? aria-relevant? aria-required? aria-roledescription? aria-rowcount? aria-rowindex? aria-rowindextext? aria-rowspan? aria-selected? aria-setsize? aria-sort? aria-valuemax? aria-valuemin? aria-valuenow? aria-valuetext? aspectRatio? autoCapitalize? autoCorrect? autoFocus? autoSave? bgcolor border borderBottom borderColor borderLeft borderRadius borderRight borderTop bottom boxShadow boxSizing children? classes? className? color columnGap component? content? contentEditable? contextMenu? customAttribute? dangerouslySetInnerHTML? datatype? defaultChecked? defaultValue? dir? display displayPrint draggable? enterKeyHint? errorFallback? flex flexBasis flexDirection flexGrow flexShrink flexWrap fontFamily fontSize fontStyle fontWeight gap gridArea gridAutoColumns gridAutoFlow gridAutoRows gridColumn gridRow gridTemplateAreas gridTemplateColumns gridTemplateRows height hidden? id? imageSx? inert? inlist? inputMode? is? isLoading? itemID? itemProp? itemRef? itemScope? itemType? justifyContent justifyItems justifySelf key? lang? left letterSpacing lineHeight loadingFallback? m margin marginBlock marginBlockEnd marginBlockStart marginBottom marginInline marginInlineEnd marginInlineStart marginLeft marginRight marginTop marginX marginY maxHeight maxWidth mb minHeight minWidth ml mr mt mx my nonce? onAbort? onAbortCapture? onAnimationEnd? onAnimationEndCapture? onAnimationIteration? onAnimationIterationCapture? onAnimationStart? onAnimationStartCapture? onAuxClick? onAuxClickCapture? onBeforeInput? onBeforeInputCapture? onBeforeToggle? onBlur? onBlurCapture? onCanPlay? onCanPlayCapture? onCanPlayThrough? onCanPlayThroughCapture? onChange? onChangeCapture? onClick? onClickCapture? onCompositionEnd? onCompositionEndCapture? onCompositionStart? onCompositionStartCapture? onCompositionUpdate? onCompositionUpdateCapture? onContextMenu? onContextMenuCapture? onCopy? onCopyCapture? onCut? onCutCapture? onDoubleClick? onDoubleClickCapture? onDrag? onDragCapture? onDragEnd? onDragEndCapture? onDragEnter? onDragEnterCapture? onDragExit? onDragExitCapture? onDragLeave? onDragLeaveCapture? onDragOver? onDragOverCapture? onDragStart? onDragStartCapture? onDrop? onDropCapture? onDurationChange? onDurationChangeCapture? onEmptied? onEmptiedCapture? onEncrypted? onEncryptedCapture? onEnded? onEndedCapture? onError? onErrorCapture? onFocus? onFocusCapture? onGotPointerCapture? onGotPointerCaptureCapture? onInput? onInputCapture? onInvalid? onInvalidCapture? onKeyDown? onKeyDownCapture? onKeyPress? onKeyPressCapture? onKeyUp? onKeyUpCapture? onLoad? onLoadCapture? onLoadedData? onLoadedDataCapture? onLoadedMetadata? onLoadedMetadataCapture? onLoadStart? onLoadStartCapture? onLostPointerCapture? onLostPointerCaptureCapture? onMouseDown? onMouseDownCapture? onMouseEnter? onMouseLeave? onMouseMove? onMouseMoveCapture? onMouseOut? onMouseOutCapture? onMouseOver? onMouseOverCapture? onMouseUp? onMouseUpCapture? onPaste? onPasteCapture? onPause? onPauseCapture? onPlay? onPlayCapture? onPlaying? onPlayingCapture? onPointerCancel? onPointerCancelCapture? onPointerDown? onPointerDownCapture? onPointerEnter? onPointerLeave? onPointerMove? onPointerMoveCapture? onPointerOut? onPointerOutCapture? onPointerOver? onPointerOverCapture? onPointerUp? onPointerUpCapture? onProgress? onProgressCapture? onRateChange? onRateChangeCapture? onReset? onResetCapture? onResize? onResizeCapture? onScroll? onScrollCapture? onSeeked? onSeekedCapture? onSeeking? onSeekingCapture? onSelect? onSelectCapture? onStalled? onStalledCapture? onSubmit? onSubmitCapture? onSuspend? onSuspendCapture? onTimeUpdate? onTimeUpdateCapture? onToggle? onTouchCancel? onTouchCancelCapture? onTouchEnd? onTouchEndCapture? onTouchMove? onTouchMoveCapture? onTouchStart? onTouchStartCapture? onTransitionCancel? onTransitionCancelCapture? onTransitionEnd? onTransitionEndCapture? onTransitionRun? onTransitionRunCapture? onTransitionStart? onTransitionStartCapture? onVolumeChange? onVolumeChangeCapture? onWaiting? onWaitingCapture? onWheel? onWheelCapture? order overflow p padding paddingBlock paddingBlockEnd paddingBlockStart paddingBottom paddingInline paddingInlineEnd paddingInlineStart paddingLeft paddingRight paddingTop paddingX paddingY pb pl popover? popoverTarget? popoverTargetAction? position pr prefix? property? pt px py radioGroup? ref? rel? resource? results? rev? right role? rootSx? rowGap security? slot? spellCheck? src srcSet? style? suppressContentEditableWarning? suppressHydrationWarning? sx? tabIndex? textAlign textOverflow textTransform title? top translate? tw? typeof? typography unselectable? visibility vocab? whiteSpace width zIndex

Properties

Optionalabout

about?: string

OptionalaccessKey

accessKey?: string

alignContent

alignContent: ResponsiveStyleValue<(readonly string[] | AlignContent | undefined)> | ((theme: Theme) => ResponsiveStyleValue<(readonly string[] | AlignContent | undefined)>)

alignItems

alignItems: ResponsiveStyleValue<(readonly string[] | AlignItems | undefined)> | ((theme: Theme) => ResponsiveStyleValue<(readonly string[] | AlignItems | undefined)>)

alignSelf

alignSelf: ResponsiveStyleValue<(readonly string[] | AlignSelf | undefined)> | ((theme: Theme) => ResponsiveStyleValue<(readonly string[] | AlignSelf | undefined)>)

alt

alt: string

Specifies an alternate text for an image. Use "" if image is decorative.

Optionalaria-activedescendant

aria-activedescendant?: string

Identifies the currently active element when DOM focus is on a composite widget, textbox, group, or application.

Optionalaria-atomic

aria-atomic?: Booleanish

Indicates whether assistive technologies will present all, or only parts of, the changed region based on the change notifications defined by the aria-relevant attribute.

Optionalaria-autocomplete

aria-autocomplete?:
    | "none"
    | "list"
    | "both"
    | "inline"

Indicates whether inputting text could trigger display of one or more predictions of the user's intended value for an input and specifies how predictions would be presented if they are made.

Optionalaria-braillelabel

aria-braillelabel?: string

Defines a string value that labels the current element, which is intended to be converted into Braille.

See

aria-label.

Optionalaria-brailleroledescription

aria-brailleroledescription?: string

Defines a human-readable, author-localized abbreviated description for the role of an element, which is intended to be converted into Braille.

See

aria-roledescription.

Optionalaria-busy

aria-busy?: Booleanish

Optionalaria-checked

aria-checked?:
    | boolean
    | "mixed"
    | "false"
    | "true"

Indicates the current "checked" state of checkboxes, radio buttons, and other widgets.

See

  • aria-pressed
  • aria-selected.

Optionalaria-colcount

aria-colcount?: number

Defines the total number of columns in a table, grid, or treegrid.

See

aria-colindex.

Optionalaria-colindex

aria-colindex?: number

Defines an element's column index or position with respect to the total number of columns within a table, grid, or treegrid.

See

  • aria-colcount
  • aria-colspan.

Optionalaria-colindextext

aria-colindextext?: string

Defines a human readable text alternative of aria-colindex.

See

aria-rowindextext.

Optionalaria-colspan

aria-colspan?: number

Defines the number of columns spanned by a cell or gridcell within a table, grid, or treegrid.

See

  • aria-colindex
  • aria-rowspan.

Optionalaria-controls

aria-controls?: string

Identifies the element (or elements) whose contents or presence are controlled by the current element.

See

aria-owns.

Optionalaria-current

aria-current?:
    | boolean
    | "page"
    | "time"
    | "step"
    | "false"
    | "true"
    | "location"
    | "date"

Indicates the element that represents the current item within a container or set of related elements.

Optionalaria-describedby

aria-describedby?: string

Identifies the element (or elements) that describes the object.

See

aria-labelledby

Optionalaria-description

aria-description?: string

Defines a string value that describes or annotates the current element.

See

related aria-describedby.

Optionalaria-details

aria-details?: string

Identifies the element that provides a detailed, extended description for the object.

See

aria-describedby.

Optionalaria-disabled

aria-disabled?: Booleanish

Indicates that the element is perceivable but disabled, so it is not editable or otherwise operable.

See

  • aria-hidden
  • aria-readonly.

Optionalaria-dropeffect

aria-dropeffect?:
    | "link"
    | "none"
    | "copy"
    | "move"
    | "execute"
    | "popup"

Indicates what functions can be performed when a dragged object is released on the drop target.

Deprecated

in ARIA 1.1

Optionalaria-errormessage

aria-errormessage?: string

Identifies the element that provides an error message for the object.

See

  • aria-invalid
  • aria-describedby.

Optionalaria-expanded

aria-expanded?: Booleanish

Indicates whether the element, or another grouping element it controls, is currently expanded or collapsed.

Optionalaria-flowto

aria-flowto?: string

Identifies the next element (or elements) in an alternate reading order of content which, at the user's discretion, allows assistive technology to override the general default of reading in document source order.

Optionalaria-grabbed

aria-grabbed?: Booleanish

Indicates an element's "grabbed" state in a drag-and-drop operation.

Deprecated

in ARIA 1.1

Optionalaria-haspopup

aria-haspopup?:
    | boolean
    | "menu"
    | "grid"
    | "dialog"
    | "listbox"
    | "false"
    | "true"
    | "tree"

Indicates the availability and type of interactive popup element, such as menu or dialog, that can be triggered by an element.

Optionalaria-hidden

aria-hidden?: Booleanish

Indicates whether the element is exposed to an accessibility API.

See

aria-disabled.

Optionalaria-invalid

aria-invalid?:
    | boolean
    | "false"
    | "true"
    | "grammar"
    | "spelling"

Indicates the entered value does not conform to the format expected by the application.

See

aria-errormessage.

Optionalaria-keyshortcuts

aria-keyshortcuts?: string

Indicates keyboard shortcuts that an author has implemented to activate or give focus to an element.

Optionalaria-label

aria-label?: string

Defines a string value that labels the current element.

See

aria-labelledby.

Optionalaria-labelledby

aria-labelledby?: string

Identifies the element (or elements) that labels the current element.

See

aria-describedby.

Optionalaria-level

aria-level?: number

Defines the hierarchical level of an element within a structure.

Optionalaria-live

aria-live?: "assertive" | "polite" | "off"

Indicates that an element will be updated, and describes the types of updates the user agents, assistive technologies, and user can expect from the live region.

Optionalaria-modal

aria-modal?: Booleanish

Indicates whether an element is modal when displayed.

Optionalaria-multiline

aria-multiline?: Booleanish

Indicates whether a text box accepts multiple lines of input or only a single line.

Optionalaria-multiselectable

aria-multiselectable?: Booleanish

Indicates that the user may select more than one item from the current selectable descendants.

Optionalaria-orientation

aria-orientation?: "horizontal" | "vertical"

Indicates whether the element's orientation is horizontal, vertical, or unknown/ambiguous.

Optionalaria-owns

aria-owns?: string

Identifies an element (or elements) in order to define a visual, functional, or contextual parent/child relationship between DOM elements where the DOM hierarchy cannot be used to represent the relationship.

See

aria-controls.

Optionalaria-placeholder

aria-placeholder?: string

Defines a short hint (a word or short phrase) intended to aid the user with data entry when the control has no value. A hint could be a sample value or a brief description of the expected format.

Optionalaria-posinset

aria-posinset?: number

Defines an element's number or position in the current set of listitems or treeitems. Not required if all elements in the set are present in the DOM.

See

aria-setsize.

Optionalaria-pressed

aria-pressed?:
    | boolean
    | "mixed"
    | "false"
    | "true"

Indicates the current "pressed" state of toggle buttons.

See

  • aria-checked
  • aria-selected.

Optionalaria-readonly

aria-readonly?: Booleanish

Indicates that the element is not editable, but is otherwise operable.

See

aria-disabled.

Optionalaria-relevant

aria-relevant?:
    | "all"
    | "text"
    | "additions"
    | "additions removals"
    | "additions text"
    | "removals"
    | "removals additions"
    | "removals text"
    | "text additions"
    | "text removals"

Indicates what notifications the user agent will trigger when the accessibility tree within a live region is modified.

See

aria-atomic.

Optionalaria-required

aria-required?: Booleanish

Indicates that user input is required on the element before a form may be submitted.

Optionalaria-roledescription

aria-roledescription?: string

Defines a human-readable, author-localized description for the role of an element.

Optionalaria-rowcount

aria-rowcount?: number

Defines the total number of rows in a table, grid, or treegrid.

See

aria-rowindex.

Optionalaria-rowindex

aria-rowindex?: number

Defines an element's row index or position with respect to the total number of rows within a table, grid, or treegrid.

See

  • aria-rowcount
  • aria-rowspan.

Optionalaria-rowindextext

aria-rowindextext?: string

Defines a human readable text alternative of aria-rowindex.

See

aria-colindextext.

Optionalaria-rowspan

aria-rowspan?: number

Defines the number of rows spanned by a cell or gridcell within a table, grid, or treegrid.

See

  • aria-rowindex
  • aria-colspan.

Optionalaria-selected

aria-selected?: Booleanish

Indicates the current "selected" state of various widgets.

See

  • aria-checked
  • aria-pressed.

Optionalaria-setsize

aria-setsize?: number

Defines the number of items in the current set of listitems or treeitems. Not required if all elements in the set are present in the DOM.

See

aria-posinset.

Optionalaria-sort

aria-sort?:
    | "none"
    | "other"
    | "ascending"
    | "descending"

Indicates if items in a table or grid are sorted in ascending or descending order.

Optionalaria-valuemax

aria-valuemax?: number

Defines the maximum allowed value for a range widget.

Optionalaria-valuemin

aria-valuemin?: number

Defines the minimum allowed value for a range widget.

Optionalaria-valuenow

aria-valuenow?: number

Defines the current value for a range widget.

See

aria-valuetext.

Optionalaria-valuetext

aria-valuetext?: string

Defines the human readable text alternative of aria-valuenow for a range widget.

OptionalaspectRatio

aspectRatio?: number

Override aspect ratio. Should be a ratio expressed as width divided by height, e.g. 3/2 or 1/1.

OptionalautoCapitalize

autoCapitalize?:
    | string & {}
    | "none"
    | "on"
    | "off"
    | "sentences"
    | "words"
    | "characters"

OptionalautoCorrect

autoCorrect?: string

OptionalautoFocus

autoFocus?: boolean

OptionalautoSave

autoSave?: string

bgcolor

bgcolor: ResponsiveStyleValue<(readonly string[] | BackgroundColor | undefined)> | ((theme: Theme) => ResponsiveStyleValue<(readonly string[] | BackgroundColor | undefined)>)

border

border: ResponsiveStyleValue<
    | undefined
    | number
    | string & {}
    | "inset"
    | "none"
    | "Menu"
    | "hidden"
    | "medium"
    | "-moz-initial"
    | "inherit"
    | "initial"
    | "revert"
    | "revert-layer"
    | "unset"
    | "aliceblue"
    | "antiquewhite"
    | "aqua"
    | "aquamarine"
    | "azure"
    | "beige"
    | "bisque"
    | "black"
    | "blanchedalmond"
    | "blue"
    | "blueviolet"
    | "brown"
    | "burlywood"
    | "cadetblue"
    | "chartreuse"
    | "chocolate"
    | "coral"
    | "cornflowerblue"
    | "cornsilk"
    | "crimson"
    | "cyan"
    | "darkblue"
    | "darkcyan"
    | "darkgoldenrod"
    | "darkgray"
    | "darkgreen"
    | "darkgrey"
    | "darkkhaki"
    | "darkmagenta"
    | "darkolivegreen"
    | "darkorange"
    | "darkorchid"
    | "darkred"
    | "darksalmon"
    | "darkseagreen"
    | "darkslateblue"
    | "darkslategray"
    | "darkslategrey"
    | "darkturquoise"
    | "darkviolet"
    | "deeppink"
    | "deepskyblue"
    | "dimgray"
    | "dimgrey"
    | "dodgerblue"
    | "firebrick"
    | "floralwhite"
    | "forestgreen"
    | "fuchsia"
    | "gainsboro"
    | "ghostwhite"
    | "gold"
    | "goldenrod"
    | "gray"
    | "green"
    | "greenyellow"
    | "grey"
    | "honeydew"
    | "hotpink"
    | "indianred"
    | "indigo"
    | "ivory"
    | "khaki"
    | "lavender"
    | "lavenderblush"
    | "lawngreen"
    | "lemonchiffon"
    | "lightblue"
    | "lightcoral"
    | "lightcyan"
    | "lightgoldenrodyellow"
    | "lightgray"
    | "lightgreen"
    | "lightgrey"
    | "lightpink"
    | "lightsalmon"
    | "lightseagreen"
    | "lightskyblue"
    | "lightslategray"
    | "lightslategrey"
    | "lightsteelblue"
    | "lightyellow"
    | "lime"
    | "limegreen"
    | "linen"
    | "magenta"
    | "maroon"
    | "mediumaquamarine"
    | "mediumblue"
    | "mediumorchid"
    | "mediumpurple"
    | "mediumseagreen"
    | "mediumslateblue"
    | "mediumspringgreen"
    | "mediumturquoise"
    | "mediumvioletred"
    | "midnightblue"
    | "mintcream"
    | "mistyrose"
    | "moccasin"
    | "navajowhite"
    | "navy"
    | "oldlace"
    | "olive"
    | "olivedrab"
    | "orange"
    | "orangered"
    | "orchid"
    | "palegoldenrod"
    | "palegreen"
    | "paleturquoise"
    | "palevioletred"
    | "papayawhip"
    | "peachpuff"
    | "peru"
    | "pink"
    | "plum"
    | "powderblue"
    | "purple"
    | "rebeccapurple"
    | "red"
    | "rosybrown"
    | "royalblue"
    | "saddlebrown"
    | "salmon"
    | "sandybrown"
    | "seagreen"
    | "seashell"
    | "sienna"
    | "silver"
    | "skyblue"
    | "slateblue"
    | "slategray"
    | "slategrey"
    | "snow"
    | "springgreen"
    | "steelblue"
    | "tan"
    | "teal"
    | "thistle"
    | "tomato"
    | "transparent"
    | "turquoise"
    | "violet"
    | "wheat"
    | "white"
    | "whitesmoke"
    | "yellow"
    | "yellowgreen"
    | "ActiveBorder"
    | "ActiveCaption"
    | "AppWorkspace"
    | "Background"
    | "ButtonFace"
    | "ButtonHighlight"
    | "ButtonShadow"
    | "ButtonText"
    | "CaptionText"
    | "GrayText"
    | "Highlight"
    | "HighlightText"
    | "InactiveBorder"
    | "InactiveCaption"
    | "InactiveCaptionText"
    | "InfoBackground"
    | "InfoText"
    | "MenuText"
    | "Scrollbar"
    | "ThreeDDarkShadow"
    | "ThreeDFace"
    | "ThreeDHighlight"
    | "ThreeDLightShadow"
    | "ThreeDShadow"
    | "Window"
    | "WindowFrame"
    | "WindowText"
    | "currentcolor"
    | "thick"
    | "thin"
    | "dashed"
    | "dotted"
    | "double"
    | "groove"
    | "outset"
    | "ridge"
    | "solid"> | ((theme: Theme) => ResponsiveStyleValue<
    | undefined
    | number
    | string & {}
    | "inset"
    | "none"
    | "Menu"
    | "hidden"
    | "medium"
    | "-moz-initial"
    | "inherit"
    | "initial"
    | "revert"
    | "revert-layer"
    | "unset"
    | "aliceblue"
    | "antiquewhite"
    | "aqua"
    | "aquamarine"
    | "azure"
    | "beige"
    | "bisque"
    | "black"
    | "blanchedalmond"
    | "blue"
    | "blueviolet"
    | "brown"
    | "burlywood"
    | "cadetblue"
    | "chartreuse"
    | "chocolate"
    | "coral"
    | "cornflowerblue"
    | "cornsilk"
    | "crimson"
    | "cyan"
    | "darkblue"
    | "darkcyan"
    | "darkgoldenrod"
    | "darkgray"
    | "darkgreen"
    | "darkgrey"
    | "darkkhaki"
    | "darkmagenta"
    | "darkolivegreen"
    | "darkorange"
    | "darkorchid"
    | "darkred"
    | "darksalmon"
    | "darkseagreen"
    | "darkslateblue"
    | "darkslategray"
    | "darkslategrey"
    | "darkturquoise"
    | "darkviolet"
    | "deeppink"
    | "deepskyblue"
    | "dimgray"
    | "dimgrey"
    | "dodgerblue"
    | "firebrick"
    | "floralwhite"
    | "forestgreen"
    | "fuchsia"
    | "gainsboro"
    | "ghostwhite"
    | "gold"
    | "goldenrod"
    | "gray"
    | "green"
    | "greenyellow"
    | "grey"
    | "honeydew"
    | "hotpink"
    | "indianred"
    | "indigo"
    | "ivory"
    | "khaki"
    | "lavender"
    | "lavenderblush"
    | "lawngreen"
    | "lemonchiffon"
    | "lightblue"
    | "lightcoral"
    | "lightcyan"
    | "lightgoldenrodyellow"
    | "lightgray"
    | "lightgreen"
    | "lightgrey"
    | "lightpink"
    | "lightsalmon"
    | "lightseagreen"
    | "lightskyblue"
    | "lightslategray"
    | "lightslategrey"
    | "lightsteelblue"
    | "lightyellow"
    | "lime"
    | "limegreen"
    | "linen"
    | "magenta"
    | "maroon"
    | "mediumaquamarine"
    | "mediumblue"
    | "mediumorchid"
    | "mediumpurple"
    | "mediumseagreen"
    | "mediumslateblue"
    | "mediumspringgreen"
    | "mediumturquoise"
    | "mediumvioletred"
    | "midnightblue"
    | "mintcream"
    | "mistyrose"
    | "moccasin"
    | "navajowhite"
    | "navy"
    | "oldlace"
    | "olive"
    | "olivedrab"
    | "orange"
    | "orangered"
    | "orchid"
    | "palegoldenrod"
    | "palegreen"
    | "paleturquoise"
    | "palevioletred"
    | "papayawhip"
    | "peachpuff"
    | "peru"
    | "pink"
    | "plum"
    | "powderblue"
    | "purple"
    | "rebeccapurple"
    | "red"
    | "rosybrown"
    | "royalblue"
    | "saddlebrown"
    | "salmon"
    | "sandybrown"
    | "seagreen"
    | "seashell"
    | "sienna"
    | "silver"
    | "skyblue"
    | "slateblue"
    | "slategray"
    | "slategrey"
    | "snow"
    | "springgreen"
    | "steelblue"
    | "tan"
    | "teal"
    | "thistle"
    | "tomato"
    | "transparent"
    | "turquoise"
    | "violet"
    | "wheat"
    | "white"
    | "whitesmoke"
    | "yellow"
    | "yellowgreen"
    | "ActiveBorder"
    | "ActiveCaption"
    | "AppWorkspace"
    | "Background"
    | "ButtonFace"
    | "ButtonHighlight"
    | "ButtonShadow"
    | "ButtonText"
    | "CaptionText"
    | "GrayText"
    | "Highlight"
    | "HighlightText"
    | "InactiveBorder"
    | "InactiveCaption"
    | "InactiveCaptionText"
    | "InfoBackground"
    | "InfoText"
    | "MenuText"
    | "Scrollbar"
    | "ThreeDDarkShadow"
    | "ThreeDFace"
    | "ThreeDHighlight"
    | "ThreeDLightShadow"
    | "ThreeDShadow"
    | "Window"
    | "WindowFrame"
    | "WindowText"
    | "currentcolor"
    | "thick"
    | "thin"
    | "dashed"
    | "dotted"
    | "double"
    | "groove"
    | "outset"
    | "ridge"
    | "solid">)

borderBottom

borderBottom: ResponsiveStyleValue<(BorderBottom<string | number> | readonly NonNullable<BorderBottom<string | number> | undefined>[] | undefined)> | ((theme: Theme) => ResponsiveStyleValue<(BorderBottom<string | number> | readonly NonNullable<BorderBottom<string | number> | undefined>[] | undefined)>)

borderColor

borderColor: ResponsiveStyleValue<(readonly string[] | BorderColor | undefined)> | ((theme: Theme) => ResponsiveStyleValue<(readonly string[] | BorderColor | undefined)>)

borderLeft

borderLeft: ResponsiveStyleValue<(BorderLeft<string | number> | readonly NonNullable<BorderLeft<string | number> | undefined>[] | undefined)> | ((theme: Theme) => ResponsiveStyleValue<(BorderLeft<string | number> | readonly NonNullable<BorderLeft<string | number> | undefined>[] | undefined)>)

borderRadius

borderRadius: ResponsiveStyleValue<(BorderRadius<string | number> | readonly NonNullable<BorderRadius<string | number> | undefined>[] | undefined)> | ((theme: Theme) => ResponsiveStyleValue<(BorderRadius<string | number> | readonly NonNullable<BorderRadius<string | number> | undefined>[] | undefined)>)

borderRight

borderRight: ResponsiveStyleValue<(BorderRight<string | number> | readonly NonNullable<BorderRight<string | number> | undefined>[] | undefined)> | ((theme: Theme) => ResponsiveStyleValue<(BorderRight<string | number> | readonly NonNullable<BorderRight<string | number> | undefined>[] | undefined)>)

borderTop

borderTop: ResponsiveStyleValue<(BorderTop<string | number> | readonly NonNullable<BorderTop<string | number> | undefined>[] | undefined)> | ((theme: Theme) => ResponsiveStyleValue<(BorderTop<string | number> | readonly NonNullable<BorderTop<string | number> | undefined>[] | undefined)>)

bottom

bottom: ResponsiveStyleValue<(Bottom<string | number> | readonly NonNullable<Bottom<string | number> | undefined>[] | undefined)> | ((theme: Theme) => ResponsiveStyleValue<(Bottom<string | number> | readonly NonNullable<Bottom<string | number> | undefined>[] | undefined)>)

boxShadow

boxShadow: ResponsiveStyleValue<(number | BoxShadow | undefined)> | ((theme: Theme) => ResponsiveStyleValue<(number | BoxShadow | undefined)>)

boxSizing

boxSizing: ResponsiveStyleValue<(BoxSizing | readonly NonNullable<BoxSizing | undefined>[] | undefined)> | ((theme: Theme) => ResponsiveStyleValue<(BoxSizing | readonly NonNullable<BoxSizing | undefined>[] | undefined)>)

Optionalchildren

children?: ReactNode

Optionalclasses

classes?: Partial<ClassNameMap<never>>

Override or extend the styles applied to the component.

OptionalclassName

className?: string

Specifies additional CSS classes to be applied to the root element.

color

color: ResponsiveStyleValue<(readonly string[] | Color | undefined)> | ((theme: Theme) => ResponsiveStyleValue<(readonly string[] | Color | undefined)>)

columnGap

columnGap: ResponsiveStyleValue<(ColumnGap<string | number> | readonly NonNullable<ColumnGap<string | number> | undefined>[] | undefined)> | ((theme: Theme) => ResponsiveStyleValue<(ColumnGap<string | number> | readonly NonNullable<ColumnGap<string | number> | undefined>[] | undefined)>)

Optionalcomponent

component?: ElementType<any, (keyof IntrinsicElements)>

The component used for the root node. Either a string to use a HTML element or a component.

Optionalcontent

content?: string

OptionalcontentEditable

contentEditable?: "inherit" | Booleanish | "plaintext-only"

OptionalcontextMenu

contextMenu?: string

OptionalcustomAttribute

customAttribute?: {
    attribute: string;
    value: string | number;
}

Used for tests. Clickable and requested subcomponents will be suffixed with "-[ComponentName]".

OptionaldangerouslySetInnerHTML

dangerouslySetInnerHTML?: {
    __html: string | TrustedHTML;
}

Optionaldatatype

datatype?: string

OptionaldefaultChecked

defaultChecked?: boolean

OptionaldefaultValue

defaultValue?: string | number | readonly string[]

Optionaldir

dir?: string

display

display: ResponsiveStyleValue<(readonly string[] | Display | undefined)> | ((theme: Theme) => ResponsiveStyleValue<(readonly string[] | Display | undefined)>)

displayPrint

displayPrint: ResponsiveStyleValue<(readonly string[] | Display | undefined)> | ((theme: Theme) => ResponsiveStyleValue<(readonly string[] | Display | undefined)>)

Optionaldraggable

draggable?: Booleanish

OptionalenterKeyHint

enterKeyHint?:
    | "search"
    | "next"
    | "done"
    | "enter"
    | "go"
    | "previous"
    | "send"

OptionalerrorFallback

errorFallback?: Element

Specify a fallback to display if the image fails to load.

flex

flex: ResponsiveStyleValue<(Flex<string | number> | readonly NonNullable<Flex<string | number> | undefined>[] | undefined)> | ((theme: Theme) => ResponsiveStyleValue<(Flex<string | number> | readonly NonNullable<Flex<string | number> | undefined>[] | undefined)>)

flexBasis

flexBasis: ResponsiveStyleValue<(FlexBasis<string | number> | readonly NonNullable<FlexBasis<string | number> | undefined>[] | undefined)> | ((theme: Theme) => ResponsiveStyleValue<(FlexBasis<string | number> | readonly NonNullable<FlexBasis<string | number> | undefined>[] | undefined)>)

flexDirection

flexDirection: ResponsiveStyleValue<(FlexDirection | readonly NonNullable<FlexDirection | undefined>[] | undefined)> | ((theme: Theme) => ResponsiveStyleValue<(FlexDirection | readonly NonNullable<FlexDirection | undefined>[] | undefined)>)

flexGrow

flexGrow: ResponsiveStyleValue<(FlexGrow | readonly NonNullable<FlexGrow | undefined>[] | undefined)> | ((theme: Theme) => ResponsiveStyleValue<(FlexGrow | readonly NonNullable<FlexGrow | undefined>[] | undefined)>)

flexShrink

flexShrink: ResponsiveStyleValue<(FlexShrink | readonly NonNullable<FlexShrink | undefined>[] | undefined)> | ((theme: Theme) => ResponsiveStyleValue<(FlexShrink | readonly NonNullable<FlexShrink | undefined>[] | undefined)>)

flexWrap

flexWrap: ResponsiveStyleValue<(FlexWrap | readonly NonNullable<FlexWrap | undefined>[] | undefined)> | ((theme: Theme) => ResponsiveStyleValue<(FlexWrap | readonly NonNullable<FlexWrap | undefined>[] | undefined)>)

fontFamily

fontFamily: ResponsiveStyleValue<(readonly string[] | FontFamily | undefined)> | ((theme: Theme) => ResponsiveStyleValue<(readonly string[] | FontFamily | undefined)>)

fontSize

fontSize: ResponsiveStyleValue<(FontSize<string | number> | readonly NonNullable<FontSize<string | number> | undefined>[] | undefined)> | ((theme: Theme) => ResponsiveStyleValue<(FontSize<string | number> | readonly NonNullable<FontSize<string | number> | undefined>[] | undefined)>)

fontStyle

fontStyle: ResponsiveStyleValue<(readonly string[] | FontStyle | undefined)> | ((theme: Theme) => ResponsiveStyleValue<(readonly string[] | FontStyle | undefined)>)

fontWeight

fontWeight: ResponsiveStyleValue<
    | undefined
    | string
    | string & {}
    | number & {}> | ((theme: Theme) => ResponsiveStyleValue<
    | undefined
    | string
    | string & {}
    | number & {}>)

gap

gap: ResponsiveStyleValue<(Gap<string | number> | readonly NonNullable<Gap<string | number> | undefined>[] | undefined)> | ((theme: Theme) => ResponsiveStyleValue<(Gap<string | number> | readonly NonNullable<Gap<string | number> | undefined>[] | undefined)>)

gridArea

gridArea: ResponsiveStyleValue<(GridArea | readonly NonNullable<GridArea | undefined>[] | undefined)> | ((theme: Theme) => ResponsiveStyleValue<(GridArea | readonly NonNullable<GridArea | undefined>[] | undefined)>)

gridAutoColumns

gridAutoColumns: ResponsiveStyleValue<(GridAutoColumns<string | number> | readonly NonNullable<GridAutoColumns<string | number> | undefined>[] | undefined)> | ((theme: Theme) => ResponsiveStyleValue<(GridAutoColumns<string | number> | readonly NonNullable<GridAutoColumns<string | number> | undefined>[] | undefined)>)

gridAutoFlow

gridAutoFlow: ResponsiveStyleValue<(readonly string[] | GridAutoFlow | undefined)> | ((theme: Theme) => ResponsiveStyleValue<(readonly string[] | GridAutoFlow | undefined)>)

gridAutoRows

gridAutoRows: ResponsiveStyleValue<(GridAutoRows<string | number> | readonly NonNullable<GridAutoRows<string | number> | undefined>[] | undefined)> | ((theme: Theme) => ResponsiveStyleValue<(GridAutoRows<string | number> | readonly NonNullable<GridAutoRows<string | number> | undefined>[] | undefined)>)

gridColumn

gridColumn: ResponsiveStyleValue<(GridColumn | readonly NonNullable<GridColumn | undefined>[] | undefined)> | ((theme: Theme) => ResponsiveStyleValue<(GridColumn | readonly NonNullable<GridColumn | undefined>[] | undefined)>)

gridRow

gridRow: ResponsiveStyleValue<(GridRow | readonly NonNullable<GridRow | undefined>[] | undefined)> | ((theme: Theme) => ResponsiveStyleValue<(GridRow | readonly NonNullable<GridRow | undefined>[] | undefined)>)

gridTemplateAreas

gridTemplateAreas: ResponsiveStyleValue<(readonly string[] | GridTemplateAreas | undefined)> | ((theme: Theme) => ResponsiveStyleValue<(readonly string[] | GridTemplateAreas | undefined)>)

gridTemplateColumns

gridTemplateColumns: ResponsiveStyleValue<(GridTemplateColumns<string | number> | readonly NonNullable<GridTemplateColumns<string | number> | undefined>[] | undefined)> | ((theme: Theme) => ResponsiveStyleValue<(GridTemplateColumns<string | number> | readonly NonNullable<GridTemplateColumns<string | number> | undefined>[] | undefined)>)

gridTemplateRows

gridTemplateRows: ResponsiveStyleValue<(GridTemplateRows<string | number> | readonly NonNullable<GridTemplateRows<string | number> | undefined>[] | undefined)> | ((theme: Theme) => ResponsiveStyleValue<(GridTemplateRows<string | number> | readonly NonNullable<GridTemplateRows<string | number> | undefined>[] | undefined)>)

height

height: ResponsiveStyleValue<(Height<string | number> | readonly NonNullable<Height<string | number> | undefined>[] | undefined)> | ((theme: Theme) => ResponsiveStyleValue<(Height<string | number> | readonly NonNullable<Height<string | number> | undefined>[] | undefined)>)

Optionalhidden

hidden?: boolean

Optionalid

id?: string

OptionalimageSx

imageSx?: SxProps<Theme>

Custom styles to be applied to the image element.

Optionalinert

inert?: boolean

See

https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/inert

Optionalinlist

inlist?: any

OptionalinputMode

inputMode?:
    | "search"
    | "none"
    | "url"
    | "text"
    | "tel"
    | "email"
    | "numeric"
    | "decimal"

Hints at the type of data that might be entered by the user while editing the element or its contents

See

https://html.spec.whatwg.org/multipage/interaction.html#input-modalities:-the-inputmode-attribute

Optionalis

is?: string

Specify that a standard HTML element should behave like a defined custom built-in element

See

https://html.spec.whatwg.org/multipage/custom-elements.html#attr-is

OptionalisLoading

isLoading?: boolean

If true, a loading skeleton will be rendered instead of the component.

OptionalitemID

itemID?: string

OptionalitemProp

itemProp?: string

OptionalitemRef

itemRef?: string

OptionalitemScope

itemScope?: boolean

OptionalitemType

itemType?: string

justifyContent

justifyContent: ResponsiveStyleValue<(readonly string[] | JustifyContent | undefined)> | ((theme: Theme) => ResponsiveStyleValue<(readonly string[] | JustifyContent | undefined)>)

justifyItems

justifyItems: ResponsiveStyleValue<(readonly string[] | JustifyItems | undefined)> | ((theme: Theme) => ResponsiveStyleValue<(readonly string[] | JustifyItems | undefined)>)

justifySelf

justifySelf: ResponsiveStyleValue<(readonly string[] | JustifySelf | undefined)> | ((theme: Theme) => ResponsiveStyleValue<(readonly string[] | JustifySelf | undefined)>)

Optionalkey

key?: null | Key

Optionallang

lang?: string

left

left: ResponsiveStyleValue<(Left<string | number> | readonly NonNullable<Left<string | number> | undefined>[] | undefined)> | ((theme: Theme) => ResponsiveStyleValue<(Left<string | number> | readonly NonNullable<Left<string | number> | undefined>[] | undefined)>)

letterSpacing

letterSpacing: ResponsiveStyleValue<(LetterSpacing<string | number> | readonly NonNullable<LetterSpacing<string | number> | undefined>[] | undefined)> | ((theme: Theme) => ResponsiveStyleValue<(LetterSpacing<string | number> | readonly NonNullable<LetterSpacing<string | number> | undefined>[] | undefined)>)

lineHeight

lineHeight: ResponsiveStyleValue<(LineHeight<string | number> | readonly NonNullable<LineHeight<string | number> | undefined>[] | undefined)> | ((theme: Theme) => ResponsiveStyleValue<(LineHeight<string | number> | readonly NonNullable<LineHeight<string | number> | undefined>[] | undefined)>)

OptionalloadingFallback

loadingFallback?: Element

Specify a fallback to display while the image is loading.

m

m: ResponsiveStyleValue<(Margin<string | number> | readonly NonNullable<Margin<string | number> | undefined>[] | undefined)> | ((theme: Theme) => ResponsiveStyleValue<(Margin<string | number> | readonly NonNullable<Margin<string | number> | undefined>[] | undefined)>)

margin

margin: ResponsiveStyleValue<(Margin<string | number> | readonly NonNullable<Margin<string | number> | undefined>[] | undefined)> | ((theme: Theme) => ResponsiveStyleValue<(Margin<string | number> | readonly NonNullable<Margin<string | number> | undefined>[] | undefined)>)

marginBlock

marginBlock: ResponsiveStyleValue<(MarginBlock<string | number> | readonly NonNullable<MarginBlock<string | number> | undefined>[] | undefined)> | ((theme: Theme) => ResponsiveStyleValue<(MarginBlock<string | number> | readonly NonNullable<MarginBlock<string | number> | undefined>[] | undefined)>)

marginBlockEnd

marginBlockEnd: ResponsiveStyleValue<(MarginBlockEnd<string | number> | readonly NonNullable<MarginBlockEnd<string | number> | undefined>[] | undefined)> | ((theme: Theme) => ResponsiveStyleValue<(MarginBlockEnd<string | number> | readonly NonNullable<MarginBlockEnd<string | number> | undefined>[] | undefined)>)

marginBlockStart

marginBlockStart: ResponsiveStyleValue<(MarginBlockStart<string | number> | readonly NonNullable<MarginBlockStart<string | number> | undefined>[] | undefined)> | ((theme: Theme) => ResponsiveStyleValue<(MarginBlockStart<string | number> | readonly NonNullable<MarginBlockStart<string | number> | undefined>[] | undefined)>)

marginBottom

marginBottom: ResponsiveStyleValue<(MarginBottom<string | number> | readonly NonNullable<MarginBottom<string | number> | undefined>[] | undefined)> | ((theme: Theme) => ResponsiveStyleValue<(MarginBottom<string | number> | readonly NonNullable<MarginBottom<string | number> | undefined>[] | undefined)>)

marginInline

marginInline: ResponsiveStyleValue<(MarginInline<string | number> | readonly NonNullable<MarginInline<string | number> | undefined>[] | undefined)> | ((theme: Theme) => ResponsiveStyleValue<(MarginInline<string | number> | readonly NonNullable<MarginInline<string | number> | undefined>[] | undefined)>)

marginInlineEnd

marginInlineEnd: ResponsiveStyleValue<(MarginInlineEnd<string | number> | readonly NonNullable<MarginInlineEnd<string | number> | undefined>[] | undefined)> | ((theme: Theme) => ResponsiveStyleValue<(MarginInlineEnd<string | number> | readonly NonNullable<MarginInlineEnd<string | number> | undefined>[] | undefined)>)

marginInlineStart

marginInlineStart: ResponsiveStyleValue<(MarginInlineStart<string | number> | readonly NonNullable<MarginInlineStart<string | number> | undefined>[] | undefined)> | ((theme: Theme) => ResponsiveStyleValue<(MarginInlineStart<string | number> | readonly NonNullable<MarginInlineStart<string | number> | undefined>[] | undefined)>)

marginLeft

marginLeft: ResponsiveStyleValue<(MarginLeft<string | number> | readonly NonNullable<MarginLeft<string | number> | undefined>[] | undefined)> | ((theme: Theme) => ResponsiveStyleValue<(MarginLeft<string | number> | readonly NonNullable<MarginLeft<string | number> | undefined>[] | undefined)>)

marginRight

marginRight: ResponsiveStyleValue<(MarginRight<string | number> | readonly NonNullable<MarginRight<string | number> | undefined>[] | undefined)> | ((theme: Theme) => ResponsiveStyleValue<(MarginRight<string | number> | readonly NonNullable<MarginRight<string | number> | undefined>[] | undefined)>)

marginTop

marginTop: ResponsiveStyleValue<(MarginTop<string | number> | readonly NonNullable<MarginTop<string | number> | undefined>[] | undefined)> | ((theme: Theme) => ResponsiveStyleValue<(MarginTop<string | number> | readonly NonNullable<MarginTop<string | number> | undefined>[] | undefined)>)

marginX

marginX: ResponsiveStyleValue<(MarginLeft<string | number> | readonly NonNullable<MarginLeft<string | number> | undefined>[] | undefined)> | ((theme: Theme) => ResponsiveStyleValue<(MarginLeft<string | number> | readonly NonNullable<MarginLeft<string | number> | undefined>[] | undefined)>)

marginY

marginY: ResponsiveStyleValue<(MarginTop<string | number> | readonly NonNullable<MarginTop<string | number> | undefined>[] | undefined)> | ((theme: Theme) => ResponsiveStyleValue<(MarginTop<string | number> | readonly NonNullable<MarginTop<string | number> | undefined>[] | undefined)>)

maxHeight

maxHeight: ResponsiveStyleValue<(MaxHeight<string | number> | readonly NonNullable<MaxHeight<string | number> | undefined>[] | undefined)> | ((theme: Theme) => ResponsiveStyleValue<(MaxHeight<string | number> | readonly NonNullable<MaxHeight<string | number> | undefined>[] | undefined)>)

maxWidth

maxWidth: ResponsiveStyleValue<(MaxWidth<string | number> | readonly NonNullable<MaxWidth<string | number> | undefined>[] | undefined)> | ((theme: Theme) => ResponsiveStyleValue<(MaxWidth<string | number> | readonly NonNullable<MaxWidth<string | number> | undefined>[] | undefined)>)

mb

mb: ResponsiveStyleValue<(MarginBottom<string | number> | readonly NonNullable<MarginBottom<string | number> | undefined>[] | undefined)> | ((theme: Theme) => ResponsiveStyleValue<(MarginBottom<string | number> | readonly NonNullable<MarginBottom<string | number> | undefined>[] | undefined)>)

minHeight

minHeight: ResponsiveStyleValue<(MinHeight<string | number> | readonly NonNullable<MinHeight<string | number> | undefined>[] | undefined)> | ((theme: Theme) => ResponsiveStyleValue<(MinHeight<string | number> | readonly NonNullable<MinHeight<string | number> | undefined>[] | undefined)>)

minWidth

minWidth: ResponsiveStyleValue<(MinWidth<string | number> | readonly NonNullable<MinWidth<string | number> | undefined>[] | undefined)> | ((theme: Theme) => ResponsiveStyleValue<(MinWidth<string | number> | readonly NonNullable<MinWidth<string | number> | undefined>[] | undefined)>)

ml

ml: ResponsiveStyleValue<(MarginLeft<string | number> | readonly NonNullable<MarginLeft<string | number> | undefined>[] | undefined)> | ((theme: Theme) => ResponsiveStyleValue<(MarginLeft<string | number> | readonly NonNullable<MarginLeft<string | number> | undefined>[] | undefined)>)

mr

mr: ResponsiveStyleValue<(MarginRight<string | number> | readonly NonNullable<MarginRight<string | number> | undefined>[] | undefined)> | ((theme: Theme) => ResponsiveStyleValue<(MarginRight<string | number> | readonly NonNullable<MarginRight<string | number> | undefined>[] | undefined)>)

mt

mt: ResponsiveStyleValue<(MarginTop<string | number> | readonly NonNullable<MarginTop<string | number> | undefined>[] | undefined)> | ((theme: Theme) => ResponsiveStyleValue<(MarginTop<string | number> | readonly NonNullable<MarginTop<string | number> | undefined>[] | undefined)>)

mx

mx: ResponsiveStyleValue<(MarginLeft<string | number> | readonly NonNullable<MarginLeft<string | number> | undefined>[] | undefined)> | ((theme: Theme) => ResponsiveStyleValue<(MarginLeft<string | number> | readonly NonNullable<MarginLeft<string | number> | undefined>[] | undefined)>)

my

my: ResponsiveStyleValue<(MarginTop<string | number> | readonly NonNullable<MarginTop<string | number> | undefined>[] | undefined)> | ((theme: Theme) => ResponsiveStyleValue<(MarginTop<string | number> | readonly NonNullable<MarginTop<string | number> | undefined>[] | undefined)>)

Optionalnonce

nonce?: string

OptionalonAbort

onAbort?: ReactEventHandler<HTMLDivElement>

OptionalonAbortCapture

onAbortCapture?: ReactEventHandler<HTMLDivElement>

OptionalonAnimationEnd

onAnimationEnd?: AnimationEventHandler<HTMLDivElement>

OptionalonAnimationEndCapture

onAnimationEndCapture?: AnimationEventHandler<HTMLDivElement>

OptionalonAnimationIteration

onAnimationIteration?: AnimationEventHandler<HTMLDivElement>

OptionalonAnimationIterationCapture

onAnimationIterationCapture?: AnimationEventHandler<HTMLDivElement>

OptionalonAnimationStart

onAnimationStart?: AnimationEventHandler<HTMLDivElement>

OptionalonAnimationStartCapture

onAnimationStartCapture?: AnimationEventHandler<HTMLDivElement>

OptionalonAuxClick

onAuxClick?: MouseEventHandler<HTMLDivElement>

OptionalonAuxClickCapture

onAuxClickCapture?: MouseEventHandler<HTMLDivElement>

OptionalonBeforeInput

onBeforeInput?: FormEventHandler<HTMLDivElement>

OptionalonBeforeInputCapture

onBeforeInputCapture?: FormEventHandler<HTMLDivElement>

OptionalonBeforeToggle

onBeforeToggle?: ToggleEventHandler<HTMLDivElement>

OptionalonBlur

onBlur?: FocusEventHandler<HTMLDivElement>

OptionalonBlurCapture

onBlurCapture?: FocusEventHandler<HTMLDivElement>

OptionalonCanPlay

onCanPlay?: ReactEventHandler<HTMLDivElement>

OptionalonCanPlayCapture

onCanPlayCapture?: ReactEventHandler<HTMLDivElement>

OptionalonCanPlayThrough

onCanPlayThrough?: ReactEventHandler<HTMLDivElement>

OptionalonCanPlayThroughCapture

onCanPlayThroughCapture?: ReactEventHandler<HTMLDivElement>

OptionalonChange

onChange?: FormEventHandler<HTMLDivElement>

OptionalonChangeCapture

onChangeCapture?: FormEventHandler<HTMLDivElement>

OptionalonClick

onClick?: MouseEventHandler<HTMLDivElement>

OptionalonClickCapture

onClickCapture?: MouseEventHandler<HTMLDivElement>

OptionalonCompositionEnd

onCompositionEnd?: CompositionEventHandler<HTMLDivElement>

OptionalonCompositionEndCapture

onCompositionEndCapture?: CompositionEventHandler<HTMLDivElement>

OptionalonCompositionStart

onCompositionStart?: CompositionEventHandler<HTMLDivElement>

OptionalonCompositionStartCapture

onCompositionStartCapture?: CompositionEventHandler<HTMLDivElement>

OptionalonCompositionUpdate

onCompositionUpdate?: CompositionEventHandler<HTMLDivElement>

OptionalonCompositionUpdateCapture

onCompositionUpdateCapture?: CompositionEventHandler<HTMLDivElement>

OptionalonContextMenu

onContextMenu?: MouseEventHandler<HTMLDivElement>

OptionalonContextMenuCapture

onContextMenuCapture?: MouseEventHandler<HTMLDivElement>

OptionalonCopy

onCopy?: ClipboardEventHandler<HTMLDivElement>

OptionalonCopyCapture

onCopyCapture?: ClipboardEventHandler<HTMLDivElement>

OptionalonCut

onCut?: ClipboardEventHandler<HTMLDivElement>

OptionalonCutCapture

onCutCapture?: ClipboardEventHandler<HTMLDivElement>

OptionalonDoubleClick

onDoubleClick?: MouseEventHandler<HTMLDivElement>

OptionalonDoubleClickCapture

onDoubleClickCapture?: MouseEventHandler<HTMLDivElement>

OptionalonDrag

onDrag?: DragEventHandler<HTMLDivElement>

OptionalonDragCapture

onDragCapture?: DragEventHandler<HTMLDivElement>

OptionalonDragEnd

onDragEnd?: DragEventHandler<HTMLDivElement>

OptionalonDragEndCapture

onDragEndCapture?: DragEventHandler<HTMLDivElement>

OptionalonDragEnter

onDragEnter?: DragEventHandler<HTMLDivElement>

OptionalonDragEnterCapture

onDragEnterCapture?: DragEventHandler<HTMLDivElement>

OptionalonDragExit

onDragExit?: DragEventHandler<HTMLDivElement>

OptionalonDragExitCapture

onDragExitCapture?: DragEventHandler<HTMLDivElement>

OptionalonDragLeave

onDragLeave?: DragEventHandler<HTMLDivElement>

OptionalonDragLeaveCapture

onDragLeaveCapture?: DragEventHandler<HTMLDivElement>

OptionalonDragOver

onDragOver?: DragEventHandler<HTMLDivElement>

OptionalonDragOverCapture

onDragOverCapture?: DragEventHandler<HTMLDivElement>

OptionalonDragStart

onDragStart?: DragEventHandler<HTMLDivElement>

OptionalonDragStartCapture

onDragStartCapture?: DragEventHandler<HTMLDivElement>

OptionalonDrop

onDrop?: DragEventHandler<HTMLDivElement>

OptionalonDropCapture

onDropCapture?: DragEventHandler<HTMLDivElement>

OptionalonDurationChange

onDurationChange?: ReactEventHandler<HTMLDivElement>

OptionalonDurationChangeCapture

onDurationChangeCapture?: ReactEventHandler<HTMLDivElement>

OptionalonEmptied

onEmptied?: ReactEventHandler<HTMLDivElement>

OptionalonEmptiedCapture

onEmptiedCapture?: ReactEventHandler<HTMLDivElement>

OptionalonEncrypted

onEncrypted?: ReactEventHandler<HTMLDivElement>

OptionalonEncryptedCapture

onEncryptedCapture?: ReactEventHandler<HTMLDivElement>

OptionalonEnded

onEnded?: ReactEventHandler<HTMLDivElement>

OptionalonEndedCapture

onEndedCapture?: ReactEventHandler<HTMLDivElement>

OptionalonError

onError?: ((event: SyntheticEvent<HTMLImageElement, Event>) => void)

Callback function triggered when the image fails to load.

OptionalonErrorCapture

onErrorCapture?: ReactEventHandler<HTMLDivElement>

OptionalonFocus

onFocus?: FocusEventHandler<HTMLDivElement>

OptionalonFocusCapture

onFocusCapture?: FocusEventHandler<HTMLDivElement>

OptionalonGotPointerCapture

onGotPointerCapture?: PointerEventHandler<HTMLDivElement>

OptionalonGotPointerCaptureCapture

onGotPointerCaptureCapture?: PointerEventHandler<HTMLDivElement>

OptionalonInput

onInput?: FormEventHandler<HTMLDivElement>

OptionalonInputCapture

onInputCapture?: FormEventHandler<HTMLDivElement>

OptionalonInvalid

onInvalid?: FormEventHandler<HTMLDivElement>

OptionalonInvalidCapture

onInvalidCapture?: FormEventHandler<HTMLDivElement>

OptionalonKeyDown

onKeyDown?: KeyboardEventHandler<HTMLDivElement>

OptionalonKeyDownCapture

onKeyDownCapture?: KeyboardEventHandler<HTMLDivElement>

OptionalonKeyPress

onKeyPress?: KeyboardEventHandler<HTMLDivElement>

Deprecated

Use onKeyUp or onKeyDown instead

OptionalonKeyPressCapture

onKeyPressCapture?: KeyboardEventHandler<HTMLDivElement>

Deprecated

Use onKeyUpCapture or onKeyDownCapture instead

OptionalonKeyUp

onKeyUp?: KeyboardEventHandler<HTMLDivElement>

OptionalonKeyUpCapture

onKeyUpCapture?: KeyboardEventHandler<HTMLDivElement>

OptionalonLoad

onLoad?: ((event: SyntheticEvent<HTMLImageElement, Event>) => void)

Callback function triggered when the image is successfully loaded.

OptionalonLoadCapture

onLoadCapture?: ReactEventHandler<HTMLDivElement>

OptionalonLoadedData

onLoadedData?: ReactEventHandler<HTMLDivElement>

OptionalonLoadedDataCapture

onLoadedDataCapture?: ReactEventHandler<HTMLDivElement>

OptionalonLoadedMetadata

onLoadedMetadata?: ReactEventHandler<HTMLDivElement>

OptionalonLoadedMetadataCapture

onLoadedMetadataCapture?: ReactEventHandler<HTMLDivElement>

OptionalonLoadStart

onLoadStart?: ReactEventHandler<HTMLDivElement>

OptionalonLoadStartCapture

onLoadStartCapture?: ReactEventHandler<HTMLDivElement>

OptionalonLostPointerCapture

onLostPointerCapture?: PointerEventHandler<HTMLDivElement>

OptionalonLostPointerCaptureCapture

onLostPointerCaptureCapture?: PointerEventHandler<HTMLDivElement>

OptionalonMouseDown

onMouseDown?: MouseEventHandler<HTMLDivElement>

OptionalonMouseDownCapture

onMouseDownCapture?: MouseEventHandler<HTMLDivElement>

OptionalonMouseEnter

onMouseEnter?: MouseEventHandler<HTMLDivElement>

OptionalonMouseLeave

onMouseLeave?: MouseEventHandler<HTMLDivElement>

OptionalonMouseMove

onMouseMove?: MouseEventHandler<HTMLDivElement>

OptionalonMouseMoveCapture

onMouseMoveCapture?: MouseEventHandler<HTMLDivElement>

OptionalonMouseOut

onMouseOut?: MouseEventHandler<HTMLDivElement>

OptionalonMouseOutCapture

onMouseOutCapture?: MouseEventHandler<HTMLDivElement>

OptionalonMouseOver

onMouseOver?: MouseEventHandler<HTMLDivElement>

OptionalonMouseOverCapture

onMouseOverCapture?: MouseEventHandler<HTMLDivElement>

OptionalonMouseUp

onMouseUp?: MouseEventHandler<HTMLDivElement>

OptionalonMouseUpCapture

onMouseUpCapture?: MouseEventHandler<HTMLDivElement>

OptionalonPaste

onPaste?: ClipboardEventHandler<HTMLDivElement>

OptionalonPasteCapture

onPasteCapture?: ClipboardEventHandler<HTMLDivElement>

OptionalonPause

onPause?: ReactEventHandler<HTMLDivElement>

OptionalonPauseCapture

onPauseCapture?: ReactEventHandler<HTMLDivElement>

OptionalonPlay

onPlay?: ReactEventHandler<HTMLDivElement>

OptionalonPlayCapture

onPlayCapture?: ReactEventHandler<HTMLDivElement>

OptionalonPlaying

onPlaying?: ReactEventHandler<HTMLDivElement>

OptionalonPlayingCapture

onPlayingCapture?: ReactEventHandler<HTMLDivElement>

OptionalonPointerCancel

onPointerCancel?: PointerEventHandler<HTMLDivElement>

OptionalonPointerCancelCapture

onPointerCancelCapture?: PointerEventHandler<HTMLDivElement>

OptionalonPointerDown

onPointerDown?: PointerEventHandler<HTMLDivElement>

OptionalonPointerDownCapture

onPointerDownCapture?: PointerEventHandler<HTMLDivElement>

OptionalonPointerEnter

onPointerEnter?: PointerEventHandler<HTMLDivElement>

OptionalonPointerLeave

onPointerLeave?: PointerEventHandler<HTMLDivElement>

OptionalonPointerMove

onPointerMove?: PointerEventHandler<HTMLDivElement>

OptionalonPointerMoveCapture

onPointerMoveCapture?: PointerEventHandler<HTMLDivElement>

OptionalonPointerOut

onPointerOut?: PointerEventHandler<HTMLDivElement>

OptionalonPointerOutCapture

onPointerOutCapture?: PointerEventHandler<HTMLDivElement>

OptionalonPointerOver

onPointerOver?: PointerEventHandler<HTMLDivElement>

OptionalonPointerOverCapture

onPointerOverCapture?: PointerEventHandler<HTMLDivElement>

OptionalonPointerUp

onPointerUp?: PointerEventHandler<HTMLDivElement>

OptionalonPointerUpCapture

onPointerUpCapture?: PointerEventHandler<HTMLDivElement>

OptionalonProgress

onProgress?: ReactEventHandler<HTMLDivElement>

OptionalonProgressCapture

onProgressCapture?: ReactEventHandler<HTMLDivElement>

OptionalonRateChange

onRateChange?: ReactEventHandler<HTMLDivElement>

OptionalonRateChangeCapture

onRateChangeCapture?: ReactEventHandler<HTMLDivElement>

OptionalonReset

onReset?: FormEventHandler<HTMLDivElement>

OptionalonResetCapture

onResetCapture?: FormEventHandler<HTMLDivElement>

OptionalonResize

onResize?: ReactEventHandler<HTMLDivElement>

OptionalonResizeCapture

onResizeCapture?: ReactEventHandler<HTMLDivElement>

OptionalonScroll

onScroll?: UIEventHandler<HTMLDivElement>

OptionalonScrollCapture

onScrollCapture?: UIEventHandler<HTMLDivElement>

OptionalonSeeked

onSeeked?: ReactEventHandler<HTMLDivElement>

OptionalonSeekedCapture

onSeekedCapture?: ReactEventHandler<HTMLDivElement>

OptionalonSeeking

onSeeking?: ReactEventHandler<HTMLDivElement>

OptionalonSeekingCapture

onSeekingCapture?: ReactEventHandler<HTMLDivElement>

OptionalonSelect

onSelect?: ReactEventHandler<HTMLDivElement>

OptionalonSelectCapture

onSelectCapture?: ReactEventHandler<HTMLDivElement>

OptionalonStalled

onStalled?: ReactEventHandler<HTMLDivElement>

OptionalonStalledCapture

onStalledCapture?: ReactEventHandler<HTMLDivElement>

OptionalonSubmit

onSubmit?: FormEventHandler<HTMLDivElement>

OptionalonSubmitCapture

onSubmitCapture?: FormEventHandler<HTMLDivElement>

OptionalonSuspend

onSuspend?: ReactEventHandler<HTMLDivElement>

OptionalonSuspendCapture

onSuspendCapture?: ReactEventHandler<HTMLDivElement>

OptionalonTimeUpdate

onTimeUpdate?: ReactEventHandler<HTMLDivElement>

OptionalonTimeUpdateCapture

onTimeUpdateCapture?: ReactEventHandler<HTMLDivElement>

OptionalonToggle

onToggle?: ToggleEventHandler<HTMLDivElement>

OptionalonTouchCancel

onTouchCancel?: TouchEventHandler<HTMLDivElement>

OptionalonTouchCancelCapture

onTouchCancelCapture?: TouchEventHandler<HTMLDivElement>

OptionalonTouchEnd

onTouchEnd?: TouchEventHandler<HTMLDivElement>

OptionalonTouchEndCapture

onTouchEndCapture?: TouchEventHandler<HTMLDivElement>

OptionalonTouchMove

onTouchMove?: TouchEventHandler<HTMLDivElement>

OptionalonTouchMoveCapture

onTouchMoveCapture?: TouchEventHandler<HTMLDivElement>

OptionalonTouchStart

onTouchStart?: TouchEventHandler<HTMLDivElement>

OptionalonTouchStartCapture

onTouchStartCapture?: TouchEventHandler<HTMLDivElement>

OptionalonTransitionCancel

onTransitionCancel?: TransitionEventHandler<HTMLDivElement>

OptionalonTransitionCancelCapture

onTransitionCancelCapture?: TransitionEventHandler<HTMLDivElement>

OptionalonTransitionEnd

onTransitionEnd?: TransitionEventHandler<HTMLDivElement>

OptionalonTransitionEndCapture

onTransitionEndCapture?: TransitionEventHandler<HTMLDivElement>

OptionalonTransitionRun

onTransitionRun?: TransitionEventHandler<HTMLDivElement>

OptionalonTransitionRunCapture

onTransitionRunCapture?: TransitionEventHandler<HTMLDivElement>

OptionalonTransitionStart

onTransitionStart?: TransitionEventHandler<HTMLDivElement>

OptionalonTransitionStartCapture

onTransitionStartCapture?: TransitionEventHandler<HTMLDivElement>

OptionalonVolumeChange

onVolumeChange?: ReactEventHandler<HTMLDivElement>

OptionalonVolumeChangeCapture

onVolumeChangeCapture?: ReactEventHandler<HTMLDivElement>

OptionalonWaiting

onWaiting?: ReactEventHandler<HTMLDivElement>

OptionalonWaitingCapture

onWaitingCapture?: ReactEventHandler<HTMLDivElement>

OptionalonWheel

onWheel?: WheelEventHandler<HTMLDivElement>

OptionalonWheelCapture

onWheelCapture?: WheelEventHandler<HTMLDivElement>

order

order: ResponsiveStyleValue<(Order | readonly NonNullable<Order | undefined>[] | undefined)> | ((theme: Theme) => ResponsiveStyleValue<(Order | readonly NonNullable<Order | undefined>[] | undefined)>)

overflow

overflow: ResponsiveStyleValue<(readonly string[] | Overflow | undefined)> | ((theme: Theme) => ResponsiveStyleValue<(readonly string[] | Overflow | undefined)>)

p

p: ResponsiveStyleValue<(Padding<string | number> | readonly NonNullable<Padding<string | number> | undefined>[] | undefined)> | ((theme: Theme) => ResponsiveStyleValue<(Padding<string | number> | readonly NonNullable<Padding<string | number> | undefined>[] | undefined)>)

padding

padding: ResponsiveStyleValue<(Padding<string | number> | readonly NonNullable<Padding<string | number> | undefined>[] | undefined)> | ((theme: Theme) => ResponsiveStyleValue<(Padding<string | number> | readonly NonNullable<Padding<string | number> | undefined>[] | undefined)>)

paddingBlock

paddingBlock: ResponsiveStyleValue<(PaddingBlock<string | number> | readonly NonNullable<PaddingBlock<string | number> | undefined>[] | undefined)> | ((theme: Theme) => ResponsiveStyleValue<(PaddingBlock<string | number> | readonly NonNullable<PaddingBlock<string | number> | undefined>[] | undefined)>)

paddingBlockEnd

paddingBlockEnd: ResponsiveStyleValue<(PaddingBlockEnd<string | number> | readonly NonNullable<PaddingBlockEnd<string | number> | undefined>[] | undefined)> | ((theme: Theme) => ResponsiveStyleValue<(PaddingBlockEnd<string | number> | readonly NonNullable<PaddingBlockEnd<string | number> | undefined>[] | undefined)>)

paddingBlockStart

paddingBlockStart: ResponsiveStyleValue<(PaddingBlockStart<string | number> | readonly NonNullable<PaddingBlockStart<string | number> | undefined>[] | undefined)> | ((theme: Theme) => ResponsiveStyleValue<(PaddingBlockStart<string | number> | readonly NonNullable<PaddingBlockStart<string | number> | undefined>[] | undefined)>)

paddingBottom

paddingBottom: ResponsiveStyleValue<(PaddingBottom<string | number> | readonly NonNullable<PaddingBottom<string | number> | undefined>[] | undefined)> | ((theme: Theme) => ResponsiveStyleValue<(PaddingBottom<string | number> | readonly NonNullable<PaddingBottom<string | number> | undefined>[] | undefined)>)

paddingInline

paddingInline: ResponsiveStyleValue<(PaddingInline<string | number> | readonly NonNullable<PaddingInline<string | number> | undefined>[] | undefined)> | ((theme: Theme) => ResponsiveStyleValue<(PaddingInline<string | number> | readonly NonNullable<PaddingInline<string | number> | undefined>[] | undefined)>)

paddingInlineEnd

paddingInlineEnd: ResponsiveStyleValue<(PaddingInlineEnd<string | number> | readonly NonNullable<PaddingInlineEnd<string | number> | undefined>[] | undefined)> | ((theme: Theme) => ResponsiveStyleValue<(PaddingInlineEnd<string | number> | readonly NonNullable<PaddingInlineEnd<string | number> | undefined>[] | undefined)>)

paddingInlineStart

paddingInlineStart: ResponsiveStyleValue<(PaddingInlineStart<string | number> | readonly NonNullable<PaddingInlineStart<string | number> | undefined>[] | undefined)> | ((theme: Theme) => ResponsiveStyleValue<(PaddingInlineStart<string | number> | readonly NonNullable<PaddingInlineStart<string | number> | undefined>[] | undefined)>)

paddingLeft

paddingLeft: ResponsiveStyleValue<(PaddingLeft<string | number> | readonly NonNullable<PaddingLeft<string | number> | undefined>[] | undefined)> | ((theme: Theme) => ResponsiveStyleValue<(PaddingLeft<string | number> | readonly NonNullable<PaddingLeft<string | number> | undefined>[] | undefined)>)

paddingRight

paddingRight: ResponsiveStyleValue<(PaddingRight<string | number> | readonly NonNullable<PaddingRight<string | number> | undefined>[] | undefined)> | ((theme: Theme) => ResponsiveStyleValue<(PaddingRight<string | number> | readonly NonNullable<PaddingRight<string | number> | undefined>[] | undefined)>)

paddingTop

paddingTop: ResponsiveStyleValue<(PaddingTop<string | number> | readonly NonNullable<PaddingTop<string | number> | undefined>[] | undefined)> | ((theme: Theme) => ResponsiveStyleValue<(PaddingTop<string | number> | readonly NonNullable<PaddingTop<string | number> | undefined>[] | undefined)>)

paddingX

paddingX: ResponsiveStyleValue<(PaddingLeft<string | number> | readonly NonNullable<PaddingLeft<string | number> | undefined>[] | undefined)> | ((theme: Theme) => ResponsiveStyleValue<(PaddingLeft<string | number> | readonly NonNullable<PaddingLeft<string | number> | undefined>[] | undefined)>)

paddingY

paddingY: ResponsiveStyleValue<(PaddingTop<string | number> | readonly NonNullable<PaddingTop<string | number> | undefined>[] | undefined)> | ((theme: Theme) => ResponsiveStyleValue<(PaddingTop<string | number> | readonly NonNullable<PaddingTop<string | number> | undefined>[] | undefined)>)

pb

pb: ResponsiveStyleValue<(PaddingBottom<string | number> | readonly NonNullable<PaddingBottom<string | number> | undefined>[] | undefined)> | ((theme: Theme) => ResponsiveStyleValue<(PaddingBottom<string | number> | readonly NonNullable<PaddingBottom<string | number> | undefined>[] | undefined)>)

pl

pl: ResponsiveStyleValue<(PaddingLeft<string | number> | readonly NonNullable<PaddingLeft<string | number> | undefined>[] | undefined)> | ((theme: Theme) => ResponsiveStyleValue<(PaddingLeft<string | number> | readonly NonNullable<PaddingLeft<string | number> | undefined>[] | undefined)>)

Optionalpopover

popover?: "" | "auto" | "manual"

OptionalpopoverTarget

popoverTarget?: string

OptionalpopoverTargetAction

popoverTargetAction?: "toggle" | "hide" | "show"

position

position: ResponsiveStyleValue<(Position | readonly NonNullable<Position | undefined>[] | undefined)> | ((theme: Theme) => ResponsiveStyleValue<(Position | readonly NonNullable<Position | undefined>[] | undefined)>)

pr

pr: ResponsiveStyleValue<(PaddingRight<string | number> | readonly NonNullable<PaddingRight<string | number> | undefined>[] | undefined)> | ((theme: Theme) => ResponsiveStyleValue<(PaddingRight<string | number> | readonly NonNullable<PaddingRight<string | number> | undefined>[] | undefined)>)

Optionalprefix

prefix?: string

Optionalproperty

property?: string

pt

pt: ResponsiveStyleValue<(PaddingTop<string | number> | readonly NonNullable<PaddingTop<string | number> | undefined>[] | undefined)> | ((theme: Theme) => ResponsiveStyleValue<(PaddingTop<string | number> | readonly NonNullable<PaddingTop<string | number> | undefined>[] | undefined)>)

px

px: ResponsiveStyleValue<(PaddingLeft<string | number> | readonly NonNullable<PaddingLeft<string | number> | undefined>[] | undefined)> | ((theme: Theme) => ResponsiveStyleValue<(PaddingLeft<string | number> | readonly NonNullable<PaddingLeft<string | number> | undefined>[] | undefined)>)

py

py: ResponsiveStyleValue<(PaddingTop<string | number> | readonly NonNullable<PaddingTop<string | number> | undefined>[] | undefined)> | ((theme: Theme) => ResponsiveStyleValue<(PaddingTop<string | number> | readonly NonNullable<PaddingTop<string | number> | undefined>[] | undefined)>)

OptionalradioGroup

radioGroup?: string

Optionalref

ref?: Ref<unknown>

Optionalrel

rel?: string

Optionalresource

resource?: string

Optionalresults

results?: number

Optionalrev

rev?: string

right

right: ResponsiveStyleValue<(Right<string | number> | readonly NonNullable<Right<string | number> | undefined>[] | undefined)> | ((theme: Theme) => ResponsiveStyleValue<(Right<string | number> | readonly NonNullable<Right<string | number> | undefined>[] | undefined)>)

Optionalrole

role?: AriaRole

OptionalrootSx

rootSx?: SxProps<Theme>

Custom styles to be applied to the root container of the image.

rowGap

rowGap: ResponsiveStyleValue<(RowGap<string | number> | readonly NonNullable<RowGap<string | number> | undefined>[] | undefined)> | ((theme: Theme) => ResponsiveStyleValue<(RowGap<string | number> | readonly NonNullable<RowGap<string | number> | undefined>[] | undefined)>)

Optionalsecurity

security?: string

Optionalslot

slot?: string

OptionalspellCheck

spellCheck?: Booleanish

src

src: string

The URL of the image to be displayed.

OptionalsrcSet

srcSet?: string

Specifies an optional 'srcset' attribute for the image element.

Optionalstyle

style?: CSSProperties

OptionalsuppressContentEditableWarning

suppressContentEditableWarning?: boolean

OptionalsuppressHydrationWarning

suppressHydrationWarning?: boolean

Optionalsx

sx?: SxProps<Theme>

The system prop that allows defining system overrides as well as additional CSS styles.

OptionaltabIndex

tabIndex?: number

textAlign

textAlign: ResponsiveStyleValue<(TextAlign | readonly NonNullable<TextAlign | undefined>[] | undefined)> | ((theme: Theme) => ResponsiveStyleValue<(TextAlign | readonly NonNullable<TextAlign | undefined>[] | undefined)>)

textOverflow

textOverflow: ResponsiveStyleValue<(readonly string[] | TextOverflow | undefined)> | ((theme: Theme) => ResponsiveStyleValue<(readonly string[] | TextOverflow | undefined)>)

textTransform

textTransform: ResponsiveStyleValue<(TextTransform | readonly NonNullable<TextTransform | undefined>[] | undefined)> | ((theme: Theme) => ResponsiveStyleValue<(TextTransform | readonly NonNullable<TextTransform | undefined>[] | undefined)>)

Optionaltitle

title?: string

top

top: ResponsiveStyleValue<(Top<string | number> | readonly NonNullable<Top<string | number> | undefined>[] | undefined)> | ((theme: Theme) => ResponsiveStyleValue<(Top<string | number> | readonly NonNullable<Top<string | number> | undefined>[] | undefined)>)

Optionaltranslate

translate?: "yes" | "no"

Optionaltw

tw?: string

Specify styles using Tailwind CSS classes. This feature is currently experimental. If style prop is also specified, styles generated with tw prop will be overridden.

Example:

  • tw='w-full h-full bg-blue-200'
  • tw='text-9xl'
  • tw='text-[80px]'

Optionaltypeof

typeof?: string

typography

typography: ResponsiveStyleValue<undefined | string> | ((theme: Theme) => ResponsiveStyleValue<undefined | string>)

Optionalunselectable

unselectable?: "on" | "off"

visibility

visibility: ResponsiveStyleValue<(Visibility | readonly NonNullable<Visibility | undefined>[] | undefined)> | ((theme: Theme) => ResponsiveStyleValue<(Visibility | readonly NonNullable<Visibility | undefined>[] | undefined)>)

Optionalvocab

vocab?: string

whiteSpace

whiteSpace: ResponsiveStyleValue<(readonly string[] | WhiteSpace | undefined)> | ((theme: Theme) => ResponsiveStyleValue<(readonly string[] | WhiteSpace | undefined)>)

width

width: ResponsiveStyleValue<(Width<string | number> | readonly NonNullable<Width<string | number> | undefined>[] | undefined)> | ((theme: Theme) => ResponsiveStyleValue<(Width<string | number> | readonly NonNullable<Width<string | number> | undefined>[] | undefined)>)

zIndex

zIndex: ResponsiveStyleValue<
    | undefined
    | string
    | string & {}
    | number & {}> | ((theme: Theme) => ResponsiveStyleValue<
    | undefined
    | string
    | string & {}
    | number & {}>)

Settings

Member Visibility

On This Page

Properties
aboutaccessKeyalignContentalignItemsalignSelfaltaria-activedescendantaria-atomicaria-autocompletearia-braillelabelaria-brailleroledescriptionaria-busyaria-checkedaria-colcountaria-colindexaria-colindextextaria-colspanaria-controlsaria-currentaria-describedbyaria-descriptionaria-detailsaria-disabledaria-dropeffectaria-errormessagearia-expandedaria-flowtoaria-grabbedaria-haspopuparia-hiddenaria-invalidaria-keyshortcutsaria-labelaria-labelledbyaria-levelaria-livearia-modalaria-multilinearia-multiselectablearia-orientationaria-ownsaria-placeholderaria-posinsetaria-pressedaria-readonlyaria-relevantaria-requiredaria-roledescriptionaria-rowcountaria-rowindexaria-rowindextextaria-rowspanaria-selectedaria-setsizearia-sortaria-valuemaxaria-valueminaria-valuenowaria-valuetextaspectRatioautoCapitalizeautoCorrectautoFocusautoSavebgcolorborderborderBottomborderColorborderLeftborderRadiusborderRightborderTopbottomboxShadowboxSizingchildrenclassesclassNamecolorcolumnGapcomponentcontentcontentEditablecontextMenucustomAttributedangerouslySetInnerHTMLdatatypedefaultCheckeddefaultValuedirdisplaydisplayPrintdraggableenterKeyHinterrorFallbackflexflexBasisflexDirectionflexGrowflexShrinkflexWrapfontFamilyfontSizefontStylefontWeightgapgridAreagridAutoColumnsgridAutoFlowgridAutoRowsgridColumngridRowgridTemplateAreasgridTemplateColumnsgridTemplateRowsheighthiddenidimageSxinertinlistinputModeisisLoadingitemIDitemPropitemRefitemScopeitemTypejustifyContentjustifyItemsjustifySelfkeylangleftletterSpacinglineHeightloadingFallbackmmarginmarginBlockmarginBlockEndmarginBlockStartmarginBottommarginInlinemarginInlineEndmarginInlineStartmarginLeftmarginRightmarginTopmarginXmarginYmaxHeightmaxWidthmbminHeightminWidthmlmrmtmxmynonceonAbortonAbortCaptureonAnimationEndonAnimationEndCaptureonAnimationIterationonAnimationIterationCaptureonAnimationStartonAnimationStartCaptureonAuxClickonAuxClickCaptureonBeforeInputonBeforeInputCaptureonBeforeToggleonBluronBlurCaptureonCanPlayonCanPlayCaptureonCanPlayThroughonCanPlayThroughCaptureonChangeonChangeCaptureonClickonClickCaptureonCompositionEndonCompositionEndCaptureonCompositionStartonCompositionStartCaptureonCompositionUpdateonCompositionUpdateCaptureonContextMenuonContextMenuCaptureonCopyonCopyCaptureonCutonCutCaptureonDoubleClickonDoubleClickCaptureonDragonDragCaptureonDragEndonDragEndCaptureonDragEnteronDragEnterCaptureonDragExitonDragExitCaptureonDragLeaveonDragLeaveCaptureonDragOveronDragOverCaptureonDragStartonDragStartCaptureonDroponDropCaptureonDurationChangeonDurationChangeCaptureonEmptiedonEmptiedCaptureonEncryptedonEncryptedCaptureonEndedonEndedCaptureonErroronErrorCaptureonFocusonFocusCaptureonGotPointerCaptureonGotPointerCaptureCaptureonInputonInputCaptureonInvalidonInvalidCaptureonKeyDownonKeyDownCaptureonKeyPressonKeyPressCaptureonKeyUponKeyUpCaptureonLoadonLoadCaptureonLoadedDataonLoadedDataCaptureonLoadedMetadataonLoadedMetadataCaptureonLoadStartonLoadStartCaptureonLostPointerCaptureonLostPointerCaptureCaptureonMouseDownonMouseDownCaptureonMouseEnteronMouseLeaveonMouseMoveonMouseMoveCaptureonMouseOutonMouseOutCaptureonMouseOveronMouseOverCaptureonMouseUponMouseUpCaptureonPasteonPasteCaptureonPauseonPauseCaptureonPlayonPlayCaptureonPlayingonPlayingCaptureonPointerCancelonPointerCancelCaptureonPointerDownonPointerDownCaptureonPointerEnteronPointerLeaveonPointerMoveonPointerMoveCaptureonPointerOutonPointerOutCaptureonPointerOveronPointerOverCaptureonPointerUponPointerUpCaptureonProgressonProgressCaptureonRateChangeonRateChangeCaptureonResetonResetCaptureonResizeonResizeCaptureonScrollonScrollCaptureonSeekedonSeekedCaptureonSeekingonSeekingCaptureonSelectonSelectCaptureonStalledonStalledCaptureonSubmitonSubmitCaptureonSuspendonSuspendCaptureonTimeUpdateonTimeUpdateCaptureonToggleonTouchCancelonTouchCancelCaptureonTouchEndonTouchEndCaptureonTouchMoveonTouchMoveCaptureonTouchStartonTouchStartCaptureonTransitionCancelonTransitionCancelCaptureonTransitionEndonTransitionEndCaptureonTransitionRunonTransitionRunCaptureonTransitionStartonTransitionStartCaptureonVolumeChangeonVolumeChangeCaptureonWaitingonWaitingCaptureonWheelonWheelCaptureorderoverflowppaddingpaddingBlockpaddingBlockEndpaddingBlockStartpaddingBottompaddingInlinepaddingInlineEndpaddingInlineStartpaddingLeftpaddingRightpaddingToppaddingXpaddingYpbplpopoverpopoverTargetpopoverTargetActionpositionprprefixpropertyptpxpyradioGrouprefrelresourceresultsrevrightrolerootSxrowGapsecurityslotspellChecksrcsrcSetstylesuppressContentEditableWarningsuppressHydrationWarningsxtabIndextextAligntextOverflowtextTransformtitletoptranslatetwtypeoftypographyunselectablevisibilityvocabwhiteSpacewidthzIndex