webstudio 0.219.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) {
@@ -1642,9 +1645,6 @@ var generateAtomic = (sheet, options) => {
 var AccordionIcon = `<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 16 16" width="100%" height="100%" style="display: block;"><path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" d="M13.056 8H14.5V4.101a1.3 1.3 0 0 0-1.3-1.299H2.8a1.3 1.3 0 0 0-1.3 1.3V8H13.056ZM13.056 13.198h.145a1.3 1.3 0 0 0 1.299-1.3V8h-13v3.899a1.3 1.3 0 0 0 1.3 1.299h10.256Z"/><path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" d="m10.026 4.913.975.976.976-.976M10.026 10.111l.975.976.976-.976"/></svg>`;
 var AddTemplateInstanceIcon = `<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 16 16" width="100%" height="100%" style="display: block;"><path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" d="M4.5 2H3.333A1.333 1.333 0 0 0 2 3.333V4.5M14 12.667c0 .021 0 .042-.002.063M11.5 14h1.167a1.333 1.333 0 0 0 1.331-1.27m0 0V11.5M2 11.5v1.167A1.333 1.333 0 0 0 3.333 14H4.5M7 14h2M2 7v2M8.461 4.77H14M11.23 2v5.538"/></svg>`;
 var AnimationGroupIcon = `<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 16 16" width="100%" height="100%" style="display: block;"><path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" d="M4.5 8.3C6.3 7.7 7.8 8 9.3 11c.3-1.8 1.2-4.5 2.1-6M4.208 1.5H2.944A1.444 1.444 0 0 0 1.5 2.944v1.264m13 0V2.944A1.444 1.444 0 0 0 13.056 1.5h-1.264M14.5 13.056c0 .023 0 .046-.002.069M11.792 14.5h1.264a1.444 1.444 0 0 0 1.442-1.375m0 0v-1.333m-12.998 0v1.264A1.444 1.444 0 0 0 2.944 14.5h1.264m2.709-13h2.166m-2.166 13h2.166M1.5 6.917v2.166m13-2.166v2.166"/></svg>`;
-var BlockquoteIcon = `<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 16 16" width="100%" height="100%" style="display: block;"><path stroke="currentColor" stroke-linecap="round" d="M6.667 8H3.333a.667.667 0 0 1-.666-.667V5a.667.667 0 0 1 .666-.667H6A.667.667 0 0 1 6.667 5v3Zm0 0C6.667 9.667 6 10.667 4 11.667M13.333 8H10a.667.667 0 0 1-.667-.667V5A.667.667 0 0 1 10 4.333h2.667a.667.667 0 0 1 .666.667v3Zm0 0c0 1.667-.666 2.667-2.666 3.667"/></svg>`;
-var BodyIcon = `<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 16 16" width="100%" height="100%" style="display: block;"><path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" d="M12.667 2H3.333C2.597 2 2 2.597 2 3.333v9.334C2 13.403 2.597 14 3.333 14h9.334c.736 0 1.333-.597 1.333-1.333V3.333C14 2.597 13.403 2 12.667 2ZM2 6h12"/></svg>`;
-var BoldIcon = `<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 16 16" width="100%" height="100%" style="display: block;"><path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" d="M4 8h6a2.667 2.667 0 0 1 0 5.333H4.667A.667.667 0 0 1 4 12.667V3.333a.667.667 0 0 1 .667-.666h4.666a2.667 2.667 0 1 1 0 5.333"/></svg>`;
 var BoxIcon = `<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 16 16" width="100%" height="100%" style="display: block;"><path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" d="M12.667 2H3.333C2.597 2 2 2.597 2 3.333v9.334C2 13.403 2.597 14 3.333 14h9.334c.736 0 1.333-.597 1.333-1.333V3.333C14 2.597 13.403 2 12.667 2Z"/></svg>`;
 var BracesIcon = `<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 16 16" width="100%" height="100%" style="display: block;"><path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" d="M5.333 2h-.666a1.333 1.333 0 0 0-1.334 1.333v3.334A1.333 1.333 0 0 1 2 8a1.333 1.333 0 0 1 1.333 1.333v3.334c0 .733.6 1.333 1.334 1.333h.666M10.667 14h.666a1.333 1.333 0 0 0 1.334-1.333V9.333C12.667 8.6 13.267 8 14 8a1.333 1.333 0 0 1-1.333-1.333V3.333A1.333 1.333 0 0 0 11.333 2h-.666"/></svg>`;
 var ButtonElementIcon = `<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 16 16" width="100%" height="100%" style="display: block;"><path fill="currentColor" fill-rule="evenodd" d="M1.833 8a3.5 3.5 0 0 1 3.5-3.5h5.334a3.5 3.5 0 1 1 0 7H5.333a3.5 3.5 0 0 1-3.5-3.5Zm3.5-4.5a4.5 4.5 0 0 0 0 9h5.334a4.5 4.5 0 1 0 0-9H5.333ZM5.72 8a1 1 0 1 1-2 0 1 1 0 0 1 2 0ZM8 9a1 1 0 1 0 0-2 1 1 0 0 0 0 2Zm4.28-1a1 1 0 1 1-2 0 1 1 0 0 1 2 0Z" clip-rule="evenodd"/></svg>`;
@@ -1656,20 +1656,15 @@ var ContentBlockIcon = `<svg xmlns="http://www.w3.org/2000/svg" fill="none" view
 var ContentIcon = `<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 16 16" width="100%" height="100%" style="display: block;"><path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" d="M4.667 5.333h4M4.666 8H10m-5.333 2.667h4M2 3.5A1.5 1.5 0 0 1 3.5 2h9A1.5 1.5 0 0 1 14 3.5v9.188c0 .724-.588 1.312-1.313 1.312H3.313A1.312 1.312 0 0 1 2 12.687V3.5Z"/></svg>`;
 var DialogIcon = `<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 16 16" width="100%" height="100%" style="display: block;"><path fill="#D2D2D2" d="M13.444 1H2.556C1.696 1 1 1.696 1 2.556v10.888C1 14.304 1.696 15 2.556 15h10.888c.86 0 1.556-.696 1.556-1.556V2.556C15 1.696 14.304 1 13.444 1Z"/><path fill="#fff" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" d="M11.334 5.667H4.667v4.666h6.667V5.667Z"/></svg>`;
 var EmbedIcon = `<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 16 16" width="100%" height="100%" style="display: block;"><path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" d="M12 10.667 14.667 8 12 5.333M4 5.333 1.333 8 4 10.667M9.667 2.667 6.333 13.333"/></svg>`;
-var FormTextAreaIcon = `<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 16 16" width="100%" height="100%" style="display: block;"><path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" d="M3.333 14h9.334c.736 0 1.333-.597 1.333-1.333V3.522C14 2.682 13.318 2 12.478 2h-9C2.662 2 2 2.662 2 3.478v9.189C2 13.403 2.597 14 3.333 14ZM3.83 6.636V3.943"/><path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" d="m10.496 13.76 1.724-1.725 1.717-1.717"/></svg>`;
 var FormTextFieldIcon = `<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 16 16" width="100%" height="100%" style="display: block;"><path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" d="M3.333 2.667H4a2 2 0 0 1 2 2 2 2 0 0 1 2-2h.667M8.667 13.333H8a2 2 0 0 1-2-2 2 2 0 0 1-2 2h-.667M3.333 10.667h-.666a1.333 1.333 0 0 1-1.334-1.334V6.667a1.333 1.333 0 0 1 1.334-1.334h.666M8.667 5.333h4.666a1.333 1.333 0 0 1 1.334 1.334v2.666a1.333 1.333 0 0 1-1.334 1.334H8.667M6 4.667v6.666"/></svg>`;
-var FormIcon = `<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 16 16" width="100%" height="100%" style="display: block;"><path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" d="M13.184 5.5h.731a.75.75 0 0 0 .75-.75v-1.5a.75.75 0 0 0-.75-.75H2.085a.75.75 0 0 0-.75.75v1.5c0 .414.336.75.75.75h11.099ZM13.184 10.5h.732a.75.75 0 0 0 .75-.75v-1.5a.75.75 0 0 0-.75-.75H2.084a.75.75 0 0 0-.75.75v1.5c0 .414.336.75.75.75h11.099Z"/><path fill="currentColor" d="M6.613 14.5h.222a.5.5 0 0 0 .5-.5v-1a.5.5 0 0 0-.5-.5h-5.5a.5.5 0 0 0-.5.5v1a.5.5 0 0 0 .5.5H6.613Z"/></svg>`;
 var HeaderIcon = `<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 16 16" width="100%" height="100%" style="display: block;"><path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" d="M12.667 2H3.333C2.597 2 2 2.597 2 3.333v9.334C2 13.403 2.597 14 3.333 14h9.334c.736 0 1.333-.597 1.333-1.333V3.333C14 2.597 13.403 2 12.667 2ZM4 4h8"/></svg>`;
 var HeadingIcon = `<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 16 16" width="100%" height="100%" style="display: block;"><path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" d="M4 8h8M4 13.333V2.667M12 13.333V2.667"/></svg>`;
-var ImageIcon = `<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 16 16" width="100%" height="100%" style="display: block;"><path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" d="M12.667 2H3.333C2.597 2 2 2.597 2 3.333v9.334C2 13.403 2.597 14 3.333 14h9.334c.736 0 1.333-.597 1.333-1.333V3.333C14 2.597 13.403 2 12.667 2Z"/><path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" d="M6 7.333a1.333 1.333 0 1 0 0-2.666 1.333 1.333 0 0 0 0 2.666ZM14 10l-2.057-2.057a1.333 1.333 0 0 0-1.886 0L4 14"/></svg>`;
 var ItemIcon = `<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 16 16" width="100%" height="100%" style="display: block;"><path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" d="M2 6h.007M5.333 10H14M5.333 6H14"/></svg>`;
 var LabelIcon = `<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 16 16" width="100%" height="100%" style="display: block;"><path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" d="M12.667 2H3.333C2.597 2 2 2.597 2 3.333v9.334C2 13.403 2.597 14 3.333 14h9.334c.736 0 1.333-.597 1.333-1.333V3.333C14 2.597 13.403 2 12.667 2Z"/><path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" d="M6.476 11.074V4.926m0 6.148h3.77v-.615m-3.77.615h-.722m.722-6.148h.632m-.632 0h-.722"/></svg>`;
-var LinkIcon = `<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 16 16" width="100%" height="100%" style="display: block;"><path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" d="M8.943 11.771 8 12.714A3.333 3.333 0 0 1 3.286 8l.943-.943M7.057 4.229 8 3.286A3.333 3.333 0 1 1 12.714 8l-.943.943M6.114 9.886l3.772-3.772"/></svg>`;
 var ListItemIcon = `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" fill="currentColor" width="100%" height="100%" style="display: block;"><path d="M3.7 6.175a.85.85 0 1 1-1.7 0 .85.85 0 0 1 1.7 0Z"/><path fill-rule="evenodd" d="M5 6.175c0-.345.28-.625.625-.625h7.75a.625.625 0 1 1 0 1.25h-7.75A.625.625 0 0 1 5 6.175ZM5 10.05c0-.345.28-.625.625-.625h7.75a.625.625 0 1 1 0 1.25h-7.75A.625.625 0 0 1 5 10.05Z" clip-rule="evenodd"/></svg>`;
 var ListViewIcon = `<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 16 16" width="100%" height="100%" style="display: block;"><path fill="currentColor" fill-rule="evenodd" d="M3.333 2.5a.833.833 0 0 0-.833.833v9.334c0 .46.373.833.833.833h9.334c.46 0 .833-.373.833-.833V3.333a.833.833 0 0 0-.833-.833H3.333ZM1.5 3.333c0-1.012.82-1.833 1.833-1.833h9.334c1.012 0 1.833.82 1.833 1.833v9.334c0 1.012-.82 1.833-1.833 1.833H3.333A1.833 1.833 0 0 1 1.5 12.667V3.333Z" clip-rule="evenodd"/><path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" d="M14 6H2M14 10H2"/></svg>`;
 var ListIcon = `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" fill="currentColor" width="100%" height="100%" style="display: block;"><path d="M3.7 4.35a.85.85 0 1 1-1.7 0 .85.85 0 0 1 1.7 0Z"/><path fill-rule="evenodd" d="M5 4.35c0-.346.28-.626.625-.626h7.75a.625.625 0 1 1 0 1.25h-7.75A.625.625 0 0 1 5 4.35Z" clip-rule="evenodd"/><path d="M3.7 8A.85.85 0 1 1 2 8a.85.85 0 0 1 1.7 0Z"/><path fill-rule="evenodd" d="M5 8c0-.345.28-.625.625-.625h7.75a.625.625 0 1 1 0 1.25h-7.75A.625.625 0 0 1 5 8Z" clip-rule="evenodd"/><path d="M3.7 11.65a.85.85 0 1 1-1.7 0 .85.85 0 0 1 1.7 0Z"/><path fill-rule="evenodd" d="M5 11.65c0-.346.28-.626.625-.626h7.75a.625.625 0 1 1 0 1.25h-7.75A.625.625 0 0 1 5 11.65Z" clip-rule="evenodd"/></svg>`;
 var MarkdownEmbedIcon = `<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 16 16" width="100%" height="100%" style="display: block;"><path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" d="M4.667 5.333h4M4.667 8H10M14 8.75V3.5A1.5 1.5 0 0 0 12.5 2h-9A1.5 1.5 0 0 0 2 3.5v9.191c0 .725.588 1.313 1.313 1.313h4.691"/><path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" d="M10 14.314v-4l2 2.03 2-2.03v4"/></svg>`;
-var MinusIcon = `<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 16 16" width="100%" height="100%" style="display: block;"><path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" d="M3.333 8h9.334"/></svg>`;
 var NavigationMenuIcon = `<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 16 16" width="100%" height="100%" style="display: block;"><path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" d="M14 7v5.833c0 .645-.597 1.167-1.333 1.167H3.333C2.597 14 2 13.478 2 12.833V7"/><path fill="currentColor" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" d="M10.978 2.003H2.6a.6.6 0 0 0-.6.6v1.4h11.971v-1.4a.6.6 0 0 0-.6-.6h-2.393Z"/></svg>`;
 var OverlayIcon = `<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 16 16" width="100%" height="100%" style="display: block;"><path fill="#D2D2D2" d="M13.444 1H2.556C1.696 1 1 1.696 1 2.556v10.888C1 14.304 1.696 15 2.556 15h10.888c.86 0 1.556-.696 1.556-1.556V2.556C15 1.696 14.304 1 13.444 1Z"/></svg>`;
 var PaintBrushIcon = `<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 16 16" width="100%" height="100%" style="display: block;"><path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" d="m6.04 7.933 5.38-5.373a1.9 1.9 0 1 1 2.687 2.687l-5.374 5.386M4.713 9.96c-1.106 0-2 .9-2 2.013 0 .887-1.666 1.014-1.333 1.347.72.733 1.66 1.347 2.667 1.347 1.466 0 2.666-1.2 2.666-2.694a2.007 2.007 0 0 0-2-2.013Z"/></svg>`;
@@ -1682,13 +1677,9 @@ var SelectIcon = `<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0
 var SettingsIcon = `<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 16 16" width="100%" height="100%" style="display: block;"><path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" d="M13.987 6H9.32M13.932 6h-12M14 10.5H2"/><rect width="4" height="4" x="1.932" y="8.534" fill="#fff" stroke="currentColor" rx="2"/><rect width="4" height="4" x="10.068" y="4" fill="#fff" stroke="currentColor" rx="2"/></svg>`;
 var SlotComponentIcon = `<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 16 16" width="100%" height="100%" style="display: block;"><path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" d="M4.5 2H3.333A1.333 1.333 0 0 0 2 3.333V4.5M14 4.5V3.333A1.333 1.333 0 0 0 12.667 2H11.5M14 12.667c0 .021 0 .042-.002.063M11.5 14h1.167a1.333 1.333 0 0 0 1.331-1.27m0 0V11.5M2 11.5v1.167A1.333 1.333 0 0 0 3.333 14H4.5M7 2h2M7 14h2M2 7v2M14 7v2"/></svg>`;
 var StaggerAnimationIcon = `<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 16 16" width="100%" height="100%" style="display: block;"><path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" d="M14.222 5H8.778A.778.778 0 0 0 8 5.778v5.444c0 .43.348.778.778.778h5.444c.43 0 .778-.348.778-.778V5.778A.778.778 0 0 0 14.222 5ZM5.444 6H1.556A.556.556 0 0 0 1 6.556v3.888c0 .307.249.556.556.556h3.888A.556.556 0 0 0 6 10.444V6.556A.556.556 0 0 0 5.444 6Z"/></svg>`;
-var SubscriptIcon = `<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 16 16" width="100%" height="100%" style="display: block;"><path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" d="M2.667 3.333 8 8.667M8 3.333 2.667 8.667M13.333 12.667h-2.666c0-1 .293-1.334 1-1.667.706-.333 1.666-.78 1.666-1.667 0-.313-.113-.62-.32-.86a1.407 1.407 0 0 0-1.746-.293c-.28.16-.494.413-.6.713"/></svg>`;
-var SuperscriptIcon = `<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 16 16" width="100%" height="100%" style="display: block;"><path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" d="M2.667 12.667 8 7.333M8 12.667 2.667 7.333M13.333 8h-2.666c0-1 .294-1.333 1-1.667.705-.333 1.666-.777 1.666-1.665 0-.315-.113-.62-.322-.86a1.403 1.403 0 0 0-1.745-.29c-.28.159-.492.409-.6.706"/></svg>`;
 var SwitchIcon = `<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 16 16" width="100%" height="100%" style="display: block;"><path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" d="M10.667 4H5.333a4 4 0 1 0 0 8h5.334a4 4 0 0 0 0-8Z"/><path fill="currentColor" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" d="M5.333 9.333a1.333 1.333 0 1 0 0-2.666 1.333 1.333 0 0 0 0 2.666Z"/></svg>`;
 var TabsIcon = `<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 16 16" width="100%" height="100%" style="display: block;"><path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" d="M9.75 5H13M9.75 5H7.401A1.684 1.684 0 0 1 6 4.25v0l-.5-.75-.5-.75L4.5 2m5.25 3-1-1.5-.5-.75-.5-.75M4.5 2H3v0a1.5 1.5 0 0 0-1.5 1.5v9A1.5 1.5 0 0 0 3 14h10v0a1.5 1.5 0 0 0 1.5-1.5v0-6A1.5 1.5 0 0 0 13 5v0M4.5 2h3.25m0 0h2.375v0c.547 0 1.057.273 1.36.728l.015.022.5.75L13 5"/></svg>`;
-var TextAlignLeftIcon = `<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 16 16" width="100%" height="100%" style="display: block;"><path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" d="M10 8H2M11.333 12H2M14 4H2"/></svg>`;
 var TextAnimationIcon = `<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 16 16" width="100%" height="100%" style="display: block;"><path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" d="M7.476 4.3 7.817 3l6.935 1.817-.34 1.3m-6.245 4.386 2.601.682m.517-7.276-1.817 6.935M2 9.938V9h5v.938M3.562 14h1.875M4.5 9v5"/></svg>`;
-var TextItalicIcon = `<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 16 16" width="100%" height="100%" style="display: block;"><path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" d="M12.667 2.667h-6M9.333 13.333h-6M10 2.667 6 13.333"/></svg>`;
 var TextIcon = `<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 16 16" width="100%" height="100%" style="display: block;"><path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" d="M2.667 4.667v-2h10.666v2M6 13.333h4M8 2.667v10.666"/></svg>`;
 var TooltipIcon = `<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 16 16" width="100%" height="100%" style="display: block;"><path stroke="#000" stroke-linecap="round" stroke-linejoin="round" d="M14 10a1.333 1.333 0 0 1-1.333 1.333h-8L2 14V3.333A1.333 1.333 0 0 1 3.333 2h9.334A1.333 1.333 0 0 1 14 3.333V10Z"/></svg>`;
 var TriggerIcon = `<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 16 16" width="100%" height="100%" style="display: block;"><path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" d="M11.915 7.354v-.647a1.294 1.294 0 1 0-2.587 0"/><path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" d="M9.328 6.707V6.06a1.294 1.294 0 1 0-2.587 0v.647"/><path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" d="M6.74 6.383V2.826a1.293 1.293 0 1 0-2.586 0v6.467"/><path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" d="M11.914 7.353a1.293 1.293 0 0 1 2.587 0v1.94a5.174 5.174 0 0 1-5.174 5.174H8.034c-1.81 0-2.91-.556-3.874-1.513l-2.328-2.328a1.293 1.293 0 0 1 1.83-1.824L4.8 9.94"/></svg>`;
@@ -2484,11 +2475,6 @@ var PresetStyleDecl = z.object({
   property: z.string(),
   value: StyleValue
 });
-z.object({
-  props: z.record(PropMeta),
-  // Props that will be always visible in properties panel.
-  initialProps: z.array(z.string()).optional()
-});
 var componentCategories = [
   "general",
   "typography",
@@ -2499,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({
   /*
@@ -2533,11 +2511,6 @@ var ContentModel = z.object({
 });
 z.object({
   category: z.enum(componentCategories).optional(),
-  /**
-   * a property used as textual placeholder when no content specified while in builder
-   * also signals to not insert components inside unless dropped explicitly
-   */
-  placeholder: z.string().optional(),
   contentModel: ContentModel.optional(),
   // when this field is specified component receives
   // prop with index of same components withiin specified ancestor
@@ -2546,18 +2519,21 @@ z.object({
   indexWithinAncestor: z.optional(z.string()),
   label: z.optional(z.string()),
   description: z.string().optional(),
-  icon: z.string(),
+  icon: z.string().optional(),
   presetStyle: z.optional(z.record(z.string(), z.array(PresetStyleDecl))),
   states: z.optional(z.array(ComponentState)),
-  order: z.number().optional()
+  order: z.number().optional(),
+  // properties and html attributes that will be always visible in properties panel
+  initialProps: z.array(z.string()).optional(),
+  props: z.record(PropMeta).optional()
 });
 var normalize_css_exports = {};
 __export(normalize_css_exports, {
-  a: () => a$b,
+  a: () => a$9,
   address: () => address$1,
   article: () => article$1,
   aside: () => aside$1,
-  b: () => b$8,
+  b: () => b$6,
   body: () => body$1,
   button: () => button$1,
   checkbox: () => checkbox$1,
@@ -2575,7 +2551,7 @@ __export(normalize_css_exports, {
   header: () => header$1,
   hr: () => hr$1,
   html: () => html,
-  i: () => i$8,
+  i: () => i$a,
   img: () => img$1,
   input: () => input$1,
   kbd: () => kbd,
@@ -2586,7 +2562,7 @@ __export(normalize_css_exports, {
   nav: () => nav$1,
   ol: () => ol$1,
   optgroup: () => optgroup,
-  p: () => p$b,
+  p: () => p$8,
   pre: () => pre,
   progress: () => progress,
   radio: () => radio$1,
@@ -2642,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$8 = div$1;
+var i$a = div$1;
 var img$1 = div$1;
-var a$b = div$1;
+var a$9 = div$1;
 var li$1 = div$1;
 var ul$1 = div$1;
 var ol$1 = div$1;
-var p$b = div$1;
+var p$8 = div$1;
 var span$1 = div$1;
 var html = [
   { property: "display", value: { type: "keyword", value: "grid" } },
@@ -2697,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: "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$8 = [
+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 }
@@ -2743,7 +2710,7 @@ var b$8 = [
     value: { type: "unit", unit: "px", value: 1 }
   }
 ];
-var strong = b$8;
+var strong = b$6;
 var code$1 = [
   {
     property: "font-family",
@@ -3152,6 +3119,113 @@ var summary = [
     value: { type: "unit", unit: "px", value: 1 }
   }
 ];
+var tagProperty$1 = "data-ws-tag";
+var tags = [
+  "div",
+  "span",
+  "a",
+  "abbr",
+  "address",
+  "area",
+  "article",
+  "aside",
+  "audio",
+  "b",
+  "bdi",
+  "bdo",
+  "blockquote",
+  "body",
+  "br",
+  "button",
+  "canvas",
+  "caption",
+  "cite",
+  "code",
+  "col",
+  "colgroup",
+  "data",
+  "datalist",
+  "dd",
+  "del",
+  "details",
+  "dfn",
+  "dialog",
+  "dl",
+  "dt",
+  "em",
+  "embed",
+  "fieldset",
+  "figcaption",
+  "figure",
+  "footer",
+  "form",
+  "h1",
+  "h2",
+  "h3",
+  "h4",
+  "h5",
+  "h6",
+  "head",
+  "header",
+  "hgroup",
+  "hr",
+  "html",
+  "i",
+  "iframe",
+  "img",
+  "input",
+  "ins",
+  "kbd",
+  "label",
+  "legend",
+  "li",
+  "main",
+  "map",
+  "mark",
+  "menu",
+  "meter",
+  "nav",
+  "object",
+  "ol",
+  "optgroup",
+  "option",
+  "output",
+  "p",
+  "picture",
+  "pre",
+  "progress",
+  "q",
+  "rp",
+  "rt",
+  "ruby",
+  "s",
+  "samp",
+  "search",
+  "section",
+  "select",
+  "slot",
+  "small",
+  "source",
+  "strong",
+  "sub",
+  "summary",
+  "sup",
+  "table",
+  "tbody",
+  "td",
+  "textarea",
+  "tfoot",
+  "th",
+  "thead",
+  "time",
+  "tr",
+  "track",
+  "u",
+  "ul",
+  "var",
+  "video",
+  "wbr"
+];
 var rootComponent = "ws:root";
 var rootMeta = {
   label: "Global Root",
@@ -3163,9 +3237,17 @@ var rootMeta = {
 var elementComponent = "ws:element";
 var elementMeta = {
   label: "Element",
-  icon: BoxIcon,
   // convert [object Module] to [object Object] to enable structured cloning
-  presetStyle: { ...normalize_css_exports }
+  presetStyle: { ...normalize_css_exports },
+  initialProps: [tagProperty$1, "id", "class"],
+  props: {
+    [tagProperty$1]: {
+      type: "string",
+      control: "tag",
+      required: true,
+      options: tags
+    }
+  }
 };
 var collectionComponent = "ws:collection";
 var collectionMeta = {
@@ -3174,6 +3256,14 @@ var collectionMeta = {
   contentModel: {
     category: "instance",
     children: ["instance"]
+  },
+  initialProps: ["data"],
+  props: {
+    data: {
+      required: true,
+      control: "json",
+      type: "json"
+    }
   }
 };
 var descendantComponent = "ws:descendant";
@@ -3185,7 +3275,33 @@ var descendantMeta = {
     children: []
   },
   // @todo infer possible presets
-  presetStyle: {}
+  presetStyle: {},
+  initialProps: ["selector"],
+  props: {
+    selector: {
+      required: true,
+      type: "string",
+      control: "select",
+      options: [
+        " p",
+        " h1",
+        " h2",
+        " h3",
+        " h4",
+        " h5",
+        " h6",
+        " :where(strong, b)",
+        " :where(em, i)",
+        " a",
+        " img",
+        " blockquote",
+        " code",
+        " :where(ul, ol)",
+        " li",
+        " hr"
+      ]
+    }
+  }
 };
 var blockComponent = "ws:block";
 var blockTemplateComponent = "ws:block-template";
@@ -4288,6 +4404,7 @@ var generateJsxElement = ({
   context = "jsx",
   scope,
   metas,
+  tagsOverrides,
   instance,
   props,
   dataSources,
@@ -4300,7 +4417,8 @@ var generateJsxElement = ({
   if (instance.component === descendantComponent) {
     return "";
   }
-  const hasTags = Object.keys(((_a2 = metas.get(instance.component)) == null ? void 0 : _a2.presetStyle) ?? {}).length > 0;
+  const meta = metas.get(instance.component);
+  const hasTags = Object.keys((meta == null ? void 0 : meta.presetStyle) ?? {}).length > 0;
   let generatedProps = "";
   const index = indexesWithinAncestors.get(instance.id);
   if (index !== void 0) {
@@ -4329,7 +4447,7 @@ ${tagProperty}=${JSON.stringify(instance.tag)}`;
       continue;
     }
     let name2 = prop.name;
-    if (instance.component === elementComponent || hasTags) {
+    if (hasTags && !((_a2 = meta == null ? void 0 : meta.props) == null ? void 0 : _a2[prop.name])) {
       name2 = standardAttributesToReactProps[prop.name] ?? prop.name;
     }
     if (prop.name === showAttribute) {
@@ -4391,21 +4509,19 @@ ${name2}={${propValue}}`;
 `;
   } else if (instance.component === blockComponent) {
     generatedElement += children;
-  } else if (instance.component === elementComponent) {
-    const tagName = instance.tag ?? "div";
-    if (instance.children.length === 0) {
-      generatedElement += `<${tagName}${generatedProps} />
-`;
+  } else {
+    let componentVariable;
+    if (instance.component === elementComponent) {
+      componentVariable = instance.tag ?? "div";
+      const componentDescriptor = tagsOverrides == null ? void 0 : tagsOverrides[componentVariable];
+      if (componentDescriptor !== void 0) {
+        const [_importSource, importSpecifier] = componentDescriptor.split(":");
+        componentVariable = scope.getName(componentDescriptor, importSpecifier);
+      }
     } else {
-      generatedElement += `<${tagName}${generatedProps}>
-`;
-      generatedElement += children;
-      generatedElement += `</${tagName}>
-`;
+      const [_namespace, shortName] = parseComponentName(instance.component);
+      componentVariable = scope.getName(instance.component, shortName);
     }
-  } else {
-    const [_namespace, shortName] = parseComponentName(instance.component);
-    const componentVariable = scope.getName(instance.component, shortName);
     if (instance.children.length === 0) {
       generatedElement += `<${componentVariable}${generatedProps} />
 `;
@@ -4443,6 +4559,7 @@ ${name2}={${propValue}}`;
 var generateJsxChildren = ({
   scope,
   metas,
+  tagsOverrides,
   children,
   instances,
   props,
@@ -4484,6 +4601,7 @@ var generateJsxChildren = ({
         context: "jsx",
         scope,
         metas,
+        tagsOverrides,
         instance,
         props,
         dataSources,
@@ -4494,6 +4612,7 @@ var generateJsxChildren = ({
           classesMap,
           scope,
           metas,
+          tagsOverrides,
           children: instance.children,
           instances,
           props,
@@ -4517,6 +4636,7 @@ var generateWebstudioComponent = ({
   props,
   dataSources,
   metas,
+  tagsOverrides,
   classesMap
 }) => {
   const instance = instances.get(rootInstanceId);
@@ -4530,6 +4650,7 @@ var generateWebstudioComponent = ({
       context: "expression",
       scope,
       metas,
+      tagsOverrides,
       instance,
       props,
       dataSources,
@@ -4539,6 +4660,7 @@ var generateWebstudioComponent = ({
       children: generateJsxChildren({
         scope,
         metas,
+        tagsOverrides,
         children: instance.children,
         instances,
         props,
@@ -4714,29 +4836,34 @@ const htmlToJsx = (html2) => {
   }
   return result;
 };
-const e$3 = {
+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 o$2 = {
-  icon: ""
-};
-const e$2 = {
+const t$i = {};
+const e$x = {
+  className: {
+    required: false,
+    control: "text",
+    type: "string",
+    description: "Classes to which the element belongs"
+  },
   clientOnly: { required: false, control: "boolean", type: "boolean" },
+  code: { required: true, control: "text", type: "string" },
   executeScriptOnCanvas: {
     required: false,
     control: "boolean",
     type: "boolean"
   }
 };
-const r$b = {
+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]
@@ -4752,19 +4879,31 @@ const r$b = {
         value: { type: "keyword", value: "collapse" }
       }
     ]
-  }
-};
-({
+  },
+  initialProps: ["class", "clientOnly", "executeScriptOnCanvas"],
   props: {
+    ...e$x,
     clientOnly: {
-      ...e$2.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$2.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!"
+    },
+    code: {
+      required: true,
+      control: "code",
+      language: "html",
+      type: "string"
     }
   }
-});
-const a$a = {
+};
+const t$h = {
+  code: { required: true, control: "text", type: "string" }
+};
+const a$7 = {
   icon: MarkdownEmbedIcon,
   contentModel: {
     category: "instance",
@@ -4781,6 +4920,16 @@ const a$a = {
         value: { type: "keyword", value: "collapse" }
       }
     ]
+  },
+  initialProps: ["class"],
+  props: {
+    ...t$h,
+    code: {
+      required: true,
+      control: "code",
+      language: "markdown",
+      type: "string"
+    }
   }
 };
 var div = [
@@ -4821,13 +4970,13 @@ var h3 = div;
 var h4 = div;
 var h5 = div;
 var h6 = div;
-var i$7 = div;
+var i$9 = div;
 var img = div;
-var a$9 = div;
+var a$6 = div;
 var li = div;
 var ul = div;
 var ol = div;
-var p$a = div;
+var p$7 = div;
 var span = div;
 var body = [
   { property: "margin-top", value: { type: "unit", unit: "number", value: 0 } },
@@ -4859,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$7 = [
+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 }
@@ -5138,28 +5278,16 @@ var button = [
   { property: "text-transform", value: { type: "keyword", value: "none" } }
 ];
 var select = button;
-const a$8 = {
-  body: [
-    ...body,
-    {
-      property: "-webkit-font-smoothing",
-      value: { type: "keyword", value: "antialiased" }
-    },
-    {
-      property: "-moz-osx-font-smoothing",
-      value: { type: "keyword", value: "grayscale" }
-    }
-  ]
-}, n$8 = {
-  icon: BodyIcon,
-  states: defaultStates,
-  presetStyle: a$8
+const o$G = {};
+const i$8 = {
+  presetStyle: { body },
+  initialProps: ["id", "class"],
+  props: o$G
 };
-const v$3 = {
-  category: "general",
-  description: "A container for content. By default this is a Div, but the tag can be changed in settings.",
-  icon: BoxIcon,
-  states: defaultStates,
+const t$g = {
+  tag: { required: false, control: "text", type: "string" }
+};
+const g$2 = {
   presetStyle: {
     div,
     address,
@@ -5172,11 +5300,34 @@ const v$3 = {
     nav,
     section
   },
-  order: 0
+  initialProps: ["tag", "id", "class"],
+  props: {
+    ...t$g,
+    tag: {
+      required: true,
+      control: "tag",
+      type: "string",
+      options: [
+        "div",
+        "header",
+        "footer",
+        "nav",
+        "main",
+        "section",
+        "article",
+        "aside",
+        "address",
+        "figure",
+        "span"
+      ]
+    }
+  }
+};
+const t$f = {
+  tag: { required: false, control: "text", type: "string" }
 };
 const n$7 = {
   icon: TextIcon,
-  states: defaultStates,
   presetStyle: {
     div: [
       ...div,
@@ -5185,12 +5336,22 @@ const n$7 = {
         value: { type: "unit", unit: "em", value: 1 }
       }
     ]
+  },
+  initialProps: ["tag", "id", "class"],
+  props: {
+    ...t$f,
+    tag: {
+      required: true,
+      control: "tag",
+      type: "string",
+      options: ["div", "cite", "figcaption", "span"]
+    }
   }
 };
-const d$6 = {
-  placeholder: "Heading",
-  icon: HeadingIcon,
-  states: defaultStates,
+const t$e = {
+  tag: { required: false, control: "text", type: "string" }
+};
+const m$9 = {
   presetStyle: {
     h1,
     h2,
@@ -5198,100 +5359,114 @@ const d$6 = {
     h4,
     h5,
     h6
+  },
+  initialProps: ["tag", "id", "class"],
+  props: {
+    ...t$e,
+    tag: {
+      required: true,
+      control: "tag",
+      type: "string",
+      options: ["h1", "h2", "h3", "h4", "h5", "h6"]
+    }
   }
 };
-const p$9 = {
-  p: p$a
-}, c$5 = {
-  placeholder: "Paragraph",
-  icon: TextAlignLeftIcon,
-  states: defaultStates,
-  presetStyle: p$9
+const o$F = {};
+const i$7 = {
+  presetStyle: { p: p$7 },
+  initialProps: ["id", "class"],
+  props: o$F
 };
-const a$7 = {
+const e$w = {
+  download: {
+    required: false,
+    control: "boolean",
+    type: "boolean",
+    description: "Whether to download the resource instead of navigating to it, and its filename if so"
+  },
+  prefetch: {
+    required: false,
+    control: "select",
+    type: "string",
+    options: ["none", "intent", "render", "viewport"]
+  },
+  preventScrollReset: { required: false, control: "boolean", type: "boolean" },
+  reloadDocument: { required: false, control: "boolean", type: "boolean" },
+  replace: { required: false, control: "boolean", type: "boolean" },
+  target: {
+    required: false,
+    control: "select",
+    type: "string",
+    options: ["_self", "_blank", "_parent", "_top"],
+    description: "Navigable for form submission"
+  }
+};
+const t$d = {
   a: [
-    ...a$9,
+    ...a$6,
     {
       property: "display",
       value: { type: "keyword", value: "inline-block" }
     }
   ]
-}, n$6 = {
-  placeholder: "Link",
-  icon: LinkIcon,
-  presetStyle: a$7,
-  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$w,
+    href: {
+      type: "string",
+      control: "url",
+      required: false
     }
-  ]
+  }
 };
-const p$8 = n$6;
-const e$1 = {
-  span
-}, n$5 = {
+const a$5 = p$6;
+const o$E = {};
+const e$v = {
   label: "Text",
   icon: PaintBrushIcon,
-  states: defaultStates,
-  presetStyle: e$1
+  presetStyle: { span },
+  initialProps: ["id", "class"],
+  props: o$E
 };
-const s$5 = {
-  b: b$7
-}, l$5 = {
+const o$D = {};
+const p$5 = {
   label: "Bold Text",
-  icon: BoldIcon,
-  states: defaultStates,
-  presetStyle: s$5
+  presetStyle: { b: b$5 },
+  initialProps: ["id", "class"],
+  props: o$D
 };
-const i$6 = {
-  i: [
-    ...i$7,
-    {
-      property: "font-style",
-      value: { type: "keyword", value: "italic" }
-    }
-  ]
-}, m$4 = {
+const o$C = {};
+const e$u = {
   label: "Italic Text",
-  icon: TextItalicIcon,
-  states: defaultStates,
-  presetStyle: i$6
+  presetStyle: { i: i$9 },
+  initialProps: ["id", "class"],
+  props: o$C
 };
-const s$4 = {
-  sup
-}, c$4 = {
+const o$B = {};
+const o$A = {
   label: "Superscript Text",
-  icon: SuperscriptIcon,
-  states: defaultStates,
-  presetStyle: s$4
+  presetStyle: { sup },
+  initialProps: ["id", "class"],
+  props: o$B
 };
-const p$7 = {
-  sub
-}, c$3 = {
+const o$z = {};
+const s$4 = {
   label: "Subscript Text",
-  icon: SubscriptIcon,
-  states: defaultStates,
-  presetStyle: p$7
+  presetStyle: { sub },
+  initialProps: ["id", "class"],
+  props: o$z
 };
-const l$4 = {
-  button
-}, m$3 = {
-  icon: ButtonElementIcon,
-  presetStyle: l$4,
-  states: [
-    ...defaultStates,
-    { selector: ":disabled", label: "Disabled" },
-    { selector: ":enabled", label: "Enabled" }
-  ]
+const o$y = {};
+const e$t = {
+  presetStyle: { button },
+  initialProps: ["id", "class", "type", "aria-label"],
+  props: o$y
 };
-const r$a = {
+const o$x = {};
+const p$4 = {
   input: [
     ...input,
     {
@@ -5299,28 +5474,32 @@ const r$a = {
       value: { type: "keyword", value: "block" }
     }
   ]
-}, c$2 = {
-  category: "forms",
+}, l$4 = {
   label: "Text Input",
-  description: "A single-line text input for collecting string data from your users.",
-  icon: FormTextFieldIcon,
-  presetStyle: r$a,
-  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",
+    "name",
+    "value",
+    "type",
+    "placeholder",
+    "required",
+    "autofocus"
+  ],
+  props: o$x
 };
-const c$1 = {
+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,
+    control: "radio",
+    type: "string",
+    defaultValue: "initial",
+    options: ["initial", "success", "error"]
+  }
+};
+const c$3 = {
   label: "Webhook Form",
   icon: WebhookFormIcon,
   presetStyle: {
@@ -5329,23 +5508,41 @@ const c$1 = {
   states: [
     { selector: "[data-state=error]", label: "Error" },
     { selector: "[data-state=success]", label: "Success" }
-  ]
+  ],
+  initialProps: ["id", "class", "state", "action"],
+  props: {
+    ...e$s,
+    action: {
+      type: "resource",
+      control: "resource",
+      description: "The URI of a program that processes the information submitted via the form.",
+      required: false
+    }
+  }
 };
-const s$3 = {
+const o$w = {};
+const r$e = {
   form: [
     ...form,
     { property: "min-height", value: { type: "unit", unit: "px", value: 20 } }
   ]
-}, n$4 = {
-  category: "forms",
+}, p$3 = {
   label: "Form",
-  description: "Create filters, surveys, searches and more.",
-  icon: FormIcon,
-  states: defaultStates,
-  presetStyle: s$3,
-  order: 0
+  presetStyle: r$e,
+  initialProps: ["id", "class", "action"],
+  props: o$w
+};
+const e$r = {
+  optimize: {
+    description: "Optimize the image for enhanced performance.",
+    required: false,
+    control: "boolean",
+    type: "boolean",
+    defaultValue: true
+  },
+  quality: { required: false, control: "number", type: "number" }
 };
-const a$6 = {
+const o$v = {
   img: [
     ...img,
     // Otherwise on new image insert onto canvas it can overfit screen size multiple times
@@ -5367,15 +5564,34 @@ const a$6 = {
       value: { type: "keyword", value: "auto" }
     }
   ]
-}, l$3 = {
+}, 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.",
-  icon: ImageIcon,
-  states: defaultStates,
-  presetStyle: a$6,
-  order: 0
+  presetStyle: o$v,
+  order: 0,
+  initialProps: [
+    "id",
+    "class",
+    "src",
+    "width",
+    "height",
+    "alt",
+    "loading",
+    "optimize"
+  ],
+  props: {
+    ...e$r,
+    // Automatically generated props don't have the right control.
+    src: {
+      type: "string",
+      control: "file",
+      label: "Source",
+      required: false
+    }
+  }
 };
-const r$9 = {
+const o$u = {};
+const e$q = {
   blockquote: [
     {
       property: "margin-top",
@@ -5422,13 +5638,21 @@ const r$9 = {
       value: { type: "rgb", r: 226, g: 226, b: 226, alpha: 1 }
     }
   ]
-}, i$5 = {
-  placeholder: "Blockquote",
-  icon: BlockquoteIcon,
-  states: defaultStates,
-  presetStyle: r$9
+}, r$d = {
+  presetStyle: e$q,
+  initialProps: ["id", "class", "cite"],
+  props: o$u
+};
+const e$p = {
+  ordered: {
+    description: "Shows numbers instead of bullets when toggled. See the “List Style Type” property under the “List Item” section in the Style panel for more options.",
+    required: false,
+    control: "boolean",
+    type: "boolean",
+    defaultValue: false
+  }
 };
-const a$5 = {
+const t$c = {
   ol: [
     ...ol,
     {
@@ -5459,20 +5683,19 @@ const a$5 = {
       value: { type: "keyword", value: "40px" }
     }
   ]
-}, d$5 = {
-  icon: ListIcon,
-  states: defaultStates,
-  presetStyle: a$5
+}, l$3 = {
+  presetStyle: t$c,
+  initialProps: ["id", "class", "ordered", "start", "reversed"],
+  props: e$p
 };
-const a$4 = {
-  placeholder: "List item",
-  icon: ListItemIcon,
-  states: defaultStates,
-  presetStyle: {
-    li
-  }
+const o$t = {};
+const p$2 = {
+  presetStyle: { li },
+  initialProps: ["id", "class"],
+  props: o$t
 };
-const p$6 = {
+const o$s = {};
+const o$r = {
   hr: [
     ...hr,
     {
@@ -5500,15 +5723,15 @@ const p$6 = {
       value: { type: "keyword", value: "none" }
     }
   ]
-}, n$3 = {
-  category: "general",
-  description: "Used to visually divide sections of content, helping to improve readability and organization within a webpage.",
-  icon: MinusIcon,
-  states: defaultStates,
-  presetStyle: p$6,
-  order: 3
+}, y$2 = {
+  presetStyle: o$r,
+  initialProps: ["id", "class"],
+  props: o$s
 };
-const p$5 = {
+const e$o = {
+  code: { required: false, control: "text", type: "string" }
+};
+const o$q = {
   code: [
     ...code,
     {
@@ -5536,30 +5759,37 @@ const p$5 = {
       value: { type: "rgb", r: 238, g: 238, b: 238, alpha: 1 }
     }
   ]
-}, i$4 = {
-  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$5,
-  order: 5
+  presetStyle: o$q,
+  initialProps: ["id", "class", "lang", "code"],
+  props: {
+    ...e$o,
+    code: {
+      required: true,
+      control: "codetext",
+      type: "string"
+    }
+  }
 };
-const r$8 = {
+const o$p = {};
+const o$o = {
   label: [
     ...label,
     { property: "display", value: { type: "keyword", value: "block" } }
   ]
-}, i$3 = {
+}, t$b = {
   label: "Input Label",
-  icon: LabelIcon,
-  states: defaultStates,
-  presetStyle: r$8
+  presetStyle: o$o,
+  initialProps: ["id", "class", "for"],
+  props: o$p
 };
-const l$2 = {
+const o$n = {};
+const t$a = {
   textarea: [
     ...textarea,
     // resize doesn't work well while on canvas
@@ -5569,32 +5799,33 @@ const l$2 = {
       value: { type: "keyword", value: "block" }
     }
   ]
-}, n$2 = {
-  category: "forms",
+}, l$2 = {
   label: "Text Area",
-  description: "A multi-line text input for collecting longer string data from your users.",
-  icon: FormTextAreaIcon,
-  presetStyle: l$2,
-  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",
+    "name",
+    "value",
+    "placeholder",
+    "required",
+    "autofocus"
+  ],
+  props: o$n
 };
-const a$3 = {
+const e$n = {
+  value: {
+    required: false,
+    control: "text",
+    type: "string",
+    description: "Value of the form control"
+  }
+};
+const r$c = {
   input: [
     ...radio,
     {
@@ -5602,23 +5833,22 @@ const a$3 = {
       value: { type: "unit", unit: "em", value: 0.5 }
     }
   ]
-}, s$2 = {
+}, m$8 = {
   label: "Radio",
   icon: RadioCheckedIcon,
-  presetStyle: a$3,
-  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
+};
+const e$m = {
+  value: {
+    required: false,
+    control: "text",
+    type: "string",
+    description: "Value of the form control"
+  }
 };
-const o$1 = {
+const t$9 = {
   input: [
     ...checkbox,
     {
@@ -5626,101 +5856,839 @@ const o$1 = {
       value: { type: "unit", unit: "em", value: 0.5 }
     }
   ]
-}, d$4 = {
+}, m$7 = {
   icon: CheckboxCheckedIcon,
-  presetStyle: o$1,
-  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
 };
-const m$2 = {
-  icon: VimeoIcon,
-  states: defaultStates,
-  contentModel: {
-    category: "instance",
-    children: ["instance"],
-    descendants: ["VimeoSpinner", "VimeoPlayButton", "VimeoPreviewImage"]
+const e$l = {
+  autopause: {
+    description: "Whether to pause the current video when another Vimeo video on the same page starts to play. Set this value to false to permit simultaneous playback of all the videos on the page. This option has no effect if you've disabled cookies in your browser, either through browser settings or with an extension or plugin.",
+    required: false,
+    control: "boolean",
+    type: "boolean",
+    defaultValue: true
   },
-  presetStyle: {
-    div
-  }
-};
-const p$4 = {
-  icon: YoutubeIcon,
-  states: defaultStates,
-  contentModel: {
-    category: "instance",
-    children: ["instance"],
-    descendants: ["VimeoSpinner", "VimeoPlayButton", "VimeoPreviewImage"]
+  autopip: {
+    description: "Whether to enable the browser to enter picture-in-picture mode automatically when switching tabs or windows, where supported.",
+    required: false,
+    control: "boolean",
+    type: "boolean"
   },
-  presetStyle: {
-    div
-  }
-};
-const p$3 = {
-  ...l$3,
-  category: "hidden",
-  label: "Preview Image",
-  contentModel: {
-    category: "none",
-    children: []
-  }
-};
-const m$1 = {
-  category: "hidden",
-  label: "Play Button",
-  icon: ButtonElementIcon,
-  states: defaultStates,
-  contentModel: {
-    category: "none",
-    children: ["instance"]
+  autoplay: {
+    description: "Whether to start playback of the video automatically. This feature might not work on all devices.\nSome browsers require the `muted` parameter to be set to `true` for autoplay to work.",
+    required: false,
+    control: "boolean",
+    type: "boolean",
+    defaultValue: false
   },
-  presetStyle: {
-    button
-  }
-};
-const s$1 = {
-  icon: BoxIcon,
-  states: defaultStates,
-  category: "hidden",
-  label: "Spinner",
-  contentModel: {
-    category: "none",
-    children: ["instance"]
+  backgroundMode: {
+    description: "Whether the player is in background mode, which hides the playback controls, enables autoplay, and loops the video.",
+    required: false,
+    control: "boolean",
+    type: "boolean"
   },
-  presetStyle: {
-    div
-  }
+  controlsColor: {
+    description: "A color value of the playback controls, which is normally #00ADEF. The embed settings of the video might override this value.",
+    required: false,
+    control: "color",
+    type: "string"
+  },
+  doNotTrack: {
+    description: "Whether to prevent the player from tracking session data, including cookies. Keep in mind that setting this argument to true also blocks video stats.",
+    required: false,
+    control: "boolean",
+    type: "boolean",
+    defaultValue: false
+  },
+  interactiveParams: {
+    description: "Key-value pairs representing dynamic parameters that are utilized on interactive videos with live elements, such as title=my-video,subtitle=interactive.",
+    required: false,
+    control: "text",
+    type: "string"
+  },
+  keyboard: {
+    description: "Whether to enable keyboard input to trigger player events. This setting doesn't affect tab control.",
+    required: false,
+    control: "boolean",
+    type: "boolean",
+    defaultValue: true
+  },
+  loading: {
+    description: "Not a Vimeo attribute: Loading attribute for the iframe allows to eager or lazy load the source",
+    required: false,
+    control: "radio",
+    type: "string",
+    defaultValue: "lazy",
+    options: ["eager", "lazy"]
+  },
+  loop: {
+    description: "Whether to restart the video automatically after reaching the end.",
+    required: false,
+    control: "boolean",
+    type: "boolean",
+    defaultValue: false
+  },
+  muted: {
+    description: "Whether the video is muted upon loading. The true value is required for the autoplay behavior in some browsers.",
+    required: false,
+    control: "boolean",
+    type: "boolean",
+    defaultValue: false
+  },
+  pip: {
+    description: "Whether to include the picture-in-picture button among the player controls and enable the picture-in-picture API.",
+    required: false,
+    control: "boolean",
+    type: "boolean",
+    defaultValue: false
+  },
+  playsinline: {
+    description: "Whether the video plays inline on supported mobile devices. To force the device to play the video in fullscreen mode instead, set this value to false.",
+    required: false,
+    control: "boolean",
+    type: "boolean",
+    defaultValue: false
+  },
+  quality: {
+    description: "For videos on a Vimeo Plus account or higher: the playback quality of the video. Use auto for the best possible quality given available bandwidth and other factors. You can also specify 360p, 540p, 720p, 1080p, 2k, and 4k.",
+    required: false,
+    control: "select",
+    type: "string",
+    defaultValue: "auto",
+    options: ["auto", "360p", "540p", "720p", "1080p", "2k", "4k"]
+  },
+  responsive: {
+    description: "Whether to return a responsive embed code, or one that provides intelligent adjustments based on viewing conditions. We recommend this option for mobile-optimized sites.",
+    required: false,
+    control: "boolean",
+    type: "boolean",
+    defaultValue: true
+  },
+  showByline: {
+    description: "Whether to display the video owner's name.",
+    required: false,
+    control: "boolean",
+    type: "boolean",
+    defaultValue: false
+  },
+  showControls: {
+    description: "Whether to display the player's interactive elements, including the play bar and sharing buttons. Set this option to false for a chromeless experience. To control playback when the play/pause button is hidden, set autoplay to true, use keyboard controls (which remain active), or implement our player SDK.",
+    required: false,
+    control: "boolean",
+    type: "boolean",
+    defaultValue: true
+  },
+  showPortrait: {
+    description: "Whether to display the video owner's portrait. Only works if either title or byline are also enabled",
+    required: false,
+    control: "boolean",
+    type: "boolean",
+    defaultValue: true
+  },
+  showPreview: {
+    description: "Not a Vimeo attribute: Whether the preview image should be loaded from Vimeo API. Ideally don't use it, because it will show up with some delay and will make your project feel slower.",
+    required: false,
+    control: "boolean",
+    type: "boolean",
+    defaultValue: false
+  },
+  showTitle: {
+    description: "Whether the player displays the title overlay.",
+    required: false,
+    control: "boolean",
+    type: "boolean",
+    defaultValue: false
+  },
+  speed: {
+    description: "Whether the player displays speed controls in the preferences menu and enables the playback rate API.",
+    required: false,
+    control: "boolean",
+    type: "boolean",
+    defaultValue: false
+  },
+  texttrack: {
+    description: `The text track to display with the video. Specify the text track by its language code (en), the language code and locale (en-US), or the language code and kind (en.captions). For this argument to work, the video must already have a text track of the given type; see our Help Center or Working with Text Track Uploads for more information.
+To enable automatically generated closed captions instead, provide the value en-x-autogen. Please note that, at the present time, automatic captions are always in English.`,
+    required: false,
+    control: "text",
+    type: "string"
+  },
+  transparent: {
+    description: "Whether the responsive player and transparent background are enabled.",
+    required: false,
+    control: "boolean",
+    type: "boolean",
+    defaultValue: true
+  },
+  url: {
+    description: "The ID or the URL of the video on Vimeo. You must supply one of these values to identify the video. When the video's privacy setting is Private, you must use the URL, and the URL must include the h parameter. For more information, see Vimeo’s introductory guide.",
+    required: false,
+    control: "text",
+    type: "string"
+  }
+};
+const i$5 = [
+  "id",
+  "className",
+  "url",
+  "title",
+  "quality",
+  "loading",
+  "showPreview",
+  "autoplay",
+  "doNotTrack",
+  "loop",
+  "muted",
+  "showPortrait",
+  "showByline",
+  "showTitle",
+  "showControls",
+  "controlsColor",
+  "playsinline"
+], s$3 = {
+  icon: VimeoIcon,
+  contentModel: {
+    category: "instance",
+    children: ["instance"],
+    descendants: ["VimeoSpinner", "VimeoPlayButton", "VimeoPreviewImage"]
+  },
+  presetStyle: { div },
+  initialProps: i$5,
+  props: e$l
 };
-const i$2 = {
+const e$k = {
+  allowFullscreen: {
+    description: "Whether to allow fullscreen mode.\nOriginal parameter: `fs`",
+    required: false,
+    control: "boolean",
+    type: "boolean",
+    defaultValue: true
+  },
+  autoplay: {
+    description: "Whether the video should autoplay.\nSome browsers require the `muted` parameter to be set to `true` for autoplay to work.",
+    required: false,
+    control: "boolean",
+    type: "boolean",
+    defaultValue: false
+  },
+  captionLanguage: {
+    description: "Specifies the default language that the player will use to display captions.\nThe value is an ISO 639-1 two-letter language code.\nOriginal parameter: `cc_lang_pref`",
+    required: false,
+    control: "text",
+    type: "string"
+  },
+  color: {
+    description: `Specifies the color that will be used in the player's video progress bar to highlight the amount of the video that the viewer has already seen.
+Valid values are 'red' and 'white'.`,
+    required: false,
+    control: "radio",
+    type: "string",
+    options: ["red", "white"]
+  },
+  disableKeyboard: {
+    description: "Whether to disable keyboard controls.\nOriginal parameter: `disablekb`",
+    required: false,
+    control: "boolean",
+    type: "boolean",
+    defaultValue: false
+  },
+  endTime: {
+    description: "End time of the video in seconds.\nOriginal parameter: `end`",
+    required: false,
+    control: "number",
+    type: "number"
+  },
+  inline: {
+    description: "Whether to play inline on mobile (not fullscreen).",
+    required: false,
+    control: "boolean",
+    type: "boolean",
+    defaultValue: false
+  },
+  keyboard: {
+    description: "Whether to enable keyboard controls.",
+    required: false,
+    control: "boolean",
+    type: "boolean",
+    defaultValue: true
+  },
+  language: {
+    description: "Sets the player's interface language. The value is an ISO 639-1 two-letter language code or a fully specified locale.\nOriginal parameter: `hl`",
+    required: false,
+    control: "text",
+    type: "string"
+  },
+  listId: {
+    description: "ID of the playlist to load.\nOriginal parameter: `list`",
+    required: false,
+    control: "text",
+    type: "string"
+  },
+  listType: {
+    description: "Type of playlist to load.",
+    required: false,
+    control: "radio",
+    type: "string",
+    options: ["playlist", "user_uploads"]
+  },
+  loading: {
+    description: "Loading strategy for iframe",
+    required: false,
+    control: "radio",
+    type: "string",
+    defaultValue: "lazy",
+    options: ["eager", "lazy"]
+  },
+  loop: {
+    description: "Whether the video should loop continuously.",
+    required: false,
+    control: "boolean",
+    type: "boolean",
+    defaultValue: false
+  },
+  muted: {
+    description: "Whether the video should start muted.\nUseful for enabling autoplay in browsers that require videos to be muted.\nOriginal parameter: `mute`",
+    required: false,
+    control: "boolean",
+    type: "boolean",
+    defaultValue: false
+  },
+  origin: {
+    description: "Your domain for API compliance (e.g., `https://yourdomain.com`).",
+    required: false,
+    control: "text",
+    type: "string"
+  },
+  playlist: {
+    description: "This parameter specifies a comma-separated list of video IDs to play",
+    required: false,
+    control: "text",
+    type: "string"
+  },
+  privacyEnhancedMode: {
+    description: `The Privacy Enhanced Mode of the YouTube embedded player prevents the use of views of embedded YouTube content from influencing the viewer’s browsing experience on YouTube.
+https://support.google.com/youtube/answer/171780?hl=en#zippy=%2Cturn-on-privacy-enhanced-mode`,
+    required: false,
+    control: "boolean",
+    type: "boolean",
+    defaultValue: true
+  },
+  referrer: {
+    description: "Referrer URL for tracking purposes.\nOriginal parameter: `widget_referrer`",
+    required: false,
+    control: "text",
+    type: "string"
+  },
+  showAnnotations: {
+    description: "Whether to show annotations on the video.\nOriginal parameter: `iv_load_policy`",
+    required: false,
+    control: "boolean",
+    type: "boolean",
+    defaultValue: true
+  },
+  showCaptions: {
+    description: "Whether captions should be shown by default.\nOriginal parameter: `cc_load_policy`",
+    required: false,
+    control: "boolean",
+    type: "boolean",
+    defaultValue: false
+  },
+  showControls: {
+    description: "Whether to show player controls.",
+    required: false,
+    control: "boolean",
+    type: "boolean",
+    defaultValue: true
+  },
+  showPreview: { required: false, control: "boolean", type: "boolean" },
+  showRelatedVideos: {
+    description: "Whether to show related videos at the end.\nOriginal parameter: `rel`",
+    required: false,
+    control: "boolean",
+    type: "boolean",
+    defaultValue: true
+  },
+  startTime: {
+    description: "Start time of the video in seconds.\nOriginal parameter: `start`",
+    required: false,
+    control: "number",
+    type: "number"
+  },
+  url: {
+    description: "The YouTube video URL or ID",
+    required: false,
+    control: "text",
+    type: "string"
+  }
+};
+const n$6 = [
+  "id",
+  "className",
+  "url",
+  "privacyEnhancedMode",
+  "title",
+  "loading",
+  "showPreview",
+  "autoplay",
+  "showControls",
+  "showRelatedVideos",
+  "keyboard",
+  "loop",
+  "inline",
+  "allowFullscreen",
+  "showCaptions",
+  "showAnnotations",
+  "startTime",
+  "endTime",
+  "disableKeyboard",
+  "referrer",
+  "listType",
+  "listId",
+  "origin",
+  "captionLanguage",
+  "language",
+  "color",
+  "playlist"
+], s$2 = {
+  icon: YoutubeIcon,
+  contentModel: {
+    category: "instance",
+    children: ["instance"],
+    descendants: ["VimeoSpinner", "VimeoPlayButton", "VimeoPreviewImage"]
+  },
+  presetStyle: { div },
+  initialProps: n$6,
+  props: e$k
+};
+const e$j = {
+  optimize: {
+    description: "Optimize the image for enhanced performance.",
+    required: false,
+    control: "boolean",
+    type: "boolean"
+  },
+  quality: { required: false, control: "number", type: "number" }
+};
+const i$4 = {
+  ...i$6,
+  category: "hidden",
+  label: "Preview Image",
+  contentModel: {
+    category: "none",
+    children: []
+  },
+  initialProps: i$6.initialProps,
+  props: {
+    ...e$j,
+    // Automatically generated props don't have the right control.
+    src: {
+      type: "string",
+      control: "file",
+      label: "Source",
+      required: false
+    }
+  }
+};
+const o$m = {};
+const c$1 = {
+  category: "hidden",
+  label: "Play Button",
+  icon: ButtonElementIcon,
+  contentModel: {
+    category: "none",
+    children: ["instance"]
+  },
+  presetStyle: { button },
+  initialProps: ["id", "class"],
+  props: o$m
+};
+const o$l = {};
+const c = {
+  icon: BoxIcon,
+  category: "hidden",
+  label: "Spinner",
+  contentModel: {
+    category: "none",
+    children: ["instance"]
+  },
+  presetStyle: { div },
+  initialProps: ["id", "class"],
+  props: o$l
+};
+const e$i = {
+  href: {
+    required: false,
+    control: "text",
+    type: "string",
+    description: "Document base URL"
+  },
+  hreflang: {
+    required: false,
+    control: "text",
+    type: "string",
+    description: "Language of the linked resource"
+  },
+  rel: {
+    required: false,
+    control: "text",
+    type: "string",
+    description: "Relationship between the location in the document containing the hyperlink and the destination resource"
+  },
+  tag: { required: false, control: "text", type: "string", defaultValue: "" },
+  xmlns: { required: false, control: "text", type: "string" },
+  "xmlns:xhtml": { required: false, control: "text", type: "string" }
+};
+const m$6 = {
   category: "xml",
   order: 6,
   icon: XmlIcon,
-  description: "XML Node"
+  description: "XML Node",
+  initialProps: ["tag"],
+  props: e$i
 };
-const a$2 = {
+const e$h = {
+  dateStyle: {
+    required: false,
+    control: "radio",
+    type: "string",
+    defaultValue: "short",
+    options: ["long", "short"]
+  },
+  datetime: {
+    required: false,
+    control: "text",
+    type: "string",
+    defaultValue: "dateTime attribute is not set",
+    description: "Machine-readable value"
+  }
+};
+const a$4 = {
   category: "xml",
   description: "Converts machine-readable date and time to ISO format.",
   icon: CalendarIcon,
-  order: 7
+  order: 7,
+  initialProps: ["datetime", "dateStyle"],
+  props: e$h
 };
-const r$7 = {
-  time
-}, s = {
+const e$g = {
+  country: {
+    required: false,
+    control: "select",
+    type: "string",
+    defaultValue: "GB",
+    options: [
+      "AF",
+      "AL",
+      "DZ",
+      "AS",
+      "AD",
+      "AO",
+      "AI",
+      "AQ",
+      "AG",
+      "AR",
+      "AM",
+      "AW",
+      "AU",
+      "AT",
+      "AZ",
+      "BS",
+      "BH",
+      "BD",
+      "BB",
+      "BY",
+      "BE",
+      "BZ",
+      "BJ",
+      "BM",
+      "BT",
+      "BO",
+      "BA",
+      "BW",
+      "BR",
+      "BN",
+      "BG",
+      "BF",
+      "BI",
+      "CV",
+      "KH",
+      "CM",
+      "CA",
+      "KY",
+      "CF",
+      "TD",
+      "CL",
+      "CN",
+      "CO",
+      "KM",
+      "CG",
+      "CD",
+      "CR",
+      "HR",
+      "CU",
+      "CY",
+      "CZ",
+      "DK",
+      "DJ",
+      "DM",
+      "DO",
+      "EC",
+      "EG",
+      "SV",
+      "GQ",
+      "ER",
+      "EE",
+      "SZ",
+      "ET",
+      "FJ",
+      "FI",
+      "FR",
+      "GA",
+      "GM",
+      "GE",
+      "DE",
+      "GH",
+      "GR",
+      "GD",
+      "GT",
+      "GN",
+      "GW",
+      "GY",
+      "HT",
+      "HN",
+      "HU",
+      "IS",
+      "IN",
+      "ID",
+      "IR",
+      "IQ",
+      "IE",
+      "IL",
+      "IT",
+      "JM",
+      "JP",
+      "JO",
+      "KZ",
+      "KE",
+      "KI",
+      "KP",
+      "KR",
+      "KW",
+      "KG",
+      "LA",
+      "LV",
+      "LB",
+      "LS",
+      "LR",
+      "LY",
+      "LI",
+      "LT",
+      "LU",
+      "MG",
+      "MW",
+      "MY",
+      "MV",
+      "ML",
+      "MT",
+      "MH",
+      "MR",
+      "MU",
+      "MX",
+      "FM",
+      "MD",
+      "MC",
+      "MN",
+      "ME",
+      "MA",
+      "MZ",
+      "MM",
+      "NA",
+      "NR",
+      "NP",
+      "NL",
+      "NZ",
+      "NI",
+      "NE",
+      "NG",
+      "NO",
+      "OM",
+      "PK",
+      "PW",
+      "PA",
+      "PG",
+      "PY",
+      "PE",
+      "PH",
+      "PL",
+      "PT",
+      "QA",
+      "RO",
+      "RU",
+      "RW",
+      "KN",
+      "LC",
+      "VC",
+      "WS",
+      "SM",
+      "ST",
+      "SA",
+      "SN",
+      "RS",
+      "SC",
+      "SL",
+      "SG",
+      "SK",
+      "SI",
+      "SB",
+      "SO",
+      "ZA",
+      "SS",
+      "ES",
+      "LK",
+      "SD",
+      "SR",
+      "SE",
+      "CH",
+      "SY",
+      "TW",
+      "TJ",
+      "TZ",
+      "TH",
+      "TL",
+      "TG",
+      "TO",
+      "TT",
+      "TN",
+      "TR",
+      "TM",
+      "TV",
+      "UG",
+      "UA",
+      "AE",
+      "GB",
+      "US",
+      "UY",
+      "UZ",
+      "VU",
+      "VA",
+      "VE",
+      "VN",
+      "YE",
+      "ZM",
+      "ZW"
+    ]
+  },
+  dateStyle: {
+    required: false,
+    control: "select",
+    type: "string",
+    defaultValue: "medium",
+    options: ["full", "long", "medium", "short", "none"]
+  },
+  language: {
+    required: false,
+    control: "select",
+    type: "string",
+    defaultValue: "en",
+    options: [
+      "hr",
+      "th",
+      "tr",
+      "id",
+      "is",
+      "cy",
+      "fr",
+      "af",
+      "am",
+      "ar",
+      "az",
+      "be",
+      "bg",
+      "bn",
+      "bs",
+      "ca",
+      "cs",
+      "da",
+      "de",
+      "el",
+      "en",
+      "es",
+      "et",
+      "eu",
+      "fa",
+      "fi",
+      "ga",
+      "gl",
+      "gu",
+      "he",
+      "hi",
+      "hu",
+      "hy",
+      "it",
+      "ja",
+      "ka",
+      "kk",
+      "km",
+      "kn",
+      "ko",
+      "ky",
+      "lb",
+      "lt",
+      "lv",
+      "mk",
+      "ml",
+      "mn",
+      "mr",
+      "ms",
+      "mt",
+      "nb",
+      "nl",
+      "nn",
+      "pl",
+      "pt",
+      "ro",
+      "ru",
+      "si",
+      "sk",
+      "sl",
+      "sq",
+      "sr",
+      "sv",
+      "sw",
+      "ta",
+      "te",
+      "uk",
+      "ur",
+      "uz",
+      "vi",
+      "zh"
+    ]
+  },
+  timeStyle: {
+    required: false,
+    control: "select",
+    type: "string",
+    defaultValue: "none",
+    options: ["full", "long", "medium", "short", "none"]
+  }
+};
+const r$b = {
   category: "localization",
   description: "Converts machine-readable date and time to a human-readable format.",
-  icon: CalendarIcon,
-  states: defaultStates,
-  presetStyle: r$7
+  contentModel: {
+    category: "instance",
+    children: []
+  },
+  presetStyle: {
+    time
+  },
+  initialProps: ["datetime", "language", "country", "dateStyle", "timeStyle"],
+  props: e$g
 };
-const r$6 = {
+const o$k = {};
+const o$j = {
   select: [
     ...select,
     {
@@ -5728,18 +6696,20 @@ const r$6 = {
       value: { type: "keyword", value: "block" }
     }
   ]
-}, c = {
-  icon: SelectIcon,
-  presetStyle: r$6,
-  states: [
-    ...defaultStates,
-    { selector: "::placeholder", label: "Placeholder" },
-    { selector: ":valid", label: "Valid" },
-    { selector: ":invalid", label: "Invalid" },
-    { selector: ":required", label: "Required" },
-    { selector: ":optional", label: "Optional" }
-  ]
+}, p$1 = {
+  presetStyle: o$j,
+  initialProps: [
+    "id",
+    "class",
+    "name",
+    "value",
+    "multiple",
+    "required",
+    "autofocus"
+  ],
+  props: o$k
 };
+const o$i = {};
 const l$1 = {
   option: [
     {
@@ -5754,10 +6724,9 @@ const l$1 = {
       }
     }
   ]
-}, r$5 = {
+}, a$3 = {
   category: "hidden",
   description: "An item within a drop-down menu that users can select as their chosen value.",
-  icon: ItemIcon,
   presetStyle: l$1,
   states: [
     // Applies when option is being activated (clicked)
@@ -5768,38 +6737,51 @@ const l$1 = {
     { selector: ":default", label: "Default" },
     { selector: ":hover", label: "Hover" },
     { selector: ":disabled", label: "Disabled" }
-  ]
+  ],
+  initialProps: ["label", "value", "label", "disabled"],
+  props: o$i
 };
-const r$4 = {
+const o$h = {};
+const r$a = {
   icon: HeaderIcon,
   description: "Inserts children into the head of the document",
   contentModel: {
     category: "instance",
     children: ["HeadLink", "HeadMeta", "HeadTitle"]
-  }
+  },
+  props: o$h
 };
-const p$2 = {
+const o$g = {};
+const t$8 = {
   icon: ResourceIcon,
   contentModel: {
     category: "none",
     children: []
-  }
+  },
+  initialProps: ["rel", "hrefLang", "href", "type", "as"],
+  props: o$g
 };
-const p$1 = {
+const o$f = {};
+const e$f = {
   icon: WindowInfoIcon,
   contentModel: {
     category: "none",
     children: []
-  }
+  },
+  initialProps: ["name", "property", "content"],
+  props: o$f
 };
-const r$3 = {
+const o$e = {};
+const r$9 = {
   icon: WindowTitleIcon,
   contentModel: {
     category: "none",
     children: ["text"]
-  }
+  },
+  props: o$e
 };
-const i$1 = {
+const o$d = {};
+const i$3 = {
   icon: VideoIcon,
   contentModel: {
     category: "instance",
@@ -5812,67 +6794,91 @@ const i$1 = {
         value: { type: "unit", unit: "%", value: 100 }
       }
     ]
+  },
+  initialProps: [
+    "id",
+    "class",
+    "width",
+    "height",
+    "src",
+    "autoPlay",
+    "controls",
+    "loop",
+    "muted",
+    "preload",
+    "playsInline"
+  ],
+  props: {
+    ...o$d,
+    // Automatically generated props don't have the right control.
+    src: {
+      type: "string",
+      control: "file",
+      label: "Source",
+      required: false,
+      accept: ".mp4,.webm,.mpg,.mpeg,.mov"
+    }
   }
 };
 const baseComponentMetas = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.defineProperty({
   __proto__: null,
-  Blockquote: i$5,
-  Body: n$8,
-  Bold: l$5,
-  Box: v$3,
-  Button: m$3,
-  Checkbox: d$4,
-  CodeText: i$4,
-  Form: c$1,
-  Fragment: o$2,
-  HeadLink: p$2,
-  HeadMeta: p$1,
-  HeadSlot: r$4,
-  HeadTitle: r$3,
-  Heading: d$6,
-  HtmlEmbed: r$b,
-  Image: l$3,
-  Input: c$2,
-  Italic: m$4,
-  Label: i$3,
-  Link: n$6,
-  List: d$5,
-  ListItem: a$4,
-  MarkdownEmbed: a$a,
-  Option: r$5,
-  Paragraph: c$5,
-  RadioButton: s$2,
-  RemixForm: n$4,
-  RichTextLink: p$8,
-  Select: c,
-  Separator: n$3,
-  Slot: e$3,
-  Span: n$5,
-  Subscript: c$3,
-  Superscript: c$4,
+  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: 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$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: e$v,
+  Subscript: s$4,
+  Superscript: o$A,
   Text: n$7,
-  Textarea: n$2,
-  Time: s,
-  Video: i$1,
-  Vimeo: m$2,
-  VimeoPlayButton: m$1,
-  VimeoPreviewImage: p$3,
-  VimeoSpinner: s$1,
-  XmlNode: i$2,
-  XmlTime: a$2,
-  YouTube: p$4
+  Textarea: l$2,
+  Time: r$b,
+  Video: i$3,
+  Vimeo: s$3,
+  VimeoPlayButton: c$1,
+  VimeoPreviewImage: i$4,
+  VimeoSpinner: c,
+  XmlNode: m$6,
+  XmlTime: a$4,
+  YouTube: s$2
 }, Symbol.toStringTag, { value: "Module" }));
-const n$1 = (t) => new Proxy(
+const n$5 = (t2) => new Proxy(
   {},
   {
     get(o2, e2) {
-      return `${t}${e2}`;
+      return `${t2}${e2}`;
     }
   }
-), r$2 = n$1(
+), r$8 = n$5(
   "@webstudio-is/sdk-components-animation:"
 );
-const a$1 = {
+const a$2 = {
   category: "animations",
   description: "Animation Group component is designed to animate its children.",
   icon: AnimationGroupIcon,
@@ -5882,13 +6888,67 @@ const a$1 = {
     category: "instance",
     children: [
       "instance",
-      r$2.AnimateText,
-      r$2.StaggerAnimation,
-      r$2.VideoAnimation
+      r$8.AnimateText,
+      r$8.StaggerAnimation,
+      r$8.VideoAnimation
+    ]
+  },
+  initialProps: ["action"],
+  props: {
+    action: {
+      required: false,
+      control: "animationAction",
+      type: "animationAction",
+      description: "Animation Action"
+    }
+  }
+};
+const e$e = {
+  className: {
+    required: false,
+    control: "text",
+    type: "string",
+    description: "Classes to which the element belongs"
+  },
+  easing: {
+    description: "Easing function applied within the sliding window.",
+    required: false,
+    control: "select",
+    type: "string",
+    defaultValue: "linear",
+    options: [
+      "linear",
+      "easeIn",
+      "easeInCubic",
+      "easeInQuart",
+      "easeOut",
+      "easeOutCubic",
+      "easeOutQuart",
+      "ease",
+      "easeInOutCubic",
+      "easeInOutQuart"
     ]
+  },
+  slidingWindow: {
+    description: `Size of the sliding window for the animation:
+- 0: Typewriter effect (no animation).
+- (0..1]: Animates one part of the text at a time.
+- (1..n]: Animates multiple parts of the text within the sliding window.`,
+    required: false,
+    control: "number",
+    type: "number",
+    defaultValue: 5
+  },
+  splitBy: {
+    description: "Defines how the text is split for animation (e.g., by character, space, or symbol).",
+    required: false,
+    control: "select",
+    type: "string",
+    defaultValue: "char",
+    options: ["char", "space", 'symbol "#"', 'symbol "~"']
   }
 };
-const a = {
+const a$1 = {
   category: "animations",
   description: "Text animation allows you to split text by char or by word to animate it.",
   icon: TextAnimationIcon,
@@ -5898,11 +6958,48 @@ const a = {
     category: "none",
     children: ["instance"]
   },
-  presetStyle: {
-    div
+  presetStyle: { div },
+  initialProps: ["slidingWindow", "easing", "splitBy"],
+  props: e$e
+};
+const e$d = {
+  className: {
+    required: false,
+    control: "text",
+    type: "string",
+    description: "Classes to which the element belongs"
+  },
+  easing: {
+    description: "Easing function applied within the sliding window.",
+    required: false,
+    control: "select",
+    type: "string",
+    defaultValue: "linear",
+    options: [
+      "linear",
+      "easeIn",
+      "easeInCubic",
+      "easeInQuart",
+      "easeOut",
+      "easeOutCubic",
+      "easeOutQuart",
+      "ease",
+      "easeInOutCubic",
+      "easeInOutQuart"
+    ]
+  },
+  slidingWindow: {
+    description: `Size of the sliding window for the animation:
+- 0: Typewriter effect (no animation).
+- (0..1]: Animates one child at a time.
+- (1..n]: Animates multiple children within the sliding window.`,
+    required: false,
+    control: "number",
+    type: "number",
+    defaultValue: 1
   }
 };
-const r$1 = {
+const r$7 = {
   category: "animations",
   description: "Stagger animation allows you to animate children elements with a sliding window.",
   icon: StaggerAnimationIcon,
@@ -5912,63 +7009,75 @@ const r$1 = {
     category: "none",
     children: ["instance"]
   },
-  presetStyle: {
-    div
-  }
+  presetStyle: { div },
+  initialProps: ["slidingWindow", "easing"],
+  props: e$d
+};
+const e$c = {
+  timeline: { required: false, control: "boolean", type: "boolean" }
 };
-const p = {
+const m$5 = {
   icon: PlayIcon,
   label: "Video Animation",
   contentModel: {
     category: "none",
     children: ["instance"]
   },
-  presetStyle: {
-    div
-  }
+  presetStyle: { div },
+  props: e$c,
+  initialProps: ["timeline"]
 };
 const animationComponentMetas = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.defineProperty({
   __proto__: null,
-  AnimateChildren: a$1,
-  AnimateText: a,
-  StaggerAnimation: r$1,
-  VideoAnimation: p
-}, Symbol.toStringTag, { value: "Module" }));
-const remixComponentMetas = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.defineProperty({
-  __proto__: null,
-  Body: n$8,
-  Form: c$1,
-  Link: n$6,
-  RemixForm: n$4,
-  RichTextLink: p$8
+  AnimateChildren: a$2,
+  AnimateText: a$1,
+  StaggerAnimation: r$7,
+  VideoAnimation: m$5
 }, Symbol.toStringTag, { value: "Module" }));
-const r = (t) => new Proxy(
+const r$6 = (t2) => new Proxy(
   {},
   {
     get(o2, e2) {
-      return `${t}${e2}`;
+      return `${t2}${e2}`;
     }
   }
-), n = r(
+), n$4 = r$6(
   "@webstudio-is/sdk-components-react-radix:"
 );
-const g$2 = {
+const o$c = {
+  disabled: {
+    required: false,
+    control: "boolean",
+    type: "boolean",
+    description: "Whether the form control is disabled"
+  },
+  open: {
+    required: false,
+    control: "boolean",
+    type: "boolean",
+    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$1 = {
   icon: CollapsibleIcon,
   contentModel: {
     category: "instance",
     children: ["instance"],
-    descendants: [n.CollapsibleTrigger, n.CollapsibleContent]
+    descendants: [n$4.CollapsibleTrigger, n$4.CollapsibleContent]
   },
   presetStyle: {
     div
-  }
-}, b$6 = {
+  },
+  initialProps: ["open"],
+  props: o$c
+}, m$4 = {
   icon: TriggerIcon,
   contentModel: {
     category: "none",
     children: ["instance", "rich-text"]
-  }
-}, d$3 = {
+  },
+  props: e$b
+}, d$1 = {
   icon: ContentIcon,
   contentModel: {
     category: "none",
@@ -5976,18 +7085,34 @@ const g$2 = {
   },
   presetStyle: {
     div
-  }
+  },
+  props: t$7
 };
-const o = (r2, t, p2) => ({
+const o$b = {
+  open: {
+    required: false,
+    control: "boolean",
+    type: "boolean",
+    description: "Show or hide the content of this component on the canvas. This will not affect the initial state of the component."
+  }
+}, t$6 = {}, e$a = {}, n$3 = {}, s$1 = {}, i$2 = {
+  tag: {
+    required: false,
+    control: "select",
+    type: "string",
+    options: ["h2", "h3", "h1", "h4", "h5", "h6"]
+  }
+}, p = {};
+const o$a = (r2, t2, p2) => ({
   property: r2,
-  value: { type: "unit", unit: p2, value: t }
-}), e = (r2, t) => ({
+  value: { type: "unit", unit: p2, value: t2 }
+}), e$9 = (r2, t2) => ({
   property: r2,
-  value: { type: "keyword", value: t }
-}), d$2 = (r2, t, p2, l2) => ({
+  value: { type: "keyword", value: t2 }
+}), d = (r2, t2, p2, l2) => ({
   property: r2,
-  value: { type: "rgb", alpha: 1, r: t, g: p2, b: l2 }
-}), b$5 = [
+  value: { type: "rgb", alpha: 1, r: t2, g: p2, b: l2 }
+}), b$4 = [
   {
     property: "background-color",
     value: { type: "keyword", value: "transparent" }
@@ -5996,223 +7121,478 @@ const o = (r2, t, p2) => ({
     property: "background-image",
     value: { type: "keyword", value: "none" }
   },
-  o("border-top-width", 0, "px"),
-  o("border-right-width", 0, "px"),
-  o("border-bottom-width", 0, "px"),
-  o("border-left-width", 0, "px"),
-  e("border-top-style", "solid"),
-  e("border-right-style", "solid"),
-  e("border-bottom-style", "solid"),
-  e("border-left-style", "solid"),
-  d$2("border-top-color", 226, 232, 240),
-  d$2("border-right-color", 226, 232, 240),
-  d$2("border-bottom-color", 226, 232, 240),
-  d$2("border-left-color", 226, 232, 240),
-  o("padding-top", 0, "px"),
-  o("padding-right", 0, "px"),
-  o("padding-bottom", 0, "px"),
-  o("padding-left", 0, "px")
+  o$a("border-top-width", 0, "px"),
+  o$a("border-right-width", 0, "px"),
+  o$a("border-bottom-width", 0, "px"),
+  o$a("border-left-width", 0, "px"),
+  e$9("border-top-style", "solid"),
+  e$9("border-right-style", "solid"),
+  e$9("border-bottom-style", "solid"),
+  e$9("border-left-style", "solid"),
+  d("border-top-color", 226, 232, 240),
+  d("border-right-color", 226, 232, 240),
+  d("border-bottom-color", 226, 232, 240),
+  d("border-left-color", 226, 232, 240),
+  o$a("padding-top", 0, "px"),
+  o$a("padding-right", 0, "px"),
+  o$a("padding-bottom", 0, "px"),
+  o$a("padding-left", 0, "px")
 ];
-const O = {
+const S$1 = {
   icon: TriggerIcon,
   contentModel: {
     category: "none",
     children: ["instance"]
-  }
-}, b$4 = {
+  },
+  props: t$6
+}, b$3 = {
   icon: OverlayIcon,
   contentModel: {
     category: "none",
     children: ["instance"],
-    descendants: [n.DialogContent]
+    descendants: [n$4.DialogContent]
   },
-  presetStyle: {
-    div
-  }
-}, B = {
+  presetStyle: { div },
+  props: e$a
+}, O = {
   icon: ContentIcon,
   contentModel: {
     category: "none",
     children: ["instance"],
     descendants: [
-      n.DialogTitle,
-      n.DialogDescription,
-      n.DialogClose
+      n$4.DialogTitle,
+      n$4.DialogDescription,
+      n$4.DialogClose
     ]
   },
-  presetStyle: {
-    div
-  }
-}, E = {
+  presetStyle: { div },
+  props: n$3
+}, B = {
   icon: HeadingIcon,
   contentModel: {
     category: "none",
     children: ["instance", "rich-text"]
   },
-  presetStyle: {
-    h2
-  }
-}, H$1 = {
+  presetStyle: { h2 },
+  props: i$2
+}, E = {
   icon: TextIcon,
   contentModel: {
     category: "none",
     children: ["instance", "rich-text"]
   },
-  presetStyle: {
-    p: p$a
-  }
-}, R = {
+  presetStyle: { p: p$7 },
+  props: p
+}, H$1 = {
   icon: ButtonElementIcon,
   label: "Close Button",
   contentModel: {
     category: "none",
     children: ["instance", "rich-text"]
   },
-  states: defaultStates,
   presetStyle: {
-    button: [b$5, button].flat()
-  }
-}, j = {
+    button: [b$4, button].flat()
+  },
+  props: s$1
+}, P$1 = {
   icon: DialogIcon,
   contentModel: {
     category: "instance",
     children: ["instance"],
-    descendants: [n.DialogTrigger, n.DialogOverlay]
-  }
+    descendants: [n$4.DialogTrigger, n$4.DialogOverlay]
+  },
+  initialProps: ["open"],
+  props: o$b
 };
-const v$2 = {
+const e$8 = {
+  open: {
+    required: false,
+    control: "boolean",
+    type: "boolean",
+    description: "Show or hide the content of this component on the canvas. This will not affect the initial state of the component."
+  }
+}, o$9 = {}, t$5 = {
+  align: {
+    required: false,
+    control: "radio",
+    type: "string",
+    defaultValue: "center",
+    options: ["center", "start", "end"]
+  },
+  alignOffset: {
+    required: false,
+    control: "number",
+    type: "number",
+    description: "The offset in pixels from the “start“ or “end“ alignment options."
+  },
+  arrowPadding: { required: false, control: "number", type: "number" },
+  avoidCollisions: { required: false, control: "boolean", type: "boolean" },
+  hideWhenDetached: {
+    required: false,
+    control: "boolean",
+    type: "boolean",
+    defaultValue: true
+  },
+  side: {
+    required: false,
+    control: "select",
+    type: "string",
+    options: ["top", "right", "bottom", "left"],
+    description: "The preferred alignment against the Trigger. May change when collisions occur."
+  },
+  sideOffset: {
+    required: false,
+    control: "number",
+    type: "number",
+    defaultValue: 4,
+    description: "The distance in pixels between the Content and the Trigger."
+  },
+  sticky: {
+    required: false,
+    control: "radio",
+    type: "string",
+    options: ["partial", "always"]
+  },
+  updatePositionStrategy: {
+    required: false,
+    control: "radio",
+    type: "string",
+    options: ["always", "optimized"]
+  }
+}, r$5 = {};
+const C$3 = {
   icon: TriggerIcon,
   contentModel: {
     category: "none",
     children: ["instance"]
-  }
-}, d$1 = {
+  },
+  props: o$9
+}, y$1 = {
   icon: ContentIcon,
   contentModel: {
     category: "none",
-    children: ["instance"]
+    children: ["instance"],
+    descendants: [n$4.PopoverClose]
   },
   presetStyle: {
     div
-  }
-}, l = {
+  },
+  initialProps: ["side", "sideOffset", "align", "alignOffset"],
+  props: t$5
+}, h$2 = {
   icon: PopoverIcon,
   contentModel: {
     category: "instance",
     children: ["instance"],
-    descendants: [n.PopoverTrigger, n.PopoverContent]
+    descendants: [n$4.PopoverTrigger, n$4.PopoverContent]
+  },
+  initialProps: ["open"],
+  props: e$8
+}, u = {
+  icon: ButtonElementIcon,
+  label: "Close Button",
+  contentModel: {
+    category: "none",
+    children: ["instance", "rich-text"]
+  },
+  presetStyle: {
+    button: [b$4, button].flat()
+  },
+  props: r$5
+};
+const e$7 = {
+  delayDuration: {
+    description: "The delay before the Tooltip shows after the Trigger is hovered, in milliseconds. If no value is specified, the default is 700ms",
+    required: false,
+    control: "number",
+    type: "number"
+  },
+  disableHoverableContent: {
+    description: "When toggled, prevents the Tooltip content from showing when the Trigger is hovered.",
+    required: false,
+    control: "boolean",
+    type: "boolean"
+  },
+  open: {
+    required: false,
+    control: "boolean",
+    type: "boolean",
+    description: "Show or hide the content of this component on the canvas. This will not affect the initial state of the component."
+  }
+}, o$8 = {}, t$4 = {
+  align: {
+    required: false,
+    control: "radio",
+    type: "string",
+    options: ["center", "start", "end"]
+  },
+  alignOffset: {
+    required: false,
+    control: "number",
+    type: "number",
+    description: "The offset in pixels from the “start“ or “end“ alignment options."
+  },
+  "aria-label": {
+    description: "A more descriptive label for accessibility purpose",
+    required: false,
+    control: "text",
+    type: "string"
+  },
+  arrowPadding: { required: false, control: "number", type: "number" },
+  avoidCollisions: { required: false, control: "boolean", type: "boolean" },
+  hideWhenDetached: {
+    required: false,
+    control: "boolean",
+    type: "boolean",
+    defaultValue: true
+  },
+  side: {
+    required: false,
+    control: "select",
+    type: "string",
+    options: ["top", "right", "bottom", "left"],
+    description: "The preferred alignment against the Trigger. May change when collisions occur."
+  },
+  sideOffset: {
+    required: false,
+    control: "number",
+    type: "number",
+    defaultValue: 4,
+    description: "The distance in pixels between the Content and the Trigger."
+  },
+  sticky: {
+    required: false,
+    control: "radio",
+    type: "string",
+    options: ["partial", "always"]
+  },
+  updatePositionStrategy: {
+    required: false,
+    control: "radio",
+    type: "string",
+    options: ["always", "optimized"]
   }
 };
-const g$1 = {
+const g = {
   icon: TriggerIcon,
   contentModel: {
     category: "none",
     children: ["instance"]
-  }
-}, d = {
+  },
+  props: o$8
+}, T = {
   icon: ContentIcon,
   contentModel: {
     category: "none",
     children: ["instance"]
   },
-  presetStyle: {
-    div
-  }
-}, m = {
+  presetStyle: { div },
+  initialProps: ["side", "sideOffset", "align", "alignOffset"],
+  props: t$4
+}, m$3 = {
   icon: TooltipIcon,
   contentModel: {
     category: "instance",
     children: ["instance"],
-    descendants: [n.TooltipTrigger, n.TooltipContent]
+    descendants: [n$4.TooltipTrigger, n$4.TooltipContent]
+  },
+  initialProps: ["open", "delayDuration", "disableHoverableContent"],
+  props: e$7
+};
+const e$6 = {
+  activationMode: {
+    description: `Whether a tab is activated automatically or manually.
+@defaultValue automatic`,
+    required: false,
+    control: "radio",
+    type: "string",
+    options: ["automatic", "manual"]
+  },
+  defaultValue: {
+    description: "The value of the tab to select by default, if uncontrolled",
+    required: false,
+    control: "text",
+    type: "string"
+  },
+  dir: {
+    description: "The direction of navigation between toolbar items.",
+    required: false,
+    control: "radio",
+    type: "string",
+    options: ["ltr", "rtl"]
+  },
+  orientation: {
+    description: `The orientation the tabs are layed out.
+Mainly so arrow navigation is done accordingly (left & right vs. up & down)
+@defaultValue horizontal`,
+    required: false,
+    control: "radio",
+    type: "string",
+    options: ["horizontal", "vertical"]
+  },
+  value: {
+    description: "The value for the selected tab, if controlled",
+    required: false,
+    control: "text",
+    type: "string"
+  }
+}, t$3 = {
+  loop: {
+    required: false,
+    control: "boolean",
+    type: "boolean",
+    description: "Whether to loop the media resource"
+  }
+}, o$7 = {
+  value: {
+    required: false,
+    control: "text",
+    type: "string",
+    description: "Current value of the element"
+  }
+}, r$4 = {
+  value: {
+    required: false,
+    control: "text",
+    type: "string",
+    description: "Current value of the element"
   }
 };
-const M = {
+const y = {
   icon: TabsIcon,
   contentModel: {
     category: "instance",
     children: ["instance"],
-    descendants: [n.TabsList, n.TabsContent]
+    descendants: [n$4.TabsList, n$4.TabsContent]
   },
-  presetStyle: {
-    div
-  }
-}, x$2 = {
+  presetStyle: { div },
+  props: e$6
+}, f$3 = {
   icon: HeaderIcon,
   contentModel: {
     category: "none",
     children: ["instance"],
-    descendants: [n.TabsTrigger]
+    descendants: [n$4.TabsTrigger]
   },
-  presetStyle: {
-    div
-  }
-}, C$2 = {
+  presetStyle: { div },
+  props: t$3
+}, x$1 = {
   icon: TriggerIcon,
   label: "Tab Trigger",
-  indexWithinAncestor: n.Tabs,
+  indexWithinAncestor: n$4.Tabs,
   contentModel: {
     category: "none",
-    children: ["instance", "rich-text"]
-  },
-  states: [
-    ...defaultStates,
-    {
-      category: "component-states",
-      label: "Active",
-      selector: "[data-state=active]"
-    }
-  ],
+    children: ["instance", "rich-text"]
+  },
+  states: [{ label: "Active", selector: "[data-state=active]" }],
   presetStyle: {
-    button: [button, b$5].flat()
-  }
-}, S$2 = {
+    button: [button, b$4].flat()
+  },
+  props: o$7
+}, C$2 = {
   label: "Tab Content",
   icon: ContentIcon,
-  indexWithinAncestor: n.Tabs,
+  indexWithinAncestor: n$4.Tabs,
   contentModel: {
     category: "none",
     children: ["instance", "rich-text"]
   },
-  presetStyle: {
-    div
-  }
+  presetStyle: { div },
+  props: r$4
 };
-const i = {
+const o$6 = {};
+const m$2 = {
   icon: LabelIcon,
-  states: defaultStates,
-  presetStyle: {
-    label
-  }
+  presetStyle: { label },
+  initialProps: ["id", "class", "for"],
+  props: o$6
 };
+const e$5 = {
+  collapsible: {
+    description: "Whether an accordion item can be collapsed after it has been opened.",
+    required: false,
+    control: "boolean",
+    type: "boolean",
+    defaultValue: false
+  },
+  defaultValue: {
+    description: "The value of the item whose content is expanded when the accordion is initially rendered. Use\n`defaultValue` if you do not need to control the state of an accordion.",
+    required: false,
+    control: "text",
+    type: "string"
+  },
+  dir: {
+    description: "The language read direction.",
+    required: false,
+    control: "radio",
+    type: "string",
+    options: ["ltr", "rtl"]
+  },
+  disabled: {
+    description: `Whether or not an accordion is disabled from user interaction.
+@defaultValue false`,
+    required: false,
+    control: "boolean",
+    type: "boolean"
+  },
+  orientation: {
+    description: "The layout in which the Accordion operates.",
+    required: false,
+    control: "radio",
+    type: "string",
+    defaultValue: "vertical",
+    options: ["horizontal", "vertical"]
+  },
+  value: {
+    description: "The controlled stateful value of the accordion item whose content is expanded.",
+    required: false,
+    control: "text",
+    type: "string"
+  }
+}, o$5 = {
+  disabled: {
+    description: `Whether or not an accordion item is disabled from user interaction.
+@defaultValue false`,
+    required: false,
+    control: "boolean",
+    type: "boolean"
+  },
+  value: {
+    required: false,
+    control: "text",
+    type: "string",
+    description: "Current value of the element"
+  }
+}, t$2 = {}, r$3 = {}, n$2 = {};
 const v$1 = {
   icon: AccordionIcon,
   contentModel: {
     category: "instance",
     children: ["instance"],
-    descendants: [n.AccordionItem]
+    descendants: [n$4.AccordionItem]
   },
-  presetStyle: {
-    div
-  }
-}, x$1 = {
+  presetStyle: { div },
+  initialProps: ["value", "collapsible"],
+  props: e$5
+}, x = {
   label: "Item",
   icon: ItemIcon,
-  indexWithinAncestor: n.Accordion,
+  indexWithinAncestor: n$4.Accordion,
   contentModel: {
     category: "none",
     children: ["instance"],
-    descendants: [n.AccordionHeader, n.AccordionContent]
+    descendants: [n$4.AccordionHeader, n$4.AccordionContent]
   },
-  presetStyle: {
-    div
-  }
-}, C$1 = {
+  presetStyle: { div },
+  initialProps: ["value"],
+  props: o$5
+}, f$2 = {
   label: "Item Header",
   icon: HeaderIcon,
   contentModel: {
     category: "none",
     children: ["instance"],
-    descendants: [n.AccordionTrigger]
+    descendants: [n$4.AccordionTrigger]
   },
   presetStyle: {
     h3: [
@@ -6226,26 +7606,21 @@ const v$1 = {
         value: { type: "unit", unit: "px", value: 0 }
       }
     ]
-  }
-}, H = {
+  },
+  props: t$2
+}, 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()
-  }
-}, S$1 = {
+    button: [button, b$4].flat()
+  },
+  props: r$3
+}, H = {
   label: "Item Content",
   icon: ContentIcon,
   contentModel: {
@@ -6254,71 +7629,117 @@ const v$1 = {
   },
   presetStyle: {
     div
-  }
+  },
+  props: n$2
 };
-const y$1 = {
+const e$4 = {
+  defaultValue: { required: false, control: "text", type: "string" },
+  delayDuration: {
+    description: `The duration from when the pointer enters the trigger until the tooltip gets opened.
+@defaultValue 200`,
+    required: false,
+    control: "number",
+    type: "number"
+  },
+  dir: {
+    required: false,
+    control: "radio",
+    type: "string",
+    options: ["ltr", "rtl"],
+    description: "The text directionality of the element"
+  },
+  skipDelayDuration: {
+    description: `How much time a user has to enter another trigger without incurring a delay again.
+@defaultValue 300`,
+    required: false,
+    control: "number",
+    type: "number"
+  },
+  value: {
+    required: false,
+    control: "text",
+    type: "string",
+    description: "Current value of the element"
+  }
+}, t$1 = {}, r$2 = {}, n$1 = {}, o$4 = {
+  value: {
+    required: false,
+    control: "text",
+    type: "string",
+    description: "Current value of the element"
+  }
+}, i$1 = {
+  active: { required: false, control: "boolean", type: "boolean" }
+}, a = {};
+const L = {
   icon: NavigationMenuIcon,
   contentModel: {
     category: "instance",
     children: ["instance"],
-    descendants: [n.NavigationMenuList, n.NavigationMenuViewport]
+    descendants: [n$4.NavigationMenuList, n$4.NavigationMenuViewport]
   },
   presetStyle: {
     div
-  }
+  },
+  props: e$4
 }, h$1 = {
   icon: ListIcon,
   label: "Menu List",
   contentModel: {
     category: "none",
     children: ["instance"],
-    descendants: [n.NavigationMenuItem]
+    descendants: [n$4.NavigationMenuItem]
   },
   presetStyle: {
     div
-  }
-}, b$3 = {
+  },
+  props: t$1
+}, b$2 = {
   icon: ListItemIcon,
   label: "Menu Item",
-  indexWithinAncestor: n.NavigationMenu,
+  indexWithinAncestor: n$4.NavigationMenu,
   contentModel: {
     category: "none",
     children: ["instance"],
     descendants: [
-      n.NavigationMenuTrigger,
-      n.NavigationMenuContent,
-      n.NavigationMenuLink
+      n$4.NavigationMenuTrigger,
+      n$4.NavigationMenuContent,
+      n$4.NavigationMenuLink
     ]
   },
   presetStyle: {
     div
-  }
-}, k$1 = {
+  },
+  props: o$4
+}, k$2 = {
   icon: TriggerIcon,
   label: "Menu Trigger",
   contentModel: {
     category: "none",
     children: ["instance"]
-  }
+  },
+  props: a
 }, w$1 = {
   icon: ContentIcon,
   label: "Menu Content",
   contentModel: {
     category: "none",
     children: ["instance"],
-    descendants: [n.NavigationMenuLink]
+    descendants: [n$4.NavigationMenuLink]
   },
   presetStyle: {
     div
-  }
+  },
+  props: n$1
 }, C = {
   icon: BoxIcon,
   label: "Accessible Link Wrapper",
   contentModel: {
     category: "none",
     children: ["instance"]
-  }
-}, T = {
+  },
+  props: i$1
+}, S = {
   icon: ViewportIcon,
   label: "Menu Viewport",
   contentModel: {
@@ -6327,65 +7748,169 @@ const y$1 = {
   },
   presetStyle: {
     div
-  }
+  },
+  props: r$2
 };
-const w = {
+const e$3 = {
+  autoComplete: {
+    required: false,
+    control: "text",
+    type: "string",
+    description: "Hint for form autofill feature"
+  },
+  defaultValue: { required: false, control: "text", type: "string" },
+  dir: {
+    required: false,
+    control: "radio",
+    type: "string",
+    options: ["ltr", "rtl"],
+    description: "The text directionality of the element"
+  },
+  disabled: {
+    required: false,
+    control: "boolean",
+    type: "boolean",
+    description: "Whether the form control is disabled"
+  },
+  form: {
+    required: false,
+    control: "text",
+    type: "string",
+    description: "Associates the element with a form element"
+  },
+  name: {
+    required: false,
+    control: "text",
+    type: "string",
+    description: "Name of the element to use for form submission and in the form.elements API"
+  },
+  open: {
+    required: false,
+    control: "boolean",
+    type: "boolean",
+    description: "Whether the dialog box is showing"
+  },
+  required: {
+    required: false,
+    control: "boolean",
+    type: "boolean",
+    description: "Whether the control is required for form submission"
+  },
+  value: {
+    required: false,
+    control: "text",
+    type: "string",
+    description: "Current value of the element"
+  }
+}, t = {}, o$3 = {
+  placeholder: {
+    required: false,
+    control: "text",
+    type: "string",
+    description: "User-visible label to be placed within the form control"
+  }
+}, r$1 = {
+  align: {
+    required: false,
+    control: "radio",
+    type: "string",
+    options: ["center", "start", "end"]
+  },
+  alignOffset: { required: false, control: "number", type: "number" },
+  arrowPadding: { required: false, control: "number", type: "number" },
+  avoidCollisions: { required: false, control: "boolean", type: "boolean" },
+  hideWhenDetached: { required: false, control: "boolean", type: "boolean" },
+  sideOffset: { required: false, control: "number", type: "number" },
+  sticky: {
+    required: false,
+    control: "radio",
+    type: "string",
+    options: ["partial", "always"]
+  },
+  updatePositionStrategy: {
+    required: false,
+    control: "radio",
+    type: "string",
+    options: ["always", "optimized"]
+  }
+}, n = {
+  nonce: {
+    required: false,
+    control: "text",
+    type: "string",
+    description: "Cryptographic nonce used in Content Security Policy checks [CSP]"
+  }
+}, i = {
+  disabled: {
+    required: false,
+    control: "boolean",
+    type: "boolean",
+    description: "Whether the form control is disabled"
+  },
+  textValue: { required: false, control: "text", type: "string" },
+  value: {
+    required: true,
+    control: "text",
+    type: "string",
+    description: "Current value of the element"
+  }
+}, l = {}, s = {};
+const b$1 = {
   icon: SelectIcon,
   contentModel: {
     category: "instance",
     children: ["instance"],
-    descendants: [n.SelectTrigger, n.SelectContent]
-  }
-}, b$2 = {
+    descendants: [n$4.SelectTrigger, n$4.SelectContent]
+  },
+  initialProps: ["name", "value", "open", "required"],
+  props: e$3
+}, f$1 = {
   icon: TriggerIcon,
   contentModel: {
     category: "none",
     children: ["instance"],
-    descendants: [n.SelectValue]
+    descendants: [n$4.SelectValue]
   },
-  presetStyle: {
-    button
-  }
-}, f = {
+  presetStyle: { button },
+  props: t
+}, w = {
   label: "Value",
   icon: FormTextFieldIcon,
   contentModel: {
     category: "none",
     children: []
   },
-  presetStyle: {
-    span
-  }
+  presetStyle: { span },
+  initialProps: ["placeholder"],
+  props: o$3
 }, v = {
   icon: ContentIcon,
   contentModel: {
     category: "none",
     children: ["instance"],
-    descendants: [n.SelectViewport]
+    descendants: [n$4.SelectViewport]
   },
-  presetStyle: {
-    div
-  }
+  presetStyle: { div },
+  props: r$1
 }, P = {
   icon: ViewportIcon,
   contentModel: {
     category: "none",
     children: ["instance"],
-    descendants: [n.SelectItem]
+    descendants: [n$4.SelectItem]
   },
-  presetStyle: {
-    div
-  }
-}, k = {
+  presetStyle: { div },
+  props: n
+}, k$1 = {
   icon: ItemIcon,
   contentModel: {
     category: "none",
     children: ["instance"],
-    descendants: [n.SelectItemIndicator, n.SelectItemText]
+    descendants: [n$4.SelectItemIndicator, n$4.SelectItemText]
   },
-  presetStyle: {
-    div
-  }
+  presetStyle: { div },
+  initialProps: ["value"],
+  props: i
 }, F = {
   label: "Indicator",
   icon: CheckMarkIcon,
@@ -6393,9 +7918,8 @@ const w = {
     category: "none",
     children: ["instance"]
   },
-  presetStyle: {
-    span
-  }
+  presetStyle: { span },
+  props: l
 }, q = {
   label: "Item Text",
   icon: TextIcon,
@@ -6403,185 +7927,250 @@ const w = {
     category: "none",
     children: ["instance", "rich-text"]
   },
-  presetStyle: {
-    span
-  }
+  presetStyle: { span },
+  props: s
 };
-const b$1 = {
+const e$2 = {
+  checked: {
+    required: false,
+    control: "boolean",
+    type: "boolean",
+    description: "Whether the control is checked"
+  },
+  required: {
+    required: false,
+    control: "boolean",
+    type: "boolean",
+    description: "Whether the control is required for form submission"
+  }
+}, o$2 = {};
+const m$1 = {
   icon: SwitchIcon,
   contentModel: {
     category: "instance",
     children: ["instance"],
-    descendants: [n.SwitchThumb]
+    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()
-  }
-}, S = {
+    button: [button, b$4].flat()
+  },
+  initialProps: ["id", "class", "name", "value", "checked", "required"],
+  props: e$2
+}, 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
-  }
+  },
+  props: o$2
 };
-const b = {
+const e$1 = {
+  checked: {
+    required: false,
+    control: "boolean",
+    type: "boolean",
+    description: "Whether the control is checked"
+  },
+  required: {
+    required: false,
+    control: "boolean",
+    type: "boolean",
+    description: "Whether the control is required for form submission"
+  }
+}, o$1 = {};
+const m = {
   icon: CheckboxCheckedIcon,
   contentModel: {
     category: "instance",
     children: ["instance"],
-    descendants: [n.CheckboxIndicator]
+    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()
-  }
-}, x = {
+    button: [button, b$4].flat()
+  },
+  initialProps: ["id", "class", "name", "value", "required", "checked"],
+  props: e$1
+}, k = {
   icon: TriggerIcon,
   contentModel: {
     category: "none",
     children: ["instance", "rich-text"]
   },
-  states: defaultStates,
   presetStyle: {
     span
-  }
+  },
+  props: o$1
 };
-const y = {
+const e = {
+  defaultValue: { required: false, control: "text", type: "string" },
+  dir: {
+    required: false,
+    control: "radio",
+    type: "string",
+    options: ["ltr", "rtl"],
+    description: "The text directionality of the element"
+  },
+  disabled: {
+    required: false,
+    control: "boolean",
+    type: "boolean",
+    description: "Whether the form control is disabled"
+  },
+  loop: {
+    required: false,
+    control: "boolean",
+    type: "boolean",
+    description: "Whether to loop the media resource"
+  },
+  name: {
+    required: false,
+    control: "text",
+    type: "string",
+    description: "Name of the element to use for form submission and in the form.elements API"
+  },
+  orientation: {
+    required: false,
+    control: "radio",
+    type: "string",
+    options: ["horizontal", "vertical"]
+  },
+  required: {
+    required: false,
+    control: "boolean",
+    type: "boolean",
+    description: "Whether the control is required for form submission"
+  },
+  value: {
+    required: false,
+    control: "text",
+    type: "string",
+    description: "Current value of the element"
+  }
+}, o = {
+  checked: {
+    required: false,
+    control: "boolean",
+    type: "boolean",
+    description: "Whether the control is checked"
+  },
+  required: {
+    required: false,
+    control: "boolean",
+    type: "boolean",
+    description: "Whether the control is required for form submission"
+  },
+  value: {
+    required: true,
+    control: "text",
+    type: "string",
+    description: "Current value of the element"
+  }
+}, r = {};
+const G = {
   icon: RadioGroupIcon,
   contentModel: {
     category: "instance",
     children: ["instance"],
-    descendants: [n.RadioGroupItem]
+    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
-  }
-}, g = {
+  },
+  initialProps: ["id", "class", "name", "value", "required"],
+  props: e
+}, h = {
   icon: ItemIcon,
   contentModel: {
     category: "none",
     children: ["instance"],
-    descendants: [n.RadioGroupIndicator]
+    descendants: [n$4.RadioGroupIndicator]
   },
-  states: defaultStates,
   presetStyle: {
-    button: [button, b$5].flat()
-  }
-}, h = {
+    button: [button, b$4].flat()
+  },
+  initialProps: ["value"],
+  props: o
+}, f = {
   icon: TriggerIcon,
   contentModel: {
     category: "none",
     children: ["instance"]
   },
-  states: defaultStates,
   presetStyle: {
     span
-  }
+  },
+  props: r
 };
 const radixComponentMetas = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.defineProperty({
   __proto__: null,
   Accordion: v$1,
-  AccordionContent: S$1,
-  AccordionHeader: C$1,
-  AccordionItem: x$1,
-  AccordionTrigger: H,
-  Checkbox: b,
-  CheckboxIndicator: x,
-  Collapsible: g$2,
-  CollapsibleContent: d$3,
-  CollapsibleTrigger: b$6,
-  Dialog: j,
-  DialogClose: R,
-  DialogContent: B,
-  DialogDescription: H$1,
-  DialogOverlay: b$4,
-  DialogTitle: E,
-  DialogTrigger: O,
-  Label: i,
-  NavigationMenu: y$1,
+  AccordionContent: H,
+  AccordionHeader: f$2,
+  AccordionItem: x,
+  AccordionTrigger: C$1,
+  Checkbox: m,
+  CheckboxIndicator: k,
+  Collapsible: g$1,
+  CollapsibleContent: d$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$1,
-  NavigationMenuViewport: T,
-  Popover: l,
-  PopoverContent: d$1,
-  PopoverTrigger: v$2,
-  RadioGroup: y,
-  RadioGroupIndicator: h,
-  RadioGroupItem: g,
-  Select: w,
+  NavigationMenuTrigger: k$2,
+  NavigationMenuViewport: S,
+  Popover: h$2,
+  PopoverClose: u,
+  PopoverContent: y$1,
+  PopoverTrigger: C$3,
+  RadioGroup: G,
+  RadioGroupIndicator: f,
+  RadioGroupItem: h,
+  Select: b$1,
   SelectContent: v,
-  SelectItem: k,
+  SelectItem: k$1,
   SelectItemIndicator: F,
   SelectItemText: q,
-  SelectTrigger: b$2,
-  SelectValue: f,
+  SelectTrigger: f$1,
+  SelectValue: w,
   SelectViewport: P,
-  Switch: b$1,
-  SwitchThumb: S,
-  Tabs: M,
-  TabsContent: S$2,
-  TabsList: x$2,
-  TabsTrigger: C$2,
-  Tooltip: m,
-  TooltipContent: d,
-  TooltipTrigger: g$1
+  Switch: m$1,
+  SwitchThumb: b,
+  Tabs: y,
+  TabsContent: C$2,
+  TabsList: f$3,
+  TabsTrigger: x$1,
+  Tooltip: m$3,
+  TooltipContent: T,
+  TooltipTrigger: g
 }, Symbol.toStringTag, { value: "Module" }));
 const createFramework$2 = async () => {
   const routeTemplatesDir = join("app", "route-templates");
@@ -6602,35 +8191,38 @@ const createFramework$2 = async () => {
     "utf8"
   );
   await rm(routeTemplatesDir, { recursive: true, force: true });
-  const radixComponentNamespacedMetas = {};
+  const base = "@webstudio-is/sdk-components-react";
+  const remix = "@webstudio-is/sdk-components-react-remix";
+  const reactRadix = "@webstudio-is/sdk-components-react-radix";
+  const animation = "@webstudio-is/sdk-components-animation";
+  const components = {};
+  const metas = {};
+  for (const [name2, meta] of Object.entries(baseComponentMetas)) {
+    components[name2] = `${base}:${name2}`;
+    metas[name2] = meta;
+  }
+  for (const name2 of ["Body", "Link", "RichTextLink", "Form", "RemixForm"]) {
+    components[name2] = `${remix}:${name2}`;
+  }
   for (const [name2, meta] of Object.entries(radixComponentMetas)) {
-    const namespace = "@webstudio-is/sdk-components-react-radix";
-    radixComponentNamespacedMetas[`${namespace}:${name2}`] = meta;
+    components[`${reactRadix}:${name2}`] = `${reactRadix}:${name2}`;
+    metas[`${reactRadix}:${name2}`] = meta;
   }
-  const animationComponentNamespacedMetas = {};
   for (const [name2, meta] of Object.entries(animationComponentMetas)) {
-    const namespace = "@webstudio-is/sdk-components-animation";
-    animationComponentNamespacedMetas[`${namespace}:${name2}`] = meta;
+    components[`${animation}:${name2}`] = `${animation}:${name2}`;
+    metas[`${animation}:${name2}`] = meta;
   }
   return {
-    components: [
-      {
-        source: "@webstudio-is/sdk-components-react",
-        metas: baseComponentMetas
-      },
-      {
-        source: "@webstudio-is/sdk-components-animation",
-        metas: animationComponentNamespacedMetas
-      },
-      {
-        source: "@webstudio-is/sdk-components-react-radix",
-        metas: radixComponentNamespacedMetas
-      },
-      {
-        source: "@webstudio-is/sdk-components-react-remix",
-        metas: remixComponentMetas
-      }
-    ],
+    metas,
+    components,
+    tags: {
+      textarea: `${base}:Textarea`,
+      input: `${base}:Input`,
+      select: `${base}:Select`,
+      body: `${remix}:Body`,
+      a: `${remix}:Link`,
+      form: `${remix}:RemixForm`
+    },
     html: ({ pagePath }) => [
       {
         file: join("app", "routes", `${generateRemixRoute(pagePath)}.tsx`),
@@ -6661,14 +8253,6 @@ const createFramework$2 = async () => {
     ]
   };
 };
-const reactRouterComponentMetas = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.defineProperty({
-  __proto__: null,
-  Body: n$8,
-  Form: c$1,
-  Link: n$6,
-  RemixForm: n$4,
-  RichTextLink: p$8
-}, Symbol.toStringTag, { value: "Module" }));
 const createFramework$1 = async () => {
   const routeTemplatesDir = join("app", "route-templates");
   const htmlTemplate = await readFile(
@@ -6688,35 +8272,38 @@ const createFramework$1 = async () => {
     "utf8"
   );
   await rm(routeTemplatesDir, { recursive: true, force: true });
-  const radixComponentNamespacedMetas = {};
+  const base = "@webstudio-is/sdk-components-react";
+  const reactRouter = "@webstudio-is/sdk-components-react-router";
+  const reactRadix = "@webstudio-is/sdk-components-react-radix";
+  const animation = "@webstudio-is/sdk-components-animation";
+  const components = {};
+  const metas = {};
+  for (const [name2, meta] of Object.entries(baseComponentMetas)) {
+    components[name2] = `${base}:${name2}`;
+    metas[name2] = meta;
+  }
+  for (const name2 of ["Body", "Link", "RichTextLink", "Form", "RemixForm"]) {
+    components[name2] = `${reactRouter}:${name2}`;
+  }
   for (const [name2, meta] of Object.entries(radixComponentMetas)) {
-    const namespace = "@webstudio-is/sdk-components-react-radix";
-    radixComponentNamespacedMetas[`${namespace}:${name2}`] = meta;
+    components[`${reactRadix}:${name2}`] = `${reactRadix}:${name2}`;
+    metas[`${reactRadix}:${name2}`] = meta;
   }
-  const animationComponentNamespacedMetas = {};
   for (const [name2, meta] of Object.entries(animationComponentMetas)) {
-    const namespace = "@webstudio-is/sdk-components-animation";
-    animationComponentNamespacedMetas[`${namespace}:${name2}`] = meta;
+    components[`${animation}:${name2}`] = `${animation}:${name2}`;
+    metas[`${animation}:${name2}`] = meta;
   }
   return {
-    components: [
-      {
-        source: "@webstudio-is/sdk-components-react",
-        metas: baseComponentMetas
-      },
-      {
-        source: "@webstudio-is/sdk-components-animation",
-        metas: animationComponentNamespacedMetas
-      },
-      {
-        source: "@webstudio-is/sdk-components-react-radix",
-        metas: radixComponentNamespacedMetas
-      },
-      {
-        source: "@webstudio-is/sdk-components-react-router",
-        metas: reactRouterComponentMetas
-      }
-    ],
+    metas,
+    components,
+    tags: {
+      textarea: `${base}:Textarea`,
+      input: `${base}:Input`,
+      select: `${base}:Select`,
+      body: `${reactRouter}:Body`,
+      a: `${reactRouter}:Link`,
+      form: `${reactRouter}:RemixForm`
+    },
     html: ({ pagePath }) => [
       {
         file: join("app", "routes", `${generateRemixRoute(pagePath)}.tsx`),
@@ -6768,31 +8355,31 @@ const createFramework = async () => {
     "utf8"
   );
   await rm(routeTemplatesDir, { recursive: true, force: true });
-  const radixComponentNamespacedMetas = {};
+  const base = "@webstudio-is/sdk-components-react";
+  const reactRadix = "@webstudio-is/sdk-components-react-radix";
+  const animation = "@webstudio-is/sdk-components-animation";
+  const components = {};
+  const metas = {};
+  for (const [name2, meta] of Object.entries(baseComponentMetas)) {
+    components[name2] = `${base}:${name2}`;
+    metas[name2] = meta;
+  }
   for (const [name2, meta] of Object.entries(radixComponentMetas)) {
-    const namespace = "@webstudio-is/sdk-components-react-radix";
-    radixComponentNamespacedMetas[`${namespace}:${name2}`] = meta;
+    components[`${reactRadix}:${name2}`] = `${reactRadix}:${name2}`;
+    metas[`${reactRadix}:${name2}`] = meta;
   }
-  const animationComponentNamespacedMetas = {};
   for (const [name2, meta] of Object.entries(animationComponentMetas)) {
-    const namespace = "@webstudio-is/sdk-components-animation";
-    animationComponentNamespacedMetas[`${namespace}:${name2}`] = meta;
+    components[`${animation}:${name2}`] = `${animation}:${name2}`;
+    metas[`${animation}:${name2}`] = meta;
   }
   return {
-    components: [
-      {
-        source: "@webstudio-is/sdk-components-react",
-        metas: baseComponentMetas
-      },
-      {
-        source: "@webstudio-is/sdk-components-animation",
-        metas: animationComponentNamespacedMetas
-      },
-      {
-        source: "@webstudio-is/sdk-components-react-radix",
-        metas: radixComponentNamespacedMetas
-      }
-    ],
+    metas,
+    components,
+    tags: {
+      textarea: `${base}:Textarea`,
+      input: `${base}:Input`,
+      select: `${base}:Select`
+    },
     html: ({ pagePath }) => {
       if (isPathnamePattern(pagePath)) {
         return [];
@@ -6910,7 +8497,7 @@ audit=false
 fund=false
 `;
 const prebuild = async (options) => {
-  var _a2, _b2, _c2, _d2, _e2, _f2, _g, _h, _i, _j, _k, _l;
+  var _a2, _b2, _c2, _d2, _e2, _f2, _g, _h, _i, _j, _k;
   if (options.template.length === 0) {
     log.error(
       `Template is not provided
@@ -6956,14 +8543,6 @@ Please check webstudio --help for more details`
       `Project data is missing, please make sure you the project is synced.`
     );
   }
-  const metas = /* @__PURE__ */ new Map();
-  const componentSources = /* @__PURE__ */ new Map();
-  for (const entry of framework.components) {
-    for (const [componentName, meta] of Object.entries(entry.metas)) {
-      metas.set(componentName, meta);
-      componentSources.set(componentName, entry.source);
-    }
-  }
   const usedMetas = new Map(
     Object.entries(coreMetas)
   );
@@ -6989,7 +8568,7 @@ Please check webstudio --help for more details`
     for (const [_instanceId, instance] of siteData.build.instances) {
       if (pageInstanceSet.has(instance.id)) {
         instances.push([instance.id, instance]);
-        const meta = metas.get(instance.component);
+        const meta = framework.metas[instance.component];
         if (meta) {
           usedMetas.set(instance.component, meta);
         }
@@ -7127,31 +8706,31 @@ Please check webstudio --help for more details`
         instances.delete(instance.id);
       }
     }
-    const pageComponents = /* @__PURE__ */ new Set();
+    const imports2 = /* @__PURE__ */ new Map();
     for (const instance of instances.values()) {
-      pageComponents.add(instance.component);
-    }
-    const namespaces = /* @__PURE__ */ new Map();
-    for (const component of pageComponents) {
-      const namespace = componentSources.get(component);
-      if (namespace === void 0) {
+      let descriptor = framework.components[instance.component];
+      let id = instance.component;
+      if (instance.component === elementComponent && instance.tag) {
+        descriptor = framework.tags[instance.tag];
+        id = descriptor;
+      }
+      if (descriptor === void 0) {
         continue;
       }
-      if (namespaces.has(namespace) === false) {
-        namespaces.set(
-          namespace,
-          /* @__PURE__ */ new Set()
-        );
+      const [importSource, importSpecifier] = descriptor.split(":");
+      let specifiers = imports2.get(importSource);
+      if (specifiers === void 0) {
+        specifiers = /* @__PURE__ */ new Map();
+        imports2.set(importSource, specifiers);
       }
-      const [_namespace, shortName] = parseComponentName(component);
-      (_i = namespaces.get(namespace)) == null ? void 0 : _i.add([shortName, component]);
+      specifiers.set(id, importSpecifier);
     }
-    let componentImports = "";
-    for (const [namespace, componentsSet] of namespaces.entries()) {
-      const specifiers = Array.from(componentsSet).map(
-        ([shortName, component]) => `${shortName} as ${scope.getName(component, shortName)}`
+    let importsString = "";
+    for (const [importSource, specifiers] of imports2) {
+      const specifiersString = Array.from(specifiers).map(
+        ([id, importSpecifier]) => `${importSpecifier} as ${scope.getName(id, importSpecifier)}`
       ).join(", ");
-      componentImports += `import { ${specifiers} } from "${namespace}";
+      importsString += `import { ${specifiersString} } from "${importSource}";
 `;
     }
     const pageFontAssets = fontAssetsByPage[page.id];
@@ -7188,14 +8767,15 @@ Please check webstudio --help for more details`
       props,
       dataSources,
       classesMap: classes,
-      metas: usedMetas
+      metas: usedMetas,
+      tagsOverrides: framework.tags
     });
     const projectMeta = siteData.build.pages.meta;
     const contactEmail = (
       // fallback to user email when contact email is empty string
-      (projectMeta == null ? void 0 : projectMeta.contactEmail) || ((_j = siteData.user) == null ? void 0 : _j.email) || void 0
+      (projectMeta == null ? void 0 : projectMeta.contactEmail) || ((_i = siteData.user) == null ? void 0 : _i.email) || void 0
     );
-    const favIconAsset = (_k = assets.get((projectMeta == null ? void 0 : projectMeta.faviconAssetId) ?? "")) == null ? void 0 : _k.name;
+    const favIconAsset = (_j = assets.get((projectMeta == null ? void 0 : projectMeta.faviconAssetId) ?? "")) == null ? void 0 : _j.name;
     const pagePath = getPagePath(page.id, siteData.build.pages);
     const breakpoints = siteData.build.breakpoints.map(([_, value]) => ({
       id: value.id,
@@ -7208,7 +8788,7 @@ Please check webstudio --help for more details`
 
       import { Fragment, useState } from "react";
       import { useResource, useVariableState } from "@webstudio-is/react-sdk/runtime";
-      ${componentImports}
+      ${importsString}
 
       export const projectId = "${siteData.build.projectId}";
 
@@ -7319,7 +8899,7 @@ Please check webstudio --help for more details`
     )};
     `
   );
-  const redirects = (_l = siteData.build.pages) == null ? void 0 : _l.redirects;
+  const redirects = (_k = siteData.build.pages) == null ? void 0 : _k.redirects;
   if (redirects !== void 0 && redirects.length > 0) {
     for (const redirect of redirects) {
       const generatedBasename = generateRemixRoute(redirect.old);
@@ -7463,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();
@@ -7494,7 +9074,7 @@ const getDeploymentInstructions = (deployTarget) => {
   }
 };
 const name = "webstudio";
-const version = "0.219.0";
+const version = "0.221.0";
 const description = "Webstudio CLI";
 const author = "Webstudio <github@webstudio.is>";
 const homepage = "https://webstudio.is";