@webstudio-is/react-sdk 0.48.0 → 0.50.0

package/lib/cjs/components/input.ws.cjs

@@ -25,6 +25,7 @@ module.exports = __toCommonJS(input_ws_exports);
 var import_icons = require("@webstudio-is/icons");
 var import_input = require("./__generated__/input.props");
 const meta = {
+  category: "forms",
   type: "control",
   label: "Input",
   Icon: import_icons.InputIcon

package/lib/cjs/components/italic.cjs

@@ -24,8 +24,5 @@ module.exports = __toCommonJS(italic_exports);
 var import_jsx_runtime = require("react/jsx-runtime");
 var import_react = require("react");
 const defaultTag = "i";
-const Italic = (0, import_react.forwardRef)((props, ref) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)("i", {
-  ...props,
-  ref
-}));
+const Italic = (0, import_react.forwardRef)((props, ref) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)("i", { ...props, ref }));
 Italic.displayName = "Italic";

package/lib/cjs/components/link-block.cjs

@@ -24,8 +24,5 @@ module.exports = __toCommonJS(link_block_exports);
 var import_jsx_runtime = require("react/jsx-runtime");
 var import_react = require("react");
 var import_link = require("./link");
-const LinkBlock = (0, import_react.forwardRef)((props, ref) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_link.Link, {
-  ...props,
-  ref
-}));
+const LinkBlock = (0, import_react.forwardRef)((props, ref) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_link.Link, { ...props, ref }));
 LinkBlock.displayName = "LinkBlock";

package/lib/cjs/components/link-block.ws.cjs

@@ -35,6 +35,7 @@ const presetStyle = {
   }
 };
 const meta = {
+  category: "general",
   type: "container",
   label: "Link Block",
   Icon: import_icons.BoxLinkIcon,

package/lib/cjs/components/link.cjs

@@ -25,11 +25,7 @@ var import_jsx_runtime = require("react/jsx-runtime");
 var import_react = require("react");
 const Link = (0, import_react.forwardRef)(
   ({ href = "", ...props }, ref) => {
-    return /* @__PURE__ */ (0, import_jsx_runtime.jsx)("a", {
-      ...props,
-      href,
-      ref
-    });
+    return /* @__PURE__ */ (0, import_jsx_runtime.jsx)("a", { ...props, href, ref });
   }
 );
 Link.displayName = "Link";

package/lib/cjs/components/link.ws.cjs

@@ -36,6 +36,7 @@ const presetStyle = {
   }
 };
 const meta = {
+  category: "general",
   type: "rich-text",
   label: "Link Text",
   Icon: import_icons.Link2Icon,

package/lib/cjs/components/list-item.ws.cjs

@@ -25,6 +25,7 @@ module.exports = __toCommonJS(list_item_ws_exports);
 var import_icons = require("@webstudio-is/icons");
 var import_list_item = require("./__generated__/list-item.props");
 const meta = {
+  category: "typography",
   type: "rich-text",
   label: "List Item",
   Icon: import_icons.ListItemIcon,

package/lib/cjs/components/list.ws.cjs

@@ -39,6 +39,7 @@ const presetStyle = {
   }
 };
 const meta = {
+  category: "typography",
   type: "container",
   label: "List",
   Icon: import_icons.ListIcon,

package/lib/cjs/components/paragraph.cjs

@@ -24,8 +24,5 @@ module.exports = __toCommonJS(paragraph_exports);
 var import_jsx_runtime = require("react/jsx-runtime");
 var import_react = require("react");
 const defaultTag = "p";
-const Paragraph = (0, import_react.forwardRef)((props, ref) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)("p", {
-  ...props,
-  ref
-}));
+const Paragraph = (0, import_react.forwardRef)((props, ref) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)("p", { ...props, ref }));
 Paragraph.displayName = "Paragraph";

package/lib/cjs/components/paragraph.ws.cjs

