@plasmicapp/react-web 0.2.110 → 0.2.113

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

@@ -39,21 +39,21 @@ var plasmicHeadMeta = {
     props: {
         title: {
             type: "string",
-            displayName: "Title",
+            displayName: "Title"
         },
         description: {
             type: "string",
-            displayName: "Description",
+            displayName: "Description"
         },
         image: {
             type: "imageUrl",
-            displayName: "Image",
+            displayName: "Image"
         },
         canonical: {
             type: "string",
-            displayName: "Canonical URL",
-        },
-    },
+            displayName: "Canonical URL"
+        }
+    }
 };
 
 export { PlasmicHead, PlasmicHeadContext, plasmicHeadMeta };

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

@@ -1,7 +1,7 @@
-import { b as __spreadArray, c as __read, _ as __rest, a as __assign, p as pick } from '../../common-182a0b0c.js';
+import { b as __spreadArray, c as __read, _ as __rest, a as __assign, p as pick } from '../../common-9ebe374e.js';
 import classNames from 'classnames';
 import React__default from 'react';
-import { d as mergeRefs } from '../../react-utils-35cb2a4e.js';
+import { d as mergeRefs } from '../../react-utils-7bc53870.js';
 
 /**
  * Responsive `<img/>` replacement, based on `next/image`
@@ -10,13 +10,13 @@ import { d as mergeRefs } from '../../react-utils-35cb2a4e.js';
 // 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)), __read(DEVICE_SIZES));
+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",
+        loading: loading !== null && loading !== void 0 ? loading : "lazy"
     });
     var _a = typeof src === "string" || !src
         ? { fullWidth: undefined, fullHeight: undefined, aspectRatio: undefined }
@@ -65,10 +65,10 @@ var PlasmicImg = React__default.forwardRef(function PlasmicImg(props, outerRef)
         spacerHeight = Math.round(spacerWidth / aspectRatio);
     }
     var _b = getWidths(computedDisplayWidth, fullWidth, {
-        minWidth: displayMinWidth,
+        minWidth: displayMinWidth
     }), sizes = _b.sizes, widthDescs = _b.widthDescs;
     var imageLoader = getImageLoader(loader);
-    var spacerSvg = "<svg width=\"" + spacerWidth + "\" height=\"" + spacerHeight + "\" xmlns=\"http://www.w3.org/2000/svg\" version=\"1.1\"/>";
+    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);
@@ -123,7 +123,7 @@ var PlasmicImg = React__default.forwardRef(function PlasmicImg(props, outerRef)
         }
     }
     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," + spacerSvgBase64, style: spacerStyle }),
+        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,
@@ -133,7 +133,7 @@ var PlasmicImg = React__default.forwardRef(function PlasmicImg(props, outerRef)
             ref: imgRef,
             style: style ? pick(style, "objectFit", "objectPosition") : undefined,
             imgProps: imgProps,
-            className: "__wab_img",
+            className: "__wab_img"
         })));
 });
 function makePicture(opts) {
@@ -144,28 +144,28 @@ function makePicture(opts) {
     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 imageLoader.transformUrl({
+                return "".concat(imageLoader.transformUrl({
                     src: src,
                     quality: quality,
                     width: wd.width,
-                    format: "webp",
-                }) + " " + wd.desc;
+                    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,
+                    width: widthDescs[widthDescs.length - 1].width
                 })
                 : src, srcSet: imageLoader && imageLoader.supportsUrl(src)
                 ? widthDescs
                     .map(function (wd) {
-                    return imageLoader.transformUrl({
+                    return "".concat(imageLoader.transformUrl({
                         src: src,
                         quality: quality,
-                        width: wd.width,
-                    }) + " " + wd.desc;
+                        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 }) }))));
@@ -207,14 +207,14 @@ function getWidths(width, fullWidth, extra) {
             widthDescs: [
                 {
                     width: getClosestPresetSize(Math.max(pixelWidth, pixelMinWidth !== null && pixelMinWidth !== void 0 ? pixelMinWidth : 0), fullWidth),
-                    desc: "1x",
+                    desc: "1x"
                 },
                 {
                     width: getClosestPresetSize(Math.max(pixelWidth, pixelMinWidth !== null && pixelMinWidth !== void 0 ? pixelMinWidth : 0) * 2, fullWidth),
-                    desc: "2x",
+                    desc: "2x"
                 },
             ],
-            sizes: undefined,
+            sizes: undefined
         };
     }
     // Otherwise we don't know what sizes we'll end up, so we just cap it at
@@ -227,10 +227,10 @@ function getWidths(width, fullWidth, extra) {
             widthDescs: [
                 {
                     width: getClosestPresetSize(fullWidth, fullWidth),
-                    desc: "1x",
+                    desc: "1x"
                 },
             ],
-            sizes: undefined,
+            sizes: undefined
         };
     }
     return {
@@ -246,9 +246,9 @@ function getWidths(width, fullWidth, extra) {
             // fullWidth < DEVICE_SIZES[DEVICE_SIZES.length - 1]
             //   ? undefined
             //   : size,
-            desc: size + "w",
+            desc: "".concat(size, "w")
         }); }),
-        sizes: "100vw",
+        sizes: "100vw"
     };
 }
 function getPixelLength(length) {
@@ -292,12 +292,12 @@ var PLASMIC_IMAGE_LOADER = {
     transformUrl: function (opts) {
         var _a;
         var params = [
-            opts.width ? "w=" + opts.width : undefined,
-            "q=" + ((_a = opts.quality) !== null && _a !== void 0 ? _a : 75),
-            opts.format ? "f=" + opts.format : undefined,
+            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 opts.src + "?" + params.join("&");
-    },
+        return "".concat(opts.src, "?").concat(params.join("&"));
+    }
 };
 
 export { PlasmicImg };

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

@@ -1 +1 @@
-{"version":3,"file":"index.js","sources":["../../../../src/render/PlasmicImg/index.tsx"],"sourcesContent":["/**\n * Responsive `<img/>` replacement, based on `next/image`\n */\n\nimport classNames from \"classnames\";\nimport React, { CSSProperties } from \"react\";\nimport { pick } from \"../../common\";\nimport { mergeRefs } from \"../../react-utils\";\n\nexport interface ImageLoader {\n  supportsUrl: (url: string) => boolean;\n  transformUrl: (opts: {\n    src: string;\n    width?: number;\n    quality?: number;\n    format?: \"webp\";\n  }) => string;\n}\n\ntype ImgTagProps = Omit<\n  React.ComponentProps<\"img\">,\n  \"src\" | \"srcSet\" | \"ref\" | \"style\"\n>;\n\n// Default image sizes to snap to\n// TODO: make this configurable?\nconst IMG_SIZES = [16, 32, 48, 64, 96, 128, 256, 384];\nconst DEVICE_SIZES = [640, 750, 828, 1080, 1200, 1920, 2048, 3840];\nconst ALL_SIZES = [...IMG_SIZES, ...DEVICE_SIZES];\n\nexport interface PlasmicImgProps extends ImgTagProps {\n  /**\n   * Either an object with the src string, and its full width and height,\n   * or just a src string with unknown intrinsic dimensions.\n   */\n  src?:\n    | string\n    | {\n        src:\n          | string\n          | {\n              src: string;\n              height: number;\n              width: number;\n              blurDataURL?: string;\n            };\n        fullHeight: number;\n        fullWidth: number;\n        // We might also get a more precise aspectRatio for SVGs\n        // instead of relyiing on fullWidth / fullHeight, because\n        // those values might be rounded and not so accurate.\n        aspectRatio?: number;\n      };\n\n  /**\n   * className applied to the wrapper element if one is used.\n   */\n  className?: string;\n\n  /**\n   * css width\n   */\n  displayWidth?: number | string;\n\n  /**\n   * css height\n   */\n  displayHeight?: number | string;\n\n  /**\n   * css min-width\n   */\n  displayMinWidth?: number | string;\n\n  /**\n   * css min-height\n   */\n  displayMinHeight?: number | string;\n\n  /**\n   * css max-width\n   */\n  displayMaxWidth?: number | string;\n\n  /**\n   * css max-height\n   */\n  displayMaxHeight?: number | string;\n\n  /**\n   * For variable quality formats like jpg, the quality from 0 to 100\n   */\n  quality?: number;\n\n  /**\n   * ImageLoader to use for loading different dimensions of the image.\n   * If none specified, will not attempt to load different dimensions.\n   */\n  loader?: \"plasmic\" | ImageLoader;\n\n  /**\n   * Style applied to the wrapper element. objectFit and objectPosition\n   * rules are applied to the img element.\n   */\n  style?: React.CSSProperties;\n\n  /**\n   * Ref for the img element.  The normal <PlasmicImg ref={...} />\n   * prop gives the root element instead, which may be the img element\n   * or a wrapper element\n   */\n  imgRef?: React.Ref<HTMLImageElement>;\n}\n\nexport const PlasmicImg = React.forwardRef(function PlasmicImg(\n  props: PlasmicImgProps,\n  outerRef: React.Ref<HTMLElement>\n) {\n  let {\n    src,\n    className,\n    displayWidth,\n    displayHeight,\n    displayMinWidth,\n    displayMinHeight,\n    displayMaxWidth,\n    displayMaxHeight,\n    quality,\n    loader,\n    imgRef,\n    style,\n    loading,\n    ...rest\n  } = props;\n\n  const imgProps = Object.assign({}, rest, {\n    // Default loading to \"lazy\" if not specified (which is different from the\n    // html img, which defaults to eager!)\n    loading: loading ?? \"lazy\",\n  });\n\n  const { fullWidth, fullHeight, aspectRatio } =\n    typeof src === \"string\" || !src\n      ? { fullWidth: undefined, fullHeight: undefined, aspectRatio: undefined }\n      : src;\n  const srcStr = src\n    ? typeof src === \"string\"\n      ? src\n      : typeof src.src === \"string\"\n      ? src.src\n      : src.src.src\n    : \"\";\n\n  // Assume external image if either dimension is null and use usual <img>\n  if (fullHeight == null || fullWidth == null) {\n    return (\n      <img\n        src={srcStr}\n        className={className}\n        style={style}\n        {...imgProps}\n        loading={loading}\n        ref={mergeRefs(imgRef, outerRef) as any}\n      />\n    );\n  }\n\n  if (\n    isSvg(srcStr) &&\n    (displayHeight == null || displayHeight === \"auto\") &&\n    (displayWidth == null || displayWidth === \"auto\")\n  ) {\n    displayWidth = \"100%\";\n  }\n\n  let computedDisplayWidth = displayWidth;\n  if (\n    fullWidth &&\n    fullHeight &&\n    (!displayWidth || displayWidth === \"auto\") &&\n    !!getPixelLength(displayHeight)\n  ) {\n    // If there's a pixel length specified for displayHeight but not displayWidth,\n    // then we can derive the pixel length for displayWidth.  Having an explicit\n    // displayWidth makes this a fixed-size image, which makes it possible for us to\n    // generate better markup!\n    if (!isSvg(srcStr)) {\n      // We shouldn't do it for SVGs though, because `fullWidth` and\n      // `fullHeight` might have rounded values so the final\n      // `displayWidth` could differ by 1px or so.\n      computedDisplayWidth =\n        (getPixelLength(displayHeight)! * fullWidth) / fullHeight;\n    }\n  }\n\n  let spacerWidth = fullWidth;\n  let spacerHeight = fullHeight;\n  if (aspectRatio && isFinite(aspectRatio) && isSvg(srcStr)) {\n    // For SVGs, fullWidth and fullHeight can be rounded values, which would\n    // cause some discrepancy between the actual aspect ratio and the aspect\n    // ratio from those values. So, for those cases, we set large width / height\n    // values to get a more precise ratio from the spacer.\n    spacerWidth = DEFAULT_SVG_WIDTH;\n    spacerHeight = Math.round(spacerWidth / aspectRatio);\n  }\n\n  const { sizes, widthDescs } = getWidths(computedDisplayWidth, fullWidth, {\n    minWidth: displayMinWidth,\n  });\n  const imageLoader = getImageLoader(loader);\n  const spacerSvg = `<svg width=\"${spacerWidth}\" height=\"${spacerHeight}\" xmlns=\"http://www.w3.org/2000/svg\" version=\"1.1\"/>`;\n  const spacerSvgBase64 =\n    typeof window === \"undefined\"\n      ? Buffer.from(spacerSvg).toString(\"base64\")\n      : window.btoa(spacerSvg);\n\n  let wrapperStyle: CSSProperties = { ...(style || {}) };\n  let spacerStyle: CSSProperties = {\n    ...pick(style || {}, \"objectFit\", \"objectPosition\"),\n  };\n\n  if (displayWidth != null && displayWidth !== \"auto\") {\n    // If width is set, set it on the wrapper along with min/max width\n    // and just use `width: 100%` on the spacer\n    spacerStyle.width = \"100%\";\n    // Rely on the styles set by `classname` on the wrapper:\n    // wrapperStyle.width = displayWidth;\n    // wrapperStyle.minWidth = displayMinWidth;\n    // wrapperStyle.maxWidth = displayMaxWidth;\n  } else {\n    // Otherwise, we want auto sizing from the spacer, so set width there.\n    //\n    // But if we have min/max width, it should be set in the wrapper and it\n    // can be percentage values (and we add corresponding min/max width to\n    // 100% in the spacer). In general it ends up with the correct effect,\n    // but some edge cases might make `min-width: 100%` shrink the image more\n    // than it should.\n    spacerStyle.width = displayWidth;\n    wrapperStyle.width = \"auto\";\n    if (displayMinWidth) {\n      spacerStyle.minWidth = \"100%\";\n      // Rely on min-width set by `classname` on the wrapper:\n      // wrapperStyle.minWidth = displayMinWidth;\n    }\n    if (displayMaxWidth != null && displayMaxWidth !== \"none\") {\n      spacerStyle.maxWidth = \"100%\";\n      // Rely on max-width set by `classname` on the wrapper:\n      // wrapperStyle.maxWidth = displayMaxWidth;\n    }\n  }\n\n  if (displayHeight != null && displayHeight !== \"auto\") {\n    spacerStyle.height = \"100%\";\n    // wrapperStyle.height = displayHeight;\n    // wrapperStyle.minHeight = displayMinHeight;\n    // wrapperStyle.maxHeight = displayMaxHeight;\n  } else {\n    spacerStyle.height = displayHeight;\n    wrapperStyle.height = \"auto\";\n    if (displayMinHeight) {\n      spacerStyle.minHeight = \"100%\";\n      // wrapperStyle.minHeight = displayMinHeight;\n    }\n    if (displayMaxHeight != null && displayMaxHeight !== \"none\") {\n      spacerStyle.maxHeight = \"100%\";\n      // wrapperStyle.maxHeight = displayMaxHeight;\n    }\n  }\n\n  return (\n    <div\n      className={classNames(className, \"__wab_img-wrapper\")}\n      ref={outerRef as any}\n      style={wrapperStyle}\n    >\n      <img\n        alt=\"\"\n        aria-hidden\n        className=\"__wab_img-spacer-svg\"\n        src={`data:image/svg+xml;base64,${spacerSvgBase64}`}\n        style={spacerStyle}\n      />\n      {makePicture({\n        imageLoader,\n        widthDescs,\n        sizes,\n        src: srcStr,\n        quality,\n        ref: imgRef,\n        style: style ? pick(style, \"objectFit\", \"objectPosition\") : undefined,\n        imgProps,\n        className: \"__wab_img\",\n      })}\n    </div>\n  );\n});\n\nfunction makePicture(opts: {\n  imageLoader?: ImageLoader;\n  widthDescs: WidthDesc[];\n  sizes?: string;\n  src: string;\n  quality?: number;\n  style?: React.CSSProperties;\n  className?: string;\n  imgProps: ImgTagProps;\n  ref?: React.Ref<HTMLImageElement>;\n}) {\n  // If imageLoader is undefined, then this renders to just a normal\n  // <img />.  Else it will render to a <picture> with a <source> for\n  // webp, and srcSet/sizes set according to width requirements.\n  const {\n    imageLoader,\n    widthDescs,\n    src,\n    quality,\n    style,\n    className,\n    sizes,\n    imgProps,\n    ref,\n  } = opts;\n  return (\n    <picture className=\"__wab_picture\">\n      {imageLoader && imageLoader.supportsUrl(src) && (\n        <source\n          type=\"image/webp\"\n          srcSet={widthDescs\n            .map(\n              (wd) =>\n                `${imageLoader.transformUrl({\n                  src,\n                  quality,\n                  width: wd.width,\n                  format: \"webp\",\n                })} ${wd.desc}`\n            )\n            .join(\", \")}\n        />\n      )}\n      <img\n        {...imgProps}\n        ref={ref}\n        className={className}\n        decoding=\"async\"\n        src={\n          imageLoader && imageLoader.supportsUrl(src)\n            ? imageLoader.transformUrl({\n                src,\n                quality,\n                width: widthDescs[widthDescs.length - 1].width,\n              })\n            : src\n        }\n        srcSet={\n          imageLoader && imageLoader.supportsUrl(src)\n            ? widthDescs\n                .map(\n                  (wd) =>\n                    `${imageLoader.transformUrl({\n                      src,\n                      quality,\n                      width: wd.width,\n                    })} ${wd.desc}`\n                )\n                .join(\", \")\n            : undefined\n        }\n        sizes={imageLoader && imageLoader.supportsUrl(src) ? sizes : undefined}\n        style={{\n          ...(style ? pick(style, \"objectFit\", \"objectPosition\") : {}),\n          width: 0,\n          height: 0,\n        }}\n      />\n    </picture>\n  );\n}\n\nconst DEFAULT_SVG_WIDTH = 10000;\n\nfunction isSvg(src: string) {\n  return src.endsWith(\".svg\") || src.startsWith(\"data:image/svg\");\n}\n\ninterface WidthDesc {\n  width?: number;\n  desc: string;\n}\n\nfunction getClosestPresetSize(width: number, fullWidth: number) {\n  const nextBiggerIndex =\n    ALL_SIZES.findIndex((w) => w >= width) ?? ALL_SIZES.length - 1;\n  const nextBigger = ALL_SIZES[nextBiggerIndex];\n  if (nextBigger >= fullWidth) {\n    // If the requested width is larger than the fullWidth,\n    // we just use the original width instead. It's impossible\n    // to make an image bigger than fullWidth!\n    return undefined;\n  } else if (\n    nextBiggerIndex + 1 < ALL_SIZES.length &&\n    fullWidth <= ALL_SIZES[nextBiggerIndex + 1]\n  ) {\n    // If the fullWidth is just between nextBigger and the one after that,\n    // then also might as well just use the original size (so, width is 30,\n    // nextBigger is 32, then we just use the original as long as fullWidth is\n    // less than 48)\n    return undefined;\n  }\n\n  return nextBigger;\n}\n\n/**\n * Computes the appropriate srcSet and sizes to use\n */\nfunction getWidths(\n  width: number | string | undefined,\n  fullWidth: number,\n  extra?: { minWidth: string | number | undefined }\n): { sizes: string | undefined; widthDescs: WidthDesc[] } {\n  const minWidth = extra?.minWidth;\n  const pixelWidth = getPixelLength(width);\n  const pixelMinWidth = getPixelLength(minWidth);\n  if (pixelWidth != null && (!minWidth || pixelMinWidth != null)) {\n    // If there's an exact width, then we just need to display it at 1x and 2x density\n    return {\n      widthDescs: [\n        {\n          width: getClosestPresetSize(\n            Math.max(pixelWidth, pixelMinWidth ?? 0),\n            fullWidth\n          ),\n          desc: \"1x\",\n        },\n        {\n          width: getClosestPresetSize(\n            Math.max(pixelWidth, pixelMinWidth ?? 0) * 2,\n            fullWidth\n          ),\n          desc: \"2x\",\n        },\n      ],\n      sizes: undefined,\n    };\n  }\n  // Otherwise we don't know what sizes we'll end up, so we just cap it at\n  // device width.  TODO: do better!\n  const usefulSizes = DEVICE_SIZES.filter(\n    (size) => !fullWidth || size < fullWidth\n  );\n  if (!!fullWidth && usefulSizes.length === 0) {\n    // image fullWidth is smaller than all device sizes.  So all we can do\n    // is offer 1x\n    return {\n      widthDescs: [\n        {\n          width: getClosestPresetSize(fullWidth, fullWidth),\n          desc: \"1x\",\n        },\n      ],\n      sizes: undefined,\n    };\n  }\n  return {\n    widthDescs: usefulSizes.map((size) => ({\n      width: getClosestPresetSize(size, fullWidth),\n      // If this is the last (buggest) useful width, but it is\n      // still within the bounds set by DEVICE_SIZES, then just\n      // use the original, unresized image.  This means if we match\n      // the largest size, we use unresized and best quality image.\n      // We only do this, though, if fullWidth is \"reasonable\" --\n      // smaller than the largest size we would consider.\n      // i === usefulSizes.length - 1 &&\n      // fullWidth < DEVICE_SIZES[DEVICE_SIZES.length - 1]\n      //   ? undefined\n      //   : size,\n      desc: `${size}w`,\n    })),\n    sizes: \"100vw\",\n  };\n}\n\nfunction getPixelLength(length: number | string | undefined) {\n  if (length == null || length == \"\") {\n    return undefined;\n  }\n\n  if (typeof length === \"number\") {\n    return length;\n  }\n\n  const parsed = parseNumeric(length);\n  if (parsed && (!parsed.units || parsed.units === \"px\")) {\n    return parsed.num;\n  }\n\n  return undefined;\n}\n\nfunction parseNumeric(val: string) {\n  // Parse strings like \"30\", \"30px\", \"30%\", \"30px /* blah blah */\"\n  const res = val.match(\n    /^\\s*(-?(?:\\d+\\.\\d*|\\d*\\.\\d+|\\d+))\\s*([a-z]*|%)\\s*(?:\\/\\*.*)?$/i\n  );\n  if (res == null) {\n    return undefined;\n  }\n  const num = res[1];\n  const units = res[2];\n  return { num: +num, units };\n}\n\nfunction getImageLoader(loader: \"plasmic\" | ImageLoader | undefined) {\n  if (loader == null) {\n    return undefined;\n  } else if (loader === \"plasmic\") {\n    return PLASMIC_IMAGE_LOADER;\n  } else {\n    return loader;\n  }\n}\n\nconst PLASMIC_IMAGE_LOADER: ImageLoader = {\n  supportsUrl: (src) => {\n    return src.startsWith(\"https://img.plasmic.app\") && !isSvg(src);\n  },\n  transformUrl: (opts) => {\n    const params = [\n      opts.width ? `w=${opts.width}` : undefined,\n      `q=${opts.quality ?? 75}`,\n      opts.format ? `f=${opts.format}` : undefined,\n    ].filter((x) => !!x);\n    return `${opts.src}?${params.join(\"&\")}`;\n  },\n};\n"],"names":["React"],"mappings":"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"}
+{"version":3,"file":"index.js","sources":["../../../../src/render/PlasmicImg/index.tsx"],"sourcesContent":["/**\n * Responsive `<img/>` replacement, based on `next/image`\n */\n\nimport classNames from \"classnames\";\nimport React, { CSSProperties } from \"react\";\nimport { pick } from \"../../common\";\nimport { mergeRefs } from \"../../react-utils\";\n\nexport interface ImageLoader {\n  supportsUrl: (url: string) => boolean;\n  transformUrl: (opts: {\n    src: string;\n    width?: number;\n    quality?: number;\n    format?: \"webp\";\n  }) => string;\n}\n\ntype ImgTagProps = Omit<\n  React.ComponentProps<\"img\">,\n  \"src\" | \"srcSet\" | \"ref\" | \"style\"\n>;\n\n// Default image sizes to snap to\n// TODO: make this configurable?\nconst IMG_SIZES = [16, 32, 48, 64, 96, 128, 256, 384];\nconst DEVICE_SIZES = [640, 750, 828, 1080, 1200, 1920, 2048, 3840];\nconst ALL_SIZES = [...IMG_SIZES, ...DEVICE_SIZES];\n\nexport interface PlasmicImgProps extends ImgTagProps {\n  /**\n   * Either an object with the src string, and its full width and height,\n   * or just a src string with unknown intrinsic dimensions.\n   */\n  src?:\n    | string\n    | {\n        src:\n          | string\n          | {\n              src: string;\n              height: number;\n              width: number;\n              blurDataURL?: string;\n            };\n        fullHeight: number;\n        fullWidth: number;\n        // We might also get a more precise aspectRatio for SVGs\n        // instead of relyiing on fullWidth / fullHeight, because\n        // those values might be rounded and not so accurate.\n        aspectRatio?: number;\n      };\n\n  /**\n   * className applied to the wrapper element if one is used.\n   */\n  className?: string;\n\n  /**\n   * css width\n   */\n  displayWidth?: number | string;\n\n  /**\n   * css height\n   */\n  displayHeight?: number | string;\n\n  /**\n   * css min-width\n   */\n  displayMinWidth?: number | string;\n\n  /**\n   * css min-height\n   */\n  displayMinHeight?: number | string;\n\n  /**\n   * css max-width\n   */\n  displayMaxWidth?: number | string;\n\n  /**\n   * css max-height\n   */\n  displayMaxHeight?: number | string;\n\n  /**\n   * For variable quality formats like jpg, the quality from 0 to 100\n   */\n  quality?: number;\n\n  /**\n   * ImageLoader to use for loading different dimensions of the image.\n   * If none specified, will not attempt to load different dimensions.\n   */\n  loader?: \"plasmic\" | ImageLoader;\n\n  /**\n   * Style applied to the wrapper element. objectFit and objectPosition\n   * rules are applied to the img element.\n   */\n  style?: React.CSSProperties;\n\n  /**\n   * Ref for the img element.  The normal <PlasmicImg ref={...} />\n   * prop gives the root element instead, which may be the img element\n   * or a wrapper element\n   */\n  imgRef?: React.Ref<HTMLImageElement>;\n}\n\nexport const PlasmicImg = React.forwardRef(function PlasmicImg(\n  props: PlasmicImgProps,\n  outerRef: React.Ref<HTMLElement>\n) {\n  let {\n    src,\n    className,\n    displayWidth,\n    displayHeight,\n    displayMinWidth,\n    displayMinHeight,\n    displayMaxWidth,\n    displayMaxHeight,\n    quality,\n    loader,\n    imgRef,\n    style,\n    loading,\n    ...rest\n  } = props;\n\n  const imgProps = Object.assign({}, rest, {\n    // Default loading to \"lazy\" if not specified (which is different from the\n    // html img, which defaults to eager!)\n    loading: loading ?? \"lazy\",\n  });\n\n  const { fullWidth, fullHeight, aspectRatio } =\n    typeof src === \"string\" || !src\n      ? { fullWidth: undefined, fullHeight: undefined, aspectRatio: undefined }\n      : src;\n  const srcStr = src\n    ? typeof src === \"string\"\n      ? src\n      : typeof src.src === \"string\"\n      ? src.src\n      : src.src.src\n    : \"\";\n\n  // Assume external image if either dimension is null and use usual <img>\n  if (fullHeight == null || fullWidth == null) {\n    return (\n      <img\n        src={srcStr}\n        className={className}\n        style={style}\n        {...imgProps}\n        loading={loading}\n        ref={mergeRefs(imgRef, outerRef) as any}\n      />\n    );\n  }\n\n  if (\n    isSvg(srcStr) &&\n    (displayHeight == null || displayHeight === \"auto\") &&\n    (displayWidth == null || displayWidth === \"auto\")\n  ) {\n    displayWidth = \"100%\";\n  }\n\n  let computedDisplayWidth = displayWidth;\n  if (\n    fullWidth &&\n    fullHeight &&\n    (!displayWidth || displayWidth === \"auto\") &&\n    !!getPixelLength(displayHeight)\n  ) {\n    // If there's a pixel length specified for displayHeight but not displayWidth,\n    // then we can derive the pixel length for displayWidth.  Having an explicit\n    // displayWidth makes this a fixed-size image, which makes it possible for us to\n    // generate better markup!\n    if (!isSvg(srcStr)) {\n      // We shouldn't do it for SVGs though, because `fullWidth` and\n      // `fullHeight` might have rounded values so the final\n      // `displayWidth` could differ by 1px or so.\n      computedDisplayWidth =\n        (getPixelLength(displayHeight)! * fullWidth) / fullHeight;\n    }\n  }\n\n  let spacerWidth = fullWidth;\n  let spacerHeight = fullHeight;\n  if (aspectRatio && isFinite(aspectRatio) && isSvg(srcStr)) {\n    // For SVGs, fullWidth and fullHeight can be rounded values, which would\n    // cause some discrepancy between the actual aspect ratio and the aspect\n    // ratio from those values. So, for those cases, we set large width / height\n    // values to get a more precise ratio from the spacer.\n    spacerWidth = DEFAULT_SVG_WIDTH;\n    spacerHeight = Math.round(spacerWidth / aspectRatio);\n  }\n\n  const { sizes, widthDescs } = getWidths(computedDisplayWidth, fullWidth, {\n    minWidth: displayMinWidth,\n  });\n  const imageLoader = getImageLoader(loader);\n  const spacerSvg = `<svg width=\"${spacerWidth}\" height=\"${spacerHeight}\" xmlns=\"http://www.w3.org/2000/svg\" version=\"1.1\"/>`;\n  const spacerSvgBase64 =\n    typeof window === \"undefined\"\n      ? Buffer.from(spacerSvg).toString(\"base64\")\n      : window.btoa(spacerSvg);\n\n  let wrapperStyle: CSSProperties = { ...(style || {}) };\n  let spacerStyle: CSSProperties = {\n    ...pick(style || {}, \"objectFit\", \"objectPosition\"),\n  };\n\n  if (displayWidth != null && displayWidth !== \"auto\") {\n    // If width is set, set it on the wrapper along with min/max width\n    // and just use `width: 100%` on the spacer\n    spacerStyle.width = \"100%\";\n    // Rely on the styles set by `classname` on the wrapper:\n    // wrapperStyle.width = displayWidth;\n    // wrapperStyle.minWidth = displayMinWidth;\n    // wrapperStyle.maxWidth = displayMaxWidth;\n  } else {\n    // Otherwise, we want auto sizing from the spacer, so set width there.\n    //\n    // But if we have min/max width, it should be set in the wrapper and it\n    // can be percentage values (and we add corresponding min/max width to\n    // 100% in the spacer). In general it ends up with the correct effect,\n    // but some edge cases might make `min-width: 100%` shrink the image more\n    // than it should.\n    spacerStyle.width = displayWidth;\n    wrapperStyle.width = \"auto\";\n    if (displayMinWidth) {\n      spacerStyle.minWidth = \"100%\";\n      // Rely on min-width set by `classname` on the wrapper:\n      // wrapperStyle.minWidth = displayMinWidth;\n    }\n    if (displayMaxWidth != null && displayMaxWidth !== \"none\") {\n      spacerStyle.maxWidth = \"100%\";\n      // Rely on max-width set by `classname` on the wrapper:\n      // wrapperStyle.maxWidth = displayMaxWidth;\n    }\n  }\n\n  if (displayHeight != null && displayHeight !== \"auto\") {\n    spacerStyle.height = \"100%\";\n    // wrapperStyle.height = displayHeight;\n    // wrapperStyle.minHeight = displayMinHeight;\n    // wrapperStyle.maxHeight = displayMaxHeight;\n  } else {\n    spacerStyle.height = displayHeight;\n    wrapperStyle.height = \"auto\";\n    if (displayMinHeight) {\n      spacerStyle.minHeight = \"100%\";\n      // wrapperStyle.minHeight = displayMinHeight;\n    }\n    if (displayMaxHeight != null && displayMaxHeight !== \"none\") {\n      spacerStyle.maxHeight = \"100%\";\n      // wrapperStyle.maxHeight = displayMaxHeight;\n    }\n  }\n\n  return (\n    <div\n      className={classNames(className, \"__wab_img-wrapper\")}\n      ref={outerRef as any}\n      style={wrapperStyle}\n    >\n      <img\n        alt=\"\"\n        aria-hidden\n        className=\"__wab_img-spacer-svg\"\n        src={`data:image/svg+xml;base64,${spacerSvgBase64}`}\n        style={spacerStyle}\n      />\n      {makePicture({\n        imageLoader,\n        widthDescs,\n        sizes,\n        src: srcStr,\n        quality,\n        ref: imgRef,\n        style: style ? pick(style, \"objectFit\", \"objectPosition\") : undefined,\n        imgProps,\n        className: \"__wab_img\",\n      })}\n    </div>\n  );\n});\n\nfunction makePicture(opts: {\n  imageLoader?: ImageLoader;\n  widthDescs: WidthDesc[];\n  sizes?: string;\n  src: string;\n  quality?: number;\n  style?: React.CSSProperties;\n  className?: string;\n  imgProps: ImgTagProps;\n  ref?: React.Ref<HTMLImageElement>;\n}) {\n  // If imageLoader is undefined, then this renders to just a normal\n  // <img />.  Else it will render to a <picture> with a <source> for\n  // webp, and srcSet/sizes set according to width requirements.\n  const {\n    imageLoader,\n    widthDescs,\n    src,\n    quality,\n    style,\n    className,\n    sizes,\n    imgProps,\n    ref,\n  } = opts;\n  return (\n    <picture className=\"__wab_picture\">\n      {imageLoader && imageLoader.supportsUrl(src) && (\n        <source\n          type=\"image/webp\"\n          srcSet={widthDescs\n            .map(\n              (wd) =>\n                `${imageLoader.transformUrl({\n                  src,\n                  quality,\n                  width: wd.width,\n                  format: \"webp\",\n                })} ${wd.desc}`\n            )\n            .join(\", \")}\n        />\n      )}\n      <img\n        {...imgProps}\n        ref={ref}\n        className={className}\n        decoding=\"async\"\n        src={\n          imageLoader && imageLoader.supportsUrl(src)\n            ? imageLoader.transformUrl({\n                src,\n                quality,\n                width: widthDescs[widthDescs.length - 1].width,\n              })\n            : src\n        }\n        srcSet={\n          imageLoader && imageLoader.supportsUrl(src)\n            ? widthDescs\n                .map(\n                  (wd) =>\n                    `${imageLoader.transformUrl({\n                      src,\n                      quality,\n                      width: wd.width,\n                    })} ${wd.desc}`\n                )\n                .join(\", \")\n            : undefined\n        }\n        sizes={imageLoader && imageLoader.supportsUrl(src) ? sizes : undefined}\n        style={{\n          ...(style ? pick(style, \"objectFit\", \"objectPosition\") : {}),\n          width: 0,\n          height: 0,\n        }}\n      />\n    </picture>\n  );\n}\n\nconst DEFAULT_SVG_WIDTH = 10000;\n\nfunction isSvg(src: string) {\n  return src.endsWith(\".svg\") || src.startsWith(\"data:image/svg\");\n}\n\ninterface WidthDesc {\n  width?: number;\n  desc: string;\n}\n\nfunction getClosestPresetSize(width: number, fullWidth: number) {\n  const nextBiggerIndex =\n    ALL_SIZES.findIndex((w) => w >= width) ?? ALL_SIZES.length - 1;\n  const nextBigger = ALL_SIZES[nextBiggerIndex];\n  if (nextBigger >= fullWidth) {\n    // If the requested width is larger than the fullWidth,\n    // we just use the original width instead. It's impossible\n    // to make an image bigger than fullWidth!\n    return undefined;\n  } else if (\n    nextBiggerIndex + 1 < ALL_SIZES.length &&\n    fullWidth <= ALL_SIZES[nextBiggerIndex + 1]\n  ) {\n    // If the fullWidth is just between nextBigger and the one after that,\n    // then also might as well just use the original size (so, width is 30,\n    // nextBigger is 32, then we just use the original as long as fullWidth is\n    // less than 48)\n    return undefined;\n  }\n\n  return nextBigger;\n}\n\n/**\n * Computes the appropriate srcSet and sizes to use\n */\nfunction getWidths(\n  width: number | string | undefined,\n  fullWidth: number,\n  extra?: { minWidth: string | number | undefined }\n): { sizes: string | undefined; widthDescs: WidthDesc[] } {\n  const minWidth = extra?.minWidth;\n  const pixelWidth = getPixelLength(width);\n  const pixelMinWidth = getPixelLength(minWidth);\n  if (pixelWidth != null && (!minWidth || pixelMinWidth != null)) {\n    // If there's an exact width, then we just need to display it at 1x and 2x density\n    return {\n      widthDescs: [\n        {\n          width: getClosestPresetSize(\n            Math.max(pixelWidth, pixelMinWidth ?? 0),\n            fullWidth\n          ),\n          desc: \"1x\",\n        },\n        {\n          width: getClosestPresetSize(\n            Math.max(pixelWidth, pixelMinWidth ?? 0) * 2,\n            fullWidth\n          ),\n          desc: \"2x\",\n        },\n      ],\n      sizes: undefined,\n    };\n  }\n  // Otherwise we don't know what sizes we'll end up, so we just cap it at\n  // device width.  TODO: do better!\n  const usefulSizes = DEVICE_SIZES.filter(\n    (size) => !fullWidth || size < fullWidth\n  );\n  if (!!fullWidth && usefulSizes.length === 0) {\n    // image fullWidth is smaller than all device sizes.  So all we can do\n    // is offer 1x\n    return {\n      widthDescs: [\n        {\n          width: getClosestPresetSize(fullWidth, fullWidth),\n          desc: \"1x\",\n        },\n      ],\n      sizes: undefined,\n    };\n  }\n  return {\n    widthDescs: usefulSizes.map((size) => ({\n      width: getClosestPresetSize(size, fullWidth),\n      // If this is the last (buggest) useful width, but it is\n      // still within the bounds set by DEVICE_SIZES, then just\n      // use the original, unresized image.  This means if we match\n      // the largest size, we use unresized and best quality image.\n      // We only do this, though, if fullWidth is \"reasonable\" --\n      // smaller than the largest size we would consider.\n      // i === usefulSizes.length - 1 &&\n      // fullWidth < DEVICE_SIZES[DEVICE_SIZES.length - 1]\n      //   ? undefined\n      //   : size,\n      desc: `${size}w`,\n    })),\n    sizes: \"100vw\",\n  };\n}\n\nfunction getPixelLength(length: number | string | undefined) {\n  if (length == null || length == \"\") {\n    return undefined;\n  }\n\n  if (typeof length === \"number\") {\n    return length;\n  }\n\n  const parsed = parseNumeric(length);\n  if (parsed && (!parsed.units || parsed.units === \"px\")) {\n    return parsed.num;\n  }\n\n  return undefined;\n}\n\nfunction parseNumeric(val: string) {\n  // Parse strings like \"30\", \"30px\", \"30%\", \"30px /* blah blah */\"\n  const res = val.match(\n    /^\\s*(-?(?:\\d+\\.\\d*|\\d*\\.\\d+|\\d+))\\s*([a-z]*|%)\\s*(?:\\/\\*.*)?$/i\n  );\n  if (res == null) {\n    return undefined;\n  }\n  const num = res[1];\n  const units = res[2];\n  return { num: +num, units };\n}\n\nfunction getImageLoader(loader: \"plasmic\" | ImageLoader | undefined) {\n  if (loader == null) {\n    return undefined;\n  } else if (loader === \"plasmic\") {\n    return PLASMIC_IMAGE_LOADER;\n  } else {\n    return loader;\n  }\n}\n\nconst PLASMIC_IMAGE_LOADER: ImageLoader = {\n  supportsUrl: (src) => {\n    return src.startsWith(\"https://img.plasmic.app\") && !isSvg(src);\n  },\n  transformUrl: (opts) => {\n    const params = [\n      opts.width ? `w=${opts.width}` : undefined,\n      `q=${opts.quality ?? 75}`,\n      opts.format ? `f=${opts.format}` : undefined,\n    ].filter((x) => !!x);\n    return `${opts.src}?${params.join(\"&\")}`;\n  },\n};\n"],"names":["React"],"mappings":"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"}

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

