@webstudio-is/sdk-components-react 0.102.0 → 0.103.0

package/lib/components.js

@@ -105,99 +105,97 @@ var Box = forwardRef5(
 Box.displayName = "Box";
 
 // src/text.tsx
-import {
-  createElement as createElement2,
-  forwardRef as forwardRef6
-} from "react";
+import { forwardRef as forwardRef6 } from "react";
+import { jsx as jsx5 } from "react/jsx-runtime";
 var defaultTag2 = "div";
 var Text = forwardRef6(
-  ({ tag = defaultTag2, ...props }, ref) => {
-    return createElement2(tag, { ...props, ref });
+  ({ tag: Tag = defaultTag2, children, ...props }, ref) => {
+    return /* @__PURE__ */ jsx5(Tag, { ...props, ref, children });
   }
 );
 Text.displayName = "Text";
 
 // src/heading.tsx
-import {
-  forwardRef as forwardRef7,
-  createElement as createElement3
-} from "react";
+import { forwardRef as forwardRef7 } from "react";
+import { jsx as jsx6 } from "react/jsx-runtime";
 var defaultTag3 = "h1";
 var Heading = forwardRef7(
-  ({ tag = defaultTag3, ...props }, ref) => {
-    return createElement3(tag, { ...props, ref });
+  ({ tag: Tag = defaultTag3, children, ...props }, ref) => {
+    return /* @__PURE__ */ jsx6(Tag, { ...props, ref, children: children ?? "Heading you can edit" });
   }
 );
 Heading.displayName = "Heading";
 
 // src/paragraph.tsx
 import { forwardRef as forwardRef8 } from "react";
-import { jsx as jsx5 } from "react/jsx-runtime";
-var Paragraph = forwardRef8((props, ref) => /* @__PURE__ */ jsx5("p", { ...props, ref }));
+import { jsx as jsx7 } from "react/jsx-runtime";
+var Paragraph = forwardRef8(({ children, ...props }, ref) => /* @__PURE__ */ jsx7("p", { ...props, ref, children: children ?? "Paragraph you can edit" }));
 Paragraph.displayName = "Paragraph";
 
 // src/link.tsx
 import { forwardRef as forwardRef9 } from "react";
-import { jsx as jsx6 } from "react/jsx-runtime";
-var Link = forwardRef9((props, ref) => {
-  return /* @__PURE__ */ jsx6("a", { ...props, href: props.href ?? "#", ref });
-});
+import { jsx as jsx8 } from "react/jsx-runtime";
+var Link = forwardRef9(
+  ({ children, ...props }, ref) => {
+    return /* @__PURE__ */ jsx8("a", { ...props, href: props.href ?? "#", ref, children: children ?? "Link text you can edit" });
+  }
+);
 Link.displayName = "Link";
 
 // src/rich-text-link.tsx
 import { forwardRef as forwardRef10 } from "react";
-import { jsx as jsx7 } from "react/jsx-runtime";
-var RichTextLink = forwardRef10((props, ref) => /* @__PURE__ */ jsx7(Link, { ...props, ref }));
+import { jsx as jsx9 } from "react/jsx-runtime";
+var RichTextLink = forwardRef10((props, ref) => /* @__PURE__ */ jsx9(Link, { ...props, ref }));
 RichTextLink.displayName = "RichTextLink";
 
 // src/span.tsx
 import { forwardRef as forwardRef11 } from "react";
-import { jsx as jsx8 } from "react/jsx-runtime";
-var Span = forwardRef11((props, ref) => /* @__PURE__ */ jsx8("span", { ...props, ref }));
+import { jsx as jsx10 } from "react/jsx-runtime";
+var Span = forwardRef11((props, ref) => /* @__PURE__ */ jsx10("span", { ...props, ref }));
 Span.displayName = "Span";
 
 // src/bold.tsx
 import { forwardRef as forwardRef12 } from "react";
-import { jsx as jsx9 } from "react/jsx-runtime";
-var Bold = forwardRef12((props, ref) => /* @__PURE__ */ jsx9("b", { ...props, ref }));
+import { jsx as jsx11 } from "react/jsx-runtime";
+var Bold = forwardRef12((props, ref) => /* @__PURE__ */ jsx11("b", { ...props, ref }));
 Bold.displayName = "Bold";
 
 // src/italic.tsx
 import { forwardRef as forwardRef13 } from "react";
-import { jsx as jsx10 } from "react/jsx-runtime";
-var Italic = forwardRef13((props, ref) => /* @__PURE__ */ jsx10("i", { ...props, ref }));
+import { jsx as jsx12 } from "react/jsx-runtime";
+var Italic = forwardRef13((props, ref) => /* @__PURE__ */ jsx12("i", { ...props, ref }));
 Italic.displayName = "Italic";
 
 // src/superscript.tsx
 import { forwardRef as forwardRef14 } from "react";
-import { jsx as jsx11 } from "react/jsx-runtime";
-var Superscript = forwardRef14((props, ref) => /* @__PURE__ */ jsx11("sup", { ...props, ref }));
+import { jsx as jsx13 } from "react/jsx-runtime";
+var Superscript = forwardRef14((props, ref) => /* @__PURE__ */ jsx13("sup", { ...props, ref }));
 Superscript.displayName = "Bold";
 
 // src/subscript.tsx
 import { forwardRef as forwardRef15 } from "react";
-import { jsx as jsx12 } from "react/jsx-runtime";
-var Subscript = forwardRef15((props, ref) => /* @__PURE__ */ jsx12("sub", { ...props, ref }));
+import { jsx as jsx14 } from "react/jsx-runtime";
+var Subscript = forwardRef15((props, ref) => /* @__PURE__ */ jsx14("sub", { ...props, ref }));
 Subscript.displayName = "Subscript";
 
 // src/button.tsx
 import { forwardRef as forwardRef16 } from "react";
-import { jsx as jsx13 } from "react/jsx-runtime";
+import { jsx as jsx15 } from "react/jsx-runtime";
 var Button = forwardRef16(
-  ({ type = "submit", children, ...props }, ref) => /* @__PURE__ */ jsx13("button", { type, ...props, ref, children })
+  ({ type = "submit", children, ...props }, ref) => /* @__PURE__ */ jsx15("button", { type, ...props, ref, children: children ?? "Button you can edit" })
 );
 Button.displayName = "Button";
 
 // src/input.tsx
 import { forwardRef as forwardRef17 } from "react";
-import { jsx as jsx14 } from "react/jsx-runtime";
-var Input = forwardRef17(({ children: _children, ...props }, ref) => /* @__PURE__ */ jsx14("input", { ...props, ref }));
+import { jsx as jsx16 } from "react/jsx-runtime";
+var Input = forwardRef17(({ children: _children, ...props }, ref) => /* @__PURE__ */ jsx16("input", { ...props, ref }));
 Input.displayName = "Input";
 
 // src/form.tsx
 import { forwardRef as forwardRef18 } from "react";
-import { jsx as jsx15 } from "react/jsx-runtime";
-var Form = forwardRef18(({ children, ...props }, ref) => /* @__PURE__ */ jsx15("form", { ...props, ref, children }));
+import { jsx as jsx17 } from "react/jsx-runtime";
+var Form = forwardRef18(({ children, ...props }, ref) => /* @__PURE__ */ jsx17("form", { ...props, ref, children }));
 Form.displayName = "Form";
 
 // src/image.tsx
@@ -207,7 +205,7 @@ import {
 } from "react";
 import { Image as WebstudioImage } from "@webstudio-is/image";
 import { ReactSdkContext as ReactSdkContext2 } from "@webstudio-is/react-sdk";
-import { jsx as jsx16 } from "react/jsx-runtime";
+import { jsx as jsx18 } from "react/jsx-runtime";
 var imagePlaceholderSvg = `data:image/svg+xml;base64,${btoa(`<svg
   width="140"
   height="140"
@@ -235,7 +233,7 @@ var Image = forwardRef19(
   ({ loading = "lazy", ...props }, ref) => {
     const { imageLoader, assetBaseUrl } = useContext2(ReactSdkContext2);
     if (props.src === void 0 || props.src.startsWith(assetBaseUrl) === false) {
-      return /* @__PURE__ */ jsx16(
+      return /* @__PURE__ */ jsx18(
         "img",
         {
           loading,
@@ -247,7 +245,7 @@ var Image = forwardRef19(
       );
     }
     const src = props.src.slice(assetBaseUrl.length);
-    return /* @__PURE__ */ jsx16(
+    return /* @__PURE__ */ jsx18(
       WebstudioImage,
       {
         loading,
@@ -263,14 +261,11 @@ var Image = forwardRef19(
 Image.displayName = "Image";
 
 // src/blockquote.tsx
-import {
-  forwardRef as forwardRef20,
-  createElement as createElement4
-} from "react";
-var defaultTag4 = "blockquote";
+import { forwardRef as forwardRef20 } from "react";
+import { jsx as jsx19 } from "react/jsx-runtime";
 var Blockquote = forwardRef20(
-  (props, ref) => {
-    return createElement4(defaultTag4, { ...props, ref });
+  ({ children, ...props }, ref) => {
+    return /* @__PURE__ */ jsx19("blockquote", { ...props, ref, children: children ?? "Blockquote you can edit" });
   }
 );
 Blockquote.displayName = "Blockquote";
@@ -278,25 +273,22 @@ Blockquote.displayName = "Blockquote";
 // src/list.tsx
 import {
   forwardRef as forwardRef21,
-  createElement as createElement5
+  createElement as createElement2
 } from "react";
 var unorderedTag = "ul";
 var orderedTag = "ol";
 var List = forwardRef21(({ ordered = false, ...props }, ref) => {
   const tag = ordered ? orderedTag : unorderedTag;
-  return createElement5(tag, { ...props, ref });
+  return createElement2(tag, { ...props, ref });
 });
 List.displayName = "List";
 
 // src/list-item.tsx
-import {
-  forwardRef as forwardRef22,
-  createElement as createElement6
-} from "react";
-var defaultTag5 = "li";
+import { forwardRef as forwardRef22 } from "react";
+import { jsx as jsx20 } from "react/jsx-runtime";
 var ListItem = forwardRef22(
-  (props, ref) => {
-    return createElement6(defaultTag5, { ...props, ref });
+  ({ children, ...props }, ref) => {
+    return /* @__PURE__ */ jsx20("li", { ...props, ref, children: children ?? "List Item you can edit" });
   }
 );
 ListItem.displayName = "ListItem";
@@ -304,49 +296,46 @@ ListItem.displayName = "ListItem";
 // src/separator.tsx
 import {
   forwardRef as forwardRef23,
-  createElement as createElement7
+  createElement as createElement3
 } from "react";
-var defaultTag6 = "hr";
+var defaultTag4 = "hr";
 var Separator = forwardRef23(
   (props, ref) => {
-    return createElement7(defaultTag6, { ...props, ref });
+    return createElement3(defaultTag4, { ...props, ref });
   }
 );
 Separator.displayName = "Separator";
 
 // src/code-text.tsx
-import {
-  forwardRef as forwardRef24,
-  createElement as createElement8
-} from "react";
-var defaultTag7 = "code";
-var CodeText = forwardRef24((props, ref) => {
-  return createElement8(defaultTag7, { ...props, ref });
+import { forwardRef as forwardRef24 } from "react";
+import { jsx as jsx21 } from "react/jsx-runtime";
+var CodeText = forwardRef24(({ children, ...props }, ref) => {
+  return /* @__PURE__ */ jsx21("code", { ...props, ref, children: children ?? "Code you can edit" });
 });
 CodeText.displayName = "CodeText";
 
 // src/label.tsx
 import { forwardRef as forwardRef25 } from "react";
-import { jsx as jsx17 } from "react/jsx-runtime";
-var Label = forwardRef25((props, ref) => /* @__PURE__ */ jsx17("label", { ...props, ref }));
+import { jsx as jsx22 } from "react/jsx-runtime";
+var Label = forwardRef25((props, ref) => /* @__PURE__ */ jsx22("label", { ...props, ref }));
 Label.displayName = "Label";
 
 // src/textarea.tsx
 import { forwardRef as forwardRef26 } from "react";
-import { jsx as jsx18 } from "react/jsx-runtime";
-var Textarea = forwardRef26(({ children: _children, ...props }, ref) => /* @__PURE__ */ jsx18("textarea", { ...props, ref }));
+import { jsx as jsx23 } from "react/jsx-runtime";
+var Textarea = forwardRef26(({ children: _children, ...props }, ref) => /* @__PURE__ */ jsx23("textarea", { ...props, ref }));
 Textarea.displayName = "Textarea";
 
 // src/radio-button.tsx
 import { forwardRef as forwardRef27 } from "react";
-import { jsx as jsx19 } from "react/jsx-runtime";
-var RadioButton = forwardRef27(({ children: _children, ...props }, ref) => /* @__PURE__ */ jsx19("input", { ...props, type: "radio", ref }));
+import { jsx as jsx24 } from "react/jsx-runtime";
+var RadioButton = forwardRef27(({ children: _children, ...props }, ref) => /* @__PURE__ */ jsx24("input", { ...props, type: "radio", ref }));
 RadioButton.displayName = "RadioButton";
 
 // src/checkbox.tsx
 import { forwardRef as forwardRef28 } from "react";
-import { jsx as jsx20 } from "react/jsx-runtime";
-var Checkbox = forwardRef28(({ children: _children, ...props }, ref) => /* @__PURE__ */ jsx20("input", { ...props, type: "checkbox", ref }));
+import { jsx as jsx25 } from "react/jsx-runtime";
+var Checkbox = forwardRef28(({ children: _children, ...props }, ref) => /* @__PURE__ */ jsx25("input", { ...props, type: "checkbox", ref }));
 Checkbox.displayName = "Checkbox";
 
 // src/vimeo.tsx
@@ -362,7 +351,7 @@ import {
 } from "react";
 import { ReactSdkContext as ReactSdkContext3 } from "@webstudio-is/react-sdk";
 import { shallowEqual } from "shallow-equal";
-import { jsx as jsx21 } from "react/jsx-runtime";
+import { jsx as jsx26 } from "react/jsx-runtime";
 var getUrl = (options) => {
   if (options.url === void 0) {
     return;
@@ -570,7 +559,7 @@ var Vimeo = forwardRef29(
         dnt: doNotTrack
       }
     });
-    return /* @__PURE__ */ jsx21(
+    return /* @__PURE__ */ jsx26(
       VimeoContext.Provider,
       {
         value: {
@@ -582,7 +571,7 @@ var Vimeo = forwardRef29(
             }
           }
         },
-        children: /* @__PURE__ */ jsx21(
+        children: /* @__PURE__ */ jsx26(
           "div",
           {
             ...rest,
@@ -597,7 +586,7 @@ var Vimeo = forwardRef29(
                 warmConnections();
               }
             },
-            children: url === void 0 ? /* @__PURE__ */ jsx21(EmptyState, {}) : children
+            children: url === void 0 ? /* @__PURE__ */ jsx26(EmptyState, {}) : children
           }
         )
       }
@@ -606,7 +595,7 @@ var Vimeo = forwardRef29(
 );
 Vimeo.displayName = "Vimeo";
 var EmptyState = () => {
-  return /* @__PURE__ */ jsx21(
+  return /* @__PURE__ */ jsx26(
     "div",
     {
       style: {
@@ -633,11 +622,11 @@ import {
   forwardRef as forwardRef30,
   useContext as useContext4
 } from "react";
-import { jsx as jsx22 } from "react/jsx-runtime";
+import { jsx as jsx27 } from "react/jsx-runtime";
 var base64Preview = `data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAQAAAC1HAwCAAAAC0lEQVR42mNkOAMAANIAzr59FiYAAAAASUVORK5CYII=`;
 var VimeoPreviewImage = forwardRef30(({ src, ...rest }, ref) => {
   const vimeoContext = useContext4(VimeoContext);
-  return /* @__PURE__ */ jsx22(
+  return /* @__PURE__ */ jsx27(
     Image,
     {
       ...rest,
@@ -653,14 +642,14 @@ import {
   forwardRef as forwardRef31,
   useContext as useContext5
 } from "react";
-import { jsx as jsx23 } from "react/jsx-runtime";
+import { jsx as jsx28 } from "react/jsx-runtime";
 var VimeoPlayButton = forwardRef31(
   (props, ref) => {
     const vimeoContext = useContext5(VimeoContext);
     if (vimeoContext.status !== "initial") {
       return null;
     }
-    return /* @__PURE__ */ jsx23(Button, { ...props, onClick: vimeoContext.onInitPlayer, ref });
+    return /* @__PURE__ */ jsx28(Button, { ...props, onClick: vimeoContext.onInitPlayer, ref });
   }
 );
 VimeoPlayButton.displayName = "VimeoPlayButton";
@@ -670,14 +659,14 @@ import {
   forwardRef as forwardRef32,
   useContext as useContext6
 } from "react";
-import { jsx as jsx24 } from "react/jsx-runtime";
+import { jsx as jsx29 } from "react/jsx-runtime";
 var VimeoSpinner = forwardRef32(
   (props, ref) => {
     const vimeoContext = useContext6(VimeoContext);
     if (vimeoContext.status !== "initialized") {
       return null;
     }
-    return /* @__PURE__ */ jsx24("div", { ...props, ref });
+    return /* @__PURE__ */ jsx29("div", { ...props, ref });
   }
 );
 VimeoSpinner.displayName = "VimeoSpinner";

package/lib/metas.js

@@ -149,13 +149,6 @@ var meta6 = {
   icon: TextIcon,
   states: defaultStates3,
   presetStyle: presetStyle3,
-  template: [
-    {
-      type: "instance",
-      component: "Text",
-      children: [{ type: "text", value: "The text you can edit" }]
-    }
-  ],
   order: 0
 };
 
@@ -182,13 +175,6 @@ var meta7 = {
   invalidAncestors: ["Heading"],
   states: defaultStates4,
   presetStyle: presetStyle4,
-  template: [
-    {
-      type: "instance",
-      component: "Heading",
-      children: [{ type: "text", value: "Heading you can edit" }]
-    }
-  ],
   order: 1
 };
 
@@ -210,13 +196,6 @@ var meta8 = {
   invalidAncestors: ["Paragraph"],
   states: defaultStates5,
   presetStyle: presetStyle5,
-  template: [
-    {
-      type: "instance",
-      component: "Paragraph",
-      children: [{ type: "text", value: "Paragraph you can edit" }]
-    }
-  ],
   order: 2
 };
 
@@ -824,13 +803,6 @@ var meta9 = {
       selector: "[aria-current=page]",
       label: "Current page"
     }
-  ],
-  template: [
-    {
-      type: "instance",
-      component: "Link",
-      children: [{ type: "text", value: "Link text you can edit" }]
-    }
   ]
 };
 var propsMeta2 = {
@@ -966,14 +938,7 @@ var meta16 = {
     { selector: ":disabled", label: "Disabled" },
     { selector: ":enabled", label: "Enabled" }
   ],
-  order: 1,
-  template: [
-    {
-      type: "instance",
-      component: "Button",
-      children: [{ type: "text", value: "Button you can edit" }]
-    }
-  ]
+  order: 1
 };
 
 // src/input.ws.tsx
@@ -1767,13 +1732,6 @@ var meta20 = {
   icon: BlockquoteIcon,
   states: defaultStates16,
   presetStyle: presetStyle16,
-  template: [
-    {
-      type: "instance",
-      component: "Blockquote",
-      children: [{ type: "text", value: "Blockquote you can edit" }]
-    }
-  ],
   order: 3
 };
 
@@ -1844,13 +1802,6 @@ var meta22 = {
   icon: ListItemIcon,
   states: defaultStates18,
   presetStyle: presetStyle18,
-  template: [
-    {
-      type: "instance",
-      component: "ListItem",
-      children: [{ type: "text", value: "List Item you can edit" }]
-    }
-  ],
   order: 4
 };
 
@@ -1940,13 +1891,6 @@ var meta24 = {
   invalidAncestors: ["CodeText"],
   states: defaultStates20,
   presetStyle: presetStyle20,
-  template: [
-    {
-      type: "instance",
-      component: "CodeText",
-      children: [{ type: "text", value: "Code you can edit" }]
-    }
-  ],
   order: 8
 };
 

package/lib/props.js

@@ -3323,13 +3323,6 @@ var meta = {
       selector: "[aria-current=page]",
       label: "Current page"
     }
-  ],
-  template: [
-    {
-      type: "instance",
-      component: "Link",
-      children: [{ type: "text", value: "Link text you can edit" }]
-    }
   ]
 };
 var propsMeta9 = {
@@ -6561,14 +6554,7 @@ var meta3 = {
     { selector: ":disabled", label: "Disabled" },
     { selector: ":enabled", label: "Enabled" }
   ],
-  order: 1,
-  template: [
-    {
-      type: "instance",
-      component: "Button",
-      children: [{ type: "text", value: "Button you can edit" }]
-    }
-  ]
+  order: 1
 };
 var propsMeta16 = {
   props: props13,

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

@@ -63,12 +63,12 @@ export declare const VimeoPreviewImage: import("react").ForwardRefExoticComponen
     'aria-colindextext'?: string | undefined;
     'aria-colspan'?: number | undefined;
     'aria-controls'?: string | undefined;
-    'aria-current'?: boolean | "time" | "true" | "false" | "page" | "step" | "location" | "date" | undefined;
+    'aria-current'?: boolean | "time" | "true" | "false" | "page" | "date" | "step" | "location" | undefined;
     'aria-describedby'?: string | undefined;
     'aria-description'?: string | undefined;
     'aria-details'?: string | undefined;
     'aria-disabled'?: (boolean | "true" | "false") | undefined;
-    'aria-dropeffect'?: "link" | "none" | "copy" | "execute" | "move" | "popup" | undefined;
+    'aria-dropeffect'?: "link" | "none" | "execute" | "copy" | "move" | "popup" | undefined;
     'aria-errormessage'?: string | undefined;
     'aria-expanded'?: (boolean | "true" | "false") | undefined;
     'aria-flowto'?: string | undefined;
@@ -90,7 +90,7 @@ export declare const VimeoPreviewImage: import("react").ForwardRefExoticComponen
     'aria-posinset'?: number | undefined;
     'aria-pressed'?: boolean | "true" | "false" | "mixed" | undefined;
     'aria-readonly'?: (boolean | "true" | "false") | undefined;
-    'aria-relevant'?: "text" | "additions" | "additions removals" | "additions text" | "all" | "removals" | "removals additions" | "removals text" | "text additions" | "text removals" | undefined;
+    'aria-relevant'?: "text" | "all" | "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;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@webstudio-is/sdk-components-react",
-  "version": "0.102.0",
+  "version": "0.103.0",
   "description": "Webstudio default library for react",
   "author": "Webstudio <github@webstudio.is>",
   "homepage": "https://webstudio.is",
@@ -40,10 +40,10 @@
     "@react-aria/utils": "^3.19.0",
     "colord": "^2.9.3",
     "shallow-equal": "^3.1.0",
-    "@webstudio-is/css-vars": "0.102.0",
-    "@webstudio-is/icons": "0.102.0",
-    "@webstudio-is/image": "0.102.0",
-    "@webstudio-is/react-sdk": "0.102.0"
+    "@webstudio-is/css-vars": "0.103.0",
+    "@webstudio-is/icons": "0.103.0",
+    "@webstudio-is/image": "0.103.0",
+    "@webstudio-is/react-sdk": "0.103.0"
   },
   "devDependencies": {
     "@storybook/react": "^7.4.0",
@@ -52,7 +52,7 @@
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
     "typescript": "5.2.2",
-    "@webstudio-is/generate-arg-types": "0.102.0",
+    "@webstudio-is/generate-arg-types": "0.103.0",
     "@webstudio-is/storybook-config": "0.0.0",
     "@webstudio-is/tsconfig": "1.0.7"
   },