@webstudio-is/sdk-components-react 0.82.0 → 0.83.0

package/lib/cjs/body.ws.js

@@ -27,7 +27,17 @@ var import_react_sdk = require("@webstudio-is/react-sdk");
 var import_css_normalize = require("@webstudio-is/react-sdk/css-normalize");
 var import_body = require("./__generated__/body.props");
 const presetStyle = {
-  body: import_css_normalize.body
+  body: [
+    ...import_css_normalize.body,
+    {
+      property: "WebkitFontSmoothing",
+      value: { type: "keyword", value: "antialiased" }
+    },
+    {
+      property: "MozOsxFontSmoothing",
+      value: { type: "keyword", value: "grayscale" }
+    }
+  ]
 };
 const meta = {
   type: "container",

package/lib/cjs/components.js

@@ -25,6 +25,13 @@ __export(components_exports, {
   Button: () => import_button.Button,
   Checkbox: () => import_checkbox.Checkbox,
   CodeText: () => import_code_text.CodeText,
+  Dialog: () => import_radix_dialog.Dialog,
+  DialogClose: () => import_radix_dialog.DialogClose,
+  DialogContent: () => import_radix_dialog.DialogContent,
+  DialogDescription: () => import_radix_dialog.DialogDescription,
+  DialogOverlay: () => import_radix_dialog.DialogOverlay,
+  DialogTitle: () => import_radix_dialog.DialogTitle,
+  DialogTrigger: () => import_radix_dialog.DialogTrigger,
   Form: () => import_form.Form,
   Fragment: () => import_fragment.Fragment,
   Heading: () => import_heading.Heading,
@@ -37,6 +44,9 @@ __export(components_exports, {
   List: () => import_list.List,
   ListItem: () => import_list_item.ListItem,
   Paragraph: () => import_paragraph.Paragraph,
+  Popover: () => import_radix_popover.Popover,
+  PopoverContent: () => import_radix_popover.PopoverContent,
+  PopoverTrigger: () => import_radix_popover.PopoverTrigger,
   RadioButton: () => import_radio_button.RadioButton,
   RichTextLink: () => import_rich_text_link.RichTextLink,
   Separator: () => import_separator.Separator,
@@ -46,6 +56,9 @@ __export(components_exports, {
   Superscript: () => import_superscript.Superscript,
   Text: () => import_text.Text,
   Textarea: () => import_textarea.Textarea,
+  Tooltip: () => import_radix_tooltip.Tooltip,
+  TooltipContent: () => import_radix_tooltip.TooltipContent,
+  TooltipTrigger: () => import_radix_tooltip.TooltipTrigger,
   Vimeo: () => import_vimeo.Vimeo,
   VimeoPlayButton: () => import_vimeo_play_button.VimeoPlayButton,
   VimeoPreviewImage: () => import_vimeo_preview_image.VimeoPreviewImage,
@@ -84,3 +97,6 @@ var import_vimeo = require("./vimeo");
 var import_vimeo_preview_image = require("./vimeo-preview-image");
 var import_vimeo_play_button = require("./vimeo-play-button");
 var import_vimeo_spinner = require("./vimeo-spinner");
+var import_radix_tooltip = require("./radix-tooltip");
+var import_radix_popover = require("./radix-popover");
+var import_radix_dialog = require("./radix-dialog");

package/lib/cjs/label.ws.js

@@ -37,7 +37,7 @@ const meta = {
   invalidAncestors: ["Button"],
   type: "container",
   label: "Input Label",
-  icon: import_svg.TextIcon,
+  icon: import_svg.LabelIcon,
   states: import_react_sdk.defaultStates,
   presetStyle,
   order: 2,

package/lib/cjs/metas.js

@@ -25,6 +25,13 @@ __export(metas_exports, {
   Button: () => import_button.meta,
   Checkbox: () => import_checkbox.meta,
   CodeText: () => import_code_text.meta,
+  Dialog: () => import_radix_dialog.metaDialog,
+  DialogClose: () => import_radix_dialog.metaDialogClose,
+  DialogContent: () => import_radix_dialog.metaDialogContent,
+  DialogDescription: () => import_radix_dialog.metaDialogDescription,
+  DialogOverlay: () => import_radix_dialog.metaDialogOverlay,
+  DialogTitle: () => import_radix_dialog.metaDialogTitle,
+  DialogTrigger: () => import_radix_dialog.metaDialogTrigger,
   Form: () => import_form.meta,
   Fragment: () => import_fragment.meta,
   Heading: () => import_heading.meta,
@@ -37,6 +44,9 @@ __export(metas_exports, {
   List: () => import_list.meta,
   ListItem: () => import_list_item.meta,
   Paragraph: () => import_paragraph.meta,
+  Popover: () => import_radix_popover.metaPopover,
+  PopoverContent: () => import_radix_popover.metaPopoverContent,
+  PopoverTrigger: () => import_radix_popover.metaPopoverTrigger,
   RadioButton: () => import_radio_button.meta,
   RichTextLink: () => import_rich_text_link.meta,
   Separator: () => import_separator.meta,
@@ -46,6 +56,9 @@ __export(metas_exports, {
   Superscript: () => import_superscript.meta,
   Text: () => import_text.meta,
   Textarea: () => import_textarea.meta,
+  Tooltip: () => import_radix_tooltip.metaTooltip,
+  TooltipContent: () => import_radix_tooltip.metaTooltipContent,
+  TooltipTrigger: () => import_radix_tooltip.metaTooltipTrigger,
   Vimeo: () => import_vimeo.meta,
   VimeoPlayButton: () => import_vimeo_play_button.meta,
   VimeoPreviewImage: () => import_vimeo_preview_image.meta,
@@ -84,3 +97,6 @@ var import_vimeo = require("./vimeo.ws");
 var import_vimeo_preview_image = require("./vimeo-preview-image.ws");
 var import_vimeo_play_button = require("./vimeo-play-button.ws");
 var import_vimeo_spinner = require("./vimeo-spinner.ws");
+var import_radix_tooltip = require("./radix-tooltip.ws");
+var import_radix_popover = require("./radix-popover.ws");
+var import_radix_dialog = require("./radix-dialog.ws");

package/lib/cjs/props.js

@@ -25,6 +25,13 @@ __export(props_exports, {
   Button: () => import_button.propsMeta,
   Checkbox: () => import_checkbox.propsMeta,
   CodeText: () => import_code_text.propsMeta,
+  Dialog: () => import_radix_dialog.propsMetaDialog,
+  DialogClose: () => import_radix_dialog.propsMetaDialogClose,
+  DialogContent: () => import_radix_dialog.propsMetaDialogContent,
+  DialogDescription: () => import_radix_dialog.propsMetaDialogDescription,
+  DialogOverlay: () => import_radix_dialog.propsMetaDialogOverlay,
+  DialogTitle: () => import_radix_dialog.propsMetaDialogTitle,
+  DialogTrigger: () => import_radix_dialog.propsMetaDialogTrigger,
   Form: () => import_form.propsMeta,
   Fragment: () => import_fragment.propsMeta,
   Heading: () => import_heading.propsMeta,
@@ -37,6 +44,9 @@ __export(props_exports, {
   List: () => import_list.propsMeta,
   ListItem: () => import_list_item.propsMeta,
   Paragraph: () => import_paragraph.propsMeta,
+  Popover: () => import_radix_popover.propsMetaPopover,
+  PopoverContent: () => import_radix_popover.propsMetaPopoverContent,
+  PopoverTrigger: () => import_radix_popover.propsMetaPopoverTrigger,
   RadioButton: () => import_radio_button.propsMeta,
   RichTextLink: () => import_rich_text_link.propsMeta,
   Separator: () => import_separator.propsMeta,
@@ -46,6 +56,9 @@ __export(props_exports, {
   Superscript: () => import_superscript.propsMeta,
   Text: () => import_text.propsMeta,
   Textarea: () => import_textarea.propsMeta,
+  Tooltip: () => import_radix_tooltip.propsMetaTooltip,
+  TooltipContent: () => import_radix_tooltip.propsMetaTooltipContent,
+  TooltipTrigger: () => import_radix_tooltip.propsMetaTooltipTrigger,
   Vimeo: () => import_vimeo.propsMeta,
   VimeoPlayButton: () => import_vimeo_play_button.propsMeta,
   VimeoPreviewImage: () => import_vimeo_preview_image.propsMeta,
@@ -84,3 +97,6 @@ var import_vimeo = require("./vimeo.ws");
 var import_vimeo_preview_image = require("./vimeo-preview-image.ws");
 var import_vimeo_play_button = require("./vimeo-play-button.ws");
 var import_vimeo_spinner = require("./vimeo-spinner.ws");
+var import_radix_tooltip = require("./radix-tooltip.ws");
+var import_radix_popover = require("./radix-popover.ws");
+var import_radix_dialog = require("./radix-dialog.ws");

package/lib/cjs/radix-dialog.js

@@ -0,0 +1,61 @@
+"use strict";
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getProtoOf = Object.getPrototypeOf;
+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 __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
+));
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+var radix_dialog_exports = {};
+__export(radix_dialog_exports, {
+  Dialog: () => Dialog,
+  DialogClose: () => DialogClose,
+  DialogContent: () => DialogContent,
+  DialogDescription: () => DialogDescription,
+  DialogOverlay: () => DialogOverlay,
+  DialogTitle: () => DialogTitle,
+  DialogTrigger: () => DialogTrigger
+});
+module.exports = __toCommonJS(radix_dialog_exports);
+var import_jsx_runtime = require("react/jsx-runtime");
+var DialogPrimitive = __toESM(require("@radix-ui/react-dialog"), 1);
+var import_react_sdk = require("@webstudio-is/react-sdk");
+var import_react = require("react");
+const DisplayContentsStyle = { display: "contents" };
+const Dialog = (0, import_react.forwardRef)(({ open: openProp, isOpen, ...props }, ref) => {
+  const [webstudioAttributes, restProps] = (0, import_react_sdk.splitPropsWithWebstudioAttributes)(props);
+  const open = openProp ?? (isOpen === "open" ? true : isOpen === "closed" ? false : void 0);
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { ref, style: DisplayContentsStyle, ...webstudioAttributes, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(DialogPrimitive.Root, { open, ...restProps }) });
+});
+const DialogTrigger = (0, import_react.forwardRef)(({ children, ...props }, ref) => {
+  const firstChild = import_react.Children.toArray(children)[0];
+  const [webstudioAttributes, restProps] = (0, import_react_sdk.splitPropsWithWebstudioAttributes)(props);
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { ref, style: DisplayContentsStyle, ...webstudioAttributes, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(DialogPrimitive.Trigger, { asChild: true, ...restProps, children: firstChild ?? /* @__PURE__ */ (0, import_jsx_runtime.jsx)("button", { children: "Add button or link" }) }) });
+});
+const DialogOverlay = (0, import_react.forwardRef)((props, ref) => {
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(DialogPrimitive.DialogPortal, { children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(DialogPrimitive.Overlay, { ref, ...props }) });
+});
+const DialogContent = DialogPrimitive.Content;
+const DialogClose = DialogPrimitive.Close;
+const DialogTitle = DialogPrimitive.Title;
+const DialogDescription = DialogPrimitive.Description;

package/lib/cjs/radix-dialog.ws.js

@@ -0,0 +1,300 @@
+"use strict";
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getProtoOf = Object.getPrototypeOf;
+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 __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
+));
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+var radix_dialog_ws_exports = {};
+__export(radix_dialog_ws_exports, {
+  metaDialog: () => metaDialog,
+  metaDialogClose: () => metaDialogClose,
+  metaDialogContent: () => metaDialogContent,
+  metaDialogDescription: () => metaDialogDescription,
+  metaDialogOverlay: () => metaDialogOverlay,
+  metaDialogTitle: () => metaDialogTitle,
+  metaDialogTrigger: () => metaDialogTrigger,
+  propsMetaDialog: () => propsMetaDialog,
+  propsMetaDialogClose: () => propsMetaDialogClose,
+  propsMetaDialogContent: () => propsMetaDialogContent,
+  propsMetaDialogDescription: () => propsMetaDialogDescription,
+  propsMetaDialogOverlay: () => propsMetaDialogOverlay,
+  propsMetaDialogTitle: () => propsMetaDialogTitle,
+  propsMetaDialogTrigger: () => propsMetaDialogTrigger
+});
+module.exports = __toCommonJS(radix_dialog_ws_exports);
+var import_svg = require("@webstudio-is/icons/svg");
+var import_react_sdk = require("@webstudio-is/react-sdk");
+var tc = __toESM(require("./theme/tailwind-classes"), 1);
+var import_radix_dialog = require("./__generated__/radix-dialog.props");
+const metaDialogTrigger = {
+  category: "hidden",
+  invalidAncestors: [],
+  type: "container",
+  label: "DialogTrigger",
+  icon: import_svg.RadioCheckedIcon,
+  stylable: false,
+  detachable: false
+};
+const metaDialogContent = {
+  category: "hidden",
+  invalidAncestors: [],
+  type: "container",
+  label: "DialogContent",
+  icon: import_svg.RadioCheckedIcon,
+  detachable: false
+};
+const metaDialogOverlay = {
+  category: "hidden",
+  invalidAncestors: [],
+  type: "container",
+  label: "DialogOverlay",
+  icon: import_svg.RadioCheckedIcon,
+  detachable: false
+};
+const metaDialogTitle = {
+  category: "hidden",
+  invalidAncestors: [],
+  type: "container",
+  label: "DialogTitle",
+  icon: import_svg.RadioCheckedIcon
+};
+const metaDialogDescription = {
+  category: "hidden",
+  invalidAncestors: [],
+  type: "container",
+  label: "DialogDescription",
+  icon: import_svg.RadioCheckedIcon
+};
+const metaDialogClose = {
+  category: "hidden",
+  invalidAncestors: [],
+  type: "container",
+  label: "DialogClose",
+  icon: import_svg.RadioCheckedIcon
+};
+const metaDialog = {
+  category: "radix",
+  invalidAncestors: [],
+  type: "container",
+  label: "Dialog",
+  icon: import_svg.RadioCheckedIcon,
+  order: 15,
+  stylable: false,
+  template: [
+    {
+      type: "instance",
+      component: "Dialog",
+      label: "Dialog",
+      props: [
+        {
+          name: "isOpen",
+          // We don't have support for boolean or undefined, instead of binding on open we bind on a string
+          type: "string",
+          value: "initial",
+          dataSourceRef: {
+            type: "variable",
+            name: "isOpen"
+          }
+        }
+      ],
+      children: [
+        {
+          type: "instance",
+          component: "DialogTrigger",
+          props: [],
+          children: [
+            {
+              type: "instance",
+              component: "Button",
+              children: [{ type: "text", value: "Button" }]
+            }
+          ]
+        },
+        {
+          type: "instance",
+          component: "DialogOverlay",
+          label: "Dialog Overlay",
+          props: [],
+          /**
+           * fixed inset-0 z-50 bg-background/80 backdrop-blur-sm
+           * flex
+           **/
+          styles: [
+            tc.fixed(),
+            tc.inset(0),
+            tc.z(50),
+            tc.bg("background", 80),
+            tc.backdropBlur("sm"),
+            // To allow positioning Content
+            tc.flex()
+          ].flat(),
+          children: [
+            {
+              type: "instance",
+              component: "DialogContent",
+              label: "Dialog Content",
+              props: [],
+              /**
+               * fixed w-full z-50
+               * grid gap-4 max-w-lg
+               * m-auto
+               * border bg-background p-6 shadow-lg
+               **/
+              styles: [
+                tc.w("full"),
+                tc.z(50),
+                tc.flex(),
+                tc.flex("col"),
+                tc.gap(4),
+                tc.m("auto"),
+                tc.maxW("lg"),
+                tc.border(),
+                tc.bg("background"),
+                tc.p(6),
+                tc.shadow("lg"),
+                tc.relative()
+              ].flat(),
+              children: [
+                {
+                  type: "instance",
+                  component: "Box",
+                  label: "Dialog Header",
+                  props: [],
+                  styles: [tc.flex(), tc.flex("col"), tc.gap(1)].flat(),
+                  children: [
+                    {
+                      type: "instance",
+                      component: "DialogTitle",
+                      label: "Dialog Title",
+                      props: [],
+                      /**
+                       * text-lg leading-none tracking-tight
+                       **/
+                      styles: [
+                        tc.my(0),
+                        tc.leading("none"),
+                        tc.text("lg"),
+                        tc.tracking("tight")
+                      ].flat(),
+                      children: [
+                        {
+                          type: "text",
+                          value: "Dialog Title"
+                        }
+                      ]
+                    },
+                    {
+                      type: "instance",
+                      component: "DialogDescription",
+                      label: "Dialog Description",
+                      props: [],
+                      /**
+                       * text-sm text-muted-foreground
+                       **/
+                      styles: [
+                        tc.my(0),
+                        tc.text("sm"),
+                        tc.text("mutedForeground")
+                      ].flat(),
+                      children: [
+                        {
+                          type: "text",
+                          value: "dialog description text you can edit"
+                        }
+                      ]
+                    }
+                  ]
+                },
+                {
+                  type: "instance",
+                  component: "Text",
+                  children: [{ type: "text", value: "The text you can edit" }]
+                },
+                {
+                  type: "instance",
+                  component: "DialogClose",
+                  label: "Dialog Close",
+                  props: [],
+                  /**
+                   * absolute right-4 top-4
+                   * rounded-sm opacity-70
+                   * ring-offset-background
+                   * hover:opacity-100 focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2
+                   * flex items-center justify-center h-4 w-4
+                   **/
+                  styles: [
+                    tc.absolute(),
+                    tc.right(4),
+                    tc.top(4),
+                    tc.rounded("sm"),
+                    tc.opacity(70),
+                    tc.flex(),
+                    tc.items("center"),
+                    tc.justify("center"),
+                    tc.h(4),
+                    tc.w(4),
+                    tc.border(0),
+                    tc.bg("transparent"),
+                    tc.outline("none"),
+                    tc.hover(tc.opacity(100)),
+                    tc.focus(tc.ring("ring", 2, "background", 2))
+                  ].flat(),
+                  children: [{ type: "text", value: "\u2715" }]
+                }
+              ]
+            }
+          ]
+        }
+      ]
+    }
+  ]
+};
+const propsMetaDialog = {
+  props: import_radix_dialog.propsDialog,
+  initialProps: ["isOpen", "modal"]
+};
+const propsMetaDialogTrigger = {
+  props: import_radix_dialog.propsDialogTrigger
+};
+const propsMetaDialogContent = {
+  props: import_radix_dialog.propsDialogContent,
+  initialProps: []
+};
+const propsMetaDialogOverlay = {
+  props: import_radix_dialog.propsDialogOverlay,
+  initialProps: []
+};
+const propsMetaDialogClose = {
+  props: import_radix_dialog.propsDialogClose,
+  initialProps: []
+};
+const propsMetaDialogTitle = {
+  props: import_radix_dialog.propsDialogTitle,
+  initialProps: []
+};
+const propsMetaDialogDescription = {
+  props: import_radix_dialog.propsDialogDescription,
+  initialProps: []
+};

package/lib/cjs/radix-popover.js

@@ -0,0 +1,59 @@
+"use strict";
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getProtoOf = Object.getPrototypeOf;
+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 __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
+));
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+var radix_popover_exports = {};
+__export(radix_popover_exports, {
+  Popover: () => Popover,
+  PopoverContent: () => PopoverContent,
+  PopoverTrigger: () => PopoverTrigger
+});
+module.exports = __toCommonJS(radix_popover_exports);
+var import_jsx_runtime = require("react/jsx-runtime");
+var PopoverPrimitive = __toESM(require("@radix-ui/react-popover"), 1);
+var import_react_sdk = require("@webstudio-is/react-sdk");
+var import_react = require("react");
+const DisplayContentsStyle = { display: "contents" };
+const Popover = (0, import_react.forwardRef)(({ open: openProp, isOpen, ...props }, ref) => {
+  const [webstudioAttributes, restProps] = (0, import_react_sdk.splitPropsWithWebstudioAttributes)(props);
+  const open = openProp ?? (isOpen === "open" ? true : isOpen === "closed" ? false : void 0);
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { ref, style: DisplayContentsStyle, ...webstudioAttributes, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(PopoverPrimitive.Root, { open, ...restProps }) });
+});
+const PopoverTrigger = (0, import_react.forwardRef)(({ children, ...props }, ref) => {
+  const firstChild = import_react.Children.toArray(children)[0];
+  const [webstudioAttributes, restProps] = (0, import_react_sdk.splitPropsWithWebstudioAttributes)(props);
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { ref, style: DisplayContentsStyle, ...webstudioAttributes, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(PopoverPrimitive.Trigger, { asChild: true, ...restProps, children: firstChild ?? /* @__PURE__ */ (0, import_jsx_runtime.jsx)("button", { children: "Add button or link" }) }) });
+});
+const PopoverContent = (0, import_react.forwardRef)(({ sideOffset = 4, align = "center", ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)(PopoverPrimitive.Portal, { children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+  PopoverPrimitive.Content,
+  {
+    ref,
+    align: "center",
+    sideOffset,
+    ...props
+  }
+) }));