{"version":3,"file":"Custom_Hubspot_Form.CWC532i8.mjs","names":["defaultEmptyStateStyle"],"sources":["https:/framerusercontent.com/modules/cuQH4dmpDnV8YK1mSgQX/tTLhbOFToDhKcwOVmn8E/useFontControls.js","https:/framerusercontent.com/modules/afBE9Yx1W6bY5q32qPxe/AAh30yXzt1DUsOi1YwUY/useRenderTarget.js","https:/framerusercontent.com/modules/G4IfyjvwmaeSBpdb4TWu/Pk7RhKpPAlu4xr8tiZYq/index.js","https:/framer.com/m/framer/default-utils.js@^0.43.0","https:/framerusercontent.com/modules/ZORE1BBUY4n4vHC0WFDH/bnwaYkSw2e4q5eLH4jPK/styles.js","https:/framer.com/m/framer/integrations-styles.js@0.2.0","https:/framerusercontent.com/modules/5lKISRGsC9hEQbVFPm4q/L2SawKOZo3ABwxswwt1T/Custom_Hubspot_Form.js"],"sourcesContent":["// @ts-ignore\nimport { fontStore } from \"framer\";\nimport { useEffect } from \"react\";\n// @ts-ignore\nimport { fontStack } from \"https://framerusercontent.com/modules/VTUDdizacRHpwbkOamr7/AykinQJbgwl92LvMGZwu/constants.js\";\nconst fontWeights = {\n    100: \"Thin\",\n    200: \"Extra-light\",\n    300: \"Light\",\n    400: \"Regular\",\n    500: \"Medium\",\n    600: \"Semi-bold\",\n    700: \"Bold\",\n    800: \"Extra-bold\",\n    900: \"Black\"\n};\nexport function useFontControls(props) {\n    const { fontFamily , fontSize , fontWeight , font  } = props;\n    const fontWeightName = fontWeights[fontWeight];\n    const customFontStack = `\"${fontFamily} ${fontWeightName}\", \"${fontFamily}\", ${fontStack}`;\n    const fontFamilyStyle = fontFamily ? {\n        fontSize,\n        fontWeight,\n        fontFamily: customFontStack\n    } : {\n        fontSize,\n        fontWeight\n    };\n    const fetchCustomFonts = async ()=>{\n        await fontStore.loadWebFontsFromSelectors([\n            `CUSTOM;${fontFamily}`,\n            `CUSTOM;${fontFamily} ${fontWeightName}`,\n            `GF;${fontFamily}-${fontWeightName.toLowerCase()}`, \n        ]).catch((e)=>console.error(e)\n        );\n    };\n    useEffect(()=>{\n        if (font) fetchCustomFonts();\n    }, [\n        font,\n        fontFamily,\n        fontWeight\n    ]);\n    return fontFamilyStyle;\n}\n\nexport const __FramerMetadata__ = {\"exports\":{\"useFontControls\":{\"type\":\"function\",\"annotations\":{\"framerContractVersion\":\"1\"}}}}\n//# sourceMappingURL=./useFontControls.map","import { useMemo } from \"react\";\nimport { RenderTarget } from \"framer\";\nexport function useRenderTarget() {\n    const currentRenderTarget = useMemo(()=>RenderTarget.current()\n    , []);\n    return currentRenderTarget;\n}\nexport function useIsInPreview() {\n    const inPreview = useMemo(()=>RenderTarget.current() === RenderTarget.preview\n    , []);\n    return inPreview;\n}\n\nexport const __FramerMetadata__ = {\"exports\":{\"useIsInPreview\":{\"type\":\"function\",\"annotations\":{\"framerContractVersion\":\"1\"}},\"useRenderTarget\":{\"type\":\"function\",\"annotations\":{\"framerContractVersion\":\"1\"}}}}\n//# sourceMappingURL=./useRenderTarget.map","import { defaultEvents, localeOptions, fontControls, fontSizeOptions, emptyStateStyle, containerStyles, fontStack } from \"https://framerusercontent.com/modules/VTUDdizacRHpwbkOamr7/AykinQJbgwl92LvMGZwu/constants.js\";\nimport { useOnEnter, useOnExit } from \"https://framerusercontent.com/modules/D4TWeLfcxT6Tysr2BlYg/iZjmqdxVx1EOiM3k1FaW/useOnNavigationTargetChange.js\";\nimport { useConstant } from \"https://framerusercontent.com/modules/ExNgrA7EJTKUPpH6vIlN/eiOrSJ2Ab5M9jPCvVwUz/useConstant.js\";\nimport { colorTokentoValue, colorFromToken } from \"https://framerusercontent.com/modules/D2Lz5CmnNVPZFFiZXalt/QaCzPbriZBfXWZIIycFI/colorFromToken.js\";\nimport { isMotionValue } from \"https://framerusercontent.com/modules/3mKFSGQqKHV82uOV1eBc/5fbRLvOpxZC0JOXugvwm/isMotionValue.js\";\nimport { useUniqueClassName, randomID } from \"https://framerusercontent.com/modules/xDiQsqBGXzmMsv7AlEVy/uhunpMiNsbXxzjlXsg1y/useUniqueClassName.js\";\nimport { getVariantControls } from \"https://framerusercontent.com/modules/ETACN5BJyFTSo0VVDJfu/NHRqowOiXkF9UwOzczF7/variantUtils.js\";\nimport { useIsBrowserSafari } from \"https://framerusercontent.com/modules/eMBrwoqQK7h6mEeGQUH8/GuplvPJVjmxpk9zqOTcb/isBrowser.js\";\nimport { useMultiOnChange, useOnChange } from \"https://framerusercontent.com/modules/v9AWX2URmiYsHf7GbctE/XxKAZ9KlhWqf5x1JMyyF/useOnChange.js\";\nimport { mstoMinAndSec, secondsToMinutes } from \"https://framerusercontent.com/modules/4zHZnO5JojN1PrIbu2jm/revv9QCWpkh8lPzi2jje/time.js\";\nimport { useAutoMotionValue } from \"https://framerusercontent.com/modules/kNDwabfjDEb3vUxkQlZS/fSIr3AOAYbGlfSPgXpYu/useAutoMotionValue.js\";\nimport { useFontControls } from \"https://framerusercontent.com/modules/cuQH4dmpDnV8YK1mSgQX/tTLhbOFToDhKcwOVmn8E/useFontControls.js\";\nimport { useRenderTarget, useIsInPreview } from \"https://framerusercontent.com/modules/afBE9Yx1W6bY5q32qPxe/AAh30yXzt1DUsOi1YwUY/useRenderTarget.js\";\nimport { useControlledState } from \"https://framerusercontent.com/modules/zGkoP8tPDCkoBzMdt5uq/0zFSjxIYliHxrQQnryFX/useControlledState.js\";\nimport { usePadding, useRadius, paddingControl, borderRadiusControl } from \"https://framerusercontent.com/modules/5SM58HxZHxjjv7aLMOgQ/WXz9i6mVki0bBCrKdqB3/propUtils.js\";\nimport { detectAutoSizingAxis } from \"https://framerusercontent.com/modules/8CkHAZatUz1UR8jNTcfD/HwbnIAZlUmQ2oTpcLkaH/detectAutoSizingAxis.js\";\nexport { useOnEnter, useOnExit, defaultEvents, isMotionValue, colorFromToken, colorTokentoValue, localeOptions, fontControls, fontSizeOptions, emptyStateStyle, containerStyles, fontStack, useUniqueClassName, getVariantControls, useIsBrowserSafari, randomID, useConstant, useMultiOnChange, useOnChange, usePadding, useRadius, paddingControl, borderRadiusControl, mstoMinAndSec, useFontControls, secondsToMinutes, useAutoMotionValue, useRenderTarget, useIsInPreview, useControlledState, detectAutoSizingAxis,  };\n\nexport const __FramerMetadata__ = {\"exports\":{\"fontControls\":{\"type\":\"variable\",\"annotations\":{\"framerContractVersion\":\"1\"}},\"mstoMinAndSec\":{\"type\":\"variable\",\"annotations\":{\"framerContractVersion\":\"1\"}},\"colorTokentoValue\":{\"type\":\"variable\",\"annotations\":{\"framerContractVersion\":\"1\"}},\"useFontControls\":{\"type\":\"variable\",\"annotations\":{\"framerContractVersion\":\"1\"}},\"useUniqueClassName\":{\"type\":\"variable\",\"annotations\":{\"framerContractVersion\":\"1\"}},\"paddingControl\":{\"type\":\"variable\",\"annotations\":{\"framerContractVersion\":\"1\"}},\"localeOptions\":{\"type\":\"variable\",\"annotations\":{\"framerContractVersion\":\"1\"}},\"fontStack\":{\"type\":\"variable\",\"annotations\":{\"framerContractVersion\":\"1\"}},\"detectAutoSizingAxis\":{\"type\":\"variable\",\"annotations\":{\"framerContractVersion\":\"1\"}},\"useRenderTarget\":{\"type\":\"variable\",\"annotations\":{\"framerContractVersion\":\"1\"}},\"useOnEnter\":{\"type\":\"variable\",\"annotations\":{\"framerContractVersion\":\"1\"}},\"emptyStateStyle\":{\"type\":\"variable\",\"annotations\":{\"framerContractVersion\":\"1\"}},\"useIsBrowserSafari\":{\"type\":\"variable\",\"annotations\":{\"framerContractVersion\":\"1\"}},\"getVariantControls\":{\"type\":\"variable\",\"annotations\":{\"framerContractVersion\":\"1\"}},\"useAutoMotionValue\":{\"type\":\"variable\",\"annotations\":{\"framerContractVersion\":\"1\"}},\"randomID\":{\"type\":\"variable\",\"annotations\":{\"framerContractVersion\":\"1\"}},\"useOnExit\":{\"type\":\"variable\",\"annotations\":{\"framerContractVersion\":\"1\"}},\"useIsInPreview\":{\"type\":\"variable\",\"annotations\":{\"framerContractVersion\":\"1\"}},\"useRadius\":{\"type\":\"variable\",\"annotations\":{\"framerContractVersion\":\"1\"}},\"usePadding\":{\"type\":\"variable\",\"annotations\":{\"framerContractVersion\":\"1\"}},\"useMultiOnChange\":{\"type\":\"variable\",\"annotations\":{\"framerContractVersion\":\"1\"}},\"containerStyles\":{\"type\":\"variable\",\"annotations\":{\"framerContractVersion\":\"1\"}},\"fontSizeOptions\":{\"type\":\"variable\",\"annotations\":{\"framerContractVersion\":\"1\"}},\"defaultEvents\":{\"type\":\"variable\",\"annotations\":{\"framerContractVersion\":\"1\"}},\"useConstant\":{\"type\":\"variable\",\"annotations\":{\"framerContractVersion\":\"1\"}},\"isMotionValue\":{\"type\":\"variable\",\"annotations\":{\"framerContractVersion\":\"1\"}},\"useOnChange\":{\"type\":\"variable\",\"annotations\":{\"framerContractVersion\":\"1\"}},\"useControlledState\":{\"type\":\"variable\",\"annotations\":{\"framerContractVersion\":\"1\"}},\"borderRadiusControl\":{\"type\":\"variable\",\"annotations\":{\"framerContractVersion\":\"1\"}},\"colorFromToken\":{\"type\":\"variable\",\"annotations\":{\"framerContractVersion\":\"1\"}},\"secondsToMinutes\":{\"type\":\"variable\",\"annotations\":{\"framerContractVersion\":\"1\"}}}}","/*\n * index (framer/default-utils@0.43.0)\n *\n * Learn More: https://www.framer.com/asset-urls\n */\n\nexport * from \"https://framerusercontent.com/modules/G4IfyjvwmaeSBpdb4TWu/Pk7RhKpPAlu4xr8tiZYq/index.js\"\n","import{containerStyles,emptyStateStyle as defaultEmptyStateStyle}from\"https://framer.com/m/framer/default-utils.js@^0.43.0\";export const emptyStateStyle={...containerStyles,...defaultEmptyStateStyle,textAlign:\"center\",padding:15,width:200,height:100,overflow:\"hidden\"};export const neutralStateStyle={...emptyStateStyle,color:\"#09f\",background:\"rgb(0, 153, 255, 0.1)\",borderColor:\"#09f\"};export const stateTitleStyle={fontSize:12,fontWeight:600,margin:0};export const stateParagraphStyle={fontSize:12,maxWidth:200,lineHeight:1.4,margin:\"5px 0 0 0\"};\nexport const __FramerMetadata__ = {\"exports\":{\"neutralStateStyle\":{\"type\":\"variable\",\"annotations\":{\"framerContractVersion\":\"1\"}},\"stateTitleStyle\":{\"type\":\"variable\",\"annotations\":{\"framerContractVersion\":\"1\"}},\"emptyStateStyle\":{\"type\":\"variable\",\"annotations\":{\"framerContractVersion\":\"1\"}},\"stateParagraphStyle\":{\"type\":\"variable\",\"annotations\":{\"framerContractVersion\":\"1\"}},\"__FramerMetadata__\":{\"type\":\"variable\"}}}\n//# sourceMappingURL=./styles.map","/*\n * styles (framer/integrations-styles@0.2.0)\n *\n * Learn More: https://www.framer.com/asset-urls\n */\n\nexport * from \"https://framerusercontent.com/modules/ZORE1BBUY4n4vHC0WFDH/bnwaYkSw2e4q5eLH4jPK/styles.js\"\n","import{jsx as _jsx,jsxs as _jsxs}from\"react/jsx-runtime\";import*as React from\"react\";import{addPropertyControls,ControlType}from\"framer\";import{emptyStateStyle,stateParagraphStyle,stateTitleStyle}from\"https://framer.com/m/framer/integrations-styles.js@0.2.0\";/**\n * HUBSPOT\n *\n * @framerIntrinsicWidth 480\n * @framerIntrinsicHeight 300\n *\n * @framerDisableUnlink\n *\n * @framerSupportedLayoutWidth fixed\n * @framerSupportedLayoutHeight any\n */export default function CustomHubSpotForm({portalId,formId,advanced,region,id,font,label,input,button,errors,agreement}){console.log(label,input,button,errors,agreement);var idd=\"id\"+Math.random().toString(16).slice(2);if(!portalId||!formId||!region){return EmptyState({title:\"Custom Hubspot Form\",description:\"Set a portal ID and form in the Properties.\"});}// const ref = React.createRef<HTMLDivElement>()\nconst elementId=`hubspot_form_${formId}`+idd;const cleanup=()=>{const element=document.querySelector(`#${elementId}`);if(element)element.innerHTML=\"\";};React.useEffect(()=>{if(window.hbspt){handleScriptLoad();return cleanup;}const script=document.createElement(\"script\");script.src=`https://js-${region}.hsforms.net/forms/shell.js`;script.onload=handleScriptLoad();document.body.appendChild(script);return cleanup;},[portalId,formId,region]);const handleScriptLoad=()=>{console.log(\"Loading HubSpot form...\",portalId);poll(()=>{if(!window.hbspt){console.warn(`HubSpot could not be loaded: window.hbspt is missing`);return false;}if(!document.querySelector(`#${elementId}`)){console.warn(`HubSpot could not be loaded: element not found #${elementId}`);return false;}cleanup();window.hbspt.forms.create({region,portalId,formId,target:`#${elementId}`,formInstanceId:formId});return true;});};return /*#__PURE__*/_jsxs(\"div\",{children:[/*#__PURE__*/_jsx(\"div\",{id:elementId,style:{formContainer},children:/*#__PURE__*/_jsx(\"svg\",{id:\"loading\",xmlns:\"http://www.w3.org/2000/svg\",width:\"24px\",height:\"24px\",viewBox:\"0 0 100 100\",preserveAspectRatio:\"xMidYMid\",children:/*#__PURE__*/_jsx(\"circle\",{cx:\"50\",cy:\"50\",fill:\"none\",stroke:\"#85a2b6\",\"stroke-width\":\"6\",r:\"35\",\"stroke-dasharray\":\"164.93361431346415 56.97787143782138\",children:/*#__PURE__*/_jsx(\"animateTransform\",{attributeName:\"transform\",type:\"rotate\",repeatCount:\"indefinite\",dur:\"1s\",values:\"0 50 50;360 50 50\",keyTimes:\"0;1\"})})})}),/*#__PURE__*/_jsx(\"style\",{children:`\n                #${elementId} #loading {\n                    margin: auto;\n                    background: transparent; \n                    display: block; \n                    shape-rendering: auto;\n                    margin-left: 50%;\n                    transform: translateX(-50%);\n                }\n                #${elementId} fieldset {\n                    max-width: 100%!important;\n                }\n\n                #${elementId} .hs-form-field {\n                    display: block;\n                    width: 100%;\n                }        \n\n                #${elementId} input:not([type='checkbox']),\n                #${elementId} .input {\n                    width: 100%;\n                    margin: 0;     \n                }  \n\n                #${elementId} ul.inputs-list {\n                    list-style: none;\n                    padding: 0;\n                }\n\n                #${elementId} label {\n                    ${convertStylesToString(label.font)}\n                    color: ${label.color};\n                    display: block;\n                    margin-bottom: ${label.marginBottom}px;\n                }     \n\n                #${elementId} .hs-field-desc {\n                    color: ${label.color};\n                    display: block;\n                    margin-bottom: ${label.marginBottom}px;                    \n                }\n\n                #${elementId} fieldset:first-child > .hs-form-field:first-child {\n                    margin-top: 0px;\n                }\n\n                #${elementId} form .hs-form-field {\n                    margin-top: ${label.marginTop}px;\n                }       \n\n                #${elementId} .hs-form-required {\n                    color: ${label.asterisk};\n                    padding-left: 5px;\n                }\n\n                #${elementId} input:not([type='checkbox']) {\n                    ${convertStylesToString(input)}\n                    ${convertStylesToString(input.font)}\n                    height: ${input.height}px;\n                    border-width: ${input.borderWidth}px;\n                    border-style: solid;\n                    border-radius: ${input.borderRadius}px;\n                    padding: 0px 15px;\n                }  \n\n                #${elementId} input:not([type='checkbox']) {\n                    ${convertStylesToString(input)}\n                    ${convertStylesToString(input.font)}\n                    height: ${input.height}px;\n                    border-width: ${input.borderWidth}px;\n                    border-style: solid;\n                    border-radius: ${input.borderRadius}px;\n                    padding: 0px 15px;\n                }  \n\n                #${elementId} .hs-form-booleancheckbox-display span {\n                    display: flex;\n                    align-content: center;\n                    flex-wrap: wrap;\n                    align-items: center;\n                    margin-left: 0px;\n                }\n\n                #${elementId} .hs-form-booleancheckbox-display input[type='checkbox'] {\n                    display: none;\n                }\n\n                #${elementId} .hs-form-booleancheckbox-display span:before {\n                    content: \"\";\n                    width: 20px;\n                    height: 20px;\n                    border-width: 0px;\n                    border-style: solid;\n                    border-radius: 3px;\n                    background-color: rgba(0,0,0,0.1);\n                    margin-right: 10px;\n                }            \n\n                #${elementId} input[type=\"checkbox\"]:checked ~ span:before {\n                    background-color: ${button.backgroundColor};\n                }                    \n                \n\n                #${elementId} textarea {\n                    width: 100%;\n                    ${convertStylesToString(input)}\n                    ${convertStylesToString(input.font)}\n                    height: 100px;\n                    border-width: ${input.borderWidth}px;\n                    border-style: solid;\n                    border-radius: ${input.borderRadius}px;\n                    padding: 15px 15px;\n                }      \n\n                #${elementId} select {\n                    appearance: none;\n                    /* safari */\n                    -webkit-appearance: none;\n                    /* other styles for aesthetics */\n                    width: 100%;\n                    cursor: pointer;\n                    ${convertStylesToString(input)}\n                    ${convertStylesToString(input.font)}     \n                    height: ${input.height}px;  \n                    border-width: ${input.borderWidth}px;\n                    border-style: solid;\n                    border-radius: ${input.borderRadius}px;                                 \n                    color: ${label.color};\n                    padding: 0px 15px;\n                }         \n\n                #${elementId} .hs-fieldtype-select .input {\n                    position: relative;\n                }                \n\n                #${elementId} .hs-fieldtype-select .input {\n                    position: relative;\n                }  \n\n                #${elementId} .hs-fieldtype-select .input::before,\n                #${elementId} .hs-fieldtype-select .input::after {\n                    --size: 0.3rem;\n                    position: absolute;\n                    content: \"\";\n                    right: 1rem;\n                    pointer-events: none;\n                }\n\n                #${elementId} .hs-fieldtype-select .input::before {\n                    border-left: var(--size) solid transparent;\n                    border-right: var(--size) solid transparent;\n                    border-bottom: var(--size) solid ${label.color};\n                    top: 40%;\n                }\n\n                #${elementId} .hs-fieldtype-select .input::after {\n                    border-left: var(--size) solid transparent;\n                    border-right: var(--size) solid transparent;\n                    border-top: var(--size) solid ${label.color};\n                    top: 55%;\n                }                                \n\n                #${elementId} input[type=submit] {\n                    ${convertStylesToString(button)}\n                    height: ${button.height}px;\n                    border-width: ${button.borderWidth}px;\n                    border-style: solid;\n                    border-radius: ${button.borderRadius}px;\n                    width: ${button.width};\n                    padding: 0px ${button.padding}px;\n                    display: flex;\n                    margin: ${button.align==\"center\"?\"auto\":\"0px\"};\n                    float: ${button.align==\"right\"?\"right\":\"unset\"};\n                    justify-content: center;\n                    ${convertStylesToString(button.font)}\n                    margin-top: ${button.marginTop}px;\n                    cursor: pointer;\n                }        \n\n                #${elementId} ul.no-list.hs-error-msgs.inputs-list {\n                    margin: 0;\n                    padding: 0;\n                    margin-top: ${errors.marginTop}px;\n                    margin-bottom: ${errors.marginBottom}px;\n                    list-style: none;\n                }         \n\n                #${elementId} .hs-input.invalid.error {\n                    border-color: ${errors.color}!important;\n                }      \n\n                #${elementId} .hs_error_rollup ul {\n                    margin-top: 0px!important;\n                    margin-bottom: 0px!important;\n                }         \n                \n                  \n\n                #${elementId} .hs_error_rollup label {\n                    color: ${errors.color}!important;\n                    ${convertStylesToString(errors.font)}\n                }    \n\n\n                #${elementId} .hs-error-msg {\n                    color: ${errors.color}!important;\n                    ${convertStylesToString(errors.font)}\n                    margin-bottom: 0;\n                    text-align: left;\n                }\n\n                #${elementId} .hs-richtext.hs-main-font-element p {\n                    margin-top: ${agreement.marginTop}px;\n                    margin-bottom: ${agreement.marginBottom}px;\n                }\n\n\n                #${elementId} .hs-richtext {\n                    ${convertStylesToString(agreement.font)};\n                    color: ${agreement.color}!important;\n                    margin-top: ${agreement.marginTop}px;\n                    margin-bottom: ${agreement.marginBottom}px;                    \n                }\n\n                #${elementId} .hs-richtext.hs-main-font-element p span {\n                    color: ${agreement.color}!important;\n                    ${convertStylesToString(agreement.font)};\n                }\n\n                #${elementId} .hs-richtext.hs-main-font-element p span a {\n                    color: ${agreement.linkColor}!important;\n                    ${convertStylesToString(agreement.linkFont)}\n                }              \n\n                #${elementId} input:not([type=\"submit\"]):focus,\n                #${elementId} input:not([type=\"submit\"]):focus-visible {\n                    background-color: ${input.activeBackgroundColor};\n                    color: ${input.activeColor};\n                    border-color: ${input.activeBorderColor}!important;\n                    outline-color: ${input.activeBorderColor}!important;\n                }                       \n            `})]});}function poll(f,delay=200,count=10,i=0){if(i>count){console.error(\"poll max attempts\",f);return;}if(!f()){console.log(\"poll\",delay,count,i);setTimeout(()=>{poll(f,delay,count,i+1);},delay);}}function EmptyState({title,description}){return /*#__PURE__*/_jsxs(\"div\",{style:{...emptyStateStyle,width:\"100%\",height:\"100%\"},children:[/*#__PURE__*/_jsx(\"h1\",{style:{...stateTitleStyle},children:title}),/*#__PURE__*/_jsx(\"p\",{style:{...stateParagraphStyle},children:description})]});}const convertStylesToString=styles=>{return Object.keys(styles).map(property=>`${property.replace(/([A-Z])/g,\"-$1\").toLowerCase()}: ${styles[property]}`).join(\"; \")+\";\";};const formContainer={width:\"100%\",height:\"100%\",display:\"flex\"};addPropertyControls(CustomHubSpotForm,{portalId:{title:\"Portal\",type:ControlType.String,placeholder:\"25276298\",defaultValue:\"25276298\",description:\"Create a [Hubspot](https://www.hubspot.com/) account, add a new form and copy your portal ID. [Learn more…](https://www.framer.com/sites/integrations/hubspot/)\"},formId:{title:\"Form\",type:ControlType.String,placeholder:\"e7167571-4bc4-4c2c-bfdc-a0a8dbfd22f1\",defaultValue:\"e7167571-4bc4-4c2c-bfdc-a0a8dbfd22f1\"},advanced:{title:\"Advanced\",type:ControlType.Boolean,enabledTitle:\"Show\",disabledTitle:\"Hide\",defaultValue:false},region:{title:\"Region\",type:ControlType.String,placeholder:\"eu1\",defaultValue:\"eu1\",hidden:({advanced})=>!advanced},label:{type:ControlType.Object,controls:{font:{type:ControlType.Font,controls:\"extended\",displayFontSize:true,displayTextAlignment:false,defaultFontType:\"monospace\",defaultValue:{fontFamily:'\"Inter\", \"Inter Placeholder\", sans-serif',fontSize:\"16px\",fontStyle:\"normal\",fontWeight:400,letterSpacing:\"0em\",lineHeight:\"1.1em\"}},color:{type:ControlType.Color,defaultValue:\"rgb(75, 90, 99)\"},marginTop:{type:ControlType.Number,defaultValue:30},marginBottom:{type:ControlType.Number,defaultValue:8},asterisk:{type:ControlType.Color,defaultValue:\"rgb(255, 0, 0)\"}}},input:{type:ControlType.Object,controls:{font:{type:ControlType.Font,controls:\"extended\",displayFontSize:true,displayTextAlignment:false,defaultFontType:\"monospace\",defaultValue:{fontFamily:'\"Inter\", \"Inter Placeholder\", sans-serif',fontSize:\"16px\",fontStyle:\"normal\",fontWeight:500,letterSpacing:\"0em\",lineHeight:\"1.5em\"}},height:{type:ControlType.Number,defaultValue:62},backgroundColor:{type:ControlType.Color,defaultValue:\"rgb(248, 248, 248)\"},color:{type:ControlType.Color,defaultValue:\"rgb(0, 0, 0)\"},borderColor:{type:ControlType.Color,defaultValue:\"rgb(229, 231, 230)\"},borderWidth:{type:ControlType.Number,defaultValue:3},borderRadius:{type:ControlType.Number,defaultValue:10},activeBackgroundColor:{type:ControlType.Color,defaultValue:\"rgb(248, 248, 248)\"},activeColor:{type:ControlType.Color,defaultValue:\"rgb(0, 0, 0)\"},activeBorderColor:{type:ControlType.Color,defaultValue:\"rgb(0, 0, 0)\"}}},button:{type:ControlType.Object,controls:{font:{type:ControlType.Font,controls:\"extended\",displayFontSize:true,displayTextAlignment:false,defaultFontType:\"monospace\",defaultValue:{fontFamily:'\"Inter\", \"Inter Placeholder\", sans-serif',fontSize:\"26px\",fontStyle:\"normal\",fontWeight:500,letterSpacing:\"0em\",lineHeight:\"1.5em\"}},backgroundColor:{type:ControlType.Color,defaultValue:\"rgb(57, 193, 200)\"},color:{type:ControlType.Color,defaultValue:\"rgb(255, 255, 255)\"},width:{type:ControlType.Enum,options:[\"100%\",\"auto\"],optionTitles:[\"Full\",\"Fit\"],defaultValue:\"Full\",displaySegmentedControl:true},align:{type:ControlType.Enum,options:[\"left\",\"center\",\"right\"],optionTitles:[\"Left\",\"Center\",\"Right\"],defaultValue:\"left\",displaySegmentedControl:true,hidden(props){return props.width===\"100%\";}},padding:{type:ControlType.Number,defaultValue:45,hidden(props){return props.width===\"100%\";}},height:{type:ControlType.Number,defaultValue:66},borderColor:{type:ControlType.Color,defaultValue:\"rgb(0, 153, 255)\"},borderWidth:{type:ControlType.Number,defaultValue:0},borderRadius:{type:ControlType.Number,defaultValue:10},hoverBackgroundColor:{type:ControlType.Color,defaultValue:\"rgb(0, 153, 255)\"},hoverColor:{type:ControlType.Color,defaultValue:\"rgb(0, 153, 255)\"},hoverBorderColor:{type:ControlType.Color,default:\"rgb(0, 153, 255)\"},marginTop:{type:ControlType.Number,defaultValue:0}}},errors:{type:ControlType.Object,controls:{font:{type:ControlType.Font,controls:\"extended\",displayFontSize:true,displayTextAlignment:false,defaultFontType:\"monospace\",defaultValue:{fontFamily:'\"Inter\", \"Inter Placeholder\", sans-serif',fontSize:\"14px\",fontStyle:\"normal\",fontWeight:400,letterSpacing:\"0em\",lineHeight:\"2em\"}},color:{type:ControlType.Color,defaultValue:\"rgb(255, 0, 0)\"},marginTop:{type:ControlType.Number,defaultValue:5},marginBottom:{type:ControlType.Number,defaultValue:5}}},agreement:{type:ControlType.Object,controls:{font:{type:ControlType.Font,controls:\"extended\",displayFontSize:true,displayTextAlignment:false,defaultFontType:\"monospace\",defaultValue:{fontWeight:400,fontStyle:\"normal\",fontFamily:'\"Inter\", \"Inter Placeholder\", sans-serif',fontSize:\"14px\",lineHeight:\"1.5em\",letterSpacing:\"0em\"}},color:{type:ControlType.Color,defaultValue:\"rgb(158, 158, 158)\"},linkFont:{type:ControlType.Font,controls:\"extended\",displayFontSize:true,displayTextAlignment:false,defaultFontType:\"monospace\",defaultValue:{fontWeight:400,fontStyle:\"normal\",fontFamily:'\"Inter\", \"Inter Placeholder\", sans-serif',fontSize:\"14px\",lineHeight:\"1.5em\",letterSpacing:\"0em\"}},linkColor:{type:ControlType.Color,defaultValue:\"rgb(110, 110, 110)\"},marginTop:{type:ControlType.Number,defaultValue:10},marginBottom:{type:ControlType.Number,defaultValue:10}}}});\nexport const __FramerMetadata__ = {\"exports\":{\"default\":{\"type\":\"reactComponent\",\"name\":\"CustomHubSpotForm\",\"slots\":[],\"annotations\":{\"framerContractVersion\":\"1\",\"framerIntrinsicHeight\":\"300\",\"framerSupportedLayoutWidth\":\"fixed\",\"framerSupportedLayoutHeight\":\"any\",\"framerIntrinsicWidth\":\"480\",\"framerDisableUnlink\":\"*\"}},\"__FramerMetadata__\":{\"type\":\"variable\"}}}\n//# sourceMappingURL=./Custom_Hubspot_Form.map"],"mappings":"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"}