interface LinkItemProps {
    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)>;
    bgcolor?:
        | ResponsiveStyleValue<
            (readonly string[] | BackgroundColor | undefined),
        >
        | (
            theme: Theme,
        ) => ResponsiveStyleValue<
            (readonly string[] | BackgroundColor | undefined),
        >;
    border?:
        | ResponsiveStyleValue<
            | undefined
            | number
            | "white"
            | "red"
            | "orange"
            | string & {}
            | "inset"
            | "-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"
            | "orangered"
            | "orchid"
            | "palegoldenrod"
            | "palegreen"
            | "paleturquoise"
            | "palevioletred"
            | "papayawhip"
            | "peachpuff"
            | "peru"
            | "pink"
            | "plum"
            | "powderblue"
            | "purple"
            | "rebeccapurple"
            | "rosybrown"
            | "royalblue"
            | "saddlebrown"
            | "salmon"
            | "sandybrown"
            | "seagreen"
            | "seashell"
            | "sienna"
            | "silver"
            | "skyblue"
            | "slateblue"
            | "slategray"
            | "slategrey"
            | "snow"
            | "springgreen"
            | "steelblue"
            | "tan"
            | "teal"
            | "thistle"
            | "tomato"
            | "transparent"
            | "turquoise"
            | "violet"
            | "wheat"
            | "whitesmoke"
            | "yellow"
            | "yellowgreen"
            | "ActiveBorder"
            | "ActiveCaption"
            | "AppWorkspace"
            | "Background"
            | "ButtonFace"
            | "ButtonHighlight"
            | "ButtonShadow"
            | "ButtonText"
            | "CaptionText"
            | "GrayText"
            | "Highlight"
            | "HighlightText"
            | "InactiveBorder"
            | "InactiveCaption"
            | "InactiveCaptionText"
            | "InfoBackground"
            | "InfoText"
            | "Menu"
            | "MenuText"
            | "Scrollbar"
            | "ThreeDDarkShadow"
            | "ThreeDFace"
            | "ThreeDHighlight"
            | "ThreeDLightShadow"
            | "ThreeDShadow"
            | "Window"
            | "WindowFrame"
            | "WindowText"
            | "currentcolor"
            | "none"
            | "hidden"
            | "dashed"
            | "dotted"
            | "double"
            | "groove"
            | "outset"
            | "ridge"
            | "solid"
            | "medium"
            | "thick"
            | "thin",
        >
        | (
            theme: Theme,
        ) => ResponsiveStyleValue<
            | undefined
            | number
            | "white"
            | "red"
            | "orange"
            | string & {}
            | "inset"
            | "-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"
            | "orangered"
            | "orchid"
            | "palegoldenrod"
            | "palegreen"
            | "paleturquoise"
            | "palevioletred"
            | "papayawhip"
            | "peachpuff"
            | "peru"
            | "pink"
            | "plum"
            | "powderblue"
            | "purple"
            | "rebeccapurple"
            | "rosybrown"
            | "royalblue"
            | "saddlebrown"
            | "salmon"
            | "sandybrown"
            | "seagreen"
            | "seashell"
            | "sienna"
            | "silver"
            | "skyblue"
            | "slateblue"
            | "slategray"
            | "slategrey"
            | "snow"
            | "springgreen"
            | "steelblue"
            | "tan"
            | "teal"
            | "thistle"
            | "tomato"
            | "transparent"
            | "turquoise"
            | "violet"
            | "wheat"
            | "whitesmoke"
            | "yellow"
            | "yellowgreen"
            | "ActiveBorder"
            | "ActiveCaption"
            | "AppWorkspace"
            | "Background"
            | "ButtonFace"
            | "ButtonHighlight"
            | "ButtonShadow"
            | "ButtonText"
            | "CaptionText"
            | "GrayText"
            | "Highlight"
            | "HighlightText"
            | "InactiveBorder"
            | "InactiveCaption"
            | "InactiveCaptionText"
            | "InfoBackground"
            | "InfoText"
            | "Menu"
            | "MenuText"
            | "Scrollbar"
            | "ThreeDDarkShadow"
            | "ThreeDFace"
            | "ThreeDHighlight"
            | "ThreeDLightShadow"
            | "ThreeDShadow"
            | "Window"
            | "WindowFrame"
            | "WindowText"
            | "currentcolor"
            | "none"
            | "hidden"
            | "dashed"
            | "dotted"
            | "double"
            | "groove"
            | "outset"
            | "ridge"
            | "solid"
            | "medium"
            | "thick"
            | "thin",
        >;
    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
            ),
        >;
    boxStyle?: SxProps<Theme>;
    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
            ),
        >;
    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)>;
    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
        ),
    >;
    icon?: ReactNode;
    infoText?: 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)>;
    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
        ),
    >;
    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
        ),
    >;
    onClick?: () => void;
    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
        ),
    >;
    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
            ),
        >;
    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
        ),
    >;
    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
        ),
    >;
    rightIcon?: ReactNode;
    rightIconBackgroundColor?: | "primary"
    | "blue5"
    | "white"
    | "textFaded"
    | "navigation"
    | "navigationTop"
    | "navigationSide"
    | "background"
    | "drawer"
    | "cards"
    | "cardDivider"
    | "cardSectionSeparator"
    | "fieldsOnCard"
    | "fieldsFloating"
    | "buttonSecondary"
    | "iconsDisabled"
    | "red"
    | "orange"
    | "greenDark"
    | "greenLight"
    | "text"
    | "redDark"
    | "orangeDark"
    | "greenDark2"
    | "blueDark"
    | "lineColor"
    | "iconButtonBg";
    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
        ),
    >;
    text: string;
    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
            ),
        >;
    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
        ),
    >;
    typography?: | ResponsiveStyleValue<undefined | string>
    | (theme: Theme) => ResponsiveStyleValue<undefined | string>;
    url: string;
    visibility?:
        | ResponsiveStyleValue<
            (
                Visibility | readonly NonNullable<Visibility | undefined>[] | undefined
            ),
        >
        | (
            theme: Theme,
        ) => ResponsiveStyleValue<
            (
                Visibility | readonly NonNullable<Visibility | undefined>[] | undefined
            ),
        >;
    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
    • LinkItemProps

