@webstudio-is/sdk-components-react-radix 0.95.0 → 0.97.0

package/lib/metas.js

@@ -1,72 +1,4630 @@
-"use strict";
+// src/collapsible.ws.ts
+import {
+  CollapsibleIcon,
+  TriggerIcon,
+  ContentIcon
+} from "@webstudio-is/icons/svg";
+import { div } from "@webstudio-is/react-sdk/css-normalize";
+
+// src/__generated__/collapsible.props.ts
+var propsCollapsible = {
+  about: { required: false, control: "text", type: "string" },
+  accessKey: {
+    required: false,
+    control: "text",
+    type: "string",
+    description: "Keyboard shortcut to activate or add focus to the element."
+  },
+  "aria-activedescendant": {
+    description: "Identifies the currently active element when DOM focus is on a composite widget, textbox, group, or application.",
+    required: false,
+    control: "text",
+    type: "string"
+  },
+  "aria-atomic": {
+    description: "Indicates whether assistive technologies will present all, or only parts of, the changed region based on the change notifications defined by the aria-relevant attribute.",
+    required: false,
+    control: "boolean",
+    type: "boolean"
+  },
+  "aria-autocomplete": {
+    description: "Indicates whether inputting text could trigger display of one or more predictions of the user's intended value for an input and specifies how predictions would be\npresented if they are made.",
+    required: false,
+    control: "select",
+    type: "string",
+    options: ["list", "none", "inline", "both"]
+  },
+  "aria-braillelabel": {
+    description: "Defines a string value that labels the current element, which is intended to be converted into Braille.\n@see aria-label.",
+    required: false,
+    control: "text",
+    type: "string"
+  },
+  "aria-brailleroledescription": {
+    description: "Defines a human-readable, author-localized abbreviated description for the role of an element, which is intended to be converted into Braille.\n@see aria-roledescription.",
+    required: false,
+    control: "text",
+    type: "string"
+  },
+  "aria-busy": { required: false, control: "boolean", type: "boolean" },
+  "aria-checked": {
+    description: 'Indicates the current "checked" state of checkboxes, radio buttons, and other widgets.\n@see aria-pressed\n@see aria-selected.',
+    required: false,
+    control: "text",
+    type: "string"
+  },
+  "aria-colcount": {
+    description: "Defines the total number of columns in a table, grid, or treegrid.\n@see aria-colindex.",
+    required: false,
+    control: "number",
+    type: "number"
+  },
+  "aria-colindex": {
+    description: "Defines an element's column index or position with respect to the total number of columns within a table, grid, or treegrid.\n@see aria-colcount\n@see aria-colspan.",
+    required: false,
+    control: "number",
+    type: "number"
+  },
+  "aria-colindextext": {
+    description: "Defines a human readable text alternative of aria-colindex.\n@see aria-rowindextext.",
+    required: false,
+    control: "text",
+    type: "string"
+  },
+  "aria-colspan": {
+    description: "Defines the number of columns spanned by a cell or gridcell within a table, grid, or treegrid.\n@see aria-colindex\n@see aria-rowspan.",
+    required: false,
+    control: "number",
+    type: "number"
+  },
+  "aria-controls": {
+    description: "Identifies the element (or elements) whose contents or presence are controlled by the current element.\n@see aria-owns.",
+    required: false,
+    control: "text",
+    type: "string"
+  },
+  "aria-current": {
+    description: "Indicates the element that represents the current item within a container or set of related elements.",
+    required: false,
+    control: "text",
+    type: "string"
+  },
+  "aria-describedby": {
+    description: "Identifies the element (or elements) that describes the object.\n@see aria-labelledby",
+    required: false,
+    control: "text",
+    type: "string"
+  },
+  "aria-description": {
+    description: "Defines a string value that describes or annotates the current element.\n@see related aria-describedby.",
+    required: false,
+    control: "text",
+    type: "string"
+  },
+  "aria-details": {
+    description: "Identifies the element that provides a detailed, extended description for the object.\n@see aria-describedby.",
+    required: false,
+    control: "text",
+    type: "string"
+  },
+  "aria-disabled": {
+    description: "Indicates that the element is perceivable but disabled, so it is not editable or otherwise operable.\n@see aria-hidden\n@see aria-readonly.",
+    required: false,
+    control: "boolean",
+    type: "boolean"
+  },
+  "aria-dropeffect": {
+    description: "Indicates what functions can be performed when a dragged object is released on the drop target.\n@deprecated in ARIA 1.1",
+    required: false,
+    control: "select",
+    type: "string",
+    options: ["link", "none", "copy", "execute", "move", "popup"]
+  },
+  "aria-errormessage": {
+    description: "Identifies the element that provides an error message for the object.\n@see aria-invalid\n@see aria-describedby.",
+    required: false,
+    control: "text",
+    type: "string"
+  },
+  "aria-expanded": {
+    description: "Indicates whether the element, or another grouping element it controls, is currently expanded or collapsed.",
+    required: false,
+    control: "boolean",
+    type: "boolean"
+  },
+  "aria-flowto": {
+    description: "Identifies the next element (or elements) in an alternate reading order of content which, at the user's discretion,\nallows assistive technology to override the general default of reading in document source order.",
+    required: false,
+    control: "text",
+    type: "string"
+  },
+  "aria-grabbed": {
+    description: `Indicates an element's "grabbed" state in a drag-and-drop operation.
+@deprecated in ARIA 1.1`,
+    required: false,
+    control: "boolean",
+    type: "boolean"
+  },
+  "aria-haspopup": {
+    description: "Indicates the availability and type of interactive popup element, such as menu or dialog, that can be triggered by an element.",
+    required: false,
+    control: "text",
+    type: "string"
+  },
+  "aria-hidden": {
+    description: "Indicates whether the element is exposed to an accessibility API.\n@see aria-disabled.",
+    required: false,
+    control: "boolean",
+    type: "boolean"
+  },
+  "aria-invalid": {
+    description: "Indicates the entered value does not conform to the format expected by the application.\n@see aria-errormessage.",
+    required: false,
+    control: "text",
+    type: "string"
+  },
+  "aria-keyshortcuts": {
+    description: "Indicates keyboard shortcuts that an author has implemented to activate or give focus to an element.",
+    required: false,
+    control: "text",
+    type: "string"
+  },
+  "aria-label": {
+    description: "Provides the accessible name that describes an interactive element if no other accessible name exists, for example in a button that contains an image with no text.",
+    required: false,
+    control: "text",
+    type: "string"
+  },
+  "aria-labelledby": {
+    description: "Identifies the element (or elements) that labels the current element.\n@see aria-describedby.",
+    required: false,
+    control: "text",
+    type: "string"
+  },
+  "aria-level": {
+    description: "Defines the hierarchical level of an element within a structure.",
+    required: false,
+    control: "number",
+    type: "number"
+  },
+  "aria-live": {
+    description: "Indicates that an element will be updated, and describes the types of updates the user agents, assistive technologies, and user can expect from the live region.",
+    required: false,
+    control: "radio",
+    type: "string",
+    options: ["off", "assertive", "polite"]
+  },
+  "aria-modal": {
+    description: "Indicates whether an element is modal when displayed.",
+    required: false,
+    control: "boolean",
+    type: "boolean"
+  },
+  "aria-multiline": {
+    description: "Indicates whether a text box accepts multiple lines of input or only a single line.",
+    required: false,
+    control: "boolean",
+    type: "boolean"
+  },
+  "aria-multiselectable": {
+    description: "Indicates that the user may select more than one item from the current selectable descendants.",
+    required: false,
+    control: "boolean",
+    type: "boolean"
+  },
+  "aria-orientation": {
+    description: "Indicates whether the element's orientation is horizontal, vertical, or unknown/ambiguous.",
+    required: false,
+    control: "radio",
+    type: "string",
+    options: ["horizontal", "vertical"]
+  },
+  "aria-owns": {
+    description: "Identifies an element (or elements) in order to define a visual, functional, or contextual parent/child relationship\nbetween DOM elements where the DOM hierarchy cannot be used to represent the relationship.\n@see aria-controls.",
+    required: false,
+    control: "text",
+    type: "string"
+  },
+  "aria-placeholder": {
+    description: "Defines a short hint (a word or short phrase) intended to aid the user with data entry when the control has no value.\nA hint could be a sample value or a brief description of the expected format.",
+    required: false,
+    control: "text",
+    type: "string"
+  },
+  "aria-posinset": {
+    description: "Defines an element's number or position in the current set of listitems or treeitems. Not required if all elements in the set are present in the DOM.\n@see aria-setsize.",
+    required: false,
+    control: "number",
+    type: "number"
+  },
+  "aria-pressed": {
+    description: 'Indicates the current "pressed" state of toggle buttons.\n@see aria-checked\n@see aria-selected.',
+    required: false,
+    control: "text",
+    type: "string"
+  },
+  "aria-readonly": {
+    description: "Indicates that the element is not editable, but is otherwise operable.\n@see aria-disabled.",
+    required: false,
+    control: "boolean",
+    type: "boolean"
+  },
+  "aria-relevant": {
+    description: "Indicates what notifications the user agent will trigger when the accessibility tree within a live region is modified.\n@see aria-atomic.",
+    required: false,
+    control: "select",
+    type: "string",
+    options: [
+      "text",
+      "additions",
+      "additions removals",
+      "additions text",
+      "all",
+      "removals",
+      "removals additions",
+      "removals text",
+      "text additions",
+      "text removals"
+    ]
+  },
+  "aria-required": {
+    description: "Indicates that user input is required on the element before a form may be submitted.",
+    required: false,
+    control: "boolean",
+    type: "boolean"
+  },
+  "aria-roledescription": {
+    description: "Defines a human-readable, author-localized description for the role of an element.",
+    required: false,
+    control: "text",
+    type: "string"
+  },
+  "aria-rowcount": {
+    description: "Defines the total number of rows in a table, grid, or treegrid.\n@see aria-rowindex.",
+    required: false,
+    control: "number",
+    type: "number"
+  },
+  "aria-rowindex": {
+    description: "Defines an element's row index or position with respect to the total number of rows within a table, grid, or treegrid.\n@see aria-rowcount\n@see aria-rowspan.",
+    required: false,
+    control: "number",
+    type: "number"
+  },
+  "aria-rowindextext": {
+    description: "Defines a human readable text alternative of aria-rowindex.\n@see aria-colindextext.",
+    required: false,
+    control: "text",
+    type: "string"
+  },
+  "aria-rowspan": {
+    description: "Defines the number of rows spanned by a cell or gridcell within a table, grid, or treegrid.\n@see aria-rowindex\n@see aria-colspan.",
+    required: false,
+    control: "number",
+    type: "number"
+  },
+  "aria-selected": {
+    description: 'Indicates the current "selected" state of various widgets.\n@see aria-checked\n@see aria-pressed.',
+    required: false,
+    control: "boolean",
+    type: "boolean"
+  },
+  "aria-setsize": {
+    description: "Defines the number of items in the current set of listitems or treeitems. Not required if all elements in the set are present in the DOM.\n@see aria-posinset.",
+    required: false,
+    control: "number",
+    type: "number"
+  },
+  "aria-sort": {
+    description: "Indicates if items in a table or grid are sorted in ascending or descending order.",
+    required: false,
+    control: "select",
+    type: "string",
+    options: ["none", "ascending", "descending", "other"]
+  },
+  "aria-valuemax": {
+    description: "Defines the maximum allowed value for a range widget.",
+    required: false,
+    control: "number",
+    type: "number"
+  },
+  "aria-valuemin": {
+    description: "Defines the minimum allowed value for a range widget.",
+    required: false,
+    control: "number",
+    type: "number"
+  },
+  "aria-valuenow": {
+    description: "Defines the current value for a range widget.\n@see aria-valuetext.",
+    required: false,
+    control: "number",
+    type: "number"
+  },
+  "aria-valuetext": {
+    description: "Defines the human readable text alternative of aria-valuenow for a range widget.",
+    required: false,
+    control: "text",
+    type: "string"
+  },
+  autoCapitalize: {
+    required: false,
+    control: "text",
+    type: "string",
+    description: "Sets whether input is automatically capitalized when entered by user."
+  },
+  autoCorrect: { required: false, control: "text", type: "string" },
+  autoFocus: {
+    required: false,
+    control: "boolean",
+    type: "boolean",
+    description: "Indicates that an element should be focused on page load, or when its parent dialog is displayed."
+  },
+  autoSave: { required: false, control: "text", type: "string" },
+  className: { required: false, control: "text", type: "string" },
+  color: {
+    required: false,
+    control: "color",
+    type: "string",
+    description: "This attribute sets the text color using either a named color or a  color specified in the hexadecimal #RRGGBB format. Note: This is a legacy attribute. Please use the CSS color property instead."
+  },
+  content: {
+    required: false,
+    control: "text",
+    type: "string",
+    description: "A value associated with http-equiv orname depending on the context."
+  },
+  contextMenu: {
+    required: false,
+    control: "text",
+    type: "string",
+    description: "Defines the ID of a menu element which willserve as the element's context menu."
+  },
+  datatype: { required: false, control: "text", type: "string" },
+  dir: {
+    required: false,
+    control: "text",
+    type: "string",
+    description: "Defines the text direction. Allowed values are ltr (Left-To-Right) or rtl (Right-To-Left)"
+  },
+  disabled: {
+    required: false,
+    control: "boolean",
+    type: "boolean",
+    description: "Indicates whether the user can interact with the element."
+  },
+  draggable: {
+    required: false,
+    control: "boolean",
+    type: "boolean",
+    description: "Defines whether the element can be dragged."
+  },
+  hidden: {
+    required: false,
+    control: "boolean",
+    type: "boolean",
+    description: "Prevents rendering of given element, while keeping child elements, e.g. script elements, active."
+  },
+  id: {
+    required: false,
+    control: "text",
+    type: "string",
+    description: "Often used with CSS to style a specific element. The value of this attribute must be unique."
+  },
+  inputMode: {
+    description: "Hints at the type of data that might be entered by the user while editing the element or its contents\n@see https://html.spec.whatwg.org/multipage/interaction.html#input-modalities:-the-inputmode-attribute",
+    required: false,
+    control: "select",
+    type: "string",
+    options: [
+      "search",
+      "text",
+      "none",
+      "tel",
+      "url",
+      "email",
+      "numeric",
+      "decimal"
+    ]
+  },
+  is: {
+    description: "Specify that a standard HTML element should behave like a defined custom built-in element\n@see https://html.spec.whatwg.org/multipage/custom-elements.html#attr-is",
+    required: false,
+    control: "text",
+    type: "string"
+  },
+  itemID: { required: false, control: "text", type: "string" },
+  itemProp: { required: false, control: "text", type: "string" },
+  itemRef: { required: false, control: "text", type: "string" },
+  itemScope: { required: false, control: "boolean", type: "boolean" },
+  itemType: { required: false, control: "text", type: "string" },
+  lang: {
+    required: false,
+    control: "text",
+    type: "string",
+    description: "Defines the language used in the element."
+  },
+  nonce: { required: false, control: "text", type: "string" },
+  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."
+  },
+  placeholder: {
+    required: false,
+    control: "text",
+    type: "string",
+    description: "Provides a hint to the user of what can be entered in the field."
+  },
+  prefix: { required: false, control: "text", type: "string" },
+  property: { required: false, control: "text", type: "string" },
+  radioGroup: { required: false, control: "text", type: "string" },
+  rel: {
+    required: false,
+    control: "text",
+    type: "string",
+    description: "Specifies the relationship of the target object to the link object."
+  },
+  resource: { required: false, control: "text", type: "string" },
+  results: { required: false, control: "number", type: "number" },
+  rev: { required: false, control: "text", type: "string" },
+  role: {
+    required: false,
+    control: "text",
+    type: "string",
+    description: "Defines an explicit role for an element for use by assistive technologies."
+  },
+  security: { required: false, control: "text", type: "string" },
+  slot: {
+    required: false,
+    control: "text",
+    type: "string",
+    description: "Assigns a slot in a shadow DOM shadow tree to an element."
+  },
+  spellCheck: {
+    required: false,
+    control: "boolean",
+    type: "boolean",
+    description: "Indicates whether spell checking is allowed for the element."
+  },
+  suppressContentEditableWarning: {
+    required: false,
+    control: "boolean",
+    type: "boolean"
+  },
+  suppressHydrationWarning: {
+    required: false,
+    control: "boolean",
+    type: "boolean"
+  },
+  tabIndex: {
+    required: false,
+    control: "number",
+    type: "number",
+    description: "Overrides the browser's default tab order and follows the one specified instead."
+  },
+  title: {
+    required: false,
+    control: "text",
+    type: "string",
+    description: "Text to be displayed in a tooltip when hovering over the element."
+  },
+  translate: {
+    required: false,
+    control: "radio",
+    type: "string",
+    options: ["yes", "no"],
+    description: "Specify whether an element's attribute values and the values of its text node children are to be translated when the page is localized, or whether to leave them unchanged."
+  },
+  typeof: { required: false, control: "text", type: "string" },
+  unselectable: {
+    required: false,
+    control: "radio",
+    type: "string",
+    options: ["on", "off"]
+  },
+  vocab: { required: false, control: "text", type: "string" }
+};
+
+// src/theme/__generated__/tailwind-theme.ts
+var spacing = {
+  "0": { type: "unit", unit: "px", value: 0 },
+  "1": { type: "unit", unit: "rem", value: 0.25 },
+  "2": { type: "unit", unit: "rem", value: 0.5 },
+  "3": { type: "unit", unit: "rem", value: 0.75 },
+  "4": { type: "unit", unit: "rem", value: 1 },
+  "5": { type: "unit", unit: "rem", value: 1.25 },
+  "6": { type: "unit", unit: "rem", value: 1.5 },
+  "7": { type: "unit", unit: "rem", value: 1.75 },
+  "8": { type: "unit", unit: "rem", value: 2 },
+  "9": { type: "unit", unit: "rem", value: 2.25 },
+  "10": { type: "unit", unit: "rem", value: 2.5 },
+  "11": { type: "unit", unit: "rem", value: 2.75 },
+  "12": { type: "unit", unit: "rem", value: 3 },
+  "14": { type: "unit", unit: "rem", value: 3.5 },
+  "16": { type: "unit", unit: "rem", value: 4 },
+  "20": { type: "unit", unit: "rem", value: 5 },
+  "24": { type: "unit", unit: "rem", value: 6 },
+  "28": { type: "unit", unit: "rem", value: 7 },
+  "32": { type: "unit", unit: "rem", value: 8 },
+  "36": { type: "unit", unit: "rem", value: 9 },
+  "40": { type: "unit", unit: "rem", value: 10 },
+  "44": { type: "unit", unit: "rem", value: 11 },
+  "48": { type: "unit", unit: "rem", value: 12 },
+  "52": { type: "unit", unit: "rem", value: 13 },
+  "56": { type: "unit", unit: "rem", value: 14 },
+  "60": { type: "unit", unit: "rem", value: 15 },
+  "64": { type: "unit", unit: "rem", value: 16 },
+  "72": { type: "unit", unit: "rem", value: 18 },
+  "80": { type: "unit", unit: "rem", value: 20 },
+  "96": { type: "unit", unit: "rem", value: 24 },
+  px: { type: "unit", unit: "px", value: 1 },
+  "0.5": { type: "unit", unit: "rem", value: 0.125 },
+  "1.5": { type: "unit", unit: "rem", value: 0.375 },
+  "2.5": { type: "unit", unit: "rem", value: 0.625 },
+  "3.5": { type: "unit", unit: "rem", value: 0.875 }
+};
+var padding = {
+  ...spacing
+};
+var margin = {
+  ...spacing,
+  auto: { type: "keyword", value: "auto" }
+};
+var width = {
+  ...spacing,
+  auto: { type: "keyword", value: "auto" },
+  "1/2": { type: "unit", unit: "%", value: 50 },
+  "1/3": { type: "unit", unit: "%", value: 33.333333 },
+  "2/3": { type: "unit", unit: "%", value: 66.666667 },
+  "1/4": { type: "unit", unit: "%", value: 25 },
+  "2/4": { type: "unit", unit: "%", value: 50 },
+  "3/4": { type: "unit", unit: "%", value: 75 },
+  "1/5": { type: "unit", unit: "%", value: 20 },
+  "2/5": { type: "unit", unit: "%", value: 40 },
+  "3/5": { type: "unit", unit: "%", value: 60 },
+  "4/5": { type: "unit", unit: "%", value: 80 },
+  "1/6": { type: "unit", unit: "%", value: 16.666667 },
+  "2/6": { type: "unit", unit: "%", value: 33.333333 },
+  "3/6": { type: "unit", unit: "%", value: 50 },
+  "4/6": { type: "unit", unit: "%", value: 66.666667 },
+  "5/6": { type: "unit", unit: "%", value: 83.333333 },
+  "1/12": { type: "unit", unit: "%", value: 8.333333 },
+  "2/12": { type: "unit", unit: "%", value: 16.666667 },
+  "3/12": { type: "unit", unit: "%", value: 25 },
+  "4/12": { type: "unit", unit: "%", value: 33.333333 },
+  "5/12": { type: "unit", unit: "%", value: 41.666667 },
+  "6/12": { type: "unit", unit: "%", value: 50 },
+  "7/12": { type: "unit", unit: "%", value: 58.333333 },
+  "8/12": { type: "unit", unit: "%", value: 66.666667 },
+  "9/12": { type: "unit", unit: "%", value: 75 },
+  "10/12": { type: "unit", unit: "%", value: 83.333333 },
+  "11/12": { type: "unit", unit: "%", value: 91.666667 },
+  full: { type: "unit", unit: "%", value: 100 },
+  screen: { type: "unit", unit: "vw", value: 100 },
+  min: { type: "keyword", value: "min-content" },
+  max: { type: "keyword", value: "max-content" },
+  fit: { type: "keyword", value: "fit-content" }
+};
+var maxWidth = {
+  "0": { type: "unit", unit: "rem", value: 0 },
+  none: { type: "keyword", value: "none" },
+  xs: { type: "unit", unit: "rem", value: 20 },
+  sm: { type: "unit", unit: "rem", value: 24 },
+  md: { type: "unit", unit: "rem", value: 28 },
+  lg: { type: "unit", unit: "rem", value: 32 },
+  xl: { type: "unit", unit: "rem", value: 36 },
+  "2xl": { type: "unit", unit: "rem", value: 42 },
+  "3xl": { type: "unit", unit: "rem", value: 48 },
+  "4xl": { type: "unit", unit: "rem", value: 56 },
+  "5xl": { type: "unit", unit: "rem", value: 64 },
+  "6xl": { type: "unit", unit: "rem", value: 72 },
+  "7xl": { type: "unit", unit: "rem", value: 80 },
+  full: { type: "unit", unit: "%", value: 100 },
+  min: { type: "keyword", value: "min-content" },
+  max: { type: "keyword", value: "max-content" },
+  fit: { type: "keyword", value: "fit-content" },
+  prose: { type: "unit", unit: "ch", value: 65 }
+};
+var height = {
+  ...spacing,
+  auto: { type: "keyword", value: "auto" },
+  "1/2": { type: "unit", unit: "%", value: 50 },
+  "1/3": { type: "unit", unit: "%", value: 33.333333 },
+  "2/3": { type: "unit", unit: "%", value: 66.666667 },
+  "1/4": { type: "unit", unit: "%", value: 25 },
+  "2/4": { type: "unit", unit: "%", value: 50 },
+  "3/4": { type: "unit", unit: "%", value: 75 },
+  "1/5": { type: "unit", unit: "%", value: 20 },
+  "2/5": { type: "unit", unit: "%", value: 40 },
+  "3/5": { type: "unit", unit: "%", value: 60 },
+  "4/5": { type: "unit", unit: "%", value: 80 },
+  "1/6": { type: "unit", unit: "%", value: 16.666667 },
+  "2/6": { type: "unit", unit: "%", value: 33.333333 },
+  "3/6": { type: "unit", unit: "%", value: 50 },
+  "4/6": { type: "unit", unit: "%", value: 66.666667 },
+  "5/6": { type: "unit", unit: "%", value: 83.333333 },
+  full: { type: "unit", unit: "%", value: 100 },
+  screen: { type: "unit", unit: "vh", value: 100 },
+  min: { type: "keyword", value: "min-content" },
+  max: { type: "keyword", value: "max-content" },
+  fit: { type: "keyword", value: "fit-content" }
+};
+var inset = {
+  ...spacing,
+  auto: { type: "keyword", value: "auto" },
+  "1/2": { type: "unit", unit: "%", value: 50 },
+  "1/3": { type: "unit", unit: "%", value: 33.333333 },
+  "2/3": { type: "unit", unit: "%", value: 66.666667 },
+  "1/4": { type: "unit", unit: "%", value: 25 },
+  "2/4": { type: "unit", unit: "%", value: 50 },
+  "3/4": { type: "unit", unit: "%", value: 75 },
+  full: { type: "unit", unit: "%", value: 100 }
+};
+var borderWidth = {
+  "0": { type: "unit", unit: "px", value: 0 },
+  "2": { type: "unit", unit: "px", value: 2 },
+  "4": { type: "unit", unit: "px", value: 4 },
+  "8": { type: "unit", unit: "px", value: 8 },
+  DEFAULT: { type: "unit", unit: "px", value: 1 }
+};
+var borderRadius = {
+  none: { type: "unit", unit: "px", value: 0 },
+  sm: { type: "unit", unit: "rem", value: 0.125 },
+  DEFAULT: { type: "unit", unit: "rem", value: 0.5 },
+  md: { type: "unit", unit: "rem", value: 0.375 },
+  lg: { type: "unit", unit: "rem", value: 0.5 },
+  xl: { type: "unit", unit: "rem", value: 0.75 },
+  "2xl": { type: "unit", unit: "rem", value: 1 },
+  "3xl": { type: "unit", unit: "rem", value: 1.5 },
+  full: { type: "unit", unit: "px", value: 9999 }
+};
+var colors = {
+  transparent: { type: "keyword", value: "transparent" },
+  current: { type: "keyword", value: "currentColor" },
+  inherit: { type: "keyword", value: "inherit" },
+  popover: { type: "rgb", alpha: 1, r: 255, g: 255, b: 255 },
+  popoverForeground: { type: "rgb", alpha: 1, r: 2, g: 8, b: 23 },
+  border: { type: "rgb", alpha: 1, r: 226, g: 232, b: 240 },
+  background: { type: "rgb", alpha: 1, r: 255, g: 255, b: 255 },
+  foreground: { type: "rgb", alpha: 1, r: 2, g: 8, b: 23 },
+  ring: { type: "rgb", alpha: 1, r: 148, g: 163, b: 184 },
+  mutedForeground: { type: "rgb", alpha: 1, r: 100, g: 116, b: 139 },
+  muted: { type: "rgb", alpha: 1, r: 241, g: 245, b: 249 },
+  primary: { type: "rgb", alpha: 1, r: 15, g: 23, b: 42 },
+  primaryForeground: { type: "rgb", alpha: 1, r: 248, g: 250, b: 252 },
+  destructive: { type: "rgb", alpha: 1, r: 239, g: 68, b: 68 },
+  destructiveForeground: { type: "rgb", alpha: 1, r: 248, g: 250, b: 252 },
+  accent: { type: "rgb", alpha: 1, r: 241, g: 245, b: 249 },
+  accentForeground: { type: "rgb", alpha: 1, r: 15, g: 23, b: 42 },
+  input: { type: "rgb", alpha: 1, r: 226, g: 232, b: 240 },
+  secondary: { type: "rgb", alpha: 1, r: 241, g: 245, b: 249 },
+  secondaryForeground: { type: "rgb", alpha: 1, r: 15, g: 23, b: 42 }
+};
+var zIndex = {
+  "0": { type: "unit", unit: "number", value: 0 },
+  "10": { type: "unit", unit: "number", value: 10 },
+  "20": { type: "unit", unit: "number", value: 20 },
+  "30": { type: "unit", unit: "number", value: 30 },
+  "40": { type: "unit", unit: "number", value: 40 },
+  "50": { type: "unit", unit: "number", value: 50 },
+  auto: { type: "keyword", value: "auto" }
+};
+var opacity = {
+  "0": { type: "unit", unit: "number", value: 0 },
+  "5": { type: "unit", unit: "number", value: 0.05 },
+  "10": { type: "unit", unit: "number", value: 0.1 },
+  "20": { type: "unit", unit: "number", value: 0.2 },
+  "25": { type: "unit", unit: "number", value: 0.25 },
+  "30": { type: "unit", unit: "number", value: 0.3 },
+  "40": { type: "unit", unit: "number", value: 0.4 },
+  "50": { type: "unit", unit: "number", value: 0.5 },
+  "60": { type: "unit", unit: "number", value: 0.6 },
+  "70": { type: "unit", unit: "number", value: 0.7 },
+  "75": { type: "unit", unit: "number", value: 0.75 },
+  "80": { type: "unit", unit: "number", value: 0.8 },
+  "90": { type: "unit", unit: "number", value: 0.9 },
+  "95": { type: "unit", unit: "number", value: 0.95 },
+  "100": { type: "unit", unit: "number", value: 1 }
+};
+var cursor = {
+  auto: { type: "keyword", value: "auto" },
+  default: { type: "keyword", value: "default" },
+  pointer: { type: "keyword", value: "pointer" },
+  wait: { type: "keyword", value: "wait" },
+  text: { type: "keyword", value: "text" },
+  move: { type: "keyword", value: "move" },
+  help: { type: "keyword", value: "help" },
+  "not-allowed": { type: "keyword", value: "not-allowed" },
+  none: { type: "keyword", value: "none" },
+  "context-menu": { type: "keyword", value: "context-menu" },
+  progress: { type: "keyword", value: "progress" },
+  cell: { type: "keyword", value: "cell" },
+  crosshair: { type: "keyword", value: "crosshair" },
+  "vertical-text": { type: "keyword", value: "vertical-text" },
+  alias: { type: "keyword", value: "alias" },
+  copy: { type: "keyword", value: "copy" },
+  "no-drop": { type: "keyword", value: "no-drop" },
+  grab: { type: "keyword", value: "grab" },
+  grabbing: { type: "keyword", value: "grabbing" },
+  "all-scroll": { type: "keyword", value: "all-scroll" },
+  "col-resize": { type: "keyword", value: "col-resize" },
+  "row-resize": { type: "keyword", value: "row-resize" },
+  "n-resize": { type: "keyword", value: "n-resize" },
+  "e-resize": { type: "keyword", value: "e-resize" },
+  "s-resize": { type: "keyword", value: "s-resize" },
+  "w-resize": { type: "keyword", value: "w-resize" },
+  "ne-resize": { type: "keyword", value: "ne-resize" },
+  "nw-resize": { type: "keyword", value: "nw-resize" },
+  "se-resize": { type: "keyword", value: "se-resize" },
+  "sw-resize": { type: "keyword", value: "sw-resize" },
+  "ew-resize": { type: "keyword", value: "ew-resize" },
+  "ns-resize": { type: "keyword", value: "ns-resize" },
+  "nesw-resize": { type: "keyword", value: "nesw-resize" },
+  "nwse-resize": { type: "keyword", value: "nwse-resize" },
+  "zoom-in": { type: "keyword", value: "zoom-in" },
+  "zoom-out": { type: "keyword", value: "zoom-out" }
+};
+var lineHeight = {
+  "3": { type: "unit", unit: "rem", value: 0.75 },
+  "4": { type: "unit", unit: "rem", value: 1 },
+  "5": { type: "unit", unit: "rem", value: 1.25 },
+  "6": { type: "unit", unit: "rem", value: 1.5 },
+  "7": { type: "unit", unit: "rem", value: 1.75 },
+  "8": { type: "unit", unit: "rem", value: 2 },
+  "9": { type: "unit", unit: "rem", value: 2.25 },
+  "10": { type: "unit", unit: "rem", value: 2.5 },
+  none: { type: "unit", unit: "number", value: 1 },
+  tight: { type: "unit", unit: "number", value: 1.25 },
+  snug: { type: "unit", unit: "number", value: 1.375 },
+  normal: { type: "unit", unit: "number", value: 1.5 },
+  relaxed: { type: "unit", unit: "number", value: 1.625 },
+  loose: { type: "unit", unit: "number", value: 2 }
+};
+var letterSpacing = {
+  tighter: { type: "unit", unit: "em", value: -0.05 },
+  tight: { type: "unit", unit: "em", value: -0.025 },
+  normal: { type: "unit", unit: "em", value: 0 },
+  wide: { type: "unit", unit: "em", value: 0.025 },
+  wider: { type: "unit", unit: "em", value: 0.05 },
+  widest: { type: "unit", unit: "em", value: 0.1 }
+};
+var listStyleType = {
+  none: { type: "keyword", value: "none" },
+  disc: { type: "keyword", value: "disc" },
+  decimal: { type: "keyword", value: "decimal" }
+};
+var lineClamp = {
+  "1": { type: "unit", unit: "number", value: 1 },
+  "2": { type: "unit", unit: "number", value: 2 },
+  "3": { type: "unit", unit: "number", value: 3 },
+  "4": { type: "unit", unit: "number", value: 4 },
+  "5": { type: "unit", unit: "number", value: 5 },
+  "6": { type: "unit", unit: "number", value: 6 }
+};
+var ringWidth = {
+  "0": { type: "unit", unit: "px", value: 0 },
+  "1": { type: "unit", unit: "px", value: 1 },
+  "2": { type: "unit", unit: "px", value: 2 },
+  "4": { type: "unit", unit: "px", value: 4 },
+  "8": { type: "unit", unit: "px", value: 8 },
+  DEFAULT: { type: "unit", unit: "px", value: 3 }
+};
+var ringOffsetWidth = {
+  "0": { type: "unit", unit: "px", value: 0 },
+  "1": { type: "unit", unit: "px", value: 1 },
+  "2": { type: "unit", unit: "px", value: 2 },
+  "4": { type: "unit", unit: "px", value: 4 },
+  "8": { type: "unit", unit: "px", value: 8 }
+};
+var boxShadow = {
+  sm: {
+    type: "layers",
+    value: [
+      {
+        type: "tuple",
+        value: [
+          { type: "unit", value: 0, unit: "number" },
+          { type: "unit", value: 1, unit: "px" },
+          { type: "unit", value: 2, unit: "px" },
+          { type: "unit", value: 0, unit: "number" },
+          { type: "rgb", alpha: 0.05, r: 0, g: 0, b: 0 }
+        ]
+      }
+    ]
+  },
+  DEFAULT: {
+    type: "layers",
+    value: [
+      {
+        type: "tuple",
+        value: [
+          { type: "unit", value: 0, unit: "number" },
+          { type: "unit", value: 1, unit: "px" },
+          { type: "unit", value: 3, unit: "px" },
+          { type: "unit", value: 0, unit: "number" },
+          { type: "rgb", alpha: 0.1, r: 0, g: 0, b: 0 }
+        ]
+      },
+      {
+        type: "tuple",
+        value: [
+          { type: "unit", value: 0, unit: "number" },
+          { type: "unit", value: 1, unit: "px" },
+          { type: "unit", value: 2, unit: "px" },
+          { type: "unit", value: -1, unit: "px" },
+          { type: "rgb", alpha: 0.1, r: 0, g: 0, b: 0 }
+        ]
+      }
+    ]
+  },
+  md: {
+    type: "layers",
+    value: [
+      {
+        type: "tuple",
+        value: [
+          { type: "unit", value: 0, unit: "number" },
+          { type: "unit", value: 4, unit: "px" },
+          { type: "unit", value: 6, unit: "px" },
+          { type: "unit", value: -1, unit: "px" },
+          { type: "rgb", alpha: 0.1, r: 0, g: 0, b: 0 }
+        ]
+      },
+      {
+        type: "tuple",
+        value: [
+          { type: "unit", value: 0, unit: "number" },
+          { type: "unit", value: 2, unit: "px" },
+          { type: "unit", value: 4, unit: "px" },
+          { type: "unit", value: -2, unit: "px" },
+          { type: "rgb", alpha: 0.1, r: 0, g: 0, b: 0 }
+        ]
+      }
+    ]
+  },
+  lg: {
+    type: "layers",
+    value: [
+      {
+        type: "tuple",
+        value: [
+          { type: "unit", value: 0, unit: "number" },
+          { type: "unit", value: 10, unit: "px" },
+          { type: "unit", value: 15, unit: "px" },
+          { type: "unit", value: -3, unit: "px" },
+          { type: "rgb", alpha: 0.1, r: 0, g: 0, b: 0 }
+        ]
+      },
+      {
+        type: "tuple",
+        value: [
+          { type: "unit", value: 0, unit: "number" },
+          { type: "unit", value: 4, unit: "px" },
+          { type: "unit", value: 6, unit: "px" },
+          { type: "unit", value: -4, unit: "px" },
+          { type: "rgb", alpha: 0.1, r: 0, g: 0, b: 0 }
+        ]
+      }
+    ]
+  },
+  xl: {
+    type: "layers",
+    value: [
+      {
+        type: "tuple",
+        value: [
+          { type: "unit", value: 0, unit: "number" },
+          { type: "unit", value: 20, unit: "px" },
+          { type: "unit", value: 25, unit: "px" },
+          { type: "unit", value: -5, unit: "px" },
+          { type: "rgb", alpha: 0.1, r: 0, g: 0, b: 0 }
+        ]
+      },
+      {
+        type: "tuple",
+        value: [
+          { type: "unit", value: 0, unit: "number" },
+          { type: "unit", value: 8, unit: "px" },
+          { type: "unit", value: 10, unit: "px" },
+          { type: "unit", value: -6, unit: "px" },
+          { type: "rgb", alpha: 0.1, r: 0, g: 0, b: 0 }
+        ]
+      }
+    ]
+  },
+  "2xl": {
+    type: "layers",
+    value: [
+      {
+        type: "tuple",
+        value: [
+          { type: "unit", value: 0, unit: "number" },
+          { type: "unit", value: 25, unit: "px" },
+          { type: "unit", value: 50, unit: "px" },
+          { type: "unit", value: -12, unit: "px" },
+          { type: "rgb", alpha: 0.25, r: 0, g: 0, b: 0 }
+        ]
+      }
+    ]
+  },
+  inner: {
+    type: "layers",
+    value: [
+      {
+        type: "tuple",
+        value: [
+          { type: "keyword", value: "inset" },
+          { type: "unit", value: 0, unit: "number" },
+          { type: "unit", value: 2, unit: "px" },
+          { type: "unit", value: 4, unit: "px" },
+          { type: "unit", value: 0, unit: "number" },
+          { type: "rgb", alpha: 0.05, r: 0, g: 0, b: 0 }
+        ]
+      }
+    ]
+  },
+  none: {
+    type: "layers",
+    value: [{ type: "tuple", value: [{ type: "keyword", value: "none" }] }]
+  }
+};
+var blur = {
+  sm: { type: "unparsed", value: "blur(0 1px 2px 0 rgb(0 0 0 / 0.05))" },
+  DEFAULT: {
+    type: "unparsed",
+    value: "blur(0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1))"
+  },
+  md: {
+    type: "unparsed",
+    value: "blur(0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1))"
+  },
+  lg: {
+    type: "unparsed",
+    value: "blur(0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1))"
+  },
+  xl: {
+    type: "unparsed",
+    value: "blur(0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1))"
+  },
+  "2xl": {
+    type: "unparsed",
+    value: "blur(0 25px 50px -12px rgb(0 0 0 / 0.25))"
+  },
+  inner: {
+    type: "unparsed",
+    value: "blur(inset 0 2px 4px 0 rgb(0 0 0 / 0.05))"
+  },
+  none: { type: "unparsed", value: "blur(none)" }
+};
+var fontSize = {
+  xs: { type: "unit", unit: "rem", value: 0.75 },
+  sm: { type: "unit", unit: "rem", value: 0.875 },
+  base: { type: "unit", unit: "rem", value: 1 },
+  lg: { type: "unit", unit: "rem", value: 1.125 },
+  xl: { type: "unit", unit: "rem", value: 1.25 },
+  "2xl": { type: "unit", unit: "rem", value: 1.5 },
+  "3xl": { type: "unit", unit: "rem", value: 1.875 },
+  "4xl": { type: "unit", unit: "rem", value: 2.25 },
+  "5xl": { type: "unit", unit: "rem", value: 3 },
+  "6xl": { type: "unit", unit: "rem", value: 3.75 },
+  "7xl": { type: "unit", unit: "rem", value: 4.5 },
+  "8xl": { type: "unit", unit: "rem", value: 6 },
+  "9xl": { type: "unit", unit: "rem", value: 8 }
+};
+var fontSizeLineHeight = {
+  xs: { type: "unit", unit: "rem", value: 1 },
+  sm: { type: "unit", unit: "rem", value: 1.25 },
+  base: { type: "unit", unit: "rem", value: 1.5 },
+  lg: { type: "unit", unit: "rem", value: 1.75 },
+  xl: { type: "unit", unit: "rem", value: 1.75 },
+  "2xl": { type: "unit", unit: "rem", value: 2 },
+  "3xl": { type: "unit", unit: "rem", value: 2.25 },
+  "4xl": { type: "unit", unit: "rem", value: 2.5 },
+  "5xl": { type: "unit", unit: "number", value: 1 },
+  "6xl": { type: "unit", unit: "number", value: 1 },
+  "7xl": { type: "unit", unit: "number", value: 1 },
+  "8xl": { type: "unit", unit: "number", value: 1 },
+  "9xl": { type: "unit", unit: "number", value: 1 }
+};
+
+// src/theme/tailwind-classes.ts
+var property = (property2, value) => {
+  if (value.startsWith("--")) {
+    return {
+      property: property2,
+      value: { type: "var", value: value.slice(2), fallbacks: [] }
+    };
+  }
+  return {
+    property: property2,
+    value: { type: "unparsed", value }
+  };
+};
+var preflight = () => {
+  const borderColorValue = colors.border;
+  return [
+    {
+      property: "borderTopStyle",
+      value: { type: "keyword", value: "solid" }
+    },
+    {
+      property: "borderRightStyle",
+      value: { type: "keyword", value: "solid" }
+    },
+    {
+      property: "borderBottomStyle",
+      value: { type: "keyword", value: "solid" }
+    },
+    {
+      property: "borderLeftStyle",
+      value: { type: "keyword", value: "solid" }
+    },
+    {
+      property: "borderTopColor",
+      value: borderColorValue
+    },
+    {
+      property: "borderRightColor",
+      value: borderColorValue
+    },
+    {
+      property: "borderBottomColor",
+      value: borderColorValue
+    },
+    {
+      property: "borderLeftColor",
+      value: borderColorValue
+    }
+  ];
+};
+var z = (value) => {
+  return [
+    {
+      property: "zIndex",
+      value: zIndex[value]
+    }
+  ];
+};
+var overflow = (value) => [
+  {
+    property: "overflow",
+    value: { type: "keyword", value }
+  }
+];
+var rounded = (value = "DEFAULT") => {
+  const styleValue = borderRadius[value];
+  return [
+    { property: "borderTopLeftRadius", value: styleValue },
+    { property: "borderTopRightRadius", value: styleValue },
+    { property: "borderBottomRightRadius", value: styleValue },
+    { property: "borderBottomLeftRadius", value: styleValue }
+  ];
+};
+var border = (borderWidthOrColor) => {
+  if (typeof borderWidthOrColor === "number" || borderWidthOrColor === void 0) {
+    const styleValue2 = borderWidth[borderWidthOrColor ?? "DEFAULT"];
+    return [
+      ...preflight(),
+      { property: "borderTopWidth", value: styleValue2 },
+      { property: "borderRightWidth", value: styleValue2 },
+      { property: "borderBottomWidth", value: styleValue2 },
+      { property: "borderLeftWidth", value: styleValue2 }
+    ];
+  }
+  const styleValue = colors[borderWidthOrColor];
+  return [
+    { property: "borderTopColor", value: styleValue },
+    { property: "borderRightColor", value: styleValue },
+    { property: "borderBottomColor", value: styleValue },
+    { property: "borderLeftColor", value: styleValue }
+  ];
+};
+var borderB = (borderWidthOrColor) => {
+  let widthValue = { type: "unit", value: 1, unit: "number" };
+  let colorValue = colors.border;
+  if (typeof borderWidthOrColor === "number" || borderWidthOrColor === void 0) {
+    widthValue = borderWidth[borderWidthOrColor ?? "DEFAULT"];
+  } else {
+    colorValue = colors[borderWidthOrColor];
+  }
+  return [
+    {
+      property: "borderBottomWidth",
+      value: widthValue
+    },
+    {
+      property: "borderBottomStyle",
+      value: { type: "keyword", value: "solid" }
+    },
+    {
+      property: "borderBottomColor",
+      value: colorValue
+    }
+  ];
+};
+var paddingProperty = (property2) => (padding2) => {
+  return [{ property: property2, value: padding[padding2] }];
+};
+var pt = (padding2) => {
+  return paddingProperty("paddingTop")(padding2);
+};
+var pb = (padding2) => {
+  return paddingProperty("paddingBottom")(padding2);
+};
+var pl = (padding2) => {
+  return paddingProperty("paddingLeft")(padding2);
+};
+var pr = (padding2) => {
+  return paddingProperty("paddingRight")(padding2);
+};
+var px = (padding2) => {
+  return [pl(padding2), pr(padding2)].flat();
+};
+var py = (padding2) => {
+  return [pt(padding2), pb(padding2)].flat();
+};
+var p = (padding2) => {
+  return [px(padding2), py(padding2)].flat();
+};
+var marginProperty = (property2) => (margin2) => {
+  return [{ property: property2, value: margin[margin2] }];
+};
+var ml = (margin2) => {
+  return marginProperty("marginLeft")(margin2);
+};
+var mr = (margin2) => {
+  return marginProperty("marginRight")(margin2);
+};
+var mt = (margin2) => {
+  return marginProperty("marginTop")(margin2);
+};
+var mb = (margin2) => {
+  return marginProperty("marginBottom")(margin2);
+};
+var mx = (margin2) => {
+  return [ml(margin2), mr(margin2)].flat();
+};
+var my = (margin2) => {
+  return [mt(margin2), mb(margin2)].flat();
+};
+var m = (margin2) => {
+  return [mx(margin2), my(margin2)].flat();
+};
+var w = (spacing2) => {
+  return [{ property: "width", value: width[spacing2] }];
+};
+var h = (spacing2) => {
+  return [{ property: "height", value: height[spacing2] }];
+};
+var opacity2 = (opacity3) => {
+  return [
+    {
+      property: "opacity",
+      value: opacity[opacity3]
+    }
+  ];
+};
+var cursor2 = (cursor3) => {
+  return [
+    {
+      property: "cursor",
+      value: cursor[cursor3]
+    }
+  ];
+};
+var maxW = (spacing2) => {
+  return [{ property: "maxWidth", value: maxWidth[spacing2] }];
+};
+var positionStyle = (property2, spacing2) => {
+  return { property: property2, value: inset[spacing2] };
+};
+var top = (spacing2) => [positionStyle("top", spacing2)];
+var right = (spacing2) => [positionStyle("right", spacing2)];
+var left = (spacing2) => [positionStyle("left", spacing2)];
+var inset2 = (spacing2) => [
+  positionStyle("left", spacing2),
+  positionStyle("right", spacing2),
+  positionStyle("top", spacing2),
+  positionStyle("bottom", spacing2)
+];
+var aspect = (value) => {
+  let unparsed = value;
+  if (value === "square") {
+    unparsed = "1 / 1";
+  }
+  if (value === "video") {
+    unparsed = "16 / 9";
+  }
+  return [
+    {
+      property: "aspectRatio",
+      value: { type: "unparsed", value: unparsed }
+    }
+  ];
+};
+var backdropBlur = (blur2) => {
+  return [{ property: "backdropFilter", value: blur[blur2] }];
+};
+var list = (listStyle) => {
+  return [{ property: "listStyleType", value: listStyleType[listStyle] }];
+};
+var select = (_selectValue) => {
+  return [
+    {
+      property: "userSelect",
+      value: {
+        type: "keyword",
+        value: "none"
+      }
+    }
+  ];
+};
+var bg = (color, alpha) => {
+  const value = colors[color];
+  if (alpha !== void 0 && value.type === "rgb") {
+    value.alpha = alpha / 100;
+  }
+  return [
+    {
+      property: "backgroundColor",
+      value
+    }
+  ];
+};
+var fixed = () => {
+  return [{ property: "position", value: { type: "keyword", value: "fixed" } }];
+};
+var relative = () => {
+  return [
+    { property: "position", value: { type: "keyword", value: "relative" } }
+  ];
+};
+var absolute = () => {
+  return [
+    { property: "position", value: { type: "keyword", value: "absolute" } }
+  ];
+};
+var alignItems = {
+  start: "flex-start",
+  end: "flex-end",
+  center: "center",
+  baseline: "baseline",
+  stretch: "stretch"
+};
+var items = (alignItemsParam) => {
+  return [
+    {
+      property: "alignItems",
+      value: {
+        type: "keyword",
+        value: alignItems[alignItemsParam]
+      }
+    }
+  ];
+};
+var justifyContent = {
+  start: "flex-start",
+  end: "flex-end",
+  center: "center",
+  between: "space-between",
+  around: "space-around",
+  evenly: "space-evenly",
+  stretch: "stretch"
+};
+var justify = (justifyContentParam) => {
+  return [
+    {
+      property: "justifyContent",
+      value: {
+        type: "keyword",
+        value: justifyContent[justifyContentParam]
+      }
+    }
+  ];
+};
+var inlineFlex = () => {
+  return [
+    { property: "display", value: { type: "keyword", value: "inline-flex" } }
+  ];
+};
+var block = () => {
+  return [{ property: "display", value: { type: "keyword", value: "block" } }];
+};
+var flexDirection = { row: "row", col: "column" };
+var flex = (flexParam) => {
+  if (flexParam === void 0) {
+    return [{ property: "display", value: { type: "keyword", value: "flex" } }];
+  }
+  if (flexParam === 1) {
+    return [
+      {
+        property: "flexGrow",
+        value: { type: "unit", value: 1, unit: "number" }
+      },
+      {
+        property: "flexShrink",
+        value: { type: "unit", value: 1, unit: "number" }
+      },
+      {
+        property: "flexBasis",
+        value: { type: "unit", value: 0, unit: "%" }
+      }
+    ];
+  }
+  if (flexParam === "auto") {
+    return [
+      {
+        property: "flexGrow",
+        value: { type: "unit", value: 1, unit: "number" }
+      },
+      {
+        property: "flexShrink",
+        value: { type: "unit", value: 1, unit: "number" }
+      },
+      {
+        property: "flexBasis",
+        value: { type: "keyword", value: "auto" }
+      }
+    ];
+  }
+  if (flexParam === "initial") {
+    return [
+      {
+        property: "flexGrow",
+        value: { type: "unit", value: 0, unit: "number" }
+      },
+      {
+        property: "flexShrink",
+        value: { type: "unit", value: 1, unit: "number" }
+      },
+      {
+        property: "flexBasis",
+        value: { type: "keyword", value: "auto" }
+      }
+    ];
+  }
+  if (flexParam === "none") {
+    return [
+      {
+        property: "flexGrow",
+        value: { type: "unit", value: 0, unit: "number" }
+      },
+      {
+        property: "flexShrink",
+        value: { type: "unit", value: 0, unit: "number" }
+      },
+      {
+        property: "flexBasis",
+        value: { type: "keyword", value: "auto" }
+      }
+    ];
+  }
+  return [
+    {
+      property: "flexDirection",
+      value: {
+        type: "keyword",
+        value: flexDirection[flexParam]
+      }
+    }
+  ];
+};
+var grow = () => {
+  return [
+    {
+      property: "flexGrow",
+      value: { type: "unit", value: 1, unit: "number" }
+    }
+  ];
+};
+var shrink = (value) => {
+  return [
+    {
+      property: "flexGrow",
+      value: { type: "unit", value, unit: "number" }
+    }
+  ];
+};
+var gap = (gapValue) => {
+  const value = spacing[gapValue];
+  return [
+    { property: "rowGap", value },
+    { property: "columnGap", value }
+  ];
+};
+var lineClamp2 = (lineClampValue) => {
+  return [
+    {
+      property: "overflow",
+      value: {
+        type: "keyword",
+        value: "hidden"
+      }
+    },
+    {
+      property: "display",
+      value: {
+        type: "keyword",
+        value: "-webkit-box"
+      }
+    },
+    {
+      property: "-webkit-box-orient",
+      value: {
+        type: "keyword",
+        value: "vertical"
+      }
+    },
+    {
+      property: "-webkit-line-clamp",
+      value: lineClamp[lineClampValue]
+    }
+  ];
+};
+var leading = (lineHeight2) => {
+  return [{ property: "lineHeight", value: lineHeight[lineHeight2] }];
+};
+var tracking = (letterSpacing2) => {
+  return [
+    { property: "letterSpacing", value: letterSpacing[letterSpacing2] }
+  ];
+};
+var outline = (_value) => {
+  return [
+    {
+      property: "outlineWidth",
+      value: { type: "unit", value: 2, unit: "px" }
+    },
+    {
+      property: "outlineStyle",
+      value: { type: "keyword", value: "solid" }
+    },
+    {
+      property: "outlineColor",
+      value: { type: "keyword", value: "transparent" }
+    },
+    {
+      property: "outlineOffset",
+      value: { type: "unit", value: 2, unit: "px" }
+    }
+  ];
+};
+var textSizes = Object.keys(fontSize);
+var isTextSize = (value) => textSizes.includes(value);
+var text = (sizeOrColor) => {
+  if (isTextSize(sizeOrColor)) {
+    return [
+      { property: "fontSize", value: fontSize[sizeOrColor] },
+      { property: "lineHeight", value: fontSizeLineHeight[sizeOrColor] }
+    ];
+  }
+  return [
+    {
+      property: "color",
+      value: colors[sizeOrColor]
+    }
+  ];
+};
+var noUnderline = () => {
+  return [
+    {
+      property: "textDecorationLine",
+      value: { type: "keyword", value: "none" }
+    }
+  ];
+};
+var underline = () => {
+  return [
+    {
+      property: "textDecorationLine",
+      value: { type: "keyword", value: "underline" }
+    }
+  ];
+};
+var weights = {
+  thin: "100",
+  extralight: "200",
+  light: "300",
+  normal: "400",
+  medium: "500",
+  semibold: "600",
+  bold: "700",
+  extrabold: "800",
+  black: "900"
+};
+var font = (weight) => {
+  return [
+    {
+      property: "fontWeight",
+      value: { type: "keyword", value: weights[weight] }
+    }
+  ];
+};
+var whitespace = (value) => {
+  return [
+    {
+      property: "whiteSpace",
+      value: { type: "keyword", value }
+    }
+  ];
+};
+var shadow = (shadowSize) => {
+  return [
+    {
+      property: "boxShadow",
+      value: boxShadow[shadowSize]
+    }
+  ];
+};
+var ring = (ringColor, ringWidth2, ringOffsetColor = "background", ringOffsetWidth2 = 0) => {
+  const ringWidthStyleValue = ringWidth[ringWidth2];
+  const ringOffsetWidthStyleValue = ringOffsetWidth[ringOffsetWidth2];
+  const ringColorStyleValue = colors[ringColor];
+  const ringOffsetColorStyleValue = colors[ringOffsetColor];
+  const ringOffsetShadow = {
+    type: "tuple",
+    value: [
+      { type: "unit", value: 0, unit: "number" },
+      { type: "unit", value: 0, unit: "number" },
+      { type: "unit", value: 0, unit: "number" },
+      ringOffsetWidthStyleValue,
+      ringOffsetColorStyleValue
+    ]
+  };
+  const ringWidthValue = ringWidthStyleValue.type === "unit" ? ringWidthStyleValue.value : 0;
+  const ringOffsetWidthValue = ringOffsetWidthStyleValue.type === "unit" ? ringOffsetWidthStyleValue.value : 0;
+  const ringShadow = {
+    type: "tuple",
+    value: [
+      { type: "unit", value: 0, unit: "number" },
+      { type: "unit", value: 0, unit: "number" },
+      { type: "unit", value: 0, unit: "number" },
+      {
+        type: "unit",
+        value: ringWidthValue + ringOffsetWidthValue,
+        unit: ringWidthStyleValue.type === "unit" ? ringWidthStyleValue.unit : "number"
+      },
+      ringColorStyleValue
+    ]
+  };
+  return [
+    {
+      property: "boxShadow",
+      value: {
+        type: "layers",
+        value: [ringOffsetShadow, ringShadow]
+      }
+    }
+  ];
+};
+var pointerEvents = (value) => {
+  return [{ property: "pointerEvents", value: { type: "keyword", value } }];
+};
+var transition = (value) => {
+  if (value === "none") {
+    return [
+      {
+        property: "transitionProperty",
+        value: { type: "keyword", value: "all" }
+      }
+    ];
+  }
+  return [
+    {
+      property: "transitionProperty",
+      value: { type: "keyword", value }
+    },
+    {
+      property: "transitionTimingFunction",
+      value: { type: "unparsed", value: "cubic-bezier(0.4, 0, 0.2, 1)" }
+    },
+    {
+      property: "transitionDuration",
+      value: { type: "unparsed", value: "150ms" }
+    }
+  ];
+};
+var duration = (ms) => {
+  return [
+    {
+      property: "transitionDuration",
+      value: { type: "unit", value: ms, unit: "ms" }
+    }
+  ];
+};
+var hover = (value) => {
+  return value.map((decl) => ({
+    ...decl,
+    state: ":hover"
+  }));
+};
+var focus = (value) => {
+  return value.map((decl) => ({
+    ...decl,
+    state: ":focus"
+  }));
+};
+var focusVisible = (value) => {
+  return value.map((decl) => ({
+    ...decl,
+    state: ":focus-visible"
+  }));
+};
+var disabled = (value) => {
+  return value.map((decl) => ({
+    ...decl,
+    state: ":disabled"
+  }));
+};
+var state = (value, state2) => {
+  return value.map((decl) => ({
+    ...decl,
+    state: state2
+  }));
+};
+
+// src/theme/styles.ts
+var getButtonStyles = (variant, size = "default") => {
+  const styles = [
+    // 'inline-flex items-center justify-center rounded-md text-sm font-medium
+    // ring-offset-background transition-colors
+    // focus-visible:outline-none focus-visible:ring-2
+    // focus-visible:ring-ring focus-visible:ring-offset-2
+    // disabled:pointer-events-none disabled:opacity-50'
+    border(0),
+    bg("transparent"),
+    inlineFlex(),
+    items("center"),
+    justify("center"),
+    rounded("md"),
+    text("sm"),
+    font("medium"),
+    focusVisible(
+      [outline("none"), ring("ring", 2, "background", 2)].flat()
+    ),
+    state([pointerEvents("none"), opacity2(50)].flat(), ":disabled")
+  ].flat();
+  let variantStyles = [];
+  if (variant === "ghost") {
+    variantStyles = [
+      state([bg("accent"), text("accentForeground")].flat(), ":hover")
+    ].flat();
+  }
+  if (variant === "outline") {
+    variantStyles = [
+      border(),
+      border("input"),
+      bg("background"),
+      state(
+        [bg("accent", 90), text("accentForeground")].flat(),
+        ":hover"
+      )
+    ].flat();
+  }
+  let sizeStyles = [];
+  if (size === "icon") {
+    sizeStyles = [h(10), w(10)].flat();
+  }
+  if (size === "sm") {
+    sizeStyles = [h(10), px(3)].flat();
+  }
+  if (size === "default") {
+    sizeStyles = [h(10), px(4), py(2)].flat();
+  }
+  return [...styles, ...variantStyles, ...sizeStyles];
+};
+var buttonReset = [
+  {
+    property: "backgroundColor",
+    value: { type: "keyword", value: "transparent" }
+  },
+  {
+    property: "backgroundImage",
+    value: { type: "keyword", value: "none" }
+  },
+  border(0),
+  p(0)
+].flat();
+
+// src/collapsible.ws.ts
+var presetStyle = {
+  div
+};
+var metaCollapsible = {
+  category: "radix",
+  order: 5,
+  type: "container",
+  presetStyle,
+  icon: CollapsibleIcon,
+  description: "An interactive component which expands and collapses some content, triggered by a button.",
+  template: [
+    {
+      type: "instance",
+      component: "Collapsible",
+      dataSources: {
+        collapsibleOpen: { type: "variable", initialValue: false }
+      },
+      props: [
+        {
+          type: "dataSource",
+          name: "open",
+          dataSourceName: "collapsibleOpen"
+        },
+        {
+          name: "onOpenChange",
+          type: "action",
+          value: [
+            { type: "execute", args: ["open"], code: `collapsibleOpen = open` }
+          ]
+        }
+      ],
+      children: [
+        {
+          type: "instance",
+          component: "CollapsibleTrigger",
+          children: [
+            {
+              type: "instance",
+              component: "Button",
+              styles: getButtonStyles("outline"),
+              children: [{ type: "text", value: "Click to toggle content" }]
+            }
+          ]
+        },
+        {
+          type: "instance",
+          component: "CollapsibleContent",
+          children: [
+            {
+              type: "instance",
+              component: "Text",
+              children: [{ type: "text", value: "Collapsible Content" }]
+            }
+          ]
+        }
+      ]
+    }
+  ]
+};
+var metaCollapsibleTrigger = {
+  category: "hidden",
+  type: "container",
+  icon: TriggerIcon,
+  stylable: false,
+  detachable: false
+};
+var metaCollapsibleContent = {
+  category: "hidden",
+  type: "container",
+  presetStyle,
+  icon: ContentIcon,
+  detachable: false
+};
+var propsMetaCollapsible = {
+  props: {
+    ...propsCollapsible,
+    onOpenChange: {
+      type: "action",
+      control: "action",
+      required: false
+    }
+  },
+  initialProps: ["open", "onOpenChange"]
+};
+
+// src/dialog.ws.tsx
+import {
+  DialogIcon,
+  TriggerIcon as TriggerIcon2,
+  ContentIcon as ContentIcon2,
+  OverlayIcon,
+  HeadingIcon,
+  TextIcon,
+  ButtonElementIcon,
+  LargeXIcon
+} from "@webstudio-is/icons/svg";
+import {
+  defaultStates
+} from "@webstudio-is/react-sdk";
+import { div as div2, button, h2, p as p2 } from "@webstudio-is/react-sdk/css-normalize";
+var presetStyle2 = {
+  div: div2
+};
+var titlePresetStyle = {
+  h2
+};
+var descriptionPresetStyle = {
+  p: p2
+};
+var metaDialogTrigger = {
+  category: "hidden",
+  type: "container",
+  icon: TriggerIcon2,
+  stylable: false,
+  detachable: false
+};
+var metaDialogContent = {
+  category: "hidden",
+  type: "container",
+  presetStyle: presetStyle2,
+  icon: ContentIcon2,
+  detachable: false
+};
+var metaDialogOverlay = {
+  category: "hidden",
+  type: "container",
+  presetStyle: presetStyle2,
+  icon: OverlayIcon,
+  detachable: false
+};
+var metaDialogTitle = {
+  category: "hidden",
+  type: "container",
+  presetStyle: titlePresetStyle,
+  icon: HeadingIcon
+};
+var metaDialogDescription = {
+  category: "hidden",
+  type: "container",
+  presetStyle: descriptionPresetStyle,
+  icon: TextIcon
+};
+var metaDialogClose = {
+  category: "hidden",
+  type: "container",
+  presetStyle: {
+    button: [buttonReset, button].flat()
+  },
+  states: defaultStates,
+  icon: ButtonElementIcon,
+  label: "Close Button"
+};
+var metaDialog = {
+  category: "radix",
+  order: 4,
+  type: "container",
+  icon: DialogIcon,
+  stylable: false,
+  description: "Displays content with an overlay that covers the window, triggered by a button. Clicking the overlay will close the dialog.",
+  template: [
+    {
+      type: "instance",
+      component: "Dialog",
+      dataSources: {
+        dialogOpen: { type: "variable", initialValue: false }
+      },
+      props: [
+        {
+          type: "dataSource",
+          name: "open",
+          dataSourceName: "dialogOpen"
+        },
+        {
+          name: "onOpenChange",
+          type: "action",
+          value: [
+            { type: "execute", args: ["open"], code: `dialogOpen = open` }
+          ]
+        }
+      ],
+      children: [
+        {
+          type: "instance",
+          component: "DialogTrigger",
+          children: [
+            {
+              type: "instance",
+              component: "Button",
+              styles: getButtonStyles("outline"),
+              children: [{ type: "text", value: "Button" }]
+            }
+          ]
+        },
+        {
+          type: "instance",
+          component: "DialogOverlay",
+          /**
+           * fixed inset-0 z-50 bg-background/80 backdrop-blur-sm
+           * flex
+           **/
+          styles: [
+            fixed(),
+            inset2(0),
+            z(50),
+            bg("background", 80),
+            backdropBlur("sm"),
+            // To allow positioning Content
+            flex(),
+            overflow("auto")
+          ].flat(),
+          children: [
+            {
+              type: "instance",
+              component: "DialogContent",
+              /**
+               * fixed w-full z-50
+               * grid gap-4 max-w-lg
+               * m-auto
+               * border bg-background p-6 shadow-lg
+               **/
+              styles: [
+                w("full"),
+                z(50),
+                flex(),
+                flex("col"),
+                gap(4),
+                m("auto"),
+                maxW("lg"),
+                border(),
+                bg("background"),
+                p(6),
+                shadow("lg"),
+                relative()
+              ].flat(),
+              children: [
+                {
+                  type: "instance",
+                  component: "Box",
+                  label: "Dialog Header",
+                  styles: [flex(), flex("col"), gap(1)].flat(),
+                  children: [
+                    {
+                      type: "instance",
+                      component: "DialogTitle",
+                      /**
+                       * text-lg leading-none tracking-tight
+                       **/
+                      styles: [
+                        my(0),
+                        leading("none"),
+                        text("lg"),
+                        tracking("tight")
+                      ].flat(),
+                      children: [
+                        {
+                          type: "text",
+                          value: "Dialog Title"
+                        }
+                      ]
+                    },
+                    {
+                      type: "instance",
+                      component: "DialogDescription",
+                      /**
+                       * text-sm text-muted-foreground
+                       **/
+                      styles: [
+                        my(0),
+                        text("sm"),
+                        text("mutedForeground")
+                      ].flat(),
+                      children: [
+                        {
+                          type: "text",
+                          value: "Dialog description text you can edit"
+                        }
+                      ]
+                    }
+                  ]
+                },
+                {
+                  type: "instance",
+                  component: "Text",
+                  children: [{ type: "text", value: "The text you can edit" }]
+                },
+                {
+                  type: "instance",
+                  component: "DialogClose",
+                  /**
+                   * absolute right-4 top-4
+                   * rounded-sm opacity-70
+                   * ring-offset-background
+                   * hover:opacity-100 focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2
+                   * flex items-center justify-center h-4 w-4
+                   **/
+                  styles: [
+                    absolute(),
+                    right(4),
+                    top(4),
+                    rounded("sm"),
+                    opacity2(70),
+                    flex(),
+                    items("center"),
+                    justify("center"),
+                    h(4),
+                    w(4),
+                    border(0),
+                    bg("transparent"),
+                    outline("none"),
+                    hover(opacity2(100)),
+                    focus(ring("ring", 2, "background", 2))
+                  ].flat(),
+                  children: [
+                    {
+                      type: "instance",
+                      component: "HtmlEmbed",
+                      label: "Close Icon",
+                      props: [
+                        {
+                          type: "string",
+                          name: "code",
+                          value: LargeXIcon
+                        }
+                      ],
+                      children: []
+                    }
+                  ]
+                }
+              ]
+            }
+          ]
+        }
+      ]
+    }
+  ]
+};
+
+// src/sheet.ws.tsx
+import { HamburgerMenuIcon, LargeXIcon as LargeXIcon2 } from "@webstudio-is/icons/svg";
+var meta = {
+  category: "radix",
+  order: 1,
+  type: "container",
+  icon: HamburgerMenuIcon,
+  stylable: false,
+  description: "Displays content in a menu that slides out from the side of the screen, triggered by a button. Use this component for a typical mobile hamburger menu.",
+  template: [
+    {
+      type: "instance",
+      component: "Dialog",
+      label: "Sheet",
+      dataSources: {
+        sheetOpen: { type: "variable", initialValue: false }
+      },
+      props: [
+        {
+          type: "dataSource",
+          name: "open",
+          dataSourceName: "sheetOpen"
+        },
+        {
+          name: "onOpenChange",
+          type: "action",
+          value: [
+            { type: "execute", args: ["open"], code: `sheetOpen = open` }
+          ]
+        }
+      ],
+      children: [
+        {
+          type: "instance",
+          component: "DialogTrigger",
+          label: "Sheet Trigger",
+          children: [
+            {
+              type: "instance",
+              component: "Button",
+              styles: getButtonStyles("ghost", "icon"),
+              children: [
+                {
+                  type: "instance",
+                  component: "HtmlEmbed",
+                  label: "Hamburger Menu Svg",
+                  props: [
+                    {
+                      type: "string",
+                      name: "code",
+                      value: HamburgerMenuIcon
+                    }
+                  ],
+                  children: []
+                }
+              ]
+            }
+          ]
+        },
+        {
+          type: "instance",
+          component: "DialogOverlay",
+          label: "Sheet Overlay",
+          /**
+           * fixed inset-0 z-50 bg-background/80 backdrop-blur-sm
+           * flex
+           **/
+          styles: [
+            fixed(),
+            inset2(0),
+            z(50),
+            bg("background", 80),
+            backdropBlur("sm"),
+            // To allow positioning Content
+            flex(),
+            flex("col"),
+            overflow("auto")
+          ].flat(),
+          children: [
+            {
+              type: "instance",
+              component: "DialogContent",
+              label: "Sheet Content",
+              /**
+               * fixed w-full z-50
+               * grid gap-4 max-w-lg
+               * m-auto
+               * border bg-background p-6 shadow-lg
+               **/
+              styles: [
+                w("full"),
+                z(50),
+                flex(),
+                flex("col"),
+                gap(4),
+                border(),
+                bg("background"),
+                p(6),
+                shadow("lg"),
+                relative(),
+                // side=left
+                mr("auto"),
+                maxW("sm"),
+                grow()
+              ].flat(),
+              children: [
+                {
+                  type: "instance",
+                  component: "Box",
+                  label: "Navigation",
+                  props: [
+                    { name: "tag", type: "string", value: "nav" },
+                    { name: "role", type: "string", value: "navigation" }
+                  ],
+                  children: [
+                    {
+                      type: "instance",
+                      component: "Box",
+                      label: "Sheet Header",
+                      styles: [flex(), flex("col"), gap(1)].flat(),
+                      children: [
+                        {
+                          type: "instance",
+                          component: "DialogTitle",
+                          label: "Sheet Title",
+                          /**
+                           * text-lg leading-none tracking-tight
+                           **/
+                          styles: [
+                            my(0),
+                            leading("none"),
+                            text("lg"),
+                            tracking("tight")
+                          ].flat(),
+                          children: [
+                            {
+                              type: "text",
+                              value: "Sheet Title"
+                            }
+                          ]
+                        },
+                        {
+                          type: "instance",
+                          component: "DialogDescription",
+                          label: "Sheet Description",
+                          /**
+                           * text-sm text-muted-foreground
+                           **/
+                          styles: [
+                            my(0),
+                            text("sm"),
+                            text("mutedForeground")
+                          ].flat(),
+                          children: [
+                            {
+                              type: "text",
+                              value: "Sheet description text you can edit"
+                            }
+                          ]
+                        }
+                      ]
+                    },
+                    {
+                      type: "instance",
+                      component: "Text",
+                      children: [
+                        { type: "text", value: "The text you can edit" }
+                      ]
+                    }
+                  ]
+                },
+                {
+                  type: "instance",
+                  component: "DialogClose",
+                  label: "Close Button",
+                  /**
+                   * absolute right-4 top-4
+                   * rounded-sm opacity-70
+                   * ring-offset-background
+                   * hover:opacity-100 focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2
+                   * flex items-center justify-center h-4 w-4
+                   **/
+                  styles: [
+                    absolute(),
+                    right(4),
+                    top(4),
+                    rounded("sm"),
+                    opacity2(70),
+                    flex(),
+                    items("center"),
+                    justify("center"),
+                    h(4),
+                    w(4),
+                    border(0),
+                    bg("transparent"),
+                    outline("none"),
+                    hover(opacity2(100)),
+                    focus(ring("ring", 2, "background", 2))
+                  ].flat(),
+                  children: [
+                    {
+                      type: "instance",
+                      component: "HtmlEmbed",
+                      label: "Close Icon",
+                      props: [
+                        {
+                          type: "string",
+                          name: "code",
+                          value: LargeXIcon2
+                        }
+                      ],
+                      children: []
+                    }
+                  ]
+                }
+              ]
+            }
+          ]
+        }
+      ]
+    }
+  ]
+};
+
+// src/popover.ws.tsx
+import { PopoverIcon, TriggerIcon as TriggerIcon3, ContentIcon as ContentIcon3 } from "@webstudio-is/icons/svg";
+import "@webstudio-is/react-sdk";
+import { div as div3 } from "@webstudio-is/react-sdk/css-normalize";
+var presetStyle3 = {
+  div: div3
+};
+var metaPopoverTrigger = {
+  category: "hidden",
+  type: "container",
+  icon: TriggerIcon3,
+  stylable: false,
+  detachable: false
+};
+var metaPopoverContent = {
+  category: "hidden",
+  type: "container",
+  presetStyle: presetStyle3,
+  icon: ContentIcon3,
+  detachable: false
+};
+var metaPopover = {
+  category: "radix",
+  order: 6,
+  type: "container",
+  icon: PopoverIcon,
+  stylable: false,
+  description: "Displays rich content in a portal, triggered by a button.",
+  template: [
+    {
+      type: "instance",
+      component: "Popover",
+      dataSources: {
+        popoverOpen: { type: "variable", initialValue: false }
+      },
+      props: [
+        {
+          type: "dataSource",
+          name: "open",
+          dataSourceName: "popoverOpen"
+        },
+        {
+          name: "onOpenChange",
+          type: "action",
+          value: [
+            { type: "execute", args: ["open"], code: `popoverOpen = open` }
+          ]
+        }
+      ],
+      children: [
+        {
+          type: "instance",
+          component: "PopoverTrigger",
+          children: [
+            {
+              type: "instance",
+              component: "Button",
+              styles: getButtonStyles("outline"),
+              children: [{ type: "text", value: "Button" }]
+            }
+          ]
+        },
+        {
+          type: "instance",
+          component: "PopoverContent",
+          /**
+           *  z-50 w-72 rounded-md border bg-popover p-4 text-popover-foreground shadow-md outline-none
+           **/
+          styles: [
+            z(50),
+            w(72),
+            rounded("md"),
+            border(),
+            bg("popover"),
+            p(4),
+            text("popoverForeground"),
+            shadow("md"),
+            outline("none")
+          ].flat(),
+          children: [
+            {
+              type: "instance",
+              component: "Text",
+              children: [{ type: "text", value: "The text you can edit" }]
+            }
+          ]
+        }
+      ]
+    }
+  ]
+};
+
+// src/tooltip.ws.tsx
+import { TooltipIcon, TriggerIcon as TriggerIcon4, ContentIcon as ContentIcon4 } from "@webstudio-is/icons/svg";
+import "@webstudio-is/react-sdk";
+import { div as div4 } from "@webstudio-is/react-sdk/css-normalize";
+var presetStyle4 = {
+  div: div4
+};
+var metaTooltipTrigger = {
+  category: "hidden",
+  detachable: false,
+  type: "container",
+  icon: TriggerIcon4,
+  stylable: false
+};
+var metaTooltipContent = {
+  category: "hidden",
+  detachable: false,
+  type: "container",
+  presetStyle: presetStyle4,
+  icon: ContentIcon4
+};
+var metaTooltip = {
+  category: "radix",
+  order: 7,
+  type: "container",
+  icon: TooltipIcon,
+  stylable: false,
+  description: "Displays content that is related to the trigger, when the trigger is hovered with the mouse or focused with the keyboard. You are reading an example of a tooltip right now.",
+  template: [
+    {
+      type: "instance",
+      component: "Tooltip",
+      dataSources: {
+        tooltipOpen: { type: "variable", initialValue: false }
+      },
+      props: [
+        {
+          type: "dataSource",
+          name: "open",
+          dataSourceName: "tooltipOpen"
+        },
+        {
+          name: "onOpenChange",
+          type: "action",
+          value: [
+            { type: "execute", args: ["open"], code: `tooltipOpen = open` }
+          ]
+        }
+      ],
+      children: [
+        {
+          type: "instance",
+          component: "TooltipTrigger",
+          children: [
+            {
+              type: "instance",
+              component: "Button",
+              styles: getButtonStyles("outline"),
+              children: [{ type: "text", value: "Button" }]
+            }
+          ]
+        },
+        {
+          type: "instance",
+          component: "TooltipContent",
+          /**
+           *  z-50 overflow-hidden rounded-md border bg-popover px-3 py-1.5 text-sm text-popover-foreground shadow-md
+           **/
+          styles: [
+            z(50),
+            overflow("hidden"),
+            rounded("md"),
+            border(),
+            bg("popover"),
+            px(3),
+            py(1.5),
+            text("sm"),
+            text("popoverForeground"),
+            shadow("md")
+          ].flat(),
+          children: [
+            {
+              type: "instance",
+              component: "Text",
+              children: [{ type: "text", value: "The text you can edit" }]
+            }
+          ]
+        }
+      ]
+    }
+  ]
+};
+
+// src/tabs.ws.ts
+import {
+  ContentIcon as ContentIcon5,
+  HeaderIcon,
+  TabsIcon,
+  TriggerIcon as TriggerIcon5
+} from "@webstudio-is/icons/svg";
+import {
+  defaultStates as defaultStates2
+} from "@webstudio-is/react-sdk";
+import { button as button2, div as div5 } from "@webstudio-is/react-sdk/css-normalize";
+var presetStyle5 = {
+  div: div5
+};
+var tabsTriggerStyles = [
+  inlineFlex(),
+  items("center"),
+  justify("center"),
+  whitespace("nowrap"),
+  rounded("md"),
+  px(3),
+  py(1.5),
+  text("sm"),
+  font("medium"),
+  transition("all"),
+  focusVisible(
+    [outline("none"), ring("ring", 2, "background", 2)].flat()
+  ),
+  disabled([pointerEvents("none"), opacity2(50)].flat()),
+  state(
+    [bg("background"), text("foreground"), shadow("sm")].flat(),
+    "[data-state=active]"
+  )
+].flat();
+var tabsContentStyles = [
+  mt(2),
+  focusVisible(
+    [outline("none"), ring("ring", 2, "background", 2)].flat()
+  )
+].flat();
+var metaTabs = {
+  category: "radix",
+  order: 2,
+  type: "container",
+  icon: TabsIcon,
+  presetStyle: presetStyle5,
+  description: "A set of panels with content that are displayed one at a time. Duplicate both a tab trigger and tab content to add more tabs. Triggers and content are connected according to their order in the Navigator.",
+  template: [
+    {
+      type: "instance",
+      component: "Tabs",
+      dataSources: {
+        tabsValue: { type: "variable", initialValue: "0" }
+      },
+      props: [
+        { type: "dataSource", name: "value", dataSourceName: "tabsValue" },
+        {
+          name: "onValueChange",
+          type: "action",
+          value: [
+            { type: "execute", args: ["value"], code: `tabsValue = value` }
+          ]
+        }
+      ],
+      children: [
+        {
+          type: "instance",
+          component: "TabsList",
+          // inline-flex h-10 items-center justify-center rounded-md bg-muted p-1 text-muted-foreground
+          styles: [
+            inlineFlex(),
+            h(10),
+            items("center"),
+            justify("center"),
+            rounded("md"),
+            bg("muted"),
+            p(1),
+            text("mutedForeground")
+          ].flat(),
+          children: [
+            {
+              type: "instance",
+              component: "TabsTrigger",
+              styles: tabsTriggerStyles,
+              children: [{ type: "text", value: "Account" }]
+            },
+            {
+              type: "instance",
+              component: "TabsTrigger",
+              styles: tabsTriggerStyles,
+              children: [{ type: "text", value: "Password" }]
+            }
+          ]
+        },
+        {
+          type: "instance",
+          component: "TabsContent",
+          styles: tabsContentStyles,
+          children: [
+            { type: "text", value: "Make changes to your account here." }
+          ]
+        },
+        {
+          type: "instance",
+          component: "TabsContent",
+          styles: tabsContentStyles,
+          children: [{ type: "text", value: "Change your password here." }]
+        }
+      ]
+    }
+  ]
+};
+var metaTabsList = {
+  category: "hidden",
+  detachable: false,
+  type: "container",
+  icon: HeaderIcon,
+  requiredAncestors: ["Tabs"],
+  presetStyle: presetStyle5
+};
+var metaTabsTrigger = {
+  category: "hidden",
+  type: "container",
+  icon: TriggerIcon5,
+  requiredAncestors: ["TabsList"],
+  invalidAncestors: ["TabsTrigger"],
+  indexWithinAncestor: "Tabs",
+  label: "Tab Trigger",
+  states: [
+    ...defaultStates2,
+    {
+      category: "component-states",
+      label: "Active",
+      selector: "[data-state=active]"
+    }
+  ],
+  presetStyle: {
+    button: [button2, buttonReset].flat()
+  }
+};
+var metaTabsContent = {
+  category: "hidden",
+  type: "container",
+  label: "Tab Content",
+  icon: ContentIcon5,
+  requiredAncestors: ["Tabs"],
+  indexWithinAncestor: "Tabs",
+  presetStyle: presetStyle5
+};
+
+// src/label.ws.ts
+import { LabelIcon } from "@webstudio-is/icons/svg";
+import {
+  defaultStates as defaultStates3
+} from "@webstudio-is/react-sdk";
+import { label } from "@webstudio-is/react-sdk/css-normalize";
+
+// src/__generated__/label.props.ts
+var props = {
+  about: { required: false, control: "text", type: "string" },
+  accessKey: {
+    required: false,
+    control: "text",
+    type: "string",
+    description: "Keyboard shortcut to activate or add focus to the element."
+  },
+  "aria-activedescendant": {
+    description: "Identifies the currently active element when DOM focus is on a composite widget, textbox, group, or application.",
+    required: false,
+    control: "text",
+    type: "string"
+  },
+  "aria-atomic": {
+    description: "Indicates whether assistive technologies will present all, or only parts of, the changed region based on the change notifications defined by the aria-relevant attribute.",
+    required: false,
+    control: "boolean",
+    type: "boolean"
+  },
+  "aria-autocomplete": {
+    description: "Indicates whether inputting text could trigger display of one or more predictions of the user's intended value for an input and specifies how predictions would be\npresented if they are made.",
+    required: false,
+    control: "select",
+    type: "string",
+    options: ["list", "none", "inline", "both"]
+  },
+  "aria-braillelabel": {
+    description: "Defines a string value that labels the current element, which is intended to be converted into Braille.\n@see aria-label.",
+    required: false,
+    control: "text",
+    type: "string"
+  },
+  "aria-brailleroledescription": {
+    description: "Defines a human-readable, author-localized abbreviated description for the role of an element, which is intended to be converted into Braille.\n@see aria-roledescription.",
+    required: false,
+    control: "text",
+    type: "string"
+  },
+  "aria-busy": { required: false, control: "boolean", type: "boolean" },
+  "aria-checked": {
+    description: 'Indicates the current "checked" state of checkboxes, radio buttons, and other widgets.\n@see aria-pressed\n@see aria-selected.',
+    required: false,
+    control: "text",
+    type: "string"
+  },
+  "aria-colcount": {
+    description: "Defines the total number of columns in a table, grid, or treegrid.\n@see aria-colindex.",
+    required: false,
+    control: "number",
+    type: "number"
+  },
+  "aria-colindex": {
+    description: "Defines an element's column index or position with respect to the total number of columns within a table, grid, or treegrid.\n@see aria-colcount\n@see aria-colspan.",
+    required: false,
+    control: "number",
+    type: "number"
+  },
+  "aria-colindextext": {
+    description: "Defines a human readable text alternative of aria-colindex.\n@see aria-rowindextext.",
+    required: false,
+    control: "text",
+    type: "string"
+  },
+  "aria-colspan": {
+    description: "Defines the number of columns spanned by a cell or gridcell within a table, grid, or treegrid.\n@see aria-colindex\n@see aria-rowspan.",
+    required: false,
+    control: "number",
+    type: "number"
+  },
+  "aria-controls": {
+    description: "Identifies the element (or elements) whose contents or presence are controlled by the current element.\n@see aria-owns.",
+    required: false,
+    control: "text",
+    type: "string"
+  },
+  "aria-current": {
+    description: "Indicates the element that represents the current item within a container or set of related elements.",
+    required: false,
+    control: "text",
+    type: "string"
+  },
+  "aria-describedby": {
+    description: "Identifies the element (or elements) that describes the object.\n@see aria-labelledby",
+    required: false,
+    control: "text",
+    type: "string"
+  },
+  "aria-description": {
+    description: "Defines a string value that describes or annotates the current element.\n@see related aria-describedby.",
+    required: false,
+    control: "text",
+    type: "string"
+  },
+  "aria-details": {
+    description: "Identifies the element that provides a detailed, extended description for the object.\n@see aria-describedby.",
+    required: false,
+    control: "text",
+    type: "string"
+  },
+  "aria-disabled": {
+    description: "Indicates that the element is perceivable but disabled, so it is not editable or otherwise operable.\n@see aria-hidden\n@see aria-readonly.",
+    required: false,
+    control: "boolean",
+    type: "boolean"
+  },
+  "aria-dropeffect": {
+    description: "Indicates what functions can be performed when a dragged object is released on the drop target.\n@deprecated in ARIA 1.1",
+    required: false,
+    control: "select",
+    type: "string",
+    options: ["link", "none", "copy", "execute", "move", "popup"]
+  },
+  "aria-errormessage": {
+    description: "Identifies the element that provides an error message for the object.\n@see aria-invalid\n@see aria-describedby.",
+    required: false,
+    control: "text",
+    type: "string"
+  },
+  "aria-expanded": {
+    description: "Indicates whether the element, or another grouping element it controls, is currently expanded or collapsed.",
+    required: false,
+    control: "boolean",
+    type: "boolean"
+  },
+  "aria-flowto": {
+    description: "Identifies the next element (or elements) in an alternate reading order of content which, at the user's discretion,\nallows assistive technology to override the general default of reading in document source order.",
+    required: false,
+    control: "text",
+    type: "string"
+  },
+  "aria-grabbed": {
+    description: `Indicates an element's "grabbed" state in a drag-and-drop operation.
+@deprecated in ARIA 1.1`,
+    required: false,
+    control: "boolean",
+    type: "boolean"
+  },
+  "aria-haspopup": {
+    description: "Indicates the availability and type of interactive popup element, such as menu or dialog, that can be triggered by an element.",
+    required: false,
+    control: "text",
+    type: "string"
+  },
+  "aria-hidden": {
+    description: "Indicates whether the element is exposed to an accessibility API.\n@see aria-disabled.",
+    required: false,
+    control: "boolean",
+    type: "boolean"
+  },
+  "aria-invalid": {
+    description: "Indicates the entered value does not conform to the format expected by the application.\n@see aria-errormessage.",
+    required: false,
+    control: "text",
+    type: "string"
+  },
+  "aria-keyshortcuts": {
+    description: "Indicates keyboard shortcuts that an author has implemented to activate or give focus to an element.",
+    required: false,
+    control: "text",
+    type: "string"
+  },
+  "aria-label": {
+    description: "Provides the accessible name that describes an interactive element if no other accessible name exists, for example in a button that contains an image with no text.",
+    required: false,
+    control: "text",
+    type: "string"
+  },
+  "aria-labelledby": {
+    description: "Identifies the element (or elements) that labels the current element.\n@see aria-describedby.",
+    required: false,
+    control: "text",
+    type: "string"
+  },
+  "aria-level": {
+    description: "Defines the hierarchical level of an element within a structure.",
+    required: false,
+    control: "number",
+    type: "number"
+  },
+  "aria-live": {
+    description: "Indicates that an element will be updated, and describes the types of updates the user agents, assistive technologies, and user can expect from the live region.",
+    required: false,
+    control: "radio",
+    type: "string",
+    options: ["off", "assertive", "polite"]
+  },
+  "aria-modal": {
+    description: "Indicates whether an element is modal when displayed.",
+    required: false,
+    control: "boolean",
+    type: "boolean"
+  },
+  "aria-multiline": {
+    description: "Indicates whether a text box accepts multiple lines of input or only a single line.",
+    required: false,
+    control: "boolean",
+    type: "boolean"
+  },
+  "aria-multiselectable": {
+    description: "Indicates that the user may select more than one item from the current selectable descendants.",
+    required: false,
+    control: "boolean",
+    type: "boolean"
+  },
+  "aria-orientation": {
+    description: "Indicates whether the element's orientation is horizontal, vertical, or unknown/ambiguous.",
+    required: false,
+    control: "radio",
+    type: "string",
+    options: ["horizontal", "vertical"]
+  },
+  "aria-owns": {
+    description: "Identifies an element (or elements) in order to define a visual, functional, or contextual parent/child relationship\nbetween DOM elements where the DOM hierarchy cannot be used to represent the relationship.\n@see aria-controls.",
+    required: false,
+    control: "text",
+    type: "string"
+  },
+  "aria-placeholder": {
+    description: "Defines a short hint (a word or short phrase) intended to aid the user with data entry when the control has no value.\nA hint could be a sample value or a brief description of the expected format.",
+    required: false,
+    control: "text",
+    type: "string"
+  },
+  "aria-posinset": {
+    description: "Defines an element's number or position in the current set of listitems or treeitems. Not required if all elements in the set are present in the DOM.\n@see aria-setsize.",
+    required: false,
+    control: "number",
+    type: "number"
+  },
+  "aria-pressed": {
+    description: 'Indicates the current "pressed" state of toggle buttons.\n@see aria-checked\n@see aria-selected.',
+    required: false,
+    control: "text",
+    type: "string"
+  },
+  "aria-readonly": {
+    description: "Indicates that the element is not editable, but is otherwise operable.\n@see aria-disabled.",
+    required: false,
+    control: "boolean",
+    type: "boolean"
+  },
+  "aria-relevant": {
+    description: "Indicates what notifications the user agent will trigger when the accessibility tree within a live region is modified.\n@see aria-atomic.",
+    required: false,
+    control: "select",
+    type: "string",
+    options: [
+      "text",
+      "additions",
+      "additions removals",
+      "additions text",
+      "all",
+      "removals",
+      "removals additions",
+      "removals text",
+      "text additions",
+      "text removals"
+    ]
+  },
+  "aria-required": {
+    description: "Indicates that user input is required on the element before a form may be submitted.",
+    required: false,
+    control: "boolean",
+    type: "boolean"
+  },
+  "aria-roledescription": {
+    description: "Defines a human-readable, author-localized description for the role of an element.",
+    required: false,
+    control: "text",
+    type: "string"
+  },
+  "aria-rowcount": {
+    description: "Defines the total number of rows in a table, grid, or treegrid.\n@see aria-rowindex.",
+    required: false,
+    control: "number",
+    type: "number"
+  },
+  "aria-rowindex": {
+    description: "Defines an element's row index or position with respect to the total number of rows within a table, grid, or treegrid.\n@see aria-rowcount\n@see aria-rowspan.",
+    required: false,
+    control: "number",
+    type: "number"
+  },
+  "aria-rowindextext": {
+    description: "Defines a human readable text alternative of aria-rowindex.\n@see aria-colindextext.",
+    required: false,
+    control: "text",
+    type: "string"
+  },
+  "aria-rowspan": {
+    description: "Defines the number of rows spanned by a cell or gridcell within a table, grid, or treegrid.\n@see aria-rowindex\n@see aria-colspan.",
+    required: false,
+    control: "number",
+    type: "number"
+  },
+  "aria-selected": {
+    description: 'Indicates the current "selected" state of various widgets.\n@see aria-checked\n@see aria-pressed.',
+    required: false,
+    control: "boolean",
+    type: "boolean"
+  },
+  "aria-setsize": {
+    description: "Defines the number of items in the current set of listitems or treeitems. Not required if all elements in the set are present in the DOM.\n@see aria-posinset.",
+    required: false,
+    control: "number",
+    type: "number"
+  },
+  "aria-sort": {
+    description: "Indicates if items in a table or grid are sorted in ascending or descending order.",
+    required: false,
+    control: "select",
+    type: "string",
+    options: ["none", "ascending", "descending", "other"]
+  },
+  "aria-valuemax": {
+    description: "Defines the maximum allowed value for a range widget.",
+    required: false,
+    control: "number",
+    type: "number"
+  },
+  "aria-valuemin": {
+    description: "Defines the minimum allowed value for a range widget.",
+    required: false,
+    control: "number",
+    type: "number"
+  },
+  "aria-valuenow": {
+    description: "Defines the current value for a range widget.\n@see aria-valuetext.",
+    required: false,
+    control: "number",
+    type: "number"
+  },
+  "aria-valuetext": {
+    description: "Defines the human readable text alternative of aria-valuenow for a range widget.",
+    required: false,
+    control: "text",
+    type: "string"
+  },
+  autoCapitalize: {
+    required: false,
+    control: "text",
+    type: "string",
+    description: "Sets whether input is automatically capitalized when entered by user."
+  },
+  autoCorrect: { required: false, control: "text", type: "string" },
+  autoFocus: {
+    required: false,
+    control: "boolean",
+    type: "boolean",
+    description: "Indicates that an element should be focused on page load, or when its parent dialog is displayed."
+  },
+  autoSave: { required: false, control: "text", type: "string" },
+  className: { required: false, control: "text", type: "string" },
+  color: {
+    required: false,
+    control: "color",
+    type: "string",
+    description: "This attribute sets the text color using either a named color or a  color specified in the hexadecimal #RRGGBB format. Note: This is a legacy attribute. Please use the CSS color property instead."
+  },
+  content: {
+    required: false,
+    control: "text",
+    type: "string",
+    description: "A value associated with http-equiv orname depending on the context."
+  },
+  contextMenu: {
+    required: false,
+    control: "text",
+    type: "string",
+    description: "Defines the ID of a menu element which willserve as the element's context menu."
+  },
+  datatype: { required: false, control: "text", type: "string" },
+  dir: {
+    required: false,
+    control: "text",
+    type: "string",
+    description: "Defines the text direction. Allowed values are ltr (Left-To-Right) or rtl (Right-To-Left)"
+  },
+  draggable: {
+    required: false,
+    control: "boolean",
+    type: "boolean",
+    description: "Defines whether the element can be dragged."
+  },
+  form: {
+    required: false,
+    control: "text",
+    type: "string",
+    description: "Indicates the form that is the owner of the element."
+  },
+  hidden: {
+    required: false,
+    control: "boolean",
+    type: "boolean",
+    description: "Prevents rendering of given element, while keeping child elements, e.g. script elements, active."
+  },
+  htmlFor: {
+    required: false,
+    control: "text",
+    type: "string",
+    description: "Associates this Label with an Input. The value of the \u201CFor\u201D attribute should match the ID attribute of the corresponding Input element"
+  },
+  id: {
+    required: false,
+    control: "text",
+    type: "string",
+    description: "Often used with CSS to style a specific element. The value of this attribute must be unique."
+  },
+  inputMode: {
+    description: "Hints at the type of data that might be entered by the user while editing the element or its contents\n@see https://html.spec.whatwg.org/multipage/interaction.html#input-modalities:-the-inputmode-attribute",
+    required: false,
+    control: "select",
+    type: "string",
+    options: [
+      "search",
+      "text",
+      "none",
+      "tel",
+      "url",
+      "email",
+      "numeric",
+      "decimal"
+    ]
+  },
+  is: {
+    description: "Specify that a standard HTML element should behave like a defined custom built-in element\n@see https://html.spec.whatwg.org/multipage/custom-elements.html#attr-is",
+    required: false,
+    control: "text",
+    type: "string"
+  },
+  itemID: { required: false, control: "text", type: "string" },
+  itemProp: { required: false, control: "text", type: "string" },
+  itemRef: { required: false, control: "text", type: "string" },
+  itemScope: { required: false, control: "boolean", type: "boolean" },
+  itemType: { required: false, control: "text", type: "string" },
+  lang: {
+    required: false,
+    control: "text",
+    type: "string",
+    description: "Defines the language used in the element."
+  },
+  nonce: { required: false, control: "text", type: "string" },
+  placeholder: {
+    required: false,
+    control: "text",
+    type: "string",
+    description: "Provides a hint to the user of what can be entered in the field."
+  },
+  prefix: { required: false, control: "text", type: "string" },
+  property: { required: false, control: "text", type: "string" },
+  radioGroup: { required: false, control: "text", type: "string" },
+  rel: {
+    required: false,
+    control: "text",
+    type: "string",
+    description: "Specifies the relationship of the target object to the link object."
+  },
+  resource: { required: false, control: "text", type: "string" },
+  results: { required: false, control: "number", type: "number" },
+  rev: { required: false, control: "text", type: "string" },
+  role: {
+    required: false,
+    control: "text",
+    type: "string",
+    description: "Defines an explicit role for an element for use by assistive technologies."
+  },
+  security: { required: false, control: "text", type: "string" },
+  slot: {
+    required: false,
+    control: "text",
+    type: "string",
+    description: "Assigns a slot in a shadow DOM shadow tree to an element."
+  },
+  spellCheck: {
+    required: false,
+    control: "boolean",
+    type: "boolean",
+    description: "Indicates whether spell checking is allowed for the element."
+  },
+  suppressContentEditableWarning: {
+    required: false,
+    control: "boolean",
+    type: "boolean"
+  },
+  suppressHydrationWarning: {
+    required: false,
+    control: "boolean",
+    type: "boolean"
+  },
+  tabIndex: {
+    required: false,
+    control: "number",
+    type: "number",
+    description: "Overrides the browser's default tab order and follows the one specified instead."
+  },
+  title: {
+    required: false,
+    control: "text",
+    type: "string",
+    description: "Text to be displayed in a tooltip when hovering over the element."
+  },
+  translate: {
+    required: false,
+    control: "radio",
+    type: "string",
+    options: ["yes", "no"],
+    description: "Specify whether an element's attribute values and the values of its text node children are to be translated when the page is localized, or whether to leave them unchanged."
+  },
+  typeof: { required: false, control: "text", type: "string" },
+  unselectable: {
+    required: false,
+    control: "radio",
+    type: "string",
+    options: ["on", "off"]
+  },
+  vocab: { required: false, control: "text", type: "string" }
+};
+
+// src/label.ws.ts
+var presetStyle6 = {
+  label
+};
+var meta2 = {
+  category: "radix",
+  order: 102,
+  type: "container",
+  icon: LabelIcon,
+  presetStyle: presetStyle6,
+  states: defaultStates3,
+  description: "An accessible label to describe the purpose of an input. Match the \u201CFor\u201D property on the label with the \u201CID\u201D of the input to connect them.",
+  template: [
+    {
+      type: "instance",
+      component: "Label",
+      styles: [
+        // text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70
+        text("sm"),
+        font("medium"),
+        leading("none")
+        // We are not supporting peer like styles yet
+      ].flat(),
+      children: [{ type: "text", value: "Form Label" }]
+    }
+  ]
+};
+var propsMeta = {
+  props: {
+    ...props,
+    htmlFor: {
+      ...props.htmlFor,
+      label: "For"
+    }
+  },
+  initialProps: ["id", "htmlFor"]
+};
+
+// src/accordion.ws.ts
+import {
+  AccordionIcon,
+  ItemIcon,
+  HeaderIcon as HeaderIcon2,
+  TriggerIcon as TriggerIcon6,
+  ContentIcon as ContentIcon6,
+  ChevronDownIcon
+} from "@webstudio-is/icons/svg";
+import {
+  defaultStates as defaultStates4
+} from "@webstudio-is/react-sdk";
+import { div as div6, h3, button as button3 } from "@webstudio-is/react-sdk/css-normalize";
+var presetStyle7 = {
+  div: div6
+};
+var accordionItemStyles = [borderB()].flat();
+var createAccordionTrigger = ({
+  children
+}) => ({
+  type: "instance",
+  component: "AccordionHeader",
+  // flex
+  styles: [flex()].flat(),
+  children: [
+    {
+      type: "instance",
+      component: "AccordionTrigger",
+      // flex flex-1 items-center justify-between py-4 font-medium transition-all hover:underline [&[data-state=open]>svg]:rotate-180
+      styles: [
+        flex(),
+        flex(1),
+        items("center"),
+        justify("between"),
+        py(4),
+        font("medium"),
+        hover([underline()].flat()),
+        property("--accordion-trigger-icon-transform", "0deg"),
+        state(
+          [property("--accordion-trigger-icon-transform", "180deg")],
+          "[data-state=open]"
+        )
+      ].flat(),
+      children: [
+        {
+          type: "instance",
+          component: "Text",
+          children
+        },
+        {
+          type: "instance",
+          component: "Box",
+          label: "Icon Container",
+          // h-4 w-4 shrink-0 transition-transform duration-200
+          styles: [
+            property("rotate", "--accordion-trigger-icon-transform"),
+            h(4),
+            w(4),
+            shrink(0),
+            transition("all"),
+            duration(200)
+          ].flat(),
+          children: [
+            {
+              type: "instance",
+              component: "HtmlEmbed",
+              label: "Chevron Icon",
+              props: [
+                {
+                  type: "string",
+                  name: "code",
+                  value: ChevronDownIcon
+                }
+              ],
+              children: []
+            }
+          ]
+        }
+      ]
+    }
+  ]
+});
+var accordionContentStyles = [
+  overflow("hidden"),
+  text("sm"),
+  // transition does not work with display: none
+  // tc.transition("all"),
+  pb(4)
+].flat();
+var metaAccordion = {
+  category: "radix",
+  order: 3,
+  type: "container",
+  icon: AccordionIcon,
+  presetStyle: presetStyle7,
+  description: "A vertically stacked set of interactive headings that each reveal an associated section of content. Clicking on the heading will open the item and close other items.",
+  template: [
+    {
+      type: "instance",
+      component: "Accordion",
+      dataSources: {
+        accordionValue: { type: "variable", initialValue: "0" }
+      },
+      props: [
+        { type: "boolean", name: "collapsible", value: true },
+        { type: "dataSource", name: "value", dataSourceName: "accordionValue" },
+        {
+          name: "onValueChange",
+          type: "action",
+          value: [
+            {
+              type: "execute",
+              args: ["value"],
+              code: `accordionValue = value`
+            }
+          ]
+        }
+      ],
+      children: [
+        {
+          type: "instance",
+          component: "AccordionItem",
+          styles: accordionItemStyles,
+          children: [
+            createAccordionTrigger({
+              children: [{ type: "text", value: "Is it accessible?" }]
+            }),
+            {
+              type: "instance",
+              component: "AccordionContent",
+              styles: accordionContentStyles,
+              children: [
+                {
+                  type: "text",
+                  value: "Yes. It adheres to the WAI-ARIA design pattern."
+                }
+              ]
+            }
+          ]
+        },
+        {
+          type: "instance",
+          component: "AccordionItem",
+          styles: accordionItemStyles,
+          children: [
+            createAccordionTrigger({
+              children: [{ type: "text", value: "Is it styled?" }]
+            }),
+            {
+              type: "instance",
+              component: "AccordionContent",
+              styles: accordionContentStyles,
+              children: [
+                {
+                  type: "text",
+                  value: "Yes. It comes with default styles that matches the other components' aesthetic."
+                }
+              ]
+            }
+          ]
+        },
+        {
+          type: "instance",
+          component: "AccordionItem",
+          styles: accordionItemStyles,
+          children: [
+            createAccordionTrigger({
+              children: [{ type: "text", value: "Is it animated?" }]
+            }),
+            {
+              type: "instance",
+              component: "AccordionContent",
+              styles: accordionContentStyles,
+              children: [
+                {
+                  type: "text",
+                  value: "Yes. It's animated by default, but you can disable it if you prefer."
+                }
+              ]
+            }
+          ]
+        }
+      ]
+    }
+  ]
+};
+var metaAccordionItem = {
+  category: "hidden",
+  type: "container",
+  label: "Item",
+  icon: ItemIcon,
+  requiredAncestors: ["Accordion"],
+  indexWithinAncestor: "Accordion",
+  presetStyle: presetStyle7
+};
+var metaAccordionHeader = {
+  category: "hidden",
+  type: "container",
+  label: "Item Header",
+  icon: HeaderIcon2,
+  requiredAncestors: ["AccordionItem"],
+  detachable: false,
+  presetStyle: {
+    h3: [h3, my(0)].flat()
+  }
+};
+var metaAccordionTrigger = {
+  category: "hidden",
+  type: "container",
+  label: "Item Trigger",
+  icon: TriggerIcon6,
+  requiredAncestors: ["AccordionHeader"],
+  detachable: false,
+  states: [
+    ...defaultStates4,
+    {
+      category: "component-states",
+      label: "Open",
+      selector: "[data-state=open]"
+    }
+  ],
+  presetStyle: {
+    button: [button3, buttonReset].flat()
+  }
+};
+var metaAccordionContent = {
+  category: "hidden",
+  type: "container",
+  label: "Item Content",
+  icon: ContentIcon6,
+  requiredAncestors: ["AccordionItem"],
+  detachable: false,
+  presetStyle: presetStyle7
+};
+
+// src/navigation-menu.ws.ts
+import {
+  ContentIcon as ContentIcon7,
+  ListIcon,
+  ListItemIcon,
+  TriggerIcon as TriggerIcon7,
+  BoxIcon,
+  ChevronDownIcon as ChevronDownIcon2,
+  ViewportIcon,
+  NavigationMenuIcon
+} from "@webstudio-is/icons/svg";
+import { div as div7 } from "@webstudio-is/react-sdk/css-normalize";
+var presetStyle8 = {
+  div: div7
+};
+var components = [
+  {
+    title: "Sheet",
+    href: "/docs/components/sheet",
+    description: "Extends the Dialog component to display content that complements the main content of the screen."
+  },
+  {
+    title: "Navigation Menu",
+    href: "/docs/components/navigation-menu",
+    description: "A collection of links for navigating websites."
+  },
+  {
+    title: "Tabs",
+    href: "/docs/components/tabs",
+    description: "A set of layered sections of content\u2014known as tab panels\u2014that are displayed one at a time."
+  },
+  {
+    title: "Accordion",
+    href: "/docs/components/accordion",
+    description: "A vertically stacked set of interactive headings that each reveal a section of content."
+  },
+  {
+    title: "Dialog",
+    href: "/docs/components/dialog",
+    description: "A window overlaid on either the primary window or another dialog window, rendering the content underneath inert."
+  },
+  {
+    title: "Collapsible",
+    href: "/docs/components/collapsible",
+    description: "An interactive component which expands/collapses a panel."
+  },
+  {
+    title: "Popover",
+    href: "/docs/components/popover",
+    description: "Displays rich content in a portal, triggered by a button."
+  },
+  {
+    title: "Tooltip",
+    href: "/docs/components/tooltip",
+    description: "A popup that displays information related to an element when the element receives keyboard focus or the mouse hovers over it."
+  },
+  {
+    title: "Button",
+    href: "/docs/components/button",
+    description: "Displays a button or a component that looks like a button."
+  }
+];
+var navItem = (props2) => [
+  {
+    type: "instance",
+    component: "NavigationMenuLink",
+    children: [
+      {
+        type: "instance",
+        component: "Link",
+        // block select-none space-y-1 rounded-md p-3 leading-none
+        // no-underline outline-none transition-colors
+        // hover:bg-accent hover:text-accent-foreground
+        // focus:bg-accent focus:text-accent-foreground
+        styles: [
+          text("inherit"),
+          flex(),
+          flex("col"),
+          select("none"),
+          gap(1),
+          rounded("md"),
+          p(3),
+          leading("none"),
+          noUnderline(),
+          outline("none"),
+          hover([bg("accent"), text("accentForeground")].flat()),
+          focus([bg("accent"), text("accentForeground")].flat())
+        ].flat(),
+        props: [
+          {
+            name: "href",
+            type: "string",
+            value: `https://ui.shadcn.com${props2.href}`
+          }
+        ],
+        children: [
+          {
+            type: "instance",
+            component: "Text",
+            // text-sm font-medium leading-none
+            styles: [
+              text("sm"),
+              font("medium"),
+              leading("none")
+            ].flat(),
+            children: [
+              {
+                type: "text",
+                value: props2.title
+              }
+            ]
+          },
+          {
+            type: "instance",
+            component: "Paragraph",
+            // line-clamp-2 text-sm leading-snug text-muted-foreground
+            styles: [
+              m(0),
+              lineClamp2(2),
+              text("sm"),
+              leading("snug"),
+              text("mutedForeground")
+            ].flat(),
+            children: [
+              {
+                type: "text",
+                value: props2.description
+              }
+            ]
+          }
+        ]
+      }
+    ]
+  }
+];
+var navItemsList = (props2) => [
+  {
+    type: "instance",
+    component: "Box",
+    label: "Flex Column",
+    styles: [w(64), flex(), gap(4), flex("col")].flat(),
+    children: Array.from(
+      Array(props2.count),
+      (_, index) => navItem(components[index + props2.offset])
+    ).flat()
+  }
+];
+var menuItemLink = (props2) => [
+  {
+    type: "instance",
+    component: "NavigationMenuItem",
+    children: [
+      {
+        type: "instance",
+        component: "NavigationMenuLink",
+        children: [
+          {
+            type: "instance",
+            component: "Link",
+            styles: [
+              getButtonStyles("ghost", "sm"),
+              noUnderline(),
+              text("current")
+            ].flat(),
+            children: [{ type: "text", value: props2.title }]
+          }
+        ]
+      }
+    ]
+  }
+];
+var menuItem = (props2) => [
+  {
+    type: "instance",
+    component: "NavigationMenuItem",
+    children: [
+      {
+        type: "instance",
+        component: "NavigationMenuTrigger",
+        children: [
+          {
+            type: "instance",
+            component: "Button",
+            styles: [
+              getButtonStyles("ghost", "sm"),
+              property("--navigation-menu-trigger-icon-transform", "0deg"),
+              state(
+                [
+                  property(
+                    "--navigation-menu-trigger-icon-transform",
+                    "180deg"
+                  )
+                ],
+                "[data-state=open]"
+              )
+            ].flat(),
+            children: [
+              {
+                type: "instance",
+                component: "Text",
+                children: [{ type: "text", value: props2.title }]
+              },
+              {
+                type: "instance",
+                component: "Box",
+                label: "Icon Container",
+                // h-4 w-4 shrink-0 transition-transform duration-200
+                styles: [
+                  ml(1),
+                  property(
+                    "rotate",
+                    "--navigation-menu-trigger-icon-transform"
+                  ),
+                  h(4),
+                  w(4),
+                  shrink(0),
+                  transition("all"),
+                  duration(200)
+                ].flat(),
+                children: [
+                  {
+                    type: "instance",
+                    component: "HtmlEmbed",
+                    label: "Chevron Icon",
+                    props: [
+                      {
+                        type: "string",
+                        name: "code",
+                        value: ChevronDownIcon2
+                      }
+                    ],
+                    children: []
+                  }
+                ]
+              }
+            ]
+          }
+        ]
+      },
+      {
+        type: "instance",
+        component: "NavigationMenuContent",
+        // left-0 top-0 absolute w-max
+        styles: [
+          left(0),
+          top(0),
+          absolute(),
+          w("max"),
+          p(4)
+        ].flat(),
+        children: [
+          {
+            type: "instance",
+            component: "Box",
+            label: "Content",
+            styles: [flex(), gap(4), p(props2.padding)].flat(),
+            children: props2.children
+          }
+        ]
+      }
+    ]
+  }
+];
+var metaNavigationMenu = {
+  category: "radix",
+  order: 2,
+  type: "container",
+  description: "A collection of links for navigating websites.",
+  icon: NavigationMenuIcon,
+  presetStyle: presetStyle8,
+  template: [
+    {
+      type: "instance",
+      component: "NavigationMenu",
+      dataSources: {
+        menuValue: { type: "variable", initialValue: "" }
+      },
+      props: [
+        { type: "dataSource", name: "value", dataSourceName: "menuValue" },
+        {
+          name: "onValueChange",
+          type: "action",
+          value: [
+            {
+              type: "execute",
+              args: ["value"],
+              code: `menuValue = value`
+            }
+          ]
+        }
+      ],
+      // relative
+      // Omiting this: z-10 flex max-w-max flex-1 items-center justify-center
+      styles: [relative(), maxW("max")].flat(),
+      children: [
+        {
+          type: "instance",
+          component: "NavigationMenuList",
+          styles: [
+            // ul defaults in tailwind
+            p(0),
+            m(0),
+            // shadcdn styles
+            flex(),
+            flex(1),
+            list("none"),
+            items("center"),
+            justify("center"),
+            gap(1)
+          ].flat(),
+          children: [
+            ...menuItem({
+              title: "About",
+              padding: 2,
+              children: [
+                {
+                  type: "instance",
+                  component: "Box",
+                  styles: [
+                    bg("border"),
+                    p(4),
+                    w(48),
+                    rounded("md")
+                  ].flat(),
+                  children: [
+                    {
+                      type: "text",
+                      value: ""
+                    }
+                  ]
+                },
+                ...navItemsList({ count: 3, offset: 0 })
+              ]
+            }),
+            ...menuItem({
+              title: "Components",
+              padding: 0,
+              children: [
+                ...navItemsList({ count: 3, offset: 3 }),
+                ...navItemsList({ count: 3, offset: 6 })
+              ]
+            }),
+            ...menuItemLink({ title: "Standalone" })
+          ]
+        },
+        {
+          type: "instance",
+          component: "Box",
+          label: "Viewport Container",
+          // absolute left-0 top-full flex justify-center
+          styles: [
+            absolute(),
+            left(0),
+            top("full"),
+            flex(),
+            justify("center")
+          ].flat(),
+          children: [
+            {
+              type: "instance",
+              component: "NavigationMenuViewport",
+              /*
+                origin-top-center relative mt-1.5 w-full
+                overflow-hidden rounded-md border bg-popover text-popover-foreground shadow-lg
+                h-[var(--radix-navigation-menu-viewport-height)]
+                w-[var(--radix-navigation-menu-viewport-width)]
+                // anims
+                [animation-duration:150ms!important] [transition-duration:150ms!important]
+                data-[state=open]:animate-in data-[state=closed]:animate-out
+                data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-90
+              */
+              styles: [
+                relative(),
+                mt(1.5),
+                overflow("hidden"),
+                rounded("md"),
+                border(),
+                bg("popover"),
+                text("popoverForeground"),
+                shadow("lg"),
+                property(
+                  "height",
+                  "--radix-navigation-menu-viewport-height"
+                ),
+                property("width", "--radix-navigation-menu-viewport-width")
+              ].flat(),
+              children: []
+            }
+          ]
+        }
+      ]
+    }
+  ]
+};
+var metaNavigationMenuList = {
+  category: "hidden",
+  detachable: false,
+  type: "container",
+  icon: ListIcon,
+  requiredAncestors: ["NavigationMenu"],
+  presetStyle: presetStyle8,
+  label: "Menu List"
+};
+var metaNavigationMenuItem = {
+  category: "hidden",
+  type: "container",
+  icon: ListItemIcon,
+  requiredAncestors: ["NavigationMenu"],
+  presetStyle: presetStyle8,
+  indexWithinAncestor: "NavigationMenu",
+  label: "Menu Item"
+};
+var metaNavigationMenuTrigger = {
+  category: "hidden",
+  detachable: false,
+  stylable: false,
+  type: "container",
+  icon: TriggerIcon7,
+  requiredAncestors: ["NavigationMenuItem"],
+  presetStyle: presetStyle8,
+  label: "Menu Trigger"
+};
+var metaNavigationMenuContent = {
+  category: "hidden",
+  detachable: false,
+  type: "container",
+  icon: ContentIcon7,
+  requiredAncestors: ["NavigationMenuItem"],
+  indexWithinAncestor: "NavigationMenu",
+  presetStyle: presetStyle8,
+  label: "Menu Content"
+};
+var metaNavigationMenuLink = {
+  category: "hidden",
+  detachable: true,
+  type: "container",
+  stylable: false,
+  icon: BoxIcon,
+  // https://github.com/webstudio-is/webstudio/issues/2193
+  // requiredAncestors: ["NavigationMenuContent", "NavigationMenuItem"],
+  // Temporary restrict to NavigationMenu
+  requiredAncestors: ["NavigationMenu"],
+  presetStyle: presetStyle8,
+  label: "Accessible Link Wrapper"
+};
+var metaNavigationMenuViewport = {
+  category: "hidden",
+  detachable: true,
+  type: "container",
+  icon: ViewportIcon,
+  requiredAncestors: ["NavigationMenu"],
+  presetStyle: presetStyle8,
+  label: "Menu Viewport"
+};
+
+// src/select.ws.ts
+import {
+  SelectIcon,
+  TriggerIcon as TriggerIcon8,
+  FormTextFieldIcon,
+  ContentIcon as ContentIcon8,
+  ItemIcon as ItemIcon2,
+  ViewportIcon as ViewportIcon2,
+  TextIcon as TextIcon2,
+  CheckMarkIcon
+} from "@webstudio-is/icons/svg";
+import { button as button4, div as div8, span } from "@webstudio-is/react-sdk/css-normalize";
+var presetStyle9 = {
+  div: div8
+};
+var createSelectItem = ({
+  props: props2,
+  children
+}) => ({
+  type: "instance",
+  component: "SelectItem",
+  props: props2,
+  // relative flex w-full cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none
+  // focus:bg-accent focus:text-accent-foreground
+  // data-[disabled]:pointer-events-none data-[disabled]:opacity-50
+  styles: [
+    relative(),
+    flex(),
+    w("full"),
+    cursor2("default"),
+    select("none"),
+    items("center"),
+    rounded("md"),
+    py(1.5),
+    pl(8),
+    pr(2),
+    text("sm"),
+    outline("none"),
+    focus([bg("accent"), text("accentForeground")].flat()),
+    state(
+      [pointerEvents("none"), opacity2(50)].flat(),
+      "[data-disabled]"
+    )
+  ].flat(),
+  children: [
+    {
+      type: "instance",
+      component: "SelectItemIndicator",
+      // absolute left-2 flex h-3.5 w-3.5 items-center justify-center
+      styles: [
+        absolute(),
+        left(2),
+        flex(),
+        h(3.5),
+        w(3.5),
+        items("center"),
+        justify("center")
+      ].flat(),
+      children: [
+        {
+          type: "instance",
+          component: "HtmlEmbed",
+          label: "Indicator Icon",
+          props: [
+            {
+              type: "string",
+              name: "code",
+              value: CheckMarkIcon
+            }
+          ],
+          children: []
+        }
+      ]
+    },
+    {
+      type: "instance",
+      component: "SelectItemText",
+      children
+    }
+  ]
+});
+var metaSelect = {
+  category: "radix",
+  order: 10,
+  type: "container",
+  icon: SelectIcon,
+  stylable: false,
+  description: "Use within a form to give your users a list of options to choose from.",
+  template: [
+    {
+      type: "instance",
+      component: "Select",
+      dataSources: {
+        selectValue: { type: "variable", initialValue: "" },
+        selectOpen: { type: "variable", initialValue: false }
+      },
+      props: [
+        {
+          name: "value",
+          type: "dataSource",
+          dataSourceName: "selectValue"
+        },
+        {
+          name: "onValueChange",
+          type: "action",
+          value: [
+            { type: "execute", args: ["value"], code: `selectValue = value` }
+          ]
+        },
+        {
+          name: "open",
+          type: "dataSource",
+          dataSourceName: "selectOpen"
+        },
+        {
+          name: "onOpenChange",
+          type: "action",
+          value: [
+            { type: "execute", args: ["open"], code: `selectOpen = open` }
+          ]
+        }
+      ],
+      children: [
+        {
+          type: "instance",
+          component: "SelectTrigger",
+          // flex h-10 w-full items-center justify-between rounded-md border border-input bg-background px-3 py-2 text-sm ring-offset-background
+          // placeholder:text-muted-foreground
+          // focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2
+          // disabled:cursor-not-allowed disabled:opacity-50
+          styles: [
+            flex(),
+            h(10),
+            w("full"),
+            items("center"),
+            justify("between"),
+            rounded("md"),
+            border(),
+            border("input"),
+            bg("background"),
+            px(3),
+            py(2),
+            text("sm"),
+            state([text("mutedForeground")].flat(), "::placeholder"),
+            focus(
+              [outline("none"), ring("ring", 2, "background", 2)].flat()
+            ),
+            disabled([cursor2("not-allowed"), opacity2(50)].flat())
+          ].flat(),
+          children: [
+            {
+              type: "instance",
+              component: "SelectValue",
+              props: [{ name: "placeholder", type: "string", value: "Theme" }],
+              children: []
+            }
+          ]
+        },
+        {
+          type: "instance",
+          component: "SelectContent",
+          // relative z-50 min-w-[8rem] overflow-hidden rounded-md border bg-popover text-popover-foreground shadow-md
+          // data-[state=open]:animate-in
+          // data-[state=closed]:animate-out data-[state=closed]:fade-out-0
+          // data-[state=open]:fade-in-0
+          // data-[state=closed]:zoom-out-95
+          // data-[state=open]:zoom-in-95
+          // data-[side=bottom]:slide-in-from-top-2
+          // data-[side=left]:slide-in-from-right-2
+          // data-[side=right]:slide-in-from-left-2
+          // data-[side=top]:slide-in-from-bottom-2
+          // position=popper
+          // data-[side=bottom]:translate-y-1
+          // data-[side=left]:-translate-x-1
+          // data-[side=right]:translate-x-1
+          // data-[side=top]:-translate-y-1
+          styles: [
+            relative(),
+            z(50),
+            property("minWidth", "8rem"),
+            overflow("hidden"),
+            rounded("md"),
+            border(),
+            bg("popover"),
+            text("popoverForeground"),
+            shadow("md")
+          ].flat(),
+          children: [
+            {
+              type: "instance",
+              component: "SelectViewport",
+              // p-1
+              // position=popper
+              // h-[var(--radix-select-trigger-height)] w-full min-w-[var(--radix-select-trigger-width)]
+              styles: [
+                p(1),
+                property("height", "--radix-select-trigger-height"),
+                w("full"),
+                property("minWidth", "--radix-select-trigger-width")
+              ].flat(),
+              children: [
+                createSelectItem({
+                  props: [{ name: "value", type: "string", value: "light" }],
+                  children: [{ type: "text", value: "Light" }]
+                }),
+                createSelectItem({
+                  props: [{ name: "value", type: "string", value: "dark" }],
+                  children: [{ type: "text", value: "Dark" }]
+                }),
+                createSelectItem({
+                  props: [{ name: "value", type: "string", value: "system" }],
+                  children: [{ type: "text", value: "System" }]
+                })
+              ]
+            }
+          ]
+        }
+      ]
+    }
+  ]
+};
+var metaSelectTrigger = {
+  category: "hidden",
+  type: "container",
+  icon: TriggerIcon8,
+  detachable: false,
+  presetStyle: {
+    button: button4
+  }
+};
+var metaSelectValue = {
+  category: "hidden",
+  type: "container",
+  label: "Value",
+  icon: FormTextFieldIcon,
+  detachable: false,
+  presetStyle: {
+    span
+  }
+};
+var metaSelectContent = {
+  category: "hidden",
+  type: "container",
+  icon: ContentIcon8,
+  detachable: false,
+  presetStyle: presetStyle9
+};
+var metaSelectViewport = {
+  category: "hidden",
+  type: "container",
+  icon: ViewportIcon2,
+  detachable: false,
+  presetStyle: presetStyle9
+};
+var metaSelectItem = {
+  category: "hidden",
+  type: "container",
+  icon: ItemIcon2,
+  requiredAncestors: ["SelectViewport"],
+  presetStyle: presetStyle9
+};
+var metaSelectItemIndicator = {
+  category: "hidden",
+  type: "container",
+  label: "Indicator",
+  icon: CheckMarkIcon,
+  detachable: false,
+  requiredAncestors: ["SelectItem"],
+  presetStyle: {
+    span
+  }
+};
+var metaSelectItemText = {
+  category: "hidden",
+  type: "container",
+  label: "Item Text",
+  icon: TextIcon2,
+  detachable: false,
+  requiredAncestors: ["SelectItem"],
+  presetStyle: {
+    span
+  }
+};
+
+// src/switch.ws.ts
+import { SwitchIcon, TriggerIcon as TriggerIcon9 } from "@webstudio-is/icons/svg";
+import {
+  defaultStates as defaultStates5
+} from "@webstudio-is/react-sdk";
+import { button as button5, span as span2 } from "@webstudio-is/react-sdk/css-normalize";
+var metaSwitch = {
+  category: "radix",
+  order: 11,
+  type: "container",
+  description: "A control that allows the user to toggle between checked and not checked.",
+  icon: SwitchIcon,
+  states: [
+    ...defaultStates5,
+    {
+      label: "Checked",
+      selector: "[data-state=checked]",
+      category: "component-states"
+    },
+    {
+      label: "Unchecked",
+      selector: "[data-state=unchecked]",
+      category: "component-states"
+    }
+  ],
+  presetStyle: {
+    button: [button5, buttonReset].flat()
+  },
+  template: [
+    {
+      type: "instance",
+      component: "Switch",
+      dataSources: {
+        switchChecked: { type: "variable", initialValue: false }
+      },
+      props: [
+        {
+          name: "checked",
+          type: "dataSource",
+          dataSourceName: "switchChecked"
+        },
+        {
+          name: "onCheckedChange",
+          type: "action",
+          value: [
+            {
+              type: "execute",
+              args: ["checked"],
+              code: `switchChecked = checked`
+            }
+          ]
+        }
+      ],
+      // peer inline-flex h-[24px] w-[44px] shrink-0 cursor-pointer items-center rounded-full border-2 border-transparent transition-colors
+      // focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-background
+      // disabled:cursor-not-allowed disabled:opacity-50
+      // data-[state=checked]:bg-primary
+      // data-[state=unchecked]:bg-input
+      styles: [
+        // We are not supporting peer like styles yet
+        inlineFlex(),
+        property("height", "24px"),
+        property("width", "44px"),
+        shrink(0),
+        cursor2("pointer"),
+        items("center"),
+        rounded("full"),
+        border(2),
+        border("transparent"),
+        transition("all"),
+        focusVisible(
+          [outline("none"), ring("ring", 2, "background", 2)].flat()
+        ),
+        disabled([cursor2("not-allowed"), opacity2(50)].flat()),
+        state([bg("primary")].flat(), "[data-state=checked]"),
+        state([bg("input")].flat(), "[data-state=unchecked]")
+      ].flat(),
+      children: [
+        {
+          type: "instance",
+          component: "SwitchThumb",
+          // pointer-events-none block h-5 w-5 rounded-full bg-background shadow-lg ring-0 transition-transform
+          // data-[state=checked]:translate-x-5
+          // data-[state=unchecked]:translate-x-0
+          styles: [
+            pointerEvents("none"),
+            block(),
+            h(5),
+            w(5),
+            rounded("full"),
+            bg("background"),
+            shadow("lg"),
+            transition("transform"),
+            state(
+              [property("transform", "translateX(20px)")].flat(),
+              "[data-state=checked]"
+            ),
+            state(
+              [property("transform", "translateX(0px)")].flat(),
+              "[data-state=unchecked]"
+            )
+          ].flat(),
+          children: []
+        }
+      ]
+    }
+  ]
+};
+var metaSwitchThumb = {
+  category: "hidden",
+  type: "container",
+  detachable: false,
+  icon: TriggerIcon9,
+  states: [
+    ...defaultStates5,
+    {
+      label: "Checked",
+      selector: "[data-state=checked]",
+      category: "component-states"
+    },
+    {
+      label: "Unchecked",
+      selector: "[data-state=unchecked]",
+      category: "component-states"
+    }
+  ],
+  presetStyle: {
+    span: span2
+  }
+};
+
+// src/checkbox.ws.ts
+import {
+  CheckMarkIcon as CheckMarkIcon2,
+  CheckboxCheckedIcon,
+  TriggerIcon as TriggerIcon10
+} from "@webstudio-is/icons/svg";
+import {
+  defaultStates as defaultStates6
+} from "@webstudio-is/react-sdk";
+import { button as button6, span as span3 } from "@webstudio-is/react-sdk/css-normalize";
+var metaCheckbox = {
+  category: "radix",
+  order: 101,
+  type: "container",
+  icon: CheckboxCheckedIcon,
+  description: "Use within a form to allow your users to toggle between checked and not checked. Group checkboxes by matching their \u201CName\u201D properties. Unlike radios, any number of checkboxes in a group can be checked.",
+  states: [
+    ...defaultStates6,
+    {
+      label: "Checked",
+      selector: "[data-state=checked]",
+      category: "component-states"
+    },
+    {
+      label: "Unchecked",
+      selector: "[data-state=unchecked]",
+      category: "component-states"
+    }
+  ],
+  presetStyle: {
+    button: [button6, buttonReset].flat()
+  },
+  template: [
+    {
+      type: "instance",
+      component: "Label",
+      label: "Checkbox Field",
+      styles: [flex(), gap(2), items("center")].flat(),
+      children: [
+        {
+          type: "instance",
+          component: "Checkbox",
+          dataSources: {
+            checkboxChecked: { type: "variable", initialValue: false }
+          },
+          props: [
+            {
+              name: "checked",
+              type: "dataSource",
+              dataSourceName: "checkboxChecked"
+            },
+            {
+              name: "onCheckedChange",
+              type: "action",
+              value: [
+                {
+                  type: "execute",
+                  args: ["checked"],
+                  code: `checkboxChecked = checked`
+                }
+              ]
+            }
+          ],
+          // peer h-4 w-4 shrink-0 rounded-sm border border-primary ring-offset-background
+          // focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2
+          // disabled:cursor-not-allowed disabled:opacity-50
+          // data-[state=checked]:bg-primary
+          // data-[state=checked]:text-primary-foreground",
+          styles: [
+            // We are not supporting peer like styles yet
+            h(4),
+            w(4),
+            shrink(0),
+            rounded("sm"),
+            border(),
+            border("primary"),
+            focusVisible(
+              [outline("none"), ring("ring", 2, "background", 2)].flat()
+            ),
+            disabled([cursor2("not-allowed"), opacity2(50)].flat()),
+            state(
+              [bg("primary"), text("primaryForeground")].flat(),
+              "[data-state=checked]"
+            )
+          ].flat(),
+          children: [
+            {
+              type: "instance",
+              component: "CheckboxIndicator",
+              // flex items-center justify-center text-current
+              styles: [
+                flex(),
+                items("center"),
+                justify("center"),
+                text("current")
+              ].flat(),
+              children: [
+                {
+                  type: "instance",
+                  component: "HtmlEmbed",
+                  label: "Indicator Icon",
+                  props: [
+                    {
+                      type: "string",
+                      name: "code",
+                      value: CheckMarkIcon2
+                    }
+                  ],
+                  children: []
+                }
+              ]
+            }
+          ]
+        },
+        {
+          type: "instance",
+          component: "Text",
+          label: "Checkbox Label",
+          props: [{ name: "tag", type: "string", value: "span" }],
+          children: [{ type: "text", value: "Checkbox" }]
+        }
+      ]
+    }
+  ]
+};
+var metaCheckboxIndicator = {
+  category: "hidden",
+  type: "container",
+  detachable: false,
+  icon: TriggerIcon10,
+  states: defaultStates6,
+  presetStyle: {
+    span: span3
+  }
+};
+
+// src/radio-group.ws.ts
+import {
+  ItemIcon as ItemIcon3,
+  RadioCheckedIcon,
+  RadioDotIcon,
+  TriggerIcon as TriggerIcon11
+} from "@webstudio-is/icons/svg";
+import {
+  defaultStates as defaultStates7
+} from "@webstudio-is/react-sdk";
+import { button as button7, div as div9, span as span4 } from "@webstudio-is/react-sdk/css-normalize";
+var createRadioGroupItem = ({
+  value,
+  label: label2
+}) => ({
+  type: "instance",
+  component: "Label",
+  // flex items-center space-x-2
+  styles: [flex(), items("center"), gap(2)].flat(),
+  children: [
+    {
+      type: "instance",
+      component: "RadioGroupItem",
+      props: [{ name: "value", type: "string", value }],
+      // aspect-square h-4 w-4 rounded-full border border-primary text-primary ring-offset-background
+      // focus:outline-none
+      // focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2
+      // disabled:cursor-not-allowed disabled:opacity-50
+      styles: [
+        aspect("square"),
+        h(4),
+        w(4),
+        rounded("full"),
+        border(),
+        border("primary"),
+        text("primary"),
+        focusVisible(
+          [outline("none"), ring("ring", 2, "background", 2)].flat()
+        ),
+        disabled([cursor2("not-allowed"), opacity2(50)].flat())
+      ].flat(),
+      children: [
+        {
+          type: "instance",
+          component: "RadioGroupIndicator",
+          children: [
+            {
+              type: "instance",
+              component: "HtmlEmbed",
+              label: "Indicator Icon",
+              props: [
+                {
+                  type: "string",
+                  name: "code",
+                  value: RadioDotIcon
+                }
+              ],
+              children: []
+            }
+          ]
+        }
+      ]
+    },
+    {
+      type: "instance",
+      component: "Text",
+      children: [{ type: "text", value: label2 }]
+    }
+  ]
+});
+var metaRadioGroup = {
+  category: "radix",
+  order: 100,
+  type: "container",
+  description: "A set of checkable buttons\u2014known as radio buttons\u2014where no more than one of the buttons can be checked at a time.",
+  icon: RadioCheckedIcon,
+  states: [
+    ...defaultStates7,
+    {
+      label: "Checked",
+      selector: "[data-state=checked]",
+      category: "component-states"
+    },
+    {
+      label: "Unchecked",
+      selector: "[data-state=unchecked]",
+      category: "component-states"
+    }
+  ],
+  presetStyle: {
+    div: div9
+  },
+  template: [
+    {
+      type: "instance",
+      component: "RadioGroup",
+      dataSources: {
+        radioGroupValue: { type: "variable", initialValue: "" }
+      },
+      // grid gap-2
+      styles: [flex(), flex("col"), gap(2)].flat(),
+      props: [
+        {
+          type: "dataSource",
+          name: "value",
+          dataSourceName: "radioGroupValue"
+        },
+        {
+          name: "onValueChange",
+          type: "action",
+          value: [
+            {
+              type: "execute",
+              args: ["value"],
+              code: `radioGroupValue = value`
+            }
+          ]
+        }
+      ],
+      children: [
+        createRadioGroupItem({ value: "default", label: "Default" }),
+        createRadioGroupItem({ value: "comfortable", label: "Comfortable" }),
+        createRadioGroupItem({ value: "compact", label: "Compact" })
+      ]
+    }
+  ]
+};
+var metaRadioGroupItem = {
+  category: "hidden",
+  type: "container",
+  requiredAncestors: ["RadioGroup"],
+  icon: ItemIcon3,
+  states: defaultStates7,
+  presetStyle: {
+    button: [button7, buttonReset].flat()
+  }
+};
+var metaRadioGroupIndicator = {
+  category: "hidden",
+  type: "container",
+  detachable: false,
+  icon: TriggerIcon11,
+  states: defaultStates7,
+  presetStyle: {
+    span: span4
+  }
+};
 export {
+  metaAccordion as Accordion,
+  metaAccordionContent as AccordionContent,
+  metaAccordionHeader as AccordionHeader,
+  metaAccordionItem as AccordionItem,
+  metaAccordionTrigger as AccordionTrigger,
+  metaCheckbox as Checkbox,
+  metaCheckboxIndicator as CheckboxIndicator,
   metaCollapsible as Collapsible,
+  metaCollapsibleContent as CollapsibleContent,
   metaCollapsibleTrigger as CollapsibleTrigger,
-  metaCollapsibleContent as CollapsibleContent
-} from "./collapsible.ws";
-export {
   metaDialog as Dialog,
-  metaDialogTrigger as DialogTrigger,
-  metaDialogOverlay as DialogOverlay,
-  metaDialogContent as DialogContent,
   metaDialogClose as DialogClose,
+  metaDialogContent as DialogContent,
+  metaDialogDescription as DialogDescription,
+  metaDialogOverlay as DialogOverlay,
   metaDialogTitle as DialogTitle,
-  metaDialogDescription as DialogDescription
-} from "./dialog.ws";
-export { meta as Sheet } from "./sheet.ws";
-export {
-  metaPopover as Popover,
-  metaPopoverTrigger as PopoverTrigger,
-  metaPopoverContent as PopoverContent
-} from "./popover.ws";
-export {
-  metaTooltip as Tooltip,
-  metaTooltipTrigger as TooltipTrigger,
-  metaTooltipContent as TooltipContent
-} from "./tooltip.ws";
-export {
-  metaTabs as Tabs,
-  metaTabsList as TabsList,
-  metaTabsTrigger as TabsTrigger,
-  metaTabsContent as TabsContent
-} from "./tabs.ws";
-export { meta as Label } from "./label.ws";
-export {
-  metaAccordion as Accordion,
-  metaAccordionItem as AccordionItem,
-  metaAccordionHeader as AccordionHeader,
-  metaAccordionTrigger as AccordionTrigger,
-  metaAccordionContent as AccordionContent
-} from "./accordion.ws";
-export {
+  metaDialogTrigger as DialogTrigger,
+  meta2 as Label,
   metaNavigationMenu as NavigationMenu,
-  metaNavigationMenuList as NavigationMenuList,
-  metaNavigationMenuItem as NavigationMenuItem,
-  metaNavigationMenuTrigger as NavigationMenuTrigger,
   metaNavigationMenuContent as NavigationMenuContent,
+  metaNavigationMenuItem as NavigationMenuItem,
   metaNavigationMenuLink as NavigationMenuLink,
-  metaNavigationMenuViewport as NavigationMenuViewport
-} from "./navigation-menu.ws";
-export {
+  metaNavigationMenuList as NavigationMenuList,
+  metaNavigationMenuTrigger as NavigationMenuTrigger,
+  metaNavigationMenuViewport as NavigationMenuViewport,
+  metaPopover as Popover,
+  metaPopoverContent as PopoverContent,
+  metaPopoverTrigger as PopoverTrigger,
+  metaRadioGroup as RadioGroup,
+  metaRadioGroupIndicator as RadioGroupIndicator,
+  metaRadioGroupItem as RadioGroupItem,
   metaSelect as Select,
-  metaSelectTrigger as SelectTrigger,
-  metaSelectValue as SelectValue,
-  metaSelectViewport as SelectViewport,
   metaSelectContent as SelectContent,
   metaSelectItem as SelectItem,
   metaSelectItemIndicator as SelectItemIndicator,
-  metaSelectItemText as SelectItemText
-} from "./select.ws";
-export {
+  metaSelectItemText as SelectItemText,
+  metaSelectTrigger as SelectTrigger,
+  metaSelectValue as SelectValue,
+  metaSelectViewport as SelectViewport,
+  meta as Sheet,
   metaSwitch as Switch,
-  metaSwitchThumb as SwitchThumb
-} from "./switch.ws";
-export {
-  metaCheckbox as Checkbox,
-  metaCheckboxIndicator as CheckboxIndicator
-} from "./checkbox.ws";
-export {
-  metaRadioGroup as RadioGroup,
-  metaRadioGroupItem as RadioGroupItem,
-  metaRadioGroupIndicator as RadioGroupIndicator
-} from "./radio-group.ws";
+  metaSwitchThumb as SwitchThumb,
+  metaTabs as Tabs,
+  metaTabsContent as TabsContent,
+  metaTabsList as TabsList,
+  metaTabsTrigger as TabsTrigger,
+  metaTooltip as Tooltip,
+  metaTooltipContent as TooltipContent,
+  metaTooltipTrigger as TooltipTrigger
+};