https://www.housebeautiful.com/_assets/fre/scopes/hdm/_next/static/chunks/14687-bcd1e6445ee36382.js

1"use strict";(self.webpackChunk_N_E=self.webpackChunk_N_E||[]).push([[14687],{14687:(e,t,r)=>{r.d(t,{Bb:()=>B,mc:()=>y,_n:()=>x,Rp:()=>j,q7:()=>b,ym:()=>h,Az:()=>p,Cn:()=>f,nx:()=>m,Ay:()=>H});var n=r(53520),i=r(38536),o=r(28270),l=r(5921),a=r(62191),s=r(71055);let c=["peekWidthPercentage"],u=["withGradient"],d=["controlsPosition","direction"];var h=(0,i.A)("a",{target:"ejxe6mr11"})((0,o.Ay)("carousel-mini-card",{boxSizing:"content-box",textDecoration:"none"}),""),m=(0,i.A)("img",{target:"ejxe6mr10"})((0,o.Ay)("carousel-mini-card-image",{width:"100%"}),""),f=(0,i.A)("span",{target:"ejxe6mr9"})((0,o.Ay)("carousel-mini-card-heading",{fontSize:"font-size-16",lineHeight:"sm",textTransform:"uppercase",marginTop:"0",marginBottom:"xs",display:"block",fontWeight:"700"}),""),p=(0,i.A)("span",{target:"ejxe6mr8"})((0,o.Ay)("carousel-mini-card-dek",{fontSize:"font-size-16",lineHeight:"xlg",display:"block",margin:"{*space.xs} 0 {*space.xs}"}),""),g=e=>e.withNav&&"side"===e.controlsPosition?"0 {*space.tablet-gutter}":"0 0 {*space.s} {*space.xs}",b=(0,i.A)("div",{target:"ejxe6mr7"})((0,o.Ay)("carousel-item",{display:"flex",flex:({slideWidthPercentage:e})=>`0 0 ${e}%`,maxWidth:({slideWidthPercentage:e})=>`${e}%`,boxSizing:"border-box",padding:"xs",scrollSnapAlign:"start"}),""),x=(0,i.A)("h2",{target:"ejxe6mr6"})((0,o.Ay)("carousel-hed",{fontSize:"font-size-20",lineHeight:"lineheight-xs",margin:g,marginBottom:0,alignSelf:"center",paddingLeft:"xs",zIndex:2}),""),P=(0,i.A)("div",{target:"ejxe6mr5"})((0,o.Ay)("carousel-container",{position:"relative",width:"100%"}),""),k=(0,l.A)(P,{sx:{"::after, ::before":{content:'""',position:"absolute",display:"block",width:e=>{let{peekWidthPercentage:t}=e,r=(0,n.A)(e,c);return`${(({withPeekthrough:e,controlsPosition:t})=>"side"===t&&!e)(r)||!(({withPeekthrough:e,controlsPosition:t})=>"side"===t&&e)(r)?20:t/2}%`},height:"100%",zIndex:1,pointerEvents:"none",transition:"visibility 0.3s, opacity 0.3s"},"::before":{left:e=>(({withPeekthrough:e,controlsPosition:t})=>"side"===t&&!e)(e)||(({withPeekthrough:e,controlsPosition:t})=>"side"===t&&e)(e)?"34px":0,top:"0",background:e=>`linear-gradient(to right, white ${(({withPeekthrough:e,controlsPosition:t})=>"side"===t&&!e)(e)||(({withPeekthrough:e,controlsPosition:t})=>"side"!==t&&e)(e)||(({withPeekthrough:e,controlsPosition:t})=>"side"===t&&e)(e)?"0":"50"}%, rgba(255, 255, 255, 0) 100%)`,opacity:({currentIndex:e})=>0===e?"0":"1",visibility:({currentIndex:e})=>0===e?"hidden":"visible"},"::after":{right:e=>(({withPeekthrough:e,controlsPosition:t})=>"side"===t&&!e)(e)||(({withPeekthrough:e,controlsPosition:t})=>"side"===t&&e)(e)?"34px":0,top:"0",background:e=>`linear-gradient(to left, white ${(({withPeekthrough:e,controlsPosition:t})=>"side"===t&&!e)(e)||(({withPeekthrough:e,controlsPosition:t})=>"side"!==t&&e)(e)||(({withPeekthrough:e,controlsPosition:t})=>"side"===t&&e)(e)?"0":"50"}%, rgba(255, 255, 255, 0) 100%)`,opacity:({currentIndex:e,totalSlides:t,itemsPerPage:r})=>e!==t-r||0===e?"1":"0",visibility:({currentIndex:e,totalSlides:t,itemsPerPage:r})=>e!==t-r||0===e?"visible":"hidden"}}});function y(e){let{withGradient:t}=e,r=(0,n.A)(e,u);return t?s.createElement(k,r):s.createElement(P,r)}var w=(0,i.A)("div",{target:"ejxe6mr4"})((0,o.Ay)("carousel-header",{display:"flex",alignItems:"flex-end",justifyContent:"space-between"}),""),v=(0,i.A)("div",{target:"ejxe6mr3"})((0,o.Ay)("carousel-top-end-controls",{display:"flex",flexWrap:"nowrap",gap:"{*space.xs}"}),""),A=(0,i.A)("div",{target:"ejxe6mr2"})((0,o.Ay)("carousel-hed-subline",{display:"block",width:"100%",minWidth:0}),""),E=(0,i.A)(a.A,{target:"ejxe6mr1"})((0,o.Ay)("carousel-button",{zIndex:2}),""),C=(0,l.A)(E,{sx:{position:"absolute",top:"48%",left:0}}),S=(0,l.A)(E,{sx:{position:"absolute",top:"48%",right:0}}),L=(0,l.A)(E,{sx:{}}),z=(0,l.A)(E,{sx:{}}),R=(0,l.A)(E,{sx:{}}),I=(0,l.A)(E,{sx:{}});function W(e){let{controlsPosition:t,direction:r}=e,i=(0,n.A)(e,d);if("prev"===r)switch(t){case"top-end":return s.createElement(L,i);case"bottom-end":return s.createElement(R,i);default:return s.createElement(C,i)}switch(t){case"top-end":return s.createElement(z,i);case"bottom-end":return s.createElement(I,i);default:return s.createElement(S,i)}}var j=(0,i.A)("div",{target:"ejxe6mr0"})((0,o.Ay)("carousel-inner-wrapper",{display:"flex",margin:g,overflowX:"scroll",scrollbarWidth:"none",cursor:"grab",scrollSnapType:({withSnap:e})=>e?"x mandatory":null,justifyContent:({children:e,itemsPerPage:t})=>e.length<t?"center":"space-between","&::-webkit-scrollbar":{display:"none"},"a, img":{WebkitUserDrag:"none"}}

1),""),M=r(59435),T=r.n(M),D=r(71055),O=r(47241);let N=["hed","imageProps","dek","link"],$=["children","hed","hedSubline","btm","withNav","withSnap","withGradient","itemsPerPage","icons","buttonProps","withPeekthrough","peekWidthPercentage","controlsPosition","sxProps","onScroll","controller","infiniteLoop"];function _(){return(_=Object.assign?Object.assign.bind():function(e){for(var t=1;t<arguments.length;t++){var r=arguments[t];for(var n in r)({}).hasOwnProperty.call(r,n)&&(e[n]=r[n])}return e}).apply(null,arguments)}var q={TitleDesignElementBefore:{__themeKey:"block-header-design-element-before"},TitleDesignElementAfter:{__themeKey:"block-header-design-element-after"}};function B(e){let{hed:t=null,imageProps:r={},dek:i=null,link:o=null}=e,l=(0,n.A)(e,N),a=(0,D.useId)();return D.default.createElement(h,_({href:o,"data-theme-key":"carousel-mini-card"},l,{"aria-labelledby":t?a:null}),t?D.default.createElement(f,{id:a,"data-theme-key":"carousel-mini-card-heading"},t):null,r.src?D.default.createElement(m,_({"data-theme-key":"carousel-mini-card-image"},r)):null,D.default.createElement(p,{"data-theme-key":"carousel-mini-card-dek"},i))}async function F(e,t){let r=Math.round(t);if(e.scrollLeft===r)return;let n,i,o=new Promise(e=>{n=e}),l=()=>{clearTimeout(i),e.scrollLeft===r?(e.removeEventListener("scroll",l),n()):i=setTimeout(()=>{e.removeEventListener("scroll",l),n()},100)};e.addEventListener("scroll",l),await new Promise(e=>requestAnimationFrame(e)),e.scrollTo({top:0,left:r,behavior:"smooth"}),await o}function G(e){return e<.5?Math.ceil(e):Math.round(e)}function H(e){let t,{children:r,hed:i=null,hedSubline:o=null,btm:l=null,withNav:a=!0,withSnap:s=!0,withGradient:c=!1,itemsPerPage:u=3,icons:d={prev:"arrow-left-regular",next:"arrow-right-regular"},buttonProps:h={prev:{iconProps:{},sxProps:{}},next:{iconProps:{},sxProps:{}}},withPeekthrough:m=!0,peekWidthPercentage:f=20,controlsPosition:p="side",sxProps:g=null,onScroll:P,controller:k=null,infiniteLoop:E=!1}=e,C=(0,n.A)(e,$),[S,L]=(0,D.useState)({index:0,method:null}),[z,R]=(0,D.useState)(!1),{currentIndex:I,setCurrentIndex:M}=k||{currentIndex:S,setCurrentIndex:L},T=(0,D.useRef)(!1),N=(0,D.useRef)(null),B=(0,D.useRef)(null),H=(0,D.useId)(),K=(0,D.useRef)(!1),U=(0,D.useRef)(null),X=(0,D.useRef)(null),V=(0,D.useRef)(null),J=(0,D.useRef)(0),Q=(0,D.useRef)(null),Y=(0,D.useCallback)(e=>{let t=B.current.getBoundingClientRect();return e.clientX-t.left},[]),Z=(0,D.useCallback)(e=>B.current.contains(e.target),[]),ee=(100-(m?100*(t=f/100)/(u+t):0))/u,et=(0,D.useMemo)(()=>D.default.Children.toArray(r),[r]),er=et.length,en=E?Math.min(u,Math.max(1,er)):0,ei=(0,D.useMemo)(()=>{if(!E||0===er)return et;let e=et.slice(0,en);return[...et.slice(-en),...et,...e]},[E,et,er,en]),eo=E?I.index+en:I.index,el=(0,D.useMemo)(()=>ei.map((e,t)=>D.default.createElement(b,{key:`slide-${t}

1`,ref:t===eo?N:null,slideWidthPercentage:ee,"data-testid":"item","data-theme-key":"carousel-item"},e)),[ei,ee,eo]),ea=(0,D.useCallback)(()=>{R(!0),M(({index:e})=>E&&er>0?{index:(e-u+er)%er,method:"click"}:{index:e-u<0?0:e-u,method:"click"})},[E,u,er,M]),es=(0,D.useCallback)(()=>{R(!0),M(({index:e})=>{if(E&&er>0)return{index:(e+u)%er,method:"click"};let t=er-(e+u);return{index:t>=u?e+u:e+t,method:"click"}})},[E,u,er,M]),ec=(0,D.useRef)(!1),eu=(0,D.useRef)(null),ed=(0,D.useCallback)(()=>{let e=N.current,t=B.current,r=e.offsetLeft,n=e.offsetParent;for(;n&&n!==t;)r+=n.offsetLeft,n=n.offsetParent;if(n!==t){let n=e.getBoundingClientRect(),i=t.getBoundingClientRect();r=t.scrollLeft+(n.left-i.left)}return r},[]),eh=(0,D.useCallback)(()=>{let e=B.current,t=ed();T.current=!0,F(e,t).finally(()=>{T.current=!1,R(!1)})},[ed]);(0,D.useEffect)(()=>{let e=N.current;if(B.current&&e&&"swipe"!==I.method){if(ec.current=!1,eh(),!ec.current){eu.current=new ResizeObserver(()=>{eh()});try{eu.current.observe(e)}catch{throw Error("Failed to observe target item for resize.")}}return()=>{eu.current&&=(eu.current.disconnect(),null)}}},[eh,I.index,I.method]);let em=(0,D.useCallback)(e=>{Z(e)&&(K.current=!0,J.current=0,cancelAnimationFrame(Q.current),Q.current=null,U.current=Y(e),X.current=B.current.scrollLeft,B.current.style.cursor="grabbing",B.current.style.userSelect="none")},[Y,Z]),ef=(0,D.useCallback)(()=>{let e=N.current,t=Math.round(B.current.scrollLeft/e.offsetWidth)*e.offsetWidth;F(B.current,t).then(()=>{T.current=!1})},[]),ep=(0,D.useCallback)(()=>{Math.abs(J.current)>.5?(B.current.scrollLeft+=J.current,J.current*=.8,Q.current=requestAnimationFrame(ep)):s&&ef()},[s,ef]),eg=(0,D.useCallback)(()=>{K.current=!1,B.current.style.cursor="grab",ep()},[ep]);(0,D.useEffect)(()=>(V.current="ontouchstart"in window||navigator.maxTouchPoints>0||navigator.msMaxTouchPoints>0,V.current||(document.addEventListener("mousedown",em),document.addEventListener("mouseup",eg)),()=>{V.current||(document.removeEventListener("mousedown",em),document.removeEventListener("mouseup",eg))}),[em,eg]);let eb=s&&V.current,ex=a&&"bottom-end"===p,eP=a?D.default.createElement(D.default.Fragment,null,D.default.createElement(W,_({direction:"prev",isDisabled:z||!E&&0===I.index,withHed:null!==i&&""!==i,onClick:ea,icon:d?.prev,iconAlt:"Chevron Left Icon",iconLabel:"Prev carousel button",controlsPosition:p,"aria-label":"Previous","data-theme-key":"carousel-button-prev"},h?.prev)),D.default.createElement(W,_({direction:"next",isDisabled:z||!E&&I.index>=er-u,withHed:null!==i&&""!==i,onClick:es,icon:d?.next,iconAlt:"Chevron Right Icon",iconLabel:"Next carousel button",controlsPosition:p,"aria-label":"Next","data-theme-key":"carousel-button-next"},h?.next))):null,ek=ex?D.default.createElement(v,null,eP):null;return D.default.createElement(y,_({},C,{sx:g,"aria-roledescription":"carousel",role:"region","aria-live":"off","aria-labelledby":i?H:null,"data-theme-key":"carousel-container",withGradient:c,currentIndex:I.index,totalSlides:er,itemsPerPage:u,withPeekthrough:m,peekWidthPercentage:f,controlsPosition:p}),i||a&&"top-end"===p?D.default.createElement(w,{"data-theme-key":"carousel-header"},D.default.createElement(x,{withNav:a,controlsPosition:p,id:H,"data-theme-key":"carousel-hed"},D.default.createElement(O.A,{themeOptions:q},i)),a&&"top-end"===p?D.default.createElement(v,null,eP):null):null,o?D.default.createElement(A,{"data-theme-key":"carousel-hed-subline"},o):null,a&&"side"===p?eP:null,D.default.createElement(j,{withNav:a,itemsPerPage:u,withSnap:eb,controlsPosition:p,ref:B,"data-testid":"inner

1-carousel","data-theme-key":"carousel-inner-wrapper",onScroll:e=>{if(!T.current){let{scrollLeft:t}=e.target,r=N.current.offsetWidth,n=t/r;if(E&&er>0){let t=en-1,i=en+er;if(n<=t+.01||n>=i-.01){T.current=!0;let i=Math.round((n<=t+.01?n+er:n-er)*r);e.target.scrollLeft=i,n=i/r,requestAnimationFrame(()=>{T.current=!1})}}let i=E?n-en:n;E&&er>0&&(i=(i%er+er)%er),M({index:G(i),method:"swipe"})}"function"==typeof P&&P(e)},onMouseMove:e=>{if(e.preventDefault(),!0===K.current){let t=(Y(e)-U.current)*2,{scrollLeft:r}=B.current,n=N.current,i=X.current-t;J.current=i-r;let o=G(r/n.offsetWidth);B.current.scrollLeft=i,M({index:o,method:"swipe"})}}},el),l||ex?D.default.createElement(w,{"data-theme-key":"carousel-header"},l,ek):null)}B.propTypes={hed:T().string,imageProps:T().shape({alt:T().string,title:T().string,src:T().string}),dek:T().string,link:T().string},H.propTypes={children:T().oneOfType([T().arrayOf(T().node),T().node]).isRequired,hed:T().oneOfType([T().string,T().node]),hedSubline:T().node,btm:T().node,itemsPerPage:T().number,withNav:T().bool,withSnap:T().bool,withGradient:T().bool,onScroll:T().func,icons:T().shape({prev:T().string,next:T().string}),buttonProps:T().shape({prev:T().shape({sxProps:T().shape({}),iconProps:T().shape({})}),next:T().shape({sxProps:T().shape({}),iconProps:T().shape({})})}),withPeekthrough:T().bool,peekWidthPercentage:T().number,controlsPosition:T().oneOf(["side","to

1p-end","bottom-end"]),sxProps:T().shape({}),infiniteLoop:T().bool,controller:T().shape({currentIndex:T().shape({index:T().number.isRequired,method:T().string}).isRequired,setCurrentIndex:T().func.isRequired})}},62191:(e,t,r)=>{r.d(t,{A:()=>g});var n=r(53520),i=r(38536),o=r(28270),l=r(64781),a="neutral-100",s="neutral-300",c="brandColorPrimary",u=(0,i.A)("button",{target:"erhb41k1"})((0,o.Ay)("icon-button",{display:"flex",padding:"6px",flexShrink:0,border:`1px solid {*colors.${c}}`,width:"34px",height:"34px",alignItems:"center",justifyContent:"center",borderRadius:"50%",transitionDuration:"0.3s",transitionTimingFunction:"ease-in-out",transitionProperty:"background-color, border",cursor:e=>e.disabled?"auto":"pointer",bg:c,position:"relative","&:hover":{bg:"brandColorPrimary",transition:"background-color 0.3s ease-in-out"},"&:disabled":{backgroundColor:a,borderColor:s,"&:hover":{backgroundColor:a}},"&:after":{content:'""',position:"absolute",minHeight:({tapSizeMinimum:e})=>`${e}px`,minWidth:({tapSizeMinimum:e})=>`${e}px`,width:"100%",height:"100%",top:"50%",left:"50%",transform:"translate(-50%, -50%)",borderRadius:"50%"}}),""),d=(0,i.A)(l.default,{target:"erhb41k0"})((0,o.Ay)("icon-button-icon",{width:({size:e})=>e||"iconSize.s",height:({size:e})=>e||"iconSize.s",flexShrink:0,primary:({isDisabled:e,disabledColor:t,primary:r})=>e?t||s:r||"#fff",transform:({transform:e})=>e||"none"}),""),h=r(61546),m=r(71055);let f=["isDisabled","iconPath","sxProps","onClick","icon","iconAlt","iconLabel","tapSizeMinimum","iconProps"];function p(){return(p=Object.assign?Object.assign.bind():function(e){for(var t=1;t<arguments.length;t++){var r=arguments[t];for(var n in r)({}).hasOwnProperty.call(r,n)&&(e[n]=r[n])}return e}).apply(null,arguments)}function g(e){let{isDisabled:t=!1,iconPath:r=null,sxProps:i={},onClick:o,icon:l="x-regular",iconAlt:a,iconLabel:s,tapSizeMinimum:c=48,iconProps:g=null}=e,b=(0,n.A)(e,f);return m.createElement(u,p({disabled:t,onClick:t?void 0:o,tapSizeMinimum:c,"data-theme-key":"icon-button"},b,{sx:i}),m.createElement(d,p({type:h.PV.Stylized,relativeUrl:r||`/static/icons/${l}.svg`,"aria-label":s,alt:a,isDisabled:t,size:g?.size,"data-theme-key":"icon-button-icon"},g)))}}}]);