@makeswift/runtime 0.2.18 → 0.3.0

package/dist/Image.cjs.js

@@ -1,13 +1,11 @@
 "use strict";
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
-var styled = require("styled-components");
 var React = require("react");
 var NextImage = require("next/image");
-var cssMediaRules = require("./cssMediaRules.cjs.js");
 var next = require("./index.cjs.js");
-var useBoxShadow = require("./useBoxShadow.cjs.js");
 var placeholders = require("./placeholders.cjs.js");
-var index = require("./index.cjs3.js");
+var index = require("./index.cjs2.js");
+var css = require("@emotion/css");
 var jsxRuntime = require("react/jsx-runtime");
 require("use-sync-external-store/shim/with-selector");
 require("./react-page.cjs.js");
@@ -23,7 +21,6 @@ require("slate");
 require("./graphql.cjs.js");
 require("./text-input.cjs.js");
 require("./combobox.cjs.js");
-require("@emotion/css");
 require("color");
 require("scroll-into-view-if-needed");
 require("./box-models.cjs.js");
@@ -43,7 +40,6 @@ require("next/link");
 function _interopDefaultLegacy(e) {
   return e && typeof e === "object" && "default" in e ? e : { "default": e };
 }
-var styled__default = /* @__PURE__ */ _interopDefaultLegacy(styled);
 var NextImage__default = /* @__PURE__ */ _interopDefaultLegacy(NextImage);
 function loadImage(src) {
   return new Promise((resolve, reject) => {
@@ -64,24 +60,6 @@ function imageSizes(width) {
     return `(max-width: ${device.maxWidth}px) ${Math.min(device.maxWidth, override.value.value)}px`;
   }).filter((size) => size != null).reduce((sourceSizes, sourceSize) => `${sourceSize}, ${sourceSizes}`, baseWidthSize);
 }
-const ImageContainer = styled__default["default"].div.withConfig({
-  shouldForwardProp: (prop) => !["width", "margin", "padding", "border", "borderRadius", "boxShadow", "opacity", "dimensions"].includes(prop.toString())
-})`
-  line-height: 0;
-  overflow: hidden;
-  ${(props) => cssMediaRules.cssWidth(`${props.dimensions.width}px`)(props)}
-  ${cssMediaRules.cssMargin()}
-  ${cssMediaRules.cssPadding()}
-  ${cssMediaRules.cssBorder()}
-  ${cssMediaRules.cssBorderRadius()}
-  ${cssMediaRules.cssBoxShadow()}
-  ${(p) => cssMediaRules.cssMediaRules([p.opacity], ([opacity = 1]) => styled.css`
-        opacity: ${opacity};
-      `)}
-`;
-const UnoptimizedImage = styled__default["default"].img`
-  width: 100%;
-`;
 const ImageComponent = React.forwardRef(function Image2({
   id,
   width,
@@ -98,8 +76,6 @@ const ImageComponent = React.forwardRef(function Image2({
   className
 }, ref) {
   const fileData = next.useFile(file);
-  const borderData = next.useBorder(border);
-  const boxShadowData = useBoxShadow.useBoxShadow(boxShadow);
   const imageSrc = (fileData == null ? void 0 : fileData.publicUrl) ? fileData.publicUrl : placeholder.src;
   const dataDimensions = (fileData == null ? void 0 : fileData.publicUrl) ? fileData == null ? void 0 : fileData.dimensions : placeholder.dimensions;
   const [measuredDimensions, setMeasuredDimensions] = React.useState(null);
@@ -121,23 +97,25 @@ const ImageComponent = React.forwardRef(function Image2({
     };
   }, [dataDimensions, imageSrc]);
   const dimensions = dataDimensions != null ? dataDimensions : measuredDimensions;
+  const Container = link ? index.Link : "div";
+  const containerClassName = css.cx(next.useStyle({
+    lineHeight: 0,
+    overflow: "hidden"
+  }), next.useStyle(next.responsiveWidth(width, dimensions == null ? void 0 : dimensions.width)), next.useStyle(next.responsiveStyle([opacity], ([opacity2 = 1]) => ({
+    opacity: opacity2
+  }))), margin, padding, border, borderRadius, boxShadow, className);
+  const unoptimizedImageClassName = next.useStyle({
+    width: "100%"
+  });
   if (!dimensions)
     return null;
-  return /* @__PURE__ */ jsxRuntime.jsx(ImageContainer, {
-    as: link ? index.Link : "div",
+  return /* @__PURE__ */ jsxRuntime.jsx(Container, {
     link,
-    dimensions,
     ref,
     id,
-    className,
-    width,
-    margin,
-    opacity,
-    padding,
-    border: borderData,
-    borderRadius,
-    boxShadow: boxShadowData,
-    children: isInBuilder ? /* @__PURE__ */ jsxRuntime.jsx(UnoptimizedImage, {
+    className: containerClassName,
+    children: isInBuilder ? /* @__PURE__ */ jsxRuntime.jsx("img", {
+      className: unoptimizedImageClassName,
       src: imageSrc,
       alt: altText
     }) : /* @__PURE__ */ jsxRuntime.jsx(NextImage__default["default"], {

package/dist/Image.cjs.js.map

@@ -1 +1 @@
-{"version":3,"file":"Image.cjs.js","sources":["../src/components/builtin/Image/Image.tsx"],"sourcesContent":["import styled, { css } from 'styled-components'\nimport { useState, useEffect, Ref, forwardRef } from 'react'\nimport NextImage from 'next/image'\n\nimport {\n  BorderRadiusValue,\n  BorderValue,\n  ElementIDValue,\n  ImageValue,\n  LinkValue,\n  MarginValue,\n  PaddingValue,\n  ResponsiveOpacityValue,\n  ShadowsValue,\n  TextInputValue,\n  WidthValue,\n} from '../../../prop-controllers/descriptors'\nimport {\n  cssBorder,\n  cssBorderRadius,\n  cssBoxShadow,\n  cssMargin,\n  cssMediaRules,\n  cssPadding,\n  cssWidth,\n} from '../../utils/cssMediaRules'\nimport { DEVICES, findDeviceOverride } from '../../utils/devices'\nimport {\n  BorderPropControllerData,\n  BoxShadowPropControllerData,\n  useBorder,\n  useBoxShadow,\n  useFile,\n} from '../../hooks'\nimport { placeholders } from '../../utils/placeholders'\nimport { useIsInBuilder } from '../../../runtimes/react'\nimport { Link } from '../../shared/Link'\n\ntype Props = {\n  id?: ElementIDValue\n  file?: ImageValue\n  altText?: TextInputValue\n  link?: LinkValue\n  width?: WidthValue\n  margin?: MarginValue\n  padding?: PaddingValue\n  border?: BorderValue\n  borderRadius?: BorderRadiusValue\n  boxShadow?: ShadowsValue\n  opacity?: ResponsiveOpacityValue\n  placeholder?: { src: string; dimensions: { width: number; height: number } }\n  className?: string\n}\n\nfunction loadImage(src: string): Promise<HTMLImageElement> {\n  return new Promise<HTMLImageElement>((resolve, reject) => {\n    const image = new Image()\n\n    image.onload = () => resolve(image)\n    image.onerror = reject\n    image.src = src\n  })\n}\n\nfunction imageSizes(width?: Props['width']): string {\n  const baseDevice = DEVICES.find(device => device.maxWidth == null)\n  const baseWidth = baseDevice && width && findDeviceOverride(width, baseDevice.id)\n  const baseWidthSize =\n    baseWidth == null || baseWidth.value.unit !== 'px' ? '100vw' : `${baseWidth.value.value}px`\n\n  return DEVICES.map(device => {\n    const override = findDeviceOverride(width, device.id)\n\n    if (override == null || device.maxWidth == null || override.value.unit !== 'px') return null\n\n    return `(max-width: ${device.maxWidth}px) ${Math.min(device.maxWidth, override.value.value)}px`\n  })\n    .filter((size): size is NonNullable<typeof size> => size != null)\n    .reduce((sourceSizes, sourceSize) => `${sourceSize}, ${sourceSizes}`, baseWidthSize)\n}\n\nconst ImageContainer = styled.div.withConfig({\n  shouldForwardProp: prop =>\n    ![\n      'width',\n      'margin',\n      'padding',\n      'border',\n      'borderRadius',\n      'boxShadow',\n      'opacity',\n      'dimensions',\n    ].includes(prop.toString()),\n})<{\n  width?: Props['width']\n  margin?: Props['margin']\n  padding?: Props['padding']\n  border?: BorderPropControllerData | null | undefined\n  borderRadius: Props['borderRadius']\n  boxShadow?: BoxShadowPropControllerData | null | undefined\n  opacity: Props['opacity']\n  link?: Props['link']\n  dimensions: { width: number; height: number }\n}>`\n  line-height: 0;\n  overflow: hidden;\n  ${props => cssWidth(`${props.dimensions.width}px`)(props)}\n  ${cssMargin()}\n  ${cssPadding()}\n  ${cssBorder()}\n  ${cssBorderRadius()}\n  ${cssBoxShadow()}\n  ${p =>\n    cssMediaRules(\n      [p.opacity],\n      ([opacity = 1]) => css`\n        opacity: ${opacity};\n      `,\n    )}\n`\n\nconst UnoptimizedImage = styled.img`\n  width: 100%;\n`\n\ntype Dimensions = {\n  width: number\n  height: number\n}\n\nconst ImageComponent = forwardRef(function Image(\n  {\n    id,\n    width,\n    margin,\n    padding,\n    file,\n    border,\n    borderRadius,\n    altText,\n    link,\n    opacity,\n    boxShadow,\n    placeholder = placeholders.image,\n    className,\n  }: Props,\n  ref: Ref<HTMLImageElement>,\n) {\n  const fileData = useFile(file)\n  const borderData = useBorder(border)\n  const boxShadowData = useBoxShadow(boxShadow)\n  const imageSrc = fileData?.publicUrl ? fileData.publicUrl : placeholder.src\n  const dataDimensions = fileData?.publicUrl ? fileData?.dimensions : placeholder.dimensions\n  const [measuredDimensions, setMeasuredDimensions] = useState<Dimensions | null>(null)\n  const isInBuilder = useIsInBuilder()\n\n  useEffect(() => {\n    if (dataDimensions) return\n\n    let cleanedUp = false\n\n    loadImage(imageSrc)\n      .then(image => {\n        if (!cleanedUp) {\n          setMeasuredDimensions({ width: image.naturalWidth, height: image.naturalHeight })\n        }\n      })\n      .catch(console.error)\n\n    return () => {\n      cleanedUp = true\n    }\n  }, [dataDimensions, imageSrc])\n\n  const dimensions = dataDimensions ?? measuredDimensions\n\n  if (!dimensions) return null\n\n  return (\n    <ImageContainer\n      as={link ? Link : 'div'}\n      link={link}\n      dimensions={dimensions}\n      ref={ref}\n      id={id}\n      className={className}\n      width={width}\n      margin={margin}\n      opacity={opacity}\n      padding={padding}\n      border={borderData}\n      borderRadius={borderRadius}\n      boxShadow={boxShadowData}\n    >\n      {isInBuilder ? (\n        <UnoptimizedImage src={imageSrc} alt={altText} />\n      ) : (\n        <NextImage\n          layout=\"responsive\"\n          src={imageSrc}\n          sizes={imageSizes(width)}\n          alt={altText}\n          width={dimensions.width}\n          height={dimensions.height}\n        />\n      )}\n    </ImageContainer>\n  )\n})\n\nexport default ImageComponent\n"],"names":["src","Promise","resolve","reject","image","Image","onload","onerror","width","baseDevice","DEVICES","find","device","maxWidth","baseWidth","findDeviceOverride","id","baseWidthSize","value","unit","map","override","Math","min","filter","size","reduce","sourceSizes","sourceSize","ImageContainer","styled","div","withConfig","shouldForwardProp","prop","includes","toString","props","cssWidth","dimensions","cssMargin","cssPadding","cssBorder","cssBorderRadius","cssBoxShadow","p","cssMediaRules","opacity","css","UnoptimizedImage","img","ImageComponent","forwardRef","margin","padding","file","border","borderRadius","altText","link","boxShadow","placeholder","placeholders","className","ref","fileData","useFile","borderData","useBorder","boxShadowData","useBoxShadow","imageSrc","publicUrl","dataDimensions","measuredDimensions","setMeasuredDimensions","useState","isInBuilder","useIsInBuilder","useEffect","cleanedUp","then","naturalWidth","height","naturalHeight","catch","console","error","Link","_jsx","NextImage","imageSizes"],"mappings":"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"}
+{"version":3,"file":"Image.cjs.js","sources":["../src/components/builtin/Image/Image.tsx"],"sourcesContent":["import { useState, useEffect, Ref, forwardRef } from 'react'\nimport NextImage from 'next/image'\n\nimport {\n  ElementIDValue,\n  ImageValue,\n  LinkValue,\n  ResponsiveOpacityValue,\n  TextInputValue,\n  WidthValue,\n} from '../../../prop-controllers/descriptors'\nimport { DEVICES, findDeviceOverride } from '../../utils/devices'\nimport { useFile } from '../../hooks'\nimport { placeholders } from '../../utils/placeholders'\nimport { useIsInBuilder } from '../../../runtimes/react'\nimport { Link } from '../../shared/Link'\nimport { cx } from '@emotion/css'\nimport { useStyle } from '../../../runtimes/react/use-style'\nimport { responsiveStyle, responsiveWidth } from '../../utils/responsive-style'\n\ntype Props = {\n  id?: ElementIDValue\n  file?: ImageValue\n  altText?: TextInputValue\n  link?: LinkValue\n  width?: WidthValue\n  margin?: string\n  padding?: string\n  border?: string\n  borderRadius?: string\n  boxShadow?: string\n  opacity?: ResponsiveOpacityValue\n  placeholder?: { src: string; dimensions: { width: number; height: number } }\n  className?: string\n}\n\nfunction loadImage(src: string): Promise<HTMLImageElement> {\n  return new Promise<HTMLImageElement>((resolve, reject) => {\n    const image = new Image()\n\n    image.onload = () => resolve(image)\n    image.onerror = reject\n    image.src = src\n  })\n}\n\nfunction imageSizes(width?: Props['width']): string {\n  const baseDevice = DEVICES.find(device => device.maxWidth == null)\n  const baseWidth = baseDevice && width && findDeviceOverride(width, baseDevice.id)\n  const baseWidthSize =\n    baseWidth == null || baseWidth.value.unit !== 'px' ? '100vw' : `${baseWidth.value.value}px`\n\n  return DEVICES.map(device => {\n    const override = findDeviceOverride(width, device.id)\n\n    if (override == null || device.maxWidth == null || override.value.unit !== 'px') return null\n\n    return `(max-width: ${device.maxWidth}px) ${Math.min(device.maxWidth, override.value.value)}px`\n  })\n    .filter((size): size is NonNullable<typeof size> => size != null)\n    .reduce((sourceSizes, sourceSize) => `${sourceSize}, ${sourceSizes}`, baseWidthSize)\n}\n\ntype Dimensions = {\n  width: number\n  height: number\n}\n\nconst ImageComponent = forwardRef(function Image(\n  {\n    id,\n    width,\n    margin,\n    padding,\n    file,\n    border,\n    borderRadius,\n    altText,\n    link,\n    opacity,\n    boxShadow,\n    placeholder = placeholders.image,\n    className,\n  }: Props,\n  ref: Ref<HTMLAnchorElement & HTMLDivElement>,\n) {\n  const fileData = useFile(file)\n  const imageSrc = fileData?.publicUrl ? fileData.publicUrl : placeholder.src\n  const dataDimensions = fileData?.publicUrl ? fileData?.dimensions : placeholder.dimensions\n  const [measuredDimensions, setMeasuredDimensions] = useState<Dimensions | null>(null)\n  const isInBuilder = useIsInBuilder()\n\n  useEffect(() => {\n    if (dataDimensions) return\n\n    let cleanedUp = false\n\n    loadImage(imageSrc)\n      .then(image => {\n        if (!cleanedUp) {\n          setMeasuredDimensions({ width: image.naturalWidth, height: image.naturalHeight })\n        }\n      })\n      .catch(console.error)\n\n    return () => {\n      cleanedUp = true\n    }\n  }, [dataDimensions, imageSrc])\n\n  const dimensions = dataDimensions ?? measuredDimensions\n  const Container = link ? Link : 'div'\n  const containerClassName = cx(\n    useStyle({ lineHeight: 0, overflow: 'hidden' }),\n    useStyle(responsiveWidth(width, dimensions?.width)),\n    useStyle(responsiveStyle([opacity] as const, ([opacity = 1]) => ({ opacity }))),\n    margin,\n    padding,\n    border,\n    borderRadius,\n    boxShadow,\n    className,\n  )\n  const unoptimizedImageClassName = useStyle({ width: '100%' })\n\n  if (!dimensions) return null\n\n  return (\n    <Container link={link} ref={ref} id={id} className={containerClassName}>\n      {isInBuilder ? (\n        <img className={unoptimizedImageClassName} src={imageSrc} alt={altText} />\n      ) : (\n        <NextImage\n          layout=\"responsive\"\n          src={imageSrc}\n          sizes={imageSizes(width)}\n          alt={altText}\n          width={dimensions.width}\n          height={dimensions.height}\n        />\n      )}\n    </Container>\n  )\n})\n\nexport default ImageComponent\n"],"names":["src","Promise","resolve","reject","image","Image","onload","onerror","width","baseDevice","DEVICES","find","device","maxWidth","baseWidth","findDeviceOverride","id","baseWidthSize","value","unit","map","override","Math","min","filter","size","reduce","sourceSizes","sourceSize","ImageComponent","forwardRef","margin","padding","file","border","borderRadius","altText","link","opacity","boxShadow","placeholder","placeholders","className","ref","fileData","useFile","imageSrc","publicUrl","dataDimensions","dimensions","measuredDimensions","setMeasuredDimensions","useState","isInBuilder","useIsInBuilder","useEffect","cleanedUp","then","naturalWidth","height","naturalHeight","catch","console","error","Container","Link","containerClassName","cx","useStyle","lineHeight","overflow","responsiveWidth","responsiveStyle","unoptimizedImageClassName","_jsx","NextImage","imageSizes"],"mappings":"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"}

package/dist/Image.es.js

@@ -1,11 +1,9 @@
-import styled, { css } from "styled-components";
 import { forwardRef, useState, useEffect } from "react";
 import NextImage from "next/image";
-import { a as cssWidth, b as cssMargin, d as cssPadding, e as cssBorder, f as cssBorderRadius, g as cssBoxShadow, c as cssMediaRules } from "./cssMediaRules.es.js";
-import { l as useFile, j as useBorder, u as useIsInBuilder, y as DEVICES, z as findDeviceOverride } from "./index.es.js";
-import { u as useBoxShadow } from "./useBoxShadow.es.js";
+import { m as useFile, u as useIsInBuilder, q as useStyle, s as responsiveWidth, r as responsiveStyle, I as DEVICES, J as findDeviceOverride } from "./index.es.js";
 import { p as placeholders } from "./placeholders.es.js";
-import { L as Link } from "./index.es3.js";
+import { L as Link } from "./index.es2.js";
+import { cx } from "@emotion/css";
 import { jsx } from "react/jsx-runtime";
 import "use-sync-external-store/shim/with-selector";
 import "./react-page.es.js";
@@ -21,7 +19,6 @@ import "slate";
 import "./graphql.es.js";
 import "./text-input.es.js";
 import "./combobox.es.js";
-import "@emotion/css";
 import "color";
 import "scroll-into-view-if-needed";
 import "./box-models.es.js";
@@ -57,24 +54,6 @@ function imageSizes(width) {
     return `(max-width: ${device.maxWidth}px) ${Math.min(device.maxWidth, override.value.value)}px`;
   }).filter((size) => size != null).reduce((sourceSizes, sourceSize) => `${sourceSize}, ${sourceSizes}`, baseWidthSize);
 }
-const ImageContainer = styled.div.withConfig({
-  shouldForwardProp: (prop) => !["width", "margin", "padding", "border", "borderRadius", "boxShadow", "opacity", "dimensions"].includes(prop.toString())
-})`
-  line-height: 0;
-  overflow: hidden;
-  ${(props) => cssWidth(`${props.dimensions.width}px`)(props)}
-  ${cssMargin()}
-  ${cssPadding()}
-  ${cssBorder()}
-  ${cssBorderRadius()}
-  ${cssBoxShadow()}
-  ${(p) => cssMediaRules([p.opacity], ([opacity = 1]) => css`
-        opacity: ${opacity};
-      `)}
-`;
-const UnoptimizedImage = styled.img`
-  width: 100%;
-`;
 const ImageComponent = forwardRef(function Image2({
   id,
   width,
@@ -91,8 +70,6 @@ const ImageComponent = forwardRef(function Image2({
   className
 }, ref) {
   const fileData = useFile(file);
-  const borderData = useBorder(border);
-  const boxShadowData = useBoxShadow(boxShadow);
   const imageSrc = (fileData == null ? void 0 : fileData.publicUrl) ? fileData.publicUrl : placeholder.src;
   const dataDimensions = (fileData == null ? void 0 : fileData.publicUrl) ? fileData == null ? void 0 : fileData.dimensions : placeholder.dimensions;
   const [measuredDimensions, setMeasuredDimensions] = useState(null);
@@ -114,23 +91,25 @@ const ImageComponent = forwardRef(function Image2({
     };
   }, [dataDimensions, imageSrc]);
   const dimensions = dataDimensions != null ? dataDimensions : measuredDimensions;
+  const Container = link ? Link : "div";
+  const containerClassName = cx(useStyle({
+    lineHeight: 0,
+    overflow: "hidden"
+  }), useStyle(responsiveWidth(width, dimensions == null ? void 0 : dimensions.width)), useStyle(responsiveStyle([opacity], ([opacity2 = 1]) => ({
+    opacity: opacity2
+  }))), margin, padding, border, borderRadius, boxShadow, className);
+  const unoptimizedImageClassName = useStyle({
+    width: "100%"
+  });
   if (!dimensions)
     return null;
-  return /* @__PURE__ */ jsx(ImageContainer, {
-    as: link ? Link : "div",
+  return /* @__PURE__ */ jsx(Container, {
     link,
-    dimensions,
     ref,
     id,
-    className,
-    width,
-    margin,
-    opacity,
-    padding,
-    border: borderData,
-    borderRadius,
-    boxShadow: boxShadowData,
-    children: isInBuilder ? /* @__PURE__ */ jsx(UnoptimizedImage, {
+    className: containerClassName,
+    children: isInBuilder ? /* @__PURE__ */ jsx("img", {
+      className: unoptimizedImageClassName,
       src: imageSrc,
       alt: altText
     }) : /* @__PURE__ */ jsx(NextImage, {

package/dist/Image.es.js.map

@@ -1 +1 @@
-{"version":3,"file":"Image.es.js","sources":["../src/components/builtin/Image/Image.tsx"],"sourcesContent":["import styled, { css } from 'styled-components'\nimport { useState, useEffect, Ref, forwardRef } from 'react'\nimport NextImage from 'next/image'\n\nimport {\n  BorderRadiusValue,\n  BorderValue,\n  ElementIDValue,\n  ImageValue,\n  LinkValue,\n  MarginValue,\n  PaddingValue,\n  ResponsiveOpacityValue,\n  ShadowsValue,\n  TextInputValue,\n  WidthValue,\n} from '../../../prop-controllers/descriptors'\nimport {\n  cssBorder,\n  cssBorderRadius,\n  cssBoxShadow,\n  cssMargin,\n  cssMediaRules,\n  cssPadding,\n  cssWidth,\n} from '../../utils/cssMediaRules'\nimport { DEVICES, findDeviceOverride } from '../../utils/devices'\nimport {\n  BorderPropControllerData,\n  BoxShadowPropControllerData,\n  useBorder,\n  useBoxShadow,\n  useFile,\n} from '../../hooks'\nimport { placeholders } from '../../utils/placeholders'\nimport { useIsInBuilder } from '../../../runtimes/react'\nimport { Link } from '../../shared/Link'\n\ntype Props = {\n  id?: ElementIDValue\n  file?: ImageValue\n  altText?: TextInputValue\n  link?: LinkValue\n  width?: WidthValue\n  margin?: MarginValue\n  padding?: PaddingValue\n  border?: BorderValue\n  borderRadius?: BorderRadiusValue\n  boxShadow?: ShadowsValue\n  opacity?: ResponsiveOpacityValue\n  placeholder?: { src: string; dimensions: { width: number; height: number } }\n  className?: string\n}\n\nfunction loadImage(src: string): Promise<HTMLImageElement> {\n  return new Promise<HTMLImageElement>((resolve, reject) => {\n    const image = new Image()\n\n    image.onload = () => resolve(image)\n    image.onerror = reject\n    image.src = src\n  })\n}\n\nfunction imageSizes(width?: Props['width']): string {\n  const baseDevice = DEVICES.find(device => device.maxWidth == null)\n  const baseWidth = baseDevice && width && findDeviceOverride(width, baseDevice.id)\n  const baseWidthSize =\n    baseWidth == null || baseWidth.value.unit !== 'px' ? '100vw' : `${baseWidth.value.value}px`\n\n  return DEVICES.map(device => {\n    const override = findDeviceOverride(width, device.id)\n\n    if (override == null || device.maxWidth == null || override.value.unit !== 'px') return null\n\n    return `(max-width: ${device.maxWidth}px) ${Math.min(device.maxWidth, override.value.value)}px`\n  })\n    .filter((size): size is NonNullable<typeof size> => size != null)\n    .reduce((sourceSizes, sourceSize) => `${sourceSize}, ${sourceSizes}`, baseWidthSize)\n}\n\nconst ImageContainer = styled.div.withConfig({\n  shouldForwardProp: prop =>\n    ![\n      'width',\n      'margin',\n      'padding',\n      'border',\n      'borderRadius',\n      'boxShadow',\n      'opacity',\n      'dimensions',\n    ].includes(prop.toString()),\n})<{\n  width?: Props['width']\n  margin?: Props['margin']\n  padding?: Props['padding']\n  border?: BorderPropControllerData | null | undefined\n  borderRadius: Props['borderRadius']\n  boxShadow?: BoxShadowPropControllerData | null | undefined\n  opacity: Props['opacity']\n  link?: Props['link']\n  dimensions: { width: number; height: number }\n}>`\n  line-height: 0;\n  overflow: hidden;\n  ${props => cssWidth(`${props.dimensions.width}px`)(props)}\n  ${cssMargin()}\n  ${cssPadding()}\n  ${cssBorder()}\n  ${cssBorderRadius()}\n  ${cssBoxShadow()}\n  ${p =>\n    cssMediaRules(\n      [p.opacity],\n      ([opacity = 1]) => css`\n        opacity: ${opacity};\n      `,\n    )}\n`\n\nconst UnoptimizedImage = styled.img`\n  width: 100%;\n`\n\ntype Dimensions = {\n  width: number\n  height: number\n}\n\nconst ImageComponent = forwardRef(function Image(\n  {\n    id,\n    width,\n    margin,\n    padding,\n    file,\n    border,\n    borderRadius,\n    altText,\n    link,\n    opacity,\n    boxShadow,\n    placeholder = placeholders.image,\n    className,\n  }: Props,\n  ref: Ref<HTMLImageElement>,\n) {\n  const fileData = useFile(file)\n  const borderData = useBorder(border)\n  const boxShadowData = useBoxShadow(boxShadow)\n  const imageSrc = fileData?.publicUrl ? fileData.publicUrl : placeholder.src\n  const dataDimensions = fileData?.publicUrl ? fileData?.dimensions : placeholder.dimensions\n  const [measuredDimensions, setMeasuredDimensions] = useState<Dimensions | null>(null)\n  const isInBuilder = useIsInBuilder()\n\n  useEffect(() => {\n    if (dataDimensions) return\n\n    let cleanedUp = false\n\n    loadImage(imageSrc)\n      .then(image => {\n        if (!cleanedUp) {\n          setMeasuredDimensions({ width: image.naturalWidth, height: image.naturalHeight })\n        }\n      })\n      .catch(console.error)\n\n    return () => {\n      cleanedUp = true\n    }\n  }, [dataDimensions, imageSrc])\n\n  const dimensions = dataDimensions ?? measuredDimensions\n\n  if (!dimensions) return null\n\n  return (\n    <ImageContainer\n      as={link ? Link : 'div'}\n      link={link}\n      dimensions={dimensions}\n      ref={ref}\n      id={id}\n      className={className}\n      width={width}\n      margin={margin}\n      opacity={opacity}\n      padding={padding}\n      border={borderData}\n      borderRadius={borderRadius}\n      boxShadow={boxShadowData}\n    >\n      {isInBuilder ? (\n        <UnoptimizedImage src={imageSrc} alt={altText} />\n      ) : (\n        <NextImage\n          layout=\"responsive\"\n          src={imageSrc}\n          sizes={imageSizes(width)}\n          alt={altText}\n          width={dimensions.width}\n          height={dimensions.height}\n        />\n      )}\n    </ImageContainer>\n  )\n})\n\nexport default ImageComponent\n"],"names":["src","Promise","resolve","reject","image","Image","onload","onerror","width","baseDevice","DEVICES","find","device","maxWidth","baseWidth","findDeviceOverride","id","baseWidthSize","value","unit","map","override","Math","min","filter","size","reduce","sourceSizes","sourceSize","ImageContainer","styled","div","withConfig","shouldForwardProp","prop","includes","toString","props","cssWidth","dimensions","cssMargin","cssPadding","cssBorder","cssBorderRadius","cssBoxShadow","p","cssMediaRules","opacity","css","UnoptimizedImage","img","ImageComponent","forwardRef","margin","padding","file","border","borderRadius","altText","link","boxShadow","placeholder","placeholders","className","ref","fileData","useFile","borderData","useBorder","boxShadowData","useBoxShadow","imageSrc","publicUrl","dataDimensions","measuredDimensions","setMeasuredDimensions","useState","isInBuilder","useIsInBuilder","useEffect","cleanedUp","then","naturalWidth","height","naturalHeight","catch","console","error","Link","_jsx","imageSizes"],"mappings":"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"}
+{"version":3,"file":"Image.es.js","sources":["../src/components/builtin/Image/Image.tsx"],"sourcesContent":["import { useState, useEffect, Ref, forwardRef } from 'react'\nimport NextImage from 'next/image'\n\nimport {\n  ElementIDValue,\n  ImageValue,\n  LinkValue,\n  ResponsiveOpacityValue,\n  TextInputValue,\n  WidthValue,\n} from '../../../prop-controllers/descriptors'\nimport { DEVICES, findDeviceOverride } from '../../utils/devices'\nimport { useFile } from '../../hooks'\nimport { placeholders } from '../../utils/placeholders'\nimport { useIsInBuilder } from '../../../runtimes/react'\nimport { Link } from '../../shared/Link'\nimport { cx } from '@emotion/css'\nimport { useStyle } from '../../../runtimes/react/use-style'\nimport { responsiveStyle, responsiveWidth } from '../../utils/responsive-style'\n\ntype Props = {\n  id?: ElementIDValue\n  file?: ImageValue\n  altText?: TextInputValue\n  link?: LinkValue\n  width?: WidthValue\n  margin?: string\n  padding?: string\n  border?: string\n  borderRadius?: string\n  boxShadow?: string\n  opacity?: ResponsiveOpacityValue\n  placeholder?: { src: string; dimensions: { width: number; height: number } }\n  className?: string\n}\n\nfunction loadImage(src: string): Promise<HTMLImageElement> {\n  return new Promise<HTMLImageElement>((resolve, reject) => {\n    const image = new Image()\n\n    image.onload = () => resolve(image)\n    image.onerror = reject\n    image.src = src\n  })\n}\n\nfunction imageSizes(width?: Props['width']): string {\n  const baseDevice = DEVICES.find(device => device.maxWidth == null)\n  const baseWidth = baseDevice && width && findDeviceOverride(width, baseDevice.id)\n  const baseWidthSize =\n    baseWidth == null || baseWidth.value.unit !== 'px' ? '100vw' : `${baseWidth.value.value}px`\n\n  return DEVICES.map(device => {\n    const override = findDeviceOverride(width, device.id)\n\n    if (override == null || device.maxWidth == null || override.value.unit !== 'px') return null\n\n    return `(max-width: ${device.maxWidth}px) ${Math.min(device.maxWidth, override.value.value)}px`\n  })\n    .filter((size): size is NonNullable<typeof size> => size != null)\n    .reduce((sourceSizes, sourceSize) => `${sourceSize}, ${sourceSizes}`, baseWidthSize)\n}\n\ntype Dimensions = {\n  width: number\n  height: number\n}\n\nconst ImageComponent = forwardRef(function Image(\n  {\n    id,\n    width,\n    margin,\n    padding,\n    file,\n    border,\n    borderRadius,\n    altText,\n    link,\n    opacity,\n    boxShadow,\n    placeholder = placeholders.image,\n    className,\n  }: Props,\n  ref: Ref<HTMLAnchorElement & HTMLDivElement>,\n) {\n  const fileData = useFile(file)\n  const imageSrc = fileData?.publicUrl ? fileData.publicUrl : placeholder.src\n  const dataDimensions = fileData?.publicUrl ? fileData?.dimensions : placeholder.dimensions\n  const [measuredDimensions, setMeasuredDimensions] = useState<Dimensions | null>(null)\n  const isInBuilder = useIsInBuilder()\n\n  useEffect(() => {\n    if (dataDimensions) return\n\n    let cleanedUp = false\n\n    loadImage(imageSrc)\n      .then(image => {\n        if (!cleanedUp) {\n          setMeasuredDimensions({ width: image.naturalWidth, height: image.naturalHeight })\n        }\n      })\n      .catch(console.error)\n\n    return () => {\n      cleanedUp = true\n    }\n  }, [dataDimensions, imageSrc])\n\n  const dimensions = dataDimensions ?? measuredDimensions\n  const Container = link ? Link : 'div'\n  const containerClassName = cx(\n    useStyle({ lineHeight: 0, overflow: 'hidden' }),\n    useStyle(responsiveWidth(width, dimensions?.width)),\n    useStyle(responsiveStyle([opacity] as const, ([opacity = 1]) => ({ opacity }))),\n    margin,\n    padding,\n    border,\n    borderRadius,\n    boxShadow,\n    className,\n  )\n  const unoptimizedImageClassName = useStyle({ width: '100%' })\n\n  if (!dimensions) return null\n\n  return (\n    <Container link={link} ref={ref} id={id} className={containerClassName}>\n      {isInBuilder ? (\n        <img className={unoptimizedImageClassName} src={imageSrc} alt={altText} />\n      ) : (\n        <NextImage\n          layout=\"responsive\"\n          src={imageSrc}\n          sizes={imageSizes(width)}\n          alt={altText}\n          width={dimensions.width}\n          height={dimensions.height}\n        />\n      )}\n    </Container>\n  )\n})\n\nexport default ImageComponent\n"],"names":["src","Promise","resolve","reject","image","Image","onload","onerror","width","baseDevice","DEVICES","find","device","maxWidth","baseWidth","findDeviceOverride","id","baseWidthSize","value","unit","map","override","Math","min","filter","size","reduce","sourceSizes","sourceSize","ImageComponent","forwardRef","margin","padding","file","border","borderRadius","altText","link","opacity","boxShadow","placeholder","placeholders","className","ref","fileData","useFile","imageSrc","publicUrl","dataDimensions","dimensions","measuredDimensions","setMeasuredDimensions","useState","isInBuilder","useIsInBuilder","useEffect","cleanedUp","then","naturalWidth","height","naturalHeight","catch","console","error","Container","Link","containerClassName","cx","useStyle","lineHeight","overflow","responsiveWidth","responsiveStyle","unoptimizedImageClassName","_jsx","imageSizes"],"mappings":"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"}