@plasmicapp/react-web 0.2.201 → 0.2.203

package/skinny/dist/render/PlasmicImg/index.js

@@ -1,303 +1,303 @@
-import { d as __spreadArray, e as __read, c as __rest, b as __assign, p as pick } from '../../common-9d6d348d.js';
+import { d as __spreadArray, e as __read, c as __rest, b as __assign, p as pick } from '../../common-ed411407.js';
 import classNames from 'classnames';
 import React__default from 'react';
-import { d as mergeRefs } from '../../react-utils-ee4e03ba.js';
+import { d as mergeRefs } from '../../react-utils-5ff031c2.js';
 
-/**
- * Responsive `<img/>` replacement, based on `next/image`
- */
-// Default image sizes to snap to
-// TODO: make this configurable?
-var IMG_SIZES = [16, 32, 48, 64, 96, 128, 256, 384];
-var DEVICE_SIZES = [640, 750, 828, 1080, 1200, 1920, 2048, 3840];
-var ALL_SIZES = __spreadArray(__spreadArray([], __read(IMG_SIZES), false), __read(DEVICE_SIZES), false);
-var PlasmicImg = React__default.forwardRef(function PlasmicImg(props, outerRef) {
-    var src = props.src, className = props.className, displayWidth = props.displayWidth, displayHeight = props.displayHeight, displayMinWidth = props.displayMinWidth, displayMinHeight = props.displayMinHeight, displayMaxWidth = props.displayMaxWidth, displayMaxHeight = props.displayMaxHeight, quality = props.quality, loader = props.loader, imgRef = props.imgRef, style = props.style, loading = props.loading, rest = __rest(props, ["src", "className", "displayWidth", "displayHeight", "displayMinWidth", "displayMinHeight", "displayMaxWidth", "displayMaxHeight", "quality", "loader", "imgRef", "style", "loading"]);
-    var imgProps = Object.assign({}, rest, {
-        // Default loading to "lazy" if not specified (which is different from the
-        // html img, which defaults to eager!)
-        loading: loading !== null && loading !== void 0 ? loading : "lazy"
-    });
-    var _a = typeof src === "string" || !src
-        ? { fullWidth: undefined, fullHeight: undefined, aspectRatio: undefined }
-        : src, fullWidth = _a.fullWidth, fullHeight = _a.fullHeight, aspectRatio = _a.aspectRatio;
-    var srcStr = src
-        ? typeof src === "string"
-            ? src
-            : typeof src.src === "string"
-                ? src.src
-                : src.src.src
-        : "";
-    // Assume external image if either dimension is null and use usual <img>
-    if (fullHeight == null || fullWidth == null) {
-        return (React__default.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 = typeof window === "undefined"
-        ? Buffer.from(spacerSvg).toString("base64")
-        : window.btoa(spacerSvg);
-    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__default.createElement("div", { className: classNames(className, "__wab_img-wrapper"), ref: outerRef, style: wrapperStyle },
-        React__default.createElement("img", { alt: "", "aria-hidden": true, className: "__wab_img-spacer-svg", src: "data:image/svg+xml;base64,".concat(spacerSvgBase64), style: spacerStyle }),
-        makePicture({
-            imageLoader: imageLoader,
-            widthDescs: widthDescs,
-            sizes: sizes,
-            src: srcStr,
-            quality: quality,
-            ref: imgRef,
-            style: style ? pick(style, "objectFit", "objectPosition") : undefined,
-            imgProps: imgProps,
-            className: "__wab_img"
-        })));
-});
-function makePicture(opts) {
-    // If imageLoader is undefined, then this renders to just a normal
-    // <img />.  Else it will render to a <picture> with a <source> for
-    // webp, and srcSet/sizes set according to width requirements.
-    var imageLoader = opts.imageLoader, widthDescs = opts.widthDescs, src = opts.src, quality = opts.quality, style = opts.style, className = opts.className, sizes = opts.sizes, imgProps = opts.imgProps, ref = opts.ref;
-    return (React__default.createElement("picture", { className: "__wab_picture" },
-        imageLoader && imageLoader.supportsUrl(src) && (React__default.createElement("source", { type: "image/webp", srcSet: widthDescs
-                .map(function (wd) {
-                return "".concat(imageLoader.transformUrl({
-                    src: src,
-                    quality: quality,
-                    width: wd.width,
-                    format: "webp"
-                }), " ").concat(wd.desc);
-            })
-                .join(", ") })),
-        React__default.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) {
-    var _a;
-    var nextBiggerIndex = (_a = ALL_SIZES.findIndex(function (w) { return w >= width; })) !== null && _a !== void 0 ? _a : ALL_SIZES.length - 1;
-    var nextBigger = ALL_SIZES[nextBiggerIndex];
-    if (nextBigger >= fullWidth) {
-        // If the requested width is larger than the fullWidth,
-        // we just use the original width instead. It's impossible
-        // to make an image bigger than fullWidth!
-        return undefined;
-    }
-    else if (nextBiggerIndex + 1 < ALL_SIZES.length &&
-        fullWidth <= ALL_SIZES[nextBiggerIndex + 1]) {
-        // If the fullWidth is just between nextBigger and the one after that,
-        // then also might as well just use the original size (so, width is 30,
-        // nextBigger is 32, then we just use the original as long as fullWidth is
-        // less than 48)
-        return undefined;
-    }
-    return nextBigger;
-}
-/**
- * Computes the appropriate srcSet and sizes to use
- */
-function getWidths(width, fullWidth, extra) {
-    var minWidth = extra === null || extra === void 0 ? void 0 : extra.minWidth;
-    var pixelWidth = getPixelLength(width);
-    var pixelMinWidth = getPixelLength(minWidth);
-    if (pixelWidth != null && (!minWidth || pixelMinWidth != null)) {
-        // If there's an exact width, then we just need to display it at 1x and 2x density
-        return {
-            widthDescs: [
-                {
-                    width: getClosestPresetSize(Math.max(pixelWidth, pixelMinWidth !== null && pixelMinWidth !== void 0 ? pixelMinWidth : 0), fullWidth),
-                    desc: "1x"
-                },
-                {
-                    width: getClosestPresetSize(Math.max(pixelWidth, pixelMinWidth !== null && pixelMinWidth !== void 0 ? pixelMinWidth : 0) * 2, fullWidth),
-                    desc: "2x"
-                },
-            ],
-            sizes: undefined
-        };
-    }
-    // Otherwise we don't know what sizes we'll end up, so we just cap it at
-    // device width.  TODO: do better!
-    var usefulSizes = DEVICE_SIZES.filter(function (size) { return !fullWidth || size < fullWidth; });
-    if (!!fullWidth && usefulSizes.length === 0) {
-        // image fullWidth is smaller than all device sizes.  So all we can do
-        // is offer 1x
-        return {
-            widthDescs: [
-                {
-                    width: getClosestPresetSize(fullWidth, fullWidth),
-                    desc: "1x"
-                },
-            ],
-            sizes: undefined
-        };
-    }
-    return {
-        widthDescs: usefulSizes.map(function (size) { return ({
-            width: getClosestPresetSize(size, fullWidth),
-            // If this is the last (buggest) useful width, but it is
-            // still within the bounds set by DEVICE_SIZES, then just
-            // use the original, unresized image.  This means if we match
-            // the largest size, we use unresized and best quality image.
-            // We only do this, though, if fullWidth is "reasonable" --
-            // smaller than the largest size we would consider.
-            // i === usefulSizes.length - 1 &&
-            // fullWidth < DEVICE_SIZES[DEVICE_SIZES.length - 1]
-            //   ? undefined
-            //   : size,
-            desc: "".concat(size, "w")
-        }); }),
-        sizes: "100vw"
-    };
-}
-function getPixelLength(length) {
-    if (length == null || length == "") {
-        return undefined;
-    }
-    if (typeof length === "number") {
-        return length;
-    }
-    var parsed = parseNumeric(length);
-    if (parsed && (!parsed.units || parsed.units === "px")) {
-        return parsed.num;
-    }
-    return undefined;
-}
-function parseNumeric(val) {
-    // Parse strings like "30", "30px", "30%", "30px /* blah blah */"
-    var res = val.match(/^\s*(-?(?:\d+\.\d*|\d*\.\d+|\d+))\s*([a-z]*|%)\s*(?:\/\*.*)?$/i);
-    if (res == null) {
-        return undefined;
-    }
-    var num = res[1];
-    var units = res[2];
-    return { num: +num, units: units };
-}
-function getImageLoader(loader) {
-    if (loader == null) {
-        return undefined;
-    }
-    else if (loader === "plasmic") {
-        return PLASMIC_IMAGE_LOADER;
-    }
-    else {
-        return loader;
-    }
-}
-var PLASMIC_IMAGE_LOADER = {
-    supportsUrl: function (src) {
-        return src.startsWith("https://img.plasmic.app") && !isSvg(src);
-    },
-    transformUrl: function (opts) {
-        var _a;
-        var params = [
-            opts.width ? "w=".concat(opts.width) : undefined,
-            "q=".concat((_a = opts.quality) !== null && _a !== void 0 ? _a : 75),
-            opts.format ? "f=".concat(opts.format) : undefined,
-        ].filter(function (x) { return !!x; });
-        return "".concat(opts.src, "?").concat(params.join("&"));
-    }
+/**
+ * Responsive `<img/>` replacement, based on `next/image`
+ */
+// Default image sizes to snap to
+// TODO: make this configurable?
+var IMG_SIZES = [16, 32, 48, 64, 96, 128, 256, 384];
+var DEVICE_SIZES = [640, 750, 828, 1080, 1200, 1920, 2048, 3840];
+var ALL_SIZES = __spreadArray(__spreadArray([], __read(IMG_SIZES), false), __read(DEVICE_SIZES), false);
+var PlasmicImg = React__default.forwardRef(function PlasmicImg(props, outerRef) {
+    var src = props.src, className = props.className, displayWidth = props.displayWidth, displayHeight = props.displayHeight, displayMinWidth = props.displayMinWidth, displayMinHeight = props.displayMinHeight, displayMaxWidth = props.displayMaxWidth, displayMaxHeight = props.displayMaxHeight, quality = props.quality, loader = props.loader, imgRef = props.imgRef, style = props.style, loading = props.loading, rest = __rest(props, ["src", "className", "displayWidth", "displayHeight", "displayMinWidth", "displayMinHeight", "displayMaxWidth", "displayMaxHeight", "quality", "loader", "imgRef", "style", "loading"]);
+    var imgProps = Object.assign({}, rest, {
+        // Default loading to "lazy" if not specified (which is different from the
+        // html img, which defaults to eager!)
+        loading: loading !== null && loading !== void 0 ? loading : "lazy",
+    });
+    var _a = typeof src === "string" || !src
+        ? { fullWidth: undefined, fullHeight: undefined, aspectRatio: undefined }
+        : src, fullWidth = _a.fullWidth, fullHeight = _a.fullHeight, aspectRatio = _a.aspectRatio;
+    var srcStr = src
+        ? typeof src === "string"
+            ? src
+            : typeof src.src === "string"
+                ? src.src
+                : src.src.src
+        : "";
+    // Assume external image if either dimension is null and use usual <img>
+    if (fullHeight == null || fullWidth == null) {
+        return (React__default.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 = typeof window === "undefined"
+        ? Buffer.from(spacerSvg).toString("base64")
+        : window.btoa(spacerSvg);
+    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__default.createElement("div", { className: classNames(className, "__wab_img-wrapper"), ref: outerRef, style: wrapperStyle },
+        React__default.createElement("img", { alt: "", "aria-hidden": true, className: "__wab_img-spacer-svg", src: "data:image/svg+xml;base64,".concat(spacerSvgBase64), style: spacerStyle }),
+        makePicture({
+            imageLoader: imageLoader,
+            widthDescs: widthDescs,
+            sizes: sizes,
+            src: srcStr,
+            quality: quality,
+            ref: imgRef,
+            style: style ? pick(style, "objectFit", "objectPosition") : undefined,
+            imgProps: imgProps,
+            className: "__wab_img",
+        })));
+});
+function makePicture(opts) {
+    // If imageLoader is undefined, then this renders to just a normal
+    // <img />.  Else it will render to a <picture> with a <source> for
+    // webp, and srcSet/sizes set according to width requirements.
+    var imageLoader = opts.imageLoader, widthDescs = opts.widthDescs, src = opts.src, quality = opts.quality, style = opts.style, className = opts.className, sizes = opts.sizes, imgProps = opts.imgProps, ref = opts.ref;
+    return (React__default.createElement("picture", { className: "__wab_picture" },
+        imageLoader && imageLoader.supportsUrl(src) && (React__default.createElement("source", { type: "image/webp", srcSet: widthDescs
+                .map(function (wd) {
+                return "".concat(imageLoader.transformUrl({
+                    src: src,
+                    quality: quality,
+                    width: wd.width,
+                    format: "webp",
+                }), " ").concat(wd.desc);
+            })
+                .join(", ") })),
+        React__default.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) {
+    var _a;
+    var nextBiggerIndex = (_a = ALL_SIZES.findIndex(function (w) { return w >= width; })) !== null && _a !== void 0 ? _a : ALL_SIZES.length - 1;
+    var nextBigger = ALL_SIZES[nextBiggerIndex];
+    if (nextBigger >= fullWidth) {
+        // If the requested width is larger than the fullWidth,
+        // we just use the original width instead. It's impossible
+        // to make an image bigger than fullWidth!
+        return undefined;
+    }
+    else if (nextBiggerIndex + 1 < ALL_SIZES.length &&
+        fullWidth <= ALL_SIZES[nextBiggerIndex + 1]) {
+        // If the fullWidth is just between nextBigger and the one after that,
+        // then also might as well just use the original size (so, width is 30,
+        // nextBigger is 32, then we just use the original as long as fullWidth is
+        // less than 48)
+        return undefined;
+    }
+    return nextBigger;
+}
+/**
+ * Computes the appropriate srcSet and sizes to use
+ */
+function getWidths(width, fullWidth, extra) {
+    var minWidth = extra === null || extra === void 0 ? void 0 : extra.minWidth;
+    var pixelWidth = getPixelLength(width);
+    var pixelMinWidth = getPixelLength(minWidth);
+    if (pixelWidth != null && (!minWidth || pixelMinWidth != null)) {
+        // If there's an exact width, then we just need to display it at 1x and 2x density
+        return {
+            widthDescs: [
+                {
+                    width: getClosestPresetSize(Math.max(pixelWidth, pixelMinWidth !== null && pixelMinWidth !== void 0 ? pixelMinWidth : 0), fullWidth),
+                    desc: "1x",
+                },
+                {
+                    width: getClosestPresetSize(Math.max(pixelWidth, pixelMinWidth !== null && pixelMinWidth !== void 0 ? pixelMinWidth : 0) * 2, fullWidth),
+                    desc: "2x",
+                },
+            ],
+            sizes: undefined,
+        };
+    }
+    // Otherwise we don't know what sizes we'll end up, so we just cap it at
+    // device width.  TODO: do better!
+    var usefulSizes = DEVICE_SIZES.filter(function (size) { return !fullWidth || size < fullWidth; });
+    if (!!fullWidth && usefulSizes.length === 0) {
+        // image fullWidth is smaller than all device sizes.  So all we can do
+        // is offer 1x
+        return {
+            widthDescs: [
+                {
+                    width: getClosestPresetSize(fullWidth, fullWidth),
+                    desc: "1x",
+                },
+            ],
+            sizes: undefined,
+        };
+    }
+    return {
+        widthDescs: usefulSizes.map(function (size) { return ({
+            width: getClosestPresetSize(size, fullWidth),
+            // If this is the last (buggest) useful width, but it is
+            // still within the bounds set by DEVICE_SIZES, then just
+            // use the original, unresized image.  This means if we match
+            // the largest size, we use unresized and best quality image.
+            // We only do this, though, if fullWidth is "reasonable" --
+            // smaller than the largest size we would consider.
+            // i === usefulSizes.length - 1 &&
+            // fullWidth < DEVICE_SIZES[DEVICE_SIZES.length - 1]
+            //   ? undefined
+            //   : size,
+            desc: "".concat(size, "w"),
+        }); }),
+        sizes: "100vw",
+    };
+}
+function getPixelLength(length) {
+    if (length == null || length == "") {
+        return undefined;
+    }
+    if (typeof length === "number") {
+        return length;
+    }
+    var parsed = parseNumeric(length);
+    if (parsed && (!parsed.units || parsed.units === "px")) {
+        return parsed.num;
+    }
+    return undefined;
+}
+function parseNumeric(val) {
+    // Parse strings like "30", "30px", "30%", "30px /* blah blah */"
+    var res = val.match(/^\s*(-?(?:\d+\.\d*|\d*\.\d+|\d+))\s*([a-z]*|%)\s*(?:\/\*.*)?$/i);
+    if (res == null) {
+        return undefined;
+    }
+    var num = res[1];
+    var units = res[2];
+    return { num: +num, units: units };
+}
+function getImageLoader(loader) {
+    if (loader == null) {
+        return undefined;
+    }
+    else if (loader === "plasmic") {
+        return PLASMIC_IMAGE_LOADER;
+    }
+    else {
+        return loader;
+    }
+}
+var PLASMIC_IMAGE_LOADER = {
+    supportsUrl: function (src) {
+        return src.startsWith("https://img.plasmic.app") && !isSvg(src);
+    },
+    transformUrl: function (opts) {
+        var _a;
+        var params = [
+            opts.width ? "w=".concat(opts.width) : undefined,
+            "q=".concat((_a = opts.quality) !== null && _a !== void 0 ? _a : 75),
+            opts.format ? "f=".concat(opts.format) : undefined,
+        ].filter(function (x) { return !!x; });
+        return "".concat(opts.src, "?").concat(params.join("&"));
+    },
 };
 
 export { PlasmicImg };

package/skinny/dist/render/PlasmicLink.d.ts

@@ -1,2 +1,2 @@
-import React from "react";
-export declare const PlasmicLink: React.ForwardRefExoticComponent<Pick<any, string | number | symbol> & React.RefAttributes<any>>;
+import React from "react";
+export declare const PlasmicLink: React.ForwardRefExoticComponent<Pick<any, string | number | symbol> & React.RefAttributes<any>>;

package/skinny/dist/render/PlasmicSlot.d.ts

@@ -1,11 +1,11 @@
-import * as React from "react";
-export declare function PlasmicSlot<T extends keyof JSX.IntrinsicElements = "div">(props: React.ComponentProps<T> & {
-    as?: T;
-    defaultContents?: React.ReactNode;
-    value?: React.ReactNode;
-}): JSX.Element | null;
-export declare function renderPlasmicSlot<T extends keyof JSX.IntrinsicElements = "div">(opts: {
-    as?: T;
-    defaultContents?: React.ReactNode;
-    value?: React.ReactNode;
-}): JSX.Element | null;
+import * as React from "react";
+export declare function PlasmicSlot<T extends keyof JSX.IntrinsicElements = "div">(props: React.ComponentProps<T> & {
+    as?: T;
+    defaultContents?: React.ReactNode;
+    value?: React.ReactNode;
+}): JSX.Element | null;
+export declare function renderPlasmicSlot<T extends keyof JSX.IntrinsicElements = "div">(opts: {
+    as?: T;
+    defaultContents?: React.ReactNode;
+    value?: React.ReactNode;
+}): JSX.Element | null;