@webstudio-is/react-sdk 0.91.0 → 0.92.0

package/lib/types/tree/create-elements-tree.d.ts

@@ -1,7 +1,6 @@
 import { type ForwardRefExoticComponent, type RefAttributes, type ReactNode } from "react";
 import type { ReadableAtom } from "nanostores";
-import type { Assets } from "@webstudio-is/asset-uploader";
-import type { Instance, Instances } from "@webstudio-is/project-build";
+import type { Instance, Instances, Assets } from "@webstudio-is/sdk";
 import type { Components } from "../components/components-utils";
 import { type Params, type DataSourceValues } from "../context";
 import type { Pages, PropsByInstanceId } from "../props";
@@ -13,11 +12,11 @@ export declare const createElementsTree: ({ renderer, imageBaseUrl, assetBaseUrl
         id: string;
         component: string;
         children: ({
-            type: "text";
             value: string;
+            type: "text";
         } | {
-            type: "id";
             value: string;
+            type: "id";
         })[];
         label?: string | undefined;
     }>;

package/lib/types/tree/root.d.ts

@@ -1,19 +1,19 @@
 import { type ForwardRefExoticComponent, type RefAttributes, type ReactNode } from "react";
-import { type Build, type Page } from "@webstudio-is/project-build";
-import type { Asset } from "@webstudio-is/asset-uploader";
+import type { Page, Asset, DataSource, Instance, Prop } from "@webstudio-is/sdk";
 import { type WebstudioComponentProps } from "./webstudio-component";
 import type { Components } from "../components/components-utils";
 import type { Params } from "../context";
 import type { GeneratedUtils } from "../generator";
-export type Data = {
+export type RootPropsData = {
+    params?: Params;
     page: Page;
     pages: Array<Page>;
-    build: Build;
     assets: Array<Asset>;
-    params?: Params;
-};
-export type RootPropsData = Omit<Data, "build"> & {
-    build: Pick<Data["build"], "instances" | "props" | "dataSources">;
+    build: {
+        instances: [Instance["id"], Instance][];
+        dataSources: [DataSource["id"], DataSource][];
+        props: [Prop["id"], Prop][];
+    };
 };
 type RootProps = {
     data: RootPropsData;

package/lib/types/tree/webstudio-component.d.ts

@@ -1,5 +1,5 @@
 /// <reference types="react" />
-import type { Instance } from "@webstudio-is/project-build";
+import type { Instance } from "@webstudio-is/sdk";
 import type { Components } from "../components/components-utils";
 export declare const renderWebstudioComponentChildren: (children: Array<JSX.Element | string> | undefined) => Array<JSX.Element | string | Array<JSX.Element | string>> | undefined;
 export type WebstudioComponentProps = {

package/package.json

@@ -1,23 +1,22 @@
 {
   "name": "@webstudio-is/react-sdk",
-  "version": "0.91.0",
+  "version": "0.92.0",
   "description": "Webstudio JavaScript / TypeScript API",
   "author": "Webstudio <github@webstudio.is>",
   "homepage": "https://webstudio.is",
   "type": "module",
   "devDependencies": {
-    "@jest/globals": "^29.6.2",
+    "@jest/globals": "^29.6.4",
     "@remix-run/react": "^1.19.2",
-    "@types/react": "^18.2.20",
+    "@types/react": "^18.2.21",
     "@types/react-dom": "^18.2.7",
-    "jest": "^29.6.2",
+    "jest": "^29.6.4",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
-    "type-fest": "^4.2.0",
-    "typescript": "5.1.6",
+    "type-fest": "^4.3.1",
+    "typescript": "5.2.2",
     "zod": "^3.21.4",
     "@webstudio-is/jest-config": "^1.0.7",
-    "@webstudio-is/scripts": "^0.0.0",
     "@webstudio-is/tsconfig": "^1.0.7"
   },
   "peerDependencies": {
@@ -36,39 +35,32 @@
     "nanostores": "^0.9.3",
     "no-case": "^3.0.4",
     "title-case": "^3.0.3",
-    "@webstudio-is/asset-uploader": "^0.91.0",
-    "@webstudio-is/css-data": "^0.91.0",
-    "@webstudio-is/css-engine": "^0.91.0",
-    "@webstudio-is/fonts": "^0.91.0",
-    "@webstudio-is/generate-arg-types": "^0.91.0",
-    "@webstudio-is/project-build": "^0.91.0"
+    "@webstudio-is/css-engine": "^0.92.0",
+    "@webstudio-is/fonts": "^0.92.0",
+    "@webstudio-is/sdk": "^0.92.0"
   },
   "exports": {
     ".": {
       "source": "./src/index.ts",
       "types": "./lib/types/index.d.ts",
-      "import": "./lib/index.js",
-      "require": "./lib/cjs/index.js"
+      "import": "./lib/index.js"
     },
     "./css-normalize": {
       "source": "./src/css/normalize.ts",
       "types": "./lib/types/css/normalize.d.ts",
-      "import": "./lib/css/normalize.js",
-      "require": "./lib/cjs/css/normalize.js"
+      "import": "./lib/css/normalize.js"
     }
   },
   "files": [
     "lib/*",
-    "src/*",
-    "!*.test.*"
+    "!*.{test,stories}.*"
   ],
   "license": "AGPL-3.0-or-later",
   "private": false,
   "sideEffects": false,
   "scripts": {
-    "dev": "build-package --watch",
-    "build": "build-package",
-    "build:args": "generate-arg-types './src/components/*.tsx ./src/app/custom-components/*.tsx !./src/**/*.stories.tsx !./src/**/*.ws.tsx' && prettier --write \"**/*.props.ts\"",
+    "dev": "pnpm build --watch",
+    "build": "rm -rf lib && esbuild 'src/**/*.ts' 'src/**/*.tsx' --outdir=lib",
     "dts": "tsc --project tsconfig.dts.json",
     "typecheck": "tsc",
     "test": "NODE_OPTIONS=--experimental-vm-modules jest --passWithNoTests",

package/lib/cjs/app/index.js

@@ -1,18 +0,0 @@
-"use strict";
-var __defProp = Object.defineProperty;
-var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
-var __getOwnPropNames = Object.getOwnPropertyNames;
-var __hasOwnProp = Object.prototype.hasOwnProperty;
-var __copyProps = (to, from, except, desc) => {
-  if (from && typeof from === "object" || typeof from === "function") {
-    for (let key of __getOwnPropNames(from))
-      if (!__hasOwnProp.call(to, key) && key !== except)
-        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
-  }
-  return to;
-};
-var __reExport = (target, mod, secondTarget) => (__copyProps(target, mod, "default"), secondTarget && __copyProps(secondTarget, mod, "default"));
-var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
-var app_exports = {};
-module.exports = __toCommonJS(app_exports);
-__reExport(app_exports, require("./root"), module.exports);

package/lib/cjs/app/root.js

@@ -1,40 +0,0 @@
-"use strict";
-var __defProp = Object.defineProperty;
-var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
-var __getOwnPropNames = Object.getOwnPropertyNames;
-var __hasOwnProp = Object.prototype.hasOwnProperty;
-var __export = (target, all) => {
-  for (var name in all)
-    __defProp(target, name, { get: all[name], enumerable: true });
-};
-var __copyProps = (to, from, except, desc) => {
-  if (from && typeof from === "object" || typeof from === "function") {
-    for (let key of __getOwnPropNames(from))
-      if (!__hasOwnProp.call(to, key) && key !== except)
-        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
-  }
-  return to;
-};
-var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
-var root_exports = {};
-__export(root_exports, {
-  Root: () => Root
-});
-module.exports = __toCommonJS(root_exports);
-var import_jsx_runtime = require("react/jsx-runtime");
-var import_react = require("@remix-run/react");
-const Root = ({
-  Outlet = import_react.Outlet
-}) => {
-  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("html", { lang: "en", children: [
-    /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("head", { children: [
-      /* @__PURE__ */ (0, import_jsx_runtime.jsx)("meta", { charSet: "utf-8" }),
-      /* @__PURE__ */ (0, import_jsx_runtime.jsx)("meta", { name: "viewport", content: "width=device-width,initial-scale=1" }),
-      /* @__PURE__ */ (0, import_jsx_runtime.jsx)("link", { rel: "icon", href: "/favicon.ico", type: "image/x-icon" }),
-      /* @__PURE__ */ (0, import_jsx_runtime.jsx)("link", { rel: "shortcut icon", href: "/favicon.ico", type: "image/x-icon" }),
-      /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_react.Meta, {}),
-      /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_react.Links, {})
-    ] }),
-    /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Outlet, {})
-  ] });
-};

package/lib/cjs/component-renderer.js

@@ -1,143 +0,0 @@
-"use strict";
-var __defProp = Object.defineProperty;
-var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
-var __getOwnPropNames = Object.getOwnPropertyNames;
-var __hasOwnProp = Object.prototype.hasOwnProperty;
-var __export = (target, all) => {
-  for (var name in all)
-    __defProp(target, name, { get: all[name], enumerable: true });
-};
-var __copyProps = (to, from, except, desc) => {
-  if (from && typeof from === "object" || typeof from === "function") {
-    for (let key of __getOwnPropNames(from))
-      if (!__hasOwnProp.call(to, key) && key !== except)
-        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
-  }
-  return to;
-};
-var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
-var component_renderer_exports = {};
-__export(component_renderer_exports, {
-  renderComponentTemplate: () => renderComponentTemplate
-});
-module.exports = __toCommonJS(component_renderer_exports);
-var import_jsx_runtime = require("react/jsx-runtime");
-var import_project_build = require("@webstudio-is/project-build");
-var import_embed_template = require("./embed-template");
-var import_css = require("./css");
-var import_tree = require("./tree");
-var import_expression = require("./expression");
-var import_instance_utils = require("./instance-utils");
-const renderComponentTemplate = ({
-  name,
-  metas: metasRecord,
-  components,
-  props
-}) => {
-  const metas = new Map(Object.entries(metasRecord));
-  const template = metas.get(name)?.template ?? [
-    {
-      type: "instance",
-      component: name,
-      children: []
-    }
-  ];
-  if (template[0].type === "instance" && props !== void 0) {
-    template[0].props = Object.entries(props).map(([prop, value]) => {
-      if (typeof value === "string") {
-        return { type: "string", name: prop, value };
-      }
-      if (typeof value === "number") {
-        return { type: "number", name: prop, value };
-      }
-      if (typeof value === "boolean") {
-        return { type: "boolean", name: prop, value };
-      }
-      throw new Error(`Unsupported prop ${props} with value ${value}`);
-    });
-  }
-  const data = (0, import_embed_template.generateDataFromEmbedTemplate)(template, metas, "base");
-  const instances = [
-    [
-      "root",
-      {
-        type: "instance",
-        id: "root",
-        component: "Box",
-        children: data.children
-      }
-    ],
-    ...data.instances.map(
-      (instance) => [instance.id, instance]
-    )
-  ];
-  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_jsx_runtime.Fragment, { children: [
-    /* @__PURE__ */ (0, import_jsx_runtime.jsx)("style", { children: (0, import_css.generateCssText)(
-      {
-        assets: [],
-        breakpoints: [["base", { id: "base", label: "base" }]],
-        styles: data.styles.map((item) => [(0, import_project_build.getStyleDeclKey)(item), item]),
-        styleSourceSelections: data.styleSourceSelections.map((item) => [
-          item.instanceId,
-          item
-        ]),
-        componentMetas: metas
-      },
-      { assetBaseUrl: "/" }
-    ) }),
-    /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
-      import_tree.InstanceRoot,
-      {
-        data: {
-          page: {
-            path: "",
-            id: "",
-            name: "",
-            title: "",
-            meta: {},
-            rootInstanceId: "root"
-          },
-          pages: [],
-          assets: [],
-          build: {
-            instances,
-            props: data.props.map((prop) => [prop.id, prop]),
-            dataSources: data.dataSources.map((dataSource) => [
-              dataSource.id,
-              dataSource
-            ])
-          }
-        },
-        utils: {
-          indexesWithinAncestors: (0, import_instance_utils.getIndexesWithinAncestors)(
-            metas,
-            new Map(instances),
-            ["root"]
-          ),
-          executeComputingExpressions: (values) => {
-            const expressions = /* @__PURE__ */ new Map();
-            for (const dataSource of data.dataSources) {
-              const name2 = (0, import_expression.encodeDataSourceVariable)(dataSource.id);
-              if (dataSource.type === "expression") {
-                expressions.set(name2, dataSource.code);
-              }
-            }
-            return (0, import_expression.decodeVariablesMap)(
-              (0, import_expression.executeComputingExpressions)(
-                expressions,
-                (0, import_expression.encodeVariablesMap)(values)
-              )
-            );
-          },
-          executeEffectfulExpression: (code, args, values) => {
-            return (0, import_expression.decodeVariablesMap)(
-              (0, import_expression.executeEffectfulExpression)(code, args, (0, import_expression.encodeVariablesMap)(values))
-            );
-          }
-        },
-        Component: import_tree.WebstudioComponent,
-        components: new Map(Object.entries(components))
-      }
-    )
-  ] });
-};

package/lib/cjs/components/component-meta.js

@@ -1,87 +0,0 @@
-"use strict";
-var __defProp = Object.defineProperty;
-var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
-var __getOwnPropNames = Object.getOwnPropertyNames;
-var __hasOwnProp = Object.prototype.hasOwnProperty;
-var __export = (target, all) => {
-  for (var name in all)
-    __defProp(target, name, { get: all[name], enumerable: true });
-};
-var __copyProps = (to, from, except, desc) => {
-  if (from && typeof from === "object" || typeof from === "function") {
-    for (let key of __getOwnPropNames(from))
-      if (!__hasOwnProp.call(to, key) && key !== except)
-        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
-  }
-  return to;
-};
-var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
-var component_meta_exports = {};
-__export(component_meta_exports, {
-  ComponentState: () => ComponentState,
-  componentCategories: () => componentCategories,
-  defaultStates: () => defaultStates,
-  stateCategories: () => stateCategories
-});
-module.exports = __toCommonJS(component_meta_exports);
-var import_zod = require("zod");
-var import_generate_arg_types = require("@webstudio-is/generate-arg-types");
-var import_embed_template = require("../embed-template");
-const WsComponentPropsMeta = import_zod.z.object({
-  props: import_zod.z.record(import_generate_arg_types.PropMeta),
-  // Props that will be always visible in properties panel.
-  initialProps: import_zod.z.array(import_zod.z.string()).optional()
-});
-const componentCategories = [
-  "general",
-  "text",
-  "media",
-  "forms",
-  "radix",
-  "hidden"
-];
-const stateCategories = ["states", "component-states"];
-const ComponentState = import_zod.z.object({
-  category: import_zod.z.enum(stateCategories).optional(),
-  selector: import_zod.z.string(),
-  label: import_zod.z.string()
-});
-const ComponentToken = import_zod.z.object({
-  variant: import_zod.z.optional(import_zod.z.string()),
-  styles: import_zod.z.array(import_embed_template.EmbedTemplateStyleDecl)
-});
-const defaultStates = [
-  { selector: ":hover", label: "Hover" },
-  { selector: ":active", label: "Active" },
-  { selector: ":focus", label: "Focus" },
-  { selector: ":focus-visible", label: "Focus Visible" },
-  { selector: ":focus-within", label: "Focus Within" }
-];
-const WsComponentMeta = import_zod.z.object({
-  category: import_zod.z.enum(componentCategories).optional(),
-  // container - can accept other components with dnd or be edited as text
-  // control - usually form controls like inputs, without children
-  // embed - images, videos or other embeddable components, without children
-  // rich-text-child - formatted text fragment, not listed in components list
-  type: import_zod.z.enum(["container", "control", "embed", "rich-text-child"]),
-  requiredAncestors: import_zod.z.optional(import_zod.z.array(import_zod.z.string())),
-  invalidAncestors: import_zod.z.optional(import_zod.z.array(import_zod.z.string())),
-  // when this field is specified component receives
-  // prop with index of same components withiin specified ancestor
-  // important to automatically enumerate collections without
-  // naming every item manually
-  indexWithinAncestor: import_zod.z.optional(import_zod.z.string()),
-  stylable: import_zod.z.optional(import_zod.z.boolean()),
-  // specifies whether the instance can be deleted,
-  // copied or dragged out of its parent instance
-  // true by default
-  detachable: import_zod.z.optional(import_zod.z.boolean()),
-  label: import_zod.z.optional(import_zod.z.string()),
-  description: import_zod.z.string().optional(),
-  icon: import_zod.z.string(),
-  presetStyle: import_zod.z.optional(import_zod.z.record(import_zod.z.string(), import_embed_template.EmbedTemplateStyleDecl)),
-  presetTokens: import_zod.z.optional(import_zod.z.record(import_zod.z.string(), ComponentToken)),
-  states: import_zod.z.optional(import_zod.z.array(ComponentState)),
-  template: import_zod.z.optional(import_embed_template.WsEmbedTemplate),
-  order: import_zod.z.number().optional()
-});

package/lib/cjs/components/components-utils.js

@@ -1,17 +0,0 @@
-"use strict";
-var __defProp = Object.defineProperty;
-var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
-var __getOwnPropNames = Object.getOwnPropertyNames;
-var __hasOwnProp = Object.prototype.hasOwnProperty;
-var __copyProps = (to, from, except, desc) => {
-  if (from && typeof from === "object" || typeof from === "function") {
-    for (let key of __getOwnPropNames(from))
-      if (!__hasOwnProp.call(to, key) && key !== except)
-        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
-  }
-  return to;
-};
-var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
-var components_utils_exports = {};
-module.exports = __toCommonJS(components_utils_exports);
-var import_tree = require("../tree");

package/lib/cjs/context.js

@@ -1,43 +0,0 @@
-"use strict";
-var __defProp = Object.defineProperty;
-var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
-var __getOwnPropNames = Object.getOwnPropertyNames;
-var __hasOwnProp = Object.prototype.hasOwnProperty;
-var __export = (target, all) => {
-  for (var name in all)
-    __defProp(target, name, { get: all[name], enumerable: true });
-};
-var __copyProps = (to, from, except, desc) => {
-  if (from && typeof from === "object" || typeof from === "function") {
-    for (let key of __getOwnPropNames(from))
-      if (!__hasOwnProp.call(to, key) && key !== except)
-        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
-  }
-  return to;
-};
-var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
-var context_exports = {};
-__export(context_exports, {
-  ReactSdkContext: () => ReactSdkContext
-});
-module.exports = __toCommonJS(context_exports);
-var import_nanostores = require("nanostores");
-var import_react = require("react");
-const ReactSdkContext = (0, import_react.createContext)({
-  imageBaseUrl: "/",
-  assetBaseUrl: "/",
-  propsByInstanceIdStore: (0, import_nanostores.atom)(/* @__PURE__ */ new Map()),
-  assetsStore: (0, import_nanostores.atom)(/* @__PURE__ */ new Map()),
-  pagesStore: (0, import_nanostores.atom)(/* @__PURE__ */ new Map()),
-  dataSourceValuesStore: (0, import_nanostores.atom)(/* @__PURE__ */ new Map()),
-  executeEffectfulExpression: () => {
-    throw Error("React SDK executeEffectfulExpression is not implemented");
-  },
-  setDataSourceValues: () => {
-    throw Error("React SDK setBoundDataSourceValue is not implemented");
-  },
-  setBoundDataSourceValue: () => {
-    throw Error("React SDK setBoundDataSourceValue is not implemented");
-  },
-  indexesWithinAncestors: /* @__PURE__ */ new Map()
-});

package/lib/cjs/css/css.js

@@ -1,84 +0,0 @@
-"use strict";
-var __defProp = Object.defineProperty;
-var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
-var __getOwnPropNames = Object.getOwnPropertyNames;
-var __hasOwnProp = Object.prototype.hasOwnProperty;
-var __export = (target, all) => {
-  for (var name in all)
-    __defProp(target, name, { get: all[name], enumerable: true });
-};
-var __copyProps = (to, from, except, desc) => {
-  if (from && typeof from === "object" || typeof from === "function") {
-    for (let key of __getOwnPropNames(from))
-      if (!__hasOwnProp.call(to, key) && key !== except)
-        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
-  }
-  return to;
-};
-var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
-var css_exports = {};
-__export(css_exports, {
-  createImageValueTransformer: () => createImageValueTransformer,
-  generateCssText: () => generateCssText
-});
-module.exports = __toCommonJS(css_exports);
-var import_css_engine = require("@webstudio-is/css-engine");
-var import_tree = require("../tree");
-var import_global_rules = require("./global-rules");
-var import_style_rules = require("./style-rules");
-const createImageValueTransformer = (assets, options) => (styleValue) => {
-  if (styleValue.type === "image" && styleValue.value.type === "asset") {
-    const asset = assets.get(styleValue.value.value);
-    if (asset === void 0) {
-      return { type: "keyword", value: "none" };
-    }
-    const { assetBaseUrl } = options;
-    const url = `${assetBaseUrl}${asset.name}`;
-    return {
-      type: "image",
-      value: {
-        type: "url",
-        url
-      },
-      hidden: styleValue.hidden
-    };
-  }
-};
-const generateCssText = (data, options) => {
-  const assets = new Map(
-    data.assets.map((asset) => [asset.id, asset])
-  );
-  const breakpoints = new Map(data.breakpoints);
-  const styles = new Map(data.styles);
-  const styleSourceSelections = new Map(data.styleSourceSelections);
-  const engine = (0, import_css_engine.createCssEngine)({ name: "ssr" });
-  (0, import_global_rules.addGlobalRules)(engine, {
-    assets,
-    assetBaseUrl: options.assetBaseUrl
-  });
-  for (const breakpoint of breakpoints.values()) {
-    engine.addMediaRule(breakpoint.id, breakpoint);
-  }
-  for (const [component, meta] of data.componentMetas) {
-    const presetStyle = meta.presetStyle;
-    if (presetStyle === void 0) {
-      continue;
-    }
-    const rules = (0, import_style_rules.getPresetStyleRules)(component, presetStyle);
-    for (const [selector, style] of rules) {
-      engine.addStyleRule(selector, { style });
-    }
-  }
-  const styleRules = (0, import_style_rules.getStyleRules)(styles, styleSourceSelections);
-  for (const { breakpointId, instanceId, state, style } of styleRules) {
-    engine.addStyleRule(
-      `[${import_tree.idAttribute}="${instanceId}"]${state ?? ""}`,
-      {
-        breakpoint: breakpointId,
-        style
-      },
-      createImageValueTransformer(assets, options)
-    );
-  }
-  return engine.cssText;
-};

package/lib/cjs/css/global-rules.js

@@ -1,37 +0,0 @@
-"use strict";
-var __defProp = Object.defineProperty;
-var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
-var __getOwnPropNames = Object.getOwnPropertyNames;
-var __hasOwnProp = Object.prototype.hasOwnProperty;
-var __export = (target, all) => {
-  for (var name in all)
-    __defProp(target, name, { get: all[name], enumerable: true });
-};
-var __copyProps = (to, from, except, desc) => {
-  if (from && typeof from === "object" || typeof from === "function") {
-    for (let key of __getOwnPropNames(from))
-      if (!__hasOwnProp.call(to, key) && key !== except)
-        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
-  }
-  return to;
-};
-var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
-var global_rules_exports = {};
-__export(global_rules_exports, {
-  addGlobalRules: () => addGlobalRules
-});
-module.exports = __toCommonJS(global_rules_exports);
-var import_fonts = require("@webstudio-is/fonts");
-const addGlobalRules = (engine, { assets, assetBaseUrl }) => {
-  engine.addPlaintextRule("html {margin: 0; display: grid; min-height: 100%}");
-  const fontAssets = [];
-  for (const asset of assets.values()) {
-    if (asset?.type === "font") {
-      fontAssets.push(asset);
-    }
-  }
-  const fontFaces = (0, import_fonts.getFontFaces)(fontAssets, { assetBaseUrl });
-  for (const fontFace of fontFaces) {
-    engine.addFontFaceRule(fontFace);
-  }
-};

package/lib/cjs/css/index.js

@@ -1,20 +0,0 @@
-"use strict";
-var __defProp = Object.defineProperty;
-var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
-var __getOwnPropNames = Object.getOwnPropertyNames;
-var __hasOwnProp = Object.prototype.hasOwnProperty;
-var __copyProps = (to, from, except, desc) => {
-  if (from && typeof from === "object" || typeof from === "function") {
-    for (let key of __getOwnPropNames(from))
-      if (!__hasOwnProp.call(to, key) && key !== except)
-        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
-  }
-  return to;
-};
-var __reExport = (target, mod, secondTarget) => (__copyProps(target, mod, "default"), secondTarget && __copyProps(secondTarget, mod, "default"));
-var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
-var css_exports = {};
-module.exports = __toCommonJS(css_exports);
-__reExport(css_exports, require("./global-rules"), module.exports);
-__reExport(css_exports, require("./style-rules"), module.exports);
-__reExport(css_exports, require("./css"), module.exports);

package/lib/cjs/css/normalize-type-check.js

@@ -1,26 +0,0 @@
-"use strict";
-var __create = Object.create;
-var __defProp = Object.defineProperty;
-var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
-var __getOwnPropNames = Object.getOwnPropertyNames;
-var __getProtoOf = Object.getPrototypeOf;
-var __hasOwnProp = Object.prototype.hasOwnProperty;
-var __copyProps = (to, from, except, desc) => {
-  if (from && typeof from === "object" || typeof from === "function") {
-    for (let key of __getOwnPropNames(from))
-      if (!__hasOwnProp.call(to, key) && key !== except)
-        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
-  }
-  return to;
-};
-var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
-  // If the importer is in node compatibility mode or this is not an ESM
-  // file that has been converted to a CommonJS file using a Babel-
-  // compatible transform (i.e. "__esModule" has not been set), then set
-  // "default" to the CommonJS "module.exports" for node compatibility.
-  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
-  mod
-));
-var normalize = __toESM(require("./normalize"), 1);
-const normalizeWithKeyof = { ...normalize };
-normalizeWithKeyof;