@dropins/storefront-pdp 0.3.0 → 0.4.0-beta1

package/components/Product/Product.d.ts

@@ -23,6 +23,7 @@ export interface ProductProps extends Omit<HTMLAttributes<HTMLDivElement>, 'titl
     actions?: VNode;
     quantity?: VNode;
     carouselConfig?: ProductCarouselConfig;
+    zoomType?: 'zoom' | 'overlay';
 }
 export declare const Product: FunctionComponent<ProductProps>;
 export {};

package/components/Zoom/Zoom.d.ts

@@ -0,0 +1,8 @@
+import { FunctionComponent, VNode } from 'preact';
+
+export interface ZoomProps {
+    children: VNode[] | VNode;
+    scale?: number;
+}
+export declare const Zoom: FunctionComponent<ZoomProps>;
+//# sourceMappingURL=Zoom.d.ts.map

package/components/Zoom/index.d.ts

@@ -0,0 +1,3 @@
+export * from './Zoom';
+export { Zoom as default } from './Zoom';
+//# sourceMappingURL=index.d.ts.map

package/components/index.d.ts

@@ -4,4 +4,5 @@ export * from './GalleryGrid';
 export * from './PriceRange';
 export * from './Overlay';
 export * from './Swatches';
+export * from './Zoom';
 //# sourceMappingURL=index.d.ts.map

package/containers/ProductDetails.js

