@webstudio-is/sdk-components-react 0.191.0 → 0.191.4

package/lib/blockquote.js

@@ -1,9 +0,0 @@
-import { jsx as e } from "react/jsx-runtime";
-import { forwardRef as m } from "react";
-const c = m(
-  ({ children: o, ...r }, t) => /* @__PURE__ */ e("blockquote", { ...r, ref: t, children: o })
-);
-c.displayName = "Blockquote";
-export {
-  c as Blockquote
-};

package/lib/blockquote.ws.js

@@ -1,79 +0,0 @@
-import { BlockquoteIcon as e } from "@webstudio-is/icons/svg";
-import { defaultStates as t } from "@webstudio-is/react-sdk";
-import { props as p } from "./__generated__/blockquote.props.js";
-const r = {
-  blockquote: [
-    {
-      property: "marginTop",
-      value: { type: "unit", value: 0, unit: "number" }
-    },
-    {
-      property: "marginRight",
-      value: { type: "unit", value: 0, unit: "number" }
-    },
-    {
-      property: "marginBottom",
-      value: { type: "unit", value: 10, unit: "px" }
-    },
-    {
-      property: "marginLeft",
-      value: { type: "unit", value: 0, unit: "number" }
-    },
-    {
-      property: "paddingTop",
-      value: { type: "unit", value: 10, unit: "px" }
-    },
-    {
-      property: "paddingBottom",
-      value: { type: "unit", value: 10, unit: "px" }
-    },
-    {
-      property: "paddingLeft",
-      value: { type: "unit", value: 20, unit: "px" }
-    },
-    {
-      property: "paddingRight",
-      value: { type: "unit", value: 20, unit: "px" }
-    },
-    {
-      property: "borderLeftWidth",
-      value: { type: "unit", value: 5, unit: "px" }
-    },
-    {
-      property: "borderLeftStyle",
-      value: { type: "keyword", value: "solid" }
-    },
-    {
-      property: "borderLeftColor",
-      value: { type: "rgb", r: 226, g: 226, b: 226, alpha: 1 }
-    }
-  ]
-}, i = {
-  category: "text",
-  type: "container",
-  description: "Use to style a quote from an external source like an article or book.",
-  icon: e,
-  states: t,
-  presetStyle: r,
-  order: 3,
-  template: [
-    {
-      type: "instance",
-      component: "Blockquote",
-      children: [
-        {
-          type: "text",
-          value: "Blockquote text you can edit",
-          placeholder: !0
-        }
-      ]
-    }
-  ]
-}, n = {
-  props: p,
-  initialProps: ["id", "className", "cite"]
-};
-export {
-  i as meta,
-  n as propsMeta
-};

package/lib/body.js

@@ -1,7 +0,0 @@
-import { jsx as d } from "react/jsx-runtime";
-import { forwardRef as m } from "react";
-const f = m((o, r) => /* @__PURE__ */ d("body", { ...o, ref: r }));
-f.displayName = "Body";
-export {
-  f as Body
-};

package/lib/body.ws.js

@@ -1,30 +0,0 @@
-import { BodyIcon as o } from "@webstudio-is/icons/svg";
-import { defaultStates as t } from "@webstudio-is/react-sdk";
-import { body as e } from "@webstudio-is/sdk/normalize.css";
-import { props as a } from "./__generated__/body.props.js";
-const r = {
-  body: [
-    ...e,
-    {
-      property: "WebkitFontSmoothing",
-      value: { type: "keyword", value: "antialiased" }
-    },
-    {
-      property: "MozOsxFontSmoothing",
-      value: { type: "keyword", value: "grayscale" }
-    }
-  ]
-}, l = {
-  type: "container",
-  icon: o,
-  states: t,
-  presetStyle: r,
-  detachable: !1
-}, m = {
-  props: a,
-  initialProps: ["id", "className"]
-};
-export {
-  l as meta,
-  m as propsMeta
-};

package/lib/bold.js

@@ -1,7 +0,0 @@
-import { jsx as m } from "react/jsx-runtime";
-import { forwardRef as d } from "react";
-const f = d((o, r) => /* @__PURE__ */ m("b", { ...o, ref: r }));
-f.displayName = "Bold";
-export {
-  f as Bold
-};

