@plasmicapp/react-web 0.2.115 → 0.2.117

package/dist/react-web.esm.js

@@ -8,6 +8,9 @@ import { PlasmicDataSourceContextProvider } from '@plasmicapp/data-sources-conte
 export { PlasmicDataSourceContextProvider, useCurrentUser } from '@plasmicapp/data-sources-context';
 import { SSRProvider, useIsSSR as useIsSSR$1 } from '@react-aria/ssr';
 import { useFocusRing, useFocusable, FocusScope } from '@react-aria/focus';
+import deepEqual from 'fast-deep-equal';
+import { proxy, ref, useSnapshot } from 'valtio';
+import { subscribeKey } from 'valtio/utils';
 import { useCheckbox as useCheckbox$1 } from '@react-aria/checkbox';
 import { VisuallyHidden } from '@react-aria/visually-hidden';
 import { useToggleState } from '@react-stately/toggle';
@@ -22,9 +25,6 @@ import { useListBox, useOption, useListBoxSection } from '@react-aria/listbox';
 import { useSelectState } from '@react-stately/select';
 import { useSwitch as useSwitch$1 } from '@react-aria/switch';
 import { useOverlay, useOverlayPosition, DismissButton } from '@react-aria/overlays';
-import deepEqual from 'fast-deep-equal';
-import { proxy, ref, useSnapshot } from 'valtio';
-import { subscribeKey } from 'valtio/utils';
 
 function _extends() {
   _extends = Object.assign || function (target) {
@@ -1684,649 +1684,573 @@ function useTrigger(trigger, opts) {
   return TRIGGER_TO_HOOK[trigger](opts);
 }
 
-// Utilities used by generated code
-var classNames = classNames$1;
-
-var PLUME_STRICT_MODE = true;
-function setPlumeStrictMode(mode) {
-  PLUME_STRICT_MODE = mode;
-}
-function mergeVariantToggles() {
-  for (var _len = arguments.length, toggles = new Array(_len), _key = 0; _key < _len; _key++) {
-    toggles[_key] = arguments[_key];
-  }
-
-  var definedToggles = toggles.filter(function (x) {
-    return !!x.def;
-  });
-  var grouped = groupBy(definedToggles, function (_ref) {
-    var def = _ref.def;
-    return def.group;
-  });
-  return mapValues(grouped, function (subToggles) {
-    return Object.fromEntries(subToggles.map(function (_ref2) {
-      var def = _ref2.def,
-          active = _ref2.active;
-      return [def.variant, !!active];
-    }));
-  });
-}
-function noOutline() {
-  return {
-    outline: "none"
+function generateStateOnChangeProp($state, stateName, dataReps) {
+  return function (val, path) {
+    return set($state, [stateName].concat(dataReps, path), val);
   };
 }
-function getPlumeType(child) {
-  if (!isValidElement(child)) {
-    return undefined;
-  }
+/**
+ * This function generate the state value prop for repeated states
+ * Example:
+ *   - parent[][].counter[].count
+ * We need to pass `parent[index1][index2].counter to the child component
+ */
 
-  var childType = child.type;
-  return childType.__plumeType || (childType.getPlumeType == null ? void 0 : childType.getPlumeType(child.props));
+function generateStateValueProp($state, path // ["parent", 0, 1, "counter"]
+) {
+  return _get($state, path);
 }
+/**
+ * Forked from https://github.com/lukeed/dset
+ * Changes: fixed setting a deep value to a proxy object
+ */
 
-var _excluded$4 = ["link", "isDisabled", "startIcon", "endIcon", "showStartIcon", "showEndIcon", "children"];
-function useButton(plasmicClass, props, config, ref) {
-  var _ref, _ref2, _extends2, _overrides;
+function set(obj, keys, val) {
+  keys = keys.split ? keys.split(".") : keys;
+  var i = 0,
+      l = keys.length,
+      t = obj,
+      x,
+      k;
 
-  if (ref === void 0) {
-    ref = null;
+  while (i < l) {
+    k = keys[i++];
+    if (k === "__proto__" || k === "constructor" || k === "prototype") break;
+
+    if (i === l) {
+      t[k] = val;
+      t = t[k];
+    } else {
+      if (typeof (x = t[k]) === typeof keys) {
+        t = t[k] = x;
+      } else if (keys[i] * 0 !== 0 || !!~("" + keys[i]).indexOf(".")) {
+        t[k] = {};
+        t = t[k];
+      } else {
+        t[k] = [];
+        t = t[k];
+      }
+    }
   }
+}
 
-  var link = props.link,
-      isDisabled = props.isDisabled,
-      startIcon = props.startIcon,
-      endIcon = props.endIcon,
-      showStartIcon = props.showStartIcon,
-      showEndIcon = props.showEndIcon,
-      children = props.children,
-      rest = _objectWithoutPropertiesLoose(props, _excluded$4);
+var mkUntrackedValue = function mkUntrackedValue(o) {
+  return typeof o === "object" ? ref(o) : o;
+};
 
-  var variants = _extends({}, pick.apply(void 0, [props].concat(plasmicClass.internalVariantProps)), mergeVariantToggles({
-    def: config.showStartIconVariant,
-    active: showStartIcon
-  }, {
-    def: config.showEndIconVariant,
-    active: showEndIcon
-  }, {
-    def: config.isDisabledVariant,
-    active: isDisabled
-  }));
+var transformPathStringToObj = function transformPathStringToObj(str) {
+  var splitStatePathPart = function splitStatePathPart(state) {
+    return state.endsWith("[]") ? [].concat(splitStatePathPart(state.slice(0, -2)), ["[]"]) : [state];
+  };
 
-  var args = _extends({}, pick.apply(void 0, [props].concat(plasmicClass.internalArgProps)), config.startIconSlot && (_ref = {}, _ref[config.startIconSlot] = startIcon, _ref), config.endIconSlot && (_ref2 = {}, _ref2[config.endIconSlot] = endIcon, _ref2), (_extends2 = {}, _extends2[config.contentSlot] = children, _extends2));
+  return str.split(".").flatMap(splitStatePathPart);
+};
 
-  var overrides = (_overrides = {}, _overrides[config.root] = {
-    as: !!link ? "a" : "button",
-    props: _extends({}, omit.apply(void 0, [rest].concat(plasmicClass.internalArgProps, plasmicClass.internalVariantProps)), {
-      ref: ref,
-      disabled: isDisabled
-    }, !!link && {
-      href: link
-    })
-  }, _overrides);
-  return {
-    plasmicProps: {
-      variants: variants,
-      args: args,
-      overrides: overrides
-    }
-  };
-}
+function shallowEqual(a1, a2) {
+  if (a1.length !== a2.length) {
+    return false;
+  }
 
-function getStyleProps(props) {
-  return pick(props, "className", "style");
-}
-function getDefaultPlasmicProps(plasmicClass, props) {
-  return {
-    plasmicProps: {
-      variants: pick.apply(void 0, [props].concat(plasmicClass.internalVariantProps)),
-      args: pick.apply(void 0, [props].concat(plasmicClass.internalArgProps)),
-      overrides: {}
+  for (var i = 0; i < a1.length; i++) {
+    if (a1[i] !== a2[i]) {
+      return false;
     }
-  };
-}
-var RE_DATA_PROP = /^(data-.*)$/;
-function getDataProps(props) {
-  return pickBy(props, function (k) {
-    return RE_DATA_PROP.test(k);
-  });
-}
+  }
 
-function asAriaCheckboxProps(props) {
-  var ariaProps = _extends({}, props, {
-    isSelected: props.isChecked,
-    defaultSelected: props.defaultChecked
-  });
+  return true;
+}
 
-  delete ariaProps["isChecked"];
-  delete ariaProps["defaultChecked"];
-  return ariaProps;
+function isNum(value) {
+  return typeof value === "symbol" ? false : !isNaN(+value);
 }
 
-function useCheckbox(plasmicClass, props, config, ref) {
-  var _overrides, _ref;
+function saveNewState($$state, path, spec) {
+  var key = JSON.stringify(path);
+  $$state.existingStates.set(key, {
+    path: path,
+    specKey: spec.path
+  });
 
-  if (ref === void 0) {
-    ref = null;
+  if (!$$state.statesInstanceBySpec.has(spec.path)) {
+    $$state.statesInstanceBySpec.set(spec.path, []);
   }
 
-  var children = props.children,
-      isDisabled = props.isDisabled,
-      isIndeterminate = props.isIndeterminate;
-  useEnsureSSRProvider();
-  var inputRef = useRef(null);
-  var rootRef = useRef(null);
-  var ariaProps = asAriaCheckboxProps(props);
-  var state = useToggleState(ariaProps);
+  $$state.statesInstanceBySpec.get(spec.path).push({
+    path: path,
+    specKey: spec.path
+  });
+}
 
-  var _useAriaCheckbox = useCheckbox$1(ariaProps, state, inputRef),
-      inputProps = _useAriaCheckbox.inputProps;
+function create$StateProxy($$state, handlers) {
+  var getNextKeyToSpecMap = function getNextKeyToSpecMap(currPath) {
+    return new Map(Object.entries(Object.values($$state.specsByKey).filter(function (spec) {
+      return shallowEqual(currPath.map(function (p) {
+        return isNum(p) ? "[]" : p;
+      }), spec.pathObj.slice(0, currPath.length));
+    }).reduce(function (agg, spec) {
+      var nextKey = spec.pathObj[currPath.length];
 
-  var variants = _extends({}, pick.apply(void 0, [props].concat(plasmicClass.internalVariantProps)), mergeVariantToggles({
-    def: config.isDisabledVariant,
-    active: isDisabled
-  }, {
-    def: config.isCheckedVariant,
-    active: state.isSelected
-  }, {
-    def: config.isIndeterminateVariant,
-    active: isIndeterminate
-  }, {
-    def: config.noLabelVariant,
-    active: !children
-  }));
+      if (!(nextKey in agg)) {
+        agg[nextKey] = [];
+      }
 
-  var overrides = (_overrides = {}, _overrides[config.root] = {
-    as: "label",
-    props: mergeProps(getStyleProps(props), {
-      ref: rootRef
-    }),
-    wrapChildren: function wrapChildren(children) {
-      return createElement(Fragment, null, createElement(VisuallyHidden, {
-        isFocusable: true
-      }, createElement("input", Object.assign({}, inputProps, {
-        ref: inputRef
-      }))), children);
-    }
-  }, _overrides);
+      agg[nextKey].push(spec);
+      return agg;
+    }, {})));
+  };
 
-  var args = _extends({}, pick.apply(void 0, [props].concat(plasmicClass.internalArgProps)), config.labelSlot ? (_ref = {}, _ref[config.labelSlot] = children, _ref) : {});
+  var rec = function rec(currPath) {
+    var nextKeyToSpecs = getNextKeyToSpecMap(currPath);
 
-  var plumeState = useMemo(function () {
-    return {
-      setChecked: function setChecked(checked) {
-        return state.setSelected(checked);
-      }
+    var getSpecForProperty = function getSpecForProperty(property) {
+      var _nextKeyToSpecs$get, _nextKeyToSpecs$get2;
+
+      return nextKeyToSpecs.has("[]") && isNum(property) ? (_nextKeyToSpecs$get = nextKeyToSpecs.get("[]")) == null ? void 0 : _nextKeyToSpecs$get[0] : typeof property === "string" && nextKeyToSpecs.has(property) ? (_nextKeyToSpecs$get2 = nextKeyToSpecs.get(property)) == null ? void 0 : _nextKeyToSpecs$get2[0] : undefined;
     };
-  }, [state]);
-  useImperativeHandle(ref, function () {
-    return {
-      getRoot: function getRoot() {
-        return rootRef.current;
-      },
-      focus: function focus() {
-        var _inputRef$current;
 
-        return (_inputRef$current = inputRef.current) == null ? void 0 : _inputRef$current.focus();
-      },
-      blur: function blur() {
-        var _inputRef$current2;
-
-        return (_inputRef$current2 = inputRef.current) == null ? void 0 : _inputRef$current2.blur();
-      },
-      setChecked: function setChecked(checked) {
-        return plumeState.setChecked(checked);
-      }
+    var getNextPath = function getNextPath(property) {
+      return [].concat(currPath, [isNum(property) ? +property : property]);
     };
-  }, [rootRef, inputRef, plumeState]);
-  return {
-    plasmicProps: {
-      variants: variants,
-      overrides: overrides,
-      args: args
-    },
-    state: plumeState
-  };
-}
-
-/**
- * Given children of a component like Select or Menu, derive the items
- * that we will pass into the Collections API.  These will be
- * ReactElement<ItemLikeProps|SectionLikeProps>[].
- *
- * Will also assign keys to items by their index in the collection,
- * and collect the keys of disabled items.
- */
 
-function deriveItemsFromChildren(children, opts) {
-  if (!children) {
-    return {
-      items: [],
-      disabledKeys: []
-    };
-  }
+    return new Proxy(nextKeyToSpecs.has("[]") ? [] : {}, {
+      deleteProperty: function deleteProperty(target, property) {
+        var prefixPath = getNextPath(property);
+        var specKeysToUpdate = new Set();
+        $$state.existingStates.forEach(function (_ref) {
+          var path = _ref.path,
+              specKey = _ref.specKey;
 
-  var itemPlumeType = opts.itemPlumeType,
-      sectionPlumeType = opts.sectionPlumeType,
-      invalidChildError = opts.invalidChildError; // For Plume items without an explicit key, we assign a key as the index
-  // of the collection.
+          if (path.length >= prefixPath.length && shallowEqual(path.slice(0, prefixPath.length), prefixPath)) {
+            deleteState($$state, path);
+            specKeysToUpdate.add(specKey);
+          }
+        });
+        specKeysToUpdate.forEach(function (specKey) {
+          var spec = $$state.specsByKey[specKey];
 
-  var itemCount = 0;
-  var sectionCount = 0;
+          if (spec.onChangeProp) {
+            var _$$state$props$spec$o, _$$state$props;
 
-  var ensureValue = function ensureValue(element) {
-    if (!propInChild(element, "value")) {
-      if (opts.requireItemValue && PLUME_STRICT_MODE) {
-        throw new Error("Must specify a \"value\" prop for " + getElementTypeName(element));
-      } else {
-        return cloneChild(element, {
-          value: "" + itemCount++
+            (_$$state$props$spec$o = (_$$state$props = $$state.props)[spec.onChangeProp]) == null ? void 0 : _$$state$props$spec$o.call(_$$state$props, _get($$state.stateValues, currPath), currPath);
+          }
         });
-      }
-    } else {
-      // Still increment count even if key is present, so that the
-      // auto-assigned key really reflects the index
-      itemCount++;
-      return element;
-    }
-  };
+        return Reflect.deleteProperty(target, property);
+      },
+      get: function get(target, property, receiver) {
+        var spec = getSpecForProperty(property);
 
-  var disabledKeys = [];
+        if (spec && typeof property !== "symbol") {
+          var nextPath = getNextPath(property);
 
-  var flattenedChildren = function flattenedChildren(children) {
-    return toChildArray(children).flatMap(function (child) {
-      if (React__default.isValidElement(child)) {
-        if (child.type === React__default.Fragment) {
-          return flattenedChildren(child.props.children);
+          if (spec.pathObj.length === currPath.length + 1) {
+            var _handlers$get, _handlers;
+
+            // reached the end of the spec
+            target[property] = (_handlers$get = (_handlers = handlers(nextPath, spec)).get) == null ? void 0 : _handlers$get.call(_handlers, target, property, receiver);
+          } else if (!(property in target)) {
+            target[property] = rec(nextPath);
+          }
         }
 
-        var type = getPlumeType(child);
+        return Reflect.get(target, property, receiver);
+      },
+      set: function set$1(target, property, value, receiver) {
+        var spec = getSpecForProperty(property);
+        var nextPath = getNextPath(property);
 
-        if (type === itemPlumeType) {
-          child = ensureValue(child);
-          var childKey = getItemLikeKey(child);
+        if (spec && typeof property !== "symbol") {
+          if (spec.pathObj.length === currPath.length + 1) {
+            var _handlers$set, _handlers2;
 
-          if (getChildProp(child, "isDisabled") && !!childKey) {
-            disabledKeys.push(childKey);
+            // reached the end of the spec
+            target[property] = (_handlers$set = (_handlers2 = handlers(nextPath, spec)).set) == null ? void 0 : _handlers$set.call(_handlers2, target, property, value, receiver);
+            return Reflect.set(target, property, value, receiver);
+          } else if (typeof value === "object") {
+            target[property] = rec(nextPath);
+
+            for (var _i = 0, _Object$keys = Object.keys(value); _i < _Object$keys.length; _i++) {
+              var key = _Object$keys[_i];
+              target[property][key] = value[key];
+            }
+
+            return true;
           }
+        }
 
-          return [child];
+        if (property === "registerInitFunc" && currPath.length === 0) {
+          return Reflect.set(target, property, value, receiver);
         }
 
-        if (type === sectionPlumeType) {
-          var _child$key;
+        if (nextKeyToSpecs.has("[]")) {
+          var _nextKeyToSpecs$get3;
 
-          return [cloneChild(child, {
-            // key of section doesn't actually matter, just needs
-            // to be unique
-            key: (_child$key = child.key) != null ? _child$key : "section-" + sectionCount++,
-            children: flattenedChildren(getChildProp(child, "children"))
-          })];
-        }
-      }
+          set($$state.stateValues, nextPath, value);
 
-      if (PLUME_STRICT_MODE) {
-        throw new Error(invalidChildError != null ? invalidChildError : "Unexpected child");
-      } else {
-        return [];
+          (_nextKeyToSpecs$get3 = nextKeyToSpecs.get("[]")) == null ? void 0 : _nextKeyToSpecs$get3.forEach(function (spec) {
+            if (spec != null && spec.onChangeProp) {
+              var _$$state$props$spec$o2, _$$state$props2;
+
+              (_$$state$props$spec$o2 = (_$$state$props2 = $$state.props)[spec.onChangeProp]) == null ? void 0 : _$$state$props$spec$o2.call(_$$state$props2, value, nextPath);
+            }
+          });
+          return Reflect.set(target, property, value, receiver);
+        } // invalid setting a value that doesn't make part of the spec
+
+
+        return false;
       }
     });
   };
 
-  return {
-    items: flattenedChildren(children),
-    disabledKeys: disabledKeys
-  };
-}
-function useDerivedItemsFromChildren(children, opts) {
-  var itemPlumeType = opts.itemPlumeType,
-      sectionPlumeType = opts.sectionPlumeType,
-      invalidChildError = opts.invalidChildError,
-      requireItemValue = opts.requireItemValue;
-  return React__default.useMemo(function () {
-    return deriveItemsFromChildren(children, {
-      itemPlumeType: itemPlumeType,
-      sectionPlumeType: sectionPlumeType,
-      invalidChildError: invalidChildError,
-      requireItemValue: requireItemValue
-    });
-  }, [children, itemPlumeType, sectionPlumeType, invalidChildError, requireItemValue]);
-}
-/**
- * Given a Collection node, create the React element that we should use
- * to render it.
- */
-
-function renderCollectionNode(node) {
-  // node.rendered should already have our item-like or section-like Plume
-  // component elements, so we just need to clone them with a secret
-  // _node prop that we use to render.
-  return cloneChild(node.rendered, {
-    _node: node,
-    key: node.key
-  });
+  return rec([]);
 }
-/**
- * Renders a item-like or section-like Plume component element into an
- * Item or a Section element.
- */
 
-function renderAsCollectionChild(child, opts) {
-  var plumeType = getPlumeType(child);
+var deleteState = function deleteState($$state, path) {
+  var _$$state$unsubscripti;
 
-  if (plumeType === opts.itemPlumeType) {
-    var _getChildProp;
+  var key = JSON.stringify(path);
+  (_$$state$unsubscripti = $$state.unsubscriptionsByState[key]) == null ? void 0 : _$$state$unsubscripti.forEach(function (f) {
+    return f();
+  });
+  delete $$state.unsubscriptionsByState[key];
+  $$state.existingStates["delete"](key); // delete get($$state.stateValues, path.slice(-1))[path.slice(-1)[0]];
+  // delete get($$state.initStateValues, path.slice(-1))[path.slice(-1)[0]];
+};
 
-    var option = child; // We look at the children passed to the item-like element, and derive key
-    // or textValue from it if it is a string
+var getIndexes = function getIndexes(path, spec) {
+  var indexes = [];
 
-    var content = getChildProp(option, "children"); // The children render prop needs to return an <Item/>
+  if (path.length !== spec.pathObj.length) {
+    throw new Error("Unexpected error: state path and spec path have different lengths");
+  }
 
-    return React__default.createElement(Item // We use ItemLike.value if the user explicitly specified a value,
-    // and we fallback to key.  If the user specified neither, then
-    // the Collections API will generate a unique key for this item.
-    , {
-      // We use ItemLike.value if the user explicitly specified a value,
-      // and we fallback to key.  If the user specified neither, then
-      // the Collections API will generate a unique key for this item.
-      key: getItemLikeKey(option),
-      // textValue is either explicitly specified by the user, or we
-      // try to derive it if `content` is a string.
-      textValue: (_getChildProp = getChildProp(option, "textValue")) != null ? _getChildProp : isString(content) ? content : propInChild(option, "value") ? getChildProp(option, "value") : option.key,
-      "aria-label": getChildProp(option, "aria-label")
-    }, option);
-  } else {
-    var group = child;
-    return React__default.createElement(Section // Note that we are using the whole section-like element as the title
-    // here, and not group.props.title; we want the entire section-like
-    // Plume element to end up as Node.rendered.
-    , {
-      // Note that we are using the whole section-like element as the title
-      // here, and not group.props.title; we want the entire section-like
-      // Plume element to end up as Node.rendered.
-      title: group,
-      "aria-label": getChildProp(group, "aria-label"),
-      // We are flattening and deriving the descendant Options as items here.
-      // group.props.children should've already been cleaned up by
-      // deriveItemsFromChildren()
-      items: getChildProp(group, "children")
-    }, function (c) {
-      return renderAsCollectionChild(c, opts);
-    });
+  for (var i = 0; i < spec.pathObj.length; i++) {
+    if (spec.pathObj[i] === "[]") {
+      indexes.push(path[i]);
+    }
   }
-}
 
-function getItemLikeKey(element) {
-  var _getChildProp2;
+  return indexes;
+};
 
-  return (_getChildProp2 = getChildProp(element, "value")) != null ? _getChildProp2 : element.key;
-} // PlasmicLoader-aware function to get prop from child.
-
-
-function getChildProp(child, prop) {
-  return "componentProps" in child.props ? child.props.componentProps[prop] : child.props[prop];
-} // PlasmicLoader-aware function to check `if (prop in element.props)`.
-
-function propInChild(child, prop) {
-  return "componentProps" in child.props ? prop in child.props.componentProps : prop in child.props;
-} // PlasmicLoader-aware function to clone React element.
-
-
-function cloneChild(child, props) {
-  if (child.type.getPlumeType) {
-    // If React element has getPlumeType(), assume that it is PlasmicLoader,
-    // so add nodeProps to componentProps instead of element props.
-    return React__default.cloneElement(child, _extends({
-      componentProps: _extends({}, child.props.componentProps, props)
-    }, props.key ? {
-      key: props.key
-    } : {}));
-  }
+function initializeStateValue($$state, initialStatePath, initialSpec) {
+  var _$$state$unsubscripti2;
 
-  return React__default.cloneElement(child, props);
-}
+  var initialStateKey = JSON.stringify(initialStatePath);
+  var stateAccess = new Set();
+  var $state = create$StateProxy($$state, function (path, spec) {
+    return {
+      get: function get() {
+        var key = JSON.stringify(path);
+        stateAccess.add({
+          path: path,
+          spec: spec
+        });
 
-var TriggeredOverlayContext = /*#__PURE__*/createContext(undefined);
+        if (spec.valueProp) {
+          return !spec.isRepeated ? $$state.props[spec.valueProp] : _get($$state.props[spec.valueProp], path.slice(1));
+        }
 
-var MenuContext = /*#__PURE__*/createContext(undefined);
+        if ($$state.existingStates.has(key)) {
+          // is already initialized
+          return _get($$state.stateValues, path);
+        } else if (spec.initFunc) {
+          initializeStateValue($$state, path, spec);
+        }
 
-var _excluded$5 = ["children"];
-var COLLECTION_OPTS = {
-  itemPlumeType: "menu-item",
-  sectionPlumeType: "menu-group"
-};
-/**
- * Converts props from BaseMenuProps to react-aria's useMenu() props.
- */
+        return _get($$state.stateValues, path);
+      },
+      set: function set() {
+        throw new Error("Cannot update state values during initialization");
+      }
+    };
+  });
+  (_$$state$unsubscripti2 = $$state.unsubscriptionsByState[initialStateKey]) == null ? void 0 : _$$state$unsubscripti2.forEach(function (f) {
+    return f();
+  });
+  $$state.unsubscriptionsByState[initialStateKey] = [];
+  stateAccess.forEach(function (_ref2) {
+    var path = _ref2.path,
+        spec = _ref2.spec;
+    var unsubscribe = subscribeKey(_get($$state.stateValues, path.slice(-1)), path.slice(-1)[0], function () {
+      return set($$state.stateValues, initialStatePath, mkUntrackedValue(initialSpec.initFunc($$state.props, $state, getIndexes(path, spec))));
+    });
+    $$state.unsubscriptionsByState[initialStateKey].push(unsubscribe);
+  });
+  var initialValue = initialSpec.initFunc($$state.props, $state, getIndexes(initialStatePath, initialSpec));
+  saveStateInitialValue($$state, initialStatePath, initialSpec, initialValue);
+  return initialValue;
+}
+
+function saveStateInitialValue($$state, path, spec, initialValue) {
+  // array states are a special case.Wwe listen for changes in the array and in the array cells.
+  // for example: $state.people.push(...), $state.people.splice(...), $state.people[0] = ...
+  // that's why we need to track the array object
+  if (spec.isArray && Array.isArray(initialValue)) {
+    var array = initialValue.map(function (val) {
+      return mkUntrackedValue(val);
+    });
 
-function asAriaMenuProps(props) {
-  var children = props.children,
-      rest = _objectWithoutPropertiesLoose(props, _excluded$5);
+    set($$state.stateValues, path, array); // we need to make the array untracked for initStateValues
+    // so we can distinguish between stateValue and initStateValue.
+    // otherwise they would reference the same array.
 
-  var _useDerivedItemsFromC = useDerivedItemsFromChildren(children, _extends({}, COLLECTION_OPTS, {
-    invalidChildError: "Can only use Menu.Item and Menu.Group as children to Menu",
-    requireItemValue: false
-  })),
-      items = _useDerivedItemsFromC.items,
-      disabledKeys = _useDerivedItemsFromC.disabledKeys;
 
-  var collectionChildRenderer = useCallback(function (child) {
-    return renderAsCollectionChild(child, COLLECTION_OPTS);
-  }, []);
-  return {
-    ariaProps: _extends({}, rest, {
-      children: collectionChildRenderer,
-      items: items,
-      disabledKeys: disabledKeys
-    })
-  };
-}
+    set($$state.initStateValues, path, mkUntrackedValue(array));
+  } else {
+    var untrackedValue = mkUntrackedValue(initialValue);
 
-function useMenu(plasmicClass, props, config, ref) {
-  var _overrides, _extends2;
+    set($$state.stateValues, path, untrackedValue);
 
-  if (ref === void 0) {
-    ref = null;
+    set($$state.initStateValues, path, untrackedValue);
   }
+}
 
-  useEnsureSSRProvider();
-
-  var _asAriaMenuProps = asAriaMenuProps(props),
-      ariaProps = _asAriaMenuProps.ariaProps;
+function useDollarState(specs, props) {
+  var $$state = React__default.useRef(proxy({
+    stateValues: {},
+    initStateValues: {},
+    specsByKey: Object.fromEntries(specs.map(function (spec) {
+      return [spec.path, _extends({}, spec, {
+        pathObj: transformPathStringToObj(spec.path),
+        isRepeated: spec.path.split(".").some(function (part) {
+          return part.endsWith("[]");
+        })
+      })];
+    })),
+    statesInstanceBySpec: new Map(),
+    existingStates: new Map(),
+    unsubscriptionsByState: {},
+    props: undefined,
+    registrationsQueue: []
+  })).current;
+  $$state.props = mkUntrackedValue(props);
+  var $state = React__default.useRef(Object.assign(create$StateProxy($$state, function (path, spec) {
+    var key = JSON.stringify(path);
 
-  var triggerContext = useContext(TriggeredOverlayContext);
-  var rootRef = useRef(null);
-  var state = useTreeState(ariaProps);
-  var menuListRef = useRef(null);
+    if (!$$state.existingStates.has(key)) {
+      var _spec$initVal;
 
-  var _useAriaMenu = useMenu$1(_extends({}, ariaProps, {
-    autoFocus: triggerContext == null ? void 0 : triggerContext.autoFocus
-  }), state, menuListRef),
-      menuProps = _useAriaMenu.menuProps;
+      saveNewState($$state, path, spec);
+      var initialValue = !spec.initFunc ? (_spec$initVal = spec.initVal) != null ? _spec$initVal : undefined : initializeStateValue($$state, path, spec);
+      saveStateInitialValue($$state, path, spec, initialValue);
+    }
 
-  var contextValue = useMemo(function () {
     return {
-      state: state,
-      menuProps: props
-    };
-  }, [state, props]);
-
-  var variants = _extends({}, pick.apply(void 0, [props].concat(plasmicClass.internalVariantProps)));
+      get: function get() {
+        if (spec.valueProp) {
+          var value = !spec.isRepeated ? $$state.props[spec.valueProp] : _get($$state.props[spec.valueProp], path.slice(1));
+          return value;
+        } else {
+          return _get($$state.stateValues, path);
+        }
+      },
+      set: function set$1(_t, _p, value) {
+        set($$state.stateValues, path, mkUntrackedValue(value));
 
-  var overrides = (_overrides = {}, _overrides[config.root] = {
-    props: mergeProps(getStyleProps(props), {
-      ref: rootRef
-    })
-  }, _overrides[config.itemsContainer] = {
-    as: "ul",
-    props: mergeProps(menuProps, {
-      ref: menuListRef,
-      style: _extends({}, noOutline())
-    })
-  }, _overrides);
+        if (spec.onChangeProp) {
+          var _$$state$props$spec$o3, _$$state$props3;
 
-  var args = _extends({}, pick.apply(void 0, [props].concat(plasmicClass.internalArgProps)), (_extends2 = {}, _extends2[config.itemsSlot] = createElement(MenuContext.Provider, {
-    value: contextValue
-  }, Array.from(state.collection).map(function (node) {
-    return renderCollectionNode(node);
-  })), _extends2));
+          (_$$state$props$spec$o3 = (_$$state$props3 = $$state.props)[spec.onChangeProp]) == null ? void 0 : _$$state$props$spec$o3.call(_$$state$props3, value, path);
+        }
 
-  var plumeState = useMemo(function () {
-    return {
-      getFocusedValue: function getFocusedValue() {
-        return state.selectionManager.focusedKey;
-      },
-      setFocusedValue: function setFocusedValue(value) {
-        return state.selectionManager.setFocusedKey(value);
+        return true;
       }
     };
-  }, [state]);
-  useImperativeHandle(ref, function () {
-    return {
-      getRoot: function getRoot() {
-        return rootRef.current;
-      },
-      getFocusedValue: function getFocusedValue() {
-        return plumeState.getFocusedValue();
-      },
-      setFocusedValue: function setFocusedValue(key) {
-        return plumeState.setFocusedValue(key);
+  }), {
+    registerInitFunc: function registerInitFunc(pathStr, f) {
+      var _$$state$statesInstan;
+
+      if ((_$$state$statesInstan = $$state.statesInstanceBySpec.get(pathStr)) != null && _$$state$statesInstan.some(function (_ref3) {
+        var path = _ref3.path,
+            specKey = _ref3.specKey;
+        return !deepEqual(_get($$state.initStateValues, path), f(props, $state, getIndexes(path, $$state.specsByKey[specKey])));
+      })) {
+        $$state.registrationsQueue.push({
+          pathStr: pathStr,
+          f: f
+        });
       }
-    };
-  }, [rootRef, plumeState]);
-  return {
-    plasmicProps: {
-      variants: variants,
-      args: args,
-      overrides: overrides
-    },
-    state: plumeState
-  };
-}
+    }
+  })).current; // For each spec with an initFunc, evaluate it and see if
+  // the init value has changed. If so, reset its state.
 
-function useMenuGroup(plasmicClass, props, config) {
-  var _extends2, _overrides;
+  var resetSpecs = [];
+  $$state.existingStates.forEach(function (_ref4) {
+    var path = _ref4.path,
+        specKey = _ref4.specKey;
+    var spec = $$state.specsByKey[specKey];
 
-  var context = useContext(MenuContext);
-  var node = props._node;
+    if (spec.initFunc) {
+      var newInit = spec.initFunc(props, $state, getIndexes(path, spec));
 
-  if (!context || !node) {
-    if (PLUME_STRICT_MODE) {
-      throw new Error("You can only use a Menu.Group within a Menu component.");
+      if (!deepEqual(newInit, _get($$state.initStateValues, path))) {
+        resetSpecs.push({
+          path: path,
+          spec: spec
+        });
+      }
     }
+  });
+  React__default.useLayoutEffect(function () {
+    resetSpecs.forEach(function (_ref5) {
+      var path = _ref5.path,
+          spec = _ref5.spec;
+      var newInit = initializeStateValue($$state, path, spec);
 
-    return getDefaultPlasmicProps(plasmicClass, props);
-  }
+      if (spec.onChangeProp) {
+        var _$$state$props$spec$o4, _$$state$props4;
 
-  var _useMenuSection = useMenuSection({
-    heading: props.title,
-    "aria-label": props["aria-label"]
-  }),
-      headingProps = _useMenuSection.headingProps,
-      groupProps = _useMenuSection.groupProps;
+        (_$$state$props$spec$o4 = (_$$state$props4 = $$state.props)[spec.onChangeProp]) == null ? void 0 : _$$state$props$spec$o4.call(_$$state$props4, newInit, path);
+      }
+    });
+  }, [props, resetSpecs]);
+  React__default.useLayoutEffect(function () {
+    $$state.registrationsQueue.forEach(function (_ref6) {
+      var f = _ref6.f,
+          pathStr = _ref6.pathStr;
+      $$state.specsByKey[pathStr].initFunc = f;
+    });
+    $$state.registrationsQueue = [];
+  }, [$$state.registrationsQueue]); // Re-render if any value changed in one of these objects
 
-  var _useSeparator = useSeparator({
-    elementType: "li"
-  }),
-      separatorProps = _useSeparator.separatorProps;
+  useSnapshot($$state.stateValues, {
+    sync: true
+  });
+  useSnapshot($$state.specsByKey, {
+    sync: true
+  });
+  return $state;
+}
 
-  var variants = _extends({}, pick.apply(void 0, [props].concat(plasmicClass.internalVariantProps)), mergeVariantToggles({
-    def: config.noTitleVariant,
-    active: !props.title
-  }, {
-    def: config.isFirstVariant,
-    active: context.state.collection.getFirstKey() === node.key
-  }));
+function useCanvasDollarState(specs, props) {
+  var $$state = proxy({
+    stateValues: {},
+    initStateValues: {},
+    specsByKey: Object.fromEntries(specs.map(function (spec) {
+      return [spec.path, _extends({}, spec, {
+        pathObj: transformPathStringToObj(spec.path),
+        isRepeated: spec.path.split(".").some(function (part) {
+          return part.endsWith("[]");
+        })
+      })];
+    })),
+    statesInstanceBySpec: new Map(),
+    existingStates: new Map(),
+    unsubscriptionsByState: {},
+    props: undefined,
+    registrationsQueue: []
+  });
+  $$state.props = mkUntrackedValue(props);
+  var $state = create$StateProxy($$state, function (path, spec) {
+    return {
+      get: function get() {
+        return _get($$state.stateValues, path);
+      },
+      set: function set$1(_t, _p, value) {
+        set($$state.stateValues, path, mkUntrackedValue(value));
 
-  var args = _extends({}, pick.apply(void 0, [props].concat(plasmicClass.internalArgProps)), (_extends2 = {}, _extends2[config.titleSlot] = props.title, _extends2[config.itemsSlot] = Array.from(node.childNodes).map(function (childNode) {
-    return renderCollectionNode(childNode);
-  }), _extends2));
+        if (spec.onChangeProp) {
+          var _$$state$props$spec$o5, _$$state$props5;
 
-  var overrides = (_overrides = {}, _overrides[config.root] = {
-    props: getStyleProps(props)
-  }, _overrides[config.separator] = {
-    props: _extends({}, separatorProps),
-    as: "li"
-  }, _overrides[config.titleContainer] = _extends({
-    props: _extends({
-      role: "presentation"
-    }, headingProps)
-  }, !props.title && {
-    render: function render() {
-      return null;
-    }
-  }), _overrides[config.itemsContainer] = {
-    props: _extends({}, groupProps),
-    as: "ul"
-  }, _overrides);
+          (_$$state$props$spec$o5 = (_$$state$props5 = $$state.props)[spec.onChangeProp]) == null ? void 0 : _$$state$props$spec$o5.call(_$$state$props5, value, path);
+        }
+
+        return true;
+      }
+    };
+  });
+
+  for (var _iterator = _createForOfIteratorHelperLoose(specs), _step; !(_step = _iterator()).done;) {
+    var spec = _step.value;
+    var path = transformPathStringToObj(spec.path);
+    var init = spec.valueProp ? $$state.props[spec.valueProp] : spec.initVal ? spec.initVal : spec.initFunc ? initializeStateValue($$state, path, $$state.specsByKey[spec.path]) : undefined;
+
+    set($state, path, init);
+  }
+
+  return $state;
+}
+
+// Utilities used by generated code
+var classNames = classNames$1;
+
+var PLUME_STRICT_MODE = true;
+function setPlumeStrictMode(mode) {
+  PLUME_STRICT_MODE = mode;
+}
+function mergeVariantToggles() {
+  for (var _len = arguments.length, toggles = new Array(_len), _key = 0; _key < _len; _key++) {
+    toggles[_key] = arguments[_key];
+  }
+
+  var definedToggles = toggles.filter(function (x) {
+    return !!x.def;
+  });
+  var grouped = groupBy(definedToggles, function (_ref) {
+    var def = _ref.def;
+    return def.group;
+  });
+  return mapValues(grouped, function (subToggles) {
+    return Object.fromEntries(subToggles.map(function (_ref2) {
+      var def = _ref2.def,
+          active = _ref2.active;
+      return [def.variant, !!active];
+    }));
+  });
+}
+function noOutline() {
   return {
-    plasmicProps: {
-      variants: variants,
-      args: args,
-      overrides: overrides
-    }
+    outline: "none"
   };
 }
+function getPlumeType(child) {
+  if (!isValidElement(child)) {
+    return undefined;
+  }
 
-function useMenuItem(plasmicClass, props, config) {
-  var _extends2, _overrides;
-
-  var menuContext = useContext(MenuContext);
-  var triggerContext = useContext(TriggeredOverlayContext);
+  var childType = child.type;
+  return childType.__plumeType || (childType.getPlumeType == null ? void 0 : childType.getPlumeType(child.props));
+}
 
-  if (!menuContext) {
-    if (PLUME_STRICT_MODE) {
-      throw new Error("You can only use a Menu.Item within a Menu component.");
-    }
+var _excluded$4 = ["link", "isDisabled", "startIcon", "endIcon", "showStartIcon", "showEndIcon", "children"];
+function useButton(plasmicClass, props, config, ref) {
+  var _ref, _ref2, _extends2, _overrides;
 
-    return getDefaultPlasmicProps(plasmicClass, props);
+  if (ref === void 0) {
+    ref = null;
   }
 
-  var children = props.children,
-      onAction = props.onAction;
-  var state = menuContext.state,
-      menuProps = menuContext.menuProps; // We pass in the Node secretly as an undocumented prop from <Select />
-
-  var node = props._node;
-  var isDisabled = state.disabledKeys.has(node.key);
-  var isHighlighted = state.selectionManager.isFocused && state.selectionManager.focusedKey === node.key;
-  var ref = useRef(null);
+  var link = props.link,
+      isDisabled = props.isDisabled,
+      startIcon = props.startIcon,
+      endIcon = props.endIcon,
+      showStartIcon = props.showStartIcon,
+      showEndIcon = props.showEndIcon,
+      children = props.children,
+      rest = _objectWithoutPropertiesLoose(props, _excluded$4);
 
-  var _useAriaMenuItem = useMenuItem$1(mergeProps({
-    // We need to merge both the onAction on MenuItem and the onAction
-    // on Menu
-    onAction: onAction
+  var variants = _extends({}, pick.apply(void 0, [props].concat(plasmicClass.internalVariantProps)), mergeVariantToggles({
+    def: config.showStartIconVariant,
+    active: showStartIcon
   }, {
-    onAction: menuProps.onAction,
-    onClose: triggerContext == null ? void 0 : triggerContext.state.close
+    def: config.showEndIconVariant,
+    active: showEndIcon
   }, {
-    isDisabled: isDisabled,
-    "aria-label": node && node["aria-label"],
-    key: node.key,
-    isVirtualized: false,
-    closeOnSelect: true
-  }), state, ref),
-      menuItemProps = _useAriaMenuItem.menuItemProps,
-      labelProps = _useAriaMenuItem.labelProps;
-
-  var variants = _extends({}, pick.apply(void 0, [props].concat(plasmicClass.internalVariantProps)), mergeVariantToggles({
     def: config.isDisabledVariant,
     active: isDisabled
-  }, {
-    def: config.isHighlightedVariant,
-    active: isHighlighted
   }));
 
-  var args = _extends({}, pick.apply(void 0, [props].concat(plasmicClass.internalArgProps)), (_extends2 = {}, _extends2[config.labelSlot] = children, _extends2));
+  var args = _extends({}, pick.apply(void 0, [props].concat(plasmicClass.internalArgProps)), config.startIconSlot && (_ref = {}, _ref[config.startIconSlot] = startIcon, _ref), config.endIconSlot && (_ref2 = {}, _ref2[config.endIconSlot] = endIcon, _ref2), (_extends2 = {}, _extends2[config.contentSlot] = children, _extends2));
 
   var overrides = (_overrides = {}, _overrides[config.root] = {
-    as: "li",
-    props: mergeProps(menuItemProps, {
+    as: !!link ? "a" : "button",
+    props: _extends({}, omit.apply(void 0, [rest].concat(plasmicClass.internalArgProps, plasmicClass.internalVariantProps)), {
       ref: ref,
-      style: noOutline()
+      disabled: isDisabled
+    }, !!link && {
+      href: link
     })
-  }, _overrides[config.labelContainer] = {
-    props: _extends({}, labelProps)
   }, _overrides);
   return {
     plasmicProps: {
@@ -2337,294 +2261,354 @@ function useMenuItem(plasmicClass, props, config) {
   };
 }
 
-/**
- * A menu trigger hook that combines react-aria's useMenuTrigger, useAriaMenuTrigger,
- * useOverlayPosition, useOverlay, and usePress
- */
+function getStyleProps(props) {
+  return pick(props, "className", "style");
+}
+function getDefaultPlasmicProps(plasmicClass, props) {
+  return {
+    plasmicProps: {
+      variants: pick.apply(void 0, [props].concat(plasmicClass.internalVariantProps)),
+      args: pick.apply(void 0, [props].concat(plasmicClass.internalArgProps)),
+      overrides: {}
+    }
+  };
+}
+var RE_DATA_PROP = /^(data-.*)$/;
+function getDataProps(props) {
+  return pickBy(props, function (k) {
+    return RE_DATA_PROP.test(k);
+  });
+}
 
-function useMenuTrigger(opts, state) {
-  var triggerRef = opts.triggerRef,
-      isDisabled = opts.isDisabled,
-      placement = opts.placement,
-      menuMatchTriggerWidth = opts.menuMatchTriggerWidth,
-      menuWidth = opts.menuWidth,
-      menu = opts.menu;
+function asAriaCheckboxProps(props) {
+  var ariaProps = _extends({}, props, {
+    isSelected: props.isChecked,
+    defaultSelected: props.defaultChecked
+  });
 
-  var _useAriaMenuTrigger = useMenuTrigger$1({
-    type: "menu",
-    isDisabled: isDisabled
-  }, state, triggerRef),
-      triggerPressProps = _useAriaMenuTrigger.menuTriggerProps,
-      menuProps = _useAriaMenuTrigger.menuProps;
+  delete ariaProps["isChecked"];
+  delete ariaProps["defaultChecked"];
+  return ariaProps;
+}
 
-  var _usePress = usePress(_extends({}, triggerPressProps, {
-    isDisabled: isDisabled
-  })),
-      triggerProps = _usePress.pressProps;
-
-  var makeMenu = function makeMenu() {
-    var realMenu = typeof menu === "function" ? menu() : menu;
-
-    if (!realMenu) {
-      return null;
-    }
-
-    if (getPlumeType(realMenu) !== "menu") {
-      if (PLUME_STRICT_MODE) {
-        throw new Error("Must use an instance of the Menu component.");
-      }
-
-      return null;
-    }
-
-    return cloneElement(realMenu, mergeProps(realMenu.props, menuProps));
-  };
-
-  var triggerContext = useMemo(function () {
-    var _state$focusStrategy;
-
-    return {
-      triggerRef: triggerRef,
-      state: state,
-      autoFocus: (_state$focusStrategy = state.focusStrategy) != null ? _state$focusStrategy : true,
-      placement: placement,
-      overlayMatchTriggerWidth: menuMatchTriggerWidth,
-      overlayMinTriggerWidth: true,
-      overlayWidth: menuWidth
-    };
-  }, [triggerRef, state, placement, menuMatchTriggerWidth, menuWidth]);
-  return {
-    triggerProps: triggerProps,
-    makeMenu: makeMenu,
-    triggerContext: triggerContext
-  };
-}
-
-function DropdownMenu(props) {
-  var isOpen = props.isOpen,
-      defaultOpen = props.defaultOpen,
-      onOpenChange = props.onOpenChange,
-      children = props.children,
-      placement = props.placement,
-      menu = props.menu;
-  var triggerRef = useRef(null);
-  var state = useMenuTriggerState({
-    isOpen: isOpen,
-    defaultOpen: defaultOpen,
-    onOpenChange: onOpenChange,
-    shouldFlip: true
-  });
-
-  var _useMenuTrigger = useMenuTrigger({
-    triggerRef: triggerRef,
-    placement: placement,
-    menu: menu
-  }, state),
-      triggerProps = _useMenuTrigger.triggerProps,
-      makeMenu = _useMenuTrigger.makeMenu,
-      triggerContext = _useMenuTrigger.triggerContext;
-
-  return createElement(TriggeredOverlayContext.Provider, {
-    value: triggerContext
-  }, cloneElement(children, mergeProps(children.props, triggerProps, {
-    ref: triggerRef
-  })), state.isOpen && makeMenu());
-}
-
-function useMenuButton(plasmicClass, props, config, outerRef) {
-  var _extends2, _overrides;
+function useCheckbox(plasmicClass, props, config, ref) {
+  var _overrides, _ref;
 
-  if (outerRef === void 0) {
-    outerRef = null;
+  if (ref === void 0) {
+    ref = null;
   }
 
-  var placement = props.placement,
-      isOpen = props.isOpen,
-      defaultOpen = props.defaultOpen,
-      onOpenChange = props.onOpenChange,
+  var children = props.children,
       isDisabled = props.isDisabled,
-      menu = props.menu,
-      autoFocus = props.autoFocus,
-      menuMatchTriggerWidth = props.menuMatchTriggerWidth,
-      menuWidth = props.menuWidth;
+      isIndeterminate = props.isIndeterminate;
   useEnsureSSRProvider();
+  var inputRef = useRef(null);
   var rootRef = useRef(null);
-  var triggerRef = useRef(null);
-  var state = useMenuTriggerState({
-    isOpen: isOpen,
-    defaultOpen: defaultOpen,
-    onOpenChange: onOpenChange,
-    shouldFlip: true
-  });
-
-  var _useMenuTrigger = useMenuTrigger({
-    isDisabled: isDisabled,
-    triggerRef: triggerRef,
-    placement: placement,
-    menuMatchTriggerWidth: menuMatchTriggerWidth,
-    menuWidth: menuWidth,
-    menu: menu
-  }, state),
-      triggerProps = _useMenuTrigger.triggerProps,
-      makeMenu = _useMenuTrigger.makeMenu,
-      triggerContext = _useMenuTrigger.triggerContext;
+  var ariaProps = asAriaCheckboxProps(props);
+  var state = useToggleState(ariaProps);
 
-  var _useFocusable = useFocusable(props, triggerRef),
-      triggerFocusProps = _useFocusable.focusableProps;
+  var _useAriaCheckbox = useCheckbox$1(ariaProps, state, inputRef),
+      inputProps = _useAriaCheckbox.inputProps;
 
   var variants = _extends({}, pick.apply(void 0, [props].concat(plasmicClass.internalVariantProps)), mergeVariantToggles({
-    def: config.isOpenVariant,
-    active: state.isOpen
-  }, {
     def: config.isDisabledVariant,
     active: isDisabled
+  }, {
+    def: config.isCheckedVariant,
+    active: state.isSelected
+  }, {
+    def: config.isIndeterminateVariant,
+    active: isIndeterminate
+  }, {
+    def: config.noLabelVariant,
+    active: !children
   }));
 
-  var args = _extends({}, pick.apply(void 0, [props].concat(plasmicClass.internalArgProps)), (_extends2 = {}, _extends2[config.menuSlot] = state.isOpen ? makeMenu() : undefined, _extends2));
-
   var overrides = (_overrides = {}, _overrides[config.root] = {
-    wrapChildren: function wrapChildren(children) {
-      return createElement(TriggeredOverlayContext.Provider, {
-        value: triggerContext
-      }, children);
-    },
-    props: {
+    as: "label",
+    props: mergeProps(getStyleProps(props), {
       ref: rootRef
+    }),
+    wrapChildren: function wrapChildren(children) {
+      return createElement(Fragment, null, createElement(VisuallyHidden, null, createElement("input", Object.assign({}, inputProps, {
+        ref: inputRef
+      }))), children);
     }
-  }, _overrides[config.trigger] = {
-    props: mergeProps(triggerProps, triggerFocusProps, getStyleProps(props), pick(props, "title"), {
-      ref: triggerRef,
-      autoFocus: autoFocus,
-      disabled: !!isDisabled,
-      // Make sure this button is not interpreted as submit
-      type: "button"
-    })
   }, _overrides);
+
+  var args = _extends({}, pick.apply(void 0, [props].concat(plasmicClass.internalArgProps)), config.labelSlot ? (_ref = {}, _ref[config.labelSlot] = children, _ref) : {});
+
   var plumeState = useMemo(function () {
     return {
-      open: function open() {
-        return state.open();
-      },
-      close: function close() {
-        return state.close();
-      },
-      isOpen: function isOpen() {
-        return state.isOpen;
+      setChecked: function setChecked(checked) {
+        return state.setSelected(checked);
       }
     };
   }, [state]);
-  useImperativeHandle(outerRef, function () {
+  useImperativeHandle(ref, function () {
     return {
       getRoot: function getRoot() {
         return rootRef.current;
       },
-      getTrigger: function getTrigger() {
-        return triggerRef.current;
-      },
       focus: function focus() {
-        return triggerRef.current && triggerRef.current.focus();
+        var _inputRef$current;
+
+        return (_inputRef$current = inputRef.current) == null ? void 0 : _inputRef$current.focus();
       },
       blur: function blur() {
-        return triggerRef.current && triggerRef.current.blur();
+        var _inputRef$current2;
+
+        return (_inputRef$current2 = inputRef.current) == null ? void 0 : _inputRef$current2.blur();
       },
-      open: plumeState.open,
-      close: plumeState.close,
-      isOpen: plumeState.isOpen
+      setChecked: function setChecked(checked) {
+        return plumeState.setChecked(checked);
+      }
     };
-  }, [rootRef, triggerRef, plumeState]);
+  }, [rootRef, inputRef, plumeState]);
   return {
     plasmicProps: {
       variants: variants,
-      args: args,
-      overrides: overrides
+      overrides: overrides,
+      args: args
     },
     state: plumeState
   };
 }
 
-var SelectContext = /*#__PURE__*/createContext(undefined);
-
-var _excluded$6 = ["value", "defaultValue", "children", "onChange", "placement", "menuMatchTriggerWidth", "menuWidth"];
-var COLLECTION_OPTS$1 = {
-  itemPlumeType: "select-option",
-  sectionPlumeType: "select-option-group"
-};
 /**
- * Converts props in our BaseSelectProps into props that react-aria's
- * useSelect() understands.
- *
- * Because we're not exposing the Collections API (see ./index.tsx),
- * we are converting our own API into props for useSelect.
- *
- * Specifically, in Plume's API,
- * - `children` flattens to a list of ReactElements of type Select.Option
- *   or Select.OptionGroup
- *
- * and we map it this way to the Collections API:
- * - `items` is a list of those flattened ReactElements from `children`!
- * - `children`, as a render prop, is supposed to take one of the `items`
- *   and return a `Section` or `Item` element. We take an Option/OptionGroup
- *   element, and use its props to render the appropriate `Section` or
- *   `Item`. The "trick" here is that we then stuff the Option element as
- *   `Item.children`, and the OptionGroup element as `Section.title`.
- *
- * When the Collections API does its work deriving `Node`s, the corresponding
- * Option/OptionGroup ReactElements will end up as `Node.rendered`.
- *
- * Then, when we are actually rendering the content of the dropdown, we
- * iterate through each collected `Node`, and renders
- * React.cloneElement(Node.rendered, {_node: node}).  This "secretly" passes
- * the derived collection `Node` as a prop to Option and OptionGroup, and they
- * can make use of the derived `Node.key` etc in their rendering functions.
+ * Given children of a component like Select or Menu, derive the items
+ * that we will pass into the Collections API.  These will be
+ * ReactElement<ItemLikeProps|SectionLikeProps>[].
  *
- * One thing to note here is that we never "rendered" the Option/OptionGroup
- * React elements that the user constructed; instead, we just looked at the
- * props used on those elements, and passed those onto the Collections API.
- * What gets rendered to the screen is the cloned version of these elements
- * with the secret derived `_node` prop.  That means Option and OptionGroup
- * render functions can assume that _node is passed in.
+ * Will also assign keys to items by their index in the collection,
+ * and collect the keys of disabled items.
  */
 
-function useAriaSelectProps(props) {
-  var value = props.value,
-      defaultValue = props.defaultValue,
-      children = props.children,
-      onChange = props.onChange,
-      rest = _objectWithoutPropertiesLoose(props, _excluded$6);
+function deriveItemsFromChildren(children, opts) {
+  if (!children) {
+    return {
+      items: [],
+      disabledKeys: []
+    };
+  }
 
-  var _useDerivedItemsFromC = useDerivedItemsFromChildren(children, _extends({}, COLLECTION_OPTS$1, {
-    invalidChildError: "Can only use Select.Option and Select.OptionGroup as children to Select",
-    requireItemValue: true
-  })),
-      items = _useDerivedItemsFromC.items,
-      disabledKeys = _useDerivedItemsFromC.disabledKeys;
+  var itemPlumeType = opts.itemPlumeType,
+      sectionPlumeType = opts.sectionPlumeType,
+      invalidChildError = opts.invalidChildError; // For Plume items without an explicit key, we assign a key as the index
+  // of the collection.
 
-  var collectionChildRenderer = useCallback(function (child) {
-    return renderAsCollectionChild(child, COLLECTION_OPTS$1);
-  }, []);
-  var onSelectionChange = useMemo(function () {
-    if (onChange) {
-      return function (val) {
-        return onChange(val == null || val === "null" ? null : val);
-      };
+  var itemCount = 0;
+  var sectionCount = 0;
+
+  var ensureValue = function ensureValue(element) {
+    if (!propInChild(element, "value")) {
+      if (opts.requireItemValue && PLUME_STRICT_MODE) {
+        throw new Error("Must specify a \"value\" prop for " + getElementTypeName(element));
+      } else {
+        return cloneChild(element, {
+          value: "" + itemCount++
+        });
+      }
     } else {
-      return undefined;
+      // Still increment count even if key is present, so that the
+      // auto-assigned key really reflects the index
+      itemCount++;
+      return element;
     }
-  }, [onChange]);
+  };
+
+  var disabledKeys = [];
+
+  var flattenedChildren = function flattenedChildren(children) {
+    return toChildArray(children).flatMap(function (child) {
+      if (React__default.isValidElement(child)) {
+        if (child.type === React__default.Fragment) {
+          return flattenedChildren(child.props.children);
+        }
+
+        var type = getPlumeType(child);
+
+        if (type === itemPlumeType) {
+          child = ensureValue(child);
+          var childKey = getItemLikeKey(child);
+
+          if (getChildProp(child, "isDisabled") && !!childKey) {
+            disabledKeys.push(childKey);
+          }
+
+          return [child];
+        }
+
+        if (type === sectionPlumeType) {
+          var _child$key;
+
+          return [cloneChild(child, {
+            // key of section doesn't actually matter, just needs
+            // to be unique
+            key: (_child$key = child.key) != null ? _child$key : "section-" + sectionCount++,
+            children: flattenedChildren(getChildProp(child, "children"))
+          })];
+        }
+      }
+
+      if (PLUME_STRICT_MODE) {
+        throw new Error(invalidChildError != null ? invalidChildError : "Unexpected child");
+      } else {
+        return [];
+      }
+    });
+  };
+
+  return {
+    items: flattenedChildren(children),
+    disabledKeys: disabledKeys
+  };
+}
+function useDerivedItemsFromChildren(children, opts) {
+  var itemPlumeType = opts.itemPlumeType,
+      sectionPlumeType = opts.sectionPlumeType,
+      invalidChildError = opts.invalidChildError,
+      requireItemValue = opts.requireItemValue;
+  return React__default.useMemo(function () {
+    return deriveItemsFromChildren(children, {
+      itemPlumeType: itemPlumeType,
+      sectionPlumeType: sectionPlumeType,
+      invalidChildError: invalidChildError,
+      requireItemValue: requireItemValue
+    });
+  }, [children, itemPlumeType, sectionPlumeType, invalidChildError, requireItemValue]);
+}
+/**
+ * Given a Collection node, create the React element that we should use
+ * to render it.
+ */
+
+function renderCollectionNode(node) {
+  // node.rendered should already have our item-like or section-like Plume
+  // component elements, so we just need to clone them with a secret
+  // _node prop that we use to render.
+  return cloneChild(node.rendered, {
+    _node: node,
+    key: node.key
+  });
+}
+/**
+ * Renders a item-like or section-like Plume component element into an
+ * Item or a Section element.
+ */
+
+function renderAsCollectionChild(child, opts) {
+  var plumeType = getPlumeType(child);
+
+  if (plumeType === opts.itemPlumeType) {
+    var _getChildProp;
+
+    var option = child; // We look at the children passed to the item-like element, and derive key
+    // or textValue from it if it is a string
+
+    var content = getChildProp(option, "children"); // The children render prop needs to return an <Item/>
+
+    return React__default.createElement(Item // We use ItemLike.value if the user explicitly specified a value,
+    // and we fallback to key.  If the user specified neither, then
+    // the Collections API will generate a unique key for this item.
+    , {
+      // We use ItemLike.value if the user explicitly specified a value,
+      // and we fallback to key.  If the user specified neither, then
+      // the Collections API will generate a unique key for this item.
+      key: getItemLikeKey(option),
+      // textValue is either explicitly specified by the user, or we
+      // try to derive it if `content` is a string.
+      textValue: (_getChildProp = getChildProp(option, "textValue")) != null ? _getChildProp : isString(content) ? content : propInChild(option, "value") ? getChildProp(option, "value") : option.key,
+      "aria-label": getChildProp(option, "aria-label")
+    }, option);
+  } else {
+    var group = child;
+    return React__default.createElement(Section // Note that we are using the whole section-like element as the title
+    // here, and not group.props.title; we want the entire section-like
+    // Plume element to end up as Node.rendered.
+    , {
+      // Note that we are using the whole section-like element as the title
+      // here, and not group.props.title; we want the entire section-like
+      // Plume element to end up as Node.rendered.
+      title: group,
+      "aria-label": getChildProp(group, "aria-label"),
+      // We are flattening and deriving the descendant Options as items here.
+      // group.props.children should've already been cleaned up by
+      // deriveItemsFromChildren()
+      items: getChildProp(group, "children")
+    }, function (c) {
+      return renderAsCollectionChild(c, opts);
+    });
+  }
+}
+
+function getItemLikeKey(element) {
+  var _getChildProp2;
+
+  return (_getChildProp2 = getChildProp(element, "value")) != null ? _getChildProp2 : element.key;
+} // PlasmicLoader-aware function to get prop from child.
+
+
+function getChildProp(child, prop) {
+  return "componentProps" in child.props ? child.props.componentProps[prop] : child.props[prop];
+} // PlasmicLoader-aware function to check `if (prop in element.props)`.
+
+function propInChild(child, prop) {
+  return "componentProps" in child.props ? prop in child.props.componentProps : prop in child.props;
+} // PlasmicLoader-aware function to clone React element.
+
+
+function cloneChild(child, props) {
+  if (child.type.getPlumeType) {
+    // If React element has getPlumeType(), assume that it is PlasmicLoader,
+    // so add nodeProps to componentProps instead of element props.
+    return React__default.cloneElement(child, _extends({
+      componentProps: _extends({}, child.props.componentProps, props)
+    }, props.key ? {
+      key: props.key
+    } : {}));
+  }
+
+  return React__default.cloneElement(child, props);
+}
+
+var TriggeredOverlayContext = /*#__PURE__*/createContext(undefined);
+
+var MenuContext = /*#__PURE__*/createContext(undefined);
+
+var _excluded$5 = ["children"];
+var COLLECTION_OPTS = {
+  itemPlumeType: "menu-item",
+  sectionPlumeType: "menu-group"
+};
+/**
+ * Converts props from BaseMenuProps to react-aria's useMenu() props.
+ */
+
+function asAriaMenuProps(props) {
+  var children = props.children,
+      rest = _objectWithoutPropertiesLoose(props, _excluded$5);
+
+  var _useDerivedItemsFromC = useDerivedItemsFromChildren(children, _extends({}, COLLECTION_OPTS, {
+    invalidChildError: "Can only use Menu.Item and Menu.Group as children to Menu",
+    requireItemValue: false
+  })),
+      items = _useDerivedItemsFromC.items,
+      disabledKeys = _useDerivedItemsFromC.disabledKeys;
+
+  var collectionChildRenderer = useCallback(function (child) {
+    return renderAsCollectionChild(child, COLLECTION_OPTS);
+  }, []);
   return {
     ariaProps: _extends({}, rest, {
       children: collectionChildRenderer,
-      onSelectionChange: onSelectionChange,
       items: items,
-      disabledKeys: disabledKeys,
-      defaultSelectedKey: defaultValue
-    }, "value" in props && {
-      selectedKey: value != null ? value : null
+      disabledKeys: disabledKeys
     })
   };
 }
 
-function useSelect(plasmicClass, props, config, ref) {
+function useMenu(plasmicClass, props, config, ref) {
   var _overrides, _extends2;
 
   if (ref === void 0) {
@@ -2633,110 +2617,53 @@ function useSelect(plasmicClass, props, config, ref) {
 
   useEnsureSSRProvider();
 
-  var _useAriaSelectProps = useAriaSelectProps(props),
-      ariaProps = _useAriaSelectProps.ariaProps;
+  var _asAriaMenuProps = asAriaMenuProps(props),
+      ariaProps = _asAriaMenuProps.ariaProps;
 
-  var placement = props.placement;
-  var state = useSelectState(ariaProps);
-  var triggerRef = useRef(null);
+  var triggerContext = useContext(TriggeredOverlayContext);
   var rootRef = useRef(null);
-  var isDisabled = props.isDisabled,
-      name = props.name,
-      menuWidth = props.menuWidth,
-      menuMatchTriggerWidth = props.menuMatchTriggerWidth,
-      autoFocus = props.autoFocus,
-      placeholder = props.placeholder,
-      selectedContent = props.selectedContent;
+  var state = useTreeState(ariaProps);
+  var menuListRef = useRef(null);
 
-  var _useAriaSelect = useSelect$1(ariaProps, state, triggerRef),
-      triggerPressProps = _useAriaSelect.triggerProps,
-      menuProps = _useAriaSelect.menuProps;
+  var _useAriaMenu = useMenu$1(_extends({}, ariaProps, {
+    autoFocus: triggerContext == null ? void 0 : triggerContext.autoFocus
+  }), state, menuListRef),
+      menuProps = _useAriaMenu.menuProps;
 
-  var _usePress = usePress(_extends({}, triggerPressProps, {
-    isDisabled: isDisabled
-  })),
-      triggerProps = _usePress.pressProps;
+  var contextValue = useMemo(function () {
+    return {
+      state: state,
+      menuProps: props
+    };
+  }, [state, props]);
 
-  var triggerContent = state.selectedItem ? selectedContent != null ? selectedContent : getChildProp(state.selectedItem.value, "children") : null;
+  var variants = _extends({}, pick.apply(void 0, [props].concat(plasmicClass.internalVariantProps)));
 
-  var variants = _extends({}, pick.apply(void 0, [props].concat(plasmicClass.internalVariantProps)), mergeVariantToggles({
-    def: config.isOpenVariant,
-    active: state.isOpen
-  }, {
-    def: config.placeholderVariant,
-    active: !state.selectedItem
-  }, {
-    def: config.isDisabledVariant,
-    active: isDisabled
-  }));
-
-  var triggerContext = useMemo(function () {
-    return {
-      triggerRef: triggerRef,
-      state: state,
-      placement: placement,
-      overlayMatchTriggerWidth: menuMatchTriggerWidth,
-      overlayMinTriggerWidth: true,
-      overlayWidth: menuWidth
-    };
-  }, [triggerRef, state, placement, menuMatchTriggerWidth, menuWidth]);
   var overrides = (_overrides = {}, _overrides[config.root] = {
     props: mergeProps(getStyleProps(props), {
       ref: rootRef
-    }),
-    wrapChildren: function wrapChildren(children) {
-      return createElement(Fragment, null, createElement(HiddenSelect, {
-        state: state,
-        triggerRef: triggerRef,
-        name: name,
-        isDisabled: isDisabled
-      }), children);
-    }
-  }, _overrides[config.trigger] = {
-    props: mergeProps(triggerProps, {
-      ref: triggerRef,
-      autoFocus: autoFocus,
-      disabled: !!isDisabled,
-      // Don't trigger form submission!
-      type: "button"
     })
-  }, _overrides[config.overlay] = {
-    wrap: function wrap(content) {
-      return createElement(TriggeredOverlayContext.Provider, {
-        value: triggerContext
-      }, content);
-    }
-  }, _overrides[config.optionsContainer] = {
-    wrap: function wrap(content) {
-      return createElement(ListBoxWrapper, {
-        state: state,
-        menuProps: menuProps
-      }, content);
-    }
+  }, _overrides[config.itemsContainer] = {
+    as: "ul",
+    props: mergeProps(menuProps, {
+      ref: menuListRef,
+      style: _extends({}, noOutline())
+    })
   }, _overrides);
 
-  var args = _extends({}, pick.apply(void 0, [props].concat(plasmicClass.internalArgProps)), (_extends2 = {}, _extends2[config.triggerContentSlot] = triggerContent, _extends2[config.placeholderSlot] = placeholder, _extends2[config.optionsSlot] = createElement(SelectContext.Provider, {
-    value: state
+  var args = _extends({}, pick.apply(void 0, [props].concat(plasmicClass.internalArgProps)), (_extends2 = {}, _extends2[config.itemsSlot] = createElement(MenuContext.Provider, {
+    value: contextValue
   }, Array.from(state.collection).map(function (node) {
     return renderCollectionNode(node);
   })), _extends2));
 
   var plumeState = useMemo(function () {
     return {
-      open: function open() {
-        return state.open();
-      },
-      close: function close() {
-        return state.close();
-      },
-      isOpen: function isOpen() {
-        return state.isOpen;
-      },
-      getSelectedValue: function getSelectedValue() {
-        return state.selectedKey ? "" + state.selectedKey : null;
+      getFocusedValue: function getFocusedValue() {
+        return state.selectionManager.focusedKey;
       },
-      setSelectedValue: function setSelectedValue(key) {
-        return state.setSelectedKey(key);
+      setFocusedValue: function setFocusedValue(value) {
+        return state.selectionManager.setFocusedKey(value);
       }
     };
   }, [state]);
@@ -2745,36 +2672,14 @@ function useSelect(plasmicClass, props, config, ref) {
       getRoot: function getRoot() {
         return rootRef.current;
       },
-      getTrigger: function getTrigger() {
-        return triggerRef.current;
-      },
-      focus: function focus() {
-        var _triggerRef$current;
-
-        return (_triggerRef$current = triggerRef.current) == null ? void 0 : _triggerRef$current.focus();
-      },
-      blur: function blur() {
-        var _triggerRef$current2;
-
-        return (_triggerRef$current2 = triggerRef.current) == null ? void 0 : _triggerRef$current2.blur();
-      },
-      open: function open() {
-        return plumeState.open();
-      },
-      close: function close() {
-        return plumeState.close();
-      },
-      isOpen: function isOpen() {
-        return plumeState.isOpen();
-      },
-      getSelectedValue: function getSelectedValue() {
-        return plumeState.getSelectedValue();
+      getFocusedValue: function getFocusedValue() {
+        return plumeState.getFocusedValue();
       },
-      setSelectedValue: function setSelectedValue(key) {
-        return plumeState.setSelectedValue(key);
+      setFocusedValue: function setFocusedValue(key) {
+        return plumeState.setFocusedValue(key);
       }
     };
-  }, [rootRef, triggerRef, plumeState]);
+  }, [rootRef, plumeState]);
   return {
     plasmicProps: {
       variants: variants,
@@ -2785,118 +2690,26 @@ function useSelect(plasmicClass, props, config, ref) {
   };
 }
 
-function ListBoxWrapper(props) {
-  var state = props.state,
-      menuProps = props.menuProps,
-      children = props.children;
-  var ref = useRef(null);
-
-  var _useListBox = useListBox(_extends({}, menuProps, {
-    isVirtualized: false,
-    autoFocus: state.focusStrategy || true,
-    disallowEmptySelection: true
-  }), state, ref),
-      listBoxProps = _useListBox.listBoxProps;
-
-  return cloneElement(children, mergeProps(children.props, listBoxProps, {
-    style: noOutline(),
-    ref: ref
-  }));
-}
-
-function useSelectOption(plasmicClass, props, config, outerRef) {
-  var _extends2, _overrides;
-
-  if (outerRef === void 0) {
-    outerRef = null;
-  }
-
-  var state = useContext(SelectContext);
-
-  if (!state) {
-    // If no context, then we are being incorrectly used.  Complain or just don't
-    // bother installing any hooks.  It's okay to violate rules of hooks here
-    // because this instance won't suddenly be used correctly in another render.
-    if (PLUME_STRICT_MODE) {
-      throw new Error("You can only use a Select.Option within a Select component.");
-    }
-
-    return getDefaultPlasmicProps(plasmicClass, props);
-  }
-
-  var children = props.children;
-  var rootRef = useRef(null);
-  var onRef = mergeRefs(rootRef, outerRef); // We pass in the Node secretly as an undocumented prop from <Select />
-
-  var node = props._node;
-  var isSelected = state.selectionManager.isSelected(node.key);
-  var isDisabled = state.disabledKeys.has(node.key);
-  var isHighlighted = state.selectionManager.isFocused && state.selectionManager.focusedKey === node.key;
-
-  var _useAriaOption = useOption({
-    isSelected: isSelected,
-    isDisabled: isDisabled,
-    "aria-label": node && node["aria-label"],
-    key: node.key,
-    shouldSelectOnPressUp: true,
-    shouldFocusOnHover: true,
-    isVirtualized: false
-  }, state, rootRef),
-      optionProps = _useAriaOption.optionProps,
-      labelProps = _useAriaOption.labelProps;
-
-  var variants = _extends({}, pick.apply(void 0, [props].concat(plasmicClass.internalVariantProps)), mergeVariantToggles({
-    def: config.isSelectedVariant,
-    active: isSelected
-  }, {
-    def: config.isDisabledVariant,
-    active: isDisabled
-  }, {
-    def: config.isHighlightedVariant,
-    active: isHighlighted
-  }));
-
-  var args = _extends({}, pick.apply(void 0, [props].concat(plasmicClass.internalArgProps)), (_extends2 = {}, _extends2[config.labelSlot] = children, _extends2));
-
-  var overrides = (_overrides = {}, _overrides[config.root] = {
-    props: mergeProps(optionProps, getStyleProps(props), {
-      ref: onRef,
-      style: noOutline()
-    })
-  }, _overrides[config.labelContainer] = {
-    props: labelProps
-  }, _overrides);
-  return {
-    plasmicProps: {
-      variants: variants,
-      args: args,
-      overrides: overrides
-    }
-  };
-}
-
-function useSelectOptionGroup(plasmicClass, props, config) {
+function useMenuGroup(plasmicClass, props, config) {
   var _extends2, _overrides;
 
-  var state = useContext(SelectContext); // `node` should exist if the OptionGroup was instantiated properly
-  // within a Select
-
+  var context = useContext(MenuContext);
   var node = props._node;
 
-  if (!state || !node) {
+  if (!context || !node) {
     if (PLUME_STRICT_MODE) {
-      throw new Error("You can only use a Select.OptionGroup within a Select component.");
+      throw new Error("You can only use a Menu.Group within a Menu component.");
     }
 
     return getDefaultPlasmicProps(plasmicClass, props);
   }
 
-  var _useListBoxSection = useListBoxSection({
+  var _useMenuSection = useMenuSection({
     heading: props.title,
     "aria-label": props["aria-label"]
   }),
-      headingProps = _useListBoxSection.headingProps,
-      groupProps = _useListBoxSection.groupProps;
+      headingProps = _useMenuSection.headingProps,
+      groupProps = _useMenuSection.groupProps;
 
   var _useSeparator = useSeparator({
     elementType: "li"
@@ -2908,17 +2721,18 @@ function useSelectOptionGroup(plasmicClass, props, config) {
     active: !props.title
   }, {
     def: config.isFirstVariant,
-    active: state.collection.getFirstKey() === node.key
+    active: context.state.collection.getFirstKey() === node.key
   }));
 
-  var args = _extends({}, pick.apply(void 0, [props].concat(plasmicClass.internalArgProps)), (_extends2 = {}, _extends2[config.titleSlot] = props.title, _extends2[config.optionsSlot] = Array.from(node.childNodes).map(function (childNode) {
+  var args = _extends({}, pick.apply(void 0, [props].concat(plasmicClass.internalArgProps)), (_extends2 = {}, _extends2[config.titleSlot] = props.title, _extends2[config.itemsSlot] = Array.from(node.childNodes).map(function (childNode) {
     return renderCollectionNode(childNode);
   }), _extends2));
 
   var overrides = (_overrides = {}, _overrides[config.root] = {
     props: getStyleProps(props)
   }, _overrides[config.separator] = {
-    props: _extends({}, separatorProps)
+    props: _extends({}, separatorProps),
+    as: "li"
   }, _overrides[config.titleContainer] = _extends({
     props: _extends({
       role: "presentation"
@@ -2927,8 +2741,9 @@ function useSelectOptionGroup(plasmicClass, props, config) {
     render: function render() {
       return null;
     }
-  }), _overrides[config.optionsContainer] = {
-    props: _extends({}, groupProps)
+  }), _overrides[config.itemsContainer] = {
+    props: _extends({}, groupProps),
+    as: "ul"
   }, _overrides);
   return {
     plasmicProps: {
@@ -2939,776 +2754,974 @@ function useSelectOptionGroup(plasmicClass, props, config) {
   };
 }
 
-function asAriaSwitchProps(props) {
-  var ariaProps = _extends({}, props, {
-    isSelected: props.isChecked,
-    defaultSelected: props.defaultChecked
-  });
+function useMenuItem(plasmicClass, props, config) {
+  var _extends2, _overrides;
 
-  delete ariaProps["isChecked"];
-  delete ariaProps["defaultChecked"];
-  return ariaProps;
-}
+  var menuContext = useContext(MenuContext);
+  var triggerContext = useContext(TriggeredOverlayContext);
 
-function useSwitch(plasmicClass, props, config, ref) {
-  var _overrides, _ref;
+  if (!menuContext) {
+    if (PLUME_STRICT_MODE) {
+      throw new Error("You can only use a Menu.Item within a Menu component.");
+    }
 
-  if (ref === void 0) {
-    ref = null;
+    return getDefaultPlasmicProps(plasmicClass, props);
   }
 
   var children = props.children,
-      isDisabled = props.isDisabled;
-  useEnsureSSRProvider();
-  var inputRef = useRef(null);
-  var rootRef = useRef(null);
-  var ariaProps = asAriaSwitchProps(props);
-  var state = useToggleState(ariaProps);
-
-  var _useAriaSwitch = useSwitch$1(ariaProps, state, inputRef),
-      inputProps = _useAriaSwitch.inputProps;
+      onAction = props.onAction;
+  var state = menuContext.state,
+      menuProps = menuContext.menuProps; // We pass in the Node secretly as an undocumented prop from <Select />
+
+  var node = props._node;
+  var isDisabled = state.disabledKeys.has(node.key);
+  var isHighlighted = state.selectionManager.isFocused && state.selectionManager.focusedKey === node.key;
+  var ref = useRef(null);
+
+  var _useAriaMenuItem = useMenuItem$1(mergeProps({
+    // We need to merge both the onAction on MenuItem and the onAction
+    // on Menu
+    onAction: onAction
+  }, {
+    onAction: menuProps.onAction,
+    onClose: triggerContext == null ? void 0 : triggerContext.state.close
+  }, {
+    isDisabled: isDisabled,
+    "aria-label": node && node["aria-label"],
+    key: node.key,
+    isVirtualized: false,
+    closeOnSelect: true
+  }), state, ref),
+      menuItemProps = _useAriaMenuItem.menuItemProps,
+      labelProps = _useAriaMenuItem.labelProps;
 
   var variants = _extends({}, pick.apply(void 0, [props].concat(plasmicClass.internalVariantProps)), mergeVariantToggles({
     def: config.isDisabledVariant,
     active: isDisabled
   }, {
-    def: config.isCheckedVariant,
-    active: state.isSelected
-  }, {
-    def: config.noLabelVariant,
-    active: !children
+    def: config.isHighlightedVariant,
+    active: isHighlighted
   }));
 
+  var args = _extends({}, pick.apply(void 0, [props].concat(plasmicClass.internalArgProps)), (_extends2 = {}, _extends2[config.labelSlot] = children, _extends2));
+
   var overrides = (_overrides = {}, _overrides[config.root] = {
-    as: "label",
-    props: mergeProps(getStyleProps(props), {
-      ref: rootRef
-    }),
-    wrapChildren: function wrapChildren(children) {
-      return createElement(Fragment, null, createElement(VisuallyHidden, {
-        isFocusable: true
-      }, createElement("input", Object.assign({}, inputProps, {
-        ref: inputRef
-      }))), children);
-    }
+    as: "li",
+    props: mergeProps(menuItemProps, {
+      ref: ref,
+      style: noOutline()
+    })
+  }, _overrides[config.labelContainer] = {
+    props: _extends({}, labelProps)
   }, _overrides);
+  return {
+    plasmicProps: {
+      variants: variants,
+      args: args,
+      overrides: overrides
+    }
+  };
+}
 
-  var args = _extends({}, pick.apply(void 0, [props].concat(plasmicClass.internalArgProps)), config.labelSlot ? (_ref = {}, _ref[config.labelSlot] = children, _ref) : {});
+/**
+ * A menu trigger hook that combines react-aria's useMenuTrigger, useAriaMenuTrigger,
+ * useOverlayPosition, useOverlay, and usePress
+ */
 
-  var plumeState = useMemo(function () {
-    return {
-      setChecked: function setChecked(checked) {
-        return state.setSelected(checked);
-      }
-    };
-  }, [state]);
-  useImperativeHandle(ref, function () {
-    return {
-      getRoot: function getRoot() {
-        return rootRef.current;
-      },
-      focus: function focus() {
-        var _inputRef$current;
+function useMenuTrigger(opts, state) {
+  var triggerRef = opts.triggerRef,
+      isDisabled = opts.isDisabled,
+      placement = opts.placement,
+      menuMatchTriggerWidth = opts.menuMatchTriggerWidth,
+      menuWidth = opts.menuWidth,
+      menu = opts.menu;
 
-        return (_inputRef$current = inputRef.current) == null ? void 0 : _inputRef$current.focus();
-      },
-      blur: function blur() {
-        var _inputRef$current2;
+  var _useAriaMenuTrigger = useMenuTrigger$1({
+    type: "menu",
+    isDisabled: isDisabled
+  }, state, triggerRef),
+      triggerPressProps = _useAriaMenuTrigger.menuTriggerProps,
+      menuProps = _useAriaMenuTrigger.menuProps;
 
-        return (_inputRef$current2 = inputRef.current) == null ? void 0 : _inputRef$current2.blur();
-      },
-      setChecked: function setChecked(checked) {
-        return plumeState.setChecked(checked);
+  var _usePress = usePress(_extends({}, triggerPressProps, {
+    isDisabled: isDisabled
+  })),
+      triggerProps = _usePress.pressProps;
+
+  var makeMenu = function makeMenu() {
+    var realMenu = typeof menu === "function" ? menu() : menu;
+
+    if (!realMenu) {
+      return null;
+    }
+
+    if (getPlumeType(realMenu) !== "menu") {
+      if (PLUME_STRICT_MODE) {
+        throw new Error("Must use an instance of the Menu component.");
       }
+
+      return null;
+    }
+
+    return cloneElement(realMenu, mergeProps(realMenu.props, menuProps));
+  };
+
+  var triggerContext = useMemo(function () {
+    var _state$focusStrategy;
+
+    return {
+      triggerRef: triggerRef,
+      state: state,
+      autoFocus: (_state$focusStrategy = state.focusStrategy) != null ? _state$focusStrategy : true,
+      placement: placement,
+      overlayMatchTriggerWidth: menuMatchTriggerWidth,
+      overlayMinTriggerWidth: true,
+      overlayWidth: menuWidth
     };
-  }, [rootRef, inputRef, plumeState]);
+  }, [triggerRef, state, placement, menuMatchTriggerWidth, menuWidth]);
   return {
-    plasmicProps: {
-      variants: variants,
-      overrides: overrides,
-      args: args
-    },
-    state: plumeState
+    triggerProps: triggerProps,
+    makeMenu: makeMenu,
+    triggerContext: triggerContext
   };
 }
 
-var _excluded$7 = ["isDisabled", "startIcon", "endIcon", "showStartIcon", "showEndIcon", "className", "style", "inputClassName", "inputStyle"];
-function useTextInput(plasmicClass, props, config, ref) {
-  var _ref, _ref2, _overrides;
+function DropdownMenu(props) {
+  var isOpen = props.isOpen,
+      defaultOpen = props.defaultOpen,
+      onOpenChange = props.onOpenChange,
+      children = props.children,
+      placement = props.placement,
+      menu = props.menu;
+  var triggerRef = useRef(null);
+  var state = useMenuTriggerState({
+    isOpen: isOpen,
+    defaultOpen: defaultOpen,
+    onOpenChange: onOpenChange,
+    shouldFlip: true
+  });
 
-  if (ref === void 0) {
-    ref = null;
-  }
+  var _useMenuTrigger = useMenuTrigger({
+    triggerRef: triggerRef,
+    placement: placement,
+    menu: menu
+  }, state),
+      triggerProps = _useMenuTrigger.triggerProps,
+      makeMenu = _useMenuTrigger.makeMenu,
+      triggerContext = _useMenuTrigger.triggerContext;
 
-  var isDisabled = props.isDisabled,
-      startIcon = props.startIcon,
-      endIcon = props.endIcon,
-      showStartIcon = props.showStartIcon,
-      showEndIcon = props.showEndIcon,
-      className = props.className,
-      style = props.style,
-      inputClassName = props.inputClassName,
-      inputStyle = props.inputStyle,
-      rest = _objectWithoutPropertiesLoose(props, _excluded$7);
+  return createElement(TriggeredOverlayContext.Provider, {
+    value: triggerContext
+  }, cloneElement(children, mergeProps(children.props, triggerProps, {
+    ref: triggerRef
+  })), state.isOpen && makeMenu());
+}
+
+function useMenuButton(plasmicClass, props, config, outerRef) {
+  var _extends2, _overrides;
+
+  if (outerRef === void 0) {
+    outerRef = null;
+  }
 
+  var placement = props.placement,
+      isOpen = props.isOpen,
+      defaultOpen = props.defaultOpen,
+      onOpenChange = props.onOpenChange,
+      isDisabled = props.isDisabled,
+      menu = props.menu,
+      autoFocus = props.autoFocus,
+      menuMatchTriggerWidth = props.menuMatchTriggerWidth,
+      menuWidth = props.menuWidth;
+  useEnsureSSRProvider();
   var rootRef = useRef(null);
-  var inputRef = useRef(null);
-  useImperativeHandle(ref, function () {
-    return {
-      focus: function focus() {
-        var _inputRef$current;
+  var triggerRef = useRef(null);
+  var state = useMenuTriggerState({
+    isOpen: isOpen,
+    defaultOpen: defaultOpen,
+    onOpenChange: onOpenChange,
+    shouldFlip: true
+  });
 
-        (_inputRef$current = inputRef.current) == null ? void 0 : _inputRef$current.focus();
-      },
-      blur: function blur() {
-        var _inputRef$current2;
+  var _useMenuTrigger = useMenuTrigger({
+    isDisabled: isDisabled,
+    triggerRef: triggerRef,
+    placement: placement,
+    menuMatchTriggerWidth: menuMatchTriggerWidth,
+    menuWidth: menuWidth,
+    menu: menu
+  }, state),
+      triggerProps = _useMenuTrigger.triggerProps,
+      makeMenu = _useMenuTrigger.makeMenu,
+      triggerContext = _useMenuTrigger.triggerContext;
 
-        (_inputRef$current2 = inputRef.current) == null ? void 0 : _inputRef$current2.blur();
-      },
-      getRoot: function getRoot() {
-        return rootRef.current;
-      },
-      getInput: function getInput() {
-        return inputRef.current;
-      }
-    };
-  }, [rootRef, inputRef]);
+  var _useFocusable = useFocusable(props, triggerRef),
+      triggerFocusProps = _useFocusable.focusableProps;
 
   var variants = _extends({}, pick.apply(void 0, [props].concat(plasmicClass.internalVariantProps)), mergeVariantToggles({
-    def: config.showStartIconVariant,
-    active: showStartIcon
-  }, {
-    def: config.showEndIconVariant,
-    active: showEndIcon
+    def: config.isOpenVariant,
+    active: state.isOpen
   }, {
     def: config.isDisabledVariant,
     active: isDisabled
   }));
 
-  var args = _extends({}, pick.apply(void 0, [props].concat(plasmicClass.internalArgProps)), config.startIconSlot && (_ref = {}, _ref[config.startIconSlot] = startIcon, _ref), config.endIconSlot && (_ref2 = {}, _ref2[config.endIconSlot] = endIcon, _ref2));
+  var args = _extends({}, pick.apply(void 0, [props].concat(plasmicClass.internalArgProps)), (_extends2 = {}, _extends2[config.menuSlot] = state.isOpen ? makeMenu() : undefined, _extends2));
 
   var overrides = (_overrides = {}, _overrides[config.root] = {
+    wrapChildren: function wrapChildren(children) {
+      return createElement(TriggeredOverlayContext.Provider, {
+        value: triggerContext
+      }, children);
+    },
     props: {
-      ref: rootRef,
-      className: className,
-      style: style
+      ref: rootRef
     }
-  }, _overrides[config.input] = {
-    props: _extends({}, omit.apply(void 0, [rest].concat(plasmicClass.internalArgProps.filter(function (prop) {
-      return prop !== "required";
-    }), plasmicClass.internalVariantProps)), {
-      disabled: isDisabled,
-      ref: inputRef,
-      className: inputClassName,
-      style: inputStyle
+  }, _overrides[config.trigger] = {
+    props: mergeProps(triggerProps, triggerFocusProps, getStyleProps(props), pick(props, "title"), {
+      ref: triggerRef,
+      autoFocus: autoFocus,
+      disabled: !!isDisabled,
+      // Make sure this button is not interpreted as submit
+      type: "button"
     })
   }, _overrides);
+  var plumeState = useMemo(function () {
+    return {
+      open: function open() {
+        return state.open();
+      },
+      close: function close() {
+        return state.close();
+      },
+      isOpen: function isOpen() {
+        return state.isOpen;
+      }
+    };
+  }, [state]);
+  useImperativeHandle(outerRef, function () {
+    return {
+      getRoot: function getRoot() {
+        return rootRef.current;
+      },
+      getTrigger: function getTrigger() {
+        return triggerRef.current;
+      },
+      focus: function focus() {
+        return triggerRef.current && triggerRef.current.focus();
+      },
+      blur: function blur() {
+        return triggerRef.current && triggerRef.current.blur();
+      },
+      open: plumeState.open,
+      close: plumeState.close,
+      isOpen: plumeState.isOpen
+    };
+  }, [rootRef, triggerRef, plumeState]);
   return {
     plasmicProps: {
       variants: variants,
       args: args,
       overrides: overrides
-    }
+    },
+    state: plumeState
   };
 }
 
-function useTriggeredOverlay(plasmicClass, props, config, outerRef, isDismissable) {
-  var _extends2, _overrides;
+var SelectContext = /*#__PURE__*/createContext(undefined);
 
-  if (outerRef === void 0) {
-    outerRef = null;
-  }
+var _excluded$6 = ["value", "defaultValue", "children", "onChange", "placement", "menuMatchTriggerWidth", "menuWidth"];
+var COLLECTION_OPTS$1 = {
+  itemPlumeType: "select-option",
+  sectionPlumeType: "select-option-group"
+};
+/**
+ * Converts props in our BaseSelectProps into props that react-aria's
+ * useSelect() understands.
+ *
+ * Because we're not exposing the Collections API (see ./index.tsx),
+ * we are converting our own API into props for useSelect.
+ *
+ * Specifically, in Plume's API,
+ * - `children` flattens to a list of ReactElements of type Select.Option
+ *   or Select.OptionGroup
+ *
+ * and we map it this way to the Collections API:
+ * - `items` is a list of those flattened ReactElements from `children`!
+ * - `children`, as a render prop, is supposed to take one of the `items`
+ *   and return a `Section` or `Item` element. We take an Option/OptionGroup
+ *   element, and use its props to render the appropriate `Section` or
+ *   `Item`. The "trick" here is that we then stuff the Option element as
+ *   `Item.children`, and the OptionGroup element as `Section.title`.
+ *
+ * When the Collections API does its work deriving `Node`s, the corresponding
+ * Option/OptionGroup ReactElements will end up as `Node.rendered`.
+ *
+ * Then, when we are actually rendering the content of the dropdown, we
+ * iterate through each collected `Node`, and renders
+ * React.cloneElement(Node.rendered, {_node: node}).  This "secretly" passes
+ * the derived collection `Node` as a prop to Option and OptionGroup, and they
+ * can make use of the derived `Node.key` etc in their rendering functions.
+ *
+ * One thing to note here is that we never "rendered" the Option/OptionGroup
+ * React elements that the user constructed; instead, we just looked at the
+ * props used on those elements, and passed those onto the Collections API.
+ * What gets rendered to the screen is the cloned version of these elements
+ * with the secret derived `_node` prop.  That means Option and OptionGroup
+ * render functions can assume that _node is passed in.
+ */
 
-  if (isDismissable === void 0) {
-    isDismissable = true;
-  }
+function useAriaSelectProps(props) {
+  var value = props.value,
+      defaultValue = props.defaultValue,
+      children = props.children,
+      onChange = props.onChange,
+      rest = _objectWithoutPropertiesLoose(props, _excluded$6);
 
-  var overlayRef = useRef(null);
-  var onOverlayRef = mergeRefs(overlayRef, outerRef);
-  var context = useContext(TriggeredOverlayContext);
+  var _useDerivedItemsFromC = useDerivedItemsFromChildren(children, _extends({}, COLLECTION_OPTS$1, {
+    invalidChildError: "Can only use Select.Option and Select.OptionGroup as children to Select",
+    requireItemValue: true
+  })),
+      items = _useDerivedItemsFromC.items,
+      disabledKeys = _useDerivedItemsFromC.disabledKeys;
 
-  if (!context) {
-    // If no context, then we are not being correctly used.  Either complain, or
-    // exit early.  It's okay to exit early and break the rules of React hooks
-    // because we won't suddenly have the appropriate context anyway for this instance.
-    if (PLUME_STRICT_MODE) {
-      throw new Error("You can only use a triggered overlay with a TriggeredOverlayContext");
+  var collectionChildRenderer = useCallback(function (child) {
+    return renderAsCollectionChild(child, COLLECTION_OPTS$1);
+  }, []);
+  var onSelectionChange = useMemo(function () {
+    if (onChange) {
+      return function (val) {
+        return onChange(val == null || val === "null" ? null : val);
+      };
+    } else {
+      return undefined;
     }
+  }, [onChange]);
+  return {
+    ariaProps: _extends({}, rest, {
+      children: collectionChildRenderer,
+      onSelectionChange: onSelectionChange,
+      items: items,
+      disabledKeys: disabledKeys,
+      defaultSelectedKey: defaultValue
+    }, "value" in props && {
+      selectedKey: value != null ? value : null
+    })
+  };
+}
 
-    return getDefaultPlasmicProps(plasmicClass, props);
+function useSelect(plasmicClass, props, config, ref) {
+  var _overrides, _extends2;
+
+  if (ref === void 0) {
+    ref = null;
   }
 
-  var children = props.children;
-  var triggerRef = context.triggerRef,
-      placement = context.placement,
-      overlayMatchTriggerWidth = context.overlayMatchTriggerWidth,
-      overlayMinTriggerWidth = context.overlayMinTriggerWidth,
-      overlayWidth = context.overlayWidth,
-      state = context.state; // Measure the width of the trigger to inform the width of the menu (below).
+  useEnsureSSRProvider();
 
-  var _React$useState = useState(false),
-      isRendered = _React$useState[0],
-      setRendered = _React$useState[1];
+  var _useAriaSelectProps = useAriaSelectProps(props),
+      ariaProps = _useAriaSelectProps.ariaProps;
 
-  var triggerWidth = triggerRef.current && (overlayMatchTriggerWidth || overlayMinTriggerWidth) ? triggerRef.current.offsetWidth : undefined;
-  useIsomorphicLayoutEffect(function () {
-    if (!isRendered && triggerRef.current && (overlayMatchTriggerWidth || overlayMinTriggerWidth)) {
-      setRendered(true);
-    }
-  }, [triggerRef, isRendered, overlayMatchTriggerWidth, overlayMinTriggerWidth]);
+  var placement = props.placement;
+  var state = useSelectState(ariaProps);
+  var triggerRef = useRef(null);
+  var rootRef = useRef(null);
+  var isDisabled = props.isDisabled,
+      name = props.name,
+      menuWidth = props.menuWidth,
+      menuMatchTriggerWidth = props.menuMatchTriggerWidth,
+      autoFocus = props.autoFocus,
+      placeholder = props.placeholder,
+      selectedContent = props.selectedContent;
 
-  var _useOverlay = useOverlay({
-    isOpen: state.isOpen,
-    onClose: state.close,
-    isDismissable: isDismissable,
-    shouldCloseOnBlur: true
-  }, overlayRef),
-      overlayAriaProps = _useOverlay.overlayProps;
+  var _useAriaSelect = useSelect$1(ariaProps, state, triggerRef),
+      triggerPressProps = _useAriaSelect.triggerProps,
+      menuProps = _useAriaSelect.menuProps;
 
-  var _useOverlayPosition = useOverlayPosition({
-    targetRef: triggerRef,
-    overlayRef: overlayRef,
-    placement: placement != null ? placement : "bottom left",
-    shouldFlip: true,
-    isOpen: state.isOpen,
-    onClose: state.close,
-    containerPadding: 0
-  }),
-      overlayPositionProps = _useOverlayPosition.overlayProps,
-      updatePosition = _useOverlayPosition.updatePosition,
-      placementAxis = _useOverlayPosition.placement;
+  var _usePress = usePress(_extends({}, triggerPressProps, {
+    isDisabled: isDisabled
+  })),
+      triggerProps = _usePress.pressProps;
 
-  useIsomorphicLayoutEffect(function () {
-    if (state.isOpen) {
-      requestAnimationFrame(function () {
-        updatePosition();
-      });
-    }
-  }, [state.isOpen, updatePosition]);
-  var overlayProps = mergeProps({
-    style: {
-      left: "auto",
-      right: "auto",
-      top: "auto",
-      bottom: "auto",
-      position: "absolute",
-      width: overlayWidth != null ? overlayWidth : overlayMatchTriggerWidth ? triggerWidth : "auto",
-      minWidth: overlayMinTriggerWidth ? triggerWidth : "auto"
-    }
-  }, overlayAriaProps, overlayPositionProps);
+  var triggerContent = state.selectedItem ? selectedContent != null ? selectedContent : getChildProp(state.selectedItem.value, "children") : null;
 
   var variants = _extends({}, pick.apply(void 0, [props].concat(plasmicClass.internalVariantProps)), mergeVariantToggles({
-    def: config.isPlacedTopVariant,
-    active: placementAxis === "top"
-  }, {
-    def: config.isPlacedBottomVariant,
-    active: placementAxis === "bottom"
+    def: config.isOpenVariant,
+    active: state.isOpen
   }, {
-    def: config.isPlacedLeftVariant,
-    active: placementAxis === "left"
+    def: config.placeholderVariant,
+    active: !state.selectedItem
   }, {
-    def: config.isPlacedRightVariant,
-    active: placementAxis === "right"
+    def: config.isDisabledVariant,
+    active: isDisabled
   }));
 
-  var args = _extends({}, pick.apply(void 0, [props].concat(plasmicClass.internalArgProps)), (_extends2 = {}, _extends2[config.contentSlot] = createElement(FocusScope, {
-    restoreFocus: true
-  }, createElement(DismissButton, {
-    onDismiss: state.close
-  }), children), _extends2));
-
+  var triggerContext = useMemo(function () {
+    return {
+      triggerRef: triggerRef,
+      state: state,
+      placement: placement,
+      overlayMatchTriggerWidth: menuMatchTriggerWidth,
+      overlayMinTriggerWidth: true,
+      overlayWidth: menuWidth
+    };
+  }, [triggerRef, state, placement, menuMatchTriggerWidth, menuWidth]);
   var overrides = (_overrides = {}, _overrides[config.root] = {
-    props: mergeProps(overlayProps, getStyleProps(props), {
-      ref: onOverlayRef
+    props: mergeProps(getStyleProps(props), {
+      ref: rootRef
     }),
-    wrap: function wrap(root) {
-      if (typeof document !== "undefined") {
-        return createPortal(root, document.body);
-      } else {
-        // Possibly being invoked on the server during SSR; no need to
-        // bother with a portal in that case.
-        return root;
-      }
+    wrapChildren: function wrapChildren(children) {
+      return createElement(Fragment, null, createElement(HiddenSelect, {
+        state: state,
+        triggerRef: triggerRef,
+        name: name,
+        isDisabled: isDisabled
+      }), children);
+    }
+  }, _overrides[config.trigger] = {
+    props: mergeProps(triggerProps, {
+      ref: triggerRef,
+      autoFocus: autoFocus,
+      disabled: !!isDisabled,
+      // Don't trigger form submission!
+      type: "button"
+    })
+  }, _overrides[config.overlay] = {
+    wrap: function wrap(content) {
+      return createElement(TriggeredOverlayContext.Provider, {
+        value: triggerContext
+      }, content);
+    }
+  }, _overrides[config.optionsContainer] = {
+    wrap: function wrap(content) {
+      return createElement(ListBoxWrapper, {
+        state: state,
+        menuProps: menuProps
+      }, content);
     }
   }, _overrides);
+
+  var args = _extends({}, pick.apply(void 0, [props].concat(plasmicClass.internalArgProps)), (_extends2 = {}, _extends2[config.triggerContentSlot] = triggerContent, _extends2[config.placeholderSlot] = placeholder, _extends2[config.optionsSlot] = createElement(SelectContext.Provider, {
+    value: state
+  }, Array.from(state.collection).map(function (node) {
+    return renderCollectionNode(node);
+  })), _extends2));
+
+  var plumeState = useMemo(function () {
+    return {
+      open: function open() {
+        return state.open();
+      },
+      close: function close() {
+        return state.close();
+      },
+      isOpen: function isOpen() {
+        return state.isOpen;
+      },
+      getSelectedValue: function getSelectedValue() {
+        return state.selectedKey ? "" + state.selectedKey : null;
+      },
+      setSelectedValue: function setSelectedValue(key) {
+        return state.setSelectedKey(key);
+      }
+    };
+  }, [state]);
+  useImperativeHandle(ref, function () {
+    return {
+      getRoot: function getRoot() {
+        return rootRef.current;
+      },
+      getTrigger: function getTrigger() {
+        return triggerRef.current;
+      },
+      focus: function focus() {
+        var _triggerRef$current;
+
+        return (_triggerRef$current = triggerRef.current) == null ? void 0 : _triggerRef$current.focus();
+      },
+      blur: function blur() {
+        var _triggerRef$current2;
+
+        return (_triggerRef$current2 = triggerRef.current) == null ? void 0 : _triggerRef$current2.blur();
+      },
+      open: function open() {
+        return plumeState.open();
+      },
+      close: function close() {
+        return plumeState.close();
+      },
+      isOpen: function isOpen() {
+        return plumeState.isOpen();
+      },
+      getSelectedValue: function getSelectedValue() {
+        return plumeState.getSelectedValue();
+      },
+      setSelectedValue: function setSelectedValue(key) {
+        return plumeState.setSelectedValue(key);
+      }
+    };
+  }, [rootRef, triggerRef, plumeState]);
   return {
     plasmicProps: {
       variants: variants,
       args: args,
       overrides: overrides
-    }
+    },
+    state: plumeState
   };
 }
 
-function generateStateOnChangeProp($state, stateName, dataReps) {
-  return function (val, path) {
-    return set($state, [stateName].concat(dataReps, path), val);
-  };
-}
-/**
- * This function generate the state value prop for repeated states
- * Example:
- *   - parent[][].counter[].count
- * We need to pass `parent[index1][index2].counter to the child component
- */
+function ListBoxWrapper(props) {
+  var state = props.state,
+      menuProps = props.menuProps,
+      children = props.children;
+  var ref = useRef(null);
 
-function generateStateValueProp($state, path // ["parent", 0, 1, "counter"]
-) {
-  return _get($state, path);
+  var _useListBox = useListBox(_extends({}, menuProps, {
+    isVirtualized: false,
+    autoFocus: state.focusStrategy || true,
+    disallowEmptySelection: true
+  }), state, ref),
+      listBoxProps = _useListBox.listBoxProps;
+
+  return cloneElement(children, mergeProps(children.props, listBoxProps, {
+    style: noOutline(),
+    ref: ref
+  }));
 }
-/**
- * Forked from https://github.com/lukeed/dset
- * Changes: fixed setting a deep value to a proxy object
- */
 
-function set(obj, keys, val) {
-  keys = keys.split ? keys.split(".") : keys;
-  var i = 0,
-      l = keys.length,
-      t = obj,
-      x,
-      k;
+function useSelectOption(plasmicClass, props, config, outerRef) {
+  var _extends2, _overrides;
 
-  while (i < l) {
-    k = keys[i++];
-    if (k === "__proto__" || k === "constructor" || k === "prototype") break;
+  if (outerRef === void 0) {
+    outerRef = null;
+  }
 
-    if (i === l) {
-      t[k] = val;
-      t = t[k];
-    } else {
-      if (typeof (x = t[k]) === typeof keys) {
-        t = t[k] = x;
-      } else if (keys[i] * 0 !== 0 || !!~("" + keys[i]).indexOf(".")) {
-        t[k] = {};
-        t = t[k];
-      } else {
-        t[k] = [];
-        t = t[k];
-      }
+  var state = useContext(SelectContext);
+
+  if (!state) {
+    // If no context, then we are being incorrectly used.  Complain or just don't
+    // bother installing any hooks.  It's okay to violate rules of hooks here
+    // because this instance won't suddenly be used correctly in another render.
+    if (PLUME_STRICT_MODE) {
+      throw new Error("You can only use a Select.Option within a Select component.");
     }
+
+    return getDefaultPlasmicProps(plasmicClass, props);
   }
-}
 
-var mkUntrackedValue = function mkUntrackedValue(o) {
-  return typeof o === "object" ? ref(o) : o;
-};
+  var children = props.children;
+  var rootRef = useRef(null);
+  var onRef = mergeRefs(rootRef, outerRef); // We pass in the Node secretly as an undocumented prop from <Select />
 
-var transformPathStringToObj = function transformPathStringToObj(str) {
-  var splitStatePathPart = function splitStatePathPart(state) {
-    return state.endsWith("[]") ? [].concat(splitStatePathPart(state.slice(0, -2)), ["[]"]) : [state];
-  };
+  var node = props._node;
+  var isSelected = state.selectionManager.isSelected(node.key);
+  var isDisabled = state.disabledKeys.has(node.key);
+  var isHighlighted = state.selectionManager.isFocused && state.selectionManager.focusedKey === node.key;
 
-  return str.split(".").flatMap(splitStatePathPart);
-};
+  var _useAriaOption = useOption({
+    isSelected: isSelected,
+    isDisabled: isDisabled,
+    "aria-label": node && node["aria-label"],
+    key: node.key,
+    shouldSelectOnPressUp: true,
+    shouldFocusOnHover: true,
+    isVirtualized: false
+  }, state, rootRef),
+      optionProps = _useAriaOption.optionProps,
+      labelProps = _useAriaOption.labelProps;
 
-function shallowEqual(a1, a2) {
-  if (a1.length !== a2.length) {
-    return false;
-  }
+  var variants = _extends({}, pick.apply(void 0, [props].concat(plasmicClass.internalVariantProps)), mergeVariantToggles({
+    def: config.isSelectedVariant,
+    active: isSelected
+  }, {
+    def: config.isDisabledVariant,
+    active: isDisabled
+  }, {
+    def: config.isHighlightedVariant,
+    active: isHighlighted
+  }));
 
-  for (var i = 0; i < a1.length; i++) {
-    if (a1[i] !== a2[i]) {
-      return false;
-    }
-  }
+  var args = _extends({}, pick.apply(void 0, [props].concat(plasmicClass.internalArgProps)), (_extends2 = {}, _extends2[config.labelSlot] = children, _extends2));
 
-  return true;
+  var overrides = (_overrides = {}, _overrides[config.root] = {
+    props: mergeProps(optionProps, getStyleProps(props), {
+      ref: onRef,
+      style: noOutline()
+    })
+  }, _overrides[config.labelContainer] = {
+    props: labelProps
+  }, _overrides);
+  return {
+    plasmicProps: {
+      variants: variants,
+      args: args,
+      overrides: overrides
+    }
+  };
 }
 
-function isNum(value) {
-  return typeof value === "symbol" ? false : !isNaN(+value);
-}
+function useSelectOptionGroup(plasmicClass, props, config) {
+  var _extends2, _overrides;
 
-function saveNewState($$state, path, spec) {
-  var key = JSON.stringify(path);
-  $$state.existingStates.set(key, {
-    path: path,
-    specKey: spec.path
-  });
+  var state = useContext(SelectContext); // `node` should exist if the OptionGroup was instantiated properly
+  // within a Select
 
-  if (!$$state.statesInstanceBySpec.has(spec.path)) {
-    $$state.statesInstanceBySpec.set(spec.path, []);
-  }
+  var node = props._node;
 
-  $$state.statesInstanceBySpec.get(spec.path).push({
-    path: path,
-    specKey: spec.path
-  });
-}
-
-function create$StateProxy($$state, handlers) {
-  var getNextKeyToSpecMap = function getNextKeyToSpecMap(currPath) {
-    return new Map(Object.entries(Object.values($$state.specsByKey).filter(function (spec) {
-      return shallowEqual(currPath.map(function (p) {
-        return isNum(p) ? "[]" : p;
-      }), spec.pathObj.slice(0, currPath.length));
-    }).reduce(function (agg, spec) {
-      var nextKey = spec.pathObj[currPath.length];
-
-      if (!(nextKey in agg)) {
-        agg[nextKey] = [];
-      }
-
-      agg[nextKey].push(spec);
-      return agg;
-    }, {})));
-  };
-
-  var rec = function rec(currPath) {
-    var nextKeyToSpecs = getNextKeyToSpecMap(currPath);
-
-    var getSpecForProperty = function getSpecForProperty(property) {
-      var _nextKeyToSpecs$get, _nextKeyToSpecs$get2;
-
-      return nextKeyToSpecs.has("[]") && isNum(property) ? (_nextKeyToSpecs$get = nextKeyToSpecs.get("[]")) == null ? void 0 : _nextKeyToSpecs$get[0] : typeof property === "string" && nextKeyToSpecs.has(property) ? (_nextKeyToSpecs$get2 = nextKeyToSpecs.get(property)) == null ? void 0 : _nextKeyToSpecs$get2[0] : undefined;
-    };
-
-    var getNextPath = function getNextPath(property) {
-      return [].concat(currPath, [isNum(property) ? +property : property]);
-    };
-
-    return new Proxy(nextKeyToSpecs.has("[]") ? [] : {}, {
-      deleteProperty: function deleteProperty(target, property) {
-        var prefixPath = getNextPath(property);
-        var specKeysToUpdate = new Set();
-        $$state.existingStates.forEach(function (_ref) {
-          var path = _ref.path,
-              specKey = _ref.specKey;
+  if (!state || !node) {
+    if (PLUME_STRICT_MODE) {
+      throw new Error("You can only use a Select.OptionGroup within a Select component.");
+    }
 
-          if (path.length >= prefixPath.length && shallowEqual(path.slice(0, prefixPath.length), prefixPath)) {
-            deleteState($$state, path);
-            specKeysToUpdate.add(specKey);
-          }
-        });
-        specKeysToUpdate.forEach(function (specKey) {
-          var spec = $$state.specsByKey[specKey];
+    return getDefaultPlasmicProps(plasmicClass, props);
+  }
 
-          if (spec.onChangeProp) {
-            var _$$state$props$spec$o, _$$state$props;
+  var _useListBoxSection = useListBoxSection({
+    heading: props.title,
+    "aria-label": props["aria-label"]
+  }),
+      headingProps = _useListBoxSection.headingProps,
+      groupProps = _useListBoxSection.groupProps;
 
-            (_$$state$props$spec$o = (_$$state$props = $$state.props)[spec.onChangeProp]) == null ? void 0 : _$$state$props$spec$o.call(_$$state$props, _get($$state.stateValues, currPath), currPath);
-          }
-        });
-        return Reflect.deleteProperty(target, property);
-      },
-      get: function get(target, property, receiver) {
-        var spec = getSpecForProperty(property);
+  var _useSeparator = useSeparator({
+    elementType: "li"
+  }),
+      separatorProps = _useSeparator.separatorProps;
 
-        if (spec && typeof property !== "symbol") {
-          var nextPath = getNextPath(property);
+  var variants = _extends({}, pick.apply(void 0, [props].concat(plasmicClass.internalVariantProps)), mergeVariantToggles({
+    def: config.noTitleVariant,
+    active: !props.title
+  }, {
+    def: config.isFirstVariant,
+    active: state.collection.getFirstKey() === node.key
+  }));
 
-          if (spec.pathObj.length === currPath.length + 1) {
-            var _handlers$get, _handlers;
+  var args = _extends({}, pick.apply(void 0, [props].concat(plasmicClass.internalArgProps)), (_extends2 = {}, _extends2[config.titleSlot] = props.title, _extends2[config.optionsSlot] = Array.from(node.childNodes).map(function (childNode) {
+    return renderCollectionNode(childNode);
+  }), _extends2));
 
-            // reached the end of the spec
-            target[property] = (_handlers$get = (_handlers = handlers(nextPath, spec)).get) == null ? void 0 : _handlers$get.call(_handlers, target, property, receiver);
-          } else if (!(property in target)) {
-            target[property] = rec(nextPath);
-          }
-        }
+  var overrides = (_overrides = {}, _overrides[config.root] = {
+    props: getStyleProps(props)
+  }, _overrides[config.separator] = {
+    props: _extends({}, separatorProps)
+  }, _overrides[config.titleContainer] = _extends({
+    props: _extends({
+      role: "presentation"
+    }, headingProps)
+  }, !props.title && {
+    render: function render() {
+      return null;
+    }
+  }), _overrides[config.optionsContainer] = {
+    props: _extends({}, groupProps)
+  }, _overrides);
+  return {
+    plasmicProps: {
+      variants: variants,
+      args: args,
+      overrides: overrides
+    }
+  };
+}
 
-        return Reflect.get(target, property, receiver);
-      },
-      set: function set$1(target, property, value, receiver) {
-        var spec = getSpecForProperty(property);
-        var nextPath = getNextPath(property);
+function asAriaSwitchProps(props) {
+  var ariaProps = _extends({}, props, {
+    isSelected: props.isChecked,
+    defaultSelected: props.defaultChecked
+  });
 
-        if (spec && typeof property !== "symbol") {
-          if (spec.pathObj.length === currPath.length + 1) {
-            var _handlers$set, _handlers2;
+  delete ariaProps["isChecked"];
+  delete ariaProps["defaultChecked"];
+  return ariaProps;
+}
 
-            // reached the end of the spec
-            target[property] = (_handlers$set = (_handlers2 = handlers(nextPath, spec)).set) == null ? void 0 : _handlers$set.call(_handlers2, target, property, value, receiver);
-            return Reflect.set(target, property, value, receiver);
-          } else if (typeof value === "object") {
-            target[property] = rec(nextPath);
+function useSwitch(plasmicClass, props, config, ref) {
+  var _overrides, _ref;
 
-            for (var _i = 0, _Object$keys = Object.keys(value); _i < _Object$keys.length; _i++) {
-              var key = _Object$keys[_i];
-              target[property][key] = value[key];
-            }
+  if (ref === void 0) {
+    ref = null;
+  }
 
-            return true;
-          }
-        }
+  var children = props.children,
+      isDisabled = props.isDisabled;
+  useEnsureSSRProvider();
+  var inputRef = useRef(null);
+  var rootRef = useRef(null);
+  var ariaProps = asAriaSwitchProps(props);
+  var state = useToggleState(ariaProps);
 
-        if (property === "registerInitFunc" && currPath.length === 0) {
-          return Reflect.set(target, property, value, receiver);
-        }
+  var _useAriaSwitch = useSwitch$1(ariaProps, state, inputRef),
+      inputProps = _useAriaSwitch.inputProps;
 
-        if (nextKeyToSpecs.has("[]")) {
-          var _nextKeyToSpecs$get3;
+  var variants = _extends({}, pick.apply(void 0, [props].concat(plasmicClass.internalVariantProps)), mergeVariantToggles({
+    def: config.isDisabledVariant,
+    active: isDisabled
+  }, {
+    def: config.isCheckedVariant,
+    active: state.isSelected
+  }, {
+    def: config.noLabelVariant,
+    active: !children
+  }));
 
-          set($$state.stateValues, nextPath, value);
+  var overrides = (_overrides = {}, _overrides[config.root] = {
+    as: "label",
+    props: mergeProps(getStyleProps(props), {
+      ref: rootRef
+    }),
+    wrapChildren: function wrapChildren(children) {
+      return createElement(Fragment, null, createElement(VisuallyHidden, null, createElement("input", Object.assign({}, inputProps, {
+        ref: inputRef
+      }))), children);
+    }
+  }, _overrides);
 
-          (_nextKeyToSpecs$get3 = nextKeyToSpecs.get("[]")) == null ? void 0 : _nextKeyToSpecs$get3.forEach(function (spec) {
-            if (spec != null && spec.onChangeProp) {
-              var _$$state$props$spec$o2, _$$state$props2;
+  var args = _extends({}, pick.apply(void 0, [props].concat(plasmicClass.internalArgProps)), config.labelSlot ? (_ref = {}, _ref[config.labelSlot] = children, _ref) : {});
 
-              (_$$state$props$spec$o2 = (_$$state$props2 = $$state.props)[spec.onChangeProp]) == null ? void 0 : _$$state$props$spec$o2.call(_$$state$props2, value, nextPath);
-            }
-          });
-          return Reflect.set(target, property, value, receiver);
-        } // invalid setting a value that doesn't make part of the spec
+  var plumeState = useMemo(function () {
+    return {
+      setChecked: function setChecked(checked) {
+        return state.setSelected(checked);
+      }
+    };
+  }, [state]);
+  useImperativeHandle(ref, function () {
+    return {
+      getRoot: function getRoot() {
+        return rootRef.current;
+      },
+      focus: function focus() {
+        var _inputRef$current;
 
+        return (_inputRef$current = inputRef.current) == null ? void 0 : _inputRef$current.focus();
+      },
+      blur: function blur() {
+        var _inputRef$current2;
 
-        return false;
+        return (_inputRef$current2 = inputRef.current) == null ? void 0 : _inputRef$current2.blur();
+      },
+      setChecked: function setChecked(checked) {
+        return plumeState.setChecked(checked);
       }
-    });
+    };
+  }, [rootRef, inputRef, plumeState]);
+  return {
+    plasmicProps: {
+      variants: variants,
+      overrides: overrides,
+      args: args
+    },
+    state: plumeState
   };
-
-  return rec([]);
 }
 
-var deleteState = function deleteState($$state, path) {
-  var _$$state$unsubscripti;
-
-  var key = JSON.stringify(path);
-  (_$$state$unsubscripti = $$state.unsubscriptionsByState[key]) == null ? void 0 : _$$state$unsubscripti.forEach(function (f) {
-    return f();
-  });
-  delete $$state.unsubscriptionsByState[key];
-  $$state.existingStates["delete"](key); // delete get($$state.stateValues, path.slice(-1))[path.slice(-1)[0]];
-  // delete get($$state.initStateValues, path.slice(-1))[path.slice(-1)[0]];
-};
-
-var getIndexes = function getIndexes(path, spec) {
-  var indexes = [];
+var _excluded$7 = ["isDisabled", "startIcon", "endIcon", "showStartIcon", "showEndIcon", "className", "style", "inputClassName", "inputStyle"];
+function useTextInput(plasmicClass, props, config, ref) {
+  var _ref, _ref2, _overrides;
 
-  if (path.length !== spec.pathObj.length) {
-    throw new Error("Unexpected error: state path and spec path have different lengths");
+  if (ref === void 0) {
+    ref = null;
   }
 
-  for (var i = 0; i < spec.pathObj.length; i++) {
-    if (spec.pathObj[i] === "[]") {
-      indexes.push(path[i]);
-    }
-  }
-
-  return indexes;
-};
-
-function initializeStateValue($$state, initialStatePath, initialSpec) {
-  var _$$state$unsubscripti2;
+  var isDisabled = props.isDisabled,
+      startIcon = props.startIcon,
+      endIcon = props.endIcon,
+      showStartIcon = props.showStartIcon,
+      showEndIcon = props.showEndIcon,
+      className = props.className,
+      style = props.style,
+      inputClassName = props.inputClassName,
+      inputStyle = props.inputStyle,
+      rest = _objectWithoutPropertiesLoose(props, _excluded$7);
 
-  var initialStateKey = JSON.stringify(initialStatePath);
-  var stateAccess = new Set();
-  var $state = create$StateProxy($$state, function (path, spec) {
+  var rootRef = useRef(null);
+  var inputRef = useRef(null);
+  useImperativeHandle(ref, function () {
     return {
-      get: function get() {
-        var key = JSON.stringify(path);
-        stateAccess.add({
-          path: path,
-          spec: spec
-        });
-
-        if (spec.valueProp) {
-          return !spec.isRepeated ? $$state.props[spec.valueProp] : _get($$state.props[spec.valueProp], path.slice(1));
-        }
+      focus: function focus() {
+        var _inputRef$current;
 
-        if ($$state.existingStates.has(key)) {
-          // is already initialized
-          return _get($$state.stateValues, path);
-        } else if (spec.initFunc) {
-          initializeStateValue($$state, path, spec);
-        }
+        (_inputRef$current = inputRef.current) == null ? void 0 : _inputRef$current.focus();
+      },
+      blur: function blur() {
+        var _inputRef$current2;
 
-        return _get($$state.stateValues, path);
+        (_inputRef$current2 = inputRef.current) == null ? void 0 : _inputRef$current2.blur();
       },
-      set: function set() {
-        throw new Error("Cannot update state values during initialization");
+      getRoot: function getRoot() {
+        return rootRef.current;
+      },
+      getInput: function getInput() {
+        return inputRef.current;
       }
     };
-  });
-  (_$$state$unsubscripti2 = $$state.unsubscriptionsByState[initialStateKey]) == null ? void 0 : _$$state$unsubscripti2.forEach(function (f) {
-    return f();
-  });
-  $$state.unsubscriptionsByState[initialStateKey] = [];
-  stateAccess.forEach(function (_ref2) {
-    var path = _ref2.path,
-        spec = _ref2.spec;
-    var unsubscribe = subscribeKey(_get($$state.stateValues, path.slice(-1)), path.slice(-1)[0], function () {
-      return set($$state.stateValues, initialStatePath, mkUntrackedValue(initialSpec.initFunc($$state.props, $state, getIndexes(path, spec))));
-    });
-    $$state.unsubscriptionsByState[initialStateKey].push(unsubscribe);
-  });
-  var untrackedInitialValue = mkUntrackedValue(initialSpec.initFunc($$state.props, $state, getIndexes(initialStatePath, initialSpec)));
+  }, [rootRef, inputRef]);
 
-  set($$state.initStateValues, initialStatePath, untrackedInitialValue);
+  var variants = _extends({}, pick.apply(void 0, [props].concat(plasmicClass.internalVariantProps)), mergeVariantToggles({
+    def: config.showStartIconVariant,
+    active: showStartIcon
+  }, {
+    def: config.showEndIconVariant,
+    active: showEndIcon
+  }, {
+    def: config.isDisabledVariant,
+    active: isDisabled
+  }));
 
-  set($$state.stateValues, initialStatePath, untrackedInitialValue);
+  var args = _extends({}, pick.apply(void 0, [props].concat(plasmicClass.internalArgProps)), config.startIconSlot && (_ref = {}, _ref[config.startIconSlot] = startIcon, _ref), config.endIconSlot && (_ref2 = {}, _ref2[config.endIconSlot] = endIcon, _ref2));
 
-  return untrackedInitialValue;
+  var overrides = (_overrides = {}, _overrides[config.root] = {
+    props: {
+      ref: rootRef,
+      className: className,
+      style: style
+    }
+  }, _overrides[config.input] = {
+    props: _extends({}, omit.apply(void 0, [rest].concat(plasmicClass.internalArgProps.filter(function (prop) {
+      return prop !== "required";
+    }), plasmicClass.internalVariantProps)), {
+      disabled: isDisabled,
+      ref: inputRef,
+      className: inputClassName,
+      style: inputStyle
+    })
+  }, _overrides);
+  return {
+    plasmicProps: {
+      variants: variants,
+      args: args,
+      overrides: overrides
+    }
+  };
 }
 
-function useDollarState(specs, props) {
-  var $$state = React__default.useRef(proxy({
-    stateValues: {},
-    initStateValues: {},
-    specsByKey: Object.fromEntries(specs.map(function (spec) {
-      return [spec.path, _extends({}, spec, {
-        pathObj: transformPathStringToObj(spec.path),
-        isRepeated: spec.path.split(".").some(function (part) {
-          return part.endsWith("[]");
-        })
-      })];
-    })),
-    statesInstanceBySpec: new Map(),
-    existingStates: new Map(),
-    unsubscriptionsByState: {},
-    props: undefined,
-    registrationsQueue: []
-  })).current;
-  $$state.props = mkUntrackedValue(props);
-  var $state = React__default.useRef(Object.assign(create$StateProxy($$state, function (path, spec) {
-    var key = JSON.stringify(path);
+function useTriggeredOverlay(plasmicClass, props, config, outerRef, isDismissable) {
+  var _extends2, _overrides;
 
-    if (!$$state.existingStates.has(key)) {
-      var _spec$initVal;
+  if (outerRef === void 0) {
+    outerRef = null;
+  }
 
-      saveNewState($$state, path, spec);
-      var untrackedValue = !spec.initFunc ? mkUntrackedValue((_spec$initVal = spec.initVal) != null ? _spec$initVal : undefined) : initializeStateValue($$state, path, spec);
+  if (isDismissable === void 0) {
+    isDismissable = true;
+  }
 
-      set($$state.stateValues, path, untrackedValue);
+  var overlayRef = useRef(null);
+  var onOverlayRef = mergeRefs(overlayRef, outerRef);
+  var context = useContext(TriggeredOverlayContext);
 
-      set($$state.initStateValues, path, untrackedValue);
+  if (!context) {
+    // If no context, then we are not being correctly used.  Either complain, or
+    // exit early.  It's okay to exit early and break the rules of React hooks
+    // because we won't suddenly have the appropriate context anyway for this instance.
+    if (PLUME_STRICT_MODE) {
+      throw new Error("You can only use a triggered overlay with a TriggeredOverlayContext");
     }
 
-    return {
-      get: function get() {
-        if (spec.valueProp) {
-          var value = !spec.isRepeated ? $$state.props[spec.valueProp] : _get($$state.props[spec.valueProp], path.slice(1));
-          return value;
-        } else {
-          return _get($$state.stateValues, path);
-        }
-      },
-      set: function set$1(_t, _p, value) {
-        set($$state.stateValues, path, mkUntrackedValue(value));
-
-        if (spec.onChangeProp) {
-          var _$$state$props$spec$o3, _$$state$props3;
+    return getDefaultPlasmicProps(plasmicClass, props);
+  }
 
-          (_$$state$props$spec$o3 = (_$$state$props3 = $$state.props)[spec.onChangeProp]) == null ? void 0 : _$$state$props$spec$o3.call(_$$state$props3, value, path);
-        }
+  var children = props.children;
+  var triggerRef = context.triggerRef,
+      placement = context.placement,
+      overlayMatchTriggerWidth = context.overlayMatchTriggerWidth,
+      overlayMinTriggerWidth = context.overlayMinTriggerWidth,
+      overlayWidth = context.overlayWidth,
+      state = context.state; // Measure the width of the trigger to inform the width of the menu (below).
 
-        return true;
-      }
-    };
-  }), {
-    registerInitFunc: function registerInitFunc(pathStr, f) {
-      var _$$state$statesInstan;
+  var _React$useState = useState(false),
+      isRendered = _React$useState[0],
+      setRendered = _React$useState[1];
 
-      if ((_$$state$statesInstan = $$state.statesInstanceBySpec.get(pathStr)) != null && _$$state$statesInstan.some(function (_ref3) {
-        var path = _ref3.path,
-            specKey = _ref3.specKey;
-        return !deepEqual(_get($$state.initStateValues, path), f(props, $state, getIndexes(path, $$state.specsByKey[specKey])));
-      })) {
-        $$state.registrationsQueue.push({
-          pathStr: pathStr,
-          f: f
-        });
-      }
+  var triggerWidth = triggerRef.current && (overlayMatchTriggerWidth || overlayMinTriggerWidth) ? triggerRef.current.offsetWidth : undefined;
+  useIsomorphicLayoutEffect(function () {
+    if (!isRendered && triggerRef.current && (overlayMatchTriggerWidth || overlayMinTriggerWidth)) {
+      setRendered(true);
     }
-  })).current; // For each spec with an initFunc, evaluate it and see if
-  // the init value has changed. If so, reset its state.
+  }, [triggerRef, isRendered, overlayMatchTriggerWidth, overlayMinTriggerWidth]);
 
-  var resetSpecs = [];
-  $$state.existingStates.forEach(function (_ref4) {
-    var path = _ref4.path,
-        specKey = _ref4.specKey;
-    var spec = $$state.specsByKey[specKey];
+  var _useOverlay = useOverlay({
+    isOpen: state.isOpen,
+    onClose: state.close,
+    isDismissable: isDismissable,
+    shouldCloseOnBlur: true
+  }, overlayRef),
+      overlayAriaProps = _useOverlay.overlayProps;
 
-    if (spec.initFunc) {
-      var newInit = spec.initFunc(props, $state, getIndexes(path, spec));
+  var _useOverlayPosition = useOverlayPosition({
+    targetRef: triggerRef,
+    overlayRef: overlayRef,
+    placement: placement != null ? placement : "bottom left",
+    shouldFlip: true,
+    isOpen: state.isOpen,
+    onClose: state.close,
+    containerPadding: 0
+  }),
+      overlayPositionProps = _useOverlayPosition.overlayProps,
+      updatePosition = _useOverlayPosition.updatePosition,
+      placementAxis = _useOverlayPosition.placement;
 
-      if (!deepEqual(newInit, _get($$state.initStateValues, path))) {
-        resetSpecs.push({
-          path: path,
-          spec: spec
-        });
-      }
+  useIsomorphicLayoutEffect(function () {
+    if (state.isOpen) {
+      requestAnimationFrame(function () {
+        updatePosition();
+      });
     }
-  });
-  React__default.useLayoutEffect(function () {
-    resetSpecs.forEach(function (_ref5) {
-      var path = _ref5.path,
-          spec = _ref5.spec;
-      var newInit = initializeStateValue($$state, path, spec);
-
-      if (spec.onChangeProp) {
-        var _$$state$props$spec$o4, _$$state$props4;
-
-        (_$$state$props$spec$o4 = (_$$state$props4 = $$state.props)[spec.onChangeProp]) == null ? void 0 : _$$state$props$spec$o4.call(_$$state$props4, newInit, path);
-      }
-    });
-  }, [props, resetSpecs]);
-  React__default.useLayoutEffect(function () {
-    $$state.registrationsQueue.forEach(function (_ref6) {
-      var f = _ref6.f,
-          pathStr = _ref6.pathStr;
-      $$state.specsByKey[pathStr].initFunc = f;
-    });
-    $$state.registrationsQueue = [];
-  }, [$$state.registrationsQueue]); // Re-render if any value changed in one of these objects
-
-  useSnapshot($$state.stateValues, {
-    sync: true
-  });
-  useSnapshot($$state.specsByKey, {
-    sync: true
-  });
-  return $state;
-}
-
-function useCanvasDollarState(specs, props) {
-  var $$state = proxy({
-    stateValues: {},
-    initStateValues: {},
-    specsByKey: Object.fromEntries(specs.map(function (spec) {
-      return [spec.path, _extends({}, spec, {
-        pathObj: transformPathStringToObj(spec.path),
-        isRepeated: spec.path.split(".").some(function (part) {
-          return part.endsWith("[]");
-        })
-      })];
-    })),
-    statesInstanceBySpec: new Map(),
-    existingStates: new Map(),
-    unsubscriptionsByState: {},
-    props: undefined,
-    registrationsQueue: []
-  });
-  $$state.props = mkUntrackedValue(props);
-  var $state = create$StateProxy($$state, function (path, spec) {
-    return {
-      get: function get() {
-        return _get($$state.stateValues, path);
-      },
-      set: function set$1(_t, _p, value) {
-        set($$state.stateValues, path, mkUntrackedValue(value));
+  }, [state.isOpen, updatePosition]);
+  var overlayProps = mergeProps({
+    style: {
+      left: "auto",
+      right: "auto",
+      top: "auto",
+      bottom: "auto",
+      position: "absolute",
+      width: overlayWidth != null ? overlayWidth : overlayMatchTriggerWidth ? triggerWidth : "auto",
+      minWidth: overlayMinTriggerWidth ? triggerWidth : "auto"
+    }
+  }, overlayAriaProps, overlayPositionProps);
 
-        if (spec.onChangeProp) {
-          var _$$state$props$spec$o5, _$$state$props5;
+  var variants = _extends({}, pick.apply(void 0, [props].concat(plasmicClass.internalVariantProps)), mergeVariantToggles({
+    def: config.isPlacedTopVariant,
+    active: placementAxis === "top"
+  }, {
+    def: config.isPlacedBottomVariant,
+    active: placementAxis === "bottom"
+  }, {
+    def: config.isPlacedLeftVariant,
+    active: placementAxis === "left"
+  }, {
+    def: config.isPlacedRightVariant,
+    active: placementAxis === "right"
+  }));
 
-          (_$$state$props$spec$o5 = (_$$state$props5 = $$state.props)[spec.onChangeProp]) == null ? void 0 : _$$state$props$spec$o5.call(_$$state$props5, value, path);
-        }
+  var args = _extends({}, pick.apply(void 0, [props].concat(plasmicClass.internalArgProps)), (_extends2 = {}, _extends2[config.contentSlot] = createElement(FocusScope, {
+    restoreFocus: true
+  }, createElement(DismissButton, {
+    onDismiss: state.close
+  }), children), _extends2));
 
-        return true;
+  var overrides = (_overrides = {}, _overrides[config.root] = {
+    props: mergeProps(overlayProps, getStyleProps(props), {
+      ref: onOverlayRef
+    }),
+    wrap: function wrap(root) {
+      if (typeof document !== "undefined") {
+        return createPortal(root, document.body);
+      } else {
+        // Possibly being invoked on the server during SSR; no need to
+        // bother with a portal in that case.
+        return root;
       }
-    };
-  });
-
-  for (var _iterator = _createForOfIteratorHelperLoose(specs), _step; !(_step = _iterator()).done;) {
-    var spec = _step.value;
-    var path = transformPathStringToObj(spec.path);
-    var init = spec.valueProp ? $$state.props[spec.valueProp] : spec.initVal ? spec.initVal : spec.initFunc ? initializeStateValue($$state, path, $$state.specsByKey[spec.path]) : undefined;
-
-    set($state, path, init);
-  }
-
-  return $state;
+    }
+  }, _overrides);
+  return {
+    plasmicProps: {
+      variants: variants,
+      args: args,
+      overrides: overrides
+    }
+  };
 }
 
 export { DropdownMenu, PlasmicHead, PlasmicIcon, PlasmicImg, PlasmicLink, PlasmicRootProvider, PlasmicSlot, SelectContext, Stack, Trans, TriggeredOverlayContext, classNames, createPlasmicElementProxy, createUseScreenVariants, deriveRenderOpts, ensureGlobalVariants, genTranslatableString, generateStateOnChangeProp, generateStateValueProp, getDataProps, hasVariant, makeFragment, mergeVariantsWithStates, omit, pick, plasmicHeadMeta, renderPlasmicSlot, set, setPlumeStrictMode, useButton, useCanvasDollarState, useCheckbox, useDollarState, useIsSSR, useMenu, useMenuButton, useMenuGroup, useMenuItem, useSelect, useSelectOption, useSelectOptionGroup, useSwitch, useTextInput, useTrigger, useTriggeredOverlay, wrapWithClassName };