@plasmicpkgs/react-aria 0.0.51 → 0.0.52

package/dist/react-aria.js

@@ -418,7 +418,7 @@ function getCommonProps(componentName, propNames) {
   return filteredProps;
 }
 
-const ARIA_COMPONENTS_INTERACTION_VARIANTS = {
+const ARIA_COMPONENTS_VARIANTS = {
   hovered: {
     cssSelector: "[data-hovered]",
     displayName: "Hovered"
@@ -459,29 +459,22 @@ const ARIA_COMPONENTS_INTERACTION_VARIANTS = {
 function ChangesObserver({
   children,
   changes,
-  updateInteractionVariant
+  updateVariant
 }) {
   React__default.default.useEffect(() => {
-    if (updateInteractionVariant) {
-      updateInteractionVariant(changes);
+    if (updateVariant) {
+      updateVariant(changes);
     }
-  }, [changes, updateInteractionVariant]);
-  return /* @__PURE__ */ React__default.default.createElement(React__default.default.Fragment, null, children);
+  }, [changes, updateVariant]);
+  return children;
 }
-function realWithObservedValues(children, changes, updateInteractionVariant) {
-  return /* @__PURE__ */ React__default.default.createElement(
-    ChangesObserver,
-    {
-      changes,
-      updateInteractionVariant
-    },
-    children
-  );
+function realWithObservedValues(children, changes, updateVariant) {
+  return /* @__PURE__ */ React__default.default.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
   };
@@ -518,28 +511,16 @@ var __objRest$n = (source, exclude) => {
     }
   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$n(_a, ["submitsForm", "resetsForm", "children", "updateVariant"]);
   const type = submitsForm ? "submit" : resetsForm ? "reset" : "button";
   return /* @__PURE__ */ React__default.default.createElement(reactAriaComponents.Button, __spreadValues$p({ type }, rest), ({ isHovered, isPressed, isFocused, isFocusVisible, isDisabled }) => withObservedValues$b(
     children,
@@ -550,7 +531,7 @@ function BaseButton(props) {
       focusVisible: isFocusVisible,
       disabled: isDisabled
     },
-    updateInteractionVariant
+    updateVariant
   ));
 }
 const BUTTON_COMPONENT_NAME = makeComponentName("button");
@@ -563,7 +544,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",
@@ -653,7 +634,7 @@ var __objRest$m = (source, exclude) => {
     }
   return target;
 };
-const CHECKBOX_INTERACTION_VARIANTS = [
+const CHECKBOX_VARIANTS = [
   "hovered",
   "pressed",
   "focused",
@@ -664,11 +645,9 @@ 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$m(_a, ["children", "updateVariant", "setControlContextData"]);
   const contextProps = React__default.default.useContext(PlasmicCheckboxGroupContext);
   setControlContextData == null ? void 0 : setControlContextData({
     parent: contextProps
@@ -694,7 +673,7 @@ function BaseCheckbox(props) {
       selected: isSelected,
       readonly: isReadOnly
     },
-    updateInteractionVariant
+    updateVariant
   )));
 }
 const makeDefaultCheckboxChildren = ({
@@ -738,7 +717,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..."
       }
     ] : []
   ]
@@ -752,7 +731,7 @@ function registerCheckbox(loader, overrides) {
       displayName: "Aria Checkbox",
       importPath: "@plasmicpkgs/react-aria/skinny/registerCheckbox",
       importName: "BaseCheckbox",
-      interactionVariants: interactionVariants$c,
+      variants: variants$c,
       props: __spreadProps$b(__spreadValues$o({}, getCommonProps("checkbox", [
         "name",
         "isDisabled",
@@ -1134,22 +1113,19 @@ var __objRest$j = (source, exclude) => {
     }
   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"]);
+  const _a = props, { children, updateVariant } = _a, rest = __objRest$j(_a, ["children", "updateVariant"]);
   return /* @__PURE__ */ React__default.default.createElement(PlasmicCheckboxGroupContext.Provider, { value: rest }, /* @__PURE__ */ React__default.default.createElement(reactAriaComponents.CheckboxGroup, __spreadValues$k({}, rest), ({ isDisabled, isReadOnly }) => withObservedValues$9(
     children,
     {
       disabled: isDisabled,
       readonly: isReadOnly
     },
-    updateInteractionVariant
+    updateVariant
   )));
 }
 const componentName = makeComponentName("checkboxGroup");
@@ -1171,7 +1147,7 @@ function registerCheckboxGroup(loader, overrides) {
       displayName: "Aria Checkbox Group",
       importPath: "@plasmicpkgs/react-aria/skinny/registerCheckboxGroup",
       importName: "BaseCheckboxGroup",
-      interactionVariants: interactionVariants$b,
+      variants: variants$b,
       props: __spreadProps$9(__spreadValues$k({}, getCommonProps("checkbox group", [
         "name",
         "isDisabled",
@@ -1242,7 +1218,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..."
                     }
                   }
                 }
@@ -1365,14 +1341,12 @@ var __objRest$i = (source, exclude) => {
     }
   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: {
@@ -1385,12 +1359,12 @@ const inputHelpers$1 = {
 function BaseInput(props) {
   var _b;
   const _a = props, {
-    updateInteractionVariant,
+    updateVariant,
     setControlContextData,
     disabled,
     autoComplete
   } = _a, rest = __objRest$i(_a, [
-    "updateInteractionVariant",
+    "updateVariant",
     "setControlContextData",
     "disabled",
     "autoComplete"
@@ -1403,31 +1377,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
   });
   React.useEffect(() => {
-    updateInteractionVariant == null ? void 0 : updateInteractionVariant({
+    updateVariant == null ? void 0 : updateVariant({
       disabled: mergedProps.disabled
     });
-  }, [mergedProps.disabled, updateInteractionVariant]);
+  }, [mergedProps.disabled, updateVariant]);
   return /* @__PURE__ */ React__default.default.createElement(
     reactAriaComponents.Input,
     __spreadValues$j({
       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
         });
       }
@@ -1444,7 +1418,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",
@@ -1529,7 +1503,7 @@ var __objRest$h = (source, exclude) => {
     }
   return target;
 };
-const LIST_BOX_ITEM_INTERACTION_VARIANTS = [
+const LIST_BOX_ITEM_VARIANTS = [
   "hovered",
   "pressed",
   "focused",
@@ -1537,21 +1511,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$h(_a, ["children", "setControlContextData", "updateVariant", "id"]);
   const listboxContext = React__default.default.useContext(PlasmicListBoxContext);
   const isStandalone = !listboxContext;
   const [registeredId, setRegisteredId] = React.useState();
@@ -1587,7 +1551,7 @@ function BaseListBoxItem(props) {
       selected: isSelected,
       disabled: isDisabled
     },
-    updateInteractionVariant
+    updateVariant
   ));
   if (isStandalone) {
     return /* @__PURE__ */ React__default.default.createElement(reactAriaComponents.ListBox, { selectionMode: "single" }, listboxItem);
@@ -1640,7 +1604,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",
@@ -2738,7 +2702,7 @@ var __objRest$9 = (source, exclude) => {
     }
   return target;
 };
-const RADIO_INTERACTION_VARIANTS = [
+const RADIO_VARIANTS = [
   "selected",
   "hovered",
   "pressed",
@@ -2748,11 +2712,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__default.default.useContext(PlasmicRadioGroupContext);
   const isStandalone = !contextProps;
   setControlContextData == null ? void 0 : setControlContextData({
@@ -2777,7 +2739,7 @@ function BaseRadio(props) {
       disabled: isDisabled,
       readonly: isReadOnly
     },
-    updateInteractionVariant
+    updateVariant
   ));
   if (isStandalone) {
     return /* @__PURE__ */ React__default.default.createElement(reactAriaComponents.RadioGroup, null, radio);
@@ -2825,7 +2787,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",
@@ -2878,22 +2840,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__default.default.createElement(PlasmicRadioGroupContext.Provider, { value: props }, /* @__PURE__ */ React__default.default.createElement(reactAriaComponents.RadioGroup, __spreadValues$9({}, rest), ({ isDisabled, isReadOnly }) => withObservedValues$6(
     children,
     {
       disabled: isDisabled,
       readonly: isReadOnly
     },
-    updateInteractionVariant
+    updateVariant
   )));
 }
 const RADIO_GROUP_COMPONENT_NAME = makeComponentName("radioGroup");
@@ -2913,7 +2870,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",
@@ -2974,7 +2931,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..."
                     }
                   }
                 }
@@ -3307,18 +3264,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__default.default.createElement(reactAriaComponents.SliderOutput, __spreadValues$7({}, rest), ({ isDisabled }) => withObservedValues$5(
     children,
     {
       disabled: isDisabled
     },
-    updateInteractionVariant
+    updateVariant
   ));
 }
 const SLIDER_OUTPUT_COMPONENT_NAME = makeComponentName("sliderOutput");
@@ -3331,7 +3288,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" }
       },
@@ -3388,25 +3345,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__default.default.useContext(PlasmicSliderContext);
   const mergedProps = reactAria.mergeProps(context, rest);
@@ -3419,7 +3376,7 @@ function BaseSliderThumb(_a) {
       focusVisible: isFocusVisible,
       disabled: isDisabled
     },
-    updateInteractionVariant
+    updateVariant
   ));
   return /* @__PURE__ */ React__default.default.createElement(
     ErrorBoundary,
@@ -3448,7 +3405,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",
@@ -3498,9 +3455,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;
@@ -3524,7 +3481,7 @@ function BaseSliderTrack(props) {
   const context = React__default.default.useContext(PlasmicSliderContext);
   const isStandalone = !context;
   const mergedProps = reactAria.mergeProps(context, props);
-  const _a = mergedProps, { children, progressBar, 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 } = React.useMemo(() => {
     if (!context || !Array.isArray(context.value) || context.value.length <= 1) {
@@ -3573,7 +3530,7 @@ function BaseSliderTrack(props) {
     {
       hovered: isHovered
     },
-    updateInteractionVariant
+    updateVariant
   )));
   if (isStandalone) {
     return /* @__PURE__ */ React__default.default.createElement(reactAriaComponents.Slider, { style: { height: "100%", width: "100%" } }, track);
@@ -3590,7 +3547,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",
@@ -3679,12 +3636,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__default.default.createElement(
     PlasmicSliderContext.Provider,
     {
@@ -3699,7 +3654,7 @@ function BaseSlider(props) {
       {
         disabled: isDisabled
       },
-      updateInteractionVariant
+      updateVariant
     ))
   );
 }
@@ -3746,7 +3701,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"
       },
@@ -3858,7 +3813,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"
       },
@@ -3968,7 +3923,7 @@ var __objRest$3 = (source, exclude) => {
     }
   return target;
 };
-const SWITCH_INTERACTION_VARIANTS = [
+const SWITCH_VARIANTS = [
   "hovered",
   "pressed",
   "focused",
@@ -3977,11 +3932,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__default.default.createElement(reactAriaComponents.Switch, __spreadValues$3({}, rest), ({
     isHovered,
     isPressed,
@@ -4001,7 +3954,7 @@ function BaseSwitch(props) {
       disabled: isDisabled,
       readonly: isReadOnly
     },
-    updateInteractionVariant
+    updateVariant
   ));
 }
 function registerSwitch(loader, overrides) {
@@ -4013,7 +3966,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",
@@ -4093,7 +4046,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..."
                 }
               }
             }
@@ -4159,14 +4112,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: {
@@ -4178,16 +4129,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__default.default.useContext(PlasmicTextFieldContext);
   const mergedProps = reactAria.mergeProps(rest, {
     disabled: (_b = textFieldContext == null ? void 0 : textFieldContext.isDisabled) != null ? _b : disabled
   });
   React.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
   });
@@ -4195,17 +4146,17 @@ function BaseTextArea(props) {
     reactAriaComponents.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
         });
       }
@@ -4221,7 +4172,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",
@@ -4299,22 +4250,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__default.default.createElement(PlasmicTextFieldContext.Provider, { value: props }, /* @__PURE__ */ React__default.default.createElement(reactAriaComponents.TextField, __spreadValues$1({ autoComplete: resolveAutoComplete(autoComplete) }, rest), ({ isDisabled, isReadOnly }) => withObservedValues(
     children,
     {
       disabled: isDisabled,
       readonly: isReadOnly
     },
-    updateInteractionVariant
+    updateVariant
   )));
 }
 const TEXT_FIELD_COMPONENT_NAME = makeComponentName("textField");
@@ -4327,7 +4273,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",