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

package/lib/props.js

@@ -40,21 +40,141 @@ var propsMeta3 = {
     code: {
       required: true,
       control: "code",
+      language: "html",
       type: "string"
     }
   },
   initialProps: ["className", "clientOnly", "executeScriptOnCanvas"]
 };
 
+// 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";
+
+// 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 meta = {
+  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 propsMeta4 = {
+  props: {
+    ...props2,
+    code: {
+      required: true,
+      control: "code",
+      language: "markdown",
+      type: "string"
+    }
+  },
+  initialProps: ["className"]
+};
+
 // src/body.ws.ts
 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";
 
 // src/__generated__/body.props.ts
-var props2 = {
+var props3 = {
   about: { required: false, control: "text", type: "string" },
   accessKey: {
     required: false,
@@ -570,8 +690,8 @@ var presetStyle = {
     }
   ]
 };
-var propsMeta4 = {
-  props: props2,
+var propsMeta5 = {
+  props: props3,
   initialProps: ["id", "className"]
 };
 
@@ -591,10 +711,10 @@ import {
   main,
   nav,
   section
-} from "@webstudio-is/react-sdk/css-normalize";
+} from "@webstudio-is/sdk/normalize.css";
 
 // src/__generated__/box.props.ts
-var props3 = {
+var props4 = {
   about: { required: false, control: "text", type: "string" },
   accessKey: {
     required: false,
@@ -1116,8 +1236,8 @@ var props3 = {
 };
 
 // src/box.ws.ts
-var propsMeta5 = {
-  props: props3,
+var propsMeta6 = {
+  props: props4,
   initialProps: ["id", "className", "tag"]
 };
 
@@ -1126,10 +1246,10 @@ 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";
 
 // src/__generated__/text.props.ts
-var props4 = {
+var props5 = {
   about: { required: false, control: "text", type: "string" },
   accessKey: {
     required: false,
@@ -1649,8 +1769,8 @@ var presetStyle2 = {
     }
   ]
 };
-var propsMeta6 = {
-  props: props4,
+var propsMeta7 = {
+  props: props5,
   initialProps: ["id", "className", "tag"]
 };
 
@@ -1659,10 +1779,10 @@ 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";
 
 // src/__generated__/heading.props.ts
-var props5 = {
+var props6 = {
   about: { required: false, control: "text", type: "string" },
   accessKey: {
     required: false,
@@ -2173,8 +2293,8 @@ var props5 = {
 };
 
 // src/heading.ws.ts
-var propsMeta7 = {
-  props: props5,
+var propsMeta8 = {
+  props: props6,
   initialProps: ["id", "className", "tag"]
 };
 
@@ -2183,10 +2303,10 @@ 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";
 
 // src/__generated__/paragraph.props.ts
-var props6 = {
+var props7 = {
   about: { required: false, control: "text", type: "string" },
   accessKey: {
     required: false,
@@ -2689,8 +2809,8 @@ var props6 = {
 };
 
 // src/paragraph.ws.ts
-var propsMeta8 = {
-  props: props6,
+var propsMeta9 = {
+  props: props7,
   initialProps: ["id", "className"]
 };
 
@@ -2699,10 +2819,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 props7 = {
+var props8 = {
   about: { required: false, control: "text", type: "string" },
   accessKey: {
     required: false,
@@ -3082,6 +3202,12 @@ var props7 = {
     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",
@@ -3272,10 +3398,9 @@ var presetStyle3 = {
     }
   ]
 };
-var meta = {
+var meta2 = {
   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"],
@@ -3307,36 +3432,36 @@ var meta = {
     }
   ]
 };
-var propsMeta9 = {
+var propsMeta10 = {
   props: {
-    ...props7,
+    ...props8,
     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 meta2 = {
-  ...meta,
+var meta3 = {
+  ...meta2,
   category: "hidden",
   type: "rich-text-child",
   template: []
 };
-var propsMeta10 = propsMeta9;
+var propsMeta11 = propsMeta10;
 
 // src/span.ws.ts
 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";
 
 // src/__generated__/span.props.ts
-var props8 = {
+var props9 = {
   about: { required: false, control: "text", type: "string" },
   accessKey: {
     required: false,
@@ -3839,8 +3964,8 @@ var props8 = {
 };
 
 // src/span.ws.ts
-var propsMeta11 = {
-  props: props8,
+var propsMeta12 = {
+  props: props9,
   initialProps: ["id", "className"]
 };
 
@@ -3849,10 +3974,10 @@ 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";
 
 // src/__generated__/bold.props.ts
-var props9 = {
+var props10 = {
   about: { required: false, control: "text", type: "string" },
   accessKey: {
     required: false,
@@ -4355,8 +4480,8 @@ var props9 = {
 };
 
 // src/bold.ws.ts
-var propsMeta12 = {
-  props: props9,
+var propsMeta13 = {
+  props: props10,
   initialProps: ["id", "className"]
 };
 
@@ -4365,10 +4490,10 @@ 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";
 
 // src/__generated__/italic.props.ts
-var props10 = {
+var props11 = {
   about: { required: false, control: "text", type: "string" },
   accessKey: {
     required: false,
@@ -4880,8 +5005,8 @@ var presetStyle4 = {
     }
   ]
 };
-var propsMeta13 = {
-  props: props10,
+var propsMeta14 = {
+  props: props11,
   initialProps: ["id", "className"]
 };
 
@@ -4890,10 +5015,10 @@ 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";
 
 // src/__generated__/superscript.props.ts
-var props11 = {
+var props12 = {
   about: { required: false, control: "text", type: "string" },
   accessKey: {
     required: false,
@@ -5396,8 +5521,8 @@ var props11 = {
 };
 
 // src/superscript.ws.ts
-var propsMeta14 = {
-  props: props11,
+var propsMeta15 = {
+  props: props12,
   initialProps: ["id", "className"]
 };
 
@@ -5406,10 +5531,10 @@ 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";
 
 // src/__generated__/subscript.props.ts
-var props12 = {
+var props13 = {
   about: { required: false, control: "text", type: "string" },
   accessKey: {
     required: false,
@@ -5912,8 +6037,8 @@ var props12 = {
 };
 
 // src/subscript.ws.ts
-var propsMeta15 = {
-  props: props12,
+var propsMeta16 = {
+  props: props13,
   initialProps: ["id", "className"]
 };
 
@@ -5922,10 +6047,10 @@ 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";
 
 // src/__generated__/button.props.ts
-var props13 = {
+var props14 = {
   about: { required: false, control: "text", type: "string" },
   accessKey: {
     required: false,
@@ -6493,11 +6618,10 @@ var props13 = {
 var presetStyle5 = {
   button
 };
-var meta3 = {
+var meta4 = {
   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: presetStyle5,
@@ -6521,8 +6645,8 @@ var meta3 = {
     }
   ]
 };
-var propsMeta16 = {
-  props: props13,
+var propsMeta17 = {
+  props: props14,
   initialProps: ["id", "className", "type", "aria-label"]
 };
 
@@ -6531,10 +6655,10 @@ 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";
 
 // src/__generated__/input.props.ts
-var props14 = {
+var props15 = {
   about: { required: false, control: "text", type: "string" },
   accept: {
     required: false,
@@ -7234,7 +7358,7 @@ var presetStyle6 = {
     }
   ]
 };
-var meta4 = {
+var meta5 = {
   category: "forms",
   invalidAncestors: ["Button", "Link"],
   type: "control",
@@ -7257,8 +7381,8 @@ var meta4 = {
     //{ selector: ":read-write", label: "Read Write" },
   ]
 };
-var propsMeta17 = {
-  props: props14,
+var propsMeta18 = {
+  props: props15,
   initialProps: [
     "id",
     "className",
@@ -7275,10 +7399,10 @@ 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";
 
 // src/__generated__/form.props.ts
-var props15 = {
+var props16 = {
   about: { required: false, control: "text", type: "string" },
   acceptCharset: {
     required: false,
@@ -7835,8 +7959,8 @@ var presetStyle7 = {
     { property: "minHeight", value: { type: "unit", unit: "px", value: 20 } }
   ]
 };
-var propsMeta18 = {
-  props: props15,
+var propsMeta19 = {
+  props: props16,
   initialProps: ["id", "className", "action"]
 };
 
@@ -7845,10 +7969,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 props16 = {
+var props17 = {
   about: { required: false, control: "text", type: "string" },
   accessKey: {
     required: false,
@@ -8458,10 +8582,9 @@ var presetStyle8 = {
     }
   ]
 };
-var meta5 = {
+var meta6 = {
   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,
@@ -8476,11 +8599,11 @@ var propsOverrides = {
     required: false
   }
 };
-var optimize = props16.optimize;
+var optimize = props17.optimize;
 optimize.description = "Optimize the image for enhanced performance.";
-var propsMeta19 = {
+var propsMeta20 = {
   props: {
-    ...props16,
+    ...props17,
     ...propsOverrides,
     optimize
   },
@@ -8503,7 +8626,7 @@ import {
 } from "@webstudio-is/react-sdk";
 
 // src/__generated__/blockquote.props.ts
-var props17 = {
+var props18 = {
   about: { required: false, control: "text", type: "string" },
   accessKey: {
     required: false,
@@ -9012,8 +9135,8 @@ var props17 = {
 };
 
 // src/blockquote.ws.ts
-var propsMeta20 = {
-  props: props17,
+var propsMeta21 = {
+  props: props18,
   initialProps: ["id", "className", "cite"]
 };
 
@@ -9022,10 +9145,10 @@ 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";
 
 // src/__generated__/list.props.ts
-var props18 = {
+var props19 = {
   about: { required: false, control: "text", type: "string" },
   accessKey: {
     required: false,
@@ -9586,8 +9709,8 @@ var presetStyle9 = {
     }
   ]
 };
-var propsMeta21 = {
-  props: props18,
+var propsMeta22 = {
+  props: props19,
   initialProps: ["id", "className", "ordered", "start", "reversed"]
 };
 
@@ -9596,10 +9719,10 @@ 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";
 
 // src/__generated__/list-item.props.ts
-var props19 = {
+var props20 = {
   about: { required: false, control: "text", type: "string" },
   accessKey: {
     required: false,
@@ -10108,8 +10231,8 @@ var props19 = {
 };
 
 // src/list-item.ws.ts
-var propsMeta22 = {
-  props: props19,
+var propsMeta23 = {
+  props: props20,
   initialProps: ["id", "className"]
 };
 
@@ -10118,10 +10241,10 @@ 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";
 
 // src/__generated__/separator.props.ts
-var props20 = {
+var props21 = {
   about: { required: false, control: "text", type: "string" },
   accessKey: {
     required: false,
@@ -10653,8 +10776,8 @@ var presetStyle10 = {
     }
   ]
 };
-var propsMeta23 = {
-  props: props20,
+var propsMeta24 = {
+  props: props21,
   initialProps: ["id", "className"]
 };
 
@@ -10663,10 +10786,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 props21 = {
+var props22 = {
   about: { required: false, control: "text", type: "string" },
   accessKey: {
     required: false,
@@ -11199,9 +11322,9 @@ var presetStyle11 = {
     }
   ]
 };
-var propsMeta24 = {
+var propsMeta25 = {
   props: {
-    ...props21,
+    ...props22,
     code: {
       required: true,
       control: "codetext",
@@ -11216,10 +11339,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 props22 = {
+var props23 = {
   about: { required: false, control: "text", type: "string" },
   accessKey: {
     required: false,
@@ -11740,11 +11863,11 @@ var presetStyle12 = {
     { property: "display", value: { type: "keyword", value: "block" } }
   ]
 };
-var propsMeta25 = {
+var propsMeta26 = {
   props: {
-    ...props22,
+    ...props23,
     htmlFor: {
-      ...props22.htmlFor,
+      ...props23.htmlFor,
       label: "For"
     }
   },
@@ -11756,10 +11879,10 @@ 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";
 
 // src/__generated__/textarea.props.ts
-var props23 = {
+var props24 = {
   about: { required: false, control: "text", type: "string" },
   accessKey: {
     required: false,
@@ -12352,7 +12475,7 @@ var presetStyle13 = {
     }
   ]
 };
-var meta6 = {
+var meta7 = {
   category: "forms",
   type: "control",
   label: "Text Area",
@@ -12375,8 +12498,8 @@ var meta6 = {
     //{ selector: ":read-write", label: "Read Write" },
   ]
 };
-var propsMeta26 = {
-  props: props23,
+var propsMeta27 = {
+  props: props24,
   initialProps: [
     "id",
     "className",
@@ -12392,10 +12515,10 @@ 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";
 
 // src/__generated__/radio-button.props.ts
-var props24 = {
+var props25 = {
   about: { required: false, control: "text", type: "string" },
   accept: {
     required: false,
@@ -13071,7 +13194,7 @@ var presetStyle14 = {
     }
   ]
 };
-var meta7 = {
+var meta8 = {
   category: "forms",
   invalidAncestors: ["Button", "Link"],
   type: "control",
@@ -13109,8 +13232,8 @@ var meta7 = {
     }
   ]
 };
-var propsMeta27 = {
-  props: props24,
+var propsMeta28 = {
+  props: props25,
   initialProps: [
     "id",
     "className",
@@ -13127,10 +13250,10 @@ 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";
 
 // src/__generated__/checkbox.props.ts
-var props25 = {
+var props26 = {
   about: { required: false, control: "text", type: "string" },
   accept: {
     required: false,
@@ -13806,11 +13929,10 @@ var presetStyle15 = {
     }
   ]
 };
-var meta8 = {
+var meta9 = {
   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: presetStyle15,
@@ -13843,8 +13965,8 @@ var meta8 = {
     }
   ]
 };
-var propsMeta28 = {
-  props: props25,
+var propsMeta29 = {
+  props: props26,
   initialProps: [
     "id",
     "className",
@@ -13861,10 +13983,10 @@ 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";
 
 // src/__generated__/vimeo.props.ts
-var props26 = {
+var props27 = {
   about: { required: false, control: "text", type: "string" },
   accessKey: {
     required: false,
@@ -14550,8 +14672,8 @@ var initialProps = [
   "showControls",
   "controlsColor"
 ];
-var propsMeta29 = {
-  props: props26,
+var propsMeta30 = {
+  props: props27,
   initialProps
 };
 
@@ -14559,7 +14681,7 @@ var propsMeta29 = {
 import "@webstudio-is/react-sdk";
 
 // src/__generated__/vimeo-preview-image.props.ts
-var props27 = {
+var props28 = {
   about: { required: false, control: "text", type: "string" },
   accessKey: {
     required: false,
@@ -15140,15 +15262,15 @@ var props27 = {
 };
 
 // src/vimeo-preview-image.ws.ts
-var meta9 = {
-  ...meta5,
+var meta10 = {
+  ...meta6,
   category: "hidden",
   label: "Preview Image",
   requiredAncestors: ["Vimeo"]
 };
-var propsMeta30 = {
-  props: { ...props27, ...propsOverrides },
-  initialProps: propsMeta19.initialProps
+var propsMeta31 = {
+  props: { ...props28, ...propsOverrides },
+  initialProps: propsMeta20.initialProps
 };
 
 // src/vimeo-play-button.ws.ts
@@ -15157,7 +15279,7 @@ import {
 } from "@webstudio-is/react-sdk";
 
 // src/__generated__/vimeo-play-button.props.ts
-var props28 = {
+var props29 = {
   about: { required: false, control: "text", type: "string" },
   accessKey: {
     required: false,
@@ -15722,9 +15844,9 @@ var props28 = {
 
 // src/vimeo-play-button.ws.ts
 import { ButtonElementIcon as ButtonElementIcon2 } from "@webstudio-is/icons/svg";
-import { button as button2 } from "@webstudio-is/react-sdk/css-normalize";
-var propsMeta31 = {
-  props: props28,
+import { button as button2 } from "@webstudio-is/sdk/normalize.css";
+var propsMeta32 = {
+  props: props29,
   initialProps: ["id", "className"]
 };
 
@@ -15734,7 +15856,7 @@ import {
 } from "@webstudio-is/react-sdk";
 
 // src/__generated__/vimeo-spinner.props.ts
-var props29 = {
+var props30 = {
   about: { required: false, control: "text", type: "string" },
   accessKey: {
     required: false,
@@ -16237,10 +16359,10 @@ var props29 = {
 };
 
 // src/vimeo-spinner.ws.ts
-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 propsMeta32 = {
-  props: props29,
+var propsMeta33 = {
+  props: props30,
   initialProps: ["id", "className"]
 };
 
@@ -16249,14 +16371,14 @@ import { XmlIcon } from "@webstudio-is/icons/svg";
 import "@webstudio-is/react-sdk";
 
 // src/__generated__/xml-node.props.ts
-var props30 = {
+var props31 = {
   tag: { required: false, control: "text", type: "string", defaultValue: "" },
   xmlns: { required: false, control: "text", type: "string" }
 };
 
 // src/xml-node.ws.ts
-var propsMeta33 = {
-  props: props30,
+var propsMeta34 = {
+  props: props31,
   initialProps: ["tag"]
 };
 
@@ -16265,10 +16387,10 @@ 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";
 
 // src/__generated__/time.props.ts
-var props31 = {
+var props32 = {
   country: {
     required: false,
     control: "select",
@@ -16579,8 +16701,8 @@ var props31 = {
 };
 
 // src/time.ws.ts
-var propsMeta34 = {
-  props: props31,
+var propsMeta35 = {
+  props: props32,
   initialProps: ["datetime", "language", "country", "dateStyle", "timeStyle"]
 };
 
@@ -16589,10 +16711,10 @@ 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";
 
 // src/__generated__/select.props.ts
-var props32 = {
+var props33 = {
   about: { required: false, control: "text", type: "string" },
   accessKey: {
     required: false,
@@ -17152,11 +17274,10 @@ var presetStyle16 = {
     }
   ]
 };
-var meta10 = {
+var meta11 = {
   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: presetStyle16,
@@ -17219,8 +17340,8 @@ var meta10 = {
     }
   ]
 };
-var propsMeta35 = {
-  props: props32,
+var propsMeta36 = {
+  props: props33,
   initialProps: [
     "id",
     "className",
@@ -17237,7 +17358,7 @@ import { ItemIcon } from "@webstudio-is/icons/svg";
 import "@webstudio-is/react-sdk";
 
 // src/__generated__/option.props.ts
-var props33 = {
+var props34 = {
   about: { required: false, control: "text", type: "string" },
   accessKey: {
     required: false,
@@ -17764,45 +17885,47 @@ var props33 = {
 };
 
 // src/option.ws.ts
-var propsMeta36 = {
-  props: props33,
+var propsMeta37 = {
+  props: props34,
   initialProps: ["label", "selected", "value", "label", "disabled"]
 };
 export {
-  propsMeta20 as Blockquote,
-  propsMeta4 as Body,
-  propsMeta12 as Bold,
-  propsMeta5 as Box,
-  propsMeta16 as Button,
-  propsMeta28 as Checkbox,
-  propsMeta24 as CodeText,
-  propsMeta18 as Form,
+  propsMeta21 as Blockquote,
+  propsMeta5 as Body,
+  propsMeta13 as Bold,
+  propsMeta6 as Box,
+  propsMeta17 as Button,
+  propsMeta29 as Checkbox,
+  propsMeta25 as CodeText,
+  propsMeta19 as Form,
   propsMeta2 as Fragment,
-  propsMeta7 as Heading,
+  propsMeta8 as Heading,
   propsMeta3 as HtmlEmbed,
-  propsMeta19 as Image,
-  propsMeta17 as Input,
-  propsMeta13 as Italic,
-  propsMeta25 as Label,
-  propsMeta9 as Link,
-  propsMeta21 as List,
-  propsMeta22 as ListItem,
-  propsMeta36 as Option,
-  propsMeta8 as Paragraph,
-  propsMeta27 as RadioButton,
-  propsMeta10 as RichTextLink,
-  propsMeta35 as Select,
-  propsMeta23 as Separator,
+  propsMeta20 as Image,
+  propsMeta18 as Input,
+  propsMeta14 as Italic,
+  propsMeta26 as Label,
+  propsMeta10 as Link,
+  propsMeta22 as List,
+  propsMeta23 as ListItem,
+  propsMeta4 as MarkdownEmbed,
+  propsMeta37 as Option,
+  propsMeta9 as Paragraph,
+  propsMeta28 as RadioButton,
+  propsMeta19 as RemixForm,
+  propsMeta11 as RichTextLink,
+  propsMeta36 as Select,
+  propsMeta24 as Separator,
   propsMeta as Slot,
-  propsMeta11 as Span,
-  propsMeta15 as Subscript,
-  propsMeta14 as Superscript,
-  propsMeta6 as Text,
-  propsMeta26 as Textarea,
-  propsMeta34 as Time,
-  propsMeta29 as Vimeo,
-  propsMeta31 as VimeoPlayButton,
-  propsMeta30 as VimeoPreviewImage,
-  propsMeta32 as VimeoSpinner,
-  propsMeta33 as XmlNode
+  propsMeta12 as Span,
+  propsMeta16 as Subscript,
+  propsMeta15 as Superscript,
+  propsMeta7 as Text,
+  propsMeta27 as Textarea,
+  propsMeta35 as Time,
+  propsMeta30 as Vimeo,
+  propsMeta32 as VimeoPlayButton,
+  propsMeta31 as VimeoPreviewImage,
+  propsMeta33 as VimeoSpinner,
+  propsMeta34 as XmlNode
 };