@wistia/ui 0.0.1

package/dist/index.d.ts

@@ -0,0 +1,956 @@
+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 * as styled_components from 'styled-components';
+
+type UIProviderProps = {
+    children: ReactNode;
+};
+declare const UIProvider: ({ children }: UIProviderProps) => react_jsx_runtime.JSX.Element;
+
+/**
+ * Copies a string to user's clipboard for easy pasting in another location
+ *
+ * @param {string} textToCopy - the string that will be copied to users clipboard
+ * @returns {Promise<void>} - Promise object that resolves when the text is copied
+ */
+declare const copyToClipboard: (textToCopy: string) => Promise<void>;
+
+type MediaQueryBooleans = {
+    isXlAndUp: boolean;
+    isLgAndUp: boolean;
+    isMdAndUp: boolean;
+    isSmAndUp: boolean;
+    isXsAndUp: boolean;
+    isXsAndDown: boolean;
+    isSmAndDown: boolean;
+    isMdAndDown: boolean;
+    isLgAndDown: boolean;
+    isXlAndDown: boolean;
+};
+declare const useMq: () => MediaQueryBooleans;
+type MediaQueryLabels = keyof MediaQueryBooleans;
+declare const useActiveMq: () => MediaQueryLabels[];
+
+declare const useWindowSize: (interval?: number) => {
+    width: number;
+    height: number;
+};
+
+type AriaLiveContextType = {
+    announce: (message: string, politeness?: 'assertive' | 'polite') => void;
+};
+declare const useAriaLive: () => AriaLiveContextType;
+
+type JustifyContentType = 'center' | 'flex-end' | 'flex-start' | 'space-around' | 'space-between' | 'space-evenly';
+type AlignContentType = 'center' | 'flex-end' | 'flex-start' | 'space-around' | 'space-between' | 'stretch';
+type AlignItemsType = 'baseline' | 'center' | 'flex-end' | 'flex-start' | 'stretch';
+type AlignSelfType = 'auto' | 'baseline' | 'center' | 'flex-end' | 'flex-start' | 'stretch';
+type DirectionType = 'column-reverse' | 'column' | 'row-reverse' | 'row';
+type FillType = boolean | 'horizontal' | 'vertical';
+type Gap = {
+    column: number | string;
+    row: number | string;
+};
+type BoxProps = ComponentPropsWithoutRef<'div'> & {
+    /**
+     * Specifies how the browser distributes space between and around
+     * items along the cross-axis of their container; has no effect on
+     * single line flexible boxes
+     */
+    alignContent?: AlignContentType;
+    /**
+     * Specifies how the browser distributes space between and around
+     * items along the cross-axis of their container; the difference
+     * to the alignContent prop is that alignItems specifies the
+     * alignment of the items within the current container's line,
+     * whereas alignContent specifies the alignment of the lines themselves
+     */
+    alignItems?: AlignItemsType;
+    /**
+     * Specifies how the browser aligns items of the current line, overriding the
+     * alignItems value of parent; if any of the item's cross-axis margin is set to auto,
+     * then alignSelf is ignored
+     *
+     * *Note: only works for nested `<Box />`*
+     */
+    alignSelf?: AlignSelfType;
+    /**
+     * Specifies the initial main size of an item
+     *
+     * *Note: only works for nested `<Box />`*
+     */
+    basis?: string;
+    /**
+     * Pass an arbitrary child node
+     */
+    children?: ReactNode;
+    /**
+     * Specifies the main axis of the container
+     */
+    direction?: DirectionType;
+    /**
+     * Specifies whether the width and/or height should fill the container
+     */
+    fill?: FillType;
+    /**
+     * Specifies whether the width and/or height should fill the viewport
+     */
+    fillViewport?: FillType;
+    /**
+     * Specifies the gaps (gutters) between rows and columns
+     */
+    gap?: Gap | string;
+    /**
+     * Specifies what amount of space inside the flex container the item should take up
+     *
+     * *Note: only works for nested `<Box />`*
+     */
+    grow?: number | string;
+    /**
+     * @ignore
+     * Used internally to track if a Box is a child of another Box component
+     */
+    hasBoxParent?: boolean;
+    /**
+     * Make Layout behave like an inline element but still lay out its content according to flexbox model
+     */
+    inline?: boolean;
+    /**
+     * Specifies how the browser distributes space between and around
+     * items along the main axis of their container
+     */
+    justifyContent?: JustifyContentType;
+    /**
+     * Specifies the order used to lay out an item in its container. Items within the same
+     * container are rendered in ascending order according to their order values.
+     * Elements with the _same_ order value are rendered in the order in which they appear in code
+     *
+     * *Note: only works for nested `<Box />`*
+     */
+    order?: number | 'inherit' | 'initial' | 'unset';
+    /**
+     * Specifies how items will shrink inside the container when the default size of
+     * items is larger than their container
+     *
+     * *Note: only works for nested `<Box />`*
+     */
+    shrink?: number;
+    /**
+     * Specifies whether items are forced into a single line or can be wrapped onto multiple lines
+     */
+    wrapItems?: boolean;
+};
+declare const Box: {
+    ({ alignContent, alignItems, children, direction, hasBoxParent, fill, fillViewport, inline, justifyContent, wrapItems, ...otherProps }: BoxProps): JSX.Element;
+    displayName: string;
+};
+
+type ButtonSizes = 'hero' | 'large' | 'medium' | 'small';
+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 Breakpoints = 'isLgAndDown' | 'isLgAndUp' | 'isMdAndDown' | 'isMdAndUp' | 'isSmAndDown' | 'isSmAndUp' | 'isXlAndDown' | 'isXlAndUp' | 'isXsAndDown' | 'isXsAndUp';
+type AtLeastOneBreakpoint<T, U = {
+    [K in keyof T]: Pick<T, K>;
+}> = Partial<T> & U[keyof U];
+type ResponsiveObject<T> = AtLeastOneBreakpoint<Record<Breakpoints, T>> & {
+    base: T;
+};
+
+type BaseButtonProps = {
+    /**
+     * Text that appears inside of the button
+     *
+     * @type ReactNode
+     */
+    children?: ReactNode;
+    /**
+     * Set the color scheme of the button
+     * TODO - link to a color scheme page
+     */
+    colorScheme?: ColorSchemeTypes;
+    /**
+     * Disables the button
+     */
+    disabled?: boolean;
+    /**
+     * Show a spinner when the button is in a loading state
+     */
+    isLoading?: boolean;
+    /**
+     * Icon to display on the left side of the button, Must be an instance of [Icon](?path=/docs/ui-components-icon--docs)
+     */
+    leftIcon?: JSX.Element | undefined;
+    /**
+     * Callback function invoked when the button is clicked
+     *
+     * @type (event: MouseEvent) => void
+     */
+    onClick?: ((event: MouseEvent) => void) | undefined;
+    /**
+     * @ignore
+     * Force a button into a particular css state (for debugging)
+     */
+    forceState?: 'active' | 'focus' | 'hover' | undefined;
+    /**
+     * If true, the button will fill its container
+     *
+     * @type boolean | ResponsiveObject<boolean>
+     * */
+    fullWidth?: ResponsiveObject<boolean> | boolean;
+    /**
+     * Provides a button without any styling (useful for wrapping another element)
+     */
+    unstyled?: boolean;
+    /**
+     * Icon to display on the right side of the button, Must be an instance of [Icon](?path=/docs/ui-components-icon--docs)
+     */
+    rightIcon?: JSX.Element | undefined;
+    /**
+     * The size of button to display. Can be used as a [responsive prop](/docs/ui-docs-responsive-props--docs)
+     *
+     * @type 'small' | 'medium' | 'large' | 'hero'
+     */
+    size?: ButtonSizes | ResponsiveObject<ButtonSizes>;
+    /**
+     * A visual style for the button
+     */
+    variant?: ButtonVariants;
+};
+type ButtonAsLinkProps = BaseButtonProps & ComponentPropsWithRef<'a'> & {
+    href: string;
+    children: ReactNode;
+    /**
+     * This just allows pathrough to beforeAction for link
+     * @ignore
+     */
+    beforeAction?: (() => Promise<void>) | (() => void);
+    /**
+     * This just allows pathrough to beforeAction for link
+     * @ignore
+     */
+    type?: LinkTypes;
+};
+type ButtonAsButtonProps = BaseButtonProps & ComponentPropsWithRef<'button'> & {
+    href?: never;
+    type?: 'button' | 'reset' | 'submit';
+    children: ReactNode;
+};
+type ButtonProps = ButtonAsButtonProps | ButtonAsLinkProps;
+/**
+ * Button component is used to trigger an action or event,
+ * such as submitting a form, opening a Dialog, canceling an
+ * action, or performing a delete operation. It replaces the HTML `<button>` element,
+ * unless an `href` attribute is passed, in which it will render an `<a>` element.
+ */
+declare const Button: react.ForwardRefExoticComponent<(Omit<ButtonAsLinkProps, "ref"> | Omit<ButtonAsButtonProps, "ref">) & react.RefAttributes<HTMLAnchorElement | HTMLButtonElement>>;
+
+type ButtonGroupProps = ComponentPropsWithoutRef<'div'> & {
+    /**
+     * Align buttons to the left or right of their container
+     */
+    align?: 'center' | 'left' | 'right';
+    /**
+     * Buttons that will be rendered in grouping
+     */
+    children?: ReactNode;
+    /**
+     * Force ButtonGroup to fill the width of it's container
+     */
+    fullWidth?: boolean;
+};
+declare const ButtonGroup: {
+    ({ children, align, fullWidth, ...otherProps }: ButtonGroupProps): JSX.Element | null;
+    displayName: string;
+};
+
+type DividerProps = ComponentPropsWithoutRef<'hr'> & {
+    /**
+     * Size of the divider. Can be a [responsive prop](/docs/ui-docs-responsive-props--docs).
+     *
+     * @type 'lg' | 'sm'
+     */
+    size?: ResponsiveObject<'lg' | 'sm'> | 'lg' | 'sm';
+};
+declare const Divider: {
+    ({ size, ...otherProps }: DividerProps): JSX.Element;
+    displayName: string;
+};
+
+declare const ellipsisStyle: styled_components.FlattenSimpleInterpolation;
+declare const ellipsisFlexParentStyle: styled_components.FlattenSimpleInterpolation;
+type EllipsisProps = ComponentPropsWithoutRef<'div'> & {
+    /**
+     * The text that will be truncated with an ellipsis
+     */
+    children?: ReactNode;
+    /**
+     * The number that will be truncated with an ellipsis
+     */
+    lines?: number;
+};
+declare const Ellipsis: {
+    ({ children, lines, ...otherProps }: EllipsisProps): JSX.Element;
+    displayName: string;
+};
+
+type ExtendedProps<Props = Record<string, unknown>, OverrideProps = Record<string, unknown>> = Omit<Props, keyof OverrideProps> & OverrideProps;
+type ElementType = JSXElementConstructor<any> | keyof JSX.IntrinsicElements;
+type PropsOf<C extends ElementType> = JSX.LibraryManagedAttributes<C, ComponentPropsWithoutRef<C>>;
+type ComponentProp<C> = {
+    /**
+     *  Render a different element or component
+     *
+     * @type ElementType | ComponentType
+     */
+    renderAs?: C;
+};
+type InheritedProps<C extends ElementType, Props = Record<string, unknown>> = ExtendedProps<PropsOf<C>, Props>;
+type PolymorphicRef<C> = C extends ElementType ? ComponentPropsWithRef<C>['ref'] : never;
+type PolymorphicComponentProps<C, Props = Record<string, unknown>> = C extends ElementType ? InheritedProps<C, ComponentProp<C> & Props> & {
+    ref?: PolymorphicRef<C>;
+} : Props & {
+    renderAs: ElementType;
+};
+
+type AlignmentTypes$1 = 'center' | 'justify' | 'left' | 'right';
+declare const variantStyleMap$1: {
+    hero: styled_components.FlattenSimpleInterpolation;
+    heading1: styled_components.FlattenSimpleInterpolation;
+    heading2: styled_components.FlattenSimpleInterpolation;
+    heading3: styled_components.FlattenSimpleInterpolation;
+    heading4: styled_components.FlattenSimpleInterpolation;
+    heading5: styled_components.FlattenSimpleInterpolation;
+    heading6: styled_components.FlattenSimpleInterpolation;
+};
+declare const DEFAULT_ELEMENT = "h1";
+type HeadingProps = ComponentPropsWithoutRef<typeof DEFAULT_ELEMENT> & {
+    /**
+     * The horizontal alignment
+     * <br />
+     * _Note: this only affects block elements_
+     */
+    align?: AlignmentTypes$1;
+    /**
+     * The content of the heading
+     */
+    children: ReactNode;
+    /**
+     * Sets the hue of the text
+     */
+    colorScheme?: ColorSchemeTypes;
+    /**
+     * Styles to text as disabled
+     */
+    disabled?: boolean;
+    /**
+     * Attempt to keep the text to a single line by truncating with an ellipsis
+     * <br />
+     * _Note: this only affects block elements_
+     */
+    ellipsis?: boolean;
+    /**
+     * Display the text as inline content
+     */
+    inline?: boolean;
+    /**
+     * Prevents text from being highlighted and copied
+     */
+    preventUserSelect?: boolean;
+    renderAs?: ElementType$1;
+    /**
+     * The text style to display. This will also affect what element (h1, h2, etc) is rendered, unless the `renderAs` prop is used
+     */
+    variant?: keyof typeof variantStyleMap$1;
+};
+declare const Heading: (<C = "h1">(props: PolymorphicComponentProps<C, HeadingProps>) => react.ReactElement) & Omit<react.FunctionComponent<(Omit<Omit<any, "ref">, "key" | "disabled" | keyof react.HTMLAttributes<HTMLHeadingElement> | "align" | "ellipsis" | "inline" | "colorScheme" | "variant" | "renderAs" | "preventUserSelect"> & {
+    renderAs?: any;
+} & Omit<react.DetailedHTMLProps<react.HTMLAttributes<HTMLHeadingElement>, HTMLHeadingElement>, "ref"> & {
+    /**
+     * The horizontal alignment
+     * <br />
+     * _Note: this only affects block elements_
+     */
+    align?: AlignmentTypes$1;
+    /**
+     * The content of the heading
+     */
+    children: ReactNode;
+    /**
+     * Sets the hue of the text
+     */
+    colorScheme?: ColorSchemeTypes;
+    /**
+     * Styles to text as disabled
+     */
+    disabled?: boolean;
+    /**
+     * Attempt to keep the text to a single line by truncating with an ellipsis
+     * <br />
+     * _Note: this only affects block elements_
+     */
+    ellipsis?: boolean;
+    /**
+     * Display the text as inline content
+     */
+    inline?: boolean;
+    /**
+     * Prevents text from being highlighted and copied
+     */
+    preventUserSelect?: boolean;
+    renderAs?: ElementType$1;
+    /**
+     * The text style to display. This will also affect what element (h1, h2, etc) is rendered, unless the `renderAs` prop is used
+     */
+    variant?: keyof typeof variantStyleMap$1;
+} & {
+    ref?: any;
+}) | (Omit<react.DetailedHTMLProps<react.HTMLAttributes<HTMLHeadingElement>, HTMLHeadingElement>, "ref"> & {
+    /**
+     * The horizontal alignment
+     * <br />
+     * _Note: this only affects block elements_
+     */
+    align?: AlignmentTypes$1;
+    /**
+     * The content of the heading
+     */
+    children: ReactNode;
+    /**
+     * Sets the hue of the text
+     */
+    colorScheme?: ColorSchemeTypes;
+    /**
+     * Styles to text as disabled
+     */
+    disabled?: boolean;
+    /**
+     * Attempt to keep the text to a single line by truncating with an ellipsis
+     * <br />
+     * _Note: this only affects block elements_
+     */
+    ellipsis?: boolean;
+    /**
+     * Display the text as inline content
+     */
+    inline?: boolean;
+    /**
+     * Prevents text from being highlighted and copied
+     */
+    preventUserSelect?: boolean;
+    renderAs?: ElementType$1;
+    /**
+     * The text style to display. This will also affect what element (h1, h2, etc) is rendered, unless the `renderAs` prop is used
+     */
+    variant?: keyof typeof variantStyleMap$1;
+} & {
+    renderAs: react.JSXElementConstructor<any> | keyof react.JSX.IntrinsicElements;
+})>, never> & Record<string, never>;
+
+declare const iconMap: {
+    'ab-test': (props: react.SVGProps<SVGSVGElement>) => react_jsx_runtime.JSX.Element;
+    accessibility: (props: react.SVGProps<SVGSVGElement>) => react_jsx_runtime.JSX.Element;
+    activity: (props: react.SVGProps<SVGSVGElement>) => react_jsx_runtime.JSX.Element;
+    'add-media': (props: react.SVGProps<SVGSVGElement>) => react_jsx_runtime.JSX.Element;
+    'annotation-link': (props: react.SVGProps<SVGSVGElement>) => react_jsx_runtime.JSX.Element;
+    appearance: (props: react.SVGProps<SVGSVGElement>) => react_jsx_runtime.JSX.Element;
+    archive: (props: react.SVGProps<SVGSVGElement>) => react_jsx_runtime.JSX.Element;
+    'arrow-down': (props: react.SVGProps<SVGSVGElement>) => react_jsx_runtime.JSX.Element;
+    'arrow-left': (props: react.SVGProps<SVGSVGElement>) => react_jsx_runtime.JSX.Element;
+    'arrow-right': (props: react.SVGProps<SVGSVGElement>) => react_jsx_runtime.JSX.Element;
+    'arrow-up': (props: react.SVGProps<SVGSVGElement>) => react_jsx_runtime.JSX.Element;
+    'arrow-up-right': (props: react.SVGProps<SVGSVGElement>) => react_jsx_runtime.JSX.Element;
+    asterisk: (props: react.SVGProps<SVGSVGElement>) => react_jsx_runtime.JSX.Element;
+    'audio-description': (props: react.SVGProps<SVGSVGElement>) => react_jsx_runtime.JSX.Element;
+    'auto-scroll': (props: react.SVGProps<SVGSVGElement>) => react_jsx_runtime.JSX.Element;
+    background: (props: react.SVGProps<SVGSVGElement>) => react_jsx_runtime.JSX.Element;
+    bell: (props: react.SVGProps<SVGSVGElement>) => react_jsx_runtime.JSX.Element;
+    bolt: (props: react.SVGProps<SVGSVGElement>) => react_jsx_runtime.JSX.Element;
+    calendar: (props: react.SVGProps<SVGSVGElement>) => react_jsx_runtime.JSX.Element;
+    'call-to-action': (props: react.SVGProps<SVGSVGElement>) => react_jsx_runtime.JSX.Element;
+    camera: (props: react.SVGProps<SVGSVGElement>) => react_jsx_runtime.JSX.Element;
+    'camera-off': (props: react.SVGProps<SVGSVGElement>) => react_jsx_runtime.JSX.Element;
+    'caret-down': (props: react.SVGProps<SVGSVGElement>) => react_jsx_runtime.JSX.Element;
+    'caret-down-strong': (props: react.SVGProps<SVGSVGElement>) => react_jsx_runtime.JSX.Element;
+    'caret-left': (props: react.SVGProps<SVGSVGElement>) => react_jsx_runtime.JSX.Element;
+    'caret-left-strong': (props: react.SVGProps<SVGSVGElement>) => react_jsx_runtime.JSX.Element;
+    'caret-right': (props: react.SVGProps<SVGSVGElement>) => react_jsx_runtime.JSX.Element;
+    'caret-right-strong': (props: react.SVGProps<SVGSVGElement>) => react_jsx_runtime.JSX.Element;
+    'caret-up': (props: react.SVGProps<SVGSVGElement>) => react_jsx_runtime.JSX.Element;
+    'caret-up-strong': (props: react.SVGProps<SVGSVGElement>) => react_jsx_runtime.JSX.Element;
+    channel: (props: react.SVGProps<SVGSVGElement>) => react_jsx_runtime.JSX.Element;
+    chapters: (props: react.SVGProps<SVGSVGElement>) => react_jsx_runtime.JSX.Element;
+    'checkmark-circle': (props: react.SVGProps<SVGSVGElement>) => react_jsx_runtime.JSX.Element;
+    'checkmark-circle-outline': (props: react.SVGProps<SVGSVGElement>) => react_jsx_runtime.JSX.Element;
+    checkmark: (props: react.SVGProps<SVGSVGElement>) => react_jsx_runtime.JSX.Element;
+    'checkmark-three-quaters-circle': (props: react.SVGProps<SVGSVGElement>) => react_jsx_runtime.JSX.Element;
+    'circle-slashed': (props: react.SVGProps<SVGSVGElement>) => react_jsx_runtime.JSX.Element;
+    close: (props: react.SVGProps<SVGSVGElement>) => react_jsx_runtime.JSX.Element;
+    'close-octagon': (props: react.SVGProps<SVGSVGElement>) => react_jsx_runtime.JSX.Element;
+    'closed-captions': (props: react.SVGProps<SVGSVGElement>) => react_jsx_runtime.JSX.Element;
+    'collapse-diagonal': (props: react.SVGProps<SVGSVGElement>) => react_jsx_runtime.JSX.Element;
+    comments: (props: react.SVGProps<SVGSVGElement>) => react_jsx_runtime.JSX.Element;
+    company: (props: react.SVGProps<SVGSVGElement>) => react_jsx_runtime.JSX.Element;
+    compare: (props: react.SVGProps<SVGSVGElement>) => react_jsx_runtime.JSX.Element;
+    'content-library': (props: react.SVGProps<SVGSVGElement>) => react_jsx_runtime.JSX.Element;
+    controls: (props: react.SVGProps<SVGSVGElement>) => react_jsx_runtime.JSX.Element;
+    'cursor-click': (props: react.SVGProps<SVGSVGElement>) => react_jsx_runtime.JSX.Element;
+    delete: (props: react.SVGProps<SVGSVGElement>) => react_jsx_runtime.JSX.Element;
+    desktop: (props: react.SVGProps<SVGSVGElement>) => react_jsx_runtime.JSX.Element;
+    'dots-horizontal': (props: react.SVGProps<SVGSVGElement>) => react_jsx_runtime.JSX.Element;
+    download: (props: react.SVGProps<SVGSVGElement>) => react_jsx_runtime.JSX.Element;
+    'edit-transcript': (props: react.SVGProps<SVGSVGElement>) => react_jsx_runtime.JSX.Element;
+    'ellipses-vertical': (props: react.SVGProps<SVGSVGElement>) => react_jsx_runtime.JSX.Element;
+    embed: (props: react.SVGProps<SVGSVGElement>) => react_jsx_runtime.JSX.Element;
+    envelope: (props: react.SVGProps<SVGSVGElement>) => react_jsx_runtime.JSX.Element;
+    error: (props: react.SVGProps<SVGSVGElement>) => react_jsx_runtime.JSX.Element;
+    'expand-diagonal': (props: react.SVGProps<SVGSVGElement>) => react_jsx_runtime.JSX.Element;
+    expand: (props: react.SVGProps<SVGSVGElement>) => react_jsx_runtime.JSX.Element;
+    favorite: (props: react.SVGProps<SVGSVGElement>) => react_jsx_runtime.JSX.Element;
+    'favorite-outline': (props: react.SVGProps<SVGSVGElement>) => react_jsx_runtime.JSX.Element;
+    'file-tree': (props: react.SVGProps<SVGSVGElement>) => react_jsx_runtime.JSX.Element;
+    filter: (props: react.SVGProps<SVGSVGElement>) => react_jsx_runtime.JSX.Element;
+    fonts: (props: react.SVGProps<SVGSVGElement>) => react_jsx_runtime.JSX.Element;
+    'full-screen': (props: react.SVGProps<SVGSVGElement>) => react_jsx_runtime.JSX.Element;
+    gear: (props: react.SVGProps<SVGSVGElement>) => react_jsx_runtime.JSX.Element;
+    'getting-started': (props: react.SVGProps<SVGSVGElement>) => react_jsx_runtime.JSX.Element;
+    grid: (props: react.SVGProps<SVGSVGElement>) => react_jsx_runtime.JSX.Element;
+    'grip-dots-vertical': (props: react.SVGProps<SVGSVGElement>) => react_jsx_runtime.JSX.Element;
+    'help-center': (props: react.SVGProps<SVGSVGElement>) => react_jsx_runtime.JSX.Element;
+    hide: (props: react.SVGProps<SVGSVGElement>) => react_jsx_runtime.JSX.Element;
+    home: (props: react.SVGProps<SVGSVGElement>) => react_jsx_runtime.JSX.Element;
+    hourglass: (props: react.SVGProps<SVGSVGElement>) => react_jsx_runtime.JSX.Element;
+    info: (props: react.SVGProps<SVGSVGElement>) => react_jsx_runtime.JSX.Element;
+    integrations: (props: react.SVGProps<SVGSVGElement>) => react_jsx_runtime.JSX.Element;
+    leave: (props: react.SVGProps<SVGSVGElement>) => react_jsx_runtime.JSX.Element;
+    link: (props: react.SVGProps<SVGSVGElement>) => react_jsx_runtime.JSX.Element;
+    list: (props: react.SVGProps<SVGSVGElement>) => react_jsx_runtime.JSX.Element;
+    live: (props: react.SVGProps<SVGSVGElement>) => react_jsx_runtime.JSX.Element;
+    lock: (props: react.SVGProps<SVGSVGElement>) => react_jsx_runtime.JSX.Element;
+    logout: (props: react.SVGProps<SVGSVGElement>) => react_jsx_runtime.JSX.Element;
+    maximize: (props: react.SVGProps<SVGSVGElement>) => react_jsx_runtime.JSX.Element;
+    media: (props: react.SVGProps<SVGSVGElement>) => react_jsx_runtime.JSX.Element;
+    menu: (props: react.SVGProps<SVGSVGElement>) => react_jsx_runtime.JSX.Element;
+    mic: (props: react.SVGProps<SVGSVGElement>) => react_jsx_runtime.JSX.Element;
+    'mic-off': (props: react.SVGProps<SVGSVGElement>) => react_jsx_runtime.JSX.Element;
+    minimize: (props: react.SVGProps<SVGSVGElement>) => react_jsx_runtime.JSX.Element;
+    'minus-circle': (props: react.SVGProps<SVGSVGElement>) => react_jsx_runtime.JSX.Element;
+    mobile: (props: react.SVGProps<SVGSVGElement>) => react_jsx_runtime.JSX.Element;
+    'more-options': (props: react.SVGProps<SVGSVGElement>) => react_jsx_runtime.JSX.Element;
+    'move-left': (props: react.SVGProps<SVGSVGElement>) => react_jsx_runtime.JSX.Element;
+    'move-right': (props: react.SVGProps<SVGSVGElement>) => react_jsx_runtime.JSX.Element;
+    music: (props: react.SVGProps<SVGSVGElement>) => react_jsx_runtime.JSX.Element;
+    'open-new': (props: react.SVGProps<SVGSVGElement>) => react_jsx_runtime.JSX.Element;
+    overview: (props: react.SVGProps<SVGSVGElement>) => react_jsx_runtime.JSX.Element;
+    page: (props: react.SVGProps<SVGSVGElement>) => react_jsx_runtime.JSX.Element;
+    'panel-left': (props: react.SVGProps<SVGSVGElement>) => react_jsx_runtime.JSX.Element;
+    'panel-right': (props: react.SVGProps<SVGSVGElement>) => react_jsx_runtime.JSX.Element;
+    'panel-up': (props: react.SVGProps<SVGSVGElement>) => react_jsx_runtime.JSX.Element;
+    password: (props: react.SVGProps<SVGSVGElement>) => react_jsx_runtime.JSX.Element;
+    pencil: (props: react.SVGProps<SVGSVGElement>) => react_jsx_runtime.JSX.Element;
+    people: (props: react.SVGProps<SVGSVGElement>) => react_jsx_runtime.JSX.Element;
+    pin: (props: react.SVGProps<SVGSVGElement>) => react_jsx_runtime.JSX.Element;
+    'pin-slash': (props: react.SVGProps<SVGSVGElement>) => react_jsx_runtime.JSX.Element;
+    play: (props: react.SVGProps<SVGSVGElement>) => react_jsx_runtime.JSX.Element;
+    player: (props: react.SVGProps<SVGSVGElement>) => react_jsx_runtime.JSX.Element;
+    plus: (props: react.SVGProps<SVGSVGElement>) => react_jsx_runtime.JSX.Element;
+    podcast: (props: react.SVGProps<SVGSVGElement>) => react_jsx_runtime.JSX.Element;
+    preview: (props: react.SVGProps<SVGSVGElement>) => react_jsx_runtime.JSX.Element;
+    'private-user-sessions': (props: react.SVGProps<SVGSVGElement>) => react_jsx_runtime.JSX.Element;
+    project: (props: react.SVGProps<SVGSVGElement>) => react_jsx_runtime.JSX.Element;
+    properties: (props: react.SVGProps<SVGSVGElement>) => react_jsx_runtime.JSX.Element;
+    'question-mark': (props: react.SVGProps<SVGSVGElement>) => react_jsx_runtime.JSX.Element;
+    react: (props: react.SVGProps<SVGSVGElement>) => react_jsx_runtime.JSX.Element;
+    record: (props: react.SVGProps<SVGSVGElement>) => react_jsx_runtime.JSX.Element;
+    redo: (props: react.SVGProps<SVGSVGElement>) => react_jsx_runtime.JSX.Element;
+    replace: (props: react.SVGProps<SVGSVGElement>) => react_jsx_runtime.JSX.Element;
+    reply: (props: react.SVGProps<SVGSVGElement>) => react_jsx_runtime.JSX.Element;
+    'save-as-copy': (props: react.SVGProps<SVGSVGElement>) => react_jsx_runtime.JSX.Element;
+    save: (props: react.SVGProps<SVGSVGElement>) => react_jsx_runtime.JSX.Element;
+    scissors: (props: react.SVGProps<SVGSVGElement>) => react_jsx_runtime.JSX.Element;
+    'screenshare-off': (props: react.SVGProps<SVGSVGElement>) => react_jsx_runtime.JSX.Element;
+    'screenshare-on': (props: react.SVGProps<SVGSVGElement>) => react_jsx_runtime.JSX.Element;
+    search: (props: react.SVGProps<SVGSVGElement>) => react_jsx_runtime.JSX.Element;
+    send: (props: react.SVGProps<SVGSVGElement>) => react_jsx_runtime.JSX.Element;
+    shapes: (props: react.SVGProps<SVGSVGElement>) => react_jsx_runtime.JSX.Element;
+    share: (props: react.SVGProps<SVGSVGElement>) => react_jsx_runtime.JSX.Element;
+    'sharing-permissions': (props: react.SVGProps<SVGSVGElement>) => react_jsx_runtime.JSX.Element;
+    simulcast: (props: react.SVGProps<SVGSVGElement>) => react_jsx_runtime.JSX.Element;
+    sort: (props: react.SVGProps<SVGSVGElement>) => react_jsx_runtime.JSX.Element;
+    sparkle: (props: react.SVGProps<SVGSVGElement>) => react_jsx_runtime.JSX.Element;
+    spinner: (props: react.SVGProps<SVGSVGElement>) => react_jsx_runtime.JSX.Element;
+    stats: (props: react.SVGProps<SVGSVGElement>) => react_jsx_runtime.JSX.Element;
+    'switch-accounts': (props: react.SVGProps<SVGSVGElement>) => react_jsx_runtime.JSX.Element;
+    tag: (props: react.SVGProps<SVGSVGElement>) => react_jsx_runtime.JSX.Element;
+    thumbnail: (props: react.SVGProps<SVGSVGElement>) => react_jsx_runtime.JSX.Element;
+    'thumbs-down': (props: react.SVGProps<SVGSVGElement>) => react_jsx_runtime.JSX.Element;
+    'thumbs-up': (props: react.SVGProps<SVGSVGElement>) => react_jsx_runtime.JSX.Element;
+    transitions: (props: react.SVGProps<SVGSVGElement>) => react_jsx_runtime.JSX.Element;
+    trim: (props: react.SVGProps<SVGSVGElement>) => react_jsx_runtime.JSX.Element;
+    turnstile: (props: react.SVGProps<SVGSVGElement>) => react_jsx_runtime.JSX.Element;
+    undo: (props: react.SVGProps<SVGSVGElement>) => react_jsx_runtime.JSX.Element;
+    unlock: (props: react.SVGProps<SVGSVGElement>) => react_jsx_runtime.JSX.Element;
+    upload: (props: react.SVGProps<SVGSVGElement>) => react_jsx_runtime.JSX.Element;
+    'users-permissions': (props: react.SVGProps<SVGSVGElement>) => react_jsx_runtime.JSX.Element;
+    'view-stream': (props: react.SVGProps<SVGSVGElement>) => react_jsx_runtime.JSX.Element;
+    volume: (props: react.SVGProps<SVGSVGElement>) => react_jsx_runtime.JSX.Element;
+    'volume-off': (props: react.SVGProps<SVGSVGElement>) => react_jsx_runtime.JSX.Element;
+    'volume-up': (props: react.SVGProps<SVGSVGElement>) => react_jsx_runtime.JSX.Element;
+    'volume-x': (props: react.SVGProps<SVGSVGElement>) => react_jsx_runtime.JSX.Element;
+    wand: (props: react.SVGProps<SVGSVGElement>) => react_jsx_runtime.JSX.Element;
+    'zoom-in': (props: react.SVGProps<SVGSVGElement>) => react_jsx_runtime.JSX.Element;
+    'zoom-out': (props: react.SVGProps<SVGSVGElement>) => react_jsx_runtime.JSX.Element;
+};
+type IconNameType = keyof typeof iconMap;
+
+declare const iconSizeMap: {
+    sm: string;
+    md: string;
+    lg: string;
+    xl: string;
+    xxl: string;
+};
+type IconProps = ComponentPropsWithoutRef<'svg'> & {
+    /**
+     * Is Icon on a filled background?
+     */
+    invertColor?: boolean;
+    /**
+     * The size of the icon to display
+     */
+    size?: keyof typeof iconSizeMap;
+    /**
+     * @ignore
+     */
+    style?: Record<string, unknown>;
+    /**
+     * Determines which icon to display
+     */
+    type: IconNameType;
+};
+declare const Icon: {
+    ({ invertColor, size, style, type, ...otherProps }: IconProps): JSX.Element;
+    displayName: string;
+};
+
+type ScreenReaderOnlyProps = ComponentPropsWithoutRef<'div'> & {
+    /**
+     * Pass an arbitrary child node
+     */
+    children?: ReactNode;
+    /**
+     * Display content _only_ when it's focused.
+     */
+    focusable?: boolean;
+    /**
+     * The text that will appear to screenreaders but not be displayed on screen
+     * (alternatively you can pass children)
+     */
+    text?: ReactNode;
+};
+declare const ScreenReaderOnly: {
+    ({ text, children, focusable, ...otherProps }: ScreenReaderOnlyProps): react_jsx_runtime.JSX.Element;
+    displayName: string;
+};
+
+type Spacings = 'space-01' | 'space-02' | 'space-03' | 'space-04' | 'space-05' | 'space-06' | 'space-07' | 'space-08' | 'space-09' | 'space-10' | 'space-11';
+
+type StackProps = {
+    children?: ReactNode | undefined;
+    /**
+     * The gap between each item in the stack. Can be a [responsive prop](/docs/ui-docs-responsive-props--docs).
+     * TODO: add link to Spacing docs
+     *
+     */
+    gap?: Spacings;
+    /**
+     * Vertical is equivalent to `flex-direction: column;`, horizontal is equivalent to `flex-direction: row;`.
+     * The default behavior is `vertical`. Can be a [responsive prop](/docs/ui-docs-responsive-props--docs).
+     *
+     */
+    direction?: 'horizontal' | 'vertical';
+    renderAs?: ElementType$1;
+};
+declare const Stack: (<C = "div">(props: PolymorphicComponentProps<C, StackProps>) => react.ReactElement) & Omit<react.FunctionComponent<(Omit<Omit<any, "ref">, keyof StackProps> & {
+    renderAs?: any;
+} & StackProps & {
+    ref?: any;
+}) | (StackProps & {
+    renderAs: react.JSXElementConstructor<any> | keyof react.JSX.IntrinsicElements;
+})>, never> & Record<string, never>;
+
+type AlignmentTypes = 'center' | 'justify' | 'left' | 'right';
+declare const variantStyleMap: {
+    body1: styled_components.FlattenSimpleInterpolation;
+    body2: styled_components.FlattenSimpleInterpolation;
+    body3: styled_components.FlattenSimpleInterpolation;
+    body4: styled_components.FlattenSimpleInterpolation;
+    body1Mono: styled_components.FlattenSimpleInterpolation;
+    body2Mono: styled_components.FlattenSimpleInterpolation;
+    body3Mono: styled_components.FlattenSimpleInterpolation;
+    body4Mono: styled_components.FlattenSimpleInterpolation;
+    label1: styled_components.FlattenSimpleInterpolation;
+    label2: styled_components.FlattenSimpleInterpolation;
+    label3: styled_components.FlattenSimpleInterpolation;
+    label4: styled_components.FlattenSimpleInterpolation;
+};
+declare const prominenceMap: {
+    primary: styled_components.FlattenSimpleInterpolation;
+    secondary: styled_components.FlattenSimpleInterpolation;
+};
+type TextProps = ComponentPropsWithoutRef<'div'> & {
+    /**
+     * The horizontal alignment
+     * <br />
+     * _Note: this only affects block elements_
+     */
+    align?: AlignmentTypes;
+    /**
+     * The text content
+     */
+    children?: ReactNode | undefined;
+    /**
+     * Sets the hue of the text
+     */
+    colorScheme?: ColorSchemeTypes;
+    /**
+     * Allows user to override default button colors
+     */
+    disabled?: boolean;
+    /**
+     * Attempt to keep the text to a single line by truncating with an ellipsis
+     * <br />
+     * _Note: this only affects block elements_
+     */
+    ellipsis?: boolean;
+    /**
+     * Display the text as inline content
+     */
+    inline?: boolean;
+    /**
+     * Prevents text from being highlighted and copied
+     */
+    preventUserSelect?: boolean;
+    /**
+     * The prominence of the text. This affects the color of the text
+     */
+    prominence?: keyof typeof prominenceMap;
+    renderAs?: ElementType$1;
+    /**
+     * The text style to display
+     */
+    variant?: keyof typeof variantStyleMap | undefined;
+};
+declare const Text: (<C = "div">(props: PolymorphicComponentProps<C, TextProps>) => react.ReactElement) & Omit<react.FunctionComponent<(Omit<Omit<any, "ref">, "key" | "disabled" | keyof react.HTMLAttributes<HTMLDivElement> | "align" | "ellipsis" | "inline" | "colorScheme" | "variant" | "renderAs" | "preventUserSelect" | "prominence"> & {
+    renderAs?: any;
+} & Omit<react.DetailedHTMLProps<react.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & {
+    /**
+     * The horizontal alignment
+     * <br />
+     * _Note: this only affects block elements_
+     */
+    align?: AlignmentTypes;
+    /**
+     * The text content
+     */
+    children?: ReactNode | undefined;
+    /**
+     * Sets the hue of the text
+     */
+    colorScheme?: ColorSchemeTypes;
+    /**
+     * Allows user to override default button colors
+     */
+    disabled?: boolean;
+    /**
+     * Attempt to keep the text to a single line by truncating with an ellipsis
+     * <br />
+     * _Note: this only affects block elements_
+     */
+    ellipsis?: boolean;
+    /**
+     * Display the text as inline content
+     */
+    inline?: boolean;
+    /**
+     * Prevents text from being highlighted and copied
+     */
+    preventUserSelect?: boolean;
+    /**
+     * The prominence of the text. This affects the color of the text
+     */
+    prominence?: keyof typeof prominenceMap;
+    renderAs?: ElementType$1;
+    /**
+     * The text style to display
+     */
+    variant?: keyof typeof variantStyleMap | undefined;
+} & {
+    ref?: any;
+}) | (Omit<react.DetailedHTMLProps<react.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & {
+    /**
+     * The horizontal alignment
+     * <br />
+     * _Note: this only affects block elements_
+     */
+    align?: AlignmentTypes;
+    /**
+     * The text content
+     */
+    children?: ReactNode | undefined;
+    /**
+     * Sets the hue of the text
+     */
+    colorScheme?: ColorSchemeTypes;
+    /**
+     * Allows user to override default button colors
+     */
+    disabled?: boolean;
+    /**
+     * Attempt to keep the text to a single line by truncating with an ellipsis
+     * <br />
+     * _Note: this only affects block elements_
+     */
+    ellipsis?: boolean;
+    /**
+     * Display the text as inline content
+     */
+    inline?: boolean;
+    /**
+     * Prevents text from being highlighted and copied
+     */
+    preventUserSelect?: boolean;
+    /**
+     * The prominence of the text. This affects the color of the text
+     */
+    prominence?: keyof typeof prominenceMap;
+    renderAs?: ElementType$1;
+    /**
+     * The text style to display
+     */
+    variant?: keyof typeof variantStyleMap | undefined;
+} & {
+    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
+     */
+    content: ReactNode;
+    /**
+     * The button or other interactive element that triggers the tooltip
+     */
+    children: ReactNode;
+    /**
+     * The delay in milliseconds before the tooltip appears
+     */
+    delay?: number;
+    /**
+     * The preferred direction to render the tooltip if no collisions prevent it
+     */
+    direction?: 'bottom' | 'left' | 'right' | 'top';
+    /**
+     * @ignore
+     * Force the tooltip to be open without user interaction (for debugging and CI)
+     */
+    forceOpen?: boolean;
+    /**
+     * The size of the tooltip
+     */
+    compact?: boolean;
+    /**
+     * Hides the arrow
+     */
+    hideArrow?: boolean;
+};
+/**
+ * Tooltips are a way to provide additional information or context to a user when they hover or focus an element.
+ */
+declare const Tooltip: {
+    ({ delay, direction, content, children, forceOpen, compact, hideArrow, }: TooltipProps): JSX.Element;
+    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>>;
+
+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 };