@webstudio-is/sdk-components-react 0.218.0 → 0.220.0

package/lib/box.ws.js

@@ -1,28 +1,26 @@
-import { BoxIcon as t } from "@webstudio-is/icons/svg";
 import { defaultStates as e } from "@webstudio-is/sdk";
-import { div as r, address as o, article as a, aside as i, figure as s, footer as n, header as d, main as p, nav as c, section as m } from "@webstudio-is/sdk/normalize.css";
-import { props as f } from "./__generated__/box.props.js";
-const v = {
+import { section as t, nav as r, main as a, header as i, footer as o, figure as s, aside as n, article as d, address as p, div as c } from "@webstudio-is/sdk/normalize.css";
+import { props as g } from "./__generated__/box.props.js";
+const u = {
   category: "general",
   description: "A container for content. By default this is a Div, but the tag can be changed in settings.",
-  icon: t,
   states: e,
   presetStyle: {
-    div: r,
-    address: o,
-    article: a,
-    aside: i,
+    div: c,
+    address: p,
+    article: d,
+    aside: n,
     figure: s,
-    footer: n,
-    header: d,
-    main: p,
-    nav: c,
-    section: m
+    footer: o,
+    header: i,
+    main: a,
+    nav: r,
+    section: t
   },
-  order: 0
-}, y = {
+  order: 0,
+  initialProps: ["tag", "id", "class"],
   props: {
-    ...f,
+    ...g,
     tag: {
       required: !0,
       control: "tag",
@@ -41,10 +39,8 @@ const v = {
         "span"
       ]
     }
-  },
-  initialProps: ["tag", "id", "className"]
+  }
 };
 export {
-  v as meta,
-  y as propsMeta
+  u as meta
 };

package/lib/button.ws.js

@@ -1,22 +1,18 @@
-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 a } from "./__generated__/button.props.js";
-const l = {
-  button: o
-}, m = {
-  icon: t,
-  presetStyle: l,
+import { button as t } from "@webstudio-is/sdk/normalize.css";
+import { props as l } from "./__generated__/button.props.js";
+const a = {
+  button: t
+}, i = {
+  presetStyle: a,
   states: [
     ...e,
     { selector: ":disabled", label: "Disabled" },
     { selector: ":enabled", label: "Enabled" }
-  ]
-}, n = {
-  props: a,
-  initialProps: ["id", "className", "type", "aria-label"]
+  ],
+  initialProps: ["id", "class", "type", "aria-label"],
+  props: l
 };
 export {
-  m as meta,
-  n as propsMeta
+  i as meta
 };

package/lib/checkbox.ws.js

@@ -22,12 +22,10 @@ const o = {
     { selector: ":enabled", label: "Enabled" },
     { selector: ":read-only", label: "Read Only" },
     { selector: ":read-write", label: "Read Write" }
-  ]
-}, n = {
-  props: r,
-  initialProps: ["id", "className", "name", "value", "required", "checked"]
+  ],
+  initialProps: ["id", "class", "name", "value", "required", "checked"],
+  props: r
 };
 export {
-  d as meta,
-  n as propsMeta
+  d as meta
 };

package/lib/code-text.ws.js

@@ -30,7 +30,7 @@ const p = {
       value: { type: "rgb", r: 238, g: 238, b: 238, alpha: 1 }
     }
   ]
-}, i = {
+}, c = {
   category: "general",
   description: "Use this component when you want to display code as text on the page.",
   icon: e,
@@ -40,8 +40,8 @@ const p = {
   },
   states: t,
   presetStyle: p,
-  order: 5
-}, s = {
+  order: 5,
+  initialProps: ["id", "class", "lang", "code"],
   props: {
     ...r,
     code: {
@@ -49,10 +49,8 @@ const p = {
       control: "codetext",
       type: "string"
     }
-  },
-  initialProps: ["id", "className", "lang", "code"]
+  }
 };
 export {
-  i as meta,
-  s as propsMeta
+  c as meta
 };

package/lib/form.ws.js

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

package/lib/fragment.ws.js

@@ -1,9 +1,4 @@
-const o = {
-  icon: ""
-}, p = {
-  props: {}
-};
+const t = {};
 export {
-  o as meta,
-  p as propsMeta
+  t as meta
 };

package/lib/head-link.ws.js

@@ -1,17 +1,14 @@
 import { ResourceIcon as o } from "@webstudio-is/icons/svg";
