@plasmicapp/react-web 0.2.79 → 0.2.83

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 from \"react\";\nimport { pick } from \"../../common\";\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: string | { src: string; fullHeight: number; fullWidth: number };\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   * 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 wrapper element.  The normal <PlasmicImg ref={...} />\n   * prop gives you the wrap to the img element.\n   */\n  containerRef?: React.Ref<HTMLDivElement>;\n}\n\nexport const PlasmicImg = React.forwardRef(function PlasmicImg(\n  props: PlasmicImgProps,\n  ref: React.Ref<HTMLImageElement>\n) {\n  const {\n    src,\n    className,\n    displayWidth,\n    displayHeight,\n    quality,\n    loader,\n    containerRef,\n    style,\n    ...rest\n  } = props;\n\n  const { fullWidth, fullHeight } =\n    typeof src === \"string\"\n      ? { fullWidth: undefined, fullHeight: undefined }\n      : src;\n  const srcStr = typeof src === \"string\" ? src : src.src;\n\n  // Assume external image if either dimension is null and use usual <img>\n  // (or if the image is an SVG)\n  if (fullHeight == null || fullWidth == null || srcStr.endsWith(\".svg\")) {\n    return (\n      <img\n        src={srcStr}\n        className={className}\n        style={style}\n        {...rest}\n        ref={ref}\n      />\n    );\n  }\n\n  const { sizes, widthDescs } = getWidths(displayWidth, fullWidth);\n  const imageLoader = getImageLoader(loader);\n  const spacerSvg = `<svg width=\"${fullWidth}\" height=\"${fullHeight}\" 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  return (\n    <div\n      className={classNames(className, \"__wab_img-wrapper\")}\n      ref={containerRef}\n      style={{\n        ...style,\n        width: isPercentage(displayWidth) ? displayWidth : undefined,\n        height: isPercentage(displayHeight) ? displayHeight : undefined,\n      }}\n    >\n      <img\n        alt=\"\"\n        aria-hidden\n        className=\"__wab_img-spacer-svg\"\n        src={`data:image/svg+xml;base64,${spacerSvgBase64}`}\n        style={{\n          width: isPercentage(displayWidth) ? \"100%\" : displayWidth,\n          height: isPercentage(displayHeight) ? \"100%\" : displayHeight,\n          ...(style ? pick(style, \"objectFit\", \"objectPosition\") : {}),\n        }}\n      />\n      {makePicture({\n        imageLoader,\n        widthDescs,\n        sizes,\n        src: srcStr,\n        quality,\n        ref,\n        style: style ? pick(style, \"objectFit\", \"objectPosition\") : undefined,\n        imgProps: rest,\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 ? sizes : undefined}\n        style={style ? pick(style, \"objectFit\", \"objectPosition\") : undefined}\n      />\n    </picture>\n  );\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): { sizes: string | undefined; widthDescs: WidthDesc[] } {\n  const pixelWidth = getPixelWidth(width);\n  if (pixelWidth != 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(pixelWidth, fullWidth),\n          desc: \"1x\",\n        },\n        {\n          width: getClosestPresetSize(pixelWidth * 2, fullWidth),\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, i) => ({\n      width:\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 isPercentage(width: number | string | undefined) {\n  if (typeof width !== \"string\") {\n    return false;\n  }\n  return parseNumeric(width)?.units === \"%\";\n}\n\nfunction getPixelWidth(width: number | string | undefined) {\n  if (width == null || width == \"\") {\n    return undefined;\n  }\n\n  if (typeof width === \"number\") {\n    return width;\n  }\n\n  const parsed = parseNumeric(width);\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\");\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\";\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?: string | { src: string; fullHeight: number; fullWidth: number };\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 wrapper element.  The normal <PlasmicImg ref={...} />\n   * prop gives you the wrap to the img element.\n   */\n  containerRef?: React.Ref<HTMLDivElement>;\n}\n\nexport const PlasmicImg = React.forwardRef(function PlasmicImg(\n  props: PlasmicImgProps,\n  ref: React.Ref<HTMLImageElement>\n) {\n  let {\n    src,\n    className,\n    displayWidth,\n    displayHeight,\n    displayMinWidth,\n    displayMinHeight,\n    displayMaxWidth,\n    displayMaxHeight,\n    quality,\n    loader,\n    containerRef,\n    style,\n    ...rest\n  } = props;\n\n  const { fullWidth, fullHeight } =\n    typeof src === \"string\" || !src\n      ? { fullWidth: undefined, fullHeight: undefined }\n      : src;\n  const srcStr = src ? (typeof src === \"string\" ? src : src.src) : \"\";\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        {...rest}\n        ref={ref}\n      />\n    );\n  }\n\n  if (isSvg(srcStr) && (displayHeight == null || displayHeight === \"auto\") && (displayWidth == null || displayWidth === \"auto\")) {\n    displayWidth = \"100%\";\n  }\n\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    displayWidth = (getPixelLength(displayHeight)! * fullWidth) / fullHeight;\n  }\n\n  const { sizes, widthDescs } = getWidths(displayWidth, fullWidth, {minWidth: displayMinWidth} );\n  const imageLoader = getImageLoader(loader);\n  const spacerSvg = `<svg width=\"${fullWidth}\" height=\"${fullHeight}\" 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 = pick(style || {}, \"objectFit\", \"objectPosition\");\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    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      wrapperStyle.minWidth = displayMinWidth;\n    }\n    if (displayMaxWidth != null && displayMaxWidth !== \"none\") {\n      spacerStyle.maxWidth = \"100%\";\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={containerRef}\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,\n        style: style ? pick(style, \"objectFit\", \"objectPosition\") : undefined,\n        imgProps: rest,\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\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(Math.max(pixelWidth, pixelMinWidth ?? 0), fullWidth),\n          desc: \"1x\",\n        },\n        {\n          width: getClosestPresetSize(Math.max(pixelWidth, pixelMinWidth ?? 0) * 2, fullWidth),\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":";;;;AAAA;;;AAuBA;AACA;AACA,IAAM,SAAS,GAAG,CAAC,EAAE,EAAE,EAAE,EAAE,EAAE,EAAE,EAAE,EAAE,EAAE,EAAE,GAAG,EAAE,GAAG,EAAE,GAAG,CAAC,CAAC;AACtD,IAAM,YAAY,GAAG,CAAC,GAAG,EAAE,GAAG,EAAE,GAAG,EAAE,IAAI,EAAE,IAAI,EAAE,IAAI,EAAE,IAAI,EAAE,IAAI,CAAC,CAAC;AACnE,IAAM,SAAS,mCAAO,SAAS,GAAK,YAAY,CAAC,CAAC;IAoErC,UAAU,GAAGA,cAAK,CAAC,UAAU,CAAC,SAAS,UAAU,CAC5D,KAAsB,EACtB,GAAgC;IAG9B,IAAA,GAAG,GAaD,KAAK,IAbJ,EACH,SAAS,GAYP,KAAK,UAZE,EACT,YAAY,GAWV,KAAK,aAXK,EACZ,aAAa,GAUX,KAAK,cAVM,EACb,eAAe,GASb,KAAK,gBATQ,EACf,gBAAgB,GAQd,KAAK,iBARS,EAChB,eAAe,GAOb,KAAK,gBAPQ,EACf,gBAAgB,GAMd,KAAK,iBANS,EAChB,OAAO,GAKL,KAAK,QALA,EACP,MAAM,GAIJ,KAAK,OAJD,EACN,YAAY,GAGV,KAAK,aAHK,EACZ,KAAK,GAEH,KAAK,MAFF,EACF,IAAI,UACL,KAAK,EAdL,iLAcH,CADQ,CACC;IAEJ,IAAA,KACJ,OAAO,GAAG,KAAK,QAAQ,IAAI,CAAC,GAAG;UAC3B,EAAE,SAAS,EAAE,SAAS,EAAE,UAAU,EAAE,SAAS,EAAE;UAC/C,GAAG,EAHD,SAAS,eAAA,EAAE,UAAU,gBAGpB,CAAC;IACV,IAAM,MAAM,GAAG,GAAG,IAAI,OAAO,GAAG,KAAK,QAAQ,GAAG,GAAG,GAAG,GAAG,CAAC,GAAG,IAAI,EAAE,CAAC;;IAGpE,IAAI,UAAU,IAAI,IAAI,IAAI,SAAS,IAAI,IAAI,EAAE;QAC3C,QACEA,+CACE,GAAG,EAAE,MAAM,EACX,SAAS,EAAE,SAAS,EACpB,KAAK,EAAE,KAAK,IACR,IAAI,IACR,GAAG,EAAE,GAAG,IACR,EACF;KACH;IAED,IAAI,KAAK,CAAC,MAAM,CAAC,KAAK,aAAa,IAAI,IAAI,IAAI,aAAa,KAAK,MAAM,CAAC,KAAK,YAAY,IAAI,IAAI,IAAI,YAAY,KAAK,MAAM,CAAC,EAAE;QAC7H,YAAY,GAAG,MAAM,CAAC;KACvB;IAED,IACE,SAAS;QACT,UAAU;SACT,CAAC,YAAY,IAAI,YAAY,KAAK,MAAM,CAAC;QAC1C,CAAC,CAAC,cAAc,CAAC,aAAa,CAAC,EAC/B;;;;;QAKA,YAAY,GAAG,CAAC,cAAc,CAAC,aAAa,CAAE,GAAG,SAAS,IAAI,UAAU,CAAC;KAC1E;IAEK,IAAA,KAAwB,SAAS,CAAC,YAAY,EAAE,SAAS,EAAE,EAAC,QAAQ,EAAE,eAAe,EAAC,CAAE,EAAtF,KAAK,WAAA,EAAE,UAAU,gBAAqE,CAAC;IAC/F,IAAM,WAAW,GAAG,cAAc,CAAC,MAAM,CAAC,CAAC;IAC3C,IAAM,SAAS,GAAG,kBAAe,SAAS,oBAAa,UAAU,8DAAsD,CAAC;IACxH,IAAM,eAAe,GACnB,OAAO,MAAM,KAAK,WAAW;UACzB,MAAM,CAAC,IAAI,CAAC,SAAS,CAAC,CAAC,QAAQ,CAAC,QAAQ,CAAC;UACzC,MAAM,CAAC,IAAI,CAAC,SAAS,CAAC,CAAC;IAE7B,IAAI,YAAY,iBAAuB,KAAK,IAAI,EAAE,EAAE,CAAC;IACrD,IAAI,WAAW,GAAkB,IAAI,CAAC,KAAK,IAAI,EAAE,EAAE,WAAW,EAAE,gBAAgB,CAAC,CAAC;IAElF,IAAI,YAAY,IAAI,IAAI,IAAI,YAAY,KAAK,MAAM,EAAE;;;QAGnD,WAAW,CAAC,KAAK,GAAG,MAAM,CAAC;QAC3B,YAAY,CAAC,KAAK,GAAG,YAAY,CAAC;QAClC,YAAY,CAAC,QAAQ,GAAG,eAAe,CAAC;QACxC,YAAY,CAAC,QAAQ,GAAG,eAAe,CAAC;KACzC;SAAM;;;;;;;;QAQL,WAAW,CAAC,KAAK,GAAG,YAAY,CAAC;QACjC,YAAY,CAAC,KAAK,GAAG,MAAM,CAAC;QAC5B,IAAI,eAAe,EAAE;YACnB,WAAW,CAAC,QAAQ,GAAG,MAAM,CAAC;YAC9B,YAAY,CAAC,QAAQ,GAAG,eAAe,CAAC;SACzC;QACD,IAAI,eAAe,IAAI,IAAI,IAAI,eAAe,KAAK,MAAM,EAAE;YACzD,WAAW,CAAC,QAAQ,GAAG,MAAM,CAAC;YAC9B,YAAY,CAAC,QAAQ,GAAG,eAAe,CAAC;SACzC;KACF;IAED,IAAI,aAAa,IAAI,IAAI,IAAI,aAAa,KAAK,MAAM,EAAE;QACrD,WAAW,CAAC,MAAM,GAAG,MAAM,CAAC;QAC5B,YAAY,CAAC,MAAM,GAAG,aAAa,CAAC;QACpC,YAAY,CAAC,SAAS,GAAG,gBAAgB,CAAC;QAC1C,YAAY,CAAC,SAAS,GAAG,gBAAgB,CAAC;KAC3C;SAAM;QACL,WAAW,CAAC,MAAM,GAAG,aAAa,CAAC;QACnC,YAAY,CAAC,MAAM,GAAG,MAAM,CAAC;QAC7B,IAAI,gBAAgB,EAAE;YACpB,WAAW,CAAC,SAAS,GAAG,MAAM,CAAC;YAC/B,YAAY,CAAC,SAAS,GAAG,gBAAgB,CAAC;SAC3C;QACD,IAAI,gBAAgB,IAAI,IAAI,IAAI,gBAAgB,KAAK,MAAM,EAAE;YAC3D,WAAW,CAAC,SAAS,GAAG,MAAM,CAAC;YAC/B,YAAY,CAAC,SAAS,GAAG,gBAAgB,CAAC;SAC3C;KACF;IAED,QACEA,sCACE,SAAS,EAAE,UAAU,CAAC,SAAS,EAAE,mBAAmB,CAAC,EACrD,GAAG,EAAE,YAAY,EACjB,KAAK,EAAE,YAAY;QAEnBA,sCACE,GAAG,EAAC,EAAE,uBAEN,SAAS,EAAC,sBAAsB,EAChC,GAAG,EAAE,+BAA6B,eAAiB,EACnD,KAAK,EAAE,WAAW,GAClB;QACD,WAAW,CAAC;YACX,WAAW,aAAA;YACX,UAAU,YAAA;YACV,KAAK,OAAA;YACL,GAAG,EAAE,MAAM;YACX,OAAO,SAAA;YACP,GAAG,KAAA;YACH,KAAK,EAAE,KAAK,GAAG,IAAI,CAAC,KAAK,EAAE,WAAW,EAAE,gBAAgB,CAAC,GAAG,SAAS;YACrE,QAAQ,EAAE,IAAI;YACd,SAAS,EAAE,WAAW;SACvB,CAAC,CACE,EACN;AACJ,CAAC,EAAE;AAEH,SAAS,WAAW,CAAC,IAUpB;;;;IAKG,IAAA,WAAW,GAST,IAAI,YATK,EACX,UAAU,GAQR,IAAI,WARI,EACV,GAAG,GAOD,IAAI,IAPH,EACH,OAAO,GAML,IAAI,QANC,EACP,KAAK,GAKH,IAAI,MALD,EACL,SAAS,GAIP,IAAI,UAJG,EACT,KAAK,GAGH,IAAI,MAHD,EACL,QAAQ,GAEN,IAAI,SAFE,EACR,GAAG,GACD,IAAI,IADH,CACI;IACT,QACEA,0CAAS,SAAS,EAAC,eAAe;QAC/B,WAAW,IAAI,WAAW,CAAC,WAAW,CAAC,GAAG,CAAC,KAC1CA,yCACE,IAAI,EAAC,YAAY,EACjB,MAAM,EAAE,UAAU;iBACf,GAAG,CACF,UAAC,EAAE;gBACD,OAAG,WAAW,CAAC,YAAY,CAAC;oBAC1B,GAAG,KAAA;oBACH,OAAO,SAAA;oBACP,KAAK,EAAE,EAAE,CAAC,KAAK;oBACf,MAAM,EAAE,MAAM;iBACf,CAAC,SAAI,EAAE,CAAC,IAAM;aAAA,CAClB;iBACA,IAAI,CAAC,IAAI,CAAC,GACb,CACH;QACDA,iDACM,QAAQ,IACZ,GAAG,EAAE,GAAG,EACR,SAAS,EAAE,SAAS,EACpB,QAAQ,EAAC,OAAO,EAChB,GAAG,EACD,WAAW,IAAI,WAAW,CAAC,WAAW,CAAC,GAAG,CAAC;kBACvC,WAAW,CAAC,YAAY,CAAC;oBACvB,GAAG,KAAA;oBACH,OAAO,SAAA;oBACP,KAAK,EAAE,UAAU,CAAC,UAAU,CAAC,MAAM,GAAG,CAAC,CAAC,CAAC,KAAK;iBAC/C,CAAC;kBACF,GAAG,EAET,MAAM,EACJ,WAAW,IAAI,WAAW,CAAC,WAAW,CAAC,GAAG,CAAC;kBACvC,UAAU;qBACP,GAAG,CACF,UAAC,EAAE;oBACD,OAAG,WAAW,CAAC,YAAY,CAAC;wBAC1B,GAAG,KAAA;wBACH,OAAO,SAAA;wBACP,KAAK,EAAE,EAAE,CAAC,KAAK;qBAChB,CAAC,SAAI,EAAE,CAAC,IAAM;iBAAA,CAClB;qBACA,IAAI,CAAC,IAAI,CAAC;kBACb,SAAS,EAEf,KAAK,EAAE,WAAW,IAAI,WAAW,CAAC,WAAW,CAAC,GAAG,CAAC,GAAG,KAAK,GAAG,SAAS,EACtE,KAAK,yBACC,KAAK,GAAG,IAAI,CAAC,KAAK,EAAE,WAAW,EAAE,gBAAgB,CAAC,GAAG,EAAE,MAC3D,KAAK,EAAE,CAAC,EACR,MAAM,EAAE,CAAC,OAEX,CACM,EACV;AACJ,CAAC;AAED,SAAS,KAAK,CAAC,GAAW;IACxB,QAAQ,GAAG,CAAC,QAAQ,CAAC,MAAM,CAAC,IAAI,GAAG,CAAC,UAAU,CAAC,gBAAgB,CAAC,EAAE;AACpE,CAAC;AAOD,SAAS,oBAAoB,CAAC,KAAa,EAAE,SAAiB;;IAC5D,IAAM,eAAe,GACnB,MAAA,SAAS,CAAC,SAAS,CAAC,UAAC,CAAC,IAAK,OAAA,CAAC,IAAI,KAAK,GAAA,CAAC,mCAAI,SAAS,CAAC,MAAM,GAAG,CAAC,CAAC;IACjE,IAAM,UAAU,GAAG,SAAS,CAAC,eAAe,CAAC,CAAC;IAC9C,IAAI,UAAU,IAAI,SAAS,EAAE;;;;QAI3B,OAAO,SAAS,CAAC;KAClB;SAAM,IACL,eAAe,GAAG,CAAC,GAAG,SAAS,CAAC,MAAM;QACtC,SAAS,IAAI,SAAS,CAAC,eAAe,GAAG,CAAC,CAAC,EAC3C;;;;;QAKA,OAAO,SAAS,CAAC;KAClB;IAED,OAAO,UAAU,CAAC;AACpB,CAAC;AAED;;;AAGA,SAAS,SAAS,CAChB,KAAkC,EAClC,SAAiB,EACjB,KAAgD;IAEhD,IAAM,QAAQ,GAAG,KAAK,aAAL,KAAK,uBAAL,KAAK,CAAE,QAAQ,CAAC;IACjC,IAAM,UAAU,GAAG,cAAc,CAAC,KAAK,CAAC,CAAC;IACzC,IAAM,aAAa,GAAG,cAAc,CAAC,QAAQ,CAAC,CAAC;IAC/C,IAAI,UAAU,IAAI,IAAI,KAAK,CAAC,QAAQ,IAAI,aAAa,IAAI,IAAI,CAAC,EAAE;;QAE9D,OAAO;YACL,UAAU,EAAE;gBACV;oBACE,KAAK,EAAE,oBAAoB,CAAC,IAAI,CAAC,GAAG,CAAC,UAAU,EAAE,aAAa,aAAb,aAAa,cAAb,aAAa,GAAI,CAAC,CAAC,EAAE,SAAS,CAAC;oBAChF,IAAI,EAAE,IAAI;iBACX;gBACD;oBACE,KAAK,EAAE,oBAAoB,CAAC,IAAI,CAAC,GAAG,CAAC,UAAU,EAAE,aAAa,aAAb,aAAa,cAAb,aAAa,GAAI,CAAC,CAAC,GAAG,CAAC,EAAE,SAAS,CAAC;oBACpF,IAAI,EAAE,IAAI;iBACX;aACF;YACD,KAAK,EAAE,SAAS;SACjB,CAAC;KACH;;;IAGD,IAAM,WAAW,GAAG,YAAY,CAAC,MAAM,CACrC,UAAC,IAAI,IAAK,OAAA,CAAC,SAAS,IAAI,IAAI,GAAG,SAAS,GAAA,CACzC,CAAC;IACF,IAAI,CAAC,CAAC,SAAS,IAAI,WAAW,CAAC,MAAM,KAAK,CAAC,EAAE;;;QAG3C,OAAO;YACL,UAAU,EAAE;gBACV;oBACE,KAAK,EAAE,oBAAoB,CAAC,SAAS,EAAE,SAAS,CAAC;oBACjD,IAAI,EAAE,IAAI;iBACX;aACF;YACD,KAAK,EAAE,SAAS;SACjB,CAAC;KACH;IACD,OAAO;QACL,UAAU,EAAE,WAAW,CAAC,GAAG,CAAC,UAAC,IAAI,IAAK,QAAC;YACrC,KAAK,EAAE,oBAAoB,CAAC,IAAI,EAAE,SAAS,CAAC;;;;;;;;;;;YAW5C,IAAI,EAAK,IAAI,MAAG;SACjB,IAAC,CAAC;QACH,KAAK,EAAE,OAAO;KACf,CAAC;AACJ,CAAC;AAED,SAAS,cAAc,CAAC,MAAmC;IACzD,IAAI,MAAM,IAAI,IAAI,IAAI,MAAM,IAAI,EAAE,EAAE;QAClC,OAAO,SAAS,CAAC;KAClB;IAED,IAAI,OAAO,MAAM,KAAK,QAAQ,EAAE;QAC9B,OAAO,MAAM,CAAC;KACf;IAED,IAAM,MAAM,GAAG,YAAY,CAAC,MAAM,CAAC,CAAC;IACpC,IAAI,MAAM,KAAK,CAAC,MAAM,CAAC,KAAK,IAAI,MAAM,CAAC,KAAK,KAAK,IAAI,CAAC,EAAE;QACtD,OAAO,MAAM,CAAC,GAAG,CAAC;KACnB;IAED,OAAO,SAAS,CAAC;AACnB,CAAC;AAED,SAAS,YAAY,CAAC,GAAW;;IAE/B,IAAM,GAAG,GAAG,GAAG,CAAC,KAAK,CACnB,gEAAgE,CACjE,CAAC;IACF,IAAI,GAAG,IAAI,IAAI,EAAE;QACf,OAAO,SAAS,CAAC;KAClB;IACD,IAAM,GAAG,GAAG,GAAG,CAAC,CAAC,CAAC,CAAC;IACnB,IAAM,KAAK,GAAG,GAAG,CAAC,CAAC,CAAC,CAAC;IACrB,OAAO,EAAE,GAAG,EAAE,CAAC,GAAG,EAAE,KAAK,OAAA,EAAE,CAAC;AAC9B,CAAC;AAED,SAAS,cAAc,CAAC,MAA2C;IACjE,IAAI,MAAM,IAAI,IAAI,EAAE;QAClB,OAAO,SAAS,CAAC;KAClB;SAAM,IAAI,MAAM,KAAK,SAAS,EAAE;QAC/B,OAAO,oBAAoB,CAAC;KAC7B;SAAM;QACL,OAAO,MAAM,CAAC;KACf;AACH,CAAC;AAED,IAAM,oBAAoB,GAAgB;IACxC,WAAW,EAAE,UAAC,GAAG;QACf,OAAO,GAAG,CAAC,UAAU,CAAC,yBAAyB,CAAC,IAAI,CAAC,KAAK,CAAC,GAAG,CAAC,CAAC;KACjE;IACD,YAAY,EAAE,UAAC,IAAI;;QACjB,IAAM,MAAM,GAAG;YACb,IAAI,CAAC,KAAK,GAAG,OAAK,IAAI,CAAC,KAAO,GAAG,SAAS;YAC1C,QAAK,MAAA,IAAI,CAAC,OAAO,mCAAI,EAAE,CAAE;YACzB,IAAI,CAAC,MAAM,GAAG,OAAK,IAAI,CAAC,MAAQ,GAAG,SAAS;SAC7C,CAAC,MAAM,CAAC,UAAC,CAAC,IAAK,OAAA,CAAC,CAAC,CAAC,GAAA,CAAC,CAAC;QACrB,OAAU,IAAI,CAAC,GAAG,SAAI,MAAM,CAAC,IAAI,CAAC,GAAG,CAAG,CAAC;KAC1C;CACF;;;;"}

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

