webstudio 0.220.0 → 0.222.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) {
@@ -1790,13 +1793,23 @@ var DefaultPagePage = z.string().refine((path) => path !== "", "Can't be empty")
   (path) => path !== "/build" && path.startsWith("/build/") === false,
   "/build prefix is reserved for the system"
 );
-var PagePath = DefaultPagePage.refine(
+var OldPagePath = z.string().refine((path) => path !== "", "Can't be empty").refine((path) => path !== "/", "Can't be just a /").refine(
   (path) => path === "" || path.startsWith("/"),
   "Must start with a / or a full URL e.g. https://website.org"
+).refine((path) => path.endsWith("/") === false, "Can't end with a /").refine((path) => path.includes("//") === false, "Can't contain repeating /").refine(
+  (path) => /^[-_a-zA-Z0-9*:?\\/.]*$/.test(path),
+  // Allow uppercase letters (A-Z)
+  "Only a-z, A-Z, 0-9, -, _, /, :, ?, . and * are allowed"
+).refine(
+  (path) => path !== "/s" && path.startsWith("/s/") === false,
+  "/s prefix is reserved for the system"
+).refine(
+  (path) => path !== "/build" && path.startsWith("/build/") === false,
+  "/build prefix is reserved for the system"
 );
-DefaultPagePage.refine(
+var PagePath = DefaultPagePage.refine(
   (path) => path === "" || path.startsWith("/"),
-  "Must start with a / and it must be full path e.g. /project/id"
+  "Must start with a / or a full URL e.g. https://website.org"
 );
 var Page = z.object({
   ...commonPageFields,
@@ -1823,7 +1836,7 @@ var ProjectNewRedirectPath = PagePath.or(
   }, "Must be a valid URL")
 );
 var PageRedirect = z.object({
-  old: PagePath,
+  old: OldPagePath,
   new: ProjectNewRedirectPath,
   status: z.enum(["301", "302"]).optional()
 });
@@ -2482,22 +2495,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 +2539,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 +2561,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 +2572,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 +2628,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 +2683,22 @@ 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" } },
+  { property: "box-sizing", value: { type: "keyword", value: "border-box" } }
+];
+var b$6 = [
   {
     property: "font-weight",
     value: { type: "unit", unit: "number", value: 700 }
@@ -2724,7 +2721,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 +4851,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 +4869,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 +4893,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 +4911,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 +4934,7 @@ const a$b = {
   },
   initialProps: ["class"],
   props: {
-    ...e$t,
+    ...t$h,
     code: {
       required: true,
       control: "code",
@@ -4990,13 +4981,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 +5019,22 @@ 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: "-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$6 = [
+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" } }
+];
+var b$5 = [
   {
     property: "font-weight",
     value: { type: "unit", unit: "number", value: 700 }
@@ -5308,31 +5291,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 +5312,9 @@ const u$1 = {
     nav,
     section
   },
-  order: 0,
   initialProps: ["tag", "id", "class"],
   props: {
-    ...t$d,
+    ...t$g,
     tag: {
       required: true,
       control: "tag",
@@ -5369,12 +5335,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 +5351,7 @@ const n$9 = {
   },
   initialProps: ["tag", "id", "class"],
   props: {
-    ...t$c,
+    ...t$f,
     tag: {
       required: true,
       control: "tag",
@@ -5395,11 +5360,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 +5374,7 @@ const n$8 = {
   },
   initialProps: ["tag", "id", "class"],
   props: {
-    ...t$b,
+    ...t$e,
     tag: {
       required: true,
       control: "tag",
@@ -5420,13 +5384,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 +5413,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 +5434,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 +5486,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 +5501,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 +5511,7 @@ const e$r = {
     options: ["initial", "success", "error"]
   }
 };
-const c$1 = {
+const c$3 = {
   label: "Webhook Form",
   icon: WebhookFormIcon,
   presetStyle: {
@@ -5607,7 +5523,7 @@ const c$1 = {
   ],
   initialProps: ["id", "class", "state", "action"],
   props: {
-    ...e$r,
+    ...e$s,
     action: {
       type: "resource",
       control: "resource",
@@ -5617,22 +5533,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 +5554,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 +5576,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 +5592,7 @@ const r$c = {
     "optimize"
   ],
   props: {
-    ...e$q,
+    ...e$r,
     // Automatically generated props don't have the right control.
     src: {
       type: "string",
@@ -5692,7 +5603,7 @@ const r$c = {
   }
 };
 const o$u = {};
-const p$3 = {
+const e$q = {
   blockquote: [
     {
       property: "margin-top",
@@ -5739,9 +5650,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 +5664,7 @@ const e$p = {
     defaultValue: false
   }
 };
-const o$t = {
+const t$c = {
   ol: [
     ...ol,
     {
@@ -5785,21 +5695,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 +5736,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 +5771,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 +5788,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 +5811,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 +5827,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 +5845,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 +5857,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 +5868,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 +6041,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 +6059,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 +6235,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 +6263,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 +6284,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 +6304,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 +6317,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 +6352,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 +6376,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 +6686,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 +6708,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 +6736,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 +6750,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 +6834,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 +6890,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 +6960,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 +7028,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 +7041,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 +7070,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 +7082,7 @@ const g$2 = {
   },
   initialProps: ["open"],
   props: o$c
-}, m$1 = {
+}, m$4 = {
   icon: TriggerIcon,
   contentModel: {
     category: "none",
@@ -7275,7 +7124,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 +7150,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 +7166,7 @@ const O = {
   },
   presetStyle: { div },
   props: e$a
-}, E = {
+}, O = {
   icon: ContentIcon,
   contentModel: {
     category: "none",
@@ -7330,7 +7179,7 @@ const O = {
   },
   presetStyle: { div },
   props: n$3
-}, H$1 = {
+}, B = {
   icon: HeadingIcon,
   contentModel: {
     category: "none",
@@ -7338,33 +7187,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 +7272,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 +7291,7 @@ const y$1 = {
   },
   initialProps: ["side", "sideOffset", "align", "alignOffset"],
   props: t$5
-}, b$4 = {
+}, h$2 = {
   icon: PopoverIcon,
   contentModel: {
     category: "instance",
@@ -7451,16 +7300,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 +7385,7 @@ const e$7 = {
     options: ["always", "optimized"]
   }
 };
-const g$1 = {
+const g = {
   icon: TriggerIcon,
   contentModel: {
     category: "none",
@@ -7553,7 +7401,7 @@ const g$1 = {
   presetStyle: { div },
   initialProps: ["side", "sideOffset", "align", "alignOffset"],
   props: t$4
-}, m = {
+}, m$3 = {
   icon: TooltipIcon,
   contentModel: {
     category: "instance",
@@ -7595,10 +7443,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 +7470,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 +7479,7 @@ const x$2 = {
   },
   presetStyle: { div },
   props: e$6
-}, C$2 = {
+}, f$3 = {
   icon: HeaderIcon,
   contentModel: {
     category: "none",
@@ -7640,7 +7488,7 @@ const x$2 = {
   },
   presetStyle: { div },
   props: t$3
-}, S$2 = {
+}, x$1 = {
   icon: TriggerIcon,
   label: "Tab Trigger",
   indexWithinAncestor: n$4.Tabs,
@@ -7648,19 +7496,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 +7513,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 +7576,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 +7586,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 +7598,7 @@ const x$1 = {
   presetStyle: { div },
   initialProps: ["value"],
   props: o$5
-}, C$1 = {
+}, f$2 = {
   label: "Item Header",
   icon: HeaderIcon,
   contentModel: {
@@ -7782,26 +7620,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 +7706,7 @@ const L = {
     div
   },
   props: t$1
-}, b$3 = {
+}, b$2 = {
   icon: ListItemIcon,
   label: "Menu Item",
   indexWithinAncestor: n$4.NavigationMenu,
@@ -8036,7 +7867,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 +7876,7 @@ const b$2 = {
   },
   initialProps: ["name", "value", "open", "required"],
   props: e$3
-}, f = {
+}, f$1 = {
   icon: TriggerIcon,
   contentModel: {
     category: "none",
@@ -8125,7 +7956,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 +7964,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 +8001,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 +8009,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 +8093,7 @@ const e = {
     description: "Current value of the element"
   }
 }, r = {};
-const y = {
+const G = {
   icon: RadioGroupIcon,
   contentModel: {
     category: "instance",
@@ -8298,43 +8101,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 +8134,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 +8228,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 +8309,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 +8387,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 +9055,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 +9086,7 @@ const getDeploymentInstructions = (deployTarget) => {
   }
 };
 const name = "webstudio";
-const version = "0.220.0";
+const version = "0.222.0";
 const description = "Webstudio CLI";
 const author = "Webstudio <github@webstudio.is>";
 const homepage = "https://webstudio.is";