@makeswift/runtime 0.9.0 → 0.9.1

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'\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 { Breakpoints, findBreakpointOverride } from '../../../state/modules/breakpoints'\nimport { placeholders } from '../../utils/placeholders'\nimport { Link } from '../../shared/Link'\nimport { cx } from '@emotion/css'\nimport { useStyle } from '../../../runtimes/react/use-style'\nimport { useResponsiveStyle, useResponsiveWidth } from '../../utils/responsive-style'\nimport { useFile } from '../../../runtimes/react/hooks/makeswift-api'\nimport { major as nextMajorVersion } from '../../../next/next-version'\nimport { useBreakpoints } from '../../../runtimes/react'\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(breakpoints: Breakpoints, width?: Props['width']): string {\n  const baseDevice = breakpoints.find(breakpoint => breakpoint.maxWidth == null)\n  const baseWidth = baseDevice && width && findBreakpointOverride(breakpoints, width, baseDevice.id)\n  const baseWidthSize =\n    baseWidth == null || baseWidth.value.unit !== 'px' ? '100vw' : `${baseWidth.value.value}px`\n\n  return breakpoints\n    .map(breakpoint => {\n      const override = findBreakpointOverride(breakpoints, width, breakpoint.id)\n\n      if (override == null || breakpoint.maxWidth == null || override.value.unit !== 'px') {\n        return null\n      }\n\n      return `(max-width: ${breakpoint.maxWidth}px) ${Math.min(\n        breakpoint.maxWidth,\n        override.value.value,\n      )}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 breakpoints = useBreakpoints()\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(useResponsiveWidth(width, dimensions?.width)),\n    useStyle(useResponsiveStyle([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(breakpoints, width)}\n          alt={altText}\n          width={dimensions.width}\n          height={dimensions.height}\n        />\n      ) : (\n        <NextImage\n          src={imageSrc}\n          sizes={imageSizes(breakpoints, width)}\n          alt={altText ?? ''}\n          width={dimensions.width}\n          height={dimensions.height}\n          style={{\n            width: '100%',\n            height: 'auto',\n          }}\n        />\n      )}\n    </Container>\n  )\n})\n\nexport default ImageComponent\n"],"names":["NextLegacyImage","NextImage","src","Promise","resolve","reject","image","Image","onload","onerror","breakpoints","width","baseDevice","find","breakpoint","maxWidth","baseWidth","findBreakpointOverride","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","useBreakpoints","useEffect","cleanedUp","then","naturalWidth","height","naturalHeight","catch","console","error","Container","Link","containerClassName","cx","useStyle","lineHeight","overflow","useResponsiveWidth","useResponsiveStyle","nextMajorVersion","_jsx","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 { Breakpoints, findBreakpointOverride } from '../../../state/modules/breakpoints'\nimport { placeholders } from '../../utils/placeholders'\nimport { Link } from '../../shared/Link'\nimport { cx } from '@emotion/css'\nimport { useStyle } from '../../../runtimes/react/use-style'\nimport { useResponsiveStyle, useResponsiveWidth } from '../../utils/responsive-style'\nimport { useFile } from '../../../runtimes/react/hooks/makeswift-api'\nimport { major as nextMajorVersion } from '../../../next/next-version'\nimport { useBreakpoints } from '../../../runtimes/react'\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(breakpoints: Breakpoints, width?: Props['width']): string {\n  const baseDevice = breakpoints.find(breakpoint => breakpoint.maxWidth == null)\n  const baseWidth = baseDevice && width && findBreakpointOverride(breakpoints, width, baseDevice.id)\n  const baseWidthSize =\n    baseWidth == null || baseWidth.value.unit !== 'px' ? '100vw' : `${baseWidth.value.value}px`\n\n  return breakpoints\n    .map(breakpoint => {\n      const override = findBreakpointOverride(breakpoints, width, breakpoint.id)\n\n      if (override == null || breakpoint.maxWidth == null || override.value.unit !== 'px') {\n        return null\n      }\n\n      return `(max-width: ${breakpoint.maxWidth}px) ${Math.min(\n        breakpoint.maxWidth,\n        override.value.value,\n      )}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 breakpoints = useBreakpoints()\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(useResponsiveWidth(width, dimensions?.width)),\n    useStyle(useResponsiveStyle([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(breakpoints, width)}\n          alt={altText}\n          width={dimensions.width}\n          height={dimensions.height}\n        />\n      ) : (\n        <NextImage\n          src={imageSrc}\n          sizes={imageSizes(breakpoints, width)}\n          alt={altText ?? ''}\n          width={dimensions.width}\n          height={dimensions.height}\n          style={{\n            width: '100%',\n            height: 'auto',\n          }}\n        />\n      )}\n    </Container>\n  )\n})\n\nexport default ImageComponent\n"],"names":["NextLegacyImage","NextImage","src","Promise","resolve","reject","image","Image","onload","onerror","breakpoints","width","baseDevice","find","breakpoint","maxWidth","baseWidth","findBreakpointOverride","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","useBreakpoints","useEffect","cleanedUp","then","naturalWidth","height","naturalHeight","catch","console","error","Container","Link","containerClassName","cx","useStyle","lineHeight","overflow","useResponsiveWidth","useResponsiveStyle","nextMajorVersion","_jsx","imageSizes"],"mappings":"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"}

