@webstudio-is/sdk-components-react 0.195.0 → 0.196.0

package/lib/blockquote.ws.js

@@ -49,7 +49,7 @@ const r = {
     }
   ]
 }, i = {
-  category: "text",
+  category: "typography",
   type: "container",
   description: "Use to style a quote from an external source like an article or book.",
   icon: e,
@@ -60,13 +60,7 @@ const r = {
     {
       type: "instance",
       component: "Blockquote",
-      children: [
-        {
-          type: "text",
-          value: "Blockquote text you can edit",
-          placeholder: !0
-        }
-      ]
+      children: []
     }
   ]
 }, n = {

package/lib/button.template.js

@@ -0,0 +1,11 @@
+import { jsx as t } from "react/jsx-runtime";
+import { $ as o, PlaceholderValue as e } from "@webstudio-is/template";
+const n = {
+  category: "forms",
+  order: 2,
+  description: "Use a button to submit forms or trigger actions within a page. Do not use a button to navigate users to another resource or another page - that’s what a link is used for.",
+  template: /* @__PURE__ */ t(o.Button, { children: new e("Button text you can edit") })
+};
+export {
+  n as meta
+};

package/lib/button.ws.js

@@ -5,33 +5,17 @@ import { props as n } from "./__generated__/button.props.js";
 const a = {
   button: o
 }, p = {
-  category: "forms",
+  icon: t,
   type: "container",
   constraints: {
     relation: "ancestor",
     component: { $nin: ["Button", "Link"] }
   },
-  description: "Use a button to submit forms or trigger actions within a page. Do not use a button to navigate users to another resource or another page - that’s what a link is used for.",
-  icon: t,
   presetStyle: a,
   states: [
     ...e,
     { selector: ":disabled", label: "Disabled" },
     { selector: ":enabled", label: "Enabled" }
-  ],
-  order: 2,
-  template: [
-    {
-      type: "instance",
-      component: "Button",
-      children: [
-        {
-          type: "text",
-          value: "Button text you can edit",
-          placeholder: !0
-        }
-      ]
-    }
   ]
 }, c = {
   props: n,

package/lib/code-text.ws.js

@@ -1,4 +1,4 @@
-import { CodeTextIcon as e } from "@webstudio-is/icons/svg";
+import { BracesIcon as e } from "@webstudio-is/icons/svg";
 import { defaultStates as t } from "@webstudio-is/react-sdk";
 import { code as o } from "@webstudio-is/sdk/normalize.css";
 import { props as r } from "./__generated__/code-text.props.js";
@@ -30,7 +30,7 @@ const p = {
       value: { type: "rgb", r: 238, g: 238, b: 238, alpha: 1 }
     }
   ]
-}, d = {
+}, s = {
   category: "general",
   type: "embed",
   description: "Use this component when you want to display code as text on the page.",
@@ -42,7 +42,7 @@ const p = {
   states: t,
   presetStyle: p,
   order: 9
-}, s = {
+}, d = {
   props: {
     ...r,
     code: {
@@ -54,6 +54,6 @@ const p = {
   initialProps: ["id", "className", "lang", "code"]
 };
 export {
-  d as meta,
-  s as propsMeta
+  s as meta,
+  d as propsMeta
 };

package/lib/heading.ws.js

@@ -1,16 +1,16 @@
 import { HeadingIcon as t } from "@webstudio-is/icons/svg";
 import { defaultStates as e } from "@webstudio-is/react-sdk";
-import { h1 as n, h2 as o, h3 as a, h4 as r, h5 as i, h6 as s } from "@webstudio-is/sdk/normalize.css";
+import { h1 as o, h2 as n, h3 as r, h4 as a, h5 as i, h6 as s } from "@webstudio-is/sdk/normalize.css";
 import { props as p } from "./__generated__/heading.props.js";
 const c = {
-  h1: n,
-  h2: o,
-  h3: a,
-  h4: r,
+  h1: o,
+  h2: n,
+  h3: r,
+  h4: a,
   h5: i,
   h6: s
 }, l = {
-  category: "text",
+  category: "typography",
   type: "container",
   description: "Use HTML headings to structure and organize content. Use the Tag property in settings to change the heading level (h1-h6).",
   icon: t,
@@ -25,13 +25,7 @@ const c = {
     {
       type: "instance",
       component: "Heading",
-      children: [
-        {
-          type: "text",
-          value: "Heading text you can edit",
-          placeholder: !0
-        }
-      ]
+      children: []
     }
   ]
 }, y = {

package/lib/link.ws.js

@@ -5,10 +5,6 @@ import { props as o } from "./__generated__/link.props.js";
 const n = {
   a: [
     ...r,
-    {
-      property: "minHeight",
-      value: { type: "unit", unit: "em", value: 1 }
-    },
     {
       property: "display",
       value: { type: "keyword", value: "inline-block" }
@@ -41,13 +37,7 @@ const n = {
     {
       type: "instance",
       component: "Link",
-      children: [
-        {
-          type: "text",
-          value: "Link text you can edit",
-          placeholder: !0
-        }
-      ]
+      children: []
     }
   ]
 }, c = {

package/lib/list-item.ws.js

@@ -4,8 +4,8 @@ import { li as o } from "@webstudio-is/sdk/normalize.css";
 import { props as i } from "./__generated__/list-item.props.js";
 const n = {
   li: o
-}, c = {
-  category: "general",
+}, m = {
+  category: "typography",
   type: "container",
   constraints: {
     // cannot use parent relation here
@@ -18,25 +18,19 @@ const n = {
   icon: t,
   states: e,
   presetStyle: n,
-  order: 4,
+  order: 5,
   template: [
     {
       type: "instance",
       component: "ListItem",
-      children: [
-        {
-          type: "text",
-          value: "List Item text you can edit",
-          placeholder: !0
-        }
-      ]
+      children: []
     }
   ]
-}, m = {
+}, c = {
   props: i,
   initialProps: ["id", "className"]
 };
 export {
-  c as meta,
-  m as propsMeta
+  m as meta,
+  c as propsMeta
 };

package/lib/list.template.js

@@ -0,0 +1,15 @@
+import { jsxs as n, jsx as t } from "react/jsx-runtime";
+import { $ as e, PlaceholderValue as i } from "@webstudio-is/template";
+const s = {
+  category: "typography",
+  description: "Groups content, like links in a menu or steps in a recipe.",
+  order: 4,
+  template: /* @__PURE__ */ n(e.List, { children: [
+    /* @__PURE__ */ t(e.ListItem, { children: new i("List Item text you can edit") }),
+    /* @__PURE__ */ t(e.ListItem, { children: new i("List Item text you can edit") }),
+    /* @__PURE__ */ t(e.ListItem, { children: new i("List Item text you can edit") })
+  ] })
+};
+export {
+  s as meta
+};

package/lib/list.ws.js

@@ -1,10 +1,10 @@
 import { ListIcon as e } from "@webstudio-is/icons/svg";
-import { defaultStates as t } from "@webstudio-is/react-sdk";
-import { ol as o, ul as r } from "@webstudio-is/sdk/normalize.css";
+import { defaultStates as r } from "@webstudio-is/react-sdk";
+import { ol as t, ul as o } from "@webstudio-is/sdk/normalize.css";
 import { props as p } from "./__generated__/list.props.js";
 const a = {
   ol: [
-    ...o,
+    ...t,
     {
       property: "marginTop",
       value: { type: "keyword", value: "0" }
@@ -19,7 +19,7 @@ const a = {
     }
   ],
   ul: [
-    ...r,
+    ...o,
     {
       property: "marginTop",
       value: { type: "keyword", value: "0" }
@@ -33,60 +33,16 @@ const a = {
       value: { type: "keyword", value: "40px" }
     }
   ]
-}, y = {
-  category: "general",
+}, d = {
   type: "container",
-  description: "Groups content, like links in a menu or steps in a recipe.",
   icon: e,
-  states: t,
-  presetStyle: a,
-  order: 3,
-  template: [
-    {
-      type: "instance",
-      component: "List",
-      children: [
-        {
-          type: "instance",
-          component: "ListItem",
-          children: [
-            {
-              type: "text",
-              value: "List Item text you can edit",
-              placeholder: !0
-            }
-          ]
-        },
-        {
-          type: "instance",
-          component: "ListItem",
-          children: [
-            {
-              type: "text",
-              value: "List Item text you can edit",
-              placeholder: !0
-            }
-          ]
-        },
-        {
-          type: "instance",
-          component: "ListItem",
-          children: [
-            {
-              type: "text",
-              value: "List Item text you can edit",
-              placeholder: !0
-            }
-          ]
-        }
-      ]
-    }
-  ]
-}, c = {
+  states: r,
+  presetStyle: a
+}, s = {
   props: p,
   initialProps: ["id", "className", "ordered", "start", "reversed"]
 };
 export {
-  y as meta,
-  c as propsMeta
+  d as meta,
+  s as propsMeta
 };

package/lib/paragraph.ws.js

@@ -1,11 +1,11 @@
 import { TextAlignLeftIcon as t } from "@webstudio-is/icons/svg";
-import { defaultStates as e } from "@webstudio-is/react-sdk";
-import { p as o } from "@webstudio-is/sdk/normalize.css";
+import { defaultStates as o } from "@webstudio-is/react-sdk";
+import { p as e } from "@webstudio-is/sdk/normalize.css";
 import { props as r } from "./__generated__/paragraph.props.js";
-const a = {
-  p: o
-}, s = {
-  category: "text",
+const n = {
+  p: e
+}, c = {
+  category: "typography",
   type: "container",
   description: "A container for multi-line text.",
   icon: t,
@@ -13,20 +13,14 @@ const a = {
     relation: "ancestor",
     component: { $neq: "Paragraph" }
   },
-  states: e,
-  presetStyle: a,
+  states: o,
+  presetStyle: n,
   order: 2,
   template: [
     {
       type: "instance",
       component: "Paragraph",
-      children: [
-        {
-          type: "text",
-          value: "Paragraph text you can edit",
-          placeholder: !0
-        }
-      ]
+      children: []
     }
   ]
 }, m = {
@@ -34,6 +28,6 @@ const a = {
   initialProps: ["id", "className"]
 };
 export {
-  s as meta,
+  c as meta,
   m as propsMeta
 };

package/lib/separator.ws.js

@@ -1,4 +1,4 @@
-import { DashIcon as e } from "@webstudio-is/icons/svg";
+import { MinusIcon as e } from "@webstudio-is/icons/svg";
 import { defaultStates as o } from "@webstudio-is/react-sdk";
 import { hr as r } from "@webstudio-is/sdk/normalize.css";
 import { props as t } from "./__generated__/separator.props.js";

package/lib/templates.js

@@ -0,0 +1,8 @@
+import { meta as e } from "./button.template.js";
+import { meta as a } from "./list.template.js";
+import { meta as s } from "./vimeo.template.js";
+export {
+  e as Button,
+  a as List,
+  s as Vimeo
+};

package/lib/text.ws.js

@@ -1,8 +1,8 @@
 import { TextIcon as t } from "@webstudio-is/icons/svg";
 import { defaultStates as e } from "@webstudio-is/react-sdk";
 import { div as o } from "@webstudio-is/sdk/normalize.css";
-import { props as n } from "./__generated__/text.props.js";
-const r = {
+import { props as r } from "./__generated__/text.props.js";
+const n = {
   div: [
     ...o,
     {
@@ -11,12 +11,12 @@ const r = {
     }
   ]
 }, s = {
-  category: "text",
+  category: "typography",
   type: "container",
   description: "A generic container for any text content that is not a heading or a link.",
   icon: t,
   states: e,
-  presetStyle: r,
+  presetStyle: n,
   order: 0,
   template: [
     {
@@ -32,7 +32,7 @@ const r = {
     }
   ]
 }, m = {
-  props: n,
+  props: r,
   initialProps: ["id", "className", "tag"]
 };
 export {

package/lib/time.ws.js

@@ -5,18 +5,17 @@ import { props as o } from "./__generated__/time.props.js";
 const r = {
   time: a
 }, s = {
-  category: "data",
+  category: "localization",
   type: "container",
   description: "Converts machine-readable date and time to a human-readable format.",
   icon: t,
   states: e,
-  presetStyle: r,
-  order: 5
-}, d = {
+  presetStyle: r
+}, c = {
   props: o,
   initialProps: ["datetime", "language", "country", "dateStyle", "timeStyle"]
 };
 export {
   s as meta,
-  d as propsMeta
+  c as propsMeta
 };

package/lib/types/button.template.d.ts

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

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

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

package/lib/types/templates.d.ts

@@ -0,0 +1,3 @@
+export { meta as Button } from "./button.template";
+export { meta as List } from "./list.template";
+export { meta as Vimeo } from "./vimeo.template";

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

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

package/lib/vimeo.template.js

@@ -0,0 +1,92 @@
+import { jsxs as i, jsx as o } from "react/jsx-runtime";
+import { SpinnerIcon as r, PlayIcon as a } from "@webstudio-is/icons/svg";
+import { $ as e, css as t } from "@webstudio-is/template";
+const p = {
+  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,
+    {
+      "ws:style": t`
+        position: relative;
+        aspect-ratio: 640/360;
+        width: 100%;
+      `,
+      children: [
+        /* @__PURE__ */ o(
+          e.VimeoPreviewImage,
+          {
+            "ws:style": t`
+          position: absolute;
+          object-fit: cover;
+          object-position: cover;
+          width: 100%;
+          height: 100%;
+          border-radius: 20px;
+        `,
+            alt: "Vimeo video preview image",
+            sizes: "100vw"
+          }
+        ),
+        /* @__PURE__ */ o(
+          e.VimeoSpinner,
+          {
+            "ws:label": "Spinner",
+            "ws:style": t`
+          position: absolute;
+          top: 50%;
+          left: 50%;
+          width: 70px;
+          height: 70px;
+          margin-top: -35px;
+          margin-left: -35px;
+        `,
+            children: /* @__PURE__ */ o(e.HtmlEmbed, { "ws:label": "Spinner SVG", code: r })
+          }
+        ),
+        /* @__PURE__ */ o(
+          e.VimeoPlayButton,
+          {
+            "ws:style": t`
+          position: absolute;
+          width: 140px;
+          height: 80px;
+          top: 50%;
+          left: 50%;
+          margin-top: -40px;
+          margin-left: -70px;
+          display: flex;
+          align-items: center;
+          justify-content: center;
+          border-style: none;
+          border-radius: 5px;
+          cursor: pointer;
+          background-color: rgb(18, 18, 18);
+          color: rgb(255, 255, 255);
+          &:hover {
+            background-color: rgb(0, 173, 239);
+          }
+        `,
+            "aria-label": "Play button",
+            children: /* @__PURE__ */ o(
+              e.Box,
+              {
+                "ws:label": "Play Icon",
+                "ws:style": t`
+            width: 60px;
+            height: 60px;
+          `,
+                "aria-hidden": !0,
+                children: /* @__PURE__ */ o(e.HtmlEmbed, { "ws:label": "Play SVG", code: a })
+              }
+            )
+          }
+        )
+      ]
+    }
+  )
+};
+export {
+  p as meta
+};

package/lib/vimeo.ws.js

@@ -1,308 +1,19 @@
-import { VimeoIcon as e, SpinnerIcon as t, PlayIcon as p } from "@webstudio-is/icons/svg";
-import { defaultStates as o } from "@webstudio-is/react-sdk";
+import { VimeoIcon as o } from "@webstudio-is/icons/svg";
+import { defaultStates as t } from "@webstudio-is/react-sdk";
 import { div as r } from "@webstudio-is/sdk/normalize.css";
-import { props as a } from "./__generated__/vimeo.props.js";
-const n = {
+import { props as n } from "./__generated__/vimeo.props.js";
+const i = {
   div: r
-}, s = {
-  category: "media",
+}, c = {
   type: "container",
-  description: "Add a video to your page that is hosted on Vimeo. Paste a Vimeo URL and configure the video in the Settings tab.",
-  order: 1,
-  icon: e,
-  states: o,
-  presetStyle: n,
+  icon: o,
+  states: t,
+  presetStyle: i,
   constraints: {
     relation: "ancestor",
     component: { $nin: ["Button", "Link", "Heading"] }
-  },
-  template: [
-    {
-      type: "instance",
-      component: "Vimeo",
-      styles: [
-        {
-          property: "position",
-          value: { type: "keyword", value: "relative" }
-        },
-        {
-          property: "aspectRatio",
-          value: { type: "keyword", value: "640/360" }
-        },
-        {
-          property: "width",
-          value: { type: "unit", value: 100, unit: "%" }
-        }
-      ],
-      children: [
-        {
-          type: "instance",
-          component: "VimeoPreviewImage",
-          styles: [
-            {
-              property: "position",
-              value: { type: "keyword", value: "absolute" }
-            },
-            {
-              property: "objectFit",
-              value: { type: "keyword", value: "cover" }
-            },
-            {
-              property: "width",
-              value: { type: "unit", value: 100, unit: "%" }
-            },
-            {
-              property: "height",
-              value: { type: "unit", value: 100, unit: "%" }
-            },
-            {
-              property: "borderTopLeftRadius",
-              value: { type: "unit", value: 20, unit: "px" }
-            },
-            {
-              property: "borderTopRightRadius",
-              value: { type: "unit", value: 20, unit: "px" }
-            },
-            {
-              property: "borderBottomLeftRadius",
-              value: { type: "unit", value: 20, unit: "px" }
-            },
-            {
-              property: "borderBottomRightRadius",
-              value: { type: "unit", value: 20, unit: "px" }
-            },
-            {
-              property: "objectPosition",
-              value: { type: "keyword", value: "cover" }
-            }
-          ],
-          children: [],
-          props: [
-            {
-              type: "string",
-              name: "alt",
-              value: "Vimeo video preview image"
-            },
-            {
-              type: "string",
-              name: "sizes",
-              value: "100vw"
-            }
-          ]
-        },
-        {
-          type: "instance",
-          component: "VimeoSpinner",
-          label: "Spinner",
-          styles: [
-            {
-              property: "position",
-              value: { type: "keyword", value: "absolute" }
-            },
-            {
-              property: "top",
-              value: { type: "unit", value: 50, unit: "%" }
-            },
-            {
-              property: "left",
-              value: { type: "unit", value: 50, unit: "%" }
-            },
-            {
-              property: "width",
-              value: { type: "unit", value: 70, unit: "px" }
-            },
-            {
-              property: "height",
-              value: { type: "unit", value: 70, unit: "px" }
-            },
-            {
-              property: "marginTop",
-              value: { type: "unit", value: -35, unit: "px" }
-            },
-            {
-              property: "marginLeft",
-              value: { type: "unit", value: -35, unit: "px" }
-            }
-          ],
-          children: [
-            {
-              type: "instance",
-              component: "HtmlEmbed",
-              label: "Spinner SVG",
-              props: [
-                {
-                  type: "string",
-                  name: "code",
-                  value: t
-                }
-              ],
-              children: []
-            }
-          ]
-        },
-        {
-          type: "instance",
-          component: "VimeoPlayButton",
-          props: [
-            {
-              type: "string",
-              name: "aria-label",
-              value: "Play button"
-            }
-          ],
-          styles: [
-            {
-              property: "position",
-              value: { type: "keyword", value: "absolute" }
-            },
-            {
-              property: "width",
-              value: { type: "unit", value: 140, unit: "px" }
-            },
-            {
-              property: "height",
-              value: { type: "unit", value: 80, unit: "px" }
-            },
-            {
-              property: "top",
-              value: { type: "unit", value: 50, unit: "%" }
-            },
-            {
-              property: "left",
-              value: { type: "unit", value: 50, unit: "%" }
-            },
-            {
-              property: "marginTop",
-              value: { type: "unit", value: -40, unit: "px" }
-            },
-            {
-              property: "marginLeft",
-              value: { type: "unit", value: -70, unit: "px" }
-            },
-            {
-              property: "display",
-              value: { type: "keyword", value: "flex" }
-            },
-            {
-              property: "alignItems",
-              value: { type: "keyword", value: "center" }
-            },
-            {
-              property: "justifyContent",
-              value: { type: "keyword", value: "center" }
-            },
-            {
-              property: "borderTopStyle",
-              value: { type: "keyword", value: "none" }
-            },
-            {
-              property: "borderRightStyle",
-              value: { type: "keyword", value: "none" }
-            },
-            {
-              property: "borderBottomStyle",
-              value: { type: "keyword", value: "none" }
-            },
-            {
-              property: "borderLeftStyle",
-              value: { type: "keyword", value: "none" }
-            },
-            {
-              property: "borderTopLeftRadius",
-              value: { type: "unit", value: 5, unit: "px" }
-            },
-            {
-              property: "borderTopRightRadius",
-              value: { type: "unit", value: 5, unit: "px" }
-            },
-            {
-              property: "borderBottomLeftRadius",
-              value: { type: "unit", value: 5, unit: "px" }
-            },
-            {
-              property: "borderBottomRightRadius",
-              value: { type: "unit", value: 5, unit: "px" }
-            },
-            {
-              property: "cursor",
-              value: { type: "keyword", value: "pointer" }
-            },
-            {
-              property: "backgroundColor",
-              value: {
-                type: "rgb",
-                r: 18,
-                g: 18,
-                b: 18,
-                alpha: 1
-              }
-            },
-            {
-              property: "color",
-              value: {
-                type: "rgb",
-                r: 255,
-                g: 255,
-                b: 255,
-                alpha: 1
-              }
-            },
-            {
-              state: ":hover",
-              property: "backgroundColor",
-              value: {
-                type: "rgb",
-                r: 0,
-                g: 173,
-                b: 239,
-                alpha: 1
-              }
-            }
-          ],
-          children: [
-            {
-              type: "instance",
-              component: "Box",
-              label: "Play Icon",
-              styles: [
-                {
-                  property: "width",
-                  value: { type: "unit", value: 60, unit: "px" }
-                },
-                {
-                  property: "height",
-                  value: { type: "unit", value: 60, unit: "px" }
-                }
-              ],
-              props: [
-                {
-                  type: "string",
-                  name: "aria-hidden",
-                  value: "true"
-                }
-              ],
-              children: [
-                {
-                  type: "instance",
-                  component: "HtmlEmbed",
-                  label: "Play SVG",
-                  props: [
-                    {
-                      type: "string",
-                      name: "code",
-                      value: p
-                    }
-                  ],
-                  children: []
-                }
-              ]
-            }
-          ]
-        }
-      ]
-    }
-  ]
-}, u = [
+  }
+}, s = [
   "id",
   "className",
   "url",
@@ -318,11 +29,11 @@ const n = {
   "showTitle",
   "showControls",
   "controlsColor"
-], d = {
-  props: a,
-  initialProps: u
+], m = {
+  props: n,
+  initialProps: s
 };
 export {
-  s as meta,
-  d as propsMeta
+  c as meta,
+  m as propsMeta
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@webstudio-is/sdk-components-react",
-  "version": "0.195.0",
+  "version": "0.196.0",
   "description": "Webstudio default library for react",
   "author": "Webstudio <github@webstudio.is>",
   "homepage": "https://webstudio.is",
@@ -32,6 +32,11 @@
       "webstudio": "./src/hooks.ts",
       "types": "./lib/types/hooks.d.ts",
       "import": "./lib/hooks.js"
+    },
+    "./templates": {
+      "webstudio": "./src/templates.ts",
+      "types": "./lib/types/templates.d.ts",
+      "import": "./lib/templates.js"
     }
   },
   "peerDependencies": {
@@ -43,10 +48,10 @@
     "colord": "^2.9.3",
     "micromark": "^4.0.0",
     "await-interaction-response": "^0.0.2",
-    "@webstudio-is/image": "0.195.0",
-    "@webstudio-is/icons": "0.195.0",
-    "@webstudio-is/sdk": "0.195.0",
-    "@webstudio-is/react-sdk": "0.195.0"
+    "@webstudio-is/icons": "0.196.0",
+    "@webstudio-is/image": "0.196.0",
+    "@webstudio-is/react-sdk": "0.196.0",
+    "@webstudio-is/sdk": "0.196.0"
   },
   "devDependencies": {
     "@testing-library/react": "^14.2.2",
@@ -55,8 +60,9 @@
     "react": "18.3.0-canary-14898b6a9-20240318",
     "react-dom": "18.3.0-canary-14898b6a9-20240318",
     "vitest": "^2.1.8",
+    "@webstudio-is/tsconfig": "1.0.7",
     "@webstudio-is/generate-arg-types": "0.0.0",
-    "@webstudio-is/tsconfig": "1.0.7"
+    "@webstudio-is/template": "0.196.0"
   },
   "scripts": {
     "build": "vite build --config ../../vite.sdk-components.config.ts",