@plasmicpkgs/react-aria 0.0.65 → 0.0.66

package/dist/react-aria.js

@@ -7,7 +7,6 @@ var host = require('@plasmicapp/host');
 var reactAria = require('react-aria');
 var utils = require('@react-aria/utils');
 var flattenChildren = require('react-keyed-flatten-children');
-var reactStately = require('react-stately');
 
 function _interopDefault (e) { return e && e.__esModule ? e : { default: e }; }
 
@@ -16,8 +15,8 @@ var registerComponent__default = /*#__PURE__*/_interopDefault(registerComponent)
 var flattenChildren__default = /*#__PURE__*/_interopDefault(flattenChildren);
 
 var __defProp$r = Object.defineProperty;
-var __defProps$g = Object.defineProperties;
-var __getOwnPropDescs$g = Object.getOwnPropertyDescriptors;
+var __defProps$h = Object.defineProperties;
+var __getOwnPropDescs$h = Object.getOwnPropertyDescriptors;
 var __getOwnPropSymbols$r = Object.getOwnPropertySymbols;
 var __hasOwnProp$r = Object.prototype.hasOwnProperty;
 var __propIsEnum$r = Object.prototype.propertyIsEnumerable;
@@ -33,16 +32,16 @@ var __spreadValues$r = (a, b) => {
     }
   return a;
 };
