https://www.newamsterdamsurf.com/_next/static/chunks/3309.e11f198060e01383.js

1"use strict";(self.webpackChunk_N_E=self.webpackChunk_N_E||[]).push([[3309],{3309:(e,l,t)=>{t.r(l),t.d(l,{default:()=>J});var a=t(7876),s=t(872),r=t(8497),n=t(4879),i=t(2748),c=t(9832),o=t(4232),u=t(3948),d=t(1361),x=t(5039),p=t.n(x),m=t(2940),v=t.n(m),h=t(6894),f=t(5264),g=t(8477);let j=e=>{let{id:l,children:t}=e,a=(0,o.useRef)(!0);if(a.current)return a.current=!1,null;let s=document.querySelector("#".concat(l));return s?(0,g.createPortal)(t,s):null};var b=t(7714),y=function(e){return e.LEFT="left",e.RIGHT="right",e}({});let N=e=>{var l;let{isOpen:t,onClose:s,direction:r="right",className:n,children:i}=e,c=(0,o.useRef)(null),[u,d]=(0,o.useState)(t),[x,m]=(0,o.useState)(t);return(0,o.useEffect)(()=>d(t),[t]),(0,o.useEffect)(()=>{function e(e){"Escape"===e.key&&s(!1)}return document.addEventListener("keydown",e),()=>{document.removeEventListener("keydown",e)}},[s]),(0,a.jsx)(j,{id:"drawer",children:(0,a.jsxs)(a.Fragment,{children:[(0,a.jsx)(h.FocusTrap,{active:u&&x,focusTrapOptions:{fallbackFocus:null!=(l=c.current)?l:void 0,allowOutsideClick:!0},children:(0,a.jsx)(f.P.nav,{ref:c,initial:"hide",animate:u?"show":"hide",variants:{show:{x:"0%"},hide:{x:"right"===r?"100%":"-100%"}},transition:{duration:.6,ease:[.16,1,.3,1]},onAnimationComplete:()=>m(u),className:p()("fixed top-0 w-full h-screen max-w-3xl z-90 font-sans bg-pageBG pointer-events-none transition-visibility",{"right-0":"right"===r,"left-0":"left"===r,invisible:!u,"visible pointer-events-auto transition delay-[0s]":u},n),children:(0,a.jsx)("div",{className:"flex flex-col relative h-full w-full",children:i})},"drawer")}),(0,a.jsx)(b.A,{isOpen:t,onClick:()=>s(!1)})]})})};var w=t(7501),k=t(2776),C=t(7997),A=t(9426);let F=e=>{var l;let{option:t,activeFilter:s,isGrid:r,updateParameters:n}=e,i=null!=(l=null==s?void 0:s.values)?l:[],c=i.includes(t.slug.current),o="swatch"===t.type;return(0,a.jsx)("div",{className:p()("w-full",{"inline-flex flex-col w-auto":o,"border text-center transition-colors duration-200":r,"bg-pageText text-pageBG border-pageText":r&&c}),children:(0,a.jsxs)("div",{className:"flex flex-col relative text-left",children:[(0,a.jsx)("input",{id:"filter-".concat(t.slug.current),name:null==s?void 0:s.name,type:"checkbox",value:t.slug.current,checked:c,onChange:e=>{if(!s)return;let l=i.includes(e.target.value)?i.filter(l=>l!==e.target.value):[...i,e.target.value];n([{name:s.name,value:l.length>0?l.join():null}])},className:"sr-only"}),(0,a.jsxs)("label",{htmlFor:"filter-".concat(t.slug.current),className:p()("relative cursor-pointer",{"inline-flex items-center gap-x-2":!r,"block text-center p-2":r}),children:[(0,a.jsxs)("div",{className:p()("relative",{hidden:r}),children:[o&&t.color&&(0,a.jsx)(A.A,{label:t.title,color:t.color,isActive:c,children:(0,a.jsx)(C.R,{isChecked:c,className:p()("absolute left-1/2 top-1/2 -translate-y-1/2 -translate-x-1/2 bg-transparent border-none",{"bg-transparent":c&&o}),pathStyle:{color:"var(--swatchBorder)"}})}),!o&&(0,a.jsx)(C.R,{isChecked:c,className:p()({"delay-150":!c,"delay-0":c})})]}),(0,a.jsx)("div",{className:"text-sm",children:t.title})]})]})})},L=e=>{var l,t;let{group:s,activeFilter:r,updateParameters:n}=e,i=s._key,c=null!=(t=null==r||null==(l=r.values)?void 0:l.length)?t:0,o="grid"===s.display;return(0,a.jsx)(k.A,{id:i,className:"border-gray",title:(0,a.jsx)(a.Fragment,{children:(0,a.jsxs)("span",{id:"filter-group-".concat(i),children:[s.title," ",c>0&&"(".concat(c,")")]})}),children:(0,a.jsx)("div",{role:"group","aria-labelledby":"filter-group-".concat(i),className:p()("px-3 pt-1 pb-4",{"flex flex-wrap gap-y-3 justify-items-start":!o,"grid grid-cols-3 gap-4":o}),children:s.options.map((e,l)=>(0,a.jsx)(F,{option:e,activeFilter:r,isGrid:o,updateParameters:n},l))})})},E=e=>{var l;let{filterGroups:t,activeFilters:s=[],activeFilterValueCount:r,itemTotal:n,updateParameters:i}=e,c=(0,o.useContext)(d.A),[x,m]=(0,o.useState)(!1);return(0,a.jsxs)(a.Fragment,{children:[(0,a.jsxs)("button",{onClick:()=>m(!0),className:"relative text-left text-xs uppercase inline-flex items-center gap-x-2 leading-none",children:[c.collectionShowFiltersLabel," ",r>0?"(".concat(r,")"):"",(0,a.jsx)(w.A,{id:"filter-button",name:"Filter",className:"shrink-0"})]}),(0,a.jsxs)(N,{direction:y.LEFT,isOpen:x,onClose:()=>

1m(!1),className:p()("max-w-md sm:max-w-sm font-sans",v().variable),children:[(0,a.jsxs)("div",{className:"container flex gap-x-2 items-center justify-between py-6",children:[(0,a.jsxs)("div",{className:"flex items-center is-h3",children:[c.collectionFilters," ",r>0?"(".concat(r,")"):""]}),(0,a.jsxs)("div",{className:"flex items-center gap-x-6",children:[r>0&&(0,a.jsx)(u.Ay,{variant:u.Ak.LINK,onClick:()=>{i(s.map(e=>({name:e.name,value:null})))},className:"uppercase",children:c.collectionClearAllLabel}),(0,a.jsx)("button",{className:"",onClick:()=>m(!1),children:(0,a.jsx)(w.A,{id:"close-filters",name:"Cross",className:"w-3.5 h-3.5"})})]})]}),(0,a.jsx)("div",{className:"flex-1 flex flex-col overflow-y-auto",children:t.map(e=>(0,a.jsx)(L,{group:e,activeFilter:s.find(l=>l.name===e.slug.current),updateParameters:i},e._key))}),(0,a.jsx)("div",{className:"container py-4 border-t border-gray",children:(0,a.jsx)(u.Ay,{variant:u.Ak.FILLED,disabled:0===n,onClick:()=>m(!1),className:"w-full",children:n>0?null==(l=c.collectionFilterResultsLabel)?void 0:l.replace(/{count}/gi,"".concat(n)):c.collectionFilterNoResultsLabel})})]})]})};var P=t(8969),S=t(6377),O=t(7053);let R=e=>{var l;let{id:t,name:s,label:r,options:n,activeOption:i,before:c,after:u,updateParameters:d,className:x}=e,m=(0,o.useRef)(null),[v,g]=(0,o.useState)(!1),j=null!=(l=n.find(e=>e.type===i))?l:n[0];function b(e){var l;e.target&&(null==(l=m.current)?void 0:l.contains(e.target))||g(!1)}function y(e){let l=!1;"Escape"===e.code&&(g(!1),l=!0),l&&(e.stopPropagation(),e.preventDefault())}return(0,o.useEffect)(()=>(document.addEventListener("mousedown",b),()=>{document.removeEventListener("mousedown",b)}),[]),(0,o.useEffect)(()=>(v&&document.addEventListener("keydown",y),()=>{document.removeEventListener("keydown",y)}),[v]),(0,a.jsxs)("div",{ref:m,className:p()("flex relative z-20",x),children:[(0,a.jsx)("span",{id:"".concat(t,"-label"),className:"sr-only",children:r}),(0,a.jsxs)("button",{onClick:()=>g(!v),"aria-expanded":v,"aria-labelledby":"".concat(t,"-label"),className:"text-xs uppercase leading-none",children:[c,null==j?void 0:j.title,u]}),(0,a.jsx)(P.N,{initial:!1,children:v&&(0,a.jsx)(h.FocusTrap,{focusTrapOptions:{clickOutsideDeactivates:!0,preventScroll:!0},children:(0,a.jsx)("div",{className:"absolute top-[calc(100%+14px)] overflow-hidden right-0",children:(0,a.jsx)(f.P.div,{initial:"hide",animate:"show",exit:"hide",variants:{show:{y:"0%"},hide:{y:"-100%"}},transition:{duration:.6,ease:[.16,1,.3,1]},className:"bg-pageBG overflow-hidden whitespace-nowrap",children:(0,a.jsx)(S.A,{value:j.type,onChange:e=>{d([{name:s,value:e}]),g(!1)},role:"listbox",className:"flex flex-col p-2 border border-gray",children:n.map((e,l)=>(0,a.jsx)(O.A,{value:e.type,role:"option","aria-selected":e.type===j.type?"true":"false",className:p()("text-xs uppercase text-left p-1"),children:e.title},l))})})})})})]})},T=e=>{let{sortOptions:l,activeSortValue:t,updateParameters:s}=e,r=(0,o.useContext)(d.A);return(0,a.jsx)(R,{id:"collection-sort",name:"sort",label:r.collectionSortDescription,options:l,activeOption:t,updateParameters:s,before:"".concat(r.collectionSortLabel,": ")})},B=e=>{var l,t,s;let{filter:n,sort:i,processedProductCount:c,paginatedProcessedProductCount:x,filterGroups:m,activeFilters:v,activeParameters:h,updateParameters:f}=e,g=(0,o.useContext)(d.A),j=!!(null==n?void 0:n.isActive),b=!!(null==i?void 0:i.isActive),y=(0,r.JN)(h),N=v.reduce((e,l)=>e+l.values.length,0);return(0,a.jsxs)("div",{className:"container flex flex-col sm:flex-row sm:items-center border-b border-gray bg-pageBG bg-opacity-95",children:[j&&(0,a.jsxs)("div",{className:"flex items-center py-3.5 w-full sm:w-auto",children:[(0,a.jsx)(E,{filterGroups:m,activeFilters:v,activeFilterValueCount:N,itemTotal:c,updateParameters:f}),N>0&&(0,a.jsx)(u.Ay,{variant:u.Ak.LINK,onClick:()=>{f(v.map(e=>({name:e.name,value:null})))},className:"uppercase ml-auto sm:ml-4",children:g.collectionClearAllLabel})]}),(0,a.jsx)("div",{className:"grow"}),(0,a.jsxs)("div",{className:p()("flex items-center border-gray w-full sm:w-auto",{"border-t sm:border-t-0 py-3.5 sm:py-0":j,"py-3.5":!j}),children:[c>0&&(0,a.jsx)("span",{"aria-live":"polite",role:"status","aria-atomic":"true",className:"text-xs text-gray-dark leading-none",children:null==(t=g.collectionProductCount)||null==(l=t.replace(/{count}/gi,"".concat(x)))?void 0:l.replace(/{total}/gi,"".concat(c))}),(0,a.jsx)("div",{className:"grow"}),b&&i&&(0,a.jsx)("div",{className:"ml-auto sm:ml-3",children:(0,a.jsx)(T,{sortOptions:null!=(s=i.options)?s:[],activeSortValue:y,updateParameters:f})})]})]})};var G=t(8413);let M=e=>{var l;let{title:t,isFilterActive:s,processedProductCount:r,hasPagination:n,clearFilters:i,loadMore:c}=e,x=(0,o.useContext)(d.A);return(0,a.jsxs)("div",{className:"container",children:[0===r&&(0,a.jsxs)("div",{className:"space-y-3 py-16 text-center",children:[(0,a.jsx)(G.A,{content:x.collectionFilterNoResults}),s&&(0,a.jsx)(u.Ay,{variant:u.Ak.LINK,onClick:i,className:"uppercase",children:x.collectionClearFiltersLabel})]}),n&&(0,a.jsx)("div",{className:"py-12 flex flex-col items-center",children:(0,a.jsxs)(u.Ay,{variant:u.Ak.FILLED,onClick:c,className:"w-full max-w-md",children:[x.buttonLoadMore,(0,a.jsx)("span",{className:"sr-only",children:null==(l=x.collectionProducts)?void 0:l.replace(/{title}/gi,t?""".concat(t,"""):"")})]})})]})};var I=t(2442),_=t(7363);let D=e=>

1{let{productCardRef:l,productCount:t,products:s,filters:r,parameters:n}=e;return(0,a.jsx)("div",{className:p()("grid grid-cols-2 md:grid-cols-3 lg:grid-cols-4",{"grid-cols-1":0===t}),children:s.map((e,t)=>{let s=(0,I.t2)(e),i=n.filter(e=>"page"!==e.name).map(e=>e.value).filter(Boolean).join("-");return(0,a.jsx)(_.A,{ref:e=>{l.current[t]=e},product:e,preferredOption:e.preferredOption,filters:r,showThumbnails:!0,showOption:!0,showPrice:!0},"".concat(t,"-").concat(s,"-").concat(i))})})},q=e=>{let{isActive:l,onClick:t,children:s}=e;return(0,a.jsx)("button",{onClick:t,className:p()("text-xs uppercase leading-none whitespace-nowrap",{"text-gray-dark":!l}),children:s})},z=()=>{let{quickFilterEnabled:e,quickFilterSelectedValue:l,quickFilterOptions:t,setQuickFilterValue:s}=(0,o.useContext)(i.o),r=(0,o.useContext)(d.A);return e&&0!==t.length?(0,a.jsxs)("div",{className:p()("container flex items-center justify-start gap-4 py-3.5","border-b border-gray bg-pageBG bg-opacity-95","overflow-x-auto no-scrollbar"),children:[(0,a.jsx)("button",{onClick:()=>s(null),className:p()("text-xs uppercase leading-none",{"text-gray-dark":null!==l}),children:r.collectionQuickFilterAllLabel}),t.map(e=>(0,a.jsx)(q,{isActive:l===e.value,onClick:()=>s(e.value),children:e.title},e.value))]}):null},J=e=>{var l;let{title:t,featuredProductIds:u,paginationLimit:d,sort:x,filter:p,className:m}=e,{collectionProducts:v,activeCollectionUrlParameters:h,defaultSortOption:f,filterGroups:g,updateCollectionUrlParameters:j}=(0,o.useContext)(n.N),{quickFilterOptions:b,quickFilterSelectedValue:y}

1=(0,o.useContext)(i.o),{headerHeight:N}=(0,o.useContext)(c.MQ),[w,k]=(0,o.useState)(d>0&&v.length>d),[C,A]=(0,o.useState)(w?d:v.length),F=(0,o.useRef)([]),L=(0,r.JN)(h),E=(0,o.useMemo)(()=>h.filter(e=>!["page","sort"].includes(e.name)).map((0,r.p0)(g)),[h,g]),P=(0,o.useMemo)(()=>E.reduce((e,l)=>null!=e?e:l.productIds,void 0),[E]),S=(0,o.useMemo)(()=>{let e=b.find(e=>e.value===y);return null==e?void 0:e.featuredProductIds},[b,y]),O=(0,r.he)(v,E),R=(0,r.JX)(O,null!=L?L:f,null!=(l=null!=S?S:P)?l:u),T=(0,o.useMemo)(()=>[...R.slice(0,C)],[C,R]);(0,o.useEffect)(()=>{var e;let l=h.find(e=>"page"===e.name),t=Number(null!=(e=(0,s.bQ)(null==l?void 0:l.value))?e:1),a=R.length,r=Math.ceil(a/d);if(t<=1||t>r)return;let n=(0,s.BS)(d*t,1,a);n!==C&&A(n)},[h,C,d,R]),(0,o.useEffect)(()=>{var e,l;let t=C<R.length?C-d:R.length-1;null==(l=F.current[t])||null==(e=l.querySelector("[href]"))||e.focus({preventScroll:!0})},[C,d,R.length]),(0,o.useEffect)(()=>k(C<R.length),[C,R]);let G=(0,o.useCallback)(()=>{let e=(0,s.BS)(C+d,1,R.length),l=Math.ceil(e/d);A(e),j([{name:"page",value:l>1?"".concat(l):null}])},[C,d,R,j]);return 0===v.length?null:(0,a.jsxs)("section",{className:m,children:[!!t&&(0,a.jsx)("div",{className:"container flex justify-between pt-10 pb-2.5 border-b border-gray",children:(0,a.jsx)("h1",{children:t})}

1),(0,a.jsxs)("div",{className:"sticky z-10",style:{top:N},children:[(0,a.jsx)(z,{}),(0,a.jsx)(B,{filter:p,sort:x,processedProductCount:R.length,paginatedProcessedProductCount:T.length,activeFilters:E,filterGroups:g,activeParameters:h,updateParameters:j})]}),(0,a.jsx)(D,{productCardRef:F,productCount:R.length,products:T,filters:E,parameters:h}),(0,a.jsx)(M,{title:t,isFilterActive:!!(null==p?void 0:p.isActive),processedProductCount:R.length,hasPagination:w,clearFilters:()=>{j(E.map(e=>({name:e.name,value:null})))},loadMore:G})]})}}}]);
2//# sourceMappingURL=3309.e11f198060e01383.js.map