@makeswift/runtime 0.25.0-canary.8 → 0.25.0

package/dist/esm/components/builtin/Image/Image.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../../../src/components/builtin/Image/Image.tsx"],"sourcesContent":["'use client'\n\nimport { useState, useEffect, Ref, forwardRef } from 'react'\nimport NextImage from 'next/image'\nimport type NextLegacyImageType from 'next/legacy/image'\n\nimport {\n  LinkData,\n  ResponsiveLengthData,\n  ImageData,\n  ResponsiveOpacityValue,\n} from '@makeswift/prop-controllers'\nimport { type Breakpoints, findBreakpointOverride } from '@makeswift/controls'\n\nimport { placeholders } from '../../utils/placeholders'\nimport { Link } from '../../shared/Link'\nimport { cx } from '@emotion/css'\nimport { useStyle } from '../../../runtimes/react/use-style'\nimport { useResponsiveStyle, useResponsiveWidth } from '../../utils/responsive-style'\nimport { useFile } from '../../../runtimes/react/hooks/makeswift-api'\nimport { major as nextMajorVersion } from '../../../next/next-version'\nimport { useBreakpoints } from '../../../runtimes/react/hooks/use-breakpoints'\nimport { match, P } from 'ts-pattern'\n\nconst NextLegacyImage = NextImage as typeof NextLegacyImageType\n\ntype Props = {\n  id?: string\n  file?: ImageData\n  altText?: string\n  link?: LinkData\n  width?: ResponsiveLengthData\n  margin?: string\n  padding?: string\n  border?: string\n  borderRadius?: string\n  boxShadow?: string\n  opacity?: ResponsiveOpacityValue\n  placeholder?: { src: string; dimensions: { width: number; height: number } }\n  className?: string\n  priority?: boolean\n}\n\nfunction loadImage(src: string): Promise<HTMLImageElement> {\n  return new Promise<HTMLImageElement>((resolve, reject) => {\n    const image = new Image()\n\n    image.onload = () => resolve(image)\n    image.onerror = reject\n    image.src = src\n  })\n}\n\nfunction imageSizes(breakpoints: Breakpoints, width?: Props['width']): string {\n  const baseDevice = breakpoints.find(breakpoint => breakpoint.maxWidth == null)\n  const baseWidth = baseDevice && width && findBreakpointOverride(breakpoints, width, baseDevice.id)\n  const baseWidthSize =\n    baseWidth == null || baseWidth.value.unit !== 'px' ? '100vw' : `${baseWidth.value.value}px`\n\n  return breakpoints\n    .map(breakpoint => {\n      const override = findBreakpointOverride(breakpoints, width, breakpoint.id)\n\n      if (override == null || breakpoint.maxWidth == null || override.value.unit !== 'px') {\n        return null\n      }\n\n      return `(max-width: ${breakpoint.maxWidth}px) ${Math.min(\n        breakpoint.maxWidth,\n        override.value.value,\n      )}px`\n    })\n    .filter((size): size is NonNullable<typeof size> => size != null)\n    .reduce((sourceSizes, sourceSize) => `${sourceSize}, ${sourceSizes}`, baseWidthSize)\n}\n\ntype Dimensions = {\n  width: number\n  height: number\n}\n\nconst ImageComponent = forwardRef(function Image(\n  {\n    id,\n    width,\n    margin,\n    padding,\n    file,\n    border,\n    borderRadius,\n    altText,\n    link,\n    opacity,\n    boxShadow,\n    placeholder = placeholders.image,\n    className,\n    priority,\n  }: Props,\n  ref: Ref<HTMLAnchorElement & HTMLDivElement>,\n) {\n  const fileId = match(file)\n    .with(P.string, v => v)\n    .with({ type: 'makeswift-file', version: 1 }, v => v.id)\n    .otherwise(() => null)\n  const fileData = useFile(fileId)\n  const imageSrc = match([file, fileData])\n    .with([P.any, P.not(P.nullish)], ([, fileData]) => fileData.publicUrl)\n    .with([{ type: 'external-file', version: 1 }, P.any], ([file]) => file.url)\n    .otherwise(() => placeholder.src)\n  const dataDimensions = match([file, fileData, imageSrc])\n    .with(\n      [{ type: 'external-file', version: 1, width: P.number, height: P.number }, P.any, P.any],\n      ([externalFile]) => ({ width: externalFile.width, height: externalFile.height }),\n    )\n    .with([P.any, P.not(P.nullish), P.any], ([, data]) => data.dimensions)\n    .with([P.any, P.any, placeholder.src], () => placeholder.dimensions)\n    .otherwise(() => null)\n  const [measuredDimensions, setMeasuredDimensions] = useState<Dimensions | null>(null)\n  const breakpoints = useBreakpoints()\n\n  useEffect(() => {\n    if (dataDimensions) return\n\n    let cleanedUp = false\n\n    loadImage(imageSrc)\n      .then(image => {\n        if (!cleanedUp) {\n          setMeasuredDimensions({ width: image.naturalWidth, height: image.naturalHeight })\n        }\n      })\n      .catch(console.error)\n\n    return () => {\n      cleanedUp = true\n    }\n  }, [dataDimensions, imageSrc])\n\n  const dimensions = dataDimensions ?? measuredDimensions\n  const Container = link ? Link : 'div'\n  const containerClassName = cx(\n    useStyle({ lineHeight: 0, overflow: 'hidden' }),\n    useStyle(useResponsiveWidth(width, dimensions?.width)),\n    useStyle(useResponsiveStyle([opacity] as const, ([opacity = 1]) => ({ opacity }))),\n    margin,\n    padding,\n    border,\n    borderRadius,\n    boxShadow,\n    className,\n  )\n\n  if (!dimensions) return null\n\n  return (\n    <Container link={link} ref={ref} id={id} className={containerClassName}>\n      {nextMajorVersion < 13 ? (\n        <NextLegacyImage\n          layout=\"responsive\"\n          src={imageSrc}\n          sizes={imageSizes(breakpoints, width)}\n          alt={altText}\n          width={dimensions.width}\n          height={dimensions.height}\n          priority={priority}\n        />\n      ) : (\n        <NextImage\n          src={imageSrc}\n          priority={priority}\n          sizes={imageSizes(breakpoints, width)}\n          alt={altText ?? ''}\n          width={dimensions.width}\n          height={dimensions.height}\n          style={{\n            width: '100%',\n            height: 'auto',\n          }}\n        />\n      )}\n    </Container>\n  )\n})\n\nexport default ImageComponent\n"],"mappings":"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","names":["Image","fileData","file","opacity"]}
+{"version":3,"sources":["../../../../../src/components/builtin/Image/Image.tsx"],"sourcesContent":["'use client'\n\nimport { useState, useEffect, Ref, forwardRef } from 'react'\n\nimport {\n  LinkData,\n  ResponsiveLengthData,\n  ImageData,\n  ResponsiveOpacityValue,\n} from '@makeswift/prop-controllers'\nimport { type Breakpoints, findBreakpointOverride } from '@makeswift/controls'\n\nimport { placeholders } from '../../utils/placeholders'\nimport { Link } from '../../shared/Link'\nimport { cx } from '@emotion/css'\nimport { useStyle } from '../../../runtimes/react/use-style'\nimport { useResponsiveStyle, useResponsiveWidth } from '../../utils/responsive-style'\nimport { useFile } from '../../../runtimes/react/hooks/makeswift-api'\nimport { useBreakpoints } from '../../../runtimes/react/hooks/use-breakpoints'\nimport { useFrameworkContext } from '../../../runtimes/react/components/hooks/use-framework-context'\nimport { match, P } from 'ts-pattern'\n\ntype Props = {\n  id?: string\n  file?: ImageData\n  altText?: string\n  link?: LinkData\n  width?: ResponsiveLengthData\n  margin?: string\n  padding?: string\n  border?: string\n  borderRadius?: string\n  boxShadow?: string\n  opacity?: ResponsiveOpacityValue\n  placeholder?: { src: string; dimensions: { width: number; height: number } }\n  className?: string\n  priority?: boolean\n}\n\nfunction loadImage(src: string): Promise<HTMLImageElement> {\n  return new Promise<HTMLImageElement>((resolve, reject) => {\n    const image = new Image()\n\n    image.onload = () => resolve(image)\n    image.onerror = reject\n    image.src = src\n  })\n}\n\nfunction imageSizes(breakpoints: Breakpoints, width?: Props['width']): string {\n  const baseDevice = breakpoints.find(breakpoint => breakpoint.maxWidth == null)\n  const baseWidth = baseDevice && width && findBreakpointOverride(breakpoints, width, baseDevice.id)\n  const baseWidthSize =\n    baseWidth == null || baseWidth.value.unit !== 'px' ? '100vw' : `${baseWidth.value.value}px`\n\n  return breakpoints\n    .map(breakpoint => {\n      const override = findBreakpointOverride(breakpoints, width, breakpoint.id)\n\n      if (override == null || breakpoint.maxWidth == null || override.value.unit !== 'px') {\n        return null\n      }\n\n      return `(max-width: ${breakpoint.maxWidth}px) ${Math.min(\n        breakpoint.maxWidth,\n        override.value.value,\n      )}px`\n    })\n    .filter((size): size is NonNullable<typeof size> => size != null)\n    .reduce((sourceSizes, sourceSize) => `${sourceSize}, ${sourceSizes}`, baseWidthSize)\n}\n\ntype Dimensions = {\n  width: number\n  height: number\n}\n\nconst ImageComponent = forwardRef(function Image(\n  {\n    id,\n    width,\n    margin,\n    padding,\n    file,\n    border,\n    borderRadius,\n    altText,\n    link,\n    opacity,\n    boxShadow,\n    placeholder = placeholders.image,\n    className,\n    priority,\n  }: Props,\n  ref: Ref<HTMLAnchorElement & HTMLDivElement>,\n) {\n  const fileId = match(file)\n    .with(P.string, v => v)\n    .with({ type: 'makeswift-file', version: 1 }, v => v.id)\n    .otherwise(() => null)\n  const fileData = useFile(fileId)\n  const imageSrc = match([file, fileData])\n    .with([P.any, P.not(P.nullish)], ([, fileData]) => fileData.publicUrl)\n    .with([{ type: 'external-file', version: 1 }, P.any], ([file]) => file.url)\n    .otherwise(() => placeholder.src)\n  const dataDimensions = match([file, fileData, imageSrc])\n    .with(\n      [{ type: 'external-file', version: 1, width: P.number, height: P.number }, P.any, P.any],\n      ([externalFile]) => ({ width: externalFile.width, height: externalFile.height }),\n    )\n    .with([P.any, P.not(P.nullish), P.any], ([, data]) => data.dimensions)\n    .with([P.any, P.any, placeholder.src], () => placeholder.dimensions)\n    .otherwise(() => null)\n  const [measuredDimensions, setMeasuredDimensions] = useState<Dimensions | null>(null)\n  const breakpoints = useBreakpoints()\n\n  useEffect(() => {\n    if (dataDimensions) return\n\n    let cleanedUp = false\n\n    loadImage(imageSrc)\n      .then(image => {\n        if (!cleanedUp) {\n          setMeasuredDimensions({ width: image.naturalWidth, height: image.naturalHeight })\n        }\n      })\n      .catch(console.error)\n\n    return () => {\n      cleanedUp = true\n    }\n  }, [dataDimensions, imageSrc])\n\n  const dimensions = dataDimensions ?? measuredDimensions\n  const Container = link ? Link : 'div'\n  const containerClassName = cx(\n    useStyle({ lineHeight: 0, overflow: 'hidden' }),\n    useStyle(useResponsiveWidth(width, dimensions?.width)),\n    useStyle(useResponsiveStyle([opacity] as const, ([opacity = 1]) => ({ opacity }))),\n    margin,\n    padding,\n    border,\n    borderRadius,\n    boxShadow,\n    className,\n  )\n\n  const { Image } = useFrameworkContext()\n\n  if (!dimensions) return null\n\n  return (\n    <Container link={link} ref={ref} id={id} className={containerClassName}>\n      <Image\n        src={imageSrc}\n        priority={priority}\n        sizes={imageSizes(breakpoints, width)}\n        alt={altText ?? ''}\n        width={dimensions.width}\n        height={dimensions.height}\n        style={{\n          width: '100%',\n          height: 'auto',\n        }}\n      />\n    </Container>\n  )\n})\n\nexport default ImageComponent\n"],"mappings":"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","names":["Image","fileData","file","opacity"]}

package/dist/esm/components/builtin/Root/Root.js

@@ -1,13 +1,13 @@
 import { jsx } from "react/jsx-runtime";
 import { normalize } from "polished";
 import { forwardRef } from "react";
-import Placeholder from "./components/Placeholder";
 import { Element } from "../../../runtimes/react";
-import BackgroundsContainer from "../../shared/BackgroundsContainer";
 import { useGlobalStyle } from "../../../runtimes/react/use-global-style";
-import { GridItem } from "../../shared/grid-item";
 import { useStyle } from "../../../runtimes/react/use-style";
-import { useCSSResetEnabled } from "../../../next/root-style-registry";
+import { useCSSResetEnabled } from "../../../runtimes/react/root-style-registry";
+import { GridItem } from "../../shared/grid-item";
+import BackgroundsContainer from "../../shared/BackgroundsContainer";
+import Placeholder from "./components/Placeholder";
 const Root = forwardRef(function Page({ children, backgrounds, rowGap, columnGap }, ref) {
   const cssResetEnabled = useCSSResetEnabled();
   useGlobalStyle(

package/dist/esm/components/builtin/Root/Root.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../../../src/components/builtin/Root/Root.tsx"],"sourcesContent":["import { normalize } from 'polished'\nimport { forwardRef, Ref } from 'react'\n\nimport Placeholder from './components/Placeholder'\nimport { Element } from '../../../runtimes/react'\nimport BackgroundsContainer from '../../shared/BackgroundsContainer'\nimport { useGlobalStyle } from '../../../runtimes/react/use-global-style'\nimport { GridItem } from '../../shared/grid-item'\nimport { useStyle } from '../../../runtimes/react/use-style'\nimport { GridData, ResponsiveBackgroundsData, ResponsiveGapData } from '@makeswift/prop-controllers'\nimport { useCSSResetEnabled } from '../../../next/root-style-registry'\n\ntype Props = {\n  children?: GridData\n  backgrounds?: ResponsiveBackgroundsData\n  rowGap?: ResponsiveGapData\n  columnGap?: ResponsiveGapData\n}\n\nconst Root = forwardRef(function Page(\n  { children, backgrounds, rowGap, columnGap }: Props,\n  ref: Ref<HTMLDivElement>,\n) {\n  const cssResetEnabled = useCSSResetEnabled()\n\n  useGlobalStyle(\n    cssResetEnabled\n      ? [\n          { html: { boxSizing: 'border-box' }, '*, *::before, *::after': { boxSizing: 'inherit' } },\n          normalize(),\n        ]\n      : [],\n  )\n\n  return (\n    <BackgroundsContainer ref={ref} style={{ background: 'white' }} backgrounds={backgrounds}>\n      <div className={useStyle({ display: 'flex', flexWrap: 'wrap', width: '100%' })}>\n        {children && children.elements.length > 0 ? (\n          children.elements.map((child, index) => (\n            <GridItem\n              key={child.key}\n              grid={children.columns}\n              index={index}\n              columnGap={columnGap}\n              rowGap={rowGap}\n            >\n              <Element element={child} />\n            </GridItem>\n          ))\n        ) : (\n          <Placeholder />\n        )}\n      </div>\n    </BackgroundsContainer>\n  )\n})\n\nexport default Root\n"],"mappings":"AA8Cc;AA9Cd,SAAS,iBAAiB;AAC1B,SAAS,kBAAuB;AAEhC,OAAO,iBAAiB;AACxB,SAAS,eAAe;AACxB,OAAO,0BAA0B;AACjC,SAAS,sBAAsB;AAC/B,SAAS,gBAAgB;AACzB,SAAS,gBAAgB;AAEzB,SAAS,0BAA0B;AASnC,MAAM,OAAO,WAAW,SAAS,KAC/B,EAAE,UAAU,aAAa,QAAQ,UAAU,GAC3C,KACA;AACA,QAAM,kBAAkB,mBAAmB;AAE3C;AAAA,IACE,kBACI;AAAA,MACE,EAAE,MAAM,EAAE,WAAW,aAAa,GAAG,0BAA0B,EAAE,WAAW,UAAU,EAAE;AAAA,MACxF,UAAU;AAAA,IACZ,IACA,CAAC;AAAA,EACP;AAEA,SACE,oBAAC,wBAAqB,KAAU,OAAO,EAAE,YAAY,QAAQ,GAAG,aAC9D,8BAAC,SAAI,WAAW,SAAS,EAAE,SAAS,QAAQ,UAAU,QAAQ,OAAO,OAAO,CAAC,GAC1E,sBAAY,SAAS,SAAS,SAAS,IACtC,SAAS,SAAS,IAAI,CAAC,OAAO,UAC5B;AAAA,IAAC;AAAA;AAAA,MAEC,MAAM,SAAS;AAAA,MACf;AAAA,MACA;AAAA,MACA;AAAA,MAEA,8BAAC,WAAQ,SAAS,OAAO;AAAA;AAAA,IANpB,MAAM;AAAA,EAOb,CACD,IAED,oBAAC,eAAY,GAEjB,GACF;AAEJ,CAAC;AAED,IAAO,eAAQ;","names":[]}
+{"version":3,"sources":["../../../../../src/components/builtin/Root/Root.tsx"],"sourcesContent":["import { normalize } from 'polished'\nimport { forwardRef, type Ref } from 'react'\n\nimport {\n  type GridData,\n  type ResponsiveBackgroundsData,\n  type ResponsiveGapData,\n} from '@makeswift/prop-controllers'\n\nimport { Element } from '../../../runtimes/react'\nimport { useGlobalStyle } from '../../../runtimes/react/use-global-style'\nimport { useStyle } from '../../../runtimes/react/use-style'\nimport { useCSSResetEnabled } from '../../../runtimes/react/root-style-registry'\n\nimport { GridItem } from '../../shared/grid-item'\nimport BackgroundsContainer from '../../shared/BackgroundsContainer'\n\nimport Placeholder from './components/Placeholder'\n\ntype Props = {\n  children?: GridData\n  backgrounds?: ResponsiveBackgroundsData\n  rowGap?: ResponsiveGapData\n  columnGap?: ResponsiveGapData\n}\n\nconst Root = forwardRef(function Page(\n  { children, backgrounds, rowGap, columnGap }: Props,\n  ref: Ref<HTMLDivElement>,\n) {\n  const cssResetEnabled = useCSSResetEnabled()\n\n  useGlobalStyle(\n    cssResetEnabled\n      ? [\n          { html: { boxSizing: 'border-box' }, '*, *::before, *::after': { boxSizing: 'inherit' } },\n          normalize(),\n        ]\n      : [],\n  )\n\n  return (\n    <BackgroundsContainer ref={ref} style={{ background: 'white' }} backgrounds={backgrounds}>\n      <div className={useStyle({ display: 'flex', flexWrap: 'wrap', width: '100%' })}>\n        {children && children.elements.length > 0 ? (\n          children.elements.map((child, index) => (\n            <GridItem\n              key={child.key}\n              grid={children.columns}\n              index={index}\n              columnGap={columnGap}\n              rowGap={rowGap}\n            >\n              <Element element={child} />\n            </GridItem>\n          ))\n        ) : (\n          <Placeholder />\n        )}\n      </div>\n    </BackgroundsContainer>\n  )\n})\n\nexport default Root\n"],"mappings":"AAqDc;AArDd,SAAS,iBAAiB;AAC1B,SAAS,kBAA4B;AAQrC,SAAS,eAAe;AACxB,SAAS,sBAAsB;AAC/B,SAAS,gBAAgB;AACzB,SAAS,0BAA0B;AAEnC,SAAS,gBAAgB;AACzB,OAAO,0BAA0B;AAEjC,OAAO,iBAAiB;AASxB,MAAM,OAAO,WAAW,SAAS,KAC/B,EAAE,UAAU,aAAa,QAAQ,UAAU,GAC3C,KACA;AACA,QAAM,kBAAkB,mBAAmB;AAE3C;AAAA,IACE,kBACI;AAAA,MACE,EAAE,MAAM,EAAE,WAAW,aAAa,GAAG,0BAA0B,EAAE,WAAW,UAAU,EAAE;AAAA,MACxF,UAAU;AAAA,IACZ,IACA,CAAC;AAAA,EACP;AAEA,SACE,oBAAC,wBAAqB,KAAU,OAAO,EAAE,YAAY,QAAQ,GAAG,aAC9D,8BAAC,SAAI,WAAW,SAAS,EAAE,SAAS,QAAQ,UAAU,QAAQ,OAAO,OAAO,CAAC,GAC1E,sBAAY,SAAS,SAAS,SAAS,IACtC,SAAS,SAAS,IAAI,CAAC,OAAO,UAC5B;AAAA,IAAC;AAAA;AAAA,MAEC,MAAM,SAAS;AAAA,MACf;AAAA,MACA;AAAA,MACA;AAAA,MAEA,8BAAC,WAAQ,SAAS,OAAO;AAAA;AAAA,IANpB,MAAM;AAAA,EAOb,CACD,IAED,oBAAC,eAAY,GAEjB,GACF;AAEJ,CAAC;AAED,IAAO,eAAQ;","names":[]}

package/dist/esm/components/builtin/Slot/Slot.js

@@ -1,7 +1,7 @@
 "use client";
 import { Fragment, jsx } from "react/jsx-runtime";
 import { useContext } from "react";
-import { PropsContext } from "../../../next/components/SlotProvider";
+import { PropsContext } from "../../../runtimes/react/components/SlotProvider";
 function Slot(props) {
   const ctx = useContext(PropsContext);
   return /* @__PURE__ */ jsx(Fragment, { children: props.showFallback ? ctx.fallback : props.children });

package/dist/esm/components/builtin/Slot/Slot.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../../../src/components/builtin/Slot/Slot.tsx"],"sourcesContent":["'use client'\n\nimport { ReactNode, useContext } from 'react'\nimport { PropsContext } from '../../../next/components/SlotProvider'\n\ntype Props = {\n  children: ReactNode\n  showFallback: boolean\n}\n\nfunction Slot(props: Props) {\n  const ctx = useContext(PropsContext)\n\n  return <>{props.showFallback ? ctx.fallback : props.children}</>\n}\n\nexport default Slot\n"],"mappings":";AAaS;AAXT,SAAoB,kBAAkB;AACtC,SAAS,oBAAoB;AAO7B,SAAS,KAAK,OAAc;AAC1B,QAAM,MAAM,WAAW,YAAY;AAEnC,SAAO,gCAAG,gBAAM,eAAe,IAAI,WAAW,MAAM,UAAS;AAC/D;AAEA,IAAO,eAAQ;","names":[]}
+{"version":3,"sources":["../../../../../src/components/builtin/Slot/Slot.tsx"],"sourcesContent":["'use client'\n\nimport { ReactNode, useContext } from 'react'\nimport { PropsContext } from '../../../runtimes/react/components/SlotProvider'\n\ntype Props = {\n  children: ReactNode\n  showFallback: boolean\n}\n\nfunction Slot(props: Props) {\n  const ctx = useContext(PropsContext)\n\n  return <>{props.showFallback ? ctx.fallback : props.children}</>\n}\n\nexport default Slot\n"],"mappings":";AAaS;AAXT,SAAoB,kBAAkB;AACtC,SAAS,oBAAoB;AAO7B,SAAS,KAAK,OAAc;AAC1B,QAAM,MAAM,WAAW,YAAY;AAEnC,SAAO,gCAAG,gBAAM,eAAe,IAAI,WAAW,MAAM,UAAS;AAC/D;AAEA,IAAO,eAAQ;","names":[]}

package/dist/esm/components/builtin/Video/Video.js

@@ -2,7 +2,7 @@
 import { jsx } from "react/jsx-runtime";
 import { cx } from "@emotion/css";
 import { forwardRef, useEffect, useState } from "react";
-import ReactPlayer from "react-player";
+import { ReactPlayer } from "../../shared/react-player";
 import { useStyle } from "../../../runtimes/react/use-style";
 import { placeholders } from "../../utils/placeholders";
 const ASPECT_RATIO = 16 / 9;

package/dist/esm/components/builtin/Video/Video.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../../../src/components/builtin/Video/Video.tsx"],"sourcesContent":["'use client'\n\nimport { cx } from '@emotion/css'\nimport { forwardRef, Ref, useEffect, useState } from 'react'\nimport ReactPlayer from 'react-player'\n\nimport { useStyle } from '../../../runtimes/react/use-style'\nimport { placeholders } from '../../utils/placeholders'\nimport { VideoData } from '@makeswift/prop-controllers'\n\ntype Props = {\n  id?: string\n  video?: VideoData\n  width?: string\n  margin?: string\n  borderRadius?: string\n}\n\nconst ASPECT_RATIO = 16 / 9\n\nconst Video = forwardRef(function Video(\n  { id, video, width, margin, borderRadius }: Props,\n  ref: Ref<HTMLDivElement>,\n) {\n  const canPlayUrl = video && video.url != null && ReactPlayer.canPlay(video.url)\n  /**\n   * @see https://github.com/cookpete/react-player/issues/1428\n   */\n  const [shouldRenderReactPlayer, setShouldRenderReactPlayer] = useState(false)\n\n  useEffect(() => {\n    setShouldRenderReactPlayer(true)\n  }, [])\n\n  return (\n    <div\n      ref={ref}\n      id={id}\n      className={cx(\n        useStyle({ display: 'flex', flexDirection: 'column', overflow: 'hidden' }),\n        width,\n        margin,\n        borderRadius,\n      )}\n    >\n      <div style={{ position: 'relative', paddingTop: `${100 / ASPECT_RATIO}%` }}>\n        <div style={{ position: 'absolute', top: 0, left: 0, right: 0, bottom: 0 }}>\n          {shouldRenderReactPlayer && canPlayUrl === true ? (\n            <ReactPlayer\n              {...video}\n              width=\"100%\"\n              height=\"100%\"\n              config={{\n                vimeo: { playerOptions: { background: video != null && !video.controls } },\n                wistia: {\n                  options: {\n                    endVideoBehavior: video != null && video.loop === true ? 'loop' : 'default',\n                  },\n                },\n              }}\n            />\n          ) : (\n            <img width=\"100%\" src={placeholders.video.src} alt=\"Video Placeholder\" />\n          )}\n        </div>\n      </div>\n    </div>\n  )\n})\n\nexport default Video\n"],"mappings":";AAgDY;AA9CZ,SAAS,UAAU;AACnB,SAAS,YAAiB,WAAW,gBAAgB;AACrD,OAAO,iBAAiB;AAExB,SAAS,gBAAgB;AACzB,SAAS,oBAAoB;AAW7B,MAAM,eAAe,KAAK;AAE1B,MAAM,QAAQ,WAAW,SAASA,OAChC,EAAE,IAAI,OAAO,OAAO,QAAQ,aAAa,GACzC,KACA;AACA,QAAM,aAAa,SAAS,MAAM,OAAO,QAAQ,YAAY,QAAQ,MAAM,GAAG;AAI9E,QAAM,CAAC,yBAAyB,0BAA0B,IAAI,SAAS,KAAK;AAE5E,YAAU,MAAM;AACd,+BAA2B,IAAI;AAAA,EACjC,GAAG,CAAC,CAAC;AAEL,SACE;AAAA,IAAC;AAAA;AAAA,MACC;AAAA,MACA;AAAA,MACA,WAAW;AAAA,QACT,SAAS,EAAE,SAAS,QAAQ,eAAe,UAAU,UAAU,SAAS,CAAC;AAAA,QACzE;AAAA,QACA;AAAA,QACA;AAAA,MACF;AAAA,MAEA,8BAAC,SAAI,OAAO,EAAE,UAAU,YAAY,YAAY,GAAG,MAAM,YAAY,IAAI,GACvE,8BAAC,SAAI,OAAO,EAAE,UAAU,YAAY,KAAK,GAAG,MAAM,GAAG,OAAO,GAAG,QAAQ,EAAE,GACtE,qCAA2B,eAAe,OACzC;AAAA,QAAC;AAAA;AAAA,UACE,GAAG;AAAA,UACJ,OAAM;AAAA,UACN,QAAO;AAAA,UACP,QAAQ;AAAA,YACN,OAAO,EAAE,eAAe,EAAE,YAAY,SAAS,QAAQ,CAAC,MAAM,SAAS,EAAE;AAAA,YACzE,QAAQ;AAAA,cACN,SAAS;AAAA,gBACP,kBAAkB,SAAS,QAAQ,MAAM,SAAS,OAAO,SAAS;AAAA,cACpE;AAAA,YACF;AAAA,UACF;AAAA;AAAA,MACF,IAEA,oBAAC,SAAI,OAAM,QAAO,KAAK,aAAa,MAAM,KAAK,KAAI,qBAAoB,GAE3E,GACF;AAAA;AAAA,EACF;AAEJ,CAAC;AAED,IAAO,gBAAQ;","names":["Video"]}
+{"version":3,"sources":["../../../../../src/components/builtin/Video/Video.tsx"],"sourcesContent":["'use client'\n\nimport { cx } from '@emotion/css'\nimport { forwardRef, Ref, useEffect, useState } from 'react'\n\nimport { ReactPlayer } from '../../shared/react-player'\nimport { useStyle } from '../../../runtimes/react/use-style'\nimport { placeholders } from '../../utils/placeholders'\nimport { VideoData } from '@makeswift/prop-controllers'\n\ntype Props = {\n  id?: string\n  video?: VideoData\n  width?: string\n  margin?: string\n  borderRadius?: string\n}\n\nconst ASPECT_RATIO = 16 / 9\n\nconst Video = forwardRef(function Video(\n  { id, video, width, margin, borderRadius }: Props,\n  ref: Ref<HTMLDivElement>,\n) {\n  const canPlayUrl = video && video.url != null && ReactPlayer.canPlay(video.url)\n  /**\n   * @see https://github.com/cookpete/react-player/issues/1428\n   */\n  const [shouldRenderReactPlayer, setShouldRenderReactPlayer] = useState(false)\n\n  useEffect(() => {\n    setShouldRenderReactPlayer(true)\n  }, [])\n\n  return (\n    <div\n      ref={ref}\n      id={id}\n      className={cx(\n        useStyle({ display: 'flex', flexDirection: 'column', overflow: 'hidden' }),\n        width,\n        margin,\n        borderRadius,\n      )}\n    >\n      <div style={{ position: 'relative', paddingTop: `${100 / ASPECT_RATIO}%` }}>\n        <div style={{ position: 'absolute', top: 0, left: 0, right: 0, bottom: 0 }}>\n          {shouldRenderReactPlayer && canPlayUrl === true ? (\n            <ReactPlayer\n              {...video}\n              width=\"100%\"\n              height=\"100%\"\n              config={{\n                vimeo: { playerOptions: { background: video != null && !video.controls } },\n                wistia: {\n                  options: {\n                    endVideoBehavior: video != null && video.loop === true ? 'loop' : 'default',\n                  },\n                },\n              }}\n            />\n          ) : (\n            <img width=\"100%\" src={placeholders.video.src} alt=\"Video Placeholder\" />\n          )}\n        </div>\n      </div>\n    </div>\n  )\n})\n\nexport default Video\n"],"mappings":";AAgDY;AA9CZ,SAAS,UAAU;AACnB,SAAS,YAAiB,WAAW,gBAAgB;AAErD,SAAS,mBAAmB;AAC5B,SAAS,gBAAgB;AACzB,SAAS,oBAAoB;AAW7B,MAAM,eAAe,KAAK;AAE1B,MAAM,QAAQ,WAAW,SAASA,OAChC,EAAE,IAAI,OAAO,OAAO,QAAQ,aAAa,GACzC,KACA;AACA,QAAM,aAAa,SAAS,MAAM,OAAO,QAAQ,YAAY,QAAQ,MAAM,GAAG;AAI9E,QAAM,CAAC,yBAAyB,0BAA0B,IAAI,SAAS,KAAK;AAE5E,YAAU,MAAM;AACd,+BAA2B,IAAI;AAAA,EACjC,GAAG,CAAC,CAAC;AAEL,SACE;AAAA,IAAC;AAAA;AAAA,MACC;AAAA,MACA;AAAA,MACA,WAAW;AAAA,QACT,SAAS,EAAE,SAAS,QAAQ,eAAe,UAAU,UAAU,SAAS,CAAC;AAAA,QACzE;AAAA,QACA;AAAA,QACA;AAAA,MACF;AAAA,MAEA,8BAAC,SAAI,OAAO,EAAE,UAAU,YAAY,YAAY,GAAG,MAAM,YAAY,IAAI,GACvE,8BAAC,SAAI,OAAO,EAAE,UAAU,YAAY,KAAK,GAAG,MAAM,GAAG,OAAO,GAAG,QAAQ,EAAE,GACtE,qCAA2B,eAAe,OACzC;AAAA,QAAC;AAAA;AAAA,UACE,GAAG;AAAA,UACJ,OAAM;AAAA,UACN,QAAO;AAAA,UACP,QAAQ;AAAA,YACN,OAAO,EAAE,eAAe,EAAE,YAAY,SAAS,QAAQ,CAAC,MAAM,SAAS,EAAE;AAAA,YACzE,QAAQ;AAAA,cACN,SAAS;AAAA,gBACP,kBAAkB,SAAS,QAAQ,MAAM,SAAS,OAAO,SAAS;AAAA,cACpE;AAAA,YACF;AAAA,UACF;AAAA;AAAA,MACF,IAEA,oBAAC,SAAI,OAAM,QAAO,KAAK,aAAa,MAAM,KAAK,KAAI,qBAAoB,GAE3E,GACF;AAAA;AAAA,EACF;AAEJ,CAAC;AAED,IAAO,gBAAQ;","names":["Video"]}

package/dist/esm/components/hooks/useMediaQuery.js

@@ -1,5 +1,4 @@
-import { useSyncExternalStore } from "use-sync-external-store/shim";
-import { useCallback } from "react";
+import { useCallback, useSyncExternalStore } from "react";
 import {
   findBreakpointOverride,
   getBaseBreakpoint,

package/dist/esm/components/hooks/useMediaQuery.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../../src/components/hooks/useMediaQuery.ts"],"sourcesContent":["import { useSyncExternalStore } from 'use-sync-external-store/shim'\nimport { useCallback } from 'react'\n\nimport {\n  type Breakpoints,\n  type DeviceOverride,\n  findBreakpointOverride,\n  getBaseBreakpoint,\n  getBreakpointMediaQuery,\n} from '@makeswift/controls'\n\nimport { useBreakpoints } from '../../runtimes/react/hooks/use-breakpoints'\n\nconst getDeviceQueries = (breakpoints: Breakpoints) =>\n  breakpoints.map(device => ({\n    id: device.id,\n    query: getBreakpointMediaQuery(device).replace('@media', ''),\n  }))\n\nexport function useMediaQuery<S>(responsiveValue?: Array<DeviceOverride<S>>): S | undefined {\n  const breakpoints = useBreakpoints()\n  const baseBreakpointId = getBaseBreakpoint(breakpoints).id\n  const subscribe = useCallback(\n    (notify: () => void) => {\n      const cleanUpFns = getDeviceQueries(breakpoints).map(q => {\n        const mediaQueryList = window.matchMedia(q.query)\n        mediaQueryList.addEventListener('change', notify)\n        return () => mediaQueryList.removeEventListener('change', notify)\n      })\n      return () => cleanUpFns.forEach(fn => fn())\n    },\n    [breakpoints],\n  )\n  const getServerSnapshot = () =>\n    findBreakpointOverride(breakpoints, responsiveValue, baseBreakpointId)?.value\n\n  function getSnapshot() {\n    const deviceId: string = getDeviceQueries(breakpoints).reduce(\n      (matchedDevice, deviceQueries) => {\n        if (window.matchMedia(deviceQueries.query).matches) {\n          return deviceQueries.id\n        }\n        return matchedDevice\n      },\n      baseBreakpointId,\n    )\n    return findBreakpointOverride(breakpoints, responsiveValue, deviceId)?.value\n  }\n\n  return useSyncExternalStore(subscribe, getSnapshot, getServerSnapshot)\n}\n"],"mappings":"AAAA,SAAS,4BAA4B;AACrC,SAAS,mBAAmB;AAE5B;AAAA,EAGE;AAAA,EACA;AAAA,EACA;AAAA,OACK;AAEP,SAAS,sBAAsB;AAE/B,MAAM,mBAAmB,CAAC,gBACxB,YAAY,IAAI,aAAW;AAAA,EACzB,IAAI,OAAO;AAAA,EACX,OAAO,wBAAwB,MAAM,EAAE,QAAQ,UAAU,EAAE;AAC7D,EAAE;AAEG,SAAS,cAAiB,iBAA2D;AAC1F,QAAM,cAAc,eAAe;AACnC,QAAM,mBAAmB,kBAAkB,WAAW,EAAE;AACxD,QAAM,YAAY;AAAA,IAChB,CAAC,WAAuB;AACtB,YAAM,aAAa,iBAAiB,WAAW,EAAE,IAAI,OAAK;AACxD,cAAM,iBAAiB,OAAO,WAAW,EAAE,KAAK;AAChD,uBAAe,iBAAiB,UAAU,MAAM;AAChD,eAAO,MAAM,eAAe,oBAAoB,UAAU,MAAM;AAAA,MAClE,CAAC;AACD,aAAO,MAAM,WAAW,QAAQ,QAAM,GAAG,CAAC;AAAA,IAC5C;AAAA,IACA,CAAC,WAAW;AAAA,EACd;AACA,QAAM,oBAAoB,MACxB,uBAAuB,aAAa,iBAAiB,gBAAgB,GAAG;AAE1E,WAAS,cAAc;AACrB,UAAM,WAAmB,iBAAiB,WAAW,EAAE;AAAA,MACrD,CAAC,eAAe,kBAAkB;AAChC,YAAI,OAAO,WAAW,cAAc,KAAK,EAAE,SAAS;AAClD,iBAAO,cAAc;AAAA,QACvB;AACA,eAAO;AAAA,MACT;AAAA,MACA;AAAA,IACF;AACA,WAAO,uBAAuB,aAAa,iBAAiB,QAAQ,GAAG;AAAA,EACzE;AAEA,SAAO,qBAAqB,WAAW,aAAa,iBAAiB;AACvE;","names":[]}
+{"version":3,"sources":["../../../../src/components/hooks/useMediaQuery.ts"],"sourcesContent":["import { useCallback, useSyncExternalStore } from 'react'\nimport {\n  type Breakpoints,\n  type DeviceOverride,\n  findBreakpointOverride,\n  getBaseBreakpoint,\n  getBreakpointMediaQuery,\n} from '@makeswift/controls'\n\nimport { useBreakpoints } from '../../runtimes/react/hooks/use-breakpoints'\n\nconst getDeviceQueries = (breakpoints: Breakpoints) =>\n  breakpoints.map(device => ({\n    id: device.id,\n    query: getBreakpointMediaQuery(device).replace('@media', ''),\n  }))\n\nexport function useMediaQuery<S>(responsiveValue?: Array<DeviceOverride<S>>): S | undefined {\n  const breakpoints = useBreakpoints()\n  const baseBreakpointId = getBaseBreakpoint(breakpoints).id\n  const subscribe = useCallback(\n    (notify: () => void) => {\n      const cleanUpFns = getDeviceQueries(breakpoints).map(q => {\n        const mediaQueryList = window.matchMedia(q.query)\n        mediaQueryList.addEventListener('change', notify)\n        return () => mediaQueryList.removeEventListener('change', notify)\n      })\n      return () => cleanUpFns.forEach(fn => fn())\n    },\n    [breakpoints],\n  )\n  const getServerSnapshot = () =>\n    findBreakpointOverride(breakpoints, responsiveValue, baseBreakpointId)?.value\n\n  function getSnapshot() {\n    const deviceId: string = getDeviceQueries(breakpoints).reduce(\n      (matchedDevice, deviceQueries) => {\n        if (window.matchMedia(deviceQueries.query).matches) {\n          return deviceQueries.id\n        }\n        return matchedDevice\n      },\n      baseBreakpointId,\n    )\n    return findBreakpointOverride(breakpoints, responsiveValue, deviceId)?.value\n  }\n\n  return useSyncExternalStore(subscribe, getSnapshot, getServerSnapshot)\n}\n"],"mappings":"AAAA,SAAS,aAAa,4BAA4B;AAClD;AAAA,EAGE;AAAA,EACA;AAAA,EACA;AAAA,OACK;AAEP,SAAS,sBAAsB;AAE/B,MAAM,mBAAmB,CAAC,gBACxB,YAAY,IAAI,aAAW;AAAA,EACzB,IAAI,OAAO;AAAA,EACX,OAAO,wBAAwB,MAAM,EAAE,QAAQ,UAAU,EAAE;AAC7D,EAAE;AAEG,SAAS,cAAiB,iBAA2D;AAC1F,QAAM,cAAc,eAAe;AACnC,QAAM,mBAAmB,kBAAkB,WAAW,EAAE;AACxD,QAAM,YAAY;AAAA,IAChB,CAAC,WAAuB;AACtB,YAAM,aAAa,iBAAiB,WAAW,EAAE,IAAI,OAAK;AACxD,cAAM,iBAAiB,OAAO,WAAW,EAAE,KAAK;AAChD,uBAAe,iBAAiB,UAAU,MAAM;AAChD,eAAO,MAAM,eAAe,oBAAoB,UAAU,MAAM;AAAA,MAClE,CAAC;AACD,aAAO,MAAM,WAAW,QAAQ,QAAM,GAAG,CAAC;AAAA,IAC5C;AAAA,IACA,CAAC,WAAW;AAAA,EACd;AACA,QAAM,oBAAoB,MACxB,uBAAuB,aAAa,iBAAiB,gBAAgB,GAAG;AAE1E,WAAS,cAAc;AACrB,UAAM,WAAmB,iBAAiB,WAAW,EAAE;AAAA,MACrD,CAAC,eAAe,kBAAkB;AAChC,YAAI,OAAO,WAAW,cAAc,KAAK,EAAE,SAAS;AAClD,iBAAO,cAAc;AAAA,QACvB;AACA,eAAO;AAAA,MACT;AAAA,MACA;AAAA,IACF;AACA,WAAO,uBAAuB,aAAa,iBAAiB,QAAQ,GAAG;AAAA,EACzE;AAEA,SAAO,qBAAqB,WAAW,aAAa,iBAAiB;AACvE;","names":[]}

package/dist/esm/components/shared/BackgroundsContainer/components/BackgroundVideo/index.js

@@ -1,7 +1,7 @@
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 import { cx } from "@emotion/css";
 import { useState, useRef, forwardRef } from "react";
-import ReactPlayer from "react-player";
+import { ReactPlayer } from "../../../react-player";
 import { useStyle } from "../../../../../runtimes/react/use-style";
 import { useIsomorphicLayoutEffect } from "../../../../hooks/useIsomorphicLayoutEffect";
 const Container = forwardRef(function Container2({ className, ...restOfProps }, ref) {

package/dist/esm/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'\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 } 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"]}

package/dist/esm/components/shared/BackgroundsContainer/components/Backgrounds/index.js

@@ -1,13 +1,11 @@
 import { Fragment, jsx } from "react/jsx-runtime";
 import { createElement } from "react";
-import NextImage from "next/image";
 import { colorToString } from "../../../../utils/colorToString";
 import Parallax from "../Parallax";
 import BackgroundVideo from "../BackgroundVideo";
 import { useStyle } from "../../../../../runtimes/react/use-style";
 import { useResponsiveStyle } from "../../../../utils/responsive-style";
-import { major as nextMajorVersion } from "../../../../../next/next-version";
-const NextLegacyImage = NextImage;
+import { useFrameworkContext } from "../../../../../runtimes/react/components/hooks/use-framework-context";
 function getColor(color) {
   if (color == null)
     return "black";
@@ -98,18 +96,10 @@ function ImageBackground({
 }) {
   const backgroundPosition = `${position.x}% ${position.y}%`;
   const containerClassName = useStyle(containerStyle);
+  const { Image } = useFrameworkContext();
   if (repeat === "no-repeat" && size !== "auto" && publicUrl != null) {
-    return /* @__PURE__ */ jsx(Parallax, { strength: parallax, children: (getParallaxProps) => /* @__PURE__ */ jsx("div", { ...getParallaxProps({ style: { opacity, overflow: "hidden" } }), children: nextMajorVersion < 13 ? /* @__PURE__ */ jsx(
-      NextLegacyImage,
-      {
-        src: publicUrl,
-        layout: "fill",
-        objectPosition: backgroundPosition,
-        objectFit: size,
-        priority
-      }
-    ) : /* @__PURE__ */ jsx(
-      NextImage,
+    return /* @__PURE__ */ jsx(Parallax, { strength: parallax, children: (getParallaxProps) => /* @__PURE__ */ jsx("div", { ...getParallaxProps({ style: { opacity, overflow: "hidden" } }), children: /* @__PURE__ */ jsx(
+      Image,
       {
         src: publicUrl,
         alt: "",

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../../../../../src/components/shared/BackgroundsContainer/components/Backgrounds/index.tsx"],"sourcesContent":["import NextImage from 'next/image'\nimport type NextLegacyImageType from 'next/legacy/image'\n\nimport { BackgroundsPropControllerValue, BackgroundsData } from '../../../../hooks'\nimport { ResponsiveValue } from '../../../../../prop-controllers'\nimport { ColorValue as Color } from '../../../../utils/types'\nimport { colorToString } from '../../../../utils/colorToString'\nimport Parallax from '../Parallax'\nimport BackgroundVideo from '../BackgroundVideo'\nimport { CSSObject } from '@emotion/css'\nimport { useStyle } from '../../../../../runtimes/react/use-style'\nimport { useResponsiveStyle } from '../../../../utils/responsive-style'\nimport { major as nextMajorVersion } from '../../../../../next/next-version'\n\nconst NextLegacyImage = NextImage as typeof NextLegacyImageType\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\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            {nextMajorVersion < 13 ? (\n              <NextLegacyImage\n                src={publicUrl}\n                layout=\"fill\"\n                objectPosition={backgroundPosition}\n                objectFit={size}\n                priority={priority}\n              />\n            ) : (\n              <NextImage\n                src={publicUrl}\n                alt={''}\n                fill\n                sizes=\"100vw\"\n                style={{\n                  objectPosition: backgroundPosition,\n                  objectFit: size,\n                }}\n                priority={priority}\n              />\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":[]}
+{"version":3,"sources":["../../../../../../../src/components/shared/BackgroundsContainer/components/Backgrounds/index.tsx"],"sourcesContent":["import { BackgroundsPropControllerValue, BackgroundsData } from '../../../../hooks'\nimport { ResponsiveValue } from '../../../../../prop-controllers'\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":[]}

package/dist/esm/components/shared/Link/index.js

@@ -1,19 +1,9 @@
 "use client";
 import { jsx } from "react/jsx-runtime";
 import { forwardRef } from "react";
-import NextLink from "next/link";
 import { Link as LinkDef } from "../../../controls/link";
-import { useIsPagesRouter } from "../../../next/hooks/use-is-pages-router";
 import { useResolvedValue } from "../../../runtimes/react/hooks/use-resolved-value";
-const isValidHref = (href) => {
-  try {
-    const bases = ["http://n", "https://n"];
-    bases.forEach((base) => new URL(href, base));
-  } catch (_) {
-    return false;
-  }
-  return true;
-};
+import { useFrameworkContext } from "../../../runtimes/react/components/hooks/use-framework-context";
 const Link = forwardRef(function Link2({ link, onClick = () => {
 }, ...restOfProps }, ref) {
   const {
@@ -32,23 +22,18 @@ const Link = forwardRef(function Link2({ link, onClick = () => {
       return event.preventDefault();
     return resolvedOnClick?.(event);
   }
-  const useNextLink = href != null && link && (link.type === "OPEN_PAGE" || link.type === "OPEN_URL" && isValidHref(link.payload.url));
-  const isPagesRouter = useIsPagesRouter();
-  if (useNextLink) {
-    return /* @__PURE__ */ jsx(
-      NextLink,
-      {
-        ...restOfProps,
-        ref,
-        target,
-        onClick: handleClick,
-        href,
-        ...isPagesRouter ? { locale: false } : {},
-        legacyBehavior: false
-      }
-    );
-  }
-  return /* @__PURE__ */ jsx("a", { ...restOfProps, ref, href, target, onClick: handleClick });
+  const { Link: LinkComponent } = useFrameworkContext();
+  return /* @__PURE__ */ jsx(
+    LinkComponent,
+    {
+      ...restOfProps,
+      linkType: link?.type,
+      ref,
+      href,
+      target,
+      onClick: handleClick
+    }
+  );
 });
 export {
   Link

package/dist/esm/components/shared/Link/index.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../../../src/components/shared/Link/index.tsx"],"sourcesContent":["'use client'\n\nimport { ComponentPropsWithoutRef, forwardRef, MouseEvent } from 'react'\nimport NextLink from 'next/link'\n\nimport { LinkData } from '@makeswift/prop-controllers'\n\nimport { Link as LinkDef } from '../../../controls/link'\n\nimport { useIsPagesRouter } from '../../../next/hooks/use-is-pages-router'\nimport { useResolvedValue } from '../../../runtimes/react/hooks/use-resolved-value'\n\ntype BaseProps = {\n  link?: LinkData\n  onClick?: (event: MouseEvent<HTMLAnchorElement>) => unknown\n}\n\ntype Props = BaseProps & Omit<ComponentPropsWithoutRef<'a'>, keyof BaseProps>\n\n// workaround for https://github.com/vercel/next.js/issues/66650\nconst isValidHref = (href: string) => {\n  try {\n    const bases = ['http://n', 'https://n']\n    // - if `href` is a relative path, it will be resolved relative to the base URL\n    // - if `href` is a full URL, the base URL will be ignored, even if there is a mismatch of protocols\n    // - if `href` is an incomplete, protocol-only URL with a protocol that\n    //   conflicts with one of the base URL, this will throw\n    bases.forEach(base => new URL(href, base))\n  } catch (_) {\n    return false\n  }\n  return true\n}\n\nexport const Link = forwardRef<HTMLAnchorElement, Props>(function Link(\n  { link, onClick = () => {}, ...restOfProps }: Props,\n  ref,\n) {\n  const {\n    href,\n    target,\n    onClick: resolvedOnClick,\n  } = useResolvedValue(link, (link, resourceResolver) =>\n    LinkDef().resolveValue(link, resourceResolver),\n  ) ?? {}\n\n  function handleClick(event: MouseEvent<HTMLAnchorElement>) {\n    onClick(event)\n\n    if (event.defaultPrevented) return\n\n    /**\n     * When we introduced `next/link` instead of just `a` element slate no longer prevented link from navigating within\n     * content mode. This is a hack to compensate for what would be expected as slate's default behavior.\n     * On upgrade of slate this can be reevaluated.\n     */\n    if (event.currentTarget.isContentEditable) return event.preventDefault()\n\n    return resolvedOnClick?.(event)\n  }\n\n  const useNextLink =\n    href != null &&\n    link &&\n    (link.type === 'OPEN_PAGE' || (link.type === 'OPEN_URL' && isValidHref(link.payload.url)))\n\n  const isPagesRouter = useIsPagesRouter()\n\n  if (useNextLink) {\n    return (\n      <NextLink\n        {...restOfProps}\n        ref={ref}\n        target={target}\n        onClick={handleClick}\n        href={href}\n        {...(isPagesRouter ? { locale: false } : {})}\n        // Next.js v12 has legacyBehavior set to true by default\n        legacyBehavior={false}\n      />\n    )\n  }\n\n  // eslint-disable-next-line\n  return <a {...restOfProps} ref={ref} href={href} target={target} onClick={handleClick} />\n})\n"],"mappings":";AAsEM;AApEN,SAAmC,kBAA8B;AACjE,OAAO,cAAc;AAIrB,SAAS,QAAQ,eAAe;AAEhC,SAAS,wBAAwB;AACjC,SAAS,wBAAwB;AAUjC,MAAM,cAAc,CAAC,SAAiB;AACpC,MAAI;AACF,UAAM,QAAQ,CAAC,YAAY,WAAW;AAKtC,UAAM,QAAQ,UAAQ,IAAI,IAAI,MAAM,IAAI,CAAC;AAAA,EAC3C,SAAS,GAAG;AACV,WAAO;AAAA,EACT;AACA,SAAO;AACT;AAEO,MAAM,OAAO,WAAqC,SAASA,MAChE,EAAE,MAAM,UAAU,MAAM;AAAC,GAAG,GAAG,YAAY,GAC3C,KACA;AACA,QAAM;AAAA,IACJ;AAAA,IACA;AAAA,IACA,SAAS;AAAA,EACX,IAAI;AAAA,IAAiB;AAAA,IAAM,CAACC,OAAM,qBAChC,QAAQ,EAAE,aAAaA,OAAM,gBAAgB;AAAA,EAC/C,KAAK,CAAC;AAEN,WAAS,YAAY,OAAsC;AACzD,YAAQ,KAAK;AAEb,QAAI,MAAM;AAAkB;AAO5B,QAAI,MAAM,cAAc;AAAmB,aAAO,MAAM,eAAe;AAEvE,WAAO,kBAAkB,KAAK;AAAA,EAChC;AAEA,QAAM,cACJ,QAAQ,QACR,SACC,KAAK,SAAS,eAAgB,KAAK,SAAS,cAAc,YAAY,KAAK,QAAQ,GAAG;AAEzF,QAAM,gBAAgB,iBAAiB;AAEvC,MAAI,aAAa;AACf,WACE;AAAA,MAAC;AAAA;AAAA,QACE,GAAG;AAAA,QACJ;AAAA,QACA;AAAA,QACA,SAAS;AAAA,QACT;AAAA,QACC,GAAI,gBAAgB,EAAE,QAAQ,MAAM,IAAI,CAAC;AAAA,QAE1C,gBAAgB;AAAA;AAAA,IAClB;AAAA,EAEJ;AAGA,SAAO,oBAAC,OAAG,GAAG,aAAa,KAAU,MAAY,QAAgB,SAAS,aAAa;AACzF,CAAC;","names":["Link","link"]}
+{"version":3,"sources":["../../../../../src/components/shared/Link/index.tsx"],"sourcesContent":["'use client'\n\nimport { ComponentPropsWithoutRef, forwardRef, MouseEvent } from 'react'\n\nimport { LinkData } from '@makeswift/prop-controllers'\n\nimport { Link as LinkDef } from '../../../controls/link'\n\nimport { useResolvedValue } from '../../../runtimes/react/hooks/use-resolved-value'\nimport { useFrameworkContext } from '../../../runtimes/react/components/hooks/use-framework-context'\n\ntype BaseProps = {\n  link?: LinkData\n  onClick?: (event: MouseEvent<HTMLAnchorElement>) => unknown\n}\n\ntype Props = BaseProps & Omit<ComponentPropsWithoutRef<'a'>, keyof BaseProps>\n\nexport const Link = forwardRef<HTMLAnchorElement, Props>(function Link(\n  { link, onClick = () => {}, ...restOfProps }: Props,\n  ref,\n) {\n  const {\n    href,\n    target,\n    onClick: resolvedOnClick,\n  } = useResolvedValue(link, (link, resourceResolver) =>\n    LinkDef().resolveValue(link, resourceResolver),\n  ) ?? {}\n\n  function handleClick(event: MouseEvent<HTMLAnchorElement>) {\n    onClick(event)\n\n    if (event.defaultPrevented) return\n\n    /**\n     * When we introduced `next/link` instead of just `a` element slate no longer prevented link from navigating within\n     * content mode. This is a hack to compensate for what would be expected as slate's default behavior.\n     * On upgrade of slate this can be reevaluated.\n     */\n    if (event.currentTarget.isContentEditable) return event.preventDefault()\n\n    return resolvedOnClick?.(event)\n  }\n\n  const { Link: LinkComponent } = useFrameworkContext()\n\n  return (\n    <LinkComponent\n      {...restOfProps}\n      linkType={link?.type}\n      ref={ref}\n      href={href}\n      target={target}\n      onClick={handleClick}\n    />\n  )\n})\n"],"mappings":";AAgDI;AA9CJ,SAAmC,kBAA8B;AAIjE,SAAS,QAAQ,eAAe;AAEhC,SAAS,wBAAwB;AACjC,SAAS,2BAA2B;AAS7B,MAAM,OAAO,WAAqC,SAASA,MAChE,EAAE,MAAM,UAAU,MAAM;AAAC,GAAG,GAAG,YAAY,GAC3C,KACA;AACA,QAAM;AAAA,IACJ;AAAA,IACA;AAAA,IACA,SAAS;AAAA,EACX,IAAI;AAAA,IAAiB;AAAA,IAAM,CAACC,OAAM,qBAChC,QAAQ,EAAE,aAAaA,OAAM,gBAAgB;AAAA,EAC/C,KAAK,CAAC;AAEN,WAAS,YAAY,OAAsC;AACzD,YAAQ,KAAK;AAEb,QAAI,MAAM;AAAkB;AAO5B,QAAI,MAAM,cAAc;AAAmB,aAAO,MAAM,eAAe;AAEvE,WAAO,kBAAkB,KAAK;AAAA,EAChC;AAEA,QAAM,EAAE,MAAM,cAAc,IAAI,oBAAoB;AAEpD,SACE;AAAA,IAAC;AAAA;AAAA,MACE,GAAG;AAAA,MACJ,UAAU,MAAM;AAAA,MAChB;AAAA,MACA;AAAA,MACA;AAAA,MACA,SAAS;AAAA;AAAA,EACX;AAEJ,CAAC;","names":["Link","link"]}

package/dist/esm/components/shared/react-player.js

@@ -0,0 +1,7 @@
+import Player from "react-player";
+import { esmCompat } from "../../utils/esm-compat";
+const ReactPlayer = esmCompat(Player);
+export {
+  ReactPlayer
+};
+//# sourceMappingURL=react-player.js.map

package/dist/esm/components/shared/react-player.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../../src/components/shared/react-player.ts"],"sourcesContent":["import Player from 'react-player'\n\nimport { esmCompat } from '../../utils/esm-compat'\n\n// Vite SSR/ESM compatibility; upgrading to the latest ESM-only version of\n// `react-player` removes the need for this workaround but breaks Jest\nexport const ReactPlayer = esmCompat(Player)\n"],"mappings":"AAAA,OAAO,YAAY;AAEnB,SAAS,iBAAiB;AAInB,MAAM,cAAc,UAAU,MAAM;","names":[]}

package/dist/esm/components/utils/responsive-style.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../../src/components/utils/responsive-style.ts"],"sourcesContent":["import { WidthProperty } from 'csstype'\nimport { CSSObject } from '@emotion/css'\n\nimport type { ResponsiveValueType as ExtractResponsiveValue } from '@makeswift/controls'\n\nimport type {\n  LengthData,\n  ResponsiveBorderRadiusData,\n  ResponsiveMarginData,\n  ResponsivePaddingData,\n  ResponsiveValue,\n  ResponsiveLengthData,\n  ResponsiveTextStyleData,\n} from '@makeswift/prop-controllers'\n\nimport {\n  type Breakpoints,\n  type FallbackStrategy,\n  join as joinResponsiveValues,\n  getBreakpoint,\n  getBreakpointMediaQuery,\n} from '@makeswift/controls'\n\nimport { useBreakpoints } from '../../runtimes/react/hooks/use-breakpoints'\n\nimport { getIndexes } from './columns'\nimport { PaddingPropertyData, paddingPropertyDataToStyle } from '../../css/padding'\nimport { MarginPropertyData, marginPropertyDataToStyle } from '../../css/margin'\nimport { BorderRadiusPropertyData, borderRadiusPropertyDataToStyle } from '../../css/border-radius'\nimport { BorderPropertyData, borderPropertyDataToStyle } from '../../css/border'\nimport { BorderPropControllerData } from '../hooks/useBorder'\nimport { colorToString } from './colorToString'\nimport { BoxShadow, ResponsiveBoxShadow } from '../hooks'\nimport { DropFirst } from './drop-first'\n\nexport function responsiveStyle<V, A extends ReadonlyArray<ResponsiveValue<V> | null | undefined>>(\n  breakpoints: Breakpoints,\n  responsiveValues: A,\n  join: (values: { [K in keyof A]: ExtractResponsiveValue<A[K]> | undefined }) => CSSObject,\n  strategy?: FallbackStrategy<V>,\n): CSSObject {\n  return joinResponsiveValues(breakpoints, responsiveValues, join, strategy).reduce(\n    (acc, { deviceId, value }) => {\n      const breakpoint = getBreakpoint(breakpoints, deviceId)\n      const mediaQuery = getBreakpointMediaQuery(breakpoint)\n\n      return {\n        ...acc,\n        [mediaQuery]: {\n          ...(acc[mediaQuery] as CSSObject),\n          ...value,\n        },\n      }\n    },\n    {} as CSSObject,\n  )\n}\n\nexport function useResponsiveStyle<\n  V,\n  A extends ReadonlyArray<ResponsiveValue<V> | null | undefined>,\n>(\n  responsiveValues: A,\n  join: (values: { [K in keyof A]: ExtractResponsiveValue<A[K]> | undefined }) => CSSObject,\n  strategy?: FallbackStrategy<V>,\n): CSSObject {\n  return responsiveStyle(useBreakpoints(), responsiveValues, join, strategy)\n}\n\nexport function responsiveWidth(\n  breakpoints: Breakpoints,\n  widthData: ResponsiveLengthData | undefined,\n  defaultValue: LengthData | WidthProperty<string | number> = '100%',\n): CSSObject {\n  return {\n    maxWidth: '100%',\n    ...responsiveStyle(breakpoints, [widthData], ([width = defaultValue]) => ({\n      width: typeof width === 'object' ? `${width.value}${width.unit}` : width,\n    })),\n  }\n}\n\nexport function useResponsiveWidth(\n  ...args: DropFirst<Parameters<typeof responsiveWidth>>\n): CSSObject {\n  return responsiveWidth(useBreakpoints(), ...args)\n}\n\nexport function responsivePadding(\n  breakpoints: Breakpoints,\n  paddingData: ResponsivePaddingData | undefined,\n  defaultValue: PaddingPropertyData = {} as PaddingPropertyData,\n): CSSObject {\n  return responsiveStyle(breakpoints, [paddingData], ([padding = {} as PaddingPropertyData]) =>\n    paddingPropertyDataToStyle(\n      padding,\n      Object.assign(\n        { paddingTop: 0, paddingRight: 0, paddingBottom: 0, paddingLeft: 0 },\n        defaultValue,\n      ),\n    ),\n  )\n}\n\nexport function useResponsivePadding(\n  ...args: DropFirst<Parameters<typeof responsivePadding>>\n): CSSObject {\n  return responsivePadding(useBreakpoints(), ...args)\n}\n\nexport function responsiveMargin(\n  breakpoints: Breakpoints,\n  marginData: ResponsiveMarginData | undefined,\n  defaultValue: MarginPropertyData = {} as MarginPropertyData,\n): CSSObject {\n  return responsiveStyle(breakpoints, [marginData], ([margin = {} as MarginPropertyData]) =>\n    marginPropertyDataToStyle(\n      margin,\n      Object.assign(\n        { marginTop: 0, marginRight: 'auto', marginBottom: 0, marginLeft: 'auto' },\n        defaultValue,\n      ),\n    ),\n  )\n}\n\nexport function useResponsiveMargin(\n  ...args: DropFirst<Parameters<typeof responsiveMargin>>\n): CSSObject {\n  return responsiveMargin(useBreakpoints(), ...args)\n}\n\nexport function responsiveBorderRadius(\n  breakpoints: Breakpoints,\n  borderRadiusData: ResponsiveBorderRadiusData | undefined,\n  defaultValue: BorderRadiusPropertyData = {} as BorderRadiusPropertyData,\n): CSSObject {\n  return responsiveStyle(breakpoints, [borderRadiusData], ([borderRadius = {}]) =>\n    borderRadiusPropertyDataToStyle(\n      borderRadius,\n      Object.assign(\n        {\n          borderTopLeftRadius: 0,\n          borderTopRightRadius: 0,\n          borderBottomRightRadius: 0,\n          borderBottomLeftRadius: 0,\n        },\n        defaultValue,\n      ),\n    ),\n  )\n}\n\nexport function useResponsiveBorderRadius(\n  ...args: DropFirst<Parameters<typeof responsiveBorderRadius>>\n): CSSObject {\n  return responsiveBorderRadius(useBreakpoints(), ...args)\n}\n\nexport function useResponsiveBorder(\n  borderData: BorderPropControllerData | undefined,\n  defaultValue: BorderPropertyData = {},\n): CSSObject {\n  return useResponsiveStyle([borderData], ([border = {}]) =>\n    borderPropertyDataToStyle(\n      border,\n      Object.assign(\n        {\n          borderTop: '0px solid black',\n          borderRight: '0px solid black',\n          borderBottom: '0px solid black',\n          borderLeft: '0px solid black',\n        },\n        defaultValue,\n      ),\n    ),\n  )\n}\n\nconst floor =\n  (d: number) =>\n  (v: number): number =>\n    Math.floor(10 ** d * v) / 10 ** d\n\nexport function responsiveGridItem(\n  breakpoints: Breakpoints,\n  props: {\n    grid: ResponsiveValue<{ spans: number[][]; count: number }>\n    index: number\n    columnGap?: ResponsiveValue<LengthData>\n    rowGap?: ResponsiveValue<LengthData>\n  },\n): CSSObject {\n  return {\n    display: 'flex',\n    ...responsiveStyle(\n      breakpoints,\n      [props.grid, props.columnGap, props.rowGap] as const,\n      ([\n        { spans, count } = { spans: [[12]], count: 12 },\n        columnGap = { value: 0, unit: 'px' },\n        rowGap = { value: 0, unit: 'px' },\n      ]) => {\n        const [rowIndex, columnIndex] = getIndexes(spans, props.index)\n        const firstCol = columnIndex === 0\n        const lastCol = columnIndex === spans[rowIndex].length - 1\n        const span = spans[rowIndex][columnIndex]\n        const fraction = floor(5)(span / count)\n        const width = `${fraction} * (100% + ${columnGap.value}${columnGap.unit})`\n        const excessWidth = `${Number(firstCol) + Number(lastCol)} * ${columnGap.value}${\n          columnGap.unit\n        } / 2`\n        const iePrecisionError = '0.01px'\n        const flexBasis = `calc(${width} - ${excessWidth} - ${iePrecisionError})`\n        const firstRow = rowIndex === 0\n        const lastRow = rowIndex === spans.length - 1\n\n        return span === 0\n          ? { display: 'none' }\n          : {\n              flexBasis,\n              minWidth: flexBasis,\n              // NOTE: IE11 width breaks without max width\n              // https://github.com/philipwalton/flexbugs/issues/3\n              maxWidth: flexBasis,\n              paddingLeft: firstCol ? 0 : `${columnGap.value / 2}${columnGap.unit}`,\n              paddingRight: lastCol ? 0 : `${columnGap.value / 2}${columnGap.unit}`,\n              paddingTop: firstRow ? 0 : `${rowGap.value / 2}${rowGap.unit}`,\n              paddingBottom: lastRow ? 0 : `${rowGap.value / 2}${rowGap.unit}`,\n            }\n      },\n    ),\n  }\n}\n\nexport function useResponsiveGridItem(\n  ...args: DropFirst<Parameters<typeof responsiveGridItem>>\n): CSSObject {\n  return responsiveGridItem(useBreakpoints(), ...args)\n}\n\nconst getBoxShadow = (shadows: BoxShadow) =>\n  shadows\n    .map(\n      ({ payload: { inset, offsetX, offsetY, blurRadius, spreadRadius, color } }) =>\n        `${inset ? 'inset ' : ''}${offsetX.toFixed(1)}px ${offsetY.toFixed(\n          1,\n        )}px ${blurRadius}px ${spreadRadius}px ${\n          color != null ? colorToString(color) : 'rgba(0,0,0,0.2)'\n        }`,\n    )\n    .filter(Boolean)\n    .join()\n\nexport function responsiveShadow(\n  breakpoints: Breakpoints,\n  value: ResponsiveBoxShadow | undefined,\n): CSSObject {\n  return responsiveStyle(breakpoints, [value], ([shadow = []]) => ({\n    boxShadow: getBoxShadow(shadow),\n  }))\n}\n\nexport function useResponsiveShadow(\n  ...args: DropFirst<Parameters<typeof responsiveShadow>>\n): CSSObject {\n  return responsiveShadow(useBreakpoints(), ...args)\n}\n\nexport function responsiveTextStyle(\n  breakpoints: Breakpoints,\n  value: ResponsiveTextStyleData | undefined,\n): CSSObject {\n  return responsiveStyle(\n    breakpoints,\n    [value],\n    ([\n      textStyle = {\n        fontFamily: null,\n        letterSpacing: null,\n        fontSize: null,\n        fontWeight: null,\n        textTransform: [],\n        fontStyle: [],\n      },\n    ]) => {\n      const {\n        fontSize,\n        fontWeight,\n        fontStyle = [],\n        textTransform = [],\n        letterSpacing,\n        fontFamily,\n      } = textStyle\n\n      return {\n        ...(fontFamily == null ? {} : { fontFamily: `\"${fontFamily}\"` }),\n        ...(fontWeight == null ? {} : { fontWeight }),\n        ...(letterSpacing == null ? {} : { letterSpacing }),\n        ...(fontSize == null ? {} : { fontSize: `${fontSize.value}${fontSize.unit}` }),\n        ...(textTransform.includes('uppercase') ? { textTransform: 'uppercase' } : {}),\n        ...(fontStyle.includes('italic') ? { fontStyle: 'italic' } : {}),\n      }\n    },\n  )\n}\n\nexport function useResponsiveTextStyle(\n  ...args: DropFirst<Parameters<typeof responsiveTextStyle>>\n): CSSObject {\n  return responsiveTextStyle(useBreakpoints(), ...args)\n}\n"],"mappings":"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","names":[]}
+{"version":3,"sources":["../../../../src/components/utils/responsive-style.ts"],"sourcesContent":["import { WidthProperty } from 'csstype'\nimport { type CSSObject } from '@emotion/serialize'\n\nimport type { ResponsiveValueType as ExtractResponsiveValue } from '@makeswift/controls'\n\nimport type {\n  LengthData,\n  ResponsiveBorderRadiusData,\n  ResponsiveMarginData,\n  ResponsivePaddingData,\n  ResponsiveValue,\n  ResponsiveLengthData,\n  ResponsiveTextStyleData,\n} from '@makeswift/prop-controllers'\n\nimport {\n  type Breakpoints,\n  type FallbackStrategy,\n  join as joinResponsiveValues,\n  getBreakpoint,\n  getBreakpointMediaQuery,\n} from '@makeswift/controls'\n\nimport { useBreakpoints } from '../../runtimes/react/hooks/use-breakpoints'\n\nimport { getIndexes } from './columns'\nimport { PaddingPropertyData, paddingPropertyDataToStyle } from '../../css/padding'\nimport { MarginPropertyData, marginPropertyDataToStyle } from '../../css/margin'\nimport { BorderRadiusPropertyData, borderRadiusPropertyDataToStyle } from '../../css/border-radius'\nimport { BorderPropertyData, borderPropertyDataToStyle } from '../../css/border'\nimport { BorderPropControllerData } from '../hooks/useBorder'\nimport { colorToString } from './colorToString'\nimport { BoxShadow, ResponsiveBoxShadow } from '../hooks'\nimport { DropFirst } from './drop-first'\n\nexport function responsiveStyle<V, A extends ReadonlyArray<ResponsiveValue<V> | null | undefined>>(\n  breakpoints: Breakpoints,\n  responsiveValues: A,\n  join: (values: { [K in keyof A]: ExtractResponsiveValue<A[K]> | undefined }) => CSSObject,\n  strategy?: FallbackStrategy<V>,\n): CSSObject {\n  return joinResponsiveValues(breakpoints, responsiveValues, join, strategy).reduce(\n    (acc, { deviceId, value }) => {\n      const breakpoint = getBreakpoint(breakpoints, deviceId)\n      const mediaQuery = getBreakpointMediaQuery(breakpoint)\n\n      return {\n        ...acc,\n        [mediaQuery]: {\n          ...(acc[mediaQuery] as CSSObject),\n          ...value,\n        },\n      }\n    },\n    {} as CSSObject,\n  )\n}\n\nexport function useResponsiveStyle<\n  V,\n  A extends ReadonlyArray<ResponsiveValue<V> | null | undefined>,\n>(\n  responsiveValues: A,\n  join: (values: { [K in keyof A]: ExtractResponsiveValue<A[K]> | undefined }) => CSSObject,\n  strategy?: FallbackStrategy<V>,\n): CSSObject {\n  return responsiveStyle(useBreakpoints(), responsiveValues, join, strategy)\n}\n\nexport function responsiveWidth(\n  breakpoints: Breakpoints,\n  widthData: ResponsiveLengthData | undefined,\n  defaultValue: LengthData | WidthProperty<string | number> = '100%',\n): CSSObject {\n  return {\n    maxWidth: '100%',\n    ...responsiveStyle(breakpoints, [widthData], ([width = defaultValue]) => ({\n      width: typeof width === 'object' ? `${width.value}${width.unit}` : width,\n    })),\n  }\n}\n\nexport function useResponsiveWidth(\n  ...args: DropFirst<Parameters<typeof responsiveWidth>>\n): CSSObject {\n  return responsiveWidth(useBreakpoints(), ...args)\n}\n\nexport function responsivePadding(\n  breakpoints: Breakpoints,\n  paddingData: ResponsivePaddingData | undefined,\n  defaultValue: PaddingPropertyData = {} as PaddingPropertyData,\n): CSSObject {\n  return responsiveStyle(breakpoints, [paddingData], ([padding = {} as PaddingPropertyData]) =>\n    paddingPropertyDataToStyle(\n      padding,\n      Object.assign(\n        { paddingTop: 0, paddingRight: 0, paddingBottom: 0, paddingLeft: 0 },\n        defaultValue,\n      ),\n    ),\n  )\n}\n\nexport function useResponsivePadding(\n  ...args: DropFirst<Parameters<typeof responsivePadding>>\n): CSSObject {\n  return responsivePadding(useBreakpoints(), ...args)\n}\n\nexport function responsiveMargin(\n  breakpoints: Breakpoints,\n  marginData: ResponsiveMarginData | undefined,\n  defaultValue: MarginPropertyData = {} as MarginPropertyData,\n): CSSObject {\n  return responsiveStyle(breakpoints, [marginData], ([margin = {} as MarginPropertyData]) =>\n    marginPropertyDataToStyle(\n      margin,\n      Object.assign(\n        { marginTop: 0, marginRight: 'auto', marginBottom: 0, marginLeft: 'auto' },\n        defaultValue,\n      ),\n    ),\n  )\n}\n\nexport function useResponsiveMargin(\n  ...args: DropFirst<Parameters<typeof responsiveMargin>>\n): CSSObject {\n  return responsiveMargin(useBreakpoints(), ...args)\n}\n\nexport function responsiveBorderRadius(\n  breakpoints: Breakpoints,\n  borderRadiusData: ResponsiveBorderRadiusData | undefined,\n  defaultValue: BorderRadiusPropertyData = {} as BorderRadiusPropertyData,\n): CSSObject {\n  return responsiveStyle(breakpoints, [borderRadiusData], ([borderRadius = {}]) =>\n    borderRadiusPropertyDataToStyle(\n      borderRadius,\n      Object.assign(\n        {\n          borderTopLeftRadius: 0,\n          borderTopRightRadius: 0,\n          borderBottomRightRadius: 0,\n          borderBottomLeftRadius: 0,\n        },\n        defaultValue,\n      ),\n    ),\n  )\n}\n\nexport function useResponsiveBorderRadius(\n  ...args: DropFirst<Parameters<typeof responsiveBorderRadius>>\n): CSSObject {\n  return responsiveBorderRadius(useBreakpoints(), ...args)\n}\n\nexport function useResponsiveBorder(\n  borderData: BorderPropControllerData | undefined,\n  defaultValue: BorderPropertyData = {},\n): CSSObject {\n  return useResponsiveStyle([borderData], ([border = {}]) =>\n    borderPropertyDataToStyle(\n      border,\n      Object.assign(\n        {\n          borderTop: '0px solid black',\n          borderRight: '0px solid black',\n          borderBottom: '0px solid black',\n          borderLeft: '0px solid black',\n        },\n        defaultValue,\n      ),\n    ),\n  )\n}\n\nconst floor =\n  (d: number) =>\n  (v: number): number =>\n    Math.floor(10 ** d * v) / 10 ** d\n\nexport function responsiveGridItem(\n  breakpoints: Breakpoints,\n  props: {\n    grid: ResponsiveValue<{ spans: number[][]; count: number }>\n    index: number\n    columnGap?: ResponsiveValue<LengthData>\n    rowGap?: ResponsiveValue<LengthData>\n  },\n): CSSObject {\n  return {\n    display: 'flex',\n    ...responsiveStyle(\n      breakpoints,\n      [props.grid, props.columnGap, props.rowGap] as const,\n      ([\n        { spans, count } = { spans: [[12]], count: 12 },\n        columnGap = { value: 0, unit: 'px' },\n        rowGap = { value: 0, unit: 'px' },\n      ]) => {\n        const [rowIndex, columnIndex] = getIndexes(spans, props.index)\n        const firstCol = columnIndex === 0\n        const lastCol = columnIndex === spans[rowIndex].length - 1\n        const span = spans[rowIndex][columnIndex]\n        const fraction = floor(5)(span / count)\n        const width = `${fraction} * (100% + ${columnGap.value}${columnGap.unit})`\n        const excessWidth = `${Number(firstCol) + Number(lastCol)} * ${columnGap.value}${\n          columnGap.unit\n        } / 2`\n        const iePrecisionError = '0.01px'\n        const flexBasis = `calc(${width} - ${excessWidth} - ${iePrecisionError})`\n        const firstRow = rowIndex === 0\n        const lastRow = rowIndex === spans.length - 1\n\n        return span === 0\n          ? { display: 'none' }\n          : {\n              flexBasis,\n              minWidth: flexBasis,\n              // NOTE: IE11 width breaks without max width\n              // https://github.com/philipwalton/flexbugs/issues/3\n              maxWidth: flexBasis,\n              paddingLeft: firstCol ? 0 : `${columnGap.value / 2}${columnGap.unit}`,\n              paddingRight: lastCol ? 0 : `${columnGap.value / 2}${columnGap.unit}`,\n              paddingTop: firstRow ? 0 : `${rowGap.value / 2}${rowGap.unit}`,\n              paddingBottom: lastRow ? 0 : `${rowGap.value / 2}${rowGap.unit}`,\n            }\n      },\n    ),\n  }\n}\n\nexport function useResponsiveGridItem(\n  ...args: DropFirst<Parameters<typeof responsiveGridItem>>\n): CSSObject {\n  return responsiveGridItem(useBreakpoints(), ...args)\n}\n\nconst getBoxShadow = (shadows: BoxShadow) =>\n  shadows\n    .map(\n      ({ payload: { inset, offsetX, offsetY, blurRadius, spreadRadius, color } }) =>\n        `${inset ? 'inset ' : ''}${offsetX.toFixed(1)}px ${offsetY.toFixed(\n          1,\n        )}px ${blurRadius}px ${spreadRadius}px ${\n          color != null ? colorToString(color) : 'rgba(0,0,0,0.2)'\n        }`,\n    )\n    .filter(Boolean)\n    .join()\n\nexport function responsiveShadow(\n  breakpoints: Breakpoints,\n  value: ResponsiveBoxShadow | undefined,\n): CSSObject {\n  return responsiveStyle(breakpoints, [value], ([shadow = []]) => ({\n    boxShadow: getBoxShadow(shadow),\n  }))\n}\n\nexport function useResponsiveShadow(\n  ...args: DropFirst<Parameters<typeof responsiveShadow>>\n): CSSObject {\n  return responsiveShadow(useBreakpoints(), ...args)\n}\n\nexport function responsiveTextStyle(\n  breakpoints: Breakpoints,\n  value: ResponsiveTextStyleData | undefined,\n): CSSObject {\n  return responsiveStyle(\n    breakpoints,\n    [value],\n    ([\n      textStyle = {\n        fontFamily: null,\n        letterSpacing: null,\n        fontSize: null,\n        fontWeight: null,\n        textTransform: [],\n        fontStyle: [],\n      },\n    ]) => {\n      const {\n        fontSize,\n        fontWeight,\n        fontStyle = [],\n        textTransform = [],\n        letterSpacing,\n        fontFamily,\n      } = textStyle\n\n      return {\n        ...(fontFamily == null ? {} : { fontFamily: `\"${fontFamily}\"` }),\n        ...(fontWeight == null ? {} : { fontWeight }),\n        ...(letterSpacing == null ? {} : { letterSpacing }),\n        ...(fontSize == null ? {} : { fontSize: `${fontSize.value}${fontSize.unit}` }),\n        ...(textTransform.includes('uppercase') ? { textTransform: 'uppercase' } : {}),\n        ...(fontStyle.includes('italic') ? { fontStyle: 'italic' } : {}),\n      }\n    },\n  )\n}\n\nexport function useResponsiveTextStyle(\n  ...args: DropFirst<Parameters<typeof responsiveTextStyle>>\n): CSSObject {\n  return responsiveTextStyle(useBreakpoints(), ...args)\n}\n"],"mappings":"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","names":[]}

package/dist/esm/css/border-radius.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/css/border-radius.ts"],"sourcesContent":["import { CSSObject } from '@emotion/css'\nimport {\n  BorderTopLeftRadiusProperty,\n  BorderTopRightRadiusProperty,\n  BorderBottomRightRadiusProperty,\n  BorderBottomLeftRadiusProperty,\n} from 'csstype'\nimport { LengthPercentageData, lengthPercentageDataToString } from './length-percentage'\n\n/** @see https://developer.mozilla.org/en-US/docs/Web/CSS/border-radius#constituent_properties */\nexport type BorderRadiusLonghandPropertyData = LengthPercentageData\n\n/**\n * @see https://developer.mozilla.org/en-US/docs/Web/CSS/border-radius\n *\n * @todos\n * - Remove `null` from possible values of longhand properties\n * - Remove `undefined` from possible values and make fields optional\n */\nexport type BorderRadiusPropertyData = {\n  borderTopLeftRadius?:\n    | LengthPercentageData\n    | BorderTopLeftRadiusProperty<string | number>\n    | null\n    | undefined\n  borderTopRightRadius?:\n    | LengthPercentageData\n    | BorderTopRightRadiusProperty<string | number>\n    | null\n    | undefined\n  borderBottomRightRadius?:\n    | LengthPercentageData\n    | BorderBottomRightRadiusProperty<string | number>\n    | null\n    | undefined\n  borderBottomLeftRadius?:\n    | LengthPercentageData\n    | BorderBottomLeftRadiusProperty<string | number>\n    | null\n    | undefined\n}\n\nexport function borderRadiusPropertyDataToStyle(\n  data: BorderRadiusPropertyData,\n  defaultValue: BorderRadiusPropertyData = {},\n): CSSObject {\n  const borderTopLeftRadius = data.borderTopLeftRadius ?? defaultValue.borderTopLeftRadius\n  const borderTopRightRadius = data.borderTopRightRadius ?? defaultValue.borderTopRightRadius\n  const borderBottomRightRadius =\n    data.borderBottomRightRadius ?? defaultValue.borderBottomRightRadius\n  const borderBottomLeftRadius = data.borderBottomLeftRadius ?? defaultValue.borderBottomLeftRadius\n  const style: CSSObject = {}\n\n  if (borderTopLeftRadius != null) {\n    style.borderTopLeftRadius = lengthPercentageDataToString(borderTopLeftRadius)\n  }\n\n  if (borderTopRightRadius != null) {\n    style.borderTopRightRadius = lengthPercentageDataToString(borderTopRightRadius)\n  }\n\n  if (borderBottomRightRadius != null) {\n    style.borderBottomRightRadius = lengthPercentageDataToString(borderBottomRightRadius)\n  }\n\n  if (borderBottomLeftRadius != null) {\n    style.borderBottomLeftRadius = lengthPercentageDataToString(borderBottomLeftRadius)\n  }\n\n  return style\n}\n"],"mappings":"AAOA,SAA+B,oCAAoC;AAmC5D,SAAS,gCACd,MACA,eAAyC,CAAC,GAC/B;AACX,QAAM,sBAAsB,KAAK,uBAAuB,aAAa;AACrE,QAAM,uBAAuB,KAAK,wBAAwB,aAAa;AACvE,QAAM,0BACJ,KAAK,2BAA2B,aAAa;AAC/C,QAAM,yBAAyB,KAAK,0BAA0B,aAAa;AAC3E,QAAM,QAAmB,CAAC;AAE1B,MAAI,uBAAuB,MAAM;AAC/B,UAAM,sBAAsB,6BAA6B,mBAAmB;AAAA,EAC9E;AAEA,MAAI,wBAAwB,MAAM;AAChC,UAAM,uBAAuB,6BAA6B,oBAAoB;AAAA,EAChF;AAEA,MAAI,2BAA2B,MAAM;AACnC,UAAM,0BAA0B,6BAA6B,uBAAuB;AAAA,EACtF;AAEA,MAAI,0BAA0B,MAAM;AAClC,UAAM,yBAAyB,6BAA6B,sBAAsB;AAAA,EACpF;AAEA,SAAO;AACT;","names":[]}
+{"version":3,"sources":["../../../src/css/border-radius.ts"],"sourcesContent":["import { type CSSObject } from '@emotion/serialize'\nimport {\n  BorderTopLeftRadiusProperty,\n  BorderTopRightRadiusProperty,\n  BorderBottomRightRadiusProperty,\n  BorderBottomLeftRadiusProperty,\n} from 'csstype'\nimport { LengthPercentageData, lengthPercentageDataToString } from './length-percentage'\n\n/** @see https://developer.mozilla.org/en-US/docs/Web/CSS/border-radius#constituent_properties */\nexport type BorderRadiusLonghandPropertyData = LengthPercentageData\n\n/**\n * @see https://developer.mozilla.org/en-US/docs/Web/CSS/border-radius\n *\n * @todos\n * - Remove `null` from possible values of longhand properties\n * - Remove `undefined` from possible values and make fields optional\n */\nexport type BorderRadiusPropertyData = {\n  borderTopLeftRadius?:\n    | LengthPercentageData\n    | BorderTopLeftRadiusProperty<string | number>\n    | null\n    | undefined\n  borderTopRightRadius?:\n    | LengthPercentageData\n    | BorderTopRightRadiusProperty<string | number>\n    | null\n    | undefined\n  borderBottomRightRadius?:\n    | LengthPercentageData\n    | BorderBottomRightRadiusProperty<string | number>\n    | null\n    | undefined\n  borderBottomLeftRadius?:\n    | LengthPercentageData\n    | BorderBottomLeftRadiusProperty<string | number>\n    | null\n    | undefined\n}\n\nexport function borderRadiusPropertyDataToStyle(\n  data: BorderRadiusPropertyData,\n  defaultValue: BorderRadiusPropertyData = {},\n): CSSObject {\n  const borderTopLeftRadius = data.borderTopLeftRadius ?? defaultValue.borderTopLeftRadius\n  const borderTopRightRadius = data.borderTopRightRadius ?? defaultValue.borderTopRightRadius\n  const borderBottomRightRadius =\n    data.borderBottomRightRadius ?? defaultValue.borderBottomRightRadius\n  const borderBottomLeftRadius = data.borderBottomLeftRadius ?? defaultValue.borderBottomLeftRadius\n  const style: CSSObject = {}\n\n  if (borderTopLeftRadius != null) {\n    style.borderTopLeftRadius = lengthPercentageDataToString(borderTopLeftRadius)\n  }\n\n  if (borderTopRightRadius != null) {\n    style.borderTopRightRadius = lengthPercentageDataToString(borderTopRightRadius)\n  }\n\n  if (borderBottomRightRadius != null) {\n    style.borderBottomRightRadius = lengthPercentageDataToString(borderBottomRightRadius)\n  }\n\n  if (borderBottomLeftRadius != null) {\n    style.borderBottomLeftRadius = lengthPercentageDataToString(borderBottomLeftRadius)\n  }\n\n  return style\n}\n"],"mappings":"AAOA,SAA+B,oCAAoC;AAmC5D,SAAS,gCACd,MACA,eAAyC,CAAC,GAC/B;AACX,QAAM,sBAAsB,KAAK,uBAAuB,aAAa;AACrE,QAAM,uBAAuB,KAAK,wBAAwB,aAAa;AACvE,QAAM,0BACJ,KAAK,2BAA2B,aAAa;AAC/C,QAAM,yBAAyB,KAAK,0BAA0B,aAAa;AAC3E,QAAM,QAAmB,CAAC;AAE1B,MAAI,uBAAuB,MAAM;AAC/B,UAAM,sBAAsB,6BAA6B,mBAAmB;AAAA,EAC9E;AAEA,MAAI,wBAAwB,MAAM;AAChC,UAAM,uBAAuB,6BAA6B,oBAAoB;AAAA,EAChF;AAEA,MAAI,2BAA2B,MAAM;AACnC,UAAM,0BAA0B,6BAA6B,uBAAuB;AAAA,EACtF;AAEA,MAAI,0BAA0B,MAAM;AAClC,UAAM,yBAAyB,6BAA6B,sBAAsB;AAAA,EACpF;AAEA,SAAO;AACT;","names":[]}

package/dist/esm/css/border.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/css/border.ts"],"sourcesContent":["import { CSSObject } from '@emotion/css'\nimport {\n  BorderBottomProperty,\n  BorderLeftProperty,\n  BorderProperty,\n  BorderRightProperty,\n  BorderStyleProperty,\n  BorderTopProperty,\n} from 'csstype'\nimport { colorToString } from '../components/utils/colorToString'\nimport { ColorValue } from '../components/utils/types'\n\n/**\n * @see https://developer.mozilla.org/en-US/docs/Web/CSS/border-top#constituent_properties\n *\n * @todos\n * - Change `width` to be a `Length`\n * - Remove `null` from possible values\n * - Remove `undefined` from possible values and make fields optional\n */\nexport type BorderSideShorthandPropertyData = {\n  width?: number | null | undefined\n  style: BorderStyleProperty\n  color?: ColorValue | null\n}\n\n/**\n * @see https://developer.mozilla.org/en-US/docs/Web/CSS/border\n *\n * @todos\n * - Remove `null` from possible values\n * - Remove `undefined` from possible values and make fields optional\n */\nexport type BorderPropertyData = {\n  borderTop?:\n    | BorderSideShorthandPropertyData\n    | BorderTopProperty<string | number>\n    | null\n    | undefined\n  borderRight?:\n    | BorderSideShorthandPropertyData\n    | BorderRightProperty<string | number>\n    | null\n    | undefined\n  borderBottom?:\n    | BorderSideShorthandPropertyData\n    | BorderBottomProperty<string | number>\n    | null\n    | undefined\n  borderLeft?:\n    | BorderSideShorthandPropertyData\n    | BorderLeftProperty<string | number>\n    | null\n    | undefined\n}\n\nexport function borderPropertyDataToStyle(\n  data: BorderPropertyData,\n  defaultValue: BorderPropertyData = {},\n): CSSObject {\n  const borderTop = data.borderTop ?? defaultValue.borderTop\n  const borderRight = data.borderRight ?? defaultValue.borderRight\n  const borderBottom = data.borderBottom ?? defaultValue.borderBottom\n  const borderLeft = data.borderLeft ?? defaultValue.borderLeft\n  const style: CSSObject = {}\n\n  if (borderTop != null) style.borderTop = borderSideToString(borderTop)\n  if (borderRight != null) style.borderRight = borderSideToString(borderRight)\n  if (borderBottom != null) style.borderBottom = borderSideToString(borderBottom)\n  if (borderLeft != null) style.borderLeft = borderSideToString(borderLeft)\n\n  return style\n}\n\nfunction borderSideToString(\n  borderSide: BorderSideShorthandPropertyData | BorderProperty<string | number>,\n): string {\n  if (typeof borderSide === 'string') return borderSide\n\n  if (typeof borderSide === 'number') return `${borderSide}px`\n\n  const { width, color, style } = borderSide\n\n  return `${width != null ? width : 0}px ${style} ${color != null ? colorToString(color) : 'black'}`\n}\n"],"mappings":"AASA,SAAS,qBAAqB;AA+CvB,SAAS,0BACd,MACA,eAAmC,CAAC,GACzB;AACX,QAAM,YAAY,KAAK,aAAa,aAAa;AACjD,QAAM,cAAc,KAAK,eAAe,aAAa;AACrD,QAAM,eAAe,KAAK,gBAAgB,aAAa;AACvD,QAAM,aAAa,KAAK,cAAc,aAAa;AACnD,QAAM,QAAmB,CAAC;AAE1B,MAAI,aAAa;AAAM,UAAM,YAAY,mBAAmB,SAAS;AACrE,MAAI,eAAe;AAAM,UAAM,cAAc,mBAAmB,WAAW;AAC3E,MAAI,gBAAgB;AAAM,UAAM,eAAe,mBAAmB,YAAY;AAC9E,MAAI,cAAc;AAAM,UAAM,aAAa,mBAAmB,UAAU;AAExE,SAAO;AACT;AAEA,SAAS,mBACP,YACQ;AACR,MAAI,OAAO,eAAe;AAAU,WAAO;AAE3C,MAAI,OAAO,eAAe;AAAU,WAAO,GAAG,UAAU;AAExD,QAAM,EAAE,OAAO,OAAO,MAAM,IAAI;AAEhC,SAAO,GAAG,SAAS,OAAO,QAAQ,CAAC,MAAM,KAAK,IAAI,SAAS,OAAO,cAAc,KAAK,IAAI,OAAO;AAClG;","names":[]}
+{"version":3,"sources":["../../../src/css/border.ts"],"sourcesContent":["import { type CSSObject } from '@emotion/serialize'\nimport {\n  BorderBottomProperty,\n  BorderLeftProperty,\n  BorderProperty,\n  BorderRightProperty,\n  BorderStyleProperty,\n  BorderTopProperty,\n} from 'csstype'\nimport { colorToString } from '../components/utils/colorToString'\nimport { ColorValue } from '../components/utils/types'\n\n/**\n * @see https://developer.mozilla.org/en-US/docs/Web/CSS/border-top#constituent_properties\n *\n * @todos\n * - Change `width` to be a `Length`\n * - Remove `null` from possible values\n * - Remove `undefined` from possible values and make fields optional\n */\nexport type BorderSideShorthandPropertyData = {\n  width?: number | null | undefined\n  style: BorderStyleProperty\n  color?: ColorValue | null\n}\n\n/**\n * @see https://developer.mozilla.org/en-US/docs/Web/CSS/border\n *\n * @todos\n * - Remove `null` from possible values\n * - Remove `undefined` from possible values and make fields optional\n */\nexport type BorderPropertyData = {\n  borderTop?:\n    | BorderSideShorthandPropertyData\n    | BorderTopProperty<string | number>\n    | null\n    | undefined\n  borderRight?:\n    | BorderSideShorthandPropertyData\n    | BorderRightProperty<string | number>\n    | null\n    | undefined\n  borderBottom?:\n    | BorderSideShorthandPropertyData\n    | BorderBottomProperty<string | number>\n    | null\n    | undefined\n  borderLeft?:\n    | BorderSideShorthandPropertyData\n    | BorderLeftProperty<string | number>\n    | null\n    | undefined\n}\n\nexport function borderPropertyDataToStyle(\n  data: BorderPropertyData,\n  defaultValue: BorderPropertyData = {},\n): CSSObject {\n  const borderTop = data.borderTop ?? defaultValue.borderTop\n  const borderRight = data.borderRight ?? defaultValue.borderRight\n  const borderBottom = data.borderBottom ?? defaultValue.borderBottom\n  const borderLeft = data.borderLeft ?? defaultValue.borderLeft\n  const style: CSSObject = {}\n\n  if (borderTop != null) style.borderTop = borderSideToString(borderTop)\n  if (borderRight != null) style.borderRight = borderSideToString(borderRight)\n  if (borderBottom != null) style.borderBottom = borderSideToString(borderBottom)\n  if (borderLeft != null) style.borderLeft = borderSideToString(borderLeft)\n\n  return style\n}\n\nfunction borderSideToString(\n  borderSide: BorderSideShorthandPropertyData | BorderProperty<string | number>,\n): string {\n  if (typeof borderSide === 'string') return borderSide\n\n  if (typeof borderSide === 'number') return `${borderSide}px`\n\n  const { width, color, style } = borderSide\n\n  return `${width != null ? width : 0}px ${style} ${color != null ? colorToString(color) : 'black'}`\n}\n"],"mappings":"AASA,SAAS,qBAAqB;AA+CvB,SAAS,0BACd,MACA,eAAmC,CAAC,GACzB;AACX,QAAM,YAAY,KAAK,aAAa,aAAa;AACjD,QAAM,cAAc,KAAK,eAAe,aAAa;AACrD,QAAM,eAAe,KAAK,gBAAgB,aAAa;AACvD,QAAM,aAAa,KAAK,cAAc,aAAa;AACnD,QAAM,QAAmB,CAAC;AAE1B,MAAI,aAAa;AAAM,UAAM,YAAY,mBAAmB,SAAS;AACrE,MAAI,eAAe;AAAM,UAAM,cAAc,mBAAmB,WAAW;AAC3E,MAAI,gBAAgB;AAAM,UAAM,eAAe,mBAAmB,YAAY;AAC9E,MAAI,cAAc;AAAM,UAAM,aAAa,mBAAmB,UAAU;AAExE,SAAO;AACT;AAEA,SAAS,mBACP,YACQ;AACR,MAAI,OAAO,eAAe;AAAU,WAAO;AAE3C,MAAI,OAAO,eAAe;AAAU,WAAO,GAAG,UAAU;AAExD,QAAM,EAAE,OAAO,OAAO,MAAM,IAAI;AAEhC,SAAO,GAAG,SAAS,OAAO,QAAQ,CAAC,MAAM,KAAK,IAAI,SAAS,OAAO,cAAc,KAAK,IAAI,OAAO;AAClG;","names":[]}

package/dist/esm/css/margin.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/css/margin.ts"],"sourcesContent":["import { CSSObject } from '@emotion/css'\nimport {\n  MarginBottomProperty,\n  MarginLeftProperty,\n  MarginRightProperty,\n  MarginTopProperty,\n} from 'csstype'\nimport { LengthData, lengthDataToString } from './length'\n\n/** @see https://developer.mozilla.org/en-US/docs/Web/CSS/margin#constituent_properties */\nexport type MarginLonghandPropertyData = LengthData | 'auto'\n\n/**\n * @see https://developer.mozilla.org/en-US/docs/Web/CSS/margin\n *\n * @todos\n * - Remove `null` from possible values\n * - Remove `undefined` from possible values and make fields optional\n */\nexport type MarginPropertyData = {\n  marginTop: MarginLonghandPropertyData | MarginTopProperty<string | number> | null | undefined\n  marginRight: MarginLonghandPropertyData | MarginRightProperty<string | number> | null | undefined\n  marginBottom:\n    | MarginLonghandPropertyData\n    | MarginBottomProperty<string | number>\n    | null\n    | undefined\n  marginLeft: MarginLonghandPropertyData | MarginLeftProperty<string | number> | null | undefined\n}\n\nexport function marginPropertyDataToStyle(\n  data: MarginPropertyData,\n  defaultValue: MarginPropertyData = {} as MarginPropertyData,\n): CSSObject {\n  const marginTop = data.marginTop ?? defaultValue.marginTop\n  const marginRight = data.marginRight ?? defaultValue.marginRight\n  const marginBottom = data.marginBottom ?? defaultValue.marginBottom\n  const marginLeft = data.marginLeft ?? defaultValue.marginLeft\n  const style: CSSObject = {}\n\n  if (marginTop != null) style.marginTop = lengthDataToString(marginTop)\n  if (marginRight != null) style.marginRight = lengthDataToString(marginRight)\n  if (marginBottom != null) style.marginBottom = lengthDataToString(marginBottom)\n  if (marginLeft != null) style.marginLeft = lengthDataToString(marginLeft)\n\n  return style\n}\n"],"mappings":"AAOA,SAAqB,0BAA0B;AAuBxC,SAAS,0BACd,MACA,eAAmC,CAAC,GACzB;AACX,QAAM,YAAY,KAAK,aAAa,aAAa;AACjD,QAAM,cAAc,KAAK,eAAe,aAAa;AACrD,QAAM,eAAe,KAAK,gBAAgB,aAAa;AACvD,QAAM,aAAa,KAAK,cAAc,aAAa;AACnD,QAAM,QAAmB,CAAC;AAE1B,MAAI,aAAa;AAAM,UAAM,YAAY,mBAAmB,SAAS;AACrE,MAAI,eAAe;AAAM,UAAM,cAAc,mBAAmB,WAAW;AAC3E,MAAI,gBAAgB;AAAM,UAAM,eAAe,mBAAmB,YAAY;AAC9E,MAAI,cAAc;AAAM,UAAM,aAAa,mBAAmB,UAAU;AAExE,SAAO;AACT;","names":[]}
+{"version":3,"sources":["../../../src/css/margin.ts"],"sourcesContent":["import { type CSSObject } from '@emotion/serialize'\nimport {\n  MarginBottomProperty,\n  MarginLeftProperty,\n  MarginRightProperty,\n  MarginTopProperty,\n} from 'csstype'\nimport { LengthData, lengthDataToString } from './length'\n\n/** @see https://developer.mozilla.org/en-US/docs/Web/CSS/margin#constituent_properties */\nexport type MarginLonghandPropertyData = LengthData | 'auto'\n\n/**\n * @see https://developer.mozilla.org/en-US/docs/Web/CSS/margin\n *\n * @todos\n * - Remove `null` from possible values\n * - Remove `undefined` from possible values and make fields optional\n */\nexport type MarginPropertyData = {\n  marginTop: MarginLonghandPropertyData | MarginTopProperty<string | number> | null | undefined\n  marginRight: MarginLonghandPropertyData | MarginRightProperty<string | number> | null | undefined\n  marginBottom:\n    | MarginLonghandPropertyData\n    | MarginBottomProperty<string | number>\n    | null\n    | undefined\n  marginLeft: MarginLonghandPropertyData | MarginLeftProperty<string | number> | null | undefined\n}\n\nexport function marginPropertyDataToStyle(\n  data: MarginPropertyData,\n  defaultValue: MarginPropertyData = {} as MarginPropertyData,\n): CSSObject {\n  const marginTop = data.marginTop ?? defaultValue.marginTop\n  const marginRight = data.marginRight ?? defaultValue.marginRight\n  const marginBottom = data.marginBottom ?? defaultValue.marginBottom\n  const marginLeft = data.marginLeft ?? defaultValue.marginLeft\n  const style: CSSObject = {}\n\n  if (marginTop != null) style.marginTop = lengthDataToString(marginTop)\n  if (marginRight != null) style.marginRight = lengthDataToString(marginRight)\n  if (marginBottom != null) style.marginBottom = lengthDataToString(marginBottom)\n  if (marginLeft != null) style.marginLeft = lengthDataToString(marginLeft)\n\n  return style\n}\n"],"mappings":"AAOA,SAAqB,0BAA0B;AAuBxC,SAAS,0BACd,MACA,eAAmC,CAAC,GACzB;AACX,QAAM,YAAY,KAAK,aAAa,aAAa;AACjD,QAAM,cAAc,KAAK,eAAe,aAAa;AACrD,QAAM,eAAe,KAAK,gBAAgB,aAAa;AACvD,QAAM,aAAa,KAAK,cAAc,aAAa;AACnD,QAAM,QAAmB,CAAC;AAE1B,MAAI,aAAa;AAAM,UAAM,YAAY,mBAAmB,SAAS;AACrE,MAAI,eAAe;AAAM,UAAM,cAAc,mBAAmB,WAAW;AAC3E,MAAI,gBAAgB;AAAM,UAAM,eAAe,mBAAmB,YAAY;AAC9E,MAAI,cAAc;AAAM,UAAM,aAAa,mBAAmB,UAAU;AAExE,SAAO;AACT;","names":[]}

package/dist/esm/css/padding.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/css/padding.ts"],"sourcesContent":["import { CSSObject } from '@emotion/css'\nimport { LengthData, lengthDataToString } from './length'\nimport {\n  PaddingTopProperty,\n  PaddingRightProperty,\n  PaddingBottomProperty,\n  PaddingLeftProperty,\n} from 'csstype'\n\n/** @see https://developer.mozilla.org/en-US/docs/Web/CSS/padding#constituent_properties */\nexport type PaddingLonghandPropertyData = LengthData\n\n/**\n * @see https://developer.mozilla.org/en-US/docs/Web/CSS/padding\n *\n * @todos\n * - Remove `null` from possible values\n * - Remove `undefined` from possible values and make fields optional\n */\nexport type PaddingPropertyData = {\n  paddingTop: PaddingLonghandPropertyData | PaddingTopProperty<number | string> | null | undefined\n  paddingRight:\n    | PaddingLonghandPropertyData\n    | PaddingRightProperty<number | string>\n    | null\n    | undefined\n  paddingBottom:\n    | PaddingLonghandPropertyData\n    | PaddingBottomProperty<number | string>\n    | null\n    | undefined\n  paddingLeft: PaddingLonghandPropertyData | PaddingLeftProperty<number | string> | null | undefined\n}\n\nexport function paddingPropertyDataToStyle(\n  data: PaddingPropertyData,\n  defaultValue: PaddingPropertyData = {} as PaddingPropertyData,\n): CSSObject {\n  const paddingTop = data.paddingTop ?? defaultValue.paddingTop\n  const paddingRight = data.paddingRight ?? defaultValue.paddingRight\n  const paddingBottom = data.paddingBottom ?? defaultValue.paddingBottom\n  const paddingLeft = data.paddingLeft ?? defaultValue.paddingLeft\n  const style: CSSObject = {}\n\n  if (paddingTop != null) style.paddingTop = lengthDataToString(paddingTop)\n  if (paddingRight != null) style.paddingRight = lengthDataToString(paddingRight)\n  if (paddingBottom != null) style.paddingBottom = lengthDataToString(paddingBottom)\n  if (paddingLeft != null) style.paddingLeft = lengthDataToString(paddingLeft)\n\n  return style\n}\n"],"mappings":"AACA,SAAqB,0BAA0B;AAiCxC,SAAS,2BACd,MACA,eAAoC,CAAC,GAC1B;AACX,QAAM,aAAa,KAAK,cAAc,aAAa;AACnD,QAAM,eAAe,KAAK,gBAAgB,aAAa;AACvD,QAAM,gBAAgB,KAAK,iBAAiB,aAAa;AACzD,QAAM,cAAc,KAAK,eAAe,aAAa;AACrD,QAAM,QAAmB,CAAC;AAE1B,MAAI,cAAc;AAAM,UAAM,aAAa,mBAAmB,UAAU;AACxE,MAAI,gBAAgB;AAAM,UAAM,eAAe,mBAAmB,YAAY;AAC9E,MAAI,iBAAiB;AAAM,UAAM,gBAAgB,mBAAmB,aAAa;AACjF,MAAI,eAAe;AAAM,UAAM,cAAc,mBAAmB,WAAW;AAE3E,SAAO;AACT;","names":[]}
+{"version":3,"sources":["../../../src/css/padding.ts"],"sourcesContent":["import { type CSSObject } from '@emotion/serialize'\nimport { LengthData, lengthDataToString } from './length'\nimport {\n  PaddingTopProperty,\n  PaddingRightProperty,\n  PaddingBottomProperty,\n  PaddingLeftProperty,\n} from 'csstype'\n\n/** @see https://developer.mozilla.org/en-US/docs/Web/CSS/padding#constituent_properties */\nexport type PaddingLonghandPropertyData = LengthData\n\n/**\n * @see https://developer.mozilla.org/en-US/docs/Web/CSS/padding\n *\n * @todos\n * - Remove `null` from possible values\n * - Remove `undefined` from possible values and make fields optional\n */\nexport type PaddingPropertyData = {\n  paddingTop: PaddingLonghandPropertyData | PaddingTopProperty<number | string> | null | undefined\n  paddingRight:\n    | PaddingLonghandPropertyData\n    | PaddingRightProperty<number | string>\n    | null\n    | undefined\n  paddingBottom:\n    | PaddingLonghandPropertyData\n    | PaddingBottomProperty<number | string>\n    | null\n    | undefined\n  paddingLeft: PaddingLonghandPropertyData | PaddingLeftProperty<number | string> | null | undefined\n}\n\nexport function paddingPropertyDataToStyle(\n  data: PaddingPropertyData,\n  defaultValue: PaddingPropertyData = {} as PaddingPropertyData,\n): CSSObject {\n  const paddingTop = data.paddingTop ?? defaultValue.paddingTop\n  const paddingRight = data.paddingRight ?? defaultValue.paddingRight\n  const paddingBottom = data.paddingBottom ?? defaultValue.paddingBottom\n  const paddingLeft = data.paddingLeft ?? defaultValue.paddingLeft\n  const style: CSSObject = {}\n\n  if (paddingTop != null) style.paddingTop = lengthDataToString(paddingTop)\n  if (paddingRight != null) style.paddingRight = lengthDataToString(paddingRight)\n  if (paddingBottom != null) style.paddingBottom = lengthDataToString(paddingBottom)\n  if (paddingLeft != null) style.paddingLeft = lengthDataToString(paddingLeft)\n\n  return style\n}\n"],"mappings":"AACA,SAAqB,0BAA0B;AAiCxC,SAAS,2BACd,MACA,eAAoC,CAAC,GAC1B;AACX,QAAM,aAAa,KAAK,cAAc,aAAa;AACnD,QAAM,eAAe,KAAK,gBAAgB,aAAa;AACvD,QAAM,gBAAgB,KAAK,iBAAiB,aAAa;AACzD,QAAM,cAAc,KAAK,eAAe,aAAa;AACrD,QAAM,QAAmB,CAAC;AAE1B,MAAI,cAAc;AAAM,UAAM,aAAa,mBAAmB,UAAU;AACxE,MAAI,gBAAgB;AAAM,UAAM,eAAe,mBAAmB,YAAY;AAC9E,MAAI,iBAAiB;AAAM,UAAM,gBAAgB,mBAAmB,aAAa;AACjF,MAAI,eAAe;AAAM,UAAM,cAAc,mBAAmB,WAAW;AAE3E,SAAO;AACT;","names":[]}

package/dist/esm/next/api-handler/config/app-router.js

@@ -1,22 +1,23 @@
 import { P } from "ts-pattern";
 import { revalidatePath, revalidateTag } from "next/cache";
+import { NextRequest } from "next/server";
 import { MAKESWIFT_CACHE_TAG } from "../../cache";
-import { redirectDraftHandler } from "../handlers/redirect-draft";
-import { MAKESWIFT_DRAFT_DATA_COOKIE, PRERENDER_BYPASS_COOKIE } from "../draft";
+import { appRouterRedirectPreviewHandler } from "../handlers/app-router-redirect-preview";
+import { MAKESWIFT_SITE_VERSION_COOKIE, PRERENDER_BYPASS_COOKIE } from "../preview";
 import { validateApiRoute } from "./base";
-const argsPattern = [P.instanceOf(Request), P.any];
+const argsPattern = [
+  P.union(P.instanceOf(Request), P.instanceOf(NextRequest)),
+  P.any
+];
 async function config({
   req,
   context,
-  apiKey
+  client
 }) {
   return {
     req,
     route: validateApiRoute(await context.params),
-    manifest: {
-      draftMode: true
-    },
-    draftCookieNames: [PRERENDER_BYPASS_COOKIE, MAKESWIFT_DRAFT_DATA_COOKIE],
+    previewCookieNames: [PRERENDER_BYPASS_COOKIE, MAKESWIFT_SITE_VERSION_COOKIE],
     sendResponse: async (res) => res,
     revalidationHandler: async (path) => {
       if (path != null) {
@@ -26,8 +27,9 @@ async function config({
       }
     },
     customRoutes: async (route) => {
-      if (route === "/draft") {
-        return { res: await redirectDraftHandler(req, context, { apiKey }) };
+      if (route === "/redirect-preview") {
+        const request = req instanceof NextRequest ? req : new NextRequest(req, req);
+        return { res: await appRouterRedirectPreviewHandler(request, context, client) };
       }
       return null;
     }