-import "@webstudio-is/sdk";
-import { props as r } from "./__generated__/head-link.props.js";
-const p = {
+import { props as e } from "./__generated__/head-link.props.js";
+const t = {
   icon: o,
   contentModel: {
     category: "none",
     children: []
-  }
-}, c = {
-  props: r,
-  initialProps: ["rel", "hrefLang", "href", "type", "as"]
+  },
+  initialProps: ["rel", "hrefLang", "href", "type", "as"],
+  props: e
 };
 export {
-  p as meta,
-  c as propsMeta
+  t as meta
 };

package/lib/head-meta.ws.js

@@ -1,17 +1,14 @@
 import { WindowInfoIcon as o } from "@webstudio-is/icons/svg";
-import "@webstudio-is/sdk";
 import { props as n } from "./__generated__/head-meta.props.js";
-const p = {
+const e = {
   icon: o,
   contentModel: {
     category: "none",
     children: []
-  }
-}, i = {
-  props: n,
-  initialProps: ["name", "property", "content"]
+  },
+  initialProps: ["name", "property", "content"],
+  props: n
 };
 export {
-  p as meta,
-  i as propsMeta
+  e as meta
 };

package/lib/head-slot.js

@@ -1,15 +1,14 @@
 import { jsx as n } from "react/jsx-runtime";
-import { ReactSdkContext as d, getClosestInstance as r } from "@webstudio-is/react-sdk/runtime";
-import { forwardRef as s, useContext as i } from "react";
+import { ReactSdkContext as s, getClosestInstance as r } from "@webstudio-is/react-sdk/runtime";
+import { forwardRef as d, useContext as i } from "react";
 import { XmlNode as c } from "./xml-node.js";
