@nuskin/react-loyalty-elements 1.1.0-dev-sea.1 → 1.1.0-dev-sea.3

package/dist/chunk-TURO34CN.mjs.map

@@ -1 +0,0 @@
-{"version":3,"sources":["/gitlab-runner-data/builds/nextgen-development/loyalty/npm/react-loyalty-elements/dist/chunk-TURO34CN.mjs","../src/CircularProgressBar/CircularProgressBar.styled.tsx","../src/CircularProgressBar/RadialSeparator.tsx","../src/Utils/application/application.ts"],"names":["d","t","RewardProgressBarContainer","newStyled","div","LoyaltyProgressSubContainer","StyledCard","Learn3XLink","LoyaltyRewardsHeaderContainer","ProgressBarCenter","RewardProgressTotalContainer","RewardProgressTotalButtonWithIcon","IconContainer","span","SeparatorCard","SeparatorInnerCard","TooltipStyles","tooltip","sx","color","backgroundColor","fontFamily","fontWeight","fontSize","lineHeight","jsx","Separator","props","style","transform","turns","children","RadialSeparators","count","separatorNumber","Array","from","length","_","index","map","turn","RadialSeparator_default","IS_BROWSER","window","ApplicationStore","width","innerWidth","scroll","vertical","scrollY","horizontal","scrollX","direction","isMobile","isPhone","applicationContainer"],"mappings":"+pKAAA,OAAOA,KAAKC,CAAC,KAAK,sBCEX,CAAA,IAAMC,EAA6BC,EAAOC,GAAA,MAmBpCC,EAA8BF,EAAOC,GAAA,MA+CrCE,EAAaH,EAAOC,GAAA,MAiBpBG,EAAcJ,EAAOC,GAAA,MAMrBI,EAAgCL,EAAOC,GAAA,MAuBvCK,EAAoBN,EAAOC,GAAA,MAgB3BM,EAA+BP,EAAOC,GAAA,MA8BtCO,EAAoCR,EAAOC,GAAA,MAgB3CQ,EAAgBT,EAAOU,IAAA,MAoBvBC,EAAgBX,EAAOC,GAAA,MAMvBW,EAAqBZ,EAAOC,GAAA,MAM5BY,EAAgB,CACzBC,QAAS,CACLC,GAAI,CACAC,MAAO,UACPC,gBAAiB,UACjBC,WAAY,QACZC,WAAY,IACZC,SAAU,OACVC,WAAY,OACZ,sBAAuB,CACnBL,MAAO,SACX,CACJ,CACJ,CACJ,CCpNY,QAAAM,OAAAA,CAAAA,KAAA,mBAPZ,CAAA,SAASC,EAAUC,CAAAA,EACf,OACIF,EAACX,EAAA,CACGc,MAAO,CACHC,UAAW,UAAqB,OAAXF,EAAMG,KAAK,CAAA,QACpC,EAEAC,SAAAN,EAACV,EAAA,CAAA,EAAmB,EAGhC,CAEA,SAASiB,EAAiBL,CAAAA,EACtB,IAAMG,EAAQ,EAAIH,EAAMM,KAAA,CAClBC,EAAkB,GAExB,OADuBC,MAAMC,IAAA,CAAK,CAAEC,OAAQV,EAAMM,KAAM,EAAG,SAACK,EAAGC,UAAUA,EAAQT,EAAQI,IACnEM,GAAA,CAAKC,SAAAA,UAAShB,EAACC,EAAA,CAAqBI,MAAOW,CAAAA,EAAbA,IACxD,CAEA,IAAOC,EAAQV,ECtBf,IAAMW,EAAa,CAAA,OAAOC,iCAAP,EAAOA,OAAA,GAAW,SAE/BC,eAAN,iCAAMA,WAAAA,EACF,CAAA,IAAA,CAAAC,KAAA,CAAQH,EAAaC,OAAOG,UAAA,CAAa,CAEzC,CAAA,IAAA,CAAAC,MAAA,CAAS,CACLC,SAAUN,EAAaC,OAAOM,OAAA,CAAU,EACxCC,WAAYR,EAAaC,OAAOQ,OAAA,CAAU,EAC1CC,UAAW,MACf,QAEIC,IAAAA,eAAJ,aACI,OAAO,IAAA,CAAKC,OAChB,IAEIA,IAAAA,cAAJ,aACI,OAAOZ,EAAaC,OAAOG,UAAA,CAAa,IAAM,IAAA,CAAKD,KAAA,CAAQ,GAC/D,iBAGEU,EAAuB,IAAIX,SAAAA,KAAAA,CAAAA,CAAAA,KAAAA,CAAAA,CAAAA,KAAAA,CAAAA,CAAAA,KAAAA,CAAAA,CAAAA,KAAAA,CAAAA,CAAAA,KAAAA,CAAAA,CAAAA,KAAAA,CAAAA,CAAAA,KAAAA,CAAAA,CAAAA,KAAAA,CAAAA,CAAAA,KAAAA,CAAAA,CAAAA,KAAAA,CAAAA,CAAAA,KAAAA,CAAAA","sourcesContent":["import{d as t}from\"./chunk-PN67M2PP.mjs\";var h=t.div`\n    display: flex;\n    flex-direction: row;\n    justify-content: space-between;\n    align-items: center;\n    align-content: center;\n    background-color: #f5f5f5;\n    border: 1px solid #e0e0e0;\n    border-radius: 10px;\n    padding: 1.5rem;\n    margin-bottom: 20px;\n    height: 50%;\n    margin: auto;\n\n    @media (max-width: 950px) {\n        flex-direction: column;\n    }\n`,f=t.div`\n    display: flex;\n    flex-direction: row;\n    justify-content: space-between;\n    align-items: center;\n    align-content: center;\n\n    .reward-logo {\n        width: 200px;\n        margin-bottom: 12px;\n    }\n\n    .reward-progress {\n        height: 150px;\n        width: 150px;\n        flex-shrink: 0;\n\n        /* The library stylesheet is not bundled, so the SVG stays inline and its baseline gap\n           makes the wrapper taller than the ring, pushing the radial separators off centre. */\n        > div {\n            height: 100%;\n        }\n\n        .CircularProgressbar {\n            display: block;\n            width: 100%;\n            height: 100%;\n        }\n    }\n    .progress-bar {\n        background-color: #e0e0e0;\n        height: 100%;\n    }\n\n    @media (max-width: 950px) {\n        flex-direction: column;\n        width: 100%;\n\n        .info-container {\n            margin-left: 0px;\n            align-items: center;\n        }\n        .reward-progress-total-div {\n            margin-top: 10px;\n        }\n    }\n`,u=t.div`\n    display: flex;\n    flex-direction: column;\n    align-items: flex-start;\n    margin-left: 16px;\n    min-width: 0;\n\n    .info-item {\n        margin: 5px 0;\n        font-weight: 600;\n    }\n\n    @media (max-width: 950px) {\n        align-items: center;\n        margin-left: 0;\n    }\n`,w=t.div`\n    font-size: 12px;\n    font-weight: 600;\n    cursor: pointer;\n`,b=t.div`\n    display: flex;\n    flex-direction: row;\n    align-items: center;\n    justify-content: space-between;\n    gap: 1rem;\n    width: 100%;\n\n    .reward-logo {\n        width: 200px;\n        margin-bottom: 0;\n    }\n\n    @media (max-width: 950px) {\n        flex-direction: column;\n        align-items: center;\n\n        .reward-header-total {\n            width: 100%;\n            justify-content: center;\n        }\n    }\n`,y=t.div`\n    position: absolute;\n    top: 50%;\n    left: 50%;\n    transform: translate(-50%, -50%);\n    text-align: center;\n    color: black;\n\n    .center-value-progress-bar-price {\n        margin: 0;\n    }\n    .center-value-progress-bar-voucher {\n        margin: 0;\n        letter-spacing: 0.01em;\n    }\n`,v=t.div`\n    display: flex;\n    flex-direction: column;\n    justify-content: center;\n    align-items: center;\n\n    .total-button {\n        display: flex;\n        align-items: center;\n        background-color: #e5edf6;\n        border-radius: 20px;\n        font-size: 14px;\n        font-weight: 400;\n        line-height: 20px;\n    }\n    .reward-subtitle {\n        letter-spacing: 0;\n        display: flex;\n    }\n\n    @media (max-width: 950px) {\n        .reward-subtitle {\n            letter-spacing: 0;\n            display: flex;\n            text-align: center;\n        }\n        margin-top: 10px;\n    }\n`,C=t.div`\n    display: flex;\n    align-items: center;\n    background-color: #e5edf6;\n    border-radius: 20px;\n    font-size: 14px;\n    font-weight: 400;\n    line-height: 20px;\n    padding: 1rem;\n    margin-bottom: 14px;\n\n    @media (max-width: 950px) {\n        margin-top: 14px;\n    }\n`,S=t.span`\n    .info-icon {\n        margin-left: 6px !important;\n    }\n    .loyalty-icon {\n        height: 19px !important;\n        width: 19px !important;\n        margin-left: 6px !important;\n    }\n    .loyalty-warning-icon {\n        height: 19px !important;\n        width: 19px !important;\n        margin-right: 6px !important;\n    }\n    .outline-exclamation-icon {\n        height: 48px !important;\n        width: 48px !important;\n    }\n`,a=t.div`\n    position: absolute;\n    height: 100%;\n`,l=t.div`\n    background: #fff;\n    width: 6px;\n    height: 12%;\n`,k={tooltip:{sx:{color:\"#FFFFFF\",backgroundColor:\"#252525\",fontFamily:\"Inter\",fontWeight:400,fontSize:\"14px\",lineHeight:\"20px\",\"& .MuiTooltip-arrow\":{color:\"#252525\"}}}};import{jsx as o}from\"react/jsx-runtime\";function c(e){return o(a,{style:{transform:`rotate(${e.turns}turn)`},children:o(l,{})})}function x(e){let s=1/e.count,p=.5;return Array.from({length:e.count},(i,d)=>d*s+p).map(i=>o(c,{turns:i},i))}var F=x;var r=typeof window==\"object\",n=class{constructor(){this.width=r?window.innerWidth:0;this.scroll={vertical:r?window.scrollY:0,horizontal:r?window.scrollX:0,direction:\"none\"}}get isMobile(){return this.isPhone}get isPhone(){return r?window.innerWidth<768:this.width<768}},j=new n;export{h as a,f as b,u as c,w as d,b as e,y as f,v as g,C as h,S as i,k as j,F as k,j as l};\n","import styled from '@emotion/styled';\n\nexport const RewardProgressBarContainer = styled.div`\n    display: flex;\n    flex-direction: row;\n    justify-content: space-between;\n    align-items: center;\n    align-content: center;\n    background-color: #f5f5f5;\n    border: 1px solid #e0e0e0;\n    border-radius: 10px;\n    padding: 1.5rem;\n    margin-bottom: 20px;\n    height: 50%;\n    margin: auto;\n\n    @media (max-width: 950px) {\n        flex-direction: column;\n    }\n`;\n\nexport const LoyaltyProgressSubContainer = styled.div`\n    display: flex;\n    flex-direction: row;\n    justify-content: space-between;\n    align-items: center;\n    align-content: center;\n\n    .reward-logo {\n        width: 200px;\n        margin-bottom: 12px;\n    }\n\n    .reward-progress {\n        height: 150px;\n        width: 150px;\n        flex-shrink: 0;\n\n        /* The library stylesheet is not bundled, so the SVG stays inline and its baseline gap\n           makes the wrapper taller than the ring, pushing the radial separators off centre. */\n        > div {\n            height: 100%;\n        }\n\n        .CircularProgressbar {\n            display: block;\n            width: 100%;\n            height: 100%;\n        }\n    }\n    .progress-bar {\n        background-color: #e0e0e0;\n        height: 100%;\n    }\n\n    @media (max-width: 950px) {\n        flex-direction: column;\n        width: 100%;\n\n        .info-container {\n            margin-left: 0px;\n            align-items: center;\n        }\n        .reward-progress-total-div {\n            margin-top: 10px;\n        }\n    }\n`;\nexport const StyledCard = styled.div`\n    display: flex;\n    flex-direction: column;\n    align-items: flex-start;\n    margin-left: 16px;\n    min-width: 0;\n\n    .info-item {\n        margin: 5px 0;\n        font-weight: 600;\n    }\n\n    @media (max-width: 950px) {\n        align-items: center;\n        margin-left: 0;\n    }\n`;\nexport const Learn3XLink = styled.div`\n    font-size: 12px;\n    font-weight: 600;\n    cursor: pointer;\n`;\n\nexport const LoyaltyRewardsHeaderContainer = styled.div`\n    display: flex;\n    flex-direction: row;\n    align-items: center;\n    justify-content: space-between;\n    gap: 1rem;\n    width: 100%;\n\n    .reward-logo {\n        width: 200px;\n        margin-bottom: 0;\n    }\n\n    @media (max-width: 950px) {\n        flex-direction: column;\n        align-items: center;\n\n        .reward-header-total {\n            width: 100%;\n            justify-content: center;\n        }\n    }\n`;\nexport const ProgressBarCenter = styled.div`\n    position: absolute;\n    top: 50%;\n    left: 50%;\n    transform: translate(-50%, -50%);\n    text-align: center;\n    color: black;\n\n    .center-value-progress-bar-price {\n        margin: 0;\n    }\n    .center-value-progress-bar-voucher {\n        margin: 0;\n        letter-spacing: 0.01em;\n    }\n`;\nexport const RewardProgressTotalContainer = styled.div`\n    display: flex;\n    flex-direction: column;\n    justify-content: center;\n    align-items: center;\n\n    .total-button {\n        display: flex;\n        align-items: center;\n        background-color: #e5edf6;\n        border-radius: 20px;\n        font-size: 14px;\n        font-weight: 400;\n        line-height: 20px;\n    }\n    .reward-subtitle {\n        letter-spacing: 0;\n        display: flex;\n    }\n\n    @media (max-width: 950px) {\n        .reward-subtitle {\n            letter-spacing: 0;\n            display: flex;\n            text-align: center;\n        }\n        margin-top: 10px;\n    }\n`;\n\nexport const RewardProgressTotalButtonWithIcon = styled.div`\n    display: flex;\n    align-items: center;\n    background-color: #e5edf6;\n    border-radius: 20px;\n    font-size: 14px;\n    font-weight: 400;\n    line-height: 20px;\n    padding: 1rem;\n    margin-bottom: 14px;\n\n    @media (max-width: 950px) {\n        margin-top: 14px;\n    }\n`;\n\nexport const IconContainer = styled.span`\n    .info-icon {\n        margin-left: 6px !important;\n    }\n    .loyalty-icon {\n        height: 19px !important;\n        width: 19px !important;\n        margin-left: 6px !important;\n    }\n    .loyalty-warning-icon {\n        height: 19px !important;\n        width: 19px !important;\n        margin-right: 6px !important;\n    }\n    .outline-exclamation-icon {\n        height: 48px !important;\n        width: 48px !important;\n    }\n`;\n\nexport const SeparatorCard = styled.div`\n    position: absolute;\n    height: 100%;\n`;\n\n// Height must equal the ring thickness, which is strokeWidth (12) as a percentage of the 100 viewBox.\nexport const SeparatorInnerCard = styled.div`\n    background: #fff;\n    width: 6px;\n    height: 12%;\n`;\n\nexport const TooltipStyles = {\n    tooltip: {\n        sx: {\n            color: '#FFFFFF',\n            backgroundColor: '#252525',\n            fontFamily: 'Inter',\n            fontWeight: 400,\n            fontSize: '14px',\n            lineHeight: '20px',\n            '& .MuiTooltip-arrow': {\n                color: '#252525',\n            },\n        },\n    },\n};\n","import React from 'react';\nimport { SeparatorCard, SeparatorInnerCard } from './CircularProgressBar.styled';\n\nfunction Separator(props: { readonly turns: number }) {\n    return (\n        <SeparatorCard\n            style={{\n                transform: `rotate(${props.turns}turn)`,\n            }}\n        >\n            <SeparatorInnerCard />\n        </SeparatorCard>\n    );\n}\n\nfunction RadialSeparators(props: { count: number }) {\n    const turns = 1 / props.count;\n    const separatorNumber = 0.5; // to center the separator\n    const separatorTurns = Array.from({ length: props.count }, (_, index) => index * turns + separatorNumber);\n    return separatorTurns.map((turn) => <Separator key={turn} turns={turn} />);\n}\n\nexport default RadialSeparators;\n","const IS_BROWSER = typeof window === 'object';\n\nclass ApplicationStore {\n    width = IS_BROWSER ? window.innerWidth : 0;\n\n    scroll = {\n        vertical: IS_BROWSER ? window.scrollY : 0,\n        horizontal: IS_BROWSER ? window.scrollX : 0,\n        direction: 'none',\n    };\n\n    get isMobile() {\n        return this.isPhone;\n    }\n\n    get isPhone() {\n        return IS_BROWSER ? window.innerWidth < 768 : this.width < 768;\n    }\n}\n\nconst applicationContainer = new ApplicationStore();\nexport { IS_BROWSER, ApplicationStore, applicationContainer, applicationContainer as application };\nexport default applicationContainer;\n"]}