package/lib/bold.ws.js

@@ -1,20 +0,0 @@
-import { BoldIcon as t } from "@webstudio-is/icons/svg";
-import { defaultStates as o } from "@webstudio-is/react-sdk";
-import { b as e } from "@webstudio-is/sdk/normalize.css";
-import { props as r } from "./__generated__/bold.props.js";
-const p = {
-  b: e
-}, l = {
-  type: "rich-text-child",
-  label: "Bold Text",
-  icon: t,
-  states: o,
-  presetStyle: p
-}, c = {
-  props: r,
-  initialProps: ["id", "className"]
-};
-export {
-  l as meta,
-  c as propsMeta
-};

package/lib/box.js

@@ -1,9 +0,0 @@
-import { forwardRef as t, createElement as a } from "react";
-const d = "div", f = t(
-  ({ tag: e = d, ...o }, r) => a(e, { ...o, ref: r })
-);
-f.displayName = "Box";
-export {
-  f as Box,
-  d as defaultTag
-};

package/lib/box.ws.js

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

package/lib/button.js

@@ -1,9 +0,0 @@
-import { jsx as f } from "react/jsx-runtime";
-import { forwardRef as i } from "react";
-const n = i(
-  ({ type: t = "submit", children: o, ...r }, m) => /* @__PURE__ */ f("button", { type: t, ...r, ref: m, children: o })
-);
-n.displayName = "Button";
-export {
-  n as Button
-};

package/lib/button.ws.js

@@ -1,44 +0,0 @@
-import { ButtonElementIcon as t } from "@webstudio-is/icons/svg";
-import { defaultStates as e } from "@webstudio-is/react-sdk";
-import { button as o } from "@webstudio-is/sdk/normalize.css";
-import { props as n } from "./__generated__/button.props.js";
-const a = {
-  button: o
-}, c = {
-  category: "forms",
-  type: "container",
-  invalidAncestors: ["Button", "Link"],
-  constraints: {
-    relation: "ancestor",
-    component: { $nin: ["Button", "Link"] }
-  },
-  description: "Use a button to submit forms or trigger actions within a page. Do not use a button to navigate users to another resource or another page - that’s what a link is used for.",
-  icon: t,
-  presetStyle: a,
-  states: [
-    ...e,
-    { selector: ":disabled", label: "Disabled" },
-    { selector: ":enabled", label: "Enabled" }
-  ],
-  order: 2,
-  template: [
-    {
-      type: "instance",
-      component: "Button",
-      children: [
-        {
-          type: "text",
-          value: "Button text you can edit",
-          placeholder: !0
-        }
-      ]
-    }
-  ]
-}, p = {
-  props: n,
-  initialProps: ["id", "className", "type", "aria-label"]
-};
-export {
-  c as meta,
-  p as propsMeta
-};

package/lib/checkbox.js

@@ -1,15 +0,0 @@
-import { jsx as t } from "react/jsx-runtime";
-import { forwardRef as d } from "react";
-const h = d(({ children: i, checked: e, defaultChecked: r, ...o }, c) => /* @__PURE__ */ t(
-  "input",
-  {
-    ...o,
-    defaultChecked: e ?? r,
-    type: "checkbox",
-    ref: c
-  }
-));
-h.displayName = "Checkbox";
-export {
-  h as Checkbox
-};

package/lib/checkbox.ws.js