Properties

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)>
bgcolor?:
    | ResponsiveStyleValue<
        (readonly string[] | BackgroundColor | undefined),
    >
    | (
        theme: Theme,
    ) => ResponsiveStyleValue<
        (readonly string[] | BackgroundColor | undefined),
    >
border?:
    | ResponsiveStyleValue<
        | undefined
        | number
        | "white"
        | "red"
        | "orange"
        | string & {}
        | "inset"
        | "-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"
        | "orangered"
        | "orchid"
        | "palegoldenrod"
        | "palegreen"
        | "paleturquoise"
        | "palevioletred"
        | "papayawhip"
        | "peachpuff"
        | "peru"
        | "pink"
        | "plum"
        | "powderblue"
        | "purple"
        | "rebeccapurple"
        | "rosybrown"
        | "royalblue"
        | "saddlebrown"
        | "salmon"
        | "sandybrown"
        | "seagreen"
        | "seashell"
        | "sienna"
        | "silver"
        | "skyblue"
        | "slateblue"
        | "slategray"
        | "slategrey"
        | "snow"
        | "springgreen"
        | "steelblue"
        | "tan"
        | "teal"
        | "thistle"
        | "tomato"
        | "transparent"
        | "turquoise"
        | "violet"
        | "wheat"
        | "whitesmoke"
        | "yellow"
        | "yellowgreen"
        | "ActiveBorder"
        | "ActiveCaption"
        | "AppWorkspace"
        | "Background"
        | "ButtonFace"
        | "ButtonHighlight"
        | "ButtonShadow"
        | "ButtonText"
        | "CaptionText"
        | "GrayText"
        | "Highlight"
        | "HighlightText"
        | "InactiveBorder"
        | "InactiveCaption"
        | "InactiveCaptionText"
        | "InfoBackground"
        | "InfoText"
        | "Menu"
        | "MenuText"
        | "Scrollbar"
        | "ThreeDDarkShadow"
        | "ThreeDFace"
        | "ThreeDHighlight"
        | "ThreeDLightShadow"
        | "ThreeDShadow"
        | "Window"
        | "WindowFrame"
        | "WindowText"
        | "currentcolor"
        | "none"
        | "hidden"
        | "dashed"
        | "dotted"
        | "double"
        | "groove"
        | "outset"
        | "ridge"
        | "solid"
        | "medium"
        | "thick"
        | "thin",
    >
    | (
        theme: Theme,
    ) => ResponsiveStyleValue<
        | undefined
        | number
        | "white"
        | "red"
        | "orange"
        | string & {}
        | "inset"
        | "-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"
        | "orangered"
        | "orchid"
        | "palegoldenrod"
        | "palegreen"
        | "paleturquoise"
        | "palevioletred"
        | "papayawhip"
        | "peachpuff"
        | "peru"
        | "pink"
        | "plum"
        | "powderblue"
        | "purple"
        | "rebeccapurple"
        | "rosybrown"
        | "royalblue"
        | "saddlebrown"
        | "salmon"
        | "sandybrown"
        | "seagreen"
        | "seashell"
        | "sienna"
        | "silver"
        | "skyblue"
        | "slateblue"
        | "slategray"
        | "slategrey"
        | "snow"
        | "springgreen"
        | "steelblue"
        | "tan"
        | "teal"
        | "thistle"
        | "tomato"
        | "transparent"
        | "turquoise"
        | "violet"
        | "wheat"
        | "whitesmoke"
        | "yellow"
        | "yellowgreen"
        | "ActiveBorder"
        | "ActiveCaption"
        | "AppWorkspace"
        | "Background"
        | "ButtonFace"
        | "ButtonHighlight"
        | "ButtonShadow"
        | "ButtonText"
        | "CaptionText"
        | "GrayText"
        | "Highlight"
        | "HighlightText"
        | "InactiveBorder"
        | "InactiveCaption"
        | "InactiveCaptionText"
        | "InfoBackground"
        | "InfoText"
        | "Menu"
        | "MenuText"
        | "Scrollbar"
        | "ThreeDDarkShadow"
        | "ThreeDFace"
        | "ThreeDHighlight"
        | "ThreeDLightShadow"
        | "ThreeDShadow"
        | "Window"
        | "WindowFrame"
        | "WindowText"
        | "currentcolor"
        | "none"
        | "hidden"
        | "dashed"
        | "dotted"
        | "double"
        | "groove"
        | "outset"
        | "ridge"
        | "solid"
        | "medium"
        | "thick"
        | "thin",
    >
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),
    >