@@ -1,55 +1,62 @@
-/**
- * Responsive `<img/>` replacement, based on `next/image`
- */
-import React from "react";
-export declare type ImageLoader = (opts: {
-    src: string;
-    width: number;
-    quality?: number;
-    format?: "webp";
-}) => string;
-declare type ImgTagProps = Omit<React.ComponentProps<"img">, "src" | "srcSet" | "ref" | "style">;
-export interface PlasmicImgProps extends ImgTagProps {
-    /**
-     * Either an object with the src string, and its full width and height,
-     * or just a src string with unknown intrinsic dimensions.
-     */
-    src: string | {
-        src: string;
-        fullHeight: number;
-        fullWidth: number;
-    };
-    /**
-     * className applied to the wrapper element if one is used.
-     */
-    className?: string;
-    /**
-     * css width
-     */
-    displayWidth?: number | string;
-    /**
-     * css height
-     */
-    displayHeight?: number | string;
-    /**
-     * For variable quality formats like jpg, the quality from 0 to 100
-     */
-    quality?: number;
-    /**
-     * ImageLoader to use for loading different dimensions of the image.
-     * If none specified, will not attempt to load different dimensions.
-     */
-    loader?: "plasmic" | ImageLoader;
-    /**
-     * Style applied to the wrapper element. objectFit and objectPosition
-     * rules are applied to the img element.
-     */
-    style?: React.CSSProperties;
-    /**
-     * Ref for the wrapper element.  The normal <PlasmicImg ref={...} />
-     * prop gives you the wrap to the img element.
-     */
-    containerRef?: React.Ref<HTMLDivElement>;
-}
-export declare const PlasmicImg: React.ForwardRefExoticComponent<PlasmicImgProps & React.RefAttributes<HTMLImageElement>>;
-export {};
+/**
+ * Responsive `<img/>` replacement, based on `next/image`
+ */
+import React from "react";
+export declare type ImageLoader = (opts: {
+  src: string;
+  width: number;
+  quality?: number;
+  format?: "webp";
+}) => string;
+declare type ImgTagProps = Omit<
+  React.ComponentProps<"img">,
+  "src" | "srcSet" | "ref" | "style"
+>;
+export interface PlasmicImgProps extends ImgTagProps {
+  /**
+   * Either an object with the src string, and its full width and height,
+   * or just a src string with unknown intrinsic dimensions.
+   */
+  src:
+    | string
+    | {
+        src: string;
+        fullHeight: number;
+        fullWidth: number;
+      };
+  /**
+   * className applied to the wrapper element if one is used.
+   */
+  className?: string;
+  /**
+   * css width
+   */
+  displayWidth?: number | string;
+  /**
+   * css height
+   */
+  displayHeight?: number | string;
+  /**
+   * For variable quality formats like jpg, the quality from 0 to 100
+   */
+  quality?: number;
+  /**
+   * ImageLoader to use for loading different dimensions of the image.
+   * If none specified, will not attempt to load different dimensions.
+   */
+  loader?: "plasmic" | ImageLoader;
+  /**
+   * Style applied to the wrapper element. objectFit and objectPosition
+   * rules are applied to the img element.
+   */
+  style?: React.CSSProperties;
+  /**
+   * Ref for the wrapper element.  The normal <PlasmicImg ref={...} />
+   * prop gives you the wrap to the img element.
+   */
+  containerRef?: React.Ref<HTMLDivElement>;
+}
+export declare const PlasmicImg: React.ForwardRefExoticComponent<
+  PlasmicImgProps & React.RefAttributes<HTMLImageElement>
+>;
+export {};