package/dist/Image.es.js

@@ -4,26 +4,27 @@ import { findBreakpointOverride } from "./state/breakpoints.es.js";
 import { p as placeholders } from "./placeholders.es.js";
 import { L as Link } from "./index.es3.js";
 import { cx } from "@emotion/css";
-import { B as useFile, s as useBreakpoints, n as useStyle, p as useResponsiveWidth, o as useResponsiveStyle } from "./index.es.js";
+import { Z as useStyle } from "./react-page.es.js";
+import { z as useFile, r as useBreakpoints, o as useResponsiveWidth, n as useResponsiveStyle } from "./index.es.js";
 import { m as major } from "./next-version.es.js";
 import { jsx } from "react/jsx-runtime";
 import "./actions.es.js";
 import "scroll-into-view-if-needed";
 import "next/link";
-import "use-sync-external-store/shim/with-selector";
-import "next/dynamic";
-import "./react-page.es.js";
 import "redux";
 import "redux-thunk";
+import "@emotion/serialize";
+import "@emotion/utils";
 import "slate";
 import "is-hotkey";
 import "slate-react";
-import "@emotion/serialize";
-import "@emotion/utils";
+import "use-sync-external-store/shim/with-selector";
+import "next/dynamic";
 import "./text-input.es.js";
 import "./combobox.es.js";
 import "use-sync-external-store/shim";
 import "./types.es.js";
