{"version":3,"file":"WindowSizeDisplay.BQCoHhpc.mjs","names":["useState"],"sources":["https:/framerusercontent.com/modules/809wJNc3Q5kzppmy8qVr/qOQQ2cVpfRxmFSHYIsfJ/WindowSizeDisplay.js"],"sourcesContent":["// Component that displays current browser width and height\nimport{jsx as _jsx,jsxs as _jsxs}from\"react/jsx-runtime\";import{useState,useEffect,startTransition}from\"react\";import{addPropertyControls,ControlType}from\"framer\";/**\n * @framerSupportedLayoutWidth auto\n * @framerSupportedLayoutHeight auto\n */export default function WindowSizeDisplay(props){const{backgroundColor,textColor,font,borderRadius,showBorder,borderColor}=props;const[dimensions,setDimensions]=useState({width:0,height:0});useEffect(()=>{if(typeof window!==\"undefined\"){const updateDimensions=()=>{startTransition(()=>{setDimensions({width:window.innerWidth,height:window.innerHeight});});};// Set initial dimensions\nupdateDimensions();// Add event listener for resize\nwindow.addEventListener(\"resize\",updateDimensions);// Cleanup\nreturn()=>window.removeEventListener(\"resize\",updateDimensions);}},[]);const isFixedWidth=props?.style&&props.style.width===\"100%\";return /*#__PURE__*/_jsxs(\"div\",{style:{...props.style,...isFixedWidth?{...props?.style}:{minWidth:\"max-content\"},backgroundColor,color:textColor,borderRadius,border:showBorder?`1px solid ${borderColor}`:\"none\",padding:\"16px 20px\",display:\"flex\",flexDirection:\"column\",gap:\"8px\",alignItems:\"center\",justifyContent:\"center\",...font},children:[/*#__PURE__*/_jsx(\"div\",{style:{fontSize:\"0.9em\",opacity:.7},children:\"Browser Size\"}),/*#__PURE__*/_jsxs(\"div\",{style:{fontWeight:\"bold\"},children:[dimensions.width,\" \\xd7 \",dimensions.height]}),/*#__PURE__*/_jsxs(\"div\",{style:{fontSize:\"0.8em\",opacity:.6},children:[\"Width: \",dimensions.width,\"px • Height: \",dimensions.height,\"px\"]})]});}addPropertyControls(WindowSizeDisplay,{backgroundColor:{type:ControlType.Color,title:\"Background\",defaultValue:\"#FFFFFF\"},textColor:{type:ControlType.Color,title:\"Text Color\",defaultValue:\"#000000\"},font:{type:ControlType.Font,title:\"Font\",defaultValue:{fontSize:\"16px\",variant:\"Medium\",letterSpacing:\"-0.01em\",lineHeight:\"1.3em\"},controls:\"extended\",defaultFontType:\"sans-serif\"},borderRadius:{type:ControlType.Number,title:\"Border Radius\",defaultValue:8,min:0,max:32,unit:\"px\"},showBorder:{type:ControlType.Boolean,title:\"Show Border\",defaultValue:true,enabledTitle:\"Show\",disabledTitle:\"Hide\"},borderColor:{type:ControlType.Color,title:\"Border Color\",defaultValue:\"#EEEEEE\",hidden:({showBorder})=>!showBorder}});\nexport const __FramerMetadata__ = {\"exports\":{\"default\":{\"type\":\"reactComponent\",\"name\":\"WindowSizeDisplay\",\"slots\":[],\"annotations\":{\"framerSupportedLayoutWidth\":\"auto\",\"framerSupportedLayoutHeight\":\"auto\",\"framerContractVersion\":\"1\"}},\"__FramerMetadata__\":{\"type\":\"variable\"}}}\n//# sourceMappingURL=./WindowSizeDisplay.map"],"mappings":"6MAIG,SAAwB,EAAkB,EAAM,CAAC,GAAK,CAAC,kBAAgB,YAAU,OAAK,eAAa,aAAW,eAAa,EAAW,CAAC,EAAW,GAAeA,EAAS,CAAC,MAAM,EAAE,OAAO,EAAE,CAAC,CAAC,MAAc,CAAC,GAAU,IAAS,OAAY,CAAC,IAAM,MAAqB,CAAC,MAAoB,CAAC,EAAc,CAAC,MAAM,EAAO,WAAW,OAAO,EAAO,YAAY,CAAC,EAAG,EAGtW,OAFA,GAAkB,CAClB,EAAO,iBAAiB,SAAS,EAAiB,KACxC,EAAO,oBAAoB,SAAS,EAAiB,GAAI,EAAE,CAAC,CAAC,IAAM,EAAa,GAAO,OAAO,EAAM,MAAM,QAAQ,OAAO,OAAoB,EAAM,MAAM,CAAC,MAAM,CAAC,GAAG,EAAM,MAAM,GAAG,EAAa,CAAC,GAAG,GAAO,MAAM,CAAC,CAAC,SAAS,cAAc,CAAC,kBAAgB,MAAM,EAAU,eAAa,OAAO,EAAW,aAAa,IAAc,OAAO,QAAQ,YAAY,QAAQ,OAAO,cAAc,SAAS,IAAI,MAAM,WAAW,SAAS,eAAe,SAAS,GAAG,EAAK,CAAC,SAAS,CAAc,EAAK,MAAM,CAAC,MAAM,CAAC,SAAS,QAAQ,QAAQ,GAAG,CAAC,SAAS,eAAe,CAAC,CAAc,EAAM,MAAM,CAAC,MAAM,CAAC,WAAW,OAAO,CAAC,SAAS,CAAC,EAAW,MAAM,MAAS,EAAW,OAAO,CAAC,CAAC,CAAc,EAAM,MAAM,CAAC,MAAM,CAAC,SAAS,QAAQ,QAAQ,GAAG,CAAC,SAAS,CAAC,UAAU,EAAW,MAAM,gBAAgB,EAAW,OAAO,KAAK,CAAC,CAAC,CAAC,CAAC,CAAC,sBANnvB,IAAsD,IAAoD,CAM2oB,EAAoB,EAAkB,CAAC,gBAAgB,CAAC,KAAK,EAAY,MAAM,MAAM,aAAa,aAAa,UAAU,CAAC,UAAU,CAAC,KAAK,EAAY,MAAM,MAAM,aAAa,aAAa,UAAU,CAAC,KAAK,CAAC,KAAK,EAAY,KAAK,MAAM,OAAO,aAAa,CAAC,SAAS,OAAO,QAAQ,SAAS,cAAc,UAAU,WAAW,QAAQ,CAAC,SAAS,WAAW,gBAAgB,aAAa,CAAC,aAAa,CAAC,KAAK,EAAY,OAAO,MAAM,gBAAgB,aAAa,EAAE,IAAI,EAAE,IAAI,GAAG,KAAK,KAAK,CAAC,WAAW,CAAC,KAAK,EAAY,QAAQ,MAAM,cAAc,aAAa,GAAK,aAAa,OAAO,cAAc,OAAO,CAAC,YAAY,CAAC,KAAK,EAAY,MAAM,MAAM,eAAe,aAAa,UAAU,QAAQ,CAAC,gBAAc,CAAC,EAAW,CAAC,CAAC"}