"use strict";(self.webpackChunkui=self.webpackChunkui||[]).push([[9],{86:(e,s,r)=>{r.d(s,{a:()=>t,b:()=>l});var n=r(2);const t=(e,s,r)=>{const[t,l]=(0,n.useState)([]),[o,a]=(0,n.useState)(!1),c=(0,n.useCallback)(((e,n)=>{n&&n.preventDefault(),s(e),r(!1)}),[]),i=(0,n.useCallback)((s=>{s.preventDefault(),1===e.length||r(!0)}),[e.length]);return(0,n.useEffect)((()=>{(()=>{if(e.length<=3)return l(e);const s=e.slice(0,3);l(s)})(),a(!0)}),[]),{firstThreeColors:t,handleColorChange:c,handleOpenColorPicker:i,jsLoaded:o}};function l(e){const[s,r]=(0,n.useState)(0),[t,l]=(0,n.useState)(!1),{elementRef:o}=function(e){const[s,t]=(0,n.useState)(!1),l=(0,n.useRef)(null);return(0,n.useLayoutEffect)((()=>{if(!s)return;const e=l.current;if(!e)return;const n=new ResizeObserver((e=>{var s;void 0!==e[0]&&(s=e[0],r(s.target.getBoundingClientRect().width))}));return n.observe(e),()=>n.disconnect()}),[s]),(0,n.useEffect)((()=>{t(!0)}),[]),{elementRef:l}}();return(0,n.useEffect)((()=>{const r=e,n=Math.floor(s/24);l(r>5&&r>=n)}),[e,s]),{isCarousel:t,colorPickerContainerRef:o}}},156:(e,s,r)=>{r.d(s,{a:()=>w});var n=r(0),t=r(1),l=r(281),o=r(2),a=r(9);const c={slides:{perView:"auto"},mode:"snap",drag:!0,loop:!0};var i=r(85),d=r(12);const{colorPicker:u,colorPickerActive:g,btn:h,btnActive:b,btnColor:C,btnColorActive:f}=d.a,k=({values:e,isPickerOpen:s,selectedProduct:r,handleColorChange:t})=>{const{slider2Ref:d,isJsDisabled:k}=(e=>{const[s,r]=(0,a.a)(c),[n,t]=(0,o.useState)(!0);var l,i;return(0,o.useEffect)((l=r,i=c,()=>(l.current&&l.current.update(Object.assign({},i)),()=>{l.current&&l.current.destroy()})),[r.current,e]),(0,o.useEffect)((()=>{t(!0)}),[]),{slider2Ref:s,isJsDisabled:n}})(s),j=[...e,...e];return(0,n.jsx)("div",Object.assign({className:(0,l.a)(s&&g,k&&"noJsForPickerCarousel",u)},{children:(0,n.jsx)("div",Object.assign({ref:d,className:(0,l.a)("keen-slider")},{children:j.map(((e,s)=>{const o=(0,i.a)(e.color),a=`${C} ${r===e.handle?f:""}`,c=r===e.handle;return(0,n.jsx)("div",Object.assign({className:`keen-slider__slide number-slide${s+1}`,style:{minWidth:"24px"}},{children:(0,n.jsx)("button",Object.assign({className:(0,l.a)(h,c&&b),type:"button",onClick:s=>{t(e.handle,s)}},{children:(0,n.jsx)("span",{className:a,style:o})}))}),`${e.handle}${s}`)}))}))}))};var j=r(86);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"},v=e=>{if(!Object.keys(p).includes(e))return{backgroundColor:"#888"};const s=p[e];return"string"==typeof s?{backgroundColor:s}:s};var m=r(13);const{colors:F,colorsNumber:x,colorsNumberLeft:O,colorsNumberHidden:P,colorsActive:N,colorPicker:E,colorPickerActive:y,btn:A,btnColor:D,btnColorActive:$}=m.a,w=({selectedProduct:e,values:s,toggleColorPicker:r,isPickerOpen:o,handlePickerState:a,isCarousel:c,showsInitialThreeColors:i=!0,colorLabel:d="",colorsLabel:u=""})=>{const{firstThreeColors:g,handleColorChange:h,handleOpenColorPicker:b,jsLoaded:C}=(0,j.a)(s,r,a),f=s.length-g.length,p=20*g.length,m=s.length;return(0,n.jsxs)(t.Fragment,{children:[i?(0,n.jsxs)("div",Object.assign({className:(0,l.a)(F,o&&N),style:{width:p},onClick:b},{children:[g.map((e=>{const s=v(e.color);return(0,n.jsx)("span",{style:s},e.handle)})),(0,n.jsx)("div",Object.assign({className:(0,l.a)(x,!C&&P)},{children:f>0?(0,n.jsx)("span",{children:`+${f}`}):null}))]})):(0,n.jsx)("div",Object.assign({className:(0,l.a)(F,o&&N),onClick:b},{children:(0,n.jsx)("div",Object.assign({className:(0,l.a)(O,!C&&P)},{children:(0,n.jsx)("span",{children:`${m} ${m>1?u:d}`})}))})),c?(0,n.jsx)(k,{selectedProduct:e,handleColorChange:h,values:s,isPickerOpen:o}):(0,n.jsx)("div",Object.assign({className:(0,l.a)(E,o&&y)},{children:s.map((s=>{const r=v(s.color),t=`${D} ${e===s.handle?$:""}`;return(0,n.jsx)("button",Object.assign({className:A,type:"button",onClick:e=>{h(s.handle,e)}},{children:(0,n.jsx)("span",{className:t,style:r})}))}))}))]})}}}]);