https://www.benjaminmoore.com/_next/static/chunks/5386.43b272b0f87d978f.js

1"use strict";(self.webpackChunk_N_E=self.webpackChunk_N_E||[]).push([[5386],{15386:function(e,l,t){t.r(l),t.d(l,{default:function(){return D}});var i=t(67294),o=t(47),n=t(43687),a=t(51815),r=()=>{let e={xs:(0,o.ac)({query:a.lJ.sm}),md:(0,o.ac)({query:a.lJ.md}),lg:(0,o.ac)({query:a.lJ.lg}),xl:(0,o.ac)({query:a.lJ.xl}),xxl:(0,o.ac)({query:a.lJ.xxl})};return Object.keys(e).find(l=>e[l])},s=t(43217),c=t(87379),d=t(23928);let p=c.ZP.div.withConfig({displayName:"ColorByFamilyDetailstyles__ColorByFamilyDetailWrapper",componentId:"sc-zolz9i-0"})([".titleContainer{padding:72px 35px 40px;","{}","{padding:72px 56px 40px;}","{padding:91px 72px 71px;}","{}","{}}.paginationContainer{background-color:",";padding-bottom:8px;}.descContainer{display:flex;flex-direction:column;gap:32px;padding:54px 35px 80px;font-size:14px;p{flex:1;}","{}","{padding:64px 45px 88px;flex-direction:row;gap:24px;font-size:16px;}","{padding:81px 72px 104px;gap:32px;}","{}","{}}"],a.Ri.sm,a.Ri.md,a.Ri.lg,a.Ri.xl,a.Ri.xxl,d.default.colors.white,a.Ri.sm,a.Ri.md,a.Ri.lg,a.Ri.xl,a.Ri.xxl);var g=t(239),x=t(52845),u=t(98630),h=t(59809),f=t(93618),m=t(78715);let y=(e,l)=>Array.from({length:l-e+1},(l,t)=>t+e),b=({siblingCount:e=1,currentPage:l,totalPages:t})=>{let i=l+1;if(e+4>=t)return y(1,t);let o=Math.max(i-e,1),n=Math.min(i+e,t),a=o>2,r=n<t-1;if(!a&&r){let l=2+2*e,o=y(1,l);return l-1-i!=0&&o.pop(),[...o,"...",t]}if(a&&!r){let l=y(t-(2+2*e)+1,t);return t-i!=2&&l.shift(),[1,"...",...l]}if(a&&r)return[1,"...",...y(o,n),"...",t]},_=c.ZP.div.withConfig({displayName:"Paginationstyles__MainWrapper",componentId:"sc-vsxlli-0"})(["display:flex;justify-content:space-between;flex-direction:column;overflow:auto;align-items:center;"]),C=c.ZP.ul.withConfig({displayName:"Paginationstyles__List",componentId:"sc-vsxlli-1"})(["display:flex;list-style-type:none;margin:8px 0px 0px;padding:0;"]),w=c.ZP.li.withConfig({displayName:"Paginationstyles__ListItem",componentId:"sc-vsxlli-2"})(["text-align:center;min-width:32px;min-height:32px;display:flex;align-items:center;justify-content:center;&:not(:first-child){margin:0 0 0 8px;}> button{width:100%;border-radius:4px;height:100%;padding:4px;font-weight:bold;&:focus{outline:2px solid ",";outline-offset:-2px;}}",""],({theme:e})=>e.colors.focus_color,({selected:e,theme:l})=>e?(0,c.iv)(["> button{background-color:",";color:",";border:1px solid ",";}"],l.colors.dark_grey_1,l.colors.white,l.colors.dark_grey_1):(0,c.iv)(["> button{&:not([disabled]):hover{background-color:",";}}"],({theme:e})=>e.colors.off_white)),v=c.ZP.li.withConfig({displayName:"Paginationstyles__Ellipsis",componentId:"sc-vsxlli-3"})(["min-width:32px;margin-left:8px;display:flex;align-items:center;justify-content:center;font-size:16px;"]),j=(0,c.ZP)(w).withConfig({displayName:"Paginationstyles__Arrow",componentId:"sc-vsxlli-4"})(["button:disabled{cursor:not-allowed;opacity:1;svg{fill:",";}}button{svg{fill:",";}}"],({theme:e})=>e.colors.medium_grey_1,({theme:e})=>e.colors.dark_grey_1),k=c.ZP.div.withConfig({displayName:"Paginationstyles__PageRangeContainer",componentId:"sc-vsxlli-5"})([""]);var P=t(52105),Z=t(53351),N=t(99192),I=t(85893);let S=(0,m.G)();var W=e=>{let{globalSettings:l}=(0,N.bN)(),{global:t}=l?.globalDictionaries??{},{next_page_label:o="",prev_page_label:n="",page_label:a="",pagination_range_label:r=""}=t??{},{currentPage:s,itemsPerPage:c,totalItems:d,onPageClick:p}=e,g=(0,i.useCallback)(e=>()=>{e!==s&&p(e)},[s,p]),x=Math.ceil(d/c)||0,u=b({currentPage:s,totalPages:x}),h=u?.length,f=u[h-1]-1,m=s===f,y=(0,i.useMemo)(()=>{let e=(s+1)*c-c+1,l=s===f?d:(s+1)*c,t=s+1>x?"-":`${e}-${l}`;return S(r)({range:t,total:d})},[s,c,f,r,d,x]),W=(0,i.useMemo)(()=>S(a),[a]);return c&&d?(0,I.jsxs)(_,{children:[(0,I.jsx)(k,{children:(0,I.jsx)(Z.mn,{$color:"placeHolder_color",$fontWeight:"bold",dangerouslySetInnerHTML:{__html:y}})}),(0,I.jsxs)(C,{children:[(0,I.jsx)(j,{children:(0,I.jsx)(P.Dr,{"data-testid":"Pagination_PreviousPageButton","aria-label":n,onClick:g(s-1),icon:{icon:"arrow",rotation:180},disabled:0===s,$scaleOnHover:!1})}),u.map((e,l)=>{if("..."===e.toString())return(0,I.jsx)(v,{children:"…"},`${e}_${l}`);let t=s===e-1;return(0,I.jsx)(w,{selected:t,children:(0,I.jsx)(P.Dr,{"aria-pressed":t,onClick:g(e-1),$scaleOnHover:!1,"aria-label":W({page:e}),children:(0,I.jsx)(Z.pA,{$fontWeight:"medium",children:e})})},`${e}_${l}`)}),(0,I.jsx)(j,{children:(0,I.jsx)(P.Dr,{"data-testid":"Pagination_NextPageButton","aria-label":o,icon:{icon:"arrow"},onClick:g(s+1),disabled:m,$scaleOnHover:!1})})]})]}):null},$=t(45968),D=e=>{let{content_data:l,gridConfig:t}=e,c=r(),{0:d,1:m}=(0,i.useState)(0),{0:y,1:b}=(0,i.useState)(!0),{0:_,1:C}=(0,i.useState)(!1),w=(0,i.useRef)(),v=t??n.xG,{numberOfItemsPerColumn:j,numberOfItemsPerRow:k}=v[c]??v.xl,P=(0,i.useMemo)(()=>j*k,[j,k]),{fields:N,color_data:S}=l??{},{title:D,description:O,default_color:T,family_Code:B}=N??{},{name:H,colors:R=[]}=S?.data?.[0]??{},A=R?.find(({number:e})=>e===T),E=`#${A?.hex??"ffffff"}`,M=(0,i.useMemo)(()=>R.filter(e=>e?.is_best_selling),[R]),z=`colorByFamilyDetail_accordion_${B}`,F=`colorByFamilyDetail_accordion_toggle_${B}`,L=`colorByFamilyDetail_colorWall_title_${B}`,q=(0,o.ac)({query:a.r3.lg}),J=(0,s.Z)();(0,i.useEffect)(()=>{m(0)},[P]);let G=(0,i.useCallback)(()=>{b(e=>!e),C(!1)},[]),Q=(0,i.useCallback)(()=>{C(e=>!e)},[]),V=(0,i.useCallback)(e=>{m(e);let l=w.current,t=(0,u.Zn)(l);window.scroll({top:t,behavior:"smooth"});let i=l.querySelector("button, a");i?.focus({preventScroll:!0})},[]),K=(0,i.useMemo)(()=>R.slice(d*P,P*(d+1)),[P,R,d]),U={[$.Z.keys.colorAttributeName]:D,[$.Z.keys.colorAttributeCode]:B,[$.Z.keys.colorAttributeType]:$.Z.keys.colorAttributeFamilyType};return(0,I.jsxs)(p,{className:"colorByFamilyDetail","data-testid":"ColorByFamilyDetail",ref:w,children:[D?(0,I.jsx)("div",{className:"titleContainer",children:(0,I.jsx)(Z.H1,{"data-testid":"ColorByFamilyDetail_Title",children:D})}):null,(0,I.jsxs)("div",{className:"contentContainer",children:[(0,I.jsx)(f.Z,{title:H,titleId:L,backgroundColor:E,showBestSellingToggle:y&&M?.length>0,bestSellingToggled:_,handleBestSellingClick:Q,accordionExpanded:y,accordionToggleId:F,controlledAccordionId:z,handleAccordionCl

1ick:G}),(0,I.jsxs)(g.Z,{in:y,transitionTime:500,controlledId:z,ariaLabeledBy:L,children:[(0,I.jsx)("div",{className:"colorGridContainer",children:_?(0,I.jsx)(x.Z,{colors:M,segmentTrackingData:U}):(0,I.jsx)(h.Z,{colors:K,gridConfig:v,segmentTrackingData:U,scaleOnHover:J&&q})}),!_&&(0,I.jsx)("div",{className:"paginationContainer","data-testid":"ColorByFamilyDetail_Pagination",children:(0,I.jsx)(W,{currentPage:d,itemsPerPage:P,totalItems:R.length,onPageClick:V})})]}),O?(0,I.jsx)("div",{"data-testid":"ColorByFamilyDetail_Description",className:"descContainer",dangerouslySetInnerHTML:{__html:O}}):null]})]})}},239:function(e,l,t){t.d(l,{Z:function(){return u}});var i=t(8307),o=t(67294),n=t(98885),a=t(87379);let r=a.ZP.div.withConfig({displayName:"Accordionstyles__Container",componentId:"sc-1opm6d4-0"})(["height:0;overflow:hidden;transition:height ","ms ease;width:100%;"," ",""],({$transitionTime:e})=>e,({$entered:e})=>e?`
2      height: auto;
3      overflow: visible;
4    `:"",({$hidden:e})=>e?`
5      visibility: hidden;
6    `:""),s=a.ZP.div.withConfig({displayName:"Accordionstyles__Wrapper",componentId:"sc-1opm6d4-1"})(["display:flex;"]),c=a.ZP.div.withConfig({displayName:"Accordionstyles__InnerWrapper",componentId:"sc-1opm6d4-2"})(["width:100%;"]);var d=t(85893);function p(e,l){var t=Object.keys(e);if(Object.getOwnPropertySymbols){var i=Object.getOwnPropertySymbols(e);l&&(i=i.filter(function(l){return Object.getOwnPropertyDescriptor(e,l).enumerable})),t.push.apply(t,i)}return t}function g(e){for(var l=1;l<arguments.length;l++){var t=null!=arguments[l]?arguments[l]:{};l%2?p(Object(t),!0).forEach(function(l){(0,i.Z)(e,l,t[l])}):Object.getOwnPropertyDescriptors?Object.defineProperties(e,Object.getOwnPropertyDescriptors(t)):p(Object(t)).forEach(function(l){Object.defineProperty(e,l,Object.getOwnPropertyDescriptor(t,l))})}return e}let x=300;var u=({children:e,controlledId:l,ariaLabeledBy:t,in:i,transitionTime:a=x})=>{let p=(0,o.useRef)(null),u=(0,o.useCallback)(e=>{e.style.height="0px"},[]),h=(0,o.useCallback)(e=>{let l=p.current?.clientHeight;e.style.height=`${l}px`},[]),f=(0,o.useCallback)(e=>{e.style.height="auto"},[]),m=(0,o.useCallback)(e=>{let l=p.current?.clientHeight;e.style.height=`${l}px`},[]),y=(0,o.useCallback)(e=>{p.current?.clientHeight,e.style.height="0px"},[]);return(0,d.jsx)(n.ZP,{in:i,onEnter:u,onEntered:f,onEntering:h,onExit:m,onExiting:y,timeout:a,children:(o,n)=>(0,d.jsx)(r,g(g({$transitionTime:a,$entered:"entered"===o,$hidden:"exited"===o&&!i,id:l,role:"region","aria-labelledby":t,"data-testid":"Container_Element"},n),{},{children:(0,d.jsx)(s,{ref:p,children:(0,d.jsx)(c,{children:e})})}))})}},52845:function(e,l,t){t.d(l,{Z:function(){return c}}),t(67294);var i=t(43687),o=t(87379),n=t(67836);let a=o.ZP.div.withConfig({displayName:"BestSellingstyles__BestSellingWrapper",componentId:"sc-5lyqi5-0"})(["","{width:100%;}"],n.s5);var r=t(59809),s=t(85893),c=e=>{let{colors:l=[],segmentTrackingData:t}=e;return(0,s.jsx)(a,{"data-testid":"BestSelling",children:(0,s.jsx)(r.Z,{gridConfig:i.tQ,colors:l,scaleOnHover:!1,segmentTrackingData:t})})}},93618:function(e,l,t){t.d(l,{Z:function(){return j}});var i=t(67294),o=t(57660),n=t(43217),a=t(87379),r=t(51815),s=t(23928);let c=(0,a.iv)(["outline:2px solid ",";"],({theme:e})=>e.colors.focus_color),d=(0,a.iv)(["display:flex;gap:16px;align-items:center;"]),p=a.ZP.div.withConfig({displayName:"ColorWallHeaderstyles__ColorWallHeaderWrapper",componentId:"sc-1kzvww0-0"})(["display:flex;align-items:center;justify-content:space-between;padding:16px;gap:14px;","{gap:18px;padding:24px 45px;}","{padding:24px 56px;}","{padding:32px 72px;}","{padding:32px 96px;}background:",";.colorWallTitle{","}.colorWallExpandBtn{&:focus{","}}.actionContainer{display:flex;gap:16px;}"],r.Ri.md,r.Ri.lg,r.Ri.xl,r.Ri.xxl,({bgColor:e})=>e,d,c),g=a.ZP.a.withConfig({displayName:"ColorWallHeaderstyles__ColorWallLink",componentId:"sc-1kzvww0-1"})(["display:flex;gap:8px;align-items:center;color:",";&:focus{","}p{text-align:right;}"],({color:e})=>s.default.colors[e],c),x=(0,a.iv)(["outline:2px solid ",";"],({theme:e})=>e.colors.focus_color),u=a.ZP.rect.withConfig({displayName:"ToggleSwitchstyles__StyledRect",componentId:"sc-1811z33-0"})(["stroke:",";"],({color:e})=>e),h=a.ZP.circle.withConfig({displayName:"ToggleSwitchstyles__StyledCircle",componentId:"sc-1811z33-1"})(["fill:",";transition:cx 300ms cubic-bezier(0.6,0.1,0.25,1);"],({color:e})=>e),f=a.ZP.label.withConfig({displayName:"ToggleSwitchstyles__SwitchLabel",componentId:"sc-1811z33-2"})(["color:",";gap:16px;display:flex;align-items:center;svg{flex-shrink:0;}input{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);border:0;}&:focus-within{","}"],({color:e})=>e,x);var m=t(53351),y=t(85893),b=({backgroundColor:e,color:l,label:t,toggled:i=!1,onChange:o=()=>null})=>{let n=s.default.colors[l];return(0,y.jsxs)(f,{color:n,isChecked:i,"data-testid":"ColorWallHeader_BestSellingToggle",children:[(0,y.jsx)(m.pA,{"data-testid":"best-selling-label",dangerouslySetInnerHTML:{__html:t},$fontWeight:"medium"}),(0,y.jsx)("input",{type:"checkbox",checked:i,onChange:o,name:t,"data-testid":"ToggleSwitch_Input"}),(0,y.jsxs)("svg",{width:"32",height:"20",viewBox:"0 0 32 20",fill:i?n:"transparent",children:[(0,y.jsx)(u,{color:n,x:"0.75",y:"0.75",width:"30.5",height:"18.5",rx:"9.25",strokeWidth:1.5}),(0,y.jsx)(h,{color:i?e:n,cx:i?"22":"10",cy:"10",r:"6"})]})]})},_=t(99072),C=t(52105),w=t(99192),v=t(70954),j=(0,i.forwardRef)((e,l)=>{let{backgroundColor:t,title:i,titleId:a,link:r,accordionExpanded:c=!1,accordionToggleId:d,controlledAccordionId:x,handleAccordionCl

6ick:u,bestSellingToggled:h=!1,showBestSellingToggle:f=!1,showViewAllLink:j=!1,handleBestSellingClick:k}=e,P=(0,n.Z)()&&(0,v.AM)(i),{globalSettings:Z}=(0,w.bN)(),{global:N}=Z?.globalDictionaries??{},I=(0,o.ZP)(t||"#ffffff");return(0,y.jsxs)(p,{className:"colorWallHeader","data-testid":"ColorWallHeader",bgColor:t,ref:l,children:[(0,y.jsxs)("div",{className:"colorWallTitle",children:[(0,y.jsx)(C.Dr,{id:d,"data-testid":c?"minus":"plus",className:"colorWallExpandBtn","aria-label":P,"aria-expanded":c,"aria-controls":x,onClick:u,iconOnly:!0,icon:{icon:c?"minus":"plus",fill:I}}),(0,y.jsx)(m.qx,{id:a,"data-testid":"ColorWallHeader_Title",$color:I,$fontWeight:"medium",dangerouslySetInnerHTML:{__html:i}})]}),(0,y.jsxs)("div",{className:"actionContainer",children:[j?(0,y.jsxs)(g,{"data-testid":"ColorWallHeader_ViewAllLink",href:r?.href,target:r?.target,color:I,children:[(0,y.jsx)(m.i1,{$color:I,$fontWeight:"medium",children:r?.title}),(0,y.jsx)(_.Z,{icon:"arrow",fill:s.default.colors[I]})]}):null,f?(0,y.jsx)(b,{"data-testid":"ColorWallHeader_BestSellingToggle",color:I,label:N?.best_selling,toggled:h,backgroundColor:t,onChange:k}):null]})]})})}}]);