@plasmicapp/react-web 0.2.136 → 0.2.138

package/dist/react-web.esm.js

@@ -1,8 +1,8 @@
 import classNames$1 from 'classnames';
-import _get from 'dlv';
-export { default as get } from 'dlv';
 import * as React from 'react';
 import React__default, { forwardRef, createElement, Fragment, isValidElement, useContext, createContext, useState, useRef, useMemo, useLayoutEffect, useEffect, useImperativeHandle, useCallback, cloneElement } from 'react';
+import _get from 'dlv';
+export { default as get } from 'dlv';
 import ReactDOM__default, { createPortal } from 'react-dom';
 import { PlasmicDataSourceContextProvider } from '@plasmicapp/data-sources-context';
 export { PlasmicDataSourceContextProvider, useCurrentUser } from '@plasmicapp/data-sources-context';
@@ -10,8 +10,7 @@ import { SSRProvider, useIsSSR as useIsSSR$1 } from '@react-aria/ssr';
 import { useFocusRing, useFocusable, FocusScope } from '@react-aria/focus';
 import clone from 'clone';
 import deepEqual from 'fast-deep-equal';
-import { proxy, ref, useSnapshot } from 'valtio';
-import { subscribeKey } from 'valtio/utils';
+import { proxy, useSnapshot, ref } from 'valtio';
 import { useCheckbox as useCheckbox$1 } from '@react-aria/checkbox';
 import { VisuallyHidden } from '@react-aria/visually-hidden';
 import { useToggleState } from '@react-stately/toggle';
@@ -27,39 +26,57 @@ import { useSelectState } from '@react-stately/select';
 import { useSwitch as useSwitch$1 } from '@react-aria/switch';
 import { useOverlay, useOverlayPosition, DismissButton } from '@react-aria/overlays';
 
+function PlasmicPageGuard(props) {
+  var children = props.children,
+    dataSourceCtxValue = props.dataSourceCtxValue,
+    validRoles = props.validRoles;
+  if (!dataSourceCtxValue || dataSourceCtxValue.isUserLoading) {
+    return null;
+  }
+  function canUserViewPage() {
+    if (!dataSourceCtxValue) {
+      return false;
+    }
+    if (!dataSourceCtxValue.user) {
+      return false;
+    }
+    if (!("roleId" in dataSourceCtxValue.user)) {
+      return false;
+    }
+    return validRoles.includes(dataSourceCtxValue.user.roleId);
+  }
+  if (!canUserViewPage()) {
+    return React__default.createElement("div", null, "You don't have access to this page");
+  }
+  return children;
+}
+
 function _extends() {
-  _extends = Object.assign || function (target) {
+  _extends = Object.assign ? Object.assign.bind() : function (target) {
     for (var i = 1; i < arguments.length; i++) {
       var source = arguments[i];
-
       for (var key in source) {
         if (Object.prototype.hasOwnProperty.call(source, key)) {
           target[key] = source[key];
         }
       }
     }
-
     return target;
   };
-
   return _extends.apply(this, arguments);
 }
-
 function _objectWithoutPropertiesLoose(source, excluded) {
   if (source == null) return {};
   var target = {};
   var sourceKeys = Object.keys(source);
   var key, i;
-
   for (i = 0; i < sourceKeys.length; i++) {
     key = sourceKeys[i];
     if (excluded.indexOf(key) >= 0) continue;
     target[key] = source[key];
   }
-
   return target;
 }
-
 function _unsupportedIterableToArray(o, minLen) {
   if (!o) return;
   if (typeof o === "string") return _arrayLikeToArray(o, minLen);
@@ -68,19 +85,14 @@ function _unsupportedIterableToArray(o, minLen) {
   if (n === "Map" || n === "Set") return Array.from(o);
   if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen);
 }
-
 function _arrayLikeToArray(arr, len) {
   if (len == null || len > arr.length) len = arr.length;
-
   for (var i = 0, arr2 = new Array(len); i < len; i++) arr2[i] = arr[i];
-
   return arr2;
 }
-
 function _createForOfIteratorHelperLoose(o, allowArrayLike) {
   var it = typeof Symbol !== "undefined" && o[Symbol.iterator] || o["@@iterator"];
   if (it) return (it = it.call(o)).next.bind(it);
-
   if (Array.isArray(o) || (it = _unsupportedIterableToArray(o)) || allowArrayLike && o && typeof o.length === "number") {
     if (it) o = it;
     var i = 0;
@@ -94,7 +106,6 @@ function _createForOfIteratorHelperLoose(o, allowArrayLike) {
       };
     };
   }
-
   throw new TypeError("Invalid attempt to iterate non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.");
 }
 
