@plasmicpkgs/react-aria 0.0.51 → 0.0.53

package/dist/react-aria.esm.js

@@ -7,35 +7,35 @@ import { usePlasmicCanvasContext } from '@plasmicapp/host';
 import flattenChildren from 'react-keyed-flatten-children';
 import { useTooltipTriggerState } from 'react-stately';
 
-var __defProp$q = Object.defineProperty;
+var __defProp$r = Object.defineProperty;
 var __defProps$d = Object.defineProperties;
 var __getOwnPropDescs$d = 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 __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$d = (a, b) => __defProps$d(a, __getOwnPropDescs$d(b));
 function registerComponentHelper(loader, component, meta, overrides) {
   var _a;
-  meta = __spreadProps$d(__spreadValues$q({}, meta), {
-    defaultStyles: __spreadValues$q({
+  meta = __spreadProps$d(__spreadValues$r({}, meta), {
+    defaultStyles: __spreadValues$r({
       boxSizing: "border-box"
     }, (_a = meta.defaultStyles) != null ? _a : {})
   });
   if (overrides) {
-    meta = __spreadProps$d(__spreadValues$q(__spreadValues$q({}, meta), overrides), {
-      props: __spreadValues$q(__spreadValues$q({}, meta.props), overrides.props)
+    meta = __spreadProps$d(__spreadValues$r(__spreadValues$r({}, meta), overrides), {
+      props: __spreadValues$r(__spreadValues$r({}, meta.props), overrides.props)
     });
     if (overrides.parentComponentName) {
       meta.name = makeChildComponentName(
@@ -410,7 +410,7 @@ function getCommonProps(componentName, propNames) {
   return filteredProps;
 }
 
-const ARIA_COMPONENTS_INTERACTION_VARIANTS = {
+const ARIA_COMPONENTS_VARIANTS = {
   hovered: {
     cssSelector: "[data-hovered]",
     displayName: "Hovered"
@@ -451,89 +451,70 @@ const ARIA_COMPONENTS_INTERACTION_VARIANTS = {
 function ChangesObserver({
   children,
   changes,
-  updateInteractionVariant
+  updateVariant
 }) {
   React.useEffect(() => {
-    if (updateInteractionVariant) {
-      updateInteractionVariant(changes);
+    if (updateVariant) {
+      updateVariant(changes);
     }
-  }, [changes, updateInteractionVariant]);
-  return /* @__PURE__ */ React.createElement(React.Fragment, null, children);
+  }, [changes, updateVariant]);
+  return children;
 }
-function realWithObservedValues(children, changes, updateInteractionVariant) {
-  return /* @__PURE__ */ React.createElement(
-    ChangesObserver,
-    {
-      changes,
-      updateInteractionVariant
-    },
-    children
-  );
+function realWithObservedValues(children, changes, updateVariant) {
+  return /* @__PURE__ */ React.createElement(ChangesObserver, { changes, updateVariant }, children);
 }
 function pickAriaComponentVariants(keys) {
   return {
-    interactionVariants: Object.fromEntries(
-      keys.map((key) => [key, ARIA_COMPONENTS_INTERACTION_VARIANTS[key]])
+    variants: Object.fromEntries(
+      keys.map((key) => [key, ARIA_COMPONENTS_VARIANTS[key]])
     ),
     withObservedValues: realWithObservedValues
   };
 }
 
-var __defProp$p = Object.defineProperty;
+var __defProp$q = Object.defineProperty;
 var __defProps$c = Object.defineProperties;
 var __getOwnPropDescs$c = 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 __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$c = (a, b) => __defProps$c(a, __getOwnPropDescs$c(b));
-var __objRest$n = (source, exclude) => {
+var __objRest$o = (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;
 };
-const BUTTON_INTERACTION_VARIANTS = [
+const BUTTON_VARIANTS = [
   "hovered",
   "pressed",
   "focused",
   "focusVisible",
   "disabled"
 ];
-const { interactionVariants: interactionVariants$d, withObservedValues: withObservedValues$b } = pickAriaComponentVariants(
-  BUTTON_INTERACTION_VARIANTS
-);
+const { variants: variants$d, withObservedValues: withObservedValues$b } = pickAriaComponentVariants(BUTTON_VARIANTS);
 function BaseButton(props) {
-  const _a = props, {
-    submitsForm,
-    resetsForm,
-    children,
-    updateInteractionVariant
-  } = _a, rest = __objRest$n(_a, [
-    "submitsForm",
-    "resetsForm",
-    "children",
-    "updateInteractionVariant"
-  ]);
+  const _a = props, { submitsForm, resetsForm, children, updateVariant } = _a, rest = __objRest$o(_a, ["submitsForm", "resetsForm", "children", "updateVariant"]);
   const type = submitsForm ? "submit" : resetsForm ? "reset" : "button";
-  return /* @__PURE__ */ React.createElement(Button, __spreadValues$p({ type }, rest), ({ isHovered, isPressed, isFocused, isFocusVisible, isDisabled }) => withObservedValues$b(
+  return /* @__PURE__ */ React.createElement(Button, __spreadValues$q({ type }, rest), ({ isHovered, isPressed, isFocused, isFocusVisible, isDisabled }) => withObservedValues$b(
     children,
     {
       hovered: isHovered,
@@ -542,7 +523,7 @@ function BaseButton(props) {
       focusVisible: isFocusVisible,
       disabled: isDisabled
     },
-    updateInteractionVariant
+    updateVariant
   ));
 }
 const BUTTON_COMPONENT_NAME = makeComponentName("button");
@@ -555,7 +536,7 @@ function registerButton(loader, overrides) {
       displayName: "Aria Button",
       importPath: "@plasmicpkgs/react-aria/skinny/registerButton",
       importName: "BaseButton",
-      interactionVariants: interactionVariants$d,
+      variants: variants$d,
       defaultStyles: {
         borderWidth: "1px",
         borderStyle: "solid",
@@ -563,7 +544,7 @@ function registerButton(loader, overrides) {
         padding: "2px 10px",
         cursor: "pointer"
       },
-      props: __spreadProps$c(__spreadValues$p({}, getCommonProps("button", [
+      props: __spreadProps$c(__spreadValues$q({}, getCommonProps("button", [
         "autoFocus",
         "isDisabled",
         "aria-label"
@@ -614,38 +595,38 @@ const PlasmicListBoxContext = React.createContext(void 0);
 React.createContext(void 0);
 React.createContext(void 0);
 
-var __defProp$o = Object.defineProperty;
+var __defProp$p = Object.defineProperty;
 var __defProps$b = Object.defineProperties;
 var __getOwnPropDescs$b = 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 __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$b = (a, b) => __defProps$b(a, __getOwnPropDescs$b(b));
-var __objRest$m = (source, exclude) => {
+var __objRest$n = (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;
 };
-const CHECKBOX_INTERACTION_VARIANTS = [
+const CHECKBOX_VARIANTS = [
   "hovered",
   "pressed",
   "focused",
@@ -656,16 +637,14 @@ const CHECKBOX_INTERACTION_VARIANTS = [
   "readonly",
   "selected"
 ];
-const { interactionVariants: interactionVariants$c, withObservedValues: withObservedValues$a } = pickAriaComponentVariants(
-  CHECKBOX_INTERACTION_VARIANTS
-);
+const { variants: variants$c, withObservedValues: withObservedValues$a } = pickAriaComponentVariants(CHECKBOX_VARIANTS);
 function BaseCheckbox(props) {
-  const _a = props, { children, updateInteractionVariant, setControlContextData } = _a, rest = __objRest$m(_a, ["children", "updateInteractionVariant", "setControlContextData"]);
+  const _a = props, { children, updateVariant, setControlContextData } = _a, rest = __objRest$n(_a, ["children", "updateVariant", "setControlContextData"]);
   const contextProps = React.useContext(PlasmicCheckboxGroupContext);
   setControlContextData == null ? void 0 : setControlContextData({
     parent: contextProps
   });
-  return /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement(Checkbox, __spreadValues$o({}, rest), ({
+  return /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement(Checkbox, __spreadValues$p({}, rest), ({
     isHovered,
     isPressed,
     isFocused,
@@ -686,7 +665,7 @@ function BaseCheckbox(props) {
       selected: isSelected,
       readonly: isReadOnly
     },
-    updateInteractionVariant
+    updateVariant
   )));
 }
 const makeDefaultCheckboxChildren = ({
@@ -730,7 +709,7 @@ const makeDefaultCheckboxChildren = ({
     ...showDocs ? [
       {
         type: "text",
-        value: "Add interaction variants to see it in action..."
+        value: "Use the registered variants to see it in action..."
       }
     ] : []
   ]
@@ -744,8 +723,8 @@ function registerCheckbox(loader, overrides) {
       displayName: "Aria Checkbox",
       importPath: "@plasmicpkgs/react-aria/skinny/registerCheckbox",
       importName: "BaseCheckbox",
-      interactionVariants: interactionVariants$c,
-      props: __spreadProps$b(__spreadValues$o({}, getCommonProps("checkbox", [
+      variants: variants$c,
+      props: __spreadProps$b(__spreadValues$p({}, getCommonProps("checkbox", [
         "name",
         "isDisabled",
         "isReadOnly",
@@ -813,37 +792,37 @@ function registerCheckbox(loader, overrides) {
   );
 }
 
-var __defProp$n = Object.defineProperty;
-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 __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 __objRest$l = (source, exclude) => {
+var __objRest$m = (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 } = _b, rest = __objRest$l(_b, ["children"]);
-  return /* @__PURE__ */ React.createElement(Text, __spreadValues$n({}, rest), children);
+  var _b = _a, { children } = _b, rest = __objRest$m(_b, ["children"]);
+  return /* @__PURE__ */ React.createElement(Text, __spreadValues$o({}, rest), children);
 }
 const TEXT_COMPONENT_NAME = makeComponentName("text");
 function registerText(loader, overrides) {
@@ -877,28 +856,28 @@ function registerText(loader, overrides) {
   );
 }
 
-var __defProp$m = Object.defineProperty;
+var __defProp$n = Object.defineProperty;
 var __defProps$a = Object.defineProperties;
 var __getOwnPropDescs$a = 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 __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$a = (a, b) => __defProps$a(a, __getOwnPropDescs$a(b));
 const DESCRIPTION_COMPONENT_NAME = makeComponentName("description");
 function registerDescription(loader, overrides) {
-  return registerText(loader, __spreadProps$a(__spreadValues$m({}, overrides), {
+  return registerText(loader, __spreadProps$a(__spreadValues$n({}, overrides), {
     name: DESCRIPTION_COMPONENT_NAME,
     displayName: "Aria Description",
     props: {
@@ -911,30 +890,30 @@ function registerDescription(loader, overrides) {
   }));
 }
 
-var __defProp$l = Object.defineProperty;
-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 __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 __objRest$k = (source, exclude) => {
+var __objRest$l = (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;
@@ -951,7 +930,7 @@ function BaseFieldError(_a) {
     tooShort,
     typeMismatch,
     valueMissing
-  } = _b, rest = __objRest$k(_b, [
+  } = _b, rest = __objRest$l(_b, [
     "badInput",
     "customError",
     "patternMismatch",
@@ -963,7 +942,7 @@ function BaseFieldError(_a) {
     "typeMismatch",
     "valueMissing"
   ]);
-  return /* @__PURE__ */ React.createElement(FieldError, __spreadValues$l({}, rest), ({ validationDetails, validationErrors }) => {
+  return /* @__PURE__ */ React.createElement(FieldError, __spreadValues$m({}, rest), ({ validationDetails, validationErrors }) => {
     if (validationDetails.badInput && badInput) {
       return badInput;
     }
@@ -1095,53 +1074,50 @@ function registerLabel(loader, overrides) {
   );
 }
 
-var __defProp$k = Object.defineProperty;
+var __defProp$l = Object.defineProperty;
 var __defProps$9 = Object.defineProperties;
 var __getOwnPropDescs$9 = 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 __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$9 = (a, b) => __defProps$9(a, __getOwnPropDescs$9(b));
-var __objRest$j = (source, exclude) => {
+var __objRest$k = (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;
 };
-const CHECKBOX_GROUP_INTERACTION_VARIANTS = [
-  "disabled",
-  "readonly"
-];
-const { interactionVariants: interactionVariants$b, withObservedValues: withObservedValues$9 } = pickAriaComponentVariants(
-  CHECKBOX_GROUP_INTERACTION_VARIANTS
+const CHECKBOX_GROUP_VARIANTS = ["disabled", "readonly"];
+const { variants: variants$b, withObservedValues: withObservedValues$9 } = pickAriaComponentVariants(
+  CHECKBOX_GROUP_VARIANTS
 );
 function BaseCheckboxGroup(props) {
-  const _a = props, { children, updateInteractionVariant } = _a, rest = __objRest$j(_a, ["children", "updateInteractionVariant"]);
-  return /* @__PURE__ */ React.createElement(PlasmicCheckboxGroupContext.Provider, { value: rest }, /* @__PURE__ */ React.createElement(CheckboxGroup, __spreadValues$k({}, rest), ({ isDisabled, isReadOnly }) => withObservedValues$9(
+  const _a = props, { children, updateVariant } = _a, rest = __objRest$k(_a, ["children", "updateVariant"]);
+  return /* @__PURE__ */ React.createElement(PlasmicCheckboxGroupContext.Provider, { value: rest }, /* @__PURE__ */ React.createElement(CheckboxGroup, __spreadValues$l({}, rest), ({ isDisabled, isReadOnly }) => withObservedValues$9(
     children,
     {
       disabled: isDisabled,
       readonly: isReadOnly
     },
-    updateInteractionVariant
+    updateVariant
   )));
 }
 const componentName = makeComponentName("checkboxGroup");
@@ -1163,8 +1139,8 @@ function registerCheckboxGroup(loader, overrides) {
       displayName: "Aria Checkbox Group",
       importPath: "@plasmicpkgs/react-aria/skinny/registerCheckboxGroup",
       importName: "BaseCheckboxGroup",
-      interactionVariants: interactionVariants$b,
-      props: __spreadProps$9(__spreadValues$k({}, getCommonProps("checkbox group", [
+      variants: variants$b,
+      props: __spreadProps$9(__spreadValues$l({}, getCommonProps("checkbox group", [
         "name",
         "isDisabled",
         "isReadOnly",
@@ -1234,7 +1210,7 @@ function registerCheckboxGroup(loader, overrides) {
                   props: {
                     children: {
                       type: "text",
-                      value: "Add interaction variants to see it in action..."
+                      value: "Use the registered variants to see it in action..."
                     }
                   }
                 }
@@ -1329,42 +1305,40 @@ class ListBoxItemIdManager {
   }
 }
 
-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 __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 __objRest$i = (source, exclude) => {
+var __objRest$j = (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;
 };
-const INPUT_INTERACTION_VARIANTS = [
+const INPUT_VARIANTS = [
   "focused",
   "hovered",
   "disabled"
 ];
-const { interactionVariants: interactionVariants$a } = pickAriaComponentVariants(
-  INPUT_INTERACTION_VARIANTS
-);
+const { variants: variants$a } = pickAriaComponentVariants(INPUT_VARIANTS);
 const inputHelpers$1 = {
   states: {
     value: {
@@ -1377,12 +1351,12 @@ const inputHelpers$1 = {
 function BaseInput(props) {
   var _b;
   const _a = props, {
-    updateInteractionVariant,
+    updateVariant,
     setControlContextData,
     disabled,
     autoComplete
-  } = _a, rest = __objRest$i(_a, [
-    "updateInteractionVariant",
+  } = _a, rest = __objRest$j(_a, [
+    "updateVariant",
     "setControlContextData",
     "disabled",
     "autoComplete"
@@ -1395,31 +1369,31 @@ function BaseInput(props) {
     /**
      * While react-aria internally does the merging of the disabled prop,
      * we need to explicity do it here, because react-aria does it behind the scenes,
-     * whereas we need the calculated value of the disabled prop to be able to update the "disabled" interaction variant.
+     * whereas we need the calculated value of the disabled prop to be able to update the "disabled" CC variant.
      *  */
     disabled: (_b = textFieldContext == null ? void 0 : textFieldContext.isDisabled) != null ? _b : disabled
   });
   useEffect(() => {
-    updateInteractionVariant == null ? void 0 : updateInteractionVariant({
+    updateVariant == null ? void 0 : updateVariant({
       disabled: mergedProps.disabled
     });
-  }, [mergedProps.disabled, updateInteractionVariant]);
+  }, [mergedProps.disabled, updateVariant]);
   return /* @__PURE__ */ React.createElement(
     Input,
-    __spreadValues$j({
+    __spreadValues$k({
       autoComplete: resolveAutoComplete(autoComplete),
       onHoverChange: (isHovered) => {
-        updateInteractionVariant == null ? void 0 : updateInteractionVariant({
+        updateVariant == null ? void 0 : updateVariant({
           hovered: isHovered
         });
       },
       onFocus: () => {
-        updateInteractionVariant == null ? void 0 : updateInteractionVariant({
+        updateVariant == null ? void 0 : updateVariant({
           focused: true
         });
       },
       onBlur: () => {
-        updateInteractionVariant == null ? void 0 : updateInteractionVariant({
+        updateVariant == null ? void 0 : updateVariant({
           focused: false
         });
       }
@@ -1436,7 +1410,7 @@ function registerInput(loader, overrides) {
       displayName: "Aria Input",
       importPath: "@plasmicpkgs/react-aria/skinny/registerInput",
       importName: "BaseInput",
-      interactionVariants: interactionVariants$a,
+      variants: variants$a,
       defaultStyles: {
         width: "300px",
         borderWidth: "1px",
@@ -1444,7 +1418,7 @@ function registerInput(loader, overrides) {
         borderColor: "black",
         padding: "4px 10px"
       },
-      props: __spreadValues$j({}, getCommonProps("Input", [
+      props: __spreadValues$k({}, getCommonProps("Input", [
         "name",
         "disabled",
         "readOnly",
@@ -1475,7 +1449,7 @@ function registerInput(loader, overrides) {
         "onInput"
       ])),
       states: {
-        value: __spreadValues$j({
+        value: __spreadValues$k({
           type: "writable",
           valueProp: "value",
           onChangeProp: "onChange",
@@ -1493,35 +1467,35 @@ 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 __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 __objRest$h = (source, exclude) => {
+var __objRest$i = (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;
 };
-const LIST_BOX_ITEM_INTERACTION_VARIANTS = [
+const LIST_BOX_ITEM_VARIANTS = [
   "hovered",
   "pressed",
   "focused",
@@ -1529,21 +1503,11 @@ const LIST_BOX_ITEM_INTERACTION_VARIANTS = [
   "selected",
   "disabled"
 ];
-const { interactionVariants: interactionVariants$9, withObservedValues: withObservedValues$8 } = pickAriaComponentVariants(
-  LIST_BOX_ITEM_INTERACTION_VARIANTS
+const { variants: variants$9, withObservedValues: withObservedValues$8 } = pickAriaComponentVariants(
+  LIST_BOX_ITEM_VARIANTS
 );
 function BaseListBoxItem(props) {
-  const _a = props, {
-    children,
-    setControlContextData,
-    updateInteractionVariant,
-    id
-  } = _a, rest = __objRest$h(_a, [
-    "children",
-    "setControlContextData",
-    "updateInteractionVariant",
-    "id"
-  ]);
+  const _a = props, { children, setControlContextData, updateVariant, id } = _a, rest = __objRest$i(_a, ["children", "setControlContextData", "updateVariant", "id"]);
   const listboxContext = React.useContext(PlasmicListBoxContext);
   const isStandalone = !listboxContext;
   const [registeredId, setRegisteredId] = useState();
@@ -1562,7 +1526,7 @@ function BaseListBoxItem(props) {
     // this means that a unique id was registered, different from the provided id
     hasDuplicateId: !isStandalone && id !== registeredId
   });
-  const listboxItem = /* @__PURE__ */ React.createElement(ListBoxItem, __spreadValues$i({ key: registeredId, id: registeredId }, rest), ({
+  const listboxItem = /* @__PURE__ */ React.createElement(ListBoxItem, __spreadValues$j({ key: registeredId, id: registeredId }, rest), ({
     isHovered,
     isPressed,
     isFocused,
@@ -1579,7 +1543,7 @@ function BaseListBoxItem(props) {
       selected: isSelected,
       disabled: isDisabled
     },
-    updateInteractionVariant
+    updateVariant
   ));
   if (isStandalone) {
     return /* @__PURE__ */ React.createElement(ListBox, { selectionMode: "single" }, listboxItem);
@@ -1632,7 +1596,7 @@ function registerListBoxItem(loader, overrides) {
       displayName: "Aria ListBoxItem",
       importPath: "@plasmicpkgs/react-aria/skinny/registerListBoxItem",
       importName: "BaseListBoxItem",
-      interactionVariants: interactionVariants$9,
+      variants: variants$9,
       props: {
         id: {
           type: "string",
@@ -1659,39 +1623,39 @@ 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 __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 __objRest$g = (source, exclude) => {
+var __objRest$h = (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;
 };
 function BaseSection(props) {
-  const _a = props, { header, items } = _a, rest = __objRest$g(_a, ["header", "items"]);
+  const _a = props, { header, items } = _a, rest = __objRest$h(_a, ["header", "items"]);
   const contextProps = React.useContext(PlasmicListBoxContext);
   const mergedProps = mergeProps$1(contextProps, rest);
-  return /* @__PURE__ */ React.createElement(Section, __spreadValues$h({}, mergedProps), /* @__PURE__ */ React.createElement(Header, null, header), items);
+  return /* @__PURE__ */ React.createElement(Section, __spreadValues$i({}, mergedProps), /* @__PURE__ */ React.createElement(Header, null, header), items);
 }
 function registerSection(loader, overrides) {
   return registerComponentHelper(
@@ -1725,30 +1689,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$f = (source, exclude) => {
+var __objRest$g = (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;
@@ -1771,7 +1735,7 @@ function BaseListBox(props) {
     children,
     selectedKeys,
     defaultSelectedKeys
-  } = _a, rest = __objRest$f(_a, [
+  } = _a, rest = __objRest$g(_a, [
     "setControlContextData",
     "children",
     "selectedKeys",
@@ -1800,7 +1764,7 @@ function BaseListBox(props) {
   }, []);
   const listbox = /* @__PURE__ */ React.createElement(
     ListBox,
-    __spreadValues$g({
+    __spreadValues$h({
       selectedKeys: normalizeSelectedKeys(selectedKeys),
       defaultSelectedKeys: normalizeSelectedKeys(defaultSelectedKeys)
     }, rest),
@@ -1969,7 +1933,7 @@ function registerListBox(loader, overrides) {
         }
       },
       states: {
-        selectedKey: __spreadValues$g({
+        selectedKey: __spreadValues$h({
           type: "writable",
           valueProp: "selectedKeys",
           onChangeProp: "onSelectionChange",
@@ -1987,36 +1951,36 @@ 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$e = (source, exclude) => {
+var __objRest$f = (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;
 };
 function BasePopover(props) {
-  const _a = props, { resetClassName, setControlContextData } = _a, restProps = __objRest$e(_a, ["resetClassName", "setControlContextData"]);
+  const _a = props, { resetClassName, setControlContextData } = _a, restProps = __objRest$f(_a, ["resetClassName", "setControlContextData"]);
   const isStandalone = !React.useContext(PopoverContext);
   const context = React.useContext(PlasmicPopoverContext);
   const isInsideSelect = !!React.useContext(SelectContext);
@@ -2044,7 +2008,7 @@ function BasePopover(props) {
   setControlContextData == null ? void 0 : setControlContextData({
     defaultShouldFlip
   });
-  return /* @__PURE__ */ React.createElement(React.Fragment, null, isStandalone && /* @__PURE__ */ React.createElement("div", { ref: triggerRef }), /* @__PURE__ */ React.createElement(Popover, __spreadValues$f({}, mergedProps)));
+  return /* @__PURE__ */ React.createElement(React.Fragment, null, isStandalone && /* @__PURE__ */ React.createElement("div", { ref: triggerRef }), /* @__PURE__ */ React.createElement(Popover, __spreadValues$g({}, mergedProps)));
 }
 const POPOVER_COMPONENT_NAME = makeComponentName("popover");
 const POPOVER_ARROW_IMG = {
@@ -2145,40 +2109,40 @@ function registerPopover(loader, overrides) {
   );
 }
 
-var __defProp$e = Object.defineProperty;
+var __defProp$f = Object.defineProperty;
 var __defProps$8 = Object.defineProperties;
 var __getOwnPropDescs$8 = 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 __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$8 = (a, b) => __defProps$8(a, __getOwnPropDescs$8(b));
-var __objRest$d = (source, exclude) => {
+var __objRest$e = (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;
 };
 const COMBOBOX_NAME = makeComponentName("combobox");
 function BaseComboBox(props) {
-  const _a = props, { children, setControlContextData, isOpen } = _a, rest = __objRest$d(_a, ["children", "setControlContextData", "isOpen"]);
+  const _a = props, { children, setControlContextData, isOpen } = _a, rest = __objRest$e(_a, ["children", "setControlContextData", "isOpen"]);
   const idManager = useMemo(() => new ListBoxItemIdManager(), []);
   useEffect(() => {
     idManager.subscribe((ids) => {
@@ -2187,7 +2151,7 @@ function BaseComboBox(props) {
       });
     });
   }, []);
-  return /* @__PURE__ */ React.createElement(ComboBox, __spreadValues$e({}, rest), /* @__PURE__ */ React.createElement(PlasmicPopoverContext.Provider, { value: { isOpen } }, /* @__PURE__ */ React.createElement(
+  return /* @__PURE__ */ React.createElement(ComboBox, __spreadValues$f({}, rest), /* @__PURE__ */ React.createElement(PlasmicPopoverContext.Provider, { value: { isOpen } }, /* @__PURE__ */ React.createElement(
     PlasmicListBoxContext.Provider,
     {
       value: {
@@ -2203,7 +2167,7 @@ function registerComboBox(loader) {
     displayName: "Aria ComboBox",
     importPath: "@plasmicpkgs/react-aria/skinny/registerComboBox",
     importName: "BaseComboBox",
-    props: __spreadProps$8(__spreadValues$e({}, getCommonProps("ComboBox", [
+    props: __spreadProps$8(__spreadValues$f({}, getCommonProps("ComboBox", [
       "name",
       "aria-label",
       "placeholder",
@@ -2329,6 +2293,74 @@ function registerComboBox(loader) {
   });
 }
 
+var __defProp$e = Object.defineProperty;
+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$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 __objRest$d = (source, exclude) => {
+  var target = {};
+  for (var prop in source)
+    if (__hasOwnProp$e.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))
+        target[prop] = source[prop];
+    }
+  return target;
+};
+function BaseHeading(_a) {
+  var _b = _a, { children } = _b, rest = __objRest$d(_b, ["children"]);
+  return /* @__PURE__ */ React.createElement(Heading, __spreadValues$e({}, rest), children);
+}
+const HEADING_COMPONENT_NAME = makeComponentName("heading");
+function registerHeading(loader, overrides) {
+  return registerComponentHelper(
+    loader,
+    BaseHeading,
+    {
+      name: HEADING_COMPONENT_NAME,
+      displayName: "Aria Heading",
+      importPath: "@plasmicpkgs/react-aria/skinny/registerHeading",
+      importName: "BaseHeading",
+      defaultStyles: {
+        fontSize: "20px",
+        fontWeight: "bold",
+        marginBottom: "10px"
+      },
+      props: {
+        children: {
+          type: "slot",
+          mergeWithParent: true,
+          defaultValue: {
+            type: "text",
+            value: "Heading"
+          }
+        },
+        slot: {
+          type: "string",
+          defaultValue: "title",
+          hidden: () => true
+        }
+      },
+      trapsFocus: true
+    },
+    overrides
+  );
+}
+
 var __defProp$d = Object.defineProperty;
 var __defProps$7 = Object.defineProperties;
 var __getOwnPropDescs$7 = Object.getOwnPropertyDescriptors;
@@ -2360,11 +2392,13 @@ var __objRest$c = (source, exclude) => {
     }
   return target;
 };
+const INLINE_STYLES = {
+  outline: "none"
+};
 const BaseModal = forwardRef(
   function _BaseModal(props, ref) {
     const _a = props, {
       children,
-      heading,
       modalOverlayClass,
       className,
       isOpen,
@@ -2372,7 +2406,6 @@ const BaseModal = forwardRef(
       setControlContextData
     } = _a, rest = __objRest$c(_a, [
       "children",
-      "heading",
       "modalOverlayClass",
       "className",
       "isOpen",
@@ -2398,13 +2431,14 @@ const BaseModal = forwardRef(
       }
     }));
     const isCanvas = usePlasmicCanvasContext();
-    const body = /* @__PURE__ */ React.createElement(React.Fragment, null, heading && /* @__PURE__ */ React.createElement(Heading, { slot: "title" }, heading), children);
+    const bodyInCanvas = /* @__PURE__ */ React.createElement("div", { style: INLINE_STYLES }, children);
+    const bodyInPreview = /* @__PURE__ */ React.createElement(Dialog, { style: INLINE_STYLES }, children);
     return /* @__PURE__ */ React.createElement(
       ModalOverlay,
       __spreadProps$7(__spreadValues$d({}, mergedProps), {
         className: `${resetClassName} ${modalOverlayClass}`
       }),
-      /* @__PURE__ */ React.createElement(Modal, { className }, isCanvas ? body : /* @__PURE__ */ React.createElement(Dialog, null, body))
+      /* @__PURE__ */ React.createElement(Modal, { className }, isCanvas ? bodyInCanvas : bodyInPreview)
     );
   }
 );
@@ -2444,18 +2478,6 @@ function registerModal(loader, overrides) {
         }
       },
       props: {
-        heading: {
-          type: "slot",
-          defaultValue: {
-            type: "text",
-            value: "Modal Heading",
-            styles: {
-              fontSize: "20px",
-              fontWeight: "bold",
-              marginBottom: "10px"
-            }
-          }
-        },
         children: {
           type: "slot",
           defaultValue: {
@@ -2468,6 +2490,10 @@ function registerModal(loader, overrides) {
               alignItems: "flex-start"
             },
             children: [
+              {
+                type: "component",
+                name: HEADING_COMPONENT_NAME
+              },
               {
                 type: "text",
                 value: "This is a Modal!"
@@ -2730,7 +2756,7 @@ var __objRest$9 = (source, exclude) => {
     }
   return target;
 };
-const RADIO_INTERACTION_VARIANTS = [
+const RADIO_VARIANTS = [
   "selected",
   "hovered",
   "pressed",
@@ -2740,11 +2766,9 @@ const RADIO_INTERACTION_VARIANTS = [
   "readonly",
   "selected"
 ];
-const { interactionVariants: interactionVariants$8, withObservedValues: withObservedValues$7 } = pickAriaComponentVariants(
-  RADIO_INTERACTION_VARIANTS
-);
+const { variants: variants$8, withObservedValues: withObservedValues$7 } = pickAriaComponentVariants(RADIO_VARIANTS);
 function BaseRadio(props) {
-  const _a = props, { children, setControlContextData, updateInteractionVariant } = _a, rest = __objRest$9(_a, ["children", "setControlContextData", "updateInteractionVariant"]);
+  const _a = props, { children, setControlContextData, updateVariant } = _a, rest = __objRest$9(_a, ["children", "setControlContextData", "updateVariant"]);
   const contextProps = React.useContext(PlasmicRadioGroupContext);
   const isStandalone = !contextProps;
   setControlContextData == null ? void 0 : setControlContextData({
@@ -2769,7 +2793,7 @@ function BaseRadio(props) {
       disabled: isDisabled,
       readonly: isReadOnly
     },
-    updateInteractionVariant
+    updateVariant
   ));
   if (isStandalone) {
     return /* @__PURE__ */ React.createElement(RadioGroup, null, radio);
@@ -2817,7 +2841,7 @@ function registerRadio(loader, overrides) {
       displayName: "Aria Radio",
       importPath: "@plasmicpkgs/react-aria/skinny/registerRadio",
       importName: "BaseRadio",
-      interactionVariants: interactionVariants$8,
+      variants: variants$8,
       props: __spreadProps$6(__spreadValues$a({}, getCommonProps("radio", [
         "isDisabled",
         "autoFocus",
@@ -2870,22 +2894,17 @@ var __objRest$8 = (source, exclude) => {
     }
   return target;
 };
-const RADIO_GROUP_INTERACTION_VARIANTS = [
-  "disabled",
-  "readonly"
-];
-const { interactionVariants: interactionVariants$7, withObservedValues: withObservedValues$6 } = pickAriaComponentVariants(
-  RADIO_GROUP_INTERACTION_VARIANTS
-);
+const RADIO_GROUP_VARIANTS = ["disabled", "readonly"];
+const { variants: variants$7, withObservedValues: withObservedValues$6 } = pickAriaComponentVariants(RADIO_GROUP_VARIANTS);
 function BaseRadioGroup(props) {
-  const _a = props, { children, updateInteractionVariant } = _a, rest = __objRest$8(_a, ["children", "updateInteractionVariant"]);
+  const _a = props, { children, updateVariant } = _a, rest = __objRest$8(_a, ["children", "updateVariant"]);
   return /* @__PURE__ */ React.createElement(PlasmicRadioGroupContext.Provider, { value: props }, /* @__PURE__ */ React.createElement(RadioGroup, __spreadValues$9({}, rest), ({ isDisabled, isReadOnly }) => withObservedValues$6(
     children,
     {
       disabled: isDisabled,
       readonly: isReadOnly
     },
-    updateInteractionVariant
+    updateVariant
   )));
 }
 const RADIO_GROUP_COMPONENT_NAME = makeComponentName("radioGroup");
@@ -2905,7 +2924,7 @@ function registerRadioGroup(loader, overrides) {
       displayName: "Aria RadioGroup",
       importPath: "@plasmicpkgs/react-aria/skinny/registerRadioGroup",
       importName: "BaseRadioGroup",
-      interactionVariants: interactionVariants$7,
+      variants: variants$7,
       props: __spreadProps$5(__spreadValues$9({}, getCommonProps("radio group", [
         "name",
         "isDisabled",
@@ -2966,7 +2985,7 @@ function registerRadioGroup(loader, overrides) {
                   props: {
                     children: {
                       type: "text",
-                      value: "Add interaction variants to see it in action..."
+                      value: "Use the registered variants to see it in action..."
                     }
                   }
                 }
@@ -3299,18 +3318,18 @@ var __objRest$7 = (source, exclude) => {
     }
   return target;
 };
-const SLIDER_OUTPUT_INTERACTION_VARIANTS = ["disabled"];
-const { interactionVariants: interactionVariants$6, withObservedValues: withObservedValues$5 } = pickAriaComponentVariants(
-  SLIDER_OUTPUT_INTERACTION_VARIANTS
+const SLIDER_OUTPUT_VARIANTS = ["disabled"];
+const { variants: variants$6, withObservedValues: withObservedValues$5 } = pickAriaComponentVariants(
+  SLIDER_OUTPUT_VARIANTS
 );
 function BaseSliderOutput(props) {
-  const _a = props, { updateInteractionVariant, children } = _a, rest = __objRest$7(_a, ["updateInteractionVariant", "children"]);
+  const _a = props, { updateVariant, children } = _a, rest = __objRest$7(_a, ["updateVariant", "children"]);
   return /* @__PURE__ */ React.createElement(SliderOutput, __spreadValues$7({}, rest), ({ isDisabled }) => withObservedValues$5(
     children,
     {
       disabled: isDisabled
     },
-    updateInteractionVariant
+    updateVariant
   ));
 }
 const SLIDER_OUTPUT_COMPONENT_NAME = makeComponentName("sliderOutput");
@@ -3323,7 +3342,7 @@ function registerSliderOutput(loader, overrides) {
       displayName: "Aria Slider Output",
       importPath: "@plasmicpkgs/react-aria/skinny/registerSliderOutput",
       importName: "BaseSliderOutput",
-      interactionVariants: interactionVariants$6,
+      variants: variants$6,
       props: {
         children: { type: "slot" }
       },
@@ -3380,25 +3399,25 @@ var __objRest$6 = (source, exclude) => {
     }
   return target;
 };
-const SLIDER_THUMB_INTERACTION_VARIANTS = [
+const SLIDER_THUMB_VARIANTS = [
   "dragging",
   "hovered",
   "focused",
   "focusVisible",
   "disabled"
 ];
-const { interactionVariants: interactionVariants$5, withObservedValues: withObservedValues$4 } = pickAriaComponentVariants(
-  SLIDER_THUMB_INTERACTION_VARIANTS
+const { variants: variants$5, withObservedValues: withObservedValues$4 } = pickAriaComponentVariants(
+  SLIDER_THUMB_VARIANTS
 );
 function BaseSliderThumb(_a) {
   var _b = _a, {
     children,
     advanced,
-    updateInteractionVariant
+    updateVariant
   } = _b, rest = __objRest$6(_b, [
     "children",
     "advanced",
-    "updateInteractionVariant"
+    "updateVariant"
   ]);
   const context = React.useContext(PlasmicSliderContext);
   const mergedProps = mergeProps(context, rest);
@@ -3411,7 +3430,7 @@ function BaseSliderThumb(_a) {
       focusVisible: isFocusVisible,
       disabled: isDisabled
     },
-    updateInteractionVariant
+    updateVariant
   ));
   return /* @__PURE__ */ React.createElement(
     ErrorBoundary,
@@ -3440,7 +3459,7 @@ function registerSliderThumb(loader, overrides) {
         borderRadius: "100%",
         cursor: "pointer"
       },
-      interactionVariants: interactionVariants$5,
+      variants: variants$5,
       props: __spreadProps$3(__spreadValues$6({}, getCommonProps("slider thumb", [
         "name",
         "isDisabled",
@@ -3490,9 +3509,9 @@ var __objRest$5 = (source, exclude) => {
     }
   return target;
 };
-const SLIDER_TRACK_INTERACTION_VARIANTS = ["hovered"];
-const { interactionVariants: interactionVariants$4, withObservedValues: withObservedValues$3 } = pickAriaComponentVariants(
-  SLIDER_TRACK_INTERACTION_VARIANTS
+const SLIDER_TRACK_VARIANTS = ["hovered"];
+const { variants: variants$4, withObservedValues: withObservedValues$3 } = pickAriaComponentVariants(
+  SLIDER_TRACK_VARIANTS
 );
 function findMinMaxIndices(values) {
   let minIndex = 0;
@@ -3516,7 +3535,7 @@ function BaseSliderTrack(props) {
   const context = React.useContext(PlasmicSliderContext);
   const isStandalone = !context;
   const mergedProps = mergeProps(context, props);
-  const _a = mergedProps, { children, progressBar, updateInteractionVariant } = _a, rest = __objRest$5(_a, ["children", "progressBar", "updateInteractionVariant"]);
+  const _a = mergedProps, { children, progressBar, updateVariant } = _a, rest = __objRest$5(_a, ["children", "progressBar", "updateVariant"]);
   const isMultiValue = isMultiValueGuard(mergedProps.value);
   const { minIndex, maxIndex } = useMemo(() => {
     if (!context || !Array.isArray(context.value) || context.value.length <= 1) {
@@ -3565,7 +3584,7 @@ function BaseSliderTrack(props) {
     {
       hovered: isHovered
     },
-    updateInteractionVariant
+    updateVariant
   )));
   if (isStandalone) {
     return /* @__PURE__ */ React.createElement(Slider, { style: { height: "100%", width: "100%" } }, track);
@@ -3582,7 +3601,7 @@ function registerSliderTrack(sliderThumbMeta, loader, overrides) {
       displayName: "Aria Slider Track",
       importPath: "@plasmicpkgs/react-aria/skinny/registerSliderTrack",
       importName: "BaseSliderTrack",
-      interactionVariants: interactionVariants$4,
+      variants: variants$4,
       defaultStyles: {
         width: "stretch",
         backgroundColor: "#aaa",
@@ -3671,12 +3690,10 @@ var __objRest$4 = (source, exclude) => {
 };
 const SLIDER_COMPONENT_NAME = makeComponentName("slider");
 const RANGE_SLIDER_COMPONENT_NAME = makeComponentName("range-slider");
-const SLIDER_INTERACTION_VARIANTS = ["disabled"];
-const { interactionVariants: interactionVariants$3, withObservedValues: withObservedValues$2 } = pickAriaComponentVariants(
-  SLIDER_INTERACTION_VARIANTS
-);
+const SLIDER_VARIANTS = ["disabled"];
+const { variants: variants$3, withObservedValues: withObservedValues$2 } = pickAriaComponentVariants(SLIDER_VARIANTS);
 function BaseSlider(props) {
-  const _a = props, { children, updateInteractionVariant } = _a, rest = __objRest$4(_a, ["children", "updateInteractionVariant"]);
+  const _a = props, { children, updateVariant } = _a, rest = __objRest$4(_a, ["children", "updateVariant"]);
   return /* @__PURE__ */ React.createElement(
     PlasmicSliderContext.Provider,
     {
@@ -3691,7 +3708,7 @@ function BaseSlider(props) {
       {
         disabled: isDisabled
       },
-      updateInteractionVariant
+      updateVariant
     ))
   );
 }
@@ -3738,7 +3755,7 @@ function registerSlider(loader, overrides) {
       displayName: "Aria Range Slider",
       importPath: "@plasmicpkgs/react-aria/skinny/registerSlider",
       importName: "BaseSlider",
-      interactionVariants: interactionVariants$3,
+      variants: variants$3,
       defaultStyles: {
         width: "300px"
       },
@@ -3850,7 +3867,7 @@ function registerSlider(loader, overrides) {
       displayName: "Aria Slider",
       importPath: "@plasmicpkgs/react-aria/skinny/registerSlider",
       importName: "BaseSlider",
-      interactionVariants: interactionVariants$3,
+      variants: variants$3,
       defaultStyles: {
         width: "300px"
       },
@@ -3960,7 +3977,7 @@ var __objRest$3 = (source, exclude) => {
     }
   return target;
 };
-const SWITCH_INTERACTION_VARIANTS = [
+const SWITCH_VARIANTS = [
   "hovered",
   "pressed",
   "focused",
@@ -3969,11 +3986,9 @@ const SWITCH_INTERACTION_VARIANTS = [
   "disabled",
   "readonly"
 ];
-const { interactionVariants: interactionVariants$2, withObservedValues: withObservedValues$1 } = pickAriaComponentVariants(
-  SWITCH_INTERACTION_VARIANTS
-);
+const { variants: variants$2, withObservedValues: withObservedValues$1 } = pickAriaComponentVariants(SWITCH_VARIANTS);
 function BaseSwitch(props) {
-  const _a = props, { children, updateInteractionVariant } = _a, rest = __objRest$3(_a, ["children", "updateInteractionVariant"]);
+  const _a = props, { children, updateVariant } = _a, rest = __objRest$3(_a, ["children", "updateVariant"]);
   return /* @__PURE__ */ React.createElement(Switch, __spreadValues$3({}, rest), ({
     isHovered,
     isPressed,
@@ -3993,7 +4008,7 @@ function BaseSwitch(props) {
       disabled: isDisabled,
       readonly: isReadOnly
     },
-    updateInteractionVariant
+    updateVariant
   ));
 }
 function registerSwitch(loader, overrides) {
@@ -4005,7 +4020,7 @@ function registerSwitch(loader, overrides) {
       displayName: "Aria Switch",
       importPath: "@plasmicpkgs/react-aria/skinny/registerSwitch",
       importName: "BaseSwitch",
-      interactionVariants: interactionVariants$2,
+      variants: variants$2,
       defaultStyles: {
         display: "flex",
         flexDirection: "column",
@@ -4085,7 +4100,7 @@ function registerSwitch(loader, overrides) {
               props: {
                 children: {
                   type: "text",
-                  value: "Add interaction variants to see it in action..."
+                  value: "Use the registered variants to see it in action..."
                 }
               }
             }
@@ -4151,14 +4166,12 @@ var __objRest$2 = (source, exclude) => {
     }
   return target;
 };
-const TEXTAREA_INTERACTION_VARIANTS = [
+const TEXTAREA_VARIANTS = [
   "focused",
   "hovered",
   "disabled"
 ];
-const { interactionVariants: interactionVariants$1 } = pickAriaComponentVariants(
-  TEXTAREA_INTERACTION_VARIANTS
-);
+const { variants: variants$1 } = pickAriaComponentVariants(TEXTAREA_VARIANTS);
 const inputHelpers = {
   states: {
     value: {
@@ -4170,16 +4183,16 @@ const inputHelpers = {
 };
 function BaseTextArea(props) {
   var _b;
-  const _a = props, { disabled, updateInteractionVariant, setControlContextData } = _a, rest = __objRest$2(_a, ["disabled", "updateInteractionVariant", "setControlContextData"]);
+  const _a = props, { disabled, updateVariant, setControlContextData } = _a, rest = __objRest$2(_a, ["disabled", "updateVariant", "setControlContextData"]);
   const textFieldContext = React.useContext(PlasmicTextFieldContext);
   const mergedProps = mergeProps(rest, {
     disabled: (_b = textFieldContext == null ? void 0 : textFieldContext.isDisabled) != null ? _b : disabled
   });
   useEffect(() => {
-    updateInteractionVariant == null ? void 0 : updateInteractionVariant({
+    updateVariant == null ? void 0 : updateVariant({
       disabled: mergedProps.disabled
     });
-  }, [mergedProps.disabled, updateInteractionVariant]);
+  }, [mergedProps.disabled, updateVariant]);
   setControlContextData == null ? void 0 : setControlContextData({
     parent: textFieldContext
   });
@@ -4187,17 +4200,17 @@ function BaseTextArea(props) {
     TextArea,
     __spreadValues$2({
       onFocus: () => {
-        updateInteractionVariant == null ? void 0 : updateInteractionVariant({
+        updateVariant == null ? void 0 : updateVariant({
           focused: true
         });
       },
       onBlur: () => {
-        updateInteractionVariant == null ? void 0 : updateInteractionVariant({
+        updateVariant == null ? void 0 : updateVariant({
           focused: false
         });
       },
       onHoverChange: (isHovered) => {
-        updateInteractionVariant == null ? void 0 : updateInteractionVariant({
+        updateVariant == null ? void 0 : updateVariant({
           hovered: isHovered
         });
       }
@@ -4213,7 +4226,7 @@ function registerTextArea(loader, overrides) {
       displayName: "Aria TextArea",
       importPath: "@plasmicpkgs/react-aria/skinny/registerTextArea",
       importName: "BaseTextArea",
-      interactionVariants: interactionVariants$1,
+      variants: variants$1,
       props: __spreadValues$2({}, getCommonProps("Text Area", [
         "name",
         "disabled",
@@ -4291,22 +4304,17 @@ var __objRest$1 = (source, exclude) => {
     }
   return target;
 };
-const TEXT_FIELD_INTERACTION_VARIANTS = [
-  "disabled",
-  "readonly"
-];
-const { interactionVariants, withObservedValues } = pickAriaComponentVariants(
-  TEXT_FIELD_INTERACTION_VARIANTS
-);
+const TEXT_FIELD_VARIANTS = ["disabled", "readonly"];
+const { variants, withObservedValues } = pickAriaComponentVariants(TEXT_FIELD_VARIANTS);
 function BaseTextField(props) {
-  const _a = props, { children, updateInteractionVariant, autoComplete } = _a, rest = __objRest$1(_a, ["children", "updateInteractionVariant", "autoComplete"]);
+  const _a = props, { children, updateVariant, autoComplete } = _a, rest = __objRest$1(_a, ["children", "updateVariant", "autoComplete"]);
   return /* @__PURE__ */ React.createElement(PlasmicTextFieldContext.Provider, { value: props }, /* @__PURE__ */ React.createElement(TextField, __spreadValues$1({ autoComplete: resolveAutoComplete(autoComplete) }, rest), ({ isDisabled, isReadOnly }) => withObservedValues(
     children,
     {
       disabled: isDisabled,
       readonly: isReadOnly
     },
-    updateInteractionVariant
+    updateVariant
   )));
 }
 const TEXT_FIELD_COMPONENT_NAME = makeComponentName("textField");
@@ -4319,7 +4327,7 @@ function registerTextField(loader, overrides) {
       displayName: "Aria TextField",
       importPath: "@plasmicpkgs/react-aria/skinny/registerTextField",
       importName: "BaseTextField",
-      interactionVariants,
+      variants,
       // TODO: Support for validate prop
       props: __spreadProps(__spreadValues$1({}, getCommonProps("Text Field", [
         "name",
@@ -4562,6 +4570,7 @@ function registerTooltip(loader, overrides) {
 
 function registerAll(loader) {
   registerText(loader);
+  registerHeading(loader);
   registerDescription(loader);
   registerSelect(loader);
   registerComboBox(loader);