+import "./deepEqual.es.js";
 import "./box-models.es.js";
 import "css-box-model";
 import "color";

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'\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 { Breakpoints, findBreakpointOverride } from '../../../state/modules/breakpoints'\nimport { placeholders } from '../../utils/placeholders'\nimport { Link } from '../../shared/Link'\nimport { cx } from '@emotion/css'\nimport { useStyle } from '../../../runtimes/react/use-style'\nimport { useResponsiveStyle, useResponsiveWidth } from '../../utils/responsive-style'\nimport { useFile } from '../../../runtimes/react/hooks/makeswift-api'\nimport { major as nextMajorVersion } from '../../../next/next-version'\nimport { useBreakpoints } from '../../../runtimes/react'\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(breakpoints: Breakpoints, width?: Props['width']): string {\n  const baseDevice = breakpoints.find(breakpoint => breakpoint.maxWidth == null)\n  const baseWidth = baseDevice && width && findBreakpointOverride(breakpoints, width, baseDevice.id)\n  const baseWidthSize =\n    baseWidth == null || baseWidth.value.unit !== 'px' ? '100vw' : `${baseWidth.value.value}px`\n\n  return breakpoints\n    .map(breakpoint => {\n      const override = findBreakpointOverride(breakpoints, width, breakpoint.id)\n\n      if (override == null || breakpoint.maxWidth == null || override.value.unit !== 'px') {\n        return null\n      }\n\n      return `(max-width: ${breakpoint.maxWidth}px) ${Math.min(\n        breakpoint.maxWidth,\n        override.value.value,\n      )}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 breakpoints = useBreakpoints()\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(useResponsiveWidth(width, dimensions?.width)),\n    useStyle(useResponsiveStyle([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(breakpoints, width)}\n          alt={altText}\n          width={dimensions.width}\n          height={dimensions.height}\n        />\n      ) : (\n        <NextImage\n          src={imageSrc}\n          sizes={imageSizes(breakpoints, width)}\n          alt={altText ?? ''}\n          width={dimensions.width}\n          height={dimensions.height}\n          style={{\n            width: '100%',\n            height: 'auto',\n          }}\n        />\n      )}\n    </Container>\n  )\n})\n\nexport default ImageComponent\n"],"names":["NextLegacyImage","NextImage","src","Promise","resolve","reject","image","Image","onload","onerror","breakpoints","width","baseDevice","find","breakpoint","maxWidth","baseWidth","findBreakpointOverride","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","useBreakpoints","useEffect","cleanedUp","then","naturalWidth","height","naturalHeight","catch","console","error","Container","Link","containerClassName","cx","useStyle","lineHeight","overflow","useResponsiveWidth","useResponsiveStyle","nextMajorVersion","_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 { Breakpoints, findBreakpointOverride } from '../../../state/modules/breakpoints'\nimport { placeholders } from '../../utils/placeholders'\nimport { Link } from '../../shared/Link'\nimport { cx } from '@emotion/css'\nimport { useStyle } from '../../../runtimes/react/use-style'\nimport { useResponsiveStyle, useResponsiveWidth } from '../../utils/responsive-style'\nimport { useFile } from '../../../runtimes/react/hooks/makeswift-api'\nimport { major as nextMajorVersion } from '../../../next/next-version'\nimport { useBreakpoints } from '../../../runtimes/react'\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(breakpoints: Breakpoints, width?: Props['width']): string {\n  const baseDevice = breakpoints.find(breakpoint => breakpoint.maxWidth == null)\n  const baseWidth = baseDevice && width && findBreakpointOverride(breakpoints, width, baseDevice.id)\n  const baseWidthSize =\n    baseWidth == null || baseWidth.value.unit !== 'px' ? '100vw' : `${baseWidth.value.value}px`\n\n  return breakpoints\n    .map(breakpoint => {\n      const override = findBreakpointOverride(breakpoints, width, breakpoint.id)\n\n      if (override == null || breakpoint.maxWidth == null || override.value.unit !== 'px') {\n        return null\n      }\n\n      return `(max-width: ${breakpoint.maxWidth}px) ${Math.min(\n        breakpoint.maxWidth,\n        override.value.value,\n      )}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 breakpoints = useBreakpoints()\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(useResponsiveWidth(width, dimensions?.width)),\n    useStyle(useResponsiveStyle([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(breakpoints, width)}\n          alt={altText}\n          width={dimensions.width}\n          height={dimensions.height}\n        />\n      ) : (\n        <NextImage\n          src={imageSrc}\n          sizes={imageSizes(breakpoints, width)}\n          alt={altText ?? ''}\n          width={dimensions.width}\n          height={dimensions.height}\n          style={{\n            width: '100%',\n            height: 'auto',\n          }}\n        />\n      )}\n    </Container>\n  )\n})\n\nexport default ImageComponent\n"],"names":["NextLegacyImage","NextImage","src","Promise","resolve","reject","image","Image","onload","onerror","breakpoints","width","baseDevice","find","breakpoint","maxWidth","baseWidth","findBreakpointOverride","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","useBreakpoints","useEffect","cleanedUp","then","naturalWidth","height","naturalHeight","catch","console","error","Container","Link","containerClassName","cx","useStyle","lineHeight","overflow","useResponsiveWidth","useResponsiveStyle","nextMajorVersion","_jsx","imageSizes"],"mappings":"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"}

package/dist/LiveProvider.cjs.js

@@ -7,9 +7,6 @@ var jsxRuntime = require("react/jsx-runtime");
 require("use-sync-external-store/shim/with-selector");
 require("next/dynamic");
 require("./actions.cjs.js");
-require("@emotion/css");
-require("@emotion/serialize");
-require("@emotion/utils");
 require("./text-input.cjs.js");
 require("./combobox.cjs.js");
 require("slate");
@@ -20,9 +17,13 @@ require("use-sync-external-store/shim");
 require("redux");
 require("redux-thunk");
 require("./types.cjs.js");
