{"version":3,"file":"NotificationBox.CVDP2lbX.mjs","names":["useState"],"sources":["https:/framerusercontent.com/modules/gTdYGM4LAEMnGhl9UfQU/3poCqMWlvc2oVP7oxPjg/NotificationBox.js"],"sourcesContent":["// Message bubble component with profile image, like a chat message\nimport{jsx as _jsx,jsxs as _jsxs}from\"react/jsx-runtime\";import{addPropertyControls,ControlType}from\"framer\";import{useState,useEffect}from\"react\";/**\n * @framerSupportedLayoutWidth fixed\n * @framerSupportedLayoutHeight auto\n */export default function MessageBubble(props){const{message,profileImage={src:\"https://framerusercontent.com/images/GfGkADagM4KEibNcIiRUWlfrR0.jpg\",alt:\"Profile\"},userName,type,showIcon,backgroundColor,textColor,borderRadius,shadow,font,nameFont,rightToLeft}=props;const[isMobile,setIsMobile]=useState(false);useEffect(()=>{if(typeof window!==\"undefined\"){const checkMobile=()=>{setIsMobile(window.innerWidth<768);};checkMobile();window.addEventListener(\"resize\",checkMobile);return()=>window.removeEventListener(\"resize\",checkMobile);}},[]);const typeConfig={info:{icon:\"💬\",accent:\"#3B82F6\",gradient:\"linear-gradient(135deg, #667eea 0%, #764ba2 100%)\"},success:{icon:\"🎉\",accent:\"#10B981\",gradient:\"linear-gradient(135deg, #84fab0 0%, #8fd3f4 100%)\"},warning:{icon:\"⚡\",accent:\"#F59E0B\",gradient:\"linear-gradient(135deg, #ffecd2 0%, #fcb69f 100%)\"},error:{icon:\"🔥\",accent:\"#EF4444\",gradient:\"linear-gradient(135deg, #ff9a9e 0%, #fecfef 100%)\"}};const config=typeConfig[type];// Responsive values\nconst profileSize=isMobile?\"32px\":\"40px\";const padding=isMobile?\"12px 16px\":\"16px 20px\";const gap=isMobile?\"8px\":\"12px\";const iconSize=isMobile?\"16px\":\"18px\";const bubbleRadius=isMobile?Math.max(12,borderRadius-2):borderRadius;// Responsive font adjustments\nconst responsiveFont={...font,fontSize:isMobile&&font.fontSize?`${Math.max(12,parseInt(font.fontSize)-2)}px`:font.fontSize};const responsiveNameFont={...nameFont,fontSize:isMobile&&nameFont.fontSize?`${Math.max(10,parseInt(nameFont.fontSize)-1)}px`:nameFont.fontSize};return /*#__PURE__*/_jsxs(\"div\",{style:{width:\"100%\",display:\"flex\",alignItems:\"flex-start\",gap,padding:isMobile?\"8px\":\"12px\",flexDirection:rightToLeft?\"row-reverse\":\"row\"},children:[/*#__PURE__*/_jsx(\"div\",{style:{width:profileSize,height:profileSize,borderRadius:\"50%\",overflow:\"hidden\",flexShrink:0,border:`2px solid ${config.accent}`,boxShadow:shadow?\"0 2px 8px rgba(0, 0, 0, 0.1)\":\"none\"},children:/*#__PURE__*/_jsx(\"img\",{src:profileImage.src,alt:profileImage.alt,style:{width:\"100%\",height:\"100%\",objectFit:\"cover\"}})}),/*#__PURE__*/_jsxs(\"div\",{style:{flex:1,display:\"flex\",flexDirection:\"column\",gap:isMobile?\"4px\":\"6px\",alignItems:rightToLeft?\"flex-end\":\"flex-start\"},children:[/*#__PURE__*/_jsx(\"div\",{style:{color:config.accent,...responsiveNameFont,fontWeight:\"600\",lineHeight:\"1.2\",textAlign:rightToLeft?\"right\":\"left\"},children:userName}),/*#__PURE__*/_jsxs(\"div\",{style:{backgroundColor,borderRadius:rightToLeft?`${bubbleRadius}px ${bubbleRadius}px 4px ${bubbleRadius}px`:`${bubbleRadius}px ${bubbleRadius}px ${bubbleRadius}px 4px`,padding,position:\"relative\",boxShadow:shadow?isMobile?\"0 2px 8px rgba(0, 0, 0, 0.08)\":\"0 4px 12px rgba(0, 0, 0, 0.1)\":\"none\",border:`1px solid ${config.accent}20`,maxWidth:isMobile?\"280px\":\"400px\"},children:[/*#__PURE__*/_jsxs(\"div\",{style:{display:\"flex\",alignItems:\"flex-start\",gap:showIcon?isMobile?\"6px\":\"8px\":\"0px\",flexDirection:rightToLeft?\"row-reverse\":\"row\"},children:[showIcon&&/*#__PURE__*/_jsx(\"div\",{style:{fontSize:iconSize,lineHeight:\"1\",flexShrink:0,marginTop:\"1px\"},children:config.icon}),/*#__PURE__*/_jsx(\"div\",{style:{flex:1,color:textColor,...responsiveFont,lineHeight:\"1.4\",wordBreak:\"break-word\",textAlign:rightToLeft?\"right\":\"left\",direction:rightToLeft?\"rtl\":\"ltr\"},children:message})]}),/*#__PURE__*/_jsx(\"div\",{style:{position:\"absolute\",bottom:\"8px\",[rightToLeft?\"right\":\"left\"]:\"-6px\",width:\"12px\",height:\"12px\",backgroundColor,transform:\"rotate(45deg)\",border:`1px solid ${config.accent}20`,borderTop:\"none\",[rightToLeft?\"borderLeft\":\"borderRight\"]:\"none\"}}),/*#__PURE__*/_jsx(\"div\",{style:{position:\"absolute\",top:0,[rightToLeft?\"left\":\"right\"]:0,width:isMobile?\"30px\":\"40px\",height:\"100%\",background:rightToLeft?`linear-gradient(270deg, transparent 0%, ${config.accent}08 100%)`:`linear-gradient(90deg, transparent 0%, ${config.accent}08 100%)`,borderRadius:rightToLeft?`${bubbleRadius}px 0 0 ${bubbleRadius}px`:`0 ${bubbleRadius}px ${bubbleRadius}px 0`,pointerEvents:\"none\"}})]})]})]});}addPropertyControls(MessageBubble,{message:{type:ControlType.String,title:\"Message\",defaultValue:\"Hey there! This is a playful message bubble with a profile image. It looks just like a chat message! 💬\",displayTextArea:true},profileImage:{type:ControlType.ResponsiveImage,title:\"Profile Image\"},userName:{type:ControlType.String,title:\"User Name\",defaultValue:\"Alex\"},rightToLeft:{type:ControlType.Boolean,title:\"Right to Left\",defaultValue:false,enabledTitle:\"RTL\",disabledTitle:\"LTR\"},type:{type:ControlType.Enum,title:\"Type\",options:[\"info\",\"success\",\"warning\",\"error\"],optionTitles:[\"Info\",\"Success\",\"Warning\",\"Error\"],defaultValue:\"info\",displaySegmentedControl:true},showIcon:{type:ControlType.Boolean,title:\"Show Icon\",defaultValue:true,enabledTitle:\"Show\",disabledTitle:\"Hide\"},backgroundColor:{type:ControlType.Color,title:\"Bubble Background\",defaultValue:\"#F8FAFC\"},textColor:{type:ControlType.Color,title:\"Text Color\",defaultValue:\"#1F2937\"},borderRadius:{type:ControlType.Number,title:\"Border Radius\",defaultValue:16,min:8,max:24,step:1,unit:\"px\"},shadow:{type:ControlType.Boolean,title:\"Shadow\",defaultValue:true,enabledTitle:\"On\",disabledTitle:\"Off\"},font:{type:ControlType.Font,title:\"Message Font\",defaultValue:{fontSize:\"15px\",variant:\"Medium\",letterSpacing:\"-0.01em\",lineHeight:\"1.4em\"},controls:\"extended\",defaultFontType:\"sans-serif\"},nameFont:{type:ControlType.Font,title:\"Name Font\",defaultValue:{fontSize:\"12px\",variant:\"Semibold\",letterSpacing:\"-0.01em\",lineHeight:\"1.2em\"},controls:\"extended\",defaultFontType:\"sans-serif\"}});\nexport const __FramerMetadata__ = {\"exports\":{\"default\":{\"type\":\"reactComponent\",\"name\":\"MessageBubble\",\"slots\":[],\"annotations\":{\"framerSupportedLayoutHeight\":\"auto\",\"framerContractVersion\":\"1\",\"framerSupportedLayoutWidth\":\"fixed\"}},\"__FramerMetadata__\":{\"type\":\"variable\"}}}\n//# sourceMappingURL=./NotificationBox.map"],"mappings":"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"}