@@ -1,59 +0,0 @@
-import { CheckboxCheckedIcon as e } from "@webstudio-is/icons/svg";
-import { defaultStates as t } from "@webstudio-is/react-sdk";
-import { checkbox as o } from "@webstudio-is/sdk/normalize.css";
-import { props as n } from "./__generated__/checkbox.props.js";
-const r = {
-  input: [
-    ...o,
-    {
-      property: "marginRight",
-      value: { type: "unit", unit: "em", value: 0.5 }
-    }
-  ]
-}, s = {
-  category: "forms",
-  invalidAncestors: ["Button", "Link"],
-  constraints: {
-    relation: "ancestor",
-    component: { $nin: ["Button", "Link"] }
-  },
-  type: "control",
-  description: "Use within a form to allow your users to toggle between checked and not checked. Group checkboxes by matching their “Name” properties. Unlike radios, any number of checkboxes in a group can be checked.",
-  icon: e,
-  presetStyle: r,
-  order: 6,
-  states: [
-    ...t,
-    { selector: ":checked", label: "Checked" },
-    { selector: ":required", label: "Required" },
-    { selector: ":optional", label: "Optional" },
-    { selector: ":disabled", label: "Disabled" },
-    { selector: ":enabled", label: "Enabled" },
-    { selector: ":read-only", label: "Read Only" },
-    { selector: ":read-write", label: "Read Write" }
-  ],
-  template: [
-    {
-      type: "instance",
-      component: "Label",
-      label: "Checkbox Field",
-      children: [
-        { type: "instance", component: "Checkbox", children: [] },
-        {
-          type: "instance",
-          component: "Text",
-          label: "Checkbox Label",
-          props: [{ type: "string", name: "tag", value: "span" }],
-          children: [{ type: "text", value: "Checkbox", placeholder: !0 }]
-        }
-      ]
-    }
-  ]
-}, p = {
-  props: n,
-  initialProps: ["id", "className", "name", "value", "required", "checked"]
-};
-export {
-  s as meta,
-  p as propsMeta
-};

package/lib/code-text.js

@@ -1,10 +0,0 @@
-import { jsx as r } from "react/jsx-runtime";
-import { forwardRef as i } from "react";
-const d = ({
-  innerRef: e,
-  ...t
-}) => /* @__PURE__ */ r("code", { ...t, style: { padding: 20 }, ref: e, children: 'Open the "Settings" panel to edit the code.' }), l = i(({ code: e, children: t, ...n }, o) => t === void 0 && e === void 0 || String(e).trim().length === 0 ? /* @__PURE__ */ r(d, { innerRef: o, ...n }) : /* @__PURE__ */ r("code", { ...n, ref: o, children: e ?? t }));
-l.displayName = "CodeText";
-export {
-  l as CodeText
-};

package/lib/code-text.ws.js

@@ -1,60 +0,0 @@
-import { CodeTextIcon as e } from "@webstudio-is/icons/svg";
-import { defaultStates as t } from "@webstudio-is/react-sdk";
-import { code as o } from "@webstudio-is/sdk/normalize.css";
-import { props as r } from "./__generated__/code-text.props.js";
-const p = {
-  code: [
-    ...o,
-    {
-      property: "display",
-      value: { type: "keyword", value: "block" }
-    },
-    {
-      property: "whiteSpaceCollapse",
-      value: { type: "keyword", value: "preserve" }
-    },
-    {
-      property: "textWrapMode",
-      value: { type: "keyword", value: "wrap" }
-    },
-    {
-      property: "paddingLeft",
-      value: { type: "unit", value: 0.2, unit: "em" }
-    },
-    {
-      property: "paddingRight",
-      value: { type: "unit", value: 0.2, unit: "em" }
-    },
-    {
-      property: "backgroundColor",
-      value: { type: "rgb", r: 238, g: 238, b: 238, alpha: 1 }
-    }
-  ]
-}, l = {
-  category: "general",
-  type: "embed",
-  description: "Use this component when you want to display code as text on the page.",
-  icon: e,
-  invalidAncestors: ["CodeText"],
-  constraints: {
-    relation: "ancestor",
-    component: { $neq: "CodeText" }
-  },
-  states: t,
-  presetStyle: p,
-  order: 9
-}, s = {
-  props: {
-    ...r,
-    code: {
-      required: !0,
-      control: "codetext",
-      type: "string"
-    }
-  },
-  initialProps: ["id", "className", "lang", "code"]
-};
-export {
-  l as meta,
-  s as propsMeta
-};

package/lib/components.js

