unframer 2.0.1 → 2.1.0

package/dist/framer.js

@@ -8950,7 +8950,7 @@ var cancelSync = stepsOrder.reduce((acc, key7) => {
     return acc;
 }, {});
 exports.cancelSync = cancelSync;
-// https :https://app.framerstatic.com/framer.L736M3IJ.js
+// https :https://app.framerstatic.com/framer.PRO3WDEJ.js
 const react_46 = require("react");
 const react_47 = __importDefault(require("react"));
 const jsx_runtime_1 = require("react/jsx-runtime");
@@ -9126,15 +9126,15 @@ const jsx_runtime_60 = require("react/jsx-runtime");
 const jsx_runtime_61 = require("react/jsx-runtime");
 const jsx_runtime_62 = require("react/jsx-runtime");
 const jsx_runtime_63 = require("react/jsx-runtime");
+const react_154 = __importDefault(require("react"));
 const jsx_runtime_64 = require("react/jsx-runtime");
-const react_154 = require("react");
 const jsx_runtime_65 = require("react/jsx-runtime");
-const react_155 = require("react");
+const react_155 = __importDefault(require("react"));
 const jsx_runtime_66 = require("react/jsx-runtime");
 const react_156 = __importDefault(require("react"));
 const jsx_runtime_67 = require("react/jsx-runtime");
 const react_157 = require("react");
-const React86 = __importStar(require("react"));
+const React88 = __importStar(require("react"));
 const react_158 = require("react");
 const jsx_runtime_68 = require("react/jsx-runtime");
 const jsx_runtime_69 = require("react/jsx-runtime");
@@ -10301,13 +10301,14 @@ var require_fontfaceobserver_standalone = __commonJS({
     },
 });
 function renderPage(Page4, defaultPageStyle) {
-    return react_47.default.isValidElement(Page4)
-        ? react_47.default.cloneElement(Page4, { style: defaultPageStyle, })
-        : react_47.default.createElement(Page4, { style: defaultPageStyle, });
+    const style = { style: defaultPageStyle, };
+    return react_47.default.isValidElement(Page4) ? react_47.default.cloneElement(Page4, style) : react_47.default.createElement(Page4, style);
 }
 var NotFoundError = class extends Error {
 };
 exports.NotFoundError = NotFoundError;