package/skinny/dist/tslib.es6-00014098.js

@@ -1,128 +1,148 @@
-function notNil(x) {
-    return x != null;
-}
-function pick(obj) {
-    var keys = [];
-    for (var _i = 1; _i < arguments.length; _i++) {
-        keys[_i - 1] = arguments[_i];
-    }
-    if (Object.keys(obj).length === 0) {
-        return obj;
-    }
-    var res = {};
-    for (var _a = 0, keys_1 = keys; _a < keys_1.length; _a++) {
-        var key = keys_1[_a];
-        if (key in obj) {
-            res[key] = obj[key];
-        }
-    }
-    return res;
-}
-function omit(obj) {
-    var keys = [];
-    for (var _i = 1; _i < arguments.length; _i++) {
-        keys[_i - 1] = arguments[_i];
-    }
-    if (Object.keys(obj).length === 0) {
-        return obj;
-    }
-    var res = {};
-    for (var _a = 0, _b = Object.keys(obj); _a < _b.length; _a++) {
-        var key = _b[_a];
-        if (!keys.includes(key)) {
-            res[key] = obj[key];
-        }
-    }
-    return res;
-}
-function isSubset(a1, a2) {
-    return a1.every(function (x) { return a2.includes(x); });
-}
-function chainSingleArgFuncs() {
-    var funcs = [];
-    for (var _i = 0; _i < arguments.length; _i++) {
-        funcs[_i] = arguments[_i];
-    }
-    if (funcs.length === 0) {
-        return undefined;
-    }
-    return function (arg) {
-        var res = arg;
-        for (var _i = 0, funcs_1 = funcs; _i < funcs_1.length; _i++) {
-            var func = funcs_1[_i];
-            res = func(res);
-        }
-        return res;
-    };
-}
-function isString(x) {
-    return typeof x === "string";
-}
-function groupBy(collection, keyFunc) {
-    var result = {};
-    for (var _i = 0, collection_1 = collection; _i < collection_1.length; _i++) {
-        var obj = collection_1[_i];
-        var key = keyFunc(obj);
-        if (key in result) {
-            result[key].push(obj);
-        }
-        else {
-            result[key] = [obj];
-        }
-    }
-    return result;
-}
-function mapValues(obj, mapper) {
-    var result = {};
-    for (var key in obj) {
-        result[key] = mapper(obj[key]);
-    }
-    return result;
+function notNil(x) {
+  return x != null;
+}
+function pick(obj) {
+  var keys = [];
+  for (var _i = 1; _i < arguments.length; _i++) {
+    keys[_i - 1] = arguments[_i];
+  }
+  if (Object.keys(obj).length === 0) {
+    return obj;
+  }
+  var res = {};
+  for (var _a = 0, keys_1 = keys; _a < keys_1.length; _a++) {
+    var key = keys_1[_a];
+    if (key in obj) {
+      res[key] = obj[key];
+    }
+  }
+  return res;
+}
+function omit(obj) {
+  var keys = [];
+  for (var _i = 1; _i < arguments.length; _i++) {
+    keys[_i - 1] = arguments[_i];
+  }
+  if (Object.keys(obj).length === 0) {
+    return obj;
+  }
+  var res = {};
+  for (var _a = 0, _b = Object.keys(obj); _a < _b.length; _a++) {
+    var key = _b[_a];
+    if (!keys.includes(key)) {
+      res[key] = obj[key];
+    }
+  }
+  return res;
+}
+function isSubset(a1, a2) {
+  return a1.every(function (x) {
+    return a2.includes(x);
+  });
+}
+function chainSingleArgFuncs() {
+  var funcs = [];
+  for (var _i = 0; _i < arguments.length; _i++) {
+    funcs[_i] = arguments[_i];
+  }
+  if (funcs.length === 0) {
+    return undefined;
+  }
+  return function (arg) {
+    var res = arg;
+    for (var _i = 0, funcs_1 = funcs; _i < funcs_1.length; _i++) {
+      var func = funcs_1[_i];
+      res = func(res);
+    }
+    return res;
+  };
+}
+function isString(x) {
+  return typeof x === "string";
+}
+function groupBy(collection, keyFunc) {
+  var result = {};
+  for (var _i = 0, collection_1 = collection; _i < collection_1.length; _i++) {
+    var obj = collection_1[_i];
+    var key = keyFunc(obj);
+    if (key in result) {
+      result[key].push(obj);
+    } else {
+      result[key] = [obj];
+    }
+  }
+  return result;
+}
+function mapValues(obj, mapper) {
+  var result = {};
+  for (var key in obj) {
+    result[key] = mapper(obj[key]);
+  }
+  return result;
+}
+
+/*! *****************************************************************************
+Copyright (c) Microsoft Corporation.
+
+Permission to use, copy, modify, and/or distribute this software for any
+purpose with or without fee is hereby granted.
+
+THE SOFTWARE IS PROVIDED "AS IS" AND THE AUTHOR DISCLAIMS ALL WARRANTIES WITH
+REGARD TO THIS SOFTWARE INCLUDING ALL IMPLIED WARRANTIES OF MERCHANTABILITY
+AND FITNESS. IN NO EVENT SHALL THE AUTHOR BE LIABLE FOR ANY SPECIAL, DIRECT,
+INDIRECT, OR CONSEQUENTIAL DAMAGES OR ANY DAMAGES WHATSOEVER RESULTING FROM
+LOSS OF USE, DATA OR PROFITS, WHETHER IN AN ACTION OF CONTRACT, NEGLIGENCE OR
+OTHER TORTIOUS ACTION, ARISING OUT OF OR IN CONNECTION WITH THE USE OR
+PERFORMANCE OF THIS SOFTWARE.
+***************************************************************************** */
+
+var __assign = function () {
+  __assign =
+    Object.assign ||
+    function __assign(t) {
+      for (var s, i = 1, n = arguments.length; i < n; i++) {
+        s = arguments[i];
+        for (var p in s)
+          if (Object.prototype.hasOwnProperty.call(s, p)) t[p] = s[p];
+      }
+      return t;
+    };
+  return __assign.apply(this, arguments);
+};
+
+function __rest(s, e) {
+  var t = {};
+  for (var p in s)
+    if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+      t[p] = s[p];
+  if (s != null && typeof Object.getOwnPropertySymbols === "function")
+    for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+      if (
+        e.indexOf(p[i]) < 0 &&
+        Object.prototype.propertyIsEnumerable.call(s, p[i])
+      )
+        t[p[i]] = s[p[i]];
+    }
+  return t;
 }
 