+require("./deepEqual.cjs.js");
 require("./box-models.cjs.js");
 require("css-box-model");
 require("color");
+require("@emotion/css");
+require("@emotion/serialize");
+require("@emotion/utils");
 require("scroll-into-view-if-needed");
 require("react-dom");
 require("html-react-parser");

package/dist/LiveProvider.cjs.js.map

@@ -1 +1 @@
-{"version":3,"file":"LiveProvider.cjs.js","sources":["../src/runtimes/react/components/LiveProvider.tsx"],"sourcesContent":["import { ReactNode, useMemo } from 'react'\n\nimport { StoreContext, ReactRuntime } from '..'\nimport * as ReactPage from '../../../state/react-page'\nimport { MakeswiftProvider, MakeswiftClient } from '../../../api/react'\n\ntype Props = {\n  client: MakeswiftClient\n  rootElements?: Map<string, ReactPage.Element>\n  children?: ReactNode\n  runtime?: ReactRuntime\n}\n\nexport default function LiveProvider({\n  client,\n  children,\n  rootElements,\n  runtime,\n}: Props): JSX.Element {\n  const store = useMemo(\n    () =>\n      ReactPage.configureStore({\n        preloadedState: runtime ? runtime.store.getState() : ReactRuntime.store.getState(),\n        rootElements,\n      }),\n    [rootElements, runtime],\n  )\n\n  return (\n    <StoreContext.Provider value={store}>\n      <MakeswiftProvider client={client}>{children}</MakeswiftProvider>\n    </StoreContext.Provider>\n  )\n}\n"],"names":["client","children","rootElements","runtime","store","useMemo","ReactPage","preloadedState","getState","ReactRuntime","_jsx","StoreContext","MakeswiftProvider"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAaqC,sBAAA;AAAA,EACnCA;AAAAA,EACAC;AAAAA,EACAC;AAAAA,EACAC;AAAAA,GACqB;AACfC,QAAAA,QAAQC,cACZ,MACEC,yBAAyB;AAAA,IACvBC,gBAAgBJ,UAAUA,QAAQC,MAAMI,aAAaC,KAAAA,aAAaL,MAAMI,SADjD;AAAA,IAEvBN;AAAAA,EAFF,CAAA,GAIF,CAACA,cAAcC,OAAf,CANmB;AAUnB,SAAAO,2BAAA,IAACC,kBAAa,UAAd;AAAA,IAAuB,OAAOP;AAAAA,IAA9B,yCACGQ,wBAAD;AAAA,MAAmB;AAAA,MAAiBX;AAAAA,IAAAA,CAApC;AAAA,EAAA,CAFJ;AAKD;;"}
+{"version":3,"file":"LiveProvider.cjs.js","sources":["../src/runtimes/react/components/LiveProvider.tsx"],"sourcesContent":["import { ReactNode, useMemo } from 'react'\n\nimport { StoreContext, ReactRuntime } from '..'\nimport * as ReactPage from '../../../state/react-page'\nimport { MakeswiftProvider, MakeswiftClient } from '../../../api/react'\n\ntype Props = {\n  client: MakeswiftClient\n  rootElements?: Map<string, ReactPage.Element>\n  children?: ReactNode\n  runtime?: ReactRuntime\n}\n\nexport default function LiveProvider({\n  client,\n  children,\n  rootElements,\n  runtime,\n}: Props): JSX.Element {\n  const store = useMemo(\n    () =>\n      ReactPage.configureStore({\n        preloadedState: runtime ? runtime.store.getState() : ReactRuntime.store.getState(),\n        rootElements,\n      }),\n    [rootElements, runtime],\n  )\n\n  return (\n    <StoreContext.Provider value={store}>\n      <MakeswiftProvider client={client}>{children}</MakeswiftProvider>\n    </StoreContext.Provider>\n  )\n}\n"],"names":["client","children","rootElements","runtime","store","useMemo","ReactPage","preloadedState","getState","ReactRuntime","_jsx","StoreContext","MakeswiftProvider"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAaqC,sBAAA;AAAA,EACnCA;AAAAA,EACAC;AAAAA,EACAC;AAAAA,EACAC;AAAAA,GACqB;AACfC,QAAAA,QAAQC,cACZ,MACEC,yBAAyB;AAAA,IACvBC,gBAAgBJ,UAAUA,QAAQC,MAAMI,aAAaC,KAAAA,aAAaL,MAAMI,SADjD;AAAA,IAEvBN;AAAAA,EAFF,CAAA,GAIF,CAACA,cAAcC,OAAf,CANmB;AAUnB,SAAAO,2BAAA,IAACC,kBAAa,UAAd;AAAA,IAAuB,OAAOP;AAAAA,IAA9B,yCACGQ,wBAAD;AAAA,MAAmB;AAAA,MAAiBX;AAAAA,IAAAA,CAApC;AAAA,EAAA,CAFJ;AAKD;;"}

package/dist/LiveProvider.es.js

@@ -1,13 +1,10 @@
 import { useMemo } from "react";
-import { a as ReactRuntime, N as StoreContext, O as MakeswiftProvider } from "./index.es.js";
-import { ak as configureStore } from "./react-page.es.js";
+import { a as ReactRuntime, L as StoreContext, M as MakeswiftProvider } from "./index.es.js";
+import { am as configureStore } from "./react-page.es.js";
 import { jsx } from "react/jsx-runtime";
 import "use-sync-external-store/shim/with-selector";
 import "next/dynamic";
 import "./actions.es.js";
-import "@emotion/css";
-import "@emotion/serialize";
-import "@emotion/utils";
 import "./text-input.es.js";
 import "./combobox.es.js";
 import "slate";
@@ -18,9 +15,13 @@ import "use-sync-external-store/shim";
 import "redux";
 import "redux-thunk";
 import "./types.es.js";
+import "./deepEqual.es.js";
 import "./box-models.es.js";
 import "css-box-model";
 import "color";
+import "@emotion/css";
+import "@emotion/serialize";
+import "@emotion/utils";
 import "scroll-into-view-if-needed";
 import "react-dom";
 import "html-react-parser";

package/dist/LiveProvider.es.js.map

@@ -1 +1 @@
-{"version":3,"file":"LiveProvider.es.js","sources":["../src/runtimes/react/components/LiveProvider.tsx"],"sourcesContent":["import { ReactNode, useMemo } from 'react'\n\nimport { StoreContext, ReactRuntime } from '..'\nimport * as ReactPage from '../../../state/react-page'\nimport { MakeswiftProvider, MakeswiftClient } from '../../../api/react'\n\ntype Props = {\n  client: MakeswiftClient\n  rootElements?: Map<string, ReactPage.Element>\n  children?: ReactNode\n  runtime?: ReactRuntime\n}\n\nexport default function LiveProvider({\n  client,\n  children,\n  rootElements,\n  runtime,\n}: Props): JSX.Element {\n  const store = useMemo(\n    () =>\n      ReactPage.configureStore({\n        preloadedState: runtime ? runtime.store.getState() : ReactRuntime.store.getState(),\n        rootElements,\n      }),\n    [rootElements, runtime],\n  )\n\n  return (\n    <StoreContext.Provider value={store}>\n      <MakeswiftProvider client={client}>{children}</MakeswiftProvider>\n    </StoreContext.Provider>\n  )\n}\n"],"names":["client","children","rootElements","runtime","store","useMemo","ReactPage","preloadedState","getState","ReactRuntime","_jsx"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAaqC,sBAAA;AAAA,EACnCA;AAAAA,EACAC;AAAAA,EACAC;AAAAA,EACAC;AAAAA,GACqB;AACfC,QAAAA,QAAQC,QACZ,MACEC,eAAyB;AAAA,IACvBC,gBAAgBJ,UAAUA,QAAQC,MAAMI,aAAaC,aAAaL,MAAMI,SADjD;AAAA,IAEvBN;AAAAA,EAFF,CAAA,GAIF,CAACA,cAAcC,OAAf,CANmB;AAUnB,SAAAO,oBAAC,aAAa,UAAd;AAAA,IAAuB,OAAON;AAAAA,IAA9B,8BACG,mBAAD;AAAA,MAAmB;AAAA,MAAiBH;AAAAA,IAAAA,CAApC;AAAA,EAAA,CAFJ;AAKD;;"}
+{"version":3,"file":"LiveProvider.es.js","sources":["../src/runtimes/react/components/LiveProvider.tsx"],"sourcesContent":["import { ReactNode, useMemo } from 'react'\n\nimport { StoreContext, ReactRuntime } from '..'\nimport * as ReactPage from '../../../state/react-page'\nimport { MakeswiftProvider, MakeswiftClient } from '../../../api/react'\n\ntype Props = {\n  client: MakeswiftClient\n  rootElements?: Map<string, ReactPage.Element>\n  children?: ReactNode\n  runtime?: ReactRuntime\n}\n\nexport default function LiveProvider({\n  client,\n  children,\n  rootElements,\n  runtime,\n}: Props): JSX.Element {\n  const store = useMemo(\n    () =>\n      ReactPage.configureStore({\n        preloadedState: runtime ? runtime.store.getState() : ReactRuntime.store.getState(),\n        rootElements,\n      }),\n    [rootElements, runtime],\n  )\n\n  return (\n    <StoreContext.Provider value={store}>\n      <MakeswiftProvider client={client}>{children}</MakeswiftProvider>\n    </StoreContext.Provider>\n  )\n}\n"],"names":["client","children","rootElements","runtime","store","useMemo","ReactPage","preloadedState","getState","ReactRuntime","_jsx"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAaqC,sBAAA;AAAA,EACnCA;AAAAA,EACAC;AAAAA,EACAC;AAAAA,EACAC;AAAAA,GACqB;AACfC,QAAAA,QAAQC,QACZ,MACEC,eAAyB;AAAA,IACvBC,gBAAgBJ,UAAUA,QAAQC,MAAMI,aAAaC,aAAaL,MAAMI,SADjD;AAAA,IAEvBN;AAAAA,EAFF,CAAA,GAIF,CAACA,cAAcC,OAAf,CANmB;AAUnB,SAAAO,oBAAC,aAAa,UAAd;AAAA,IAAuB,OAAON;AAAAA,IAA9B,8BACG,mBAAD;AAAA,MAAmB;AAAA,MAAiBH;AAAAA,IAAAA,CAApC;AAAA,EAAA,CAFJ;AAKD;;"}

package/dist/Navigation.cjs.js

@@ -35,10 +35,10 @@ var React = require("react");
 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 reactPage = require("./react-page.cjs.js");
 var jsxRuntime = require("react/jsx-runtime");
+var next = require("./index.cjs.js");
 require("use-sync-external-store/shim");
-require("./react-page.cjs.js");
 require("slate");
 require("./state/breakpoints.cjs.js");
 require("is-hotkey");
@@ -53,15 +53,16 @@ require("next/package.json");
 require("./actions.cjs.js");
 require("scroll-into-view-if-needed");
 require("next/link");
-require("use-sync-external-store/shim/with-selector");
-require("next/dynamic");
 require("redux");
 require("redux-thunk");
 require("@emotion/serialize");
 require("@emotion/utils");
+require("use-sync-external-store/shim/with-selector");
+require("next/dynamic");
 require("./text-input.cjs.js");
 require("./combobox.cjs.js");
 require("./types.cjs.js");
+require("./deepEqual.cjs.js");
 require("./box-models.cjs.js");
 require("css-box-model");
 require("color");
@@ -129,7 +130,7 @@ function PlaceholderLink({
   button
 }) {
   return /* @__PURE__ */ jsxRuntime.jsx("div", {
-    className: next.useStyle({
+    className: reactPage.useStyle({
       width,
       height: button === true ? 32 : 8,
       backgroundColor: "#a1a8c2",
@@ -269,7 +270,7 @@ function DropDownMenu$1(_a) {
     "position"
   ]);
   return /* @__PURE__ */ jsxRuntime.jsx("div", __spreadProps(__spreadValues({}, restOfProps), {
-    className: css.cx(DROP_DOWN_MENU_CLASS_NAME, next.useStyle({
+    className: css.cx(DROP_DOWN_MENU_CLASS_NAME, reactPage.useStyle({
       position: "absolute",
       top: "100%",
       left: position === "left" ? 0 : "auto",
@@ -308,7 +309,7 @@ const DropDownContainer = React.forwardRef(function DropDownContainer2(_c, ref)
   ]);
   return /* @__PURE__ */ jsxRuntime.jsx("div", __spreadProps(__spreadValues({}, restOfProps), {
     ref,
-    className: css.cx(next.useStyle({
+    className: css.cx(reactPage.useStyle({
       position: "relative",
       [`&:hover .${DROP_DOWN_MENU_CLASS_NAME}`]: {
         display: "block",
@@ -329,7 +330,7 @@ function DropDownItem$1(_e) {
   ]);
   const colorData = next.useResponsiveColor(color);
   return /* @__PURE__ */ jsxRuntime.jsx(index$1.Link, __spreadProps(__spreadValues({}, restOfProps), {
-    className: css.cx(next.useStyle({
+    className: css.cx(reactPage.useStyle({
       display: "block",
       textDecoration: "none",
       lineHeight: 1.4,
@@ -337,7 +338,7 @@ function DropDownItem$1(_e) {
       color: "black",
       backgroundColor: "transparent",
       transition: "background-color 0.2s"
-    }), next.useStyle(next.useResponsiveTextStyle(textStyle)), next.useStyle(next.useResponsiveStyle([colorData, textStyle], ([color2, textStyle2 = {}]) => {
+    }), reactPage.useStyle(next.useResponsiveTextStyle(textStyle)), reactPage.useStyle(next.useResponsiveStyle([colorData, textStyle], ([color2, textStyle2 = {}]) => {
       const fontSize = textStyle2.fontSize || {
         value: 14,
         unit: "px"
@@ -354,7 +355,7 @@ function DropDownItem$1(_e) {
         letterSpacing: letterSpacing == null ? "normal" : `${letterSpacing}px`,
         textTransform: textTransform.includes("uppercase") ? "uppercase" : "none"
       };
-    })), next.useStyle({
+    })), reactPage.useStyle({
       "&:hover": {
         backgroundColor: "rgba(0, 0, 0, 0.04)"
       }
@@ -453,7 +454,7 @@ function DropDownMenu(_i) {
     "open"
   ]);
   return /* @__PURE__ */ jsxRuntime.jsx("div", __spreadProps(__spreadValues({}, restOfProps), {
-    className: css.cx(next.useStyle({
+    className: css.cx(reactPage.useStyle({
       display: open ? "flex" : "none",
       flexDirection: "column",
       padding: 8
@@ -467,7 +468,7 @@ function ButtonLink$1(_k) {
     "className"
   ]);
   return /* @__PURE__ */ jsxRuntime.jsx(Button["default"], __spreadProps(__spreadValues({}, restOfProps), {
-    className: css.cx(next.useStyle({
+    className: css.cx(reactPage.useStyle({
       margin: "8px 0"
     }), className)
   }));
@@ -484,12 +485,12 @@ function DropDownItem(_m) {
   ]);
   const colorData = next.useResponsiveColor(color);
   return /* @__PURE__ */ jsxRuntime.jsx(index$1.Link, __spreadProps(__spreadValues({}, restOfProps), {
-    className: css.cx(next.useStyle({
+    className: css.cx(reactPage.useStyle({
       textDecoration: "none",
       lineHeight: 1.4,
       padding: "8px 16px",
       color: "black"
-    }), next.useStyle(next.useResponsiveTextStyle(textStyle)), next.useStyle(next.useResponsiveStyle([colorData], ([color2]) => ({
+    }), reactPage.useStyle(next.useResponsiveTextStyle(textStyle)), reactPage.useStyle(next.useResponsiveStyle([colorData], ([color2]) => ({
       color: color2 == null ? "black" : next.colorToString(color2)
     }))), className)
   }));
@@ -560,7 +561,7 @@ function ButtonLink(_q) {
     "color"
   ]);
   return /* @__PURE__ */ jsxRuntime.jsx(Button["default"], __spreadProps(__spreadValues({}, restOfProps), {
-    className: css.cx(next.useStyle({
+    className: css.cx(reactPage.useStyle({
       margin: "8px 0"
     }), className),
     textColor: next.useResponsiveColor(textColor),
@@ -580,7 +581,7 @@ function Container$1(_s) {
     "open"
   ]);
   return /* @__PURE__ */ jsxRuntime.jsx("div", __spreadProps(__spreadValues({}, restOfProps), {
-    className: css.cx(next.useStyle({
+    className: css.cx(reactPage.useStyle({
       position: "fixed",
       flexDirection: "column",
       width: "100%",
@@ -589,7 +590,7 @@ function Container$1(_s) {
       overflowY: "auto",
       zIndex: 9999,
       maxWidth: 575
-    }), next.useStyle(next.useResponsiveStyle([animation, backgroundColor], ([animation2, backgroundColor2]) => {
+    }), reactPage.useStyle(next.useResponsiveStyle([animation, backgroundColor], ([animation2, backgroundColor2]) => {
       if (animation2 == null)
         return {
           display: "none"
@@ -625,7 +626,7 @@ function CloseIconContainer(_u) {
     "color"
   ]);
   return /* @__PURE__ */ jsxRuntime.jsx("button", __spreadProps(__spreadValues({}, restOfProps), {
-    className: css.cx(next.useStyle({
+    className: css.cx(reactPage.useStyle({
       position: "absolute",
       top: 15,
       right: 15,
@@ -634,7 +635,7 @@ function CloseIconContainer(_u) {
       outline: 0,
       background: "none",
       fill: "currentcolor"
-    }), next.useStyle(next.useResponsiveStyle([color], ([color2]) => ({
+    }), reactPage.useStyle(next.useResponsiveStyle([color], ([color2]) => ({
       color: color2 == null ? "rgba(161, 168, 194, 0.5)" : next.colorToString(color2)
     }))), className)
   }));
@@ -690,10 +691,10 @@ const Container = React.forwardRef(function Container2(_w, ref) {
   ]);
   return /* @__PURE__ */ jsxRuntime.jsx("nav", __spreadProps(__spreadValues({}, restOfProps), {
     ref,
-    className: css.cx(next.useStyle({
+    className: css.cx(reactPage.useStyle({
       display: "flex",
       alignItems: "center"
-    }), width, margin, next.useStyle(next.useResponsiveTextStyle(textStyle)), next.useStyle(next.useResponsiveStyle([gutter], ([gutter2 = {
+    }), width, margin, reactPage.useStyle(next.useResponsiveTextStyle(textStyle)), reactPage.useStyle(next.useResponsiveStyle([gutter], ([gutter2 = {
       value: 0,
       unit: "px"
     }]) => ({
@@ -712,11 +713,11 @@ function LinksContainer(_y) {
     "mobileMenuAnimation"
   ]);
   return /* @__PURE__ */ jsxRuntime.jsx("div", __spreadProps(__spreadValues({}, restOfProps), {
-    className: css.cx(next.useStyle({
+    className: css.cx(reactPage.useStyle({
       display: "flex",
       alignItems: "center",
       flexGrow: 1
-    }), next.useStyle(next.useResponsiveStyle([alignment, mobileMenuAnimation], ([alignment2 = "flex-end", mobileMenuAnimation2]) => ({
+    }), reactPage.useStyle(next.useResponsiveStyle([alignment, mobileMenuAnimation], ([alignment2 = "flex-end", mobileMenuAnimation2]) => ({
       display: mobileMenuAnimation2 == null ? "flex" : "none",
       justifyContent: alignment2
     }))), className)
@@ -735,7 +736,7 @@ function OpenIconContainer(_A) {
     "color"
   ]);
   return /* @__PURE__ */ jsxRuntime.jsx("button", __spreadProps(__spreadValues({}, restOfProps), {
-    className: css.cx(next.useStyle({
+    className: css.cx(reactPage.useStyle({
       display: "none",
       flexGrow: 1,
       alignItems: "center",
@@ -744,7 +745,7 @@ function OpenIconContainer(_A) {
       border: 0,
       padding: 0,
       fill: "currentcolor"
-    }), next.useStyle(next.useResponsiveStyle([mobileMenuAnimation, alignment, color], ([mobileMenuAnimation2, alignment2 = "flex-end", color2]) => ({
+    }), reactPage.useStyle(next.useResponsiveStyle([mobileMenuAnimation, alignment, color], ([mobileMenuAnimation2, alignment2 = "flex-end", color2]) => ({
       display: mobileMenuAnimation2 == null ? "none" : "flex",
       justifyContent: alignment2,
       color: color2 == null ? "rgba(161, 168, 194, 0.5)" : next.colorToString(color2)