@webstudio-is/sdk-components-react 0.197.0 → 0.198.0

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

@@ -3,6 +3,7 @@ type Props = ComponentProps<"form"> & {
     encType?: "application/x-www-form-urlencoded" | "multipart/form-data" | "text/plain";
     /** Use this property to reveal the Success and Error states on the canvas so they can be styled. The Initial state is displayed when the page first opens. The Success and Error states are displayed depending on whether the Form submits successfully or unsuccessfully. */
     state?: "initial" | "success" | "error";
+    onStateChange: (state: "initial" | "success" | "error") => void;
 };
 export declare const WebhookForm: import("react").ForwardRefExoticComponent<Omit<Props, "ref"> & import("react").RefAttributes<HTMLFormElement>>;
 export {};

package/lib/vimeo.template.js

@@ -1,5 +1,5 @@
 import { jsxs as i, jsx as t } from "react/jsx-runtime";
-import { SpinnerIcon as r, PlayIcon as a } from "@webstudio-is/icons/svg";
+import { SpinnerIcon as r, PlayIcon as n } from "@webstudio-is/icons/svg";
 import { $ as e, css as o } from "@webstudio-is/template";
 const p = {
   category: "media",
@@ -20,7 +20,7 @@ const p = {
             "ws:style": o`
           position: absolute;
           object-fit: cover;
-          object-position: cover;
+          object-position: center;
           width: 100%;
           height: 100%;
           border-radius: 20px;
@@ -79,7 +79,7 @@ const p = {
             height: 60px;
           `,
                 "aria-hidden": !0,
-                children: /* @__PURE__ */ t(e.HtmlEmbed, { "ws:label": "Play SVG", code: a })
+                children: /* @__PURE__ */ t(e.HtmlEmbed, { "ws:label": "Play SVG", code: n })
               }
             )
           }

package/lib/youtube.template.js

@@ -1,6 +1,6 @@
-import { jsxs as i, jsx as o } from "react/jsx-runtime";
+import { jsxs as i, jsx as t } from "react/jsx-runtime";
 import { SpinnerIcon as r, PlayIcon as l } from "@webstudio-is/icons/svg";
-import { $ as e, css as t } from "@webstudio-is/template";
+import { $ as e, css as o } from "@webstudio-is/template";
 const p = {
   label: "YouTube",
   category: "media",
@@ -10,34 +10,34 @@ const p = {
     e.YouTube,
     {
       "ws:label": "YouTube",
-      "ws:style": t`
+      "ws:style": o`
         position: relative;
         aspect-ratio: 640/360;
         width: 100%;
       `,
       children: [
-        /* @__PURE__ */ o(
+        /* @__PURE__ */ t(
           e.VimeoPreviewImage,
           {
             "ws:label": "Preview Image",
-            "ws:style": t`
+            "ws:style": o`
           position: absolute;
           object-fit: cover;
-          object-position: cover;
+          object-position: center;
           width: 100%;
           height: 100%;
           border-radius: 20px;
         `,
-            alt: "Vimeo video preview image",
+            alt: "YouTube video preview image",
             sizes: "100vw",
             optimize: !0
           }
         ),
-        /* @__PURE__ */ o(
+        /* @__PURE__ */ t(
           e.VimeoSpinner,
           {
             "ws:label": "Spinner",
-            "ws:style": t`
+            "ws:style": o`
           position: absolute;
           top: 50%;
           left: 50%;
@@ -46,14 +46,14 @@ const p = {
           margin-top: -35px;
           margin-left: -35px;
         `,
-            children: /* @__PURE__ */ o(e.HtmlEmbed, { "ws:label": "Spinner SVG", code: r })
+            children: /* @__PURE__ */ t(e.HtmlEmbed, { "ws:label": "Spinner SVG", code: r })
           }
         ),
-        /* @__PURE__ */ o(
+        /* @__PURE__ */ t(
           e.VimeoPlayButton,
           {
             "ws:label": "Play Button",
-            "ws:style": t`
+            "ws:style": o`
           position: absolute;
           width: 140px;
           height: 80px;
@@ -74,16 +74,16 @@ const p = {
           }
         `,
             "aria-label": "Play button",
-            children: /* @__PURE__ */ o(
+            children: /* @__PURE__ */ t(
               e.Box,
               {
                 "ws:label": "Play Icon",
-                "ws:style": t`
+                "ws:style": o`
             width: 60px;
             height: 60px;
           `,
                 "aria-hidden": !0,
-                children: /* @__PURE__ */ o(e.HtmlEmbed, { "ws:label": "Play SVG", code: l })
+                children: /* @__PURE__ */ t(e.HtmlEmbed, { "ws:label": "Play SVG", code: l })
               }
             )
           }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@webstudio-is/sdk-components-react",
-  "version": "0.197.0",
+  "version": "0.198.0",
   "description": "Webstudio default library for react",
   "author": "Webstudio <github@webstudio.is>",
   "homepage": "https://webstudio.is",
@@ -49,10 +49,10 @@
     "colord": "^2.9.3",
     "micromark": "^4.0.1",
     "micromark-extension-gfm-table": "^2.1.0",
-    "@webstudio-is/icons": "0.197.0",
-    "@webstudio-is/react-sdk": "0.197.0",
-    "@webstudio-is/image": "0.197.0",
-    "@webstudio-is/sdk": "0.197.0"
+    "@webstudio-is/icons": "0.198.0",
+    "@webstudio-is/react-sdk": "0.198.0",
+    "@webstudio-is/sdk": "0.198.0",
+    "@webstudio-is/image": "0.198.0"
   },
   "devDependencies": {
     "@testing-library/react": "^14.2.2",
@@ -62,12 +62,14 @@
     "react-dom": "18.3.0-canary-14898b6a9-20240318",
     "vitest": "^2.1.8",
     "@webstudio-is/generate-arg-types": "0.0.0",
-    "@webstudio-is/template": "0.197.0",
+    "@webstudio-is/sdk-cli": "0.94.0",
+    "@webstudio-is/template": "0.198.0",
     "@webstudio-is/tsconfig": "1.0.7"
   },
   "scripts": {
     "build": "vite build --config ../../vite.sdk-components.config.ts",
     "build:args": "NODE_OPTIONS=--conditions=webstudio generate-arg-types './src/*.tsx !./src/*.stories.tsx !./src/*.test.{ts,tsx} !./src/*.ws.ts !./src/*.ws.ts !./src/*.template.tsx' && prettier --write \"**/*.props.ts\"",
+    "build:stories": "webstudio-sdk generate-stories && prettier --write \"src/__generated__/*.stories.tsx\"",
     "dts": "tsc --project tsconfig.dts.json",
     "test": "vitest run",
     "typecheck": "tsc"