@plasmicpkgs/react-aria 0.0.91 → 0.0.92

package/dist/react-aria.esm.js

@@ -1,30 +1,30 @@
 import React, { useEffect, useState, useMemo, useCallback, 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, TooltipContext, OverlayArrow, 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, Dialog, ComboBox, ComboBoxStateContext, Heading, ModalOverlay, Modal, 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$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) => {
+var __defProp$s = Object.defineProperty;
+var __defProps$n = Object.defineProperties;
+var __getOwnPropDescs$n = Object.getOwnPropertyDescriptors;
+var __getOwnPropSymbols$s = Object.getOwnPropertySymbols;
+var __hasOwnProp$s = Object.prototype.hasOwnProperty;
+var __propIsEnum$s = Object.prototype.propertyIsEnumerable;
+var __defNormalProp$s = (obj, key, value) => key in obj ? __defProp$s(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __spreadValues$s = (a, b) => {
   for (var prop in b || (b = {}))
-    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]);
+    if (__hasOwnProp$s.call(b, prop))
+      __defNormalProp$s(a, prop, b[prop]);
+  if (__getOwnPropSymbols$s)
+    for (var prop of __getOwnPropSymbols$s(b)) {
+      if (__propIsEnum$s.call(b, prop))
+        __defNormalProp$s(a, prop, b[prop]);
     }
   return a;
 };
