@plasmicpkgs/radix-ui 0.0.2

package/dist/radix-ui.esm.js

@@ -0,0 +1,713 @@
+import { createElement, Fragment, useId as useId$1, useState, forwardRef } from 'react';
+import { Root, Trigger, Anchor, Portal, Content } from '@radix-ui/react-popover';
+import clsx from 'clsx';
+import { pick, omit } from 'remeda';
+import registerComponent from '@plasmicapp/host/registerComponent';
+import '@plasmicapp/host/registerGlobalContext';
+import { Close, Overlay, Content as Content$1, Root as Root$1, Portal as Portal$1, Title, Description } from '@radix-ui/react-dialog';
+import { cva } from 'class-variance-authority';
+import { X } from 'lucide-react';
+
+function _extends() {
+  _extends = Object.assign ? Object.assign.bind() : function (target) {
+    for (var i = 1; i < arguments.length; i++) {
+      var source = arguments[i];
+      for (var key in source) {
+        if (Object.prototype.hasOwnProperty.call(source, key)) {
+          target[key] = source[key];
+        }
+      }
+    }
+    return target;
+  };
+  return _extends.apply(this, arguments);
+}
+function _objectWithoutPropertiesLoose(source, excluded) {
+  if (source == null) return {};
+  var target = {};
+  var sourceKeys = Object.keys(source);
+  var key, i;
+  for (i = 0; i < sourceKeys.length; i++) {
+    key = sourceKeys[i];
+    if (excluded.indexOf(key) >= 0) continue;
+    target[key] = source[key];
+  }
+  return target;
+}
+
+var _React$useId;
+var DEBUG_SLOWDOWN = 1;
+var enterAnims = ["fade-in", "zoom-enter", "slide-in-from-top", "slide-in-from-right", "slide-in-from-bottom", "slide-in-from-left"];
+var exitAnims = ["fade-out", "zoom-exit", "slide-out-to-top", "slide-out-to-right", "slide-out-to-bottom", "slide-out-to-left"];
+// https://github.com/reactwg/react-18/discussions/111#discussioncomment-1517837
+var id = 0;
+var useId = (_React$useId = useId$1) != null ? _React$useId : function () {
+  return useState(function () {
+    return "" + id++;
+  });
+};
+/** Allow attaching pseudoclasses and other CSS selectors to this unique component instance */
+var StyleWrapper = function StyleWrapper(_ref) {
+  var children = _ref.children,
+    css = _ref.css;
+  var dynClass = "pd__" + useId().replace(/:/g, "");
+  return createElement(Fragment, null, children(dynClass), createElement("style", null, dynClass ? css.replace(/&/g, "." + dynClass) : ""));
+};
+var Animated = function Animated(_ref2) {
+  var children = _ref2.children,
+    _ref2$enterAnimations = _ref2.enterAnimations,
+    enterAnimations = _ref2$enterAnimations === void 0 ? ["fade-in"] : _ref2$enterAnimations,
+    _ref2$exitAnimations = _ref2.exitAnimations,
+    exitAnimations = _ref2$exitAnimations === void 0 ? ["fade-out"] : _ref2$exitAnimations,
+    _ref2$enterDuration = _ref2.enterDuration,
+    enterDuration = _ref2$enterDuration === void 0 ? 0.15 * DEBUG_SLOWDOWN : _ref2$enterDuration,
+    _ref2$exitDuration = _ref2.exitDuration,
+    exitDuration = _ref2$exitDuration === void 0 ? 0.15 * DEBUG_SLOWDOWN : _ref2$exitDuration,
+    _ref2$enterOpacity = _ref2.enterOpacity,
+    enterOpacity = _ref2$enterOpacity === void 0 ? 0 : _ref2$enterOpacity,
+    _ref2$exitOpacity = _ref2.exitOpacity,
+    exitOpacity = _ref2$exitOpacity === void 0 ? 0 : _ref2$exitOpacity,
+    _ref2$enterScale = _ref2.enterScale,
+    enterScale = _ref2$enterScale === void 0 ? 0.95 : _ref2$enterScale,
+    _ref2$exitScale = _ref2.exitScale,
+    exitScale = _ref2$exitScale === void 0 ? 0.95 : _ref2$exitScale,
+    _ref2$enterTranslateX = _ref2.enterTranslateX,
+    enterTranslateX = _ref2$enterTranslateX === void 0 ? "100%" : _ref2$enterTranslateX,
+    _ref2$exitTranslateX = _ref2.exitTranslateX,
+    exitTranslateX = _ref2$exitTranslateX === void 0 ? "100%" : _ref2$exitTranslateX,
+    _ref2$enterTranslateY = _ref2.enterTranslateY,
+    enterTranslateY = _ref2$enterTranslateY === void 0 ? "100%" : _ref2$enterTranslateY,
+    _ref2$exitTranslateY = _ref2.exitTranslateY,
+    exitTranslateY = _ref2$exitTranslateY === void 0 ? "100%" : _ref2$exitTranslateY,
+    _ref2$enterTiming = _ref2.enterTiming,
+    enterTiming = _ref2$enterTiming === void 0 ? "ease-out" : _ref2$enterTiming,
+    _ref2$exitTiming = _ref2.exitTiming,
+    exitTiming = _ref2$exitTiming === void 0 ? "ease-out" : _ref2$exitTiming,
+    _ref2$enterDelay = _ref2.enterDelay,
+    enterDelay = _ref2$enterDelay === void 0 ? 0 : _ref2$enterDelay,
+    _ref2$exitDelay = _ref2.exitDelay,
+    exitDelay = _ref2$exitDelay === void 0 ? 0 : _ref2$exitDelay;
+  var pct = function pct(x) {
+    return typeof x === "number" || x != null && x.match(/.*\d$/) ? x + "%" : x;
+  };
+  var neg = function neg(x) {
+    return x.startsWith("-") ? x : "-" + x;
+  };
+  var animations = {
+    "fade-in": "--tw-enter-opacity: " + enterOpacity + ";",
+    "fade-out": "--tw-exit-opacity: " + exitOpacity + ";",
+    "slide-in-from-top": "--tw-enter-translate-y: " + neg(pct(enterTranslateY)) + ";",
+    "slide-out-to-top": "--tw-exit-translate-y: " + neg(pct(exitTranslateY)) + ";",
+    "slide-in-from-right": "--tw-enter-translate-x: " + pct(enterTranslateX) + ";",
+    "slide-out-to-right": "--tw-exit-translate-x: " + pct(exitTranslateX) + ";",
+    "slide-in-from-bottom": "--tw-enter-translate-y: " + pct(enterTranslateY) + ";",
+    "slide-out-to-bottom": "--tw-exit-translate-y: " + pct(exitTranslateY) + ";",
+    "slide-in-from-left": "--tw-enter-translate-x: " + neg(pct(enterTranslateX)) + ";",
+    "slide-out-to-left": "--tw-exit-translate-x: " + neg(pct(exitTranslateX)) + ";",
+    "zoom-enter": "--tw-enter-scale: " + enterScale + ";",
+    "zoom-exit": "--tw-exit-scale: " + exitScale + ";"
+  };
+  return createElement(StyleWrapper, {
+    css: "\n        &[data-state=\"closed\"] {\n          animation-duration: " + exitDuration + "s;\n          animation-timing-function: " + exitTiming + ";\n          animation-delay: " + exitDelay + ";\n          " + exitAnimations.map(function (exitAnimation) {
+      var _animations$exitAnima;
+      return (_animations$exitAnima = animations[exitAnimation]) != null ? _animations$exitAnima : "";
+    }).join(" ") + "\n        }\n        &[data-state=\"open\"] {\n          animation-duration: " + enterDuration + "s;\n          animation-timing-function: " + enterTiming + ";\n          animation-delay: " + enterDelay + ";\n          " + enterAnimations.map(function (enterAnimation) {
+      var _animations$enterAnim;
+      return (_animations$enterAnim = animations[enterAnimation]) != null ? _animations$enterAnim : "";
+    }).join(" ") + "\n        }\n      "
+  }, children);
+};
+function splitAnimProps(props) {
+  var keys = ["enterAnimations", "exitAnimations", "enterDuration", "exitDuration", "enterTranslateX", "exitTranslateX", "enterTranslateY", "exitTranslateY", "enterTiming", "exitTiming", "enterDelay", "exitDelay", "enterScale", "exitScale", "enterOpacity", "exitOpacity"];
+  var a = pick(props, keys);
+  var b = omit(props, keys);
+  return [a, b];
+}
+function mungeNames(names) {
+  return names.map(function (name) {
+    return {
+      label: name.replace(/-/g, " "),
+      value: name
+    };
+  });
+}
+var animPropTypes = function animPropTypes(_ref3) {
+  var defaultEnterAnimations = _ref3.defaultEnterAnimations,
+    defaultExitAnimations = _ref3.defaultExitAnimations;
+  var getEnterAnimations = function getEnterAnimations(ps) {
+    var _ps$enterAnimations;
+    return (_ps$enterAnimations = ps.enterAnimations) != null ? _ps$enterAnimations : defaultEnterAnimations;
+  };
+  var getExitAnimations = function getExitAnimations(ps) {
+    var _ps$exitAnimations;
+    return (_ps$exitAnimations = ps.exitAnimations) != null ? _ps$exitAnimations : defaultExitAnimations;
+  };
+  return {
+    enterAnimations: {
+      type: "choice",
+      options: mungeNames(enterAnims),
+      multiSelect: true,
+      defaultValueHint: defaultEnterAnimations != null ? defaultEnterAnimations : ["fade-in"]
+    },
+    exitAnimations: {
+      type: "choice",
+      options: mungeNames(exitAnims),
+      multiSelect: true,
+      defaultValueHint: defaultExitAnimations != null ? defaultExitAnimations : ["fade-out"]
+    },
+    enterDuration: {
+      type: "number",
+      defaultValueHint: 0.15
+    },
+    exitDuration: {
+      type: "number",
+      defaultValueHint: 0.15
+    },
+    enterTranslateX: {
+      type: "string",
+      defaultValueHint: "100%",
+      hidden: function hidden(ps) {
+        var _getEnterAnimations, _getEnterAnimations2;
+        return !((_getEnterAnimations = getEnterAnimations(ps)) != null && _getEnterAnimations.includes("slide-in-from-right")) && !((_getEnterAnimations2 = getEnterAnimations(ps)) != null && _getEnterAnimations2.includes("slide-in-from-left"));
+      }
+    },
+    exitTranslateX: {
+      type: "string",
+      defaultValueHint: "100%",
+      hidden: function hidden(ps) {
+        var _getExitAnimations, _getExitAnimations2;
+        return !((_getExitAnimations = getExitAnimations(ps)) != null && _getExitAnimations.includes("slide-out-to-right")) && !((_getExitAnimations2 = getExitAnimations(ps)) != null && _getExitAnimations2.includes("slide-out-to-left"));
+      }
+    },
+    enterTranslateY: {
+      type: "string",
+      defaultValueHint: "100%",
+      hidden: function hidden(ps) {
+        var _getEnterAnimations3, _getEnterAnimations4;
+        return !((_getEnterAnimations3 = getEnterAnimations(ps)) != null && _getEnterAnimations3.includes("slide-in-from-bottom")) && !((_getEnterAnimations4 = getEnterAnimations(ps)) != null && _getEnterAnimations4.includes("slide-in-from-top"));
+      }
+    },
+    exitTranslateY: {
+      type: "string",
+      defaultValueHint: "100%",
+      hidden: function hidden(ps) {
+        var _getExitAnimations3, _getExitAnimations4;
+        return !((_getExitAnimations3 = getExitAnimations(ps)) != null && _getExitAnimations3.includes("slide-out-to-bottom")) && !((_getExitAnimations4 = getExitAnimations(ps)) != null && _getExitAnimations4.includes("slide-out-to-top"));
+      }
+    },
+    enterOpacity: {
+      type: "number",
+      defaultValueHint: 0,
+      hidden: function hidden(ps) {
+        var _getEnterAnimations5;
+        return !((_getEnterAnimations5 = getEnterAnimations(ps)) != null && _getEnterAnimations5.includes("fade-in"));
+      }
+    },
+    exitOpacity: {
+      type: "number",
+      defaultValueHint: 0,
+      hidden: function hidden(ps) {
+        var _getExitAnimations5;
+        return !((_getExitAnimations5 = getExitAnimations(ps)) != null && _getExitAnimations5.includes("fade-out"));
+      }
+    },
+    enterScale: {
+      type: "number",
+      defaultValueHint: 0.95,
+      hidden: function hidden(ps) {
+        var _getEnterAnimations6;
+        return !((_getEnterAnimations6 = getEnterAnimations(ps)) != null && _getEnterAnimations6.includes("zoom-enter"));
+      }
+    },
+    exitScale: {
+      type: "number",
+      defaultValueHint: 0.95,
+      hidden: function hidden(ps) {
+        var _getExitAnimations6;
+        return !((_getExitAnimations6 = getExitAnimations(ps)) != null && _getExitAnimations6.includes("zoom-exit"));
+      }
+    },
+    enterDelay: {
+      type: "number",
+      advanced: true,
+      defaultValueHint: 0
+    },
+    exitDelay: {
+      type: "number",
+      advanced: true,
+      defaultValueHint: 0
+    },
+    enterTiming: _extends({
+      type: "string",
+      advanced: true,
+      defaultValueHint: "ease-out"
+    }, {
+      suggestions: ["linear", "ease", "ease-in", "ease-out", "ease-in-out"]
+    }),
+    exitTiming: _extends({
+      type: "string",
+      advanced: true,
+      defaultValueHint: "ease-out"
+    }, {
+      suggestions: ["linear", "ease", "ease-in", "ease-out", "ease-in-out"]
+    })
+  };
+};
+var popoverProps = {
+  open: {
+    type: "boolean",
+    editOnly: true,
+    uncontrolledProp: "defaultOpen"
+  },
+  modal: {
+    type: "boolean",
+    advanced: true,
+    description: "Disable interaction with outside elements. Only popover content will be visible to screen readers."
+  },
+  onOpenChange: {
+    type: "eventHandler",
+    argTypes: [{
+      type: "boolean",
+      name: "open"
+    }]
+  }
+};
+
+function registerComponentHelper(loader, component, meta) {
+  if (loader) {
+    loader.registerComponent(component, meta);
+  } else {
+    registerComponent(component, meta);
+  }
+}
+
+var _excluded = ["open", "onOpenChange", "defaultOpen", "modal", "className", "sideOffset", "themeResetClass", "overlay", "slideIn", "trigger", "children"];
+function Popover(_ref) {
+  var open = _ref.open,
+    onOpenChange = _ref.onOpenChange,
+    defaultOpen = _ref.defaultOpen,
+    modal = _ref.modal,
+    className = _ref.className,
+    _ref$sideOffset = _ref.sideOffset,
+    sideOffset = _ref$sideOffset === void 0 ? 4 : _ref$sideOffset,
+    themeResetClass = _ref.themeResetClass,
+    overlay = _ref.overlay,
+    _ref$slideIn = _ref.slideIn,
+    slideIn = _ref$slideIn === void 0 ? true : _ref$slideIn,
+    _ref$trigger = _ref.trigger,
+    trigger = _ref$trigger === void 0 ? true : _ref$trigger,
+    children = _ref.children,
+    props = _objectWithoutPropertiesLoose(_ref, _excluded);
+  var _splitAnimProps = splitAnimProps(props),
+    animProps = _splitAnimProps[0],
+    rest = _splitAnimProps[1];
+  return createElement(Animated, Object.assign({
+    enterAnimations: ["fade-in", "zoom-enter"],
+    exitAnimations: ["fade-out", "zoom-exit"]
+  }, animProps), function (plsmcId) {
+    return createElement(Root, {
+      open: open,
+      onOpenChange: onOpenChange,
+      defaultOpen: defaultOpen,
+      modal: modal
+    }, trigger ? createElement(Trigger, null, children) : createElement(Anchor, null, children), createElement(Portal, null, createElement(Content, Object.assign({
+      className: clsx("outline-none data-[state=open]:animate-in data-[state=closed]:animate-out", slideIn ? "data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2" : "", plsmcId ? plsmcId : "", className, themeResetClass),
+      sideOffset: sideOffset
+    }, rest), overlay)));
+  });
+}
+Popover.displayName = Content.displayName;
+function registerPopover(PLASMIC) {
+  registerComponentHelper(PLASMIC, Popover, {
+    name: "hostless-radix-popover",
+    displayName: "Popover",
+    importPath: "@plasmicpkgs/radix-ui/popover",
+    importName: "Popover",
+    props: _extends({}, popoverProps, {
+      trigger: {
+        type: "boolean",
+        displayName: "Trigger on click",
+        defaultValueHint: true,
+        advanced: true
+      },
+      themeResetClass: {
+        type: "themeResetClass"
+      },
+      side: {
+        type: "choice",
+        options: ["top", "bottom", "left", "right"],
+        defaultValueHint: "bottom"
+      },
+      sideOffset: {
+        type: "number",
+        defaultValueHint: 4,
+        advanced: true
+      },
+      align: {
+        type: "choice",
+        options: ["center", "start", "end"],
+        defaultValueHint: "center"
+      },
+      alignOffset: {
+        type: "number",
+        defaultValueHint: 0,
+        advanced: true
+      },
+      overlay: _extends({
+        type: "slot",
+        defaultValue: {
+          type: "vbox",
+          styles: {
+            padding: "16px",
+            width: "300px",
+            maxWidth: "100%",
+            borderWidth: "1px",
+            borderStyle: "solid",
+            borderColor: "#E2E8F0",
+            backgroundColor: "white",
+            borderRadius: "8px",
+            boxShadow: "0px 4px 16px 0px #00000033",
+            alignItems: "stretch"
+          },
+          children: ["Hello World"]
+        }
+      }, {
+        mergeWithParent: true
+      }),
+      children: _extends({
+        type: "slot",
+        defaultValue: ["Popover here"]
+      }, {
+        mergeWithParent: true
+      })
+    }, animPropTypes({
+      defaultEnterAnimations: function defaultEnterAnimations() {
+        return ["fade-in", "zoom-enter"];
+      },
+      defaultExitAnimations: function defaultExitAnimations() {
+        return ["fade-out", "zoom-exit"];
+      }
+    }), {
+      slideIn: {
+        type: "boolean",
+        defaultValueHint: true,
+        description: "Add additional subtle slide-in animation on reveal, which can depend on where the popover is dynamically placed."
+      }
+    })
+  });
+}
+
+var _excluded$1 = ["className"],
+  _excluded2 = ["className", "themeResetClass"],
+  _excluded3 = ["className", "themeResetClass", "side"],
+  _excluded4 = ["open", "onOpenChange", "modal", "className", "themeResetClass", "children", "noContain", "defaultOpen"];
+function prefixClasses(x) {
+  return x.trim().split(/\s+/g).map(function (part) {
+    return "plsmc__" + part;
+  }).join(" ");
+}
+var baseSty = /*#__PURE__*/"\n.sr-only {\n  position: absolute;\n  width: 1px;\n  height: 1px;\n  padding: 0;\n  margin: -1px;\n  overflow: hidden;\n  clip: rect(0, 0, 0, 0);\n  white-space: nowrap;\n  border-width: 0;\n}\n.absolute {\n    position: absolute;\n}\n.relative {\n    position: relative;\n}\n.transition {\n    transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, -webkit-backdrop-filter;\n}\n.h-full {\n    height: 100%;\n}\n.z-50 { z-index: 50;  }\n.fixed { position: fixed; }\n.inset-0 { top: 0; left: 0; right: 0; bottom: 0; }\n.bottom-0 {\n    bottom: 0px;\n}\n.left-0 {\n    left: 0px;\n}\n.right-0 {\n    right: 0px;\n}\n.top-0 {\n    top: 0px;\n}\n.right-4 {\n    right: 1rem;\n}\n.top-4 {\n    top: 1rem;\n}\n.h-4 { height: 1rem; }\n.w-4 { width: 1rem; }\n.outline-none { outline: none; }\n\n@keyframes plsmc-enter {\n\n    from {\n        opacity: var(--tw-enter-opacity, 1);\n        transform: translate3d(var(--tw-enter-translate-x, 0), var(--tw-enter-translate-y, 0), 0) scale3d(var(--tw-enter-scale, 1), var(--tw-enter-scale, 1), var(--tw-enter-scale, 1)) rotate(var(--tw-enter-rotate, 0));\n    }\n}\n\n@keyframes plsmc-exit {\n\n    to {\n        opacity: var(--tw-exit-opacity, 1);\n        transform: translate3d(var(--tw-exit-translate-x, 0), var(--tw-exit-translate-y, 0), 0) scale3d(var(--tw-exit-scale, 1), var(--tw-exit-scale, 1), var(--tw-exit-scale, 1)) rotate(var(--tw-exit-rotate, 0));\n    }\n}\n.data-\\[state\\=open\\]\\:animate-in[data-state=open] {\n  animation-name: plsmc-enter;\n  animation-duration: 150ms;\n  --tw-enter-opacity: initial;\n  --tw-enter-scale: initial;\n  --tw-enter-rotate: initial;\n  --tw-enter-translate-x: initial;\n  --tw-enter-translate-y: initial;\n}\n.data-\\[state\\=closed\\]\\:animate-out[data-state=closed] {\n  animation-name: plsmc-exit;\n  animation-duration: 150ms;\n  --tw-exit-opacity: initial;\n  --tw-exit-scale: initial;\n  --tw-exit-rotate: initial;\n  --tw-exit-translate-x: initial;\n  --tw-exit-translate-y: initial;\n}\n.data-\\[side\\=bottom\\]\\:slide-in-from-top-2[data-side=bottom] {\n    --tw-enter-translate-y: -0.5rem;\n}\n\n.data-\\[side\\=left\\]\\:slide-in-from-right-2[data-side=left] {\n    --tw-enter-translate-x: 0.5rem;\n}\n\n.data-\\[side\\=right\\]\\:slide-in-from-left-2[data-side=right] {\n    --tw-enter-translate-x: -0.5rem;\n}\n\n.data-\\[side\\=top\\]\\:slide-in-from-bottom-2[data-side=top] {\n    --tw-enter-translate-y: 0.5rem;\n}\n\n".replace(/\n\./g, ".plsmc__");
+var DialogClose = /*#__PURE__*/forwardRef(function (props) {
+  var _props$children;
+  return createElement(Close, Object.assign({}, props), (_props$children = props.children) != null ? _props$children : createElement(X, {
+    className: prefixClasses("h-4 w-4") + " " + props.className
+  }), createElement("span", {
+    className: "sr-only"
+  }, "Close"));
+});
+DialogClose.displayName = Close.displayName;
+var DialogOverlay = /*#__PURE__*/forwardRef(function (_ref, ref) {
+  var className = _ref.className,
+    props = _objectWithoutPropertiesLoose(_ref, _excluded$1);
+  return createElement(Animated, Object.assign({}, props), function (plsmcId) {
+    return createElement(Overlay, Object.assign({
+      className: clsx(["fixed inset-0 z-50 data-[state=open]:animate-in data-[state=closed]:animate-out"].map(prefixClasses), plsmcId ? plsmcId : "", className)
+    }, props, {
+      ref: ref
+    }));
+  });
+});
+DialogOverlay.displayName = Overlay.displayName;
+var DialogContent = /*#__PURE__*/forwardRef(function (_ref2, ref) {
+  var _animProps$enterAnima, _animProps$exitAnimat;
+  var className = _ref2.className,
+    themeResetClass = _ref2.themeResetClass,
+    props = _objectWithoutPropertiesLoose(_ref2, _excluded2);
+  var _splitAnimProps = splitAnimProps(props),
+    animProps = _splitAnimProps[0],
+    rest = _splitAnimProps[1];
+  return createElement(Animated, Object.assign({}, animProps, {
+    enterAnimations: (_animProps$enterAnima = animProps.enterAnimations) != null ? _animProps$enterAnima : ["zoom-enter", "fade-in"],
+    exitAnimations: (_animProps$exitAnimat = animProps.exitAnimations) != null ? _animProps$exitAnimat : ["zoom-exit", "fade-out"]
+  }), function (dynClass) {
+    return createElement(Content$1, Object.assign({}, rest, {
+      className: clsx("fixed z-50 data-[state=open]:animate-in data-[state=closed]:animate-out", dynClass ? dynClass : "", themeResetClass, className),
+      ref: ref
+    }));
+  });
+});
+DialogContent.displayName = Content$1.displayName;
+function getDefaultSheetAnims(side) {
+  if (side === void 0) {
+    side = "right";
+  }
+  return {
+    right: ["slide-in-from-right", "slide-out-to-right"],
+    bottom: ["slide-in-from-bottom", "slide-out-to-bottom"],
+    left: ["slide-in-from-left", "slide-out-to-left"],
+    top: ["slide-in-from-top", "slide-out-to-top"]
+  }[side];
+}
+var SheetContent = /*#__PURE__*/forwardRef(function (_ref3, ref) {
+  var _props$enterAnimation, _props$exitAnimations;
+  var className = _ref3.className,
+    _ref3$side = _ref3.side,
+    side = _ref3$side === void 0 ? "right" : _ref3$side,
+    props = _objectWithoutPropertiesLoose(_ref3, _excluded3);
+  var _getDefaultSheetAnims = getDefaultSheetAnims(side != null ? side : "right"),
+    defaultEnterAnimation = _getDefaultSheetAnims[0],
+    defaultExitAnimation = _getDefaultSheetAnims[1];
+  return createElement(Animated, Object.assign({}, props, {
+    enterAnimations: (_props$enterAnimation = props.enterAnimations) != null ? _props$enterAnimation : [defaultEnterAnimation],
+    exitAnimations: (_props$exitAnimations = props.exitAnimations) != null ? _props$exitAnimations : [defaultExitAnimation]
+  }), function (plsmcId) {
+    return createElement(Content$1, Object.assign({
+      className: clsx(sheetVariants({
+        side: side
+      }), plsmcId ? plsmcId : "", className)
+    }, props, {
+      ref: ref
+    }));
+  });
+});
+SheetContent.displayName = Content$1.displayName;
+var sheetVariants = /*#__PURE__*/cva( /*#__PURE__*/prefixClasses("fixed z-50 data-[state=open]:animate-in data-[state=closed]:animate-out"), {
+  variants: {
+    side: {
+      top: /*#__PURE__*/prefixClasses("inset-x-0 top-0"),
+      bottom: /*#__PURE__*/prefixClasses("inset-x-0 bottom-0"),
+      left: /*#__PURE__*/prefixClasses("inset-y-0 left-0 h-full"),
+      right: /*#__PURE__*/prefixClasses("inset-y-0 right-0 h-full")
+    }
+  },
+  defaultVariants: {
+    side: "right"
+  }
+});
+var Dialog = /*#__PURE__*/forwardRef(function (_ref4, ref) {
+  var open = _ref4.open,
+    onOpenChange = _ref4.onOpenChange,
+    modal = _ref4.modal,
+    className = _ref4.className,
+    themeResetClass = _ref4.themeResetClass,
+    children = _ref4.children,
+    noContain = _ref4.noContain,
+    defaultOpen = _ref4.defaultOpen,
+    props = _objectWithoutPropertiesLoose(_ref4, _excluded4);
+  return createElement(Root$1, {
+    open: open,
+    modal: modal,
+    onOpenChange: onOpenChange,
+    defaultOpen: defaultOpen
+  }, createElement(Portal$1, null, noContain ? createElement(Fragment, null, createElement(DialogOverlay, Object.assign({}, props, {
+    className: clsx(className, themeResetClass)
+  })), children) : createElement(DialogOverlay, Object.assign({}, props, {
+    className: clsx(className, themeResetClass)
+  }), children)), createElement("style", null, baseSty));
+});
+Dialog.displayName = Root$1.displayName;
+var DialogTitle = Title;
+var DialogDescription = Description;
+function registerDialog(PLASMIC) {
+  registerComponentHelper(PLASMIC, Dialog, {
+    name: "hostless-radix-dialog",
+    displayName: "Dialog",
+    importPath: "@plasmicpkgs/radix-ui/dialog",
+    importName: "Dialog",
+    defaultStyles: {
+      // Note: unable to set position styles since Plasmic coerces to auto layout
+      display: "flex",
+      alignItems: "center",
+      justifyContent: "center",
+      backdropFilter: "blur(10px)",
+      background: "rgba(255,255,255,0.8)"
+    },
+    props: _extends({}, popoverProps, {
+      noContain: {
+        type: "boolean",
+        advanced: true,
+        description: "Place the dialog content over the overlay instead of inside the overlay. Useful for separating their animations, but you also won't be able to conveniently set layout on the overlay as a parent."
+      },
+      themeResetClass: {
+        type: "themeResetClass"
+      },
+      children: {
+        type: "slot",
+        allowedComponents: ["hostless-radix-sheet-content", "hostless-radix-dialog-content"],
+        defaultValue: {
+          type: "component",
+          name: "hostless-radix-dialog-content"
+        }
+      }
+    })
+  });
+  registerComponentHelper(PLASMIC, DialogClose, {
+    name: "hostless-radix-dialog-close",
+    displayName: "Dialog Close",
+    importPath: "@plasmicpkgs/radix-ui/dialog",
+    importName: "DialogClose",
+    parentComponentName: "hostless-radix-dialog",
+    defaultStyles: {
+      position: "absolute",
+      top: "16px",
+      right: "16px",
+      opacity: "0.7",
+      borderRadius: "999px"
+    },
+    props: {
+      children: {
+        type: "slot",
+        hidePlaceholder: true
+      }
+    }
+  });
+  var dialogStyles = {
+    width: "400px",
+    maxWidth: "100%",
+    background: "rgb(255,255,255)",
+    borderWidth: "1px",
+    borderStyle: "solid",
+    borderColor: "#E2E8F0",
+    boxShadow: "0px 4px 16px 0px #00000033"
+  };
+  registerComponentHelper(PLASMIC, SheetContent, {
+    name: "hostless-radix-sheet-content",
+    displayName: "Drawer Content",
+    importPath: "@plasmicpkgs/radix-ui/dialog",
+    importName: "SheetContent",
+    parentComponentName: "hostless-radix-dialog",
+    defaultStyles: _extends({
+      // Positions can sometimes take effect since these can be implicitly inserted as children of other default content, thus escaping Plasmic's layout coersion.
+      position: "fixed",
+      top: 0,
+      right: 0,
+      bottom: 0,
+      padding: "16px"
+    }, dialogStyles),
+    props: _extends({
+      side: {
+        type: "choice",
+        options: ["right", "bottom", "left", "top"],
+        defaultValueHint: "right"
+      },
+      themeResetClass: {
+        type: "themeResetClass"
+      },
+      children: {
+        type: "slot",
+        defaultValue: [{
+          type: "vbox",
+          styles: {
+            alignItems: "stretch",
+            gap: "8px"
+          },
+          children: [{
+            type: "component",
+            name: "hostless-radix-dialog-title"
+          }, {
+            type: "component",
+            name: "hostless-radix-dialog-description"
+          }]
+        }, {
+          type: "component",
+          name: "hostless-radix-dialog-close"
+        }]
+      }
+    }, animPropTypes({
+      defaultEnterAnimations: function defaultEnterAnimations(ps) {
+        return [getDefaultSheetAnims(ps.side)[0]];
+      },
+      defaultExitAnimations: function defaultExitAnimations(ps) {
+        return [getDefaultSheetAnims(ps.side)[1]];
+      }
+    }))
+  });
+  registerComponentHelper(PLASMIC, DialogContent, {
+    name: "hostless-radix-dialog-content",
+    displayName: "Dialog Content",
+    importPath: "@plasmicpkgs/radix-ui/dialog",
+    importName: "DialogContent",
+    parentComponentName: "hostless-radix-dialog",
+    defaultStyles: _extends({
+      // No need for position here, just relying on layout container parent.
+      padding: "24px",
+      borderRadius: "8px"
+    }, dialogStyles),
+    props: _extends({
+      themeResetClass: {
+        type: "themeResetClass"
+      },
+      children: {
+        type: "slot",
+        defaultValue: [{
+          type: "vbox",
+          styles: {
+            alignItems: "stretch",
+            gap: "8px"
+          },
+          children: [{
+            type: "component",
+            name: "hostless-radix-dialog-title"
+          }, {
+            type: "component",
+            name: "hostless-radix-dialog-description"
+          }]
+        }, {
+          type: "component",
+          name: "hostless-radix-dialog-close"
+        }]
+      }
+    }, animPropTypes({
+      defaultEnterAnimations: function defaultEnterAnimations() {
+        return ["zoom-enter", "fade-in"];
+      },
+      defaultExitAnimations: function defaultExitAnimations() {
+        return ["zoom-exit", "fade-out"];
+      }
+    }))
+  });
+  registerComponentHelper(PLASMIC, DialogTitle, {
+    name: "hostless-radix-dialog-title",
+    displayName: "Dialog Title",
+    importPath: "@plasmicpkgs/radix-ui/dialog",
+    importName: "DialogTitle",
+    parentComponentName: "hostless-radix-dialog",
+    props: {
+      children: {
+        type: "slot",
+        defaultValue: "Sheet title"
+      }
+    }
+  });
+  registerComponentHelper(PLASMIC, DialogDescription, {
+    name: "hostless-radix-dialog-description",
+    displayName: "Dialog Description",
+    importPath: "@plasmicpkgs/radix-ui/dialog",
+    importName: "DialogDescription",
+    parentComponentName: "hostless-radix-dialog",
+    props: {
+      children: {
+        type: "slot",
+        defaultValue: "Sheet description"
+      }
+    }
+  });
+}
+
+function registerAll(PLASMIC) {
+  registerPopover(PLASMIC);
+  registerDialog(PLASMIC);
+}
+
+export { Dialog, DialogClose, DialogContent, DialogDescription, DialogTitle, Popover, SheetContent, prefixClasses, registerAll, registerDialog, registerPopover, sheetVariants };
+//# sourceMappingURL=radix-ui.esm.js.map