1(self.webpackChunk_N_E=self.webpackChunk_N_E||[]).push([[6557,7589,2705],{86557:function(e,t,n){"use strict";n.r(t),n.d(t,{Default:function(){return a},Reserve:function(){return s}});let r={title:"Components/Feature Carousel",component:n(77589).default,parameters:{layout:"fullscreen",backgrounds:{default:"dark"}}};t.default=r;let a={args:{heading:{heading:"What's on",headingLevel:"h2"},summary:{markup:"<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt.</p>"},backgroundImage:{url:"/media/fcmfz2z0/vertical-carousel-2.png",name:"Vertical Carousel 2",width:1440,height:880,altText:"Card Media Image 2"},showAnimatedGrass:!0,testimonialSlides:[{image:{url:"/media/hihbg1ye/card-media-image-2.jpeg",name:"Card Media Image 2",width:1280,height:854,altText:"Card Media Image 2"},title:{markup:"<p>âWe had such fun! Itâs great to know that weâre also helping giraffes in the wild too!â</p>"},text:{markup:"<p>Josephine Moodie, member since 2017.</p>"}},{image:{url:"/media/hihbg1ye/card-media-image-2.jpeg",name:"Card Media Image 2",width:1280,height:854,altText:"Card Media Image 2"},title:{markup:"<p>âWe had such fun! Itâs great to know that weâre also helping giraffes in the wild too!â</p>"},text:{markup:"<p>Josephine Moodie, member since 2017.</p>"}}]}},s={args:{...a.args,backgroundImage:{url:"/media/lxdjp20a/pexels-photo-227380.jpg",name:"Feature Carousel Reserve",width:1200,height:800,altText:"Feature Carousel Reserve"},showAnimatedGrass:!1,isReserveTheme:!0},parameters:{backgrounds:{default:"reserve"}}}},77589:function(e,t,n){"use strict";n.r(t),n.d(t,{default:function(){return m}});var r=n(57437),a=n(66648),s=n(44839),l=n(37776),i=n(54477),o=n(83015),c=n(82441),d=n(53700);n(42705);var u=n(1921);function m(e){let{heading:t,summary:n,backgroundImage:m,showAnimatedGrass:h,testimonialSlides:g,isReserveTheme:p=!1}=e,f=(null==m?void 0:m.focalPoint)?(0,c.Z)(m.focalPoint):"center",v=e=>{var t,n;return(0,r.jsx)("div",{className:"relative flex justify-center",children:(0,r.jsxs)("div",{className:(0,s.Z)("grid gap-y-3 ms:gap-y-6 lg:gap-9 max-w-[328px] lg:max-w-[426px] pt-5 px-5 pb-6 lg:pb-10 bg-primary-light",p?"rounded":"rounded-xl lg:rou
1nded-3xl"),children:[(0,r.jsx)("div",{className:(0,s.Z)("aspect-[36/29] ms:aspect-[17/10] overflow-hidden",p?"rounded":"rounded-xl"),children:(0,r.jsx)(a.default,{className:"w-full h-full object-cover object-center",src:e.image.url+"?width=560",alt:e.image.altText,width:e.image.width,height:e.image.height})}),(0,r.jsxs)("div",{className:"text-center",children:[(0,r.jsx)("div",{className:(0,s.Z)("font-czoo-sharp-grotesk heading heading-4",p?"text-reserve-dark":"text-primary-dark"),dangerouslySetInnerHTML:{__html:null===(t=e.title)||void 0===t?void 0:t.markup}}),e.text&&(0,r.jsx)("div",{className:(0,s.Z)("body-xs pt-2 lg:pt-4",p?"text-reserve-dark":"text-primary-dark-1"),dangerouslySetInnerHTML:{__html:null===(n=e.text)||void 0===n?void 0:n.markup}})]})]})})};return(0,r.jsxs)(u.Z,{className:"feature-carousel relative flex flex-col justify-center",headingExcluded:!(null==t?void 0:t.heading),children:[h&&(0,r.jsx)(d.default,{}),(0,r.jsxs)("div",{className:"overflow-hidden",children:[(null==t?void 0:t.heading)&&(0,r.jsxs)("header",{className:"container relative text-center mb-6 lg:mb-10 pointer-events-none",children:[t.headingCategory&&t.showTag&&(0,r.jsx)("div",{className:"flex justify-center mb-3 md:mb-4",children:(0,r.jsx)(o.Z,{name:t.headingCategory.name,link:t.headingCategory.link})}),(0,r.jsx)(i.Z,{level:null==t?void 0:t.headingLevel,size:"heading-2",margin:"mb-0",children:t.heading}),n&&(0,r.jsx)("div",{className:"rte body-base pt-4",dangerouslySetInnerHTML:{__html:n.markup}})]}),(0,r.jsxs)("div",{className:"relative",children:[(0,r.jsx)("div",{className:"absolute top-0 left-1/2 ms:container ms:grid ms:grid-cols-12 ms:gap-4 2xl:gap-6 w-full h-[350px] lg:h-[500px] -translate-x-1/2",children:(0,r.jsx)("div",{className:(0,s.Z)("ms:col-start-2 ms:col-span-10 overflow-hidden",p?"rounded":"ms:rounded-3xl"),children:(0,r.jsx)(a.default,{className:"w-full h-full object-cover object-center",src:m.url+"?width=1200",alt:m.altText,width:m.width,height:m.height,style:{objectPosition:f}})})}),(0,r.jsx)("div",{className:"pt-24 lg:pt-20",children:(0,r.jsxs)("div",{className:"container h-full",children:[g.length>1&&(0,r.jsx)(l.EmblaCarousel,{arrowButtons:!0,dotButtons:!0,options:{align:"center",slidesToScroll:1},children:g.map((e,t)=>(0,r.jsx)(l.EmblaCarouselSlide,{children:v(e)},t))}),1===g.length&&(0,r.jsx)(r.Fragment,{children:v(g[0])})]})})]})]})]})}},37776:function(e,t,n){"use strict";n.r(t),n.d(t,{EmblaCarousel:function(){return g},EmblaCarouselSlide:function(){return h}});var r=n(57437),a=n(2265),s=n(74300),l=n(19281),i=n(95243),o=n(30286),c=n(44839);let d=e=>{let[t,n]=(0,a.useState)(!0),[r,s]=(0,a.useState)(!0),l=(0,a.useCallback)(()=>{e&&e.scrollPrev()},[e]),i=(0,a.useCallback)(()=>{e&&e.scrollNext()},[e]),o=(0,a.useCallback)(e=>{n(!e.canScrollPrev()),s(!e.canScrollNext())},[]);return(0,a.useEffect)(()=>{e&&(o(e),e.on("reInit",o).on("select",o))},[e,o]),{prevBtnDisabled:t,nextBtnDisabled:r,onPrevButtonClick:l,onNextButtonClick:i}},u=e=>{let{children:t,...n}=e,[s,l]=(0,a.useState)(!1);return(0,r.jsxs)("button",{className:(0,c.Z)("embla__button embla__button--next flex items-center justify-center w-12 h-12 bg-primary-light/75 rounded-full outline-none cursor-pointer pointer-events-auto transition-colors hover:bg-primary-light active:bg-primary-accent disabled:bg-primary-light/50 disabled:pointer-events-none",s&&"!bg-primary-accent"),type:"button",onMouseDown:()=>l(!0),onMouseUp:()=>setTimeout(()=>l(!1),150),onMouseLeave:()=>l(!1),...n,children:[(0,r.jsx)("div",{className:"mr-1",children:(0,r.jsx)("svg",{xmlns:"http://www.w3.org/2000/svg",width:"15",height:"24",viewBox:"0 0 15 24",children:(0,r.jsx)("path",{d:"M-1.84048e-06 8.42105L15 0L15 3.53684C15 6.69474 14.3852 6.57895 12.2459 7.74737L4.92787 11.9789L12.3639 16.2526C14.3852 17.3684 15 17.2632 15 20.5895L15 24L-3.39338e-06 15.5263L-1.84048e-06 8.42105Z",fill:"#002526"})})}),t]})},m=e=>{let{children:t,...n}=e,[s,l]=(0,a.useState)(!1);return(0,r.jsxs)("button",{className:(0,c.Z)("embla__button embla__button--next flex items-center justify-center w-12 h-12 bg-primary-light/75 rounded-full outline-none cursor-pointer pointer-events-auto transition-colors hover:bg-primary-light active:bg-primary-accent disabled:bg-primary-light/50 disabled:pointer-events-none",s&&"!bg-primary-accent"),type:"button",onMouseDown:()=>l(!0),onMouseUp:()=>setTimeout(()=>l(!1),150),onMouseLeave:()=>l(!1),...n,children:[(0,r.jsx)("div",{className:"ml-1",children:(0,r.jsx)("svg",{xmlns:"http://www.w3.org/2000/svg",width:"15",height:"24",viewBox:"0 0 15 24",children:(0,r.jsx)("path",{d:"M15 15.5789L0 24L4.22846e-08 20.4632C8.00386e-08 17.3053 0.614754 17.4211 2.7541 16.2526L10.0721 12.0211L2.63606 7.74737C0.614754 6.63158 2.06228e-07 6.73684 2.45996e-07 3.41052L2.8677e-07 0L15 8.47368L15 15.5789Z",fill:"#002526"})})}),t]})};n(31375);let h=(0,a.forwardRef)((e,t)=>(0,r.jsx)("div",{ref:t,className:"embla__slide",...e,children:e.children}));h.displayName="EmblaCarouselSlide";let g=e=>{let{children:t,arrowButtons:n=!1,dotButtons:c=!1,autoScroll:h=null,handleSlideInView:g,onBlur:p,onMouseEnter:f,onArrowButtonClick:v,onPointerDown:x,onPointerUp:b,setApi:j,options:w={}}=e,[y,N]=(0,s.Z)(w,(()=>{let e=[(0,i.Z)()];return h&&e.push((0,l.Z)(h)),e})());(0,a.useEffect)(()=>{N&&j&&j(N)},[N,j]);let{selectedIndex:k,scrollSnaps:C,onDotButtonClick:_}=(0,o.Y)(N),{prevBtnDisabled:L,nextBtnDisabled:E,onPrevButtonClick:S,onNextButtonClick:I}=d(N),Z=(0,a.useCallback)(()=>{N&&v&&v(N),S()},[N,v,S]),M=(0,a.useCallback)(()=>{N&&v&&v(N),I()},[N,v,I]),[T,R]=(0,a.useState)(!1),{isIntersecting:F,ref:P}=function(){var e;let{threshold:t=0,root:n=null,rootMargin:r="0%",freezeOnceVisible:s=!1,initialIsIntersecting:l=!1,onChange:i}=arguments.length>0&&void 0!==arguments[0]?arguments[0]:{},[o,c]=(0,a.useState)(null),[d,u]=(0,a.useState)(()=>({isIntersecting:l,entry:void 0})),m=(0,a.useRef)();m.current=i;let h=(null===(e=d.entry)||void 0===e?void 0:e.isIntersecting)&&s;(0,a.useEffect)(()=>{let e;if(!o||!("IntersectionObserver"in window)||h)return;let a=new IntersectionObserver(t=>{let n=Array.isArray(a.thresholds)?a.thresholds:[a.thresholds];t.forEach(t=>{let r=t.isIntersecting&&n.some(e=>t.intersectionRatio>=e);u({isIntersecting:r,entry:t}),m.current&&m.current(r,t),r&&s&&e&&(e(),e=void 0)})},{threshold:t,root:n,rootMargin:r});return a.observe(o),()=>{a.disconnect()}},[o,JSON.stringify(t),n,r,h,s]);let g=(0,a.useRef)(null);(0,a.useEffect)(()=>{var e;o||null===(e=d.entry)||void 0===e||!e.target||s||h||g.current===d.entry.target||(g.current=d.entry.target,u({isIntersecting:l,entry:void 0}))},[o,d.entry,s,h,l]);let p=[c,!!d.isIntersecting,d.entry];return p.ref=p[0],p.isIntersecting=p[1],p.entry=p[2],p}();return(0,a.useEffect)(()=>{var e;if(!h)return;let t=null==N?void 0:null===(e=N.plugins())||void 0===e?void 0:e.autoScroll;t&&(F?(R(!0),t.play()):(R(!1),t.stop()))},[h,N,F]),(0,a.useEffect)(()=>{var e;let t=null==N?void 0:null===(e=N.plugins())||void 0===e?void 0:e.autoScroll;t&&(R(t.isPlaying()),N.on("autoScroll:play",()=>R(!0)).on("autoScroll:stop",()=>R(!1)).on("reInit",()=>R(t.isPlaying())))}
1,[N]),(0,a.useEffect)(()=>{g&&N&&N.on("slidesInView",()=>{g(N.slidesInView())})},[g,N]),(0,a.useEffect)(()=>{if(!p||!N)return;let e=N.rootNode(),t=()=>p(N),n=t=>{e.contains(t.relatedTarget)||p(N)};return e.addEventListener("mouseleave",t),e.addEventListener("focusout",n),()=>{e.removeEventListener("mouseleave",t),e.removeEventListener("focusout",n)}},[p,N]),(0,a.useEffect)(()=>{if(!f||!N)return;let e=N.rootNode(),t=()=>f(N);return e.addEventListener("mouseenter",t),()=>{e.removeEventListener("mouseenter",t)}},[f,N]),(0,a.useEffect)(()=>{if(!x||!N)return;let e=()=>x(N);return N.on("pointerDown",e),()=>{N.off("pointerDown",e)}},[x,N]),(0,a.useEffect)(()=>{if(!b||!N)return;let e=()=>b(N);return N.on("pointerUp",e),()=>{N.off("pointerUp",e)}},[b,N]),(0,r.jsxs)("div",{className:"embla",ref:P,children:[(0,r.jsx)("div",{className:"embla__viewport",ref:y,children:(0,r.jsx)("div",{className:"embla__container",children:t})}),(c||n)&&(0,r.jsxs)("div",{className:"embla__controls",children:[n&&(0,r.jsxs)("div",{className:"embla__buttons absolute top-1/2 left-0 max-w-container justify-between w-full px-10 pointer-events-none -translate-y-1/2",children:[(0,r.jsx)(u,{onClick:Z,disabled:L}),(0,r.jsx)(m,{onClick:M,disabled:E})]}),c&&(0,r.jsx)("div",{className:"embla__dots",children:C.map((e,t)=>(0,r.jsx)(o.H,{className:"embla__dot".concat(t===k?" embla__dot--selected":""),onClick:()=>_(t)},t))})]})]})}},30286:function(e,t,n){"use strict";n.d(t,{H:function(){return l},Y:function(){return s}});var r=n(57437),a=n(2265);let s=e=>{let[t,n]=(0,a.useState)(0),[r,s]=(0,a.useState)([]),l=(0,a.useCallback)(t=>{e&&e.scrollTo(t)},[e]),i=(0,a.useCallback)(e=>{s(e.scrollSnapList())},[]),o=(0,a.useCallback)(e=>{n(e.selectedScrollSnap())},[]);return(0,a.useEffect)(()=>{e&&(i(e),o(e),e.on("reInit",i).on("reInit",o).on("select",o))},[e,i,o]),{selectedIndex:t,scrollSnaps:r,onDotButtonClick:l}},l=e=>{let{children:t,...n}=e;return(0,r.jsx)("button",{type:"button",...n,children:t})}},1921:function(e,t,n){"use strict";var r=n(57437),a=n(44839);t.Z=e=>{let{children:t,className:n,headingExcluded:s,style:l,hidePaddingOnMobile:i}=e;return(0,r.jsx)("div",{className:(0,a.Z)("component-section",s&&"heading-excluded",i&&"hide-padding-on-mobile",n),style:l,children:t})}},83015:function(e,t,n){"use strict";n.d(t,{Z:function(){return i}});var r=n(57437),a=n(87138),s=n(44839),l=n(77220);function i(e){let{name:t,link:n,target:i="_self"}=e,o=(0,s.Z)("parent-tag relative flex items-center py-1",n&&"pl-6 pr-2",!n&&"px-2","rounded transition-colors focus:outline focus:outline-1 focus:outline-offset-2");return(0,r.jsx)(r.Fragment,{children:n?(0,r.jsxs)(a.default,{className:o,href:(0,l.n)(n),target:i,children:[(0,r.jsx)("span",{className:"parent-tag-icon absolute top-1/2 left-2 w-[11px] h-3 bg-center bg-cover bg-no-repeat -translate-y-2/4"}),(0,r.jsx)("span",{className:"parent-tag-text font-czoo-sharp-grotesk text-base leading-4 uppercase tracking-wider",children:t})]}):(0,r.jsx)("div",{className:o,children:(0,r.jsx)("span",{className:"parent-tag-text font-czoo-sharp-grotesk text-base leading-4 uppercase tracking-wider",children:t})})})}n(99033)},82441:function(e,t,n){"use strict";function r(e){let{left:t,top:n}=e,r="".concat((100*t).toFixed(2),"%"),a="".concat((100*n).toFixed(2),"%");return"".concat(r," ").concat(a)}n.d(t,{Z:function(){return r}})},42705:function(){},31375:function(){},99033:function(){}}]);
Line numbers count LF bytes from the start of the resource, as the search results do. Vendor segments are library code the classifier recognised; they are stored but not indexed. Bytes are shown as Latin1 characters, one per byte.