-const f = "head", p = s(({ children: a, ...t }, o) => {
-  const { renderer: e } = i(d);
+const f = "head", p = d(({ children: a, ...t }, o) => {
+  const { renderer: e } = i(s);
   return e === void 0 ? a : t["data-ws-expand"] !== !0 ? null : /* @__PURE__ */ n(
     "div",
     {
       ref: o,
       style: {
-        backgroundColor: "rgba(255,255,255,1)",
         padding: "8px",
         position: "fixed",
         top: 0,

package/lib/head-slot.ws.js

@@ -1,5 +1,4 @@
 import { HeaderIcon as e } from "@webstudio-is/icons/svg";
-import "@webstudio-is/sdk";
 import { props as t } from "./__generated__/head-slot.props.js";
 const r = {
   icon: e,
@@ -7,12 +6,9 @@ const r = {
   contentModel: {
     category: "instance",
     children: ["HeadLink", "HeadMeta", "HeadTitle"]
-  }
-}, a = {
-  props: t,
-  initialProps: []
+  },
+  props: t
 };
 export {
-  r as meta,
-  a as propsMeta
+  r as meta
 };

package/lib/head-title.ws.js

@@ -5,11 +5,9 @@ const r = {
   contentModel: {
     category: "none",
     children: ["text"]
-  }
-}, c = {
+  },
   props: t
 };
 export {
-  r as meta,
-  c as propsMeta
+  r as meta
 };

package/lib/heading.ws.js

@@ -1,32 +1,27 @@
-import { HeadingIcon as t } from "@webstudio-is/icons/svg";
-import { defaultStates as o } from "@webstudio-is/sdk";
-import { h1 as r, h2 as e, h3 as p, h4 as a, h5 as i, h6 as s } from "@webstudio-is/sdk/normalize.css";
-import { props as h } from "./__generated__/heading.props.js";
-const d = {
-  placeholder: "Heading",
-  icon: t,
-  states: o,
+import { defaultStates as t } from "@webstudio-is/sdk";
+import { h6 as r, h5 as o, h4 as e, h3 as h, h2 as p, h1 as s } from "@webstudio-is/sdk/normalize.css";
+import { props as i } from "./__generated__/heading.props.js";
+const n = {
+  states: t,
   presetStyle: {
-    h1: r,
-    h2: e,
-    h3: p,
-    h4: a,
-    h5: i,
-    h6: s
-  }
-}, g = {
+    h1: s,
+    h2: p,
+    h3: h,
+    h4: e,
+    h5: o,
+    h6: r
+  },
+  initialProps: ["tag", "id", "class"],
   props: {
-    ...h,
+    ...i,
     tag: {
       required: !0,
       control: "tag",
       type: "string",
       options: ["h1", "h2", "h3", "h4", "h5", "h6"]
     }
-  },
-  initialProps: ["tag", "id", "className"]
+  }
 };
 export {
-  d as meta,
-  g as propsMeta
+  n as meta
 };

package/lib/html-embed.ws.js

@@ -1,7 +1,7 @@
 import { EmbedIcon as t } from "@webstudio-is/icons/svg";
 import { descendantComponent as n } from "@webstudio-is/sdk";
 import { props as e } from "./__generated__/html-embed.props.js";
-const r = {
+const a = {
   category: "general",
   label: "HTML Embed",
   description: "Used to add HTML code to the page, such as an SVG or script.",
@@ -22,8 +22,8 @@ const r = {
         value: { type: "keyword", value: "collapse" }
       }
     ]
-  }
-}, c = {
+  },
+  initialProps: ["class", "clientOnly", "executeScriptOnCanvas"],
   props: {
     ...e,
     clientOnly: {
@@ -41,10 +41,8 @@ const r = {
       language: "html",
       type: "string"
     }
-  },
-  initialProps: ["className", "clientOnly", "executeScriptOnCanvas"]
+  }
 };
 export {
-  r as meta,
-  c as propsMeta
+  a as meta
 };

package/lib/image.ws.js

@@ -1,10 +1,9 @@
-import { ImageIcon as e } from "@webstudio-is/icons/svg";
-import { defaultStates as t } from "@webstudio-is/sdk";
-import { img as o } from "@webstudio-is/sdk/normalize.css";
-import { props as r } from "./__generated__/image.props.js";
-const a = {
+import { defaultStates as e } from "@webstudio-is/sdk";
+import { img as t } from "@webstudio-is/sdk/normalize.css";
+import { props as o } from "./__generated__/image.props.js";
+const r = {
   img: [
-    ...o,
+    ...t,
     // Otherwise on new image insert onto canvas it can overfit screen size multiple times
     {
       property: "max-width",
@@ -24,36 +23,33 @@ const a = {
       value: { type: "keyword", value: "auto" }
     }
   ]
-}, l = {
+}, s = {
   category: "media",
   description: "Add an image asset to the page. Webstudio automatically converts images to WebP or AVIF format and makes them responsive for best performance.",
-  icon: e,
-  states: t,
-  presetStyle: a,
-  order: 0
-}, n = {
-  props: {
-    ...r,
-    // Automatically generated props don't have the right control.
-    src: {
-      type: "string",
-      control: "file",
-      label: "Source",
-      required: !1
-    }
-  },
+  states: e,
+  presetStyle: r,
+  order: 0,
   initialProps: [
     "id",
-    "className",
+    "class",
     "src",
     "width",
     "height",
     "alt",
     "loading",
     "optimize"
-  ]
+  ],
+  props: {
+    ...o,
+    // Automatically generated props don't have the right control.
+    src: {
+      type: "string",
+      control: "file",
+      label: "Source",
+      required: !1
+    }
+  }
 };
 export {
-  l as meta,
-  n as propsMeta
+  s as meta
 };

package/lib/input.ws.js

@@ -1,24 +1,22 @@
-import { FormTextFieldIcon as e } from "@webstudio-is/icons/svg";
-import { defaultStates as l } from "@webstudio-is/sdk";
-import { input as o } from "@webstudio-is/sdk/normalize.css";
+import { defaultStates as e } from "@webstudio-is/sdk";
+import { input as l } from "@webstudio-is/sdk/normalize.css";
 import { props as t } from "./__generated__/input.props.js";
 const r = {
   input: [
-    ...o,
+    ...l,
     {
       property: "display",
       value: { type: "keyword", value: "block" }
     }
   ]
-}, c = {
+}, s = {
   category: "forms",
   label: "Text Input",
   description: "A single-line text input for collecting string data from your users.",
-  icon: e,
   presetStyle: r,
   order: 3,
   states: [
-    ...l,
+    ...e,
     { selector: "::placeholder", label: "Placeholder" },
     { selector: ":valid", label: "Valid" },
     { selector: ":invalid", label: "Invalid" },
@@ -29,21 +27,19 @@ const r = {
     //{ selector: ":enabled", label: "Enabled" },
     //{ selector: ":read-only", label: "Read Only" },
     //{ selector: ":read-write", label: "Read Write" },
-  ]
-}, n = {
-  props: t,
+  ],
   initialProps: [
     "id",
-    "className",
+    "class",
     "name",
     "value",
     "type",
     "placeholder",
     "required",
-    "autoFocus"
-  ]
+    "autofocus"
+  ],
+  props: t
 };
 export {
-  c as meta,
-  n as propsMeta
+  s as meta
 };

package/lib/italic.ws.js

@@ -1,8 +1,7 @@
-import { TextItalicIcon as t } from "@webstudio-is/icons/svg";
-import { defaultStates as o } from "@webstudio-is/sdk";
+import { defaultStates as t } from "@webstudio-is/sdk";
 import { i as e } from "@webstudio-is/sdk/normalize.css";
-import { props as r } from "./__generated__/italic.props.js";
-const i = {
+import { props as o } from "./__generated__/italic.props.js";
+const r = {
   i: [
     ...e,
     {
@@ -10,16 +9,13 @@ const i = {
       value: { type: "keyword", value: "italic" }
     }
   ]
-}, m = {
+}, p = {
   label: "Italic Text",
-  icon: t,
-  states: o,
-  presetStyle: i
-}, c = {
-  props: r,
-  initialProps: ["id", "className"]
+  states: t,
+  presetStyle: r,
+  initialProps: ["id", "class"],
+  props: o
 };
 export {
-  m as meta,
-  c as propsMeta
+  p as meta
 };

package/lib/label.ws.js

@@ -1,22 +1,18 @@
-import { LabelIcon as t } from "@webstudio-is/icons/svg";
-import { defaultStates as o } from "@webstudio-is/sdk";
+import { defaultStates as t } from "@webstudio-is/sdk";
 import { label as e } from "@webstudio-is/sdk/normalize.css";
 import { props as l } from "./__generated__/label.props.js";
-const r = {
+const o = {
   label: [
     ...e,
     { property: "display", value: { type: "keyword", value: "block" } }
   ]
-}, i = {
+}, s = {
   label: "Input Label",
-  icon: t,
-  states: o,
-  presetStyle: r
-}, c = {
-  props: l,
-  initialProps: ["id", "className", "htmlFor"]
+  states: t,
+  presetStyle: o,
+  initialProps: ["id", "class", "for"],
+  props: l
 };
 export {
-  i as meta,
-  c as propsMeta
+  s as meta
 };

package/lib/link.ws.js

@@ -1,21 +1,18 @@
-import { LinkIcon as e } from "@webstudio-is/icons/svg";
-import { defaultStates as t } from "@webstudio-is/sdk";
-import { a as r } from "@webstudio-is/sdk/normalize.css";
-import { props as o } from "./__generated__/link.props.js";
-const a = {
+import { defaultStates as e } from "@webstudio-is/sdk";
+import { a as t } from "@webstudio-is/sdk/normalize.css";
+import { props as r } from "./__generated__/link.props.js";
+const o = {
   a: [
-    ...r,
+    ...t,
     {
       property: "display",
       value: { type: "keyword", value: "inline-block" }
     }
   ]
-}, n = {
-  placeholder: "Link",
-  icon: e,
-  presetStyle: a,
+}, p = {
+  presetStyle: o,
   states: [
-    ...t,
+    ...e,
     {
       selector: ":visited",
       label: "Visited"
@@ -25,19 +22,17 @@ const a = {
       selector: "[aria-current=page]",
       label: "Current page"
     }
-  ]
-}, c = {
+  ],
+  initialProps: ["id", "class", "href", "target", "prefetch", "download"],
   props: {
-    ...o,
+    ...r,
     href: {
       type: "string",
       control: "url",
       required: !1
     }
-  },
-  initialProps: ["id", "className", "href", "target", "prefetch", "download"]
+  }
 };
 export {
-  n as meta,
-  c as propsMeta
+  p as meta
 };

package/lib/list-item.ws.js

@@ -1,19 +1,12 @@
-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 { defaultStates as t } from "@webstudio-is/sdk";
+import { li as o } from "@webstudio-is/sdk/normalize.css";
 import { props as r } from "./__generated__/list-item.props.js";
-const a = {
-  placeholder: "List item",
-  icon: t,
-  states: o,
-  presetStyle: {
-    li: e
-  }
-}, l = {
-  props: r,
-  initialProps: ["id", "className"]
+const p = {
+  states: t,
+  presetStyle: { li: o },
+  initialProps: ["id", "class"],
+  props: r
 };
 export {
-  a as meta,
-  l as propsMeta
+  p as meta
 };