@@ -1,4 +1,5 @@
 import * as React from "react";
+import { $State } from "../states/valtio";
 interface Variants {
     [vg: string]: any;
 }
@@ -54,6 +55,10 @@ export declare function wrapWithClassName(element: React.ReactNode, className: s
         display: "grid";
     };
 }, HTMLElement>;
+export declare function mergeVariantsWithStates(variants: Variants, $state: $State, linkedStates: {
+    variantGroup: string;
+    statePath: (string | number)[];
+}[]): Variants;
 export declare function deriveRenderOpts(props: Record<string, any>, config: {
     name: string;
     descendantNames: string[];

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

@@ -1,6 +1,7 @@
 import { useIsSSR as useAriaIsSSR } from "@react-aria/ssr";
 import * as React from "react";
 import { PlasmicTranslator } from "./translation";
+export { PlasmicDataSourceContextProvider, useCurrentUser, } from "@plasmicapp/data-sources-context";
 export interface PlasmicRootContextValue {
     platform?: "nextjs" | "gatsby";
 }

package/skinny/dist/{ssr-b1615b80.js → ssr-b16a1854.js}

@@ -1,3 +1,4 @@
+import { PlasmicDataSourceContextProvider } from '@plasmicapp/data-sources-context';
 import { SSRProvider, useIsSSR as useIsSSR$1 } from '@react-aria/ssr';
 import * as React from 'react';
 import React__default from 'react';
@@ -33,10 +34,10 @@ function genTranslatableString(elt) {
             node.props.children) ||
             (hasKey(node, "children") && node.children) ||
             [];
-        var contents = "" + React__default.Children.toArray(nodeChildren)
+        var contents = "".concat(React__default.Children.toArray(nodeChildren)
             .map(function (child) { return getText(child); })
             .filter(function (child) { return !!child; })
-            .join("");
+            .join(""));
         if (React__default.isValidElement(node) && node.type === React__default.Fragment) {
             return contents;
         }
@@ -45,16 +46,16 @@ function genTranslatableString(elt) {
         components[componentId] = React__default.isValidElement(node)
             ? React__default.cloneElement(node, {
                 key: componentId,
-                children: undefined,
+                children: undefined
             })
             : node;
-        return "<" + componentId + ">" + contents + "</" + componentId + ">";
+        return "<".concat(componentId, ">").concat(contents, "</").concat(componentId, ">");
     };
     var str = getText(elt);
     return {
         str: str,
         components: components,
-        componentsCount: componentsCount,
+        componentsCount: componentsCount
     };
 }
 function Trans(_a) {
@@ -80,14 +81,19 @@ function hasKey(v, key) {
 
 var PlasmicRootContext = React.createContext(undefined);
 function PlasmicRootProvider(props) {
-    var platform = props.platform, children = props.children;
+    var _a = props, platform = _a.platform, children = _a.children, userAuthToken = _a.userAuthToken, user = _a.user;
     var context = React.useMemo(function () { return ({
-        platform: platform,
+        platform: platform
     }); }, [platform]);
+    var dataSourceContextValue = React.useMemo(function () { return ({
+        userAuthToken: userAuthToken,
+        user: user
+    }); }, [userAuthToken, user]);
     return (React.createElement(PlasmicRootContext.Provider, { value: context },
         React.createElement(SSRProvider, null,
-            React.createElement(PlasmicTranslatorContext.Provider, { value: props.translator },
-                React.createElement(PlasmicHeadContext.Provider, { value: props.Head }, children)))));
+            React.createElement(PlasmicDataSourceContextProvider, { value: dataSourceContextValue },
+                React.createElement(PlasmicTranslatorContext.Provider, { value: props.translator },
+                    React.createElement(PlasmicHeadContext.Provider, { value: props.Head }, children))))));
 }
 var useIsSSR = useIsSSR$1;
 function useHasPlasmicRoot() {
@@ -107,4 +113,4 @@ function useEnsureSSRProvider() {
 }
 
 export { PlasmicRootProvider as P, Trans as T, useEnsureSSRProvider as a, genTranslatableString as g, useIsSSR as u };
-//# sourceMappingURL=ssr-b1615b80.js.map
+//# sourceMappingURL=ssr-b16a1854.js.map

package/skinny/dist/ssr-b16a1854.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ssr-b16a1854.js","sources":["../../src/render/translation.tsx","../../src/render/ssr.tsx"],"sourcesContent":["import React from \"react\";\n\nexport type PlasmicTranslator = (\n  str: string,\n  opts?: {\n    components?: {\n      [key: string]: React.ReactElement;\n    };\n  }\n) => React.ReactNode;\n\nexport const PlasmicTranslatorContext =\n  React.createContext<PlasmicTranslator | undefined>(undefined);\n\nexport interface TransProps {\n  children?: React.ReactNode;\n}\n\nfunction isIterable(val: any): val is Iterable<any> {\n  return val != null && typeof val[Symbol.iterator] === \"function\";\n}\n\nexport function genTranslatableString(elt: React.ReactNode) {\n  const components: {\n    [key: string]: React.ReactElement;\n  } = {};\n  let componentsCount = 0;\n\n  const getText = (node: React.ReactNode): string => {\n    if (!node) {\n      return \"\";\n    }\n    if (\n      typeof node === \"number\" ||\n      typeof node === \"boolean\" ||\n      typeof node === \"string\"\n    ) {\n      return node.toString();\n    }\n    if (typeof node !== \"object\") {\n      return \"\";\n    }\n    if (Array.isArray(node) || isIterable(node)) {\n      return Array.from(node)\n        .map((child) => getText(child))\n        .filter((child) => !!child)\n        .join(\"\");\n    }\n    const nodeChildren: React.ReactNode =\n      (hasKey(node, \"props\") &&\n        hasKey(node.props, \"children\") &&\n        (node.props.children as React.ReactNode | undefined)) ||\n      (hasKey(node, \"children\") && node.children) ||\n      [];\n    const contents = `${React.Children.toArray(nodeChildren)\n      .map((child) => getText(child))\n      .filter((child) => !!child)\n      .join(\"\")}`;\n    if (React.isValidElement(node) && node.type === React.Fragment) {\n      return contents;\n    }\n    const componentId = componentsCount + 1;\n    componentsCount++;\n    components[componentId] = React.isValidElement(node)\n      ? React.cloneElement(node as any, {\n          key: componentId,\n          children: undefined,\n        })\n      : (node as never);\n    return `<${componentId}>${contents}</${componentId}>`;\n  };\n\n  const str = getText(elt);\n  return {\n    str,\n    components,\n    componentsCount,\n  };\n}\n\nexport function Trans({ children }: TransProps) {\n  const _t = React.useContext(PlasmicTranslatorContext);\n  if (!_t) {\n    warnNoTranslationFunctionAtMostOnce();\n    return children;\n  }\n\n  const { str, components, componentsCount } = genTranslatableString(children);\n  return _t(str, componentsCount > 0 ? { components } : undefined);\n}\n\nlet hasWarned = false;\nfunction warnNoTranslationFunctionAtMostOnce() {\n  if (!hasWarned) {\n    console.warn(\n      \"Using Plasmic Translation but no translation function has been provided\"\n    );\n    hasWarned = true;\n  }\n}\n\nfunction hasKey<K extends string>(v: any, key: K): v is Record<K, any> {\n  return typeof v === \"object\" && v !== null && key in v;\n}\n","import { PlasmicDataSourceContextProvider } from \"@plasmicapp/data-sources-context\";\nimport { SSRProvider, useIsSSR as useAriaIsSSR } from \"@react-aria/ssr\";\nimport * as React from \"react\";\nimport { PlasmicHeadContext } from \"./PlasmicHead\";\nimport { PlasmicTranslator, PlasmicTranslatorContext } from \"./translation\";\nexport {\n  PlasmicDataSourceContextProvider,\n  useCurrentUser,\n} from \"@plasmicapp/data-sources-context\";\n\nexport interface PlasmicRootContextValue {\n  platform?: \"nextjs\" | \"gatsby\";\n}\n\nconst PlasmicRootContext = React.createContext<\n  PlasmicRootContextValue | undefined\n>(undefined);\n\nexport interface PlasmicRootProviderProps {\n  platform?: \"nextjs\" | \"gatsby\";\n  children?: React.ReactNode;\n  translator?: PlasmicTranslator;\n  Head?: React.ComponentType<any>;\n}\n\nexport function PlasmicRootProvider(props: PlasmicRootProviderProps) {\n  const { platform, children, userAuthToken, user } = props as any;\n  const context = React.useMemo(\n    () => ({\n      platform,\n    }),\n    [platform]\n  );\n  const dataSourceContextValue = React.useMemo(\n    () => ({\n      userAuthToken,\n      user,\n    }),\n    [userAuthToken, user]\n  );\n  return (\n    <PlasmicRootContext.Provider value={context}>\n      <SSRProvider>\n        <PlasmicDataSourceContextProvider value={dataSourceContextValue}>\n          <PlasmicTranslatorContext.Provider value={props.translator}>\n            <PlasmicHeadContext.Provider value={props.Head}>\n              {children}\n            </PlasmicHeadContext.Provider>\n          </PlasmicTranslatorContext.Provider>\n        </PlasmicDataSourceContextProvider>\n      </SSRProvider>\n    </PlasmicRootContext.Provider>\n  );\n}\n\nexport const useIsSSR = useAriaIsSSR;\n\nexport function useHasPlasmicRoot() {\n  return !!React.useContext(PlasmicRootContext);\n}\n\nlet hasWarnedSSR = false;\n/**\n * Warns the user if PlasmicRootProvider is not used\n */\nexport function useEnsureSSRProvider() {\n  const hasRoot = useHasPlasmicRoot();\n  if (hasRoot || hasWarnedSSR || process.env.NODE_ENV !== \"development\") {\n    return;\n  }\n\n  hasWarnedSSR = true;\n  console.warn(\n    `Plasmic: To ensure your components work correctly with server-side rendering, please use PlasmicRootProvider at the root of your application.  See https://docs.plasmic.app/learn/ssr`\n  );\n}\n"],"names":["React","useAriaIsSSR"],"mappings":";;;;;;AAWO,IAAM,wBAAwB,GACnCA,cAAK,CAAC,aAAa,CAAgC,SAAS,CAAC,CAAC;AAMhE,SAAS,UAAU,CAAC,GAAQ;IAC1B,OAAO,GAAG,IAAI,IAAI,IAAI,OAAO,GAAG,CAAC,MAAM,CAAC,QAAQ,CAAC,KAAK,UAAU,CAAC;AACnE,CAAC;SAEe,qBAAqB,CAAC,GAAoB;IACxD,IAAM,UAAU,GAEZ,EAAE,CAAC;IACP,IAAI,eAAe,GAAG,CAAC,CAAC;IAExB,IAAM,OAAO,GAAG,UAAC,IAAqB;QACpC,IAAI,CAAC,IAAI,EAAE;YACT,OAAO,EAAE,CAAC;SACX;QACD,IACE,OAAO,IAAI,KAAK,QAAQ;YACxB,OAAO,IAAI,KAAK,SAAS;YACzB,OAAO,IAAI,KAAK,QAAQ,EACxB;YACA,OAAO,IAAI,CAAC,QAAQ,EAAE,CAAC;SACxB;QACD,IAAI,OAAO,IAAI,KAAK,QAAQ,EAAE;YAC5B,OAAO,EAAE,CAAC;SACX;QACD,IAAI,KAAK,CAAC,OAAO,CAAC,IAAI,CAAC,IAAI,UAAU,CAAC,IAAI,CAAC,EAAE;YAC3C,OAAO,KAAK,CAAC,IAAI,CAAC,IAAI,CAAC;iBACpB,GAAG,CAAC,UAAC,KAAK,IAAK,OAAA,OAAO,CAAC,KAAK,CAAC,GAAA,CAAC;iBAC9B,MAAM,CAAC,UAAC,KAAK,IAAK,OAAA,CAAC,CAAC,KAAK,GAAA,CAAC;iBAC1B,IAAI,CAAC,EAAE,CAAC,CAAC;SACb;QACD,IAAM,YAAY,GAChB,CAAC,MAAM,CAAC,IAAI,EAAE,OAAO,CAAC;YACpB,MAAM,CAAC,IAAI,CAAC,KAAK,EAAE,UAAU,CAAC;YAC7B,IAAI,CAAC,KAAK,CAAC,QAAwC;aACrD,MAAM,CAAC,IAAI,EAAE,UAAU,CAAC,IAAI,IAAI,CAAC,QAAQ,CAAC;YAC3C,EAAE,CAAC;QACL,IAAM,QAAQ,GAAG,UAAGA,cAAK,CAAC,QAAQ,CAAC,OAAO,CAAC,YAAY,CAAC;aACrD,GAAG,CAAC,UAAC,KAAK,IAAK,OAAA,OAAO,CAAC,KAAK,CAAC,GAAA,CAAC;aAC9B,MAAM,CAAC,UAAC,KAAK,IAAK,OAAA,CAAC,CAAC,KAAK,GAAA,CAAC;aAC1B,IAAI,CAAC,EAAE,CAAC,CAAE,CAAC;QACd,IAAIA,cAAK,CAAC,cAAc,CAAC,IAAI,CAAC,IAAI,IAAI,CAAC,IAAI,KAAKA,cAAK,CAAC,QAAQ,EAAE;YAC9D,OAAO,QAAQ,CAAC;SACjB;QACD,IAAM,WAAW,GAAG,eAAe,GAAG,CAAC,CAAC;QACxC,eAAe,EAAE,CAAC;QAClB,UAAU,CAAC,WAAW,CAAC,GAAGA,cAAK,CAAC,cAAc,CAAC,IAAI,CAAC;cAChDA,cAAK,CAAC,YAAY,CAAC,IAAW,EAAE;gBAC9B,GAAG,EAAE,WAAW;gBAChB,QAAQ,EAAE,SAAS;aACpB,CAAC;cACD,IAAc,CAAC;QACpB,OAAO,WAAI,WAAW,cAAI,QAAQ,eAAK,WAAW,MAAG,CAAC;KACvD,CAAC;IAEF,IAAM,GAAG,GAAG,OAAO,CAAC,GAAG,CAAC,CAAC;IACzB,OAAO;QACL,GAAG,KAAA;QACH,UAAU,YAAA;QACV,eAAe,iBAAA;KAChB,CAAC;AACJ,CAAC;SAEe,KAAK,CAAC,EAAwB;QAAtB,QAAQ,cAAA;IAC9B,IAAM,EAAE,GAAGA,cAAK,CAAC,UAAU,CAAC,wBAAwB,CAAC,CAAC;IACtD,IAAI,CAAC,EAAE,EAAE;QACP,mCAAmC,EAAE,CAAC;QACtC,OAAO,QAAQ,CAAC;KACjB;IAEK,IAAA,KAAuC,qBAAqB,CAAC,QAAQ,CAAC,EAApE,GAAG,SAAA,EAAE,UAAU,gBAAA,EAAE,eAAe,qBAAoC,CAAC;IAC7E,OAAO,EAAE,CAAC,GAAG,EAAE,eAAe,GAAG,CAAC,GAAG,EAAE,UAAU,YAAA,EAAE,GAAG,SAAS,CAAC,CAAC;AACnE,CAAC;AAED,IAAI,SAAS,GAAG,KAAK,CAAC;AACtB,SAAS,mCAAmC;IAC1C,IAAI,CAAC,SAAS,EAAE;QACd,OAAO,CAAC,IAAI,CACV,yEAAyE,CAC1E,CAAC;QACF,SAAS,GAAG,IAAI,CAAC;KAClB;AACH,CAAC;AAED,SAAS,MAAM,CAAmB,CAAM,EAAE,GAAM;IAC9C,OAAO,OAAO,CAAC,KAAK,QAAQ,IAAI,CAAC,KAAK,IAAI,IAAI,GAAG,IAAI,CAAC,CAAC;AACzD;;ACzFA,IAAM,kBAAkB,GAAG,KAAK,CAAC,aAAa,CAE5C,SAAS,CAAC,CAAC;SASG,mBAAmB,CAAC,KAA+B;IAC3D,IAAA,KAA8C,KAAY,EAAxD,QAAQ,cAAA,EAAE,QAAQ,cAAA,EAAE,aAAa,mBAAA,EAAE,IAAI,UAAiB,CAAC;IACjE,IAAM,OAAO,GAAG,KAAK,CAAC,OAAO,CAC3B,cAAM,QAAC;QACL,QAAQ,UAAA;KACT,IAAC,EACF,CAAC,QAAQ,CAAC,CACX,CAAC;IACF,IAAM,sBAAsB,GAAG,KAAK,CAAC,OAAO,CAC1C,cAAM,QAAC;QACL,aAAa,eAAA;QACb,IAAI,MAAA;KACL,IAAC,EACF,CAAC,aAAa,EAAE,IAAI,CAAC,CACtB,CAAC;IACF,QACE,oBAAC,kBAAkB,CAAC,QAAQ,IAAC,KAAK,EAAE,OAAO;QACzC,oBAAC,WAAW;YACV,oBAAC,gCAAgC,IAAC,KAAK,EAAE,sBAAsB;gBAC7D,oBAAC,wBAAwB,CAAC,QAAQ,IAAC,KAAK,EAAE,KAAK,CAAC,UAAU;oBACxD,oBAAC,kBAAkB,CAAC,QAAQ,IAAC,KAAK,EAAE,KAAK,CAAC,IAAI,IAC3C,QAAQ,CACmB,CACI,CACH,CACvB,CACc,EAC9B;AACJ,CAAC;IAEY,QAAQ,GAAGC,WAAa;SAErB,iBAAiB;IAC/B,OAAO,CAAC,CAAC,KAAK,CAAC,UAAU,CAAC,kBAAkB,CAAC,CAAC;AAChD,CAAC;AAED,IAAI,YAAY,GAAG,KAAK,CAAC;AACzB;;;SAGgB,oBAAoB;IAClC,IAAM,OAAO,GAAG,iBAAiB,EAAE,CAAC;IACpC,IAAI,OAAO,IAAI,YAAY,IAAI,OAAO,CAAC,GAAG,CAAC,QAAQ,KAAK,aAAa,EAAE;QACrE,OAAO;KACR;IAED,YAAY,GAAG,IAAI,CAAC;IACpB,OAAO,CAAC,IAAI,CACV,uLAAuL,CACxL,CAAC;AACJ;;;;"}

