@webstudio-is/sdk-components-react 0.0.0-588fe22 → 0.0.0-73cd6ea

package/lib/types/checkbox.d.ts

@@ -1,4 +1,4 @@
 export declare const defaultTag = "input";
-export declare const Checkbox: import("react").ForwardRefExoticComponent<Omit<Omit<import("react").DetailedHTMLProps<import("react").InputHTMLAttributes<HTMLInputElement>, HTMLInputElement>, "value" | "type"> & {
+export declare const Checkbox: import("react").ForwardRefExoticComponent<Omit<Omit<import("react").DetailedHTMLProps<import("react").InputHTMLAttributes<HTMLInputElement>, HTMLInputElement>, "type" | "value"> & {
     value?: string;
 }, "ref"> & import("react").RefAttributes<HTMLInputElement>>;

package/lib/types/checkbox.ws.d.ts

@@ -1,3 +1,2 @@
-import { type WsComponentMeta, type WsComponentPropsMeta } from "@webstudio-is/sdk";
+import type { WsComponentMeta } from "@webstudio-is/sdk";
 export declare const meta: WsComponentMeta;
-export declare const propsMeta: WsComponentPropsMeta;

package/lib/types/code-text.ws.d.ts

@@ -1,3 +1,2 @@
-import { type WsComponentMeta, type WsComponentPropsMeta } from "@webstudio-is/sdk";
+import type { WsComponentMeta } from "@webstudio-is/sdk";
 export declare const meta: WsComponentMeta;
-export declare const propsMeta: WsComponentPropsMeta;

package/lib/types/components.d.ts

@@ -42,3 +42,4 @@ export { HeadSlot } from "./head-slot";
 export { HeadLink } from "./head-link";
 export { HeadMeta } from "./head-meta";
 export { HeadTitle } from "./head-title";
+export { Video } from "./video";

package/lib/types/form.ws.d.ts

@@ -1,3 +1,2 @@
-import { type WsComponentMeta, type WsComponentPropsMeta } from "@webstudio-is/sdk";
+import type { WsComponentMeta } from "@webstudio-is/sdk";
 export declare const meta: WsComponentMeta;
-export declare const propsMeta: WsComponentPropsMeta;

package/lib/types/fragment.ws.d.ts

@@ -1,3 +1,2 @@
-import type { WsComponentMeta, WsComponentPropsMeta } from "@webstudio-is/sdk";
+import type { WsComponentMeta } from "@webstudio-is/sdk";
 export declare const meta: WsComponentMeta;
-export declare const propsMeta: WsComponentPropsMeta;

package/lib/types/head-link.ws.d.ts

@@ -1,3 +1,2 @@
-import { type WsComponentMeta, type WsComponentPropsMeta } from "@webstudio-is/sdk";
+import type { WsComponentMeta } from "@webstudio-is/sdk";
 export declare const meta: WsComponentMeta;
-export declare const propsMeta: WsComponentPropsMeta;

package/lib/types/head-meta.ws.d.ts

@@ -1,3 +1,2 @@
-import { type WsComponentMeta, type WsComponentPropsMeta } from "@webstudio-is/sdk";
+import type { WsComponentMeta } from "@webstudio-is/sdk";
 export declare const meta: WsComponentMeta;
-export declare const propsMeta: WsComponentPropsMeta;

package/lib/types/head-slot.ws.d.ts

@@ -1,3 +1,2 @@
-import { type WsComponentMeta, type WsComponentPropsMeta } from "@webstudio-is/sdk";
+import type { WsComponentMeta } from "@webstudio-is/sdk";
 export declare const meta: WsComponentMeta;
-export declare const propsMeta: WsComponentPropsMeta;

package/lib/types/head-title.ws.d.ts

@@ -1,3 +1,2 @@
-import { type WsComponentMeta, type WsComponentPropsMeta } from "@webstudio-is/sdk";
+import type { WsComponentMeta } from "@webstudio-is/sdk";
 export declare const meta: WsComponentMeta;
-export declare const propsMeta: WsComponentPropsMeta;

package/lib/types/heading.d.ts

@@ -1,8 +1,7 @@
 import { type ComponentProps } from "react";
 declare const defaultTag = "h1";
 type Props = ComponentProps<typeof defaultTag> & {
-    /** Use HTML heading levels (h1-h6) to structure content hierarchically, with h1 as the main title and subsequent levels representing sub-sections. Maintain a logical order and avoid skipping levels to ensure consistent and meaningful organization. */
-    tag?: "h1" | "h2" | "h3" | "h4" | "h5" | "h6";
+    tag?: string;
 };
 export declare const Heading: import("react").ForwardRefExoticComponent<Omit<Props, "ref"> & import("react").RefAttributes<HTMLHeadingElement>>;
 export {};

package/lib/types/heading.ws.d.ts

@@ -1,3 +1,2 @@
-import { type WsComponentMeta, type WsComponentPropsMeta } from "@webstudio-is/sdk";
+import type { WsComponentMeta } from "@webstudio-is/sdk";
 export declare const meta: WsComponentMeta;
-export declare const propsMeta: WsComponentPropsMeta;

package/lib/types/html-embed.ws.d.ts

@@ -1,3 +1,2 @@
-import type { WsComponentMeta, WsComponentPropsMeta } from "@webstudio-is/sdk";
+import { type WsComponentMeta } from "@webstudio-is/sdk";
 export declare const meta: WsComponentMeta;
-export declare const propsMeta: WsComponentPropsMeta;

package/lib/types/image.ws.d.ts

@@ -1,3 +1,2 @@
-import { type WsComponentMeta, type WsComponentPropsMeta } from "@webstudio-is/sdk";
+import type { WsComponentMeta } from "@webstudio-is/sdk";
 export declare const meta: WsComponentMeta;
-export declare const propsMeta: WsComponentPropsMeta;

package/lib/types/input.d.ts

@@ -1,4 +1 @@
-export declare const defaultTag = "input";
-export declare const Input: import("react").ForwardRefExoticComponent<Omit<import("react").ClassAttributes<HTMLInputElement> & import("react").InputHTMLAttributes<HTMLInputElement> & {
-    type?: "color" | "date" | "datetime-local" | "email" | "hidden" | "month" | "number" | "password" | "range" | "search" | "tel" | "text" | "time" | "url" | "week";
-}, "ref"> & import("react").RefAttributes<HTMLInputElement>>;
+export declare const Input: import("react").ForwardRefExoticComponent<Omit<import("react").DetailedHTMLProps<import("react").InputHTMLAttributes<HTMLInputElement>, HTMLInputElement>, "ref"> & import("react").RefAttributes<HTMLInputElement>>;

package/lib/types/input.ws.d.ts

@@ -1,3 +1,2 @@
-import { type WsComponentMeta, type WsComponentPropsMeta } from "@webstudio-is/sdk";
+import type { WsComponentMeta } from "@webstudio-is/sdk";
 export declare const meta: WsComponentMeta;
-export declare const propsMeta: WsComponentPropsMeta;

package/lib/types/italic.ws.d.ts

@@ -1,3 +1,2 @@
-import { type WsComponentMeta, type WsComponentPropsMeta } from "@webstudio-is/sdk";
+import type { WsComponentMeta } from "@webstudio-is/sdk";
 export declare const meta: WsComponentMeta;
-export declare const propsMeta: WsComponentPropsMeta;

package/lib/types/label.ws.d.ts

@@ -1,3 +1,2 @@
-import { type WsComponentMeta, type WsComponentPropsMeta } from "@webstudio-is/sdk";
+import type { WsComponentMeta } from "@webstudio-is/sdk";
 export declare const meta: WsComponentMeta;
-export declare const propsMeta: WsComponentPropsMeta;

package/lib/types/link.ws.d.ts

@@ -1,3 +1,2 @@
-import { type WsComponentMeta, type WsComponentPropsMeta } from "@webstudio-is/sdk";
+import type { WsComponentMeta } from "@webstudio-is/sdk";
 export declare const meta: WsComponentMeta;
-export declare const propsMeta: WsComponentPropsMeta;

package/lib/types/list-item.ws.d.ts

@@ -1,3 +1,2 @@
-import { type WsComponentMeta, type WsComponentPropsMeta } from "@webstudio-is/sdk";
+import type { WsComponentMeta } from "@webstudio-is/sdk";
 export declare const meta: WsComponentMeta;
-export declare const propsMeta: WsComponentPropsMeta;

package/lib/types/list.ws.d.ts

@@ -1,3 +1,2 @@
-import { type WsComponentMeta, type WsComponentPropsMeta } from "@webstudio-is/sdk";
+import type { WsComponentMeta } from "@webstudio-is/sdk";
 export declare const meta: WsComponentMeta;
-export declare const propsMeta: WsComponentPropsMeta;

package/lib/types/markdown-embed.d.ts

@@ -1,7 +1,7 @@
-type MarkdownEmbedProps = {
+import { type ComponentProps } from "react";
+type MarkdownEmbedProps = ComponentProps<"div"> & {
     code: string;
-    className?: string;
     children?: never;
 };
-export declare const MarkdownEmbed: import("react").ForwardRefExoticComponent<MarkdownEmbedProps & import("react").RefAttributes<HTMLDivElement>>;
+export declare const MarkdownEmbed: import("react").ForwardRefExoticComponent<Omit<MarkdownEmbedProps, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
 export {};

package/lib/types/markdown-embed.ws.d.ts

@@ -1,3 +1,2 @@
-import type { WsComponentMeta, WsComponentPropsMeta } from "@webstudio-is/sdk";
+import { type WsComponentMeta } from "@webstudio-is/sdk";
 export declare const meta: WsComponentMeta;
-export declare const propsMeta: WsComponentPropsMeta;

package/lib/types/metas.d.ts

@@ -42,3 +42,4 @@ export { meta as HeadSlot } from "./head-slot.ws";
 export { meta as HeadLink } from "./head-link.ws";
 export { meta as HeadMeta } from "./head-meta.ws";
 export { meta as HeadTitle } from "./head-title.ws";
+export { meta as Video } from "./video.ws";

package/lib/types/option.d.ts

@@ -1,2 +1 @@
-export declare const defaultTag = "option";
 export declare const Option: import("react").ForwardRefExoticComponent<Omit<import("react").DetailedHTMLProps<import("react").OptionHTMLAttributes<HTMLOptionElement>, HTMLOptionElement>, "ref"> & import("react").RefAttributes<HTMLOptionElement>>;

package/lib/types/option.ws.d.ts

@@ -1,3 +1,2 @@
-import type { WsComponentMeta, WsComponentPropsMeta } from "@webstudio-is/sdk";
+import type { WsComponentMeta } from "@webstudio-is/sdk";
 export declare const meta: WsComponentMeta;
-export declare const propsMeta: WsComponentPropsMeta;

package/lib/types/paragraph.ws.d.ts

@@ -1,3 +1,2 @@
-import { type WsComponentMeta, type WsComponentPropsMeta } from "@webstudio-is/sdk";
+import type { WsComponentMeta } from "@webstudio-is/sdk";
 export declare const meta: WsComponentMeta;
-export declare const propsMeta: WsComponentPropsMeta;

package/lib/types/radio-button.d.ts

@@ -1,4 +1,4 @@
 export declare const defaultTag = "input";
-export declare const RadioButton: import("react").ForwardRefExoticComponent<Omit<Omit<import("react").DetailedHTMLProps<import("react").InputHTMLAttributes<HTMLInputElement>, HTMLInputElement>, "value" | "type"> & {
+export declare const RadioButton: import("react").ForwardRefExoticComponent<Omit<Omit<import("react").DetailedHTMLProps<import("react").InputHTMLAttributes<HTMLInputElement>, HTMLInputElement>, "type" | "value"> & {
     value?: string;
 }, "ref"> & import("react").RefAttributes<HTMLInputElement>>;

package/lib/types/radio-button.ws.d.ts

@@ -1,3 +1,2 @@
-import { type WsComponentMeta, type WsComponentPropsMeta } from "@webstudio-is/sdk";
+import type { WsComponentMeta } from "@webstudio-is/sdk";
 export declare const meta: WsComponentMeta;
-export declare const propsMeta: WsComponentPropsMeta;

package/lib/types/rich-text-link.ws.d.ts

@@ -1,3 +1,2 @@
-import type { WsComponentMeta, WsComponentPropsMeta } from "@webstudio-is/sdk";
+import type { WsComponentMeta } from "@webstudio-is/sdk";
 export declare const meta: WsComponentMeta;
-export declare const propsMeta: WsComponentPropsMeta;

package/lib/types/select.d.ts

@@ -1,4 +1,3 @@
 import { type Hook } from "@webstudio-is/react-sdk/runtime";
-export declare const defaultTag = "select";
 export declare const Select: import("react").ForwardRefExoticComponent<Omit<import("react").DetailedHTMLProps<import("react").SelectHTMLAttributes<HTMLSelectElement>, HTMLSelectElement>, "ref"> & import("react").RefAttributes<HTMLSelectElement>>;
 export declare const hooksSelect: Hook;

package/lib/types/select.ws.d.ts

@@ -1,3 +1,2 @@
-import { type WsComponentMeta, type WsComponentPropsMeta } from "@webstudio-is/sdk";
+import type { WsComponentMeta } from "@webstudio-is/sdk";
 export declare const meta: WsComponentMeta;
-export declare const propsMeta: WsComponentPropsMeta;

package/lib/types/separator.ws.d.ts

@@ -1,3 +1,2 @@
-import { type WsComponentMeta, type WsComponentPropsMeta } from "@webstudio-is/sdk";
+import type { WsComponentMeta } from "@webstudio-is/sdk";
 export declare const meta: WsComponentMeta;
-export declare const propsMeta: WsComponentPropsMeta;

package/lib/types/shared/video.d.ts

@@ -0,0 +1,7 @@
+export declare const requestFullscreen: (element: HTMLIFrameElement) => void;
+export type PlayerStatus = "initial" | "loading" | "ready";
+export declare const VideoContext: import("react").Context<{
+    previewImageUrl?: URL;
+    onInitPlayer: () => void;
+    status: PlayerStatus;
+}>;

package/lib/types/slot.ws.d.ts

@@ -1,3 +1,2 @@
-import type { WsComponentMeta, WsComponentPropsMeta } from "@webstudio-is/sdk";
+import type { WsComponentMeta } from "@webstudio-is/sdk";
 export declare const meta: WsComponentMeta;
-export declare const propsMeta: WsComponentPropsMeta;

package/lib/types/span.ws.d.ts

@@ -1,3 +1,2 @@
-import { type WsComponentMeta, type WsComponentPropsMeta } from "@webstudio-is/sdk";
+import type { WsComponentMeta } from "@webstudio-is/sdk";
 export declare const meta: WsComponentMeta;
-export declare const propsMeta: WsComponentPropsMeta;

package/lib/types/subscript.ws.d.ts

@@ -1,3 +1,2 @@
-import { type WsComponentMeta, type WsComponentPropsMeta } from "@webstudio-is/sdk";
+import type { WsComponentMeta } from "@webstudio-is/sdk";
 export declare const meta: WsComponentMeta;
-export declare const propsMeta: WsComponentPropsMeta;

package/lib/types/superscript.ws.d.ts

@@ -1,3 +1,2 @@
-import { type WsComponentMeta, type WsComponentPropsMeta } from "@webstudio-is/sdk";
+import type { WsComponentMeta } from "@webstudio-is/sdk";
 export declare const meta: WsComponentMeta;
-export declare const propsMeta: WsComponentPropsMeta;

package/lib/types/templates.d.ts

@@ -1,18 +1,6 @@
 export { meta as ContentEmbed } from "./content-embed.template";
 export { meta as MarkdownEmbed } from "./markdown-embed.template";
-export { meta as Text } from "./text.template";
-export { meta as Heading } from "./heading.template";
-export { meta as Paragraph } from "./paragraph.template";
-export { meta as Link } from "./link.template";
-export { meta as Button } from "./button.template";
 export { meta as Form } from "./webhook-form.template";
-export { meta as Blockquote } from "./blockquote.template";
-export { meta as List } from "./list.template";
-export { meta as ListItem } from "./list-item.template";
-export { meta as Label } from "./label.template";
-export { meta as RadioButton } from "./radio-button.template";
-export { meta as Checkbox } from "./checkbox.template";
 export { meta as Vimeo } from "./vimeo.template";
 export { meta as YouTube } from "./youtube.template";
-export { meta as Select } from "./select.template";
 export { meta as HeadSlot } from "./head-slot.template";

package/lib/types/text.d.ts

@@ -1,8 +1,7 @@
 import { type ComponentProps } from "react";
-export declare const defaultTag = "div";
+declare const defaultTag = "div";
 type Props = ComponentProps<typeof defaultTag> & {
-    /** Use this property to change the HTML tag of this element to semantically structure and describe the content of a webpage. This can be important for accessibility tools and search engine optimization. */
-    tag?: "div" | "span" | "figcaption" | "cite";
+    tag?: string;
 };
 export declare const Text: import("react").ForwardRefExoticComponent<Omit<Props, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
 export {};

package/lib/types/text.ws.d.ts

@@ -1,3 +1,2 @@
-import { type WsComponentMeta, type WsComponentPropsMeta } from "@webstudio-is/sdk";
+import type { WsComponentMeta } from "@webstudio-is/sdk";
 export declare const meta: WsComponentMeta;
-export declare const propsMeta: WsComponentPropsMeta;

package/lib/types/textarea.d.ts

@@ -1,2 +1 @@
-export declare const defaultTag = "textarea";
 export declare const Textarea: import("react").ForwardRefExoticComponent<Omit<import("react").DetailedHTMLProps<import("react").TextareaHTMLAttributes<HTMLTextAreaElement>, HTMLTextAreaElement>, "ref"> & import("react").RefAttributes<HTMLTextAreaElement>>;

package/lib/types/textarea.ws.d.ts

@@ -1,3 +1,2 @@
-import { type WsComponentMeta, type WsComponentPropsMeta } from "@webstudio-is/sdk";
+import type { WsComponentMeta } from "@webstudio-is/sdk";
 export declare const meta: WsComponentMeta;
-export declare const propsMeta: WsComponentPropsMeta;

package/lib/types/time.d.ts

@@ -4,14 +4,12 @@ type Language = (typeof languages)[number];
 type Country = (typeof countries)[number];
 type DateStyle = Intl.DateTimeFormatOptions["dateStyle"] | "none";
 type TimeStyle = Intl.DateTimeFormatOptions["timeStyle"] | "none";
-type TimeProps = {
-    datetime?: string;
+export declare const Time: import("react").ForwardRefExoticComponent<Pick<import("react").DetailedHTMLProps<import("react").TimeHTMLAttributes<HTMLTimeElement>, HTMLTimeElement>, "dateTime"> & {
     language?: Language;
     country?: Country;
     dateStyle?: DateStyle;
     timeStyle?: TimeStyle;
-};
-export declare const Time: import("react").ForwardRefExoticComponent<TimeProps & import("react").RefAttributes<HTMLTimeElement>>;
+} & import("react").RefAttributes<HTMLTimeElement>>;
 export declare const __testing__: {
     parseDate: (datetimeString: string) => Date | undefined;
 };

package/lib/types/time.ws.d.ts

@@ -1,3 +1,2 @@
-import { type WsComponentMeta, type WsComponentPropsMeta } from "@webstudio-is/sdk";
+import type { WsComponentMeta } from "@webstudio-is/sdk";
 export declare const meta: WsComponentMeta;
-export declare const propsMeta: WsComponentPropsMeta;

package/lib/types/video.d.ts

@@ -0,0 +1,9 @@
+import type { Atom } from "nanostores";
+export declare const defaultTag = "video";
+export declare const Video: import("react").ForwardRefExoticComponent<Omit<import("react").ClassAttributes<HTMLVideoElement> & import("react").VideoHTMLAttributes<HTMLVideoElement> & {
+    $progress?: Atom<number | undefined>;
+    $visible?: Atom<boolean>;
+    $timeline?: boolean;
+} & {
+    $webstudio$canvasOnly$assetId?: string | undefined;
+}, "ref"> & import("react").RefAttributes<HTMLVideoElement>>;

package/lib/types/video.ws.d.ts

@@ -0,0 +1,2 @@
+import type { WsComponentMeta } from "@webstudio-is/sdk";
+export declare const meta: WsComponentMeta;

package/lib/types/vimeo-play-button.ws.d.ts

@@ -1,3 +1,2 @@
-import { type WsComponentMeta, type WsComponentPropsMeta } from "@webstudio-is/sdk";
+import type { WsComponentMeta } from "@webstudio-is/sdk";
 export declare const meta: WsComponentMeta;
-export declare const propsMeta: WsComponentPropsMeta;

package/lib/types/vimeo-preview-image.d.ts

@@ -1,47 +1,43 @@
 export declare const VimeoPreviewImage: import("react").ForwardRefExoticComponent<Omit<{
+    slot?: string | undefined | undefined;
     style?: import("react").CSSProperties | undefined;
-    id?: string | undefined | undefined;
-    width?: number | string | undefined | undefined;
-    height?: number | string | undefined | undefined;
-    children?: import("react").ReactNode;
     title?: string | undefined | undefined;
-    property?: string | undefined | undefined;
-    content?: string | undefined | undefined;
-    resource?: string | undefined | undefined;
-    color?: string | undefined | undefined;
-    translate?: "yes" | "no" | undefined | undefined;
-    hidden?: boolean | undefined | undefined;
-    src?: string | undefined | undefined;
-    slot?: string | undefined | undefined;
-    defaultValue?: string | number | readonly string[] | undefined;
     key?: import("react").Key | null | undefined;
     defaultChecked?: boolean | undefined | undefined;
+    defaultValue?: string | number | readonly string[] | undefined;
     suppressContentEditableWarning?: boolean | undefined | undefined;
     suppressHydrationWarning?: boolean | undefined | undefined;
     accessKey?: string | undefined | undefined;
     autoFocus?: boolean | undefined | undefined;
     className?: string | undefined | undefined;
-    contentEditable?: "inherit" | (boolean | "true" | "false") | "plaintext-only" | undefined;
+    contentEditable?: (boolean | "true" | "false") | "inherit" | "plaintext-only" | undefined;
     contextMenu?: string | undefined | undefined;
     dir?: string | undefined | undefined;
     draggable?: (boolean | "true" | "false") | undefined;
+    hidden?: boolean | undefined | undefined;
+    id?: string | undefined | undefined;
     lang?: string | undefined | undefined;
     nonce?: string | undefined | undefined;
     spellCheck?: (boolean | "true" | "false") | undefined;
     tabIndex?: number | undefined | undefined;
+    translate?: "yes" | "no" | undefined | undefined;
     radioGroup?: string | undefined | undefined;
     role?: import("react").AriaRole | undefined;
     about?: string | undefined | undefined;
+    content?: string | undefined | undefined;
     datatype?: string | undefined | undefined;
     inlist?: any;
     prefix?: string | undefined | undefined;
+    property?: string | undefined | undefined;
     rel?: string | undefined | undefined;
+    resource?: string | undefined | undefined;
     rev?: string | undefined | undefined;
     typeof?: string | undefined | undefined;
     vocab?: string | undefined | undefined;
     autoCapitalize?: string | undefined | undefined;
     autoCorrect?: string | undefined | undefined;
     autoSave?: string | undefined | undefined;
+    color?: string | undefined | undefined;
     itemProp?: string | undefined | undefined;
     itemScope?: boolean | undefined | undefined;
     itemType?: string | undefined | undefined;
@@ -105,6 +101,7 @@ export declare const VimeoPreviewImage: import("react").ForwardRefExoticComponen
     "aria-valuemin"?: number | undefined | undefined;
     "aria-valuenow"?: number | undefined | undefined;
     "aria-valuetext"?: string | undefined | undefined;
+    children?: import("react").ReactNode;
     dangerouslySetInnerHTML?: {
         __html: string | TrustedHTML;
     } | undefined | undefined;
@@ -268,17 +265,20 @@ export declare const VimeoPreviewImage: import("react").ForwardRefExoticComponen
     onAnimationIterationCapture?: import("react").AnimationEventHandler<HTMLImageElement> | undefined;
     onTransitionEnd?: import("react").TransitionEventHandler<HTMLImageElement> | undefined;
     onTransitionEndCapture?: import("react").TransitionEventHandler<HTMLImageElement> | undefined;
-    quality?: number | undefined;
-    sizes?: string | undefined | undefined;
-    optimize?: boolean | undefined;
+    height?: number | string | undefined | undefined;
+    width?: number | string | undefined | undefined;
+    crossOrigin?: "" | "anonymous" | "use-credentials" | undefined;
+    useMap?: string | undefined | undefined;
+    referrerPolicy?: import("react").HTMLAttributeReferrerPolicy | undefined;
+    alt?: string | undefined | undefined;
+    src?: string | undefined | undefined;
     loading?: "eager" | "lazy" | undefined | undefined;
     decoding?: "async" | "auto" | "sync" | undefined | undefined;
-    alt?: string | undefined | undefined;
-    crossOrigin?: "" | "anonymous" | "use-credentials" | undefined;
     fetchPriority?: "high" | "low" | "auto" | undefined;
-    referrerPolicy?: import("react").HTMLAttributeReferrerPolicy | undefined;
+    sizes?: string | undefined | undefined;
     srcSet?: string | undefined | undefined;
-    useMap?: string | undefined | undefined;
+    quality?: number | undefined;
+    optimize?: boolean | undefined;
 } & {
     $webstudio$canvasOnly$assetId?: string | undefined;
 } & import("react").RefAttributes<HTMLImageElement>, "ref"> & import("react").RefAttributes<HTMLImageElement>>;

package/lib/types/vimeo-preview-image.ws.d.ts

@@ -1,3 +1,2 @@
-import type { WsComponentMeta, WsComponentPropsMeta } from "@webstudio-is/sdk";
+import type { WsComponentMeta } from "@webstudio-is/sdk";
 export declare const meta: WsComponentMeta;
-export declare const propsMeta: WsComponentPropsMeta;

package/lib/types/vimeo-spinner.ws.d.ts

@@ -1,3 +1,2 @@
-import { type WsComponentMeta, type WsComponentPropsMeta } from "@webstudio-is/sdk";
+import type { WsComponentMeta } from "@webstudio-is/sdk";
 export declare const meta: WsComponentMeta;
-export declare const propsMeta: WsComponentPropsMeta;

package/lib/types/vimeo.d.ts

@@ -66,12 +66,6 @@ export type VimeoOptions = Omit<VimeoPlayerOptions, "dnt" | "interactive_params"
     /** Whether to display the video owner's portrait. Only works if either title or byline are also enabled */
     showPortrait?: VimeoPlayerOptions["portrait"];
 };
-type PlayerStatus = "initial" | "loading" | "ready";
-export declare const VimeoContext: import("react").Context<{
-    previewImageUrl?: URL;
-    onInitPlayer: () => void;
-    status: PlayerStatus;
-}>;
 declare const defaultTag = "div";
 type Props = Omit<ComponentProps<typeof defaultTag>, keyof VimeoOptions> & VimeoOptions & {
     /**

package/lib/types/vimeo.ws.d.ts

@@ -1,3 +1,2 @@
-import { type WsComponentMeta, type WsComponentPropsMeta } from "@webstudio-is/sdk";
+import type { WsComponentMeta } from "@webstudio-is/sdk";
 export declare const meta: WsComponentMeta;
-export declare const propsMeta: WsComponentPropsMeta;

package/lib/types/webhook-form.ws.d.ts

@@ -1,3 +1,2 @@
-import type { WsComponentMeta, WsComponentPropsMeta } from "@webstudio-is/sdk";
+import type { WsComponentMeta } from "@webstudio-is/sdk";
 export declare const meta: WsComponentMeta;
-export declare const propsMeta: WsComponentPropsMeta;

package/lib/types/xml-node.ws.d.ts

@@ -1,3 +1,2 @@
-import type { WsComponentMeta, WsComponentPropsMeta } from "@webstudio-is/sdk";
+import type { WsComponentMeta } from "@webstudio-is/sdk";
 export declare const meta: WsComponentMeta;
-export declare const propsMeta: WsComponentPropsMeta;

package/lib/types/xml-time.ws.d.ts

@@ -1,3 +1,2 @@
-import type { WsComponentMeta, WsComponentPropsMeta } from "@webstudio-is/sdk";
+import type { WsComponentMeta } from "@webstudio-is/sdk";
 export declare const meta: WsComponentMeta;
-export declare const propsMeta: WsComponentPropsMeta;

package/lib/types/youtube.ws.d.ts

@@ -1,3 +1,2 @@
-import { type WsComponentMeta, type WsComponentPropsMeta } from "@webstudio-is/sdk";
+import type { WsComponentMeta } from "@webstudio-is/sdk";
 export declare const meta: WsComponentMeta;
-export declare const propsMeta: WsComponentPropsMeta;

package/lib/video.js

@@ -0,0 +1,53 @@
+import { jsx as p } from "react/jsx-runtime";
+import { forwardRef as y, useId as V, useContext as N, useEffect as x } from "react";
+import { ReactSdkContext as I } from "@webstudio-is/react-sdk/runtime";
+const c = "data-ws-video-id", S = {
+  HAVE_METADATA: 1
+}, _ = y(
+  ({
+    $progress: r,
+    $visible: n,
+    $timeline: d,
+    $webstudio$canvasOnly$assetId: w,
+    children: l,
+    src: o,
+    ...b
+  }, m) => {
+    const u = V(), A = {
+      [c]: u
+    }, { videoLoader: f } = N(I), T = o && f ? f({ src: o }) : o;
+    return x(() => {
+      if (r === void 0 || n === void 0)
+        return;
+      const e = document.querySelector(`[${c}="${u}"]`);
+      if (e === null || !(e instanceof HTMLVideoElement))
+        return;
+      if (e.play().catch(() => {
+      }), e.pause(), d)
+        return r.subscribe((t) => {
+          if (e.readyState < S.HAVE_METADATA || (e.paused || e.pause(), e.seeking))
+            return;
+          let s = e.duration;
+          Number.isNaN(s) || (Number.isFinite(s) || (s = 60), e.currentTime = (t ?? 0) * s);
+        });
+      let i = !1, a = !1;
+      const v = n.subscribe((t) => {
+        a = t, a === !1 && i === !1 && !e.loop && (e.currentTime = 0);
+      }), E = r.subscribe((t) => {
+        if (i && (t === void 0 || t === 0 || t === 1)) {
+          i = !1, e.pause(), a === !1 && i === !1 && !e.loop && (e.currentTime = 0);
+          return;
+        }
+        i || (i = !0, e.ended || e.play().catch(() => {
+        }));
+      });
+      return () => {
+        E(), v();
+      };
+    }, [r, d, n, u]), /* @__PURE__ */ p("video", { src: T, ...b, ...A, ref: m, children: l });
+  }
+);
+_.displayName = "Video";
+export {
+  _ as Video
+};

package/lib/video.ws.js

@@ -0,0 +1,44 @@
+import { VideoIcon as e } from "@webstudio-is/icons/svg";
+import { props as o } from "./__generated__/video.props.js";
+const i = {
+  icon: e,
+  contentModel: {
+    category: "instance",
+    children: []
+  },
+  presetStyle: {
+    video: [
+      {
+        property: "max-width",
+        value: { type: "unit", unit: "%", value: 100 }
+      }
+    ]
+  },
+  initialProps: [
+    "id",
+    "class",
+    "width",
+    "height",
+    "src",
+    "autoPlay",
+    "controls",
+    "loop",
+    "muted",
+    "preload",
+    "playsInline"
+  ],
+  props: {
+    ...o,
+    // Automatically generated props don't have the right control.
+    src: {
+      type: "string",
+      control: "file",
+      label: "Source",
+      required: !1,
+      accept: ".mp4,.webm,.mpg,.mpeg,.mov"
+    }
+  }
+};
+export {
+  i as meta
+};