@plasmicpkgs/radix-ui 0.0.2

package/dist/radix-ui.cjs.development.js

@@ -0,0 +1,730 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+function _interopDefault (ex) { return (ex && (typeof ex === 'object') && 'default' in ex) ? ex['default'] : ex; }
+
+var React = require('react');
+var PopoverPrimitive = require('@radix-ui/react-popover');
+var clsx = _interopDefault(require('clsx'));
+var remeda = require('remeda');
+var registerComponent = _interopDefault(require('@plasmicapp/host/registerComponent'));
+require('@plasmicapp/host/registerGlobalContext');
+var DialogPrimitive = require('@radix-ui/react-dialog');
+var classVarianceAuthority = require('class-variance-authority');
+var lucideReact = require('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 = React.useId) != null ? _React$useId : function () {
+  return React.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 React.createElement(React.Fragment, null, children(dynClass), React.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 React.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 = remeda.pick(props, keys);
+  var b = remeda.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 React.createElement(Animated, Object.assign({
+    enterAnimations: ["fade-in", "zoom-enter"],
+    exitAnimations: ["fade-out", "zoom-exit"]
+  }, animProps), function (plsmcId) {
+    return React.createElement(PopoverPrimitive.Root, {
+      open: open,
+      onOpenChange: onOpenChange,
+      defaultOpen: defaultOpen,
+      modal: modal
+    }, trigger ? React.createElement(PopoverPrimitive.Trigger, null, children) : React.createElement(PopoverPrimitive.Anchor, null, children), React.createElement(PopoverPrimitive.Portal, null, React.createElement(PopoverPrimitive.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 = PopoverPrimitive.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__*/React.forwardRef(function (props) {
+  var _props$children;
+  return React.createElement(DialogPrimitive.Close, Object.assign({}, props), (_props$children = props.children) != null ? _props$children : React.createElement(lucideReact.X, {
+    className: prefixClasses("h-4 w-4") + " " + props.className
+  }), React.createElement("span", {
+    className: "sr-only"
+  }, "Close"));
+});
+DialogClose.displayName = DialogPrimitive.Close.displayName;
+var DialogOverlay = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
+  var className = _ref.className,
+    props = _objectWithoutPropertiesLoose(_ref, _excluded$1);
+  return React.createElement(Animated, Object.assign({}, props), function (plsmcId) {
+    return React.createElement(DialogPrimitive.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 = DialogPrimitive.Overlay.displayName;
+var DialogContent = /*#__PURE__*/React.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 React.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 React.createElement(DialogPrimitive.Content, 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 = DialogPrimitive.Content.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__*/React.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 React.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 React.createElement(DialogPrimitive.Content, Object.assign({
+      className: clsx(sheetVariants({
+        side: side
+      }), plsmcId ? plsmcId : "", className)
+    }, props, {
+      ref: ref
+    }));
+  });
+});
+SheetContent.displayName = DialogPrimitive.Content.displayName;
+var sheetVariants = /*#__PURE__*/classVarianceAuthority.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__*/React.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 React.createElement(DialogPrimitive.Root, {
+    open: open,
+    modal: modal,
+    onOpenChange: onOpenChange,
+    defaultOpen: defaultOpen
+  }, React.createElement(DialogPrimitive.Portal, null, noContain ? React.createElement(React.Fragment, null, React.createElement(DialogOverlay, Object.assign({}, props, {
+    className: clsx(className, themeResetClass)
+  })), children) : React.createElement(DialogOverlay, Object.assign({}, props, {
+    className: clsx(className, themeResetClass)
+  }), children)), React.createElement("style", null, baseSty));
+});
+Dialog.displayName = DialogPrimitive.Root.displayName;
+var DialogTitle = DialogPrimitive.Title;
+var DialogDescription = DialogPrimitive.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);
+}
+
+exports.Dialog = Dialog;
+exports.DialogClose = DialogClose;
+exports.DialogContent = DialogContent;
+exports.DialogDescription = DialogDescription;
+exports.DialogTitle = DialogTitle;
+exports.Popover = Popover;
+exports.SheetContent = SheetContent;
+exports.prefixClasses = prefixClasses;
+exports.registerAll = registerAll;
+exports.registerDialog = registerDialog;
+exports.registerPopover = registerPopover;
+exports.sheetVariants = sheetVariants;
+//# sourceMappingURL=radix-ui.cjs.development.js.map