Lorem ipsum dolor sit amet
\",title:\"Description-text\",type:ControlType.RichText},Hss50D9tr:{defaultValue:true,title:\"List-01\",type:ControlType.Boolean},OhGUXT2hB:{defaultValue:true,title:\"List-02\",type:ControlType.Boolean},Lf677Nn3q:{defaultValue:true,title:\"List-03\",type:ControlType.Boolean},LOc5u3QpU:{defaultValue:true,title:\"List-04\",type:ControlType.Boolean},KOJw96OHa:{defaultValue:true,title:\"List-05\",type:ControlType.Boolean},yJmTiDK3P:{defaultValue:true,title:\"List-06\",type:ControlType.Boolean},yCBAUg0pl:{defaultValue:true,title:\"Image\",type:ControlType.Boolean},QWaRCqDqv:{__defaultAssetReference:\"data:framer/asset-reference,6EquKRX4MpaXkLlE9bUad8QO7o.png?originalFilename=Asset-01.png&preferredSize=auto\",title:\"Image Upload\",type:ControlType.ResponsiveImage},kksLMCUdB:{defaultValue:90,description:\"e.g. 10 is 1 second, 20 is 2 seconds, 30 is 3 seconds, etc.\",max:1e3,min:10,step:10,title:\"Loading time (ms)\",type:ControlType.Number},ZAwjWvOpL:ProgressAnimationControls?.[\"progressState\"]&&{...ProgressAnimationControls[\"progressState\"],defaultValue:\"Empty\",description:undefined,hidden:undefined,title:\"Progress State\"}});addFonts(FrameruvlImYzSa,[{explicitInter:true,fonts:[{family:\"Inter\",source:\"framer\",style:\"normal\",unicodeRange:\"U+0460-052F, U+1C80-1C88, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F\",url:\"https://framerusercontent.com/assets/5vvr9Vy74if2I6bQbJvbw7SY1pQ.woff2\",weight:\"400\"},{family:\"Inter\",source:\"framer\",style:\"normal\",unicodeRange:\"U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116\",url:\"https://framerusercontent.com/assets/EOr0mi4hNtlgWNn9if640EZzXCo.woff2\",weight:\"400\"},{family:\"Inter\",source:\"framer\",style:\"normal\",unicodeRange:\"U+1F00-1FFF\",url:\"https://framerusercontent.com/assets/Y9k9QrlZAqio88Klkmbd8VoMQc.woff2\",weight:\"400\"},{family:\"Inter\",source:\"framer\",style:\"normal\",unicodeRange:\"U+0370-03FF\",url:\"https://framerusercontent.com/assets/OYrD2tBIBPvoJXiIHnLoOXnY9M.woff2\",weight:\"400\"},{family:\"Inter\",source:\"framer\",style:\"normal\",unicodeRange:\"U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF\",url:\"https://framerusercontent.com/assets/JeYwfuaPfZHQhEG8U5gtPDZ7WQ.woff2\",weight:\"400\"},{family:\"Inter\",source:\"framer\",style:\"normal\",unicodeRange:\"U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD\",url:\"https://framerusercontent.com/assets/vQyevYAyHtARFwPqUzQGpnDs.woff2\",weight:\"400\"},{family:\"Inter\",source:\"framer\",style:\"normal\",unicodeRange:\"U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+1EA0-1EF9, U+20AB\",url:\"https://framerusercontent.com/assets/b6Y37FthZeALduNqHicBT6FutY.woff2\",weight:\"400\"}]},...ProgressAnimationFonts,...getFontsFromSharedStyle(sharedStyle.fonts),...getFontsFromSharedStyle(sharedStyle1.fonts),...getFontsFromSharedStyle(sharedStyle2.fonts),...getFontsFromSharedStyle(sharedStyle3.fonts),...getFontsFromSharedStyle(sharedStyle4.fonts),...getFontsFromSharedStyle(sharedStyle5.fonts),...getFontsFromSharedStyle(sharedStyle6.fonts),...getFontsFromSharedStyle(sharedStyle7.fonts),...getFontsFromSharedStyle(sharedStyle8.fonts),...getFontsFromSharedStyle(sharedStyle9.fonts),...getFontsFromSharedStyle(sharedStyle10.fonts),...getFontsFromSharedStyle(sharedStyle11.fonts),...getFontsFromSharedStyle(sharedStyle12.fonts),...getFontsFromSharedStyle(sharedStyle13.fonts),...getFontsFromSharedStyle(sharedStyle14.fonts),...componentPresets.fonts?.[\"kBlSu1wi9\"]?getFontsFromComponentPreset(componentPresets.fonts?.[\"kBlSu1wi9\"]):[]],{supportsExplicitInterCodegen:true});\nexport const __FramerMetadata__ = {\"exports\":{\"Props\":{\"type\":\"tsType\",\"annotations\":{\"framerContractVersion\":\"1\"}},\"default\":{\"type\":\"reactComponent\",\"name\":\"FrameruvlImYzSa\",\"slots\":[],\"annotations\":{\"framerAutoSizeImages\":\"true\",\"framerImmutableVariables\":\"true\",\"framerContractVersion\":\"1\",\"framerColorSyntax\":\"true\",\"framerDisplayContentsDiv\":\"false\",\"framerComponentViewportWidth\":\"true\",\"framerVariables\":\"{\\\"zWkOeV5ud\\\":\\\"heading\\\",\\\"CRWJvQu67\\\":\\\"open\\\",\\\"nvoLzAYy7\\\":\\\"close\\\",\\\"TqubUQPi7\\\":\\\"descriptionText\\\",\\\"Hss50D9tr\\\":\\\"list01\\\",\\\"OhGUXT2hB\\\":\\\"list02\\\",\\\"Lf677Nn3q\\\":\\\"list03\\\",\\\"LOc5u3QpU\\\":\\\"list04\\\",\\\"KOJw96OHa\\\":\\\"list05\\\",\\\"yJmTiDK3P\\\":\\\"list06\\\",\\\"yCBAUg0pl\\\":\\\"image\\\",\\\"QWaRCqDqv\\\":\\\"imageUpload\\\",\\\"kksLMCUdB\\\":\\\"loadingTimeMs\\\",\\\"ZAwjWvOpL\\\":\\\"progressState\\\"}\",\"framerIntrinsicHeight\":\"77\",\"framerIntrinsicWidth\":\"720\",\"framerCanvasComponentVariantDetails\":\"{\\\"propertyName\\\":\\\"variant\\\",\\\"data\\\":{\\\"default\\\":{\\\"layout\\\":[\\\"fixed\\\",\\\"auto\\\"]},\\\"TGmLeTWGU\\\":{\\\"layout\\\":[\\\"fixed\\\",\\\"auto\\\"]},\\\"IrLyXAH2a\\\":{\\\"layout\\\":[\\\"fixed\\\",\\\"auto\\\"]},\\\"lJe4uENQW\\\":{\\\"layout\\\":[\\\"fixed\\\",\\\"auto\\\"]}}}\"}},\"__FramerMetadata__\":{\"type\":\"variable\"}}}", "import{useState,useEffect}from\"react\";export const isBrowser=()=>typeof document===\"object\";export function getBrowserVisibilityProp(){if(!isBrowser())return;if(typeof document.hidden!==\"undefined\"){// Opera 12.10 and Firefox 18 and later support\nreturn\"visibilitychange\";}else if(typeof document.msHidden!==\"undefined\"){return\"msvisibilitychange\";}else if(typeof document.webkitHidden!==\"undefined\"){return\"webkitvisibilitychange\";}}export function getBrowserDocumentHiddenProp(){if(!isBrowser())return;if(typeof document.hidden!==\"undefined\"){return\"hidden\";}else if(typeof document.msHidden!==\"undefined\"){return\"msHidden\";}else if(typeof document.webkitHidden!==\"undefined\"){return\"webkitHidden\";}}export function getIsDocumentHidden(){if(!isBrowser())return;return!document[getBrowserDocumentHiddenProp()];}export function usePageVisibility(){if(!isBrowser())return;const[isVisible,setIsVisible]=useState(getIsDocumentHidden());const onVisibilityChange=()=>setIsVisible(getIsDocumentHidden());useEffect(()=>{const visibilityChange=getBrowserVisibilityProp();document.addEventListener(visibilityChange,onVisibilityChange,false);return()=>{document.removeEventListener(visibilityChange,onVisibilityChange);};});return isVisible;}\nexport const __FramerMetadata__ = {\"exports\":{\"getBrowserVisibilityProp\":{\"type\":\"function\",\"annotations\":{\"framerContractVersion\":\"1\"}},\"getIsDocumentHidden\":{\"type\":\"function\",\"annotations\":{\"framerContractVersion\":\"1\"}},\"usePageVisibility\":{\"type\":\"function\",\"annotations\":{\"framerContractVersion\":\"1\"}},\"isBrowser\":{\"type\":\"variable\",\"annotations\":{\"framerContractVersion\":\"1\"}},\"getBrowserDocumentHiddenProp\":{\"type\":\"function\",\"annotations\":{\"framerContractVersion\":\"1\"}},\"__FramerMetadata__\":{\"type\":\"variable\"}}}\n//# sourceMappingURL=./UsePageVisibility.map", "import{jsx as _jsx,jsxs as _jsxs}from\"react/jsx-runtime\";import{Children,useLayoutEffect,useEffect,useState,useRef,useMemo,createRef,useCallback,cloneElement,forwardRef}from\"react\";import{addPropertyControls,ControlType,RenderTarget}from\"framer\";import{motion,animate,useMotionValue,useInView,useTransform,LayoutGroup,wrap,sync,mix}from\"framer-motion\";import{resize}from\"@motionone/dom\";import{usePageVisibility}from\"https://framerusercontent.com/modules/V9ryrjN5Am9WM1dJeyyJ/9mrJHeWj7rhvLTLu7Yzt/UsePageVisibility.js\";// Using opacity: 0.001 instead of 0 as an LCP hack. (opacity: 0.001 is still 0\n// to a human eye but makes Google think the elements are visible)\nconst OPACITY_0=.001;/**\n *\n * SLIDESHOW\n * V2 with Drag\n * By Benjamin and Matt\n *\n * @framerIntrinsicWidth 400\n * @framerIntrinsicHeight 200\n *\n * @framerDisableUnlink\n *\n * @framerSupportedLayoutWidth fixed\n * @framerSupportedLayoutHeight fixed\n */export default function Slideshow(props){/**\n * Properties\n */const{slots,startFrom,direction,effectsOptions,autoPlayControl,dragControl,alignment,gap,padding,paddingPerSide,paddingTop,paddingRight,paddingBottom,paddingLeft,itemAmount,fadeOptions,intervalControl,transitionControl,arrowOptions,borderRadius,progressOptions,style}=props;const{effectsOpacity,effectsScale,effectsRotate,effectsPerspective,effectsHover}=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 hasChildren=Children.count(filteredSlots)>0;const isHorizontal=direction===\"left\"||direction===\"right\";const isInverted=direction===\"right\"||direction===\"bottom\";/**\n * Empty state for Canvas\n */if(!hasChildren){return /*#__PURE__*/_jsxs(\"section\",{style:placeholderStyles,children:[/*#__PURE__*/_jsx(\"div\",{style:emojiStyles,children:\"\u2B50\uFE0F\"}),/*#__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 parentRef=useRef(null);const childrenRef=useMemo(()=>{return filteredSlots.map(index=>/*#__PURE__*/createRef());},[filteredSlots]);const timeoutRef=useRef(undefined);const[size,setSize]=useState({parent:null,children:null,item:null,itemWidth:null,itemHeight:null,viewportLength:null});/* For pausing on hover */const[isHovering,setIsHovering]=useState(false);const[shouldPlayOnHover,setShouldPlayOnHover]=useState(autoPlayControl);/* For cursor updates */const[isMouseDown,setIsMouseDown]=useState(false);/* Check if resizing */const[isResizing,setIsResizing]=useState(false);/**\n * Array for children\n */const dupedChildren=[];let duplicateBy=4;if(isCanvas){duplicateBy=1;}/**\n * Measure parent, child, items\n */const measure=useCallback(()=>{if(hasChildren&&parentRef.current){const total=filteredSlots.length-1;const parentLength=isHorizontal?parentRef.current.offsetWidth:parentRef.current.offsetHeight;const start=childrenRef[0].current?isHorizontal?childrenRef[0].current.offsetLeft:childrenRef[0].current.offsetTop:0;const end=childrenRef[total].current?isHorizontal?childrenRef[total].current.offsetLeft+childrenRef[total].current.offsetWidth:childrenRef[total].current.offsetTop+childrenRef[total].current.offsetHeight:0;const childrenLength=end-start+gap;const itemSize=childrenRef[0].current?isHorizontal?childrenRef[0].current.offsetWidth:childrenRef[0].current.offsetHeight:0;const itemWidth=childrenRef[0].current?childrenRef[0].current.offsetWidth:0;const itemHeight=childrenRef[0].current?childrenRef[0].current.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});}},[hasChildren]);const scheduleMeasure=useCallback(()=>{sync.read(measure);},[measure]);/**\n * Add refs to all children\n * Added itemAmount for resizing\n */useLayoutEffect(()=>{if(hasChildren)scheduleMeasure();},[hasChildren,itemAmount]);/**\n * Track whether this is the initial resize event. By default this will fire on mount,\n * which we do in the useEffect. We should only fire it on subsequent resizes.\n */let initialResize=useRef(true);useEffect(()=>{return resize(parentRef.current,({contentSize})=>{if(!initialResize.current&&(contentSize.width||contentSize.height)){scheduleMeasure();setIsResizing(true);}initialResize.current=false;});},[]);useEffect(()=>{if(isResizing){const timer=setTimeout(()=>setIsResizing(false),500);return()=>clearTimeout(timer);}},[isResizing]);/**\n * Animation, pagination\n */const totalItems=filteredSlots===null||filteredSlots===void 0?void 0:filteredSlots.length;const childrenSize=isCanvas?0:size===null||size===void 0?void 0:size.children;const itemWithGap=(size===null||size===void 0?void 0:size.item)+gap;const itemOffset=startFrom*itemWithGap;const[currentItem,setCurrentItem]=useState(startFrom+totalItems);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=usePageVisibility()&&isInView;const factor=isInverted?1:-1;/* The x and y values to start from */const xOrY=useMotionValue(childrenSize);/* For canvas only. Using xOrY is slower upon page switching */const canvasPosition=isHorizontal?-startFrom*((size===null||size===void 0?void 0:size.itemWidth)+gap):-startFrom*((size===null||size===void 0?void 0:size.itemHeight)+gap);/* Calculate the new value to animate to */const newPosition=()=>factor*currentItem*itemWithGap;/* Wrapped values for infinite looping *//* Instead of 0 to a negative full duplicated row, we start with an offset */const wrappedValue=!isCanvas?useTransform(xOrY,value=>{const wrapped=wrap(-childrenSize,-childrenSize*2,value);return isNaN(wrapped)?0:wrapped;}):0;/* Convert the current item to a wrapping index for dots */const wrappedIndex=wrap(0,totalItems,currentItem);const wrappedIndexInverted=wrap(0,-totalItems,currentItem);/* Update x or y with the provided starting point *//* The subtraction of a full row of children is for overflow */useLayoutEffect(()=>{if((size===null||size===void 0?void 0:size.children)===null)return;/* Initial measure */// if (initialResize.current) {\n// xOrY.set((childrenSize + itemOffset) * factor)\n// }\n/* Subsequent resizes */if(!initialResize.current&&isResizing){xOrY.set(newPosition());}},[size,childrenSize,factor,itemOffset,currentItem,itemWithGap,isResizing]);/**\n * Page item methods\n * Switching, deltas, autoplaying\n *//* Next and previous function, animates the X */const switchPages=()=>{if(isCanvas||!hasChildren||!size.parent||isDragging)return;if(xOrY.get()!==newPosition()){animate(xOrY,newPosition(),transitionControl);}if(autoPlayControl&&shouldPlayOnHover){timeoutRef.current=setTimeout(()=>{setCurrentItem(currentItem+1);switchPages();},intervalControl*1e3);}};/* Page navigation functions */const setDelta=delta=>{if(!isInverted){setCurrentItem(currentItem+delta);}else{setCurrentItem(currentItem-delta);}};const setPage=index=>{const currentItemWrapped=wrap(0,totalItems,currentItem);const currentItemWrappedInvert=wrap(0,-totalItems,currentItem);const goto=index-currentItemWrapped;const gotoInverted=index-Math.abs(currentItemWrappedInvert);if(!isInverted){setCurrentItem(currentItem+goto);}else{setCurrentItem(currentItem-gotoInverted);}};/**\n * Drag\n */const handleDragStart=()=>{setIsDragging(true);};const handleDragEnd=(event,{offset,velocity})=>{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);}else if(velocityXorY<-velocityThreshold){setDelta(itemDeltaFromOne);}else{/* For dragging over half of the current item with 0 velocity */if(isHalfOfNext){setDelta(itemDelta);}if(isHalfOfPrev){setDelta(-itemDelta);}}};/* Kickstart the auto-playing once we have all the children */useEffect(()=>{if(!isVisible||isResizing)return;switchPages();return()=>timeoutRef.current&&clearTimeout(timeoutRef.current);},[dupedChildren,isVisible,isResizing]);/* Create copies of our children to create a perfect loop */let childCounter=0;/**\n * Sizing\n * */let columnOrRowValue=`calc(${100/itemAmount}% - ${gap}px + ${gap/itemAmount}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