@webstudio-is/sdk-components-react 0.185.0 → 0.191.0

package/lib/metas.js

@@ -1,4575 +1,81 @@
-// src/slot.ws.ts
-import { SlotComponentIcon } from "@webstudio-is/icons/svg";
-var meta = {
-  category: "general",
-  type: "container",
-  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,
-  order: 6
-};
-
-// src/fragment.ws.ts
-var meta2 = {
-  type: "container",
-  icon: "",
-  stylable: false
-};
-
-// src/html-embed.ws.ts
-import { EmbedIcon } from "@webstudio-is/icons/svg";
-
-// src/__generated__/html-embed.props.ts
-var props = {
-  className: { required: false, control: "text", type: "string" },
-  clientOnly: { required: false, control: "boolean", type: "boolean" },
-  code: { required: true, control: "text", type: "string" },
-  executeScriptOnCanvas: {
-    required: false,
-    control: "boolean",
-    type: "boolean"
-  }
-};
-
-// src/html-embed.ws.ts
-var presetStyle = {
-  div: [
-    {
-      property: "display",
-      value: { type: "keyword", value: "contents" }
-    }
-  ]
-};
-var meta3 = {
-  category: "general",
-  type: "embed",
-  label: "HTML Embed",
-  description: "Used to add HTML code to the page, such as an SVG or script.",
-  icon: EmbedIcon,
-  presetStyle,
-  order: 8
-};
-var propsMeta = {
-  props: {
-    ...props,
-    clientOnly: {
-      ...props.clientOnly,
-      description: "Activate it for any scripts that can mutate the DOM or introduce interactivity. This only affects the published site."
-    },
-    executeScriptOnCanvas: {
-      ...props.executeScriptOnCanvas,
-      label: "Run scripts on canvas",
-      description: "Dangerously allow script execution on canvas without switching to preview mode. This only affects build mode, but may result in unwanted side effects inside builder!"
-    },
-    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 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>
-<h2>How to Use Content Embed</h2>
-<ul>
-  <li>Every element is shown in the Navigator.</li>
-  <li>Apply styles and Tokens to each element.</li>
-  <li>Adjustments to elements apply universally within this embed, ensuring consistency across your content.</li>
-</ul>
-<hr>
-<h2>This sample text contains all the elements that can be styled.</h2>
-<p>Any elements that were not used above are used below.</p>
-<h3>Heading 3</h3>
-<h4>Heading 4</h4>
-<h5>Heading 5</h5>
-<h6>Heading 6</h6>
-<p><a href="#">Links</a> connect your content to relevant resources.</p>
-<p><strong>Bold text</strong> makes your important points stand out.</p>
-<p><em>Italic text</em> is great for emphasizing terms.</p>
-<ol>
-  <li>First Step</li>
-  <li>Second Step</li>
-</ol>
-<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>
-`.trim();
-var descendant2 = (label2, tag) => {
-  return {
-    type: "instance",
-    component: descendantComponent2,
-    label: label2,
-    props: [{ type: "string", name: "selector", value: ` ${tag}` }],
-    children: []
-  };
-};
-var meta5 = {
-  category: "data",
-  type: "control",
-  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,
-  template: [
-    {
-      type: "instance",
-      component: "HtmlEmbed",
-      label: "Content Embed",
-      props: [
-        {
-          name: "code",
-          type: "string",
-          value: htmlSample
-        }
-      ],
-      children: [
-        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")
-      ]
-    }
-  ]
-};
-
-// src/body.ws.ts
-import { BodyIcon } from "@webstudio-is/icons/svg";
-import {
-  defaultStates
-} from "@webstudio-is/react-sdk";
-import { body } from "@webstudio-is/sdk/normalize.css";
-var presetStyle2 = {
-  body: [
-    ...body,
-    {
-      property: "WebkitFontSmoothing",
-      value: { type: "keyword", value: "antialiased" }
-    },
-    {
-      property: "MozOsxFontSmoothing",
-      value: { type: "keyword", value: "grayscale" }
-    }
-  ]
-};
-var meta6 = {
-  type: "container",
-  icon: BodyIcon,
-  states: defaultStates,
-  presetStyle: presetStyle2,
-  detachable: false
-};
-
-// src/box.ws.ts
-import { BoxIcon } from "@webstudio-is/icons/svg";
-import {
-  defaultStates as defaultStates2
-} from "@webstudio-is/react-sdk";
-import {
-  div,
-  address,
-  article,
-  aside,
-  figure,
-  footer,
-  header,
-  main,
-  nav,
-  section
-} from "@webstudio-is/sdk/normalize.css";
-var presetStyle3 = {
-  div,
-  address,
-  article,
-  aside,
-  figure,
-  footer,
-  header,
-  main,
-  nav,
-  section
-};
-var meta7 = {
-  category: "general",
-  type: "container",
-  description: "A container for content. By default this is a Div, but the tag can be changed in settings.",
-  icon: BoxIcon,
-  states: defaultStates2,
-  presetStyle: presetStyle3,
-  order: 0
-};
-
-// src/text.ws.ts
-import { TextIcon } from "@webstudio-is/icons/svg";
-import {
-  defaultStates as defaultStates3
-} from "@webstudio-is/react-sdk";
-import { div as div2 } from "@webstudio-is/sdk/normalize.css";
-var presetStyle4 = {
-  div: [
-    ...div2,
-    {
-      property: "minHeight",
-      value: { type: "unit", unit: "em", value: 1 }
-    }
-  ]
-};
-var meta8 = {
-  category: "text",
-  type: "container",
-  description: "A generic container for any text content that is not a heading or a link.",
-  icon: TextIcon,
-  states: defaultStates3,
-  presetStyle: presetStyle4,
-  order: 0,
-  template: [
-    {
-      type: "instance",
-      component: "Text",
-      children: [
-        {
-          type: "text",
-          value: "The text you can edit",
-          placeholder: true
-        }
-      ]
-    }
-  ]
-};
-
-// src/heading.ws.ts
-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/sdk/normalize.css";
-var presetStyle5 = {
-  h1,
-  h2,
-  h3,
-  h4,
-  h5,
-  h6
-};
-var meta9 = {
-  category: "text",
-  type: "container",
-  description: "Use HTML headings to structure and organize content. Use the Tag property in settings to change the heading level (h1-h6).",
-  icon: HeadingIcon,
-  invalidAncestors: ["Heading"],
-  states: defaultStates4,
-  presetStyle: presetStyle5,
-  order: 1,
-  template: [
-    {
-      type: "instance",
-      component: "Heading",
-      children: [
-        {
-          type: "text",
-          value: "Heading text you can edit",
-          placeholder: true
-        }
-      ]
-    }
-  ]
-};
-
-// src/paragraph.ws.ts
-import { TextAlignLeftIcon } from "@webstudio-is/icons/svg";
-import {
-  defaultStates as defaultStates5
-} from "@webstudio-is/react-sdk";
-import { p } from "@webstudio-is/sdk/normalize.css";
-var presetStyle6 = {
-  p
-};
-var meta10 = {
-  category: "text",
-  type: "container",
-  description: "A container for multi-line text.",
-  icon: TextAlignLeftIcon,
-  invalidAncestors: ["Paragraph"],
-  states: defaultStates5,
-  presetStyle: presetStyle6,
-  order: 2,
-  template: [
-    {
-      type: "instance",
-      component: "Paragraph",
-      children: [
-        {
-          type: "text",
-          value: "Paragraph text you can edit",
-          placeholder: true
-        }
-      ]
-    }
-  ]
-};
-
-// src/link.ws.ts
-import { LinkIcon } from "@webstudio-is/icons/svg";
-import {
-  defaultStates as defaultStates6
-} from "@webstudio-is/react-sdk";
-import { a } from "@webstudio-is/sdk/normalize.css";
-
-// src/__generated__/link.props.ts
-var props3 = {
-  about: { required: false, control: "text", type: "string" },
-  accessKey: {
-    required: false,
-    control: "text",
-    type: "string",
-    description: "Keyboard shortcut to activate or add focus to the element."
-  },
-  "aria-activedescendant": {
-    description: "Identifies the currently active element when DOM focus is on a composite widget, textbox, group, or application.",
-    required: false,
-    control: "text",
-    type: "string"
-  },
-  "aria-atomic": {
-    description: "Indicates whether assistive technologies will present all, or only parts of, the changed region based on the change notifications defined by the aria-relevant attribute.",
-    required: false,
-    control: "boolean",
-    type: "boolean"
-  },
-  "aria-autocomplete": {
-    description: "Indicates whether inputting text could trigger display of one or more predictions of the user's intended value for an input and specifies how predictions would be\npresented if they are made.",
-    required: false,
-    control: "select",
-    type: "string",
-    options: ["list", "none", "inline", "both"]
-  },
-  "aria-braillelabel": {
-    description: "Defines a string value that labels the current element, which is intended to be converted into Braille.",
-    required: false,
-    control: "text",
-    type: "string"
-  },
-  "aria-brailleroledescription": {
-    description: "Defines a human-readable, author-localized abbreviated description for the role of an element, which is intended to be converted into Braille.",
-    required: false,
-    control: "text",
-    type: "string"
-  },
-  "aria-busy": { required: false, control: "boolean", type: "boolean" },
-  "aria-checked": {
-    description: 'Indicates the current "checked" state of checkboxes, radio buttons, and other widgets.',
-    required: false,
-    control: "text",
-    type: "string"
-  },
-  "aria-colcount": {
-    description: "Defines the total number of columns in a table, grid, or treegrid.",
-    required: false,
-    control: "number",
-    type: "number"
-  },
-  "aria-colindex": {
-    description: "Defines an element's column index or position with respect to the total number of columns within a table, grid, or treegrid.",
-    required: false,
-    control: "number",
-    type: "number"
-  },
-  "aria-colindextext": {
-    description: "Defines a human readable text alternative of aria-colindex.",
-    required: false,
-    control: "text",
-    type: "string"
-  },
-  "aria-colspan": {
-    description: "Defines the number of columns spanned by a cell or gridcell within a table, grid, or treegrid.",
-    required: false,
-    control: "number",
-    type: "number"
-  },
-  "aria-controls": {
-    description: "Identifies the element (or elements) whose contents or presence are controlled by the current element.",
-    required: false,
-    control: "text",
-    type: "string"
-  },
-  "aria-current": {
-    description: "Indicates the element that represents the current item within a container or set of related elements.",
-    required: false,
-    control: "text",
-    type: "string"
-  },
-  "aria-describedby": {
-    description: "Identifies the element (or elements) that describes the object.",
-    required: false,
-    control: "text",
-    type: "string"
-  },
-  "aria-description": {
-    description: "Defines a string value that describes or annotates the current element.",
-    required: false,
-    control: "text",
-    type: "string"
-  },
-  "aria-details": {
-    description: "Identifies the element that provides a detailed, extended description for the object.",
-    required: false,
-    control: "text",
-    type: "string"
-  },
-  "aria-disabled": {
-    description: "Indicates that the element is perceivable but disabled, so it is not editable or otherwise operable.",
-    required: false,
-    control: "boolean",
-    type: "boolean"
-  },
-  "aria-dropeffect": {
-    description: "Indicates what functions can be performed when a dragged object is released on the drop target.",
-    required: false,
-    control: "select",
-    type: "string",
-    options: ["link", "none", "copy", "execute", "move", "popup"]
-  },
-  "aria-errormessage": {
-    description: "Identifies the element that provides an error message for the object.",
-    required: false,
-    control: "text",
-    type: "string"
-  },
-  "aria-expanded": {
-    description: "Indicates whether the element, or another grouping element it controls, is currently expanded or collapsed.",
-    required: false,
-    control: "boolean",
-    type: "boolean"
-  },
-  "aria-flowto": {
-    description: "Identifies the next element (or elements) in an alternate reading order of content which, at the user's discretion,\nallows assistive technology to override the general default of reading in document source order.",
-    required: false,
-    control: "text",
-    type: "string"
-  },
-  "aria-grabbed": {
-    description: `Indicates an element's "grabbed" state in a drag-and-drop operation.`,
-    required: false,
-    control: "boolean",
-    type: "boolean"
-  },
-  "aria-haspopup": {
-    description: "Indicates the availability and type of interactive popup element, such as menu or dialog, that can be triggered by an element.",
-    required: false,
-    control: "text",
-    type: "string"
-  },
-  "aria-hidden": {
-    description: "Indicates whether the element is exposed to an accessibility API.",
-    required: false,
-    control: "boolean",
-    type: "boolean"
-  },
-  "aria-invalid": {
-    description: "Indicates the entered value does not conform to the format expected by the application.",
-    required: false,
-    control: "text",
-    type: "string"
-  },
-  "aria-keyshortcuts": {
-    description: "Indicates keyboard shortcuts that an author has implemented to activate or give focus to an element.",
-    required: false,
-    control: "text",
-    type: "string"
-  },
-  "aria-label": {
-    description: "Provides the accessible name that describes an interactive element if no other accessible name exists, for example in a button that contains an image with no text.",
-    required: false,
-    control: "text",
-    type: "string"
-  },
-  "aria-labelledby": {
-    description: "Identifies the element (or elements) that labels the current element.",
-    required: false,
-    control: "text",
-    type: "string"
-  },
-  "aria-level": {
-    description: "Defines the hierarchical level of an element within a structure.",
-    required: false,
-    control: "number",
-    type: "number"
-  },
-  "aria-live": {
-    description: "Indicates that an element will be updated, and describes the types of updates the user agents, assistive technologies, and user can expect from the live region.",
-    required: false,
-    control: "radio",
-    type: "string",
-    options: ["off", "assertive", "polite"]
-  },
-  "aria-modal": {
-    description: "Indicates whether an element is modal when displayed.",
-    required: false,
-    control: "boolean",
-    type: "boolean"
-  },
-  "aria-multiline": {
-    description: "Indicates whether a text box accepts multiple lines of input or only a single line.",
-    required: false,
-    control: "boolean",
-    type: "boolean"
-  },
-  "aria-multiselectable": {
-    description: "Indicates that the user may select more than one item from the current selectable descendants.",
-    required: false,
-    control: "boolean",
-    type: "boolean"
-  },
-  "aria-orientation": {
-    description: "Indicates whether the element's orientation is horizontal, vertical, or unknown/ambiguous.",
-    required: false,
-    control: "radio",
-    type: "string",
-    options: ["horizontal", "vertical"]
-  },
-  "aria-owns": {
-    description: "Identifies an element (or elements) in order to define a visual, functional, or contextual parent/child relationship\nbetween DOM elements where the DOM hierarchy cannot be used to represent the relationship.",
-    required: false,
-    control: "text",
-    type: "string"
-  },
-  "aria-placeholder": {
-    description: "Defines a short hint (a word or short phrase) intended to aid the user with data entry when the control has no value.\nA hint could be a sample value or a brief description of the expected format.",
-    required: false,
-    control: "text",
-    type: "string"
-  },
-  "aria-posinset": {
-    description: "Defines an element's number or position in the current set of listitems or treeitems. Not required if all elements in the set are present in the DOM.",
-    required: false,
-    control: "number",
-    type: "number"
-  },
-  "aria-pressed": {
-    description: 'Indicates the current "pressed" state of toggle buttons.',
-    required: false,
-    control: "text",
-    type: "string"
-  },
-  "aria-readonly": {
-    description: "Indicates that the element is not editable, but is otherwise operable.",
-    required: false,
-    control: "boolean",
-    type: "boolean"
-  },
-  "aria-relevant": {
-    description: "Indicates what notifications the user agent will trigger when the accessibility tree within a live region is modified.",
-    required: false,
-    control: "select",
-    type: "string",
-    options: [
-      "text",
-      "additions",
-      "additions removals",
-      "additions text",
-      "all",
-      "removals",
-      "removals additions",
-      "removals text",
-      "text additions",
-      "text removals"
-    ]
-  },
-  "aria-required": {
-    description: "Indicates that user input is required on the element before a form may be submitted.",
-    required: false,
-    control: "boolean",
-    type: "boolean"
-  },
-  "aria-roledescription": {
-    description: "Defines a human-readable, author-localized description for the role of an element.",
-    required: false,
-    control: "text",
-    type: "string"
-  },
-  "aria-rowcount": {
-    description: "Defines the total number of rows in a table, grid, or treegrid.",
-    required: false,
-    control: "number",
-    type: "number"
-  },
-  "aria-rowindex": {
-    description: "Defines an element's row index or position with respect to the total number of rows within a table, grid, or treegrid.",
-    required: false,
-    control: "number",
-    type: "number"
-  },
-  "aria-rowindextext": {
-    description: "Defines a human readable text alternative of aria-rowindex.",
-    required: false,
-    control: "text",
-    type: "string"
-  },
-  "aria-rowspan": {
-    description: "Defines the number of rows spanned by a cell or gridcell within a table, grid, or treegrid.",
-    required: false,
-    control: "number",
-    type: "number"
-  },
-  "aria-selected": {
-    description: 'Indicates the current "selected" state of various widgets.',
-    required: false,
-    control: "boolean",
-    type: "boolean"
-  },
-  "aria-setsize": {
-    description: "Defines the number of items in the current set of listitems or treeitems. Not required if all elements in the set are present in the DOM.",
-    required: false,
-    control: "number",
-    type: "number"
-  },
-  "aria-sort": {
-    description: "Indicates if items in a table or grid are sorted in ascending or descending order.",
-    required: false,
-    control: "select",
-    type: "string",
-    options: ["none", "ascending", "descending", "other"]
-  },
-  "aria-valuemax": {
-    description: "Defines the maximum allowed value for a range widget.",
-    required: false,
-    control: "number",
-    type: "number"
-  },
-  "aria-valuemin": {
-    description: "Defines the minimum allowed value for a range widget.",
-    required: false,
-    control: "number",
-    type: "number"
-  },
-  "aria-valuenow": {
-    description: "Defines the current value for a range widget.",
-    required: false,
-    control: "number",
-    type: "number"
-  },
-  "aria-valuetext": {
-    description: "Defines the human readable text alternative of aria-valuenow for a range widget.",
-    required: false,
-    control: "text",
-    type: "string"
-  },
-  autoCapitalize: {
-    required: false,
-    control: "text",
-    type: "string",
-    description: "Sets whether input is automatically capitalized when entered by user."
-  },
-  autoCorrect: { required: false, control: "text", type: "string" },
-  autoFocus: {
-    required: false,
-    control: "boolean",
-    type: "boolean",
-    description: "Indicates that an element should be focused on page load, or when its parent dialog is displayed."
-  },
-  autoSave: { required: false, control: "text", type: "string" },
-  className: { required: false, control: "text", type: "string" },
-  color: {
-    required: false,
-    control: "color",
-    type: "string",
-    description: "This attribute sets the text color using either a named color or a  color specified in the hexadecimal #RRGGBB format. Note: This is a legacy attribute. Please use the CSS color property instead."
-  },
-  content: {
-    required: false,
-    control: "text",
-    type: "string",
-    description: "A value associated with http-equiv orname depending on the context."
-  },
-  contextMenu: {
-    required: false,
-    control: "text",
-    type: "string",
-    description: "Defines the ID of a menu element which willserve as the element's context menu."
-  },
-  datatype: { required: false, control: "text", type: "string" },
-  defaultChecked: { required: false, control: "boolean", type: "boolean" },
-  defaultValue: { required: false, control: "text", type: "string" },
-  dir: {
-    required: false,
-    control: "text",
-    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",
-    type: "boolean",
-    description: "Defines whether the element can be dragged."
-  },
-  hidden: {
-    required: false,
-    control: "boolean",
-    type: "boolean",
-    description: "Prevents rendering of given element, while keeping child elements, e.g. script elements, active."
-  },
-  href: {
-    required: false,
-    control: "text",
-    type: "string",
-    description: "The URL of a linked resource."
-  },
-  hrefLang: {
-    required: false,
-    control: "text",
-    type: "string",
-    description: "Specifies the language of the linked resource."
-  },
-  id: {
-    required: false,
-    control: "text",
-    type: "string",
-    description: "Often used with CSS to style a specific element. The value of this attribute must be unique."
-  },
-  inputMode: {
-    description: "Hints at the type of data that might be entered by the user while editing the element or its contents",
-    required: false,
-    control: "select",
-    type: "string",
-    options: [
-      "search",
-      "text",
-      "none",
-      "tel",
-      "url",
-      "email",
-      "numeric",
-      "decimal"
-    ]
-  },
-  is: {
-    description: "Specify that a standard HTML element should behave like a defined custom built-in element",
-    required: false,
-    control: "text",
-    type: "string"
-  },
-  itemID: { required: false, control: "text", type: "string" },
-  itemProp: { required: false, control: "text", type: "string" },
-  itemRef: { required: false, control: "text", type: "string" },
-  itemScope: { required: false, control: "boolean", type: "boolean" },
-  itemType: { required: false, control: "text", type: "string" },
-  lang: {
-    required: false,
-    control: "text",
-    type: "string",
-    description: "Defines the language used in the element."
-  },
-  media: {
-    required: false,
-    control: "text",
-    type: "string",
-    description: "Specifies a hint of the media for which the linked resource was designed."
-  },
-  nonce: { required: false, control: "text", type: "string" },
-  ping: {
-    required: false,
-    control: "text",
-    type: "string",
-    description: "The ping attribute specifies a space-separated list of URLs to be notified if a user follows the hyperlink."
-  },
-  prefix: { required: false, control: "text", type: "string" },
-  property: { required: false, control: "text", type: "string" },
-  radioGroup: { required: false, control: "text", type: "string" },
-  referrerPolicy: {
-    required: false,
-    control: "select",
-    type: "string",
-    options: [
-      "",
-      "no-referrer",
-      "no-referrer-when-downgrade",
-      "origin",
-      "origin-when-cross-origin",
-      "same-origin",
-      "strict-origin",
-      "strict-origin-when-cross-origin",
-      "unsafe-url"
-    ],
-    description: "Specifies which referrer is sent when fetching the resource."
-  },
-  rel: {
-    required: false,
-    control: "text",
-    type: "string",
-    description: "Specifies the relationship of the target object to the link object."
-  },
-  resource: { required: false, control: "text", type: "string" },
-  results: { required: false, control: "number", type: "number" },
-  rev: { required: false, control: "text", type: "string" },
-  role: {
-    required: false,
-    control: "text",
-    type: "string",
-    description: "Defines an explicit role for an element for use by assistive technologies."
-  },
-  security: { required: false, control: "text", type: "string" },
-  slot: {
-    required: false,
-    control: "text",
-    type: "string",
-    description: "Assigns a slot in a shadow DOM shadow tree to an element."
-  },
-  spellCheck: {
-    required: false,
-    control: "boolean",
-    type: "boolean",
-    description: "Indicates whether spell checking is allowed for the element."
-  },
-  suppressContentEditableWarning: {
-    required: false,
-    control: "boolean",
-    type: "boolean"
-  },
-  suppressHydrationWarning: {
-    required: false,
-    control: "boolean",
-    type: "boolean"
-  },
-  tabIndex: {
-    required: false,
-    control: "number",
-    type: "number",
-    description: "Overrides the browser's default tab order and follows the one specified instead."
-  },
-  target: {
-    required: false,
-    control: "select",
-    type: "string",
-    options: ["_self", "_blank", "_parent", "_top"],
-    description: "Specifies where to open the linked document (in the case of an <a> element) or where to display the response received (in the case of a <form> element)"
-  },
-  title: {
-    required: false,
-    control: "text",
-    type: "string",
-    description: "Text to be displayed in a tooltip when hovering over the element."
-  },
-  translate: {
-    required: false,
-    control: "radio",
-    type: "string",
-    options: ["yes", "no"],
-    description: "Specify whether an element's attribute values and the values of its text node children are to be translated when the page is localized, or whether to leave them unchanged."
-  },
-  type: {
-    required: false,
-    control: "text",
-    type: "string",
-    description: "Defines the type of the element."
-  },
-  typeof: { required: false, control: "text", type: "string" },
-  unselectable: {
-    required: false,
-    control: "radio",
-    type: "string",
-    options: ["on", "off"]
-  },
-  vocab: { required: false, control: "text", type: "string" }
-};
-
-// src/link.ws.ts
-var presetStyle7 = {
-  a: [
-    ...a,
-    {
-      property: "minHeight",
-      value: { type: "unit", unit: "em", value: 1 }
-    },
-    {
-      property: "display",
-      value: { type: "keyword", value: "inline-block" }
-    }
-  ]
-};
-var meta11 = {
-  category: "general",
-  type: "container",
-  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"],
-  presetStyle: presetStyle7,
-  order: 1,
-  states: [
-    ...defaultStates6,
-    {
-      selector: ":visited",
-      label: "Visited"
-    },
-    {
-      category: "component-states",
-      selector: "[aria-current=page]",
-      label: "Current page"
-    }
-  ],
-  template: [
-    {
-      type: "instance",
-      component: "Link",
-      children: [
-        {
-          type: "text",
-          value: "Link text you can edit",
-          placeholder: true
-        }
-      ]
-    }
-  ]
-};
-var propsMeta3 = {
-  props: {
-    ...props3,
-    href: {
-      type: "string",
-      control: "url",
-      required: false
-    }
-  },
-  initialProps: ["id", "className", "href", "target", "download"]
-};
-
-// src/rich-text-link.ws.ts
-var meta12 = {
-  ...meta11,
-  category: "hidden",
-  type: "rich-text-child",
-  template: []
-};
-
-// 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/sdk/normalize.css";
-var presetStyle8 = {
-  span
-};
-var meta13 = {
-  type: "rich-text-child",
-  label: "Text",
-  icon: PaintBrushIcon,
-  states: defaultStates7,
-  presetStyle: presetStyle8
-};
-
-// src/bold.ws.ts
-import { BoldIcon } from "@webstudio-is/icons/svg";
-import {
-  defaultStates as defaultStates8
-} from "@webstudio-is/react-sdk";
-import { b } from "@webstudio-is/sdk/normalize.css";
-var presetStyle9 = {
-  b
-};
-var meta14 = {
-  type: "rich-text-child",
-  label: "Bold Text",
-  icon: BoldIcon,
-  states: defaultStates8,
-  presetStyle: presetStyle9
-};
-
-// src/italic.ws.ts
-import { TextItalicIcon } from "@webstudio-is/icons/svg";
-import {
-  defaultStates as defaultStates9
-} from "@webstudio-is/react-sdk";
-import { i } from "@webstudio-is/sdk/normalize.css";
-var presetStyle10 = {
-  i: [
-    ...i,
-    {
-      property: "fontStyle",
-      value: { type: "keyword", value: "italic" }
-    }
-  ]
-};
-var meta15 = {
-  type: "rich-text-child",
-  label: "Italic Text",
-  icon: TextItalicIcon,
-  states: defaultStates9,
-  presetStyle: presetStyle10
-};
-
-// src/superscript.ws.ts
-import { SuperscriptIcon } from "@webstudio-is/icons/svg";
-import {
-  defaultStates as defaultStates10
-} from "@webstudio-is/react-sdk";
-import { sup } from "@webstudio-is/sdk/normalize.css";
-var presetStyle11 = {
-  sup
-};
-var meta16 = {
-  type: "rich-text-child",
-  label: "Superscript Text",
-  icon: SuperscriptIcon,
-  states: defaultStates10,
-  presetStyle: presetStyle11
-};
-
-// src/subscript.ws.ts
-import { SubscriptIcon } from "@webstudio-is/icons/svg";
-import {
-  defaultStates as defaultStates11
-} from "@webstudio-is/react-sdk";
-import { sub } from "@webstudio-is/sdk/normalize.css";
-var presetStyle12 = {
-  sub
-};
-var meta17 = {
-  type: "rich-text-child",
-  label: "Subscript Text",
-  icon: SubscriptIcon,
-  states: defaultStates11,
-  presetStyle: presetStyle12
-};
-
-// src/button.ws.ts
-import { ButtonElementIcon } from "@webstudio-is/icons/svg";
-import {
-  defaultStates as defaultStates12
-} from "@webstudio-is/react-sdk";
-import { button } from "@webstudio-is/sdk/normalize.css";
-var presetStyle13 = {
-  button
-};
-var meta18 = {
-  category: "forms",
-  type: "container",
-  invalidAncestors: ["Button", "Link"],
-  description: "Use a button to submit forms or trigger actions within a page. Do not use a button to navigate users to another resource or another page - that\u2019s what a link is used for.",
-  icon: ButtonElementIcon,
-  presetStyle: presetStyle13,
-  states: [
-    ...defaultStates12,
-    { selector: ":disabled", label: "Disabled" },
-    { selector: ":enabled", label: "Enabled" }
-  ],
-  order: 2,
-  template: [
-    {
-      type: "instance",
-      component: "Button",
-      children: [
-        {
-          type: "text",
-          value: "Button text you can edit",
-          placeholder: true
-        }
-      ]
-    }
-  ]
-};
-
-// src/input.ws.ts
-import { FormTextFieldIcon } from "@webstudio-is/icons/svg";
-import {
-  defaultStates as defaultStates13
-} from "@webstudio-is/react-sdk";
-import { input } from "@webstudio-is/sdk/normalize.css";
-var presetStyle14 = {
-  input: [
-    ...input,
-    {
-      property: "display",
-      value: { type: "keyword", value: "block" }
-    }
-  ]
-};
-var meta19 = {
-  category: "forms",
-  invalidAncestors: ["Button", "Link"],
-  type: "control",
-  label: "Text Input",
-  description: "A single-line text input for collecting string data from your users.",
-  icon: FormTextFieldIcon,
-  presetStyle: presetStyle14,
-  order: 3,
-  states: [
-    ...defaultStates13,
-    { selector: "::placeholder", label: "Placeholder" },
-    { selector: ":valid", label: "Valid" },
-    { selector: ":invalid", label: "Invalid" },
-    { selector: ":required", label: "Required" },
-    { selector: ":optional", label: "Optional" }
-    // Additional states will go into submenu
-    //{ selector: ":disabled", label: "Disabled" },
-    //{ selector: ":enabled", label: "Enabled" },
-    //{ selector: ":read-only", label: "Read Only" },
-    //{ selector: ":read-write", label: "Read Write" },
-  ]
-};
-
-// src/form.ws.ts
-import { FormIcon } from "@webstudio-is/icons/svg";
-import {
-  defaultStates as defaultStates14
-} from "@webstudio-is/react-sdk";
-import { form } from "@webstudio-is/sdk/normalize.css";
-var presetStyle15 = {
-  form: [
-    ...form,
-    { property: "minHeight", value: { type: "unit", unit: "px", value: 20 } }
-  ]
-};
-var meta20 = {
-  category: "forms",
-  type: "container",
-  label: "Form",
-  invalidAncestors: ["Form", "Button", "Link"],
-  description: "Create filters, surveys, searches and more.",
-  icon: FormIcon,
-  states: defaultStates14,
-  presetStyle: presetStyle15,
-  order: 0
-};
-
-// src/image.ws.ts
-import { ImageIcon } from "@webstudio-is/icons/svg";
-import {
-  defaultStates as defaultStates15
-} from "@webstudio-is/react-sdk";
-import { img } from "@webstudio-is/sdk/normalize.css";
-
-// src/__generated__/image.props.ts
-var props4 = {
-  about: { required: false, control: "text", type: "string" },
-  accessKey: {
-    required: false,
-    control: "text",
-    type: "string",
-    description: "Keyboard shortcut to activate or add focus to the element."
-  },
-  alt: {
-    required: false,
-    control: "text",
-    type: "string",
-    description: "Text description of the image, which is very important for accessibility and search engine optimization. Screen readers read this description to users so they know what the image means. Alt text is also displayed on the page if the image can't be loaded for some reason."
-  },
-  "aria-activedescendant": {
-    description: "Identifies the currently active element when DOM focus is on a composite widget, textbox, group, or application.",
-    required: false,
-    control: "text",
-    type: "string"
-  },
-  "aria-atomic": {
-    description: "Indicates whether assistive technologies will present all, or only parts of, the changed region based on the change notifications defined by the aria-relevant attribute.",
-    required: false,
-    control: "boolean",
-    type: "boolean"
-  },
-  "aria-autocomplete": {
-    description: "Indicates whether inputting text could trigger display of one or more predictions of the user's intended value for an input and specifies how predictions would be\npresented if they are made.",
-    required: false,
-    control: "select",
-    type: "string",
-    options: ["list", "none", "inline", "both"]
-  },
-  "aria-braillelabel": {
-    description: "Defines a string value that labels the current element, which is intended to be converted into Braille.",
-    required: false,
-    control: "text",
-    type: "string"
-  },
-  "aria-brailleroledescription": {
-    description: "Defines a human-readable, author-localized abbreviated description for the role of an element, which is intended to be converted into Braille.",
-    required: false,
-    control: "text",
-    type: "string"
-  },
-  "aria-busy": { required: false, control: "boolean", type: "boolean" },
-  "aria-checked": {
-    description: 'Indicates the current "checked" state of checkboxes, radio buttons, and other widgets.',
-    required: false,
-    control: "text",
-    type: "string"
-  },
-  "aria-colcount": {
-    description: "Defines the total number of columns in a table, grid, or treegrid.",
-    required: false,
-    control: "number",
-    type: "number"
-  },
-  "aria-colindex": {
-    description: "Defines an element's column index or position with respect to the total number of columns within a table, grid, or treegrid.",
-    required: false,
-    control: "number",
-    type: "number"
-  },
-  "aria-colindextext": {
-    description: "Defines a human readable text alternative of aria-colindex.",
-    required: false,
-    control: "text",
-    type: "string"
-  },
-  "aria-colspan": {
-    description: "Defines the number of columns spanned by a cell or gridcell within a table, grid, or treegrid.",
-    required: false,
-    control: "number",
-    type: "number"
-  },
-  "aria-controls": {
-    description: "Identifies the element (or elements) whose contents or presence are controlled by the current element.",
-    required: false,
-    control: "text",
-    type: "string"
-  },
-  "aria-current": {
-    description: "Indicates the element that represents the current item within a container or set of related elements.",
-    required: false,
-    control: "text",
-    type: "string"
-  },
-  "aria-describedby": {
-    description: "Identifies the element (or elements) that describes the object.",
-    required: false,
-    control: "text",
-    type: "string"
-  },
-  "aria-description": {
-    description: "Defines a string value that describes or annotates the current element.",
-    required: false,
-    control: "text",
-    type: "string"
-  },
-  "aria-details": {
-    description: "Identifies the element that provides a detailed, extended description for the object.",
-    required: false,
-    control: "text",
-    type: "string"
-  },
-  "aria-disabled": {
-    description: "Indicates that the element is perceivable but disabled, so it is not editable or otherwise operable.",
-    required: false,
-    control: "boolean",
-    type: "boolean"
-  },
-  "aria-dropeffect": {
-    description: "Indicates what functions can be performed when a dragged object is released on the drop target.",
-    required: false,
-    control: "select",
-    type: "string",
-    options: ["link", "none", "copy", "execute", "move", "popup"]
-  },
-  "aria-errormessage": {
-    description: "Identifies the element that provides an error message for the object.",
-    required: false,
-    control: "text",
-    type: "string"
-  },
-  "aria-expanded": {
-    description: "Indicates whether the element, or another grouping element it controls, is currently expanded or collapsed.",
-    required: false,
-    control: "boolean",
-    type: "boolean"
-  },
-  "aria-flowto": {
-    description: "Identifies the next element (or elements) in an alternate reading order of content which, at the user's discretion,\nallows assistive technology to override the general default of reading in document source order.",
-    required: false,
-    control: "text",
-    type: "string"
-  },
-  "aria-grabbed": {
-    description: `Indicates an element's "grabbed" state in a drag-and-drop operation.`,
-    required: false,
-    control: "boolean",
-    type: "boolean"
-  },
-  "aria-haspopup": {
-    description: "Indicates the availability and type of interactive popup element, such as menu or dialog, that can be triggered by an element.",
-    required: false,
-    control: "text",
-    type: "string"
-  },
-  "aria-hidden": {
-    description: "Indicates whether the element is exposed to an accessibility API.",
-    required: false,
-    control: "boolean",
-    type: "boolean"
-  },
-  "aria-invalid": {
-    description: "Indicates the entered value does not conform to the format expected by the application.",
-    required: false,
-    control: "text",
-    type: "string"
-  },
-  "aria-keyshortcuts": {
-    description: "Indicates keyboard shortcuts that an author has implemented to activate or give focus to an element.",
-    required: false,
-    control: "text",
-    type: "string"
-  },
-  "aria-label": {
-    description: "Provides the accessible name that describes an interactive element if no other accessible name exists, for example in a button that contains an image with no text.",
-    required: false,
-    control: "text",
-    type: "string"
-  },
-  "aria-labelledby": {
-    description: "Identifies the element (or elements) that labels the current element.",
-    required: false,
-    control: "text",
-    type: "string"
-  },
-  "aria-level": {
-    description: "Defines the hierarchical level of an element within a structure.",
-    required: false,
-    control: "number",
-    type: "number"
-  },
-  "aria-live": {
-    description: "Indicates that an element will be updated, and describes the types of updates the user agents, assistive technologies, and user can expect from the live region.",
-    required: false,
-    control: "radio",
-    type: "string",
-    options: ["off", "assertive", "polite"]
-  },
-  "aria-modal": {
-    description: "Indicates whether an element is modal when displayed.",
-    required: false,
-    control: "boolean",
-    type: "boolean"
-  },
-  "aria-multiline": {
-    description: "Indicates whether a text box accepts multiple lines of input or only a single line.",
-    required: false,
-    control: "boolean",
-    type: "boolean"
-  },
-  "aria-multiselectable": {
-    description: "Indicates that the user may select more than one item from the current selectable descendants.",
-    required: false,
-    control: "boolean",
-    type: "boolean"
-  },
-  "aria-orientation": {
-    description: "Indicates whether the element's orientation is horizontal, vertical, or unknown/ambiguous.",
-    required: false,
-    control: "radio",
-    type: "string",
-    options: ["horizontal", "vertical"]
-  },
-  "aria-owns": {
-    description: "Identifies an element (or elements) in order to define a visual, functional, or contextual parent/child relationship\nbetween DOM elements where the DOM hierarchy cannot be used to represent the relationship.",
-    required: false,
-    control: "text",
-    type: "string"
-  },
-  "aria-placeholder": {
-    description: "Defines a short hint (a word or short phrase) intended to aid the user with data entry when the control has no value.\nA hint could be a sample value or a brief description of the expected format.",
-    required: false,
-    control: "text",
-    type: "string"
-  },
-  "aria-posinset": {
-    description: "Defines an element's number or position in the current set of listitems or treeitems. Not required if all elements in the set are present in the DOM.",
-    required: false,
-    control: "number",
-    type: "number"
-  },
-  "aria-pressed": {
-    description: 'Indicates the current "pressed" state of toggle buttons.',
-    required: false,
-    control: "text",
-    type: "string"
-  },
-  "aria-readonly": {
-    description: "Indicates that the element is not editable, but is otherwise operable.",
-    required: false,
-    control: "boolean",
-    type: "boolean"
-  },
-  "aria-relevant": {
-    description: "Indicates what notifications the user agent will trigger when the accessibility tree within a live region is modified.",
-    required: false,
-    control: "select",
-    type: "string",
-    options: [
-      "text",
-      "additions",
-      "additions removals",
-      "additions text",
-      "all",
-      "removals",
-      "removals additions",
-      "removals text",
-      "text additions",
-      "text removals"
-    ]
-  },
-  "aria-required": {
-    description: "Indicates that user input is required on the element before a form may be submitted.",
-    required: false,
-    control: "boolean",
-    type: "boolean"
-  },
-  "aria-roledescription": {
-    description: "Defines a human-readable, author-localized description for the role of an element.",
-    required: false,
-    control: "text",
-    type: "string"
-  },
-  "aria-rowcount": {
-    description: "Defines the total number of rows in a table, grid, or treegrid.",
-    required: false,
-    control: "number",
-    type: "number"
-  },
-  "aria-rowindex": {
-    description: "Defines an element's row index or position with respect to the total number of rows within a table, grid, or treegrid.",
-    required: false,
-    control: "number",
-    type: "number"
-  },
-  "aria-rowindextext": {
-    description: "Defines a human readable text alternative of aria-rowindex.",
-    required: false,
-    control: "text",
-    type: "string"
-  },
-  "aria-rowspan": {
-    description: "Defines the number of rows spanned by a cell or gridcell within a table, grid, or treegrid.",
-    required: false,
-    control: "number",
-    type: "number"
-  },
-  "aria-selected": {
-    description: 'Indicates the current "selected" state of various widgets.',
-    required: false,
-    control: "boolean",
-    type: "boolean"
-  },
-  "aria-setsize": {
-    description: "Defines the number of items in the current set of listitems or treeitems. Not required if all elements in the set are present in the DOM.",
-    required: false,
-    control: "number",
-    type: "number"
-  },
-  "aria-sort": {
-    description: "Indicates if items in a table or grid are sorted in ascending or descending order.",
-    required: false,
-    control: "select",
-    type: "string",
-    options: ["none", "ascending", "descending", "other"]
-  },
-  "aria-valuemax": {
-    description: "Defines the maximum allowed value for a range widget.",
-    required: false,
-    control: "number",
-    type: "number"
-  },
-  "aria-valuemin": {
-    description: "Defines the minimum allowed value for a range widget.",
-    required: false,
-    control: "number",
-    type: "number"
-  },
-  "aria-valuenow": {
-    description: "Defines the current value for a range widget.",
-    required: false,
-    control: "number",
-    type: "number"
-  },
-  "aria-valuetext": {
-    description: "Defines the human readable text alternative of aria-valuenow for a range widget.",
-    required: false,
-    control: "text",
-    type: "string"
-  },
-  autoCapitalize: {
-    required: false,
-    control: "text",
-    type: "string",
-    description: "Sets whether input is automatically capitalized when entered by user."
-  },
-  autoCorrect: { required: false, control: "text", type: "string" },
-  autoFocus: {
-    required: false,
-    control: "boolean",
-    type: "boolean",
-    description: "Indicates that an element should be focused on page load, or when its parent dialog is displayed."
-  },
-  autoSave: { required: false, control: "text", type: "string" },
-  className: { required: false, control: "text", type: "string" },
-  color: {
-    required: false,
-    control: "color",
-    type: "string",
-    description: "This attribute sets the text color using either a named color or a  color specified in the hexadecimal #RRGGBB format. Note: This is a legacy attribute. Please use the CSS color property instead."
-  },
-  content: {
-    required: false,
-    control: "text",
-    type: "string",
-    description: "A value associated with http-equiv orname depending on the context."
-  },
-  contextMenu: {
-    required: false,
-    control: "text",
-    type: "string",
-    description: "Defines the ID of a menu element which willserve as the element's context menu."
-  },
-  crossOrigin: {
-    required: false,
-    control: "radio",
-    type: "string",
-    options: ["", "anonymous", "use-credentials"],
-    description: "How the element handles cross-origin requests"
-  },
-  datatype: { required: false, control: "text", type: "string" },
-  decoding: {
-    required: false,
-    control: "radio",
-    type: "string",
-    options: ["async", "auto", "sync"],
-    description: "Indicates the preferred method to decode the image."
-  },
-  defaultChecked: { required: false, control: "boolean", type: "boolean" },
-  defaultValue: { required: false, control: "text", type: "string" },
-  dir: {
-    required: false,
-    control: "text",
-    type: "string",
-    description: "Defines the text direction. Allowed values are ltr (Left-To-Right) or rtl (Right-To-Left)"
-  },
-  draggable: {
-    required: false,
-    control: "boolean",
-    type: "boolean",
-    description: "Defines whether the element can be dragged."
-  },
-  fetchPriority: {
-    required: false,
-    control: "radio",
-    type: "string",
-    options: ["high", "low", "auto"]
-  },
-  height: {
-    required: false,
-    control: "number",
-    type: "number",
-    description: "Defines the image\u2019s height in pixels."
-  },
-  hidden: {
-    required: false,
-    control: "boolean",
-    type: "boolean",
-    description: "Prevents rendering of given element, while keeping child elements, e.g. script elements, active."
-  },
-  id: {
-    required: false,
-    control: "text",
-    type: "string",
-    description: "Often used with CSS to style a specific element. The value of this attribute must be unique."
-  },
-  inputMode: {
-    description: "Hints at the type of data that might be entered by the user while editing the element or its contents",
-    required: false,
-    control: "select",
-    type: "string",
-    options: [
-      "search",
-      "text",
-      "none",
-      "tel",
-      "url",
-      "email",
-      "numeric",
-      "decimal"
-    ]
-  },
-  is: {
-    description: "Specify that a standard HTML element should behave like a defined custom built-in element",
-    required: false,
-    control: "text",
-    type: "string"
-  },
-  itemID: { required: false, control: "text", type: "string" },
-  itemProp: { required: false, control: "text", type: "string" },
-  itemRef: { required: false, control: "text", type: "string" },
-  itemScope: { required: false, control: "boolean", type: "boolean" },
-  itemType: { required: false, control: "text", type: "string" },
-  lang: {
-    required: false,
-    control: "text",
-    type: "string",
-    description: "Defines the language used in the element."
-  },
-  loading: {
-    required: false,
-    control: "radio",
-    type: "string",
-    defaultValue: "lazy",
-    options: ["eager", "lazy"],
-    description: "Determines whether the image will load as soon as possible (Eager), or when it scrolls into view (Lazy). Lazy loading is a great option for pages with many images because it can significantly reduce the time it takes for the page to load initially."
-  },
-  nonce: { required: false, control: "text", type: "string" },
-  optimize: {
-    required: false,
-    control: "boolean",
-    type: "boolean",
-    defaultValue: true
-  },
-  prefix: { required: false, control: "text", type: "string" },
-  property: { required: false, control: "text", type: "string" },
-  quality: { required: false, control: "number", type: "number" },
-  radioGroup: { required: false, control: "text", type: "string" },
-  referrerPolicy: {
-    required: false,
-    control: "select",
-    type: "string",
-    options: [
-      "",
-      "origin",
-      "no-referrer",
-      "no-referrer-when-downgrade",
-      "origin-when-cross-origin",
-      "same-origin",
-      "strict-origin",
-      "strict-origin-when-cross-origin",
-      "unsafe-url"
-    ],
-    description: "Specifies which referrer is sent when fetching the resource."
-  },
-  rel: {
-    required: false,
-    control: "text",
-    type: "string",
-    description: "Specifies the relationship of the target object to the link object."
-  },
-  resource: { required: false, control: "text", type: "string" },
-  results: { required: false, control: "number", type: "number" },
-  rev: { required: false, control: "text", type: "string" },
-  role: {
-    required: false,
-    control: "text",
-    type: "string",
-    description: "Defines an explicit role for an element for use by assistive technologies."
-  },
-  security: { required: false, control: "text", type: "string" },
-  sizes: { required: false, control: "text", type: "string" },
-  slot: {
-    required: false,
-    control: "text",
-    type: "string",
-    description: "Assigns a slot in a shadow DOM shadow tree to an element."
-  },
-  spellCheck: {
-    required: false,
-    control: "boolean",
-    type: "boolean",
-    description: "Indicates whether spell checking is allowed for the element."
-  },
-  src: {
-    required: false,
-    control: "text",
-    type: "string",
-    description: "The URL of the embeddable content."
-  },
-  srcSet: {
-    required: false,
-    control: "text",
-    type: "string",
-    description: "One or more responsive image candidates."
-  },
-  suppressContentEditableWarning: {
-    required: false,
-    control: "boolean",
-    type: "boolean"
-  },
-  suppressHydrationWarning: {
-    required: false,
-    control: "boolean",
-    type: "boolean"
-  },
-  tabIndex: {
-    required: false,
-    control: "number",
-    type: "number",
-    description: "Overrides the browser's default tab order and follows the one specified instead."
-  },
-  title: {
-    required: false,
-    control: "text",
-    type: "string",
-    description: "Text to be displayed in a tooltip when hovering over the element."
-  },
-  translate: {
-    required: false,
-    control: "radio",
-    type: "string",
-    options: ["yes", "no"],
-    description: "Specify whether an element's attribute values and the values of its text node children are to be translated when the page is localized, or whether to leave them unchanged."
-  },
-  typeof: { required: false, control: "text", type: "string" },
-  unselectable: {
-    required: false,
-    control: "radio",
-    type: "string",
-    options: ["on", "off"]
-  },
-  useMap: { required: false, control: "text", type: "string" },
-  vocab: { required: false, control: "text", type: "string" },
-  width: {
-    required: false,
-    control: "number",
-    type: "number",
-    description: "Defines the image\u2019s width in pixels."
-  }
-};
-
-// src/image.ws.ts
-var presetStyle16 = {
-  img: [
-    ...img,
-    // Otherwise on new image insert onto canvas it can overfit screen size multiple times
-    {
-      property: "maxWidth",
-      value: { type: "unit", unit: "%", value: 100 }
-    },
-    // inline | inline-block is not suitable because without line-height: 0 on the parent you get unsuitable spaces/margins
-    // see https://stackoverflow.com/questions/24771194/is-the-margin-of-inline-block-4px-is-static-for-all-browsers
-    {
-      property: "display",
-      value: { type: "keyword", value: "block" }
-    },
-    // Set image height to "auto" to reduce layout shift, improving compatibility across browsers like Safari.
-    // Unlike "fit-content," "auto" preserves the aspect ratio when the width exceeds max-width. (in Safari)
-    // See https://web.dev/articles/optimize-cls#best_practice_for_setting_image_dimensions
-    {
-      property: "height",
-      value: { type: "keyword", value: "auto" }
-    }
-  ]
-};
-var meta21 = {
-  category: "media",
-  type: "embed",
-  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,
-  presetStyle: presetStyle16,
-  order: 0
-};
-var propsOverrides = {
-  src: {
-    type: "string",
-    control: "file",
-    label: "Source",
-    required: false
-  }
-};
-var optimize = props4.optimize;
-optimize.description = "Optimize the image for enhanced performance.";
-var propsMeta4 = {
-  props: {
-    ...props4,
-    ...propsOverrides,
-    optimize
-  },
-  initialProps: [
-    "id",
-    "className",
-    "src",
-    "width",
-    "height",
-    "alt",
-    "loading",
-    "optimize"
-  ]
-};
-
-// src/blockquote.ws.ts
-import { BlockquoteIcon } from "@webstudio-is/icons/svg";
-import {
-  defaultStates as defaultStates16
-} from "@webstudio-is/react-sdk";
-var presetStyle17 = {
-  blockquote: [
-    {
-      property: "marginTop",
-      value: { type: "unit", value: 0, unit: "number" }
-    },
-    {
-      property: "marginRight",
-      value: { type: "unit", value: 0, unit: "number" }
-    },
-    {
-      property: "marginBottom",
-      value: { type: "unit", value: 10, unit: "px" }
-    },
-    {
-      property: "marginLeft",
-      value: { type: "unit", value: 0, unit: "number" }
-    },
-    {
-      property: "paddingTop",
-      value: { type: "unit", value: 10, unit: "px" }
-    },
-    {
-      property: "paddingBottom",
-      value: { type: "unit", value: 10, unit: "px" }
-    },
-    {
-      property: "paddingLeft",
-      value: { type: "unit", value: 20, unit: "px" }
-    },
-    {
-      property: "paddingRight",
-      value: { type: "unit", value: 20, unit: "px" }
-    },
-    {
-      property: "borderLeftWidth",
-      value: { type: "unit", value: 5, unit: "px" }
-    },
-    {
-      property: "borderLeftStyle",
-      value: { type: "keyword", value: "solid" }
-    },
-    {
-      property: "borderLeftColor",
-      value: { type: "rgb", r: 226, g: 226, b: 226, alpha: 1 }
-    }
-  ]
-};
-var meta22 = {
-  category: "text",
-  type: "container",
-  description: "Use to style a quote from an external source like an article or book.",
-  icon: BlockquoteIcon,
-  states: defaultStates16,
-  presetStyle: presetStyle17,
-  order: 3,
-  template: [
-    {
-      type: "instance",
-      component: "Blockquote",
-      children: [
-        {
-          type: "text",
-          value: "Blockquote text you can edit",
-          placeholder: true
-        }
-      ]
-    }
-  ]
-};
-
-// src/list.ws.ts
-import { ListIcon } from "@webstudio-is/icons/svg";
-import {
-  defaultStates as defaultStates17
-} from "@webstudio-is/react-sdk";
-import { ol, ul } from "@webstudio-is/sdk/normalize.css";
-var presetStyle18 = {
-  ol: [
-    ...ol,
-    {
-      property: "marginTop",
-      value: { type: "keyword", value: "0" }
-    },
-    {
-      property: "marginBottom",
-      value: { type: "keyword", value: "10px" }
-    },
-    {
-      property: "paddingLeft",
-      value: { type: "keyword", value: "40px" }
-    }
-  ],
-  ul: [
-    ...ul,
-    {
-      property: "marginTop",
-      value: { type: "keyword", value: "0" }
-    },
-    {
-      property: "marginBottom",
-      value: { type: "keyword", value: "10px" }
-    },
-    {
-      property: "paddingLeft",
-      value: { type: "keyword", value: "40px" }
-    }
-  ]
-};
-var meta23 = {
-  category: "general",
-  type: "container",
-  description: "Groups content, like links in a menu or steps in a recipe.",
-  icon: ListIcon,
-  states: defaultStates17,
-  presetStyle: presetStyle18,
-  order: 3,
-  template: [
-    {
-      type: "instance",
-      component: "List",
-      children: [
-        {
-          type: "instance",
-          component: "ListItem",
-          children: [
-            {
-              type: "text",
-              value: "List Item text you can edit",
-              placeholder: true
-            }
-          ]
-        },
-        {
-          type: "instance",
-          component: "ListItem",
-          children: [
-            {
-              type: "text",
-              value: "List Item text you can edit",
-              placeholder: true
-            }
-          ]
-        },
-        {
-          type: "instance",
-          component: "ListItem",
-          children: [
-            {
-              type: "text",
-              value: "List Item text you can edit",
-              placeholder: true
-            }
-          ]
-        }
-      ]
-    }
-  ]
-};
-
-// src/list-item.ws.ts
-import { ListItemIcon } from "@webstudio-is/icons/svg";
-import {
-  defaultStates as defaultStates18
-} from "@webstudio-is/react-sdk";
-import { li } from "@webstudio-is/sdk/normalize.css";
-var presetStyle19 = {
-  li
-};
-var meta24 = {
-  category: "general",
-  type: "container",
-  requiredAncestors: ["List"],
-  description: "Adds a new item to an existing list.",
-  icon: ListItemIcon,
-  states: defaultStates18,
-  presetStyle: presetStyle19,
-  order: 4,
-  template: [
-    {
-      type: "instance",
-      component: "ListItem",
-      children: [
-        {
-          type: "text",
-          value: "List Item text you can edit",
-          placeholder: true
-        }
-      ]
-    }
-  ]
-};
-
-// src/separator.ws.ts
-import { DashIcon } from "@webstudio-is/icons/svg";
-import {
-  defaultStates as defaultStates19
-} from "@webstudio-is/react-sdk";
-import { hr } from "@webstudio-is/sdk/normalize.css";
-var presetStyle20 = {
-  hr: [
-    ...hr,
-    {
-      property: "height",
-      value: { type: "keyword", value: "1px" }
-    },
-    {
-      property: "backgroundColor",
-      value: { type: "keyword", value: "gray" }
-    },
-    {
-      property: "borderTopStyle",
-      value: { type: "keyword", value: "none" }
-    },
-    {
-      property: "borderRightStyle",
-      value: { type: "keyword", value: "none" }
-    },
-    {
-      property: "borderLeftStyle",
-      value: { type: "keyword", value: "none" }
-    },
-    {
-      property: "borderBottomStyle",
-      value: { type: "keyword", value: "none" }
-    }
-  ]
-};
-var meta25 = {
-  category: "general",
-  type: "embed",
-  description: "Used to visually divide sections of content, helping to improve readability and organization within a webpage.",
-  icon: DashIcon,
-  states: defaultStates19,
-  presetStyle: presetStyle20,
-  order: 5
-};
-
-// src/code-text.ws.ts
-import { CodeTextIcon } from "@webstudio-is/icons/svg";
-import {
-  defaultStates as defaultStates20
-} from "@webstudio-is/react-sdk";
-import { code } from "@webstudio-is/sdk/normalize.css";
-
-// src/__generated__/code-text.props.ts
-var props5 = {
-  about: { required: false, control: "text", type: "string" },
-  accessKey: {
-    required: false,
-    control: "text",
-    type: "string",
-    description: "Keyboard shortcut to activate or add focus to the element."
-  },
-  "aria-activedescendant": {
-    description: "Identifies the currently active element when DOM focus is on a composite widget, textbox, group, or application.",
-    required: false,
-    control: "text",
-    type: "string"
-  },
-  "aria-atomic": {
-    description: "Indicates whether assistive technologies will present all, or only parts of, the changed region based on the change notifications defined by the aria-relevant attribute.",
-    required: false,
-    control: "boolean",
-    type: "boolean"
-  },
-  "aria-autocomplete": {
-    description: "Indicates whether inputting text could trigger display of one or more predictions of the user's intended value for an input and specifies how predictions would be\npresented if they are made.",
-    required: false,
-    control: "select",
-    type: "string",
-    options: ["list", "none", "inline", "both"]
-  },
-  "aria-braillelabel": {
-    description: "Defines a string value that labels the current element, which is intended to be converted into Braille.",
-    required: false,
-    control: "text",
-    type: "string"
-  },
-  "aria-brailleroledescription": {
-    description: "Defines a human-readable, author-localized abbreviated description for the role of an element, which is intended to be converted into Braille.",
-    required: false,
-    control: "text",
-    type: "string"
-  },
-  "aria-busy": { required: false, control: "boolean", type: "boolean" },
-  "aria-checked": {
-    description: 'Indicates the current "checked" state of checkboxes, radio buttons, and other widgets.',
-    required: false,
-    control: "text",
-    type: "string"
-  },
-  "aria-colcount": {
-    description: "Defines the total number of columns in a table, grid, or treegrid.",
-    required: false,
-    control: "number",
-    type: "number"
-  },
-  "aria-colindex": {
-    description: "Defines an element's column index or position with respect to the total number of columns within a table, grid, or treegrid.",
-    required: false,
-    control: "number",
-    type: "number"
-  },
-  "aria-colindextext": {
-    description: "Defines a human readable text alternative of aria-colindex.",
-    required: false,
-    control: "text",
-    type: "string"
-  },
-  "aria-colspan": {
-    description: "Defines the number of columns spanned by a cell or gridcell within a table, grid, or treegrid.",
-    required: false,
-    control: "number",
-    type: "number"
-  },
-  "aria-controls": {
-    description: "Identifies the element (or elements) whose contents or presence are controlled by the current element.",
-    required: false,
-    control: "text",
-    type: "string"
-  },
-  "aria-current": {
-    description: "Indicates the element that represents the current item within a container or set of related elements.",
-    required: false,
-    control: "text",
-    type: "string"
-  },
-  "aria-describedby": {
-    description: "Identifies the element (or elements) that describes the object.",
-    required: false,
-    control: "text",
-    type: "string"
-  },
-  "aria-description": {
-    description: "Defines a string value that describes or annotates the current element.",
-    required: false,
-    control: "text",
-    type: "string"
-  },
-  "aria-details": {
-    description: "Identifies the element that provides a detailed, extended description for the object.",
-    required: false,
-    control: "text",
-    type: "string"
-  },
-  "aria-disabled": {
-    description: "Indicates that the element is perceivable but disabled, so it is not editable or otherwise operable.",
-    required: false,
-    control: "boolean",
-    type: "boolean"
-  },
-  "aria-dropeffect": {
-    description: "Indicates what functions can be performed when a dragged object is released on the drop target.",
-    required: false,
-    control: "select",
-    type: "string",
-    options: ["link", "none", "copy", "execute", "move", "popup"]
-  },
-  "aria-errormessage": {
-    description: "Identifies the element that provides an error message for the object.",
-    required: false,
-    control: "text",
-    type: "string"
-  },
-  "aria-expanded": {
-    description: "Indicates whether the element, or another grouping element it controls, is currently expanded or collapsed.",
-    required: false,
-    control: "boolean",
-    type: "boolean"
-  },
-  "aria-flowto": {
-    description: "Identifies the next element (or elements) in an alternate reading order of content which, at the user's discretion,\nallows assistive technology to override the general default of reading in document source order.",
-    required: false,
-    control: "text",
-    type: "string"
-  },
-  "aria-grabbed": {
-    description: `Indicates an element's "grabbed" state in a drag-and-drop operation.`,
-    required: false,
-    control: "boolean",
-    type: "boolean"
-  },
-  "aria-haspopup": {
-    description: "Indicates the availability and type of interactive popup element, such as menu or dialog, that can be triggered by an element.",
-    required: false,
-    control: "text",
-    type: "string"
-  },
-  "aria-hidden": {
-    description: "Indicates whether the element is exposed to an accessibility API.",
-    required: false,
-    control: "boolean",
-    type: "boolean"
-  },
-  "aria-invalid": {
-    description: "Indicates the entered value does not conform to the format expected by the application.",
-    required: false,
-    control: "text",
-    type: "string"
-  },
-  "aria-keyshortcuts": {
-    description: "Indicates keyboard shortcuts that an author has implemented to activate or give focus to an element.",
-    required: false,
-    control: "text",
-    type: "string"
-  },
-  "aria-label": {
-    description: "Provides the accessible name that describes an interactive element if no other accessible name exists, for example in a button that contains an image with no text.",
-    required: false,
-    control: "text",
-    type: "string"
-  },
-  "aria-labelledby": {
-    description: "Identifies the element (or elements) that labels the current element.",
-    required: false,
-    control: "text",
-    type: "string"
-  },
-  "aria-level": {
-    description: "Defines the hierarchical level of an element within a structure.",
-    required: false,
-    control: "number",
-    type: "number"
-  },
-  "aria-live": {
-    description: "Indicates that an element will be updated, and describes the types of updates the user agents, assistive technologies, and user can expect from the live region.",
-    required: false,
-    control: "radio",
-    type: "string",
-    options: ["off", "assertive", "polite"]
-  },
-  "aria-modal": {
-    description: "Indicates whether an element is modal when displayed.",
-    required: false,
-    control: "boolean",
-    type: "boolean"
-  },
-  "aria-multiline": {
-    description: "Indicates whether a text box accepts multiple lines of input or only a single line.",
-    required: false,
-    control: "boolean",
-    type: "boolean"
-  },
-  "aria-multiselectable": {
-    description: "Indicates that the user may select more than one item from the current selectable descendants.",
-    required: false,
-    control: "boolean",
-    type: "boolean"
-  },
-  "aria-orientation": {
-    description: "Indicates whether the element's orientation is horizontal, vertical, or unknown/ambiguous.",
-    required: false,
-    control: "radio",
-    type: "string",
-    options: ["horizontal", "vertical"]
-  },
-  "aria-owns": {
-    description: "Identifies an element (or elements) in order to define a visual, functional, or contextual parent/child relationship\nbetween DOM elements where the DOM hierarchy cannot be used to represent the relationship.",
-    required: false,
-    control: "text",
-    type: "string"
-  },
-  "aria-placeholder": {
-    description: "Defines a short hint (a word or short phrase) intended to aid the user with data entry when the control has no value.\nA hint could be a sample value or a brief description of the expected format.",
-    required: false,
-    control: "text",
-    type: "string"
-  },
-  "aria-posinset": {
-    description: "Defines an element's number or position in the current set of listitems or treeitems. Not required if all elements in the set are present in the DOM.",
-    required: false,
-    control: "number",
-    type: "number"
-  },
-  "aria-pressed": {
-    description: 'Indicates the current "pressed" state of toggle buttons.',
-    required: false,
-    control: "text",
-    type: "string"
-  },
-  "aria-readonly": {
-    description: "Indicates that the element is not editable, but is otherwise operable.",
-    required: false,
-    control: "boolean",
-    type: "boolean"
-  },
-  "aria-relevant": {
-    description: "Indicates what notifications the user agent will trigger when the accessibility tree within a live region is modified.",
-    required: false,
-    control: "select",
-    type: "string",
-    options: [
-      "text",
-      "additions",
-      "additions removals",
-      "additions text",
-      "all",
-      "removals",
-      "removals additions",
-      "removals text",
-      "text additions",
-      "text removals"
-    ]
-  },
-  "aria-required": {
-    description: "Indicates that user input is required on the element before a form may be submitted.",
-    required: false,
-    control: "boolean",
-    type: "boolean"
-  },
-  "aria-roledescription": {
-    description: "Defines a human-readable, author-localized description for the role of an element.",
-    required: false,
-    control: "text",
-    type: "string"
-  },
-  "aria-rowcount": {
-    description: "Defines the total number of rows in a table, grid, or treegrid.",
-    required: false,
-    control: "number",
-    type: "number"
-  },
-  "aria-rowindex": {
-    description: "Defines an element's row index or position with respect to the total number of rows within a table, grid, or treegrid.",
-    required: false,
-    control: "number",
-    type: "number"
-  },
-  "aria-rowindextext": {
-    description: "Defines a human readable text alternative of aria-rowindex.",
-    required: false,
-    control: "text",
-    type: "string"
-  },
-  "aria-rowspan": {
-    description: "Defines the number of rows spanned by a cell or gridcell within a table, grid, or treegrid.",
-    required: false,
-    control: "number",
-    type: "number"
-  },
-  "aria-selected": {
-    description: 'Indicates the current "selected" state of various widgets.',
-    required: false,
-    control: "boolean",
-    type: "boolean"
-  },
-  "aria-setsize": {
-    description: "Defines the number of items in the current set of listitems or treeitems. Not required if all elements in the set are present in the DOM.",
-    required: false,
-    control: "number",
-    type: "number"
-  },
-  "aria-sort": {
-    description: "Indicates if items in a table or grid are sorted in ascending or descending order.",
-    required: false,
-    control: "select",
-    type: "string",
-    options: ["none", "ascending", "descending", "other"]
-  },
-  "aria-valuemax": {
-    description: "Defines the maximum allowed value for a range widget.",
-    required: false,
-    control: "number",
-    type: "number"
-  },
-  "aria-valuemin": {
-    description: "Defines the minimum allowed value for a range widget.",
-    required: false,
-    control: "number",
-    type: "number"
-  },
-  "aria-valuenow": {
-    description: "Defines the current value for a range widget.",
-    required: false,
-    control: "number",
-    type: "number"
-  },
-  "aria-valuetext": {
-    description: "Defines the human readable text alternative of aria-valuenow for a range widget.",
-    required: false,
-    control: "text",
-    type: "string"
-  },
-  autoCapitalize: {
-    required: false,
-    control: "text",
-    type: "string",
-    description: "Sets whether input is automatically capitalized when entered by user."
-  },
-  autoCorrect: { required: false, control: "text", type: "string" },
-  autoFocus: {
-    required: false,
-    control: "boolean",
-    type: "boolean",
-    description: "Indicates that an element should be focused on page load, or when its parent dialog is displayed."
-  },
-  autoSave: { required: false, control: "text", type: "string" },
-  className: { required: false, control: "text", type: "string" },
-  code: { required: false, control: "text", type: "string" },
-  color: {
-    required: false,
-    control: "color",
-    type: "string",
-    description: "This attribute sets the text color using either a named color or a  color specified in the hexadecimal #RRGGBB format. Note: This is a legacy attribute. Please use the CSS color property instead."
-  },
-  content: {
-    required: false,
-    control: "text",
-    type: "string",
-    description: "A value associated with http-equiv orname depending on the context."
-  },
-  contextMenu: {
-    required: false,
-    control: "text",
-    type: "string",
-    description: "Defines the ID of a menu element which willserve as the element's context menu."
-  },
-  datatype: { required: false, control: "text", type: "string" },
-  defaultChecked: { required: false, control: "boolean", type: "boolean" },
-  defaultValue: { required: false, control: "text", type: "string" },
-  dir: {
-    required: false,
-    control: "text",
-    type: "string",
-    description: "Defines the text direction. Allowed values are ltr (Left-To-Right) or rtl (Right-To-Left)"
-  },
-  draggable: {
-    required: false,
-    control: "boolean",
-    type: "boolean",
-    description: "Defines whether the element can be dragged."
-  },
-  hidden: {
-    required: false,
-    control: "boolean",
-    type: "boolean",
-    description: "Prevents rendering of given element, while keeping child elements, e.g. script elements, active."
-  },
-  id: {
-    required: false,
-    control: "text",
-    type: "string",
-    description: "Often used with CSS to style a specific element. The value of this attribute must be unique."
-  },
-  inputMode: {
-    description: "Hints at the type of data that might be entered by the user while editing the element or its contents",
-    required: false,
-    control: "select",
-    type: "string",
-    options: [
-      "search",
-      "text",
-      "none",
-      "tel",
-      "url",
-      "email",
-      "numeric",
-      "decimal"
-    ]
-  },
-  is: {
-    description: "Specify that a standard HTML element should behave like a defined custom built-in element",
-    required: false,
-    control: "text",
-    type: "string"
-  },
-  itemID: { required: false, control: "text", type: "string" },
-  itemProp: { required: false, control: "text", type: "string" },
-  itemRef: { required: false, control: "text", type: "string" },
-  itemScope: { required: false, control: "boolean", type: "boolean" },
-  itemType: { required: false, control: "text", type: "string" },
-  lang: {
-    required: false,
-    control: "text",
-    type: "string",
-    description: "Defines the language used in the element."
-  },
-  nonce: { required: false, control: "text", type: "string" },
-  prefix: { required: false, control: "text", type: "string" },
-  property: { required: false, control: "text", type: "string" },
-  radioGroup: { required: false, control: "text", type: "string" },
-  rel: {
-    required: false,
-    control: "text",
-    type: "string",
-    description: "Specifies the relationship of the target object to the link object."
-  },
-  resource: { required: false, control: "text", type: "string" },
-  results: { required: false, control: "number", type: "number" },
-  rev: { required: false, control: "text", type: "string" },
-  role: {
-    required: false,
-    control: "text",
-    type: "string",
-    description: "Defines an explicit role for an element for use by assistive technologies."
-  },
-  security: { required: false, control: "text", type: "string" },
-  slot: {
-    required: false,
-    control: "text",
-    type: "string",
-    description: "Assigns a slot in a shadow DOM shadow tree to an element."
-  },
-  spellCheck: {
-    required: false,
-    control: "boolean",
-    type: "boolean",
-    description: "Indicates whether spell checking is allowed for the element."
-  },
-  suppressContentEditableWarning: {
-    required: false,
-    control: "boolean",
-    type: "boolean"
-  },
-  suppressHydrationWarning: {
-    required: false,
-    control: "boolean",
-    type: "boolean"
-  },
-  tabIndex: {
-    required: false,
-    control: "number",
-    type: "number",
-    description: "Overrides the browser's default tab order and follows the one specified instead."
-  },
-  title: {
-    required: false,
-    control: "text",
-    type: "string",
-    description: "Text to be displayed in a tooltip when hovering over the element."
-  },
-  translate: {
-    required: false,
-    control: "radio",
-    type: "string",
-    options: ["yes", "no"],
-    description: "Specify whether an element's attribute values and the values of its text node children are to be translated when the page is localized, or whether to leave them unchanged."
-  },
-  typeof: { required: false, control: "text", type: "string" },
-  unselectable: {
-    required: false,
-    control: "radio",
-    type: "string",
-    options: ["on", "off"]
-  },
-  vocab: { required: false, control: "text", type: "string" }
-};
-
-// src/code-text.ws.ts
-var presetStyle21 = {
-  code: [
-    ...code,
-    {
-      property: "display",
-      value: { type: "keyword", value: "block" }
-    },
-    {
-      property: "whiteSpaceCollapse",
-      value: { type: "keyword", value: "preserve" }
-    },
-    {
-      property: "textWrapMode",
-      value: { type: "keyword", value: "wrap" }
-    },
-    {
-      property: "paddingLeft",
-      value: { type: "unit", value: 0.2, unit: "em" }
-    },
-    {
-      property: "paddingRight",
-      value: { type: "unit", value: 0.2, unit: "em" }
-    },
-    {
-      property: "backgroundColor",
-      value: { type: "rgb", r: 238, g: 238, b: 238, alpha: 1 }
-    }
-  ]
-};
-var meta26 = {
-  category: "general",
-  type: "embed",
-  description: "Use this component when you want to display code as text on the page.",
-  icon: CodeTextIcon,
-  invalidAncestors: ["CodeText"],
-  states: defaultStates20,
-  presetStyle: presetStyle21,
-  order: 9
-};
-var propsMeta5 = {
-  props: {
-    ...props5,
-    code: {
-      required: true,
-      control: "codetext",
-      type: "string"
-    }
-  },
-  initialProps: ["id", "className", "lang", "code"]
-};
-
-// src/label.ws.ts
-import { LabelIcon } from "@webstudio-is/icons/svg";
-import {
-  defaultStates as defaultStates21
-} from "@webstudio-is/react-sdk";
-import { label } from "@webstudio-is/sdk/normalize.css";
-
-// src/__generated__/label.props.ts
-var props6 = {
-  about: { required: false, control: "text", type: "string" },
-  accessKey: {
-    required: false,
-    control: "text",
-    type: "string",
-    description: "Keyboard shortcut to activate or add focus to the element."
-  },
-  "aria-activedescendant": {
-    description: "Identifies the currently active element when DOM focus is on a composite widget, textbox, group, or application.",
-    required: false,
-    control: "text",
-    type: "string"
-  },
-  "aria-atomic": {
-    description: "Indicates whether assistive technologies will present all, or only parts of, the changed region based on the change notifications defined by the aria-relevant attribute.",
-    required: false,
-    control: "boolean",
-    type: "boolean"
-  },
-  "aria-autocomplete": {
-    description: "Indicates whether inputting text could trigger display of one or more predictions of the user's intended value for an input and specifies how predictions would be\npresented if they are made.",
-    required: false,
-    control: "select",
-    type: "string",
-    options: ["list", "none", "inline", "both"]
-  },
-  "aria-braillelabel": {
-    description: "Defines a string value that labels the current element, which is intended to be converted into Braille.",
-    required: false,
-    control: "text",
-    type: "string"
-  },
-  "aria-brailleroledescription": {
-    description: "Defines a human-readable, author-localized abbreviated description for the role of an element, which is intended to be converted into Braille.",
-    required: false,
-    control: "text",
-    type: "string"
-  },
-  "aria-busy": { required: false, control: "boolean", type: "boolean" },
-  "aria-checked": {
-    description: 'Indicates the current "checked" state of checkboxes, radio buttons, and other widgets.',
-    required: false,
-    control: "text",
-    type: "string"
-  },
-  "aria-colcount": {
-    description: "Defines the total number of columns in a table, grid, or treegrid.",
-    required: false,
-    control: "number",
-    type: "number"
-  },
-  "aria-colindex": {
-    description: "Defines an element's column index or position with respect to the total number of columns within a table, grid, or treegrid.",
-    required: false,
-    control: "number",
-    type: "number"
-  },
-  "aria-colindextext": {
-    description: "Defines a human readable text alternative of aria-colindex.",
-    required: false,
-    control: "text",
-    type: "string"
-  },
-  "aria-colspan": {
-    description: "Defines the number of columns spanned by a cell or gridcell within a table, grid, or treegrid.",
-    required: false,
-    control: "number",
-    type: "number"
-  },
-  "aria-controls": {
-    description: "Identifies the element (or elements) whose contents or presence are controlled by the current element.",
-    required: false,
-    control: "text",
-    type: "string"
-  },
-  "aria-current": {
-    description: "Indicates the element that represents the current item within a container or set of related elements.",
-    required: false,
-    control: "text",
-    type: "string"
-  },
-  "aria-describedby": {
-    description: "Identifies the element (or elements) that describes the object.",
-    required: false,
-    control: "text",
-    type: "string"
-  },
-  "aria-description": {
-    description: "Defines a string value that describes or annotates the current element.",
-    required: false,
-    control: "text",
-    type: "string"
-  },
-  "aria-details": {
-    description: "Identifies the element that provides a detailed, extended description for the object.",
-    required: false,
-    control: "text",
-    type: "string"
-  },
-  "aria-disabled": {
-    description: "Indicates that the element is perceivable but disabled, so it is not editable or otherwise operable.",
-    required: false,
-    control: "boolean",
-    type: "boolean"
-  },
-  "aria-dropeffect": {
-    description: "Indicates what functions can be performed when a dragged object is released on the drop target.",
-    required: false,
-    control: "select",
-    type: "string",
-    options: ["link", "none", "copy", "execute", "move", "popup"]
-  },
-  "aria-errormessage": {
-    description: "Identifies the element that provides an error message for the object.",
-    required: false,
-    control: "text",
-    type: "string"
-  },
-  "aria-expanded": {
-    description: "Indicates whether the element, or another grouping element it controls, is currently expanded or collapsed.",
-    required: false,
-    control: "boolean",
-    type: "boolean"
-  },
-  "aria-flowto": {
-    description: "Identifies the next element (or elements) in an alternate reading order of content which, at the user's discretion,\nallows assistive technology to override the general default of reading in document source order.",
-    required: false,
-    control: "text",
-    type: "string"
-  },
-  "aria-grabbed": {
-    description: `Indicates an element's "grabbed" state in a drag-and-drop operation.`,
-    required: false,
-    control: "boolean",
-    type: "boolean"
-  },
-  "aria-haspopup": {
-    description: "Indicates the availability and type of interactive popup element, such as menu or dialog, that can be triggered by an element.",
-    required: false,
-    control: "text",
-    type: "string"
-  },
-  "aria-hidden": {
-    description: "Indicates whether the element is exposed to an accessibility API.",
-    required: false,
-    control: "boolean",
-    type: "boolean"
-  },
-  "aria-invalid": {
-    description: "Indicates the entered value does not conform to the format expected by the application.",
-    required: false,
-    control: "text",
-    type: "string"
-  },
-  "aria-keyshortcuts": {
-    description: "Indicates keyboard shortcuts that an author has implemented to activate or give focus to an element.",
-    required: false,
-    control: "text",
-    type: "string"
-  },
-  "aria-label": {
-    description: "Provides the accessible name that describes an interactive element if no other accessible name exists, for example in a button that contains an image with no text.",
-    required: false,
-    control: "text",
-    type: "string"
-  },
-  "aria-labelledby": {
-    description: "Identifies the element (or elements) that labels the current element.",
-    required: false,
-    control: "text",
-    type: "string"
-  },
-  "aria-level": {
-    description: "Defines the hierarchical level of an element within a structure.",
-    required: false,
-    control: "number",
-    type: "number"
-  },
-  "aria-live": {
-    description: "Indicates that an element will be updated, and describes the types of updates the user agents, assistive technologies, and user can expect from the live region.",
-    required: false,
-    control: "radio",
-    type: "string",
-    options: ["off", "assertive", "polite"]
-  },
-  "aria-modal": {
-    description: "Indicates whether an element is modal when displayed.",
-    required: false,
-    control: "boolean",
-    type: "boolean"
-  },
-  "aria-multiline": {
-    description: "Indicates whether a text box accepts multiple lines of input or only a single line.",
-    required: false,
-    control: "boolean",
-    type: "boolean"
-  },
-  "aria-multiselectable": {
-    description: "Indicates that the user may select more than one item from the current selectable descendants.",
-    required: false,
-    control: "boolean",
-    type: "boolean"
-  },
-  "aria-orientation": {
-    description: "Indicates whether the element's orientation is horizontal, vertical, or unknown/ambiguous.",
-    required: false,
-    control: "radio",
-    type: "string",
-    options: ["horizontal", "vertical"]
-  },
-  "aria-owns": {
-    description: "Identifies an element (or elements) in order to define a visual, functional, or contextual parent/child relationship\nbetween DOM elements where the DOM hierarchy cannot be used to represent the relationship.",
-    required: false,
-    control: "text",
-    type: "string"
-  },
-  "aria-placeholder": {
-    description: "Defines a short hint (a word or short phrase) intended to aid the user with data entry when the control has no value.\nA hint could be a sample value or a brief description of the expected format.",
-    required: false,
-    control: "text",
-    type: "string"
-  },
-  "aria-posinset": {
-    description: "Defines an element's number or position in the current set of listitems or treeitems. Not required if all elements in the set are present in the DOM.",
-    required: false,
-    control: "number",
-    type: "number"
-  },
-  "aria-pressed": {
-    description: 'Indicates the current "pressed" state of toggle buttons.',
-    required: false,
-    control: "text",
-    type: "string"
-  },
-  "aria-readonly": {
-    description: "Indicates that the element is not editable, but is otherwise operable.",
-    required: false,
-    control: "boolean",
-    type: "boolean"
-  },
-  "aria-relevant": {
-    description: "Indicates what notifications the user agent will trigger when the accessibility tree within a live region is modified.",
-    required: false,
-    control: "select",
-    type: "string",
-    options: [
-      "text",
-      "additions",
-      "additions removals",
-      "additions text",
-      "all",
-      "removals",
-      "removals additions",
-      "removals text",
-      "text additions",
-      "text removals"
-    ]
-  },
-  "aria-required": {
-    description: "Indicates that user input is required on the element before a form may be submitted.",
-    required: false,
-    control: "boolean",
-    type: "boolean"
-  },
-  "aria-roledescription": {
-    description: "Defines a human-readable, author-localized description for the role of an element.",
-    required: false,
-    control: "text",
-    type: "string"
-  },
-  "aria-rowcount": {
-    description: "Defines the total number of rows in a table, grid, or treegrid.",
-    required: false,
-    control: "number",
-    type: "number"
-  },
-  "aria-rowindex": {
-    description: "Defines an element's row index or position with respect to the total number of rows within a table, grid, or treegrid.",
-    required: false,
-    control: "number",
-    type: "number"
-  },
-  "aria-rowindextext": {
-    description: "Defines a human readable text alternative of aria-rowindex.",
-    required: false,
-    control: "text",
-    type: "string"
-  },
-  "aria-rowspan": {
-    description: "Defines the number of rows spanned by a cell or gridcell within a table, grid, or treegrid.",
-    required: false,
-    control: "number",
-    type: "number"
-  },
-  "aria-selected": {
-    description: 'Indicates the current "selected" state of various widgets.',
-    required: false,
-    control: "boolean",
-    type: "boolean"
-  },
-  "aria-setsize": {
-    description: "Defines the number of items in the current set of listitems or treeitems. Not required if all elements in the set are present in the DOM.",
-    required: false,
-    control: "number",
-    type: "number"
-  },
-  "aria-sort": {
-    description: "Indicates if items in a table or grid are sorted in ascending or descending order.",
-    required: false,
-    control: "select",
-    type: "string",
-    options: ["none", "ascending", "descending", "other"]
-  },
-  "aria-valuemax": {
-    description: "Defines the maximum allowed value for a range widget.",
-    required: false,
-    control: "number",
-    type: "number"
-  },
-  "aria-valuemin": {
-    description: "Defines the minimum allowed value for a range widget.",
-    required: false,
-    control: "number",
-    type: "number"
-  },
-  "aria-valuenow": {
-    description: "Defines the current value for a range widget.",
-    required: false,
-    control: "number",
-    type: "number"
-  },
-  "aria-valuetext": {
-    description: "Defines the human readable text alternative of aria-valuenow for a range widget.",
-    required: false,
-    control: "text",
-    type: "string"
-  },
-  autoCapitalize: {
-    required: false,
-    control: "text",
-    type: "string",
-    description: "Sets whether input is automatically capitalized when entered by user."
-  },
-  autoCorrect: { required: false, control: "text", type: "string" },
-  autoFocus: {
-    required: false,
-    control: "boolean",
-    type: "boolean",
-    description: "Indicates that an element should be focused on page load, or when its parent dialog is displayed."
-  },
-  autoSave: { required: false, control: "text", type: "string" },
-  className: { required: false, control: "text", type: "string" },
-  color: {
-    required: false,
-    control: "color",
-    type: "string",
-    description: "This attribute sets the text color using either a named color or a  color specified in the hexadecimal #RRGGBB format. Note: This is a legacy attribute. Please use the CSS color property instead."
-  },
-  content: {
-    required: false,
-    control: "text",
-    type: "string",
-    description: "A value associated with http-equiv orname depending on the context."
-  },
-  contextMenu: {
-    required: false,
-    control: "text",
-    type: "string",
-    description: "Defines the ID of a menu element which willserve as the element's context menu."
-  },
-  datatype: { required: false, control: "text", type: "string" },
-  defaultChecked: { required: false, control: "boolean", type: "boolean" },
-  defaultValue: { required: false, control: "text", type: "string" },
-  dir: {
-    required: false,
-    control: "text",
-    type: "string",
-    description: "Defines the text direction. Allowed values are ltr (Left-To-Right) or rtl (Right-To-Left)"
-  },
-  draggable: {
-    required: false,
-    control: "boolean",
-    type: "boolean",
-    description: "Defines whether the element can be dragged."
-  },
-  form: {
-    required: false,
-    control: "text",
-    type: "string",
-    description: "Indicates the form that is the owner of the element."
-  },
-  hidden: {
-    required: false,
-    control: "boolean",
-    type: "boolean",
-    description: "Prevents rendering of given element, while keeping child elements, e.g. script elements, active."
-  },
-  htmlFor: {
-    required: false,
-    control: "text",
-    type: "string",
-    description: "Associates this Label with an Input. The value of the \u201CFor\u201D attribute should match the ID attribute of the corresponding Input element"
-  },
-  id: {
-    required: false,
-    control: "text",
-    type: "string",
-    description: "Often used with CSS to style a specific element. The value of this attribute must be unique."
-  },
-  inputMode: {
-    description: "Hints at the type of data that might be entered by the user while editing the element or its contents",
-    required: false,
-    control: "select",
-    type: "string",
-    options: [
-      "search",
-      "text",
-      "none",
-      "tel",
-      "url",
-      "email",
-      "numeric",
-      "decimal"
-    ]
-  },
-  is: {
-    description: "Specify that a standard HTML element should behave like a defined custom built-in element",
-    required: false,
-    control: "text",
-    type: "string"
-  },
-  itemID: { required: false, control: "text", type: "string" },
-  itemProp: { required: false, control: "text", type: "string" },
-  itemRef: { required: false, control: "text", type: "string" },
-  itemScope: { required: false, control: "boolean", type: "boolean" },
-  itemType: { required: false, control: "text", type: "string" },
-  lang: {
-    required: false,
-    control: "text",
-    type: "string",
-    description: "Defines the language used in the element."
-  },
-  nonce: { required: false, control: "text", type: "string" },
-  prefix: { required: false, control: "text", type: "string" },
-  property: { required: false, control: "text", type: "string" },
-  radioGroup: { required: false, control: "text", type: "string" },
-  rel: {
-    required: false,
-    control: "text",
-    type: "string",
-    description: "Specifies the relationship of the target object to the link object."
-  },
-  resource: { required: false, control: "text", type: "string" },
-  results: { required: false, control: "number", type: "number" },
-  rev: { required: false, control: "text", type: "string" },
-  role: {
-    required: false,
-    control: "text",
-    type: "string",
-    description: "Defines an explicit role for an element for use by assistive technologies."
-  },
-  security: { required: false, control: "text", type: "string" },
-  slot: {
-    required: false,
-    control: "text",
-    type: "string",
-    description: "Assigns a slot in a shadow DOM shadow tree to an element."
-  },
-  spellCheck: {
-    required: false,
-    control: "boolean",
-    type: "boolean",
-    description: "Indicates whether spell checking is allowed for the element."
-  },
-  suppressContentEditableWarning: {
-    required: false,
-    control: "boolean",
-    type: "boolean"
-  },
-  suppressHydrationWarning: {
-    required: false,
-    control: "boolean",
-    type: "boolean"
-  },
-  tabIndex: {
-    required: false,
-    control: "number",
-    type: "number",
-    description: "Overrides the browser's default tab order and follows the one specified instead."
-  },
-  title: {
-    required: false,
-    control: "text",
-    type: "string",
-    description: "Text to be displayed in a tooltip when hovering over the element."
-  },
-  translate: {
-    required: false,
-    control: "radio",
-    type: "string",
-    options: ["yes", "no"],
-    description: "Specify whether an element's attribute values and the values of its text node children are to be translated when the page is localized, or whether to leave them unchanged."
-  },
-  typeof: { required: false, control: "text", type: "string" },
-  unselectable: {
-    required: false,
-    control: "radio",
-    type: "string",
-    options: ["on", "off"]
-  },
-  vocab: { required: false, control: "text", type: "string" }
-};
-
-// src/label.ws.ts
-var presetStyle22 = {
-  label: [
-    ...label,
-    { property: "display", value: { type: "keyword", value: "block" } }
-  ]
-};
-var meta27 = {
-  category: "forms",
-  invalidAncestors: ["Button", "Label"],
-  type: "container",
-  label: "Input Label",
-  icon: LabelIcon,
-  states: defaultStates21,
-  presetStyle: presetStyle22,
-  order: 2,
-  template: [
-    {
-      type: "instance",
-      component: "Label",
-      children: [{ type: "text", value: "Form Label", placeholder: true }]
-    }
-  ]
-};
-var propsMeta6 = {
-  props: {
-    ...props6,
-    htmlFor: {
-      ...props6.htmlFor,
-      label: "For"
-    }
-  },
-  initialProps: ["id", "className", "htmlFor"]
-};
-
-// src/textarea.ws.ts
-import { FormTextAreaIcon } from "@webstudio-is/icons/svg";
-import {
-  defaultStates as defaultStates22
-} from "@webstudio-is/react-sdk";
-import { textarea } from "@webstudio-is/sdk/normalize.css";
-var presetStyle23 = {
-  textarea: [
-    ...textarea,
-    // resize doesn't work well while on canvas
-    { property: "resize", value: { type: "keyword", value: "none" } },
-    {
-      property: "display",
-      value: { type: "keyword", value: "block" }
-    }
-  ]
-};
-var meta28 = {
-  category: "forms",
-  type: "control",
-  label: "Text Area",
-  description: "A multi-line text input for collecting longer string data from your users.",
-  icon: FormTextAreaIcon,
-  presetStyle: presetStyle23,
-  order: 4,
-  invalidAncestors: ["Button", "Link"],
-  states: [
-    ...defaultStates22,
-    { selector: "::placeholder", label: "Placeholder" },
-    { selector: ":valid", label: "Valid" },
-    { selector: ":invalid", label: "Invalid" },
-    { selector: ":required", label: "Required" },
-    { selector: ":optional", label: "Optional" }
-    // Additional states will go into submenu
-    //{ selector: ":disabled", label: "Disabled" },
-    //{ selector: ":enabled", label: "Enabled" },
-    //{ selector: ":read-only", label: "Read Only" },
-    //{ selector: ":read-write", label: "Read Write" },
-  ]
-};
-
-// src/radio-button.ws.ts
-import { RadioCheckedIcon } from "@webstudio-is/icons/svg";
-import {
-  defaultStates as defaultStates23
-} from "@webstudio-is/react-sdk";
-import { radio } from "@webstudio-is/sdk/normalize.css";
-var presetStyle24 = {
-  input: [
-    ...radio,
-    {
-      property: "marginRight",
-      value: { type: "unit", unit: "em", value: 0.5 }
-    }
-  ]
-};
-var meta29 = {
-  category: "forms",
-  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.",
-  icon: RadioCheckedIcon,
-  presetStyle: presetStyle24,
-  order: 5,
-  states: [
-    ...defaultStates23,
-    { selector: ":checked", label: "Checked" },
-    { selector: ":required", label: "Required" },
-    { selector: ":optional", label: "Optional" }
-    // Additional states will go into submenu
-    //{ selector: ":disabled", label: "Disabled" },
-    //{ selector: ":enabled", label: "Enabled" },
-    //{ selector: ":read-only", label: "Read Only" },
-    //{ selector: ":read-write", label: "Read Write" },
-  ],
-  template: [
-    {
-      type: "instance",
-      component: "Label",
-      label: "Radio Field",
-      children: [
-        { type: "instance", component: "RadioButton", props: [], children: [] },
-        {
-          type: "instance",
-          component: "Text",
-          label: "Radio Label",
-          props: [{ type: "string", name: "tag", value: "span" }],
-          children: [{ type: "text", value: "Radio", placeholder: true }]
-        }
-      ]
-    }
-  ]
-};
-
-// src/checkbox.ws.ts
-import { CheckboxCheckedIcon } from "@webstudio-is/icons/svg";
-import {
-  defaultStates as defaultStates24
-} from "@webstudio-is/react-sdk";
-import { checkbox } from "@webstudio-is/sdk/normalize.css";
-var presetStyle25 = {
-  input: [
-    ...checkbox,
-    {
-      property: "marginRight",
-      value: { type: "unit", unit: "em", value: 0.5 }
-    }
-  ]
-};
-var meta30 = {
-  category: "forms",
-  invalidAncestors: ["Button", "Link"],
-  type: "control",
-  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,
-  order: 6,
-  states: [
-    ...defaultStates24,
-    { selector: ":checked", label: "Checked" },
-    { selector: ":required", label: "Required" },
-    { selector: ":optional", label: "Optional" },
-    { selector: ":disabled", label: "Disabled" },
-    { selector: ":enabled", label: "Enabled" },
-    { selector: ":read-only", label: "Read Only" },
-    { selector: ":read-write", label: "Read Write" }
-  ],
-  template: [
-    {
-      type: "instance",
-      component: "Label",
-      label: "Checkbox Field",
-      children: [
-        { type: "instance", component: "Checkbox", children: [] },
-        {
-          type: "instance",
-          component: "Text",
-          label: "Checkbox Label",
-          props: [{ type: "string", name: "tag", value: "span" }],
-          children: [{ type: "text", value: "Checkbox", placeholder: true }]
-        }
-      ]
-    }
-  ]
-};
-
-// src/vimeo.ws.ts
-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/sdk/normalize.css";
-var presetStyle26 = {
-  div: div3
-};
-var meta31 = {
-  category: "media",
-  type: "container",
-  description: "Add a video to your page that is hosted on Vimeo. Paste a Vimeo URL and configure the video in the Settings tab.",
-  order: 1,
-  icon: VimeoIcon,
-  states: defaultStates25,
-  presetStyle: presetStyle26,
-  invalidAncestors: ["Button", "Heading", "Link"],
-  template: [
-    {
-      type: "instance",
-      component: "Vimeo",
-      styles: [
-        {
-          property: "position",
-          value: { type: "keyword", value: "relative" }
-        },
-        {
-          property: "aspectRatio",
-          value: { type: "keyword", value: "640/360" }
-        },
-        {
-          property: "width",
-          value: { type: "unit", value: 100, unit: "%" }
-        }
-      ],
-      children: [
-        {
-          type: "instance",
-          component: "VimeoPreviewImage",
-          styles: [
-            {
-              property: "position",
-              value: { type: "keyword", value: "absolute" }
-            },
-            {
-              property: "objectFit",
-              value: { type: "keyword", value: "cover" }
-            },
-            {
-              property: "width",
-              value: { type: "unit", value: 100, unit: "%" }
-            },
-            {
-              property: "height",
-              value: { type: "unit", value: 100, unit: "%" }
-            },
-            {
-              property: "borderTopLeftRadius",
-              value: { type: "unit", value: 20, unit: "px" }
-            },
-            {
-              property: "borderTopRightRadius",
-              value: { type: "unit", value: 20, unit: "px" }
-            },
-            {
-              property: "borderBottomLeftRadius",
-              value: { type: "unit", value: 20, unit: "px" }
-            },
-            {
-              property: "borderBottomRightRadius",
-              value: { type: "unit", value: 20, unit: "px" }
-            },
-            {
-              property: "objectPosition",
-              value: { type: "keyword", value: "cover" }
-            }
-          ],
-          children: [],
-          props: [
-            {
-              type: "string",
-              name: "alt",
-              value: "Vimeo video preview image"
-            },
-            {
-              type: "string",
-              name: "sizes",
-              value: "100vw"
-            }
-          ]
-        },
-        {
-          type: "instance",
-          component: "VimeoSpinner",
-          label: "Spinner",
-          styles: [
-            {
-              property: "position",
-              value: { type: "keyword", value: "absolute" }
-            },
-            {
-              property: "top",
-              value: { type: "unit", value: 50, unit: "%" }
-            },
-            {
-              property: "left",
-              value: { type: "unit", value: 50, unit: "%" }
-            },
-            {
-              property: "width",
-              value: { type: "unit", value: 70, unit: "px" }
-            },
-            {
-              property: "height",
-              value: { type: "unit", value: 70, unit: "px" }
-            },
-            {
-              property: "marginTop",
-              value: { type: "unit", value: -35, unit: "px" }
-            },
-            {
-              property: "marginLeft",
-              value: { type: "unit", value: -35, unit: "px" }
-            }
-          ],
-          children: [
-            {
-              type: "instance",
-              component: "HtmlEmbed",
-              label: "Spinner SVG",
-              props: [
-                {
-                  type: "string",
-                  name: "code",
-                  value: SpinnerIcon
-                }
-              ],
-              children: []
-            }
-          ]
-        },
-        {
-          type: "instance",
-          component: "VimeoPlayButton",
-          props: [
-            {
-              type: "string",
-              name: "aria-label",
-              value: "Play button"
-            }
-          ],
-          styles: [
-            {
-              property: "position",
-              value: { type: "keyword", value: "absolute" }
-            },
-            {
-              property: "width",
-              value: { type: "unit", value: 140, unit: "px" }
-            },
-            {
-              property: "height",
-              value: { type: "unit", value: 80, unit: "px" }
-            },
-            {
-              property: "top",
-              value: { type: "unit", value: 50, unit: "%" }
-            },
-            {
-              property: "left",
-              value: { type: "unit", value: 50, unit: "%" }
-            },
-            {
-              property: "marginTop",
-              value: { type: "unit", value: -40, unit: "px" }
-            },
-            {
-              property: "marginLeft",
-              value: { type: "unit", value: -70, unit: "px" }
-            },
-            {
-              property: "display",
-              value: { type: "keyword", value: "flex" }
-            },
-            {
-              property: "alignItems",
-              value: { type: "keyword", value: "center" }
-            },
-            {
-              property: "justifyContent",
-              value: { type: "keyword", value: "center" }
-            },
-            {
-              property: "borderTopStyle",
-              value: { type: "keyword", value: "none" }
-            },
-            {
-              property: "borderRightStyle",
-              value: { type: "keyword", value: "none" }
-            },
-            {
-              property: "borderBottomStyle",
-              value: { type: "keyword", value: "none" }
-            },
-            {
-              property: "borderLeftStyle",
-              value: { type: "keyword", value: "none" }
-            },
-            {
-              property: "borderTopLeftRadius",
-              value: { type: "unit", value: 5, unit: "px" }
-            },
-            {
-              property: "borderTopRightRadius",
-              value: { type: "unit", value: 5, unit: "px" }
-            },
-            {
-              property: "borderBottomLeftRadius",
-              value: { type: "unit", value: 5, unit: "px" }
-            },
-            {
-              property: "borderBottomRightRadius",
-              value: { type: "unit", value: 5, unit: "px" }
-            },
-            {
-              property: "cursor",
-              value: { type: "keyword", value: "pointer" }
-            },
-            {
-              property: "backgroundColor",
-              value: {
-                type: "rgb",
-                r: 18,
-                g: 18,
-                b: 18,
-                alpha: 1
-              }
-            },
-            {
-              property: "color",
-              value: {
-                type: "rgb",
-                r: 255,
-                g: 255,
-                b: 255,
-                alpha: 1
-              }
-            },
-            {
-              state: ":hover",
-              property: "backgroundColor",
-              value: {
-                type: "rgb",
-                r: 0,
-                g: 173,
-                b: 239,
-                alpha: 1
-              }
-            }
-          ],
-          children: [
-            {
-              type: "instance",
-              component: "Box",
-              label: "Play Icon",
-              styles: [
-                {
-                  property: "width",
-                  value: { type: "unit", value: 60, unit: "px" }
-                },
-                {
-                  property: "height",
-                  value: { type: "unit", value: 60, unit: "px" }
-                }
-              ],
-              props: [
-                {
-                  type: "string",
-                  name: "aria-hidden",
-                  value: "true"
-                }
-              ],
-              children: [
-                {
-                  type: "instance",
-                  component: "HtmlEmbed",
-                  label: "Play SVG",
-                  props: [
-                    {
-                      type: "string",
-                      name: "code",
-                      value: PlayIcon
-                    }
-                  ],
-                  children: []
-                }
-              ]
-            }
-          ]
-        }
-      ]
-    }
-  ]
-};
-
-// src/vimeo-preview-image.ws.ts
-import "@webstudio-is/react-sdk";
-
-// src/__generated__/vimeo-preview-image.props.ts
-var props7 = {
-  about: { required: false, control: "text", type: "string" },
-  accessKey: {
-    required: false,
-    control: "text",
-    type: "string",
-    description: "Keyboard shortcut to activate or add focus to the element."
-  },
-  alt: {
-    required: false,
-    control: "text",
-    type: "string",
-    description: "Text description of the image, which is very important for accessibility and search engine optimization. Screen readers read this description to users so they know what the image means. Alt text is also displayed on the page if the image can't be loaded for some reason."
-  },
-  "aria-activedescendant": {
-    description: "Identifies the currently active element when DOM focus is on a composite widget, textbox, group, or application.",
-    required: false,
-    control: "text",
-    type: "string"
-  },
-  "aria-atomic": {
-    description: "Indicates whether assistive technologies will present all, or only parts of, the changed region based on the change notifications defined by the aria-relevant attribute.",
-    required: false,
-    control: "boolean",
-    type: "boolean"
-  },
-  "aria-autocomplete": {
-    description: "Indicates whether inputting text could trigger display of one or more predictions of the user's intended value for an input and specifies how predictions would be\npresented if they are made.",
-    required: false,
-    control: "select",
-    type: "string",
-    options: ["list", "none", "inline", "both"]
-  },
-  "aria-braillelabel": {
-    description: "Defines a string value that labels the current element, which is intended to be converted into Braille.",
-    required: false,
-    control: "text",
-    type: "string"
-  },
-  "aria-brailleroledescription": {
-    description: "Defines a human-readable, author-localized abbreviated description for the role of an element, which is intended to be converted into Braille.",
-    required: false,
-    control: "text",
-    type: "string"
-  },
-  "aria-busy": { required: false, control: "boolean", type: "boolean" },
-  "aria-checked": {
-    description: 'Indicates the current "checked" state of checkboxes, radio buttons, and other widgets.',
-    required: false,
-    control: "text",
-    type: "string"
-  },
-  "aria-colcount": {
-    description: "Defines the total number of columns in a table, grid, or treegrid.",
-    required: false,
-    control: "number",
-    type: "number"
-  },
-  "aria-colindex": {
-    description: "Defines an element's column index or position with respect to the total number of columns within a table, grid, or treegrid.",
-    required: false,
-    control: "number",
-    type: "number"
-  },
-  "aria-colindextext": {
-    description: "Defines a human readable text alternative of aria-colindex.",
-    required: false,
-    control: "text",
-    type: "string"
-  },
-  "aria-colspan": {
-    description: "Defines the number of columns spanned by a cell or gridcell within a table, grid, or treegrid.",
-    required: false,
-    control: "number",
-    type: "number"
-  },
-  "aria-controls": {
-    description: "Identifies the element (or elements) whose contents or presence are controlled by the current element.",
-    required: false,
-    control: "text",
-    type: "string"
-  },
-  "aria-current": {
-    description: "Indicates the element that represents the current item within a container or set of related elements.",
-    required: false,
-    control: "text",
-    type: "string"
-  },
-  "aria-describedby": {
-    description: "Identifies the element (or elements) that describes the object.",
-    required: false,
-    control: "text",
-    type: "string"
-  },
-  "aria-description": {
-    description: "Defines a string value that describes or annotates the current element.",
-    required: false,
-    control: "text",
-    type: "string"
-  },
-  "aria-details": {
-    description: "Identifies the element that provides a detailed, extended description for the object.",
-    required: false,
-    control: "text",
-    type: "string"
-  },
-  "aria-disabled": {
-    description: "Indicates that the element is perceivable but disabled, so it is not editable or otherwise operable.",
-    required: false,
-    control: "boolean",
-    type: "boolean"
-  },
-  "aria-dropeffect": {
-    description: "Indicates what functions can be performed when a dragged object is released on the drop target.",
-    required: false,
-    control: "select",
-    type: "string",
-    options: ["link", "none", "copy", "execute", "move", "popup"]
-  },
-  "aria-errormessage": {
-    description: "Identifies the element that provides an error message for the object.",
-    required: false,
-    control: "text",
-    type: "string"
-  },
-  "aria-expanded": {
-    description: "Indicates whether the element, or another grouping element it controls, is currently expanded or collapsed.",
-    required: false,
-    control: "boolean",
-    type: "boolean"
-  },
-  "aria-flowto": {
-    description: "Identifies the next element (or elements) in an alternate reading order of content which, at the user's discretion,\nallows assistive technology to override the general default of reading in document source order.",
-    required: false,
-    control: "text",
-    type: "string"
-  },
-  "aria-grabbed": {
-    description: `Indicates an element's "grabbed" state in a drag-and-drop operation.`,
-    required: false,
-    control: "boolean",
-    type: "boolean"
-  },
-  "aria-haspopup": {
-    description: "Indicates the availability and type of interactive popup element, such as menu or dialog, that can be triggered by an element.",
-    required: false,
-    control: "text",
-    type: "string"
-  },
-  "aria-hidden": {
-    description: "Indicates whether the element is exposed to an accessibility API.",
-    required: false,
-    control: "boolean",
-    type: "boolean"
-  },
-  "aria-invalid": {
-    description: "Indicates the entered value does not conform to the format expected by the application.",
-    required: false,
-    control: "text",
-    type: "string"
-  },
-  "aria-keyshortcuts": {
-    description: "Indicates keyboard shortcuts that an author has implemented to activate or give focus to an element.",
-    required: false,
-    control: "text",
-    type: "string"
-  },
-  "aria-label": {
-    description: "Provides the accessible name that describes an interactive element if no other accessible name exists, for example in a button that contains an image with no text.",
-    required: false,
-    control: "text",
-    type: "string"
-  },
-  "aria-labelledby": {
-    description: "Identifies the element (or elements) that labels the current element.",
-    required: false,
-    control: "text",
-    type: "string"
-  },
-  "aria-level": {
-    description: "Defines the hierarchical level of an element within a structure.",
-    required: false,
-    control: "number",
-    type: "number"
-  },
-  "aria-live": {
-    description: "Indicates that an element will be updated, and describes the types of updates the user agents, assistive technologies, and user can expect from the live region.",
-    required: false,
-    control: "radio",
-    type: "string",
-    options: ["off", "assertive", "polite"]
-  },
-  "aria-modal": {
-    description: "Indicates whether an element is modal when displayed.",
-    required: false,
-    control: "boolean",
-    type: "boolean"
-  },
-  "aria-multiline": {
-    description: "Indicates whether a text box accepts multiple lines of input or only a single line.",
-    required: false,
-    control: "boolean",
-    type: "boolean"
-  },
-  "aria-multiselectable": {
-    description: "Indicates that the user may select more than one item from the current selectable descendants.",
-    required: false,
-    control: "boolean",
-    type: "boolean"
-  },
-  "aria-orientation": {
-    description: "Indicates whether the element's orientation is horizontal, vertical, or unknown/ambiguous.",
-    required: false,
-    control: "radio",
-    type: "string",
-    options: ["horizontal", "vertical"]
-  },
-  "aria-owns": {
-    description: "Identifies an element (or elements) in order to define a visual, functional, or contextual parent/child relationship\nbetween DOM elements where the DOM hierarchy cannot be used to represent the relationship.",
-    required: false,
-    control: "text",
-    type: "string"
-  },
-  "aria-placeholder": {
-    description: "Defines a short hint (a word or short phrase) intended to aid the user with data entry when the control has no value.\nA hint could be a sample value or a brief description of the expected format.",
-    required: false,
-    control: "text",
-    type: "string"
-  },
-  "aria-posinset": {
-    description: "Defines an element's number or position in the current set of listitems or treeitems. Not required if all elements in the set are present in the DOM.",
-    required: false,
-    control: "number",
-    type: "number"
-  },
-  "aria-pressed": {
-    description: 'Indicates the current "pressed" state of toggle buttons.',
-    required: false,
-    control: "text",
-    type: "string"
-  },
-  "aria-readonly": {
-    description: "Indicates that the element is not editable, but is otherwise operable.",
-    required: false,
-    control: "boolean",
-    type: "boolean"
-  },
-  "aria-relevant": {
-    description: "Indicates what notifications the user agent will trigger when the accessibility tree within a live region is modified.",
-    required: false,
-    control: "select",
-    type: "string",
-    options: [
-      "text",
-      "additions",
-      "additions removals",
-      "additions text",
-      "all",
-      "removals",
-      "removals additions",
-      "removals text",
-      "text additions",
-      "text removals"
-    ]
-  },
-  "aria-required": {
-    description: "Indicates that user input is required on the element before a form may be submitted.",
-    required: false,
-    control: "boolean",
-    type: "boolean"
-  },
-  "aria-roledescription": {
-    description: "Defines a human-readable, author-localized description for the role of an element.",
-    required: false,
-    control: "text",
-    type: "string"
-  },
-  "aria-rowcount": {
-    description: "Defines the total number of rows in a table, grid, or treegrid.",
-    required: false,
-    control: "number",
-    type: "number"
-  },
-  "aria-rowindex": {
-    description: "Defines an element's row index or position with respect to the total number of rows within a table, grid, or treegrid.",
-    required: false,
-    control: "number",
-    type: "number"
-  },
-  "aria-rowindextext": {
-    description: "Defines a human readable text alternative of aria-rowindex.",
-    required: false,
-    control: "text",
-    type: "string"
-  },
-  "aria-rowspan": {
-    description: "Defines the number of rows spanned by a cell or gridcell within a table, grid, or treegrid.",
-    required: false,
-    control: "number",
-    type: "number"
-  },
-  "aria-selected": {
-    description: 'Indicates the current "selected" state of various widgets.',
-    required: false,
-    control: "boolean",
-    type: "boolean"
-  },
-  "aria-setsize": {
-    description: "Defines the number of items in the current set of listitems or treeitems. Not required if all elements in the set are present in the DOM.",
-    required: false,
-    control: "number",
-    type: "number"
-  },
-  "aria-sort": {
-    description: "Indicates if items in a table or grid are sorted in ascending or descending order.",
-    required: false,
-    control: "select",
-    type: "string",
-    options: ["none", "ascending", "descending", "other"]
-  },
-  "aria-valuemax": {
-    description: "Defines the maximum allowed value for a range widget.",
-    required: false,
-    control: "number",
-    type: "number"
-  },
-  "aria-valuemin": {
-    description: "Defines the minimum allowed value for a range widget.",
-    required: false,
-    control: "number",
-    type: "number"
-  },
-  "aria-valuenow": {
-    description: "Defines the current value for a range widget.",
-    required: false,
-    control: "number",
-    type: "number"
-  },
-  "aria-valuetext": {
-    description: "Defines the human readable text alternative of aria-valuenow for a range widget.",
-    required: false,
-    control: "text",
-    type: "string"
-  },
-  autoCapitalize: {
-    required: false,
-    control: "text",
-    type: "string",
-    description: "Sets whether input is automatically capitalized when entered by user."
-  },
-  autoCorrect: { required: false, control: "text", type: "string" },
-  autoFocus: {
-    required: false,
-    control: "boolean",
-    type: "boolean",
-    description: "Indicates that an element should be focused on page load, or when its parent dialog is displayed."
-  },
-  autoSave: { required: false, control: "text", type: "string" },
-  className: { required: false, control: "text", type: "string" },
-  color: {
-    required: false,
-    control: "color",
-    type: "string",
-    description: "This attribute sets the text color using either a named color or a  color specified in the hexadecimal #RRGGBB format. Note: This is a legacy attribute. Please use the CSS color property instead."
-  },
-  content: {
-    required: false,
-    control: "text",
-    type: "string",
-    description: "A value associated with http-equiv orname depending on the context."
-  },
-  contextMenu: {
-    required: false,
-    control: "text",
-    type: "string",
-    description: "Defines the ID of a menu element which willserve as the element's context menu."
-  },
-  crossOrigin: {
-    required: false,
-    control: "radio",
-    type: "string",
-    options: ["", "anonymous", "use-credentials"],
-    description: "How the element handles cross-origin requests"
-  },
-  datatype: { required: false, control: "text", type: "string" },
-  decoding: {
-    required: false,
-    control: "radio",
-    type: "string",
-    options: ["async", "auto", "sync"],
-    description: "Indicates the preferred method to decode the image."
-  },
-  defaultChecked: { required: false, control: "boolean", type: "boolean" },
-  defaultValue: { required: false, control: "text", type: "string" },
-  dir: {
-    required: false,
-    control: "text",
-    type: "string",
-    description: "Defines the text direction. Allowed values are ltr (Left-To-Right) or rtl (Right-To-Left)"
-  },
-  draggable: {
-    required: false,
-    control: "boolean",
-    type: "boolean",
-    description: "Defines whether the element can be dragged."
-  },
-  fetchPriority: {
-    required: false,
-    control: "radio",
-    type: "string",
-    options: ["high", "low", "auto"]
-  },
-  height: {
-    required: false,
-    control: "number",
-    type: "number",
-    description: "Defines the image\u2019s height in pixels."
-  },
-  hidden: {
-    required: false,
-    control: "boolean",
-    type: "boolean",
-    description: "Prevents rendering of given element, while keeping child elements, e.g. script elements, active."
-  },
-  id: {
-    required: false,
-    control: "text",
-    type: "string",
-    description: "Often used with CSS to style a specific element. The value of this attribute must be unique."
-  },
-  inputMode: {
-    description: "Hints at the type of data that might be entered by the user while editing the element or its contents",
-    required: false,
-    control: "select",
-    type: "string",
-    options: [
-      "search",
-      "text",
-      "none",
-      "tel",
-      "url",
-      "email",
-      "numeric",
-      "decimal"
-    ]
-  },
-  is: {
-    description: "Specify that a standard HTML element should behave like a defined custom built-in element",
-    required: false,
-    control: "text",
-    type: "string"
-  },
-  itemID: { required: false, control: "text", type: "string" },
-  itemProp: { required: false, control: "text", type: "string" },
-  itemRef: { required: false, control: "text", type: "string" },
-  itemScope: { required: false, control: "boolean", type: "boolean" },
-  itemType: { required: false, control: "text", type: "string" },
-  lang: {
-    required: false,
-    control: "text",
-    type: "string",
-    description: "Defines the language used in the element."
-  },
-  loading: {
-    required: false,
-    control: "radio",
-    type: "string",
-    options: ["eager", "lazy"],
-    description: "Determines whether the image will load as soon as possible (Eager), or when it scrolls into view (Lazy). Lazy loading is a great option for pages with many images because it can significantly reduce the time it takes for the page to load initially."
-  },
-  nonce: { required: false, control: "text", type: "string" },
-  optimize: { required: false, control: "boolean", type: "boolean" },
-  prefix: { required: false, control: "text", type: "string" },
-  property: { required: false, control: "text", type: "string" },
-  quality: { required: false, control: "number", type: "number" },
-  radioGroup: { required: false, control: "text", type: "string" },
-  referrerPolicy: {
-    required: false,
-    control: "select",
-    type: "string",
-    options: [
-      "",
-      "origin",
-      "no-referrer",
-      "no-referrer-when-downgrade",
-      "origin-when-cross-origin",
-      "same-origin",
-      "strict-origin",
-      "strict-origin-when-cross-origin",
-      "unsafe-url"
-    ],
-    description: "Specifies which referrer is sent when fetching the resource."
-  },
-  rel: {
-    required: false,
-    control: "text",
-    type: "string",
-    description: "Specifies the relationship of the target object to the link object."
-  },
-  resource: { required: false, control: "text", type: "string" },
-  results: { required: false, control: "number", type: "number" },
-  rev: { required: false, control: "text", type: "string" },
-  role: {
-    required: false,
-    control: "text",
-    type: "string",
-    description: "Defines an explicit role for an element for use by assistive technologies."
-  },
-  security: { required: false, control: "text", type: "string" },
-  sizes: { required: false, control: "text", type: "string" },
-  slot: {
-    required: false,
-    control: "text",
-    type: "string",
-    description: "Assigns a slot in a shadow DOM shadow tree to an element."
-  },
-  spellCheck: {
-    required: false,
-    control: "boolean",
-    type: "boolean",
-    description: "Indicates whether spell checking is allowed for the element."
-  },
-  src: {
-    required: false,
-    control: "text",
-    type: "string",
-    description: "The URL of the embeddable content."
-  },
-  srcSet: {
-    required: false,
-    control: "text",
-    type: "string",
-    description: "One or more responsive image candidates."
-  },
-  suppressContentEditableWarning: {
-    required: false,
-    control: "boolean",
-    type: "boolean"
-  },
-  suppressHydrationWarning: {
-    required: false,
-    control: "boolean",
-    type: "boolean"
-  },
-  tabIndex: {
-    required: false,
-    control: "number",
-    type: "number",
-    description: "Overrides the browser's default tab order and follows the one specified instead."
-  },
-  title: {
-    required: false,
-    control: "text",
-    type: "string",
-    description: "Text to be displayed in a tooltip when hovering over the element."
-  },
-  translate: {
-    required: false,
-    control: "radio",
-    type: "string",
-    options: ["yes", "no"],
-    description: "Specify whether an element's attribute values and the values of its text node children are to be translated when the page is localized, or whether to leave them unchanged."
-  },
-  typeof: { required: false, control: "text", type: "string" },
-  unselectable: {
-    required: false,
-    control: "radio",
-    type: "string",
-    options: ["on", "off"]
-  },
-  useMap: { required: false, control: "text", type: "string" },
-  vocab: { required: false, control: "text", type: "string" },
-  width: {
-    required: false,
-    control: "number",
-    type: "number",
-    description: "Defines the image\u2019s width in pixels."
-  }
-};
-
-// src/vimeo-preview-image.ws.ts
-var meta32 = {
-  ...meta21,
-  category: "hidden",
-  label: "Preview Image",
-  requiredAncestors: ["Vimeo"]
-};
-var propsMeta7 = {
-  props: { ...props7, ...propsOverrides },
-  initialProps: propsMeta4.initialProps
-};
-
-// src/vimeo-play-button.ws.ts
-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/sdk/normalize.css";
-var presetStyle27 = {
-  button: button2
-};
-var meta33 = {
-  category: "hidden",
-  type: "container",
-  invalidAncestors: ["Button"],
-  requiredAncestors: ["Vimeo"],
-  label: "Play Button",
-  icon: ButtonElementIcon2,
-  presetStyle: presetStyle27,
-  states: defaultStates26
-};
-
-// src/vimeo-spinner.ws.ts
-import {
-  defaultStates as defaultStates27
-} from "@webstudio-is/react-sdk";
-import { div as div4 } from "@webstudio-is/sdk/normalize.css";
-import { BoxIcon as BoxIcon2 } from "@webstudio-is/icons/svg";
-var presetStyle28 = {
-  div: div4
-};
-var meta34 = {
-  type: "container",
-  icon: BoxIcon2,
-  states: defaultStates27,
-  presetStyle: presetStyle28,
-  category: "hidden",
-  label: "Spinner",
-  requiredAncestors: ["Vimeo"]
-};
-
-// src/xml-node.ws.ts
-import { XmlIcon } from "@webstudio-is/icons/svg";
-import "@webstudio-is/react-sdk";
-var meta35 = {
-  category: "xml",
-  order: 6,
-  type: "container",
-  icon: XmlIcon,
-  stylable: false,
-  description: "XML Node"
-};
-
-// src/time.ws.ts
-import { CalendarIcon } from "@webstudio-is/icons/svg";
-import {
-  defaultStates as defaultStates28
-} from "@webstudio-is/react-sdk";
-import { time } from "@webstudio-is/sdk/normalize.css";
-var presetStyle29 = {
-  time
-};
-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: 5
-};
-
-// src/select.ws.ts
-import { SelectIcon } from "@webstudio-is/icons/svg";
-import {
-  defaultStates as defaultStates29
-} from "@webstudio-is/react-sdk";
-import { select } from "@webstudio-is/sdk/normalize.css";
-var presetStyle30 = {
-  select: [
-    ...select,
-    {
-      property: "display",
-      value: { type: "keyword", value: "block" }
-    }
-  ]
-};
-var meta37 = {
-  category: "forms",
-  invalidAncestors: ["Button", "Link"],
-  type: "container",
-  description: "A drop-down menu for users to select a single option from a predefined list.",
-  icon: SelectIcon,
-  presetStyle: presetStyle30,
-  order: 4,
-  states: [
-    ...defaultStates29,
-    { selector: "::placeholder", label: "Placeholder" },
-    { selector: ":valid", label: "Valid" },
-    { selector: ":invalid", label: "Invalid" },
-    { selector: ":required", label: "Required" },
-    { selector: ":optional", label: "Optional" }
-  ],
-  template: [
-    {
-      type: "instance",
-      component: "Select",
-      label: "Select",
-      children: [
-        {
-          type: "instance",
-          component: "Option",
-          label: "Option",
-          props: [
-            { type: "string", name: "label", value: "Please choose an option" },
-            { type: "string", name: "value", value: "" }
-          ],
-          children: []
-        },
-        {
-          type: "instance",
-          component: "Option",
-          label: "Option",
-          props: [
-            { type: "string", name: "label", value: "Option A" },
-            { type: "string", name: "value", value: "a" }
-          ],
-          children: []
-        },
-        {
-          type: "instance",
-          component: "Option",
-          label: "Option",
-          props: [
-            { type: "string", name: "label", value: "Option B" },
-            { type: "string", name: "value", value: "b" }
-          ],
-          children: []
-        },
-        {
-          type: "instance",
-          component: "Option",
-          label: "Option",
-          props: [
-            { type: "string", name: "label", value: "Option C" },
-            { type: "string", name: "value", value: "c" }
-          ],
-          children: []
-        }
-      ]
-    }
-  ]
-};
-
-// src/option.ws.ts
-import { ItemIcon } from "@webstudio-is/icons/svg";
-import "@webstudio-is/react-sdk";
-var presetStyle31 = {
-  option: [
-    {
-      property: "backgroundColor",
-      state: ":checked",
-      value: {
-        type: "rgb",
-        alpha: 1,
-        r: 209,
-        g: 209,
-        b: 209
-      }
-    }
-  ]
-};
-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",
-  description: "An item within a drop-down menu that users can select as their chosen value.",
-  icon: ItemIcon,
-  presetStyle: presetStyle31,
-  states: [
-    // Applies when option is being activated (clicked)
-    { selector: ":active", label: "Active" },
-    // Applies to the currently selected option
-    { selector: ":checked", label: "Checked" },
-    // For <option> elements: The :default pseudo-class selects the <option> that has the selected attribute when the page loads. This is true even if the user later selects a different option.
-    { selector: ":default", label: "Default" },
-    { selector: ":hover", label: "Hover" },
-    { selector: ":disabled", label: "Disabled" }
-  ]
-};
+import { meta as o } from "./slot.ws.js";
+import { meta as a } from "./fragment.ws.js";
+import { meta as p } from "./html-embed.ws.js";
+import { meta as s } from "./markdown-embed.ws.js";
+import { meta as i } from "./content-embed.ws.js";
+import { meta as d } from "./body.ws.js";
+import { meta as c } from "./box.ws.js";
+import { meta as B } from "./text.ws.js";
+import { meta as b } from "./heading.ws.js";
+import { meta as g } from "./paragraph.ws.js";
+import { meta as I } from "./link.ws.js";
+import { meta as V } from "./rich-text-link.ws.js";
+import { meta as C } from "./span.ws.js";
+import { meta as F } from "./bold.ws.js";
+import { meta as R } from "./italic.ws.js";
+import { meta as y } from "./superscript.ws.js";
+import { meta as X } from "./subscript.ws.js";
+import { meta as v } from "./button.ws.js";
+import { meta as N } from "./input.ws.js";
+import { meta as j, meta as z } from "./form.ws.js";
+import { meta as D } from "./image.ws.js";
+import { meta as J } from "./blockquote.ws.js";
+import { meta as Q } from "./list.ws.js";
+import { meta as W } from "./list-item.ws.js";
+import { meta as Z } from "./separator.ws.js";
+import { meta as $ } from "./code-text.ws.js";
+import { meta as te } from "./label.ws.js";
+import { meta as me } from "./textarea.ws.js";
+import { meta as re } from "./radio-button.ws.js";
+import { meta as xe } from "./checkbox.ws.js";
+import { meta as fe } from "./vimeo.ws.js";
+import { meta as ne } from "./vimeo-preview-image.ws.js";
+import { meta as le } from "./vimeo-play-button.ws.js";
+import { meta as ue } from "./vimeo-spinner.ws.js";
+import { meta as Se } from "./xml-node.ws.js";
+import { meta as Te } from "./xml-time.ws.js";
+import { meta as ke } from "./time.ws.js";
+import { meta as Le } from "./select.ws.js";
+import { meta as he } from "./option.ws.js";
 export {
-  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,
-  meta9 as Heading,
-  meta3 as HtmlEmbed,
-  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,
-  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
+  J as Blockquote,
+  d as Body,
+  F as Bold,
+  c as Box,
+  v as Button,
+  xe as Checkbox,
+  $ as CodeText,
+  i as ContentEmbed,
+  j as Form,
+  a as Fragment,
+  b as Heading,
+  p as HtmlEmbed,
+  D as Image,
+  N as Input,
+  R as Italic,
+  te as Label,
+  I as Link,
+  Q as List,
+  W as ListItem,
+  s as MarkdownEmbed,
+  he as Option,
+  g as Paragraph,
+  re as RadioButton,
+  z as RemixForm,
+  V as RichTextLink,
+  Le as Select,
+  Z as Separator,
+  o as Slot,
+  C as Span,
+  X as Subscript,
+  y as Superscript,
+  B as Text,
+  me as Textarea,
+  ke as Time,
+  fe as Vimeo,
+  le as VimeoPlayButton,
+  ne as VimeoPreviewImage,
+  ue as VimeoSpinner,
+  Se as XmlNode,
+  Te as XmlTime
 };