unframer 2.0.1 → 2.1.0

package/esm/framer.js

@@ -8795,7 +8795,7 @@ var cancelSync = stepsOrder.reduce((acc, key7) => {
     acc[key7] = (process2) => cancelFrame(process2);
     return acc;
 }, {});
-// https :https://app.framerstatic.com/framer.L736M3IJ.js
+// https :https://app.framerstatic.com/framer.PRO3WDEJ.js
 import { Component as Component2, } from 'react';
 import React12 from 'react';
 import { jsx as _jsx5, } from 'react/jsx-runtime';
@@ -8971,16 +8971,16 @@ import { jsx as jsx54, jsxs as jsxs18, } from 'react/jsx-runtime';
 import { jsx as jsx55, } from 'react/jsx-runtime';
 import { jsx as jsx56, } from 'react/jsx-runtime';
 import { jsx as jsx57, } from 'react/jsx-runtime';
+import React85 from 'react';
 import { jsx as jsx58, } from 'react/jsx-runtime';
-import { useRef as useRef18, } from 'react';
 import { jsx as jsx59, } from 'react/jsx-runtime';
-import { useRef as useRef19, } from 'react';
-import { jsx as jsx60, } from 'react/jsx-runtime';
-import React85 from 'react';
-import { jsx as jsx61, jsxs as jsxs19, } from 'react/jsx-runtime';
-import { Children as Children32, cloneElement as cloneElement32, forwardRef as forwardRef52, isValidElement as isValidElement32, useContext as useContext162, useInsertionEffect as useInsertionEffect42, useRef as useRef21, } from 'react';
-import * as React86 from 'react';
-import { useRef as useRef20, } from 'react';
+import React86 from 'react';
+import { jsx as jsx60, jsxs as jsxs19, } from 'react/jsx-runtime';
+import React87 from 'react';
+import { jsx as jsx61, jsxs as jsxs20, } from 'react/jsx-runtime';
+import { Children as Children32, cloneElement as cloneElement32, forwardRef as forwardRef52, isValidElement as isValidElement32, useContext as useContext162, useInsertionEffect as useInsertionEffect42, useRef as useRef19, } from 'react';
+import * as React88 from 'react';
+import { useRef as useRef18, } from 'react';
 import { jsx as jsx62, } from 'react/jsx-runtime';
 import { jsx as jsx63, } from 'react/jsx-runtime';
 import { useEffect as useEffect142, useState as useState22, } from 'react';
@@ -10146,12 +10146,13 @@ var require_fontfaceobserver_standalone = __commonJS({
     },
 });
 function renderPage(Page4, defaultPageStyle) {
-    return React12.isValidElement(Page4)
-        ? React12.cloneElement(Page4, { style: defaultPageStyle, })
-        : React12.createElement(Page4, { style: defaultPageStyle, });
+    const style = { style: defaultPageStyle, };
+    return React12.isValidElement(Page4) ? React12.cloneElement(Page4, style) : React12.createElement(Page4, style);
 }
 var NotFoundError = class extends Error {
 };