@@ -1 +1 @@
-import*as pe from"@dropins/tools/preact-compat.js";import{useState as X,Children as ae,useRef as ye,useMemo as we,useEffect as ne,useCallback as Z}from"@dropins/tools/preact-compat.js";import{debounce as Le,classes as g,VComponent as H,toLanguageTag as Ne,Slot as j}from"@dropins/tools/lib.js";import{Button as Pe,Icon as ve,Price as Se,Picker as Ue,ColorSwatch as He,ImageSwatch as Ve,TextSwatch as qe,Incrementer as je,Breadcrumbs as Ge,Image as De}from"@dropins/tools/components.js";import{jsxs as U,jsx as n,Fragment as fe}from"@dropins/tools/preact-jsx-runtime.js";import{useText as V}from"@dropins/tools/i18n.js";import{c as xe,d as $e}from"../chunks/getRefinedProduct.js";import{events as ze}from"@dropins/tools/event-bus.js";import{c as Oe}from"../chunks/initialize.js";import"@dropins/tools/fetch-graphql.js";const Fe=e=>pe.createElement("svg",{width:24,height:24,viewBox:"0 0 24 24",fill:"none",xmlns:"http://www.w3.org/2000/svg",...e},pe.createElement("path",{d:"M7.74512 9.87701L12.0001 14.132L16.2551 9.87701",stroke:"currentColor",strokeWidth:1.5,strokeLinecap:"square",strokeLinejoin:"round"})),Ke=e=>pe.createElement("svg",{width:24,height:24,viewBox:"0 0 24 24",fill:"none",xmlns:"http://www.w3.org/2000/svg",...e},pe.createElement("path",{vectorEffect:"non-scaling-stroke",d:"M18.3599 5.64001L5.62988 18.37",stroke:"currentColor"}),pe.createElement("path",{vectorEffect:"non-scaling-stroke",d:"M18.3599 18.37L5.62988 5.64001",stroke:"currentColor"})),Qe=24,ke=16,me=2,Xe="32";var Be=(e=>(e[e.small=16]="small",e[e.medium=24]="medium",e[e.large=64]="large",e))(Be||{});const be=({show:e=1,scrollbar:o=!1,peak:u=!1,arrows:m=!1,controls:h="dots",arrowsOnMainImage:y=!1,loop:p=!1,gap:f=null,direction:l="horizontal",width:K="100%",height:a="100%",defaultIndex:b=0,className:B,children:q,thumbnails:J=null,isZoomed:N,...A})=>{const _=V("PDP.Carousel.label").label,r=V("PDP.Carousel.Slide.label").label,D=V("PDP.Carousel.Previous.label").label,M=V("PDP.Carousel.Next.label").label,S=V("PDP.Carousel.Controls.label").label,Y=V("PDP.Carousel.Controls.Button.label").label,[t,le]=X(()=>ge(e)),x=Math.ceil(ae.count(q)/t),$=u?Qe:0,C=f?Be[f]:0,F=ae.count(q)%t,[v,oe]=X(p?b+1:b),re=ye([]),[ce,se]=X(0),[ee,he]=X(0),de=we(()=>ae.toArray(J),[J]),I=we(()=>{const c=ae.toArray(q).reduce((i,L,k)=>k%t===0?[...i,[L]]:[...i.slice(0,-1),[...i[i.length-1],L]],[]);return!p||c.length===1?c:p&&ae.count(q)%t===0?[c[x-1]].concat(c).concat([c[0],c[1]]):[ae.toArray(q).slice(-t)].concat(c).concat([c[0],c[1]])},[q,t,x,p]),T=ye(null),Q=ye(null),O=h==="thumbnailsRow"||h==="thumbnailsColumn";ne(()=>{const c=document.body,i=Le(()=>{var R,te;se(((R=T.current)==null?void 0:R.offsetWidth)??0),he(((te=T.current)==null?void 0:te.offsetHeight)??0);const k=window.innerWidth,W=ge(e,k);W!==t&&le(W)},50),L=new ResizeObserver(i);return L.observe(c),()=>{L.unobserve(c)}},[t,e]);const d=Z(c=>{const i=p?c-1:c,L=re==null?void 0:re.current[0],k=(L==null?void 0:L.offsetWidth)+ke,W=(L==null?void 0:L.offsetHeight)+ke,R=Q.current,te=h==="thumbnailsRow",Ae=h==="thumbnailsColumn",ie=te?R==null?void 0:R.offsetWidth:R==null?void 0:R.offsetHeight,z=te?k:W;(te||Ae)&&ie&&(z*(i+1)>ie&&(R.style.scrollBehavior="smooth",te?R.scrollLeft=(i+me)*z:R.scrollTop=(i+me)*z),(te?R.scrollLeft:R.scrollTop)>z*i&&(R.style.scrollBehavior="smooth",te?R.scrollLeft=(i-me)*z:R.scrollTop=(i-me)*z))},[h,p]);ne(()=>{d(v)},[v,d]);const s=Z((c,i,L)=>{O&&d(c);const k=T.current,W=$?k.offsetWidth-$:k.offsetWidth-$+C;if(!Array.from(k.querySelectorAll("[data-index]")).filter(ie=>{const z=Number(ie.getAttribute("data-index"));return!isNaN(z)&&z>-1})[c])return;if(L){const ie=c===0?x:0,z=W*(x+(F||t)/t);if(k.scrollLeft>=0&&k.scrollLeft<W-5){s(1,!0);return}if(k.scrollLeft>z-W&&k.scrollLeft<=z){s(x,!0);return}k.style.scrollBehavior="auto",k.scrollLeft=ie===0?0:z,s(ie===0?1:x,!0);return}const Ae=(k.offsetWidth-C)/t*I[c].length-$;k.style.scrollBehavior=i?"smooth":"auto",k.scrollLeft=I[c].length===t?W*c:W*(c-1)+Ae},[C,x,$,t,F,I,d,h]),P=Z(()=>{if(p){const i=v-1;s(i,!0,v===1);return}const c=v<=0?0:v-1;s(c,!0)},[v,s,p]),w=Z(()=>{const c=I.length-1;if(p){const L=v+1;s(L,!0,v===x);return}const i=v>=c?c:v+1;s(i,!0)},[I.length,p,v,s,x]);ne(()=>{const c=i=>{i.key==="ArrowLeft"&&(i.preventDefault(),P()),i.key==="ArrowRight"&&(i.preventDefault(),w())};return window.addEventListener("keydown",c),()=>{window.removeEventListener("keydown",c)}},[w,P]),ne(()=>{s(p?b+1:b,!1)},[b,s,p]);const E=Le(()=>{const c=T.current,i=$?c.offsetWidth-$:c.offsetWidth-$+C,L=c.scrollLeft/i,k=Math.round(L)-L<1?Math.round(L):Math.ceil(L);if(O&&d(k),p){const W=i*(x+(F||t)/t);if(Math.ceil(c.scrollLeft)>=Math.ceil(W)-5){c.style.scrollBehavior="auto",c.scrollLeft=c.offsetWidth*1+(Math.ceil(c.scrollLeft)-Math.ceil(W)-$);return}if(c.scrollLeft===0){c.style.scrollBehavior="auto",c.scrollLeft=W-c.offsetWidth+$;return}}v!==k&&oe(k)},100);ne(()=>{const c=T.current;return c==null||c.addEventListener("scroll",E),()=>{c==null||c.removeEventListener("scroll",E)}},[E]);const G=(c,i,L)=>n(Pe,{className:g([["pdp-carousel__button",!c],[`pdp-carousel__button--${i}`,!c],[`pdp-carousel__button--${h}`,c]]),style:{"--height":`${ee}px`},variant:"tertiary","aria-label":i==="next"?M:D,onClick:L,disabled:p?!1:i==="next"?v>=I.length-1:v<1,children:n(ve,{className:g([["pdp-carousel__button__icon",!c],[`pdp-carousel__button__icon--${i}`,!c],[`pdp-carousel__button__icon--${h}--${i}`,c]]),size:Xe,source:Fe})}),ue=m&&I.length!=1&&G(O,"prev",P),_e=m&&I.length!=1&&G(O,"next",w),Te=m&&I.length!=1&&G(!1,"prev",P),We=m&&I.length!=1&&G(!1,"next",w);return U("div",{role:"region","aria-roledescription":_,className:g(["pdp-carousel",["pdp-carousel--main-image-controls",y],["pdp-carousel--arrows",m&&!O],[`pdp-carousel--${h}`,O],B]),style:{"--flex-carousel":h==="thumbnailsColumn"?"row-reverse":"column","--gap":O?"0":"var(--spacing-small)","--width":K},...A,children:[n("div",{ref:T,className:g(["pdp-carousel__wrapper",`pdp-carousel__wrapper--${l}`,["pdp-carousel__wrapper--scrollbar",o],["pdp-carousel__wrapper--peak",u]]),style:{"--total-width":h==="thumbnailsColumn"?"81.6%":"100%","--height":h==="thumbnailsColumn"?"auto":a,"--gap":f?`var(--spacing-${f})`:"0px","--per-page":t},tabIndex:0,children:I.map((c,i)=>{const L=c.length<t;return n("div",{role:"group","aria-roledescription":r,"data-index":i,className:g(["pdp-carousel__slide",`pdp-carousel__slide--${l}`,["pdp-carousel__slide--active",v===i],["pdp-carousel__slide--orphan",L]]),style:{"--length":c.length},children:c},i)})}),!O&&U(fe,{children:[ue,_e]}),O&&y&&U(fe,{children:[Te,We]}),h&&I.length!=1&&U("div",{className:g([[`pdp-carousel__controls__container--${h}`,O],["pdp-carousel__controls__container--no-arrows",!m||y]]),style:{"--width":h==="thumbnailsRow"?`${ce}px`:K,"--height":`${ee}px`,"--nr-thumbnails":de.length},children:[(O||N)&&!y&&ue,n("div",{ref:Q,className:g([[`pdp-carousel__controls__wrapper--${h}`,O],["pdp-carousel__controls__wrapper",O]]),children:n("div",{role:"group","aria-label":S,className:g(["pdp-carousel__controls",[`pdp-carousel__controls--${h}`,O]]),children:(p?I.slice(0,x):I).map((c,i)=>{const L=p?x:I.length,k=p?v-1===i:v===i;return O?U("label",{className:g(["pdp-carousel__thumbnail__container"]),ref:W=>{W&&(re.current[i]=W)},children:[n("input",{type:"radio",name:"carousel-thumbnails","aria-label":Y.replace("{key}",String(i+1)).replace("{total}",String(L)),checked:k&&ce!==0,onChange:()=>{s(p?i+1:i,!0)},...A,className:g(["pdp-carousel__thumbnail",["pdp-carousel__thumbnail--selected",k&&ce!==0]])}),n("span",{className:g(["pdp-carousel__thumbnail__span"]),children:de[i]})]},i):n("button",{"aria-label":Y.replace("{key}",String(i+1)).replace("{total}",String(L)),onClick:()=>{s(p?i+1:i,!0)},className:g(["pdp-carousel__controls__button",["pdp-carousel__controls__button--active",k]])},i)})})}),(O||N)&&!y&&_e]})]})};function ge(e,o=0){if(typeof e=="number")return e;const{small:u,medium:m,large:h}=e,p=[{breakpoint:1024,value:h},{breakpoint:786,value:m},{breakpoint:0,value:u}].find(({breakpoint:f})=>o>f);return p?p.value:u}const Ze=({title:e,breadcrumbs:o,galleryContent:u,infoContent:m,productContent:h,sku:y,outOfStock:p,shortDescription:f,description:l,attributes:K,images:a,options:b,price:B,specialPrice:q,className:J,children:N,quantity:A,actions:_,carouselConfig:r,...D})=>{var F,v,oe,re,ce,se,ee,he,de;const M=V("PDP.Product.RegularPrice.label").label,S=V("PDP.Product.SpecialPrice.label").label,Y=V("PDP.Product.OutOfStock.label").label,t=V("PDP.Product.Image.label").label,[le,x]=X(null),$=a!=null&&a.length?a.map((I,T)=>{var Q;return n(H,{node:I,loading:T===0?"eager":"lazy",alt:((Q=e==null?void 0:e.props)==null?void 0:Q.children)&&(t==null?void 0:t.replace("{product}",e.props.children.toString()).replace("{key}",String(T+1)).replace("{total}",String(a.length))),onClick:()=>x(T)},T)}):n("img",{src:"data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7",className:"pdp-product__images__placeholder","aria-hidden":!0}),C=(F=r==null?void 0:r.thumbnails)!=null&&F.length?r.thumbnails.map((I,T)=>{var Q;return n(H,{node:I,loading:(r==null?void 0:r.thumbnailsLoadingMode)||"lazy",alt:((Q=e==null?void 0:e.props)==null?void 0:Q.children)&&(t==null?void 0:t.replace("{product}",e.props.children.toString()).replace("{key}",String(T+1)).replace("{total}",String(a.length)))},T)}):n("img",{src:"data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7",className:"pdp-product__images__placeholder","aria-hidden":!0});return U("div",{...D,className:g(["pdp-product",J]),children:[o&&n(H,{node:o,className:"pdp-product__breadcrumbs"}),U("div",{className:"pdp-product__column-container pdp-product__gallery-column",children:[n("div",{className:"pdp-product__column-body",children:(v=r==null?void 0:r.controls)!=null&&v.desktop?n(be,{className:"pdp-product__overlay__carousel",arrows:(a==null?void 0:a.length)>1,controls:(a==null?void 0:a.length)>1?r.controls.desktop:"dots",arrowsOnMainImage:r==null?void 0:r.arrowsOnMainImage,loop:(r==null?void 0:r.loopable)&&(a==null?void 0:a.length)>1,peak:((oe=r==null?void 0:r.thumbnails)==null?void 0:oe.length)>1&&((re=r==null?void 0:r.peak)==null?void 0:re.desktop)||!1,gap:(r==null?void 0:r.gap)||null,width:"100%",height:"100%",defaultIndex:le||0,thumbnails:C,children:$}):n(Je,{className:"pdp-product__images",gap:"small",children:$})}),u&&n(H,{node:u,className:"pdp-product__gallery-content"})]}),U("div",{className:"pdp-product__column-container pdp-product__content-column",children:[U("div",{className:"pdp-product__column-body",children:[U("div",{className:"pdp-product__header",children:[e&&n(H,{node:e,className:"pdp-product__title"}),y&&n(H,{node:y,className:"pdp-product__sku"})]}),U("div",{className:"pdp-product__prices",children:[q&&n(H,{node:q,className:g(["pdp-product__price-special","pdp-product__price"]),"aria-label":S,role:"text"}),B&&n(H,{node:B,className:g(["pdp-product__price-regular","pdp-product__price--grey"]),"aria-label":M,role:"text"})]}),(ce=r==null?void 0:r.controls)!=null&&ce.mobile&&((se=r==null?void 0:r.controls)==null?void 0:se.mobile)==="thumbnailsRow"?n(be,{className:"pdp-product__images pdp-product__images--carousel pdp-product__images--carousel--thumbnails",width:"100%",height:"auto",arrows:(a==null?void 0:a.length)>1,controls:(a==null?void 0:a.length)>1?"thumbnailsRow":null,loop:(r==null?void 0:r.loopable)&&(a==null?void 0:a.length)>1,peak:((ee=r==null?void 0:r.thumbnails)==null?void 0:ee.length)>1&&((he=r==null?void 0:r.peak)==null?void 0:he.mobile)||!1,gap:(r==null?void 0:r.gap)||null,thumbnails:C,children:$}):n(be,{className:"pdp-product__images pdp-product__images--carousel",peak:((de=r==null?void 0:r.peak)==null?void 0:de.mobile)&&(a==null?void 0:a.length)>1,gap:(r==null?void 0:r.gap)||null,width:"100%",height:"auto",arrows:(a==null?void 0:a.length)>1,controls:(a==null?void 0:a.length)>1?"dots":null,loop:(r==null?void 0:r.loopable)&&(a==null?void 0:a.length)>1,children:$}),U("div",{className:g(["pdp-product__actions",["pdp-product__actions--out-of-stock",p]]),children:[p&&n("div",{className:"pdp-product__out-of-stock__text",children:Y}),b&&n(H,{node:b,className:g(["pdp-product__options"])}),A&&n("div",{className:"pdp-product__quantity",children:n(H,{node:A})}),_&&n(H,{node:_,className:g(["pdp-product__buttons"])})]}),f&&n(H,{node:f,className:g(["pdp-product__short_description"])}),l&&n(H,{node:l,className:g(["pdp-product__description"])}),K?n("div",{className:"pdp-product__attributes",children:K}):null]}),m&&n(H,{node:m,className:"pdp-product__info-content"})]}),h&&n(H,{node:h,className:"pdp-product__content"}),le===null?null:n(Ye,{className:"pdp-product__overlay",onClose:()=>x(null),centered:!0,children:n(be,{className:"pdp-product__overlay__carousel",arrows:(a==null?void 0:a.length)>1,width:"100%",height:"100%",defaultIndex:le||0,loop:(r==null?void 0:r.loopable)&&(a==null?void 0:a.length)>1,controls:(a==null?void 0:a.length)>1?"dots":null,isZoomed:!0,children:$})})]})},Je=({children:e,gap:o=null,className:u,style:m,...h})=>{const y=ae.count(e);return n("div",{...h,className:g(["pdp-gallery-grid",u]),style:{"--gap":o?`var(--spacing-${o})`:"0px",...m},children:ae.map(e,(p,f)=>n("div",{className:"pdp-gallery-grid__item",children:n(H,{node:p,loading:f===0?"eager":"lazy"},p.props.src)},y+f))})},Ie=({amount:e,currency:o,locale:u,variant:m,sale:h,minimumAmount:y,maximumAmount:p,className:f,...l})=>n(fe,{children:e||y===p?n("div",{className:"pdp-price-range",...l,children:n(Se,{amount:e||y,currency:o,locale:u,variant:m,sale:h,className:f})}):U("div",{className:"pdp-price-range",...l,children:[n(Se,{amount:y,currency:o,locale:u,className:f}),n("span",{className:"pdp-price-range__label",children:"-"}),n(Se,{amount:p,currency:o,locale:u,className:f})]})}),Ye=({centered:e,onClose:o,className:u,children:m,...h})=>{const y=V("PDP.Overlay.Close.label").label,p=Z(()=>{o==null||o()},[o]);return ne(()=>{const f=l=>{l.key==="Escape"&&p()};return document.addEventListener("keydown",f),()=>{document.removeEventListener("keydown",f)}},[p]),ne(()=>{const f=document.scrollingElement,l=f.style.overflow;return f.style.overflow="hidden",()=>{f.style.overflow=l}},[]),U("div",{...h,className:g(["pdp-overlay",["pdp-overlay--centered",e],u]),children:[n("div",{className:"pdp-overlay__content",children:m}),n(Pe,{"aria-label":y,variant:"tertiary",className:"pdp-overlay__close-button",onClick:p,icon:n(Ke,{})})]})},Ce=["text","image","color","dropdown"],et=e=>e.map(o=>({...o,text:o.label,disabled:!o.inStock})),tt=({options:e,hideSelectedValue:o,onValues:u,onErrors:m,defaultOptions:h,selectionsToUpdate:y,className:p,children:f,...l})=>{const K=V("PDP.Swatches.Required.label").label,[a,b]=X(()=>e==null?void 0:e.reduce((A,_)=>{const{items:r}=_,D=r==null?void 0:r.find(S=>h==null?void 0:h.includes(S.id)),M=r==null?void 0:r.find(S=>S.selected);return D?{...A,[_.id]:{label:D.label,value:D.id}}:M?{...A,[_.id]:{label:M.label,value:M.id}}:A},{}));ne(()=>{y==null||y.forEach(N=>{b(A=>{var D;const _=(D=N==null?void 0:N.items)==null?void 0:D.find(M=>M.selected);return _?{...A,[N.id]:{label:_==null?void 0:_.label,value:_==null?void 0:_.id}}:A})})},[y,b]),we(()=>{const N=e==null?void 0:e.reduce((A,_)=>{var r;return(r=_==null?void 0:_.items)==null||r.forEach(D=>{var S;const M=((S=a[_.id])==null?void 0:S.value)===D.id;_.required&&!M&&(A[_.id]=K)}),A},{});return m==null||m(N),N},[a]);const B=Z((N,A,_)=>{b(r=>{const D={...r,[N]:{label:A,value:_}};return u==null||u(D,_),D})},[u]),q=(N,A)=>{var r;const _=((r=A.selectedOptions[0])==null?void 0:r.label)??"";B(N,_,A.value)},J=Z(({items:N,id:A,required:_,type:r,selected:D,label:M})=>n("div",{className:g(["pdp-swatches__options"]),children:(r==null?void 0:r.toLowerCase())==="dropdown"?n(Ue,{"aria-label":M,handleSelect:S=>q(A,S.target),options:et(N),value:D}):N==null?void 0:N.map(S=>{const Y={key:S.id,id:S.id,name:A,value:S.value,label:S.label,groupAriaLabel:M,selected:D===S.id,outOfStock:!S.inStock,required:_===null?!0:_,onValue:()=>{B(A,S.label,S.id)}};switch(r){case"text":return n(qe,{...Y,label:S.label});case"image":return n(Ve,{...Y,src:S.value,alt:S.label});case"color":return n(He,{...Y,size:"large",color:S.value});default:return console.warn(`Invalid swatch type ${r}`),null}})}),[B]);return n("div",{...l,className:g(["pdp-swatches",p]),children:e==null?void 0:e.map(({type:N,label:A,id:_,multiple:r,required:D,items:M})=>{var S;if(!N){console.warn("Bundle product not supported on UI.");return}return Ce.includes(N)||console.warn(`Invalid swatch type ${N}`),r&&console.warn("Multiple selection swatches are not currently supported."),U("div",{id:`swatch-item-${_}`,"data-slot-key":`product-swatch--${_}`,className:"pdp-swatches__field",children:[n("div",{className:"pdp-swatches__field__label",children:a[_]?o?`${A}`:`${A}: ${a[_].label}`:A}),n(J,{id:_,type:N,required:D,items:M,label:A,selected:(S=a[_])==null?void 0:S.value})]},`swatch-item-${_}`)})})};function nt(e,o="en_US"){if(!Me(e))throw Error("Invalid date string");return e.split(" ")[1]||(e=`${e} 00:00:00`),new Date(e).toLocaleDateString(Ne(o)).toString()}function Me(e){if(![/^\d{4}-\d{2}-\d{2}$/,/^\d{1,2}\/\d{1,2}\/\d{4}$/,/^\d{2}\/\d{2}\/\d{4}$/,/^\d{4}\/\d{2}\/\d{2}$/,/^\d{1,2}\.\d{1,2}\.\d{4}$/,/^\d{4}-\d{2}-\d{2} \d{2}:\d{2}:\d{2}$/].some(m=>m.test(e)))return!1;const u=new Date(e);return!isNaN(u.getTime())}function rt(e){const o=new URLSearchParams(window.location.search);Object.entries(e).forEach(([m,h])=>{h===null?o.delete(m):o.set(m,String(h))});let u=window.location.pathname;u+=`?${o.toString()}`,u+=window.location.hash,window.history.replaceState({},"",u)}function lt(){const e=new URLSearchParams(window.location.search),o={};return e.forEach((u,m)=>{o[m]=u}),o}function ct(e){var o,u,m,h,y,p,f,l,K,a,b,B;return{productId:Number(e==null?void 0:e.externalId),name:e==null?void 0:e.name,sku:e==null?void 0:e.sku,topLevelSku:e==null?void 0:e.externalParentId,specialToDate:void 0,specialFromDate:void 0,newToDate:void 0,newFromDate:void 0,createdAt:void 0,updatedAt:void 0,manufacturer:void 0,countryOfManufacture:void 0,categories:void 0,productType:void 0,pricing:{regularPrice:((u=(o=e==null?void 0:e.prices)==null?void 0:o.regular)==null?void 0:u.amount)||0,minimalPrice:(h=(m=e==null?void 0:e.prices)==null?void 0:m.final)==null?void 0:h.minimumAmount,maximalPrice:(p=(y=e==null?void 0:e.prices)==null?void 0:y.final)==null?void 0:p.maximumAmount,specialPrice:(l=(f=e==null?void 0:e.prices)==null?void 0:f.final)==null?void 0:l.amount,tierPricing:void 0,currencyCode:((a=(K=e==null?void 0:e.prices)==null?void 0:K.final)==null?void 0:a.currency)||"USD"},canonicalUrl:e==null?void 0:e.url,mainImageUrl:(B=(b=e==null?void 0:e.images)==null?void 0:b[0])==null?void 0:B.url}}const at={PRODUCT_CONTEXT:"productContext"},dt={PRODUCT_PAGE_VIEW:"product-page-view"};function Re(){return window.adobeDataLayer=window.adobeDataLayer||[],window.adobeDataLayer}function it(e,o){const u=Re();u.push({[e]:null}),u.push({[e]:o})}function ot(e,o){Re().push(m=>{const h=m.getState?m.getState():{};m.push({event:e,eventInfo:{...h,...o}})})}function Ee(e){const o=ct(e);it(at.PRODUCT_CONTEXT,o),ot(dt.PRODUCT_PAGE_VIEW)}const st=({sku:e,hideSku:o,hideQuantity:u,hideShortDescription:m,hideDescription:h,hideAttributes:y,hideURLParams:p,hideSelectedOptionValue:f,slots:l,children:K,initialData:a,carousel:b,optionsConfig:B,useACDL:q,onAddToCart:J,...N})=>{var I,T,Q,O;const A=V("PDP.Product.AddToCart.label").label,_=V("PDP.Product.Incrementer.label").label,r=V("PDP.Product.Details.label").label,[D,M]=X(Oe.getConfig().defaultLocale||"en-US"),[S,Y]=X(),[t=null,le]=X(a),[x,$]=X(()=>{const d={sku:e,quantity:1};return t!=null&&t.optionUIDs&&(d.optionsUIDs=t.optionUIDs),d}),[C,F]=X(()=>{var d,s;return!(t!=null&&t.options&&((d=t==null?void 0:t.options)==null?void 0:d.length)>0&&((s=t==null?void 0:t.optionUIDs)==null?void 0:s.length)!==(t==null?void 0:t.options.length))}),v={data:t,values:x,valid:C};ne(()=>{const d=ze.on("locale",s=>{s!==D&&(M(s),xe(e).then(le))});return()=>{d==null||d.off()}},[D,e]),ne(()=>{q&&a&&Object.keys(a).length>0&&Ee(a)},[a]);const oe=Z(d=>{$(s=>({...s,...d}))},[]),re=Z(d=>{var P;let s=Object.keys(d).map(w=>d[w].value).filter(w=>w!==void 0);p||rt({optionsUIDs:s.join(",")}),$(w=>({...w,optionsUIDs:s})),F((s==null?void 0:s.length)===((P=t==null?void 0:t.options)==null?void 0:P.length)),$e(e,s,B==null?void 0:B.anchorOptions).then(w=>{var E;le(w),(E=B==null?void 0:B.anchorOptions)!=null&&E.length&&ce(w,s),q&&(w==null?void 0:w.sku)!==e&&Ee(w)})},[e]),ce=Z((d,s)=>{var E;const P=(d==null?void 0:d.optionUIDs)??[];s.every(G=>P.includes(G))||(Y(d==null?void 0:d.options),$(G=>({...G,optionsUIDs:P})),F((P==null?void 0:P.length)===((E=d==null?void 0:d.options)==null?void 0:E.length)))},[e]),se=Z(d=>{Object.keys(d).length!==0&&F(!1)},[]),ee=we(()=>{var d;return(d=t==null?void 0:t.attributes)==null?void 0:d.map(({label:s,value:P},w)=>{const E=Me(P)?nt(P,D):P.toString();return U("li",{children:[s,": ",n("span",{dangerouslySetInnerHTML:{__html:E}})]},w)})},[t==null?void 0:t.attributes,D]),he=!u&&(t!=null&&t.inStock)?n(j,{name:"Quantity",slot:l==null?void 0:l.Quantity,context:{...v},children:n(je,{name:"quantity",defaultValue:x.quantity.toString(),min:1,"aria-label":_,className:"pdp-product__quantity",onValue:d=>{oe({quantity:Number(d)})}},"quantity")}):void 0,de=()=>{if(t!=null&&t.options)return n(j,{name:"Options",slot:l==null?void 0:l.Options,context:{...v},children:n(tt,{options:t.options,defaultOptions:x.optionsUIDs,selectionsToUpdate:S,hideSelectedValue:f,onValues:re,onErrors:se})})};return n("div",{...N,children:n(Ze,{title:n(j,{name:"Title",slot:l==null?void 0:l.Title,context:{...v},children:t==null?void 0:t.name}),sku:o?void 0:n(j,{name:"SKU",slot:l==null?void 0:l.SKU,context:{...v},children:t==null?void 0:t.sku}),options:de(),breadcrumbs:(l==null?void 0:l.Breadcrumbs)&&n(j,{name:"Breadcrumbs",slot:l==null?void 0:l.Breadcrumbs,context:{...v,setSeparator(d){this._registerMethod((...s)=>{const P=d(...s),w=P&&n(ve,{source:P});this._setProps(E=>({...E,separator:w}))})},appendLink(d){this._registerMethod((...s)=>{const{text:P,...w}=d(...s),E=n("a",{...w,children:P});this._setProps(G=>({...G,categories:[...G.categories||[],E]}))})},appendHTMLElement(d){this._registerMethod((...s)=>{const P=d(...s),w=this._htmlElementToVNode(P);this._setProps(E=>({...E,categories:[...E.categories||[],w]}))})}},render:({separator:d,categories:s})=>n(Ge,{separator:d,categories:s})}),quantity:he,actions:n(j,{name:"Actions",slot:l==null?void 0:l.Actions,context:{...v,appendButton(d){this._registerMethod((...s)=>{const P=d(...s);if(!P)return;const{text:w,icon:E,...G}=P,ue=n(Pe,{type:"button",...G,icon:E&&n(ve,{source:E}),children:w});this._setProps(_e=>({children:[..._e.children||[],ue]}))})}},children:!(l!=null&&l.Actions)&&n(Pe,{size:"medium",type:"submit",icon:n(ve,{source:"Cart"}),disabled:!(t!=null&&t.inStock)||!C,"aria-label":A,onClick:()=>J==null?void 0:J(x),children:A})}),shortDescription:m?void 0:n(j,{name:"ShortDescription",slot:l==null?void 0:l.ShortDescription,context:{...v},children:n("div",{dangerouslySetInnerHTML:{__html:(t==null?void 0:t.shortDescription)??""}})}),description:h?void 0:n(j,{name:"Description",slot:l==null?void 0:l.Description,context:{...v},children:n("div",{dangerouslySetInnerHTML:{__html:(t==null?void 0:t.description)??""}})}),images:((I=t==null?void 0:t.images)==null?void 0:I.map(({label:d,url:s})=>{var P,w;return n(De,{title:d,alt:d,src:s,width:((P=b==null?void 0:b.imageParams)==null?void 0:P.width)??960,height:((w=b==null?void 0:b.imageParams)==null?void 0:w.height)??1191,params:(b==null?void 0:b.imageParams)??{width:960}},s)}))??[],specialPrice:(T=t==null?void 0:t.prices)!=null&&T.visible?n(j,{name:"SpecialPrice",slot:l==null?void 0:l.SpecialPrice,context:{...v},children:n(Ie,{...t.prices.final,locale:Ne(D)})}):void 0,price:(Q=t==null?void 0:t.prices)!=null&&Q.visible&&t.prices.regular&&t.prices.final.amount!==(t==null?void 0:t.prices.regular.amount)?n(j,{name:"RegularPrice",slot:l==null?void 0:l.RegularPrice,context:{...v},children:n(Ie,{...t.prices.regular,locale:Ne(D)})}):void 0,carouselConfig:{...b,thumbnails:b&&Object.keys(b).length?((O=t==null?void 0:t.images)==null?void 0:O.map(({label:d,url:s})=>{var P,w;return n(De,{title:d,alt:d,src:s,width:((P=b==null?void 0:b.thumbnailParams)==null?void 0:P.width)??200,height:((w=b==null?void 0:b.thumbnailParams)==null?void 0:w.height)??248,params:(b==null?void 0:b.thumbnailParams)??{width:200}},s)}))??[]:[]},outOfStock:!(t!=null&&t.inStock),attributes:y?void 0:n(j,{name:"Attributes",slot:l==null?void 0:l.Attributes,context:{...v},children:ee!=null&&ee.length?U(fe,{children:[r,n("ul",{children:ee})]}):null}),galleryContent:(l==null?void 0:l.GalleryContent)&&n(j,{name:"GalleryContent",slot:l.GalleryContent,context:{...v}}),infoContent:(l==null?void 0:l.InfoContent)&&n(j,{name:"InfoContent",slot:l.InfoContent,context:{...v}}),productContent:(l==null?void 0:l.Content)&&n(j,{name:"Content",slot:l.Content,context:{...v}})})})};st.getInitialData=async function({sku:e,optionsConfig:o}){var m,h,y,p,f,l;const u=((m=lt().optionsUIDs)==null?void 0:m.split(","))||((l=(f=(p=(y=(h=Oe)==null?void 0:h.getConfig())==null?void 0:y.models)==null?void 0:p.ProductDetails)==null?void 0:f.initialData)==null?void 0:l.optionsUIDs);return u!=null&&u.length?await $e(e,u,o==null?void 0:o.anchorOptions):await xe(e)};export{st as ProductDetails,st as default};
+import*as pe from"@dropins/tools/preact-compat.js";import{useState as Z,Children as ce,useRef as Ae,useMemo as we,useEffect as re,useCallback as C}from"@dropins/tools/preact-compat.js";import{debounce as Le,classes as x,VComponent as U,toLanguageTag as Ne,Slot as G}from"@dropins/tools/lib.js";import{Button as Pe,Icon as ve,Price as Se,Picker as Ue,ColorSwatch as He,ImageSwatch as Ve,TextSwatch as ze,Incrementer as qe,Breadcrumbs as je,Image as De}from"@dropins/tools/components.js";import{jsxs as H,jsx as t,Fragment as fe}from"@dropins/tools/preact-jsx-runtime.js";import{useText as z}from"@dropins/tools/i18n.js";import{cloneElement as Ge}from"@dropins/tools/preact.js";import{c as Ie,d as $e}from"../chunks/getRefinedProduct.js";import{events as Fe}from"@dropins/tools/event-bus.js";import{c as Me}from"../chunks/initialize.js";import"@dropins/tools/fetch-graphql.js";const Ke=e=>pe.createElement("svg",{width:24,height:24,viewBox:"0 0 24 24",fill:"none",xmlns:"http://www.w3.org/2000/svg",...e},pe.createElement("path",{d:"M7.74512 9.87701L12.0001 14.132L16.2551 9.87701",stroke:"currentColor",strokeWidth:1.5,strokeLinecap:"square",strokeLinejoin:"round"})),Qe=e=>pe.createElement("svg",{width:24,height:24,viewBox:"0 0 24 24",fill:"none",xmlns:"http://www.w3.org/2000/svg",...e},pe.createElement("path",{vectorEffect:"non-scaling-stroke",d:"M18.3599 5.64001L5.62988 18.37",stroke:"currentColor"}),pe.createElement("path",{vectorEffect:"non-scaling-stroke",d:"M18.3599 18.37L5.62988 5.64001",stroke:"currentColor"})),Xe=24,ge=16,_e=2,Ze="32";var Oe=(e=>(e[e.small=16]="small",e[e.medium=24]="medium",e[e.large=64]="large",e))(Oe||{});const be=({show:e=1,scrollbar:d=!1,peak:h=!1,arrows:_=!1,controls:p="dots",arrowsOnMainImage:A=!1,loop:u=!1,gap:w=null,direction:l="horizontal",width:q="100%",height:c="100%",defaultIndex:m=0,className:E,children:I,thumbnails:F=null,isZoomed:S,...P})=>{const b=z("PDP.Carousel.label").label,r=z("PDP.Carousel.Slide.label").label,D=z("PDP.Carousel.Previous.label").label,B=z("PDP.Carousel.Next.label").label,N=z("PDP.Carousel.Controls.label").label,ee=z("PDP.Carousel.Controls.Button.label").label,[n,J]=Z(()=>ke(e)),$=Math.ceil(ce.count(I)/n),T=h?Xe:0,K=w?Oe[w]:0,Y=ce.count(I)%n,[v,ie]=Z(u?m+1:m),le=Ae([]),[ae,se]=Z(0),[te,he]=Z(0),oe=we(()=>ce.toArray(F),[F]),M=we(()=>{const a=ce.toArray(I).reduce((i,L,g)=>g%n===0?[...i,[L]]:[...i.slice(0,-1),[...i[i.length-1],L]],[]);return!u||a.length===1?a:u&&ce.count(I)%n===0?[a[$-1]].concat(a).concat([a[0],a[1]]):[ce.toArray(I).slice(-n)].concat(a).concat([a[0],a[1]])},[I,n,$,u]),j=Ae(null),V=Ae(null),k=p==="thumbnailsRow"||p==="thumbnailsColumn";re(()=>{const a=document.body,i=Le(()=>{var R,ne;se(((R=j.current)==null?void 0:R.offsetWidth)??0),he(((ne=j.current)==null?void 0:ne.offsetHeight)??0);const g=window.innerWidth,W=ke(e,g);W!==n&&J(W)},50),L=new ResizeObserver(i);return L.observe(a),()=>{L.unobserve(a)}},[n,e]);const o=C(a=>{const i=u?a-1:a,L=le==null?void 0:le.current[0],g=(L==null?void 0:L.offsetWidth)+ge,W=(L==null?void 0:L.offsetHeight)+ge,R=V.current,ne=p==="thumbnailsRow",ye=p==="thumbnailsColumn",de=ne?R==null?void 0:R.offsetWidth:R==null?void 0:R.offsetHeight,X=ne?g:W;(ne||ye)&&de&&(X*(i+1)>de&&(R.style.scrollBehavior="smooth",ne?R.scrollLeft=(i+_e)*X:R.scrollTop=(i+_e)*X),(ne?R.scrollLeft:R.scrollTop)>X*i&&(R.style.scrollBehavior="smooth",ne?R.scrollLeft=(i-_e)*X:R.scrollTop=(i-_e)*X))},[p,u]);re(()=>{o(v)},[v,o]);const s=C((a,i,L)=>{k&&o(a);const g=j.current,W=T?g.offsetWidth-T:g.offsetWidth-T+K;if(!Array.from(g.querySelectorAll("[data-index]")).filter(de=>{const X=Number(de.getAttribute("data-index"));return!isNaN(X)&&X>-1})[a])return;if(L){const de=a===0?$:0,X=W*($+(Y||n)/n);if(g.scrollLeft>=0&&g.scrollLeft<W-5){s(1,!0);return}if(g.scrollLeft>X-W&&g.scrollLeft<=X){s($,!0);return}g.style.scrollBehavior="auto",g.scrollLeft=de===0?0:X,s(de===0?1:$,!0);return}const ye=(g.offsetWidth-K)/n*M[a].length-T;g.style.scrollBehavior=i?"smooth":"auto",g.scrollLeft=M[a].length===n?W*a:W*(a-1)+ye},[K,$,T,n,Y,M,o,p]),y=C(()=>{if(u){const i=v-1;s(i,!0,v===1);return}const a=v<=0?0:v-1;s(a,!0)},[v,s,u]),f=C(()=>{const a=M.length-1;if(u){const L=v+1;s(L,!0,v===$);return}const i=v>=a?a:v+1;s(i,!0)},[M.length,u,v,s,$]);re(()=>{const a=i=>{i.key==="ArrowLeft"&&(i.preventDefault(),y()),i.key==="ArrowRight"&&(i.preventDefault(),f())};return window.addEventListener("keydown",a),()=>{window.removeEventListener("keydown",a)}},[f,y]),re(()=>{s(u?m+1:m,!1)},[m,s,u]);const O=Le(()=>{const a=j.current,i=T?a.offsetWidth-T:a.offsetWidth-T+K,L=a.scrollLeft/i,g=Math.round(L)-L<1?Math.round(L):Math.ceil(L);if(k&&o(g),u){const W=i*($+(Y||n)/n);if(Math.ceil(a.scrollLeft)>=Math.ceil(W)-5){a.style.scrollBehavior="auto",a.scrollLeft=a.offsetWidth*1+(Math.ceil(a.scrollLeft)-Math.ceil(W)-T);return}if(a.scrollLeft===0){a.style.scrollBehavior="auto",a.scrollLeft=W-a.offsetWidth+T;return}}v!==g&&ie(g)},100);re(()=>{const a=j.current;return a==null||a.addEventListener("scroll",O),()=>{a==null||a.removeEventListener("scroll",O)}},[O]);const Q=(a,i,L)=>t(Pe,{className:x([["pdp-carousel__button",!a],[`pdp-carousel__button--${i}`,!a],[`pdp-carousel__button--${p}`,a]]),style:{"--height":`${te}px`},variant:"tertiary","aria-label":i==="next"?B:D,onClick:L,disabled:u?!1:i==="next"?v>=M.length-1:v<1,children:t(ve,{className:x([["pdp-carousel__button__icon",!a],[`pdp-carousel__button__icon--${i}`,!a],[`pdp-carousel__button__icon--${p}--${i}`,a]]),size:Ze,source:Ke})}),ue=_&&M.length!=1&&Q(k,"prev",y),me=_&&M.length!=1&&Q(k,"next",f),Te=_&&M.length!=1&&Q(!1,"prev",y),We=_&&M.length!=1&&Q(!1,"next",f);return H("div",{role:"region","aria-roledescription":b,className:x(["pdp-carousel",["pdp-carousel--main-image-controls",A],["pdp-carousel--arrows",_&&!k],[`pdp-carousel--${p}`,k],E]),style:{"--flex-carousel":p==="thumbnailsColumn"?"row-reverse":"column","--gap":k?"0":"var(--spacing-small)","--width":q},...P,children:[t("div",{ref:j,className:x(["pdp-carousel__wrapper",`pdp-carousel__wrapper--${l}`,["pdp-carousel__wrapper--scrollbar",d],["pdp-carousel__wrapper--peak",h]]),style:{"--total-width":p==="thumbnailsColumn"?"81.6%":"100%","--height":p==="thumbnailsColumn"?"auto":c,"--gap":w?`var(--spacing-${w})`:"0px","--per-page":n},tabIndex:0,children:M.map((a,i)=>{const L=a.length<n;return t("div",{role:"group","aria-roledescription":r,"data-index":i,className:x(["pdp-carousel__slide",`pdp-carousel__slide--${l}`,["pdp-carousel__slide--active",v===i],["pdp-carousel__slide--orphan",L]]),style:{"--length":a.length},children:a},i)})}),!k&&H(fe,{children:[ue,me]}),k&&A&&H(fe,{children:[Te,We]}),p&&M.length!=1&&H("div",{className:x([[`pdp-carousel__controls__container--${p}`,k],["pdp-carousel__controls__container--no-arrows",!_||A]]),style:{"--width":p==="thumbnailsRow"?`${ae}px`:q,"--height":`${te}px`,"--nr-thumbnails":oe.length},children:[(k||S)&&!A&&ue,t("div",{ref:V,className:x([[`pdp-carousel__controls__wrapper--${p}`,k],["pdp-carousel__controls__wrapper",k]]),children:t("div",{role:"group","aria-label":N,className:x(["pdp-carousel__controls",[`pdp-carousel__controls--${p}`,k]]),children:(u?M.slice(0,$):M).map((a,i)=>{const L=u?$:M.length,g=u?v-1===i:v===i;return k?H("label",{className:x(["pdp-carousel__thumbnail__container"]),ref:W=>{W&&(le.current[i]=W)},children:[t("input",{type:"radio",name:"carousel-thumbnails","aria-label":ee.replace("{key}",String(i+1)).replace("{total}",String(L)),checked:g&&ae!==0,onChange:()=>{s(u?i+1:i,!0)},...P,className:x(["pdp-carousel__thumbnail",["pdp-carousel__thumbnail--selected",g&&ae!==0]])}),t("span",{className:x(["pdp-carousel__thumbnail__span"]),children:oe[i]})]},i):t("button",{"aria-label":ee.replace("{key}",String(i+1)).replace("{total}",String(L)),onClick:()=>{s(u?i+1:i,!0)},className:x(["pdp-carousel__controls__button",["pdp-carousel__controls__button--active",g]])},i)})})}),(k||S)&&!A&&me]})]})};function ke(e,d=0){if(typeof e=="number")return e;const{small:h,medium:_,large:p}=e,u=[{breakpoint:1024,value:p},{breakpoint:786,value:_},{breakpoint:0,value:h}].find(({breakpoint:w})=>d>w);return u?u.value:h}const Ye=({title:e,breadcrumbs:d,galleryContent:h,infoContent:_,productContent:p,sku:A,outOfStock:u,shortDescription:w,description:l,attributes:q,images:c,options:m,price:E,specialPrice:I,className:F,children:S,quantity:P,actions:b,carouselConfig:r,zoomType:D="zoom",...B})=>{var v,ie,le,ae,se,te,he,oe,M;const N=z("PDP.Product.RegularPrice.label").label,ee=z("PDP.Product.SpecialPrice.label").label,n=z("PDP.Product.OutOfStock.label").label,J=z("PDP.Product.Image.label").label,[$,T]=Z(null),K=c!=null&&c.length?c.map((j,V)=>{var o;const k=(o=e==null?void 0:e.props)!=null&&o.children?J==null?void 0:J.replace("{product}",e.props.children.toString()).replace("{key}",String(V+1)).replace("{total}",String(c.length)):void 0;return D==="zoom"?t(rt,{children:t(U,{node:j,loading:V===0?"eager":"lazy",alt:k},V)}):t(U,{node:j,loading:V===0?"eager":"lazy",alt:k,onClick:()=>T(V)},V)}):t("img",{src:"data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7",className:"pdp-product__images__placeholder","aria-hidden":!0}),Y=(v=r==null?void 0:r.thumbnails)!=null&&v.length?r.thumbnails.map((j,V)=>{var k;return t(U,{node:j,loading:(r==null?void 0:r.thumbnailsLoadingMode)||"lazy",alt:((k=e==null?void 0:e.props)==null?void 0:k.children)&&(J==null?void 0:J.replace("{product}",e.props.children.toString()).replace("{key}",String(V+1)).replace("{total}",String(c.length)))},V)}):t("img",{src:"data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7",className:"pdp-product__images__placeholder","aria-hidden":!0});return H("div",{...B,className:x(["pdp-product",F]),children:[d&&t(U,{node:d,className:"pdp-product__breadcrumbs"}),H("div",{className:"pdp-product__column-container pdp-product__gallery-column",children:[t("div",{className:"pdp-product__column-body",children:(ie=r==null?void 0:r.controls)!=null&&ie.desktop?t(be,{className:"pdp-product__overlay__carousel",arrows:(c==null?void 0:c.length)>1,controls:(c==null?void 0:c.length)>1?r.controls.desktop:"dots",arrowsOnMainImage:r==null?void 0:r.arrowsOnMainImage,loop:(r==null?void 0:r.loopable)&&(c==null?void 0:c.length)>1,peak:((le=r==null?void 0:r.thumbnails)==null?void 0:le.length)>1&&((ae=r==null?void 0:r.peak)==null?void 0:ae.desktop)||!1,gap:(r==null?void 0:r.gap)||null,width:"100%",height:"100%",defaultIndex:$||0,thumbnails:Y,children:K}):t(Je,{className:"pdp-product__images",gap:"small",children:K})}),h&&t(U,{node:h,className:"pdp-product__gallery-content"})]}),H("div",{className:"pdp-product__column-container pdp-product__content-column",children:[H("div",{className:"pdp-product__column-body",children:[H("div",{className:"pdp-product__header",children:[e&&t(U,{node:e,className:"pdp-product__title"}),A&&t(U,{node:A,className:"pdp-product__sku"})]}),H("div",{className:"pdp-product__prices",children:[I&&t(U,{node:I,className:x(["pdp-product__price-special","pdp-product__price"]),"aria-label":ee,role:"text"}),E&&t(U,{node:E,className:x(["pdp-product__price-regular","pdp-product__price--grey"]),"aria-label":N,role:"text"})]}),(se=r==null?void 0:r.controls)!=null&&se.mobile&&((te=r==null?void 0:r.controls)==null?void 0:te.mobile)==="thumbnailsRow"?t(be,{className:"pdp-product__images pdp-product__images--carousel pdp-product__images--carousel--thumbnails",width:"100%",height:"auto",arrows:(c==null?void 0:c.length)>1,controls:(c==null?void 0:c.length)>1?"thumbnailsRow":null,loop:(r==null?void 0:r.loopable)&&(c==null?void 0:c.length)>1,peak:((he=r==null?void 0:r.thumbnails)==null?void 0:he.length)>1&&((oe=r==null?void 0:r.peak)==null?void 0:oe.mobile)||!1,gap:(r==null?void 0:r.gap)||null,thumbnails:Y,children:K}):t(be,{className:"pdp-product__images pdp-product__images--carousel",peak:((M=r==null?void 0:r.peak)==null?void 0:M.mobile)&&(c==null?void 0:c.length)>1,gap:(r==null?void 0:r.gap)||null,width:"100%",height:"auto",arrows:(c==null?void 0:c.length)>1,controls:(c==null?void 0:c.length)>1?"dots":null,loop:(r==null?void 0:r.loopable)&&(c==null?void 0:c.length)>1,children:K}),H("div",{className:x(["pdp-product__actions",["pdp-product__actions--out-of-stock",u]]),children:[u&&t("div",{className:"pdp-product__out-of-stock__text",children:n}),m&&t(U,{node:m,className:x(["pdp-product__options"])}),P&&t("div",{className:"pdp-product__quantity",children:t(U,{node:P})}),b&&t(U,{node:b,className:x(["pdp-product__buttons"])})]}),w&&t(U,{node:w,className:x(["pdp-product__short_description"])}),l&&t(U,{node:l,className:x(["pdp-product__description"])}),q?t("div",{className:"pdp-product__attributes",children:q}):null]}),_&&t(U,{node:_,className:"pdp-product__info-content"})]}),p&&t(U,{node:p,className:"pdp-product__content"}),$===null?null:t(Ce,{className:"pdp-product__overlay",onClose:()=>T(null),centered:!0,children:t(be,{className:"pdp-product__overlay__carousel",arrows:(c==null?void 0:c.length)>1,width:"100%",height:"100%",defaultIndex:$||0,loop:(r==null?void 0:r.loopable)&&(c==null?void 0:c.length)>1,controls:(c==null?void 0:c.length)>1?"dots":null,isZoomed:!0,children:K})})]})},Je=({children:e,gap:d=null,className:h,style:_,...p})=>{const A=ce.count(e);return t("div",{...p,className:x(["pdp-gallery-grid",h]),style:{"--gap":d?`var(--spacing-${d})`:"0px",..._},children:ce.map(e,(u,w)=>t("div",{className:"pdp-gallery-grid__item",children:t(U,{node:u,loading:w===0?"eager":"lazy"},u.props.src)},A+w))})},xe=({amount:e,currency:d,locale:h,variant:_,sale:p,minimumAmount:A,maximumAmount:u,className:w,...l})=>t(fe,{children:e||A===u?t("div",{className:"pdp-price-range",...l,children:t(Se,{amount:e||A,currency:d,locale:h,variant:_,sale:p,className:w})}):H("div",{className:"pdp-price-range",...l,children:[t(Se,{amount:A,currency:d,locale:h,className:w}),t("span",{className:"pdp-price-range__label",children:"-"}),t(Se,{amount:u,currency:d,locale:h,className:w})]})}),Ce=({centered:e,onClose:d,className:h,children:_,...p})=>{const A=z("PDP.Overlay.Close.label").label,u=C(()=>{d==null||d()},[d]);return re(()=>{const w=l=>{l.key==="Escape"&&u()};return document.addEventListener("keydown",w),()=>{document.removeEventListener("keydown",w)}},[u]),re(()=>{const w=document.scrollingElement,l=w.style.overflow;return w.style.overflow="hidden",()=>{w.style.overflow=l}},[]),H("div",{...p,className:x(["pdp-overlay",["pdp-overlay--centered",e],h]),children:[t("div",{className:"pdp-overlay__content",children:_}),t(Pe,{"aria-label":A,variant:"tertiary",className:"pdp-overlay__close-button",onClick:u,icon:t(Qe,{})})]})},et=["text","image","color","dropdown"],tt=e=>e.map(d=>({...d,text:d.label,disabled:!d.inStock})),nt=({options:e,hideSelectedValue:d,onValues:h,onErrors:_,defaultOptions:p,selectionsToUpdate:A,className:u,children:w,...l})=>{const q=z("PDP.Swatches.Required.label").label,[c,m]=Z(()=>e==null?void 0:e.reduce((P,b)=>{const{items:r}=b,D=r==null?void 0:r.find(N=>p==null?void 0:p.includes(N.id)),B=r==null?void 0:r.find(N=>N.selected);return D?{...P,[b.id]:{label:D.label,value:D.id}}:B?{...P,[b.id]:{label:B.label,value:B.id}}:P},{}));re(()=>{A==null||A.forEach(S=>{m(P=>{var D;const b=(D=S==null?void 0:S.items)==null?void 0:D.find(B=>B.selected);return b?{...P,[S.id]:{label:b==null?void 0:b.label,value:b==null?void 0:b.id}}:P})})},[A,m]),we(()=>{const S=e==null?void 0:e.reduce((P,b)=>{var r;return(r=b==null?void 0:b.items)==null||r.forEach(D=>{var N;const B=((N=c[b.id])==null?void 0:N.value)===D.id;b.required&&!B&&(P[b.id]=q)}),P},{});return _==null||_(S),S},[c]);const E=C((S,P,b)=>{m(r=>{const D={...r,[S]:{label:P,value:b}};return h==null||h(D,b),D})},[h]),I=(S,P)=>{var r;const b=((r=P.selectedOptions[0])==null?void 0:r.label)??"";E(S,b,P.value)},F=C(({items:S,id:P,required:b,type:r,selected:D,label:B})=>t("div",{className:x(["pdp-swatches__options"]),children:(r==null?void 0:r.toLowerCase())==="dropdown"?t(Ue,{"aria-label":B,handleSelect:N=>I(P,N.target),options:tt(S),value:D}):S==null?void 0:S.map(N=>{const ee={key:N.id,id:N.id,name:P,value:N.value,label:N.label,groupAriaLabel:B,selected:D===N.id,outOfStock:!N.inStock,required:b===null?!0:b,onValue:()=>{E(P,N.label,N.id)}};switch(r){case"text":return t(ze,{...ee,label:N.label});case"image":return t(Ve,{...ee,src:N.value,alt:N.label});case"color":return t(He,{...ee,size:"large",color:N.value});default:return console.warn(`Invalid swatch type ${r}`),null}})}),[E]);return t("div",{...l,className:x(["pdp-swatches",u]),children:e==null?void 0:e.map(({type:S,label:P,id:b,multiple:r,required:D,items:B})=>{var N;if(!S){console.warn("Bundle product not supported on UI.");return}return et.includes(S)||console.warn(`Invalid swatch type ${S}`),r&&console.warn("Multiple selection swatches are not currently supported."),H("div",{id:`swatch-item-${b}`,"data-slot-key":`product-swatch--${b}`,className:"pdp-swatches__field",children:[t("div",{className:"pdp-swatches__field__label",children:c[b]?d?`${P}`:`${P}: ${c[b].label}`:P}),t(F,{id:b,type:S,required:D,items:B,label:P,selected:(N=c[b])==null?void 0:N.value})]},`swatch-item-${b}`)})})},rt=({children:e,scale:d=2})=>{const[h,_]=Z(!1),[p,A]=Z({x:"0%",y:"0%"}),u=m=>{var b;const E=(b=m.currentTarget)==null?void 0:b.getBoundingClientRect(),I=(100-100/d)/2,F=m.type==="touchmove"?m.touches[0]:m,S=I-(F.clientX-E.x)/E.width*100,P=I-(F.clientY-E.y)/E.height*100;A({x:`${Math.max(-I,Math.min(S,I))||0}%`,y:`${Math.max(-I,Math.min(P,I))||0}%`})},w=m=>{h?_(!1):(_(!0),u(m))},l=m=>{h&&u(m)},q=()=>{_(!1)},c=h?`scale(${d}) translateX(${p.x}) translateY(${p.y})`:"none";return t("figure",{className:"pdp-zoom",onClick:w,onMouseMove:l,onMouseLeave:q,onTouchStart:w,onTouchMove:l,onTouchEnd:q,children:Ge(ce.only(e),{style:{"-webkit-transform":c,"-moz-transform":c,"-ms-transform":c,"-o-transform":c,transform:c}})})};function lt(e,d="en_US"){if(!Be(e))throw Error("Invalid date string");return e.split(" ")[1]||(e=`${e} 00:00:00`),new Date(e).toLocaleDateString(Ne(d)).toString()}function Be(e){if(![/^\d{4}-\d{2}-\d{2}$/,/^\d{1,2}\/\d{1,2}\/\d{4}$/,/^\d{2}\/\d{2}\/\d{4}$/,/^\d{4}\/\d{2}\/\d{2}$/,/^\d{1,2}\.\d{1,2}\.\d{4}$/,/^\d{4}-\d{2}-\d{2} \d{2}:\d{2}:\d{2}$/].some(_=>_.test(e)))return!1;const h=new Date(e);return!isNaN(h.getTime())}function ct(e){const d=new URLSearchParams(window.location.search);Object.entries(e).forEach(([_,p])=>{p===null?d.delete(_):d.set(_,String(p))});let h=window.location.pathname;h+=`?${d.toString()}`,h+=window.location.hash,window.history.replaceState({},"",h)}function at(){const e=new URLSearchParams(window.location.search),d={};return e.forEach((h,_)=>{d[_]=h}),d}function ot(e){var d,h,_,p,A,u,w,l,q,c,m,E;return{productId:Number(e==null?void 0:e.externalId),name:e==null?void 0:e.name,sku:e==null?void 0:e.sku,topLevelSku:e==null?void 0:e.externalParentId,specialToDate:void 0,specialFromDate:void 0,newToDate:void 0,newFromDate:void 0,createdAt:void 0,updatedAt:void 0,manufacturer:void 0,countryOfManufacture:void 0,categories:void 0,productType:void 0,pricing:{regularPrice:((h=(d=e==null?void 0:e.prices)==null?void 0:d.regular)==null?void 0:h.amount)||0,minimalPrice:(p=(_=e==null?void 0:e.prices)==null?void 0:_.final)==null?void 0:p.minimumAmount,maximalPrice:(u=(A=e==null?void 0:e.prices)==null?void 0:A.final)==null?void 0:u.maximumAmount,specialPrice:(l=(w=e==null?void 0:e.prices)==null?void 0:w.final)==null?void 0:l.amount,tierPricing:void 0,currencyCode:((c=(q=e==null?void 0:e.prices)==null?void 0:q.final)==null?void 0:c.currency)||"USD"},canonicalUrl:e==null?void 0:e.url,mainImageUrl:(E=(m=e==null?void 0:e.images)==null?void 0:m[0])==null?void 0:E.url}}const dt={PRODUCT_CONTEXT:"productContext"},it={PRODUCT_PAGE_VIEW:"product-page-view"};function Re(){return window.adobeDataLayer=window.adobeDataLayer||[],window.adobeDataLayer}function st(e,d){const h=Re();h.push({[e]:null}),h.push({[e]:d})}function ht(e,d){Re().push(_=>{const p=_.getState?_.getState():{};_.push({event:e,eventInfo:{...p,...d}})})}function Ee(e){const d=ot(e);st(dt.PRODUCT_CONTEXT,d),ht(it.PRODUCT_PAGE_VIEW)}const pt=({sku:e,hideSku:d,hideQuantity:h,hideShortDescription:_,hideDescription:p,hideAttributes:A,hideURLParams:u,hideSelectedOptionValue:w,slots:l,children:q,initialData:c,carousel:m,optionsConfig:E,useACDL:I,onAddToCart:F,...S})=>{var M,j,V,k;const P=z("PDP.Product.AddToCart.label").label,b=z("PDP.Product.Incrementer.label").label,r=z("PDP.Product.Details.label").label,[D,B]=Z(Me.getConfig().defaultLocale||"en-US"),[N,ee]=Z(),[n=null,J]=Z(c),[$,T]=Z(()=>{const o={sku:e,quantity:1};return n!=null&&n.optionUIDs&&(o.optionsUIDs=n.optionUIDs),o}),[K,Y]=Z(()=>{var o,s;return!(n!=null&&n.options&&((o=n==null?void 0:n.options)==null?void 0:o.length)>0&&((s=n==null?void 0:n.optionUIDs)==null?void 0:s.length)!==(n==null?void 0:n.options.length))}),v={data:n,values:$,valid:K};re(()=>{const o=Fe.on("locale",s=>{s!==D&&(B(s),Ie(e).then(J))});return()=>{o==null||o.off()}},[D,e]),re(()=>{I&&c&&Object.keys(c).length>0&&Ee(c)},[c]);const ie=C(o=>{T(s=>({...s,...o}))},[]),le=C(o=>{var y;let s=Object.keys(o).map(f=>o[f].value).filter(f=>f!==void 0);u||ct({optionsUIDs:s.join(",")}),T(f=>({...f,optionsUIDs:s})),Y((s==null?void 0:s.length)===((y=n==null?void 0:n.options)==null?void 0:y.length)),$e(e,s,E==null?void 0:E.anchorOptions).then(f=>{var O;J(f),(O=E==null?void 0:E.anchorOptions)!=null&&O.length&&ae(f,s),I&&(f==null?void 0:f.sku)!==e&&Ee(f)})},[e]),ae=C((o,s)=>{var O;const y=(o==null?void 0:o.optionUIDs)??[];s.every(Q=>y.includes(Q))||(ee(o==null?void 0:o.options),T(Q=>({...Q,optionsUIDs:y})),Y((y==null?void 0:y.length)===((O=o==null?void 0:o.options)==null?void 0:O.length)))},[e]),se=C(o=>{Object.keys(o).length!==0&&Y(!1)},[]),te=we(()=>{var o;return(o=n==null?void 0:n.attributes)==null?void 0:o.map(({label:s,value:y},f)=>{const O=Be(y)?lt(y,D):y.toString();return H("li",{children:[s,": ",t("span",{dangerouslySetInnerHTML:{__html:O}})]},f)})},[n==null?void 0:n.attributes,D]),he=!h&&(n!=null&&n.inStock)?t(G,{name:"Quantity",slot:l==null?void 0:l.Quantity,context:{...v},children:t(qe,{name:"quantity",defaultValue:$.quantity.toString(),min:1,"aria-label":b,className:"pdp-product__quantity",onValue:o=>{ie({quantity:Number(o)})}},"quantity")}):void 0,oe=()=>{if(n!=null&&n.options)return t(G,{name:"Options",slot:l==null?void 0:l.Options,context:{...v},children:t(nt,{options:n.options,defaultOptions:$.optionsUIDs,selectionsToUpdate:N,hideSelectedValue:w,onValues:le,onErrors:se})})};return t("div",{...S,children:t(Ye,{title:t(G,{name:"Title",slot:l==null?void 0:l.Title,context:{...v},children:n==null?void 0:n.name}),sku:d?void 0:t(G,{name:"SKU",slot:l==null?void 0:l.SKU,context:{...v},children:n==null?void 0:n.sku}),options:oe(),breadcrumbs:(l==null?void 0:l.Breadcrumbs)&&t(G,{name:"Breadcrumbs",slot:l==null?void 0:l.Breadcrumbs,context:{...v,setSeparator(o){this._registerMethod((...s)=>{const y=o(...s),f=y&&t(ve,{source:y});this._setProps(O=>({...O,separator:f}))})},appendLink(o){this._registerMethod((...s)=>{const{text:y,...f}=o(...s),O=t("a",{...f,children:y});this._setProps(Q=>({...Q,categories:[...Q.categories||[],O]}))})},appendHTMLElement(o){this._registerMethod((...s)=>{const y=o(...s),f=this._htmlElementToVNode(y);this._setProps(O=>({...O,categories:[...O.categories||[],f]}))})}},render:({separator:o,categories:s})=>t(je,{separator:o,categories:s})}),quantity:he,actions:t(G,{name:"Actions",slot:l==null?void 0:l.Actions,context:{...v,appendButton(o){this._registerMethod((...s)=>{const y=o(...s);if(!y)return;const{text:f,icon:O,...Q}=y,ue=t(Pe,{type:"button",...Q,icon:O&&t(ve,{source:O}),children:f});this._setProps(me=>({children:[...me.children||[],ue]}))})}},children:!(l!=null&&l.Actions)&&t(Pe,{size:"medium",type:"submit",icon:t(ve,{source:"Cart"}),disabled:!(n!=null&&n.inStock)||!K,"aria-label":P,onClick:()=>F==null?void 0:F($),children:P})}),shortDescription:_?void 0:t(G,{name:"ShortDescription",slot:l==null?void 0:l.ShortDescription,context:{...v},children:t("div",{dangerouslySetInnerHTML:{__html:(n==null?void 0:n.shortDescription)??""}})}),description:p?void 0:t(G,{name:"Description",slot:l==null?void 0:l.Description,context:{...v},children:t("div",{dangerouslySetInnerHTML:{__html:(n==null?void 0:n.description)??""}})}),images:((M=n==null?void 0:n.images)==null?void 0:M.map(({label:o,url:s})=>{var y,f;return t(De,{title:o,alt:o,src:s,width:((y=m==null?void 0:m.imageParams)==null?void 0:y.width)??960,height:((f=m==null?void 0:m.imageParams)==null?void 0:f.height)??1191,params:(m==null?void 0:m.imageParams)??{width:960}},s)}))??[],specialPrice:(j=n==null?void 0:n.prices)!=null&&j.visible?t(G,{name:"SpecialPrice",slot:l==null?void 0:l.SpecialPrice,context:{...v},children:t(xe,{...n.prices.final,locale:Ne(D)})}):void 0,price:(V=n==null?void 0:n.prices)!=null&&V.visible&&n.prices.regular&&n.prices.final.amount!==(n==null?void 0:n.prices.regular.amount)?t(G,{name:"RegularPrice",slot:l==null?void 0:l.RegularPrice,context:{...v},children:t(xe,{...n.prices.regular,locale:Ne(D)})}):void 0,carouselConfig:{...m,thumbnails:m&&Object.keys(m).length?((k=n==null?void 0:n.images)==null?void 0:k.map(({label:o,url:s})=>{var y,f;return t(De,{title:o,alt:o,src:s,width:((y=m==null?void 0:m.thumbnailParams)==null?void 0:y.width)??200,height:((f=m==null?void 0:m.thumbnailParams)==null?void 0:f.height)??248,params:(m==null?void 0:m.thumbnailParams)??{width:200}},s)}))??[]:[]},outOfStock:!(n!=null&&n.inStock),attributes:A?void 0:t(G,{name:"Attributes",slot:l==null?void 0:l.Attributes,context:{...v},children:te!=null&&te.length?H(fe,{children:[r,t("ul",{children:te})]}):null}),galleryContent:(l==null?void 0:l.GalleryContent)&&t(G,{name:"GalleryContent",slot:l.GalleryContent,context:{...v}}),infoContent:(l==null?void 0:l.InfoContent)&&t(G,{name:"InfoContent",slot:l.InfoContent,context:{...v}}),productContent:(l==null?void 0:l.Content)&&t(G,{name:"Content",slot:l.Content,context:{...v}})})})};pt.getInitialData=async function({sku:e,optionsConfig:d}){var _,p,A,u,w,l;const h=((_=at().optionsUIDs)==null?void 0:_.split(","))||((l=(w=(u=(A=(p=Me)==null?void 0:p.getConfig())==null?void 0:A.models)==null?void 0:u.ProductDetails)==null?void 0:w.initialData)==null?void 0:l.optionsUIDs);return h!=null&&h.length?await $e(e,h,d==null?void 0:d.anchorOptions):await Ie(e)};export{pt as ProductDetails,pt as default};

