@webstudio-is/sdk-components-react 0.173.0 → 0.175.0

package/lib/metas.js

@@ -3,7 +3,6 @@ import { SlotComponentIcon } from "@webstudio-is/icons/svg";
 var meta = {
   category: "general",
   type: "container",
-  label: "Slot",
   description: "Slot is a container for content that you want to reference across the project. Changes made to a Slot's children will be reflected in all other instances of that Slot.",
   icon: SlotComponentIcon,
   stylable: false,
@@ -13,7 +12,6 @@ var meta = {
 // src/fragment.ws.ts
 var meta2 = {
   type: "container",
-  label: "Fragment",
   icon: "",
   stylable: false
 };
@@ -66,42 +64,138 @@ var propsMeta = {
     code: {
       required: true,
       control: "code",
+      language: "html",
       type: "string"
     }
   },
   initialProps: ["className", "clientOnly", "executeScriptOnCanvas"]
 };
 
-// src/content-embed.ws.ts
-import { ContentEmbedIcon } from "@webstudio-is/icons/svg";
+// src/markdown-embed.ws.ts
+import { MarkdownEmbedIcon } from "@webstudio-is/icons/svg";
+import { imagePlaceholderDataUrl } from "@webstudio-is/image";
 import {
   descendantComponent
 } from "@webstudio-is/react-sdk";
-var imagePlaceholder = `
-<svg
-  width="140"
-  height="140"
-  viewBox="0 0 600 600"
-  fill="none"
-  xmlns="http://www.w3.org/2000/svg"
-  >
-  <rect width="600" height="600" fill="#CCCCCC" />
-  <path
-    fill-rule="evenodd"
-    clip-rule="evenodd"
-    d="M450 170H150C141.716 170 135 176.716 135 185V415C135 423.284 141.716 430 150 430H450C458.284 430 465 423.284 465 415V185C465 176.716 458.284 170 450 170ZM150 145C127.909 145 110 162.909 110 185V415C110 437.091 127.909 455 150 455H450C472.091 455 490 437.091 490 415V185C490 162.909 472.091 145 450 145H150Z"
-    fill="#A2A2A2"
-  />
-  <path
-    d="M237.135 235.012C237.135 255.723 220.345 272.512 199.635 272.512C178.924 272.512 162.135 255.723 162.135 235.012C162.135 214.301 178.924 197.512 199.635 197.512C220.345 197.512 237.135 214.301 237.135 235.012Z"
-    fill="#A2A2A2"
-  />
-  <path
-    d="M160 405V367.205L221.609 306.364L256.552 338.628L358.161 234L440 316.043V405H160Z"
-    fill="#A2A2A2"
-  />
-</svg>
+
+// src/__generated__/markdown-embed.props.ts
+var props2 = {
+  className: { required: false, control: "text", type: "string" },
+  code: { required: true, control: "text", type: "string" }
+};
+
+// src/markdown-embed.ws.ts
+var markdownSample = `
+# Styling Markdown with Markdown Embed
+
+Markdown Embed allows styling of Markdown, which primarily comes from external data.
+
+## How to Use Markdown Embed
+
+- Every element is shown in the Navigator.
+- Apply styles and Tokens to each element.
+- Adjustments to elements apply universally within this embed, ensuring consistency across your content.
+
+---
+
+## This sample text contains all the elements that can be styled.
+
+Any elements that were not used above are used below.
+
+### Heading 3
+#### Heading 4
+##### Heading 5
+###### Heading 6
+
+[Links](#) connect your content to relevant resources.
+
+**Bold text** makes your important points stand out.
+
+*Italic text* is great for emphasizing terms.
+
+1. First Step
+2. Second Step
+
+![Image placeholder](${imagePlaceholderDataUrl})
+
+> Capture attention with a powerful quote.
+
+Using \`console.log("Hello World");\` will log to the console.
 `.trim();
+var descendant = (label2, tag) => {
+  return {
+    type: "instance",
+    component: descendantComponent,
+    label: label2,
+    props: [{ type: "string", name: "selector", value: ` ${tag}` }],
+    children: []
+  };
+};
+var meta4 = {
+  category: "data",
+  type: "embed",
+  description: "Used to add markdown code to the page",
+  icon: MarkdownEmbedIcon,
+  presetStyle: {
+    div: [
+      {
+        property: "display",
+        value: { type: "keyword", value: "contents" }
+      }
+    ]
+  },
+  order: 4,
+  template: [
+    {
+      type: "instance",
+      component: "MarkdownEmbed",
+      props: [
+        {
+          name: "code",
+          type: "string",
+          value: markdownSample
+        }
+      ],
+      children: [
+        descendant("Paragraph", "p"),
+        descendant("Heading 1", "h1"),
+        descendant("Heading 2", "h2"),
+        descendant("Heading 3", "h3"),
+        descendant("Heading 4", "h4"),
+        descendant("Heading 5", "h5"),
+        descendant("Heading 6", "h6"),
+        descendant("Bold", ":where(strong, b)"),
+        descendant("Italic", ":where(em, i)"),
+        descendant("Link", "a"),
+        descendant("Image", "img"),
+        descendant("Blockquote", "blockquote"),
+        descendant("Code Text", "code"),
+        descendant("List", ":where(ul, ol)"),
+        descendant("List Item", "li"),
+        descendant("Separator", "hr")
+      ]
+    }
+  ]
+};
+var propsMeta2 = {
+  props: {
+    ...props2,
+    code: {
+      required: true,
+      control: "code",
+      language: "markdown",
+      type: "string"
+    }
+  },
+  initialProps: ["className"]
+};
+
+// src/content-embed.ws.ts
+import { ContentEmbedIcon } from "@webstudio-is/icons/svg";
+import { imagePlaceholderDataUrl as imagePlaceholderDataUrl2 } from "@webstudio-is/image";
+import {
+  descendantComponent as descendantComponent2
+} from "@webstudio-is/react-sdk";
 var htmlSample = `
 <h1>Styling HTML with Content Embed</h1>
 <p>Content Embed allows styling of HTML, which primarily comes from external data.</p>
@@ -125,23 +219,22 @@ var htmlSample = `
   <li>First Step</li>
   <li>Second Step</li>
 </ol>
-<img src="data:image/svg+xml;base64,${btoa(imagePlaceholder)}">
+<img src="${imagePlaceholderDataUrl2}">
 <blockquote>Capture attention with a powerful quote.</blockquote>
 <p>Using <code>console.log("Hello World");</code> will log to the console.</p>
-`.trimStart();
-var descendant = (label2, tag) => {
+`.trim();
+var descendant2 = (label2, tag) => {
   return {
     type: "instance",
-    component: descendantComponent,
+    component: descendantComponent2,
     label: label2,
     props: [{ type: "string", name: "selector", value: ` ${tag}` }],
     children: []
   };
 };
-var meta4 = {
+var meta5 = {
   category: "data",
   type: "control",
-  label: "Content Embed",
   description: "Content Embed allows styling of HTML, which can be provided via the Code property statically or loaded dynamically from any Resource, for example, from a CMS.",
   icon: ContentEmbedIcon,
   order: 3,
@@ -158,22 +251,22 @@ var meta4 = {
         }
       ],
       children: [
-        descendant("Paragraph", "p"),
-        descendant("Heading 1", "h1"),
-        descendant("Heading 2", "h2"),
-        descendant("Heading 3", "h3"),
-        descendant("Heading 4", "h4"),
-        descendant("Heading 5", "h5"),
-        descendant("Heading 6", "h6"),
-        descendant("Bold", ":where(strong, b)"),
-        descendant("Italic", ":where(em, i)"),
-        descendant("Link", "a"),
-        descendant("Image", "img"),
-        descendant("Blockquote", "blockquote"),
-        descendant("Code Text", "code"),
-        descendant("List", ":where(ul, ol)"),
-        descendant("List Item", "li"),
-        descendant("Separator", "hr")
+        descendant2("Paragraph", "p"),
+        descendant2("Heading 1", "h1"),
+        descendant2("Heading 2", "h2"),
+        descendant2("Heading 3", "h3"),
+        descendant2("Heading 4", "h4"),
+        descendant2("Heading 5", "h5"),
+        descendant2("Heading 6", "h6"),
+        descendant2("Bold", ":where(strong, b)"),
+        descendant2("Italic", ":where(em, i)"),
+        descendant2("Link", "a"),
+        descendant2("Image", "img"),
+        descendant2("Blockquote", "blockquote"),
+        descendant2("Code Text", "code"),
+        descendant2("List", ":where(ul, ol)"),
+        descendant2("List Item", "li"),
+        descendant2("Separator", "hr")
       ]
     }
   ]
@@ -184,7 +277,7 @@ import { BodyIcon } from "@webstudio-is/icons/svg";
 import {
   defaultStates
 } from "@webstudio-is/react-sdk";
-import { body } from "@webstudio-is/react-sdk/css-normalize";
+import { body } from "@webstudio-is/sdk/normalize.css";
 var presetStyle2 = {
   body: [
     ...body,
@@ -198,9 +291,8 @@ var presetStyle2 = {
     }
   ]
 };
-var meta5 = {
+var meta6 = {
   type: "container",
-  label: "Body",
   icon: BodyIcon,
   states: defaultStates,
   presetStyle: presetStyle2
@@ -222,7 +314,7 @@ import {
   main,
   nav,
   section
-} from "@webstudio-is/react-sdk/css-normalize";
+} from "@webstudio-is/sdk/normalize.css";
 var presetStyle3 = {
   div,
   address,
@@ -235,10 +327,9 @@ var presetStyle3 = {
   nav,
   section
 };
-var meta6 = {
+var meta7 = {
   category: "general",
   type: "container",
-  label: "Box",
   description: "A container for content. By default this is a Div, but the tag can be changed in settings.",
   icon: BoxIcon,
   states: defaultStates2,
@@ -251,7 +342,7 @@ import { TextIcon } from "@webstudio-is/icons/svg";
 import {
   defaultStates as defaultStates3
 } from "@webstudio-is/react-sdk";
-import { div as div2 } from "@webstudio-is/react-sdk/css-normalize";
+import { div as div2 } from "@webstudio-is/sdk/normalize.css";
 var presetStyle4 = {
   div: [
     ...div2,
@@ -261,10 +352,9 @@ var presetStyle4 = {
     }
   ]
 };
-var meta7 = {
+var meta8 = {
   category: "text",
   type: "container",
-  label: "Text",
   description: "A generic container for any text content that is not a heading or a link.",
   icon: TextIcon,
   states: defaultStates3,
@@ -290,7 +380,7 @@ import { HeadingIcon } from "@webstudio-is/icons/svg";
 import {
   defaultStates as defaultStates4
 } from "@webstudio-is/react-sdk";
-import { h1, h2, h3, h4, h5, h6 } from "@webstudio-is/react-sdk/css-normalize";
+import { h1, h2, h3, h4, h5, h6 } from "@webstudio-is/sdk/normalize.css";
 var presetStyle5 = {
   h1,
   h2,
@@ -299,10 +389,9 @@ var presetStyle5 = {
   h5,
   h6
 };
-var meta8 = {
+var meta9 = {
   category: "text",
   type: "container",
-  label: "Heading",
   description: "Use HTML headings to structure and organize content. Use the Tag property in settings to change the heading level (h1-h6).",
   icon: HeadingIcon,
   invalidAncestors: ["Heading"],
@@ -329,14 +418,13 @@ import { TextAlignLeftIcon } from "@webstudio-is/icons/svg";
 import {
   defaultStates as defaultStates5
 } from "@webstudio-is/react-sdk";
-import { p } from "@webstudio-is/react-sdk/css-normalize";
+import { p } from "@webstudio-is/sdk/normalize.css";
 var presetStyle6 = {
   p
 };
-var meta9 = {
+var meta10 = {
   category: "text",
   type: "container",
-  label: "Paragraph",
   description: "A container for multi-line text.",
   icon: TextAlignLeftIcon,
   invalidAncestors: ["Paragraph"],
@@ -363,10 +451,10 @@ import { LinkIcon } from "@webstudio-is/icons/svg";
 import {
   defaultStates as defaultStates6
 } from "@webstudio-is/react-sdk";
-import { a } from "@webstudio-is/react-sdk/css-normalize";
+import { a } from "@webstudio-is/sdk/normalize.css";
 
 // src/__generated__/link.props.ts
-var props2 = {
+var props3 = {
   about: { required: false, control: "text", type: "string" },
   accessKey: {
     required: false,
@@ -746,6 +834,12 @@ var props2 = {
     type: "string",
     description: "Defines the text direction. Allowed values are ltr (Left-To-Right) or rtl (Right-To-Left)"
   },
+  download: {
+    required: false,
+    control: "boolean",
+    type: "boolean",
+    description: "Indicates that the hyperlink is to be used for downloading a resource."
+  },
   draggable: {
     required: false,
     control: "boolean",
@@ -936,10 +1030,9 @@ var presetStyle7 = {
     }
   ]
 };
-var meta10 = {
+var meta11 = {
   category: "general",
   type: "container",
-  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", "Button"],
@@ -971,21 +1064,21 @@ var meta10 = {
     }
   ]
 };
-var propsMeta2 = {
+var propsMeta3 = {
   props: {
-    ...props2,
+    ...props3,
     href: {
       type: "string",
       control: "url",
       required: false
     }
   },
-  initialProps: ["id", "className", "href", "target"]
+  initialProps: ["id", "className", "href", "target", "download"]
 };
 
 // src/rich-text-link.ws.ts
-var meta11 = {
-  ...meta10,
+var meta12 = {
+  ...meta11,
   category: "hidden",
   type: "rich-text-child",
   template: []
@@ -996,11 +1089,11 @@ import { PaintBrushIcon } from "@webstudio-is/icons/svg";
 import {
   defaultStates as defaultStates7
 } from "@webstudio-is/react-sdk";
-import { span } from "@webstudio-is/react-sdk/css-normalize";
+import { span } from "@webstudio-is/sdk/normalize.css";
 var presetStyle8 = {
   span
 };
-var meta12 = {
+var meta13 = {
   type: "rich-text-child",
   label: "Text",
   icon: PaintBrushIcon,
@@ -1013,11 +1106,11 @@ import { BoldIcon } from "@webstudio-is/icons/svg";
 import {
   defaultStates as defaultStates8
 } from "@webstudio-is/react-sdk";
-import { b } from "@webstudio-is/react-sdk/css-normalize";
+import { b } from "@webstudio-is/sdk/normalize.css";
 var presetStyle9 = {
   b
 };
-var meta13 = {
+var meta14 = {
   type: "rich-text-child",
   label: "Bold Text",
   icon: BoldIcon,
@@ -1030,7 +1123,7 @@ import { TextItalicIcon } from "@webstudio-is/icons/svg";
 import {
   defaultStates as defaultStates9
 } from "@webstudio-is/react-sdk";
-import { i } from "@webstudio-is/react-sdk/css-normalize";
+import { i } from "@webstudio-is/sdk/normalize.css";
 var presetStyle10 = {
   i: [
     ...i,
@@ -1040,7 +1133,7 @@ var presetStyle10 = {
     }
   ]
 };
-var meta14 = {
+var meta15 = {
   type: "rich-text-child",
   label: "Italic Text",
   icon: TextItalicIcon,
@@ -1053,11 +1146,11 @@ import { SuperscriptIcon } from "@webstudio-is/icons/svg";
 import {
   defaultStates as defaultStates10
 } from "@webstudio-is/react-sdk";
-import { sup } from "@webstudio-is/react-sdk/css-normalize";
+import { sup } from "@webstudio-is/sdk/normalize.css";
 var presetStyle11 = {
   sup
 };
-var meta15 = {
+var meta16 = {
   type: "rich-text-child",
   label: "Superscript Text",
   icon: SuperscriptIcon,
@@ -1070,11 +1163,11 @@ import { SubscriptIcon } from "@webstudio-is/icons/svg";
 import {
   defaultStates as defaultStates11
 } from "@webstudio-is/react-sdk";
-import { sub } from "@webstudio-is/react-sdk/css-normalize";
+import { sub } from "@webstudio-is/sdk/normalize.css";
 var presetStyle12 = {
   sub
 };
-var meta16 = {
+var meta17 = {
   type: "rich-text-child",
   label: "Subscript Text",
   icon: SubscriptIcon,
@@ -1087,15 +1180,14 @@ import { ButtonElementIcon } from "@webstudio-is/icons/svg";
 import {
   defaultStates as defaultStates12
 } from "@webstudio-is/react-sdk";
-import { button } from "@webstudio-is/react-sdk/css-normalize";
+import { button } from "@webstudio-is/sdk/normalize.css";
 var presetStyle13 = {
   button
 };
-var meta17 = {
+var meta18 = {
   category: "forms",
   type: "container",
   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,
   presetStyle: presetStyle13,
@@ -1125,7 +1217,7 @@ import { FormTextFieldIcon } from "@webstudio-is/icons/svg";
 import {
   defaultStates as defaultStates13
 } from "@webstudio-is/react-sdk";
-import { input } from "@webstudio-is/react-sdk/css-normalize";
+import { input } from "@webstudio-is/sdk/normalize.css";
 var presetStyle14 = {
   input: [
     ...input,
@@ -1135,7 +1227,7 @@ var presetStyle14 = {
     }
   ]
 };
-var meta18 = {
+var meta19 = {
   category: "forms",
   invalidAncestors: ["Button", "Link"],
   type: "control",
@@ -1164,18 +1256,18 @@ import { FormIcon } from "@webstudio-is/icons/svg";
 import {
   defaultStates as defaultStates14
 } from "@webstudio-is/react-sdk";
-import { form } from "@webstudio-is/react-sdk/css-normalize";
+import { form } from "@webstudio-is/sdk/normalize.css";
 var presetStyle15 = {
   form: [
     ...form,
     { property: "minHeight", value: { type: "unit", unit: "px", value: 20 } }
   ]
 };
-var meta19 = {
+var meta20 = {
   category: "forms",
   type: "container",
-  invalidAncestors: ["Form", "Button", "Link"],
   label: "Form",
+  invalidAncestors: ["Form", "Button", "Link"],
   description: "Create filters, surveys, searches and more.",
   icon: FormIcon,
   states: defaultStates14,
@@ -1188,10 +1280,10 @@ import { ImageIcon } from "@webstudio-is/icons/svg";
 import {
   defaultStates as defaultStates15
 } from "@webstudio-is/react-sdk";
-import { img } from "@webstudio-is/react-sdk/css-normalize";
+import { img } from "@webstudio-is/sdk/normalize.css";
 
 // src/__generated__/image.props.ts
-var props3 = {
+var props4 = {
   about: { required: false, control: "text", type: "string" },
   accessKey: {
     required: false,
@@ -1801,10 +1893,9 @@ var presetStyle16 = {
     }
   ]
 };
-var meta20 = {
+var meta21 = {
   category: "media",
   type: "embed",
-  label: "Image",
   description: "Add an image asset to the page. Webstudio automatically converts images to WebP or AVIF format and makes them responsive for best performance.",
   icon: ImageIcon,
   states: defaultStates15,
@@ -1819,11 +1910,11 @@ var propsOverrides = {
     required: false
   }
 };
-var optimize = props3.optimize;
+var optimize = props4.optimize;
 optimize.description = "Optimize the image for enhanced performance.";
-var propsMeta3 = {
+var propsMeta4 = {
   props: {
-    ...props3,
+    ...props4,
     ...propsOverrides,
     optimize
   },
@@ -1892,10 +1983,9 @@ var presetStyle17 = {
     }
   ]
 };
-var meta21 = {
+var meta22 = {
   category: "text",
   type: "container",
-  label: "Blockquote",
   description: "Use to style a quote from an external source like an article or book.",
   icon: BlockquoteIcon,
   states: defaultStates16,
@@ -1921,7 +2011,7 @@ import { ListIcon } from "@webstudio-is/icons/svg";
 import {
   defaultStates as defaultStates17
 } from "@webstudio-is/react-sdk";
-import { ol, ul } from "@webstudio-is/react-sdk/css-normalize";
+import { ol, ul } from "@webstudio-is/sdk/normalize.css";
 var presetStyle18 = {
   ol: [
     ...ol,
@@ -1954,10 +2044,9 @@ var presetStyle18 = {
     }
   ]
 };
-var meta22 = {
+var meta23 = {
   category: "general",
   type: "container",
-  label: "List",
   description: "Groups content, like links in a menu or steps in a recipe.",
   icon: ListIcon,
   states: defaultStates17,
@@ -2011,15 +2100,14 @@ import { ListItemIcon } from "@webstudio-is/icons/svg";
 import {
   defaultStates as defaultStates18
 } from "@webstudio-is/react-sdk";
-import { li } from "@webstudio-is/react-sdk/css-normalize";
+import { li } from "@webstudio-is/sdk/normalize.css";
 var presetStyle19 = {
   li
 };
-var meta23 = {
+var meta24 = {
   category: "general",
   type: "container",
   requiredAncestors: ["List"],
-  label: "List Item",
   description: "Adds a new item to an existing list.",
   icon: ListItemIcon,
   states: defaultStates18,
@@ -2045,7 +2133,7 @@ import { DashIcon } from "@webstudio-is/icons/svg";
 import {
   defaultStates as defaultStates19
 } from "@webstudio-is/react-sdk";
-import { hr } from "@webstudio-is/react-sdk/css-normalize";
+import { hr } from "@webstudio-is/sdk/normalize.css";
 var presetStyle20 = {
   hr: [
     ...hr,
@@ -2075,10 +2163,9 @@ var presetStyle20 = {
     }
   ]
 };
-var meta24 = {
+var meta25 = {
   category: "general",
   type: "embed",
-  label: "Separator",
   description: "Used to visually divide sections of content, helping to improve readability and organization within a webpage.",
   icon: DashIcon,
   states: defaultStates19,
@@ -2091,10 +2178,10 @@ import { CodeTextIcon } from "@webstudio-is/icons/svg";
 import {
   defaultStates as defaultStates20
 } from "@webstudio-is/react-sdk";
-import { code } from "@webstudio-is/react-sdk/css-normalize";
+import { code } from "@webstudio-is/sdk/normalize.css";
 
 // src/__generated__/code-text.props.ts
-var props4 = {
+var props5 = {
   about: { required: false, control: "text", type: "string" },
   accessKey: {
     required: false,
@@ -2627,10 +2714,9 @@ var presetStyle21 = {
     }
   ]
 };
-var meta25 = {
+var meta26 = {
   category: "general",
   type: "embed",
-  label: "Code Text",
   description: "Use this component when you want to display code as text on the page.",
   icon: CodeTextIcon,
   invalidAncestors: ["CodeText"],
@@ -2638,9 +2724,9 @@ var meta25 = {
   presetStyle: presetStyle21,
   order: 9
 };
-var propsMeta4 = {
+var propsMeta5 = {
   props: {
-    ...props4,
+    ...props5,
     code: {
       required: true,
       control: "codetext",
@@ -2655,10 +2741,10 @@ import { LabelIcon } from "@webstudio-is/icons/svg";
 import {
   defaultStates as defaultStates21
 } from "@webstudio-is/react-sdk";
-import { label } from "@webstudio-is/react-sdk/css-normalize";
+import { label } from "@webstudio-is/sdk/normalize.css";
 
 // src/__generated__/label.props.ts
-var props5 = {
+var props6 = {
   about: { required: false, control: "text", type: "string" },
   accessKey: {
     required: false,
@@ -3179,7 +3265,7 @@ var presetStyle22 = {
     { property: "display", value: { type: "keyword", value: "block" } }
   ]
 };
-var meta26 = {
+var meta27 = {
   category: "forms",
   invalidAncestors: ["Button", "Label"],
   type: "container",
@@ -3196,11 +3282,11 @@ var meta26 = {
     }
   ]
 };
-var propsMeta5 = {
+var propsMeta6 = {
   props: {
-    ...props5,
+    ...props6,
     htmlFor: {
-      ...props5.htmlFor,
+      ...props6.htmlFor,
       label: "For"
     }
   },
@@ -3212,7 +3298,7 @@ import { FormTextAreaIcon } from "@webstudio-is/icons/svg";
 import {
   defaultStates as defaultStates22
 } from "@webstudio-is/react-sdk";
-import { textarea } from "@webstudio-is/react-sdk/css-normalize";
+import { textarea } from "@webstudio-is/sdk/normalize.css";
 var presetStyle23 = {
   textarea: [
     ...textarea,
@@ -3224,7 +3310,7 @@ var presetStyle23 = {
     }
   ]
 };
-var meta27 = {
+var meta28 = {
   category: "forms",
   type: "control",
   label: "Text Area",
@@ -3253,7 +3339,7 @@ import { RadioCheckedIcon } from "@webstudio-is/icons/svg";
 import {
   defaultStates as defaultStates23
 } from "@webstudio-is/react-sdk";
-import { radio } from "@webstudio-is/react-sdk/css-normalize";
+import { radio } from "@webstudio-is/sdk/normalize.css";
 var presetStyle24 = {
   input: [
     ...radio,
@@ -3263,7 +3349,7 @@ var presetStyle24 = {
     }
   ]
 };
-var meta28 = {
+var meta29 = {
   category: "forms",
   invalidAncestors: ["Button", "Link"],
   type: "control",
@@ -3307,7 +3393,7 @@ import { CheckboxCheckedIcon } from "@webstudio-is/icons/svg";
 import {
   defaultStates as defaultStates24
 } from "@webstudio-is/react-sdk";
-import { checkbox } from "@webstudio-is/react-sdk/css-normalize";
+import { checkbox } from "@webstudio-is/sdk/normalize.css";
 var presetStyle25 = {
   input: [
     ...checkbox,
@@ -3317,11 +3403,10 @@ var presetStyle25 = {
     }
   ]
 };
-var meta29 = {
+var meta30 = {
   category: "forms",
   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.",
   icon: CheckboxCheckedIcon,
   presetStyle: presetStyle25,
@@ -3360,14 +3445,13 @@ import { PlayIcon, SpinnerIcon, VimeoIcon } from "@webstudio-is/icons/svg";
 import {
   defaultStates as defaultStates25
 } from "@webstudio-is/react-sdk";
-import { div as div3 } from "@webstudio-is/react-sdk/css-normalize";
+import { div as div3 } from "@webstudio-is/sdk/normalize.css";
 var presetStyle26 = {
   div: div3
 };
-var meta30 = {
+var meta31 = {
   category: "media",
   type: "container",
-  label: "Vimeo",
   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: VimeoIcon,
@@ -3666,7 +3750,7 @@ var meta30 = {
 import "@webstudio-is/react-sdk";
 
 // src/__generated__/vimeo-preview-image.props.ts
-var props6 = {
+var props7 = {
   about: { required: false, control: "text", type: "string" },
   accessKey: {
     required: false,
@@ -4247,15 +4331,15 @@ var props6 = {
 };
 
 // src/vimeo-preview-image.ws.ts
-var meta31 = {
-  ...meta20,
+var meta32 = {
+  ...meta21,
   category: "hidden",
   label: "Preview Image",
   requiredAncestors: ["Vimeo"]
 };
-var propsMeta6 = {
-  props: { ...props6, ...propsOverrides },
-  initialProps: propsMeta3.initialProps
+var propsMeta7 = {
+  props: { ...props7, ...propsOverrides },
+  initialProps: propsMeta4.initialProps
 };
 
 // src/vimeo-play-button.ws.ts
@@ -4263,11 +4347,11 @@ import {
   defaultStates as defaultStates26
 } from "@webstudio-is/react-sdk";
 import { ButtonElementIcon as ButtonElementIcon2 } from "@webstudio-is/icons/svg";
-import { button as button2 } from "@webstudio-is/react-sdk/css-normalize";
+import { button as button2 } from "@webstudio-is/sdk/normalize.css";
 var presetStyle27 = {
   button: button2
 };
-var meta32 = {
+var meta33 = {
   category: "hidden",
   type: "container",
   invalidAncestors: ["Button"],
@@ -4282,12 +4366,12 @@ var meta32 = {
 import {
   defaultStates as defaultStates27
 } from "@webstudio-is/react-sdk";
-import { div as div4 } from "@webstudio-is/react-sdk/css-normalize";
+import { div as div4 } from "@webstudio-is/sdk/normalize.css";
 import { BoxIcon as BoxIcon2 } from "@webstudio-is/icons/svg";
 var presetStyle28 = {
   div: div4
 };
-var meta33 = {
+var meta34 = {
   type: "container",
   icon: BoxIcon2,
   states: defaultStates27,
@@ -4300,13 +4384,13 @@ var meta33 = {
 // src/xml-node.ws.ts
 import { XmlIcon } from "@webstudio-is/icons/svg";
 import "@webstudio-is/react-sdk";
-var meta34 = {
+var meta35 = {
   category: "xml",
   order: 6,
   type: "container",
   icon: XmlIcon,
   stylable: false,
-  description: "Xml Node"
+  description: "XML Node"
 };
 
 // src/time.ws.ts
@@ -4314,18 +4398,18 @@ import { CalendarIcon } from "@webstudio-is/icons/svg";
 import {
   defaultStates as defaultStates28
 } from "@webstudio-is/react-sdk";
-import { time } from "@webstudio-is/react-sdk/css-normalize";
+import { time } from "@webstudio-is/sdk/normalize.css";
 var presetStyle29 = {
   time
 };
-var meta35 = {
+var meta36 = {
   category: "data",
   type: "container",
   description: "Converts machine-readable date and time to a human-readable format.",
   icon: CalendarIcon,
   states: defaultStates28,
   presetStyle: presetStyle29,
-  order: 4
+  order: 5
 };
 
 // src/select.ws.ts
@@ -4333,7 +4417,7 @@ import { SelectIcon } from "@webstudio-is/icons/svg";
 import {
   defaultStates as defaultStates29
 } from "@webstudio-is/react-sdk";
-import { select } from "@webstudio-is/react-sdk/css-normalize";
+import { select } from "@webstudio-is/sdk/normalize.css";
 var presetStyle30 = {
   select: [
     ...select,
@@ -4343,11 +4427,10 @@ var presetStyle30 = {
     }
   ]
 };
-var meta36 = {
+var meta37 = {
   category: "forms",
   invalidAncestors: ["Button", "Link"],
   type: "container",
-  label: "Select",
   description: "A drop-down menu for users to select a single option from a predefined list.",
   icon: SelectIcon,
   presetStyle: presetStyle30,
@@ -4429,12 +4512,11 @@ var presetStyle31 = {
     }
   ]
 };
-var meta37 = {
+var meta38 = {
   category: "hidden",
   // @todo: requiredAncestors should be ["Select", "Optgroup", "Datalist"] but that gives unreadable error when adding Select onto Canvas
   requiredAncestors: ["Select"],
   type: "control",
-  label: "Option",
   description: "An item within a drop-down menu that users can select as their chosen value.",
   icon: ItemIcon,
   presetStyle: presetStyle31,
@@ -4450,41 +4532,43 @@ var meta37 = {
   ]
 };
 export {
-  meta21 as Blockquote,
-  meta5 as Body,
-  meta13 as Bold,
-  meta6 as Box,
-  meta17 as Button,
-  meta29 as Checkbox,
-  meta25 as CodeText,
-  meta4 as ContentEmbed,
-  meta19 as Form,
+  meta22 as Blockquote,
+  meta6 as Body,
+  meta14 as Bold,
+  meta7 as Box,
+  meta18 as Button,
+  meta30 as Checkbox,
+  meta26 as CodeText,
+  meta5 as ContentEmbed,
+  meta20 as Form,
   meta2 as Fragment,
-  meta8 as Heading,
+  meta9 as Heading,
   meta3 as HtmlEmbed,
-  meta20 as Image,
-  meta18 as Input,
-  meta14 as Italic,
-  meta26 as Label,
-  meta10 as Link,
-  meta22 as List,
-  meta23 as ListItem,
-  meta37 as Option,
-  meta9 as Paragraph,
-  meta28 as RadioButton,
-  meta11 as RichTextLink,
-  meta36 as Select,
-  meta24 as Separator,
+  meta21 as Image,
+  meta19 as Input,
+  meta15 as Italic,
+  meta27 as Label,
+  meta11 as Link,
+  meta23 as List,
+  meta24 as ListItem,
+  meta4 as MarkdownEmbed,
+  meta38 as Option,
+  meta10 as Paragraph,
+  meta29 as RadioButton,
+  meta20 as RemixForm,
+  meta12 as RichTextLink,
+  meta37 as Select,
+  meta25 as Separator,
   meta as Slot,
-  meta12 as Span,
-  meta16 as Subscript,
-  meta15 as Superscript,
-  meta7 as Text,
-  meta27 as Textarea,
-  meta35 as Time,
-  meta30 as Vimeo,
-  meta32 as VimeoPlayButton,
-  meta31 as VimeoPreviewImage,
-  meta33 as VimeoSpinner,
-  meta34 as XmlNode
+  meta13 as Span,
+  meta17 as Subscript,
+  meta16 as Superscript,
+  meta8 as Text,
+  meta28 as Textarea,
+  meta36 as Time,
+  meta31 as Vimeo,
+  meta33 as VimeoPlayButton,
+  meta32 as VimeoPreviewImage,
+  meta34 as VimeoSpinner,
+  meta35 as XmlNode
 };