-var __spreadProps$h = (a, b) => __defProps$h(a, __getOwnPropDescs$h(b));
+var __spreadProps$n = (a, b) => __defProps$n(a, __getOwnPropDescs$n(b));
 function useAutoOpen({
   props,
   open,
@@ -45,15 +45,9 @@ function useAutoOpen({
   }, [isSelected, inPlasmicCanvas]);
 }
 function registerComponentHelper(loader, component, meta, overrides) {
-  var _a;
-  meta = __spreadProps$h(__spreadValues$r({}, meta), {
-    defaultStyles: __spreadValues$r({
-      boxSizing: "border-box"
-    }, (_a = meta.defaultStyles) != null ? _a : {})
-  });
   if (overrides) {
-    meta = __spreadProps$h(__spreadValues$r(__spreadValues$r({}, meta), overrides), {
-      props: __spreadValues$r(__spreadValues$r({}, meta.props), overrides.props)
+    meta = __spreadProps$n(__spreadValues$s(__spreadValues$s({}, meta), overrides), {
+      props: __spreadValues$s(__spreadValues$s({}, meta.props), overrides.props)
     });
     if (overrides.parentComponentName) {
       meta.name = makeChildComponentName(
@@ -90,19 +84,19 @@ 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) => {
+var __defProp$r = Object.defineProperty;
+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;
 };
@@ -448,7 +442,7 @@ function getCommonProps(componentName, propNames) {
   return filteredProps;
 }
 function createPlacementProp(componentName, overrides) {
-  return __spreadValues$q({
+  return __spreadValues$r({
     type: "choice",
     description: `Default placement of the ${componentName} relative to the trigger, if there is enough space`,
     options: [
@@ -463,7 +457,7 @@ function createPlacementProp(componentName, overrides) {
   }, overrides != null ? overrides : {});
 }
 function createOffsetProp(componentName, overrides) {
-  return __spreadValues$q({
+  return __spreadValues$r({
     type: "number",
     displayName: "Offset",
     description: `Additional offset applied along the main axis between the ${componentName} and its trigger`,
@@ -471,14 +465,14 @@ function createOffsetProp(componentName, overrides) {
   }, overrides != null ? overrides : {});
 }
 function createContainerPaddingProp(componentName, overrides) {
-  return __spreadValues$q({
+  return __spreadValues$r({
     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({
+  return __spreadValues$r({
     type: "number",
     description: `The additional offset applied along the cross axis between the ${componentName} and its anchor element.`,
     advanced: true
@@ -517,6 +511,7 @@ const arrowDown = {
     borderTopColor: "black"
   }
 };
+const COMMON_STYLES = { boxSizing: "border-box" };
 
 const ARIA_COMPONENTS_VARIANTS = {
   hovered: {
@@ -602,33 +597,33 @@ function pickAriaComponentVariants(keys) {
   };
 }
 
-var __defProp$p = Object.defineProperty;
-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;
-var __defNormalProp$p = (obj, key, value) => key in obj ? __defProp$p(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
-var __spreadValues$p = (a, b) => {
+var __defProp$q = Object.defineProperty;
+var __defProps$m = Object.defineProperties;
+var __getOwnPropDescs$m = 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) => {
   for (var prop in b || (b = {}))
-    if (__hasOwnProp$p.call(b, prop))
-      __defNormalProp$p(a, prop, b[prop]);
-  if (__getOwnPropSymbols$p)
-    for (var prop of __getOwnPropSymbols$p(b)) {
-      if (__propIsEnum$p.call(b, prop))
-        __defNormalProp$p(a, prop, b[prop]);
+    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;
 };
-var __spreadProps$g = (a, b) => __defProps$g(a, __getOwnPropDescs$g(b));
+var __spreadProps$m = (a, b) => __defProps$m(a, __getOwnPropDescs$m(b));
 var __objRest$m = (source, exclude) => {
   var target = {};
   for (var prop in source)
-    if (__hasOwnProp$p.call(source, prop) && exclude.indexOf(prop) < 0)
+    if (__hasOwnProp$q.call(source, prop) && exclude.indexOf(prop) < 0)
       target[prop] = source[prop];
-  if (source != null && __getOwnPropSymbols$p)
-    for (var prop of __getOwnPropSymbols$p(source)) {
-      if (exclude.indexOf(prop) < 0 && __propIsEnum$p.call(source, prop))
+  if (source != null && __getOwnPropSymbols$q)
+    for (var prop of __getOwnPropSymbols$q(source)) {
+      if (exclude.indexOf(prop) < 0 && __propIsEnum$q.call(source, prop))
         target[prop] = source[prop];
     }
   return target;
@@ -648,7 +643,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$e(
+  return /* @__PURE__ */ React.createElement(Button, __spreadProps$m(__spreadValues$q({}, mergedProps), { style: COMMON_STYLES }), ({ isHovered, isPressed, isFocused, isFocusVisible, isDisabled }) => withObservedValues$e(
     children,
     {
       hovered: isHovered,
@@ -678,7 +673,7 @@ function registerButton(loader, overrides) {
         padding: "2px 10px",
         cursor: "pointer"
       },
-      props: __spreadProps$g(__spreadValues$p({}, getCommonProps("button", [
+      props: __spreadProps$m(__spreadValues$q({}, getCommonProps("button", [
         "autoFocus",
         "isDisabled",
         "aria-label"
@@ -733,33 +728,33 @@ const PlasmicListBoxContext = React.createContext(void 0);
 React.createContext(void 0);
 const PlasmicInputContext = React.createContext(void 0);
 
-var __defProp$o = Object.defineProperty;
-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;
-var __defNormalProp$o = (obj, key, value) => key in obj ? __defProp$o(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
-var __spreadValues$o = (a, b) => {
+var __defProp$p = Object.defineProperty;
+var __defProps$l = Object.defineProperties;
+var __getOwnPropDescs$l = Object.getOwnPropertyDescriptors;
+var __getOwnPropSymbols$p = Object.getOwnPropertySymbols;
+var __hasOwnProp$p = Object.prototype.hasOwnProperty;
+var __propIsEnum$p = Object.prototype.propertyIsEnumerable;
+var __defNormalProp$p = (obj, key, value) => key in obj ? __defProp$p(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __spreadValues$p = (a, b) => {
   for (var prop in b || (b = {}))
-    if (__hasOwnProp$o.call(b, prop))
-      __defNormalProp$o(a, prop, b[prop]);
-  if (__getOwnPropSymbols$o)
-    for (var prop of __getOwnPropSymbols$o(b)) {
-      if (__propIsEnum$o.call(b, prop))
-        __defNormalProp$o(a, prop, b[prop]);
+    if (__hasOwnProp$p.call(b, prop))
+      __defNormalProp$p(a, prop, b[prop]);
+  if (__getOwnPropSymbols$p)
+    for (var prop of __getOwnPropSymbols$p(b)) {
+      if (__propIsEnum$p.call(b, prop))
+        __defNormalProp$p(a, prop, b[prop]);
     }
   return a;
 };
-var __spreadProps$f = (a, b) => __defProps$f(a, __getOwnPropDescs$f(b));
+var __spreadProps$l = (a, b) => __defProps$l(a, __getOwnPropDescs$l(b));
 var __objRest$l = (source, exclude) => {
   var target = {};
   for (var prop in source)
-    if (__hasOwnProp$o.call(source, prop) && exclude.indexOf(prop) < 0)
+    if (__hasOwnProp$p.call(source, prop) && exclude.indexOf(prop) < 0)
       target[prop] = source[prop];
-  if (source != null && __getOwnPropSymbols$o)
-    for (var prop of __getOwnPropSymbols$o(source)) {
-      if (exclude.indexOf(prop) < 0 && __propIsEnum$o.call(source, prop))
+  if (source != null && __getOwnPropSymbols$p)
+    for (var prop of __getOwnPropSymbols$p(source)) {
+      if (exclude.indexOf(prop) < 0 && __propIsEnum$p.call(source, prop))
         target[prop] = source[prop];
     }
   return target;
@@ -820,29 +815,37 @@ function BaseCheckbox(props) {
       return void 0;
     })()
   });
-  return /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement(Checkbox, __spreadProps$f(__spreadValues$o({}, rest), { value: registeredId, key: registeredId }), ({
-    isHovered,
-    isPressed,
-    isFocused,
-    isFocusVisible,
-    isDisabled,
-    isIndeterminate,
-    isSelected,
-    isReadOnly
-  }) => withObservedValues$d(
-    children,
-    {
-      hovered: isHovered,
-      pressed: isPressed,
-      focused: isFocused,
-      focusVisible: isFocusVisible,
-      disabled: isDisabled,
-      indeterminate: isIndeterminate,
-      selected: isSelected,
-      readonly: isReadOnly
-    },
-    plasmicUpdateVariant
-  )));
+  return /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement(
+    Checkbox,
+    __spreadProps$l(__spreadValues$p({}, rest), {
+      value: registeredId,
+      key: registeredId,
+      style: COMMON_STYLES
+    }),
+    ({
+      isHovered,
+      isPressed,
+      isFocused,
+      isFocusVisible,
+      isDisabled,
+      isIndeterminate,
+      isSelected,
+      isReadOnly
+    }) => withObservedValues$d(
+      children,
+      {
+        hovered: isHovered,
+        pressed: isPressed,
+        focused: isFocused,
+        focusVisible: isFocusVisible,
+        disabled: isDisabled,
+        indeterminate: isIndeterminate,
+        selected: isSelected,
+        readonly: isReadOnly
+      },
+      plasmicUpdateVariant
+    )
+  ));
 }
 const makeDefaultCheckboxChildren = ({
   label,
@@ -901,7 +904,7 @@ function registerCheckbox(loader, overrides) {
       importPath: "@plasmicpkgs/react-aria/skinny/registerCheckbox",
       importName: "BaseCheckbox",
       variants: variants$g,
-      props: __spreadProps$f(__spreadValues$o({}, getCommonProps("checkbox", [
+      props: __spreadProps$l(__spreadValues$p({}, getCommonProps("checkbox", [
         "name",
         "isDisabled",
         "isReadOnly",
@@ -1027,40 +1030,48 @@ class OptionsItemIdManager {
   }
 }
 
-var __defProp$n = Object.defineProperty;
-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;
-var __defNormalProp$n = (obj, key, value) => key in obj ? __defProp$n(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
-var __spreadValues$n = (a, b) => {
+var __defProp$o = Object.defineProperty;
+var __defProps$k = Object.defineProperties;
+var __getOwnPropDescs$k = Object.getOwnPropertyDescriptors;
+var __getOwnPropSymbols$o = Object.getOwnPropertySymbols;
+var __hasOwnProp$o = Object.prototype.hasOwnProperty;
+var __propIsEnum$o = Object.prototype.propertyIsEnumerable;
+var __defNormalProp$o = (obj, key, value) => key in obj ? __defProp$o(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __spreadValues$o = (a, b) => {
   for (var prop in b || (b = {}))
-    if (__hasOwnProp$n.call(b, prop))
-      __defNormalProp$n(a, prop, b[prop]);
-  if (__getOwnPropSymbols$n)
-    for (var prop of __getOwnPropSymbols$n(b)) {
-      if (__propIsEnum$n.call(b, prop))
-        __defNormalProp$n(a, prop, b[prop]);
+    if (__hasOwnProp$o.call(b, prop))
+      __defNormalProp$o(a, prop, b[prop]);
+  if (__getOwnPropSymbols$o)
+    for (var prop of __getOwnPropSymbols$o(b)) {
+      if (__propIsEnum$o.call(b, prop))
+        __defNormalProp$o(a, prop, b[prop]);
     }
   return a;
 };
-var __spreadProps$e = (a, b) => __defProps$e(a, __getOwnPropDescs$e(b));
+var __spreadProps$k = (a, b) => __defProps$k(a, __getOwnPropDescs$k(b));
 var __objRest$k = (source, exclude) => {
   var target = {};
   for (var prop in source)
-    if (__hasOwnProp$n.call(source, prop) && exclude.indexOf(prop) < 0)
+    if (__hasOwnProp$o.call(source, prop) && exclude.indexOf(prop) < 0)
       target[prop] = source[prop];
-  if (source != null && __getOwnPropSymbols$n)
-    for (var prop of __getOwnPropSymbols$n(source)) {
-      if (exclude.indexOf(prop) < 0 && __propIsEnum$n.call(source, prop))
+  if (source != null && __getOwnPropSymbols$o)
+    for (var prop of __getOwnPropSymbols$o(source)) {
+      if (exclude.indexOf(prop) < 0 && __propIsEnum$o.call(source, prop))
         target[prop] = source[prop];
     }
   return target;
 };
 function BaseText(_a) {
   var _b = _a, { children, slot, className } = _b, rest = __objRest$k(_b, ["children", "slot", "className"]);
-  return /* @__PURE__ */ React.createElement(Text, __spreadProps$e(__spreadValues$n({}, extractPlasmicDataProps(rest)), { slot, className }), children);
+  return /* @__PURE__ */ React.createElement(
+    Text,
+    __spreadProps$k(__spreadValues$o({}, extractPlasmicDataProps(rest)), {
+      slot,
+      className,
+      style: COMMON_STYLES
+    }),
+    children
+  );
 }
 const TEXT_COMPONENT_NAME = makeComponentName("text");
 function registerText(loader, overrides) {
@@ -1094,28 +1105,28 @@ function registerText(loader, overrides) {
   );
 }
 
-var __defProp$m = Object.defineProperty;
-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;
-var __defNormalProp$m = (obj, key, value) => key in obj ? __defProp$m(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
-var __spreadValues$m = (a, b) => {
+var __defProp$n = Object.defineProperty;
+var __defProps$j = Object.defineProperties;
+var __getOwnPropDescs$j = Object.getOwnPropertyDescriptors;
+var __getOwnPropSymbols$n = Object.getOwnPropertySymbols;
+var __hasOwnProp$n = Object.prototype.hasOwnProperty;
+var __propIsEnum$n = Object.prototype.propertyIsEnumerable;
+var __defNormalProp$n = (obj, key, value) => key in obj ? __defProp$n(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __spreadValues$n = (a, b) => {
   for (var prop in b || (b = {}))
-    if (__hasOwnProp$m.call(b, prop))
-      __defNormalProp$m(a, prop, b[prop]);
-  if (__getOwnPropSymbols$m)
-    for (var prop of __getOwnPropSymbols$m(b)) {
-      if (__propIsEnum$m.call(b, prop))
-        __defNormalProp$m(a, prop, b[prop]);
+    if (__hasOwnProp$n.call(b, prop))
+      __defNormalProp$n(a, prop, b[prop]);
+  if (__getOwnPropSymbols$n)
+    for (var prop of __getOwnPropSymbols$n(b)) {
+      if (__propIsEnum$n.call(b, prop))
+        __defNormalProp$n(a, prop, b[prop]);
     }
   return a;
 };
-var __spreadProps$d = (a, b) => __defProps$d(a, __getOwnPropDescs$d(b));
+var __spreadProps$j = (a, b) => __defProps$j(a, __getOwnPropDescs$j(b));
 const DESCRIPTION_COMPONENT_NAME = makeComponentName("description");
 function registerDescription(loader, overrides) {
-  return registerText(loader, __spreadProps$d(__spreadValues$m({}, overrides), {
+  return registerText(loader, __spreadProps$j(__spreadValues$n({}, overrides), {
     name: DESCRIPTION_COMPONENT_NAME,
     displayName: "Aria Description",
     props: {
@@ -1128,40 +1139,47 @@ function registerDescription(loader, overrides) {
   }));
 }
 
-var __defProp$l = Object.defineProperty;
-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;
-var __defNormalProp$l = (obj, key, value) => key in obj ? __defProp$l(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
-var __spreadValues$l = (a, b) => {
+var __defProp$m = Object.defineProperty;
+var __defProps$i = Object.defineProperties;
+var __getOwnPropDescs$i = Object.getOwnPropertyDescriptors;
+var __getOwnPropSymbols$m = Object.getOwnPropertySymbols;
+var __hasOwnProp$m = Object.prototype.hasOwnProperty;
+var __propIsEnum$m = Object.prototype.propertyIsEnumerable;
+var __defNormalProp$m = (obj, key, value) => key in obj ? __defProp$m(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __spreadValues$m = (a, b) => {
   for (var prop in b || (b = {}))
-    if (__hasOwnProp$l.call(b, prop))
-      __defNormalProp$l(a, prop, b[prop]);
-  if (__getOwnPropSymbols$l)
-    for (var prop of __getOwnPropSymbols$l(b)) {
-      if (__propIsEnum$l.call(b, prop))
-        __defNormalProp$l(a, prop, b[prop]);
+    if (__hasOwnProp$m.call(b, prop))
+      __defNormalProp$m(a, prop, b[prop]);
+  if (__getOwnPropSymbols$m)
+    for (var prop of __getOwnPropSymbols$m(b)) {
+      if (__propIsEnum$m.call(b, prop))
+        __defNormalProp$m(a, prop, b[prop]);
     }
   return a;
 };
-var __spreadProps$c = (a, b) => __defProps$c(a, __getOwnPropDescs$c(b));
+var __spreadProps$i = (a, b) => __defProps$i(a, __getOwnPropDescs$i(b));
 var __objRest$j = (source, exclude) => {
   var target = {};
   for (var prop in source)
-    if (__hasOwnProp$l.call(source, prop) && exclude.indexOf(prop) < 0)
+    if (__hasOwnProp$m.call(source, prop) && exclude.indexOf(prop) < 0)
       target[prop] = source[prop];
-  if (source != null && __getOwnPropSymbols$l)
-    for (var prop of __getOwnPropSymbols$l(source)) {
-      if (exclude.indexOf(prop) < 0 && __propIsEnum$l.call(source, prop))
+  if (source != null && __getOwnPropSymbols$m)
+    for (var prop of __getOwnPropSymbols$m(source)) {
+      if (exclude.indexOf(prop) < 0 && __propIsEnum$m.call(source, prop))
         target[prop] = source[prop];
     }
   return target;
 };
 function BaseLabel(_a) {
   var _b = _a, { children, className } = _b, rest = __objRest$j(_b, ["children", "className"]);
-  return /* @__PURE__ */ React.createElement(Label, __spreadProps$c(__spreadValues$l({}, extractPlasmicDataProps(rest)), { className }), children);
+  return /* @__PURE__ */ React.createElement(
+    Label,
+    __spreadProps$i(__spreadValues$m({}, extractPlasmicDataProps(rest)), {
+      className,
+      style: COMMON_STYLES
+    }),
+    children
+  );
 }
 const LABEL_COMPONENT_NAME = makeComponentName("label");
 function registerLabel(loader, overrides) {
@@ -1192,33 +1210,33 @@ function registerLabel(loader, overrides) {
   );
 }
 
-var __defProp$k = Object.defineProperty;
-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;
-var __defNormalProp$k = (obj, key, value) => key in obj ? __defProp$k(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
-var __spreadValues$k = (a, b) => {
+var __defProp$l = Object.defineProperty;
+var __defProps$h = Object.defineProperties;
+var __getOwnPropDescs$h = Object.getOwnPropertyDescriptors;
+var __getOwnPropSymbols$l = Object.getOwnPropertySymbols;
+var __hasOwnProp$l = Object.prototype.hasOwnProperty;
+var __propIsEnum$l = Object.prototype.propertyIsEnumerable;
+var __defNormalProp$l = (obj, key, value) => key in obj ? __defProp$l(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __spreadValues$l = (a, b) => {
   for (var prop in b || (b = {}))
-    if (__hasOwnProp$k.call(b, prop))
-      __defNormalProp$k(a, prop, b[prop]);
-  if (__getOwnPropSymbols$k)
-    for (var prop of __getOwnPropSymbols$k(b)) {
-      if (__propIsEnum$k.call(b, prop))
-        __defNormalProp$k(a, prop, b[prop]);
+    if (__hasOwnProp$l.call(b, prop))
+      __defNormalProp$l(a, prop, b[prop]);
+  if (__getOwnPropSymbols$l)
+    for (var prop of __getOwnPropSymbols$l(b)) {
+      if (__propIsEnum$l.call(b, prop))
+        __defNormalProp$l(a, prop, b[prop]);
     }
   return a;
 };
-var __spreadProps$b = (a, b) => __defProps$b(a, __getOwnPropDescs$b(b));
+var __spreadProps$h = (a, b) => __defProps$h(a, __getOwnPropDescs$h(b));
 var __objRest$i = (source, exclude) => {
   var target = {};
   for (var prop in source)
-    if (__hasOwnProp$k.call(source, prop) && exclude.indexOf(prop) < 0)
+    if (__hasOwnProp$l.call(source, prop) && exclude.indexOf(prop) < 0)
       target[prop] = source[prop];
-  if (source != null && __getOwnPropSymbols$k)
-    for (var prop of __getOwnPropSymbols$k(source)) {
-      if (exclude.indexOf(prop) < 0 && __propIsEnum$k.call(source, prop))
+  if (source != null && __getOwnPropSymbols$l)
+    for (var prop of __getOwnPropSymbols$l(source)) {
+      if (exclude.indexOf(prop) < 0 && __propIsEnum$l.call(source, prop))
         target[prop] = source[prop];
     }
   return target;
@@ -1241,7 +1259,7 @@ function BaseCheckboxGroup(props) {
       setIds(_ids);
     });
   }, [idManager]);
-  return /* @__PURE__ */ React.createElement(PlasmicCheckboxGroupContext.Provider, { value: __spreadProps$b(__spreadValues$k({}, rest), { idManager }) }, /* @__PURE__ */ React.createElement(CheckboxGroup, __spreadValues$k({}, rest), ({ isDisabled, isReadOnly }) => withObservedValues$c(
+  return /* @__PURE__ */ React.createElement(PlasmicCheckboxGroupContext.Provider, { value: __spreadProps$h(__spreadValues$l({}, rest), { idManager }) }, /* @__PURE__ */ React.createElement(CheckboxGroup, __spreadProps$h(__spreadValues$l({}, rest), { style: COMMON_STYLES }), ({ isDisabled, isReadOnly }) => withObservedValues$c(
     children,
     {
       disabled: isDisabled,
@@ -1261,7 +1279,7 @@ function registerCheckboxGroup(loader, overrides) {
       importPath: "@plasmicpkgs/react-aria/skinny/registerCheckboxGroup",
       importName: "BaseCheckboxGroup",
       variants: variants$f,
-      props: __spreadProps$b(__spreadValues$k({}, getCommonProps("checkbox group", [
+      props: __spreadProps$h(__spreadValues$l({}, getCommonProps("checkbox group", [
         "name",
         "isDisabled",
         "isReadOnly",
@@ -1376,30 +1394,33 @@ function registerCheckboxGroup(loader, overrides) {
   );
 }
 
-var __defProp$j = Object.defineProperty;
-var __getOwnPropSymbols$j = Object.getOwnPropertySymbols;
-var __hasOwnProp$j = Object.prototype.hasOwnProperty;
-var __propIsEnum$j = Object.prototype.propertyIsEnumerable;
-var __defNormalProp$j = (obj, key, value) => key in obj ? __defProp$j(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
-var __spreadValues$j = (a, b) => {
+var __defProp$k = Object.defineProperty;
+var __defProps$g = Object.defineProperties;
+var __getOwnPropDescs$g = Object.getOwnPropertyDescriptors;
+var __getOwnPropSymbols$k = Object.getOwnPropertySymbols;
+var __hasOwnProp$k = Object.prototype.hasOwnProperty;
+var __propIsEnum$k = Object.prototype.propertyIsEnumerable;
+var __defNormalProp$k = (obj, key, value) => key in obj ? __defProp$k(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __spreadValues$k = (a, b) => {
   for (var prop in b || (b = {}))
-    if (__hasOwnProp$j.call(b, prop))
-      __defNormalProp$j(a, prop, b[prop]);
-  if (__getOwnPropSymbols$j)
-    for (var prop of __getOwnPropSymbols$j(b)) {
-      if (__propIsEnum$j.call(b, prop))
-        __defNormalProp$j(a, prop, b[prop]);
+    if (__hasOwnProp$k.call(b, prop))
+      __defNormalProp$k(a, prop, b[prop]);
+  if (__getOwnPropSymbols$k)
+    for (var prop of __getOwnPropSymbols$k(b)) {
+      if (__propIsEnum$k.call(b, prop))
+        __defNormalProp$k(a, prop, b[prop]);
     }
   return a;
 };
+var __spreadProps$g = (a, b) => __defProps$g(a, __getOwnPropDescs$g(b));
 var __objRest$h = (source, exclude) => {
   var target = {};
   for (var prop in source)
-    if (__hasOwnProp$j.call(source, prop) && exclude.indexOf(prop) < 0)
+    if (__hasOwnProp$k.call(source, prop) && exclude.indexOf(prop) < 0)
       target[prop] = source[prop];
-  if (source != null && __getOwnPropSymbols$j)
-    for (var prop of __getOwnPropSymbols$j(source)) {
-      if (exclude.indexOf(prop) < 0 && __propIsEnum$j.call(source, prop))
+  if (source != null && __getOwnPropSymbols$k)
+    for (var prop of __getOwnPropSymbols$k(source)) {
+      if (exclude.indexOf(prop) < 0 && __propIsEnum$k.call(source, prop))
         target[prop] = source[prop];
     }
   return target;
@@ -1461,7 +1482,7 @@ function BaseInput(props) {
     autoComplete: resolveAutoComplete(autoComplete),
     className: classNameProp
   });
-  return /* @__PURE__ */ React.createElement(Input, __spreadValues$j({}, mergedProps));
+  return /* @__PURE__ */ React.createElement(Input, __spreadProps$g(__spreadValues$k({}, mergedProps), { style: COMMON_STYLES }));
 }
 const INPUT_COMPONENT_NAME = makeComponentName("input");
 function registerInput(loader, overrides) {
@@ -1481,7 +1502,7 @@ function registerInput(loader, overrides) {
         borderColor: "black",
         padding: "4px 10px"
       },
-      props: __spreadValues$j({}, getCommonProps("Input", [
+      props: __spreadValues$k({}, getCommonProps("Input", [
         "name",
         "disabled",
         "readOnly",
@@ -1512,7 +1533,7 @@ function registerInput(loader, overrides) {
         "onInput"
       ])),
       states: {
-        value: __spreadValues$j({
+        value: __spreadValues$k({
           type: "writable",
           valueProp: "value",
           onChangeProp: "onChange",
@@ -1529,30 +1550,33 @@ function registerInput(loader, overrides) {
   );
 }
 
-var __defProp$i = Object.defineProperty;
-var __getOwnPropSymbols$i = Object.getOwnPropertySymbols;
-var __hasOwnProp$i = Object.prototype.hasOwnProperty;
-var __propIsEnum$i = Object.prototype.propertyIsEnumerable;
-var __defNormalProp$i = (obj, key, value) => key in obj ? __defProp$i(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
-var __spreadValues$i = (a, b) => {
+var __defProp$j = Object.defineProperty;
+var __defProps$f = Object.defineProperties;
+var __getOwnPropDescs$f = Object.getOwnPropertyDescriptors;
+var __getOwnPropSymbols$j = Object.getOwnPropertySymbols;
+var __hasOwnProp$j = Object.prototype.hasOwnProperty;
+var __propIsEnum$j = Object.prototype.propertyIsEnumerable;
+var __defNormalProp$j = (obj, key, value) => key in obj ? __defProp$j(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __spreadValues$j = (a, b) => {
   for (var prop in b || (b = {}))
-    if (__hasOwnProp$i.call(b, prop))
-      __defNormalProp$i(a, prop, b[prop]);
-  if (__getOwnPropSymbols$i)
-    for (var prop of __getOwnPropSymbols$i(b)) {
-      if (__propIsEnum$i.call(b, prop))
-        __defNormalProp$i(a, prop, b[prop]);
+    if (__hasOwnProp$j.call(b, prop))
+      __defNormalProp$j(a, prop, b[prop]);
+  if (__getOwnPropSymbols$j)
+    for (var prop of __getOwnPropSymbols$j(b)) {
+      if (__propIsEnum$j.call(b, prop))
+        __defNormalProp$j(a, prop, b[prop]);
     }
   return a;
 };
+var __spreadProps$f = (a, b) => __defProps$f(a, __getOwnPropDescs$f(b));
 var __objRest$g = (source, exclude) => {
   var target = {};
   for (var prop in source)
-    if (__hasOwnProp$i.call(source, prop) && exclude.indexOf(prop) < 0)
+    if (__hasOwnProp$j.call(source, prop) && exclude.indexOf(prop) < 0)
       target[prop] = source[prop];
-  if (source != null && __getOwnPropSymbols$i)
-    for (var prop of __getOwnPropSymbols$i(source)) {
-      if (exclude.indexOf(prop) < 0 && __propIsEnum$i.call(source, prop))
+  if (source != null && __getOwnPropSymbols$j)
+    for (var prop of __getOwnPropSymbols$j(source)) {
+      if (exclude.indexOf(prop) < 0 && __propIsEnum$j.call(source, prop))
         target[prop] = source[prop];
     }
   return target;
@@ -1601,25 +1625,34 @@ function BaseListBoxItem(props) {
       return void 0;
     })()
   });
-  const listboxItem = /* @__PURE__ */ React.createElement(ListBoxItem, __spreadValues$i({ key: registeredId, id: registeredId }, rest), ({
-    isHovered,
-    isPressed,
-    isFocused,
-    isFocusVisible,
-    isSelected,
-    isDisabled
-  }) => withObservedValues$b(
-    children,
-    {
-      hovered: isHovered,
-      pressed: isPressed,
-      focused: isFocused,
-      focusVisible: isFocusVisible,
-      selected: isSelected,
-      disabled: isDisabled
-    },
-    plasmicUpdateVariant
-  ));
+  const listboxItem = /* @__PURE__ */ React.createElement(
+    ListBoxItem,
+    __spreadProps$f(__spreadValues$j({
+      key: registeredId,
+      id: registeredId
+    }, rest), {
+      style: COMMON_STYLES
+    }),
+    ({
+      isHovered,
+      isPressed,
+      isFocused,
+      isFocusVisible,
+      isSelected,
+      isDisabled
+    }) => withObservedValues$b(
+      children,
+      {
+        hovered: isHovered,
+        pressed: isPressed,
+        focused: isFocused,
+        focusVisible: isFocusVisible,
+        selected: isSelected,
+        disabled: isDisabled
+      },
+      plasmicUpdateVariant
+    )
+  );
   if (isStandalone) {
     return /* @__PURE__ */ React.createElement(ListBox, { selectionMode: "single" }, listboxItem);
   }
@@ -1702,30 +1735,33 @@ function registerListBoxItem(loader, overrides) {
   );
 }
 
-var __defProp$h = Object.defineProperty;
-var __getOwnPropSymbols$h = Object.getOwnPropertySymbols;
-var __hasOwnProp$h = Object.prototype.hasOwnProperty;
-var __propIsEnum$h = Object.prototype.propertyIsEnumerable;
-var __defNormalProp$h = (obj, key, value) => key in obj ? __defProp$h(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
-var __spreadValues$h = (a, b) => {
+var __defProp$i = Object.defineProperty;
+var __defProps$e = Object.defineProperties;
+var __getOwnPropDescs$e = Object.getOwnPropertyDescriptors;
+var __getOwnPropSymbols$i = Object.getOwnPropertySymbols;
+var __hasOwnProp$i = Object.prototype.hasOwnProperty;
+var __propIsEnum$i = Object.prototype.propertyIsEnumerable;
+var __defNormalProp$i = (obj, key, value) => key in obj ? __defProp$i(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __spreadValues$i = (a, b) => {
   for (var prop in b || (b = {}))
-    if (__hasOwnProp$h.call(b, prop))
-      __defNormalProp$h(a, prop, b[prop]);
-  if (__getOwnPropSymbols$h)
-    for (var prop of __getOwnPropSymbols$h(b)) {
-      if (__propIsEnum$h.call(b, prop))
-        __defNormalProp$h(a, prop, b[prop]);
+    if (__hasOwnProp$i.call(b, prop))
+      __defNormalProp$i(a, prop, b[prop]);
+  if (__getOwnPropSymbols$i)
+    for (var prop of __getOwnPropSymbols$i(b)) {
+      if (__propIsEnum$i.call(b, prop))
+        __defNormalProp$i(a, prop, b[prop]);
     }
   return a;
 };
+var __spreadProps$e = (a, b) => __defProps$e(a, __getOwnPropDescs$e(b));
 var __objRest$f = (source, exclude) => {
   var target = {};
   for (var prop in source)
-    if (__hasOwnProp$h.call(source, prop) && exclude.indexOf(prop) < 0)
+    if (__hasOwnProp$i.call(source, prop) && exclude.indexOf(prop) < 0)
       target[prop] = source[prop];
-  if (source != null && __getOwnPropSymbols$h)
-    for (var prop of __getOwnPropSymbols$h(source)) {
-      if (exclude.indexOf(prop) < 0 && __propIsEnum$h.call(source, prop))
+  if (source != null && __getOwnPropSymbols$i)
+    for (var prop of __getOwnPropSymbols$i(source)) {
+      if (exclude.indexOf(prop) < 0 && __propIsEnum$i.call(source, prop))
         target[prop] = source[prop];
     }
   return target;
@@ -1734,7 +1770,7 @@ function BaseSection(props) {
   const _a = props, { header, items } = _a, rest = __objRest$f(_a, ["header", "items"]);
   const contextProps = React.useContext(PlasmicListBoxContext);
   const isStandalone = !contextProps;
-  const section = /* @__PURE__ */ React.createElement(Section, __spreadValues$h({}, rest), /* @__PURE__ */ React.createElement(Header, null, header), items);
+  const section = /* @__PURE__ */ React.createElement(Section, __spreadProps$e(__spreadValues$i({}, rest), { style: COMMON_STYLES }), /* @__PURE__ */ React.createElement(Header, null, header), items);
   if (isStandalone) {
     return (
       // BaseListbox should give section a listbox context (that it can't be used without)
@@ -1780,30 +1816,30 @@ function registerSection(loader, overrides) {
   );
 }
 
-var __defProp$g = Object.defineProperty;
-var __getOwnPropSymbols$g = Object.getOwnPropertySymbols;
-var __hasOwnProp$g = Object.prototype.hasOwnProperty;
-var __propIsEnum$g = Object.prototype.propertyIsEnumerable;
-var __defNormalProp$g = (obj, key, value) => key in obj ? __defProp$g(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
-var __spreadValues$g = (a, b) => {
+var __defProp$h = Object.defineProperty;
+var __getOwnPropSymbols$h = Object.getOwnPropertySymbols;
+var __hasOwnProp$h = Object.prototype.hasOwnProperty;
+var __propIsEnum$h = Object.prototype.propertyIsEnumerable;
+var __defNormalProp$h = (obj, key, value) => key in obj ? __defProp$h(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __spreadValues$h = (a, b) => {
   for (var prop in b || (b = {}))
-    if (__hasOwnProp$g.call(b, prop))
-      __defNormalProp$g(a, prop, b[prop]);
-  if (__getOwnPropSymbols$g)
-    for (var prop of __getOwnPropSymbols$g(b)) {
-      if (__propIsEnum$g.call(b, prop))
-        __defNormalProp$g(a, prop, b[prop]);
+    if (__hasOwnProp$h.call(b, prop))
+      __defNormalProp$h(a, prop, b[prop]);
+  if (__getOwnPropSymbols$h)
+    for (var prop of __getOwnPropSymbols$h(b)) {
+      if (__propIsEnum$h.call(b, prop))
+        __defNormalProp$h(a, prop, b[prop]);
     }
   return a;
 };
 var __objRest$e = (source, exclude) => {
   var target = {};
   for (var prop in source)
-    if (__hasOwnProp$g.call(source, prop) && exclude.indexOf(prop) < 0)
+    if (__hasOwnProp$h.call(source, prop) && exclude.indexOf(prop) < 0)
       target[prop] = source[prop];
-  if (source != null && __getOwnPropSymbols$g)
-    for (var prop of __getOwnPropSymbols$g(source)) {
-      if (exclude.indexOf(prop) < 0 && __propIsEnum$g.call(source, prop))
+  if (source != null && __getOwnPropSymbols$h)
+    for (var prop of __getOwnPropSymbols$h(source)) {
+      if (exclude.indexOf(prop) < 0 && __propIsEnum$h.call(source, prop))
         target[prop] = source[prop];
     }
   return target;
@@ -1871,10 +1907,11 @@ function BaseListBox(props) {
   );
   const listbox = /* @__PURE__ */ React.createElement(
     ListBox,
-    __spreadValues$g({
+    __spreadValues$h({
       selectedKeys: normalizeSelectedKeys(selectedKeys),
       defaultSelectedKeys: normalizeSelectedKeys(defaultSelectedKeys),
-      className: classNameProp
+      className: classNameProp,
+      style: COMMON_STYLES
     }, rest),
     children
   );
@@ -2041,7 +2078,7 @@ function registerListBox(loader, overrides) {
         }
       },
       states: {
-        selectedValue: __spreadValues$g({
+        selectedValue: __spreadValues$h({
           type: "writable",
           valueProp: "selectedKeys",
           hidden: (props, ctx) => !(ctx == null ? void 0 : ctx.isStandalone) || props.selectionMode === "none",
@@ -2060,30 +2097,30 @@ function registerListBox(loader, overrides) {
   );
 }
 
-var __defProp$f = Object.defineProperty;
-var __getOwnPropSymbols$f = Object.getOwnPropertySymbols;
-var __hasOwnProp$f = Object.prototype.hasOwnProperty;
-var __propIsEnum$f = Object.prototype.propertyIsEnumerable;
-var __defNormalProp$f = (obj, key, value) => key in obj ? __defProp$f(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
-var __spreadValues$f = (a, b) => {
+var __defProp$g = Object.defineProperty;
+var __getOwnPropSymbols$g = Object.getOwnPropertySymbols;
+var __hasOwnProp$g = Object.prototype.hasOwnProperty;
+var __propIsEnum$g = Object.prototype.propertyIsEnumerable;
+var __defNormalProp$g = (obj, key, value) => key in obj ? __defProp$g(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __spreadValues$g = (a, b) => {
   for (var prop in b || (b = {}))
-    if (__hasOwnProp$f.call(b, prop))
-      __defNormalProp$f(a, prop, b[prop]);
-  if (__getOwnPropSymbols$f)
-    for (var prop of __getOwnPropSymbols$f(b)) {
-      if (__propIsEnum$f.call(b, prop))
-        __defNormalProp$f(a, prop, b[prop]);
+    if (__hasOwnProp$g.call(b, prop))
+      __defNormalProp$g(a, prop, b[prop]);
+  if (__getOwnPropSymbols$g)
+    for (var prop of __getOwnPropSymbols$g(b)) {
+      if (__propIsEnum$g.call(b, prop))
+        __defNormalProp$g(a, prop, b[prop]);
     }
   return a;
 };
 var __objRest$d = (source, exclude) => {
   var target = {};
   for (var prop in source)
-    if (__hasOwnProp$f.call(source, prop) && exclude.indexOf(prop) < 0)
+    if (__hasOwnProp$g.call(source, prop) && exclude.indexOf(prop) < 0)
       target[prop] = source[prop];
-  if (source != null && __getOwnPropSymbols$f)
-    for (var prop of __getOwnPropSymbols$f(source)) {
-      if (exclude.indexOf(prop) < 0 && __propIsEnum$f.call(source, prop))
+  if (source != null && __getOwnPropSymbols$g)
+    for (var prop of __getOwnPropSymbols$g(source)) {
+      if (exclude.indexOf(prop) < 0 && __propIsEnum$g.call(source, prop))
         target[prop] = source[prop];
     }
   return target;
@@ -2134,13 +2171,15 @@ function BasePopover(props) {
       canMatchTriggerWidth: hasTrigger
     });
   }, [hasTrigger, setControlContextData]);
+  const dialogInCanvas = /* @__PURE__ */ React.createElement("div", null, children);
+  const dialog = /* @__PURE__ */ React.createElement(Dialog, null, children);
   return /* @__PURE__ */ React.createElement(React.Fragment, null, isStandalone && /* @__PURE__ */ React.createElement("div", { ref: triggerRef }), /* @__PURE__ */ React.createElement(
     Popover,
-    __spreadValues$f({
-      style: matchTriggerWidthProp ? { width: `var(--trigger-width)` } : void 0
+    __spreadValues$g({
+      style: __spreadValues$g(__spreadValues$g({}, matchTriggerWidthProp ? { width: `var(--trigger-width)` } : {}), COMMON_STYLES)
     }, mergedProps),
     ({ placement }) => withObservedValues$a(
-      children,
+      canvasContext || isStandalone ? dialogInCanvas : dialog,
       {
         placementTop: placement === "top",
         placementBottom: placement === "bottom",
@@ -2169,7 +2208,7 @@ function registerPopover(loader, overrides) {
         width: "300px",
         backgroundColor: "#FDE3C3"
       },
-      props: __spreadValues$f({
+      props: __spreadValues$g({
         children: {
           type: "slot",
           mergeWithParent: true,
@@ -2228,33 +2267,33 @@ function registerPopover(loader, overrides) {
   );
 }
 
-var __defProp$e = Object.defineProperty;
-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;
-var __defNormalProp$e = (obj, key, value) => key in obj ? __defProp$e(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
-var __spreadValues$e = (a, b) => {
+var __defProp$f = Object.defineProperty;
+var __defProps$d = Object.defineProperties;
+var __getOwnPropDescs$d = Object.getOwnPropertyDescriptors;
+var __getOwnPropSymbols$f = Object.getOwnPropertySymbols;
+var __hasOwnProp$f = Object.prototype.hasOwnProperty;
+var __propIsEnum$f = Object.prototype.propertyIsEnumerable;
+var __defNormalProp$f = (obj, key, value) => key in obj ? __defProp$f(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __spreadValues$f = (a, b) => {
   for (var prop in b || (b = {}))
-    if (__hasOwnProp$e.call(b, prop))
-      __defNormalProp$e(a, prop, b[prop]);
-  if (__getOwnPropSymbols$e)
-    for (var prop of __getOwnPropSymbols$e(b)) {
-      if (__propIsEnum$e.call(b, prop))
-        __defNormalProp$e(a, prop, b[prop]);
+    if (__hasOwnProp$f.call(b, prop))
+      __defNormalProp$f(a, prop, b[prop]);
+  if (__getOwnPropSymbols$f)
+    for (var prop of __getOwnPropSymbols$f(b)) {
+      if (__propIsEnum$f.call(b, prop))
+        __defNormalProp$f(a, prop, b[prop]);
     }
   return a;
 };
-var __spreadProps$a = (a, b) => __defProps$a(a, __getOwnPropDescs$a(b));
+var __spreadProps$d = (a, b) => __defProps$d(a, __getOwnPropDescs$d(b));
 var __objRest$c = (source, exclude) => {
   var target = {};
   for (var prop in source)
-    if (__hasOwnProp$e.call(source, prop) && exclude.indexOf(prop) < 0)
+    if (__hasOwnProp$f.call(source, prop) && exclude.indexOf(prop) < 0)
       target[prop] = source[prop];
-  if (source != null && __getOwnPropSymbols$e)
-    for (var prop of __getOwnPropSymbols$e(source)) {
-      if (exclude.indexOf(prop) < 0 && __propIsEnum$e.call(source, prop))
+  if (source != null && __getOwnPropSymbols$f)
+    for (var prop of __getOwnPropSymbols$f(source)) {
+      if (exclude.indexOf(prop) < 0 && __propIsEnum$f.call(source, prop))
         target[prop] = source[prop];
     }
   return target;
@@ -2299,14 +2338,14 @@ function BaseComboBox(props) {
       });
     });
   }, []);
-  return /* @__PURE__ */ React.createElement(ComboBox, __spreadValues$e({ className: classNameProp }, rest), /* @__PURE__ */ React.createElement(PlasmicPopoverTriggerContext.Provider, { value: true }, /* @__PURE__ */ React.createElement(
+  return /* @__PURE__ */ React.createElement(ComboBox, __spreadProps$d(__spreadValues$f({ className: classNameProp }, rest), { style: COMMON_STYLES }), /* @__PURE__ */ React.createElement(PlasmicPopoverTriggerContext.Provider, { value: true }, /* @__PURE__ */ React.createElement(
     PlasmicListBoxContext.Provider,
     {
       value: {
         idManager
       }
     },
-    /* @__PURE__ */ React.createElement(PlasmicInputContext.Provider, { value: { isUncontrolled: true } }, /* @__PURE__ */ React.createElement(ComboboxAutoOpen, __spreadValues$e({}, props)), children)
+    /* @__PURE__ */ React.createElement(PlasmicInputContext.Provider, { value: { isUncontrolled: true } }, /* @__PURE__ */ React.createElement(ComboboxAutoOpen, __spreadValues$f({}, props)), children)
   )));
 }
 function registerComboBox(loader) {
@@ -2316,7 +2355,7 @@ function registerComboBox(loader) {
     importPath: "@plasmicpkgs/react-aria/skinny/registerComboBox",
     importName: "BaseComboBox",
     variants: COMBOBOX_VARIANTS_DATA,
-    props: __spreadProps$a(__spreadValues$e({}, getCommonProps("ComboBox", [
+    props: __spreadProps$d(__spreadValues$f({}, getCommonProps("ComboBox", [
       "name",
       "aria-label",
       "isDisabled"
@@ -2446,37 +2485,40 @@ function registerComboBox(loader) {
   });
 }
 
-var __defProp$d = Object.defineProperty;
-var __getOwnPropSymbols$d = Object.getOwnPropertySymbols;
-var __hasOwnProp$d = Object.prototype.hasOwnProperty;
-var __propIsEnum$d = Object.prototype.propertyIsEnumerable;
-var __defNormalProp$d = (obj, key, value) => key in obj ? __defProp$d(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
-var __spreadValues$d = (a, b) => {
+var __defProp$e = Object.defineProperty;
+var __defProps$c = Object.defineProperties;
+var __getOwnPropDescs$c = Object.getOwnPropertyDescriptors;
+var __getOwnPropSymbols$e = Object.getOwnPropertySymbols;
+var __hasOwnProp$e = Object.prototype.hasOwnProperty;
+var __propIsEnum$e = Object.prototype.propertyIsEnumerable;
+var __defNormalProp$e = (obj, key, value) => key in obj ? __defProp$e(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __spreadValues$e = (a, b) => {
   for (var prop in b || (b = {}))
-    if (__hasOwnProp$d.call(b, prop))
-      __defNormalProp$d(a, prop, b[prop]);
-  if (__getOwnPropSymbols$d)
-    for (var prop of __getOwnPropSymbols$d(b)) {
-      if (__propIsEnum$d.call(b, prop))
-        __defNormalProp$d(a, prop, b[prop]);
+    if (__hasOwnProp$e.call(b, prop))
+      __defNormalProp$e(a, prop, b[prop]);
+  if (__getOwnPropSymbols$e)
+    for (var prop of __getOwnPropSymbols$e(b)) {
+      if (__propIsEnum$e.call(b, prop))
+        __defNormalProp$e(a, prop, b[prop]);
     }
   return a;
 };
+var __spreadProps$c = (a, b) => __defProps$c(a, __getOwnPropDescs$c(b));
 var __objRest$b = (source, exclude) => {
   var target = {};
   for (var prop in source)
-    if (__hasOwnProp$d.call(source, prop) && exclude.indexOf(prop) < 0)
+    if (__hasOwnProp$e.call(source, prop) && exclude.indexOf(prop) < 0)
       target[prop] = source[prop];
-  if (source != null && __getOwnPropSymbols$d)
-    for (var prop of __getOwnPropSymbols$d(source)) {
-      if (exclude.indexOf(prop) < 0 && __propIsEnum$d.call(source, prop))
+  if (source != null && __getOwnPropSymbols$e)
+    for (var prop of __getOwnPropSymbols$e(source)) {
+      if (exclude.indexOf(prop) < 0 && __propIsEnum$e.call(source, prop))
         target[prop] = source[prop];
     }
   return target;
 };
 function BaseHeading(_a) {
   var _b = _a, { children } = _b, rest = __objRest$b(_b, ["children"]);
-  return /* @__PURE__ */ React.createElement(Heading, __spreadValues$d({}, rest), children);
+  return /* @__PURE__ */ React.createElement(Heading, __spreadProps$c(__spreadValues$e({}, rest), { style: COMMON_STYLES }), children);
 }
 const HEADING_COMPONENT_NAME = makeComponentName("heading");
 function registerHeading(loader, overrides) {
@@ -2514,33 +2556,33 @@ function registerHeading(loader, overrides) {
   );
 }
 
-var __defProp$c = Object.defineProperty;
-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;
-var __defNormalProp$c = (obj, key, value) => key in obj ? __defProp$c(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
-var __spreadValues$c = (a, b) => {
+var __defProp$d = Object.defineProperty;
+var __defProps$b = Object.defineProperties;
+var __getOwnPropDescs$b = Object.getOwnPropertyDescriptors;
+var __getOwnPropSymbols$d = Object.getOwnPropertySymbols;
+var __hasOwnProp$d = Object.prototype.hasOwnProperty;
+var __propIsEnum$d = Object.prototype.propertyIsEnumerable;
+var __defNormalProp$d = (obj, key, value) => key in obj ? __defProp$d(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __spreadValues$d = (a, b) => {
   for (var prop in b || (b = {}))
-    if (__hasOwnProp$c.call(b, prop))
-      __defNormalProp$c(a, prop, b[prop]);
-  if (__getOwnPropSymbols$c)
-    for (var prop of __getOwnPropSymbols$c(b)) {
-      if (__propIsEnum$c.call(b, prop))
-        __defNormalProp$c(a, prop, b[prop]);
+    if (__hasOwnProp$d.call(b, prop))
+      __defNormalProp$d(a, prop, b[prop]);
+  if (__getOwnPropSymbols$d)
+    for (var prop of __getOwnPropSymbols$d(b)) {
+      if (__propIsEnum$d.call(b, prop))
+        __defNormalProp$d(a, prop, b[prop]);
     }
   return a;
 };
-var __spreadProps$9 = (a, b) => __defProps$9(a, __getOwnPropDescs$9(b));
+var __spreadProps$b = (a, b) => __defProps$b(a, __getOwnPropDescs$b(b));
 var __objRest$a = (source, exclude) => {
   var target = {};
   for (var prop in source)
-    if (__hasOwnProp$c.call(source, prop) && exclude.indexOf(prop) < 0)
+    if (__hasOwnProp$d.call(source, prop) && exclude.indexOf(prop) < 0)
       target[prop] = source[prop];
-  if (source != null && __getOwnPropSymbols$c)
-    for (var prop of __getOwnPropSymbols$c(source)) {
-      if (exclude.indexOf(prop) < 0 && __propIsEnum$c.call(source, prop))
+  if (source != null && __getOwnPropSymbols$d)
+    for (var prop of __getOwnPropSymbols$d(source)) {
+      if (exclude.indexOf(prop) < 0 && __propIsEnum$d.call(source, prop))
         target[prop] = source[prop];
     }
   return target;
@@ -2594,11 +2636,11 @@ const BaseModal = forwardRef(
         (_a2 = mergedProps.onOpenChange) == null ? void 0 : _a2.call(mergedProps, true);
       }
     }));
-    const dialogInCanvas = /* @__PURE__ */ React.createElement("div", { className }, children);
-    const dialog = /* @__PURE__ */ React.createElement(Dialog, { className }, children);
+    const dialogInCanvas = /* @__PURE__ */ React.createElement("div", { style: COMMON_STYLES, className }, children);
+    const dialog = /* @__PURE__ */ React.createElement(Dialog, { style: COMMON_STYLES, className }, children);
     return /* @__PURE__ */ React.createElement(
       ModalOverlay,
-      __spreadProps$9(__spreadValues$c({}, mergedProps), {
+      __spreadProps$b(__spreadValues$d({}, mergedProps), {
         className: `${resetClassName} ${modalOverlayClass}`
       }),
       /* @__PURE__ */ React.createElement(Modal, null, canvasCtx ? dialogInCanvas : dialog)
@@ -2719,33 +2761,33 @@ function registerModal(loader, overrides) {
   );
 }
 
-var __defProp$b = Object.defineProperty;
-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;
-var __defNormalProp$b = (obj, key, value) => key in obj ? __defProp$b(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
-var __spreadValues$b = (a, b) => {
+var __defProp$c = Object.defineProperty;
+var __defProps$a = Object.defineProperties;
+var __getOwnPropDescs$a = Object.getOwnPropertyDescriptors;
+var __getOwnPropSymbols$c = Object.getOwnPropertySymbols;
+var __hasOwnProp$c = Object.prototype.hasOwnProperty;
+var __propIsEnum$c = Object.prototype.propertyIsEnumerable;
+var __defNormalProp$c = (obj, key, value) => key in obj ? __defProp$c(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __spreadValues$c = (a, b) => {
   for (var prop in b || (b = {}))
-    if (__hasOwnProp$b.call(b, prop))
-      __defNormalProp$b(a, prop, b[prop]);
-  if (__getOwnPropSymbols$b)
-    for (var prop of __getOwnPropSymbols$b(b)) {
-      if (__propIsEnum$b.call(b, prop))
-        __defNormalProp$b(a, prop, b[prop]);
+    if (__hasOwnProp$c.call(b, prop))
+      __defNormalProp$c(a, prop, b[prop]);
+  if (__getOwnPropSymbols$c)
+    for (var prop of __getOwnPropSymbols$c(b)) {
+      if (__propIsEnum$c.call(b, prop))
+        __defNormalProp$c(a, prop, b[prop]);
     }
   return a;
 };
-var __spreadProps$8 = (a, b) => __defProps$8(a, __getOwnPropDescs$8(b));
+var __spreadProps$a = (a, b) => __defProps$a(a, __getOwnPropDescs$a(b));
 var __objRest$9 = (source, exclude) => {
   var target = {};
   for (var prop in source)
-    if (__hasOwnProp$b.call(source, prop) && exclude.indexOf(prop) < 0)
+    if (__hasOwnProp$c.call(source, prop) && exclude.indexOf(prop) < 0)
       target[prop] = source[prop];
-  if (source != null && __getOwnPropSymbols$b)
-    for (var prop of __getOwnPropSymbols$b(source)) {
-      if (exclude.indexOf(prop) < 0 && __propIsEnum$b.call(source, prop))
+  if (source != null && __getOwnPropSymbols$c)
+    for (var prop of __getOwnPropSymbols$c(source)) {
+      if (exclude.indexOf(prop) < 0 && __propIsEnum$c.call(source, prop))
         target[prop] = source[prop];
     }
   return target;
@@ -2755,10 +2797,10 @@ 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$8(__spreadValues$b({}, rest), {
+  const mergedProps = __spreadProps$a(__spreadValues$c({}, 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));
+  return /* @__PURE__ */ React.createElement(PlasmicDialogTriggerContext.Provider, { value: mergedProps }, /* @__PURE__ */ React.createElement(DialogTrigger, __spreadValues$c({}, mergedProps), trigger, dialog));
 }
 function registerDialogTrigger(loader, overrides) {
   registerComponentHelper(
@@ -2819,6 +2861,22 @@ function registerDialogTrigger(loader, overrides) {
   );
 }
 
+var __defProp$b = Object.defineProperty;
+var __getOwnPropSymbols$b = Object.getOwnPropertySymbols;
+var __hasOwnProp$b = Object.prototype.hasOwnProperty;
+var __propIsEnum$b = Object.prototype.propertyIsEnumerable;
+var __defNormalProp$b = (obj, key, value) => key in obj ? __defProp$b(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __spreadValues$b = (a, b) => {
+  for (var prop in b || (b = {}))
+    if (__hasOwnProp$b.call(b, prop))
+      __defNormalProp$b(a, prop, b[prop]);
+  if (__getOwnPropSymbols$b)
+    for (var prop of __getOwnPropSymbols$b(b)) {
+      if (__propIsEnum$b.call(b, prop))
+        __defNormalProp$b(a, prop, b[prop]);
+    }
+  return a;
+};
 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",
@@ -2836,15 +2894,22 @@ function BaseOverlayArrow({
   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),
+  const overlayArrow = /* @__PURE__ */ React.createElement(
+    OverlayArrow,
     {
-      placementTop: placement === "top",
-      placementLeft: placement === "left",
-      placementRight: placement === "right"
+      style: __spreadValues$b({ lineHeight: "0" }, COMMON_STYLES),
+      className
     },
-    plasmicUpdateVariant
-  ));
+    ({ 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);
   }
@@ -2874,8 +2939,8 @@ function registerOverlayArrow(loader, overrides) {
 }
 
 var __defProp$a = Object.defineProperty;
-var __defProps$7 = Object.defineProperties;
-var __getOwnPropDescs$7 = Object.getOwnPropertyDescriptors;
+var __defProps$9 = Object.defineProperties;
+var __getOwnPropDescs$9 = Object.getOwnPropertyDescriptors;
 var __getOwnPropSymbols$a = Object.getOwnPropertySymbols;
 var __hasOwnProp$a = Object.prototype.hasOwnProperty;
 var __propIsEnum$a = Object.prototype.propertyIsEnumerable;
@@ -2891,7 +2956,7 @@ var __spreadValues$a = (a, b) => {
     }
   return a;
 };
-var __spreadProps$7 = (a, b) => __defProps$7(a, __getOwnPropDescs$7(b));
+var __spreadProps$9 = (a, b) => __defProps$9(a, __getOwnPropDescs$9(b));
 var __objRest$8 = (source, exclude) => {
   var target = {};
   for (var prop in source)
@@ -2959,27 +3024,35 @@ function BaseRadio(props) {
       return void 0;
     })()
   });
-  const radio = /* @__PURE__ */ React.createElement(Radio, __spreadProps$7(__spreadValues$a({}, rest), { value: registeredId, key: registeredId }), ({
-    isHovered,
-    isPressed,
-    isFocused,
-    isFocusVisible,
-    isSelected,
-    isDisabled,
-    isReadOnly
-  }) => withObservedValues$8(
-    children,
-    {
-      hovered: isHovered,
-      pressed: isPressed,
-      focused: isFocused,
-      focusVisible: isFocusVisible,
-      selected: isSelected,
-      disabled: isDisabled,
-      readonly: isReadOnly
-    },
-    plasmicUpdateVariant
-  ));
+  const radio = /* @__PURE__ */ React.createElement(
+    Radio,
+    __spreadProps$9(__spreadValues$a({}, rest), {
+      value: registeredId,
+      key: registeredId,
+      style: COMMON_STYLES
+    }),
+    ({
+      isHovered,
+      isPressed,
+      isFocused,
+      isFocusVisible,
+      isSelected,
+      isDisabled,
+      isReadOnly
+    }) => withObservedValues$8(
+      children,
+      {
+        hovered: isHovered,
+        pressed: isPressed,
+        focused: isFocused,
+        focusVisible: isFocusVisible,
+        selected: isSelected,
+        disabled: isDisabled,
+        readonly: isReadOnly
+      },
+      plasmicUpdateVariant
+    )
+  );
   if (isStandalone) {
     return /* @__PURE__ */ React.createElement(RadioGroup, null, radio);
   }
@@ -3027,7 +3100,7 @@ function registerRadio(loader, overrides) {
       importPath: "@plasmicpkgs/react-aria/skinny/registerRadio",
       importName: "BaseRadio",
       variants: variants$9,
-      props: __spreadProps$7(__spreadValues$a({}, getCommonProps("radio", [
+      props: __spreadProps$9(__spreadValues$a({}, getCommonProps("radio", [
         "isDisabled",
         "autoFocus",
         "aria-label"
@@ -3055,8 +3128,8 @@ function registerRadio(loader, overrides) {
 }
 
 var __defProp$9 = Object.defineProperty;
-var __defProps$6 = Object.defineProperties;
-var __getOwnPropDescs$6 = Object.getOwnPropertyDescriptors;
+var __defProps$8 = Object.defineProperties;
+var __getOwnPropDescs$8 = Object.getOwnPropertyDescriptors;
 var __getOwnPropSymbols$9 = Object.getOwnPropertySymbols;
 var __hasOwnProp$9 = Object.prototype.hasOwnProperty;
 var __propIsEnum$9 = Object.prototype.propertyIsEnumerable;
@@ -3072,7 +3145,7 @@ var __spreadValues$9 = (a, b) => {
     }
   return a;
 };
-var __spreadProps$6 = (a, b) => __defProps$6(a, __getOwnPropDescs$6(b));
+var __spreadProps$8 = (a, b) => __defProps$8(a, __getOwnPropDescs$8(b));
 var __objRest$7 = (source, exclude) => {
   var target = {};
   for (var prop in source)
@@ -3101,7 +3174,7 @@ function BaseRadioGroup(props) {
       setIds(_ids);
     });
   }, [idManager]);
-  return /* @__PURE__ */ React.createElement(PlasmicRadioGroupContext.Provider, { value: __spreadProps$6(__spreadValues$9({}, props), { idManager }) }, /* @__PURE__ */ React.createElement(RadioGroup, __spreadValues$9({}, rest), ({ isDisabled, isReadOnly }) => withObservedValues$7(
+  return /* @__PURE__ */ React.createElement(PlasmicRadioGroupContext.Provider, { value: __spreadProps$8(__spreadValues$9({}, props), { idManager }) }, /* @__PURE__ */ React.createElement(RadioGroup, __spreadProps$8(__spreadValues$9({}, rest), { style: COMMON_STYLES }), ({ isDisabled, isReadOnly }) => withObservedValues$7(
     children,
     {
       disabled: isDisabled,
@@ -3126,7 +3199,7 @@ function registerRadioGroup(loader, overrides) {
       importPath: "@plasmicpkgs/react-aria/skinny/registerRadioGroup",
       importName: "BaseRadioGroup",
       variants: variants$8,
-      props: __spreadProps$6(__spreadValues$9({}, getCommonProps("radio group", [
+      props: __spreadProps$8(__spreadValues$9({}, getCommonProps("radio group", [
         "name",
         "isDisabled",
         "isReadOnly",
@@ -3234,8 +3307,8 @@ function registerRadioGroup(loader, overrides) {
 }
 
 var __defProp$8 = Object.defineProperty;
-var __defProps$5 = Object.defineProperties;
-var __getOwnPropDescs$5 = Object.getOwnPropertyDescriptors;
+var __defProps$7 = Object.defineProperties;
+var __getOwnPropDescs$7 = Object.getOwnPropertyDescriptors;
 var __getOwnPropSymbols$8 = Object.getOwnPropertySymbols;
 var __hasOwnProp$8 = Object.prototype.hasOwnProperty;
 var __propIsEnum$8 = Object.prototype.propertyIsEnumerable;
@@ -3251,7 +3324,7 @@ var __spreadValues$8 = (a, b) => {
     }
   return a;
 };
-var __spreadProps$5 = (a, b) => __defProps$5(a, __getOwnPropDescs$5(b));
+var __spreadProps$7 = (a, b) => __defProps$7(a, __getOwnPropDescs$7(b));
 function SelectAutoOpen(props) {
   var _a;
   const { open, close } = (_a = React.useContext(SelectStateContext)) != null ? _a : {};
@@ -3271,7 +3344,7 @@ function SelectAutoOpen(props) {
 const BaseSelectValue = (props) => {
   const { children, customize, className } = props;
   const placeholder = customize ? children : "Select an item";
-  return /* @__PURE__ */ React.createElement(SelectValue, { className }, ({ isPlaceholder, selectedText }) => /* @__PURE__ */ React.createElement(React.Fragment, null, isPlaceholder ? placeholder : selectedText));
+  return /* @__PURE__ */ React.createElement(SelectValue, { className, style: COMMON_STYLES }, ({ isPlaceholder, selectedText }) => /* @__PURE__ */ React.createElement(React.Fragment, null, isPlaceholder ? placeholder : selectedText));
 };
 const SELECT_NAME = makeComponentName("select");
 const SELECT_VARIANTS = [
@@ -3287,7 +3360,6 @@ function BaseSelect(props) {
     onOpenChange,
     isDisabled,
     className,
-    style,
     children,
     disabledKeys,
     name,
@@ -3326,7 +3398,7 @@ function BaseSelect(props) {
       onOpenChange,
       isDisabled,
       className: classNameProp,
-      style,
+      style: COMMON_STYLES,
       name,
       disabledKeys,
       "aria-label": ariaLabel
@@ -3377,7 +3449,7 @@ function registerSelect(loader) {
     importPath: "@plasmicpkgs/react-aria/skinny/registerSelect",
     importName: "BaseSelect",
     variants: SELECT_VARIANTS_DATA,
-    props: __spreadProps$5(__spreadValues$8({}, getCommonProps("Select", [
+    props: __spreadProps$7(__spreadValues$8({}, getCommonProps("Select", [
       "name",
       "aria-label",
       "isDisabled",
@@ -3513,6 +3585,8 @@ function registerSelect(loader) {
 }
 
 var __defProp$7 = Object.defineProperty;
+var __defProps$6 = Object.defineProperties;
+var __getOwnPropDescs$6 = Object.getOwnPropertyDescriptors;
 var __getOwnPropSymbols$7 = Object.getOwnPropertySymbols;
 var __hasOwnProp$7 = Object.prototype.hasOwnProperty;
 var __propIsEnum$7 = Object.prototype.propertyIsEnumerable;
@@ -3528,6 +3602,7 @@ var __spreadValues$7 = (a, b) => {
     }
   return a;
 };
+var __spreadProps$6 = (a, b) => __defProps$6(a, __getOwnPropDescs$6(b));
 var __objRest$6 = (source, exclude) => {
   var target = {};
   for (var prop in source)
@@ -3546,7 +3621,7 @@ const { variants: variants$7, withObservedValues: withObservedValues$6 } = pickA
 );
 function BaseSliderOutput(props) {
   const _a = props, { plasmicUpdateVariant, children } = _a, rest = __objRest$6(_a, ["plasmicUpdateVariant", "children"]);
-  return /* @__PURE__ */ React.createElement(SliderOutput, __spreadValues$7({}, rest), ({ isDisabled }) => withObservedValues$6(
+  return /* @__PURE__ */ React.createElement(SliderOutput, __spreadProps$6(__spreadValues$7({}, rest), { style: COMMON_STYLES }), ({ isDisabled }) => withObservedValues$6(
     children,
     {
       disabled: isDisabled
@@ -3594,8 +3669,8 @@ class ErrorBoundary extends Component {
 }
 
 var __defProp$6 = Object.defineProperty;
-var __defProps$4 = Object.defineProperties;
-var __getOwnPropDescs$4 = Object.getOwnPropertyDescriptors;
+var __defProps$5 = Object.defineProperties;
+var __getOwnPropDescs$5 = Object.getOwnPropertyDescriptors;
 var __getOwnPropSymbols$6 = Object.getOwnPropertySymbols;
 var __hasOwnProp$6 = Object.prototype.hasOwnProperty;
 var __propIsEnum$6 = Object.prototype.propertyIsEnumerable;
@@ -3611,7 +3686,7 @@ var __spreadValues$6 = (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));
 var __objRest$5 = (source, exclude) => {
   var target = {};
   for (var prop in source)
@@ -3644,7 +3719,7 @@ function BaseSliderThumb(_a) {
     "advanced",
     "plasmicUpdateVariant"
   ]);
-  const thumb = /* @__PURE__ */ React.createElement(SliderThumb, __spreadValues$6({}, rest), ({ isDragging, isHovered, isFocused, isFocusVisible, isDisabled }) => withObservedValues$5(
+  const thumb = /* @__PURE__ */ React.createElement(SliderThumb, __spreadProps$5(__spreadValues$6({}, rest), { style: COMMON_STYLES }), ({ isDragging, isHovered, isFocused, isFocusVisible, isDisabled }) => withObservedValues$5(
     /* @__PURE__ */ React.createElement(React.Fragment, null, advanced ? children : void 0),
     {
       dragging: isDragging,
@@ -3683,7 +3758,7 @@ function registerSliderThumb(loader, overrides) {
         cursor: "pointer"
       },
       variants: variants$6,
-      props: __spreadProps$4(__spreadValues$6({}, getCommonProps("slider thumb", [
+      props: __spreadProps$5(__spreadValues$6({}, getCommonProps("slider thumb", [
         "name",
         "isDisabled",
         "autoFocus"
@@ -3796,7 +3871,7 @@ function BaseSliderTrack(props) {
     plasmicUpdateVariant
   )));
   if (isStandalone) {
-    return /* @__PURE__ */ React.createElement(Slider, { style: { height: "100%", width: "100%" } }, track);
+    return /* @__PURE__ */ React.createElement(Slider, { style: __spreadValues$5({ height: "100%", width: "100%" }, COMMON_STYLES) }, track);
   }
   return track;
 }
@@ -3872,8 +3947,8 @@ function registerSliderTrack(sliderThumbMeta, loader, overrides) {
 }
 
 var __defProp$4 = Object.defineProperty;
-var __defProps$3 = Object.defineProperties;
-var __getOwnPropDescs$3 = Object.getOwnPropertyDescriptors;
+var __defProps$4 = Object.defineProperties;
+var __getOwnPropDescs$4 = Object.getOwnPropertyDescriptors;
 var __getOwnPropSymbols$4 = Object.getOwnPropertySymbols;
 var __hasOwnProp$4 = Object.prototype.hasOwnProperty;
 var __propIsEnum$4 = Object.prototype.propertyIsEnumerable;
@@ -3889,7 +3964,7 @@ var __spreadValues$4 = (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$3 = (source, exclude) => {
   var target = {};
   for (var prop in source)
@@ -3911,13 +3986,13 @@ function BaseSlider(props) {
   return /* @__PURE__ */ React.createElement(
     PlasmicSliderContext.Provider,
     {
-      value: __spreadProps$3(__spreadValues$4({}, rest), {
+      value: __spreadProps$4(__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.createElement(Slider, __spreadValues$4({}, rest), ({ isDisabled }) => withObservedValues$3(
+    /* @__PURE__ */ React.createElement(Slider, __spreadProps$4(__spreadValues$4({}, rest), { style: COMMON_STYLES }), ({ isDisabled }) => withObservedValues$3(
       children,
       {
         disabled: isDisabled
@@ -3973,7 +4048,7 @@ function registerSlider(loader, overrides) {
       defaultStyles: {
         width: "300px"
       },
-      props: __spreadProps$3(__spreadValues$4(__spreadValues$4({}, getCommonProps("slider", [
+      props: __spreadProps$4(__spreadValues$4(__spreadValues$4({}, getCommonProps("slider", [
         "isDisabled",
         "aria-label"
       ])), getCommonSliderProps()), {
@@ -4085,7 +4160,7 @@ function registerSlider(loader, overrides) {
       defaultStyles: {
         width: "300px"
       },
-      props: __spreadProps$3(__spreadValues$4(__spreadValues$4({}, getCommonProps("slider", [
+      props: __spreadProps$4(__spreadValues$4(__spreadValues$4({}, getCommonProps("slider", [
         "isDisabled",
         "aria-label"
       ])), getCommonSliderProps()), {
@@ -4161,8 +4236,8 @@ function registerSlider(loader, overrides) {
 }
 
 var __defProp$3 = Object.defineProperty;
-var __defProps$2 = Object.defineProperties;
-var __getOwnPropDescs$2 = Object.getOwnPropertyDescriptors;
+var __defProps$3 = Object.defineProperties;
+var __getOwnPropDescs$3 = Object.getOwnPropertyDescriptors;
 var __getOwnPropSymbols$3 = Object.getOwnPropertySymbols;
 var __hasOwnProp$3 = Object.prototype.hasOwnProperty;
 var __propIsEnum$3 = Object.prototype.propertyIsEnumerable;
@@ -4178,7 +4253,7 @@ var __spreadValues$3 = (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$2 = (source, exclude) => {
   var target = {};
   for (var prop in source)
@@ -4203,7 +4278,7 @@ const SWITCH_VARIANTS = [
 const { variants: variants$3, withObservedValues: withObservedValues$2 } = pickAriaComponentVariants(SWITCH_VARIANTS);
 function BaseSwitch(props) {
   const _a = props, { children, plasmicUpdateVariant } = _a, rest = __objRest$2(_a, ["children", "plasmicUpdateVariant"]);
-  return /* @__PURE__ */ React.createElement(Switch, __spreadValues$3({}, rest), ({
+  return /* @__PURE__ */ React.createElement(Switch, __spreadProps$3(__spreadValues$3({}, rest), { style: COMMON_STYLES }), ({
     isHovered,
     isPressed,
     isFocused,
@@ -4242,7 +4317,7 @@ function registerSwitch(loader, overrides) {
         justifyContent: "flex-start",
         padding: 0
       },
-      props: __spreadProps$2(__spreadValues$3({}, getCommonProps("switch", [
+      props: __spreadProps$3(__spreadValues$3({}, getCommonProps("switch", [
         "name",
         "isDisabled",
         "isReadOnly",
@@ -4353,6 +4428,8 @@ function registerSwitch(loader, overrides) {
 }
 
 var __defProp$2 = Object.defineProperty;
+var __defProps$2 = Object.defineProperties;
+var __getOwnPropDescs$2 = Object.getOwnPropertyDescriptors;
 var __getOwnPropSymbols$2 = Object.getOwnPropertySymbols;
 var __hasOwnProp$2 = Object.prototype.hasOwnProperty;
 var __propIsEnum$2 = Object.prototype.propertyIsEnumerable;
@@ -4368,6 +4445,7 @@ var __spreadValues$2 = (a, b) => {
     }
   return a;
 };
+var __spreadProps$2 = (a, b) => __defProps$2(a, __getOwnPropDescs$2(b));
 var __objRest$1 = (source, exclude) => {
   var target = {};
   for (var prop in source)
@@ -4422,7 +4500,7 @@ function BaseTextArea(props) {
   const mergedProps = mergeProps(rest, {
     className: classNameProp
   });
-  return /* @__PURE__ */ React.createElement(TextArea, __spreadValues$2({}, mergedProps));
+  return /* @__PURE__ */ React.createElement(TextArea, __spreadProps$2(__spreadValues$2({}, mergedProps), { style: COMMON_STYLES }));
 }
 function registerTextArea(loader, overrides) {
   registerComponentHelper(
@@ -4514,14 +4592,22 @@ const TEXT_FIELD_VARIANTS = ["disabled", "readonly"];
 const { variants: variants$1, withObservedValues: withObservedValues$1 } = pickAriaComponentVariants(TEXT_FIELD_VARIANTS);
 function BaseTextField(props) {
   const _a = props, { children, plasmicUpdateVariant, autoComplete } = _a, rest = __objRest(_a, ["children", "plasmicUpdateVariant", "autoComplete"]);
-  return /* @__PURE__ */ React.createElement(PlasmicTextFieldContext.Provider, { value: props }, /* @__PURE__ */ React.createElement(TextField, __spreadValues$1({ autoComplete: resolveAutoComplete(autoComplete) }, rest), ({ isDisabled, isReadOnly }) => withObservedValues$1(
-    children,
-    {
-      disabled: isDisabled,
-      readonly: isReadOnly
-    },
-    plasmicUpdateVariant
-  )));
+  return /* @__PURE__ */ React.createElement(PlasmicTextFieldContext.Provider, { value: props }, /* @__PURE__ */ React.createElement(
+    TextField,
+    __spreadProps$1(__spreadValues$1({
+      autoComplete: resolveAutoComplete(autoComplete)
+    }, rest), {
+      style: COMMON_STYLES
+    }),
+    ({ isDisabled, isReadOnly }) => withObservedValues$1(
+      children,
+      {
+        disabled: isDisabled,
+        readonly: isReadOnly
+      },
+      plasmicUpdateVariant
+    )
+  ));
 }
 const TEXT_FIELD_COMPONENT_NAME = makeComponentName("textField");
 function registerTextField(loader, overrides) {
@@ -4665,7 +4751,16 @@ const { variants, withObservedValues } = pickAriaComponentVariants(TOOLTIP_VARIA
 function TriggerWrapper({ children, className }) {
   const ref = React.useRef(null);
   const { focusableProps } = useFocusable({}, ref);
-  return /* @__PURE__ */ React.createElement("div", __spreadValues({ ref, className }, focusableProps), children);
+  return /* @__PURE__ */ React.createElement(
+    "div",
+    __spreadProps(__spreadValues({
+      ref,
+      className
+    }, focusableProps), {
+      style: COMMON_STYLES
+    }),
+    children
+  );
 }
 function BaseTooltip(props) {
   var _a, _b, _c;