boxStyle?: SxProps<Theme>

Optional style Box for custom styling.

className?: string

Optional class name for custom styling.

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
        ),
    >
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)>
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
        ),
    >
icon?: ReactNode

Optional icon to display next to the link text.

infoText?: string

Optional info text to display

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)>
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
        ),
    >
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
        ),
    >
onClick?: () => void

Optional function to call when the link is clicked.

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
        ),
    >
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
        ),
    >
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
        ),
    >
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
        ),
    >
rightIcon?: ReactNode

Optional icon to render on the right side of the link.

rightIconBackgroundColor?:
    | "primary"
    | "blue5"
    | "white"
    | "textFaded"
    | "navigation"
    | "navigationTop"
    | "navigationSide"
    | "background"
    | "drawer"
    | "cards"
    | "cardDivider"
    | "cardSectionSeparator"
    | "fieldsOnCard"
    | "fieldsFloating"
    | "buttonSecondary"
    | "iconsDisabled"
    | "red"
    | "orange"
    | "greenDark"
    | "greenLight"
    | "text"
    | "redDark"
    | "orangeDark"
    | "greenDark2"
    | "blueDark"
    | "lineColor"
    | "iconButtonBg"

The background color for the right icon's container.

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
        ),
    >
text: string

The text to display for the link.

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
        ),
    >
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
        ),
    >
typography?:
    | ResponsiveStyleValue<undefined | string>
    | (theme: Theme) => ResponsiveStyleValue<undefined | string>
url: string

The URL to navigate to when the link is clicked.

visibility?:
    | ResponsiveStyleValue<
        (
            Visibility | readonly NonNullable<Visibility | undefined>[] | undefined
        ),
    >
    | (
        theme: Theme,
    ) => ResponsiveStyleValue<
        (
            Visibility | readonly NonNullable<Visibility | undefined>[] | undefined
        ),
    >
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 & {}>