@plasmicapp/react-web 0.2.201 → 0.2.202

package/skinny/dist/index.js

@@ -5,13 +5,13 @@ import * as React from 'react';
 import React__default, { useLayoutEffect, useEffect } from 'react';
 import get from 'dlv';
 export { default as get } from 'dlv';
-import { c as createElementWithChildren, m as mergeProps, e as ensureNotArray, N as NONE, a as mergePropVals, i as isReactNode, b as isBrowser, u as useIsomorphicLayoutEffect$1 } from './react-utils-ee4e03ba.js';
-import { _ as __awaiter, a as __generator, b as __assign, c as __rest, d as __spreadArray, e as __read, o as omit, p as pick, f as __values, i as isSubset, g as chainSingleArgFuncs, n as notNil, h as __extends, j as ensure } from './common-9d6d348d.js';
-export { o as omit, p as pick } from './common-9d6d348d.js';
+import { c as createElementWithChildren, m as mergeProps, e as ensureNotArray, N as NONE, a as mergePropVals, i as isReactNode, b as isBrowser, u as useIsomorphicLayoutEffect$1 } from './react-utils-5ff031c2.js';
+import { _ as __awaiter, a as __generator, b as __assign, c as __rest, d as __spreadArray, e as __read, o as omit, p as pick, f as __values, i as isSubset, g as chainSingleArgFuncs, n as notNil, h as __extends, j as ensure } from './common-ed411407.js';
+export { o as omit, p as pick } from './common-ed411407.js';
 export { PlasmicHead, plasmicHeadMeta } from './render/PlasmicHead/index.js';
 export { PlasmicImg } from './render/PlasmicImg/index.js';
-import { T as Trans } from './ssr-c9834f50.js';
-export { P as PlasmicRootProvider, T as Trans, g as genTranslatableString, u as useIsSSR } from './ssr-c9834f50.js';
+import { T as Trans } from './ssr-8625df04.js';
+export { P as PlasmicRootProvider, T as Trans, g as genTranslatableString, u as useIsSSR } from './ssr-8625df04.js';
 import ReactDOM__default from 'react-dom';
 import { useFocusRing } from '@react-aria/focus';
 import { proxy, ref, useSnapshot, getVersion, subscribe } from 'valtio';
@@ -19,1588 +19,1588 @@ import clone from 'clone';
 import deepEqual from 'fast-deep-equal';
 import '@react-aria/ssr';
 
