webstudio 0.270.0 → 0.272.0

package/lib/metas-BerOcifF.js

@@ -0,0 +1,3297 @@
+import { S as SlotComponentIcon, d as descendantComponent, E as EmbedIcon, M as MarkdownEmbedIcon, b as body, s as section, n as nav, m as main, h as header, f as footer, a as figure, c as aside, e as article, j as address, k as div, T as TextIcon, l as h6, o as h5, p as h4, q as h3, r as h2, t as h1, u as p, v as a, w as span, P as PaintBrushIcon, x as b, y as i, z as sup, A as sub, B as button, C as input, D as form, W as WebhookFormIcon, F as img, G as ul, H as ol, I as li, J as hr, K as code, L as BracesIcon, N as label, O as textarea, Q as radio, R as RadioCheckedIcon, U as checkbox, V as CheckboxCheckedIcon, X as VimeoIcon, Y as YoutubeIcon, Z as ButtonElementIcon, _ as BoxIcon, $ as XmlIcon, a0 as CalendarIcon, a1 as time, a2 as select, a3 as HeaderIcon, a4 as ResourceIcon, a5 as WindowInfoIcon, a6 as WindowTitleIcon, a7 as VideoIcon, a8 as AnimationGroupIcon, a9 as TextAnimationIcon, aa as StaggerAnimationIcon, ab as PlayIcon, ac as CollapsibleIcon, ad as TriggerIcon, ae as ContentIcon, af as DialogIcon, ag as OverlayIcon, ah as HeadingIcon, ai as PopoverIcon, aj as TooltipIcon, ak as TabsIcon, al as LabelIcon, am as AccordionIcon, an as ItemIcon, ao as NavigationMenuIcon, ap as ListIcon, aq as ListItemIcon, ar as ViewportIcon, as as SelectIcon, at as FormTextFieldIcon, au as CheckMarkIcon, av as SwitchIcon, aw as RadioGroupIcon } from "./cli-BUDhVJgP.js";
+const meta$N = {
+  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: 4
+};
+const meta$M = {};
+const props$J = {
+  className: {
+    required: false,
+    control: "text",
+    type: "string",
+    description: ""
+  },
+  clientOnly: { required: false, control: "boolean", type: "boolean" },
+  code: { required: true, control: "text", type: "string" },
+  executeScriptOnCanvas: {
+    required: false,
+    control: "boolean",
+    type: "boolean"
+  }
+};
+const meta$L = {
+  category: "general",
+  label: "HTML Embed",
+  description: "Used to add HTML code to the page, such as an SVG or script.",
+  icon: EmbedIcon,
+  order: 3,
+  contentModel: {
+    category: "instance",
+    children: [descendantComponent]
+  },
+  presetStyle: {
+    div: [
+      {
+        property: "display",
+        value: { type: "keyword", value: "contents" }
+      },
+      {
+        property: "white-space-collapse",
+        value: { type: "keyword", value: "collapse" }
+      }
+    ]
+  },
+  initialProps: ["class", "clientOnly", "executeScriptOnCanvas"],
+  props: {
+    ...props$J,
+    clientOnly: {
+      ...props$J.clientOnly,
+      description: "Activate it for any scripts that can mutate the DOM or introduce interactivity. This only affects the published site."
+    },
+    executeScriptOnCanvas: {
+      ...props$J.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 props$I = {
+  code: { required: true, control: "text", type: "string" }
+};
+const meta$K = {
+  icon: MarkdownEmbedIcon,
+  contentModel: {
+    category: "instance",
+    children: [descendantComponent]
+  },
+  presetStyle: {
+    div: [
+      {
+        property: "display",
+        value: { type: "keyword", value: "contents" }
+      },
+      {
+        property: "white-space-collapse",
+        value: { type: "keyword", value: "collapse" }
+      }
+    ]
+  },
+  initialProps: ["class"],
+  props: {
+    ...props$I,
+    code: {
+      required: true,
+      control: "code",
+      language: "markdown",
+      type: "string",
+      contentMode: true
+    }
+  }
+};
+const props$H = {};
+const meta$J = {
+  presetStyle: { body },
+  initialProps: ["id", "class"],
+  props: props$H
+};
+const props$G = {
+  tag: { required: false, control: "text", type: "string" }
+};
+const meta$I = {
+  presetStyle: {
+    div,
+    address,
+    article,
+    aside,
+    figure,
+    footer,
+    header,
+    main,
+    nav,
+    section
+  },
+  initialProps: ["tag", "id", "class"],
+  props: {
+    ...props$G,
+    tag: {
+      required: true,
+      control: "tag",
+      type: "string",
+      options: [
+        "div",
+        "header",
+        "footer",
+        "nav",
+        "main",
+        "section",
+        "article",
+        "aside",
+        "address",
+        "figure",
+        "span"
+      ]
+    }
+  }
+};
+const props$F = {
+  tag: { required: false, control: "text", type: "string" }
+};
+const meta$H = {
+  icon: TextIcon,
+  presetStyle: {
+    div: [
+      ...div,
+      {
+        property: "min-height",
+        value: { type: "unit", unit: "em", value: 1 }
+      }
+    ]
+  },
+  initialProps: ["tag", "id", "class"],
+  props: {
+    ...props$F,
+    tag: {
+      required: true,
+      control: "tag",
+      type: "string",
+      options: ["div", "cite", "figcaption", "span"]
+    }
+  }
+};
+const props$E = {
+  tag: { required: false, control: "text", type: "string" }
+};
+const meta$G = {
+  presetStyle: {
+    h1,
+    h2,
+    h3,
+    h4,
+    h5,
+    h6
+  },
+  initialProps: ["tag", "id", "class"],
+  props: {
+    ...props$E,
+    tag: {
+      required: true,
+      control: "tag",
+      type: "string",
+      options: ["h1", "h2", "h3", "h4", "h5", "h6"]
+    }
+  }
+};
+const props$D = {};
+const meta$F = {
+  presetStyle: { p },
+  initialProps: ["id", "class"],
+  props: props$D
+};
+const props$C = {
+  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 presetStyle$d = {
+  a: [
+    ...a,
+    {
+      property: "display",
+      value: { type: "keyword", value: "inline-block" }
+    }
+  ]
+};
+const meta$E = {
+  presetStyle: presetStyle$d,
+  states: [{ label: "Current page", selector: "[aria-current=page]" }],
+  initialProps: ["id", "class", "href", "target", "prefetch", "download"],
+  props: {
+    ...props$C,
+    href: {
+      type: "string",
+      control: "url",
+      required: false,
+      contentMode: true
+    }
+  }
+};
+const meta$D = meta$E;
+const props$B = {};
+const meta$C = {
+  label: "Text",
+  icon: PaintBrushIcon,
+  presetStyle: { span },
+  initialProps: ["id", "class"],
+  props: props$B
+};
+const props$A = {};
+const meta$B = {
+  label: "Bold Text",
+  presetStyle: { b },
+  initialProps: ["id", "class"],
+  props: props$A
+};
+const props$z = {};
+const meta$A = {
+  label: "Italic Text",
+  presetStyle: { i },
+  initialProps: ["id", "class"],
+  props: props$z
+};
+const props$y = {};
+const meta$z = {
+  label: "Superscript Text",
+  presetStyle: { sup },
+  initialProps: ["id", "class"],
+  props: props$y
+};
+const props$x = {};
+const meta$y = {
+  label: "Subscript Text",
+  presetStyle: { sub },
+  initialProps: ["id", "class"],
+  props: props$x
+};
+const props$w = {};
+const meta$x = {
+  presetStyle: { button },
+  initialProps: ["id", "class", "type", "aria-label"],
+  props: props$w
+};
+const props$v = {};
+const presetStyle$c = {
+  input: [
+    ...input,
+    {
+      property: "display",
+      value: { type: "keyword", value: "block" }
+    }
+  ]
+};
+const meta$w = {
+  label: "Text Input",
+  presetStyle: presetStyle$c,
+  initialProps: [
+    "id",
+    "class",
+    "name",
+    "value",
+    "type",
+    "placeholder",
+    "required",
+    "autofocus"
+  ],
+  props: props$v
+};
+const props$u = {
+  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 meta$v = {
+  label: "Webhook Form",
+  icon: WebhookFormIcon,
+  presetStyle: {
+    form
+  },
+  states: [
+    { selector: "[data-state=error]", label: "Error" },
+    { selector: "[data-state=success]", label: "Success" }
+  ],
+  initialProps: ["id", "class", "state", "action"],
+  props: {
+    ...props$u,
+    action: {
+      type: "resource",
+      control: "resource",
+      description: "The URI of a program that processes the information submitted via the form.",
+      required: false
+    }
+  }
+};
+const props$t = {};
+const presetStyle$b = {
+  form: [
+    ...form,
+    { property: "min-height", value: { type: "unit", unit: "px", value: 20 } }
+  ]
+};
+const meta$u = {
+  label: "Form",
+  presetStyle: presetStyle$b,
+  initialProps: ["id", "class", "action"],
+  props: props$t
+};
+const props$s = {
+  optimize: {
+    description: "Optimize the image for enhanced performance.",
+    required: false,
+    control: "boolean",
+    type: "boolean",
+    defaultValue: true
+  },
+  quality: { required: false, control: "number", type: "number" }
+};
+const presetStyle$a = {
+  img: [
+    ...img,
+    // Otherwise on new image insert onto canvas it can overfit screen size multiple times
+    {
+      property: "max-width",
+      value: { type: "unit", unit: "%", value: 100 }
+    },
+    // inline | inline-block is not suitable because without line-height: 0 on the parent you get unsuitable spaces/margins
+    // see https://stackoverflow.com/questions/24771194/is-the-margin-of-inline-block-4px-is-static-for-all-browsers
+    {
+      property: "display",
+      value: { type: "keyword", value: "block" }
+    },
+    // Set image height to "auto" to reduce layout shift, improving compatibility across browsers like Safari.
+    // Unlike "fit-content," "auto" preserves the aspect ratio when the width exceeds max-width. (in Safari)
+    // See https://web.dev/articles/optimize-cls#best_practice_for_setting_image_dimensions
+    {
+      property: "height",
+      value: { type: "keyword", value: "auto" }
+    }
+  ]
+};
+const meta$t = {
+  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.",
+  presetStyle: presetStyle$a,
+  order: 0,
+  initialProps: [
+    "id",
+    "class",
+    "src",
+    "width",
+    "height",
+    "alt",
+    "loading",
+    "optimize"
+  ],
+  props: {
+    ...props$s,
+    // Automatically generated props don't have the right control.
+    src: {
+      type: "string",
+      control: "file",
+      label: "Source",
+      required: false,
+      accept: "image/*",
+      contentMode: true
+    },
+    width: {
+      type: "number",
+      control: "number",
+      required: false,
+      contentMode: true
+    },
+    height: {
+      type: "number",
+      control: "number",
+      required: false,
+      contentMode: true
+    },
+    alt: {
+      type: "string",
+      control: "text",
+      required: false,
+      contentMode: true
+    }
+  }
+};
+const props$r = {};
+const presetStyle$9 = {
+  blockquote: [
+    {
+      property: "margin-top",
+      value: { type: "unit", value: 0, unit: "number" }
+    },
+    {
+      property: "margin-right",
+      value: { type: "unit", value: 0, unit: "number" }
+    },
+    {
+      property: "margin-bottom",
+      value: { type: "unit", value: 10, unit: "px" }
+    },
+    {
+      property: "margin-left",
+      value: { type: "unit", value: 0, unit: "number" }
+    },
+    {
+      property: "padding-top",
+      value: { type: "unit", value: 10, unit: "px" }
+    },
+    {
+      property: "padding-bottom",
+      value: { type: "unit", value: 10, unit: "px" }
+    },
+    {
+      property: "padding-left",
+      value: { type: "unit", value: 20, unit: "px" }
+    },
+    {
+      property: "padding-right",
+      value: { type: "unit", value: 20, unit: "px" }
+    },
+    {
+      property: "border-left-width",
+      value: { type: "unit", value: 5, unit: "px" }
+    },
+    {
+      property: "border-left-style",
+      value: { type: "keyword", value: "solid" }
+    },
+    {
+      property: "border-left-color",
+      value: { type: "rgb", r: 226, g: 226, b: 226, alpha: 1 }
+    }
+  ]
+};
+const meta$s = {
+  presetStyle: presetStyle$9,
+  initialProps: ["id", "class", "cite"],
+  props: props$r
+};
+const props$q = {
+  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 presetStyle$8 = {
+  ol: [
+    ...ol,
+    {
+      property: "margin-top",
+      value: { type: "keyword", value: "0" }
+    },
+    {
+      property: "margin-bottom",
+      value: { type: "keyword", value: "10px" }
+    },
+    {
+      property: "padding-left",
+      value: { type: "keyword", value: "40px" }
+    }
+  ],
+  ul: [
+    ...ul,
+    {
+      property: "margin-top",
+      value: { type: "keyword", value: "0" }
+    },
+    {
+      property: "margin-bottom",
+      value: { type: "keyword", value: "10px" }
+    },
+    {
+      property: "padding-left",
+      value: { type: "keyword", value: "40px" }
+    }
+  ]
+};
+const meta$r = {
+  presetStyle: presetStyle$8,
+  initialProps: ["id", "class", "ordered", "start", "reversed"],
+  props: props$q
+};
+const props$p = {};
+const meta$q = {
+  presetStyle: { li },
+  initialProps: ["id", "class"],
+  props: props$p
+};
+const props$o = {};
+const presetStyle$7 = {
+  hr: [
+    ...hr,
+    {
+      property: "height",
+      value: { type: "keyword", value: "1px" }
+    },
+    {
+      property: "background-color",
+      value: { type: "keyword", value: "gray" }
+    },
+    {
+      property: "border-top-style",
+      value: { type: "keyword", value: "none" }
+    },
+    {
+      property: "border-right-style",
+      value: { type: "keyword", value: "none" }
+    },
+    {
+      property: "border-left-style",
+      value: { type: "keyword", value: "none" }
+    },
+    {
+      property: "border-bottom-style",
+      value: { type: "keyword", value: "none" }
+    }
+  ]
+};
+const meta$p = {
+  presetStyle: presetStyle$7,
+  initialProps: ["id", "class"],
+  props: props$o
+};
+const props$n = {
+  code: { required: false, control: "text", type: "string" }
+};
+const presetStyle$6 = {
+  code: [
+    ...code,
+    {
+      property: "display",
+      value: { type: "keyword", value: "block" }
+    },
+    {
+      property: "white-space-collapse",
+      value: { type: "keyword", value: "preserve" }
+    },
+    {
+      property: "text-wrap-mode",
+      value: { type: "keyword", value: "wrap" }
+    },
+    {
+      property: "padding-left",
+      value: { type: "unit", value: 0.2, unit: "em" }
+    },
+    {
+      property: "padding-right",
+      value: { type: "unit", value: 0.2, unit: "em" }
+    },
+    {
+      property: "background-color",
+      value: { type: "rgb", r: 238, g: 238, b: 238, alpha: 1 }
+    }
+  ]
+};
+const meta$o = {
+  icon: BracesIcon,
+  contentModel: {
+    category: "instance",
+    children: []
+  },
+  presetStyle: presetStyle$6,
+  initialProps: ["id", "class", "lang", "code"],
+  props: {
+    ...props$n,
+    code: {
+      required: true,
+      control: "codetext",
+      type: "string"
+    }
+  }
+};
+const props$m = {};
+const presetStyle$5 = {
+  label: [
+    ...label,
+    { property: "display", value: { type: "keyword", value: "block" } }
+  ]
+};
+const meta$n = {
+  label: "Input Label",
+  presetStyle: presetStyle$5,
+  initialProps: ["id", "class", "for"],
+  props: props$m
+};
+const props$l = {};
+const presetStyle$4 = {
+  textarea: [
+    ...textarea,
+    // resize doesn't work well while on canvas
+    { property: "resize", value: { type: "keyword", value: "none" } },
+    {
+      property: "display",
+      value: { type: "keyword", value: "block" }
+    }
+  ]
+};
+const meta$m = {
+  label: "Text Area",
+  presetStyle: presetStyle$4,
+  contentModel: {
+    category: "instance",
+    children: []
+  },
+  initialProps: [
+    "id",
+    "class",
+    "name",
+    "value",
+    "placeholder",
+    "required",
+    "autofocus"
+  ],
+  props: props$l
+};
+const props$k = {
+  value: {
+    required: false,
+    control: "text",
+    type: "string",
+    description: "Value of the form control"
+  }
+};
+const presetStyle$3 = {
+  input: [
+    ...radio,
+    {
+      property: "margin-right",
+      value: { type: "unit", unit: "em", value: 0.5 }
+    }
+  ]
+};
+const meta$l = {
+  label: "Radio",
+  icon: RadioCheckedIcon,
+  presetStyle: presetStyle$3,
+  initialProps: ["id", "class", "name", "value", "required", "checked"],
+  props: props$k
+};
+const props$j = {
+  value: {
+    required: false,
+    control: "text",
+    type: "string",
+    description: "Value of the form control"
+  }
+};
+const presetStyle$2 = {
+  input: [
+    ...checkbox,
+    {
+      property: "margin-right",
+      value: { type: "unit", unit: "em", value: 0.5 }
+    }
+  ]
+};
+const meta$k = {
+  icon: CheckboxCheckedIcon,
+  presetStyle: presetStyle$2,
+  initialProps: ["id", "class", "name", "value", "required", "checked"],
+  props: props$j
+};
+const props$i = {
+  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
+  },
+  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"
+  },
+  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
+  },
+  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"
+  },
+  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.\nTo 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 initialProps$1 = [
+  "id",
+  "className",
+  "url",
+  "title",
+  "quality",
+  "loading",
+  "showPreview",
+  "autoplay",
+  "doNotTrack",
+  "loop",
+  "muted",
+  "showPortrait",
+  "showByline",
+  "showTitle",
+  "showControls",
+  "controlsColor",
+  "playsinline"
+];
+const meta$j = {
+  icon: VimeoIcon,
+  contentModel: {
+    category: "instance",
+    children: ["instance"],
+    descendants: ["VimeoSpinner", "VimeoPlayButton", "VimeoPreviewImage"]
+  },
+  presetStyle: { div },
+  initialProps: initialProps$1,
+  props: {
+    ...props$i,
+    url: {
+      ...props$i.url,
+      contentMode: true
+    }
+  }
+};
+const props$h = {
+  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.\nValid 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.\nhttps://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 initialProps = [
+  "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"
+];
+const meta$i = {
+  icon: YoutubeIcon,
+  contentModel: {
+    category: "instance",
+    children: ["instance"],
+    descendants: ["VimeoSpinner", "VimeoPlayButton", "VimeoPreviewImage"]
+  },
+  presetStyle: { div },
+  initialProps,
+  props: {
+    ...props$h,
+    url: {
+      ...props$h.url,
+      contentMode: true
+    }
+  }
+};
+const props$g = {
+  optimize: {
+    description: "Optimize the image for enhanced performance.",
+    required: false,
+    control: "boolean",
+    type: "boolean"
+  },
+  quality: { required: false, control: "number", type: "number" }
+};
+const meta$h = {
+  ...meta$t,
+  category: "hidden",
+  label: "Preview Image",
+  contentModel: {
+    category: "none",
+    children: []
+  },
+  initialProps: meta$t.initialProps,
+  props: {
+    ...props$g,
+    // Automatically generated props don't have the right control.
+    src: {
+      type: "string",
+      control: "file",
+      label: "Source",
+      required: false,
+      contentMode: true
+    }
+  }
+};
+const props$f = {};
+const meta$g = {
+  category: "hidden",
+  label: "Play Button",
+  icon: ButtonElementIcon,
+  contentModel: {
+    category: "none",
+    children: ["instance"]
+  },
+  presetStyle: { button },
+  initialProps: ["id", "class"],
+  props: props$f
+};
+const props$e = {};
+const meta$f = {
+  icon: BoxIcon,
+  category: "hidden",
+  label: "Spinner",
+  contentModel: {
+    category: "none",
+    children: ["instance"]
+  },
+  presetStyle: { div },
+  initialProps: ["id", "class"],
+  props: props$e
+};
+const props$d = {
+  href: {
+    required: false,
+    control: "text",
+    type: "string",
+    description: "Address of the hyperlink"
+  },
+  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 meta$e = {
+  category: "xml",
+  order: 6,
+  icon: XmlIcon,
+  description: "XML Node",
+  initialProps: ["tag"],
+  props: props$d
+};
+const props$c = {
+  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 meta$d = {
+  category: "xml",
+  description: "Converts machine-readable date and time to ISO format.",
+  icon: CalendarIcon,
+  order: 7,
+  initialProps: ["datetime", "dateStyle"],
+  props: props$c
+};
+const props$b = {
+  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"]
+  },
+  datetime: {
+    required: false,
+    control: "text",
+    type: "string",
+    defaultValue: "dateTime attribute is not set",
+    description: "Machine-readable value"
+  },
+  format: {
+    description: 'Custom format template. Overrides Date Style and Time Style.\n\nTokens: YYYY/YY (year), MMMM/MMM/MM/M (month), DDDD/DDD/DD/D (day), HH/H (hours), mm/m (minutes), ss/s (seconds)\n\nExamples:\n- "YYYY-MM-DD" → 2025-11-03\n- "DDDD, MMMM D" → Monday, November 3\n- "DDD, D. MMM YYYY" → Mon, 3. Nov 2025\n\nDay and month names use the selected language.',
+    required: false,
+    control: "text",
+    type: "string"
+  },
+  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"]
+  },
+  timeZone: {
+    description: 'Time zone used to format the date.\n\nUse "UTC" for deterministic UTC output, "visitor" to use the browser time\nzone after hydration, or an IANA time zone like "Europe/Berlin".',
+    required: false,
+    control: "text",
+    type: "string",
+    defaultValue: "UTC"
+  }
+};
+const meta$c = {
+  category: "localization",
+  description: "Converts machine-readable date and time to a human-readable format.",
+  contentModel: {
+    category: "instance",
+    children: []
+  },
+  presetStyle: {
+    time
+  },
+  initialProps: [
+    "datetime",
+    "language",
+    "country",
+    "dateStyle",
+    "timeStyle",
+    "timeZone",
+    "format"
+  ],
+  props: {
+    ...props$b,
+    datetime: {
+      type: "string",
+      control: "text",
+      required: false,
+      contentMode: true
+    },
+    language: {
+      ...props$b.language,
+      contentMode: true
+    },
+    country: {
+      ...props$b.country,
+      contentMode: true
+    },
+    dateStyle: {
+      ...props$b.dateStyle,
+      contentMode: true
+    },
+    timeStyle: {
+      ...props$b.timeStyle,
+      contentMode: true
+    },
+    timeZone: {
+      required: false,
+      control: "timeZone",
+      type: "string",
+      defaultValue: "UTC",
+      options: ["UTC", "visitor"],
+      description: 'Timezone used to display the date. Use "visitor" to display each visitor’s browser timezone after the page loads, or select/type an IANA timezone like "Europe/Berlin".',
+      contentMode: true
+    },
+    format: {
+      ...props$b.format,
+      contentMode: true
+    }
+  }
+};
+const props$a = {};
+const presetStyle$1 = {
+  select: [
+    ...select,
+    {
+      property: "display",
+      value: { type: "keyword", value: "block" }
+    }
+  ]
+};
+const meta$b = {
+  presetStyle: presetStyle$1,
+  initialProps: [
+    "id",
+    "class",
+    "name",
+    "value",
+    "multiple",
+    "required",
+    "autofocus"
+  ],
+  props: props$a
+};
+const props$9 = {};
+const presetStyle = {
+  option: [
+    {
+      property: "background-color",
+      state: ":checked",
+      value: {
+        type: "rgb",
+        alpha: 1,
+        r: 209,
+        g: 209,
+        b: 209
+      }
+    }
+  ]
+};
+const meta$a = {
+  category: "hidden",
+  description: "An item within a drop-down menu that users can select as their chosen value.",
+  presetStyle,
+  states: [
+    // Applies when option is being activated (clicked)
+    { selector: ":active", label: "Active" },
+    // Applies to the currently selected option
+    { selector: ":checked", label: "Checked" },
+    // For <option> elements: The :default pseudo-class selects the <option> that has the selected attribute when the page loads. This is true even if the user later selects a different option.
+    { selector: ":default", label: "Default" },
+    { selector: ":hover", label: "Hover" },
+    { selector: ":disabled", label: "Disabled" }
+  ],
+  initialProps: ["label", "value", "label", "disabled"],
+  props: props$9
+};
+const props$8 = {};
+const meta$9 = {
+  icon: HeaderIcon,
+  description: "Inserts children into the head of the document",
+  contentModel: {
+    category: "instance",
+    children: ["HeadLink", "HeadMeta", "HeadTitle"]
+  },
+  props: props$8
+};
+const props$7 = {};
+const meta$8 = {
+  icon: ResourceIcon,
+  contentModel: {
+    category: "none",
+    children: []
+  },
+  initialProps: ["rel", "hrefLang", "href", "type", "as"],
+  props: props$7
+};
+const props$6 = {};
+const meta$7 = {
+  icon: WindowInfoIcon,
+  contentModel: {
+    category: "none",
+    children: []
+  },
+  initialProps: ["name", "property", "content"],
+  props: props$6
+};
+const props$5 = {};
+const meta$6 = {
+  icon: WindowTitleIcon,
+  contentModel: {
+    category: "none",
+    children: ["text"]
+  },
+  props: props$5
+};
+const props$4 = {};
+const meta$5 = {
+  icon: VideoIcon,
+  contentModel: {
+    category: "instance",
+    children: []
+  },
+  presetStyle: {
+    video: [
+      {
+        property: "max-width",
+        value: { type: "unit", unit: "%", value: 100 }
+      }
+    ]
+  },
+  initialProps: [
+    "id",
+    "class",
+    "width",
+    "height",
+    "src",
+    "autoPlay",
+    "controls",
+    "loop",
+    "muted",
+    "preload",
+    "playsInline"
+  ],
+  props: {
+    ...props$4,
+    // Automatically generated props don't have the right control.
+    src: {
+      type: "string",
+      control: "file",
+      label: "Source",
+      required: false,
+      accept: ".mp4,.webm,.mpg,.mpeg,.mov",
+      contentMode: true
+    },
+    width: {
+      type: "number",
+      control: "number",
+      required: false,
+      contentMode: true
+    },
+    height: {
+      type: "number",
+      control: "number",
+      required: false,
+      contentMode: true
+    }
+  }
+};
+const baseComponentMetas = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.defineProperty({
+  __proto__: null,
+  Blockquote: meta$s,
+  Body: meta$J,
+  Bold: meta$B,
+  Box: meta$I,
+  Button: meta$x,
+  Checkbox: meta$k,
+  CodeText: meta$o,
+  Form: meta$v,
+  Fragment: meta$M,
+  HeadLink: meta$8,
+  HeadMeta: meta$7,
+  HeadSlot: meta$9,
+  HeadTitle: meta$6,
+  Heading: meta$G,
+  HtmlEmbed: meta$L,
+  Image: meta$t,
+  Input: meta$w,
+  Italic: meta$A,
+  Label: meta$n,
+  Link: meta$E,
+  List: meta$r,
+  ListItem: meta$q,
+  MarkdownEmbed: meta$K,
+  Option: meta$a,
+  Paragraph: meta$F,
+  RadioButton: meta$l,
+  RemixForm: meta$u,
+  RichTextLink: meta$D,
+  Select: meta$b,
+  Separator: meta$p,
+  Slot: meta$N,
+  Span: meta$C,
+  Subscript: meta$y,
+  Superscript: meta$z,
+  Text: meta$H,
+  Textarea: meta$m,
+  Time: meta$c,
+  Video: meta$5,
+  Vimeo: meta$j,
+  VimeoPlayButton: meta$g,
+  VimeoPreviewImage: meta$h,
+  VimeoSpinner: meta$f,
+  XmlNode: meta$e,
+  XmlTime: meta$d,
+  YouTube: meta$i
+}, Symbol.toStringTag, { value: "Module" }));
+const createMetaProxy$1 = (prefix) => {
+  return new Proxy(
+    {},
+    {
+      get(_target, prop) {
+        return `${prefix}${prop}`;
+      }
+    }
+  );
+};
+const animation = createMetaProxy$1(
+  "@webstudio-is/sdk-components-animation:"
+);
+const meta$4 = {
+  category: "animations",
+  description: "Animation Group component is designed to animate its children.",
+  icon: AnimationGroupIcon,
+  order: 0,
+  label: "Animation Group",
+  contentModel: {
+    category: "instance",
+    children: [
+      "instance",
+      animation.AnimateText,
+      animation.StaggerAnimation,
+      animation.VideoAnimation
+    ]
+  },
+  initialProps: ["action"],
+  props: {
+    action: {
+      required: false,
+      control: "animationAction",
+      type: "animationAction",
+      description: "Animation Action"
+    }
+  }
+};
+const props$3 = {
+  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:\n- 0: Typewriter effect (no animation).\n- (0..1]: Animates one part of the text at a time.\n- (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 meta$3 = {
+  category: "animations",
+  description: "Text animation allows you to split text by char or by word to animate it.",
+  icon: TextAnimationIcon,
+  order: 1,
+  label: "Text Animation",
+  contentModel: {
+    category: "none",
+    children: ["instance"]
+  },
+  presetStyle: { div },
+  initialProps: ["slidingWindow", "easing", "splitBy"],
+  props: props$3
+};
+const props$2 = {
+  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:\n- 0: Typewriter effect (no animation).\n- (0..1]: Animates one child at a time.\n- (1..n]: Animates multiple children within the sliding window.",
+    required: false,
+    control: "number",
+    type: "number",
+    defaultValue: 1
+  }
+};
+const meta$2 = {
+  category: "animations",
+  description: "Stagger animation allows you to animate children elements with a sliding window.",
+  icon: StaggerAnimationIcon,
+  order: 4,
+  label: "Stagger Animation",
+  contentModel: {
+    category: "none",
+    children: ["instance"]
+  },
+  presetStyle: { div },
+  initialProps: ["slidingWindow", "easing"],
+  props: props$2
+};
+const props$1 = {
+  timeline: { required: false, control: "boolean", type: "boolean" }
+};
+const meta$1 = {
+  icon: PlayIcon,
+  label: "Video Animation",
+  contentModel: {
+    category: "none",
+    children: ["instance"]
+  },
+  presetStyle: { div },
+  props: props$1,
+  initialProps: ["timeline"]
+};
+const animationComponentMetas = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.defineProperty({
+  __proto__: null,
+  AnimateChildren: meta$4,
+  AnimateText: meta$3,
+  StaggerAnimation: meta$2,
+  VideoAnimation: meta$1
+}, Symbol.toStringTag, { value: "Module" }));
+const createMetaProxy = (prefix) => {
+  return new Proxy(
+    {},
+    {
+      get(_target, prop) {
+        return `${prefix}${prop}`;
+      }
+    }
+  );
+};
+const radix = createMetaProxy(
+  "@webstudio-is/sdk-components-react-radix:"
+);
+const propsCollapsible = {
+  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."
+  }
+};
+const propsCollapsibleTrigger = {};
+const propsCollapsibleContent = {};
+const metaCollapsible = {
+  icon: CollapsibleIcon,
+  contentModel: {
+    category: "instance",
+    children: ["instance"],
+    descendants: [radix.CollapsibleTrigger, radix.CollapsibleContent]
+  },
+  states: [
+    { label: "Open", selector: '[data-state="open"]' },
+    { label: "Closed", selector: '[data-state="closed"]' }
+  ],
+  presetStyle: {
+    div
+  },
+  initialProps: ["open"],
+  props: propsCollapsible
+};
+const metaCollapsibleTrigger = {
+  icon: TriggerIcon,
+  contentModel: {
+    category: "none",
+    children: ["instance", "rich-text"]
+  },
+  states: [
+    { label: "Open", selector: '[data-state="open"]' },
+    { label: "Closed", selector: '[data-state="closed"]' }
+  ],
+  props: propsCollapsibleTrigger
+};
+const metaCollapsibleContent = {
+  icon: ContentIcon,
+  contentModel: {
+    category: "none",
+    children: ["instance", "rich-text"]
+  },
+  states: [
+    { label: "Open", selector: '[data-state="open"]' },
+    { label: "Closed", selector: '[data-state="closed"]' }
+  ],
+  presetStyle: {
+    div
+  },
+  props: propsCollapsibleContent
+};
+const propsDialog = {
+  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."
+  }
+};
+const propsDialogTrigger = {};
+const propsDialogOverlay = {};
+const propsDialogContent = {};
+const propsDialogClose = {};
+const propsDialogTitle = {
+  tag: {
+    required: false,
+    control: "select",
+    type: "string",
+    options: ["h2", "h3", "h1", "h4", "h5", "h6"]
+  }
+};
+const propsDialogDescription = {};
+const unit = (property, value, unit2) => ({
+  property,
+  value: { type: "unit", unit: unit2, value }
+});
+const keyword = (property, value) => ({
+  property,
+  value: { type: "keyword", value }
+});
+const rgb = (property, r, g, b2) => ({
+  property,
+  value: { type: "rgb", alpha: 1, r, g, b: b2 }
+});
+const buttonReset = [
+  {
+    property: "background-color",
+    value: { type: "keyword", value: "transparent" }
+  },
+  {
+    property: "background-image",
+    value: { type: "keyword", value: "none" }
+  },
+  unit("border-top-width", 0, "px"),
+  unit("border-right-width", 0, "px"),
+  unit("border-bottom-width", 0, "px"),
+  unit("border-left-width", 0, "px"),
+  keyword("border-top-style", "solid"),
+  keyword("border-right-style", "solid"),
+  keyword("border-bottom-style", "solid"),
+  keyword("border-left-style", "solid"),
+  rgb("border-top-color", 226, 232, 240),
+  rgb("border-right-color", 226, 232, 240),
+  rgb("border-bottom-color", 226, 232, 240),
+  rgb("border-left-color", 226, 232, 240),
+  unit("padding-top", 0, "px"),
+  unit("padding-right", 0, "px"),
+  unit("padding-bottom", 0, "px"),
+  unit("padding-left", 0, "px")
+];
+const metaDialogTrigger = {
+  icon: TriggerIcon,
+  contentModel: {
+    category: "none",
+    children: ["instance"]
+  },
+  states: [
+    { label: "Open", selector: '[data-state="open"]' },
+    { label: "Closed", selector: '[data-state="closed"]' }
+  ],
+  props: propsDialogTrigger
+};
+const metaDialogOverlay = {
+  icon: OverlayIcon,
+  contentModel: {
+    category: "none",
+    children: ["instance"],
+    descendants: [radix.DialogContent]
+  },
+  states: [
+    { label: "Open", selector: '[data-state="open"]' },
+    { label: "Closed", selector: '[data-state="closed"]' }
+  ],
+  presetStyle: { div },
+  props: propsDialogOverlay
+};
+const metaDialogContent = {
+  icon: ContentIcon,
+  contentModel: {
+    category: "none",
+    children: ["instance"],
+    descendants: [
+      radix.DialogTitle,
+      radix.DialogDescription,
+      radix.DialogClose
+    ]
+  },
+  states: [
+    { label: "Open", selector: '[data-state="open"]' },
+    { label: "Closed", selector: '[data-state="closed"]' }
+  ],
+  presetStyle: { div },
+  props: propsDialogContent
+};
+const metaDialogTitle = {
+  icon: HeadingIcon,
+  contentModel: {
+    category: "none",
+    children: ["instance", "rich-text"]
+  },
+  presetStyle: { h2 },
+  props: propsDialogTitle
+};
+const metaDialogDescription = {
+  icon: TextIcon,
+  contentModel: {
+    category: "none",
+    children: ["instance", "rich-text"]
+  },
+  presetStyle: { p },
+  props: propsDialogDescription
+};
+const metaDialogClose = {
+  icon: ButtonElementIcon,
+  label: "Close Button",
+  contentModel: {
+    category: "none",
+    children: ["instance", "rich-text"]
+  },
+  presetStyle: {
+    button: [buttonReset, button].flat()
+  },
+  props: propsDialogClose
+};
+const metaDialog = {
+  icon: DialogIcon,
+  contentModel: {
+    category: "instance",
+    children: ["instance"],
+    descendants: [radix.DialogTrigger, radix.DialogOverlay]
+  },
+  initialProps: ["open"],
+  props: propsDialog
+};
+const propsPopover = {
+  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."
+  }
+};
+const propsPopoverTrigger = {};
+const propsPopoverContent = {
+  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"]
+  }
+};
+const propsPopoverClose = {};
+const metaPopoverTrigger = {
+  icon: TriggerIcon,
+  contentModel: {
+    category: "none",
+    children: ["instance"]
+  },
+  states: [
+    { label: "Open", selector: '[data-state="open"]' },
+    { label: "Closed", selector: '[data-state="closed"]' }
+  ],
+  props: propsPopoverTrigger
+};
+const metaPopoverContent = {
+  icon: ContentIcon,
+  contentModel: {
+    category: "none",
+    children: ["instance"],
+    descendants: [radix.PopoverClose]
+  },
+  states: [
+    { label: "Open", selector: '[data-state="open"]' },
+    { label: "Closed", selector: '[data-state="closed"]' }
+  ],
+  presetStyle: {
+    div
+  },
+  initialProps: ["side", "sideOffset", "align", "alignOffset"],
+  props: propsPopoverContent
+};
+const metaPopover = {
+  icon: PopoverIcon,
+  contentModel: {
+    category: "instance",
+    children: ["instance"],
+    descendants: [radix.PopoverTrigger, radix.PopoverContent]
+  },
+  initialProps: ["open"],
+  props: propsPopover
+};
+const metaPopoverClose = {
+  icon: ButtonElementIcon,
+  label: "Close Button",
+  contentModel: {
+    category: "none",
+    children: ["instance", "rich-text"]
+  },
+  presetStyle: {
+    button: [buttonReset, button].flat()
+  },
+  props: propsPopoverClose
+};
+const propsTooltip = {
+  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."
+  }
+};
+const propsTooltipTrigger = {};
+const propsTooltipContent = {
+  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 metaTooltipTrigger = {
+  icon: TriggerIcon,
+  contentModel: {
+    category: "none",
+    children: ["instance"]
+  },
+  states: [
+    { label: "Closed", selector: '[data-state="closed"]' },
+    { label: "Delayed open", selector: '[data-state="delayed-open"]' },
+    { label: "Instant open", selector: '[data-state="instant-open"]' }
+  ],
+  props: propsTooltipTrigger
+};
+const metaTooltipContent = {
+  icon: ContentIcon,
+  contentModel: {
+    category: "none",
+    children: ["instance"]
+  },
+  states: [
+    { label: "Closed", selector: '[data-state="closed"]' },
+    { label: "Delayed open", selector: '[data-state="delayed-open"]' },
+    { label: "Instant open", selector: '[data-state="instant-open"]' }
+  ],
+  presetStyle: { div },
+  initialProps: ["side", "sideOffset", "align", "alignOffset"],
+  props: propsTooltipContent
+};
+const metaTooltip = {
+  icon: TooltipIcon,
+  contentModel: {
+    category: "instance",
+    children: ["instance"],
+    descendants: [radix.TooltipTrigger, radix.TooltipContent]
+  },
+  initialProps: ["open", "delayDuration", "disableHoverableContent"],
+  props: propsTooltip
+};
+const propsTabs = {
+  activationMode: {
+    description: "Whether a tab is activated automatically or manually.\n@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.\nMainly so arrow navigation is done accordingly (left & right vs. up & down)\n@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"
+  }
+};
+const propsTabsList = {
+  loop: {
+    required: false,
+    control: "boolean",
+    type: "boolean",
+    description: "Whether to loop the media resource"
+  }
+};
+const propsTabsTrigger = {
+  value: {
+    required: false,
+    control: "text",
+    type: "string",
+    description: "Current value of the element"
+  }
+};
+const propsTabsContent = {
+  value: {
+    required: false,
+    control: "text",
+    type: "string",
+    description: "Current value of the element"
+  }
+};
+const metaTabs = {
+  icon: TabsIcon,
+  contentModel: {
+    category: "instance",
+    children: ["instance"],
+    descendants: [radix.TabsList, radix.TabsContent]
+  },
+  presetStyle: { div },
+  props: propsTabs
+};
+const metaTabsList = {
+  icon: HeaderIcon,
+  contentModel: {
+    category: "none",
+    children: ["instance"],
+    descendants: [radix.TabsTrigger]
+  },
+  presetStyle: { div },
+  props: propsTabsList
+};
+const metaTabsTrigger = {
+  icon: TriggerIcon,
+  label: "Tab Trigger",
+  indexWithinAncestor: radix.Tabs,
+  contentModel: {
+    category: "none",
+    children: ["instance", "rich-text"]
+  },
+  states: [
+    { label: "Active", selector: '[data-state="active"]' },
+    { label: "Inactive", selector: '[data-state="inactive"]' }
+  ],
+  presetStyle: {
+    button: [button, buttonReset].flat()
+  },
+  props: propsTabsTrigger
+};
+const metaTabsContent = {
+  label: "Tab Content",
+  icon: ContentIcon,
+  indexWithinAncestor: radix.Tabs,
+  contentModel: {
+    category: "none",
+    children: ["instance", "rich-text"]
+  },
+  states: [
+    { label: "Active", selector: '[data-state="active"]' },
+    { label: "Inactive", selector: '[data-state="inactive"]' }
+  ],
+  presetStyle: { div },
+  props: propsTabsContent
+};
+const props = {};
+const meta = {
+  icon: LabelIcon,
+  presetStyle: { label },
+  initialProps: ["id", "class", "for"],
+  props
+};
+const propsAccordion = {
+  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.\n@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"
+  }
+};
+const propsAccordionItem = {
+  disabled: {
+    description: "Whether or not an accordion item is disabled from user interaction.\n@defaultValue false",
+    required: false,
+    control: "boolean",
+    type: "boolean"
+  },
+  value: {
+    required: false,
+    control: "text",
+    type: "string",
+    description: "Current value of the element"
+  }
+};
+const propsAccordionHeader = {};
+const propsAccordionTrigger = {};
+const propsAccordionContent = {
+  forceMount: {
+    description: "Used to force mounting when more control is needed. Useful when controlling animation with React animation libraries or keeping content available in the DOM.",
+    required: false,
+    control: "boolean",
+    type: "boolean"
+  }
+};
+const metaAccordion = {
+  icon: AccordionIcon,
+  contentModel: {
+    category: "instance",
+    children: ["instance"],
+    descendants: [radix.AccordionItem]
+  },
+  presetStyle: { div },
+  initialProps: ["value", "collapsible"],
+  props: propsAccordion
+};
+const metaAccordionItem = {
+  label: "Item",
+  icon: ItemIcon,
+  indexWithinAncestor: radix.Accordion,
+  contentModel: {
+    category: "none",
+    children: ["instance"],
+    descendants: [radix.AccordionHeader, radix.AccordionContent]
+  },
+  states: [
+    { label: "Open", selector: '[data-state="open"]' },
+    { label: "Closed", selector: '[data-state="closed"]' }
+  ],
+  presetStyle: { div },
+  initialProps: ["value"],
+  props: propsAccordionItem
+};
+const metaAccordionHeader = {
+  label: "Item Header",
+  icon: HeaderIcon,
+  contentModel: {
+    category: "none",
+    children: ["instance"],
+    descendants: [radix.AccordionTrigger]
+  },
+  states: [
+    { label: "Open", selector: '[data-state="open"]' },
+    { label: "Closed", selector: '[data-state="closed"]' }
+  ],
+  presetStyle: {
+    h3: [
+      ...h3,
+      {
+        property: "margin-top",
+        value: { type: "unit", unit: "px", value: 0 }
+      },
+      {
+        property: "margin-bottom",
+        value: { type: "unit", unit: "px", value: 0 }
+      }
+    ]
+  },
+  props: propsAccordionHeader
+};
+const metaAccordionTrigger = {
+  label: "Item Trigger",
+  icon: TriggerIcon,
+  contentModel: {
+    category: "none",
+    children: ["instance", "rich-text"]
+  },
+  states: [
+    { label: "Open", selector: '[data-state="open"]' },
+    { label: "Closed", selector: '[data-state="closed"]' }
+  ],
+  presetStyle: {
+    button: [button, buttonReset].flat()
+  },
+  props: propsAccordionTrigger
+};
+const metaAccordionContent = {
+  label: "Item Content",
+  icon: ContentIcon,
+  contentModel: {
+    category: "none",
+    children: ["instance", "rich-text"]
+  },
+  states: [
+    { label: "Open", selector: '[data-state="open"]' },
+    { label: "Closed", selector: '[data-state="closed"]' }
+  ],
+  presetStyle: {
+    div
+  },
+  props: propsAccordionContent
+};
+const propsNavigationMenu = {
+  defaultValue: { required: false, control: "text", type: "string" },
+  delayDuration: {
+    description: "The duration from when the pointer enters the trigger until the tooltip gets opened.\n@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.\n@defaultValue 300",
+    required: false,
+    control: "number",
+    type: "number"
+  },
+  value: {
+    required: false,
+    control: "text",
+    type: "string",
+    description: "Current value of the element"
+  }
+};
+const propsNavigationMenuList = {};
+const propsNavigationMenuViewport = {};
+const propsNavigationMenuContent = {};
+const propsNavigationMenuItem = {
+  value: {
+    required: false,
+    control: "text",
+    type: "string",
+    description: "Current value of the element"
+  }
+};
+const propsNavigationMenuLink = {
+  active: { required: false, control: "boolean", type: "boolean" }
+};
+const propsNavigationMenuTrigger = {};
+const metaNavigationMenu = {
+  icon: NavigationMenuIcon,
+  contentModel: {
+    category: "instance",
+    children: ["instance"],
+    descendants: [radix.NavigationMenuList, radix.NavigationMenuViewport]
+  },
+  presetStyle: {
+    div
+  },
+  props: propsNavigationMenu
+};
+const metaNavigationMenuList = {
+  icon: ListIcon,
+  label: "Menu List",
+  contentModel: {
+    category: "none",
+    children: ["instance"],
+    descendants: [radix.NavigationMenuItem]
+  },
+  presetStyle: {
+    div
+  },
+  props: propsNavigationMenuList
+};
+const metaNavigationMenuItem = {
+  icon: ListItemIcon,
+  label: "Menu Item",
+  indexWithinAncestor: radix.NavigationMenu,
+  contentModel: {
+    category: "none",
+    children: ["instance"],
+    descendants: [
+      radix.NavigationMenuTrigger,
+      radix.NavigationMenuContent,
+      radix.NavigationMenuLink
+    ]
+  },
+  presetStyle: {
+    div
+  },
+  props: propsNavigationMenuItem
+};
+const metaNavigationMenuTrigger = {
+  icon: TriggerIcon,
+  label: "Menu Trigger",
+  contentModel: {
+    category: "none",
+    children: ["instance"]
+  },
+  states: [
+    { label: "Open", selector: '[data-state="open"]' },
+    { label: "Closed", selector: '[data-state="closed"]' }
+  ],
+  props: propsNavigationMenuTrigger
+};
+const metaNavigationMenuContent = {
+  icon: ContentIcon,
+  label: "Menu Content",
+  contentModel: {
+    category: "none",
+    children: ["instance"],
+    descendants: [radix.NavigationMenuLink]
+  },
+  states: [
+    { label: "Open", selector: '[data-state="open"]' },
+    { label: "Closed", selector: '[data-state="closed"]' }
+  ],
+  presetStyle: {
+    div
+  },
+  props: propsNavigationMenuContent
+};
+const metaNavigationMenuLink = {
+  icon: BoxIcon,
+  label: "Accessible Link Wrapper",
+  contentModel: {
+    category: "none",
+    children: ["instance"]
+  },
+  props: propsNavigationMenuLink
+};
+const metaNavigationMenuViewport = {
+  icon: ViewportIcon,
+  label: "Menu Viewport",
+  contentModel: {
+    category: "none",
+    children: ["instance"]
+  },
+  states: [
+    { label: "Open", selector: '[data-state="open"]' },
+    { label: "Closed", selector: '[data-state="closed"]' }
+  ],
+  presetStyle: {
+    div
+  },
+  props: propsNavigationMenuViewport
+};
+const propsSelect = {
+  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"
+  }
+};
+const propsSelectTrigger = {};
+const propsSelectValue = {
+  placeholder: {
+    required: false,
+    control: "text",
+    type: "string",
+    description: "User-visible label to be placed within the form control"
+  }
+};
+const propsSelectContent = {
+  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"]
+  }
+};
+const propsSelectViewport = {
+  nonce: {
+    required: false,
+    control: "text",
+    type: "string",
+    description: "Cryptographic nonce used in Content Security Policy checks [CSP]"
+  }
+};
+const propsSelectItem = {
+  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"
+  }
+};
+const propsSelectItemIndicator = {};
+const propsSelectItemText = {};
+const metaSelect = {
+  icon: SelectIcon,
+  contentModel: {
+    category: "instance",
+    children: ["instance"],
+    descendants: [radix.SelectTrigger, radix.SelectContent]
+  },
+  initialProps: ["name", "value", "open", "required"],
+  props: propsSelect
+};
+const metaSelectTrigger = {
+  icon: TriggerIcon,
+  contentModel: {
+    category: "none",
+    children: ["instance"],
+    descendants: [radix.SelectValue]
+  },
+  states: [
+    { label: "Open", selector: '[data-state="open"]' },
+    { label: "Closed", selector: '[data-state="closed"]' }
+  ],
+  presetStyle: { button },
+  props: propsSelectTrigger
+};
+const metaSelectValue = {
+  label: "Value",
+  icon: FormTextFieldIcon,
+  contentModel: {
+    category: "none",
+    children: []
+  },
+  presetStyle: { span },
+  initialProps: ["placeholder"],
+  props: propsSelectValue
+};
+const metaSelectContent = {
+  icon: ContentIcon,
+  contentModel: {
+    category: "none",
+    children: ["instance"],
+    descendants: [radix.SelectViewport]
+  },
+  states: [
+    { label: "Open", selector: '[data-state="open"]' },
+    { label: "Closed", selector: '[data-state="closed"]' }
+  ],
+  presetStyle: { div },
+  props: propsSelectContent
+};
+const metaSelectViewport = {
+  icon: ViewportIcon,
+  contentModel: {
+    category: "none",
+    children: ["instance"],
+    descendants: [radix.SelectItem]
+  },
+  presetStyle: { div },
+  props: propsSelectViewport
+};
+const metaSelectItem = {
+  icon: ItemIcon,
+  contentModel: {
+    category: "none",
+    children: ["instance"],
+    descendants: [radix.SelectItemIndicator, radix.SelectItemText]
+  },
+  states: [
+    { label: "Checked", selector: '[data-state="checked"]' },
+    { label: "Unchecked", selector: '[data-state="unchecked"]' }
+  ],
+  presetStyle: { div },
+  initialProps: ["value"],
+  props: propsSelectItem
+};
+const metaSelectItemIndicator = {
+  label: "Indicator",
+  icon: CheckMarkIcon,
+  contentModel: {
+    category: "none",
+    children: ["instance"]
+  },
+  presetStyle: { span },
+  props: propsSelectItemIndicator
+};
+const metaSelectItemText = {
+  label: "Item Text",
+  icon: TextIcon,
+  contentModel: {
+    category: "none",
+    children: ["instance", "rich-text"]
+  },
+  presetStyle: { span },
+  props: propsSelectItemText
+};
+const propsSwitch = {
+  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"
+  }
+};
+const propsSwitchThumb = {};
+const metaSwitch = {
+  icon: SwitchIcon,
+  contentModel: {
+    category: "instance",
+    children: ["instance"],
+    descendants: [radix.SwitchThumb]
+  },
+  states: [
+    { label: "Checked", selector: '[data-state="checked"]' },
+    { label: "Unchecked", selector: '[data-state="unchecked"]' }
+  ],
+  presetStyle: {
+    button: [button, buttonReset].flat()
+  },
+  initialProps: ["id", "class", "name", "value", "checked", "required"],
+  props: propsSwitch
+};
+const metaSwitchThumb = {
+  icon: TriggerIcon,
+  contentModel: {
+    category: "none",
+    children: ["instance"]
+  },
+  states: [
+    { label: "Checked", selector: '[data-state="checked"]' },
+    { label: "Unchecked", selector: '[data-state="unchecked"]' }
+  ],
+  presetStyle: {
+    span
+  },
+  props: propsSwitchThumb
+};
+const propsCheckbox = {
+  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"
+  }
+};
+const propsCheckboxIndicator = {};
+const metaCheckbox = {
+  icon: CheckboxCheckedIcon,
+  contentModel: {
+    category: "instance",
+    children: ["instance"],
+    descendants: [radix.CheckboxIndicator]
+  },
+  states: [
+    { label: "Checked", selector: '[data-state="checked"]' },
+    { label: "Unchecked", selector: '[data-state="unchecked"]' },
+    { label: "Indeterminate", selector: '[data-state="indeterminate"]' }
+  ],
+  presetStyle: {
+    button: [button, buttonReset].flat()
+  },
+  initialProps: ["id", "class", "name", "value", "required", "checked"],
+  props: propsCheckbox
+};
+const metaCheckboxIndicator = {
+  icon: TriggerIcon,
+  contentModel: {
+    category: "none",
+    children: ["instance", "rich-text"]
+  },
+  states: [
+    { label: "Checked", selector: '[data-state="checked"]' },
+    { label: "Unchecked", selector: '[data-state="unchecked"]' },
+    { label: "Indeterminate", selector: '[data-state="indeterminate"]' }
+  ],
+  presetStyle: {
+    span
+  },
+  props: propsCheckboxIndicator
+};
+const propsRadioGroup = {
+  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"
+  }
+};
+const propsRadioGroupItem = {
+  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"
+  }
+};
+const propsRadioGroupIndicator = {};
+const metaRadioGroup = {
+  icon: RadioGroupIcon,
+  contentModel: {
+    category: "instance",
+    children: ["instance"],
+    descendants: [radix.RadioGroupItem]
+  },
+  presetStyle: {
+    div
+  },
+  initialProps: ["id", "class", "name", "value", "required"],
+  props: propsRadioGroup
+};
+const metaRadioGroupItem = {
+  icon: ItemIcon,
+  contentModel: {
+    category: "none",
+    children: ["instance"],
+    descendants: [radix.RadioGroupIndicator]
+  },
+  states: [
+    { label: "Checked", selector: '[data-state="checked"]' },
+    { label: "Unchecked", selector: '[data-state="unchecked"]' }
+  ],
+  presetStyle: {
+    button: [button, buttonReset].flat()
+  },
+  initialProps: ["value"],
+  props: propsRadioGroupItem
+};
+const metaRadioGroupIndicator = {
+  icon: TriggerIcon,
+  contentModel: {
+    category: "none",
+    children: ["instance"]
+  },
+  states: [
+    { label: "Checked", selector: '[data-state="checked"]' },
+    { label: "Unchecked", selector: '[data-state="unchecked"]' }
+  ],
+  presetStyle: {
+    span
+  },
+  props: propsRadioGroupIndicator
+};
+const radixComponentMetas = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.defineProperty({
+  __proto__: null,
+  Accordion: metaAccordion,
+  AccordionContent: metaAccordionContent,
+  AccordionHeader: metaAccordionHeader,
+  AccordionItem: metaAccordionItem,
+  AccordionTrigger: metaAccordionTrigger,
+  Checkbox: metaCheckbox,
+  CheckboxIndicator: metaCheckboxIndicator,
+  Collapsible: metaCollapsible,
+  CollapsibleContent: metaCollapsibleContent,
+  CollapsibleTrigger: metaCollapsibleTrigger,
+  Dialog: metaDialog,
+  DialogClose: metaDialogClose,
+  DialogContent: metaDialogContent,
+  DialogDescription: metaDialogDescription,
+  DialogOverlay: metaDialogOverlay,
+  DialogTitle: metaDialogTitle,
+  DialogTrigger: metaDialogTrigger,
+  Label: meta,
+  NavigationMenu: metaNavigationMenu,
+  NavigationMenuContent: metaNavigationMenuContent,
+  NavigationMenuItem: metaNavigationMenuItem,
+  NavigationMenuLink: metaNavigationMenuLink,
+  NavigationMenuList: metaNavigationMenuList,
+  NavigationMenuTrigger: metaNavigationMenuTrigger,
+  NavigationMenuViewport: metaNavigationMenuViewport,
+  Popover: metaPopover,
+  PopoverClose: metaPopoverClose,
+  PopoverContent: metaPopoverContent,
+  PopoverTrigger: metaPopoverTrigger,
+  RadioGroup: metaRadioGroup,
+  RadioGroupIndicator: metaRadioGroupIndicator,
+  RadioGroupItem: metaRadioGroupItem,
+  Select: metaSelect,
+  SelectContent: metaSelectContent,
+  SelectItem: metaSelectItem,
+  SelectItemIndicator: metaSelectItemIndicator,
+  SelectItemText: metaSelectItemText,
+  SelectTrigger: metaSelectTrigger,
+  SelectValue: metaSelectValue,
+  SelectViewport: metaSelectViewport,
+  Switch: metaSwitch,
+  SwitchThumb: metaSwitchThumb,
+  Tabs: metaTabs,
+  TabsContent: metaTabsContent,
+  TabsList: metaTabsList,
+  TabsTrigger: metaTabsTrigger,
+  Tooltip: metaTooltip,
+  TooltipContent: metaTooltipContent,
+  TooltipTrigger: metaTooltipTrigger
+}, Symbol.toStringTag, { value: "Module" }));
+export {
+  animationComponentMetas as a,
+  baseComponentMetas as b,
+  radixComponentMetas as r
+};