@webstudio-is/react-sdk 0.60.0 → 0.62.0

package/lib/cjs/css/normalize.js

@@ -43,6 +43,7 @@ __export(normalize_exports, {
   img: () => img,
   input: () => input,
   kbd: () => kbd,
+  label: () => label,
   legend: () => legend,
   li: () => li,
   main: () => main,
@@ -68,13 +69,10 @@ __export(normalize_exports, {
 module.exports = __toCommonJS(normalize_exports);
 var import_presets = require("./presets");
 const boxSizing = {
-  type: "keyword",
-  value: "border-box"
-};
-const baseStyle = {
-  boxSizing,
-  ...import_presets.borders
+  property: "boxSizing",
+  value: { type: "keyword", value: "border-box" }
 };
+const baseStyle = [boxSizing, ...import_presets.borders];
 const div = baseStyle;
 const address = baseStyle;
 const article = baseStyle;
@@ -86,6 +84,7 @@ const main = baseStyle;
 const nav = baseStyle;
 const section = baseStyle;
 const form = baseStyle;
+const label = baseStyle;
 const h1 = baseStyle;
 const h2 = baseStyle;
 const h3 = baseStyle;
@@ -100,259 +99,243 @@ const ul = baseStyle;
 const ol = baseStyle;
 const p = baseStyle;
 const span = baseStyle;
-const html = {
+const html = [
   /* 1 */
-  lineHeight: {
-    type: "unit",
-    value: 1.15,
-    unit: "number"
+  {
+    property: "lineHeight",
+    value: { type: "unit", value: 1.15, unit: "number" }
   },
   /* 2 */
-  textSizeAdjust: {
-    type: "unit",
-    value: 100,
-    unit: "%"
+  {
+    property: "textSizeAdjust",
+    value: { type: "unit", value: 100, unit: "%" }
   },
   /* 3 */
-  tabSize: {
-    type: "unit",
-    value: 4,
-    unit: "number"
+  {
+    property: "tabSize",
+    value: { type: "unit", value: 4, unit: "number" }
   },
   boxSizing,
   ...import_presets.borders
-};
-const body = {
+];
+const body = [
   /* 1 */
-  marginTop: {
-    type: "unit",
-    value: 0,
-    unit: "number"
-  },
-  marginRight: {
-    type: "unit",
-    value: 0,
-    unit: "number"
-  },
-  marginBottom: {
-    type: "unit",
-    value: 0,
-    unit: "number"
-  },
-  marginLeft: {
-    type: "unit",
-    value: 0,
-    unit: "number"
+  {
+    property: "marginTop",
+    value: { type: "unit", value: 0, unit: "number" }
+  },
+  {
+    property: "marginRight",
+    value: { type: "unit", value: 0, unit: "number" }
+  },
+  {
+    property: "marginBottom",
+    value: { type: "unit", value: 0, unit: "number" }
+  },
+  {
+    property: "marginLeft",
+    value: { type: "unit", value: 0, unit: "number" }
   },
   /* 2 */
-  fontFamily: {
-    type: "keyword",
-    value: `system-ui, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji'`
+  {
+    property: "fontFamily",
+    value: {
+      type: "keyword",
+      value: `system-ui, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji'`
+    }
   },
   boxSizing,
   ...import_presets.borders
-};
-const hr = {
+];
+const hr = [
   /* 1 */
-  height: {
-    type: "unit",
-    value: 0,
-    unit: "number"
+  {
+    property: "height",
+    value: { type: "unit", value: 0, unit: "number" }
   },
   /* 2 */
-  color: { type: "keyword", value: "inherit" },
+  {
+    property: "color",
+    value: { type: "keyword", value: "inherit" }
+  },
   boxSizing,
   ...import_presets.borders
-};
-const b = {
-  fontWeight: {
-    type: "keyword",
-    value: "bolder"
+];
+const b = [
+  {
+    property: "fontWeight",
+    value: { type: "keyword", value: "700" }
   },
   boxSizing,
   ...import_presets.borders
-};
+];
 const strong = b;
-const code = {
+const code = [
   /* 1 */
-  fontFamily: {
-    type: "keyword",
-    value: `ui-monospace, SFMono-Regular, Consolas, 'Liberation Mono', Menlo, monospace`
+  {
+    property: "fontFamily",
+    value: {
+      type: "keyword",
+      value: `ui-monospace, SFMono-Regular, Consolas, 'Liberation Mono', Menlo, monospace`
+    }
   },
   /* 2 */
-  fontSize: {
-    type: "unit",
-    value: 1,
-    unit: "em"
+  {
+    property: "fontSize",
+    value: { type: "unit", value: 1, unit: "em" }
   },
   boxSizing,
   ...import_presets.borders
-};
+];
 const kbd = code;
 const samp = code;
 const pre = code;
-const small = {
-  fontSize: {
-    type: "unit",
-    value: 80,
-    unit: "%"
+const small = [
+  {
+    property: "fontSize",
+    value: { type: "unit", value: 80, unit: "%" }
   },
   boxSizing,
   ...import_presets.borders
-};
-const subSupBase = {
-  fontSize: {
-    type: "unit",
-    value: 75,
-    unit: "%"
+];
+const subSupBase = [
+  {
+    property: "fontSize",
+    value: { type: "unit", value: 75, unit: "%" }
   },
-  lineHeight: {
-    type: "unit",
-    value: 0,
-    unit: "number"
+  {
+    property: "lineHeight",
+    value: { type: "unit", value: 0, unit: "number" }
   },
-  position: {
-    type: "keyword",
-    value: "relative"
+  {
+    property: "position",
+    value: { type: "keyword", value: "relative" }
   },
-  verticalAlign: {
-    type: "keyword",
-    value: "baseline"
+  {
+    property: "verticalAlign",
+    value: { type: "keyword", value: "baseline" }
   },
   boxSizing,
   ...import_presets.borders
-};
-const sub = {
+];
+const sub = [
   ...subSupBase,
-  bottom: {
-    type: "unit",
-    value: -0.25,
-    unit: "em"
+  {
+    property: "bottom",
+    value: { type: "unit", value: -0.25, unit: "em" }
   }
-};
-const sup = {
+];
+const sup = [
   ...subSupBase,
-  top: {
-    type: "unit",
-    value: -0.5,
-    unit: "em"
+  {
+    property: "top",
+    value: { type: "unit", value: -0.5, unit: "em" }
   }
-};
-const table = {
+];
+const table = [
   /* 1 */
-  textIndent: {
-    type: "unit",
-    value: 0,
-    unit: "number"
+  {
+    property: "textIndent",
+    value: { type: "unit", value: 0, unit: "number" }
   },
   ...import_presets.borders,
   /* 2 */
-  borderTopColor: {
-    type: "keyword",
-    value: "inherit"
+  {
+    property: "borderTopColor",
+    value: { type: "keyword", value: "inherit" }
   },
-  borderRightColor: {
-    type: "keyword",
-    value: "inherit"
+  {
+    property: "borderRightColor",
+    value: { type: "keyword", value: "inherit" }
   },
-  borderBottomColor: {
-    type: "keyword",
-    value: "inherit"
+  {
+    property: "borderBottomColor",
+    value: { type: "keyword", value: "inherit" }
   },
-  borderLeftColor: {
-    type: "keyword",
-    value: "inherit"
+  {
+    property: "borderLeftColor",
+    value: { type: "keyword", value: "inherit" }
   },
   boxSizing
-};
-const buttonBase = {
+];
+const buttonBase = [
   /* 1 */
-  fontFamily: {
-    type: "keyword",
-    value: "inherit"
+  {
+    property: "fontFamily",
+    value: { type: "keyword", value: "inherit" }
   },
-  fontSize: {
-    type: "unit",
-    value: 100,
-    unit: "%"
+  {
+    property: "fontSize",
+    value: { type: "unit", value: 100, unit: "%" }
   },
-  lineHeight: {
-    type: "unit",
-    value: 1.15,
-    unit: "number"
+  {
+    property: "lineHeight",
+    value: { type: "unit", value: 1.15, unit: "number" }
   },
   /* 2 */
-  marginTop: {
-    type: "unit",
-    value: 0,
-    unit: "number"
-  },
-  marginRight: {
-    type: "unit",
-    value: 0,
-    unit: "number"
-  },
-  marginBottom: {
-    type: "unit",
-    value: 0,
-    unit: "number"
-  },
-  marginLeft: {
-    type: "unit",
-    value: 0,
-    unit: "number"
+  {
+    property: "marginTop",
+    value: { type: "unit", value: 0, unit: "number" }
+  },
+  {
+    property: "marginRight",
+    value: { type: "unit", value: 0, unit: "number" }
+  },
+  {
+    property: "marginBottom",
+    value: { type: "unit", value: 0, unit: "number" }
+  },
+  {
+    property: "marginLeft",
+    value: { type: "unit", value: 0, unit: "number" }
   },
   boxSizing,
   ...import_presets.borders
-};
+];
 const input = buttonBase;
 const optgroup = buttonBase;
 const textarea = buttonBase;
-const button = {
+const button = [
   ...buttonBase,
-  textTransform: {
-    type: "keyword",
-    value: "none"
+  {
+    property: "textTransform",
+    value: { type: "keyword", value: "none" }
   }
-};
+];
 const select = button;
-const legend = {
-  paddingTop: {
-    type: "unit",
-    value: 0,
-    unit: "number"
-  },
-  paddingRight: {
-    type: "unit",
-    value: 0,
-    unit: "number"
-  },
-  paddingBottom: {
-    type: "unit",
-    value: 0,
-    unit: "number"
-  },
-  paddingLeft: {
-    type: "unit",
-    value: 0,
-    unit: "number"
+const legend = [
+  {
+    property: "paddingTop",
+    value: { type: "unit", value: 0, unit: "number" }
+  },
+  {
+    property: "paddingRight",
+    value: { type: "unit", value: 0, unit: "number" }
+  },
+  {
+    property: "paddingBottom",
+    value: { type: "unit", value: 0, unit: "number" }
+  },
+  {
+    property: "paddingLeft",
+    value: { type: "unit", value: 0, unit: "number" }
   },
   boxSizing,
   ...import_presets.borders
-};
-const progress = {
-  verticalAlign: {
-    type: "keyword",
-    value: "baseline"
+];
+const progress = [
+  {
+    property: "verticalAlign",
+    value: { type: "keyword", value: "baseline" }
   },
   boxSizing,
   ...import_presets.borders
-};
-const summary = {
-  display: {
-    type: "keyword",
-    value: "list-item"
+];
+const summary = [
+  {
+    property: "display",
+    value: { type: "keyword", value: "list-item" }
   },
   boxSizing,
   ...import_presets.borders
-};
+];

package/lib/cjs/css/presets.js

@@ -21,41 +21,21 @@ __export(presets_exports, {
   borders: () => borders
 });
 module.exports = __toCommonJS(presets_exports);
-const borders = {
-  borderTopColor: {
-    type: "keyword",
-    value: "currentColor"
+const borders = [
+  {
+    property: "borderTopWidth",
+    value: { type: "unit", value: 1, unit: "px" }
   },
-  borderRightColor: {
-    type: "keyword",
-    value: "currentColor"
+  {
+    property: "borderRightWidth",
+    value: { type: "unit", value: 1, unit: "px" }
   },
-  borderBottomColor: {
-    type: "keyword",
-    value: "currentColor"
+  {
+    property: "borderBottomWidth",
+    value: { type: "unit", value: 1, unit: "px" }
   },
-  borderLeftColor: {
-    type: "keyword",
-    value: "currentColor"
-  },
-  borderTopWidth: {
-    type: "unit",
-    value: 1,
-    unit: "px"
-  },
-  borderRightWidth: {
-    type: "unit",
-    value: 1,
-    unit: "px"
-  },
-  borderBottomWidth: {
-    type: "unit",
-    value: 1,
-    unit: "px"
-  },
-  borderLeftWidth: {
-    type: "unit",
-    value: 1,
-    unit: "px"
+  {
+    property: "borderLeftWidth",
+    value: { type: "unit", value: 1, unit: "px" }
   }
-};
+];

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

@@ -18,9 +18,11 @@ var __copyProps = (to, from, except, desc) => {
 var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
 var style_rules_exports = {};
 __export(style_rules_exports, {
+  getPresetStyleRules: () => getPresetStyleRules,
   getStyleRules: () => getStyleRules
 });
 module.exports = __toCommonJS(style_rules_exports);
+var import_tree = require("../tree");
 const getStyleRules = (styles, styleSourceSelections) => {
   if (styles === void 0 || styleSourceSelections === void 0) {
     return [];
@@ -67,3 +69,18 @@ const getStyleRules = (styles, styleSourceSelections) => {
   }
   return styleRules;
 };
+const getPresetStyleRules = (component, presetStyle) => {
+  const presetStyleRules = /* @__PURE__ */ new Map();
+  for (const [tag, styles] of Object.entries(presetStyle)) {
+    for (const styleDecl of styles) {
+      const selector = `${tag}:where([${import_tree.componentAttribute}=${component}])${styleDecl.state ?? ""}`;
+      let rule = presetStyleRules.get(selector);
+      if (rule === void 0) {
+        rule = {};
+        presetStyleRules.set(selector, rule);
+      }
+      rule[styleDecl.property] = styleDecl.value;
+    }
+  }
+  return presetStyleRules;
+};