@makeswift/runtime 0.26.2 → 0.26.3

package/dist/cjs/components/builtin/Navigation/components/MobileMenu/index.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../../../../../src/components/builtin/Navigation/components/MobileMenu/index.tsx"],"sourcesContent":["import { ComponentPropsWithoutRef, Fragment } from 'react'\n\nimport { ColorValue as Color } from '../../../../utils/types'\nimport { colorToString } from '../../../../utils/colorToString'\nimport { Times16 } from '../../../../icons/Times16'\n\nimport Button from '../../../Button'\nimport DropDownButton from './components/MobileDropDownButton'\nimport { useResponsiveColor } from '../../../../hooks'\nimport { cx } from '@emotion/css'\nimport { useStyle } from '../../../../../runtimes/react/use-style'\nimport { useResponsiveStyle } from '../../../../utils/responsive-style'\nimport { type ResponsiveColor } from '../../../../utils/types'\nimport {\n  type NavigationButtonData,\n  type NavigationLinksData,\n  type ResponsiveValue,\n} from '@makeswift/prop-controllers'\n\ntype NavigationButtonProps = NavigationButtonData['payload'] &\n  Omit<ComponentPropsWithoutRef<typeof Button>, 'color' | 'textColor'>\n\nfunction ButtonLink({\n  className,\n  textColor,\n  color,\n  ...restOfProps\n}: NavigationButtonProps): JSX.Element {\n  return (\n    <Button\n      {...restOfProps}\n      className={cx(useStyle({ margin: '8px 0' }), className)}\n      textColor={useResponsiveColor(textColor)}\n      color={useResponsiveColor(color)}\n    />\n  )\n}\n\ntype ContainerBaseProps = {\n  className?: string\n  animation?: ResponsiveValue<'coverRight' | 'coverLeft'>\n  backgroundColor?: ResponsiveValue<Color> | null\n  open: boolean\n}\n\ntype ContainerProps = ContainerBaseProps &\n  Omit<ComponentPropsWithoutRef<'div'>, keyof ContainerBaseProps>\n\nfunction Container({\n  className,\n  animation,\n  backgroundColor,\n  open,\n  ...restOfProps\n}: ContainerProps) {\n  return (\n    <div\n      {...restOfProps}\n      className={cx(\n        useStyle({\n          position: 'fixed',\n          flexDirection: 'column',\n          width: '100%',\n          padding: '40px 15px',\n          transition: 'transform 300ms ease-in-out',\n          overflowY: 'auto',\n          zIndex: 9999,\n          maxWidth: 575,\n        }),\n        useStyle(\n          useResponsiveStyle(\n            [animation, backgroundColor] as const,\n            ([animation, backgroundColor]) => {\n              if (animation == null) return { display: 'none' }\n\n              return {\n                display: 'flex',\n                backgroundColor: backgroundColor == null ? 'black' : colorToString(backgroundColor),\n                transform: open\n                  ? `translate3d(0,0,0)`\n                  : `translate3d(${{ coverRight: '', coverLeft: '-' }[animation]}100%, 0, 0)`,\n                ...{\n                  coverRight: { top: 0, bottom: 0, right: 0 },\n                  coverLeft: { top: 0, bottom: 0, left: 0 },\n                }[animation],\n              }\n            },\n          ),\n        ),\n        className,\n      )}\n    />\n  )\n}\n\ntype CloseIconContainerBaseProps = {\n  className?: string\n  color?: ResponsiveColor | null\n}\n\ntype CloseIconContainerProps = CloseIconContainerBaseProps &\n  Omit<ComponentPropsWithoutRef<'button'>, keyof CloseIconContainerBaseProps>\n\nfunction CloseIconContainer({ className, color, ...restOfProps }: CloseIconContainerProps) {\n  return (\n    <button\n      {...restOfProps}\n      className={cx(\n        useStyle({\n          position: 'absolute',\n          top: 15,\n          right: 15,\n          padding: 0,\n          border: 0,\n          outline: 0,\n          background: 'none',\n          fill: 'currentcolor',\n        }),\n        useStyle(\n          useResponsiveStyle([color] as const, ([color]) => ({\n            color: color == null ? 'rgba(161, 168, 194, 0.5)' : colorToString(color),\n          })),\n        ),\n        className,\n      )}\n    />\n  )\n}\n\ntype Props = {\n  animation?: ResponsiveValue<'coverRight' | 'coverLeft'>\n  backgroundColor?: ResponsiveColor | null\n  closeIconColor?: ResponsiveColor | null\n  links?: NavigationLinksData\n  onClose?: () => unknown\n  open?: boolean\n}\n\nexport default function MobileMenu({\n  animation,\n  backgroundColor,\n  open = false,\n  closeIconColor,\n  links = [],\n  onClose = () => {},\n}: Props): JSX.Element {\n  return (\n    <Container animation={animation} backgroundColor={backgroundColor} open={open}>\n      <CloseIconContainer color={closeIconColor} onClick={onClose}>\n        <Times16 />\n      </CloseIconContainer>\n      <div\n        style={{ display: 'flex', flexDirection: 'column', alignItems: 'center', flexShrink: 0 }}\n      >\n        {links.map(link => (\n          <Fragment key={link.id}>\n            {link.type === 'button' && (\n              <ButtonLink {...link.payload} onClick={onClose}>\n                {link.payload.label}\n              </ButtonLink>\n            )}\n            {link.type === 'dropdown' && <DropDownButton {...link.payload} onClose={onClose} />}\n          </Fragment>\n        ))}\n      </div>\n    </Container>\n  )\n}\n"],"mappings":"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","names":["Button","animation","backgroundColor","color","DropDownButton"]}
+{"version":3,"sources":["../../../../../../../src/components/builtin/Navigation/components/MobileMenu/index.tsx"],"sourcesContent":["import { ComponentPropsWithoutRef, Fragment, ReactNode } from 'react'\n\nimport { ColorValue as Color } from '../../../../utils/types'\nimport { colorToString } from '../../../../utils/colorToString'\nimport { Times16 } from '../../../../icons/Times16'\n\nimport Button from '../../../Button'\nimport DropDownButton from './components/MobileDropDownButton'\nimport { useResponsiveColor } from '../../../../hooks'\nimport { cx } from '@emotion/css'\nimport { useStyle } from '../../../../../runtimes/react/use-style'\nimport { useResponsiveStyle } from '../../../../utils/responsive-style'\nimport { type ResponsiveColor } from '../../../../utils/types'\nimport {\n  type NavigationButtonData,\n  type NavigationLinksData,\n  type ResponsiveValue,\n} from '@makeswift/prop-controllers'\n\ntype NavigationButtonProps = NavigationButtonData['payload'] &\n  Omit<ComponentPropsWithoutRef<typeof Button>, 'color' | 'textColor'>\n\nfunction ButtonLink({\n  className,\n  textColor,\n  color,\n  ...restOfProps\n}: NavigationButtonProps): ReactNode {\n  return (\n    <Button\n      {...restOfProps}\n      className={cx(useStyle({ margin: '8px 0' }), className)}\n      textColor={useResponsiveColor(textColor)}\n      color={useResponsiveColor(color)}\n    />\n  )\n}\n\ntype ContainerBaseProps = {\n  className?: string\n  animation?: ResponsiveValue<'coverRight' | 'coverLeft'>\n  backgroundColor?: ResponsiveValue<Color> | null\n  open: boolean\n}\n\ntype ContainerProps = ContainerBaseProps &\n  Omit<ComponentPropsWithoutRef<'div'>, keyof ContainerBaseProps>\n\nfunction Container({\n  className,\n  animation,\n  backgroundColor,\n  open,\n  ...restOfProps\n}: ContainerProps) {\n  return (\n    <div\n      {...restOfProps}\n      className={cx(\n        useStyle({\n          position: 'fixed',\n          flexDirection: 'column',\n          width: '100%',\n          padding: '40px 15px',\n          transition: 'transform 300ms ease-in-out',\n          overflowY: 'auto',\n          zIndex: 9999,\n          maxWidth: 575,\n        }),\n        useStyle(\n          useResponsiveStyle(\n            [animation, backgroundColor] as const,\n            ([animation, backgroundColor]) => {\n              if (animation == null) return { display: 'none' }\n\n              return {\n                display: 'flex',\n                backgroundColor: backgroundColor == null ? 'black' : colorToString(backgroundColor),\n                transform: open\n                  ? `translate3d(0,0,0)`\n                  : `translate3d(${{ coverRight: '', coverLeft: '-' }[animation]}100%, 0, 0)`,\n                ...{\n                  coverRight: { top: 0, bottom: 0, right: 0 },\n                  coverLeft: { top: 0, bottom: 0, left: 0 },\n                }[animation],\n              }\n            },\n          ),\n        ),\n        className,\n      )}\n    />\n  )\n}\n\ntype CloseIconContainerBaseProps = {\n  className?: string\n  color?: ResponsiveColor | null\n}\n\ntype CloseIconContainerProps = CloseIconContainerBaseProps &\n  Omit<ComponentPropsWithoutRef<'button'>, keyof CloseIconContainerBaseProps>\n\nfunction CloseIconContainer({ className, color, ...restOfProps }: CloseIconContainerProps) {\n  return (\n    <button\n      {...restOfProps}\n      className={cx(\n        useStyle({\n          position: 'absolute',\n          top: 15,\n          right: 15,\n          padding: 0,\n          border: 0,\n          outline: 0,\n          background: 'none',\n          fill: 'currentcolor',\n        }),\n        useStyle(\n          useResponsiveStyle([color] as const, ([color]) => ({\n            color: color == null ? 'rgba(161, 168, 194, 0.5)' : colorToString(color),\n          })),\n        ),\n        className,\n      )}\n    />\n  )\n}\n\ntype Props = {\n  animation?: ResponsiveValue<'coverRight' | 'coverLeft'>\n  backgroundColor?: ResponsiveColor | null\n  closeIconColor?: ResponsiveColor | null\n  links?: NavigationLinksData\n  onClose?: () => unknown\n  open?: boolean\n}\n\nexport default function MobileMenu({\n  animation,\n  backgroundColor,\n  open = false,\n  closeIconColor,\n  links = [],\n  onClose = () => {},\n}: Props): ReactNode {\n  return (\n    <Container animation={animation} backgroundColor={backgroundColor} open={open}>\n      <CloseIconContainer color={closeIconColor} onClick={onClose}>\n        <Times16 />\n      </CloseIconContainer>\n      <div\n        style={{ display: 'flex', flexDirection: 'column', alignItems: 'center', flexShrink: 0 }}\n      >\n        {links.map(link => (\n          <Fragment key={link.id}>\n            {link.type === 'button' && (\n              <ButtonLink {...link.payload} onClick={onClose}>\n                {link.payload.label}\n              </ButtonLink>\n            )}\n            {link.type === 'dropdown' && <DropDownButton {...link.payload} onClose={onClose} />}\n          </Fragment>\n        ))}\n      </div>\n    </Container>\n  )\n}\n"],"mappings":"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","names":["Button","animation","backgroundColor","color","DropDownButton"]}

