test.js

// Generated by Framer (f558e44)
import{jsx as _jsx,jsxs as _jsxs}from"react/jsx-runtime";import{addFonts,cx,getFonts,optimizeAppear,optimizeAppearTransformTemplate,resolveLink,RichText,useLocaleInfo,useRouter,useVariantState,withCSS,withFX}from"framer";import{LayoutGroup,motion,MotionConfigContext}from"framer-motion";import*as React from"react";import{MagicFormPro}from"https://framerusercontent.com/modules/gYKOWYcFm4NHTcyHWecZ/VC5eHWAIh0HLtvrCQZBC/MagicFormPro.js";import*as localizedValues from"./BslUIhGKv-0.js";const MagicFormProFonts=getFonts(MagicFormPro);const MotionDivWithFX=withFX(motion.div);const cycleOrder=["egtcdSXtu"];const serializationHash="framer-QZkBq";const variantClassNames={egtcdSXtu:"framer-v-17c9q85"};function addPropertyOverrides(overrides,...variants){const nextOverrides={};variants===null||variants===void 0?void 0:variants.forEach(variant=>variant&&Object.assign(nextOverrides,overrides[variant]));return nextOverrides;}const transitions={default:{damping:60,delay:0,mass:1,stiffness:500,type:"spring"}};const valuesByLocaleId={yepOjMokz:localizedValues};const getLocalizedValue=(key,locale)=>{while(locale){const values=valuesByLocaleId[locale.id];if(values){const value=values[key];if(value){return value;}}locale=locale.fallback;}};const transition1={damping:60,delay:.4,mass:1,stiffness:200,type:"spring"};const animation={opacity:0,rotate:0,scale:1,transition:transition1,x:0,y:150};const transformTemplate1=(_,t)=>`perspective(1200px) ${t}`;const animation1={opacity:1,rotate:0,rotateX:0,rotateY:0,scale:1,transition:transition1,x:0,y:0};const animation2={opacity:.001,rotate:0,scale:1,x:0,y:150};const Transition=({value,children})=>{const config=React.useContext(MotionConfigContext);const transition=value!==null&&value!==void 0?value:config.transition;const contextValue=React.useMemo(()=>({...config,transition}),[JSON.stringify(transition)]);return /*#__PURE__*/_jsx(MotionConfigContext.Provider,{value:contextValue,children:children});};const getProps=({height,id,width,...props})=>{return{...props};};const createLayoutDependency=(props,variants)=>variants.join("-")+props.layoutDependency;const Component=/*#__PURE__*/React.forwardRef(function(props,ref){const{activeLocale,setLocale}=useLocaleInfo();const{style,className,layoutId,variant,...restProps}=getProps(props);const{baseVariant,classNames,gestureVariant,setGestureState,setVariant,transition,variants}=useVariantState({cycleOrder,defaultVariant:"egtcdSXtu",transitions,variant,variantClassNames});const layoutDependency=createLayoutDependency(props,variants);const ref1=React.useRef(null);const router=useRouter();const defaultLayoutId=React.useId();const sharedStyleClassNames=[];var _getLocalizedValue;return /*#__PURE__*/_jsx(LayoutGroup,{id:layoutId!==null&&layoutId!==void 0?layoutId:defaultLayoutId,children:/*#__PURE__*/_jsx(Transition,{value:transition,children:/*#__PURE__*/_jsxs(motion.div,{...restProps,animate:variants,className:cx(serializationHash,...sharedStyleClassNames,"framer-17c9q85",className,classNames),"data-framer-name":"Variant 1",initial:variant,layoutDependency:layoutDependency,layoutId:"egtcdSXtu",onHoverEnd:()=>setGestureState({isHovered:false}),onHoverStart:()=>setGestureState({isHovered:true}),onTap:()=>setGestureState({isPressed:false}),onTapCancel:()=>setGestureState({isPressed:false}),onTapStart:()=>setGestureState({isPressed:true}),ref:ref!==null&&ref!==void 0?ref:ref1,style:{...style},children:[/*#__PURE__*/_jsx(MotionDivWithFX,{__perspectiveFX:false,__smartComponentFX:true,__targetOpacity:1,animate:optimizeAppear("animate","h5nag8",animation1,"17c9q85"),className:"framer-h5nag8-container","data-framer-appear-id":"h5nag8",exit:animation,initial:optimizeAppear("initial","h5nag8",animation2,"17c9q85"),layoutDependency:layoutDependency,layoutId:"U1IVVzTeW-container",transformTemplate:optimizeAppearTransformTemplate("h5nag8",transformTemplate1),children:/*#__PURE__*/_jsx(MagicFormPro,{buttonStyle:{buttonAlignment:"flex-start",buttonNext:(_getLocalizedValue=getLocalizedValue("v0",activeLocale))!==null&&_getLocalizedValue!==void 0?_getLocalizedValue:"Continue",buttonSubmit:"Submit →",fontStyle:{color:"rgb(255, 255, 255)",font:{fontFamily:'"Inter-SemiBold", "Inter", "Inter Placeholder", sans-serif',fontSize:"14px",fontStyle:"normal",fontWeight:600,letterSpacing:"-0.2px",lineHeight:"1em",textAlign:"center"}},loaderSubmit:"Just a sec",showLoadingDots:true,styling:{backgroundColor:"rgb(0, 0, 0)",borderColor:"rgb(0, 0, 0)",borderRadius:8,borderWidth:1,hoverColor:"rgb(0, 0, 0)",isMixed:false,marginTop:0,padding:10,paddingBottom:10,paddingLeft:10,paddingRight:10,paddingTop:10,showIcon:false},width:"fit-content"},containerStyle:{flexDirection:"column",gap:16,textDirection:"ltr"},formId:"eAD5UuAISU",height:"100%",id:"U1IVVzTeW",inputStyle:{checkboxStyle:{accent:"rgb(0, 0, 0)",backgroundColor:"rgb(250, 250, 250)",border:"solid",borderColor:"rgb(221, 221, 221)",borderRadius:6,borderWidth:1,color:'var(--token-ae8a0e44-7bc2-473d-8755-476b80dd3fb5, rgb(0, 0, 0)) /* {"name":"Black"} */',colorScheme:"light",flexDirection:"row",font:{fontFamily:'"Inter", sans-serif',fontSize:"15px",letterSpacing:"-0.3px",lineHeight:"100%"},isMixed:true,marginBottom:12,padding:12,paddingBottom:12,paddingLeft:8,paddingRight:0,paddingTop:12,showActiveBorder:true,size:14},fileStyle:{backgroundColor:"rgb(255, 255, 255)",boldText:"Click to upload files",file_plural:"files max.",file_single:"file",iconColor:"rgb(0, 0, 0)",isMixed:false,padding:0,paddingBottom:0,paddingLeft:0,paddingRight:0,paddingTop:0,regularText:"or drag and drop",showSelectedFiles:true},fontStyle:{color:"rgb(0, 0, 0)",font:{fontFamily:'"Inter", sans-serif',fontSize:"15px",letterSpacing:"-0.3px",lineHeight:"140%"},labelStyle:{color:"rgb(0, 0, 0)",font:{fontFamily:'"Inter-Medium", "Inter", "Inter Placeholder", sans-serif',fontSize:"14px",fontStyle:"normal",fontWeight:500,letterSpacing:"-0.3px",lineHeight:"100%",textAlign:"left"},isMixed:true,padding:0,paddingBottom:8,paddingLeft:0,paddingRight:0,paddingTop:8,textAlign:"left"}},npsStyle:{backgroundColor:"rgb(250, 250, 250)",border:"solid",borderColor:"rgb(217, 217, 217)",borderRadius:4,borderWidth:1,color:"rgb(51, 51, 51)",fontSize:12,selectedBGColor:"rgb(255, 255, 255)",selectedBorderColor:'var(--token-ae8a0e44-7bc2-473d-8755-476b80dd3fb5, rgb(0, 0, 0)) /* {"name":"Black"} */',selectedColor:"rgb(0, 0, 0)",showActiveBorder:true,size:32},rangePicker:{color:'var(--token-ae8a0e44-7bc2-473d-8755-476b80dd3fb5, rgb(0, 0, 0)) /* {"name":"Black"} */',defaultValue:15,font:{fontFamily:'"Inter-Bold", "Inter", "Inter Placeholder", sans-serif',fontSize:"24px",fontStyle:"normal",fontWeight:700,letterSpacing:"-0.8px",lineHeight:"40px"},knobColor:'var(--token-e50d2b05-a95e-4cfe-a27c-503d5f4cc66c, rgb(42, 0, 247)) /* {"name":"Blue"} */',knobSize:20,marginBottom:40,marginTop:12,max:30,min:1,trackColor:"rgb(221, 221, 221)",trackHeight:10},styling:{backgroundColor:"rgb(250, 250, 250)",borderBottomWidth:1,borderColor:"rgb(221, 221, 221)",borderLeftWidth:1,borderRadius:8,borderRightWidth:1,borderTopWidth:1,borderWidth:1,extraColorStyles:{activeColor:"rgb(0, 0, 0)",errorColor:"rgb(255, 0, 32)",hoverBorderColor:"rgb(0, 0, 0)",hoverColor:'var(--token-7773c627-a97f-4236-8eaa-0674781eea48, rgb(250, 250, 255)) /* {"name":"Card hover"} */',useOutline:true},iconColor:"rgb(0, 0, 0)",iconPosition:"right",iconSize:20,isMixed:true,padding:16,paddingBottom:12,paddingLeft:12,paddingRight:12,paddingTop:12,requiredStyles:{backgroundColor:"rgb(221, 221, 221)",color:"rgb(0, 0, 0)"},spacerHeight:12}},inputTypes:[{condition:{comparisonType:"equals",targetStep:"Step 1",value:""},defaultValue:"",emailValidationType:"standard",hideSubmitButton:false,icon:"address-book",inputSize:"large",label:"Firstname",labelNpsLeft:"Very unlikely",labelNpsRight:"Extremely likely",maxFiles:1,maxFileSize:10,name:"firstname",options:["Option 1","Option 2"],placeholder:"Enter your firstname",required:true,rows:3,showLabel:true,step:"Step 1",toggleIcon:false,type:"text",validationMessage:"",width:"50% Width"},{condition:{comparisonType:"equals",targetStep:"Step 1",value:""},defaultValue:"",emailValidationType:"standard",hideSubmitButton:false,icon:"address-book",inputSize:"large",label:"Lastname",labelNpsLeft:"Very unlikely",labelNpsRight:"Extremely likely",maxFiles:1,maxFileSize:10,name:"lastname",options:["Option 1","Option 2"],placeholder:"Enter your lastname",required:false,rows:5,showLabel:true,step:"Step 1",toggleIcon:false,type:"text",validationMessage:"",width:"50% Width"},{condition:{comparisonType:"equals",targetStep:"Step 1",value:""},defaultValue:"",emailValidationType:"business",hideSubmitButton:false,icon:"address-book",inputSize:"large",label:"Email",labelNpsLeft:"Very unlikely",labelNpsRight:"Extremely likely",maxFiles:1,maxFileSize:10,name:"email",options:["Option 1","Option 2"],placeholder:"Enter your email",required:true,rows:3,showLabel:true,step:"Step 1",toggleIcon:false,type:"email",validationMessage:"",width:"50% Width"},{condition:{comparisonType:"equals",targetStep:"Step 1",value:""},defaultValue:"",emailValidationType:"standard",hideSubmitButton:false,icon:"address-book",inputSize:"large",label:"Phone",labelNpsLeft:"Very unlikely",labelNpsRight:"Extremely likely",maxFiles:1,maxFileSize:10,name:"phone",options:["Option 1","Option 2"],placeholder:"Enter your phone",required:false,rows:3,showLabel:true,step:"Step 1",toggleIcon:false,type:"text",validationMessage:"",width:"50% Width"},{condition:{comparisonType:"equals",targetStep:"Step 1",value:""},defaultValue:"",emailValidationType:"standard",hideSubmitButton:false,icon:"address-book",inputSize:"large",label:"Your question",labelNpsLeft:"Very unlikely",labelNpsRight:"Extremely likely",maxFiles:1,maxFileSize:10,name:"message",options:["Option 1","Option 2"],placeholder:"Enter your question",required:true,rows:4,showLabel:true,step:"Step 1",toggleIcon:true,type:"textarea",validationMessage:"",width:"Full Width"}],layoutId:"U1IVVzTeW",stepStyle:{current:"rgb(0, 0, 0)",font:{fontFamily:'"Inter", "Inter Placeholder", sans-serif',fontSize:"14px",fontStyle:"normal",fontWeight:600,letterSpacing:"-0.3px",lineHeight:"1em"},gap:12,next:"rgb(217, 217, 217)",previous:"rgba(145, 145, 145, 0.25)",showSteps:false,stepIndicatorType:"slider",text:""},style:{width:"100%"},success:{afterSubmit:"redirect",appendQueryParams:true,iconColor:"rgb(34, 102, 255)",messageText:"We will be in touch shortly",messageTitle:"Thank you",redirectURL:resolveLink({webPageId:"ZpxvEZfTr"},router),timeout:"infinite",toastFontText:{color:"rgb(0, 0, 0)",font:{}},toastFontTitle:{color:"rgb(0, 0, 0)",font:{}},toastIcon:32},testStep:1,width:"100%"})}),/*#__PURE__*/_jsxs(motion.div,{className:"framer-p0kruc",layoutDependency:layoutDependency,layoutId:"zehJ7hnIy",children:[/*#__PURE__*/_jsx(RichText,{__fromCanvasComponent:true,children:/*#__PURE__*/_jsx(React.Fragment,{children:/*#__PURE__*/_jsx(motion.ol,{style:{"--framer-font-size":"10px","--framer-text-color":"var(--extracted-gjwowx, var(--token-a3593707-3ea8-4833-bfd7-be8375d3aa69, rgb(130, 130, 130)))"},children:/*#__PURE__*/_jsx(motion.li,{children:/*#__PURE__*/_jsx(motion.p,{children:"Copy component to your clipboard"})})})}),className:"framer-ws3uwv",layoutDependency:layoutDependency,layoutId:"m1MoEQ_Ej",style:{"--extracted-gjwowx":"var(--token-a3593707-3ea8-4833-bfd7-be8375d3aa69, rgb(130, 130, 130))","--framer-link-text-color":"rgb(0, 153, 255)","--framer-link-text-decoration":"underline"},verticalAlignment:"top",withExternalLayout:true}),/*#__PURE__*/_jsx(RichText,{__fromCanvasComponent:true,children:/*#__PURE__*/_jsx(React.Fragment,{children:/*#__PURE__*/_jsx(motion.ol,{start:"2",style:{"--framer-font-size":"10px","--framer-text-color":"var(--extracted-gjwowx, var(--token-a3593707-3ea8-4833-bfd7-be8375d3aa69, rgb(130, 130, 130)))"},children:/*#__PURE__*/_jsx(motion.li,{children:/*#__PURE__*/_jsx(motion.p,{children:"Paste inside your own Framer project"})})})}),className:"framer-k4sxvc",layoutDependency:layoutDependency,layoutId:"pyZJy1drY",style:{"--extracted-gjwowx":"var(--token-a3593707-3ea8-4833-bfd7-be8375d3aa69, rgb(130, 130, 130))","--framer-link-text-color":"rgb(0, 153, 255)","--framer-link-text-decoration":"underline"},verticalAlignment:"top",withExternalLayout:true}),/*#__PURE__*/_jsx(RichText,{__fromCanvasComponent:true,children:/*#__PURE__*/_jsx(React.Fragment,{children:/*#__PURE__*/_jsx(motion.ol,{start:"3",style:{"--framer-font-size":"10px","--framer-text-color":"var(--extracted-gjwowx, var(--token-a3593707-3ea8-4833-bfd7-be8375d3aa69, rgb(130, 130, 130)))"},children:/*#__PURE__*/_jsx(motion.li,{children:/*#__PURE__*/_jsx(motion.p,{children:"Double click on form and select Unlink & Replace all "})})})}),className:"framer-nogfzt",layoutDependency:layoutDependency,layoutId:"tq9DpxTWQ",style:{"--extracted-gjwowx":"var(--token-a3593707-3ea8-4833-bfd7-be8375d3aa69, rgb(130, 130, 130))","--framer-link-text-color":"rgb(0, 153, 255)","--framer-link-text-decoration":"underline"},verticalAlignment:"top",withExternalLayout:true}),/*#__PURE__*/_jsx(RichText,{__fromCanvasComponent:true,children:/*#__PURE__*/_jsx(React.Fragment,{children:/*#__PURE__*/_jsx(motion.ol,{start:"4",style:{"--framer-font-size":"10px","--framer-text-color":"var(--extracted-gjwowx, var(--token-a3593707-3ea8-4833-bfd7-be8375d3aa69, rgb(130, 130, 130)))"},children:/*#__PURE__*/_jsx(motion.li,{children:/*#__PURE__*/_jsx(motion.p,{children:"Go back to your canvas"})})})}),className:"framer-d4k7l2",layoutDependency:layoutDependency,layoutId:"C4QXYyW4D",style:{"--extracted-gjwowx":"var(--token-a3593707-3ea8-4833-bfd7-be8375d3aa69, rgb(130, 130, 130))","--framer-link-text-color":"rgb(0, 153, 255)","--framer-link-text-decoration":"underline"},verticalAlignment:"top",withExternalLayout:true}),/*#__PURE__*/_jsx(RichText,{__fromCanvasComponent:true,children:/*#__PURE__*/_jsx(React.Fragment,{children:/*#__PURE__*/_jsx(motion.ol,{start:"5",style:{"--framer-font-size":"10px","--framer-text-color":"var(--extracted-gjwowx, var(--token-a3593707-3ea8-4833-bfd7-be8375d3aa69, rgb(130, 130, 130)))"},children:/*#__PURE__*/_jsx(motion.li,{children:/*#__PURE__*/_jsx(motion.p,{children:"Right click the form and select Detach Instance"})})})}),className:"framer-1y0r922",layoutDependency:layoutDependency,layoutId:"gR2cts6LT",style:{"--extracted-gjwowx":"var(--token-a3593707-3ea8-4833-bfd7-be8375d3aa69, rgb(130, 130, 130))","--framer-link-text-color":"rgb(0, 153, 255)","--framer-link-text-decoration":"underline"},verticalAlignment:"top",withExternalLayout:true}),/*#__PURE__*/_jsx(RichText,{__fromCanvasComponent:true,children:/*#__PURE__*/_jsx(React.Fragment,{children:/*#__PURE__*/_jsx(motion.ol,{start:"5",style:{"--framer-font-size":"10px","--framer-text-color":"var(--extracted-gjwowx, var(--token-a3593707-3ea8-4833-bfd7-be8375d3aa69, rgb(130, 130, 130)))"},children:/*#__PURE__*/_jsx(motion.li,{children:/*#__PURE__*/_jsx(motion.p,{children:"Completely customize the form to your style and input types."})})})}),className:"framer-jyo6x0",layoutDependency:layoutDependency,layoutId:"RWw482W8J",style:{"--extracted-gjwowx":"var(--token-a3593707-3ea8-4833-bfd7-be8375d3aa69, rgb(130, 130, 130))","--framer-link-text-color":"rgb(0, 153, 255)","--framer-link-text-decoration":"underline"},verticalAlignment:"top",withExternalLayout:true})]})]})})});});const css=['.framer-QZkBq[data-border="true"]::after, .framer-QZkBq [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-QZkBq.framer-lvoq1b, .framer-QZkBq .framer-lvoq1b { display: block; }",".framer-QZkBq.framer-17c9q85 { align-content: center; align-items: center; display: flex; flex-direction: column; flex-wrap: nowrap; gap: 10px; height: min-content; justify-content: flex-start; overflow: visible; padding: 0px 0px 0px 0px; position: relative; width: 480px; }",".framer-QZkBq .framer-h5nag8-container { flex: none; height: auto; position: relative; width: 100%; z-index: 1; }",".framer-QZkBq .framer-p0kruc { align-content: center; align-items: center; display: flex; flex: none; flex-direction: column; flex-wrap: nowrap; gap: 4px; height: auto; justify-content: flex-start; overflow: hidden; padding: 80px 0px 0px 0px; position: relative; width: 100%; }",".framer-QZkBq .framer-ws3uwv, .framer-QZkBq .framer-k4sxvc, .framer-QZkBq .framer-nogfzt, .framer-QZkBq .framer-d4k7l2, .framer-QZkBq .framer-1y0r922, .framer-QZkBq .framer-jyo6x0 { flex: none; height: auto; position: relative; white-space: pre; width: auto; }","@supports (background: -webkit-named-image(i)) and (not (font-palette:dark)) { .framer-QZkBq.framer-17c9q85, .framer-QZkBq .framer-p0kruc { gap: 0px; } .framer-QZkBq.framer-17c9q85 > * { margin: 0px; margin-bottom: calc(10px / 2); margin-top: calc(10px / 2); } .framer-QZkBq.framer-17c9q85 > :first-child, .framer-QZkBq .framer-p0kruc > :first-child { margin-top: 0px; } .framer-QZkBq.framer-17c9q85 > :last-child, .framer-QZkBq .framer-p0kruc > :last-child { margin-bottom: 0px; } .framer-QZkBq .framer-p0kruc > * { margin: 0px; margin-bottom: calc(4px / 2); margin-top: calc(4px / 2); } }"];/**
 * This is a generated Framer component.
 * @framerIntrinsicHeight 560
 * @framerIntrinsicWidth 480
 * @framerCanvasComponentVariantDetails {"propertyName":"variant","data":{"default":{"layout":["fixed","auto"]}}}
 * @framerImmutableVariables true
 * @framerDisplayContentsDiv false
 */const FramerBslUIhGKv=withCSS(Component,css,"framer-QZkBq");export default FramerBslUIhGKv;FramerBslUIhGKv.displayName="Template / Contact form";FramerBslUIhGKv.defaultProps={height:560,width:480};addFonts(FramerBslUIhGKv,[{family:"Inter",style:"normal",url:"https://fonts.gstatic.com/s/inter/v13/UcCO3FwrK3iLTeHuS_fvQtMwCp50KnMw2boKoduKmMEVuGKYMZ1rib2Bg-4.woff2",weight:"600"},...MagicFormProFonts]);
export const __FramerMetadata__ = {"exports":{"Props":{"type":"tsType","annotations":{"framerContractVersion":"1"}},"default":{"type":"reactComponent","name":"FramerBslUIhGKv","slots":[],"annotations":{"framerDisplayContentsDiv":"false","framerImmutableVariables":"true","framerCanvasComponentVariantDetails":"{\"propertyName\":\"variant\",\"data\":{\"default\":{\"layout\":[\"fixed\",\"auto\"]}}}","framerIntrinsicWidth":"480","framerIntrinsicHeight":"560","framerContractVersion":"1"}},"__FramerMetadata__":{"type":"variable"}}}