"use strict";(self.webpackChunkui=self.webpackChunkui||[]).push([[7],{73:(e,r,n)=>{n.d(r,{a:()=>o,b:()=>t});var s=n(2);const o=(e,r,n)=>{const[o,t]=(0,s.useState)([]),[l,a]=(0,s.useState)(!1),c=(0,s.useCallback)(((e,s)=>{s&&s.preventDefault(),r(e),n(!1)}),[]),d=(0,s.useCallback)((()=>{1===e.length||n(!0)}),[e.length]);return(0,s.useEffect)((()=>{(()=>{if(e.length<=3)return t(e);const r=e.slice(0,3);t(r)})(),a(!0)}),[]),{firstThreeColors:o,handleColorChange:c,handleOpenColorPicker:d,jsLoaded:l}};function t(e){const[r,n]=(0,s.useState)(0),[o,t]=(0,s.useState)(!1),{elementRef:l}=function(e){const r=(0,s.useRef)(null);return(0,s.useLayoutEffect)((()=>{const e=r.current;if(!e)return;const s=new ResizeObserver((e=>{var r;void 0!==e[0]&&(r=e[0],n(r.target.getBoundingClientRect().width))}));return s.observe(e),()=>s.disconnect()}),[]),{elementRef:r}}();return(0,s.useEffect)((()=>{const n=e,s=Math.floor(r/24);t(n>5&&n>=s)}),[e,r]),{isCarousel:o,colorPickerContainerRef:l}}},146:(e,r,n)=>{n.d(r,{a:()=>w});var s=n(0),o=n(1),t=n(270),l=n(2),a=n(6);const c={slides:{perView:"auto"},mode:"snap",drag:!0,loop:!0};var d=n(46),i=n(11);const{colorPicker:u,colorPickerActive:g,btn:b,btnActive:C,btnColor:F,btnColorActive:h}=i.a,k=({values:e,isPickerOpen:r,selectedProduct:n,handleColorChange:o})=>{const{slider2Ref:i,isJsDisabled:k}=(e=>{const[r,n]=(0,a.a)(c),[s,o]=(0,l.useState)(!0);var t,d;return(0,l.useEffect)((t=n,d=c,()=>(t.current&&t.current.update(Object.assign({},d)),()=>{t.current&&t.current.destroy()})),[n.current,e]),(0,l.useEffect)((()=>{o(!0)}),[]),{slider2Ref:r,isJsDisabled:s}})(r),f=[...e,...e];return(0,s.jsx)("div",Object.assign({className:(0,t.a)(r&&g,k&&"noJsForPickerCarousel",u)},{children:(0,s.jsx)("div",Object.assign({ref:i,className:(0,t.a)("keen-slider")},{children:f.map(((e,r)=>{const l=(0,d.a)(e.color),a=`${F} ${n===e.handle?h:""}`,c=n===e.handle;return(0,s.jsx)("div",Object.assign({className:`keen-slider__slide number-slide${r+1}`,style:{minWidth:"24px"}},{children:(0,s.jsx)("button",Object.assign({className:(0,t.a)(b,c&&C),type:"button",onClick:r=>{o(e.handle,r)}},{children:(0,s.jsx)("span",{className:a,style:l})}))}),`${e.handle}${r}`)}))}))}))};var f=n(73);const p={Animal:"#D49C4A",Black:"#000000",Blue:"#719EF9",Floral:"#AE99D2",Green:"#59712C",Grey:"#808080",Ivory:{background:"#FFFFD7",border:"0.3px solid #000000"},"Multi-coloured":{background:"conic-gradient(from 191.94deg at 50% 50%, #FFCC4D 0deg, #719EF9 67.5deg, #64C67A 133.12deg, #B03954 202.5deg, #E45676 247.5deg, #F79E1B 313.12deg, #FFCC4D 360deg)"},Orange:"#FFA500",Pink:"#e45676",Print:{background:"conic-gradient(from 191.94deg at 50% 50%, #FFCC4D 0deg, #719EF9 67.5deg, #64C67A 133.12deg, #B03954 202.5deg, #E45676 247.5deg, #F79E1B 313.12deg, #FFCC4D 360deg)"},Purple:"#800080",Red:"#B22222","Skin Tones":"#e9bea5","New Beige":"#e9bea5",Spots:"#000080",White:{background:"#F9F9F9",border:"0.3px solid #000000"},Yellow:"#FFD700"},j=e=>{if(!Object.keys(p).includes(e))return{backgroundColor:"#888"};const r=p[e];return"string"==typeof r?{backgroundColor:r}:r};var m=n(12);const{colors:v,colorsNumber:x,colorsNumberLeft:P,colorsNumberHidden:E,colorsActive:O,colorPicker:D,colorPickerActive:A,btn:y,btnColor:B,btnColorActive:N}=m.a,w=({selectedProduct:e,values:r,toggleColorPicker:n,isPickerOpen:l,handlePickerState:a,isCarousel:c,showsInitialThreeColors:d=!0,colorLabel:i="",colorsLabel:u=""})=>{const{firstThreeColors:g,handleColorChange:b,handleOpenColorPicker:C,jsLoaded:F}=(0,f.a)(r,n,a),h=r.length-g.length,p=20*g.length,m=r.length;return(0,s.jsxs)(o.Fragment,{children:[d?(0,s.jsxs)("div",Object.assign({className:(0,t.a)(v,l&&O),style:{width:p},onClick:C},{children:[g.map((e=>{const r=j(e.color);return(0,s.jsx)("span",{style:r},e.handle)})),(0,s.jsx)("div",Object.assign({className:(0,t.a)(x,!F&&E)},{children:h>0?(0,s.jsx)("span",{children:`+${h}`}):null}))]})):(0,s.jsx)("div",Object.assign({className:(0,t.a)(v,l&&O),onClick:C},{children:(0,s.jsx)("div",Object.assign({className:(0,t.a)(P,!F&&E)},{children:(0,s.jsx)("span",{children:`${m} ${m>1?u:i}`})}))})),c?(0,s.jsx)(k,{selectedProduct:e,handleColorChange:b,values:r,isPickerOpen:l}):(0,s.jsx)("div",Object.assign({className:(0,t.a)(D,l&&A)},{children:r.map((r=>{const n=j(r.color),o=`${B} ${e===r.handle?N:""}`;return(0,s.jsx)("button",Object.assign({className:y,type:"button",onClick:e=>{b(r.handle,e)}},{children:(0,s.jsx)("span",{className:o,style:n})}))}))}))]})}},46:(e,r,n)=>{n.d(r,{a:()=>o});const s={Animal:"#D49C4A",Black:"#000000",Blue:"#719EF9",Floral:"#AE99D2",Green:"#59712C",Grey:"#808080",Ivory:{background:"#FFFFD7",border:"0.3px solid #000000"},"Multi-coloured":{background:"conic-gradient(from 191.94deg at 50% 50%, #FFCC4D 0deg, #719EF9 67.5deg, #64C67A 133.12deg, #B03954 202.5deg, #E45676 247.5deg, #F79E1B 313.12deg, #FFCC4D 360deg)"},Orange:"#FFA500",Pink:"#e45676",Print:{background:"conic-gradient(from 191.94deg at 50% 50%, #FFCC4D 0deg, #719EF9 67.5deg, #64C67A 133.12deg, #B03954 202.5deg, #E45676 247.5deg, #F79E1B 313.12deg, #FFCC4D 360deg)"},Purple:"#800080",Red:"#B22222","Skin Tones":"#e9bea5","New Beige":"#e9bea5",Spots:"#000080",White:{background:"#F9F9F9",border:"0.3px solid #000000"},Yellow:"#FFD700"},o=e=>{if(!Object.keys(s).includes(e))return{backgroundColor:"#888"};const r=s[e];return"string"==typeof r?{backgroundColor:r}:r}}}]);