@makeswift/runtime 0.4.2 → 0.5.1

package/dist/Image.cjs.js

@@ -4,22 +4,23 @@ var React = require("react");
 var NextImage = require("next/image");
 var next = require("./index.cjs.js");
 var placeholders = require("./placeholders.cjs.js");
-var index = require("./index.cjs2.js");
+var index = require("./index.cjs3.js");
 var css = require("@emotion/css");
+var nextVersion = require("./next-version.cjs.js");
 var jsxRuntime = require("react/jsx-runtime");
 require("use-sync-external-store/shim/with-selector");
+require("next/dynamic");
 require("./react-page.cjs.js");
 require("redux");
 require("redux-thunk");
 require("./actions.cjs.js");
 require("./slot.cjs.js");
 require("./control.cjs.js");
-require("next/dynamic");
-require("slate");
-require("./types.cjs.js");
 require("./text-input.cjs.js");
 require("./combobox.cjs.js");
 require("use-sync-external-store/shim");
+require("slate");
+require("./types.cjs.js");
 require("color");
 require("scroll-into-view-if-needed");
 require("./box-models.cjs.js");
@@ -36,10 +37,12 @@ require("set-cookie-parser");
 require("uuid/v4");
 require("corporate-ipsum");
 require("next/link");
+require("next/package.json");
 function _interopDefaultLegacy(e) {
   return e && typeof e === "object" && "default" in e ? e : { "default": e };
 }
 var NextImage__default = /* @__PURE__ */ _interopDefaultLegacy(NextImage);
