{"version":3,"file":"wO2c1AT88.D8B7o_Jl.mjs","names":["mask","Base","MotionSVG","SVG","svg","getProps","Icon","React.forwardRef","mask","SVG","getProps","Icon","React.forwardRef","getProps","React.forwardRef","r","c","e","n","t","Children","useCallback","useRef","useState","useEffectEvent","startTransition","React.useContext","React.useMemo","React.Fragment","React.forwardRef","useRef","React.useId","Image1","RichText","React.useState","React.useMemo","React.useRef","React.useCallback","React.startTransition","t","v","p","y","m","I","B","E","_","j","D","C","J","r","W","$","z","K","G","V","H","X","Q","Y","Z","tt","te","tr","ti","tn","ts","to","ta","tu","tl","th","tc","tf","td","tg","tv","ty","tp","tm","tw","tb","tI","tS","tU","tk","tL","tB","tF","tP","tN","tO","tx","tA","tq","tj","tD","i","n","s","o","a","u","l","h","c","d","w","b","e","T","x","F","N","A","R","tM","tT","U","S","tR","g","tC","p","l","d","x","T","g","s","n","t","r","o","y","a","h","f","p","y","r","n","a","u","l","h","c","d","T","x","g","p","d","s","n","t","r","o"],"sources":["https:/framerusercontent.com/modules/N9MwGSMtAmpQclli35fe/GYjsvvIJ5jFfbJsXlY6M/PQ7Enw1Xw.js","https:/framerusercontent.com/modules/rYN788Z7chNF5MGYrCD8/KBSwFzVcGJAxJ9YAivQL/IH5k5fyVb.js","https:/framerusercontent.com/modules/unXEsZltj7JMvLGo2ocp/yhoQwxi9rSJ8DEYXLcoS/wKjRQ7V57.js","https:/ga.jspm.io/npm:use-effect-event@2.0.3/dist/index.js","https:/framerusercontent.com/modules/zvkTOpMSuRzRhLzZZIwG/7GuSIJ2Jm6VU0TIDHoiR/SlideShow.js","https:/framerusercontent.com/modules/uqNKEPeaN26lFCKuPdLq/pahpjVOGijjGzKTD3tPY/bHzaerURw.js","https:/framerusercontent.com/modules/8fKGLx70pxBkHClVFAKV/aCscdt0gPM8GJdx5hz7j/FramerStory.js","https:/framerusercontent.com/modules/iYc04oLBliiDXVlkvHig/BwvubKgniC3XZoXSCLCA/s42uHmB6V-0.js","https:/framerusercontent.com/modules/iYc04oLBliiDXVlkvHig/BwvubKgniC3XZoXSCLCA/s42uHmB6V-1.js","https:/framerusercontent.com/modules/iYc04oLBliiDXVlkvHig/BwvubKgniC3XZoXSCLCA/s42uHmB6V.js","https:/framerusercontent.com/modules/QD1WrTIDNIereMqx564n/tImdYivi7ydMntoSvH9U/wO2c1AT88-0.js","https:/framerusercontent.com/modules/QD1WrTIDNIereMqx564n/tImdYivi7ydMntoSvH9U/wO2c1AT88-1.js","https:/framerusercontent.com/modules/QD1WrTIDNIereMqx564n/tImdYivi7ydMntoSvH9U/wO2c1AT88.js"],"sourcesContent":["// Generated by Framer (d5224d0)\nimport{jsx as _jsx}from\"react/jsx-runtime\";import{addPropertyControls,ControlType,cx,motion,useSVGTemplate,withCSS}from\"framer\";import*as React from\"react\";import{forwardRef}from\"react\";const mask=\"var(--framer-icon-mask)\";const Base=/*#__PURE__*/forwardRef(function(props,ref){return /*#__PURE__*/_jsx(\"svg\",{...props,ref:ref,children:props.children});});const MotionSVG=motion.create(Base);const SVG=/*#__PURE__*/forwardRef((props,ref)=>{const{animated,layoutId,children,...rest}=props;return animated?/*#__PURE__*/_jsx(MotionSVG,{...rest,layoutId:layoutId,ref:ref,children:children}):/*#__PURE__*/_jsx(\"svg\",{...rest,ref:ref,children:children});});const svg='';const getProps=({color,height,id,width,width1,...props})=>{return{...props,htQyJXMKW:width1??props.htQyJXMKW??1.5,jDue3c8Jy:color??props.jDue3c8Jy??\"rgb(0, 0, 0)\"};};const Component=/*#__PURE__*/React.forwardRef(function(props,ref){const{style,className,layoutId,variant,jDue3c8Jy,htQyJXMKW,...restProps}=getProps(props);const href=useSVGTemplate(\"151320772\",svg);return /*#__PURE__*/_jsx(SVG,{...restProps,className:cx(\"framer-HVlwg\",className),layoutId:layoutId,ref:ref,role:\"presentation\",style:{\"--34440n\":jDue3c8Jy,\"--fbr8zx\":htQyJXMKW,...style},viewBox:\"0 0 24 24\",children:/*#__PURE__*/_jsx(\"use\",{href:href})});});const css=[`.framer-HVlwg { -webkit-mask: ${mask}; aspect-ratio: 1; display: block; mask: ${mask}; width: 24px; }`];/**\n * This is a generated Framer component.\n * @framerIntrinsicWidth 24\n * @framerIntrinsicHeight 24\n * @framerSupportedLayoutWidth any-prefer-fixed\n * @framerSupportedLayoutHeight any-prefer-fixed\n * @framerVariables {\"jDue3c8Jy\":\"color\",\"htQyJXMKW\":\"width1\"}\n * @framerImmutableVariables true\n * @framerVector {\"name\":\"Megaphone B\",\"color\":{\"type\":\"variable\",\"value\":\"34440n\"},\"set\":{\"localId\":\"vectorSet/N6bZIbxLR\",\"id\":\"N6bZIbxLR\",\"moduleId\":\"NCiKiaU9qhVJumKU6JAo\"}}\n */const Icon=withCSS(Component,css,\"framer-HVlwg\");Icon.displayName=\"Megaphone B\";export default Icon;addPropertyControls(Icon,{jDue3c8Jy:{defaultValue:\"rgb(0, 0, 0)\",hidden:false,title:\"Color\",type:ControlType.Color},htQyJXMKW:{defaultValue:1.5,displayStepper:true,hidden:false,max:8,min:1,title:\"Width\",type:ControlType.Number}});\nexport const __FramerMetadata__ = {\"exports\":{\"default\":{\"type\":\"reactComponent\",\"name\":\"Icon\",\"slots\":[],\"annotations\":{\"framerContractVersion\":\"1\",\"framerIntrinsicWidth\":\"24\",\"framerSupportedLayoutHeight\":\"any-prefer-fixed\",\"framerVariables\":\"{\\\"jDue3c8Jy\\\":\\\"color\\\",\\\"htQyJXMKW\\\":\\\"width1\\\"}\",\"framerImmutableVariables\":\"true\",\"framerIntrinsicHeight\":\"24\",\"framerSupportedLayoutWidth\":\"any-prefer-fixed\",\"framerVector\":\"{\\\"name\\\":\\\"Megaphone B\\\",\\\"color\\\":{\\\"type\\\":\\\"variable\\\",\\\"value\\\":\\\"34440n\\\"},\\\"set\\\":{\\\"localId\\\":\\\"vectorSet/N6bZIbxLR\\\",\\\"id\\\":\\\"N6bZIbxLR\\\",\\\"moduleId\\\":\\\"NCiKiaU9qhVJumKU6JAo\\\"}}\"}},\"__FramerMetadata__\":{\"type\":\"variable\"}}}","// Generated by Framer (d5224d0)\nimport{jsx as _jsx}from\"react/jsx-runtime\";import{addPropertyControls,ControlType,cx,motion,useSVGTemplate,withCSS}from\"framer\";import*as React from\"react\";import{forwardRef}from\"react\";const mask=\"var(--framer-icon-mask)\";const Base=/*#__PURE__*/forwardRef(function(props,ref){return /*#__PURE__*/_jsx(\"svg\",{...props,ref:ref,children:props.children});});const MotionSVG=motion.create(Base);const SVG=/*#__PURE__*/forwardRef((props,ref)=>{const{animated,layoutId,children,...rest}=props;return animated?/*#__PURE__*/_jsx(MotionSVG,{...rest,layoutId:layoutId,ref:ref,children:children}):/*#__PURE__*/_jsx(\"svg\",{...rest,ref:ref,children:children});});const svg='';const getProps=({color,height,id,width,width1,...props})=>{return{...props,htQyJXMKW:width1??props.htQyJXMKW??1.5,jDue3c8Jy:color??props.jDue3c8Jy??\"rgb(0, 0, 0)\"};};const Component=/*#__PURE__*/React.forwardRef(function(props,ref){const{style,className,layoutId,variant,jDue3c8Jy,htQyJXMKW,...restProps}=getProps(props);const href=useSVGTemplate(\"603660831\",svg);return /*#__PURE__*/_jsx(SVG,{...restProps,className:cx(\"framer-Dq5h7\",className),layoutId:layoutId,ref:ref,role:\"presentation\",style:{\"--34440n\":jDue3c8Jy,\"--fbr8zx\":htQyJXMKW,...style},viewBox:\"0 0 24 24\",children:/*#__PURE__*/_jsx(\"use\",{href:href})});});const css=[`.framer-Dq5h7 { -webkit-mask: ${mask}; aspect-ratio: 1; display: block; mask: ${mask}; width: 24px; }`];/**\n * This is a generated Framer component.\n * @framerIntrinsicWidth 24\n * @framerIntrinsicHeight 24\n * @framerSupportedLayoutWidth any-prefer-fixed\n * @framerSupportedLayoutHeight any-prefer-fixed\n * @framerVariables {\"jDue3c8Jy\":\"color\",\"htQyJXMKW\":\"width1\"}\n * @framerImmutableVariables true\n * @framerVector {\"name\":\"Users\",\"color\":{\"type\":\"variable\",\"value\":\"34440n\"},\"set\":{\"localId\":\"vectorSet/N6bZIbxLR\",\"id\":\"N6bZIbxLR\",\"moduleId\":\"NCiKiaU9qhVJumKU6JAo\"}}\n */const Icon=withCSS(Component,css,\"framer-Dq5h7\");Icon.displayName=\"Users\";export default Icon;addPropertyControls(Icon,{jDue3c8Jy:{defaultValue:\"rgb(0, 0, 0)\",hidden:false,title:\"Color\",type:ControlType.Color},htQyJXMKW:{defaultValue:1.5,displayStepper:true,hidden:false,max:8,min:1,title:\"Width\",type:ControlType.Number}});\nexport const __FramerMetadata__ = {\"exports\":{\"default\":{\"type\":\"reactComponent\",\"name\":\"Icon\",\"slots\":[],\"annotations\":{\"framerContractVersion\":\"1\",\"framerImmutableVariables\":\"true\",\"framerIntrinsicHeight\":\"24\",\"framerSupportedLayoutWidth\":\"any-prefer-fixed\",\"framerIntrinsicWidth\":\"24\",\"framerVector\":\"{\\\"name\\\":\\\"Users\\\",\\\"color\\\":{\\\"type\\\":\\\"variable\\\",\\\"value\\\":\\\"34440n\\\"},\\\"set\\\":{\\\"localId\\\":\\\"vectorSet/N6bZIbxLR\\\",\\\"id\\\":\\\"N6bZIbxLR\\\",\\\"moduleId\\\":\\\"NCiKiaU9qhVJumKU6JAo\\\"}}\",\"framerSupportedLayoutHeight\":\"any-prefer-fixed\",\"framerVariables\":\"{\\\"jDue3c8Jy\\\":\\\"color\\\",\\\"htQyJXMKW\\\":\\\"width1\\\"}\"}},\"__FramerMetadata__\":{\"type\":\"variable\"}}}","// Generated by Framer (6ca5d98)\nimport{jsx as _jsx}from\"react/jsx-runtime\";import{addPropertyControls,ControlType,cx,motion,withCSS}from\"framer\";import*as React from\"react\";import{forwardRef}from\"react\";const mask='url(\\'data:image/svg+xml,\\') alpha no-repeat center / auto var(--framer-icon-mask-mode, add), var(--framer-icon-mask, none)';const SVG=/*#__PURE__*/forwardRef((props,ref)=>{const{animated,layoutId,children,...rest}=props;return animated?/*#__PURE__*/_jsx(motion.div,{...rest,layoutId:layoutId,ref:ref}):/*#__PURE__*/_jsx(\"div\",{...rest,ref:ref});});const getProps=({height,id,stroke,width,...props})=>{return{...props,UO5clYVeQ:stroke??props.UO5clYVeQ??\"rgb(0, 0, 0)\"};};const Component=/*#__PURE__*/React.forwardRef(function(props,ref){const{style,className,layoutId,variant,UO5clYVeQ,...restProps}=getProps(props);return /*#__PURE__*/_jsx(SVG,{...restProps,className:cx(\"framer-PTgXK\",className),layoutId:layoutId,ref:ref,style:{\"--43q7um\":UO5clYVeQ,...style}});});const css=[`.framer-PTgXK { -webkit-mask: ${mask}; aspect-ratio: 1; background-color: var(--43q7um); mask: ${mask}; width: 24px; }`];/**\n * This is a generated Framer component.\n * @framerIntrinsicWidth 24\n * @framerIntrinsicHeight 24\n * @framerSupportedLayoutWidth any-prefer-fixed\n * @framerSupportedLayoutHeight any-prefer-fixed\n * @framerVariables {\"UO5clYVeQ\":\"stroke\"}\n * @framerImmutableVariables true\n * @framerVector {\"name\":\"Instagram\",\"color\":{\"type\":\"variable\",\"value\":\"43q7um\"},\"set\":{\"localId\":\"vectorSet/T8qKXkLfy\",\"id\":\"T8qKXkLfy\",\"moduleId\":\"fiHEoJwBMFnT6QLOcpPz\"}}\n * @framerDisableUnlink true\n */const Icon=withCSS(Component,css,\"framer-PTgXK\");Icon.displayName=\"Instagram\";export default Icon;addPropertyControls(Icon,{UO5clYVeQ:{defaultValue:\"rgb(0, 0, 0)\",hidden:false,title:\"Stroke\",type:ControlType.Color}});\nexport const __FramerMetadata__ = {\"exports\":{\"default\":{\"type\":\"reactComponent\",\"name\":\"Icon\",\"slots\":[],\"annotations\":{\"framerIntrinsicWidth\":\"24\",\"framerContractVersion\":\"1\",\"framerVector\":\"{\\\"name\\\":\\\"Instagram\\\",\\\"color\\\":{\\\"type\\\":\\\"variable\\\",\\\"value\\\":\\\"43q7um\\\"},\\\"set\\\":{\\\"localId\\\":\\\"vectorSet/T8qKXkLfy\\\",\\\"id\\\":\\\"T8qKXkLfy\\\",\\\"moduleId\\\":\\\"fiHEoJwBMFnT6QLOcpPz\\\"}}\",\"framerIntrinsicHeight\":\"24\",\"framerVariables\":\"{\\\"UO5clYVeQ\\\":\\\"stroke\\\"}\",\"framerImmutableVariables\":\"true\",\"framerSupportedLayoutWidth\":\"any-prefer-fixed\",\"framerDisableUnlink\":\"true\",\"framerSupportedLayoutHeight\":\"any-prefer-fixed\"}},\"__FramerMetadata__\":{\"type\":\"variable\"}}}","import e from\"react\";const n=e.createContext(!0);function r(){throw new Error(\"A function wrapped in useEffectEvent can't be called during rendering.\")}const t=\"use\"in e?()=>{try{return e.use(n)}catch{return!1}}:()=>!1;function c(n){const c=e.useRef(r);return e.useInsertionEffect((()=>{c.current=n}),[n]),(...e)=>{t()&&r();const n=c.current;return n(...e)}}export{c as useEffectEvent};\n//# sourceMappingURL=index.js.map\n","import{jsx as _jsx,jsxs as _jsxs}from\"react/jsx-runtime\";import{resize}from\"@motionone/dom\";import{ControlType,RenderTarget,addPropertyControls,withCSS}from\"framer\";import{LayoutGroup,animate,frame,mix,motion,useInView,useMotionValue,usePageInView,useTransform,wrap}from\"framer-motion\";import{Children,cloneElement,forwardRef,memo,startTransition,useCallback,useEffect,useLayoutEffect,useRef,useState}from\"react\";import{useEffectEvent}from\"use-effect-event\";const slideshowClassName=\"framer-slideshow\";const slideshowAxisXClassName=\"framer-slideshow-axis-x\";const slideshowAxisYClassName=\"framer-slideshow-axis-y\";const slideshowDirectionMultiplierVariable=\"--framer-dir-multiplier\";const slideshowDirectionMultiplier=`var(${slideshowDirectionMultiplierVariable}, -1)`;function SlideshowWithoutCSS(props){/**\n * Properties\n */const{slots=[],startFrom,direction,effectsOptions,autoPlayControl,dragControl,alignment,gap,padding,paddingPerSide,paddingTop,paddingRight,paddingBottom,paddingLeft,itemAmount:visibleItemsCount,fadeOptions,intervalControl,transitionControl,arrowOptions,borderRadius,progressOptions,style}=props;const{effectsOpacity,effectsScale,effectsRotate,effectsPerspective,effectsHover,playOffscreen}=effectsOptions;const{fadeContent,overflow,fadeWidth,fadeInset,fadeAlpha}=fadeOptions;const{showMouseControls,arrowSize,arrowRadius,arrowFill,leftArrow,rightArrow,arrowShouldSpace=true,arrowShouldFadeIn=false,arrowPosition,arrowPadding,arrowGap,arrowPaddingTop,arrowPaddingRight,arrowPaddingBottom,arrowPaddingLeft}=arrowOptions;const{showProgressDots,dotSize,dotsInset,dotsRadius,dotsPadding,dotsGap,dotsFill,dotsBackground,dotsActiveOpacity,dotsOpacity,dotsBlur}=progressOptions;const paddingValue=paddingPerSide?`${paddingTop}px ${paddingRight}px ${paddingBottom}px ${paddingLeft}px`:`${padding}px`;/**\n * Checks\n */const isCanvas=RenderTarget.current()===RenderTarget.canvas;// Remove empty slots (such as hidden layers)\nconst filteredSlots=slots.filter(Boolean);const totalItemsCount=Children.count(filteredSlots);const hasChildren=totalItemsCount>0;/**\n * Empty state for Canvas\n */if(!hasChildren){return /*#__PURE__*/_jsxs(\"section\",{style:placeholderStyles,children:[/*#__PURE__*/_jsx(\"div\",{style:emojiStyles,children:\"⭐️\"}),/*#__PURE__*/_jsx(\"p\",{style:titleStyles,children:\"Connect to Content\"}),/*#__PURE__*/_jsx(\"p\",{style:subtitleStyles,children:\"Add layers or components to make infinite auto-playing slideshows.\"})]});}/**\n * Refs, State\n */const scheduleMeasureIfEverythingReady=useCallback(()=>{if(parentRef.current&&firstChildRef.current&&lastChildRef.current){scheduleMeasure();}},[]);const parentRef=useRef(null);const parentRefFn=useCallback(node=>{parentRef.current=node;scheduleMeasureIfEverythingReady();},[scheduleMeasureIfEverythingReady]);const firstChildRef=useRef(null);const firstChildRefFn=useCallback(node=>{firstChildRef.current=node;scheduleMeasureIfEverythingReady();},[scheduleMeasureIfEverythingReady]);const lastChildRef=useRef(null);const lastChildRefFn=useCallback(node=>{lastChildRef.current=node;scheduleMeasureIfEverythingReady();},[scheduleMeasureIfEverythingReady]);const[size,setSize]=useState({parent:null,children:null,item:null,itemWidth:null,itemHeight:null,viewportLength:null});const isHorizontal=direction===\"left\"||direction===\"right\";const writingDirection=useWritingDirection();const rtlDirectionModifier=isHorizontal&&writingDirection===\"rtl\"?-1:1;/* For pausing on hover */const[isHovering,setIsHovering]=useState(false);const[shouldPlayOnHover,setShouldPlayOnHover]=useState(autoPlayControl);/* For cursor updates */const[isMouseDown,setIsMouseDown]=useState(false);/* For SSR / initial render */const isInitialized=size?.item!==null&&size?.parent!==null&&writingDirection!==null;/**\n * Array for children\n */// Normally, the user would provide like 10 slides (totalItemsCount == 10) and only show one at a\n// time (visibleItemsCount == 1). In these cases, extraCopyCount == 1, and we only render 3 extra\n// duplicates in the live mode or no duplicates at all in the SSR or on Canvas.\n// However, sometimes, the user might things like\n// - provide totalItemsCount = 5, visibleItemsCount = 3, startFrom = 4 → we need one more duplicate to continue the loop\n// and render two more slides\n// - or: totalItemsCount = 2, visibleItemsCount = 10 → we need three more duplicates to fill the whole view of the slideshow\n// In these cases, we produce extra copies of the children.\nconst extraCopyCount=Math.ceil((startFrom+visibleItemsCount)/totalItemsCount);let dupedChildren=[];let duplicateBy=extraCopyCount*4;if(isCanvas||!isInitialized){duplicateBy=extraCopyCount;}/**\n * Measure parent, child, items\n *//* Calculate the new value to animate to */const[currentItem,setCurrentItem]=useState(startFrom+totalItemsCount);/* Animate whenever currentItem changes */useEffect(()=>{if(!size.item||!writingDirection)return;const computedNewPosition=-1*currentItem*((size.item??0)+gap)*(writingDirection===\"rtl\"?-1:1);if(xOrY.get()!==computedNewPosition){animate(xOrY,computedNewPosition,transitionControl);}},[currentItem,size.item,gap,writingDirection]);const measure=()=>{if(!parentRef.current||!firstChildRef.current||!lastChildRef.current)return;// Calling getWritingDirection() directly because this might be executed before useEffect() in useWritingDirection() runs.\nconst writingDirection=getWritingDirection();const isRTL=isHorizontal&&writingDirection===\"rtl\";const firstChild=isRTL?lastChildRef.current:firstChildRef.current;const lastChild=isRTL?firstChildRef.current:lastChildRef.current;const parentLength=isHorizontal?parentRef.current.offsetWidth:parentRef.current.offsetHeight;const start=firstChild?isHorizontal?firstChild.offsetLeft:firstChild.offsetTop:0;const end=lastChild?isHorizontal?lastChild.offsetLeft+lastChild.offsetWidth:lastChild.offsetTop+lastChild.offsetHeight:0;const childrenLength=end-start+gap;const itemSize=firstChild?isHorizontal?firstChild.offsetWidth:firstChild.offsetHeight:0;const itemWidth=firstChild?firstChild.offsetWidth:0;const itemHeight=firstChild?firstChild.offsetHeight:0;const viewportLength=isHorizontal?Math.max(document.documentElement.clientWidth||0,window.innerWidth||0,parentRef.current.offsetWidth):Math.max(document.documentElement.clientHeight||0,window.innerHeight||0,parentRef.current.offsetHeight);setSize({parent:parentLength,children:childrenLength,item:itemSize,itemWidth,itemHeight,viewportLength});};const scheduleMeasure=useEffectEvent(async()=>{frame.read(measure,false,true);});/* Re-measure when some layout-affecting props change */useLayoutEffect(()=>{scheduleMeasure();},[slots.length,visibleItemsCount,gap,direction,padding,paddingPerSide,paddingTop,paddingRight,paddingBottom,paddingLeft]);/** Re-measure when the parent is resized */useEffect(()=>{const node=parentRef.current;if(!node)return;return resize(node,({contentSize})=>{if(contentSize.width||contentSize.height){scheduleMeasure();}});},[]);/**\n * Animation, pagination\n */const childrenSize=isCanvas?0:size?.children;const[isDragging,setIsDragging]=useState(false);/* Check for browser window visibility *//* Otherwise, it will re-play all the item increments */const visibilityRef=useRef(null);const isInView=useInView(visibilityRef);const isVisible=usePageInView()&&isInView;/* The x and y values to start from */const xOrY=useMotionValue(childrenSize);/* Wrapped values for infinite looping *//* Instead of 0 to a negative full duplicated row, we start with an offset */const wrappedXOrY=!isCanvas?useTransform(xOrY,value=>{const resolvedChildrenSize=childrenSize??0;const resolvedValue=value??0;const wrapped=wrap(-resolvedChildrenSize*rtlDirectionModifier,-resolvedChildrenSize*rtlDirectionModifier*2,resolvedValue);return Number.isNaN(wrapped)?0:wrapped;}):0;/* Convert the current item to a wrapping index for dots */const wrappedIndex=wrap(0,totalItemsCount,currentItem);/**\n * Page item methods\n * Switching, deltas, autoplaying\n *//* Page navigation functions */const setDelta=delta=>{startTransition(()=>setCurrentItem(item=>item+delta));};const setPage=index=>{const currentItemWrapped=wrap(0,totalItemsCount,currentItem);const goto=index-currentItemWrapped;startTransition(()=>setCurrentItem(item=>item+goto));};/* Autoplay: schedule one tick at a time whenever currentItem changes */const autoplayStep=(direction===\"right\"||direction===\"bottom\"?-1:1)*rtlDirectionModifier;const canAutoplay=autoPlayControl&&shouldPlayOnHover&&(playOffscreen||isVisible)&&!isCanvas&&totalItemsCount>1&&!isDragging&&isInitialized;useEffect(()=>{if(!canAutoplay)return;const timeoutId=setTimeout(()=>{setDelta(autoplayStep);},intervalControl*1e3);return()=>clearTimeout(timeoutId);},[canAutoplay,autoplayStep,intervalControl,currentItem]);/**\n * Drag\n */const handleDragStart=()=>{startTransition(()=>setIsDragging(true));};const handleDragEnd=(event,{offset,velocity})=>{startTransition(()=>setIsDragging(false));const offsetXorY=isHorizontal?offset.x:offset.y;const velocityThreshold=200// Based on testing, can be tweaked or could be 0\n;const velocityXorY=isHorizontal?velocity.x:velocity.y;const isHalfOfNext=offsetXorY<-size.item/2;const isHalfOfPrev=offsetXorY>size.item/2;/* In case you drag more than 1 item left or right */const normalizedOffset=Math.abs(offsetXorY);const itemDelta=Math.round(normalizedOffset/size.item);/* Minimum delta is 1 to initiate a page switch *//* For velocity use only */const itemDeltaFromOne=itemDelta===0?1:itemDelta;/* For quick flicks, even with low offsets */if(velocityXorY>velocityThreshold){setDelta(-itemDeltaFromOne*rtlDirectionModifier);}else if(velocityXorY<-velocityThreshold){setDelta(itemDeltaFromOne*rtlDirectionModifier);}else{/* For dragging over half of the current item with 0 velocity */if(isHalfOfNext){setDelta(itemDelta*rtlDirectionModifier);}if(isHalfOfPrev){setDelta(-itemDelta*rtlDirectionModifier);}}};// Static/canvas layout: translate by a deterministic CSS calc so the starting slide is visible\n// without relying on runtime measurements.\nconst staticStartFrom=Math.max(0,Math.min(startFrom??0,Math.max(0,totalItemsCount-1)));const staticPercentOffset=staticStartFrom*100/visibleItemsCount;const staticPixelOffset=staticStartFrom*gap/visibleItemsCount;/* Create copies of our children to create a perfect loop */let childCounter=0;/**\n * Sizing\n * */const columnOrRowValue=`calc(${100/visibleItemsCount}% - ${gap}px + ${gap/visibleItemsCount}px)`;/**\n * Nested array to create duplicates of the children for infinite looping\n * These are wrapped around, and start at a full \"page\" worth of offset\n * as defined above.\n */for(let index=0;index{let ref;if(index===0){if(childIndex===0){ref=firstChildRefFn;}else if(childIndex===filteredSlots.length-1){ref=lastChildRefFn;}}return /*#__PURE__*/_jsx(Slide,{ref:ref,slideKey:index+childIndex+\"lg\",index:index,width:isHorizontal?visibleItemsCount>1?columnOrRowValue:\"100%\":\"100%\",height:!isHorizontal?visibleItemsCount>1?columnOrRowValue:\"100%\":\"100%\",size:size,child:child,numChildren:filteredSlots?.length,wrappedXOrY:wrappedXOrY,childCounter:childCounter++,gap:gap,isCanvas:isCanvas,isInitialized:isInitialized,isHorizontal:isHorizontal,effectsOpacity:effectsOpacity,effectsScale:effectsScale,effectsRotate:effectsRotate,writingDirection:writingDirection,rtlDirectionModifier:rtlDirectionModifier,children:index+childIndex},index+childIndex+\"lg\");}));}/**\n * Fades with masks\n */const fadeDirection=isHorizontal?\"to right\":\"to bottom\";const fadeWidthStart=fadeWidth/2;const fadeWidthEnd=100-fadeWidth/2;const fadeInsetStart=clamp(fadeInset,0,fadeWidthStart);const fadeInsetEnd=100-fadeInset;const fadeMask=`linear-gradient(${fadeDirection}, rgba(0, 0, 0, ${fadeAlpha}) ${fadeInsetStart}%, rgba(0, 0, 0, 1) ${fadeWidthStart}%, rgba(0, 0, 0, 1) ${fadeWidthEnd}%, rgba(0, 0, 0, ${fadeAlpha}) ${fadeInsetEnd}%)`;/**\n * Dots\n */const dots=[];const dotsBlurStyle={};if(showProgressDots){for(let i=0;isetPage(i),wrappedIndex:isCanvas||!isInitialized?staticStartFrom:wrappedIndex,total:totalItemsCount,index:i,gap:dotsGap,padding:dotsPadding,isHorizontal:isHorizontal},i));}if(dotsBlur>0){dotsBlurStyle.backdropFilter=dotsBlurStyle.WebkitBackdropFilter=`blur(${dotsBlur}px)`;}}const dragProps=isInitialized&&dragControl?{drag:isHorizontal?\"x\":\"y\",onDragStart:handleDragStart,onDragEnd:handleDragEnd,dragDirectionLock:true,values:{x:writingDirection===\"rtl\"?-xOrY:xOrY,y:xOrY},dragMomentum:false}:{};const arrowHasTop=arrowPosition===\"top-left\"||arrowPosition===\"top-mid\"||arrowPosition===\"top-right\";const arrowHasBottom=arrowPosition===\"bottom-left\"||arrowPosition===\"bottom-mid\"||arrowPosition===\"bottom-right\";const arrowHasLeft=arrowPosition===\"top-left\"||arrowPosition===\"bottom-left\";const arrowHasRight=arrowPosition===\"top-right\"||arrowPosition===\"bottom-right\";const arrowHasMid=arrowPosition===\"top-mid\"||arrowPosition===\"bottom-mid\"||arrowPosition===\"auto\";const leftArrowSrc=leftArrow||\"https://framerusercontent.com/images/6tTbkXggWgQCAJ4DO2QEdXXmgM.svg?arrow=left\";const rightArrowSrc=rightArrow||\"https://framerusercontent.com/images/11KSGbIZoRSg4pjdnUoif6MKHI.svg?arrow=right\";return /*#__PURE__*/_jsxs(\"section\",{className:`${slideshowClassName} ${isHorizontal?slideshowAxisXClassName:slideshowAxisYClassName}`,style:{...containerStyle,padding:paddingValue,WebkitMaskImage:fadeContent?fadeMask:undefined,maskImage:fadeContent?fadeMask:undefined,userSelect:\"none\"},onMouseEnter:()=>{setIsHovering(true);if(!effectsHover)setShouldPlayOnHover(false);},onMouseLeave:()=>{setIsHovering(false);if(!effectsHover)setShouldPlayOnHover(true);},onMouseDown:event=>{// Preventdefault fixes the cursor switching to text on drag on safari\nevent.preventDefault();startTransition(()=>setIsMouseDown(true));},onMouseUp:()=>startTransition(()=>setIsMouseDown(false)),ref:visibilityRef,children:[/*#__PURE__*/_jsx(\"div\",{style:{width:\"100%\",height:\"100%\",margin:0,padding:\"inherit\",position:\"absolute\",inset:0,overflow:overflow?\"visible\":\"hidden\",borderRadius:borderRadius,userSelect:\"none\",perspective:isCanvas?\"none\":effectsPerspective},children:/*#__PURE__*/_jsx(motion.ul,{ref:parentRefFn,...dragProps,style:{...containerStyle,gap:gap,placeItems:alignment,...isCanvas||!isInitialized?{transform:isHorizontal?`translateX(calc(${slideshowDirectionMultiplier} * (${staticPercentOffset}% + ${staticPixelOffset}px)))`:`translateY(calc(${slideshowDirectionMultiplier} * (${staticPercentOffset}% + ${staticPixelOffset}px)))`}:{x:isHorizontal?wrappedXOrY:0,y:!isHorizontal?wrappedXOrY:0},flexDirection:isHorizontal?\"row\":\"column\",transformStyle:effectsRotate!==0&&!isCanvas?\"preserve-3d\":undefined,cursor:(isCanvas||isInitialized)&&dragControl?isMouseDown?\"grabbing\":\"grab\":\"auto\",userSelect:\"none\",...style},children:dupedChildren})}),/*#__PURE__*/_jsxs(\"fieldset\",{style:{...controlsStyles},\"aria-label\":\"Slideshow pagination controls\",className:\"framer--slideshow-controls\",children:[/*#__PURE__*/_jsxs(motion.div,{style:{position:\"absolute\",display:\"flex\",flexDirection:isHorizontal?\"row\":\"column\",justifyContent:arrowShouldSpace?\"space-between\":\"center\",gap:arrowShouldSpace?\"unset\":arrowGap,opacity:arrowShouldFadeIn||!isCanvas&&!isInitialized?0:1,alignItems:\"center\",inset:arrowPadding,top:arrowShouldSpace?arrowPadding:arrowHasTop?arrowPaddingTop:\"unset\",left:arrowShouldSpace?arrowPadding:arrowHasLeft?arrowPaddingLeft:arrowHasMid?0:\"unset\",right:arrowShouldSpace?arrowPadding:arrowHasRight?arrowPaddingRight:arrowHasMid?0:\"unset\",bottom:arrowShouldSpace?arrowPadding:arrowHasBottom?arrowPaddingBottom:\"unset\"},animate:isCanvas||isInitialized?arrowShouldFadeIn?{opacity:isHovering?1:0}:{opacity:1}:{opacity:0},transition:transitionControl,children:[/*#__PURE__*/_jsx(motion.button,{type:\"button\",style:{...baseButtonStyles,backgroundColor:arrowFill,width:arrowSize,height:arrowSize,borderRadius:arrowRadius,rotate:!isHorizontal?90:0,display:showMouseControls?\"block\":\"none\",pointerEvents:isCanvas||isInitialized?\"auto\":\"none\",cursor:isCanvas||isInitialized?\"pointer\":\"default\"},disabled:!(isCanvas||isInitialized),onClick:()=>setDelta(-1),\"aria-label\":\"Previous\",whileTap:{scale:.9},transition:{duration:.15},children:/*#__PURE__*/_jsx(\"img\",{decoding:\"async\",width:arrowSize,height:arrowSize,src:isHorizontal&&writingDirection===\"rtl\"?rightArrowSrc:leftArrowSrc,alt:\"Back Arrow\"})}),/*#__PURE__*/_jsx(motion.button,{type:\"button\",style:{...baseButtonStyles,backgroundColor:arrowFill,width:arrowSize,height:arrowSize,borderRadius:arrowRadius,rotate:!isHorizontal?90:0,display:showMouseControls?\"block\":\"none\",pointerEvents:isCanvas||isInitialized?\"auto\":\"none\",cursor:isCanvas||isInitialized?\"pointer\":\"default\"},disabled:!(isCanvas||isInitialized),onClick:()=>setDelta(1),\"aria-label\":\"Next\",whileTap:{scale:.9},transition:{duration:.15},children:/*#__PURE__*/_jsx(\"img\",{decoding:\"async\",width:arrowSize,height:arrowSize,src:isHorizontal&&writingDirection===\"rtl\"?leftArrowSrc:rightArrowSrc,alt:\"Next Arrow\"})})]}),dots.length>1?/*#__PURE__*/_jsx(motion.div,{style:{...dotsContainerStyle,left:isHorizontal?\"50%\":dotsInset,top:!isHorizontal?\"50%\":\"unset\",transform:isHorizontal?\"translateX(-50%)\":\"translateY(-50%)\",flexDirection:isHorizontal?\"row\":\"column\",bottom:isHorizontal?dotsInset:\"unset\",borderRadius:dotsRadius,backgroundColor:dotsBackground,userSelect:\"none\",...dotsBlurStyle,// Hard-code opacity to 1 on canvas. In SSR, it will be animated from 0 to 1 in `animate`\nopacity:isCanvas?1:0,pointerEvents:isCanvas||isInitialized?\"auto\":\"none\"},animate:{opacity:isInitialized?1:0},transition:{duration:.35,ease:\"easeOut\"},children:dots}):null]})]});}const Slideshow=withCSS(SlideshowWithoutCSS,[`.${slideshowAxisXClassName} { ${slideshowDirectionMultiplierVariable}: -1; }`,`html[dir=\"rtl\"] .${slideshowAxisXClassName} { ${slideshowDirectionMultiplierVariable}: 1; }`,`.${slideshowAxisYClassName} { ${slideshowDirectionMultiplierVariable}: -1; }`],\"framer-slideshow-component\");/**\n * SLIDESHOW\n * V2.5 (with SSR)\n * By Benjamin, Matt, and Ivan\n *\n * @framerIntrinsicWidth 400\n * @framerIntrinsicHeight 200\n *\n * @framerDisableUnlink\n *\n * @framerSupportedLayoutWidth fixed\n * @framerSupportedLayoutHeight fixed\n */export default Slideshow;/* Default Properties */Slideshow.defaultProps={direction:\"left\",dragControl:false,startFrom:0,itemAmount:1,infinity:true,gap:10,padding:10,autoPlayControl:true,effectsOptions:{effectsOpacity:1,effectsScale:1,effectsRotate:0,effectsPerspective:1200,effectsHover:true,playOffscreen:false},transitionControl:{type:\"spring\",stiffness:200,damping:40},fadeOptions:{fadeContent:false,overflow:false,fadeWidth:25,fadeAlpha:0,fadeInset:0},arrowOptions:{showMouseControls:true,arrowShouldFadeIn:false,arrowShouldSpace:true,arrowFill:\"rgba(0,0,0,0.2)\",arrowSize:40},progressOptions:{showProgressDots:true}};/* Property Controls */addPropertyControls(Slideshow,{slots:{type:ControlType.Array,title:\"Content\",control:{type:ControlType.ComponentInstance}},direction:{type:ControlType.Enum,title:\"Direction\",options:[\"left\",\"right\",\"top\",\"bottom\"],optionIcons:[\"direction-left\",\"direction-right\",\"direction-up\",\"direction-down\"],optionTitles:[\"Left\",\"Right\",\"Top\",\"Bottom\"],displaySegmentedControl:true,defaultValue:Slideshow.defaultProps.direction},autoPlayControl:{type:ControlType.Boolean,title:\"Auto Play\",defaultValue:true},intervalControl:{type:ControlType.Number,title:\"Interval\",defaultValue:1.5,min:.5,max:10,step:.1,displayStepper:true,unit:\"s\",hidden:props=>!props.autoPlayControl},dragControl:{type:ControlType.Boolean,title:\"Draggable\",defaultValue:false},startFrom:{type:ControlType.Number,title:\"Current\",min:0,max:10,displayStepper:true,defaultValue:Slideshow.defaultProps.startFrom},effectsOptions:{type:ControlType.Object,title:\"Effects\",controls:{effectsOpacity:{type:ControlType.Number,title:\"Opacity\",defaultValue:Slideshow.defaultProps.effectsOptions.effectsOpacity,min:0,max:1,step:.01,displayStepper:true},effectsScale:{type:ControlType.Number,title:\"Scale\",defaultValue:Slideshow.defaultProps.effectsOptions.effectsScale,min:0,max:1,step:.01,displayStepper:true},effectsPerspective:{type:ControlType.Number,title:\"Perspective\",defaultValue:Slideshow.defaultProps.effectsOptions.effectsPerspective,min:200,max:2e3,step:1},effectsRotate:{type:ControlType.Number,title:\"Rotate\",defaultValue:Slideshow.defaultProps.effectsOptions.effectsRotate,min:-180,max:180,step:1},effectsHover:{type:ControlType.Boolean,title:\"On Hover\",enabledTitle:\"Play\",disabledTitle:\"Pause\",defaultValue:Slideshow.defaultProps.effectsOptions.effectsHover},playOffscreen:{type:ControlType.Boolean,title:\"Offscreen\",enabledTitle:\"Play\",disabledTitle:\"Pause\",defaultValue:Slideshow.defaultProps.effectsOptions.playOffscreen}}},alignment:{type:ControlType.Enum,title:\"Align\",options:[\"flex-start\",\"center\",\"flex-end\"],optionIcons:{direction:{right:[\"align-top\",\"align-middle\",\"align-bottom\"],left:[\"align-top\",\"align-middle\",\"align-bottom\"],top:[\"align-left\",\"align-center\",\"align-right\"],bottom:[\"align-left\",\"align-center\",\"align-right\"]}},defaultValue:\"center\",displaySegmentedControl:true},itemAmount:{type:ControlType.Number,title:\"Items\",min:1,max:10,displayStepper:true,defaultValue:Slideshow.defaultProps.itemAmount},gap:{type:ControlType.Number,title:\"Gap\",min:0},padding:{title:\"Padding\",type:ControlType.FusedNumber,toggleKey:\"paddingPerSide\",toggleTitles:[\"Padding\",\"Padding per side\"],defaultValue:0,valueKeys:[\"paddingTop\",\"paddingRight\",\"paddingBottom\",\"paddingLeft\"],valueLabels:[\"T\",\"R\",\"B\",\"L\"],min:0},borderRadius:{type:ControlType.Number,title:\"Radius\",min:0,max:500,displayStepper:true,defaultValue:0},transitionControl:{type:ControlType.Transition,defaultValue:Slideshow.defaultProps.transitionControl,title:\"Transition\"},fadeOptions:{type:ControlType.Object,title:\"Clipping\",controls:{fadeContent:{type:ControlType.Boolean,title:\"Fade\",defaultValue:false},overflow:{type:ControlType.Boolean,title:\"Overflow\",enabledTitle:\"Show\",disabledTitle:\"Hide\",defaultValue:false,hidden(props){return props.fadeContent===true;}},fadeWidth:{type:ControlType.Number,title:\"Width\",defaultValue:25,min:0,max:100,unit:\"%\",hidden(props){return props.fadeContent===false;}},fadeInset:{type:ControlType.Number,title:\"Inset\",defaultValue:0,min:0,max:100,unit:\"%\",hidden(props){return props.fadeContent===false;}},fadeAlpha:{type:ControlType.Number,title:\"Opacity\",defaultValue:0,min:0,max:1,step:.05,hidden(props){return props.fadeContent===false;}}}},arrowOptions:{type:ControlType.Object,title:\"Arrows\",controls:{showMouseControls:{type:ControlType.Boolean,title:\"Show\",defaultValue:Slideshow.defaultProps.arrowOptions.showMouseControls},arrowFill:{type:ControlType.Color,title:\"Fill\",hidden:props=>!props.showMouseControls,defaultValue:Slideshow.defaultProps.arrowOptions.arrowFill},leftArrow:{type:ControlType.Image,title:\"Previous\",hidden:props=>!props.showMouseControls},rightArrow:{type:ControlType.Image,title:\"Next\",hidden:props=>!props.showMouseControls},arrowSize:{type:ControlType.Number,title:\"Size\",min:0,max:200,displayStepper:true,defaultValue:Slideshow.defaultProps.arrowOptions.arrowSize,hidden:props=>!props.showMouseControls},arrowRadius:{type:ControlType.Number,title:\"Radius\",min:0,max:500,defaultValue:40,hidden:props=>!props.showMouseControls},arrowShouldFadeIn:{type:ControlType.Boolean,title:\"Fade In\",defaultValue:false,hidden:props=>!props.showMouseControls},arrowShouldSpace:{type:ControlType.Boolean,title:\"Distance\",enabledTitle:\"Space\",disabledTitle:\"Group\",defaultValue:Slideshow.defaultProps.arrowOptions.arrowShouldSpace,hidden:props=>!props.showMouseControls},arrowPosition:{type:ControlType.Enum,title:\"Position\",options:[\"auto\",\"top-left\",\"top-mid\",\"top-right\",\"bottom-left\",\"bottom-mid\",\"bottom-right\"],optionTitles:[\"Center\",\"Top Left\",\"Top Middle\",\"Top Right\",\"Bottom Left\",\"Bottom Middle\",\"Bottom Right\"],hidden:props=>!props.showMouseControls||props.arrowShouldSpace},arrowPadding:{type:ControlType.Number,title:\"Inset\",min:-100,max:100,defaultValue:20,displayStepper:true,hidden:props=>!props.showMouseControls||!props.arrowShouldSpace},arrowPaddingTop:{type:ControlType.Number,title:\"Top\",min:-500,max:500,defaultValue:0,displayStepper:true,hidden:props=>!props.showMouseControls||props.arrowShouldSpace||props.arrowPosition===\"auto\"||props.arrowPosition===\"bottom-mid\"||props.arrowPosition===\"bottom-left\"||props.arrowPosition===\"bottom-right\"},arrowPaddingBottom:{type:ControlType.Number,title:\"Bottom\",min:-500,max:500,defaultValue:0,displayStepper:true,hidden:props=>!props.showMouseControls||props.arrowShouldSpace||props.arrowPosition===\"auto\"||props.arrowPosition===\"top-mid\"||props.arrowPosition===\"top-left\"||props.arrowPosition===\"top-right\"},arrowPaddingRight:{type:ControlType.Number,title:\"Right\",min:-500,max:500,defaultValue:0,displayStepper:true,hidden:props=>!props.showMouseControls||props.arrowShouldSpace||props.arrowPosition===\"auto\"||props.arrowPosition===\"top-left\"||props.arrowPosition===\"top-mid\"||props.arrowPosition===\"bottom-left\"||props.arrowPosition===\"bottom-mid\"},arrowPaddingLeft:{type:ControlType.Number,title:\"Left\",min:-500,max:500,defaultValue:0,displayStepper:true,hidden:props=>!props.showMouseControls||props.arrowShouldSpace||props.arrowPosition===\"auto\"||props.arrowPosition===\"top-right\"||props.arrowPosition===\"top-mid\"||props.arrowPosition===\"bottom-right\"||props.arrowPosition===\"bottom-mid\"},arrowGap:{type:ControlType.Number,title:\"Gap\",min:0,max:100,defaultValue:10,displayStepper:true,hidden:props=>!props.showMouseControls||props.arrowShouldSpace}}},progressOptions:{type:ControlType.Object,title:\"Dots\",controls:{showProgressDots:{type:ControlType.Boolean,title:\"Show\",defaultValue:false},dotSize:{type:ControlType.Number,title:\"Size\",min:1,max:100,defaultValue:10,displayStepper:true,hidden:props=>!props.showProgressDots||props.showScrollbar},dotsInset:{type:ControlType.Number,title:\"Inset\",min:-100,max:100,defaultValue:10,displayStepper:true,hidden:props=>!props.showProgressDots||props.showScrollbar},dotsGap:{type:ControlType.Number,title:\"Gap\",min:0,max:100,defaultValue:10,displayStepper:true,hidden:props=>!props.showProgressDots||props.showScrollbar},dotsPadding:{type:ControlType.Number,title:\"Padding\",min:0,max:100,defaultValue:10,displayStepper:true,hidden:props=>!props.showProgressDots||props.showScrollbar},dotsFill:{type:ControlType.Color,title:\"Fill\",defaultValue:\"#fff\",hidden:props=>!props.showProgressDots||props.showScrollbar},dotsBackground:{type:ControlType.Color,title:\"Backdrop\",defaultValue:\"rgba(0,0,0,0.2)\",hidden:props=>!props.showProgressDots||props.showScrollbar},dotsRadius:{type:ControlType.Number,title:\"Radius\",min:0,max:200,defaultValue:50,hidden:props=>!props.showProgressDots||props.showScrollbar},dotsOpacity:{type:ControlType.Number,title:\"Opacity\",min:0,max:1,defaultValue:.5,step:.1,displayStepper:true,hidden:props=>!props.showProgressDots||props.showScrollbar},dotsActiveOpacity:{type:ControlType.Number,title:\"Current\",min:0,max:1,defaultValue:1,step:.1,displayStepper:true,hidden:props=>!props.showProgressDots||props.showScrollbar},dotsBlur:{type:ControlType.Number,title:\"Blur\",min:0,max:50,defaultValue:0,step:1,hidden:props=>!props.showProgressDots||props.showScrollbar}}}});/* Placeholder Styles */const containerStyle={display:\"flex\",flexDirection:\"row\",width:\"100%\",height:\"100%\",maxWidth:\"100%\",maxHeight:\"100%\",placeItems:\"center\",margin:0,padding:0,listStyleType:\"none\",textIndent:\"none\"};/* Component Styles */const placeholderStyles={display:\"flex\",width:\"100%\",height:\"100%\",placeContent:\"center\",placeItems:\"center\",flexDirection:\"column\",color:\"#96F\",background:\"rgba(136, 85, 255, 0.1)\",fontSize:11,overflow:\"hidden\",padding:\"20px 20px 30px 20px\"};const emojiStyles={fontSize:32,marginBottom:10};const titleStyles={margin:0,marginBottom:10,fontWeight:600,textAlign:\"center\"};const subtitleStyles={margin:0,opacity:.7,maxWidth:180,lineHeight:1.5,textAlign:\"center\"};/* Control Styles */const baseButtonStyles={border:\"none\",display:\"flex\",placeContent:\"center\",placeItems:\"center\",overflow:\"hidden\",background:\"transparent\",cursor:\"pointer\",margin:0,padding:0};const controlsStyles={display:\"flex\",justifyContent:\"space-between\",alignItems:\"center\",position:\"absolute\",pointerEvents:\"none\",userSelect:\"none\",top:0,left:0,right:0,bottom:0,border:0,padding:0,margin:0};/* Clamp function, used for fadeInset */const clamp=(num,min,max)=>Math.min(Math.max(num,min),max);/* Slide Component */const Slide=/*#__PURE__*/memo(/*#__PURE__*/forwardRef(function Component(props,ref){const{slideKey,width,height,child,size,gap,wrappedXOrY,numChildren,childCounter,isCanvas,isInitialized,effects,effectsOpacity,effectsScale,effectsRotate,isHorizontal,isLast,index,/** \"ltr\" or \"rtl\" */writingDirection,/** -1 in RTL, 1 in LTR */rtlDirectionModifier}=props;const fallbackRef=useRef();const itemSize=size?.item??0;const parentSize=size?.parent??0;/**\n * Unique offsets + scroll range [0, 1, 1, 0]\n */const childOffset=(itemSize+gap)*childCounter;const scrollRange=// @ivan: this was picked experimentally when fixing semi-working-but-broken RTL\n// implementation in the existing Carousel code. Don’t ask me why these specific values, I’m\n// finding it hard to fully reason about RTL in carousel :/\n(isHorizontal&&writingDirection===\"rtl\"?[itemSize-gap,0,-parentSize+itemSize-gap,-parentSize-gap]:[-itemSize,0,parentSize-itemSize+gap,parentSize]).map(val=>val-childOffset*rtlDirectionModifier);/**\n * Effects\n */const rotateY=!isCanvas&&useTransform(wrappedXOrY,scrollRange,// Why flip the rotateY effect when RTL is enabled?\n//\n// Unlike other effects, rotation is vertically symmetrical. Say the user sets a 60 degree rotation.\n// The carousel will look like this:\n// ) □ ▣ ▤ (\n// where\n// - □ ▣ ▤ are the three slides visible within the carousel,\n// - ) is an out-of-view slide to the left of the viewport,\n// - and ( is an out-of-view slide to the right of the viewport.\n// With 60° rotation, both out-of-view slides look “turned towards” the viewport,\n// which matters for the animation when the slides switch.\n//\n// If a user sets RTL, all items in the carousel will flip around. The carousel, by default, will now look like this:\n// ( ▤ ▣ □ )\n// Notice how all slides reversed. The slide that was to the left of the viewport: ) – is now to the right of it!\n// And is now turned away from the viewport! So if we don’t flip the rotateY effect, the animation will look off.\nisHorizontal&&writingDirection===\"rtl\"?[effectsRotate,0,0,-effectsRotate]:[-effectsRotate,0,0,effectsRotate]);const rotateX=!isCanvas&&useTransform(wrappedXOrY,scrollRange,[effectsRotate,0,0,-effectsRotate]);const opacity=!isCanvas&&useTransform(wrappedXOrY,scrollRange,[effectsOpacity,1,1,effectsOpacity]);const scale=!isCanvas&&useTransform(wrappedXOrY,scrollRange,[effectsScale,1,1,effectsScale]);const originXorY=!isCanvas&&useTransform(wrappedXOrY,scrollRange,// Just like above, because in RTL, the items are flipped vertically, RTL needs a separate treatment\nisHorizontal&&writingDirection===\"rtl\"?[0,0,1,1]:[1,1,0,0]);const isVisible=!isCanvas&&useTransform(wrappedXOrY,latest=>{// Min and max swap in LTR vs RTL\nconst min=Math.min(scrollRange[1],scrollRange[2]);const max=Math.max(scrollRange[1],scrollRange[2]);return latest>=min&&latest<=max;});useEffect(()=>{if(!isVisible||!isInitialized)return;function manageVisibility(visible){const node=ref?.current??fallbackRef.current;if(!node)return;// for a11y: Manage tabIndex on focusable descendants & aria-hidden on the parent.\nif(visible){node.querySelectorAll(\"button,a\").forEach(el=>{const orig=el.dataset.origTabIndex;if(orig)el.tabIndex=orig;else el.removeAttribute(\"tabIndex\");});}else{node.querySelectorAll(\"button,a\").forEach(el=>{const orig=el.getAttribute(\"tabIndex\");if(orig)el.dataset.origTabIndex=orig;el.tabIndex=-1;});}node.setAttribute(\"aria-hidden\",!visible);}manageVisibility(isVisible);return isVisible.on(\"change\",visible=>{manageVisibility(visible);});},[isInitialized]);const visibility=isCanvas?\"visible\":useTransform(wrappedXOrY,[scrollRange[0]-size.viewportLength*rtlDirectionModifier,mix(scrollRange[1],scrollRange[2],.5),scrollRange[3]+size.viewportLength*rtlDirectionModifier],[\"hidden\",\"visible\",\"hidden\"]);const key=slideKey+\"child\";return /*#__PURE__*/_jsx(LayoutGroup,{inherit:\"id\",id:key,children:/*#__PURE__*/_jsx(\"li\",{style:{display:\"contents\"},children:/*#__PURE__*/cloneElement(child,{ref:ref??fallbackRef,key,style:{...child.props?.style,flexShrink:0,userSelect:\"none\",width,height,...isInitialized?{opacity,scale,originX:isHorizontal?originXorY:.5,originY:!isHorizontal?originXorY:.5,rotateY:isHorizontal?rotateY:0,rotateX:!isHorizontal?rotateX:0,visibility}:{}},layoutId:child.props.layoutId?child.props.layoutId+\"-original-\"+index:undefined})})});}));const Dot=/*#__PURE__*/memo(function Dot({selectedOpacity,opacity,total,index,wrappedIndex,dotStyle,buttonStyle,gap,padding,isHorizontal,...props}){/* Check active item *//* Go 0—1—2—3—4—5—0 */const isSelected=wrappedIndex===index;const inlinePadding=gap/2;const top=!isHorizontal&&index!==0?inlinePadding:padding;const bottom=!isHorizontal&&index!==total-1?inlinePadding:padding;// Use logical inline padding so RTL/LTR spacing is correct even if this subtree\n// is rendered under a different `direction` than `documentElement.dir`.\nconst inlineStart=isHorizontal?index===0?padding:inlinePadding:padding;const inlineEnd=isHorizontal?index===total-1?padding:inlinePadding:padding;return /*#__PURE__*/_jsx(\"button\",{\"aria-label\":`Scroll to page ${index+1}`,type:\"button\",...props,style:{...buttonStyle,paddingTop:top,paddingBottom:bottom,paddingInlineStart:inlineStart,paddingInlineEnd:inlineEnd},children:/*#__PURE__*/_jsx(motion.div,{style:{...dotStyle},initial:false,animate:{opacity:isSelected?selectedOpacity:opacity},transition:{duration:.3}})});});/* Dot Styles */const dotsContainerStyle={display:\"flex\",placeContent:\"center\",placeItems:\"center\",overflow:\"hidden\",position:\"absolute\",pointerEvents:\"auto\"};const dotStyle={borderRadius:\"50%\",background:\"white\",cursor:\"pointer\",border:\"none\",placeContent:\"center\",placeItems:\"center\",padding:0};function getWritingDirection(){return window?.document?.documentElement?.dir===\"rtl\"?\"rtl\":\"ltr\";}function useWritingDirection(){const[writingDirection,setWritingDirection]=useState(null);// must be done this way to ensure that there isn't a mismatch with SSG\n// which leads to button images not updating for the real writing direction\nuseEffect(()=>{setWritingDirection(getWritingDirection());// Listen for changes to the writing direction. While uncommon on live sites, this can easily happen\n// on the canvas when switching between locales on the same page.\nreturn onWritingDirectionChange(()=>{setWritingDirection(getWritingDirection());});},[]);return writingDirection;}let observer=null;const callbacks=[];function onWritingDirectionChange(callback){callbacks.push(callback);if(!observer){// A single MutationObserver watching a single attribute on a single element should be reasonably fast:\n// https://news.ycombinator.com/item?id=15274833 (note: Paul Irish)\n// https://stackoverflow.com/a/39332340\nobserver=new MutationObserver(()=>callbacks.forEach(callback=>callback()));observer.observe(document.documentElement,{attributeFilter:[\"dir\"]});}// Return a function to unsubscribe from the callback\nreturn()=>{callbacks.splice(callbacks.indexOf(callback),1);if(callbacks.length===0){observer?.disconnect();observer=null;}};}\nexport const __FramerMetadata__ = {\"exports\":{\"default\":{\"type\":\"reactComponent\",\"name\":\"Slideshow\",\"slots\":[],\"annotations\":{\"framerIntrinsicWidth\":\"400\",\"framerSupportedLayoutHeight\":\"fixed\",\"framerDisableUnlink\":\"*\",\"framerContractVersion\":\"1\",\"framerIntrinsicHeight\":\"200\",\"framerSupportedLayoutWidth\":\"fixed\"}},\"__FramerMetadata__\":{\"type\":\"variable\"}}}\n//# sourceMappingURL=./SlideShow.map","// Generated by Framer (fc3086c)\nimport{jsx as _jsx,jsxs as _jsxs}from\"react/jsx-runtime\";import{addFonts,addPropertyControls,ControlType,cx,getLoadingLazyAtYPosition,Image as Image1,RichText,useComponentViewport,useLocaleInfo,useVariantState,withCSS}from\"framer\";import{LayoutGroup,motion,MotionConfigContext}from\"framer-motion\";import*as React from\"react\";import{useRef}from\"react\";const serializationHash=\"framer-xPraj\";const variantClassNames={E65QkeONU:\"framer-v-gpys62\"};function addPropertyOverrides(overrides,...variants){const nextOverrides={};variants?.forEach(variant=>variant&&Object.assign(nextOverrides,overrides[variant]));return nextOverrides;}const A6uTueJJM=undefined;const AaZuA6mgu=undefined;const Msg3jEzJg=undefined;const transition1={bounce:.2,delay:0,duration:.4,type:\"spring\"};const toResponsiveImage=value=>{if(typeof value===\"object\"&&value!==null&&typeof value.src===\"string\"){return value;}return typeof value===\"string\"?{src:value}:undefined;};const Transition=({value,children})=>{const config=React.useContext(MotionConfigContext);const transition=value??config.transition;const contextValue=React.useMemo(()=>({...config,transition}),[JSON.stringify(transition)]);return /*#__PURE__*/_jsx(MotionConfigContext.Provider,{value:contextValue,children:children});};const Variants=motion.create(React.Fragment);const getProps=({author,authorDP,authorNiche,height,id,width,...props})=>{return{...props,A6uTueJJM:authorDP??props.A6uTueJJM??{alt:\"\",pixelHeight:3456,pixelWidth:3456,src:\"https://framerusercontent.com/images/7ge8xTDYS4BkuF9IIIuAIVfFQ.jpeg?width=3456&height=3456\",srcSet:\"https://framerusercontent.com/images/7ge8xTDYS4BkuF9IIIuAIVfFQ.jpeg?scale-down-to=512&width=3456&height=3456 512w,https://framerusercontent.com/images/7ge8xTDYS4BkuF9IIIuAIVfFQ.jpeg?scale-down-to=1024&width=3456&height=3456 1024w,https://framerusercontent.com/images/7ge8xTDYS4BkuF9IIIuAIVfFQ.jpeg?scale-down-to=2048&width=3456&height=3456 2048w,https://framerusercontent.com/images/7ge8xTDYS4BkuF9IIIuAIVfFQ.jpeg?width=3456&height=3456 3456w\"},AaZuA6mgu:author??props.AaZuA6mgu??\"Sally Rogers\",Msg3jEzJg:authorNiche??props.Msg3jEzJg??\"Ghost writer & Dev Ops\"};};const createLayoutDependency=(props,variants)=>{if(props.layoutDependency)return variants.join(\"-\")+props.layoutDependency;return variants.join(\"-\");};const Component=/*#__PURE__*/React.forwardRef(function(props,ref){const fallbackRef=useRef(null);const refBinding=ref??fallbackRef;const defaultLayoutId=React.useId();const{activeLocale,setLocale}=useLocaleInfo();const componentViewport=useComponentViewport();const{style,className,layoutId,variant,AaZuA6mgu,Msg3jEzJg,A6uTueJJM,...restProps}=getProps(props);const{baseVariant,classNames,clearLoadingGesture,gestureHandlers,gestureVariant,isLoading,setGestureState,setVariant,variants}=useVariantState({defaultVariant:\"E65QkeONU\",ref:refBinding,variant,variantClassNames});const layoutDependency=createLayoutDependency(props,variants);const sharedStyleClassNames=[];const scopingClassNames=cx(serializationHash,...sharedStyleClassNames);return /*#__PURE__*/_jsx(LayoutGroup,{id:layoutId??defaultLayoutId,children:/*#__PURE__*/_jsx(Variants,{animate:variants,initial:false,children:/*#__PURE__*/_jsx(Transition,{value:transition1,children:/*#__PURE__*/_jsxs(motion.div,{...restProps,...gestureHandlers,className:cx(scopingClassNames,\"framer-gpys62\",className,classNames),\"data-framer-name\":\"Variant 1\",layoutDependency:layoutDependency,layoutId:\"E65QkeONU\",ref:refBinding,style:{...style},children:[/*#__PURE__*/_jsx(Image1,{background:{alt:\"\",fit:\"fill\",loading:getLoadingLazyAtYPosition((componentViewport?.y||0)+0),pixelHeight:3456,pixelWidth:3456,sizes:\"32px\",...toResponsiveImage(A6uTueJJM)},className:\"framer-gjsf0j\",layoutDependency:layoutDependency,layoutId:\"dGHO5DQAd\",style:{borderBottomLeftRadius:48,borderBottomRightRadius:48,borderTopLeftRadius:48,borderTopRightRadius:48}}),/*#__PURE__*/_jsxs(motion.div,{className:\"framer-o5v5ds\",\"data-framer-name\":\"Name, Role\",layoutDependency:layoutDependency,layoutId:\"NQ6aA55bp\",children:[/*#__PURE__*/_jsx(RichText,{__fromCanvasComponent:true,children:/*#__PURE__*/_jsx(React.Fragment,{children:/*#__PURE__*/_jsx(motion.p,{dir:\"auto\",style:{\"--font-selector\":\"RlM7UG9wcGlucy1tZWRpdW0=\",\"--framer-font-family\":'\"Poppins\", \"Poppins Placeholder\", sans-serif',\"--framer-font-size\":\"18px\",\"--framer-font-weight\":\"500\",\"--framer-letter-spacing\":\"-0.01em\",\"--framer-line-height\":\"140%\",\"--framer-text-alignment\":\"left\",\"--framer-text-color\":\"var(--extracted-r6o4lv, var(--token-fa2a01bf-9941-4d6a-b2c0-fe2c0a4a1c04, rgb(24, 24, 27)))\"},children:\"Sally Rogers\"})}),className:\"framer-1iqnino\",fonts:[\"FS;Poppins-medium\"],layoutDependency:layoutDependency,layoutId:\"s4XeWCOmx\",style:{\"--extracted-r6o4lv\":\"var(--token-fa2a01bf-9941-4d6a-b2c0-fe2c0a4a1c04, rgb(24, 24, 27))\",\"--framer-link-text-color\":\"rgb(0, 153, 255)\",\"--framer-link-text-decoration\":\"underline\"},text:AaZuA6mgu,verticalAlignment:\"top\",withExternalLayout:true}),/*#__PURE__*/_jsx(RichText,{__fromCanvasComponent:true,children:/*#__PURE__*/_jsx(React.Fragment,{children:/*#__PURE__*/_jsx(motion.p,{dir:\"auto\",style:{\"--font-selector\":\"RlM7UG9wcGlucy1tZWRpdW0=\",\"--framer-font-family\":'\"Poppins\", \"Poppins Placeholder\", sans-serif',\"--framer-font-size\":\"14px\",\"--framer-font-weight\":\"500\",\"--framer-line-height\":\"130%\",\"--framer-text-color\":\"var(--extracted-r6o4lv, var(--token-58dc3133-7a11-44b8-91f0-6cf537f67c35, rgb(113, 113, 122)))\"},children:\"Ghost writer & Dev Ops\"})}),className:\"framer-1hxtimr\",fonts:[\"FS;Poppins-medium\"],layoutDependency:layoutDependency,layoutId:\"j74lv8UgQ\",style:{\"--extracted-r6o4lv\":\"var(--token-58dc3133-7a11-44b8-91f0-6cf537f67c35, rgb(113, 113, 122))\",\"--framer-link-text-color\":\"rgb(0, 153, 255)\",\"--framer-link-text-decoration\":\"underline\"},text:Msg3jEzJg,verticalAlignment:\"top\",withExternalLayout:true})]})]})})})});});const css=[\".framer-xPraj.framer-15dmwrs, .framer-xPraj .framer-15dmwrs { display: block; }\",\".framer-xPraj.framer-gpys62 { align-content: flex-start; align-items: flex-start; display: flex; flex-direction: row; flex-wrap: nowrap; gap: 16px; height: min-content; justify-content: flex-start; overflow: visible; padding: 0px; position: relative; width: 352px; }\",\".framer-xPraj .framer-gjsf0j { aspect-ratio: 1 / 1; flex: none; height: auto; overflow: var(--overflow-clip-fallback, clip); position: relative; width: 32px; will-change: var(--framer-will-change-override, transform); }\",\".framer-xPraj .framer-o5v5ds { align-content: flex-start; align-items: flex-start; display: flex; flex: 1 0 0px; flex-direction: column; flex-wrap: nowrap; gap: 2px; height: min-content; justify-content: flex-start; overflow: var(--overflow-clip-fallback, clip); padding: 0px; position: relative; width: 1px; }\",\".framer-xPraj .framer-1iqnino { flex: none; height: auto; position: relative; white-space: pre; width: auto; }\",\".framer-xPraj .framer-1hxtimr { flex: none; height: auto; overflow: visible; position: relative; white-space: pre; width: auto; }\"];/**\n * This is a generated Framer component.\n * @framerIntrinsicHeight 45\n * @framerIntrinsicWidth 352\n * @framerCanvasComponentVariantDetails {\"propertyName\":\"variant\",\"data\":{\"default\":{\"layout\":[\"fixed\",\"auto\"]}}}\n * @framerVariables {\"AaZuA6mgu\":\"author\",\"Msg3jEzJg\":\"authorNiche\",\"A6uTueJJM\":\"authorDP\"}\n * @framerImmutableVariables true\n * @framerDisplayContentsDiv false\n * @framerAutoSizeImages true\n * @framerComponentViewportWidth true\n * @framerColorSyntax true\n */const FramerbHzaerURw=withCSS(Component,css,\"framer-xPraj\");export default FramerbHzaerURw;FramerbHzaerURw.displayName=\"Author Card List\";FramerbHzaerURw.defaultProps={height:45,width:352};addPropertyControls(FramerbHzaerURw,{AaZuA6mgu:{defaultValue:\"Sally Rogers\",displayTextArea:false,title:\"Author\",type:ControlType.String},onAaZuA6mguChange:{changes:\"AaZuA6mgu\",type:ControlType.ChangeHandler},Msg3jEzJg:{defaultValue:\"Ghost writer & Dev Ops\",displayTextArea:false,title:\"Author Niche\",type:ControlType.String},onMsg3jEzJgChange:{changes:\"Msg3jEzJg\",type:ControlType.ChangeHandler},A6uTueJJM:{__defaultAssetReference:\"data:framer/asset-reference,7ge8xTDYS4BkuF9IIIuAIVfFQ.jpeg?originalFilename=pexels-photo-1520760.jpeg&width=3456&height=3456\",__vekterDefault:{alt:\"\",assetReference:\"data:framer/asset-reference,7ge8xTDYS4BkuF9IIIuAIVfFQ.jpeg?originalFilename=pexels-photo-1520760.jpeg&width=3456&height=3456\"},title:\"Author DP\",type:ControlType.ResponsiveImage}});addFonts(FramerbHzaerURw,[{explicitInter:true,fonts:[{cssFamilyName:\"Poppins\",source:\"fontshare\",style:\"normal\",uiFamilyName:\"Poppins\",url:\"https://framerusercontent.com/third-party-assets/fontshare/wf/K4RHKGAGLQZBXEZQT2O2AGSLKJF2E4YC/JRUTXNFPWLFGIEVSSEYOW7EP7TYM3V6A/UCDYLFFGLZRGCFY5GYDYM5LDB52BAR5M.woff2\",weight:\"500\"}]}],{supportsExplicitInterCodegen:true});\nexport const __FramerMetadata__ = {\"exports\":{\"default\":{\"type\":\"reactComponent\",\"name\":\"FramerbHzaerURw\",\"slots\":[],\"annotations\":{\"framerImmutableVariables\":\"true\",\"framerColorSyntax\":\"true\",\"framerContractVersion\":\"1\",\"framerIntrinsicWidth\":\"352\",\"framerDisplayContentsDiv\":\"false\",\"framerVariables\":\"{\\\"AaZuA6mgu\\\":\\\"author\\\",\\\"Msg3jEzJg\\\":\\\"authorNiche\\\",\\\"A6uTueJJM\\\":\\\"authorDP\\\"}\",\"framerAutoSizeImages\":\"true\",\"framerCanvasComponentVariantDetails\":\"{\\\"propertyName\\\":\\\"variant\\\",\\\"data\\\":{\\\"default\\\":{\\\"layout\\\":[\\\"fixed\\\",\\\"auto\\\"]}}}\",\"framerComponentViewportWidth\":\"true\",\"framerIntrinsicHeight\":\"45\"}},\"Props\":{\"type\":\"tsType\",\"annotations\":{\"framerContractVersion\":\"1\"}},\"__FramerMetadata__\":{\"type\":\"variable\"}}}\n//# sourceMappingURL=./bHzaerURw.map","import{jsx as _jsx,jsxs as _jsxs}from\"react/jsx-runtime\";import*as React from\"react\";import{addPropertyControls,ControlType,RenderTarget,useIsStaticRenderer}from\"framer\";import{motion,AnimatePresence}from\"framer-motion\";/**\n * Instructions:\n * Create a Framer component that follows the Framer component rules and achieves the user's goal.\n * Goal: Create a “Framer Story” component by using this code.\n *\n * @framerIntrinsicWidth 420\n * @framerIntrinsicHeight 520\n *\n * @framerSupportedLayoutWidth auto\n * @framerSupportedLayoutHeight auto\n */export default function FramerStory(props){const isStatic=useIsStaticRenderer();const{stories:storiesProp,background,nameSeenText,nameUnseenText,ringSeen,ringUnseenA,ringUnseenB,ringUnseenC,overlayBg,progressTrack,progressFill,thumbShadow,controlIcon,likeActive,usernameFont,timeFont,storyNameFont,ctaFont,captionFont,thumbSize,stripPadding,thumbGap,storyCardRadius,holdToPauseMs,fallbackImageDurationMs,fallbackVideoDurationMs,enableKeyboard,enableAutoplayVideo,zoomEnabled,animation}=props;const[stories,setStories]=React.useState(()=>normalizeStories(storiesProp,fallbackImageDurationMs,fallbackVideoDurationMs));const animationPreset=animation?.preset??\"smooth\";const animationEnabled=animation?.enabled??true;const easing=React.useMemo(()=>{if(animationPreset===\"linear\")return[0,0,1,1];if(animationPreset===\"snappy\")return[.34,1.56,.64,1];return[.16,1,.3,1];},[animationPreset]);const overlayDuration=Math.max(0,animation?.overlayDuration??1.2);const cardDuration=Math.max(0,animation?.cardDuration??1.2);const mediaDuration=Math.max(0,animation?.mediaDuration??1.2);React.useEffect(()=>{// keep \"seen\" state locally; only replace if ids changed\nconst next=normalizeStories(storiesProp,fallbackImageDurationMs,fallbackVideoDurationMs);const prevById=new Map(stories.map(s=>[s.id,s]));const merged=next.map(s=>{const prev=prevById.get(s.id);return prev?{...s,items:s.items,image:s.image,title:s.title,time:s.time}:s;});React.startTransition(()=>setStories(merged));// eslint-disable-next-line react-hooks/exhaustive-deps\n},[storiesProp,fallbackImageDurationMs,fallbackVideoDurationMs]);const[isOpen,setIsOpen]=React.useState(false);const[storyIdx,setStoryIdx]=React.useState(0);const[itemIdx,setItemIdx]=React.useState(0);const[isManualPaused,setIsManualPaused]=React.useState(false);const[liked,setLiked]=React.useState(false);const[mediaLoaded,setMediaLoaded]=React.useState(false);const[bgLoaded,setBgLoaded]=React.useState(false);// Keep a ref in sync so RAF loop can read the latest value without stale closures\nconst isManualPausedRef=React.useRef(false);React.useEffect(()=>{isManualPausedRef.current=isManualPaused;},[isManualPaused]);React.useEffect(()=>{// Reset fade-in state on story/item change\nReact.startTransition(()=>setMediaLoaded(false));},[storyIdx,itemIdx]);const overlayRef=React.useRef(null);const cardRef=React.useRef(null);const videoRef=React.useRef(null);const barsRef=React.useRef([]);const rafRef=React.useRef(null);const startTimeRef=React.useRef(0);const pausedAtRef=React.useRef(0);const currentDurationRef=React.useRef(fallbackImageDurationMs);const holdTimeoutRef=React.useRef(null);const isHoldingRef=React.useRef(false);const holdActivatedRef=React.useRef(false);const[isHolding,setIsHolding]=React.useState(false);const currentStory=stories[Math.max(0,Math.min(stories.length-1,storyIdx))];const currentItem=currentStory?.items?.[Math.max(0,Math.min((currentStory?.items?.length??1)-1,itemIdx))];const activeCaption=currentItem?.caption;const stopRaf=React.useCallback(()=>{if(rafRef.current!=null&&typeof window!==\"undefined\"){window.cancelAnimationFrame(rafRef.current);}rafRef.current=null;},[]);const pauseVideo=React.useCallback(()=>{const v=videoRef.current;if(v)v.pause();},[]);const resumeVideo=React.useCallback(()=>{const v=videoRef.current;if(!v)return;const p=v.play();if(p&&typeof p.catch===\"function\"){p.catch(()=>{try{v.muted=true;v.play();}catch{}});}},[]);const resetLike=React.useCallback(()=>{React.startTransition(()=>setLiked(false));},[]);const setSeenForStory=React.useCallback(id=>{React.startTransition(()=>{setStories(prev=>prev.map(s=>s.id===id?{...s,seen:true}:s));});},[]);const updateBarsImmediate=React.useCallback(progress01=>{const s=currentStory;if(!s)return;for(let i=0;i{if(isStatic)return;stopRaf();currentDurationRef.current=Math.max(250,durationMs||fallbackImageDurationMs);startTimeRef.current=Date.now();pausedAtRef.current=0;updateBarsImmediate(0);const loop=()=>{const holding=isHoldingRef.current;const manualPaused=isManualPausedRef.current;if(holding||manualPaused){if(pausedAtRef.current===0)pausedAtRef.current=Date.now();rafRef.current=requestAnimationFrame(loop);return;}if(pausedAtRef.current>0){startTimeRef.current+=Date.now()-pausedAtRef.current;pausedAtRef.current=0;}const elapsed=Date.now()-startTimeRef.current;const progress=Math.min(1,elapsed/currentDurationRef.current);updateBarsImmediate(progress);if(progress>=1){// next slide without rerenders for timer\nnextSlide();return;}rafRef.current=requestAnimationFrame(loop);};rafRef.current=requestAnimationFrame(loop);},[fallbackImageDurationMs,isStatic,stopRaf,updateBarsImmediate]);const closeStory=React.useCallback(()=>{stopRaf();pauseVideo();React.startTransition(()=>{setIsOpen(false);setIsManualPaused(false);});resetLike();},[pauseVideo,resetLike,stopRaf]);const openStory=React.useCallback(idx=>{if(isStatic)return;const safeIdx=Math.max(0,Math.min(stories.length-1,idx));const s=stories[safeIdx];if(!s)return;stopRaf();React.startTransition(()=>{setIsOpen(true);setStoryIdx(safeIdx);setItemIdx(0);setIsManualPaused(false);});setSeenForStory(s.id);resetLike();},[isStatic,resetLike,setSeenForStory,stopRaf,stories]);const loadCurrentItem=React.useCallback(()=>{stopRaf();holdActivatedRef.current=false;isHoldingRef.current=false;pausedAtRef.current=0;if(!currentStory||!currentItem)return;// reset bars to proper completed state for previous items, current to 0\nif(typeof window!==\"undefined\"){requestAnimationFrame(()=>updateBarsImmediate(0));}// If image, start timer on load; if video, start on metadata, using duration if available\nif(currentItem.kind===\"image\"){const imageDurationSec=Math.max(.8,(currentItem.durationMs||fallbackImageDurationMs)/1e3);startTimer(currentItem.durationMs||fallbackImageDurationMs);}else{// timer starts on metadata (or error fallback)\n// handled in