+var ErrorBoundaryCaughtError = class extends Error {
+};
 var ErrorBoundary = class extends Component2 {
     constructor(props) {
         super(props);
@@ -10178,7 +10179,9 @@ var ErrorBoundary = class extends Component2 {
             return this.props.children;
         }
         if (!(this.state.error instanceof NotFoundError)) {
-            throw this.state.error;
+            const error = new ErrorBoundaryCaughtError();
+            error.cause = this.state.error;
+            throw error;
         }
         const { notFoundPage, defaultPageStyle, } = this.props;
         if (!notFoundPage) {
@@ -11046,17 +11049,17 @@ function RoutesProvider({ routes, children, }) {
     return _jsx2(RouterContext.Provider, { value: { getRoute, }, children, });
 }
 var SuspenseErrorBoundary = class extends Component22 {
-    constructor(props) {
-        super(props);
+    constructor() {
+        super(...arguments);
         this.state = { error: void 0, };
     }
     static getDerivedStateFromError(error) {
-        console.error('Error in SuspenseErrorBoundary (getDerivedStateFromError).', error);
+        console.error('Derived error in SuspenseErrorBoundary', error);
         return { error, };
     }
     componentDidCatch(error, errorInfo) {
         var _a;
-        console.error('Caught error in in SuspenseErrorBoundary.', error, errorInfo);
+        console.error('Caught error in SuspenseErrorBoundary', error, errorInfo);
         (_a = window.__framer_events) === null || _a === void 0 ? void 0 : _a.push([
             'published_site_load_recoverable_error',
             {
@@ -11069,6 +11072,9 @@ var SuspenseErrorBoundary = class extends Component22 {
         if (this.state.error === void 0) {
             return this.props.children;
         }
+        if (this.state.error instanceof ErrorBoundaryCaughtError) {
+            throw this.state.error.cause;
+        }
         return _jsx3(Suspense, { children: this.props.fallbackChildren, });
     }
 };
@@ -16550,6 +16556,7 @@ var hideScrollbars = [
     `[data-hide-scrollbars="true"]::-webkit-scrollbar { width: 0px; height: 0px; }`,
     `[data-hide-scrollbars="true"]::-webkit-scrollbar-thumb { background: transparent; }`,
 ];
+var formInputRules = [`[data-framer-component-type="Form"] input { padding: var(--input-padding); }`,];
 var frameCSSRules = (isPreview) => {
     return isPreview ? frameCSS : [];
 };
@@ -16571,6 +16578,7 @@ var combineCSSRules = (isPreview) => [
     ...svgCSSRules,
     ...resetCSS,
     ...hideScrollbars,
+    ...formInputRules,
 ];
 export var combinedCSSRules = combineCSSRules(false);
 var combinedCSSRulesForPreview = combineCSSRules(true);
@@ -20067,7 +20075,7 @@ function hasDataFramerName(props) {
     return 'data-framer-name' in props;
 }
 var VisibleFrame = /* @__PURE__ */ forwardRef4(function VisibleFrame2(props, forwardedRef) {
-    var _f;
+    var _f, _j;
     const { name, center, border, _border, __portal, } = props;
     const { props: propsWithOverrides, children, } = processOverrideForwarding(props);
     const motionProps = getMotionProps(propsWithOverrides);
@@ -20076,7 +20084,7 @@ var VisibleFrame = /* @__PURE__ */ forwardRef4(function VisibleFrame2(props, for
     const fallbackRef = useRef62(null);
     const ref = forwardedRef !== null && forwardedRef !== void 0 ? forwardedRef : fallbackRef;
     const dataProps = {
-        'data-framer-component-type': 'Frame',
+        'data-framer-component-type': (_f = props.componentType) !== null && _f !== void 0 ? _f : 'Frame',
         'data-framer-cursor': cursor,
         'data-framer-highlight': cursor === 'pointer' ? true : void 0,
         'data-layoutid': layoutId,
@@ -20106,7 +20114,7 @@ var VisibleFrame = /* @__PURE__ */ forwardRef4(function VisibleFrame2(props, for
         children: [
             backgroundImage
                 ? /* @__PURE__ */ jsx10(BackgroundImageComponent, {
-                    alt: (_f = props.alt) !== null && _f !== void 0 ? _f : '',
+                    alt: (_j = props.alt) !== null && _j !== void 0 ? _j : '',
                     image: backgroundImage,
                     containerSize: rect !== null && rect !== void 0 ? rect : void 0,
                     nodeId: props.id && nodeIdFromString(props.id),
@@ -23700,6 +23708,9 @@ function paddingFromProps(props) {
     };
 }
 function makePaddingString({ top, left, bottom, right, }) {
+    if (top === right && right === bottom && bottom === left) {
+        return `${top}px`;
+    }
     return `${top}px ${right}px ${bottom}px ${left}px`;
 }
 function triggerStackReflow(element, display) {
@@ -26962,6 +26973,9 @@ function useStyleTransform({ transformTrigger, styleTransformEffectEnabled, tran
                     if (pageInputRange.length !== outputRange[key7].length) {
                         continue;
                     }
+                    if (outputRange[key7][0] === void 0) {
+                        continue;
+                    }
                     effect.values[key7].set(transform(scrollY.progress, pageInputRange, outputRange[key7]));
                 }
             }, transformTrigger === 'onInView'
@@ -26987,6 +27001,9 @@ function useStyleTransform({ transformTrigger, styleTransformEffectEnabled, tran
                     if (scrollYInputRange.length !== effectKeyOutputRange[key7].length) {
                         continue;
                     }
+                    if (effectKeyOutputRange[key7][0] === void 0) {
+                        continue;
+                    }
                     effect.values[key7].set(transform(scrollY.current, scrollYInputRange, effectKeyOutputRange[key7]));
                 }
             });
@@ -35664,53 +35681,97 @@ var localPackageFallbackIdentifier = '|local|';
 function CustomProperties({ children, customProperties, }) {
     return /* @__PURE__ */ jsx57('div', { style: customProperties, children, });
 }
-var FormContainer = (props) => {
-    return /* @__PURE__ */ jsx58(FrameWithMotion, Object.assign(Object.assign({}, props), { as: 'form' }));
-};
-var FormButton = (props) => {
+var FormButton = /* @__PURE__ */ React85.forwardRef(function FormButon(props, ref) {
     var _f;
-    const { __fromCanvasComponent, style: baseStyle2, } = props;
-    const layoutId = useLayoutId2(props);
-    const ref = useRef18(null);
+    const [submitting, setSubmitting,] = React85.useState(false);
+    const { style: baseStyle2, } = props;
     const style = mergeWithDefaultStyle(baseStyle2 !== null && baseStyle2 !== void 0 ? baseStyle2 : {});
-    const dataProps = {
-        'data-layoutid': layoutId,
-    };
-    const isDisabled = Boolean(__fromCanvasComponent);
-    useMeasureLayout(props, ref);
-    return /* @__PURE__ */ jsx59(motion.input, Object.assign(Object.assign({ type: props.type, disabled: isDisabled }, dataProps), { layoutId,
-        ref, style: Object.assign(Object.assign({}, baseStyle2), style), value: (_f = props.value) !== null && _f !== void 0 ? _f : 'Submit' }));
-};
+    const onSubmit = () => {
+        setSubmitting(true);
+        setTimeout(() => {
+            setSubmitting(false);
+        }, 500);
+    };
+    return /* @__PURE__ */ jsx58(motion.input, {
+        type: props.type,
+        'data-submitting': submitting,
+        disabled: props.isDisabled || submitting,
+        ref,
+        style,
+        value: submitting ? 'Submitting' : (_f = props.value) !== null && _f !== void 0 ? _f : 'Submit',
+        onClick: onSubmit,
+    });
+});
 function mergeWithDefaultStyle(style) {
-    return Object.assign({ display: 'block', padding: '12px', width: '100%', background: '#222', color: '#fff', borderRadius: '10px', border: '1px solid rgba(0,0,0,0.05)' }, style);
+    return Object.assign({ display: 'block', padding: '12px', fontSize: '14px', width: '100%', fontWeight: 'bold', cursor: 'pointer', background: '#222', color: '#fff', borderRadius: '10px', border: '1px solid rgba(0,0,0,0.05)' }, style);
 }
-var FormPlainTextInput = (props) => {
-    const { __fromCanvasComponent, } = props;
-    const layoutId = useLayoutId2(props);
-    const ref = useRef19(null);
-    const dataProps = {
-        'data-layoutid': layoutId,
-    };
-    const isDisabled = Boolean(__fromCanvasComponent);
-    useMeasureLayout(props, ref);
+var FormContainer = (_f) => {
+    var { action: _, formId } = _f, props = __rest(_f, ["action", "formId"]);
+    const handleSubmit = (event) => __awaiter(void 0, void 0, void 0, function* () {
+        event.preventDefault();
+        const data2 = new URLSearchParams();
+        for (const [key7, value,] of new FormData(event.currentTarget)) {
+            data2.append(key7, value);
+        }
+        yield fetch('https://hooks.zapier.com/hooks/catch/8935032/3pzgf76/', {
+            body: new URLSearchParams(data2),
+            method: 'POST',
+        });
+    });
+    return /* @__PURE__ */ jsx59(motion.form, Object.assign(Object.assign({}, props), { 'data-formid': formId, onSubmit: handleSubmit, children: props.children }));
+};
+var passwordManagerIgnoreDataProps = {
+    // 1Password
+    'data-1p-ignore': true,
+    // LastPass
+    'data-lpignore': true,
+};
+var sensibleInputDefaults = {
+    autocomplete: 'off',
+};
+var labelStyles = {
+    display: 'block',
+    marginBottom: 8,
+    fontSize: 12,
+    color: '#000',
+    width: '100%',
+    fontWeight: 'bold',
+    textTransform: 'capitalize',
+};
+var FormPlainTextInput = /* @__PURE__ */ React86.forwardRef(function FormPlainTextInput2(props, ref) {
+    const dataProps = Object.assign(Object.assign({}, sensibleInputDefaults), passwordManagerIgnoreDataProps);
     const baseStyle2 = {
-        padding: '12px',
+        fontSize: '14px',
         width: '100%',
         background: '#f5f5f5',
         borderRadius: '10px',
         border: '1px solid rgba(0,0,0,0.05)',
     };
-    return /* @__PURE__ */ jsx60(motion.input, Object.assign(Object.assign({ disabled: isDisabled }, dataProps), { layoutId,
-        ref, style: Object.assign(Object.assign({}, baseStyle2), props.style), placeholder: props.placeholder }));
-};
-var Image2 = /* @__PURE__ */ React85.forwardRef(function Image3(props, ref) {
+    const input = /* @__PURE__ */ jsx60(motion.input, Object.assign(Object.assign({ id: props.inputName, disabled: props.isDisabled }, dataProps), { type: props.type, required: props.required, autoFocus: props.autoFocus, name: props.inputName, style: baseStyle2, placeholder: props.placeholder }));
+    if (props.label) {
+        return /* @__PURE__ */ jsx60('div', {
+            ref,
+            style: { width: '100%', },
+            children: /* @__PURE__ */ jsxs19('label', {
+                style: { width: '100%', },
+                htmlFor: props.inputName,
+                children: [
+                    /* @__PURE__ */ jsx60('span', { style: labelStyles, children: props.label, }),
+                    input,
+                ],
+            }),
+        });
+    }
+    return /* @__PURE__ */ jsx60('div', { ref, style: { width: '100%', }, children: input, });
+});
+var Image2 = /* @__PURE__ */ React87.forwardRef(function Image3(props, ref) {
     const { background, children, alt } = props, rest = __rest(props, ["background", "children", "alt"]);
     const style = Object.assign({}, rest.style);
     if (background) {
         delete style.background;
     }
     const MotionComponent = htmlElementAsMotionComponent(props.as);
-    return /* @__PURE__ */ jsxs19(MotionComponent, Object.assign(Object.assign({}, rest), { style,
+    return /* @__PURE__ */ jsxs20(MotionComponent, Object.assign(Object.assign({}, rest), { style,
         ref, children: [
             background && /* @__PURE__ */ jsx61(BackgroundImageComponent, { image: background, alt, }),
             children,
@@ -35802,18 +35863,18 @@ function escapeHTML2(str) {
 }
 var deprecatedRichTextPlaceholder = '{{ text-placeholder }}';
 var richTextWrapperClassName = 'rich-text-wrapper';
-var DeprecatedRichText = /* @__PURE__ */ React86.forwardRef(function Text3(props, forwardedRef) {
+var DeprecatedRichText = /* @__PURE__ */ React88.forwardRef(function Text3(props, forwardedRef) {
     var _f, _j;
     const { id: id3, name, html, htmlFromDesign, text, textFromDesign, fonts = [], width, height, left, right, top, bottom, center, className, stylesPresetsClassName, visible = true, opacity, rotation = 0, verticalAlignment = 'top', isEditable = false, willChangeTransform, environment: environment2 = RenderTarget.current, withExternalLayout = false, positionSticky, positionStickyTop, positionStickyRight, positionStickyBottom, positionStickyLeft, __htmlStructure, __fromCanvasComponent = false, _forwardedOverrideId, _forwardedOverrides, _usesDOMRect, children } = props, rest = __rest(props, ["id", "name", "html", "htmlFromDesign", "text", "textFromDesign", "fonts", "width", "height", "left", "right", "top", "bottom", "center", "className", "stylesPresetsClassName", "visible", "opacity", "rotation", "verticalAlignment", "isEditable", "willChangeTransform", "environment", "withExternalLayout", "positionSticky", "positionStickyTop", "positionStickyRight", "positionStickyBottom", "positionStickyLeft", "__htmlStructure", "__fromCanvasComponent", "_forwardedOverrideId", "_forwardedOverrides", "_usesDOMRect", "children"]);
     const parentSize = useParentSize();
     const layoutId = useLayoutId2(props);
-    const fallbackLayoutRef = useRef20(null);
+    const fallbackLayoutRef = useRef18(null);
     const layoutRef = forwardedRef !== null && forwardedRef !== void 0 ? forwardedRef : fallbackLayoutRef;
     const { navigate, getRoute, } = useRouter();
     const currentRoute = useCurrentRoute();
     useRoutePreloader((_f = props.preload) !== null && _f !== void 0 ? _f : []);
     useMeasureLayout(props, layoutRef);
-    const inCodeComponent = React86.useContext(ComponentContainerContext);
+    const inCodeComponent = React88.useContext(ComponentContainerContext);
     const isOnCanvas = useIsOnFramerCanvas();
     let textOrOverride = text;
     const forwardedOverrideId = _forwardedOverrideId !== null && _forwardedOverrideId !== void 0 ? _forwardedOverrideId : id3;
@@ -35839,13 +35900,13 @@ var DeprecatedRichText = /* @__PURE__ */ React86.forwardRef(function Text3(props
         innerHTML = htmlFromDesign;
     }
     const implicitPathVariables = useImplicitPathVariables();
-    const innerHTMLWithReplacedFramerPageLinks = React86.useMemo(() => {
+    const innerHTMLWithReplacedFramerPageLinks = React88.useMemo(() => {
         if (isOnCanvas || !getRoute || !currentRoute) {
             return innerHTML;
         }
         return replaceFramerPageLinks(innerHTML, getRoute, currentRoute, implicitPathVariables);
     }, [isOnCanvas, innerHTML, getRoute, currentRoute, implicitPathVariables,]);
-    React86.useEffect(() => {
+    React88.useEffect(() => {
         const container = layoutRef.current;
         if (container === null) {
             return;
@@ -35866,7 +35927,7 @@ var DeprecatedRichText = /* @__PURE__ */ React86.forwardRef(function Text3(props
         };
     }, [navigate, implicitPathVariables,]);
     useLoadFonts(fonts, __fromCanvasComponent, layoutRef);
-    React86.useInsertionEffect(() => {
+    React88.useInsertionEffect(() => {
         injectComponentCSSRules();
     }, []);
     if (!visible) {
@@ -35938,7 +35999,7 @@ function convertVerticalAlignment2(verticalAlignment) {
     }
 }
 function useLoadFonts(fonts, fromCanvasComponent, containerRef) {
-    const prevFontsRef = useRef20([]);
+    const prevFontsRef = useRef18([]);
     if (!isShallowEqualArray(prevFontsRef.current, fonts)) {
         prevFontsRef.current = fonts;
         fontStore.loadFonts(fonts).then(({ newlyLoadedFontCount, }) => {
@@ -35969,7 +36030,7 @@ var RichTextContainer = /* @__PURE__ */ forwardRef52((props, ref) => {
     const isOnCanvas = useIsOnFramerCanvas();
     const inCodeComponent = useContext162(ComponentContainerContext);
     const layoutId = useLayoutId2(props);
-    const fallbackRef = useRef21(null);
+    const fallbackRef = useRef19(null);
     const containerRef = ref !== null && ref !== void 0 ? ref : fallbackRef;
     useMeasureLayout(props, containerRef);
     useLoadFonts(fonts, __fromCanvasComponent, containerRef);
@@ -36488,7 +36549,9 @@ var package_default = {
     scripts: {
         prepublishOnly: 'make build',
         coverage: 'yarn :jest --coverage',
-        lint: 'yarn :eslint ./src --ext .ts,.tsx --format codeframe --quiet',
+        lint: 'yarn format-check:ts && yarn :eslint ./src --ext .ts,.tsx --format codeframe --quiet',
+        'format:ts': 'yarn :format "src/**/*.{ts,tsx}"',
+        'format-check:ts': 'yarn :format-check "src/**/*.{ts,tsx}"',
         'lint:fix': 'yarn lint --fix --cache',
         test: 'yarn :jest',
         watch: 'yarn :jest --watch',