{"version":3,"file":"static/js/default-styled.ts-1db853003addb7a2885e.js","mappings":"0IAGA,MAmBMA,EAA6B,EAAGC,MAAAA,KAAyB,IAAG;;;;;;;;;cAS1C,UAAVA,EAAoB,SAAW;aACtB,UAAVA,EAAoB,SAAW;;EAyF/BC,EAAe,WAA0B;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;IAkClD,EAAGC,OAAAA,KACHA,EACI,IAAG;;UAGH;;IAEJ,EAAGC,SAAAA,KACHA,GACA,IAAG;;;;;;;;MAQD,EAAGC,SAAAA,KACLA,GACA,IAAG;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;IA1IY,EAAGC,SAAAA,MACpB,OAAQA,GACN,IAAK,WACH,OAAO,IAAG;4BACY,EAAGC,MAAAA,KACrBA,EAAMC,OAAOC,SAASC;iBACf,EAAGH,MAAAA,KAAYA,EAAMC,OAAOC,SAASE;;YAE1C,EAAGJ,MAAAA,KAAYA,EAAMC,OAAOC,SAASC;UACvCV;;8BAEoB,EAAGO,MAAAA,KACrBA,EAAMC,OAAOC,SAASG;;;QAI9B,IAAK,SACH,OAAO,IAAG;4BACY,EAAGL,MAAAA,KACrBA,EAAMC,OAAOK,OAAOH;iBACb,EAAGH,MAAAA,KAAYA,EAAMC,OAAOK,OAAOF;;UAE1CX;;;;QAKN,IAAK,SACH,OAAO,IAAG;;;UAGNA;;;;;QAON,IAAK,UACH,OAAO,IAAG;iBACC,EAAGO,MAAAA,KAAYA,EAAMC,OAAOM,QAAQH;sBAC/B,EAAGJ,MAAAA,KACfA,EAAMC,OAAOM,QAAQJ;;;;;;;;;;;;wBAYP,EAAGH,MAAAA,KACfA,EAAMC,OAAOM,QAAQF;;;QAI7B,IAAK,YACH,OAAO,IAAG;sBACM,EAAGL,MAAAA,KACfA,EAAMC,OAAOO,UAAUL;iBAChB,EAAGH,MAAAA,KAAYA,EAAMC,OAAOO,UAAUJ;;;;wBAI/B,EAAGJ,MAAAA,KACfA,EAAMC,OAAOO,UAAUH;;;QAI/B,IAAK,OACH,OAAO,IAAG;;sBAEM,EAAGL,MAAAA,KACfA,EAAMC,OAAOQ,KAAKN;;iBAEX,EAAGH,MAAAA,KAAYA,EAAMC,OAAOQ,KAAKL;;;;IA7GlC,EAAGV,MAAAA,MACjB,OAAQA,GAEN,IAAK,eACH,OAAO,IAAG;;;;QAMZ,IAAK,QACH,OAAO,IAAG;qBAbE;;8ECAlB,MAyFaC,EAAe,WAA0B;;;;;;;;;;;IAWlD,EAAGC,OAAAA,KACHA,EACI,IAAG;;UAGH;;IAEJ,EAAGc,UAAAA,KACHA,EACI,IAAG;;UAGH;;IAEJ,EAAGb,SAAAA,KACHA,GACA,IAAG;;;;;;IAMH,EAAGc,SAAAA,KACHA,GACA,IAAG;;;;;;;;IA5HY,EAAGZ,SAAAA,MACpB,OAAQA,GACN,IAAK,UACH,OAAO,IAAG;;;;;;QAOZ,IAAK,SACH,OAAO,IAAG;;;;;;;QASZ,IAAK,YACH,OAAO,IAAG;;;QAKZ,IAAK,OACH,OAAO,IAAG;;;QAKZ,IAAK,mBACH,OAAO,IAAG;;;;QAMZ,IAAK,qBACH,OAAO,IAAG;;;;QAMZ,IAAK,eACH,OAAO,IAAG;;iBAEC,EAAGC,MAAAA,KAAYA,EAAMI,MAAMG;QAGxC,IAAK,iBACH,OAAO,IAAG;;;QAKZ,IAAK,SACH,OAAO,IAAG;;;;;;;;;IAYA,EAAGb,MAAAA,MACjB,OAAQA,GACN,IAAK,QACH,OAAO,IAAG;;QAGZ,IAAK,WACH,OAAO,IAAG;;QAGZ,IAAK,QACH,OAAO,IAAG;;;;EAwDHkB,EAA8B,SAAW;;;EAKzCC,EAAuB,SAAW;;;;;;;;;;;;EAclCC,EAAuB,SAAW;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;0DC/JxC,MAAMC,EAAqB,QAAU;;;YAG/BC,GAAUA,EAAMhB,MAAMiB,MAAMC,MAAMC;;;;;cAKhCH,GAAUA,EAAMhB,MAAMiB,MAAMC,MAAMC;;;EAIpCC,EAAqB,QAAU;;;;;;;;;;;;;;;;;;;;qBAoBvB,EAAGpB,MAAAA,KAAYA,EAAMqB,KAAKC;;;;;;;;;;;;;;;;;;;;;0DC/BxC,MAAMC,EAAqB,QAAU;;;;;EAO/BC,EAAmB,WAAa;;;;;;;;;;;;;iDCN7C,MAiBaC,EAAgB,QAAwB;;;;;;;;;;;;;;;;;;;IAjBnC,EAAGC,QAAAA,MACnB,OAAQA,GACN,IAAK,UACH,OAAO,IAAG;;;;QAKZ,IAAK,QACH,OAAO,IAAG;;;;;iDCThB,MAAM1B,EAAiD,CACrDO,QAAS,WASEoB,EAAoB,QAAyB;;;;;;;;;;;;;aANjC,EAAGC,UAAAA,KACnB,GAAe,EAAZA,EAAgB,EAAIA,EAAY,IAAM,IAAMA;wBAGrC,EAAGC,OAAAA,KAA4B7B,EAAM6B;;;kDCDxD,MAwBaC,EAAiB,QAA+B;;;WAGlD,EAAGC,MAAAA,KAAYA;YACd,EAAGC,OAAAA,KAAaA;mBACT,EAAGC,aAAAA,KAAmBA;gBACzB,EAAGC,UAAAA,KAAgBA;;;;IA9Bd,IAAM,IAAG;;;;;;;;;;;;;;;;;;;;;;;qECRvB,MAAMC,EAAkB,QAAU;;;;EAqD5BC,EAAqB,QAAmC;aACxD,EAAGC,QAAAA,KAAeA,EAAU,QAAU;;;aAGtC,EAAGrC,MAAAA,KAAYA,EAAMsC,OAAOC;;;;;;;;;;;;IAbhB,EAAGC,WAAAA,KACX,SAAfA,EACI,IAAG;;QAGH,IAAG;;;IAlC6B,EACpCC,uBAAAA,KAE2B,SAA3BA,EACI,IAAG;;;;QAKwB,SAA3BA,EACA,IAAG;;;;QAKH,IAAG;;;;;;;;;;;;;EAwEIC,GAJwB,QAAU;;WAEpC,EAAG1C,MAAAA,KAAYA,EAAMC,OAAOM,QAAQJ;EAEb,QAAmC;;;;;;;;IAzB3C,EAAGwC,SAAAA,EAAUC,WAAAA,KACrCD,EACI,IAAG;;;;;;mBAMU,EAAG3C,MAAAA,KAAYA,EAAMC,OAAOM,QAAQJ;;QAGjDyC,EACA,IAAG;;;;;;QAOH,IAAG;;;;;;;;;;;;;;;;GAgC0B,QAAU;;;;;;;;2HChItC,MAAMC,EAA6B,QAAU;;;;EAMvCC,EAAkB,QAAU;;EAI5BC,EAAkB,QAAU;;EAI5BC,EAAe,QAAU;;;;;;;;;EAWzBC,EAAoB,QAAU;;;;;;;;;;;EAa9BC,EAAa,QAAU;;;EAKvBC,EAAa,QAAU;;;;;;;;;EAWvBC,EAAsB,QAAU;;;EAKhCC,EAAsB,QAAU;;;;;;;oCC3DtC,MAAMC,E,QAAiB,MAAU;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;mECUxC,MA6BMC,EAAsB,EAAG7B,QAAAA,MACzBA,MAAAA,OAAO,EAAPA,EAASR,OACJ,IAAG;0BACY,EAAGlB,MAAAA,KACrBA,EAAMiB,MAAMC,MAAMf;0BACA,EAAGH,MAAAA,KAAYA,EAAMiB,MAAMC,MAAMC;;;;OAOrDO,MAAAA,OAAO,EAAPA,EAAS8B,SACJ,IAAG;0BACY,EAAGxD,MAAAA,KACrBA,EAAMiB,MAAMuC,QAAQrD;0BACF,EAAGH,MAAAA,KAAYA,EAAMiB,MAAMuC,QAAQrC;;;;MAOpD,IAAG;wBACY,EAAGnB,MAAAA,KAAYA,EAAMiB,MAAMwC,QAAQtD;wBACnC,EAAGH,MAAAA,KAAYA,EAAMiB,MAAMwC,QAAQtC;IA+B9CuC,EAAc,QAAkD;;;;YAIjE,EAAGC,WAAAA,KAAkBA,EAAa,kBAAoB;;;;;;IAhCnC,EAAGnB,WAAAA,KACjB,WAAfA,EACI,IAAG;;;;;QAMH,IAAG;;;;;;;;;;;;;mBAkCU,EAAGxC,MAAAA,KAAYA,EAAMqB,KAAKC;;;;;;aAMhC,EAAGtB,MAAAA,KAAYA,EAAMiB,MAAMwC,QAAQrD;;;;;;MA7B/B,EAAGR,OAAAA,KAClBA,EACI,IAAG;;QAGH,IAAG;;;;oBAgCW,EAAGI,MAAAA,KAAYA,EAAMiB,MAAMpB,SAAS+D;eACzC,EAAG5D,MAAAA,KAAYA,EAAMiB,MAAMpB,SAASO;;;;eAIpC,EAAGJ,MAAAA,KAAYA,EAAMiB,MAAMwC,QAAQI;;;;;MAK5CN;;EAGOO,EAAY,QAA0B;;;;;;;IA9H9B,EAAGC,MAAAA,KACR,SAAVA,EACK,IAAG;;;;;;;;MASS,UAAVA,EACF,IAAG;;;;;;;;;;;;;;WADL;EA4HIC,EAAqB,QAA4B;;;;;;IAM1D,EAAGxB,WAAAA,KACY,QAAfA,EACI,IAAG;;UAGH;IACJe;0DC5JJ,MAuCaU,EAAe,QAA4B;;;;YAI5C,EAAGN,WAAAA,KAAkBA,EAAa,kBAAoB;;;iBAGjD,EAAG3D,MAAAA,KAAYA,EAAMqB,KAAKC;IA9CZ,EAAGkB,WAAAA,KACjB,WAAfA,EACI,IAAG;;;;;QAMH,IAAG;;;;;;;;;;;;;;;;;;mBAmDU,EAAGxC,MAAAA,KAAYA,EAAMqB,KAAKC;;MA3ChB,EAAGI,QAAAA,MAC1BA,MAAAA,OAAO,EAAPA,EAASR,OACJ,IAAG;0BACY,EAAGlB,MAAAA,KACrBA,EAAMiB,MAAMC,MAAMf;0BACA,EAAGH,MAAAA,KAAYA,EAAMiB,MAAMC,MAAMC;OAIrDO,MAAAA,OAAO,EAAPA,EAAS8B,SACJ,IAAG;0BACY,EAAGxD,MAAAA,KACrBA,EAAMiB,MAAMuC,QAAQrD;0BACF,EAAGH,MAAAA,KAAYA,EAAMiB,MAAMuC,QAAQrC;MAIpD,IAAG;wBACY,EAAGnB,MAAAA,KAAYA,EAAMiB,MAAMwC,QAAQtD;wBACnC,EAAGH,MAAAA,KAAYA,EAAMiB,MAAMwC,QAAQtC;;;;oBA6BvC,EAAGnB,MAAAA,KAAYA,EAAMiB,MAAMpB,SAAS+D;eACzC,EAAG5D,MAAAA,KAAYA,EAAMiB,MAAMpB,SAASO;;;;;;;;;;;;;;;EAiBtC8D,EAAgB,QAAU;;;;;;;;;;;;;;;;qMC/EhC,MAAMC,EAA0C,CACrDC,SAAU,CAACC,GAASC,YAAAA,MAClB,MAAMC,EAAcD,EAAoBC,WACxC,OAAO,OAAP,wBACKF,GAAK,CACRG,QAAS,IACTC,UAAWF,EAAa,QAAU,QAClCG,UAAW,SACXC,UAAW,UAGfd,YAAa,CAACQ,GAASC,YAAAA,MACrB,MAAMM,EAAkBN,EACrBM,eACH,OAAO,OAAP,wBACKP,GAAK,CACRjE,OAAOwE,MAAAA,OAAc,EAAdA,EAAgBC,OAAQ,GAAK,qBAGxCC,OAAQ,KAAM,IAGdC,KAAOV,GAAW,OAAD,wBACZA,GAAK,CACRW,UAAW,OACX9C,UAAW,EACX+C,SAAU,WACVlD,MAAO,OACPO,OAAQ,IACR4C,WAAY,EACZC,cAAe,EACfC,aAAc,MACdC,IAAK,OACLzB,WAAY,OACZ0B,OAAQ,oBACRC,WAAY,kBAEdC,UAAYnB,GAAW,OAAD,wBACjBA,GAAK,CACRY,SAAU,WACVlD,MAAO,OACP0D,SAAU,SACVC,cAAe,YAEjBC,QAAS,CAACtB,GAASzB,WAAAA,KAAkB,OAAD,wBAC/ByB,GAAK,CAERuB,UAAW,UACXN,OAAQ,gCACRO,OAAQjD,EAAa,UAAY,UACjCzC,gBAAiByC,EAAa,yBAA2B,QACzDxC,MAAOwC,EAAa,qBAAuB,kBAC3C2C,WAAY,kBAEdtE,MAAO,CAACoD,GAASC,YAAAA,M,MAKf,OAFuE,QAA7C,EAAAA,EAAYwB,aAAiC,eACnEC,SAEK,OAAP,wBACK1B,GAAK,CACRY,SAAU,WACVe,KAAM,SAGH,OAAP,UACK3B,KAKI4B,EAAwC,CACnD7B,SAAWC,GAAW,OAAD,wBAChBA,GAAK,CACRG,QAAS,IACTC,UAAW,QACXC,UAAW,SACXC,UAAW,SAEbG,OAAQ,KAAM,IAGdC,KAAOV,GAAW,OAAD,wBACZA,GAAK,CACRW,UAAW,OACX9C,UAAW,EACX+C,SAAU,WACVlD,MAAO,OACPO,OAAQ,IACR4C,WAAY,EACZC,cAAe,EACfC,aAAc,MACdC,IAAK,OACLzB,WAAY,UACZ0B,OAAQ,oBACRC,WAAY,kBAEdC,UAAYnB,GAAW,OAAD,wBACjBA,GAAK,CACRY,SAAU,WACVlD,MAAO,OACP0D,SAAU,SACVC,cAAe,YAEjBC,QAAS,CAACtB,GAASzB,WAAAA,KAAkB,OAAD,wBAC/ByB,GAAK,CAERuB,UAAW,UACXN,OAAQ,gCACRO,OAAQjD,EAAa,UAAY,UACjCzC,gBAAiB,UACjBC,MAAOwC,EAAa,qBAAuB,kBAC3C2C,WAAY,kBAEdtE,MAAO,CAACoD,GAASC,YAAAA,M,MAKf,OAFuE,QAA7C,EAAAA,EAAYwB,aAAiC,eACnEC,SAEK,OAAP,wBACK1B,GAAK,CACRY,SAAU,WACVe,KAAM,SAGH,OAAP,UACK3B,KAKI6B,EAAgC,QAAU;;;;;;;EAS1CC,EAAqB,QAAmC;IACjE,EAAGC,UAAAA,KACHA,EACI,IAAG;;;;UAKH;;;;;;;;;;;;;EAuBKC,EAAsB,QAAoC;;;;;aAK1D,EAAGC,WAAAA,KAAkBA,EAAa,cAAgB;;;;;;kBAM7C,EAAGC,UAAAA,KAAiBA,EAAY,UAAY;sBACxC,EAAGA,UAAAA,KACrBA,EAAY,2BAA6B;;;;;;;;;;;;;MAavC,EAAGC,eAAAA,KACHA,EACI,IAAG;;YAGH;;;IAGN,EAAGC,WAAAA,KACHA,EACI,IAAG;;;;;;;UAQH;EAGKC,EAA2B,QAAU;;;;;;;;;;;;;EAerCC,EAA2B,QAAU;;;;;EAOrCC,EAA6B,QAAU;;;;;;;;;;EAWvCC,EAAmB,QAG9B;;WAES,EAAG9G,SAAAA,KAA6B,UAAbA,EAAuB,UAAY;;;;aAIpD,EAAG+G,gBAAAA,KAAuBA,EAAkB,UAAY;cACvD,EAAGA,gBAAAA,KACXA,EAAkB,UAAY;;;EAKvBC,EAA6B,QAAU;;EAIvCC,EAA2B,QAAU;;;EAKrCC,EAAuB,QAAU;;;;;;;;EAUjCC,EAA2B,WAAa;;;;;;;;;;;;;;;;;;;;;EAuBxCC,EAAuB,QAAU;;;;;;;;;;;;;;EAgBjCC,EAAsB,UAAsC;;;SAG/DpG,GAAWA,EAAMqG,WAAa,MAAQ;;;eAGhCrG,GAAWA,EAAMqG,WAAa,SAAW;eACzCrG,GAAWA,EAAMqG,WAAa,OAAS;;EAI1CC,EAA6B,QAAmC;;;;;;MAMvE,EAAGC,WAAAA,KAAkBA,EAAa,UAAY;;EAIlB,QAA0C;aAC/D,EAAGC,kBAAAA,KAAyBA,EAAoB,OAAS;;;;;;kDChW/D,MAAMC,EAAc,UAAwB;;;;IAI/C,EAAGC,UAAAA,KACHA,EACI,IAAG;;UAGH;+PCFD,MAAMvD,EAA6B,CACxCC,SAAWC,GAAW,OAAD,wBAChBA,GAAK,CACRG,QAAS,EACTE,UAAW,SACXC,UAAW,OAEXF,UAAW,UAEbZ,YAAa,CAACQ,OACL,OAAP,wBACKA,GAAK,CACRjE,MAAO,oBAGX0E,OAAQ,KAAM,IAGd6C,WAAY,KAAM,CAChBC,SAAU,QACVxH,MAAO,OACPqF,SAAU,WAEZoC,gBAAiB,KAAM,CAErBtC,WAAY,kBAEdR,KAAM,CAACV,GAASC,YAAAA,MACd,MAAMwD,EAAoBxD,EAAoBwD,mBAC9C,OAAO,OAAP,wBACKzD,GAAK,CACRW,UAAW,OACX9C,UAAW,EACX+C,SAAU,WACVlD,MAAO,OACPO,OAAQ,IACR4C,WAAY,EACZC,cAAe,EACfC,aAAc,MACdC,IAAK,OACLjF,MAAO0H,EAAmB,OAAS,QACnClE,WAAY,OACZ0B,OAAQ,oBACRC,WAAY,mBAGhBC,UAAYnB,GAAW,OAAD,wBACjBA,GAAK,CACRY,SAAU,WACVlD,MAAO,OACP0D,SAAU,SACVC,cAAe,YAEjBC,QAAS,CAACtB,GAASzB,WAAAA,KAAkB,OAAD,wBAC/ByB,GAAK,CAERuB,UAAW,UACXN,OAAQ,gCACRO,OAAQjD,EAAa,UAAY,UACjCzC,gBAAiByC,EAAa,yBAA2B,QACzDxC,MAAOwC,EAAa,qBAAuB,kBAC3C2C,WAAY,mBAyBHwC,EAAkC,QAI7C;;;;;;;;;IAzBmB,EAAGC,UAAAA,KAClBA,EACK,IAAG;0BACY,EAAGhI,MAAAA,KACrBA,EAAMiI,MAAMD,GAAW7H;;;4BAGH,EAAGH,MAAAA,KACrBA,EAAMiI,MAAMD,GAAW3H;;;;;mBAKd,EAAGL,MAAAA,KAAYA,EAAMiI,MAAMD,GAAWE;;MAI9C,IAAG;EAoBDC,EAA8B,QAEzC;;;;;;;;;;;;MAYI,EAAGtD,MAAAA,KACc,kBAAVA,EACH,IAAG;;YAGH;;EAKGuD,EAAwC,QAAU;;EAIlDC,EAAa,QAAU;;EAIvBC,GAAa,QAAO,MAAQ;;EAI5BC,EAAuC,QAGlD;;;;;;WAMS,EAAGxG,MAAAA,KAAY,GAAGA;YACjB,EAAGC,OAAAA,KAAa,GAAGA;EAElBwG,GAAgB,QAAO,MAAY;;;;;;;;EAUnCC,GAAkB,QAAO,MAAQ;;;;EAKjCC,EAAe,QAAU;;;;EAMzBC,EAAyB,QAAU;;;;;;EAQnCC,EAAgB,WAE3B;;;;;sBAKoB,EAAGjG,SAAAA,KAAgBA,EAAW,OAAS;;;;;sBAKvC,EAAGA,SAAAA,KAAgBA,EAAW,OAAS;WAClD,EAAGA,SAAAA,KAAgBA,EAAW,QAAU;;;;;;;;;;;EAatCkG,GAAW,QAAO,MAAO;;;;;;EAQzBC,EAA8B,QAA4C;;;;;;;;;;;;;;;;;;;IAmBnF,EAAGvC,UAAAA,KACHA,EACI,IAAG;;UAGH;EAGKwC,EAAqC,QAAU;;;EAK/CC,EAAiC,QAAU;;;EAI3CC,EAAuC,QAAU,GACjDC,EAAoC,QAAU;;;;;;;EAS9CC,EAAgC,QAAU,GAE1CC,EAAkC,QAAU;;;0DC5QlD,MAAMC,EAAkB,QAAU;;;;;;;EA+C5BC,EAAiB,aAAoC;;;;;;IAlCnC,EAC7B5H,QAAAA,MAIIA,MAAAA,OAAO,EAAPA,EAAS8B,SACJ,IAAG;0BACY,EAAGxD,MAAAA,KAAYA,EAAMiB,MAAMuC,QAAQrD;0BACnC,EAAGH,MAAAA,KAAYA,EAAMiB,MAAMuC,QAAQrC;;;;OAOvDO,MAAAA,OAAO,EAAPA,EAASR,OACJ,IAAG;0BACY,EAAGlB,MAAAA,KAAYA,EAAMiB,MAAMC,MAAMf;0BACjC,EAAGH,MAAAA,KAAYA,EAAMiB,MAAMC,MAAMC;;;;MAOlD,IAAG;wBACY,EAAGnB,MAAAA,KAAYA,EAAMiB,MAAMwC,QAAQtD;wBACnC,EAAGH,MAAAA,KAAYA,EAAMiB,MAAMwC,QAAQtC;;oBAEvC,EAAGnB,MAAAA,KAAYA,EAAMiB,MAAMpB,SAAS+D;eACzC,EAAG5D,MAAAA,KAAYA,EAAMiB,MAAMpB,SAASO;;kDC3C5C,MAAMmJ,EAA+B,QAE3C;;;;;IAKG,EAAGC,gBAAAA,KACHA,EACI,IAAG;;;UAIH,IAAG;;;;;;;uFCdJ,MAAMC,EAAe,QAAU;;;;;;;;EAUzBC,EAAe,QAAU;;;;;;;;;EAWzBC,EAAa,QAAU;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EAmCvBC,EAAc,QAAU;;;;;;;;;;;;;;;;;;EAoBxBC,EAAW,MAAQ;;;;;;;8IC3EzB,MAAMC,EAAc,QAAqC;;oBAE5C,EAAGC,aAAAA,KAAoBA,EAAe,OAAS;;sBAE7C,EAAGA,aAAAA,KAAoBA,EAAe,OAAS;;EAIxDC,EAAe,QAAU;;;;;;;;;KASlC,OAAgB,IAAG;;;EAMVC,EAAY,QAAU;;;;;;EAatBC,EAAY,QAA0B;;EAItCC,EAAiB,QAAsC;;EAQvDC,EAAc,QAAU;;;;;;;;;aASxB,EAAGpK,MAAAA,KAAYA,EAAMsC,OAAO+H;EAE5BC,EAAuB,QAA4B;;;;;;;IAO5D,EAAGC,kBAAAA,KACHA,EACI,IAAG;;UAGH;EAEKC,EAAqB,QAAU;;;;EAK/BC,EAAkB,QAAU,GAC5BC,EAAmB,QAAU;;yGC5E1C,MAcaC,EAAmB,QAAiC;;;;;;IAd3C,EAAG1F,SAAAA,KACV,aAAbA,EACI,IAAG;;;;QAKH,IAAG;;;;;;;;;;;;EAqBI2F,EAAoB,QAAU;;;;;;EAQ9BC,EAAmB,QAAU;;EAG7BC,EAAwB,WAAa;;;;;;;;;;;;;;;;aAgBrC,EAAG9K,MAAAA,KAAYA,EAAMI,MAAMK;;EAI3BsK,EAAiB,QAAU;;;;EAM3BC,EAAoB,QAAU;;;;;;EAQ9BC,EAAyB,QAAU;;;;;;;;;6HC5EzC,MAAMC,EAAyB,QAAU;;;;;;;;;;;;;EAcnCC,EAAkB,QAAU;;;;;;;;EAS5BC,EAAmB,QAAU;;;;;KAKtC,OAAgB,IAAG;;;EAIVC,EAAY,QAAU;;;;;;;EAQtBC,EAAU,QAAU,GACpBC,EAAW,QAAU;;;;;;;EAQrBC,EAAwB,QAAU;;sBAEzB,EAAGxL,MAAAA,KAAYA,EAAMC,OAAOM,QAAQJ;;EAI7CsL,EAAY,QAAU;;;;;0DCxD5B,MAAMC,EAAmB,QAAU;;;;;;;;;;;;;;;;EAkB7BC,EAAoB,QAAU;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;oECZ3C,MAmBaC,EAAe,QAAU,GACzBC,EAAgB,QAA6B;;;;;;IAXlC,EAAGC,QAAAA,KACb,SAAZA,EACI,IAAG;;;QAIH,IAAG;;;IAfgB,EAAGC,iBAAAA,KAC1BA,EACI,IAAG;WACC,OAAgB,IAAG;;;QAIvB;;;aAuBO,EAAGD,QAAAA,KAA2B,SAAZA,EAAqB,OAAS;;;;;;;;;;;;;;;iBAe5C,EAAGA,QAAAA,EAAS9L,MAAAA,KACP,SAAZ8L,EACI,OACA9L,EAAMC,OAAOM,QAAQF;;;;;;;;;;;QAW3B,EAAGyL,QAAAA,KACS,SAAZA,EACI,IAAG;;cAGH;;;;;;;;;;;;4GCpEL,MAAM9I,EAAe,QAAU;;;;;EAazBgJ,GAAqB,QAAO,IAAO;;;;;EAOnCC,EAAe,QAAU;;;EAKzBC,GAAmB,QAAO,IAErC;;cAEY,EAAGC,SAAAA,KACXA,EAAW,gCAAkC;;;;;EAOtCnI,EAAqB,QAAU;;0DCvCrC,MAAMoI,EAAuB,QAAU;;;;;;;;;;;;;EAejCC,EAAgB,QAAU;;;;kGCdhC,MAAMC,EAAU,QAAU;;EAIpBC,GAAmB,QAAO,IAAiB;;;;;EAO3CC,EAAuB,QAAU;;;;;;EAQjCC,EAAiB,QAAoC;;2BAEvC,EAAGC,WAAAA,KAC1BA,EAAa,UAAY;;;EAKhBjD,EAAe,QAAU;;;;;;;;;;;;gGC3B/B,MAAMkD,EAAuD,CAClEtI,MAAO,CACLuI,KAAM,CACJC,WAAY,OACZpH,SAAU,OACVrF,MAAO,UAKA0M,EAAoB,QAAmC;;;;;IAKhE,EAAG1G,UAAAA,KACHA,EACI,IAAG;;;;;;;;;;;;UAaH;EAGK2G,EAAgB,QAAU;;;;;;;;EAU1BC,EAAwB,QAAU;;;;;;;;;;;;;;;;;;EAmBlCC,EAAoB,QAAkC;;;;;;;MAO7D,EAAGC,SAAAA,KACHA,EACI,IAAG;;YAGH;;;;;EAMGC,EAAsB,QAAU;;;;;;;;;;qECjFtC,MAAMC,EAAmB,QAAU;;;;;;EAQ7BC,EAAgC,QAAU;;EAI1CC,EAAoB,QAAU;;;;;;;;;;8ECZpC,MAAMC,EAAmB,QAAU;;;EAuB7BC,GAnBmB,QAAoC;IAChE,EAAGC,YAAAA,KACHA,EACI,IAAG;;;;;;;;;;;;;UAcH;EAEuB,QAAU;;GAI5BC,EAAuB,QAAU;;;;EAMjCC,EAAkB,QAAU;;;;;;;;;;;4DCjCT,QAAU;;;EAAnC,MAIMH,EAAkB,QAAU;;;;;;;;EAqB5BI,GAZkB,QAAU;;;;;;;;;;;EAYF,QAAU;;;;;GAMrB,QAAU;;;;;qEC/BN,QAAU;;;EAAnC,MAIMJ,EAAkB,QAAU;;;;;EAM5BG,EAAkB,QAAU;;;;;;;;;;;EAY5BtB,EAAgB,QAAU;;qECtBhC,MAAMwB,EAAyB,QAAU;;;;;EAMnCC,EAAmC,QAAU;;;;;;;;;;;;EAa7CC,EAA4B,QAAU;;;;;oIClB5C,MAAMC,EAAc,QAAU;;;;;;;aAOxB,EAAGhO,MAAAA,KAAYA,EAAMI,MAAMG;;EAG3B0N,EAAyB,QAAU;;sBAE1B,EAAGjO,MAAAA,KAAYA,EAAMI,MAAMG;EAEpCqN,EAA0B,QAAU;;EAGpCM,EAAuB,QAAU;;;;;EAMjCC,EAAiB,QAAU;;;;;;;;;;;EAa3BC,EAAqB,MAAQ;;WAE/B,EAAGpO,MAAAA,KAAYA,EAAMI,MAAMG;;;;aAIzB,EAAGP,MAAAA,KAAYA,EAAMI,MAAMG;;;EAK3B8N,EAAgB,QAAU;;;;;;;;;;;EAqB1BC,GATgB,QAAU;;;;;;YAM3B,EAAGtO,MAAAA,KAAYA,EAAMI,MAAMmO;;EAGT,MAAQ;;GAGzBC,EAAyB,QAAU;;;;;;;;;;EAWnCC,EAAuB,QAAqC;;;0BAG/C,EAAGzO,MAAAA,KAAYA,EAAMI,MAAMG;;IAEjD,EAAGmO,MAAAA,KACHA,EACI,IAAG;;;;UAKH,IAAG;;;;;;;0KC9FJ,MAAMC,EAAyB,QAAU;;EAOnCC,EAAa,QAA2B;;;;;IAKjD,EAAGC,WAAAA,KACHA,EACI,IAAG;;UAGH,IAAG;;;EAKEC,EAAqB,QAAU;;;EAK/BC,EAAoB,QAAU;;;;;;;;;;;;;;EAgB9BC,EAAuB,QAAU;;;;;;;;;;EAYjCC,EAAkB,QAAU;;;;;;EAQ5BC,EAAoB,QAAU;;;;;;;;;;;;;;;;EAiB9BC,GAAW,QAAO,MAAO;;;;;EAMzBC,EAAmB,SAAW;;;EAI9BC,EAAwB,SAAW;;;EAKnCC,EAAoB,SAAW;;;;EAK/BC,EAAe,SAAgC;;aAE/C,EAAGC,MAAAA,KAAaA,EAAQ,UAAY;;;;;eAKlC,EAAGA,MAAAA,KAAaA,EAAQ,OAAS;iBAC/B,EAAGA,MAAAA,KAChBA,EACI,OACA;;;;;;;EASKC,EAAkB,QAAU;;;;;;;;;;;;;;;;;;EAoBI,QAAU;;;;;;;;;;;EAab,QAAU;;EAIT,QAAU;;;kDC9JrD,MAAMnD,EAAU,QAAU;;EAIpBoD,EAAa,QAAU;;;EAKvBC,EAAW,QAAU;;;;;;;;;EAqCdC,EAAqB,CAChCtD,QAAAA,EACAoD,WAAAA,EACAG,wBA7B8B,QAAU;;EA8BxCF,SAAAA,EACAG,kBA3BwB,QAAU;;;;;;;EA4BlCC,aAnBmB,QAAU;;;;EAoB7BC,gBAdsB,QAAU;;;;;gJC7B3B,MAAMC,EAAa,QAA0B;;;MAG7CjP,IAAWA,EAAMkP,oBAAsB;;EAIjCC,EAAY,QAA0B;;;;;;EAStCC,EAAc,QAA0B;IAChDpP,GACDA,EAAMkP,mBAAqB,kBAAoB;;;;EAMtCG,EAAiB,QAAU;;;EAK3BC,GAAa,QAAO,MAA0B;;;;;gBAK1CtP,GACK,YAAlBA,EAAMuP,QAAwB,UAAY;EAIjCC,EAAsB,QAAmC;eACtDxP,GAAWA,EAAMyP,UAAY,OAAS;EAGzCC,EAA2B,QAAU;;;;EAMrCC,EAAwB,QAAU;;;;;;;;EAUlCC,EAAe,SAAW;;;EAI1BC,EAAwB,SAAW;;;;;;;gGCzEzC,MAAMC,EAAsB,QAAU;;;;;;;;;;;;;;EAgBhCC,EAAqB,QAAU;;;;;;;;;;;;;;;;;;;EAoB/BC,EAAmB,QAAU;;;;;;;;;;;;EAc7BC,EAAwB,QAAU;;;;;;;;;;EAYlCC,EAAmB,QAAU;;;;;;;;;;;;;;;;EAkB7BC,EAAqB,QAAU;;;;;;;;;;;;;;;;qEChFrC,MAAMC,EAAoB,QAAU;;;EAK9BC,EAAkB,QAAU;;;;;EAO5BC,EAAuB,UAAsC;;;;;;;IAOtE,EAAGC,WAAAA,KACHA,EACI,IAAG;;;;;;;;;UAUH;iHC/BR,MAAMjF,EAAU,QAAU;;;;;EAOpBkF,EAAS,WAAa;;;;;;;;EAUtBC,EAAO,QAAU;;;;;;;EASjBC,EAAQ,QAAU;;;;EAMlBC,EAAW,QAAU;;;;EAMrBC,EAAO,QAAU;;;;EAMjBC,EAAa,QAAU;;;;;;;EASvBC,EAAa,QAEjB;;;gBAGc,EAAGC,SAAAA,KAAgBA,EAAW,SAAW;EAGnDC,EAAqB,QAAU;;;;;;;;;;;;EAc/BC,EAAmB,MAAQ;;;;;EAO3BC,EAAe,QAAU;;;;EAMzBC,EAAU,QAAU;;;;;;;;;;;;EA0BbC,EAA2B,CACtC9F,QAAAA,EACAkF,OAAAA,EACAC,KAAAA,EACAI,WAAAA,EACAD,KAAAA,EACAF,MAAAA,EACAC,SAAAA,EACAG,WAAAA,EACAO,WArBiB,QAAU;;;;;;;;;;EAsB3BH,aAAAA,EACAC,QAAAA,EACAH,mBAAAA,EACAC,iBAAAA,GAGWK,EAAc,QAAU;;;;;;;;;;;;EAcxBC,EAAU,QAAU;;EAIpB9F,EAAiB,QAE5B;;;gBAGc,EAAGsF,SAAAA,KAAgBA,EAAW,SAAW;EAG5CS,EAAsB,QAAU;;;;EAMhCC,EAAsB,QAAU;;;;;;EAQhCC,EAAoB,QAAU;;;;;;EAQ9BjJ,EAAe,QAAoC;aACnD,EAAGkJ,WAAAA,KAAkBA,EAAa,QAAU;;;;;;;;;;;;oCCnLlD,MAAMC,E,QAAwB,MAAU;;;;;;;;;;;;;;;mECCxC,MAAMC,EAAqB,QAAU;IACxC;;;;;;;EASSC,EAA6B,QAAU;;;;;;6ECXpD,MAAMC,EAAiB,OAEVC,EAA6B,QAAU;;;;;;;;;EAWvCC,EAAmC,QAAU;;;;WAI/CF;;;;;EAOEG,EAA4B,IAAM,IAAG;;;;;;;;;;;;;;;;;;;;;;;;;;;EA6BrCC,EAA0B,QAAkC;;;MAGnE,EAAGC,SAAAA,EAAUpT,MAAAA,KACboT,EAAWpT,EAAMiB,MAAMC,MAAMC,YAAc;;;;;;;yBAOxB4R;;;IAGrBG;;;;;4DCnEG,MAAMG,EAAuB,QAAU;;;;;EAOjCC,EAAY,QAAU;;;EAKE,QAAU;;;;;;0DCFxC,MAAMC,EAAiB,QAA+B;;SAEpD,EAAGtO,SAAAA,KAAeA,EAASuO;UAC1B,EAAGvO,SAAAA,KAAeA,EAASwO;gBACrB,EAAGC,UAAAA,KAAiBA,EAAY,UAAY;;;;;;;;;EAW/CC,EAAqB,QAAmC;;;;;sBAK/C,EAAGC,cAAAA,KACrBA,EAAgB,UAAY;WACrB,EAAGA,cAAAA,KAAqBA,EAAgB,OAAS;0DChCrD,MAAMC,EAAU,QAAU;;;;;;;;;;;;;;;;;;;;;;;;;;;;EA8BpBxH,EAAgB,QAAU;;;;;;;;;;8EC9BhC,MAAMC,EAAU,QAAU;;;;;;;;;;;;;;;;;;;;;;;;EA0BpBwH,EAAW,MAAQ;;;;;;;EASnBC,EAAW,OAAS;;;;EAMpBC,EAAc,QAAU;;;;;;;;;;;;;;;;;;;;;uFCzC9B,MAAMlR,EAAkB,QAAU;;;;;;;EAQ5BG,EAAoB,QAAU;;;;;;;;;;EAY9BgR,EAAmB,QAAU;;;;;;EAQ7BC,EAAe,QAAU;;;;;;;;;;;;;;;;;;EAoBzBC,EAAmB,MAAQ;;;;;qEChDjC,MAAMC,EAAuB,QAAU;;;;;;;;;;EAYjCD,EAAmB,MAAQ;;;;;EAO3BE,EAAgB,MAAQ;;;;2HClB9B,MAAMC,EAAoB,QAAoC;;;;;aAKxD,EAAGC,UAAAA,KAAiBA,EAAY,cAAgB;;;;eAI9C,EAAGA,UAAAA,KAAiBA,EAAY,cAAgB;cACjD,EAAGA,UAAAA,KAAiBA,EAAY,OAAS;kBACrC,EAAGA,UAAAA,KAAiBA,EAAY,OAAS;;;;;;eAM5C,EAAGA,UAAAA,KAAiBA,EAAY,cAAgB;;;;;;;;;;;;;;;;;EAmBlDhC,EAAU,QAAU;;;;;;;EASpBiC,EAAc,MAAQ;;;;;;;;;EAWtBC,EAAY,QAAU;;;;;;;;;;;;;;;;;;EAoBtBC,EAAiB,QAAoC;IAC9D,EAAGH,UAAAA,KACHA,EACI,IAAG;;UAGH;EAGKI,EAAyB,QAAU;;;;EAMnCC,EAAkB,QAAU;;;;;;;;;;;;;;EAgB5B3I,EAAe,QAAoC;;;;;gBAKhD,EAAGsI,UAAAA,KAAiBA,EAAY,IAAM;;;;;;;;EAUzCM,EAAY,MAAQ;;;;;;;;;;;oGCzHjC,MAAMC,EAAqB,QAEdC,EAAmB,QAAU;uBACnBD;;;;;;;;wBAQC;;;;;;;;;;;EAYXpJ,EAAmB,QAAU;;;;KAItC,OAAc,IAAG;;;;;;;;;;;EAYRsJ,EAAiB,QAAU;;;;;KAKpC,OAAgB,IAAG;;;;;KAKnB,OAAc,IAAG;iBACHhU,GAAUA,EAAMhB,MAAMwF,UAAUyP;;;;EAKrCC,EAAY,OAAS;;uBAEXJ","sources":["webpack://leadsbridge/./src/components/Basic/Button/styled.ts","webpack://leadsbridge/./src/components/Basic/ButtonNbe/styled.ts","webpack://leadsbridge/./src/components/Basic/EditableText/styled.ts","webpack://leadsbridge/./src/components/Basic/FiltersIcons/styled.ts","webpack://leadsbridge/./src/components/Basic/Message/styled.ts","webpack://leadsbridge/./src/components/Basic/ProgressBar/styled.ts","webpack://leadsbridge/./src/components/Basic/Skeleton/styled.ts","webpack://leadsbridge/./src/components/Dropdown/styled.ts","webpack://leadsbridge/./src/components/FastAppSurvey/styled.ts","webpack://leadsbridge/./src/components/Form/Checkbox/styled.ts","webpack://leadsbridge/./src/components/Form/InputField/styled.ts","webpack://leadsbridge/./src/components/Form/InputSelect/styled.ts","webpack://leadsbridge/./src/components/Form/InputSmartSelect/styled.ts","webpack://leadsbridge/./src/components/Form/Label/styled.ts","webpack://leadsbridge/./src/components/Form/MultiCreatableCustom/styled.ts","webpack://leadsbridge/./src/components/Form/Textarea/styled.ts","webpack://leadsbridge/./src/components/Formik/FormikInputSmartSelect/styled.ts","webpack://leadsbridge/./src/components/InputAutoSelectCopy/styled.ts","webpack://leadsbridge/./src/components/Panel/styled.ts","webpack://leadsbridge/./src/components/PanelPopup/styled.ts","webpack://leadsbridge/./src/components/StatusBar/styled.ts","webpack://leadsbridge/./src/components/StepBar/styled.ts","webpack://leadsbridge/./src/components/Topbar/styled.ts","webpack://leadsbridge/./src/features/auth/slots/ChangePassword/styled.ts","webpack://leadsbridge/./src/features/billing/BillingBox/BillingDetails/styled.ts","webpack://leadsbridge/./src/features/billing/BillingBox/styled.ts","webpack://leadsbridge/./src/features/billing/stripe/styled.ts","webpack://leadsbridge/./src/features/checkout/CheckoutFooter/styled.ts","webpack://leadsbridge/./src/features/googleAdsAccount/AccountActivate/styled.ts","webpack://leadsbridge/./src/features/googleAdsAccount/AccountConnect/styled.ts","webpack://leadsbridge/./src/features/googleAdsAccount/AccountCreationDone/styled.ts","webpack://leadsbridge/./src/features/googleAdsAccount/AccountCreationFormInner/styled.ts","webpack://leadsbridge/./src/features/googleAdsAccount/IntegrationPanel/styled.ts","webpack://leadsbridge/./src/features/nbee/AddFilterButton/styled.ts","webpack://leadsbridge/./src/features/nbee/EmailReceipt/styled.ts","webpack://leadsbridge/./src/features/nbee/FieldsMappingForm/FieldMappingRow/styled.ts","webpack://leadsbridge/./src/features/nbee/FieldsMappingForm/FormulaModal/styled.ts","webpack://leadsbridge/./src/features/nbee/FieldsMappingForm/SendTestLeadSubForm/styled.ts","webpack://leadsbridge/./src/features/nbee/IntegrationCredentialsContent/styled.ts","webpack://leadsbridge/./src/features/nbee/SimpleBridgeBuilderForm/fields/IntegrationSelector/styled.ts","webpack://leadsbridge/./src/features/nbee/SimpleBridgeBuilderForm/fields/IntegrationSettings/styled.ts","webpack://leadsbridge/./src/features/nbee/SimpleBridgeBuilderForm/styled.ts","webpack://leadsbridge/./src/features/nbee/StepCompleted/styled.ts","webpack://leadsbridge/./src/features/nbee/WelcomeMessageForm/styled.ts","webpack://leadsbridge/./src/features/pricing/ModalChangePlan/styled.ts","webpack://leadsbridge/./src/features/pricing/PlanInfoBanner/styled.ts","webpack://leadsbridge/./src/features/signup/BbuContent/styled.ts","webpack://leadsbridge/./src/features/signup/SignupContent/styled.ts","webpack://leadsbridge/./src/features/signup/SignupForm/styled.ts","webpack://leadsbridge/./src/layouts/PageEditor/styled.ts"],"sourcesContent":["import styled, { css } from 'styled-components'\nimport { ButtonProps } from './index'\n\nconst sizeLarge = `1.3rem`\n\nconst getSize = ({ $size }: ButtonProps) => {\n  switch ($size) {\n    // TO BE REMOVE\n    case 'inline-small':\n      return css`\n        padding: 0;\n        margin: 0;\n        font-size: small;\n      `\n\n    case 'large':\n      return css`\n        font-size: ${sizeLarge};\n      `\n  }\n}\n\nconst getSocialProviderBaseStyle = ({ $size }: ButtonProps) => css`\n  min-width: 230px;\n  margin: 0;\n  & svg {\n    /* keeping icon left aligned with text centered   */\n    position: absolute;\n    left: 1rem;\n    top: 50%;\n    transform: translate(0, -50%);\n    height: ${$size === 'large' ? '1.5rem' : '1.3rem'};\n    width: ${$size === 'large' ? '1.5rem' : '1.3rem'};\n  }\n`\n\nconst getVariant = ({ $variant, $size }: ButtonProps) => {\n  switch ($variant) {\n    case 'facebook':\n      return css`\n        background-color: ${({ theme }) =>\n          theme.button.facebook.backgroundColor} !important;\n        color: ${({ theme }) => theme.button.facebook.color} !important;\n        border: 1px solid\n          ${({ theme }) => theme.button.facebook.backgroundColor};\n        ${getSocialProviderBaseStyle};\n        &:hover {\n          background-color: ${({ theme }) =>\n            theme.button.facebook.backgroundColorHover} !important;\n          transition: all 0.16s ease-in-out;\n        }\n      `\n    case 'tiktok':\n      return css`\n        background-color: ${({ theme }) =>\n          theme.button.tiktok.backgroundColor} !important;\n        color: ${({ theme }) => theme.button.tiktok.color} !important;\n        border-radius: 0;\n        ${getSocialProviderBaseStyle};\n        &:hover {\n          opacity: 0.7;\n        }\n      `\n    case 'google':\n      return css`\n        border: 1px solid #dadce0;\n        background-color: #fff;\n        ${getSocialProviderBaseStyle};\n        &:hover {\n          background-color: rgba(66, 133, 244, 0.04);\n          border-color: #d2e3fc;\n        }\n      `\n\n    case 'primary':\n      return css`\n        color: ${({ theme }) => theme.button.primary.color} !important;\n        background: ${({ theme }) =>\n          theme.button.primary.backgroundColor} !important;\n        transition: all 0.16s ease;\n        & a {\n          color: white;\n          text-decoration: none;\n        }\n\n        &:hover {\n          & a {\n            color: white;\n            text-decoration: none;\n          }\n          background: ${({ theme }) =>\n            theme.button.primary.backgroundColorHover} !important;\n          transition: all 0.16s ease;\n        }\n      `\n    case 'secondary':\n      return css`\n        background: ${({ theme }) =>\n          theme.button.secondary.backgroundColor} !important;\n        color: ${({ theme }) => theme.button.secondary.color} !important;\n        transition: 0.16s all ease-in;\n\n        &:hover {\n          background: ${({ theme }) =>\n            theme.button.secondary.backgroundColorHover} !important;\n          transition: 0.16s all ease-out;\n        }\n      `\n    case 'link':\n      return css`\n        box-shadow: none !important;\n        background: ${({ theme }) =>\n          theme.button.link.backgroundColor} !important;\n        padding-left: 0px !important;\n        color: ${({ theme }) => theme.button.link.color} !important;\n        font-weight: 400 !important;\n        margin-bottom: 1rem;\n      `\n  }\n}\n\nexport const ButtonStyled = styled.button<ButtonProps>`\n  position: relative;\n  cursor: pointer;\n  display: inline-flex;\n  justify-content: center;\n  align-items: center;\n  min-height: 1em;\n  outline: 0;\n  border: none;\n  vertical-align: baseline;\n  background: #e0e1e2 none;\n  color: rgba(0, 0, 0, 0.6);\n  margin: 0 0.25em 0 0;\n  padding: 0.78571429em 1.5em;\n  font-weight: 700;\n  line-height: 1em;\n  font-style: normal;\n  text-align: center;\n  border-radius: 0.28571429rem;\n  user-select: none;\n  transition: opacity 0.1s ease, background-color 0.1s ease, color 0.1s ease,\n    box-shadow 0.1s ease, background 0.1s ease;\n  -webkit-tap-highlight-color: transparent;\n\n  & svg {\n    margin-right: 0.3rem;\n  }\n\n  &:hover {\n    background-color: #cacbcd;\n    background-image: none;\n    color: rgba(0, 0, 0, 0.8);\n  }\n\n  ${({ $fluid }) =>\n    $fluid\n      ? css`\n          width: 100%;\n        `\n      : null}\n\n  ${({ disabled }) =>\n    disabled &&\n    css`\n      cursor: default;\n      opacity: 0.45 !important;\n      background-image: none !important;\n      box-shadow: none !important;\n      pointer-events: none !important;\n    `}\n\n    ${({ $loading }) =>\n    $loading &&\n    css`\n      & {\n        color: transparent !important;\n      }\n      i {\n        visibility: hidden;\n      }\n      &::before {\n        position: absolute;\n        content: '';\n        top: 50%;\n        left: 50%;\n        margin: -0.64285714em 0 0 -0.64285714em;\n        width: 1.28571429em;\n        height: 1.28571429em;\n        border-radius: 500rem;\n        border: 0.2em solid rgba(0, 0, 0, 0.15);\n      }\n      &::after {\n        position: absolute;\n        content: '';\n        top: 50%;\n        left: 50%;\n        margin: -0.64285714em 0 0 -0.64285714em;\n        width: 1.28571429em;\n        height: 1.28571429em;\n        animation: button-loader-spin 0.6s linear;\n        animation-iteration-count: infinite;\n        border-radius: 500rem;\n        border-color: #fff transparent transparent;\n        border-style: solid;\n        border-width: 0.2em;\n        box-shadow: 0 0 0 1px transparent;\n      }\n    `}\n\n    @keyframes button-loader-spin {\n    from {\n      transform: rotate(0);\n    }\n    to {\n      transform: rotate(360deg);\n    }\n  }\n\n  ${getVariant}\n  ${getSize}\n`\n","import styled, { css } from 'styled-components'\nimport { ButtonProps } from './index'\n\nconst getVariant = ({ $variant }: ButtonProps) => {\n  switch ($variant) {\n    case 'primary':\n      return css`\n        background: #41a6dc;\n        color: #fff;\n        &:hover {\n          opacity: 0.8;\n        }\n      `\n    case 'action':\n      return css`\n        background: #fd9645;\n        color: #fff;\n        box-shadow: 1px 3px 6px 0 rgba(253, 150, 69, 0.3);\n        &:hover {\n          background: #eb7e28;\n        }\n      `\n\n    case 'secondary':\n      return css`\n        background: #dfe4e8;\n        color: #404040;\n      `\n\n    case 'blue':\n      return css`\n        background: #41a6dc;\n        color: #fff;\n      `\n\n    case 'outlined-primary':\n      return css`\n        border: 1px solid #fd9645;\n        background: none;\n        color: #000;\n      `\n\n    case 'outlined-secondary':\n      return css`\n        border: 1px solid #dfe4e8;\n        background: none;\n        color: #000;\n      `\n\n    case 'link-primary':\n      return css`\n        background: none;\n        color: ${({ theme }) => theme.color.primary};\n      `\n\n    case 'link-secondary':\n      return css`\n        background: none;\n        color: #000;\n      `\n\n    case 'filter':\n      return css`\n        background: #3fb1f2;\n        border-radius: 4px;\n        color: #ffffff;\n        padding: 0.45rem 1rem !important;\n        &:hover {\n          opacity: 0.8;\n        }\n      `\n  }\n}\n\nconst getSize = ({ $size }: ButtonProps) => {\n  switch ($size) {\n    case 'small':\n      return css`\n        padding: 0.45rem 1rem;\n      `\n    case 'standard':\n      return css`\n        padding: 0.75rem 1.4rem;\n      `\n    case 'large':\n      return css`\n        padding: 1rem 1rem;\n        font-size: 16px;\n      `\n  }\n}\n\nexport const ButtonStyled = styled.button<ButtonProps>`\n  position: relative;\n  align-items: center;\n  cursor: pointer;\n  border-radius: 6px;\n  font-size: 14px;\n  letter-spacing: 0;\n  text-align: center;\n  border: none;\n  font-weight: 700;\n\n  ${({ $fluid }) =>\n    $fluid\n      ? css`\n          width: 100%;\n        `\n      : null}\n\n  ${({ $minWidth }) =>\n    $minWidth\n      ? css`\n          width: 150px;\n        `\n      : null}\n\n  ${({ disabled }) =>\n    disabled &&\n    css`\n      opacity: 0.5;\n      pointer-events: none;\n    `}\n\n\n  ${({ $hasIcon }) =>\n    $hasIcon &&\n    css`\n      display: inline-flex;\n      align-items: center;\n      svg {\n        margin-right: 0.5rem;\n      }\n    `}\n  \n  ${getVariant}\n  ${getSize}\n`\n\n// Following elements are just to handle the loading state of button\n// using a bunch of elements that will be conditionally rendered\nexport const ButtonLoadingHiddenChildren = styled.span`\n  opacity: 0;\n  display: block;\n`\n\nexport const ButtonLoadingWrapper = styled.span`\n  display: flex;\n  gap: 0.5rem;\n  position: absolute;\n  top: 0;\n  left: 0;\n  right: 0;\n  bottom: 0;\n\n  display: flex;\n  align-items: center;\n  justify-content: center;\n`\n\nexport const ButtonLoadingSpinner = styled.span`\n  display: block;\n  width: 18px;\n  position: relative;\n  &::before {\n    position: absolute;\n    content: '';\n    top: 50%;\n    left: 50%;\n    margin: -0.64285714em 0 0 -0.64285714em;\n    width: 1.28571429em;\n    height: 1.28571429em;\n    border-radius: 500rem;\n    border: 0.2em solid rgba(0, 0, 0, 0.15);\n  }\n  &::after {\n    position: absolute;\n    content: '';\n    top: 50%;\n    left: 50%;\n    margin: -0.64285714em 0 0 -0.64285714em;\n    width: 1.28571429em;\n    height: 1.28571429em;\n    animation: button-loader-spin 0.6s linear;\n    animation-iteration-count: infinite;\n    border-radius: 500rem;\n    border-color: #fff transparent transparent;\n    border-style: solid;\n    border-width: 0.2em;\n    box-shadow: 0 0 0 1px transparent;\n  }\n\n  @keyframes button-loader-spin {\n    from {\n      transform: rotate(0);\n    }\n    to {\n      transform: rotate(360deg);\n    }\n  }\n`\n","import styled from 'styled-components'\nexport const EditableIconStatus = styled.div`\n  padding-top: 5px;\n  svg.error {\n    fill: ${(props) => props.theme.input.error.borderColor};\n    opacity: 1;\n    cursor: default;\n    &:hover {\n      // We force fill color with the same 'red' di override a default hover color\n      fill: ${(props) => props.theme.input.error.borderColor};\n    }\n  }\n`\nexport const EditableTextStyled = styled.div`\n  & {\n    justify-content: flex-start;\n    align-items: center;\n    display: flex;\n    flex-wrap: nowrap;\n    svg {\n      width: 18px;\n      &:hover {\n        opacity: 1;\n        transition: all 0.16s ease-out;\n      }\n    }\n    .text-input-icon {\n      position: relative;\n      top: 2px;\n      cursor: pointer;\n    }\n    input {\n      margin-right: 10px;\n      font-family: ${({ theme }) => theme.font.family};\n      width: 0;\n      min-width: 50px;\n      max-width: 600px;\n      text-overflow: ellipsis;\n      white-space: nowrap;\n      overflow: hidden;\n      color: black;\n      font-size: 0.9rem;\n      padding: 0.2rem;\n\n      &[disabled] {\n        font-size: 1rem;\n        background-color: transparent;\n        border: 0;\n        font-weight: 600;\n        height: 24px;\n        padding: 0;\n      }\n    }\n  }\n`\n","import styled from 'styled-components'\n\nexport const IconsWrapperStyled = styled.div`\n  display: flex;\n  justify-content: center;\n  align-items: center;\n  gap: 0.5rem;\n`\n\nexport const IconButtonStyled = styled.button`\n  background-color: #dfe4e8;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  padding: 0.5rem;\n  border-radius: 5px;\n  border: none;\n  cursor: pointer;\n\n  :hover {\n    background-color: #ced6d7ff;\n  }\n`\n","import styled, { css } from 'styled-components'\nimport { MessageProps } from '@components/Basic/Message/index'\n\nconst getStatus = ({ $status }: MessageProps) => {\n  switch ($status) {\n    case 'success':\n      return css`\n        background-color: #fcfff5;\n        box-shadow: 0 0 0 1px #a3c293 inset, 0 0 0 0 transparent;\n        color: #2c662d;\n      `\n    case 'error':\n      return css`\n        background-color: #fff6f6;\n        box-shadow: 0 0 0 1px #e0b4b4 inset, 0 0 0 0 transparent;\n        color: #9f3a38;\n      `\n  }\n}\n\nexport const MessageStyled = styled.div<MessageProps>`\n  position: relative;\n  min-height: 1em;\n  margin: 1em 0;\n  background-color: #f8f8f9;\n  padding: 1em 1.5em;\n  line-height: 1.4285em;\n  box-shadow: 0 0 0 1px rgb(34 36 38 / 22%) inset, 0 0 0 0 transparent;\n  font-size: 1.14em;\n  color: rgba(0, 0, 0, 0.85);\n\n  .message-body {\n    margin: 0;\n  }\n\n  .message-title {\n    font-weight: 700;\n  }\n\n  ${getStatus}\n`\n","import { ProgressProps } from './index'\nimport styled from 'styled-components'\n\nconst theme: Record<ProgressProps['$theme'], string> = {\n  primary: '#22a7f0',\n}\n\nconst getProgressWidth = ({ $progress }: ProgressProps) => {\n  return `${$progress < 0 ? 0 : $progress > 100 ? 100 : $progress}%`\n}\n\nconst getBgColor = ({ $theme }: ProgressProps) => theme[$theme]\n\nexport const ProgressDivStyled = styled.div<ProgressProps>`\n  display: block;\n  width: 100%;\n  position: relative;\n  height: 0.4rem;\n  background: #fff;\n\n  &:after {\n    content: '';\n    position: absolute;\n    top: 0;\n    left: 0;\n    bottom: 0;\n    width: ${getProgressWidth};\n    background-color: ${getBgColor};\n    transition: width 0.4s ease-out;\n  }\n`\n","import styled, { css } from 'styled-components'\n\ninterface StyledSkeletonProps {\n  width: string\n  height: string\n  marginBottom: string\n  marginTop: string\n}\n\n// We should rewrite this with a better animation :)\nconst getAnimation = () => css`\n  position: relative;\n  overflow: hidden;\n  &:before {\n    content: '';\n    position: absolute;\n    display: block;\n    left: 0;\n    top: 0;\n    bottom: 0;\n    background-color: #dbdbdb;\n    animation: skeleton-move 2s infinite;\n  }\n\n  @keyframes skeleton-move {\n    0% {\n      width: 5%;\n    }\n    100% {\n      width: 100%;\n    }\n  }\n`\n\nexport const StyledSkeleton = styled.div<StyledSkeletonProps>`\n  display: block;\n  max-width: 100%;\n  width: ${({ width }) => width};\n  height: ${({ height }) => height};\n  margin-bottom: ${({ marginBottom }) => marginBottom};\n  margin-top: ${({ marginTop }) => marginTop};\n  background-color: #efefef;\n  border-radius: 0.3rem;\n\n  ${getAnimation}\n`\n","import styled, { css } from 'styled-components'\n\nexport const DropdownWrapper = styled.div`\n  position: relative;\n  width: auto;\n  display: inline-block;\n`\n\n// The line separator is applied to each of the items: \"each\" props is by default props.\nexport type DropdownLineSeparatorMenuItem = 'last' | 'none'\nexport type DropdownMenuDirection = 'left' | 'right'\ninterface DropdownMenuStyledProps {\n  $isOpen: boolean\n  $direction: DropdownMenuDirection\n  $lineSeparatorMenuItem?: DropdownLineSeparatorMenuItem\n}\n\nconst getDropdownlineSeparatorChild = ({\n  $lineSeparatorMenuItem,\n}: DropdownMenuStyledProps) =>\n  $lineSeparatorMenuItem === 'none'\n    ? css`\n        & > div {\n          border: 0;\n        }\n      `\n    : $lineSeparatorMenuItem === 'last'\n    ? css`\n        & > div:nth-last-child(1) {\n          border-top: 1px solid #d4d3d3;\n        }\n      `\n    : css`\n        /* adding seprator line between elements */\n        & + & {\n          &:before {\n            content: '';\n            position: absolute;\n            top: 0;\n            border-top: 1px solid #d4d3d3;\n            left: 0.7rem;\n            right: 0.7rem;\n          }\n        }\n      `\n\nconst getSideDirection = ({ $direction }: DropdownMenuStyledProps) =>\n  $direction === 'left'\n    ? css`\n        left: 0;\n      `\n    : css`\n        right: 0;\n      `\n\nexport const DropdownMenuStyled = styled.div<DropdownMenuStyledProps>`\n  display: ${({ $isOpen }) => ($isOpen ? 'block' : 'none')};\n  position: absolute;\n  top: 0;\n  z-index: ${({ theme }) => theme.zIndex.dropdown};\n  min-width: 230px;\n  max-width: 60vw; /* just in case elements are too wide  */\n  max-height: 300px; /* content can be scrolled  */\n  overflow-x: hidden;\n  overflow-y: auto;\n  padding-bottom: 0.3rem;\n  border: 1px solid #41a6dc;\n  border-radius: 4px;\n  background-color: #fff;\n  box-shadow: 1px 3px 6px 0 rgba(25, 25, 25, 0.2);\n  text-align: left;\n  ${getSideDirection};\n  ${getDropdownlineSeparatorChild}\n`\n\ninterface DropdownItemStyledProps {\n  isActive?: boolean\n  isDisabled?: boolean\n}\nconst getDropdownActive = ({ isActive, isDisabled }: DropdownItemStyledProps) =>\n  isActive\n    ? css`\n        cursor: default;\n        pointer-events: none;\n        background-color: ghostwhite;\n        svg {\n          opacity: 1 !important;\n          color: ${({ theme }) => theme.button.primary.backgroundColor};\n        }\n      `\n    : isDisabled\n    ? css`\n        opacity: 0.8;\n        pointer-events: none;\n        svg {\n          opacity: 0.5 !important;\n        }\n      `\n    : css``\n\nexport const DropdownMenuItemLabel = styled.div`\n  font-size: smaller;\n  color: ${({ theme }) => theme.button.primary.backgroundColor};\n`\nexport const DropdownItemStyled = styled.div<DropdownItemStyledProps>`\n  display: flex;\n  align-items: center;\n  padding: 0.4rem 0.7rem;\n  position: relative;\n  cursor: pointer;\n  font-size: 0.82rem;\n  white-space: nowrap; /* keeps text on same line and will make menu wider  */\n  ${getDropdownActive}\n  &:hover {\n    background-color: #eef4f7;\n  }\n  /* some items can contains svg icon */\n  svg {\n    opacity: 0.6;\n    margin-right: 10px;\n    // height: 1rem;\n    // font-size: small;\n  }\n  &:hover {\n    svg {\n      opacity: 1;\n    }\n  }\n`\n\nexport const DropdownIconWrapper = styled.div`\n  margin-left: 0.5rem;\n  font-family: sans-serif;\n\n  svg {\n    margin: 0;\n    opacity: 1 !important;\n  }\n`\n","import styled from 'styled-components'\n\nexport const FastAppSurveyWrapperStyled = styled.div`\n  width: 500px;\n  margin: 1rem auto;\n  text-align: center;\n`\n\nexport const ContainerStyled = styled.div`\n  width: 100%;\n`\n\nexport const BrandLogoStyled = styled.div`\n  padding: 0.5rem 1.5rem;\n`\n\nexport const HeaderStyled = styled.div`\n  background-color: rgba(244, 240, 236, 0.5);\n  text-align: center;\n  padding-top: 1rem;\n\n  h2 {\n    color: rgb(99, 115, 129);\n    font-weight: 400;\n  }\n`\n\nexport const IconWrapperStyled = styled.div`\n  background-color: #fff;\n  width: 30rem;\n  margin: auto;\n  border-radius: 5px 5px 0 0;\n\n  div {\n    display: flex;\n    justify-content: center;\n    align-items: center;\n  }\n`\n\nexport const LogoStyled = styled.img`\n  height: 2rem;\n  margin: 1rem;\n`\n\nexport const FormStyled = styled.div`\n  padding-top: 2rem;\n  width: 25rem;\n  margin: 0 auto;\n\n  p:first-child {\n    margin: 1.5rem 0 1.5rem;\n    color: rgb(99, 115, 129);\n  }\n`\n\nexport const ButtonWrapperStyled = styled.div`\n  margin: 2rem auto;\n  width: 16rem;\n`\n\nexport const LoaderWrapperStyled = styled.div`\n  height: 20rem;\n  position: relative;\n  div {\n    top: 30%;\n    color: rgb(99, 115, 129);\n  }\n`\n","import styled from 'styled-components'\n\nexport const CheckboxStyled = styled.div`\n  margin-bottom: 0.5em;\n\n  &.error {\n    color: red;\n  }\n\n  &.disabled {\n    opacity: 0.4;\n    .container,\n    .container:hover input ~ .checkmark,\n    .checkmark {\n      cursor: not-allowed;\n      animation: unset;\n      border-color: dimgrey;\n    }\n  }\n  .container {\n    display: block;\n    position: relative;\n    padding: 2px 0px 2px 30px;\n    cursor: pointer;\n    -webkit-user-select: none;\n    -moz-user-select: none;\n    -ms-user-select: none;\n    user-select: none;\n    font-weight: 500;\n  }\n\n  /* Hide the browser's default checkbox */\n  .container input {\n    position: absolute;\n    opacity: 0;\n    cursor: pointer;\n    height: 0;\n    width: 0;\n  }\n\n  /* Create a custom checkbox */\n  .checkmark {\n    position: absolute;\n    top: 3px;\n    left: 0;\n    height: 20px;\n    width: 20px;\n    border: 2px solid dimgrey;\n    border-radius: 3px;\n    transition: all 0.16s ease-in;\n  }\n\n  /* On mouse-over, add a grey background color */\n  .container:hover input ~ .checkmark {\n    border: 2px solid black;\n    transition: all 0.16s ease-out;\n  }\n\n  /* When the checkbox is checked, add a blue background */\n  .container input:checked ~ .checkmark {\n    background-color: #2196f3;\n    border-color: #2196f3;\n  }\n\n  /* Create the checkmark/indicator (hidden when not checked) */\n  .checkmark:after {\n    content: '';\n    position: absolute;\n    display: none;\n  }\n\n  /* Show the checkmark when checked */\n  .container input:checked ~ .checkmark:after {\n    display: block;\n  }\n\n  /* Style the checkmark/indicator */\n  .container .checkmark:after {\n    left: 5px;\n    top: 2px;\n    width: 5px;\n    height: 10px;\n    border: solid white;\n    border-width: 0 3px 3px 0;\n    -webkit-transform: rotate(45deg);\n    -ms-transform: rotate(45deg);\n    transform: rotate(45deg);\n  }\n`\n","import styled, { css } from 'styled-components'\nimport { InputFieldAttrProps } from '@components/Form/InputField/index'\nimport { InputFeedbackStatus } from '@components/Basic/InputFeedback'\n\nexport interface InputSlotProps {\n  $slot?: 'left' | 'right'\n}\nexport interface InputStyledProps {\n  $direction?: 'column' | 'row'\n  $status?: InputFeedbackStatus\n}\n\nconst setSlotStyle = ({ $slot }: InputSlotProps) => {\n  if ($slot === 'left') {\n    return css`\n      flex: unset;\n      > *:nth-child(1) {\n        margin: 0 0 0 5px;\n      }\n      > * {\n        margin: 0 5px 0 0;\n      }\n    `\n  } else if ($slot === 'right') {\n    return css`\n      flex: unset;\n      button {\n        margin: 5px 5px 5px 0 !important;\n        font-size: smaller;\n        width: max-content;\n      }\n      > *:nth-child(1) {\n        margin: 0 10px 0 0;\n      }\n      > *,\n      > *:last-child {\n        margin: 0 5px 0 0;\n      }\n    `\n  }\n}\nconst getInputStatusStyle = ({ $status }: InputStyledProps) => {\n  if ($status?.error) {\n    return css`\n      background-color: ${({ theme }) =>\n        theme.input.error.backgroundColor} !important;\n      border: 1px solid ${({ theme }) => theme.input.error.borderColor} !important;\n      input {\n        background-color: transparent;\n      }\n    `\n  }\n\n  if ($status?.success) {\n    return css`\n      background-color: ${({ theme }) =>\n        theme.input.success.backgroundColor} !important;\n      border: 1px solid ${({ theme }) => theme.input.success.borderColor} !important;\n      input {\n        background-color: transparent;\n      }\n    `\n  }\n\n  return css`\n    background-color: ${({ theme }) => theme.input.default.backgroundColor};\n    border: 1px solid ${({ theme }) => theme.input.default.borderColor};\n  `\n}\nconst getInputDirectionStyle = ({ $direction }: InputStyledProps) =>\n  $direction === 'column'\n    ? css`\n        flex-direction: column;\n        label {\n          margin-bottom: 5px;\n        }\n      `\n    : css`\n        flex-direction: row;\n        align-items: center;\n        label {\n          padding-right: 0.5rem;\n        }\n        p {\n          margin-left: 5px !important;\n        }\n      `\n\nconst getWidth = ({ $fluid }: InputFieldAttrProps) =>\n  $fluid\n    ? css`\n        max-width: 100%;\n      `\n    : css`\n        width: 100%;\n      `\n\nexport const InputStyled = styled.div<InputStyledProps & InputFieldAttrProps>`\n  width: 100%;\n  font-weight: normal;\n  line-height: 19px;\n  margin: ${({ $hasMargin }) => ($hasMargin ? '0.5rem 0 1rem 0' : '0')};\n  font-size: 1rem !important;\n  display: flex;\n  border-radius: 0.28571429rem;\n  justify-content: flex-start;\n  position: relative;\n  ${getInputDirectionStyle}\n\n  & input {\n    font-size: 0.938rem;\n    font-family: ${({ theme }) => theme.font.family};\n    outline: 0;\n    -webkit-tap-highlight-color: rgba(255, 255, 255, 0);\n    text-align: left;\n    line-height: normal;\n    padding: 0.555em 10px;\n    color: ${({ theme }) => theme.input.default.color};\n    border-radius: 0.28571429rem;\n    transition: box-shadow 0.1s ease, border-color 0.1s ease,\n      -webkit-box-shadow 0.1s ease;\n    box-shadow: none;\n    border: 0 !important; /*Semantic override*/\n    ${getWidth};\n    &:disabled {\n      background: ${({ theme }) => theme.input.disabled.background};\n      color: ${({ theme }) => theme.input.disabled.color};\n    }\n\n    &::placeholder {\n      color: ${({ theme }) => theme.input.default.placeholder};\n    }\n  }\n\n  > div {\n    ${getInputStatusStyle}\n  }\n`\nexport const InputSlot = styled.div<InputSlotProps>`\n  svg {\n    opacity: 0.6;\n  }\n  display: flex;\n  align-items: center;\n\n  ${setSlotStyle}\n`\nexport const InputWrapperStyled = styled.div<InputStyledProps>`\n  position: relative;\n  display: flex;\n  align-items: center;\n  border-radius: 0.28571429rem;\n\n  ${({ $direction }) =>\n    $direction === 'row'\n      ? css`\n          flex: 1;\n        `\n      : null}\n  ${getInputStatusStyle}\n`\n","import styled, { css } from 'styled-components'\nimport { SelectFieldProps } from './index'\n\nconst getInputDirectionStyle = ({ $direction }: SelectFieldProps) =>\n  $direction === 'column'\n    ? css`\n        flex-direction: column;\n        label {\n          margin-bottom: 5px;\n        }\n      `\n    : css`\n        flex-direction: row;\n        align-items: center;\n        label {\n          padding-right: 0.5rem;\n        }\n      `\n\nconst getStatusStatusStyle = ({ $status }: SelectFieldProps) => {\n  if ($status?.error) {\n    return css`\n      background-color: ${({ theme }) =>\n        theme.input.error.backgroundColor} !important;\n      border: 1px solid ${({ theme }) => theme.input.error.borderColor} !important;\n    `\n  }\n\n  if ($status?.success) {\n    return css`\n      background-color: ${({ theme }) =>\n        theme.input.success.backgroundColor} !important;\n      border: 1px solid ${({ theme }) => theme.input.success.borderColor} !important;\n    `\n  }\n\n  return css`\n    background-color: ${({ theme }) => theme.input.default.backgroundColor};\n    border: 1px solid ${({ theme }) => theme.input.default.borderColor};\n  `\n}\n\nexport const SelectStyled = styled.div<SelectFieldProps>`\n  width: 100%;\n  line-height: 19px;\n  position: relative;\n  margin: ${({ $hasMargin }) => ($hasMargin ? '0.5rem 0 1rem 0' : '0')};\n  font-size: 1rem;\n  display: flex;\n  font-family: ${({ theme }) => theme.font.family};\n  ${getInputDirectionStyle}\n\n  select {\n    width: 100%;\n    line-height: normal;\n    padding: 0.555em 1em;\n    font-size: 0.938rem;\n    outline: 0;\n    text-align: left;\n    color: rgb(67 73 78);\n    border-radius: 0.28571429rem;\n    appearance: none;\n    font-family: ${({ theme }) => theme.font.family};\n\n    ${getStatusStatusStyle};\n\n    &:disabled {\n      background: ${({ theme }) => theme.input.disabled.background};\n      color: ${({ theme }) => theme.input.disabled.color};\n      opacity: 1;\n      cursor: default;\n\n      ~ div > svg {\n        /* hide icon when disabled  */\n        display: none;\n      }\n    }\n  }\n\n  svg {\n    height: 1.3rem;\n    margin: 0.5rem;\n  }\n`\n\nexport const SelectWrapper = styled.div`\n  position: relative;\n\n  div {\n    position: absolute;\n    top: 0;\n    right: 0;\n    display: flex;\n    align-items: center;\n    height: 100%;\n    pointer-events: none;\n  }\n\n  svg {\n    display: block;\n  }\n`\n","import styled, { css, keyframes } from 'styled-components'\nimport { StylesConfig } from 'react-select'\nimport { SelectValue, SmartSelectProps } from './index'\nimport { defaultTheme } from '@app/styles/theme/default'\n\n// Custom style to be used as css override, without the need of creating custom react components\nexport const customStyles: StylesConfig<SelectValue> = {\n  menuList: (style, { selectProps }) => {\n    const isFormulas = (selectProps as any).isFormulas\n    return {\n      ...style,\n      padding: '0',\n      maxHeight: isFormulas ? '300px' : '200px',\n      overflowX: 'hidden',\n      overflowY: 'auto',\n    }\n  },\n  placeholder: (style, { selectProps }) => {\n    const addActionClick = (selectProps as any)\n      .addActionClick as SmartSelectProps['addActionClick']\n    return {\n      ...style,\n      color: addActionClick?.label ? '' : 'hsl(0, 0%, 50%)',\n    }\n  },\n  option: () => ({\n    // empty so style is reset\n  }),\n  menu: (style) => ({\n    ...style,\n    boxShadow: 'none',\n    marginTop: 0,\n    position: 'absolute',\n    width: '100%',\n    zIndex: 200,\n    paddingTop: 4,\n    paddingBottom: 4,\n    borderRadius: '4px',\n    top: '100%',\n    background: '#fff',\n    border: '1px solid #137FC0',\n    fontFamily: defaultTheme.font.family,\n  }),\n  container: (style) => ({\n    ...style,\n    position: 'relative',\n    width: '100%',\n    fontSize: '0.9rem',\n    pointerEvents: 'initial', // we need this sho we can show tooltip on disabled elements\n  }),\n  control: (style, { isDisabled }) => ({\n    ...style,\n    // emulating InputField style\n    minHeight: '43.11px',\n    border: '1px solid rgba(34,36,38,0.15)',\n    cursor: isDisabled ? 'default' : 'pointer',\n    backgroundColor: isDisabled ? 'rgba(34, 36, 38, 0.03)' : 'white',\n    color: isDisabled ? 'rgb(170, 170, 170)' : 'rgb(67, 73, 78)',\n    fontFamily: defaultTheme.font.family,\n  }),\n  input: (style, { selectProps }) => {\n    // in case of value with image (logoUri) we want to have the input indicator\n    // starting from item name and not at the logo position\n    const hasValueWithLogo = (selectProps.value as SelectValue | undefined)\n      ?.logoUri\n    if (hasValueWithLogo) {\n      return {\n        ...style,\n        position: 'relative',\n        left: '23px',\n      }\n    }\n    return {\n      ...style,\n    }\n  },\n}\n\nexport const greyStyles: StylesConfig<SelectValue> = {\n  menuList: (style) => ({\n    ...style,\n    padding: '0',\n    maxHeight: '200px',\n    overflowX: 'hidden',\n    overflowY: 'auto',\n  }),\n  option: () => ({\n    // empty so style is reset\n  }),\n  menu: (style) => ({\n    ...style,\n    boxShadow: 'none',\n    marginTop: 0,\n    position: 'absolute',\n    width: '100%',\n    zIndex: 1000,\n    paddingTop: 4,\n    paddingBottom: 4,\n    borderRadius: '4px',\n    top: '100%',\n    background: '#EDEDEE',\n    border: '1px solid #137FC0',\n    fontFamily: defaultTheme.font.family,\n  }),\n  container: (style) => ({\n    ...style,\n    position: 'relative',\n    width: '100%',\n    fontSize: '0.9rem',\n    pointerEvents: 'initial', // we need this sho we can show tooltip on disabled elements\n  }),\n  control: (style, { isDisabled }) => ({\n    ...style,\n    // emulating InputField style\n    minHeight: '39.16px',\n    border: '1px solid rgba(34,36,38,0.15)',\n    cursor: isDisabled ? 'default' : 'pointer',\n    backgroundColor: '#EDEDEE',\n    color: isDisabled ? 'rgb(170, 170, 170)' : 'rgb(67, 73, 78)',\n    fontFamily: defaultTheme.font.family,\n  }),\n  input: (style, { selectProps }) => {\n    // in case of value with image (logoUri) we want to have the input indicator\n    // starting from item name and not at the logo position\n    const hasValueWithLogo = (selectProps.value as SelectValue | undefined)\n      ?.logoUri\n    if (hasValueWithLogo) {\n      return {\n        ...style,\n        position: 'relative',\n        left: '23px',\n      }\n    }\n    return {\n      ...style,\n    }\n  },\n}\n\nexport const SmartSelectTooltipInfoMessage = styled.div`\n  display: flex;\n  align-items: center;\n  gap: 5px;\n  background-color: rgba(255, 255, 2555, 0.1);\n  color: whitesmoke;\n  padding: 5px 10px;\n`\n\nexport const SmartSelectWrapper = styled.div<{ isLoading?: boolean }>`\n  ${({ isLoading }) =>\n    isLoading\n      ? css`\n          pointer-events: none;\n          touch-action: none;\n          user-select: none;\n        `\n      : null}\n\n  .react-select-tooltip {\n    font-size: 0.8rem;\n    border-radius: 4px;\n    max-width: 430px;\n    padding: 0;\n    label {\n      padding: 0 0.5rem;\n      display: block;\n      margin-bottom: 5px;\n    }\n  }\n`\n\n// Custom Option component\ninterface StyledOptionWrapperProps {\n  hasPadding?: boolean\n  hasHoverEffect?: boolean\n  isFocused?: boolean\n  isSelected?: boolean\n}\n\nexport const StyledOptionWrapper = styled.div<StyledOptionWrapperProps>`\n  position: relative;\n  display: flex;\n  flex-wrap: nowrap;\n  align-items: center;\n  padding: ${({ hasPadding }) => (hasPadding ? '0.5rem 1rem' : '0')};\n  cursor: pointer;\n  grid-area: 1/1/2/3;\n\n  border-width: 1px;\n  border-style: dotted;\n  border-color: ${({ isFocused }) => (isFocused ? '#979797' : 'transparent')};\n  background-color: ${({ isFocused }) =>\n    isFocused ? 'rgba(238, 238, 238, 0.4)' : 'transparent'};\n\n  &:not(:first-of-type):before {\n    content: '';\n    position: absolute;\n    top: 0;\n    left: 1rem;\n    right: 1rem;\n    height: 1px;\n    border-top: 1px solid #979797;\n  }\n\n  &:hover {\n    ${({ hasHoverEffect }) =>\n      hasHoverEffect\n        ? css`\n            background-color: #efefef;\n          `\n        : null}\n  }\n\n  ${({ isSelected }) =>\n    isSelected\n      ? css`\n          &,\n          &:hover {\n            background-color: #41a6dc;\n            color: #fff;\n            font-weight: 600;\n          }\n        `\n      : null}\n`\n\nexport const StyledOptionImageWrapper = styled.div`\n  width: 1.3rem;\n  height: auto;\n  margin-right: 0.5rem;\n  display: flex;\n  flex-wrap: nowrap;\n  align-items: center;\n\n  img {\n    width: 100%;\n    height: 100%;\n    object-fit: contain;\n  }\n`\n\nexport const StyledOptionValueWrapper = styled.div`\n  overflow: hidden;\n  white-space: nowrap;\n  text-overflow: ellipsis;\n  display: inline-block;\n`\n\nexport const StyledOptionWithExtraLabel = styled.div`\n  width: 100%;\n  display: flex;\n  justify-content: space-between;\n  align-items: center;\n  span:nth-child(2) {\n    opacity: 0.4;\n    font-size: small;\n    padding-left: 10px;\n  }\n`\nexport const StyledOptionText = styled.div<{\n  $variant?: 'light' | 'default'\n  emailValidation?: boolean\n}>`\n  font-size: 0.9rem;\n  color: ${({ $variant }) => ($variant === 'light' ? '#696f8c' : 'inherit')};\n\n  svg {\n    color: #696f8c;\n    width: ${({ emailValidation }) => (emailValidation ? 'inherit' : '0.7rem')};\n    height: ${({ emailValidation }) =>\n      emailValidation ? 'inherit' : '0.7rem'};\n    margin-left: 0.5rem;\n  }\n`\n\nexport const StyledOptionSecondaryLabel = styled.div`\n  font-size: 0.9rem;\n`\n\nexport const StyledControlIconWrapper = styled.div`\n  display: flex;\n  padding-left: 0.5rem;\n`\n\nexport const AddActionClickButton = styled.div`\n  appearance: none;\n  background: #fff;\n  border: 0;\n  position: relative;\n  display: flex;\n  width: 100%;\n  align-items: center;\n`\n\nexport const AddNewSelectOptionButton = styled.button`\n  /* reset button style */\n  appearance: none;\n  background: #fff;\n  border: 0;\n\n  position: relative;\n  display: flex;\n  width: 100%;\n  align-items: center;\n  padding: 0.5rem 1rem;\n  cursor: pointer;\n\n  svg {\n    size: 0.9em;\n    margin-right: 0.5rem;\n  }\n\n  &:hover {\n    background-color: #efefef;\n  }\n`\n\nexport const VerifyContentWrapper = styled.div`\n  display: inline-flex;\n  align-items: center;\n  //margin-left: 0.5rem;\n  vertical-align: middle;\n  justify-content: right;\n\n  svg {\n    margin-right: 0.3rem;\n  }\n\n  p {\n    font-size: 0.8rem;\n  }\n`\n\nexport const FloatingLabelStyled = styled.label<{ isFloating?: boolean }>`\n  position: absolute;\n  display: block;\n  top: ${(props) => (props.isFloating ? `1px` : `50%`)};\n  left: 10px;\n  font-weight: 300;\n  font-size: ${(props) => (props.isFloating ? `.75rem` : `.9rem`)};\n  transform: ${(props) => (props.isFloating ? `none` : `translateY(-50%)`)};\n  transition: 0.4s ease all;\n`\n\nexport const DropDownIconsWrapperStyled = styled.div<{ isMenuOpen: boolean }>`\n  display: inline-flex;\n  justify-content: center;\n  align-items: center;\n  height: 60%;\n  border-left: 2px solid\n    ${({ isMenuOpen }) => (isMenuOpen ? '#3fb1f2' : '#c3ccd5')};\n  padding-left: 0.5rem;\n`\n\nexport const InputWrapperStyled = styled.div<{ isEmailValidation: boolean }>`\n  display: ${({ isEmailValidation }) => (isEmailValidation ? 'flex' : 'block')};\n  align-items: center;\n  justify-content: space-between;\n  div {\n    flex: 1;\n  }\n`\n","import styled, { css } from 'styled-components'\nimport { LabelProps } from '@components/Form/Label/index'\n\nexport const LabelStyled = styled.label<LabelProps>`\n  text-align: left;\n  color: rgb(99, 115, 129);\n  font-weight: 600;\n  ${({ $disabled }) =>\n    $disabled\n      ? css`\n          opacity: 0.5;\n        `\n      : null}\n`\n","import styled, { css } from 'styled-components'\nimport { StylesConfig } from 'react-select'\nimport { FaLock, FaPencilAlt, FaTimes } from 'react-icons/fa'\nimport { defaultTheme } from '@app/styles/theme/default'\nimport { IoClose } from 'react-icons/io5'\nimport { MappedFieldType } from 'Nbee'\n\ninterface StyledCustomOptionContainerProps {\n  isFocused?: boolean\n}\nexport const customStyles: StylesConfig = {\n  menuList: (style) => ({\n    ...style,\n    padding: 0,\n    overflowX: 'hidden',\n    overflowY: 'auto',\n    // Important: the MultiCreatableCustom component has a fixed height\n    maxHeight: '300px',\n  }),\n  placeholder: (style, { selectProps }) => {\n    return {\n      ...style,\n      color: 'hsl(0, 0%, 50%)',\n    }\n  },\n  option: () => ({\n    // empty so style is reset\n  }),\n  multiValue: () => ({\n    maxWidth: '200px', // fixed maxwidth in order to show up to 3 chips per row\n    color: '#fff',\n    fontSize: '0.8rem',\n  }),\n  multiValueLabel: () => ({\n    // don't pass default styles\n    fontFamily: defaultTheme.font.family,\n  }),\n  menu: (style, { selectProps }) => {\n    const isOptionDisabled = (selectProps as any).isOptionDisabled()\n    return {\n      ...style,\n      boxShadow: 'none',\n      marginTop: 0,\n      position: 'absolute',\n      width: '100%',\n      zIndex: 200,\n      paddingTop: 4,\n      paddingBottom: 4,\n      borderRadius: '4px',\n      top: '100%',\n      color: isOptionDisabled ? 'grey' : 'black',\n      background: '#fff',\n      border: '1px solid #137FC0',\n      fontFamily: defaultTheme.font.family,\n    }\n  },\n  container: (style) => ({\n    ...style,\n    position: 'relative',\n    width: '100%',\n    fontSize: '0.9rem',\n    pointerEvents: 'initial', // we need this so we can show tooltip on disabled elements\n  }),\n  control: (style, { isDisabled }) => ({\n    ...style,\n    // emulating InputField style\n    minHeight: '43.11px',\n    border: '1px solid rgba(34,36,38,0.15)',\n    cursor: isDisabled ? 'default' : 'pointer',\n    backgroundColor: isDisabled ? 'rgba(34, 36, 38, 0.03)' : 'white',\n    color: isDisabled ? 'rgb(170, 170, 170)' : 'rgb(67, 73, 78)',\n    fontFamily: defaultTheme.font.family,\n  }),\n}\n\nconst getChipStyle = ({ fieldType }: { fieldType?: MappedFieldType }) => {\n  if (fieldType) {\n    return css`\n      background-color: ${({ theme }) =>\n        theme.chips[fieldType].backgroundColor};\n      transition: background-color 0.2s ease;\n      &:hover {\n        background-color: ${({ theme }) =>\n          theme.chips[fieldType].backgroundColorHover};\n    }\n      .remove-icon {\n        transition: color 0.2s ease;\n        &:hover {\n          color: ${({ theme }) => theme.chips[fieldType].closeIconColorHover}\n      }\n    `\n  } else {\n    return css``\n  }\n}\n\nexport const StyledCustomMultiValueContainer = styled.div<{\n  fieldType: MappedFieldType\n  onMouseEnter: () => void\n  onMouseLeave: () => void\n}>`\n  min-height: 30px; // fixed min-height so that all chip have the same height\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  margin: 0.2rem;\n  padding: 0.2rem 0.5rem;\n  gap: 0.2rem;\n  border-radius: 15px;\n  ${getChipStyle}\n`\n\nexport const StyledCustomMultiValueLabel = styled.div<{\n  label: string\n}>`\n  display: flex;\n  align-items: center;\n\n  div {\n    max-width: 149px; // 149px is the max width for the label in order to show 3 chips per row,\n    // independently of the label length, without affecting how the remove icon is displayed\n    margin-left: 0.2rem;\n    white-space: nowrap;\n    overflow: hidden;\n    text-overflow: ellipsis;\n\n    ${({ label }) => {\n      return label === '<white-space>'\n        ? css`\n            font-style: italic;\n          `\n        : null\n    }}\n  }\n`\n\nexport const StyledCustomMultiValueRemoveContainer = styled.div`\n  display: flex;\n`\n\nexport const SourceIcon = styled.img`\n  width: 15px;\n`\n\nexport const RemoveIcon = styled(IoClose)`\n  cursor: pointer;\n`\n\nexport const StyledCustomMultiValueHoverContainer = styled.div<{\n  width: number\n  height: number\n}>`\n  display: flex;\n  justify-content: space-evenly;\n  align-items: center;\n  cursor: pointer;\n  gap: 0.5rem;\n  width: ${({ width }) => `${width}px`};\n  height: ${({ height }) => `${height}px`};\n`\nexport const HoverEditIcon = styled(FaPencilAlt)`\n  color: #fff;\n  margin-left: 0.2rem;\n  cursor: pointer;\n  height: 10px;\n  &:hover {\n    color: rgba(215, 215, 215, 0.9);\n  }\n`\n\nexport const HoverRemoveIcon = styled(FaTimes)`\n  &:hover {\n    color: rgba(215, 215, 215, 0.9);\n  }\n`\nexport const HoverDivider = styled.div`\n  width: 0.05rem;\n  height: 80%;\n  background-color: #fff;\n`\n\nexport const StyledMenuTabContainer = styled.div`\n  width: 100%;\n  display: flex;\n  position: sticky;\n  top: 0;\n  z-index: 3; ;\n`\n\nexport const StyledMenuTab = styled.button<{\n  isActive: boolean\n}>`\n  flex-grow: 1;\n  display: flex;\n  justify-content: center;\n  align-items: center;\n  border: 1px solid ${({ isActive }) => (isActive ? '#fff' : '#f8f9fa')};\n  font-size: 0.9rem;\n  font-weight: 600;\n  padding: 0.8rem;\n  cursor: pointer;\n  background-color: ${({ isActive }) => (isActive ? '#fff' : '#f8f9fa')};\n  color: ${({ isActive }) => (isActive ? 'black' : '#A9A9A9')};\n  &:first-child {\n    border-top-left-radius: 4px;\n  }\n  &:last-child {\n    border-top-right-radius: 4px;\n  }\n  :hover {\n    background-color: #fff;\n    border: 1px solid #fff;\n  }\n`\n\nexport const LockIcon = styled(FaLock)`\n  margin-left: 0.5rem;\n  color: #ff9800;\n  &:hover {\n    color: #f57c00;\n  }\n`\n\nexport const StyledCustomOptionContainer = styled.div<StyledCustomOptionContainerProps>`\n  position: relative;\n  display: flex;\n  flex-wrap: nowrap;\n  align-items: center;\n  padding: 0.5rem 1rem;\n  cursor: pointer;\n  border-width: 1px;\n\n  &:not(:first-of-type):before {\n    content: '';\n    position: absolute;\n    top: 0;\n    left: 1rem;\n    right: 1rem;\n    height: 1px;\n    border-top: 1px solid #979797;\n  }\n\n  ${({ isFocused }) =>\n    isFocused\n      ? css`\n          background-color: #efefef;\n        `\n      : null}\n`\n\nexport const StyledCustomOptionFormulaContainer = styled.div`\n  font-size: 0.9rem;\n  padding: 0.2rem 0.4rem;\n`\n\nexport const StyledCustomOptionFormulaLabel = styled.div`\n  font-weight: 600;\n  text-transform: capitalize;\n`\nexport const StyledCustomOptionFormulaDescription = styled.div``\nexport const StyledCustomOptionSourceContainer = styled.div`\n  display: flex;\n  flex-direction: row;\n  justify-content: space-between;\n  font-size: 0.9rem;\n  padding: 0.2rem 0.4rem;\n  width: 100%;\n`\n\nexport const StyledCustomOptionSourceLabel = styled.div``\n\nexport const StyledCustomOptionPicklistLabel = styled.div`\n  font-size: 0.8rem;\n  color: grey;\n`\n","import styled, { css } from 'styled-components'\nimport { InputFeedbackStatus } from '@components/Basic/InputFeedback'\n\nexport const TextareaWrapper = styled.div`\n  width: 100%;\n\n  label {\n    display: block;\n    margin-bottom: 5px;\n  }\n`\n\nexport interface TextareaStyledProps {\n  $status?: InputFeedbackStatus\n}\n\nconst getTextareaStatusStyle = ({\n  $status,\n}: {\n  $status?: InputFeedbackStatus\n}) => {\n  if ($status?.success) {\n    return css`\n      background-color: ${({ theme }) => theme.input.success.backgroundColor};\n      border: 1px solid ${({ theme }) => theme.input.success.borderColor};\n      input {\n        background-color: transparent;\n      }\n    `\n  }\n\n  if ($status?.error) {\n    return css`\n      background-color: ${({ theme }) => theme.input.error.backgroundColor};\n      border: 1px solid ${({ theme }) => theme.input.error.borderColor};\n      input {\n        background-color: transparent;\n      }\n    `\n  }\n\n  return css`\n    background-color: ${({ theme }) => theme.input.default.backgroundColor};\n    border: 1px solid ${({ theme }) => theme.input.default.borderColor};\n    &:disabled {\n      background: ${({ theme }) => theme.input.disabled.background};\n      color: ${({ theme }) => theme.input.disabled.color};\n  `\n}\n\nexport const TextareaStyled = styled.textarea<TextareaStyledProps>`\n  display: block;\n  width: 100%;\n  min-height: 120px;\n  border-radius: 0.3rem;\n  padding: 0.5rem;\n  ${getTextareaStatusStyle}\n`\n","import styled, { css } from 'styled-components'\nimport { Props } from './index'\n\nexport const FormikInputSmartSelectStyled = styled.div<\n  Pick<Props, 'secondaryStyles'>\n>`\n  display: flex;\n  flex-direction: column;\n  min-width: fit-content;\n\n  ${({ secondaryStyles }) =>\n    secondaryStyles\n      ? css`\n          margin: 0;\n          line-height: 19px;\n        `\n      : css`\n          margin: 0.5rem 0 1rem 0;\n        `}\n  // line-height: 19px;\n    label {\n    margin-bottom: 5px;\n  }\n`\n","import styled from 'styled-components'\n\nexport const InputWrapper = styled.div`\n  position: relative;\n  width: 100%;\n  padding-bottom: 1.5rem;\n  label {\n    font-size: 0.875rem;\n    color: #787a7d;\n  }\n`\n\nexport const LabelWrapper = styled.div`\n  display: flex;\n  justify-content: space-between;\n  margin-top: 1rem;\n\n  a {\n    font-size: 0.8rem;\n    margin: 0;\n  }\n`\n\nexport const InputField = styled.div`\n  position: relative;\n  width: 100%;\n  border-radius: 6px;\n  border: 1px solid rgba(65, 166, 220, 0.3);\n  display: flex;\n  margin-top: 0.3rem;\n\n  & svg {\n    cursor: pointer;\n  }\n\n  & input {\n    cursor: pointer;\n    font-size: 0.875rem;\n    color: #137fc0;\n    padding: 1rem 7rem 1rem 0.5rem;\n    border: none;\n    border-radius: 6px;\n    width: 100%;\n    outline: none;\n    background-color: rgba(237, 246, 251, 0.3);\n    text-decoration: underline;\n    white-space: nowrap;\n    overflow: hidden;\n    text-overflow: ellipsis;\n    width: 100%;\n\n    &::selection {\n      color: #3778ea;\n      background-color: rgba(237, 246, 251, 0.3);\n    }\n  }\n`\n\nexport const IconWrapper = styled.div`\n  height: 100%;\n  position: absolute;\n  right: 0;\n  display: flex;\n  align-items: center;\n  justify-content: space-around;\n  width: 7rem;\n\n  &:after {\n    content: '';\n    position: absolute;\n    border-right: 1px solid #979797;\n    top: 25%;\n    bottom: 25%;\n    left: 50%;\n    transform: translate(-50%);\n  }\n`\n\nexport const CopyText = styled.p`\n  position: absolute;\n  right: 0;\n  bottom: 0;\n  font-size: 0.875rem;\n  color: #787a7d;\n  text-align: right;\n`\n","import styled, { css } from 'styled-components'\nimport { mediaIframeOnly } from '@app/styles/iframeUtils'\n\nexport const PanelStyled = styled.div<{ extraPadding: boolean }>`\n  /* we need button paddings when we have footer in the Panel */\n  padding-bottom: ${({ extraPadding }) => (extraPadding ? '7rem' : '')};\n  @media screen and (max-height: 740px) {\n    padding-bottom: ${({ extraPadding }) => (extraPadding ? '90px' : '1em')};\n  }\n`\n// ---------------- WRAPPER\nexport const PanelWrapper = styled.div`\n  background-color: #fff;\n  box-shadow: 0 2px 6px 0 rgba(0, 0, 0, 0.08);\n  border-radius: 6px;\n  display: flex;\n  flex-direction: column;\n  position: relative;\n  width: 100%;\n\n  ${mediaIframeOnly(css`\n    box-shadow: unset;\n  `)}\n`\n\n// ---------------- HEAD\nexport const PanelHead = styled.div`\n  min-height: 60px;\n  padding: 1.5rem 2rem;\n  border-bottom: 2px solid whitesmoke;\n  border-radius: 10px;\n  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); /* Add shadow to bottom of panel head*/\n`\n// ---------------- BODY\ninterface PanelBodyProps {\n  $hasExtraTopPadding?: boolean\n  $panelHasHead?: boolean\n}\n\nexport const PanelBody = styled.div<PanelBodyProps>`\n  padding: 1.5rem 2rem;\n`\n\nexport const PanelBodyInner = styled.div<{ paddingBottom?: number }>`\n  min-height: 200px;\n`\n\n// ---------------- FOOTER\ninterface PanelFooterProps {\n  $showTopSeparator: boolean\n}\nexport const PanelFooter = styled.div`\n  min-height: 60px;\n  padding: 1.5rem 0;\n  position: fixed;\n  left: 0;\n  right: 0;\n  bottom: 0;\n  background-color: rgb(255 255 255 / 60%);\n  backdrop-filter: blur(5px);\n  z-index: ${({ theme }) => theme.zIndex.panelFooter};\n`\nexport const PanelFooterContainer = styled.div<PanelFooterProps>`\n  min-width: 420px;\n  max-width: 1080px;\n  padding: 0 2rem;\n  width: 100%;\n  margin: 0 auto;\n  position: relative;\n  ${({ $showTopSeparator }) =>\n    $showTopSeparator\n      ? css`\n          box-shadow: 0px -5px 10px 0px rgb(29 29 29 / 5%);\n        `\n      : null};\n`\nexport const PanelFooterWrapper = styled.div`\n  display: flex;\n  flex-direction: row;\n  justify-content: space-between;\n`\nexport const PanelFooterLeft = styled.div``\nexport const PanelFooterRight = styled.div`\n  text-align: right;\n`\n","import styled, { css } from 'styled-components'\n\ninterface PanelPopupStyledProps {\n  position: 'floating' | 'bottom'\n}\n\nconst getPanelStyle = ({ position }: PanelPopupStyledProps) =>\n  position === 'floating'\n    ? css`\n        bottom: calc(100% + 40px);\n        left: 2rem;\n        right: 2rem;\n      `\n    : css`\n        position: fixed;\n        bottom: 0;\n        left: 0;\n        right: 0;\n      `\n\nexport const PanelPopupStyled = styled.div<PanelPopupStyledProps>`\n  position: absolute;\n  transform: translateY(100%);\n  opacity: 0;\n  transition: all 0.16s ease-in;\n  z-index: 10;\n  ${getPanelStyle}\n\n  &.visible {\n    opacity: 1;\n    transition: all 0.16s ease-out;\n    transform: translateY(0);\n  }\n`\nexport const PanelPopupWrapper = styled.div`\n  padding: 1rem 1.5rem 2.5rem;\n  border-radius: 5px;\n  background-color: white;\n  border: 1px solid rgb(29 29 29 / 10%);\n  box-shadow: 2px 3px 2px 0px rgb(29 29 29 / 5%);\n`\n\nexport const PanelPopupHeader = styled.div`\n  width: 100%;\n`\nexport const PanelPopupButtonClose = styled.button`\n  background-color: #fff;\n  padding: 0;\n  border: 0;\n  display: flex;\n  align-items: center;\n  cursor: pointer;\n  font-size: 0.8rem;\n\n  svg {\n    width: 1.2rem;\n    height: 1.2rem;\n    margin-right: 0.2rem;\n  }\n\n  &:hover {\n    color: ${({ theme }) => theme.color.link};\n  }\n`\n\nexport const PanelPopupBody = styled.div`\n  width: 100%;\n  display: flex;\n  align-items: flex-end;\n`\n\nexport const PanelPopupContent = styled.div`\n  text-align: left;\n  flex: 1;\n  margin-top: 1rem;\n  padding-right: 3rem;\n  font-size: 0.9rem;\n`\n\nexport const PanelPopupImageWrapper = styled.div`\n  text-align: center;\n  width: 100px;\n  margin: 0 auto;\n\n  img,\n  svg {\n    width: 100%;\n  }\n`\n","import styled, { css } from 'styled-components'\nimport { mediaIframeOnly } from '@app/styles/iframeUtils'\n\nexport const StatusBarBridgeWrapper = styled.div`\n  position: relative;\n  display: flex;\n  justify-content: space-around;\n  align-items: center;\n  font-weight: 600;\n  padding: 0.5rem 2.5rem;\n  min-height: 40px;\n  @media (max-width: 700px) {\n    flex-direction: column;\n    gap: 1rem;\n    padding-bottom: 1rem;\n  }\n`\nexport const StatusBarStatus = styled.div`\n  text-transform: uppercase;\n  padding-right: 1rem;\n  white-space: nowrap;\n  margin-right: 1rem;\n  @media (min-width: 700px) {\n    border-right: 1px solid white;\n  }\n`\nexport const StatusBarMessage = styled.div`\n  margin-right: 1rem;\n  @media (max-width: 700px) {\n    text-align: center;\n  }\n  ${mediaIframeOnly(css`\n    font-size: 0.8rem;\n  `)};\n`\nexport const BarCenter = styled.div`\n  display: flex;\n  align-items: center;\n  @media (max-width: 700px) {\n    flex-direction: column;\n    gap: 0.5rem;\n  }\n`\nexport const BarLeft = styled.div``\nexport const BarRight = styled.div`\n  display: flex;\n  gap: 0.5rem;\n  align-items: center;\n  button {\n    white-space: nowrap;\n  }\n`\nexport const StatusBarBridgeStyled = styled.div`\n  width: 100%;\n  background-color: ${({ theme }) => theme.button.primary.backgroundColor};\n  color: white;\n`\n\nexport const CloseIcon = styled.div`\n  position: absolute;\n  cursor: pointer;\n  top: 6px;\n  right: 8px;\n`\n","import styled from 'styled-components'\n\nexport const StepBarContainer = styled.div`\n  display: flex;\n  flex-direction: row;\n  align-items: flex-start;\n  justify-content: space-between;\n  //TO REMOVE when we have grid system\n  max-width: 1080px;\n  min-width: 350px;\n  width: 100%;\n\n  div:nth-child(1) .step-bar-left {\n    border: 0;\n  }\n  div:last-child .step-bar-right {\n    border: 0;\n  }\n`\n\nexport const StepBarItemStyled = styled.div`\n  & {\n    display: flex;\n    align-items: center;\n    text-align: center;\n    justify-content: flex-start;\n    flex-direction: column;\n    position: relative;\n    flex: 1;\n  }\n  .step-bar-circle {\n    border-radius: 100%;\n    background-color: white;\n    border: 1px solid #273649;\n    width: 40px;\n    height: 40px;\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    font-weight: bold;\n    cursor: default;\n  }\n  .step-bar-label {\n    margin-top: 5px;\n    font-weight: 600;\n    font-size: 0.9rem;\n    color: black;\n  }\n  .is-clickable {\n    cursor: pointer;\n  }\n  .step-bar-optional {\n    opacity: 0.6;\n  }\n\n  .step-bar-right,\n  .step-bar-left {\n    position: absolute;\n    top: 20px;\n    height: 1px;\n    border-top: 1px solid #273649;\n  }\n  .step-bar-right {\n    right: 0;\n    left: 50%;\n    margin-left: 20px;\n  }\n\n  .step-bar-left {\n    left: 0;\n    right: 50%;\n    margin-right: 20px;\n  }\n\n  &.active {\n    .step-bar-circle {\n      background-color: #273649;\n      color: white;\n    }\n  }\n  span[title] {\n    cursor: default;\n  }\n  span[title].is-clickable {\n    cursor: pointer;\n  }\n`\n","import styled, { css } from 'styled-components'\nimport { mediaIframeOnly } from '@app/styles/iframeUtils'\n\ninterface TopbarStyledProps {\n  hideOnEmbeddable?: boolean\n  variant: 'light' | 'dark'\n}\n\nconst hideWhenEmbedded = ({ hideOnEmbeddable }: TopbarStyledProps) =>\n  hideOnEmbeddable\n    ? css`\n        ${mediaIframeOnly(css`\n          display: none;\n        `)};\n      `\n    : null\n\nconst getVariantColor = ({ variant }: TopbarStyledProps) =>\n  variant === 'dark'\n    ? css`\n        background-color: #273649;\n        color: white;\n      `\n    : css`\n        background-color: #fff;\n      `\n\nexport const TopbarStyled = styled.div``\nexport const TopbarWrapper = styled.div<TopbarStyledProps>`\n  padding: 1.4rem 2.5rem;\n  font-weight: 600;\n  display: flex;\n  align-items: center;\n\n  ${getVariantColor}\n  ${hideWhenEmbedded}\n\n  a {\n    color: ${({ variant }) => (variant === 'dark' ? '#fff' : '#000')};\n    text-decoration: none;\n  }\n\n  & > div {\n    flex: 1;\n    a {\n      display: flex;\n      align-items: center;\n      flex-wrap: nowrap;\n    }\n    svg {\n      margin-right: 5px;\n      width: 18px;\n      &:hover {\n        color: ${({ variant, theme }) =>\n          variant === 'dark'\n            ? '#fff'\n            : theme.button.primary.backgroundColorHover};\n      }\n    }\n  }\n  & div:nth-child(2) {\n    text-align: center;\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    input[disabled],\n    .text-input-icon {\n      ${({ variant }) =>\n        variant === 'dark'\n          ? css`\n              color: white;\n            `\n          : null};\n    }\n  }\n  & div:nth-child(3) {\n    display: flex;\n    flex-direction: row;\n    justify-content: end;\n    align-items: center;\n    > * {\n      margin: 0 15px;\n    }\n  }\n`\n","import styled from 'styled-components'\nimport { Button } from '@components/Basic/ButtonNbe'\nimport { FormikInputField } from '@components/Formik/FormikInputField'\n\nexport const HeaderStyled = styled.div`\n  line-height: 1.3;\n  font-size: 18px;\n  font-weight: bold;\n  margin-bottom: 1.5rem;\n`\n\n// Description below title\n/* export const SubHeaderStyled = styled.div`\n  font-size: 16px;\n  margin-bottom: 2rem;\n` */\n\nexport const ButtonGoBackStyled = styled(Button)`\n  font-weight: normal;\n  font-size: 1rem;\n  line-height: 1.4;\n  background-color: transparent;\n`\n\nexport const FooterStyled = styled.div`\n  margin-top: 1.5rem;\n  text-align: center;\n`\n\nexport const InputFieldStyled = styled(FormikInputField)<{\n  $isMatch?: boolean\n}>`\n  & > div:nth-of-type(1) {\n    border: ${({ $isMatch }) =>\n      $isMatch ? '1px solid #0c783a !important;' : ''};\n  }\n  input {\n    padding: 0.625rem 1rem;\n  }\n`\n\nexport const InputWrapperStyled = styled.div`\n  margin: 0.5rem 0 1rem 0;\n`\n","import styled from 'styled-components'\n\nexport const BillingDetailsStyled = styled.div`\n  display: flex;\n  align-items: center;\n  padding: 1rem;\n  width: 100%;\n  background-color: #ece8e8;\n  border-radius: 6px;\n\n  p {\n    margin: 0 1rem;\n    font-size: 1rem;\n    color: #777b80;\n  }\n`\n\nexport const ButtonWrapper = styled.div`\n  display: flex;\n  justify-content: flex-end;\n  align-items: center;\n`\n","import styled from 'styled-components'\nimport { FormikInputField } from '@components/Formik/FormikInputField'\n\nexport const Wrapper = styled.div`\n  max-width: 420px;\n`\n\nexport const CustomInputField = styled(FormikInputField)`\n  padding-bottom: 0.5rem;\n  input {\n    background-color: #ededee;\n  }\n`\n\nexport const WrapperInputCheckbox = styled.div`\n  span {\n    background-color: #ededee;\n    border: 1px solid rgba(34, 36, 38, 0.15) !important;\n  }\n  margin-bottom: 1rem;\n`\n\nexport const FormInputGroup = styled.div<{ twoColumns?: boolean }>`\n  display: grid;\n  grid-template-columns: ${({ twoColumns }) =>\n    twoColumns ? '2fr 1fr' : '2fr 1fr 1fr'};\n  gap: 1rem;\n  margin-top: 1.2rem;\n`\n\nexport const InputWrapper = styled.div`\n  position: relative;\n\n  input {\n    background-color: rgb(237, 237, 238);\n  }\n\n  p {\n    margin: 0;\n    position: absolute;\n    bottom: -20px;\n  }\n`\n","import styled, { css } from 'styled-components'\nimport { StripeCardNumberElementOptions } from '@stripe/stripe-js'\n\nexport const stripeElementOptions: StripeCardNumberElementOptions = {\n  style: {\n    base: {\n      lineHeight: '40px',\n      fontSize: '16px',\n      color: '#000',\n    },\n  },\n}\n\nexport const CardFieldsWrapper = styled.div<{ isLoading?: boolean }>`\n  position: relative;\n  max-width: 420px;\n  opacity: 1;\n  transition: all 0.16s ease-out;\n  ${({ isLoading }) =>\n    isLoading\n      ? css`\n          transition: all 0.16s ease-in;\n          opacity: 0;\n          &:before {\n            content: '';\n            position: absolute;\n            top: 0;\n            bottom: 0;\n            left: 0;\n            right: 0;\n            z-index: 1;\n          }\n        `\n      : null}\n`\n\nexport const CreditCardRow = styled.div`\n  display: flex;\n  flex-wrap: wrap;\n  gap: 1rem;\n  margin-bottom: 1rem;\n  > * {\n    flex: 1;\n  }\n`\n\nexport const CardItemNumberWrapper = styled.div`\n  display: flex;\n  flex-direction: row;\n  flex-wrap: nowrap;\n  align-items: center;\n  .card-provider {\n    margin: 0 auto;\n    display: flex;\n    align-items: center;\n    justify-content: flex-start;\n    opacity: 0.6;\n    width: 30px;\n    margin-right: 10px;\n  }\n  .card-item-number {\n    width: 100%;\n    margin-top: 1px;\n  }\n`\nexport const CardBoxInputGroup = styled.div<{ hasFocus?: boolean }>`\n  .card-item {\n    background-color: #ededee;\n    height: 50px;\n    border-radius: 0.4rem;\n    padding: 5px 1rem;\n\n    ${({ hasFocus }) =>\n      hasFocus\n        ? css`\n            box-shadow: 0 0 3px 1px #41a6dc;\n          `\n        : null}\n    &.isLoading {\n      opacity: 0;\n    }\n  }\n`\nexport const CardFieldsContainer = styled.div`\n  position: relative;\n  .loader-container-form {\n    position: absolute;\n    z-index: 1;\n    left: 0;\n    right: 0;\n    bottom: 0;\n    top: 0;\n  }\n`\n","import styled from 'styled-components'\n\nexport const CheckoutPrePrice = styled.div`\n  display: flex;\n  justify-content: space-between;\n  align-items: center;\n  margin-top: 2rem;\n  color: #4d4f52;\n`\n\nexport const CheckoutTrialLimitsDisclaimer = styled.div`\n  color: #4d4f52;\n`\n\nexport const CeckoutTotalPrice = styled.div`\n  display: flex;\n  justify-content: space-between;\n  align-items: center;\n\n  p {\n    color: #363636;\n    font-weight: 600;\n    font-size: 1.3rem;\n  }\n`\n","import styled, { css } from 'styled-components'\n\nexport const PanelImageStyled = styled.img`\n  margin: 1em auto;\n  max-width: 100%;\n`\nexport const PanelBodyWrapper = styled.div<{ isPopupOpen: boolean }>`\n  ${({ isPopupOpen }) =>\n    isPopupOpen\n      ? css`\n          position: relative;\n\n          &:after {\n            content: '';\n            background-color: rgb(0 0 0 / 75%);\n            border-radius: 5px;\n            top: -40px;\n            left: -40px;\n            right: -40px;\n            bottom: -40px;\n            position: absolute;\n          }\n        `\n      : null}\n`\nexport const PanelBodyStyled = styled.div`\n  text-align: center;\n`\n\nexport const PanelBodyInnerStyled = styled.div`\n  text-align: center;\n  width: 500px;\n  margin: 0 auto 1rem;\n`\n\nexport const IntegrationLogo = styled.div`\n  width: 100%;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  margin-bottom: 2em;\n  flex-direction: column;\n  gap: 10px;\n  label {\n    font-size: small;\n  }\n`\n","import styled from 'styled-components'\n\nexport const PanelImageStyled = styled.img`\n  margin: 1em auto;\n  max-width: 100%;\n`\nexport const PanelBodyStyled = styled.div`\n  text-align: center;\n  p {\n    max-width: 100%;\n    width: 70%;\n    margin: 0 auto;\n    text-align: center;\n  }\n`\nexport const IntegrationLogo = styled.div`\n  width: 100%;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  margin-bottom: 2em;\n  flex-direction: column;\n  gap: 10px;\n  label {\n    font-size: small;\n  }\n`\nexport const IntegrationPanelWrapper = styled.div`\n  display: flex;\n  flex-direction: column;\n  gap: 1em;\n  margin: 1em 0;\n`\nexport const BadgeWrapper = styled.div`\n  width: 100%;\n  img {\n    width: 80px;\n  }\n`\n","import styled from 'styled-components'\n\nexport const PanelImageStyled = styled.img`\n  margin: 1em auto;\n  max-width: 100%;\n`\nexport const PanelBodyStyled = styled.div`\n  text-align: center;\n  max-width: 100%;\n  width: 70%;\n  margin: 0 auto;\n`\nexport const IntegrationLogo = styled.div`\n  width: 100%;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  margin-bottom: 2em;\n  flex-direction: column;\n  gap: 10px;\n  label {\n    font-size: small;\n  }\n`\nexport const ButtonWrapper = styled.div`\n  margin: 2em 0;\n`\n","import styled from 'styled-components'\n\nexport const IntegrationLogoWrapper = styled.div`\n  margin: 0 auto;\n  width: 100%;\n  text-align: center;\n  margin-bottom: 2em;\n`\nexport const AccountCreationFormWrapperStyled = styled.div`\n  display: flex;\n  flex-direction: column;\n  align-items: flex-start;\n  width: 100%;\n  gap: 2em;\n  padding: 2em 5em;\n  & > div {\n    display: flex;\n    gap: 2em;\n    width: 100%;\n  }\n`\nexport const AccountCreationInputGroup = styled.div`\n  > div {\n    position: relative;\n    flex: 1;\n  }\n`\n","import styled, { css } from 'styled-components'\nimport { IntegrationPanelBodyProps } from '@features/googleAdsAccount/IntegrationPanel/index'\n\nexport const ButtonGroup = styled.div`\n  display: flex;\n  align-items: center;\n  gap: 1em;\n  justify-content: center;\n  svg {\n    font-weight: 600;\n    color: ${({ theme }) => theme.color.primary};\n  }\n`\nexport const IntegrationPanelStyled = styled.div`\n  border-radius: 5px;\n  border: 1px solid ${({ theme }) => theme.color.primary};\n`\nexport const IntegrationPanelWrapper = styled.div`\n  padding: 1em 1.5em;\n`\nexport const IntegrationPanelHead = styled.div`\n  display: flex;\n  justify-content: space-between;\n  gap: 1em;\n  align-items: center;\n`\nexport const PanelHeadRight = styled.div`\n  display: flex;\n  flex-direction: column;\n  justify-content: center;\n  text-align: center;\n  gap: 1em;\n  width: fit-content;\n  min-width: 115px;\n  button {\n    white-space: nowrap;\n  }\n`\n\nexport const PanelHeadRightLink = styled.a`\n  font-weight: 600;\n  color: ${({ theme }) => theme.color.primary};\n  text-decoration: none;\n  font-size: 14px;\n  &:hover {\n    color: ${({ theme }) => theme.color.primary};\n    text-decoration: underline;\n  }\n`\n\nexport const PanelHeadLeft = styled.div`\n  div:nth-child(1) {\n    display: flex;\n    align-items: center;\n    gap: 1em;\n  }\n  div:nth-child(2) {\n    opacity: 0.6;\n    margin-top: 0.5em;\n    max-width: 610px;\n  }\n`\nexport const AcceptedBadge = styled.div`\n  display: flex;\n  align-items: center;\n  gap: 10px;\n  font-weight: 600;\n  svg {\n    fill: ${({ theme }) => theme.color.green};\n  }\n`\nexport const PanelHeadTitle = styled.p`\n  font-weight: 600;\n`\nexport const IntegrationPanelFooter = styled.div`\n  display: flex;\n  justify-content: space-between;\n  align-items: center;\n  a {\n    text-decoration: none;\n    &:hover {\n      text-decoration: underline;\n    }\n  }\n`\nexport const IntegrationPanelBody = styled.div<IntegrationPanelBodyProps>`\n  padding-top: 1em;\n  margin-top: 1em;\n  border-top: 1px solid ${({ theme }) => theme.color.primary};\n\n  ${({ $open }) =>\n    $open\n      ? css`\n          opacity: 1;\n          transition: max-height 0.15s ease-out, opacity 0.36s ease-out;\n          max-height: 500px;\n        `\n      : css`\n          opacity: 0;\n          transition: all 0.16s ease-in-out;\n          max-height: 0;\n          transition: max-height 0.15s ease-in, opacity 0.26s ease-in;\n          overflow: hidden;\n        `}\n`\n","import styled, { css, ThemeProps } from 'styled-components'\nimport { MdEdit } from 'react-icons/md'\n\nexport const AddFilterButtonWrapper = styled.div`\n  display: inline-block;\n`\ninterface FilterIconProps {\n  hasFilters?: boolean\n}\n\nexport const FilterIcon = styled.div<FilterIconProps>`\n  display: inline;\n  font-size: 0.8em;\n  margin-right: 0.5em;\n  margin-left: 0.2em;\n  ${({ hasFilters }) =>\n    hasFilters\n      ? css`\n          color: #191919;\n        `\n      : css`\n          color: #41a6dc;\n        `}\n`\n\nexport const FilterModalWrapper = styled.div`\n  position: relative;\n  height: 100%;\n`\n\nexport const FilterModalHeader = styled.div`\n  display: flex;\n  flex-direction: row;\n  justify-content: space-between;\n  align-items: center;\n  padding: 0;\n  margin: 0;\n  // height: 20%;\n\n  h3 {\n    font-size: 1.35rem;\n    padding-left: 1.5rem;\n    padding-top: 1.5rem;\n  }\n`\n\nexport const FilterModalCloseIcon = styled.div`\n  font-size: 2rem;\n  background-color: #f8f8f8;\n  display: flex;\n  justify-content: center;\n  align-items: center;\n  padding: 1rem;\n  border-radius: 0 10%;\n  margin: 0;\n  cursor: pointer;\n`\n\nexport const FilterModalBody = styled.div`\n  padding: 1.5rem;\n  overflow-y: auto;\n  height: 56%;\n  margin-bottom: 2rem;\n  // padding-bottom: 2rem;\n`\n\nexport const FilterModalFooter = styled.div`\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  height: 16%;\n  padding: 0 2rem;\n  margin: 0;\n  // padding: 0 2rem;\n  // margin: 2rem;\n  position: absolute;\n  bottom: 0;\n  right: 0;\n  left: 0;\n\n  // margin-top: 4rem;\n  // padding-top: 4rem;\n`\nexport const EditIcon = styled(MdEdit)`\n  font-size: 1.1em;\n  margin-left: 0.2em;\n  margin-bottom: 0;\n  padding-bottom: 0;\n`\nexport const HasFilterMessage = styled.span`\n  color: #191919;\n  font-size: 0.93em;\n`\nexport const HasFilterMessageTitle = styled.span`\n  font-weight: 600;\n  margin-right: 0.4em;\n`\n\nexport const ButtonStyledLabel = styled.span`\n  display: flex;\n  align-items: center;\n  gap: 1rem;\n`\nexport const StarterLabel = styled.span<{ small?: boolean }>`\n  display: inline-block;\n  padding: ${({ small }) => (small ? '2px 4px' : '4px 8px')};\n  border-radius: 4px;\n  background-color: #ff9800;\n  color: #fff;\n  font-weight: bold;\n  font-size: ${({ small }) => (small ? '10px' : '12px')};\n  line-height: ${({ small }) =>\n    small\n      ? '22px'\n      : '20px'}; // change this value to adjust the vertical centering\n  transition: background-color 0.3s; // add a smooth transition effect\n  cursor: pointer; // add cursor pointer to indicate interactivity\n\n  &:hover {\n    background-color: #f57c00; // change to a darker color on hover\n  }\n`\n\nexport const FilterRowStyled = styled.div`\n  display: grid;\n  grid-template-columns: repeat(3, 1fr) 15%;\n  grid-gap: 10px;\n  justify-content: center;\n  align-items: center;\n  padding: 0.6rem 1rem;\n  margin-bottom: 1rem;\n  background-color: #f9fafb;\n  label {\n    font-size: 13px;\n    font-weight: 400;\n    color: grey;\n  }\n\n  input[disabled] {\n    background-color: #f2f3f4;\n  }\n`\n\nexport const FilterNotAvailablePageWrapper = styled.div`\n  width: 80%;\n  margin: 0 auto;\n  padding-top: 2rem;\n  display: flex;\n  text-align: center;\n  flex-direction: column;\n  align-items: center;\n  & > *:not(:last-child) {\n    margin-bottom: 2rem;\n  }\n`\n\nexport const FilterNotAvailablePageText = styled.div`\n  font-weight: 600;\n`\n\nexport const FilterNotAvailablePageImage = styled.img`\n  max-width: 100%;\n  width: 200px;\n`\n","import styled from 'styled-components'\n\nconst Wrapper = styled.div`\n  position: relative;\n`\n\nconst FieldGroup = styled.div`\n  width: 100%;\n  margin-bottom: 1rem;\n`\n\nconst FieldRow = styled.div`\n  display: flex;\n  flex-direction: column;\n\n  label {\n    padding-left: 0.1rem;\n    color: rgb(99, 115, 129);\n    font-weight: 600;\n  }\n`\n\nconst SettingsFieldsContainer = styled.div`\n  padding: 1rem 0 0;\n`\n\nconst SaveButtonWrapper = styled.div`\n  text-align: right;\n  padding-right: 2rem;\n\n  button {\n    padding-right: 0;\n  }\n`\n\nconst TitleWrapper = styled.div`\n  position: relative;\n  text-alignalign: center;\n  margin-bottombottom: 1rem;\n`\n\nconst IconLockWrapper = styled.div`\n  position: absolute;\n  top: 50%;\n  right: 5rem;\n  transform: translateY(-50%);\n`\n\nexport const EmailReceiptStyled = {\n  Wrapper,\n  FieldGroup,\n  SettingsFieldsContainer,\n  FieldRow,\n  SaveButtonWrapper,\n  TitleWrapper,\n  IconLockWrapper,\n}\n","import styled from 'styled-components'\nimport { MdDelete } from 'react-icons/md'\nimport { FakeInput } from '@components/Basic/FakeInput'\n\ninterface RowStyledProps {\n  showWelcomeMessage?: boolean\n}\n\ninterface DeleteIconProps {\n  visible: string\n}\n\nexport const RowWrapper = styled.div<RowStyledProps>`\n  padding: 1rem 0;\n  & + & {\n    ${(props) => !props.showWelcomeMessage && 'border-top: 1px solid #b7b7b7;'}\n  }\n`\n\nexport const RowStyled = styled.div<RowStyledProps>`\n  width: 100%;\n  display: flex;\n  flex-direction: row;\n  align-items: center;\n  min-height: 2.5rem;\n`\n\n// used for error displaying\nexport const RowFeedback = styled.div<RowStyledProps>`\n  ${(props) =>\n    props.showWelcomeMessage ? 'display: block;' : 'grid-column: 3;'}\n  p {\n    font-size: 0.8rem;\n  }\n`\n\nexport const BinIconWrapper = styled.div`\n  min-width: 1.8rem;\n  margin-left: 0;\n`\n\nexport const DeleteIcon = styled(MdDelete)<DeleteIconProps>`\n  color: #db3c3c;\n  height: 20px;\n  width: 20px;\n  cursor: pointer;\n  visibility: ${(props) =>\n    props.visible === 'visible' ? 'visible' : 'hidden'};\n`\n\n// Important: the MultiCreatableCustom component has a fixed width\nexport const SourceFieldsWrapper = styled.div<{ fullWidth?: boolean }>`\n  min-width: ${(props) => (props.fullWidth ? '100%' : '600px')};\n`\n\nexport const DestinationFieldsWrapper = styled.div`\n  width: 100%;\n  font-size: 0.9rem;\n  display: flex;\n`\n\nexport const StateIconErrorWrapper = styled.div`\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  flex-direction: column;\n  width: 70%;\n  margin: 0 0.4rem;\n  padding: 0;\n`\n\nexport const ErrorWrapper = styled.span`\n  height: 0;\n  white-space: nowrap;\n`\nexport const DestinationFieldLabel = styled.span`\n  // background-color: blue;\n  display: flex;\n  p {\n    width: 200px;\n    overflow-wrap: break-word;\n  }\n`\n","import styled from 'styled-components'\n\nexport const FormulaModalWrapper = styled.div`\n  // position: relative;\n  height: 100%;\n  font-size: 0.9rem;\n  width: 800px;\n  overflow-y: auto;\n  overflow-x: hidden;\n  // Hide scrollbar for Chrome, Safari, and newer Edge versions\n  &::-webkit-scrollbar {\n    display: none;\n  }\n\n  // Hide scrollbar for Firefox\n  scrollbar-width: none;\n`\n\nexport const FormulaModalHeader = styled.div`\n  display: flex;\n  flex-direction: row;\n  justify-content: space-between;\n  align-items: flex-start;\n  padding: 0;\n  margin: 0;\n  position: sticky;\n  top: 0;\n  left: 0;\n  right: 0;\n  background-color: white;\n  z-index: 250;\n\n  h3 {\n    font-size: 1.25rem;\n    padding-left: 1.5rem;\n    padding-top: 1.5rem;\n  }\n`\nexport const FormulaModalHero = styled.div`\n  padding: 0.6rem 1.5rem 0.6rem 1.5rem;\n  margin-bottom: 0;\n  h5 {\n    font-weight: 600;\n    margin-bottom: 0.5rem;\n    margin-top: 0;\n  }\n  small {\n    color: #525e6d;\n    font-size: 0.85rem;\n  }\n`\n\nexport const FormulaModalCloseIcon = styled.div`\n  font-size: 2rem;\n  background-color: #f8f8f8;\n  display: flex;\n  justify-content: center;\n  align-items: center;\n  padding: 1rem;\n  border-radius: 0 10%;\n  margin: 0;\n  cursor: pointer;\n`\n\nexport const FormulaModalBody = styled.div`\n  padding: 0 1.5rem;\n  min-height: 400px;\n  // height: 56%;\n  margin-bottom: 2rem;\n\n  h5 {\n    font-size: 0.85rem;\n    padding: 0 0 0 0;\n    margin: 1rem 0 0 0;\n  }\n  small {\n    color: #525e6d;\n    font-style: italic;\n    font-size: 0.78rem;\n  }\n`\n\nexport const FormulaModalFooter = styled.div`\n  display: flex;\n  align-items: center;\n  justify-content: flex-end;\n  height: 16%;\n  padding: 0 1.5rem 0 0;\n  margin: 0;\n  position: sticky;\n  bottom: 0;\n  right: 0;\n  left: 0;\n  background-color: white;\n  button {\n    width: 8.5rem;\n  }\n  gap: 1rem;\n`\n","import styled, { css } from 'styled-components'\n\nexport const TestMapperWrapper = styled.div`\n  width: 100%;\n  padding: 1rem 2rem;\n`\n\nexport const TestMapperField = styled.div`\n  display: grid;\n  grid-template-columns: 200px 1fr;\n  align-items: center;\n  padding: 1rem 0;\n`\n\nexport const TestMapperFieldLabel = styled.label<{ isRequired?: boolean }>`\n  position: relative;\n  font-weight: 600;\n  font-size: 0.9rem;\n  display: inline-block;\n  opacity: 0.75;\n\n  ${({ isRequired }) =>\n    isRequired\n      ? css`\n          &:after {\n            content: '*';\n            position: absolute;\n            color: #137fc0;\n            top: 0;\n            left: 100%;\n            font-size: 1.2rem;\n          }\n        `\n      : null}\n`\n","import styled from 'styled-components'\n\nconst Wrapper = styled.div`\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  padding-bottom: 1rem;\n`\n\nconst Header = styled.header`\n  width: 100%;\n  min-height: 35px;\n  padding: 0.5rem 2rem;\n  margin-bottom: 2rem;\n  background-color: #3fb1f3;\n  display: flex;\n  align-items: center;\n`\n\nconst Body = styled.div`\n  padding: 0 1rem;\n  width: 800px;\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  position: relative;\n`\n\nconst Title = styled.div`\n  text-align: center;\n  font-size: 1.125rem;\n  font-weight: 600;\n`\n\nconst SubTitle = styled.div`\n  font-size: 0.8rem;\n  text-align: center;\n  margin-bottom: 1.5rem;\n`\n\nconst Logo = styled.img`\n  max-width: 90px;\n  display: block;\n  margin-bottom: 1rem;\n`\n\nconst Disclaimer = styled.div`\n  display: grid;\n  grid-template-columns: auto 1fr;\n  gap: 1rem;\n  max-width: 520px;\n  color: #919eab;\n  font-size: 0.9rem;\n`\n\nconst InputGroup = styled.div<{\n  centered?: boolean\n}>`\n  margin-bottom: 1rem;\n  width: 100%;\n  text-align: ${({ centered }) => (centered ? 'center' : 'left')};\n`\n\nconst InfoSectionWrapper = styled.div`\n  padding-left: 1.5rem;\n  position: relative;\n\n  &:before {\n    content: '';\n    position: absolute;\n    left: 0;\n    border-right: 1px solid #cfc7c0;\n    top: 6%;\n    bottom: 6%;\n  }\n`\n\nconst InfoSectionTitle = styled.p`\n  color: #888888;\n  font-weight: 600;\n  font-size: 0.9rem;\n  margin-bottom: 1.2rem;\n`\n\nconst IconsWrapper = styled.div`\n  display: flex;\n  flex-direction: column;\n  gap: 0.6rem;\n`\n\nconst IconRow = styled.div`\n  display: flex;\n  align-items: center;\n  gap: 0.5rem;\n  cursor: pointer;\n\n  p {\n    margin: 0;\n    font-size: 0.9rem;\n    color: #41a6dc;\n    font-weight: 600;\n  }\n`\n\nconst IconCircle = styled.div`\n  background-color: dodgerblue;\n  color: #fff;\n  border-radius: 50%;\n  width: 45px;\n  height: 45px;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  cursor: pointer;\n`\n\nexport const StyledAuthorizationPopup = {\n  Wrapper,\n  Header,\n  Body,\n  Disclaimer,\n  Logo,\n  Title,\n  SubTitle,\n  InputGroup,\n  IconCircle,\n  IconsWrapper,\n  IconRow,\n  InfoSectionWrapper,\n  InfoSectionTitle,\n}\n\nexport const FormWrapper = styled.div`\n  width: 100%;\n\n  form {\n    /*border-right: 1px solid rgba(151, 151, 151, 0.5);*/\n    padding-right: 1.5rem;\n    flex: 1;\n  }\n\n  > * {\n    margin-bottom: 1rem;\n  }\n`\n\nexport const FormRow = styled.div`\n  display: flex;\n`\n\nexport const FormInputGroup = styled.div<{\n  centered?: boolean\n}>`\n  margin-bottom: 1rem;\n  width: 100%;\n  text-align: ${({ centered }) => (centered ? 'center' : 'left')};\n`\n\nexport const ActionButtonWrapper = styled.div`\n  position: relative;\n  width: 100%;\n  text-align: center;\n`\n\nexport const SubmitButtonWrapper = styled.div`\n  width: 290px;\n  padding-top: 2rem;\n  display: flex;\n  flex-direction: column;\n  margin: 0 auto 1rem;\n`\n\nexport const EditButtonWrapper = styled.div`\n  width: 100%;\n  display: flex;\n  justify-content: center;\n  margin-bottom: 1rem;\n  gap: 1rem;\n`\n\nexport const InputWrapper = styled.div<{ isVerified?: boolean }>`\n  display: ${({ isVerified }) => (isVerified ? 'block' : 'flex')};\n  justify-content: space-between;\n  align-items: center;\n  gap: 1rem;\n\n  div {\n    flex: 2;\n  }\n\n  button {\n    padding: 0;\n  }\n`\n","import styled from 'styled-components'\n\nexport const PopupInstanceDetector = styled.div`\n  position: absolute;\n  top: 0;\n  bottom: 0;\n  left: 0;\n  right: 0;\n  background: rgba(0, 0, 0, 0.8);\n  display: flex;\n  align-items: center;\n  flex-direction: column;\n  text-align: center;\n  padding: 2rem 2rem 0;\n  color: #fff;\n  border-radius: 0.4rem;\n  z-index: 1;\n`\n","import styled from 'styled-components'\nimport { getBridgeBuilderTypografy } from '@features/nbee/SimpleBridgeBuilderForm/styled'\n\nexport const ModalAddOptionCard = styled.div`\n  ${getBridgeBuilderTypografy};\n\n  padding: 1rem 2rem;\n\n  & > div {\n    margin-bottom: 1rem;\n  }\n`\n\nexport const ModalAddOptionErrorMessage = styled.div`\n  font-size: 0.8rem;\n  line-height: 1.1rem;\n  a {\n    word-break: break-all;\n  }\n`\n","import styled, { css } from 'styled-components'\n\nconst separatorWidth = '50px'\n\nexport const SimpleBridgeBuilderWrapper = styled.div`\n  display: flex;\n  width: 100%;\n  gap: 2rem;\n  flex-direction: column;\n  @media (min-width: 768px) {\n    flex-direction: row;\n    gap: 0;\n  }\n`\n\nexport const SimpleBridgeBuilderCardSeparator = styled.div`\n  padding-top: 2rem;\n  color: #c5c5c5;\n  text-align: center;\n  width: ${separatorWidth};\n  @media (max-width: 767px) {\n    width: 100%;\n    padding-top: 0;\n  }\n`\n\nexport const getBridgeBuilderTypografy = () => css`\n  h1,\n  h2 {\n    text-align: center;\n    color: #191919;\n  }\n\n  h1 {\n    font-size: 1.125rem;\n    margin-bottom: 0.5rem;\n  }\n\n  h2 {\n    font-size: 1rem;\n  }\n\n  /* synch this > subtitle */\n  h4 {\n    margin: 0 0 1rem;\n    font-weight: 400;\n    font-size: 0.8rem;\n    text-align: center;\n  }\n\n  label {\n    font-size: 0.8rem;\n  }\n`\n\nexport const SimpleBridgeBuilderCard = styled.div<{ hasError?: boolean }>`\n  height: 100%;\n  border: 1px solid\n    ${({ hasError, theme }) =>\n      hasError ? theme.input.error.borderColor : '#dfe4e8'};\n  border-radius: 4px;\n  padding: 1rem;\n  position: relative;\n\n  @media (min-width: 768px) {\n    flex: 1;\n    width: calc(50% - (${separatorWidth} / 2));\n  }\n\n  ${getBridgeBuilderTypografy};\n\n  & > div {\n    margin-bottom: 0.7rem;\n  }\n`\n","import styled from 'styled-components'\n\nexport const StepCompletedWrapper = styled.div`\n  text-align: center;\n  padding: 0;\n  max-width: 490px;\n  margin: 0 auto;\n`\n\nexport const StepImage = styled.img`\n  max-width: 350px;\n  margin: 0.3rem auto 0.5rem;\n`\n\nexport const BridgeSettingsWrapper = styled.div`\n  padding-top: 1rem;\n  display: flex;\n  justify-content: center;\n  // max-width: 640px;\n  margin: 0 auto;\n`\n","import styled from 'styled-components'\n\ninterface DropDownStyledProps {\n  isVisible: boolean\n  position: { x: number; y: number }\n}\n\ninterface DropDownItemStyledProps {\n  isHighlighted: boolean\n  index: number\n}\n\nexport const DropDownStyled = styled.div<DropDownStyledProps>`\n  position: fixed;\n  top: ${({ position }) => position.y}px;\n  left: ${({ position }) => position.x}px;\n  visibility: ${({ isVisible }) => (isVisible ? 'visible' : 'hidden')};\n  border: 1px solid #41a6dc;\n  border-radius: 4px;\n  background-color: #fff;\n  box-shadow: 1px 3px 6px 0 rgba(25, 25, 25, 0.2);\n  overflow-y: auto;\n  max-height: 200px;\n  min-width: 500px;\n  max-width: 60vw;\n`\n\nexport const DropDownItemStyled = styled.div<DropDownItemStyledProps>`\n  display: flex;\n  justify-content: space-between;\n  padding: 4px 8px;\n  cursor: pointer;\n  background-color: ${({ isHighlighted }) =>\n    isHighlighted ? '#3ea2da' : 'transparent'};\n  color: ${({ isHighlighted }) => (isHighlighted ? '#fff' : '#000')};\n`\n","import styled from 'styled-components'\n\nexport const Content = styled.div`\n  padding: 0;\n  text-align: center;\n\n  h2 {\n    width: 100%;\n    font-size: 1.1rem;\n    font-weight: 600;\n    color: #404040;\n  }\n\n  hr {\n    color: #979797;\n    width: 90%;\n    margin-top: 1.5rem;\n  }\n\n  p {\n    width: 90%;\n    color: #404040;\n    font-weight: 400;\n    font-size: 1rem;\n    margin: 1.3rem auto 3rem;\n  }\n\n  img {\n    width: 14rem;\n  }\n`\n\nexport const ButtonWrapper = styled.div`\n  display: flex;\n  justify-content: center;\n  gap: 2rem;\n  margin-bottom: 1rem;\n\n  button {\n    width: 14rem;\n    padding: 0.9rem 1rem;\n  }\n`\n","import styled from 'styled-components'\n\nexport const Wrapper = styled.div`\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  width: 100%;\n  padding: 1rem;\n  border-radius: 8px;\n  background: rgba(217, 222, 225, 0.15);\n  margin: 4rem 0;\n  gap: 2rem;\n\n  & > div {\n    flex: 1;\n  }\n\n  ul {\n    font-size: 0.875rem;\n    font-weight: 600;\n    line-height: 18px;\n\n    li {\n      margin-bottom: 0.5rem;\n    }\n  }\n`\n\nexport const PlanType = styled.p`\n  text-transform: uppercase;\n  font-size: smaller;\n  letter-spacing: 0.7px;\n  font-weight: 600;\n  color: #41a6dc;\n  margin: 0 0 0.5rem 0;\n`\n\nexport const PlanName = styled.h2`\n  font-size: 1.7rem;\n  color: #1f1f1f;\n  margin: 0;\n`\n\nexport const PriceStyled = styled.div`\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  font-weight: 600;\n\n  span {\n    opacity: 0.5;\n    margin-right: 2rem;\n    margin-bottom: 1.5rem;\n    position: absolute;\n    font-size: large;\n    top: -5px;\n    left: -15px;\n  }\n\n  h2 {\n    position: relative;\n    margin: 0 0 10px 0;\n    font-weight: bold;\n  }\n`\n","import styled from 'styled-components'\n\nexport const ContainerStyled = styled.div`\n  display: flex;\n  align-items: center;\n  flex-direction: column;\n  width: 100%;\n  max-width: 400px;\n  text-align: center;\n`\nexport const IconWrapperStyled = styled.div`\n  display: flex;\n  justify-content: center;\n  align-items: center;\n  flex: 2;\n\n  span {\n    flex: 1;\n    border-bottom: 3px dashed #fff;\n  }\n`\n\nexport const ImgWrapperStyled = styled.div`\n  display: flex;\n  justify-content: space-evenly;\n  align-items: center;\n  width: 100%;\n  margin-bottom: 2rem;\n`\n\nexport const ImgBoxStyled = styled.div`\n  position: relative;\n  display: flex;\n  flex-direction: column;\n  justify-content: center;\n  align-items: center;\n  background-color: #fff;\n  border-radius: 5px;\n  padding: 0.8rem 0.8rem;\n  width: 9rem;\n  height: 8rem;\n\n  img {\n    width: 3rem;\n    height: 3rem;\n    margin-bottom: 0.5rem;\n    object-fit: contain;\n  }\n`\n\nexport const HeaderTextStyled = styled.p`\n  font-size: 1.7rem;\n  margin-bottom: 1.6rem;\n  color: #fff;\n  font-weight: 700;\n`\n","import styled from 'styled-components'\n\nexport const ContentWrapperStyled = styled.div`\n  display: flex;\n  align-items: center;\n  flex-direction: column;\n  max-width: 540px;\n  width: 100%;\n  text-align: center;\n  img {\n    max-width: 100%;\n  }\n`\n\nexport const HeaderTextStyled = styled.p`\n  font-size: 1.7rem;\n  color: #fff;\n  margin: 0;\n  font-weight: 700;\n`\n\nexport const SubTextStyled = styled.p`\n  font-size: 1.5rem;\n  color: #fff;\n  margin: 0;\n`\n","import styled, { css } from 'styled-components'\nimport { Props } from './index'\n\nexport const SignupFormWrapper = styled.div<Pick<Props, 'isAppSumo'>>`\n  max-width: 540px;\n  border-radius: 9px;\n  background-color: #fff;\n  position: relative;\n  padding: ${({ isAppSumo }) => (isAppSumo ? '0 2rem 3rem' : '3rem 2rem')};\n  min-height: 590px;\n\n  @media (min-width: 768px) {\n    padding: ${({ isAppSumo }) => (isAppSumo ? '0 4rem 1rem' : '1rem 4rem')};\n    height: ${({ isAppSumo }) => (isAppSumo ? 'auto' : '85vh')};\n    max-height: ${({ isAppSumo }) => (isAppSumo ? 'auto' : '700px')};\n    display: flex;\n    align-items: center;\n  }\n  @media (min-width: 1070px) {\n    padding: 1rem 5rem;\n    padding: ${({ isAppSumo }) => (isAppSumo ? '0 5rem 1rem' : '1rem 5rem')};\n  }\n\n  label {\n    color: #273649;\n    font-weight: 600;\n    font-size: 1rem;\n  }\n\n  input,\n  select {\n    background-color: #f1f1f1 !important;\n    border-radius: 0.375rem;\n    &::placeholder {\n      color: #77818d;\n    }\n  }\n`\n\nexport const FormRow = styled.div`\n  display: flex;\n  gap: 0.9rem;\n  align-items: flex-start;\n  @media (min-height: 740px) {\n    margin-bottom: 1rem;\n  }\n`\n\nexport const TitleStyled = styled.p`\n  margin-bottom: 1rem;\n  @media (min-height: 740px) {\n    margin-bottom: 2.4rem;\n  }\n  font-weight: 600;\n  font-size: 1.7rem;\n  color: #273649;\n  text-align: center;\n`\n\nexport const HeaderTop = styled.div`\n  width: 100%;\n  padding: 1rem 0;\n  display: flex;\n  justify-content: center;\n  align-items: center;\n  margin-bottom: 1rem;\n\n  &::after {\n    position: absolute;\n    margin-top: 0.5rem;\n    left: 0;\n    content: ' ';\n    display: block;\n    height: 40px;\n    border-bottom: 1px solid #dfe4e8;\n    width: 100%;\n  }\n`\n\nexport const ContentWrapper = styled.div<Pick<Props, 'isAppSumo'>>`\n  ${({ isAppSumo }) =>\n    isAppSumo\n      ? css`\n          height: 100%;\n        `\n      : ''}\n`\n\nexport const SocialProvidersWrapper = styled.div`\n  display: flex;\n  flex-direction: column;\n  gap: 0.5rem;\n`\n\nexport const SeparatorStyled = styled.div`\n  display: flex;\n  align-items: center;\n  padding: 0.8rem 0;\n  @media (min-height: 740px) {\n    padding: 1.4rem 0;\n  }\n\n  hr {\n    flex: 1;\n  }\n  span {\n    padding: 0 1rem;\n  }\n`\n\nexport const FooterStyled = styled.div<Pick<Props, 'isAppSumo'>>`\n  display: flex;\n  align-items: center;\n  padding: 0 0.8rem;\n  justify-content: space-between;\n  margin-top: ${({ isAppSumo }) => (isAppSumo ? '0' : '1rem')};\n\n  flex-wrap: wrap;\n  gap: 1rem;\n  @media (min-width: 768px) {\n    gap: 0;\n    flex-wrap: nowrap;\n  }\n`\n\nexport const TermsText = styled.p`\n  margin: 0;\n  padding: 0.2rem 0 0;\n  font-size: 12px;\n\n  a {\n    color: #41a6dc !important;\n    &:hover {\n      text-decoration: underline;\n    }\n  }\n`\n","import styled, { css } from 'styled-components'\nimport backgroundPatternImage from '@assets/images/pattern-LB.svg'\nimport { mediaIframeOnly, mediaIframeUp } from '@app/styles/iframeUtils'\n\nconst embeddableMaxWidth = '801px'\n\nexport const PageEditorStyled = styled.div`\n  @media (min-width: ${embeddableMaxWidth}) {\n    /* background-color: rgba(65, 166, 220, 0.1); */\n    position: relative;\n    min-height: 100vh;\n    //padding-bottom: 3em;\n\n    &:before {\n      content: '';\n      background: url(${backgroundPatternImage}), #9f9f9f;\n      opacity: 0.05;\n      background-size: 250px;\n      position: absolute;\n      top: 0;\n      left: 0;\n      right: 0;\n      bottom: 0;\n      z-index: -1;\n    }\n  }\n`\nexport const StepBarContainer = styled.div`\n  display: none;\n\n  // we target from 801 up\n  ${mediaIframeUp(css`\n    text-align: center;\n    width: 100%;\n    display: flex;\n    margin: 2em auto;\n    justify-content: center;\n  `)};\n\n  @media (max-height: 630px) {\n    margin: 1em auto;\n  }\n`\nexport const PanelContainer = styled.div`\n  width: 100%;\n  min-width: 430px;\n  margin: 0 auto;\n\n  ${mediaIframeOnly(css`\n    width: 100%;\n  `)};\n\n  // we target from 801 up\n  ${mediaIframeUp(css`\n    min-width: ${(props) => props.theme.container.medium};\n    max-width: 1080px;\n    padding: 0 2rem;\n  `)};\n`\nexport const PageTitle = styled.h2`\n  display: none;\n  @media (min-width: ${embeddableMaxWidth}) {\n    display: block;\n    font-weight: 600;\n    padding-bottom: 2rem;\n  }\n`\n"],"names":["getSocialProviderBaseStyle","$size","ButtonStyled","$fluid","disabled","$loading","$variant","theme","button","facebook","backgroundColor","color","backgroundColorHover","tiktok","primary","secondary","link","$minWidth","$hasIcon","ButtonLoadingHiddenChildren","ButtonLoadingWrapper","ButtonLoadingSpinner","EditableIconStatus","props","input","error","borderColor","EditableTextStyled","font","family","IconsWrapperStyled","IconButtonStyled","MessageStyled","$status","ProgressDivStyled","$progress","$theme","StyledSkeleton","width","height","marginBottom","marginTop","DropdownWrapper","DropdownMenuStyled","$isOpen","zIndex","dropdown","$direction","$lineSeparatorMenuItem","DropdownItemStyled","isActive","isDisabled","FastAppSurveyWrapperStyled","ContainerStyled","BrandLogoStyled","HeaderStyled","IconWrapperStyled","LogoStyled","FormStyled","ButtonWrapperStyled","LoaderWrapperStyled","CheckboxStyled","getInputStatusStyle","success","default","InputStyled","$hasMargin","background","placeholder","InputSlot","$slot","InputWrapperStyled","SelectStyled","SelectWrapper","customStyles","menuList","style","selectProps","isFormulas","padding","maxHeight","overflowX","overflowY","addActionClick","label","option","menu","boxShadow","position","paddingTop","paddingBottom","borderRadius","top","border","fontFamily","container","fontSize","pointerEvents","control","minHeight","cursor","value","logoUri","left","greyStyles","SmartSelectTooltipInfoMessage","SmartSelectWrapper","isLoading","StyledOptionWrapper","hasPadding","isFocused","hasHoverEffect","isSelected","StyledOptionImageWrapper","StyledOptionValueWrapper","StyledOptionWithExtraLabel","StyledOptionText","emailValidation","StyledOptionSecondaryLabel","StyledControlIconWrapper","AddActionClickButton","AddNewSelectOptionButton","VerifyContentWrapper","FloatingLabelStyled","isFloating","DropDownIconsWrapperStyled","isMenuOpen","isEmailValidation","LabelStyled","$disabled","multiValue","maxWidth","multiValueLabel","isOptionDisabled","StyledCustomMultiValueContainer","fieldType","chips","closeIconColorHover","StyledCustomMultiValueLabel","StyledCustomMultiValueRemoveContainer","SourceIcon","RemoveIcon","StyledCustomMultiValueHoverContainer","HoverEditIcon","HoverRemoveIcon","HoverDivider","StyledMenuTabContainer","StyledMenuTab","LockIcon","StyledCustomOptionContainer","StyledCustomOptionFormulaContainer","StyledCustomOptionFormulaLabel","StyledCustomOptionFormulaDescription","StyledCustomOptionSourceContainer","StyledCustomOptionSourceLabel","StyledCustomOptionPicklistLabel","TextareaWrapper","TextareaStyled","FormikInputSmartSelectStyled","secondaryStyles","InputWrapper","LabelWrapper","InputField","IconWrapper","CopyText","PanelStyled","extraPadding","PanelWrapper","PanelHead","PanelBody","PanelBodyInner","PanelFooter","panelFooter","PanelFooterContainer","$showTopSeparator","PanelFooterWrapper","PanelFooterLeft","PanelFooterRight","PanelPopupStyled","PanelPopupWrapper","PanelPopupHeader","PanelPopupButtonClose","PanelPopupBody","PanelPopupContent","PanelPopupImageWrapper","StatusBarBridgeWrapper","StatusBarStatus","StatusBarMessage","BarCenter","BarLeft","BarRight","StatusBarBridgeStyled","CloseIcon","StepBarContainer","StepBarItemStyled","TopbarStyled","TopbarWrapper","variant","hideOnEmbeddable","ButtonGoBackStyled","FooterStyled","InputFieldStyled","$isMatch","BillingDetailsStyled","ButtonWrapper","Wrapper","CustomInputField","WrapperInputCheckbox","FormInputGroup","twoColumns","stripeElementOptions","base","lineHeight","CardFieldsWrapper","CreditCardRow","CardItemNumberWrapper","CardBoxInputGroup","hasFocus","CardFieldsContainer","CheckoutPrePrice","CheckoutTrialLimitsDisclaimer","CeckoutTotalPrice","PanelImageStyled","PanelBodyStyled","isPopupOpen","PanelBodyInnerStyled","IntegrationLogo","IntegrationPanelWrapper","IntegrationLogoWrapper","AccountCreationFormWrapperStyled","AccountCreationInputGroup","ButtonGroup","IntegrationPanelStyled","IntegrationPanelHead","PanelHeadRight","PanelHeadRightLink","PanelHeadLeft","PanelHeadTitle","green","IntegrationPanelFooter","IntegrationPanelBody","$open","AddFilterButtonWrapper","FilterIcon","hasFilters","FilterModalWrapper","FilterModalHeader","FilterModalCloseIcon","FilterModalBody","FilterModalFooter","EditIcon","HasFilterMessage","HasFilterMessageTitle","ButtonStyledLabel","StarterLabel","small","FilterRowStyled","FieldGroup","FieldRow","EmailReceiptStyled","SettingsFieldsContainer","SaveButtonWrapper","TitleWrapper","IconLockWrapper","RowWrapper","showWelcomeMessage","RowStyled","RowFeedback","BinIconWrapper","DeleteIcon","visible","SourceFieldsWrapper","fullWidth","DestinationFieldsWrapper","StateIconErrorWrapper","ErrorWrapper","DestinationFieldLabel","FormulaModalWrapper","FormulaModalHeader","FormulaModalHero","FormulaModalCloseIcon","FormulaModalBody","FormulaModalFooter","TestMapperWrapper","TestMapperField","TestMapperFieldLabel","isRequired","Header","Body","Title","SubTitle","Logo","Disclaimer","InputGroup","centered","InfoSectionWrapper","InfoSectionTitle","IconsWrapper","IconRow","StyledAuthorizationPopup","IconCircle","FormWrapper","FormRow","ActionButtonWrapper","SubmitButtonWrapper","EditButtonWrapper","isVerified","PopupInstanceDetector","ModalAddOptionCard","ModalAddOptionErrorMessage","separatorWidth","SimpleBridgeBuilderWrapper","SimpleBridgeBuilderCardSeparator","getBridgeBuilderTypografy","SimpleBridgeBuilderCard","hasError","StepCompletedWrapper","StepImage","DropDownStyled","y","x","isVisible","DropDownItemStyled","isHighlighted","Content","PlanType","PlanName","PriceStyled","ImgWrapperStyled","ImgBoxStyled","HeaderTextStyled","ContentWrapperStyled","SubTextStyled","SignupFormWrapper","isAppSumo","TitleStyled","HeaderTop","ContentWrapper","SocialProvidersWrapper","SeparatorStyled","TermsText","embeddableMaxWidth","PageEditorStyled","PanelContainer","medium","PageTitle"],"sourceRoot":""}