{
  "version": 3,
  "sources": ["ssg:https://framerusercontent.com/modules/pfgdscynW1GCIatGcT6C/9iPXjWz5kCf6EgDOGlUM/NegativeGap.js"],
  "sourcesContent": ["import{jsx as _jsx,jsxs as _jsxs}from\"react/jsx-runtime\";import React,{useEffect,useRef,useState}from\"react\";import{motion,useInView}from\"framer-motion\";import{addPropertyControls,ControlType,RenderTarget}from\"framer\";/**\n * @framerDisableUnlink\n */export default function UncodeGAP(props){const{images,imageWidth,gap,zIndexType,layout,borderSettings,enableAnimation,positionY,startRotation,animationTransition,entryGap,initialOpacity}=props;const containerRef=useRef(null);const isInView=useInView(containerRef,{once:true});const isCanvas=RenderTarget.current()===RenderTarget.canvas;const[hasAnimated,setHasAnimated]=useState(false);const showCover=images.length===0;const containerStyle={display:\"flex\",flexDirection:layout===\"Vertical\"?\"column\":\"row\",height:\"fit-content\",width:\"fit-content\",gap:`${gap}px`,overflow:isCanvas?\"hidden\":\"visible\"};const borderRadiusStyle=borderSettings.borderRadius;const borderStyle=`${borderSettings.borderWidth}px ${borderSettings.borderStyle} ${borderSettings.borderColor}`;const coverStyle={display:\"flex\",flexDirection:\"column\",justifyContent:\"center\",alignItems:\"center\",textAlign:\"center\",width:\"100%\",height:\"100%\",padding:\"20px\",border:\"1px solid rgba(144, 92, 250, 0.3)\",borderRadius:\"16px\",backgroundColor:\"rgba(34, 17, 54, 34%)\",color:\"rgba(144, 92, 250, 1)\"};const imageVariants=index=>({hidden:{opacity:initialOpacity,y:positionY,rotate:startRotation,marginBottom:layout===\"Vertical\"&&index!==images.length-1?`${entryGap}px`:\"0\",marginRight:layout!==\"Vertical\"&&index!==images.length-1?`${entryGap}px`:\"0\"},visible:{opacity:1,y:0,rotate:0,marginBottom:layout===\"Vertical\"&&index!==images.length-1?`${gap}px`:\"0\",marginRight:layout!==\"Vertical\"&&index!==images.length-1?`${gap}px`:\"0\",transition:{delay:index*.1,...animationTransition}}});useEffect(()=>{if(isCanvas&&!hasAnimated){setHasAnimated(true);}},[isCanvas]);return /*#__PURE__*/_jsxs(\"div\",{ref:containerRef,style:containerStyle,children:[showCover&&/*#__PURE__*/_jsxs(\"div\",{style:coverStyle,children:[/*#__PURE__*/_jsx(\"span\",{role:\"img\",\"aria-label\":\"icon\",style:{marginBottom:\"4px\",fontSize:\"32px\"},children:\"\uD83C\uDF51\"}),/*#__PURE__*/_jsx(\"h3\",{style:{fontSize:\"14px\",margin:\"0px 0\",color:\"rgba(144, 92, 250, 1)\",marginBottom:\"4px\"},children:\"Users Dots\"}),/*#__PURE__*/_jsxs(\"p\",{style:{fontSize:\"12px\",fontWeight:\"300\",margin:\"12px\",color:\"rgba(144, 92, 250, 1)\",lineHeight:\"1.3em\"},children:[\"Use the panel or connect the\",/*#__PURE__*/_jsx(\"br\",{}),\"dots with your elements.\"]}),/*#__PURE__*/_jsx(\"p\",{style:{fontSize:\"10px\",fontWeight:\"300\",marginTop:\"0px\",color:\"rgba(144, 92, 250, 1)\",lineHeight:\"1.3em\"},children:\"Desenvolvido por @andrevalentim e @omatusaelhorch.\"})]}),images.map((imageComponent,index)=>/*#__PURE__*/_jsx(motion.div,{initial:enableAnimation&&(!isCanvas||!hasAnimated)?\"hidden\":\"\",animate:enableAnimation&&(isInView||isCanvas&&!hasAnimated)?\"visible\":\"\",variants:enableAnimation?imageVariants(index):undefined,onAnimationComplete:()=>{if(isCanvas)setHasAnimated(true);},style:{overflow:\"hidden\",width:`${imageWidth}px`,height:`${imageWidth}px`,position:\"relative\",zIndex:zIndexType===\"index\"?index:images.length-index,borderRadius:borderRadiusStyle,border:borderStyle,marginBottom:layout===\"Vertical\"&&index!==images.length-1?`${gap}px`:\"0\",marginRight:layout!==\"Vertical\"&&index!==images.length-1?`${gap}px`:\"0\"},children:/*#__PURE__*/_jsx(\"div\",{style:{width:\"100%\",height:\"100%\",display:\"flex\",justifyContent:\"center\",alignItems:\"center\"},children:/*#__PURE__*/React.cloneElement(imageComponent,{style:{...imageComponent.props.style,width:\"100%\",height:\"100%\",borderRadius:borderRadiusStyle,position:\"relative\",zIndex:zIndexType===\"index\"?1:1}})})},index))]});}addPropertyControls(UncodeGAP,{images:{type:ControlType.Array,title:\"Itens\",propertyControl:{type:ControlType.ComponentInstance,title:\"Image\"},defaultValue:[],description:\"Array of images to display in the gallery. / Conjunto de imagens para exibir na galeria.\"},imageWidth:{type:ControlType.Number,title:\"Size\",defaultValue:100,min:1,step:1,displayStepper:true,description:\"Width of each image in pixels. / Largura de cada imagem em pixels.\"},gap:{type:ControlType.Number,title:\"Gap\",defaultValue:0,min:-100,max:100,step:1,description:\"Gap between images in the gallery. / Espa\\xe7amento entre as imagens na galeria.\"},borderSettings:{type:ControlType.Object,title:\"Border Settings\",controls:{borderWidth:{title:\"Width\",type:ControlType.Number,displayStepper:true,defaultValue:2},borderStyle:{title:\"Style\",type:ControlType.Enum,options:[\"solid\",\"dashed\",\"dotted\",\"double\"],optionTitles:[\"Solid\",\"Dashed\",\"Dotted\",\"Double\"],defaultValue:\"solid\"},borderColor:{title:\"Color\",type:ControlType.Color,defaultValue:\"rgba(0,0,0,1)\"},borderRadius:{type:ControlType.BorderRadius,title:\"Border Radius\",defaultValue:\"16px\"}},description:\"Border and radius settings for images in the gallery. / Configura\\xe7\\xf5es de borda e raio para as imagens na galeria.\"},enableAnimation:{type:ControlType.Boolean,title:\"Enable Animation\",defaultValue:false,enabledTitle:\"On\",disabledTitle:\"Off\",description:\"Enable animations? / Ativar anima\\xe7\\xf5es?\"},positionY:{type:ControlType.Number,title:\"Initial Y Position\",defaultValue:20,min:-100,max:100,step:1,description:\"Initial Y position for the animation. / Posi\\xe7\\xe3o Y inicial para a anima\\xe7\\xe3o.\",hidden(props){return!props.enableAnimation;}},startRotation:{type:ControlType.Number,title:\"Initial Rotation\",defaultValue:45,min:0,max:360,step:5,description:\"Initial rotation angle for the animation. / \\xc2ngulo de rota\\xe7\\xe3o inicial para a anima\\xe7\\xe3o.\",hidden(props){return!props.enableAnimation;}},entryGap:{type:ControlType.Number,title:\"Entry Gap\",defaultValue:0,min:-200,max:200,step:1,description:\"Gap for images during the entry animation. / Espa\\xe7amento das imagens durante a anima\\xe7\\xe3o de entrada.\",hidden(props){return!props.enableAnimation;}},initialOpacity:{type:ControlType.Number,title:\"Initial Opacity\",defaultValue:0,min:0,max:1,step:.1,description:\"Initial opacity for the animation. / Opacidade inicial para a anima\\xe7\\xe3o.\",hidden(props){return!props.enableAnimation;}},animationTransition:{type:ControlType.Transition,title:\"Animation Transition\",defaultValue:{duration:.5},hidden(props){return!props.enableAnimation;}},zIndexType:{type:ControlType.SegmentedEnum,title:\"Primary Image\",options:[\"images.length\",\"index\"],optionTitles:[\"Left\",\"Right\"],defaultValue:\"images.length\",description:\"Z-index behavior for image stacking. / Comportamento de Z-index para empilhamento de imagens.\"},layout:{type:ControlType.Enum,title:\"Direction\",options:[\"Horizontal\",\"Vertical\"],optionIcons:[\"direction-horizontal\",\"direction-vertical\"],displaySegmentedControl:true,description:\"Direction of image arrangement. / Dire\\xe7\\xe3o do arranjo das imagens.\"},codeBy:{type:ControlType.String,title:\" \",placeholder:\"About:\",readOnly:true,description:\"This component was created by [@andrevalentim](https://www.instagram.com/andrevalentim/) and [@omatusaelhorch](https://www.instagram.com/omatusaelhorch/)\"}});\nexport const __FramerMetadata__ = {\"exports\":{\"default\":{\"type\":\"reactComponent\",\"name\":\"UncodeGAP\",\"slots\":[],\"annotations\":{\"framerContractVersion\":\"1\",\"framerDisableUnlink\":\"\"}},\"__FramerMetadata__\":{\"type\":\"variable\"}}}\n//# sourceMappingURL=./NegativeGap.map"],
  "mappings": "0LAAAA,IAEkB,SAARC,EAA2BC,EAAM,CAAC,GAAK,CAAC,OAAAC,EAAO,WAAAC,EAAW,IAAAC,EAAI,WAAAC,EAAW,OAAAC,EAAO,eAAAC,EAAe,gBAAAC,EAAgB,UAAAC,EAAU,cAAAC,EAAc,oBAAAC,EAAoB,SAAAC,EAAS,eAAAC,CAAc,EAAEZ,EAAYa,EAAaC,EAAO,IAAI,EAAQC,EAASC,EAAUH,EAAa,CAAC,KAAK,EAAI,CAAC,EAAQI,EAASC,EAAa,QAAQ,IAAIA,EAAa,OAAY,CAACC,EAAYC,CAAc,EAAEC,EAAS,EAAK,EAAQC,EAAUrB,EAAO,SAAS,EAAQsB,EAAe,CAAC,QAAQ,OAAO,cAAclB,IAAS,WAAW,SAAS,MAAM,OAAO,cAAc,MAAM,cAAc,IAAI,GAAGF,CAAG,KAAK,SAASc,EAAS,SAAS,SAAS,EAAQO,EAAkBlB,EAAe,aAAmBmB,EAAY,GAAGnB,EAAe,WAAW,MAAMA,EAAe,WAAW,IAAIA,EAAe,WAAW,GAASoB,EAAW,CAAC,QAAQ,OAAO,cAAc,SAAS,eAAe,SAAS,WAAW,SAAS,UAAU,SAAS,MAAM,OAAO,OAAO,OAAO,QAAQ,OAAO,OAAO,oCAAoC,aAAa,OAAO,gBAAgB,wBAAwB,MAAM,uBAAuB,EAAQC,EAAcC,IAAQ,CAAC,OAAO,CAAC,QAAQhB,EAAe,EAAEJ,EAAU,OAAOC,EAAc,aAAaJ,IAAS,YAAYuB,IAAQ3B,EAAO,OAAO,EAAE,GAAGU,CAAQ,KAAK,IAAI,YAAYN,IAAS,YAAYuB,IAAQ3B,EAAO,OAAO,EAAE,GAAGU,CAAQ,KAAK,GAAG,EAAE,QAAQ,CAAC,QAAQ,EAAE,EAAE,EAAE,OAAO,EAAE,aAAaN,IAAS,YAAYuB,IAAQ3B,EAAO,OAAO,EAAE,GAAGE,CAAG,KAAK,IAAI,YAAYE,IAAS,YAAYuB,IAAQ3B,EAAO,OAAO,EAAE,GAAGE,CAAG,KAAK,IAAI,WAAW,CAAC,MAAMyB,EAAM,GAAG,GAAGlB,CAAmB,CAAC,CAAC,GAAG,OAAAmB,EAAU,IAAI,CAAIZ,GAAU,CAACE,GAAaC,EAAe,EAAI,CAAG,EAAE,CAACH,CAAQ,CAAC,EAAsBa,EAAM,MAAM,CAAC,IAAIjB,EAAa,MAAMU,EAAe,SAAS,CAACD,GAAwBQ,EAAM,MAAM,CAAC,MAAMJ,EAAW,SAAS,CAAcK,EAAK,OAAO,CAAC,KAAK,MAAM,aAAa,OAAO,MAAM,CAAC,aAAa,MAAM,SAAS,MAAM,EAAE,SAAS,WAAI,CAAC,EAAeA,EAAK,KAAK,CAAC,MAAM,CAAC,SAAS,OAAO,OAAO,QAAQ,MAAM,wBAAwB,aAAa,KAAK,EAAE,SAAS,YAAY,CAAC,EAAeD,EAAM,IAAI,CAAC,MAAM,CAAC,SAAS,OAAO,WAAW,MAAM,OAAO,OAAO,MAAM,wBAAwB,WAAW,OAAO,EAAE,SAAS,CAAC,+BAA4CC,EAAK,KAAK,CAAC,CAAC,EAAE,0BAA0B,CAAC,CAAC,EAAeA,EAAK,IAAI,CAAC,MAAM,CAAC,SAAS,OAAO,WAAW,MAAM,UAAU,MAAM,MAAM,wBAAwB,WAAW,OAAO,EAAE,SAAS,oDAAoD,CAAC,CAAC,CAAC,CAAC,EAAE9B,EAAO,IAAI,CAAC+B,EAAeJ,IAAqBG,EAAKE,EAAO,IAAI,CAAC,QAAQ1B,IAAkB,CAACU,GAAU,CAACE,GAAa,SAAS,GAAG,QAAQZ,IAAkBQ,GAAUE,GAAU,CAACE,GAAa,UAAU,GAAG,SAASZ,EAAgBoB,EAAcC,CAAK,EAAE,OAAU,oBAAoB,IAAI,CAAIX,GAASG,EAAe,EAAI,CAAE,EAAE,MAAM,CAAC,SAAS,SAAS,MAAM,GAAGlB,CAAU,KAAK,OAAO,GAAGA,CAAU,KAAK,SAAS,WAAW,OAAOE,IAAa,QAAQwB,EAAM3B,EAAO,OAAO2B,EAAM,aAAaJ,EAAkB,OAAOC,EAAY,aAAapB,IAAS,YAAYuB,IAAQ3B,EAAO,OAAO,EAAE,GAAGE,CAAG,KAAK,IAAI,YAAYE,IAAS,YAAYuB,IAAQ3B,EAAO,OAAO,EAAE,GAAGE,CAAG,KAAK,GAAG,EAAE,SAAsB4B,EAAK,MAAM,CAAC,MAAM,CAAC,MAAM,OAAO,OAAO,OAAO,QAAQ,OAAO,eAAe,SAAS,WAAW,QAAQ,EAAE,SAAsBG,EAAM,aAAaF,EAAe,CAAC,MAAM,CAAC,GAAGA,EAAe,MAAM,MAAM,MAAM,OAAO,OAAO,OAAO,aAAaR,EAAkB,SAAS,WAAW,OAA4B,CAAG,CAAC,CAAC,CAAC,CAAC,CAAC,EAAEI,CAAK,CAAC,CAAC,CAAC,CAAC,CAAE,CAACO,EAAoBpC,EAAU,CAAC,OAAO,CAAC,KAAKqC,EAAY,MAAM,MAAM,QAAQ,gBAAgB,CAAC,KAAKA,EAAY,kBAAkB,MAAM,OAAO,EAAE,aAAa,CAAC,EAAE,YAAY,0FAA0F,EAAE,WAAW,CAAC,KAAKA,EAAY,OAAO,MAAM,OAAO,aAAa,IAAI,IAAI,EAAE,KAAK,EAAE,eAAe,GAAK,YAAY,oEAAoE,EAAE,IAAI,CAAC,KAAKA,EAAY,OAAO,MAAM,MAAM,aAAa,EAAE,IAAI,KAAK,IAAI,IAAI,KAAK,EAAE,YAAY,kFAAkF,EAAE,eAAe,CAAC,KAAKA,EAAY,OAAO,MAAM,kBAAkB,SAAS,CAAC,YAAY,CAAC,MAAM,QAAQ,KAAKA,EAAY,OAAO,eAAe,GAAK,aAAa,CAAC,EAAE,YAAY,CAAC,MAAM,QAAQ,KAAKA,EAAY,KAAK,QAAQ,CAAC,QAAQ,SAAS,SAAS,QAAQ,EAAE,aAAa,CAAC,QAAQ,SAAS,SAAS,QAAQ,EAAE,aAAa,OAAO,EAAE,YAAY,CAAC,MAAM,QAAQ,KAAKA,EAAY,MAAM,aAAa,eAAe,EAAE,aAAa,CAAC,KAAKA,EAAY,aAAa,MAAM,gBAAgB,aAAa,MAAM,CAAC,EAAE,YAAY,yHAAyH,EAAE,gBAAgB,CAAC,KAAKA,EAAY,QAAQ,MAAM,mBAAmB,aAAa,GAAM,aAAa,KAAK,cAAc,MAAM,YAAY,8CAA8C,EAAE,UAAU,CAAC,KAAKA,EAAY,OAAO,MAAM,qBAAqB,aAAa,GAAG,IAAI,KAAK,IAAI,IAAI,KAAK,EAAE,YAAY,yFAAyF,OAAOpC,EAAM,CAAC,MAAM,CAACA,EAAM,eAAgB,CAAC,EAAE,cAAc,CAAC,KAAKoC,EAAY,OAAO,MAAM,mBAAmB,aAAa,GAAG,IAAI,EAAE,IAAI,IAAI,KAAK,EAAE,YAAY,wGAAwG,OAAOpC,EAAM,CAAC,MAAM,CAACA,EAAM,eAAgB,CAAC,EAAE,SAAS,CAAC,KAAKoC,EAAY,OAAO,MAAM,YAAY,aAAa,EAAE,IAAI,KAAK,IAAI,IAAI,KAAK,EAAE,YAAY,+GAA+G,OAAOpC,EAAM,CAAC,MAAM,CAACA,EAAM,eAAgB,CAAC,EAAE,eAAe,CAAC,KAAKoC,EAAY,OAAO,MAAM,kBAAkB,aAAa,EAAE,IAAI,EAAE,IAAI,EAAE,KAAK,GAAG,YAAY,gFAAgF,OAAOpC,EAAM,CAAC,MAAM,CAACA,EAAM,eAAgB,CAAC,EAAE,oBAAoB,CAAC,KAAKoC,EAAY,WAAW,MAAM,uBAAuB,aAAa,CAAC,SAAS,EAAE,EAAE,OAAOpC,EAAM,CAAC,MAAM,CAACA,EAAM,eAAgB,CAAC,EAAE,WAAW,CAAC,KAAKoC,EAAY,cAAc,MAAM,gBAAgB,QAAQ,CAAC,gBAAgB,OAAO,EAAE,aAAa,CAAC,OAAO,OAAO,EAAE,aAAa,gBAAgB,YAAY,+FAA+F,EAAE,OAAO,CAAC,KAAKA,EAAY,KAAK,MAAM,YAAY,QAAQ,CAAC,aAAa,UAAU,EAAE,YAAY,CAAC,uBAAuB,oBAAoB,EAAE,wBAAwB,GAAK,YAAY,yEAAyE,EAAE,OAAO,CAAC,KAAKA,EAAY,OAAO,MAAM,IAAI,YAAY,SAAS,SAAS,GAAK,YAAY,2JAA2J,CAAC,CAAC",
  "names": ["init_ssg_sandbox_shims", "UncodeGAP", "props", "images", "imageWidth", "gap", "zIndexType", "layout", "borderSettings", "enableAnimation", "positionY", "startRotation", "animationTransition", "entryGap", "initialOpacity", "containerRef", "pe", "isInView", "useInView", "isCanvas", "RenderTarget", "hasAnimated", "setHasAnimated", "ye", "showCover", "containerStyle", "borderRadiusStyle", "borderStyle", "coverStyle", "imageVariants", "index", "ue", "u", "p", "imageComponent", "motion", "e", "addPropertyControls", "ControlType"]
}