{"version":3,"sources":["webpack:///./src/helpers/media.ts","webpack:///./img/icons/plus.svg","webpack:///./img/icons/icon-cross.svg","webpack:///./src/stories/Elements/Forms/Button/Button.styles.ts","webpack:///./src/helpers/brand.ts","webpack:///./src/helpers/fonts.ts","webpack:///./img/icons/upload.svg","webpack:///./img/icons/arrow-right.svg","webpack:///./src/helpers/animation.ts"],"names":["Device","mq","size","from","until","between","min","max","FromDevice","styled","div","device","css","UntilDevice","styles","props","xmlns","viewBox","id","data-name","d","transform","fill","fillRule","ButtonText","span","ButtonIcon","i","animation","easeInOutCubic","Tablet","position","icon","limitIconMovement","rotateAngle","BaseButton","brand","bs","fonts","lato","semiBold","cursor","ls","theme","green","light","grey","dark","white","red","base","pwpBlack","paypal","payBlue","palBlue","error","reverseIconAnimation","disableVerticalMovementOnHover","centreText","ButtonElement","button","attrs","type","LinkElement","a","black","nearlyBlack","nearlyWhite","lighter","darkAlt","darker","darkest","baseRgb","97","96","95","90","85","80","75","70","65","60","55","50","45","40","35","30","25","20","15","10","fieldBackground","authRetailerBackground","toolAccent","toolAccentDark","toolAccentDarker","splitContentBg","softBlack","heritage","blue","yellow","trustpilot","bad","poor","average","great","excellent","expand","factTags","web","print","maxPower","family","weight","swis721","christmas","wreath","medium","bold","value","stroke","strokeWidth","clipPath","reset","keyframes","fadeInLeft","amount","duration","delay","easingFunc","fadeInRight","fadeIn","inView","fadeInUp","greyscaleImgFade","filterDelay","animateLeadingLine","animateLeadingLineNoOffset","shimmerKeyframes","shimmer","spinKeyframes","skeletonBackgroundShine","skeletonComponentBackground","backgroundColor","shineColor","transition","properties","timing","innerCss","easeOutCubic","rootMargin"],"mappings":"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","file":"2-64561dc17a76913f6c17.js","sourcesContent":["import styled, { css } from 'styled-components';\r\nexport var Device;\r\n(function (Device) {\r\n    Device[Device[\"MobileSmall\"] = 320] = \"MobileSmall\";\r\n    Device[Device[\"MobileMedium\"] = 360] = \"MobileMedium\";\r\n    Device[Device[\"Mobile\"] = 375] = \"Mobile\";\r\n    Device[Device[\"MobileLarge\"] = 480] = \"MobileLarge\";\r\n    Device[Device[\"TabletSmall\"] = 568] = \"TabletSmall\";\r\n    Device[Device[\"Tablet\"] = 768] = \"Tablet\";\r\n    Device[Device[\"TabletLarge\"] = 1024] = \"TabletLarge\";\r\n    Device[Device[\"DesktopSmall\"] = 1280] = \"DesktopSmall\";\r\n    Device[Device[\"Desktop\"] = 1366] = \"Desktop\";\r\n    Device[Device[\"DesktopLarge\"] = 1600] = \"DesktopLarge\";\r\n    Device[Device[\"ActualDesktop\"] = 1920] = \"ActualDesktop\";\r\n    Device[Device[\"ExtraLargeDesktop\"] = 2560] = \"ExtraLargeDesktop\";\r\n})(Device || (Device = {}));\r\nexport default function mq(size) {\r\n    return `(min-width: ${size}px)`;\r\n}\r\nexport function from(size) {\r\n    return `(min-width: ${size}px)`;\r\n}\r\nexport function until(size) {\r\n    return `(max-width: ${size - 1}px)`;\r\n}\r\nexport function between(min, max) {\r\n    return `${from(min)} and ${until(max)}`;\r\n}\r\nexport const FromDevice = styled.div `\r\n  display: none;\r\n\r\n  ${({ device }) => device\r\n    ? css `\r\n          @media ${from(device)} {\r\n            display: block;\r\n          }\r\n        `\r\n    : null}\r\n`;\r\nexport const UntilDevice = styled.div `\r\n  display: block;\r\n\r\n  ${({ device }) => device\r\n    ? css `\r\n          @media ${from(device)} {\r\n            display: none;\r\n          }\r\n        `\r\n    : null}\r\n`;\r\n","import React from \"react\";\nexport default (({\n  styles = {},\n  ...props\n}) => <svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 15.682 15.682\" {...props}><path id=\"svg283__Path_4404\" data-name=\"Path 4404\" d=\"M19.841 964.362a1.032 1.032 0 00-1.032 1.032v5.778h-5.777a1.032 1.032 0 000 2.063h5.778v5.778a1.032 1.032 0 102.063 0v-5.778h5.778a1.032 1.032 0 000-2.063h-5.778v-5.778a1.032 1.032 0 00-1.032-1.032z\" transform=\"translate(-12 -964.362)\" fill=\"currentcolor\" /></svg>);","import React from \"react\";\nexport default (({\n  styles = {},\n  ...props\n}) => <svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 35 35\" {...props}><path id=\"svg259__X\" d=\"M1814 128.507l-16.01-16.007L1814 96.49l-1.49-1.49-16.01 16.009L1780.49 95l-1.49 1.49 16 16.009-16 16.008 1.49 1.493 16.01-16.008L1812.51 130z\" transform=\"translate(-1779 -95)\" fill=\"#fff\" fillRule=\"evenodd\" /></svg>);","import animation from '@helpers/animation';\r\nimport brand from '@helpers/brand';\r\nimport fonts from '@helpers/fonts';\r\nimport { Device, from } from '@helpers/media';\r\nimport styled, { css } from 'styled-components';\r\nexport const ButtonText = styled.span `\r\n  position: relative;\r\n  text-rendering: optimizeLegibility;\r\n  transform: translate3d(0, 0, 0);\r\n  will-change: transform;\r\n  z-index: 2;\r\n`;\r\nexport const ButtonIcon = styled.i `\r\n  position: absolute;\r\n  top: 50%;\r\n  display: inline-block;\r\n  transform: translateY(-50%);\r\n  transition: transform 0.3s ${animation.easeInOutCubic};\r\n  z-index: 2;\r\n  width: 18px;\r\n  height: 14px;\r\n\r\n  &[data-large-icon='true'] {\r\n    height: 24px;\r\n    width: 87px;\r\n  }\r\n\r\n  @media ${from(Device.Tablet)} {\r\n    width: 20px;\r\n    height: 16px;\r\n\r\n    &[data-large-icon='true'] {\r\n      height: 36px;\r\n      width: 115px;\r\n    }\r\n  }\r\n\r\n  ${({ position, size }) => {\r\n    switch (size) {\r\n        default:\r\n        case 'default':\r\n        case 'extra-large': {\r\n            switch (position) {\r\n                case 'before': {\r\n                    return css `\r\n              left: 16px;\r\n            `;\r\n                }\r\n                default:\r\n                case 'after': {\r\n                    return css `\r\n              right: 16px;\r\n            `;\r\n                }\r\n            }\r\n        }\r\n        case 'small': {\r\n            switch (position) {\r\n                case 'before': {\r\n                    return css `\r\n              left: 6px;\r\n\r\n              @media ${from(Device.Tablet)} {\r\n                left: 16px;\r\n              }\r\n            `;\r\n                }\r\n                default:\r\n                case 'after': {\r\n                    return css `\r\n              right: 6px;\r\n\r\n              @media ${from(Device.Tablet)} {\r\n                right: 16px;\r\n              }\r\n            `;\r\n                }\r\n            }\r\n        }\r\n        case 'small-mobile': {\r\n            switch (position) {\r\n                case 'before': {\r\n                    return css `\r\n              left: 6px;\r\n\r\n              @media ${from(Device.Tablet)} {\r\n                left: 16px;\r\n              }\r\n            `;\r\n                }\r\n                default:\r\n                case 'after': {\r\n                    return css `\r\n              right: 6px;\r\n\r\n              @media ${from(Device.Tablet)} {\r\n                right: 16px;\r\n              }\r\n            `;\r\n                }\r\n            }\r\n        }\r\n    }\r\n}}\r\n\r\n  ${({ icon }) => {\r\n    switch (icon) {\r\n        case 'pin':\r\n            return css `\r\n          height: 18px;\r\n\r\n          @media ${from(Device.Tablet)} {\r\n            height: 22px;\r\n          }\r\n        `;\r\n        default:\r\n            break;\r\n    }\r\n}}\r\n\r\n  ${({ limitIconMovement }) => limitIconMovement &&\r\n    css `\r\n      transform: translateY(-50%) !important;\r\n    `}\r\n\r\n  svg {\r\n    display: block;\r\n    width: 100%;\r\n    height: 100%;\r\n\r\n    ${({ rotateAngle }) => rotateAngle &&\r\n    css `\r\n        transform: rotate(${rotateAngle}deg);\r\n      `}\r\n  }\r\n`;\r\nexport const BaseButton = css `\r\n  box-shadow: ${brand.bs()};\r\n  ${fonts.lato.semiBold()};\r\n  position: relative;\r\n  display: inline-block;\r\n  margin: 0;\r\n  border: 0;\r\n\r\n  --padding-y: 10px;\r\n  --padding-x: 26px;\r\n  --icon-padding: 20px;\r\n  --icon-padding-large: 97px;\r\n  --icon-padding-before: 0px;\r\n  --icon-padding-after: 0px;\r\n\r\n  padding: var(--padding-y) calc(var(--padding-x) + var(--icon-padding-after)) var(--padding-y) calc(var(--padding-x) + var(--icon-padding-before));\r\n\r\n  &:not([data-icon='none']) {\r\n    &[data-icon-position='before'],\r\n    &[data-icon-position='both'] {\r\n      --icon-padding-before: var(--icon-padding);\r\n    }\r\n\r\n    &[data-icon-position='after'],\r\n    &[data-icon-position='both'] {\r\n      --icon-padding-after: var(--icon-padding);\r\n    }\r\n\r\n    &[data-large-icon-position='before'],\r\n    &[data-large-icon-position='both'] {\r\n      --icon-padding-before: var(--icon-padding-large);\r\n    }\r\n\r\n    &[data-large-icon-position='after'],\r\n    &[data-large-icon-position='both'] {\r\n      --icon-padding-after: var(--icon-padding-large);\r\n    }\r\n  }\r\n\r\n  &[data-size='small'],\r\n  &[data-size='small-mobile'] {\r\n    --padding-y: 9px;\r\n    --padding-x: 12px;\r\n  }\r\n\r\n  &[data-size='small'],\r\n  &[data-size='small-mobile'] {\r\n    --padding-y: 9px;\r\n    --padding-x: 12px;\r\n  }\r\n\r\n  @media ${from(Device.Tablet)} {\r\n    --icon-padding: 24px;\r\n    --icon-padding-large: 125px;\r\n    &[data-size='default'],\r\n    &[data-size='extra-large'],\r\n    &[data-size='small-mobile'] {\r\n      --padding-y: 15px;\r\n      --padding-x: 26px;\r\n    }\r\n  }\r\n\r\n  overflow: hidden;\r\n  text-transform: uppercase;\r\n  text-decoration: none;\r\n  transform: translate3d(0, 0, 0);\r\n  transition: box-shadow 0.3s ${animation.easeInOutCubic}, transform 0.3s ${animation.easeInOutCubic}, opacity 0.3s ${animation.easeInOutCubic};\r\n  will-change: transform;\r\n  user-select: none;\r\n  contain: paint;\r\n  cursor: pointer;\r\n  opacity: 1;\r\n\r\n  &[data-progress='true'] {\r\n    cursor: progress;\r\n    opacity: 0.65;\r\n  }\r\n\r\n  ${({ cursor }) => cursor\r\n    ? css `\r\n          cursor: ${cursor} !important;\r\n        `\r\n    : null}\r\n\r\n  &[data-size=\"default\"] {\r\n    font-size: 15px;\r\n    line-height: 1.2em;\r\n    letter-spacing: ${fonts.ls(100)};\r\n  }\r\n\r\n  &[data-size='small-mobile'] {\r\n    font-size: 11px;\r\n    line-height: 1.2em;\r\n    letter-spacing: ${fonts.ls(50)};\r\n\r\n    @media ${from(Device.Tablet)} {\r\n      font-size: 15px;\r\n      letter-spacing: ${fonts.ls(100)};\r\n    }\r\n  }\r\n\r\n  &[data-size='small'] {\r\n    font-size: 13px;\r\n    line-height: 1.2em;\r\n    letter-spacing: ${fonts.ls(50)};\r\n  }\r\n\r\n  &[data-size='extra-large'] {\r\n    font-size: 36px;\r\n    line-height: 3.2em;\r\n  }\r\n\r\n  ${(props) => {\r\n    switch (props.theme) {\r\n        default:\r\n        case 'green': {\r\n            return css `\r\n          background: ${brand.green.light};\r\n          color: ${brand.grey[20]};\r\n\r\n          &:before {\r\n            background: ${brand.green.dark};\r\n          }\r\n\r\n          &:focus,\r\n          &:hover {\r\n            color: ${brand.grey[20]};\r\n          }\r\n        `;\r\n        }\r\n        case 'white': {\r\n            return css `\r\n          background: ${brand.grey[95]};\r\n          color: ${brand.grey[20]};\r\n\r\n          &:before {\r\n            background: ${brand.white};\r\n          }\r\n\r\n          &:focus,\r\n          &:hover {\r\n            color: ${brand.grey[20]};\r\n          }\r\n        `;\r\n        }\r\n        case 'grey': {\r\n            return css `\r\n          background: ${brand.grey[25]};\r\n          color: ${brand.white};\r\n\r\n          &:before {\r\n            background: ${brand.grey[20]};\r\n          }\r\n\r\n          &:focus,\r\n          &:hover {\r\n            color: ${brand.white};\r\n          }\r\n\r\n          ${ButtonIcon} svg {\r\n            color: ${brand.white};\r\n          }\r\n        `;\r\n        }\r\n        case 'red': {\r\n            return css `\r\n          background: ${brand.red.dark};\r\n          color: ${brand.white};\r\n\r\n          &:before {\r\n            background: ${brand.red.base};\r\n          }\r\n\r\n          &:focus,\r\n          &:hover {\r\n            color: ${brand.white};\r\n          }\r\n\r\n          ${ButtonIcon} svg {\r\n            color: ${brand.white};\r\n          }\r\n        `;\r\n        }\r\n        case 'red-outline': {\r\n            return css `\r\n          background: ${brand.white};\r\n          color: ${brand.red.base};\r\n          border: 1px solid ${brand.red.base};\r\n          box-shadow: none;\r\n          cursor: inherit;\r\n\r\n          &:before {\r\n            background: ${brand.white};\r\n            display: none;\r\n          }\r\n\r\n          &:focus,\r\n          &:hover {\r\n            color: ${brand.red.base};\r\n          }\r\n        `;\r\n        }\r\n        case 'out-of-stock-dark': {\r\n            return css `\r\n          background: ${brand.pwpBlack};\r\n          color: ${brand.green.base};\r\n          border: 2px solid ${brand.green.base};\r\n          box-shadow: none;\r\n          cursor: inherit;\r\n\r\n          &:before {\r\n            background: ${brand.pwpBlack};\r\n            display: none;\r\n          }\r\n\r\n          &:focus,\r\n          &:hover {\r\n            color: ${brand.green.base};\r\n          }\r\n        `;\r\n        }\r\n        case 'out-of-stock-grey': {\r\n            return css `\r\n          background: ${brand.grey[70]};\r\n          color: ${brand.grey[40]};\r\n          border: 2px solid ${brand.grey[70]};\r\n          box-shadow: none;\r\n          cursor: inherit;\r\n\r\n          &:before {\r\n            display: none;\r\n          }\r\n\r\n          &:focus,\r\n          &:hover {\r\n            color: ${brand.grey[40]};\r\n          }\r\n        `;\r\n        }\r\n        case 'paypal': {\r\n            return css `\r\n          background: ${brand.paypal.payBlue};\r\n          color: ${brand.paypal.white};\r\n\r\n          &:before {\r\n            background: ${brand.paypal.palBlue};\r\n          }\r\n\r\n          &:focus,\r\n          &:hover {\r\n            color: ${brand.paypal.white};\r\n          }\r\n\r\n          ${ButtonIcon} svg {\r\n            color: ${brand.paypal.white};\r\n          }\r\n        `;\r\n        }\r\n        case 'unavailable': {\r\n            return css `\r\n          background: ${brand.grey[60]};\r\n          color: ${brand.paypal.white};\r\n          box-shadow: none;\r\n          cursor: inherit;\r\n\r\n          &:before {\r\n            background: ${brand.grey[60]};\r\n          }\r\n\r\n          &:focus,\r\n          &:hover {\r\n            color: ${brand.paypal.white};\r\n          }\r\n\r\n          ${ButtonIcon} svg {\r\n            color: ${brand.paypal.white};\r\n          }\r\n        `;\r\n        }\r\n        case 'transparent': {\r\n            return css `\r\n          box-shadow: none;\r\n          background: transparent;\r\n          color: ${brand.grey[20]};\r\n\r\n          &:before {\r\n            background: transparent;\r\n          }\r\n\r\n          &:focus,\r\n          &:hover {\r\n            color: ${brand.grey[20]};\r\n          }\r\n        `;\r\n        }\r\n        case 'black': {\r\n            return css `\r\n          background: ${brand.grey[10]};\r\n          color: ${brand.white};\r\n\r\n          &:before {\r\n            background: ${brand.grey[25]};\r\n          }\r\n\r\n          &:focus,\r\n          &:hover {\r\n            color: ${brand.white};\r\n          }\r\n\r\n          ${ButtonIcon} svg {\r\n            color: ${brand.white};\r\n          }\r\n        `;\r\n        }\r\n    }\r\n}}\r\n\r\n  ${({ error, theme, reverseIconAnimation, disableVerticalMovementOnHover }) => {\r\n    if (error) {\r\n        return css `\r\n        border: 1px solid ${brand.red.base};\r\n        color: ${brand.red.base};\r\n      `;\r\n    }\r\n    if (theme === 'red-outline' || theme === 'unavailable' || theme === 'out-of-stock-dark' || theme === 'out-of-stock-grey') {\r\n        return css ``;\r\n    }\r\n    return css `\r\n      &:focus,\r\n      &:hover {\r\n        box-shadow: ${brand.bs(true)};\r\n        text-decoration: none;\r\n\r\n        ${disableVerticalMovementOnHover ? null : 'transform: translate(0, -2px);'}\r\n\r\n        &::before {\r\n          transform: translate(0, -50%) translate(-80px, 40px) scale(1.75);\r\n        }\r\n\r\n        ${ButtonIcon} {\r\n          transform: translateY(-50%) translateX(${reverseIconAnimation ? '-4px' : '4px'});\r\n        }\r\n      }\r\n    `;\r\n}}\r\n\r\n  &::before {\r\n    content: '';\r\n    position: absolute;\r\n    left: 0;\r\n    top: 50%;\r\n    display: block;\r\n    width: 100%;\r\n    height: 0;\r\n    padding-bottom: 100%;\r\n    border-radius: 50%;\r\n    transform: translate(0, -50%) translate(-80px, 40px) scale(1);\r\n    transition: transform 0.5s ${animation.easeInOutCubic};\r\n    z-index: 1;\r\n  }\r\n\r\n  &:disabled {\r\n    opacity: 0.5;\r\n    cursor: not-allowed;\r\n  }\r\n\r\n  ${({ centreText }) => centreText\r\n    ? css `\r\n          text-align: center;\r\n        `\r\n    : css `\r\n          text-align: left;\r\n        `}\r\n`;\r\nexport const ButtonElement = styled.button.attrs({ type: 'button' }) `\r\n  ${BaseButton};\r\n`;\r\nexport const LinkElement = styled.a `\r\n  ${BaseButton};\r\n`;\r\n","export default {\r\n    black: '#000000',\r\n    white: '#ffffff',\r\n    nearlyBlack: '#313131',\r\n    nearlyWhite: '#F4F4F4',\r\n    error: '#DA291C',\r\n    pwpBlack: '#050505',\r\n    red: {\r\n        base: '#DA291C',\r\n        dark: '#C12317',\r\n    },\r\n    green: {\r\n        lighter: '#cad94a',\r\n        light: '#d3e002',\r\n        base: '#cedc00',\r\n        dark: '#c9d602',\r\n        darkAlt: '#C4C90F',\r\n        darker: '#C9CF0F',\r\n        darkest: '#BFC40F',\r\n        baseRgb: '206, 220, 0',\r\n    },\r\n    grey: {\r\n        97: 'hsl(0, 0%, 97%);',\r\n        96: 'hsl(0, 0%, 96%);',\r\n        95: 'hsl(0, 0%, 95%);',\r\n        90: 'hsl(0, 0%, 90%);',\r\n        85: 'hsl(0, 0%, 85%);',\r\n        80: 'hsl(0, 0%, 80%);',\r\n        75: 'hsl(0, 0%, 75%);',\r\n        70: 'hsl(0, 0%, 70%);',\r\n        65: 'hsl(0, 0%, 65%);',\r\n        60: 'hsl(0, 0%, 60%);',\r\n        55: 'hsl(0, 0%, 55%);',\r\n        50: 'hsl(0, 0%, 50%);',\r\n        45: 'hsl(0, 0%, 45%);',\r\n        40: 'hsl(0, 0%, 40%);',\r\n        35: 'hsl(0, 0%, 35%);',\r\n        30: 'hsl(0, 0%, 30%);',\r\n        25: 'hsl(0, 0%, 25%);',\r\n        20: 'hsl(0, 0%, 20%);',\r\n        15: 'hsl(0, 0%, 15%);',\r\n        10: 'hsl(0, 0%, 10%);',\r\n        '05': 'hsl(0, 0%, 5%);',\r\n        fieldBackground: '#F9F9F9',\r\n        authRetailerBackground: '#191b1c',\r\n        toolAccent: '#54585A',\r\n        toolAccentDark: '#4c4f51',\r\n        toolAccentDarker: '#3f4243',\r\n        splitContentBg: '#25282A',\r\n        softBlack: '#1c1c1c',\r\n    },\r\n    heritage: {\r\n        blue: '#1E3B5D',\r\n        yellow: '#FEB51C',\r\n    },\r\n    paypal: {\r\n        payBlue: '#00457C',\r\n        palBlue: '#0079C1',\r\n        black: '#000',\r\n        white: '#FFF',\r\n    },\r\n    trustpilot: {\r\n        grey: '#dcdce5',\r\n        bad: '#ea4b39',\r\n        poor: '#ee8b48',\r\n        average: '#f8cd52',\r\n        great: '#8cc94a',\r\n        excellent: '#54b181',\r\n    },\r\n    bs: (expand = false) => {\r\n        if (expand === true) {\r\n            return 'rgba(0, 0, 0, 0.16) 0 6px 12px';\r\n        }\r\n        return 'rgba(0, 0, 0, 0.16) 0 3px 6px';\r\n    },\r\n    factTags: {\r\n        green: {\r\n            web: '#cedc00',\r\n            print: '#bfff0d',\r\n        },\r\n        grey: {\r\n            web: '#57585a',\r\n            print: '#333333',\r\n        },\r\n        maxPower: {\r\n            web: '#121212',\r\n            print: '#121212',\r\n        },\r\n    },\r\n};\r\n","import { css } from 'styled-components';\r\nconst lato = {\r\n    light: { family: 'Lato', weight: 300 },\r\n    base: {\r\n        family: 'Lato',\r\n        weight: 400,\r\n    },\r\n    semiBold: {\r\n        family: 'Lato',\r\n        weight: 500,\r\n    },\r\n    medium: {\r\n        family: 'Lato',\r\n        weight: 600,\r\n    },\r\n    bold: {\r\n        family: 'Lato',\r\n        weight: 700,\r\n    },\r\n    black: {\r\n        family: 'Lato',\r\n        weight: 900,\r\n    },\r\n};\r\nconst swis721 = {\r\n    black: {\r\n        family: 'Swis721',\r\n        weight: 900,\r\n    },\r\n};\r\nconst christmas = {\r\n    base: {\r\n        family: 'Certhas',\r\n        weight: 400,\r\n    },\r\n};\r\nconst wreath = {\r\n    base: {\r\n        family: 'Wreath Halftone',\r\n        weight: 400,\r\n    },\r\n};\r\nexport default {\r\n    lato: {\r\n        light: () => css `\r\n      font-family: ${lato.light.family};\r\n      font-weight: ${lato.light.weight};\r\n    `,\r\n        base: () => css `\r\n      font-family: ${lato.base.family};\r\n      font-weight: ${lato.base.weight};\r\n    `,\r\n        semiBold: () => css `\r\n      font-family: ${lato.semiBold.family};\r\n      font-weight: ${lato.semiBold.weight};\r\n    `,\r\n        medium: () => css `\r\n      font-family: ${lato.medium.family};\r\n      font-weight: ${lato.medium.weight};\r\n    `,\r\n        bold: () => css `\r\n      font-family: ${lato.bold.family};\r\n      font-weight: ${lato.bold.weight};\r\n    `,\r\n        black: () => css `\r\n      font-family: ${lato.black.family};\r\n      font-weight: ${lato.black.weight};\r\n    `,\r\n    },\r\n    swis721: {\r\n        black: () => css `\r\n      font-family: ${swis721.black.family};\r\n      font-weight: ${swis721.black.weight};\r\n    `,\r\n    },\r\n    christmas: {\r\n        base: () => css `\r\n      font-family: ${christmas.base.family};\r\n      font-weight: ${christmas.base.weight};\r\n    `,\r\n    },\r\n    wreath: {\r\n        base: () => css `\r\n      font-family: ${wreath.base.family};\r\n      font-weight: ${wreath.base.weight};\r\n    `,\r\n    },\r\n    ls: (value) => {\r\n        return `calc(${value / 1000} * 1em)`;\r\n    },\r\n};\r\n","import React from \"react\";\nexport default (({\n  styles = {},\n  ...props\n}) => <svg id=\"svg274__icon-upload\" xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 20.484 17.773\" {...props}><g fill=\"currentColor\"><path d=\"M309.394-116.792a.829.829 0 01.454-.459.687.687 0 01.914.658c.008.412 0 .825 0 1.238v3.516h17.743v-.191-4.517a.7.7 0 01.687-.745.7.7 0 01.683.749v5.353a.677.677 0 01-.757.733h-14.47c-1.461 0-2.922-.008-4.384 0a.808.808 0 01-.871-.517z\" transform=\"translate(-309.394 128.225)\" /><path d=\"M497.856-440.849v9.527a1.427 1.427 0 01-.036.364.687.687 0 01-.682.488.673.673 0 01-.642-.575 1.867 1.867 0 01-.018-.283v-9.534c-.066.074-.1.114-.141.157l-2.024 2.449a.676.676 0 01-.977.116.7.7 0 01-.078-1q1.658-2.014 3.32-4.025a.757.757 0 011.212.009q1.62 1.969 3.245 3.934a.709.709 0 01.121.928.676.676 0 01-1.1.055q-.879-1.063-1.753-2.13l-.4-.489z\" transform=\"translate(-486.924 443.462)\" /></g></svg>);","import React from \"react\";\nexport default (({\n  styles = {},\n  ...props\n}) => <svg xmlns=\"http://www.w3.org/2000/svg\" id=\"svg264__arrow\" viewBox=\"0 0 29.674 22.309\" {...props}><defs><clipPath id=\"svg266__clip-path\"><path id=\"svg267__Rectangle_24814\" data-name=\"Rectangle 24814\" fill=\"none\" stroke=\"currentcolor\" strokeWidth=\"1\" d=\"M0 0h22.309v29.674H0z\" /></clipPath></defs><g id=\"svg268__arrow\" transform=\"rotate(90 17.987 13.987)\"><g id=\"svg269__Group_1636\" data-name=\"Group 1636\" transform=\"translate(4 2.3)\"><g id=\"svg270__Group_1634\" data-name=\"Group 1634\" clipPath=\"url(#svg270__clip-path)\"><path id=\"svg271__Path_2975\" data-name=\"Path 2975\" d=\"M11.101 28.714a.459.459 0 01-.427-.427V1.281a.427.427 0 11.854 0v27.006a.459.459 0 01-.427.427zm0 0\" fill=\"none\" stroke=\"currentcolor\" strokeWidth=\"1\" /></g><g id=\"svg272__Group_1635\" data-name=\"Group 1635\" clipPath=\"url(#svg272__clip-path)\"><path id=\"svg273__Path_2976\" data-name=\"Path 2976\" d=\"M21.882 12.382a.392.392 0 01-.32-.107L11.097 1.814.748 12.168a.4.4 0 01-.64 0 .4.4 0 010-.64L10.781.854a.534.534 0 01.64 0l10.676 10.674a.4.4 0 010 .64.23.23 0 01-.213.213zm0 0\" fill=\"none\" stroke=\"currentcolor\" strokeWidth=\"1\" /></g></g></g></svg>);","import { css, keyframes } from 'styled-components';\r\nconst reset = keyframes `\r\n  100% {\r\n    transform: translate(0%, 0%);\r\n    opacity: 1;\r\n  }\r\n`;\r\nexport function fadeInLeft(amount, duration, delay, easingFunc) {\r\n    return css `\r\n    opacity: 0;\r\n    transform: translateX(-${amount}px);\r\n    animation: ${reset} ${duration}ms ${delay}ms ${easingFunc} forwards;\r\n  `;\r\n}\r\nexport function fadeInRight(amount, duration, delay, easingFunc) {\r\n    return css `\r\n    opacity: 0;\r\n    transform: translateX(${amount}px);\r\n    animation: ${reset} ${duration}ms ${delay}ms ${easingFunc} forwards;\r\n  `;\r\n}\r\nexport function fadeIn(inView, duration, delay, easingFunc) {\r\n    return css `\r\n    transition: opacity ${duration}ms ${delay}ms ${easingFunc};\r\n\r\n    ${inView\r\n        ? css `\r\n          opacity: 1;\r\n        `\r\n        : css `\r\n          opacity: 0;\r\n        `}\r\n  `;\r\n}\r\nexport function fadeInUp(inView, amount, duration, delay, easingFunc) {\r\n    return css `\r\n    transition: transform ${duration}ms ${easingFunc} ${delay}ms, opacity ${duration}ms ${easingFunc} ${delay}ms;\r\n\r\n    ${inView\r\n        ? css `\r\n          opacity: 1;\r\n          transform: translateY(0px);\r\n        `\r\n        : css `\r\n          opacity: 0;\r\n          transform: translateY(${amount}px);\r\n        `}\r\n  `;\r\n}\r\nexport function greyscaleImgFade(inView, duration, delay, filterDelay, easingFunc) {\r\n    return css `\r\n    transition: opacity ${duration}ms ${delay}ms ${easingFunc}, filter ${duration}ms ${filterDelay}ms ${easingFunc};\r\n\r\n    ${inView\r\n        ? css `\r\n          opacity: 1;\r\n          filter: grayscale(0);\r\n        `\r\n        : css `\r\n          opacity: 0;\r\n          filter: grayscale(1);\r\n        `}\r\n  `;\r\n}\r\nexport const animateLeadingLine = keyframes `\r\n  0% {\r\n    transform: translate(-50%, 50%) scaleY(0);\r\n    transform-origin: 0 0;\r\n  }\r\n\r\n  33% {\r\n    transform: translate(-50%, 50%) scaleY(1);\r\n    transform-origin: 0 0;\r\n  }\r\n\r\n  40% {\r\n    transform: translate(-50%, 50%) scaleY(1);\r\n    transform-origin: 0 0;\r\n  }\r\n\r\n  40.01% {\r\n    transform-origin: 100% 100%;\r\n  }\r\n\r\n  60% {\r\n    transform-origin: 100% 100%;\r\n    transform: translate(-50%, 50%) scaleY(0);\r\n  }\r\n`;\r\nexport const animateLeadingLineNoOffset = keyframes `\r\n  0% {\r\n    transform: translate(-50%, 0) scaleY(0);\r\n    transform-origin: 0 0;\r\n  }\r\n\r\n  33% {\r\n    transform: translate(-50%, 0) scaleY(1);\r\n    transform-origin: 0 0;\r\n  }\r\n\r\n  40% {\r\n    transform: translate(-50%, 0) scaleY(1);\r\n    transform-origin: 0 0;\r\n  }\r\n\r\n  40.01% {\r\n    transform-origin: 100% 100%;\r\n  }\r\n\r\n  60% {\r\n    transform-origin: 100% 100%;\r\n    transform: translate(-50%, 0) scaleY(0);\r\n  }\r\n`;\r\nconst shimmerKeyframes = keyframes `\r\n    0% {\r\n      background-position: -1000px 0;\r\n    }\r\n    100% {\r\n      background-position: 1000px 0;\r\n    }\r\n`;\r\nconst shimmer = css `\r\n  animation: ${shimmerKeyframes} 2s infinite linear;\r\n  background: linear-gradient(to right, #eff1f3 4%, #e2e2e2 25%, #eff1f3 36%);\r\n  background-size: 1000px 100%;\r\n`;\r\nconst spinKeyframes = keyframes `\r\n    from {\r\n        transform:rotate(0deg);\r\n    }\r\n    to {\r\n        transform:rotate(360deg);\r\n    }\r\n`;\r\nconst skeletonBackgroundShine = keyframes `\r\n  0% {\r\n      background-position: -100% 0;\r\n  }\r\n\r\n  50%, 100% {\r\n      background-position: 100% 0;\r\n  }\r\n`;\r\nexport const skeletonComponentBackground = (backgroundColor, shineColor) => css `\r\n  background: linear-gradient(\r\n    to right,\r\n    ${backgroundColor ?? 'rgba(130, 130, 130, 0.2)'} 8%,\r\n    ${shineColor ?? 'rgba(130, 130, 130, 0.3)'} 18%,\r\n    ${backgroundColor ?? 'rgba(130, 130, 130, 0.2)'} 33%\r\n  );\r\n  background-size: 200% 100%;\r\n  animation: ${skeletonBackgroundShine} 2s infinite ease-out;\r\n`;\r\nexport const cubicEaseOut = `cubic-bezier(0.33, 1, 0.68, 1)`;\r\nexport const shouldAnimate = (innerCss) => {\r\n    return css `\r\n    @media (prefers-reduced-motion: no-preference) {\r\n      ${innerCss}\r\n    }\r\n  `;\r\n};\r\nexport const transition = (properties, duration = 0.35, timing = cubicEaseOut) => {\r\n    return shouldAnimate(css `\r\n    transition-duration: ${typeof duration === 'string' ? duration : `${duration}s`};\r\n    transition-property: ${properties};\r\n    transition-timing-function: ${timing};\r\n    will-change: ${properties};\r\n  `);\r\n};\r\nexport default {\r\n    easeInOutCubic: 'cubic-bezier(0.645, 0.045, 0.355, 1)',\r\n    easeOutCubic: `cubic-bezier(0.3, 0.1, 0.1, 0.7)`,\r\n    rootMargin: '0px 0px -20% 0px',\r\n    shimmer,\r\n    spinKeyframes,\r\n};\r\n"],"sourceRoot":""}