webstudio 0.220.0 → 0.221.0

package/lib/cli.js

@@ -29,7 +29,7 @@ import { simple } from "acorn-walk";
 import reservedIdentifiers from "reserved-identifiers";
 import { kebabCase, camelCase } from "change-case";
 import { parseFragment, defaultTreeAdapter } from "parse5";
-import { x as x$3 } from "tinyexec";
+import { x as x$2 } from "tinyexec";
 import makeCLI from "yargs";
 const GLOBAL_CONFIG_FOLDER = envPaths("webstudio").config;
 const GLOBAL_CONFIG_FILE_NAME = "webstudio-config.json";
@@ -1286,7 +1286,10 @@ var NestingRule = (_b = class {
       if (declaration.breakpoint !== breakpoint) {
         continue;
       }
-      const { selector: nestedSelector } = declaration;
+      let nestedSelector = declaration.selector;
+      if (nestedSelector === ":local-link") {
+        nestedSelector = "[aria-current=page]";
+      }
       const selector = __privateGet(this, _selector) + __privateGet(this, _descendantSuffix) + nestedSelector;
       let style = styleBySelector.get(selector);
       if (style === void 0) {
@@ -2482,22 +2485,14 @@ var componentCategories = [
   "localization",
   "radix",
   "xml",
+  "other",
   "hidden",
   "internal"
 ];
-var stateCategories = ["states", "component-states"];
 var ComponentState = z.object({
-  category: z.enum(stateCategories).optional(),
   selector: z.string(),
   label: z.string()
 });
-var defaultStates = [
-  { selector: ":hover", label: "Hover" },
-  { selector: ":active", label: "Active" },
-  { selector: ":focus", label: "Focus" },
-  { selector: ":focus-visible", label: "Focus Visible" },
-  { selector: ":focus-within", label: "Focus Within" }
-];
 var ComponentContent = z.string();
 var ContentModel = z.object({
   /*
@@ -2534,11 +2529,11 @@ z.object({
 });
 var normalize_css_exports = {};
 __export(normalize_css_exports, {
-  a: () => a$d,
+  a: () => a$9,
   address: () => address$1,
   article: () => article$1,
   aside: () => aside$1,
-  b: () => b$7,
+  b: () => b$6,
   body: () => body$1,
   button: () => button$1,
   checkbox: () => checkbox$1,
@@ -2556,7 +2551,7 @@ __export(normalize_css_exports, {
   header: () => header$1,
   hr: () => hr$1,
   html: () => html,
-  i: () => i$c,
+  i: () => i$a,
   img: () => img$1,
   input: () => input$1,
   kbd: () => kbd,
@@ -2567,7 +2562,7 @@ __export(normalize_css_exports, {
   nav: () => nav$1,
   ol: () => ol$1,
   optgroup: () => optgroup,
-  p: () => p$7,
+  p: () => p$8,
   pre: () => pre,
   progress: () => progress,
   radio: () => radio$1,
@@ -2623,13 +2618,13 @@ var h3$1 = div$1;
 var h4$1 = div$1;
 var h5$1 = div$1;
 var h6$1 = div$1;
-var i$c = div$1;
+var i$a = div$1;
 var img$1 = div$1;
-var a$d = div$1;
+var a$9 = div$1;
 var li$1 = div$1;
 var ul$1 = div$1;
 var ol$1 = div$1;
-var p$7 = div$1;
+var p$8 = div$1;
 var span$1 = div$1;
 var html = [
   { property: "display", value: { type: "keyword", value: "grid" } },
@@ -2678,30 +2673,21 @@ var body$1 = [
   {
     property: "border-left-width",
     value: { type: "unit", unit: "px", value: 1 }
-  }
-];
-var hr$1 = [
-  { property: "height", value: { type: "unit", unit: "number", value: 0 } },
-  { property: "color", value: { type: "keyword", value: "inherit" } },
-  { property: "box-sizing", value: { type: "keyword", value: "border-box" } },
-  {
-    property: "border-top-width",
-    value: { type: "unit", unit: "px", value: 1 }
   },
   {
-    property: "border-right-width",
-    value: { type: "unit", unit: "px", value: 1 }
+    property: "-webkit-font-smoothing",
+    value: { type: "keyword", value: "antialiased" }
   },
   {
-    property: "border-bottom-width",
-    value: { type: "unit", unit: "px", value: 1 }
-  },
-  {
-    property: "border-left-width",
-    value: { type: "unit", unit: "px", value: 1 }
+    property: "-moz-osx-font-smoothing",
+    value: { type: "keyword", value: "grayscale" }
   }
 ];
-var b$7 = [
+var hr$1 = [
+  { property: "height", value: { type: "unit", unit: "number", value: 0 } },
+  { property: "color", value: { type: "keyword", value: "inherit" } }
+];
+var b$6 = [
   {
     property: "font-weight",
     value: { type: "unit", unit: "number", value: 700 }
@@ -2724,7 +2710,7 @@ var b$7 = [
     value: { type: "unit", unit: "px", value: 1 }
   }
 ];
-var strong = b$7;
+var strong = b$6;
 var code$1 = [
   {
     property: "font-family",
@@ -4854,10 +4840,10 @@ const o$H = {
   category: "general",
   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,
-  order: 5
+  order: 4
 };
-const t$e = {};
-const e$u = {
+const t$i = {};
+const e$x = {
   className: {
     required: false,
     control: "text",
@@ -4872,12 +4858,12 @@ const e$u = {
     type: "boolean"
   }
 };
-const a$c = {
+const a$8 = {
   category: "general",
   label: "HTML Embed",
   description: "Used to add HTML code to the page, such as an SVG or script.",
   icon: EmbedIcon,
-  order: 2,
+  order: 3,
   contentModel: {
     category: "instance",
     children: [descendantComponent]
@@ -4896,13 +4882,13 @@ const a$c = {
   },
   initialProps: ["class", "clientOnly", "executeScriptOnCanvas"],
   props: {
-    ...e$u,
+    ...e$x,
     clientOnly: {
-      ...e$u.clientOnly,
+      ...e$x.clientOnly,
       description: "Activate it for any scripts that can mutate the DOM or introduce interactivity. This only affects the published site."
     },
     executeScriptOnCanvas: {
-      ...e$u.executeScriptOnCanvas,
+      ...e$x.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!"
     },
@@ -4914,16 +4900,10 @@ const a$c = {
     }
   }
 };
-const e$t = {
-  className: {
-    required: false,
-    control: "text",
-    type: "string",
-    description: "Classes to which the element belongs"
-  },
+const t$h = {
   code: { required: true, control: "text", type: "string" }
 };
-const a$b = {
+const a$7 = {
   icon: MarkdownEmbedIcon,
   contentModel: {
     category: "instance",
@@ -4943,7 +4923,7 @@ const a$b = {
   },
   initialProps: ["class"],
   props: {
-    ...e$t,
+    ...t$h,
     code: {
       required: true,
       control: "code",
@@ -4990,13 +4970,13 @@ var h3 = div;
 var h4 = div;
 var h5 = div;
 var h6 = div;
-var i$b = div;
+var i$9 = div;
 var img = div;
-var a$a = div;
+var a$6 = div;
 var li = div;
 var ul = div;
 var ol = div;
-var p$6 = div;
+var p$7 = div;
 var span = div;
 var body = [
   { property: "margin-top", value: { type: "unit", unit: "number", value: 0 } },
@@ -5028,30 +5008,21 @@ var body = [
   {
     property: "border-left-width",
     value: { type: "unit", unit: "px", value: 1 }
-  }
-];
-var hr = [
-  { property: "height", value: { type: "unit", unit: "number", value: 0 } },
-  { property: "color", value: { type: "keyword", value: "inherit" } },
-  { property: "box-sizing", value: { type: "keyword", value: "border-box" } },
-  {
-    property: "border-top-width",
-    value: { type: "unit", unit: "px", value: 1 }
-  },
-  {
-    property: "border-right-width",
-    value: { type: "unit", unit: "px", value: 1 }
   },
   {
-    property: "border-bottom-width",
-    value: { type: "unit", unit: "px", value: 1 }
+    property: "-webkit-font-smoothing",
+    value: { type: "keyword", value: "antialiased" }
   },
   {
-    property: "border-left-width",
-    value: { type: "unit", unit: "px", value: 1 }
+    property: "-moz-osx-font-smoothing",
+    value: { type: "keyword", value: "grayscale" }
   }
 ];
-var b$6 = [
+var hr = [
+  { property: "height", value: { type: "unit", unit: "number", value: 0 } },
+  { property: "color", value: { type: "keyword", value: "inherit" } }
+];
+var b$5 = [
   {
     property: "font-weight",
     value: { type: "unit", unit: "number", value: 700 }
@@ -5308,31 +5279,15 @@ var button = [
 ];
 var select = button;
 const o$G = {};
-const r$f = {
-  body: [
-    ...body,
-    {
-      property: "-webkit-font-smoothing",
-      value: { type: "keyword", value: "antialiased" }
-    },
-    {
-      property: "-moz-osx-font-smoothing",
-      value: { type: "keyword", value: "grayscale" }
-    }
-  ]
-}, i$a = {
-  states: defaultStates,
-  presetStyle: r$f,
+const i$8 = {
+  presetStyle: { body },
   initialProps: ["id", "class"],
   props: o$G
 };
-const t$d = {
+const t$g = {
   tag: { required: false, control: "text", type: "string" }
 };
-const u$1 = {
-  category: "general",
-  description: "A container for content. By default this is a Div, but the tag can be changed in settings.",
-  states: defaultStates,
+const g$2 = {
   presetStyle: {
     div,
     address,
@@ -5345,10 +5300,9 @@ const u$1 = {
     nav,
     section
   },
-  order: 0,
   initialProps: ["tag", "id", "class"],
   props: {
-    ...t$d,
+    ...t$g,
     tag: {
       required: true,
       control: "tag",
@@ -5369,12 +5323,11 @@ const u$1 = {
     }
   }
 };
-const t$c = {
+const t$f = {
   tag: { required: false, control: "text", type: "string" }
 };
-const n$9 = {
+const n$7 = {
   icon: TextIcon,
-  states: defaultStates,
   presetStyle: {
     div: [
       ...div,
@@ -5386,7 +5339,7 @@ const n$9 = {
   },
   initialProps: ["tag", "id", "class"],
   props: {
-    ...t$c,
+    ...t$f,
     tag: {
       required: true,
       control: "tag",
@@ -5395,11 +5348,10 @@ const n$9 = {
     }
   }
 };
-const t$b = {
+const t$e = {
   tag: { required: false, control: "text", type: "string" }
 };
-const n$8 = {
-  states: defaultStates,
+const m$9 = {
   presetStyle: {
     h1,
     h2,
@@ -5410,7 +5362,7 @@ const n$8 = {
   },
   initialProps: ["tag", "id", "class"],
   props: {
-    ...t$b,
+    ...t$e,
     tag: {
       required: true,
       control: "tag",
@@ -5420,13 +5372,12 @@ const n$8 = {
   }
 };
 const o$F = {};
-const i$9 = {
-  states: defaultStates,
-  presetStyle: { p: p$6 },
+const i$7 = {
+  presetStyle: { p: p$7 },
   initialProps: ["id", "class"],
   props: o$F
 };
-const e$s = {
+const e$w = {
   download: {
     required: false,
     control: "boolean",
@@ -5450,31 +5401,20 @@ const e$s = {
     description: "Navigable for form submission"
   }
 };
-const o$E = {
+const t$d = {
   a: [
-    ...a$a,
+    ...a$6,
     {
       property: "display",
       value: { type: "keyword", value: "inline-block" }
     }
   ]
-}, p$5 = {
-  presetStyle: o$E,
-  states: [
-    ...defaultStates,
-    {
-      selector: ":visited",
-      label: "Visited"
-    },
-    {
-      category: "component-states",
-      selector: "[aria-current=page]",
-      label: "Current page"
-    }
-  ],
+}, p$6 = {
+  presetStyle: t$d,
+  states: [{ label: "Current page", selector: "[aria-current=page]" }],
   initialProps: ["id", "class", "href", "target", "prefetch", "download"],
   props: {
-    ...e$s,
+    ...e$w,
     href: {
       type: "string",
       control: "url",
@@ -5482,71 +5422,51 @@ const o$E = {
     }
   }
 };
-const a$9 = p$5;
-const o$D = {};
-const m$7 = {
+const a$5 = p$6;
+const o$E = {};
+const e$v = {
   label: "Text",
   icon: PaintBrushIcon,
-  states: defaultStates,
   presetStyle: { span },
   initialProps: ["id", "class"],
-  props: o$D
+  props: o$E
 };
-const o$C = {};
-const a$8 = {
+const o$D = {};
+const p$5 = {
   label: "Bold Text",
-  states: defaultStates,
-  presetStyle: { b: b$6 },
+  presetStyle: { b: b$5 },
   initialProps: ["id", "class"],
-  props: o$C
+  props: o$D
 };
-const o$B = {};
-const r$e = {
-  i: [
-    ...i$b,
-    {
-      property: "font-style",
-      value: { type: "keyword", value: "italic" }
-    }
-  ]
-}, p$4 = {
+const o$C = {};
+const e$u = {
   label: "Italic Text",
-  states: defaultStates,
-  presetStyle: r$e,
+  presetStyle: { i: i$9 },
   initialProps: ["id", "class"],
-  props: o$B
+  props: o$C
 };
-const o$A = {};
-const i$8 = {
+const o$B = {};
+const o$A = {
   label: "Superscript Text",
-  states: defaultStates,
   presetStyle: { sup },
   initialProps: ["id", "class"],
-  props: o$A
+  props: o$B
 };
 const o$z = {};
-const i$7 = {
+const s$4 = {
   label: "Subscript Text",
-  states: defaultStates,
   presetStyle: { sub },
   initialProps: ["id", "class"],
   props: o$z
 };
 const o$y = {};
-const a$7 = {
-  button
-}, i$6 = {
-  presetStyle: a$7,
-  states: [
-    ...defaultStates,
-    { selector: ":disabled", label: "Disabled" },
-    { selector: ":enabled", label: "Enabled" }
-  ],
+const e$t = {
+  presetStyle: { button },
   initialProps: ["id", "class", "type", "aria-label"],
   props: o$y
 };
 const o$x = {};
-const r$d = {
+const p$4 = {
   input: [
     ...input,
     {
@@ -5554,25 +5474,9 @@ const r$d = {
       value: { type: "keyword", value: "block" }
     }
   ]
-}, s$8 = {
-  category: "forms",
+}, l$4 = {
   label: "Text Input",
-  description: "A single-line text input for collecting string data from your users.",
-  presetStyle: r$d,
-  order: 3,
-  states: [
-    ...defaultStates,
-    { 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" },
-  ],
+  presetStyle: p$4,
   initialProps: [
     "id",
     "class",
@@ -5585,7 +5489,7 @@ const r$d = {
   ],
   props: o$x
 };
-const e$r = {
+const e$s = {
   state: {
     description: "Use this property to reveal the Success and Error states on the canvas so they can be styled. The Initial state is displayed when the page first opens. The Success and Error states are displayed depending on whether the Form submits successfully or unsuccessfully.",
     required: false,
@@ -5595,7 +5499,7 @@ const e$r = {
     options: ["initial", "success", "error"]
   }
 };
-const c$1 = {
+const c$3 = {
   label: "Webhook Form",
   icon: WebhookFormIcon,
   presetStyle: {
@@ -5607,7 +5511,7 @@ const c$1 = {
   ],
   initialProps: ["id", "class", "state", "action"],
   props: {
-    ...e$r,
+    ...e$s,
     action: {
       type: "resource",
       control: "resource",
@@ -5617,22 +5521,18 @@ const c$1 = {
   }
 };
 const o$w = {};
-const o$v = {
+const r$e = {
   form: [
     ...form,
     { property: "min-height", value: { type: "unit", unit: "px", value: 20 } }
   ]
-}, m$6 = {
-  category: "forms",
+}, p$3 = {
   label: "Form",
-  description: "Create filters, surveys, searches and more.",
-  states: defaultStates,
-  presetStyle: o$v,
-  order: 0,
+  presetStyle: r$e,
   initialProps: ["id", "class", "action"],
   props: o$w
 };
-const e$q = {
+const e$r = {
   optimize: {
     description: "Optimize the image for enhanced performance.",
     required: false,
@@ -5642,7 +5542,7 @@ const e$q = {
   },
   quality: { required: false, control: "number", type: "number" }
 };
-const r$c = {
+const o$v = {
   img: [
     ...img,
     // Otherwise on new image insert onto canvas it can overfit screen size multiple times
@@ -5664,11 +5564,10 @@ const r$c = {
       value: { type: "keyword", value: "auto" }
     }
   ]
-}, s$7 = {
+}, i$6 = {
   category: "media",
   description: "Add an image asset to the page. Webstudio automatically converts images to WebP or AVIF format and makes them responsive for best performance.",
-  states: defaultStates,
-  presetStyle: r$c,
+  presetStyle: o$v,
   order: 0,
   initialProps: [
     "id",
@@ -5681,7 +5580,7 @@ const r$c = {
     "optimize"
   ],
   props: {
-    ...e$q,
+    ...e$r,
     // Automatically generated props don't have the right control.
     src: {
       type: "string",
@@ -5692,7 +5591,7 @@ const r$c = {
   }
 };
 const o$u = {};
-const p$3 = {
+const e$q = {
   blockquote: [
     {
       property: "margin-top",
@@ -5739,9 +5638,8 @@ const p$3 = {
       value: { type: "rgb", r: 226, g: 226, b: 226, alpha: 1 }
     }
   ]
-}, a$6 = {
-  states: defaultStates,
-  presetStyle: p$3,
+}, r$d = {
+  presetStyle: e$q,
   initialProps: ["id", "class", "cite"],
   props: o$u
 };
@@ -5754,7 +5652,7 @@ const e$p = {
     defaultValue: false
   }
 };
-const o$t = {
+const t$c = {
   ol: [
     ...ol,
     {
@@ -5785,21 +5683,19 @@ const o$t = {
       value: { type: "keyword", value: "40px" }
     }
   ]
-}, d$4 = {
-  states: defaultStates,
-  presetStyle: o$t,
+}, l$3 = {
+  presetStyle: t$c,
   initialProps: ["id", "class", "ordered", "start", "reversed"],
   props: e$p
 };
-const o$s = {};
+const o$t = {};
 const p$2 = {
-  states: defaultStates,
   presetStyle: { li },
   initialProps: ["id", "class"],
-  props: o$s
+  props: o$t
 };
-const o$r = {};
-const t$a = {
+const o$s = {};
+const o$r = {
   hr: [
     ...hr,
     {
@@ -5828,18 +5724,14 @@ const t$a = {
     }
   ]
 }, y$2 = {
-  category: "general",
-  description: "Used to visually divide sections of content, helping to improve readability and organization within a webpage.",
-  states: defaultStates,
-  presetStyle: t$a,
-  order: 3,
+  presetStyle: o$r,
   initialProps: ["id", "class"],
-  props: o$r
+  props: o$s
 };
 const e$o = {
   code: { required: false, control: "text", type: "string" }
 };
-const p$1 = {
+const o$q = {
   code: [
     ...code,
     {
@@ -5867,17 +5759,13 @@ const p$1 = {
       value: { type: "rgb", r: 238, g: 238, b: 238, alpha: 1 }
     }
   ]
-}, c = {
-  category: "general",
-  description: "Use this component when you want to display code as text on the page.",
+}, c$2 = {
   icon: BracesIcon,
   contentModel: {
     category: "instance",
     children: []
   },
-  states: defaultStates,
-  presetStyle: p$1,
-  order: 5,
+  presetStyle: o$q,
   initialProps: ["id", "class", "lang", "code"],
   props: {
     ...e$o,
@@ -5888,21 +5776,20 @@ const p$1 = {
     }
   }
 };
-const o$q = {};
-const o$p = {
+const o$p = {};
+const o$o = {
   label: [
     ...label,
     { property: "display", value: { type: "keyword", value: "block" } }
   ]
-}, s$6 = {
+}, t$b = {
   label: "Input Label",
-  states: defaultStates,
-  presetStyle: o$p,
+  presetStyle: o$o,
   initialProps: ["id", "class", "for"],
-  props: o$q
+  props: o$p
 };
-const o$o = {};
-const t$9 = {
+const o$n = {};
+const t$a = {
   textarea: [
     ...textarea,
     // resize doesn't work well while on canvas
@@ -5912,29 +5799,13 @@ const t$9 = {
       value: { type: "keyword", value: "block" }
     }
   ]
-}, s$5 = {
-  category: "forms",
+}, l$2 = {
   label: "Text Area",
-  description: "A multi-line text input for collecting longer string data from your users.",
-  presetStyle: t$9,
-  order: 4,
+  presetStyle: t$a,
   contentModel: {
     category: "instance",
     children: []
   },
-  states: [
-    ...defaultStates,
-    { 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" },
-  ],
   initialProps: [
     "id",
     "class",
@@ -5944,17 +5815,17 @@ const t$9 = {
     "required",
     "autofocus"
   ],
-  props: o$o
+  props: o$n
 };
 const e$n = {
   value: {
     required: false,
     control: "text",
     type: "string",
-    description: "Current value of the element"
+    description: "Value of the form control"
   }
 };
-const i$5 = {
+const r$c = {
   input: [
     ...radio,
     {
@@ -5962,21 +5833,10 @@ const i$5 = {
       value: { type: "unit", unit: "em", value: 0.5 }
     }
   ]
-}, s$4 = {
+}, m$8 = {
   label: "Radio",
   icon: RadioCheckedIcon,
-  presetStyle: i$5,
-  states: [
-    ...defaultStates,
-    { 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" },
-  ],
+  presetStyle: r$c,
   initialProps: ["id", "class", "name", "value", "required", "checked"],
   props: e$n
 };
@@ -5985,10 +5845,10 @@ const e$m = {
     required: false,
     control: "text",
     type: "string",
-    description: "Current value of the element"
+    description: "Value of the form control"
   }
 };
-const o$n = {
+const t$9 = {
   input: [
     ...checkbox,
     {
@@ -5996,19 +5856,9 @@ const o$n = {
       value: { type: "unit", unit: "em", value: 0.5 }
     }
   ]
-}, d$3 = {
+}, m$7 = {
   icon: CheckboxCheckedIcon,
-  presetStyle: o$n,
-  states: [
-    ...defaultStates,
-    { 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" }
-  ],
+  presetStyle: t$9,
   initialProps: ["id", "class", "name", "value", "required", "checked"],
   props: e$m
 };
@@ -6179,7 +6029,7 @@ To enable automatically generated closed captions instead, provide the value en-
     type: "string"
   }
 };
-const r$b = [
+const i$5 = [
   "id",
   "className",
   "url",
@@ -6197,16 +6047,15 @@ const r$b = [
   "showControls",
   "controlsColor",
   "playsinline"
-], m$5 = {
+], s$3 = {
   icon: VimeoIcon,
-  states: defaultStates,
   contentModel: {
     category: "instance",
     children: ["instance"],
     descendants: ["VimeoSpinner", "VimeoPlayButton", "VimeoPreviewImage"]
   },
   presetStyle: { div },
-  initialProps: r$b,
+  initialProps: i$5,
   props: e$l
 };
 const e$k = {
@@ -6374,7 +6223,7 @@ https://support.google.com/youtube/answer/171780?hl=en#zippy=%2Cturn-on-privacy-
     type: "string"
   }
 };
-const n$7 = [
+const n$6 = [
   "id",
   "className",
   "url",
@@ -6402,16 +6251,15 @@ const n$7 = [
   "language",
   "color",
   "playlist"
-], d$2 = {
+], s$2 = {
   icon: YoutubeIcon,
-  states: defaultStates,
   contentModel: {
     category: "instance",
     children: ["instance"],
     descendants: ["VimeoSpinner", "VimeoPlayButton", "VimeoPreviewImage"]
   },
   presetStyle: { div },
-  initialProps: n$7,
+  initialProps: n$6,
   props: e$k
 };
 const e$j = {
@@ -6424,14 +6272,14 @@ const e$j = {
   quality: { required: false, control: "number", type: "number" }
 };
 const i$4 = {
-  ...s$7,
+  ...i$6,
   category: "hidden",
   label: "Preview Image",
   contentModel: {
     category: "none",
     children: []
   },
-  initialProps: s$7.initialProps,
+  initialProps: i$6.initialProps,
   props: {
     ...e$j,
     // Automatically generated props don't have the right control.
@@ -6444,11 +6292,10 @@ const i$4 = {
   }
 };
 const o$m = {};
-const m$4 = {
+const c$1 = {
   category: "hidden",
   label: "Play Button",
   icon: ButtonElementIcon,
-  states: defaultStates,
   contentModel: {
     category: "none",
     children: ["instance"]
@@ -6458,9 +6305,8 @@ const m$4 = {
   props: o$m
 };
 const o$l = {};
-const s$3 = {
+const c = {
   icon: BoxIcon,
-  states: defaultStates,
   category: "hidden",
   label: "Spinner",
   contentModel: {
@@ -6494,7 +6340,7 @@ const e$i = {
   xmlns: { required: false, control: "text", type: "string" },
   "xmlns:xhtml": { required: false, control: "text", type: "string" }
 };
-const m$3 = {
+const m$6 = {
   category: "xml",
   order: 6,
   icon: XmlIcon,
@@ -6518,7 +6364,7 @@ const e$h = {
     description: "Machine-readable value"
   }
 };
-const a$5 = {
+const a$4 = {
   category: "xml",
   description: "Converts machine-readable date and time to ISO format.",
   icon: CalendarIcon,
@@ -6828,14 +6674,13 @@ const e$g = {
     options: ["full", "long", "medium", "short", "none"]
   }
 };
-const n$6 = {
+const r$b = {
   category: "localization",
   description: "Converts machine-readable date and time to a human-readable format.",
   contentModel: {
     category: "instance",
     children: []
   },
-  states: defaultStates,
   presetStyle: {
     time
   },
@@ -6851,16 +6696,8 @@ const o$j = {
       value: { type: "keyword", value: "block" }
     }
   ]
-}, s$2 = {
+}, p$1 = {
   presetStyle: o$j,
-  states: [
-    ...defaultStates,
-    { selector: "::placeholder", label: "Placeholder" },
-    { selector: ":valid", label: "Valid" },
-    { selector: ":invalid", label: "Invalid" },
-    { selector: ":required", label: "Required" },
-    { selector: ":optional", label: "Optional" }
-  ],
   initialProps: [
     "id",
     "class",
@@ -6887,7 +6724,7 @@ const l$1 = {
       }
     }
   ]
-}, a$4 = {
+}, a$3 = {
   category: "hidden",
   description: "An item within a drop-down menu that users can select as their chosen value.",
   presetStyle: l$1,
@@ -6901,7 +6738,7 @@ const l$1 = {
     { selector: ":hover", label: "Hover" },
     { selector: ":disabled", label: "Disabled" }
   ],
-  initialProps: ["label", "selected", "value", "label", "disabled"],
+  initialProps: ["label", "value", "label", "disabled"],
   props: o$i
 };
 const o$h = {};
@@ -6985,51 +6822,51 @@ const i$3 = {
 };
 const baseComponentMetas = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.defineProperty({
   __proto__: null,
-  Blockquote: a$6,
-  Body: i$a,
-  Bold: a$8,
-  Box: u$1,
-  Button: i$6,
-  Checkbox: d$3,
-  CodeText: c,
-  Form: c$1,
-  Fragment: t$e,
+  Blockquote: r$d,
+  Body: i$8,
+  Bold: p$5,
+  Box: g$2,
+  Button: e$t,
+  Checkbox: m$7,
+  CodeText: c$2,
+  Form: c$3,
+  Fragment: t$i,
   HeadLink: t$8,
   HeadMeta: e$f,
   HeadSlot: r$a,
   HeadTitle: r$9,
-  Heading: n$8,
-  HtmlEmbed: a$c,
-  Image: s$7,
-  Input: s$8,
-  Italic: p$4,
-  Label: s$6,
-  Link: p$5,
-  List: d$4,
+  Heading: m$9,
+  HtmlEmbed: a$8,
+  Image: i$6,
+  Input: l$4,
+  Italic: e$u,
+  Label: t$b,
+  Link: p$6,
+  List: l$3,
   ListItem: p$2,
-  MarkdownEmbed: a$b,
-  Option: a$4,
-  Paragraph: i$9,
-  RadioButton: s$4,
-  RemixForm: m$6,
-  RichTextLink: a$9,
-  Select: s$2,
+  MarkdownEmbed: a$7,
+  Option: a$3,
+  Paragraph: i$7,
+  RadioButton: m$8,
+  RemixForm: p$3,
+  RichTextLink: a$5,
+  Select: p$1,
   Separator: y$2,
   Slot: o$H,
-  Span: m$7,
-  Subscript: i$7,
-  Superscript: i$8,
-  Text: n$9,
-  Textarea: s$5,
-  Time: n$6,
+  Span: e$v,
+  Subscript: s$4,
+  Superscript: o$A,
+  Text: n$7,
+  Textarea: l$2,
+  Time: r$b,
   Video: i$3,
-  Vimeo: m$5,
-  VimeoPlayButton: m$4,
+  Vimeo: s$3,
+  VimeoPlayButton: c$1,
   VimeoPreviewImage: i$4,
-  VimeoSpinner: s$3,
-  XmlNode: m$3,
-  XmlTime: a$5,
-  YouTube: d$2
+  VimeoSpinner: c,
+  XmlNode: m$6,
+  XmlTime: a$4,
+  YouTube: s$2
 }, Symbol.toStringTag, { value: "Module" }));
 const n$5 = (t2) => new Proxy(
   {},
@@ -7041,7 +6878,7 @@ const n$5 = (t2) => new Proxy(
 ), r$8 = n$5(
   "@webstudio-is/sdk-components-animation:"
 );
-const a$3 = {
+const a$2 = {
   category: "animations",
   description: "Animation Group component is designed to animate its children.",
   icon: AnimationGroupIcon,
@@ -7111,7 +6948,7 @@ const e$e = {
     options: ["char", "space", 'symbol "#"', 'symbol "~"']
   }
 };
-const a$2 = {
+const a$1 = {
   category: "animations",
   description: "Text animation allows you to split text by char or by word to animate it.",
   icon: TextAnimationIcon,
@@ -7179,7 +7016,7 @@ const r$7 = {
 const e$c = {
   timeline: { required: false, control: "boolean", type: "boolean" }
 };
-const m$2 = {
+const m$5 = {
   icon: PlayIcon,
   label: "Video Animation",
   contentModel: {
@@ -7192,10 +7029,10 @@ const m$2 = {
 };
 const animationComponentMetas = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.defineProperty({
   __proto__: null,
-  AnimateChildren: a$3,
-  AnimateText: a$2,
+  AnimateChildren: a$2,
+  AnimateText: a$1,
   StaggerAnimation: r$7,
-  VideoAnimation: m$2
+  VideoAnimation: m$5
 }, Symbol.toStringTag, { value: "Module" }));
 const r$6 = (t2) => new Proxy(
   {},
@@ -7221,7 +7058,7 @@ const o$c = {
     description: "Show or hide the content of this component on the canvas. This will not affect the initial state of the component."
   }
 }, e$b = {}, t$7 = {};
-const g$2 = {
+const g$1 = {
   icon: CollapsibleIcon,
   contentModel: {
     category: "instance",
@@ -7233,7 +7070,7 @@ const g$2 = {
   },
   initialProps: ["open"],
   props: o$c
-}, m$1 = {
+}, m$4 = {
   icon: TriggerIcon,
   contentModel: {
     category: "none",
@@ -7275,7 +7112,7 @@ const o$a = (r2, t2, p2) => ({
 }), d = (r2, t2, p2, l2) => ({
   property: r2,
   value: { type: "rgb", alpha: 1, r: t2, g: p2, b: l2 }
-}), b$5 = [
+}), b$4 = [
   {
     property: "background-color",
     value: { type: "keyword", value: "transparent" }
@@ -7301,14 +7138,14 @@ const o$a = (r2, t2, p2) => ({
   o$a("padding-bottom", 0, "px"),
   o$a("padding-left", 0, "px")
 ];
-const O = {
+const S$1 = {
   icon: TriggerIcon,
   contentModel: {
     category: "none",
     children: ["instance"]
   },
   props: t$6
-}, B = {
+}, b$3 = {
   icon: OverlayIcon,
   contentModel: {
     category: "none",
@@ -7317,7 +7154,7 @@ const O = {
   },
   presetStyle: { div },
   props: e$a
-}, E = {
+}, O = {
   icon: ContentIcon,
   contentModel: {
     category: "none",
@@ -7330,7 +7167,7 @@ const O = {
   },
   presetStyle: { div },
   props: n$3
-}, H$1 = {
+}, B = {
   icon: HeadingIcon,
   contentModel: {
     category: "none",
@@ -7338,33 +7175,33 @@ const O = {
   },
   presetStyle: { h2 },
   props: i$2
-}, R = {
+}, E = {
   icon: TextIcon,
   contentModel: {
     category: "none",
     children: ["instance", "rich-text"]
   },
-  presetStyle: { p: p$6 },
+  presetStyle: { p: p$7 },
   props: p
-}, j = {
+}, H$1 = {
   icon: ButtonElementIcon,
   label: "Close Button",
   contentModel: {
     category: "none",
     children: ["instance", "rich-text"]
   },
-  states: defaultStates,
   presetStyle: {
-    button: [b$5, button].flat()
+    button: [b$4, button].flat()
   },
   props: s$1
-}, k$3 = {
+}, P$1 = {
   icon: DialogIcon,
   contentModel: {
     category: "instance",
     children: ["instance"],
     descendants: [n$4.DialogTrigger, n$4.DialogOverlay]
   },
+  initialProps: ["open"],
   props: o$b
 };
 const e$8 = {
@@ -7423,14 +7260,14 @@ const e$8 = {
     options: ["always", "optimized"]
   }
 }, r$5 = {};
-const y$1 = {
+const C$3 = {
   icon: TriggerIcon,
   contentModel: {
     category: "none",
     children: ["instance"]
   },
   props: o$9
-}, h$2 = {
+}, y$1 = {
   icon: ContentIcon,
   contentModel: {
     category: "none",
@@ -7442,7 +7279,7 @@ const y$1 = {
   },
   initialProps: ["side", "sideOffset", "align", "alignOffset"],
   props: t$5
-}, b$4 = {
+}, h$2 = {
   icon: PopoverIcon,
   contentModel: {
     category: "instance",
@@ -7451,16 +7288,15 @@ const y$1 = {
   },
   initialProps: ["open"],
   props: e$8
-}, I = {
+}, u = {
   icon: ButtonElementIcon,
   label: "Close Button",
   contentModel: {
     category: "none",
     children: ["instance", "rich-text"]
   },
-  states: defaultStates,
   presetStyle: {
-    button: [b$5, button].flat()
+    button: [b$4, button].flat()
   },
   props: r$5
 };
@@ -7537,7 +7373,7 @@ const e$7 = {
     options: ["always", "optimized"]
   }
 };
-const g$1 = {
+const g = {
   icon: TriggerIcon,
   contentModel: {
     category: "none",
@@ -7553,7 +7389,7 @@ const g$1 = {
   presetStyle: { div },
   initialProps: ["side", "sideOffset", "align", "alignOffset"],
   props: t$4
-}, m = {
+}, m$3 = {
   icon: TooltipIcon,
   contentModel: {
     category: "instance",
@@ -7595,10 +7431,10 @@ Mainly so arrow navigation is done accordingly (left & right vs. up & down)
     options: ["horizontal", "vertical"]
   },
   value: {
+    description: "The value for the selected tab, if controlled",
     required: false,
     control: "text",
-    type: "string",
-    description: "Current value of the element"
+    type: "string"
   }
 }, t$3 = {
   loop: {
@@ -7622,7 +7458,7 @@ Mainly so arrow navigation is done accordingly (left & right vs. up & down)
     description: "Current value of the element"
   }
 };
-const x$2 = {
+const y = {
   icon: TabsIcon,
   contentModel: {
     category: "instance",
@@ -7631,7 +7467,7 @@ const x$2 = {
   },
   presetStyle: { div },
   props: e$6
-}, C$2 = {
+}, f$3 = {
   icon: HeaderIcon,
   contentModel: {
     category: "none",
@@ -7640,7 +7476,7 @@ const x$2 = {
   },
   presetStyle: { div },
   props: t$3
-}, S$2 = {
+}, x$1 = {
   icon: TriggerIcon,
   label: "Tab Trigger",
   indexWithinAncestor: n$4.Tabs,
@@ -7648,19 +7484,12 @@ const x$2 = {
     category: "none",
     children: ["instance", "rich-text"]
   },
-  states: [
-    ...defaultStates,
-    {
-      category: "component-states",
-      label: "Active",
-      selector: "[data-state=active]"
-    }
-  ],
+  states: [{ label: "Active", selector: "[data-state=active]" }],
   presetStyle: {
-    button: [button, b$5].flat()
+    button: [button, b$4].flat()
   },
   props: o$7
-}, u = {
+}, C$2 = {
   label: "Tab Content",
   icon: ContentIcon,
   indexWithinAncestor: n$4.Tabs,
@@ -7672,12 +7501,9 @@ const x$2 = {
   props: r$4
 };
 const o$6 = {};
-const a$1 = {
+const m$2 = {
   icon: LabelIcon,
-  states: defaultStates,
-  presetStyle: {
-    label
-  },
+  presetStyle: { label },
   initialProps: ["id", "class", "for"],
   props: o$6
 };
@@ -7738,7 +7564,7 @@ const e$5 = {
     description: "Current value of the element"
   }
 }, t$2 = {}, r$3 = {}, n$2 = {};
-const x$1 = {
+const v$1 = {
   icon: AccordionIcon,
   contentModel: {
     category: "instance",
@@ -7748,7 +7574,7 @@ const x$1 = {
   presetStyle: { div },
   initialProps: ["value", "collapsible"],
   props: e$5
-}, S$1 = {
+}, x = {
   label: "Item",
   icon: ItemIcon,
   indexWithinAncestor: n$4.Accordion,
@@ -7760,7 +7586,7 @@ const x$1 = {
   presetStyle: { div },
   initialProps: ["value"],
   props: o$5
-}, C$1 = {
+}, f$2 = {
   label: "Item Header",
   icon: HeaderIcon,
   contentModel: {
@@ -7782,26 +7608,19 @@ const x$1 = {
     ]
   },
   props: t$2
-}, H = {
+}, C$1 = {
   label: "Item Trigger",
   icon: TriggerIcon,
   contentModel: {
     category: "none",
     children: ["instance", "rich-text"]
   },
-  states: [
-    ...defaultStates,
-    {
-      category: "component-states",
-      label: "Open",
-      selector: "[data-state=open]"
-    }
-  ],
+  states: [{ label: "Open", selector: "[data-state=open]" }],
   presetStyle: {
-    button: [button, b$5].flat()
+    button: [button, b$4].flat()
   },
   props: r$3
-}, M = {
+}, H = {
   label: "Item Content",
   icon: ContentIcon,
   contentModel: {
@@ -7875,7 +7694,7 @@ const L = {
     div
   },
   props: t$1
-}, b$3 = {
+}, b$2 = {
   icon: ListItemIcon,
   label: "Menu Item",
   indexWithinAncestor: n$4.NavigationMenu,
@@ -8036,7 +7855,7 @@ const e$3 = {
     description: "Current value of the element"
   }
 }, l = {}, s = {};
-const b$2 = {
+const b$1 = {
   icon: SelectIcon,
   contentModel: {
     category: "instance",
@@ -8045,7 +7864,7 @@ const b$2 = {
   },
   initialProps: ["name", "value", "open", "required"],
   props: e$3
-}, f = {
+}, f$1 = {
   icon: TriggerIcon,
   contentModel: {
     category: "none",
@@ -8125,7 +7944,7 @@ const e$2 = {
     description: "Whether the control is required for form submission"
   }
 }, o$2 = {};
-const b$1 = {
+const m$1 = {
   icon: SwitchIcon,
   contentModel: {
     category: "instance",
@@ -8133,41 +7952,23 @@ const b$1 = {
     descendants: [n$4.SwitchThumb]
   },
   states: [
-    ...defaultStates,
-    {
-      label: "Checked",
-      selector: "[data-state=checked]",
-      category: "component-states"
-    },
-    {
-      label: "Unchecked",
-      selector: "[data-state=unchecked]",
-      category: "component-states"
-    }
+    { label: "Checked", selector: "[data-state=checked]" },
+    { label: "Unchecked", selector: "[data-state=unchecked]" }
   ],
   presetStyle: {
-    button: [button, b$5].flat()
+    button: [button, b$4].flat()
   },
   initialProps: ["id", "class", "name", "value", "checked", "required"],
   props: e$2
-}, k = {
+}, b = {
   icon: TriggerIcon,
   contentModel: {
     category: "none",
     children: ["instance"]
   },
   states: [
-    ...defaultStates,
-    {
-      label: "Checked",
-      selector: "[data-state=checked]",
-      category: "component-states"
-    },
-    {
-      label: "Unchecked",
-      selector: "[data-state=unchecked]",
-      category: "component-states"
-    }
+    { label: "Checked", selector: "[data-state=checked]" },
+    { label: "Unchecked", selector: "[data-state=unchecked]" }
   ],
   presetStyle: {
     span
@@ -8188,7 +7989,7 @@ const e$1 = {
     description: "Whether the control is required for form submission"
   }
 }, o$1 = {};
-const b = {
+const m = {
   icon: CheckboxCheckedIcon,
   contentModel: {
     category: "instance",
@@ -8196,30 +7997,20 @@ const b = {
     descendants: [n$4.CheckboxIndicator]
   },
   states: [
-    ...defaultStates,
-    {
-      label: "Checked",
-      selector: "[data-state=checked]",
-      category: "component-states"
-    },
-    {
-      label: "Unchecked",
-      selector: "[data-state=unchecked]",
-      category: "component-states"
-    }
+    { label: "Checked", selector: "[data-state=checked]" },
+    { label: "Unchecked", selector: "[data-state=unchecked]" }
   ],
   presetStyle: {
-    button: [button, b$5].flat()
+    button: [button, b$4].flat()
   },
   initialProps: ["id", "class", "name", "value", "required", "checked"],
   props: e$1
-}, x = {
+}, k = {
   icon: TriggerIcon,
   contentModel: {
     category: "none",
     children: ["instance", "rich-text"]
   },
-  states: defaultStates,
   presetStyle: {
     span
   },
@@ -8290,7 +8081,7 @@ const e = {
     description: "Current value of the element"
   }
 }, r = {};
-const y = {
+const G = {
   icon: RadioGroupIcon,
   contentModel: {
     category: "instance",
@@ -8298,43 +8089,32 @@ const y = {
     descendants: [n$4.RadioGroupItem]
   },
   states: [
-    ...defaultStates,
-    {
-      label: "Checked",
-      selector: "[data-state=checked]",
-      category: "component-states"
-    },
-    {
-      label: "Unchecked",
-      selector: "[data-state=unchecked]",
-      category: "component-states"
-    }
+    { label: "Checked", selector: "[data-state=checked]" },
+    { label: "Unchecked", selector: "[data-state=unchecked]" }
   ],
   presetStyle: {
     div
   },
   initialProps: ["id", "class", "name", "value", "required"],
   props: e
-}, g = {
+}, h = {
   icon: ItemIcon,
   contentModel: {
     category: "none",
     children: ["instance"],
     descendants: [n$4.RadioGroupIndicator]
   },
-  states: defaultStates,
   presetStyle: {
-    button: [button, b$5].flat()
+    button: [button, b$4].flat()
   },
   initialProps: ["value"],
   props: o
-}, h = {
+}, f = {
   icon: TriggerIcon,
   contentModel: {
     category: "none",
     children: ["instance"]
   },
-  states: defaultStates,
   presetStyle: {
     span
   },
@@ -8342,55 +8122,55 @@ const y = {
 };
 const radixComponentMetas = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.defineProperty({
   __proto__: null,
-  Accordion: x$1,
-  AccordionContent: M,
-  AccordionHeader: C$1,
-  AccordionItem: S$1,
-  AccordionTrigger: H,
-  Checkbox: b,
-  CheckboxIndicator: x,
-  Collapsible: g$2,
+  Accordion: v$1,
+  AccordionContent: H,
+  AccordionHeader: f$2,
+  AccordionItem: x,
+  AccordionTrigger: C$1,
+  Checkbox: m,
+  CheckboxIndicator: k,
+  Collapsible: g$1,
   CollapsibleContent: d$1,
-  CollapsibleTrigger: m$1,
-  Dialog: k$3,
-  DialogClose: j,
-  DialogContent: E,
-  DialogDescription: R,
-  DialogOverlay: B,
-  DialogTitle: H$1,
-  DialogTrigger: O,
-  Label: a$1,
+  CollapsibleTrigger: m$4,
+  Dialog: P$1,
+  DialogClose: H$1,
+  DialogContent: O,
+  DialogDescription: E,
+  DialogOverlay: b$3,
+  DialogTitle: B,
+  DialogTrigger: S$1,
+  Label: m$2,
   NavigationMenu: L,
   NavigationMenuContent: w$1,
-  NavigationMenuItem: b$3,
+  NavigationMenuItem: b$2,
   NavigationMenuLink: C,
   NavigationMenuList: h$1,
   NavigationMenuTrigger: k$2,
   NavigationMenuViewport: S,
-  Popover: b$4,
-  PopoverClose: I,
-  PopoverContent: h$2,
-  PopoverTrigger: y$1,
-  RadioGroup: y,
-  RadioGroupIndicator: h,
-  RadioGroupItem: g,
-  Select: b$2,
+  Popover: h$2,
+  PopoverClose: u,
+  PopoverContent: y$1,
+  PopoverTrigger: C$3,
+  RadioGroup: G,
+  RadioGroupIndicator: f,
+  RadioGroupItem: h,
+  Select: b$1,
   SelectContent: v,
   SelectItem: k$1,
   SelectItemIndicator: F,
   SelectItemText: q,
-  SelectTrigger: f,
+  SelectTrigger: f$1,
   SelectValue: w,
   SelectViewport: P,
-  Switch: b$1,
-  SwitchThumb: k,
-  Tabs: x$2,
-  TabsContent: u,
-  TabsList: C$2,
-  TabsTrigger: S$2,
-  Tooltip: m,
+  Switch: m$1,
+  SwitchThumb: b,
+  Tabs: y,
+  TabsContent: C$2,
+  TabsList: f$3,
+  TabsTrigger: x$1,
+  Tooltip: m$3,
   TooltipContent: T,
-  TooltipTrigger: g$1
+  TooltipTrigger: g
 }, Symbol.toStringTag, { value: "Module" }));
 const createFramework$2 = async () => {
   const routeTemplatesDir = join("app", "route-templates");
@@ -8436,6 +8216,9 @@ const createFramework$2 = async () => {
     metas,
     components,
     tags: {
+      textarea: `${base}:Textarea`,
+      input: `${base}:Input`,
+      select: `${base}:Select`,
       body: `${remix}:Body`,
       a: `${remix}:Link`,
       form: `${remix}:RemixForm`
@@ -8514,6 +8297,9 @@ const createFramework$1 = async () => {
     metas,
     components,
     tags: {
+      textarea: `${base}:Textarea`,
+      input: `${base}:Input`,
+      select: `${base}:Select`,
       body: `${reactRouter}:Body`,
       a: `${reactRouter}:Link`,
       form: `${reactRouter}:RemixForm`
@@ -8589,7 +8375,11 @@ const createFramework = async () => {
   return {
     metas,
     components,
-    tags: {},
+    tags: {
+      textarea: `${base}:Textarea`,
+      input: `${base}:Input`,
+      select: `${base}:Select`
+    },
     html: ({ pagePath }) => {
       if (isPathnamePattern(pagePath)) {
         return [];
@@ -9253,7 +9043,7 @@ const initFlow = async (options) => {
   if (shouldInstallDeps === true) {
     const install = spinner();
     install.start("Installing dependencies");
-    await x$3("npm", ["install"]);
+    await x$2("npm", ["install"]);
     install.stop("Installed dependencies");
   }
   log.message();
@@ -9284,7 +9074,7 @@ const getDeploymentInstructions = (deployTarget) => {
   }
 };
 const name = "webstudio";
-const version = "0.220.0";
+const version = "0.221.0";
 const description = "Webstudio CLI";
 const author = "Webstudio <github@webstudio.is>";
 const homepage = "https://webstudio.is";