@plasmicpkgs/react-aria 0.0.85 → 0.0.87

package/dist/react-aria.js

@@ -14,25 +14,25 @@ var React__default = /*#__PURE__*/_interopDefault(React);
 var registerComponent__default = /*#__PURE__*/_interopDefault(registerComponent);
 var flattenChildren__default = /*#__PURE__*/_interopDefault(flattenChildren);
 
-var __defProp$q = Object.defineProperty;
-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;
-var __defNormalProp$q = (obj, key, value) => key in obj ? __defProp$q(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
-var __spreadValues$q = (a, b) => {
+var __defProp$r = Object.defineProperty;
+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;
+var __defNormalProp$r = (obj, key, value) => key in obj ? __defProp$r(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __spreadValues$r = (a, b) => {
   for (var prop in b || (b = {}))
-    if (__hasOwnProp$q.call(b, prop))
-      __defNormalProp$q(a, prop, b[prop]);
-  if (__getOwnPropSymbols$q)
-    for (var prop of __getOwnPropSymbols$q(b)) {
-      if (__propIsEnum$q.call(b, prop))
-        __defNormalProp$q(a, prop, b[prop]);
+    if (__hasOwnProp$r.call(b, prop))
+      __defNormalProp$r(a, prop, b[prop]);
+  if (__getOwnPropSymbols$r)
+    for (var prop of __getOwnPropSymbols$r(b)) {
+      if (__propIsEnum$r.call(b, prop))
+        __defNormalProp$r(a, prop, b[prop]);
     }
   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 useAutoOpen({
   props,
   open,
@@ -54,14 +54,14 @@ function useAutoOpen({
 }
 function registerComponentHelper(loader, component, meta, overrides) {
   var _a;
-  meta = __spreadProps$g(__spreadValues$q({}, meta), {
-    defaultStyles: __spreadValues$q({
+  meta = __spreadProps$h(__spreadValues$r({}, meta), {
+    defaultStyles: __spreadValues$r({
       boxSizing: "border-box"
     }, (_a = meta.defaultStyles) != null ? _a : {})
   });
   if (overrides) {
-    meta = __spreadProps$g(__spreadValues$q(__spreadValues$q({}, meta), overrides), {
-      props: __spreadValues$q(__spreadValues$q({}, meta.props), overrides.props)
+    meta = __spreadProps$h(__spreadValues$r(__spreadValues$r({}, meta), overrides), {
+      props: __spreadValues$r(__spreadValues$r({}, meta.props), overrides.props)
     });
     if (overrides.parentComponentName) {
       meta.name = makeChildComponentName(
@@ -98,6 +98,22 @@ function isDefined(thing) {
   return thing !== void 0 && thing !== null;
 }
 
+var __defProp$q = Object.defineProperty;
+var __getOwnPropSymbols$q = Object.getOwnPropertySymbols;
+var __hasOwnProp$q = Object.prototype.hasOwnProperty;
+var __propIsEnum$q = Object.prototype.propertyIsEnumerable;
+var __defNormalProp$q = (obj, key, value) => key in obj ? __defProp$q(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __spreadValues$q = (a, b) => {
+  for (var prop in b || (b = {}))
+    if (__hasOwnProp$q.call(b, prop))
+      __defNormalProp$q(a, prop, b[prop]);
+  if (__getOwnPropSymbols$q)
+    for (var prop of __getOwnPropSymbols$q(b)) {
+      if (__propIsEnum$q.call(b, prop))
+        __defNormalProp$q(a, prop, b[prop]);
+    }
+  return a;
+};
 function hasParent(_props, ctx) {
   return isDefined(ctx == null ? void 0 : ctx.parent) === true;
 }
@@ -439,6 +455,76 @@ function getCommonProps(componentName, propNames) {
   });
   return filteredProps;
 }
+function createPlacementProp(componentName, overrides) {
+  return __spreadValues$q({
+    type: "choice",
+    description: `Default placement of the ${componentName} relative to the trigger, if there is enough space`,
+    options: [
+      // Not allowing other placement options here because of https://github.com/adobe/react-spectrum/issues/6825
+      "top",
+      "bottom",
+      "start",
+      "end",
+      "left",
+      "right"
+    ]
+  }, overrides != null ? overrides : {});
+}
+function createOffsetProp(componentName, overrides) {
+  return __spreadValues$q({
+    type: "number",
+    displayName: "Offset",
+    description: `Additional offset applied along the main axis between the ${componentName} and its trigger`,
+    advanced: true
+  }, overrides != null ? overrides : {});
+}
+function createContainerPaddingProp(componentName, overrides) {
+  return __spreadValues$q({
+    type: "number",
+    description: `The padding that should be applied between the ${componentName} and its surrounding container. This affects the positioning breakpoints that determine when it will attempt to flip.`,
+    advanced: true
+  }, overrides != null ? overrides : {});
+}
+function createCrossOffsetProp(componentName, overrides) {
+  return __spreadValues$q({
+    type: "number",
+    description: `The additional offset applied along the cross axis between the ${componentName} and its anchor element.`,
+    advanced: true
+  }, overrides != null ? overrides : {});
+}
+function getCommonOverlayProps(componentName, overrides) {
+  const commonProps = {
+    placement: createPlacementProp(componentName, overrides["placement"]),
+    offset: createOffsetProp(componentName, overrides["offset"]),
+    containerPadding: createContainerPaddingProp(
+      componentName,
+      overrides["containerPadding"]
+    ),
+    crossOffset: createCrossOffsetProp(
+      componentName,
+      overrides["crossOffset"]
+    )
+  };
+  return commonProps;
+}
+const arrowDown = {
+  type: "hbox",
+  children: [],
+  styles: {
+    width: 0,
+    height: 0,
+    padding: 0,
+    borderLeftWidth: "5px",
+    borderRightWidth: "5px",
+    borderTopWidth: "5px",
+    borderLeftStyle: "solid",
+    borderRightStyle: "solid",
+    borderTopStyle: "solid",
+    borderLeftColor: "transparent",
+    borderRightColor: "transparent",
+    borderTopColor: "black"
+  }
+};
 
 const ARIA_COMPONENTS_VARIANTS = {
   hovered: {
@@ -525,8 +611,8 @@ function pickAriaComponentVariants(keys) {
 }
 
 var __defProp$p = Object.defineProperty;
-var __defProps$f = Object.defineProperties;
-var __getOwnPropDescs$f = Object.getOwnPropertyDescriptors;
+var __defProps$g = Object.defineProperties;
+var __getOwnPropDescs$g = Object.getOwnPropertyDescriptors;
 var __getOwnPropSymbols$p = Object.getOwnPropertySymbols;
 var __hasOwnProp$p = Object.prototype.hasOwnProperty;
 var __propIsEnum$p = Object.prototype.propertyIsEnumerable;
@@ -542,7 +628,7 @@ var __spreadValues$p = (a, b) => {
     }
   return a;
 };
-var __spreadProps$f = (a, b) => __defProps$f(a, __getOwnPropDescs$f(b));
+var __spreadProps$g = (a, b) => __defProps$g(a, __getOwnPropDescs$g(b));
 var __objRest$m = (source, exclude) => {
   var target = {};
   for (var prop in source)
@@ -562,7 +648,7 @@ const BUTTON_VARIANTS = [
   "focusVisible",
   "disabled"
 ];
-const { variants: variants$g, withObservedValues: withObservedValues$d } = pickAriaComponentVariants(BUTTON_VARIANTS);
+const { variants: variants$h, withObservedValues: withObservedValues$e } = pickAriaComponentVariants(BUTTON_VARIANTS);
 const BaseButton = React__default.default.forwardRef(function BaseButtonInner(props, ref) {
   const _a = props, { submitsForm, resetsForm, children, plasmicUpdateVariant } = _a, rest = __objRest$m(_a, ["submitsForm", "resetsForm", "children", "plasmicUpdateVariant"]);
   const type = submitsForm ? "submit" : resetsForm ? "reset" : "button";
@@ -570,7 +656,7 @@ const BaseButton = React__default.default.forwardRef(function BaseButtonInner(pr
     type,
     ref
   });
-  return /* @__PURE__ */ React__default.default.createElement(reactAriaComponents.Button, __spreadValues$p({}, mergedProps), ({ isHovered, isPressed, isFocused, isFocusVisible, isDisabled }) => withObservedValues$d(
+  return /* @__PURE__ */ React__default.default.createElement(reactAriaComponents.Button, __spreadValues$p({}, mergedProps), ({ isHovered, isPressed, isFocused, isFocusVisible, isDisabled }) => withObservedValues$e(
     children,
     {
       hovered: isHovered,
@@ -592,7 +678,7 @@ function registerButton(loader, overrides) {
       displayName: "Aria Button",
       importPath: "@plasmicpkgs/react-aria/skinny/registerButton",
       importName: "BaseButton",
-      variants: variants$g,
+      variants: variants$h,
       defaultStyles: {
         borderWidth: "1px",
         borderStyle: "solid",
@@ -600,7 +686,7 @@ function registerButton(loader, overrides) {
         padding: "2px 10px",
         cursor: "pointer"
       },
-      props: __spreadProps$f(__spreadValues$p({}, getCommonProps("button", [
+      props: __spreadProps$g(__spreadValues$p({}, getCommonProps("button", [
         "autoFocus",
         "isDisabled",
         "aria-label"
@@ -656,8 +742,8 @@ React__default.default.createContext(void 0);
 const PlasmicInputContext = React__default.default.createContext(void 0);
 
 var __defProp$o = Object.defineProperty;
-var __defProps$e = Object.defineProperties;
-var __getOwnPropDescs$e = Object.getOwnPropertyDescriptors;
+var __defProps$f = Object.defineProperties;
+var __getOwnPropDescs$f = Object.getOwnPropertyDescriptors;
 var __getOwnPropSymbols$o = Object.getOwnPropertySymbols;
 var __hasOwnProp$o = Object.prototype.hasOwnProperty;
 var __propIsEnum$o = Object.prototype.propertyIsEnumerable;
@@ -673,7 +759,7 @@ var __spreadValues$o = (a, b) => {
     }
   return a;
 };
-var __spreadProps$e = (a, b) => __defProps$e(a, __getOwnPropDescs$e(b));
+var __spreadProps$f = (a, b) => __defProps$f(a, __getOwnPropDescs$f(b));
 var __objRest$l = (source, exclude) => {
   var target = {};
   for (var prop in source)
@@ -697,7 +783,7 @@ const CHECKBOX_VARIANTS = [
   "readonly",
   "selected"
 ];
-const { variants: variants$f, withObservedValues: withObservedValues$c } = pickAriaComponentVariants(CHECKBOX_VARIANTS);
+const { variants: variants$g, withObservedValues: withObservedValues$d } = pickAriaComponentVariants(CHECKBOX_VARIANTS);
 function BaseCheckbox(props) {
   const _a = props, { children, plasmicUpdateVariant, setControlContextData } = _a, rest = __objRest$l(_a, ["children", "plasmicUpdateVariant", "setControlContextData"]);
   const contextProps = React__default.default.useContext(PlasmicCheckboxGroupContext);
@@ -713,7 +799,7 @@ function BaseCheckbox(props) {
     isIndeterminate,
     isSelected,
     isReadOnly
-  }) => withObservedValues$c(
+  }) => withObservedValues$d(
     children,
     {
       hovered: isHovered,
@@ -784,8 +870,8 @@ function registerCheckbox(loader, overrides) {
       displayName: "Aria Checkbox",
       importPath: "@plasmicpkgs/react-aria/skinny/registerCheckbox",
       importName: "BaseCheckbox",
-      variants: variants$f,
-      props: __spreadProps$e(__spreadValues$o({}, getCommonProps("checkbox", [
+      variants: variants$g,
+      props: __spreadProps$f(__spreadValues$o({}, getCommonProps("checkbox", [
         "name",
         "isDisabled",
         "isReadOnly",
@@ -854,8 +940,8 @@ function registerCheckbox(loader, overrides) {
 }
 
 var __defProp$n = Object.defineProperty;
-var __defProps$d = Object.defineProperties;
-var __getOwnPropDescs$d = Object.getOwnPropertyDescriptors;
+var __defProps$e = Object.defineProperties;
+var __getOwnPropDescs$e = Object.getOwnPropertyDescriptors;
 var __getOwnPropSymbols$n = Object.getOwnPropertySymbols;
 var __hasOwnProp$n = Object.prototype.hasOwnProperty;
 var __propIsEnum$n = Object.prototype.propertyIsEnumerable;
@@ -871,7 +957,7 @@ var __spreadValues$n = (a, b) => {
     }
   return a;
 };
-var __spreadProps$d = (a, b) => __defProps$d(a, __getOwnPropDescs$d(b));
+var __spreadProps$e = (a, b) => __defProps$e(a, __getOwnPropDescs$e(b));
 var __objRest$k = (source, exclude) => {
   var target = {};
   for (var prop in source)
@@ -886,7 +972,7 @@ var __objRest$k = (source, exclude) => {
 };
 function BaseText(_a) {
   var _b = _a, { children, slot, className } = _b, rest = __objRest$k(_b, ["children", "slot", "className"]);
-  return /* @__PURE__ */ React__default.default.createElement(reactAriaComponents.Text, __spreadProps$d(__spreadValues$n({}, extractPlasmicDataProps(rest)), { slot, className }), children);
+  return /* @__PURE__ */ React__default.default.createElement(reactAriaComponents.Text, __spreadProps$e(__spreadValues$n({}, extractPlasmicDataProps(rest)), { slot, className }), children);
 }
 const TEXT_COMPONENT_NAME = makeComponentName("text");
 function registerText(loader, overrides) {
@@ -921,8 +1007,8 @@ function registerText(loader, overrides) {
 }
 
 var __defProp$m = Object.defineProperty;
-var __defProps$c = Object.defineProperties;
-var __getOwnPropDescs$c = Object.getOwnPropertyDescriptors;
+var __defProps$d = Object.defineProperties;
+var __getOwnPropDescs$d = Object.getOwnPropertyDescriptors;
 var __getOwnPropSymbols$m = Object.getOwnPropertySymbols;
 var __hasOwnProp$m = Object.prototype.hasOwnProperty;
 var __propIsEnum$m = Object.prototype.propertyIsEnumerable;
@@ -938,10 +1024,10 @@ var __spreadValues$m = (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$m({}, overrides), {
+  return registerText(loader, __spreadProps$d(__spreadValues$m({}, overrides), {
     name: DESCRIPTION_COMPONENT_NAME,
     displayName: "Aria Description",
     props: {
@@ -955,8 +1041,8 @@ function registerDescription(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;
@@ -972,7 +1058,7 @@ var __spreadValues$l = (a, b) => {
     }
   return a;
 };
-var __spreadProps$b = (a, b) => __defProps$b(a, __getOwnPropDescs$b(b));
+var __spreadProps$c = (a, b) => __defProps$c(a, __getOwnPropDescs$c(b));
 var __objRest$j = (source, exclude) => {
   var target = {};
   for (var prop in source)
@@ -987,7 +1073,7 @@ var __objRest$j = (source, exclude) => {
 };
 function BaseLabel(_a) {
   var _b = _a, { children, className } = _b, rest = __objRest$j(_b, ["children", "className"]);
-  return /* @__PURE__ */ React__default.default.createElement(reactAriaComponents.Label, __spreadProps$b(__spreadValues$l({}, extractPlasmicDataProps(rest)), { className }), children);
+  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) {
@@ -1019,8 +1105,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;
@@ -1036,7 +1122,7 @@ var __spreadValues$k = (a, b) => {
     }
   return a;
 };
-var __spreadProps$a = (a, b) => __defProps$a(a, __getOwnPropDescs$a(b));
+var __spreadProps$b = (a, b) => __defProps$b(a, __getOwnPropDescs$b(b));
 var __objRest$i = (source, exclude) => {
   var target = {};
   for (var prop in source)
@@ -1050,12 +1136,12 @@ var __objRest$i = (source, exclude) => {
   return target;
 };
 const CHECKBOX_GROUP_VARIANTS = ["disabled", "readonly"];
-const { variants: variants$e, withObservedValues: withObservedValues$b } = pickAriaComponentVariants(
+const { variants: variants$f, withObservedValues: withObservedValues$c } = pickAriaComponentVariants(
   CHECKBOX_GROUP_VARIANTS
 );
 function BaseCheckboxGroup(props) {
   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$b(
+  return /* @__PURE__ */ React__default.default.createElement(PlasmicCheckboxGroupContext.Provider, { value: rest }, /* @__PURE__ */ React__default.default.createElement(reactAriaComponents.CheckboxGroup, __spreadValues$k({}, rest), ({ isDisabled, isReadOnly }) => withObservedValues$c(
     children,
     {
       disabled: isDisabled,
@@ -1078,8 +1164,8 @@ function registerCheckboxGroup(loader, overrides) {
       displayName: "Aria Checkbox Group",
       importPath: "@plasmicpkgs/react-aria/skinny/registerCheckboxGroup",
       importName: "BaseCheckboxGroup",
-      variants: variants$e,
-      props: __spreadProps$a(__spreadValues$k({}, getCommonProps("checkbox group", [
+      variants: variants$f,
+      props: __spreadProps$b(__spreadValues$k({}, getCommonProps("checkbox group", [
         "name",
         "isDisabled",
         "isReadOnly",
@@ -1278,7 +1364,7 @@ const INPUT_VARIANTS = [
   "hovered",
   "disabled"
 ];
-const { variants: variants$d } = pickAriaComponentVariants(INPUT_VARIANTS);
+const { variants: variants$e } = pickAriaComponentVariants(INPUT_VARIANTS);
 const inputHelpers$1 = {
   states: {
     value: {
@@ -1341,7 +1427,7 @@ function registerInput(loader, overrides) {
       displayName: "Aria Input",
       importPath: "@plasmicpkgs/react-aria/skinny/registerInput",
       importName: "BaseInput",
-      variants: variants$d,
+      variants: variants$e,
       defaultStyles: {
         width: "300px",
         borderWidth: "1px",
@@ -1433,7 +1519,7 @@ const LIST_BOX_ITEM_VARIANTS = [
   "selected",
   "disabled"
 ];
-const { variants: variants$c, withObservedValues: withObservedValues$a } = pickAriaComponentVariants(
+const { variants: variants$d, withObservedValues: withObservedValues$b } = pickAriaComponentVariants(
   LIST_BOX_ITEM_VARIANTS
 );
 function BaseListBoxItem(props) {
@@ -1476,7 +1562,7 @@ function BaseListBoxItem(props) {
     isFocusVisible,
     isSelected,
     isDisabled
-  }) => withObservedValues$a(
+  }) => withObservedValues$b(
     children,
     {
       hovered: isHovered,
@@ -1539,7 +1625,7 @@ function registerListBoxItem(loader, overrides) {
       displayName: "Aria ListBoxItem",
       importPath: "@plasmicpkgs/react-aria/skinny/registerListBoxItem",
       importName: "BaseListBoxItem",
-      variants: variants$c,
+      variants: variants$d,
       props: {
         id: {
           type: "string",
@@ -1676,7 +1762,7 @@ var __objRest$e = (source, exclude) => {
   return target;
 };
 const LISTBOX_VARIANTS = ["focused", "focusVisible"];
-const { variants: variants$b } = pickAriaComponentVariants(LISTBOX_VARIANTS);
+const { variants: variants$c } = pickAriaComponentVariants(LISTBOX_VARIANTS);
 const listboxHelpers = {
   states: {
     selectedValue: {
@@ -1823,7 +1909,7 @@ function registerListBox(loader, overrides) {
       displayName: "Aria ListBox",
       importPath: "@plasmicpkgs/react-aria/skinny/registerListBox",
       importName: "BaseListBox",
-      variants: variants$b,
+      variants: variants$c,
       defaultStyles: {
         width: "250px",
         borderWidth: "1px",
@@ -1961,7 +2047,7 @@ const POPOVER_VARIANTS = [
   "placementLeft",
   "placementRight"
 ];
-const { variants: variants$a, withObservedValues: withObservedValues$9 } = pickAriaComponentVariants(POPOVER_VARIANTS);
+const { variants: variants$b, withObservedValues: withObservedValues$a } = pickAriaComponentVariants(POPOVER_VARIANTS);
 function BasePopover(props) {
   const _a = props, {
     resetClassName,
@@ -2006,7 +2092,7 @@ function BasePopover(props) {
     __spreadValues$f({
       style: matchTriggerWidthProp ? { width: `var(--trigger-width)` } : void 0
     }, mergedProps),
-    ({ placement }) => withObservedValues$9(
+    ({ placement }) => withObservedValues$a(
       children,
       {
         placementTop: placement === "top",
@@ -2019,18 +2105,6 @@ function BasePopover(props) {
   ));
 }
 const POPOVER_COMPONENT_NAME = makeComponentName("popover");
-const POPOVER_ARROW_IMG = {
-  type: "img",
-  src: "https://static1.plasmic.app/arrow-up.svg",
-  styles: {
-    position: "absolute",
-    top: "-14px",
-    // center the arrow horizontally on the popover
-    left: "50%",
-    transform: "translateX(-50%)",
-    width: "15px"
-  }
-};
 function registerPopover(loader, overrides) {
   registerComponentHelper(
     loader,
@@ -2040,26 +2114,24 @@ function registerPopover(loader, overrides) {
       displayName: "Aria Popover",
       importPath: "@plasmicpkgs/react-aria/skinny/registerPopover",
       importName: "BasePopover",
-      variants: variants$a,
+      variants: variants$b,
       defaultStyles: {
         borderWidth: "1px",
         borderStyle: "solid",
         borderColor: "black",
-        padding: "20px",
         width: "300px",
         backgroundColor: "#FDE3C3"
       },
-      props: {
+      props: __spreadValues$f({
         children: {
           type: "slot",
           mergeWithParent: true,
           defaultValue: [
-            POPOVER_ARROW_IMG,
             {
               type: "vbox",
               styles: {
                 width: "stretch",
-                padding: 0,
+                padding: "20px",
                 rowGap: "10px"
               },
               children: [
@@ -2082,29 +2154,11 @@ function registerPopover(loader, overrides) {
             }
           ]
         },
-        offset: {
-          type: "number",
-          displayName: "Offset",
-          description: "Additional offset applied vertically between the popover and its trigger",
-          defaultValueHint: 8
-        },
         shouldFlip: {
           type: "boolean",
           description: "Whether the element should flip its orientation (e.g. top to bottom or left to right) when there is insufficient room for it to render completely.",
           defaultValueHint: true
         },
-        placement: {
-          type: "choice",
-          description: "Default placement of the popover relative to the trigger, if there is enough space",
-          defaultValueHint: "bottom",
-          options: [
-            // Not allowing other placement options here because of https://github.com/adobe/react-spectrum/issues/6825
-            "top",
-            "bottom",
-            "left",
-            "right"
-          ]
-        },
         resetClassName: {
           type: "themeResetClass"
         },
@@ -2113,7 +2167,12 @@ function registerPopover(loader, overrides) {
           defaultValue: true,
           hidden: (_props, ctx) => !(ctx == null ? void 0 : ctx.canMatchTriggerWidth)
         }
-      },
+      }, getCommonOverlayProps("popover", {
+        placement: { defaultValueHint: "bottom" },
+        offset: { defaultValueHint: 8 },
+        containerPadding: { defaultValueHint: 12 },
+        crossOffset: { defaultValueHint: 0 }
+      })),
       // No isOpen state for popover, because we assume that its open state is always going to be controlled by a parent like Select, Combobox, DialogTrigger, etc.
       styleSections: true,
       trapsFocus: true
@@ -2123,8 +2182,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;
@@ -2140,7 +2199,7 @@ var __spreadValues$e = (a, b) => {
     }
   return a;
 };
-var __spreadProps$9 = (a, b) => __defProps$9(a, __getOwnPropDescs$9(b));
+var __spreadProps$a = (a, b) => __defProps$a(a, __getOwnPropDescs$a(b));
 var __objRest$c = (source, exclude) => {
   var target = {};
   for (var prop in source)
@@ -2210,7 +2269,7 @@ function registerComboBox(loader) {
     importPath: "@plasmicpkgs/react-aria/skinny/registerComboBox",
     importName: "BaseComboBox",
     variants: COMBOBOX_VARIANTS_DATA,
-    props: __spreadProps$9(__spreadValues$e({}, getCommonProps("ComboBox", [
+    props: __spreadProps$a(__spreadValues$e({}, getCommonProps("ComboBox", [
       "name",
       "aria-label",
       "isDisabled"
@@ -2286,19 +2345,7 @@ function registerComboBox(loader) {
                     type: "component",
                     name: BUTTON_COMPONENT_NAME,
                     props: {
-                      children: {
-                        type: "img",
-                        // TODO: Replace with the image of an arrow pointing up, like: https://icon-sets.iconify.design/mdi/triangle/
-                        src: "https://static1.plasmic.app/arrow-up.svg",
-                        styles: {
-                          width: "15px",
-                          transform: "rotate(180deg)",
-                          display: "flex",
-                          alignItems: "center",
-                          justifyContent: "center",
-                          padding: 0
-                        }
-                      }
+                      children: arrowDown
                     }
                   }
                 ]
@@ -2421,8 +2468,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;
@@ -2438,7 +2485,7 @@ var __spreadValues$c = (a, b) => {
     }
   return a;
 };
-var __spreadProps$8 = (a, b) => __defProps$8(a, __getOwnPropDescs$8(b));
+var __spreadProps$9 = (a, b) => __defProps$9(a, __getOwnPropDescs$9(b));
 var __objRest$a = (source, exclude) => {
   var target = {};
   for (var prop in source)
@@ -2451,9 +2498,6 @@ var __objRest$a = (source, exclude) => {
     }
   return target;
 };
-const INLINE_STYLES = {
-  outline: "none"
-};
 const BaseModal = React.forwardRef(
   function BaseModalInner(props, ref) {
     var _b, _c, _d;
@@ -2503,14 +2547,14 @@ const BaseModal = React.forwardRef(
         (_a2 = mergedProps.onOpenChange) == null ? void 0 : _a2.call(mergedProps, true);
       }
     }));
-    const bodyInCanvas = /* @__PURE__ */ React__default.default.createElement("div", { style: INLINE_STYLES }, children);
-    const bodyInPreview = /* @__PURE__ */ React__default.default.createElement(reactAriaComponents.Dialog, { style: INLINE_STYLES }, children);
+    const dialogInCanvas = /* @__PURE__ */ React__default.default.createElement("div", { className }, children);
+    const dialog = /* @__PURE__ */ React__default.default.createElement(reactAriaComponents.Dialog, { className }, 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 }, canvasCtx ? bodyInCanvas : bodyInPreview)
+      /* @__PURE__ */ React__default.default.createElement(reactAriaComponents.Modal, null, canvasCtx ? dialogInCanvas : dialog)
     );
   }
 );
@@ -2629,8 +2673,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;
@@ -2646,7 +2690,7 @@ var __spreadValues$b = (a, b) => {
     }
   return a;
 };
-var __spreadProps$7 = (a, b) => __defProps$7(a, __getOwnPropDescs$7(b));
+var __spreadProps$8 = (a, b) => __defProps$8(a, __getOwnPropDescs$8(b));
 var __objRest$9 = (source, exclude) => {
   var target = {};
   for (var prop in source)
@@ -2664,7 +2708,7 @@ function BaseDialogTrigger(props) {
   const _a = props, { trigger, dialog, isOpen } = _a, rest = __objRest$9(_a, ["trigger", "dialog", "isOpen"]);
   const { isSelected, selectedSlotName } = (_c = (_b = host.usePlasmicCanvasComponentInfo) == null ? void 0 : _b(props)) != null ? _c : {};
   const isAutoOpen = selectedSlotName !== "trigger" && isSelected;
-  const mergedProps = __spreadProps$7(__spreadValues$b({}, rest), {
+  const mergedProps = __spreadProps$8(__spreadValues$b({}, rest), {
     isOpen: (_d = isAutoOpen || isOpen) != null ? _d : false
   });
   return /* @__PURE__ */ React__default.default.createElement(PlasmicDialogTriggerContext.Provider, { value: mergedProps }, /* @__PURE__ */ React__default.default.createElement(reactAriaComponents.DialogTrigger, __spreadValues$b({}, mergedProps), trigger, dialog));
@@ -2728,9 +2772,63 @@ function registerDialogTrigger(loader, overrides) {
   );
 }
 
+const OVERLAY_ARROW_VARIANTS = [
+  // We do not offer a placementDown variant, because that's the default placement (an overlay arrow always has [data-placement=bottom] if it's not explicitly set)
+  "placementTop",
+  "placementLeft",
+  "placementRight"
+];
+const { variants: variants$a, withObservedValues: withObservedValues$9 } = pickAriaComponentVariants(
+  OVERLAY_ARROW_VARIANTS
+);
+function BaseOverlayArrow({
+  children,
+  plasmicUpdateVariant,
+  className
+}) {
+  const popoverContext = React__default.default.useContext(reactAriaComponents.PopoverContext);
+  const tooltipContext = React__default.default.useContext(reactAriaComponents.TooltipContext);
+  const isStandalone = !popoverContext && !tooltipContext;
+  const overlayArrow = /* @__PURE__ */ React__default.default.createElement(reactAriaComponents.OverlayArrow, { style: { lineHeight: "0" }, className }, ({ placement }) => withObservedValues$9(
+    /* @__PURE__ */ React__default.default.createElement(React__default.default.Fragment, null, children),
+    {
+      placementTop: placement === "top",
+      placementLeft: placement === "left",
+      placementRight: placement === "right"
+    },
+    plasmicUpdateVariant
+  ));
+  if (isStandalone) {
+    return /* @__PURE__ */ React__default.default.createElement("div", { style: { position: "relative" } }, overlayArrow);
+  }
+  return overlayArrow;
+}
+const OVERLAY_ARROW_COMPONENT_NAME = makeComponentName("overlayArrow");
+function registerOverlayArrow(loader, overrides) {
+  return registerComponentHelper(
+    loader,
+    BaseOverlayArrow,
+    {
+      name: OVERLAY_ARROW_COMPONENT_NAME,
+      displayName: "Aria Overlay Arrow",
+      importPath: "@plasmicpkgs/react-aria/skinny/registerOverlayArrow",
+      importName: "BaseOverlayArrow",
+      styleSections: false,
+      variants: variants$a,
+      props: {
+        children: {
+          type: "slot",
+          defaultValue: arrowDown
+        }
+      }
+    },
+    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;
@@ -2746,7 +2844,7 @@ var __spreadValues$a = (a, b) => {
     }
   return a;
 };
-var __spreadProps$6 = (a, b) => __defProps$6(a, __getOwnPropDescs$6(b));
+var __spreadProps$7 = (a, b) => __defProps$7(a, __getOwnPropDescs$7(b));
 var __objRest$8 = (source, exclude) => {
   var target = {};
   for (var prop in source)
@@ -2845,7 +2943,7 @@ function registerRadio(loader, overrides) {
       importPath: "@plasmicpkgs/react-aria/skinny/registerRadio",
       importName: "BaseRadio",
       variants: variants$9,
-      props: __spreadProps$6(__spreadValues$a({}, getCommonProps("radio", [
+      props: __spreadProps$7(__spreadValues$a({}, getCommonProps("radio", [
         "isDisabled",
         "autoFocus",
         "aria-label"
@@ -2867,8 +2965,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;
@@ -2884,7 +2982,7 @@ var __spreadValues$9 = (a, b) => {
     }
   return a;
 };
-var __spreadProps$5 = (a, b) => __defProps$5(a, __getOwnPropDescs$5(b));
+var __spreadProps$6 = (a, b) => __defProps$6(a, __getOwnPropDescs$6(b));
 var __objRest$7 = (source, exclude) => {
   var target = {};
   for (var prop in source)
@@ -2926,7 +3024,7 @@ function registerRadioGroup(loader, overrides) {
       importPath: "@plasmicpkgs/react-aria/skinny/registerRadioGroup",
       importName: "BaseRadioGroup",
       variants: variants$8,
-      props: __spreadProps$5(__spreadValues$9({}, getCommonProps("radio group", [
+      props: __spreadProps$6(__spreadValues$9({}, getCommonProps("radio group", [
         "name",
         "isDisabled",
         "isReadOnly",
@@ -3032,8 +3130,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;
@@ -3049,7 +3147,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));
 function SelectAutoOpen(props) {
   var _a;
   const { open, close } = (_a = React__default.default.useContext(reactAriaComponents.SelectStateContext)) != null ? _a : {};
@@ -3175,7 +3273,7 @@ function registerSelect(loader) {
     importPath: "@plasmicpkgs/react-aria/skinny/registerSelect",
     importName: "BaseSelect",
     variants: SELECT_VARIANTS_DATA,
-    props: __spreadProps$4(__spreadValues$8({}, getCommonProps("Select", [
+    props: __spreadProps$5(__spreadValues$8({}, getCommonProps("Select", [
       "name",
       "aria-label",
       "isDisabled",
@@ -3257,15 +3355,7 @@ function registerSelect(loader) {
                         type: "component",
                         name: selectValueMeta.name
                       },
-                      {
-                        type: "img",
-                        src: "https://static1.plasmic.app/arrow-up.svg",
-                        styles: {
-                          height: "15px",
-                          width: "15px",
-                          transform: "rotate(180deg)"
-                        }
-                      }
+                      arrowDown
                     ]
                   }
                 }
@@ -3400,8 +3490,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;
@@ -3417,7 +3507,7 @@ var __spreadValues$6 = (a, b) => {
     }
   return a;
 };
-var __spreadProps$3 = (a, b) => __defProps$3(a, __getOwnPropDescs$3(b));
+var __spreadProps$4 = (a, b) => __defProps$4(a, __getOwnPropDescs$4(b));
 var __objRest$5 = (source, exclude) => {
   var target = {};
   for (var prop in source)
@@ -3489,7 +3579,7 @@ function registerSliderThumb(loader, overrides) {
         cursor: "pointer"
       },
       variants: variants$6,
-      props: __spreadProps$3(__spreadValues$6({}, getCommonProps("slider thumb", [
+      props: __spreadProps$4(__spreadValues$6({}, getCommonProps("slider thumb", [
         "name",
         "isDisabled",
         "autoFocus"
@@ -3693,8 +3783,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;
@@ -3710,7 +3800,7 @@ var __spreadValues$4 = (a, b) => {
     }
   return a;
 };
-var __spreadProps$2 = (a, b) => __defProps$2(a, __getOwnPropDescs$2(b));
+var __spreadProps$3 = (a, b) => __defProps$3(a, __getOwnPropDescs$3(b));
 var __objRest$3 = (source, exclude) => {
   var target = {};
   for (var prop in source)
@@ -3732,7 +3822,7 @@ function BaseSlider(props) {
   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
@@ -3794,7 +3884,7 @@ function registerSlider(loader, overrides) {
       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()), {
@@ -3906,7 +3996,7 @@ function registerSlider(loader, overrides) {
       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()), {
@@ -3982,8 +4072,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;
@@ -3999,7 +4089,7 @@ var __spreadValues$3 = (a, b) => {
     }
   return a;
 };
-var __spreadProps$1 = (a, b) => __defProps$1(a, __getOwnPropDescs$1(b));
+var __spreadProps$2 = (a, b) => __defProps$2(a, __getOwnPropDescs$2(b));
 var __objRest$2 = (source, exclude) => {
   var target = {};
   for (var prop in source)
@@ -4063,7 +4153,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",
@@ -4301,8 +4391,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;
@@ -4318,7 +4408,7 @@ var __spreadValues$1 = (a, b) => {
     }
   return a;
 };
-var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
+var __spreadProps$1 = (a, b) => __defProps$1(a, __getOwnPropDescs$1(b));
 var __objRest = (source, exclude) => {
   var target = {};
   for (var prop in source)
@@ -4356,7 +4446,7 @@ function registerTextField(loader, overrides) {
       importName: "BaseTextField",
       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",
@@ -4458,6 +4548,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;
@@ -4473,6 +4565,7 @@ var __spreadValues = (a, b) => {
     }
   return a;
 };
+var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
 const TOOLTIP_VARIANTS = [
   "placementTop",
   "placementBottom",
@@ -4501,7 +4594,6 @@ function BaseTooltip(props) {
     offset,
     crossOffset,
     shouldFlip,
-    arrowBoundaryOffset,
     onOpenChange,
     plasmicUpdateVariant
   } = props;
@@ -4527,14 +4619,13 @@ function BaseTooltip(props) {
         offset,
         crossOffset,
         shouldFlip,
-        arrowBoundaryOffset,
         defaultOpen,
         className: resetClassName,
         onOpenChange,
         placement
       },
       ({ placement: _placement }) => withObservedValues(
-        tooltipContent,
+        /* @__PURE__ */ React__default.default.createElement(React__default.default.Fragment, null, tooltipContent),
         {
           placementTop: _placement === "top",
           placementBottom: _placement === "bottom",
@@ -4558,7 +4649,7 @@ function registerTooltip(loader, overrides) {
       isAttachment: true,
       styleSections: false,
       variants,
-      props: {
+      props: __spreadProps(__spreadValues({
         children: {
           type: "slot",
           mergeWithParent: true,
@@ -4580,8 +4671,10 @@ function registerTooltip(loader, overrides) {
             type: "text",
             value: "Hello from Tooltip!",
             styles: {
-              // So the text does not overlap with existing content
-              backgroundColor: "white"
+              background: "black",
+              color: "white",
+              padding: "7px",
+              borderRadius: "7px"
             }
           }
         },
@@ -4609,14 +4702,13 @@ function registerTooltip(loader, overrides) {
           type: "choice",
           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"]
-        },
+        }
+      }, getCommonOverlayProps("popover", {
+        placement: { defaultValueHint: "top" },
+        offset: { defaultValueHint: 0 },
+        containerPadding: { defaultValueHint: 12 },
+        crossOffset: { defaultValueHint: 0 }
+      })), {
         isOpen: {
           type: "boolean",
           editOnly: true,
@@ -4629,7 +4721,7 @@ function registerTooltip(loader, overrides) {
           type: "eventHandler",
           argTypes: [{ name: "isOpen", type: "boolean" }]
         }
-      },
+      }),
       states: {
         isOpen: {
           type: "writable",
@@ -4648,6 +4740,7 @@ function registerAll(loader) {
   registerText(loader);
   registerHeading(loader);
   registerDescription(loader);
+  registerOverlayArrow(loader);
   registerSelect(loader);
   registerComboBox(loader);
   registerButton(loader);