@webstudio-is/sdk-components-react 0.129.0 → 0.131.0

package/lib/metas.js

@@ -59,7 +59,7 @@ var propsMeta = {
   initialProps: ["clientOnly", "executeScriptOnCanvas"]
 };
 
-// src/body.ws.tsx
+// src/body.ws.ts
 import { BodyIcon } from "@webstudio-is/icons/svg";
 import {
   defaultStates
@@ -126,7 +126,7 @@ var meta5 = {
   order: 0
 };
 
-// src/text.ws.tsx
+// src/text.ws.ts
 import { TextIcon } from "@webstudio-is/icons/svg";
 import {
   defaultStates as defaultStates3
@@ -152,7 +152,7 @@ var meta6 = {
   order: 0
 };
 
-// src/heading.ws.tsx
+// src/heading.ws.ts
 import { HeadingIcon } from "@webstudio-is/icons/svg";
 import {
   defaultStates as defaultStates4
@@ -178,7 +178,7 @@ var meta7 = {
   order: 1
 };
 
-// src/paragraph.ws.tsx
+// src/paragraph.ws.ts
 import { TextAlignLeftIcon } from "@webstudio-is/icons/svg";
 import {
   defaultStates as defaultStates5
@@ -199,7 +199,7 @@ var meta8 = {
   order: 2
 };
 
-// src/link.ws.tsx
+// src/link.ws.ts
 import { LinkIcon } from "@webstudio-is/icons/svg";
 import {
   defaultStates as defaultStates6
@@ -769,7 +769,7 @@ var props2 = {
   vocab: { required: false, control: "text", type: "string" }
 };
 
-// src/link.ws.tsx
+// src/link.ws.ts
 var presetStyle6 = {
   a: [
     ...a,
@@ -789,7 +789,7 @@ var meta9 = {
   label: "Link",
   description: "Use a link to send your users to another page, section, or resource. Configure links in the Settings panel.",
   icon: LinkIcon,
-  invalidAncestors: ["Link"],
+  invalidAncestors: ["Link", "Button"],
   presetStyle: presetStyle6,
   order: 1,
   states: [
@@ -814,10 +814,10 @@ var propsMeta2 = {
       required: false
     }
   },
-  initialProps: ["id", "href", "target"]
+  initialProps: ["id", "className", "href", "target"]
 };
 
-// src/rich-text-link.ws.tsx
+// src/rich-text-link.ws.ts
 var meta10 = {
   ...meta9,
   category: "hidden",
@@ -825,7 +825,7 @@ var meta10 = {
   template: []
 };
 
-// src/span.ws.tsx
+// src/span.ws.ts
 import { PaintBrushIcon } from "@webstudio-is/icons/svg";
 import {
   defaultStates as defaultStates7
@@ -842,7 +842,7 @@ var meta11 = {
   presetStyle: presetStyle7
 };
 
-// src/bold.ws.tsx
+// src/bold.ws.ts
 import { BoldIcon } from "@webstudio-is/icons/svg";
 import {
   defaultStates as defaultStates8
@@ -859,7 +859,7 @@ var meta12 = {
   presetStyle: presetStyle8
 };
 
-// src/italic.ws.tsx
+// src/italic.ws.ts
 import { TextItalicIcon } from "@webstudio-is/icons/svg";
 import {
   defaultStates as defaultStates9
@@ -882,7 +882,7 @@ var meta13 = {
   presetStyle: presetStyle9
 };
 
-// src/superscript.ws.tsx
+// src/superscript.ws.ts
 import { SuperscriptIcon } from "@webstudio-is/icons/svg";
 import {
   defaultStates as defaultStates10
@@ -899,7 +899,7 @@ var meta14 = {
   presetStyle: presetStyle10
 };
 
-// src/subscript.ws.tsx
+// src/subscript.ws.ts
 import { SubscriptIcon } from "@webstudio-is/icons/svg";
 import {
   defaultStates as defaultStates11
@@ -916,7 +916,7 @@ var meta15 = {
   presetStyle: presetStyle11
 };
 
-// src/button.ws.tsx
+// src/button.ws.ts
 import { ButtonElementIcon } from "@webstudio-is/icons/svg";
 import {
   defaultStates as defaultStates12
@@ -928,7 +928,7 @@ var presetStyle12 = {
 var meta16 = {
   category: "forms",
   type: "container",
-  invalidAncestors: ["Button"],
+  invalidAncestors: ["Button", "Link"],
   label: "Button",
   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\u2019s what a link is used for.",
   icon: ButtonElementIcon,
@@ -941,7 +941,7 @@ var meta16 = {
   order: 1
 };
 
-// src/input.ws.tsx
+// src/input.ws.ts
 import { FormTextFieldIcon } from "@webstudio-is/icons/svg";
 import {
   defaultStates as defaultStates13
@@ -958,7 +958,7 @@ var presetStyle13 = {
 };
 var meta17 = {
   category: "forms",
-  invalidAncestors: ["Button"],
+  invalidAncestors: ["Button", "Link"],
   type: "control",
   label: "Text Input",
   description: "A single-line text input for collecting string data from your users.",
@@ -980,7 +980,7 @@ var meta17 = {
   ]
 };
 
-// src/form.ws.tsx
+// src/form.ws.ts
 import { FormIcon } from "@webstudio-is/icons/svg";
 import {
   defaultStates as defaultStates14
@@ -995,7 +995,7 @@ var presetStyle14 = {
 var meta18 = {
   category: "forms",
   type: "container",
-  invalidAncestors: ["Form"],
+  invalidAncestors: ["Form", "Button", "Link"],
   label: "Form",
   description: "Collect information from your users using validation rules.",
   icon: FormIcon,
@@ -1039,7 +1039,7 @@ var meta18 = {
   ]
 };
 
-// src/image.ws.tsx
+// src/image.ws.ts
 import { ImageIcon } from "@webstudio-is/icons/svg";
 import {
   defaultStates as defaultStates15
@@ -1628,7 +1628,7 @@ var props3 = {
   }
 };
 
-// src/image.ws.tsx
+// src/image.ws.ts
 var presetStyle15 = {
   img: [
     ...img,
@@ -1668,10 +1668,10 @@ var propsMeta3 = {
     ...props3,
     ...propsOverrides
   },
-  initialProps: ["id", "src", "width", "height", "alt", "loading"]
+  initialProps: ["id", "className", "src", "width", "height", "alt", "loading"]
 };
 
-// src/blockquote.ws.tsx
+// src/blockquote.ws.ts
 import { BlockquoteIcon } from "@webstudio-is/icons/svg";
 import {
   defaultStates as defaultStates16
@@ -1735,7 +1735,7 @@ var meta20 = {
   order: 3
 };
 
-// src/list.ws.tsx
+// src/list.ws.ts
 import { ListIcon } from "@webstudio-is/icons/svg";
 import {
   defaultStates as defaultStates17
@@ -1807,7 +1807,7 @@ var meta21 = {
   ]
 };
 
-// src/list-item.ws.tsx
+// src/list-item.ws.ts
 import { ListItemIcon } from "@webstudio-is/icons/svg";
 import {
   defaultStates as defaultStates18
@@ -1828,7 +1828,7 @@ var meta22 = {
   order: 4
 };
 
-// src/separator.ws.tsx
+// src/separator.ws.ts
 import { DashIcon } from "@webstudio-is/icons/svg";
 import {
   defaultStates as defaultStates19
@@ -1874,7 +1874,7 @@ var meta23 = {
   order: 5
 };
 
-// src/code-text.ws.tsx
+// src/code-text.ws.ts
 import { CodeTextIcon } from "@webstudio-is/icons/svg";
 import {
   defaultStates as defaultStates20
@@ -1917,7 +1917,7 @@ var meta24 = {
   order: 9
 };
 
-// src/label.ws.tsx
+// src/label.ws.ts
 import { LabelIcon } from "@webstudio-is/icons/svg";
 import {
   defaultStates as defaultStates21
@@ -2445,7 +2445,7 @@ var props4 = {
   vocab: { required: false, control: "text", type: "string" }
 };
 
-// src/label.ws.tsx
+// src/label.ws.ts
 var presetStyle21 = {
   label: [
     ...label,
@@ -2477,10 +2477,10 @@ var propsMeta4 = {
       label: "For"
     }
   },
-  initialProps: ["id", "htmlFor"]
+  initialProps: ["id", "className", "htmlFor"]
 };
 
-// src/textarea.ws.tsx
+// src/textarea.ws.ts
 import { FormTextAreaIcon } from "@webstudio-is/icons/svg";
 import {
   defaultStates as defaultStates22
@@ -2505,6 +2505,7 @@ var meta26 = {
   icon: FormTextAreaIcon,
   presetStyle: presetStyle22,
   order: 4,
+  invalidAncestors: ["Button", "Link"],
   states: [
     ...defaultStates22,
     { selector: "::placeholder", label: "Placeholder" },
@@ -2520,15 +2521,15 @@ var meta26 = {
   ]
 };
 
-// src/radio-button.ws.tsx
+// src/radio-button.ws.ts
 import { RadioCheckedIcon } from "@webstudio-is/icons/svg";
 import {
   defaultStates as defaultStates23
 } from "@webstudio-is/react-sdk";
-import { input as input2 } from "@webstudio-is/react-sdk/css-normalize";
+import { radio } from "@webstudio-is/react-sdk/css-normalize";
 var presetStyle23 = {
   input: [
-    ...input2,
+    ...radio,
     {
       property: "marginRight",
       value: { type: "unit", unit: "em", value: 0.5 }
@@ -2537,7 +2538,7 @@ var presetStyle23 = {
 };
 var meta27 = {
   category: "forms",
-  invalidAncestors: ["Button"],
+  invalidAncestors: ["Button", "Link"],
   type: "control",
   label: "Radio",
   description: "Use within a form to allow your users to select a single option from a set of mutually exclusive choices. Group multiple radios by matching their \u201CName\u201D properties.",
@@ -2574,15 +2575,15 @@ var meta27 = {
   ]
 };
 
-// src/checkbox.ws.tsx
+// src/checkbox.ws.ts
 import { CheckboxCheckedIcon } from "@webstudio-is/icons/svg";
 import {
   defaultStates as defaultStates24
 } from "@webstudio-is/react-sdk";
-import { input as input3 } from "@webstudio-is/react-sdk/css-normalize";
+import { checkbox } from "@webstudio-is/react-sdk/css-normalize";
 var presetStyle24 = {
   input: [
-    ...input3,
+    ...checkbox,
     {
       property: "marginRight",
       value: { type: "unit", unit: "em", value: 0.5 }
@@ -2591,7 +2592,7 @@ var presetStyle24 = {
 };
 var meta28 = {
   category: "forms",
-  invalidAncestors: ["Button"],
+  invalidAncestors: ["Button", "Link"],
   type: "control",
   label: "Checkbox",
   description: "Use within a form to allow your users to toggle between checked and not checked. Group checkboxes by matching their \u201CName\u201D properties. Unlike radios, any number of checkboxes in a group can be checked.",
@@ -2645,6 +2646,7 @@ var meta29 = {
   icon: VimeoIcon,
   states: defaultStates25,
   presetStyle: presetStyle25,
+  invalidAncestors: ["Button", "Heading", "Link"],
   template: [
     {
       type: "instance",

package/lib/props.js

@@ -41,7 +41,7 @@ var propsMeta3 = {
   initialProps: ["clientOnly", "executeScriptOnCanvas"]
 };
 
-// src/body.ws.tsx
+// src/body.ws.ts
 import { BodyIcon } from "@webstudio-is/icons/svg";
 import {
   defaultStates
@@ -557,7 +557,7 @@ var props2 = {
   vocab: { required: false, control: "text", type: "string" }
 };
 
-// src/body.ws.tsx
+// src/body.ws.ts
 var presetStyle = {
   body: [
     ...body,
@@ -573,7 +573,7 @@ var presetStyle = {
 };
 var propsMeta4 = {
   props: props2,
-  initialProps: ["id"]
+  initialProps: ["id", "className"]
 };
 
 // src/box.ws.ts
@@ -1125,10 +1125,10 @@ var props3 = {
 // src/box.ws.ts
 var propsMeta5 = {
   props: props3,
-  initialProps: ["id", "tag"]
+  initialProps: ["id", "className", "tag"]
 };
 
-// src/text.ws.tsx
+// src/text.ws.ts
 import { TextIcon } from "@webstudio-is/icons/svg";
 import {
   defaultStates as defaultStates3
@@ -1652,7 +1652,7 @@ var props4 = {
   vocab: { required: false, control: "text", type: "string" }
 };
 
-// src/text.ws.tsx
+// src/text.ws.ts
 var presetStyle2 = {
   div: [
     ...div2,
@@ -1664,10 +1664,10 @@ var presetStyle2 = {
 };
 var propsMeta6 = {
   props: props4,
-  initialProps: ["id", "tag"]
+  initialProps: ["id", "className", "tag"]
 };
 
-// src/heading.ws.tsx
+// src/heading.ws.ts
 import { HeadingIcon } from "@webstudio-is/icons/svg";
 import {
   defaultStates as defaultStates4
@@ -2191,13 +2191,13 @@ var props5 = {
   vocab: { required: false, control: "text", type: "string" }
 };
 
-// src/heading.ws.tsx
+// src/heading.ws.ts
 var propsMeta7 = {
   props: props5,
-  initialProps: ["id", "tag"]
+  initialProps: ["id", "className", "tag"]
 };
 
-// src/paragraph.ws.tsx
+// src/paragraph.ws.ts
 import { TextAlignLeftIcon } from "@webstudio-is/icons/svg";
 import {
   defaultStates as defaultStates5
@@ -2713,13 +2713,13 @@ var props6 = {
   vocab: { required: false, control: "text", type: "string" }
 };
 
-// src/paragraph.ws.tsx
+// src/paragraph.ws.ts
 var propsMeta8 = {
   props: props6,
-  initialProps: ["id"]
+  initialProps: ["id", "className"]
 };
 
-// src/link.ws.tsx
+// src/link.ws.ts
 import { LinkIcon } from "@webstudio-is/icons/svg";
 import {
   defaultStates as defaultStates6
@@ -3289,7 +3289,7 @@ var props7 = {
   vocab: { required: false, control: "text", type: "string" }
 };
 
-// src/link.ws.tsx
+// src/link.ws.ts
 var presetStyle3 = {
   a: [
     ...a,
@@ -3309,7 +3309,7 @@ var meta = {
   label: "Link",
   description: "Use a link to send your users to another page, section, or resource. Configure links in the Settings panel.",
   icon: LinkIcon,
-  invalidAncestors: ["Link"],
+  invalidAncestors: ["Link", "Button"],
   presetStyle: presetStyle3,
   order: 1,
   states: [
@@ -3334,10 +3334,10 @@ var propsMeta9 = {
       required: false
     }
   },
-  initialProps: ["id", "href", "target"]
+  initialProps: ["id", "className", "href", "target"]
 };
 
-// src/rich-text-link.ws.tsx
+// src/rich-text-link.ws.ts
 var meta2 = {
   ...meta,
   category: "hidden",
@@ -3346,7 +3346,7 @@ var meta2 = {
 };
 var propsMeta10 = propsMeta9;
 
-// src/span.ws.tsx
+// src/span.ws.ts
 import { PaintBrushIcon } from "@webstudio-is/icons/svg";
 import {
   defaultStates as defaultStates7
@@ -3862,13 +3862,13 @@ var props8 = {
   vocab: { required: false, control: "text", type: "string" }
 };
 
-// src/span.ws.tsx
+// src/span.ws.ts
 var propsMeta11 = {
   props: props8,
-  initialProps: ["id"]
+  initialProps: ["id", "className"]
 };
 
-// src/bold.ws.tsx
+// src/bold.ws.ts
 import { BoldIcon } from "@webstudio-is/icons/svg";
 import {
   defaultStates as defaultStates8
@@ -4384,13 +4384,13 @@ var props9 = {
   vocab: { required: false, control: "text", type: "string" }
 };
 
-// src/bold.ws.tsx
+// src/bold.ws.ts
 var propsMeta12 = {
   props: props9,
-  initialProps: ["id"]
+  initialProps: ["id", "className"]
 };
 
-// src/italic.ws.tsx
+// src/italic.ws.ts
 import { TextItalicIcon } from "@webstudio-is/icons/svg";
 import {
   defaultStates as defaultStates9
@@ -4906,7 +4906,7 @@ var props10 = {
   vocab: { required: false, control: "text", type: "string" }
 };
 
-// src/italic.ws.tsx
+// src/italic.ws.ts
 var presetStyle4 = {
   i: [
     ...i,
@@ -4918,10 +4918,10 @@ var presetStyle4 = {
 };
 var propsMeta13 = {
   props: props10,
-  initialProps: ["id"]
+  initialProps: ["id", "className"]
 };
 
-// src/superscript.ws.tsx
+// src/superscript.ws.ts
 import { SuperscriptIcon } from "@webstudio-is/icons/svg";
 import {
   defaultStates as defaultStates10
@@ -5437,13 +5437,13 @@ var props11 = {
   vocab: { required: false, control: "text", type: "string" }
 };
 
-// src/superscript.ws.tsx
+// src/superscript.ws.ts
 var propsMeta14 = {
   props: props11,
-  initialProps: ["id"]
+  initialProps: ["id", "className"]
 };
 
-// src/subscript.ws.tsx
+// src/subscript.ws.ts
 import { SubscriptIcon } from "@webstudio-is/icons/svg";
 import {
   defaultStates as defaultStates11
@@ -5959,13 +5959,13 @@ var props12 = {
   vocab: { required: false, control: "text", type: "string" }
 };
 
-// src/subscript.ws.tsx
+// src/subscript.ws.ts
 var propsMeta15 = {
   props: props12,
-  initialProps: ["id"]
+  initialProps: ["id", "className"]
 };
 
-// src/button.ws.tsx
+// src/button.ws.ts
 import { ButtonElementIcon } from "@webstudio-is/icons/svg";
 import {
   defaultStates as defaultStates12
@@ -6537,14 +6537,14 @@ var props13 = {
   vocab: { required: false, control: "text", type: "string" }
 };
 
-// src/button.ws.tsx
+// src/button.ws.ts
 var presetStyle5 = {
   button
 };
 var meta3 = {
   category: "forms",
   type: "container",
-  invalidAncestors: ["Button"],
+  invalidAncestors: ["Button", "Link"],
   label: "Button",
   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\u2019s what a link is used for.",
   icon: ButtonElementIcon,
@@ -6558,10 +6558,10 @@ var meta3 = {
 };
 var propsMeta16 = {
   props: props13,
-  initialProps: ["id", "type", "aria-label"]
+  initialProps: ["id", "className", "type", "aria-label"]
 };
 
-// src/input.ws.tsx
+// src/input.ws.ts
 import { FormTextFieldIcon } from "@webstudio-is/icons/svg";
 import {
   defaultStates as defaultStates13
@@ -7242,7 +7242,7 @@ var props14 = {
   }
 };
 
-// src/input.ws.tsx
+// src/input.ws.ts
 var presetStyle6 = {
   input: [
     ...input,
@@ -7254,7 +7254,7 @@ var presetStyle6 = {
 };
 var meta4 = {
   category: "forms",
-  invalidAncestors: ["Button"],
+  invalidAncestors: ["Button", "Link"],
   type: "control",
   label: "Text Input",
   description: "A single-line text input for collecting string data from your users.",
@@ -7277,10 +7277,18 @@ var meta4 = {
 };
 var propsMeta17 = {
   props: props14,
-  initialProps: ["id", "name", "type", "placeholder", "required", "autoFocus"]
+  initialProps: [
+    "id",
+    "className",
+    "name",
+    "type",
+    "placeholder",
+    "required",
+    "autoFocus"
+  ]
 };
 
-// src/form.ws.tsx
+// src/form.ws.ts
 import { FormIcon } from "@webstudio-is/icons/svg";
 import {
   defaultStates as defaultStates14
@@ -7844,7 +7852,7 @@ var props15 = {
   vocab: { required: false, control: "text", type: "string" }
 };
 
-// src/form.ws.tsx
+// src/form.ws.ts
 var presetStyle7 = {
   form: [
     ...form,
@@ -7853,10 +7861,10 @@ var presetStyle7 = {
 };
 var propsMeta18 = {
   props: props15,
-  initialProps: ["id", "action"]
+  initialProps: ["id", "className", "action"]
 };
 
-// src/image.ws.tsx
+// src/image.ws.ts
 import { ImageIcon } from "@webstudio-is/icons/svg";
 import {
   defaultStates as defaultStates15
@@ -8445,7 +8453,7 @@ var props16 = {
   }
 };
 
-// src/image.ws.tsx
+// src/image.ws.ts
 var presetStyle8 = {
   img: [
     ...img,
@@ -8485,10 +8493,10 @@ var propsMeta19 = {
     ...props16,
     ...propsOverrides
   },
-  initialProps: ["id", "src", "width", "height", "alt", "loading"]
+  initialProps: ["id", "className", "src", "width", "height", "alt", "loading"]
 };
 
-// src/blockquote.ws.tsx
+// src/blockquote.ws.ts
 import { BlockquoteIcon } from "@webstudio-is/icons/svg";
 import {
   defaultStates as defaultStates16
@@ -9009,13 +9017,13 @@ var props17 = {
   vocab: { required: false, control: "text", type: "string" }
 };
 
-// src/blockquote.ws.tsx
+// src/blockquote.ws.ts
 var propsMeta20 = {
   props: props17,
-  initialProps: ["id", "cite"]
+  initialProps: ["id", "className", "cite"]
 };
 
-// src/list.ws.tsx
+// src/list.ws.ts
 import { ListIcon } from "@webstudio-is/icons/svg";
 import {
   defaultStates as defaultStates17
@@ -9557,7 +9565,7 @@ var props18 = {
   vocab: { required: false, control: "text", type: "string" }
 };
 
-// src/list.ws.tsx
+// src/list.ws.ts
 var presetStyle9 = {
   ol: [
     ...ol,
@@ -9592,10 +9600,10 @@ var presetStyle9 = {
 };
 var propsMeta21 = {
   props: props18,
-  initialProps: ["id", "ordered", "start", "reversed"]
+  initialProps: ["id", "className", "ordered", "start", "reversed"]
 };
 
-// src/list-item.ws.tsx
+// src/list-item.ws.ts
 import { ListItemIcon } from "@webstudio-is/icons/svg";
 import {
   defaultStates as defaultStates18
@@ -10111,13 +10119,13 @@ var props19 = {
   vocab: { required: false, control: "text", type: "string" }
 };
 
-// src/list-item.ws.tsx
+// src/list-item.ws.ts
 var propsMeta22 = {
   props: props19,
-  initialProps: ["id"]
+  initialProps: ["id", "className"]
 };
 
-// src/separator.ws.tsx
+// src/separator.ws.ts
 import { DashIcon } from "@webstudio-is/icons/svg";
 import {
   defaultStates as defaultStates19
@@ -10633,7 +10641,7 @@ var props20 = {
   vocab: { required: false, control: "text", type: "string" }
 };
 
-// src/separator.ws.tsx
+// src/separator.ws.ts
 var presetStyle10 = {
   hr: [
     ...hr,
@@ -10665,10 +10673,10 @@ var presetStyle10 = {
 };
 var propsMeta23 = {
   props: props20,
-  initialProps: ["id"]
+  initialProps: ["id", "className"]
 };
 
-// src/code-text.ws.tsx
+// src/code-text.ws.ts
 import { CodeTextIcon } from "@webstudio-is/icons/svg";
 import {
   defaultStates as defaultStates20
@@ -11184,7 +11192,7 @@ var props21 = {
   vocab: { required: false, control: "text", type: "string" }
 };
 
-// src/code-text.ws.tsx
+// src/code-text.ws.ts
 var presetStyle11 = {
   code: [
     ...code,
@@ -11212,10 +11220,10 @@ var presetStyle11 = {
 };
 var propsMeta24 = {
   props: props21,
-  initialProps: ["id", "lang"]
+  initialProps: ["id", "className", "lang"]
 };
 
-// src/label.ws.tsx
+// src/label.ws.ts
 import { LabelIcon } from "@webstudio-is/icons/svg";
 import {
   defaultStates as defaultStates21
@@ -11743,7 +11751,7 @@ var props22 = {
   vocab: { required: false, control: "text", type: "string" }
 };
 
-// src/label.ws.tsx
+// src/label.ws.ts
 var presetStyle12 = {
   label: [
     ...label,
@@ -11758,10 +11766,10 @@ var propsMeta25 = {
       label: "For"
     }
   },
-  initialProps: ["id", "htmlFor"]
+  initialProps: ["id", "className", "htmlFor"]
 };
 
-// src/textarea.ws.tsx
+// src/textarea.ws.ts
 import { FormTextAreaIcon } from "@webstudio-is/icons/svg";
 import {
   defaultStates as defaultStates22
@@ -12344,7 +12352,7 @@ var props23 = {
   }
 };
 
-// src/textarea.ws.tsx
+// src/textarea.ws.ts
 var presetStyle13 = {
   textarea: [
     ...textarea,
@@ -12364,6 +12372,7 @@ var meta6 = {
   icon: FormTextAreaIcon,
   presetStyle: presetStyle13,
   order: 4,
+  invalidAncestors: ["Button", "Link"],
   states: [
     ...defaultStates22,
     { selector: "::placeholder", label: "Placeholder" },
@@ -12380,15 +12389,22 @@ var meta6 = {
 };
 var propsMeta26 = {
   props: props23,
-  initialProps: ["id", "name", "placeholder", "required", "autoFocus"]
+  initialProps: [
+    "id",
+    "className",
+    "name",
+    "placeholder",
+    "required",
+    "autoFocus"
+  ]
 };
 
-// src/radio-button.ws.tsx
+// src/radio-button.ws.ts
 import { RadioCheckedIcon } from "@webstudio-is/icons/svg";
 import {
   defaultStates as defaultStates23
 } from "@webstudio-is/react-sdk";
-import { input as input2 } from "@webstudio-is/react-sdk/css-normalize";
+import { radio } from "@webstudio-is/react-sdk/css-normalize";
 
 // src/__generated__/radio-button.props.ts
 var props24 = {
@@ -13057,10 +13073,10 @@ var props24 = {
   }
 };
 
-// src/radio-button.ws.tsx
+// src/radio-button.ws.ts
 var presetStyle14 = {
   input: [
-    ...input2,
+    ...radio,
     {
       property: "marginRight",
       value: { type: "unit", unit: "em", value: 0.5 }
@@ -13069,7 +13085,7 @@ var presetStyle14 = {
 };
 var meta7 = {
   category: "forms",
-  invalidAncestors: ["Button"],
+  invalidAncestors: ["Button", "Link"],
   type: "control",
   label: "Radio",
   description: "Use within a form to allow your users to select a single option from a set of mutually exclusive choices. Group multiple radios by matching their \u201CName\u201D properties.",
@@ -13107,15 +13123,15 @@ var meta7 = {
 };
 var propsMeta27 = {
   props: props24,
-  initialProps: ["id", "name"]
+  initialProps: ["id", "className", "name"]
 };
 
-// src/checkbox.ws.tsx
+// src/checkbox.ws.ts
 import { CheckboxCheckedIcon } from "@webstudio-is/icons/svg";
 import {
   defaultStates as defaultStates24
 } from "@webstudio-is/react-sdk";
-import { input as input3 } from "@webstudio-is/react-sdk/css-normalize";
+import { checkbox } from "@webstudio-is/react-sdk/css-normalize";
 
 // src/__generated__/checkbox.props.ts
 var props25 = {
@@ -13784,10 +13800,10 @@ var props25 = {
   }
 };
 
-// src/checkbox.ws.tsx
+// src/checkbox.ws.ts
 var presetStyle15 = {
   input: [
-    ...input3,
+    ...checkbox,
     {
       property: "marginRight",
       value: { type: "unit", unit: "em", value: 0.5 }
@@ -13796,7 +13812,7 @@ var presetStyle15 = {
 };
 var meta8 = {
   category: "forms",
-  invalidAncestors: ["Button"],
+  invalidAncestors: ["Button", "Link"],
   type: "control",
   label: "Checkbox",
   description: "Use within a form to allow your users to toggle between checked and not checked. Group checkboxes by matching their \u201CName\u201D properties. Unlike radios, any number of checkboxes in a group can be checked.",
@@ -13833,7 +13849,7 @@ var meta8 = {
 };
 var propsMeta28 = {
   props: props25,
-  initialProps: ["id", "name"]
+  initialProps: ["id", "className", "name"]
 };
 
 // src/vimeo.ws.ts
@@ -14520,6 +14536,7 @@ var props26 = {
 // src/vimeo.ws.ts
 var initialProps = [
   "id",
+  "className",
   "url",
   "quality",
   "showPreview",
@@ -15710,7 +15727,7 @@ import { ButtonElementIcon as ButtonElementIcon2 } from "@webstudio-is/icons/svg
 import { button as button2 } from "@webstudio-is/react-sdk/css-normalize";
 var propsMeta31 = {
   props: props28,
-  initialProps: ["id"]
+  initialProps: ["id", "className"]
 };
 
 // src/vimeo-spinner.ws.ts
@@ -16232,7 +16249,7 @@ import { div as div4 } from "@webstudio-is/react-sdk/css-normalize";
 import { BoxIcon as BoxIcon2 } from "@webstudio-is/icons/svg";
 var propsMeta32 = {
   props: props29,
-  initialProps: ["id"]
+  initialProps: ["id", "className"]
 };
 export {
   propsMeta20 as Blockquote,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@webstudio-is/sdk-components-react",
-  "version": "0.129.0",
+  "version": "0.131.0",
   "description": "Webstudio default library for react",
   "author": "Webstudio <github@webstudio.is>",
   "homepage": "https://webstudio.is",
@@ -40,9 +40,9 @@
     "@react-aria/utils": "^3.21.0",
     "colord": "^2.9.3",
     "shallow-equal": "^3.1.0",
-    "@webstudio-is/image": "0.129.0",
-    "@webstudio-is/react-sdk": "0.129.0",
-    "@webstudio-is/icons": "0.129.0"
+    "@webstudio-is/icons": "0.131.0",
+    "@webstudio-is/image": "0.131.0",
+    "@webstudio-is/react-sdk": "0.131.0"
   },
   "devDependencies": {
     "@storybook/react": "^7.4.0",
@@ -51,14 +51,14 @@
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
     "typescript": "5.2.2",
-    "@webstudio-is/generate-arg-types": "0.129.0",
+    "@webstudio-is/generate-arg-types": "0.131.0",
     "@webstudio-is/storybook-config": "0.0.0",
     "@webstudio-is/tsconfig": "1.0.7"
   },
   "scripts": {
     "dev": "rm -rf lib && esbuild 'src/**/*.ts' 'src/**/*.tsx' --outdir=lib --watch",
     "build": "rm -rf lib && esbuild src/components.ts src/metas.ts src/props.ts --outdir=lib --bundle --format=esm --packages=external",
-    "build:args": "NODE_OPTIONS=--conditions=webstudio generate-arg-types './src/*.tsx !./src/*.stories.tsx !./src/*.ws.tsx' && prettier --write \"**/*.props.ts\"",
+    "build:args": "NODE_OPTIONS=--conditions=webstudio generate-arg-types './src/*.tsx !./src/*.stories.tsx !./src/*.ws.ts' && prettier --write \"**/*.props.ts\"",
     "dts": "tsc --project tsconfig.dts.json",
     "typecheck": "tsc",
     "checks": "pnpm typecheck",