npm - @plasmicapp/react-web - Versions diffs - 0.2.396 → 0.2.398 - Mend

@plasmicapp/react-web 0.2.396 → 0.2.398

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (16) hide show

package/dist/all.d.ts +344 -184
package/dist/index-common.d.ts +4 -3
package/dist/index.cjs.js +1061 -898
package/dist/index.cjs.js.map +1 -1
package/dist/react-web.esm.js +1059 -899
package/dist/react-web.esm.js.map +1 -1
package/dist/render/elements.d.ts +1 -1
package/dist/render/global-variants.d.ts +49 -1
package/dist/render/style-tokens.d.ts +114 -0
package/package.json +9 -9
package/skinny/dist/index-common.d.ts +4 -3
package/skinny/dist/index.js +256 -96
package/skinny/dist/index.js.map +1 -1
package/skinny/dist/render/elements.d.ts +1 -1
package/skinny/dist/render/global-variants.d.ts +49 -1
package/skinny/dist/render/style-tokens.d.ts +114 -0

package/dist/index.cjs.js CHANGED Viewed

@@ -5,8 +5,8 @@ var classNames$1 = require('classnames');
 var dataSourcesContext = require('@plasmicapp/data-sources-context');
 var plasmicQuery = require('@plasmicapp/query');
 var React = require('react');
-var get = require('dlv');
 var host = require('@plasmicapp/host');
+var get = require('dlv');
 var ReactDOM = require('react-dom');
 var ssr = require('@react-aria/ssr');
 var focus = require('@react-aria/focus');
@@ -461,6 +461,88 @@ function mapValues(obj, mapper) {
     return result;
 }
+var PlasmicHeadContext = React__namespace.createContext(undefined);
+function PlasmicHead(props) {
+    var Head = React__namespace.useContext(PlasmicHeadContext);
+    var headMetadata =
+    // Check if `HeadMetadataContext` is exported for backward compatibility
+    "HeadMetadataContext" in plasmicQuery__namespace
+        ? React__namespace.useContext(plasmicQuery__namespace.HeadMetadataContext)
+        : undefined;
+    if (headMetadata) {
+        // If we have the Head metadata object specified, mutate it so to ensure it
+        // stores the data that should go in the <head>.
+        if (props.image) {
+            headMetadata.image = props.image;
+        }
+        if (props.title) {
+            headMetadata.title = props.title;
+        }
+        if (props.description) {
+            headMetadata.description = props.description;
+        }
+        if (props.canonical) {
+            headMetadata.canonical = props.canonical;
+        }
+    }
+    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", rel: "canonical", href: props.canonical }))));
+}
+var plasmicHeadMeta = {
+    name: "hostless-plasmic-head",
+    displayName: "Page Metadata Override",
+    description: "Set page metadata (HTML <head />) to dynamic values.",
+    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 = __rest(props, ["PlasmicIconType"]);
+    return React__namespace.createElement(PlasmicIconType, __assign({}, rest));
+}
 var isBrowser = typeof window !== "undefined";
 var NONE = Symbol("NONE");
 var useIsomorphicLayoutEffect$1 = isBrowser
@@ -656,989 +738,958 @@ function getElementTypeName(element) {
     }
 }
-function renderStack(as, props, hasGap, ref) {
-    var children = props.children, rest = __rest(props, ["children"]);
-    var wrappedChildren = wrapFlexContainerChildren(children, hasGap !== null && hasGap !== void 0 ? hasGap : false);
-    return createElementWithChildren(as, __assign({ ref: ref }, rest), wrappedChildren);
-}
-function FlexStack_(props, outerRef) {
-    var as = props.as, hasGap = props.hasGap, rest = __rest(props, ["as", "hasGap"]);
-    return renderStack(as !== null && as !== void 0 ? as : "div", rest, hasGap, outerRef);
-}
-var FlexStack = React__namespace.forwardRef(FlexStack_);
-var makeStackImpl = function (as) {
-    return React__namespace.forwardRef(function (props, ref) {
-        var hasGap = props.hasGap, rest = __rest(props, ["hasGap"]);
-        return renderStack(as, rest, hasGap, ref);
+/**
+ * Responsive `<img/>` replacement, based on `next/image`
+ */
+var IMG_OPTIMIZER_HOST = "https://img.plasmic.app";
+// 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 = __spreadArray(__spreadArray([], __read(IMG_SIZES), false), __read(DEVICE_SIZES), false);
+var PlasmicImg = React.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 = __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 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;
+    var _a = !src
+        ? { fullWidth: undefined, fullHeight: undefined, aspectRatio: undefined }
+        : typeof src === "string"
+            ? getImageSizeData(getPixelLength(props.width), getPixelLength(props.height))
+            : 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.createElement("img", __assign({ src: srcStr, className: className, style: style }, imgProps, { loading: loading, ref: mergeRefs(imgRef, outerRef) })));
     }
-    else if (groupVariants === true) {
-        return variant === groupName;
+    if (isSvg(srcStr) &&
+        (displayHeight == null || displayHeight === "auto") &&
+        (displayWidth == null || displayWidth === "auto")) {
+        displayWidth = "100%";
     }
-    else if (groupVariants === false) {
-        return false;
+    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;
+        }
     }
-    else if (Array.isArray(groupVariants)) {
-        return groupVariants.includes(variant);
+    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);
     }