package/dist/cjs/components/builtin/SocialLinks/components/SocialLinksPlaceholder/index.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../../../../../src/components/builtin/SocialLinks/components/SocialLinksPlaceholder/index.tsx"],"sourcesContent":["import { LengthData, ResponsiveValue } from '@makeswift/prop-controllers'\nimport { useStyle } from '../../../../../runtimes/react/use-style'\n\nimport GutterContainer from '../../../../shared/GutterContainer'\n\nconst links = [{ id: '1' }, { id: '2' }, { id: '3' }]\n\ntype Props = { gutter?: ResponsiveValue<LengthData> }\n\nexport default function SocialLinksPlaceholder({ gutter }: Props): JSX.Element {\n  return (\n    <>\n      {links.map((link, i) => (\n        <GutterContainer\n          key={link.id}\n          gutter={gutter}\n          first={i === 0}\n          last={i === links.length - 1}\n        >\n          <PlaceholderLink />\n        </GutterContainer>\n      ))}\n    </>\n  )\n}\n\nfunction PlaceholderLink() {\n  return (\n    <div\n      className={useStyle({\n        width: 44,\n        height: 44,\n        borderRadius: '50%',\n        backgroundColor: 'rgba(161, 168, 194, 0.4)',\n      })}\n    />\n  )\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAWI;AAVJ,uBAAyB;AAEzB,6BAA4B;AAE5B,MAAM,QAAQ,CAAC,EAAE,IAAI,IAAI,GAAG,EAAE,IAAI,IAAI,GAAG,EAAE,IAAI,IAAI,CAAC;AAIrC,SAAR,uBAAwC,EAAE,OAAO,GAAuB;AAC7E,SACE,2EACG,gBAAM,IAAI,CAAC,MAAM,MAChB;AAAA,IAAC,uBAAAA;AAAA,IAAA;AAAA,MAEC;AAAA,MACA,OAAO,MAAM;AAAA,MACb,MAAM,MAAM,MAAM,SAAS;AAAA,MAE3B,sDAAC,mBAAgB;AAAA;AAAA,IALZ,KAAK;AAAA,EAMZ,CACD,GACH;AAEJ;AAEA,SAAS,kBAAkB;AACzB,SACE;AAAA,IAAC;AAAA;AAAA,MACC,eAAW,2BAAS;AAAA,QAClB,OAAO;AAAA,QACP,QAAQ;AAAA,QACR,cAAc;AAAA,QACd,iBAAiB;AAAA,MACnB,CAAC;AAAA;AAAA,EACH;AAEJ;","names":["GutterContainer"]}
+{"version":3,"sources":["../../../../../../../src/components/builtin/SocialLinks/components/SocialLinksPlaceholder/index.tsx"],"sourcesContent":["import { ReactNode } from 'react'\nimport { LengthData, ResponsiveValue } from '@makeswift/prop-controllers'\nimport { useStyle } from '../../../../../runtimes/react/use-style'\n\nimport GutterContainer from '../../../../shared/GutterContainer'\n\nconst links = [{ id: '1' }, { id: '2' }, { id: '3' }]\n\ntype Props = { gutter?: ResponsiveValue<LengthData> }\n\nexport default function SocialLinksPlaceholder({ gutter }: Props): ReactNode {\n  return (\n    <>\n      {links.map((link, i) => (\n        <GutterContainer\n          key={link.id}\n          gutter={gutter}\n          first={i === 0}\n          last={i === links.length - 1}\n        >\n          <PlaceholderLink />\n        </GutterContainer>\n      ))}\n    </>\n  )\n}\n\nfunction PlaceholderLink() {\n  return (\n    <div\n      className={useStyle({\n        width: 44,\n        height: 44,\n        borderRadius: '50%',\n        backgroundColor: 'rgba(161, 168, 194, 0.4)',\n      })}\n    />\n  )\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAYI;AAVJ,uBAAyB;AAEzB,6BAA4B;AAE5B,MAAM,QAAQ,CAAC,EAAE,IAAI,IAAI,GAAG,EAAE,IAAI,IAAI,GAAG,EAAE,IAAI,IAAI,CAAC;AAIrC,SAAR,uBAAwC,EAAE,OAAO,GAAqB;AAC3E,SACE,2EACG,gBAAM,IAAI,CAAC,MAAM,MAChB;AAAA,IAAC,uBAAAA;AAAA,IAAA;AAAA,MAEC;AAAA,MACA,OAAO,MAAM;AAAA,MACb,MAAM,MAAM,MAAM,SAAS;AAAA,MAE3B,sDAAC,mBAAgB;AAAA;AAAA,IALZ,KAAK;AAAA,EAMZ,CACD,GACH;AAEJ;AAEA,SAAS,kBAAkB;AACzB,SACE;AAAA,IAAC;AAAA;AAAA,MACC,eAAW,2BAAS;AAAA,QAClB,OAAO;AAAA,QACP,QAAQ;AAAA,QACR,cAAc;AAAA,QACd,iBAAiB;AAAA,MACnB,CAAC;AAAA;AAAA,EACH;AAEJ;","names":["GutterContainer"]}

package/dist/cjs/components/shared/BackgroundsContainer/components/BackgroundVideo/index.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../../../../../src/components/shared/BackgroundsContainer/components/BackgroundVideo/index.tsx"],"sourcesContent":["import { cx } from '@emotion/css'\nimport { useState, useRef, ComponentPropsWithoutRef, ForwardedRef, forwardRef } from 'react'\n\nimport { ReactPlayer } from '../../../react-player'\nimport { useStyle } from '../../../../../runtimes/react/use-style'\n\nimport { useIsomorphicLayoutEffect } from '../../../../hooks/useIsomorphicLayoutEffect'\n\nconst Container = forwardRef(function Container(\n  { className, ...restOfProps }: ComponentPropsWithoutRef<'div'>,\n  ref: ForwardedRef<HTMLDivElement>,\n) {\n  return (\n    <div\n      {...restOfProps}\n      ref={ref}\n      className={cx(\n        useStyle({\n          position: 'absolute',\n          top: 0,\n          left: 0,\n          right: 0,\n          bottom: 0,\n          pointerEvents: 'none',\n          overflow: 'hidden',\n        }),\n        className,\n      )}\n    />\n  )\n})\n\nfunction Mask({\n  backgroundColor,\n  visible,\n}: {\n  backgroundColor: string | undefined\n  visible: boolean\n}) {\n  return (\n    <div\n      className={useStyle({\n        position: 'absolute',\n        top: 0,\n        left: 0,\n        right: 0,\n        bottom: 0,\n        background: backgroundColor,\n        opacity: visible ? 1 : 0,\n        transition: 'opacity 1s',\n      })}\n    />\n  )\n}\n\nconst getScale = (element: HTMLElement, aspectRatio: number, zoom: number) => {\n  const { offsetWidth: width, offsetHeight: height } = element\n  const computedAspectRatio = width / height\n\n  return Math.max(aspectRatio / computedAspectRatio, computedAspectRatio / aspectRatio) * zoom\n}\n\ntype Props = {\n  url?: string\n  aspectRatio?: number\n  zoom?: number\n  opacity?: number\n  maskColor?: string\n}\n\nexport default function BackgroundVideo({\n  url = '',\n  aspectRatio = 16 / 9,\n  zoom = 1,\n  maskColor,\n  opacity,\n}: Props): JSX.Element {\n  const [ready, setReady] = useState(false)\n  const [scale, setScale] = useState(1)\n  const container = useRef<HTMLDivElement>(null)\n\n  useIsomorphicLayoutEffect(() => {\n    const { current: containerEl } = container\n\n    if (!containerEl) return undefined\n\n    const { defaultView } = containerEl.ownerDocument\n    const handleResize = () => setScale(getScale(containerEl, aspectRatio, zoom))\n\n    handleResize()\n\n    defaultView!.addEventListener('resize', handleResize)\n\n    return () => defaultView!.removeEventListener('resize', handleResize)\n  }, [aspectRatio, zoom])\n\n  if (!ReactPlayer.canPlay(url)) return <></>\n\n  return (\n    <Container ref={container}>\n      {container.current && (\n        <ReactPlayer\n          url={url}\n          config={{\n            vimeo: { playerOptions: { background: true } },\n            youtube: {\n              playerVars: {\n                origin: container.current.ownerDocument.defaultView?.location.origin,\n              },\n            },\n            wistia: {\n              options: {\n                endVideoBehavior: 'loop',\n                playbackRateControl: false,\n                playbar: false,\n                playButton: false,\n                volumeControl: false,\n                fullscreenButton: false,\n                muted: true,\n              },\n            },\n          }}\n          playing\n          loop\n          muted\n          playsinline={true}\n          controls={false}\n          onReady={() => setReady(true)}\n          style={{\n            transform: `scale3d(${scale}, ${scale}, 1)`,\n            opacity,\n          }}\n          width=\"100%\"\n          height=\"100%\"\n        />\n      )}\n      <Mask backgroundColor={maskColor} visible={!ready} />\n    </Container>\n  )\n}\n"],"mappings":"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","names":["Container"]}
+{"version":3,"sources":["../../../../../../../src/components/shared/BackgroundsContainer/components/BackgroundVideo/index.tsx"],"sourcesContent":["import { cx } from '@emotion/css'\nimport { useState, useRef, ComponentPropsWithoutRef, ForwardedRef, forwardRef, ReactNode } from 'react'\n\nimport { ReactPlayer } from '../../../react-player'\nimport { useStyle } from '../../../../../runtimes/react/use-style'\n\nimport { useIsomorphicLayoutEffect } from '../../../../hooks/useIsomorphicLayoutEffect'\n\nconst Container = forwardRef(function Container(\n  { className, ...restOfProps }: ComponentPropsWithoutRef<'div'>,\n  ref: ForwardedRef<HTMLDivElement>,\n) {\n  return (\n    <div\n      {...restOfProps}\n      ref={ref}\n      className={cx(\n        useStyle({\n          position: 'absolute',\n          top: 0,\n          left: 0,\n          right: 0,\n          bottom: 0,\n          pointerEvents: 'none',\n          overflow: 'hidden',\n        }),\n        className,\n      )}\n    />\n  )\n})\n\nfunction Mask({\n  backgroundColor,\n  visible,\n}: {\n  backgroundColor: string | undefined\n  visible: boolean\n}) {\n  return (\n    <div\n      className={useStyle({\n        position: 'absolute',\n        top: 0,\n        left: 0,\n        right: 0,\n        bottom: 0,\n        background: backgroundColor,\n        opacity: visible ? 1 : 0,\n        transition: 'opacity 1s',\n      })}\n    />\n  )\n}\n\nconst getScale = (element: HTMLElement, aspectRatio: number, zoom: number) => {\n  const { offsetWidth: width, offsetHeight: height } = element\n  const computedAspectRatio = width / height\n\n  return Math.max(aspectRatio / computedAspectRatio, computedAspectRatio / aspectRatio) * zoom\n}\n\ntype Props = {\n  url?: string\n  aspectRatio?: number\n  zoom?: number\n  opacity?: number\n  maskColor?: string\n}\n\nexport default function BackgroundVideo({\n  url = '',\n  aspectRatio = 16 / 9,\n  zoom = 1,\n  maskColor,\n  opacity,\n}: Props): ReactNode {\n  const [ready, setReady] = useState(false)\n  const [scale, setScale] = useState(1)\n  const container = useRef<HTMLDivElement>(null)\n\n  useIsomorphicLayoutEffect(() => {\n    const { current: containerEl } = container\n\n    if (!containerEl) return undefined\n\n    const { defaultView } = containerEl.ownerDocument\n    const handleResize = () => setScale(getScale(containerEl, aspectRatio, zoom))\n\n    handleResize()\n\n    defaultView!.addEventListener('resize', handleResize)\n\n    return () => defaultView!.removeEventListener('resize', handleResize)\n  }, [aspectRatio, zoom])\n\n  if (!ReactPlayer.canPlay(url)) return <></>\n\n  return (\n    <Container ref={container}>\n      {container.current && (\n        <ReactPlayer\n          url={url}\n          config={{\n            vimeo: { playerOptions: { background: true } },\n            youtube: {\n              playerVars: {\n                origin: container.current.ownerDocument.defaultView?.location.origin,\n              },\n            },\n            wistia: {\n              options: {\n                endVideoBehavior: 'loop',\n                playbackRateControl: false,\n                playbar: false,\n                playButton: false,\n                volumeControl: false,\n                fullscreenButton: false,\n                muted: true,\n              },\n            },\n          }}\n          playing\n          loop\n          muted\n          playsinline={true}\n          controls={false}\n          onReady={() => setReady(true)}\n          style={{\n            transform: `scale3d(${scale}, ${scale}, 1)`,\n            opacity,\n          }}\n          width=\"100%\"\n          height=\"100%\"\n        />\n      )}\n      <Mask backgroundColor={maskColor} visible={!ready} />\n    </Container>\n  )\n}\n"],"mappings":"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","names":["Container"]}

package/dist/cjs/components/shared/BackgroundsContainer/components/Backgrounds/index.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../../../../../src/components/shared/BackgroundsContainer/components/Backgrounds/index.tsx"],"sourcesContent":["import { BackgroundsPropControllerValue, BackgroundsData } from '../../../../hooks'\nimport { type ResponsiveValue } from '@makeswift/controls'\nimport { ColorValue as Color } from '../../../../utils/types'\nimport { colorToString } from '../../../../utils/colorToString'\nimport Parallax from '../Parallax'\nimport BackgroundVideo from '../BackgroundVideo'\nimport { type CSSObject } from '@emotion/serialize'\nimport { useStyle } from '../../../../../runtimes/react/use-style'\nimport { useResponsiveStyle } from '../../../../utils/responsive-style'\nimport { useFrameworkContext } from '../../../../../runtimes/react/components/hooks/use-framework-context'\n\nfunction getColor(color: Color | null | undefined) {\n  if (color == null) return 'black'\n\n  if (color.swatch == null) {\n    return colorToString({ ...color, swatch: { hue: 0, saturation: 0, lightness: 0 } })\n  }\n\n  return colorToString(color)\n}\n\ntype GradientStop = { color: Color | null | undefined; location: number }\n\nconst getStopsStyle = (stops: GradientStop[]) =>\n  stops.map(({ color, location }) => `${getColor(color)} ${location}%`).join(',')\n\nconst absoluteFillStyle: CSSObject = {\n  position: 'absolute',\n  top: 0,\n  right: 0,\n  bottom: 0,\n  left: 0,\n}\n\nconst containerStyle: CSSObject = {\n  ...absoluteFillStyle,\n  borderRadius: 'inherit',\n}\n\ntype Props = { backgrounds: BackgroundsPropControllerValue | null | undefined }\n\nexport default function Backgrounds({ backgrounds }: Props): JSX.Element {\n  if (backgrounds == null) return <></>\n\n  return (\n    <>\n      {backgrounds.map(({ value, deviceId }) => {\n        const visibility = backgrounds.map(v => ({\n          deviceId: v.deviceId,\n          value: v.deviceId === deviceId,\n        }))\n\n        return <BackgroundDeviceLayer key={deviceId} layer={value} visibility={visibility} />\n      })}\n    </>\n  )\n}\n\ntype BackgroundLayerProps = {\n  layer: BackgroundsData\n  visibility: ResponsiveValue<boolean>\n}\n\nfunction BackgroundDeviceLayer({ layer, visibility }: BackgroundLayerProps) {\n  const visibilityStyle = useResponsiveStyle([visibility], ([v]) => ({\n    display: v === true ? 'block' : 'none',\n  }))\n\n  return (\n    <div className={useStyle({ ...containerStyle, ...visibilityStyle, overflow: 'hidden' })}>\n      {[...layer].reverse().map(bg => {\n        if (bg.type === 'color') {\n          return <ColorBackground key={bg.id} color={getColor(bg.payload)} />\n        }\n\n        if (bg.type === 'image' && bg.payload) {\n          return <ImageBackground {...bg.payload} key={bg.id} />\n        }\n\n        if (bg.type === 'gradient' && bg.payload) {\n          return (\n            <GradientBackground\n              {...bg.payload}\n              key={bg.id}\n              gradient={getStopsStyle(bg.payload.stops)}\n            />\n          )\n        }\n\n        if (bg.type === 'video' && bg.payload) {\n          return (\n            <VideoBackground\n              {...bg.payload}\n              key={bg.id}\n              maskColor={getColor(bg.payload.maskColor)}\n            />\n          )\n        }\n\n        return null\n      })}\n    </div>\n  )\n}\n\ntype ColorBackgroundProps = { color: string }\n\nfunction ColorBackground({ color }: ColorBackgroundProps) {\n  return <div className={useStyle({ ...containerStyle, backgroundColor: color })} />\n}\n\nconst ImageBackgroundRepeat = {\n  NoRepeat: 'no-repeat',\n  RepeatX: 'repeat-x',\n  RepeatY: 'repeat-y',\n  Repeat: 'repeat',\n} as const\n\ntype ImageBackgroundRepeat = (typeof ImageBackgroundRepeat)[keyof typeof ImageBackgroundRepeat]\n\nconst ImageBackgroundSize = {\n  Cover: 'cover',\n  Contain: 'contain',\n  Auto: 'auto',\n} as const\n\ntype ImageBackgroundSize = (typeof ImageBackgroundSize)[keyof typeof ImageBackgroundSize]\n\ntype ImageBackgroundProps = {\n  publicUrl?: string\n  position: { x: number; y: number }\n  repeat?: ImageBackgroundRepeat\n  size?: ImageBackgroundSize\n  opacity?: number\n  parallax?: number\n  priority?: boolean\n}\n\nfunction ImageBackground({\n  publicUrl,\n  position,\n  repeat = ImageBackgroundRepeat.NoRepeat,\n  size = ImageBackgroundSize.Cover,\n  opacity,\n  parallax,\n  priority,\n}: ImageBackgroundProps) {\n  const backgroundPosition = `${position.x}% ${position.y}%`\n  const containerClassName = useStyle(containerStyle)\n  const { Image } = useFrameworkContext()\n\n  if (repeat === 'no-repeat' && size !== 'auto' && publicUrl != null) {\n    return (\n      <Parallax strength={parallax}>\n        {getParallaxProps => (\n          <div {...getParallaxProps({ style: { opacity, overflow: 'hidden' } })}>\n            <Image\n              src={publicUrl}\n              alt={''}\n              fill\n              sizes=\"100vw\"\n              style={{\n                objectPosition: backgroundPosition,\n                objectFit: size,\n              }}\n              priority={priority}\n            />\n          </div>\n        )}\n      </Parallax>\n    )\n  }\n\n  return (\n    <Parallax strength={parallax}>\n      {getParallaxProps => (\n        <div\n          className={containerClassName}\n          {...getParallaxProps({\n            style: {\n              backgroundImage: publicUrl != null ? `url('${publicUrl}')` : undefined,\n              backgroundPosition,\n              backgroundRepeat: repeat,\n              backgroundSize: size,\n              opacity,\n            },\n          })}\n        />\n      )}\n    </Parallax>\n  )\n}\n\ntype GradientBackgroundProps = {\n  gradient: string\n  angle?: number\n  isRadial?: boolean\n}\n\nfunction GradientBackground({\n  gradient,\n  isRadial = false,\n  angle = Math.PI,\n}: GradientBackgroundProps) {\n  return (\n    <div\n      className={useStyle({\n        ...containerStyle,\n        background: isRadial\n          ? `radial-gradient(${gradient})`\n          : `linear-gradient(${angle}rad, ${gradient})`,\n      })}\n    />\n  )\n}\n\nconst BackgroundVideoAspectRatio = {\n  Wide: 'wide',\n  Standard: 'standard',\n} as const\n\ntype BackgroundVideoAspectRatio =\n  (typeof BackgroundVideoAspectRatio)[keyof typeof BackgroundVideoAspectRatio]\n\nfunction getAspectRatio(aspectRatio: BackgroundVideoAspectRatio | null | undefined): number {\n  switch (aspectRatio) {\n    case 'wide':\n      return 16 / 9\n\n    case 'standard':\n      return 4 / 3\n\n    default:\n      return 16 / 9\n  }\n}\n\ntype VideoBackgroundProps = {\n  url?: string\n  aspectRatio?: BackgroundVideoAspectRatio\n  maskColor: string\n  zoom?: number\n  opacity?: number\n  parallax?: number\n}\n\nfunction VideoBackground({\n  url,\n  aspectRatio,\n  maskColor,\n  zoom,\n  opacity,\n  parallax,\n}: VideoBackgroundProps) {\n  return (\n    <Parallax strength={parallax}>\n      {getParallaxProps => (\n        <div {...getParallaxProps({ className: useStyle(containerStyle) })}>\n          <BackgroundVideo\n            url={url}\n            zoom={zoom}\n            opacity={opacity}\n            aspectRatio={getAspectRatio(aspectRatio)}\n            maskColor={maskColor}\n          />\n        </div>\n      )}\n    </Parallax>\n  )\n}\n"],"mappings":"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","names":["Parallax","BackgroundVideo"]}
+{"version":3,"sources":["../../../../../../../src/components/shared/BackgroundsContainer/components/Backgrounds/index.tsx"],"sourcesContent":["import { ReactNode } from 'react'\nimport { BackgroundsPropControllerValue, BackgroundsData } from '../../../../hooks'\nimport { type ResponsiveValue } from '@makeswift/controls'\nimport { ColorValue as Color } from '../../../../utils/types'\nimport { colorToString } from '../../../../utils/colorToString'\nimport Parallax from '../Parallax'\nimport BackgroundVideo from '../BackgroundVideo'\nimport { type CSSObject } from '@emotion/serialize'\nimport { useStyle } from '../../../../../runtimes/react/use-style'\nimport { useResponsiveStyle } from '../../../../utils/responsive-style'\nimport { useFrameworkContext } from '../../../../../runtimes/react/components/hooks/use-framework-context'\n\nfunction getColor(color: Color | null | undefined) {\n  if (color == null) return 'black'\n\n  if (color.swatch == null) {\n    return colorToString({ ...color, swatch: { hue: 0, saturation: 0, lightness: 0 } })\n  }\n\n  return colorToString(color)\n}\n\ntype GradientStop = { color: Color | null | undefined; location: number }\n\nconst getStopsStyle = (stops: GradientStop[]) =>\n  stops.map(({ color, location }) => `${getColor(color)} ${location}%`).join(',')\n\nconst absoluteFillStyle: CSSObject = {\n  position: 'absolute',\n  top: 0,\n  right: 0,\n  bottom: 0,\n  left: 0,\n}\n\nconst containerStyle: CSSObject = {\n  ...absoluteFillStyle,\n  borderRadius: 'inherit',\n}\n\ntype Props = { backgrounds: BackgroundsPropControllerValue | null | undefined }\n\nexport default function Backgrounds({ backgrounds }: Props): ReactNode {\n  if (backgrounds == null) return <></>\n\n  return (\n    <>\n      {backgrounds.map(({ value, deviceId }) => {\n        const visibility = backgrounds.map(v => ({\n          deviceId: v.deviceId,\n          value: v.deviceId === deviceId,\n        }))\n\n        return <BackgroundDeviceLayer key={deviceId} layer={value} visibility={visibility} />\n      })}\n    </>\n  )\n}\n\ntype BackgroundLayerProps = {\n  layer: BackgroundsData\n  visibility: ResponsiveValue<boolean>\n}\n\nfunction BackgroundDeviceLayer({ layer, visibility }: BackgroundLayerProps) {\n  const visibilityStyle = useResponsiveStyle([visibility], ([v]) => ({\n    display: v === true ? 'block' : 'none',\n  }))\n\n  return (\n    <div className={useStyle({ ...containerStyle, ...visibilityStyle, overflow: 'hidden' })}>\n      {[...layer].reverse().map(bg => {\n        if (bg.type === 'color') {\n          return <ColorBackground key={bg.id} color={getColor(bg.payload)} />\n        }\n\n        if (bg.type === 'image' && bg.payload) {\n          return <ImageBackground {...bg.payload} key={bg.id} />\n        }\n\n        if (bg.type === 'gradient' && bg.payload) {\n          return (\n            <GradientBackground\n              {...bg.payload}\n              key={bg.id}\n              gradient={getStopsStyle(bg.payload.stops)}\n            />\n          )\n        }\n\n        if (bg.type === 'video' && bg.payload) {\n          return (\n            <VideoBackground\n              {...bg.payload}\n              key={bg.id}\n              maskColor={getColor(bg.payload.maskColor)}\n            />\n          )\n        }\n\n        return null\n      })}\n    </div>\n  )\n}\n\ntype ColorBackgroundProps = { color: string }\n\nfunction ColorBackground({ color }: ColorBackgroundProps) {\n  return <div className={useStyle({ ...containerStyle, backgroundColor: color })} />\n}\n\nconst ImageBackgroundRepeat = {\n  NoRepeat: 'no-repeat',\n  RepeatX: 'repeat-x',\n  RepeatY: 'repeat-y',\n  Repeat: 'repeat',\n} as const\n\ntype ImageBackgroundRepeat = (typeof ImageBackgroundRepeat)[keyof typeof ImageBackgroundRepeat]\n\nconst ImageBackgroundSize = {\n  Cover: 'cover',\n  Contain: 'contain',\n  Auto: 'auto',\n} as const\n\ntype ImageBackgroundSize = (typeof ImageBackgroundSize)[keyof typeof ImageBackgroundSize]\n\ntype ImageBackgroundProps = {\n  publicUrl?: string\n  position: { x: number; y: number }\n  repeat?: ImageBackgroundRepeat\n  size?: ImageBackgroundSize\n  opacity?: number\n  parallax?: number\n  priority?: boolean\n}\n\nfunction ImageBackground({\n  publicUrl,\n  position,\n  repeat = ImageBackgroundRepeat.NoRepeat,\n  size = ImageBackgroundSize.Cover,\n  opacity,\n  parallax,\n  priority,\n}: ImageBackgroundProps) {\n  const backgroundPosition = `${position.x}% ${position.y}%`\n  const containerClassName = useStyle(containerStyle)\n  const { Image } = useFrameworkContext()\n\n  if (repeat === 'no-repeat' && size !== 'auto' && publicUrl != null) {\n    return (\n      <Parallax strength={parallax}>\n        {getParallaxProps => (\n          <div {...getParallaxProps({ style: { opacity, overflow: 'hidden' } })}>\n            <Image\n              src={publicUrl}\n              alt={''}\n              fill\n              sizes=\"100vw\"\n              style={{\n                objectPosition: backgroundPosition,\n                objectFit: size,\n              }}\n              priority={priority}\n            />\n          </div>\n        )}\n      </Parallax>\n    )\n  }\n\n  return (\n    <Parallax strength={parallax}>\n      {getParallaxProps => (\n        <div\n          className={containerClassName}\n          {...getParallaxProps({\n            style: {\n              backgroundImage: publicUrl != null ? `url('${publicUrl}')` : undefined,\n              backgroundPosition,\n              backgroundRepeat: repeat,\n              backgroundSize: size,\n              opacity,\n            },\n          })}\n        />\n      )}\n    </Parallax>\n  )\n}\n\ntype GradientBackgroundProps = {\n  gradient: string\n  angle?: number\n  isRadial?: boolean\n}\n\nfunction GradientBackground({\n  gradient,\n  isRadial = false,\n  angle = Math.PI,\n}: GradientBackgroundProps) {\n  return (\n    <div\n      className={useStyle({\n        ...containerStyle,\n        background: isRadial\n          ? `radial-gradient(${gradient})`\n          : `linear-gradient(${angle}rad, ${gradient})`,\n      })}\n    />\n  )\n}\n\nconst BackgroundVideoAspectRatio = {\n  Wide: 'wide',\n  Standard: 'standard',\n} as const\n\ntype BackgroundVideoAspectRatio =\n  (typeof BackgroundVideoAspectRatio)[keyof typeof BackgroundVideoAspectRatio]\n\nfunction getAspectRatio(aspectRatio: BackgroundVideoAspectRatio | null | undefined): number {\n  switch (aspectRatio) {\n    case 'wide':\n      return 16 / 9\n\n    case 'standard':\n      return 4 / 3\n\n    default:\n      return 16 / 9\n  }\n}\n\ntype VideoBackgroundProps = {\n  url?: string\n  aspectRatio?: BackgroundVideoAspectRatio\n  maskColor: string\n  zoom?: number\n  opacity?: number\n  parallax?: number\n}\n\nfunction VideoBackground({\n  url,\n  aspectRatio,\n  maskColor,\n  zoom,\n  opacity,\n  parallax,\n}: VideoBackgroundProps) {\n  return (\n    <Parallax strength={parallax}>\n      {getParallaxProps => (\n        <div {...getParallaxProps({ className: useStyle(containerStyle) })}>\n          <BackgroundVideo\n            url={url}\n            zoom={zoom}\n            opacity={opacity}\n            aspectRatio={getAspectRatio(aspectRatio)}\n            maskColor={maskColor}\n          />\n        </div>\n      )}\n    </Parallax>\n  )\n}\n"],"mappings":"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","names":["Parallax","BackgroundVideo"]}

package/dist/cjs/components/shared/BackgroundsContainer/components/Parallax/index.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../../../../../src/components/shared/BackgroundsContainer/components/Parallax/index.tsx"],"sourcesContent":["import { useState, useRef, useCallback, ReactNode, CSSProperties } from 'react'\nimport clamp from '../../../../../utils/clamp'\nimport { useIsomorphicLayoutEffect } from '../../../../hooks/useIsomorphicLayoutEffect'\n\nfunction isScrollable(element: HTMLElement) {\n  const { overflow, overflowY, overflowX } =\n    element.ownerDocument.defaultView!.getComputedStyle(element)\n\n  return /(auto|scroll)/.test(overflow + overflowX + overflowY)\n}\n\nfunction getScrollParent(element: HTMLElement): HTMLElement {\n  const { parentElement } = element\n\n  if (!element || !parentElement) return element\n\n  if (isScrollable(element)) return element\n\n  return getScrollParent(parentElement)\n}\n\ntype Props = {\n  strength: number | null | undefined\n  children: (\n    getParallaxProps: <P extends { style?: CSSProperties; [key: string]: unknown }>(props: P) => P,\n  ) => ReactNode\n}\n\nexport default function Parallax({ strength, children, ...rest }: Props): JSX.Element {\n  const container = useRef<HTMLDivElement>(null)\n  const [containerScrollTop, setContainerScrollTop] = useState(strength == null ? 0 : strength)\n  const lastScrollParentScrollTop = useRef(0)\n\n  useIsomorphicLayoutEffect(() => {\n    if (!container.current || strength == null || strength === 0) return undefined\n\n    const containerDocument = container.current.ownerDocument\n    const scrollParent = getScrollParent(container.current)\n    const eventTarget =\n      containerDocument.documentElement === scrollParent\n        ? containerDocument.defaultView!\n        : scrollParent\n\n    lastScrollParentScrollTop.current = scrollParent.scrollTop\n    setContainerScrollTop(strength)\n\n    function handleScroll() {\n      containerDocument.defaultView!.requestAnimationFrame(() => {\n        if (!container.current) return\n\n        const { top: containerTop, bottom: containerBottom } =\n          container.current.getBoundingClientRect()\n        const { top: scrollParentTop, bottom: scrollParentBottom } =\n          scrollParent === containerDocument.documentElement\n            ? { top: 0, bottom: containerDocument.defaultView!.innerHeight }\n            : scrollParent.getBoundingClientRect()\n        const { scrollTop: scrollParentScrollTop } =\n          scrollParent === containerDocument.documentElement\n            ? { scrollTop: containerDocument.defaultView!.pageYOffset }\n            : scrollParent\n        const scrollParentHeight = scrollParentBottom - scrollParentTop\n        const scrollParentScrollDelta = scrollParentScrollTop - lastScrollParentScrollTop.current\n\n        lastScrollParentScrollTop.current = scrollParentScrollTop\n\n        setContainerScrollTop(scrollTop => {\n          const isContainerVisible =\n            containerTop < scrollParentTop + scrollParentHeight && containerBottom > scrollParentTop\n          const containerScrollRemaining =\n            scrollParentScrollDelta > 0 ? 2 * strength! - scrollTop : scrollTop\n          const scrollParentScrollRemaining =\n            scrollParentScrollDelta > 0\n              ? scrollParentTop + containerBottom\n              : scrollParentHeight - containerTop\n          const parallaxRatio = containerScrollRemaining / scrollParentScrollRemaining\n          const containerScrollDelta = isContainerVisible\n            ? parallaxRatio * scrollParentScrollDelta\n            : 0\n\n          return clamp(0, scrollTop + containerScrollDelta, strength! * 2)\n        })\n      })\n    }\n\n    eventTarget.addEventListener('scroll', handleScroll)\n\n    return () => eventTarget.removeEventListener('scroll', handleScroll)\n  }, [strength])\n\n  const getProps = useCallback(\n    ({ style, ...restOfChildrenProps }: any) => ({\n      ...restOfChildrenProps,\n      style: {\n        ...style,\n        position: 'absolute',\n        left: 0,\n        right: 0,\n        top: 0,\n        bottom: 0,\n        ...(strength == null || strength === 0\n          ? {}\n          : {\n              top: -strength,\n              bottom: -strength,\n              transform: `translate3d(0, ${containerScrollTop - strength}px, 0)`,\n            }),\n      },\n    }),\n    [strength, containerScrollTop],\n  )\n\n  return (\n    <div\n      {...rest}\n      ref={container}\n      style={{ position: 'absolute', top: 0, left: 0, right: 0, bottom: 0 }}\n    >\n      {children(getProps)}\n    </div>\n  )\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAgHI;AAhHJ,mBAAwE;AACxE,mBAAkB;AAClB,uCAA0C;AAE1C,SAAS,aAAa,SAAsB;AAC1C,QAAM,EAAE,UAAU,WAAW,UAAU,IACrC,QAAQ,cAAc,YAAa,iBAAiB,OAAO;AAE7D,SAAO,gBAAgB,KAAK,WAAW,YAAY,SAAS;AAC9D;AAEA,SAAS,gBAAgB,SAAmC;AAC1D,QAAM,EAAE,cAAc,IAAI;AAE1B,MAAI,CAAC,WAAW,CAAC;AAAe,WAAO;AAEvC,MAAI,aAAa,OAAO;AAAG,WAAO;AAElC,SAAO,gBAAgB,aAAa;AACtC;AASe,SAAR,SAA0B,EAAE,UAAU,UAAU,GAAG,KAAK,GAAuB;AACpF,QAAM,gBAAY,qBAAuB,IAAI;AAC7C,QAAM,CAAC,oBAAoB,qBAAqB,QAAI,uBAAS,YAAY,OAAO,IAAI,QAAQ;AAC5F,QAAM,gCAA4B,qBAAO,CAAC;AAE1C,kEAA0B,MAAM;AAC9B,QAAI,CAAC,UAAU,WAAW,YAAY,QAAQ,aAAa;AAAG,aAAO;AAErE,UAAM,oBAAoB,UAAU,QAAQ;AAC5C,UAAM,eAAe,gBAAgB,UAAU,OAAO;AACtD,UAAM,cACJ,kBAAkB,oBAAoB,eAClC,kBAAkB,cAClB;AAEN,8BAA0B,UAAU,aAAa;AACjD,0BAAsB,QAAQ;AAE9B,aAAS,eAAe;AACtB,wBAAkB,YAAa,sBAAsB,MAAM;AACzD,YAAI,CAAC,UAAU;AAAS;AAExB,cAAM,EAAE,KAAK,cAAc,QAAQ,gBAAgB,IACjD,UAAU,QAAQ,sBAAsB;AAC1C,cAAM,EAAE,KAAK,iBAAiB,QAAQ,mBAAmB,IACvD,iBAAiB,kBAAkB,kBAC/B,EAAE,KAAK,GAAG,QAAQ,kBAAkB,YAAa,YAAY,IAC7D,aAAa,sBAAsB;AACzC,cAAM,EAAE,WAAW,sBAAsB,IACvC,iBAAiB,kBAAkB,kBAC/B,EAAE,WAAW,kBAAkB,YAAa,YAAY,IACxD;AACN,cAAM,qBAAqB,qBAAqB;AAChD,cAAM,0BAA0B,wBAAwB,0BAA0B;AAElF,kCAA0B,UAAU;AAEpC,8BAAsB,eAAa;AACjC,gBAAM,qBACJ,eAAe,kBAAkB,sBAAsB,kBAAkB;AAC3E,gBAAM,2BACJ,0BAA0B,IAAI,IAAI,WAAY,YAAY;AAC5D,gBAAM,8BACJ,0BAA0B,IACtB,kBAAkB,kBAClB,qBAAqB;AAC3B,gBAAM,gBAAgB,2BAA2B;AACjD,gBAAM,uBAAuB,qBACzB,gBAAgB,0BAChB;AAEJ,qBAAO,aAAAA,SAAM,GAAG,YAAY,sBAAsB,WAAY,CAAC;AAAA,QACjE,CAAC;AAAA,MACH,CAAC;AAAA,IACH;AAEA,gBAAY,iBAAiB,UAAU,YAAY;AAEnD,WAAO,MAAM,YAAY,oBAAoB,UAAU,YAAY;AAAA,EACrE,GAAG,CAAC,QAAQ,CAAC;AAEb,QAAM,eAAW;AAAA,IACf,CAAC,EAAE,OAAO,GAAG,oBAAoB,OAAY;AAAA,MAC3C,GAAG;AAAA,MACH,OAAO;AAAA,QACL,GAAG;AAAA,QACH,UAAU;AAAA,QACV,MAAM;AAAA,QACN,OAAO;AAAA,QACP,KAAK;AAAA,QACL,QAAQ;AAAA,QACR,GAAI,YAAY,QAAQ,aAAa,IACjC,CAAC,IACD;AAAA,UACE,KAAK,CAAC;AAAA,UACN,QAAQ,CAAC;AAAA,UACT,WAAW,kBAAkB,qBAAqB,QAAQ;AAAA,QAC5D;AAAA,MACN;AAAA,IACF;AAAA,IACA,CAAC,UAAU,kBAAkB;AAAA,EAC/B;AAEA,SACE;AAAA,IAAC;AAAA;AAAA,MACE,GAAG;AAAA,MACJ,KAAK;AAAA,MACL,OAAO,EAAE,UAAU,YAAY,KAAK,GAAG,MAAM,GAAG,OAAO,GAAG,QAAQ,EAAE;AAAA,MAEnE,mBAAS,QAAQ;AAAA;AAAA,EACpB;AAEJ;","names":["clamp"]}
+{"version":3,"sources":["../../../../../../../src/components/shared/BackgroundsContainer/components/Parallax/index.tsx"],"sourcesContent":["import { useState, useRef, useCallback, ReactNode, CSSProperties } from 'react'\nimport clamp from '../../../../../utils/clamp'\nimport { useIsomorphicLayoutEffect } from '../../../../hooks/useIsomorphicLayoutEffect'\n\nfunction isScrollable(element: HTMLElement) {\n  const { overflow, overflowY, overflowX } =\n    element.ownerDocument.defaultView!.getComputedStyle(element)\n\n  return /(auto|scroll)/.test(overflow + overflowX + overflowY)\n}\n\nfunction getScrollParent(element: HTMLElement): HTMLElement {\n  const { parentElement } = element\n\n  if (!element || !parentElement) return element\n\n  if (isScrollable(element)) return element\n\n  return getScrollParent(parentElement)\n}\n\ntype Props = {\n  strength: number | null | undefined\n  children: (\n    getParallaxProps: <P extends { style?: CSSProperties; [key: string]: unknown }>(props: P) => P,\n  ) => ReactNode\n}\n\nexport default function Parallax({ strength, children, ...rest }: Props): ReactNode {\n  const container = useRef<HTMLDivElement>(null)\n  const [containerScrollTop, setContainerScrollTop] = useState(strength == null ? 0 : strength)\n  const lastScrollParentScrollTop = useRef(0)\n\n  useIsomorphicLayoutEffect(() => {\n    if (!container.current || strength == null || strength === 0) return undefined\n\n    const containerDocument = container.current.ownerDocument\n    const scrollParent = getScrollParent(container.current)\n    const eventTarget =\n      containerDocument.documentElement === scrollParent\n        ? containerDocument.defaultView!\n        : scrollParent\n\n    lastScrollParentScrollTop.current = scrollParent.scrollTop\n    setContainerScrollTop(strength)\n\n    function handleScroll() {\n      containerDocument.defaultView!.requestAnimationFrame(() => {\n        if (!container.current) return\n\n        const { top: containerTop, bottom: containerBottom } =\n          container.current.getBoundingClientRect()\n        const { top: scrollParentTop, bottom: scrollParentBottom } =\n          scrollParent === containerDocument.documentElement\n            ? { top: 0, bottom: containerDocument.defaultView!.innerHeight }\n            : scrollParent.getBoundingClientRect()\n        const { scrollTop: scrollParentScrollTop } =\n          scrollParent === containerDocument.documentElement\n            ? { scrollTop: containerDocument.defaultView!.pageYOffset }\n            : scrollParent\n        const scrollParentHeight = scrollParentBottom - scrollParentTop\n        const scrollParentScrollDelta = scrollParentScrollTop - lastScrollParentScrollTop.current\n\n        lastScrollParentScrollTop.current = scrollParentScrollTop\n\n        setContainerScrollTop(scrollTop => {\n          const isContainerVisible =\n            containerTop < scrollParentTop + scrollParentHeight && containerBottom > scrollParentTop\n          const containerScrollRemaining =\n            scrollParentScrollDelta > 0 ? 2 * strength! - scrollTop : scrollTop\n          const scrollParentScrollRemaining =\n            scrollParentScrollDelta > 0\n              ? scrollParentTop + containerBottom\n              : scrollParentHeight - containerTop\n          const parallaxRatio = containerScrollRemaining / scrollParentScrollRemaining\n          const containerScrollDelta = isContainerVisible\n            ? parallaxRatio * scrollParentScrollDelta\n            : 0\n\n          return clamp(0, scrollTop + containerScrollDelta, strength! * 2)\n        })\n      })\n    }\n\n    eventTarget.addEventListener('scroll', handleScroll)\n\n    return () => eventTarget.removeEventListener('scroll', handleScroll)\n  }, [strength])\n\n  const getProps = useCallback(\n    ({ style, ...restOfChildrenProps }: any) => ({\n      ...restOfChildrenProps,\n      style: {\n        ...style,\n        position: 'absolute',\n        left: 0,\n        right: 0,\n        top: 0,\n        bottom: 0,\n        ...(strength == null || strength === 0\n          ? {}\n          : {\n              top: -strength,\n              bottom: -strength,\n              transform: `translate3d(0, ${containerScrollTop - strength}px, 0)`,\n            }),\n      },\n    }),\n    [strength, containerScrollTop],\n  )\n\n  return (\n    <div\n      {...rest}\n      ref={container}\n      style={{ position: 'absolute', top: 0, left: 0, right: 0, bottom: 0 }}\n    >\n      {children(getProps)}\n    </div>\n  )\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAgHI;AAhHJ,mBAAwE;AACxE,mBAAkB;AAClB,uCAA0C;AAE1C,SAAS,aAAa,SAAsB;AAC1C,QAAM,EAAE,UAAU,WAAW,UAAU,IACrC,QAAQ,cAAc,YAAa,iBAAiB,OAAO;AAE7D,SAAO,gBAAgB,KAAK,WAAW,YAAY,SAAS;AAC9D;AAEA,SAAS,gBAAgB,SAAmC;AAC1D,QAAM,EAAE,cAAc,IAAI;AAE1B,MAAI,CAAC,WAAW,CAAC;AAAe,WAAO;AAEvC,MAAI,aAAa,OAAO;AAAG,WAAO;AAElC,SAAO,gBAAgB,aAAa;AACtC;AASe,SAAR,SAA0B,EAAE,UAAU,UAAU,GAAG,KAAK,GAAqB;AAClF,QAAM,gBAAY,qBAAuB,IAAI;AAC7C,QAAM,CAAC,oBAAoB,qBAAqB,QAAI,uBAAS,YAAY,OAAO,IAAI,QAAQ;AAC5F,QAAM,gCAA4B,qBAAO,CAAC;AAE1C,kEAA0B,MAAM;AAC9B,QAAI,CAAC,UAAU,WAAW,YAAY,QAAQ,aAAa;AAAG,aAAO;AAErE,UAAM,oBAAoB,UAAU,QAAQ;AAC5C,UAAM,eAAe,gBAAgB,UAAU,OAAO;AACtD,UAAM,cACJ,kBAAkB,oBAAoB,eAClC,kBAAkB,cAClB;AAEN,8BAA0B,UAAU,aAAa;AACjD,0BAAsB,QAAQ;AAE9B,aAAS,eAAe;AACtB,wBAAkB,YAAa,sBAAsB,MAAM;AACzD,YAAI,CAAC,UAAU;AAAS;AAExB,cAAM,EAAE,KAAK,cAAc,QAAQ,gBAAgB,IACjD,UAAU,QAAQ,sBAAsB;AAC1C,cAAM,EAAE,KAAK,iBAAiB,QAAQ,mBAAmB,IACvD,iBAAiB,kBAAkB,kBAC/B,EAAE,KAAK,GAAG,QAAQ,kBAAkB,YAAa,YAAY,IAC7D,aAAa,sBAAsB;AACzC,cAAM,EAAE,WAAW,sBAAsB,IACvC,iBAAiB,kBAAkB,kBAC/B,EAAE,WAAW,kBAAkB,YAAa,YAAY,IACxD;AACN,cAAM,qBAAqB,qBAAqB;AAChD,cAAM,0BAA0B,wBAAwB,0BAA0B;AAElF,kCAA0B,UAAU;AAEpC,8BAAsB,eAAa;AACjC,gBAAM,qBACJ,eAAe,kBAAkB,sBAAsB,kBAAkB;AAC3E,gBAAM,2BACJ,0BAA0B,IAAI,IAAI,WAAY,YAAY;AAC5D,gBAAM,8BACJ,0BAA0B,IACtB,kBAAkB,kBAClB,qBAAqB;AAC3B,gBAAM,gBAAgB,2BAA2B;AACjD,gBAAM,uBAAuB,qBACzB,gBAAgB,0BAChB;AAEJ,qBAAO,aAAAA,SAAM,GAAG,YAAY,sBAAsB,WAAY,CAAC;AAAA,QACjE,CAAC;AAAA,MACH,CAAC;AAAA,IACH;AAEA,gBAAY,iBAAiB,UAAU,YAAY;AAEnD,WAAO,MAAM,YAAY,oBAAoB,UAAU,YAAY;AAAA,EACrE,GAAG,CAAC,QAAQ,CAAC;AAEb,QAAM,eAAW;AAAA,IACf,CAAC,EAAE,OAAO,GAAG,oBAAoB,OAAY;AAAA,MAC3C,GAAG;AAAA,MACH,OAAO;AAAA,QACL,GAAG;AAAA,QACH,UAAU;AAAA,QACV,MAAM;AAAA,QACN,OAAO;AAAA,QACP,KAAK;AAAA,QACL,QAAQ;AAAA,QACR,GAAI,YAAY,QAAQ,aAAa,IACjC,CAAC,IACD;AAAA,UACE,KAAK,CAAC;AAAA,UACN,QAAQ,CAAC;AAAA,UACT,WAAW,kBAAkB,qBAAqB,QAAQ;AAAA,QAC5D;AAAA,MACN;AAAA,IACF;AAAA,IACA,CAAC,UAAU,kBAAkB;AAAA,EAC/B;AAEA,SACE;AAAA,IAAC;AAAA;AAAA,MACE,GAAG;AAAA,MACJ,KAAK;AAAA,MACL,OAAO,EAAE,UAAU,YAAY,KAAK,GAAG,MAAM,GAAG,OAAO,GAAG,QAAQ,EAAE;AAAA,MAEnE,mBAAS,QAAQ;AAAA;AAAA,EACpB;AAEJ;","names":["clamp"]}

package/dist/cjs/controls/rich-text-v2/plugin.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../../src/controls/rich-text-v2/plugin.ts"],"sourcesContent":["import { type KeyboardEvent } from 'react'\nimport { type Editor } from 'slate'\nimport { type RenderElementProps, type RenderLeafProps } from 'slate-react'\nimport { ControlDefinition, type Data, type RichTextPluginControl } from '@makeswift/controls'\n\nexport type RenderElement = (props: RenderElementProps) => JSX.Element\nexport type RenderLeaf = (props: RenderLeafProps) => JSX.Element\n\nexport type RichTextV2Plugin<C extends RichTextPluginControl = RichTextPluginControl> = {\n  control?: C\n  withPlugin?(editor: Editor): Editor\n  onKeyDown?(event: KeyboardEvent, editor: Editor): void\n  renderElement?: (\n    renderElement: RenderElement,\n    value: any,\n  ) => (props: RenderElementProps) => JSX.Element\n  renderLeaf?: (renderLeaf: RenderLeaf, value: any) => (props: RenderLeafProps) => JSX.Element\n}\n\nexport function Plugin<Def extends ControlDefinition, ValueType extends Data>({\n  control,\n  withPlugin,\n  onKeyDown,\n  renderElement,\n  renderLeaf,\n}: RichTextV2Plugin<RichTextPluginControl<Def, ValueType>>) {\n  return { control, withPlugin, onKeyDown, renderElement, renderLeaf }\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAmBO,SAAS,OAA8D;AAAA,EAC5E;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF,GAA4D;AAC1D,SAAO,EAAE,SAAS,YAAY,WAAW,eAAe,WAAW;AACrE;","names":[]}
+{"version":3,"sources":["../../../../src/controls/rich-text-v2/plugin.ts"],"sourcesContent":["import { type KeyboardEvent, ReactNode } from 'react'\nimport { type Editor } from 'slate'\nimport { type RenderElementProps, type RenderLeafProps } from 'slate-react'\nimport { ControlDefinition, type Data, type RichTextPluginControl } from '@makeswift/controls'\n\nexport type RenderElement = (props: RenderElementProps) => ReactNode\nexport type RenderLeaf = (props: RenderLeafProps) => ReactNode\n\nexport type RichTextV2Plugin<C extends RichTextPluginControl = RichTextPluginControl> = {\n  control?: C\n  withPlugin?(editor: Editor): Editor\n  onKeyDown?(event: KeyboardEvent, editor: Editor): void\n  renderElement?: (\n    renderElement: RenderElement,\n    value: any,\n  ) => (props: RenderElementProps) => ReactNode\n  renderLeaf?: (renderLeaf: RenderLeaf, value: any) => (props: RenderLeafProps) => ReactNode\n}\n\nexport function Plugin<Def extends ControlDefinition, ValueType extends Data>({\n  control,\n  withPlugin,\n  onKeyDown,\n  renderElement,\n  renderLeaf,\n}: RichTextV2Plugin<RichTextPluginControl<Def, ValueType>>) {\n  return { control, withPlugin, onKeyDown, renderElement, renderLeaf }\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAmBO,SAAS,OAA8D;AAAA,EAC5E;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF,GAA4D;AAC1D,SAAO,EAAE,SAAS,YAAY,WAAW,eAAe,WAAW;AACrE;","names":[]}

package/dist/cjs/next/components/framework-provider/pages-router/HeadSnippet.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../../../../src/next/components/framework-provider/pages-router/HeadSnippet.tsx"],"sourcesContent":["import { type ReactElement, useEffect, isValidElement } from 'react'\n\nimport Head from 'next/head'\nimport Script from 'next/script'\n\nimport { type Snippet } from '../../../../client'\n\nimport {\n  snippetToElements,\n  getSnippetElementsFromDOM,\n  cleanUpSnippet,\n} from '../../../../runtimes/react/components/page/HeadSnippet'\n\nconst isScriptElement = (element: string | JSX.Element): element is ReactElement<any, 'script'> =>\n  isValidElement(element) && element.type === 'script'\n\nexport function HeadSnippet({ snippet }: { snippet: Snippet }) {\n  useEffect(() => {\n    return () => {\n      const snippetElements = getSnippetElementsFromDOM(snippet)\n      if (snippetElements.length > 0) return\n      cleanUpSnippet(snippet)\n    }\n  }, [snippet])\n\n  const headSnippetElements = snippetToElements(snippet)\n\n  return (\n    <>\n      {headSnippetElements.map((element, i) =>\n        isScriptElement(element) ? (\n          <Script key={element.key} {...element.props} strategy=\"beforeInteractive\" />\n        ) : (\n          <Head key={isValidElement(element) ? element.key : i}>{element}</Head>\n        ),\n      )}\n    </>\n  )\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AA4BI;AA5BJ,mBAA6D;AAE7D,kBAAiB;AACjB,oBAAmB;AAInB,yBAIO;AAEP,MAAM,kBAAkB,CAAC,gBACvB,6BAAe,OAAO,KAAK,QAAQ,SAAS;AAEvC,SAAS,YAAY,EAAE,QAAQ,GAAyB;AAC7D,8BAAU,MAAM;AACd,WAAO,MAAM;AACX,YAAM,sBAAkB,8CAA0B,OAAO;AACzD,UAAI,gBAAgB,SAAS;AAAG;AAChC,6CAAe,OAAO;AAAA,IACxB;AAAA,EACF,GAAG,CAAC,OAAO,CAAC;AAEZ,QAAM,0BAAsB,sCAAkB,OAAO;AAErD,SACE,2EACG,8BAAoB;AAAA,IAAI,CAAC,SAAS,MACjC,gBAAgB,OAAO,IACrB,4CAAC,cAAAA,SAAA,EAA0B,GAAG,QAAQ,OAAO,UAAS,uBAAzC,QAAQ,GAAqD,IAE1E,4CAAC,YAAAC,SAAA,EAAsD,yBAA5C,6BAAe,OAAO,IAAI,QAAQ,MAAM,CAAY;AAAA,EAEnE,GACF;AAEJ;","names":["Script","Head"]}
+{"version":3,"sources":["../../../../../../src/next/components/framework-provider/pages-router/HeadSnippet.tsx"],"sourcesContent":["import { type ReactElement, useEffect, isValidElement, ReactNode } from 'react'\n\nimport Head from 'next/head'\nimport Script from 'next/script'\n\nimport { type Snippet } from '../../../../client'\n\nimport {\n  snippetToElements,\n  getSnippetElementsFromDOM,\n  cleanUpSnippet,\n} from '../../../../runtimes/react/components/page/HeadSnippet'\n\nconst isScriptElement = (element: string | ReactNode): element is ReactElement<any, 'script'> =>\n  isValidElement(element) && element.type === 'script'\n\nexport function HeadSnippet({ snippet }: { snippet: Snippet }) {\n  useEffect(() => {\n    return () => {\n      const snippetElements = getSnippetElementsFromDOM(snippet)\n      if (snippetElements.length > 0) return\n      cleanUpSnippet(snippet)\n    }\n  }, [snippet])\n\n  const headSnippetElements = snippetToElements(snippet)\n\n  return (\n    <>\n      {headSnippetElements.map((element, i) =>\n        isScriptElement(element) ? (\n          <Script key={element.key} {...element.props} strategy=\"beforeInteractive\" />\n        ) : (\n          <Head key={isValidElement(element) ? element.key : i}>{element}</Head>\n        ),\n      )}\n    </>\n  )\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AA4BI;AA5BJ,mBAAwE;AAExE,kBAAiB;AACjB,oBAAmB;AAInB,yBAIO;AAEP,MAAM,kBAAkB,CAAC,gBACvB,6BAAe,OAAO,KAAK,QAAQ,SAAS;AAEvC,SAAS,YAAY,EAAE,QAAQ,GAAyB;AAC7D,8BAAU,MAAM;AACd,WAAO,MAAM;AACX,YAAM,sBAAkB,8CAA0B,OAAO;AACzD,UAAI,gBAAgB,SAAS;AAAG;AAChC,6CAAe,OAAO;AAAA,IACxB;AAAA,EACF,GAAG,CAAC,OAAO,CAAC;AAEZ,QAAM,0BAAsB,sCAAkB,OAAO;AAErD,SACE,2EACG,8BAAoB;AAAA,IAAI,CAAC,SAAS,MACjC,gBAAgB,OAAO,IACrB,4CAAC,cAAAA,SAAA,EAA0B,GAAG,QAAQ,OAAO,UAAS,uBAAzC,QAAQ,GAAqD,IAE1E,4CAAC,YAAAC,SAAA,EAAsD,yBAA5C,6BAAe,OAAO,IAAI,QAAQ,MAAM,CAAY;AAAA,EAEnE,GACF;AAEJ;","names":["Script","Head"]}

package/dist/cjs/next/components/tests/controls/page-control-prop-rendering.js

@@ -35,7 +35,6 @@ var import_jsx_runtime = require("react/jsx-runtime");
 var import_react = require("react");
 var import_server = require("react-dom/server");
 var import_jsdom = require("jsdom");
-var import_test_utils = require("react-dom/test-utils");
 var import_react2 = require("@testing-library/react");
 var import_jest_dom = require("@testing-library/jest-dom");
 var import_navigation = require("next/navigation");
@@ -127,9 +126,9 @@ async function testPageControlPropRendering(controlDefinition, {
       ROOT_ID
     );
     const snapshot = Testing.createMakeswiftPageSnapshot(rootElementData, { locale, cacheData });
-    await (0, import_test_utils.act)(async () => (0, import_react2.render)(testElementTree(/* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_page.Page, { snapshot }))));
+    await (0, import_react.act)(async () => (0, import_react2.render)(testElementTree(/* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_page.Page, { snapshot }))));
     if (action) {
-      await (0, import_test_utils.act)(async () => {
+      await (0, import_react.act)(async () => {
         await action(import_react2.screen.getByTestId(testId));
       });
     }

package/dist/cjs/next/components/tests/controls/page-control-prop-rendering.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../../../../src/next/components/tests/controls/page-control-prop-rendering.tsx"],"sourcesContent":["import { type ReactNode, Fragment, forwardRef, useRef, isValidElement } from 'react'\nimport { renderToReadableStream } from 'react-dom/server'\nimport { JSDOM } from 'jsdom'\nimport { act } from 'react-dom/test-utils'\nimport { render, screen } from '@testing-library/react'\nimport '@testing-library/jest-dom'\nimport { ServerInsertedHTMLContext } from 'next/navigation'\n\nimport { type Data, type ValueType, type DataType, ControlDefinition } from '@makeswift/controls'\n\nimport { type CacheData } from '../../../../api/react'\nimport { ElementData } from '../../../../state/react-page'\nimport { ReactRuntime } from '../../../../react'\nimport { MakeswiftComponent } from '../../../../runtimes/react/components/MakeswiftComponent'\nimport { Page } from '../../page'\nimport { isServer } from '../../../../utils/is-server'\nimport * as Testing from '../../../testing'\n\nconst ROOT_ID = '00000000-0000-0000-0000-000000000000'\nconst ELEMENT_ID = '11111111-1111-1111-1111-111111111111'\n\nconst renderProp = (prop: any) =>\n  prop === undefined ? 'undefined' : isValidElement(prop) ? prop : JSON.stringify(prop)\n\nconst propSnapshot = (prop: HTMLElement | null) =>\n  prop?.childElementCount ? prop.childNodes : parseStringifiedProp(prop?.textContent ?? '')\n\nconst parseStringifiedProp = (prop: string) => (prop === 'undefined' ? undefined : JSON.parse(prop))\n\nasync function streamToString(stream: ReadableStream) {\n  const reader = stream.getReader()\n  const decoder = new TextDecoder()\n\n  let result = ''\n\n  while (true) {\n    const { done, value } = await reader.read()\n    if (done) break\n    result += decoder.decode(value, { stream: true })\n  }\n\n  return result\n}\n\nasync function renderToString(element: ReactNode) {\n  return await streamToString(await renderToReadableStream(element))\n}\n\nasync function serverSideRender(children: ReactNode) {\n  // wrap the children in a context provider to capture server-inserted HTML, see\n  // https://github.com/vercel/next.js/blob/canary/packages/next/src/server/app-render/server-inserted-html.tsx\n  const serverInsertedCallbacks: (() => React.ReactNode)[] = []\n\n  const elementTree = (\n    <ServerInsertedHTMLContext.Provider value={handler => serverInsertedCallbacks.push(handler)}>\n      {children}\n    </ServerInsertedHTMLContext.Provider>\n  )\n\n  const elementsHTML = await renderToString(elementTree)\n\n  const serverInsertedNodes = serverInsertedCallbacks.map((callback, index) => (\n    <Fragment key={'__next_server_inserted__' + index}>{callback()}</Fragment>\n  ))\n\n  const headHTML = await renderToString(serverInsertedNodes)\n\n  const dom = new JSDOM(\n    `<!DOCTYPE html><head>${headHTML}</head><body><div id=\"root\">${elementsHTML}</div></body></div>`,\n    {\n      runScripts: 'dangerously',\n    },\n  )\n\n  return dom.window.document\n}\n\nexport async function testPageControlPropRendering<D extends ControlDefinition>(\n  controlDefinition: D,\n  {\n    toData,\n    value,\n    locale,\n    cacheData,\n    expectedRenders,\n    registerComponents,\n    action,\n    rootElements = [],\n  }: {\n    toData?: (value: ValueType<D>) => DataType<D>\n    value: ValueType<D> | undefined\n    locale?: string | null\n    cacheData?: Partial<CacheData>\n    expectedRenders?: number\n    registerComponents?: (runtime: ReactRuntime) => void\n    action?: (element: HTMLElement) => Promise<void>\n    rootElements?: ElementData[]\n  },\n) {\n  // Arrange\n  const controlData: DataType<D> | Data =\n    value !== undefined ? (toData ? toData(value) : controlDefinition.toData(value)) : undefined\n\n  const testComponentMeta = {\n    type: 'TestComponent',\n    label: 'Test Component',\n  }\n\n  const testId = 'test-id'\n  const renderCountTestId = 'render-count-test-id'\n  const elementData: ElementData = {\n    key: ELEMENT_ID,\n    type: testComponentMeta.type,\n    props: {\n      propKey: controlData,\n    },\n  }\n\n  const runtime = new ReactRuntime()\n  registerComponents?.(runtime)\n\n  // Act\n  runtime.registerComponent(\n    forwardRef<HTMLDivElement, { propKey?: any }>(({ propKey }, ref) => {\n      const renderCount = useRef(0)\n      ++renderCount.current\n\n      return (\n        <div ref={ref}>\n          <div data-testid={renderCountTestId}>{renderCount.current}</div>\n          <div data-testid={testId}>{renderProp(propKey)}</div>\n        </div>\n      )\n    }),\n    {\n      ...testComponentMeta,\n      props: {\n        propKey: controlDefinition as any,\n      },\n    },\n  )\n\n  const testElementTree = (component: ReactNode) => (\n    <Testing.ReactProvider runtime={runtime}>{component}</Testing.ReactProvider>\n  )\n\n  if (!isServer()) {\n    const rootElementData: ElementData = Testing.createRootComponent(\n      [elementData, ...rootElements],\n      ROOT_ID,\n    )\n\n    const snapshot = Testing.createMakeswiftPageSnapshot(rootElementData, { locale, cacheData })\n\n    // Assert\n    await act(async () => render(testElementTree(<Page snapshot={snapshot} />)))\n\n    if (action) {\n      await act(async () => {\n        await action(screen.getByTestId(testId))\n      })\n    }\n\n    expect(snapshot).toMatchSnapshot('snapshot')\n    expect(propSnapshot(screen.getByTestId(testId))).toMatchSnapshot('resolvedValue')\n\n    if (expectedRenders != null) {\n      expect(Number(screen.getByTestId(renderCountTestId).textContent)).toBe(expectedRenders)\n    }\n  } else {\n    // test server-side rendering using a component snapshot\n    console.assert(action == null)\n    console.assert(rootElements.length === 0)\n\n    const snapshot = Testing.createMakeswiftComponentSnapshot(elementData, { locale, cacheData })\n    const elementTree = testElementTree(\n      <MakeswiftComponent snapshot={snapshot} {...testComponentMeta} />,\n    )\n\n    const document = await serverSideRender(elementTree)\n    const getByTestId = (id: string): HTMLElement | null =>\n      document.querySelector(`[data-testid=\"${id}\"]`)\n\n    expect(propSnapshot(getByTestId(testId))).toMatchSnapshot('resolvedValue')\n    expect([...document.querySelectorAll('style')].map(n => n.textContent)).toMatchSnapshot(\n      'component styles',\n    )\n    expect(Number(getByTestId(renderCountTestId)?.textContent)).toBe(1)\n  }\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAsDI;AAtDJ,mBAA6E;AAC7E,oBAAuC;AACvC,mBAAsB;AACtB,wBAAoB;AACpB,IAAAA,gBAA+B;AAC/B,sBAAO;AACP,wBAA0C;AAM1C,IAAAA,gBAA6B;AAC7B,gCAAmC;AACnC,kBAAqB;AACrB,uBAAyB;AACzB,cAAyB;AAEzB,MAAM,UAAU;AAChB,MAAM,aAAa;AAEnB,MAAM,aAAa,CAAC,SAClB,SAAS,SAAY,kBAAc,6BAAe,IAAI,IAAI,OAAO,KAAK,UAAU,IAAI;AAEtF,MAAM,eAAe,CAAC,SACpB,MAAM,oBAAoB,KAAK,aAAa,qBAAqB,MAAM,eAAe,EAAE;AAE1F,MAAM,uBAAuB,CAAC,SAAkB,SAAS,cAAc,SAAY,KAAK,MAAM,IAAI;AAElG,eAAe,eAAe,QAAwB;AACpD,QAAM,SAAS,OAAO,UAAU;AAChC,QAAM,UAAU,IAAI,YAAY;AAEhC,MAAI,SAAS;AAEb,SAAO,MAAM;AACX,UAAM,EAAE,MAAM,MAAM,IAAI,MAAM,OAAO,KAAK;AAC1C,QAAI;AAAM;AACV,cAAU,QAAQ,OAAO,OAAO,EAAE,QAAQ,KAAK,CAAC;AAAA,EAClD;AAEA,SAAO;AACT;AAEA,eAAe,eAAe,SAAoB;AAChD,SAAO,MAAM,eAAe,UAAM,sCAAuB,OAAO,CAAC;AACnE;AAEA,eAAe,iBAAiB,UAAqB;AAGnD,QAAM,0BAAqD,CAAC;AAE5D,QAAM,cACJ,4CAAC,4CAA0B,UAA1B,EAAmC,OAAO,aAAW,wBAAwB,KAAK,OAAO,GACvF,UACH;AAGF,QAAM,eAAe,MAAM,eAAe,WAAW;AAErD,QAAM,sBAAsB,wBAAwB,IAAI,CAAC,UAAU,UACjE,4CAAC,yBAAmD,mBAAS,KAA9C,6BAA6B,KAAmB,CAChE;AAED,QAAM,WAAW,MAAM,eAAe,mBAAmB;AAEzD,QAAM,MAAM,IAAI;AAAA,IACd,wBAAwB,QAAQ,+BAA+B,YAAY;AAAA,IAC3E;AAAA,MACE,YAAY;AAAA,IACd;AAAA,EACF;AAEA,SAAO,IAAI,OAAO;AACpB;AAEA,eAAsB,6BACpB,mBACA;AAAA,EACE;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA,eAAe,CAAC;AAClB,GAUA;AAEA,QAAM,cACJ,UAAU,SAAa,SAAS,OAAO,KAAK,IAAI,kBAAkB,OAAO,KAAK,IAAK;AAErF,QAAM,oBAAoB;AAAA,IACxB,MAAM;AAAA,IACN,OAAO;AAAA,EACT;AAEA,QAAM,SAAS;AACf,QAAM,oBAAoB;AAC1B,QAAM,cAA2B;AAAA,IAC/B,KAAK;AAAA,IACL,MAAM,kBAAkB;AAAA,IACxB,OAAO;AAAA,MACL,SAAS;AAAA,IACX;AAAA,EACF;AAEA,QAAM,UAAU,IAAI,2BAAa;AACjC,uBAAqB,OAAO;AAG5B,UAAQ;AAAA,QACN,yBAA8C,CAAC,EAAE,QAAQ,GAAG,QAAQ;AAClE,YAAM,kBAAc,qBAAO,CAAC;AAC5B,QAAE,YAAY;AAEd,aACE,6CAAC,SAAI,KACH;AAAA,oDAAC,SAAI,eAAa,mBAAoB,sBAAY,SAAQ;AAAA,QAC1D,4CAAC,SAAI,eAAa,QAAS,qBAAW,OAAO,GAAE;AAAA,SACjD;AAAA,IAEJ,CAAC;AAAA,IACD;AAAA,MACE,GAAG;AAAA,MACH,OAAO;AAAA,QACL,SAAS;AAAA,MACX;AAAA,IACF;AAAA,EACF;AAEA,QAAM,kBAAkB,CAAC,cACvB,4CAAC,QAAQ,eAAR,EAAsB,SAAmB,qBAAU;AAGtD,MAAI,KAAC,2BAAS,GAAG;AACf,UAAM,kBAA+B,QAAQ;AAAA,MAC3C,CAAC,aAAa,GAAG,YAAY;AAAA,MAC7B;AAAA,IACF;AAEA,UAAM,WAAW,QAAQ,4BAA4B,iBAAiB,EAAE,QAAQ,UAAU,CAAC;AAG3F,cAAM,uBAAI,gBAAY,sBAAO,gBAAgB,4CAAC,oBAAK,UAAoB,CAAE,CAAC,CAAC;AAE3E,QAAI,QAAQ;AACV,gBAAM,uBAAI,YAAY;AACpB,cAAM,OAAO,qBAAO,YAAY,MAAM,CAAC;AAAA,MACzC,CAAC;AAAA,IACH;AAEA,WAAO,QAAQ,EAAE,gBAAgB,UAAU;AAC3C,WAAO,aAAa,qBAAO,YAAY,MAAM,CAAC,CAAC,EAAE,gBAAgB,eAAe;AAEhF,QAAI,mBAAmB,MAAM;AAC3B,aAAO,OAAO,qBAAO,YAAY,iBAAiB,EAAE,WAAW,CAAC,EAAE,KAAK,eAAe;AAAA,IACxF;AAAA,EACF,OAAO;AAEL,YAAQ,OAAO,UAAU,IAAI;AAC7B,YAAQ,OAAO,aAAa,WAAW,CAAC;AAExC,UAAM,WAAW,QAAQ,iCAAiC,aAAa,EAAE,QAAQ,UAAU,CAAC;AAC5F,UAAM,cAAc;AAAA,MAClB,4CAAC,gDAAmB,UAAqB,GAAG,mBAAmB;AAAA,IACjE;AAEA,UAAM,WAAW,MAAM,iBAAiB,WAAW;AACnD,UAAM,cAAc,CAAC,OACnB,SAAS,cAAc,iBAAiB,EAAE,IAAI;AAEhD,WAAO,aAAa,YAAY,MAAM,CAAC,CAAC,EAAE,gBAAgB,eAAe;AACzE,WAAO,CAAC,GAAG,SAAS,iBAAiB,OAAO,CAAC,EAAE,IAAI,OAAK,EAAE,WAAW,CAAC,EAAE;AAAA,MACtE;AAAA,IACF;AACA,WAAO,OAAO,YAAY,iBAAiB,GAAG,WAAW,CAAC,EAAE,KAAK,CAAC;AAAA,EACpE;AACF;","names":["import_react"]}
+{"version":3,"sources":["../../../../../../src/next/components/tests/controls/page-control-prop-rendering.tsx"],"sourcesContent":["import { type ReactNode, Fragment, forwardRef, useRef, isValidElement, act } from 'react';\nimport { renderToReadableStream } from 'react-dom/server'\nimport { JSDOM } from 'jsdom'\nimport { render, screen } from '@testing-library/react'\nimport '@testing-library/jest-dom'\nimport { ServerInsertedHTMLContext } from 'next/navigation'\n\nimport { type Data, type ValueType, type DataType, ControlDefinition } from '@makeswift/controls'\n\nimport { type CacheData } from '../../../../api/react'\nimport { ElementData } from '../../../../state/react-page'\nimport { ReactRuntime } from '../../../../react'\nimport { MakeswiftComponent } from '../../../../runtimes/react/components/MakeswiftComponent'\nimport { Page } from '../../page'\nimport { isServer } from '../../../../utils/is-server'\nimport * as Testing from '../../../testing'\n\nconst ROOT_ID = '00000000-0000-0000-0000-000000000000'\nconst ELEMENT_ID = '11111111-1111-1111-1111-111111111111'\n\nconst renderProp = (prop: any) =>\n  prop === undefined ? 'undefined' : isValidElement(prop) ? prop : JSON.stringify(prop)\n\nconst propSnapshot = (prop: HTMLElement | null) =>\n  prop?.childElementCount ? prop.childNodes : parseStringifiedProp(prop?.textContent ?? '')\n\nconst parseStringifiedProp = (prop: string) => (prop === 'undefined' ? undefined : JSON.parse(prop))\n\nasync function streamToString(stream: ReadableStream) {\n  const reader = stream.getReader()\n  const decoder = new TextDecoder()\n\n  let result = ''\n\n  while (true) {\n    const { done, value } = await reader.read()\n    if (done) break\n    result += decoder.decode(value, { stream: true })\n  }\n\n  return result\n}\n\nasync function renderToString(element: ReactNode) {\n  return await streamToString(await renderToReadableStream(element))\n}\n\nasync function serverSideRender(children: ReactNode) {\n  // wrap the children in a context provider to capture server-inserted HTML, see\n  // https://github.com/vercel/next.js/blob/canary/packages/next/src/server/app-render/server-inserted-html.tsx\n  const serverInsertedCallbacks: (() => React.ReactNode)[] = []\n\n  const elementTree = (\n    <ServerInsertedHTMLContext.Provider value={handler => serverInsertedCallbacks.push(handler)}>\n      {children}\n    </ServerInsertedHTMLContext.Provider>\n  )\n\n  const elementsHTML = await renderToString(elementTree)\n\n  const serverInsertedNodes = serverInsertedCallbacks.map((callback, index) => (\n    <Fragment key={'__next_server_inserted__' + index}>{callback()}</Fragment>\n  ))\n\n  const headHTML = await renderToString(serverInsertedNodes)\n\n  const dom = new JSDOM(\n    `<!DOCTYPE html><head>${headHTML}</head><body><div id=\"root\">${elementsHTML}</div></body></div>`,\n    {\n      runScripts: 'dangerously',\n    },\n  )\n\n  return dom.window.document\n}\n\nexport async function testPageControlPropRendering<D extends ControlDefinition>(\n  controlDefinition: D,\n  {\n    toData,\n    value,\n    locale,\n    cacheData,\n    expectedRenders,\n    registerComponents,\n    action,\n    rootElements = [],\n  }: {\n    toData?: (value: ValueType<D>) => DataType<D>\n    value: ValueType<D> | undefined\n    locale?: string | null\n    cacheData?: Partial<CacheData>\n    expectedRenders?: number\n    registerComponents?: (runtime: ReactRuntime) => void\n    action?: (element: HTMLElement) => Promise<void>\n    rootElements?: ElementData[]\n  },\n) {\n  // Arrange\n  const controlData: DataType<D> | Data =\n    value !== undefined ? (toData ? toData(value) : controlDefinition.toData(value)) : undefined\n\n  const testComponentMeta = {\n    type: 'TestComponent',\n    label: 'Test Component',\n  }\n\n  const testId = 'test-id'\n  const renderCountTestId = 'render-count-test-id'\n  const elementData: ElementData = {\n    key: ELEMENT_ID,\n    type: testComponentMeta.type,\n    props: {\n      propKey: controlData,\n    },\n  }\n\n  const runtime = new ReactRuntime()\n  registerComponents?.(runtime)\n\n  // Act\n  runtime.registerComponent(\n    forwardRef<HTMLDivElement, { propKey?: any }>(({ propKey }, ref) => {\n      const renderCount = useRef(0)\n      ++renderCount.current\n\n      return (\n        <div ref={ref}>\n          <div data-testid={renderCountTestId}>{renderCount.current}</div>\n          <div data-testid={testId}>{renderProp(propKey)}</div>\n        </div>\n      )\n    }),\n    {\n      ...testComponentMeta,\n      props: {\n        propKey: controlDefinition as any,\n      },\n    },\n  )\n\n  const testElementTree = (component: ReactNode) => (\n    <Testing.ReactProvider runtime={runtime}>{component}</Testing.ReactProvider>\n  )\n\n  if (!isServer()) {\n    const rootElementData: ElementData = Testing.createRootComponent(\n      [elementData, ...rootElements],\n      ROOT_ID,\n    )\n\n    const snapshot = Testing.createMakeswiftPageSnapshot(rootElementData, { locale, cacheData })\n\n    // Assert\n    await act(async () => render(testElementTree(<Page snapshot={snapshot} />)))\n\n    if (action) {\n      await act(async () => {\n        await action(screen.getByTestId(testId))\n      })\n    }\n\n    expect(snapshot).toMatchSnapshot('snapshot')\n    expect(propSnapshot(screen.getByTestId(testId))).toMatchSnapshot('resolvedValue')\n\n    if (expectedRenders != null) {\n      expect(Number(screen.getByTestId(renderCountTestId).textContent)).toBe(expectedRenders)\n    }\n  } else {\n    // test server-side rendering using a component snapshot\n    console.assert(action == null)\n    console.assert(rootElements.length === 0)\n\n    const snapshot = Testing.createMakeswiftComponentSnapshot(elementData, { locale, cacheData })\n    const elementTree = testElementTree(\n      <MakeswiftComponent snapshot={snapshot} {...testComponentMeta} />,\n    )\n\n    const document = await serverSideRender(elementTree)\n    const getByTestId = (id: string): HTMLElement | null =>\n      document.querySelector(`[data-testid=\"${id}\"]`)\n\n    expect(propSnapshot(getByTestId(testId))).toMatchSnapshot('resolvedValue')\n    expect([...document.querySelectorAll('style')].map(n => n.textContent)).toMatchSnapshot(\n      'component styles',\n    )\n    expect(Number(getByTestId(renderCountTestId)?.textContent)).toBe(1)\n  }\n}\n"],"mappings":"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","names":["import_react"]}

package/dist/cjs/next/components/tests/makeswift-component/fixtures.js

@@ -0,0 +1,102 @@
+"use strict";
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getProtoOf = Object.getPrototypeOf;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
+  // If the importer is in node compatibility mode or this is not an ESM
+  // file that has been converted to a CommonJS file using a Babel-
+  // compatible transform (i.e. "__esModule" has not been set), then set
+  // "default" to the CommonJS "module.exports" for node compatibility.
+  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
+  mod
+));
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+var fixtures_exports = {};
+__export(fixtures_exports, {
+  CustomComponent: () => CustomComponent,
+  CustomComponentType: () => CustomComponentType,
+  CustomComponentWithFallback: () => CustomComponentWithFallback,
+  componentId: () => componentId,
+  containerId: () => containerId,
+  elementData: () => elementData,
+  fallbackId: () => fallbackId,
+  renderComponentSnapshot: () => renderComponentSnapshot
+});
+module.exports = __toCommonJS(fixtures_exports);
+var import_jsx_runtime = require("react/jsx-runtime");
+var import_react = require("react");
+var import_react2 = require("@testing-library/react");
+var import_react3 = require("../../../../react");
+var Testing = __toESM(require("../../../testing"));
+var import_MakeswiftComponent = require("../../../../runtimes/react/components/MakeswiftComponent");
+var import_controls = require("@makeswift/controls");
+const CustomComponentType = "CustomComponent";
+const componentId = "component-id";
+const containerId = "container-id";
+const fallbackId = "fallback-id";
+function CustomComponent({ text, suspend }) {
+  if (suspend) {
+    throw new Promise(() => {
+    });
+  }
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { "data-testid": componentId, children: text });
+}
+function CustomComponentWithFallback(props) {
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_react.Suspense, { fallback: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { "data-testid": fallbackId, children: "Loading..." }), children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(CustomComponent, { ...props }) });
+}
+const elementData = (props) => ({
+  type: CustomComponentType,
+  key: "0000-0000-0000-0000",
+  props
+});
+async function renderComponentSnapshot(snapshot, component = CustomComponent, { builtinSuspense } = {}) {
+  const runtime = new import_react3.ReactRuntime();
+  runtime.registerComponent(component, {
+    type: CustomComponentType,
+    label: "Custom Component",
+    builtinSuspense,
+    props: {
+      text: (0, import_controls.TextInput)({ defaultValue: "Default Text" }),
+      suspend: (0, import_controls.Checkbox)({ defaultValue: false, label: "Suspend" })
+    }
+  });
+  await (0, import_react.act)(
+    async () => (0, import_react2.render)(
+      /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Testing.ReactProvider, { runtime, siteVersion: null, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { "data-testid": containerId, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+        import_MakeswiftComponent.MakeswiftComponent,
+        {
+          label: "Embedded Component",
+          type: CustomComponentType,
+          snapshot
+        }
+      ) }) })
+    )
+  );
+}
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  CustomComponent,
+  CustomComponentType,
+  CustomComponentWithFallback,
+  componentId,
+  containerId,
+  elementData,
+  fallbackId,
+  renderComponentSnapshot
+});
+//# sourceMappingURL=fixtures.js.map

package/dist/cjs/next/components/tests/makeswift-component/fixtures.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../../../../src/next/components/tests/makeswift-component/fixtures.tsx"],"sourcesContent":["import { Suspense, act } from 'react'\nimport { render } from '@testing-library/react'\n\nimport { ReactRuntime } from '../../../../react'\nimport * as Testing from '../../../testing'\nimport { MakeswiftComponent } from '../../../../runtimes/react/components/MakeswiftComponent'\nimport { type MakeswiftComponentSnapshot } from '../../../../client'\n\nimport { Checkbox, TextInput } from '@makeswift/controls'\nimport { ComponentType } from '../../../../state/react-page'\n\nexport const CustomComponentType = 'CustomComponent'\nexport const componentId = 'component-id'\nexport const containerId = 'container-id'\nexport const fallbackId = 'fallback-id'\n\nexport type ComponentProps = {\n  text: string\n  suspend: boolean\n}\n\nexport function CustomComponent({ text, suspend }: ComponentProps) {\n  if (suspend) {\n    throw new Promise(() => {}) // suspend indefinitely\n  }\n\n  return <div data-testid={componentId}>{text}</div>\n}\n\nexport function CustomComponentWithFallback(props: ComponentProps) {\n  return (\n    <Suspense fallback={<div data-testid={fallbackId}>Loading...</div>}>\n      <CustomComponent {...props} />\n    </Suspense>\n  )\n}\n\nexport const elementData = (props: { text: string; suspend?: boolean }) => ({\n  type: CustomComponentType,\n  key: '0000-0000-0000-0000',\n  props,\n})\n\nexport async function renderComponentSnapshot(\n  snapshot: MakeswiftComponentSnapshot,\n  component: ComponentType<ComponentProps> = CustomComponent,\n  { builtinSuspense }: { builtinSuspense?: boolean } = {},\n) {\n  const runtime = new ReactRuntime()\n\n  runtime.registerComponent(component, {\n    type: CustomComponentType,\n    label: 'Custom Component',\n    builtinSuspense,\n    props: {\n      text: TextInput({ defaultValue: 'Default Text' }),\n      suspend: Checkbox({ defaultValue: false, label: 'Suspend' }),\n    },\n  })\n\n  await act(async () =>\n    render(\n      <Testing.ReactProvider runtime={runtime} siteVersion={null}>\n        <div data-testid={containerId}>\n          <MakeswiftComponent\n            label=\"Embedded Component\"\n            type={CustomComponentType}\n            snapshot={snapshot}\n          />\n        </div>\n      </Testing.ReactProvider>,\n    ),\n  )\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AA0BS;AA1BT,mBAA8B;AAC9B,IAAAA,gBAAuB;AAEvB,IAAAA,gBAA6B;AAC7B,cAAyB;AACzB,gCAAmC;AAGnC,sBAAoC;AAG7B,MAAM,sBAAsB;AAC5B,MAAM,cAAc;AACpB,MAAM,cAAc;AACpB,MAAM,aAAa;AAOnB,SAAS,gBAAgB,EAAE,MAAM,QAAQ,GAAmB;AACjE,MAAI,SAAS;AACX,UAAM,IAAI,QAAQ,MAAM;AAAA,IAAC,CAAC;AAAA,EAC5B;AAEA,SAAO,4CAAC,SAAI,eAAa,aAAc,gBAAK;AAC9C;AAEO,SAAS,4BAA4B,OAAuB;AACjE,SACE,4CAAC,yBAAS,UAAU,4CAAC,SAAI,eAAa,YAAY,wBAAU,GAC1D,sDAAC,mBAAiB,GAAG,OAAO,GAC9B;AAEJ;AAEO,MAAM,cAAc,CAAC,WAAgD;AAAA,EAC1E,MAAM;AAAA,EACN,KAAK;AAAA,EACL;AACF;AAEA,eAAsB,wBACpB,UACA,YAA2C,iBAC3C,EAAE,gBAAgB,IAAmC,CAAC,GACtD;AACA,QAAM,UAAU,IAAI,2BAAa;AAEjC,UAAQ,kBAAkB,WAAW;AAAA,IACnC,MAAM;AAAA,IACN,OAAO;AAAA,IACP;AAAA,IACA,OAAO;AAAA,MACL,UAAM,2BAAU,EAAE,cAAc,eAAe,CAAC;AAAA,MAChD,aAAS,0BAAS,EAAE,cAAc,OAAO,OAAO,UAAU,CAAC;AAAA,IAC7D;AAAA,EACF,CAAC;AAED,YAAM;AAAA,IAAI,gBACR;AAAA,MACE,4CAAC,QAAQ,eAAR,EAAsB,SAAkB,aAAa,MACpD,sDAAC,SAAI,eAAa,aAChB;AAAA,QAAC;AAAA;AAAA,UACC,OAAM;AAAA,UACN,MAAM;AAAA,UACN;AAAA;AAAA,MACF,GACF,GACF;AAAA,IACF;AAAA,EACF;AACF;","names":["import_react"]}

package/dist/cjs/next/components/tests/prop-controllers/page-prop-controller.js

@@ -37,8 +37,8 @@ var import_jest_dom = require("@testing-library/jest-dom");
 var import_prop_controllers = require("@makeswift/prop-controllers");
 var import_crypto = require("crypto");
 var import_page = require("../../page");
-var import_test_utils = require("react-dom/test-utils");
-var import_react2 = require("../../../../react");
+var import_react2 = require("react");
+var import_react3 = require("../../../../react");
 var Testing = __toESM(require("../../../testing"));
 const pagePropControllerTest = (propDef, value, component, assert, options) => describe("Page", () => {
   test(`can render ${propDef.type} v0 data`, async () => {
@@ -58,7 +58,7 @@ const pagePropControllerTest = (propDef, value, component, assert, options) => d
       }
     ]);
     const snapshot = Testing.createMakeswiftPageSnapshot(elementData);
-    const runtime = new import_react2.ReactRuntime();
+    const runtime = new import_react3.ReactRuntime();
     runtime.registerComponent(component(testId), {
       type: TestComponentType,
       label: "TestComponent",
@@ -66,7 +66,7 @@ const pagePropControllerTest = (propDef, value, component, assert, options) => d
         propKey: propDef(options)
       }
     });
-    await (0, import_test_utils.act)(
+    await (0, import_react2.act)(
       async () => (0, import_react.render)(
         /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Testing.ReactProvider, { runtime, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_page.Page, { snapshot }) })
       )
@@ -91,7 +91,7 @@ const pagePropControllerTest = (propDef, value, component, assert, options) => d
       }
     ]);
     const snapshot = Testing.createMakeswiftPageSnapshot(elementData);
-    const runtime = new import_react2.ReactRuntime();
+    const runtime = new import_react3.ReactRuntime();
     runtime.registerComponent(component(testId), {
       type: TestComponentType,
       label: "TestComponent",
@@ -99,7 +99,7 @@ const pagePropControllerTest = (propDef, value, component, assert, options) => d
         propKey: propDef(options)
       }
     });
-    await (0, import_test_utils.act)(
+    await (0, import_react2.act)(
       async () => (0, import_react.render)(
         /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Testing.ReactProvider, { runtime, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_page.Page, { snapshot }) })
       )

package/dist/cjs/next/components/tests/prop-controllers/page-prop-controller.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../../../../src/next/components/tests/prop-controllers/page-prop-controller.tsx"],"sourcesContent":["/** @jest-environment jsdom */\n\nimport { render, screen } from '@testing-library/react'\nimport '@testing-library/jest-dom'\n\nimport {\n  type OptionsType,\n  Types,\n  type Descriptor,\n  type PropDef,\n  type Value,\n} from '@makeswift/prop-controllers'\n\nimport { type ElementData, type ComponentType } from '../../../../state/react-page'\nimport { randomUUID } from 'crypto'\n\nimport { Page } from '../../page'\nimport { act } from 'react-dom/test-utils'\nimport { ReactRuntime } from '../../../../react'\nimport * as Testing from '../../../testing'\n\nexport const pagePropControllerTest = <\n  P extends PropDef & ((options?: any) => any),\n  C extends ComponentType<{ propKey: Value<P> | undefined }>,\n>(\n  propDef: P,\n  value: Value<typeof propDef>,\n  component: (testId: string) => C,\n  assert: (element: HTMLElement) => void,\n  options?: OptionsType<P>,\n) =>\n  describe('Page', () => {\n    test(`can render ${propDef.type} v0 data`, async () => {\n      // Arrange\n      const descriptorV0: Descriptor<typeof propDef> = {\n        type: propDef.type,\n        options,\n      }\n\n      const TestComponentType = 'TestComponent'\n      const testId = 'test-id'\n\n      const elementData: ElementData = Testing.createRootComponent([\n        {\n          key: randomUUID(),\n          type: TestComponentType,\n          props: {\n            propKey: propDef.toPropData(value, descriptorV0),\n          },\n        },\n      ])\n      const snapshot = Testing.createMakeswiftPageSnapshot(elementData)\n      const runtime = new ReactRuntime()\n\n      runtime.registerComponent(component(testId), {\n        type: TestComponentType,\n        label: 'TestComponent',\n        props: {\n          propKey: propDef(options),\n        },\n      })\n\n      await act(async () =>\n        render(\n          <Testing.ReactProvider runtime={runtime}>\n            <Page snapshot={snapshot} />\n          </Testing.ReactProvider>,\n        ),\n      )\n\n      assert(screen.getByTestId(testId))\n    })\n\n    test(`can render ${propDef.type} v1 data`, async () => {\n      // Arrange\n      const gapXDefinitionV1: Descriptor<typeof propDef> = {\n        type: Types.GapX,\n        version: 1,\n        options: {},\n      }\n\n      const TestComponentType = 'TestComponent'\n      const testId = 'test-id'\n      const elementData: ElementData = Testing.createRootComponent([\n        {\n          key: randomUUID(),\n          type: TestComponentType,\n          props: {\n            propKey: propDef.toPropData(value, gapXDefinitionV1),\n          },\n        },\n      ])\n      const snapshot = Testing.createMakeswiftPageSnapshot(elementData)\n      const runtime = new ReactRuntime()\n\n      runtime.registerComponent(component(testId), {\n        type: TestComponentType,\n        label: 'TestComponent',\n        props: {\n          propKey: propDef(options),\n        },\n      })\n\n      await act(async () =>\n        render(\n          <Testing.ReactProvider runtime={runtime}>\n            <Page snapshot={snapshot} />\n          </Testing.ReactProvider>,\n        ),\n      )\n\n      assert(screen.getByTestId(testId))\n    })\n  })\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAiEY;AA/DZ,mBAA+B;AAC/B,sBAAO;AAEP,8BAMO;AAGP,oBAA2B;AAE3B,kBAAqB;AACrB,wBAAoB;AACpB,IAAAA,gBAA6B;AAC7B,cAAyB;AAElB,MAAM,yBAAyB,CAIpC,SACA,OACA,WACA,QACA,YAEA,SAAS,QAAQ,MAAM;AACrB,OAAK,cAAc,QAAQ,IAAI,YAAY,YAAY;AAErD,UAAM,eAA2C;AAAA,MAC/C,MAAM,QAAQ;AAAA,MACd;AAAA,IACF;AAEA,UAAM,oBAAoB;AAC1B,UAAM,SAAS;AAEf,UAAM,cAA2B,QAAQ,oBAAoB;AAAA,MAC3D;AAAA,QACE,SAAK,0BAAW;AAAA,QAChB,MAAM;AAAA,QACN,OAAO;AAAA,UACL,SAAS,QAAQ,WAAW,OAAO,YAAY;AAAA,QACjD;AAAA,MACF;AAAA,IACF,CAAC;AACD,UAAM,WAAW,QAAQ,4BAA4B,WAAW;AAChE,UAAM,UAAU,IAAI,2BAAa;AAEjC,YAAQ,kBAAkB,UAAU,MAAM,GAAG;AAAA,MAC3C,MAAM;AAAA,MACN,OAAO;AAAA,MACP,OAAO;AAAA,QACL,SAAS,QAAQ,OAAO;AAAA,MAC1B;AAAA,IACF,CAAC;AAED,cAAM;AAAA,MAAI,gBACR;AAAA,QACE,4CAAC,QAAQ,eAAR,EAAsB,SACrB,sDAAC,oBAAK,UAAoB,GAC5B;AAAA,MACF;AAAA,IACF;AAEA,WAAO,oBAAO,YAAY,MAAM,CAAC;AAAA,EACnC,CAAC;AAED,OAAK,cAAc,QAAQ,IAAI,YAAY,YAAY;AAErD,UAAM,mBAA+C;AAAA,MACnD,MAAM,8BAAM;AAAA,MACZ,SAAS;AAAA,MACT,SAAS,CAAC;AAAA,IACZ;AAEA,UAAM,oBAAoB;AAC1B,UAAM,SAAS;AACf,UAAM,cAA2B,QAAQ,oBAAoB;AAAA,MAC3D;AAAA,QACE,SAAK,0BAAW;AAAA,QAChB,MAAM;AAAA,QACN,OAAO;AAAA,UACL,SAAS,QAAQ,WAAW,OAAO,gBAAgB;AAAA,QACrD;AAAA,MACF;AAAA,IACF,CAAC;AACD,UAAM,WAAW,QAAQ,4BAA4B,WAAW;AAChE,UAAM,UAAU,IAAI,2BAAa;AAEjC,YAAQ,kBAAkB,UAAU,MAAM,GAAG;AAAA,MAC3C,MAAM;AAAA,MACN,OAAO;AAAA,MACP,OAAO;AAAA,QACL,SAAS,QAAQ,OAAO;AAAA,MAC1B;AAAA,IACF,CAAC;AAED,cAAM;AAAA,MAAI,gBACR;AAAA,QACE,4CAAC,QAAQ,eAAR,EAAsB,SACrB,sDAAC,oBAAK,UAAoB,GAC5B;AAAA,MACF;AAAA,IACF;AAEA,WAAO,oBAAO,YAAY,MAAM,CAAC;AAAA,EACnC,CAAC;AACH,CAAC;","names":["import_react"]}
+{"version":3,"sources":["../../../../../../src/next/components/tests/prop-controllers/page-prop-controller.tsx"],"sourcesContent":["/** @jest-environment jsdom */\n\nimport { render, screen } from '@testing-library/react'\nimport '@testing-library/jest-dom'\n\nimport {\n  type OptionsType,\n  Types,\n  type Descriptor,\n  type PropDef,\n  type Value,\n} from '@makeswift/prop-controllers'\n\nimport { type ElementData, type ComponentType } from '../../../../state/react-page'\nimport { randomUUID } from 'crypto'\n\nimport { Page } from '../../page'\nimport { act } from \"react\";\nimport { ReactRuntime } from '../../../../react'\nimport * as Testing from '../../../testing'\n\nexport const pagePropControllerTest = <\n  P extends PropDef & ((options?: any) => any),\n  C extends ComponentType<{ propKey: Value<P> | undefined }>,\n>(\n  propDef: P,\n  value: Value<typeof propDef>,\n  component: (testId: string) => C,\n  assert: (element: HTMLElement) => void,\n  options?: OptionsType<P>,\n) =>\n  describe('Page', () => {\n    test(`can render ${propDef.type} v0 data`, async () => {\n      // Arrange\n      const descriptorV0: Descriptor<typeof propDef> = {\n        type: propDef.type,\n        options,\n      }\n\n      const TestComponentType = 'TestComponent'\n      const testId = 'test-id'\n\n      const elementData: ElementData = Testing.createRootComponent([\n        {\n          key: randomUUID(),\n          type: TestComponentType,\n          props: {\n            propKey: propDef.toPropData(value, descriptorV0),\n          },\n        },\n      ])\n      const snapshot = Testing.createMakeswiftPageSnapshot(elementData)\n      const runtime = new ReactRuntime()\n\n      runtime.registerComponent(component(testId), {\n        type: TestComponentType,\n        label: 'TestComponent',\n        props: {\n          propKey: propDef(options),\n        },\n      })\n\n      await act(async () =>\n        render(\n          <Testing.ReactProvider runtime={runtime}>\n            <Page snapshot={snapshot} />\n          </Testing.ReactProvider>,\n        ),\n      )\n\n      assert(screen.getByTestId(testId))\n    })\n\n    test(`can render ${propDef.type} v1 data`, async () => {\n      // Arrange\n      const gapXDefinitionV1: Descriptor<typeof propDef> = {\n        type: Types.GapX,\n        version: 1,\n        options: {},\n      }\n\n      const TestComponentType = 'TestComponent'\n      const testId = 'test-id'\n      const elementData: ElementData = Testing.createRootComponent([\n        {\n          key: randomUUID(),\n          type: TestComponentType,\n          props: {\n            propKey: propDef.toPropData(value, gapXDefinitionV1),\n          },\n        },\n      ])\n      const snapshot = Testing.createMakeswiftPageSnapshot(elementData)\n      const runtime = new ReactRuntime()\n\n      runtime.registerComponent(component(testId), {\n        type: TestComponentType,\n        label: 'TestComponent',\n        props: {\n          propKey: propDef(options),\n        },\n      })\n\n      await act(async () =>\n        render(\n          <Testing.ReactProvider runtime={runtime}>\n            <Page snapshot={snapshot} />\n          </Testing.ReactProvider>,\n        ),\n      )\n\n      assert(screen.getByTestId(testId))\n    })\n  })\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAiEY;AA/DZ,mBAA+B;AAC/B,sBAAO;AAEP,8BAMO;AAGP,oBAA2B;AAE3B,kBAAqB;AACrB,IAAAA,gBAAoB;AACpB,IAAAA,gBAA6B;AAC7B,cAAyB;AAElB,MAAM,yBAAyB,CAIpC,SACA,OACA,WACA,QACA,YAEA,SAAS,QAAQ,MAAM;AACrB,OAAK,cAAc,QAAQ,IAAI,YAAY,YAAY;AAErD,UAAM,eAA2C;AAAA,MAC/C,MAAM,QAAQ;AAAA,MACd;AAAA,IACF;AAEA,UAAM,oBAAoB;AAC1B,UAAM,SAAS;AAEf,UAAM,cAA2B,QAAQ,oBAAoB;AAAA,MAC3D;AAAA,QACE,SAAK,0BAAW;AAAA,QAChB,MAAM;AAAA,QACN,OAAO;AAAA,UACL,SAAS,QAAQ,WAAW,OAAO,YAAY;AAAA,QACjD;AAAA,MACF;AAAA,IACF,CAAC;AACD,UAAM,WAAW,QAAQ,4BAA4B,WAAW;AAChE,UAAM,UAAU,IAAI,2BAAa;AAEjC,YAAQ,kBAAkB,UAAU,MAAM,GAAG;AAAA,MAC3C,MAAM;AAAA,MACN,OAAO;AAAA,MACP,OAAO;AAAA,QACL,SAAS,QAAQ,OAAO;AAAA,MAC1B;AAAA,IACF,CAAC;AAED,cAAM;AAAA,MAAI,gBACR;AAAA,QACE,4CAAC,QAAQ,eAAR,EAAsB,SACrB,sDAAC,oBAAK,UAAoB,GAC5B;AAAA,MACF;AAAA,IACF;AAEA,WAAO,oBAAO,YAAY,MAAM,CAAC;AAAA,EACnC,CAAC;AAED,OAAK,cAAc,QAAQ,IAAI,YAAY,YAAY;AAErD,UAAM,mBAA+C;AAAA,MACnD,MAAM,8BAAM;AAAA,MACZ,SAAS;AAAA,MACT,SAAS,CAAC;AAAA,IACZ;AAEA,UAAM,oBAAoB;AAC1B,UAAM,SAAS;AACf,UAAM,cAA2B,QAAQ,oBAAoB;AAAA,MAC3D;AAAA,QACE,SAAK,0BAAW;AAAA,QAChB,MAAM;AAAA,QACN,OAAO;AAAA,UACL,SAAS,QAAQ,WAAW,OAAO,gBAAgB;AAAA,QACrD;AAAA,MACF;AAAA,IACF,CAAC;AACD,UAAM,WAAW,QAAQ,4BAA4B,WAAW;AAChE,UAAM,UAAU,IAAI,2BAAa;AAEjC,YAAQ,kBAAkB,UAAU,MAAM,GAAG;AAAA,MAC3C,MAAM;AAAA,MACN,OAAO;AAAA,MACP,OAAO;AAAA,QACL,SAAS,QAAQ,OAAO;AAAA,MAC1B;AAAA,IACF,CAAC;AAED,cAAM;AAAA,MAAI,gBACR;AAAA,QACE,4CAAC,QAAQ,eAAR,EAAsB,SACrB,sDAAC,oBAAK,UAAoB,GAC5B;AAAA,MACF;AAAA,IACF;AAEA,WAAO,oBAAO,YAAY,MAAM,CAAC;AAAA,EACnC,CAAC;AACH,CAAC;","names":["import_react"]}

package/dist/cjs/next/testing/page-rendering.js

@@ -23,8 +23,8 @@ __export(page_rendering_exports, {
 });
 module.exports = __toCommonJS(page_rendering_exports);
 var import_jsx_runtime = require("react/jsx-runtime");
+var import_react = require("react");
 var import_jest_dom = require("@testing-library/jest-dom");
-var import_test_utils = require("react-dom/test-utils");
 var import_react2 = require("@testing-library/react");
 var import_react_runtime = require("../../runtimes/react/react-runtime");
 var import_constants = require("../../components/builtin/constants");
@@ -37,7 +37,7 @@ async function testMakeswiftPageHeadRendering(props, { forcePagesRouter = false
     label: "Root",
     props: {}
   });
-  return await (0, import_test_utils.act)(
+  return await (0, import_react.act)(
     async () => (0, import_react2.render)(
       /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_react_provider.ReactProvider, { runtime, siteVersion: null, forcePagesRouter, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_page.Page, { ...props }) }),
       {
@@ -48,7 +48,7 @@ async function testMakeswiftPageHeadRendering(props, { forcePagesRouter = false
 }
 async function testMakeswiftPageRendering(props, { forcePagesRouter = false } = {}) {
   const runtime = new import_react_runtime.ReactRuntime();
-  return await (0, import_test_utils.act)(
+  return await (0, import_react.act)(
     async () => (0, import_react2.render)(
       /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_react_provider.ReactProvider, { runtime, siteVersion: null, forcePagesRouter, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_page.Page, { ...props }) }),
       {

package/dist/cjs/next/testing/page-rendering.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../../src/next/testing/page-rendering.tsx"],"sourcesContent":["import { type ComponentPropsWithoutRef } from 'react'\n\nimport '@testing-library/jest-dom'\nimport { act } from 'react-dom/test-utils'\nimport { render } from '@testing-library/react'\n\nimport { ReactRuntime } from '../../runtimes/react/react-runtime'\nimport { MakeswiftComponentType } from '../../components/builtin/constants'\n\nimport { Page as MakeswiftPage } from '../components/page'\n\nimport { ReactProvider } from './react-provider'\n\nexport async function testMakeswiftPageHeadRendering(\n  props: ComponentPropsWithoutRef<typeof MakeswiftPage>,\n  { forcePagesRouter = false }: { forcePagesRouter?: boolean } = {},\n) {\n  const runtime = new ReactRuntime()\n\n  runtime.registerComponent(() => <></>, {\n    type: MakeswiftComponentType.Root,\n    label: 'Root',\n    props: {},\n  })\n\n  return await act(async () =>\n    render(\n      <ReactProvider runtime={runtime} siteVersion={null} forcePagesRouter={forcePagesRouter}>\n        <MakeswiftPage {...props} />\n      </ReactProvider>,\n      {\n        container: document.body.appendChild(document.createElement('head')),\n      },\n    ),\n  )\n}\n\nexport async function testMakeswiftPageRendering(\n  props: ComponentPropsWithoutRef<typeof MakeswiftPage>,\n  { forcePagesRouter = false }: { forcePagesRouter?: boolean } = {},\n) {\n  const runtime = new ReactRuntime()\n\n  return await act(async () =>\n    render(\n      <ReactProvider runtime={runtime} siteVersion={null} forcePagesRouter={forcePagesRouter}>\n        <MakeswiftPage {...props} />\n      </ReactProvider>,\n      {\n        container: document.body.appendChild(document.createElement('div')),\n      },\n    ),\n  )\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAmBkC;AAjBlC,sBAAO;AACP,wBAAoB;AACpB,IAAAA,gBAAuB;AAEvB,2BAA6B;AAC7B,uBAAuC;AAEvC,kBAAsC;AAEtC,4BAA8B;AAE9B,eAAsB,+BACpB,OACA,EAAE,mBAAmB,MAAM,IAAoC,CAAC,GAChE;AACA,QAAM,UAAU,IAAI,kCAAa;AAEjC,UAAQ,kBAAkB,MAAM,2EAAE,GAAK;AAAA,IACrC,MAAM,wCAAuB;AAAA,IAC7B,OAAO;AAAA,IACP,OAAO,CAAC;AAAA,EACV,CAAC;AAED,SAAO,UAAM;AAAA,IAAI,gBACf;AAAA,MACE,4CAAC,uCAAc,SAAkB,aAAa,MAAM,kBAClD,sDAAC,YAAAC,MAAA,EAAe,GAAG,OAAO,GAC5B;AAAA,MACA;AAAA,QACE,WAAW,SAAS,KAAK,YAAY,SAAS,cAAc,MAAM,CAAC;AAAA,MACrE;AAAA,IACF;AAAA,EACF;AACF;AAEA,eAAsB,2BACpB,OACA,EAAE,mBAAmB,MAAM,IAAoC,CAAC,GAChE;AACA,QAAM,UAAU,IAAI,kCAAa;AAEjC,SAAO,UAAM;AAAA,IAAI,gBACf;AAAA,MACE,4CAAC,uCAAc,SAAkB,aAAa,MAAM,kBAClD,sDAAC,YAAAA,MAAA,EAAe,GAAG,OAAO,GAC5B;AAAA,MACA;AAAA,QACE,WAAW,SAAS,KAAK,YAAY,SAAS,cAAc,KAAK,CAAC;AAAA,MACpE;AAAA,IACF;AAAA,EACF;AACF;","names":["import_react","MakeswiftPage"]}
+{"version":3,"sources":["../../../../src/next/testing/page-rendering.tsx"],"sourcesContent":["import { type ComponentPropsWithoutRef, act } from 'react';\n\nimport '@testing-library/jest-dom'\nimport { render } from '@testing-library/react'\n\nimport { ReactRuntime } from '../../runtimes/react/react-runtime'\nimport { MakeswiftComponentType } from '../../components/builtin/constants'\n\nimport { Page as MakeswiftPage } from '../components/page'\n\nimport { ReactProvider } from './react-provider'\n\nexport async function testMakeswiftPageHeadRendering(\n  props: ComponentPropsWithoutRef<typeof MakeswiftPage>,\n  { forcePagesRouter = false }: { forcePagesRouter?: boolean } = {},\n) {\n  const runtime = new ReactRuntime()\n\n  runtime.registerComponent(() => <></>, {\n    type: MakeswiftComponentType.Root,\n    label: 'Root',\n    props: {},\n  })\n\n  return await act(async () =>\n    render(\n      <ReactProvider runtime={runtime} siteVersion={null} forcePagesRouter={forcePagesRouter}>\n        <MakeswiftPage {...props} />\n      </ReactProvider>,\n      {\n        container: document.body.appendChild(document.createElement('head')),\n      },\n    ),\n  )\n}\n\nexport async function testMakeswiftPageRendering(\n  props: ComponentPropsWithoutRef<typeof MakeswiftPage>,\n  { forcePagesRouter = false }: { forcePagesRouter?: boolean } = {},\n) {\n  const runtime = new ReactRuntime()\n\n  return await act(async () =>\n    render(\n      <ReactProvider runtime={runtime} siteVersion={null} forcePagesRouter={forcePagesRouter}>\n        <MakeswiftPage {...props} />\n      </ReactProvider>,\n      {\n        container: document.body.appendChild(document.createElement('div')),\n      },\n    ),\n  )\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAkBkC;AAlBlC,mBAAmD;AAEnD,sBAAO;AACP,IAAAA,gBAAuB;AAEvB,2BAA6B;AAC7B,uBAAuC;AAEvC,kBAAsC;AAEtC,4BAA8B;AAE9B,eAAsB,+BACpB,OACA,EAAE,mBAAmB,MAAM,IAAoC,CAAC,GAChE;AACA,QAAM,UAAU,IAAI,kCAAa;AAEjC,UAAQ,kBAAkB,MAAM,2EAAE,GAAK;AAAA,IACrC,MAAM,wCAAuB;AAAA,IAC7B,OAAO;AAAA,IACP,OAAO,CAAC;AAAA,EACV,CAAC;AAED,SAAO,UAAM;AAAA,IAAI,gBACf;AAAA,MACE,4CAAC,uCAAc,SAAkB,aAAa,MAAM,kBAClD,sDAAC,YAAAC,MAAA,EAAe,GAAG,OAAO,GAC5B;AAAA,MACA;AAAA,QACE,WAAW,SAAS,KAAK,YAAY,SAAS,cAAc,MAAM,CAAC;AAAA,MACrE;AAAA,IACF;AAAA,EACF;AACF;AAEA,eAAsB,2BACpB,OACA,EAAE,mBAAmB,MAAM,IAAoC,CAAC,GAChE;AACA,QAAM,UAAU,IAAI,kCAAa;AAEjC,SAAO,UAAM;AAAA,IAAI,gBACf;AAAA,MACE,4CAAC,uCAAc,SAAkB,aAAa,MAAM,kBAClD,sDAAC,YAAAA,MAAA,EAAe,GAAG,OAAO,GAC5B;AAAA,MACA;AAAA,QACE,WAAW,SAAS,KAAK,YAAY,SAAS,cAAc,KAAK,CAAC;AAAA,MACpE;AAAA,IACF;AAAA,EACF;AACF;","names":["import_react","MakeswiftPage"]}

package/dist/cjs/runtimes/react/components/Document.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../../../src/runtimes/react/components/Document.tsx"],"sourcesContent":["import { Ref, forwardRef, memo } from 'react'\nimport { type Document as ReactPageDocument, getRootElement } from '../../../state/react-page'\nimport { ElementImperativeHandle } from '../element-imperative-handle'\nimport { DocumentKeyContext, DocumentLocaleContext } from '../hooks/use-document-context'\nimport { Element } from './Element'\n\ntype DocumentProps = {\n  document: ReactPageDocument\n}\n\nexport const Document = memo(\n  forwardRef(function Document(\n    { document }: DocumentProps,\n    ref: Ref<ElementImperativeHandle>,\n  ): JSX.Element {\n    return (\n      <DocumentKeyContext.Provider value={document.key}>\n        <DocumentLocaleContext.Provider value={document.locale}>\n          <Element ref={ref} element={getRootElement(document)} />\n        </DocumentLocaleContext.Provider>\n      </DocumentKeyContext.Provider>\n    )\n  }),\n)\n"],"mappings":";;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAkBU;AAlBV,mBAAsC;AACtC,wBAAmE;AAEnE,kCAA0D;AAC1D,qBAAwB;AAMjB,MAAM,eAAW;AAAA,MACtB,yBAAW,SAASA,UAClB,EAAE,SAAS,GACX,KACa;AACb,WACE,4CAAC,+CAAmB,UAAnB,EAA4B,OAAO,SAAS,KAC3C,sDAAC,kDAAsB,UAAtB,EAA+B,OAAO,SAAS,QAC9C,sDAAC,0BAAQ,KAAU,aAAS,kCAAe,QAAQ,GAAG,GACxD,GACF;AAAA,EAEJ,CAAC;AACH;","names":["Document"]}
+{"version":3,"sources":["../../../../../src/runtimes/react/components/Document.tsx"],"sourcesContent":["import { Ref, forwardRef, memo, ReactNode } from 'react'\nimport { type Document as ReactPageDocument, getRootElement } from '../../../state/react-page'\nimport { ElementImperativeHandle } from '../element-imperative-handle'\nimport { DocumentKeyContext, DocumentLocaleContext } from '../hooks/use-document-context'\nimport { Element } from './Element'\n\ntype DocumentProps = {\n  document: ReactPageDocument\n}\n\nexport const Document = memo(\n  forwardRef(function Document(\n    { document }: DocumentProps,\n    ref: Ref<ElementImperativeHandle>,\n  ): ReactNode {\n    return (\n      <DocumentKeyContext.Provider value={document.key}>\n        <DocumentLocaleContext.Provider value={document.locale}>\n          <Element ref={ref} element={getRootElement(document)} />\n        </DocumentLocaleContext.Provider>\n      </DocumentKeyContext.Provider>\n    )\n  }),\n)\n"],"mappings":";;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAkBU;AAlBV,mBAAiD;AACjD,wBAAmE;AAEnE,kCAA0D;AAC1D,qBAAwB;AAMjB,MAAM,eAAW;AAAA,MACtB,yBAAW,SAASA,UAClB,EAAE,SAAS,GACX,KACW;AACX,WACE,4CAAC,+CAAmB,UAAnB,EAA4B,OAAO,SAAS,KAC3C,sDAAC,kDAAsB,UAAtB,EAA+B,OAAO,SAAS,QAC9C,sDAAC,0BAAQ,KAAU,aAAS,kCAAe,QAAQ,GAAG,GACxD,GACF;AAAA,EAEJ,CAAC;AACH;","names":["Document"]}

package/dist/cjs/runtimes/react/components/DocumentRoot.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../../../src/runtimes/react/components/DocumentRoot.tsx"],"sourcesContent":["import { Ref, forwardRef, memo } from 'react'\nimport { type Document } from '../../../state/react-page'\nimport { ElementImperativeHandle } from '../element-imperative-handle'\nimport { useDocument } from '../hooks/use-document'\nimport { FallbackComponent } from '../../../components/shared/FallbackComponent'\nimport { Document as DocumentComponent } from './Document'\n\ntype Props = {\n  rootDocument: Document\n}\n\nexport const DocumentRoot = memo(\n  forwardRef(function DocumentRoot(\n    { rootDocument }: Props,\n    ref: Ref<ElementImperativeHandle>,\n  ): JSX.Element {\n    const document = useDocument(rootDocument.key) ?? rootDocument\n\n    if (document == null) {\n      return <FallbackComponent ref={ref as Ref<HTMLDivElement>} text=\"Document not found\" />\n    }\n\n    return <DocumentComponent ref={ref} document={document} />\n  }),\n)\n"],"mappings":";;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAmBa;AAnBb,mBAAsC;AAGtC,0BAA4B;AAC5B,+BAAkC;AAClC,sBAA8C;AAMvC,MAAM,mBAAe;AAAA,MAC1B,yBAAW,SAASA,cAClB,EAAE,aAAa,GACf,KACa;AACb,UAAM,eAAW,iCAAY,aAAa,GAAG,KAAK;AAElD,QAAI,YAAY,MAAM;AACpB,aAAO,4CAAC,8CAAkB,KAAiC,MAAK,sBAAqB;AAAA,IACvF;AAEA,WAAO,4CAAC,gBAAAC,UAAA,EAAkB,KAAU,UAAoB;AAAA,EAC1D,CAAC;AACH;","names":["DocumentRoot","DocumentComponent"]}
+{"version":3,"sources":["../../../../../src/runtimes/react/components/DocumentRoot.tsx"],"sourcesContent":["import { Ref, forwardRef, memo, ReactNode } from 'react'\nimport { type Document } from '../../../state/react-page'\nimport { ElementImperativeHandle } from '../element-imperative-handle'\nimport { useDocument } from '../hooks/use-document'\nimport { FallbackComponent } from '../../../components/shared/FallbackComponent'\nimport { Document as DocumentComponent } from './Document'\n\ntype Props = {\n  rootDocument: Document\n}\n\nexport const DocumentRoot = memo(\n  forwardRef(function DocumentRoot(\n    { rootDocument }: Props,\n    ref: Ref<ElementImperativeHandle>,\n  ): ReactNode {\n    const document = useDocument(rootDocument.key) ?? rootDocument\n\n    if (document == null) {\n      return <FallbackComponent ref={ref as Ref<HTMLDivElement>} text=\"Document not found\" />\n    }\n\n    return <DocumentComponent ref={ref} document={document} />\n  }),\n)\n"],"mappings":";;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAmBa;AAnBb,mBAAiD;AAGjD,0BAA4B;AAC5B,+BAAkC;AAClC,sBAA8C;AAMvC,MAAM,mBAAe;AAAA,MAC1B,yBAAW,SAASA,cAClB,EAAE,aAAa,GACf,KACW;AACX,UAAM,eAAW,iCAAY,aAAa,GAAG,KAAK;AAElD,QAAI,YAAY,MAAM;AACpB,aAAO,4CAAC,8CAAkB,KAAiC,MAAK,sBAAqB;AAAA,IACvF;AAEA,WAAO,4CAAC,gBAAAC,UAAA,EAAkB,KAAU,UAAoB;AAAA,EAC1D,CAAC;AACH;","names":["DocumentRoot","DocumentComponent"]}

package/dist/cjs/runtimes/react/components/Element.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../../../src/runtimes/react/components/Element.tsx"],"sourcesContent":["'use client'\n\nimport { forwardRef, memo, Ref, useCallback, useImperativeHandle, useRef } from 'react'\nimport { isElementReference, type Element as ElementDataOrRef } from '../../../state/react-page'\nimport { ElementRegistration } from './ElementRegistration'\nimport { ElementReference } from './ElementReference'\nimport { ElementData } from './ElementData'\nimport { ElementImperativeHandle } from '../element-imperative-handle'\nimport { FindDomNode } from '../find-dom-node'\nimport { FallbackComponent } from '../../../components/shared/FallbackComponent'\nimport { ErrorBoundary } from '../../../components/shared/ErrorBoundary'\n\ntype Props = {\n  element: ElementDataOrRef\n}\n\nexport const Element = memo(\n  forwardRef(function Element(\n    { element }: Props,\n    ref: Ref<ElementImperativeHandle>,\n  ): JSX.Element | null {\n    const useFindDomNodeRef = useRef(true)\n    const imperativeHandleRef = useRef(new ElementImperativeHandle())\n\n    const findDomNodeCallbackRef = useCallback((current: (() => Element | Text | null) | null) => {\n      if (useFindDomNodeRef.current === true) {\n        imperativeHandleRef.current.callback(() => current?.() ?? null)\n      }\n    }, [])\n\n    const elementCallbackRef = useCallback((current: unknown | null) => {\n      useFindDomNodeRef.current = false\n\n      imperativeHandleRef.current.callback(() => current)\n    }, [])\n\n    useImperativeHandle(ref, () => imperativeHandleRef.current, [])\n\n    return (\n      <ElementRegistration componentHandle={imperativeHandleRef.current} elementKey={element.key}>\n        <FindDomNode ref={findDomNodeCallbackRef}>\n          <ErrorBoundary FallbackComponent={ErrorFallback}>\n            {isElementReference(element) ? (\n              <ElementReference\n                key={element.key}\n                ref={elementCallbackRef}\n                elementReference={element}\n              />\n            ) : (\n              <ElementData key={element.key} ref={elementCallbackRef} elementData={element} />\n            )}\n          </ErrorBoundary>\n        </FindDomNode>\n      </ElementRegistration>\n    )\n  }),\n)\n\nfunction ErrorFallback() {\n  return <FallbackComponent text={`Error rendering component`} />\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AA2Cc;AAzCd,mBAAgF;AAChF,wBAAqE;AACrE,iCAAoC;AACpC,8BAAiC;AACjC,yBAA4B;AAC5B,uCAAwC;AACxC,2BAA4B;AAC5B,+BAAkC;AAClC,2BAA8B;AAMvB,MAAM,cAAU;AAAA,MACrB,yBAAW,SAASA,SAClB,EAAE,QAAQ,GACV,KACoB;AACpB,UAAM,wBAAoB,qBAAO,IAAI;AACrC,UAAM,0BAAsB,qBAAO,IAAI,yDAAwB,CAAC;AAEhE,UAAM,6BAAyB,0BAAY,CAAC,YAAkD;AAC5F,UAAI,kBAAkB,YAAY,MAAM;AACtC,4BAAoB,QAAQ,SAAS,MAAM,UAAU,KAAK,IAAI;AAAA,MAChE;AAAA,IACF,GAAG,CAAC,CAAC;AAEL,UAAM,yBAAqB,0BAAY,CAAC,YAA4B;AAClE,wBAAkB,UAAU;AAE5B,0BAAoB,QAAQ,SAAS,MAAM,OAAO;AAAA,IACpD,GAAG,CAAC,CAAC;AAEL,0CAAoB,KAAK,MAAM,oBAAoB,SAAS,CAAC,CAAC;AAE9D,WACE,4CAAC,kDAAoB,iBAAiB,oBAAoB,SAAS,YAAY,QAAQ,KACrF,sDAAC,oCAAY,KAAK,wBAChB,sDAAC,sCAAc,mBAAmB,eAC/B,oDAAmB,OAAO,IACzB;AAAA,MAAC;AAAA;AAAA,QAEC,KAAK;AAAA,QACL,kBAAkB;AAAA;AAAA,MAFb,QAAQ;AAAA,IAGf,IAEA,4CAAC,kCAA8B,KAAK,oBAAoB,aAAa,WAAnD,QAAQ,GAAoD,GAElF,GACF,GACF;AAAA,EAEJ,CAAC;AACH;AAEA,SAAS,gBAAgB;AACvB,SAAO,4CAAC,8CAAkB,MAAM,6BAA6B;AAC/D;","names":["Element"]}
+{"version":3,"sources":["../../../../../src/runtimes/react/components/Element.tsx"],"sourcesContent":["'use client'\n\nimport { forwardRef, memo, Ref, useCallback, useImperativeHandle, useRef, ReactNode } from 'react'\nimport { isElementReference, type Element as ElementDataOrRef } from '../../../state/react-page'\nimport { ElementRegistration } from './ElementRegistration'\nimport { ElementReference } from './ElementReference'\nimport { ElementData } from './ElementData'\nimport { ElementImperativeHandle } from '../element-imperative-handle'\nimport { FindDomNode } from '../find-dom-node'\nimport { FallbackComponent } from '../../../components/shared/FallbackComponent'\nimport { ErrorBoundary } from '../../../components/shared/ErrorBoundary'\n\ntype Props = {\n  element: ElementDataOrRef\n}\n\nexport const Element = memo(\n  forwardRef(function Element(\n    { element }: Props,\n    ref: Ref<ElementImperativeHandle>,\n  ): ReactNode | null {\n    const useFindDomNodeRef = useRef(true)\n    const imperativeHandleRef = useRef(new ElementImperativeHandle())\n\n    const findDomNodeCallbackRef = useCallback((current: (() => Element | Text | null) | null) => {\n      if (useFindDomNodeRef.current === true) {\n        imperativeHandleRef.current.callback(() => current?.() ?? null)\n      }\n    }, [])\n\n    const elementCallbackRef = useCallback((current: unknown | null) => {\n      useFindDomNodeRef.current = false\n\n      imperativeHandleRef.current.callback(() => current)\n    }, [])\n\n    useImperativeHandle(ref, () => imperativeHandleRef.current, [])\n\n    return (\n      <ElementRegistration componentHandle={imperativeHandleRef.current} elementKey={element.key}>\n        <FindDomNode ref={findDomNodeCallbackRef}>\n          <ErrorBoundary FallbackComponent={ErrorFallback}>\n            {isElementReference(element) ? (\n              <ElementReference\n                key={element.key}\n                ref={elementCallbackRef}\n                elementReference={element}\n              />\n            ) : (\n              <ElementData key={element.key} ref={elementCallbackRef} elementData={element} />\n            )}\n          </ErrorBoundary>\n        </FindDomNode>\n      </ElementRegistration>\n    )\n  }),\n)\n\nfunction ErrorFallback() {\n  return <FallbackComponent text={`Error rendering component`} />\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AA2Cc;AAzCd,mBAA2F;AAC3F,wBAAqE;AACrE,iCAAoC;AACpC,8BAAiC;AACjC,yBAA4B;AAC5B,uCAAwC;AACxC,2BAA4B;AAC5B,+BAAkC;AAClC,2BAA8B;AAMvB,MAAM,cAAU;AAAA,MACrB,yBAAW,SAASA,SAClB,EAAE,QAAQ,GACV,KACkB;AAClB,UAAM,wBAAoB,qBAAO,IAAI;AACrC,UAAM,0BAAsB,qBAAO,IAAI,yDAAwB,CAAC;AAEhE,UAAM,6BAAyB,0BAAY,CAAC,YAAkD;AAC5F,UAAI,kBAAkB,YAAY,MAAM;AACtC,4BAAoB,QAAQ,SAAS,MAAM,UAAU,KAAK,IAAI;AAAA,MAChE;AAAA,IACF,GAAG,CAAC,CAAC;AAEL,UAAM,yBAAqB,0BAAY,CAAC,YAA4B;AAClE,wBAAkB,UAAU;AAE5B,0BAAoB,QAAQ,SAAS,MAAM,OAAO;AAAA,IACpD,GAAG,CAAC,CAAC;AAEL,0CAAoB,KAAK,MAAM,oBAAoB,SAAS,CAAC,CAAC;AAE9D,WACE,4CAAC,kDAAoB,iBAAiB,oBAAoB,SAAS,YAAY,QAAQ,KACrF,sDAAC,oCAAY,KAAK,wBAChB,sDAAC,sCAAc,mBAAmB,eAC/B,oDAAmB,OAAO,IACzB;AAAA,MAAC;AAAA;AAAA,QAEC,KAAK;AAAA,QACL,kBAAkB;AAAA;AAAA,MAFb,QAAQ;AAAA,IAGf,IAEA,4CAAC,kCAA8B,KAAK,oBAAoB,aAAa,WAAnD,QAAQ,GAAoD,GAElF,GACF,GACF;AAAA,EAEJ,CAAC;AACH;AAEA,SAAS,gBAAgB;AACvB,SAAO,4CAAC,8CAAkB,MAAM,6BAA6B;AAC/D;","names":["Element"]}

package/dist/cjs/runtimes/react/components/ElementData.js

@@ -29,6 +29,7 @@ var import_use_component = require("../hooks/use-component");
 var import_can_accept_ref = require("../utils/can-accept-ref");
 var import_FallbackComponent = require("../../../components/shared/FallbackComponent");
 var import_controls = require("../controls");
+var import_activity_with_fallback = require("./activity-with-fallback");
 const ElementData = (0, import_react2.memo)(
   (0, import_react2.forwardRef)(function ElementData2({ elementData }, ref) {
     const Component = (0, import_use_component.useComponent)(elementData.type);
@@ -38,8 +39,7 @@ const ElementData = (0, import_react2.memo)(
       return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_FallbackComponent.FallbackComponent, { ref, text: "Component not found" });
     }
     const forwardRef2 = (0, import_can_accept_ref.canAcceptRef)(Component);
-    const SuspenseOrFragment = builtinSuspense ? import_react2.Suspense : import_react2.Fragment;
-    return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(SuspenseOrFragment, { children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_controls.ResolveProps, { element: elementData, children: (props) => forwardRef2 ? /* @__PURE__ */ (0, import_react.createElement)(Component, { ...props, key: elementData.key, ref }) : /* @__PURE__ */ (0, import_react.createElement)(Component, { ...props, key: elementData.key }) }) });
+    return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_activity_with_fallback.ActivityOrFallback, { suspenseFallback: builtinSuspense, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_controls.ResolveProps, { element: elementData, children: (props) => forwardRef2 ? /* @__PURE__ */ (0, import_react.createElement)(Component, { ...props, key: elementData.key, ref }) : /* @__PURE__ */ (0, import_react.createElement)(Component, { ...props, key: elementData.key }) }) });
   })
 );
 // Annotate the CommonJS export names for ESM import in node:

package/dist/cjs/runtimes/react/components/ElementData.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../../../src/runtimes/react/components/ElementData.tsx"],"sourcesContent":["import { Ref, Suspense, Fragment, forwardRef, memo } from 'react'\nimport { ElementData as ReactPageElementData } from '../../../state/react-page'\nimport { useBuiltinSuspense } from '../hooks/use-builtin-suspense'\nimport { useComponent } from '../hooks/use-component'\nimport { canAcceptRef } from '../utils/can-accept-ref'\nimport { FallbackComponent } from '../../../components/shared/FallbackComponent'\nimport { ResolveProps } from '../controls'\n\ntype ElementDataProps = {\n  elementData: ReactPageElementData\n}\n\nexport const ElementData = memo(\n  forwardRef(function ElementData(\n    { elementData }: ElementDataProps,\n    ref: Ref<unknown>,\n  ): JSX.Element {\n    const Component = useComponent(elementData.type)\n    const builtinSuspense = useBuiltinSuspense(elementData.type)\n\n    if (Component == null) {\n      console.warn(`Unknown component '${elementData.type}'`, { elementData })\n      return <FallbackComponent ref={ref as Ref<HTMLDivElement>} text=\"Component not found\" />\n    }\n\n    const forwardRef = canAcceptRef(Component)\n    const SuspenseOrFragment = builtinSuspense ? Suspense : Fragment\n\n    return (\n      <SuspenseOrFragment>\n        <ResolveProps element={elementData}>\n          {props =>\n            forwardRef ? (\n              <Component {...props} key={elementData.key} ref={ref} />\n            ) : (\n              <Component {...props} key={elementData.key} />\n            )\n          }\n        </ResolveProps>\n      </SuspenseOrFragment>\n    )\n  }),\n)\n"],"mappings":";;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAsBa;AAWC;AAjCd,IAAAA,gBAA0D;AAE1D,kCAAmC;AACnC,2BAA6B;AAC7B,4BAA6B;AAC7B,+BAAkC;AAClC,sBAA6B;AAMtB,MAAM,kBAAc;AAAA,MACzB,0BAAW,SAASC,aAClB,EAAE,YAAY,GACd,KACa;AACb,UAAM,gBAAY,mCAAa,YAAY,IAAI;AAC/C,UAAM,sBAAkB,gDAAmB,YAAY,IAAI;AAE3D,QAAI,aAAa,MAAM;AACrB,cAAQ,KAAK,sBAAsB,YAAY,IAAI,KAAK,EAAE,YAAY,CAAC;AACvE,aAAO,4CAAC,8CAAkB,KAAiC,MAAK,uBAAsB;AAAA,IACxF;AAEA,UAAMC,kBAAa,oCAAa,SAAS;AACzC,UAAM,qBAAqB,kBAAkB,yBAAW;AAExD,WACE,4CAAC,sBACC,sDAAC,gCAAa,SAAS,aACpB,qBACCA,cACE,gDAAC,aAAW,GAAG,OAAO,KAAK,YAAY,KAAK,KAAU,IAEtD,gDAAC,aAAW,GAAG,OAAO,KAAK,YAAY,KAAK,GAGlD,GACF;AAAA,EAEJ,CAAC;AACH;","names":["import_react","ElementData","forwardRef"]}
+{"version":3,"sources":["../../../../../src/runtimes/react/components/ElementData.tsx"],"sourcesContent":["import { Ref, forwardRef, memo, ReactNode } from 'react'\nimport { ElementData as ReactPageElementData } from '../../../state/react-page'\nimport { useBuiltinSuspense } from '../hooks/use-builtin-suspense'\nimport { useComponent } from '../hooks/use-component'\nimport { canAcceptRef } from '../utils/can-accept-ref'\nimport { FallbackComponent } from '../../../components/shared/FallbackComponent'\nimport { ResolveProps } from '../controls'\nimport { ActivityOrFallback } from './activity-with-fallback'\n\ntype ElementDataProps = {\n  elementData: ReactPageElementData\n}\n\nexport const ElementData = memo(\n  forwardRef(function ElementData({ elementData }: ElementDataProps, ref: Ref<unknown>): ReactNode {\n    const Component = useComponent(elementData.type)\n    const builtinSuspense = useBuiltinSuspense(elementData.type)\n\n    if (Component == null) {\n      console.warn(`Unknown component '${elementData.type}'`, { elementData })\n      return <FallbackComponent ref={ref as Ref<HTMLDivElement>} text=\"Component not found\" />\n    }\n\n    const forwardRef = canAcceptRef(Component)\n\n    return (\n      <ActivityOrFallback suspenseFallback={builtinSuspense}>\n        <ResolveProps element={elementData}>\n          {props =>\n            forwardRef ? (\n              <Component {...props} key={elementData.key} ref={ref} />\n            ) : (\n              <Component {...props} key={elementData.key} />\n            )\n          }\n        </ResolveProps>\n      </ActivityOrFallback>\n    )\n  }),\n)\n"],"mappings":";;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAoBa;AAUC;AA9Bd,IAAAA,gBAAiD;AAEjD,kCAAmC;AACnC,2BAA6B;AAC7B,4BAA6B;AAC7B,+BAAkC;AAClC,sBAA6B;AAC7B,oCAAmC;AAM5B,MAAM,kBAAc;AAAA,MACzB,0BAAW,SAASC,aAAY,EAAE,YAAY,GAAqB,KAA8B;AAC/F,UAAM,gBAAY,mCAAa,YAAY,IAAI;AAC/C,UAAM,sBAAkB,gDAAmB,YAAY,IAAI;AAE3D,QAAI,aAAa,MAAM;AACrB,cAAQ,KAAK,sBAAsB,YAAY,IAAI,KAAK,EAAE,YAAY,CAAC;AACvE,aAAO,4CAAC,8CAAkB,KAAiC,MAAK,uBAAsB;AAAA,IACxF;AAEA,UAAMC,kBAAa,oCAAa,SAAS;AAEzC,WACE,4CAAC,oDAAmB,kBAAkB,iBACpC,sDAAC,gCAAa,SAAS,aACpB,qBACCA,cACE,gDAAC,aAAW,GAAG,OAAO,KAAK,YAAY,KAAK,KAAU,IAEtD,gDAAC,aAAW,GAAG,OAAO,KAAK,YAAY,KAAK,GAGlD,GACF;AAAA,EAEJ,CAAC;AACH;","names":["import_react","ElementData","forwardRef"]}