-var __spreadProps$g = (a, b) => __defProps$g(a, __getOwnPropDescs$g(b));
+var __spreadProps$h = (a, b) => __defProps$h(a, __getOwnPropDescs$h(b));
 function registerComponentHelper(loader, component, meta, overrides) {
   var _a;
-  meta = __spreadProps$g(__spreadValues$r({}, meta), {
+  meta = __spreadProps$h(__spreadValues$r({}, meta), {
     defaultStyles: __spreadValues$r({
       boxSizing: "border-box"
     }, (_a = meta.defaultStyles) != null ? _a : {})
   });
   if (overrides) {
-    meta = __spreadProps$g(__spreadValues$r(__spreadValues$r({}, meta), overrides), {
+    meta = __spreadProps$h(__spreadValues$r(__spreadValues$r({}, meta), overrides), {
       props: __spreadValues$r(__spreadValues$r({}, meta.props), overrides.props)
     });
     if (overrides.parentComponentName) {
@@ -458,6 +457,22 @@ const ARIA_COMPONENTS_VARIANTS = {
   indeterminate: {
     cssSelector: "[data-indeterminate]",
     displayName: "Indeterminate"
+  },
+  placementLeft: {
+    cssSelector: "[data-placement]=left",
+    displayName: "Placement (Left)"
+  },
+  placementRight: {
+    cssSelector: "[data-placement]=right",
+    displayName: "Placement (Right)"
+  },
+  placementTop: {
+    cssSelector: "[data-placement]=top",
+    displayName: "Placement (Top)"
+  },
+  placementBottom: {
+    cssSelector: "[data-placement]=bottom",
+    displayName: "Placement (Bottom)"
   }
 };
 function ChangesObserver({
@@ -485,8 +500,8 @@ function pickAriaComponentVariants(keys) {
 }
 
 var __defProp$q = Object.defineProperty;
-var __defProps$f = Object.defineProperties;
-var __getOwnPropDescs$f = Object.getOwnPropertyDescriptors;
+var __defProps$g = Object.defineProperties;
+var __getOwnPropDescs$g = Object.getOwnPropertyDescriptors;
 var __getOwnPropSymbols$q = Object.getOwnPropertySymbols;
 var __hasOwnProp$q = Object.prototype.hasOwnProperty;
 var __propIsEnum$q = Object.prototype.propertyIsEnumerable;
@@ -502,8 +517,8 @@ var __spreadValues$q = (a, b) => {
     }
   return a;
 };
-var __spreadProps$f = (a, b) => __defProps$f(a, __getOwnPropDescs$f(b));
-var __objRest$o = (source, exclude) => {
+var __spreadProps$g = (a, b) => __defProps$g(a, __getOwnPropDescs$g(b));
+var __objRest$n = (source, exclude) => {
   var target = {};
   for (var prop in source)
     if (__hasOwnProp$q.call(source, prop) && exclude.indexOf(prop) < 0)
@@ -522,22 +537,24 @@ const BUTTON_VARIANTS = [
   "focusVisible",
   "disabled"
 ];
-const { variants: variants$d, withObservedValues: withObservedValues$b } = pickAriaComponentVariants(BUTTON_VARIANTS);
-function BaseButton(props) {
-  const _a = props, { submitsForm, resetsForm, children, plasmicUpdateVariant } = _a, rest = __objRest$o(_a, ["submitsForm", "resetsForm", "children", "plasmicUpdateVariant"]);
-  const type = submitsForm ? "submit" : resetsForm ? "reset" : "button";
-  return /* @__PURE__ */ React__default.default.createElement(reactAriaComponents.Button, __spreadValues$q({ type }, rest), ({ isHovered, isPressed, isFocused, isFocusVisible, isDisabled }) => withObservedValues$b(
-    children,
-    {
-      hovered: isHovered,
-      pressed: isPressed,
-      focused: isFocused,
-      focusVisible: isFocusVisible,
-      disabled: isDisabled
-    },
-    plasmicUpdateVariant
-  ));
-}
+const { variants: variants$e, withObservedValues: withObservedValues$c } = pickAriaComponentVariants(BUTTON_VARIANTS);
+const BaseButton = React__default.default.forwardRef(
+  (props, ref) => {
+    const _a = props, { submitsForm, resetsForm, children, plasmicUpdateVariant } = _a, rest = __objRest$n(_a, ["submitsForm", "resetsForm", "children", "plasmicUpdateVariant"]);
+    const type = submitsForm ? "submit" : resetsForm ? "reset" : "button";
+    return /* @__PURE__ */ React__default.default.createElement(reactAriaComponents.Button, __spreadValues$q({ type, ref }, rest), ({ isHovered, isPressed, isFocused, isFocusVisible, isDisabled }) => withObservedValues$c(
+      children,
+      {
+        hovered: isHovered,
+        pressed: isPressed,
+        focused: isFocused,
+        focusVisible: isFocusVisible,
+        disabled: isDisabled
+      },
+      plasmicUpdateVariant
+    ));
+  }
+);
 const BUTTON_COMPONENT_NAME = makeComponentName("button");
 function registerButton(loader, overrides) {
   registerComponentHelper(
@@ -548,7 +565,7 @@ function registerButton(loader, overrides) {
       displayName: "Aria Button",
       importPath: "@plasmicpkgs/react-aria/skinny/registerButton",
       importName: "BaseButton",
-      variants: variants$d,
+      variants: variants$e,
       defaultStyles: {
         borderWidth: "1px",
         borderStyle: "solid",
@@ -556,7 +573,7 @@ function registerButton(loader, overrides) {
         padding: "2px 10px",
         cursor: "pointer"
       },
-      props: __spreadProps$f(__spreadValues$q({}, getCommonProps("button", [
+      props: __spreadProps$g(__spreadValues$q({}, getCommonProps("button", [
         "autoFocus",
         "isDisabled",
         "aria-label"
@@ -608,8 +625,8 @@ React__default.default.createContext(void 0);
 const PlasmicInputContext = React__default.default.createContext(void 0);
 
 var __defProp$p = Object.defineProperty;
-var __defProps$e = Object.defineProperties;
-var __getOwnPropDescs$e = Object.getOwnPropertyDescriptors;
+var __defProps$f = Object.defineProperties;
+var __getOwnPropDescs$f = Object.getOwnPropertyDescriptors;
 var __getOwnPropSymbols$p = Object.getOwnPropertySymbols;
 var __hasOwnProp$p = Object.prototype.hasOwnProperty;
 var __propIsEnum$p = Object.prototype.propertyIsEnumerable;
@@ -625,8 +642,8 @@ var __spreadValues$p = (a, b) => {
     }
   return a;
 };
-var __spreadProps$e = (a, b) => __defProps$e(a, __getOwnPropDescs$e(b));
-var __objRest$n = (source, exclude) => {
+var __spreadProps$f = (a, b) => __defProps$f(a, __getOwnPropDescs$f(b));
+var __objRest$m = (source, exclude) => {
   var target = {};
   for (var prop in source)
     if (__hasOwnProp$p.call(source, prop) && exclude.indexOf(prop) < 0)
@@ -649,9 +666,9 @@ const CHECKBOX_VARIANTS = [
   "readonly",
   "selected"
 ];
-const { variants: variants$c, withObservedValues: withObservedValues$a } = pickAriaComponentVariants(CHECKBOX_VARIANTS);
+const { variants: variants$d, withObservedValues: withObservedValues$b } = pickAriaComponentVariants(CHECKBOX_VARIANTS);
 function BaseCheckbox(props) {
-  const _a = props, { children, plasmicUpdateVariant, setControlContextData } = _a, rest = __objRest$n(_a, ["children", "plasmicUpdateVariant", "setControlContextData"]);
+  const _a = props, { children, plasmicUpdateVariant, setControlContextData } = _a, rest = __objRest$m(_a, ["children", "plasmicUpdateVariant", "setControlContextData"]);
   const contextProps = React__default.default.useContext(PlasmicCheckboxGroupContext);
   setControlContextData == null ? void 0 : setControlContextData({
     parent: contextProps
@@ -665,7 +682,7 @@ function BaseCheckbox(props) {
     isIndeterminate,
     isSelected,
     isReadOnly
-  }) => withObservedValues$a(
+  }) => withObservedValues$b(
     children,
     {
       hovered: isHovered,
@@ -735,8 +752,8 @@ function registerCheckbox(loader, overrides) {
       displayName: "Aria Checkbox",
       importPath: "@plasmicpkgs/react-aria/skinny/registerCheckbox",
       importName: "BaseCheckbox",
-      variants: variants$c,
-      props: __spreadProps$e(__spreadValues$p({}, getCommonProps("checkbox", [
+      variants: variants$d,
+      props: __spreadProps$f(__spreadValues$p({}, getCommonProps("checkbox", [
         "name",
         "isDisabled",
         "isReadOnly",
@@ -805,8 +822,8 @@ function registerCheckbox(loader, overrides) {
 }
 
 var __defProp$o = Object.defineProperty;
-var __defProps$d = Object.defineProperties;
-var __getOwnPropDescs$d = Object.getOwnPropertyDescriptors;
+var __defProps$e = Object.defineProperties;
+var __getOwnPropDescs$e = Object.getOwnPropertyDescriptors;
 var __getOwnPropSymbols$o = Object.getOwnPropertySymbols;
 var __hasOwnProp$o = Object.prototype.hasOwnProperty;
 var __propIsEnum$o = Object.prototype.propertyIsEnumerable;
@@ -822,8 +839,8 @@ var __spreadValues$o = (a, b) => {
     }
   return a;
 };
-var __spreadProps$d = (a, b) => __defProps$d(a, __getOwnPropDescs$d(b));
-var __objRest$m = (source, exclude) => {
+var __spreadProps$e = (a, b) => __defProps$e(a, __getOwnPropDescs$e(b));
+var __objRest$l = (source, exclude) => {
   var target = {};
   for (var prop in source)
     if (__hasOwnProp$o.call(source, prop) && exclude.indexOf(prop) < 0)
@@ -836,8 +853,8 @@ var __objRest$m = (source, exclude) => {
   return target;
 };
 function BaseText(_a) {
-  var _b = _a, { children, slot, className } = _b, rest = __objRest$m(_b, ["children", "slot", "className"]);
-  return /* @__PURE__ */ React__default.default.createElement(reactAriaComponents.Text, __spreadProps$d(__spreadValues$o({}, extractPlasmicDataProps(rest)), { slot, className }), children);
+  var _b = _a, { children, slot, className } = _b, rest = __objRest$l(_b, ["children", "slot", "className"]);
+  return /* @__PURE__ */ React__default.default.createElement(reactAriaComponents.Text, __spreadProps$e(__spreadValues$o({}, extractPlasmicDataProps(rest)), { slot, className }), children);
 }
 const TEXT_COMPONENT_NAME = makeComponentName("text");
 function registerText(loader, overrides) {
@@ -872,8 +889,8 @@ function registerText(loader, overrides) {
 }
 
 var __defProp$n = Object.defineProperty;
-var __defProps$c = Object.defineProperties;
-var __getOwnPropDescs$c = Object.getOwnPropertyDescriptors;
+var __defProps$d = Object.defineProperties;
+var __getOwnPropDescs$d = Object.getOwnPropertyDescriptors;
 var __getOwnPropSymbols$n = Object.getOwnPropertySymbols;
 var __hasOwnProp$n = Object.prototype.hasOwnProperty;
 var __propIsEnum$n = Object.prototype.propertyIsEnumerable;
@@ -889,10 +906,10 @@ var __spreadValues$n = (a, b) => {
     }
   return a;
 };
-var __spreadProps$c = (a, b) => __defProps$c(a, __getOwnPropDescs$c(b));
+var __spreadProps$d = (a, b) => __defProps$d(a, __getOwnPropDescs$d(b));
 const DESCRIPTION_COMPONENT_NAME = makeComponentName("description");
 function registerDescription(loader, overrides) {
-  return registerText(loader, __spreadProps$c(__spreadValues$n({}, overrides), {
+  return registerText(loader, __spreadProps$d(__spreadValues$n({}, overrides), {
     name: DESCRIPTION_COMPONENT_NAME,
     displayName: "Aria Description",
     props: {
@@ -921,7 +938,7 @@ var __spreadValues$m = (a, b) => {
     }
   return a;
 };
-var __objRest$l = (source, exclude) => {
+var __objRest$k = (source, exclude) => {
   var target = {};
   for (var prop in source)
     if (__hasOwnProp$m.call(source, prop) && exclude.indexOf(prop) < 0)
@@ -945,7 +962,7 @@ function BaseFieldError(_a) {
     tooShort,
     typeMismatch,
     valueMissing
-  } = _b, rest = __objRest$l(_b, [
+  } = _b, rest = __objRest$k(_b, [
     "badInput",
     "customError",
     "patternMismatch",
@@ -1065,8 +1082,8 @@ function registerFieldError(loader, overrides) {
 }
 
 var __defProp$l = Object.defineProperty;
-var __defProps$b = Object.defineProperties;
-var __getOwnPropDescs$b = Object.getOwnPropertyDescriptors;
+var __defProps$c = Object.defineProperties;
+var __getOwnPropDescs$c = Object.getOwnPropertyDescriptors;
 var __getOwnPropSymbols$l = Object.getOwnPropertySymbols;
 var __hasOwnProp$l = Object.prototype.hasOwnProperty;
 var __propIsEnum$l = Object.prototype.propertyIsEnumerable;
@@ -1082,8 +1099,8 @@ var __spreadValues$l = (a, b) => {
     }
   return a;
 };
-var __spreadProps$b = (a, b) => __defProps$b(a, __getOwnPropDescs$b(b));
-var __objRest$k = (source, exclude) => {
+var __spreadProps$c = (a, b) => __defProps$c(a, __getOwnPropDescs$c(b));
+var __objRest$j = (source, exclude) => {
   var target = {};
   for (var prop in source)
     if (__hasOwnProp$l.call(source, prop) && exclude.indexOf(prop) < 0)
@@ -1096,8 +1113,8 @@ var __objRest$k = (source, exclude) => {
   return target;
 };
 function BaseLabel(_a) {
-  var _b = _a, { children, className } = _b, rest = __objRest$k(_b, ["children", "className"]);
-  return /* @__PURE__ */ React__default.default.createElement(reactAriaComponents.Label, __spreadProps$b(__spreadValues$l({}, extractPlasmicDataProps(rest)), { className }), children);
+  var _b = _a, { children, className } = _b, rest = __objRest$j(_b, ["children", "className"]);
+  return /* @__PURE__ */ React__default.default.createElement(reactAriaComponents.Label, __spreadProps$c(__spreadValues$l({}, extractPlasmicDataProps(rest)), { className }), children);
 }
 const LABEL_COMPONENT_NAME = makeComponentName("label");
 function registerLabel(loader, overrides) {
@@ -1129,8 +1146,8 @@ function registerLabel(loader, overrides) {
 }
 
 var __defProp$k = Object.defineProperty;
-var __defProps$a = Object.defineProperties;
-var __getOwnPropDescs$a = Object.getOwnPropertyDescriptors;
+var __defProps$b = Object.defineProperties;
+var __getOwnPropDescs$b = Object.getOwnPropertyDescriptors;
 var __getOwnPropSymbols$k = Object.getOwnPropertySymbols;
 var __hasOwnProp$k = Object.prototype.hasOwnProperty;
 var __propIsEnum$k = Object.prototype.propertyIsEnumerable;
@@ -1146,8 +1163,8 @@ var __spreadValues$k = (a, b) => {
     }
   return a;
 };
-var __spreadProps$a = (a, b) => __defProps$a(a, __getOwnPropDescs$a(b));
-var __objRest$j = (source, exclude) => {
+var __spreadProps$b = (a, b) => __defProps$b(a, __getOwnPropDescs$b(b));
+var __objRest$i = (source, exclude) => {
   var target = {};
   for (var prop in source)
     if (__hasOwnProp$k.call(source, prop) && exclude.indexOf(prop) < 0)
@@ -1160,12 +1177,12 @@ var __objRest$j = (source, exclude) => {
   return target;
 };
 const CHECKBOX_GROUP_VARIANTS = ["disabled", "readonly"];
-const { variants: variants$b, withObservedValues: withObservedValues$9 } = pickAriaComponentVariants(
+const { variants: variants$c, withObservedValues: withObservedValues$a } = pickAriaComponentVariants(
   CHECKBOX_GROUP_VARIANTS
 );
 function BaseCheckboxGroup(props) {
-  const _a = props, { children, plasmicUpdateVariant } = _a, rest = __objRest$j(_a, ["children", "plasmicUpdateVariant"]);
-  return /* @__PURE__ */ React__default.default.createElement(PlasmicCheckboxGroupContext.Provider, { value: rest }, /* @__PURE__ */ React__default.default.createElement(reactAriaComponents.CheckboxGroup, __spreadValues$k({}, rest), ({ isDisabled, isReadOnly }) => withObservedValues$9(
+  const _a = props, { children, plasmicUpdateVariant } = _a, rest = __objRest$i(_a, ["children", "plasmicUpdateVariant"]);
+  return /* @__PURE__ */ React__default.default.createElement(PlasmicCheckboxGroupContext.Provider, { value: rest }, /* @__PURE__ */ React__default.default.createElement(reactAriaComponents.CheckboxGroup, __spreadValues$k({}, rest), ({ isDisabled, isReadOnly }) => withObservedValues$a(
     children,
     {
       disabled: isDisabled,
@@ -1193,8 +1210,8 @@ function registerCheckboxGroup(loader, overrides) {
       displayName: "Aria Checkbox Group",
       importPath: "@plasmicpkgs/react-aria/skinny/registerCheckboxGroup",
       importName: "BaseCheckboxGroup",
-      variants: variants$b,
-      props: __spreadProps$a(__spreadValues$k({}, getCommonProps("checkbox group", [
+      variants: variants$c,
+      props: __spreadProps$b(__spreadValues$k({}, getCommonProps("checkbox group", [
         "name",
         "isDisabled",
         "isReadOnly",
@@ -1374,7 +1391,7 @@ var __spreadValues$j = (a, b) => {
     }
   return a;
 };
-var __objRest$i = (source, exclude) => {
+var __objRest$h = (source, exclude) => {
   var target = {};
   for (var prop in source)
     if (__hasOwnProp$j.call(source, prop) && exclude.indexOf(prop) < 0)
@@ -1391,7 +1408,7 @@ const INPUT_VARIANTS = [
   "hovered",
   "disabled"
 ];
-const { variants: variants$a } = pickAriaComponentVariants(INPUT_VARIANTS);
+const { variants: variants$b } = pickAriaComponentVariants(INPUT_VARIANTS);
 const inputHelpers$1 = {
   states: {
     value: {
@@ -1409,7 +1426,7 @@ function BaseInput(props) {
     disabled,
     autoComplete,
     value
-  } = _a, rest = __objRest$i(_a, [
+  } = _a, rest = __objRest$h(_a, [
     "plasmicUpdateVariant",
     "setControlContextData",
     "disabled",
@@ -1472,7 +1489,7 @@ function registerInput(loader, overrides) {
       displayName: "Aria Input",
       importPath: "@plasmicpkgs/react-aria/skinny/registerInput",
       importName: "BaseInput",
-      variants: variants$a,
+      variants: variants$b,
       defaultStyles: {
         width: "300px",
         borderWidth: "1px",
@@ -1544,7 +1561,7 @@ var __spreadValues$i = (a, b) => {
     }
   return a;
 };
-var __objRest$h = (source, exclude) => {
+var __objRest$g = (source, exclude) => {
   var target = {};
   for (var prop in source)
     if (__hasOwnProp$i.call(source, prop) && exclude.indexOf(prop) < 0)
@@ -1564,11 +1581,11 @@ const LIST_BOX_ITEM_VARIANTS = [
   "selected",
   "disabled"
 ];
-const { variants: variants$9, withObservedValues: withObservedValues$8 } = pickAriaComponentVariants(
+const { variants: variants$a, withObservedValues: withObservedValues$9 } = pickAriaComponentVariants(
   LIST_BOX_ITEM_VARIANTS
 );
 function BaseListBoxItem(props) {
-  const _a = props, { children, setControlContextData, plasmicUpdateVariant, id } = _a, rest = __objRest$h(_a, ["children", "setControlContextData", "plasmicUpdateVariant", "id"]);
+  const _a = props, { children, setControlContextData, plasmicUpdateVariant, id } = _a, rest = __objRest$g(_a, ["children", "setControlContextData", "plasmicUpdateVariant", "id"]);
   const listboxContext = React__default.default.useContext(PlasmicListBoxContext);
   const isStandalone = !listboxContext;
   const [registeredId, setRegisteredId] = React.useState();
@@ -1607,7 +1624,7 @@ function BaseListBoxItem(props) {
     isFocusVisible,
     isSelected,
     isDisabled
-  }) => withObservedValues$8(
+  }) => withObservedValues$9(
     children,
     {
       hovered: isHovered,
@@ -1670,7 +1687,7 @@ function registerListBoxItem(loader, overrides) {
       displayName: "Aria ListBoxItem",
       importPath: "@plasmicpkgs/react-aria/skinny/registerListBoxItem",
       importName: "BaseListBoxItem",
-      variants: variants$9,
+      variants: variants$a,
       props: {
         id: {
           type: "string",
@@ -1717,7 +1734,7 @@ var __spreadValues$h = (a, b) => {
     }
   return a;
 };
-var __objRest$g = (source, exclude) => {
+var __objRest$f = (source, exclude) => {
   var target = {};
   for (var prop in source)
     if (__hasOwnProp$h.call(source, prop) && exclude.indexOf(prop) < 0)
@@ -1730,7 +1747,7 @@ var __objRest$g = (source, exclude) => {
   return target;
 };
 function BaseSection(props) {
-  const _a = props, { header, items } = _a, rest = __objRest$g(_a, ["header", "items"]);
+  const _a = props, { header, items } = _a, rest = __objRest$f(_a, ["header", "items"]);
   const contextProps = React__default.default.useContext(PlasmicListBoxContext);
   const mergedProps = utils.mergeProps(contextProps, rest);
   return /* @__PURE__ */ React__default.default.createElement(reactAriaComponents.Section, __spreadValues$h({}, mergedProps), /* @__PURE__ */ React__default.default.createElement(reactAriaComponents.Header, null, header), items);
@@ -1786,7 +1803,7 @@ var __spreadValues$g = (a, b) => {
     }
   return a;
 };
-var __objRest$f = (source, exclude) => {
+var __objRest$e = (source, exclude) => {
   var target = {};
   for (var prop in source)
     if (__hasOwnProp$g.call(source, prop) && exclude.indexOf(prop) < 0)
@@ -1816,7 +1833,7 @@ function BaseListBox(props) {
     children,
     selectedKeys,
     defaultSelectedKeys
-  } = _a, rest = __objRest$f(_a, [
+  } = _a, rest = __objRest$e(_a, [
     "setControlContextData",
     "children",
     "selectedKeys",
@@ -2049,7 +2066,7 @@ var __spreadValues$f = (a, b) => {
     }
   return a;
 };
-var __objRest$e = (source, exclude) => {
+var __objRest$d = (source, exclude) => {
   var target = {};
   for (var prop in source)
     if (__hasOwnProp$f.call(source, prop) && exclude.indexOf(prop) < 0)
@@ -2063,7 +2080,7 @@ var __objRest$e = (source, exclude) => {
 };
 function BasePopover(props) {
   var _b;
-  const _a = props, { resetClassName, setControlContextData } = _a, restProps = __objRest$e(_a, ["resetClassName", "setControlContextData"]);
+  const _a = props, { resetClassName, setControlContextData } = _a, restProps = __objRest$d(_a, ["resetClassName", "setControlContextData"]);
   const isStandalone = !React__default.default.useContext(reactAriaComponents.PopoverContext);
   const context = React__default.default.useContext(PlasmicPopoverContext);
   const triggerRef = React__default.default.useRef(null);
@@ -2197,8 +2214,8 @@ function registerPopover(loader, overrides) {
 }
 
 var __defProp$e = Object.defineProperty;
-var __defProps$9 = Object.defineProperties;
-var __getOwnPropDescs$9 = Object.getOwnPropertyDescriptors;
+var __defProps$a = Object.defineProperties;
+var __getOwnPropDescs$a = Object.getOwnPropertyDescriptors;
 var __getOwnPropSymbols$e = Object.getOwnPropertySymbols;
 var __hasOwnProp$e = Object.prototype.hasOwnProperty;
 var __propIsEnum$e = Object.prototype.propertyIsEnumerable;
@@ -2214,8 +2231,8 @@ var __spreadValues$e = (a, b) => {
     }
   return a;
 };
-var __spreadProps$9 = (a, b) => __defProps$9(a, __getOwnPropDescs$9(b));
-var __objRest$d = (source, exclude) => {
+var __spreadProps$a = (a, b) => __defProps$a(a, __getOwnPropDescs$a(b));
+var __objRest$c = (source, exclude) => {
   var target = {};
   for (var prop in source)
     if (__hasOwnProp$e.call(source, prop) && exclude.indexOf(prop) < 0)
@@ -2246,7 +2263,7 @@ function ComboboxAutoOpen(props) {
   return null;
 }
 function BaseComboBox(props) {
-  const _a = props, { children, setControlContextData, isOpen } = _a, rest = __objRest$d(_a, ["children", "setControlContextData", "isOpen"]);
+  const _a = props, { children, setControlContextData, isOpen } = _a, rest = __objRest$c(_a, ["children", "setControlContextData", "isOpen"]);
   const idManager = React.useMemo(() => new ListBoxItemIdManager(), []);
   React.useEffect(() => {
     idManager.subscribe((ids) => {
@@ -2277,7 +2294,7 @@ function registerComboBox(loader) {
     displayName: "Aria ComboBox",
     importPath: "@plasmicpkgs/react-aria/skinny/registerComboBox",
     importName: "BaseComboBox",
-    props: __spreadProps$9(__spreadValues$e({}, getCommonProps("ComboBox", [
+    props: __spreadProps$a(__spreadValues$e({}, getCommonProps("ComboBox", [
       "name",
       "aria-label",
       "placeholder",
@@ -2427,7 +2444,7 @@ var __spreadValues$d = (a, b) => {
     }
   return a;
 };
-var __objRest$c = (source, exclude) => {
+var __objRest$b = (source, exclude) => {
   var target = {};
   for (var prop in source)
     if (__hasOwnProp$d.call(source, prop) && exclude.indexOf(prop) < 0)
@@ -2440,7 +2457,7 @@ var __objRest$c = (source, exclude) => {
   return target;
 };
 function BaseHeading(_a) {
-  var _b = _a, { children } = _b, rest = __objRest$c(_b, ["children"]);
+  var _b = _a, { children } = _b, rest = __objRest$b(_b, ["children"]);
   return /* @__PURE__ */ React__default.default.createElement(reactAriaComponents.Heading, __spreadValues$d({}, rest), children);
 }
 const HEADING_COMPONENT_NAME = makeComponentName("heading");
@@ -2480,8 +2497,8 @@ function registerHeading(loader, overrides) {
 }
 
 var __defProp$c = Object.defineProperty;
-var __defProps$8 = Object.defineProperties;
-var __getOwnPropDescs$8 = Object.getOwnPropertyDescriptors;
+var __defProps$9 = Object.defineProperties;
+var __getOwnPropDescs$9 = Object.getOwnPropertyDescriptors;
 var __getOwnPropSymbols$c = Object.getOwnPropertySymbols;
 var __hasOwnProp$c = Object.prototype.hasOwnProperty;
 var __propIsEnum$c = Object.prototype.propertyIsEnumerable;
@@ -2497,8 +2514,8 @@ var __spreadValues$c = (a, b) => {
     }
   return a;
 };
-var __spreadProps$8 = (a, b) => __defProps$8(a, __getOwnPropDescs$8(b));
-var __objRest$b = (source, exclude) => {
+var __spreadProps$9 = (a, b) => __defProps$9(a, __getOwnPropDescs$9(b));
+var __objRest$a = (source, exclude) => {
   var target = {};
   for (var prop in source)
     if (__hasOwnProp$c.call(source, prop) && exclude.indexOf(prop) < 0)
@@ -2522,20 +2539,31 @@ const BaseModal = React.forwardRef(
       className,
       isOpen,
       resetClassName,
-      setControlContextData
-    } = _a, rest = __objRest$b(_a, [
+      setControlContextData,
+      isDismissable
+    } = _a, rest = __objRest$a(_a, [
       "children",
       "modalOverlayClass",
       "className",
       "isOpen",
       "resetClassName",
-      "setControlContextData"
+      "setControlContextData",
+      "isDismissable"
     ]);
     const { isSelected } = (_b = host.usePlasmicCanvasComponentInfo(props)) != null ? _b : {};
     const contextProps = React__default.default.useContext(PlasmicDialogTriggerContext);
     const isStandalone = !contextProps;
     const mergedProps = reactAria.mergeProps(contextProps, rest, {
-      isOpen: isStandalone ? isSelected || isOpen : contextProps.isOpen
+      isOpen: isStandalone ? isSelected || isOpen : contextProps.isOpen,
+      /*
+              isDismissable on canvas (non-interactive mode) causes the following two issues:
+              1. Clicking anywhere inside the modal dismisses it
+              2. If the modal is auto-opened due to selection in outline tab, the modal stays open despite issue #1, but the text elements inside the modal are no longer selectable, and therefore the text or headings inside the modal are not editable.
+      
+              To fix the above issue, we set an interim isDismissable state to false while the modal is auto-open (`isSelected` is true).
+              Also note that `isSelected` can only be true in canvas (non-interactive mode), so we can safely (temporarily) set `isDismissable` to false in this case, because it only matters in interactive mode.
+            */
+      isDismissable: isSelected ? false : isDismissable
     });
     setControlContextData == null ? void 0 : setControlContextData({
       parent: isStandalone ? void 0 : {}
@@ -2555,7 +2583,7 @@ const BaseModal = React.forwardRef(
     const bodyInPreview = /* @__PURE__ */ React__default.default.createElement(reactAriaComponents.Dialog, { style: INLINE_STYLES }, children);
     return /* @__PURE__ */ React__default.default.createElement(
       reactAriaComponents.ModalOverlay,
-      __spreadProps$8(__spreadValues$c({}, mergedProps), {
+      __spreadProps$9(__spreadValues$c({}, mergedProps), {
         className: `${resetClassName} ${modalOverlayClass}`
       }),
       /* @__PURE__ */ React__default.default.createElement(reactAriaComponents.Modal, { className }, isCanvas ? bodyInCanvas : bodyInPreview)
@@ -2677,8 +2705,8 @@ function registerModal(loader, overrides) {
 }
 
 var __defProp$b = Object.defineProperty;
-var __defProps$7 = Object.defineProperties;
-var __getOwnPropDescs$7 = Object.getOwnPropertyDescriptors;
+var __defProps$8 = Object.defineProperties;
+var __getOwnPropDescs$8 = Object.getOwnPropertyDescriptors;
 var __getOwnPropSymbols$b = Object.getOwnPropertySymbols;
 var __hasOwnProp$b = Object.prototype.hasOwnProperty;
 var __propIsEnum$b = Object.prototype.propertyIsEnumerable;
@@ -2694,8 +2722,8 @@ var __spreadValues$b = (a, b) => {
     }
   return a;
 };
-var __spreadProps$7 = (a, b) => __defProps$7(a, __getOwnPropDescs$7(b));
-var __objRest$a = (source, exclude) => {
+var __spreadProps$8 = (a, b) => __defProps$8(a, __getOwnPropDescs$8(b));
+var __objRest$9 = (source, exclude) => {
   var target = {};
   for (var prop in source)
     if (__hasOwnProp$b.call(source, prop) && exclude.indexOf(prop) < 0)
@@ -2709,10 +2737,10 @@ var __objRest$a = (source, exclude) => {
 };
 function BaseDialogTrigger(props) {
   var _b, _c;
-  const _a = props, { trigger, dialog, isOpen } = _a, rest = __objRest$a(_a, ["trigger", "dialog", "isOpen"]);
+  const _a = props, { trigger, dialog, isOpen } = _a, rest = __objRest$9(_a, ["trigger", "dialog", "isOpen"]);
   const { isSelected, selectedSlotName } = (_b = host.usePlasmicCanvasComponentInfo(props)) != null ? _b : {};
   const isAutoOpen = selectedSlotName !== "trigger" && isSelected;
-  const mergedProps = __spreadProps$7(__spreadValues$b({}, rest), {
+  const mergedProps = __spreadProps$8(__spreadValues$b({}, rest), {
     isOpen: (_c = isAutoOpen || isOpen) != null ? _c : false
   });
   return /* @__PURE__ */ React__default.default.createElement(PlasmicDialogTriggerContext.Provider, { value: mergedProps }, /* @__PURE__ */ React__default.default.createElement(reactAriaComponents.DialogTrigger, __spreadValues$b({}, mergedProps), trigger, dialog));
@@ -2776,8 +2804,8 @@ function registerDialogTrigger(loader, overrides) {
 }
 
 var __defProp$a = Object.defineProperty;
-var __defProps$6 = Object.defineProperties;
-var __getOwnPropDescs$6 = Object.getOwnPropertyDescriptors;
+var __defProps$7 = Object.defineProperties;
+var __getOwnPropDescs$7 = Object.getOwnPropertyDescriptors;
 var __getOwnPropSymbols$a = Object.getOwnPropertySymbols;
 var __hasOwnProp$a = Object.prototype.hasOwnProperty;
 var __propIsEnum$a = Object.prototype.propertyIsEnumerable;
@@ -2793,8 +2821,8 @@ var __spreadValues$a = (a, b) => {
     }
   return a;
 };
-var __spreadProps$6 = (a, b) => __defProps$6(a, __getOwnPropDescs$6(b));
-var __objRest$9 = (source, exclude) => {
+var __spreadProps$7 = (a, b) => __defProps$7(a, __getOwnPropDescs$7(b));
+var __objRest$8 = (source, exclude) => {
   var target = {};
   for (var prop in source)
     if (__hasOwnProp$a.call(source, prop) && exclude.indexOf(prop) < 0)
@@ -2816,9 +2844,9 @@ const RADIO_VARIANTS = [
   "readonly",
   "selected"
 ];
-const { variants: variants$8, withObservedValues: withObservedValues$7 } = pickAriaComponentVariants(RADIO_VARIANTS);
+const { variants: variants$9, withObservedValues: withObservedValues$8 } = pickAriaComponentVariants(RADIO_VARIANTS);
 function BaseRadio(props) {
-  const _a = props, { children, setControlContextData, plasmicUpdateVariant } = _a, rest = __objRest$9(_a, ["children", "setControlContextData", "plasmicUpdateVariant"]);
+  const _a = props, { children, setControlContextData, plasmicUpdateVariant } = _a, rest = __objRest$8(_a, ["children", "setControlContextData", "plasmicUpdateVariant"]);
   const contextProps = React__default.default.useContext(PlasmicRadioGroupContext);
   const isStandalone = !contextProps;
   setControlContextData == null ? void 0 : setControlContextData({
@@ -2832,7 +2860,7 @@ function BaseRadio(props) {
     isSelected,
     isDisabled,
     isReadOnly
-  }) => withObservedValues$7(
+  }) => withObservedValues$8(
     children,
     {
       hovered: isHovered,
@@ -2891,8 +2919,8 @@ function registerRadio(loader, overrides) {
       displayName: "Aria Radio",
       importPath: "@plasmicpkgs/react-aria/skinny/registerRadio",
       importName: "BaseRadio",
-      variants: variants$8,
-      props: __spreadProps$6(__spreadValues$a({}, getCommonProps("radio", [
+      variants: variants$9,
+      props: __spreadProps$7(__spreadValues$a({}, getCommonProps("radio", [
         "isDisabled",
         "autoFocus",
         "aria-label"
@@ -2914,8 +2942,8 @@ function registerRadio(loader, overrides) {
 }
 
 var __defProp$9 = Object.defineProperty;
-var __defProps$5 = Object.defineProperties;
-var __getOwnPropDescs$5 = Object.getOwnPropertyDescriptors;
+var __defProps$6 = Object.defineProperties;
+var __getOwnPropDescs$6 = Object.getOwnPropertyDescriptors;
 var __getOwnPropSymbols$9 = Object.getOwnPropertySymbols;
 var __hasOwnProp$9 = Object.prototype.hasOwnProperty;
 var __propIsEnum$9 = Object.prototype.propertyIsEnumerable;
@@ -2931,8 +2959,8 @@ var __spreadValues$9 = (a, b) => {
     }
   return a;
 };
-var __spreadProps$5 = (a, b) => __defProps$5(a, __getOwnPropDescs$5(b));
-var __objRest$8 = (source, exclude) => {
+var __spreadProps$6 = (a, b) => __defProps$6(a, __getOwnPropDescs$6(b));
+var __objRest$7 = (source, exclude) => {
   var target = {};
   for (var prop in source)
     if (__hasOwnProp$9.call(source, prop) && exclude.indexOf(prop) < 0)
@@ -2945,10 +2973,10 @@ var __objRest$8 = (source, exclude) => {
   return target;
 };
 const RADIO_GROUP_VARIANTS = ["disabled", "readonly"];
-const { variants: variants$7, withObservedValues: withObservedValues$6 } = pickAriaComponentVariants(RADIO_GROUP_VARIANTS);
+const { variants: variants$8, withObservedValues: withObservedValues$7 } = pickAriaComponentVariants(RADIO_GROUP_VARIANTS);
 function BaseRadioGroup(props) {
-  const _a = props, { children, plasmicUpdateVariant } = _a, rest = __objRest$8(_a, ["children", "plasmicUpdateVariant"]);
-  return /* @__PURE__ */ React__default.default.createElement(PlasmicRadioGroupContext.Provider, { value: props }, /* @__PURE__ */ React__default.default.createElement(reactAriaComponents.RadioGroup, __spreadValues$9({}, rest), ({ isDisabled, isReadOnly }) => withObservedValues$6(
+  const _a = props, { children, plasmicUpdateVariant } = _a, rest = __objRest$7(_a, ["children", "plasmicUpdateVariant"]);
+  return /* @__PURE__ */ React__default.default.createElement(PlasmicRadioGroupContext.Provider, { value: props }, /* @__PURE__ */ React__default.default.createElement(reactAriaComponents.RadioGroup, __spreadValues$9({}, rest), ({ isDisabled, isReadOnly }) => withObservedValues$7(
     children,
     {
       disabled: isDisabled,
@@ -2974,8 +3002,8 @@ function registerRadioGroup(loader, overrides) {
       displayName: "Aria RadioGroup",
       importPath: "@plasmicpkgs/react-aria/skinny/registerRadioGroup",
       importName: "BaseRadioGroup",
-      variants: variants$7,
-      props: __spreadProps$5(__spreadValues$9({}, getCommonProps("radio group", [
+      variants: variants$8,
+      props: __spreadProps$6(__spreadValues$9({}, getCommonProps("radio group", [
         "name",
         "isDisabled",
         "isReadOnly",
@@ -3081,8 +3109,8 @@ function registerRadioGroup(loader, overrides) {
 }
 
 var __defProp$8 = Object.defineProperty;
-var __defProps$4 = Object.defineProperties;
-var __getOwnPropDescs$4 = Object.getOwnPropertyDescriptors;
+var __defProps$5 = Object.defineProperties;
+var __getOwnPropDescs$5 = Object.getOwnPropertyDescriptors;
 var __getOwnPropSymbols$8 = Object.getOwnPropertySymbols;
 var __hasOwnProp$8 = Object.prototype.hasOwnProperty;
 var __propIsEnum$8 = Object.prototype.propertyIsEnumerable;
@@ -3098,7 +3126,7 @@ var __spreadValues$8 = (a, b) => {
     }
   return a;
 };
-var __spreadProps$4 = (a, b) => __defProps$4(a, __getOwnPropDescs$4(b));
+var __spreadProps$5 = (a, b) => __defProps$5(a, __getOwnPropDescs$5(b));
 const BaseSelectValue = (props) => {
   const { children, customize } = props;
   return /* @__PURE__ */ React__default.default.createElement(reactAriaComponents.SelectValue, null, ({ isPlaceholder, selectedText }) => /* @__PURE__ */ React__default.default.createElement(React__default.default.Fragment, null, isPlaceholder ? /* @__PURE__ */ React__default.default.createElement("span", null, "Select an item") : /* @__PURE__ */ React__default.default.createElement(React__default.default.Fragment, null, /* @__PURE__ */ React__default.default.createElement("span", null, customize ? children : selectedText))));
@@ -3202,7 +3230,7 @@ function registerSelect(loader) {
     displayName: "Aria Select",
     importPath: "@plasmicpkgs/react-aria/skinny/registerSelect",
     importName: "BaseSelect",
-    props: __spreadProps$4(__spreadValues$8({}, getCommonProps("Select", [
+    props: __spreadProps$5(__spreadValues$8({}, getCommonProps("Select", [
       "name",
       "aria-label",
       "placeholder",
@@ -3359,7 +3387,7 @@ var __spreadValues$7 = (a, b) => {
     }
   return a;
 };
-var __objRest$7 = (source, exclude) => {
+var __objRest$6 = (source, exclude) => {
   var target = {};
   for (var prop in source)
     if (__hasOwnProp$7.call(source, prop) && exclude.indexOf(prop) < 0)
@@ -3372,12 +3400,12 @@ var __objRest$7 = (source, exclude) => {
   return target;
 };
 const SLIDER_OUTPUT_VARIANTS = ["disabled"];
-const { variants: variants$6, withObservedValues: withObservedValues$5 } = pickAriaComponentVariants(
+const { variants: variants$7, withObservedValues: withObservedValues$6 } = pickAriaComponentVariants(
   SLIDER_OUTPUT_VARIANTS
 );
 function BaseSliderOutput(props) {
-  const _a = props, { plasmicUpdateVariant, children } = _a, rest = __objRest$7(_a, ["plasmicUpdateVariant", "children"]);
-  return /* @__PURE__ */ React__default.default.createElement(reactAriaComponents.SliderOutput, __spreadValues$7({}, rest), ({ isDisabled }) => withObservedValues$5(
+  const _a = props, { plasmicUpdateVariant, children } = _a, rest = __objRest$6(_a, ["plasmicUpdateVariant", "children"]);
+  return /* @__PURE__ */ React__default.default.createElement(reactAriaComponents.SliderOutput, __spreadValues$7({}, rest), ({ isDisabled }) => withObservedValues$6(
     children,
     {
       disabled: isDisabled
@@ -3395,7 +3423,7 @@ function registerSliderOutput(loader, overrides) {
       displayName: "Aria Slider Output",
       importPath: "@plasmicpkgs/react-aria/skinny/registerSliderOutput",
       importName: "BaseSliderOutput",
-      variants: variants$6,
+      variants: variants$7,
       props: {
         children: {
           mergeWithParent: true,
@@ -3425,8 +3453,8 @@ class ErrorBoundary extends React.Component {
 }
 
 var __defProp$6 = Object.defineProperty;
-var __defProps$3 = Object.defineProperties;
-var __getOwnPropDescs$3 = Object.getOwnPropertyDescriptors;
+var __defProps$4 = Object.defineProperties;
+var __getOwnPropDescs$4 = Object.getOwnPropertyDescriptors;
 var __getOwnPropSymbols$6 = Object.getOwnPropertySymbols;
 var __hasOwnProp$6 = Object.prototype.hasOwnProperty;
 var __propIsEnum$6 = Object.prototype.propertyIsEnumerable;
@@ -3442,8 +3470,8 @@ var __spreadValues$6 = (a, b) => {
     }
   return a;
 };
-var __spreadProps$3 = (a, b) => __defProps$3(a, __getOwnPropDescs$3(b));
-var __objRest$6 = (source, exclude) => {
+var __spreadProps$4 = (a, b) => __defProps$4(a, __getOwnPropDescs$4(b));
+var __objRest$5 = (source, exclude) => {
   var target = {};
   for (var prop in source)
     if (__hasOwnProp$6.call(source, prop) && exclude.indexOf(prop) < 0)
@@ -3462,7 +3490,7 @@ const SLIDER_THUMB_VARIANTS = [
   "focusVisible",
   "disabled"
 ];
-const { variants: variants$5, withObservedValues: withObservedValues$4 } = pickAriaComponentVariants(
+const { variants: variants$6, withObservedValues: withObservedValues$5 } = pickAriaComponentVariants(
   SLIDER_THUMB_VARIANTS
 );
 function BaseSliderThumb(_a) {
@@ -3470,14 +3498,14 @@ function BaseSliderThumb(_a) {
     children,
     advanced,
     plasmicUpdateVariant
-  } = _b, rest = __objRest$6(_b, [
+  } = _b, rest = __objRest$5(_b, [
     "children",
     "advanced",
     "plasmicUpdateVariant"
   ]);
   const context = React__default.default.useContext(PlasmicSliderContext);
   const mergedProps = reactAria.mergeProps(context, rest);
-  const thumb = /* @__PURE__ */ React__default.default.createElement(reactAriaComponents.SliderThumb, __spreadValues$6({}, mergedProps), ({ isDragging, isHovered, isFocused, isFocusVisible, isDisabled }) => withObservedValues$4(
+  const thumb = /* @__PURE__ */ React__default.default.createElement(reactAriaComponents.SliderThumb, __spreadValues$6({}, mergedProps), ({ isDragging, isHovered, isFocused, isFocusVisible, isDisabled }) => withObservedValues$5(
     /* @__PURE__ */ React__default.default.createElement(React__default.default.Fragment, null, advanced ? children : void 0),
     {
       dragging: isDragging,
@@ -3515,8 +3543,8 @@ function registerSliderThumb(loader, overrides) {
         borderRadius: "100%",
         cursor: "pointer"
       },
-      variants: variants$5,
-      props: __spreadProps$3(__spreadValues$6({}, getCommonProps("slider thumb", [
+      variants: variants$6,
+      props: __spreadProps$4(__spreadValues$6({}, getCommonProps("slider thumb", [
         "name",
         "isDisabled",
         "autoFocus"
@@ -3554,7 +3582,7 @@ var __spreadValues$5 = (a, b) => {
     }
   return a;
 };
-var __objRest$5 = (source, exclude) => {
+var __objRest$4 = (source, exclude) => {
   var target = {};
   for (var prop in source)
     if (__hasOwnProp$5.call(source, prop) && exclude.indexOf(prop) < 0)
@@ -3567,7 +3595,7 @@ var __objRest$5 = (source, exclude) => {
   return target;
 };
 const SLIDER_TRACK_VARIANTS = ["hovered"];
-const { variants: variants$4, withObservedValues: withObservedValues$3 } = pickAriaComponentVariants(
+const { variants: variants$5, withObservedValues: withObservedValues$4 } = pickAriaComponentVariants(
   SLIDER_TRACK_VARIANTS
 );
 function findMinMaxIndices(values) {
@@ -3592,7 +3620,7 @@ function BaseSliderTrack(props) {
   const context = React__default.default.useContext(PlasmicSliderContext);
   const isStandalone = !context;
   const mergedProps = reactAria.mergeProps(context, props);
-  const _a = mergedProps, { children, progressBar, plasmicUpdateVariant } = _a, rest = __objRest$5(_a, ["children", "progressBar", "plasmicUpdateVariant"]);
+  const _a = mergedProps, { children, progressBar, plasmicUpdateVariant } = _a, rest = __objRest$4(_a, ["children", "progressBar", "plasmicUpdateVariant"]);
   const isMultiValue = isMultiValueGuard(mergedProps.value);
   const { minIndex, maxIndex } = React.useMemo(() => {
     if (!context || !Array.isArray(context.value) || context.value.length <= 1) {
@@ -3624,7 +3652,7 @@ function BaseSliderTrack(props) {
       });
     });
   }, [children, context == null ? void 0 : context.value]);
-  const track = /* @__PURE__ */ React__default.default.createElement(reactAriaComponents.SliderTrack, __spreadValues$5({ style: { position: "relative" } }, rest), ({ state, isHovered }) => /* @__PURE__ */ React__default.default.createElement(React__default.default.Fragment, null, withObservedValues$3(
+  const track = /* @__PURE__ */ React__default.default.createElement(reactAriaComponents.SliderTrack, __spreadValues$5({ style: { position: "relative" } }, rest), ({ state, isHovered }) => /* @__PURE__ */ React__default.default.createElement(React__default.default.Fragment, null, withObservedValues$4(
     /* @__PURE__ */ React__default.default.createElement(React__default.default.Fragment, null, /* @__PURE__ */ React__default.default.createElement(
       "div",
       {
@@ -3658,7 +3686,7 @@ function registerSliderTrack(sliderThumbMeta, loader, overrides) {
       displayName: "Aria Slider Track",
       importPath: "@plasmicpkgs/react-aria/skinny/registerSliderTrack",
       importName: "BaseSliderTrack",
-      variants: variants$4,
+      variants: variants$5,
       defaultStyles: {
         width: "stretch",
         backgroundColor: "#aaa",
@@ -3720,8 +3748,8 @@ function registerSliderTrack(sliderThumbMeta, loader, overrides) {
 }
 
 var __defProp$4 = Object.defineProperty;
-var __defProps$2 = Object.defineProperties;
-var __getOwnPropDescs$2 = Object.getOwnPropertyDescriptors;
+var __defProps$3 = Object.defineProperties;
+var __getOwnPropDescs$3 = Object.getOwnPropertyDescriptors;
 var __getOwnPropSymbols$4 = Object.getOwnPropertySymbols;
 var __hasOwnProp$4 = Object.prototype.hasOwnProperty;
 var __propIsEnum$4 = Object.prototype.propertyIsEnumerable;
@@ -3737,8 +3765,8 @@ var __spreadValues$4 = (a, b) => {
     }
   return a;
 };
-var __spreadProps$2 = (a, b) => __defProps$2(a, __getOwnPropDescs$2(b));
-var __objRest$4 = (source, exclude) => {
+var __spreadProps$3 = (a, b) => __defProps$3(a, __getOwnPropDescs$3(b));
+var __objRest$3 = (source, exclude) => {
   var target = {};
   for (var prop in source)
     if (__hasOwnProp$4.call(source, prop) && exclude.indexOf(prop) < 0)
@@ -3753,19 +3781,19 @@ var __objRest$4 = (source, exclude) => {
 const SLIDER_COMPONENT_NAME = makeComponentName("slider");
 const RANGE_SLIDER_COMPONENT_NAME = makeComponentName("range-slider");
 const SLIDER_VARIANTS = ["disabled"];
-const { variants: variants$3, withObservedValues: withObservedValues$2 } = pickAriaComponentVariants(SLIDER_VARIANTS);
+const { variants: variants$4, withObservedValues: withObservedValues$3 } = pickAriaComponentVariants(SLIDER_VARIANTS);
 function BaseSlider(props) {
-  const _a = props, { children, plasmicUpdateVariant } = _a, rest = __objRest$4(_a, ["children", "plasmicUpdateVariant"]);
+  const _a = props, { children, plasmicUpdateVariant } = _a, rest = __objRest$3(_a, ["children", "plasmicUpdateVariant"]);
   return /* @__PURE__ */ React__default.default.createElement(
     PlasmicSliderContext.Provider,
     {
-      value: __spreadProps$2(__spreadValues$4({}, rest), {
+      value: __spreadProps$3(__spreadValues$4({}, rest), {
         // Here's why the type casting is needed here: https://github.com/Microsoft/TypeScript/issues/3410
         onChange: rest.onChange,
         onChangeEnd: rest.onChangeEnd
       })
     },
-    /* @__PURE__ */ React__default.default.createElement(reactAriaComponents.Slider, __spreadValues$4({}, rest), ({ isDisabled }) => withObservedValues$2(
+    /* @__PURE__ */ React__default.default.createElement(reactAriaComponents.Slider, __spreadValues$4({}, rest), ({ isDisabled }) => withObservedValues$3(
       children,
       {
         disabled: isDisabled
@@ -3817,11 +3845,11 @@ function registerSlider(loader, overrides) {
       displayName: "Aria Range Slider",
       importPath: "@plasmicpkgs/react-aria/skinny/registerSlider",
       importName: "BaseSlider",
-      variants: variants$3,
+      variants: variants$4,
       defaultStyles: {
         width: "300px"
       },
-      props: __spreadProps$2(__spreadValues$4(__spreadValues$4({}, getCommonProps("slider", [
+      props: __spreadProps$3(__spreadValues$4(__spreadValues$4({}, getCommonProps("slider", [
         "isDisabled",
         "aria-label"
       ])), getCommonSliderProps()), {
@@ -3929,11 +3957,11 @@ function registerSlider(loader, overrides) {
       displayName: "Aria Slider",
       importPath: "@plasmicpkgs/react-aria/skinny/registerSlider",
       importName: "BaseSlider",
-      variants: variants$3,
+      variants: variants$4,
       defaultStyles: {
         width: "300px"
       },
-      props: __spreadProps$2(__spreadValues$4(__spreadValues$4({}, getCommonProps("slider", [
+      props: __spreadProps$3(__spreadValues$4(__spreadValues$4({}, getCommonProps("slider", [
         "isDisabled",
         "aria-label"
       ])), getCommonSliderProps()), {
@@ -4009,8 +4037,8 @@ function registerSlider(loader, overrides) {
 }
 
 var __defProp$3 = Object.defineProperty;
-var __defProps$1 = Object.defineProperties;
-var __getOwnPropDescs$1 = Object.getOwnPropertyDescriptors;
+var __defProps$2 = Object.defineProperties;
+var __getOwnPropDescs$2 = Object.getOwnPropertyDescriptors;
 var __getOwnPropSymbols$3 = Object.getOwnPropertySymbols;
 var __hasOwnProp$3 = Object.prototype.hasOwnProperty;
 var __propIsEnum$3 = Object.prototype.propertyIsEnumerable;
@@ -4026,8 +4054,8 @@ var __spreadValues$3 = (a, b) => {
     }
   return a;
 };
-var __spreadProps$1 = (a, b) => __defProps$1(a, __getOwnPropDescs$1(b));
-var __objRest$3 = (source, exclude) => {
+var __spreadProps$2 = (a, b) => __defProps$2(a, __getOwnPropDescs$2(b));
+var __objRest$2 = (source, exclude) => {
   var target = {};
   for (var prop in source)
     if (__hasOwnProp$3.call(source, prop) && exclude.indexOf(prop) < 0)
@@ -4048,9 +4076,9 @@ const SWITCH_VARIANTS = [
   "disabled",
   "readonly"
 ];
-const { variants: variants$2, withObservedValues: withObservedValues$1 } = pickAriaComponentVariants(SWITCH_VARIANTS);
+const { variants: variants$3, withObservedValues: withObservedValues$2 } = pickAriaComponentVariants(SWITCH_VARIANTS);
 function BaseSwitch(props) {
-  const _a = props, { children, plasmicUpdateVariant } = _a, rest = __objRest$3(_a, ["children", "plasmicUpdateVariant"]);
+  const _a = props, { children, plasmicUpdateVariant } = _a, rest = __objRest$2(_a, ["children", "plasmicUpdateVariant"]);
   return /* @__PURE__ */ React__default.default.createElement(reactAriaComponents.Switch, __spreadValues$3({}, rest), ({
     isHovered,
     isPressed,
@@ -4059,7 +4087,7 @@ function BaseSwitch(props) {
     isSelected,
     isDisabled,
     isReadOnly
-  }) => withObservedValues$1(
+  }) => withObservedValues$2(
     children,
     {
       hovered: isHovered,
@@ -4082,7 +4110,7 @@ function registerSwitch(loader, overrides) {
       displayName: "Aria Switch",
       importPath: "@plasmicpkgs/react-aria/skinny/registerSwitch",
       importName: "BaseSwitch",
-      variants: variants$2,
+      variants: variants$3,
       defaultStyles: {
         display: "flex",
         flexDirection: "column",
@@ -4090,7 +4118,7 @@ function registerSwitch(loader, overrides) {
         justifyContent: "flex-start",
         padding: 0
       },
-      props: __spreadProps$1(__spreadValues$3({}, getCommonProps("switch", [
+      props: __spreadProps$2(__spreadValues$3({}, getCommonProps("switch", [
         "name",
         "isDisabled",
         "isReadOnly",
@@ -4216,7 +4244,7 @@ var __spreadValues$2 = (a, b) => {
     }
   return a;
 };
-var __objRest$2 = (source, exclude) => {
+var __objRest$1 = (source, exclude) => {
   var target = {};
   for (var prop in source)
     if (__hasOwnProp$2.call(source, prop) && exclude.indexOf(prop) < 0)
@@ -4233,7 +4261,7 @@ const TEXTAREA_VARIANTS = [
   "hovered",
   "disabled"
 ];
-const { variants: variants$1 } = pickAriaComponentVariants(TEXTAREA_VARIANTS);
+const { variants: variants$2 } = pickAriaComponentVariants(TEXTAREA_VARIANTS);
 const inputHelpers = {
   states: {
     value: {
@@ -4245,7 +4273,7 @@ const inputHelpers = {
 };
 function BaseTextArea(props) {
   var _b;
-  const _a = props, { disabled, plasmicUpdateVariant, setControlContextData } = _a, rest = __objRest$2(_a, ["disabled", "plasmicUpdateVariant", "setControlContextData"]);
+  const _a = props, { disabled, plasmicUpdateVariant, setControlContextData } = _a, rest = __objRest$1(_a, ["disabled", "plasmicUpdateVariant", "setControlContextData"]);
   const textFieldContext = React__default.default.useContext(PlasmicTextFieldContext);
   const mergedProps = reactAria.mergeProps(rest, {
     disabled: (_b = textFieldContext == null ? void 0 : textFieldContext.isDisabled) != null ? _b : disabled
@@ -4288,7 +4316,7 @@ function registerTextArea(loader, overrides) {
       displayName: "Aria TextArea",
       importPath: "@plasmicpkgs/react-aria/skinny/registerTextArea",
       importName: "BaseTextArea",
-      variants: variants$1,
+      variants: variants$2,
       props: __spreadValues$2({}, getCommonProps("Text Area", [
         "name",
         "disabled",
@@ -4335,8 +4363,8 @@ function registerTextArea(loader, overrides) {
 }
 
 var __defProp$1 = Object.defineProperty;
-var __defProps = Object.defineProperties;
-var __getOwnPropDescs = Object.getOwnPropertyDescriptors;
+var __defProps$1 = Object.defineProperties;
+var __getOwnPropDescs$1 = Object.getOwnPropertyDescriptors;
 var __getOwnPropSymbols$1 = Object.getOwnPropertySymbols;
 var __hasOwnProp$1 = Object.prototype.hasOwnProperty;
 var __propIsEnum$1 = Object.prototype.propertyIsEnumerable;
@@ -4352,8 +4380,8 @@ var __spreadValues$1 = (a, b) => {
     }
   return a;
 };
-var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
-var __objRest$1 = (source, exclude) => {
+var __spreadProps$1 = (a, b) => __defProps$1(a, __getOwnPropDescs$1(b));
+var __objRest = (source, exclude) => {
   var target = {};
   for (var prop in source)
     if (__hasOwnProp$1.call(source, prop) && exclude.indexOf(prop) < 0)
@@ -4366,10 +4394,10 @@ var __objRest$1 = (source, exclude) => {
   return target;
 };
 const TEXT_FIELD_VARIANTS = ["disabled", "readonly"];
-const { variants, withObservedValues } = pickAriaComponentVariants(TEXT_FIELD_VARIANTS);
+const { variants: variants$1, withObservedValues: withObservedValues$1 } = pickAriaComponentVariants(TEXT_FIELD_VARIANTS);
 function BaseTextField(props) {
-  const _a = props, { children, plasmicUpdateVariant, autoComplete } = _a, rest = __objRest$1(_a, ["children", "plasmicUpdateVariant", "autoComplete"]);
-  return /* @__PURE__ */ React__default.default.createElement(PlasmicTextFieldContext.Provider, { value: props }, /* @__PURE__ */ React__default.default.createElement(reactAriaComponents.TextField, __spreadValues$1({ autoComplete: resolveAutoComplete(autoComplete) }, rest), ({ isDisabled, isReadOnly }) => withObservedValues(
+  const _a = props, { children, plasmicUpdateVariant, autoComplete } = _a, rest = __objRest(_a, ["children", "plasmicUpdateVariant", "autoComplete"]);
+  return /* @__PURE__ */ React__default.default.createElement(PlasmicTextFieldContext.Provider, { value: props }, /* @__PURE__ */ React__default.default.createElement(reactAriaComponents.TextField, __spreadValues$1({ autoComplete: resolveAutoComplete(autoComplete) }, rest), ({ isDisabled, isReadOnly }) => withObservedValues$1(
     children,
     {
       disabled: isDisabled,
@@ -4388,9 +4416,9 @@ function registerTextField(loader, overrides) {
       displayName: "Aria TextField",
       importPath: "@plasmicpkgs/react-aria/skinny/registerTextField",
       importName: "BaseTextField",
-      variants,
+      variants: variants$1,
       // TODO: Support for validate prop
-      props: __spreadProps(__spreadValues$1({}, getCommonProps("Text Field", [
+      props: __spreadProps$1(__spreadValues$1({}, getCommonProps("Text Field", [
         "name",
         "isDisabled",
         "isReadOnly",
@@ -4499,6 +4527,8 @@ function registerTextField(loader, overrides) {
 }
 
 var __defProp = Object.defineProperty;
+var __defProps = Object.defineProperties;
+var __getOwnPropDescs = Object.getOwnPropertyDescriptors;
 var __getOwnPropSymbols = Object.getOwnPropertySymbols;
 var __hasOwnProp = Object.prototype.hasOwnProperty;
 var __propIsEnum = Object.prototype.propertyIsEnumerable;
@@ -4514,48 +4544,90 @@ var __spreadValues = (a, b) => {
     }
   return a;
 };
-var __objRest = (source, exclude) => {
-  var target = {};
-  for (var prop in source)
-    if (__hasOwnProp.call(source, prop) && exclude.indexOf(prop) < 0)
-      target[prop] = source[prop];
-  if (source != null && __getOwnPropSymbols)
-    for (var prop of __getOwnPropSymbols(source)) {
-      if (exclude.indexOf(prop) < 0 && __propIsEnum.call(source, prop))
-        target[prop] = source[prop];
-    }
-  return target;
-};
-function BaseTooltip(props) {
-  var _b;
-  const _a = props, { children, tooltipContent, className, resetClassName } = _a, restProps = __objRest(_a, ["children", "tooltipContent", "className", "resetClassName"]);
-  const { isSelected, selectedSlotName } = (_b = host.usePlasmicCanvasComponentInfo(props)) != null ? _b : {};
-  const isAutoOpen = selectedSlotName !== "children" && isSelected;
-  const state = reactStately.useTooltipTriggerState(restProps);
+var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
+function isForwardRefComponent(element) {
+  var _a;
+  return ((_a = element == null ? void 0 : element.type) == null ? void 0 : _a.$$typeof) === Symbol.for("react.forward_ref");
+}
+const TOOLTIP_VARIANTS = [
+  "placementTop",
+  "placementBottom",
+  "placementLeft",
+  "placementRight"
+];
+const { variants, withObservedValues } = pickAriaComponentVariants(TOOLTIP_VARIANTS);
+function TooltipButton(props) {
   const ref = React__default.default.useRef(null);
-  const { triggerProps, tooltipProps } = reactAria.useTooltipTrigger(
-    restProps,
-    state,
+  const { buttonProps } = reactAria.useButton(props, ref);
+  const { children } = props;
+  if (!isForwardRefComponent(children)) {
+    return children;
+  }
+  return React__default.default.cloneElement(children, __spreadProps(__spreadValues({}, buttonProps), {
     ref
-  );
-  const hasContent = tooltipContent && tooltipContent.type.name !== "CanvasSlotPlaceholder";
+  }));
+}
+function BaseTooltip(props) {
+  var _a;
+  const {
+    children,
+    isDisabled,
+    delay,
+    closeDelay,
+    trigger,
+    isOpen,
+    defaultOpen,
+    tooltipContent,
+    resetClassName,
+    placement,
+    offset,
+    crossOffset,
+    shouldFlip,
+    arrowBoundaryOffset,
+    className,
+    onOpenChange,
+    plasmicUpdateVariant
+  } = props;
+  const { isSelected, selectedSlotName } = (_a = host.usePlasmicCanvasComponentInfo(props)) != null ? _a : {};
+  const isAutoOpen = selectedSlotName !== "children" && isSelected;
   const focusableChild = flattenChildren__default.default(children)[0];
+  const _isOpen = isAutoOpen || isOpen;
   return /* @__PURE__ */ React__default.default.createElement(
-    "div",
+    reactAriaComponents.TooltipTrigger,
     {
-      style: { position: "relative" },
-      className: resetClassName
+      isDisabled,
+      delay,
+      closeDelay,
+      trigger,
+      isOpen: _isOpen,
+      defaultOpen,
+      onOpenChange
     },
-    React__default.default.isValidElement(focusableChild) ? React__default.default.cloneElement(focusableChild, __spreadValues({
-      ref
-    }, utils.mergeProps(
-      focusableChild.props,
-      triggerProps
-    ))) : null,
-    (isAutoOpen || state.isOpen) && /* @__PURE__ */ React__default.default.createElement(React__default.default.Fragment, null, React__default.default.cloneElement(
-      hasContent ? tooltipContent : /* @__PURE__ */ React__default.default.createElement("p", null, "Add some content to the tooltip..."),
-      utils.mergeProps(tooltipProps, tooltipContent == null ? void 0 : tooltipContent.props.attrs, { className })
-    ))
+    /* @__PURE__ */ React__default.default.createElement(TooltipButton, null, focusableChild),
+    /* @__PURE__ */ React__default.default.createElement(
+      reactAriaComponents.Tooltip,
+      {
+        isOpen: _isOpen,
+        offset,
+        crossOffset,
+        shouldFlip,
+        arrowBoundaryOffset,
+        defaultOpen,
+        className: `${className} ${resetClassName}`,
+        onOpenChange,
+        placement
+      },
+      ({ placement: _placement }) => withObservedValues(
+        tooltipContent,
+        {
+          placementTop: _placement === "top",
+          placementBottom: _placement === "bottom",
+          placementLeft: _placement === "left",
+          placementRight: _placement === "right"
+        },
+        plasmicUpdateVariant
+      )
+    )
   );
 }
 function registerTooltip(loader, overrides) {
@@ -4569,14 +4641,18 @@ function registerTooltip(loader, overrides) {
       importName: "BaseTooltip",
       isAttachment: true,
       styleSections: true,
+      variants,
       props: {
         children: {
           type: "slot",
-          displayName: "Trigger",
           mergeWithParent: true,
+          displayName: "Trigger",
           defaultValue: {
             type: "text",
-            value: "Hover me!"
+            value: "Hover me!",
+            styles: {
+              width: "hug"
+            }
           }
         },
         tooltipContent: {
@@ -4586,7 +4662,11 @@ function registerTooltip(loader, overrides) {
           // NOTE: This is not applied in attachment
           defaultValue: {
             type: "text",
-            value: "Hello from Tooltip!"
+            value: "Hello from Tooltip!",
+            styles: {
+              // So the text does not overlap with existing content
+              backgroundColor: "white"
+            }
           }
         },
         resetClassName: {
@@ -4597,12 +4677,16 @@ function registerTooltip(loader, overrides) {
         },
         delay: {
           type: "number",
-          defaultValueHint: 1500,
+          // Default value is explicitly set to 0 to prevent users from mistakenly thinking the tooltip isn’t opening due to a delay.
+          defaultValue: 0,
+          defaultValueHint: 0,
           description: "The delay (in milliseconds) for the tooltip to show up."
         },
         closeDelay: {
           type: "number",
-          defaultValueHint: 500,
+          // Default value is explicitly set to 0 to prevent users from mistakenly thinking the tooltip isn’t closing due to a delay.
+          defaultValue: 0,
+          defaultValueHint: 0,
           description: "The delay (in milliseconds) for the tooltip to close."
         },
         trigger: {
@@ -4610,6 +4694,21 @@ function registerTooltip(loader, overrides) {
           options: ["focus", "focus and hover"],
           defaultValueHint: "focus and hover"
         },
+        placement: {
+          type: "choice",
+          description: "Default placement of the popover relative to the trigger, if there is enough space",
+          defaultValueHint: "top",
+          // Not providing more options because https://github.com/adobe/react-spectrum/issues/6517
+          options: ["top", "bottom", "left", "right"]
+        },
+        isOpen: {
+          type: "boolean",
+          editOnly: true,
+          uncontrolledProp: "defaultOpen",
+          description: "Whether the overlay is open by default",
+          defaultValueHint: false,
+          hidden: () => true
+        },
         onOpenChange: {
           type: "eventHandler",
           argTypes: [{ name: "isOpen", type: "boolean" }]
@@ -4617,7 +4716,8 @@ function registerTooltip(loader, overrides) {
       },
       states: {
         isOpen: {
-          type: "readonly",
+          type: "writable",
+          valueProp: "isOpen",
           onChangeProp: "onOpenChange",
           variableType: "boolean"
         }