@@ -25,6 +25,7 @@ module.exports = __toCommonJS(paragraph_ws_exports);
 var import_icons = require("@webstudio-is/icons");
 var import_paragraph = require("./__generated__/paragraph.props");
 const meta = {
+  category: "typography",
   type: "rich-text",
   label: "Paragraph",
   Icon: import_icons.TextAlignLeftIcon,

package/lib/cjs/components/rich-text-link.cjs

@@ -24,8 +24,5 @@ module.exports = __toCommonJS(rich_text_link_exports);
 var import_jsx_runtime = require("react/jsx-runtime");
 var import_react = require("react");
 var import_link = require("./link");
-const RichTextLink = (0, import_react.forwardRef)((props, ref) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_link.Link, {
-  ...props,
-  ref
-}));
+const RichTextLink = (0, import_react.forwardRef)((props, ref) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_link.Link, { ...props, ref }));
 RichTextLink.displayName = "RichTextLink";

package/lib/cjs/components/rich-text-link.ws.cjs

@@ -24,8 +24,9 @@ __export(rich_text_link_ws_exports, {
 module.exports = __toCommonJS(rich_text_link_ws_exports);
 var import_rich_text_link = require("./__generated__/rich-text-link.props");
 var import_link = require("./link.ws");
+const { category, ...linkMetaRest } = import_link.meta;
 const meta = {
-  ...import_link.meta,
+  ...linkMetaRest,
   type: "rich-text-child",
   children: []
 };

package/lib/cjs/components/separator.ws.cjs

@@ -39,6 +39,7 @@ const presetStyle = {
   }
 };
 const meta = {
+  category: "general",
   type: "embed",
   label: "Separator",
   Icon: import_icons.DashIcon,

package/lib/cjs/components/slot.cjs

@@ -0,0 +1,36 @@
+"use strict";
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+var slot_exports = {};
+__export(slot_exports, {
+  Slot: () => Slot
+});
+module.exports = __toCommonJS(slot_exports);
+var import_jsx_runtime = require("react/jsx-runtime");
+var import_react = require("react");
+const Slot = (0, import_react.forwardRef)((props, ref) => {
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+    "div",
+    {
+      ...props,
+      ref,
+      style: { display: props.children ? "contents" : "block" }
+    }
+  );
+});
+Slot.displayName = "Slot";

package/lib/cjs/components/slot.ws.cjs

@@ -0,0 +1,34 @@
+"use strict";
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+var slot_ws_exports = {};
+__export(slot_ws_exports, {
+  meta: () => meta,
+  propsMeta: () => propsMeta
+});
+module.exports = __toCommonJS(slot_ws_exports);
+var import_icons = require("@webstudio-is/icons");
+const meta = {
+  category: "general",
+  type: "container",
+  label: "Slot",
+  Icon: import_icons.SlotComponentIcon
+};
+const propsMeta = {
+  props: {}
+};

package/lib/cjs/components/span.cjs

@@ -24,8 +24,5 @@ module.exports = __toCommonJS(span_exports);
 var import_jsx_runtime = require("react/jsx-runtime");
 var import_react = require("react");
 const defaultTag = "span";
-const Span = (0, import_react.forwardRef)((props, ref) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", {
-  ...props,
-  ref
-}));
+const Span = (0, import_react.forwardRef)((props, ref) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { ...props, ref }));
 Span.displayName = "Span";

package/lib/cjs/components/subscript.cjs

@@ -24,8 +24,5 @@ module.exports = __toCommonJS(subscript_exports);
 var import_jsx_runtime = require("react/jsx-runtime");
 var import_react = require("react");
 const defaultTag = "sub";
-const Subscript = (0, import_react.forwardRef)((props, ref) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)("sub", {
-  ...props,
-  ref
-}));
+const Subscript = (0, import_react.forwardRef)((props, ref) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)("sub", { ...props, ref }));
 Subscript.displayName = "Subscript";

package/lib/cjs/components/superscript.cjs

@@ -24,8 +24,5 @@ module.exports = __toCommonJS(superscript_exports);
 var import_jsx_runtime = require("react/jsx-runtime");
 var import_react = require("react");
 const defaultTag = "sup";
-const Superscript = (0, import_react.forwardRef)((props, ref) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)("sup", {
-  ...props,
-  ref
-}));
+const Superscript = (0, import_react.forwardRef)((props, ref) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)("sup", { ...props, ref }));
 Superscript.displayName = "Bold";

package/lib/cjs/components/text-block.cjs

@@ -24,8 +24,5 @@ module.exports = __toCommonJS(text_block_exports);
 var import_jsx_runtime = require("react/jsx-runtime");
 var import_react = require("react");
 const defaultTag = "div";
