@webstudio-is/sdk-components-react 0.208.0 → 0.210.0

package/lib/button.ws.js

@@ -1,27 +1,23 @@
 import { ButtonElementIcon as t } from "@webstudio-is/icons/svg";
 import { defaultStates as e } from "@webstudio-is/sdk";
 import { button as o } from "@webstudio-is/sdk/normalize.css";
-import { props as n } from "./__generated__/button.props.js";
-const a = {
+import { props as a } from "./__generated__/button.props.js";
+const l = {
   button: o
 }, p = {
   icon: t,
   type: "container",
-  constraints: {
-    relation: "ancestor",
-    component: { $nin: ["Button", "Link"] }
-  },
-  presetStyle: a,
+  presetStyle: l,
   states: [
     ...e,
     { selector: ":disabled", label: "Disabled" },
     { selector: ":enabled", label: "Enabled" }
   ]
-}, c = {
-  props: n,
+}, m = {
+  props: a,
   initialProps: ["id", "className", "type", "aria-label"]
 };
 export {
   p as meta,
-  c as propsMeta
+  m as propsMeta
 };

package/lib/checkbox.ws.js

@@ -1,25 +1,21 @@
 import { CheckboxCheckedIcon as e } from "@webstudio-is/icons/svg";
-import { defaultStates as t } from "@webstudio-is/sdk";
-import { checkbox as o } from "@webstudio-is/sdk/normalize.css";
-import { props as l } from "./__generated__/checkbox.props.js";
-const r = {
+import { defaultStates as l } from "@webstudio-is/sdk";
+import { checkbox as t } from "@webstudio-is/sdk/normalize.css";
+import { props as r } from "./__generated__/checkbox.props.js";
+const o = {
   input: [
-    ...o,
+    ...t,
     {
       property: "margin-right",
       value: { type: "unit", unit: "em", value: 0.5 }
     }
   ]
-}, s = {
-  constraints: {
-    relation: "ancestor",
-    component: { $nin: ["Button", "Link"] }
-  },
+}, d = {
   type: "control",
   icon: e,
-  presetStyle: r,
+  presetStyle: o,
   states: [
-    ...t,
+    ...l,
     { selector: ":checked", label: "Checked" },
     { selector: ":required", label: "Required" },
     { selector: ":optional", label: "Optional" },
@@ -28,11 +24,11 @@ const r = {
     { selector: ":read-only", label: "Read Only" },
     { selector: ":read-write", label: "Read Write" }
   ]
-}, p = {
-  props: l,
+}, n = {
+  props: r,
   initialProps: ["id", "className", "name", "value", "required", "checked"]
 };
 export {
-  s as meta,
-  p as propsMeta
+  d as meta,
+  n as propsMeta
 };

package/lib/code-text.ws.js

@@ -30,19 +30,15 @@ const p = {
       value: { type: "rgb", r: 238, g: 238, b: 238, alpha: 1 }
     }
   ]
-}, i = {
+}, d = {
   category: "general",
   type: "embed",
   description: "Use this component when you want to display code as text on the page.",
   icon: e,
-  constraints: {
-    relation: "ancestor",
-    component: { $neq: "CodeText" }
-  },
   states: t,
   presetStyle: p,
   order: 5
-}, c = {
+}, n = {
   props: {
     ...r,
     code: {
@@ -54,6 +50,6 @@ const p = {
   initialProps: ["id", "className", "lang", "code"]
 };
 export {
-  i as meta,
-  c as propsMeta
+  d as meta,
+  n as propsMeta
 };

package/lib/form.ws.js

@@ -1,30 +1,26 @@
-import { FormIcon as t } from "@webstudio-is/icons/svg";
-import { defaultStates as o } from "@webstudio-is/sdk";
-import { form as r } from "@webstudio-is/sdk/normalize.css";
+import { FormIcon as r } from "@webstudio-is/icons/svg";
+import { defaultStates as t } from "@webstudio-is/sdk";
+import { form as o } from "@webstudio-is/sdk/normalize.css";
 import { props as e } from "./__generated__/form.props.js";
-const n = {
+const s = {
   form: [
-    ...r,
+    ...o,
     { property: "min-height", value: { type: "unit", unit: "px", value: 20 } }
   ]
-}, p = {
+}, n = {
   category: "forms",
   type: "container",
   label: "Form",
-  constraints: {
-    relation: "ancestor",
-    component: { $nin: ["Form", "Button", "Link"] }
-  },
   description: "Create filters, surveys, searches and more.",
-  icon: t,
-  states: o,
-  presetStyle: n,
+  icon: r,
+  states: t,
+  presetStyle: s,
   order: 0
 }, c = {
   props: e,
   initialProps: ["id", "className", "action"]
 };
 export {
-  p as meta,
+  n as meta,
   c as propsMeta
 };

package/lib/heading.ws.js

@@ -1,26 +1,22 @@
 import { HeadingIcon as t } from "@webstudio-is/icons/svg";
 import { defaultStates as o } from "@webstudio-is/sdk";
-import { h1 as e, h2 as n, h3 as r, h4 as a, h5 as i, h6 as s } from "@webstudio-is/sdk/normalize.css";
-import { props as p } from "./__generated__/heading.props.js";
-const c = {
+import { h1 as e, h2 as r, h3 as a, h4 as p, h5 as i, h6 as s } from "@webstudio-is/sdk/normalize.css";
+import { props as m } from "./__generated__/heading.props.js";
+const n = {
   h1: e,
-  h2: n,
-  h3: r,
-  h4: a,
+  h2: r,
+  h3: a,
+  h4: p,
   h5: i,
   h6: s
 }, f = {
   type: "container",
   placeholder: "Heading",
   icon: t,
-  constraints: {
-    relation: "ancestor",
-    component: { $neq: "Heading" }
-  },
   states: o,
-  presetStyle: c
+  presetStyle: n
 }, g = {
-  props: p,
+  props: m,
   initialProps: ["id", "className", "tag"]
 };
 export {

package/lib/input.ws.js

@@ -1,7 +1,7 @@
 import { FormTextFieldIcon as e } from "@webstudio-is/icons/svg";
-import { defaultStates as t } from "@webstudio-is/sdk";
+import { defaultStates as l } from "@webstudio-is/sdk";
 import { input as o } from "@webstudio-is/sdk/normalize.css";
-import { props as l } from "./__generated__/input.props.js";
+import { props as t } from "./__generated__/input.props.js";
 const r = {
   input: [
     ...o,
@@ -10,12 +10,8 @@ const r = {
       value: { type: "keyword", value: "block" }
     }
   ]
-}, p = {
+}, c = {
   category: "forms",
-  constraints: {
-    relation: "ancestor",
-    component: { $nin: ["Button", "Link"] }
-  },
   type: "control",
   label: "Text Input",
   description: "A single-line text input for collecting string data from your users.",
@@ -23,7 +19,7 @@ const r = {
   presetStyle: r,
   order: 3,
   states: [
-    ...t,
+    ...l,
     { selector: "::placeholder", label: "Placeholder" },
     { selector: ":valid", label: "Valid" },
     { selector: ":invalid", label: "Invalid" },
@@ -35,8 +31,8 @@ const r = {
     //{ selector: ":read-only", label: "Read Only" },
     //{ selector: ":read-write", label: "Read Write" },
   ]
-}, c = {
-  props: l,
+}, n = {
+  props: t,
   initialProps: [
     "id",
     "className",
@@ -49,6 +45,6 @@ const r = {
   ]
 };
 export {
-  p as meta,
-  c as propsMeta
+  c as meta,
+  n as propsMeta
 };

package/lib/label.ws.js

@@ -1,27 +1,23 @@
 import { LabelIcon as t } from "@webstudio-is/icons/svg";
-import { defaultStates as o } from "@webstudio-is/sdk";
-import { label as e } from "@webstudio-is/sdk/normalize.css";
+import { defaultStates as e } from "@webstudio-is/sdk";
+import { label as o } from "@webstudio-is/sdk/normalize.css";
 import { props as r } from "./__generated__/label.props.js";
 const a = {
   label: [
-    ...e,
+    ...o,
     { property: "display", value: { type: "keyword", value: "block" } }
   ]
-}, i = {
-  constraints: {
-    relation: "ancestor",
-    component: { $nin: ["Button", "Link"] }
-  },
+}, m = {
   type: "container",
   label: "Input Label",
   icon: t,
-  states: o,
+  states: e,
   presetStyle: a
-}, m = {
+}, n = {
   props: r,
   initialProps: ["id", "className", "htmlFor"]
 };
 export {
-  i as meta,
-  m as propsMeta
+  m as meta,
+  n as propsMeta
 };

package/lib/link.ws.js

@@ -10,14 +10,10 @@ const a = {
       value: { type: "keyword", value: "inline-block" }
     }
   ]
-}, l = {
+}, n = {
   type: "container",
   placeholder: "Link",
   icon: e,
-  constraints: {
-    relation: "ancestor",
-    component: { $nin: ["Button", "Link"] }
-  },
   presetStyle: a,
   states: [
     ...t,
@@ -43,6 +39,6 @@ const a = {
   initialProps: ["id", "className", "href", "target", "prefetch", "download"]
 };
 export {
-  l as meta,
+  n as meta,
   c as propsMeta
 };

package/lib/list-item.ws.js

@@ -2,26 +2,19 @@ import { ListItemIcon as t } from "@webstudio-is/icons/svg";
 import { defaultStates as o } from "@webstudio-is/sdk";
 import { li as e } from "@webstudio-is/sdk/normalize.css";
 import { props as r } from "./__generated__/list-item.props.js";
-const s = {
-  li: e
-}, m = {
+const a = {
   type: "container",
   placeholder: "List item",
-  constraints: {
-    // cannot use parent relation here
-    // because list item can be put inside of collection or slot
-    // perhaps can be eventually fixed with tag matchers
-    relation: "ancestor",
-    component: { $eq: "List" }
-  },
   icon: t,
   states: o,
-  presetStyle: s
+  presetStyle: {
+    li: e
+  }
 }, c = {
   props: r,
   initialProps: ["id", "className"]
 };
 export {
-  m as meta,
+  a as meta,
   c as propsMeta
 };

package/lib/option.ws.js

@@ -1,6 +1,6 @@
 import { ItemIcon as e } from "@webstudio-is/icons/svg";
 import { props as t } from "./__generated__/option.props.js";
-const o = {
+const l = {
   option: [
     {
       property: "background-color",
@@ -16,14 +16,10 @@ const o = {
   ]
 }, r = {
   category: "hidden",
-  constraints: {
-    relation: "parent",
-    component: { $eq: "Select" }
-  },
   type: "control",
   description: "An item within a drop-down menu that users can select as their chosen value.",
   icon: e,
-  presetStyle: o,
+  presetStyle: l,
   states: [
     // Applies when option is being activated (clicked)
     { selector: ":active", label: "Active" },

package/lib/paragraph.ws.js

@@ -2,23 +2,19 @@ import { TextAlignLeftIcon as t } from "@webstudio-is/icons/svg";
 import { defaultStates as o } from "@webstudio-is/sdk";
 import { p as r } from "@webstudio-is/sdk/normalize.css";
 import { props as e } from "./__generated__/paragraph.props.js";
-const a = {
+const p = {
   p: r
-}, c = {
+}, n = {
   type: "container",
   placeholder: "Paragraph",
   icon: t,
-  constraints: {
-    relation: "ancestor",
-    component: { $neq: "Paragraph" }
-  },
   states: o,
-  presetStyle: a
-}, m = {
+  presetStyle: p
+}, c = {
   props: e,
   initialProps: ["id", "className"]
 };
 export {
-  c as meta,
-  m as propsMeta
+  n as meta,
+  c as propsMeta
 };

package/lib/radio-button.ws.js

@@ -2,7 +2,7 @@ import { RadioCheckedIcon as e } from "@webstudio-is/icons/svg";
 import { defaultStates as t } from "@webstudio-is/sdk";
 import { radio as o } from "@webstudio-is/sdk/normalize.css";
 import { props as r } from "./__generated__/radio-button.props.js";
-const i = {
+const a = {
   input: [
     ...o,
     {
@@ -10,15 +10,11 @@ const i = {
       value: { type: "unit", unit: "em", value: 0.5 }
     }
   ]
-}, p = {
-  constraints: {
-    relation: "ancestor",
-    component: { $nin: ["Button", "Link"] }
-  },
+}, s = {
   type: "control",
   label: "Radio",
   icon: e,
-  presetStyle: i,
+  presetStyle: a,
   states: [
     ...t,
     { selector: ":checked", label: "Checked" },
@@ -30,11 +26,11 @@ const i = {
     //{ selector: ":read-only", label: "Read Only" },
     //{ selector: ":read-write", label: "Read Write" },
   ]
-}, s = {
+}, n = {
   props: r,
   initialProps: ["id", "className", "name", "value", "required", "checked"]
 };
 export {
-  p as meta,
-  s as propsMeta
+  s as meta,
+  n as propsMeta
 };

package/lib/select.ws.js

@@ -1,32 +1,28 @@
 import { SelectIcon as e } from "@webstudio-is/icons/svg";
-import { defaultStates as t } from "@webstudio-is/sdk";
-import { select as l } from "@webstudio-is/sdk/normalize.css";
+import { defaultStates as l } from "@webstudio-is/sdk";
+import { select as t } from "@webstudio-is/sdk/normalize.css";
 import { props as o } from "./__generated__/select.props.js";
 const r = {
   select: [
-    ...l,
+    ...t,
     {
       property: "display",
       value: { type: "keyword", value: "block" }
     }
   ]
 }, c = {
-  constraints: {
-    relation: "ancestor",
-    component: { $nin: ["Button", "Link"] }
-  },
   type: "container",
   icon: e,
   presetStyle: r,
   states: [
-    ...t,
+    ...l,
     { selector: "::placeholder", label: "Placeholder" },
     { selector: ":valid", label: "Valid" },
     { selector: ":invalid", label: "Invalid" },
     { selector: ":required", label: "Required" },
     { selector: ":optional", label: "Optional" }
   ]
-}, p = {
+}, d = {
   props: o,
   initialProps: [
     "id",
@@ -40,5 +36,5 @@ const r = {
 };
 export {
   c as meta,
-  p as propsMeta
+  d as propsMeta
 };

package/lib/textarea.ws.js

@@ -1,10 +1,10 @@
 import { FormTextAreaIcon as e } from "@webstudio-is/icons/svg";
-import { defaultStates as o } from "@webstudio-is/sdk";
-import { textarea as t } from "@webstudio-is/sdk/normalize.css";
-import { props as r } from "./__generated__/textarea.props.js";
+import { defaultStates as r } from "@webstudio-is/sdk";
+import { textarea as o } from "@webstudio-is/sdk/normalize.css";
+import { props as t } from "./__generated__/textarea.props.js";
 const l = {
   textarea: [
-    ...t,
+    ...o,
     // resize doesn't work well while on canvas
     { property: "resize", value: { type: "keyword", value: "none" } },
     {
@@ -12,7 +12,7 @@ const l = {
       value: { type: "keyword", value: "block" }
     }
   ]
-}, p = {
+}, c = {
   category: "forms",
   type: "control",
   label: "Text Area",
@@ -20,12 +20,8 @@ const l = {
   icon: e,
   presetStyle: l,
   order: 4,
-  constraints: {
-    relation: "ancestor",
-    component: { $nin: ["Button", "Link"] }
-  },
   states: [
-    ...o,
+    ...r,
     { selector: "::placeholder", label: "Placeholder" },
     { selector: ":valid", label: "Valid" },
     { selector: ":invalid", label: "Invalid" },
@@ -37,8 +33,8 @@ const l = {
     //{ selector: ":read-only", label: "Read Only" },
     //{ selector: ":read-write", label: "Read Write" },
   ]
-}, c = {
-  props: r,
+}, n = {
+  props: t,
   initialProps: [
     "id",
     "className",
@@ -50,6 +46,6 @@ const l = {
   ]
 };
 export {
-  p as meta,
-  c as propsMeta
+  c as meta,
+  n as propsMeta
 };

package/lib/webhook-form.ws.js

@@ -1,34 +1,30 @@
-import { WebhookFormIcon as o } from "@webstudio-is/icons/svg";
-import { form as t } from "@webstudio-is/sdk/normalize.css";
-import { props as e } from "./__generated__/webhook-form.props.js";
-const n = {
+import { WebhookFormIcon as e } from "@webstudio-is/icons/svg";
+import { form as o } from "@webstudio-is/sdk/normalize.css";
+import { props as r } from "./__generated__/webhook-form.props.js";
+const c = {
   label: "Webhook Form",
-  icon: o,
+  icon: e,
   type: "container",
-  constraints: {
-    relation: "ancestor",
-    component: { $nin: ["Form", "Button", "Link"] }
-  },
   presetStyle: {
-    form: t
+    form: o
   },
   states: [
     { selector: "[data-state=error]", label: "Error" },
     { selector: "[data-state=success]", label: "Success" }
   ]
-}, c = {
+}, i = {
   props: {
-    ...e,
+    ...r,
     action: {
       type: "resource",
       control: "resource",
       description: "The URI of a program that processes the information submitted via the form.",
-      required: !0
+      required: !1
     }
   },
   initialProps: ["id", "className", "state", "action"]
 };
 export {
-  n as meta,
-  c as propsMeta
+  c as meta,
+  i as propsMeta
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@webstudio-is/sdk-components-react",
-  "version": "0.208.0",
+  "version": "0.210.0",
   "description": "Webstudio default library for react",
   "author": "Webstudio <github@webstudio.is>",
   "homepage": "https://webstudio.is",
@@ -47,12 +47,12 @@
     "@react-aria/utils": "^3.27.0",
     "await-interaction-response": "^0.0.2",
     "colord": "^2.9.3",
-    "micromark": "^4.0.1",
-    "micromark-extension-gfm-table": "^2.1.0",
-    "@webstudio-is/icons": "0.208.0",
-    "@webstudio-is/image": "0.208.0",
-    "@webstudio-is/react-sdk": "0.208.0",
-    "@webstudio-is/sdk": "0.208.0"
+    "micromark": "^4.0.2",
+    "micromark-extension-gfm-table": "^2.1.1",
+    "@webstudio-is/icons": "0.210.0",
+    "@webstudio-is/react-sdk": "0.210.0",
+    "@webstudio-is/image": "0.210.0",
+    "@webstudio-is/sdk": "0.210.0"
   },
   "devDependencies": {
     "@testing-library/dom": "^10.4.0",
@@ -63,9 +63,9 @@
     "react-dom": "18.3.0-canary-14898b6a9-20240318",
     "vitest": "^3.0.8",
     "@webstudio-is/sdk-cli": "0.94.0",
+    "@webstudio-is/tsconfig": "1.0.7",
     "@webstudio-is/generate-arg-types": "0.0.0",
-    "@webstudio-is/template": "0.208.0",
-    "@webstudio-is/tsconfig": "1.0.7"
+    "@webstudio-is/template": "0.210.0"
   },
   "scripts": {
     "build": "vite build --config ../../vite.sdk-components.config.ts",