@plasmicpkgs/react-aria 0.0.51 → 0.0.52

package/dist/react-aria.esm.js

@@ -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,29 +451,22 @@ 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
   };
@@ -510,28 +503,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.createElement(Button, __spreadValues$p({ type }, rest), ({ isHovered, isPressed, isFocused, isFocusVisible, isDisabled }) => withObservedValues$b(
     children,
@@ -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",
@@ -645,7 +626,7 @@ var __objRest$m = (source, exclude) => {
     }
   return target;
 };
-const CHECKBOX_INTERACTION_VARIANTS = [
+const CHECKBOX_VARIANTS = [
   "hovered",
   "pressed",
   "focused",
@@ -656,11 +637,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.useContext(PlasmicCheckboxGroupContext);
   setControlContextData == null ? void 0 : setControlContextData({
     parent: contextProps
@@ -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,7 +723,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",
@@ -1126,22 +1105,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.createElement(PlasmicCheckboxGroupContext.Provider, { value: rest }, /* @__PURE__ */ React.createElement(CheckboxGroup, __spreadValues$k({}, rest), ({ isDisabled, isReadOnly }) => withObservedValues$9(
     children,
     {
       disabled: isDisabled,
       readonly: isReadOnly
     },
-    updateInteractionVariant
+    updateVariant
   )));
 }
 const componentName = makeComponentName("checkboxGroup");
@@ -1163,7 +1139,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",
@@ -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..."
                     }
                   }
                 }
@@ -1357,14 +1333,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: {
@@ -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",
+    "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({
       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",
@@ -1521,7 +1495,7 @@ var __objRest$h = (source, exclude) => {
     }
   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$h(_a, ["children", "setControlContextData", "updateVariant", "id"]);
   const listboxContext = React.useContext(PlasmicListBoxContext);
   const isStandalone = !listboxContext;
   const [registeredId, setRegisteredId] = useState();
@@ -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",
@@ -2730,7 +2694,7 @@ var __objRest$9 = (source, exclude) => {
     }
   return target;
 };
-const RADIO_INTERACTION_VARIANTS = [
+const RADIO_VARIANTS = [
   "selected",
   "hovered",
   "pressed",
@@ -2740,11 +2704,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 +2731,7 @@ function BaseRadio(props) {
       disabled: isDisabled,
       readonly: isReadOnly
     },
-    updateInteractionVariant
+    updateVariant
   ));
   if (isStandalone) {
     return /* @__PURE__ */ React.createElement(RadioGroup, null, radio);
@@ -2817,7 +2779,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 +2832,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 +2862,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 +2923,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 +3256,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 +3280,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 +3337,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 +3368,7 @@ function BaseSliderThumb(_a) {
       focusVisible: isFocusVisible,
       disabled: isDisabled
     },
-    updateInteractionVariant
+    updateVariant
   ));
   return /* @__PURE__ */ React.createElement(
     ErrorBoundary,
@@ -3440,7 +3397,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 +3447,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 +3473,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 +3522,7 @@ function BaseSliderTrack(props) {
     {
       hovered: isHovered
     },
-    updateInteractionVariant
+    updateVariant
   )));
   if (isStandalone) {
     return /* @__PURE__ */ React.createElement(Slider, { style: { height: "100%", width: "100%" } }, track);
@@ -3582,7 +3539,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 +3628,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 +3646,7 @@ function BaseSlider(props) {
       {
         disabled: isDisabled
       },
-      updateInteractionVariant
+      updateVariant
     ))
   );
 }
@@ -3738,7 +3693,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 +3805,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 +3915,7 @@ var __objRest$3 = (source, exclude) => {
     }
   return target;
 };
-const SWITCH_INTERACTION_VARIANTS = [
+const SWITCH_VARIANTS = [
   "hovered",
   "pressed",
   "focused",
@@ -3969,11 +3924,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 +3946,7 @@ function BaseSwitch(props) {
       disabled: isDisabled,
       readonly: isReadOnly
     },
-    updateInteractionVariant
+    updateVariant
   ));
 }
 function registerSwitch(loader, overrides) {
@@ -4005,7 +3958,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 +4038,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 +4104,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 +4121,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 +4138,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 +4164,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 +4242,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 +4265,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",