@webstudio-is/sdk-components-react 0.174.0 → 0.175.0

package/lib/components.js

@@ -32,7 +32,7 @@ import {
   useMemo
 } from "react";
 import { mergeRefs } from "@react-aria/utils";
-import { ReactSdkContext } from "@webstudio-is/react-sdk";
+import { ReactSdkContext } from "@webstudio-is/react-sdk/runtime";
 
 // src/html-embed-patchers.ts
 var isDOMContentLoaded = () => {
@@ -253,19 +253,33 @@ var HtmlEmbed = forwardRef3(
 );
 HtmlEmbed.displayName = "HtmlEmbed";
 
-// src/body.tsx
-import { forwardRef as forwardRef4 } from "react";
+// src/markdown-embed.tsx
+import { micromark } from "micromark";
+import { forwardRef as forwardRef4, useMemo as useMemo2 } from "react";
 import { jsx as jsx4 } from "react/jsx-runtime";
-var Body = forwardRef4((props, ref) => /* @__PURE__ */ jsx4("body", { ...props, ref }));
+var MarkdownEmbed = /* @__PURE__ */ forwardRef4((props, ref) => {
+  const { code, children, ...rest } = props;
+  const html = useMemo2(
+    // support data uri protocol in images
+    () => micromark(code ?? "", { allowDangerousProtocol: true }),
+    [code]
+  );
+  return /* @__PURE__ */ jsx4("div", { ...rest, ref, dangerouslySetInnerHTML: { __html: html } });
+});
+
+// src/body.tsx
+import { forwardRef as forwardRef5 } from "react";
+import { jsx as jsx5 } from "react/jsx-runtime";
+var Body = forwardRef5((props, ref) => /* @__PURE__ */ jsx5("body", { ...props, ref }));
 Body.displayName = "Body";
 
 // src/box.tsx
 import {
   createElement,
-  forwardRef as forwardRef5
+  forwardRef as forwardRef6
 } from "react";
 var defaultTag = "div";
-var Box = forwardRef5(
+var Box = forwardRef6(
   ({ tag = defaultTag, ...props }, ref) => {
     return createElement(tag, { ...props, ref });
   }
@@ -273,116 +287,121 @@ var Box = forwardRef5(
 Box.displayName = "Box";
 
 // src/text.tsx
-import { forwardRef as forwardRef6 } from "react";
-import { jsx as jsx5 } from "react/jsx-runtime";
+import { forwardRef as forwardRef7 } from "react";
+import { jsx as jsx6 } from "react/jsx-runtime";
 var defaultTag2 = "div";
-var Text = forwardRef6(
+var Text = forwardRef7(
   ({ tag = defaultTag2, children, ...props }, ref) => {
     const Tag = tag;
-    return /* @__PURE__ */ jsx5(Tag, { ...props, ref, children });
+    return /* @__PURE__ */ jsx6(Tag, { ...props, ref, children });
   }
 );
 Text.displayName = "Text";
 
 // src/heading.tsx
-import { forwardRef as forwardRef7 } from "react";
-import { jsx as jsx6 } from "react/jsx-runtime";
+import { forwardRef as forwardRef8 } from "react";
+import { jsx as jsx7 } from "react/jsx-runtime";
 var defaultTag3 = "h1";
-var Heading = forwardRef7(
+var Heading = forwardRef8(
   ({ tag = defaultTag3, children, ...props }, ref) => {
     const Tag = tag;
-    return /* @__PURE__ */ jsx6(Tag, { ...props, ref, children });
+    return /* @__PURE__ */ jsx7(Tag, { ...props, ref, children });
   }
 );
 Heading.displayName = "Heading";
 
 // src/paragraph.tsx
-import { forwardRef as forwardRef8 } from "react";
-import { jsx as jsx7 } from "react/jsx-runtime";
-var Paragraph = forwardRef8(({ children, ...props }, ref) => /* @__PURE__ */ jsx7("p", { ...props, ref, children }));
+import { forwardRef as forwardRef9 } from "react";
+import { jsx as jsx8 } from "react/jsx-runtime";
+var Paragraph = forwardRef9(({ children, ...props }, ref) => /* @__PURE__ */ jsx8("p", { ...props, ref, children }));
 Paragraph.displayName = "Paragraph";
 
 // src/link.tsx
-import { forwardRef as forwardRef9 } from "react";
-import { jsx as jsx8 } from "react/jsx-runtime";
-var Link = forwardRef9(
-  ({ children, ...props }, ref) => {
-    return /* @__PURE__ */ jsx8("a", { ...props, href: props.href ?? "#", ref, children });
-  }
-);
+import { forwardRef as forwardRef10 } from "react";
+import { jsx as jsx9 } from "react/jsx-runtime";
+var Link = forwardRef10((props, ref) => {
+  const {
+    children,
+    // @todo: it's a hack made for Image component for the builder and should't be in the runtime at all.
+    $webstudio$canvasOnly$assetId,
+    ...rest
+  } = props;
+  return /* @__PURE__ */ jsx9("a", { ...rest, href: rest.href ?? "#", ref, children });
+});
 Link.displayName = "Link";
 
 // src/rich-text-link.tsx
-import { forwardRef as forwardRef10 } from "react";
-import { jsx as jsx9 } from "react/jsx-runtime";
-var RichTextLink = forwardRef10((props, ref) => /* @__PURE__ */ jsx9(Link, { ...props, ref }));
+import { forwardRef as forwardRef11 } from "react";
+import { jsx as jsx10 } from "react/jsx-runtime";
+var RichTextLink = forwardRef11((props, ref) => /* @__PURE__ */ jsx10(Link, { ...props, ref }));
 RichTextLink.displayName = "RichTextLink";
 
 // src/span.tsx
-import { forwardRef as forwardRef11 } from "react";
-import { jsx as jsx10 } from "react/jsx-runtime";
-var Span = forwardRef11((props, ref) => /* @__PURE__ */ jsx10("span", { ...props, ref }));
+import { forwardRef as forwardRef12 } from "react";
+import { jsx as jsx11 } from "react/jsx-runtime";
+var Span = forwardRef12((props, ref) => /* @__PURE__ */ jsx11("span", { ...props, ref }));
 Span.displayName = "Span";
 
 // src/bold.tsx
-import { forwardRef as forwardRef12 } from "react";
-import { jsx as jsx11 } from "react/jsx-runtime";
-var Bold = forwardRef12((props, ref) => /* @__PURE__ */ jsx11("b", { ...props, ref }));
+import { forwardRef as forwardRef13 } from "react";
+import { jsx as jsx12 } from "react/jsx-runtime";
+var Bold = forwardRef13((props, ref) => /* @__PURE__ */ jsx12("b", { ...props, ref }));
 Bold.displayName = "Bold";
 
 // src/italic.tsx
-import { forwardRef as forwardRef13 } from "react";
-import { jsx as jsx12 } from "react/jsx-runtime";
-var Italic = forwardRef13((props, ref) => /* @__PURE__ */ jsx12("i", { ...props, ref }));
+import { forwardRef as forwardRef14 } from "react";
+import { jsx as jsx13 } from "react/jsx-runtime";
+var Italic = forwardRef14((props, ref) => /* @__PURE__ */ jsx13("i", { ...props, ref }));
 Italic.displayName = "Italic";
 
 // src/superscript.tsx
-import { forwardRef as forwardRef14 } from "react";
-import { jsx as jsx13 } from "react/jsx-runtime";
-var Superscript = forwardRef14((props, ref) => /* @__PURE__ */ jsx13("sup", { ...props, ref }));
+import { forwardRef as forwardRef15 } from "react";
+import { jsx as jsx14 } from "react/jsx-runtime";
+var Superscript = forwardRef15((props, ref) => /* @__PURE__ */ jsx14("sup", { ...props, ref }));
 Superscript.displayName = "Bold";
 
 // src/subscript.tsx
-import { forwardRef as forwardRef15 } from "react";
-import { jsx as jsx14 } from "react/jsx-runtime";
-var Subscript = forwardRef15((props, ref) => /* @__PURE__ */ jsx14("sub", { ...props, ref }));
+import { forwardRef as forwardRef16 } from "react";
+import { jsx as jsx15 } from "react/jsx-runtime";
+var Subscript = forwardRef16((props, ref) => /* @__PURE__ */ jsx15("sub", { ...props, ref }));
 Subscript.displayName = "Subscript";
 
 // src/button.tsx
-import { forwardRef as forwardRef16 } from "react";
-import { jsx as jsx15 } from "react/jsx-runtime";
-var Button = forwardRef16(
-  ({ type = "submit", children, ...props }, ref) => /* @__PURE__ */ jsx15("button", { type, ...props, ref, children })
+import { forwardRef as forwardRef17 } from "react";
+import { jsx as jsx16 } from "react/jsx-runtime";
+var Button = forwardRef17(
+  ({ type = "submit", children, ...props }, ref) => /* @__PURE__ */ jsx16("button", { type, ...props, ref, children })
 );
 Button.displayName = "Button";
 
 // src/input.tsx
-import { forwardRef as forwardRef17 } from "react";
-import { jsx as jsx16 } from "react/jsx-runtime";
-var Input = forwardRef17(({ children: _children, type = "text", ...props }, ref) => /* @__PURE__ */ jsx16("input", { ...props, type, ref }));
+import { forwardRef as forwardRef18 } from "react";
+import { jsx as jsx17 } from "react/jsx-runtime";
+var Input = forwardRef18(({ children: _children, type = "text", ...props }, ref) => /* @__PURE__ */ jsx17("input", { ...props, type, ref }));
 Input.displayName = "Input";
 
 // src/form.tsx
-import { forwardRef as forwardRef18 } from "react";
-import { jsx as jsx17 } from "react/jsx-runtime";
-var Form = forwardRef18(({ children, ...props }, ref) => /* @__PURE__ */ jsx17("form", { ...props, ref, children }));
+import { forwardRef as forwardRef19 } from "react";
+import { jsx as jsx18 } from "react/jsx-runtime";
+var Form = forwardRef19(({ children, ...props }, ref) => /* @__PURE__ */ jsx18("form", { ...props, ref, children }));
 Form.displayName = "Form";
 
 // src/image.tsx
 import {
-  forwardRef as forwardRef19,
+  forwardRef as forwardRef20,
   useContext as useContext2
 } from "react";
 import { Image as WebstudioImage } from "@webstudio-is/image";
-import { ReactSdkContext as ReactSdkContext2 } from "@webstudio-is/react-sdk";
-import { jsx as jsx18 } from "react/jsx-runtime";
-var Image = forwardRef19(
+import { ReactSdkContext as ReactSdkContext2 } from "@webstudio-is/react-sdk/runtime";
+import { jsx as jsx19 } from "react/jsx-runtime";
+var Image = forwardRef20(
   ({
     loading = "lazy",
     width,
     height,
     optimize = true,
     decoding: decodingProp,
+    // @todo: it's a hack made for the builder and should't be in the runtime at all.
     $webstudio$canvasOnly$assetId,
     ...props
   }, ref) => {
@@ -404,15 +423,7 @@ var Image = forwardRef19(
     if (src.startsWith(assetBaseUrl)) {
       assetName = src.slice(assetBaseUrl.length);
     }
-    console.info(
-      "assetName",
-      assetName,
-      "src",
-      src,
-      "assetBaseUrl",
-      assetBaseUrl
-    );
-    return /* @__PURE__ */ jsx18(
+    return /* @__PURE__ */ jsx19(
       WebstudioImage,
       {
         loading,
@@ -432,45 +443,45 @@ var Image = forwardRef19(
 Image.displayName = "Image";
 
 // src/blockquote.tsx
-import { forwardRef as forwardRef20 } from "react";
-import { jsx as jsx19 } from "react/jsx-runtime";
-var Blockquote = forwardRef20(
+import { forwardRef as forwardRef21 } from "react";
+import { jsx as jsx20 } from "react/jsx-runtime";
+var Blockquote = forwardRef21(
   ({ children, ...props }, ref) => {
-    return /* @__PURE__ */ jsx19("blockquote", { ...props, ref, children });
+    return /* @__PURE__ */ jsx20("blockquote", { ...props, ref, children });
   }
 );
 Blockquote.displayName = "Blockquote";
 
 // src/list.tsx
 import {
-  forwardRef as forwardRef21,
+  forwardRef as forwardRef22,
   createElement as createElement2
 } from "react";
 var unorderedTag = "ul";
 var orderedTag = "ol";
-var List = forwardRef21(({ ordered = false, ...props }, ref) => {
+var List = forwardRef22(({ ordered = false, ...props }, ref) => {
   const tag = ordered ? orderedTag : unorderedTag;
   return createElement2(tag, { ...props, ref });
 });
 List.displayName = "List";
 
 // src/list-item.tsx
-import { forwardRef as forwardRef22 } from "react";
-import { jsx as jsx20 } from "react/jsx-runtime";
-var ListItem = forwardRef22(
+import { forwardRef as forwardRef23 } from "react";
+import { jsx as jsx21 } from "react/jsx-runtime";
+var ListItem = forwardRef23(
   ({ children, ...props }, ref) => {
-    return /* @__PURE__ */ jsx20("li", { ...props, ref, children });
+    return /* @__PURE__ */ jsx21("li", { ...props, ref, children });
   }
 );
 ListItem.displayName = "ListItem";
 
 // src/separator.tsx
 import {
-  forwardRef as forwardRef23,
+  forwardRef as forwardRef24,
   createElement as createElement3
 } from "react";
 var defaultTag4 = "hr";
-var Separator = forwardRef23(
+var Separator = forwardRef24(
   (props, ref) => {
     return createElement3(defaultTag4, { ...props, ref });
   }
@@ -479,60 +490,60 @@ Separator.displayName = "Separator";
 
 // src/code-text.tsx
 import {
-  forwardRef as forwardRef24
+  forwardRef as forwardRef25
 } from "react";
-import { jsx as jsx21 } from "react/jsx-runtime";
+import { jsx as jsx22 } from "react/jsx-runtime";
 var Placeholder2 = ({
   innerRef,
   ...rest
 }) => {
-  return /* @__PURE__ */ jsx21("code", { ...rest, style: { padding: 20 }, ref: innerRef, children: `Open the "Settings" panel to edit the code.` });
+  return /* @__PURE__ */ jsx22("code", { ...rest, style: { padding: 20 }, ref: innerRef, children: `Open the "Settings" panel to edit the code.` });
 };
-var CodeText = forwardRef24(({ code, children, ...props }, ref) => {
+var CodeText = forwardRef25(({ code, children, ...props }, ref) => {
   if (children === void 0 && code === void 0 || String(code).trim().length === 0) {
-    return /* @__PURE__ */ jsx21(Placeholder2, { innerRef: ref, ...props });
+    return /* @__PURE__ */ jsx22(Placeholder2, { innerRef: ref, ...props });
   }
-  return /* @__PURE__ */ jsx21("code", { ...props, ref, children: code ?? children });
+  return /* @__PURE__ */ jsx22("code", { ...props, ref, children: code ?? children });
 });
 CodeText.displayName = "CodeText";
 
 // src/label.tsx
-import { forwardRef as forwardRef25 } from "react";
-import { jsx as jsx22 } from "react/jsx-runtime";
-var Label = forwardRef25((props, ref) => /* @__PURE__ */ jsx22("label", { ...props, ref }));
+import { forwardRef as forwardRef26 } from "react";
+import { jsx as jsx23 } from "react/jsx-runtime";
+var Label = forwardRef26((props, ref) => /* @__PURE__ */ jsx23("label", { ...props, ref }));
 Label.displayName = "Label";
 
 // src/textarea.tsx
-import { forwardRef as forwardRef26 } from "react";
-import { jsx as jsx23 } from "react/jsx-runtime";
-var Textarea = forwardRef26(({ children: _children, ...props }, ref) => /* @__PURE__ */ jsx23("textarea", { ...props, ref }));
+import { forwardRef as forwardRef27 } from "react";
+import { jsx as jsx24 } from "react/jsx-runtime";
+var Textarea = forwardRef27(({ children: _children, ...props }, ref) => /* @__PURE__ */ jsx24("textarea", { ...props, ref }));
 Textarea.displayName = "Textarea";
 
 // src/radio-button.tsx
-import { forwardRef as forwardRef27 } from "react";
-import { jsx as jsx24 } from "react/jsx-runtime";
-var RadioButton = forwardRef27(({ children: _children, ...props }, ref) => /* @__PURE__ */ jsx24("input", { ...props, type: "radio", ref }));
+import { forwardRef as forwardRef28 } from "react";
+import { jsx as jsx25 } from "react/jsx-runtime";
+var RadioButton = forwardRef28(({ children: _children, ...props }, ref) => /* @__PURE__ */ jsx25("input", { ...props, type: "radio", ref }));
 RadioButton.displayName = "RadioButton";
 
 // src/checkbox.tsx
-import { forwardRef as forwardRef28 } from "react";
-import { jsx as jsx25 } from "react/jsx-runtime";
-var Checkbox = forwardRef28(({ children: _children, ...props }, ref) => {
-  return /* @__PURE__ */ jsx25("input", { ...props, type: "checkbox", ref });
+import { forwardRef as forwardRef29 } from "react";
+import { jsx as jsx26 } from "react/jsx-runtime";
+var Checkbox = forwardRef29(({ children: _children, ...props }, ref) => {
+  return /* @__PURE__ */ jsx26("input", { ...props, type: "checkbox", ref });
 });
 Checkbox.displayName = "Checkbox";
 
 // src/vimeo.tsx
 import { colord } from "colord";
 import {
-  forwardRef as forwardRef29,
+  forwardRef as forwardRef30,
   useState as useState2,
   useEffect as useEffect2,
   useContext as useContext3,
   createContext
 } from "react";
-import { ReactSdkContext as ReactSdkContext3 } from "@webstudio-is/react-sdk";
-import { Fragment as Fragment2, jsx as jsx26, jsxs } from "react/jsx-runtime";
+import { ReactSdkContext as ReactSdkContext3 } from "@webstudio-is/react-sdk/runtime";
+import { Fragment as Fragment2, jsx as jsx27, jsxs } from "react/jsx-runtime";
 var getVideoUrl = (options) => {
   if (options.url === void 0) {
     return;
@@ -628,7 +639,7 @@ var loadPreviewImageUrl = async (videoUrl) => {
   return imageUrl;
 };
 var EmptyState = () => {
-  return /* @__PURE__ */ jsx26(
+  return /* @__PURE__ */ jsx27(
     "div",
     {
       style: {
@@ -682,7 +693,7 @@ var Player = ({
   if (renderer === "canvas" || status === "initial") {
     return;
   }
-  return /* @__PURE__ */ jsx26(
+  return /* @__PURE__ */ jsx27(
     "iframe",
     {
       src: videoUrl,
@@ -705,12 +716,11 @@ var Player = ({
   );
 };
 var VimeoContext = createContext({
-  // eslint-disable-next-line @typescript-eslint/no-empty-function
   onInitPlayer: () => {
   },
   status: "initial"
 });
-var Vimeo = forwardRef29(
+var Vimeo = forwardRef30(
   ({
     url,
     loading = "lazy",
@@ -765,7 +775,7 @@ var Vimeo = forwardRef29(
       showPortrait,
       autopip
     });
-    return /* @__PURE__ */ jsx26(
+    return /* @__PURE__ */ jsx27(
       VimeoContext.Provider,
       {
         value: {
@@ -777,7 +787,7 @@ var Vimeo = forwardRef29(
             }
           }
         },
-        children: /* @__PURE__ */ jsx26(
+        children: /* @__PURE__ */ jsx27(
           "div",
           {
             ...rest,
@@ -786,9 +796,9 @@ var Vimeo = forwardRef29(
                 typeof ref === "function" ? ref(value) : ref.current = value;
               }
             },
-            children: videoUrl === void 0 ? /* @__PURE__ */ jsx26(EmptyState, {}) : /* @__PURE__ */ jsxs(Fragment2, { children: [
+            children: videoUrl === void 0 ? /* @__PURE__ */ jsx27(EmptyState, {}) : /* @__PURE__ */ jsxs(Fragment2, { children: [
               children,
-              /* @__PURE__ */ jsx26(
+              /* @__PURE__ */ jsx27(
                 Player,
                 {
                   autoplay,
@@ -813,14 +823,14 @@ Vimeo.displayName = "Vimeo";
 
 // src/vimeo-preview-image.tsx
 import {
-  forwardRef as forwardRef30,
+  forwardRef as forwardRef31,
   useContext as useContext4
 } from "react";
-import { jsx as jsx27 } from "react/jsx-runtime";
+import { jsx as jsx28 } from "react/jsx-runtime";
 var base64Preview = `data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAQAAAC1HAwCAAAAC0lEQVR42mNkOAMAANIAzr59FiYAAAAASUVORK5CYII=`;
-var VimeoPreviewImage = forwardRef30(({ src, ...rest }, ref) => {
+var VimeoPreviewImage = forwardRef31(({ src, ...rest }, ref) => {
   const vimeoContext = useContext4(VimeoContext);
-  return /* @__PURE__ */ jsx27(
+  return /* @__PURE__ */ jsx28(
     Image,
     {
       ...rest,
@@ -833,50 +843,48 @@ VimeoPreviewImage.displayName = "VimeoPreviewImage";
 
 // src/vimeo-play-button.tsx
 import {
-  forwardRef as forwardRef31,
+  forwardRef as forwardRef32,
   useContext as useContext5
 } from "react";
-import { jsx as jsx28 } from "react/jsx-runtime";
-var VimeoPlayButton = forwardRef31(
+import { jsx as jsx29 } from "react/jsx-runtime";
+var VimeoPlayButton = forwardRef32(
   (props, ref) => {
     const vimeoContext = useContext5(VimeoContext);
     if (vimeoContext.status !== "initial") {
       return;
     }
-    return /* @__PURE__ */ jsx28(Button, { ...props, onClick: vimeoContext.onInitPlayer, ref });
+    return /* @__PURE__ */ jsx29(Button, { ...props, onClick: vimeoContext.onInitPlayer, ref });
   }
 );
 VimeoPlayButton.displayName = "VimeoPlayButton";
 
 // src/vimeo-spinner.tsx
 import {
-  forwardRef as forwardRef32,
+  forwardRef as forwardRef33,
   useContext as useContext6
 } from "react";
-import { jsx as jsx29 } from "react/jsx-runtime";
-var VimeoSpinner = forwardRef32(
+import { jsx as jsx30 } from "react/jsx-runtime";
+var VimeoSpinner = forwardRef33(
   (props, ref) => {
     const vimeoContext = useContext6(VimeoContext);
     if (vimeoContext.status !== "loading") {
       return;
     }
-    return /* @__PURE__ */ jsx29("div", { ...props, ref });
+    return /* @__PURE__ */ jsx30("div", { ...props, ref });
   }
 );
 VimeoSpinner.displayName = "VimeoSpinner";
 
 // src/xml-node.tsx
-import {
-  ReactSdkContext as ReactSdkContext4
-} from "@webstudio-is/react-sdk";
+import { ReactSdkContext as ReactSdkContext4 } from "@webstudio-is/react-sdk/runtime";
 import {
   Children,
   createElement as createElement4,
-  forwardRef as forwardRef33,
+  forwardRef as forwardRef34,
   useContext as useContext7
 } from "react";
-import { jsx as jsx30, jsxs as jsxs2 } from "react/jsx-runtime";
-var XmlNode = forwardRef33(
+import { jsx as jsx31, jsxs as jsxs2 } from "react/jsx-runtime";
+var XmlNode = forwardRef34(
   ({ tag = "", children, ...props }, ref) => {
     const { renderer } = useContext7(ReactSdkContext4);
     const attributeEntries = Object.entries(props).filter(
@@ -899,7 +907,7 @@ var XmlNode = forwardRef33(
         [elementName, ...attributes].join(" "),
         ">"
       ] }),
-      /* @__PURE__ */ jsx30("div", { ref, style: { marginLeft: isTextChild ? 0 : "1rem" }, children }),
+      /* @__PURE__ */ jsx31("div", { ref, style: { marginLeft: isTextChild ? 0 : "1rem" }, children }),
       /* @__PURE__ */ jsxs2("div", { style: { color: "rgb(16, 23, 233)" }, children: [
         "</",
         elementName,
@@ -911,8 +919,8 @@ var XmlNode = forwardRef33(
 XmlNode.displayName = "XmlNode";
 
 // src/time.tsx
-import * as React from "react";
-import { jsx as jsx31 } from "react/jsx-runtime";
+import { forwardRef as forwardRef35 } from "react";
+import { jsx as jsx32 } from "react/jsx-runtime";
 var languages = [
   "af",
   "am",
@@ -1211,7 +1219,26 @@ var timeStyleOrUndefined = (value) => {
   }
   return void 0;
 };
-var Time = React.forwardRef(
+var parseDate = (datetimeString) => {
+  if (datetimeString === "") {
+    return;
+  }
+  let date = new Date(datetimeString);
+  if (Number.isNaN(date.getTime()) === false) {
+    return date;
+  }
+  if (/^\d+$/.test(datetimeString)) {
+    let timestamp = Number(datetimeString);
+    if (datetimeString.length === 10) {
+      timestamp *= 1e3;
+    }
+    date = new Date(timestamp);
+  }
+  if (Number.isNaN(date.getTime()) === false) {
+    return date;
+  }
+};
+var Time = forwardRef35(
   ({
     language = DEFAULT_LANGUAGE,
     country = DEFAULT_COUNTRY,
@@ -1228,16 +1255,15 @@ var Time = React.forwardRef(
       timeStyle: timeStyleOrUndefined(timeStyle)
     };
     const datetimeString = datetime === null ? INVALID_DATE_STRING : datetime.toString();
-    const date = new Date(datetimeString);
-    const isValidDate = false === Number.isNaN(date.getTime());
+    const date = parseDate(datetimeString);
     let formattedDate = datetimeString;
-    if (isValidDate) {
+    if (date) {
       try {
         formattedDate = new Intl.DateTimeFormat(locale, options).format(date);
       } catch {
       }
     }
-    return /* @__PURE__ */ jsx31("time", { ref, dateTime: datetimeString, ...props, children: formattedDate });
+    return /* @__PURE__ */ jsx32("time", { ref, dateTime: datetimeString, ...props, children: formattedDate });
   }
 );
 
@@ -1245,16 +1271,16 @@ var Time = React.forwardRef(
 import {
   getClosestInstance,
   getInstanceSelectorById
-} from "@webstudio-is/react-sdk";
-import { forwardRef as forwardRef35 } from "react";
-import { jsx as jsx32 } from "react/jsx-runtime";
-var Select = forwardRef35((props, ref) => /* @__PURE__ */ jsx32("select", { ...props, ref }));
+} from "@webstudio-is/react-sdk/runtime";
+import { forwardRef as forwardRef36 } from "react";
+import { jsx as jsx33 } from "react/jsx-runtime";
+var Select = forwardRef36((props, ref) => /* @__PURE__ */ jsx33("select", { ...props, ref }));
 Select.displayName = "Select";
 
 // src/option.tsx
-import { forwardRef as forwardRef36 } from "react";
-import { jsx as jsx33 } from "react/jsx-runtime";
-var Option = forwardRef36((props, ref) => /* @__PURE__ */ jsx33("option", { ...props, ref }));
+import { forwardRef as forwardRef37 } from "react";
+import { jsx as jsx34 } from "react/jsx-runtime";
+var Option = forwardRef37((props, ref) => /* @__PURE__ */ jsx34("option", { ...props, ref }));
 Option.displayName = "Option";
 export {
   Blockquote,
@@ -1275,9 +1301,11 @@ export {
   Link,
   List,
   ListItem,
+  MarkdownEmbed,
   Option,
   Paragraph,
   RadioButton,
+  Form as RemixForm,
   RichTextLink,
   Select,
   Separator,