{ "version": 3, "sources": ["ssg:https://framerusercontent.com/modules/SZc9oUJwmkODc5iChmEJ/yjeHcVcBaReZc6EFXEup/jlJrx1vdF.js"], "sourcesContent": ["// Generated by Framer (cdf9029)\nimport { jsx as _jsx, jsxs as _jsxs } from \"react/jsx-runtime\";\nimport { addFonts, addPropertyControls, ControlType, cx, Image, useVariantState, withCSS } from \"framer\";\nimport { LayoutGroup, motion } from \"framer-motion\";\nimport * as React from \"react\";\nconst cycleOrder = [\"jNWGMlvUC\"];\nconst variantClassNames = {\n jNWGMlvUC: \"framer-v-1xhqln6\"\n};\nfunction addPropertyOverrides(overrides, ...variants) {\n const nextOverrides = {};\n variants === null || variants === void 0 ? void 0 : variants.forEach(variant => variant && Object.assign(nextOverrides, overrides[variant]));\n return nextOverrides;\n}\nconst humanReadableVariantMap = {};\nconst transitions = {\n default: {\n damping: 60,\n delay: 0,\n duration: .3,\n ease: [.44, 0, .56, 1],\n mass: 1,\n stiffness: 500,\n type: \"spring\"\n }\n};\nfunction toResponsiveImage_194x2gw(value) {\n if (typeof value === \"object\" && value !== null && typeof value.src === \"string\") {\n return value;\n }\n return typeof value === \"string\" ? {\n src: value\n } : undefined;\n}\nconst BASE62 = \"0123456789ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz\";\nfunction useRandomID() {\n const ref = React.useRef(null);\n if (ref.current === null) {\n ref.current = Array(5).fill(0).map(() => BASE62[Math.floor(Math.random() * BASE62.length)]).join(\"\");\n }\n return ref.current;\n}\nconst Component = /*#__PURE__*/React.forwardRef(function ({\n id,\n style: externalStyle = {},\n className,\n width,\n height,\n layoutId,\n variant: outerVariant = \"jNWGMlvUC\",\n _1Before: ZZckjN7eL = {\n src: new URL(\"https://framerusercontent.com/images/aE8ywP5AWcBm8qYHM5w5aarrGM.jpg?scale-down-to=512\").href,\n srcSet: `${new URL(\"https://framerusercontent.com/images/aE8ywP5AWcBm8qYHM5w5aarrGM.jpg?scale-down-to=512\").href} 326w, ${new URL(\"https://framerusercontent.com/images/aE8ywP5AWcBm8qYHM5w5aarrGM.jpg\").href} 520w`\n },\n _1After: GUQCnLuzE = {\n src: new URL(\"https://framerusercontent.com/images/4oPXNsTqxFH7TW7sZk7yZfGQVc.jpg?scale-down-to=512\").href,\n srcSet: `${new URL(\"https://framerusercontent.com/images/4oPXNsTqxFH7TW7sZk7yZfGQVc.jpg?scale-down-to=512\").href} 281w, ${new URL(\"https://framerusercontent.com/images/4oPXNsTqxFH7TW7sZk7yZfGQVc.jpg\").href} 392w`\n },\n ...restProps\n}, ref) {\n const outerVariantId = humanReadableVariantMap[outerVariant];\n const variant = outerVariantId || outerVariant;\n const {\n baseVariant,\n classNames,\n gestureVariant,\n setGestureState,\n setVariant,\n transition,\n variants\n } = useVariantState({\n cycleOrder,\n defaultVariant: \"jNWGMlvUC\",\n transitions,\n variant,\n variantClassNames\n });\n const layoutDependency = variants.join(\"-\") + restProps.layoutDependency;\n const defaultLayoutId = useRandomID();\n const {\n pointerEvents,\n ...style\n } = externalStyle;\n return /*#__PURE__*/_jsx(LayoutGroup, {\n id: layoutId !== null && layoutId !== void 0 ? layoutId : defaultLayoutId,\n children: /*#__PURE__*/_jsx(motion.div, {\n \"data-framer-generated\": true,\n initial: variant,\n animate: variants,\n onHoverStart: () => setGestureState({\n isHovered: true\n }),\n onHoverEnd: () => setGestureState({\n isHovered: false\n }),\n onTapStart: () => setGestureState({\n isPressed: true\n }),\n onTap: () => setGestureState({\n isPressed: false\n }),\n onTapCancel: () => setGestureState({\n isPressed: false\n }),\n className: cx(\"framer-4SSgd\", classNames),\n style: {\n display: \"contents\",\n pointerEvents: pointerEvents !== null && pointerEvents !== void 0 ? pointerEvents : undefined\n },\n children: /*#__PURE__*/_jsx(motion.div, {\n ...restProps,\n className: cx(\"framer-1xhqln6\", className),\n \"data-framer-name\": \"Variant 1\",\n layoutDependency: layoutDependency,\n layoutId: \"jNWGMlvUC\",\n ref: ref,\n style: {\n backgroundColor: \"rgba(0, 153, 255, 0.1)\",\n borderBottomLeftRadius: 20,\n borderBottomRightRadius: 20,\n borderTopLeftRadius: 20,\n borderTopRightRadius: 20,\n ...style\n },\n transition: transition,\n children: /*#__PURE__*/_jsxs(motion.div, {\n className: \"framer-ztx6q3\",\n layoutDependency: layoutDependency,\n layoutId: \"AIGdMWfmm\",\n style: {\n backgroundColor: \"rgb(0, 0, 0)\",\n borderBottomLeftRadius: 20,\n borderBottomRightRadius: 20,\n borderTopLeftRadius: 20,\n borderTopRightRadius: 20\n },\n transformTemplate: (_, t) => `translateY(-50%) ${t}`,\n transition: transition,\n children: [/*#__PURE__*/_jsx(Image, {\n background: {\n alt: \"\",\n fit: \"fill\",\n pixelHeight: 816,\n pixelWidth: 520,\n sizes: \"160px\",\n ...toResponsiveImage_194x2gw(ZZckjN7eL)\n },\n className: \"framer-zuutna\",\n layoutDependency: layoutDependency,\n layoutId: \"HtsNbjff5\",\n transition: transition\n }), /*#__PURE__*/_jsx(Image, {\n background: {\n alt: \"\",\n fit: \"fill\",\n pixelHeight: 712,\n pixelWidth: 392,\n sizes: \"160px\",\n ...toResponsiveImage_194x2gw(GUQCnLuzE)\n },\n className: \"framer-169i8s5\",\n layoutDependency: layoutDependency,\n layoutId: \"uiqDgJ2Bo\",\n transition: transition\n })]\n })\n })\n })\n });\n});\nconst css = ['.framer-4SSgd [data-border=\"true\"]::after { content: \"\"; border-width: var(--border-top-width, 0) var(--border-right-width, 0) var(--border-bottom-width, 0) var(--border-left-width, 0); border-color: var(--border-color, none); border-style: var(--border-style, none); width: 100%; height: 100%; position: absolute; box-sizing: border-box; left: 0; top: 0; border-radius: inherit; pointer-events: none; }', \"@supports (aspect-ratio: 1) { body { --framer-aspect-ratio-supported: auto; } }\", \".framer-4SSgd * { box-sizing: border-box; }\", \".framer-4SSgd .framer-1jqjk47 { display: block; }\", \".framer-4SSgd .framer-1xhqln6 { height: 300px; overflow: hidden; position: relative; width: 320px; will-change: transform; }\", \".framer-4SSgd .framer-ztx6q3 { align-content: center; align-items: center; display: flex; flex: none; flex-direction: row; flex-wrap: nowrap; gap: 0px; height: min-content; justify-content: center; left: 0px; overflow: hidden; padding: 0px 0px 0px 0px; position: absolute; right: 0px; top: 50%; will-change: transform; }\", \".framer-4SSgd .framer-zuutna, .framer-4SSgd .framer-169i8s5 { flex: none; height: 300px; position: relative; width: 160px; }\", \"@supports (background: -webkit-named-image(i)) and (not (font-palette:dark)) { .framer-4SSgd .framer-ztx6q3 { gap: 0px; } .framer-4SSgd .framer-ztx6q3 > * { margin: 0px; margin-left: calc(0px / 2); margin-right: calc(0px / 2); } .framer-4SSgd .framer-ztx6q3 > :first-child { margin-left: 0px; } .framer-4SSgd .framer-ztx6q3 > :last-child { margin-right: 0px; } }\"]; /**\n * This is a generated Framer component.\n * @framerIntrinsicHeight 300\n * @framerIntrinsicWidth 320\n * @framerCanvasComponentVariantDetails {\"propertyName\":\"variant\",\"data\":{\"default\":{\"layout\":[\"fixed\",\"fixed\"]}}}\n * @framerVariables {\"ZZckjN7eL\":\"_1Before\",\"GUQCnLuzE\":\"_1After\"}\n */\nconst FramerjlJrx1vdF = withCSS(Component, css);\nexport default FramerjlJrx1vdF;\nFramerjlJrx1vdF.displayName = \"_beforeAfter\";\nFramerjlJrx1vdF.defaultProps = {\n height: 300,\n width: 320\n};\naddPropertyControls(FramerjlJrx1vdF, {\n ZZckjN7eL: {\n __defaultAssetReference: \"aE8ywP5AWcBm8qYHM5w5aarrGM.jpg\",\n title: \"1 Before\",\n type: ControlType.ResponsiveImage\n },\n GUQCnLuzE: {\n __defaultAssetReference: \"4oPXNsTqxFH7TW7sZk7yZfGQVc.jpg\",\n title: \"1 After\",\n type: ControlType.ResponsiveImage\n }\n});\naddFonts(FramerjlJrx1vdF, []);\nexport const __FramerMetadata__ = {\n \"exports\": {\n \"Props\": {\n \"type\": \"tsType\",\n \"annotations\": {\n \"framerContractVersion\": \"1\"\n }\n },\n \"default\": {\n \"type\": \"reactComponent\",\n \"name\": \"FramerjlJrx1vdF\",\n \"slots\": [],\n \"annotations\": {\n \"framerVariables\": \"{\\\"ZZckjN7eL\\\":\\\"_1Before\\\",\\\"GUQCnLuzE\\\":\\\"_1After\\\"}\",\n \"framerIntrinsicWidth\": \"320\",\n \"framerCanvasComponentVariantDetails\": \"{\\\"propertyName\\\":\\\"variant\\\",\\\"data\\\":{\\\"default\\\":{\\\"layout\\\":[\\\"fixed\\\",\\\"fixed\\\"]}}}\",\n \"framerContractVersion\": \"1\",\n \"framerIntrinsicHeight\": \"300\"\n }\n },\n \"__FramerMetadata__\": {\n \"type\": \"variable\"\n }\n }\n};\n//# sourceMappingURL=./jlJrx1vdF.map"], "mappings": "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", "names": ["cycleOrder", "variantClassNames", "humanReadableVariantMap", "transitions", "toResponsiveImage_194x2gw", "value", "BASE62", "useRandomID", "ref", "pe", "Component", "Y", "id", "externalStyle", "className", "width", "height", "layoutId", "outerVariant", "ZZckjN7eL", "GUQCnLuzE", "restProps", "variant", "baseVariant", "classNames", "gestureVariant", "setGestureState", "setVariant", "transition", "variants", "useVariantState", "cycleOrder", "variantClassNames", "layoutDependency", "defaultLayoutId", "pointerEvents", "style", "p", "LayoutGroup", "motion", "cx", "u", "_", "t", "Image2", "css", "FramerjlJrx1vdF", "withCSS", "jlJrx1vdF_default", "addPropertyControls", "ControlType", "addFonts"] }