-const TextBlock = (0, import_react.forwardRef)((props, ref) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", {
-  ...props,
-  ref
-}));
+const TextBlock = (0, import_react.forwardRef)((props, ref) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { ...props, ref }));
 TextBlock.displayName = "TextBlock";

package/lib/cjs/components/text-block.ws.cjs

@@ -32,6 +32,7 @@ const presetStyle = {
   }
 };
 const meta = {
+  category: "typography",
   type: "rich-text",
   label: "Text Block",
   Icon: import_icons.TextIcon,

package/lib/cjs/css/categories.cjs

@@ -24,11 +24,14 @@ __export(categories_exports, {
 module.exports = __toCommonJS(categories_exports);
 const layout = [
   "display",
+  // Flex
   "flexDirection",
   "flexWrap",
+  // Flex or grid
   "alignItems",
   "justifyContent",
   "alignContent",
+  // Grid
   "justifyItems",
   "rowGap",
   "columnGap",
@@ -109,6 +112,7 @@ const typography = [
   "direction",
   "whiteSpace",
   "textShadow",
+  // More
   "fontSizeAdjust",
   "fontStretch",
   "fontVariant",
@@ -149,6 +153,7 @@ const borders = [
   "borderRightWidth",
   "borderBottomWidth",
   "borderLeftWidth",
+  // More
   "borderImageSlice",
   "borderImageWidth",
   "borderImageOutset",
@@ -167,6 +172,7 @@ const effects = [
   "filter",
   "backdropFilter",
   "cursor",
+  // More
   "animationDelay",
   "animationDirection",
   "animationDuration",

package/lib/cjs/index.cjs

@@ -19,6 +19,7 @@ var __reExport = (target, mod, secondTarget) => (__copyProps(target, mod, "defau
 var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
 var src_exports = {};
 __export(src_exports, {
+  componentCategories: () => import_component_meta.componentCategories,
   customComponentMetas: () => import_custom_components.customComponentMetas,
   customComponentPropsMetas: () => import_custom_components.customComponentPropsMetas,
   customComponents: () => import_custom_components.customComponents
@@ -32,3 +33,4 @@ __reExport(src_exports, require("./app"), module.exports);
 __reExport(src_exports, require("./components/components"), module.exports);
 __reExport(src_exports, require("./components/components-utils"), module.exports);
 var import_custom_components = require("./app/custom-components");
+var import_component_meta = require("./components/component-meta");

package/lib/cjs/pubsub/create.cjs

@@ -18,6 +18,10 @@ var __copyProps = (to, from, except, desc) => {
   return to;
 };
 var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
+  // If the importer is in node compatibility mode or this is not an ESM
+  // file that has been converted to a CommonJS file using a Babel-
+  // compatible transform (i.e. "__esModule" has not been set), then set
+  // "default" to the CommonJS "module.exports" for node compatibility.
   isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
   mod
 ));
@@ -43,10 +47,16 @@ const createPubsub = () => {
     );
   }
   return {
+    /**
+     * To publish a postMessage event on the current window and parent window from the iframe.
+     */
     publish(action) {
       window.parent.postMessage(action, "*");
       window.postMessage(action, "*");
     },
+    /**
+     * To publish a postMessage event on the iframe and parent window from the parent window.
+     */
     usePublish() {
       const iframeRef = (0, import_react.useRef)(null);
       const publishCallback = (0, import_react.useCallback)(
@@ -62,6 +72,9 @@ const createPubsub = () => {
       );
       return [publishCallback, iframeRef];
     },
+    /**
+     * To subscribe a message event on the current window.
+     */
     useSubscribe(type, onAction) {
       (0, import_react.useEffect)(() => {
         emitter.on(type, onAction);

package/lib/cjs/tree/create-elements-tree.cjs

@@ -34,32 +34,31 @@ const createElementsTree = ({
   Component,
   getComponent
 }) => {
+  const rootInstanceSelector = [instance.id];
   const children = createInstanceChildrenElements({
+    instanceSelector: rootInstanceSelector,
     Component,
     children: instance.children,
     getComponent
   });
-  const body = createInstanceElement({
+  const root = createInstanceElement({
     Component,
     instance,
+    instanceSelector: rootInstanceSelector,
     children: [
-      /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_react.Fragment, {
-        children: [
-          children,
-          sandbox && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_session_storage_polyfill.SessionStoragePolyfill, {}),
-          /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_react2.ScrollRestoration, {}),
-          /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_react2.Scripts, {})
-        ]
-      }, "children")
+      /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_react.Fragment, { children: [
+        children,
+        sandbox && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_session_storage_polyfill.SessionStoragePolyfill, {}),
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_react2.ScrollRestoration, {}),
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_react2.Scripts, {})
+      ] }, "children")
     ],
     getComponent
   });
-  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_context.ReactSdkContext.Provider, {
-    value: { propsByInstanceIdStore, assetsStore },
-    children: body
-  });
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_context.ReactSdkContext.Provider, { value: { propsByInstanceIdStore, assetsStore }, children: root });
 };
 const createInstanceChildrenElements = ({
+  instanceSelector,
   children,
   Component,
   getComponent
@@ -70,13 +69,16 @@ const createInstanceChildrenElements = ({
       elements.push(child.value);
       continue;
     }
+    const childInstanceSelector = [child.id, ...instanceSelector];
     const children2 = createInstanceChildrenElements({
+      instanceSelector: childInstanceSelector,
       children: child.children,
       Component,
       getComponent
     });
     const element = createInstanceElement({
       instance: child,
+      instanceSelector: childInstanceSelector,
       Component,
       children: children2,
       getComponent
@@ -88,16 +90,18 @@ const createInstanceChildrenElements = ({
 const createInstanceElement = ({
   Component,
   instance,
+  instanceSelector,
   children = [],
   getComponent
 }) => {
-  const props = {
-    instance,
-    children,
-    key: instance.id,
-    getComponent
-  };
-  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Component, {
-    ...props
-  });
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+    Component,
+    {
+      instance,
+      instanceSelector,
+      getComponent,
+      children
+    },
+    instance.id
+  );
 };

package/lib/cjs/tree/session-storage-polyfill.cjs

@@ -56,7 +56,10 @@ const polyfill = function() {
     });
   }
 }.toString();
-const SessionStoragePolyfill = () => /* @__PURE__ */ (0, import_jsx_runtime.jsx)("script", {
-  dangerouslySetInnerHTML: { __html: `(${polyfill})()` },
-  suppressHydrationWarning: true
-});
+const SessionStoragePolyfill = () => /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+  "script",
+  {
+    dangerouslySetInnerHTML: { __html: `(${polyfill})()` },
+    suppressHydrationWarning: true
+  }
+);

package/lib/cjs/tree/webstudio-component.cjs

@@ -30,12 +30,10 @@ var import_react = require("react");
 var import_props = require("../props");
 const renderText = (text) => {
   const lines = text.split("\n");
-  return lines.map((line, index) => /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_react.Fragment, {
-    children: [
-      line,
-      index < lines.length - 1 ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)("br", {}) : null
-    ]
-  }, index));
+  return lines.map((line, index) => /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_react.Fragment, { children: [
+    line,
+    index < lines.length - 1 ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)("br", {}) : null
+  ] }, index));
 };
 const renderWebstudioComponentChildren = (children) => {
   if (children === void 0 || children.length === 0) {
@@ -62,10 +60,7 @@ const WebstudioComponent = ({
   if (Component === void 0) {
     return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_jsx_runtime.Fragment, {});
   }
-  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Component, {
-    ...props,
-    children: renderWebstudioComponentChildren(children)
-  });
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Component, { ...props, children: renderWebstudioComponentChildren(children) });
 };
 const idAttribute = "data-ws-id";
 const componentAttribute = "data-ws-component";

package/lib/components/__generated__/fragment.props.js

@@ -0,0 +1,4 @@
+const props = {};
+export {
+  props
+};

package/lib/components/__generated__/slot.props.js

@@ -0,0 +1,4 @@
+const props = {};
+export {
+  props
+};

package/lib/components/blockquote.ws.js

@@ -39,6 +39,7 @@ const presetStyle = {
   }
 };
 const meta = {
+  category: "typography",
   type: "rich-text",
   label: "Blockquote",
   Icon: BlockquoteIcon,

package/lib/components/body.js

@@ -1,10 +1,7 @@
 import { jsx } from "react/jsx-runtime";
 import { forwardRef } from "react";
 const defaultTag = "body";
-const Body = forwardRef((props, ref) => /* @__PURE__ */ jsx("body", {
-  ...props,
-  ref
-}));
+const Body = forwardRef((props, ref) => /* @__PURE__ */ jsx("body", { ...props, ref }));
 Body.displayName = "Body";
 export {
   Body

package/lib/components/body.ws.js

@@ -50,7 +50,7 @@ const presetStyle = {
   }
 };
 const meta = {
-  type: "body",
+  type: "container",
   label: "Body",
   Icon: BodyIcon,
   presetStyle

package/lib/components/bold.js

@@ -1,10 +1,7 @@
 import { jsx } from "react/jsx-runtime";
 import { forwardRef } from "react";
 const defaultTag = "b";
-const Bold = forwardRef((props, ref) => /* @__PURE__ */ jsx("b", {
-  ...props,
-  ref
-}));
+const Bold = forwardRef((props, ref) => /* @__PURE__ */ jsx("b", { ...props, ref }));
 Bold.displayName = "Bold";
 export {
   Bold

package/lib/components/box.ws.js

@@ -7,6 +7,7 @@ const presetStyle = {
   }
 };
 const meta = {
+  category: "general",
   type: "container",
   label: "Box",
   Icon: BoxIcon,

package/lib/components/button.js

@@ -7,12 +7,7 @@ const Button = forwardRef(
     innerText = "Edit Inner Text in Properties",
     children,
     ...props
-  }, ref) => /* @__PURE__ */ jsx("button", {
-    type,
-    ...props,
-    ref,
-    children: children ? children : innerText
-  })
+  }, ref) => /* @__PURE__ */ jsx("button", { type, ...props, ref, children: children ? children : innerText })
 );
 Button.displayName = "Button";
 export {

package/lib/components/button.ws.js

@@ -1,6 +1,7 @@
 import { ButtonIcon } from "@webstudio-is/icons";
 import { props } from "./__generated__/button.props";
 const meta = {
+  category: "forms",
   type: "container",
   label: "Button",
   Icon: ButtonIcon

package/lib/components/code.ws.js

@@ -30,6 +30,7 @@ const presetStyle = {
   }
 };
 const meta = {
+  category: "general",
   type: "rich-text",
   label: "Code",
   Icon: CodeIcon,

package/lib/components/component-meta.js

@@ -0,0 +1,34 @@
+import { z } from "zod";
+import { PropMeta } from "@webstudio-is/generate-arg-types";
+const WsComponentPropsMeta = z.object({
+  props: z.record(PropMeta),
+  initialProps: z.array(z.string()).optional()
+});
+const componentCategories = [
+  "general",
+  "typography",
+  "media",
+  "forms"
+];
+const WsComponentMeta = z.object({
+  category: z.enum(componentCategories).optional(),
+  // container - can accept other components with dnd
+  // control - usually form controls like inputs, without children
+  // embed - images, videos or other embeddable components, without children
+  // rich-text - editable text component
+  // rich-text-child - formatted text fragment, not listed in components list
+  type: z.enum([
+    "container",
+    "control",
+    "embed",
+    "rich-text",
+    "rich-text-child"
+  ]),
+  label: z.string(),
+  Icon: z.function(),
+  presetStyle: z.optional(z.any()),
+  children: z.optional(z.array(z.string()))
+});
+export {
+  componentCategories
+};

package/lib/components/components-utils.js

@@ -1,6 +1,8 @@
 import * as components from "./components";
 import { registeredComponents } from "./index";
 const componentNames = Object.keys({
+  Slot: 1,
+  Fragment: 1,
   Box: 1,
   Body: 1,
   TextBlock: 1,

package/lib/components/components.js

@@ -1,3 +1,5 @@
+import { Slot } from "./slot";
+import { Fragment } from "./fragment";
 import { Body } from "./body";
 import { Box } from "./box";
 import { TextBlock } from "./text-block";
@@ -28,6 +30,7 @@ export {
   Button,
   Code,
   Form,
+  Fragment,
   Heading,
   Image,
   Input,
@@ -39,6 +42,7 @@ export {
   Paragraph,
   RichTextLink,
   Separator,
+  Slot,
   Span,
   Subscript,
   Superscript,