@plasmicpkgs/react-aria 0.0.153 → 0.0.155

package/dist/react-aria.esm.js

@@ -1,15 +1,15 @@
 import { usePlasmicCanvasContext, usePlasmicCanvasComponentInfo, usePlasmicLink } from '@plasmicapp/host';
 import React, { useEffect, useMemo, useState, useCallback, forwardRef, useImperativeHandle, useContext, useRef } from 'react';
 import { mergeProps, useLink, useHover, useFocusRing, useButton, useFocusWithin, useId } from 'react-aria';
-import { Button, Checkbox, Text, Label, CheckboxGroup, useContextProps, InputContext, ListBoxItem, ListBox, Section, Header, PopoverContext, Popover, ComboBox, ComboBoxStateContext, Dialog, ModalOverlay, Modal, DialogTrigger, Heading, TooltipTriggerStateContext, OverlayArrow, Radio, RadioGroup, Select, SelectStateContext, SelectValue, SliderOutput, Slider, SliderTrackContext, SliderThumb, SliderTrack, Switch, TextAreaContext, TextField, Provider, Tooltip } from 'react-aria-components';
+import { Button, Checkbox, Text, Label, CheckboxGroup, useContextProps, InputContext, ListBoxItem, ListBox, ListBoxSection, Header, PopoverContext, Popover, ComboBox, ComboBoxStateContext, Dialog, ModalOverlay, Modal, DialogTrigger, Heading, TooltipTriggerStateContext, OverlayArrow, Radio, RadioGroup, Select, SelectStateContext, SelectValue, SliderOutput, Slider, SliderTrackContext, SliderThumb, SliderTrack, Switch, TextAreaContext, TextField, Provider, Tooltip } from 'react-aria-components';
 import registerComponent from '@plasmicapp/host/registerComponent';
 import { mergeProps as mergeProps$1 } from '@react-aria/utils';
 import flattenChildren from 'react-keyed-flatten-children';
 import { useTooltipTriggerState } from 'react-stately';
 
 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;
@@ -25,7 +25,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)
@@ -88,7 +88,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) {
@@ -682,8 +682,7 @@ const ARIA_COMPONENTS_VARIANTS = {
     displayName: "Placement (Bottom)"
   }
 };
