@plasmicapp/react-web 0.2.197 → 0.2.198

package/dist/index.cjs.js

@@ -0,0 +1,3715 @@
+'use client';
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var classNames$1 = require('classnames');
+var tslib = require('tslib');
+var dataSourcesContext = require('@plasmicapp/data-sources-context');
+var React = require('react');
+var get = require('dlv');
+var ReactDOM = require('react-dom');
+var ssr = require('@react-aria/ssr');
+var focus = require('@react-aria/focus');
+var valtio = require('valtio');
+var clone = require('clone');
+var deepEqual = require('fast-deep-equal');
+var checkbox = require('@react-aria/checkbox');
+var visuallyHidden = require('@react-aria/visually-hidden');
+var toggle = require('@react-stately/toggle');
+var menu = require('@react-aria/menu');
+var tree = require('@react-stately/tree');
+var collections = require('@react-stately/collections');
+var separator = require('@react-aria/separator');
+var menu$1 = require('@react-stately/menu');
+var interactions = require('@react-aria/interactions');
+var host = require('@plasmicapp/host');
+var listbox = require('@react-aria/listbox');
+var select$1 = require('@react-aria/select');
+var select = require('@react-stately/select');
+var _switch = require('@react-aria/switch');
+var overlays = require('@react-aria/overlays');
+
+function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
+
+function _interopNamespace(e) {
+  if (e && e.__esModule) return e;
+  var n = Object.create(null);
+  if (e) {
+    Object.keys(e).forEach(function (k) {
+      if (k !== 'default') {
+        var d = Object.getOwnPropertyDescriptor(e, k);
+        Object.defineProperty(n, k, d.get ? d : {
+          enumerable: true,
+          get: function () {
+            return e[k];
+          }
+        });
+      }
+    });
+  }
+  n['default'] = e;
+  return Object.freeze(n);
+}
+
+var classNames__default = /*#__PURE__*/_interopDefaultLegacy(classNames$1);
+var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
+var React__namespace = /*#__PURE__*/_interopNamespace(React);
+var get__default = /*#__PURE__*/_interopDefaultLegacy(get);
+var ReactDOM__default = /*#__PURE__*/_interopDefaultLegacy(ReactDOM);
+var ReactDOM__namespace = /*#__PURE__*/_interopNamespace(ReactDOM);
+var clone__default = /*#__PURE__*/_interopDefaultLegacy(clone);
+var deepEqual__default = /*#__PURE__*/_interopDefaultLegacy(deepEqual);
+
+// 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 tslib.__awaiter(this, void 0, void 0, function () {
+        function sha256(text) {
+            return tslib.__awaiter(this, void 0, void 0, function () {
+                var encoder, data, hashBuffer, hashArray, hashHex;
+                return tslib.__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 tslib.__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 = dataSourcesContext.usePlasmicDataSourceContext();
+    React__default['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['default'].createElement("div", null, "You don't have access to this page");
+    }
+    return React__default['default'].createElement(React__default['default'].Fragment, null, children);
+}
+function withPlasmicPageGuard(WrappedComponent, options) {
+    var PageGuard = function (props) { return (React__default['default'].createElement(PlasmicPageGuard, tslib.__assign({}, options),
+        React__default['default'].createElement(WrappedComponent, tslib.__assign({}, props)))); };
+    return PageGuard;
+}
+
+function notNil(x) {
+    return x != null;
+}
+function pick(obj) {
+    var e_1, _a;
+    var keys = [];
+    for (var _i = 1; _i < arguments.length; _i++) {
+        keys[_i - 1] = arguments[_i];
+    }
+    if (Object.keys(obj).length === 0) {
+        return obj;
+    }
+    var res = {};
+    try {
+        for (var keys_1 = tslib.__values(keys), keys_1_1 = keys_1.next(); !keys_1_1.done; keys_1_1 = keys_1.next()) {
+            var key = keys_1_1.value;
+            if (key in obj) {
+                res[key] = obj[key];
+            }
+        }
+    }
+    catch (e_1_1) { e_1 = { error: e_1_1 }; }
+    finally {
+        try {
+            if (keys_1_1 && !keys_1_1.done && (_a = keys_1["return"])) _a.call(keys_1);
+        }
+        finally { if (e_1) throw e_1.error; }
+    }
+    return res;
+}
+function pickBy(obj, func) {
+    var e_2, _a;
+    var res = {};
+    try {
+        for (var _b = tslib.__values(Object.entries(obj)), _c = _b.next(); !_c.done; _c = _b.next()) {
+            var _d = tslib.__read(_c.value, 2), key = _d[0], val = _d[1];
+            if (func(key, val)) {
+                res[key] = obj[key];
+            }
+        }
+    }
+    catch (e_2_1) { e_2 = { error: e_2_1 }; }
+    finally {
+        try {
+            if (_c && !_c.done && (_a = _b["return"])) _a.call(_b);
+        }
+        finally { if (e_2) throw e_2.error; }
+    }
+    return res;
+}
+function omit(obj) {
+    var e_3, _a;
+    var keys = [];
+    for (var _i = 1; _i < arguments.length; _i++) {
+        keys[_i - 1] = arguments[_i];
+    }
+    if (Object.keys(obj).length === 0) {
+        return obj;
+    }
+    var res = {};
+    try {
+        for (var _b = tslib.__values(Object.keys(obj)), _c = _b.next(); !_c.done; _c = _b.next()) {
+            var key = _c.value;
+            if (!keys.includes(key)) {
+                res[key] = obj[key];
+            }
+        }
+    }
+    catch (e_3_1) { e_3 = { error: e_3_1 }; }
+    finally {
+        try {
+            if (_c && !_c.done && (_a = _b["return"])) _a.call(_b);
+        }
+        finally { if (e_3) throw e_3.error; }
+    }
+    return res;
+}
+function isSubset(a1, a2) {
+    return a1.every(function (x) { return a2.includes(x); });
+}
+function chainSingleArgFuncs() {
+    var funcs = [];
+    for (var _i = 0; _i < arguments.length; _i++) {
+        funcs[_i] = arguments[_i];
+    }
+    if (funcs.length === 0) {
+        return undefined;
+    }
+    return function (arg) {
+        var e_4, _a;
+        var res = arg;
+        try {
+            for (var funcs_1 = tslib.__values(funcs), funcs_1_1 = funcs_1.next(); !funcs_1_1.done; funcs_1_1 = funcs_1.next()) {
+                var func = funcs_1_1.value;
+                res = func(res);
+            }
+        }
+        catch (e_4_1) { e_4 = { error: e_4_1 }; }
+        finally {
+            try {
+                if (funcs_1_1 && !funcs_1_1.done && (_a = funcs_1["return"])) _a.call(funcs_1);
+            }
+            finally { if (e_4) throw e_4.error; }
+        }
+        return res;
+    };
+}
+function ensure(x) {
+    if (x === null || x === undefined) {
+        debugger;
+        throw new Error("Value must not be undefined or null");
+    }
+    else {
+        return x;
+    }
+}
+function isString(x) {
+    return typeof x === "string";
+}
+function groupBy(collection, keyFunc) {
+    var e_5, _a;
+    var result = {};
+    try {
+        for (var collection_1 = tslib.__values(collection), collection_1_1 = collection_1.next(); !collection_1_1.done; collection_1_1 = collection_1.next()) {
+            var obj = collection_1_1.value;
+            var key = keyFunc(obj);
+            if (key in result) {
+                result[key].push(obj);
+            }
+            else {
+                result[key] = [obj];
+            }
+        }
+    }
+    catch (e_5_1) { e_5 = { error: e_5_1 }; }
+    finally {
+        try {
+            if (collection_1_1 && !collection_1_1.done && (_a = collection_1["return"])) _a.call(collection_1);
+        }
+        finally { if (e_5) throw e_5.error; }
+    }
+    return result;
+}
+function mapValues(obj, mapper) {
+    var result = {};
+    for (var key in obj) {
+        result[key] = mapper(obj[key]);
+    }
+    return result;
+}
+
+var isBrowser = typeof window !== "undefined";
+var NONE = Symbol("NONE");
+var useIsomorphicLayoutEffect$1 = isBrowser
+    ? React__default['default'].useLayoutEffect
+    : React__default['default'].useEffect;
+function createElementWithChildren(elementType, props, children) {
+    if (Array.isArray(children)) {
+        return React__default['default'].createElement.apply(React__default['default'], tslib.__spreadArray([elementType,
+            props], tslib.__read(children), false));
+    }
+    else if (children || "children" in props) {
+        // Only call React.createElement with `children` if there are actual children,
+        // or if there was an explicit (albeit undefined) children passed via
+        // props.  Otherwise, if you pass `undefined` as the children argument
+        // to React.createElement, the created element will have prop {children: undefined}.
+        // If the `root` is an PlasmicGeneratedComponent, and these props with {children: undefined}
+        // are used, then it will be taken as a `children` override, and will thus blank out
+        // everything under the root node.
+        return React__default['default'].createElement(elementType, props, children);
+    }
+    else {
+        return React__default['default'].createElement(elementType, props);
+    }
+}
+function ensureNotArray(children) {
+    if (Array.isArray(children)) {
+        if (children.length === 1) {
+            return children[0];
+        }
+        else {
+            return React__default['default'].createElement.apply(React__default['default'], tslib.__spreadArray([React__default['default'].Fragment, {}], tslib.__read(children), false));
+        }
+    }
+    else {
+        return children;
+    }
+}
+/**
+ * Flattens ReactNode into an array of ReactChild, but does NOT replace
+ * missing keys with array index, as React.Children.toArray() does.
+ */
+function toChildArray(children) {
+    if (isReactChild(children)) {
+        return [children];
+    }
+    else if (Array.isArray(children)) {
+        return children.flatMap(toChildArray);
+    }
+    else {
+        return [];
+    }
+}
+function isReactText(child) {
+    return typeof child === "string" || typeof child === "number";
+}
+function isReactChild(child) {
+    return React__default['default'].isValidElement(child) || isReactText(child);
+}
+function isReactNode(x) {
+    return (typeof x === "string" || typeof x === "number" || React__default['default'].isValidElement(x));
+}
+function mergeProps(props) {
+    var e_1, _a, e_2, _b;
+    var restProps = [];
+    for (var _i = 1; _i < arguments.length; _i++) {
+        restProps[_i - 1] = arguments[_i];
+    }
+    if (restProps.every(function (rest) { return Object.keys(rest).length === 0; })) {
+        return props;
+    }
+    var result = tslib.__assign({}, props);
+    try {
+        for (var restProps_1 = tslib.__values(restProps), restProps_1_1 = restProps_1.next(); !restProps_1_1.done; restProps_1_1 = restProps_1.next()) {
+            var rest = restProps_1_1.value;
+            try {
+                for (var _c = (e_2 = void 0, tslib.__values(Object.keys(rest))), _d = _c.next(); !_d.done; _d = _c.next()) {
+                    var key = _d.value;
+                    result[key] = mergePropVals(key, result[key], rest[key]);
+                }
+            }
+            catch (e_2_1) { e_2 = { error: e_2_1 }; }
+            finally {
+                try {
+                    if (_d && !_d.done && (_b = _c["return"])) _b.call(_c);
+                }
+                finally { if (e_2) throw e_2.error; }
+            }
+        }
+    }
+    catch (e_1_1) { e_1 = { error: e_1_1 }; }
+    finally {
+        try {
+            if (restProps_1_1 && !restProps_1_1.done && (_a = restProps_1["return"])) _a.call(restProps_1);
+        }
+        finally { if (e_1) throw e_1.error; }
+    }
+    return result;
+}
+function updateRef(ref, value) {
+    if (!ref) {
+        return;
+    }
+    if (typeof ref === "function") {
+        ref(value);
+    }
+    else {
+        if (!Object.isFrozen(ref)) {
+            ref.current = value;
+        }
+    }
+}
+function mergeRefs() {
+    var refs = [];
+    for (var _i = 0; _i < arguments.length; _i++) {
+        refs[_i] = arguments[_i];
+    }
+    return function (value) {
+        var e_3, _a;
+        try {
+            for (var refs_1 = tslib.__values(refs), refs_1_1 = refs_1.next(); !refs_1_1.done; refs_1_1 = refs_1.next()) {
+                var ref = refs_1_1.value;
+                updateRef(ref, value);
+            }
+        }
+        catch (e_3_1) { e_3 = { error: e_3_1 }; }
+        finally {
+            try {
+                if (refs_1_1 && !refs_1_1.done && (_a = refs_1["return"])) _a.call(refs_1);
+            }
+            finally { if (e_3) throw e_3.error; }
+        }
+    };
+}
+function mergePropVals(name, val1, val2) {
+    if (val1 === NONE || val2 === NONE) {
+        // The NONE sentinel always skips all merging and returns null
+        return null;
+    }
+    else if (val1 == null) {
+        // If either of them is nil, prefer the other
+        return val2;
+    }
+    else if (val2 == null) {
+        return val1;
+    }
+    else if (name === "className") {
+        // Special case for className -- always combine both class names
+        return classNames__default['default'](val1, val2);
+    }
+    else if (name === "style") {
+        // Special case for style -- always shallow-merge style dicts
+        return tslib.__assign(tslib.__assign({}, val1), val2);
+    }
+    else if (name === "ref") {
+        // Special case for ref
+        return mergeRefs(val1, val2);
+    }
+    else if (typeof val1 !== typeof val2) {
+        // If the type of the two values are different, then no way to merge them.
+        // Prefer val2.
+        return val2;
+    }
+    else if (name.startsWith("on") && typeof val1 === "function") {
+        // Special case for event handlers -- always call both handlers
+        return function () {
+            var args = [];
+            for (var _i = 0; _i < arguments.length; _i++) {
+                args[_i] = arguments[_i];
+            }
+            var res;
+            if (typeof val1 === "function") {
+                res = val1.apply(void 0, tslib.__spreadArray([], tslib.__read(args), false));
+            }
+            if (typeof val2 === "function") {
+                res = val2.apply(void 0, tslib.__spreadArray([], tslib.__read(args), false));
+            }
+            return res;
+        };
+    }
+    else {
+        // For all else, prefer val2
+        return val2;
+    }
+}
+function getElementTypeName(element) {
+    var _a, _b, _c, _d;
+    if (typeof element.type === "string") {
+        return element.type;
+    }
+    else {
+        var comp = element.type;
+        return (_d = (_b = (_a = comp.displayName) !== null && _a !== void 0 ? _a : comp.name) !== null && _b !== void 0 ? _b : (_c = comp.render) === null || _c === void 0 ? void 0 : _c.name) !== null && _d !== void 0 ? _d : "Component";
+    }
+}
+
+function renderStack(as, props, hasGap, ref) {
+    var children = props.children, rest = tslib.__rest(props, ["children"]);
+    var wrappedChildren = wrapFlexContainerChildren(children, hasGap !== null && hasGap !== void 0 ? hasGap : false);
+    return createElementWithChildren(as, tslib.__assign({ ref: ref }, rest), wrappedChildren);
+}
+function FlexStack_(props, outerRef) {
+    var as = props.as, hasGap = props.hasGap, rest = tslib.__rest(props, ["as", "hasGap"]);
+    return renderStack(as !== null && as !== void 0 ? as : "div", rest, hasGap, outerRef);
+}
+var FlexStack = React__namespace.forwardRef(FlexStack_);
+var makeStackImpl = function (as) {
+    return React__namespace.forwardRef(function (props, ref) {
+        var hasGap = props.hasGap, rest = tslib.__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__namespace.createElement.apply(React__namespace, tslib.__spreadArray(["div", { className: className }], tslib.__read(children), false));
+    }
+    else {
+        return React__namespace.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, tslib.__spreadArray([defaultElement,
+        props], tslib.__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, tslib.__spreadArray([props,
+        children.length === 0
+            ? {}
+            : { children: children.length === 1 ? children[0] : children }], tslib.__read(triggerProps), false)), wrapFlexChild);
+}
+function makeFragment() {
+    var children = [];
+    for (var _i = 0; _i < arguments.length; _i++) {
+        children[_i] = arguments[_i];
+    }
+    return React__namespace.createElement.apply(React__namespace, tslib.__spreadArray([React__namespace.Fragment, {}], tslib.__read(children), false));
+}
+var UNSET = Symbol("UNSET");
+function mergeOverrideProps(defaults, overrides) {
+    var e_1, _a;
+    if (!overrides) {
+        return defaults;
+    }
+    var result = tslib.__assign({}, defaults);
+    try {
+        for (var _b = tslib.__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__namespace.isValidElement(element)
+        ? element.key || undefined
+        : undefined;
+    return React__namespace.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 tslib.__assign(tslib.__assign({}, x), { props: x.props || {}, type: "as" });
+        }
+        else if ("render" in x) {
+            return tslib.__assign(tslib.__assign({}, x), { type: "render" });
+        }
+        else if ("props" in x) {
+            return tslib.__assign(tslib.__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 tslib.__assign(tslib.__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 tslib.__assign(tslib.__assign({}, v1), v2);
+}
+function mergeVariantsWithStates(variants, $state, linkedStates) {
+    return tslib.__assign(tslib.__assign({}, variants), Object.fromEntries(linkedStates.map(function (_a) {
+        var variantGroup = _a.variantGroup, statePath = _a.statePath;
+        return [
+            variantGroup,
+            get__default['default']($state, statePath),
+        ];
+    })));
+}
+function mergeArgs(a1, a2) {
+    if (!a1 || !a2) {
+        return a1 || a2 || {};
+    }
+    return tslib.__assign(tslib.__assign({}, a1), a2);
+}
+function mergeFlexOverrides(o1, o2) {
+    var e_2, _a;
+    if (!o2) {
+        return o1;
+    }
+    var keys = Array.from(new Set(tslib.__spreadArray(tslib.__spreadArray([], tslib.__read(Object.keys(o1)), false), tslib.__read(Object.keys(o2)), false)));
+    var merged = {};
+    try {
+        for (var keys_1 = tslib.__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, tslib.__spreadArray([], tslib.__read([o1.wrap, o2.wrap].filter(notNil)), false));
+    var wrapChildren = chainSingleArgFuncs.apply(void 0, tslib.__spreadArray([], tslib.__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 tslib.__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, tslib.__spreadArray([pick.apply(void 0, tslib.__spreadArray([props], tslib.__read(internalVariantPropNames), false))], tslib.__read(reservedPropNames), false)), props.variants);
+    var args = mergeArgs(omit.apply(void 0, tslib.__spreadArray([pick.apply(void 0, tslib.__spreadArray([props], tslib.__read(internalArgPropNames), false))], tslib.__read(reservedPropNames), false)), props.args);
+    var overrides = mergeFlexOverrides(omit.apply(void 0, tslib.__spreadArray(tslib.__spreadArray(tslib.__spreadArray([pick.apply(void 0, tslib.__spreadArray([props], tslib.__read(descendantNames), false))], tslib.__read(internalArgPropNames), false), tslib.__read(internalVariantPropNames), false), tslib.__read(reservedPropNames), false)), props.overrides);
+    var leftoverProps = omit.apply(void 0, tslib.__spreadArray(tslib.__spreadArray(tslib.__spreadArray([props,
+        "variants",
+        "args",
+        "overrides"], tslib.__read(descendantNames), false), tslib.__read(internalVariantPropNames), false), tslib.__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 = tslib.__read(_a, 2); _b[0]; var value = _b[1];
+        return isDefaultValue(value);
+    })
+        .forEach(function (_a) {
+        var _b = tslib.__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 PlasmicHeadContext = React__namespace.createContext(undefined);
+function PlasmicHead(props) {
+    var Head = React__namespace.useContext(PlasmicHeadContext);
+    if (!Head) {
+        console.warn("Plasmic: Head meta tags are being ignored. To make them work, pass a Head component into PlasmicRootProvider.");
+        // TODO: Link to doc about Head.
+        return null;
+    }
+    // Helmet does not support React.Fragments, so we need to use `[<meta />,
+    // <meta />]` instead of `<><meta /><meta /></>`.
+    return (React__namespace.createElement(Head, null,
+        props.image ? ([
+            React__namespace.createElement("meta", { key: "twitter:card", name: "twitter:card", content: "summary_large_image" }),
+            React__namespace.createElement("meta", { key: "og:image", property: "og:image", content: props.image }),
+            React__namespace.createElement("meta", { key: "twitter:image", name: "twitter:image", content: props.image }),
+        ]) : (React__namespace.createElement("meta", { key: "twitter:card", name: "twitter:card", content: "summary" })),
+        props.title && [
+            React__namespace.createElement("title", { key: "title" }, props.title),
+            React__namespace.createElement("meta", { key: "og:title", property: "og:title", content: props.title }),
+            React__namespace.createElement("meta", { key: "twitter:title", property: "twitter:title", content: props.title }),
+        ],
+        props.description && [
+            React__namespace.createElement("meta", { key: "description", name: "description", content: props.description }),
+            React__namespace.createElement("meta", { key: "og:description", property: "og:description", content: props.description }),
+            React__namespace.createElement("meta", { key: "twitter:description", name: "twitter:description", content: props.description }),
+        ],
+        props.canonical && (React__namespace.createElement("link", { key: "canonical", ref: "canonical", href: props.canonical }))));
+}
+var plasmicHeadMeta = {
+    name: "hostless-plasmic-head",
+    displayName: "Head",
+    description: "Used to add page metadata to HTML <head />.",
+    importName: "PlasmicHead",
+    importPath: "@plasmicapp/react-web",
+    isRepeatable: false,
+    styleSections: false,
+    props: {
+        title: {
+            type: "string",
+            displayName: "Title"
+        },
+        description: {
+            type: "string",
+            displayName: "Description"
+        },
+        image: {
+            type: "imageUrl",
+            displayName: "Image"
+        },
+        canonical: {
+            type: "string",
+            displayName: "Canonical URL"
+        }
+    }
+};
+
+function PlasmicIcon(props) {
+    var PlasmicIconType = props.PlasmicIconType, rest = tslib.__rest(props, ["PlasmicIconType"]);
+    return React__namespace.createElement(PlasmicIconType, tslib.__assign({}, rest));
+}
+
+/**
+ * Responsive `<img/>` replacement, based on `next/image`
+ */
+// Default image sizes to snap to
+// TODO: make this configurable?
+var IMG_SIZES = [16, 32, 48, 64, 96, 128, 256, 384];
+var DEVICE_SIZES = [640, 750, 828, 1080, 1200, 1920, 2048, 3840];
+var ALL_SIZES = tslib.__spreadArray(tslib.__spreadArray([], tslib.__read(IMG_SIZES), false), tslib.__read(DEVICE_SIZES), false);
+var PlasmicImg = React__default['default'].forwardRef(function PlasmicImg(props, outerRef) {
+    var src = props.src, className = props.className, displayWidth = props.displayWidth, displayHeight = props.displayHeight, displayMinWidth = props.displayMinWidth, displayMinHeight = props.displayMinHeight, displayMaxWidth = props.displayMaxWidth, displayMaxHeight = props.displayMaxHeight, quality = props.quality, loader = props.loader, imgRef = props.imgRef, style = props.style, loading = props.loading, rest = tslib.__rest(props, ["src", "className", "displayWidth", "displayHeight", "displayMinWidth", "displayMinHeight", "displayMaxWidth", "displayMaxHeight", "quality", "loader", "imgRef", "style", "loading"]);
+    var imgProps = Object.assign({}, rest, {
+        // Default loading to "lazy" if not specified (which is different from the
+        // html img, which defaults to eager!)
+        loading: loading !== null && loading !== void 0 ? loading : "lazy"
+    });
+    var _a = typeof src === "string" || !src
+        ? { fullWidth: undefined, fullHeight: undefined, aspectRatio: undefined }
+        : src, fullWidth = _a.fullWidth, fullHeight = _a.fullHeight, aspectRatio = _a.aspectRatio;
+    var srcStr = src
+        ? typeof src === "string"
+            ? src
+            : typeof src.src === "string"
+                ? src.src
+                : src.src.src
+        : "";
+    // Assume external image if either dimension is null and use usual <img>
+    if (fullHeight == null || fullWidth == null) {
+        return (React__default['default'].createElement("img", tslib.__assign({ src: srcStr, className: className, style: style }, imgProps, { loading: loading, ref: mergeRefs(imgRef, outerRef) })));
+    }
+    if (isSvg(srcStr) &&
+        (displayHeight == null || displayHeight === "auto") &&
+        (displayWidth == null || displayWidth === "auto")) {
+        displayWidth = "100%";
+    }
+    var computedDisplayWidth = displayWidth;
+    if (fullWidth &&
+        fullHeight &&
+        (!displayWidth || displayWidth === "auto") &&
+        !!getPixelLength(displayHeight)) {
+        // If there's a pixel length specified for displayHeight but not displayWidth,
+        // then we can derive the pixel length for displayWidth.  Having an explicit
+        // displayWidth makes this a fixed-size image, which makes it possible for us to
+        // generate better markup!
+        if (!isSvg(srcStr)) {
+            // We shouldn't do it for SVGs though, because `fullWidth` and
+            // `fullHeight` might have rounded values so the final
+            // `displayWidth` could differ by 1px or so.
+            computedDisplayWidth =
+                (getPixelLength(displayHeight) * fullWidth) / fullHeight;
+        }
+    }
+    var spacerWidth = fullWidth;
+    var spacerHeight = fullHeight;
+    if (aspectRatio && isFinite(aspectRatio) && isSvg(srcStr)) {
+        // For SVGs, fullWidth and fullHeight can be rounded values, which would
+        // cause some discrepancy between the actual aspect ratio and the aspect
+        // ratio from those values. So, for those cases, we set large width / height
+        // values to get a more precise ratio from the spacer.
+        spacerWidth = DEFAULT_SVG_WIDTH;
+        spacerHeight = Math.round(spacerWidth / aspectRatio);
+    }
+    var _b = getWidths(computedDisplayWidth, fullWidth, {
+        minWidth: displayMinWidth
+    }), sizes = _b.sizes, widthDescs = _b.widthDescs;
+    var imageLoader = getImageLoader(loader);
+    var spacerSvg = "<svg width=\"".concat(spacerWidth, "\" height=\"").concat(spacerHeight, "\" xmlns=\"http://www.w3.org/2000/svg\" version=\"1.1\"/>");
+    var spacerSvgBase64 = typeof window === "undefined"
+        ? Buffer.from(spacerSvg).toString("base64")
+        : window.btoa(spacerSvg);
+    var wrapperStyle = tslib.__assign({}, (style || {}));
+    var spacerStyle = tslib.__assign({}, pick(style || {}, "objectFit", "objectPosition"));
+    if (displayWidth != null && displayWidth !== "auto") {
+        // If width is set, set it on the wrapper along with min/max width
+        // and just use `width: 100%` on the spacer
+        spacerStyle.width = "100%";
+        // Rely on the styles set by `classname` on the wrapper:
+        // wrapperStyle.width = displayWidth;
+        // wrapperStyle.minWidth = displayMinWidth;
+        // wrapperStyle.maxWidth = displayMaxWidth;
+    }
+    else {
+        // Otherwise, we want auto sizing from the spacer, so set width there.
+        //
+        // But if we have min/max width, it should be set in the wrapper and it
+        // can be percentage values (and we add corresponding min/max width to
+        // 100% in the spacer). In general it ends up with the correct effect,
+        // but some edge cases might make `min-width: 100%` shrink the image more
+        // than it should.
+        spacerStyle.width = displayWidth;
+        wrapperStyle.width = "auto";
+        if (displayMinWidth) {
+            spacerStyle.minWidth = "100%";
+            // Rely on min-width set by `classname` on the wrapper:
+            // wrapperStyle.minWidth = displayMinWidth;
+        }
+        if (displayMaxWidth != null && displayMaxWidth !== "none") {
+            spacerStyle.maxWidth = "100%";
+            // Rely on max-width set by `classname` on the wrapper:
+            // wrapperStyle.maxWidth = displayMaxWidth;
+        }
+    }
+    if (displayHeight != null && displayHeight !== "auto") {
+        spacerStyle.height = "100%";
+        // wrapperStyle.height = displayHeight;
+        // wrapperStyle.minHeight = displayMinHeight;
+        // wrapperStyle.maxHeight = displayMaxHeight;
+    }
+    else {
+        spacerStyle.height = displayHeight;
+        wrapperStyle.height = "auto";
+        if (displayMinHeight) {
+            spacerStyle.minHeight = "100%";
+            // wrapperStyle.minHeight = displayMinHeight;
+        }
+        if (displayMaxHeight != null && displayMaxHeight !== "none") {
+            spacerStyle.maxHeight = "100%";
+            // wrapperStyle.maxHeight = displayMaxHeight;
+        }
+    }
+    return (React__default['default'].createElement("div", { className: classNames__default['default'](className, "__wab_img-wrapper"), ref: outerRef, style: wrapperStyle },
+        React__default['default'].createElement("img", { alt: "", "aria-hidden": true, className: "__wab_img-spacer-svg", src: "data:image/svg+xml;base64,".concat(spacerSvgBase64), style: spacerStyle }),
+        makePicture({
+            imageLoader: imageLoader,
+            widthDescs: widthDescs,
+            sizes: sizes,
+            src: srcStr,
+            quality: quality,
+            ref: imgRef,
+            style: style ? pick(style, "objectFit", "objectPosition") : undefined,
+            imgProps: imgProps,
+            className: "__wab_img"
+        })));
+});
+function makePicture(opts) {
+    // If imageLoader is undefined, then this renders to just a normal
+    // <img />.  Else it will render to a <picture> with a <source> for
+    // webp, and srcSet/sizes set according to width requirements.
+    var imageLoader = opts.imageLoader, widthDescs = opts.widthDescs, src = opts.src, quality = opts.quality, style = opts.style, className = opts.className, sizes = opts.sizes, imgProps = opts.imgProps, ref = opts.ref;
+    return (React__default['default'].createElement("picture", { className: "__wab_picture" },
+        imageLoader && imageLoader.supportsUrl(src) && (React__default['default'].createElement("source", { type: "image/webp", srcSet: widthDescs
+                .map(function (wd) {
+                return "".concat(imageLoader.transformUrl({
+                    src: src,
+                    quality: quality,
+                    width: wd.width,
+                    format: "webp"
+                }), " ").concat(wd.desc);
+            })
+                .join(", ") })),
+        React__default['default'].createElement("img", tslib.__assign({}, imgProps, { ref: ref, className: className, decoding: "async", src: imageLoader && imageLoader.supportsUrl(src)
+                ? imageLoader.transformUrl({
+                    src: src,
+                    quality: quality,
+                    width: widthDescs[widthDescs.length - 1].width
+                })
+                : src, srcSet: imageLoader && imageLoader.supportsUrl(src)
+                ? widthDescs
+                    .map(function (wd) {
+                    return "".concat(imageLoader.transformUrl({
+                        src: src,
+                        quality: quality,
+                        width: wd.width
+                    }), " ").concat(wd.desc);
+                })
+                    .join(", ")
+                : undefined, sizes: imageLoader && imageLoader.supportsUrl(src) ? sizes : undefined, style: tslib.__assign(tslib.__assign({}, (style ? pick(style, "objectFit", "objectPosition") : {})), { width: 0, height: 0 }) }))));
+}
+var DEFAULT_SVG_WIDTH = 10000;
+function isSvg(src) {
+    return src.endsWith(".svg") || src.startsWith("data:image/svg");
+}
+function getClosestPresetSize(width, fullWidth) {
+    var _a;
+    var nextBiggerIndex = (_a = ALL_SIZES.findIndex(function (w) { return w >= width; })) !== null && _a !== void 0 ? _a : ALL_SIZES.length - 1;
+    var nextBigger = ALL_SIZES[nextBiggerIndex];
+    if (nextBigger >= fullWidth) {
+        // If the requested width is larger than the fullWidth,
+        // we just use the original width instead. It's impossible
+        // to make an image bigger than fullWidth!
+        return undefined;
+    }
+    else if (nextBiggerIndex + 1 < ALL_SIZES.length &&
+        fullWidth <= ALL_SIZES[nextBiggerIndex + 1]) {
+        // If the fullWidth is just between nextBigger and the one after that,
+        // then also might as well just use the original size (so, width is 30,
+        // nextBigger is 32, then we just use the original as long as fullWidth is
+        // less than 48)
+        return undefined;
+    }
+    return nextBigger;
+}
+/**
+ * Computes the appropriate srcSet and sizes to use
+ */
+function getWidths(width, fullWidth, extra) {
+    var minWidth = extra === null || extra === void 0 ? void 0 : extra.minWidth;
+    var pixelWidth = getPixelLength(width);
+    var pixelMinWidth = getPixelLength(minWidth);
+    if (pixelWidth != null && (!minWidth || pixelMinWidth != null)) {
+        // If there's an exact width, then we just need to display it at 1x and 2x density
+        return {
+            widthDescs: [
+                {
+                    width: getClosestPresetSize(Math.max(pixelWidth, pixelMinWidth !== null && pixelMinWidth !== void 0 ? pixelMinWidth : 0), fullWidth),
+                    desc: "1x"
+                },
+                {
+                    width: getClosestPresetSize(Math.max(pixelWidth, pixelMinWidth !== null && pixelMinWidth !== void 0 ? pixelMinWidth : 0) * 2, fullWidth),
+                    desc: "2x"
+                },
+            ],
+            sizes: undefined
+        };
+    }
+    // Otherwise we don't know what sizes we'll end up, so we just cap it at
+    // device width.  TODO: do better!
+    var usefulSizes = DEVICE_SIZES.filter(function (size) { return !fullWidth || size < fullWidth; });
+    if (!!fullWidth && usefulSizes.length === 0) {
+        // image fullWidth is smaller than all device sizes.  So all we can do
+        // is offer 1x
+        return {
+            widthDescs: [
+                {
+                    width: getClosestPresetSize(fullWidth, fullWidth),
+                    desc: "1x"
+                },
+            ],
+            sizes: undefined
+        };
+    }
+    return {
+        widthDescs: usefulSizes.map(function (size) { return ({
+            width: getClosestPresetSize(size, fullWidth),
+            // If this is the last (buggest) useful width, but it is
+            // still within the bounds set by DEVICE_SIZES, then just
+            // use the original, unresized image.  This means if we match
+            // the largest size, we use unresized and best quality image.
+            // We only do this, though, if fullWidth is "reasonable" --
+            // smaller than the largest size we would consider.
+            // i === usefulSizes.length - 1 &&
+            // fullWidth < DEVICE_SIZES[DEVICE_SIZES.length - 1]
+            //   ? undefined
+            //   : size,
+            desc: "".concat(size, "w")
+        }); }),
+        sizes: "100vw"
+    };
+}
+function getPixelLength(length) {
+    if (length == null || length == "") {
+        return undefined;
+    }
+    if (typeof length === "number") {
+        return length;
+    }
+    var parsed = parseNumeric(length);
+    if (parsed && (!parsed.units || parsed.units === "px")) {
+        return parsed.num;
+    }
+    return undefined;
+}
+function parseNumeric(val) {
+    // Parse strings like "30", "30px", "30%", "30px /* blah blah */"
+    var res = val.match(/^\s*(-?(?:\d+\.\d*|\d*\.\d+|\d+))\s*([a-z]*|%)\s*(?:\/\*.*)?$/i);
+    if (res == null) {
+        return undefined;
+    }
+    var num = res[1];
+    var units = res[2];
+    return { num: +num, units: units };
+}
+function getImageLoader(loader) {
+    if (loader == null) {
+        return undefined;
+    }
+    else if (loader === "plasmic") {
+        return PLASMIC_IMAGE_LOADER;
+    }
+    else {
+        return loader;
+    }
+}
+var PLASMIC_IMAGE_LOADER = {
+    supportsUrl: function (src) {
+        return src.startsWith("https://img.plasmic.app") && !isSvg(src);
+    },
+    transformUrl: function (opts) {
+        var _a;
+        var params = [
+            opts.width ? "w=".concat(opts.width) : undefined,
+            "q=".concat((_a = opts.quality) !== null && _a !== void 0 ? _a : 75),
+            opts.format ? "f=".concat(opts.format) : undefined,
+        ].filter(function (x) { return !!x; });
+        return "".concat(opts.src, "?").concat(params.join("&"));
+    }
+};
+
+var PlasmicLink = React__default['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['default'].createElement(props.component, tslib.__assign(tslib.__assign({}, pick.apply(void 0, tslib.__spreadArray([props], tslib.__read(nextjsProps), false))), { legacyBehavior: true }), React__default['default'].createElement("a", tslib.__assign({}, omit.apply(void 0, tslib.__spreadArray([props, "component", "platform"], tslib.__read(nextjsProps), false)), { ref: ref })));
+    }
+    if (props.platform === "gatsby" && isInternalHref(props.href)) {
+        return React__default['default'].createElement(props.component, tslib.__assign(tslib.__assign({}, omit(props, "component", "platform", "href")), { to: props.href, ref: ref }));
+    }
+    return React__default['default'].createElement("a", tslib.__assign({}, omit(props, "component", "platform"), { ref: ref }));
+});
+function isInternalHref(href) {
+    return /^\/(?!\/)/.test(href);
+}
+
+var PlasmicTranslatorContext = React__default['default'].createContext(undefined);
+function isIterable(val) {
+    return val != null && typeof val[Symbol.iterator] === "function";
+}
+function genTranslatableString(elt) {
+    var components = {};
+    var componentsCount = 0;
+    var getText = function (node) {
+        if (!node) {
+            return "";
+        }
+        if (typeof node === "number" ||
+            typeof node === "boolean" ||
+            typeof node === "string") {
+            return node.toString();
+        }
+        if (typeof node !== "object") {
+            return "";
+        }
+        if (Array.isArray(node) || isIterable(node)) {
+            return Array.from(node)
+                .map(function (child) { return getText(child); })
+                .filter(function (child) { return !!child; })
+                .join("");
+        }
+        var nodeChildren = (hasKey(node, "props") &&
+            hasKey(node.props, "children") &&
+            node.props.children) ||
+            (hasKey(node, "children") && node.children) ||
+            [];
+        var contents = "".concat(React__default['default'].Children.toArray(nodeChildren)
+            .map(function (child) { return getText(child); })
+            .filter(function (child) { return !!child; })
+            .join(""));
+        if (React__default['default'].isValidElement(node) && node.type === React__default['default'].Fragment) {
+            return contents;
+        }
+        var componentId = componentsCount + 1;
+        componentsCount++;
+        components[componentId] = React__default['default'].isValidElement(node)
+            ? React__default['default'].cloneElement(node, {
+                key: componentId,
+                children: undefined
+            })
+            : node;
+        return "<".concat(componentId, ">").concat(contents, "</").concat(componentId, ">");
+    };
+    var str = getText(elt);
+    return {
+        str: str,
+        components: components,
+        componentsCount: componentsCount
+    };
+}
+function Trans(_a) {
+    var transKey = _a.transKey, children = _a.children;
+    var _t = React__default['default'].useContext(PlasmicTranslatorContext);
+    if (!_t) {
+        warnNoTranslationFunctionAtMostOnce();
+        return children;
+    }
+    var _b = genTranslatableString(children), str = _b.str, components = _b.components, componentsCount = _b.componentsCount;
+    return _t(transKey !== null && transKey !== void 0 ? transKey : str, componentsCount > 0 ? { components: components } : undefined);
+}
+var hasWarned = false;
+function warnNoTranslationFunctionAtMostOnce() {
+    if (!hasWarned) {
+        console.warn("Using Plasmic Translation but no translation function has been provided");
+        hasWarned = true;
+    }
+}
+function hasKey(v, key) {
+    return typeof v === "object" && v !== null && key in v;
+}
+
+function PlasmicSlot(props) {
+    return renderPlasmicSlot(props);
+}
+function renderPlasmicSlot(opts) {
+    var as = opts.as, defaultContents = opts.defaultContents, value = opts.value, rest = tslib.__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__namespace.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__namespace.createElement(React__namespace.Fragment, null, content);
+    }
+    return React__namespace.createElement(as || "span", mergeProps({ className: "__wab_slot" }, rest), content);
+}
+function maybeAsString(node) {
+    // Unwrap fragments
+    if (React__namespace.isValidElement(node)) {
+        // Fragment doesn't render DOM elements
+        if (node.type === React__namespace.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 = tslib.__read(_a, 2), query = _b[1];
+        return window.matchMedia(query).matches;
+    })
+        .map(function (_a) {
+        var _b = tslib.__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['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 = tslib.__read(React__namespace.useState(), 2), updateState = _a[1];
+        var lastScreenVariantsRef = React__namespace.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 PlasmicRootContext = React__namespace.createContext(undefined);
+function PlasmicRootProvider(props) {
+    var platform = props.platform, children = props.children, userAuthToken = props.userAuthToken, isUserLoading = props.isUserLoading, authRedirectUri = props.authRedirectUri, user = props.user;
+    var context = React__namespace.useMemo(function () { return ({
+        platform: platform
+    }); }, [platform]);
+    var dataSourceContextValue = React__namespace.useMemo(function () { return ({
+        userAuthToken: userAuthToken,
+        user: user,
+        isUserLoading: isUserLoading,
+        authRedirectUri: authRedirectUri
+    }); }, [userAuthToken, isUserLoading, user, authRedirectUri]);
+    return (React__namespace.createElement(PlasmicRootContext.Provider, { value: context },
+        React__namespace.createElement(ssr.SSRProvider, null,
+            React__namespace.createElement(dataSourcesContext.PlasmicDataSourceContextProvider, { value: dataSourceContextValue },
+                React__namespace.createElement(PlasmicTranslatorContext.Provider, { value: props.translator },
+                    React__namespace.createElement(PlasmicHeadContext.Provider, { value: props.Head }, children))))));
+}
+var useIsSSR = ssr.useIsSSR;
+function useHasPlasmicRoot() {
+    return !!React__namespace.useContext(PlasmicRootContext);
+}
+var hasWarnedSSR = false;
+/**
+ * Warns the user if PlasmicRootProvider is not used
+ */
+function useEnsureSSRProvider() {
+    var hasRoot = useHasPlasmicRoot();
+    if (hasRoot || hasWarnedSSR || process.env.NODE_ENV !== "development") {
+        return;
+    }
+    hasWarnedSSR = true;
+    console.warn("Plasmic: To ensure your components work correctly with server-side rendering, please use PlasmicRootProvider at the root of your application.  See https://docs.plasmic.app/learn/ssr");
+}
+
+function useFocused(opts) {
+    var _a = focus.useFocusRing({
+        within: false,
+        isTextInput: opts.isTextInput
+    }), isFocused = _a.isFocused, focusProps = _a.focusProps;
+    return [isFocused, focusProps];
+}
+function useFocusVisible(opts) {
+    var _a = focus.useFocusRing({
+        within: false,
+        isTextInput: opts.isTextInput
+    }), isFocusVisible = _a.isFocusVisible, focusProps = _a.focusProps;
+    return [isFocusVisible, focusProps];
+}
+function useFocusedWithin(opts) {
+    var _a = focus.useFocusRing({
+        within: true,
+        isTextInput: opts.isTextInput
+    }), isFocused = _a.isFocused, focusProps = _a.focusProps;
+    return [isFocused, focusProps];
+}
+function useFocusVisibleWithin(opts) {
+    var _a = focus.useFocusRing({
+        within: true,
+        isTextInput: opts.isTextInput
+    }), isFocusVisible = _a.isFocusVisible, focusProps = _a.focusProps;
+    return [isFocusVisible, focusProps];
+}
+function useHover() {
+    var _a = tslib.__read(React__namespace.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 = tslib.__read(React__namespace.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 UNINITIALIZED = Symbol("plasmic.unitialized");
+
+/** @class */ ((function (_super) {
+    tslib.__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) {
+    tslib.__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) {
+    tslib.__extends(InvalidOperation, _super);
+    function InvalidOperation(msg) {
+        return _super.call(this, msg) || this;
+    }
+    return InvalidOperation;
+}(Error));
+var UnknownError = /** @class */ (function (_super) {
+    tslib.__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("[]")
+            ? tslib.__spreadArray(tslib.__spreadArray([], tslib.__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 (tslib.__assign(tslib.__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(tslib.__spreadArray(tslib.__spreadArray([], tslib.__read(currentPath), false), [nextKey], false)));
+                }
+            }
+        });
+        return node;
+    };
+    return rec([]);
+}
+function updateTree(root, specs) {
+    var internalSpec = specs.map(function (spec) {
+        return (tslib.__assign(tslib.__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), tslib.__spreadArray(tslib.__spreadArray([], tslib.__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 = tslib.__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 = tslib.__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__default['default']($state, path.slice(0, -1));
+    get__default['default'](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__default['default']($$state.stateValues, statePath);
+    if (valtio.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__default['default']($$state.stateValues, statePath);
+    if (valtio.getVersion(maybeValtioProxy) && spec.onChangeProp) {
+        var unsub = valtio.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__default['default']($$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__default['default'](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, tslib.__assign({ $state: $state }, ((_a = initialStateCell.overrideEnv) !== null && _a !== void 0 ? _a : $$state.env)));
+            set(proxyRoot, initialStateCell.path, newValue);
+        });
+    });
+    var initialValue = invokeInitFuncBackwardsCompatible(initialStateCell.initFunc, tslib.__assign({ $state: $state }, ((_a = initialStateCell.overrideEnv) !== null && _a !== void 0 ? _a : $$state.env)));
+    initialStateCell.initialValue = clone__default['default'](initialValue);
+    var initialSpec = initialStateCell.node.getSpec();
+    var value = initialSpec.isImmutable
+        ? mkUntrackedValue(initialValue)
+        : clone__default['default'](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 tslib.__spreadArray(tslib.__spreadArray([], tslib.__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__default['default']($$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__default['default'](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" ? valtio.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, tslib.__spreadArray([], tslib.__read(rest), false)), env = _a.env, opts = _a.opts;
+    var $$state = React__default['default'].useRef((function () {
+        var rootSpecTree = buildTree(specs);
+        return {
+            rootSpecTree: rootSpecTree,
+            specTreeLeaves: getSpecTreeLeaves(rootSpecTree),
+            stateValues: valtio.proxy({}),
+            env: envFieldsAreNonNill(env),
+            specs: [],
+            registrationsQueue: valtio.proxy([]),
+            stateInitializationEnv: { stack: [], visited: new Set() }
+        };
+    })()).current;
+    $$state.env = envFieldsAreNonNill(env);
+    $$state.specs = specs;
+    var create$State = React__default['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__default['default']($$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__default['default'](stateCell.initialValue, f(tslib.__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['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__default['default'](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, tslib.__assign({ $state: $state }, ((_a = stateCell.overrideEnv) !== null && _a !== void 0 ? _a : envFieldsAreNonNill(env))));
+            if (!deepEqual__default['default'](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
+    valtio.useSnapshot($$state.stateValues, { sync: true });
+    valtio.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 = tslib.__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 = tslib.__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__default['default']($state, path);
+}
+var useIsomorphicLayoutEffect = typeof window !== "undefined" ? React.useLayoutEffect : React.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] || valtio.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 = tslib.__values(root.edges().entries()), _d = _c.next(); !_d.done; _d = _c.next()) {
+                var _e = tslib.__read(_d.value, 2), key = _e[0], child = _e[1];
+                if (typeof key === "string" && key in $state) {
+                    stateCells.push.apply(stateCells, tslib.__spreadArray([], tslib.__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__default['default'](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
+var classNames = classNames__default['default'];
+
+var PLUME_STRICT_MODE = true;
+function setPlumeStrictMode(mode) {
+    PLUME_STRICT_MODE = mode;
+}
+function mergeVariantToggles() {
+    var toggles = [];
+    for (var _i = 0; _i < arguments.length; _i++) {
+        toggles[_i] = arguments[_i];
+    }
+    var definedToggles = toggles.filter(function (x) { return !!x.def; });
+    var grouped = groupBy(definedToggles, function (_a) {
+        var def = _a.def;
+        return def.group;
+    });
+    return mapValues(grouped, function (subToggles) {
+        return Object.fromEntries(subToggles.map(function (_a) {
+            var def = _a.def, active = _a.active;
+            return [def.variant, !!active];
+        }));
+    });
+}
+function noOutline() {
+    return { outline: "none" };
+}
+function getPlumeType(child) {
+    var _a;
+    if (!React__namespace.isValidElement(child)) {
+        return undefined;
+    }
+    var childType = child.type;
+    return (childType.__plumeType || ((_a = childType.getPlumeType) === null || _a === void 0 ? void 0 : _a.call(childType, child.props)));
+}
+
+function useButton(plasmicClass, props, config, ref) {
+    var _a, _b, _c, _d;
+    if (ref === void 0) { ref = null; }
+    var link = props.link, isDisabled = props.isDisabled, startIcon = props.startIcon, endIcon = props.endIcon, showStartIcon = props.showStartIcon, showEndIcon = props.showEndIcon, children = props.children, rest = tslib.__rest(props, ["link", "isDisabled", "startIcon", "endIcon", "showStartIcon", "showEndIcon", "children"]);
+    var variants = tslib.__assign(tslib.__assign({}, pick.apply(void 0, tslib.__spreadArray([props], tslib.__read(plasmicClass.internalVariantProps), false))), mergeVariantToggles({ def: config.showStartIconVariant, active: showStartIcon }, { def: config.showEndIconVariant, active: showEndIcon }, { def: config.isDisabledVariant, active: isDisabled }));
+    var args = tslib.__assign(tslib.__assign(tslib.__assign(tslib.__assign({}, pick.apply(void 0, tslib.__spreadArray([props], tslib.__read(plasmicClass.internalArgProps), false))), (config.startIconSlot && (_a = {}, _a[config.startIconSlot] = startIcon, _a))), (config.endIconSlot && (_b = {}, _b[config.endIconSlot] = endIcon, _b))), (_c = {}, _c[config.contentSlot] = children, _c));
+    var overrides = (_d = {},
+        _d[config.root] = {
+            as: !!link ? "a" : "button",
+            props: tslib.__assign(tslib.__assign(tslib.__assign({}, omit.apply(void 0, tslib.__spreadArray(tslib.__spreadArray([rest], tslib.__read(plasmicClass.internalArgProps), false), tslib.__read(plasmicClass.internalVariantProps), false))), { ref: ref, disabled: isDisabled }), (!!link && { href: link }))
+        },
+        _d);
+    return {
+        plasmicProps: {
+            variants: variants,
+            args: args,
+            overrides: overrides
+        }
+    };
+}
+
+function getStyleProps(props) {
+    return pick(props, "className", "style");
+}
+function getDefaultPlasmicProps(plasmicClass, props) {
+    return {
+        plasmicProps: {
+            variants: pick.apply(void 0, tslib.__spreadArray([props], tslib.__read(plasmicClass.internalVariantProps), false)),
+            args: pick.apply(void 0, tslib.__spreadArray([props], tslib.__read(plasmicClass.internalArgProps), false)),
+            overrides: {}
+        }
+    };
+}
+var RE_DATA_PROP = /^(data-.*)$/;
+function getDataProps(props) {
+    return pickBy(props, function (k) { return RE_DATA_PROP.test(k); });
+}
+
+function asAriaCheckboxProps(props) {
+    var ariaProps = tslib.__assign(tslib.__assign({}, props), { isSelected: props.isChecked, defaultSelected: props.defaultChecked });
+    delete ariaProps["isChecked"];
+    delete ariaProps["defaultChecked"];
+    return ariaProps;
+}
+function useCheckbox(plasmicClass, props, config, ref) {
+    var _a, _b;
+    if (ref === void 0) { ref = null; }
+    var children = props.children, isDisabled = props.isDisabled, isIndeterminate = props.isIndeterminate;
+    useEnsureSSRProvider();
+    var inputRef = React__namespace.useRef(null);
+    var rootRef = React__namespace.useRef(null);
+    var ariaProps = asAriaCheckboxProps(props);
+    var state = toggle.useToggleState(ariaProps);
+    var inputProps = checkbox.useCheckbox(ariaProps, state, inputRef).inputProps;
+    var variants = tslib.__assign(tslib.__assign({}, pick.apply(void 0, tslib.__spreadArray([props], tslib.__read(plasmicClass.internalVariantProps), false))), mergeVariantToggles({
+        def: config.isDisabledVariant,
+        active: isDisabled
+    }, {
+        def: config.isCheckedVariant,
+        active: state.isSelected
+    }, {
+        def: config.isIndeterminateVariant,
+        active: isIndeterminate
+    }, {
+        def: config.noLabelVariant,
+        active: !children
+    }));
+    var overrides = (_a = {},
+        _a[config.root] = {
+            as: "label",
+            props: mergeProps(getStyleProps(props), {
+                ref: rootRef
+            }),
+            wrapChildren: function (children) { return (React__namespace.createElement(React__namespace.Fragment, null,
+                React__namespace.createElement(visuallyHidden.VisuallyHidden, null,
+                    React__namespace.createElement("input", tslib.__assign({}, inputProps, { ref: inputRef }))),
+                children)); }
+        },
+        _a);
+    var args = tslib.__assign(tslib.__assign({}, pick.apply(void 0, tslib.__spreadArray([props], tslib.__read(plasmicClass.internalArgProps), false))), (config.labelSlot ? (_b = {}, _b[config.labelSlot] = children, _b) : {}));
+    var plumeState = React__namespace.useMemo(function () { return ({
+        setChecked: function (checked) { return state.setSelected(checked); }
+    }); }, [state]);
+    React__namespace.useImperativeHandle(ref, function () { return ({
+        getRoot: function () { return rootRef.current; },
+        focus: function () { var _a; return (_a = inputRef.current) === null || _a === void 0 ? void 0 : _a.focus(); },
+        blur: function () { var _a; return (_a = inputRef.current) === null || _a === void 0 ? void 0 : _a.blur(); },
+        setChecked: function (checked) { return plumeState.setChecked(checked); }
+    }); }, [rootRef, inputRef, plumeState]);
+    return {
+        plasmicProps: {
+            variants: variants,
+            overrides: overrides,
+            args: args
+        },
+        state: plumeState
+    };
+}
+
+/**
+ * In general, we try not to expose react-aria's Collections API to Plume users.
+ * The Collections API is how react-aria users pass data about collections of
+ * things using the built-in Item and Section components, which are abstract,
+ * metadata-only components that don't render anything but only serve to specify
+ * data.  For example, here's how you would use react-spectrum's Picker:
+ *
+ *   <Picker>
+ *     <Section title="Asia">
+ *       <Item key="taiwan">Taiwan</Item>
+ *       <Item key="japan">Japan</Item>
+ *       <Item key="china">China</Item>
+ *     </Section>
+ *     <Section title="Europe">
+ *       <Item key="germany">Germany</Item>
+ *       <Item key="france">France</Item>
+ *     </Section>
+ *   </Picker>
+ *
+ * You would re-use this same Item/Section components to pass similar things to
+ * Menu, Tabs, etc.
+ *
+ * For Plasmic, this API is too abstract.  The user has explicitly designed components
+ * like Select.Option and Select.OptionGroup, and it is weird that they don't actually
+ * use these components. It is more natural to do:
+ *
+ *   <Select>
+ *     <Select.OptionGroup title="Asia">
+ *       <Select.Option key="taiwan">Taiwan</Select>
+ *     </Select.OptionGroup>
+ *   </Select>
+ *
+ * For Plume, we let users directly use the components they designed, both to collect
+ * information and to perform actual rendering.  For example, for Plume,
+ * you'd use Select.Option instead of Item, and Select.OptionGroup instead of Section.
+ * This means that the Select.Option props will collect the same information Item
+ * does.
+ *
+ * A component like Select.Option then serves two purposes:
+ *
+ * 1. Allow users to specify the collection of data, like in the above example
+ *    Here, we're mainly interested in the props in those ReactElements so
+ *    we can pass the Item/Section data onto react-aria's APIs.  We are not
+ *    actually rendering these elements.
+ * 2. Once react-aria's Collections API has gone through them and built
+ *    Collection "nodes", we then create cloned versions of these elements
+ *    with the corresponding node passed in as a secret prop.  These ReactElements
+ *    are then actually used to _render_ the corresponding Option / OptionGroup.
+ *
+ * This file contains helper functions to help with implementing the above.
+ *
+ * Note also that most of the collections-based react-aria components expose
+ * a parallel API that accepts a list of "items" and a render prop, instead
+ * of list of Item/Section elements.  This is for efficiency, but we are opting
+ * to only support the composite-component pattern for now for simplicity.
+ */
+function deriveItemsFromProps(props, opts) {
+    if (opts.itemsProp && opts.itemsProp in props) {
+        if (!opts.ItemComponent || !opts.SectionComponent) {
+            throw new Error("You may need to re-generate your Plasmic* files");
+        }
+        var items = props[opts.itemsProp];
+        return deriveItemsFromItemsProp(items, {
+            ItemComponent: opts.ItemComponent,
+            SectionComponent: opts.SectionComponent
+        });
+    }
+    else {
+        return deriveItemsFromChildren(props.children, opts);
+    }
+}
+function deriveItemsFromItemsProp(items, opts) {
+    var _a;
+    var ItemComponent = opts.ItemComponent, SectionComponent = opts.SectionComponent;
+    var disabledKeys = [];
+    var transform = function (item) {
+        var _a;
+        if (typeof item === "string") {
+            return (React__default['default'].createElement(ItemComponent, { key: item, value: item }, item));
+        }
+        else if ("children" in item) {
+            return (React__default['default'].createElement(SectionComponent, { key: item.title, title: item.title }, item.children.map(function (x) { return transform(x); })));
+        }
+        else {
+            if (item.isDisabled) {
+                disabledKeys.push(item.value);
+            }
+            return (React__default['default'].createElement(ItemComponent, { key: item.value, value: item.value, textValue: item.textValue, isDisabled: item.isDisabled }, (_a = item.label) !== null && _a !== void 0 ? _a : item.value));
+        }
+    };
+    return {
+        items: (_a = items === null || items === void 0 ? void 0 : items.map(function (x) { return transform(x); })) !== null && _a !== void 0 ? _a : [],
+        disabledKeys: disabledKeys
+    };
+}
+/**
+ * Given children of a component like Select or Menu, derive the items
+ * that we will pass into the Collections API.  These will be
+ * ReactElement<ItemLikeProps|SectionLikeProps>[].
+ *
+ * Will also assign keys to items by their index in the collection,
+ * and collect the keys of disabled items.
+ */
+function deriveItemsFromChildren(children, opts) {
+    if (!children) {
+        return {
+            items: [],
+            disabledKeys: []
+        };
+    }
+    var itemPlumeType = opts.itemPlumeType, sectionPlumeType = opts.sectionPlumeType, invalidChildError = opts.invalidChildError;
+    // For Plume items without an explicit key, we assign a key as the index
+    // of the collection.
+    var itemCount = 0;
+    var sectionCount = 0;
+    var ensureValue = function (element) {
+        if (!propInChild(element, "value")) {
+            if (opts.requireItemValue && PLUME_STRICT_MODE) {
+                throw new Error("Must specify a \"value\" prop for ".concat(getElementTypeName(element)));
+            }
+            else {
+                return cloneChild(element, { value: "".concat(itemCount++) });
+            }
+        }
+        else {
+            // Still increment count even if key is present, so that the
+            // auto-assigned key really reflects the index
+            itemCount++;
+            return element;
+        }
+    };
+    var disabledKeys = [];
+    var flattenedChildren = function (children) {
+        return toChildArray(children).flatMap(function (child) {
+            var _a;
+            if (React__default['default'].isValidElement(child)) {
+                if (child.type === React__default['default'].Fragment) {
+                    return flattenedChildren(child.props
+                        .children);
+                }
+                var type = getPlumeType(child);
+                if (type === itemPlumeType) {
+                    child = ensureValue(child);
+                    var childKey = getItemLikeKey(child);
+                    if (getChildProp(child, "isDisabled") && !!childKey) {
+                        disabledKeys.push(childKey);
+                    }
+                    return [child];
+                }
+                if (type === sectionPlumeType) {
+                    return [
+                        cloneChild(child, {
+                            // key of section doesn't actually matter, just needs
+                            // to be unique
+                            key: (_a = child.key) !== null && _a !== void 0 ? _a : "section-".concat(sectionCount++),
+                            children: flattenedChildren(getChildProp(child, "children"))
+                        }),
+                    ];
+                }
+            }
+            if (PLUME_STRICT_MODE) {
+                throw new Error(invalidChildError !== null && invalidChildError !== void 0 ? invalidChildError : "Unexpected child");
+            }
+            else {
+                return [];
+            }
+        });
+    };
+    return { items: flattenedChildren(children), disabledKeys: disabledKeys };
+}
+function useDerivedItems(props, opts) {
+    var children = props.children;
+    var itemPlumeType = opts.itemPlumeType, sectionPlumeType = opts.sectionPlumeType, invalidChildError = opts.invalidChildError, requireItemValue = opts.requireItemValue, ItemComponent = opts.ItemComponent, SectionComponent = opts.SectionComponent, itemsProp = opts.itemsProp;
+    var items = itemsProp ? props[itemsProp] : undefined;
+    return React__default['default'].useMemo(function () {
+        return deriveItemsFromProps(props, {
+            itemPlumeType: itemPlumeType,
+            sectionPlumeType: sectionPlumeType,
+            invalidChildError: invalidChildError,
+            requireItemValue: requireItemValue,
+            itemsProp: itemsProp,
+            ItemComponent: ItemComponent,
+            SectionComponent: SectionComponent
+        });
+    }, [
+        children,
+        items,
+        itemPlumeType,
+        sectionPlumeType,
+        invalidChildError,
+        requireItemValue,
+        ItemComponent,
+        SectionComponent,
+    ]);
+}
+function useDerivedItemsFromChildren(children, opts) {
+    var itemPlumeType = opts.itemPlumeType, sectionPlumeType = opts.sectionPlumeType, invalidChildError = opts.invalidChildError, requireItemValue = opts.requireItemValue;
+    return React__default['default'].useMemo(function () {
+        return deriveItemsFromChildren(children, {
+            itemPlumeType: itemPlumeType,
+            sectionPlumeType: sectionPlumeType,
+            invalidChildError: invalidChildError,
+            requireItemValue: requireItemValue
+        });
+    }, [
+        children,
+        itemPlumeType,
+        sectionPlumeType,
+        invalidChildError,
+        requireItemValue,
+    ]);
+}
+/**
+ * Given a Collection node, create the React element that we should use
+ * to render it.
+ */
+function renderCollectionNode(node) {
+    // node.rendered should already have our item-like or section-like Plume
+    // component elements, so we just need to clone them with a secret
+    // _node prop that we use to render.
+    return cloneChild(node.rendered, {
+        _node: node,
+        key: node.key
+    });
+}
+/**
+ * Renders a item-like or section-like Plume component element into an
+ * Item or a Section element.
+ */
+function renderAsCollectionChild(child, opts) {
+    var _a;
+    var plumeType = getPlumeType(child);
+    if (plumeType === opts.itemPlumeType) {
+        var option = child;
+        // We look at the children passed to the item-like element, and derive key
+        // or textValue from it if it is a string
+        var content = getChildProp(option, "children");
+        // The children render prop needs to return an <Item/>
+        return (React__default['default'].createElement(collections.Item
+        // We use ItemLike.value if the user explicitly specified a value,
+        // and we fallback to key.  If the user specified neither, then
+        // the Collections API will generate a unique key for this item.
+        , { 
+            // We use ItemLike.value if the user explicitly specified a value,
+            // and we fallback to key.  If the user specified neither, then
+            // the Collections API will generate a unique key for this item.
+            key: getItemLikeKey(option), 
+            // textValue is either explicitly specified by the user, or we
+            // try to derive it if `content` is a string.
+            textValue: (_a = getChildProp(option, "textValue")) !== null && _a !== void 0 ? _a : (isString(content)
+                ? content
+                : propInChild(option, "value")
+                    ? getChildProp(option, "value")
+                    : option.key), "aria-label": getChildProp(option, "aria-label") }, option));
+    }
+    else {
+        var group = child;
+        return (React__default['default'].createElement(collections.Section
+        // Note that we are using the whole section-like element as the title
+        // here, and not group.props.title; we want the entire section-like
+        // Plume element to end up as Node.rendered.
+        , { 
+            // Note that we are using the whole section-like element as the title
+            // here, and not group.props.title; we want the entire section-like
+            // Plume element to end up as Node.rendered.
+            title: group, "aria-label": getChildProp(group, "aria-label"), 
+            // We are flattening and deriving the descendant Options as items here.
+            // group.props.children should've already been cleaned up by
+            // deriveItemsFromChildren()
+            items: getChildProp(group, "children") }, function (c) { return renderAsCollectionChild(c, opts); }));
+    }
+}
+function getItemLikeKey(element) {
+    var _a;
+    return (_a = getChildProp(element, "value")) !== null && _a !== void 0 ? _a : element.key;
+}
+// PlasmicLoader-aware function to get prop from child.
+function getChildProp(child, prop) {
+    return "componentProps" in child.props
+        ? child.props.componentProps[prop]
+        : child.props[prop];
+}
+// PlasmicLoader-aware function to check `if (prop in element.props)`.
+function propInChild(child, prop) {
+    return "componentProps" in child.props
+        ? prop in child.props.componentProps
+        : prop in child.props;
+}
+// PlasmicLoader-aware function to clone React element.
+function cloneChild(child, props) {
+    if (child.type.getPlumeType) {
+        // If React element has getPlumeType(), assume that it is PlasmicLoader,
+        // so add nodeProps to componentProps instead of element props.
+        return React__default['default'].cloneElement(child, tslib.__assign({ componentProps: tslib.__assign(tslib.__assign({}, child.props.componentProps), props) }, (props.key ? { key: props.key } : {})));
+    }
+    return React__default['default'].cloneElement(child, props);
+}
+
+var TriggeredOverlayContext = React__namespace.createContext(undefined);
+
+var MenuContext = React__namespace.createContext(undefined);
+
+var COLLECTION_OPTS$1 = {
+    itemPlumeType: "menu-item",
+    sectionPlumeType: "menu-group"
+};
+/**
+ * Converts props from BaseMenuProps to react-aria's useMenu() props.
+ */
+function asAriaMenuProps(props) {
+    var children = props.children, rest = tslib.__rest(props, ["children"]);
+    var _a = useDerivedItemsFromChildren(children, tslib.__assign(tslib.__assign({}, COLLECTION_OPTS$1), { invalidChildError: "Can only use Menu.Item and Menu.Group as children to Menu", requireItemValue: false })), items = _a.items, disabledKeys = _a.disabledKeys;
+    var collectionChildRenderer = React__namespace.useCallback(function (child) { return renderAsCollectionChild(child, COLLECTION_OPTS$1); }, []);
+    return {
+        ariaProps: tslib.__assign(tslib.__assign({}, rest), { children: collectionChildRenderer, items: items, disabledKeys: disabledKeys })
+    };
+}
+function useMenu(plasmicClass, props, config, ref) {
+    var _a, _b;
+    if (ref === void 0) { ref = null; }
+    useEnsureSSRProvider();
+    var ariaProps = asAriaMenuProps(props).ariaProps;
+    var triggerContext = React__namespace.useContext(TriggeredOverlayContext);
+    var rootRef = React__namespace.useRef(null);
+    var state = tree.useTreeState(ariaProps);
+    var menuListRef = React__namespace.useRef(null);
+    var menuProps = menu.useMenu(tslib.__assign(tslib.__assign({}, ariaProps), { autoFocus: triggerContext === null || triggerContext === void 0 ? void 0 : triggerContext.autoFocus }), state, menuListRef).menuProps;
+    var contextValue = React__namespace.useMemo(function () { return ({ state: state, menuProps: props }); }, [
+        state,
+        props,
+    ]);
+    var variants = tslib.__assign({}, pick.apply(void 0, tslib.__spreadArray([props], tslib.__read(plasmicClass.internalVariantProps), false)));
+    var overrides = (_a = {},
+        _a[config.root] = {
+            props: mergeProps(getStyleProps(props), {
+                ref: rootRef
+            })
+        },
+        _a[config.itemsContainer] = {
+            as: "ul",
+            props: mergeProps(menuProps, {
+                ref: menuListRef,
+                style: tslib.__assign({}, noOutline())
+            })
+        },
+        _a);
+    var args = tslib.__assign(tslib.__assign({}, pick.apply(void 0, tslib.__spreadArray([props], tslib.__read(plasmicClass.internalArgProps), false))), (_b = {}, _b[config.itemsSlot] = (React__namespace.createElement(MenuContext.Provider, { value: contextValue }, Array.from(state.collection).map(function (node) { return renderCollectionNode(node); }))), _b));
+    var plumeState = React__namespace.useMemo(function () { return ({
+        getFocusedValue: function () { return state.selectionManager.focusedKey; },
+        setFocusedValue: function (value) {
+            return state.selectionManager.setFocusedKey(value);
+        }
+    }); }, [state]);
+    React__namespace.useImperativeHandle(ref, function () { return ({
+        getRoot: function () { return rootRef.current; },
+        getFocusedValue: function () { return plumeState.getFocusedValue(); },
+        setFocusedValue: function (key) { return plumeState.setFocusedValue(key); }
+    }); }, [rootRef, plumeState]);
+    return {
+        plasmicProps: {
+            variants: variants,
+            args: args,
+            overrides: overrides
+        },
+        state: plumeState
+    };
+}
+
+function useMenuGroup(plasmicClass, props, config) {
+    var _a, _b;
+    var context = React__namespace.useContext(MenuContext);
+    var node = props._node;
+    if (!context || !node) {
+        if (PLUME_STRICT_MODE) {
+            throw new Error("You can only use a Menu.Group within a Menu component.");
+        }
+        return getDefaultPlasmicProps(plasmicClass, props);
+    }
+    var _c = menu.useMenuSection({
+        heading: props.title,
+        "aria-label": props["aria-label"]
+    }), headingProps = _c.headingProps, groupProps = _c.groupProps;
+    var separatorProps = separator.useSeparator({
+        elementType: "li"
+    }).separatorProps;
+    var variants = tslib.__assign(tslib.__assign({}, pick.apply(void 0, tslib.__spreadArray([props], tslib.__read(plasmicClass.internalVariantProps), false))), mergeVariantToggles({ def: config.noTitleVariant, active: !props.title }, {
+        def: config.isFirstVariant,
+        active: context.state.collection.getFirstKey() === node.key
+    }));
+    var args = tslib.__assign(tslib.__assign({}, pick.apply(void 0, tslib.__spreadArray([props], tslib.__read(plasmicClass.internalArgProps), false))), (_a = {}, _a[config.titleSlot] = props.title, _a[config.itemsSlot] = Array.from(node.childNodes).map(function (childNode) {
+        return renderCollectionNode(childNode);
+    }), _a));
+    var overrides = (_b = {},
+        _b[config.root] = {
+            props: getStyleProps(props)
+        },
+        _b[config.separator] = {
+            props: tslib.__assign({}, separatorProps),
+            as: "li"
+        },
+        _b[config.titleContainer] = tslib.__assign({ props: tslib.__assign({ role: "presentation" }, headingProps) }, (!props.title && {
+            render: function () { return null; }
+        })),
+        _b[config.itemsContainer] = {
+            props: tslib.__assign({}, groupProps),
+            as: "ul"
+        },
+        _b);
+    return {
+        plasmicProps: {
+            variants: variants,
+            args: args,
+            overrides: overrides
+        }
+    };
+}
+
+function useMenuItem(plasmicClass, props, config) {
+    var _a, _b;
+    var menuContext = React__namespace.useContext(MenuContext);
+    var triggerContext = React__namespace.useContext(TriggeredOverlayContext);
+    if (!menuContext) {
+        if (PLUME_STRICT_MODE) {
+            throw new Error("You can only use a Menu.Item within a Menu component.");
+        }
+        return getDefaultPlasmicProps(plasmicClass, props);
+    }
+    var children = props.children, onAction = props.onAction;
+    var state = menuContext.state, menuProps = menuContext.menuProps;
+    // We pass in the Node secretly as an undocumented prop from <Select />
+    var node = props._node;
+    var isDisabled = state.disabledKeys.has(node.key);
+    var isHighlighted = state.selectionManager.isFocused &&
+        state.selectionManager.focusedKey === node.key;
+    var ref = React__namespace.useRef(null);
+    var _c = menu.useMenuItem(mergeProps({
+        // We need to merge both the onAction on MenuItem and the onAction
+        // on Menu
+        onAction: onAction
+    }, {
+        onAction: menuProps.onAction,
+        onClose: triggerContext === null || triggerContext === void 0 ? void 0 : triggerContext.state.close
+    }, {
+        isDisabled: isDisabled,
+        "aria-label": node && node["aria-label"],
+        key: node.key,
+        isVirtualized: false,
+        closeOnSelect: true
+    }), state, ref), menuItemProps = _c.menuItemProps, labelProps = _c.labelProps;
+    var variants = tslib.__assign(tslib.__assign({}, pick.apply(void 0, tslib.__spreadArray([props], tslib.__read(plasmicClass.internalVariantProps), false))), mergeVariantToggles({ def: config.isDisabledVariant, active: isDisabled }, { def: config.isHighlightedVariant, active: isHighlighted }));
+    var args = tslib.__assign(tslib.__assign({}, pick.apply(void 0, tslib.__spreadArray([props], tslib.__read(plasmicClass.internalArgProps), false))), (_a = {}, _a[config.labelSlot] = children, _a));
+    var overrides = (_b = {},
+        _b[config.root] = {
+            as: "li",
+            props: mergeProps(menuItemProps, { ref: ref, style: noOutline() })
+        },
+        _b[config.labelContainer] = {
+            props: tslib.__assign({}, labelProps)
+        },
+        _b);
+    return {
+        plasmicProps: {
+            variants: variants,
+            args: args,
+            overrides: overrides
+        }
+    };
+}
+
+/**
+ * A menu trigger hook that combines react-aria's useMenuTrigger, useAriaMenuTrigger,
+ * useOverlayPosition, useOverlay, and usePress
+ */
+function useMenuTrigger(opts, state) {
+    var triggerRef = opts.triggerRef, isDisabled = opts.isDisabled, placement = opts.placement, menuMatchTriggerWidth = opts.menuMatchTriggerWidth, menuWidth = opts.menuWidth, menu$1 = opts.menu;
+    var _a = menu.useMenuTrigger({
+        type: "menu",
+        isDisabled: isDisabled
+    }, state, triggerRef), triggerPressProps = _a.menuTriggerProps, menuProps = _a.menuProps;
+    var triggerProps = interactions.usePress(tslib.__assign(tslib.__assign({}, triggerPressProps), { isDisabled: isDisabled })).pressProps;
+    var makeMenu = function () {
+        var realMenu = typeof menu$1 === "function" ? menu$1() : menu$1;
+        if (!realMenu) {
+            return null;
+        }
+        if (getPlumeType(realMenu) !== "menu") {
+            if (PLUME_STRICT_MODE) {
+                throw new Error("Must use an instance of the Menu component.");
+            }
+            return null;
+        }
+        return React__namespace.cloneElement(realMenu, mergeProps(realMenu.props, menuProps));
+    };
+    var triggerContext = React__namespace.useMemo(function () {
+        var _a;
+        return ({
+            triggerRef: triggerRef,
+            state: state,
+            autoFocus: (_a = state.focusStrategy) !== null && _a !== void 0 ? _a : true,
+            placement: placement,
+            overlayMatchTriggerWidth: menuMatchTriggerWidth,
+            overlayMinTriggerWidth: true,
+            overlayWidth: menuWidth
+        });
+    }, [triggerRef, state, placement, menuMatchTriggerWidth, menuWidth]);
+    return {
+        triggerProps: triggerProps,
+        makeMenu: makeMenu,
+        triggerContext: triggerContext
+    };
+}
+
+function DropdownMenu(props) {
+    var isOpen = props.isOpen, defaultOpen = props.defaultOpen, onOpenChange = props.onOpenChange, children = props.children, placement = props.placement, menu = props.menu;
+    var triggerRef = React__namespace.useRef(null);
+    var state = menu$1.useMenuTriggerState({
+        isOpen: isOpen,
+        defaultOpen: defaultOpen,
+        onOpenChange: onOpenChange,
+        shouldFlip: true
+    });
+    var _a = useMenuTrigger({
+        triggerRef: triggerRef,
+        placement: placement,
+        menu: menu
+    }, state), triggerProps = _a.triggerProps, makeMenu = _a.makeMenu, triggerContext = _a.triggerContext;
+    return (React__namespace.createElement(TriggeredOverlayContext.Provider, { value: triggerContext },
+        React__namespace.cloneElement(children, mergeProps(children.props, triggerProps, { ref: triggerRef })),
+        state.isOpen && makeMenu()));
+}
+
+function useMenuButton(plasmicClass, props, config, outerRef) {
+    var _a, _b;
+    if (outerRef === void 0) { outerRef = null; }
+    var placement = props.placement, isOpen = props.isOpen, defaultOpen = props.defaultOpen, onOpenChange = props.onOpenChange, isDisabled = props.isDisabled, menu = props.menu, autoFocus = props.autoFocus, menuMatchTriggerWidth = props.menuMatchTriggerWidth, menuWidth = props.menuWidth;
+    useEnsureSSRProvider();
+    var rootRef = React__namespace.useRef(null);
+    var triggerRef = React__namespace.useRef(null);
+    var state = menu$1.useMenuTriggerState({
+        isOpen: isOpen,
+        defaultOpen: defaultOpen,
+        onOpenChange: onOpenChange,
+        shouldFlip: true
+    });
+    var _c = useMenuTrigger({
+        isDisabled: isDisabled,
+        triggerRef: triggerRef,
+        placement: placement,
+        menuMatchTriggerWidth: menuMatchTriggerWidth,
+        menuWidth: menuWidth,
+        menu: menu
+    }, state), triggerProps = _c.triggerProps, makeMenu = _c.makeMenu, triggerContext = _c.triggerContext;
+    var triggerFocusProps = focus.useFocusable(props, triggerRef).focusableProps;
+    var variants = tslib.__assign(tslib.__assign({}, pick.apply(void 0, tslib.__spreadArray([props], tslib.__read(plasmicClass.internalVariantProps), false))), mergeVariantToggles({ def: config.isOpenVariant, active: state.isOpen }, { def: config.isDisabledVariant, active: isDisabled }));
+    var args = tslib.__assign(tslib.__assign({}, pick.apply(void 0, tslib.__spreadArray([props], tslib.__read(plasmicClass.internalArgProps), false))), (_a = {}, _a[config.menuSlot] = state.isOpen ? makeMenu() : undefined, _a));
+    var overrides = (_b = {},
+        _b[config.root] = {
+            wrapChildren: function (children) { return (React__namespace.createElement(TriggeredOverlayContext.Provider, { value: triggerContext }, children)); },
+            props: {
+                ref: rootRef
+            }
+        },
+        _b[config.trigger] = {
+            props: mergeProps(triggerProps, triggerFocusProps, getStyleProps(props), pick(props, "title"), {
+                ref: triggerRef,
+                autoFocus: autoFocus,
+                disabled: !!isDisabled,
+                // Make sure this button is not interpreted as submit
+                type: "button"
+            })
+        },
+        _b);
+    var plumeState = React__namespace.useMemo(function () { return ({
+        open: function () { return state.open(); },
+        close: function () { return state.close(); },
+        isOpen: function () { return state.isOpen; }
+    }); }, [state]);
+    React__namespace.useImperativeHandle(outerRef, function () { return ({
+        getRoot: function () { return rootRef.current; },
+        getTrigger: function () { return triggerRef.current; },
+        focus: function () { return triggerRef.current && triggerRef.current.focus(); },
+        blur: function () { return triggerRef.current && triggerRef.current.blur(); },
+        open: plumeState.open,
+        close: plumeState.close,
+        isOpen: plumeState.isOpen
+    }); }, [rootRef, triggerRef, plumeState]);
+    return {
+        plasmicProps: {
+            variants: variants,
+            args: args,
+            overrides: overrides
+        },
+        state: plumeState
+    };
+}
+
+var SelectContext = React__namespace.createContext(undefined);
+
+var COLLECTION_OPTS = {
+    itemPlumeType: "select-option",
+    sectionPlumeType: "select-option-group"
+};
+/**
+ * Converts props in our BaseSelectProps into props that react-aria's
+ * useSelect() understands.
+ *
+ * Because we're not exposing the Collections API (see ./index.tsx),
+ * we are converting our own API into props for useSelect.
+ *
+ * Specifically, in Plume's API,
+ * - `children` flattens to a list of ReactElements of type Select.Option
+ *   or Select.OptionGroup
+ *
+ * and we map it this way to the Collections API:
+ * - `items` is a list of those flattened ReactElements from `children`!
+ * - `children`, as a render prop, is supposed to take one of the `items`
+ *   and return a `Section` or `Item` element. We take an Option/OptionGroup
+ *   element, and use its props to render the appropriate `Section` or
+ *   `Item`. The "trick" here is that we then stuff the Option element as
+ *   `Item.children`, and the OptionGroup element as `Section.title`.
+ *
+ * When the Collections API does its work deriving `Node`s, the corresponding
+ * Option/OptionGroup ReactElements will end up as `Node.rendered`.
+ *
+ * Then, when we are actually rendering the content of the dropdown, we
+ * iterate through each collected `Node`, and renders
+ * React.cloneElement(Node.rendered, {_node: node}).  This "secretly" passes
+ * the derived collection `Node` as a prop to Option and OptionGroup, and they
+ * can make use of the derived `Node.key` etc in their rendering functions.
+ *
+ * One thing to note here is that we never "rendered" the Option/OptionGroup
+ * React elements that the user constructed; instead, we just looked at the
+ * props used on those elements, and passed those onto the Collections API.
+ * What gets rendered to the screen is the cloned version of these elements
+ * with the secret derived `_node` prop.  That means Option and OptionGroup
+ * render functions can assume that _node is passed in.
+ */
+function useAriaSelectProps(props, config) {
+    var value = props.value, defaultValue = props.defaultValue; props.children; var onChange = props.onChange; props.placement; props.menuMatchTriggerWidth; props.menuWidth; var rest = tslib.__rest(props, ["value", "defaultValue", "children", "onChange", "placement", "menuMatchTriggerWidth", "menuWidth"]);
+    var _a = useDerivedItems(props, tslib.__assign(tslib.__assign({}, COLLECTION_OPTS), { invalidChildError: "Can only use Select.Option and Select.OptionGroup as children to Select", requireItemValue: true, ItemComponent: config.OptionComponent, SectionComponent: config.OptionGroupComponent, itemsProp: "options" })), items = _a.items, disabledKeys = _a.disabledKeys;
+    var collectionChildRenderer = React__namespace.useCallback(function (child) { return renderAsCollectionChild(child, COLLECTION_OPTS); }, []);
+    var onSelectionChange = React__namespace.useMemo(function () {
+        if (onChange) {
+            return function (val) {
+                return onChange((val == null || val === "null" ? null : val));
+            };
+        }
+        else {
+            return undefined;
+        }
+    }, [onChange]);
+    return {
+        ariaProps: tslib.__assign(tslib.__assign(tslib.__assign({}, rest), { children: collectionChildRenderer, onSelectionChange: onSelectionChange, items: items, disabledKeys: disabledKeys, defaultSelectedKey: defaultValue }), ("value" in props && { selectedKey: value !== null && value !== void 0 ? value : null }))
+    };
+}
+function useSelect(plasmicClass, props, config, ref) {
+    var _a, _b;
+    if (ref === void 0) { ref = null; }
+    useEnsureSSRProvider();
+    var ariaProps = useAriaSelectProps(props, config).ariaProps;
+    var placement = props.placement;
+    var state = select.useSelectState(ariaProps);
+    var triggerRef = React__namespace.useRef(null);
+    var rootRef = React__namespace.useRef(null);
+    var isDisabled = props.isDisabled, name = props.name, menuWidth = props.menuWidth, menuMatchTriggerWidth = props.menuMatchTriggerWidth, autoFocus = props.autoFocus, placeholder = props.placeholder, selectedContent = props.selectedContent;
+    var canvasCtx = host.usePlasmicCanvasContext();
+    var _c = select$1.useSelect(ariaProps, state, triggerRef), triggerPressProps = _c.triggerProps, menuProps = _c.menuProps;
+    var triggerProps = interactions.usePress(tslib.__assign(tslib.__assign({}, triggerPressProps), { isDisabled: isDisabled })).pressProps;
+    var triggerContent = state.selectedItem
+        ? selectedContent !== null && selectedContent !== void 0 ? selectedContent : getChildProp(state.selectedItem.value, "children")
+        : null;
+    var variants = tslib.__assign(tslib.__assign({}, pick.apply(void 0, tslib.__spreadArray([props], tslib.__read(plasmicClass.internalVariantProps), false))), mergeVariantToggles({ def: config.isOpenVariant, active: state.isOpen }, { def: config.placeholderVariant, active: !state.selectedItem }, { def: config.isDisabledVariant, active: isDisabled }));
+    var triggerContext = React__namespace.useMemo(function () { return ({
+        triggerRef: triggerRef,
+        state: state,
+        placement: placement,
+        overlayMatchTriggerWidth: menuMatchTriggerWidth,
+        overlayMinTriggerWidth: true,
+        overlayWidth: menuWidth
+    }); }, [triggerRef, state, placement, menuMatchTriggerWidth, menuWidth]);
+    var overrides = (_a = {},
+        _a[config.root] = {
+            props: mergeProps(getStyleProps(props), {
+                ref: rootRef
+            }),
+            wrapChildren: function (children) { return (React__namespace.createElement(React__namespace.Fragment, null,
+                !canvasCtx && (React__namespace.createElement(select$1.HiddenSelect, { state: state, triggerRef: triggerRef, name: name, isDisabled: isDisabled })),
+                children)); }
+        },
+        _a[config.trigger] = {
+            props: mergeProps(canvasCtx ? {} : triggerProps, {
+                ref: triggerRef,
+                autoFocus: autoFocus,
+                disabled: !!isDisabled,
+                // Don't trigger form submission!
+                type: "button"
+            })
+        },
+        _a[config.overlay] = {
+            wrap: function (content) { return (React__namespace.createElement(TriggeredOverlayContext.Provider, { value: triggerContext }, content)); }
+        },
+        _a[config.optionsContainer] = {
+            wrap: function (content) { return (React__namespace.createElement(ListBoxWrapper, { state: state, menuProps: menuProps }, content)); }
+        },
+        _a);
+    var args = tslib.__assign(tslib.__assign({}, pick.apply(void 0, tslib.__spreadArray([props], tslib.__read(plasmicClass.internalArgProps), false))), (_b = {}, _b[config.triggerContentSlot] = triggerContent, _b[config.placeholderSlot] = placeholder, _b[config.optionsSlot] = (React__namespace.createElement(SelectContext.Provider, { value: state }, Array.from(state.collection).map(function (node) { return renderCollectionNode(node); }))), _b));
+    var plumeState = React__namespace.useMemo(function () { return ({
+        open: function () { return state.open(); },
+        close: function () { return state.close(); },
+        isOpen: function () { return state.isOpen; },
+        getSelectedValue: function () {
+            return state.selectedKey ? "".concat(state.selectedKey) : null;
+        },
+        setSelectedValue: function (key) { return state.setSelectedKey(key); }
+    }); }, [state]);
+    React__namespace.useImperativeHandle(ref, function () { return ({
+        getRoot: function () { return rootRef.current; },
+        getTrigger: function () { return triggerRef.current; },
+        focus: function () { var _a; return (_a = triggerRef.current) === null || _a === void 0 ? void 0 : _a.focus(); },
+        blur: function () { var _a; return (_a = triggerRef.current) === null || _a === void 0 ? void 0 : _a.blur(); },
+        open: function () { return plumeState.open(); },
+        close: function () { return plumeState.close(); },
+        isOpen: function () { return plumeState.isOpen(); },
+        getSelectedValue: function () { return plumeState.getSelectedValue(); },
+        setSelectedValue: function (key) { return plumeState.setSelectedValue(key); }
+    }); }, [rootRef, triggerRef, plumeState]);
+    return {
+        plasmicProps: {
+            variants: variants,
+            args: args,
+            overrides: overrides
+        },
+        state: plumeState
+    };
+}
+function ListBoxWrapper(props) {
+    var state = props.state, menuProps = props.menuProps, children = props.children;
+    var ref = React__namespace.useRef(null);
+    var canvasCtx = host.usePlasmicCanvasContext();
+    var listBoxProps = listbox.useListBox(tslib.__assign(tslib.__assign({}, menuProps), { isVirtualized: false, autoFocus: state.focusStrategy || true, disallowEmptySelection: true }), state, ref).listBoxProps;
+    return React__namespace.cloneElement(children, mergeProps(children.props, canvasCtx ? {} : listBoxProps, {
+        style: noOutline(),
+        ref: ref
+    }));
+}
+
+function useSelectOption(plasmicClass, props, config, outerRef) {
+    var _a, _b;
+    if (outerRef === void 0) { outerRef = null; }
+    var state = React__namespace.useContext(SelectContext);
+    if (!state) {
+        // If no context, then we are being incorrectly used.  Complain or just don't
+        // bother installing any hooks.  It's okay to violate rules of hooks here
+        // because this instance won't suddenly be used correctly in another render.
+        if (PLUME_STRICT_MODE) {
+            throw new Error("You can only use a Select.Option within a Select component.");
+        }
+        return getDefaultPlasmicProps(plasmicClass, props);
+    }
+    var children = props.children;
+    var canvasCtx = host.usePlasmicCanvasContext();
+    var rootRef = React__namespace.useRef(null);
+    var onRef = mergeRefs(rootRef, outerRef);
+    // We pass in the Node secretly as an undocumented prop from <Select />
+    var node = props._node;
+    var isSelected = state.selectionManager.isSelected(node.key);
+    var isDisabled = state.disabledKeys.has(node.key);
+    var isHighlighted = state.selectionManager.isFocused &&
+        state.selectionManager.focusedKey === node.key;
+    var _c = listbox.useOption({
+        isSelected: isSelected,
+        isDisabled: isDisabled,
+        "aria-label": node && node["aria-label"],
+        key: node.key,
+        shouldSelectOnPressUp: true,
+        shouldFocusOnHover: true,
+        isVirtualized: false,
+        shouldUseVirtualFocus: !!canvasCtx
+    }, state, rootRef), optionProps = _c.optionProps, labelProps = _c.labelProps;
+    var variants = tslib.__assign(tslib.__assign({}, pick.apply(void 0, tslib.__spreadArray([props], tslib.__read(plasmicClass.internalVariantProps), false))), mergeVariantToggles({ def: config.isSelectedVariant, active: isSelected }, { def: config.isDisabledVariant, active: isDisabled }, { def: config.isHighlightedVariant, active: isHighlighted }));
+    var args = tslib.__assign(tslib.__assign({}, pick.apply(void 0, tslib.__spreadArray([props], tslib.__read(plasmicClass.internalArgProps), false))), (_a = {}, _a[config.labelSlot] = children, _a));
+    var overrides = (_b = {},
+        _b[config.root] = {
+            props: mergeProps(canvasCtx ? {} : optionProps, getStyleProps(props), {
+                ref: onRef,
+                style: noOutline()
+            })
+        },
+        _b[config.labelContainer] = {
+            props: labelProps
+        },
+        _b);
+    return {
+        plasmicProps: {
+            variants: variants,
+            args: args,
+            overrides: overrides
+        }
+    };
+}
+
+function useSelectOptionGroup(plasmicClass, props, config) {
+    var _a, _b;
+    var state = React__namespace.useContext(SelectContext);
+    // `node` should exist if the OptionGroup was instantiated properly
+    // within a Select
+    var node = props._node;
+    if (!state || !node) {
+        if (PLUME_STRICT_MODE) {
+            throw new Error("You can only use a Select.OptionGroup within a Select component.");
+        }
+        return getDefaultPlasmicProps(plasmicClass, props);
+    }
+    var _c = listbox.useListBoxSection({
+        heading: props.title,
+        "aria-label": props["aria-label"]
+    }), headingProps = _c.headingProps, groupProps = _c.groupProps;
+    var separatorProps = separator.useSeparator({
+        elementType: "li"
+    }).separatorProps;
+    var variants = tslib.__assign(tslib.__assign({}, pick.apply(void 0, tslib.__spreadArray([props], tslib.__read(plasmicClass.internalVariantProps), false))), mergeVariantToggles({ def: config.noTitleVariant, active: !props.title }, {
+        def: config.isFirstVariant,
+        active: state.collection.getFirstKey() === node.key
+    }));
+    var args = tslib.__assign(tslib.__assign({}, pick.apply(void 0, tslib.__spreadArray([props], tslib.__read(plasmicClass.internalArgProps), false))), (_a = {}, _a[config.titleSlot] = props.title, _a[config.optionsSlot] = Array.from(node.childNodes).map(function (childNode) {
+        return renderCollectionNode(childNode);
+    }), _a));
+    var overrides = (_b = {},
+        _b[config.root] = {
+            props: getStyleProps(props)
+        },
+        _b[config.separator] = {
+            props: tslib.__assign({}, separatorProps)
+        },
+        _b[config.titleContainer] = tslib.__assign({ props: tslib.__assign({ role: "presentation" }, headingProps) }, (!props.title && {
+            render: function () { return null; }
+        })),
+        _b[config.optionsContainer] = {
+            props: tslib.__assign({}, groupProps)
+        },
+        _b);
+    return {
+        plasmicProps: {
+            variants: variants,
+            args: args,
+            overrides: overrides
+        }
+    };
+}
+
+function asAriaSwitchProps(props) {
+    var ariaProps = tslib.__assign(tslib.__assign({}, props), { isSelected: props.isChecked, defaultSelected: props.defaultChecked });
+    delete ariaProps["isChecked"];
+    delete ariaProps["defaultChecked"];
+    return ariaProps;
+}
+function useSwitch(plasmicClass, props, config, ref) {
+    var _a, _b;
+    if (ref === void 0) { ref = null; }
+    var children = props.children, isDisabled = props.isDisabled;
+    useEnsureSSRProvider();
+    var inputRef = React__namespace.useRef(null);
+    var rootRef = React__namespace.useRef(null);
+    var ariaProps = asAriaSwitchProps(props);
+    var state = toggle.useToggleState(ariaProps);
+    var inputProps = _switch.useSwitch(ariaProps, state, inputRef).inputProps;
+    var variants = tslib.__assign(tslib.__assign({}, pick.apply(void 0, tslib.__spreadArray([props], tslib.__read(plasmicClass.internalVariantProps), false))), mergeVariantToggles({
+        def: config.isDisabledVariant,
+        active: isDisabled
+    }, {
+        def: config.isCheckedVariant,
+        active: state.isSelected
+    }, {
+        def: config.noLabelVariant,
+        active: !children
+    }));
+    var overrides = (_a = {},
+        _a[config.root] = {
+            as: "label",
+            props: mergeProps(getStyleProps(props), {
+                ref: rootRef
+            }),
+            wrapChildren: function (children) { return (React__namespace.createElement(React__namespace.Fragment, null,
+                React__namespace.createElement(visuallyHidden.VisuallyHidden, null,
+                    React__namespace.createElement("input", tslib.__assign({}, inputProps, { ref: inputRef }))),
+                children)); }
+        },
+        _a);
+    var args = tslib.__assign(tslib.__assign({}, pick.apply(void 0, tslib.__spreadArray([props], tslib.__read(plasmicClass.internalArgProps), false))), (config.labelSlot ? (_b = {}, _b[config.labelSlot] = children, _b) : {}));
+    var plumeState = React__namespace.useMemo(function () { return ({
+        setChecked: function (checked) { return state.setSelected(checked); }
+    }); }, [state]);
+    React__namespace.useImperativeHandle(ref, function () { return ({
+        getRoot: function () { return rootRef.current; },
+        focus: function () { var _a; return (_a = inputRef.current) === null || _a === void 0 ? void 0 : _a.focus(); },
+        blur: function () { var _a; return (_a = inputRef.current) === null || _a === void 0 ? void 0 : _a.blur(); },
+        setChecked: function (checked) { return plumeState.setChecked(checked); }
+    }); }, [rootRef, inputRef, plumeState]);
+    return {
+        plasmicProps: {
+            variants: variants,
+            overrides: overrides,
+            args: args
+        },
+        state: plumeState
+    };
+}
+
+function useTextInput(plasmicClass, props, config, ref) {
+    var _a, _b, _c;
+    if (ref === void 0) { ref = null; }
+    var isDisabled = props.isDisabled, startIcon = props.startIcon, endIcon = props.endIcon, showStartIcon = props.showStartIcon, showEndIcon = props.showEndIcon, className = props.className, style = props.style, inputClassName = props.inputClassName, inputStyle = props.inputStyle, rest = tslib.__rest(props, ["isDisabled", "startIcon", "endIcon", "showStartIcon", "showEndIcon", "className", "style", "inputClassName", "inputStyle"]);
+    var rootRef = React__namespace.useRef(null);
+    var inputRef = React__namespace.useRef(null);
+    React__namespace.useImperativeHandle(ref, function () { return ({
+        focus: function () {
+            var _a;
+            (_a = inputRef.current) === null || _a === void 0 ? void 0 : _a.focus();
+        },
+        blur: function () {
+            var _a;
+            (_a = inputRef.current) === null || _a === void 0 ? void 0 : _a.blur();
+        },
+        getRoot: function () {
+            return rootRef.current;
+        },
+        getInput: function () {
+            return inputRef.current;
+        }
+    }); }, [rootRef, inputRef]);
+    var variants = tslib.__assign(tslib.__assign({}, pick.apply(void 0, tslib.__spreadArray([props], tslib.__read(plasmicClass.internalVariantProps), false))), mergeVariantToggles({ def: config.showStartIconVariant, active: showStartIcon }, { def: config.showEndIconVariant, active: showEndIcon }, { def: config.isDisabledVariant, active: isDisabled }));
+    var args = tslib.__assign(tslib.__assign(tslib.__assign({}, pick.apply(void 0, tslib.__spreadArray([props], tslib.__read(plasmicClass.internalArgProps), false))), (config.startIconSlot && (_a = {}, _a[config.startIconSlot] = startIcon, _a))), (config.endIconSlot && (_b = {}, _b[config.endIconSlot] = endIcon, _b)));
+    var overrides = (_c = {},
+        _c[config.root] = {
+            props: {
+                ref: rootRef,
+                className: className,
+                style: style
+            }
+        },
+        _c[config.input] = {
+            props: tslib.__assign(tslib.__assign({}, omit.apply(void 0, tslib.__spreadArray(tslib.__spreadArray([rest], tslib.__read(plasmicClass.internalArgProps.filter(function (prop) { return prop !== "required"; })), false), tslib.__read(plasmicClass.internalVariantProps), false))), { disabled: isDisabled, ref: inputRef, className: inputClassName, style: inputStyle })
+        },
+        _c);
+    return {
+        plasmicProps: {
+            variants: variants,
+            args: args,
+            overrides: overrides
+        }
+    };
+}
+
+function useTriggeredOverlay(plasmicClass, props, config, outerRef, isDismissable) {
+    var _a, _b;
+    if (outerRef === void 0) { outerRef = null; }
+    if (isDismissable === void 0) { isDismissable = true; }
+    var overlayRef = React__namespace.useRef(null);
+    var onOverlayRef = mergeRefs(overlayRef, outerRef);
+    var context = React__namespace.useContext(TriggeredOverlayContext);
+    if (!context) {
+        // If no context, then we are not being correctly used.  Either complain, or
+        // exit early.  It's okay to exit early and break the rules of React hooks
+        // because we won't suddenly have the appropriate context anyway for this instance.
+        if (PLUME_STRICT_MODE) {
+            throw new Error("You can only use a triggered overlay with a TriggeredOverlayContext");
+        }
+        return getDefaultPlasmicProps(plasmicClass, props);
+    }
+    var children = props.children;
+    var triggerRef = context.triggerRef, placement = context.placement, overlayMatchTriggerWidth = context.overlayMatchTriggerWidth, overlayMinTriggerWidth = context.overlayMinTriggerWidth, overlayWidth = context.overlayWidth, state = context.state;
+    // Measure the width of the trigger to inform the width of the menu (below).
+    var _c = tslib.__read(React__namespace.useState(false), 2), isRendered = _c[0], setRendered = _c[1];
+    var triggerWidth = triggerRef.current && (overlayMatchTriggerWidth || overlayMinTriggerWidth)
+        ? triggerRef.current.offsetWidth
+        : undefined;
+    useIsomorphicLayoutEffect$1(function () {
+        if (!isRendered &&
+            triggerRef.current &&
+            (overlayMatchTriggerWidth || overlayMinTriggerWidth)) {
+            setRendered(true);
+        }
+    }, [
+        triggerRef,
+        isRendered,
+        overlayMatchTriggerWidth,
+        overlayMinTriggerWidth,
+    ]);
+    var overlayAriaProps = overlays.useOverlay({
+        isOpen: state.isOpen,
+        onClose: state.close,
+        isDismissable: isDismissable,
+        shouldCloseOnBlur: true
+    }, overlayRef).overlayProps;
+    var _d = overlays.useOverlayPosition({
+        targetRef: triggerRef,
+        overlayRef: overlayRef,
+        placement: placement !== null && placement !== void 0 ? placement : "bottom left",
+        shouldFlip: true,
+        isOpen: state.isOpen,
+        onClose: state.close,
+        containerPadding: 0
+    }), overlayPositionProps = _d.overlayProps, updatePosition = _d.updatePosition, placementAxis = _d.placement;
+    useIsomorphicLayoutEffect$1(function () {
+        if (state.isOpen) {
+            requestAnimationFrame(function () {
+                updatePosition();
+            });
+        }
+    }, [state.isOpen, updatePosition]);
+    var overlayProps = mergeProps({
+        style: {
+            left: "auto",
+            right: "auto",
+            top: "auto",
+            bottom: "auto",
+            position: "absolute",
+            width: overlayWidth !== null && overlayWidth !== void 0 ? overlayWidth : (overlayMatchTriggerWidth ? triggerWidth : "auto"),
+            minWidth: overlayMinTriggerWidth ? triggerWidth : "auto"
+        }
+    }, overlayAriaProps, overlayPositionProps);
+    var variants = tslib.__assign(tslib.__assign({}, pick.apply(void 0, tslib.__spreadArray([props], tslib.__read(plasmicClass.internalVariantProps), false))), mergeVariantToggles({ def: config.isPlacedTopVariant, active: placementAxis === "top" }, { def: config.isPlacedBottomVariant, active: placementAxis === "bottom" }, { def: config.isPlacedLeftVariant, active: placementAxis === "left" }, { def: config.isPlacedRightVariant, active: placementAxis === "right" }));
+    var canvasCtx = host.usePlasmicCanvasContext();
+    var args = tslib.__assign(tslib.__assign({}, pick.apply(void 0, tslib.__spreadArray([props], tslib.__read(plasmicClass.internalArgProps), false))), (_a = {}, _a[config.contentSlot] = canvasCtx ? (children) : (React__namespace.createElement(focus.FocusScope, { restoreFocus: true },
+        React__namespace.createElement(overlays.DismissButton, { onDismiss: state.close }),
+        children)), _a));
+    var overrides = (_b = {},
+        _b[config.root] = {
+            props: mergeProps(overlayProps, getStyleProps(props), {
+                ref: onOverlayRef
+            }),
+            wrap: function (root) {
+                if (typeof document !== "undefined") {
+                    return ReactDOM__namespace.createPortal(root, document.body);
+                }
+                else {
+                    // Possibly being invoked on the server during SSR; no need to
+                    // bother with a portal in that case.
+                    return root;
+                }
+            }
+        },
+        _b);
+    return {
+        plasmicProps: {
+            variants: variants,
+            args: args,
+            overrides: overrides
+        }
+    };
+}
+
+Object.defineProperty(exports, 'PlasmicDataSourceContextProvider', {
+  enumerable: true,
+  get: function () {
+    return dataSourcesContext.PlasmicDataSourceContextProvider;
+  }
+});
+Object.defineProperty(exports, 'useCurrentUser', {
+  enumerable: true,
+  get: function () {
+    return dataSourcesContext.useCurrentUser;
+  }
+});
+Object.defineProperty(exports, 'get', {
+  enumerable: true,
+  get: function () {
+    return get__default['default'];
+  }
+});
+exports.DropdownMenu = DropdownMenu;
+exports.PlasmicHead = PlasmicHead;
+exports.PlasmicIcon = PlasmicIcon;
+exports.PlasmicImg = PlasmicImg;
+exports.PlasmicLink = PlasmicLink;
+exports.PlasmicPageGuard = PlasmicPageGuard;
+exports.PlasmicRootProvider = PlasmicRootProvider;
+exports.PlasmicSlot = PlasmicSlot;
+exports.SelectContext = SelectContext;
+exports.Stack = Stack;
+exports.Trans = Trans;
+exports.TriggeredOverlayContext = TriggeredOverlayContext;
+exports.classNames = classNames;
+exports.createPlasmicElementProxy = createPlasmicElementProxy;
+exports.createUseScreenVariants = createUseScreenVariants;
+exports.deriveRenderOpts = deriveRenderOpts;
+exports.ensureGlobalVariants = ensureGlobalVariants;
+exports.genTranslatableString = genTranslatableString;
+exports.generateStateOnChangeProp = generateStateOnChangeProp;
+exports.generateStateOnChangePropForCodeComponents = generateStateOnChangePropForCodeComponents;
+exports.generateStateValueProp = generateStateValueProp;
+exports.getCurrentInitialValue = getCurrentInitialValue;
+exports.getDataProps = getDataProps;
+exports.getStateCellsInPlasmicProxy = getStateCellsInPlasmicProxy;
+exports.getStateSpecInPlasmicProxy = getStateSpecInPlasmicProxy;
+exports.hasVariant = hasVariant;
+exports.initializeCodeComponentStates = initializeCodeComponentStates;
+exports.initializePlasmicStates = initializePlasmicStates;
+exports.is$StateProxy = is$StateProxy;
+exports.isPlasmicStateProxy = isPlasmicStateProxy;
+exports.makeFragment = makeFragment;
+exports.mergeVariantsWithStates = mergeVariantsWithStates;
+exports.omit = omit;
+exports.pick = pick;
+exports.plasmicHeadMeta = plasmicHeadMeta;
+exports.renderPlasmicSlot = renderPlasmicSlot;
+exports.resetToInitialValue = resetToInitialValue;
+exports.set = set;
+exports.setPlumeStrictMode = setPlumeStrictMode;
+exports.useButton = useButton;
+exports.useCheckbox = useCheckbox;
+exports.useDollarState = useDollarState;
+exports.useIsSSR = useIsSSR;
+exports.useMenu = useMenu;
+exports.useMenuButton = useMenuButton;
+exports.useMenuGroup = useMenuGroup;
+exports.useMenuItem = useMenuItem;
+exports.useSelect = useSelect;
+exports.useSelectOption = useSelectOption;
+exports.useSelectOptionGroup = useSelectOptionGroup;
+exports.useSwitch = useSwitch;
+exports.useTextInput = useTextInput;
+exports.useTrigger = useTrigger;
+exports.useTriggeredOverlay = useTriggeredOverlay;
+exports.withPlasmicPageGuard = withPlasmicPageGuard;
+exports.wrapWithClassName = wrapWithClassName;
+//# sourceMappingURL=index.cjs.js.map