@wistia/ui 0.0.1 → 0.0.3

package/dist/index.d.cts

@@ -1,6 +1,7 @@
 import * as react_jsx_runtime from 'react/jsx-runtime';
 import * as react from 'react';
 import { ReactNode, JSX, ComponentPropsWithoutRef, ComponentPropsWithRef, MouseEvent, JSXElementConstructor, ElementType as ElementType$1 } from 'react';
+import { LinkProps as LinkProps$1 } from 'react-router-dom';
 import * as styled_components from 'styled-components';
 
 type UIProviderProps = {
@@ -16,6 +17,19 @@ declare const UIProvider: ({ children }: UIProviderProps) => react_jsx_runtime.J
  */
 declare const copyToClipboard: (textToCopy: string) => Promise<void>;
 
+declare const mq: {
+    xsAndUp: () => string;
+    smAndUp: () => string;
+    mdAndUp: () => string;
+    lgAndUp: () => string;
+    xlAndUp: () => string;
+    xsAndDown: () => string;
+    smAndDown: () => string;
+    mdAndDown: () => string;
+    lgAndDown: () => string;
+    xlAndDown: () => string;
+};
+
 type MediaQueryBooleans = {
     isXlAndUp: boolean;
     isLgAndUp: boolean;
@@ -151,7 +165,58 @@ type ButtonVariants = 'ghost' | 'outline' | 'soft' | 'solid';
 
 type ColorSchemeTypes = 'inherit' | 'default' | 'info' | 'success' | 'warning' | 'error' | 'blue' | 'green' | 'orange' | 'pink' | 'purple' | 'yellow';
 
-type LinkTypes = 'default' | 'email' | 'external' | 'phone';
+type LinkTypes = 'default' | 'email' | 'external' | 'phone';
+type BaseProps = {
+    /**
+     * A Promise to invoke before navigating to location.
+     * _Caution: if used with `external` type prop a new window will **not** be opened_
+     */
+    beforeAction?: (() => Promise<void>) | (() => void);
+    /**
+     * Text that appears inside of the link
+     *
+     * @type ReactNode
+     */
+    children: ReactNode;
+    /**
+     * Set the color scheme of the button
+     * TODO - link to a color scheme page
+     */
+    colorScheme?: ColorSchemeTypes;
+    /**
+     * Disables the link
+     */
+    disabled?: boolean;
+    /**
+     * Type of link to display
+     *
+     *   * `email` creates a mailto
+     *   * `phone` creates a telephone number
+     *   * `external` will open links in a new window
+     */
+    type?: LinkTypes | undefined;
+    /**
+     * Whether the link should be underlined
+     */
+    underline?: boolean;
+};
+type LinkAsLinkProps = BaseProps & ComponentPropsWithRef<'a'> & Omit<LinkProps$1, 'to'> & {
+    href: string | undefined;
+    type?: LinkTypes;
+};
+type LinkAsButtonProps = BaseProps & ComponentPropsWithRef<'button'> & {
+    href?: never;
+    type?: 'button' | 'reset' | 'submit';
+};
+type LinkProps = LinkAsButtonProps | LinkAsLinkProps;
+/**
+ * Links are used for navigation. If no `href` is supplied, a button that is visually styled to apper as a link
+ * is used. If used in a react-router context, their [Link](https://reactrouter.com/en/main/components/link). component is used, otherwise a native a tag.
+ * This means in addition to its own props, `Link` can use props from `react-router-dom`'s `Link` component. View their documentation [here](https://reactrouter.com/en/main/components/link).
+ * The one prop we ignore from react-router is `to`. We use `href` instead and map it under the hood.
+ *
+ */
+declare const Link: react.ForwardRefExoticComponent<(Omit<LinkAsLinkProps, "ref"> | Omit<LinkAsButtonProps, "ref">) & react.RefAttributes<HTMLAnchorElement | HTMLButtonElement>>;
 
 type Breakpoints = 'isLgAndDown' | 'isLgAndUp' | 'isMdAndDown' | 'isMdAndUp' | 'isSmAndDown' | 'isSmAndUp' | 'isXlAndDown' | 'isXlAndUp' | 'isXsAndDown' | 'isXsAndUp';
 type AtLeastOneBreakpoint<T, U = {
@@ -637,6 +702,45 @@ declare const Icon: {
     displayName: string;
 };
 
+type IconButtonProps = {
+    /**
+     * Accessible text for screen readers. Also shows up in a tooltip unless `disableTooltip` is true.
+     */
+    label: string;
+    /** Disable the tooltip */
+    disableTooltip?: boolean;
+    /**
+     * The Icon component to use, e.g. `<Icon type="favorite" />`
+     */
+    children: JSX.Element;
+} & (Omit<ButtonAsButtonProps, 'fullWidth' | 'leftIcon' | 'rightIcon'> | Omit<ButtonAsLinkProps, 'fullWidth' | 'leftIcon' | 'rightIcon'>);
+/**
+ * IconButton behaves like a [Button](?path=/docs/ui-components-button--docs), but only accepts an Icon as a child.
+ */
+declare const IconButton: react.ForwardRefExoticComponent<(Omit<{
+    /**
+     * Accessible text for screen readers. Also shows up in a tooltip unless `disableTooltip` is true.
+     */
+    label: string;
+    /** Disable the tooltip */
+    disableTooltip?: boolean;
+    /**
+     * The Icon component to use, e.g. `<Icon type="favorite" />`
+     */
+    children: JSX.Element;
+} & Omit<ButtonAsButtonProps, "leftIcon" | "fullWidth" | "rightIcon">, "ref"> | Omit<{
+    /**
+     * Accessible text for screen readers. Also shows up in a tooltip unless `disableTooltip` is true.
+     */
+    label: string;
+    /** Disable the tooltip */
+    disableTooltip?: boolean;
+    /**
+     * The Icon component to use, e.g. `<Icon type="favorite" />`
+     */
+    children: JSX.Element;
+} & Omit<ButtonAsLinkProps, "leftIcon" | "fullWidth" | "rightIcon">, "ref">) & react.RefAttributes<HTMLAnchorElement | HTMLButtonElement>>;
+
 type ScreenReaderOnlyProps = ComponentPropsWithoutRef<'div'> & {
     /**
      * Pass an arbitrary child node
@@ -699,7 +803,8 @@ declare const variantStyleMap: {
     label4: styled_components.FlattenSimpleInterpolation;
 };
 declare const prominenceMap: {
-    primary: styled_components.FlattenSimpleInterpolation;
+    highContrast: styled_components.FlattenSimpleInterpolation;
+    vibrant: styled_components.FlattenSimpleInterpolation;
     secondary: styled_components.FlattenSimpleInterpolation;
 };
 type TextProps = ComponentPropsWithoutRef<'div'> & {
@@ -736,7 +841,7 @@ type TextProps = ComponentPropsWithoutRef<'div'> & {
      */
     preventUserSelect?: boolean;
     /**
-     * The prominence of the text. This affects the color of the text
+     * Text prominence affects color. Use 'highContrast' for main non-interactive text, 'vibrant' for interactive elements, and 'secondary' for less important or supplementary content.
      */
     prominence?: keyof typeof prominenceMap;
     renderAs?: ElementType$1;
@@ -781,7 +886,7 @@ declare const Text: (<C = "div">(props: PolymorphicComponentProps<C, TextProps>)
      */
     preventUserSelect?: boolean;
     /**
-     * The prominence of the text. This affects the color of the text
+     * Text prominence affects color. Use 'highContrast' for main non-interactive text, 'vibrant' for interactive elements, and 'secondary' for less important or supplementary content.
      */
     prominence?: keyof typeof prominenceMap;
     renderAs?: ElementType$1;
@@ -825,7 +930,7 @@ declare const Text: (<C = "div">(props: PolymorphicComponentProps<C, TextProps>)
      */
     preventUserSelect?: boolean;
     /**
-     * The prominence of the text. This affects the color of the text
+     * Text prominence affects color. Use 'highContrast' for main non-interactive text, 'vibrant' for interactive elements, and 'secondary' for less important or supplementary content.
      */
     prominence?: keyof typeof prominenceMap;
     renderAs?: ElementType$1;
@@ -837,44 +942,6 @@ declare const Text: (<C = "div">(props: PolymorphicComponentProps<C, TextProps>)
     renderAs: react.JSXElementConstructor<any> | keyof react.JSX.IntrinsicElements;
 })>, never> & Record<string, never>;
 
-type WistiaLogoProps = Omit<ComponentPropsWithoutRef<'svg'>, 'href'> & {
-    /**
-     * An optional accessible description for the logo
-     */
-    description?: string;
-    /**
-     * Height, in pixels, of the logo
-     */
-    height?: number;
-    /**
-     * @ignore
-     * Change the color when hovering over the logo
-     */
-    hoverColor?: string;
-    /**
-     * Display just the icon portion of the logo (ie. hide `Wistia` text)
-     * note: there is no analogue to this because by brand guidelines, the
-     * `Wistia` text must not be displayed without the "flags" iconography
-     */
-    iconOnly?: boolean;
-    /**
-     * If provided, will wrap the logo in a link
-     */
-    href?: string;
-    /**
-     * An accessible title for the logo (defaults to "Wistia Logo")
-     */
-    title?: string;
-    /**
-     * Style of the logo
-     */
-    variant?: 'dark' | 'light' | 'standard';
-};
-declare const WistiaLogo: {
-    ({ description, height, hoverColor, href, iconOnly, title, variant, ...otherProps }: WistiaLogoProps): react_jsx_runtime.JSX.Element;
-    displayName: string;
-};
-
 type TooltipProps = {
     /**
      * The content of the tooltip
@@ -914,43 +981,42 @@ declare const Tooltip: {
     displayName: string;
 };
 
-type IconButtonProps = {
+type WistiaLogoProps = Omit<ComponentPropsWithoutRef<'svg'>, 'href'> & {
     /**
-     * Accessible text for screen readers. Also shows up in a tooltip unless `disableTooltip` is true.
+     * An optional accessible description for the logo
      */
-    label: string;
-    /** Disable the tooltip */
-    disableTooltip?: boolean;
+    description?: string;
     /**
-     * The Icon component to use, e.g. `<Icon type="favorite" />`
+     * Height, in pixels, of the logo
      */
-    children: JSX.Element;
-} & (Omit<ButtonAsButtonProps, 'fullWidth' | 'leftIcon' | 'rightIcon'> | Omit<ButtonAsLinkProps, 'fullWidth' | 'leftIcon' | 'rightIcon'>);
-/**
- * IconButton behaves like a [Button](?path=/docs/ui-components-button--docs), but only accepts an Icon as a child.
- */
-declare const IconButton: react.ForwardRefExoticComponent<(Omit<{
+    height?: number;
     /**
-     * Accessible text for screen readers. Also shows up in a tooltip unless `disableTooltip` is true.
+     * @ignore
+     * Change the color when hovering over the logo
      */
-    label: string;
-    /** Disable the tooltip */
-    disableTooltip?: boolean;
+    hoverColor?: string;
     /**
-     * The Icon component to use, e.g. `<Icon type="favorite" />`
+     * Display just the icon portion of the logo (ie. hide `Wistia` text)
+     * note: there is no analogue to this because by brand guidelines, the
+     * `Wistia` text must not be displayed without the "flags" iconography
      */
-    children: JSX.Element;
-} & Omit<ButtonAsButtonProps, "leftIcon" | "fullWidth" | "rightIcon">, "ref"> | Omit<{
+    iconOnly?: boolean;
     /**
-     * Accessible text for screen readers. Also shows up in a tooltip unless `disableTooltip` is true.
+     * If provided, will wrap the logo in a link
      */
-    label: string;
-    /** Disable the tooltip */
-    disableTooltip?: boolean;
+    href?: string;
     /**
-     * The Icon component to use, e.g. `<Icon type="favorite" />`
+     * An accessible title for the logo (defaults to "Wistia Logo")
      */
-    children: JSX.Element;
-} & Omit<ButtonAsLinkProps, "leftIcon" | "fullWidth" | "rightIcon">, "ref">) & react.RefAttributes<HTMLAnchorElement | HTMLButtonElement>>;
+    title?: string;
+    /**
+     * Style of the logo
+     */
+    variant?: 'dark' | 'light' | 'standard';
+};
+declare const WistiaLogo: {
+    ({ description, height, hoverColor, href, iconOnly, title, variant, ...otherProps }: WistiaLogoProps): react_jsx_runtime.JSX.Element;
+    displayName: string;
+};
 
-export { Box, Button, ButtonGroup, type ButtonProps, Divider, Ellipsis, Heading, type HeadingProps, Icon, IconButton, type IconButtonProps, type IconNameType, ScreenReaderOnly, Stack, Text, type TextProps, Tooltip, type TooltipProps, UIProvider, WistiaLogo, copyToClipboard, ellipsisFlexParentStyle, ellipsisStyle, iconSizeMap, useActiveMq, useAriaLive, useMq, useWindowSize };
+export { Box, Button, ButtonGroup, type ButtonProps, Divider, Ellipsis, Heading, type HeadingProps, Icon, IconButton, type IconButtonProps, type IconNameType, Link, type LinkProps, ScreenReaderOnly, Stack, Text, type TextProps, Tooltip, type TooltipProps, UIProvider, WistiaLogo, copyToClipboard, ellipsisFlexParentStyle, ellipsisStyle, iconSizeMap, mq, useActiveMq, useAriaLive, useMq, useWindowSize };

package/dist/index.d.ts

@@ -1,6 +1,7 @@
 import * as react_jsx_runtime from 'react/jsx-runtime';
 import * as react from 'react';
 import { ReactNode, JSX, ComponentPropsWithoutRef, ComponentPropsWithRef, MouseEvent, JSXElementConstructor, ElementType as ElementType$1 } from 'react';
+import { LinkProps as LinkProps$1 } from 'react-router-dom';
 import * as styled_components from 'styled-components';
 
 type UIProviderProps = {
@@ -16,6 +17,19 @@ declare const UIProvider: ({ children }: UIProviderProps) => react_jsx_runtime.J
  */
 declare const copyToClipboard: (textToCopy: string) => Promise<void>;
 
+declare const mq: {
+    xsAndUp: () => string;
+    smAndUp: () => string;
+    mdAndUp: () => string;
+    lgAndUp: () => string;
+    xlAndUp: () => string;
+    xsAndDown: () => string;
+    smAndDown: () => string;
+    mdAndDown: () => string;
+    lgAndDown: () => string;
+    xlAndDown: () => string;
+};
+
 type MediaQueryBooleans = {
     isXlAndUp: boolean;
     isLgAndUp: boolean;
@@ -151,7 +165,58 @@ type ButtonVariants = 'ghost' | 'outline' | 'soft' | 'solid';
 
 type ColorSchemeTypes = 'inherit' | 'default' | 'info' | 'success' | 'warning' | 'error' | 'blue' | 'green' | 'orange' | 'pink' | 'purple' | 'yellow';
 
-type LinkTypes = 'default' | 'email' | 'external' | 'phone';
+type LinkTypes = 'default' | 'email' | 'external' | 'phone';
+type BaseProps = {
+    /**
+     * A Promise to invoke before navigating to location.
+     * _Caution: if used with `external` type prop a new window will **not** be opened_
+     */
+    beforeAction?: (() => Promise<void>) | (() => void);
+    /**
+     * Text that appears inside of the link
+     *
+     * @type ReactNode
+     */
+    children: ReactNode;
+    /**
+     * Set the color scheme of the button
+     * TODO - link to a color scheme page
+     */
+    colorScheme?: ColorSchemeTypes;
+    /**
+     * Disables the link
+     */
+    disabled?: boolean;
+    /**
+     * Type of link to display
+     *
+     *   * `email` creates a mailto
+     *   * `phone` creates a telephone number
+     *   * `external` will open links in a new window
+     */
+    type?: LinkTypes | undefined;
+    /**
+     * Whether the link should be underlined
+     */
+    underline?: boolean;
+};
+type LinkAsLinkProps = BaseProps & ComponentPropsWithRef<'a'> & Omit<LinkProps$1, 'to'> & {
+    href: string | undefined;
+    type?: LinkTypes;
+};
+type LinkAsButtonProps = BaseProps & ComponentPropsWithRef<'button'> & {
+    href?: never;
+    type?: 'button' | 'reset' | 'submit';
+};
+type LinkProps = LinkAsButtonProps | LinkAsLinkProps;
+/**
+ * Links are used for navigation. If no `href` is supplied, a button that is visually styled to apper as a link
+ * is used. If used in a react-router context, their [Link](https://reactrouter.com/en/main/components/link). component is used, otherwise a native a tag.
+ * This means in addition to its own props, `Link` can use props from `react-router-dom`'s `Link` component. View their documentation [here](https://reactrouter.com/en/main/components/link).
+ * The one prop we ignore from react-router is `to`. We use `href` instead and map it under the hood.
+ *
+ */
+declare const Link: react.ForwardRefExoticComponent<(Omit<LinkAsLinkProps, "ref"> | Omit<LinkAsButtonProps, "ref">) & react.RefAttributes<HTMLAnchorElement | HTMLButtonElement>>;
 
 type Breakpoints = 'isLgAndDown' | 'isLgAndUp' | 'isMdAndDown' | 'isMdAndUp' | 'isSmAndDown' | 'isSmAndUp' | 'isXlAndDown' | 'isXlAndUp' | 'isXsAndDown' | 'isXsAndUp';
 type AtLeastOneBreakpoint<T, U = {
@@ -637,6 +702,45 @@ declare const Icon: {
     displayName: string;
 };
 
+type IconButtonProps = {
+    /**
+     * Accessible text for screen readers. Also shows up in a tooltip unless `disableTooltip` is true.
+     */
+    label: string;
+    /** Disable the tooltip */
+    disableTooltip?: boolean;
+    /**
+     * The Icon component to use, e.g. `<Icon type="favorite" />`
+     */
+    children: JSX.Element;
+} & (Omit<ButtonAsButtonProps, 'fullWidth' | 'leftIcon' | 'rightIcon'> | Omit<ButtonAsLinkProps, 'fullWidth' | 'leftIcon' | 'rightIcon'>);
+/**
+ * IconButton behaves like a [Button](?path=/docs/ui-components-button--docs), but only accepts an Icon as a child.
+ */
+declare const IconButton: react.ForwardRefExoticComponent<(Omit<{
+    /**
+     * Accessible text for screen readers. Also shows up in a tooltip unless `disableTooltip` is true.
+     */
+    label: string;
+    /** Disable the tooltip */
+    disableTooltip?: boolean;
+    /**
+     * The Icon component to use, e.g. `<Icon type="favorite" />`
+     */
+    children: JSX.Element;
+} & Omit<ButtonAsButtonProps, "leftIcon" | "fullWidth" | "rightIcon">, "ref"> | Omit<{
+    /**
+     * Accessible text for screen readers. Also shows up in a tooltip unless `disableTooltip` is true.
+     */
+    label: string;
+    /** Disable the tooltip */
+    disableTooltip?: boolean;
+    /**
+     * The Icon component to use, e.g. `<Icon type="favorite" />`
+     */
+    children: JSX.Element;
+} & Omit<ButtonAsLinkProps, "leftIcon" | "fullWidth" | "rightIcon">, "ref">) & react.RefAttributes<HTMLAnchorElement | HTMLButtonElement>>;
+
 type ScreenReaderOnlyProps = ComponentPropsWithoutRef<'div'> & {
     /**
      * Pass an arbitrary child node
@@ -699,7 +803,8 @@ declare const variantStyleMap: {
     label4: styled_components.FlattenSimpleInterpolation;
 };
 declare const prominenceMap: {
-    primary: styled_components.FlattenSimpleInterpolation;
+    highContrast: styled_components.FlattenSimpleInterpolation;
+    vibrant: styled_components.FlattenSimpleInterpolation;
     secondary: styled_components.FlattenSimpleInterpolation;
 };
 type TextProps = ComponentPropsWithoutRef<'div'> & {
@@ -736,7 +841,7 @@ type TextProps = ComponentPropsWithoutRef<'div'> & {
      */
     preventUserSelect?: boolean;
     /**
-     * The prominence of the text. This affects the color of the text
+     * Text prominence affects color. Use 'highContrast' for main non-interactive text, 'vibrant' for interactive elements, and 'secondary' for less important or supplementary content.
      */
     prominence?: keyof typeof prominenceMap;
     renderAs?: ElementType$1;
@@ -781,7 +886,7 @@ declare const Text: (<C = "div">(props: PolymorphicComponentProps<C, TextProps>)
      */
     preventUserSelect?: boolean;
     /**
-     * The prominence of the text. This affects the color of the text
+     * Text prominence affects color. Use 'highContrast' for main non-interactive text, 'vibrant' for interactive elements, and 'secondary' for less important or supplementary content.
      */
     prominence?: keyof typeof prominenceMap;
     renderAs?: ElementType$1;
@@ -825,7 +930,7 @@ declare const Text: (<C = "div">(props: PolymorphicComponentProps<C, TextProps>)
      */
     preventUserSelect?: boolean;
     /**
-     * The prominence of the text. This affects the color of the text
+     * Text prominence affects color. Use 'highContrast' for main non-interactive text, 'vibrant' for interactive elements, and 'secondary' for less important or supplementary content.
      */
     prominence?: keyof typeof prominenceMap;
     renderAs?: ElementType$1;
@@ -837,44 +942,6 @@ declare const Text: (<C = "div">(props: PolymorphicComponentProps<C, TextProps>)
     renderAs: react.JSXElementConstructor<any> | keyof react.JSX.IntrinsicElements;
 })>, never> & Record<string, never>;
 
-type WistiaLogoProps = Omit<ComponentPropsWithoutRef<'svg'>, 'href'> & {
-    /**
-     * An optional accessible description for the logo
-     */
-    description?: string;
-    /**
-     * Height, in pixels, of the logo
-     */
-    height?: number;
-    /**
-     * @ignore
-     * Change the color when hovering over the logo
-     */
-    hoverColor?: string;
-    /**
-     * Display just the icon portion of the logo (ie. hide `Wistia` text)
-     * note: there is no analogue to this because by brand guidelines, the
-     * `Wistia` text must not be displayed without the "flags" iconography
-     */
-    iconOnly?: boolean;
-    /**
-     * If provided, will wrap the logo in a link
-     */
-    href?: string;
-    /**
-     * An accessible title for the logo (defaults to "Wistia Logo")
-     */
-    title?: string;
-    /**
-     * Style of the logo
-     */
-    variant?: 'dark' | 'light' | 'standard';
-};
-declare const WistiaLogo: {
-    ({ description, height, hoverColor, href, iconOnly, title, variant, ...otherProps }: WistiaLogoProps): react_jsx_runtime.JSX.Element;
-    displayName: string;
-};
-
 type TooltipProps = {
     /**
      * The content of the tooltip
@@ -914,43 +981,42 @@ declare const Tooltip: {
     displayName: string;
 };
 
-type IconButtonProps = {
+type WistiaLogoProps = Omit<ComponentPropsWithoutRef<'svg'>, 'href'> & {
     /**
-     * Accessible text for screen readers. Also shows up in a tooltip unless `disableTooltip` is true.
+     * An optional accessible description for the logo
      */
-    label: string;
-    /** Disable the tooltip */
-    disableTooltip?: boolean;
+    description?: string;
     /**
-     * The Icon component to use, e.g. `<Icon type="favorite" />`
+     * Height, in pixels, of the logo
      */
-    children: JSX.Element;
-} & (Omit<ButtonAsButtonProps, 'fullWidth' | 'leftIcon' | 'rightIcon'> | Omit<ButtonAsLinkProps, 'fullWidth' | 'leftIcon' | 'rightIcon'>);
-/**
- * IconButton behaves like a [Button](?path=/docs/ui-components-button--docs), but only accepts an Icon as a child.
- */
-declare const IconButton: react.ForwardRefExoticComponent<(Omit<{
+    height?: number;
     /**
-     * Accessible text for screen readers. Also shows up in a tooltip unless `disableTooltip` is true.
+     * @ignore
+     * Change the color when hovering over the logo
      */
-    label: string;
-    /** Disable the tooltip */
-    disableTooltip?: boolean;
+    hoverColor?: string;
     /**
-     * The Icon component to use, e.g. `<Icon type="favorite" />`
+     * Display just the icon portion of the logo (ie. hide `Wistia` text)
+     * note: there is no analogue to this because by brand guidelines, the
+     * `Wistia` text must not be displayed without the "flags" iconography
      */
-    children: JSX.Element;
-} & Omit<ButtonAsButtonProps, "leftIcon" | "fullWidth" | "rightIcon">, "ref"> | Omit<{
+    iconOnly?: boolean;
     /**
-     * Accessible text for screen readers. Also shows up in a tooltip unless `disableTooltip` is true.
+     * If provided, will wrap the logo in a link
      */
-    label: string;
-    /** Disable the tooltip */
-    disableTooltip?: boolean;
+    href?: string;
     /**
-     * The Icon component to use, e.g. `<Icon type="favorite" />`
+     * An accessible title for the logo (defaults to "Wistia Logo")
      */
-    children: JSX.Element;
-} & Omit<ButtonAsLinkProps, "leftIcon" | "fullWidth" | "rightIcon">, "ref">) & react.RefAttributes<HTMLAnchorElement | HTMLButtonElement>>;
+    title?: string;
+    /**
+     * Style of the logo
+     */
+    variant?: 'dark' | 'light' | 'standard';
+};
+declare const WistiaLogo: {
+    ({ description, height, hoverColor, href, iconOnly, title, variant, ...otherProps }: WistiaLogoProps): react_jsx_runtime.JSX.Element;
+    displayName: string;
+};
 
-export { Box, Button, ButtonGroup, type ButtonProps, Divider, Ellipsis, Heading, type HeadingProps, Icon, IconButton, type IconButtonProps, type IconNameType, ScreenReaderOnly, Stack, Text, type TextProps, Tooltip, type TooltipProps, UIProvider, WistiaLogo, copyToClipboard, ellipsisFlexParentStyle, ellipsisStyle, iconSizeMap, useActiveMq, useAriaLive, useMq, useWindowSize };
+export { Box, Button, ButtonGroup, type ButtonProps, Divider, Ellipsis, Heading, type HeadingProps, Icon, IconButton, type IconButtonProps, type IconNameType, Link, type LinkProps, ScreenReaderOnly, Stack, Text, type TextProps, Tooltip, type TooltipProps, UIProvider, WistiaLogo, copyToClipboard, ellipsisFlexParentStyle, ellipsisStyle, iconSizeMap, mq, useActiveMq, useAriaLive, useMq, useWindowSize };