@plasmicpkgs/react-aria 0.0.86 → 0.0.88

package/dist/react-aria.esm.js

@@ -1,30 +1,30 @@
 import React, { useEffect, useCallback, useState, useMemo, forwardRef, useImperativeHandle, Component } from 'react';
 import { mergeProps, useFocusable } from 'react-aria';
-import { Button, Checkbox, Text, Label, CheckboxGroup, Input, ListBoxItem, ListBox, Section, Header, PopoverContext, Popover, ComboBox, ComboBoxStateContext, Heading, ModalOverlay, Modal, Dialog, DialogTrigger, Radio, RadioGroup, Select, SelectStateContext, SelectValue, SliderOutput, SliderThumb, Slider, SliderTrack, Switch, TextArea, TextField, TooltipTrigger, Tooltip } from 'react-aria-components';
+import { Button, Checkbox, Text, Label, CheckboxGroup, Input, ListBoxItem, ListBox, Section, Header, PopoverContext, Popover, ComboBox, ComboBoxStateContext, Heading, ModalOverlay, Modal, Dialog, DialogTrigger, TooltipContext, OverlayArrow, Radio, RadioGroup, Select, SelectStateContext, SelectValue, SliderOutput, SliderThumb, Slider, SliderTrack, Switch, TextArea, TextField, TooltipTrigger, Tooltip } from 'react-aria-components';
 import { usePlasmicCanvasContext, usePlasmicCanvasComponentInfo } from '@plasmicapp/host';
 import registerComponent from '@plasmicapp/host/registerComponent';
 import { mergeProps as mergeProps$1 } from '@react-aria/utils';
 import flattenChildren from 'react-keyed-flatten-children';
 
-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,
@@ -46,14 +46,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(
@@ -90,6 +90,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;
 }
@@ -431,6 +447,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: {
@@ -517,8 +603,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;
@@ -534,7 +620,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)
@@ -554,7 +640,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.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";
@@ -562,7 +648,7 @@ const BaseButton = React.forwardRef(function BaseButtonInner(props, ref) {
     type,
     ref
   });