@@ -1,79 +0,0 @@
-import { Slot as e } from "./slot.js";
-import { Fragment as m } from "./fragment.js";
-import { HtmlEmbed as x } from "./html-embed.js";
-import { MarkdownEmbed as i } from "./markdown-embed.js";
-import { Body as n } from "./body.js";
-import { Box as d } from "./box.js";
-import { Text as u } from "./text.js";
-import { Heading as S } from "./heading.js";
-import { Paragraph as b } from "./paragraph.js";
-import { Link as k } from "./link.js";
-import { RichTextLink as I } from "./rich-text-link.js";
-import { Span as F } from "./span.js";
-import { Bold as h } from "./bold.js";
-import { Italic as R } from "./italic.js";
-import { Superscript as y } from "./superscript.js";
-import { Subscript as E } from "./subscript.js";
-import { Button as X } from "./button.js";
-import { Input as v } from "./input.js";
-import { Form as N, Form as O } from "./form.js";
-import { Image as z } from "./image.js";
-import { Blockquote as D } from "./blockquote.js";
-import { List as J } from "./list.js";
-import { ListItem as Q } from "./list-item.js";
-import { Separator as W } from "./separator.js";
-import { CodeText as Z } from "./code-text.js";
-import { Label as $ } from "./label.js";
-import { Textarea as ro } from "./textarea.js";
-import { RadioButton as to } from "./radio-button.js";
-import { Checkbox as po } from "./checkbox.js";
-import { Vimeo as fo } from "./vimeo.js";
-import { VimeoPreviewImage as ao } from "./vimeo-preview-image.js";
-import { VimeoPlayButton as lo } from "./vimeo-play-button.js";
-import { VimeoSpinner as uo } from "./vimeo-spinner.js";
-import { XmlNode as So } from "./xml-node.js";
-import { XmlTime as bo } from "./xml-time.js";
-import { Time as ko } from "./time.js";
-import { Select as Io } from "./select.js";
-import { Option as Fo } from "./option.js";
-export {
-  D as Blockquote,
-  n as Body,
-  h as Bold,
-  d as Box,
-  X as Button,
-  po as Checkbox,
-  Z as CodeText,
-  N as Form,
-  m as Fragment,
-  S as Heading,
-  x as HtmlEmbed,
-  z as Image,
-  v as Input,
-  R as Italic,
-  $ as Label,
-  k as Link,
-  J as List,
-  Q as ListItem,
-  i as MarkdownEmbed,
-  Fo as Option,
-  b as Paragraph,
-  to as RadioButton,
-  O as RemixForm,
-  I as RichTextLink,
-  Io as Select,
-  W as Separator,
-  e as Slot,
-  F as Span,
-  E as Subscript,
-  y as Superscript,
-  u as Text,
-  ro as Textarea,
-  ko as Time,
-  fo as Vimeo,
-  lo as VimeoPlayButton,
-  ao as VimeoPreviewImage,
-  uo as VimeoSpinner,
-  So as XmlNode,
-  bo as XmlTime
-};

package/lib/content-embed.ws.js

@@ -1,77 +0,0 @@
-import { ContentEmbedIcon as n } from "@webstudio-is/icons/svg";
-import { imagePlaceholderDataUrl as l } from "@webstudio-is/image";
-import { descendantComponent as a } from "@webstudio-is/react-sdk";
-const i = `
-<h1>Styling HTML with Content Embed</h1>
-<p>Content Embed allows styling of HTML, which primarily comes from external data.</p>
-<h2>How to Use Content Embed</h2>
-<ul>
-  <li>Every element is shown in the Navigator.</li>
-  <li>Apply styles and Tokens to each element.</li>
-  <li>Adjustments to elements apply universally within this embed, ensuring consistency across your content.</li>
-</ul>
-<hr>
-<h2>This sample text contains all the elements that can be styled.</h2>
-<p>Any elements that were not used above are used below.</p>
-<h3>Heading 3</h3>
-<h4>Heading 4</h4>
-<h5>Heading 5</h5>
-<h6>Heading 6</h6>
-<p><a href="#">Links</a> connect your content to relevant resources.</p>
-<p><strong>Bold text</strong> makes your important points stand out.</p>
-<p><em>Italic text</em> is great for emphasizing terms.</p>
-<ol>
-  <li>First Step</li>
-  <li>Second Step</li>
-</ol>
-<img src="${l}">
-<blockquote>Capture attention with a powerful quote.</blockquote>
-<p>Using <code>console.log("Hello World");</code> will log to the console.</p>
-`.trim(), e = (t, o) => ({
-  type: "instance",
-  component: a,
-  label: t,
-  props: [{ type: "string", name: "selector", value: ` ${o}` }],
-  children: []
-}), p = {
-  category: "data",
-  type: "control",
-  description: "Content Embed allows styling of HTML, which can be provided via the Code property statically or loaded dynamically from any Resource, for example, from a CMS.",
-  icon: n,
-  order: 3,
-  template: [
-    {
-      type: "instance",
-      component: "HtmlEmbed",
-      label: "Content Embed",
-      props: [
-        {
-          name: "code",
-          type: "string",
-          value: i
-        }
-      ],
-      children: [
-        e("Paragraph", "p"),
-        e("Heading 1", "h1"),
-        e("Heading 2", "h2"),
-        e("Heading 3", "h3"),
-        e("Heading 4", "h4"),
-        e("Heading 5", "h5"),
-        e("Heading 6", "h6"),
-        e("Bold", ":where(strong, b)"),
-        e("Italic", ":where(em, i)"),
-        e("Link", "a"),
-        e("Image", "img"),
-        e("Blockquote", "blockquote"),
-        e("Code Text", "code"),
-        e("List", ":where(ul, ol)"),
-        e("List Item", "li"),
-        e("Separator", "hr")
-      ]
-    }
-  ]
-};
-export {
-  p as meta
-};

