@webstudio-is/react-sdk 0.145.0 → 0.163.0

package/lib/css/normalize.js

@@ -60,6 +60,7 @@ var nav = baseStyle;
 var section = baseStyle;
 var form = baseStyle;
 var label = baseStyle;
+var time = baseStyle;
 var h1 = baseStyle;
 var h2 = baseStyle;
 var h3 = baseStyle;
@@ -375,5 +376,6 @@ export {
   sup,
   table,
   textarea,
+  time,
   ul
 };

package/lib/index.js

@@ -214,8 +214,108 @@ var getPresetStyleRules = (component, presetStyle) => {
 // src/css/css.ts
 import {
   createRegularStyleSheet,
-  createAtomicStyleSheet
+  generateAtomic
 } from "@webstudio-is/css-engine";
+
+// src/core-components.ts
+import { ListViewIcon, PaintBrushIcon } from "@webstudio-is/icons/svg";
+var portalComponent = "Slot";
+var collectionComponent = "ws:collection";
+var collectionMeta = {
+  category: "data",
+  order: 2,
+  type: "container",
+  label: "Collection",
+  icon: ListViewIcon,
+  stylable: false,
+  template: [
+    {
+      type: "instance",
+      component: collectionComponent,
+      props: [
+        {
+          name: "data",
+          type: "json",
+          value: [
+            "Collection Item 1",
+            "Collection Item 2",
+            "Collection Item 3"
+          ]
+        },
+        {
+          name: "item",
+          type: "parameter",
+          variableName: "collectionItem",
+          variableAlias: "Collection Item"
+        }
+      ],
+      children: [
+        {
+          type: "instance",
+          component: "Box",
+          children: [{ type: "expression", value: "collectionItem" }]
+        }
+      ]
+    }
+  ]
+};
+var collectionPropsMeta = {
+  props: {
+    data: {
+      required: true,
+      control: "json",
+      type: "json"
+    }
+  },
+  initialProps: ["data"]
+};
+var descendantComponent = "ws:descendant";
+var descendantMeta = {
+  category: "internal",
+  type: "control",
+  label: "Descendant",
+  icon: PaintBrushIcon,
+  detachable: false
+};
+var descendantPropsMeta = {
+  props: {
+    selector: {
+      required: true,
+      type: "string",
+      control: "select",
+      options: [
+        " p",
+        " h1",
+        " h2",
+        " h3",
+        " h4",
+        " h5",
+        " h6",
+        " :where(strong, b)",
+        " :where(em, i)",
+        " a",
+        " img",
+        " blockquote",
+        " code",
+        " :where(ul, ol)",
+        " li",
+        " hr"
+      ]
+    }
+  },
+  initialProps: ["selector"]
+};
+var coreMetas = {
+  [collectionComponent]: collectionMeta,
+  [descendantComponent]: descendantMeta
+};
+var corePropsMetas = {
+  [collectionComponent]: collectionPropsMeta,
+  [descendantComponent]: descendantPropsMeta
+};
+var isCoreComponent = (component) => component === collectionComponent || component === descendantComponent;
+
+// src/css/css.ts
 var createImageValueTransformer = (assets, { assetBaseUrl }) => (styleValue) => {
   if (styleValue.type === "image" && styleValue.value.type === "asset") {
     const asset = assets.get(styleValue.value.value);
@@ -235,6 +335,8 @@ var createImageValueTransformer = (assets, { assetBaseUrl }) => (styleValue) =>
 };
 var generateCss = ({
   assets,
+  instances,
+  props,
   breakpoints,
   styles,
   styleSourceSelections,
@@ -242,12 +344,24 @@ var generateCss = ({
   assetBaseUrl,
   atomic
 }) => {
-  const classesMap = /* @__PURE__ */ new Map();
-  const regularSheet = createRegularStyleSheet({ name: "ssr-regular" });
-  const atomicSheet = atomic ? createAtomicStyleSheet({ name: "ssr-atomic" }) : void 0;
-  addGlobalRules(regularSheet, { assets, assetBaseUrl });
+  const sheet = createRegularStyleSheet({ name: "ssr" });
+  const parentIdByInstanceId = /* @__PURE__ */ new Map();
+  for (const instance of instances.values()) {
+    for (const child of instance.children) {
+      if (child.type === "id") {
+        parentIdByInstanceId.set(child.value, instance.id);
+      }
+    }
+  }
+  const descendantSelectorByInstanceId = /* @__PURE__ */ new Map();
+  for (const prop of props.values()) {
+    if (prop.name === "selector" && prop.type === "string") {
+      descendantSelectorByInstanceId.set(prop.instanceId, prop.value);
+    }
+  }
+  addGlobalRules(sheet, { assets, assetBaseUrl });
   for (const breakpoint of breakpoints.values()) {
-    (atomicSheet ?? regularSheet).addMediaRule(breakpoint.id, breakpoint);
+    sheet.addMediaRule(breakpoint.id, breakpoint);
   }
   for (const [component, meta] of componentMetas) {
     const presetStyle = meta.presetStyle;
@@ -256,35 +370,52 @@ var generateCss = ({
     }
     const rules = getPresetStyleRules(component, presetStyle);
     for (const [selector, style] of rules) {
-      regularSheet.addStyleRule({ style }, selector);
+      sheet.addStyleRule({ style }, selector);
     }
   }
-  const styleRules = getStyleRules(styles, styleSourceSelections);
   const imageValueTransformer = createImageValueTransformer(assets, {
     assetBaseUrl
   });
-  for (const { breakpointId, instanceId, state, style } of styleRules) {
-    if (atomicSheet) {
-      const { classes } = atomicSheet.addStyleRule(
-        { breakpoint: breakpointId, style },
-        state,
-        imageValueTransformer
-      );
-      classesMap.set(instanceId, [
-        ...classesMap.get(instanceId) ?? [],
-        ...classes
-      ]);
-      continue;
+  sheet.setTransformer(imageValueTransformer);
+  for (const styleDecl of styles.values()) {
+    const rule = sheet.addMixinRule(styleDecl.styleSourceId);
+    rule.setDeclaration({
+      breakpoint: styleDecl.breakpointId,
+      selector: styleDecl.state ?? "",
+      property: styleDecl.property,
+      value: styleDecl.value
+    });
+  }
+  const instanceByRule = /* @__PURE__ */ new Map();
+  for (const selection of styleSourceSelections.values()) {
+    let { instanceId } = selection;
+    const { values } = selection;
+    let descendantSuffix = "";
+    const instance = instances.get(instanceId);
+    if (instance?.component === descendantComponent) {
+      const parentId = parentIdByInstanceId.get(instanceId);
+      const descendantSelector = descendantSelectorByInstanceId.get(instanceId);
+      if (parentId && descendantSelector) {
+        descendantSuffix = descendantSelector;
+        instanceId = parentId;
+      }
     }
-    regularSheet.addStyleRule(
-      { breakpoint: breakpointId, style },
-      `[${idAttribute}="${instanceId}"]${state ?? ""}`,
-      imageValueTransformer
+    const rule = sheet.addNestingRule(
+      `[${idAttribute}="${instanceId}"]`,
+      descendantSuffix
     );
+    rule.applyMixins(values);
+    instanceByRule.set(rule, instanceId);
+  }
+  if (atomic) {
+    return generateAtomic(sheet, {
+      getKey: (rule) => instanceByRule.get(rule) ?? "",
+      transformValue: imageValueTransformer
+    });
   }
   return {
-    cssText: regularSheet.cssText + (atomicSheet?.cssText ?? ""),
-    classesMap
+    cssText: sheet.cssText,
+    classesMap: /* @__PURE__ */ new Map()
   };
 };
 
@@ -405,65 +536,6 @@ var createInstanceElement = ({
   );
 };
 
-// src/core-components.ts
-import { ListViewIcon } from "@webstudio-is/icons/svg";
-var portalComponent = "Slot";
-var collectionComponent = "ws:collection";
-var collectionMeta = {
-  category: "data",
-  order: 7,
-  type: "container",
-  label: "Collection",
-  icon: ListViewIcon,
-  stylable: false,
-  template: [
-    {
-      type: "instance",
-      component: collectionComponent,
-      props: [
-        {
-          name: "data",
-          type: "json",
-          value: [
-            "Collection Item 1",
-            "Collection Item 2",
-            "Collection Item 3"
-          ]
-        },
-        {
-          name: "item",
-          type: "parameter",
-          variableName: "collectionItem",
-          variableAlias: "Collection Item"
-        }
-      ],
-      children: [
-        {
-          type: "instance",
-          component: "Box",
-          children: [{ type: "expression", value: "collectionItem" }]
-        }
-      ]
-    }
-  ]
-};
-var collectionPropsMeta = {
-  props: {
-    data: {
-      required: true,
-      control: "json",
-      type: "json"
-    }
-  },
-  initialProps: ["data"]
-};
-var coreMetas = {
-  [collectionComponent]: collectionMeta
-};
-var corePropsMetas = {
-  [collectionComponent]: collectionPropsMeta
-};
-
 // src/prop-meta.ts
 import { z } from "zod";
 var common = {
@@ -498,12 +570,10 @@ var Code = z.object({
   ...common,
   control: z.literal("code"),
   type: z.literal("string"),
-  defaultValue: z.string().optional(),
-  /**
-   * The number of rows in <textarea>. If set to 0 an <input> will be used instead.
-   * In line with Storybook team's plan: https://github.com/storybookjs/storybook/issues/21100
-   */
-  rows: z.number().optional()
+  defaultValue: z.string().optional()
+});
+var CodeText = Code.extend({
+  control: z.literal("codetext")
 });
 var Color = z.object({
   ...common,
@@ -604,6 +674,7 @@ var PropMeta = z.union([
   Range,
   Text,
   Code,
+  CodeText,
   Color,
   Boolean,
   Radio,
@@ -1011,7 +1082,9 @@ var componentCategories = [
   "media",
   "forms",
   "radix",
-  "hidden"
+  "xml",
+  "hidden",
+  "internal"
 ];
 var stateCategories = ["states", "component-states"];
 var ComponentState = z3.object({
@@ -1314,6 +1387,9 @@ className=${JSON.stringify(classes.join(" "))}`;
 `;
     }
   }
+  if (instance.component === descendantComponent) {
+    return "";
+  }
   if (conditionValue) {
     generatedElement += `}
 `;
@@ -1483,6 +1559,7 @@ export {
   createImageValueTransformer,
   createInstanceChildrenElements,
   defaultStates,
+  descendantComponent,
   generateCss,
   generateDataFromEmbedTemplate,
   generateJsxChildren,
@@ -1498,6 +1575,7 @@ export {
   getStyleRules,
   idAttribute,
   indexAttribute,
+  isCoreComponent,
   namespaceMeta,
   normalizeProps,
   portalComponent,

package/lib/types/components/component-meta.d.ts

@@ -73,7 +73,6 @@ declare const WsComponentPropsMeta: z.ZodObject<{
         control: z.ZodLiteral<"code">;
         type: z.ZodLiteral<"string">;
         defaultValue: z.ZodOptional<z.ZodString>;
-        rows: z.ZodOptional<z.ZodNumber>;
         label: z.ZodOptional<z.ZodString>;
         description: z.ZodOptional<z.ZodString>;
         required: z.ZodBoolean;
@@ -82,7 +81,6 @@ declare const WsComponentPropsMeta: z.ZodObject<{
         required: boolean;
         control: "code";
         defaultValue?: string | undefined;
-        rows?: number | undefined;
         label?: string | undefined;
         description?: string | undefined;
     }, {
@@ -90,9 +88,29 @@ declare const WsComponentPropsMeta: z.ZodObject<{
         required: boolean;
         control: "code";
         defaultValue?: string | undefined;
-        rows?: number | undefined;
         label?: string | undefined;
         description?: string | undefined;
+    }>, z.ZodObject<{
+        type: z.ZodLiteral<"string">;
+        required: z.ZodBoolean;
+        description: z.ZodOptional<z.ZodString>;
+        label: z.ZodOptional<z.ZodString>;
+        defaultValue: z.ZodOptional<z.ZodString>;
+        control: z.ZodLiteral<"codetext">;
+    }, "strip", z.ZodTypeAny, {
+        type: "string";
+        required: boolean;
+        control: "codetext";
+        description?: string | undefined;
+        label?: string | undefined;
+        defaultValue?: string | undefined;
+    }, {
+        type: "string";
+        required: boolean;
+        control: "codetext";
+        description?: string | undefined;
+        label?: string | undefined;
+        defaultValue?: string | undefined;
     }>, z.ZodObject<{
         control: z.ZodLiteral<"color">;
         type: z.ZodLiteral<"string">;
@@ -438,9 +456,15 @@ declare const WsComponentPropsMeta: z.ZodObject<{
         required: boolean;
         control: "code";
         defaultValue?: string | undefined;
-        rows?: number | undefined;
         label?: string | undefined;
         description?: string | undefined;
+    } | {
+        type: "string";
+        required: boolean;
+        control: "codetext";
+        description?: string | undefined;
+        label?: string | undefined;
+        defaultValue?: string | undefined;
     } | {
         type: "string";
         required: boolean;
@@ -576,9 +600,15 @@ declare const WsComponentPropsMeta: z.ZodObject<{
         required: boolean;
         control: "code";
         defaultValue?: string | undefined;
-        rows?: number | undefined;
         label?: string | undefined;
         description?: string | undefined;
+    } | {
+        type: "string";
+        required: boolean;
+        control: "codetext";
+        description?: string | undefined;
+        label?: string | undefined;
+        defaultValue?: string | undefined;
     } | {
         type: "string";
         required: boolean;
@@ -688,7 +718,7 @@ declare const WsComponentPropsMeta: z.ZodObject<{
     initialProps?: string[] | undefined;
 }>;
 export type WsComponentPropsMeta = z.infer<typeof WsComponentPropsMeta>;
-export declare const componentCategories: readonly ["general", "text", "data", "media", "forms", "radix", "hidden"];
+export declare const componentCategories: readonly ["general", "text", "data", "media", "forms", "radix", "xml", "hidden", "internal"];
 export declare const stateCategories: readonly ["states", "component-states"];
 export declare const ComponentState: z.ZodObject<{
     category: z.ZodOptional<z.ZodEnum<["states", "component-states"]>>;
@@ -706,7 +736,7 @@ export declare const ComponentState: z.ZodObject<{
 export type ComponentState = z.infer<typeof ComponentState>;
 export declare const defaultStates: ComponentState[];
 export declare const WsComponentMeta: z.ZodObject<{
-    category: z.ZodOptional<z.ZodEnum<["general", "text", "data", "media", "forms", "radix", "hidden"]>>;
+    category: z.ZodOptional<z.ZodEnum<["general", "text", "data", "media", "forms", "radix", "xml", "hidden", "internal"]>>;
     type: z.ZodEnum<["container", "control", "embed", "rich-text-child"]>;
     requiredAncestors: z.ZodOptional<z.ZodArray<z.ZodString, "many">>;
     invalidAncestors: z.ZodOptional<z.ZodArray<z.ZodString, "many">>;
@@ -3353,9 +3383,9 @@ export declare const WsComponentMeta: z.ZodObject<{
     }>]>, "many">>>;
     order: z.ZodOptional<z.ZodNumber>;
 }, "strip", z.ZodTypeAny, {
-    type: "embed" | "control" | "container" | "rich-text-child";
+    type: "control" | "embed" | "container" | "rich-text-child";
     icon: string;
-    category?: "data" | "text" | "hidden" | "media" | "general" | "forms" | "radix" | undefined;
+    category?: "data" | "xml" | "text" | "hidden" | "media" | "general" | "forms" | "radix" | "internal" | undefined;
     requiredAncestors?: string[] | undefined;
     invalidAncestors?: string[] | undefined;
     indexWithinAncestor?: string | undefined;
@@ -4246,9 +4276,9 @@ export declare const WsComponentMeta: z.ZodObject<{
     } | import("../embed-template").EmbedTemplateInstance)[] | undefined;
     order?: number | undefined;
 }, {
-    type: "embed" | "control" | "container" | "rich-text-child";
+    type: "control" | "embed" | "container" | "rich-text-child";
     icon: string;
-    category?: "data" | "text" | "hidden" | "media" | "general" | "forms" | "radix" | undefined;
+    category?: "data" | "xml" | "text" | "hidden" | "media" | "general" | "forms" | "radix" | "internal" | undefined;
     requiredAncestors?: string[] | undefined;
     invalidAncestors?: string[] | undefined;
     indexWithinAncestor?: string | undefined;

package/lib/types/core-components.d.ts

@@ -1,8 +1,10 @@
 import type { WsComponentMeta } from "./components/component-meta";
 export declare const portalComponent = "Slot";
 export declare const collectionComponent = "ws:collection";
+export declare const descendantComponent = "ws:descendant";
 export declare const coreMetas: {
     "ws:collection": WsComponentMeta;
+    "ws:descendant": WsComponentMeta;
 };
 export declare const corePropsMetas: {
     "ws:collection": {
@@ -33,9 +35,160 @@ export declare const corePropsMetas: {
             required: boolean;
             control: "code";
             defaultValue?: string | undefined;
+            label?: string | undefined;
+            description?: string | undefined;
+        } | {
+            type: "string";
+            required: boolean;
+            control: "codetext";
+            description?: string | undefined;
+            label?: string | undefined;
+            defaultValue?: string | undefined;
+        } | {
+            type: "string";
+            required: boolean;
+            control: "color";
+            defaultValue?: string | undefined;
+            label?: string | undefined;
+            description?: string | undefined;
+        } | {
+            type: "boolean";
+            required: boolean;
+            control: "boolean";
+            defaultValue?: boolean | undefined;
+            label?: string | undefined;
+            description?: string | undefined;
+        } | {
+            options: string[];
+            type: "string";
+            required: boolean;
+            control: "radio";
+            defaultValue?: string | undefined;
+            label?: string | undefined;
+            description?: string | undefined;
+        } | {
+            options: string[];
+            type: "string";
+            required: boolean;
+            control: "inline-radio";
+            defaultValue?: string | undefined;
+            label?: string | undefined;
+            description?: string | undefined;
+        } | {
+            options: string[];
+            type: "string";
+            required: boolean;
+            control: "select";
+            defaultValue?: string | undefined;
+            label?: string | undefined;
+            description?: string | undefined;
+        } | {
+            options: string[];
+            type: "string[]";
+            required: boolean;
+            control: "check";
+            defaultValue?: string[] | undefined;
+            label?: string | undefined;
+            description?: string | undefined;
+        } | {
+            options: string[];
+            type: "string[]";
+            required: boolean;
+            control: "inline-check";
+            defaultValue?: string[] | undefined;
+            label?: string | undefined;
+            description?: string | undefined;
+        } | {
+            options: string[];
+            type: "string[]";
+            required: boolean;
+            control: "multi-select";
+            defaultValue?: string[] | undefined;
+            label?: string | undefined;
+            description?: string | undefined;
+        } | {
+            type: "string";
+            required: boolean;
+            control: "file";
+            defaultValue?: string | undefined;
+            accept?: string | undefined;
+            label?: string | undefined;
+            description?: string | undefined;
+        } | {
+            type: "string";
+            required: boolean;
+            control: "url";
+            defaultValue?: string | undefined;
+            label?: string | undefined;
+            description?: string | undefined;
+        } | {
+            type: "json";
+            required: boolean;
+            control: "json";
+            defaultValue?: unknown;
+            label?: string | undefined;
+            description?: string | undefined;
+        } | {
+            type: "string";
+            required: boolean;
+            control: "date";
+            defaultValue?: string | undefined;
+            label?: string | undefined;
+            description?: string | undefined;
+        } | {
+            type: "action";
+            required: boolean;
+            control: "action";
+            defaultValue?: undefined;
+            label?: string | undefined;
+            description?: string | undefined;
+        } | {
+            type: "string";
+            required: boolean;
+            control: "textContent";
+            defaultValue?: string | undefined;
+            label?: string | undefined;
+            description?: string | undefined;
+        }>;
+        initialProps?: string[] | undefined;
+    };
+    "ws:descendant": {
+        props: Record<string, {
+            type: "number";
+            required: boolean;
+            control: "number";
+            defaultValue?: number | undefined;
+            label?: string | undefined;
+            description?: string | undefined;
+        } | {
+            type: "number";
+            required: boolean;
+            control: "range";
+            defaultValue?: number | undefined;
+            label?: string | undefined;
+            description?: string | undefined;
+        } | {
+            type: "string";
+            required: boolean;
+            control: "text";
+            defaultValue?: string | undefined;
             rows?: number | undefined;
             label?: string | undefined;
             description?: string | undefined;
+        } | {
+            type: "string";
+            required: boolean;
+            control: "code";
+            defaultValue?: string | undefined;
+            label?: string | undefined;
+            description?: string | undefined;
+        } | {
+            type: "string";
+            required: boolean;
+            control: "codetext";
+            description?: string | undefined;
+            label?: string | undefined;
+            defaultValue?: string | undefined;
         } | {
             type: "string";
             required: boolean;
@@ -145,3 +298,4 @@ export declare const corePropsMetas: {
         initialProps?: string[] | undefined;
     };
 };
+export declare const isCoreComponent: (component: string) => boolean;

package/lib/types/css/css.d.ts

@@ -1,8 +1,10 @@
 import { type TransformValue } from "@webstudio-is/css-engine";
-import type { Assets, Breakpoints, StyleSourceSelections, Styles } from "@webstudio-is/sdk";
+import type { Assets, Breakpoints, Instances, Props, StyleSourceSelections, Styles } from "@webstudio-is/sdk";
 import type { WsComponentMeta } from "../components/component-meta";
 export type CssConfig = {
     assets: Assets;
+    instances: Instances;
+    props: Props;
     breakpoints: Breakpoints;
     styles: Styles;
     styleSourceSelections: StyleSourceSelections;
@@ -13,7 +15,7 @@ export type CssConfig = {
 export declare const createImageValueTransformer: (assets: Map<string, {
     type: "font";
     name: string;
-    format: "ttf" | "woff" | "woff2" | "otf";
+    format: "ttf" | "woff" | "woff2";
     meta: ({
         family: string;
         style: "normal" | "italic" | "oblique";
@@ -60,7 +62,7 @@ export declare const createImageValueTransformer: (assets: Map<string, {
 }>, { assetBaseUrl }: {
     assetBaseUrl: string;
 }) => TransformValue;
-export declare const generateCss: ({ assets, breakpoints, styles, styleSourceSelections, componentMetas, assetBaseUrl, atomic, }: CssConfig) => {
+export declare const generateCss: ({ assets, instances, props, breakpoints, styles, styleSourceSelections, componentMetas, assetBaseUrl, atomic, }: CssConfig) => {
     cssText: string;
     classesMap: Map<string, string[]>;
 };

package/lib/types/css/global-rules.d.ts

@@ -1,6 +1,6 @@
-import type { StyleSheetAtomic, StyleSheetRegular } from "@webstudio-is/css-engine";
+import type { StyleSheetRegular } from "@webstudio-is/css-engine";
 import type { Assets } from "@webstudio-is/sdk";
-export declare const addGlobalRules: (sheet: StyleSheetRegular | StyleSheetAtomic, { assets, assetBaseUrl }: {
+export declare const addGlobalRules: (sheet: StyleSheetRegular, { assets, assetBaseUrl }: {
     assets: Assets;
     assetBaseUrl: string;
 }) => void;

package/lib/types/css/normalize.d.ts

@@ -5284,6 +5284,445 @@ export declare const label: ({
         value: string;
     };
 })[];
+export declare const time: ({
+    value: {
+        value: number;
+        type: "unit";
+        unit: "number" | "%" | "deg" | "grad" | "rad" | "turn" | "db" | "fr" | "hz" | "khz" | "cm" | "mm" | "q" | "in" | "pt" | "pc" | "px" | "em" | "rem" | "ex" | "rex" | "cap" | "rcap" | "ch" | "rch" | "ic" | "ric" | "lh" | "rlh" | "vw" | "svw" | "lvw" | "dvw" | "vh" | "svh" | "lvh" | "dvh" | "vi" | "svi" | "lvi" | "dvi" | "vb" | "svb" | "lvb" | "dvb" | "vmin" | "svmin" | "lvmin" | "dvmin" | "vmax" | "svmax" | "lvmax" | "dvmax" | "cqw" | "cqh" | "cqi" | "cqb" | "cqmin" | "cqmax" | "dpi" | "dpcm" | "dppx" | "x" | "st" | "s" | "ms";
+    } | {
+        value: string;
+        type: "keyword";
+    } | {
+        value: string;
+        type: "unparsed";
+        hidden?: boolean | undefined;
+    } | {
+        value: string[];
+        type: "fontFamily";
+    } | {
+        type: "rgb";
+        r: number;
+        g: number;
+        b: number;
+        alpha: number;
+    } | {
+        type: "function";
+        name: string;
+        args: {
+            value: number;
+            type: "unit";
+            unit: "number" | "%" | "deg" | "grad" | "rad" | "turn" | "db" | "fr" | "hz" | "khz" | "cm" | "mm" | "q" | "in" | "pt" | "pc" | "px" | "em" | "rem" | "ex" | "rex" | "cap" | "rcap" | "ch" | "rch" | "ic" | "ric" | "lh" | "rlh" | "vw" | "svw" | "lvw" | "dvw" | "vh" | "svh" | "lvh" | "dvh" | "vi" | "svi" | "lvi" | "dvi" | "vb" | "svb" | "lvb" | "dvb" | "vmin" | "svmin" | "lvmin" | "dvmin" | "vmax" | "svmax" | "lvmax" | "dvmax" | "cqw" | "cqh" | "cqi" | "cqb" | "cqmin" | "cqmax" | "dpi" | "dpcm" | "dppx" | "x" | "st" | "s" | "ms";
+        } | {
+            value: string;
+            type: "keyword";
+        } | {
+            value: string;
+            type: "unparsed";
+            hidden?: boolean | undefined;
+        } | {
+            value: string[];
+            type: "fontFamily";
+        } | {
+            type: "rgb";
+            r: number;
+            g: number;
+            b: number;
+            alpha: number;
+        } | any | {
+            value: {
+                value: string;
+                type: "asset";
+            } | {
+                type: "url";
+                url: string;
+            };
+            type: "image";
+            hidden?: boolean | undefined;
+        } | {
+            value: ({
+                value: number;
+                type: "unit";
+                unit: "number" | "%" | "deg" | "grad" | "rad" | "turn" | "db" | "fr" | "hz" | "khz" | "cm" | "mm" | "q" | "in" | "pt" | "pc" | "px" | "em" | "rem" | "ex" | "rex" | "cap" | "rcap" | "ch" | "rch" | "ic" | "ric" | "lh" | "rlh" | "vw" | "svw" | "lvw" | "dvw" | "vh" | "svh" | "lvh" | "dvh" | "vi" | "svi" | "lvi" | "dvi" | "vb" | "svb" | "lvb" | "dvb" | "vmin" | "svmin" | "lvmin" | "dvmin" | "vmax" | "svmax" | "lvmax" | "dvmax" | "cqw" | "cqh" | "cqi" | "cqb" | "cqmin" | "cqmax" | "dpi" | "dpcm" | "dppx" | "x" | "st" | "s" | "ms";
+            } | {
+                value: string;
+                type: "keyword";
+            } | {
+                value: string;
+                type: "unparsed";
+                hidden?: boolean | undefined;
+            } | {
+                type: "rgb";
+                r: number;
+                g: number;
+                b: number;
+                alpha: number;
+            } | any)[];
+            type: "tuple";
+            hidden?: boolean | undefined;
+        } | {
+            value: string;
+            type: "invalid";
+        } | {
+            value: ({
+                value: number;
+                type: "unit";
+                unit: "number" | "%" | "deg" | "grad" | "rad" | "turn" | "db" | "fr" | "hz" | "khz" | "cm" | "mm" | "q" | "in" | "pt" | "pc" | "px" | "em" | "rem" | "ex" | "rex" | "cap" | "rcap" | "ch" | "rch" | "ic" | "ric" | "lh" | "rlh" | "vw" | "svw" | "lvw" | "dvw" | "vh" | "svh" | "lvh" | "dvh" | "vi" | "svi" | "lvi" | "dvi" | "vb" | "svb" | "lvb" | "dvb" | "vmin" | "svmin" | "lvmin" | "dvmin" | "vmax" | "svmax" | "lvmax" | "dvmax" | "cqw" | "cqh" | "cqi" | "cqb" | "cqmin" | "cqmax" | "dpi" | "dpcm" | "dppx" | "x" | "st" | "s" | "ms";
+            } | {
+                value: string;
+                type: "keyword";
+            } | {
+                value: string;
+                type: "unparsed";
+                hidden?: boolean | undefined;
+            } | any | {
+                value: {
+                    value: string;
+                    type: "asset";
+                } | {
+                    type: "url";
+                    url: string;
+                };
+                type: "image";
+                hidden?: boolean | undefined;
+            } | {
+                value: ({
+                    value: number;
+                    type: "unit";
+                    unit: "number" | "%" | "deg" | "grad" | "rad" | "turn" | "db" | "fr" | "hz" | "khz" | "cm" | "mm" | "q" | "in" | "pt" | "pc" | "px" | "em" | "rem" | "ex" | "rex" | "cap" | "rcap" | "ch" | "rch" | "ic" | "ric" | "lh" | "rlh" | "vw" | "svw" | "lvw" | "dvw" | "vh" | "svh" | "lvh" | "dvh" | "vi" | "svi" | "lvi" | "dvi" | "vb" | "svb" | "lvb" | "dvb" | "vmin" | "svmin" | "lvmin" | "dvmin" | "vmax" | "svmax" | "lvmax" | "dvmax" | "cqw" | "cqh" | "cqi" | "cqb" | "cqmin" | "cqmax" | "dpi" | "dpcm" | "dppx" | "x" | "st" | "s" | "ms";
+                } | {
+                    value: string;
+                    type: "keyword";
+                } | {
+                    value: string;
+                    type: "unparsed";
+                    hidden?: boolean | undefined;
+                } | {
+                    type: "rgb";
+                    r: number;
+                    g: number;
+                    b: number;
+                    alpha: number;
+                } | any)[];
+                type: "tuple";
+                hidden?: boolean | undefined;
+            } | {
+                value: string;
+                type: "invalid";
+            })[];
+            type: "layers";
+        } | {
+            type: "guaranteedInvalid";
+        } | {
+            value: "";
+            type: "unset";
+        } | {
+            value: string;
+            type: "var";
+            fallbacks: ({
+                value: number;
+                type: "unit";
+                unit: "number" | "%" | "deg" | "grad" | "rad" | "turn" | "db" | "fr" | "hz" | "khz" | "cm" | "mm" | "q" | "in" | "pt" | "pc" | "px" | "em" | "rem" | "ex" | "rex" | "cap" | "rcap" | "ch" | "rch" | "ic" | "ric" | "lh" | "rlh" | "vw" | "svw" | "lvw" | "dvw" | "vh" | "svh" | "lvh" | "dvh" | "vi" | "svi" | "lvi" | "dvi" | "vb" | "svb" | "lvb" | "dvb" | "vmin" | "svmin" | "lvmin" | "dvmin" | "vmax" | "svmax" | "lvmax" | "dvmax" | "cqw" | "cqh" | "cqi" | "cqb" | "cqmin" | "cqmax" | "dpi" | "dpcm" | "dppx" | "x" | "st" | "s" | "ms";
+            } | {
+                value: string;
+                type: "keyword";
+            } | {
+                value: string;
+                type: "unparsed";
+                hidden?: boolean | undefined;
+            } | {
+                value: string[];
+                type: "fontFamily";
+            } | {
+                type: "rgb";
+                r: number;
+                g: number;
+                b: number;
+                alpha: number;
+            } | any | {
+                value: {
+                    value: string;
+                    type: "asset";
+                } | {
+                    type: "url";
+                    url: string;
+                };
+                type: "image";
+                hidden?: boolean | undefined;
+            } | {
+                value: ({
+                    value: number;
+                    type: "unit";
+                    unit: "number" | "%" | "deg" | "grad" | "rad" | "turn" | "db" | "fr" | "hz" | "khz" | "cm" | "mm" | "q" | "in" | "pt" | "pc" | "px" | "em" | "rem" | "ex" | "rex" | "cap" | "rcap" | "ch" | "rch" | "ic" | "ric" | "lh" | "rlh" | "vw" | "svw" | "lvw" | "dvw" | "vh" | "svh" | "lvh" | "dvh" | "vi" | "svi" | "lvi" | "dvi" | "vb" | "svb" | "lvb" | "dvb" | "vmin" | "svmin" | "lvmin" | "dvmin" | "vmax" | "svmax" | "lvmax" | "dvmax" | "cqw" | "cqh" | "cqi" | "cqb" | "cqmin" | "cqmax" | "dpi" | "dpcm" | "dppx" | "x" | "st" | "s" | "ms";
+                } | {
+                    value: string;
+                    type: "keyword";
+                } | {
+                    value: string;
+                    type: "unparsed";
+                    hidden?: boolean | undefined;
+                } | {
+                    type: "rgb";
+                    r: number;
+                    g: number;
+                    b: number;
+                    alpha: number;
+                } | any)[];
+                type: "tuple";
+                hidden?: boolean | undefined;
+            } | {
+                value: ({
+                    value: number;
+                    type: "unit";
+                    unit: "number" | "%" | "deg" | "grad" | "rad" | "turn" | "db" | "fr" | "hz" | "khz" | "cm" | "mm" | "q" | "in" | "pt" | "pc" | "px" | "em" | "rem" | "ex" | "rex" | "cap" | "rcap" | "ch" | "rch" | "ic" | "ric" | "lh" | "rlh" | "vw" | "svw" | "lvw" | "dvw" | "vh" | "svh" | "lvh" | "dvh" | "vi" | "svi" | "lvi" | "dvi" | "vb" | "svb" | "lvb" | "dvb" | "vmin" | "svmin" | "lvmin" | "dvmin" | "vmax" | "svmax" | "lvmax" | "dvmax" | "cqw" | "cqh" | "cqi" | "cqb" | "cqmin" | "cqmax" | "dpi" | "dpcm" | "dppx" | "x" | "st" | "s" | "ms";
+                } | {
+                    value: string;
+                    type: "keyword";
+                } | {
+                    value: string;
+                    type: "unparsed";
+                    hidden?: boolean | undefined;
+                } | any | {
+                    value: {
+                        value: string;
+                        type: "asset";
+                    } | {
+                        type: "url";
+                        url: string;
+                    };
+                    type: "image";
+                    hidden?: boolean | undefined;
+                } | {
+                    value: ({
+                        value: number;
+                        type: "unit";
+                        unit: "number" | "%" | "deg" | "grad" | "rad" | "turn" | "db" | "fr" | "hz" | "khz" | "cm" | "mm" | "q" | "in" | "pt" | "pc" | "px" | "em" | "rem" | "ex" | "rex" | "cap" | "rcap" | "ch" | "rch" | "ic" | "ric" | "lh" | "rlh" | "vw" | "svw" | "lvw" | "dvw" | "vh" | "svh" | "lvh" | "dvh" | "vi" | "svi" | "lvi" | "dvi" | "vb" | "svb" | "lvb" | "dvb" | "vmin" | "svmin" | "lvmin" | "dvmin" | "vmax" | "svmax" | "lvmax" | "dvmax" | "cqw" | "cqh" | "cqi" | "cqb" | "cqmin" | "cqmax" | "dpi" | "dpcm" | "dppx" | "x" | "st" | "s" | "ms";
+                    } | {
+                        value: string;
+                        type: "keyword";
+                    } | {
+                        value: string;
+                        type: "unparsed";
+                        hidden?: boolean | undefined;
+                    } | {
+                        type: "rgb";
+                        r: number;
+                        g: number;
+                        b: number;
+                        alpha: number;
+                    } | any)[];
+                    type: "tuple";
+                    hidden?: boolean | undefined;
+                } | {
+                    value: string;
+                    type: "invalid";
+                })[];
+                type: "layers";
+            } | {
+                type: "guaranteedInvalid";
+            })[];
+        };
+    } | {
+        value: {
+            value: string;
+            type: "asset";
+        } | {
+            type: "url";
+            url: string;
+        };
+        type: "image";
+        hidden?: boolean | undefined;
+    } | {
+        value: ({
+            value: number;
+            type: "unit";
+            unit: "number" | "%" | "deg" | "grad" | "rad" | "turn" | "db" | "fr" | "hz" | "khz" | "cm" | "mm" | "q" | "in" | "pt" | "pc" | "px" | "em" | "rem" | "ex" | "rex" | "cap" | "rcap" | "ch" | "rch" | "ic" | "ric" | "lh" | "rlh" | "vw" | "svw" | "lvw" | "dvw" | "vh" | "svh" | "lvh" | "dvh" | "vi" | "svi" | "lvi" | "dvi" | "vb" | "svb" | "lvb" | "dvb" | "vmin" | "svmin" | "lvmin" | "dvmin" | "vmax" | "svmax" | "lvmax" | "dvmax" | "cqw" | "cqh" | "cqi" | "cqb" | "cqmin" | "cqmax" | "dpi" | "dpcm" | "dppx" | "x" | "st" | "s" | "ms";
+        } | {
+            value: string;
+            type: "keyword";
+        } | {
+            value: string;
+            type: "unparsed";
+            hidden?: boolean | undefined;
+        } | {
+            type: "rgb";
+            r: number;
+            g: number;
+            b: number;
+            alpha: number;
+        } | any)[];
+        type: "tuple";
+        hidden?: boolean | undefined;
+    } | {
+        value: string;
+        type: "invalid";
+    } | {
+        value: ({
+            value: number;
+            type: "unit";
+            unit: "number" | "%" | "deg" | "grad" | "rad" | "turn" | "db" | "fr" | "hz" | "khz" | "cm" | "mm" | "q" | "in" | "pt" | "pc" | "px" | "em" | "rem" | "ex" | "rex" | "cap" | "rcap" | "ch" | "rch" | "ic" | "ric" | "lh" | "rlh" | "vw" | "svw" | "lvw" | "dvw" | "vh" | "svh" | "lvh" | "dvh" | "vi" | "svi" | "lvi" | "dvi" | "vb" | "svb" | "lvb" | "dvb" | "vmin" | "svmin" | "lvmin" | "dvmin" | "vmax" | "svmax" | "lvmax" | "dvmax" | "cqw" | "cqh" | "cqi" | "cqb" | "cqmin" | "cqmax" | "dpi" | "dpcm" | "dppx" | "x" | "st" | "s" | "ms";
+        } | {
+            value: string;
+            type: "keyword";
+        } | {
+            value: string;
+            type: "unparsed";
+            hidden?: boolean | undefined;
+        } | any | {
+            value: {
+                value: string;
+                type: "asset";
+            } | {
+                type: "url";
+                url: string;
+            };
+            type: "image";
+            hidden?: boolean | undefined;
+        } | {
+            value: ({
+                value: number;
+                type: "unit";
+                unit: "number" | "%" | "deg" | "grad" | "rad" | "turn" | "db" | "fr" | "hz" | "khz" | "cm" | "mm" | "q" | "in" | "pt" | "pc" | "px" | "em" | "rem" | "ex" | "rex" | "cap" | "rcap" | "ch" | "rch" | "ic" | "ric" | "lh" | "rlh" | "vw" | "svw" | "lvw" | "dvw" | "vh" | "svh" | "lvh" | "dvh" | "vi" | "svi" | "lvi" | "dvi" | "vb" | "svb" | "lvb" | "dvb" | "vmin" | "svmin" | "lvmin" | "dvmin" | "vmax" | "svmax" | "lvmax" | "dvmax" | "cqw" | "cqh" | "cqi" | "cqb" | "cqmin" | "cqmax" | "dpi" | "dpcm" | "dppx" | "x" | "st" | "s" | "ms";
+            } | {
+                value: string;
+                type: "keyword";
+            } | {
+                value: string;
+                type: "unparsed";
+                hidden?: boolean | undefined;
+            } | {
+                type: "rgb";
+                r: number;
+                g: number;
+                b: number;
+                alpha: number;
+            } | any)[];
+            type: "tuple";
+            hidden?: boolean | undefined;
+        } | {
+            value: string;
+            type: "invalid";
+        })[];
+        type: "layers";
+    } | {
+        type: "guaranteedInvalid";
+    } | {
+        value: "";
+        type: "unset";
+    } | {
+        value: string;
+        type: "var";
+        fallbacks: ({
+            value: number;
+            type: "unit";
+            unit: "number" | "%" | "deg" | "grad" | "rad" | "turn" | "db" | "fr" | "hz" | "khz" | "cm" | "mm" | "q" | "in" | "pt" | "pc" | "px" | "em" | "rem" | "ex" | "rex" | "cap" | "rcap" | "ch" | "rch" | "ic" | "ric" | "lh" | "rlh" | "vw" | "svw" | "lvw" | "dvw" | "vh" | "svh" | "lvh" | "dvh" | "vi" | "svi" | "lvi" | "dvi" | "vb" | "svb" | "lvb" | "dvb" | "vmin" | "svmin" | "lvmin" | "dvmin" | "vmax" | "svmax" | "lvmax" | "dvmax" | "cqw" | "cqh" | "cqi" | "cqb" | "cqmin" | "cqmax" | "dpi" | "dpcm" | "dppx" | "x" | "st" | "s" | "ms";
+        } | {
+            value: string;
+            type: "keyword";
+        } | {
+            value: string;
+            type: "unparsed";
+            hidden?: boolean | undefined;
+        } | {
+            value: string[];
+            type: "fontFamily";
+        } | {
+            type: "rgb";
+            r: number;
+            g: number;
+            b: number;
+            alpha: number;
+        } | any | {
+            value: {
+                value: string;
+                type: "asset";
+            } | {
+                type: "url";
+                url: string;
+            };
+            type: "image";
+            hidden?: boolean | undefined;
+        } | {
+            value: ({
+                value: number;
+                type: "unit";
+                unit: "number" | "%" | "deg" | "grad" | "rad" | "turn" | "db" | "fr" | "hz" | "khz" | "cm" | "mm" | "q" | "in" | "pt" | "pc" | "px" | "em" | "rem" | "ex" | "rex" | "cap" | "rcap" | "ch" | "rch" | "ic" | "ric" | "lh" | "rlh" | "vw" | "svw" | "lvw" | "dvw" | "vh" | "svh" | "lvh" | "dvh" | "vi" | "svi" | "lvi" | "dvi" | "vb" | "svb" | "lvb" | "dvb" | "vmin" | "svmin" | "lvmin" | "dvmin" | "vmax" | "svmax" | "lvmax" | "dvmax" | "cqw" | "cqh" | "cqi" | "cqb" | "cqmin" | "cqmax" | "dpi" | "dpcm" | "dppx" | "x" | "st" | "s" | "ms";
+            } | {
+                value: string;
+                type: "keyword";
+            } | {
+                value: string;
+                type: "unparsed";
+                hidden?: boolean | undefined;
+            } | {
+                type: "rgb";
+                r: number;
+                g: number;
+                b: number;
+                alpha: number;
+            } | any)[];
+            type: "tuple";
+            hidden?: boolean | undefined;
+        } | {
+            value: ({
+                value: number;
+                type: "unit";
+                unit: "number" | "%" | "deg" | "grad" | "rad" | "turn" | "db" | "fr" | "hz" | "khz" | "cm" | "mm" | "q" | "in" | "pt" | "pc" | "px" | "em" | "rem" | "ex" | "rex" | "cap" | "rcap" | "ch" | "rch" | "ic" | "ric" | "lh" | "rlh" | "vw" | "svw" | "lvw" | "dvw" | "vh" | "svh" | "lvh" | "dvh" | "vi" | "svi" | "lvi" | "dvi" | "vb" | "svb" | "lvb" | "dvb" | "vmin" | "svmin" | "lvmin" | "dvmin" | "vmax" | "svmax" | "lvmax" | "dvmax" | "cqw" | "cqh" | "cqi" | "cqb" | "cqmin" | "cqmax" | "dpi" | "dpcm" | "dppx" | "x" | "st" | "s" | "ms";
+            } | {
+                value: string;
+                type: "keyword";
+            } | {
+                value: string;
+                type: "unparsed";
+                hidden?: boolean | undefined;
+            } | any | {
+                value: {
+                    value: string;
+                    type: "asset";
+                } | {
+                    type: "url";
+                    url: string;
+                };
+                type: "image";
+                hidden?: boolean | undefined;
+            } | {
+                value: ({
+                    value: number;
+                    type: "unit";
+                    unit: "number" | "%" | "deg" | "grad" | "rad" | "turn" | "db" | "fr" | "hz" | "khz" | "cm" | "mm" | "q" | "in" | "pt" | "pc" | "px" | "em" | "rem" | "ex" | "rex" | "cap" | "rcap" | "ch" | "rch" | "ic" | "ric" | "lh" | "rlh" | "vw" | "svw" | "lvw" | "dvw" | "vh" | "svh" | "lvh" | "dvh" | "vi" | "svi" | "lvi" | "dvi" | "vb" | "svb" | "lvb" | "dvb" | "vmin" | "svmin" | "lvmin" | "dvmin" | "vmax" | "svmax" | "lvmax" | "dvmax" | "cqw" | "cqh" | "cqi" | "cqb" | "cqmin" | "cqmax" | "dpi" | "dpcm" | "dppx" | "x" | "st" | "s" | "ms";
+                } | {
+                    value: string;
+                    type: "keyword";
+                } | {
+                    value: string;
+                    type: "unparsed";
+                    hidden?: boolean | undefined;
+                } | {
+                    type: "rgb";
+                    r: number;
+                    g: number;
+                    b: number;
+                    alpha: number;
+                } | any)[];
+                type: "tuple";
+                hidden?: boolean | undefined;
+            } | {
+                value: string;
+                type: "invalid";
+            })[];
+            type: "layers";
+        } | {
+            type: "guaranteedInvalid";
+        })[];
+    };
+    state?: string | undefined;
+    property: import("@webstudio-is/css-engine").StyleProperty;
+} | {
+    property: "boxSizing";
+    value: {
+        type: "keyword";
+        value: string;
+    };
+})[];
 export declare const h1: ({
     value: {
         value: number;

package/lib/types/css/style-rules.d.ts

@@ -10,6 +10,8 @@ type StyleRule = {
 /**
  * Merge styles from different style sources
  * and group by instance and breakpoint
+ *
+ * @deprecated
  */
 export declare const getStyleRules: (styles: Styles, styleSourceSelections: Map<string, {
     values: string[];

package/lib/types/embed-template.d.ts

@@ -10695,7 +10695,7 @@ export declare const generateDataFromEmbedTemplate: (treeTemplate: ({
     type: "expression";
 } | EmbedTemplateInstance)[], metas: Map<Instance["component"], WsComponentMeta>, defaultBreakpointId: Breakpoint["id"], generateId?: () => string) => WebstudioFragment;
 export declare const namespaceMeta: (meta: WsComponentMeta, namespace: string, components: Set<EmbedTemplateInstance["component"]>) => {
-    type: "embed" | "control" | "container" | "rich-text-child";
+    type: "control" | "embed" | "container" | "rich-text-child";
     description?: string | undefined;
     label?: string | undefined;
     order?: number | undefined;
@@ -10706,7 +10706,7 @@ export declare const namespaceMeta: (meta: WsComponentMeta, namespace: string, c
         value: string;
         type: "expression";
     } | EmbedTemplateInstance)[] | undefined;
-    category?: "data" | "text" | "hidden" | "media" | "general" | "forms" | "radix" | undefined;
+    category?: "data" | "xml" | "text" | "hidden" | "media" | "general" | "forms" | "radix" | "internal" | undefined;
     requiredAncestors?: string[] | undefined;
     invalidAncestors?: string[] | undefined;
     indexWithinAncestor?: string | undefined;

package/lib/types/prop-meta.d.ts

@@ -73,11 +73,6 @@ export declare const PropMeta: z.ZodUnion<[z.ZodObject<{
     control: z.ZodLiteral<"code">;
     type: z.ZodLiteral<"string">;
     defaultValue: z.ZodOptional<z.ZodString>;
-    /**
-     * The number of rows in <textarea>. If set to 0 an <input> will be used instead.
-     * In line with Storybook team's plan: https://github.com/storybookjs/storybook/issues/21100
-     */
-    rows: z.ZodOptional<z.ZodNumber>;
     label: z.ZodOptional<z.ZodString>;
     description: z.ZodOptional<z.ZodString>;
     required: z.ZodBoolean;
@@ -86,7 +81,6 @@ export declare const PropMeta: z.ZodUnion<[z.ZodObject<{
     required: boolean;
     control: "code";
     defaultValue?: string | undefined;
-    rows?: number | undefined;
     label?: string | undefined;
     description?: string | undefined;
 }, {
@@ -94,9 +88,29 @@ export declare const PropMeta: z.ZodUnion<[z.ZodObject<{
     required: boolean;
     control: "code";
     defaultValue?: string | undefined;
-    rows?: number | undefined;
     label?: string | undefined;
     description?: string | undefined;
+}>, z.ZodObject<{
+    type: z.ZodLiteral<"string">;
+    required: z.ZodBoolean;
+    description: z.ZodOptional<z.ZodString>;
+    label: z.ZodOptional<z.ZodString>;
+    defaultValue: z.ZodOptional<z.ZodString>;
+    control: z.ZodLiteral<"codetext">;
+}, "strip", z.ZodTypeAny, {
+    type: "string";
+    required: boolean;
+    control: "codetext";
+    description?: string | undefined;
+    label?: string | undefined;
+    defaultValue?: string | undefined;
+}, {
+    type: "string";
+    required: boolean;
+    control: "codetext";
+    description?: string | undefined;
+    label?: string | undefined;
+    defaultValue?: string | undefined;
 }>, z.ZodObject<{
     control: z.ZodLiteral<"color">;
     type: z.ZodLiteral<"string">;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@webstudio-is/react-sdk",
-  "version": "0.145.0",
+  "version": "0.163.0",
   "description": "Webstudio JavaScript / TypeScript API",
   "author": "Webstudio <github@webstudio.is>",
   "homepage": "https://webstudio.is",
@@ -28,24 +28,22 @@
     "html-tags": "^3.3.1",
     "nanoid": "^5.0.1",
     "title-case": "^4.1.0",
-    "@webstudio-is/css-engine": "0.145.0",
-    "@webstudio-is/fonts": "0.145.0",
-    "@webstudio-is/icons": "^0.145.0",
-    "@webstudio-is/image": "0.145.0",
-    "@webstudio-is/sdk": "0.145.0"
+    "@webstudio-is/css-engine": "0.163.0",
+    "@webstudio-is/fonts": "0.163.0",
+    "@webstudio-is/image": "0.163.0",
+    "@webstudio-is/icons": "^0.163.0",
+    "@webstudio-is/sdk": "0.163.0"
   },
   "exports": {
     ".": {
       "webstudio": "./src/index.ts",
       "types": "./lib/types/index.d.ts",
-      "import": "./lib/index.js",
-      "require": "./lib/index.js"
+      "import": "./lib/index.js"
     },
     "./css-normalize": {
       "webstudio": "./src/css/normalize.ts",
       "types": "./lib/types/css/normalize.d.ts",
-      "import": "./lib/css/normalize.js",
-      "require": "./lib/css/normalize.js"
+      "import": "./lib/css/normalize.js"
     }
   },
   "files": [