-  return /* @__PURE__ */ React.createElement(Button, __spreadValues$p({}, mergedProps), ({ isHovered, isPressed, isFocused, isFocusVisible, isDisabled }) => withObservedValues$d(
+  return /* @__PURE__ */ React.createElement(Button, __spreadValues$p({}, mergedProps), ({ isHovered, isPressed, isFocused, isFocusVisible, isDisabled }) => withObservedValues$e(
     children,
     {
       hovered: isHovered,
@@ -584,7 +670,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",
@@ -592,7 +678,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"
@@ -648,8 +734,8 @@ React.createContext(void 0);
 const PlasmicInputContext = React.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;
@@ -665,7 +751,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)
@@ -689,7 +775,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.useContext(PlasmicCheckboxGroupContext);
@@ -705,7 +791,7 @@ function BaseCheckbox(props) {
     isIndeterminate,
     isSelected,
     isReadOnly
-  }) => withObservedValues$c(
+  }) => withObservedValues$d(
     children,
     {
       hovered: isHovered,
@@ -776,8 +862,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",
@@ -846,8 +932,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;
@@ -863,7 +949,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)
@@ -878,7 +964,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.createElement(Text, __spreadProps$d(__spreadValues$n({}, extractPlasmicDataProps(rest)), { slot, className }), children);
+  return /* @__PURE__ */ React.createElement(Text, __spreadProps$e(__spreadValues$n({}, extractPlasmicDataProps(rest)), { slot, className }), children);
 }
 const TEXT_COMPONENT_NAME = makeComponentName("text");
 function registerText(loader, overrides) {
@@ -913,8 +999,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;
@@ -930,10 +1016,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: {
@@ -947,8 +1033,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;
@@ -964,7 +1050,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)
@@ -979,7 +1065,7 @@ var __objRest$j = (source, exclude) => {
 };
 function BaseLabel(_a) {
   var _b = _a, { children, className } = _b, rest = __objRest$j(_b, ["children", "className"]);
-  return /* @__PURE__ */ React.createElement(Label, __spreadProps$b(__spreadValues$l({}, extractPlasmicDataProps(rest)), { className }), children);
+  return /* @__PURE__ */ React.createElement(Label, __spreadProps$c(__spreadValues$l({}, extractPlasmicDataProps(rest)), { className }), children);
 }
 const LABEL_COMPONENT_NAME = makeComponentName("label");
 function registerLabel(loader, overrides) {
@@ -1011,8 +1097,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;
@@ -1028,7 +1114,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)
@@ -1042,12 +1128,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.createElement(PlasmicCheckboxGroupContext.Provider, { value: rest }, /* @__PURE__ */ React.createElement(CheckboxGroup, __spreadValues$k({}, rest), ({ isDisabled, isReadOnly }) => withObservedValues$b(
+  return /* @__PURE__ */ React.createElement(PlasmicCheckboxGroupContext.Provider, { value: rest }, /* @__PURE__ */ React.createElement(CheckboxGroup, __spreadValues$k({}, rest), ({ isDisabled, isReadOnly }) => withObservedValues$c(
     children,
     {
       disabled: isDisabled,
@@ -1070,8 +1156,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",
@@ -1270,7 +1356,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: {
@@ -1333,7 +1419,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",
@@ -1425,7 +1511,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) {
@@ -1468,7 +1554,7 @@ function BaseListBoxItem(props) {
     isFocusVisible,
     isSelected,
     isDisabled
-  }) => withObservedValues$a(
+  }) => withObservedValues$b(
     children,
     {
       hovered: isHovered,
@@ -1531,7 +1617,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",
@@ -1599,7 +1685,8 @@ function BaseSection(props) {
     return (
       // BaseListbox should give section a listbox context (that it can't be used without)
       // as well as the id manager (that is needed to identify and warn about duplication of ids)
-      /* @__PURE__ */ React.createElement(BaseListBox, null, section)
+      // selection mode needs to be single/multiple to be able to trigger hover state on it.
+      /* @__PURE__ */ React.createElement(BaseListBox, { selectionMode: "single" }, section)
     );
   }
   return section;
@@ -1668,7 +1755,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: {
@@ -1815,7 +1902,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",
@@ -1953,7 +2040,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,
@@ -1998,7 +2085,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",
@@ -2011,18 +2098,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,
@@ -2032,26 +2107,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: [
@@ -2074,29 +2147,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"
         },
@@ -2105,7 +2160,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
@@ -2115,8 +2175,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;
@@ -2132,7 +2192,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)
@@ -2202,7 +2262,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"
@@ -2278,19 +2338,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
                     }
                   }
                 ]
@@ -2413,8 +2461,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;
@@ -2430,7 +2478,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)
@@ -2496,7 +2544,7 @@ const BaseModal = forwardRef(
     const dialog = /* @__PURE__ */ React.createElement(Dialog, { className }, children);
     return /* @__PURE__ */ React.createElement(
       ModalOverlay,
-      __spreadProps$8(__spreadValues$c({}, mergedProps), {
+      __spreadProps$9(__spreadValues$c({}, mergedProps), {
         className: `${resetClassName} ${modalOverlayClass}`
       }),
       /* @__PURE__ */ React.createElement(Modal, null, canvasCtx ? dialogInCanvas : dialog)
@@ -2618,8 +2666,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;
@@ -2635,7 +2683,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)
@@ -2653,7 +2701,7 @@ function BaseDialogTrigger(props) {
   const _a = props, { trigger, dialog, isOpen } = _a, rest = __objRest$9(_a, ["trigger", "dialog", "isOpen"]);
   const { isSelected, selectedSlotName } = (_c = (_b = 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.createElement(PlasmicDialogTriggerContext.Provider, { value: mergedProps }, /* @__PURE__ */ React.createElement(DialogTrigger, __spreadValues$b({}, mergedProps), trigger, dialog));
@@ -2717,9 +2765,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.useContext(PopoverContext);
+  const tooltipContext = React.useContext(TooltipContext);
+  const isStandalone = !popoverContext && !tooltipContext;
+  const overlayArrow = /* @__PURE__ */ React.createElement(OverlayArrow, { style: { lineHeight: "0" }, className }, ({ placement }) => withObservedValues$9(
+    /* @__PURE__ */ React.createElement(React.Fragment, null, children),
+    {
+      placementTop: placement === "top",
+      placementLeft: placement === "left",
+      placementRight: placement === "right"
+    },
+    plasmicUpdateVariant
+  ));
+  if (isStandalone) {
+    return /* @__PURE__ */ React.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;
@@ -2735,7 +2837,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)
@@ -2834,7 +2936,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"
@@ -2856,8 +2958,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;
@@ -2873,7 +2975,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)
@@ -2915,7 +3017,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",
@@ -3021,8 +3123,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;
@@ -3038,7 +3140,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.useContext(SelectStateContext)) != null ? _a : {};
@@ -3164,7 +3266,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",
@@ -3246,15 +3348,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
                     ]
                   }
                 }
@@ -3389,8 +3483,8 @@ class ErrorBoundary extends 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;
@@ -3406,7 +3500,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)
@@ -3478,7 +3572,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"
@@ -3682,8 +3776,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;
@@ -3699,7 +3793,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)
@@ -3721,7 +3815,7 @@ function BaseSlider(props) {
   return /* @__PURE__ */ React.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
@@ -3783,7 +3877,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()), {
@@ -3895,7 +3989,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()), {
@@ -3971,8 +4065,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;
@@ -3988,7 +4082,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)
@@ -4052,7 +4146,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",
@@ -4290,8 +4384,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;
@@ -4307,7 +4401,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)
@@ -4345,7 +4439,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",
@@ -4447,6 +4541,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;
@@ -4462,6 +4558,7 @@ var __spreadValues = (a, b) => {
     }
   return a;
 };
+var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
 const TOOLTIP_VARIANTS = [
   "placementTop",
   "placementBottom",
@@ -4490,7 +4587,6 @@ function BaseTooltip(props) {
     offset,
     crossOffset,
     shouldFlip,
-    arrowBoundaryOffset,
     onOpenChange,
     plasmicUpdateVariant
   } = props;
@@ -4516,14 +4612,13 @@ function BaseTooltip(props) {
         offset,
         crossOffset,
         shouldFlip,
-        arrowBoundaryOffset,
         defaultOpen,
         className: resetClassName,
         onOpenChange,
         placement
       },
       ({ placement: _placement }) => withObservedValues(
-        tooltipContent,
+        /* @__PURE__ */ React.createElement(React.Fragment, null, tooltipContent),
         {
           placementTop: _placement === "top",
           placementBottom: _placement === "bottom",
@@ -4547,7 +4642,7 @@ function registerTooltip(loader, overrides) {
       isAttachment: true,
       styleSections: false,
       variants,
-      props: {
+      props: __spreadProps(__spreadValues({
         children: {
           type: "slot",
           mergeWithParent: true,
@@ -4569,8 +4664,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"
             }
           }
         },
@@ -4598,14 +4695,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,
@@ -4618,7 +4714,7 @@ function registerTooltip(loader, overrides) {
           type: "eventHandler",
           argTypes: [{ name: "isOpen", type: "boolean" }]
         }
-      },
+      }),
       states: {
         isOpen: {
           type: "writable",
@@ -4637,6 +4733,7 @@ function registerAll(loader) {
   registerText(loader);
   registerHeading(loader);
   registerDescription(loader);
+  registerOverlayArrow(loader);
   registerSelect(loader);
   registerComboBox(loader);
   registerButton(loader);