package/lib/form.js

@@ -1,7 +0,0 @@
-import { jsx as f } from "react/jsx-runtime";
-import { forwardRef as p } from "react";
-const t = p(({ children: o, ...r }, m) => /* @__PURE__ */ f("form", { ...r, ref: m, children: o }));
-t.displayName = "Form";
-export {
-  t as Form
-};

package/lib/form.ws.js

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

package/lib/fragment.js

@@ -1,7 +0,0 @@
-import { jsx as e } from "react/jsx-runtime";
-import { forwardRef as o } from "react";
-const m = o((r, t) => /* @__PURE__ */ e("div", { ...r, ref: t, style: { display: "contents" } }));
-m.displayName = "Fragment";
-export {
-  m as Fragment
-};

package/lib/fragment.ws.js

@@ -1,11 +0,0 @@
-const t = {
-  type: "container",
-  icon: "",
-  stylable: !1
-}, e = {
-  props: {}
-};
-export {
-  t as meta,
-  e as propsMeta
-};

package/lib/heading.js

@@ -1,9 +0,0 @@
-import { jsx as e } from "react/jsx-runtime";
-import { forwardRef as n } from "react";
-const d = "h1", f = n(
-  ({ tag: a = d, children: o, ...r }, t) => /* @__PURE__ */ e(a, { ...r, ref: t, children: o })
-);
-f.displayName = "Heading";
-export {
-  f as Heading
-};

package/lib/heading.ws.js

@@ -1,45 +0,0 @@
-import { HeadingIcon as e } from "@webstudio-is/icons/svg";
-import { defaultStates as t } from "@webstudio-is/react-sdk";
-import { h1 as n, h2 as o, h3 as a, h4 as r, h5 as i, h6 as s } from "@webstudio-is/sdk/normalize.css";
-import { props as c } from "./__generated__/heading.props.js";
-const p = {
-  h1: n,
-  h2: o,
-  h3: a,
-  h4: r,
-  h5: i,
-  h6: s
-}, m = {
-  category: "text",
-  type: "container",
-  description: "Use HTML headings to structure and organize content. Use the Tag property in settings to change the heading level (h1-h6).",
-  icon: e,
-  invalidAncestors: ["Heading"],
-  constraints: {
-    relation: "ancestor",
-    component: { $neq: "Heading" }
-  },
-  states: t,
-  presetStyle: p,
-  order: 1,
-  template: [
-    {
-      type: "instance",
-      component: "Heading",
-      children: [
-        {
-          type: "text",
-          value: "Heading text you can edit",
-          placeholder: !0
-        }
-      ]
-    }
-  ]
-}, y = {
-  props: c,
-  initialProps: ["id", "className", "tag"]
-};
-export {
-  m as meta,
-  y as propsMeta
-};