+var ErrorBoundaryCaughtError = class extends Error {
+};
 var ErrorBoundary = class extends react_46.Component {
     constructor(props) {
         super(props);
@@ -10334,7 +10335,9 @@ var ErrorBoundary = class extends react_46.Component {
             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) {
@@ -11206,17 +11209,17 @@ function RoutesProvider({ routes, children, }) {
     return (0, jsx_runtime_3.jsx)(RouterContext.Provider, { value: { getRoute, }, children, });
 }
 var SuspenseErrorBoundary = class extends react_56.Component {
-    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',
             {
@@ -11229,6 +11232,9 @@ var SuspenseErrorBoundary = class extends react_56.Component {
         if (this.state.error === void 0) {
             return this.props.children;
         }
+        if (this.state.error instanceof ErrorBoundaryCaughtError) {
+            throw this.state.error.cause;
+        }
         return (0, jsx_runtime_5.jsx)(react_56.Suspense, { children: this.props.fallbackChildren, });
     }
 };
@@ -16761,6 +16767,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 : [];
 };
@@ -16782,6 +16789,7 @@ var combineCSSRules = (isPreview) => [
     ...svgCSSRules,
     ...resetCSS,
     ...hideScrollbars,
+    ...formInputRules,
 ];
 exports.combinedCSSRules = combineCSSRules(false);
 var combinedCSSRulesForPreview = combineCSSRules(true);
@@ -20303,7 +20311,7 @@ function hasDataFramerName(props) {
     return 'data-framer-name' in props;
 }
 var VisibleFrame = /* @__PURE__ */ (0, react_72.forwardRef)(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);
@@ -20312,7 +20320,7 @@ var VisibleFrame = /* @__PURE__ */ (0, react_72.forwardRef)(function VisibleFram
     const fallbackRef = (0, react_72.useRef)(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,
@@ -20342,7 +20350,7 @@ var VisibleFrame = /* @__PURE__ */ (0, react_72.forwardRef)(function VisibleFram
         children: [
             backgroundImage
                 ? /* @__PURE__ */ (0, jsx_runtime_16.jsx)(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),
@@ -23960,6 +23968,9 @@ function paddingFromProps(props) {
 }
 exports.paddingFromProps = paddingFromProps;
 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`;
 }
 exports.makePaddingString = makePaddingString;
@@ -27243,6 +27254,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'
@@ -27268,6 +27282,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]));
                 }
             });
@@ -36044,47 +36061,91 @@ function CustomProperties({ children, customProperties, }) {
     return /* @__PURE__ */ (0, jsx_runtime_63.jsx)('div', { style: customProperties, children, });
 }
 exports.CustomProperties = CustomProperties;
-var FormContainer = (props) => {
-    return /* @__PURE__ */ (0, jsx_runtime_64.jsx)(FrameWithMotion, Object.assign(Object.assign({}, props), { as: 'form' }));
-};
-exports.FormContainer = FormContainer;
-var FormButton = (props) => {
+var FormButton = /* @__PURE__ */ react_154.default.forwardRef(function FormButon(props, ref) {
     var _f;
-    const { __fromCanvasComponent, style: baseStyle2, } = props;
-    const layoutId = useLayoutId2(props);
-    const ref = (0, react_154.useRef)(null);
+    const [submitting, setSubmitting,] = react_154.default.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__ */ (0, jsx_runtime_65.jsx)(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__ */ (0, jsx_runtime_64.jsx)(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,
+    });
+});
 exports.FormButton = FormButton;
 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 = (0, react_155.useRef)(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__ */ (0, jsx_runtime_65.jsx)(motion.form, Object.assign(Object.assign({}, props), { 'data-formid': formId, onSubmit: handleSubmit, children: props.children }));
+};
+exports.FormContainer = FormContainer;
+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__ */ react_155.default.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__ */ (0, jsx_runtime_66.jsx)(motion.input, Object.assign(Object.assign({ disabled: isDisabled }, dataProps), { layoutId,
-        ref, style: Object.assign(Object.assign({}, baseStyle2), props.style), placeholder: props.placeholder }));
-};
+    const input = /* @__PURE__ */ (0, jsx_runtime_66.jsx)(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__ */ (0, jsx_runtime_66.jsx)('div', {
+            ref,
+            style: { width: '100%', },
+            children: /* @__PURE__ */ (0, jsx_runtime_66.jsxs)('label', {
+                style: { width: '100%', },
+                htmlFor: props.inputName,
+                children: [
+                    /* @__PURE__ */ (0, jsx_runtime_66.jsx)('span', { style: labelStyles, children: props.label, }),
+                    input,
+                ],
+            }),
+        });
+    }
+    return /* @__PURE__ */ (0, jsx_runtime_66.jsx)('div', { ref, style: { width: '100%', }, children: input, });
+});
 exports.FormPlainTextInput = FormPlainTextInput;
 var Image2 = /* @__PURE__ */ react_156.default.forwardRef(function Image3(props, ref) {
     const { background, children, alt } = props, rest = __rest(props, ["background", "children", "alt"]);
@@ -36187,7 +36248,7 @@ 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();
@@ -36198,7 +36259,7 @@ var DeprecatedRichText = /* @__PURE__ */ React86.forwardRef(function Text3(props
     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;
@@ -36224,13 +36285,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;
@@ -36251,7 +36312,7 @@ var DeprecatedRichText = /* @__PURE__ */ React86.forwardRef(function Text3(props
         };
     }, [navigate, implicitPathVariables,]);
     useLoadFonts(fonts, __fromCanvasComponent, layoutRef);
-    React86.useInsertionEffect(() => {
+    React88.useInsertionEffect(() => {
         injectComponentCSSRules();
     }, []);
     if (!visible) {
@@ -36892,7 +36953,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',