-    else if (typeof groupVariants === "string") {
-        return groupVariants === variant;
+    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 =
+    // if btoa exists, use btoa, as it works in browser and in
+    // cloudflare edge workers.  For node, use Buffer.from().
+    typeof globalThis.btoa === "function"
+        ? globalThis.btoa(spacerSvg)
+        : Buffer.from(spacerSvg).toString("base64");
+    var wrapperStyle = __assign({}, (style || {}));
+    var spacerStyle = __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 {
-        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 ρfc" : "__wab_passthrough";
-    if (!children) {
-        return null;
+        // 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;
+        }
     }
-    else if (Array.isArray(children)) {
-        return React__namespace.createElement.apply(React__namespace, __spreadArray(["div", { className: className }], __read(children), false));
+    if (displayHeight != null && displayHeight !== "auto") {
+        spacerStyle.height = "100%";
+        // wrapperStyle.height = displayHeight;
+        // wrapperStyle.minHeight = displayMinHeight;
+        // wrapperStyle.maxHeight = displayMaxHeight;
     }
     else {
-        return React__namespace.createElement("div", { className: className }, children);
-    }
-}
-function createPlasmicElement(override, defaultRoot, defaultProps, wrapChildrenInFlex) {
-    if (!override ||
-        (typeof override === "object" && 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;
+        spacerStyle.height = displayHeight;
+        wrapperStyle.height = "auto";
+        if (displayMinHeight) {
+            spacerStyle.minHeight = "100%";
+            // wrapperStyle.minHeight = displayMinHeight;
         }
-        else {
-            root = override2.as;
+        if (displayMaxHeight != null && displayMaxHeight !== "none") {
+            spacerStyle.maxHeight = "100%";
+            // wrapperStyle.maxHeight = displayMaxHeight;
         }
     }
-    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;
+    return (React.createElement("div", { className: classNames$1(className, "__wab_img-wrapper"), ref: outerRef, style: wrapperStyle },
+        React.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.createElement("picture", { className: "__wab_picture" },
+        imageLoader && imageLoader.supportsUrl(src) && (React.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.createElement("img", __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: __assign(__assign({}, (style ? pick(style, "objectFit", "objectPosition") : {})), { width: 0, height: 0 }) }))));
 }
-// 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 DEFAULT_SVG_WIDTH = 10000;
+function isSvg(src) {
+    return src.endsWith(".svg") || src.startsWith("data:image/svg");
+}
+function getClosestPresetSize(width, fullWidth) {
     var _a;
-    var children = [];
-    for (var _i = 2; _i < arguments.length; _i++) {
-        children[_i - 2] = arguments[_i];
+    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;
     }
-    if (props == null) {
-        props = {};
+    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;
     }
-    var name = props["data-plasmic-name"];
-    var isRoot = props["data-plasmic-root"];
-    var forNodeName = props["data-plasmic-for-node"];
-    delete props["data-plasmic-name"];
-    delete props["data-plasmic-root"];
-    delete props["data-plasmic-for-node"];
-    var element = createPlasmicElementFromJsx.apply(void 0, __spreadArray([defaultElement,
-        props], __read(children), false));
-    if (name) {
-        seenElements.set(name, element);
+    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,
+        };
     }
-    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;
+    // 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 element;
+    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 createPlasmicElementFromJsx(defaultElement, props) {
-    var _a;
-    var children = [];
-    for (var _i = 2; _i < arguments.length; _i++) {
-        children[_i - 2] = arguments[_i];
+function getPixelLength(length) {
+    if (length == null || length == "") {
+        return undefined;
     }
-    var override = props["data-plasmic-override"];
-    var wrapFlexChild = props["data-plasmic-wrap-flex-child"];
-    var triggerProps = ((_a = props["data-plasmic-trigger-props"]) !== null && _a !== void 0 ? _a : []);
-    delete props["data-plasmic-override"];
-    delete props["data-plasmic-wrap-flex-child"];
-    delete props["data-plasmic-trigger-props"];
-    return createPlasmicElement(override, defaultElement, mergeProps.apply(void 0, __spreadArray([props,
-        children.length === 0
-            ? {}
-            : { children: children.length === 1 ? children[0] : children }], __read(triggerProps), false)), wrapFlexChild);
+    if (typeof length === "number") {
+        return length;
+    }
+    var parsed = parseNumeric(length);
+    if (parsed && (!parsed.units || parsed.units === "px")) {
+        return parsed.num;
+    }
+    return undefined;
 }
-function makeFragment() {
-    var children = [];
-    for (var _i = 0; _i < arguments.length; _i++) {
-        children[_i] = arguments[_i];
+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;
     }
-    return React__namespace.createElement.apply(React__namespace, __spreadArray([React__namespace.Fragment, {}], __read(children), false));
+    var num = res[1];
+    var units = res[2];
+    return { num: +num, units: units };
 }
-var UNSET = Symbol("UNSET");
-function mergeOverrideProps(defaults, overrides) {
-    var e_1, _a;
-    if (!overrides) {
-        return defaults;
+function getImageSizeData(width, height) {
+    var aspectRatio = width && height ? width / height : undefined;
+    return {
+        fullWidth: width,
+        fullHeight: height,
+        aspectRatio: aspectRatio && isFinite(aspectRatio) ? aspectRatio : undefined,
+    };
+}
+function getImageLoader(loader) {
+    if (loader == null) {
+        return undefined;
     }
-    var result = __assign({}, defaults);
-    try {
-        for (var _b = __values(Object.keys(overrides)), _c = _b.next(); !_c.done; _c = _b.next()) {
-            var key = _c.value;
-            var defaultVal = defaults[key];
-            var overrideVal = overrides[key];
-            if (overrideVal === UNSET) {
-                delete result[key];
-            }
-            else {
-                // We use the NONE sentinel if the overrideVal is nil, and is not one of the
-                // props that we merge by default -- which are className, style, and
-                // event handlers.  This means for all other "normal" props -- like children,
-                // title, etc -- a nil value will unset the default.
-                if (overrideVal == null &&
-                    key !== "className" &&
-                    key !== "style" &&
-                    !(key.startsWith("on") && typeof defaultVal === "function")) {
-                    overrideVal = NONE;
-                }
-                result[key] = mergePropVals(key, defaultVal, overrideVal);
-            }
-        }
+    else if (loader === "plasmic") {
+        return PLASMIC_IMAGE_LOADER;
     }
-    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; }
+    else {
+        return loader;
     }
-    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 isInternalKey(src) {
+    return /^([a-f0-9]{32})\..{1,16}$/i.test(src);
 }
-function deriveOverride(x) {
-    if (!x) {
-        // undefined Binding is an empty Binding
-        return {
-            type: "default",
-            props: {},
-        };
+var PLASMIC_IMAGE_LOADER = {
+    supportsUrl: function (src) {
+        return (src.startsWith("http") || isInternalKey(src)) && !isSvg(src);
+    },
+    transformUrl: function (opts) {
+        var _a;
+        var params = [
+            "src=".concat(encodeURIComponent(opts.src)),
+            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(IMG_OPTIMIZER_HOST, "/img-optimizer/v1/img?").concat(params.join("&"));
+    },
+};
+var PlasmicLink = React.forwardRef(function PlasmicLink(props, ref) {
+    var _a;
+    // The usePlasmicLinkMaybe function may be undefined, if host is not up-to-date
+    var Link = (_a = host.usePlasmicLinkMaybe === null || host.usePlasmicLinkMaybe === void 0 ? void 0 : host.usePlasmicLinkMaybe()) !== null && _a !== void 0 ? _a : PlasmicLinkInternal;
+    if (Link === PlasmicLink || Link === PlasmicLinkInternal) {
+        // Just in case, break the cycle
+        return React.createElement(PlasmicLinkInternal, __assign({}, props, { ref: ref }));
     }
-    else if (isReactNode(x)) {
-        // If ReactNode, then assume this is the children
-        return {
-            type: "default",
-            props: {
-                children: x,
-            },
-        };
+    else {
+        // Don't pass component/platform props to non-PlasmicLinkInternal
+        return React.createElement(Link, __assign({}, omit(props, "component", "platform"), { ref: ref }));
     }
-    else if (typeof x === "object") {
-        // If any of the overrideKeys is a key of this object, then assume
-        // this is a full Override
-        if ("as" in x) {
-            return __assign(__assign({}, x), { props: x.props || {}, type: "as" });
+});
+var PlasmicLinkInternal = React.forwardRef(function PlasmicLinkInternal(props, ref) {
+    var _a;
+    // 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",
+        ];
+        // If this is a fragment identifier link, then we set
+        // scroll={false} so that smooth scrolling works
+        var isFragment = (_a = props.href) === null || _a === void 0 ? void 0 : _a.startsWith("#");
+        return React.createElement(props.component, __assign(__assign({ scroll: !isFragment }, pick.apply(void 0, __spreadArray([props], __read(nextjsProps), false))), { legacyBehavior: true }), React.createElement("a", __assign({}, omit.apply(void 0, __spreadArray([props, "component", "platform"], __read(nextjsProps), false)), { ref: ref })));
+    }
+    if (props.platform === "gatsby" && isInternalHref(props.href)) {
+        return React.createElement(props.component, __assign(__assign({}, omit(props, "component", "platform", "href")), { to: props.href, ref: ref }));
+    }
+    if (props.platform === "tanstack" && isInternalHref(props.href)) {
+        return React.createElement(props.component, __assign(__assign({}, omit(props, "component", "platform", "href")), { to: props.href, ref: ref }));
+    }
+    return React.createElement("a", __assign({}, omit(props, "component", "platform"), { ref: ref }));
+});
+function isInternalHref(href) {
+    return /^\/(?!\/)/.test(href);
+}
+// Make the refactor to host backwards compatible for loader
+var PlasmicTranslatorContext = host.PlasmicTranslatorContext !== null && host.PlasmicTranslatorContext !== void 0 ? host.PlasmicTranslatorContext : React.createContext(undefined);
+var usePlasmicTranslator = host.usePlasmicTranslator !== null && host.usePlasmicTranslator !== void 0 ? host.usePlasmicTranslator : (function () {
+    var _t = React.useContext(PlasmicTranslatorContext);
+    var translator = _t
+        ? typeof _t === "function"
+            ? _t
+            : _t.translator
+        : undefined;
+    return translator;
+});
+function genTranslatableString(elt, opts) {
+    var components = {};
+    var componentsCount = 0;
+    var getText = function (node) {
+        var _a;
+        if (!node) {
+            return "";
         }
-        else if ("render" in x) {
-            return __assign(__assign({}, x), { type: "render" });
+        if (typeof node === "number" ||
+            typeof node === "boolean" ||
+            typeof node === "string") {
+            return node.toString();
         }
-        else if ("props" in x) {
-            return __assign(__assign({}, x), { props: x.props || {}, type: "default" });
+        if (typeof node !== "object") {
+            return "";
         }
-        else if (isSubset(Object.keys(x), ["wrap", "wrapChildren"])) {
-            // Only twiddling functions present, so assume no props overrides
-            // (otherwise we'd assume these were props).
-            return __assign(__assign({}, x), { props: {}, type: "default" });
+        if (Array.isArray(node) || isIterable(node)) {
+            return Array.from(node)
+                .map(function (child) { return getText(child); })
+                .filter(function (child) { return !!child; })
+                .join("");
         }
-        // Else, assume this is just a props object.
-        return {
-            type: "default",
-            props: x,
-        };
-    }
-    else if (typeof x === "function") {
-        return {
-            type: "render",
-            render: x,
-        };
+        var nodeChildren = (hasKey(node, "props") &&
+            hasKey(node.props, "children") &&
+            node.props.children) ||
+            (hasKey(node, "children") && node.children) ||
+            [];
+        var contents = "".concat(React.Children.toArray(nodeChildren)
+            .map(function (child) { return getText(child); })
+            .filter(function (child) { return !!child; })
+            .join(""));
+        if (React.isValidElement(node) && node.type === React.Fragment) {
+            return contents;
+        }
+        var prefix = (_a = opts === null || opts === void 0 ? void 0 : opts.tagPrefix) !== null && _a !== void 0 ? _a : "";
+        var componentId = "".concat(prefix).concat(componentsCount + 1);
+        componentsCount++;
+        components[componentId] = React.isValidElement(node)
+            ? React.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.useContext(PlasmicTranslatorContext);
+    var translator = _t
+        ? typeof _t === "function"
+            ? _t
+            : _t.translator
+        : undefined;
+    if (!translator) {
+        warnNoTranslationFunctionAtMostOnce();
+        return children;
     }
-    throw new Error("Unexpected override: ".concat(x));
+    var _b = genTranslatableString(children, {
+        tagPrefix: typeof _t === "object" ? _t.tagPrefix : undefined,
+    }), str = _b.str, components = _b.components, componentsCount = _b.componentsCount;
+    return translator(transKey !== null && transKey !== void 0 ? transKey : str, componentsCount > 0 ? { components: components } : undefined);
 }
-function mergeVariants(v1, v2) {
-    if (!v1 || !v2) {
-        return v1 || v2 || {};
+var hasWarned = false;
+function warnNoTranslationFunctionAtMostOnce() {
+    if (!hasWarned) {
+        console.warn("Using Plasmic Translation but no translation function has been provided");
+        hasWarned = true;
     }
-    return __assign(__assign({}, v1), v2);
 }
-function mergeVariantsWithStates(variants, $state, linkedStates) {
-    return __assign(__assign({}, variants), Object.fromEntries(linkedStates.map(function (_a) {
-        var variantGroup = _a.variantGroup, statePath = _a.statePath;
-        return [
-            variantGroup,
-            get($state, statePath),
-        ];
-    })));
+function hasKey(v, key) {
+    return typeof v === "object" && v !== null && key in v;
 }
-function mergeArgs(a1, a2) {
-    if (!a1 || !a2) {
-        return a1 || a2 || {};
-    }
-    return __assign(__assign({}, a1), a2);
+function isIterable(val) {
+    return val != null && typeof val[Symbol.iterator] === "function";
 }
-function mergeFlexOverrides(o1, o2) {
-    var e_2, _a;
-    if (!o2) {
-        return o1;
-    }
-    var keys = Array.from(new Set(__spreadArray(__spreadArray([], __read(Object.keys(o1)), false), __read(Object.keys(o2)), false)));
-    var merged = {};
-    try {
-        for (var keys_1 = __values(keys), keys_1_1 = keys_1.next(); !keys_1_1.done; keys_1_1 = keys_1.next()) {
-            var key = keys_1_1.value;
-            merged[key] = mergeFlexOverride(o1[key], o2[key]);
-        }
+function PlasmicSlot(props) {
+    return renderPlasmicSlot(props);
+}
+function renderPlasmicSlot(opts) {
+    var as = opts.as, defaultContents = opts.defaultContents, value = opts.value, rest = __rest(opts, ["as", "defaultContents", "value"]);
+    var content = value === undefined ? defaultContents : value;
+    if (typeof content !== "number" &&
+        (!content || (Array.isArray(content) && content.length === 0))) {
+        return null;
     }
-    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; }
+    // 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 \u03C1sw" }, maybeString));
     }
-    return merged;
+    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 content;
+    }
+    return React__namespace.createElement(as || "span", mergeProps({ className: "__wab_slot ρs" }, rest), content);
 }
-function mergeFlexOverride(fo1, fo2) {
-    var _a, _b;
-    if (!fo1) {
-        return fo2;
+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 (!fo2) {
-        return fo1;
+    if (typeof node === "string") {
+        return node;
     }
-    var o1 = deriveOverride(fo1);
-    var o2 = deriveOverride(fo2);
-    var wrap = chainSingleArgFuncs.apply(void 0, __spreadArray([], __read([o1.wrap, o2.wrap].filter(notNil)), false));
-    var wrapChildren = chainSingleArgFuncs.apply(void 0, __spreadArray([], __read([o1.wrapChildren, o2.wrapChildren].filter(notNil)), false));
-    // "render" type always takes precedence, but we still merge the props
-    var props = mergeOverrideProps((_a = o1.props) !== null && _a !== void 0 ? _a : {}, o2.props);
-    if (o2.type === "render") {
-        return {
-            render: o2.render,
-            props: props,
-            wrap: wrap,
-            wrapChildren: wrapChildren,
-        };
+    if (typeof node === "number") {
+        return "".concat(node);
     }
-    if (o1.type === "render") {
-        return {
-            render: o1.render,
-            props: props,
-            wrap: wrap,
-            wrapChildren: wrapChildren,
-        };
+    if (Array.isArray(node) && node.length === 1 && typeof node[0] === "string") {
+        return node[0];
     }
-    // "as" will take precedence
-    var as = (_b = (o2.type === "as" ? o2.as : undefined)) !== null && _b !== void 0 ? _b : (o1.type === "as" ? o1.as : undefined);
-    return __assign({ props: props, wrap: wrap, wrapChildren: wrapChildren }, (as ? { as: as } : {}));
+    return undefined;
 }
-function deriveRenderOpts(props, config) {
-    var _a;
-    var name = config.name, descendantNames = config.descendantNames, internalVariantPropNames = config.internalVariantPropNames, internalArgPropNames = config.internalArgPropNames;
-    var reservedPropNames = ["variants", "args", "overrides"];
-    var variants = mergeVariants(omit.apply(void 0, __spreadArray([pick.apply(void 0, __spreadArray([props], __read(internalVariantPropNames), false))], __read(reservedPropNames), false)), props.variants);
-    var args = mergeArgs(omit.apply(void 0, __spreadArray([pick.apply(void 0, __spreadArray([props], __read(internalArgPropNames), false))], __read(reservedPropNames), false)), props.args);
-    var overrides = mergeFlexOverrides(omit.apply(void 0, __spreadArray(__spreadArray(__spreadArray([pick.apply(void 0, __spreadArray([props], __read(descendantNames), false))], __read(internalArgPropNames), false), __read(internalVariantPropNames), false), __read(reservedPropNames), false)), props.overrides);
-    var leftoverProps = omit.apply(void 0, __spreadArray(__spreadArray(__spreadArray([props,
-        "variants",
-        "args",
-        "overrides"], __read(descendantNames), false), __read(internalVariantPropNames), false), __read(internalArgPropNames), false));
-    if (Object.keys(leftoverProps).length > 0) {
-        overrides = mergeFlexOverrides(overrides, (_a = {},
-            _a[name] = {
-                props: leftoverProps,
-            },
-            _a));
+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);
     }
-    return { variants: variants, args: args, overrides: overrides };
 }
-var isDefaultValue = function (val) { return val === "PLEASE_RENDER_INSIDE_PROVIDER"; };
-var seenDefaultVariants = {};
-function ensureGlobalVariants(globalVariantValues) {
-    Object.entries(globalVariantValues)
-        .filter(function (_a) {
-        var _b = __read(_a, 2); _b[0]; var value = _b[1];
-        return isDefaultValue(value);
-    })
-        .forEach(function (_a) {
-        var _b = __read(_a, 2), key = _b[0]; _b[1];
-        globalVariantValues[key] = undefined;
-        if (!seenDefaultVariants[key] && process.env.NODE_ENV === "development") {
-            seenDefaultVariants[key] = true;
-            var providerName = "".concat(key[0].toUpperCase()).concat(key.substring(1), "Context.Provider");
-            console.warn("Plasmic context value for global variant \"".concat(key, "\" was not provided; please use ").concat(providerName, " at the root of your React app. Learn More: https://www.plasmic.app/learn/other-assets/#global-variants"));
-        }
-    });
-    return globalVariantValues;
+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 ρfc" : "__wab_passthrough";
+    if (!children) {
+        return null;
+    }
+    else if (Array.isArray(children)) {
+        return React__namespace.createElement.apply(React__namespace, __spreadArray(["div", { className: className }], __read(children), false));
+    }
+    else {
+        return React__namespace.createElement("div", { className: className }, children);
+    }
 }
-var PlasmicHeadContext = React__namespace.createContext(undefined);
-function PlasmicHead(props) {
-    var Head = React__namespace.useContext(PlasmicHeadContext);
-    var headMetadata =
-    // Check if `HeadMetadataContext` is exported for backward compatibility
-    "HeadMetadataContext" in plasmicQuery__namespace
-        ? React__namespace.useContext(plasmicQuery__namespace.HeadMetadataContext)
-        : undefined;
-    if (headMetadata) {
-        // If we have the Head metadata object specified, mutate it so to ensure it
-        // stores the data that should go in the <head>.
-        if (props.image) {
-            headMetadata.image = props.image;
-        }
-        if (props.title) {
-            headMetadata.title = props.title;
-        }
-        if (props.description) {
-            headMetadata.description = props.description;
+function createPlasmicElement(override, defaultRoot, defaultProps, wrapChildrenInFlex) {
+    if (!override ||
+        (typeof override === "object" && 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;
         }
-        if (props.canonical) {
-            headMetadata.canonical = props.canonical;
+        else {
+            root = override2.as;
         }
     }
-    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;
+    var children = props.children;
+    if (override2.wrapChildren) {
+        children = override2.wrapChildren(ensureNotArray(children));
     }
-    // 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", rel: "canonical", href: props.canonical }))));
+    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;
 }
-var plasmicHeadMeta = {
-    name: "hostless-plasmic-head",
-    displayName: "Page Metadata Override",
-    description: "Set page metadata (HTML <head />) to dynamic values.",
-    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 = __rest(props, ["PlasmicIconType"]);
-    return React__namespace.createElement(PlasmicIconType, __assign({}, rest));
-}
-/**
- * Responsive `<img/>` replacement, based on `next/image`
- */
-var IMG_OPTIMIZER_HOST = "https://img.plasmic.app";
-// 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 = __spreadArray(__spreadArray([], __read(IMG_SIZES), false), __read(DEVICE_SIZES), false);
-var PlasmicImg = React.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 = __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 = !src
-        ? { fullWidth: undefined, fullHeight: undefined, aspectRatio: undefined }
-        : typeof src === "string"
-            ? getImageSizeData(getPixelLength(props.width), getPixelLength(props.height))
-            : 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.createElement("img", __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 =
-    // if btoa exists, use btoa, as it works in browser and in
-    // cloudflare edge workers.  For node, use Buffer.from().
-    typeof globalThis.btoa === "function"
-        ? globalThis.btoa(spacerSvg)
-        : Buffer.from(spacerSvg).toString("base64");
-    var wrapperStyle = __assign({}, (style || {}));
-    var spacerStyle = __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.createElement("div", { className: classNames$1(className, "__wab_img-wrapper"), ref: outerRef, style: wrapperStyle },
-        React.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.createElement("picture", { className: "__wab_picture" },
-        imageLoader && imageLoader.supportsUrl(src) && (React.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.createElement("img", __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: __assign(__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) {
+// 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 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 children = [];
+    for (var _i = 2; _i < arguments.length; _i++) {
+        children[_i - 2] = arguments[_i];
     }
-    var num = res[1];
-    var units = res[2];
-    return { num: +num, units: units };
-}
-function getImageSizeData(width, height) {
-    var aspectRatio = width && height ? width / height : undefined;
-    return {
-        fullWidth: width,
-        fullHeight: height,
-        aspectRatio: aspectRatio && isFinite(aspectRatio) ? aspectRatio : undefined,
-    };
-}
-function getImageLoader(loader) {
-    if (loader == null) {
-        return undefined;
+    if (props == null) {
+        props = {};
     }
-    else if (loader === "plasmic") {
-        return PLASMIC_IMAGE_LOADER;
+    var name = props["data-plasmic-name"];
+    var isRoot = props["data-plasmic-root"];
+    var forNodeName = props["data-plasmic-for-node"];
+    delete props["data-plasmic-name"];
+    delete props["data-plasmic-root"];
+    delete props["data-plasmic-for-node"];
+    var element = createPlasmicElementFromJsx.apply(void 0, __spreadArray([defaultElement,
+        props], __read(children), false));
+    if (name) {
+        seenElements.set(name, element);
     }
-    else {
-        return loader;
+    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 isInternalKey(src) {
-    return /^([a-f0-9]{32})\..{1,16}$/i.test(src);
-}
-var PLASMIC_IMAGE_LOADER = {
-    supportsUrl: function (src) {
-        return (src.startsWith("http") || isInternalKey(src)) && !isSvg(src);
-    },
-    transformUrl: function (opts) {
-        var _a;
-        var params = [
-            "src=".concat(encodeURIComponent(opts.src)),
-            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(IMG_OPTIMIZER_HOST, "/img-optimizer/v1/img?").concat(params.join("&"));
-    },
-};
-var PlasmicLink = React.forwardRef(function PlasmicLink(props, ref) {
+function createPlasmicElementFromJsx(defaultElement, props) {
     var _a;
-    // The usePlasmicLinkMaybe function may be undefined, if host is not up-to-date
-    var Link = (_a = host.usePlasmicLinkMaybe === null || host.usePlasmicLinkMaybe === void 0 ? void 0 : host.usePlasmicLinkMaybe()) !== null && _a !== void 0 ? _a : PlasmicLinkInternal;
-    if (Link === PlasmicLink || Link === PlasmicLinkInternal) {
-        // Just in case, break the cycle
-        return React.createElement(PlasmicLinkInternal, __assign({}, props, { ref: ref }));
+    var children = [];
+    for (var _i = 2; _i < arguments.length; _i++) {
+        children[_i - 2] = arguments[_i];
     }
-    else {
-        // Don't pass component/platform props to non-PlasmicLinkInternal
-        return React.createElement(Link, __assign({}, omit(props, "component", "platform"), { ref: ref }));
+    var override = props["data-plasmic-override"];
+    var wrapFlexChild = props["data-plasmic-wrap-flex-child"];
+    var triggerProps = ((_a = props["data-plasmic-trigger-props"]) !== null && _a !== void 0 ? _a : []);
+    delete props["data-plasmic-override"];
+    delete props["data-plasmic-wrap-flex-child"];
+    delete props["data-plasmic-trigger-props"];
+    return createPlasmicElement(override, defaultElement, mergeProps.apply(void 0, __spreadArray([props,
+        children.length === 0
+            ? {}
+            : { children: children.length === 1 ? children[0] : children }], __read(triggerProps), false)), wrapFlexChild);
+}
+function makeFragment() {
+    var children = [];
+    for (var _i = 0; _i < arguments.length; _i++) {
+        children[_i] = arguments[_i];
     }
-});
-var PlasmicLinkInternal = React.forwardRef(function PlasmicLinkInternal(props, ref) {
-    var _a;
-    // 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",
-        ];
-        // If this is a fragment identifier link, then we set
-        // scroll={false} so that smooth scrolling works
-        var isFragment = (_a = props.href) === null || _a === void 0 ? void 0 : _a.startsWith("#");
-        return React.createElement(props.component, __assign(__assign({ scroll: !isFragment }, pick.apply(void 0, __spreadArray([props], __read(nextjsProps), false))), { legacyBehavior: true }), React.createElement("a", __assign({}, omit.apply(void 0, __spreadArray([props, "component", "platform"], __read(nextjsProps), false)), { ref: ref })));
+    return React__namespace.createElement.apply(React__namespace, __spreadArray([React__namespace.Fragment, {}], __read(children), false));
+}
+var UNSET = Symbol("UNSET");
+function mergeOverrideProps(defaults, overrides) {
+    var e_1, _a;
+    if (!overrides) {
+        return defaults;
     }
-    if (props.platform === "gatsby" && isInternalHref(props.href)) {
-        return React.createElement(props.component, __assign(__assign({}, omit(props, "component", "platform", "href")), { to: props.href, ref: ref }));
+    var result = __assign({}, defaults);
+    try {
+        for (var _b = __values(Object.keys(overrides)), _c = _b.next(); !_c.done; _c = _b.next()) {
+            var key = _c.value;
+            var defaultVal = defaults[key];
+            var overrideVal = overrides[key];
+            if (overrideVal === UNSET) {
+                delete result[key];
+            }
+            else {
+                // We use the NONE sentinel if the overrideVal is nil, and is not one of the
+                // props that we merge by default -- which are className, style, and
+                // event handlers.  This means for all other "normal" props -- like children,
+                // title, etc -- a nil value will unset the default.
+                if (overrideVal == null &&
+                    key !== "className" &&
+                    key !== "style" &&
+                    !(key.startsWith("on") && typeof defaultVal === "function")) {
+                    overrideVal = NONE;
+                }
+                result[key] = mergePropVals(key, defaultVal, overrideVal);
+            }
+        }
     }
-    if (props.platform === "tanstack" && isInternalHref(props.href)) {
-        return React.createElement(props.component, __assign(__assign({}, omit(props, "component", "platform", "href")), { to: props.href, ref: ref }));
+    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 React.createElement("a", __assign({}, omit(props, "component", "platform"), { ref: ref }));
-});
-function isInternalHref(href) {
-    return /^\/(?!\/)/.test(href);
+    return result;
 }
-// Make the refactor to host backwards compatible for loader
-var PlasmicTranslatorContext = host.PlasmicTranslatorContext !== null && host.PlasmicTranslatorContext !== void 0 ? host.PlasmicTranslatorContext : React.createContext(undefined);
-var usePlasmicTranslator = host.usePlasmicTranslator !== null && host.usePlasmicTranslator !== void 0 ? host.usePlasmicTranslator : (function () {
-    var _t = React.useContext(PlasmicTranslatorContext);
-    var translator = _t
-        ? typeof _t === "function"
-            ? _t
-            : _t.translator
+function wrapWithClassName(element, className) {
+    var key = React__namespace.isValidElement(element)
+        ? element.key || undefined
         : undefined;
-    return translator;
-});
-function genTranslatableString(elt, opts) {
-    var components = {};
-    var componentsCount = 0;
-    var getText = function (node) {
-        var _a;
-        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.Children.toArray(nodeChildren)
-            .map(function (child) { return getText(child); })
-            .filter(function (child) { return !!child; })
-            .join(""));
-        if (React.isValidElement(node) && node.type === React.Fragment) {
-            return contents;
-        }
-        var prefix = (_a = opts === null || opts === void 0 ? void 0 : opts.tagPrefix) !== null && _a !== void 0 ? _a : "";
-        var componentId = "".concat(prefix).concat(componentsCount + 1);
-        componentsCount++;
-        components[componentId] = React.isValidElement(node)
-            ? React.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,
-    };
+    return React__namespace.createElement("div", {
+        key: key,
+        className: className,
+        style: {
+            display: "grid",
+        },
+    }, element);
 }
-function Trans(_a) {
-    var transKey = _a.transKey, children = _a.children;
-    var _t = React.useContext(PlasmicTranslatorContext);
-    var translator = _t
-        ? typeof _t === "function"
-            ? _t
-            : _t.translator
-        : undefined;
-    if (!translator) {
-        warnNoTranslationFunctionAtMostOnce();
-        return children;
+function deriveOverride(x) {
+    if (!x) {
+        // undefined Binding is an empty Binding
+        return {
+            type: "default",
+            props: {},
+        };
+    }
+    else if (isReactNode(x)) {
+        // If ReactNode, then assume this is the children
+        return {
+            type: "default",
+            props: {
+                children: x,
+            },
+        };
+    }
+    else if (typeof x === "object") {
+        // If any of the overrideKeys is a key of this object, then assume
+        // this is a full Override
+        if ("as" in x) {
+            return __assign(__assign({}, x), { props: x.props || {}, type: "as" });
+        }
+        else if ("render" in x) {
+            return __assign(__assign({}, x), { type: "render" });
+        }
+        else if ("props" in x) {
+            return __assign(__assign({}, x), { props: x.props || {}, type: "default" });
+        }
+        else if (isSubset(Object.keys(x), ["wrap", "wrapChildren"])) {
+            // Only twiddling functions present, so assume no props overrides
+            // (otherwise we'd assume these were props).
+            return __assign(__assign({}, x), { props: {}, type: "default" });
+        }
+        // Else, assume this is just a props object.
+        return {
+            type: "default",
+            props: x,
+        };
     }
-    var _b = genTranslatableString(children, {
-        tagPrefix: typeof _t === "object" ? _t.tagPrefix : undefined,
-    }), str = _b.str, components = _b.components, componentsCount = _b.componentsCount;
-    return translator(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;
+    else if (typeof x === "function") {
+        return {
+            type: "render",
+            render: x,
+        };
     }
+    throw new Error("Unexpected override: ".concat(x));
 }
-function hasKey(v, key) {
-    return typeof v === "object" && v !== null && key in v;
+function mergeVariants(v1, v2) {
+    if (!v1 || !v2) {
+        return v1 || v2 || {};
+    }
+    return __assign(__assign({}, v1), v2);
 }
-function isIterable(val) {
-    return val != null && typeof val[Symbol.iterator] === "function";
+function mergeVariantsWithStates(variants, $state, linkedStates) {
+    return __assign(__assign({}, variants), Object.fromEntries(linkedStates.map(function (_a) {
+        var variantGroup = _a.variantGroup, statePath = _a.statePath;
+        return [
+            variantGroup,
+            get($state, statePath),
+        ];
+    })));
 }
-function PlasmicSlot(props) {
-    return renderPlasmicSlot(props);
+function mergeArgs(a1, a2) {
+    if (!a1 || !a2) {
+        return a1 || a2 || {};
+    }
+    return __assign(__assign({}, a1), a2);
 }
-function renderPlasmicSlot(opts) {
-    var as = opts.as, defaultContents = opts.defaultContents, value = opts.value, rest = __rest(opts, ["as", "defaultContents", "value"]);
-    var content = value === undefined ? defaultContents : value;
-    if (typeof content !== "number" &&
-        (!content || (Array.isArray(content) && content.length === 0))) {
-        return null;
+function mergeFlexOverrides(o1, o2) {
+    var e_2, _a;
+    if (!o2) {
+        return o1;
     }
-    // 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 \u03C1sw" }, maybeString));
+    var keys = Array.from(new Set(__spreadArray(__spreadArray([], __read(Object.keys(o1)), false), __read(Object.keys(o2)), false)));
+    var merged = {};
+    try {
+        for (var keys_1 = __values(keys), keys_1_1 = keys_1.next(); !keys_1_1.done; keys_1_1 = keys_1.next()) {
+            var key = keys_1_1.value;
+            merged[key] = mergeFlexOverride(o1[key], o2[key]);
+        }
     }
-    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 content;
+    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 React__namespace.createElement(as || "span", mergeProps({ className: "__wab_slot ρs" }, rest), content);
+    return merged;
 }
-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;
-        }
+function mergeFlexOverride(fo1, fo2) {
+    var _a, _b;
+    if (!fo1) {
+        return fo2;
     }
-    if (typeof node === "string") {
-        return node;
+    if (!fo2) {
+        return fo1;
     }
-    if (typeof node === "number") {
-        return "".concat(node);
+    var o1 = deriveOverride(fo1);
+    var o2 = deriveOverride(fo2);
+    var wrap = chainSingleArgFuncs.apply(void 0, __spreadArray([], __read([o1.wrap, o2.wrap].filter(notNil)), false));
+    var wrapChildren = chainSingleArgFuncs.apply(void 0, __spreadArray([], __read([o1.wrapChildren, o2.wrapChildren].filter(notNil)), false));
+    // "render" type always takes precedence, but we still merge the props
+    var props = mergeOverrideProps((_a = o1.props) !== null && _a !== void 0 ? _a : {}, o2.props);
+    if (o2.type === "render") {
+        return {
+            render: o2.render,
+            props: props,
+            wrap: wrap,
+            wrapChildren: wrapChildren,
+        };
     }
-    if (Array.isArray(node) && node.length === 1 && typeof node[0] === "string") {
-        return node[0];
+    if (o1.type === "render") {
+        return {
+            render: o1.render,
+            props: props,
+            wrap: wrap,
+            wrapChildren: wrapChildren,
+        };
     }
-    return undefined;
+    // "as" will take precedence
+    var as = (_b = (o2.type === "as" ? o2.as : undefined)) !== null && _b !== void 0 ? _b : (o1.type === "as" ? o1.as : undefined);
+    return __assign({ props: props, wrap: wrap, wrapChildren: wrapChildren }, (as ? { as: as } : {}));
+}
+function deriveRenderOpts(props, config) {
+    var _a;
+    var name = config.name, descendantNames = config.descendantNames, internalVariantPropNames = config.internalVariantPropNames, internalArgPropNames = config.internalArgPropNames;
+    var reservedPropNames = ["variants", "args", "overrides"];
+    var variants = mergeVariants(omit.apply(void 0, __spreadArray([pick.apply(void 0, __spreadArray([props], __read(internalVariantPropNames), false))], __read(reservedPropNames), false)), props.variants);
+    var args = mergeArgs(omit.apply(void 0, __spreadArray([pick.apply(void 0, __spreadArray([props], __read(internalArgPropNames), false))], __read(reservedPropNames), false)), props.args);
+    var overrides = mergeFlexOverrides(omit.apply(void 0, __spreadArray(__spreadArray(__spreadArray([pick.apply(void 0, __spreadArray([props], __read(descendantNames), false))], __read(internalArgPropNames), false), __read(internalVariantPropNames), false), __read(reservedPropNames), false)), props.overrides);
+    var leftoverProps = omit.apply(void 0, __spreadArray(__spreadArray(__spreadArray([props,
+        "variants",
+        "args",
+        "overrides"], __read(descendantNames), false), __read(internalVariantPropNames), false), __read(internalArgPropNames), false));
+    if (Object.keys(leftoverProps).length > 0) {
+        overrides = mergeFlexOverrides(overrides, (_a = {},
+            _a[name] = {
+                props: leftoverProps,
+            },
+            _a));
+    }
+    return { variants: variants, args: args, overrides: overrides };
+}
+function renderStack(as, props, hasGap, ref) {
+    var children = props.children, rest = __rest(props, ["children"]);
+    var wrappedChildren = wrapFlexContainerChildren(children, hasGap !== null && hasGap !== void 0 ? hasGap : false);
+    return createElementWithChildren(as, __assign({ ref: ref }, rest), wrappedChildren);
+}
+function FlexStack_(props, outerRef) {
+    var as = props.as, hasGap = props.hasGap, rest = __rest(props, ["as", "hasGap"]);
+    return renderStack(as !== null && as !== void 0 ? as : "div", rest, hasGap, outerRef);
+}
+var FlexStack = React__namespace.forwardRef(FlexStack_);
+var makeStackImpl = function (as) {
+    return React__namespace.forwardRef(function (props, ref) {
+        var hasGap = props.hasGap, rest = __rest(props, ["hasGap"]);
+        return renderStack(as, rest, hasGap, ref);
+    });
+};
+var Stack = Object.assign(FlexStack, {
+    div: makeStackImpl("div"),
+    a: makeStackImpl("a"),
+    button: makeStackImpl("button"),
+    h1: makeStackImpl("h1"),
+    h2: makeStackImpl("h2"),
+    h3: makeStackImpl("h3"),
+    h4: makeStackImpl("h4"),
+    h5: makeStackImpl("h5"),
+    h6: makeStackImpl("h6"),
+    label: makeStackImpl("label"),
+    form: makeStackImpl("form"),
+    section: makeStackImpl("section"),
+    head: makeStackImpl("head"),
+    main: makeStackImpl("main"),
+    nav: makeStackImpl("nav"),
+});
+var isDefaultValue = function (val) {
+    return val === "PLEASE_RENDER_INSIDE_PROVIDER";
+};
+var seenDefaultVariants = {};
+/**
+ * Usage:
+ * ```
+ * // plasmic.ts
+ * import { usePlatform } from "./PlasmicGlobalVariant__Platform";
+ * import { useTheme } from "./PlasmicGlobalVariant__Theme";
+ *
+ * export const useGlobalVariants = createUseGlobalVariants({
+ *   platform: usePlatform,
+ *   theme: useTheme,
+ * });
+ *
+ * // PlasmicComponent.tsx
+ * import { useGlobalVariants } from "./plasmic_project";
+ *
+ * export function PlasmicComponent() {
+ *   // ...
+ *   const globalVariants = useGlobalVariants();
+ *   // ...
+ * }
+ * ```
+ */
+function createUseGlobalVariants(globalVariantHooks) {
+    return function () {
+        return ensureGlobalVariants(Object.fromEntries(Object.entries(globalVariantHooks).map(function (_a) {
+            var _b = __read(_a, 2), globalVariant = _b[0], useHook = _b[1];
+            return [globalVariant, useHook()];
+        })));
+    };
+}
+/**
+ * @deprecated - new generated code should use `useGlobalVariants` instead
+ *
+ * Usage:
+ * ```
+ * // PlasmicComponent.tsx
+ * import { useTheme } from "./PlasmicGlobalVariant__Theme";
+ * import { usePlatform } from "./PlasmicGlobalVariant__Platform";
+ *
+ * export function PlasmicComponent() {
+ *   // ...
+ *   const globalVariants = ensureGlobalVariants({
+ *     platform: usePlatform(),
+ *     theme: useTheme(),
+ *   });
+ *   // ...
+ * }
+ * ```
+ */
+function ensureGlobalVariants(globalVariants) {
+    Object.entries(globalVariants)
+        .filter(function (_a) {
+        var _b = __read(_a, 2); _b[0]; var value = _b[1];
+        return isDefaultValue(value);
+    })
+        .forEach(function (_a) {
+        var _b = __read(_a, 2), key = _b[0]; _b[1];
+        globalVariants[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 globalVariants;
 }
 var listeners = [];
@@ -1784,6 +1835,115 @@ function MaybeWrap(props) {
     return props.cond ? props.wrapper(props.children) : props.children;
 }
+/**
+ * Context that enables a project's style tokens to be propagated across projects.
+ *
+ * The value is an array of class names, including the class name for the base
+ * variant and active global variants. The class names should be applied to all
+ * Plasmic content.
+ */
+var StyleTokensContext = React.createContext(undefined);
+/**
+ * Returns style tokens. If the context is not available, falls back to the
+ * current project's styles.
+ *
+ * Usage:
+ * ```
+ * // PlasmicStyleTokensProvider.ts
+ * export const useStyleTokens = createUseStyleTokens(
+ *   projectStyleTokenData,
+ *   useGlobalVariants,
+ * );
+ *
+ * // PlasmicPage.tsx
+ * import { useStyleTokens } from "./plasmic_project";
+ *
+ * export function PlasmicPage() {
+ *   const styleTokensClassNames = useStyleTokens();
+ *   return (
+ *     <div className={classNames(
+ *         projectcss.all,
+ *         projectcss.root_reset,
+ *         projectcss.plasmic_default_styles,
+ *         projectcss.plasmic_mixins,
+ *         styleTokensClassNames,
+ *     )}>
+ *       <h1 className={projectcss.all}>
+ *         Hello, world!
+ *       </h1>
+ *     </div>
+ *   );
+ * }
+ * ```
+ */
+function createUseStyleTokens(tokenData, useGlobalVariants) {
+    return function () {
+        var overrides = React.useContext(StyleTokensContext);
+        var globalVariants = useGlobalVariants();
+        return React.useMemo(function () {
+            if (overrides && overrides.length > 0) {
+                return overrides;
+            }
+            else {
+                return activeTokensClassNames(tokenData, globalVariants);
+            }
+        }, [overrides, globalVariants, tokenData]);
+    };
+}
+/**
+ * Creates a StyleTokens context provider for a given project, which includes
+ * its tokens, overrides, and all tokens from its dependencies.
+ *
+ * Usage:
+ * ```
+ * // PlasmicStyleTokensProvider.ts
+ * export const StyleTokensProvider = createStyleTokensProvider(
+ *   projectStyleTokenData,
+ *   useGlobalVariants,
+ * );
+ *
+ * // Page.tsx
+ * import { StyleTokensProvider } from "./plasmic_project";
+ *
+ * export default function Page() {
+ *   return (
+ *     <PlatformContext.Provider value="osx">
+ *       <ThemeContext.Provider value="dark">
+ *         <StyleTokensProvider>
+ *           <PlasmicPage />
+ *         </StyleTokensProvider>
+ *       </ThemeContext.Provider>
+ *     </PlatformContext.Provider>
+ *   );
+ * }
+ * ```
+ */
+function createStyleTokensProvider(tokenData, useGlobalVariants) {
+    return function (props) {
+        var globalVariants = useGlobalVariants();
+        var tokens = React.useMemo(function () {
+            return activeTokensClassNames(tokenData, globalVariants);
+        }, [globalVariants, tokenData]);
+        return (React.createElement(StyleTokensContext.Provider, { value: tokens }, props.children));
+    };
+}
+/**
+ * Gets the class names for the base tokens and the varianted tokens for active
+ * global variants.
+ */
+function activeTokensClassNames(tokenData, globalVariants) {
+    var varianted = tokenData.varianted
+        .filter(function (_a) {
+        var groupName = _a.groupName, variant = _a.variant;
+        return hasVariant(globalVariants, groupName, variant);
+    })
+        .map(function (_a) {
+        var className = _a.className;
+        return className;
+    });
+    return __spreadArray([tokenData.base], __read(varianted), false);
+}
 function useFocused(opts) {
     var _a = focus.useFocusRing({
         within: false,
@@ -4119,7 +4279,10 @@ exports.Trans = Trans;
 exports.TriggeredOverlayContext = TriggeredOverlayContext;
 exports.classNames = classNames;
 exports.createPlasmicElementProxy = createPlasmicElementProxy;
+exports.createStyleTokensProvider = createStyleTokensProvider;
+exports.createUseGlobalVariants = createUseGlobalVariants;
 exports.createUseScreenVariants = createUseScreenVariants;
+exports.createUseStyleTokens = createUseStyleTokens;
 exports.deriveRenderOpts = deriveRenderOpts;
 exports.ensureGlobalVariants = ensureGlobalVariants;
 exports.genTranslatableString = genTranslatableString;