"use strict";(self.webpackChunk_N_E=self.webpackChunk_N_E||[]).push([[6768],{34492:function(e,t,n){n.r(t),n.d(t,{ShopTheLookWidgetRenderer:function(){return ea}});var r,o,i,a,l,c,u,s,p,d,f,h,m,b=n(95235),g=n(2784),v=n(19453),y=n(8529),w=n(97234),x=n(25237),O=n.n(x),j=n(28885),P=n(46621),k=n(82269),z=n(7328),S=n(11006),C=n(87330),L=n(48840),Z=n(81292),R=n(51339),D=n(52322),A=["primary"],E=["primary"];function _(e,t){var n=Object.keys(e);if(Object.getOwnPropertySymbols){var r=Object.getOwnPropertySymbols(e);t&&(r=r.filter(function(t){return Object.getOwnPropertyDescriptor(e,t).enumerable})),n.push.apply(n,r)}return n}function B(e){for(var t=1;t<arguments.length;t++){var n=null!=arguments[t]?arguments[t]:{};t%2?_(Object(n),!0).forEach(function(t){(0,b.Z)(e,t,n[t])}):Object.getOwnPropertyDescriptors?Object.defineProperties(e,Object.getOwnPropertyDescriptors(n)):_(Object(n)).forEach(function(t){Object.defineProperty(e,t,Object.getOwnPropertyDescriptor(n,t))})}return e}var I=O()(function(){return Promise.resolve().then(n.bind(n,94378))},{loadableGenerated:{webpack:function(){return[94378]}}}),N=O()(function(){return Promise.resolve().then(n.bind(n,56407))},{loadableGenerated:{webpack:function(){return[56407]}}}),T=S.zo.div(r||(r=(0,z.Z)(["\n  position: relative;\n  ","\n"])),function(e){return e.hasItemActive&&"z-index:3"}),W=S.zo.p(o||(o=(0,z.Z)(["\n  ",";\n  margin-bottom: ",";\n  text-align: ",";\n"])),(0,C.xv)("xlarge1","alternate"),(0,L.W0)(1),function(e){return e.horizontalAlignment||"center"}),M=S.zo.p(i||(i=(0,z.Z)(["\n  ",";\n  text-align: ",";\n  margin-bottom: ",";\n"])),(0,C.xv)("bodyText","default"),function(e){return e.horizontalAlignment||"center"},(0,L.W0)(4)),V=S.zo.div(a||(a=(0,z.Z)(["\n  position: relative;\n  z-index: 1;\n"]))),G=S.zo.button(l||(l=(0,z.Z)(["\n  position: absolute;\n  z-index: 2;\n  height: 24px;\n  width: 24px;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  top: ",";\n  left: ",";\n  border: 1px solid ",";\n  border-radius: 50%;\n  background: ",";\n  :hover {\n    background: ",";\n    border: 2px solid ",";\n    path {\n      fill: ",";\n    }\n    .outside-circle {\n      fill: ",";\n    }\n    .inside-circle {\n      fill: ",";\n    }\n  }\n  :focus {\n    outline: 2px solid ",";\n    ","\n    path {\n      fill: ",";\n    }\n    .outside-circle {\n      fill: ",";\n    }\n    .inside-circle {\n      fill: ",";\n    }\n  }\n"])),function(e){return e.top},function(e){return e.left},function(e){return e.theme.colors.palette.greys.dark},function(e){return e.primary?e.theme.colors.palette.greys.white:e.theme.colors.palette.brand.base},function(e){return e.theme.colors.palette.greys.lighter},function(e){return e.theme.colors.palette.greys.dark},function(e){return e.theme.colors.palette.brand.base},function(e){return e.theme.colors.palette.greys.white},function(e){return e.theme.colors.palette.brand.base},function(e){return e.theme.colors.palette.brand.base},function(e){return!e.primary&&"background-color: ".concat(e.theme.colors.palette.greys.lighter,";")},function(e){return e.theme.colors.palette.brand.base},function(e){return e.theme.colors.palette.greys.lighter},function(e){return e.theme.colors.palette.brand.base}),q=(0,S.zo)(function(e){e.primary;var t=(0,k.Z)(e,A);return(0,D.jsx)(I,B({},t))})(c||(c=(0,z.Z)(["\n  path {\n    fill: ",";\n  }\n  .outside-circle {\n    fill: ",";\n  }\n  .inside-circle {\n    fill: ",";\n  }\n"])),function(e){return e.primary?e.theme.colors.palette.brand.base:e.theme.colors.palette.greys.lighter},function(e){return e.primary?e.theme.colors.palette.greys.white:e.theme.colors.palette.brand.base},function(e){return e.primary?e.theme.colors.palette.brand.base:e.theme.colors.palette.greys.lighter}),H=(0,S.zo)(function(e){e.primary;var t=(0,k.Z)(e,E);return(0,D.jsx)(N,B({},t))})(u||(u=(0,z.Z)(["\n  width: 16px;\n  height: 16px;\n  path {\n    fill: ",";\n  }\n"])),function(e){return e.primary?e.theme.colors.palette.brand.base:e.theme.colors.palette.greys.white}),U=(0,S.zo)(R.zx)(s||(s=(0,z.Z)(["\n  margin-top: ",";\n"])),(0,L.W0)(2)),Y=S.zo.div(p||(p=(0,z.Z)(["\n  background: ",";\n  padding: ",";\n  max-width: 288px;\n  max-height: 545px;\n  overflow-y: auto;\n  z-index: 3;\n  position: absolute;\n  top: 0;\n  right: 0;\n  "," {\n    max-width: 300px;\n  }\n"])),function(e){return e.theme.colors.palette.greys.white},(0,L.W0)(3),function(e){return(0,Z.mq)(e.theme.breakpointUtils.map,"sm")}),F=S.zo.button(d||(d=(0,z.Z)(["\n  margin: calc("," - 2px);\n  outline: none;\n  border: 2px solid transparent;\n\n  &:hover,\n  &:focus {\n    opacity: 0.8;\n  }\n\n  &:active svg path {\n    fill: ",";\n  }\n  &:focus {\n    border: 2px solid ",";\n  }\n"])),(0,L.W0)(1),function(e){return e.theme.colors.palette.greys.darker},function(e){return e.theme.colors.palette.brand.base}),J=(0,S.zo)(F)(f||(f=(0,z.Z)(["\n  position: absolute;\n  top: 0;\n  right: 0;\n  display: block;\n  z-index: 4;\n"]))),K=S.zo.div(h||(h=(0,z.Z)(["\n  display: flex;\n  padding: ",";\n  align-items: center;\n"])),(0,L.W0)(1)),Q=S.zo.div(m||(m=(0,z.Z)(["\n  ","\n  padding-right: ",";\n"])),(0,C.xv)("bodyText","alternate"),(0,L.W0)(1));function X(e,t){var n=Object.keys(e);if(Object.getOwnPropertySymbols){var r=Object.getOwnPropertySymbols(e);t&&(r=r.filter(function(t){return Object.getOwnPropertyDescriptor(e,t).enumerable})),n.push.apply(n,r)}return n}function $(e){for(var t=1;t<arguments.length;t++){var n=null!=arguments[t]?arguments[t]:{};t%2?X(Object(n),!0).forEach(function(t){(0,b.Z)(e,t,n[t])}):Object.getOwnPropertyDescriptors?Object.defineProperties(e,Object.getOwnPropertyDescriptors(n)):X(Object(n)).forEach(function(t){Object.defineProperty(e,t,Object.getOwnPropertyDescriptor(n,t))})}return e}var ee=O()(function(){return Promise.resolve().then(n.bind(n,56407))},{loadableGenerated:{webpack:function(){return[56407]}}}),et=function(e){var t=e.closeLabel;return(0,D.jsxs)(K,{children:[t&&(0,D.jsx)(Q,{children:t}),(0,D.jsx)(ee,{})]})},en=function(e){var t=e.product,n=e.className,r=e.onCloseProductDetailsBox,o=e.hotSpotRef,i={closeAriaLabel:(0,j.ag)("general.modal.close.button.arialabel"),closeLabel:(0,j.ag)("general.modal.close.button.label"),reviewsStarsLabel:(0,j.ag)("reviews.stars.label"),reviewsLabel:(0,j.ag)("reviews.reviews.label"),shopButton:{title:(0,j.ag)("widget.shop.the.look.range.shop.text")},viewItemButton:(0,j.ag)("widget.shop.the.look.product.more.text")};return(0,D.jsxs)(Y,{tabIndex:0,ref:o,className:n,"data-testid":"shop-the-look-hot-spot-container",children:[(0,D.jsx)(J,{"aria-label":i.closeAriaLabel,onClick:r,"data-testid":"shop-the-look-close-button",children:(0,D.jsx)(et,{closeLabel:i.closeLabel})}),(0,D.jsx)(P.v,$($({},t),{},{review:t.review?$($({},t.review),{},{screenReaderOnlyText:"".concat(t.review.starRating," ").concat(i.reviewsStarsLabel," ").concat(t.review.numberOfReviews," ").concat(i.reviewsLabel)}):void 0,button:{title:i.viewItemButton,quickBuyTitle:i.viewItemButton}})),t.rangeList&&(0,D.jsx)(U,{href:t.rangeList,emphasis:"medium",renderedAs:"a","data-testid":"shop-the-look-shop-button",children:i.shopButton.title})]})};function er(e,t){var n=Object.keys(e);if(Object.getOwnPropertySymbols){var r=Object.getOwnPropertySymbols(e);t&&(r=r.filter(function(t){return Object.getOwnPropertyDescriptor(e,t).enumerable})),n.push.apply(n,r)}return n}function eo(e){for(var t=1;t<arguments.length;t++){var n=null!=arguments[t]?arguments[t]:{};t%2?er(Object(n),!0).forEach(function(t){(0,b.Z)(e,t,n[t])}):Object.getOwnPropertyDescriptors?Object.defineProperties(e,Object.getOwnPropertyDescriptors(n)):er(Object(n)).forEach(function(t){Object.defineProperty(e,t,Object.getOwnPropertyDescriptor(n,t))})}return e}var ei=(0,v.default)(function(e){var t,n=g.useState(-1),r=(0,y.Z)(n,2),o=r[0],i=r[1],a=g.useRef(null);g.useEffect(function(){if("undefined"!=typeof document&&-1!==o&&a.current){a.current.focus();var e,t,n=null===(e=document.getElementsByTagName("header")[0])||void 0===e?void 0:e.offsetHeight,r=(null===(t=document.getElementById("shop-the-look-image-container"))||void 0===t?void 0:t.getBoundingClientRect().top)||0;n&&window.scrollTo({top:window.pageYOffset+r-n,behavior:"smooth"})}},[o,a]);var l=function(e){i(function(t){return t!==e?e:-1})};return(0,D.jsxs)(T,{hasItemActive:-1!==o,className:e.className,children:[e.title&&(0,D.jsx)(W,{horizontalAlignment:e.horizontalAlignment,children:e.title}),e.description&&(0,D.jsx)(M,{horizontalAlignment:e.horizontalAlignment,children:e.description}),(0,D.jsxs)(V,{id:"shop-the-look-image-container",children:[(0,D.jsx)(w.E,{src:[{url:e.image.urls.small,breakpoint:"sm"},{url:e.image.urls.medium,breakpoint:"md"},{url:e.image.urls.large,breakpoint:"lg"}],width:"100%",height:"100%",alt:e.image.alt||e.title||"",isAmp:!1}),(null===(t=e.hotSpots)||void 0===t?void 0:t.length)&&e.hotSpots.map(function(t,n){var r,i,c,u="hot-spot-eye-".concat(n);return o===n?(0,D.jsxs)("div",{"aria-label":(null===(r=t.hotSpotProduct)||void 0===r?void 0:r.title.value)||u,children:[(0,D.jsx)(G,{top:t.top,left:t.left,onClick:function(){return l(n)},"data-testid":"hot-spot-button-".concat(n),primary:e.iconPrimaryColor,children:(0,D.jsx)(H,{"data-testid":"close-icon-".concat(n),primary:e.iconPrimaryColor})}),t.hotSpotProduct&&(0,D.jsx)(en,{"aria-labelledby":(null===(i=t.hotSpotProduct)||void 0===i?void 0:i.title.value)||u,hotSpotRef:a,product:t.hotSpotProduct,onCloseProductDetailsBox:function(){return l(n)}})]},u):(0,D.jsx)(G,{"aria-label":(null===(c=t.hotSpotProduct)||void 0===c?void 0:c.title.value)||u,top:t.top,left:t.left,onClick:function(){return l(n)},"data-testid":"hot-spot-button-".concat(n),primary:e.iconPrimaryColor,children:(0,D.jsx)(q,{"data-testid":"open-icon-".concat(n),primary:e.iconPrimaryColor})},u)})]})]})}).withConfig({componentId:"d7gmzw-0"})(["margin:0 auto;padding:"," 0;max-width:",";"],(0,L.W0)(2),function(e){return e.theme.site.siteWidth}),ea=function(e){if(!e.hotSpotVariants||0===e.hotSpotVariants.length)return null;var t=(0,j.ag)("product.price.rrp.text"),n={title:e.itemTitle||void 0,description:e.itemDescription||void 0,horizontalAlignment:e.horizontalAlignment,image:{urls:{small:e.imageSmall,medium:e.imageMedium,large:e.imageLarge},alt:e.altImageLarge||void 0},iconPrimaryColor:e.primaryColor||!0,hotSpots:e.hotSpotVariants.map(function(e){return eo(eo({},e),{},{hotSpotProduct:eo(eo({},e.hotSpotProduct),{},{i18nText:{closeI18nText:{closeAriaLabel:"close",closeLabel:"close"},freeGiftMessage:"freegift"},price:eo({rrpText:t},e.hotSpotProduct.price)})})})};return(0,D.jsx)(ei,eo({},n))}},15754:function(e,t,n){t.ZP=void 0;var r=o(n(57727));function o(e){return e&&e.__esModule?e:{default:e}}r.default,o(n(69675)).default;var i=r.default;t.ZP=i},6622:function(e,t){t.__esModule=!0,t.noop=t.defaultProps=t.defaultOptions=t.defaultConfig=void 0,t.defaultOptions={},t.defaultConfig={disconnectOnLeave:!1};var n=()=>{};t.noop=n,t.defaultProps={onEnterViewport:n,onLeaveViewport:n}},57727:function(e,t,n){t.__esModule=!0,t.default=void 0;var r=n(2784),o=u(n(73463)),i=u(n(69675)),a=n(6622),l=n(52322),c=["onEnterViewport","onLeaveViewport"];function u(e){return e&&e.__esModule?e:{default:e}}function s(){return(s=Object.assign||function(e){for(var t=1;t<arguments.length;t++){var n=arguments[t];for(var r in n)Object.prototype.hasOwnProperty.call(n,r)&&(e[r]=n[r])}return e}).apply(this,arguments)}var p=e=>"function"==typeof e&&!(e.prototype&&e.prototype.render),d=e=>e.prototype&&e.prototype.isReactComponent;t.default=function(e,t,n){void 0===t&&(t=a.defaultOptions),void 0===n&&(n=a.defaultConfig);var u=(0,r.forwardRef)((t,n)=>{var r=s({forwardedRef:n},d(e)&&!p(e)?{ref:n}:{});return(0,l.jsx)(e,s({},t,r))});function f(e){var{onEnterViewport:o=a.noop,onLeaveViewport:p=a.noop}=e,d=function(e,t){if(null==e)return{};var n,r,o={},i=Object.keys(e);for(r=0;r<i.length;r++)n=i[r],t.indexOf(n)>=0||(o[n]=e[n]);return o}(e,c),f=(0,r.useRef)(),{inViewport:h,enterCount:m,leaveCount:b}=(0,i.default)(f,t,n,{onEnterViewport:o,onLeaveViewport:p});return(0,l.jsx)(u,s({},d,{inViewport:h,enterCount:m,leaveCount:b},{ref:f}))}var h=e.displayName||e.name||"Component";return f.displayName="handleViewport("+h+")",(0,o.default)(f,u)}},69675:function(e,t,n){t.__esModule=!0,t.default=void 0;var r=n(2784),o=n(28316),i=n(6622);t.default=function(e,t,n,a){void 0===t&&(t=i.defaultOptions),void 0===n&&(n=i.defaultConfig),void 0===a&&(a=i.defaultProps);var{onEnterViewport:l,onLeaveViewport:c}=a,[,u]=(0,r.useState)(),s=(0,r.useRef)(),p=(0,r.useRef)(!1),d=(0,r.useRef)(!1),f=(0,r.useRef)(0),h=(0,r.useRef)(0);function m(e){var{isIntersecting:t,intersectionRatio:r}=e[0]||{},o=void 0!==t?t:r>0;if(!d.current&&o){d.current=!0,null==l||l(),f.current+=1,p.current=o,u(o);return}d.current&&!o&&(d.current=!1,null==c||c(),n.disconnectOnLeave&&s.current&&s.current.disconnect(),h.current+=1,p.current=o,u(o))}return(0,r.useEffect)(()=>{var n=s.current;return function(t){var{observerRef:n}=t,r=e.current;if(r){var i=(0,o.findDOMNode)(r);i&&(null==n||n.observe(i))}}({observerRef:n=function(e){var{observerRef:n}=e;return n||(s.current=new IntersectionObserver(m,t),s.current)}({observerRef:n})}),()=>{!function(t){var{observerRef:n}=t,r=e.current;if(r){var i=(0,o.findDOMNode)(r);i&&(null==n||n.unobserve(i))}null==n||n.disconnect(),s.current=null}({observerRef:n})}},[e.current,t,n,l,c]),{inViewport:p.current,enterCount:f.current,leaveCount:h.current}}}}]);
//# sourceMappingURL=6768.c341008dd7e66b99.js.map