-/*! *****************************************************************************
-Copyright (c) Microsoft Corporation.
-
-Permission to use, copy, modify, and/or distribute this software for any
-purpose with or without fee is hereby granted.
-
-THE SOFTWARE IS PROVIDED "AS IS" AND THE AUTHOR DISCLAIMS ALL WARRANTIES WITH
-REGARD TO THIS SOFTWARE INCLUDING ALL IMPLIED WARRANTIES OF MERCHANTABILITY
-AND FITNESS. IN NO EVENT SHALL THE AUTHOR BE LIABLE FOR ANY SPECIAL, DIRECT,
-INDIRECT, OR CONSEQUENTIAL DAMAGES OR ANY DAMAGES WHATSOEVER RESULTING FROM
-LOSS OF USE, DATA OR PROFITS, WHETHER IN AN ACTION OF CONTRACT, NEGLIGENCE OR
-OTHER TORTIOUS ACTION, ARISING OUT OF OR IN CONNECTION WITH THE USE OR
-PERFORMANCE OF THIS SOFTWARE.
-***************************************************************************** */
-
-var __assign = function() {
-    __assign = Object.assign || function __assign(t) {
-        for (var s, i = 1, n = arguments.length; i < n; i++) {
-            s = arguments[i];
-            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p)) t[p] = s[p];
-        }
-        return t;
-    };
-    return __assign.apply(this, arguments);
-};
-
-function __rest(s, e) {
-    var t = {};
-    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
-        t[p] = s[p];
-    if (s != null && typeof Object.getOwnPropertySymbols === "function")
-        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
-            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
-                t[p[i]] = s[p[i]];
-        }
-    return t;
-}
-
-function __spreadArray(to, from) {
-    for (var i = 0, il = from.length, j = to.length; i < il; i++, j++)
-        to[j] = from[i];
-    return to;
+function __spreadArray(to, from) {
+  for (var i = 0, il = from.length, j = to.length; i < il; i++, j++)
+    to[j] = from[i];
+  return to;
 }
 
-export { __rest as _, __assign as a, __spreadArray as b, chainSingleArgFuncs as c, isString as d, groupBy as g, isSubset as i, mapValues as m, notNil as n, omit as o, pick as p };
+export {
+  __rest as _,
+  __assign as a,
+  __spreadArray as b,
+  chainSingleArgFuncs as c,
+  isString as d,
+  groupBy as g,
+  isSubset as i,
+  mapValues as m,
+  notNil as n,
+  omit as o,
+  pick as p,
+};
 //# sourceMappingURL=tslib.es6-00014098.js.map