"use strict";(self.webpackChunkelite_events_nextjs=self.webpackChunkelite_events_nextjs||[]).push([[8570],{"./node_modules/next/dist/client/use-merged-ref.js":(module,exports,__webpack_require__)=>{Object.defineProperty(exports,"__esModule",{value:!0}),Object.defineProperty(exports,"useMergedRef",{enumerable:!0,get:function(){return useMergedRef}});const _react=__webpack_require__("./node_modules/next/dist/compiled/react/index.js");function useMergedRef(refA,refB){const cleanupA=(0,_react.useRef)(null),cleanupB=(0,_react.useRef)(null);return(0,_react.useCallback)(current=>{if(null===current){const cleanupFnA=cleanupA.current;cleanupFnA&&(cleanupA.current=null,cleanupFnA());const cleanupFnB=cleanupB.current;cleanupFnB&&(cleanupB.current=null,cleanupFnB())}else refA&&(cleanupA.current=applyRef(refA,current)),refB&&(cleanupB.current=applyRef(refB,current))},[refA,refB])}function applyRef(refA,current){if("function"==typeof refA){const cleanup=refA(current);return"function"==typeof cleanup?cleanup:()=>refA(null)}return refA.current=current,()=>{refA.current=null}}("function"==typeof exports.default||"object"==typeof exports.default&&null!==exports.default)&&void 0===exports.default.__esModule&&(Object.defineProperty(exports.default,"__esModule",{value:!0}),Object.assign(exports.default,exports),module.exports=exports.default)},"./src/components/ui/Image/Image.stories.tsx":(__unused_webpack_module,__webpack_exports__,__webpack_require__)=>{__webpack_require__.r(__webpack_exports__),__webpack_require__.d(__webpack_exports__,{AspectRatioSquare:()=>AspectRatioSquare,AspectRatioWide:()=>AspectRatioWide,BlurPlaceholder:()=>BlurPlaceholder,CardGrid:()=>CardGrid,CardLarge:()=>CardLarge,CardMedium:()=>CardMedium,CardSmall:()=>CardSmall,DarkModeSkeleton:()=>DarkModeSkeleton,Default:()=>Default,Hero16x9:()=>Hero16x9,Hero21x9:()=>Hero21x9,LazyLoaded:()=>LazyLoaded,ObjectFitContain:()=>ObjectFitContain,ThumbnailLarge:()=>ThumbnailLarge,ThumbnailMedium:()=>ThumbnailMedium,ThumbnailSmall:()=>ThumbnailSmall,WithFallback:()=>WithFallback,__namedExportsOrder:()=>__namedExportsOrder,default:()=>__WEBPACK_DEFAULT_EXPORT__});var react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__=__webpack_require__("./node_modules/next/dist/compiled/react/jsx-runtime.js"),_index__WEBPACK_IMPORTED_MODULE_1__=__webpack_require__("./src/components/ui/Image/index.tsx");const __WEBPACK_DEFAULT_EXPORT__={title:"UI/Image",component:_index__WEBPACK_IMPORTED_MODULE_1__._V,parameters:{layout:"centered"},tags:["autodocs"],argTypes:{aspectRatio:{control:"select",options:["1:1","4:3","16:9","3:4","21:9","auto"]},objectFit:{control:"select",options:["cover","contain","fill","none","scale-down"]},placeholder:{control:"select",options:["blur","skeleton","none"]}}},Default={args:{src:"https://picsum.photos/seed/product1/400/400",alt:"Product image",width:400,height:400}},BlurPlaceholder={args:{src:"https://picsum.photos/seed/product2/400/400",alt:"Product with blur",width:400,height:400,placeholder:"blur",placeholderColor:"#f3f4f6"}},AspectRatioSquare={args:{src:"https://picsum.photos/seed/square/600/400",alt:"Square aspect ratio",width:300,height:300,aspectRatio:"1:1",fill:!0},decorators:[Story=>(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)("div",{style:{width:300},children:(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(Story,{})})]},AspectRatioWide={args:{src:"https://picsum.photos/seed/wide/800/450",alt:"Wide aspect ratio",width:400,height:225,aspectRatio:"16:9",fill:!0},decorators:[Story=>(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)("div",{style:{width:400},children:(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(Story,{})})]},WithFallback={args:{src:"https://invalid-url.example.com/missing.jpg",alt:"Image with fallback",width:300,height:300,fallback:"https://picsum.photos/seed/fallback/300/300"}},ObjectFitContain={args:{src:"https://picsum.photos/seed/contain/600/300",alt:"Contain fit",width:300,height:300,objectFit:"contain",containerClassName:"bg-gray-100 dark:bg-gray-800"}},LazyLoaded={args:{src:"https://picsum.photos/seed/lazy/400/400",alt:"Lazy loaded image",width:400,height:400,lazyLoad:!0}},DarkModeSkeleton={args:{src:"https://picsum.photos/seed/dark/400/400",alt:"Dark mode skeleton",width:400,height:400,showSkeleton:!0},parameters:{backgrounds:{default:"dark"}}},Hero16x9={render:()=>(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)("div",{style:{width:"100%",maxWidth:1200},children:(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(_index__WEBPACK_IMPORTED_MODULE_1__.Cv,{src:"https://picsum.photos/seed/hero1/1200/675",alt:"Hero image 16:9",width:1200,height:675,heroAspectRatio:"16:9"})})},Hero21x9={render:()=>(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)("div",{style:{width:"100%",maxWidth:1200},children:(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(_index__WEBPACK_IMPORTED_MODULE_1__.Cv,{src:"https://picsum.photos/seed/hero2/1200/514",alt:"Hero image 21:9",width:1200,height:514,heroAspectRatio:"21:9"})})},ThumbnailSmall={render:()=>(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(_index__WEBPACK_IMPORTED_MODULE_1__.UX,{src:"https://picsum.photos/seed/thumb1/60/60",alt:"Small thumbnail",size:60})},ThumbnailMedium={render:()=>(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(_index__WEBPACK_IMPORTED_MODULE_1__.UX,{src:"https://picsum.photos/seed/thumb2/80/80",alt:"Medium thumbnail"})},ThumbnailLarge={render:()=>(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(_index__WEBPACK_IMPORTED_MODULE_1__.UX,{src:"https://picsum.photos/seed/thumb3/120/120",alt:"Large thumbnail",size:120})},CardSmall={render:()=>(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(_index__WEBPACK_IMPORTED_MODULE_1__.MH,{src:"https://picsum.photos/seed/card1/200/200",alt:"Small card image",size:"sm"})},CardMedium={render:()=>(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(_index__WEBPACK_IMPORTED_MODULE_1__.MH,{src:"https://picsum.photos/seed/card2/300/300",alt:"Medium card image",size:"md"})},CardLarge={render:()=>(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(_index__WEBPACK_IMPORTED_MODULE_1__.MH,{src:"https://picsum.photos/seed/card3/400/400",alt:"Large card image",size:"lg"})},CardGrid={render:()=>(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsxs)("div",{className:"grid grid-cols-3 gap-4",children:[(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(_index__WEBPACK_IMPORTED_MODULE_1__.MH,{src:"https://picsum.photos/seed/grid1/300/300",alt:"Grid item 1",size:"md"}),(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(_index__WEBPACK_IMPORTED_MODULE_1__.MH,{src:"https://picsum.photos/seed/grid2/300/300",alt:"Grid item 2",size:"md"}),(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(_index__WEBPACK_IMPORTED_MODULE_1__.MH,{src:"https://picsum.photos/seed/grid3/300/300",alt:"Grid item 3",size:"md"})]})},__namedExportsOrder=["Default","BlurPlaceholder","AspectRatioSquare","AspectRatioWide","WithFallback","ObjectFitContain","LazyLoaded","DarkModeSkeleton","Hero16x9","Hero21x9","ThumbnailSmall","ThumbnailMedium","ThumbnailLarge","CardSmall","CardMedium","CardLarge","CardGrid"]},"./src/components/ui/Image/index.tsx":(__unused_webpack_module,__webpack_exports__,__webpack_require__)=>{__webpack_require__.d(__webpack_exports__,{MH:()=>CardImage,Cv:()=>HeroImage,_V:()=>Image,UX:()=>ThumbnailImage});var jsx_runtime=__webpack_require__("./node_modules/next/dist/compiled/react/jsx-runtime.js"),react=__webpack_require__("./node_modules/next/dist/compiled/react/index.js"),next_image=__webpack_require__("./node_modules/@storybook/nextjs/dist/images/next-image.js"),core=__webpack_require__("./src/lib/core/index.ts"),logging=__webpack_require__("./src/lib/logging/index.ts"),process=__webpack_require__("./node_modules/process/browser.js");function buildCloudinaryUrl(publicId,options={}){const cloudName=function getCloudinaryCloudName(){return process.env.NEXT_PUBLIC_CLOUDINARY_CLOUD_NAME||""}();if(!cloudName)return logging.vF.warn("Cloudinary cloud name not configured",{category:"SYSTEM"}),"";const transforms=[];options.width&&transforms.push(`w_${options.width}`),options.height&&transforms.push(`h_${options.height}`),options.crop&&transforms.push(`c_${options.crop}`),options.gravity&&transforms.push(`g_${options.gravity}`),options.blur&&transforms.push(`e_blur:${options.blur}`),transforms.push(`q_${options.quality||"auto"}`),transforms.push(`f_${options.format||"auto"}`);return`https://res.cloudinary.com/${cloudName}/image/upload/${transforms.join(",")}/${publicId}`}const aspectRatioClasses={"1:1":"aspect-square","4:3":"aspect-[4/3]","16:9":"aspect-video","3:4":"aspect-[3/4]","21:9":"aspect-[21/9]",auto:""},objectFitClasses={cover:"object-cover",contain:"object-contain",fill:"object-fill",none:"object-none","scale-down":"object-scale-down"},hasIntersectionObserver="undefined"!=typeof IntersectionObserver,Image=(0,react.memo)(function Image({src,publicId,fallback="/images/placeholder.png",alt,width,height,aspectRatio,objectFit="cover",placeholder="skeleton",placeholderColor="#e5e7eb",showSkeleton=!0,lazyLoad=!1,rootMargin="200px",className,containerClassName,priority,onLoadComplete,onLoadError,...props}){const[isLoading,setIsLoading]=(0,react.useState)(!0),[hasError,setHasError]=(0,react.useState)(!1),[isInView,setIsInView]=(0,react.useState)(!lazyLoad||!hasIntersectionObserver),containerRef=(0,react.useRef)(null),imageSrc=hasError?fallback:publicId?buildCloudinaryUrl(publicId):src||fallback,numWidth="number"==typeof width?width:parseInt(String(width),10)||300,numHeight="number"==typeof height?height:parseInt(String(height),10)||300,blurDataURL="blur"===placeholder?publicId?function buildCloudinaryBlurPlaceholder(publicId){return buildCloudinaryUrl(publicId,{width:20,quality:30,blur:1e3})}(publicId):function generateBlurPlaceholder(width,height,color="#e5e7eb"){return`data:image/svg+xml;base64,${btoa(`<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 ${width} ${height}">\n    <rect fill="${color}" width="${width}" height="${height}"/>\n  </svg>`)}`}(numWidth,numHeight,placeholderColor):void 0,handleLoad=(0,react.useCallback)(()=>{setIsLoading(!1),onLoadComplete?.()},[onLoadComplete]),handleError=(0,react.useCallback)(()=>{setHasError(!0),setIsLoading(!1),onLoadError?.()},[onLoadError]);(0,react.useEffect)(()=>{if(!lazyLoad||!hasIntersectionObserver||isInView)return;const container=containerRef.current;if(!container)return;const observer=new IntersectionObserver(([entry])=>{entry.isIntersecting&&(setIsInView(!0),observer.disconnect())},{rootMargin,threshold:.1});return observer.observe(container),()=>observer.disconnect()},[lazyLoad,rootMargin,isInView]);const showPlaceholderState=("skeleton"===placeholder||showSkeleton)&&isLoading;return(0,jsx_runtime.jsxs)("div",{ref:containerRef,className:(0,core.cn)("relative overflow-hidden",aspectRatio&&aspectRatioClasses[aspectRatio],containerClassName),children:[showPlaceholderState&&(0,jsx_runtime.jsx)("div",{className:"absolute inset-0 bg-gray-200 dark:bg-gray-700 animate-pulse","aria-hidden":"true"}),isInView&&(0,jsx_runtime.jsx)(next_image.A,{src:imageSrc,alt,width,height,priority,placeholder:"blur"===placeholder&&blurDataURL?"blur":"empty",blurDataURL,className:(0,core.cn)("transition-opacity duration-300",isLoading?"opacity-0":"opacity-100",objectFitClasses[objectFit],className),onLoad:handleLoad,onError:handleError,...props})]})}),HeroImage=(0,react.memo)(function HeroImage({heroAspectRatio="16:9",placeholder="blur",...props}){return(0,jsx_runtime.jsx)(Image,{...props,aspectRatio:heroAspectRatio,placeholder,priority:!0})}),ThumbnailImage=(0,react.memo)(function ThumbnailImage({size=80,showSkeleton=!0,...props}){return(0,jsx_runtime.jsx)(Image,{...props,width:size,height:size,showSkeleton})}),cardSizes={sm:{width:200,height:200},md:{width:300,height:300},lg:{width:400,height:400}},CardImage=(0,react.memo)(function CardImage({size="md",placeholder="blur",...props}){const dimensions=cardSizes[size];return(0,jsx_runtime.jsx)(Image,{...props,width:dimensions.width,height:dimensions.height,placeholder})})}}]);