@webstudio-is/sdk-components-react 0.219.0 → 0.221.0

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.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.ws.js

@@ -1,5 +1,4 @@
 import { VideoIcon as e } from "@webstudio-is/icons/svg";
-import "@webstudio-is/sdk";
 import { props as o } from "./__generated__/video.props.js";
 const i = {
   icon: e,
@@ -14,22 +13,10 @@ const i = {
         value: { type: "unit", unit: "%", value: 100 }
       }
     ]
-  }
-}, l = {
-  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"
-    }
   },
   initialProps: [
     "id",
-    "className",
+    "class",
     "width",
     "height",
     "src",
@@ -39,9 +26,19 @@ const i = {
     "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,
-  l as propsMeta
+  i as meta
 };

package/lib/vimeo-play-button.ws.js

@@ -1,24 +1,18 @@
-import { defaultStates as t } from "@webstudio-is/sdk";
-import { ButtonElementIcon as o } from "@webstudio-is/icons/svg";
-import { button as e } from "@webstudio-is/sdk/normalize.css";
-import { props as n } from "./__generated__/vimeo-play-button.props.js";
-const m = {
+import { ButtonElementIcon as t } from "@webstudio-is/icons/svg";
+import { button as o } from "@webstudio-is/sdk/normalize.css";
+import { props as e } from "./__generated__/vimeo-play-button.props.js";
+const c = {
   category: "hidden",
   label: "Play Button",
-  icon: o,
-  states: t,
+  icon: t,
   contentModel: {
     category: "none",
     children: ["instance"]
   },
-  presetStyle: {
-    button: e
-  }
-}, p = {
-  props: n,
-  initialProps: ["id", "className"]
+  presetStyle: { button: o },
+  initialProps: ["id", "class"],
+  props: e
 };
 export {
-  m as meta,
-  p as propsMeta
+  c as meta
 };

package/lib/vimeo-preview-image.ws.js

@@ -1,14 +1,14 @@
-import { meta as e, propsMeta as o } from "./image.ws.js";
+import { meta as e } from "./image.ws.js";
 import { props as r } from "./__generated__/vimeo-preview-image.props.js";
-const p = {
+const i = {
   ...e,
   category: "hidden",
   label: "Preview Image",
   contentModel: {
     category: "none",
     children: []
-  }
-}, i = {
+  },
+  initialProps: e.initialProps,
   props: {
     ...r,
     // Automatically generated props don't have the right control.
@@ -18,10 +18,8 @@ const p = {
       label: "Source",
       required: !1
     }
-  },
-  initialProps: o.initialProps
+  }
 };
 export {
-  p as meta,
-  i as propsMeta
+  i as meta
 };

package/lib/vimeo-spinner.ws.js

@@ -1,24 +1,18 @@
-import { defaultStates as o } from "@webstudio-is/sdk";
-import { div as t } from "@webstudio-is/sdk/normalize.css";
+import { div as o } from "@webstudio-is/sdk/normalize.css";
 import { BoxIcon as e } from "@webstudio-is/icons/svg";
-import { props as r } from "./__generated__/vimeo-spinner.props.js";
-const s = {
+import { props as n } from "./__generated__/vimeo-spinner.props.js";
+const c = {
   icon: e,
-  states: o,
   category: "hidden",
   label: "Spinner",
   contentModel: {
     category: "none",
     children: ["instance"]
   },
-  presetStyle: {
-    div: t
-  }
-}, c = {
-  props: r,
-  initialProps: ["id", "className"]
+  presetStyle: { div: o },
+  initialProps: ["id", "class"],
+  props: n
 };
 export {
-  s as meta,
-  c as propsMeta
+  c as meta
 };

package/lib/vimeo.template.js

@@ -1,23 +1,23 @@
-import { jsxs as i, jsx as t } from "react/jsx-runtime";
+import { jsxs as o, jsx as e } from "react/jsx-runtime";
 import { SpinnerIcon as r, PlayIcon as n } from "@webstudio-is/icons/svg";
-import { $ as e, css as o } from "@webstudio-is/template";
-const p = {
+import { $ as t, css as i, ws as a } from "@webstudio-is/template";
+const d = {
   category: "media",
   order: 1,
   description: "Add a video to your page that is hosted on Vimeo. Paste a Vimeo URL and configure the video in the Settings tab.",
-  template: /* @__PURE__ */ i(
-    e.Vimeo,
+  template: /* @__PURE__ */ o(
+    t.Vimeo,
     {
-      "ws:style": o`
+      "ws:style": i`
         position: relative;
         aspect-ratio: 640/360;
         width: 100%;
       `,
       children: [
-        /* @__PURE__ */ t(
-          e.VimeoPreviewImage,
+        /* @__PURE__ */ e(
+          t.VimeoPreviewImage,
           {
-            "ws:style": o`
+            "ws:style": i`
           position: absolute;
           object-fit: cover;
           object-position: center;
@@ -30,11 +30,11 @@ const p = {
             optimize: !0
           }
         ),
-        /* @__PURE__ */ t(
-          e.VimeoSpinner,
+        /* @__PURE__ */ e(
+          t.VimeoSpinner,
           {
             "ws:label": "Spinner",
-            "ws:style": o`
+            "ws:style": i`
           position: absolute;
           top: 50%;
           left: 50%;
@@ -43,13 +43,13 @@ const p = {
           margin-top: -35px;
           margin-left: -35px;
         `,
-            children: /* @__PURE__ */ t(e.HtmlEmbed, { "ws:label": "Spinner SVG", code: r })
+            children: /* @__PURE__ */ e(t.HtmlEmbed, { "ws:label": "Spinner SVG", code: r })
           }
         ),
-        /* @__PURE__ */ t(
-          e.VimeoPlayButton,
+        /* @__PURE__ */ e(
+          t.VimeoPlayButton,
           {
-            "ws:style": o`
+            "ws:style": i`
           position: absolute;
           width: 140px;
           height: 80px;
@@ -70,16 +70,17 @@ const p = {
           }
         `,
             "aria-label": "Play button",
-            children: /* @__PURE__ */ t(
-              e.Box,
+            children: /* @__PURE__ */ e(
+              a.element,
               {
+                "ws:tag": "div",
                 "ws:label": "Play Icon",
-                "ws:style": o`
+                "ws:style": i`
             width: 60px;
             height: 60px;
           `,
                 "aria-hidden": !0,
-                children: /* @__PURE__ */ t(e.HtmlEmbed, { "ws:label": "Play SVG", code: n })
+                children: /* @__PURE__ */ e(t.HtmlEmbed, { "ws:label": "Play SVG", code: n })
               }
             )
           }
@@ -89,5 +90,5 @@ const p = {
   )
 };
 export {
-  p as meta
+  d as meta
 };

package/lib/vimeo.ws.js

@@ -1,19 +1,7 @@
 import { VimeoIcon as o } from "@webstudio-is/icons/svg";
-import { defaultStates as t } from "@webstudio-is/sdk";
 import { div as e } from "@webstudio-is/sdk/normalize.css";
-import { props as i } from "./__generated__/vimeo.props.js";
-const m = {
-  icon: o,
-  states: t,
-  contentModel: {
-    category: "instance",
-    children: ["instance"],
-    descendants: ["VimeoSpinner", "VimeoPlayButton", "VimeoPreviewImage"]
-  },
-  presetStyle: {
-    div: e
-  }
-}, r = [
+import { props as t } from "./__generated__/vimeo.props.js";
+const i = [
   "id",
   "className",
   "url",
@@ -31,11 +19,17 @@ const m = {
   "showControls",
   "controlsColor",
   "playsinline"
-], p = {
-  props: i,
-  initialProps: r
+], s = {
+  icon: o,
+  contentModel: {
+    category: "instance",
+    children: ["instance"],
+    descendants: ["VimeoSpinner", "VimeoPlayButton", "VimeoPreviewImage"]
+  },
+  presetStyle: { div: e },
+  initialProps: i,
+  props: t
 };
 export {
-  m as meta,
-  p as propsMeta
+  s as meta
 };

package/lib/webhook-form.template.js

@@ -1,43 +1,82 @@
-import { jsxs as r, jsx as t } from "react/jsx-runtime";
-import { $ as e, ActionValue as s, PlaceholderValue as o, Variable as i, expression as a } from "@webstudio-is/template";
-const n = new i("formState", "initial"), w = {
+import { jsxs as o, jsx as t } from "react/jsx-runtime";
+import { $ as r, ActionValue as i, ws as e, PlaceholderValue as a, css as n, Variable as w, expression as l } from "@webstudio-is/template";
+const s = new w("formState", "initial"), d = {
   category: "data",
   order: 1,
   description: "Collect user data and send it to any webhook.",
-  template: /* @__PURE__ */ r(
-    e.Form,
+  template: /* @__PURE__ */ o(
+    r.Form,
     {
-      state: a`${n}`,
-      onStateChange: new s(["state"], a`${n} = state`),
+      state: l`${s}`,
+      onStateChange: new i(["state"], l`${s} = state`),
       children: [
-        /* @__PURE__ */ r(
-          e.Box,
+        /* @__PURE__ */ o(
+          e.element,
           {
+            "ws:tag": "div",
             "ws:label": "Form Content",
-            "ws:show": a`${n} === 'initial' || ${n} === 'error'`,
+            "ws:show": l`${s} === 'initial' || ${s} === 'error'`,
             children: [
-              /* @__PURE__ */ t(e.Label, { children: new o("Name") }),
-              /* @__PURE__ */ t(e.Input, { name: "name" }),
-              /* @__PURE__ */ t(e.Label, { children: new o("Email") }),
-              /* @__PURE__ */ t(e.Input, { name: "email" }),
-              /* @__PURE__ */ t(e.Button, { children: new o("Submit") })
+              /* @__PURE__ */ t(
+                e.element,
+                {
+                  "ws:tag": "label",
+                  "ws:style": n`
+            display: block;
+          `,
+                  children: new a("Name")
+                }
+              ),
+              /* @__PURE__ */ t(
+                e.element,
+                {
+                  "ws:tag": "input",
+                  "ws:style": n`
+            display: block;
+          `,
+                  name: "name"
+                }
+              ),
+              /* @__PURE__ */ t(
+                e.element,
+                {
+                  "ws:tag": "label",
+                  "ws:style": n`
+            display: block;
+          `,
+                  children: new a("Email")
+                }
+              ),
+              /* @__PURE__ */ t(
+                e.element,
+                {
+                  "ws:tag": "input",
+                  "ws:style": n`
+            display: block;
+          `,
+                  name: "email"
+                }
+              ),
+              /* @__PURE__ */ t(e.element, { "ws:tag": "button", children: new a("Submit") })
             ]
           }
         ),
         /* @__PURE__ */ t(
-          e.Box,
+          e.element,
           {
+            "ws:tag": "div",
             "ws:label": "Success Message",
-            "ws:show": a`${n} === 'success'`,
-            children: new o("Thank you for getting in touch!")
+            "ws:show": l`${s} === 'success'`,
+            children: new a("Thank you for getting in touch!")
           }
         ),
         /* @__PURE__ */ t(
-          e.Box,
+          e.element,
           {
+            "ws:tag": "div",
             "ws:label": "Error Message",
-            "ws:show": a`${n} === 'error'`,
-            children: new o("Sorry, something went wrong.")
+            "ws:show": l`${s} === 'error'`,
+            children: new a("Sorry, something went wrong.")
           }
         )
       ]
@@ -45,5 +84,5 @@ const n = new i("formState", "initial"), w = {
   )
 };
 export {
-  w as meta
+  d as meta
 };

package/lib/webhook-form.ws.js

@@ -10,8 +10,8 @@ const c = {
   states: [
     { selector: "[data-state=error]", label: "Error" },
     { selector: "[data-state=success]", label: "Success" }
-  ]
-}, i = {
+  ],
+  initialProps: ["id", "class", "state", "action"],
   props: {
     ...r,
     action: {
@@ -20,10 +20,8 @@ const c = {
       description: "The URI of a program that processes the information submitted via the form.",
       required: !1
     }
-  },
-  initialProps: ["id", "className", "state", "action"]
+  }
 };
 export {
-  c as meta,
-  i as propsMeta
+  c as meta
 };

package/lib/xml-node.ws.js

@@ -1,15 +1,13 @@
 import { XmlIcon as o } from "@webstudio-is/icons/svg";
 import { props as r } from "./__generated__/xml-node.props.js";
-const i = {
+const m = {
   category: "xml",
   order: 6,
   icon: o,
-  description: "XML Node"
-}, e = {
-  props: r,
-  initialProps: ["tag"]
+  description: "XML Node",
+  initialProps: ["tag"],
+  props: r
 };
 export {
-  i as meta,
-  e as propsMeta
+  m as meta
 };

package/lib/xml-time.ws.js

@@ -1,15 +1,13 @@
 import { CalendarIcon as t } from "@webstudio-is/icons/svg";
-import { props as o } from "./__generated__/xml-time.props.js";
+import { props as e } from "./__generated__/xml-time.props.js";
 const a = {
   category: "xml",
   description: "Converts machine-readable date and time to ISO format.",
   icon: t,
-  order: 7
-}, i = {
-  props: o,
-  initialProps: ["datetime", "dateStyle"]
+  order: 7,
+  initialProps: ["datetime", "dateStyle"],
+  props: e
 };
 export {
-  a as meta,
-  i as propsMeta
+  a as meta
 };