+const NextLegacyImage = NextImage__default["default"];
 function loadImage(src) {
   return new Promise((resolve, reject) => {
     const image = new Image();
@@ -103,9 +106,6 @@ const ImageComponent = React.forwardRef(function Image2({
   }), 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(Container, {
@@ -113,17 +113,25 @@ const ImageComponent = React.forwardRef(function Image2({
     ref,
     id,
     className: containerClassName,
-    children: isInBuilder ? /* @__PURE__ */ jsxRuntime.jsx("img", {
-      className: unoptimizedImageClassName,
-      src: imageSrc,
-      alt: altText
-    }) : /* @__PURE__ */ jsxRuntime.jsx(NextImage__default["default"], {
+    children: nextVersion.major < 13 ? /* @__PURE__ */ jsxRuntime.jsx(NextLegacyImage, {
       layout: "responsive",
       src: imageSrc,
       sizes: imageSizes(width),
       alt: altText,
       width: dimensions.width,
-      height: dimensions.height
+      height: dimensions.height,
+      unoptimized: isInBuilder
+    }) : /* @__PURE__ */ jsxRuntime.jsx(NextImage__default["default"], {
+      src: imageSrc,
+      sizes: imageSizes(width),
+      alt: altText != null ? altText : "",
+      width: dimensions.width,
+      height: dimensions.height,
+      style: {
+        width: "100%",
+        height: "auto"
+      },
+      unoptimized: isInBuilder
     })
   });
 });

package/dist/Image.cjs.js.map

@@ -1 +1 @@
-{"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 { 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'\nimport { useFile } from '../../../runtimes/react/hooks/makeswift-api'\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 ?? null)\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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"}
+{"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'\nimport type NextLegacyImageType from 'next/legacy/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 { 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'\nimport { useFile } from '../../../runtimes/react/hooks/makeswift-api'\nimport { major as nextMajorVersion } from '../../../next/next-version'\n\nconst NextLegacyImage = NextImage as typeof NextLegacyImageType\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 ?? null)\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\n  if (!dimensions) return null\n\n  return (\n    <Container link={link} ref={ref} id={id} className={containerClassName}>\n      {nextMajorVersion < 13 ? (\n        <NextLegacyImage\n          layout=\"responsive\"\n          src={imageSrc}\n          sizes={imageSizes(width)}\n          alt={altText}\n          width={dimensions.width}\n          height={dimensions.height}\n          unoptimized={isInBuilder}\n        />\n      ) : (\n        <NextImage\n          src={imageSrc}\n          sizes={imageSizes(width)}\n          alt={altText ?? ''}\n          width={dimensions.width}\n          height={dimensions.height}\n          style={{\n            width: '100%',\n            height: 'auto',\n          }}\n          unoptimized={isInBuilder}\n        />\n      )}\n    </Container>\n  )\n})\n\nexport default ImageComponent\n"],"names":["NextLegacyImage","NextImage","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","nextMajorVersion","_jsx","imageSizes"],"mappings":"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"}

package/dist/Image.es.js

@@ -1,23 +1,24 @@
 import { forwardRef, useState, useEffect } from "react";
 import NextImage from "next/image";
-import { B as useFile, u as useIsInBuilder, n as useStyle, o as responsiveWidth, r as responsiveStyle, F as DEVICES, G as findDeviceOverride } from "./index.es.js";
+import { B as useFile, u as useIsInBuilder, o as useStyle, p as responsiveWidth, r as responsiveStyle, F as DEVICES, G as findDeviceOverride } from "./index.es.js";
 import { p as placeholders } from "./placeholders.es.js";
-import { L as Link } from "./index.es2.js";
+import { L as Link } from "./index.es3.js";
 import { cx } from "@emotion/css";
+import { m as major } from "./next-version.es.js";
 import { jsx } from "react/jsx-runtime";
 import "use-sync-external-store/shim/with-selector";
+import "next/dynamic";
 import "./react-page.es.js";
 import "redux";
 import "redux-thunk";
 import "./actions.es.js";
 import "./slot.es.js";
 import "./control.es.js";
-import "next/dynamic";
-import "slate";
-import "./types.es.js";
 import "./text-input.es.js";
 import "./combobox.es.js";
 import "use-sync-external-store/shim";
+import "slate";
+import "./types.es.js";
 import "color";
 import "scroll-into-view-if-needed";
 import "./box-models.es.js";
@@ -34,6 +35,8 @@ import "set-cookie-parser";
 import "uuid/v4";
 import "corporate-ipsum";
 import "next/link";
+import "next/package.json";
+const NextLegacyImage = NextImage;
 function loadImage(src) {
   return new Promise((resolve, reject) => {
     const image = new Image();
@@ -97,9 +100,6 @@ const ImageComponent = forwardRef(function Image2({
   }), 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(Container, {
@@ -107,17 +107,25 @@ const ImageComponent = forwardRef(function Image2({
     ref,
     id,
     className: containerClassName,
-    children: isInBuilder ? /* @__PURE__ */ jsx("img", {
-      className: unoptimizedImageClassName,
-      src: imageSrc,
-      alt: altText
-    }) : /* @__PURE__ */ jsx(NextImage, {
+    children: major < 13 ? /* @__PURE__ */ jsx(NextLegacyImage, {
       layout: "responsive",
       src: imageSrc,
       sizes: imageSizes(width),
       alt: altText,
       width: dimensions.width,
-      height: dimensions.height
+      height: dimensions.height,
+      unoptimized: isInBuilder
+    }) : /* @__PURE__ */ jsx(NextImage, {
+      src: imageSrc,
+      sizes: imageSizes(width),
+      alt: altText != null ? altText : "",
+      width: dimensions.width,
+      height: dimensions.height,
+      style: {
+        width: "100%",
+        height: "auto"
+      },
+      unoptimized: isInBuilder
     })
   });
 });

package/dist/Image.es.js.map

@@ -1 +1 @@
-{"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 { 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'\nimport { useFile } from '../../../runtimes/react/hooks/makeswift-api'\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 ?? null)\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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"}
+{"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'\nimport type NextLegacyImageType from 'next/legacy/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 { 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'\nimport { useFile } from '../../../runtimes/react/hooks/makeswift-api'\nimport { major as nextMajorVersion } from '../../../next/next-version'\n\nconst NextLegacyImage = NextImage as typeof NextLegacyImageType\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 ?? null)\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\n  if (!dimensions) return null\n\n  return (\n    <Container link={link} ref={ref} id={id} className={containerClassName}>\n      {nextMajorVersion < 13 ? (\n        <NextLegacyImage\n          layout=\"responsive\"\n          src={imageSrc}\n          sizes={imageSizes(width)}\n          alt={altText}\n          width={dimensions.width}\n          height={dimensions.height}\n          unoptimized={isInBuilder}\n        />\n      ) : (\n        <NextImage\n          src={imageSrc}\n          sizes={imageSizes(width)}\n          alt={altText ?? ''}\n          width={dimensions.width}\n          height={dimensions.height}\n          style={{\n            width: '100%',\n            height: 'auto',\n          }}\n          unoptimized={isInBuilder}\n        />\n      )}\n    </Container>\n  )\n})\n\nexport default ImageComponent\n"],"names":["NextLegacyImage","NextImage","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","nextMajorVersion","_jsx","imageSizes"],"mappings":"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"}

package/dist/LiveProvider.cjs.js

@@ -0,0 +1,62 @@
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+var React = require("react");
+var next = require("./index.cjs.js");
+var reactPage = require("./react-page.cjs.js");
+var actions = require("./actions.cjs.js");
+var jsxRuntime = require("react/jsx-runtime");
+require("use-sync-external-store/shim/with-selector");
+require("next/dynamic");
+require("@emotion/css");
+require("./slot.cjs.js");
+require("./text-input.cjs.js");
+require("./combobox.cjs.js");
+require("./control.cjs.js");
+require("use-sync-external-store/shim");
+require("slate");
+require("redux");
+require("redux-thunk");
+require("./types.cjs.js");
+require("color");
+require("scroll-into-view-if-needed");
+require("./box-models.cjs.js");
+require("css-box-model");
+require("react-dom");
+require("html-react-parser");
+require("next/head");
+require("@emotion/server/create-instance");
+require("next/document");
+require("cookie");
+require("cors");
+require("http-proxy");
+require("set-cookie-parser");
+require("uuid/v4");
+require("corporate-ipsum");
+function LiveProvider({
+  client,
+  children,
+  rootElements
+}) {
+  const store = React.useMemo(() => reactPage.configureStore({
+    preloadedState: next.storeContextDefaultValue.getState(),
+    rootElements
+  }), [rootElements]);
+  React.useEffect(() => {
+    var _a;
+    const unregisterDocuments = Array.from((_a = rootElements == null ? void 0 : rootElements.entries()) != null ? _a : []).map(([documentKey, rootElement]) => store.dispatch(actions.registerDocumentEffect(reactPage.createDocument(documentKey, rootElement))));
+    return () => {
+      unregisterDocuments.forEach((unregisterDocument) => {
+        unregisterDocument();
+      });
+    };
+  }, [store, rootElements]);
+  return /* @__PURE__ */ jsxRuntime.jsx(next.StoreContext.Provider, {
+    value: store,
+    children: /* @__PURE__ */ jsxRuntime.jsx(next.MakeswiftProvider, {
+      client,
+      children
+    })
+  });
+}
+exports["default"] = LiveProvider;
+//# sourceMappingURL=LiveProvider.cjs.js.map

package/dist/LiveProvider.cjs.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"LiveProvider.cjs.js","sources":["../src/runtimes/react/components/LiveProvider.tsx"],"sourcesContent":["import { ReactNode, useEffect, useMemo } from 'react'\n\nimport { StoreContext, storeContextDefaultValue } from '..'\nimport * as ReactPage from '../../../state/react-page'\nimport { MakeswiftProvider, MakeswiftClient } from '../../../api/react'\nimport { registerDocumentEffect } from '../../../state/actions'\n\ntype Props = {\n  client: MakeswiftClient\n  rootElements?: Map<string, ReactPage.Element>\n  children?: ReactNode\n}\n\nexport default function LiveProvider({ client, children, rootElements }: Props): JSX.Element {\n  const store = useMemo(\n    () =>\n      ReactPage.configureStore({\n        preloadedState: storeContextDefaultValue.getState(),\n        rootElements,\n      }),\n    [rootElements],\n  )\n\n  useEffect(() => {\n    const unregisterDocuments = Array.from(rootElements?.entries() ?? []).map(\n      ([documentKey, rootElement]) =>\n        store.dispatch(registerDocumentEffect(ReactPage.createDocument(documentKey, rootElement))),\n    )\n\n    return () => {\n      unregisterDocuments.forEach(unregisterDocument => {\n        unregisterDocument()\n      })\n    }\n  }, [store, rootElements])\n\n  return (\n    <StoreContext.Provider value={store}>\n      <MakeswiftProvider client={client}>{children}</MakeswiftProvider>\n    </StoreContext.Provider>\n  )\n}\n"],"names":["client","children","rootElements","store","useMemo","ReactPage","preloadedState","storeContextDefaultValue","getState","useEffect","unregisterDocuments","Array","from","entries","map","documentKey","rootElement","dispatch","registerDocumentEffect","forEach","unregisterDocument","_jsx","StoreContext","MakeswiftProvider"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAaqC,sBAAA;AAAA,EAAEA;AAAAA,EAAQC;AAAAA,EAAUC;AAAAA,GAAoC;AACrFC,QAAAA,QAAQC,cACZ,MACEC,yBAAyB;AAAA,IACvBC,gBAAgBC,8BAAyBC,SADlB;AAAA,IAEvBN;AAAAA,EAAAA,CAFF,GAIF,CAACA,YAAD,CANmB;AASrBO,QAAAA,UAAU,MAAM;;AACRC,UAAAA,sBAAsBC,MAAMC,KAAKV,mDAAcW,cAAdX,YAA2B,CAAA,CAAtC,EAA0CY,IACpE,CAAC,CAACC,aAAaC,iBACbb,MAAMc,SAASC,QAAuBb,uBAAAA,yBAAyBU,aAAaC,WAAtC,CAAD,CAArC,CAFwB;AAK5B,WAAO,MAAM;AACXN,0BAAoBS,QAAQC,CAAsB,uBAAA;AAC9B;MAAA,CADpB;AAAA,IAAA;AAAA,EADF,GAKC,CAACjB,OAAOD,YAAR,CAXM;AAcP,SAAAmB,2BAAA,IAACC,kBAAa,UAAd;AAAA,IAAuB,OAAOnB;AAAAA,IAA9B,yCACGoB,wBAAD;AAAA,MAAmB;AAAA,MAAiBtB;AAAAA,IAAAA,CAApC;AAAA,EAAA,CAFJ;AAKD;;"}

package/dist/LiveProvider.es.js

@@ -0,0 +1,60 @@
+import { useMemo, useEffect } from "react";
+import { U as storeContextDefaultValue, V as StoreContext, W as MakeswiftProvider } from "./index.es.js";
+import { q as configureStore, c as createDocument } from "./react-page.es.js";
+import { G as registerDocumentEffect } from "./actions.es.js";
+import { jsx } from "react/jsx-runtime";
+import "use-sync-external-store/shim/with-selector";
+import "next/dynamic";
+import "@emotion/css";
+import "./slot.es.js";
+import "./text-input.es.js";
+import "./combobox.es.js";
+import "./control.es.js";
+import "use-sync-external-store/shim";
+import "slate";
+import "redux";
+import "redux-thunk";
+import "./types.es.js";
+import "color";
+import "scroll-into-view-if-needed";
+import "./box-models.es.js";
+import "css-box-model";
+import "react-dom";
+import "html-react-parser";
+import "next/head";
+import "@emotion/server/create-instance";
+import "next/document";
+import "cookie";
+import "cors";
+import "http-proxy";
+import "set-cookie-parser";
+import "uuid/v4";
+import "corporate-ipsum";
+function LiveProvider({
+  client,
+  children,
+  rootElements
+}) {
+  const store = useMemo(() => configureStore({
+    preloadedState: storeContextDefaultValue.getState(),
+    rootElements
+  }), [rootElements]);
+  useEffect(() => {
+    var _a;
+    const unregisterDocuments = Array.from((_a = rootElements == null ? void 0 : rootElements.entries()) != null ? _a : []).map(([documentKey, rootElement]) => store.dispatch(registerDocumentEffect(createDocument(documentKey, rootElement))));
+    return () => {
+      unregisterDocuments.forEach((unregisterDocument) => {
+        unregisterDocument();
+      });
+    };
+  }, [store, rootElements]);
+  return /* @__PURE__ */ jsx(StoreContext.Provider, {
+    value: store,
+    children: /* @__PURE__ */ jsx(MakeswiftProvider, {
+      client,
+      children
+    })
+  });
+}
+export { LiveProvider as default };
+//# sourceMappingURL=LiveProvider.es.js.map

package/dist/LiveProvider.es.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"LiveProvider.es.js","sources":["../src/runtimes/react/components/LiveProvider.tsx"],"sourcesContent":["import { ReactNode, useEffect, useMemo } from 'react'\n\nimport { StoreContext, storeContextDefaultValue } from '..'\nimport * as ReactPage from '../../../state/react-page'\nimport { MakeswiftProvider, MakeswiftClient } from '../../../api/react'\nimport { registerDocumentEffect } from '../../../state/actions'\n\ntype Props = {\n  client: MakeswiftClient\n  rootElements?: Map<string, ReactPage.Element>\n  children?: ReactNode\n}\n\nexport default function LiveProvider({ client, children, rootElements }: Props): JSX.Element {\n  const store = useMemo(\n    () =>\n      ReactPage.configureStore({\n        preloadedState: storeContextDefaultValue.getState(),\n        rootElements,\n      }),\n    [rootElements],\n  )\n\n  useEffect(() => {\n    const unregisterDocuments = Array.from(rootElements?.entries() ?? []).map(\n      ([documentKey, rootElement]) =>\n        store.dispatch(registerDocumentEffect(ReactPage.createDocument(documentKey, rootElement))),\n    )\n\n    return () => {\n      unregisterDocuments.forEach(unregisterDocument => {\n        unregisterDocument()\n      })\n    }\n  }, [store, rootElements])\n\n  return (\n    <StoreContext.Provider value={store}>\n      <MakeswiftProvider client={client}>{children}</MakeswiftProvider>\n    </StoreContext.Provider>\n  )\n}\n"],"names":["client","children","rootElements","store","useMemo","ReactPage","preloadedState","storeContextDefaultValue","getState","useEffect","unregisterDocuments","Array","from","entries","map","documentKey","rootElement","dispatch","registerDocumentEffect","forEach","unregisterDocument","_jsx"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAaqC,sBAAA;AAAA,EAAEA;AAAAA,EAAQC;AAAAA,EAAUC;AAAAA,GAAoC;AACrFC,QAAAA,QAAQC,QACZ,MACEC,eAAyB;AAAA,IACvBC,gBAAgBC,yBAAyBC,SADlB;AAAA,IAEvBN;AAAAA,EAAAA,CAFF,GAIF,CAACA,YAAD,CANmB;AASrBO,YAAU,MAAM;;AACRC,UAAAA,sBAAsBC,MAAMC,KAAKV,mDAAcW,cAAdX,YAA2B,CAAA,CAAtC,EAA0CY,IACpE,CAAC,CAACC,aAAaC,iBACbb,MAAMc,SAASC,uBAAuBb,eAAyBU,aAAaC,WAAtC,CAAD,CAArC,CAFwB;AAK5B,WAAO,MAAM;AACXN,0BAAoBS,QAAQC,CAAsB,uBAAA;AAC9B;MAAA,CADpB;AAAA,IAAA;AAAA,EADF,GAKC,CAACjB,OAAOD,YAAR,CAXM;AAcP,SAAAmB,oBAAC,aAAa,UAAd;AAAA,IAAuB,OAAOlB;AAAAA,IAA9B,8BACG,mBAAD;AAAA,MAAmB;AAAA,MAAiBF;AAAAA,IAAAA,CAApC;AAAA,EAAA,CAFJ;AAKD;;"}

package/dist/Navigation.cjs.js

@@ -32,28 +32,31 @@ var __objRest = (source, exclude) => {
 };
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
 var React = require("react");
-var index = require("./index.cjs3.js");
+var index = require("./index.cjs4.js");
 var Image = require("./Image.cjs.js");
 var Button = require("./Button.cjs.js");
 var next = require("./index.cjs.js");
 var jsxRuntime = require("react/jsx-runtime");
 require("use-sync-external-store/shim");
 require("./slot.cjs.js");
-var index$1 = require("./index.cjs2.js");
+var index$1 = require("./index.cjs3.js");
+var useIsomorphicLayoutEffect = require("./useIsomorphicLayoutEffect.cjs.js");
 var css = require("@emotion/css");
 require("next/image");
 require("./placeholders.cjs.js");
+require("./next-version.cjs.js");
+require("next/package.json");
 require("use-sync-external-store/shim/with-selector");
+require("next/dynamic");
 require("./react-page.cjs.js");
 require("redux");
 require("redux-thunk");
 require("./actions.cjs.js");
 require("./control.cjs.js");
-require("next/dynamic");
-require("slate");
-require("./types.cjs.js");
 require("./text-input.cjs.js");
 require("./combobox.cjs.js");
+require("slate");
+require("./types.cjs.js");
 require("color");
 require("scroll-into-view-if-needed");
 require("./box-models.cjs.js");
@@ -368,7 +371,7 @@ function DropDownButton(_g) {
   ]);
   const container = React.useRef(null);
   const [position, setPosition] = React.useState("left");
-  next.useIsomorphicLayoutEffect(() => {
+  useIsomorphicLayoutEffect.useIsomorphicLayoutEffect(() => {
     if (container.current && container.current.ownerDocument.defaultView.innerWidth < container.current.offsetLeft + DROP_DOWN_MENU_WIDTH) {
       setPosition("right");
     } else {