{"version":3,"sources":["webpack:///./src/stories/Widgets/RangeDetailGallery/ColourPicker/ColourPicker.styles.ts","webpack:///./src/helpers/aspectRatio.ts","webpack:///./src/img/icons/play-circle-instagram.svg","webpack:///./src/stories/Widgets/RangeDetailGallery/RangeDetailGallery.styles.ts","webpack:///./src/stories/Components/Button/Button.styles.ts","webpack:///./src/stories/Components/ClearButton/ClearButton.styles.ts","webpack:///./src/img/icons/carousel-arrow-down.svg","webpack:///./src/stories/Components/MediaGallery/MediaGallery.styles.ts","webpack:///./src/stories/Components/MediaGallery/MediaGallery.tsx","webpack:///./src/helpers/srOnly.ts","webpack:///./src/helpers/combineRefs.ts","webpack:///./src/stories/Components/Misc/Carousel/SimpleTrack/SimpleTrack.tsx","webpack:///./src/img/icons/carousel-arrow-up.svg","webpack:///./src/stories/Components/Misc/DotPagination/DotPagination.tsx","webpack:///./src/stories/Components/Misc/Carousel/Controls/Controls.tsx","webpack:///./src/stories/Components/Misc/Carousel/SimpleTrack/SimpleTrack.styles.ts","webpack:///./src/stories/Components/Misc/Carousel/Controls/Controls.styles.ts","webpack:///./src/stories/Components/Misc/DotPagination/DotPagination.styles.ts"],"names":["Container","styled","div","from","Device","MobileLarge","TitleWrapper","ClearButtonStyles","transition","Title","span","fonts","brandonGrotesque","bold","brand","green","Options","ul","fluid","TabletLarge","Option","li","Button","button","ButtonReset","ColourPickerStyles","Border","white","ImageContainer","imageWrapperPreserveRatio","Image","img","imageCoverContainer","Label","medium","aspectRatio","width","height","css","relative","_defs","_g","_extends","Object","assign","bind","target","i","arguments","length","source","key","prototype","hasOwnProperty","call","apply","this","SvgPlayCircleInstagram","props","xmlns","viewBox","id","fill","d","clipPath","stroke","strokeWidth","transform","section","Inner","siteWide","until","BottomWrapper","Beneath","beige","TabletSmall","Desktop","ListWrapper","LinkWrapper","ButtonStyles","Text","Tablet","RangeDetailGalleryStyles","black","paragraphSmall","srOnly","IconWrapper","Icon","_path","SvgCarouselArrowDown","MediaGalleryStyles","MainImageWrapper","PinButtonStyles","MainImageButton","ThumbnailWrapper","ControlsStyles","ButtonWrapper","ThumbnailWrapperMobile","CarouselWrapper","SimpleTrackStyles","CarouselItem","CarouselImage","MediaGallery","galleryMedia","pinTitle","pinUrl","resetCarousel","activeImageIndex","setActiveImageIndex","React","activeHeight","setActiveHeight","modalOpen","setModalOpen","mainImgRef","activeMedia","useModalGallery","count","updateHeight","current","getBoundingClientRect","window","addEventListener","removeEventListener","ModalGalleryProvider","S","onClick","ref","isMediaVideo","renderImage","PinButton","data","image","title","url","CarouselProvider","direction","CarouselDirection","Vertical","resetParam","style","SimpleTrack","map","media","filterValue","Controls","paginationTitle","wrap","ModalGallery","ariaLabel","isOpen","openIndex","closeOnBackground","showBackground","showClose","onClose","mainImage","sizes","DesktopLarge","srcs","previewImage","getMediaSrcs","videoUrl","videoId","format","src","split","srcSet","join","alt","undefined","role","loading","SvgPlay","altText","getSrcs","combineRefs","refsToSet","instance","forEach","refToSet","children","initCarousel","mobileOnly","otherProps","carousel","useCarouselContext","swipeHandlers","useSwipeable","onSwipedLeft","goToNext","onSwipedRight","goToPrev","refContainer","alignment","offsets","Track","refTrack","Horizontal","offset","SvgCarouselArrowUp","DotPagination","value","onChange","excludeFill","dotWidth","Fill","Array","_","index","Item","event","preventDefault","className","maxIndex","goToIndex","activeIndex","FocusRing","focusRingClass","disabled","type","onPrevClick","ArrowLeft","ArrowUp","onNextClick","ArrowRight","ArrowDown","displayName","DesktopSmall","DotPaginationStyles","nav"],"mappings":"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","file":"24-04d5bf4b2aa1d0c65f09.js","sourcesContent":["import { transition } from '@helpers/animate';\r\nimport { imageCoverContainer, imageWrapperPreserveRatio } from '@helpers/aspectRatio';\r\nimport brand from '@helpers/brand';\r\nimport { fluid } from '@helpers/fluid';\r\nimport fonts from '@helpers/fonts';\r\nimport { ButtonReset } from '@helpers/global';\r\nimport { Device, from } from '@helpers/media';\r\nimport ClearButtonStyles from '@stories/Components/ClearButton/ClearButton.styles';\r\nimport styled from 'styled-components';\r\nconst Container = styled.div `\r\n  &[data-portrait='true'] {\r\n    @media ${from(Device.MobileLarge)} {\r\n      width: 74%;\r\n    }\r\n  }\r\n`;\r\nconst TitleWrapper = styled.div `\r\n  display: flex;\r\n  gap: 24px;\r\n  margin-bottom: 18px;\r\n  align-items: flex-end;\r\n  justify-content: space-between;\r\n\r\n  @media ${from(Device.MobileLarge)} {\r\n    align-items: center;\r\n    justify-content: flex-start;\r\n  }\r\n\r\n  ${ClearButtonStyles.Container} {\r\n    ${transition('opacity')};\r\n\r\n    &[data-visible='false'] {\r\n      opacity: 0;\r\n      pointer-events: none;\r\n    }\r\n  }\r\n`;\r\nconst Title = styled.span `\r\n  ${fonts.brandonGrotesque.bold};\r\n\r\n  text-transform: uppercase;\r\n  font-size: 16px;\r\n  line-height: 22px;\r\n  border-bottom: 2px solid ${brand.green};\r\n`;\r\nconst Options = styled.ul `\r\n  display: grid;\r\n  gap: 8px;\r\n  padding-bottom: 6px;\r\n  /* Ensure swatches are in line with the title, ignoring the highlight spacing around each swatch */\r\n  margin-left: calc(${fluid(3, 6)} * -1);\r\n\r\n  ${Container}[data-portrait='true'] & {\r\n    grid-template-columns: repeat(12, 1fr);\r\n  }\r\n\r\n  ${Container}[data-portrait='false'] & {\r\n    grid-template-columns: repeat(4, 1fr);\r\n\r\n    @media ${from(Device.MobileLarge)} {\r\n      grid-template-columns: repeat(7, 1fr);\r\n    }\r\n\r\n    @media ${from(Device.TabletLarge)} {\r\n      grid-template-columns: repeat(14, 1fr);\r\n    }\r\n  }\r\n\r\n  @media ${from(Device.TabletLarge)} {\r\n    gap: 0;\r\n  }\r\n\r\n  [data-no-options='true'] ${Container} & {\r\n    @media ${from(Device.TabletLarge)} {\r\n      grid-template-columns: repeat(10, 1fr);\r\n      max-width: calc(100% - 317px);\r\n    }\r\n  }\r\n`;\r\nconst Option = styled.li `\r\n  width: 100%;\r\n`;\r\nconst Button = styled.button `\r\n  ${ButtonReset};\r\n  display: block;\r\n  width: 100%;\r\n  text-align: left;\r\n\r\n  &[data-disabled='true'] {\r\n    opacity: 0.5;\r\n    cursor: not-allowed;\r\n  }\r\n`;\r\nconst Border = styled.div `\r\n  padding: ${fluid(2, 4)};\r\n  border: 1px solid;\r\n  background-color: transparent;\r\n  border-color: transparent;\r\n  margin-bottom: 4px;\r\n\r\n  ${Container}[data-portrait='true'] & {\r\n    padding-top: ${fluid(4, 8)};\r\n    padding-bottom: ${fluid(4, 8)};\r\n  }\r\n\r\n  [data-active='true'] &,\r\n  ${Button}:hover & {\r\n    background-color: ${brand.white};\r\n    border-color: ${brand.green};\r\n  }\r\n`;\r\nconst ImageContainer = styled.div `\r\n  ${Container}[data-portrait='false'] & {\r\n    ${imageWrapperPreserveRatio(138, 56)};\r\n  }\r\n\r\n  ${Container}[data-portrait='true'] & {\r\n    ${imageWrapperPreserveRatio(73, 116)};\r\n  }\r\n`;\r\nconst Image = styled.img `\r\n  ${imageCoverContainer()}\r\n\r\n  ${Container}[data-portrait='true'] & {\r\n    object-fit: contain;\r\n  }\r\n`;\r\nconst Label = styled.span `\r\n  ${transition('opacity')};\r\n  ${fonts.brandonGrotesque.medium};\r\n\r\n  font-size: ${fluid(12, 16)};\r\n  line-height: ${fluid(16, 20)};\r\n  color: ${brand.green};\r\n  display: inline-block;\r\n  margin: 0 auto;\r\n\r\n  [data-active='true'] &,\r\n  ${Button}:hover & {\r\n    opacity: 1;\r\n  }\r\n\r\n  @media ${from(Device.TabletLarge)} {\r\n    opacity: 0;\r\n  }\r\n`;\r\nconst ColourPickerStyles = {\r\n    Container,\r\n    TitleWrapper,\r\n    Title,\r\n    Options,\r\n    Option,\r\n    Button,\r\n    Border,\r\n    ImageContainer,\r\n    Image,\r\n    Label,\r\n};\r\nexport default ColourPickerStyles;\r\n","import { css } from 'styled-components';\r\n/**\r\n * Returns the aspect ratio of the given width and height as a percentage.\r\n */\r\nexport function aspectRatio(width, height) {\r\n    return (height / width) * 100;\r\n}\r\n/**\r\n * Re-usable styles for image container where the\r\n * image needs to maintain it's aspect ratio\r\n *\r\n * @param width\r\n * @param height\r\n * @returns\r\n */\r\nexport function imageWrapperPreserveRatio(width, height) {\r\n    if (!width && !height) {\r\n        return null;\r\n    }\r\n    return css `\r\n    position: relative;\r\n    height: 0;\r\n    width: 100%;\r\n    overflow: hidden;\r\n    overflow: clip;\r\n    padding-bottom: ${aspectRatio(width, height)}%;\r\n  `;\r\n}\r\n/**\r\n * Re-usable styles for an image placed within\r\n * a container maintaining aspect ratio\r\n */\r\nexport const imageCoverContainer = (relative) => css `\r\n  display: block;\r\n  width: 100%;\r\n  height: 100%;\r\n  object-fit: cover;\r\n  object-position: center;\r\n  ${!relative && 'position: absolute; top: 0;left: 0;'}\r\n`;\r\n","var _defs, _g;\n\nfunction _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }\n\nimport * as React from \"react\";\n\nfunction SvgPlayCircleInstagram(props) {\n  return /*#__PURE__*/React.createElement(\"svg\", _extends({\n    xmlns: \"http://www.w3.org/2000/svg\",\n    viewBox: \"0 0 131.326 119.639\"\n  }, props), _defs || (_defs = /*#__PURE__*/React.createElement(\"defs\", null, /*#__PURE__*/React.createElement(\"clipPath\", {\n    id: \"play-circle-instagram_svg__a\"\n  }, /*#__PURE__*/React.createElement(\"path\", {\n    \"data-name\": \"Rectangle 45\",\n    fill: \"none\",\n    d: \"M0 0h131.326v119.639H0z\"\n  })), /*#__PURE__*/React.createElement(\"clipPath\", {\n    id: \"play-circle-instagram_svg__b\"\n  }, /*#__PURE__*/React.createElement(\"path\", {\n    \"data-name\": \"Rectangle 46\",\n    fill: \"none\",\n    d: \"M0 0h80.019v76.141H0z\"\n  })))), _g || (_g = /*#__PURE__*/React.createElement(\"g\", {\n    \"data-name\": \"Group 18781\"\n  }, /*#__PURE__*/React.createElement(\"g\", {\n    \"data-name\": \"Group 281\"\n  }, /*#__PURE__*/React.createElement(\"g\", {\n    \"data-name\": \"Group 280\",\n    clipPath: \"url(#play-circle-instagram_svg__a)\"\n  }, /*#__PURE__*/React.createElement(\"g\", {\n    \"data-name\": \"Group 279\"\n  }, /*#__PURE__*/React.createElement(\"path\", {\n    \"data-name\": \"Path 133\",\n    d: \"M65.663 115.549a52.224 52.224 0 0052.224-52.223 52.224 52.224 0 00-52.224-52.224 52.224 52.224 0 00-52.224 52.224 52.224 52.224 0 0052.224 52.223z\",\n    fill: \"none\",\n    stroke: \"currentColor\",\n    strokeWidth: 5\n  })))), /*#__PURE__*/React.createElement(\"g\", {\n    \"data-name\": \"Group 286\"\n  }, /*#__PURE__*/React.createElement(\"g\", {\n    \"data-name\": \"Group 285\"\n  }, /*#__PURE__*/React.createElement(\"g\", {\n    \"data-name\": \"Group 284\",\n    clipPath: \"url(#play-circle-instagram_svg__b)\",\n    transform: \"translate(33.935 21.749)\"\n  }, /*#__PURE__*/React.createElement(\"g\", {\n    \"data-name\": \"Group 283\"\n  }, /*#__PURE__*/React.createElement(\"path\", {\n    \"data-name\": \"Path 134\",\n    d: \"M67.545 38.256L16.376 8.766a3.549 3.549 0 00-3.906 0 4.028 4.028 0 00-1.954 3.319v58.982a3.78 3.78 0 001.953 3.32 3.776 3.776 0 001.954.585 3.776 3.776 0 001.954-.585l51.169-29.491a4.027 4.027 0 001.954-3.32 3.785 3.785 0 00-1.955-3.321z\",\n    fill: \"currentColor\"\n  }))))))));\n}\n\nexport default __webpack_public_path__ + \"ef2f58a39e78aeeebaedaf0f14625e89.svg\";\nexport { SvgPlayCircleInstagram as ReactComponent };","import brand from '@helpers/brand';\r\nimport { fluid } from '@helpers/fluid';\r\nimport { siteWide } from '@helpers/grid';\r\nimport { Device, from, until } from '@helpers/media';\r\nimport ButtonStyles from '@stories/Components/Button/Button.styles';\r\nimport styled from 'styled-components';\r\nimport ColourPickerStyles from './ColourPicker/ColourPicker.styles';\r\nconst Container = styled.section ``;\r\nconst Inner = styled.div `\r\n  ${siteWide};\r\n\r\n  @media ${until(Device.MobileLarge)} {\r\n    &[data-mobile-stretch='true'] {\r\n      padding: 0;\r\n    }\r\n  }\r\n\r\n  &[data-no-colours='false'][data-no-options='true'] {\r\n    display: grid;\r\n\r\n    @media ${from(Device.TabletLarge)} {\r\n      ${() => BottomWrapper},\r\n      ${ColourPickerStyles.Container} {\r\n        grid-area: 1 / 1 / 2 / 2;\r\n      }\r\n    }\r\n  }\r\n`;\r\nconst Beneath = styled.div `\r\n  background-color: ${brand.beige};\r\n  padding: 30px 0 ${fluid(32, 80)};\r\n\r\n  @media ${from(Device.MobileLarge)} {\r\n    padding-top: 120px;\r\n    margin-top: -130px;\r\n  }\r\n`;\r\nconst BottomWrapper = styled.div `\r\n  display: grid;\r\n  gap: 28px;\r\n  padding-top: ${fluid(26, 46)};\r\n\r\n  @media ${from(Device.TabletSmall)} {\r\n    grid-template-columns: 1fr 1fr;\r\n  }\r\n\r\n  @media ${from(Device.Desktop)} {\r\n    grid-template-columns: 3fr 1fr;\r\n  }\r\n`;\r\nconst ListWrapper = styled.div `\r\n  display: flex;\r\n  flex-direction: column;\r\n  gap: 24px;\r\n  max-width: 1128px;\r\n\r\n  @media ${from(Device.Desktop)} {\r\n    flex-direction: row;\r\n  }\r\n`;\r\nconst LinkWrapper = styled.div `\r\n  display: flex;\r\n  flex-direction: column;\r\n  justify-content: center;\r\n  align-items: flex-start;\r\n  gap: ${fluid(16, 24)};\r\n\r\n  ${ButtonStyles.Container} {\r\n    width: 100%;\r\n  }\r\n\r\n  ${ButtonStyles.Text} {\r\n    margin: 0 auto;\r\n    text-align: center;\r\n  }\r\n\r\n  @media ${until(Device.Tablet)} {\r\n    align-items: center;\r\n  }\r\n`;\r\nconst RangeDetailGalleryStyles = {\r\n    Container,\r\n    Inner,\r\n    Beneath,\r\n    ListWrapper,\r\n    BottomWrapper,\r\n    LinkWrapper,\r\n};\r\nexport default RangeDetailGalleryStyles;\r\n","import { transition } from '@helpers/animate';\r\nimport brand from '@helpers/brand';\r\nimport fonts from '@helpers/fonts';\r\nimport { Device, until } from '@helpers/media';\r\nimport srOnly from '@helpers/srOnly';\r\nimport { paragraphSmall } from '@helpers/typography';\r\nimport styled from 'styled-components';\r\nconst Container = styled.button `\r\n  display: inline-flex;\r\n  align-items: center;\r\n  border: var(--borderWidth, 0) solid var(--colorBorder, var(--colorBg));\r\n  background: var(--colorBg);\r\n  background-image: linear-gradient(to right, var(--colorBgActive), var(--colorBgActive));\r\n  background-repeat: no-repeat;\r\n  background-size: 0% 100%;\r\n  color: var(--colorFg);\r\n  min-height: 52px;\r\n  padding: 12px 26px;\r\n  text-decoration: none;\r\n  ${transition('background-size, border-color, opacity')};\r\n  user-select: none;\r\n  width: auto;\r\n\r\n  &[data-fill='right'] {\r\n    background-position: left center;\r\n  }\r\n\r\n  &[data-fill='left'] {\r\n    background-position: right center;\r\n  }\r\n\r\n  span& {\r\n    button.focus-ring &,\r\n    a.focus-ring & {\r\n      outline: auto;\r\n      outline-offset: -5px;\r\n      outline-width: 2px;\r\n      outline-style: solid;\r\n    }\r\n\r\n    button.focus-ring,\r\n    a.focus-ring,\r\n    button:hover &,\r\n    a:hover & {\r\n      border-color: var(--colorBorderActive, var(--colorBgActive));\r\n      color: var(--colorFgActive);\r\n      background-size: 100% 100%;\r\n    }\r\n  }\r\n\r\n  &:not(span) {\r\n    cursor: pointer;\r\n\r\n    &:focus {\r\n      outline: none;\r\n    }\r\n\r\n    &.focus-ring {\r\n      outline: auto;\r\n      outline-offset: -5px;\r\n      outline-width: 2px;\r\n      outline-style: solid;\r\n    }\r\n\r\n    &.focus-ring,\r\n    &:hover {\r\n      border-color: var(--colorBorderActive, var(--colorBgActive));\r\n      color: var(--colorFgActive);\r\n      background-size: 100% 100%;\r\n    }\r\n  }\r\n\r\n  &[data-type='default'] {\r\n    --colorBg: ${brand.green};\r\n    --colorFg: ${brand.white};\r\n    --colorBgActive: ${brand.black};\r\n    --colorFgActive: ${brand.white};\r\n  }\r\n\r\n  &[data-type='inverted'] {\r\n    --colorBg: ${brand.white};\r\n    --colorFg: ${brand.black};\r\n    --colorBgActive: ${brand.black};\r\n    --colorFgActive: ${brand.white};\r\n  }\r\n\r\n  &[data-type='outline'] {\r\n    --borderWidth: 2px;\r\n    --colorBg: ${brand.white};\r\n    --colorFg: ${brand.green};\r\n    --colorBorder: ${brand.green};\r\n    --colorBgActive: ${brand.green};\r\n    --colorFgActive: ${brand.white};\r\n    --colorBorderActive: ${brand.green};\r\n  }\r\n\r\n  &[data-icon-only='true'] {\r\n    height: 52px;\r\n    justify-content: center;\r\n    padding: 0;\r\n    width: 52px;\r\n  }\r\n\r\n  /* Increase specificity to override :not(span) style */\r\n  &:disabled:disabled:disabled {\r\n    background-size: 0% 100%;\r\n    opacity: 0.5;\r\n    pointer-events: none;\r\n  }\r\n\r\n  @media ${until(Device.TabletLarge)} {\r\n    min-height: 45px;\r\n    padding: 6px 12px;\r\n\r\n    &[data-icon-only='true'] {\r\n      height: 45px;\r\n      width: 45px;\r\n    }\r\n  }\r\n\r\n  @media print {\r\n    display: none !important;\r\n  }\r\n`;\r\nconst Text = styled.span `\r\n  ${transition('color')};\r\n  ${paragraphSmall};\r\n  ${fonts.brandonGrotesque.bold};\r\n\r\n  color: currentColor;\r\n  line-height: 1.25;\r\n  margin: 0;\r\n  text-decoration: none;\r\n  text-transform: uppercase;\r\n\r\n  [data-icon-only='true'] & {\r\n    ${srOnly};\r\n  }\r\n`;\r\nconst IconWrapper = styled.div `\r\n  display: block;\r\n  color: currentColor;\r\n  height: 17px;\r\n  margin: 0;\r\n  padding: 0;\r\n  ${transition('color')};\r\n  width: 37px;\r\n\r\n  [data-icon-position='left'] & {\r\n    margin-right: auto;\r\n    order: -1;\r\n    padding-right: 20px;\r\n  }\r\n\r\n  [data-icon-position='right'] & {\r\n    margin-left: auto;\r\n    order: 1;\r\n    padding-left: 20px;\r\n  }\r\n\r\n  [data-icon-only='true'] & {\r\n    color: currentColor;\r\n    height: 17px;\r\n    margin: 0;\r\n    padding: 0;\r\n    width: 17px;\r\n  }\r\n`;\r\nconst ButtonStyles = {\r\n    Container,\r\n    IconWrapper,\r\n    Text,\r\n};\r\nexport default ButtonStyles;\r\n","import brand from '@helpers/brand';\r\nimport fonts from '@helpers/fonts';\r\nimport styled from 'styled-components';\r\nconst Container = styled.button `\r\n  display: inline-flex;\r\n  align-items: center;\r\n  background: none;\r\n  color: ${brand.black};\r\n  border: 0;\r\n  margin: 0;\r\n  padding: 0;\r\n  white-space: nowrap;\r\n  text-decoration: none;\r\n  text-underline-position: under;\r\n\r\n  &.focus-ring,\r\n  &:hover {\r\n    text-decoration: underline;\r\n  }\r\n`;\r\nconst Text = styled.span `\r\n  display: block;\r\n  color: currentColor;\r\n  ${fonts.brandonGrotesque.bold};\r\n  font-size: 12px;\r\n  line-height: 1em;\r\n  letter-spacing: 0.01em;\r\n  text-transform: uppercase;\r\n`;\r\nconst Icon = styled.span `\r\n  display: block;\r\n  height: 10px;\r\n  margin-right: 8px;\r\n  width: 10px;\r\n`;\r\nconst ClearButtonStyles = {\r\n    Container,\r\n    Icon,\r\n    Text,\r\n};\r\nexport default ClearButtonStyles;\r\n","var _path;\n\nfunction _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }\n\nimport * as React from \"react\";\n\nfunction SvgCarouselArrowDown(props) {\n  return /*#__PURE__*/React.createElement(\"svg\", _extends({\n    xmlns: \"http://www.w3.org/2000/svg\",\n    viewBox: \"0 0 24.25 14.141\"\n  }, props), _path || (_path = /*#__PURE__*/React.createElement(\"path\", {\n    \"data-name\": \"Path 172\",\n    d: \"M11.567 13.901L.244 2.576A.77.77 0 010 2.017a.768.768 0 01.244-.559L1.459.243a.766.766 0 01.559-.242.763.763 0 01.557.242l9.551 9.55 9.55-9.55a.763.763 0 01.558-.242.763.763 0 01.559.242l1.215 1.215a.766.766 0 01.242.559.768.768 0 01-.242.559L12.685 13.901a.766.766 0 01-1.118 0\",\n    fill: \"currentColor\"\n  })));\n}\n\nexport default __webpack_public_path__ + \"7de2d376feeda9b17a4a90a0b5d20733.svg\";\nexport { SvgCarouselArrowDown as ReactComponent };","import { transition } from '@helpers/animate';\r\nimport { imageCoverContainer, imageWrapperPreserveRatio } from '@helpers/aspectRatio';\r\nimport brand from '@helpers/brand';\r\nimport { fluid } from '@helpers/fluid';\r\nimport { ButtonReset } from '@helpers/global';\r\nimport { Device, from, until } from '@helpers/media';\r\nimport ControlsStyles from '@stories/Components/Misc/Carousel/Controls/Controls.styles';\r\nimport SimpleTrackStyles from '@stories/Components/Misc/Carousel/SimpleTrack/SimpleTrack.styles';\r\nimport PinButtonStyles from '@stories/Components/PinButton/PinButton.styles';\r\nimport styled from 'styled-components';\r\nconst Container = styled.div `\r\n  display: grid;\r\n  gap: 8px;\r\n\r\n  @media ${from(Device.MobileLarge)} {\r\n    grid-template-columns: 3fr 1fr;\r\n    padding: 32px 0;\r\n    gap: 16px;\r\n  }\r\n`;\r\nconst MainImageWrapper = styled.div `\r\n  position: relative;\r\n\r\n  ${PinButtonStyles.Button} {\r\n    position: absolute;\r\n    top: ${fluid(11, 15)};\r\n    right: ${fluid(4, 8)};\r\n  }\r\n`;\r\nconst MainImageButton = styled.button `\r\n  ${ButtonReset};\r\n  ${imageWrapperPreserveRatio(16, 9)};\r\n\r\n  display: block;\r\n\r\n  svg {\r\n    position: absolute;\r\n    color: ${brand.white};\r\n    top: 50%;\r\n    left: 50%;\r\n    width: ${fluid(75, 105)};\r\n    transform: translate(-50%, -50%);\r\n    ${transition('opacity')};\r\n    opacity: 0.7;\r\n  }\r\n\r\n  &:hover svg {\r\n    opacity: 1;\r\n  }\r\n`;\r\nconst Image = styled.img `\r\n  ${imageCoverContainer()};\r\n\r\n  [data-active='true'] & {\r\n    border: 1px solid ${brand.green};\r\n  }\r\n\r\n  @media ${from(Device.MobileLarge)} {\r\n    /** Ensure carousel doesn't overscroll by adding spacing above and below all images */\r\n    height: calc(100% - 14px);\r\n    top: 7px;\r\n    bottom: 7px;\r\n  }\r\n`;\r\nconst ThumbnailWrapper = styled.div `\r\n  display: none;\r\n\r\n  @media ${from(Device.MobileLarge)} {\r\n    display: flex;\r\n    position: relative;\r\n    z-index: 1;\r\n\r\n    ${ControlsStyles.ButtonWrapper} {\r\n      position: absolute;\r\n      top: 0;\r\n      bottom: 0;\r\n      left: 0;\r\n      right: 0;\r\n      /** Ensure it doesn't impede the thumbnails */\r\n      z-index: -1;\r\n    }\r\n\r\n    ${ControlsStyles.Button} {\r\n      &[aria-label='Previous'] {\r\n        transform: translateY(-75%);\r\n      }\r\n\r\n      &[aria-label='Next'] {\r\n        transform: translateY(75%);\r\n      }\r\n    }\r\n\r\n    &[data-count='1'],\r\n    &[data-count='2'],\r\n    &[data-count='3'] {\r\n      ${ControlsStyles.Button} {\r\n        display: none;\r\n      }\r\n    }\r\n  }\r\n`;\r\nconst ThumbnailWrapperMobile = styled.div `\r\n  overflow: hidden;\r\n\r\n  ${ControlsStyles.Container} {\r\n    padding-left: calc(var(--sitePadding) * 0.5);\r\n  }\r\n\r\n  @media ${from(Device.MobileLarge)} {\r\n    display: none;\r\n  }\r\n`;\r\nconst CarouselWrapper = styled.div `\r\n  overflow: hidden;\r\n\r\n  @media ${until(Device.MobileLarge)} {\r\n    margin: 0 -4px;\r\n  }\r\n\r\n  @media ${from(Device.MobileLarge)} {\r\n    max-height: var(--wrapperHeight);\r\n    flex: 1;\r\n\r\n    ${SimpleTrackStyles.Container} {\r\n      max-height: var(--wrapperHeight);\r\n    }\r\n  }\r\n`;\r\nconst CarouselItem = styled.li `\r\n  @media ${until(Device.MobileLarge)} {\r\n    flex: 0 0 25%;\r\n    padding: 0 4px;\r\n  }\r\n\r\n  @media ${from(Device.MobileLarge)} {\r\n    position: relative;\r\n    height: 0;\r\n    padding-bottom: calc(var(--wrapperHeight) / 3);\r\n  }\r\n`;\r\nconst CarouselImage = styled.button `\r\n  ${ButtonReset};\r\n\r\n  @media ${until(Device.MobileLarge)} {\r\n    ${imageWrapperPreserveRatio(88, 63)};\r\n    display: block;\r\n  }\r\n`;\r\nconst MediaGalleryStyles = {\r\n    Container,\r\n    MainImageWrapper,\r\n    MainImageButton,\r\n    Image,\r\n    ThumbnailWrapper,\r\n    ThumbnailWrapperMobile,\r\n    CarouselWrapper,\r\n    CarouselItem,\r\n    CarouselImage,\r\n};\r\nexport default MediaGalleryStyles;\r\n","import { videoUrl } from '@helpers/cloudinary';\r\nimport { getSrcs } from '@helpers/image';\r\nimport { Device, until } from '@helpers/media';\r\nimport { isMediaVideo } from '@helpers/video';\r\nimport { CarouselDirection } from '@hooks/useCarousel';\r\nimport { useModalGallery } from '@hooks/useModalGallery';\r\nimport { ReactComponent as SvgPlay } from '@img/icons/play-circle-instagram.svg';\r\nimport CarouselProvider from '@stories/Components/Misc/Carousel/CarouselProvider/CarouselProvider';\r\nimport Controls from '@stories/Components/Misc/Carousel/Controls/Controls';\r\nimport SimpleTrack from '@stories/Components/Misc/Carousel/SimpleTrack/SimpleTrack';\r\nimport ModalGallery from '@stories/Components/Misc/ModalGallery/ModalGallery';\r\nimport ModalGalleryProvider from '@stories/Components/Misc/ModalGallery/ModalGalleryProvider/ModalGalleryProvider';\r\nimport PinButton from '@stories/Components/PinButton/PinButton';\r\nimport * as React from 'react';\r\nimport S from './MediaGallery.styles';\r\nconst MediaGallery = ({ galleryMedia, pinTitle, pinUrl, resetCarousel, }) => {\r\n    const [activeImageIndex, setActiveImageIndex] = React.useState(0);\r\n    const [activeHeight, setActiveHeight] = React.useState(0);\r\n    const [modalOpen, setModalOpen] = React.useState(false);\r\n    const mainImgRef = React.useRef(null);\r\n    const activeMedia = galleryMedia[activeImageIndex];\r\n    useModalGallery({ count: galleryMedia.length });\r\n    const updateHeight = React.useCallback(() => {\r\n        if (!mainImgRef.current) {\r\n            return;\r\n        }\r\n        setActiveHeight(mainImgRef.current.getBoundingClientRect().height);\r\n    }, []);\r\n    React.useEffect(() => {\r\n        updateHeight();\r\n        window.addEventListener('resize', updateHeight);\r\n        return () => window.removeEventListener('resize', updateHeight);\r\n    }, [updateHeight]);\r\n    React.useEffect(() => {\r\n        if (activeImageIndex >= galleryMedia.length) {\r\n            setActiveImageIndex(0);\r\n        }\r\n    }, [galleryMedia, activeImageIndex]);\r\n    if (!activeMedia) {\r\n        return null;\r\n    }\r\n    return (React.createElement(ModalGalleryProvider, { count: galleryMedia.length },\r\n        React.createElement(S.Container, null,\r\n            React.createElement(S.MainImageWrapper, null,\r\n                React.createElement(S.MainImageButton, { onClick: () => setModalOpen(true), ref: mainImgRef, \"aria-label\": `Open ${isMediaVideo(activeMedia) ? 'video' : 'image'} in modal` }, renderImage(activeMedia, true)),\r\n                !isMediaVideo(activeMedia) && pinUrl && (React.createElement(PinButton, { data: { image: activeMedia, title: pinTitle, url: pinUrl } }))),\r\n            React.createElement(CarouselProvider, { count: galleryMedia.length, direction: CarouselDirection.Vertical, resetParam: resetCarousel },\r\n                React.createElement(S.ThumbnailWrapper, { style: {\r\n                        '--wrapperHeight': `${activeHeight}px`,\r\n                    }, \"data-count\": galleryMedia.length },\r\n                    React.createElement(S.CarouselWrapper, null,\r\n                        React.createElement(SimpleTrack, null,\r\n                            galleryMedia.map((media, i) => {\r\n                                /* Skip first item (will be added to end of thumbnails */\r\n                                if (i === 0) {\r\n                                    return null;\r\n                                }\r\n                                return (React.createElement(S.CarouselItem, { key: `${media.filterValue}-${i}`, \"data-active\": i === activeImageIndex },\r\n                                    React.createElement(S.CarouselImage, { onClick: () => setActiveImageIndex(i) }, renderImage(media))));\r\n                            }),\r\n                            React.createElement(S.CarouselItem, { \"data-active\": activeImageIndex === 0 },\r\n                                React.createElement(S.CarouselImage, { onClick: () => setActiveImageIndex(0) }, renderImage(galleryMedia[0]))))),\r\n                    React.createElement(Controls, { paginationTitle: \"Thumbnail carousel controls\", wrap: false }))),\r\n            React.createElement(CarouselProvider, { count: galleryMedia.length, resetParam: resetCarousel },\r\n                React.createElement(S.ThumbnailWrapperMobile, null,\r\n                    React.createElement(S.CarouselWrapper, null,\r\n                        React.createElement(SimpleTrack, null,\r\n                            galleryMedia.map((media, i) => {\r\n                                /* Skip first item (will be added to end of thumbnails */\r\n                                if (i === 0) {\r\n                                    return null;\r\n                                }\r\n                                return (React.createElement(S.CarouselItem, { key: `${media.filterValue}-${i}`, \"data-active\": i === activeImageIndex },\r\n                                    React.createElement(S.CarouselImage, { onClick: () => setActiveImageIndex(i) }, renderImage(media))));\r\n                            }),\r\n                            React.createElement(S.CarouselItem, { \"data-active\": activeImageIndex === 0 },\r\n                                React.createElement(S.CarouselImage, { onClick: () => setActiveImageIndex(0) }, renderImage(galleryMedia[0]))))),\r\n                    React.createElement(Controls, { paginationTitle: \"Thumbnail carousel controls\", wrap: false })))),\r\n        React.createElement(ModalGallery, { ariaLabel: \"Dummy Modal Gallery\", isOpen: modalOpen, openIndex: activeImageIndex, media: galleryMedia, closeOnBackground: true, showBackground: true, showClose: true, onClose: () => setModalOpen(false), pinTitle: pinTitle, pinUrl: pinUrl })));\r\n    function renderImage(media, mainImage) {\r\n        const sizes = mainImage\r\n            ? `${until(Device.MobileLarge)} 100vw, ${until(Device.TabletLarge)} 75vw, ${until(Device.DesktopLarge)} 57.5vw, 918px`\r\n            : `${until(Device.MobileLarge)} 24vw, ${until(Device.TabletLarge)} 25vw, ${until(Device.DesktopLarge)} 18.5vw, 307px`;\r\n        const srcs = !isMediaVideo(media)\r\n            ? getMediaSrcs(media, !!mainImage)\r\n            : media.previewImage\r\n                ? getMediaSrcs(media.previewImage, !!mainImage)\r\n                : [videoUrl(media.videoId, { format: 'jpg' })];\r\n        return isMediaVideo(media) ? (React.createElement(React.Fragment, null,\r\n            React.createElement(S.Image, { sizes: sizes, src: srcs[0].split(' ')[0], srcSet: srcs.join(','), alt: media.title ?? undefined, role: !media.title ? 'presentation' : undefined, loading: \"eager\" }),\r\n            React.createElement(SvgPlay, null))) : (React.createElement(S.Image, { sizes: sizes, src: srcs[0].split(' ')[0], srcSet: srcs.join(','), alt: media.altText ?? undefined, role: !media.altText ? 'presentation' : undefined, loading: \"lazy\" }));\r\n    }\r\n    function getMediaSrcs(image, mainImage) {\r\n        return mainImage ? getSrcs(image, 918, 375, 8, 9 / 16) : getSrcs(image, 307, 88, 6, 9 / 16);\r\n    }\r\n};\r\nexport default MediaGallery;\r\n","import { css } from 'styled-components';\r\n/**\r\n * Show only for screen readers.\r\n * @description Sourced from https://gist.github.com/ffoodd/000b59f431e3e64e4ce1a24d5bb36034\r\n */\r\nconst srOnly = css `\r\n  border: 0 !important;\r\n  clip: rect(1px, 1px, 1px, 1px) !important;\r\n  -webkit-clip-path: inset(50%) !important;\r\n  clip-path: inset(50%) !important;\r\n  height: 1px !important;\r\n  margin: -1px !important;\r\n  overflow: hidden !important;\r\n  padding: 0 !important;\r\n  position: absolute !important;\r\n  width: 1px !important;\r\n  white-space: nowrap !important;\r\n`;\r\nexport default srOnly;\r\n","/**\r\n * Create function to set all refs to new value.\r\n * @param refsToSet\r\n * @returns\r\n */\r\nexport function combineRefs(...refsToSet) {\r\n    return (instance) => {\r\n        if (!refsToSet?.length) {\r\n            return;\r\n        }\r\n        refsToSet.forEach((refToSet) => {\r\n            if (!refToSet) {\r\n                return;\r\n            }\r\n            if (typeof refToSet === 'function') {\r\n                return refToSet(instance);\r\n            }\r\n            if (instance) {\r\n                // Required to allow \".current\" to be assigned.\r\n                refToSet.current = instance;\r\n            }\r\n        });\r\n    };\r\n}\r\n","import { combineRefs } from '@helpers/combineRefs';\r\nimport { CarouselDirection } from '@hooks/useCarousel';\r\nimport * as React from 'react';\r\nimport { useSwipeable } from 'react-swipeable';\r\nimport { useCarouselContext } from '../CarouselProvider/CarouselProvider';\r\nimport S from './SimpleTrack.styles';\r\nconst SimpleTrack = ({ children, initCarousel = true, mobileOnly = false, ...otherProps }) => {\r\n    const carousel = useCarouselContext();\r\n    const swipeHandlers = useSwipeable({\r\n        onSwipedLeft: () => {\r\n            carousel.goToNext(false);\r\n        },\r\n        onSwipedRight: () => {\r\n            carousel.goToPrev(false);\r\n        },\r\n    });\r\n    return (React.createElement(S.Container, { ...otherProps, ...swipeHandlers, ref: combineRefs(carousel.refContainer, swipeHandlers.ref), \"data-alignment\": carousel.alignment, \"data-init\": carousel.offsets.length !== 0, \"data-mobile-only\": mobileOnly, \"data-vertical\": carousel.direction === CarouselDirection.Vertical },\r\n        React.createElement(S.Track, { ref: carousel.refTrack, style: {\r\n                transform: initCarousel\r\n                    ? carousel.direction === CarouselDirection.Horizontal\r\n                        ? `translateX(${carousel.offset * -1}px)`\r\n                        : `translateY(${carousel.offset * -1}px)`\r\n                    : undefined,\r\n            } }, children)));\r\n};\r\nexport default SimpleTrack;\r\n","var _path;\n\nfunction _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }\n\nimport * as React from \"react\";\n\nfunction SvgCarouselArrowUp(props) {\n  return /*#__PURE__*/React.createElement(\"svg\", _extends({\n    xmlns: \"http://www.w3.org/2000/svg\",\n    viewBox: \"0 0 24.25 14.141\"\n  }, props), _path || (_path = /*#__PURE__*/React.createElement(\"path\", {\n    \"data-name\": \"Path 171\",\n    d: \"M11.567.242L.244 11.565a.77.77 0 00-.244.559.768.768 0 00.244.559l1.215 1.215a.766.766 0 00.559.242.763.763 0 00.557-.242l9.55-9.55 9.55 9.55a.764.764 0 001.116 0l1.215-1.215a.766.766 0 000-1.118L12.685.242a.766.766 0 00-1.118 0\",\n    fill: \"currentColor\"\n  })));\n}\n\nexport default __webpack_public_path__ + \"34ecb029b525d6faf023870071882e69.svg\";\nexport { SvgCarouselArrowUp as ReactComponent };","import * as React from 'react';\r\nimport S from './DotPagination.styles';\r\nconst DotPagination = ({ ariaLabel, count, value, onChange, excludeFill = false, }) => {\r\n    const dotWidth = `${100 / count}%`;\r\n    return (React.createElement(S.Container, { \"aria-label\": ariaLabel, \"data-exclude-fill\": excludeFill, style: { '--width': dotWidth, '--fill': `${(value + 1) / count}` } },\r\n        React.createElement(S.Fill, null),\r\n        Array.from(Array(count)).map((_, index) => (React.createElement(S.Item, { key: `DotPaginationItem_${index}`, \"aria-current\": index === value, \"aria-label\": `Go to ${index + 1}`, onClick: (event) => {\r\n                event.preventDefault();\r\n                onChange(index);\r\n            }, \"data-passed\": index <= value })))));\r\n};\r\nexport default DotPagination;\r\n","import { CarouselDirection } from '@hooks/useCarousel';\r\nimport { ReactComponent as ArrowDown } from '@img/icons/carousel-arrow-down.svg';\r\nimport { ReactComponent as ArrowUp } from '@img/icons/carousel-arrow-up.svg';\r\nimport { ReactComponent as ArrowLeft } from '@img/icons/nav-arrow-left.svg';\r\nimport { ReactComponent as ArrowRight } from '@img/icons/nav-arrow-right.svg';\r\nimport DotPagination from '@stories/Components/Misc/DotPagination/DotPagination';\r\nimport * as React from 'react';\r\nimport { FocusRing } from 'react-aria';\r\nimport { useCarouselContext } from '../CarouselProvider/CarouselProvider';\r\nimport S from './Controls.styles';\r\nconst Controls = React.forwardRef((props, ref) => {\r\n    const carousel = useCarouselContext();\r\n    return (React.createElement(S.Container, { ref: ref, className: props.className, \"data-hide-pagination-mobile\": carousel.maxIndex > 24, \"data-vertical\": carousel.direction === CarouselDirection.Vertical },\r\n        React.createElement(DotPagination, { ariaLabel: props.paginationTitle, count: carousel.maxIndex + 1, onChange: (index) => carousel.goToIndex(index), value: carousel.activeIndex }),\r\n        React.createElement(S.ButtonWrapper, null,\r\n            React.createElement(FocusRing, { focusRingClass: \"focus-ring\" },\r\n                React.createElement(S.Button, { \"aria-label\": \"Previous\", disabled: !props.wrap && carousel.activeIndex === 0, type: \"button\", onClick: (event) => {\r\n                        event.preventDefault();\r\n                        if (props.onPrevClick) {\r\n                            props.onPrevClick();\r\n                        }\r\n                        else {\r\n                            carousel.goToPrev(props.wrap);\r\n                        }\r\n                    } }, carousel.direction === CarouselDirection.Horizontal ? React.createElement(ArrowLeft, null) : React.createElement(ArrowUp, null))),\r\n            React.createElement(FocusRing, { focusRingClass: \"focus-ring\" },\r\n                React.createElement(S.Button, { \"aria-label\": \"Next\", disabled: !props.wrap && carousel.activeIndex === carousel.maxIndex, type: \"button\", onClick: (event) => {\r\n                        event.preventDefault();\r\n                        if (props.onNextClick) {\r\n                            props.onNextClick();\r\n                        }\r\n                        else {\r\n                            carousel.goToNext(props.wrap);\r\n                        }\r\n                    } }, carousel.direction === CarouselDirection.Horizontal ? React.createElement(ArrowRight, null) : React.createElement(ArrowDown, null))))));\r\n});\r\nControls.displayName = 'Controls';\r\nexport default Controls;\r\n","import { transition } from '@helpers/animate';\r\nimport { Device, from } from '@helpers/media';\r\nimport styled from 'styled-components';\r\nconst Container = styled.div `\r\n  @media ${from(Device.TabletLarge)} {\r\n    &[data-mobile-only='true'] {\r\n      display: contents;\r\n    }\r\n  }\r\n`;\r\nconst Track = styled.ul `\r\n  ${transition('transform')};\r\n\r\n  display: flex;\r\n\r\n  @media ${from(Device.DesktopSmall)} {\r\n    [data-mobile-only='true'] & {\r\n      display: contents;\r\n    }\r\n  }\r\n\r\n  [data-vertical='true'] & {\r\n    flex-direction: column;\r\n  }\r\n`;\r\nconst SimpleTrackStyles = {\r\n    Container,\r\n    Track,\r\n};\r\nexport default SimpleTrackStyles;\r\n","import { transition } from '@helpers/animate';\r\nimport brand from '@helpers/brand';\r\nimport { ButtonReset } from '@helpers/global';\r\nimport { Device, until } from '@helpers/media';\r\nimport DotPaginationStyles from '@stories/Components/Misc/DotPagination/DotPagination.styles';\r\nimport styled from 'styled-components';\r\nconst Container = styled.div `\r\n  --controlsColour: ${brand.green};\r\n\r\n  display: flex;\r\n  gap: 24px;\r\n  padding: 4px 0;\r\n  place-content: center;\r\n  place-items: center;\r\n\r\n  ${DotPaginationStyles.Container} {\r\n    flex: 1;\r\n  }\r\n\r\n  @media ${until(Device.Tablet)} {\r\n    &[data-hide-pagination-mobile='true'] {\r\n      ${DotPaginationStyles.Container} {\r\n        display: none;\r\n      }\r\n    }\r\n  }\r\n\r\n  &[data-vertical='true'] {\r\n    ${DotPaginationStyles.Container} {\r\n      display: none;\r\n    }\r\n  }\r\n`;\r\nconst ButtonWrapper = styled.div `\r\n  display: flex;\r\n\r\n  [data-vertical='true'] & {\r\n    display: flex;\r\n    height: 100%;\r\n    flex-direction: column;\r\n    justify-content: space-between;\r\n    align-items: center;\r\n  }\r\n`;\r\nconst Button = styled.button `\r\n  ${ButtonReset}\r\n  display: flex;\r\n  border-radius: 50%;\r\n  height: 48px;\r\n  place-content: center;\r\n  place-items: center;\r\n  width: 48px;\r\n  color: var(--controlsColour);\r\n  ${transition('transform')};\r\n\r\n  svg {\r\n    display: block;\r\n    height: 28px;\r\n    width: 28px;\r\n  }\r\n\r\n  &.focus-ring {\r\n    outline: auto;\r\n    outline-offset: -3px;\r\n    outline-width: 3px;\r\n  }\r\n\r\n  &.focus-ring,\r\n  &:hover {\r\n    transform: scale(1.2);\r\n  }\r\n\r\n  &:disabled {\r\n    opacity: 0.5;\r\n    transform: none;\r\n  }\r\n`;\r\nconst ControlsStyles = {\r\n    ButtonWrapper,\r\n    Button,\r\n    Container,\r\n};\r\nexport default ControlsStyles;\r\n","import { transition } from '@helpers/animate';\r\nimport brand from '@helpers/brand';\r\nimport { Device, from } from '@helpers/media';\r\nimport styled from 'styled-components';\r\nconst Container = styled.nav `\r\n  /** value of rgba(brand.green, 0.4), hex needed for hover state */\r\n  --colorInactive: #ced6cb;\r\n  --colorActive: ${brand.green};\r\n  --clickPadding: 24px;\r\n  --height: 2px;\r\n  --width: 20px;\r\n  --fill: 0;\r\n\r\n  display: flex;\r\n  flex-direction: row;\r\n  place-content: center;\r\n  place-items: center;\r\n  user-select: none;\r\n  position: relative;\r\n  overflow: hidden;\r\n\r\n  &::before {\r\n    content: '';\r\n    position: absolute;\r\n    top: 24px;\r\n    left: 0;\r\n    height: var(--height);\r\n    width: 100%;\r\n    background-color: var(--colorInactive);\r\n  }\r\n\r\n  @media ${from(Device.Tablet)} {\r\n    --width: 100px;\r\n    --height: 4px;\r\n  }\r\n\r\n  &[data-exclude-fill='true'] {\r\n    --colorInactive: none;\r\n  }\r\n`;\r\nconst Fill = styled.div `\r\n  position: absolute;\r\n  z-index: 1;\r\n  top: 24px;\r\n  left: 0;\r\n  height: var(--height);\r\n  width: 100%;\r\n  background-color: var(--colorActive);\r\n  transform: scaleX(var(--fill));\r\n  transform-origin: left;\r\n  ${transition('transform')};\r\n\r\n  [data-exclude-fill='true'] & {\r\n    display: none;\r\n  }\r\n`;\r\nconst Item = styled.button `\r\n  flex: 1;\r\n  position: relative;\r\n  z-index: 2;\r\n  display: flex;\r\n  background: none;\r\n  border: 0;\r\n  color: transparent;\r\n  margin: 0;\r\n  padding: var(--clickPadding) 0;\r\n  place-content: center;\r\n  place-items: center;\r\n  ${transition('color')};\r\n  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);\r\n  -webkit-tap-highlight-color: transparent;\r\n\r\n  &::before {\r\n    content: '';\r\n    display: block;\r\n    background-color: var(--colorInactive);\r\n    border: 0;\r\n    height: 0;\r\n    width: 100%;\r\n    ${transition('transform')};\r\n    position: absolute;\r\n    top: 50%;\r\n  }\r\n\r\n  &[data-passed='true']::before {\r\n    background-color: var(--colorActive);\r\n  }\r\n\r\n  &:hover::before {\r\n    height: var(--height);\r\n    transform: scaleY(3);\r\n  }\r\n`;\r\nconst DotPaginationStyles = {\r\n    Container,\r\n    Fill,\r\n    Item,\r\n};\r\nexport default DotPaginationStyles;\r\n"],"sourceRoot":""}