into several smaller ones, which prevents the huge
\n// from becoming an LCP element.\nconst descriptionParagraphs=description?.split(\"\\n\\n\");return description.split(\"\\n\\n\").map((line,index)=>/*#__PURE__*/_jsx(DescriptionParagraph,{line:line,// Only render the policy in the last paragraph\n policy:index===descriptionParagraphs.length-1?policy:null,style:{// Add a spacing between paragraphs\n marginTop:index>0?4:0,...style},linkColor:linkColor},index));}function DescriptionParagraph({line,policy,style,linkColor}){return /*#__PURE__*/_jsxs(\"p\",{style:{lineHeight:1.5,margin:0,padding:0,fontSize:14,...style},children:[line,line&&policy?.link?\" \":null,policy?.link&&/*#__PURE__*/_jsxs(\"span\",{children:[policy?.prefix,\" \",/*#__PURE__*/_jsx(\"a\",{href:policy?.link,target:\"_blank\",rel:\"noopener noreferrer\",style:{color:linkColor,textDecoration:\"none\"},children:policy?.label}),\".\"]})]});}function Buttons({children,direction}){return /*#__PURE__*/_jsx(\"div\",{style:{display:\"flex\",flexDirection:direction,gap:10,marginTop:16},children:children});}const Button=withCSS(function Button({id,children,primary,settings,onClick}){const paddingValue=settings.paddingPerSide?`${settings.paddingTop}px ${settings.paddingRight}px ${settings.paddingBottom}px ${settings.paddingLeft}px`:`${settings.padding}px`;const theme=primary?settings.primary:settings.secondary;return /*#__PURE__*/_jsx(motion.input,{className:\"__framer-cookie-component-button\",id:`__framer-cookie-component-button-${id}`,onClick:onClick,type:\"button\",value:`${children}`,whileHover:{opacity:settings.hoverOpacity??.6},whileTap:{opacity:settings.tapOpacity??.4},style:{WebkitAppearance:\"none\",appearance:\"none\",width:settings.fluid?\"100%\":\"auto\",height:\"auto\",border:\"none\",padding:paddingValue,borderRadius:settings.borderRadius,boxShadow:getShadow(theme.shadow),background:theme.fill,color:theme.color,fontSize:14,lineHeight:1,cursor:\"pointer\",fontWeight:settings.font?\"unset\":600,...withDefaultFontFamily(settings.font)}});},\".__framer-cookie-component-button:focus:not(:focus-visible){outline-color:transparent}\",\"framer-lib-cookie-banner\");function withDefaultFontFamily(style){if(style?.fontFamily)return style;return{...style,fontFamily:style?.fontFamily||DEFAULT_FONT_FAMILY};}\nexport const __FramerMetadata__ = {\"exports\":{\"BannerComponentProps\":{\"type\":\"tsType\",\"annotations\":{\"framerContractVersion\":\"1\"}},\"Banner\":{\"type\":\"variable\",\"annotations\":{\"framerContractVersion\":\"1\"}},\"__FramerMetadata__\":{\"type\":\"variable\"}}}\n//# sourceMappingURL=./Banner.map","// ⚠️⚠️⚠️⚠️⚠️\n// Edit these files in https://github.com/framer/FramerCodeComponents\n// ⚠️⚠️⚠️⚠️⚠️\nimport{jsx as _jsx,jsxs as _jsxs,Fragment as _Fragment}from\"react/jsx-runtime\";import{addPropertyControls,ControlType,RenderTarget,useIsOnFramerCanvas,withCSS}from\"framer\";import{AnimatePresence,isBrowser,motion}from\"framer-motion\";import{lazy,Suspense,useEffect,useState}from\"react\";import{createPortal}from\"react-dom\";import{defaultConsent,useConsent,useGTMDefaultConsent}from\"https://framerusercontent.com/modules/zvf2WTzc98u6EX2y7YDj/SElQKSOnUBZOSJtmN84H/consent.js\";import{useRegion}from\"https://framerusercontent.com/modules/0oeZpJVursioGAbwgB9e/LdKok3hlO89v4p4R5gq4/region.js\";import{Banner}from\"https://framerusercontent.com/modules/EkwkxVF9vkTs720qqBC8/LMJoQTMJ3dAbGtsVKgtQ/Banner.js\";import{inEU}from\"https://framerusercontent.com/modules/HKzIAGtbudIGLRAteuFH/Puy217ziAIZRqHk4rVRu/inEU.js\";import{DEFAULT_FONT_FAMILY,getFlexboxValues,interactionResponse,yieldBeforeCb}from\"https://framerusercontent.com/modules/tfq8EDfrazNLXzc9LJte/pK4oThhjjhllFVAwqFls/utils.js\";// Keep track of open state between page reloads\nlet initiallyOpen=false;/**\n * COOKIE BANNER\n * By Floris Verloop\n *\n * @framerSupportedLayoutWidth auto\n * @framerSupportedLayoutHeight auto\n *\n * @framerDisableUnlink\n *\n */export default function CookieBanner({gtmId,preview,trigger,banner,button,content,options,style,gtmLoadedExternally,onShown,onConsentChange,onAccept,onDismiss,onReject,onSavePreferences}){const isOnFramerCanvas=useIsOnFramerCanvas();const isPreview=preview&&isOnFramerCanvas;const skipLogic=!preview&&isOnFramerCanvas;const isInEU=isBrowser?inEU():false;// we ignore customer's GTM in preview because their specific setups can break the preview currently\n// this can be removed if we remove reliance on globals for react symbols in the preview\n// https://framer-team.slack.com/archives/C01J38GC2SW/p1770826268498759\nconst skipGTMId=isInFramerPreview();const gtmDefaults=useGTMDefaultConsent();const region=useRegion({content,useRegionFromProps:isPreview,// skip EU check (expensive) if we are on the canvas and don't want a preview\nskipEUCheck:skipLogic,regionFromGTM:gtmDefaults.region});const consent=useConsent({gtmId:skipGTMId?\"\":gtmId,defaultConsent:gtmDefaults.available?gtmDefaults.consent:region.defaults,gtmLoadedExternally,defaultsFromGTM:gtmDefaults.available});const[isOpen,setIsOpen]=useState(initiallyOpen);// On page switch, disable all transitions so the banner shows up as fast as possible.\nconst[instantlyShowOnMount,setInstantlyShowOnMount]=useState(initiallyOpen);useEffect(()=>{if(skipLogic)return;// Save open state between page switches\ninitiallyOpen=isOpen;// Disable instantly show on mount after first open\nif(isOpen){setInstantlyShowOnMount(false);}// Track shown event\nif(isOpen&&!isPreview&&onShown){yieldBeforeCb(()=>onShown({isInEU}),{priority:\"user-blocking\"});}},[isOpen,skipLogic]);// Check if user should be prompted\nuseEffect(()=>{if(skipLogic)return;const noConsentGiven=consent.isInitialized&&!consent.isDismissed;const shouldAutoAccept=region.type===\"simple\"&&!consent.isAutoAccepted;if(noConsentGiven){performance.mark(\"framer-cookie-open\");setIsOpen(true);/** Automatically accept all cookies for simple banner. */if(shouldAutoAccept){consent.autoAccept();// Fire callback\nif(onAccept){yieldBeforeCb(()=>onAccept({isInEU}));}}}if(consent.isDismissed){setIsOpen(false);}},[consent.isInitialized,consent.isDismissed,skipLogic]);useEffect(()=>{if(skipLogic)return;if(onConsentChange){yieldBeforeCb(()=>onConsentChange({isInEU,consent:consent.modes}));}},[consent.modes,skipLogic]);async function handleDismiss(){await interactionResponse();consent.dismiss();setIsOpen(false);// Fire callback\nif(onDismiss){yieldBeforeCb(()=>onDismiss({isInEU}));}}async function handleAcceptAll(){await interactionResponse();consent.acceptAll();setIsOpen(false);// Fire callback\nif(onAccept){yieldBeforeCb(()=>onAccept({isInEU}));}}async function handleRejectAll(){await interactionResponse();consent.rejectAll();setIsOpen(false);// Fire callback\nif(onReject){yieldBeforeCb(()=>onReject({isInEU}));}}async function handleAcceptCurrent(){await interactionResponse();consent.acceptCurrent();setIsOpen(false);// Fire callbacks\nyieldBeforeCb(()=>{if(onAccept){onAccept({isInEU});}});yieldBeforeCb(()=>{if(onSavePreferences){onSavePreferences({isInEU});}});}if(isPreview){return /*#__PURE__*/_jsx(\"div\",{style:{...style,width:banner.width},children:/*#__PURE__*/_jsx(Banner,{banner:banner,button:button,region:region,options:options,previewOptions:isPreview&&options.preview,consentModes:{...defaultConsent,necessary:true},animateOnMount:false})});}return /*#__PURE__*/_jsxs(_Fragment,{children:[/*#__PURE__*/_jsx(Trigger,{style:style,trigger:trigger,onClick:()=>setIsOpen(true)}),!skipLogic&&/*#__PURE__*/_jsx(Overlay,{banner:banner,button:button,region:region,options:options,consentModes:consent.modes,animateOnMount:!instantlyShowOnMount,onAcceptAll:handleAcceptAll,onAcceptCurrent:handleAcceptCurrent,onRejectAll:handleRejectAll,onDismiss:handleDismiss,onToggleConsent:consent.toggleMode,isOpen:isOpen})]});}function isInFramerPreview(){return RenderTarget.current()===RenderTarget.preview&&typeof window!==\"undefined\"&&window.origin?.endsWith(\".framercanvas.com\");}const IconCookie=/*#__PURE__*/lazy(()=>import(\"https://framerusercontent.com/modules/80EyUU0Nk6u7skW3IlHH/5dbuLOGDrS0SjHVtVyCR/Icons.js\"));function Overlay(props){const insetValue=props.banner.insetPerSide?`${props.banner.insetTop}px ${props.banner.insetRight}px ${props.banner.insetBottom}px ${props.banner.insetLeft}px`:`${props.banner.inset}px`;const{justifyContent,alignItems}=getFlexboxValues(props.banner.position);const isOpen=props.isOpen;const[shouldRenderPortal,setShouldRenderPortal]=useState(isOpen);// if the portal has previously been rendered, we want to keep rendering the portal, which ensures:\n// - that AnimatePresence works (fade out effect)\n// - we don't cause body style recalc/reflow when the DOM node is removed\nif(!shouldRenderPortal&&isOpen)setShouldRenderPortal(isOpen);if(!shouldRenderPortal)return null;const blocking=props.region.blocking;return /*#__PURE__*/createPortal(/*#__PURE__*/_jsx(\"div\",{style:{display:\"contents\"},children:/*#__PURE__*/_jsx(AnimatePresence,{children:isOpen?/*#__PURE__*/_jsxs(motion.div,{style:{// We only need to span to the full viewport width if the overlay is blocking.\n// Otherwise, we optimize for a smaller layer size. see: https://framer-team.slack.com/archives/C05V49Q4NJ2/p1709820207863249\ntop:blocking||alignItems===\"flex-start\"?0:undefined,left:blocking||justifyContent===\"flex-start\"?0:undefined,right:blocking||justifyContent===\"flex-end\"?0:undefined,height:blocking?\"100%\":undefined,width:blocking||justifyContent===\"center\"?\"100%\":undefined,bottom:blocking||alignItems===\"flex-end\"?0:undefined,boxSizing:\"border-box\",position:\"fixed\",touchAction:\"none\",padding:insetValue,zIndex:props.banner.zIndex,display:\"flex\",flexDirection:\"row\",gap:20,justifyContent:\"center\",pointerEvents:blocking?\"all\":\"none\"},children:[blocking&&/*#__PURE__*/_jsx(Backdrop,{color:props.banner.style?.backdrop}),/*#__PURE__*/_jsx(\"div\",{style:{width:\"100%\",height:\"100%\",display:\"flex\",justifyContent,alignItems,pointerEvents:\"none\",maxWidth:props.banner.containerWidth>0?props.banner.containerWidth:\"unset\"},children:/*#__PURE__*/_jsx(Banner,{...props})})]}):null})}),document.body);}const Trigger=withCSS(({trigger,style,onClick})=>{const isOnFramerCanvas=useIsOnFramerCanvas();if(trigger.type!==\"none\"){return /*#__PURE__*/_jsx(\"button\",{type:\"button\",className:\"__framer-cookie-component-button\",\"aria-label\":\"Cookie Trigger\",style:{width:\"100%\",height:\"100%\",background:\"none\",display:\"flex\",border:\"none\",padding:0,color:trigger.color,fontSize:16,cursor:\"pointer\",...trigger.textFont},onClick:onClick,children:trigger.type===\"icon\"?trigger.iconType===\"custom\"&&trigger.iconImage?/*#__PURE__*/_jsx(\"img\",{alt:\"\",src:trigger.iconImage.src,width:trigger.iconSize,height:trigger.iconSize}):/*#__PURE__*/_jsx(Suspense,{fallback:null,children:/*#__PURE__*/_jsx(IconCookie,{width:trigger.iconSize,height:trigger.iconSize,color:trigger.color})}):/*#__PURE__*/_jsx(\"span\",{style:{whiteSpace:\"nowrap\"},children:trigger.text})});}if(isOnFramerCanvas){return /*#__PURE__*/_jsxs(\"div\",{style:{borderRadius:8,color:\"#09F\",border:\"1px dashed #09F\",background:\"rgba(0, 153, 255, 0.1)\",padding:20,display:\"flex\",flexDirection:\"column\",gap:5,fontFamily:DEFAULT_FONT_FAMILY,textAlign:\"center\",justifyContent:\"center\",width:164,...style},children:[/*#__PURE__*/_jsx(\"p\",{style:{fontSize:12,fontWeight:600,lineHeight:1,margin:0},children:\"Cookie Banner\"}),/*#__PURE__*/_jsx(\"p\",{style:{fontSize:12,lineHeight:1.5,margin:0},children:\"Put on a page to add a Cookie Banner.\"})]});}},\".__framer-cookie-component-button:focus:not(:focus-visible){outline-color:transparent}\",\"framer-lib-cookie-trigger\");function Backdrop({color}){return /*#__PURE__*/_jsx(motion.div,{initial:{opacity:0},animate:{opacity:1},exit:{opacity:0},style:{position:\"absolute\",top:0,left:0,right:0,bottom:0,width:\"100%\",height:\"100%\",backgroundColor:color,pointerEvents:\"none\"}});}addPropertyControls(CookieBanner,{gtmId:{title:\"GTM ID\",type:ControlType.String,placeholder:\"GTM-AAAAAAA\",description:\"Your GTM container ID.\\n[Learn more](https://www.framer.com/learn/cookie-banner/)\"},preview:{type:ControlType.Boolean,defaultValue:true,description:\"Lets you preview the banner on the Canvas.\"},trigger:{type:ControlType.Object,buttonTitle:\"Icon, Text\",controls:{type:{title:\"Type\",type:ControlType.Enum,options:[\"text\",\"icon\",\"none\"],optionTitles:[\"Text\",\"Icon\",\"None\"],defaultValue:\"text\",displaySegmentedControl:true},iconType:{title:\"Icon\",type:ControlType.Enum,options:[\"default\",\"custom\"],optionTitles:[\"Default\",\"Custom\"],displaySegmentedControl:true,hidden:props=>props.type!==\"icon\"},text:{title:\"Label\",type:ControlType.String,defaultValue:\"Cookie Settings\",hidden:props=>props.type!==\"text\"},textFont:{// @ts-ignore - internal\ntype:ControlType.Font,title:\" \",controls:\"extended\",hidden:props=>props.type!==\"text\"},iconSize:{title:\"Size\",type:ControlType.Number,displayStepper:true,defaultValue:24,hidden:props=>props.type!==\"icon\"},color:{title:\"Color\",type:ControlType.Color,defaultValue:\"#333\",hidden:props=>props.type===\"none\"||props.type===\"icon\"&&props.iconType===\"custom\"},iconImage:{title:\"File\",type:ControlType.ResponsiveImage,allowedFileTypes:[\"jpg\",\"png\",\"svg\"],hidden:props=>props.iconType===\"default\"}}},banner:{title:\"Banner\",type:ControlType.Object,buttonTitle:\"Font, Styles\",controls:{position:{type:ControlType.Enum,title:\"Position\",options:[\"top-left\",\"top-center\",\"top-right\",\"bottom-right\",\"bottom-center\",\"bottom-left\"],optionTitles:[\"Top Left\",\"Top Center\",\"Top Right\",\"Bottom Right\",\"Bottom Center\",\"Bottom Left\"],defaultValue:\"bottom-right\"},zIndex:{title:\"Z Index\",type:ControlType.Number,defaultValue:10,displayStepper:true,min:0,max:10},width:{title:\"Width\",type:ControlType.Number,defaultValue:360,min:200,max:1e3,displayStepper:true,step:5},containerWidth:{title:\"Wrapping\",type:ControlType.Number,defaultValue:0,min:0},padding:{title:\"Padding\",type:ControlType.FusedNumber,toggleKey:\"paddingPerSide\",toggleTitles:[\"Padding\",\"Padding per side\"],defaultValue:20,valueKeys:[\"paddingTop\",\"paddingRight\",\"paddingBottom\",\"paddingLeft\"],valueLabels:[\"T\",\"R\",\"B\",\"L\"],min:0},inset:{title:\"Inset\",type:ControlType.FusedNumber,toggleKey:\"insetPerSide\",toggleTitles:[\"Inset\",\"Inset per side\"],defaultValue:20,valueKeys:[\"insetTop\",\"insetRight\",\"insetBottom\",\"insetLeft\"],valueLabels:[\"T\",\"R\",\"B\",\"L\"],min:0},style:{type:ControlType.Object,title:\"Style\",buttonTitle:\"Fonts, Colors, Shadow\",controls:{fontTitle:{// @ts-ignore - internal\ntype:ControlType.Font,title:\"Title\",controls:\"extended\"},colorTitle:{title:\" \",type:ControlType.Color,defaultValue:\"#000\"},fontBody:{// @ts-ignore - internal\ntype:ControlType.Font,title:\"Body\",controls:\"extended\"},colorBody:{title:\" \",type:ControlType.Color,defaultValue:\"#444\"},fill:{title:\"Fill\",type:ControlType.Color,defaultValue:\"#FFF\"},link:{title:\"Link\",type:ControlType.Color,optional:true,defaultValue:\"#999\"},border:{type:ControlType.Object,title:\"Border\",buttonTitle:\"Radius, Width\",controls:{radius:{title:\"Radius\",type:ControlType.Number,displayStepper:true,min:0,defaultValue:14},width:{title:\"Width\",type:ControlType.Number,displayStepper:true,min:0,defaultValue:1},color:{title:\"Color\",type:ControlType.Color,defaultValue:\"rgba(0,0,0,0.05)\"}}},shadow:{type:ControlType.Object,title:\"Shadow\",optional:true,controls:{shadowColor:{title:\"Color\",type:ControlType.Color,defaultValue:\"rgba(0,0,0,0.25)\"},shadowX:{title:\"X\",type:ControlType.Number,min:-100,max:100,defaultValue:0},shadowY:{title:\"Y\",type:ControlType.Number,min:-100,max:100,defaultValue:2},shadowBlur:{title:\"Blur\",type:ControlType.Number,min:0,max:100,defaultValue:4}}},backdrop:{title:\"Backdrop\",type:ControlType.Color,defaultValue:\"rgba(0,0,0,0.1)\",hidden:(_,props)=>!props.content.euBlocking&&!props.content.worldBlocking}}},animation:{icon:\"effect\",buttonTitle:\"Options\",type:ControlType.Object,controls:{x:{type:ControlType.Number,displayStepper:true,defaultValue:0},y:{type:ControlType.Number,displayStepper:true,defaultValue:10},scale:{type:ControlType.Number,min:0,step:.1,defaultValue:1},transition:{type:ControlType.Transition}}}}},button:{title:\"Buttons\",type:ControlType.Object,buttonTitle:\"Variants, Style\",controls:{primary:{title:\"Primary\",type:ControlType.Object,buttonTitle:\"Colors, Shadow\",controls:{fill:{title:\"Fill\",type:ControlType.Color,defaultValue:\"#000\"},color:{title:\"Color\",type:ControlType.Color,defaultValue:\"#FFF\"},shadow:{type:ControlType.Object,title:\"Shadow\",optional:true,controls:{shadowColor:{title:\"Color\",type:ControlType.Color,defaultValue:\"rgba(0,0,0,0.25)\"},shadowX:{title:\"X\",type:ControlType.Number,min:-100,max:100},shadowY:{title:\"Y\",type:ControlType.Number,min:-100,max:100},shadowBlur:{title:\"Blur\",type:ControlType.Number,min:0,max:100}}}}},secondary:{title:\"Secondary\",type:ControlType.Object,buttonTitle:\"Colors, Shadow\",controls:{fill:{title:\"Fill\",type:ControlType.Color,defaultValue:\"#EEE\"},color:{title:\"Color\",type:ControlType.Color,defaultValue:\"#444\"},shadow:{type:ControlType.Object,title:\"Shadow\",optional:true,controls:{shadowColor:{title:\"Color\",type:ControlType.Color,defaultValue:\"rgba(0,0,0,0.25)\"},shadowX:{title:\"X\",type:ControlType.Number,min:-100,max:100},shadowY:{title:\"Y\",type:ControlType.Number,min:-100,max:100},shadowBlur:{title:\"Blur\",type:ControlType.Number,min:0,max:100}}}}},labels:{type:ControlType.Object,controls:{accept:{type:ControlType.String,defaultValue:\"Accept\"},reject:{type:ControlType.String,defaultValue:\"Reject\"},acceptAll:{type:ControlType.String,defaultValue:\"Accept all\"},rejectAll:{type:ControlType.String,defaultValue:\"Reject all\"},customize:{type:ControlType.String,defaultValue:\"Customize\"},save:{type:ControlType.String,defaultValue:\"Save Preferences\"},confirm:{type:ControlType.String,defaultValue:\"Okay\"}}},font:{// @ts-ignore - internal\ntype:ControlType.Font,title:\"Font\",controls:\"extended\"},padding:{title:\"Padding\",type:ControlType.FusedNumber,toggleKey:\"paddingPerSide\",toggleTitles:[\"Padding\",\"Padding per side\"],defaultValue:10,valueKeys:[\"paddingTop\",\"paddingRight\",\"paddingBottom\",\"paddingLeft\"],valueLabels:[\"T\",\"R\",\"B\",\"L\"],min:0},borderRadius:{title:\"Radius\",type:ControlType.Number,displayStepper:true,min:0,defaultValue:8},tapOpacity:{title:\"Tap Opacity\",type:ControlType.Number,step:.1,displayStepper:true,max:1,min:0,defaultValue:.4},hoverOpacity:{title:\"Hover Opacity\",type:ControlType.Number,step:.1,displayStepper:true,max:1,min:0,defaultValue:.6},direction:{type:ControlType.Enum,title:\"Direction\",options:[\"row\",\"column\"],// @ts-ignore - internal\noptionIcons:[\"direction-horizontal\",\"direction-vertical\"],defaultValue:\"row\",displaySegmentedControl:true},fluid:{title:\"Fluid\",type:ControlType.Boolean,defaultValue:true}}},content:{title:\"Regions\",type:ControlType.Object,buttonTitle:\"World, EU\",controls:{isEU:{title:\" \",type:ControlType.Boolean,defaultValue:true,enabledTitle:\"EU\",disabledTitle:\"World\"},euType:{title:\"Choices\",type:ControlType.Enum,options:[\"simple\",\"medium\",\"advanced\"],optionTitles:[\"None\",\"Accept/Reject\",\"Customizable\"],defaultValue:\"medium\",hidden:props=>!props.isEU},euTitle:{title:\"Title\",type:ControlType.String,defaultValue:\"Cookie Settings\",hidden:props=>props.euType===\"simple\"||!props.isEU},euDescription:{title:\"Description\",type:ControlType.String,defaultValue:\"We use cookies to enhance your experience, analyze site traffic and deliver personalized content.\",displayTextArea:true,hidden:props=>!props.isEU},euPolicy:{title:\"Policy\",type:ControlType.Object,buttonTitle:\"Link, Prefix\",controls:{link:{title:\"Link\",type:ControlType.Link,defaultValue:\"https://www.framer.com/legal/policy/\"},prefix:{title:\"Prefix\",type:ControlType.String,defaultValue:\"Read our\"},label:{title:\"Label\",type:ControlType.String,defaultValue:\"Cookie Policy\"}},hidden:props=>!props.isEU},euDefaults:{title:\"Defaults\",buttonTitle:\"Options\",type:ControlType.Object,controls:{necessary:{type:ControlType.Boolean,enabledTitle:\"Granted\",disabledTitle:\"Denied\",defaultValue:true},preferences:{type:ControlType.Boolean,enabledTitle:\"Granted\",disabledTitle:\"Denied\",defaultValue:false},analytics:{type:ControlType.Boolean,enabledTitle:\"Granted\",disabledTitle:\"Denied\",defaultValue:false},marketing:{type:ControlType.Boolean,enabledTitle:\"Granted\",disabledTitle:\"Denied\",defaultValue:false,description:\"The default consent when the user hasn’t provided any yet.\"}},hidden:props=>!props.isEU},euShowReject:{title:\"Reject All\",type:ControlType.Boolean,defaultValue:true,enabledTitle:\"Show\",disabledTitle:\"Hide\",hidden:props=>props.euType!==\"advanced\"},euBlocking:{title:\"Blocking\",type:ControlType.Boolean,defaultValue:false,description:\"Renders a content blocking backdrop.\",hidden:props=>!props.isEU},worldType:{title:\"Choices\",type:ControlType.Enum,options:[\"simple\",\"medium\",\"advanced\"],optionTitles:[\"None\",\"Accept/Reject\",\"Customizable\"],defaultValue:\"simple\",hidden:props=>props.isEU},worldTitle:{title:\"Title\",type:ControlType.String,defaultValue:\"Cookie Settings\",hidden:props=>props.worldType===\"simple\"||props.isEU},worldDescription:{title:\"Description\",type:ControlType.String,defaultValue:\"We use cookies to personalize content, run ads, and analyze traffic.\",displayTextArea:true,hidden:props=>props.isEU},worldPolicy:{title:\"Policy\",type:ControlType.Object,buttonTitle:\"Link, Prefix\",controls:{link:{title:\"Link\",type:ControlType.Link},prefix:{title:\"Prefix\",type:ControlType.String,defaultValue:\"Read our\"},label:{title:\"Label\",type:ControlType.String,defaultValue:\"Cookie Policy\"}},hidden:props=>props.isEU},worldDefaults:{title:\"Defaults\",buttonTitle:\"Options\",type:ControlType.Object,controls:{necessary:{type:ControlType.Boolean,enabledTitle:\"Granted\",disabledTitle:\"Denied\",defaultValue:true},preferences:{type:ControlType.Boolean,enabledTitle:\"Granted\",disabledTitle:\"Denied\",defaultValue:true},analytics:{type:ControlType.Boolean,enabledTitle:\"Granted\",disabledTitle:\"Denied\",defaultValue:true},marketing:{type:ControlType.Boolean,enabledTitle:\"Granted\",disabledTitle:\"Denied\",defaultValue:true,description:\"The default consent when the user hasn’t provided any yet.\"}},hidden:props=>props.isEU},worldShowReject:{title:\"Reject All\",type:ControlType.Boolean,defaultValue:true,enabledTitle:\"Show\",disabledTitle:\"Hide\",hidden:props=>props.worldType!==\"advanced\"},worldBlocking:{title:\"Blocking\",type:ControlType.Boolean,defaultValue:false,description:\"Renders a content blocking backdrop.\",hidden:props=>props.isEU}}},options:{type:ControlType.Object,buttonTitle:\"Content, Styles\",hidden:(_,props)=>props.content.euType!==\"advanced\"&&props.content.worldType!==\"advanced\",controls:{preview:{type:ControlType.Boolean,defaultValue:false,description:\"Open when previewing banner on the canvas.\",hidden:(_,props)=>!props.preview},necessary:{title:\"Necessary\",type:ControlType.Object,buttonTitle:\"Content\",controls:{title:{title:\"Title\",type:ControlType.String,defaultValue:\"Necessary\"},description:{title:\"Description\",type:ControlType.String,defaultValue:\"Enables security and basic functionality.\",displayTextArea:true},optional:{title:\"Optional\",type:ControlType.Boolean,defaultValue:true}}},preferences:{title:\"Preferences\",type:ControlType.Object,buttonTitle:\"Content\",controls:{title:{title:\"Title\",type:ControlType.String,defaultValue:\"Preferences\"},description:{title:\"Description\",type:ControlType.String,defaultValue:\"Enables personalized content and settings.\",displayTextArea:true,optional:true}}},analytics:{title:\"Analytics\",type:ControlType.Object,buttonTitle:\"Content\",controls:{title:{title:\"Title\",type:ControlType.String,defaultValue:\"Analytics\"},description:{title:\"Description\",type:ControlType.String,defaultValue:\"Enables tracking of performance.\",displayTextArea:true}}},marketing:{title:\"Marketing\",type:ControlType.Object,buttonTitle:\"Content\",controls:{title:{title:\"Title\",type:ControlType.String,defaultValue:\"Marketing\"},description:{title:\"Description\",type:ControlType.String,defaultValue:\"Enables ads personalization and tracking.\",displayTextArea:true}}},style:{type:ControlType.Object,title:\"Style\",buttonTitle:\"Fonts, Colors\",controls:{fontTitle:{// @ts-ignore - internal\ntype:ControlType.Font,title:\"Title\",controls:\"basic\"},fontBody:{// @ts-ignore - internal\ntype:ControlType.Font,title:\"Body\",controls:\"basic\"},background:{title:\"Background\",type:ControlType.Color,defaultValue:\"rgba(0,0,0,0.02)\"},border:{type:ControlType.Object,title:\"Border\",buttonTitle:\"Radius, Width\",controls:{radius:{title:\"Radius\",type:ControlType.Number,displayStepper:true,min:0,defaultValue:8},width:{title:\"Width\",type:ControlType.Number,displayStepper:true},color:{title:\"Color\",type:ControlType.Color,defaultValue:\"rgba(0,0,0,0.02)\"}}},toggleColor:{title:\"On\",type:ControlType.Color,defaultValue:\"#000\"},toggleColorInactive:{title:\"Off\",type:ControlType.Color,defaultValue:\"rgba(0,0,0,0.1)\"},padding:{title:\"Padding\",type:ControlType.FusedNumber,toggleKey:\"paddingPerSide\",toggleTitles:[\"Padding\",\"Padding per side\"],defaultValue:12,valueKeys:[\"paddingTop\",\"paddingRight\",\"paddingBottom\",\"paddingLeft\"],valueLabels:[\"T\",\"R\",\"B\",\"L\"],min:0}}}}}});CookieBanner.displayName=\"Cookie Banner\";\nexport const __FramerMetadata__ = {\"exports\":{\"default\":{\"type\":\"reactComponent\",\"name\":\"CookieBanner\",\"slots\":[],\"annotations\":{\"framerSupportedLayoutWidth\":\"auto\",\"framerSupportedLayoutHeight\":\"auto\",\"framerDisableUnlink\":\"*\",\"framerContractVersion\":\"1\"}},\"ContentProps\":{\"type\":\"tsType\",\"annotations\":{\"framerContractVersion\":\"1\"}},\"OptionsStyle\":{\"type\":\"tsType\",\"annotations\":{\"framerContractVersion\":\"1\"}},\"ContentType\":{\"type\":\"tsType\",\"annotations\":{\"framerContractVersion\":\"1\"}},\"PolicyProps\":{\"type\":\"tsType\",\"annotations\":{\"framerContractVersion\":\"1\"}},\"ButtonsProps\":{\"type\":\"tsType\",\"annotations\":{\"framerContractVersion\":\"1\"}},\"FontProps\":{\"type\":\"tsType\",\"annotations\":{\"framerContractVersion\":\"1\"}},\"CookieBannerProps\":{\"type\":\"tsType\",\"annotations\":{\"framerContractVersion\":\"1\"}},\"__FramerMetadata__\":{\"type\":\"variable\"}}}\n//# sourceMappingURL=./Cookies.map","export const getFilterValue=(property,options)=>{if(property.startsWith(\"variant_\")){return{type:\"variant\",value:{[property]:options.value}};}switch(property){case\"product_type\":case\"product_tag\":case\"collection\":return{type:property,value:options.value};case\"price\":return{type:\"price\",// value: options.price_ranges.map((range: string) => {\n// const [min, max] = range.split('-').map(Number);\n// return { min, max };\n// }),\nvalue:options.values.map(value=>{if(value.priceType===\"Under\"){return{min:null,max:value.max}// Handle \"Under\" case\n;}else if(value.priceType===\"Over\"){return{min:value.min,max:null}// Handle \"Over\" case\n;}else{const[min,max]=value.split(\"-\").map(Number);return{min,max}// Handle regular range\n;}})};case\"discount_amount\":return{type:\"discount_amount\",value:options.discount_amount_min?{min:options.discount_amount_min,max:options.discount_amount_max}:options.discount_amount};case\"discount_percent\":return{type:\"discount_percent\",value:options.discount_percent_min?{min:options.discount_percent_min,max:options.discount_percent_max}:options.discount_percent};case\"on_sale\":case\"in_stock\":case\"bundle\":case\"subscription\":return{type:property,value:options.value===\"true\"};default:return{type:property,value:\"\"};}};/**\n * Convert legacy filter names to new format and vice versa\n */export const convertFilterName=(name,toLegacy=false)=>{//console.log('convertFilterName input:', name, 'toLegacy:', toLegacy);\nconst mappings={// New format to legacy format\nproduct_type:\"product-type\",product_tag:\"product-tag\",on_sale:\"on-sale\",in_stock:\"in-stock\",bundle:\"bundles\",subscription:\"subscriptions\"};if(toLegacy){const result=mappings[name]||name;//console.log('convertFilterName output (toLegacy):', result);\nreturn result;}else{// Legacy format to new format\nconst reverseMappings={};Object.entries(mappings).forEach(([key,value])=>{reverseMappings[value]=key;});const result=reverseMappings[name]||name;//console.log('convertFilterName output (fromLegacy):', result);\nreturn result;}};/**\n * Parses URL parameters and converts them into filter state\n *\n * URL format conventions:\n * 1. Between different filter types: Always use AND logic with separate parameters\n * (e.g., ?product_type=shirts&collection=summer)\n *\n * 2. Within the same filter type:\n * - For collection, product_type, product_tag: Use comma-separated values for OR logic\n * (e.g., ?product_type=shirts,pants,jackets means products that are shirts OR pants OR jackets)\n * - For variant filters:\n * a) Comma-separated values indicate OR logic\n * (e.g., ?variant_color=blue,red,green means blue OR red OR green)\n * b) Repeated parameters indicate AND logic\n * (e.g., ?variant_color=blue&variant_size=large means blue AND large)\n */export const parseUrlFilters=urlParams=>{// Disabled excessive logging that was causing performance issues\n// console.log(\"Parsing URL filters from:\", urlParams.toString());\nconst filters={collection:{active:false,values:[]},product_type:{active:false,values:[]},product_tag:{active:false,values:[]},variant:{active:false,values:[]},variant_Color:{active:false,value:null},price:{active:false,values:[]},discount_amount:{active:false,values:[]},discount_percent:{active:false,values:[]},on_sale:{active:false,value:true},in_stock:{active:false,value:true},bundle:{active:false,value:true},subscription:{active:false,value:true}};[\"collection\",\"product_type\",\"product_tag\",\"product-type\",\"product-tag\"].forEach(filterType=>{const value=urlParams.get(filterType);if(value){const normalizedType=convertFilterName(filterType);//console.log(`Found filter ${filterType}, normalized to ${normalizedType}:`, value);\n// Split by comma for OR logic between values\nconst values=value.split(\",\").filter(Boolean);filters[normalizedType].values=values;filters[normalizedType].active=values.length>0;}});// Process variant filters (variant_color, variant_size, etc.)\n// Support both comma-separated values (OR logic) and multiple params with same name (AND logic between different options)\nArray.from(urlParams.keys()).forEach(key=>{if(key.startsWith(\"variant_\")){const variantName=key.replace(\"variant_\",\"\");const value=urlParams.get(key);if(value){// Decode the value first to handle any URL encoding\nconst decodedValue=decodeURIComponent(value);// Special handling for color filter\nif(variantName.toLowerCase()===\"color\"){filters.variant_Color.active=true;filters.variant_Color.value=decodedValue.trim();}// Log the variant filter values being processed\n// console.log(`Parsing variant filter ${key}:`, {\n// rawValue: value,\n// decodedValue,\n// isMultiValue: decodedValue.includes(',')\n// });\n// Split by comma for OR logic between values of the same option\nconst values=decodedValue.split(\",\").filter(Boolean);// Each value is an OR option for this variant type\nvalues.forEach(val=>{filters.variant.values.push({name:variantName,value:val.trim()});});// console.log(`Found variant filter ${key}:`, {\n// values,\n// orLogic: \"Values within same variant type use OR logic\"\n// });\n}}});filters.variant.active=filters.variant.values.length>0;// Process price filters\nconst priceRanges=urlParams.get(\"price\");const priceMax=urlParams.get(\"price_max\");const priceMin=urlParams.get(\"price_min\");filters.price={active:false,values:[]};if(priceRanges){// Handle regular price ranges\nconst ranges=priceRanges.split(\",\").map(range=>{const[min,max]=range.split(\"-\").map(Number);return{min,max,priceType:\"Range\"};});filters.price.values.push(...ranges);filters.price.active=true;}if(priceMax){// Handle \"Under\" price ranges\nconst maxValues=priceMax.split(\",\").map(Number);const underRanges=maxValues.map(max=>({min:null,max,priceType:\"Under\"}));filters.price.values.push(...underRanges);filters.price.active=true;}// Handle \"Over\" price ranges\nif(priceMin){const minValues=priceMin.split(\",\").map(Number);minValues.forEach(min=>{filters.price.values.push({min,max:null,priceType:\"Over\"});});filters.price.active=true;}// Process discount filters\nconst discountAmount=urlParams.get(\"discount_amount\");if(discountAmount){const ranges=discountAmount.split(\",\").map(range=>{const[min,max]=range.split(\"-\").map(Number);return{min,max};});filters.discount_amount={active:true,values:ranges};}const discountAmountMin=urlParams.get(\"discount_amount_min\");if(discountAmountMin){const minValues=discountAmountMin.split(\",\").map(Number);if(!filters.discount_amount){filters.discount_amount={active:true,values:[]};}// Add each min value as a range with null max\nminValues.forEach(min=>{filters.discount_amount.values.push({min,max:null});});filters.discount_amount.active=true;}const discountPercent=urlParams.get(\"discount_percent\");if(discountPercent){const ranges=discountPercent.split(\",\").map(range=>{const[min,max]=range.split(\"-\").map(Number);return{min,max};});filters.discount_percent={active:true,values:ranges};}const discountPercentMin=urlParams.get(\"discount_percent_min\");if(discountPercentMin){const minValues=discountPercentMin.split(\",\").map(Number);if(!filters.discount_percent){filters.discount_percent={active:true,values:[]};}// Add each min value as a range with null max\nminValues.forEach(min=>{filters.discount_percent.values.push({min,max:null});});filters.discount_percent.active=true;}[\"on_sale\",\"in_stock\",\"bundle\",\"subscription\"].forEach(filterType=>{const value=urlParams.get(filterType);if(value===\"true\"){filters[filterType]={active:true,value:true};}});return filters;};/**\n * Updates URL parameters based on current filter state\n *\n * URL format conventions:\n * 1. Between different filter types: Always use AND logic with separate parameters\n *\n * 2. Within the same filter type:\n * - For collection, product_type, product_tag: Use comma-separated values for OR logic\n * - For variant filters:\n * a) Group variants by name and use comma-separated values for OR logic within same variant type\n * b) Different variant types use AND logic with separate parameters\n */export const updateUrlWithFilters=(filters,url)=>{//console.log(\"Updating URL with filters:\", filters);\n// Clear existing filter params\nArray.from(url.searchParams.keys()).filter(key=>key.startsWith(\"variant_\")||[\"product_type\",\"product_tag\",\"collection\",\"price\",\"price_min\",\"price_max\",\"discount_amount\",\"discount_amount_min\",\"discount_percent\",\"discount_percent_min\",\"on_sale\",\"in_stock\",\"bundle\",\"subscription\",// Also include legacy filter names\n \"product-type\",\"product-tag\",\"on-sale\",\"in-stock\",\"bundles\",\"subscriptions\"].includes(key)).forEach(key=>url.searchParams.delete(key));[\"collection\",\"product_type\",\"product_tag\"].forEach(filterType=>{if(filters[filterType]?.active&&filters[filterType]?.values?.length>0){url.searchParams.set(filterType,filters[filterType].values.join(\",\"));//console.log(`Set URL param ${filterType}=`, filters[filterType].values.join(','));\n}});// Add variant filters\n// Group variant values by name, and each group uses comma-separated values for OR logic\nif(filters.variant?.active&&filters.variant?.values?.length>0){// Group variant values by name\nconst variantGroups={};filters.variant.values.forEach(variant=>{// Use lowercase name for case-insensitive grouping\nconst normalizeName=`variant_${variant.name}`;if(!variantGroups[normalizeName]){variantGroups[normalizeName]=[];}// Avoid adding duplicate values\nif(!variantGroups[normalizeName].some(v=>v.toLowerCase()===variant.value.toLowerCase())){variantGroups[normalizeName].push(variant.value);}});// Add each variant group to URL with comma-separated values (OR logic)\nObject.entries(variantGroups).forEach(([key,values])=>{// Don't encode the values here as URLSearchParams will handle that\nurl.searchParams.set(key,values.join(\",\"));//console.log(`Set URL param ${key}=`, values.join(','), '(OR logic between values)');\n});}// Add price filters\nif(filters.price?.active&&filters.price.values?.length>0){// const regularRanges = [];\n// const underMaxValues = [];\n// const overMinValues = [];\nconst regularRanges=[];const underMaxValues=[];const overMinValues=[];filters.price.values.forEach(range=>{if(range.priceType===\"Under\"){underMaxValues.push(range.max);}else if(range.priceType===\"Over\"){overMinValues.push(range.min);}else{regularRanges.push(`${range.min}-${range.max}`);}});if(regularRanges.length>0){url.searchParams.set(\"price\",regularRanges.join(\",\"));}if(underMaxValues.length>0){url.searchParams.set(\"price_max\",underMaxValues.join(\",\"));}if(overMinValues.length>0){url.searchParams.set(\"price_min\",overMinValues.join(\",\"));}}// Add discount filters\nif(filters.discount_amount?.active&&filters.discount_amount.values?.length>0){const discountRanges=[];const discountMinValues=[];filters.discount_amount.values.forEach(range=>{if(range.max===null){// This is an \"Over\" type discount\ndiscountMinValues.push(range.min);}else{// This is a regular range\ndiscountRanges.push(`${range.min}-${range.max}`);}});if(discountRanges.length>0){url.searchParams.set(\"discount_amount\",discountRanges.join(\",\"));}if(discountMinValues.length>0){url.searchParams.set(\"discount_amount_min\",discountMinValues.join(\",\"));}}if(filters.discount_percent?.active&&filters.discount_percent.values?.length>0){const discountPercentRanges=[];const discountPercentMinValues=[];filters.discount_percent.values.forEach(range=>{if(range.max===null){// This is an \"Over\" type discount\ndiscountPercentMinValues.push(range.min);}else{// This is a regular range\ndiscountPercentRanges.push(`${range.min}-${range.max}`);}});if(discountPercentRanges.length>0){url.searchParams.set(\"discount_percent\",discountPercentRanges.join(\",\"));}if(discountPercentMinValues.length>0){url.searchParams.set(\"discount_percent_min\",discountPercentMinValues.join(\",\"));}}[\"on_sale\",\"in_stock\",\"bundle\",\"subscription\"].forEach(filterType=>{if(filters[filterType]?.active){url.searchParams.set(filterType,\"true\");}});};\nexport const __FramerMetadata__ = {\"exports\":{\"FilterValue\":{\"type\":\"tsType\",\"annotations\":{\"framerContractVersion\":\"1\"}},\"getFilterValue\":{\"type\":\"variable\",\"annotations\":{\"framerContractVersion\":\"1\"}},\"parseUrlFilters\":{\"type\":\"variable\",\"annotations\":{\"framerContractVersion\":\"1\"}},\"updateUrlWithFilters\":{\"type\":\"variable\",\"annotations\":{\"framerContractVersion\":\"1\"}},\"convertFilterName\":{\"type\":\"variable\",\"annotations\":{\"framerContractVersion\":\"1\"}},\"__FramerMetadata__\":{\"type\":\"variable\"}}}\n//# sourceMappingURL=./filterMappings.map","/*\n * Framer Commerce\n * Confidential and Proprietary - All Rights Reserved\n * Unauthorized use, reproduction, distribution, or disclosure of this\n * source code or any related information is strictly prohibited.\n *\n * This software is the exclusive property of Framer Commerce (\"Company\").\n * It is considered highly confidential and proprietary information.\n *\n * Any use, copying, modification, distribution, or sharing of this software,\n * in whole or in part, without the express written permission of the Company\n * is strictly prohibited and may result in legal action.\n *\n * DISCLAIMER: This software does not provide any express or\n * implied warranties, including, but not limited to, the implied warranties\n * of merchantability and fitness for a particular purpose. In no event shall\n * Framer Commerce be liable for any direct, indirect, incidental, special,\n * exemplary, or consequential damages (including, but not limited to, procurement\n * of substitute goods or services; loss of use, data, or profits; or business\n * interruption) however caused and on any theory of liability, whether in\n * contract, strict liability, or tort (including negligence or otherwise)\n * arising in any way out of the use of this software, even if advised of\n * the possibility of such damage.\n *\n * Any unauthorized possession, use, copying, distribution, or dissemination\n * of this software will be considered a breach of confidentiality and may\n * result in legal action.\n *\n * For inquiries, contact:\n * Framer Commerce\n * Email: hello@framercommerce.com\n *\n * © 2025 Butter Supply Inc. All Rights Reserved.\n */function _define_property(obj,key,value){if(key in obj){Object.defineProperty(obj,key,{value:value,enumerable:true,configurable:true,writable:true});}else{obj[key]=value;}return obj;}import{jsx as _jsx,jsxs as _jsxs}from\"react/jsx-runtime\";import*as React from\"react\";import{addPropertyControls,ControlType,RenderTarget}from\"framer\";import{debounce}from\"lodash-es\";import{parseUrlFilters}from\"https://framerusercontent.com/modules/A55TPw8oJtDToWtsjcDZ/rm89gWVDrPnML7Vtbv1c/filterMappings.js\";// Global state management to prevent duplicate instances\nconst globalSortState={instances:new Set,eventListeners:new Map,cleanup:()=>{globalSortState.instances.clear();globalSortState.eventListeners.forEach((listener,event)=>{window.removeEventListener(event,listener);});globalSortState.eventListeners.clear();},lastUrl:typeof window!==\"undefined\"?window.location.href:\"\",isBackToFilter:false};// Ensure cleanup on page unload\nif(typeof window!==\"undefined\"){window.addEventListener(\"beforeunload\",globalSortState.cleanup);}// Helper function to find 13-digit number\nfunction findDeep13DigitNumber(obj){if(typeof obj===\"string\"){const match=obj.match(/\\d{12,}/);if(match)return match[0];return null;}if(!obj||typeof obj!==\"object\")return null;for(const key in obj){if(Array.isArray(obj[key])||typeof obj[key]===\"object\"){const found=findDeep13DigitNumber(obj[key]);if(found)return found;}else if(typeof obj[key]===\"string\"){const match=obj[key].match(/\\d{12,}/);if(match)return match[0];}}return null;}class ErrorBoundary extends React.Component{static getDerivedStateFromError(error){return{hasError:true,error};}componentDidCatch(error,errorInfo){}render(){if(this.state.hasError){return /*#__PURE__*/_jsx(\"div\",{style:{padding:20,color:\"red\"},children:\"Something went wrong loading the CMS content.\"});}// @ts-ignore: TypeScript doesn't recognize props in this context\nreturn this.props.children;}constructor(props){super(props);_define_property(this,\"state\",{hasError:false,error:null});}}// Let's add a helper function for consistent logging\nconst logDebug=(component,action,data)=>{// console.log intentionally disabled\n};// [DUPLICATE_VARIANTS_LOGIC_DISABLED] Interface for duplicated products\n// interface DuplicatedProduct {\n// originalProduct: Product\n// variant: ProductVariant\n// uniqueId: string // Combination of product ID + variant ID\n// displayPrice: {\n// amount: string\n// currencyCode: string\n// }\n// displayCompareAtPrice?: {\n// amount: string\n// currencyCode: string\n// }\n// selectedOptions: Array<{\n// name: string\n// value: string\n// }>\n// }\n// Helper function to get active search fields based on scope settings\nfunction getActiveSearchFields(scope){const fields=[];if(scope?.title)fields.push(\"title\");if(scope?.productType)fields.push(\"productType\");if(scope?.productTag)fields.push(\"tags\");if(scope?.collection)fields.push(\"collections\");if(scope?.vendor)fields.push(\"vendor\");if(scope?.variants)fields.push(\"variants\");return fields;}// [DUPLICATE_VARIANTS_LOGIC_DISABLED] Function to process products for variant duplication\n// function processProductsForVariantDuplication(\n// products: Array<{ node: any }>,\n// variantTitles: string[]\n// ): DuplicatedProduct[] {\n// console.log(\"🔄 Processing products for variant duplication:\", {\n// totalProducts: products.length,\n// variantTitles,\n// sampleProduct: products[0]?.node,\n// })\n// const duplicatedProducts: DuplicatedProduct[] = []\n// products.forEach(({ node: product }) => {\n// if (!product.variants?.edges) {\n// console.log(`⚠️ Product \"${product.title}\" has no variants`)\n// return\n// }\n// console.log(`🔍 Checking product \"${product.title}\" variants:`, {\n// totalVariants: product.variants?.edges?.length || 0,\n// variantOptions: product.variants?.edges?.map(({ node: v }) =>\n// v.selectedOptions?.map((opt) => `${opt.name}: ${opt.value}`) || []\n// ) || [],\n// })\n// // Get all variants that match the specified variant titles\n// const matchingVariants = product.variants.edges.filter(\n// ({ node: variant }) => {\n// const hasMatchingOption = variant.selectedOptions.some(\n// (option) => variantTitles.includes(option.name)\n// )\n// console.log(\n// ` Variant ${variant.id}: ${hasMatchingOption ? \"✅\" : \"❌\"} matches ${variantTitles.join(\", \")}`\n// )\n// return hasMatchingOption\n// }\n// )\n// console.log(\n// `📊 Found ${matchingVariants.length} matching variants for \"${product.title}\"`\n// )\n// // If no matching variants found, include the original product once\n// if (matchingVariants.length === 0) {\n// console.log(\n// `⚠️ No variants match \"${variantTitles.join(\", \")}\" for \"${product.title}\" - including original product`\n// )\n// // Create a single entry for the original product\n// duplicatedProducts.push({\n// originalProduct: product,\n// variant: product.variants.edges[0]?.node || null, // Use first variant as default\n// uniqueId: product.id, // Use original product ID\n// displayPrice: product.priceRange?.minVariantPrice || {\n// amount: \"0\",\n// currencyCode: \"USD\",\n// },\n// displayCompareAtPrice:\n// product.compareAtPriceRange?.minVariantPrice,\n// selectedOptions:\n// product.variants.edges[0]?.node?.selectedOptions || [],\n// })\n// console.log(\n// `✅ Created original product entry for \"${product.title}\"`\n// )\n// return\n// }\n// // Group variants by unique values for the specified variant titles only\n// const uniqueVariantGroups = new Map()\n// matchingVariants.forEach(({ node: variant }) => {\n// // Create a key based on the specified variant titles only\n// const variantKey = variant.selectedOptions\n// .filter((option) => variantTitles.includes(option.name))\n// .map((option) => `${option.name}:${option.value}`)\n// .sort()\n// .join(\"|\")\n// if (!uniqueVariantGroups.has(variantKey)) {\n// uniqueVariantGroups.set(variantKey, [])\n// }\n// uniqueVariantGroups.get(variantKey).push(variant)\n// })\n// console.log(\n// `🎯 Found ${uniqueVariantGroups.size} unique ${variantTitles.join(\", \")} combinations for \"${product.title}\"`\n// )\n// // Create a duplicated product for each unique variant group\n// uniqueVariantGroups.forEach((variants, variantKey) => {\n// // Use the first variant from each group as the representative\n// const representativeVariant = variants[0]\n// console.log(\n// `✅ Creating duplicate for \"${product.title}\" - ${variantKey}`\n// )\n// duplicatedProducts.push({\n// originalProduct: product,\n// variant: representativeVariant,\n// uniqueId: `${product.id}_${representativeVariant.id}`,\n// displayPrice: representativeVariant.price ||\n// product.priceRange?.minVariantPrice || {\n// amount: \"0\",\n// currencyCode: \"USD\",\n// },\n// displayCompareAtPrice:\n// representativeVariant.compareAtPrice ||\n// product.compareAtPriceRange?.minVariantPrice,\n// selectedOptions: representativeVariant.selectedOptions,\n// })\n// })\n// })\n// console.log(\n// `🎯 Total duplicated products created: ${duplicatedProducts.length}`\n// )\n// return duplicatedProducts\n// }\n/**\n * @framerDisableUnlink\n */export default function FC_CatalogDisplay(props){// State declarations at the top of the component\nconst[isLoading,setIsLoading]=React.useState(true);const[sortedChildren,setSortedChildren]=React.useState(null);const[products,setProducts]=React.useState([]);// [DUPLICATE_VARIANTS_LOGIC_DISABLED] State for duplicated products\n// const [duplicatedProducts, setDuplicatedProducts] = React.useState<\n// DuplicatedProduct[]\n// >([])\nconst[duplicatedProducts,setDuplicatedProducts]=React.useState([]);const[favorites,setFavorites]=React.useState([]);const[isTransitioning,setIsTransitioning]=React.useState(false);const[isSettling,setIsSettling]=React.useState(false);// console.log(\"🚨🚨🚨 COMPONENT MOUNTED 🚨🚨🚨\", {\n// hasCollection: !!props.Collection,\n// hasProducts:\n// typeof window !== \"undefined\" && !!window.shopXtools?.products,\n// url: typeof window !== \"undefined\" ? window.location.href : null,\n// })\n// Keep a log of component initialization\nlogDebug(\"ProductSort\",\"Component initializing\",{props:Object.keys(props)});const{Collection,pageType,Metafields}=props;const includeMetafields=Metafields?.include||false;const transitionTimeoutRef=React.useRef(null);const settlingTimeoutRef=React.useRef(null);const lastUpdateRef=React.useRef(null);const urlParams=typeof window!==\"undefined\"?new URLSearchParams(window.location.search):new URLSearchParams;// Add pagination state\nconst[currentPage,setCurrentPage]=React.useState(()=>{if(typeof window!==\"undefined\"){const pageParam=urlParams.get(\"page\");return pageParam?parseInt(pageParam):1;}return 1;});const[hasMore,setHasMore]=React.useState(false);const observerRef=React.useRef(null);const loadMoreRef=React.useRef(null);// Calculate itemsPerPage from props (will update when prop changes)\nconst itemsPerPage=React.useMemo(()=>props.Pagination?.items||8,[props.Pagination?.items]);// Add state to maintain full product list\nconst[allProducts,setAllProducts]=React.useState([]);const[displayedProducts,setDisplayedProducts]=React.useState([]);// Track total filtered count (before pagination) for result counter\nconst[totalFilteredCount,setTotalFilteredCount]=React.useState(0);// Add search state\nconst[searchConfig,setSearchConfig]=React.useState(()=>{// Initialize from URL parameter if it exists\nif(typeof window!==\"undefined\"){const urlParams=new URLSearchParams(window.location.search);const searchParam=urlParams.get(\"search\");// console.log(\"🔍 Initializing search from URL:\", {\n// url: window.location.href,\n// searchParam,\n// allParams: Object.fromEntries(urlParams.entries()),\n// })\nif(searchParam){return{term:searchParam,fields:getActiveSearchFields(props.Search?.Scope),active:true};}}return{term:\"\",fields:getActiveSearchFields(props.Search?.Scope),active:false};});// Add effect to update search fields when scope changes\nReact.useEffect(()=>{setSearchConfig(prev=>({...prev,fields:getActiveSearchFields(props.Search?.Scope)}));},[props.Search?.Scope]);// Adjust initial state based on search settings\nReact.useEffect(()=>{if(props.Search.initialSearchState===\"none\"&&props.Search.enableSearch&&!searchConfig.term){// console.log(\"Applying initial 'none' state\")\nsetSortedChildren([])// Start with no products displayed\n;// Disable pagination buttons for both load more and next/prev types because there are no products to display\nsetTimeout(()=>{if(props.Pagination?.type===\"load_more\"){const hasMoreItemsEvent=new CustomEvent(\"hide-loadmore-button\",{detail:{hasMoreItems:false}});document.dispatchEvent(hasMoreItemsEvent);//console.log(\"hide-loadmore-button dispatched (delayed)\", hasMoreItemsEvent);\n}else if(props.Pagination?.type===\"next_prev\"){const updateNextPrevButtonsEvent=new CustomEvent(\"update_next_prev_buttons\",{detail:{hasMoreItems:false,type:props.Pagination?.type,currentPage:1}});document.dispatchEvent(updateNextPrevButtonsEvent);//console.log(\"update_next_prev_buttons dispatched (delayed)\", updateNextPrevButtonsEvent);\n}},100)// 100ms delay to ensure listeners are attached\n;}},[props.Search.initialSearchState,props.Search.enableSearch,searchConfig.term]);// Function to get paginated products\nconst getPaginatedProducts=React.useCallback(products=>{if(!props.Pagination?.enable||!Array.isArray(products))return products;let startIndex,endIndex,paginatedProducts;switch(props.Pagination.type){case\"load_more\":// For Load More, show all items up to current page\nstartIndex=0;endIndex=currentPage*itemsPerPage;paginatedProducts=products.slice(startIndex,endIndex);const hasMoreLoadMore=endIndex $0 USD $0 USD