@makeswift/runtime 0.1.12 → 0.2.1

package/dist/cssMediaRules.cjs.js

@@ -1,10 +1,10 @@
 "use strict";
 var styled = require("styled-components");
-var next = require("./index.cjs.js");
+var index = require("./index.cjs.js");
 function cssMediaRules(responsiveValues, join, strategy) {
-  return (props) => next.join(typeof responsiveValues === "function" ? responsiveValues(props) : responsiveValues, join, strategy).reduce((acc, { deviceId, value }) => {
-    const device = next.getDevice(deviceId);
-    const mediaQuery = next.getDeviceMediaQuery(device);
+  return (props) => index.join(typeof responsiveValues === "function" ? responsiveValues(props) : responsiveValues, join, strategy).reduce((acc, { deviceId, value }) => {
+    const device = index.getDevice(deviceId);
+    const mediaQuery = index.getDeviceMediaQuery(device);
     return styled.css`
         ${acc}${mediaQuery} {
           ${value}
@@ -69,7 +69,7 @@ function cssPadding(defaultValue = {}) {
   `;
 }
 const defaultBorderSide = { width: 0, style: "solid", color: null };
-const getBorderSide = ({ width, style, color }) => `${width != null ? width : 0}px ${style} ${color != null ? next.colorToString(color) : "black"}`;
+const getBorderSide = ({ width, style, color }) => `${width != null ? width : 0}px ${style} ${color != null ? index.colorToString(color) : "black"}`;
 function cssBorder(defaultValue = {}) {
   const defaultBorderTop = defaultValue.borderTop === void 0 ? defaultBorderSide : defaultValue.borderTop;
   const defaultBorderRight = defaultValue.borderRight === void 0 ? defaultBorderSide : defaultValue.borderRight;
@@ -115,7 +115,7 @@ function cssBorderRadius(defaultValue = {}) {
       `)}
   `;
 }
-const getBoxShadow = (shadows) => shadows.map(({ payload: { inset, offsetX, offsetY, blurRadius, spreadRadius, color } }) => `${inset ? "inset " : ""}${offsetX.toFixed(1)}px ${offsetY.toFixed(1)}px ${blurRadius}px ${spreadRadius}px ${color != null ? next.colorToString(color) : "rgba(0,0,0,0.2)"}`).filter(Boolean).join();
+const getBoxShadow = (shadows) => shadows.map(({ payload: { inset, offsetX, offsetY, blurRadius, spreadRadius, color } }) => `${inset ? "inset " : ""}${offsetX.toFixed(1)}px ${offsetY.toFixed(1)}px ${blurRadius}px ${spreadRadius}px ${color != null ? index.colorToString(color) : "rgba(0,0,0,0.2)"}`).filter(Boolean).join();
 function cssBoxShadow(defaultValue = []) {
   return (props) => styled.css`
     ${cssMediaRules([props.boxShadow], ([boxShadow = defaultValue]) => styled.css`
@@ -134,7 +134,7 @@ function cssGridItem() {
     columnGap = { value: 0, unit: "px" },
     rowGap = { value: 0, unit: "px" }
   ]) => {
-    const [rowIndex, columnIndex] = next.getIndexes(spans, props.index);
+    const [rowIndex, columnIndex] = index.getIndexes(spans, props.index);
     const firstCol = columnIndex === 0;
     const lastCol = columnIndex === spans[rowIndex].length - 1;
     const span = spans[rowIndex][columnIndex];

package/dist/cssMediaRules.cjs.js.map

@@ -1 +1 @@
-{"version":3,"file":"cssMediaRules.cjs.js","sources":["../src/components/utils/cssMediaRules.ts"],"sourcesContent":["import { css, CSSObject } from 'styled-components'\nimport {\n  WidthProperty,\n  MarginProperty,\n  MarginTopProperty,\n  MarginRightProperty,\n  MarginBottomProperty,\n  MarginLeftProperty,\n  PaddingProperty,\n  PaddingTopProperty,\n  PaddingRightProperty,\n  PaddingBottomProperty,\n  PaddingLeftProperty,\n  BorderRadiusProperty,\n  BorderTopLeftRadiusProperty,\n  BorderTopRightRadiusProperty,\n  BorderBottomLeftRadiusProperty,\n  BorderBottomRightRadiusProperty,\n} from 'csstype'\n\nimport {\n  ResponsiveValue,\n  ResponsiveValueType as ExtractResponsiveValue,\n  Length as LengthValue,\n} from '../../prop-controllers'\nimport {\n  FallbackStrategy,\n  getDevice,\n  getDeviceMediaQuery,\n  join as joinResponsiveValues,\n} from './devices'\nimport { getIndexes } from './columns'\nimport {\n  BorderRadiusValue,\n  MarginValue,\n  PaddingValue,\n  TextStyleValue,\n  WidthValue,\n} from '../../prop-controllers/descriptors'\nimport { colorToString } from './colorToString'\nimport {\n  BorderSide,\n  BorderPropControllerData,\n  BoxShadowData,\n  BoxShadowPropControllerData,\n} from '../hooks'\n\ntype CSSRules = ReturnType<typeof css>\n\nexport function cssMediaRules<V, A extends ReadonlyArray<ResponsiveValue<V> | null | undefined>, P>(\n  responsiveValues: A | ((props: P) => A),\n  join: (values: { [K in keyof A]: ExtractResponsiveValue<A[K]> | undefined }) =>\n    | CSSRules\n    | CSSObject,\n  strategy?: FallbackStrategy<V>,\n): (props: P) => CSSRules {\n  return props =>\n    joinResponsiveValues(\n      typeof responsiveValues === 'function' ? responsiveValues(props) : responsiveValues,\n      join,\n      strategy,\n    ).reduce((acc, { deviceId, value }) => {\n      const device = getDevice(deviceId)\n      const mediaQuery = getDeviceMediaQuery(device)\n\n      return css`\n        ${acc}${mediaQuery} {\n          ${value}\n        }\n      `\n    }, css`` as CSSRules)\n}\n\nexport function cssWidth(\n  defaultValue: LengthValue | WidthProperty<string | number> = '100%',\n): (props: { width?: WidthValue }) => CSSRules {\n  return props => css`\n    max-width: 100%;\n    ${cssMediaRules(\n      [props.width] as const,\n      ([width = defaultValue]) => css`\n        width: ${typeof width === 'object' ? `${width.value}${width.unit}` : width};\n      `,\n    )}\n  `\n}\n\nfunction getMarginSide(marginSide: LengthValue | MarginProperty<string | number>) {\n  return typeof marginSide === 'object' ? `${marginSide.value}${marginSide.unit}` : marginSide\n}\n\nexport function cssMargin(\n  defaultValue: {\n    marginTop?: LengthValue | MarginTopProperty<string | number>\n    marginRight?: LengthValue | MarginRightProperty<string | number>\n    marginBottom?: LengthValue | MarginBottomProperty<string | number>\n    marginLeft?: LengthValue | MarginLeftProperty<string | number>\n  } = {},\n): (props: { margin?: MarginValue }) => CSSRules {\n  const defaultMarginTop = defaultValue.marginTop === undefined ? 0 : defaultValue.marginTop\n  const defaultMarginRight =\n    defaultValue.marginRight === undefined ? 'auto' : defaultValue.marginRight\n  const defaultMarginBottom =\n    defaultValue.marginBottom === undefined ? 0 : defaultValue.marginBottom\n  const defaultMarginLeft = defaultValue.marginLeft === undefined ? 'auto' : defaultValue.marginLeft\n\n  return props => css`\n    ${cssMediaRules(\n      [props.margin] as const,\n      ([\n        {\n          marginTop,\n          marginRight,\n          marginBottom,\n          marginLeft,\n        } = {} as ExtractResponsiveValue<MarginValue>,\n      ]) => css`\n        margin-top: ${getMarginSide(marginTop || defaultMarginTop)};\n        margin-right: ${getMarginSide(marginRight || defaultMarginRight)};\n        margin-bottom: ${getMarginSide(marginBottom || defaultMarginBottom)};\n        margin-left: ${getMarginSide(marginLeft || defaultMarginLeft)};\n      `,\n    )}\n  `\n}\n\nfunction getPaddingSide(paddingSide: LengthValue | PaddingProperty<string | number>) {\n  return typeof paddingSide === 'object' ? `${paddingSide.value}${paddingSide.unit}` : paddingSide\n}\n\nexport function cssPadding(\n  defaultValue: {\n    paddingTop?: LengthValue | PaddingTopProperty<string | number>\n    paddingRight?: LengthValue | PaddingRightProperty<string | number>\n    paddingBottom?: LengthValue | PaddingBottomProperty<string | number>\n    paddingLeft?: LengthValue | PaddingLeftProperty<string | number>\n  } = {},\n): (props: { padding?: PaddingValue }) => CSSRules {\n  const defaultPaddingTop = defaultValue.paddingTop === undefined ? 0 : defaultValue.paddingTop\n  const defaultPaddingRight =\n    defaultValue.paddingRight === undefined ? 0 : defaultValue.paddingRight\n  const defaultPaddingBottom =\n    defaultValue.paddingBottom === undefined ? 0 : defaultValue.paddingBottom\n  const defaultPaddingLeft = defaultValue.paddingLeft === undefined ? 0 : defaultValue.paddingLeft\n\n  return props => css`\n    ${cssMediaRules(\n      [props.padding] as const,\n      ([\n        {\n          paddingTop,\n          paddingRight,\n          paddingBottom,\n          paddingLeft,\n        } = {} as ExtractResponsiveValue<PaddingValue>,\n      ]) => css`\n        padding-top: ${getPaddingSide(paddingTop || defaultPaddingTop)};\n        padding-right: ${getPaddingSide(paddingRight || defaultPaddingRight)};\n        padding-bottom: ${getPaddingSide(paddingBottom || defaultPaddingBottom)};\n        padding-left: ${getPaddingSide(paddingLeft || defaultPaddingLeft)};\n      `,\n    )}\n  `\n}\n\nconst defaultBorderSide = { width: 0, style: 'solid', color: null }\n\nconst getBorderSide = ({ width, style, color }: BorderSide) =>\n  `${width != null ? width : 0}px ${style} ${color != null ? colorToString(color) : 'black'}`\n\nexport function cssBorder(\n  defaultValue: {\n    borderTop?: BorderSide\n    borderRight?: BorderSide\n    borderBottom?: BorderSide\n    borderLeft?: BorderSide\n  } = {},\n): (props: { border?: BorderPropControllerData | null | undefined }) => CSSRules {\n  const defaultBorderTop =\n    defaultValue.borderTop === undefined ? defaultBorderSide : defaultValue.borderTop\n  const defaultBorderRight =\n    defaultValue.borderRight === undefined ? defaultBorderSide : defaultValue.borderRight\n  const defaultBorderBottom =\n    defaultValue.borderBottom === undefined ? defaultBorderSide : defaultValue.borderBottom\n  const defaultBorderLeft =\n    defaultValue.borderLeft === undefined ? defaultBorderSide : defaultValue.borderLeft\n\n  return props => css`\n    ${cssMediaRules(\n      [props.border] as const,\n      ([\n        {\n          borderTop,\n          borderRight,\n          borderBottom,\n          borderLeft,\n        } = {} as ExtractResponsiveValue<BorderPropControllerData>,\n      ]) => css`\n        border-top: ${getBorderSide(borderTop || defaultBorderTop)};\n        border-right: ${getBorderSide(borderRight || defaultBorderRight)};\n        border-bottom: ${getBorderSide(borderBottom || defaultBorderBottom)};\n        border-left: ${getBorderSide(borderLeft || defaultBorderLeft)};\n      `,\n    )}\n  `\n}\n\nfunction getBorderRadiusCorner(\n  borderRadiusCorner: LengthValue | BorderRadiusProperty<string | number>,\n) {\n  return typeof borderRadiusCorner === 'object'\n    ? `${borderRadiusCorner.value}${borderRadiusCorner.unit}`\n    : borderRadiusCorner\n}\n\nexport function cssBorderRadius(\n  defaultValue: {\n    borderTopLeftRadius?: LengthValue | BorderTopLeftRadiusProperty<string | number>\n    borderTopRightRadius?: LengthValue | BorderTopRightRadiusProperty<string | number>\n    borderBottomLeftRadius?: LengthValue | BorderBottomLeftRadiusProperty<string | number>\n    borderBottomRightRadius?: LengthValue | BorderBottomRightRadiusProperty<string | number>\n  } = {},\n): (props: { borderRadius?: BorderRadiusValue }) => CSSRules {\n  const defaultBorderTopLeftRadius =\n    defaultValue.borderTopLeftRadius === undefined ? 0 : defaultValue.borderTopLeftRadius\n  const defaultBorderTopRightRadius =\n    defaultValue.borderTopRightRadius === undefined ? 0 : defaultValue.borderTopRightRadius\n  const defaultPaddingBottom =\n    defaultValue.borderBottomLeftRadius === undefined ? 0 : defaultValue.borderBottomLeftRadius\n  const defaultPaddingLeft =\n    defaultValue.borderBottomRightRadius === undefined ? 0 : defaultValue.borderBottomRightRadius\n\n  return props => css`\n    ${cssMediaRules(\n      [props.borderRadius] as const,\n      ([\n        {\n          borderTopLeftRadius,\n          borderTopRightRadius,\n          borderBottomLeftRadius,\n          borderBottomRightRadius,\n        } = {} as ExtractResponsiveValue<BorderRadiusValue>,\n      ]) => css`\n        border-top-left-radius: ${getBorderRadiusCorner(\n          borderTopLeftRadius || defaultBorderTopLeftRadius,\n        )};\n        border-top-right-radius: ${getBorderRadiusCorner(\n          borderTopRightRadius || defaultBorderTopRightRadius,\n        )};\n        border-bottom-left-radius: ${getBorderRadiusCorner(\n          borderBottomLeftRadius || defaultPaddingBottom,\n        )};\n        border-bottom-right-radius: ${getBorderRadiusCorner(\n          borderBottomRightRadius || defaultPaddingLeft,\n        )};\n      `,\n    )}\n  `\n}\n\nconst getBoxShadow = (shadows: BoxShadowData) =>\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 cssBoxShadow(\n  defaultValue: BoxShadowData = [],\n): (props: { boxShadow?: BoxShadowPropControllerData | null | undefined }) => CSSRules {\n  return props => css`\n    ${cssMediaRules(\n      [props.boxShadow] as const,\n      ([boxShadow = defaultValue]) => css`\n        box-shadow: ${getBoxShadow(boxShadow)};\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 cssGridItem(): (props: {\n  grid: ResponsiveValue<{ spans: Array<Array<number>>; count: number }>\n  index: number\n  columnGap?: ResponsiveValue<LengthValue>\n  rowGap?: ResponsiveValue<LengthValue>\n}) => CSSRules {\n  return props => css`\n    display: flex;\n\n    /* TODO: A default span of 12 won't work once the column count is modifiable. */\n    ${cssMediaRules(\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 cssTextStyle(\n  defaultValue: {\n    fontFamily?: string | null | undefined\n    letterSpacing: number | null | undefined\n    fontSize: LengthValue | null | undefined\n    fontWeight: number | null | undefined\n    textTransform: Array<'uppercase'>\n    fontStyle: Array<'italic'>\n  } = {\n    fontFamily: null,\n    letterSpacing: null,\n    fontSize: null,\n    fontWeight: null,\n    textTransform: [],\n    fontStyle: [],\n  },\n): (arg0: { textStyle?: TextStyleValue | null | undefined }) => CSSRules {\n  return props => css`\n    ${cssMediaRules([props.textStyle], ([textStyle = defaultValue]) => {\n      const {\n        fontSize,\n        fontWeight,\n        fontStyle = [],\n        textTransform = [],\n        letterSpacing,\n        fontFamily,\n      } = textStyle\n\n      return css`\n        ${fontFamily != null\n          ? css`\n              font-family: '${fontFamily}';\n            `\n          : ''};\n        ${fontWeight != null\n          ? css`\n              font-weight: ${fontWeight};\n            `\n          : ''};\n        ${letterSpacing != null\n          ? css`\n              letter-spacing: ${letterSpacing}px;\n            `\n          : ''};\n        ${fontSize != null\n          ? css`\n              font-size: ${`${fontSize.value}${fontSize.unit}`};\n            `\n          : ''};\n        ${textTransform.includes('uppercase')\n          ? css`\n              text-transform: uppercase;\n            `\n          : ''};\n        ${fontStyle.includes('italic')\n          ? css`\n              font-style: italic;\n            `\n          : ''};\n      `\n    })}\n  `\n}\n"],"names":["joinResponsiveValues","getDevice","getDeviceMediaQuery","css","colorToString","getIndexes"],"mappings":"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"}
+{"version":3,"file":"cssMediaRules.cjs.js","sources":["../src/components/utils/cssMediaRules.ts"],"sourcesContent":["import { css, CSSObject } from 'styled-components'\nimport {\n  WidthProperty,\n  MarginProperty,\n  MarginTopProperty,\n  MarginRightProperty,\n  MarginBottomProperty,\n  MarginLeftProperty,\n  PaddingProperty,\n  PaddingTopProperty,\n  PaddingRightProperty,\n  PaddingBottomProperty,\n  PaddingLeftProperty,\n  BorderRadiusProperty,\n  BorderTopLeftRadiusProperty,\n  BorderTopRightRadiusProperty,\n  BorderBottomLeftRadiusProperty,\n  BorderBottomRightRadiusProperty,\n} from 'csstype'\n\nimport {\n  ResponsiveValue,\n  ResponsiveValueType as ExtractResponsiveValue,\n  Length as LengthValue,\n} from '../../prop-controllers'\nimport {\n  FallbackStrategy,\n  getDevice,\n  getDeviceMediaQuery,\n  join as joinResponsiveValues,\n} from './devices'\nimport { getIndexes } from './columns'\nimport {\n  BorderRadiusValue,\n  MarginValue,\n  PaddingValue,\n  TextStyleValue,\n  WidthValue,\n} from '../../prop-controllers/descriptors'\nimport { colorToString } from './colorToString'\nimport {\n  BorderSide,\n  BorderPropControllerData,\n  BoxShadowData,\n  BoxShadowPropControllerData,\n} from '../hooks'\n\ntype CSSRules = ReturnType<typeof css>\n\nexport function cssMediaRules<V, A extends ReadonlyArray<ResponsiveValue<V> | null | undefined>, P>(\n  responsiveValues: A | ((props: P) => A),\n  join: (values: { [K in keyof A]: ExtractResponsiveValue<A[K]> | undefined }) =>\n    | CSSRules\n    | CSSObject,\n  strategy?: FallbackStrategy<V>,\n): (props: P) => CSSRules {\n  return props =>\n    joinResponsiveValues(\n      typeof responsiveValues === 'function' ? responsiveValues(props) : responsiveValues,\n      join,\n      strategy,\n    ).reduce((acc, { deviceId, value }) => {\n      const device = getDevice(deviceId)\n      const mediaQuery = getDeviceMediaQuery(device)\n\n      return css`\n        ${acc}${mediaQuery} {\n          ${value}\n        }\n      `\n    }, css`` as CSSRules)\n}\n\nexport function cssWidth(\n  defaultValue: LengthValue | WidthProperty<string | number> = '100%',\n): (props: { width?: WidthValue }) => CSSRules {\n  return props => css`\n    max-width: 100%;\n    ${cssMediaRules(\n      [props.width] as const,\n      ([width = defaultValue]) => css`\n        width: ${typeof width === 'object' ? `${width.value}${width.unit}` : width};\n      `,\n    )}\n  `\n}\n\nfunction getMarginSide(marginSide: LengthValue | MarginProperty<string | number>) {\n  return typeof marginSide === 'object' ? `${marginSide.value}${marginSide.unit}` : marginSide\n}\n\nexport function cssMargin(\n  defaultValue: {\n    marginTop?: LengthValue | MarginTopProperty<string | number>\n    marginRight?: LengthValue | MarginRightProperty<string | number>\n    marginBottom?: LengthValue | MarginBottomProperty<string | number>\n    marginLeft?: LengthValue | MarginLeftProperty<string | number>\n  } = {},\n): (props: { margin?: MarginValue }) => CSSRules {\n  const defaultMarginTop = defaultValue.marginTop === undefined ? 0 : defaultValue.marginTop\n  const defaultMarginRight =\n    defaultValue.marginRight === undefined ? 'auto' : defaultValue.marginRight\n  const defaultMarginBottom =\n    defaultValue.marginBottom === undefined ? 0 : defaultValue.marginBottom\n  const defaultMarginLeft = defaultValue.marginLeft === undefined ? 'auto' : defaultValue.marginLeft\n\n  return props => css`\n    ${cssMediaRules(\n      [props.margin] as const,\n      ([\n        {\n          marginTop,\n          marginRight,\n          marginBottom,\n          marginLeft,\n        } = {} as ExtractResponsiveValue<MarginValue>,\n      ]) => css`\n        margin-top: ${getMarginSide(marginTop || defaultMarginTop)};\n        margin-right: ${getMarginSide(marginRight || defaultMarginRight)};\n        margin-bottom: ${getMarginSide(marginBottom || defaultMarginBottom)};\n        margin-left: ${getMarginSide(marginLeft || defaultMarginLeft)};\n      `,\n    )}\n  `\n}\n\nfunction getPaddingSide(paddingSide: LengthValue | PaddingProperty<string | number>) {\n  return typeof paddingSide === 'object' ? `${paddingSide.value}${paddingSide.unit}` : paddingSide\n}\n\nexport function cssPadding(\n  defaultValue: {\n    paddingTop?: LengthValue | PaddingTopProperty<string | number>\n    paddingRight?: LengthValue | PaddingRightProperty<string | number>\n    paddingBottom?: LengthValue | PaddingBottomProperty<string | number>\n    paddingLeft?: LengthValue | PaddingLeftProperty<string | number>\n  } = {},\n): (props: { padding?: PaddingValue }) => CSSRules {\n  const defaultPaddingTop = defaultValue.paddingTop === undefined ? 0 : defaultValue.paddingTop\n  const defaultPaddingRight =\n    defaultValue.paddingRight === undefined ? 0 : defaultValue.paddingRight\n  const defaultPaddingBottom =\n    defaultValue.paddingBottom === undefined ? 0 : defaultValue.paddingBottom\n  const defaultPaddingLeft = defaultValue.paddingLeft === undefined ? 0 : defaultValue.paddingLeft\n\n  return props => css`\n    ${cssMediaRules(\n      [props.padding] as const,\n      ([\n        {\n          paddingTop,\n          paddingRight,\n          paddingBottom,\n          paddingLeft,\n        } = {} as ExtractResponsiveValue<PaddingValue>,\n      ]) => css`\n        padding-top: ${getPaddingSide(paddingTop || defaultPaddingTop)};\n        padding-right: ${getPaddingSide(paddingRight || defaultPaddingRight)};\n        padding-bottom: ${getPaddingSide(paddingBottom || defaultPaddingBottom)};\n        padding-left: ${getPaddingSide(paddingLeft || defaultPaddingLeft)};\n      `,\n    )}\n  `\n}\n\nconst defaultBorderSide = { width: 0, style: 'solid', color: null }\n\nconst getBorderSide = ({ width, style, color }: BorderSide) =>\n  `${width != null ? width : 0}px ${style} ${color != null ? colorToString(color) : 'black'}`\n\nexport function cssBorder(\n  defaultValue: {\n    borderTop?: BorderSide\n    borderRight?: BorderSide\n    borderBottom?: BorderSide\n    borderLeft?: BorderSide\n  } = {},\n): (props: { border?: BorderPropControllerData | null | undefined }) => CSSRules {\n  const defaultBorderTop =\n    defaultValue.borderTop === undefined ? defaultBorderSide : defaultValue.borderTop\n  const defaultBorderRight =\n    defaultValue.borderRight === undefined ? defaultBorderSide : defaultValue.borderRight\n  const defaultBorderBottom =\n    defaultValue.borderBottom === undefined ? defaultBorderSide : defaultValue.borderBottom\n  const defaultBorderLeft =\n    defaultValue.borderLeft === undefined ? defaultBorderSide : defaultValue.borderLeft\n\n  return props => css`\n    ${cssMediaRules(\n      [props.border] as const,\n      ([\n        {\n          borderTop,\n          borderRight,\n          borderBottom,\n          borderLeft,\n        } = {} as ExtractResponsiveValue<BorderPropControllerData>,\n      ]) => css`\n        border-top: ${getBorderSide(borderTop || defaultBorderTop)};\n        border-right: ${getBorderSide(borderRight || defaultBorderRight)};\n        border-bottom: ${getBorderSide(borderBottom || defaultBorderBottom)};\n        border-left: ${getBorderSide(borderLeft || defaultBorderLeft)};\n      `,\n    )}\n  `\n}\n\nfunction getBorderRadiusCorner(\n  borderRadiusCorner: LengthValue | BorderRadiusProperty<string | number>,\n) {\n  return typeof borderRadiusCorner === 'object'\n    ? `${borderRadiusCorner.value}${borderRadiusCorner.unit}`\n    : borderRadiusCorner\n}\n\nexport function cssBorderRadius(\n  defaultValue: {\n    borderTopLeftRadius?: LengthValue | BorderTopLeftRadiusProperty<string | number>\n    borderTopRightRadius?: LengthValue | BorderTopRightRadiusProperty<string | number>\n    borderBottomLeftRadius?: LengthValue | BorderBottomLeftRadiusProperty<string | number>\n    borderBottomRightRadius?: LengthValue | BorderBottomRightRadiusProperty<string | number>\n  } = {},\n): (props: { borderRadius?: BorderRadiusValue }) => CSSRules {\n  const defaultBorderTopLeftRadius =\n    defaultValue.borderTopLeftRadius === undefined ? 0 : defaultValue.borderTopLeftRadius\n  const defaultBorderTopRightRadius =\n    defaultValue.borderTopRightRadius === undefined ? 0 : defaultValue.borderTopRightRadius\n  const defaultPaddingBottom =\n    defaultValue.borderBottomLeftRadius === undefined ? 0 : defaultValue.borderBottomLeftRadius\n  const defaultPaddingLeft =\n    defaultValue.borderBottomRightRadius === undefined ? 0 : defaultValue.borderBottomRightRadius\n\n  return props => css`\n    ${cssMediaRules(\n      [props.borderRadius] as const,\n      ([\n        {\n          borderTopLeftRadius,\n          borderTopRightRadius,\n          borderBottomLeftRadius,\n          borderBottomRightRadius,\n        } = {} as ExtractResponsiveValue<BorderRadiusValue>,\n      ]) => css`\n        border-top-left-radius: ${getBorderRadiusCorner(\n          borderTopLeftRadius || defaultBorderTopLeftRadius,\n        )};\n        border-top-right-radius: ${getBorderRadiusCorner(\n          borderTopRightRadius || defaultBorderTopRightRadius,\n        )};\n        border-bottom-left-radius: ${getBorderRadiusCorner(\n          borderBottomLeftRadius || defaultPaddingBottom,\n        )};\n        border-bottom-right-radius: ${getBorderRadiusCorner(\n          borderBottomRightRadius || defaultPaddingLeft,\n        )};\n      `,\n    )}\n  `\n}\n\nconst getBoxShadow = (shadows: BoxShadowData) =>\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 cssBoxShadow(\n  defaultValue: BoxShadowData = [],\n): (props: { boxShadow?: BoxShadowPropControllerData | null | undefined }) => CSSRules {\n  return props => css`\n    ${cssMediaRules(\n      [props.boxShadow] as const,\n      ([boxShadow = defaultValue]) => css`\n        box-shadow: ${getBoxShadow(boxShadow)};\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 cssGridItem(): (props: {\n  grid: ResponsiveValue<{ spans: Array<Array<number>>; count: number }>\n  index: number\n  columnGap?: ResponsiveValue<LengthValue>\n  rowGap?: ResponsiveValue<LengthValue>\n}) => CSSRules {\n  return props => css`\n    display: flex;\n\n    /* TODO: A default span of 12 won't work once the column count is modifiable. */\n    ${cssMediaRules(\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 cssTextStyle(\n  defaultValue: {\n    fontFamily?: string | null | undefined\n    letterSpacing: number | null | undefined\n    fontSize: LengthValue | null | undefined\n    fontWeight: number | null | undefined\n    textTransform: Array<'uppercase'>\n    fontStyle: Array<'italic'>\n  } = {\n    fontFamily: null,\n    letterSpacing: null,\n    fontSize: null,\n    fontWeight: null,\n    textTransform: [],\n    fontStyle: [],\n  },\n): (arg0: { textStyle?: TextStyleValue | null | undefined }) => CSSRules {\n  return props => css`\n    ${cssMediaRules([props.textStyle], ([textStyle = defaultValue]) => {\n      const {\n        fontSize,\n        fontWeight,\n        fontStyle = [],\n        textTransform = [],\n        letterSpacing,\n        fontFamily,\n      } = textStyle\n\n      return css`\n        ${fontFamily != null\n          ? css`\n              font-family: '${fontFamily}';\n            `\n          : ''};\n        ${fontWeight != null\n          ? css`\n              font-weight: ${fontWeight};\n            `\n          : ''};\n        ${letterSpacing != null\n          ? css`\n              letter-spacing: ${letterSpacing}px;\n            `\n          : ''};\n        ${fontSize != null\n          ? css`\n              font-size: ${`${fontSize.value}${fontSize.unit}`};\n            `\n          : ''};\n        ${textTransform.includes('uppercase')\n          ? css`\n              text-transform: uppercase;\n            `\n          : ''};\n        ${fontStyle.includes('italic')\n          ? css`\n              font-style: italic;\n            `\n          : ''};\n      `\n    })}\n  `\n}\n"],"names":["joinResponsiveValues","getDevice","getDeviceMediaQuery","css","colorToString","getIndexes"],"mappings":"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"}

package/dist/index.cjs.js

@@ -41,26 +41,30 @@ var withSelector = require("use-sync-external-store/shim/with-selector");
 var reactPage = require("./react-page.cjs.js");
 var actions = require("./actions.cjs.js");
 var dynamic = require("next/dynamic");
-var NextDocument = require("next/document");
-var styled = require("styled-components");
-var slate = require("slate");
-var createEmotionServer = require("@emotion/server/create-instance");
-var css = require("@emotion/css");
 var client = require("@apollo/client");
 var batchHttp = require("@apollo/client/link/batch-http");
+var slate = require("slate");
 var graphql = require("./graphql.cjs.js");
-var jsxRuntime = require("react/jsx-runtime");
 var image = require("./image.cjs.js");
+var shape = require("./shape.cjs.js");
+var jsxRuntime = require("react/jsx-runtime");
+var styled = require("styled-components");
 var textInput = require("./text-input.cjs.js");
 var color = require("./color.cjs.js");
-var shape = require("./shape.cjs.js");
 var slot = require("./slot.cjs.js");
+var css = require("@emotion/css");
 var ColorHelper = require("color");
 var scrollIntoView = require("scroll-into-view-if-needed");
 var boxModels = require("./box-models.cjs.js");
 var reactDom = require("react-dom");
 var parse = require("html-react-parser");
 var Head = require("next/head");
+require("@emotion/server/create-instance");
+require("next/document");
+require("cookie");
+require("cors");
+require("http-proxy");
+require("set-cookie-parser");
 var uuid = require("uuid/v4");
 var ipsum = require("corporate-ipsum");
 function _interopDefaultLegacy(e) {
@@ -88,15 +92,57 @@ function _interopNamespace(e) {
 }
 var React__namespace = /* @__PURE__ */ _interopNamespace(React);
 var dynamic__default = /* @__PURE__ */ _interopDefaultLegacy(dynamic);
-var NextDocument__default = /* @__PURE__ */ _interopDefaultLegacy(NextDocument);
 var styled__default = /* @__PURE__ */ _interopDefaultLegacy(styled);
-var createEmotionServer__default = /* @__PURE__ */ _interopDefaultLegacy(createEmotionServer);
 var ColorHelper__default = /* @__PURE__ */ _interopDefaultLegacy(ColorHelper);
 var scrollIntoView__default = /* @__PURE__ */ _interopDefaultLegacy(scrollIntoView);
 var parse__default = /* @__PURE__ */ _interopDefaultLegacy(parse);
 var Head__default = /* @__PURE__ */ _interopDefaultLegacy(Head);
 var uuid__default = /* @__PURE__ */ _interopDefaultLegacy(uuid);
 var ipsum__default = /* @__PURE__ */ _interopDefaultLegacy(ipsum);
+const SCRIPT_TAG = "script";
+function BodySnippet({
+  code,
+  cleanup
+}) {
+  React.useEffect(() => {
+    const container = document.createElement("div");
+    container.innerHTML = code;
+    const walker = document.createTreeWalker(container, NodeFilter.SHOW_ELEMENT);
+    const scripts = [];
+    while (walker.nextNode()) {
+      if (walker.currentNode instanceof HTMLScriptElement)
+        scripts.push(walker.currentNode);
+    }
+    scripts.forEach((inlineScript) => {
+      var _a;
+      const executableScript = document.createElement(SCRIPT_TAG);
+      executableScript.textContent = inlineScript.textContent;
+      Array.from(inlineScript.attributes).forEach(({
+        name,
+        value
+      }) => {
+        executableScript.setAttribute(name, value);
+      });
+      (_a = inlineScript.parentNode) == null ? void 0 : _a.replaceChild(executableScript, inlineScript);
+    });
+    const nodes = Array.from(container.childNodes);
+    document.body.append(...nodes);
+    return () => {
+      nodes.forEach((node) => {
+        var _a;
+        (_a = node.parentNode) == null ? void 0 : _a.removeChild(node);
+      });
+      if (cleanup == null)
+        return;
+      const cleanUp = new Function(cleanup);
+      try {
+        cleanUp();
+      } catch {
+      }
+    };
+  }, [code, cleanup]);
+  return null;
+}
 const SWATCHES_BY_ID = client.gql`
   query SwatchesById($ids: [ID!]!) {
     swatches(ids: $ids) {
@@ -521,50 +567,6 @@ function MakeswiftProvider({
     children
   });
 }
-const SCRIPT_TAG = "script";
-function BodySnippet({
-  code,
-  cleanup
-}) {
-  React.useEffect(() => {
-    const container = document.createElement("div");
-    container.innerHTML = code;
-    const walker = document.createTreeWalker(container, NodeFilter.SHOW_ELEMENT);
-    const scripts = [];
-    while (walker.nextNode()) {
-      if (walker.currentNode instanceof HTMLScriptElement)
-        scripts.push(walker.currentNode);
-    }
-    scripts.forEach((inlineScript) => {
-      var _a;
-      const executableScript = document.createElement(SCRIPT_TAG);
-      executableScript.textContent = inlineScript.textContent;
-      Array.from(inlineScript.attributes).forEach(({
-        name,
-        value
-      }) => {
-        executableScript.setAttribute(name, value);
-      });
-      (_a = inlineScript.parentNode) == null ? void 0 : _a.replaceChild(executableScript, inlineScript);
-    });
-    const nodes = Array.from(container.childNodes);
-    document.body.append(...nodes);
-    return () => {
-      nodes.forEach((node) => {
-        var _a;
-        (_a = node.parentNode) == null ? void 0 : _a.removeChild(node);
-      });
-      if (cleanup == null)
-        return;
-      const cleanUp = new Function(cleanup);
-      try {
-        cleanUp();
-      } catch {
-      }
-    };
-  }, [code, cleanup]);
-  return null;
-}
 function is(x, y) {
   if (x === y)
     return x !== 0 || y !== 0 || 1 / x === 1 / y;
@@ -602,6 +604,10 @@ const deepEqual = (a, b) => {
   }
   return true;
 };
+const SnippetLocation = {
+  Body: "BODY",
+  Head: "HEAD"
+};
 const defaultFavicon = {
   mimetype: "image/png",
   publicUrl: "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACIAAAAiCAYAAAA6RwvCAAAACXBIWXMAABcRAAAXEQHKJvM/AAABjElEQVRYhc2XzU3EMBCFB8TddAAXn6EE6GCpgNABZ1/IXnymBOgAOmA7YM8+ABVsXEHQQFaKQryeN3Yk3ilKJtEnv/nLUd/3pFG0riGi88yrnQn+UfJ5FUi0riWiB2H4nQn+KRd0DFP8agXEfkqCYJBoHdtxIQxfm+DfFgEhoith3NYE30o/qgGR2BJB+xY7kdYEL8oNFUi0jiFMJuxVWrJqEMFxsyUNCsE6AeNztvBp7aJ143vXksoRnwhYtmNdSoIQa6RlO9YXEWW7KgoCleOgxgTf1QZBT+RZ2lXFING6UxCCq+ceeUE8fYdknY599v9sJvzGBP+yCEgC7GPmETc0OJ+0awAlkhe2pAbIXAeFZ8xe2g2Nk3c3ub0xwWt6zY9qbmiqGVMbZK21ZC/YmhlbeBMTzZNDQqcvDb1kM1x32iqZSt1HaqukfKvq34BAOTLsrH+ETNmUkKHHA+428RgeclPVWozeSyAI2EdWB34jtqXNTAySOY3i/KgFIlqOa4GkFmBegorzg4joG07he/M7zl6jAAAAAElFTkSuQmCC"
@@ -672,9 +678,8 @@ const SITE_FONTS_QUERY = client.gql`
     }
   }
 `;
-function Page$1({
-  page,
-  preview = false
+function Page({
+  document: page
 }) {
   var _a;
   const isInBuilder = useIsInBuilder();
@@ -735,8 +740,8 @@ function Page$1({
       return `${family.replace(/ /g, "+")}:${activeVariantSpecifiers}`;
     }).join("|");
   }, [siteData, page]);
-  const filteredSnippets = React.useMemo(() => snippets.filter((snippet) => preview ? snippet.builderEnabled : snippet.liveEnabled), [snippets]);
-  const headSnippets = React.useMemo(() => filteredSnippets.filter((snippet) => snippet.location === "HEAD"), [filteredSnippets]);
+  const filteredSnippets = React.useMemo(() => snippets.filter((snippet) => isInBuilder ? snippet.builderEnabled : snippet.liveEnabled), [snippets, isInBuilder]);
+  const headSnippets = React.useMemo(() => filteredSnippets.filter((snippet) => snippet.location === SnippetLocation.Head), [filteredSnippets]);
   const previousHeadSnippets = React.useRef(null);
   React.useEffect(() => {
     var _a2;
@@ -834,189 +839,12 @@ function Page$1({
       }))]
     }), /* @__PURE__ */ jsxRuntime.jsx(DocumentReference, {
       documentReference: reactPage.createDocumentReference(page.id)
-    }), filteredSnippets.filter((snippet) => snippet.location === "BODY").map((snippet) => /* @__PURE__ */ jsxRuntime.jsx(BodySnippet, {
+    }), filteredSnippets.filter((snippet) => snippet.location === SnippetLocation.Body).map((snippet) => /* @__PURE__ */ jsxRuntime.jsx(BodySnippet, {
       code: snippet.code,
       cleanup: snippet.cleanup
     }, snippet.id))]
   });
 }
-class Document$1 extends NextDocument__default["default"] {
-  static async getInitialProps(ctx) {
-    const sheet = new styled.ServerStyleSheet();
-    const originalRenderPage = ctx.renderPage;
-    try {
-      ctx.renderPage = () => originalRenderPage({
-        enhanceApp: (App) => (props) => sheet.collectStyles(/* @__PURE__ */ jsxRuntime.jsx(App, __spreadValues({}, props)))
-      });
-      const initialProps = await NextDocument__default["default"].getInitialProps(ctx);
-      slate.KeyUtils.resetGenerator();
-      const {
-        extractCritical
-      } = createEmotionServer__default["default"](css.cache);
-      const {
-        ids,
-        css: css$1
-      } = extractCritical(initialProps.html);
-      return __spreadProps(__spreadValues({}, initialProps), {
-        styles: /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, {
-          children: [initialProps.styles, sheet.getStyleElement(), /* @__PURE__ */ jsxRuntime.jsx("style", {
-            "data-emotion": `css ${ids.join(" ")}`,
-            dangerouslySetInnerHTML: {
-              __html: css$1
-            }
-          })]
-        })
-      });
-    } finally {
-      sheet.seal();
-    }
-  }
-}
-const REVALIDATE_SECONDS = 1;
-function getApiOrigin() {
-  var _a;
-  const apiOriginString = (_a = process["env"].MAKESWIFT_API_HOST) != null ? _a : "https://api.makeswift.com";
-  try {
-    const url = new URL(apiOriginString);
-    return url.origin;
-  } catch (error) {
-    const errorMessage = `"MAKESWIFT_API_HOST" environment variable must be a valid URL. Expected something like "https://api.makeswift.com" but instead received "${apiOriginString}".`;
-    throw new Error(errorMessage);
-  }
-}
-const uuidRegExp = /^[0-9a-fA-F]{8}\b-[0-9a-fA-F]{4}\b-[0-9a-fA-F]{4}\b-[0-9a-fA-F]{4}\b-[0-9a-fA-F]{12}$/;
-function getApiKey() {
-  const apiKey = process["env"].MAKESWIFT_SITE_API_KEY;
-  if (apiKey == null) {
-    const errorMessage = '"MAKESWIFT_SITE_API_KEY" environment variable must be set. Please add your site API key to your `.env.local` file. More info: https://www.makeswift.com/docs/guides/manual-setup#add-environment-variables';
-    throw new Error(errorMessage);
-  }
-  if (!uuidRegExp.test(apiKey)) {
-    const errorMEssage = `Invalid Makeswift site API key "${apiKey}". Please check your \`.env.local\` file for the "MAKESWIFT_SITE_API_KEY" environment variable. More info: https://www.makeswift.com/docs/guides/manual-setup#add-environment-variables`;
-    throw new Error(errorMEssage);
-  }
-  return apiKey;
-}
-async function getServerSideProps({
-  query: {
-    pageId
-  }
-}) {
-  const url = `${getApiOrigin()}/v0/preview-page-data?id=${pageId}`;
-  const res = await fetch(url, {
-    headers: {
-      "x-api-key": getApiKey()
-    }
-  });
-  if (res.status === 404) {
-    console.error(await res.json());
-    return {
-      notFound: true
-    };
-  }
-  if (!res.ok) {
-    const json = await res.json();
-    throw new Error(json.message);
-  }
-  const page = await res.json();
-  if (page == null)
-    return {
-      notFound: true
-    };
-  const makeswiftApiEndpoint = `${getApiOrigin()}/graphql`;
-  const client2 = new MakeswiftClient({
-    uri: makeswiftApiEndpoint
-  });
-  const cacheData = await client2.prefetch(page.data);
-  return {
-    props: {
-      page,
-      rootElement: page.data,
-      makeswiftApiEndpoint,
-      cacheData,
-      preview: true
-    }
-  };
-}
-async function getStaticProps({
-  params
-}) {
-  if (params == null)
-    return {
-      notFound: true,
-      revalidate: REVALIDATE_SECONDS
-    };
-  const {
-    path = []
-  } = params;
-  const url = `${getApiOrigin()}/v0/live-page-data?path=${path.join("/")}`;
-  const res = await fetch(url, {
-    headers: {
-      "x-api-key": getApiKey()
-    }
-  });
-  if (res.status === 404) {
-    console.error(await res.json());
-    return {
-      notFound: true,
-      revalidate: REVALIDATE_SECONDS
-    };
-  }
-  if (!res.ok) {
-    const json = await res.json();
-    throw new Error(json.message);
-  }
-  const page = await res.json();
-  if (page == null)
-    return {
-      notFound: true,
-      revalidate: REVALIDATE_SECONDS
-    };
-  const makeswiftApiEndpoint = `${getApiOrigin()}/graphql`;
-  const client2 = new MakeswiftClient({
-    uri: makeswiftApiEndpoint
-  });
-  const cacheData = await client2.prefetch(page.data);
-  return {
-    props: {
-      page,
-      rootElement: page.data,
-      makeswiftApiEndpoint,
-      cacheData,
-      preview: false
-    },
-    revalidate: REVALIDATE_SECONDS
-  };
-}
-async function getStaticPaths() {
-  return {
-    paths: [],
-    fallback: "blocking"
-  };
-}
-function Page({
-  page,
-  rootElement,
-  makeswiftApiEndpoint,
-  cacheData,
-  preview
-}) {
-  const [client2] = React.useState(() => new MakeswiftClient({
-    uri: makeswiftApiEndpoint,
-    cacheData
-  }));
-  React.useEffect(() => {
-    client2.updateCacheData(cacheData);
-  }, [client2, cacheData]);
-  return /* @__PURE__ */ jsxRuntime.jsx(RuntimeProvider, {
-    client: client2,
-    rootElements: /* @__PURE__ */ new Map([[page.id, rootElement]]),
-    children: /* @__PURE__ */ jsxRuntime.jsx(Page$1, {
-      page,
-      preview
-    })
-  });
-}
 const FORWARDED_NEXT_DYNAMIC_REF_KEY = "__forwarded_next_dynamic_ref__";
 function saveForwardedRef(props, ref) {
   return __spreadProps(__spreadValues({}, props), {
@@ -3342,15 +3170,13 @@ exports.DEFAULT_ITEM_ANIMATE_DURATION = DEFAULT_ITEM_ANIMATE_DURATION;
 exports.DEFAULT_ITEM_ANIMATE_TYPE = DEFAULT_ITEM_ANIMATE_TYPE;
 exports.DEFAULT_ITEM_STAGGER_DURATION = DEFAULT_ITEM_STAGGER_DURATION;
 exports.DEVICES = DEVICES;
-exports.Document = Document$1;
 exports.DocumentReference = DocumentReference;
 exports.Element = Element;
 exports.FILES_BY_ID = FILES_BY_ID;
 exports.MakeswiftClient = MakeswiftClient;
 exports.MakeswiftComponentType = MakeswiftComponentType;
 exports.PAGE_SNIPPETS_QUERY = PAGE_SNIPPETS_QUERY;
-exports.Page = Page$1;
-exports.Page$1 = Page;
+exports.Page = Page;
 exports.PageProvider = PageProvider;
 exports.Provider = Provider;
 exports.ReactRuntime = ReactRuntime;
@@ -3368,9 +3194,6 @@ exports.forwardNextDynamicRef = forwardNextDynamicRef;
 exports.getDevice = getDevice;
 exports.getDeviceMediaQuery = getDeviceMediaQuery;
 exports.getIndexes = getIndexes;
-exports.getServerSideProps = getServerSideProps;
-exports.getStaticPaths = getStaticPaths;
-exports.getStaticProps = getStaticProps;
 exports.isNonNullable = isNonNullable;
 exports.join = join;
 exports.shallowMergeFallbacks = shallowMergeFallbacks;