-// https://stackoverflow.com/a/2117523
-function uuidv4() {
-    // @ts-ignore
-    return ([1e7] + -1e3 + -4e3 + -8e3 + -1e11).replace(/[018]/g, function (c) {
-        return (c ^
-            (crypto.getRandomValues(new Uint8Array(1))[0] & (15 >> (c / 4)))).toString(16);
-    });
-}
-function triggerLogin(appId, authorizeEndpoint, redirectUri) {
-    return __awaiter(this, void 0, void 0, function () {
-        function sha256(text) {
-            return __awaiter(this, void 0, void 0, function () {
-                var encoder, data, hashBuffer, hashArray, hashHex;
-                return __generator(this, function (_a) {
-                    switch (_a.label) {
-                        case 0:
-                            encoder = new TextEncoder();
-                            data = encoder.encode(text);
-                            return [4 /*yield*/, crypto.subtle.digest("SHA-256", data)];
-                        case 1:
-                            hashBuffer = _a.sent();
-                            hashArray = Array.from(new Uint8Array(hashBuffer));
-                            hashHex = hashArray
-                                .map(function (b) { return b.toString(16).padStart(2, "0"); })
-                                .join("");
-                            return [2 /*return*/, hashHex];
-                    }
-                });
-            });
-        }
-        var continueTo, state, code_verifier, code_challenge, params, url;
-        return __generator(this, function (_a) {
-            switch (_a.label) {
-                case 0:
-                    continueTo = window.location.href;
-                    state = JSON.stringify({ continueTo: continueTo });
-                    code_verifier = uuidv4();
-                    localStorage.setItem("code_verifier", code_verifier);
-                    return [4 /*yield*/, sha256(code_verifier)];
-                case 1:
-                    code_challenge = _a.sent();
-                    params = new URLSearchParams();
-                    params.set("client_id", appId);
-                    params.set("state", state);
-                    params.set("response_type", "code");
-                    params.set("code_challenge", code_challenge);
-                    params.set("code_challenge_method", "S256");
-                    if (redirectUri) {
-                        params.set("redirect_uri", redirectUri);
-                    }
-                    url = "".concat(authorizeEndpoint, "?").concat(params.toString());
-                    window.location.href = url;
-                    return [2 /*return*/];
-            }
-        });
-    });
-}
-function PlasmicPageGuard(props) {
-    var appId = props.appId, authorizeEndpoint = props.authorizeEndpoint, minRole = props.minRole, canTriggerLogin = props.canTriggerLogin, children = props.children;
-    var dataSourceCtxValue = usePlasmicDataSourceContext();
-    React__default.useEffect(function () {
-        if (canTriggerLogin) {
-            if (minRole &&
-                dataSourceCtxValue &&
-                "isUserLoading" in dataSourceCtxValue &&
-                !dataSourceCtxValue.isUserLoading &&
-                !dataSourceCtxValue.user) {
-                triggerLogin(appId, authorizeEndpoint, dataSourceCtxValue.authRedirectUri);
-            }
-        }
-    }, [dataSourceCtxValue, appId, authorizeEndpoint, canTriggerLogin, minRole]);
-    function canUserViewPage() {
-        if (!minRole) {
-            return true;
-        }
-        if (!dataSourceCtxValue) {
-            return false;
-        }
-        if (!dataSourceCtxValue.user) {
-            return false;
-        }
-        if (!("roleIds" in dataSourceCtxValue.user)) {
-            return false;
-        }
-        if (!Array.isArray(dataSourceCtxValue.user.roleIds)) {
-            return false;
-        }
-        return dataSourceCtxValue.user.roleIds.includes(minRole);
-    }
-    if (!dataSourceCtxValue ||
-        dataSourceCtxValue.isUserLoading ||
-        (!dataSourceCtxValue.user && minRole && canTriggerLogin)) {
-        return null;
-    }
-    if (!canUserViewPage()) {
-        return React__default.createElement("div", null, "You don't have access to this page");
-    }
-    return React__default.createElement(React__default.Fragment, null, children);
-}
-function withPlasmicPageGuard(WrappedComponent, options) {
-    var PageGuard = function (props) { return (React__default.createElement(PlasmicPageGuard, __assign({}, options),
-        React__default.createElement(WrappedComponent, __assign({}, props)))); };
-    return PageGuard;
+// https://stackoverflow.com/a/2117523
+function uuidv4() {
+    // @ts-ignore
+    return ([1e7] + -1e3 + -4e3 + -8e3 + -1e11).replace(/[018]/g, function (c) {
+        return (c ^
+            (crypto.getRandomValues(new Uint8Array(1))[0] & (15 >> (c / 4)))).toString(16);
+    });
+}
+function triggerLogin(appId, authorizeEndpoint, redirectUri) {
+    return __awaiter(this, void 0, void 0, function () {
+        function sha256(text) {
+            return __awaiter(this, void 0, void 0, function () {
+                var encoder, data, hashBuffer, hashArray, hashHex;
+                return __generator(this, function (_a) {
+                    switch (_a.label) {
+                        case 0:
+                            encoder = new TextEncoder();
+                            data = encoder.encode(text);
+                            return [4 /*yield*/, crypto.subtle.digest("SHA-256", data)];
+                        case 1:
+                            hashBuffer = _a.sent();
+                            hashArray = Array.from(new Uint8Array(hashBuffer));
+                            hashHex = hashArray
+                                .map(function (b) { return b.toString(16).padStart(2, "0"); })
+                                .join("");
+                            return [2 /*return*/, hashHex];
+                    }
+                });
+            });
+        }
+        var continueTo, state, code_verifier, code_challenge, params, url;
+        return __generator(this, function (_a) {
+            switch (_a.label) {
+                case 0:
+                    continueTo = window.location.href;
+                    state = JSON.stringify({ continueTo: continueTo });
+                    code_verifier = uuidv4();
+                    localStorage.setItem("code_verifier", code_verifier);
+                    return [4 /*yield*/, sha256(code_verifier)];
+                case 1:
+                    code_challenge = _a.sent();
+                    params = new URLSearchParams();
+                    params.set("client_id", appId);
+                    params.set("state", state);
+                    params.set("response_type", "code");
+                    params.set("code_challenge", code_challenge);
+                    params.set("code_challenge_method", "S256");
+                    if (redirectUri) {
+                        params.set("redirect_uri", redirectUri);
+                    }
+                    url = "".concat(authorizeEndpoint, "?").concat(params.toString());
+                    window.location.href = url;
+                    return [2 /*return*/];
+            }
+        });
+    });
+}
+function PlasmicPageGuard(props) {
+    var appId = props.appId, authorizeEndpoint = props.authorizeEndpoint, minRole = props.minRole, canTriggerLogin = props.canTriggerLogin, children = props.children;
+    var dataSourceCtxValue = usePlasmicDataSourceContext();
+    React__default.useEffect(function () {
+        if (canTriggerLogin) {
+            if (minRole &&
+                dataSourceCtxValue &&
+                "isUserLoading" in dataSourceCtxValue &&
+                !dataSourceCtxValue.isUserLoading &&
+                !dataSourceCtxValue.user) {
+                triggerLogin(appId, authorizeEndpoint, dataSourceCtxValue.authRedirectUri);
+            }
+        }
+    }, [dataSourceCtxValue, appId, authorizeEndpoint, canTriggerLogin, minRole]);
+    function canUserViewPage() {
+        if (!minRole) {
+            return true;
+        }
+        if (!dataSourceCtxValue) {
+            return false;
+        }
+        if (!dataSourceCtxValue.user) {
+            return false;
+        }
+        if (!("roleIds" in dataSourceCtxValue.user)) {
+            return false;
+        }
+        if (!Array.isArray(dataSourceCtxValue.user.roleIds)) {
+            return false;
+        }
+        return dataSourceCtxValue.user.roleIds.includes(minRole);
+    }
+    if (!dataSourceCtxValue ||
+        dataSourceCtxValue.isUserLoading ||
+        (!dataSourceCtxValue.user && minRole && canTriggerLogin)) {
+        return null;
+    }
+    if (!canUserViewPage()) {
+        return React__default.createElement("div", null, "You don't have access to this page");
+    }
+    return React__default.createElement(React__default.Fragment, null, children);
+}
+function withPlasmicPageGuard(WrappedComponent, options) {
+    var PageGuard = function (props) { return (React__default.createElement(PlasmicPageGuard, __assign({}, options),
+        React__default.createElement(WrappedComponent, __assign({}, props)))); };
+    return PageGuard;
 }
 
-function renderStack(as, props, hasGap, ref) {
-    var children = props.children, rest = __rest(props, ["children"]);
-    var wrappedChildren = wrapFlexContainerChildren(children, hasGap !== null && hasGap !== void 0 ? hasGap : false);
-    return createElementWithChildren(as, __assign({ ref: ref }, rest), wrappedChildren);
-}
-function FlexStack_(props, outerRef) {
-    var as = props.as, hasGap = props.hasGap, rest = __rest(props, ["as", "hasGap"]);
-    return renderStack(as !== null && as !== void 0 ? as : "div", rest, hasGap, outerRef);
-}
-var FlexStack = React.forwardRef(FlexStack_);
-var makeStackImpl = function (as) {
-    return React.forwardRef(function (props, ref) {
-        var hasGap = props.hasGap, rest = __rest(props, ["hasGap"]);
-        return renderStack(as, rest, hasGap, ref);
-    });
-};
-var Stack = Object.assign(FlexStack, {
-    div: makeStackImpl("div"),
-    a: makeStackImpl("a"),
-    button: makeStackImpl("button"),
-    h1: makeStackImpl("h1"),
-    h2: makeStackImpl("h2"),
-    h3: makeStackImpl("h3"),
-    h4: makeStackImpl("h4"),
-    h5: makeStackImpl("h5"),
-    h6: makeStackImpl("h6"),
-    label: makeStackImpl("label"),
-    form: makeStackImpl("form"),
-    section: makeStackImpl("section"),
-    head: makeStackImpl("head"),
-    main: makeStackImpl("main"),
-    nav: makeStackImpl("nav")
+function renderStack(as, props, hasGap, ref) {
+    var children = props.children, rest = __rest(props, ["children"]);
+    var wrappedChildren = wrapFlexContainerChildren(children, hasGap !== null && hasGap !== void 0 ? hasGap : false);
+    return createElementWithChildren(as, __assign({ ref: ref }, rest), wrappedChildren);
+}
+function FlexStack_(props, outerRef) {
+    var as = props.as, hasGap = props.hasGap, rest = __rest(props, ["as", "hasGap"]);
+    return renderStack(as !== null && as !== void 0 ? as : "div", rest, hasGap, outerRef);
+}
+var FlexStack = React.forwardRef(FlexStack_);
+var makeStackImpl = function (as) {
+    return React.forwardRef(function (props, ref) {
+        var hasGap = props.hasGap, rest = __rest(props, ["hasGap"]);
+        return renderStack(as, rest, hasGap, ref);
+    });
+};
+var Stack = Object.assign(FlexStack, {
+    div: makeStackImpl("div"),
+    a: makeStackImpl("a"),
+    button: makeStackImpl("button"),
+    h1: makeStackImpl("h1"),
+    h2: makeStackImpl("h2"),
+    h3: makeStackImpl("h3"),
+    h4: makeStackImpl("h4"),
+    h5: makeStackImpl("h5"),
+    h6: makeStackImpl("h6"),
+    label: makeStackImpl("label"),
+    form: makeStackImpl("form"),
+    section: makeStackImpl("section"),
+    head: makeStackImpl("head"),
+    main: makeStackImpl("main"),
+    nav: makeStackImpl("nav"),
 });
 
-function hasVariant(variants, groupName, variant) {
-    if (variants == null) {
-        return false;
-    }
-    var groupVariants = variants[groupName];
-    if (groupVariants == null) {
-        return false;
-    }
-    else if (groupVariants === true) {
-        return variant === groupName;
-    }
-    else if (groupVariants === false) {
-        return false;
-    }
-    else if (Array.isArray(groupVariants)) {
-        return groupVariants.includes(variant);
-    }
-    else if (typeof groupVariants === "string") {
-        return groupVariants === variant;
-    }
-    else {
-        return (groupVariants[variant] !== undefined && groupVariants[variant] !== false);
-    }
-}
-function wrapFlexContainerChildren(children, hasGap) {
-    // We need to always wrap the children, even if there are no gaps, because
-    // otherwise if we toggle between with and without gap, React reconciliation
-    // 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)) {
-        return React.createElement.apply(React, __spreadArray(["div", { className: className }], __read(children), false));
-    }
-    else {
-        return React.createElement("div", { className: className }, 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
-            // a Stack, then we don't want to switch to using "as" as the root,
-            // because then we'd lose the flex wrapper that Stack provides.
-            // Instead, we specify the "as" as the "as" prop to Stack.
-            props.as = override2.as;
-        }
-        else {
-            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
-// support type check on jsx pragma. See https://github.com/microsoft/TypeScript/issues/21699
-// for more info.
-var seenElements = new Map();
-function createPlasmicElementProxy(defaultElement, props) {
-    // We use seenElements to keep track of elements that has been rendered by
-    // createPlasmicElementProxy().  When a JSX tree is evaluated, the JSX factory
-    // is invoked from the leaf to the root as the last call.  So we can store
-    // all the elements we've created until we encounter the leaf, at which point
-    // we will clear this map.  We are guaranteed that this map will only contain
-    // elements from one Plasmic* component at a time, because we're just creating
-    // elements and not "rendering" at this point; even if this JSX tree references
-    // other Plasmic* elements, we'll just create an element referencing that component,
-    // rather than following into the content of that component.
-    //
-    // TODO: is this ConcurrentMode friendly?
-    var _a;
-    var children = [];
-    for (var _i = 2; _i < arguments.length; _i++) {
-        children[_i - 2] = arguments[_i];
-    }
-    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"];
-    var element = createPlasmicElementFromJsx.apply(void 0, __spreadArray([defaultElement,
-        props], __read(children), false));
-    if (name) {
-        seenElements.set(name, element);
-    }
-    if (isRoot) {
-        // 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
-            ? (_a = seenElements.get(forNodeName)) !== null && _a !== void 0 ? _a : 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 _a;
-    var children = [];
-    for (var _i = 2; _i < arguments.length; _i++) {
-        children[_i - 2] = arguments[_i];
-    }
-    var override = props["data-plasmic-override"];
-    var wrapFlexChild = props["data-plasmic-wrap-flex-child"];
-    var triggerProps = ((_a = props["data-plasmic-trigger-props"]) !== null && _a !== void 0 ? _a : []);
-    delete props["data-plasmic-override"];
-    delete props["data-plasmic-wrap-flex-child"];
-    delete props["data-plasmic-trigger-props"];
-    return createPlasmicElement(override, defaultElement, mergeProps.apply(void 0, __spreadArray([props,
-        children.length === 0
-            ? {}
-            : { children: children.length === 1 ? children[0] : children }], __read(triggerProps), false)), wrapFlexChild);
-}
-function makeFragment() {
-    var children = [];
-    for (var _i = 0; _i < arguments.length; _i++) {
-        children[_i] = arguments[_i];
-    }
-    return React.createElement.apply(React, __spreadArray([React.Fragment, {}], __read(children), false));
-}
-var UNSET = Symbol("UNSET");
-function mergeOverrideProps(defaults, overrides) {
-    var e_1, _a;
-    if (!overrides) {
-        return defaults;
-    }
-    var result = __assign({}, defaults);
-    try {
-        for (var _b = __values(Object.keys(overrides)), _c = _b.next(); !_c.done; _c = _b.next()) {
-            var key = _c.value;
-            var defaultVal = defaults[key];
-            var overrideVal = overrides[key];
-            if (overrideVal === UNSET) {
-                delete result[key];
-            }
-            else {
-                // We use the NONE sentinel if the overrideVal is nil, and is not one of the
-                // props that we merge by default -- which are className, style, and
-                // event handlers.  This means for all other "normal" props -- like children,
-                // title, etc -- a nil value will unset the default.
-                if (overrideVal == null &&
-                    key !== "className" &&
-                    key !== "style" &&
-                    !(key.startsWith("on") && typeof defaultVal === "function")) {
-                    overrideVal = NONE;
-                }
-                result[key] = mergePropVals(key, defaultVal, overrideVal);
-            }
-        }
-    }
-    catch (e_1_1) { e_1 = { error: e_1_1 }; }
-    finally {
-        try {
-            if (_c && !_c.done && (_a = _b["return"])) _a.call(_b);
-        }
-        finally { if (e_1) throw e_1.error; }
-    }
-    return result;
-}
-function wrapWithClassName(element, className) {
-    var key = React.isValidElement(element)
-        ? element.key || undefined
-        : undefined;
-    return React.createElement("div", {
-        key: key,
-        className: className,
-        style: {
-            display: "grid"
-        }
-    }, element);
-}
-function deriveOverride(x) {
-    if (!x) {
-        // undefined Binding is an empty Binding
-        return {
-            type: "default",
-            props: {}
-        };
-    }
-    else if (isReactNode(x)) {
-        // If ReactNode, then assume this is the children
-        return {
-            type: "default",
-            props: {
-                children: x
-            }
-        };
-    }
-    else if (typeof x === "object") {
-        // If any of the overrideKeys is a key of this object, then assume
-        // this is a full Override
-        if ("as" in x) {
-            return __assign(__assign({}, x), { props: x.props || {}, type: "as" });
-        }
-        else if ("render" in x) {
-            return __assign(__assign({}, x), { type: "render" });
-        }
-        else if ("props" in x) {
-            return __assign(__assign({}, x), { props: x.props || {}, type: "default" });
-        }
-        else if (isSubset(Object.keys(x), ["wrap", "wrapChildren"])) {
-            // Only twiddling functions present, so assume no props overrides
-            // (otherwise we'd assume these were props).
-            return __assign(__assign({}, x), { props: {}, type: "default" });
-        }
-        // Else, assume this is just a props object.
-        return {
-            type: "default",
-            props: x
-        };
-    }
-    else if (typeof x === "function") {
-        return {
-            type: "render",
-            render: x
-        };
-    }
-    throw new Error("Unexpected override: ".concat(x));
-}
-function mergeVariants(v1, v2) {
-    if (!v1 || !v2) {
-        return v1 || v2 || {};
-    }
-    return __assign(__assign({}, v1), v2);
-}
-function mergeVariantsWithStates(variants, $state, linkedStates) {
-    return __assign(__assign({}, variants), Object.fromEntries(linkedStates.map(function (_a) {
-        var variantGroup = _a.variantGroup, statePath = _a.statePath;
-        return [
-            variantGroup,
-            get($state, statePath),
-        ];
-    })));
-}
-function mergeArgs(a1, a2) {
-    if (!a1 || !a2) {
-        return a1 || a2 || {};
-    }
-    return __assign(__assign({}, a1), a2);
-}
-function mergeFlexOverrides(o1, o2) {
-    var e_2, _a;
-    if (!o2) {
-        return o1;
-    }
-    var keys = Array.from(new Set(__spreadArray(__spreadArray([], __read(Object.keys(o1)), false), __read(Object.keys(o2)), false)));
-    var merged = {};
-    try {
-        for (var keys_1 = __values(keys), keys_1_1 = keys_1.next(); !keys_1_1.done; keys_1_1 = keys_1.next()) {
-            var key = keys_1_1.value;
-            merged[key] = mergeFlexOverride(o1[key], o2[key]);
-        }
-    }
-    catch (e_2_1) { e_2 = { error: e_2_1 }; }
-    finally {
-        try {
-            if (keys_1_1 && !keys_1_1.done && (_a = keys_1["return"])) _a.call(keys_1);
-        }
-        finally { if (e_2) throw e_2.error; }
-    }
-    return merged;
-}
-function mergeFlexOverride(fo1, fo2) {
-    var _a, _b;
-    if (!fo1) {
-        return fo2;
-    }
-    if (!fo2) {
-        return fo1;
-    }
-    var o1 = deriveOverride(fo1);
-    var o2 = deriveOverride(fo2);
-    var wrap = chainSingleArgFuncs.apply(void 0, __spreadArray([], __read([o1.wrap, o2.wrap].filter(notNil)), false));
-    var wrapChildren = chainSingleArgFuncs.apply(void 0, __spreadArray([], __read([o1.wrapChildren, o2.wrapChildren].filter(notNil)), false));
-    // "render" type always takes precedence, but we still merge the props
-    var props = mergeOverrideProps((_a = o1.props) !== null && _a !== void 0 ? _a : {}, o2.props);
-    if (o2.type === "render") {
-        return {
-            render: o2.render,
-            props: props,
-            wrap: wrap,
-            wrapChildren: wrapChildren
-        };
-    }
-    if (o1.type === "render") {
-        return {
-            render: o1.render,
-            props: props,
-            wrap: wrap,
-            wrapChildren: wrapChildren
-        };
-    }
-    // "as" will take precedence
-    var as = (_b = (o2.type === "as" ? o2.as : undefined)) !== null && _b !== void 0 ? _b : (o1.type === "as" ? o1.as : undefined);
-    return __assign({ props: props, wrap: wrap, wrapChildren: wrapChildren }, (as ? { as: as } : {}));
-}
-function deriveRenderOpts(props, config) {
-    var _a;
-    var name = config.name, descendantNames = config.descendantNames, internalVariantPropNames = config.internalVariantPropNames, internalArgPropNames = config.internalArgPropNames;
-    var reservedPropNames = ["variants", "args", "overrides"];
-    var variants = mergeVariants(omit.apply(void 0, __spreadArray([pick.apply(void 0, __spreadArray([props], __read(internalVariantPropNames), false))], __read(reservedPropNames), false)), props.variants);
-    var args = mergeArgs(omit.apply(void 0, __spreadArray([pick.apply(void 0, __spreadArray([props], __read(internalArgPropNames), false))], __read(reservedPropNames), false)), props.args);
-    var overrides = mergeFlexOverrides(omit.apply(void 0, __spreadArray(__spreadArray(__spreadArray([pick.apply(void 0, __spreadArray([props], __read(descendantNames), false))], __read(internalArgPropNames), false), __read(internalVariantPropNames), false), __read(reservedPropNames), false)), props.overrides);
-    var leftoverProps = omit.apply(void 0, __spreadArray(__spreadArray(__spreadArray([props,
-        "variants",
-        "args",
-        "overrides"], __read(descendantNames), false), __read(internalVariantPropNames), false), __read(internalArgPropNames), false));
-    if (Object.keys(leftoverProps).length > 0) {
-        overrides = mergeFlexOverrides(overrides, (_a = {},
-            _a[name] = {
-                props: leftoverProps
-            },
-            _a));
-    }
-    return { variants: variants, args: args, overrides: overrides };
+function hasVariant(variants, groupName, variant) {
+    if (variants == null) {
+        return false;
+    }
+    var groupVariants = variants[groupName];
+    if (groupVariants == null) {
+        return false;
+    }
+    else if (groupVariants === true) {
+        return variant === groupName;
+    }
+    else if (groupVariants === false) {
+        return false;
+    }
+    else if (Array.isArray(groupVariants)) {
+        return groupVariants.includes(variant);
+    }
+    else if (typeof groupVariants === "string") {
+        return groupVariants === variant;
+    }
+    else {
+        return (groupVariants[variant] !== undefined && groupVariants[variant] !== false);
+    }
+}
+function wrapFlexContainerChildren(children, hasGap) {
+    // We need to always wrap the children, even if there are no gaps, because
+    // otherwise if we toggle between with and without gap, React reconciliation
+    // 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)) {
+        return React.createElement.apply(React, __spreadArray(["div", { className: className }], __read(children), false));
+    }
+    else {
+        return React.createElement("div", { className: className }, 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
+            // a Stack, then we don't want to switch to using "as" as the root,
+            // because then we'd lose the flex wrapper that Stack provides.
+            // Instead, we specify the "as" as the "as" prop to Stack.
+            props.as = override2.as;
+        }
+        else {
+            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
+// support type check on jsx pragma. See https://github.com/microsoft/TypeScript/issues/21699
+// for more info.
+var seenElements = new Map();
+function createPlasmicElementProxy(defaultElement, props) {
+    // We use seenElements to keep track of elements that has been rendered by
+    // createPlasmicElementProxy().  When a JSX tree is evaluated, the JSX factory
+    // is invoked from the leaf to the root as the last call.  So we can store
+    // all the elements we've created until we encounter the leaf, at which point
+    // we will clear this map.  We are guaranteed that this map will only contain
+    // elements from one Plasmic* component at a time, because we're just creating
+    // elements and not "rendering" at this point; even if this JSX tree references
+    // other Plasmic* elements, we'll just create an element referencing that component,
+    // rather than following into the content of that component.
+    //
+    // TODO: is this ConcurrentMode friendly?
+    var _a;
+    var children = [];
+    for (var _i = 2; _i < arguments.length; _i++) {
+        children[_i - 2] = arguments[_i];
+    }
+    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"];
+    var element = createPlasmicElementFromJsx.apply(void 0, __spreadArray([defaultElement,
+        props], __read(children), false));
+    if (name) {
+        seenElements.set(name, element);
+    }
+    if (isRoot) {
+        // 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
+            ? (_a = seenElements.get(forNodeName)) !== null && _a !== void 0 ? _a : 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 _a;
+    var children = [];
+    for (var _i = 2; _i < arguments.length; _i++) {
+        children[_i - 2] = arguments[_i];
+    }
+    var override = props["data-plasmic-override"];
+    var wrapFlexChild = props["data-plasmic-wrap-flex-child"];
+    var triggerProps = ((_a = props["data-plasmic-trigger-props"]) !== null && _a !== void 0 ? _a : []);
+    delete props["data-plasmic-override"];
+    delete props["data-plasmic-wrap-flex-child"];
+    delete props["data-plasmic-trigger-props"];
+    return createPlasmicElement(override, defaultElement, mergeProps.apply(void 0, __spreadArray([props,
+        children.length === 0
+            ? {}
+            : { children: children.length === 1 ? children[0] : children }], __read(triggerProps), false)), wrapFlexChild);
+}
+function makeFragment() {
+    var children = [];
+    for (var _i = 0; _i < arguments.length; _i++) {
+        children[_i] = arguments[_i];
+    }
+    return React.createElement.apply(React, __spreadArray([React.Fragment, {}], __read(children), false));
+}
+var UNSET = Symbol("UNSET");
+function mergeOverrideProps(defaults, overrides) {
+    var e_1, _a;
+    if (!overrides) {
+        return defaults;
+    }
+    var result = __assign({}, defaults);
+    try {
+        for (var _b = __values(Object.keys(overrides)), _c = _b.next(); !_c.done; _c = _b.next()) {
+            var key = _c.value;
+            var defaultVal = defaults[key];
+            var overrideVal = overrides[key];
+            if (overrideVal === UNSET) {
+                delete result[key];
+            }
+            else {
+                // We use the NONE sentinel if the overrideVal is nil, and is not one of the
+                // props that we merge by default -- which are className, style, and
+                // event handlers.  This means for all other "normal" props -- like children,
+                // title, etc -- a nil value will unset the default.
+                if (overrideVal == null &&
+                    key !== "className" &&
+                    key !== "style" &&
+                    !(key.startsWith("on") && typeof defaultVal === "function")) {
+                    overrideVal = NONE;
+                }
+                result[key] = mergePropVals(key, defaultVal, overrideVal);
+            }
+        }
+    }
+    catch (e_1_1) { e_1 = { error: e_1_1 }; }
+    finally {
+        try {
+            if (_c && !_c.done && (_a = _b.return)) _a.call(_b);
+        }
+        finally { if (e_1) throw e_1.error; }
+    }
+    return result;
+}
+function wrapWithClassName(element, className) {
+    var key = React.isValidElement(element)
+        ? element.key || undefined
+        : undefined;
+    return React.createElement("div", {
+        key: key,
+        className: className,
+        style: {
+            display: "grid",
+        },
+    }, element);
+}
+function deriveOverride(x) {
+    if (!x) {
+        // undefined Binding is an empty Binding
+        return {
+            type: "default",
+            props: {},
+        };
+    }
+    else if (isReactNode(x)) {
+        // If ReactNode, then assume this is the children
+        return {
+            type: "default",
+            props: {
+                children: x,
+            },
+        };
+    }
+    else if (typeof x === "object") {
+        // If any of the overrideKeys is a key of this object, then assume
+        // this is a full Override
+        if ("as" in x) {
+            return __assign(__assign({}, x), { props: x.props || {}, type: "as" });
+        }
+        else if ("render" in x) {
+            return __assign(__assign({}, x), { type: "render" });
+        }
+        else if ("props" in x) {
+            return __assign(__assign({}, x), { props: x.props || {}, type: "default" });
+        }
+        else if (isSubset(Object.keys(x), ["wrap", "wrapChildren"])) {
+            // Only twiddling functions present, so assume no props overrides
+            // (otherwise we'd assume these were props).
+            return __assign(__assign({}, x), { props: {}, type: "default" });
+        }
+        // Else, assume this is just a props object.
+        return {
+            type: "default",
+            props: x,
+        };
+    }
+    else if (typeof x === "function") {
+        return {
+            type: "render",
+            render: x,
+        };
+    }
+    throw new Error("Unexpected override: ".concat(x));
+}
+function mergeVariants(v1, v2) {
+    if (!v1 || !v2) {
+        return v1 || v2 || {};
+    }
+    return __assign(__assign({}, v1), v2);
+}
+function mergeVariantsWithStates(variants, $state, linkedStates) {
+    return __assign(__assign({}, variants), Object.fromEntries(linkedStates.map(function (_a) {
+        var variantGroup = _a.variantGroup, statePath = _a.statePath;
+        return [
+            variantGroup,
+            get($state, statePath),
+        ];
+    })));
+}
+function mergeArgs(a1, a2) {
+    if (!a1 || !a2) {
+        return a1 || a2 || {};
+    }
+    return __assign(__assign({}, a1), a2);
+}
+function mergeFlexOverrides(o1, o2) {
+    var e_2, _a;
+    if (!o2) {
+        return o1;
+    }
+    var keys = Array.from(new Set(__spreadArray(__spreadArray([], __read(Object.keys(o1)), false), __read(Object.keys(o2)), false)));
+    var merged = {};
+    try {
+        for (var keys_1 = __values(keys), keys_1_1 = keys_1.next(); !keys_1_1.done; keys_1_1 = keys_1.next()) {
+            var key = keys_1_1.value;
+            merged[key] = mergeFlexOverride(o1[key], o2[key]);
+        }
+    }
+    catch (e_2_1) { e_2 = { error: e_2_1 }; }
+    finally {
+        try {
+            if (keys_1_1 && !keys_1_1.done && (_a = keys_1.return)) _a.call(keys_1);
+        }
+        finally { if (e_2) throw e_2.error; }
+    }
+    return merged;
+}
+function mergeFlexOverride(fo1, fo2) {
+    var _a, _b;
+    if (!fo1) {
+        return fo2;
+    }
+    if (!fo2) {
+        return fo1;
+    }
+    var o1 = deriveOverride(fo1);
+    var o2 = deriveOverride(fo2);
+    var wrap = chainSingleArgFuncs.apply(void 0, __spreadArray([], __read([o1.wrap, o2.wrap].filter(notNil)), false));
+    var wrapChildren = chainSingleArgFuncs.apply(void 0, __spreadArray([], __read([o1.wrapChildren, o2.wrapChildren].filter(notNil)), false));
+    // "render" type always takes precedence, but we still merge the props
+    var props = mergeOverrideProps((_a = o1.props) !== null && _a !== void 0 ? _a : {}, o2.props);
+    if (o2.type === "render") {
+        return {
+            render: o2.render,
+            props: props,
+            wrap: wrap,
+            wrapChildren: wrapChildren,
+        };
+    }
+    if (o1.type === "render") {
+        return {
+            render: o1.render,
+            props: props,
+            wrap: wrap,
+            wrapChildren: wrapChildren,
+        };
+    }
+    // "as" will take precedence
+    var as = (_b = (o2.type === "as" ? o2.as : undefined)) !== null && _b !== void 0 ? _b : (o1.type === "as" ? o1.as : undefined);
+    return __assign({ props: props, wrap: wrap, wrapChildren: wrapChildren }, (as ? { as: as } : {}));
+}
+function deriveRenderOpts(props, config) {
+    var _a;
+    var name = config.name, descendantNames = config.descendantNames, internalVariantPropNames = config.internalVariantPropNames, internalArgPropNames = config.internalArgPropNames;
+    var reservedPropNames = ["variants", "args", "overrides"];
+    var variants = mergeVariants(omit.apply(void 0, __spreadArray([pick.apply(void 0, __spreadArray([props], __read(internalVariantPropNames), false))], __read(reservedPropNames), false)), props.variants);
+    var args = mergeArgs(omit.apply(void 0, __spreadArray([pick.apply(void 0, __spreadArray([props], __read(internalArgPropNames), false))], __read(reservedPropNames), false)), props.args);
+    var overrides = mergeFlexOverrides(omit.apply(void 0, __spreadArray(__spreadArray(__spreadArray([pick.apply(void 0, __spreadArray([props], __read(descendantNames), false))], __read(internalArgPropNames), false), __read(internalVariantPropNames), false), __read(reservedPropNames), false)), props.overrides);
+    var leftoverProps = omit.apply(void 0, __spreadArray(__spreadArray(__spreadArray([props,
+        "variants",
+        "args",
+        "overrides"], __read(descendantNames), false), __read(internalVariantPropNames), false), __read(internalArgPropNames), false));
+    if (Object.keys(leftoverProps).length > 0) {
+        overrides = mergeFlexOverrides(overrides, (_a = {},
+            _a[name] = {
+                props: leftoverProps,
+            },
+            _a));
+    }
+    return { variants: variants, args: args, overrides: overrides };
 }
 
-var isDefaultValue = function (val) { return val === "PLEASE_RENDER_INSIDE_PROVIDER"; };
-var seenDefaultVariants = {};
-function ensureGlobalVariants(globalVariantValues) {
-    Object.entries(globalVariantValues)
-        .filter(function (_a) {
-        var _b = __read(_a, 2); _b[0]; var value = _b[1];
-        return isDefaultValue(value);
-    })
-        .forEach(function (_a) {
-        var _b = __read(_a, 2), key = _b[0]; _b[1];
-        globalVariantValues[key] = undefined;
-        if (!seenDefaultVariants[key] && process.env.NODE_ENV === "development") {
-            seenDefaultVariants[key] = true;
-            var providerName = "".concat(key[0].toUpperCase()).concat(key.substring(1), "Context.Provider");
-            console.warn("Plasmic context value for global variant \"".concat(key, "\" was not provided; please use ").concat(providerName, " at the root of your React app. Learn More: https://www.plasmic.app/learn/other-assets/#global-variants"));
-        }
-    });
-    return globalVariantValues;
+var isDefaultValue = function (val) { return val === "PLEASE_RENDER_INSIDE_PROVIDER"; };
+var seenDefaultVariants = {};
+function ensureGlobalVariants(globalVariantValues) {
+    Object.entries(globalVariantValues)
+        .filter(function (_a) {
+        var _b = __read(_a, 2); _b[0]; var value = _b[1];
+        return isDefaultValue(value);
+    })
+        .forEach(function (_a) {
+        var _b = __read(_a, 2), key = _b[0]; _b[1];
+        globalVariantValues[key] = undefined;
+        if (!seenDefaultVariants[key] && process.env.NODE_ENV === "development") {
+            seenDefaultVariants[key] = true;
+            var providerName = "".concat(key[0].toUpperCase()).concat(key.substring(1), "Context.Provider");
+            console.warn("Plasmic context value for global variant \"".concat(key, "\" was not provided; please use ").concat(providerName, " at the root of your React app. Learn More: https://www.plasmic.app/learn/other-assets/#global-variants"));
+        }
+    });
+    return globalVariantValues;
 }
 
-function PlasmicIcon(props) {
-    var PlasmicIconType = props.PlasmicIconType, rest = __rest(props, ["PlasmicIconType"]);
-    return React.createElement(PlasmicIconType, __assign({}, rest));
+function PlasmicIcon(props) {
+    var PlasmicIconType = props.PlasmicIconType, rest = __rest(props, ["PlasmicIconType"]);
+    return React.createElement(PlasmicIconType, __assign({}, rest));
 }
 
-var PlasmicLink = React__default.forwardRef(function PlasmicLink(props, ref) {
-    // props.href is required for nextjs; if no props.href,
-    // then we just render the default anchor element
-    if (props.platform === "nextjs" && props.href) {
-        var nextjsProps = [
-            "href",
-            "replace",
-            "scroll",
-            "shallow",
-            "passHref",
-            "prefetch",
-            "locale",
-        ];
-        return React__default.createElement(props.component, __assign(__assign({}, pick.apply(void 0, __spreadArray([props], __read(nextjsProps), false))), { legacyBehavior: true }), React__default.createElement("a", __assign({}, omit.apply(void 0, __spreadArray([props, "component", "platform"], __read(nextjsProps), false)), { ref: ref })));
-    }
-    if (props.platform === "gatsby" && isInternalHref(props.href)) {
-        return React__default.createElement(props.component, __assign(__assign({}, omit(props, "component", "platform", "href")), { to: props.href, ref: ref }));
-    }
-    return React__default.createElement("a", __assign({}, omit(props, "component", "platform"), { ref: ref }));
-});
-function isInternalHref(href) {
-    return /^\/(?!\/)/.test(href);
+var PlasmicLink = React__default.forwardRef(function PlasmicLink(props, ref) {
+    // props.href is required for nextjs; if no props.href,
+    // then we just render the default anchor element
+    if (props.platform === "nextjs" && props.href) {
+        var nextjsProps = [
+            "href",
+            "replace",
+            "scroll",
+            "shallow",
+            "passHref",
+            "prefetch",
+            "locale",
+        ];
+        return React__default.createElement(props.component, __assign(__assign({}, pick.apply(void 0, __spreadArray([props], __read(nextjsProps), false))), { legacyBehavior: true }), React__default.createElement("a", __assign({}, omit.apply(void 0, __spreadArray([props, "component", "platform"], __read(nextjsProps), false)), { ref: ref })));
+    }
+    if (props.platform === "gatsby" && isInternalHref(props.href)) {
+        return React__default.createElement(props.component, __assign(__assign({}, omit(props, "component", "platform", "href")), { to: props.href, ref: ref }));
+    }
+    return React__default.createElement("a", __assign({}, omit(props, "component", "platform"), { ref: ref }));
+});
+function isInternalHref(href) {
+    return /^\/(?!\/)/.test(href);
 }
 
-function PlasmicSlot(props) {
-    return renderPlasmicSlot(props);
-}
-function renderPlasmicSlot(opts) {
-    var as = opts.as, defaultContents = opts.defaultContents, value = opts.value, rest = __rest(opts, ["as", "defaultContents", "value"]);
-    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
-    // 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 = React.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 React.createElement(React.Fragment, null, content);
-    }
-    return React.createElement(as || "span", mergeProps({ className: "__wab_slot" }, rest), content);
-}
-function maybeAsString(node) {
-    // Unwrap fragments
-    if (React.isValidElement(node)) {
-        // Fragment doesn't render DOM elements
-        if (node.type === React.Fragment) {
-            return maybeAsString(node.props.children);
-        }
-        else if (node.type === Trans) {
-            // Trans also doesn't render DOM elements. But we don't want to just render
-            // its content string, because we want to keep the <Trans/> for the localization.
-            // So we render the same node, to be wrapped into __wab_slot-string-wrapper.
-            return node;
-        }
-    }
-    if (typeof node === "string") {
-        return node;
-    }
-    if (Array.isArray(node) && node.length === 1 && typeof node[0] === "string") {
-        return node[0];
-    }
-    return undefined;
+function PlasmicSlot(props) {
+    return renderPlasmicSlot(props);
+}
+function renderPlasmicSlot(opts) {
+    var as = opts.as, defaultContents = opts.defaultContents, value = opts.value, rest = __rest(opts, ["as", "defaultContents", "value"]);
+    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
+    // 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 = React.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 React.createElement(React.Fragment, null, content);
+    }
+    return React.createElement(as || "span", mergeProps({ className: "__wab_slot" }, rest), content);
+}
+function maybeAsString(node) {
+    // Unwrap fragments
+    if (React.isValidElement(node)) {
+        // Fragment doesn't render DOM elements
+        if (node.type === React.Fragment) {
+            return maybeAsString(node.props.children);
+        }
+        else if (node.type === Trans) {
+            // Trans also doesn't render DOM elements. But we don't want to just render
+            // its content string, because we want to keep the <Trans/> for the localization.
+            // So we render the same node, to be wrapped into __wab_slot-string-wrapper.
+            return node;
+        }
+    }
+    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 (_a) {
-        var _b = __read(_a, 2), query = _b[1];
-        return window.matchMedia(query).matches;
-    })
-        .map(function (_a) {
-        var _b = __read(_a, 1), name = _b[0];
-        return name;
-    });
-}
-// 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 () {
-            return listeners.forEach(function (listener) { return listener(); });
-        });
-    }
-}
-function ensureInitCurScreenVariants() {
-    // Initializes curScreenVariants if it hadn't been before. Note that this must
-    // be called from within an effect.
-    if (curScreenVariants === undefined) {
-        curScreenVariants = matchScreenVariants();
-    }
-}
-if (isBrowser) {
-    window.addEventListener("resize", recalculateScreenVariants);
-}
-function createUseScreenVariants(isMulti, screenQueries) {
-    Object.assign(queries, screenQueries);
-    curScreenVariants = undefined;
-    return function () {
-        // It is important that upon first render, we return [] or undefined, because
-        // that is what SSR will use, and the client must match.  In an effect (which
-        // 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 _a = __read(React.useState(), 2), updateState = _a[1];
-        var lastScreenVariantsRef = React.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$1(function () {
-            var updateIfChanged = function () {
-                if (curScreenVariants &&
-                    lastScreenVariantsRef.current.join("") !== curScreenVariants.join("")) {
-                    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
-            // 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,
-            // 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) {
-            return curScreenVariants[curScreenVariants.length - 1];
-        }
-        else {
-            return undefined;
-        }
-    };
+var listeners = [];
+var queries = {};
+function matchScreenVariants() {
+    if (!isBrowser) {
+        return [];
+    }
+    return Object.entries(queries)
+        .filter(function (_a) {
+        var _b = __read(_a, 2), query = _b[1];
+        return window.matchMedia(query).matches;
+    })
+        .map(function (_a) {
+        var _b = __read(_a, 1), name = _b[0];
+        return name;
+    });
+}
+// 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 () {
+            return listeners.forEach(function (listener) { return listener(); });
+        });
+    }
+}
+function ensureInitCurScreenVariants() {
+    // Initializes curScreenVariants if it hadn't been before. Note that this must
+    // be called from within an effect.
+    if (curScreenVariants === undefined) {
+        curScreenVariants = matchScreenVariants();
+    }
+}
+if (isBrowser) {
+    window.addEventListener("resize", recalculateScreenVariants);
+}
+function createUseScreenVariants(isMulti, screenQueries) {
+    Object.assign(queries, screenQueries);
+    curScreenVariants = undefined;
+    return function () {
+        // It is important that upon first render, we return [] or undefined, because
+        // that is what SSR will use, and the client must match.  In an effect (which
+        // 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 _a = __read(React.useState(), 2), updateState = _a[1];
+        var lastScreenVariantsRef = React.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$1(function () {
+            var updateIfChanged = function () {
+                if (curScreenVariants &&
+                    lastScreenVariantsRef.current.join("") !== curScreenVariants.join("")) {
+                    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
+            // 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,
+            // 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) {
+            return curScreenVariants[curScreenVariants.length - 1];
+        }
+        else {
+            return undefined;
+        }
+    };
 }
 
-function useFocused(opts) {
-    var _a = useFocusRing({
-        within: false,
-        isTextInput: opts.isTextInput
-    }), isFocused = _a.isFocused, focusProps = _a.focusProps;
-    return [isFocused, focusProps];
-}
-function useFocusVisible(opts) {
-    var _a = useFocusRing({
-        within: false,
-        isTextInput: opts.isTextInput
-    }), isFocusVisible = _a.isFocusVisible, focusProps = _a.focusProps;
-    return [isFocusVisible, focusProps];
-}
-function useFocusedWithin(opts) {
-    var _a = useFocusRing({
-        within: true,
-        isTextInput: opts.isTextInput
-    }), isFocused = _a.isFocused, focusProps = _a.focusProps;
-    return [isFocused, focusProps];
-}
-function useFocusVisibleWithin(opts) {
-    var _a = useFocusRing({
-        within: true,
-        isTextInput: opts.isTextInput
-    }), isFocusVisible = _a.isFocusVisible, focusProps = _a.focusProps;
-    return [isFocusVisible, focusProps];
-}
-function useHover() {
-    var _a = __read(React.useState(false), 2), isHover = _a[0], setHover = _a[1];
-    return [
-        isHover,
-        {
-            onMouseEnter: function () { return setHover(true); },
-            onMouseLeave: function () { return setHover(false); }
-        },
-    ];
-}
-function usePressed() {
-    var _a = __read(React.useState(false), 2), isPressed = _a[0], setPressed = _a[1];
-    return [
-        isPressed,
-        {
-            onMouseDown: function () { return setPressed(true); },
-            onMouseUp: function () { return setPressed(false); }
-        },
-    ];
-}
-var TRIGGER_TO_HOOK = {
-    useHover: useHover,
-    useFocused: useFocused,
-    useFocusVisible: useFocusVisible,
-    useFocusedWithin: useFocusedWithin,
-    useFocusVisibleWithin: useFocusVisibleWithin,
-    usePressed: usePressed
-};
-/**
- * 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);
+function useFocused(opts) {
+    var _a = useFocusRing({
+        within: false,
+        isTextInput: opts.isTextInput,
+    }), isFocused = _a.isFocused, focusProps = _a.focusProps;
+    return [isFocused, focusProps];
+}
+function useFocusVisible(opts) {
+    var _a = useFocusRing({
+        within: false,
+        isTextInput: opts.isTextInput,
+    }), isFocusVisible = _a.isFocusVisible, focusProps = _a.focusProps;
+    return [isFocusVisible, focusProps];
+}
+function useFocusedWithin(opts) {
+    var _a = useFocusRing({
+        within: true,
+        isTextInput: opts.isTextInput,
+    }), isFocused = _a.isFocused, focusProps = _a.focusProps;
+    return [isFocused, focusProps];
+}
+function useFocusVisibleWithin(opts) {
+    var _a = useFocusRing({
+        within: true,
+        isTextInput: opts.isTextInput,
+    }), isFocusVisible = _a.isFocusVisible, focusProps = _a.focusProps;
+    return [isFocusVisible, focusProps];
+}
+function useHover() {
+    var _a = __read(React.useState(false), 2), isHover = _a[0], setHover = _a[1];
+    return [
+        isHover,
+        {
+            onMouseEnter: function () { return setHover(true); },
+            onMouseLeave: function () { return setHover(false); },
+        },
+    ];
+}
+function usePressed() {
+    var _a = __read(React.useState(false), 2), isPressed = _a[0], setPressed = _a[1];
+    return [
+        isPressed,
+        {
+            onMouseDown: function () { return setPressed(true); },
+            onMouseUp: function () { return setPressed(false); },
+        },
+    ];
+}
+var TRIGGER_TO_HOOK = {
+    useHover: useHover,
+    useFocused: useFocused,
+    useFocusVisible: useFocusVisible,
+    useFocusedWithin: useFocusedWithin,
+    useFocusVisibleWithin: useFocusVisibleWithin,
+    usePressed: usePressed,
+};
+/**
+ * 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);
 }
 
-var ARRAY_SYMBOL = Symbol("[]");
-var PLASMIC_STATE_PROXY_SYMBOL = Symbol("plasmic.state.proxy");
+var ARRAY_SYMBOL = Symbol("[]");
+var PLASMIC_STATE_PROXY_SYMBOL = Symbol("plasmic.state.proxy");
 var UNINITIALIZED = Symbol("plasmic.unitialized");
 
-/** @class */ ((function (_super) {
-    __extends(CustomError, _super);
-    function CustomError(msg) {
-        var _a;
-        var _this = _super.call(this, msg) || this;
-        _this.name = _this.constructor.name;
-        (_a = _this, _this.message = _a.message, _this.stack = _a.stack);
-        return _this;
-    }
-    return CustomError;
-})(Error));
-var CyclicStatesReferencesError = /** @class */ (function (_super) {
-    __extends(CyclicStatesReferencesError, _super);
-    function CyclicStatesReferencesError(stateAccessCycle) {
-        return _super.call(this, "Cyclic reference found in state initialization: " +
-            stateAccessCycle.join(" -> ")) || this;
-    }
-    return CyclicStatesReferencesError;
-}(Error));
-var InvalidOperation = /** @class */ (function (_super) {
-    __extends(InvalidOperation, _super);
-    function InvalidOperation(msg) {
-        return _super.call(this, msg) || this;
-    }
-    return InvalidOperation;
-}(Error));
-var UnknownError = /** @class */ (function (_super) {
-    __extends(UnknownError, _super);
-    function UnknownError(msg) {
-        return _super.call(this, msg) || this;
-    }
-    return UnknownError;
+/** @class */ ((function (_super) {
+    __extends(CustomError, _super);
+    function CustomError(msg) {
+        var _a;
+        var _this = _super.call(this, msg) || this;
+        _this.name = _this.constructor.name;
+        (_a = _this, _this.message = _a.message, _this.stack = _a.stack);
+        return _this;
+    }
+    return CustomError;
+})(Error));
+var CyclicStatesReferencesError = /** @class */ (function (_super) {
+    __extends(CyclicStatesReferencesError, _super);
+    function CyclicStatesReferencesError(stateAccessCycle) {
+        return _super.call(this, "Cyclic reference found in state initialization: " +
+            stateAccessCycle.join(" -> ")) || this;
+    }
+    return CyclicStatesReferencesError;
+}(Error));
+var InvalidOperation = /** @class */ (function (_super) {
+    __extends(InvalidOperation, _super);
+    function InvalidOperation(msg) {
+        return _super.call(this, msg) || this;
+    }
+    return InvalidOperation;
+}(Error));
+var UnknownError = /** @class */ (function (_super) {
+    __extends(UnknownError, _super);
+    function UnknownError(msg) {
+        return _super.call(this, msg) || this;
+    }
+    return UnknownError;
 }(Error));
 
-var StateSpecNode = /** @class */ (function () {
-    function StateSpecNode(specs) {
-        this._specs = specs;
-        this._edges = new Map();
-    }
-    StateSpecNode.prototype.setSpecs = function (specs) {
-        this._specs = specs;
-    };
-    StateSpecNode.prototype.edges = function () {
-        return this._edges;
-    };
-    StateSpecNode.prototype.hasEdge = function (key) {
-        return this._edges.has(key);
-    };
-    StateSpecNode.prototype.addEdge = function (key, node) {
-        this._edges.set(key, node);
-    };
-    StateSpecNode.prototype.clearEdges = function () {
-        this._edges = new Map();
-    };
-    StateSpecNode.prototype.children = function () {
-        return this._edges.values();
-    };
-    StateSpecNode.prototype.makeTransition = function (key) {
-        key = isNum(key) ? ARRAY_SYMBOL : key;
-        return this._edges.get(key);
-    };
-    StateSpecNode.prototype.isLeaf = function () {
-        return this._edges.size === 0 && this.getAllSpecs().length > 0;
-    };
-    StateSpecNode.prototype.hasArrayTransition = function () {
-        return this._edges.has(ARRAY_SYMBOL);
-    };
-    StateSpecNode.prototype.getSpec = function () {
-        return this._specs[0];
-    };
-    StateSpecNode.prototype.getAllSpecs = function () {
-        return this._specs;
-    };
-    return StateSpecNode;
-}());
-var transformPathStringToObj = function (str) {
-    var splitStatePathPart = function (state) {
-        return state.endsWith("[]")
-            ? __spreadArray(__spreadArray([], __read(splitStatePathPart(state.slice(0, -2))), false), [ARRAY_SYMBOL], false) : [state];
-    };
-    return str.split(".").flatMap(splitStatePathPart);
-};
-function buildTree(specs) {
-    var internalSpec = specs.map(function (spec) {
-        return (__assign(__assign({}, spec), { pathObj: transformPathStringToObj(spec.path), isRepeated: spec.path.split(".").some(function (part) { return part.endsWith("[]"); }) }));
-    });
-    var rec = function (currentPath) {
-        var node = new StateSpecNode(internalSpec.filter(function (spec) {
-            return shallowEqual(currentPath, spec.pathObj.slice(0, currentPath.length));
-        }));
-        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(__spreadArray(__spreadArray([], __read(currentPath), false), [nextKey], false)));
-                }
-            }
-        });
-        return node;
-    };
-    return rec([]);
-}
-function updateTree(root, specs) {
-    var internalSpec = specs.map(function (spec) {
-        return (__assign(__assign({}, spec), { pathObj: transformPathStringToObj(spec.path), isRepeated: spec.path.split(".").some(function (part) { return part.endsWith("[]"); }) }));
-    });
-    var rec = function (oldNode, currentPath) {
-        var nodeSpecs = internalSpec.filter(function (spec) {
-            return shallowEqual(currentPath, spec.pathObj.slice(0, currentPath.length));
-        });
-        var node = oldNode !== null && oldNode !== void 0 ? oldNode : new StateSpecNode(nodeSpecs);
-        node.setSpecs(nodeSpecs);
-        var oldEdges = oldNode === null || oldNode === void 0 ? void 0 : oldNode.edges();
-        node.clearEdges();
-        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(oldEdges === null || oldEdges === void 0 ? void 0 : oldEdges.get(nextKey), __spreadArray(__spreadArray([], __read(currentPath), false), [nextKey], false)));
-                }
-            }
-        });
-        return node;
-    };
-    return rec(root, []);
-}
-function getSpecTreeLeaves(root) {
-    var leaves = [];
-    var rec = function (node) {
-        var e_1, _a;
-        try {
-            for (var _b = __values(node.children()), _c = _b.next(); !_c.done; _c = _b.next()) {
-                var child = _c.value;
-                rec(child);
-            }
-        }
-        catch (e_1_1) { e_1 = { error: e_1_1 }; }
-        finally {
-            try {
-                if (_c && !_c.done && (_a = _b["return"])) _a.call(_b);
-            }
-            finally { if (e_1) throw e_1.error; }
-        }
-        if (node.isLeaf() && node.getAllSpecs().length > 0) {
-            leaves.push(node);
-        }
-    };
-    rec(root);
-    return leaves;
-}
-function findStateCell(root, pathStr, repetitionIndex) {
-    var e_2, _a;
-    var realPath = [];
-    var pathObj = transformPathStringToObj(pathStr);
-    var currRepIndex = 0;
-    try {
-        for (var pathObj_1 = __values(pathObj), pathObj_1_1 = pathObj_1.next(); !pathObj_1_1.done; pathObj_1_1 = pathObj_1.next()) {
-            var part = pathObj_1_1.value;
-            if (typeof part === "symbol") {
-                if (!root.hasArrayTransition() ||
-                    !repetitionIndex ||
-                    currRepIndex > repetitionIndex.length) {
-                    throw new Error("transition not found: pathStr ".concat(pathStr, " part ").concat(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 ".concat(pathStr, " part ").concat(typeof part === "symbol" ? "[]" : part));
-                }
-                realPath.push(part);
-                root = root.makeTransition(part);
-            }
-        }
-    }
-    catch (e_2_1) { e_2 = { error: e_2_1 }; }
-    finally {
-        try {
-            if (pathObj_1_1 && !pathObj_1_1.done && (_a = pathObj_1["return"])) _a.call(pathObj_1);
-        }
-        finally { if (e_2) throw e_2.error; }
-    }
-    return {
-        node: root,
-        realPath: realPath
-    };
+var StateSpecNode = /** @class */ (function () {
+    function StateSpecNode(specs) {
+        this._specs = specs;
+        this._edges = new Map();
+    }
+    StateSpecNode.prototype.setSpecs = function (specs) {
+        this._specs = specs;
+    };
+    StateSpecNode.prototype.edges = function () {
+        return this._edges;
+    };
+    StateSpecNode.prototype.hasEdge = function (key) {
+        return this._edges.has(key);
+    };
+    StateSpecNode.prototype.addEdge = function (key, node) {
+        this._edges.set(key, node);
+    };
+    StateSpecNode.prototype.clearEdges = function () {
+        this._edges = new Map();
+    };
+    StateSpecNode.prototype.children = function () {
+        return this._edges.values();
+    };
+    StateSpecNode.prototype.makeTransition = function (key) {
+        key = isNum(key) ? ARRAY_SYMBOL : key;
+        return this._edges.get(key);
+    };
+    StateSpecNode.prototype.isLeaf = function () {
+        return this._edges.size === 0 && this.getAllSpecs().length > 0;
+    };
+    StateSpecNode.prototype.hasArrayTransition = function () {
+        return this._edges.has(ARRAY_SYMBOL);
+    };
+    StateSpecNode.prototype.getSpec = function () {
+        return this._specs[0];
+    };
+    StateSpecNode.prototype.getAllSpecs = function () {
+        return this._specs;
+    };
+    return StateSpecNode;
+}());
+var transformPathStringToObj = function (str) {
+    var splitStatePathPart = function (state) {
+        return state.endsWith("[]")
+            ? __spreadArray(__spreadArray([], __read(splitStatePathPart(state.slice(0, -2))), false), [ARRAY_SYMBOL], false) : [state];
+    };
+    return str.split(".").flatMap(splitStatePathPart);
+};
+function buildTree(specs) {
+    var internalSpec = specs.map(function (spec) {
+        return (__assign(__assign({}, spec), { pathObj: transformPathStringToObj(spec.path), isRepeated: spec.path.split(".").some(function (part) { return part.endsWith("[]"); }) }));
+    });
+    var rec = function (currentPath) {
+        var node = new StateSpecNode(internalSpec.filter(function (spec) {
+            return shallowEqual(currentPath, spec.pathObj.slice(0, currentPath.length));
+        }));
+        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(__spreadArray(__spreadArray([], __read(currentPath), false), [nextKey], false)));
+                }
+            }
+        });
+        return node;
+    };
+    return rec([]);
+}
+function updateTree(root, specs) {
+    var internalSpec = specs.map(function (spec) {
+        return (__assign(__assign({}, spec), { pathObj: transformPathStringToObj(spec.path), isRepeated: spec.path.split(".").some(function (part) { return part.endsWith("[]"); }) }));
+    });
+    var rec = function (oldNode, currentPath) {
+        var nodeSpecs = internalSpec.filter(function (spec) {
+            return shallowEqual(currentPath, spec.pathObj.slice(0, currentPath.length));
+        });
+        var node = oldNode !== null && oldNode !== void 0 ? oldNode : new StateSpecNode(nodeSpecs);
+        node.setSpecs(nodeSpecs);
+        var oldEdges = oldNode === null || oldNode === void 0 ? void 0 : oldNode.edges();
+        node.clearEdges();
+        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(oldEdges === null || oldEdges === void 0 ? void 0 : oldEdges.get(nextKey), __spreadArray(__spreadArray([], __read(currentPath), false), [nextKey], false)));
+                }
+            }
+        });
+        return node;
+    };
+    return rec(root, []);
+}
+function getSpecTreeLeaves(root) {
+    var leaves = [];
+    var rec = function (node) {
+        var e_1, _a;
+        try {
+            for (var _b = __values(node.children()), _c = _b.next(); !_c.done; _c = _b.next()) {
+                var child = _c.value;
+                rec(child);
+            }
+        }
+        catch (e_1_1) { e_1 = { error: e_1_1 }; }
+        finally {
+            try {
+                if (_c && !_c.done && (_a = _b.return)) _a.call(_b);
+            }
+            finally { if (e_1) throw e_1.error; }
+        }
+        if (node.isLeaf() && node.getAllSpecs().length > 0) {
+            leaves.push(node);
+        }
+    };
+    rec(root);
+    return leaves;
+}
+function findStateCell(root, pathStr, repetitionIndex) {
+    var e_2, _a;
+    var realPath = [];
+    var pathObj = transformPathStringToObj(pathStr);
+    var currRepIndex = 0;
+    try {
+        for (var pathObj_1 = __values(pathObj), pathObj_1_1 = pathObj_1.next(); !pathObj_1_1.done; pathObj_1_1 = pathObj_1.next()) {
+            var part = pathObj_1_1.value;
+            if (typeof part === "symbol") {
+                if (!root.hasArrayTransition() ||
+                    !repetitionIndex ||
+                    currRepIndex > repetitionIndex.length) {
+                    throw new Error("transition not found: pathStr ".concat(pathStr, " part ").concat(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 ".concat(pathStr, " part ").concat(typeof part === "symbol" ? "[]" : part));
+                }
+                realPath.push(part);
+                root = root.makeTransition(part);
+            }
+        }
+    }
+    catch (e_2_1) { e_2 = { error: e_2_1 }; }
+    finally {
+        try {
+            if (pathObj_1_1 && !pathObj_1_1.done && (_a = pathObj_1.return)) _a.call(pathObj_1);
+        }
+        finally { if (e_2) throw e_2.error; }
+    }
+    return {
+        node: root,
+        realPath: realPath,
+    };
 }
 
-function isNum$1(value) {
-    return typeof value === "symbol" ? false : !isNaN(+value);
-}
-function canProxy(value) {
-    return typeof value === "object" && value != null;
-}
-var proxyObjToStateCell = new WeakMap();
-var valtioSubscriptions = new WeakMap();
-function ensureStateCell(target, property, path, node) {
-    var _a;
-    if (!proxyObjToStateCell.has(target)) {
-        proxyObjToStateCell.set(target, {});
-    }
-    var stateCell = proxyObjToStateCell.get(target);
-    if (!(property in stateCell)) {
-        stateCell[property] = {
-            listeners: [],
-            initialValue: UNINITIALIZED,
-            path: path,
-            node: node,
-            initFunc: node.getSpec().initFunc,
-            initFuncHash: (_a = node.getSpec().initFuncHash) !== null && _a !== void 0 ? _a : ""
-        };
-    }
-    return stateCell[property];
-}
-function getStateCell(target, property) {
-    var _a;
-    return (_a = proxyObjToStateCell.get(target)) === null || _a === void 0 ? void 0 : _a[property];
-}
-function tryGetStateCellFrom$StateRoot($state, path) {
-    if (path.length === 0) {
-        throw new UnknownError("expected a path with length greater than 0");
-    }
-    var target = get($state, path.slice(0, -1));
-    get(target, path.slice(-1)); // create state cell;
-    return getStateCell(target, path.slice(-1)[0]);
-}
-function getStateCellFrom$StateRoot($state, path) {
-    return ensure(tryGetStateCellFrom$StateRoot($state, path));
-}
-function unsubscribeToValtio($$state, statePath) {
-    var _a;
-    var oldValue = get($$state.stateValues, statePath);
-    if (getVersion(oldValue)) {
-        (_a = valtioSubscriptions.get(oldValue)) === null || _a === void 0 ? void 0 : _a.forEach(function (f) { return f(); });
-        valtioSubscriptions["delete"](oldValue);
-    }
-}
-function subscribeToValtio($$state, statePath, node) {
-    var spec = node.getSpec();
-    var maybeValtioProxy = spec.valueProp
-        ? $$state.env.$props[spec.valueProp]
-        : get($$state.stateValues, statePath);
-    if (getVersion(maybeValtioProxy) && spec.onChangeProp) {
-        var unsub = subscribe(maybeValtioProxy, function () {
-            var _a, _b;
-            (_b = (_a = $$state.env.$props)[spec.onChangeProp]) === null || _b === void 0 ? void 0 : _b.call(_a, spec.valueProp
-                ? $$state.env.$props[spec.valueProp]
-                : get($$state.stateValues, statePath));
-        });
-        if (!valtioSubscriptions.has(maybeValtioProxy)) {
-            valtioSubscriptions.set(maybeValtioProxy, []);
-        }
-        ensure(valtioSubscriptions.get(maybeValtioProxy)).push(unsub);
-    }
-}
-function initializeStateValue($$state, initialStateCell, proxyRoot) {
-    var _a, _b, _c;
-    var initialStateName = initialStateCell.node.getSpec().path;
-    var stateAccess = new Set();
-    $$state.stateInitializationEnv.visited.add(initialStateName);
-    $$state.stateInitializationEnv.stack.push(initialStateName);
-    var $state = create$StateProxy($$state, function (internalStateCell) { return ({
-        get: function () {
-            var spec = internalStateCell.node.getSpec();
-            if ($$state.stateInitializationEnv.visited.has(spec.path)) {
-                // cyclic reference found
-                var stateAccessCycle = [spec.path];
-                while ($$state.stateInitializationEnv.stack.length > 0) {
-                    var curr = $$state.stateInitializationEnv.stack.pop();
-                    if (!curr) {
-                        break;
-                    }
-                    stateAccessCycle.push(curr);
-                    if (curr === spec.path) {
-                        throw new CyclicStatesReferencesError(stateAccessCycle);
-                    }
-                }
-                throw new UnknownError("Internal error: cycle not found");
-            }
-            var stateCell = getStateCellFrom$StateRoot(proxyRoot, internalStateCell.path);
-            stateAccess.add({ stateCell: stateCell });
-            if (spec.valueProp) {
-                return $$state.env.$props[spec.valueProp];
-            }
-            else if (spec.initFunc && stateCell.initialValue === UNINITIALIZED) {
-                return initializeStateValue($$state, stateCell, proxyRoot);
-            }
-            return get(proxyRoot, stateCell.path);
-        },
-        set: function () {
-            throw new InvalidOperation("Cannot update state values during initialization");
-        }
-    }); });
-    stateAccess.forEach(function (_a) {
-        var stateCell = _a.stateCell;
-        stateCell.listeners.push(function () {
-            var _a;
-            var newValue = invokeInitFuncBackwardsCompatible(initialStateCell.node.getSpec().initFunc, __assign({ $state: $state }, ((_a = initialStateCell.overrideEnv) !== null && _a !== void 0 ? _a : $$state.env)));
-            set(proxyRoot, initialStateCell.path, newValue);
-        });
-    });
-    var initialValue = invokeInitFuncBackwardsCompatible(initialStateCell.initFunc, __assign({ $state: $state }, ((_a = initialStateCell.overrideEnv) !== null && _a !== void 0 ? _a : $$state.env)));
-    initialStateCell.initialValue = clone(initialValue);
-    var initialSpec = initialStateCell.node.getSpec();
-    var value = initialSpec.isImmutable
-        ? mkUntrackedValue(initialValue)
-        : clone(initialValue);
-    set(proxyRoot, initialStateCell.path, value);
-    //immediately fire onChange
-    if (initialSpec.onChangeProp) {
-        (_c = (_b = $$state.env.$props)[initialSpec.onChangeProp]) === null || _c === void 0 ? void 0 : _c.call(_b, initialValue);
-    }
-    $$state.stateInitializationEnv.visited["delete"](initialStateName);
-    $$state.stateInitializationEnv.stack.pop();
-    return initialValue;
-}
-function create$StateProxy($$state, leafHandlers) {
-    var proxyRoot;
-    var rec = function (currPath, currNode) {
-        var getNextPath = function (property) { return __spreadArray(__spreadArray([], __read(currPath), false), [
-            isNum$1(property) ? +property : property,
-        ], false); };
-        var spec = currNode.getSpec();
-        var handlers = {
-            deleteProperty: function (target, property) {
-                var _a, _b;
-                if (!currNode.isLeaf() &&
-                    !currNode.hasArrayTransition() &&
-                    !isNum$1(property)) {
-                    throw new InvalidOperation("Can't delete a property in the middle of the state spec");
-                }
-                delete get($$state.stateValues, currPath)[property];
-                if (spec.onChangeProp) {
-                    //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
-                    (_b = (_a = $$state.env.$props)[spec.onChangeProp]) === null || _b === void 0 ? void 0 : _b.call(_a, get(proxyRoot, currPath.slice(spec.pathObj.length)));
-                }
-                return Reflect.deleteProperty(target, property);
-            },
-            get: function (target, property, receiver) {
-                var _a, _b;
-                if (property === PLASMIC_STATE_PROXY_SYMBOL) {
-                    return {
-                        node: currNode,
-                        path: currPath
-                    };
-                }
-                var nextPath = getNextPath(property);
-                var nextNode = currNode.makeTransition(property);
-                if (nextNode === null || nextNode === void 0 ? void 0 : nextNode.isLeaf()) {
-                    return (_b = (_a = leafHandlers(ensureStateCell(receiver, property, nextPath, nextNode))).get) === null || _b === void 0 ? void 0 : _b.call(_a, target, property, receiver);
-                }
-                else if (nextNode && !(property in target)) {
-                    target[property] = rec(nextPath, nextNode);
-                }
-                return Reflect.get(target, property, receiver);
-            },
-            set: function (target, property, value, receiver) {
-                var _a, _b, _c, _d;
-                var nextPath = getNextPath(property);
-                var nextNode = currNode.makeTransition(property);
-                var nextSpec = nextNode === null || nextNode === void 0 ? void 0 : nextNode.getSpec();
-                if (property === "registerInitFunc" && currPath.length === 0) {
-                    return Reflect.set(target, property, value, receiver);
-                }
-                if (!nextNode && currNode.hasArrayTransition()) {
-                    set($$state.stateValues, nextPath, value);
-                    //array can set his own properties such as length, map, ...
-                    return Reflect.set(target, property, value, receiver);
-                }
-                if (nextNode === null || nextNode === void 0 ? void 0 : nextNode.isLeaf()) {
-                    (_b = (_a = leafHandlers(ensureStateCell(receiver, property, nextPath, nextNode))).set) === null || _b === void 0 ? void 0 : _b.call(_a, target, property, value, receiver);
-                    Reflect.set(target, property, value, receiver);
-                    if (nextSpec === null || nextSpec === void 0 ? void 0 : nextSpec.onChangeProp) {
-                        (_d = (_c = $$state.env.$props)[nextSpec.onChangeProp]) === null || _d === void 0 ? void 0 : _d.call(_c, value);
-                    }
-                }
-                if (!nextNode) {
-                    // can't set an unknown field in $state
-                    return false;
-                }
-                if (canProxy(value) && !nextNode.isLeaf()) {
-                    target[property] = rec(nextPath, nextNode);
-                    Reflect.ownKeys(value).forEach(function (key) {
-                        target[property][key] = value[key];
-                    });
-                }
-                else if (!nextNode.isLeaf()) {
-                    throw new InvalidOperation("inserting a primitive value into a non-leaf");
-                }
-                var newValue = nextNode.isLeaf() && (nextSpec === null || nextSpec === void 0 ? void 0 : nextSpec.isImmutable)
-                    ? mkUntrackedValue(value)
-                    : value;
-                unsubscribeToValtio($$state, nextPath);
-                set($$state.stateValues, nextPath, newValue);
-                subscribeToValtio($$state, nextPath, nextNode);
-                return true;
-            }
-        };
-        var baseObject = currNode.hasArrayTransition() ? [] : {};
-        var proxyObj = new Proxy(baseObject, handlers);
-        if (currPath.length === 0) {
-            proxyRoot = proxyObj;
-        }
-        return proxyObj;
-    };
-    return rec([], $$state.rootSpecTree);
-}
-var mkUntrackedValue = function (o) {
-    return o != null && typeof o === "object" ? ref(o) : o;
-};
-var envFieldsAreNonNill = function (env) {
-    var _a, _b;
-    return ({
-        $props: env.$props,
-        $ctx: (_a = env.$ctx) !== null && _a !== void 0 ? _a : {},
-        $queries: (_b = env.$queries) !== null && _b !== void 0 ? _b : {}
-    });
-};
-/**
- * We need to support two versions with different parameters to be backward compatible
- *    {
- *       specs: $StateSpec<any>[],
- *       props: Record<string, any>,
- *       $ctx?: Record<string, any>,
- *       opts?: { inCanvas: boolean; }
- *    }
- *    {
- *       specs: $StateSpec<any>[],
- *       env: { $props; $queries; $ctx },
- *       opts?: { inCanvas: boolean }
- *    }
- */
-function extractDollarStateParametersBackwardCompatible() {
-    var rest = [];
-    for (var _i = 0; _i < arguments.length; _i++) {
-        rest[_i] = arguments[_i];
-    }
-    if ("$props" in rest[0]) {
-        // latest version
-        return {
-            env: rest[0],
-            opts: rest[1]
-        };
-    }
-    else {
-        return {
-            env: {
-                $props: rest[0],
-                $ctx: rest[1],
-                $queries: {}
-            },
-            opts: rest[2]
-        };
-    }
-}
-function invokeInitFuncBackwardsCompatible(initFunc, env) {
-    if (initFunc.length > 1) {
-        return initFunc(env.$props, env.$state, env.$ctx);
-    }
-    else {
-        return initFunc(env);
-    }
-}
-function useDollarState(specs) {
-    var rest = [];
-    for (var _i = 1; _i < arguments.length; _i++) {
-        rest[_i - 1] = arguments[_i];
-    }
-    var _a = extractDollarStateParametersBackwardCompatible.apply(void 0, __spreadArray([], __read(rest), false)), env = _a.env, opts = _a.opts;
-    var $$state = React__default.useRef((function () {
-        var rootSpecTree = buildTree(specs);
-        return {
-            rootSpecTree: rootSpecTree,
-            specTreeLeaves: getSpecTreeLeaves(rootSpecTree),
-            stateValues: proxy({}),
-            env: envFieldsAreNonNill(env),
-            specs: [],
-            registrationsQueue: proxy([]),
-            stateInitializationEnv: { stack: [], visited: new Set() }
-        };
-    })()).current;
-    $$state.env = envFieldsAreNonNill(env);
-    $$state.specs = specs;
-    var create$State = React__default.useCallback(function () {
-        var $state = Object.assign(create$StateProxy($$state, function (stateCell) {
-            var spec = stateCell.node.getSpec();
-            if (stateCell.initialValue === UNINITIALIZED && spec.initFunc) {
-                initializeStateValue($$state, stateCell, $state);
-            }
-            else if (stateCell.initialValue === UNINITIALIZED &&
-                !spec.valueProp) {
-                stateCell.initialValue = spec.initVal;
-                set($state, stateCell.path, spec.initVal);
-            }
-            return {
-                get: function () {
-                    var spec = stateCell.node.getSpec();
-                    if (spec.valueProp) {
-                        var valueProp = $$state.env.$props[spec.valueProp];
-                        subscribeToValtio($$state, stateCell.path, stateCell.node);
-                        return valueProp;
-                    }
-                    else {
-                        return get($$state.stateValues, stateCell.path);
-                    }
-                }
-            };
-        }), {
-            registerInitFunc: function (pathStr, f, repetitionIndex, overrideEnv) {
-                var _a = findStateCell($$state.rootSpecTree, pathStr, repetitionIndex), node = _a.node, realPath = _a.realPath;
-                var stateCell = getStateCellFrom$StateRoot($state, realPath);
-                var env = overrideEnv
-                    ? envFieldsAreNonNill(overrideEnv)
-                    : $$state.env;
-                if (!deepEqual(stateCell.initialValue, f(__assign({ $state: $state }, env)))) {
-                    $$state.registrationsQueue.push(mkUntrackedValue({
-                        node: node,
-                        path: realPath,
-                        f: f,
-                        overrideEnv: overrideEnv
-                            ? envFieldsAreNonNill(overrideEnv)
-                            : undefined
-                    }));
-                }
-            }
-        });
-        return $state;
-    }, []);
-    var ref = React__default.useRef(undefined);
-    if (!ref.current) {
-        ref.current = create$State();
-    }
-    var $state = ref.current;
-    if (opts === null || opts === void 0 ? void 0 : opts.inCanvas) {
-        $$state.rootSpecTree = updateTree($$state.rootSpecTree, specs);
-        var newLeaves = getSpecTreeLeaves($$state.rootSpecTree);
-        if (!arrayEq(newLeaves, $$state.specTreeLeaves)) {
-            var old$state_1 = $state;
-            $state = ref.current = create$State();
-            $$state.specTreeLeaves = newLeaves;
-            getStateCells(old$state_1, $$state.rootSpecTree).forEach(function (_a) {
-                var path = _a.path;
-                var oldStateCell = tryGetStateCellFrom$StateRoot(old$state_1, path);
-                if (oldStateCell) {
-                    set($state, path, get(old$state_1, path));
-                    var newStateCell = getStateCellFrom$StateRoot($state, path);
-                    newStateCell.initialValue = oldStateCell.initialValue;
-                }
-            });
-        }
-        // we need to eager initialize all states in canvas to populate the data picker
-        $$state.specTreeLeaves.forEach(function (node) {
-            var _a, _b;
-            var spec = node.getSpec();
-            if (spec.isRepeated) {
-                return;
-            }
-            var stateCell = getStateCellFrom$StateRoot($state, spec.pathObj);
-            var newSpec = specs.find(function (sp) { return sp.path === spec.path; });
-            if (!newSpec ||
-                (stateCell.initFuncHash === ((_a = newSpec === null || newSpec === void 0 ? void 0 : newSpec.initFuncHash) !== null && _a !== void 0 ? _a : "") &&
-                    stateCell.initialValue !== UNINITIALIZED)) {
-                return;
-            }
-            stateCell.initFunc = newSpec.initFunc;
-            stateCell.initFuncHash = (_b = newSpec.initFuncHash) !== null && _b !== void 0 ? _b : "";
-            var init = spec.valueProp
-                ? $$state.env.$props[spec.valueProp]
-                : spec.initFunc
-                    ? initializeStateValue($$state, stateCell, $state)
-                    : spec.initVal;
-            set($state, spec.pathObj, init);
-        });
-    }
-    // For each spec with an initFunc, evaluate it and see if
-    // the init value has changed. If so, reset its state.
-    var resetSpecs = [];
-    getStateCells($state, $$state.rootSpecTree).forEach(function (stateCell) {
-        var _a;
-        if (stateCell.initFunc) {
-            var newInit = invokeInitFuncBackwardsCompatible(stateCell.initFunc, __assign({ $state: $state }, ((_a = stateCell.overrideEnv) !== null && _a !== void 0 ? _a : envFieldsAreNonNill(env))));
-            if (!deepEqual(newInit, stateCell.initialValue)) {
-                resetSpecs.push({ stateCell: stateCell });
-            }
-        }
-    });
-    var reInitializeState = function (stateCell) {
-        var _a, _b;
-        var newInit = initializeStateValue($$state, stateCell, $state);
-        var spec = stateCell.node.getSpec();
-        if (spec.onChangeProp) {
-            (_b = (_a = $$state.env.$props)[spec.onChangeProp]) === null || _b === void 0 ? void 0 : _b.call(_a, newInit);
-        }
-    };
-    useIsomorphicLayoutEffect(function () {
-        resetSpecs.forEach(function (_a) {
-            var stateCell = _a.stateCell;
-            reInitializeState(stateCell);
-        });
-    }, [env.$props, resetSpecs]);
-    useIsomorphicLayoutEffect(function () {
-        while ($$state.registrationsQueue.length) {
-            var _a = $$state.registrationsQueue.shift(), path = _a.path, f = _a.f, overrideEnv = _a.overrideEnv;
-            var stateCell = getStateCellFrom$StateRoot($state, path);
-            stateCell.initFunc = f;
-            stateCell.overrideEnv = overrideEnv;
-            reInitializeState(stateCell);
-        }
-    }, [$$state.registrationsQueue.length]);
-    // immediately initialize exposed non-private states
-    useIsomorphicLayoutEffect(function () {
-        $$state.specTreeLeaves.forEach(function (node) {
-            var spec = node.getSpec();
-            if (!spec.isRepeated && spec.type !== "private" && spec.initFunc) {
-                var stateCell = getStateCellFrom$StateRoot($state, spec.pathObj);
-                initializeStateValue($$state, stateCell, $state);
-            }
-        });
-    }, []);
-    // Re-render if any value changed in one of these objects
-    useSnapshot($$state.stateValues, { sync: true });
-    useSnapshot($$state.registrationsQueue, { sync: true });
-    return $state;
+function isNum$1(value) {
+    return typeof value === "symbol" ? false : !isNaN(+value);
+}
+function canProxy(value) {
+    return typeof value === "object" && value != null;
+}
+var proxyObjToStateCell = new WeakMap();
+var valtioSubscriptions = new WeakMap();
+function ensureStateCell(target, property, path, node) {
+    var _a;
+    if (!proxyObjToStateCell.has(target)) {
+        proxyObjToStateCell.set(target, {});
+    }
+    var stateCell = proxyObjToStateCell.get(target);
+    if (!(property in stateCell)) {
+        stateCell[property] = {
+            listeners: [],
+            initialValue: UNINITIALIZED,
+            path: path,
+            node: node,
+            initFunc: node.getSpec().initFunc,
+            initFuncHash: (_a = node.getSpec().initFuncHash) !== null && _a !== void 0 ? _a : "",
+        };
+    }
+    return stateCell[property];
+}
+function getStateCell(target, property) {
+    var _a;
+    return (_a = proxyObjToStateCell.get(target)) === null || _a === void 0 ? void 0 : _a[property];
+}
+function tryGetStateCellFrom$StateRoot($state, path) {
+    if (path.length === 0) {
+        throw new UnknownError("expected a path with length greater than 0");
+    }
+    var target = get($state, path.slice(0, -1));
+    get(target, path.slice(-1)); // create state cell;
+    return getStateCell(target, path.slice(-1)[0]);
+}
+function getStateCellFrom$StateRoot($state, path) {
+    return ensure(tryGetStateCellFrom$StateRoot($state, path));
+}
+function unsubscribeToValtio($$state, statePath) {
+    var _a;
+    var oldValue = get($$state.stateValues, statePath);
+    if (getVersion(oldValue)) {
+        (_a = valtioSubscriptions.get(oldValue)) === null || _a === void 0 ? void 0 : _a.forEach(function (f) { return f(); });
+        valtioSubscriptions.delete(oldValue);
+    }
+}
+function subscribeToValtio($$state, statePath, node) {
+    var spec = node.getSpec();
+    var maybeValtioProxy = spec.valueProp
+        ? $$state.env.$props[spec.valueProp]
+        : get($$state.stateValues, statePath);
+    if (getVersion(maybeValtioProxy) && spec.onChangeProp) {
+        var unsub = subscribe(maybeValtioProxy, function () {
+            var _a, _b;
+            (_b = (_a = $$state.env.$props)[spec.onChangeProp]) === null || _b === void 0 ? void 0 : _b.call(_a, spec.valueProp
+                ? $$state.env.$props[spec.valueProp]
+                : get($$state.stateValues, statePath));
+        });
+        if (!valtioSubscriptions.has(maybeValtioProxy)) {
+            valtioSubscriptions.set(maybeValtioProxy, []);
+        }
+        ensure(valtioSubscriptions.get(maybeValtioProxy)).push(unsub);
+    }
+}
+function initializeStateValue($$state, initialStateCell, proxyRoot) {
+    var _a, _b, _c;
+    var initialStateName = initialStateCell.node.getSpec().path;
+    var stateAccess = new Set();
+    $$state.stateInitializationEnv.visited.add(initialStateName);
+    $$state.stateInitializationEnv.stack.push(initialStateName);
+    var $state = create$StateProxy($$state, function (internalStateCell) { return ({
+        get: function () {
+            var spec = internalStateCell.node.getSpec();
+            if ($$state.stateInitializationEnv.visited.has(spec.path)) {
+                // cyclic reference found
+                var stateAccessCycle = [spec.path];
+                while ($$state.stateInitializationEnv.stack.length > 0) {
+                    var curr = $$state.stateInitializationEnv.stack.pop();
+                    if (!curr) {
+                        break;
+                    }
+                    stateAccessCycle.push(curr);
+                    if (curr === spec.path) {
+                        throw new CyclicStatesReferencesError(stateAccessCycle);
+                    }
+                }
+                throw new UnknownError("Internal error: cycle not found");
+            }
+            var stateCell = getStateCellFrom$StateRoot(proxyRoot, internalStateCell.path);
+            stateAccess.add({ stateCell: stateCell });
+            if (spec.valueProp) {
+                return $$state.env.$props[spec.valueProp];
+            }
+            else if (spec.initFunc && stateCell.initialValue === UNINITIALIZED) {
+                return initializeStateValue($$state, stateCell, proxyRoot);
+            }
+            return get(proxyRoot, stateCell.path);
+        },
+        set: function () {
+            throw new InvalidOperation("Cannot update state values during initialization");
+        },
+    }); });
+    stateAccess.forEach(function (_a) {
+        var stateCell = _a.stateCell;
+        stateCell.listeners.push(function () {
+            var _a;
+            var newValue = invokeInitFuncBackwardsCompatible(initialStateCell.node.getSpec().initFunc, __assign({ $state: $state }, ((_a = initialStateCell.overrideEnv) !== null && _a !== void 0 ? _a : $$state.env)));
+            set(proxyRoot, initialStateCell.path, newValue);
+        });
+    });
+    var initialValue = invokeInitFuncBackwardsCompatible(initialStateCell.initFunc, __assign({ $state: $state }, ((_a = initialStateCell.overrideEnv) !== null && _a !== void 0 ? _a : $$state.env)));
+    initialStateCell.initialValue = clone(initialValue);
+    var initialSpec = initialStateCell.node.getSpec();
+    var value = initialSpec.isImmutable
+        ? mkUntrackedValue(initialValue)
+        : clone(initialValue);
+    set(proxyRoot, initialStateCell.path, value);
+    //immediately fire onChange
+    if (initialSpec.onChangeProp) {
+        (_c = (_b = $$state.env.$props)[initialSpec.onChangeProp]) === null || _c === void 0 ? void 0 : _c.call(_b, initialValue);
+    }
+    $$state.stateInitializationEnv.visited.delete(initialStateName);
+    $$state.stateInitializationEnv.stack.pop();
+    return initialValue;
+}
+function create$StateProxy($$state, leafHandlers) {
+    var proxyRoot;
+    var rec = function (currPath, currNode) {
+        var getNextPath = function (property) { return __spreadArray(__spreadArray([], __read(currPath), false), [
+            isNum$1(property) ? +property : property,
+        ], false); };
+        var spec = currNode.getSpec();
+        var handlers = {
+            deleteProperty: function (target, property) {
+                var _a, _b;
+                if (!currNode.isLeaf() &&
+                    !currNode.hasArrayTransition() &&
+                    !isNum$1(property)) {
+                    throw new InvalidOperation("Can't delete a property in the middle of the state spec");
+                }
+                delete get($$state.stateValues, currPath)[property];
+                if (spec.onChangeProp) {
+                    //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
+                    (_b = (_a = $$state.env.$props)[spec.onChangeProp]) === null || _b === void 0 ? void 0 : _b.call(_a, get(proxyRoot, currPath.slice(spec.pathObj.length)));
+                }
+                return Reflect.deleteProperty(target, property);
+            },
+            get: function (target, property, receiver) {
+                var _a, _b;
+                if (property === PLASMIC_STATE_PROXY_SYMBOL) {
+                    return {
+                        node: currNode,
+                        path: currPath,
+                    };
+                }
+                var nextPath = getNextPath(property);
+                var nextNode = currNode.makeTransition(property);
+                if (nextNode === null || nextNode === void 0 ? void 0 : nextNode.isLeaf()) {
+                    return (_b = (_a = leafHandlers(ensureStateCell(receiver, property, nextPath, nextNode))).get) === null || _b === void 0 ? void 0 : _b.call(_a, target, property, receiver);
+                }
+                else if (nextNode && !(property in target)) {
+                    target[property] = rec(nextPath, nextNode);
+                }
+                return Reflect.get(target, property, receiver);
+            },
+            set: function (target, property, value, receiver) {
+                var _a, _b, _c, _d;
+                var nextPath = getNextPath(property);
+                var nextNode = currNode.makeTransition(property);
+                var nextSpec = nextNode === null || nextNode === void 0 ? void 0 : nextNode.getSpec();
+                if (property === "registerInitFunc" && currPath.length === 0) {
+                    return Reflect.set(target, property, value, receiver);
+                }
+                if (!nextNode && currNode.hasArrayTransition()) {
+                    set($$state.stateValues, nextPath, value);
+                    //array can set his own properties such as length, map, ...
+                    return Reflect.set(target, property, value, receiver);
+                }
+                if (nextNode === null || nextNode === void 0 ? void 0 : nextNode.isLeaf()) {
+                    (_b = (_a = leafHandlers(ensureStateCell(receiver, property, nextPath, nextNode))).set) === null || _b === void 0 ? void 0 : _b.call(_a, target, property, value, receiver);
+                    Reflect.set(target, property, value, receiver);
+                    if (nextSpec === null || nextSpec === void 0 ? void 0 : nextSpec.onChangeProp) {
+                        (_d = (_c = $$state.env.$props)[nextSpec.onChangeProp]) === null || _d === void 0 ? void 0 : _d.call(_c, value);
+                    }
+                }
+                if (!nextNode) {
+                    // can't set an unknown field in $state
+                    return false;
+                }
+                if (canProxy(value) && !nextNode.isLeaf()) {
+                    target[property] = rec(nextPath, nextNode);
+                    Reflect.ownKeys(value).forEach(function (key) {
+                        target[property][key] = value[key];
+                    });
+                }
+                else if (!nextNode.isLeaf()) {
+                    throw new InvalidOperation("inserting a primitive value into a non-leaf");
+                }
+                var newValue = nextNode.isLeaf() && (nextSpec === null || nextSpec === void 0 ? void 0 : nextSpec.isImmutable)
+                    ? mkUntrackedValue(value)
+                    : value;
+                unsubscribeToValtio($$state, nextPath);
+                set($$state.stateValues, nextPath, newValue);
+                subscribeToValtio($$state, nextPath, nextNode);
+                return true;
+            },
+        };
+        var baseObject = currNode.hasArrayTransition() ? [] : {};
+        var proxyObj = new Proxy(baseObject, handlers);
+        if (currPath.length === 0) {
+            proxyRoot = proxyObj;
+        }
+        return proxyObj;
+    };
+    return rec([], $$state.rootSpecTree);
+}
+var mkUntrackedValue = function (o) {
+    return o != null && typeof o === "object" ? ref(o) : o;
+};
+var envFieldsAreNonNill = function (env) {
+    var _a, _b;
+    return ({
+        $props: env.$props,
+        $ctx: (_a = env.$ctx) !== null && _a !== void 0 ? _a : {},
+        $queries: (_b = env.$queries) !== null && _b !== void 0 ? _b : {},
+    });
+};
+/**
+ * We need to support two versions with different parameters to be backward compatible
+ *    {
+ *       specs: $StateSpec<any>[],
+ *       props: Record<string, any>,
+ *       $ctx?: Record<string, any>,
+ *       opts?: { inCanvas: boolean; }
+ *    }
+ *    {
+ *       specs: $StateSpec<any>[],
+ *       env: { $props; $queries; $ctx },
+ *       opts?: { inCanvas: boolean }
+ *    }
+ */
+function extractDollarStateParametersBackwardCompatible() {
+    var rest = [];
+    for (var _i = 0; _i < arguments.length; _i++) {
+        rest[_i] = arguments[_i];
+    }
+    if ("$props" in rest[0]) {
+        // latest version
+        return {
+            env: rest[0],
+            opts: rest[1],
+        };
+    }
+    else {
+        return {
+            env: {
+                $props: rest[0],
+                $ctx: rest[1],
+                $queries: {},
+            },
+            opts: rest[2],
+        };
+    }
+}
+function invokeInitFuncBackwardsCompatible(initFunc, env) {
+    if (initFunc.length > 1) {
+        return initFunc(env.$props, env.$state, env.$ctx);
+    }
+    else {
+        return initFunc(env);
+    }
+}
+function useDollarState(specs) {
+    var rest = [];
+    for (var _i = 1; _i < arguments.length; _i++) {
+        rest[_i - 1] = arguments[_i];
+    }
+    var _a = extractDollarStateParametersBackwardCompatible.apply(void 0, __spreadArray([], __read(rest), false)), env = _a.env, opts = _a.opts;
+    var $$state = React__default.useRef((function () {
+        var rootSpecTree = buildTree(specs);
+        return {
+            rootSpecTree: rootSpecTree,
+            specTreeLeaves: getSpecTreeLeaves(rootSpecTree),
+            stateValues: proxy({}),
+            env: envFieldsAreNonNill(env),
+            specs: [],
+            registrationsQueue: proxy([]),
+            stateInitializationEnv: { stack: [], visited: new Set() },
+        };
+    })()).current;
+    $$state.env = envFieldsAreNonNill(env);
+    $$state.specs = specs;
+    var create$State = React__default.useCallback(function () {
+        var $state = Object.assign(create$StateProxy($$state, function (stateCell) {
+            var spec = stateCell.node.getSpec();
+            if (stateCell.initialValue === UNINITIALIZED && spec.initFunc) {
+                initializeStateValue($$state, stateCell, $state);
+            }
+            else if (stateCell.initialValue === UNINITIALIZED &&
+                !spec.valueProp) {
+                stateCell.initialValue = spec.initVal;
+                set($state, stateCell.path, spec.initVal);
+            }
+            return {
+                get: function () {
+                    var spec = stateCell.node.getSpec();
+                    if (spec.valueProp) {
+                        var valueProp = $$state.env.$props[spec.valueProp];
+                        subscribeToValtio($$state, stateCell.path, stateCell.node);
+                        return valueProp;
+                    }
+                    else {
+                        return get($$state.stateValues, stateCell.path);
+                    }
+                },
+            };
+        }), {
+            registerInitFunc: function (pathStr, f, repetitionIndex, overrideEnv) {
+                var _a = findStateCell($$state.rootSpecTree, pathStr, repetitionIndex), node = _a.node, realPath = _a.realPath;
+                var stateCell = getStateCellFrom$StateRoot($state, realPath);
+                var env = overrideEnv
+                    ? envFieldsAreNonNill(overrideEnv)
+                    : $$state.env;
+                if (!deepEqual(stateCell.initialValue, f(__assign({ $state: $state }, env)))) {
+                    $$state.registrationsQueue.push(mkUntrackedValue({
+                        node: node,
+                        path: realPath,
+                        f: f,
+                        overrideEnv: overrideEnv
+                            ? envFieldsAreNonNill(overrideEnv)
+                            : undefined,
+                    }));
+                }
+            },
+        });
+        return $state;
+    }, []);
+    var ref = React__default.useRef(undefined);
+    if (!ref.current) {
+        ref.current = create$State();
+    }
+    var $state = ref.current;
+    if (opts === null || opts === void 0 ? void 0 : opts.inCanvas) {
+        $$state.rootSpecTree = updateTree($$state.rootSpecTree, specs);
+        var newLeaves = getSpecTreeLeaves($$state.rootSpecTree);
+        if (!arrayEq(newLeaves, $$state.specTreeLeaves)) {
+            var old$state_1 = $state;
+            $state = ref.current = create$State();
+            $$state.specTreeLeaves = newLeaves;
+            getStateCells(old$state_1, $$state.rootSpecTree).forEach(function (_a) {
+                var path = _a.path;
+                var oldStateCell = tryGetStateCellFrom$StateRoot(old$state_1, path);
+                if (oldStateCell) {
+                    set($state, path, get(old$state_1, path));
+                    var newStateCell = getStateCellFrom$StateRoot($state, path);
+                    newStateCell.initialValue = oldStateCell.initialValue;
+                }
+            });
+        }
+        // we need to eager initialize all states in canvas to populate the data picker
+        $$state.specTreeLeaves.forEach(function (node) {
+            var _a, _b;
+            var spec = node.getSpec();
+            if (spec.isRepeated) {
+                return;
+            }
+            var stateCell = getStateCellFrom$StateRoot($state, spec.pathObj);
+            var newSpec = specs.find(function (sp) { return sp.path === spec.path; });
+            if (!newSpec ||
+                (stateCell.initFuncHash === ((_a = newSpec === null || newSpec === void 0 ? void 0 : newSpec.initFuncHash) !== null && _a !== void 0 ? _a : "") &&
+                    stateCell.initialValue !== UNINITIALIZED)) {
+                return;
+            }
+            stateCell.initFunc = newSpec.initFunc;
+            stateCell.initFuncHash = (_b = newSpec.initFuncHash) !== null && _b !== void 0 ? _b : "";
+            var init = spec.valueProp
+                ? $$state.env.$props[spec.valueProp]
+                : spec.initFunc
+                    ? initializeStateValue($$state, stateCell, $state)
+                    : spec.initVal;
+            set($state, spec.pathObj, init);
+        });
+    }
+    // For each spec with an initFunc, evaluate it and see if
+    // the init value has changed. If so, reset its state.
+    var resetSpecs = [];
+    getStateCells($state, $$state.rootSpecTree).forEach(function (stateCell) {
+        var _a;
+        if (stateCell.initFunc) {
+            var newInit = invokeInitFuncBackwardsCompatible(stateCell.initFunc, __assign({ $state: $state }, ((_a = stateCell.overrideEnv) !== null && _a !== void 0 ? _a : envFieldsAreNonNill(env))));
+            if (!deepEqual(newInit, stateCell.initialValue)) {
+                resetSpecs.push({ stateCell: stateCell });
+            }
+        }
+    });
+    var reInitializeState = function (stateCell) {
+        var _a, _b;
+        var newInit = initializeStateValue($$state, stateCell, $state);
+        var spec = stateCell.node.getSpec();
+        if (spec.onChangeProp) {
+            (_b = (_a = $$state.env.$props)[spec.onChangeProp]) === null || _b === void 0 ? void 0 : _b.call(_a, newInit);
+        }
+    };
+    useIsomorphicLayoutEffect(function () {
+        resetSpecs.forEach(function (_a) {
+            var stateCell = _a.stateCell;
+            reInitializeState(stateCell);
+        });
+    }, [env.$props, resetSpecs]);
+    useIsomorphicLayoutEffect(function () {
+        while ($$state.registrationsQueue.length) {
+            var _a = $$state.registrationsQueue.shift(), path = _a.path, f = _a.f, overrideEnv = _a.overrideEnv;
+            var stateCell = getStateCellFrom$StateRoot($state, path);
+            stateCell.initFunc = f;
+            stateCell.overrideEnv = overrideEnv;
+            reInitializeState(stateCell);
+        }
+    }, [$$state.registrationsQueue.length]);
+    // immediately initialize exposed non-private states
+    useIsomorphicLayoutEffect(function () {
+        $$state.specTreeLeaves.forEach(function (node) {
+            var spec = node.getSpec();
+            if (!spec.isRepeated && spec.type !== "private" && spec.initFunc) {
+                var stateCell = getStateCellFrom$StateRoot($state, spec.pathObj);
+                initializeStateValue($$state, stateCell, $state);
+            }
+        });
+    }, []);
+    // Re-render if any value changed in one of these objects
+    useSnapshot($$state.stateValues, { sync: true });
+    useSnapshot($$state.registrationsQueue, { sync: true });
+    return $state;
 }
 
-function initializeCodeComponentStates($state, states, repetitionIndex, componentHelpers, child$Props) {
-    var e_1, _a;
-    var _b, _c;
-    var stateHelpers = (_b = componentHelpers === null || componentHelpers === void 0 ? void 0 : componentHelpers.states) !== null && _b !== void 0 ? _b : {};
-    var _loop_1 = function (name_1, plasmicStateName) {
-        if (name_1 in stateHelpers && "initFunc" in stateHelpers[name_1]) {
-            (_c = $state.registerInitFunc) === null || _c === void 0 ? void 0 : _c.call($state, plasmicStateName, function (_a) {
-                var _b, _c;
-                var $props = _a.$props;
-                return (_c = (_b = stateHelpers[name_1]).initFunc) === null || _c === void 0 ? void 0 : _c.call(_b, $props);
-            }, repetitionIndex !== null && repetitionIndex !== void 0 ? repetitionIndex : [], { $props: child$Props });
-        }
-    };
-    try {
-        for (var states_1 = __values(states), states_1_1 = states_1.next(); !states_1_1.done; states_1_1 = states_1.next()) {
-            var _d = states_1_1.value, name_1 = _d.name, plasmicStateName = _d.plasmicStateName;
-            _loop_1(name_1, plasmicStateName);
-        }
-    }
-    catch (e_1_1) { e_1 = { error: e_1_1 }; }
-    finally {
-        try {
-            if (states_1_1 && !states_1_1.done && (_a = states_1["return"])) _a.call(states_1);
-        }
-        finally { if (e_1) throw e_1.error; }
-    }
-}
-function initializePlasmicStates($state, states, repetitionIndex) {
-    var e_2, _a;
-    var _b;
-    try {
-        for (var states_2 = __values(states), states_2_1 = states_2.next(); !states_2_1.done; states_2_1 = states_2.next()) {
-            var _c = states_2_1.value, name_2 = _c.name, initFunc = _c.initFunc;
-            (_b = $state.registerInitFunc) === null || _b === void 0 ? void 0 : _b.call($state, name_2, initFunc, repetitionIndex !== null && repetitionIndex !== void 0 ? repetitionIndex : []);
-        }
-    }
-    catch (e_2_1) { e_2 = { error: e_2_1 }; }
-    finally {
-        try {
-            if (states_2_1 && !states_2_1.done && (_a = states_2["return"])) _a.call(states_2);
-        }
-        finally { if (e_2) throw e_2.error; }
-    }
-}
-function generateStateOnChangeProp($state, path) {
-    return function (val) { return set($state, path, val); };
-}
-function generateStateOnChangePropForCodeComponents($state, stateName, plasmicStatePath, componentHelpers) {
-    var _a, _b;
-    var onChangeArgsToValue = (_b = (_a = componentHelpers === null || componentHelpers === void 0 ? void 0 : componentHelpers.states) === null || _a === void 0 ? void 0 : _a[stateName]) === null || _b === void 0 ? void 0 : _b.onChangeArgsToValue;
-    if (!onChangeArgsToValue || typeof onChangeArgsToValue !== "function") {
-        return generateStateOnChangeProp($state, plasmicStatePath);
-    }
-    return function () {
-        var args = [];
-        for (var _i = 0; _i < arguments.length; _i++) {
-            args[_i] = arguments[_i];
-        }
-        return generateStateOnChangeProp($state, plasmicStatePath)(onChangeArgsToValue.apply(null, args));
-    };
-}
-function generateStateValueProp($state, path) {
-    return get($state, path);
-}
-var useIsomorphicLayoutEffect = typeof window !== "undefined" ? useLayoutEffect : useEffect;
-function isPlasmicStateProxy(obj) {
-    return (obj != null && typeof obj === "object" && !!obj[PLASMIC_STATE_PROXY_SYMBOL]);
-}
-function is$StateProxy(obj) {
-    return (obj != null &&
-        typeof obj === "object" &&
-        (!!obj[PLASMIC_STATE_PROXY_SYMBOL] || getVersion(obj)));
-}
-function getStateCells($state, root) {
-    var e_3, _a;
-    var _b;
-    if ($state == null || typeof $state !== "object") {
-        return [];
-    }
-    if (root.hasArrayTransition()) {
-        return Object.keys($state).flatMap(function (key) {
-            return getStateCells($state[key], ensure(root.makeTransition(ARRAY_SYMBOL)));
-        });
-    }
-    else {
-        var stateCell = (_b = proxyObjToStateCell.get($state)) !== null && _b !== void 0 ? _b : {};
-        var stateCells = [];
-        try {
-            for (var _c = __values(root.edges().entries()), _d = _c.next(); !_d.done; _d = _c.next()) {
-                var _e = __read(_d.value, 2), key = _e[0], child = _e[1];
-                if (typeof key === "string" && key in $state) {
-                    stateCells.push.apply(stateCells, __spreadArray([], __read(getStateCells($state[key], child)), false));
-                    if (key in stateCell) {
-                        stateCells.push(stateCell[key]);
-                    }
-                }
-            }
-        }
-        catch (e_3_1) { e_3 = { error: e_3_1 }; }
-        finally {
-            try {
-                if (_d && !_d.done && (_a = _c["return"])) _a.call(_c);
-            }
-            finally { if (e_3) throw e_3.error; }
-        }
-        return stateCells;
-    }
-}
-function getStateCellsInPlasmicProxy(obj) {
-    if (!isPlasmicStateProxy(obj)) {
-        return [];
-    }
-    var _a = obj[PLASMIC_STATE_PROXY_SYMBOL], rootNode = _a.node, rootPath = _a.path, isOutside = _a.isOutside;
-    if (isOutside) {
-        return [];
-    }
-    return getStateCells(obj, rootNode).map(function (stateCell) { return ({
-        path: stateCell.node.getSpec().path,
-        realPath: stateCell.path.slice(rootPath.length)
-    }); });
-}
-function getStateSpecInPlasmicProxy(obj, path) {
-    obj = get(obj, path.slice(0, path.length - 1));
-    if (!isPlasmicStateProxy(obj)) {
-        return undefined;
-    }
-    var node = obj[PLASMIC_STATE_PROXY_SYMBOL].node;
-    var nextNode = node.makeTransition(path[path.length - 1]);
-    if (node.isLeaf() || !nextNode) {
-        return undefined;
-    }
-    return {
-        spec: nextNode.getSpec(),
-        isImplicitStateArray: nextNode.hasArrayTransition()
-    };
-}
-function getCurrentInitialValue(obj, path) {
-    var _a;
-    if (!isPlasmicStateProxy(obj)) {
-        return undefined;
-    }
-    return (_a = tryGetStateCellFrom$StateRoot(obj, path)) === null || _a === void 0 ? void 0 : _a.initialValue;
-}
-function resetToInitialValue(obj, path) {
-    var stateCell = tryGetStateCellFrom$StateRoot(obj, path);
-    if (stateCell) {
-        set(obj, path, stateCell.initialValue);
-    }
-}
-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;
-}
-/**
- * Shallow comparison of arrays.
- */
-function arrayEq(xs, ys) {
-    return (xs.length === ys.length && xs.every(function (_, index) { return xs[index] === ys[index]; }));
-}
-function isNum(value) {
-    return typeof value === "symbol" ? false : !isNaN(+value);
-}
-/**
- * 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);
-    }
+function initializeCodeComponentStates($state, states, repetitionIndex, componentHelpers, child$Props) {
+    var e_1, _a;
+    var _b, _c;
+    var stateHelpers = (_b = componentHelpers === null || componentHelpers === void 0 ? void 0 : componentHelpers.states) !== null && _b !== void 0 ? _b : {};
+    var _loop_1 = function (name_1, plasmicStateName) {
+        if (name_1 in stateHelpers && "initFunc" in stateHelpers[name_1]) {
+            (_c = $state.registerInitFunc) === null || _c === void 0 ? void 0 : _c.call($state, plasmicStateName, function (_a) {
+                var _b, _c;
+                var $props = _a.$props;
+                return (_c = (_b = stateHelpers[name_1]).initFunc) === null || _c === void 0 ? void 0 : _c.call(_b, $props);
+            }, repetitionIndex !== null && repetitionIndex !== void 0 ? repetitionIndex : [], { $props: child$Props });
+        }
+    };
+    try {
+        for (var states_1 = __values(states), states_1_1 = states_1.next(); !states_1_1.done; states_1_1 = states_1.next()) {
+            var _d = states_1_1.value, name_1 = _d.name, plasmicStateName = _d.plasmicStateName;
+            _loop_1(name_1, plasmicStateName);
+        }
+    }
+    catch (e_1_1) { e_1 = { error: e_1_1 }; }
+    finally {
+        try {
+            if (states_1_1 && !states_1_1.done && (_a = states_1.return)) _a.call(states_1);
+        }
+        finally { if (e_1) throw e_1.error; }
+    }
+}
+function initializePlasmicStates($state, states, repetitionIndex) {
+    var e_2, _a;
+    var _b;
+    try {
+        for (var states_2 = __values(states), states_2_1 = states_2.next(); !states_2_1.done; states_2_1 = states_2.next()) {
+            var _c = states_2_1.value, name_2 = _c.name, initFunc = _c.initFunc;
+            (_b = $state.registerInitFunc) === null || _b === void 0 ? void 0 : _b.call($state, name_2, initFunc, repetitionIndex !== null && repetitionIndex !== void 0 ? repetitionIndex : []);
+        }
+    }
+    catch (e_2_1) { e_2 = { error: e_2_1 }; }
+    finally {
+        try {
+            if (states_2_1 && !states_2_1.done && (_a = states_2.return)) _a.call(states_2);
+        }
+        finally { if (e_2) throw e_2.error; }
+    }
+}
+function generateStateOnChangeProp($state, path) {
+    return function (val) { return set($state, path, val); };
+}
+function generateStateOnChangePropForCodeComponents($state, stateName, plasmicStatePath, componentHelpers) {
+    var _a, _b;
+    var onChangeArgsToValue = (_b = (_a = componentHelpers === null || componentHelpers === void 0 ? void 0 : componentHelpers.states) === null || _a === void 0 ? void 0 : _a[stateName]) === null || _b === void 0 ? void 0 : _b.onChangeArgsToValue;
+    if (!onChangeArgsToValue || typeof onChangeArgsToValue !== "function") {
+        return generateStateOnChangeProp($state, plasmicStatePath);
+    }
+    return function () {
+        var args = [];
+        for (var _i = 0; _i < arguments.length; _i++) {
+            args[_i] = arguments[_i];
+        }
+        return generateStateOnChangeProp($state, plasmicStatePath)(onChangeArgsToValue.apply(null, args));
+    };
+}
+function generateStateValueProp($state, path) {
+    return get($state, path);
+}
+var useIsomorphicLayoutEffect = typeof window !== "undefined" ? useLayoutEffect : useEffect;
+function isPlasmicStateProxy(obj) {
+    return (obj != null && typeof obj === "object" && !!obj[PLASMIC_STATE_PROXY_SYMBOL]);
+}
+function is$StateProxy(obj) {
+    return (obj != null &&
+        typeof obj === "object" &&
+        (!!obj[PLASMIC_STATE_PROXY_SYMBOL] || getVersion(obj)));
+}
+function getStateCells($state, root) {
+    var e_3, _a;
+    var _b;
+    if ($state == null || typeof $state !== "object") {
+        return [];
+    }
+    if (root.hasArrayTransition()) {
+        return Object.keys($state).flatMap(function (key) {
+            return getStateCells($state[key], ensure(root.makeTransition(ARRAY_SYMBOL)));
+        });
+    }
+    else {
+        var stateCell = (_b = proxyObjToStateCell.get($state)) !== null && _b !== void 0 ? _b : {};
+        var stateCells = [];
+        try {
+            for (var _c = __values(root.edges().entries()), _d = _c.next(); !_d.done; _d = _c.next()) {
+                var _e = __read(_d.value, 2), key = _e[0], child = _e[1];
+                if (typeof key === "string" && key in $state) {
+                    stateCells.push.apply(stateCells, __spreadArray([], __read(getStateCells($state[key], child)), false));
+                    if (key in stateCell) {
+                        stateCells.push(stateCell[key]);
+                    }
+                }
+            }
+        }
+        catch (e_3_1) { e_3 = { error: e_3_1 }; }
+        finally {
+            try {
+                if (_d && !_d.done && (_a = _c.return)) _a.call(_c);
+            }
+            finally { if (e_3) throw e_3.error; }
+        }
+        return stateCells;
+    }
+}
+function getStateCellsInPlasmicProxy(obj) {
+    if (!isPlasmicStateProxy(obj)) {
+        return [];
+    }
+    var _a = obj[PLASMIC_STATE_PROXY_SYMBOL], rootNode = _a.node, rootPath = _a.path, isOutside = _a.isOutside;
+    if (isOutside) {
+        return [];
+    }
+    return getStateCells(obj, rootNode).map(function (stateCell) { return ({
+        path: stateCell.node.getSpec().path,
+        realPath: stateCell.path.slice(rootPath.length),
+    }); });
+}
+function getStateSpecInPlasmicProxy(obj, path) {
+    obj = get(obj, path.slice(0, path.length - 1));
+    if (!isPlasmicStateProxy(obj)) {
+        return undefined;
+    }
+    var node = obj[PLASMIC_STATE_PROXY_SYMBOL].node;
+    var nextNode = node.makeTransition(path[path.length - 1]);
+    if (node.isLeaf() || !nextNode) {
+        return undefined;
+    }
+    return {
+        spec: nextNode.getSpec(),
+        isImplicitStateArray: nextNode.hasArrayTransition(),
+    };
+}
+function getCurrentInitialValue(obj, path) {
+    var _a;
+    if (!isPlasmicStateProxy(obj)) {
+        return undefined;
+    }
+    return (_a = tryGetStateCellFrom$StateRoot(obj, path)) === null || _a === void 0 ? void 0 : _a.initialValue;
+}
+function resetToInitialValue(obj, path) {
+    var stateCell = tryGetStateCellFrom$StateRoot(obj, path);
+    if (stateCell) {
+        set(obj, path, stateCell.initialValue);
+    }
+}
+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;
+}
+/**
+ * Shallow comparison of arrays.
+ */
+function arrayEq(xs, ys) {
+    return (xs.length === ys.length && xs.every(function (_, index) { return xs[index] === ys[index]; }));
+}
+function isNum(value) {
+    return typeof value === "symbol" ? false : !isNaN(+value);
+}
+/**
+ * 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);
+    }
 }
 
-// Utilities used by generated code
+// Utilities used by generated code
 var classNames = classNames$1;
 
 export { PlasmicIcon, PlasmicLink, PlasmicPageGuard, PlasmicSlot, Stack, classNames, createPlasmicElementProxy, createUseScreenVariants, deriveRenderOpts, ensureGlobalVariants, generateStateOnChangeProp, generateStateOnChangePropForCodeComponents, generateStateValueProp, getCurrentInitialValue, getStateCellsInPlasmicProxy, getStateSpecInPlasmicProxy, hasVariant, initializeCodeComponentStates, initializePlasmicStates, is$StateProxy, isPlasmicStateProxy, makeFragment, mergeVariantsWithStates, renderPlasmicSlot, resetToInitialValue, set, useDollarState, useTrigger, withPlasmicPageGuard, wrapWithClassName };