@webstudio-is/sdk-components-react 0.168.0 → 0.174.0

package/lib/metas.js

@@ -23,6 +23,7 @@ import { EmbedIcon } from "@webstudio-is/icons/svg";
 
 // src/__generated__/html-embed.props.ts
 var props = {
+  className: { required: false, control: "text", type: "string" },
   clientOnly: { required: false, control: "boolean", type: "boolean" },
   code: { required: true, control: "text", type: "string" },
   executeScriptOnCanvas: {
@@ -33,13 +34,21 @@ var props = {
 };
 
 // src/html-embed.ws.ts
+var presetStyle = {
+  div: [
+    {
+      property: "display",
+      value: { type: "keyword", value: "contents" }
+    }
+  ]
+};
 var meta3 = {
   category: "general",
   type: "embed",
   label: "HTML Embed",
   description: "Used to add HTML code to the page, such as an SVG or script.",
   icon: EmbedIcon,
-  stylable: false,
+  presetStyle,
   order: 8
 };
 var propsMeta = {
@@ -60,7 +69,7 @@ var propsMeta = {
       type: "string"
     }
   },
-  initialProps: ["clientOnly", "executeScriptOnCanvas"]
+  initialProps: ["className", "clientOnly", "executeScriptOnCanvas"]
 };
 
 // src/content-embed.ws.ts
@@ -176,7 +185,7 @@ import {
   defaultStates
 } from "@webstudio-is/react-sdk";
 import { body } from "@webstudio-is/react-sdk/css-normalize";
-var presetStyle = {
+var presetStyle2 = {
   body: [
     ...body,
     {
@@ -194,7 +203,7 @@ var meta5 = {
   label: "Body",
   icon: BodyIcon,
   states: defaultStates,
-  presetStyle
+  presetStyle: presetStyle2
 };
 
 // src/box.ws.ts
@@ -214,7 +223,7 @@ import {
   nav,
   section
 } from "@webstudio-is/react-sdk/css-normalize";
-var presetStyle2 = {
+var presetStyle3 = {
   div,
   address,
   article,
@@ -233,7 +242,7 @@ var meta6 = {
   description: "A container for content. By default this is a Div, but the tag can be changed in settings.",
   icon: BoxIcon,
   states: defaultStates2,
-  presetStyle: presetStyle2,
+  presetStyle: presetStyle3,
   order: 0
 };
 
@@ -243,7 +252,7 @@ import {
   defaultStates as defaultStates3
 } from "@webstudio-is/react-sdk";
 import { div as div2 } from "@webstudio-is/react-sdk/css-normalize";
-var presetStyle3 = {
+var presetStyle4 = {
   div: [
     ...div2,
     {
@@ -259,7 +268,7 @@ var meta7 = {
   description: "A generic container for any text content that is not a heading or a link.",
   icon: TextIcon,
   states: defaultStates3,
-  presetStyle: presetStyle3,
+  presetStyle: presetStyle4,
   order: 0,
   template: [
     {
@@ -282,7 +291,7 @@ import {
   defaultStates as defaultStates4
 } from "@webstudio-is/react-sdk";
 import { h1, h2, h3, h4, h5, h6 } from "@webstudio-is/react-sdk/css-normalize";
-var presetStyle4 = {
+var presetStyle5 = {
   h1,
   h2,
   h3,
@@ -298,7 +307,7 @@ var meta8 = {
   icon: HeadingIcon,
   invalidAncestors: ["Heading"],
   states: defaultStates4,
-  presetStyle: presetStyle4,
+  presetStyle: presetStyle5,
   order: 1,
   template: [
     {
@@ -321,7 +330,7 @@ import {
   defaultStates as defaultStates5
 } from "@webstudio-is/react-sdk";
 import { p } from "@webstudio-is/react-sdk/css-normalize";
-var presetStyle5 = {
+var presetStyle6 = {
   p
 };
 var meta9 = {
@@ -332,7 +341,7 @@ var meta9 = {
   icon: TextAlignLeftIcon,
   invalidAncestors: ["Paragraph"],
   states: defaultStates5,
-  presetStyle: presetStyle5,
+  presetStyle: presetStyle6,
   order: 2,
   template: [
     {
@@ -730,6 +739,7 @@ var props2 = {
   },
   datatype: { required: false, control: "text", type: "string" },
   defaultChecked: { required: false, control: "boolean", type: "boolean" },
+  defaultValue: { required: false, control: "text", type: "string" },
   dir: {
     required: false,
     control: "text",
@@ -913,7 +923,7 @@ var props2 = {
 };
 
 // src/link.ws.ts
-var presetStyle6 = {
+var presetStyle7 = {
   a: [
     ...a,
     {
@@ -933,7 +943,7 @@ var meta10 = {
   description: "Use a link to send your users to another page, section, or resource. Configure links in the Settings panel.",
   icon: LinkIcon,
   invalidAncestors: ["Link", "Button"],
-  presetStyle: presetStyle6,
+  presetStyle: presetStyle7,
   order: 1,
   states: [
     ...defaultStates6,
@@ -987,7 +997,7 @@ import {
   defaultStates as defaultStates7
 } from "@webstudio-is/react-sdk";
 import { span } from "@webstudio-is/react-sdk/css-normalize";
-var presetStyle7 = {
+var presetStyle8 = {
   span
 };
 var meta12 = {
@@ -995,7 +1005,7 @@ var meta12 = {
   label: "Text",
   icon: PaintBrushIcon,
   states: defaultStates7,
-  presetStyle: presetStyle7
+  presetStyle: presetStyle8
 };
 
 // src/bold.ws.ts
@@ -1004,7 +1014,7 @@ import {
   defaultStates as defaultStates8
 } from "@webstudio-is/react-sdk";
 import { b } from "@webstudio-is/react-sdk/css-normalize";
-var presetStyle8 = {
+var presetStyle9 = {
   b
 };
 var meta13 = {
@@ -1012,7 +1022,7 @@ var meta13 = {
   label: "Bold Text",
   icon: BoldIcon,
   states: defaultStates8,
-  presetStyle: presetStyle8
+  presetStyle: presetStyle9
 };
 
 // src/italic.ws.ts
@@ -1021,7 +1031,7 @@ import {
   defaultStates as defaultStates9
 } from "@webstudio-is/react-sdk";
 import { i } from "@webstudio-is/react-sdk/css-normalize";
-var presetStyle9 = {
+var presetStyle10 = {
   i: [
     ...i,
     {
@@ -1035,7 +1045,7 @@ var meta14 = {
   label: "Italic Text",
   icon: TextItalicIcon,
   states: defaultStates9,
-  presetStyle: presetStyle9
+  presetStyle: presetStyle10
 };
 
 // src/superscript.ws.ts
@@ -1044,7 +1054,7 @@ import {
   defaultStates as defaultStates10
 } from "@webstudio-is/react-sdk";
 import { sup } from "@webstudio-is/react-sdk/css-normalize";
-var presetStyle10 = {
+var presetStyle11 = {
   sup
 };
 var meta15 = {
@@ -1052,7 +1062,7 @@ var meta15 = {
   label: "Superscript Text",
   icon: SuperscriptIcon,
   states: defaultStates10,
-  presetStyle: presetStyle10
+  presetStyle: presetStyle11
 };
 
 // src/subscript.ws.ts
@@ -1061,7 +1071,7 @@ import {
   defaultStates as defaultStates11
 } from "@webstudio-is/react-sdk";
 import { sub } from "@webstudio-is/react-sdk/css-normalize";
-var presetStyle11 = {
+var presetStyle12 = {
   sub
 };
 var meta16 = {
@@ -1069,7 +1079,7 @@ var meta16 = {
   label: "Subscript Text",
   icon: SubscriptIcon,
   states: defaultStates11,
-  presetStyle: presetStyle11
+  presetStyle: presetStyle12
 };
 
 // src/button.ws.ts
@@ -1078,7 +1088,7 @@ import {
   defaultStates as defaultStates12
 } from "@webstudio-is/react-sdk";
 import { button } from "@webstudio-is/react-sdk/css-normalize";
-var presetStyle12 = {
+var presetStyle13 = {
   button
 };
 var meta17 = {
@@ -1088,7 +1098,7 @@ var meta17 = {
   label: "Button",
   description: "Use a button to submit forms or trigger actions within a page. Do not use a button to navigate users to another resource or another page - that\u2019s what a link is used for.",
   icon: ButtonElementIcon,
-  presetStyle: presetStyle12,
+  presetStyle: presetStyle13,
   states: [
     ...defaultStates12,
     { selector: ":disabled", label: "Disabled" },
@@ -1116,7 +1126,7 @@ import {
   defaultStates as defaultStates13
 } from "@webstudio-is/react-sdk";
 import { input } from "@webstudio-is/react-sdk/css-normalize";
-var presetStyle13 = {
+var presetStyle14 = {
   input: [
     ...input,
     {
@@ -1132,7 +1142,7 @@ var meta18 = {
   label: "Text Input",
   description: "A single-line text input for collecting string data from your users.",
   icon: FormTextFieldIcon,
-  presetStyle: presetStyle13,
+  presetStyle: presetStyle14,
   order: 3,
   states: [
     ...defaultStates13,
@@ -1155,7 +1165,7 @@ import {
   defaultStates as defaultStates14
 } from "@webstudio-is/react-sdk";
 import { form } from "@webstudio-is/react-sdk/css-normalize";
-var presetStyle14 = {
+var presetStyle15 = {
   form: [
     ...form,
     { property: "minHeight", value: { type: "unit", unit: "px", value: 20 } }
@@ -1169,7 +1179,7 @@ var meta19 = {
   description: "Create filters, surveys, searches and more.",
   icon: FormIcon,
   states: defaultStates14,
-  presetStyle: presetStyle14,
+  presetStyle: presetStyle15,
   order: 0
 };
 
@@ -1574,6 +1584,7 @@ var props3 = {
     description: "Indicates the preferred method to decode the image."
   },
   defaultChecked: { required: false, control: "boolean", type: "boolean" },
+  defaultValue: { required: false, control: "text", type: "string" },
   dir: {
     required: false,
     control: "text",
@@ -1652,7 +1663,12 @@ var props3 = {
     description: "Determines whether the image will load as soon as possible (Eager), or when it scrolls into view (Lazy). Lazy loading is a great option for pages with many images because it can significantly reduce the time it takes for the page to load initially."
   },
   nonce: { required: false, control: "text", type: "string" },
-  optimize: { required: false, control: "boolean", type: "boolean" },
+  optimize: {
+    required: false,
+    control: "boolean",
+    type: "boolean",
+    defaultValue: true
+  },
   prefix: { required: false, control: "text", type: "string" },
   property: { required: false, control: "text", type: "string" },
   quality: { required: false, control: "number", type: "number" },
@@ -1762,7 +1778,7 @@ var props3 = {
 };
 
 // src/image.ws.ts
-var presetStyle15 = {
+var presetStyle16 = {
   img: [
     ...img,
     // Otherwise on new image insert onto canvas it can overfit screen size multiple times
@@ -1792,7 +1808,7 @@ var meta20 = {
   description: "Add an image asset to the page. Webstudio automatically converts images to WebP or AVIF format and makes them responsive for best performance.",
   icon: ImageIcon,
   states: defaultStates15,
-  presetStyle: presetStyle15,
+  presetStyle: presetStyle16,
   order: 0
 };
 var propsOverrides = {
@@ -1803,12 +1819,24 @@ var propsOverrides = {
     required: false
   }
 };
+var optimize = props3.optimize;
+optimize.description = "Optimize the image for enhanced performance.";
 var propsMeta3 = {
   props: {
     ...props3,
-    ...propsOverrides
-  },
-  initialProps: ["id", "className", "src", "width", "height", "alt", "loading"]
+    ...propsOverrides,
+    optimize
+  },
+  initialProps: [
+    "id",
+    "className",
+    "src",
+    "width",
+    "height",
+    "alt",
+    "loading",
+    "optimize"
+  ]
 };
 
 // src/blockquote.ws.ts
@@ -1816,7 +1844,7 @@ import { BlockquoteIcon } from "@webstudio-is/icons/svg";
 import {
   defaultStates as defaultStates16
 } from "@webstudio-is/react-sdk";
-var presetStyle16 = {
+var presetStyle17 = {
   blockquote: [
     {
       property: "marginTop",
@@ -1871,7 +1899,7 @@ var meta21 = {
   description: "Use to style a quote from an external source like an article or book.",
   icon: BlockquoteIcon,
   states: defaultStates16,
-  presetStyle: presetStyle16,
+  presetStyle: presetStyle17,
   order: 3,
   template: [
     {
@@ -1894,7 +1922,7 @@ import {
   defaultStates as defaultStates17
 } from "@webstudio-is/react-sdk";
 import { ol, ul } from "@webstudio-is/react-sdk/css-normalize";
-var presetStyle17 = {
+var presetStyle18 = {
   ol: [
     ...ol,
     {
@@ -1933,7 +1961,7 @@ var meta22 = {
   description: "Groups content, like links in a menu or steps in a recipe.",
   icon: ListIcon,
   states: defaultStates17,
-  presetStyle: presetStyle17,
+  presetStyle: presetStyle18,
   order: 3,
   template: [
     {
@@ -1984,7 +2012,7 @@ import {
   defaultStates as defaultStates18
 } from "@webstudio-is/react-sdk";
 import { li } from "@webstudio-is/react-sdk/css-normalize";
-var presetStyle18 = {
+var presetStyle19 = {
   li
 };
 var meta23 = {
@@ -1995,7 +2023,7 @@ var meta23 = {
   description: "Adds a new item to an existing list.",
   icon: ListItemIcon,
   states: defaultStates18,
-  presetStyle: presetStyle18,
+  presetStyle: presetStyle19,
   order: 4,
   template: [
     {
@@ -2018,7 +2046,7 @@ import {
   defaultStates as defaultStates19
 } from "@webstudio-is/react-sdk";
 import { hr } from "@webstudio-is/react-sdk/css-normalize";
-var presetStyle19 = {
+var presetStyle20 = {
   hr: [
     ...hr,
     {
@@ -2054,7 +2082,7 @@ var meta24 = {
   description: "Used to visually divide sections of content, helping to improve readability and organization within a webpage.",
   icon: DashIcon,
   states: defaultStates19,
-  presetStyle: presetStyle19,
+  presetStyle: presetStyle20,
   order: 5
 };
 
@@ -2440,6 +2468,7 @@ var props4 = {
   },
   datatype: { required: false, control: "text", type: "string" },
   defaultChecked: { required: false, control: "boolean", type: "boolean" },
+  defaultValue: { required: false, control: "text", type: "string" },
   dir: {
     required: false,
     control: "text",
@@ -2569,7 +2598,7 @@ var props4 = {
 };
 
 // src/code-text.ws.ts
-var presetStyle20 = {
+var presetStyle21 = {
   code: [
     ...code,
     {
@@ -2577,8 +2606,12 @@ var presetStyle20 = {
       value: { type: "keyword", value: "block" }
     },
     {
-      property: "whiteSpace",
-      value: { type: "keyword", value: "pre-wrap" }
+      property: "whiteSpaceCollapse",
+      value: { type: "keyword", value: "preserve" }
+    },
+    {
+      property: "textWrapMode",
+      value: { type: "keyword", value: "wrap" }
     },
     {
       property: "paddingLeft",
@@ -2602,7 +2635,7 @@ var meta25 = {
   icon: CodeTextIcon,
   invalidAncestors: ["CodeText"],
   states: defaultStates20,
-  presetStyle: presetStyle20,
+  presetStyle: presetStyle21,
   order: 9
 };
 var propsMeta4 = {
@@ -2998,6 +3031,7 @@ var props5 = {
   },
   datatype: { required: false, control: "text", type: "string" },
   defaultChecked: { required: false, control: "boolean", type: "boolean" },
+  defaultValue: { required: false, control: "text", type: "string" },
   dir: {
     required: false,
     control: "text",
@@ -3139,7 +3173,7 @@ var props5 = {
 };
 
 // src/label.ws.ts
-var presetStyle21 = {
+var presetStyle22 = {
   label: [
     ...label,
     { property: "display", value: { type: "keyword", value: "block" } }
@@ -3152,7 +3186,7 @@ var meta26 = {
   label: "Input Label",
   icon: LabelIcon,
   states: defaultStates21,
-  presetStyle: presetStyle21,
+  presetStyle: presetStyle22,
   order: 2,
   template: [
     {
@@ -3179,7 +3213,7 @@ import {
   defaultStates as defaultStates22
 } from "@webstudio-is/react-sdk";
 import { textarea } from "@webstudio-is/react-sdk/css-normalize";
-var presetStyle22 = {
+var presetStyle23 = {
   textarea: [
     ...textarea,
     // resize doesn't work well while on canvas
@@ -3196,7 +3230,7 @@ var meta27 = {
   label: "Text Area",
   description: "A multi-line text input for collecting longer string data from your users.",
   icon: FormTextAreaIcon,
-  presetStyle: presetStyle22,
+  presetStyle: presetStyle23,
   order: 4,
   invalidAncestors: ["Button", "Link"],
   states: [
@@ -3220,7 +3254,7 @@ import {
   defaultStates as defaultStates23
 } from "@webstudio-is/react-sdk";
 import { radio } from "@webstudio-is/react-sdk/css-normalize";
-var presetStyle23 = {
+var presetStyle24 = {
   input: [
     ...radio,
     {
@@ -3236,7 +3270,7 @@ var meta28 = {
   label: "Radio",
   description: "Use within a form to allow your users to select a single option from a set of mutually exclusive choices. Group multiple radios by matching their \u201CName\u201D properties.",
   icon: RadioCheckedIcon,
-  presetStyle: presetStyle23,
+  presetStyle: presetStyle24,
   order: 5,
   states: [
     ...defaultStates23,
@@ -3274,7 +3308,7 @@ import {
   defaultStates as defaultStates24
 } from "@webstudio-is/react-sdk";
 import { checkbox } from "@webstudio-is/react-sdk/css-normalize";
-var presetStyle24 = {
+var presetStyle25 = {
   input: [
     ...checkbox,
     {
@@ -3290,7 +3324,7 @@ var meta29 = {
   label: "Checkbox",
   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.",
   icon: CheckboxCheckedIcon,
-  presetStyle: presetStyle24,
+  presetStyle: presetStyle25,
   order: 6,
   states: [
     ...defaultStates24,
@@ -3327,7 +3361,7 @@ import {
   defaultStates as defaultStates25
 } from "@webstudio-is/react-sdk";
 import { div as div3 } from "@webstudio-is/react-sdk/css-normalize";
-var presetStyle25 = {
+var presetStyle26 = {
   div: div3
 };
 var meta30 = {
@@ -3338,7 +3372,7 @@ var meta30 = {
   order: 1,
   icon: VimeoIcon,
   states: defaultStates25,
-  presetStyle: presetStyle25,
+  presetStyle: presetStyle26,
   invalidAncestors: ["Button", "Heading", "Link"],
   template: [
     {
@@ -4025,6 +4059,7 @@ var props6 = {
     description: "Indicates the preferred method to decode the image."
   },
   defaultChecked: { required: false, control: "boolean", type: "boolean" },
+  defaultValue: { required: false, control: "text", type: "string" },
   dir: {
     required: false,
     control: "text",
@@ -4229,7 +4264,7 @@ import {
 } from "@webstudio-is/react-sdk";
 import { ButtonElementIcon as ButtonElementIcon2 } from "@webstudio-is/icons/svg";
 import { button as button2 } from "@webstudio-is/react-sdk/css-normalize";
-var presetStyle26 = {
+var presetStyle27 = {
   button: button2
 };
 var meta32 = {
@@ -4239,7 +4274,7 @@ var meta32 = {
   requiredAncestors: ["Vimeo"],
   label: "Play Button",
   icon: ButtonElementIcon2,
-  presetStyle: presetStyle26,
+  presetStyle: presetStyle27,
   states: defaultStates26
 };
 
@@ -4249,14 +4284,14 @@ import {
 } from "@webstudio-is/react-sdk";
 import { div as div4 } from "@webstudio-is/react-sdk/css-normalize";
 import { BoxIcon as BoxIcon2 } from "@webstudio-is/icons/svg";
-var presetStyle27 = {
+var presetStyle28 = {
   div: div4
 };
 var meta33 = {
   type: "container",
   icon: BoxIcon2,
   states: defaultStates27,
-  presetStyle: presetStyle27,
+  presetStyle: presetStyle28,
   category: "hidden",
   label: "Spinner",
   requiredAncestors: ["Vimeo"]
@@ -4280,7 +4315,7 @@ import {
   defaultStates as defaultStates28
 } from "@webstudio-is/react-sdk";
 import { time } from "@webstudio-is/react-sdk/css-normalize";
-var presetStyle28 = {
+var presetStyle29 = {
   time
 };
 var meta35 = {
@@ -4289,9 +4324,131 @@ var meta35 = {
   description: "Converts machine-readable date and time to a human-readable format.",
   icon: CalendarIcon,
   states: defaultStates28,
-  presetStyle: presetStyle28,
+  presetStyle: presetStyle29,
   order: 4
 };
+
+// src/select.ws.ts
+import { SelectIcon } from "@webstudio-is/icons/svg";
+import {
+  defaultStates as defaultStates29
+} from "@webstudio-is/react-sdk";
+import { select } from "@webstudio-is/react-sdk/css-normalize";
+var presetStyle30 = {
+  select: [
+    ...select,
+    {
+      property: "display",
+      value: { type: "keyword", value: "block" }
+    }
+  ]
+};
+var meta36 = {
+  category: "forms",
+  invalidAncestors: ["Button", "Link"],
+  type: "container",
+  label: "Select",
+  description: "A drop-down menu for users to select a single option from a predefined list.",
+  icon: SelectIcon,
+  presetStyle: presetStyle30,
+  order: 4,
+  states: [
+    ...defaultStates29,
+    { selector: "::placeholder", label: "Placeholder" },
+    { selector: ":valid", label: "Valid" },
+    { selector: ":invalid", label: "Invalid" },
+    { selector: ":required", label: "Required" },
+    { selector: ":optional", label: "Optional" }
+  ],
+  template: [
+    {
+      type: "instance",
+      component: "Select",
+      label: "Select",
+      children: [
+        {
+          type: "instance",
+          component: "Option",
+          label: "Option",
+          props: [
+            { type: "string", name: "label", value: "Please choose an option" },
+            { type: "string", name: "value", value: "" }
+          ],
+          children: []
+        },
+        {
+          type: "instance",
+          component: "Option",
+          label: "Option",
+          props: [
+            { type: "string", name: "label", value: "Option A" },
+            { type: "string", name: "value", value: "a" }
+          ],
+          children: []
+        },
+        {
+          type: "instance",
+          component: "Option",
+          label: "Option",
+          props: [
+            { type: "string", name: "label", value: "Option B" },
+            { type: "string", name: "value", value: "b" }
+          ],
+          children: []
+        },
+        {
+          type: "instance",
+          component: "Option",
+          label: "Option",
+          props: [
+            { type: "string", name: "label", value: "Option C" },
+            { type: "string", name: "value", value: "c" }
+          ],
+          children: []
+        }
+      ]
+    }
+  ]
+};
+
+// src/option.ws.ts
+import { ItemIcon } from "@webstudio-is/icons/svg";
+import "@webstudio-is/react-sdk";
+var presetStyle31 = {
+  option: [
+    {
+      property: "backgroundColor",
+      state: ":checked",
+      value: {
+        type: "rgb",
+        alpha: 1,
+        r: 209,
+        g: 209,
+        b: 209
+      }
+    }
+  ]
+};
+var meta37 = {
+  category: "hidden",
+  // @todo: requiredAncestors should be ["Select", "Optgroup", "Datalist"] but that gives unreadable error when adding Select onto Canvas
+  requiredAncestors: ["Select"],
+  type: "control",
+  label: "Option",
+  description: "An item within a drop-down menu that users can select as their chosen value.",
+  icon: ItemIcon,
+  presetStyle: presetStyle31,
+  states: [
+    // Applies when option is being activated (clicked)
+    { selector: ":active", label: "Active" },
+    // Applies to the currently selected option
+    { selector: ":checked", label: "Checked" },
+    // For <option> elements: The :default pseudo-class selects the <option> that has the selected attribute when the page loads. This is true even if the user later selects a different option.
+    { selector: ":default", label: "Default" },
+    { selector: ":hover", label: "Hover" },
+    { selector: ":disabled", label: "Disabled" }
+  ]
+};
 export {
   meta21 as Blockquote,
   meta5 as Body,
@@ -4312,9 +4469,11 @@ export {
   meta10 as Link,
   meta22 as List,
   meta23 as ListItem,
+  meta37 as Option,
   meta9 as Paragraph,
   meta28 as RadioButton,
   meta11 as RichTextLink,
+  meta36 as Select,
   meta24 as Separator,
   meta as Slot,
   meta12 as Span,