package/package.json

@@ -1 +1 @@
-{"name": "@dropins/storefront-pdp", "version": "0.3.0", "@dropins/tools": "0.25.0"}
+{"name": "@dropins/storefront-pdp", "version": "0.4.0-beta1", "@dropins/tools": "0.25.0"}

package/render.js

@@ -1,2 +1,2 @@
-(function(p,t){try{if(typeof document<"u"){const r=document.createElement("style"),e=t.styleId;for(const a in t.attributes)r.setAttribute(a,t.attributes[a]);r.setAttribute("data-dropin",e),r.appendChild(document.createTextNode(p));const o=document.querySelector('style[data-dropin="sdk"]');if(o)o.after(r);else{const a=document.querySelector('link[rel="stylesheet"], style');a?a.before(r):document.head.append(r)}}}catch(r){console.error("dropin-styles (injectCodeFunction)",r)}})(".pdp-carousel{--icon-size: 32px;--icon-extra-padding: 8px;--thumb-peak: 32px;--thumbnails-col-width: 18.6%;position:relative;display:flex;flex-direction:var(--flex-carousel);align-items:center;gap:var(--gap);width:var(--width)}.pdp-carousel--thumbnailsColumn{justify-content:flex-end;align-items:start}.pdp-carousel--thumbnailsRow{align-items:center}.pdp-carousel--arrows{padding-left:calc(var(--icon-size) + var(--icon-extra-padding));padding-right:calc(var(--icon-size) + var(--icon-extra-padding));width:calc(var(--width) - 2 * var(--icon-size) - 2 * var(--icon-extra-padding))}.pdp-carousel__button{position:absolute;top:50%;transform:translateY(-50%);padding:0}.pdp-carousel__button--prev{left:0}.pdp-carousel__button--next{right:0}.pdp-carousel__button__icon--prev{transform:rotate(90deg)}.pdp-carousel__button__icon--next{right:0;transform:rotate(-90deg)}.pdp-carousel--main-image-controls.pdp-carousel--thumbnailsColumn .pdp-carousel__button--prev{left:var(--thumbnails-col-width)}.pdp-carousel--main-image-controls.pdp-carousel--thumbnailsRow .pdp-carousel__button--prev,.pdp-carousel--main-image-controls.pdp-carousel--thumbnailsRow .pdp-carousel__button--next{top:calc(var(--height) / 2)}.pdp-carousel__button--thumbnailsColumn{margin:auto;padding:0}.pdp-carousel__button--thumbnailsRow{padding:0}.pdp-carousel__button__icon--thumbnailsColumn--prev{transform:rotate(180deg)}.pdp-carousel__button__icon--thumbnailsRow--prev{transform:rotate(90deg)}.pdp-carousel__button__icon--thumbnailsRow--next{transform:rotate(-90deg)}.pdp-carousel__wrapper{--peak: 0px;scroll-padding:var(--peak);width:var(--total-width);height:var(--height);display:flex;flex-wrap:nowrap;gap:var(--gap);-webkit-overflow-scrolling:touch}.pdp-carousel__wrapper--horizontal{overflow-x:auto;overflow-y:hidden;scroll-snap-type:x mandatory}.pdp-carousel__slide{display:grid;grid-gap:var(--gap);grid-auto-columns:1fr;grid-auto-rows:100%;scroll-snap-align:end;scroll-snap-stop:always;flex-shrink:0}.pdp-carousel__slide--horizontal{grid-auto-flow:column;width:calc(100% - var(--peak))}.pdp-carousel__slide--horizontal.pdp-carousel__slide--orphan{width:calc((100% / var(--per-page) * var(--length)) - var(--peak) / var(--per-page) * var(--length) - var(--gap) / var(--per-page) * (var(--per-page) - var(--length)))}.pdp-carousel__slide>*{vertical-align:middle;max-width:100%;max-height:100%}.pdp-carousel__slide>img{object-fit:contain;width:100%;height:100%}.pdp-carousel__wrapper--peak{--peak: calc(var(--spacing-medium) + var(--gap))}.pdp-carousel__wrapper--scrollbar{--scroll-foreground: var(--color-neutral-600);--scroll-background: var(--color-neutral-400);scrollbar-color:var(--scroll-foreground) var(--scroll-background);scrollbar-width:thin}.pdp-carousel__wrapper:not(.pdp-carousel__wrapper--scrollbar){scrollbar-width:none}.pdp-carousel__wrapper:not(.pdp-carousel__wrapper--scrollbar)::-webkit-scrollbar{display:none}.pdp-carousel__wrapper--scrollbar::-webkit-scrollbar{width:4px;height:4px}.pdp-carousel__wrapper--scrollbar::-webkit-scrollbar-thumb{background:var(--scroll-foreground)}.pdp-carousel__wrapper--scrollbar::-webkit-scrollbar-track{background:var(--scroll-background)}.pdp-carousel__controls__container--thumbnailsRow{--thumbnails-spacing: var(--spacing-small);--thumbnails-box-width: var(--spacing-xxsmall);--thumbnails-rest: calc(var(--thumbnails-spacing) - var(--thumbnails-box-width));--thumbnails-width: calc((var(--width) - 2 * var(--icon-size) - 4 * var(--thumbnails-spacing) - var(--thumb-peak) - 2 * var(--thumbnails-box-width)) / 4);margin-top:var(--thumbnails-rest);width:var(--width);display:flex}.pdp-carousel__controls__container--thumbnailsColumn{--thumbnails-spacing: var(--spacing-small);--thumbnails-box-width: var(--spacing-xxsmall);--thumbnails-rest: calc(var(--thumbnails-spacing) - var(--thumbnails-box-width));--thumbnails-width: 100%;width:calc(var(--thumbnails-col-width) - var(--thumbnails-rest));margin-right:var(--thumbnails-rest)}.pdp-carousel__controls__container--thumbnailsColumn:not(.pdp-carousel__controls__container--no-arrows){height:calc(max(var(--height),4 * var(--thumbnails-spacing)) - 4 * var(--thumbnails-spacing))}.pdp-carousel__controls__container--thumbnailsColumn.pdp-carousel__controls__container--no-arrows{height:var(--height)}.pdp-carousel__controls__wrapper--thumbnailsColumn{max-height:100%;overflow-y:scroll}.pdp-carousel__controls__wrapper--thumbnailsRow{max-width:100%;overflow-x:scroll}.pdp-carousel__controls--thumbnailsRow>label>span:nth-last-child(1){margin-right:var(--thumbnails-box-width)}.pdp-carousel__controls__wrapper::-webkit-scrollbar{display:none}.pdp-carousel__controls__wrapper{-ms-overflow-style:none;scrollbar-width:none}.pdp-carousel__controls{display:flex;flex-direction:row;gap:var(--spacing-xsmall)}.pdp-carousel__controls--thumbnailsColumn{display:grid;grid-template-columns:repeat(1,1fr);grid-auto-rows:1fr;grid-row-gap:var(--thumbnails-spacing);padding:var(--thumbnails-box-width)}.pdp-carousel__controls--thumbnailsRow{grid-column-gap:var(--thumbnails-spacing);padding:var(--thumbnails-box-width)}.pdp-carousel__controls__button{border-radius:50%;width:10px;height:10px;padding:0;border:none;background:var(--color-neutral-400);cursor:pointer}.pdp-carousel__controls__button:hover{background:var(--color-neutral-500)}.pdp-carousel__controls__button:active,.pdp-carousel__controls__button--active{background:var(--color-neutral-600)}.pdp-carousel__slide--last{width:100%}.pdp-carousel__thumbnail__container input[type=radio]{opacity:0;position:absolute;width:0;height:0}.pdp-carousel__thumbnail__container .pdp-carousel__thumbnail__span{display:inline-block;--bg-color: var(--color-neutral-300);box-shadow:0 0 0 var(--shape-border-width-1) var(--color-neutral-400);position:relative;cursor:pointer;background-color:var(--bg-color);background-image:var(--background-image);background-repeat:no-repeat;background-size:cover;height:100%;width:100%;overflow:hidden}.pdp-carousel__thumbnail__content{width:inherit;position:absolute;top:-9999px;bottom:-9999px;left:-9999px;right:-9999px;margin:auto;overflow:hidden}.pdp-carousel__thumbnail__span:hover{box-shadow:0 0 0 var(--shape-border-width-3) var(--color-neutral-50),0 0 0 var(--shape-border-width-4) var(--color-neutral-500);outline:none}.pdp-carousel__controls__wrapper--thumbnailsRow .pdp-carousel__thumbnail__container{min-width:100px}.pdp-carousel__thumbnail__container input[type=radio]:not(:checked):active~.pdp-carousel-thumbnail__span{box-shadow:0 0 0 var(--shape-border-width-1) var(--color-neutral-500);outline:none}.pdp-carousel__thumbnail__container input[type=radio]:checked~.pdp-carousel__thumbnail__span,.pdp-carousel__thumbnail--selected{box-shadow:0 0 0 var(--shape-border-width-3) var(--color-neutral-50),0 0 0 var(--shape-border-width-4) var(--color-neutral-800)}.pdp-carousel__thumbnail__container input[type=radio]:checked:active~.pdp-carousel__thumbnail__span{box-shadow:0 0 0 var(--shape-border-width-3) var(--color-neutral-50),0 0 0 var(--shape-border-width-4) var(--color-neutral-600)}.pdp-carousel__thumbnail__container input[type=radio]:focus-visible+.pdp-carousel__thumbnail__span{box-shadow:0 0 0 var(--shape-border-width-3) var(--color-neutral-900),0 0 0 6px var(--color-neutral-400)}.pdp-carousel__thumbnail__span>img{object-fit:cover;width:100%;height:100%}.pdp-product{display:grid;grid-template-columns:repeat(var(--grid-1-columns),1fr);grid-column-gap:var(--grid-1-gutters);margin:0 var(--grid-1-margins)}.pdp-product__gallery-column{display:none}.pdp-product__content-column{grid-column:1 / span 4;color:var(--color-neutral-800)}.pdp-product__header{display:grid;grid-auto-rows:max-content;margin-bottom:var(--spacing-medium)}.pdp-product__breadcrumbs{grid-column:1 / -1;padding:var(--spacing-medium) 0 var(--spacing-xxbig)}.pdp-product__title{font:var(--type-display-3-font);letter-spacing:var(--type-display-3-letter-spacing);margin:0}.pdp-product__sku{font:var(--type-body-1-default-font);max-width:600px}.pdp-product__prices{display:flex;gap:var(--spacing-xsmall);margin-top:var(--spacing-medium)}.pdp-product__out-of-stock__text{font:var(--type-headline-2-strong-font)}.pdp-product__options{grid-column:1 / span 4}.pdp-product__price,.pdp-product__price-special{font:var(--type-headline-2-strong-font)}.pdp-product__price,.pdp-product__sku,.pdp-product__price-special,.pdp-product__out-of-stock__text{letter-spacing:var(--type-headline-2-strong-letter-spacing)}.pdp-product__price--grey{color:var(--color-neutral-500)}.pdp-product__actions,.pdp-product__actions--out-of-stock{display:grid;grid-auto-flow:row;gap:var(--grid-1-gutters);grid-auto-rows:max-content;margin-bottom:var(--spacing-xxbig);margin-top:var(--spacing-big)}.pdp-product__short_description,.pdp-product__attributes{font:var(--type-body-1-strong-font);letter-spacing:var(--type-body-1-strong-letter-spacing);margin-bottom:var(--spacing-small)}.pdp-product__description,.pdp-product__attributes li{font:var(--type-body-1-default-font);letter-spacing:var(--type-body-1-default-letter-spacing)}.pdp-product__attributes{margin-top:var(--spacing-xsmall)}.pdp-product__short_description p,.pdp-product__description p,.pdp-product__attributes li p{margin:0}.pdp-product__short_description figure,.pdp-product__description figure{margin:0}.pdp-product__short_description img,.pdp-product__description img{max-width:100%}.pdp-product__images--carousel{max-height:60vh}.pdp-product__images--carousel--thumbnails{max-height:90vh}.pdp-product__images__placeholder{background-color:var(--color-neutral-200)}.pdp-product__buttons{display:grid;grid-auto-rows:max-content;grid-gap:var(--grid-1-gutters)}.pdp-product__buttons a{text-align:center}.pdp-product__buttons a:hover{text-decoration:none}.pdp-product__overlay .pdp-overlay__content{width:100%;height:100%}.pdp-product__overlay__carousel{width:100%;height:100%;box-sizing:border-box}.pdp-product__overlay__carousel img{width:100%;height:100%;object-fit:contain}.pdp-carousel__controls__container--thumbnailsRow img,.pdp-carousel__controls__container--thumbnailsColumn img{object-fit:cover}.pdp-product__quantity,.pdp-product__buttons{grid-column:1 / span 4}@media only screen and (min-width: 1024px){.pdp-product__breadcrumbs{grid-column:2 / -2}.pdp-product{grid-template-columns:repeat(var(--grid-3-columns),1fr);grid-column-gap:var(--grid-3-gutters);margin:0 var(--grid-3-margins);position:relative}.pdp-product__column-container{position:relative;display:flex;flex-direction:column}.pdp-product__column-body{position:sticky;bottom:30%;align-self:flex-end}.pdp-product__gallery-column{display:block;grid-column:2 / span 6}.pdp-product__content-column{grid-column:8 / span 4;padding-top:var(--spacing-medium)}.pdp-product__images--carousel{display:none}.pdp-product__header{margin-bottom:var(--spacing-small)}.pdp-product__actions{grid-template-columns:repeat(var(--grid-1-columns),1fr);grid-column-gap:var(--grid-1-gutters);grid-row-gap:var(--spacing-xxbig);margin-top:var(--spacing-xxbig)}.pdp-product__quantity{grid-column:1 / span 2}.pdp-product__actions--out-of-stock{grid-template-columns:repeat(var(--grid-1-columns),1fr);grid-column-gap:var(--grid-1-gutters);grid-row-gap:var(--spacing-xxbig);margin-top:var(--spacing-small)}.pdp-product__buttons{grid-column:1 / span 4}.pdp-product__out-of-stock__text{grid-column:1 / span 2}.pdp-product__gallery-content,.pdp-product__content{grid-column:2 / span 6}}.pdp-gallery-grid{display:grid;grid-gap:var(--gap);grid-template-columns:repeat(1,1fr);grid-auto-rows:max-content}.pdp-gallery-grid__item>*{height:100%;max-width:100%;min-width:100%;vertical-align:middle;width:100%;object-fit:contain}.pdp-gallery-grid__item:only-child{grid-column:1 / span 2}.pdp-gallery-grid__item:first-child:nth-last-child(2){grid-column:1 / span 2;grid-row:1}.pdp-gallery-grid__item:nth-child(2):last-child{grid-column:1 / 3;grid-row:2}@media only screen and (min-width: 1024px){.pdp-gallery-grid{grid-template-columns:repeat(2,1fr)}}.pdp-price-range .dropin-price{letter-spacing:var(--type-headline-2-strong-letter-spacing);font:var(--type-headline-2-strong-font)}.pdp-price-range__label{font:var(--type-headline-2-strong-font);letter-spacing:var(--type-body-1-strong-letter-spacing);margin-left:5px;margin-right:5px}.pdp-overlay{position:fixed;top:0;left:0;z-index:1000;right:0;bottom:0;background-color:var(--color-neutral-50);display:flex;padding:var(--spacing-medium)}.pdp-overlay--centered{align-items:center;justify-content:center}.pdp-overlay__close-button{position:absolute;top:var(--spacing-medium);right:var(--spacing-medium);z-index:1001}.pdp-swatches{display:grid;grid-auto-flow:row;grid-gap:var(--grid-1-gutters);grid-auto-rows:max-content}.pdp-swatches__field{display:grid;font:var(--type-body-2-strong-font);grid-auto-rows:max-content;gap:var(--spacing-xsmall)}.pdp-swatches__field__label{font:var(--type-details-caption-1-font);letter-spacing:var(--type-details-caption-1-letter-spacing);color:var(--color-neutral-800)}.pdp-swatches__options{display:flex;flex-wrap:wrap;gap:var(--spacing-xsmall)}",{styleId:"PDP"});
+(function(p,t){try{if(typeof document<"u"){const r=document.createElement("style"),e=t.styleId;for(const a in t.attributes)r.setAttribute(a,t.attributes[a]);r.setAttribute("data-dropin",e),r.appendChild(document.createTextNode(p));const o=document.querySelector('style[data-dropin="sdk"]');if(o)o.after(r);else{const a=document.querySelector('link[rel="stylesheet"], style');a?a.before(r):document.head.append(r)}}}catch(r){console.error("dropin-styles (injectCodeFunction)",r)}})(".pdp-carousel{--icon-size: 32px;--icon-extra-padding: 8px;--thumb-peak: 32px;--thumbnails-col-width: 18.6%;position:relative;display:flex;flex-direction:var(--flex-carousel);align-items:center;gap:var(--gap);width:var(--width)}.pdp-carousel--thumbnailsColumn{justify-content:flex-end;align-items:start}.pdp-carousel--thumbnailsRow{align-items:center}.pdp-carousel--arrows{padding-left:calc(var(--icon-size) + var(--icon-extra-padding));padding-right:calc(var(--icon-size) + var(--icon-extra-padding));width:calc(var(--width) - 2 * var(--icon-size) - 2 * var(--icon-extra-padding))}.pdp-carousel__button{position:absolute;top:50%;transform:translateY(-50%);padding:0}.pdp-carousel__button--prev{left:0}.pdp-carousel__button--next{right:0}.pdp-carousel__button__icon--prev{transform:rotate(90deg)}.pdp-carousel__button__icon--next{right:0;transform:rotate(-90deg)}.pdp-carousel--main-image-controls.pdp-carousel--thumbnailsColumn .pdp-carousel__button--prev{left:var(--thumbnails-col-width)}.pdp-carousel--main-image-controls.pdp-carousel--thumbnailsRow .pdp-carousel__button--prev,.pdp-carousel--main-image-controls.pdp-carousel--thumbnailsRow .pdp-carousel__button--next{top:calc(var(--height) / 2)}.pdp-carousel__button--thumbnailsColumn{margin:auto;padding:0}.pdp-carousel__button--thumbnailsRow{padding:0}.pdp-carousel__button__icon--thumbnailsColumn--prev{transform:rotate(180deg)}.pdp-carousel__button__icon--thumbnailsRow--prev{transform:rotate(90deg)}.pdp-carousel__button__icon--thumbnailsRow--next{transform:rotate(-90deg)}.pdp-carousel__wrapper{--peak: 0px;scroll-padding:var(--peak);width:var(--total-width);height:var(--height);display:flex;flex-wrap:nowrap;gap:var(--gap);-webkit-overflow-scrolling:touch}.pdp-carousel__wrapper--horizontal{overflow-x:auto;overflow-y:hidden;scroll-snap-type:x mandatory}.pdp-carousel__slide{display:grid;grid-gap:var(--gap);grid-auto-columns:1fr;grid-auto-rows:100%;scroll-snap-align:end;scroll-snap-stop:always;flex-shrink:0}.pdp-carousel__slide--horizontal{grid-auto-flow:column;width:calc(100% - var(--peak))}.pdp-carousel__slide--horizontal.pdp-carousel__slide--orphan{width:calc((100% / var(--per-page) * var(--length)) - var(--peak) / var(--per-page) * var(--length) - var(--gap) / var(--per-page) * (var(--per-page) - var(--length)))}.pdp-carousel__slide>*{vertical-align:middle;max-width:100%;max-height:100%}.pdp-carousel__slide>img{object-fit:contain;width:100%;height:100%}.pdp-carousel__wrapper--peak{--peak: calc(var(--spacing-medium) + var(--gap))}.pdp-carousel__wrapper--scrollbar{--scroll-foreground: var(--color-neutral-600);--scroll-background: var(--color-neutral-400);scrollbar-color:var(--scroll-foreground) var(--scroll-background);scrollbar-width:thin}.pdp-carousel__wrapper:not(.pdp-carousel__wrapper--scrollbar){scrollbar-width:none}.pdp-carousel__wrapper:not(.pdp-carousel__wrapper--scrollbar)::-webkit-scrollbar{display:none}.pdp-carousel__wrapper--scrollbar::-webkit-scrollbar{width:4px;height:4px}.pdp-carousel__wrapper--scrollbar::-webkit-scrollbar-thumb{background:var(--scroll-foreground)}.pdp-carousel__wrapper--scrollbar::-webkit-scrollbar-track{background:var(--scroll-background)}.pdp-carousel__controls__container--thumbnailsRow{--thumbnails-spacing: var(--spacing-small);--thumbnails-box-width: var(--spacing-xxsmall);--thumbnails-rest: calc(var(--thumbnails-spacing) - var(--thumbnails-box-width));--thumbnails-width: calc((var(--width) - 2 * var(--icon-size) - 4 * var(--thumbnails-spacing) - var(--thumb-peak) - 2 * var(--thumbnails-box-width)) / 4);margin-top:var(--thumbnails-rest);width:var(--width);display:flex}.pdp-carousel__controls__container--thumbnailsColumn{--thumbnails-spacing: var(--spacing-small);--thumbnails-box-width: var(--spacing-xxsmall);--thumbnails-rest: calc(var(--thumbnails-spacing) - var(--thumbnails-box-width));--thumbnails-width: 100%;width:calc(var(--thumbnails-col-width) - var(--thumbnails-rest));margin-right:var(--thumbnails-rest)}.pdp-carousel__controls__container--thumbnailsColumn:not(.pdp-carousel__controls__container--no-arrows){height:calc(max(var(--height),4 * var(--thumbnails-spacing)) - 4 * var(--thumbnails-spacing))}.pdp-carousel__controls__container--thumbnailsColumn.pdp-carousel__controls__container--no-arrows{height:var(--height)}.pdp-carousel__controls__wrapper--thumbnailsColumn{max-height:100%;overflow-y:scroll}.pdp-carousel__controls__wrapper--thumbnailsRow{max-width:100%;overflow-x:scroll}.pdp-carousel__controls--thumbnailsRow>label>span:nth-last-child(1){margin-right:var(--thumbnails-box-width)}.pdp-carousel__controls__wrapper::-webkit-scrollbar{display:none}.pdp-carousel__controls__wrapper{-ms-overflow-style:none;scrollbar-width:none}.pdp-carousel__controls{display:flex;flex-direction:row;gap:var(--spacing-xsmall)}.pdp-carousel__controls--thumbnailsColumn{display:grid;grid-template-columns:repeat(1,1fr);grid-auto-rows:1fr;grid-row-gap:var(--thumbnails-spacing);padding:var(--thumbnails-box-width)}.pdp-carousel__controls--thumbnailsRow{grid-column-gap:var(--thumbnails-spacing);padding:var(--thumbnails-box-width)}.pdp-carousel__controls__button{border-radius:50%;width:10px;height:10px;padding:0;border:none;background:var(--color-neutral-400);cursor:pointer}.pdp-carousel__controls__button:hover{background:var(--color-neutral-500)}.pdp-carousel__controls__button:active,.pdp-carousel__controls__button--active{background:var(--color-neutral-600)}.pdp-carousel__slide--last{width:100%}.pdp-carousel__thumbnail__container input[type=radio]{opacity:0;position:absolute;width:0;height:0}.pdp-carousel__thumbnail__container .pdp-carousel__thumbnail__span{display:inline-block;--bg-color: var(--color-neutral-300);box-shadow:0 0 0 var(--shape-border-width-1) var(--color-neutral-400);position:relative;cursor:pointer;background-color:var(--bg-color);background-image:var(--background-image);background-repeat:no-repeat;background-size:cover;height:100%;width:100%;overflow:hidden}.pdp-carousel__thumbnail__content{width:inherit;position:absolute;top:-9999px;bottom:-9999px;left:-9999px;right:-9999px;margin:auto;overflow:hidden}.pdp-carousel__thumbnail__span:hover{box-shadow:0 0 0 var(--shape-border-width-3) var(--color-neutral-50),0 0 0 var(--shape-border-width-4) var(--color-neutral-500);outline:none}.pdp-carousel__controls__wrapper--thumbnailsRow .pdp-carousel__thumbnail__container{min-width:100px}.pdp-carousel__thumbnail__container input[type=radio]:not(:checked):active~.pdp-carousel-thumbnail__span{box-shadow:0 0 0 var(--shape-border-width-1) var(--color-neutral-500);outline:none}.pdp-carousel__thumbnail__container input[type=radio]:checked~.pdp-carousel__thumbnail__span,.pdp-carousel__thumbnail--selected{box-shadow:0 0 0 var(--shape-border-width-3) var(--color-neutral-50),0 0 0 var(--shape-border-width-4) var(--color-neutral-800)}.pdp-carousel__thumbnail__container input[type=radio]:checked:active~.pdp-carousel__thumbnail__span{box-shadow:0 0 0 var(--shape-border-width-3) var(--color-neutral-50),0 0 0 var(--shape-border-width-4) var(--color-neutral-600)}.pdp-carousel__thumbnail__container input[type=radio]:focus-visible+.pdp-carousel__thumbnail__span{box-shadow:0 0 0 var(--shape-border-width-3) var(--color-neutral-900),0 0 0 6px var(--color-neutral-400)}.pdp-carousel__thumbnail__span>img{object-fit:cover;width:100%;height:100%}.pdp-product{display:grid;grid-template-columns:repeat(var(--grid-1-columns),1fr);grid-column-gap:var(--grid-1-gutters);margin:0 var(--grid-1-margins)}.pdp-product__gallery-column{display:none}.pdp-product__content-column{grid-column:1 / span 4;color:var(--color-neutral-800)}.pdp-product__header{display:grid;grid-auto-rows:max-content;margin-bottom:var(--spacing-medium)}.pdp-product__breadcrumbs{grid-column:1 / -1;padding:var(--spacing-medium) 0 var(--spacing-xxbig)}.pdp-product__title{font:var(--type-display-3-font);letter-spacing:var(--type-display-3-letter-spacing);margin:0}.pdp-product__sku{font:var(--type-body-1-default-font);max-width:600px}.pdp-product__prices{display:flex;gap:var(--spacing-xsmall);margin-top:var(--spacing-medium)}.pdp-product__out-of-stock__text{font:var(--type-headline-2-strong-font)}.pdp-product__options{grid-column:1 / span 4}.pdp-product__price,.pdp-product__price-special{font:var(--type-headline-2-strong-font)}.pdp-product__price,.pdp-product__sku,.pdp-product__price-special,.pdp-product__out-of-stock__text{letter-spacing:var(--type-headline-2-strong-letter-spacing)}.pdp-product__price--grey{color:var(--color-neutral-500)}.pdp-product__actions,.pdp-product__actions--out-of-stock{display:grid;grid-auto-flow:row;gap:var(--grid-1-gutters);grid-auto-rows:max-content;margin-bottom:var(--spacing-xxbig);margin-top:var(--spacing-big)}.pdp-product__short_description,.pdp-product__attributes{font:var(--type-body-1-strong-font);letter-spacing:var(--type-body-1-strong-letter-spacing);margin-bottom:var(--spacing-small)}.pdp-product__description,.pdp-product__attributes li{font:var(--type-body-1-default-font);letter-spacing:var(--type-body-1-default-letter-spacing)}.pdp-product__attributes{margin-top:var(--spacing-xsmall)}.pdp-product__short_description p,.pdp-product__description p,.pdp-product__attributes li p{margin:0}.pdp-product__short_description figure,.pdp-product__description figure{margin:0}.pdp-product__short_description img,.pdp-product__description img{max-width:100%}.pdp-product__images--carousel{max-height:60vh}.pdp-product__images--carousel--thumbnails{max-height:90vh}.pdp-product__images__placeholder{background-color:var(--color-neutral-200)}.pdp-product__buttons{display:grid;grid-auto-rows:max-content;grid-gap:var(--grid-1-gutters)}.pdp-product__buttons a{text-align:center}.pdp-product__buttons a:hover{text-decoration:none}.pdp-product__overlay .pdp-overlay__content{width:100%;height:100%}.pdp-product__overlay__carousel{width:100%;height:100%;box-sizing:border-box}.pdp-product__overlay__carousel img{width:100%;height:100%;object-fit:contain}.pdp-carousel__controls__container--thumbnailsRow img,.pdp-carousel__controls__container--thumbnailsColumn img{object-fit:cover}.pdp-product__quantity,.pdp-product__buttons{grid-column:1 / span 4}@media only screen and (min-width: 1024px){.pdp-product__breadcrumbs{grid-column:2 / -2}.pdp-product{grid-template-columns:repeat(var(--grid-3-columns),1fr);grid-column-gap:var(--grid-3-gutters);margin:0 var(--grid-3-margins);position:relative}.pdp-product__column-container{position:relative;display:flex;flex-direction:column}.pdp-product__column-body{position:sticky;bottom:30%;align-self:flex-end}.pdp-product__gallery-column{display:block;grid-column:2 / span 6}.pdp-product__content-column{grid-column:8 / span 4;padding-top:var(--spacing-medium)}.pdp-product__images--carousel{display:none}.pdp-product__header{margin-bottom:var(--spacing-small)}.pdp-product__actions{grid-template-columns:repeat(var(--grid-1-columns),1fr);grid-column-gap:var(--grid-1-gutters);grid-row-gap:var(--spacing-xxbig);margin-top:var(--spacing-xxbig)}.pdp-product__quantity{grid-column:1 / span 2}.pdp-product__actions--out-of-stock{grid-template-columns:repeat(var(--grid-1-columns),1fr);grid-column-gap:var(--grid-1-gutters);grid-row-gap:var(--spacing-xxbig);margin-top:var(--spacing-small)}.pdp-product__buttons{grid-column:1 / span 4}.pdp-product__out-of-stock__text{grid-column:1 / span 2}.pdp-product__gallery-content,.pdp-product__content{grid-column:2 / span 6}}.pdp-gallery-grid{display:grid;grid-gap:var(--gap);grid-template-columns:repeat(1,1fr);grid-auto-rows:max-content}.pdp-gallery-grid__item>*{height:100%;max-width:100%;min-width:100%;vertical-align:middle;width:100%;object-fit:contain}.pdp-gallery-grid__item:only-child{grid-column:1 / span 2}.pdp-gallery-grid__item:first-child:nth-last-child(2){grid-column:1 / span 2;grid-row:1}.pdp-gallery-grid__item:nth-child(2):last-child{grid-column:1 / 3;grid-row:2}@media only screen and (min-width: 1024px){.pdp-gallery-grid{grid-template-columns:repeat(2,1fr)}}.pdp-price-range .dropin-price{letter-spacing:var(--type-headline-2-strong-letter-spacing);font:var(--type-headline-2-strong-font)}.pdp-price-range__label{font:var(--type-headline-2-strong-font);letter-spacing:var(--type-body-1-strong-letter-spacing);margin-left:5px;margin-right:5px}.pdp-overlay{position:fixed;top:0;left:0;z-index:1000;right:0;bottom:0;background-color:var(--color-neutral-50);display:flex;padding:var(--spacing-medium)}.pdp-overlay--centered{align-items:center;justify-content:center}.pdp-overlay__close-button{position:absolute;top:var(--spacing-medium);right:var(--spacing-medium);z-index:1001}.pdp-swatches{display:grid;grid-auto-flow:row;grid-gap:var(--grid-1-gutters);grid-auto-rows:max-content}.pdp-swatches__field{display:grid;font:var(--type-body-2-strong-font);grid-auto-rows:max-content;gap:var(--spacing-xsmall)}.pdp-swatches__field__label{font:var(--type-details-caption-1-font);letter-spacing:var(--type-details-caption-1-letter-spacing);color:var(--color-neutral-800)}.pdp-swatches__options{display:flex;flex-wrap:wrap;gap:var(--spacing-xsmall)}.pdp-zoom{cursor:zoom-in}.pdp-zoom img{transition:transform .2s}",{styleId:"PDP"});
 import{deepmerge as c,Render as u}from"@dropins/tools/lib.js";import{useState as f,useEffect as m}from"@dropins/tools/preact-hooks.js";import{UIProvider as b}from"@dropins/tools/components.js";import{events as d}from"@dropins/tools/event-bus.js";import{jsx as r}from"@dropins/tools/preact-jsx-runtime.js";import{c as g}from"./chunks/initialize.js";const P={Product:{Incrementer:{label:"Item Quantity"},OutOfStock:{label:"Out of Stock"},AddToCart:{label:"Add to Cart"},Details:{label:"Details"},RegularPrice:{label:"Regular Price"},SpecialPrice:{label:"Special Price"},PriceRange:{From:{label:"From"},To:{label:"to"}},Image:{label:"{product} Image {key} of {total}"}},Swatches:{Required:{label:"Required"}},Carousel:{label:"Carousel",Next:{label:"Next"},Previous:{label:"Previous"},Slide:{label:"Slide"},Controls:{label:"Carousel Controls",Button:{label:"Show slide {key} of {total}"}}},Overlay:{Close:{label:"Close"}}},C={quantityLabel:"Passengers"},p={PDP:P,Custom:C},S={default:p},D=({children:a})=>{var t;const[e,i]=f(),n=(t=g.getConfig())==null?void 0:t.langDefinitions;m(()=>{const o=d.on("locale",l=>{l!==e&&i(l)},{eager:!0});return()=>{o==null||o.off()}},[e]);const s=c(S,n??{});return r(b,{lang:e,langDefinitions:s,children:a})},O=new u(r(D,{}));export{O as render};