-function ChangesObserver({
-  children,
+function VariantUpdater({
   changes,
   updateVariant
 }) {
@@ -692,23 +691,19 @@ function ChangesObserver({
       updateVariant(changes);
     }
   }, [changes, updateVariant]);
-  return children;
-}
-function realWithObservedValues(children, changes, updateVariant) {
-  return /* @__PURE__ */ React.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;
@@ -724,7 +719,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)
@@ -744,7 +739,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.forwardRef(function BaseButtonInner(props, ref) {
   const { href } = props;
   if (href) {
@@ -763,17 +758,19 @@ const BaseButton = React.forwardRef(function BaseButtonInner(props, ref) {
       style: COMMON_STYLES,
       ref
     });
-    return /* @__PURE__ */ React.createElement(Button, __spreadValues$r({}, buttonProps), ({ isHovered, isPressed, isFocused, isFocusVisible, isDisabled }) => withObservedValues$c(
-      children,
+    return /* @__PURE__ */ React.createElement(Button, __spreadValues$r({}, buttonProps), ({ isHovered, isPressed, isFocused, isFocusVisible, isDisabled }) => /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.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({
@@ -795,24 +792,27 @@ function LinkButton({
   });
   return /* @__PURE__ */ React.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.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");
@@ -825,7 +825,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",
@@ -895,17 +895,6 @@ function registerButton(loader, overrides) {
   );
 }
 
-const PlasmicTextFieldContext = React.createContext(void 0);
-const PlasmicCheckboxGroupContext = React.createContext(void 0);
-const PlasmicRadioGroupContext = React.createContext(void 0);
-const PlasmicDialogTriggerContext = React.createContext(void 0);
-const PlasmicSliderContext = React.createContext(void 0);
-React.createContext(void 0);
-const PlasmicPopoverTriggerContext = React.createContext(void 0);
-const PlasmicListBoxContext = React.createContext(void 0);
-React.createContext(void 0);
-const PlasmicInputContext = React.createContext(void 0);
-
 class OptionsItemIdManager {
   constructor() {
     this._ids = /* @__PURE__ */ new Set();
@@ -1007,9 +996,20 @@ function useIdManager(callback, existing) {
   return idManager;
 }
 
+const PlasmicTextFieldContext = React.createContext(void 0);
+const PlasmicCheckboxGroupContext = React.createContext(void 0);
+const PlasmicRadioGroupContext = React.createContext(void 0);
+const PlasmicDialogTriggerContext = React.createContext(void 0);
+const PlasmicSliderContext = React.createContext(void 0);
+React.createContext(void 0);
+const PlasmicPopoverTriggerContext = React.createContext(void 0);
+const PlasmicListBoxContext = React.createContext(void 0);
+React.createContext(void 0);
+const PlasmicInputContext = React.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;
@@ -1025,7 +1025,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)
@@ -1048,7 +1048,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,
@@ -1072,7 +1072,7 @@ function BaseCheckbox(props) {
   });
   return /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement(
     Checkbox,
-    __spreadProps$l(__spreadValues$q({}, rest), {
+    __spreadProps$m(__spreadValues$q({}, rest), {
       value: registeredId,
       key: registeredId,
       style: COMMON_STYLES
@@ -1086,20 +1086,22 @@ function BaseCheckbox(props) {
       isIndeterminate,
       isSelected,
       isReadOnly
-    }) => withObservedValues$b(
-      children,
+    }) => /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.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 = ({
@@ -1158,7 +1160,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(),
@@ -1235,8 +1237,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;
@@ -1252,7 +1254,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)
@@ -1270,7 +1272,7 @@ function BaseText(_a) {
   const dataProps = extractPlasmicDataProps(rest);
   return /* @__PURE__ */ React.createElement(
     Text,
-    __spreadProps$k(__spreadValues$p(__spreadValues$p({}, rest), dataProps), {
+    __spreadProps$l(__spreadValues$p(__spreadValues$p({}, rest), dataProps), {
       slot,
       className,
       style: COMMON_STYLES
@@ -1312,8 +1314,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;
@@ -1329,10 +1331,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: {
@@ -1346,8 +1348,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;
@@ -1363,7 +1365,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)
@@ -1381,7 +1383,7 @@ function BaseLabel(_a) {
   const dataProps = extractPlasmicDataProps(rest);
   return /* @__PURE__ */ React.createElement(
     Label,
-    __spreadProps$i(__spreadValues$n({}, dataProps), {
+    __spreadProps$j(__spreadValues$n({}, dataProps), {
       id,
       className,
       style: COMMON_STYLES,
@@ -1422,8 +1424,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;
@@ -1439,7 +1441,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)
@@ -1453,9 +1455,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 = useCallback(
@@ -1469,14 +1469,16 @@ function BaseCheckboxGroup(props) {
   const idManager = useIdManager(updateIds);
   return (
     // PlasmicCheckboxGroupContext is used by BaseCheckbox
-    /* @__PURE__ */ React.createElement(PlasmicCheckboxGroupContext.Provider, { value: __spreadProps$h(__spreadValues$m({}, rest), { idManager }) }, /* @__PURE__ */ React.createElement(CheckboxGroup, __spreadProps$h(__spreadValues$m({}, rest), { style: COMMON_STYLES }), ({ isDisabled, isReadOnly }) => withObservedValues$a(
-      children,
+    /* @__PURE__ */ React.createElement(PlasmicCheckboxGroupContext.Provider, { value: __spreadProps$i(__spreadValues$m({}, rest), { idManager }) }, /* @__PURE__ */ React.createElement(CheckboxGroup, __spreadProps$i(__spreadValues$m({}, rest), { style: COMMON_STYLES }), ({ isDisabled, isReadOnly }) => /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement(
+      VariantUpdater,
       {
-        disabled: isDisabled,
-        readonly: isReadOnly
-      },
-      plasmicUpdateVariant
-    )))
+        changes: {
+          disabled: isDisabled,
+          readonly: isReadOnly
+        },
+        updateVariant: plasmicUpdateVariant
+      }
+    ), children)))
   );
 }
 const componentName = makeComponentName("checkboxGroup");
@@ -1489,7 +1491,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(),
@@ -1606,8 +1608,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;
@@ -1623,7 +1625,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)
@@ -1642,7 +1644,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: {
@@ -1706,7 +1708,7 @@ function BaseInput_(props, ref) {
   }, [isFocused, isFocusVisible, isHovered, isDisabled, plasmicUpdateVariant]);
   return /* @__PURE__ */ React.createElement(
     "input",
-    __spreadProps$g(__spreadValues$l({}, mergedProps), {
+    __spreadProps$h(__spreadValues$l({}, mergedProps), {
       ref: inputRef,
       "data-focused": isFocused || void 0,
       "data-disabled": isDisabled || void 0,
@@ -1727,7 +1729,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",
@@ -1774,8 +1776,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;
@@ -1791,7 +1793,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)
@@ -1812,20 +1814,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.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.createElement(
     ListBoxItem,
-    __spreadProps$f(__spreadValues$k({
+    __spreadProps$g(__spreadValues$k({
       key: registeredId,
       id: registeredId
     }, rest), {
@@ -1838,18 +1841,20 @@ function BaseListBoxItem(props) {
       isFocusVisible,
       isSelected,
       isDisabled
-    }) => withObservedValues$9(
-      children,
+    }) => /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.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.createElement(ListBox, { selectionMode: "single" }, listboxItem);
@@ -1902,7 +1907,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",
@@ -1934,8 +1939,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;
@@ -1951,7 +1956,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)
@@ -1968,7 +1973,7 @@ function BaseSection(props) {
   const _a = props, { header, items } = _a, rest = __objRest$h(_a, ["header", "items"]);
   const contextProps = React.useContext(PlasmicListBoxContext);
   const isStandalone = !contextProps;
-  const section = /* @__PURE__ */ React.createElement(Section, __spreadProps$e(__spreadValues$j({}, rest), { style: COMMON_STYLES }), /* @__PURE__ */ React.createElement(Header, null, header), items);
+  const section = /* @__PURE__ */ React.createElement(ListBoxSection, __spreadProps$f(__spreadValues$j({}, rest), { style: COMMON_STYLES }), /* @__PURE__ */ React.createElement(Header, null, header), items);
   if (isStandalone) {
     return (
       // BaseListbox should give section a listbox context (that it can't be used without)
@@ -2016,6 +2021,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;
@@ -2031,6 +2038,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)
@@ -2043,8 +2051,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: {
@@ -2061,14 +2069,12 @@ function BaseListBox(props) {
   const _a = props, {
     setControlContextData,
     children,
-    className,
     selectedKeys,
     defaultSelectedKeys,
     plasmicUpdateVariant
   } = _a, rest = __objRest$g(_a, [
     "setControlContextData",
     "children",
-    "className",
     "selectedKeys",
     "defaultSelectedKeys",
     "plasmicUpdateVariant"
@@ -2078,32 +2084,22 @@ function BaseListBox(props) {
   const [ids, setIds] = useState([]);
   const inEditor = usePlasmicCanvasContext();
   const idManager = useIdManager(setIds, context == null ? void 0 : context.idManager);
+  const mergedProps = 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)
+  }));
   useEffect(() => {
     setControlContextData == null ? void 0 : setControlContextData({
       itemIds: ids,
       isStandalone
     });
   }, [ids, isStandalone, setControlContextData]);
-  const classNameProp = useCallback(
-    ({ isFocusVisible, isFocused }) => {
-      plasmicUpdateVariant == null ? void 0 : plasmicUpdateVariant({
-        focused: isFocused,
-        focusVisible: isFocusVisible
-      });
-      return className != null ? className : "";
-    },
-    [className, plasmicUpdateVariant]
-  );
-  const listbox = /* @__PURE__ */ React.createElement(
-    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.createElement(ListBox, __spreadValues$i({}, mergedProps), children);
   if (isStandalone) {
     return /* @__PURE__ */ React.createElement(
       PlasmicListBoxContext.Provider,
@@ -2182,7 +2178,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",
@@ -2485,7 +2481,6 @@ function BaseComboBox(props) {
     plasmicUpdateVariant,
     __plasmic_selection_prop__,
     plasmicNotifyAutoOpenedContent,
-    className,
     isOpen: _isOpen
   } = _a, rest = __objRest$e(_a, [
     "children",
@@ -2493,18 +2488,8 @@ function BaseComboBox(props) {
     "plasmicUpdateVariant",
     "__plasmic_selection_prop__",
     "plasmicNotifyAutoOpenedContent",
-    "className",
     "isOpen"
   ]);
-  const classNameProp = useCallback(
-    ({ isDisabled }) => {
-      plasmicUpdateVariant == null ? void 0 : plasmicUpdateVariant({
-        disabled: isDisabled
-      });
-      return className != null ? className : "";
-    },
-    [className, plasmicUpdateVariant]
-  );
   const updateIds = useCallback(
     (ids) => {
       setControlContextData == null ? void 0 : setControlContextData({
@@ -2514,7 +2499,13 @@ function BaseComboBox(props) {
     [setControlContextData]
   );
   const idManager = useIdManager(updateIds);
-  return /* @__PURE__ */ React.createElement(ComboBox, __spreadProps$d(__spreadValues$g({ className: classNameProp }, rest), { style: COMMON_STYLES }), /* @__PURE__ */ React.createElement(PlasmicPopoverTriggerContext.Provider, { value: true }, /* @__PURE__ */ React.createElement(
+  return /* @__PURE__ */ React.createElement(ComboBox, __spreadProps$d(__spreadValues$g({}, rest), { style: COMMON_STYLES }), ({ isDisabled }) => /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement(
+    VariantUpdater,
+    {
+      changes: { disabled: isDisabled },
+      updateVariant: plasmicUpdateVariant
+    }
+  ), /* @__PURE__ */ React.createElement(PlasmicPopoverTriggerContext.Provider, { value: true }, /* @__PURE__ */ React.createElement(
     PlasmicListBoxContext.Provider,
     {
       value: {
@@ -2528,7 +2519,7 @@ function BaseComboBox(props) {
         plasmicNotifyAutoOpenedContent
       }
     ), children)
-  )));
+  ))));
 }
 function registerComboBox(loader) {
   registerComponentHelper(loader, BaseComboBox, {
@@ -3169,9 +3160,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,
@@ -3188,15 +3177,17 @@ function BaseOverlayArrow({
       id,
       style: __spreadValues$b({ lineHeight: "0" }, COMMON_STYLES)
     },
-    ({ placement }) => withObservedValues$8(
-      children,
+    ({ placement }) => /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.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.createElement("div", { style: { position: "relative" } }, overlayArrow);
@@ -3268,7 +3259,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,
@@ -3306,19 +3297,21 @@ function BaseRadio(props) {
       isSelected,
       isDisabled,
       isReadOnly
-    }) => withObservedValues$7(
-      children,
+    }) => /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.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.createElement(RadioGroup, null, radio);
@@ -3426,7 +3419,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 = useCallback(
@@ -3440,14 +3433,16 @@ function BaseRadioGroup(props) {
   const idManager = useIdManager(updateIds);
   return (
     // PlasmicRadioGroupContext is used by BaseRadio
-    /* @__PURE__ */ React.createElement(PlasmicRadioGroupContext.Provider, { value: __spreadProps$7(__spreadValues$9({}, props), { idManager }) }, /* @__PURE__ */ React.createElement(RadioGroup, __spreadProps$7(__spreadValues$9({}, rest), { style: COMMON_STYLES }), ({ isDisabled, isReadOnly }) => withObservedValues$6(
-      children,
+    /* @__PURE__ */ React.createElement(PlasmicRadioGroupContext.Provider, { value: __spreadProps$7(__spreadValues$9({}, props), { idManager }) }, /* @__PURE__ */ React.createElement(RadioGroup, __spreadProps$7(__spreadValues$9({}, rest), { style: COMMON_STYLES }), ({ isDisabled, isReadOnly }) => /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement(
+      VariantUpdater,
       {
-        disabled: isDisabled,
-        readonly: isReadOnly
-      },
-      plasmicUpdateVariant
-    )))
+        changes: {
+          disabled: isDisabled,
+          readonly: isReadOnly
+        },
+        updateVariant: plasmicUpdateVariant
+      }
+    ), children)))
   );
 }
 const RADIO_GROUP_COMPONENT_NAME = makeComponentName("radioGroup");
@@ -3612,12 +3607,12 @@ function BaseSelect(props) {
     onSelectionChange,
     onOpenChange,
     isDisabled,
-    className,
     children,
     disabledKeys,
     name,
-    setControlContextData,
+    className,
     plasmicUpdateVariant,
+    setControlContextData,
     plasmicNotifyAutoOpenedContent,
     __plasmic_selection_prop__,
     defaultSelectedKey,
@@ -3632,21 +3627,6 @@ function BaseSelect(props) {
     [setControlContextData]
   );
   const idManager = useIdManager(updateIds);
-  const classNameProp = 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.createElement(
     Select,
     __spreadValues$8({
@@ -3655,21 +3635,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.createElement(
+    ({ isFocused, isFocusVisible, isDisabled: isDisabled2 }) => /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement(
+      VariantUpdater,
+      {
+        changes: {
+          focused: isFocused,
+          focusVisible: isFocusVisible,
+          disabled: isDisabled2
+        },
+        updateVariant: plasmicUpdateVariant
+      }
+    ), /* @__PURE__ */ React.createElement(
       SelectAutoOpen,
       {
         __plasmic_selection_prop__,
         plasmicNotifyAutoOpenedContent
       }
-    ),
-    /* @__PURE__ */ React.createElement(PlasmicPopoverTriggerContext.Provider, { value: true }, /* @__PURE__ */ React.createElement(
+    ), /* @__PURE__ */ React.createElement(PlasmicPopoverTriggerContext.Provider, { value: true }, /* @__PURE__ */ React.createElement(
       PlasmicListBoxContext.Provider,
       {
         value: {
@@ -3677,7 +3666,7 @@ function BaseSelect(props) {
         }
       },
       children
-    ))
+    )))
   );
 }
 function registerSelect(loader) {
@@ -3883,19 +3872,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.useContext(PlasmicSliderContext);
-  const sliderOutput = /* @__PURE__ */ React.createElement(SliderOutput, __spreadProps$6(__spreadValues$7({}, rest), { style: COMMON_STYLES }), ({ isDisabled }) => withObservedValues$5(
-    children,
+  const sliderOutput = /* @__PURE__ */ React.createElement(SliderOutput, __spreadProps$6(__spreadValues$7({}, rest), { style: COMMON_STYLES }), ({ isDisabled }) => /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement(
+    VariantUpdater,
     {
-      disabled: isDisabled
-    },
-    plasmicUpdateVariant
-  ));
+      changes: {
+        disabled: isDisabled
+      },
+      updateVariant: plasmicUpdateVariant
+    }
+  ), children));
   if (isStandalone) {
     return /* @__PURE__ */ React.createElement(Slider, { style: { height: "100%", width: "100%" } }, sliderOutput);
   }
@@ -3963,9 +3952,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,
@@ -3977,23 +3964,19 @@ function BaseSliderThumb(_a) {
     "plasmicUpdateVariant"
   ]);
   const isStandalone = !React.useContext(SliderTrackContext);
-  const thumb = /* @__PURE__ */ React.createElement(
-    SliderThumb,
-    __spreadProps$5(__spreadValues$6({}, rest), {
-      style: COMMON_STYLES
-    }),
-    ({ isDragging, isHovered, isFocused, isFocusVisible, isDisabled }) => withObservedValues$4(
-      /* @__PURE__ */ React.createElement(React.Fragment, null, advanced ? children : void 0),
-      {
+  const thumb = /* @__PURE__ */ React.createElement(SliderThumb, __spreadProps$5(__spreadValues$6({}, rest), { style: COMMON_STYLES }), ({ isDragging, isHovered, isFocused, isFocusVisible, isDisabled }) => /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.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.createElement(Slider, { style: { height: "100%", width: "100%" } }, /* @__PURE__ */ React.createElement(SliderTrack, null, thumb));
   }
@@ -4069,9 +4052,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;
 }
@@ -4113,25 +4094,27 @@ function BaseSliderTrack(props) {
       });
     });
   }, [children, value]);
-  const track = /* @__PURE__ */ React.createElement(SliderTrack, __spreadValues$5({ style: { position: "relative" } }, rest), ({ state, isHovered }) => /* @__PURE__ */ React.createElement(React.Fragment, null, withObservedValues$3(
-    /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.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.createElement(SliderTrack, __spreadValues$5({ style: { position: "relative" } }, rest), ({ state, isHovered }) => /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement(
+    VariantUpdater,
+    {
+      changes: {
+        hovered: isHovered
       },
-      progressBar
-    ), thumbs),
+      updateVariant: plasmicUpdateVariant
+    }
+  ), /* @__PURE__ */ React.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.createElement(Slider, { style: __spreadValues$5({ height: "100%", width: "100%" }, COMMON_STYLES) }, track);
   }
@@ -4243,7 +4226,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 (
@@ -4257,13 +4240,15 @@ function BaseSlider(props) {
           onChangeEnd: rest.onChangeEnd
         })
       },
-      /* @__PURE__ */ React.createElement(Slider, __spreadProps$4(__spreadValues$4({}, rest), { style: COMMON_STYLES }), ({ isDisabled }) => withObservedValues$2(
-        children,
+      /* @__PURE__ */ React.createElement(Slider, __spreadProps$4(__spreadValues$4({}, rest), { style: COMMON_STYLES }), ({ isDisabled }) => /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement(
+        VariantUpdater,
         {
-          disabled: isDisabled
-        },
-        plasmicUpdateVariant
-      ))
+          changes: {
+            disabled: isDisabled
+          },
+          updateVariant: plasmicUpdateVariant
+        }
+      ), children))
     )
   );
 }
@@ -4543,7 +4528,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.createElement(Switch, __spreadProps$3(__spreadValues$3({}, rest), { style: COMMON_STYLES }), ({
@@ -4554,19 +4539,21 @@ function BaseSwitch(props) {
     isSelected,
     isDisabled,
     isReadOnly
-  }) => withObservedValues$1(
-    children,
+  }) => /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.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(
@@ -4912,7 +4899,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.useMemo(() => {
@@ -4932,14 +4919,16 @@ function BaseTextField(props) {
       }, rest), {
         style: COMMON_STYLES
       }),
-      ({ isDisabled, isReadOnly }) => withObservedValues(
-        children,
+      ({ isDisabled, isReadOnly }) => /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement(
+        VariantUpdater,
         {
-          disabled: isDisabled,
-          readonly: isReadOnly
-        },
-        plasmicUpdateVariant
-      )
+          changes: {
+            disabled: isDisabled,
+            readonly: isReadOnly
+          },
+          updateVariant: plasmicUpdateVariant
+        }
+      ), children)
     ))
   );
 }