package/skinny/dist/states/helpers.d.ts

@@ -7,3 +7,8 @@ export declare function generateStateOnChangeProp($state: $State, stateName: str
  * We need to pass `parent[index1][index2].counter to the child component
  */
 export declare function generateStateValueProp($state: $State, path: (string | number)[]): any;
+/**
+ * Forked from https://github.com/lukeed/dset
+ * Changes: fixed setting a deep value to a proxy object
+ */
+export declare function set(obj: any, keys: any, val: any): void;

package/skinny/dist/states/index.d.ts

@@ -1,7 +1,7 @@
 declare type InitFunc<T> = ($props: Record<string, any>, $state: $State) => T;
 export interface $State {
     [key: string]: any;
-    registerInitFunc: (path: string, f: InitFunc<any>) => any;
+    registerInitFunc?: (path: string, f: InitFunc<any>) => any;
 }
 export interface $StateSpec<T> {
     path: string;

package/skinny/dist/states/valtio.d.ts

@@ -0,0 +1,16 @@
+declare type InitFunc<T> = ($props: Record<string, any>, $state: $State, indexes: number[]) => T;
+export interface $State {
+    [key: string]: any;
+    registerInitFunc?: (path: string, f: InitFunc<any>) => any;
+}
+export interface $StateSpec<T> {
+    path: string;
+    initFunc?: InitFunc<T>;
+    initVal?: T;
+    type: "private" | "readonly" | "writable";
+    valueProp?: string;
+    onChangeProp?: string;
+}
+export declare function useDollarState(specs: $StateSpec<any>[], props: Record<string, any>): any;
+export default useDollarState;
+export declare function useCanvasDollarState(specs: $StateSpec<any>[], props: Record<string, any>): any;

package/skinny/dist/stories/UseDollarState.stories.d.ts

@@ -39,3 +39,14 @@ export declare const InitFuncFromContextData: Story<{
     }[];
 }>;
 export declare const RepeatedImplicitState: Story<{}>;
+interface Person {
+    firstName: string;
+    lastName: string;
+    nicknames: string[];
+}
+export declare const FormBuilder: Story<{
+    people: Person[];
+}>;
+export declare const FormBuilderImplicitStates: Story<{
+    people: Person[];
+}>;