{"version":3,"file":"static/js/3790.97b80011.chunk.js","mappings":"qLAIaA,GAAwCC,EAAAA,EAAAA,IAAOC,EAAAA,EAAPD,CAAY,gRAUtD,SAAAE,GAAK,OAAIA,EAAMC,MAAMC,WAAWC,cAAcC,OAAOC,iBAAiB,IAEpE,YAAO,SAALJ,MAAiBG,OAAOE,SAAS,GAE1CC,EAAAA,IACO,YAAO,SAALN,MAAiBG,OAAOI,YAAY,G,+FCStCC,EAAqCX,EAAAA,GAAAA,IAAU,yMAO/C,YAAO,SAALG,MAAiBG,OAAOE,SAAS,IAC1C,YAAO,SAALL,MAAiBS,KAAKC,QAAQC,KAAK,IAE1B,gBAAEC,EAAW,EAAXA,YAAmB,OA5BJ,SAACC,EAA+BD,GAC9D,OAAQC,GACJ,KAAKC,EAAAA,EAAAA,UAED,OAAqB,GAAdF,EAAmB,IAAM,KACpC,KAAKE,EAAAA,EAAAA,eAED,OAAqB,EAAdF,EAAkB,IAAM,KACnC,KAAKE,EAAAA,EAAAA,SACL,QAEI,OAAqB,EAAdF,EAAkB,IAAM,KAE3C,CAe4CG,CAAN,EAANF,OAA8CD,EAAY,G,wECpC7EI,E,SAA6BnB,GAAAA,GAAS,kNAK/C,YAAO,SAALG,MAAiBS,KAAKC,QAAQO,SAAS,IAClC,SAAAlB,GAAK,OAAIA,EAAMC,MAAMG,OAAOE,SAAS,IAIrC,YAAO,SAALL,MAAiBkB,WAAWC,SAAS,G,+FCTrCC,EAA0BvB,EAAAA,GAAAA,IAAU,yfAKjC,SAAAE,GAAK,OAAIA,EAAMC,MAAMG,OAAOkB,oBAAoB,IACpC,SAAAtB,GAAK,OAAIA,EAAMC,MAAMG,OAAOmB,cAAc,GAKlEC,EAAAA,EAAAA,IAAAA,IAAAA,SAC2B,SAAAxB,GAAK,OAAIA,EAAMC,MAAMG,OAAOqB,eAAe,IAG/D,YAAO,SAALxB,MAAiBkB,WAAWC,SAAS,GAC5CI,EAAAA,EAAAA,IAAAA,IAAAA,SAKK,YAAO,SAALvB,MAAiBkB,WAAWO,SAAS,IAIvC,YAAO,SAALzB,MAAiBkB,WAAWQ,SAAS,G,qHCzB5CC,EAAe9B,EAAAA,GAAAA,IAAU,uFACL,YAAU,SAAR+B,QAAsB,IACnC,YAAS,SAAPC,OAAoB,IA0CxBC,EAA8D,SAAC/B,GACxE,IAAIgC,GAAMC,EAAAA,EAAAA,QAAuB,MAIjC,GAAsBC,EAAAA,EAAAA,WAAS,GAAM,eAAhCC,EAAI,KAAEC,EAAO,MAElBC,EAAAA,EAAAA,YAAU,WAIN,IAAIC,EAAaN,EAAIO,QACjBC,EAAWxC,EAAMmC,KAAOnC,EAAMyC,iBAAmBzC,EAAM0C,kBAE3D,OADAJ,EAAWK,iBAAiB,gBAAiBH,GACtC,WACHF,EAAWM,oBAAoB,gBAAiBJ,EACpD,CACJ,GAAG,CAACxC,EAAMmC,KAAMnC,EAAMyC,iBAAkBzC,EAAM0C,qBAE9CL,EAAAA,EAAAA,YAAU,WACN,IAAIQ,EAAUC,YAAW,WAAQV,EAAQpC,EAAMmC,KAAO,GAAGnC,EAAM+C,OAC/D,OAAO,WACHC,aAAaH,EACjB,CACJ,GAAG,CAAC7C,EAAMmC,KAAMnC,EAAM+C,QAEtB,IAAIjB,EAAUK,EAAO,EAAI,EACzB,OAAO,SAACP,EAAY,CAACI,IAAKA,EAAKiB,UAAWjD,EAAMiD,UAAWpB,SAAU7B,EAAM6B,UAAY,IAAKC,QAASA,EAAQ,SAAE9B,EAAMkD,UACzH,C,0GCvEaC,GAAuBrD,EAAAA,EAAAA,IAAOiC,EAAAA,EAAPjC,CAAmB,yHAGrB,gBAAEG,EAAK,EAALA,MAAK,OAAMmD,EAAAA,EAAAA,GAAUnD,EAAMG,OAAOkB,qBAAsB,EAAE,IAAQ,gBAAErB,EAAK,EAALA,MAAK,OAAMmD,EAAAA,EAAAA,GAAUnD,EAAMG,OAAOkB,qBAAsB,GAAI,IAAU,gBAAErB,EAAK,EAALA,MAAK,OAAMmD,EAAAA,EAAAA,GAAUnD,EAAMG,OAAOkB,qBAAsB,GAAI,G,+FCJ/N+B,EAAsBvD,EAAAA,GAAAA,IAAU,8cAEvB,YAAe,SAAbwD,gBAAqCC,EAAAA,EAAAA,KAAuB,MAAQ,QAAQ,IAIvF,YAAe,SAAbD,gBAAqCC,EAAAA,EAAAA,KAAuB,OAAS,yBAAyB,IAC9F,YAAe,SAAbD,gBAAqCC,EAAAA,EAAAA,KAAuB,SAAW,UAAU,IACpF,YAAe,SAAbD,gBAAqCC,EAAAA,EAAAA,KAAuB,SAAW,GAAG,IACxE,gBAAEtD,EAAK,EAALA,MAAoB,SAAbqD,gBAAqCC,EAAAA,EAAAA,KAAuB,OAAStD,EAAMG,OAAOqB,eAAe,IAC1G,gBAAE6B,EAAa,EAAbA,cAAerD,EAAK,EAALA,MAAK,OAAMqD,IAAkBC,EAAAA,EAAAA,KAAwB,aAAetD,EAAMG,OAAOoD,UAAa,MAAM,IAI1H,YAAO,SAALvD,MAAiBkB,WAAWsC,UAAU,IAGxC,YAAO,SAALxD,MAAiBkB,WAAWC,SAAS,IAE9B,YAAO,SAALnB,MAAiBG,OAAOsD,UAAU,G,wBCtBnD,IAAKH,E,gCAGX,SAHWA,GAAAA,EAAAA,EAAe,eAAfA,EAAAA,EAAe,eAG1B,CAHWA,IAAAA,EAAe,I,+FCGdI,GAAsB7D,EAAAA,EAAAA,IAAO8D,EAAAA,EAAP9D,CAAa,yIAKnC,YAAO,SAALG,MAAiBkB,WAAWC,SAAS,G,yECNvCyC,E,SAA8B/D,GAAAA,IAAU,gKAG7B,YAAO,SAALG,MAAiBG,OAAOmB,cAAc,IACjC,YAAO,SAALtB,MAAiBG,OAAO0D,iBAAiB,G,yECJ7DC,E,SAA2BjE,GAAAA,IAAU,wHAI5B,YAAO,SAALG,MAAiBG,OAAOsD,UAAU,G","sources":["app-react/components/arena-host/new-live-casino-arena/live-casino-arena-navbar/boxes/live-casino-arena-navbar-button/live-casino-arena-navbar-button.default.box.ts","app-react/components/jackpot-widget/boxes/amount/label/jackpot-widget-amount-label.default.box.ts","app-react/components/lobby-header/boxes/title/lobby-header-title.default.box.ts","app-react/components/main-nav/boxes/main-nav-canvas/main-nav-canvas.default.box.ts","app-react/components/onboarding-tour/fade-in-div-on-mount.component.tsx","app-react/components/onboarding-tour/spotlight/boxes/mask-fabric/mask-fabric.default.box.ts","app-react/components/profile-box-messages-indicator/boxes/indicator.default.box.ts","app-react/components/profile-box-messages-indicator/consts/indicator-layout.ts","app-react/components/user-menu/logo-box/boxes/logo-image/default-logo-icon/logo-image.default.box.ts","app-react/components/user-menu/user-menu-items/boxes/separator/user-menu-separator.default.box.ts","app-react/components/user-menu/user-menu/boxes/header/user-menu-header.default.box.ts"],"sourcesContent":["import styled from \"styled-components\";\nimport {Link} from \"../../../../../raw-components/link/link\";\nimport {ACTIVE} from \"../../../../../../themes/css-global-classes\";\n\nexport const LiveCasinoArenaNavbarButtonDefaultBox = styled(Link)`\n  display: flex;\n  transition: color 0.15s ease;\n  align-items: center;\n  font-weight: 500;\n\n  &:hover {\n    cursor: pointer;\n  }\n  \n  color: ${props => props.theme.components.newLiveCasino.colors.filterButtonLabel};\n  &:hover {\n    color: ${({theme}) => theme.colors.textLight};\n  }\n  &.${ACTIVE} {\n    color: ${({theme}) => theme.colors.brandPrimary};\n    font-weight: 700;\n  }\n`;\n","import styled from \"styled-components\";\nimport { JackpotThemeType } from \"../../../../../services/jackpots/jackpots.service.interface\";\nimport {JACKPOT_WIDGET_LAYOUT} from \"../../../jackpot-widget.component\";\n\ninterface IJackpotWidgetAmountLabelBox {\n    layout: JACKPOT_WIDGET_LAYOUT;\n    widgetWidth: number;\n    themeType: JackpotThemeType;\n}\n\nconst handleAmountLabelFontSize = (layout: JACKPOT_WIDGET_LAYOUT, widgetWidth: number) => {\n    switch (layout) {\n        case JACKPOT_WIDGET_LAYOUT.LANDSCAPE:\n            /** In landscape view at a widget width of 468px, the amount should be of font-size 15px */\n            return widgetWidth * 15 / 468 + \"px\";\n        case JACKPOT_WIDGET_LAYOUT.LANDSCAPE_WIDE:\n            /** In minimized view at a widget width of 375px, the amount should be of font-size 9px */\n            return widgetWidth * 9 / 375 + \"px\";\n        case JACKPOT_WIDGET_LAYOUT.PORTRAIT:\n        default:\n            /** In portrait view at a widget width of 131px, the amount should be of font-size 9px */\n            return widgetWidth * 9 / 131 + \"px\";\n    }\n};\n\n/**\n * This is the \"PAID\" label shown above the amount at cold state\n */\nexport const JackpotWidgetAmountLabelDefaultBox = styled.div<IJackpotWidgetAmountLabelBox>`\n    width: 100%;\n    margin: 0 auto;\n    text-align: center;\n    letter-spacing: 0.2rem;\n\n    text-transform: uppercase;\n    color: ${({theme}) => theme.colors.textLight};\n    ${({theme}) => theme.font.presets.ultra};\n\n    font-size: ${({widgetWidth, layout}) => handleAmountLabelFontSize(layout, widgetWidth)};\n`;\n","import styled from \"styled-components\";\n\nexport const LobbyHeaderTitleDefaultBox = styled.h1`\n  display: flex;\n  flex-direction: row;\n  align-items: center;\n  width: 100%;\n  ${({theme}) => theme.font.presets.secondary};\n  color: ${props => props.theme.colors.textLight};\n  font-size: 3rem;\n  margin: 0;\n\n  @media ${({theme}) => theme.mediaQuery.lAndBelow} {\n    font-size: 2.2rem;\n  }\n`;\n","import styled from \"styled-components\";\nimport {CssRule} from \"../../../../themes/architecture/css-helpers/css-rule\";\n\nexport const MainNavCanvasDefaultBox = styled.div`\n  display: flex;\n  flex-direction: column;\n  width: 23rem;\n  flex: 1;\n  background: ${props => props.theme.colors.backgroundMiddleDark};\n  box-shadow: 1rem 0 3rem ${props => props.theme.colors.backgroundDark};\n  transition: transform 0.2s ease-in-out;\n  overflow: hidden;\n  padding-bottom: env(safe-area-inset-bottom, 0);\n\n  ${CssRule.For.RTL.build()} & {\n    box-shadow: -1rem 0 3rem ${props => props.theme.colors.backgroundLight};\n  }\n\n  @media ${({theme}) => theme.mediaQuery.lAndBelow} {\n    ${CssRule.For.RTL.build()} & {\n      transform: translateX(0);\n    }\n  }\n  \n  @media ${({theme}) => theme.mediaQuery.mAndBelow} {\n    width: 37.5rem;\n  }\n\n  @media ${({theme}) => theme.mediaQuery.sAndBelow} {\n    width: 100vw;\n    box-shadow: none;\n  }\n`","import React, {PropsWithChildren, useEffect, useRef, useState} from \"react\";\nimport styled from \"styled-components\";\n\nconst FadeInOutBox = styled.div<{duration?: number; opacity: number;}>`\n    transition: opacity ${({duration}) => duration}ms ease-in-out;\n    opacity: ${({opacity}) => opacity};\n`;\n\ninterface IFadeInOnMountProps {\n    className?: string;\n    delay?: number;\n    duration?: number;\n    onFadeInComplete?(): void;\n}\n\nexport const FadeInOnMount: React.FC<PropsWithChildren<IFadeInOnMountProps>> = (props) => {\n    let ref = useRef<HTMLDivElement>(null);\n    let [opacity, setOpacity] = useState(0);\n    useEffect(() => {\n        // This line avoids this problem:\n        // The ref value 'ref.current' will likely have changed by the time this effect cleanup function runs.\n        // If this ref points to a node rendered by React, copy 'ref.current' to a variable inside the effect, and use that variable in the cleanup function\n        let domElement = ref.current;\n        domElement.addEventListener(\"transitionend\", props.onFadeInComplete);\n        return () => {\n            domElement.removeEventListener(\"transitionend\", props.onFadeInComplete);\n        }\n    }, [props.onFadeInComplete]);\n    useEffect(() => {\n        let timeOut = setTimeout(() => {\n            setOpacity(1);\n        }, props.delay || 0);\n        return () => { clearTimeout(timeOut); }\n    }, [props.delay]);\n    return <FadeInOutBox ref={ref} className={props.className} duration={props.duration || 300} opacity={opacity}>{props.children}</FadeInOutBox>\n}\n\n\ninterface IFadeWrapperProps {\n    className?: string;\n    duration?: number;\n    delay?: number\n    show: boolean;\n    onFadeInComplete?(): void;\n    onFadeOutComplete?(): void;\n}\n\nexport const FadeWrapper: React.FC<PropsWithChildren<IFadeWrapperProps>> = (props) => {\n    let ref = useRef<HTMLDivElement>(null);\n    // i use a `show` state instead of the prop because on mount we want to render it invisible and\n    // then we want to change the `show` state to change the opacity so it would fade in.\n    // Otherwise the component will directly appear\n    let [show, setShow] = useState(false);\n\n    useEffect(() => {\n        // This line avoids this problem:\n        // The ref value 'ref.current' will likely have changed by the time this effect cleanup function runs.\n        // If this ref points to a node rendered by React, copy 'ref.current' to a variable inside the effect, and use that variable in the cleanup function\n        let domElement = ref.current;\n        let callback = props.show ? props.onFadeInComplete : props.onFadeOutComplete;\n        domElement.addEventListener(\"transitionend\", callback);\n        return () => {\n            domElement.removeEventListener(\"transitionend\", callback);\n        }\n    }, [props.show, props.onFadeInComplete, props.onFadeOutComplete]);\n\n    useEffect(() => {\n        let timeOut = setTimeout(() => { setShow(props.show); }, props.delay);\n        return () => {\n            clearTimeout(timeOut);\n        }\n    }, [props.show, props.delay]);\n\n    let opacity = show ? 1 : 0;\n    return <FadeInOutBox ref={ref} className={props.className} duration={props.duration || 300} opacity={opacity}>{props.children}</FadeInOutBox>\n}","import styled from \"styled-components\";\nimport {FadeWrapper} from \"../../../fade-in-div-on-mount.component\";\nimport {hexToRgba} from \"../../../../../themes/hex-to-rgba\";\n\nexport const MaskFabricDefaultBox = styled(FadeWrapper)`\n\twidth: 100%;\n    height: 100%;\n    background: linear-gradient(${({theme}) => hexToRgba(theme.colors.backgroundMiddleDark, 1)} 0%, ${({theme}) => hexToRgba(theme.colors.backgroundMiddleDark, 0.7)} 80% , ${({theme}) => hexToRgba(theme.colors.backgroundMiddleDark, 0.8)} 150%);\n`;","import styled from \"styled-components\";\nimport { IndicatorLayout } from \"../consts/indicator-layout\";\n\nexport const IndicatorDefaultBox = styled.div<{displayLayout?: IndicatorLayout}>`\n    display: flex;\n    flex-direction: ${({displayLayout}) => displayLayout === IndicatorLayout.List ? \"row\" : \"column\" };\n    align-items: center;\n\n    position: relative;\n    width: ${({displayLayout}) => displayLayout === IndicatorLayout.List ? \"auto\" : \"calc((100% - 1rem) / 2)\" };\n    padding: ${({displayLayout}) => displayLayout === IndicatorLayout.List ? \"1rem 0\" : \"0.5rem 0\" };\n    margin: ${({displayLayout}) => displayLayout === IndicatorLayout.List ? \"0 1rem\" : \"0\" };\n    background: ${({theme, displayLayout}) => displayLayout === IndicatorLayout.List ? \"none\" : theme.colors.backgroundLight};\n    border-top: ${({displayLayout, theme}) => displayLayout === IndicatorLayout.List ? (\"1px solid \" + theme.colors.boxBorder) : \"none\" };\n    border-radius: 5px;\n    cursor: pointer;\n\n    @media ${({theme}) => theme.mediaQuery.xlAndBelow} {\n        padding: 0.5rem 0;\n    }\n    @media ${({theme}) => theme.mediaQuery.lAndBelow} {\n        padding: 1rem 0;\n        background: ${({theme}) => theme.colors.background}; // componentBackground usefulLinkBackground userMenuSectionBg\n    }\n`;\n","export enum IndicatorLayout {\n    Grid,\n    List\n};\n","import styled from \"styled-components\";\nimport { Image } from \"../../../../../raw-components/image/image\";\n\nexport const LogoImageDefaultBox = styled(Image)<{isVip?: boolean;}>`\n    display: block;\n    margin: 0 auto;\n    height: 4.2rem;\n\n    @media ${({theme}) => theme.mediaQuery.lAndBelow} {\n        height: 3rem;\n    }\n`;\n","import styled from \"styled-components\";\n\nexport const UserMenuSeparatorDefaultBox = styled.div`\n    box-sizing: content-box;\n    height: 1px;\n    background-color: ${({theme}) => theme.colors.backgroundDark};\n    box-shadow: 0 0.35px 0 0 ${({theme}) => theme.colors.boxBorderContrast};\n    margin-bottom: 1px;\n`;","import styled from \"styled-components\";\n\nexport const UserMenuHeaderDefaultBox = styled.div`\n  position: relative;\n  flex: unset;\n  padding: 1.4rem 0 1.4rem 0;\n  background-color: ${({theme}) => theme.colors.background};\n`\n"],"names":["LiveCasinoArenaNavbarButtonDefaultBox","styled","Link","props","theme","components","newLiveCasino","colors","filterButtonLabel","textLight","ACTIVE","brandPrimary","JackpotWidgetAmountLabelDefaultBox","font","presets","ultra","widgetWidth","layout","JACKPOT_WIDGET_LAYOUT","handleAmountLabelFontSize","LobbyHeaderTitleDefaultBox","secondary","mediaQuery","lAndBelow","MainNavCanvasDefaultBox","backgroundMiddleDark","backgroundDark","CssRule","backgroundLight","mAndBelow","sAndBelow","FadeInOutBox","duration","opacity","FadeWrapper","ref","useRef","useState","show","setShow","useEffect","domElement","current","callback","onFadeInComplete","onFadeOutComplete","addEventListener","removeEventListener","timeOut","setTimeout","delay","clearTimeout","className","children","MaskFabricDefaultBox","hexToRgba","IndicatorDefaultBox","displayLayout","IndicatorLayout","boxBorder","xlAndBelow","background","LogoImageDefaultBox","Image","UserMenuSeparatorDefaultBox","boxBorderContrast","UserMenuHeaderDefaultBox"],"sourceRoot":""}