@100mslive/roomkit-react 0.3.24 → 0.3.25-alpha.1

package/dist/VideoTile/StyledVideoTile.d.ts

@@ -1,3 +1,5 @@
+/// <reference types="react" />
+/// <reference types="react" />
 export declare const Root: import("@stitches/react/types/styled-component").StyledComponent<"div", {}, {
     allowMotion: string;
     sm: string;
@@ -343,6 +345,609 @@ export declare const Root: import("@stitches/react/types/styled-component").Styl
         marginBottom: string | number | import("@stitches/react/types/css-util").WithScaleValue<"space">;
     };
 }>>;
+declare const MotionRoot: import("react").ForwardRefExoticComponent<{
+    color?: string | undefined;
+    content?: string | undefined;
+    translate?: "no" | "yes" | undefined;
+    role?: import("react").AriaRole | undefined;
+    prefix?: string | undefined;
+    css?: import("@stitches/react/types/css-util").CSS<{
+        allowMotion: string;
+        sm: string;
+        md: string;
+        lg: string;
+        xl: string;
+        '2xl': string;
+        ls: string;
+    }, {
+        colors: {
+            primary_default: string;
+            primary_bright: string;
+            primary_dim: string;
+            primary_disabled: string;
+            on_primary_high: string;
+            on_primary_medium: string;
+            on_primary_low: string;
+            secondary_default: string;
+            secondary_bright: string;
+            secondary_dim: string;
+            secondary_disabled: string;
+            on_secondary_high: string;
+            on_secondary_medium: string;
+            on_secondary_low: string;
+            background_default: string;
+            background_dim: string;
+            surface_default: string;
+            surface_bright: string;
+            surface_brighter: string;
+            surface_dim: string;
+            on_surface_high: string;
+            on_surface_medium: string;
+            on_surface_low: string;
+            border_default: string;
+            border_bright: string;
+            alert_success: string;
+            alert_warning: string;
+            alert_error_default: string;
+            alert_error_bright: string;
+            alert_error_brighter: string;
+            alert_error_dim: string;
+        };
+        shadows: {
+            sm: string;
+            md: string;
+        };
+        fonts: {
+            sans: string;
+        };
+        fontSizes: {
+            h1: string;
+            h2: string;
+            h3: string;
+            h4: string;
+            h5: string;
+            h6: string;
+            tiny: string;
+            xs: string;
+            sm: string;
+            md: string;
+            lg: string;
+        };
+        fontWeights: {
+            semiBold: number;
+            medium: number;
+            regular: number;
+        };
+        lineHeights: {
+            h1: string;
+            h2: string;
+            h3: string;
+            h4: string;
+            h5: string;
+            h6: string;
+            tiny: string;
+            xs: string;
+            sm: string;
+            md: string;
+        };
+        radii: {
+            '0': string;
+            '1': string;
+            '2': string;
+            '3': string;
+            '4': string;
+            round: string;
+        };
+        space: {
+            0: string;
+            xs: string;
+            sm: string;
+            md: string;
+            lg: string;
+            xl: string;
+            px: string;
+            1: string;
+            2: string;
+            3: string;
+            4: string;
+            5: string;
+            6: string;
+            7: string;
+            8: string;
+            9: string;
+            10: string;
+            11: string;
+            12: string;
+            13: string;
+            14: string;
+            15: string;
+            16: string;
+            17: string;
+            18: string;
+            19: string;
+            20: string;
+            24: string;
+            28: string;
+            32: string;
+            36: string;
+            40: string;
+            44: string;
+            48: string;
+            52: string;
+            56: string;
+            60: string;
+            64: string;
+            72: string;
+            80: string;
+            96: string;
+            100: string;
+        };
+        borderWidths: {
+            light: string;
+            normal: string;
+            bold: string;
+            extrabold: string;
+            black: string;
+        };
+    }, {
+        width: string;
+        height: string;
+        minWidth: string;
+        maxWidth: string;
+        minHeight: string;
+        maxHeight: string;
+        flexBasis: string;
+        gridTemplateColumns: string;
+        gridTemplateRows: string;
+        blockSize: string;
+        minBlockSize: string;
+        maxBlockSize: string;
+        inlineSize: string;
+        minInlineSize: string;
+        maxInlineSize: string;
+        gap: "space";
+        gridGap: "space";
+        columnGap: "space";
+        gridColumnGap: "space";
+        rowGap: "space";
+        gridRowGap: "space";
+        inset: "space";
+        insetBlock: "space";
+        insetBlockEnd: "space";
+        insetBlockStart: "space";
+        insetInline: "space";
+        insetInlineEnd: "space";
+        insetInlineStart: "space";
+        margin: "space";
+        marginTop: "space";
+        marginRight: "space";
+        marginBottom: "space";
+        marginLeft: "space";
+        marginBlock: "space";
+        marginBlockEnd: "space";
+        marginBlockStart: "space";
+        marginInline: "space";
+        marginInlineEnd: "space";
+        marginInlineStart: "space";
+        padding: "space";
+        paddingTop: "space";
+        paddingRight: "space";
+        paddingBottom: "space";
+        paddingLeft: "space";
+        paddingBlock: "space";
+        paddingBlockEnd: "space";
+        paddingBlockStart: "space";
+        paddingInline: "space";
+        paddingInlineEnd: "space";
+        paddingInlineStart: "space";
+        scrollMargin: "space";
+        scrollMarginTop: "space";
+        scrollMarginRight: "space";
+        scrollMarginBottom: "space";
+        scrollMarginLeft: "space";
+        scrollMarginBlock: "space";
+        scrollMarginBlockEnd: "space";
+        scrollMarginBlockStart: "space";
+        scrollMarginInline: "space";
+        scrollMarginInlineEnd: "space";
+        scrollMarginInlineStart: "space";
+        scrollPadding: "space";
+        scrollPaddingTop: "space";
+        scrollPaddingRight: "space";
+        scrollPaddingBottom: "space";
+        scrollPaddingLeft: "space";
+        scrollPaddingBlock: "space";
+        scrollPaddingBlockEnd: "space";
+        scrollPaddingBlockStart: "space";
+        scrollPaddingInline: "space";
+        scrollPaddingInlineEnd: "space";
+        scrollPaddingInlineStart: "space";
+        top: "space";
+        right: "space";
+        bottom: "space";
+        left: "space";
+        fontSize: "fontSizes";
+        background: "colors";
+        backgroundColor: "colors";
+        backgroundImage: "colors";
+        borderImage: "colors";
+        border: "colors";
+        borderBlock: "colors";
+        borderBlockEnd: "colors";
+        borderBlockStart: "colors";
+        borderBottom: "colors";
+        borderBottomColor: "colors";
+        borderColor: "colors";
+        borderInline: "colors";
+        borderInlineEnd: "colors";
+        borderInlineStart: "colors";
+        borderLeft: "colors";
+        borderLeftColor: "colors";
+        borderRight: "colors";
+        borderRightColor: "colors";
+        borderTop: "colors";
+        borderTopColor: "colors";
+        caretColor: "colors";
+        color: "colors";
+        columnRuleColor: "colors";
+        outline: "colors";
+        outlineColor: "colors";
+        fill: "colors";
+        stroke: "colors";
+        textDecorationColor: "colors";
+        fontFamily: "fonts";
+        fontWeight: "fontWeights";
+        lineHeight: "lineHeights";
+        letterSpacing: "letterSpacings";
+        borderWidth: "borderWidths";
+        borderTopWidth: "borderWidths";
+        borderLeftWidth: "borderWidths";
+        borderRightWidth: "borderWidths";
+        borderBottomWidth: "borderWidths";
+        borderStyle: "borderStyles";
+        borderTopStyle: "borderStyles";
+        borderLeftStyle: "borderStyles";
+        borderRightStyle: "borderStyles";
+        borderBottomStyle: "borderStyles";
+        borderRadius: "radii";
+        borderTopLeftRadius: "radii";
+        borderTopRightRadius: "radii";
+        borderBottomRightRadius: "radii";
+        borderBottomLeftRadius: "radii";
+        boxShadow: "shadows";
+        textShadow: "shadows";
+        transition: "transitions";
+        zIndex: "zIndices";
+    }, {
+        bg: (value: import("@stitches/react/types/css-util").WithPropertyValue<"backgroundColor">) => {
+            backgroundColor: import("@stitches/react/types/css-util").WithPropertyValue<"backgroundColor">;
+        };
+        c: (value: import("@stitches/react/types/css-util").WithPropertyValue<"color">) => {
+            color: import("@stitches/react/types/css-util").WithPropertyValue<"color">;
+        };
+        r: (value: import("@stitches/react/types/css-util").WithScaleValue<"radii">) => {
+            borderRadius: import("@stitches/react/types/css-util").WithScaleValue<"radii">;
+        };
+        fs: (value: string | number | import("@stitches/react/types/css-util").WithPropertyValue<"fontSize">) => {
+            fontSize: string | number | import("@stitches/react/types/css-util").WithPropertyValue<"fontSize">;
+        };
+        size: (value: string | number | import("@stitches/react/types/css-util").WithScaleValue<"space">) => {
+            height: string | number | import("@stitches/react/types/css-util").WithScaleValue<"space">;
+            width: string | number | import("@stitches/react/types/css-util").WithScaleValue<"space">;
+        };
+        w: (value: string | number | import("@stitches/react/types/css-util").WithScaleValue<"space">) => {
+            width: string | number | import("@stitches/react/types/css-util").WithScaleValue<"space">;
+        };
+        h: (value: string | number | import("@stitches/react/types/css-util").WithScaleValue<"space">) => {
+            height: string | number | import("@stitches/react/types/css-util").WithScaleValue<"space">;
+        };
+        p: (value: string | number | import("@stitches/react/types/css-util").WithScaleValue<"space">) => {
+            padding: string | number | import("@stitches/react/types/css-util").WithScaleValue<"space">;
+        };
+        pt: (value: string | number | import("@stitches/react/types/css-util").WithScaleValue<"space">) => {
+            paddingTop: string | number | import("@stitches/react/types/css-util").WithScaleValue<"space">;
+        };
+        pr: (value: string | number | import("@stitches/react/types/css-util").WithScaleValue<"space">) => {
+            paddingRight: string | number | import("@stitches/react/types/css-util").WithScaleValue<"space">;
+        };
+        pb: (value: string | number | import("@stitches/react/types/css-util").WithScaleValue<"space">) => {
+            paddingBottom: string | number | import("@stitches/react/types/css-util").WithScaleValue<"space">;
+        };
+        pl: (value: string | number | import("@stitches/react/types/css-util").WithScaleValue<"space">) => {
+            paddingLeft: string | number | import("@stitches/react/types/css-util").WithScaleValue<"space">;
+        };
+        px: (value: string | number | import("@stitches/react/types/css-util").WithScaleValue<"space">) => {
+            paddingLeft: string | number | import("@stitches/react/types/css-util").WithScaleValue<"space">;
+            paddingRight: string | number | import("@stitches/react/types/css-util").WithScaleValue<"space">;
+        };
+        py: (value: string | number | import("@stitches/react/types/css-util").WithScaleValue<"space">) => {
+            paddingTop: string | number | import("@stitches/react/types/css-util").WithScaleValue<"space">;
+            paddingBottom: string | number | import("@stitches/react/types/css-util").WithScaleValue<"space">;
+        };
+        m: (value: string | number | import("@stitches/react/types/css-util").WithScaleValue<"space">) => {
+            margin: string | number | import("@stitches/react/types/css-util").WithScaleValue<"space">;
+        };
+        mt: (value: string | number | import("@stitches/react/types/css-util").WithScaleValue<"space">) => {
+            marginTop: string | number | import("@stitches/react/types/css-util").WithScaleValue<"space">;
+        };
+        mr: (value: string | number | import("@stitches/react/types/css-util").WithScaleValue<"space">) => {
+            marginRight: string | number | import("@stitches/react/types/css-util").WithScaleValue<"space">;
+        };
+        mb: (value: string | number | import("@stitches/react/types/css-util").WithScaleValue<"space">) => {
+            marginBottom: string | number | import("@stitches/react/types/css-util").WithScaleValue<"space">;
+        };
+        ml: (value: string | number | import("@stitches/react/types/css-util").WithScaleValue<"space">) => {
+            marginLeft: string | number | import("@stitches/react/types/css-util").WithScaleValue<"space">;
+        };
+        mx: (value: string | number | import("@stitches/react/types/css-util").WithScaleValue<"space">) => {
+            marginLeft: string | number | import("@stitches/react/types/css-util").WithScaleValue<"space">;
+            marginRight: string | number | import("@stitches/react/types/css-util").WithScaleValue<"space">;
+        };
+        my: (value: string | number | import("@stitches/react/types/css-util").WithScaleValue<"space">) => {
+            marginTop: string | number | import("@stitches/react/types/css-util").WithScaleValue<"space">;
+            marginBottom: string | number | import("@stitches/react/types/css-util").WithScaleValue<"space">;
+        };
+    }> | undefined;
+    className?: string | undefined;
+    ref?: ((instance: HTMLDivElement | null) => void) | import("react").RefObject<HTMLDivElement> | null | undefined;
+    slot?: string | undefined;
+    title?: string | undefined;
+    hidden?: boolean | undefined;
+    suppressHydrationWarning?: boolean | undefined;
+    id?: string | undefined;
+    lang?: string | undefined;
+    tabIndex?: number | undefined;
+    "aria-activedescendant"?: string | undefined;
+    "aria-atomic"?: (boolean | "true" | "false") | undefined;
+    "aria-autocomplete"?: "none" | "both" | "inline" | "list" | undefined;
+    "aria-braillelabel"?: string | undefined;
+    "aria-brailleroledescription"?: string | undefined;
+    "aria-busy"?: (boolean | "true" | "false") | undefined;
+    "aria-checked"?: boolean | "mixed" | "true" | "false" | undefined;
+    "aria-colcount"?: number | undefined;
+    "aria-colindex"?: number | undefined;
+    "aria-colindextext"?: string | undefined;
+    "aria-colspan"?: number | undefined;
+    "aria-controls"?: string | undefined;
+    "aria-current"?: boolean | "time" | "page" | "true" | "false" | "step" | "location" | "date" | undefined;
+    "aria-describedby"?: string | undefined;
+    "aria-description"?: string | undefined;
+    "aria-details"?: string | undefined;
+    "aria-disabled"?: (boolean | "true" | "false") | undefined;
+    "aria-dropeffect"?: "link" | "none" | "copy" | "move" | "execute" | "popup" | undefined;
+    "aria-errormessage"?: string | undefined;
+    "aria-expanded"?: (boolean | "true" | "false") | undefined;
+    "aria-flowto"?: string | undefined;
+    "aria-grabbed"?: (boolean | "true" | "false") | undefined;
+    "aria-haspopup"?: boolean | "grid" | "dialog" | "menu" | "listbox" | "tree" | "true" | "false" | undefined;
+    "aria-hidden"?: (boolean | "true" | "false") | undefined;
+    "aria-invalid"?: boolean | "true" | "false" | "grammar" | "spelling" | undefined;
+    "aria-keyshortcuts"?: string | undefined;
+    "aria-label"?: string | undefined;
+    "aria-labelledby"?: string | undefined;
+    "aria-level"?: number | undefined;
+    "aria-live"?: "off" | "assertive" | "polite" | undefined;
+    "aria-modal"?: (boolean | "true" | "false") | undefined;
+    "aria-multiline"?: (boolean | "true" | "false") | undefined;
+    "aria-multiselectable"?: (boolean | "true" | "false") | undefined;
+    "aria-orientation"?: "horizontal" | "vertical" | undefined;
+    "aria-owns"?: string | undefined;
+    "aria-placeholder"?: string | undefined;
+    "aria-posinset"?: number | undefined;
+    "aria-pressed"?: boolean | "mixed" | "true" | "false" | undefined;
+    "aria-readonly"?: (boolean | "true" | "false") | undefined;
+    "aria-relevant"?: "all" | "text" | "additions" | "additions removals" | "additions text" | "removals" | "removals additions" | "removals text" | "text additions" | "text removals" | undefined;
+    "aria-required"?: (boolean | "true" | "false") | undefined;
+    "aria-roledescription"?: string | undefined;
+    "aria-rowcount"?: number | undefined;
+    "aria-rowindex"?: number | undefined;
+    "aria-rowindextext"?: string | undefined;
+    "aria-rowspan"?: number | undefined;
+    "aria-selected"?: (boolean | "true" | "false") | undefined;
+    "aria-setsize"?: number | undefined;
+    "aria-sort"?: "none" | "ascending" | "descending" | "other" | undefined;
+    "aria-valuemax"?: number | undefined;
+    "aria-valuemin"?: number | undefined;
+    "aria-valuenow"?: number | undefined;
+    "aria-valuetext"?: string | undefined;
+    dangerouslySetInnerHTML?: {
+        __html: string | TrustedHTML;
+    } | undefined;
+    onCopy?: import("react").ClipboardEventHandler<HTMLDivElement> | undefined;
+    onCopyCapture?: import("react").ClipboardEventHandler<HTMLDivElement> | undefined;
+    onCut?: import("react").ClipboardEventHandler<HTMLDivElement> | undefined;
+    onCutCapture?: import("react").ClipboardEventHandler<HTMLDivElement> | undefined;
+    onPaste?: import("react").ClipboardEventHandler<HTMLDivElement> | undefined;
+    onPasteCapture?: import("react").ClipboardEventHandler<HTMLDivElement> | undefined;
+    onCompositionEnd?: import("react").CompositionEventHandler<HTMLDivElement> | undefined;
+    onCompositionEndCapture?: import("react").CompositionEventHandler<HTMLDivElement> | undefined;
+    onCompositionStart?: import("react").CompositionEventHandler<HTMLDivElement> | undefined;
+    onCompositionStartCapture?: import("react").CompositionEventHandler<HTMLDivElement> | undefined;
+    onCompositionUpdate?: import("react").CompositionEventHandler<HTMLDivElement> | undefined;
+    onCompositionUpdateCapture?: import("react").CompositionEventHandler<HTMLDivElement> | undefined;
+    onFocus?: import("react").FocusEventHandler<HTMLDivElement> | undefined;
+    onFocusCapture?: import("react").FocusEventHandler<HTMLDivElement> | undefined;
+    onBlur?: import("react").FocusEventHandler<HTMLDivElement> | undefined;
+    onBlurCapture?: import("react").FocusEventHandler<HTMLDivElement> | undefined;
+    onChange?: import("react").FormEventHandler<HTMLDivElement> | undefined;
+    onChangeCapture?: import("react").FormEventHandler<HTMLDivElement> | undefined;
+    onBeforeInput?: import("react").FormEventHandler<HTMLDivElement> | undefined;
+    onBeforeInputCapture?: import("react").FormEventHandler<HTMLDivElement> | undefined;
+    onInput?: import("react").FormEventHandler<HTMLDivElement> | undefined;
+    onInputCapture?: import("react").FormEventHandler<HTMLDivElement> | undefined;
+    onReset?: import("react").FormEventHandler<HTMLDivElement> | undefined;
+    onResetCapture?: import("react").FormEventHandler<HTMLDivElement> | undefined;
+    onSubmit?: import("react").FormEventHandler<HTMLDivElement> | undefined;
+    onSubmitCapture?: import("react").FormEventHandler<HTMLDivElement> | undefined;
+    onInvalid?: import("react").FormEventHandler<HTMLDivElement> | undefined;
+    onInvalidCapture?: import("react").FormEventHandler<HTMLDivElement> | undefined;
+    onLoad?: import("react").ReactEventHandler<HTMLDivElement> | undefined;
+    onLoadCapture?: import("react").ReactEventHandler<HTMLDivElement> | undefined;
+    onError?: import("react").ReactEventHandler<HTMLDivElement> | undefined;
+    onErrorCapture?: import("react").ReactEventHandler<HTMLDivElement> | undefined;
+    onKeyDown?: import("react").KeyboardEventHandler<HTMLDivElement> | undefined;
+    onKeyDownCapture?: import("react").KeyboardEventHandler<HTMLDivElement> | undefined;
+    onKeyPress?: import("react").KeyboardEventHandler<HTMLDivElement> | undefined;
+    onKeyPressCapture?: import("react").KeyboardEventHandler<HTMLDivElement> | undefined;
+    onKeyUp?: import("react").KeyboardEventHandler<HTMLDivElement> | undefined;
+    onKeyUpCapture?: import("react").KeyboardEventHandler<HTMLDivElement> | undefined;
+    onAbort?: import("react").ReactEventHandler<HTMLDivElement> | undefined;
+    onAbortCapture?: import("react").ReactEventHandler<HTMLDivElement> | undefined;
+    onCanPlay?: import("react").ReactEventHandler<HTMLDivElement> | undefined;
+    onCanPlayCapture?: import("react").ReactEventHandler<HTMLDivElement> | undefined;
+    onCanPlayThrough?: import("react").ReactEventHandler<HTMLDivElement> | undefined;
+    onCanPlayThroughCapture?: import("react").ReactEventHandler<HTMLDivElement> | undefined;
+    onDurationChange?: import("react").ReactEventHandler<HTMLDivElement> | undefined;
+    onDurationChangeCapture?: import("react").ReactEventHandler<HTMLDivElement> | undefined;
+    onEmptied?: import("react").ReactEventHandler<HTMLDivElement> | undefined;
+    onEmptiedCapture?: import("react").ReactEventHandler<HTMLDivElement> | undefined;
+    onEncrypted?: import("react").ReactEventHandler<HTMLDivElement> | undefined;
+    onEncryptedCapture?: import("react").ReactEventHandler<HTMLDivElement> | undefined;
+    onEnded?: import("react").ReactEventHandler<HTMLDivElement> | undefined;
+    onEndedCapture?: import("react").ReactEventHandler<HTMLDivElement> | undefined;
+    onLoadedData?: import("react").ReactEventHandler<HTMLDivElement> | undefined;
+    onLoadedDataCapture?: import("react").ReactEventHandler<HTMLDivElement> | undefined;
+    onLoadedMetadata?: import("react").ReactEventHandler<HTMLDivElement> | undefined;
+    onLoadedMetadataCapture?: import("react").ReactEventHandler<HTMLDivElement> | undefined;
+    onLoadStart?: import("react").ReactEventHandler<HTMLDivElement> | undefined;
+    onLoadStartCapture?: import("react").ReactEventHandler<HTMLDivElement> | undefined;
+    onPause?: import("react").ReactEventHandler<HTMLDivElement> | undefined;
+    onPauseCapture?: import("react").ReactEventHandler<HTMLDivElement> | undefined;
+    onPlay?: import("react").ReactEventHandler<HTMLDivElement> | undefined;
+    onPlayCapture?: import("react").ReactEventHandler<HTMLDivElement> | undefined;
+    onPlaying?: import("react").ReactEventHandler<HTMLDivElement> | undefined;
+    onPlayingCapture?: import("react").ReactEventHandler<HTMLDivElement> | undefined;
+    onProgress?: import("react").ReactEventHandler<HTMLDivElement> | undefined;
+    onProgressCapture?: import("react").ReactEventHandler<HTMLDivElement> | undefined;
+    onRateChange?: import("react").ReactEventHandler<HTMLDivElement> | undefined;
+    onRateChangeCapture?: import("react").ReactEventHandler<HTMLDivElement> | undefined;
+    onResize?: import("react").ReactEventHandler<HTMLDivElement> | undefined;
+    onResizeCapture?: import("react").ReactEventHandler<HTMLDivElement> | undefined;
+    onSeeked?: import("react").ReactEventHandler<HTMLDivElement> | undefined;
+    onSeekedCapture?: import("react").ReactEventHandler<HTMLDivElement> | undefined;
+    onSeeking?: import("react").ReactEventHandler<HTMLDivElement> | undefined;
+    onSeekingCapture?: import("react").ReactEventHandler<HTMLDivElement> | undefined;
+    onStalled?: import("react").ReactEventHandler<HTMLDivElement> | undefined;
+    onStalledCapture?: import("react").ReactEventHandler<HTMLDivElement> | undefined;
+    onSuspend?: import("react").ReactEventHandler<HTMLDivElement> | undefined;
+    onSuspendCapture?: import("react").ReactEventHandler<HTMLDivElement> | undefined;
+    onTimeUpdate?: import("react").ReactEventHandler<HTMLDivElement> | undefined;
+    onTimeUpdateCapture?: import("react").ReactEventHandler<HTMLDivElement> | undefined;
+    onVolumeChange?: import("react").ReactEventHandler<HTMLDivElement> | undefined;
+    onVolumeChangeCapture?: import("react").ReactEventHandler<HTMLDivElement> | undefined;
+    onWaiting?: import("react").ReactEventHandler<HTMLDivElement> | undefined;
+    onWaitingCapture?: import("react").ReactEventHandler<HTMLDivElement> | undefined;
+    onAuxClick?: import("react").MouseEventHandler<HTMLDivElement> | undefined;
+    onAuxClickCapture?: import("react").MouseEventHandler<HTMLDivElement> | undefined;
+    onClick?: import("react").MouseEventHandler<HTMLDivElement> | undefined;
+    onClickCapture?: import("react").MouseEventHandler<HTMLDivElement> | undefined;
+    onContextMenu?: import("react").MouseEventHandler<HTMLDivElement> | undefined;
+    onContextMenuCapture?: import("react").MouseEventHandler<HTMLDivElement> | undefined;
+    onDoubleClick?: import("react").MouseEventHandler<HTMLDivElement> | undefined;
+    onDoubleClickCapture?: import("react").MouseEventHandler<HTMLDivElement> | undefined;
+    onDragCapture?: import("react").DragEventHandler<HTMLDivElement> | undefined;
+    onDragEndCapture?: import("react").DragEventHandler<HTMLDivElement> | undefined;
+    onDragEnter?: import("react").DragEventHandler<HTMLDivElement> | undefined;
+    onDragEnterCapture?: import("react").DragEventHandler<HTMLDivElement> | undefined;
+    onDragExit?: import("react").DragEventHandler<HTMLDivElement> | undefined;
+    onDragExitCapture?: import("react").DragEventHandler<HTMLDivElement> | undefined;
+    onDragLeave?: import("react").DragEventHandler<HTMLDivElement> | undefined;
+    onDragLeaveCapture?: import("react").DragEventHandler<HTMLDivElement> | undefined;
+    onDragOver?: import("react").DragEventHandler<HTMLDivElement> | undefined;
+    onDragOverCapture?: import("react").DragEventHandler<HTMLDivElement> | undefined;
+    onDragStartCapture?: import("react").DragEventHandler<HTMLDivElement> | undefined;
+    onDrop?: import("react").DragEventHandler<HTMLDivElement> | undefined;
+    onDropCapture?: import("react").DragEventHandler<HTMLDivElement> | undefined;
+    onMouseDown?: import("react").MouseEventHandler<HTMLDivElement> | undefined;
+    onMouseDownCapture?: import("react").MouseEventHandler<HTMLDivElement> | undefined;
+    onMouseEnter?: import("react").MouseEventHandler<HTMLDivElement> | undefined;
+    onMouseLeave?: import("react").MouseEventHandler<HTMLDivElement> | undefined;
+    onMouseMove?: import("react").MouseEventHandler<HTMLDivElement> | undefined;
+    onMouseMoveCapture?: import("react").MouseEventHandler<HTMLDivElement> | undefined;
+    onMouseOut?: import("react").MouseEventHandler<HTMLDivElement> | undefined;
+    onMouseOutCapture?: import("react").MouseEventHandler<HTMLDivElement> | undefined;
+    onMouseOver?: import("react").MouseEventHandler<HTMLDivElement> | undefined;
+    onMouseOverCapture?: import("react").MouseEventHandler<HTMLDivElement> | undefined;
+    onMouseUp?: import("react").MouseEventHandler<HTMLDivElement> | undefined;
+    onMouseUpCapture?: import("react").MouseEventHandler<HTMLDivElement> | undefined;
+    onSelect?: import("react").ReactEventHandler<HTMLDivElement> | undefined;
+    onSelectCapture?: import("react").ReactEventHandler<HTMLDivElement> | undefined;
+    onTouchCancel?: import("react").TouchEventHandler<HTMLDivElement> | undefined;
+    onTouchCancelCapture?: import("react").TouchEventHandler<HTMLDivElement> | undefined;
+    onTouchEnd?: import("react").TouchEventHandler<HTMLDivElement> | undefined;
+    onTouchEndCapture?: import("react").TouchEventHandler<HTMLDivElement> | undefined;
+    onTouchMove?: import("react").TouchEventHandler<HTMLDivElement> | undefined;
+    onTouchMoveCapture?: import("react").TouchEventHandler<HTMLDivElement> | undefined;
+    onTouchStart?: import("react").TouchEventHandler<HTMLDivElement> | undefined;
+    onTouchStartCapture?: import("react").TouchEventHandler<HTMLDivElement> | undefined;
+    onPointerDown?: import("react").PointerEventHandler<HTMLDivElement> | undefined;
+    onPointerDownCapture?: import("react").PointerEventHandler<HTMLDivElement> | undefined;
+    onPointerMove?: import("react").PointerEventHandler<HTMLDivElement> | undefined;
+    onPointerMoveCapture?: import("react").PointerEventHandler<HTMLDivElement> | undefined;
+    onPointerUp?: import("react").PointerEventHandler<HTMLDivElement> | undefined;
+    onPointerUpCapture?: import("react").PointerEventHandler<HTMLDivElement> | undefined;
+    onPointerCancel?: import("react").PointerEventHandler<HTMLDivElement> | undefined;
+    onPointerCancelCapture?: import("react").PointerEventHandler<HTMLDivElement> | undefined;
+    onPointerEnter?: import("react").PointerEventHandler<HTMLDivElement> | undefined;
+    onPointerEnterCapture?: import("react").PointerEventHandler<HTMLDivElement> | undefined;
+    onPointerLeave?: import("react").PointerEventHandler<HTMLDivElement> | undefined;
+    onPointerLeaveCapture?: import("react").PointerEventHandler<HTMLDivElement> | undefined;
+    onPointerOver?: import("react").PointerEventHandler<HTMLDivElement> | undefined;
+    onPointerOverCapture?: import("react").PointerEventHandler<HTMLDivElement> | undefined;
+    onPointerOut?: import("react").PointerEventHandler<HTMLDivElement> | undefined;
+    onPointerOutCapture?: import("react").PointerEventHandler<HTMLDivElement> | undefined;
+    onGotPointerCapture?: import("react").PointerEventHandler<HTMLDivElement> | undefined;
+    onGotPointerCaptureCapture?: import("react").PointerEventHandler<HTMLDivElement> | undefined;
+    onLostPointerCapture?: import("react").PointerEventHandler<HTMLDivElement> | undefined;
+    onLostPointerCaptureCapture?: import("react").PointerEventHandler<HTMLDivElement> | undefined;
+    onScroll?: import("react").UIEventHandler<HTMLDivElement> | undefined;
+    onScrollCapture?: import("react").UIEventHandler<HTMLDivElement> | undefined;
+    onWheel?: import("react").WheelEventHandler<HTMLDivElement> | undefined;
+    onWheelCapture?: import("react").WheelEventHandler<HTMLDivElement> | undefined;
+    onAnimationStartCapture?: import("react").AnimationEventHandler<HTMLDivElement> | undefined;
+    onAnimationEnd?: import("react").AnimationEventHandler<HTMLDivElement> | undefined;
+    onAnimationEndCapture?: import("react").AnimationEventHandler<HTMLDivElement> | undefined;
+    onAnimationIteration?: import("react").AnimationEventHandler<HTMLDivElement> | undefined;
+    onAnimationIterationCapture?: import("react").AnimationEventHandler<HTMLDivElement> | undefined;
+    onTransitionEnd?: import("react").TransitionEventHandler<HTMLDivElement> | undefined;
+    onTransitionEndCapture?: import("react").TransitionEventHandler<HTMLDivElement> | undefined;
+    key?: import("react").Key | null | undefined;
+    defaultChecked?: boolean | undefined;
+    defaultValue?: string | number | readonly string[] | undefined;
+    suppressContentEditableWarning?: boolean | undefined;
+    accessKey?: string | undefined;
+    autoFocus?: boolean | undefined;
+    contentEditable?: "inherit" | (boolean | "true" | "false") | undefined;
+    contextMenu?: string | undefined;
+    dir?: string | undefined;
+    draggable?: (boolean | "true" | "false") | undefined;
+    nonce?: string | undefined;
+    placeholder?: string | undefined;
+    spellCheck?: (boolean | "true" | "false") | undefined;
+    radioGroup?: string | undefined;
+    about?: string | undefined;
+    datatype?: string | undefined;
+    inlist?: any;
+    property?: string | undefined;
+    rel?: string | undefined;
+    resource?: string | undefined;
+    rev?: string | undefined;
+    typeof?: string | undefined;
+    vocab?: string | undefined;
+    autoCapitalize?: string | undefined;
+    autoCorrect?: string | undefined;
+    autoSave?: string | undefined;
+    itemProp?: string | undefined;
+    itemScope?: boolean | undefined;
+    itemType?: string | undefined;
+    itemID?: string | undefined;
+    itemRef?: string | undefined;
+    results?: number | undefined;
+    security?: string | undefined;
+    unselectable?: "on" | "off" | undefined;
+    inputMode?: "search" | "none" | "text" | "tel" | "url" | "email" | "numeric" | "decimal" | undefined;
+    is?: string | undefined;
+} & import("framer-motion").MotionProps>;
 declare const Container: import("@stitches/react/types/styled-component").StyledComponent<"div", {
     transparentBg?: boolean | "true" | undefined;
     noRadius?: boolean | "true" | undefined;
@@ -3456,7 +4061,7 @@ declare const AvatarContainer: import("@stitches/react/types/styled-component").
     };
 }>>;
 interface VideoTileType {
-    Root: typeof Root;
+    Root: typeof MotionRoot;
     Container: typeof Container;
     Overlay: typeof Overlay;
     Info: typeof Info;

package/dist/index.cjs.css

@@ -1,6 +1,6 @@
 @import "https://fonts.googleapis.com/css2?family=Inter:wght@400;500&display=swap";
 
-/* ../../../../../../../tmp/tmp-2792-syn0Gf89RRcC/1931be0167c1/tldraw.css */
+/* ../../../../../../../tmp/tmp-2861-Z4uSR5j8R7ap/1933e848fe63/tldraw.css */
 .tl-container {
   width: 100%;
   height: 100%;
@@ -2756,7 +2756,7 @@ input,
   font-size: 12px;
 }
 
-/* ../../../../../../../tmp/tmp-2792-syn0Gf89RRcC/1931be015f10/index.css */
+/* ../../../../../../../tmp/tmp-2861-Z4uSR5j8R7ap/1933e848f7b1/index.css */
 .tlui-navigation-zone,
 .tlui-navigation-panel {
   display: none;