@@ -105,57 +116,44 @@ function pick(obj) {
   if (Object.keys(obj).length === 0) {
     return obj;
   }
-
   var res = {};
-
   for (var _len = arguments.length, keys = new Array(_len > 1 ? _len - 1 : 0), _key = 1; _key < _len; _key++) {
     keys[_key - 1] = arguments[_key];
   }
-
   for (var _i = 0, _keys = keys; _i < _keys.length; _i++) {
     var key = _keys[_i];
-
     if (key in obj) {
       res[key] = obj[key];
     }
   }
-
   return res;
 }
 function pickBy(obj, func) {
   var res = {};
-
   for (var _i2 = 0, _Object$entries = Object.entries(obj); _i2 < _Object$entries.length; _i2++) {
     var _Object$entries$_i = _Object$entries[_i2],
-        key = _Object$entries$_i[0],
-        val = _Object$entries$_i[1];
-
+      key = _Object$entries$_i[0],
+      val = _Object$entries$_i[1];
     if (func(key, val)) {
       res[key] = obj[key];
     }
   }
-
   return res;
 }
 function omit(obj) {
   if (Object.keys(obj).length === 0) {
     return obj;
   }
-
   var res = {};
-
   for (var _len2 = arguments.length, keys = new Array(_len2 > 1 ? _len2 - 1 : 0), _key2 = 1; _key2 < _len2; _key2++) {
     keys[_key2 - 1] = arguments[_key2];
   }
-
   for (var _i3 = 0, _Object$keys = Object.keys(obj); _i3 < _Object$keys.length; _i3++) {
     var key = _Object$keys[_i3];
-
     if (!keys.includes(key)) {
       res[key] = obj[key];
     }
   }
-
   return res;
 }
 function isSubset(a1, a2) {
@@ -167,19 +165,15 @@ function chainSingleArgFuncs() {
   for (var _len3 = arguments.length, funcs = new Array(_len3), _key3 = 0; _key3 < _len3; _key3++) {
     funcs[_key3] = arguments[_key3];
   }
-
   if (funcs.length === 0) {
     return undefined;
   }
-
   return function (arg) {
     var res = arg;
-
-    for (var _iterator = _createForOfIteratorHelperLoose(funcs), _step; !(_step = _iterator()).done;) {
-      var func = _step.value;
+    for (var _i4 = 0, _funcs = funcs; _i4 < _funcs.length; _i4++) {
+      var func = _funcs[_i4];
       res = func(res);
     }
-
     return res;
   };
 }
@@ -188,27 +182,22 @@ function isString(x) {
 }
 function groupBy(collection, keyFunc) {
   var result = {};
-
-  for (var _iterator2 = _createForOfIteratorHelperLoose(collection), _step2; !(_step2 = _iterator2()).done;) {
-    var obj = _step2.value;
+  for (var _iterator = _createForOfIteratorHelperLoose(collection), _step; !(_step = _iterator()).done;) {
+    var obj = _step.value;
     var key = keyFunc(obj);
-
     if (key in result) {
       result[key].push(obj);
     } else {
       result[key] = [obj];
     }
   }
-
   return result;
 }
 function mapValues(obj, mapper) {
   var result = {};
-
   for (var key in obj) {
     result[key] = mapper(obj[key]);
   }
-
   return result;
 }
 
@@ -246,7 +235,6 @@ function ensureNotArray(children) {
  * Flattens ReactNode into an array of ReactChild, but does NOT replace
  * missing keys with array index, as React.Children.toArray() does.
  */
-
 function toChildArray(children) {
   if (isReactChild(children)) {
     return [children];
@@ -269,32 +257,25 @@ function mergeProps(props) {
   for (var _len = arguments.length, restProps = new Array(_len > 1 ? _len - 1 : 0), _key = 1; _key < _len; _key++) {
     restProps[_key - 1] = arguments[_key];
   }
-
   if (restProps.every(function (rest) {
     return Object.keys(rest).length === 0;
   })) {
     return props;
   }
-
   var result = _extends({}, props);
-
   for (var _i = 0, _restProps = restProps; _i < _restProps.length; _i++) {
     var rest = _restProps[_i];
-
     for (var _i2 = 0, _Object$keys = Object.keys(rest); _i2 < _Object$keys.length; _i2++) {
       var key = _Object$keys[_i2];
       result[key] = mergePropVals(key, result[key], rest[key]);
     }
   }
-
   return result;
 }
-
 function updateRef(ref, value) {
   if (!ref) {
     return;
   }
-
   if (typeof ref === "function") {
     ref(value);
   } else {
@@ -303,15 +284,13 @@ function updateRef(ref, value) {
     }
   }
 }
-
 function mergeRefs() {
   for (var _len2 = arguments.length, refs = new Array(_len2), _key2 = 0; _key2 < _len2; _key2++) {
     refs[_key2] = arguments[_key2];
   }
-
   return function (value) {
-    for (var _iterator = _createForOfIteratorHelperLoose(refs), _step; !(_step = _iterator()).done;) {
-      var ref = _step.value;
+    for (var _i3 = 0, _refs = refs; _i3 < _refs.length; _i3++) {
+      var ref = _refs[_i3];
       updateRef(ref, value);
     }
   };
@@ -342,15 +321,12 @@ function mergePropVals(name, val1, val2) {
     // Special case for event handlers -- always call both handlers
     return function () {
       var res;
-
       if (typeof val1 === "function") {
         res = val1.apply(void 0, arguments);
       }
-
       if (typeof val2 === "function") {
         res = val2.apply(void 0, arguments);
       }
-
       return res;
     };
   } else {
@@ -363,45 +339,36 @@ function getElementTypeName(element) {
     return element.type;
   } else {
     var _ref, _ref2, _comp$displayName, _comp$render;
-
     var comp = element.type;
     return (_ref = (_ref2 = (_comp$displayName = comp.displayName) != null ? _comp$displayName : comp.name) != null ? _ref2 : (_comp$render = comp.render) == null ? void 0 : _comp$render.name) != null ? _ref : "Component";
   }
 }
 
 var _excluded = ["children"],
-    _excluded2 = ["as", "hasGap"],
-    _excluded3 = ["hasGap"];
-
+  _excluded2 = ["as", "hasGap"],
+  _excluded3 = ["hasGap"];
 function renderStack(as, props, hasGap, ref) {
   var children = props.children,
-      rest = _objectWithoutPropertiesLoose(props, _excluded);
-
+    rest = _objectWithoutPropertiesLoose(props, _excluded);
   var wrappedChildren = wrapFlexContainerChildren(children, hasGap != null ? hasGap : false);
   return createElementWithChildren(as, _extends({
     ref: ref
   }, rest), wrappedChildren);
 }
-
 function FlexStack_(props, outerRef) {
   var as = props.as,
-      hasGap = props.hasGap,
-      rest = _objectWithoutPropertiesLoose(props, _excluded2);
-
+    hasGap = props.hasGap,
+    rest = _objectWithoutPropertiesLoose(props, _excluded2);
   return renderStack(as != null ? as : "div", rest, hasGap, outerRef);
 }
-
 var FlexStack = /*#__PURE__*/forwardRef(FlexStack_);
-
 var makeStackImpl = function makeStackImpl(as) {
   return forwardRef(function (props, ref) {
     var hasGap = props.hasGap,
-        rest = _objectWithoutPropertiesLoose(props, _excluded3);
-
+      rest = _objectWithoutPropertiesLoose(props, _excluded3);
     return renderStack(as, rest, hasGap, ref);
   });
 };
-
 var Stack = /*#__PURE__*/Object.assign(FlexStack, {
   div: /*#__PURE__*/makeStackImpl("div"),
   a: /*#__PURE__*/makeStackImpl("a"),
@@ -424,9 +391,7 @@ function hasVariant(variants, groupName, variant) {
   if (variants == null) {
     return false;
   }
-
   var groupVariants = variants[groupName];
-
   if (groupVariants == null) {
     return false;
   } else if (groupVariants === true) {
@@ -447,7 +412,6 @@ function wrapFlexContainerChildren(children, hasGap) {
   // will blow away the children tree and all state if we switch from having
   // a wrapper and not.
   var className = hasGap ? "__wab_flex-container" : "__wab_passthrough";
-
   if (!children) {
     return null;
   } else if (Array.isArray(children)) {
@@ -460,21 +424,16 @@ function wrapFlexContainerChildren(children, hasGap) {
     }, children);
   }
 }
-
 function createPlasmicElement(override, defaultRoot, defaultProps, wrapChildrenInFlex) {
   if (!override || Object.keys(override).length === 0) {
     return createElementWithChildren(defaultRoot, defaultProps, defaultProps.children);
   }
-
   var override2 = deriveOverride(override);
   var props = mergeOverrideProps(defaultProps, override2.props);
-
   if (override2.type === "render") {
     return override2.render(props, defaultRoot);
   }
-
   var root = defaultRoot;
-
   if (override2.type === "as" && override2.as) {
     if (defaultRoot === Stack) {
       // If there was an "as" override specified, but the default type is
@@ -486,30 +445,23 @@ function createPlasmicElement(override, defaultRoot, defaultProps, wrapChildrenI
       root = override2.as;
     }
   }
-
   var children = props.children;
-
   if (override2.wrapChildren) {
     children = override2.wrapChildren(ensureNotArray(children));
   }
-
   if (wrapChildrenInFlex) {
     // For legacy, we still support data-plasmic-wrap-flex-children
     children = wrapFlexContainerChildren(children, true);
   }
-
   var result = createElementWithChildren(root, props, children);
-
   if (override2.wrap) {
     result = override2.wrap(result);
   }
-
   return result;
-} // We use data-plasmic-XXX attributes for custom properties since Typescript doesn't
+}
+// We use data-plasmic-XXX attributes for custom properties since Typescript doesn't
 // support type check on jsx pragma. See https://github.com/microsoft/TypeScript/issues/21699
 // for more info.
-
-
 var seenElements = /*#__PURE__*/new Map();
 function createPlasmicElementProxy(defaultElement, props) {
   // We use seenElements to keep track of elements that has been rendered by
@@ -526,78 +478,61 @@ function createPlasmicElementProxy(defaultElement, props) {
   if (props == null) {
     props = {};
   }
-
   var name = props["data-plasmic-name"];
   var isRoot = props["data-plasmic-root"];
   var forNodeName = props["data-plasmic-for-node"];
   delete props["data-plasmic-name"];
   delete props["data-plasmic-root"];
   delete props["data-plasmic-for-node"];
-
   for (var _len = arguments.length, children = new Array(_len > 2 ? _len - 2 : 0), _key = 2; _key < _len; _key++) {
     children[_key - 2] = arguments[_key];
   }
-
   var element = createPlasmicElementFromJsx.apply(void 0, [defaultElement, props].concat(children));
-
   if (name) {
     seenElements.set(name, element);
   }
-
   if (isRoot) {
     var _seenElements$get;
-
     // If this is the root, and we requested a specific node by specifying data-plasmic-for-node,
     // then return that node instead
-    var forNode = forNodeName ? (_seenElements$get = seenElements.get(forNodeName)) != null ? _seenElements$get : null : element; // Clear out the seenElements map, as we're done rendering this Plasmic* component.
-
+    var forNode = forNodeName ? (_seenElements$get = seenElements.get(forNodeName)) != null ? _seenElements$get : null : element;
+    // Clear out the seenElements map, as we're done rendering this Plasmic* component.
     seenElements.clear();
     return forNode;
   }
-
   return element;
 }
-
 function createPlasmicElementFromJsx(defaultElement, props) {
   var _props$dataPlasmicT;
-
   var override = props["data-plasmic-override"];
   var wrapFlexChild = props["data-plasmic-wrap-flex-child"];
   var triggerProps = (_props$dataPlasmicT = props["data-plasmic-trigger-props"]) != null ? _props$dataPlasmicT : [];
   delete props["data-plasmic-override"];
   delete props["data-plasmic-wrap-flex-child"];
   delete props["data-plasmic-trigger-props"];
-
   for (var _len2 = arguments.length, children = new Array(_len2 > 2 ? _len2 - 2 : 0), _key2 = 2; _key2 < _len2; _key2++) {
     children[_key2 - 2] = arguments[_key2];
   }
-
   return createPlasmicElement(override, defaultElement, mergeProps.apply(void 0, [props, children.length === 0 ? {} : {
     children: children.length === 1 ? children[0] : children
   }].concat(triggerProps)), wrapFlexChild);
 }
-
 function makeFragment() {
   for (var _len3 = arguments.length, children = new Array(_len3), _key3 = 0; _key3 < _len3; _key3++) {
     children[_key3] = arguments[_key3];
   }
-
   return createElement.apply(React, [Fragment, {}].concat(children));
 }
 var UNSET = /*#__PURE__*/Symbol("UNSET");
-
 function mergeOverrideProps(defaults, overrides) {
   if (!overrides) {
     return defaults;
   }
-
   var result = _extends({}, defaults);
-
   for (var _i = 0, _Object$keys = Object.keys(overrides); _i < _Object$keys.length; _i++) {
     var key = _Object$keys[_i];
     var defaultVal = defaults[key];
     var overrideVal = overrides[key];
-
     if (overrideVal === UNSET) {
       delete result[key];
     } else {
@@ -608,14 +543,11 @@ function mergeOverrideProps(defaults, overrides) {
       if (overrideVal == null && key !== "className" && key !== "style" && !(key.startsWith("on") && typeof defaultVal === "function")) {
         overrideVal = NONE;
       }
-
       result[key] = mergePropVals(key, defaultVal, overrideVal);
     }
   }
-
   return result;
 }
-
 function wrapWithClassName(element, className) {
   var key = isValidElement(element) ? element.key || undefined : undefined;
   return createElement("div", {
@@ -626,7 +558,6 @@ function wrapWithClassName(element, className) {
     }
   }, element);
 }
-
 function deriveOverride(x) {
   if (!x) {
     // undefined Binding is an empty Binding
@@ -666,9 +597,8 @@ function deriveOverride(x) {
         props: {},
         type: "default"
       });
-    } // Else, assume this is just a props object.
-
-
+    }
+    // Else, assume this is just a props object.
     return {
       type: "default",
       props: x
@@ -679,68 +609,53 @@ function deriveOverride(x) {
       render: x
     };
   }
-
   throw new Error("Unexpected override: " + x);
 }
-
 function mergeVariants(v1, v2) {
   if (!v1 || !v2) {
     return v1 || v2 || {};
   }
-
   return _extends({}, v1, v2);
 }
-
 function mergeVariantsWithStates(variants, $state, linkedStates) {
   return _extends({}, variants, Object.fromEntries(linkedStates.map(function (_ref) {
     var variantGroup = _ref.variantGroup,
-        statePath = _ref.statePath;
+      statePath = _ref.statePath;
     return [variantGroup, _get($state, statePath)];
   })));
 }
-
 function mergeArgs(a1, a2) {
   if (!a1 || !a2) {
     return a1 || a2 || {};
   }
-
   return _extends({}, a1, a2);
 }
-
 function mergeFlexOverrides(o1, o2) {
   if (!o2) {
     return o1;
   }
-
   var keys = Array.from(new Set([].concat(Object.keys(o1), Object.keys(o2))));
   var merged = {};
-
   for (var _i2 = 0, _keys = keys; _i2 < _keys.length; _i2++) {
     var key = _keys[_i2];
     merged[key] = mergeFlexOverride(o1[key], o2[key]);
   }
-
   return merged;
 }
-
 function mergeFlexOverride(fo1, fo2) {
   var _o1$props, _ref2;
-
   if (!fo1) {
     return fo2;
   }
-
   if (!fo2) {
     return fo1;
   }
-
   var o1 = deriveOverride(fo1);
   var o2 = deriveOverride(fo2);
   var wrap = chainSingleArgFuncs.apply(void 0, [o1.wrap, o2.wrap].filter(notNil));
-  var wrapChildren = chainSingleArgFuncs.apply(void 0, [o1.wrapChildren, o2.wrapChildren].filter(notNil)); // "render" type always takes precedence, but we still merge the props
-
+  var wrapChildren = chainSingleArgFuncs.apply(void 0, [o1.wrapChildren, o2.wrapChildren].filter(notNil));
+  // "render" type always takes precedence, but we still merge the props
   var props = mergeOverrideProps((_o1$props = o1.props) != null ? _o1$props : {}, o2.props);
-
   if (o2.type === "render") {
     return {
       render: o2.render,
@@ -749,7 +664,6 @@ function mergeFlexOverride(fo1, fo2) {
       wrapChildren: wrapChildren
     };
   }
-
   if (o1.type === "render") {
     return {
       render: o1.render,
@@ -757,9 +671,8 @@ function mergeFlexOverride(fo1, fo2) {
       wrap: wrap,
       wrapChildren: wrapChildren
     };
-  } // "as" will take precedence
-
-
+  }
+  // "as" will take precedence
   var as = (_ref2 = o2.type === "as" ? o2.as : undefined) != null ? _ref2 : o1.type === "as" ? o1.as : undefined;
   return _extends({
     props: props,
@@ -769,26 +682,22 @@ function mergeFlexOverride(fo1, fo2) {
     as: as
   } : {});
 }
-
 function deriveRenderOpts(props, config) {
   var name = config.name,
-      descendantNames = config.descendantNames,
-      internalVariantPropNames = config.internalVariantPropNames,
-      internalArgPropNames = config.internalArgPropNames;
+    descendantNames = config.descendantNames,
+    internalVariantPropNames = config.internalVariantPropNames,
+    internalArgPropNames = config.internalArgPropNames;
   var reservedPropNames = ["variants", "args", "overrides"];
   var variants = mergeVariants(omit.apply(void 0, [pick.apply(void 0, [props].concat(internalVariantPropNames))].concat(reservedPropNames)), props.variants);
   var args = mergeArgs(omit.apply(void 0, [pick.apply(void 0, [props].concat(internalArgPropNames))].concat(reservedPropNames)), props.args);
   var overrides = mergeFlexOverrides(omit.apply(void 0, [pick.apply(void 0, [props].concat(descendantNames))].concat(internalArgPropNames, internalVariantPropNames, reservedPropNames)), props.overrides);
   var leftoverProps = omit.apply(void 0, [props, "variants", "args", "overrides"].concat(descendantNames, internalVariantPropNames, internalArgPropNames));
-
   if (Object.keys(leftoverProps).length > 0) {
     var _mergeFlexOverrides;
-
     overrides = mergeFlexOverrides(overrides, (_mergeFlexOverrides = {}, _mergeFlexOverrides[name] = {
       props: leftoverProps
     }, _mergeFlexOverrides));
   }
-
   return {
     variants: variants,
     args: args,
@@ -799,7 +708,6 @@ function deriveRenderOpts(props, config) {
 var isDefaultValue = function isDefaultValue(val) {
   return val === "PLEASE_RENDER_INSIDE_PROVIDER";
 };
-
 var seenDefaultVariants = {};
 function ensureGlobalVariants(globalVariantValues) {
   Object.entries(globalVariantValues).filter(function (_ref) {
@@ -808,7 +716,6 @@ function ensureGlobalVariants(globalVariantValues) {
   }).forEach(function (_ref2) {
     var key = _ref2[0];
     globalVariantValues[key] = undefined;
-
     if (!seenDefaultVariants[key] && process.env.NODE_ENV === "development") {
       seenDefaultVariants[key] = true;
       var providerName = "" + key[0].toUpperCase() + key.substring(1) + "Context.Provider";
@@ -821,15 +728,13 @@ function ensureGlobalVariants(globalVariantValues) {
 var PlasmicHeadContext = /*#__PURE__*/createContext(undefined);
 function PlasmicHead(props) {
   var Head = useContext(PlasmicHeadContext);
-
   if (!Head) {
-    console.warn("Plasmic: Head meta tags are being ignored. To make them work, pass a Head component into PlasmicRootProvider."); // TODO: Link to doc about Head.
-
+    console.warn("Plasmic: Head meta tags are being ignored. To make them work, pass a Head component into PlasmicRootProvider.");
+    // TODO: Link to doc about Head.
     return null;
-  } // Helmet does not support React.Fragments, so we need to use `[<meta />,
+  }
+  // Helmet does not support React.Fragments, so we need to use `[<meta />,
   // <meta />]` instead of `<><meta /><meta /></>`.
-
-
   return createElement(Head, null, props.image ? [createElement("meta", {
     key: "twitter:card",
     name: "twitter:card",
@@ -905,50 +810,46 @@ var plasmicHeadMeta = {
 var _excluded$1 = ["PlasmicIconType"];
 function PlasmicIcon(props) {
   var PlasmicIconType = props.PlasmicIconType,
-      rest = _objectWithoutPropertiesLoose(props, _excluded$1);
-
+    rest = _objectWithoutPropertiesLoose(props, _excluded$1);
   return createElement(PlasmicIconType, Object.assign({}, rest));
 }
 
 var _excluded$2 = ["src", "className", "displayWidth", "displayHeight", "displayMinWidth", "displayMinHeight", "displayMaxWidth", "displayMaxHeight", "quality", "loader", "imgRef", "style", "loading"];
+// Default image sizes to snap to
 // TODO: make this configurable?
-
 var IMG_SIZES = [16, 32, 48, 64, 96, 128, 256, 384];
 var DEVICE_SIZES = [640, 750, 828, 1080, 1200, 1920, 2048, 3840];
 var ALL_SIZES = /*#__PURE__*/[].concat(IMG_SIZES, DEVICE_SIZES);
 var PlasmicImg = /*#__PURE__*/React__default.forwardRef(function PlasmicImg(props, outerRef) {
   var src = props.src,
-      className = props.className,
-      displayWidth = props.displayWidth,
-      displayHeight = props.displayHeight,
-      displayMinWidth = props.displayMinWidth,
-      displayMinHeight = props.displayMinHeight,
-      displayMaxWidth = props.displayMaxWidth,
-      displayMaxHeight = props.displayMaxHeight,
-      quality = props.quality,
-      loader = props.loader,
-      imgRef = props.imgRef,
-      style = props.style,
-      loading = props.loading,
-      rest = _objectWithoutPropertiesLoose(props, _excluded$2);
-
+    className = props.className,
+    displayWidth = props.displayWidth,
+    displayHeight = props.displayHeight,
+    displayMinWidth = props.displayMinWidth,
+    displayMinHeight = props.displayMinHeight,
+    displayMaxWidth = props.displayMaxWidth,
+    displayMaxHeight = props.displayMaxHeight,
+    quality = props.quality,
+    loader = props.loader,
+    imgRef = props.imgRef,
+    style = props.style,
+    loading = props.loading,
+    rest = _objectWithoutPropertiesLoose(props, _excluded$2);
   var imgProps = Object.assign({}, rest, {
     // Default loading to "lazy" if not specified (which is different from the
     // html img, which defaults to eager!)
     loading: loading != null ? loading : "lazy"
   });
-
   var _ref = typeof src === "string" || !src ? {
-    fullWidth: undefined,
-    fullHeight: undefined,
-    aspectRatio: undefined
-  } : src,
-      fullWidth = _ref.fullWidth,
-      fullHeight = _ref.fullHeight,
-      aspectRatio = _ref.aspectRatio;
-
-  var srcStr = src ? typeof src === "string" ? src : typeof src.src === "string" ? src.src : src.src.src : ""; // Assume external image if either dimension is null and use usual <img>
-
+      fullWidth: undefined,
+      fullHeight: undefined,
+      aspectRatio: undefined
+    } : src,
+    fullWidth = _ref.fullWidth,
+    fullHeight = _ref.fullHeight,
+    aspectRatio = _ref.aspectRatio;
+  var srcStr = src ? typeof src === "string" ? src : typeof src.src === "string" ? src.src : src.src.src : "";
+  // Assume external image if either dimension is null and use usual <img>
   if (fullHeight == null || fullWidth == null) {
     return React__default.createElement("img", Object.assign({
       src: srcStr,
@@ -959,13 +860,10 @@ var PlasmicImg = /*#__PURE__*/React__default.forwardRef(function PlasmicImg(prop
       ref: mergeRefs(imgRef, outerRef)
     }));
   }
-
   if (isSvg(srcStr) && (displayHeight == null || displayHeight === "auto") && (displayWidth == null || displayWidth === "auto")) {
     displayWidth = "100%";
   }
-
   var computedDisplayWidth = displayWidth;
-
   if (fullWidth && fullHeight && (!displayWidth || displayWidth === "auto") && !!getPixelLength(displayHeight)) {
     // If there's a pixel length specified for displayHeight but not displayWidth,
     // then we can derive the pixel length for displayWidth.  Having an explicit
@@ -978,10 +876,8 @@ var PlasmicImg = /*#__PURE__*/React__default.forwardRef(function PlasmicImg(prop
       computedDisplayWidth = getPixelLength(displayHeight) * fullWidth / fullHeight;
     }
   }
-
   var spacerWidth = fullWidth;
   var spacerHeight = fullHeight;
-
   if (aspectRatio && isFinite(aspectRatio) && isSvg(srcStr)) {
     // For SVGs, fullWidth and fullHeight can be rounded values, which would
     // cause some discrepancy between the actual aspect ratio and the aspect
@@ -990,25 +886,21 @@ var PlasmicImg = /*#__PURE__*/React__default.forwardRef(function PlasmicImg(prop
     spacerWidth = DEFAULT_SVG_WIDTH;
     spacerHeight = Math.round(spacerWidth / aspectRatio);
   }
-
   var _getWidths = getWidths(computedDisplayWidth, fullWidth, {
-    minWidth: displayMinWidth
-  }),
-      sizes = _getWidths.sizes,
-      widthDescs = _getWidths.widthDescs;
-
+      minWidth: displayMinWidth
+    }),
+    sizes = _getWidths.sizes,
+    widthDescs = _getWidths.widthDescs;
   var imageLoader = getImageLoader(loader);
   var spacerSvg = "<svg width=\"" + spacerWidth + "\" height=\"" + spacerHeight + "\" xmlns=\"http://www.w3.org/2000/svg\" version=\"1.1\"/>";
   var spacerSvgBase64 = typeof window === "undefined" ? Buffer.from(spacerSvg).toString("base64") : window.btoa(spacerSvg);
-
   var wrapperStyle = _extends({}, style || {});
-
   var spacerStyle = _extends({}, pick(style || {}, "objectFit", "objectPosition"));
-
   if (displayWidth != null && displayWidth !== "auto") {
     // If width is set, set it on the wrapper along with min/max width
     // and just use `width: 100%` on the spacer
-    spacerStyle.width = "100%"; // Rely on the styles set by `classname` on the wrapper:
+    spacerStyle.width = "100%";
+    // Rely on the styles set by `classname` on the wrapper:
     // wrapperStyle.width = displayWidth;
     // wrapperStyle.minWidth = displayMinWidth;
     // wrapperStyle.maxWidth = displayMaxWidth;
@@ -1022,32 +914,35 @@ var PlasmicImg = /*#__PURE__*/React__default.forwardRef(function PlasmicImg(prop
     // than it should.
     spacerStyle.width = displayWidth;
     wrapperStyle.width = "auto";
-
     if (displayMinWidth) {
-      spacerStyle.minWidth = "100%"; // Rely on min-width set by `classname` on the wrapper:
+      spacerStyle.minWidth = "100%";
+      // Rely on min-width set by `classname` on the wrapper:
       // wrapperStyle.minWidth = displayMinWidth;
     }
 
     if (displayMaxWidth != null && displayMaxWidth !== "none") {
-      spacerStyle.maxWidth = "100%"; // Rely on max-width set by `classname` on the wrapper:
+      spacerStyle.maxWidth = "100%";
+      // Rely on max-width set by `classname` on the wrapper:
       // wrapperStyle.maxWidth = displayMaxWidth;
     }
   }
 
   if (displayHeight != null && displayHeight !== "auto") {
-    spacerStyle.height = "100%"; // wrapperStyle.height = displayHeight;
+    spacerStyle.height = "100%";
+    // wrapperStyle.height = displayHeight;
     // wrapperStyle.minHeight = displayMinHeight;
     // wrapperStyle.maxHeight = displayMaxHeight;
   } else {
     spacerStyle.height = displayHeight;
     wrapperStyle.height = "auto";
-
     if (displayMinHeight) {
-      spacerStyle.minHeight = "100%"; // wrapperStyle.minHeight = displayMinHeight;
+      spacerStyle.minHeight = "100%";
+      // wrapperStyle.minHeight = displayMinHeight;
     }
 
     if (displayMaxHeight != null && displayMaxHeight !== "none") {
-      spacerStyle.maxHeight = "100%"; // wrapperStyle.maxHeight = displayMaxHeight;
+      spacerStyle.maxHeight = "100%";
+      // wrapperStyle.maxHeight = displayMaxHeight;
     }
   }
 
@@ -1073,20 +968,19 @@ var PlasmicImg = /*#__PURE__*/React__default.forwardRef(function PlasmicImg(prop
     className: "__wab_img"
   }));
 });
-
 function makePicture(opts) {
   // If imageLoader is undefined, then this renders to just a normal
   // <img />.  Else it will render to a <picture> with a <source> for
   // webp, and srcSet/sizes set according to width requirements.
   var imageLoader = opts.imageLoader,
-      widthDescs = opts.widthDescs,
-      src = opts.src,
-      quality = opts.quality,
-      style = opts.style,
-      className = opts.className,
-      sizes = opts.sizes,
-      imgProps = opts.imgProps,
-      ref = opts.ref;
+    widthDescs = opts.widthDescs,
+    src = opts.src,
+    quality = opts.quality,
+    style = opts.style,
+    className = opts.className,
+    sizes = opts.sizes,
+    imgProps = opts.imgProps,
+    ref = opts.ref;
   return React__default.createElement("picture", {
     className: "__wab_picture"
   }, imageLoader && imageLoader.supportsUrl(src) && React__default.createElement("source", {
@@ -1122,21 +1016,16 @@ function makePicture(opts) {
     })
   })));
 }
-
 var DEFAULT_SVG_WIDTH = 10000;
-
 function isSvg(src) {
   return src.endsWith(".svg") || src.startsWith("data:image/svg");
 }
-
 function getClosestPresetSize(width, fullWidth) {
   var _ALL_SIZES$findIndex;
-
   var nextBiggerIndex = (_ALL_SIZES$findIndex = ALL_SIZES.findIndex(function (w) {
     return w >= width;
   })) != null ? _ALL_SIZES$findIndex : ALL_SIZES.length - 1;
   var nextBigger = ALL_SIZES[nextBiggerIndex];
-
   if (nextBigger >= fullWidth) {
     // If the requested width is larger than the fullWidth,
     // we just use the original width instead. It's impossible
@@ -1149,19 +1038,15 @@ function getClosestPresetSize(width, fullWidth) {
     // less than 48)
     return undefined;
   }
-
   return nextBigger;
 }
 /**
  * Computes the appropriate srcSet and sizes to use
  */
-
-
 function getWidths(width, fullWidth, extra) {
   var minWidth = extra == null ? void 0 : extra.minWidth;
   var pixelWidth = getPixelLength(width);
   var pixelMinWidth = getPixelLength(minWidth);
-
   if (pixelWidth != null && (!minWidth || pixelMinWidth != null)) {
     // If there's an exact width, then we just need to display it at 1x and 2x density
     return {
@@ -1174,14 +1059,12 @@ function getWidths(width, fullWidth, extra) {
       }],
       sizes: undefined
     };
-  } // Otherwise we don't know what sizes we'll end up, so we just cap it at
+  }
+  // Otherwise we don't know what sizes we'll end up, so we just cap it at
   // device width.  TODO: do better!
-
-
   var usefulSizes = DEVICE_SIZES.filter(function (size) {
     return !fullWidth || size < fullWidth;
   });
-
   if (!!fullWidth && usefulSizes.length === 0) {
     // image fullWidth is smaller than all device sizes.  So all we can do
     // is offer 1x
@@ -1193,7 +1076,6 @@ function getWidths(width, fullWidth, extra) {
       sizes: undefined
     };
   }
-
   return {
     widthDescs: usefulSizes.map(function (size) {
       return {
@@ -1214,33 +1096,25 @@ function getWidths(width, fullWidth, extra) {
     sizes: "100vw"
   };
 }
-
 function getPixelLength(length) {
   if (length == null || length == "") {
     return undefined;
   }
-
   if (typeof length === "number") {
     return length;
   }
-
   var parsed = parseNumeric(length);
-
   if (parsed && (!parsed.units || parsed.units === "px")) {
     return parsed.num;
   }
-
   return undefined;
 }
-
 function parseNumeric(val) {
   // Parse strings like "30", "30px", "30%", "30px /* blah blah */"
   var res = val.match(/^\s*(-?(?:\d+\.\d*|\d*\.\d+|\d+))\s*([a-z]*|%)\s*(?:\/\*.*)?$/i);
-
   if (res == null) {
     return undefined;
   }
-
   var num = res[1];
   var units = res[2];
   return {
@@ -1248,7 +1122,6 @@ function parseNumeric(val) {
     units: units
   };
 }
-
 function getImageLoader(loader) {
   if (loader == null) {
     return undefined;
@@ -1258,14 +1131,12 @@ function getImageLoader(loader) {
     return loader;
   }
 }
-
 var PLASMIC_IMAGE_LOADER = {
   supportsUrl: function supportsUrl(src) {
     return src.startsWith("https://img.plasmic.app") && !isSvg(src);
   },
   transformUrl: function transformUrl(opts) {
     var _opts$quality;
-
     var params = [opts.width ? "w=" + opts.width : undefined, "q=" + ((_opts$quality = opts.quality) != null ? _opts$quality : 75), opts.format ? "f=" + opts.format : undefined].filter(function (x) {
       return !!x;
     });
@@ -1284,46 +1155,37 @@ var PlasmicLink = /*#__PURE__*/React__default.forwardRef(function PlasmicLink(pr
       ref: ref
     })));
   }
-
   if (props.platform === "gatsby" && isInternalHref(props.href)) {
     return React__default.createElement(props.component, _extends({}, omit(props, "component", "platform", "href"), {
       to: props.href,
       ref: ref
     }));
   }
-
   return React__default.createElement("a", Object.assign({}, omit(props, "component", "platform"), {
     ref: ref
   }));
 });
-
 function isInternalHref(href) {
   return /^\/(?!\/)/.test(href);
 }
 
 var PlasmicTranslatorContext = /*#__PURE__*/React__default.createContext(undefined);
-
 function isIterable(val) {
   return val != null && typeof val[Symbol.iterator] === "function";
 }
-
 function genTranslatableString(elt) {
   var components = {};
   var componentsCount = 0;
-
   var getText = function getText(node) {
     if (!node) {
       return "";
     }
-
     if (typeof node === "number" || typeof node === "boolean" || typeof node === "string") {
       return node.toString();
     }
-
     if (typeof node !== "object") {
       return "";
     }
-
     if (Array.isArray(node) || isIterable(node)) {
       return Array.from(node).map(function (child) {
         return getText(child);
@@ -1331,18 +1193,15 @@ function genTranslatableString(elt) {
         return !!child;
       }).join("");
     }
-
     var nodeChildren = hasKey(node, "props") && hasKey(node.props, "children") && node.props.children || hasKey(node, "children") && node.children || [];
     var contents = "" + React__default.Children.toArray(nodeChildren).map(function (child) {
       return getText(child);
     }).filter(function (child) {
       return !!child;
     }).join("");
-
     if (React__default.isValidElement(node) && node.type === React__default.Fragment) {
       return contents;
     }
-
     var componentId = componentsCount + 1;
     componentsCount++;
     components[componentId] = React__default.isValidElement(node) ? React__default.cloneElement(node, {
@@ -1351,7 +1210,6 @@ function genTranslatableString(elt) {
     }) : node;
     return "<" + componentId + ">" + contents + "</" + componentId + ">";
   };
-
   var str = getText(elt);
   return {
     str: str,
@@ -1360,33 +1218,28 @@ function genTranslatableString(elt) {
   };
 }
 function Trans(_ref) {
-  var children = _ref.children;
-
+  var transKey = _ref.transKey,
+    children = _ref.children;
   var _t = React__default.useContext(PlasmicTranslatorContext);
-
   if (!_t) {
     warnNoTranslationFunctionAtMostOnce();
     return children;
   }
-
   var _genTranslatableStrin = genTranslatableString(children),
-      str = _genTranslatableStrin.str,
-      components = _genTranslatableStrin.components,
-      componentsCount = _genTranslatableStrin.componentsCount;
-
-  return _t(str, componentsCount > 0 ? {
+    str = _genTranslatableStrin.str,
+    components = _genTranslatableStrin.components,
+    componentsCount = _genTranslatableStrin.componentsCount;
+  return _t(transKey != null ? transKey : str, componentsCount > 0 ? {
     components: components
   } : undefined);
 }
 var hasWarned = false;
-
 function warnNoTranslationFunctionAtMostOnce() {
   if (!hasWarned) {
     console.warn("Using Plasmic Translation but no translation function has been provided");
     hasWarned = true;
   }
 }
-
 function hasKey(v, key) {
   return typeof v === "object" && v !== null && key in v;
 }
@@ -1397,68 +1250,56 @@ function PlasmicSlot(props) {
 }
 function renderPlasmicSlot(opts) {
   var as = opts.as,
-      defaultContents = opts.defaultContents,
-      value = opts.value,
-      rest = _objectWithoutPropertiesLoose(opts, _excluded$3);
-
+    defaultContents = opts.defaultContents,
+    value = opts.value,
+    rest = _objectWithoutPropertiesLoose(opts, _excluded$3);
   var content = value === undefined ? defaultContents : value;
-
   if (!content || Array.isArray(content) && content.length === 0) {
     return null;
-  } // If the content is a raw string, then we need to wrap the raw string
+  }
+  // If the content is a raw string, then we need to wrap the raw string
   // into an element, in case the slot is inside a flex-gap
   // container (you cannot apply margin to just a text node).
-
-
   var maybeString = maybeAsString(content);
-
   if (maybeString) {
     content = createElement("span", {
       className: "__wab_slot-string-wrapper"
     }, maybeString);
   }
-
   var nonEmptyProps = Object.keys(rest).filter(function (p) {
     return !!rest[p];
   });
-
   if (nonEmptyProps.length === 0) {
     // No attrs to apply to the slot (which means the slot is unstyled), then
     // just render the content directly; no need for style wrapper.
     return createElement(Fragment, null, content);
   }
-
   return createElement(as || "span", mergeProps({
     className: "__wab_slot"
   }, rest), content);
 }
-
 function maybeAsString(node) {
   // Unwrap fragments
-  if (isValidElement(node) && ( // Fragment and Trans don't render DOM elements
+  if (isValidElement(node) && (
+  // Fragment and Trans don't render DOM elements
   node.type === Fragment || node.type === Trans)) {
     return maybeAsString(node.props.children);
   }
-
   if (typeof node === "string") {
     return node;
   }
-
   if (Array.isArray(node) && node.length === 1 && typeof node[0] === "string") {
     return node[0];
   }
-
   return undefined;
 }
 
 var listeners = [];
 var queries = {};
-
 function matchScreenVariants() {
   if (!isBrowser) {
     return [];
   }
-
   return Object.entries(queries).filter(function (_ref) {
     var query = _ref[1];
     return window.matchMedia(query).matches;
@@ -1466,14 +1307,11 @@ function matchScreenVariants() {
     var name = _ref2[0];
     return name;
   });
-} // undefined if screen variants have never been calculated
-
-
+}
+// undefined if screen variants have never been calculated
 var curScreenVariants = undefined;
-
 function recalculateScreenVariants() {
   var screenVariant = matchScreenVariants();
-
   if (!curScreenVariants || screenVariant.join("") !== curScreenVariants.join("")) {
     curScreenVariants = screenVariant;
     ReactDOM__default.unstable_batchedUpdates(function () {
@@ -1483,7 +1321,6 @@ function recalculateScreenVariants() {
     });
   }
 }
-
 function ensureInitCurScreenVariants() {
   // Initializes curScreenVariants if it hadn't been before. Note that this must
   // be called from within an effect.
@@ -1491,11 +1328,9 @@ function ensureInitCurScreenVariants() {
     curScreenVariants = matchScreenVariants();
   }
 }
-
 if (isBrowser) {
   window.addEventListener("resize", recalculateScreenVariants);
 }
-
 function createUseScreenVariants(isMulti, screenQueries) {
   Object.assign(queries, screenQueries);
   curScreenVariants = undefined;
@@ -1505,38 +1340,35 @@ function createUseScreenVariants(isMulti, screenQueries) {
     // only happens on the client), we then actually ask for the real screen variant
     // and, if different from [] or undefined, forces a re-render.
     var _React$useState = useState(),
-        updateState = _React$useState[1];
-
-    var lastScreenVariantsRef = useRef(curScreenVariants || []); // We do useLayoutEffect instead of useEffect to immediately
+      updateState = _React$useState[1];
+    var lastScreenVariantsRef = useRef(curScreenVariants || []);
+    // We do useLayoutEffect instead of useEffect to immediately
     // register our forceUpdate. This ensures that if there was
     // a window resize event between render and effects, that the
     // listener will be registered in time
-
     useIsomorphicLayoutEffect(function () {
       var updateIfChanged = function updateIfChanged() {
         if (curScreenVariants && lastScreenVariantsRef.current.join("") !== curScreenVariants.join("")) {
-          lastScreenVariantsRef.current = curScreenVariants; // Force update
-
+          lastScreenVariantsRef.current = curScreenVariants;
+          // Force update
           updateState({});
         }
-      }; // Listeners are invoked whenever the window is resized
-
-
-      listeners.push(updateIfChanged); // Initialize the curScreenVariants for the first time.  We don't need
+      };
+      // Listeners are invoked whenever the window is resized
+      listeners.push(updateIfChanged);
+      // Initialize the curScreenVariants for the first time.  We don't need
       // to invoke the listeners here because all components will already
       // have this effect running and will re-render if the real screen
       // variant is non-empty.
-
-      ensureInitCurScreenVariants(); // Now, if the curScreenVariants differs from what we returned last,
+      ensureInitCurScreenVariants();
+      // Now, if the curScreenVariants differs from what we returned last,
       // then force a re-render.
-
       updateIfChanged();
       return function () {
         // Remove our listener on unmount
         listeners.splice(listeners.indexOf(updateIfChanged), 1);
       };
     }, []);
-
     if (isMulti) {
       return curScreenVariants || [];
     } else if (curScreenVariants) {
@@ -1550,9 +1382,10 @@ function createUseScreenVariants(isMulti, screenQueries) {
 var PlasmicRootContext = /*#__PURE__*/createContext(undefined);
 function PlasmicRootProvider(props) {
   var platform = props.platform,
-      children = props.children,
-      userAuthToken = props.userAuthToken,
-      user = props.user;
+    children = props.children,
+    userAuthToken = props.userAuthToken,
+    isUserLoading = props.isUserLoading,
+    user = props.user;
   var context = useMemo(function () {
     return {
       platform: platform
@@ -1561,9 +1394,10 @@ function PlasmicRootProvider(props) {
   var dataSourceContextValue = useMemo(function () {
     return {
       userAuthToken: userAuthToken,
-      user: user
+      user: user,
+      isUserLoading: isUserLoading
     };
-  }, [userAuthToken, user]);
+  }, [userAuthToken, isUserLoading, user]);
   return createElement(PlasmicRootContext.Provider, {
     value: context
   }, createElement(SSRProvider, null, createElement(PlasmicDataSourceContextProvider, {
@@ -1582,67 +1416,55 @@ var hasWarnedSSR = false;
 /**
  * Warns the user if PlasmicRootProvider is not used
  */
-
 function useEnsureSSRProvider() {
   var hasRoot = useHasPlasmicRoot();
-
   if (hasRoot || hasWarnedSSR || process.env.NODE_ENV !== "development") {
     return;
   }
-
   hasWarnedSSR = true;
   console.warn("Plasmic: To ensure your components work correctly with server-side rendering, please use PlasmicRootProvider at the root of your application.  See https://docs.plasmic.app/learn/ssr");
 }
 
 function useFocused(opts) {
   var _useAriaFocusRing = useFocusRing({
-    within: false,
-    isTextInput: opts.isTextInput
-  }),
-      isFocused = _useAriaFocusRing.isFocused,
-      focusProps = _useAriaFocusRing.focusProps;
-
+      within: false,
+      isTextInput: opts.isTextInput
+    }),
+    isFocused = _useAriaFocusRing.isFocused,
+    focusProps = _useAriaFocusRing.focusProps;
   return [isFocused, focusProps];
 }
-
 function useFocusVisible(opts) {
   var _useAriaFocusRing2 = useFocusRing({
-    within: false,
-    isTextInput: opts.isTextInput
-  }),
-      isFocusVisible = _useAriaFocusRing2.isFocusVisible,
-      focusProps = _useAriaFocusRing2.focusProps;
-
+      within: false,
+      isTextInput: opts.isTextInput
+    }),
+    isFocusVisible = _useAriaFocusRing2.isFocusVisible,
+    focusProps = _useAriaFocusRing2.focusProps;
   return [isFocusVisible, focusProps];
 }
-
 function useFocusedWithin(opts) {
   var _useAriaFocusRing3 = useFocusRing({
-    within: true,
-    isTextInput: opts.isTextInput
-  }),
-      isFocused = _useAriaFocusRing3.isFocused,
-      focusProps = _useAriaFocusRing3.focusProps;
-
+      within: true,
+      isTextInput: opts.isTextInput
+    }),
+    isFocused = _useAriaFocusRing3.isFocused,
+    focusProps = _useAriaFocusRing3.focusProps;
   return [isFocused, focusProps];
 }
-
 function useFocusVisibleWithin(opts) {
   var _useAriaFocusRing4 = useFocusRing({
-    within: true,
-    isTextInput: opts.isTextInput
-  }),
-      isFocusVisible = _useAriaFocusRing4.isFocusVisible,
-      focusProps = _useAriaFocusRing4.focusProps;
-
+      within: true,
+      isTextInput: opts.isTextInput
+    }),
+    isFocusVisible = _useAriaFocusRing4.isFocusVisible,
+    focusProps = _useAriaFocusRing4.focusProps;
   return [isFocusVisible, focusProps];
 }
-
 function useHover() {
   var _React$useState = useState(false),
-      isHover = _React$useState[0],
-      setHover = _React$useState[1];
-
+    isHover = _React$useState[0],
+    setHover = _React$useState[1];
   return [isHover, {
     onMouseEnter: function onMouseEnter() {
       return setHover(true);
@@ -1652,12 +1474,10 @@ function useHover() {
     }
   }];
 }
-
 function usePressed() {
   var _React$useState2 = useState(false),
-      isPressed = _React$useState2[0],
-      setPressed = _React$useState2[1];
-
+    isPressed = _React$useState2[0],
+    setPressed = _React$useState2[1];
   return [isPressed, {
     onMouseDown: function onMouseDown() {
       return setPressed(true);
@@ -1667,7 +1487,6 @@ function usePressed() {
     }
   }];
 }
-
 var TRIGGER_TO_HOOK = {
   useHover: useHover,
   useFocused: useFocused,
@@ -1680,7 +1499,6 @@ var TRIGGER_TO_HOOK = {
  * Installs argment trigger. All the useTrigger calls must use hardcoded `trigger` arg,
  * as it's not valid to install variable React hooks!
  */
-
 function useTrigger(trigger, opts) {
   return TRIGGER_TO_HOOK[trigger](opts);
 }
@@ -1696,111 +1514,159 @@ function generateStateOnChangeProp($state, stateName, dataReps) {
  *   - parent[][].counter[].count
  * We need to pass `parent[index1][index2].counter to the child component
  */
-
 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
- */
-
-function set(obj, keys, val) {
-  keys = keys.split ? keys.split(".") : keys;
-  var i = 0,
-      l = keys.length,
-      t = obj,
-      x,
-      k;
-
-  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 useIsomorphicLayoutEffect$1 = typeof window !== "undefined" ? useLayoutEffect : useEffect;
 function shallowEqual(a1, a2) {
   if (a1.length !== a2.length) {
     return false;
   }
-
   for (var i = 0; i < a1.length; i++) {
     if (a1[i] !== a2[i]) {
       return false;
     }
   }
-
   return true;
 }
 function isNum(value) {
   return typeof value === "symbol" ? false : !isNaN(+value);
 }
+function assert(cond, msg) {
+  if (msg === void 0) {
+    msg = "Assertion failed";
+  }
+  if (!cond) {
+    // We always generate an non empty message so that it doesn't get swallowed
+    // by the async library.
+    msg = (typeof msg === "string" ? msg : msg()) || "Assertion failed";
+    debugger;
+    throw new Error(msg);
+  }
+}
+/**
+ * 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;
+  while (i < l) {
+    k = keys[i++];
+    if (k === "__proto__" || k === "constructor" || k === "prototype") break;
+    var newValue = i === l ? val : typeof (x = t[k]) === typeof keys ? x : keys[i] * 0 !== 0 || !!~("" + keys[i]).indexOf(".") ? {} : [];
+    assignValue(t, k, newValue);
+    t = t[k];
+  }
+}
+/**
+ * Forked from lodash
+ */
+function baseAssignValue(object, key, value) {
+  if (key == "__proto__") {
+    Object.defineProperty(object, key, {
+      configurable: true,
+      enumerable: true,
+      value: value,
+      writable: true
+    });
+  } else {
+    object[key] = value;
+  }
+}
+function eq(value, other) {
+  return value === other || value !== value && other !== other;
+}
+function assignValue(object, key, value) {
+  var objValue = object[key];
+  if (!(Object.prototype.hasOwnProperty.call(object, key) && eq(objValue, value)) || value === undefined && !(key in object)) {
+    baseAssignValue(object, key, value);
+  }
+}
 
 var ARRAY_SYMBOL = /*#__PURE__*/Symbol("[]");
 
+var UNINITIALIZED = /*#__PURE__*/Symbol("plasmic.unitialized");
 var StateSpecNode = /*#__PURE__*/function () {
   function StateSpecNode(specs) {
     this.specs = specs;
     this.edges = new Map();
+    this.state = {};
   }
-
   var _proto = StateSpecNode.prototype;
-
   _proto.hasEdge = function hasEdge(key) {
     return this.edges.has(key);
   };
-
   _proto.addEdge = function addEdge(key, node) {
     this.edges.set(key, node);
   };
-
+  _proto.children = function children() {
+    return this.edges.values();
+  };
   _proto.makeTransition = function makeTransition(key) {
     key = isNum(key) ? ARRAY_SYMBOL : key;
     return this.edges.get(key);
   };
-
   _proto.isLeaf = function isLeaf() {
     return this.edges.size === 0;
   };
-
   _proto.hasArrayTransition = function hasArrayTransition() {
     return this.edges.has(ARRAY_SYMBOL);
   };
-
   _proto.getSpec = function getSpec() {
     return this.specs[0];
   };
-
   _proto.getAllSpecs = function getAllSpecs() {
     return this.specs;
   };
-
+  _proto.getState = function getState(path) {
+    return this.state[JSON.stringify(path)];
+  };
+  _proto.clearStates = function clearStates() {
+    this.state = {};
+  };
+  _proto.states = function states() {
+    return Object.values(this.state);
+  };
+  _proto.hasState = function hasState(path) {
+    var key = JSON.stringify(path);
+    return key in this.state;
+  };
+  _proto.createStateCell = function createStateCell(path) {
+    var key = JSON.stringify(path);
+    this.state[key] = {
+      listeners: [],
+      initialValue: UNINITIALIZED,
+      registeredInitFunc: this.getSpec().initFunc,
+      path: path
+    };
+  };
+  _proto.setInitialValue = function setInitialValue(path, value) {
+    var key = JSON.stringify(path);
+    this.state[key].initialValue = value;
+  };
+  _proto.getInitialValue = function getInitialValue(path) {
+    var key = JSON.stringify(path);
+    return this.state[key].initialValue;
+  };
+  _proto.addListener = function addListener(path, f) {
+    var key = JSON.stringify(path);
+    this.state[key].listeners.push(f);
+  };
   return StateSpecNode;
 }();
 var transformPathStringToObj = function transformPathStringToObj(str) {
   var splitStatePathPart = function splitStatePathPart(state) {
     return state.endsWith("[]") ? [].concat(splitStatePathPart(state.slice(0, -2)), [ARRAY_SYMBOL]) : [state];
   };
-
   return str.split(".").flatMap(splitStatePathPart);
 };
-function buildGraph(specs) {
+function buildTree(specs) {
   var internalSpec = specs.map(function (spec) {
     return _extends({}, spec, {
       pathObj: transformPathStringToObj(spec.path),
@@ -1809,7 +1675,6 @@ function buildGraph(specs) {
       })
     });
   });
-
   var rec = function rec(currentPath) {
     var node = new StateSpecNode(internalSpec.filter(function (spec) {
       return shallowEqual(currentPath, spec.pathObj.slice(0, currentPath.length));
@@ -1817,7 +1682,6 @@ function buildGraph(specs) {
     node.getAllSpecs().forEach(function (spec) {
       if (spec.pathObj.length > currentPath.length) {
         var nextKey = spec.pathObj[currentPath.length];
-
         if (!node.hasEdge(nextKey)) {
           node.addEdge(nextKey, rec([].concat(currentPath, [nextKey])));
         }
@@ -1825,397 +1689,313 @@ function buildGraph(specs) {
     });
     return node;
   };
-
   return rec([]);
 }
-
-var mkUntrackedValue = function mkUntrackedValue(o) {
-  return o != null && typeof o === "object" ? ref(o) : o;
-};
-
-function shallowEqual$1(a1, a2) {
-  if (a1.length !== a2.length) {
-    return false;
-  }
-
-  for (var i = 0; i < a1.length; i++) {
-    if (a1[i] !== a2[i]) {
-      return false;
+function getLeaves(root) {
+  var leaves = [];
+  var rec = function rec(node) {
+    for (var _iterator = _createForOfIteratorHelperLoose(node.children()), _step; !(_step = _iterator()).done;) {
+      var child = _step.value;
+      rec(child);
+    }
+    if (node.isLeaf()) {
+      leaves.push(node);
+    }
+  };
+  rec(root);
+  return leaves;
+}
+function findStateCell(root, pathStr, repetitionIndex) {
+  var realPath = [];
+  var pathObj = transformPathStringToObj(pathStr);
+  var currRepIndex = 0;
+  for (var _iterator2 = _createForOfIteratorHelperLoose(pathObj), _step2; !(_step2 = _iterator2()).done;) {
+    var part = _step2.value;
+    if (typeof part === "symbol") {
+      if (!root.hasArrayTransition() || !repetitionIndex || currRepIndex > repetitionIndex.length) {
+        console.log(root);
+        throw new Error("transition not found: pathStr " + pathStr + " part " + (typeof part === "symbol" ? "[]" : part));
+      }
+      realPath.push(repetitionIndex[currRepIndex++]);
+      root = root.makeTransition(ARRAY_SYMBOL);
+    } else {
+      if (!root.hasEdge(part)) {
+        throw new Error("transition not found: pathStr " + pathStr + " part " + (typeof part === "symbol" ? "[]" : part));
+      }
+      realPath.push(part);
+      root = root.makeTransition(part);
     }
   }
-
-  return true;
+  return {
+    node: root,
+    realPath: realPath
+  };
 }
 
 function isNum$1(value) {
   return typeof value === "symbol" ? false : !isNaN(+value);
 }
-
-function saveNewState($$state, path, spec) {
-  var key = JSON.stringify(path);
-  $$state.existingStates.set(key, {
-    path: path,
-    specKey: spec.path
+function canProxy(value) {
+  return typeof value === "object" && value != null;
+}
+function initializeStateValue($$state, initialSpecNode, initialStatePath, proxyRoot) {
+  var stateAccess = new Set();
+  var $state = create$StateProxy($$state, function (node, path) {
+    return {
+      get: function get() {
+        stateAccess.add({
+          path: path,
+          node: node
+        });
+        var spec = node.getSpec();
+        if (spec.valueProp) {
+          return $$state.props[spec.valueProp];
+        } else if (!node.hasState(path) && spec.initFunc) {
+          return initializeStateValue($$state, node, path, proxyRoot);
+        }
+        return _get(proxyRoot, path);
+      },
+      set: function set() {
+        throw new Error("Cannot update state values during initialization");
+      }
+    };
   });
-
-  if (!$$state.statesInstanceBySpec.has(spec.path)) {
-    $$state.statesInstanceBySpec.set(spec.path, []);
-  }
-
-  $$state.statesInstanceBySpec.get(spec.path).push({
-    path: path,
-    specKey: spec.path
+  stateAccess.forEach(function (_ref) {
+    var node = _ref.node,
+      path = _ref.path;
+    node.addListener(path, function () {
+      var newValue = initialSpecNode.getSpec().initFunc($$state.props, $state, $$state.ctx);
+      set(proxyRoot, initialStatePath, newValue);
+    });
   });
+  var initialValue = initialSpecNode.getState(initialStatePath).registeredInitFunc($$state.props, $state, $$state.ctx);
+  initialSpecNode.setInitialValue(initialStatePath, clone(initialValue));
+  var initialSpec = initialSpecNode.getSpec();
+  var value = initialSpec.isImmutable ? mkUntrackedValue(initialValue) : clone(initialValue);
+  set(proxyRoot, initialStatePath, value);
+  //immediately fire onChange
+  if (initialSpec.onChangeProp) {
+    var _$$state$props$initia, _$$state$props;
+    (_$$state$props$initia = (_$$state$props = $$state.props)[initialSpec.onChangeProp]) == null ? void 0 : _$$state$props$initia.call(_$$state$props, initialValue);
+  }
+  return initialValue;
 }
-
-function create$StateProxy($$state, handlers) {
-  var rec = function rec(currPath, currNode) {
+function create$StateProxy($$state, leafHandlers) {
+  var rec = function rec(currPath, currNode, isOutside, proxyRoot, initialObject) {
     var getNextPath = function getNextPath(property) {
       return [].concat(currPath, [isNum$1(property) ? +property : property]);
     };
-
-    return new Proxy(currNode.hasArrayTransition() ? [] : {}, {
+    var spec = currNode.getSpec();
+    var handlers = {
       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 (path.length >= prefixPath.length && shallowEqual$1(path.slice(0, prefixPath.length), prefixPath)) {
-            deleteState($$state, path);
-            specKeysToUpdate.add(specKey);
-          }
-        });
-        specKeysToUpdate.forEach(function (specKey) {
-          var spec = $$state.specsByKey[specKey];
-
-          if (spec.onChangeProp) {
-            var _$$state$props$spec$o, _$$state$props;
-
-            (_$$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);
-          }
-        });
+        if (!isOutside && !currNode.isLeaf() && !currNode.hasArrayTransition() && !isNum$1(property)) {
+          throw new Error("Can't delete a property in the middle of the state spec");
+        }
+        delete _get($$state.stateValues, currPath)[property];
+        if (spec.onChangeProp) {
+          var _$$state$props$spec$o, _$$state$props2;
+          //we are always in a leaf, since we only have two cases:
+          // 1 - delete properties outside the state tree
+          // 2 - delete indices in repeated implicit states, but these can't be exposed, so they don't have onChangeProp
+          (_$$state$props$spec$o = (_$$state$props2 = $$state.props)[spec.onChangeProp]) == null ? void 0 : _$$state$props$spec$o.call(_$$state$props2, _get($$state.stateValues, currPath.slice(spec.pathObj.length)));
+        }
         return Reflect.deleteProperty(target, property);
       },
       get: function get(target, property, receiver) {
+        proxyRoot = proxyRoot == null ? receiver : proxyRoot;
         var nextPath = getNextPath(property);
+        if (isOutside || currNode.isLeaf()) {
+          return Reflect.get(target, property, receiver);
+        }
         var nextNode = currNode.makeTransition(property);
-
-        if (nextNode) {
-          if (nextNode.isLeaf()) {
-            var _handlers$get, _handlers;
-
-            target[property] = (_handlers$get = (_handlers = handlers(nextPath, nextNode.getSpec())).get) == null ? void 0 : _handlers$get.call(_handlers, target, property, receiver);
-          } else if (!(property in target)) {
-            target[property] = rec(nextPath, nextNode);
-          }
+        if (nextNode != null && nextNode.isLeaf()) {
+          var _leafHandlers$get, _leafHandlers;
+          return (_leafHandlers$get = (_leafHandlers = leafHandlers(nextNode, nextPath, proxyRoot)).get) == null ? void 0 : _leafHandlers$get.call(_leafHandlers, target, property, receiver);
+        } else if (nextNode && !(property in target)) {
+          target[property] = rec(nextPath, nextNode, false, proxyRoot, undefined);
         }
-
         return Reflect.get(target, property, receiver);
       },
       set: function set$1(target, property, value, receiver) {
+        var _nextNode, _nextNode2;
+        proxyRoot = proxyRoot == null ? receiver : proxyRoot;
         var nextPath = getNextPath(property);
         var nextNode = currNode.makeTransition(property);
-
-        if (nextNode && typeof property !== "symbol") {
-          if (nextNode.isLeaf()) {
-            var _handlers$set, _handlers2;
-
-            // reached the end of the spec
-            target[property] = (_handlers$set = (_handlers2 = handlers(nextPath, nextNode.getSpec())).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, nextNode);
-
-            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;
-          }
-        }
-
         if (property === "registerInitFunc" && currPath.length === 0) {
           return Reflect.set(target, property, value, receiver);
         }
-
-        if (currNode.hasArrayTransition()) {
-          var _currNode$makeTransit, _currNode$makeTransit2;
-
+        if (!nextNode && currNode.hasArrayTransition()) {
           set($$state.stateValues, nextPath, value);
-
-          (_currNode$makeTransit = currNode.makeTransition(ARRAY_SYMBOL)) == null ? void 0 : (_currNode$makeTransit2 = _currNode$makeTransit.getAllSpecs()) == null ? void 0 : _currNode$makeTransit2.forEach(function (spec) {
-            if (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);
-            }
-          });
+          //array can set his own properties such as length, map, ...
           return Reflect.set(target, property, value, receiver);
-        } // invalid setting a value that doesn't make part of the spec
-
-
-        return false;
-      }
-    });
-  };
-
-  return rec([], $$state.rootStateSpec);
-}
-
-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 = [];
-
-  if (path.length !== spec.pathObj.length) {
-    throw new Error("Unexpected error: state path and spec path have different lengths");
-  }
-
-  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 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
-        });
-
-        if (spec.valueProp) {
-          return !spec.isRepeated ? $$state.props[spec.valueProp] : _get($$state.props[spec.valueProp], path.slice(1));
         }
-
-        if ($$state.existingStates.has(key)) {
-          // is already initialized
-          return _get($$state.stateValues, path);
-        } else if (spec.initFunc) {
-          initializeStateValue($$state, path, spec);
+        if ((_nextNode = nextNode) != null && _nextNode.isLeaf()) {
+          var _leafHandlers$set, _leafHandlers2;
+          (_leafHandlers$set = (_leafHandlers2 = leafHandlers(nextNode, nextPath, proxyRoot)).set) == null ? void 0 : _leafHandlers$set.call(_leafHandlers2, target, property, value, receiver);
         }
-
-        return _get($$state.stateValues, path);
-      },
-      set: function set() {
-        throw new Error("Cannot update state values during initialization");
+        if (!isOutside && !currNode.isLeaf() && !nextNode) {
+          // can't set an unknown field in $state
+          return false;
+        }
+        // we keep pointing to the leaf
+        if (!nextNode) {
+          assert(isOutside || currNode.isLeaf, "unexpected update in nextNode");
+          nextNode = currNode;
+        }
+        if (canProxy(value)) {
+          target[property] = rec(nextPath, nextNode, isOutside || currNode.isLeaf(), proxyRoot, value);
+        } else if (!isOutside && !currNode.isLeaf() && !((_nextNode2 = nextNode) != null && _nextNode2.isLeaf())) {
+          throw new Error("inserting a primitive value into a non-leaf");
+        } else {
+          Reflect.set(target, property, value, receiver);
+        }
+        nextNode.getAllSpecs().forEach(function (spec) {
+          if (spec.onChangeProp) {
+            var _$$state$props$spec$o2, _$$state$props3;
+            (_$$state$props$spec$o2 = (_$$state$props3 = $$state.props)[spec.onChangeProp]) == null ? void 0 : _$$state$props$spec$o2.call(_$$state$props3, value);
+          }
+        });
+        var newValue = (isOutside || currNode.isLeaf()) && currNode.getSpec().isImmutable ? mkUntrackedValue(value) : value;
+        set($$state.stateValues, nextPath, newValue);
+        return true;
       }
     };
-  });
-  (_$$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 saveValue($$state, initialStatePath, initialSpec, initialSpec.initFunc($$state.props, $state, $$state.ctx, getIndexes(path, spec)));
-    });
-    $$state.unsubscriptionsByState[initialStateKey].push(unsubscribe);
-  });
-  var initialValue = initialSpec.initFunc($$state.props, $state, $$state.ctx, getIndexes(initialStatePath, initialSpec));
-  saveStateInitialValue($$state, initialStatePath, initialSpec, initialValue);
-  return initialValue;
-}
-
-function saveValue($$state, path, spec, value) {
-  if (spec.isImmutable) {
-    set($$state.stateValues, path, mkUntrackedValue(value));
-  } else {
-    set($$state.stateValues, path, value);
-  }
-}
-
-function saveStateInitialValue($$state, path, spec, initialValue) {
-  if (spec.isImmutable) {
-    var untrackedValue = mkUntrackedValue(initialValue);
-
-    set($$state.stateValues, path, untrackedValue);
-
-    set($$state.initStateValues, path, clone(untrackedValue));
-  } else {
-    set($$state.stateValues, path, clone(initialValue));
-
-    set($$state.initStateValues, path, clone(initialValue));
-  }
+    var baseObject = !isOutside && !currNode.isLeaf() ? currNode.hasArrayTransition() ? [] : {} : Array.isArray(initialObject) ? [] : Object.create(Object.getPrototypeOf(initialObject));
+    var proxyObj = new Proxy(baseObject, handlers);
+    if (initialObject) {
+      Reflect.ownKeys(initialObject).forEach(function (key) {
+        var desc = Object.getOwnPropertyDescriptor(initialObject, key);
+        if (desc.get || desc.set) {
+          Object.defineProperty(baseObject, key, desc);
+        } else {
+          proxyObj[key] = initialObject[key];
+        }
+      });
+    }
+    return proxyObj;
+  };
+  return rec([], $$state.rootSpecTree, false, undefined, undefined);
 }
-
+var mkUntrackedValue = function mkUntrackedValue(o) {
+  return o != null && typeof o === "object" ? ref(o) : o;
+};
 function useDollarState(specs, props, $ctx) {
-  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: {},
-    ctx: {},
-    registrationsQueue: [],
-    rootStateSpec: buildGraph(specs)
-  })).current;
-  $$state.props = mkUntrackedValue(props);
-  $$state.ctx = mkUntrackedValue($ctx != null ? $ctx : {});
-  var $state = React__default.useRef(Object.assign(create$StateProxy($$state, function (path, spec) {
-    var key = JSON.stringify(path);
-
-    if (!$$state.existingStates.has(key)) {
-      var _spec$initVal;
-
-      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 $$state = React__default.useRef(function () {
+    var rootSpecTree = buildTree(specs);
     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(_t, _p, value) {
-        saveValue($$state, path, spec, value);
-
-        if (spec.onChangeProp) {
-          var _$$state$props$spec$o3, _$$state$props3;
-
-          (_$$state$props$spec$o3 = (_$$state$props3 = $$state.props)[spec.onChangeProp]) == null ? void 0 : _$$state$props$spec$o3.call(_$$state$props3, value, path);
+      rootSpecTree: rootSpecTree,
+      specTreeLeaves: getLeaves(rootSpecTree),
+      stateValues: proxy({}),
+      props: {},
+      ctx: {},
+      registrationsQueue: []
+    };
+  }()).current;
+  $$state.props = props;
+  $$state.ctx = $ctx != null ? $ctx : {};
+  var $state = React__default.useRef(function () {
+    var useRef$state = Object.assign(create$StateProxy($$state, function (node, path, proxyRoot) {
+      if (!node.hasState(path)) {
+        node.createStateCell(path);
+        var spec = node.getSpec();
+        if (spec.initFunc) {
+          initializeStateValue($$state, node, path, proxyRoot);
+        } else if (!spec.valueProp) {
+          set(proxyRoot, path, spec.initVal);
         }
-
-        return true;
       }
-    };
-  }), {
-    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, $ctx != null ? $ctx : {}, getIndexes(path, $$state.specsByKey[specKey])));
-      })) {
-        $$state.registrationsQueue.push({
-          pathStr: pathStr,
-          f: f
-        });
+      return {
+        get: function get(target, property, receiver) {
+          var spec = node.getSpec();
+          if (spec.valueProp) {
+            return $$state.props[spec.valueProp];
+          } else {
+            return Reflect.get(target, property, receiver);
+          }
+        }
+      };
+    }), {
+      registerInitFunc: function registerInitFunc(pathStr, f, repetitionIndex) {
+        var _findStateCell = findStateCell($$state.rootSpecTree, pathStr, repetitionIndex),
+          node = _findStateCell.node,
+          realPath = _findStateCell.realPath;
+        if (!node.hasState(realPath)) {
+          node.createStateCell(realPath);
+        }
+        if (!deepEqual(node.getState(realPath).initialValue, f($$state.props, useRef$state, $$state.ctx))) {
+          $$state.registrationsQueue.push({
+            node: node,
+            path: realPath,
+            f: f
+          });
+        }
       }
-    }
-  })).current; // For each spec with an initFunc, evaluate it and see if
+    });
+    return useRef$state;
+  }()).current;
+  // For each spec with an initFunc, evaluate it and see if
   // the init value has changed. If so, reset its state.
-
   var resetSpecs = [];
-  $$state.existingStates.forEach(function (_ref4) {
-    var path = _ref4.path,
-        specKey = _ref4.specKey;
-    var spec = $$state.specsByKey[specKey];
-
-    if (spec.initFunc) {
-      var newInit = spec.initFunc(props, $state, $ctx != null ? $ctx : {}, getIndexes(path, spec));
-
-      if (!deepEqual(newInit, _get($$state.initStateValues, path))) {
+  $$state.specTreeLeaves.flatMap(function (node) {
+    return node.states().map(function (stateCell) {
+      return {
+        stateCell: stateCell,
+        node: node
+      };
+    });
+  }).forEach(function (_ref2) {
+    var stateCell = _ref2.stateCell,
+      node = _ref2.node;
+    if (stateCell.registeredInitFunc) {
+      var newInit = stateCell.registeredInitFunc(props, $state, $ctx != null ? $ctx : {});
+      if (!deepEqual(newInit, stateCell.initialValue)) {
         resetSpecs.push({
-          path: path,
-          spec: spec
+          stateCell: stateCell,
+          node: node
         });
       }
     }
   });
+  var reInitializeState = function reInitializeState(node, stateCell) {
+    var newInit = initializeStateValue($$state, node, stateCell.path, $state);
+    var spec = node.getSpec();
+    if (spec.onChangeProp) {
+      var _$$state$props$spec$o3, _$$state$props4;
+      (_$$state$props$spec$o3 = (_$$state$props4 = $$state.props)[spec.onChangeProp]) == null ? void 0 : _$$state$props$spec$o3.call(_$$state$props4, newInit);
+    }
+  };
   useIsomorphicLayoutEffect$1(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);
-      }
+    resetSpecs.forEach(function (_ref3) {
+      var stateCell = _ref3.stateCell,
+        node = _ref3.node;
+      reInitializeState(node, stateCell);
     });
   }, [props, resetSpecs]);
   useIsomorphicLayoutEffect$1(function () {
-    $$state.registrationsQueue.forEach(function (_ref6) {
-      var f = _ref6.f,
-          pathStr = _ref6.pathStr;
-      $$state.specsByKey[pathStr].initFunc = f;
+    $$state.registrationsQueue.forEach(function (_ref4) {
+      var node = _ref4.node,
+        path = _ref4.path,
+        f = _ref4.f;
+      var stateCell = node.getState(path);
+      stateCell.registeredInitFunc = f;
+      reInitializeState(node, stateCell);
     });
     $$state.registrationsQueue = [];
-  }, [$$state.registrationsQueue]); // Re-render if any value changed in one of these objects
-
+  }, [$$state.registrationsQueue]);
+  // immediately initialize exposed non-private states
+  useIsomorphicLayoutEffect$1(function () {
+    $$state.specTreeLeaves.forEach(function (node) {
+      var spec = node.getSpec();
+      if (!spec.isRepeated && spec.type !== "private" && spec.initFunc) {
+        node.createStateCell(spec.pathObj);
+        initializeStateValue($$state, node, spec.pathObj, $state);
+      }
+    });
+  }, []);
+  // 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, $ctx) {
-  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: {},
-    ctx: {},
-    registrationsQueue: [],
-    rootStateSpec: buildGraph(specs)
-  });
-  $$state.props = mkUntrackedValue(props);
-  $$state.ctx = mkUntrackedValue($ctx);
-  var $state = {};
-
-  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;
 }
 
@@ -2230,7 +2010,6 @@ 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;
   });
@@ -2241,7 +2020,7 @@ function mergeVariantToggles() {
   return mapValues(grouped, function (subToggles) {
     return Object.fromEntries(subToggles.map(function (_ref2) {
       var def = _ref2.def,
-          active = _ref2.active;
+        active = _ref2.active;
       return [def.variant, !!active];
     }));
   });
@@ -2255,7 +2034,6 @@ function getPlumeType(child) {
   if (!isValidElement(child)) {
     return undefined;
   }
-
   var childType = child.type;
   return childType.__plumeType || (childType.getPlumeType == null ? void 0 : childType.getPlumeType(child.props));
 }
@@ -2263,20 +2041,17 @@ function getPlumeType(child) {
 var _excluded$4 = ["link", "isDisabled", "startIcon", "endIcon", "showStartIcon", "showEndIcon", "children"];
 function useButton(plasmicClass, props, config, ref) {
   var _ref, _ref2, _extends2, _overrides;
-
   if (ref === void 0) {
     ref = 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);
-
+    isDisabled = props.isDisabled,
+    startIcon = props.startIcon,
+    endIcon = props.endIcon,
+    showStartIcon = props.showStartIcon,
+    showEndIcon = props.showEndIcon,
+    children = props.children,
+    rest = _objectWithoutPropertiesLoose(props, _excluded$4);
   var variants = _extends({}, pick.apply(void 0, [props].concat(plasmicClass.internalVariantProps)), mergeVariantToggles({
     def: config.showStartIconVariant,
     active: showStartIcon
@@ -2287,9 +2062,7 @@ function useButton(plasmicClass, props, config, ref) {
     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), (_extends2 = {}, _extends2[config.contentSlot] = children, _extends2));
-
   var overrides = (_overrides = {}, _overrides[config.root] = {
     as: !!link ? "a" : "button",
     props: _extends({}, omit.apply(void 0, [rest].concat(plasmicClass.internalArgProps, plasmicClass.internalVariantProps)), {
@@ -2332,31 +2105,25 @@ function asAriaCheckboxProps(props) {
     isSelected: props.isChecked,
     defaultSelected: props.defaultChecked
   });
-
   delete ariaProps["isChecked"];
   delete ariaProps["defaultChecked"];
   return ariaProps;
 }
-
 function useCheckbox(plasmicClass, props, config, ref) {
   var _overrides, _ref;
-
   if (ref === void 0) {
     ref = null;
   }
-
   var children = props.children,
-      isDisabled = props.isDisabled,
-      isIndeterminate = props.isIndeterminate;
+    isDisabled = props.isDisabled,
+    isIndeterminate = props.isIndeterminate;
   useEnsureSSRProvider();
   var inputRef = useRef(null);
   var rootRef = useRef(null);
   var ariaProps = asAriaCheckboxProps(props);
   var state = useToggleState(ariaProps);
-
   var _useAriaCheckbox = useCheckbox$1(ariaProps, state, inputRef),
-      inputProps = _useAriaCheckbox.inputProps;
-
+    inputProps = _useAriaCheckbox.inputProps;
   var variants = _extends({}, pick.apply(void 0, [props].concat(plasmicClass.internalVariantProps)), mergeVariantToggles({
     def: config.isDisabledVariant,
     active: isDisabled
@@ -2370,7 +2137,6 @@ function useCheckbox(plasmicClass, props, config, ref) {
     def: config.noLabelVariant,
     active: !children
   }));
-
   var overrides = (_overrides = {}, _overrides[config.root] = {
     as: "label",
     props: mergeProps(getStyleProps(props), {
@@ -2382,9 +2148,7 @@ function useCheckbox(plasmicClass, props, config, ref) {
       }))), children);
     }
   }, _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 {
       setChecked: function setChecked(checked) {
@@ -2399,12 +2163,10 @@ function useCheckbox(plasmicClass, props, config, ref) {
       },
       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) {
@@ -2430,7 +2192,6 @@ function useCheckbox(plasmicClass, props, config, ref) {
  * 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 {
@@ -2438,15 +2199,13 @@ function deriveItemsFromChildren(children, opts) {
       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
+    sectionPlumeType = opts.sectionPlumeType,
+    invalidChildError = opts.invalidChildError;
+  // For Plume items without an explicit key, we assign a key as the index
   // of the collection.
-
   var itemCount = 0;
   var sectionCount = 0;
-
   var ensureValue = function ensureValue(element) {
     if (!propInChild(element, "value")) {
       if (opts.requireItemValue && PLUME_STRICT_MODE) {
@@ -2463,32 +2222,24 @@ function deriveItemsFromChildren(children, opts) {
       return element;
     }
   };
-
   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
@@ -2497,7 +2248,6 @@ function deriveItemsFromChildren(children, opts) {
           })];
         }
       }
-
       if (PLUME_STRICT_MODE) {
         throw new Error(invalidChildError != null ? invalidChildError : "Unexpected child");
       } else {
@@ -2505,7 +2255,6 @@ function deriveItemsFromChildren(children, opts) {
       }
     });
   };
-
   return {
     items: flattenedChildren(children),
     disabledKeys: disabledKeys
@@ -2513,9 +2262,9 @@ function deriveItemsFromChildren(children, opts) {
 }
 function useDerivedItemsFromChildren(children, opts) {
   var itemPlumeType = opts.itemPlumeType,
-      sectionPlumeType = opts.sectionPlumeType,
-      invalidChildError = opts.invalidChildError,
-      requireItemValue = opts.requireItemValue;
+    sectionPlumeType = opts.sectionPlumeType,
+    invalidChildError = opts.invalidChildError,
+    requireItemValue = opts.requireItemValue;
   return React__default.useMemo(function () {
     return deriveItemsFromChildren(children, {
       itemPlumeType: itemPlumeType,
@@ -2529,7 +2278,6 @@ function useDerivedItemsFromChildren(children, opts) {
  * 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
@@ -2543,19 +2291,17 @@ function renderCollectionNode(node) {
  * 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
+    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,
+    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.
     , {
@@ -2570,7 +2316,8 @@ function renderAsCollectionChild(child, opts) {
     }, option);
   } else {
     var group = child;
-    return React__default.createElement(Section // Note that we are using the whole section-like element as the title
+    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.
     , {
@@ -2588,23 +2335,19 @@ function renderAsCollectionChild(child, opts) {
     });
   }
 }
-
 function getItemLikeKey(element) {
   var _getChildProp2;
-
   return (_getChildProp2 = getChildProp(element, "value")) != null ? _getChildProp2 : element.key;
-} // PlasmicLoader-aware function to get prop from child.
-
-
+}
+// 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)`.
-
+}
+// 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.
-
-
+}
+// 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,
@@ -2615,7 +2358,6 @@ function cloneChild(child, props) {
       key: props.key
     } : {}));
   }
-
   return React__default.cloneElement(child, props);
 }
 
@@ -2631,18 +2373,15 @@ var COLLECTION_OPTS = {
 /**
  * Converts props from BaseMenuProps to react-aria's useMenu() props.
  */
-
 function asAriaMenuProps(props) {
   var children = props.children,
-      rest = _objectWithoutPropertiesLoose(props, _excluded$5);
-
+    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;
-
+      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);
   }, []);
@@ -2654,38 +2393,29 @@ function asAriaMenuProps(props) {
     })
   };
 }
-
 function useMenu(plasmicClass, props, config, ref) {
   var _overrides, _extends2;
-
   if (ref === void 0) {
     ref = null;
   }
-
   useEnsureSSRProvider();
-
   var _asAriaMenuProps = asAriaMenuProps(props),
-      ariaProps = _asAriaMenuProps.ariaProps;
-
+    ariaProps = _asAriaMenuProps.ariaProps;
   var triggerContext = useContext(TriggeredOverlayContext);
   var rootRef = useRef(null);
   var state = useTreeState(ariaProps);
   var menuListRef = useRef(null);
-
   var _useAriaMenu = useMenu$1(_extends({}, ariaProps, {
-    autoFocus: triggerContext == null ? void 0 : triggerContext.autoFocus
-  }), state, menuListRef),
-      menuProps = _useAriaMenu.menuProps;
-
+      autoFocus: triggerContext == null ? void 0 : triggerContext.autoFocus
+    }), state, menuListRef),
+    menuProps = _useAriaMenu.menuProps;
   var contextValue = useMemo(function () {
     return {
       state: state,
       menuProps: props
     };
   }, [state, props]);
-
   var variants = _extends({}, pick.apply(void 0, [props].concat(plasmicClass.internalVariantProps)));
-
   var overrides = (_overrides = {}, _overrides[config.root] = {
     props: mergeProps(getStyleProps(props), {
       ref: rootRef
@@ -2697,13 +2427,11 @@ function useMenu(plasmicClass, props, config, ref) {
       style: _extends({}, noOutline())
     })
   }, _overrides);
-
   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 {
       getFocusedValue: function getFocusedValue() {
@@ -2739,30 +2467,24 @@ function useMenu(plasmicClass, props, config, ref) {
 
 function useMenuGroup(plasmicClass, props, config) {
   var _extends2, _overrides;
-
   var context = useContext(MenuContext);
   var node = props._node;
-
   if (!context || !node) {
     if (PLUME_STRICT_MODE) {
       throw new Error("You can only use a Menu.Group within a Menu component.");
     }
-
     return getDefaultPlasmicProps(plasmicClass, props);
   }
-
   var _useMenuSection = useMenuSection({
-    heading: props.title,
-    "aria-label": props["aria-label"]
-  }),
-      headingProps = _useMenuSection.headingProps,
-      groupProps = _useMenuSection.groupProps;
-
+      heading: props.title,
+      "aria-label": props["aria-label"]
+    }),
+    headingProps = _useMenuSection.headingProps,
+    groupProps = _useMenuSection.groupProps;
   var _useSeparator = useSeparator({
-    elementType: "li"
-  }),
-      separatorProps = _useSeparator.separatorProps;
-
+      elementType: "li"
+    }),
+    separatorProps = _useSeparator.separatorProps;
   var variants = _extends({}, pick.apply(void 0, [props].concat(plasmicClass.internalVariantProps)), mergeVariantToggles({
     def: config.noTitleVariant,
     active: !props.title
@@ -2770,11 +2492,9 @@ function useMenuGroup(plasmicClass, props, config) {
     def: config.isFirstVariant,
     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.itemsSlot] = Array.from(node.childNodes).map(function (childNode) {
     return renderCollectionNode(childNode);
   }), _extends2));
-
   var overrides = (_overrides = {}, _overrides[config.root] = {
     props: getStyleProps(props)
   }, _overrides[config.separator] = {
@@ -2803,45 +2523,39 @@ function useMenuGroup(plasmicClass, props, config) {
 
 function useMenuItem(plasmicClass, props, config) {
   var _extends2, _overrides;
-
   var menuContext = useContext(MenuContext);
   var triggerContext = useContext(TriggeredOverlayContext);
-
   if (!menuContext) {
     if (PLUME_STRICT_MODE) {
       throw new Error("You can only use a Menu.Item within a Menu component.");
     }
-
     return getDefaultPlasmicProps(plasmicClass, props);
   }
-
   var children = props.children,
-      onAction = props.onAction;
+    onAction = props.onAction;
   var state = menuContext.state,
-      menuProps = menuContext.menuProps; // We pass in the Node secretly as an undocumented prop from <Select />
-
+    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;
-
+      // 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
@@ -2849,9 +2563,7 @@ function useMenuItem(plasmicClass, props, config) {
     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: "li",
     props: mergeProps(menuItemProps, {
@@ -2874,48 +2586,38 @@ function useMenuItem(plasmicClass, props, config) {
  * A menu trigger hook that combines react-aria's useMenuTrigger, useAriaMenuTrigger,
  * useOverlayPosition, useOverlay, and usePress
  */
-
 function useMenuTrigger(opts, state) {
   var triggerRef = opts.triggerRef,
-      isDisabled = opts.isDisabled,
-      placement = opts.placement,
-      menuMatchTriggerWidth = opts.menuMatchTriggerWidth,
-      menuWidth = opts.menuWidth,
-      menu = opts.menu;
-
+    isDisabled = opts.isDisabled,
+    placement = opts.placement,
+    menuMatchTriggerWidth = opts.menuMatchTriggerWidth,
+    menuWidth = opts.menuWidth,
+    menu = opts.menu;
   var _useAriaMenuTrigger = useMenuTrigger$1({
-    type: "menu",
-    isDisabled: isDisabled
-  }, state, triggerRef),
-      triggerPressProps = _useAriaMenuTrigger.menuTriggerProps,
-      menuProps = _useAriaMenuTrigger.menuProps;
-
+      type: "menu",
+      isDisabled: isDisabled
+    }, state, triggerRef),
+    triggerPressProps = _useAriaMenuTrigger.menuTriggerProps,
+    menuProps = _useAriaMenuTrigger.menuProps;
   var _usePress = usePress(_extends({}, triggerPressProps, {
-    isDisabled: isDisabled
-  })),
-      triggerProps = _usePress.pressProps;
-
+      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,
@@ -2935,11 +2637,11 @@ function useMenuTrigger(opts, state) {
 
 function DropdownMenu(props) {
   var isOpen = props.isOpen,
-      defaultOpen = props.defaultOpen,
-      onOpenChange = props.onOpenChange,
-      children = props.children,
-      placement = props.placement,
-      menu = props.menu;
+    defaultOpen = props.defaultOpen,
+    onOpenChange = props.onOpenChange,
+    children = props.children,
+    placement = props.placement,
+    menu = props.menu;
   var triggerRef = useRef(null);
   var state = useMenuTriggerState({
     isOpen: isOpen,
@@ -2947,16 +2649,14 @@ function DropdownMenu(props) {
     onOpenChange: onOpenChange,
     shouldFlip: true
   });
-
   var _useMenuTrigger = useMenuTrigger({
-    triggerRef: triggerRef,
-    placement: placement,
-    menu: menu
-  }, state),
-      triggerProps = _useMenuTrigger.triggerProps,
-      makeMenu = _useMenuTrigger.makeMenu,
-      triggerContext = _useMenuTrigger.triggerContext;
-
+      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, {
@@ -2966,20 +2666,18 @@ function DropdownMenu(props) {
 
 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;
+    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 triggerRef = useRef(null);
@@ -2989,22 +2687,19 @@ function useMenuButton(plasmicClass, props, config, outerRef) {
     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;
-
+      isDisabled: isDisabled,
+      triggerRef: triggerRef,
+      placement: placement,
+      menuMatchTriggerWidth: menuMatchTriggerWidth,
+      menuWidth: menuWidth,
+      menu: menu
+    }, state),
+    triggerProps = _useMenuTrigger.triggerProps,
+    makeMenu = _useMenuTrigger.makeMenu,
+    triggerContext = _useMenuTrigger.triggerContext;
   var _useFocusable = useFocusable(props, triggerRef),
-      triggerFocusProps = _useFocusable.focusableProps;
-
+    triggerFocusProps = _useFocusable.focusableProps;
   var variants = _extends({}, pick.apply(void 0, [props].concat(plasmicClass.internalVariantProps)), mergeVariantToggles({
     def: config.isOpenVariant,
     active: state.isOpen
@@ -3012,9 +2707,7 @@ function useMenuButton(plasmicClass, props, config, outerRef) {
     def: config.isDisabledVariant,
     active: isDisabled
   }));
-
   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, {
@@ -3117,21 +2810,18 @@ var COLLECTION_OPTS$1 = {
  * with the secret derived `_node` prop.  That means Option and OptionGroup
  * render functions can assume that _node is passed in.
  */
-
 function useAriaSelectProps(props) {
   var value = props.value,
-      defaultValue = props.defaultValue,
-      children = props.children,
-      onChange = props.onChange,
-      rest = _objectWithoutPropertiesLoose(props, _excluded$6);
-
+    defaultValue = props.defaultValue,
+    children = props.children,
+    onChange = props.onChange,
+    rest = _objectWithoutPropertiesLoose(props, _excluded$6);
   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;
-
+      invalidChildError: "Can only use Select.Option and Select.OptionGroup as children to Select",
+      requireItemValue: true
+    })),
+    items = _useDerivedItemsFromC.items,
+    disabledKeys = _useDerivedItemsFromC.disabledKeys;
   var collectionChildRenderer = useCallback(function (child) {
     return renderAsCollectionChild(child, COLLECTION_OPTS$1);
   }, []);
@@ -3156,42 +2846,33 @@ function useAriaSelectProps(props) {
     })
   };
 }
-
 function useSelect(plasmicClass, props, config, ref) {
   var _overrides, _extends2;
-
   if (ref === void 0) {
     ref = null;
   }
-
   useEnsureSSRProvider();
-
   var _useAriaSelectProps = useAriaSelectProps(props),
-      ariaProps = _useAriaSelectProps.ariaProps;
-
+    ariaProps = _useAriaSelectProps.ariaProps;
   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;
-
+    name = props.name,
+    menuWidth = props.menuWidth,
+    menuMatchTriggerWidth = props.menuMatchTriggerWidth,
+    autoFocus = props.autoFocus,
+    placeholder = props.placeholder,
+    selectedContent = props.selectedContent;
   var _useAriaSelect = useSelect$1(ariaProps, state, triggerRef),
-      triggerPressProps = _useAriaSelect.triggerProps,
-      menuProps = _useAriaSelect.menuProps;
-
+    triggerPressProps = _useAriaSelect.triggerProps,
+    menuProps = _useAriaSelect.menuProps;
   var _usePress = usePress(_extends({}, triggerPressProps, {
-    isDisabled: isDisabled
-  })),
-      triggerProps = _usePress.pressProps;
-
+      isDisabled: isDisabled
+    })),
+    triggerProps = _usePress.pressProps;
   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.isOpenVariant,
     active: state.isOpen
@@ -3202,7 +2883,6 @@ function useSelect(plasmicClass, props, config, ref) {
     def: config.isDisabledVariant,
     active: isDisabled
   }));
-
   var triggerContext = useMemo(function () {
     return {
       triggerRef: triggerRef,
@@ -3247,13 +2927,11 @@ function useSelect(plasmicClass, props, config, ref) {
       }, 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() {
@@ -3283,12 +2961,10 @@ function useSelect(plasmicClass, props, config, ref) {
       },
       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() {
@@ -3317,20 +2993,17 @@ function useSelect(plasmicClass, props, config, ref) {
     state: plumeState
   };
 }
-
 function ListBoxWrapper(props) {
   var state = props.state,
-      menuProps = props.menuProps,
-      children = props.children;
+    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;
-
+      isVirtualized: false,
+      autoFocus: state.focusStrategy || true,
+      disallowEmptySelection: true
+    }), state, ref),
+    listBoxProps = _useListBox.listBoxProps;
   return cloneElement(children, mergeProps(children.props, listBoxProps, {
     style: noOutline(),
     ref: ref
@@ -3339,13 +3012,10 @@ function ListBoxWrapper(props) {
 
 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
@@ -3353,31 +3023,27 @@ function useSelectOption(plasmicClass, props, config, outerRef) {
     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 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;
-
+      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
@@ -3388,9 +3054,7 @@ function useSelectOption(plasmicClass, props, config, outerRef) {
     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,
@@ -3410,32 +3074,26 @@ function useSelectOption(plasmicClass, props, config, outerRef) {
 
 function useSelectOptionGroup(plasmicClass, props, config) {
   var _extends2, _overrides;
-
-  var state = useContext(SelectContext); // `node` should exist if the OptionGroup was instantiated properly
+  var state = useContext(SelectContext);
+  // `node` should exist if the OptionGroup was instantiated properly
   // within a Select
-
   var node = props._node;
-
   if (!state || !node) {
     if (PLUME_STRICT_MODE) {
       throw new Error("You can only use a Select.OptionGroup within a Select component.");
     }
-
     return getDefaultPlasmicProps(plasmicClass, props);
   }
-
   var _useListBoxSection = useListBoxSection({
-    heading: props.title,
-    "aria-label": props["aria-label"]
-  }),
-      headingProps = _useListBoxSection.headingProps,
-      groupProps = _useListBoxSection.groupProps;
-
+      heading: props.title,
+      "aria-label": props["aria-label"]
+    }),
+    headingProps = _useListBoxSection.headingProps,
+    groupProps = _useListBoxSection.groupProps;
   var _useSeparator = useSeparator({
-    elementType: "li"
-  }),
-      separatorProps = _useSeparator.separatorProps;
-
+      elementType: "li"
+    }),
+    separatorProps = _useSeparator.separatorProps;
   var variants = _extends({}, pick.apply(void 0, [props].concat(plasmicClass.internalVariantProps)), mergeVariantToggles({
     def: config.noTitleVariant,
     active: !props.title
@@ -3443,11 +3101,9 @@ function useSelectOptionGroup(plasmicClass, props, config) {
     def: config.isFirstVariant,
     active: 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) {
     return renderCollectionNode(childNode);
   }), _extends2));
-
   var overrides = (_overrides = {}, _overrides[config.root] = {
     props: getStyleProps(props)
   }, _overrides[config.separator] = {
@@ -3477,30 +3133,24 @@ function asAriaSwitchProps(props) {
     isSelected: props.isChecked,
     defaultSelected: props.defaultChecked
   });
-
   delete ariaProps["isChecked"];
   delete ariaProps["defaultChecked"];
   return ariaProps;
 }
-
 function useSwitch(plasmicClass, props, config, ref) {
   var _overrides, _ref;
-
   if (ref === void 0) {
     ref = null;
   }
-
   var children = props.children,
-      isDisabled = props.isDisabled;
+    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;
-
+    inputProps = _useAriaSwitch.inputProps;
   var variants = _extends({}, pick.apply(void 0, [props].concat(plasmicClass.internalVariantProps)), mergeVariantToggles({
     def: config.isDisabledVariant,
     active: isDisabled
@@ -3511,7 +3161,6 @@ function useSwitch(plasmicClass, props, config, ref) {
     def: config.noLabelVariant,
     active: !children
   }));
-
   var overrides = (_overrides = {}, _overrides[config.root] = {
     as: "label",
     props: mergeProps(getStyleProps(props), {
@@ -3523,9 +3172,7 @@ function useSwitch(plasmicClass, props, config, ref) {
       }))), children);
     }
   }, _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 {
       setChecked: function setChecked(checked) {
@@ -3540,12 +3187,10 @@ function useSwitch(plasmicClass, props, config, ref) {
       },
       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) {
@@ -3566,34 +3211,29 @@ function useSwitch(plasmicClass, props, config, ref) {
 var _excluded$7 = ["isDisabled", "startIcon", "endIcon", "showStartIcon", "showEndIcon", "className", "style", "inputClassName", "inputStyle"];
 function useTextInput(plasmicClass, props, config, ref) {
   var _ref, _ref2, _overrides;
-
   if (ref === void 0) {
     ref = null;
   }
-
   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);
-
+    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 rootRef = useRef(null);
   var inputRef = useRef(null);
   useImperativeHandle(ref, function () {
     return {
       focus: function focus() {
         var _inputRef$current;
-
         (_inputRef$current = inputRef.current) == null ? void 0 : _inputRef$current.focus();
       },
       blur: function blur() {
         var _inputRef$current2;
-
         (_inputRef$current2 = inputRef.current) == null ? void 0 : _inputRef$current2.blur();
       },
       getRoot: function getRoot() {
@@ -3604,7 +3244,6 @@ function useTextInput(plasmicClass, props, config, ref) {
       }
     };
   }, [rootRef, inputRef]);
-
   var variants = _extends({}, pick.apply(void 0, [props].concat(plasmicClass.internalVariantProps)), mergeVariantToggles({
     def: config.showStartIconVariant,
     active: showStartIcon
@@ -3615,9 +3254,7 @@ function useTextInput(plasmicClass, props, config, ref) {
     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 overrides = (_overrides = {}, _overrides[config.root] = {
     props: {
       ref: rootRef,
@@ -3645,19 +3282,15 @@ function useTextInput(plasmicClass, props, config, ref) {
 
 function useTriggeredOverlay(plasmicClass, props, config, outerRef, isDismissable) {
   var _extends2, _overrides;
-
   if (outerRef === void 0) {
     outerRef = null;
   }
-
   if (isDismissable === void 0) {
     isDismissable = true;
   }
-
   var overlayRef = useRef(null);
   var onOverlayRef = mergeRefs(overlayRef, outerRef);
   var context = useContext(TriggeredOverlayContext);
-
   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
@@ -3665,50 +3298,44 @@ function useTriggeredOverlay(plasmicClass, props, config, outerRef, isDismissabl
     if (PLUME_STRICT_MODE) {
       throw new Error("You can only use a triggered overlay with a TriggeredOverlayContext");
     }
-
     return getDefaultPlasmicProps(plasmicClass, props);
   }
-
   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).
-
+    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).
   var _React$useState = useState(false),
-      isRendered = _React$useState[0],
-      setRendered = _React$useState[1];
-
+    isRendered = _React$useState[0],
+    setRendered = _React$useState[1];
   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 _useOverlay = useOverlay({
-    isOpen: state.isOpen,
-    onClose: state.close,
-    isDismissable: isDismissable,
-    shouldCloseOnBlur: true
-  }, overlayRef),
-      overlayAriaProps = _useOverlay.overlayProps;
-
+      isOpen: state.isOpen,
+      onClose: state.close,
+      isDismissable: isDismissable,
+      shouldCloseOnBlur: true
+    }, overlayRef),
+    overlayAriaProps = _useOverlay.overlayProps;
   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;
-
+      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;
   useIsomorphicLayoutEffect(function () {
     if (state.isOpen) {
       requestAnimationFrame(function () {
@@ -3727,7 +3354,6 @@ function useTriggeredOverlay(plasmicClass, props, config, outerRef, isDismissabl
       minWidth: overlayMinTriggerWidth ? triggerWidth : "auto"
     }
   }, overlayAriaProps, overlayPositionProps);
-
   var variants = _extends({}, pick.apply(void 0, [props].concat(plasmicClass.internalVariantProps)), mergeVariantToggles({
     def: config.isPlacedTopVariant,
     active: placementAxis === "top"
@@ -3741,13 +3367,11 @@ function useTriggeredOverlay(plasmicClass, props, config, outerRef, isDismissabl
     def: config.isPlacedRightVariant,
     active: placementAxis === "right"
   }));
-
   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 overrides = (_overrides = {}, _overrides[config.root] = {
     props: mergeProps(overlayProps, getStyleProps(props), {
       ref: onOverlayRef
@@ -3771,5 +3395,5 @@ function useTriggeredOverlay(plasmicClass, props, config, outerRef, isDismissabl
   };
 }
 
-export { DropdownMenu, PlasmicHead, PlasmicIcon, PlasmicImg, PlasmicLink, PlasmicRootProvider, PlasmicSlot, SelectContext, Stack, Trans, TriggeredOverlayContext, classNames, createPlasmicElementProxy, createUseScreenVariants, deriveRenderOpts, ensureGlobalVariants, genTranslatableString, generateStateOnChangeProp, generateStateValueProp, getDataProps, hasVariant, isNum, makeFragment, mergeVariantsWithStates, omit, pick, plasmicHeadMeta, renderPlasmicSlot, set, setPlumeStrictMode, shallowEqual, useButton, useCanvasDollarState, useCheckbox, useDollarState, useIsSSR, useIsomorphicLayoutEffect$1 as useIsomorphicLayoutEffect, useMenu, useMenuButton, useMenuGroup, useMenuItem, useSelect, useSelectOption, useSelectOptionGroup, useSwitch, useTextInput, useTrigger, useTriggeredOverlay, wrapWithClassName };
+export { DropdownMenu, PlasmicHead, PlasmicIcon, PlasmicImg, PlasmicLink, PlasmicPageGuard, 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, useCheckbox, useDollarState, useIsSSR, useMenu, useMenuButton, useMenuGroup, useMenuItem, useSelect, useSelectOption, useSelectOptionGroup, useSwitch, useTextInput, useTrigger, useTriggeredOverlay, wrapWithClassName };
 //# sourceMappingURL=react-web.esm.js.map