{
  "version": 3,
  "sources": ["ssg:https://framerusercontent.com/modules/eUKEPIEP2zlo1tPPbeVx/huqN25D4vXjWjOR7KrMm/Title.js"],
  "sourcesContent": ["import{jsx as _jsx}from\"react/jsx-runtime\";import{useEffect,useState}from\"react\";import{addPropertyControls,ControlType}from\"framer\";export default function Title(props){// Define breakpoints\nconst mobileBreakpoint=390// Example breakpoint for mobile\n;const tabletBreakpoint=810// Example breakpoint for tablet\n;const Heading=props.titleSize;// State to hold the device type\nconst[deviceType,setDeviceType]=useState(\"desktop\");useEffect(()=>{const handleResize=()=>{const screenWidth=window.innerWidth;if(screenWidth<=mobileBreakpoint){setDeviceType(\"mobile\");}else if(screenWidth<=tabletBreakpoint){setDeviceType(\"tablet\");}else{setDeviceType(\"desktop\");}};// Initial check\nhandleResize();// Add event listener\nwindow.addEventListener(\"resize\",handleResize);// Cleanup\nreturn()=>window.removeEventListener(\"resize\",handleResize);},[mobileBreakpoint,tabletBreakpoint]);// Styles with responsiveness\nconst getResponsiveStyles=()=>{switch(deviceType){case\"mobile\":return{h1:{fontSize:\"58px\",lineHeight:\"110%\",padding:\"0px\",margin:\"0px\",fontFamily:\"PP Formula Condensed Bold\",textTransform:\"uppercase\",color:props.color,textAlign:props.textAlign,overflow:\"visible\"},h2:{fontSize:\"46px\",lineHeight:\"110%\",padding:\"0px\",margin:\"0px\",fontFamily:\"PP Formula Condensed Bold\",textTransform:\"uppercase\",color:props.color,textAlign:props.textAlign,overflow:\"visible\"}};case\"tablet\":return{h1:{fontSize:\"77px\",lineHeight:\"110%\",padding:\"0px\",margin:\"0px\",fontFamily:\"PP Formula Condensed Bold\",textTransform:\"uppercase\",color:props.color,textAlign:props.textAlign,overflow:\"visible\"},h2:{fontSize:\"58px\",lineHeight:\"110%\",padding:\"0px\",margin:\"0px\",fontFamily:\"PP Formula Condensed Bold\",textTransform:\"uppercase\",color:props.color,textAlign:props.textAlign,overflow:\"visible\"}};default:// Desktop styles\nreturn{h1:{fontSize:\"96px\",lineHeight:\"110%\",padding:\"0px\",margin:\"0px\",fontFamily:\"PP Formula Condensed Bold\",textTransform:\"uppercase\",color:props.color,textAlign:props.textAlign,overflow:\"visible\"},h2:{fontSize:\"72px\",lineHeight:\"110%\",padding:\"0px\",margin:\"0px\",fontFamily:\"PP Formula Condensed Bold\",textTransform:\"uppercase\",color:props.color,textAlign:props.textAlign,overflow:\"visible\"}};}};const stylesPerHeading=getResponsiveStyles();const renderStyles=stylesPerHeading[props.titleSize.toLowerCase()];// Apply underline color to the specific word\nconst createContent=()=>{return{__html:props.content.replace(/<span class='circle'>(.*?)<\\/span>/,`<span class='circle' style='text-decoration: underline; text-decoration-color: ${props.underlineColor};'>$1</span>`)};};return /*#__PURE__*/_jsx(Heading,{style:renderStyles,dangerouslySetInnerHTML:createContent()});}Title.defaultProps={titleSize:\"h2\",content:\"Costco for cloud is <span class='circle'>here</span>\",color:\"#000000\",textAlign:\"left\",underlineColor:\"#FF0000\"};addPropertyControls(Title,{titleSize:{title:\"Title Size\",type:ControlType.Enum,options:[\"h1\",\"h2\"],defaultValue:\"h2\",displaySegmentedControl:true,segmentedControlDirection:\"vertical\",optionTitles:[\"H1\",\"H2\"]},textAlign:{title:\"Title Alignment\",type:ControlType.Enum,options:[\"left\",\"center\",\"right\"],defaultValue:\"left\",displaySegmentedControl:true,segmentedControlDirection:\"horizontal\",optionTitles:[\"Left\",\"Center\",\"Right\"]},content:{title:\"Text\",type:ControlType.String,displayTextArea:true,defaultValue:\"Costco for cloud is <span class='circle'>here</span>\"},color:{title:\"Color\",type:ControlType.Color,defaultValue:\"#000000\"},underlineColor:{title:\"Underline Color\",type:ControlType.Color,defaultValue:\"#FF0000\"}});\nexport const __FramerMetadata__ = {\"exports\":{\"default\":{\"type\":\"reactComponent\",\"name\":\"Title\",\"slots\":[],\"annotations\":{\"framerContractVersion\":\"1\"}},\"__FramerMetadata__\":{\"type\":\"variable\"}}}\n//# sourceMappingURL=./Title.map"],
  "mappings": "gJAAoJ,SAARA,EAAuBC,EAAM,CAGxK,IAAMC,EAAQD,EAAM,UAChB,CAACE,EAAWC,CAAa,EAAEC,EAAS,SAAS,EAAEC,EAAU,IAAI,CAAC,IAAMC,EAAa,IAAI,CAAC,IAAMC,EAAYC,EAAO,WAAcD,GAAa,IAAkBJ,EAAc,QAAQ,EAAWI,GAAa,IAAkBJ,EAAc,QAAQ,EAAQA,EAAc,SAAS,CAAG,EACzR,OAAAG,EAAa,EACbE,EAAO,iBAAiB,SAASF,CAAY,EACvC,IAAIE,EAAO,oBAAoB,SAASF,CAAY,CAAE,EAAE,CAAC,IAAiB,GAAgB,CAAC,EAE2V,IAAMG,GADxa,IAAI,CAAC,OAAOP,EAAW,CAAC,IAAI,SAAS,MAAM,CAAC,GAAG,CAAC,SAAS,OAAO,WAAW,OAAO,QAAQ,MAAM,OAAO,MAAM,WAAW,4BAA4B,cAAc,YAAY,MAAMF,EAAM,MAAM,UAAUA,EAAM,UAAU,SAAS,SAAS,EAAE,GAAG,CAAC,SAAS,OAAO,WAAW,OAAO,QAAQ,MAAM,OAAO,MAAM,WAAW,4BAA4B,cAAc,YAAY,MAAMA,EAAM,MAAM,UAAUA,EAAM,UAAU,SAAS,SAAS,CAAC,EAAE,IAAI,SAAS,MAAM,CAAC,GAAG,CAAC,SAAS,OAAO,WAAW,OAAO,QAAQ,MAAM,OAAO,MAAM,WAAW,4BAA4B,cAAc,YAAY,MAAMA,EAAM,MAAM,UAAUA,EAAM,UAAU,SAAS,SAAS,EAAE,GAAG,CAAC,SAAS,OAAO,WAAW,OAAO,QAAQ,MAAM,OAAO,MAAM,WAAW,4BAA4B,cAAc,YAAY,MAAMA,EAAM,MAAM,UAAUA,EAAM,UAAU,SAAS,SAAS,CAAC,EAAE,QACp2B,MAAM,CAAC,GAAG,CAAC,SAAS,OAAO,WAAW,OAAO,QAAQ,MAAM,OAAO,MAAM,WAAW,4BAA4B,cAAc,YAAY,MAAMA,EAAM,MAAM,UAAUA,EAAM,UAAU,SAAS,SAAS,EAAE,GAAG,CAAC,SAAS,OAAO,WAAW,OAAO,QAAQ,MAAM,OAAO,MAAM,WAAW,4BAA4B,cAAc,YAAY,MAAMA,EAAM,MAAM,UAAUA,EAAM,UAAU,SAAS,SAAS,CAAC,CAAE,CAAC,GAA6C,EAAsCA,EAAM,UAAU,YAAY,CAAC,EAClS,OAAoBU,EAAKT,EAAQ,CAAC,MAAMQ,EAAa,wBAAjP,CAAC,OAAOT,EAAM,QAAQ,QAAQ,qCAAqC,kFAAkFA,EAAM,cAAc,cAAc,CAAC,CAAgG,CAAC,CAAE,CAACD,EAAM,aAAa,CAAC,UAAU,KAAK,QAAQ,uDAAuD,MAAM,UAAU,UAAU,OAAO,eAAe,SAAS,EAAEY,EAAoBZ,EAAM,CAAC,UAAU,CAAC,MAAM,aAAa,KAAKa,EAAY,KAAK,QAAQ,CAAC,KAAK,IAAI,EAAE,aAAa,KAAK,wBAAwB,GAAK,0BAA0B,WAAW,aAAa,CAAC,KAAK,IAAI,CAAC,EAAE,UAAU,CAAC,MAAM,kBAAkB,KAAKA,EAAY,KAAK,QAAQ,CAAC,OAAO,SAAS,OAAO,EAAE,aAAa,OAAO,wBAAwB,GAAK,0BAA0B,aAAa,aAAa,CAAC,OAAO,SAAS,OAAO,CAAC,EAAE,QAAQ,CAAC,MAAM,OAAO,KAAKA,EAAY,OAAO,gBAAgB,GAAK,aAAa,sDAAsD,EAAE,MAAM,CAAC,MAAM,QAAQ,KAAKA,EAAY,MAAM,aAAa,SAAS,EAAE,eAAe,CAAC,MAAM,kBAAkB,KAAKA,EAAY,MAAM,aAAa,SAAS,CAAC,CAAC",
  "names": ["Title", "props", "Heading", "deviceType", "setDeviceType", "ye", "ue", "handleResize", "screenWidth", "window", "renderStyles", "p", "addPropertyControls", "ControlType"]
}