@plasmicpkgs/react-aria 0.0.153 → 0.0.154

package/dist/react-aria.js

@@ -16,8 +16,8 @@ var registerComponent__default = /*#__PURE__*/_interopDefault(registerComponent)
 var flattenChildren__default = /*#__PURE__*/_interopDefault(flattenChildren);
 
 var __defProp$t = Object.defineProperty;
-var __defProps$n = Object.defineProperties;
-var __getOwnPropDescs$n = Object.getOwnPropertyDescriptors;
+var __defProps$o = Object.defineProperties;
+var __getOwnPropDescs$o = Object.getOwnPropertyDescriptors;
 var __getOwnPropSymbols$t = Object.getOwnPropertySymbols;
 var __hasOwnProp$t = Object.prototype.hasOwnProperty;
 var __propIsEnum$t = Object.prototype.propertyIsEnumerable;
@@ -33,7 +33,7 @@ var __spreadValues$t = (a, b) => {
     }
   return a;
 };
-var __spreadProps$n = (a, b) => __defProps$n(a, __getOwnPropDescs$n(b));
+var __spreadProps$o = (a, b) => __defProps$o(a, __getOwnPropDescs$o(b));
 var __objRest$p = (source, exclude) => {
   var target = {};
   for (var prop in source)
@@ -96,7 +96,7 @@ function useAutoOpen({
 }
 function registerComponentHelper(loader, component, meta, overrides) {
   if (overrides) {
-    meta = __spreadProps$n(__spreadValues$t(__spreadValues$t({}, meta), overrides), {
+    meta = __spreadProps$o(__spreadValues$t(__spreadValues$t({}, meta), overrides), {
       props: __spreadValues$t(__spreadValues$t({}, meta.props), overrides.props)
     });
     if (overrides.parentComponentName) {
@@ -690,8 +690,7 @@ const ARIA_COMPONENTS_VARIANTS = {
     displayName: "Placement (Bottom)"
   }
 };
-function ChangesObserver({
-  children,
+function VariantUpdater({
   changes,
   updateVariant
 }) {
@@ -700,23 +699,19 @@ function ChangesObserver({
       updateVariant(changes);
     }
   }, [changes, updateVariant]);
-  return children;
-}
-function realWithObservedValues(children, changes, updateVariant) {
-  return /* @__PURE__ */ React__default.default.createElement(ChangesObserver, { changes, updateVariant }, children);
+  return null;
 }
 function pickAriaComponentVariants(keys) {
   return {
     variants: Object.fromEntries(
       keys.map((key) => [key, ARIA_COMPONENTS_VARIANTS[key]])
-    ),
-    withObservedValues: realWithObservedValues
+    )
   };
 }
 
 var __defProp$r = Object.defineProperty;
-var __defProps$m = Object.defineProperties;
-var __getOwnPropDescs$m = Object.getOwnPropertyDescriptors;
+var __defProps$n = Object.defineProperties;
+var __getOwnPropDescs$n = Object.getOwnPropertyDescriptors;
 var __getOwnPropSymbols$r = Object.getOwnPropertySymbols;
 var __hasOwnProp$r = Object.prototype.hasOwnProperty;
 var __propIsEnum$r = Object.prototype.propertyIsEnumerable;
@@ -732,7 +727,7 @@ var __spreadValues$r = (a, b) => {
     }
   return a;
 };
-var __spreadProps$m = (a, b) => __defProps$m(a, __getOwnPropDescs$m(b));
+var __spreadProps$n = (a, b) => __defProps$n(a, __getOwnPropDescs$n(b));
 var __objRest$o = (source, exclude) => {
   var target = {};
   for (var prop in source)
@@ -752,7 +747,7 @@ const BUTTON_VARIANTS = [
   "focusVisible",
   "disabled"
 ];
-const { variants: variants$f, withObservedValues: withObservedValues$c } = pickAriaComponentVariants(BUTTON_VARIANTS);
+const { variants: variants$e } = pickAriaComponentVariants(BUTTON_VARIANTS);
 const BaseButton = React__default.default.forwardRef(function BaseButtonInner(props, ref) {
   const { href } = props;
   if (href) {
@@ -771,17 +766,19 @@ const BaseButton = React__default.default.forwardRef(function BaseButtonInner(pr
       style: COMMON_STYLES,
       ref
     });
-    return /* @__PURE__ */ React__default.default.createElement(reactAriaComponents.Button, __spreadValues$r({}, buttonProps), ({ isHovered, isPressed, isFocused, isFocusVisible, isDisabled }) => withObservedValues$c(
-      children,
+    return /* @__PURE__ */ React__default.default.createElement(reactAriaComponents.Button, __spreadValues$r({}, buttonProps), ({ isHovered, isPressed, isFocused, isFocusVisible, isDisabled }) => /* @__PURE__ */ React__default.default.createElement(React__default.default.Fragment, null, /* @__PURE__ */ React__default.default.createElement(
+      VariantUpdater,
       {
-        hovered: isHovered,
-        pressed: isPressed,
-        focused: isFocused,
-        focusVisible: isFocusVisible,
-        disabled: isDisabled
-      },
-      plasmicUpdateVariant
-    ));
+        changes: {
+          hovered: isHovered,
+          pressed: isPressed,
+          focused: isFocused,
+          focusVisible: isFocusVisible,
+          disabled: isDisabled
+        },
+        updateVariant: plasmicUpdateVariant
+      }
+    ), children));
   }
 });
 function LinkButton({
@@ -803,24 +800,27 @@ function LinkButton({
   });
   return /* @__PURE__ */ React__default.default.createElement(
     PlasmicLink,
-    __spreadProps$m(__spreadValues$r({}, combinedLinkProps), {
+    __spreadProps$n(__spreadValues$r({}, combinedLinkProps), {
       "data-focused": isFocused || void 0,
       "data-hovered": isHovered || void 0,
       "data-pressed": isPressed || void 0,
       "data-focus-visible": isFocusVisible || void 0,
       "data-disabled": props.isDisabled || void 0
     }),
-    withObservedValues$c(
-      children,
+    /* @__PURE__ */ React__default.default.createElement(
+      VariantUpdater,
       {
-        hovered: isHovered,
-        pressed: isPressed,
-        focused: isFocused,
-        focusVisible: isFocusVisible,
-        disabled: !!rest.isDisabled
-      },
-      plasmicUpdateVariant
-    )
+        changes: {
+          hovered: isHovered,
+          pressed: isPressed,
+          focused: isFocused,
+          focusVisible: isFocusVisible,
+          disabled: !!rest.isDisabled
+        },
+        updateVariant: plasmicUpdateVariant
+      }
+    ),
+    children
   );
 }
 const BUTTON_COMPONENT_NAME = makeComponentName("button");
@@ -833,7 +833,7 @@ function registerButton(loader, overrides) {
       displayName: "Aria Button",
       importPath: "@plasmicpkgs/react-aria/skinny/registerButton",
       importName: "BaseButton",
-      variants: variants$f,
+      variants: variants$e,
       defaultStyles: {
         // Ensure consistent design across rendered elements (button, anchor tag).
         backgroundColor: "#EFEFEF",
@@ -903,17 +903,6 @@ function registerButton(loader, overrides) {
   );
 }
 
-const PlasmicTextFieldContext = React__default.default.createContext(void 0);
-const PlasmicCheckboxGroupContext = React__default.default.createContext(void 0);
-const PlasmicRadioGroupContext = React__default.default.createContext(void 0);
-const PlasmicDialogTriggerContext = React__default.default.createContext(void 0);
-const PlasmicSliderContext = React__default.default.createContext(void 0);
-React__default.default.createContext(void 0);
-const PlasmicPopoverTriggerContext = React__default.default.createContext(void 0);
-const PlasmicListBoxContext = React__default.default.createContext(void 0);
-React__default.default.createContext(void 0);
-const PlasmicInputContext = React__default.default.createContext(void 0);
-
 class OptionsItemIdManager {
   constructor() {
     this._ids = /* @__PURE__ */ new Set();
@@ -1015,9 +1004,20 @@ function useIdManager(callback, existing) {
   return idManager;
 }
 
+const PlasmicTextFieldContext = React__default.default.createContext(void 0);
+const PlasmicCheckboxGroupContext = React__default.default.createContext(void 0);
+const PlasmicRadioGroupContext = React__default.default.createContext(void 0);
+const PlasmicDialogTriggerContext = React__default.default.createContext(void 0);
+const PlasmicSliderContext = React__default.default.createContext(void 0);
+React__default.default.createContext(void 0);
+const PlasmicPopoverTriggerContext = React__default.default.createContext(void 0);
+const PlasmicListBoxContext = React__default.default.createContext(void 0);
+React__default.default.createContext(void 0);
+const PlasmicInputContext = React__default.default.createContext(void 0);
+
 var __defProp$q = Object.defineProperty;
-var __defProps$l = Object.defineProperties;
-var __getOwnPropDescs$l = Object.getOwnPropertyDescriptors;
+var __defProps$m = Object.defineProperties;
+var __getOwnPropDescs$m = Object.getOwnPropertyDescriptors;
 var __getOwnPropSymbols$q = Object.getOwnPropertySymbols;
 var __hasOwnProp$q = Object.prototype.hasOwnProperty;
 var __propIsEnum$q = Object.prototype.propertyIsEnumerable;
@@ -1033,7 +1033,7 @@ var __spreadValues$q = (a, b) => {
     }
   return a;
 };
-var __spreadProps$l = (a, b) => __defProps$l(a, __getOwnPropDescs$l(b));
+var __spreadProps$m = (a, b) => __defProps$m(a, __getOwnPropDescs$m(b));
 var __objRest$n = (source, exclude) => {
   var target = {};
   for (var prop in source)
@@ -1056,7 +1056,7 @@ const CHECKBOX_VARIANTS = [
   "selected",
   "readonly"
 ];
-const { variants: variants$e, withObservedValues: withObservedValues$b } = pickAriaComponentVariants(CHECKBOX_VARIANTS);
+const { variants: variants$d } = pickAriaComponentVariants(CHECKBOX_VARIANTS);
 function BaseCheckbox(props) {
   const _a = props, {
     children,
@@ -1080,7 +1080,7 @@ function BaseCheckbox(props) {
   });
   return /* @__PURE__ */ React__default.default.createElement(React__default.default.Fragment, null, /* @__PURE__ */ React__default.default.createElement(
     reactAriaComponents.Checkbox,
-    __spreadProps$l(__spreadValues$q({}, rest), {
+    __spreadProps$m(__spreadValues$q({}, rest), {
       value: registeredId,
       key: registeredId,
       style: COMMON_STYLES
@@ -1094,20 +1094,22 @@ function BaseCheckbox(props) {
       isIndeterminate,
       isSelected,
       isReadOnly
-    }) => withObservedValues$b(
-      children,
+    }) => /* @__PURE__ */ React__default.default.createElement(React__default.default.Fragment, null, /* @__PURE__ */ React__default.default.createElement(
+      VariantUpdater,
       {
-        hovered: isHovered,
-        pressed: isPressed,
-        focused: isFocused,
-        focusVisible: isFocusVisible,
-        disabled: isDisabled,
-        indeterminate: isIndeterminate,
-        selected: isSelected,
-        readonly: isReadOnly
-      },
-      plasmicUpdateVariant
-    )
+        changes: {
+          hovered: isHovered,
+          pressed: isPressed,
+          focused: isFocused,
+          focusVisible: isFocusVisible,
+          disabled: isDisabled,
+          indeterminate: isIndeterminate,
+          selected: isSelected,
+          readonly: isReadOnly
+        },
+        updateVariant: plasmicUpdateVariant
+      }
+    ), children)
   ));
 }
 const makeDefaultCheckboxChildren = ({
@@ -1166,7 +1168,7 @@ function registerCheckbox(loader, overrides) {
       displayName: "Aria Checkbox",
       importPath: "@plasmicpkgs/react-aria/skinny/registerCheckbox",
       importName: "BaseCheckbox",
-      variants: variants$e,
+      variants: variants$d,
       props: {
         id: createIdProp("Checkbox"),
         name: createNameProp(),
@@ -1243,8 +1245,8 @@ function registerCheckbox(loader, overrides) {
 }
 
 var __defProp$p = Object.defineProperty;
-var __defProps$k = Object.defineProperties;
-var __getOwnPropDescs$k = Object.getOwnPropertyDescriptors;
+var __defProps$l = Object.defineProperties;
+var __getOwnPropDescs$l = Object.getOwnPropertyDescriptors;
 var __getOwnPropSymbols$p = Object.getOwnPropertySymbols;
 var __hasOwnProp$p = Object.prototype.hasOwnProperty;
 var __propIsEnum$p = Object.prototype.propertyIsEnumerable;
@@ -1260,7 +1262,7 @@ var __spreadValues$p = (a, b) => {
     }
   return a;
 };
-var __spreadProps$k = (a, b) => __defProps$k(a, __getOwnPropDescs$k(b));
+var __spreadProps$l = (a, b) => __defProps$l(a, __getOwnPropDescs$l(b));
 var __objRest$m = (source, exclude) => {
   var target = {};
   for (var prop in source)
@@ -1278,7 +1280,7 @@ function BaseText(_a) {
   const dataProps = extractPlasmicDataProps(rest);
   return /* @__PURE__ */ React__default.default.createElement(
     reactAriaComponents.Text,
-    __spreadProps$k(__spreadValues$p(__spreadValues$p({}, rest), dataProps), {
+    __spreadProps$l(__spreadValues$p(__spreadValues$p({}, rest), dataProps), {
       slot,
       className,
       style: COMMON_STYLES
@@ -1320,8 +1322,8 @@ function registerText(loader, overrides) {
 }
 
 var __defProp$o = Object.defineProperty;
-var __defProps$j = Object.defineProperties;
-var __getOwnPropDescs$j = Object.getOwnPropertyDescriptors;
+var __defProps$k = Object.defineProperties;
+var __getOwnPropDescs$k = Object.getOwnPropertyDescriptors;
 var __getOwnPropSymbols$o = Object.getOwnPropertySymbols;
 var __hasOwnProp$o = Object.prototype.hasOwnProperty;
 var __propIsEnum$o = Object.prototype.propertyIsEnumerable;
@@ -1337,10 +1339,10 @@ var __spreadValues$o = (a, b) => {
     }
   return a;
 };
-var __spreadProps$j = (a, b) => __defProps$j(a, __getOwnPropDescs$j(b));
+var __spreadProps$k = (a, b) => __defProps$k(a, __getOwnPropDescs$k(b));
 const DESCRIPTION_COMPONENT_NAME = makeComponentName("description");
 function registerDescription(loader, overrides) {
-  return registerText(loader, __spreadProps$j(__spreadValues$o({}, overrides), {
+  return registerText(loader, __spreadProps$k(__spreadValues$o({}, overrides), {
     name: DESCRIPTION_COMPONENT_NAME,
     displayName: "Aria Description",
     props: {
@@ -1354,8 +1356,8 @@ function registerDescription(loader, overrides) {
 }
 
 var __defProp$n = Object.defineProperty;
-var __defProps$i = Object.defineProperties;
-var __getOwnPropDescs$i = Object.getOwnPropertyDescriptors;
+var __defProps$j = Object.defineProperties;
+var __getOwnPropDescs$j = Object.getOwnPropertyDescriptors;
 var __getOwnPropSymbols$n = Object.getOwnPropertySymbols;
 var __hasOwnProp$n = Object.prototype.hasOwnProperty;
 var __propIsEnum$n = Object.prototype.propertyIsEnumerable;
@@ -1371,7 +1373,7 @@ var __spreadValues$n = (a, b) => {
     }
   return a;
 };
-var __spreadProps$i = (a, b) => __defProps$i(a, __getOwnPropDescs$i(b));
+var __spreadProps$j = (a, b) => __defProps$j(a, __getOwnPropDescs$j(b));
 var __objRest$l = (source, exclude) => {
   var target = {};
   for (var prop in source)
@@ -1389,7 +1391,7 @@ function BaseLabel(_a) {
   const dataProps = extractPlasmicDataProps(rest);
   return /* @__PURE__ */ React__default.default.createElement(
     reactAriaComponents.Label,
-    __spreadProps$i(__spreadValues$n({}, dataProps), {
+    __spreadProps$j(__spreadValues$n({}, dataProps), {
       id,
       className,
       style: COMMON_STYLES,
@@ -1430,8 +1432,8 @@ function registerLabel(loader, overrides) {
 }
 
 var __defProp$m = Object.defineProperty;
-var __defProps$h = Object.defineProperties;
-var __getOwnPropDescs$h = Object.getOwnPropertyDescriptors;
+var __defProps$i = Object.defineProperties;
+var __getOwnPropDescs$i = Object.getOwnPropertyDescriptors;
 var __getOwnPropSymbols$m = Object.getOwnPropertySymbols;
 var __hasOwnProp$m = Object.prototype.hasOwnProperty;
 var __propIsEnum$m = Object.prototype.propertyIsEnumerable;
@@ -1447,7 +1449,7 @@ var __spreadValues$m = (a, b) => {
     }
   return a;
 };
-var __spreadProps$h = (a, b) => __defProps$h(a, __getOwnPropDescs$h(b));
+var __spreadProps$i = (a, b) => __defProps$i(a, __getOwnPropDescs$i(b));
 var __objRest$k = (source, exclude) => {
   var target = {};
   for (var prop in source)
@@ -1461,9 +1463,7 @@ var __objRest$k = (source, exclude) => {
   return target;
 };
 const CHECKBOX_GROUP_VARIANTS = ["disabled", "readonly"];
-const { variants: variants$d, withObservedValues: withObservedValues$a } = pickAriaComponentVariants(
-  CHECKBOX_GROUP_VARIANTS
-);
+const { variants: variants$c } = pickAriaComponentVariants(CHECKBOX_GROUP_VARIANTS);
 function BaseCheckboxGroup(props) {
   const _a = props, { children, plasmicUpdateVariant, setControlContextData } = _a, rest = __objRest$k(_a, ["children", "plasmicUpdateVariant", "setControlContextData"]);
   const updateIds = React.useCallback(
@@ -1477,14 +1477,16 @@ function BaseCheckboxGroup(props) {
   const idManager = useIdManager(updateIds);
   return (
     // PlasmicCheckboxGroupContext is used by BaseCheckbox
-    /* @__PURE__ */ React__default.default.createElement(PlasmicCheckboxGroupContext.Provider, { value: __spreadProps$h(__spreadValues$m({}, rest), { idManager }) }, /* @__PURE__ */ React__default.default.createElement(reactAriaComponents.CheckboxGroup, __spreadProps$h(__spreadValues$m({}, rest), { style: COMMON_STYLES }), ({ isDisabled, isReadOnly }) => withObservedValues$a(
-      children,
+    /* @__PURE__ */ React__default.default.createElement(PlasmicCheckboxGroupContext.Provider, { value: __spreadProps$i(__spreadValues$m({}, rest), { idManager }) }, /* @__PURE__ */ React__default.default.createElement(reactAriaComponents.CheckboxGroup, __spreadProps$i(__spreadValues$m({}, rest), { style: COMMON_STYLES }), ({ isDisabled, isReadOnly }) => /* @__PURE__ */ React__default.default.createElement(React__default.default.Fragment, null, /* @__PURE__ */ React__default.default.createElement(
+      VariantUpdater,
       {
-        disabled: isDisabled,
-        readonly: isReadOnly
-      },
-      plasmicUpdateVariant
-    )))
+        changes: {
+          disabled: isDisabled,
+          readonly: isReadOnly
+        },
+        updateVariant: plasmicUpdateVariant
+      }
+    ), children)))
   );
 }
 const componentName = makeComponentName("checkboxGroup");
@@ -1497,7 +1499,7 @@ function registerCheckboxGroup(loader, overrides) {
       displayName: "Aria Checkbox Group",
       importPath: "@plasmicpkgs/react-aria/skinny/registerCheckboxGroup",
       importName: "BaseCheckboxGroup",
-      variants: variants$d,
+      variants: variants$c,
       props: {
         id: createIdProp("Checkbox Group"),
         name: createNameProp(),
@@ -1614,8 +1616,8 @@ function registerCheckboxGroup(loader, overrides) {
 }
 
 var __defProp$l = Object.defineProperty;
-var __defProps$g = Object.defineProperties;
-var __getOwnPropDescs$g = Object.getOwnPropertyDescriptors;
+var __defProps$h = Object.defineProperties;
+var __getOwnPropDescs$h = Object.getOwnPropertyDescriptors;
 var __getOwnPropSymbols$l = Object.getOwnPropertySymbols;
 var __hasOwnProp$l = Object.prototype.hasOwnProperty;
 var __propIsEnum$l = Object.prototype.propertyIsEnumerable;
@@ -1631,7 +1633,7 @@ var __spreadValues$l = (a, b) => {
     }
   return a;
 };
-var __spreadProps$g = (a, b) => __defProps$g(a, __getOwnPropDescs$g(b));
+var __spreadProps$h = (a, b) => __defProps$h(a, __getOwnPropDescs$h(b));
 var __objRest$j = (source, exclude) => {
   var target = {};
   for (var prop in source)
@@ -1650,7 +1652,7 @@ const INPUT_VARIANTS = [
   "hovered",
   "disabled"
 ];
-const { variants: variants$c } = pickAriaComponentVariants(INPUT_VARIANTS);
+const { variants: variants$b } = pickAriaComponentVariants(INPUT_VARIANTS);
 const inputHelpers$1 = {
   states: {
     value: {
@@ -1714,7 +1716,7 @@ function BaseInput_(props, ref) {
   }, [isFocused, isFocusVisible, isHovered, isDisabled, plasmicUpdateVariant]);
   return /* @__PURE__ */ React__default.default.createElement(
     "input",
-    __spreadProps$g(__spreadValues$l({}, mergedProps), {
+    __spreadProps$h(__spreadValues$l({}, mergedProps), {
       ref: inputRef,
       "data-focused": isFocused || void 0,
       "data-disabled": isDisabled || void 0,
@@ -1735,7 +1737,7 @@ function registerInput(loader, overrides) {
       displayName: "Aria Input",
       importPath: "@plasmicpkgs/react-aria/skinny/registerInput",
       importName: "BaseInput",
-      variants: variants$c,
+      variants: variants$b,
       defaultStyles: {
         width: "300px",
         borderWidth: "1px",
@@ -1782,8 +1784,8 @@ function registerInput(loader, overrides) {
 }
 
 var __defProp$k = Object.defineProperty;
-var __defProps$f = Object.defineProperties;
-var __getOwnPropDescs$f = Object.getOwnPropertyDescriptors;
+var __defProps$g = Object.defineProperties;
+var __getOwnPropDescs$g = Object.getOwnPropertyDescriptors;
 var __getOwnPropSymbols$k = Object.getOwnPropertySymbols;
 var __hasOwnProp$k = Object.prototype.hasOwnProperty;
 var __propIsEnum$k = Object.prototype.propertyIsEnumerable;
@@ -1799,7 +1801,7 @@ var __spreadValues$k = (a, b) => {
     }
   return a;
 };
-var __spreadProps$f = (a, b) => __defProps$f(a, __getOwnPropDescs$f(b));
+var __spreadProps$g = (a, b) => __defProps$g(a, __getOwnPropDescs$g(b));
 var __objRest$i = (source, exclude) => {
   var target = {};
   for (var prop in source)
@@ -1820,20 +1822,21 @@ const LIST_BOX_ITEM_VARIANTS = [
   "selected",
   "disabled"
 ];
-const { variants: variants$b, withObservedValues: withObservedValues$9 } = pickAriaComponentVariants(
-  LIST_BOX_ITEM_VARIANTS
-);
+const { variants: variants$a } = pickAriaComponentVariants(LIST_BOX_ITEM_VARIANTS);
 function BaseListBoxItem(props) {
   const _a = props, { children, setControlContextData, plasmicUpdateVariant, id } = _a, rest = __objRest$i(_a, ["children", "setControlContextData", "plasmicUpdateVariant", "id"]);
   const listboxContext = React__default.default.useContext(PlasmicListBoxContext);
   const isStandalone = !listboxContext;
-  const { registeredId, idError } = useOptionsItemId(id, listboxContext == null ? void 0 : listboxContext.idManager);
+  const { registeredId, idError } = useOptionsItemId(
+    id,
+    listboxContext == null ? void 0 : listboxContext.idManager
+  );
   setControlContextData == null ? void 0 : setControlContextData({
     idError
   });
   const listboxItem = /* @__PURE__ */ React__default.default.createElement(
     reactAriaComponents.ListBoxItem,
-    __spreadProps$f(__spreadValues$k({
+    __spreadProps$g(__spreadValues$k({
       key: registeredId,
       id: registeredId
     }, rest), {
@@ -1846,18 +1849,20 @@ function BaseListBoxItem(props) {
       isFocusVisible,
       isSelected,
       isDisabled
-    }) => withObservedValues$9(
-      children,
+    }) => /* @__PURE__ */ React__default.default.createElement(React__default.default.Fragment, null, /* @__PURE__ */ React__default.default.createElement(
+      VariantUpdater,
       {
-        hovered: isHovered,
-        pressed: isPressed,
-        focused: isFocused,
-        focusVisible: isFocusVisible,
-        selected: isSelected,
-        disabled: isDisabled
-      },
-      plasmicUpdateVariant
-    )
+        changes: {
+          hovered: isHovered,
+          pressed: isPressed,
+          focused: isFocused,
+          focusVisible: isFocusVisible,
+          selected: isSelected,
+          disabled: isDisabled
+        },
+        updateVariant: plasmicUpdateVariant
+      }
+    ), children)
   );
   if (isStandalone) {
     return /* @__PURE__ */ React__default.default.createElement(reactAriaComponents.ListBox, { selectionMode: "single" }, listboxItem);
@@ -1910,7 +1915,7 @@ function registerListBoxItem(loader, overrides) {
       displayName: "Aria ListBoxItem",
       importPath: "@plasmicpkgs/react-aria/skinny/registerListBoxItem",
       importName: "BaseListBoxItem",
-      variants: variants$b,
+      variants: variants$a,
       props: {
         id: {
           type: "string",
@@ -1942,8 +1947,8 @@ function registerListBoxItem(loader, overrides) {
 }
 
 var __defProp$j = Object.defineProperty;
-var __defProps$e = Object.defineProperties;
-var __getOwnPropDescs$e = Object.getOwnPropertyDescriptors;
+var __defProps$f = Object.defineProperties;
+var __getOwnPropDescs$f = Object.getOwnPropertyDescriptors;
 var __getOwnPropSymbols$j = Object.getOwnPropertySymbols;
 var __hasOwnProp$j = Object.prototype.hasOwnProperty;
 var __propIsEnum$j = Object.prototype.propertyIsEnumerable;
@@ -1959,7 +1964,7 @@ var __spreadValues$j = (a, b) => {
     }
   return a;
 };
-var __spreadProps$e = (a, b) => __defProps$e(a, __getOwnPropDescs$e(b));
+var __spreadProps$f = (a, b) => __defProps$f(a, __getOwnPropDescs$f(b));
 var __objRest$h = (source, exclude) => {
   var target = {};
   for (var prop in source)
@@ -1976,7 +1981,7 @@ function BaseSection(props) {
   const _a = props, { header, items } = _a, rest = __objRest$h(_a, ["header", "items"]);
   const contextProps = React__default.default.useContext(PlasmicListBoxContext);
   const isStandalone = !contextProps;
-  const section = /* @__PURE__ */ React__default.default.createElement(reactAriaComponents.Section, __spreadProps$e(__spreadValues$j({}, rest), { style: COMMON_STYLES }), /* @__PURE__ */ React__default.default.createElement(reactAriaComponents.Header, null, header), items);
+  const section = /* @__PURE__ */ React__default.default.createElement(reactAriaComponents.ListBoxSection, __spreadProps$f(__spreadValues$j({}, rest), { style: COMMON_STYLES }), /* @__PURE__ */ React__default.default.createElement(reactAriaComponents.Header, null, header), items);
   if (isStandalone) {
     return (
       // BaseListbox should give section a listbox context (that it can't be used without)
@@ -2024,6 +2029,8 @@ function registerSection(loader, overrides) {
 }
 
 var __defProp$i = Object.defineProperty;
+var __defProps$e = Object.defineProperties;
+var __getOwnPropDescs$e = Object.getOwnPropertyDescriptors;
 var __getOwnPropSymbols$i = Object.getOwnPropertySymbols;
 var __hasOwnProp$i = Object.prototype.hasOwnProperty;
 var __propIsEnum$i = Object.prototype.propertyIsEnumerable;
@@ -2039,6 +2046,7 @@ var __spreadValues$i = (a, b) => {
     }
   return a;
 };
+var __spreadProps$e = (a, b) => __defProps$e(a, __getOwnPropDescs$e(b));
 var __objRest$g = (source, exclude) => {
   var target = {};
   for (var prop in source)
@@ -2051,8 +2059,8 @@ var __objRest$g = (source, exclude) => {
     }
   return target;
 };
-const LISTBOX_VARIANTS = ["focused", "focusVisible"];
-const { variants: variants$a } = pickAriaComponentVariants(LISTBOX_VARIANTS);
+const LISTBOX_VARIANTS = ["focused"];
+const { variants: LISTBOX_VARIANTS_DATA } = pickAriaComponentVariants(LISTBOX_VARIANTS);
 const listboxHelpers = {
   states: {
     selectedValue: {
@@ -2069,14 +2077,12 @@ function BaseListBox(props) {
   const _a = props, {
     setControlContextData,
     children,
-    className,
     selectedKeys,
     defaultSelectedKeys,
     plasmicUpdateVariant
   } = _a, rest = __objRest$g(_a, [
     "setControlContextData",
     "children",
-    "className",
     "selectedKeys",
     "defaultSelectedKeys",
     "plasmicUpdateVariant"
@@ -2086,32 +2092,22 @@ function BaseListBox(props) {
   const [ids, setIds] = React.useState([]);
   const inEditor = host.usePlasmicCanvasContext();
   const idManager = useIdManager(setIds, context == null ? void 0 : context.idManager);
+  const mergedProps = reactAria.mergeProps(rest, __spreadProps$e(__spreadValues$i({
+    onFocusChange: (focused) => {
+      plasmicUpdateVariant == null ? void 0 : plasmicUpdateVariant({ focused });
+    }
+  }, inEditor ? { shouldUseVirtualFocus: true } : {}), {
+    style: COMMON_STYLES,
+    selectedKeys: normalizeSelectedKeys(selectedKeys),
+    defaultSelectedKeys: normalizeSelectedKeys(defaultSelectedKeys)
+  }));
   React.useEffect(() => {
     setControlContextData == null ? void 0 : setControlContextData({
       itemIds: ids,
       isStandalone
     });
   }, [ids, isStandalone, setControlContextData]);
-  const classNameProp = React.useCallback(
-    ({ isFocusVisible, isFocused }) => {
-      plasmicUpdateVariant == null ? void 0 : plasmicUpdateVariant({
-        focused: isFocused,
-        focusVisible: isFocusVisible
-      });
-      return className != null ? className : "";
-    },
-    [className, plasmicUpdateVariant]
-  );
-  const listbox = /* @__PURE__ */ React__default.default.createElement(
-    reactAriaComponents.ListBox,
-    __spreadValues$i(__spreadValues$i({
-      selectedKeys: normalizeSelectedKeys(selectedKeys),
-      defaultSelectedKeys: normalizeSelectedKeys(defaultSelectedKeys),
-      className: classNameProp,
-      style: COMMON_STYLES
-    }, inEditor ? { shouldUseVirtualFocus: true } : {}), rest),
-    children
-  );
+  const listbox = /* @__PURE__ */ React__default.default.createElement(reactAriaComponents.ListBox, __spreadValues$i({}, mergedProps), children);
   if (isStandalone) {
     return /* @__PURE__ */ React__default.default.createElement(
       PlasmicListBoxContext.Provider,
@@ -2190,7 +2186,7 @@ function registerListBox(loader, overrides) {
       displayName: "Aria ListBox",
       importPath: "@plasmicpkgs/react-aria/skinny/registerListBox",
       importName: "BaseListBox",
-      variants: variants$a,
+      variants: LISTBOX_VARIANTS_DATA,
       defaultStyles: {
         width: "250px",
         borderWidth: "1px",
@@ -2493,7 +2489,6 @@ function BaseComboBox(props) {
     plasmicUpdateVariant,
     __plasmic_selection_prop__,
     plasmicNotifyAutoOpenedContent,
-    className,
     isOpen: _isOpen
   } = _a, rest = __objRest$e(_a, [
     "children",
@@ -2501,18 +2496,8 @@ function BaseComboBox(props) {
     "plasmicUpdateVariant",
     "__plasmic_selection_prop__",
     "plasmicNotifyAutoOpenedContent",
-    "className",
     "isOpen"
   ]);
-  const classNameProp = React.useCallback(
-    ({ isDisabled }) => {
-      plasmicUpdateVariant == null ? void 0 : plasmicUpdateVariant({
-        disabled: isDisabled
-      });
-      return className != null ? className : "";
-    },
-    [className, plasmicUpdateVariant]
-  );
   const updateIds = React.useCallback(
     (ids) => {
       setControlContextData == null ? void 0 : setControlContextData({
@@ -2522,7 +2507,13 @@ function BaseComboBox(props) {
     [setControlContextData]
   );
   const idManager = useIdManager(updateIds);
-  return /* @__PURE__ */ React__default.default.createElement(reactAriaComponents.ComboBox, __spreadProps$d(__spreadValues$g({ className: classNameProp }, rest), { style: COMMON_STYLES }), /* @__PURE__ */ React__default.default.createElement(PlasmicPopoverTriggerContext.Provider, { value: true }, /* @__PURE__ */ React__default.default.createElement(
+  return /* @__PURE__ */ React__default.default.createElement(reactAriaComponents.ComboBox, __spreadProps$d(__spreadValues$g({}, rest), { style: COMMON_STYLES }), ({ isDisabled }) => /* @__PURE__ */ React__default.default.createElement(React__default.default.Fragment, null, /* @__PURE__ */ React__default.default.createElement(
+    VariantUpdater,
+    {
+      changes: { disabled: isDisabled },
+      updateVariant: plasmicUpdateVariant
+    }
+  ), /* @__PURE__ */ React__default.default.createElement(PlasmicPopoverTriggerContext.Provider, { value: true }, /* @__PURE__ */ React__default.default.createElement(
     PlasmicListBoxContext.Provider,
     {
       value: {
@@ -2536,7 +2527,7 @@ function BaseComboBox(props) {
         plasmicNotifyAutoOpenedContent
       }
     ), children)
-  )));
+  ))));
 }
 function registerComboBox(loader) {
   registerComponentHelper(loader, BaseComboBox, {
@@ -3177,9 +3168,7 @@ const OVERLAY_ARROW_VARIANTS = [
   "placementLeft",
   "placementRight"
 ];
-const { variants: variants$9, withObservedValues: withObservedValues$8 } = pickAriaComponentVariants(
-  OVERLAY_ARROW_VARIANTS
-);
+const { variants: variants$9 } = pickAriaComponentVariants(OVERLAY_ARROW_VARIANTS);
 function BaseOverlayArrow({
   children,
   plasmicUpdateVariant,
@@ -3196,15 +3185,17 @@ function BaseOverlayArrow({
       id,
       style: __spreadValues$b({ lineHeight: "0" }, COMMON_STYLES)
     },
-    ({ placement }) => withObservedValues$8(
-      children,
+    ({ placement }) => /* @__PURE__ */ React__default.default.createElement(React__default.default.Fragment, null, /* @__PURE__ */ React__default.default.createElement(
+      VariantUpdater,
       {
-        placementTop: placement === "top",
-        placementLeft: placement === "left",
-        placementRight: placement === "right"
-      },
-      plasmicUpdateVariant
-    )
+        changes: {
+          placementTop: placement === "top",
+          placementLeft: placement === "left",
+          placementRight: placement === "right"
+        },
+        updateVariant: plasmicUpdateVariant
+      }
+    ), children)
   );
   if (isStandalone) {
     return /* @__PURE__ */ React__default.default.createElement("div", { style: { position: "relative" } }, overlayArrow);
@@ -3276,7 +3267,7 @@ const RADIO_VARIANTS = [
   "readonly",
   "selected"
 ];
-const { variants: variants$8, withObservedValues: withObservedValues$7 } = pickAriaComponentVariants(RADIO_VARIANTS);
+const { variants: variants$8 } = pickAriaComponentVariants(RADIO_VARIANTS);
 function BaseRadio(props) {
   const _a = props, {
     children,
@@ -3314,19 +3305,21 @@ function BaseRadio(props) {
       isSelected,
       isDisabled,
       isReadOnly
-    }) => withObservedValues$7(
-      children,
+    }) => /* @__PURE__ */ React__default.default.createElement(React__default.default.Fragment, null, /* @__PURE__ */ React__default.default.createElement(
+      VariantUpdater,
       {
-        hovered: isHovered,
-        pressed: isPressed,
-        focused: isFocused,
-        focusVisible: isFocusVisible,
-        selected: isSelected,
-        disabled: isDisabled,
-        readonly: isReadOnly
-      },
-      plasmicUpdateVariant
-    )
+        changes: {
+          hovered: isHovered,
+          pressed: isPressed,
+          focused: isFocused,
+          focusVisible: isFocusVisible,
+          selected: isSelected,
+          disabled: isDisabled,
+          readonly: isReadOnly
+        },
+        updateVariant: plasmicUpdateVariant
+      }
+    ), children)
   );
   if (isStandalone) {
     return /* @__PURE__ */ React__default.default.createElement(reactAriaComponents.RadioGroup, null, radio);
@@ -3434,7 +3427,7 @@ var __objRest$8 = (source, exclude) => {
   return target;
 };
 const RADIO_GROUP_VARIANTS = ["disabled", "readonly"];
-const { variants: variants$7, withObservedValues: withObservedValues$6 } = pickAriaComponentVariants(RADIO_GROUP_VARIANTS);
+const { variants: variants$7 } = pickAriaComponentVariants(RADIO_GROUP_VARIANTS);
 function BaseRadioGroup(props) {
   const _a = props, { children, plasmicUpdateVariant, setControlContextData } = _a, rest = __objRest$8(_a, ["children", "plasmicUpdateVariant", "setControlContextData"]);
   const updateIds = React.useCallback(
@@ -3448,14 +3441,16 @@ function BaseRadioGroup(props) {
   const idManager = useIdManager(updateIds);
   return (
     // PlasmicRadioGroupContext is used by BaseRadio
-    /* @__PURE__ */ React__default.default.createElement(PlasmicRadioGroupContext.Provider, { value: __spreadProps$7(__spreadValues$9({}, props), { idManager }) }, /* @__PURE__ */ React__default.default.createElement(reactAriaComponents.RadioGroup, __spreadProps$7(__spreadValues$9({}, rest), { style: COMMON_STYLES }), ({ isDisabled, isReadOnly }) => withObservedValues$6(
-      children,
+    /* @__PURE__ */ React__default.default.createElement(PlasmicRadioGroupContext.Provider, { value: __spreadProps$7(__spreadValues$9({}, props), { idManager }) }, /* @__PURE__ */ React__default.default.createElement(reactAriaComponents.RadioGroup, __spreadProps$7(__spreadValues$9({}, rest), { style: COMMON_STYLES }), ({ isDisabled, isReadOnly }) => /* @__PURE__ */ React__default.default.createElement(React__default.default.Fragment, null, /* @__PURE__ */ React__default.default.createElement(
+      VariantUpdater,
       {
-        disabled: isDisabled,
-        readonly: isReadOnly
-      },
-      plasmicUpdateVariant
-    )))
+        changes: {
+          disabled: isDisabled,
+          readonly: isReadOnly
+        },
+        updateVariant: plasmicUpdateVariant
+      }
+    ), children)))
   );
 }
 const RADIO_GROUP_COMPONENT_NAME = makeComponentName("radioGroup");
@@ -3620,12 +3615,12 @@ function BaseSelect(props) {
     onSelectionChange,
     onOpenChange,
     isDisabled,
-    className,
     children,
     disabledKeys,
     name,
-    setControlContextData,
+    className,
     plasmicUpdateVariant,
+    setControlContextData,
     plasmicNotifyAutoOpenedContent,
     __plasmic_selection_prop__,
     defaultSelectedKey,
@@ -3640,21 +3635,6 @@ function BaseSelect(props) {
     [setControlContextData]
   );
   const idManager = useIdManager(updateIds);
-  const classNameProp = React.useCallback(
-    ({
-      isDisabled: isDisabled2,
-      isFocusVisible,
-      isFocused
-    }) => {
-      plasmicUpdateVariant == null ? void 0 : plasmicUpdateVariant({
-        disabled: isDisabled2,
-        focused: isFocused,
-        focusVisible: isFocusVisible
-      });
-      return className != null ? className : "";
-    },
-    [className, plasmicUpdateVariant]
-  );
   return /* @__PURE__ */ React__default.default.createElement(
     reactAriaComponents.Select,
     __spreadValues$8({
@@ -3663,21 +3643,30 @@ function BaseSelect(props) {
       onSelectionChange,
       onOpenChange,
       isDisabled,
-      className: classNameProp,
       style: COMMON_STYLES,
+      className,
       name,
       disabledKeys,
       "aria-label": ariaLabel,
       id: props.id
     }, extractPlasmicDataProps(props)),
-    /* @__PURE__ */ React__default.default.createElement(
+    ({ isFocused, isFocusVisible, isDisabled: isDisabled2 }) => /* @__PURE__ */ React__default.default.createElement(React__default.default.Fragment, null, /* @__PURE__ */ React__default.default.createElement(
+      VariantUpdater,
+      {
+        changes: {
+          focused: isFocused,
+          focusVisible: isFocusVisible,
+          disabled: isDisabled2
+        },
+        updateVariant: plasmicUpdateVariant
+      }
+    ), /* @__PURE__ */ React__default.default.createElement(
       SelectAutoOpen,
       {
         __plasmic_selection_prop__,
         plasmicNotifyAutoOpenedContent
       }
-    ),
-    /* @__PURE__ */ React__default.default.createElement(PlasmicPopoverTriggerContext.Provider, { value: true }, /* @__PURE__ */ React__default.default.createElement(
+    ), /* @__PURE__ */ React__default.default.createElement(PlasmicPopoverTriggerContext.Provider, { value: true }, /* @__PURE__ */ React__default.default.createElement(
       PlasmicListBoxContext.Provider,
       {
         value: {
@@ -3685,7 +3674,7 @@ function BaseSelect(props) {
         }
       },
       children
-    ))
+    )))
   );
 }
 function registerSelect(loader) {
@@ -3891,19 +3880,19 @@ var __objRest$7 = (source, exclude) => {
   return target;
 };
 const SLIDER_OUTPUT_VARIANTS = ["disabled"];
-const { variants: variants$6, withObservedValues: withObservedValues$5 } = pickAriaComponentVariants(
-  SLIDER_OUTPUT_VARIANTS
-);
+const { variants: variants$6 } = pickAriaComponentVariants(SLIDER_OUTPUT_VARIANTS);
 function BaseSliderOutput(props) {
   const _a = props, { plasmicUpdateVariant, children } = _a, rest = __objRest$7(_a, ["plasmicUpdateVariant", "children"]);
   const isStandalone = !React__default.default.useContext(PlasmicSliderContext);
-  const sliderOutput = /* @__PURE__ */ React__default.default.createElement(reactAriaComponents.SliderOutput, __spreadProps$6(__spreadValues$7({}, rest), { style: COMMON_STYLES }), ({ isDisabled }) => withObservedValues$5(
-    children,
+  const sliderOutput = /* @__PURE__ */ React__default.default.createElement(reactAriaComponents.SliderOutput, __spreadProps$6(__spreadValues$7({}, rest), { style: COMMON_STYLES }), ({ isDisabled }) => /* @__PURE__ */ React__default.default.createElement(React__default.default.Fragment, null, /* @__PURE__ */ React__default.default.createElement(
+    VariantUpdater,
     {
-      disabled: isDisabled
-    },
-    plasmicUpdateVariant
-  ));
+      changes: {
+        disabled: isDisabled
+      },
+      updateVariant: plasmicUpdateVariant
+    }
+  ), children));
   if (isStandalone) {
     return /* @__PURE__ */ React__default.default.createElement(reactAriaComponents.Slider, { style: { height: "100%", width: "100%" } }, sliderOutput);
   }
@@ -3971,9 +3960,7 @@ const SLIDER_THUMB_VARIANTS = [
   "focusVisible",
   "disabled"
 ];
-const { variants: variants$5, withObservedValues: withObservedValues$4 } = pickAriaComponentVariants(
-  SLIDER_THUMB_VARIANTS
-);
+const { variants: variants$5 } = pickAriaComponentVariants(SLIDER_THUMB_VARIANTS);
 function BaseSliderThumb(_a) {
   var _b = _a, {
     children,
@@ -3985,23 +3972,19 @@ function BaseSliderThumb(_a) {
     "plasmicUpdateVariant"
   ]);
   const isStandalone = !React__default.default.useContext(reactAriaComponents.SliderTrackContext);
-  const thumb = /* @__PURE__ */ React__default.default.createElement(
-    reactAriaComponents.SliderThumb,
-    __spreadProps$5(__spreadValues$6({}, rest), {
-      style: COMMON_STYLES
-    }),
-    ({ isDragging, isHovered, isFocused, isFocusVisible, isDisabled }) => withObservedValues$4(
-      /* @__PURE__ */ React__default.default.createElement(React__default.default.Fragment, null, advanced ? children : void 0),
-      {
+  const thumb = /* @__PURE__ */ React__default.default.createElement(reactAriaComponents.SliderThumb, __spreadProps$5(__spreadValues$6({}, rest), { style: COMMON_STYLES }), ({ isDragging, isHovered, isFocused, isFocusVisible, isDisabled }) => /* @__PURE__ */ React__default.default.createElement(React__default.default.Fragment, null, /* @__PURE__ */ React__default.default.createElement(
+    VariantUpdater,
+    {
+      changes: {
         dragging: isDragging,
         hovered: isHovered,
         focused: isFocused,
         focusVisible: isFocusVisible,
         disabled: isDisabled
       },
-      plasmicUpdateVariant
-    )
-  );
+      updateVariant: plasmicUpdateVariant
+    }
+  ), advanced ? children : void 0));
   if (isStandalone) {
     return /* @__PURE__ */ React__default.default.createElement(reactAriaComponents.Slider, { style: { height: "100%", width: "100%" } }, /* @__PURE__ */ React__default.default.createElement(reactAriaComponents.SliderTrack, null, thumb));
   }
@@ -4077,9 +4060,7 @@ var __objRest$5 = (source, exclude) => {
   return target;
 };
 const SLIDER_TRACK_VARIANTS = ["hovered"];
-const { variants: variants$4, withObservedValues: withObservedValues$3 } = pickAriaComponentVariants(
-  SLIDER_TRACK_VARIANTS
-);
+const { variants: variants$4 } = pickAriaComponentVariants(SLIDER_TRACK_VARIANTS);
 function isMultiValueGuard(value) {
   return Array.isArray(value) && value.length > 1;
 }
@@ -4121,25 +4102,27 @@ function BaseSliderTrack(props) {
       });
     });
   }, [children, value]);
-  const track = /* @__PURE__ */ React__default.default.createElement(reactAriaComponents.SliderTrack, __spreadValues$5({ style: { position: "relative" } }, rest), ({ state, isHovered }) => /* @__PURE__ */ React__default.default.createElement(React__default.default.Fragment, null, withObservedValues$3(
-    /* @__PURE__ */ React__default.default.createElement(React__default.default.Fragment, null, /* @__PURE__ */ React__default.default.createElement(
-      "div",
-      {
-        style: {
-          width: `${(!isMultiValue ? state.getThumbPercent(minIndex) : state.getThumbPercent(maxIndex) - state.getThumbPercent(minIndex)) * 100}%`,
-          height: "100%",
-          position: "absolute",
-          top: 0,
-          left: !isMultiValue ? 0 : state.getThumbPercent(minIndex) * 100 + "%"
-        }
+  const track = /* @__PURE__ */ React__default.default.createElement(reactAriaComponents.SliderTrack, __spreadValues$5({ style: { position: "relative" } }, rest), ({ state, isHovered }) => /* @__PURE__ */ React__default.default.createElement(React__default.default.Fragment, null, /* @__PURE__ */ React__default.default.createElement(
+    VariantUpdater,
+    {
+      changes: {
+        hovered: isHovered
       },
-      progressBar
-    ), thumbs),
+      updateVariant: plasmicUpdateVariant
+    }
+  ), /* @__PURE__ */ React__default.default.createElement(
+    "div",
     {
-      hovered: isHovered
+      style: {
+        width: `${(!isMultiValue ? state.getThumbPercent(minIndex) : state.getThumbPercent(maxIndex) - state.getThumbPercent(minIndex)) * 100}%`,
+        height: "100%",
+        position: "absolute",
+        top: 0,
+        left: !isMultiValue ? 0 : state.getThumbPercent(minIndex) * 100 + "%"
+      }
     },
-    plasmicUpdateVariant
-  )));
+    progressBar
+  ), thumbs));
   if (isStandalone) {
     return /* @__PURE__ */ React__default.default.createElement(reactAriaComponents.Slider, { style: __spreadValues$5({ height: "100%", width: "100%" }, COMMON_STYLES) }, track);
   }
@@ -4251,7 +4234,7 @@ var __objRest$4 = (source, exclude) => {
 const SLIDER_COMPONENT_NAME = makeComponentName("slider");
 const RANGE_SLIDER_COMPONENT_NAME = makeComponentName("range-slider");
 const SLIDER_VARIANTS = ["disabled"];
-const { variants: variants$3, withObservedValues: withObservedValues$2 } = pickAriaComponentVariants(SLIDER_VARIANTS);
+const { variants: variants$3 } = pickAriaComponentVariants(SLIDER_VARIANTS);
 function BaseSlider(props) {
   const _a = props, { children, plasmicUpdateVariant } = _a, rest = __objRest$4(_a, ["children", "plasmicUpdateVariant"]);
   return (
@@ -4265,13 +4248,15 @@ function BaseSlider(props) {
           onChangeEnd: rest.onChangeEnd
         })
       },
-      /* @__PURE__ */ React__default.default.createElement(reactAriaComponents.Slider, __spreadProps$4(__spreadValues$4({}, rest), { style: COMMON_STYLES }), ({ isDisabled }) => withObservedValues$2(
-        children,
+      /* @__PURE__ */ React__default.default.createElement(reactAriaComponents.Slider, __spreadProps$4(__spreadValues$4({}, rest), { style: COMMON_STYLES }), ({ isDisabled }) => /* @__PURE__ */ React__default.default.createElement(React__default.default.Fragment, null, /* @__PURE__ */ React__default.default.createElement(
+        VariantUpdater,
         {
-          disabled: isDisabled
-        },
-        plasmicUpdateVariant
-      ))
+          changes: {
+            disabled: isDisabled
+          },
+          updateVariant: plasmicUpdateVariant
+        }
+      ), children))
     )
   );
 }
@@ -4551,7 +4536,7 @@ const SWITCH_VARIANTS = [
   "disabled",
   "readonly"
 ];
-const { variants: variants$2, withObservedValues: withObservedValues$1 } = pickAriaComponentVariants(SWITCH_VARIANTS);
+const { variants: variants$2 } = pickAriaComponentVariants(SWITCH_VARIANTS);
 function BaseSwitch(props) {
   const _a = props, { children, plasmicUpdateVariant } = _a, rest = __objRest$3(_a, ["children", "plasmicUpdateVariant"]);
   return /* @__PURE__ */ React__default.default.createElement(reactAriaComponents.Switch, __spreadProps$3(__spreadValues$3({}, rest), { style: COMMON_STYLES }), ({
@@ -4562,19 +4547,21 @@ function BaseSwitch(props) {
     isSelected,
     isDisabled,
     isReadOnly
-  }) => withObservedValues$1(
-    children,
+  }) => /* @__PURE__ */ React__default.default.createElement(React__default.default.Fragment, null, /* @__PURE__ */ React__default.default.createElement(
+    VariantUpdater,
     {
-      hovered: isHovered,
-      pressed: isPressed,
-      focused: isFocused,
-      focusVisible: isFocusVisible,
-      selected: isSelected,
-      disabled: isDisabled,
-      readonly: isReadOnly
-    },
-    plasmicUpdateVariant
-  ));
+      changes: {
+        hovered: isHovered,
+        pressed: isPressed,
+        focused: isFocused,
+        focusVisible: isFocusVisible,
+        selected: isSelected,
+        disabled: isDisabled,
+        readonly: isReadOnly
+      },
+      updateVariant: plasmicUpdateVariant
+    }
+  ), children));
 }
 function registerSwitch(loader, overrides) {
   registerComponentHelper(
@@ -4920,7 +4907,7 @@ var __objRest$1 = (source, exclude) => {
   return target;
 };
 const TEXT_FIELD_VARIANTS = ["disabled", "readonly"];
-const { variants, withObservedValues } = pickAriaComponentVariants(TEXT_FIELD_VARIANTS);
+const { variants } = pickAriaComponentVariants(TEXT_FIELD_VARIANTS);
 function BaseTextField(props) {
   const _a = props, { children, plasmicUpdateVariant, autoComplete } = _a, rest = __objRest$1(_a, ["children", "plasmicUpdateVariant", "autoComplete"]);
   const contextValue = React__default.default.useMemo(() => {
@@ -4940,14 +4927,16 @@ function BaseTextField(props) {
       }, rest), {
         style: COMMON_STYLES
       }),
-      ({ isDisabled, isReadOnly }) => withObservedValues(
-        children,
+      ({ isDisabled, isReadOnly }) => /* @__PURE__ */ React__default.default.createElement(React__default.default.Fragment, null, /* @__PURE__ */ React__default.default.createElement(
+        VariantUpdater,
         {
-          disabled: isDisabled,
-          readonly: isReadOnly
-        },
-        plasmicUpdateVariant
-      )
+          changes: {
+            disabled: isDisabled,
+            readonly: isReadOnly
+          },
+          updateVariant: plasmicUpdateVariant
+        }
+      ), children)
     ))
   );
 }