polished.esm.js 121 KB

12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364656667686970717273747576777879808182838485868788899091929394959697989910010110210310410510610710810911011111211311411511611711811912012112212312412512612712812913013113213313413513613713813914014114214314414514614714814915015115215315415515615715815916016116216316416516616716816917017117217317417517617717817918018118218318418518618718818919019119219319419519619719819920020120220320420520620720820921021121221321421521621721821922022122222322422522622722822923023123223323423523623723823924024124224324424524624724824925025125225325425525625725825926026126226326426526626726826927027127227327427527627727827928028128228328428528628728828929029129229329429529629729829930030130230330430530630730830931031131231331431531631731831932032132232332432532632732832933033133233333433533633733833934034134234334434534634734834935035135235335435535635735835936036136236336436536636736836937037137237337437537637737837938038138238338438538638738838939039139239339439539639739839940040140240340440540640740840941041141241341441541641741841942042142242342442542642742842943043143243343443543643743843944044144244344444544644744844945045145245345445545645745845946046146246346446546646746846947047147247347447547647747847948048148248348448548648748848949049149249349449549649749849950050150250350450550650750850951051151251351451551651751851952052152252352452552652752852953053153253353453553653753853954054154254354454554654754854955055155255355455555655755855956056156256356456556656756856957057157257357457557657757857958058158258358458558658758858959059159259359459559659759859960060160260360460560660760860961061161261361461561661761861962062162262362462562662762862963063163263363463563663763863964064164264364464564664764864965065165265365465565665765865966066166266366466566666766866967067167267367467567667767867968068168268368468568668768868969069169269369469569669769869970070170270370470570670770870971071171271371471571671771871972072172272372472572672772872973073173273373473573673773873974074174274374474574674774874975075175275375475575675775875976076176276376476576676776876977077177277377477577677777877978078178278378478578678778878979079179279379479579679779879980080180280380480580680780880981081181281381481581681781881982082182282382482582682782882983083183283383483583683783883984084184284384484584684784884985085185285385485585685785885986086186286386486586686786886987087187287387487587687787887988088188288388488588688788888989089189289389489589689789889990090190290390490590690790890991091191291391491591691791891992092192292392492592692792892993093193293393493593693793893994094194294394494594694794894995095195295395495595695795895996096196296396496596696796896997097197297397497597697797897998098198298398498598698798898999099199299399499599699799899910001001100210031004100510061007100810091010101110121013101410151016101710181019102010211022102310241025102610271028102910301031103210331034103510361037103810391040104110421043104410451046104710481049105010511052105310541055105610571058105910601061106210631064106510661067106810691070107110721073107410751076107710781079108010811082108310841085108610871088108910901091109210931094109510961097109810991100110111021103110411051106110711081109111011111112111311141115111611171118111911201121112211231124112511261127112811291130113111321133113411351136113711381139114011411142114311441145114611471148114911501151115211531154115511561157115811591160116111621163116411651166116711681169117011711172117311741175117611771178117911801181118211831184118511861187118811891190119111921193119411951196119711981199120012011202120312041205120612071208120912101211121212131214121512161217121812191220122112221223122412251226122712281229123012311232123312341235123612371238123912401241124212431244124512461247124812491250125112521253125412551256125712581259126012611262126312641265126612671268126912701271127212731274127512761277127812791280128112821283128412851286128712881289129012911292129312941295129612971298129913001301130213031304130513061307130813091310131113121313131413151316131713181319132013211322132313241325132613271328132913301331133213331334133513361337133813391340134113421343134413451346134713481349135013511352135313541355135613571358135913601361136213631364136513661367136813691370137113721373137413751376137713781379138013811382138313841385138613871388138913901391139213931394139513961397139813991400140114021403140414051406140714081409141014111412141314141415141614171418141914201421142214231424142514261427142814291430143114321433143414351436143714381439144014411442144314441445144614471448144914501451145214531454145514561457145814591460146114621463146414651466146714681469147014711472147314741475147614771478147914801481148214831484148514861487148814891490149114921493149414951496149714981499150015011502150315041505150615071508150915101511151215131514151515161517151815191520152115221523152415251526152715281529153015311532153315341535153615371538153915401541154215431544154515461547154815491550155115521553155415551556155715581559156015611562156315641565156615671568156915701571157215731574157515761577157815791580158115821583158415851586158715881589159015911592159315941595159615971598159916001601160216031604160516061607160816091610161116121613161416151616161716181619162016211622162316241625162616271628162916301631163216331634163516361637163816391640164116421643164416451646164716481649165016511652165316541655165616571658165916601661166216631664166516661667166816691670167116721673167416751676167716781679168016811682168316841685168616871688168916901691169216931694169516961697169816991700170117021703170417051706170717081709171017111712171317141715171617171718171917201721172217231724172517261727172817291730173117321733173417351736173717381739174017411742174317441745174617471748174917501751175217531754175517561757175817591760176117621763176417651766176717681769177017711772177317741775177617771778177917801781178217831784178517861787178817891790179117921793179417951796179717981799180018011802180318041805180618071808180918101811181218131814181518161817181818191820182118221823182418251826182718281829183018311832183318341835183618371838183918401841184218431844184518461847184818491850185118521853185418551856185718581859186018611862186318641865186618671868186918701871187218731874187518761877187818791880188118821883188418851886188718881889189018911892189318941895189618971898189919001901190219031904190519061907190819091910191119121913191419151916191719181919192019211922192319241925192619271928192919301931193219331934193519361937193819391940194119421943194419451946194719481949195019511952195319541955195619571958195919601961196219631964196519661967196819691970197119721973197419751976197719781979198019811982198319841985198619871988198919901991199219931994199519961997199819992000200120022003200420052006200720082009201020112012201320142015201620172018201920202021202220232024202520262027202820292030203120322033203420352036203720382039204020412042204320442045204620472048204920502051205220532054205520562057205820592060206120622063206420652066206720682069207020712072207320742075207620772078207920802081208220832084208520862087208820892090209120922093209420952096209720982099210021012102210321042105210621072108210921102111211221132114211521162117211821192120212121222123212421252126212721282129213021312132213321342135213621372138213921402141214221432144214521462147214821492150215121522153215421552156215721582159216021612162216321642165216621672168216921702171217221732174217521762177217821792180218121822183218421852186218721882189219021912192219321942195219621972198219922002201220222032204220522062207220822092210221122122213221422152216221722182219222022212222222322242225222622272228222922302231223222332234223522362237223822392240224122422243224422452246224722482249225022512252225322542255225622572258225922602261226222632264226522662267226822692270227122722273227422752276227722782279228022812282228322842285228622872288228922902291229222932294229522962297229822992300230123022303230423052306230723082309231023112312231323142315231623172318231923202321232223232324232523262327232823292330233123322333233423352336233723382339234023412342234323442345234623472348234923502351235223532354235523562357235823592360236123622363236423652366236723682369237023712372237323742375237623772378237923802381238223832384238523862387238823892390239123922393239423952396239723982399240024012402240324042405240624072408240924102411241224132414241524162417241824192420242124222423242424252426242724282429243024312432243324342435243624372438243924402441244224432444244524462447244824492450245124522453245424552456245724582459246024612462246324642465246624672468246924702471247224732474247524762477247824792480248124822483248424852486248724882489249024912492249324942495249624972498249925002501250225032504250525062507250825092510251125122513251425152516251725182519252025212522252325242525252625272528252925302531253225332534253525362537253825392540254125422543254425452546254725482549255025512552255325542555255625572558255925602561256225632564256525662567256825692570257125722573257425752576257725782579258025812582258325842585258625872588258925902591259225932594259525962597259825992600260126022603260426052606260726082609261026112612261326142615261626172618261926202621262226232624262526262627262826292630263126322633263426352636263726382639264026412642264326442645264626472648264926502651265226532654265526562657265826592660266126622663266426652666266726682669267026712672267326742675267626772678267926802681268226832684268526862687268826892690269126922693269426952696269726982699270027012702270327042705270627072708270927102711271227132714271527162717271827192720272127222723272427252726272727282729273027312732273327342735273627372738273927402741274227432744274527462747274827492750275127522753275427552756275727582759276027612762276327642765276627672768276927702771277227732774277527762777277827792780278127822783278427852786278727882789279027912792279327942795279627972798279928002801280228032804280528062807280828092810281128122813281428152816281728182819282028212822282328242825282628272828282928302831283228332834283528362837283828392840284128422843284428452846284728482849285028512852285328542855285628572858285928602861286228632864286528662867286828692870287128722873287428752876287728782879288028812882288328842885288628872888288928902891289228932894289528962897289828992900290129022903290429052906290729082909291029112912291329142915291629172918291929202921292229232924292529262927292829292930293129322933293429352936293729382939294029412942294329442945294629472948294929502951295229532954295529562957295829592960296129622963296429652966296729682969297029712972297329742975297629772978297929802981298229832984298529862987298829892990299129922993299429952996299729982999300030013002300330043005300630073008300930103011301230133014301530163017301830193020302130223023302430253026302730283029303030313032303330343035303630373038303930403041304230433044304530463047304830493050305130523053305430553056305730583059306030613062306330643065306630673068306930703071307230733074307530763077307830793080308130823083308430853086308730883089309030913092309330943095309630973098309931003101310231033104310531063107310831093110311131123113311431153116311731183119312031213122312331243125312631273128312931303131313231333134313531363137313831393140314131423143314431453146314731483149315031513152315331543155315631573158315931603161316231633164316531663167316831693170317131723173317431753176317731783179318031813182318331843185318631873188318931903191319231933194319531963197319831993200320132023203320432053206320732083209321032113212321332143215321632173218321932203221322232233224322532263227322832293230323132323233323432353236323732383239324032413242324332443245324632473248324932503251325232533254325532563257325832593260326132623263326432653266326732683269327032713272327332743275327632773278327932803281328232833284328532863287328832893290329132923293329432953296329732983299330033013302330333043305330633073308330933103311331233133314331533163317331833193320332133223323332433253326332733283329333033313332333333343335333633373338333933403341334233433344334533463347334833493350335133523353335433553356335733583359336033613362336333643365336633673368336933703371337233733374337533763377337833793380338133823383338433853386338733883389339033913392339333943395339633973398339934003401340234033404340534063407340834093410341134123413341434153416341734183419342034213422342334243425342634273428342934303431343234333434343534363437343834393440344134423443344434453446344734483449345034513452345334543455345634573458345934603461346234633464346534663467346834693470347134723473347434753476347734783479348034813482348334843485348634873488348934903491349234933494349534963497349834993500350135023503350435053506350735083509351035113512351335143515351635173518351935203521352235233524352535263527352835293530353135323533353435353536353735383539354035413542354335443545354635473548354935503551355235533554355535563557355835593560356135623563356435653566356735683569357035713572357335743575357635773578357935803581358235833584358535863587358835893590359135923593359435953596359735983599360036013602360336043605360636073608360936103611361236133614361536163617361836193620362136223623362436253626362736283629363036313632363336343635363636373638363936403641364236433644364536463647364836493650365136523653365436553656365736583659366036613662366336643665366636673668366936703671367236733674367536763677367836793680368136823683368436853686368736883689369036913692369336943695369636973698369937003701370237033704370537063707370837093710371137123713371437153716371737183719372037213722372337243725372637273728372937303731373237333734373537363737373837393740374137423743374437453746374737483749375037513752375337543755375637573758375937603761376237633764376537663767376837693770377137723773377437753776377737783779378037813782378337843785378637873788378937903791379237933794379537963797379837993800380138023803380438053806380738083809381038113812381338143815381638173818381938203821382238233824382538263827382838293830383138323833383438353836383738383839384038413842384338443845384638473848384938503851385238533854385538563857385838593860386138623863386438653866386738683869387038713872387338743875387638773878387938803881388238833884388538863887388838893890389138923893389438953896389738983899390039013902390339043905390639073908390939103911391239133914391539163917391839193920392139223923392439253926392739283929393039313932393339343935393639373938393939403941394239433944394539463947394839493950395139523953395439553956
  1. import _extends from '@babel/runtime/helpers/esm/extends';
  2. import _assertThisInitialized from '@babel/runtime/helpers/esm/assertThisInitialized';
  3. import _inheritsLoose from '@babel/runtime/helpers/esm/inheritsLoose';
  4. import _wrapNativeSuper from '@babel/runtime/helpers/esm/wrapNativeSuper';
  5. import _taggedTemplateLiteralLoose from '@babel/runtime/helpers/esm/taggedTemplateLiteralLoose';
  6. function last() {
  7. var _ref;
  8. return _ref = arguments.length - 1, _ref < 0 || arguments.length <= _ref ? undefined : arguments[_ref];
  9. }
  10. function negation(a) {
  11. return -a;
  12. }
  13. function addition(a, b) {
  14. return a + b;
  15. }
  16. function subtraction(a, b) {
  17. return a - b;
  18. }
  19. function multiplication(a, b) {
  20. return a * b;
  21. }
  22. function division(a, b) {
  23. return a / b;
  24. }
  25. function max() {
  26. return Math.max.apply(Math, arguments);
  27. }
  28. function min() {
  29. return Math.min.apply(Math, arguments);
  30. }
  31. function comma() {
  32. return Array.of.apply(Array, arguments);
  33. }
  34. var defaultSymbols = {
  35. symbols: {
  36. '*': {
  37. infix: {
  38. symbol: '*',
  39. f: multiplication,
  40. notation: 'infix',
  41. precedence: 4,
  42. rightToLeft: 0,
  43. argCount: 2
  44. },
  45. symbol: '*',
  46. regSymbol: '\\*'
  47. },
  48. '/': {
  49. infix: {
  50. symbol: '/',
  51. f: division,
  52. notation: 'infix',
  53. precedence: 4,
  54. rightToLeft: 0,
  55. argCount: 2
  56. },
  57. symbol: '/',
  58. regSymbol: '/'
  59. },
  60. '+': {
  61. infix: {
  62. symbol: '+',
  63. f: addition,
  64. notation: 'infix',
  65. precedence: 2,
  66. rightToLeft: 0,
  67. argCount: 2
  68. },
  69. prefix: {
  70. symbol: '+',
  71. f: last,
  72. notation: 'prefix',
  73. precedence: 3,
  74. rightToLeft: 0,
  75. argCount: 1
  76. },
  77. symbol: '+',
  78. regSymbol: '\\+'
  79. },
  80. '-': {
  81. infix: {
  82. symbol: '-',
  83. f: subtraction,
  84. notation: 'infix',
  85. precedence: 2,
  86. rightToLeft: 0,
  87. argCount: 2
  88. },
  89. prefix: {
  90. symbol: '-',
  91. f: negation,
  92. notation: 'prefix',
  93. precedence: 3,
  94. rightToLeft: 0,
  95. argCount: 1
  96. },
  97. symbol: '-',
  98. regSymbol: '-'
  99. },
  100. ',': {
  101. infix: {
  102. symbol: ',',
  103. f: comma,
  104. notation: 'infix',
  105. precedence: 1,
  106. rightToLeft: 0,
  107. argCount: 2
  108. },
  109. symbol: ',',
  110. regSymbol: ','
  111. },
  112. '(': {
  113. prefix: {
  114. symbol: '(',
  115. f: last,
  116. notation: 'prefix',
  117. precedence: 0,
  118. rightToLeft: 0,
  119. argCount: 1
  120. },
  121. symbol: '(',
  122. regSymbol: '\\('
  123. },
  124. ')': {
  125. postfix: {
  126. symbol: ')',
  127. f: undefined,
  128. notation: 'postfix',
  129. precedence: 0,
  130. rightToLeft: 0,
  131. argCount: 1
  132. },
  133. symbol: ')',
  134. regSymbol: '\\)'
  135. },
  136. min: {
  137. func: {
  138. symbol: 'min',
  139. f: min,
  140. notation: 'func',
  141. precedence: 0,
  142. rightToLeft: 0,
  143. argCount: 1
  144. },
  145. symbol: 'min',
  146. regSymbol: 'min\\b'
  147. },
  148. max: {
  149. func: {
  150. symbol: 'max',
  151. f: max,
  152. notation: 'func',
  153. precedence: 0,
  154. rightToLeft: 0,
  155. argCount: 1
  156. },
  157. symbol: 'max',
  158. regSymbol: 'max\\b'
  159. }
  160. }
  161. };
  162. var defaultSymbolMap = defaultSymbols;
  163. // based on https://github.com/styled-components/styled-components/blob/fcf6f3804c57a14dd7984dfab7bc06ee2edca044/src/utils/error.js
  164. /**
  165. * Parse errors.md and turn it into a simple hash of code: message
  166. * @private
  167. */
  168. var ERRORS = {
  169. "1": "Passed invalid arguments to hsl, please pass multiple numbers e.g. hsl(360, 0.75, 0.4) or an object e.g. rgb({ hue: 255, saturation: 0.4, lightness: 0.75 }).\n\n",
  170. "2": "Passed invalid arguments to hsla, please pass multiple numbers e.g. hsla(360, 0.75, 0.4, 0.7) or an object e.g. rgb({ hue: 255, saturation: 0.4, lightness: 0.75, alpha: 0.7 }).\n\n",
  171. "3": "Passed an incorrect argument to a color function, please pass a string representation of a color.\n\n",
  172. "4": "Couldn't generate valid rgb string from %s, it returned %s.\n\n",
  173. "5": "Couldn't parse the color string. Please provide the color as a string in hex, rgb, rgba, hsl or hsla notation.\n\n",
  174. "6": "Passed invalid arguments to rgb, please pass multiple numbers e.g. rgb(255, 205, 100) or an object e.g. rgb({ red: 255, green: 205, blue: 100 }).\n\n",
  175. "7": "Passed invalid arguments to rgba, please pass multiple numbers e.g. rgb(255, 205, 100, 0.75) or an object e.g. rgb({ red: 255, green: 205, blue: 100, alpha: 0.75 }).\n\n",
  176. "8": "Passed invalid argument to toColorString, please pass a RgbColor, RgbaColor, HslColor or HslaColor object.\n\n",
  177. "9": "Please provide a number of steps to the modularScale helper.\n\n",
  178. "10": "Please pass a number or one of the predefined scales to the modularScale helper as the ratio.\n\n",
  179. "11": "Invalid value passed as base to modularScale, expected number or em string but got \"%s\"\n\n",
  180. "12": "Expected a string ending in \"px\" or a number passed as the first argument to %s(), got \"%s\" instead.\n\n",
  181. "13": "Expected a string ending in \"px\" or a number passed as the second argument to %s(), got \"%s\" instead.\n\n",
  182. "14": "Passed invalid pixel value (\"%s\") to %s(), please pass a value like \"12px\" or 12.\n\n",
  183. "15": "Passed invalid base value (\"%s\") to %s(), please pass a value like \"12px\" or 12.\n\n",
  184. "16": "You must provide a template to this method.\n\n",
  185. "17": "You passed an unsupported selector state to this method.\n\n",
  186. "18": "minScreen and maxScreen must be provided as stringified numbers with the same units.\n\n",
  187. "19": "fromSize and toSize must be provided as stringified numbers with the same units.\n\n",
  188. "20": "expects either an array of objects or a single object with the properties prop, fromSize, and toSize.\n\n",
  189. "21": "expects the objects in the first argument array to have the properties `prop`, `fromSize`, and `toSize`.\n\n",
  190. "22": "expects the first argument object to have the properties `prop`, `fromSize`, and `toSize`.\n\n",
  191. "23": "fontFace expects a name of a font-family.\n\n",
  192. "24": "fontFace expects either the path to the font file(s) or a name of a local copy.\n\n",
  193. "25": "fontFace expects localFonts to be an array.\n\n",
  194. "26": "fontFace expects fileFormats to be an array.\n\n",
  195. "27": "radialGradient requries at least 2 color-stops to properly render.\n\n",
  196. "28": "Please supply a filename to retinaImage() as the first argument.\n\n",
  197. "29": "Passed invalid argument to triangle, please pass correct pointingDirection e.g. 'right'.\n\n",
  198. "30": "Passed an invalid value to `height` or `width`. Please provide a pixel based unit.\n\n",
  199. "31": "The animation shorthand only takes 8 arguments. See the specification for more information: http://mdn.io/animation\n\n",
  200. "32": "To pass multiple animations please supply them in arrays, e.g. animation(['rotate', '2s'], ['move', '1s'])\nTo pass a single animation please supply them in simple values, e.g. animation('rotate', '2s')\n\n",
  201. "33": "The animation shorthand arrays can only have 8 elements. See the specification for more information: http://mdn.io/animation\n\n",
  202. "34": "borderRadius expects a radius value as a string or number as the second argument.\n\n",
  203. "35": "borderRadius expects one of \"top\", \"bottom\", \"left\" or \"right\" as the first argument.\n\n",
  204. "36": "Property must be a string value.\n\n",
  205. "37": "Syntax Error at %s.\n\n",
  206. "38": "Formula contains a function that needs parentheses at %s.\n\n",
  207. "39": "Formula is missing closing parenthesis at %s.\n\n",
  208. "40": "Formula has too many closing parentheses at %s.\n\n",
  209. "41": "All values in a formula must have the same unit or be unitless.\n\n",
  210. "42": "Please provide a number of steps to the modularScale helper.\n\n",
  211. "43": "Please pass a number or one of the predefined scales to the modularScale helper as the ratio.\n\n",
  212. "44": "Invalid value passed as base to modularScale, expected number or em/rem string but got %s.\n\n",
  213. "45": "Passed invalid argument to hslToColorString, please pass a HslColor or HslaColor object.\n\n",
  214. "46": "Passed invalid argument to rgbToColorString, please pass a RgbColor or RgbaColor object.\n\n",
  215. "47": "minScreen and maxScreen must be provided as stringified numbers with the same units.\n\n",
  216. "48": "fromSize and toSize must be provided as stringified numbers with the same units.\n\n",
  217. "49": "Expects either an array of objects or a single object with the properties prop, fromSize, and toSize.\n\n",
  218. "50": "Expects the objects in the first argument array to have the properties prop, fromSize, and toSize.\n\n",
  219. "51": "Expects the first argument object to have the properties prop, fromSize, and toSize.\n\n",
  220. "52": "fontFace expects either the path to the font file(s) or a name of a local copy.\n\n",
  221. "53": "fontFace expects localFonts to be an array.\n\n",
  222. "54": "fontFace expects fileFormats to be an array.\n\n",
  223. "55": "fontFace expects a name of a font-family.\n\n",
  224. "56": "linearGradient requries at least 2 color-stops to properly render.\n\n",
  225. "57": "radialGradient requries at least 2 color-stops to properly render.\n\n",
  226. "58": "Please supply a filename to retinaImage() as the first argument.\n\n",
  227. "59": "Passed invalid argument to triangle, please pass correct pointingDirection e.g. 'right'.\n\n",
  228. "60": "Passed an invalid value to `height` or `width`. Please provide a pixel based unit.\n\n",
  229. "61": "Property must be a string value.\n\n",
  230. "62": "borderRadius expects a radius value as a string or number as the second argument.\n\n",
  231. "63": "borderRadius expects one of \"top\", \"bottom\", \"left\" or \"right\" as the first argument.\n\n",
  232. "64": "The animation shorthand only takes 8 arguments. See the specification for more information: http://mdn.io/animation.\n\n",
  233. "65": "To pass multiple animations please supply them in arrays, e.g. animation(['rotate', '2s'], ['move', '1s'])\\nTo pass a single animation please supply them in simple values, e.g. animation('rotate', '2s').\n\n",
  234. "66": "The animation shorthand arrays can only have 8 elements. See the specification for more information: http://mdn.io/animation.\n\n",
  235. "67": "You must provide a template to this method.\n\n",
  236. "68": "You passed an unsupported selector state to this method.\n\n",
  237. "69": "Expected a string ending in \"px\" or a number passed as the first argument to %s(), got %s instead.\n\n",
  238. "70": "Expected a string ending in \"px\" or a number passed as the second argument to %s(), got %s instead.\n\n",
  239. "71": "Passed invalid pixel value %s to %s(), please pass a value like \"12px\" or 12.\n\n",
  240. "72": "Passed invalid base value %s to %s(), please pass a value like \"12px\" or 12.\n\n",
  241. "73": "Please provide a valid CSS variable.\n\n",
  242. "74": "CSS variable not found and no default was provided.\n\n",
  243. "75": "important requires a valid style object, got a %s instead.\n\n",
  244. "76": "fromSize and toSize must be provided as stringified numbers with the same units as minScreen and maxScreen.\n\n",
  245. "77": "remToPx expects a value in \"rem\" but you provided it in \"%s\".\n\n",
  246. "78": "base must be set in \"px\" or \"%\" but you set it in \"%s\".\n"
  247. };
  248. /**
  249. * super basic version of sprintf
  250. * @private
  251. */
  252. function format() {
  253. for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
  254. args[_key] = arguments[_key];
  255. }
  256. var a = args[0];
  257. var b = [];
  258. var c;
  259. for (c = 1; c < args.length; c += 1) {
  260. b.push(args[c]);
  261. }
  262. b.forEach(function (d) {
  263. a = a.replace(/%[a-z]/, d);
  264. });
  265. return a;
  266. }
  267. /**
  268. * Create an error file out of errors.md for development and a simple web link to the full errors
  269. * in production mode.
  270. * @private
  271. */
  272. var PolishedError = /*#__PURE__*/function (_Error) {
  273. _inheritsLoose(PolishedError, _Error);
  274. function PolishedError(code) {
  275. var _this;
  276. if (process.env.NODE_ENV === 'production') {
  277. _this = _Error.call(this, "An error occurred. See https://github.com/styled-components/polished/blob/main/src/internalHelpers/errors.md#" + code + " for more information.") || this;
  278. } else {
  279. for (var _len2 = arguments.length, args = new Array(_len2 > 1 ? _len2 - 1 : 0), _key2 = 1; _key2 < _len2; _key2++) {
  280. args[_key2 - 1] = arguments[_key2];
  281. }
  282. _this = _Error.call(this, format.apply(void 0, [ERRORS[code]].concat(args))) || this;
  283. }
  284. return _assertThisInitialized(_this);
  285. }
  286. return PolishedError;
  287. }( /*#__PURE__*/_wrapNativeSuper(Error));
  288. var unitRegExp = /((?!\w)a|na|hc|mc|dg|me[r]?|xe|ni(?![a-zA-Z])|mm|cp|tp|xp|q(?!s)|hv|xamv|nimv|wv|sm|s(?!\D|$)|ged|darg?|nrut)/g;
  289. // Merges additional math functionality into the defaults.
  290. function mergeSymbolMaps(additionalSymbols) {
  291. var symbolMap = {};
  292. symbolMap.symbols = additionalSymbols ? _extends({}, defaultSymbolMap.symbols, additionalSymbols.symbols) : _extends({}, defaultSymbolMap.symbols);
  293. return symbolMap;
  294. }
  295. function exec(operators, values) {
  296. var _ref;
  297. var op = operators.pop();
  298. values.push(op.f.apply(op, (_ref = []).concat.apply(_ref, values.splice(-op.argCount))));
  299. return op.precedence;
  300. }
  301. function calculate(expression, additionalSymbols) {
  302. var symbolMap = mergeSymbolMaps(additionalSymbols);
  303. var match;
  304. var operators = [symbolMap.symbols['('].prefix];
  305. var values = [];
  306. var pattern = new RegExp( // Pattern for numbers
  307. "\\d+(?:\\.\\d+)?|" +
  308. // ...and patterns for individual operators/function names
  309. Object.keys(symbolMap.symbols).map(function (key) {
  310. return symbolMap.symbols[key];
  311. })
  312. // longer symbols should be listed first
  313. // $FlowFixMe
  314. .sort(function (a, b) {
  315. return b.symbol.length - a.symbol.length;
  316. })
  317. // $FlowFixMe
  318. .map(function (val) {
  319. return val.regSymbol;
  320. }).join('|') + "|(\\S)", 'g');
  321. pattern.lastIndex = 0; // Reset regular expression object
  322. var afterValue = false;
  323. do {
  324. match = pattern.exec(expression);
  325. var _ref2 = match || [')', undefined],
  326. token = _ref2[0],
  327. bad = _ref2[1];
  328. var notNumber = symbolMap.symbols[token];
  329. var notNewValue = notNumber && !notNumber.prefix && !notNumber.func;
  330. var notAfterValue = !notNumber || !notNumber.postfix && !notNumber.infix;
  331. // Check for syntax errors:
  332. if (bad || (afterValue ? notAfterValue : notNewValue)) {
  333. throw new PolishedError(37, match ? match.index : expression.length, expression);
  334. }
  335. if (afterValue) {
  336. // We either have an infix or postfix operator (they should be mutually exclusive)
  337. var curr = notNumber.postfix || notNumber.infix;
  338. do {
  339. var prev = operators[operators.length - 1];
  340. if ((curr.precedence - prev.precedence || prev.rightToLeft) > 0) break;
  341. // Apply previous operator, since it has precedence over current one
  342. } while (exec(operators, values)); // Exit loop after executing an opening parenthesis or function
  343. afterValue = curr.notation === 'postfix';
  344. if (curr.symbol !== ')') {
  345. operators.push(curr);
  346. // Postfix always has precedence over any operator that follows after it
  347. if (afterValue) exec(operators, values);
  348. }
  349. } else if (notNumber) {
  350. // prefix operator or function
  351. operators.push(notNumber.prefix || notNumber.func);
  352. if (notNumber.func) {
  353. // Require an opening parenthesis
  354. match = pattern.exec(expression);
  355. if (!match || match[0] !== '(') {
  356. throw new PolishedError(38, match ? match.index : expression.length, expression);
  357. }
  358. }
  359. } else {
  360. // number
  361. values.push(+token);
  362. afterValue = true;
  363. }
  364. } while (match && operators.length);
  365. if (operators.length) {
  366. throw new PolishedError(39, match ? match.index : expression.length, expression);
  367. } else if (match) {
  368. throw new PolishedError(40, match ? match.index : expression.length, expression);
  369. } else {
  370. return values.pop();
  371. }
  372. }
  373. function reverseString(str) {
  374. return str.split('').reverse().join('');
  375. }
  376. /**
  377. * Helper for doing math with CSS Units. Accepts a formula as a string. All values in the formula must have the same unit (or be unitless). Supports complex formulas utliziing addition, subtraction, multiplication, division, square root, powers, factorial, min, max, as well as parentheses for order of operation.
  378. *
  379. *In cases where you need to do calculations with mixed units where one unit is a [relative length unit](https://developer.mozilla.org/en-US/docs/Web/CSS/length#Relative_length_units), you will want to use [CSS Calc](https://developer.mozilla.org/en-US/docs/Web/CSS/calc).
  380. *
  381. * *warning* While we've done everything possible to ensure math safely evalutes formulas expressed as strings, you should always use extreme caution when passing `math` user provided values.
  382. * @example
  383. * // Styles as object usage
  384. * const styles = {
  385. * fontSize: math('12rem + 8rem'),
  386. * fontSize: math('(12px + 2px) * 3'),
  387. * fontSize: math('3px^2 + sqrt(4)'),
  388. * }
  389. *
  390. * // styled-components usage
  391. * const div = styled.div`
  392. * fontSize: ${math('12rem + 8rem')};
  393. * fontSize: ${math('(12px + 2px) * 3')};
  394. * fontSize: ${math('3px^2 + sqrt(4)')};
  395. * `
  396. *
  397. * // CSS as JS Output
  398. *
  399. * div: {
  400. * fontSize: '20rem',
  401. * fontSize: '42px',
  402. * fontSize: '11px',
  403. * }
  404. */
  405. function math(formula, additionalSymbols) {
  406. var reversedFormula = reverseString(formula);
  407. var formulaMatch = reversedFormula.match(unitRegExp);
  408. // Check that all units are the same
  409. if (formulaMatch && !formulaMatch.every(function (unit) {
  410. return unit === formulaMatch[0];
  411. })) {
  412. throw new PolishedError(41);
  413. }
  414. var cleanFormula = reverseString(reversedFormula.replace(unitRegExp, ''));
  415. return "" + calculate(cleanFormula, additionalSymbols) + (formulaMatch ? reverseString(formulaMatch[0]) : '');
  416. }
  417. var cssVariableRegex = /--[\S]*/g;
  418. /**
  419. * Fetches the value of a passed CSS Variable in the :root scope, or otherwise returns a defaultValue if provided.
  420. *
  421. * @example
  422. * // Styles as object usage
  423. * const styles = {
  424. * 'background': cssVar('--background-color'),
  425. * }
  426. *
  427. * // styled-components usage
  428. * const div = styled.div`
  429. * background: ${cssVar('--background-color')};
  430. * `
  431. *
  432. * // CSS in JS Output
  433. *
  434. * element {
  435. * 'background': 'red'
  436. * }
  437. */
  438. function cssVar(cssVariable, defaultValue) {
  439. if (!cssVariable || !cssVariable.match(cssVariableRegex)) {
  440. throw new PolishedError(73);
  441. }
  442. var variableValue;
  443. /* eslint-disable */
  444. /* istanbul ignore next */
  445. if (typeof document !== 'undefined' && document.documentElement !== null) {
  446. variableValue = getComputedStyle(document.documentElement).getPropertyValue(cssVariable);
  447. }
  448. /* eslint-enable */
  449. if (variableValue) {
  450. return variableValue.trim();
  451. } else if (defaultValue) {
  452. return defaultValue;
  453. }
  454. throw new PolishedError(74);
  455. }
  456. // @private
  457. function capitalizeString(string) {
  458. return string.charAt(0).toUpperCase() + string.slice(1);
  459. }
  460. var positionMap$1 = ['Top', 'Right', 'Bottom', 'Left'];
  461. function generateProperty(property, position) {
  462. if (!property) return position.toLowerCase();
  463. var splitProperty = property.split('-');
  464. if (splitProperty.length > 1) {
  465. splitProperty.splice(1, 0, position);
  466. return splitProperty.reduce(function (acc, val) {
  467. return "" + acc + capitalizeString(val);
  468. });
  469. }
  470. var joinedProperty = property.replace(/([a-z])([A-Z])/g, "$1" + position + "$2");
  471. return property === joinedProperty ? "" + property + position : joinedProperty;
  472. }
  473. function generateStyles(property, valuesWithDefaults) {
  474. var styles = {};
  475. for (var i = 0; i < valuesWithDefaults.length; i += 1) {
  476. if (valuesWithDefaults[i] || valuesWithDefaults[i] === 0) {
  477. styles[generateProperty(property, positionMap$1[i])] = valuesWithDefaults[i];
  478. }
  479. }
  480. return styles;
  481. }
  482. /**
  483. * Enables shorthand for direction-based properties. It accepts a property (hyphenated or camelCased) and up to four values that map to top, right, bottom, and left, respectively. You can optionally pass an empty string to get only the directional values as properties. You can also optionally pass a null argument for a directional value to ignore it.
  484. * @example
  485. * // Styles as object usage
  486. * const styles = {
  487. * ...directionalProperty('padding', '12px', '24px', '36px', '48px')
  488. * }
  489. *
  490. * // styled-components usage
  491. * const div = styled.div`
  492. * ${directionalProperty('padding', '12px', '24px', '36px', '48px')}
  493. * `
  494. *
  495. * // CSS as JS Output
  496. *
  497. * div {
  498. * 'paddingTop': '12px',
  499. * 'paddingRight': '24px',
  500. * 'paddingBottom': '36px',
  501. * 'paddingLeft': '48px'
  502. * }
  503. */
  504. function directionalProperty(property) {
  505. for (var _len = arguments.length, values = new Array(_len > 1 ? _len - 1 : 0), _key = 1; _key < _len; _key++) {
  506. values[_key - 1] = arguments[_key];
  507. }
  508. // prettier-ignore
  509. var firstValue = values[0],
  510. _values$ = values[1],
  511. secondValue = _values$ === void 0 ? firstValue : _values$,
  512. _values$2 = values[2],
  513. thirdValue = _values$2 === void 0 ? firstValue : _values$2,
  514. _values$3 = values[3],
  515. fourthValue = _values$3 === void 0 ? secondValue : _values$3;
  516. var valuesWithDefaults = [firstValue, secondValue, thirdValue, fourthValue];
  517. return generateStyles(property, valuesWithDefaults);
  518. }
  519. /**
  520. * Check if a string ends with something
  521. * @private
  522. */
  523. function endsWith(string, suffix) {
  524. return string.substr(-suffix.length) === suffix;
  525. }
  526. var cssRegex$1 = /^([+-]?(?:\d+|\d*\.\d+))([a-z]*|%)$/;
  527. /**
  528. * Returns a given CSS value minus its unit of measure.
  529. *
  530. * @example
  531. * // Styles as object usage
  532. * const styles = {
  533. * '--dimension': stripUnit('100px')
  534. * }
  535. *
  536. * // styled-components usage
  537. * const div = styled.div`
  538. * --dimension: ${stripUnit('100px')};
  539. * `
  540. *
  541. * // CSS in JS Output
  542. *
  543. * element {
  544. * '--dimension': 100
  545. * }
  546. */
  547. function stripUnit(value) {
  548. if (typeof value !== 'string') return value;
  549. var matchedValue = value.match(cssRegex$1);
  550. return matchedValue ? parseFloat(value) : value;
  551. }
  552. /**
  553. * Factory function that creates pixel-to-x converters
  554. * @private
  555. */
  556. var pxtoFactory = function pxtoFactory(to) {
  557. return function (pxval, base) {
  558. if (base === void 0) {
  559. base = '16px';
  560. }
  561. var newPxval = pxval;
  562. var newBase = base;
  563. if (typeof pxval === 'string') {
  564. if (!endsWith(pxval, 'px')) {
  565. throw new PolishedError(69, to, pxval);
  566. }
  567. newPxval = stripUnit(pxval);
  568. }
  569. if (typeof base === 'string') {
  570. if (!endsWith(base, 'px')) {
  571. throw new PolishedError(70, to, base);
  572. }
  573. newBase = stripUnit(base);
  574. }
  575. if (typeof newPxval === 'string') {
  576. throw new PolishedError(71, pxval, to);
  577. }
  578. if (typeof newBase === 'string') {
  579. throw new PolishedError(72, base, to);
  580. }
  581. return "" + newPxval / newBase + to;
  582. };
  583. };
  584. var pixelsto = pxtoFactory;
  585. /**
  586. * Convert pixel value to ems. The default base value is 16px, but can be changed by passing a
  587. * second argument to the function.
  588. * @function
  589. * @param {string|number} pxval
  590. * @param {string|number} [base='16px']
  591. * @example
  592. * // Styles as object usage
  593. * const styles = {
  594. * 'height': em('16px')
  595. * }
  596. *
  597. * // styled-components usage
  598. * const div = styled.div`
  599. * height: ${em('16px')}
  600. * `
  601. *
  602. * // CSS in JS Output
  603. *
  604. * element {
  605. * 'height': '1em'
  606. * }
  607. */
  608. var em = pixelsto('em');
  609. var em$1 = em;
  610. var cssRegex = /^([+-]?(?:\d+|\d*\.\d+))([a-z]*|%)$/;
  611. /**
  612. * Returns a given CSS value and its unit as elements of an array.
  613. *
  614. * @example
  615. * // Styles as object usage
  616. * const styles = {
  617. * '--dimension': getValueAndUnit('100px')[0],
  618. * '--unit': getValueAndUnit('100px')[1],
  619. * }
  620. *
  621. * // styled-components usage
  622. * const div = styled.div`
  623. * --dimension: ${getValueAndUnit('100px')[0]};
  624. * --unit: ${getValueAndUnit('100px')[1]};
  625. * `
  626. *
  627. * // CSS in JS Output
  628. *
  629. * element {
  630. * '--dimension': 100,
  631. * '--unit': 'px',
  632. * }
  633. */
  634. function getValueAndUnit(value) {
  635. if (typeof value !== 'string') return [value, ''];
  636. var matchedValue = value.match(cssRegex);
  637. if (matchedValue) return [parseFloat(value), matchedValue[2]];
  638. return [value, undefined];
  639. }
  640. /**
  641. * Helper for targeting rules in a style block generated by polished modules that need !important-level specificity. Can optionally specify a rule (or rules) to target specific rules.
  642. *
  643. * @example
  644. * // Styles as object usage
  645. * const styles = {
  646. * ...important(cover())
  647. * }
  648. *
  649. * // styled-components usage
  650. * const div = styled.div`
  651. * ${important(cover())}
  652. * `
  653. *
  654. * // CSS as JS Output
  655. *
  656. * div: {
  657. * 'position': 'absolute !important',
  658. * 'top': '0 !important',
  659. * 'right: '0 !important',
  660. * 'bottom': '0 !important',
  661. * 'left: '0 !important'
  662. * }
  663. */
  664. function important(styleBlock, rules) {
  665. if (typeof styleBlock !== 'object' || styleBlock === null) {
  666. throw new PolishedError(75, typeof styleBlock);
  667. }
  668. var newStyleBlock = {};
  669. Object.keys(styleBlock).forEach(function (key) {
  670. if (typeof styleBlock[key] === 'object' && styleBlock[key] !== null) {
  671. newStyleBlock[key] = important(styleBlock[key], rules);
  672. } else if (!rules || rules && (rules === key || rules.indexOf(key) >= 0)) {
  673. newStyleBlock[key] = styleBlock[key] + " !important";
  674. } else {
  675. newStyleBlock[key] = styleBlock[key];
  676. }
  677. });
  678. return newStyleBlock;
  679. }
  680. var ratioNames = {
  681. minorSecond: 1.067,
  682. majorSecond: 1.125,
  683. minorThird: 1.2,
  684. majorThird: 1.25,
  685. perfectFourth: 1.333,
  686. augFourth: 1.414,
  687. perfectFifth: 1.5,
  688. minorSixth: 1.6,
  689. goldenSection: 1.618,
  690. majorSixth: 1.667,
  691. minorSeventh: 1.778,
  692. majorSeventh: 1.875,
  693. octave: 2,
  694. majorTenth: 2.5,
  695. majorEleventh: 2.667,
  696. majorTwelfth: 3,
  697. doubleOctave: 4
  698. };
  699. function getRatio(ratioName) {
  700. return ratioNames[ratioName];
  701. }
  702. /**
  703. * Establish consistent measurements and spacial relationships throughout your projects by incrementing an em or rem value up or down a defined scale. We provide a list of commonly used scales as pre-defined variables.
  704. * @example
  705. * // Styles as object usage
  706. * const styles = {
  707. * // Increment two steps up the default scale
  708. * 'fontSize': modularScale(2)
  709. * }
  710. *
  711. * // styled-components usage
  712. * const div = styled.div`
  713. * // Increment two steps up the default scale
  714. * fontSize: ${modularScale(2)}
  715. * `
  716. *
  717. * // CSS in JS Output
  718. *
  719. * element {
  720. * 'fontSize': '1.77689em'
  721. * }
  722. */
  723. function modularScale(steps, base, ratio) {
  724. if (base === void 0) {
  725. base = '1em';
  726. }
  727. if (ratio === void 0) {
  728. ratio = 1.333;
  729. }
  730. if (typeof steps !== 'number') {
  731. throw new PolishedError(42);
  732. }
  733. if (typeof ratio === 'string' && !ratioNames[ratio]) {
  734. throw new PolishedError(43);
  735. }
  736. var _ref = typeof base === 'string' ? getValueAndUnit(base) : [base, ''],
  737. realBase = _ref[0],
  738. unit = _ref[1];
  739. var realRatio = typeof ratio === 'string' ? getRatio(ratio) : ratio;
  740. if (typeof realBase === 'string') {
  741. throw new PolishedError(44, base);
  742. }
  743. return "" + realBase * Math.pow(realRatio, steps) + (unit || '');
  744. }
  745. /**
  746. * Convert pixel value to rems. The default base value is 16px, but can be changed by passing a
  747. * second argument to the function.
  748. * @function
  749. * @param {string|number} pxval
  750. * @param {string|number} [base='16px']
  751. * @example
  752. * // Styles as object usage
  753. * const styles = {
  754. * 'height': rem('16px')
  755. * }
  756. *
  757. * // styled-components usage
  758. * const div = styled.div`
  759. * height: ${rem('16px')}
  760. * `
  761. *
  762. * // CSS in JS Output
  763. *
  764. * element {
  765. * 'height': '1rem'
  766. * }
  767. */
  768. var rem = pixelsto('rem');
  769. var rem$1 = rem;
  770. var defaultFontSize = 16;
  771. function convertBase(base) {
  772. var deconstructedValue = getValueAndUnit(base);
  773. if (deconstructedValue[1] === 'px') {
  774. return parseFloat(base);
  775. }
  776. if (deconstructedValue[1] === '%') {
  777. return parseFloat(base) / 100 * defaultFontSize;
  778. }
  779. throw new PolishedError(78, deconstructedValue[1]);
  780. }
  781. function getBaseFromDoc() {
  782. /* eslint-disable */
  783. /* istanbul ignore next */
  784. if (typeof document !== 'undefined' && document.documentElement !== null) {
  785. var rootFontSize = getComputedStyle(document.documentElement).fontSize;
  786. return rootFontSize ? convertBase(rootFontSize) : defaultFontSize;
  787. }
  788. /* eslint-enable */
  789. /* istanbul ignore next */
  790. return defaultFontSize;
  791. }
  792. /**
  793. * Convert rem values to px. By default, the base value is pulled from the font-size property on the root element (if it is set in % or px). It defaults to 16px if not found on the root. You can also override the base value by providing your own base in % or px.
  794. * @example
  795. * // Styles as object usage
  796. * const styles = {
  797. * 'height': remToPx('1.6rem')
  798. * 'height': remToPx('1.6rem', '10px')
  799. * }
  800. *
  801. * // styled-components usage
  802. * const div = styled.div`
  803. * height: ${remToPx('1.6rem')}
  804. * height: ${remToPx('1.6rem', '10px')}
  805. * `
  806. *
  807. * // CSS in JS Output
  808. *
  809. * element {
  810. * 'height': '25.6px',
  811. * 'height': '16px',
  812. * }
  813. */
  814. function remToPx(value, base) {
  815. var deconstructedValue = getValueAndUnit(value);
  816. if (deconstructedValue[1] !== 'rem' && deconstructedValue[1] !== '') {
  817. throw new PolishedError(77, deconstructedValue[1]);
  818. }
  819. var newBase = base ? convertBase(base) : getBaseFromDoc();
  820. return deconstructedValue[0] * newBase + "px";
  821. }
  822. var functionsMap$3 = {
  823. back: 'cubic-bezier(0.600, -0.280, 0.735, 0.045)',
  824. circ: 'cubic-bezier(0.600, 0.040, 0.980, 0.335)',
  825. cubic: 'cubic-bezier(0.550, 0.055, 0.675, 0.190)',
  826. expo: 'cubic-bezier(0.950, 0.050, 0.795, 0.035)',
  827. quad: 'cubic-bezier(0.550, 0.085, 0.680, 0.530)',
  828. quart: 'cubic-bezier(0.895, 0.030, 0.685, 0.220)',
  829. quint: 'cubic-bezier(0.755, 0.050, 0.855, 0.060)',
  830. sine: 'cubic-bezier(0.470, 0.000, 0.745, 0.715)'
  831. };
  832. /**
  833. * String to represent common easing functions as demonstrated here: (github.com/jaukia/easie).
  834. *
  835. * @example
  836. * // Styles as object usage
  837. * const styles = {
  838. * 'transitionTimingFunction': easeIn('quad')
  839. * }
  840. *
  841. * // styled-components usage
  842. * const div = styled.div`
  843. * transitionTimingFunction: ${easeIn('quad')};
  844. * `
  845. *
  846. * // CSS as JS Output
  847. *
  848. * 'div': {
  849. * 'transitionTimingFunction': 'cubic-bezier(0.550, 0.085, 0.680, 0.530)',
  850. * }
  851. */
  852. function easeIn(functionName) {
  853. return functionsMap$3[functionName.toLowerCase().trim()];
  854. }
  855. var functionsMap$2 = {
  856. back: 'cubic-bezier(0.680, -0.550, 0.265, 1.550)',
  857. circ: 'cubic-bezier(0.785, 0.135, 0.150, 0.860)',
  858. cubic: 'cubic-bezier(0.645, 0.045, 0.355, 1.000)',
  859. expo: 'cubic-bezier(1.000, 0.000, 0.000, 1.000)',
  860. quad: 'cubic-bezier(0.455, 0.030, 0.515, 0.955)',
  861. quart: 'cubic-bezier(0.770, 0.000, 0.175, 1.000)',
  862. quint: 'cubic-bezier(0.860, 0.000, 0.070, 1.000)',
  863. sine: 'cubic-bezier(0.445, 0.050, 0.550, 0.950)'
  864. };
  865. /**
  866. * String to represent common easing functions as demonstrated here: (github.com/jaukia/easie).
  867. *
  868. * @example
  869. * // Styles as object usage
  870. * const styles = {
  871. * 'transitionTimingFunction': easeInOut('quad')
  872. * }
  873. *
  874. * // styled-components usage
  875. * const div = styled.div`
  876. * transitionTimingFunction: ${easeInOut('quad')};
  877. * `
  878. *
  879. * // CSS as JS Output
  880. *
  881. * 'div': {
  882. * 'transitionTimingFunction': 'cubic-bezier(0.455, 0.030, 0.515, 0.955)',
  883. * }
  884. */
  885. function easeInOut(functionName) {
  886. return functionsMap$2[functionName.toLowerCase().trim()];
  887. }
  888. var functionsMap$1 = {
  889. back: 'cubic-bezier(0.175, 0.885, 0.320, 1.275)',
  890. cubic: 'cubic-bezier(0.215, 0.610, 0.355, 1.000)',
  891. circ: 'cubic-bezier(0.075, 0.820, 0.165, 1.000)',
  892. expo: 'cubic-bezier(0.190, 1.000, 0.220, 1.000)',
  893. quad: 'cubic-bezier(0.250, 0.460, 0.450, 0.940)',
  894. quart: 'cubic-bezier(0.165, 0.840, 0.440, 1.000)',
  895. quint: 'cubic-bezier(0.230, 1.000, 0.320, 1.000)',
  896. sine: 'cubic-bezier(0.390, 0.575, 0.565, 1.000)'
  897. };
  898. /**
  899. * String to represent common easing functions as demonstrated here: (github.com/jaukia/easie).
  900. *
  901. * @example
  902. * // Styles as object usage
  903. * const styles = {
  904. * 'transitionTimingFunction': easeOut('quad')
  905. * }
  906. *
  907. * // styled-components usage
  908. * const div = styled.div`
  909. * transitionTimingFunction: ${easeOut('quad')};
  910. * `
  911. *
  912. * // CSS as JS Output
  913. *
  914. * 'div': {
  915. * 'transitionTimingFunction': 'cubic-bezier(0.250, 0.460, 0.450, 0.940)',
  916. * }
  917. */
  918. function easeOut(functionName) {
  919. return functionsMap$1[functionName.toLowerCase().trim()];
  920. }
  921. /**
  922. * Returns a CSS calc formula for linear interpolation of a property between two values. Accepts optional minScreen (defaults to '320px') and maxScreen (defaults to '1200px').
  923. *
  924. * @example
  925. * // Styles as object usage
  926. * const styles = {
  927. * fontSize: between('20px', '100px', '400px', '1000px'),
  928. * fontSize: between('20px', '100px')
  929. * }
  930. *
  931. * // styled-components usage
  932. * const div = styled.div`
  933. * fontSize: ${between('20px', '100px', '400px', '1000px')};
  934. * fontSize: ${between('20px', '100px')}
  935. * `
  936. *
  937. * // CSS as JS Output
  938. *
  939. * h1: {
  940. * 'fontSize': 'calc(-33.33333333333334px + 13.333333333333334vw)',
  941. * 'fontSize': 'calc(-9.090909090909093px + 9.090909090909092vw)'
  942. * }
  943. */
  944. function between(fromSize, toSize, minScreen, maxScreen) {
  945. if (minScreen === void 0) {
  946. minScreen = '320px';
  947. }
  948. if (maxScreen === void 0) {
  949. maxScreen = '1200px';
  950. }
  951. var _getValueAndUnit = getValueAndUnit(fromSize),
  952. unitlessFromSize = _getValueAndUnit[0],
  953. fromSizeUnit = _getValueAndUnit[1];
  954. var _getValueAndUnit2 = getValueAndUnit(toSize),
  955. unitlessToSize = _getValueAndUnit2[0],
  956. toSizeUnit = _getValueAndUnit2[1];
  957. var _getValueAndUnit3 = getValueAndUnit(minScreen),
  958. unitlessMinScreen = _getValueAndUnit3[0],
  959. minScreenUnit = _getValueAndUnit3[1];
  960. var _getValueAndUnit4 = getValueAndUnit(maxScreen),
  961. unitlessMaxScreen = _getValueAndUnit4[0],
  962. maxScreenUnit = _getValueAndUnit4[1];
  963. if (typeof unitlessMinScreen !== 'number' || typeof unitlessMaxScreen !== 'number' || !minScreenUnit || !maxScreenUnit || minScreenUnit !== maxScreenUnit) {
  964. throw new PolishedError(47);
  965. }
  966. if (typeof unitlessFromSize !== 'number' || typeof unitlessToSize !== 'number' || fromSizeUnit !== toSizeUnit) {
  967. throw new PolishedError(48);
  968. }
  969. if (fromSizeUnit !== minScreenUnit || toSizeUnit !== maxScreenUnit) {
  970. throw new PolishedError(76);
  971. }
  972. var slope = (unitlessFromSize - unitlessToSize) / (unitlessMinScreen - unitlessMaxScreen);
  973. var base = unitlessToSize - slope * unitlessMaxScreen;
  974. return "calc(" + base.toFixed(2) + (fromSizeUnit || '') + " + " + (100 * slope).toFixed(2) + "vw)";
  975. }
  976. /**
  977. * CSS to contain a float (credit to CSSMojo).
  978. *
  979. * @example
  980. * // Styles as object usage
  981. * const styles = {
  982. * ...clearFix(),
  983. * }
  984. *
  985. * // styled-components usage
  986. * const div = styled.div`
  987. * ${clearFix()}
  988. * `
  989. *
  990. * // CSS as JS Output
  991. *
  992. * '&::after': {
  993. * 'clear': 'both',
  994. * 'content': '""',
  995. * 'display': 'table'
  996. * }
  997. */
  998. function clearFix(parent) {
  999. var _ref;
  1000. if (parent === void 0) {
  1001. parent = '&';
  1002. }
  1003. var pseudoSelector = parent + "::after";
  1004. return _ref = {}, _ref[pseudoSelector] = {
  1005. clear: 'both',
  1006. content: '""',
  1007. display: 'table'
  1008. }, _ref;
  1009. }
  1010. /**
  1011. * CSS to fully cover an area. Can optionally be passed an offset to act as a "padding".
  1012. *
  1013. * @example
  1014. * // Styles as object usage
  1015. * const styles = {
  1016. * ...cover()
  1017. * }
  1018. *
  1019. * // styled-components usage
  1020. * const div = styled.div`
  1021. * ${cover()}
  1022. * `
  1023. *
  1024. * // CSS as JS Output
  1025. *
  1026. * div: {
  1027. * 'position': 'absolute',
  1028. * 'top': '0',
  1029. * 'right: '0',
  1030. * 'bottom': '0',
  1031. * 'left: '0'
  1032. * }
  1033. */
  1034. function cover(offset) {
  1035. if (offset === void 0) {
  1036. offset = 0;
  1037. }
  1038. return {
  1039. position: 'absolute',
  1040. top: offset,
  1041. right: offset,
  1042. bottom: offset,
  1043. left: offset
  1044. };
  1045. }
  1046. /**
  1047. * CSS to represent truncated text with an ellipsis. You can optionally pass a max-width and number of lines before truncating.
  1048. *
  1049. * @example
  1050. * // Styles as object usage
  1051. * const styles = {
  1052. * ...ellipsis('250px')
  1053. * }
  1054. *
  1055. * // styled-components usage
  1056. * const div = styled.div`
  1057. * ${ellipsis('250px')}
  1058. * `
  1059. *
  1060. * // CSS as JS Output
  1061. *
  1062. * div: {
  1063. * 'display': 'inline-block',
  1064. * 'maxWidth': '250px',
  1065. * 'overflow': 'hidden',
  1066. * 'textOverflow': 'ellipsis',
  1067. * 'whiteSpace': 'nowrap',
  1068. * 'wordWrap': 'normal'
  1069. * }
  1070. */
  1071. function ellipsis(width, lines) {
  1072. if (lines === void 0) {
  1073. lines = 1;
  1074. }
  1075. var styles = {
  1076. display: 'inline-block',
  1077. maxWidth: width || '100%',
  1078. overflow: 'hidden',
  1079. textOverflow: 'ellipsis',
  1080. whiteSpace: 'nowrap',
  1081. wordWrap: 'normal'
  1082. };
  1083. return lines > 1 ? _extends({}, styles, {
  1084. WebkitBoxOrient: 'vertical',
  1085. WebkitLineClamp: lines,
  1086. display: '-webkit-box',
  1087. whiteSpace: 'normal'
  1088. }) : styles;
  1089. }
  1090. function _createForOfIteratorHelperLoose(o, allowArrayLike) { var it = typeof Symbol !== "undefined" && o[Symbol.iterator] || o["@@iterator"]; if (it) return (it = it.call(o)).next.bind(it); if (Array.isArray(o) || (it = _unsupportedIterableToArray(o)) || allowArrayLike && o && typeof o.length === "number") { if (it) o = it; var i = 0; return function () { if (i >= o.length) return { done: true }; return { done: false, value: o[i++] }; }; } throw new TypeError("Invalid attempt to iterate non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
  1091. function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o === "string") return _arrayLikeToArray(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === "Object" && o.constructor) n = o.constructor.name; if (n === "Map" || n === "Set") return Array.from(o); if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); }
  1092. function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) arr2[i] = arr[i]; return arr2; }
  1093. /**
  1094. * Returns a set of media queries that resizes a property (or set of properties) between a provided fromSize and toSize. Accepts optional minScreen (defaults to '320px') and maxScreen (defaults to '1200px') to constrain the interpolation.
  1095. *
  1096. * @example
  1097. * // Styles as object usage
  1098. * const styles = {
  1099. * ...fluidRange(
  1100. * {
  1101. * prop: 'padding',
  1102. * fromSize: '20px',
  1103. * toSize: '100px',
  1104. * },
  1105. * '400px',
  1106. * '1000px',
  1107. * )
  1108. * }
  1109. *
  1110. * // styled-components usage
  1111. * const div = styled.div`
  1112. * ${fluidRange(
  1113. * {
  1114. * prop: 'padding',
  1115. * fromSize: '20px',
  1116. * toSize: '100px',
  1117. * },
  1118. * '400px',
  1119. * '1000px',
  1120. * )}
  1121. * `
  1122. *
  1123. * // CSS as JS Output
  1124. *
  1125. * div: {
  1126. * "@media (min-width: 1000px)": Object {
  1127. * "padding": "100px",
  1128. * },
  1129. * "@media (min-width: 400px)": Object {
  1130. * "padding": "calc(-33.33333333333334px + 13.333333333333334vw)",
  1131. * },
  1132. * "padding": "20px",
  1133. * }
  1134. */
  1135. function fluidRange(cssProp, minScreen, maxScreen) {
  1136. if (minScreen === void 0) {
  1137. minScreen = '320px';
  1138. }
  1139. if (maxScreen === void 0) {
  1140. maxScreen = '1200px';
  1141. }
  1142. if (!Array.isArray(cssProp) && typeof cssProp !== 'object' || cssProp === null) {
  1143. throw new PolishedError(49);
  1144. }
  1145. if (Array.isArray(cssProp)) {
  1146. var mediaQueries = {};
  1147. var fallbacks = {};
  1148. for (var _iterator = _createForOfIteratorHelperLoose(cssProp), _step; !(_step = _iterator()).done;) {
  1149. var _extends2, _extends3;
  1150. var obj = _step.value;
  1151. if (!obj.prop || !obj.fromSize || !obj.toSize) {
  1152. throw new PolishedError(50);
  1153. }
  1154. fallbacks[obj.prop] = obj.fromSize;
  1155. mediaQueries["@media (min-width: " + minScreen + ")"] = _extends({}, mediaQueries["@media (min-width: " + minScreen + ")"], (_extends2 = {}, _extends2[obj.prop] = between(obj.fromSize, obj.toSize, minScreen, maxScreen), _extends2));
  1156. mediaQueries["@media (min-width: " + maxScreen + ")"] = _extends({}, mediaQueries["@media (min-width: " + maxScreen + ")"], (_extends3 = {}, _extends3[obj.prop] = obj.toSize, _extends3));
  1157. }
  1158. return _extends({}, fallbacks, mediaQueries);
  1159. } else {
  1160. var _ref, _ref2, _ref3;
  1161. if (!cssProp.prop || !cssProp.fromSize || !cssProp.toSize) {
  1162. throw new PolishedError(51);
  1163. }
  1164. return _ref3 = {}, _ref3[cssProp.prop] = cssProp.fromSize, _ref3["@media (min-width: " + minScreen + ")"] = (_ref = {}, _ref[cssProp.prop] = between(cssProp.fromSize, cssProp.toSize, minScreen, maxScreen), _ref), _ref3["@media (min-width: " + maxScreen + ")"] = (_ref2 = {}, _ref2[cssProp.prop] = cssProp.toSize, _ref2), _ref3;
  1165. }
  1166. }
  1167. var dataURIRegex = /^\s*data:([a-z]+\/[a-z-]+(;[a-z-]+=[a-z-]+)?)?(;charset=[a-z0-9-]+)?(;base64)?,[a-z0-9!$&',()*+,;=\-._~:@/?%\s]*\s*$/i;
  1168. var formatHintMap = {
  1169. woff: 'woff',
  1170. woff2: 'woff2',
  1171. ttf: 'truetype',
  1172. otf: 'opentype',
  1173. eot: 'embedded-opentype',
  1174. svg: 'svg',
  1175. svgz: 'svg'
  1176. };
  1177. function generateFormatHint(format, formatHint) {
  1178. if (!formatHint) return '';
  1179. return " format(\"" + formatHintMap[format] + "\")";
  1180. }
  1181. function isDataURI(fontFilePath) {
  1182. return !!fontFilePath.replace(/\s+/g, ' ').match(dataURIRegex);
  1183. }
  1184. function generateFileReferences(fontFilePath, fileFormats, formatHint) {
  1185. if (isDataURI(fontFilePath)) {
  1186. return "url(\"" + fontFilePath + "\")" + generateFormatHint(fileFormats[0], formatHint);
  1187. }
  1188. var fileFontReferences = fileFormats.map(function (format) {
  1189. return "url(\"" + fontFilePath + "." + format + "\")" + generateFormatHint(format, formatHint);
  1190. });
  1191. return fileFontReferences.join(', ');
  1192. }
  1193. function generateLocalReferences(localFonts) {
  1194. var localFontReferences = localFonts.map(function (font) {
  1195. return "local(\"" + font + "\")";
  1196. });
  1197. return localFontReferences.join(', ');
  1198. }
  1199. function generateSources(fontFilePath, localFonts, fileFormats, formatHint) {
  1200. var fontReferences = [];
  1201. if (localFonts) fontReferences.push(generateLocalReferences(localFonts));
  1202. if (fontFilePath) {
  1203. fontReferences.push(generateFileReferences(fontFilePath, fileFormats, formatHint));
  1204. }
  1205. return fontReferences.join(', ');
  1206. }
  1207. /**
  1208. * CSS for a @font-face declaration. Defaults to check for local copies of the font on the user's machine. You can disable this by passing `null` to localFonts.
  1209. *
  1210. * @example
  1211. * // Styles as object basic usage
  1212. * const styles = {
  1213. * ...fontFace({
  1214. * 'fontFamily': 'Sans-Pro',
  1215. * 'fontFilePath': 'path/to/file'
  1216. * })
  1217. * }
  1218. *
  1219. * // styled-components basic usage
  1220. * const GlobalStyle = createGlobalStyle`${
  1221. * fontFace({
  1222. * 'fontFamily': 'Sans-Pro',
  1223. * 'fontFilePath': 'path/to/file'
  1224. * }
  1225. * )}`
  1226. *
  1227. * // CSS as JS Output
  1228. *
  1229. * '@font-face': {
  1230. * 'fontFamily': 'Sans-Pro',
  1231. * 'src': 'url("path/to/file.eot"), url("path/to/file.woff2"), url("path/to/file.woff"), url("path/to/file.ttf"), url("path/to/file.svg")',
  1232. * }
  1233. */
  1234. function fontFace(_ref) {
  1235. var fontFamily = _ref.fontFamily,
  1236. fontFilePath = _ref.fontFilePath,
  1237. fontStretch = _ref.fontStretch,
  1238. fontStyle = _ref.fontStyle,
  1239. fontVariant = _ref.fontVariant,
  1240. fontWeight = _ref.fontWeight,
  1241. _ref$fileFormats = _ref.fileFormats,
  1242. fileFormats = _ref$fileFormats === void 0 ? ['eot', 'woff2', 'woff', 'ttf', 'svg'] : _ref$fileFormats,
  1243. _ref$formatHint = _ref.formatHint,
  1244. formatHint = _ref$formatHint === void 0 ? false : _ref$formatHint,
  1245. _ref$localFonts = _ref.localFonts,
  1246. localFonts = _ref$localFonts === void 0 ? [fontFamily] : _ref$localFonts,
  1247. unicodeRange = _ref.unicodeRange,
  1248. fontDisplay = _ref.fontDisplay,
  1249. fontVariationSettings = _ref.fontVariationSettings,
  1250. fontFeatureSettings = _ref.fontFeatureSettings;
  1251. // Error Handling
  1252. if (!fontFamily) throw new PolishedError(55);
  1253. if (!fontFilePath && !localFonts) {
  1254. throw new PolishedError(52);
  1255. }
  1256. if (localFonts && !Array.isArray(localFonts)) {
  1257. throw new PolishedError(53);
  1258. }
  1259. if (!Array.isArray(fileFormats)) {
  1260. throw new PolishedError(54);
  1261. }
  1262. var fontFaceDeclaration = {
  1263. '@font-face': {
  1264. fontFamily: fontFamily,
  1265. src: generateSources(fontFilePath, localFonts, fileFormats, formatHint),
  1266. unicodeRange: unicodeRange,
  1267. fontStretch: fontStretch,
  1268. fontStyle: fontStyle,
  1269. fontVariant: fontVariant,
  1270. fontWeight: fontWeight,
  1271. fontDisplay: fontDisplay,
  1272. fontVariationSettings: fontVariationSettings,
  1273. fontFeatureSettings: fontFeatureSettings
  1274. }
  1275. };
  1276. // Removes undefined fields for cleaner css object.
  1277. return JSON.parse(JSON.stringify(fontFaceDeclaration));
  1278. }
  1279. /**
  1280. * CSS to hide text to show a background image in a SEO-friendly way.
  1281. *
  1282. * @example
  1283. * // Styles as object usage
  1284. * const styles = {
  1285. * 'backgroundImage': 'url(logo.png)',
  1286. * ...hideText(),
  1287. * }
  1288. *
  1289. * // styled-components usage
  1290. * const div = styled.div`
  1291. * backgroundImage: url(logo.png);
  1292. * ${hideText()};
  1293. * `
  1294. *
  1295. * // CSS as JS Output
  1296. *
  1297. * 'div': {
  1298. * 'backgroundImage': 'url(logo.png)',
  1299. * 'textIndent': '101%',
  1300. * 'overflow': 'hidden',
  1301. * 'whiteSpace': 'nowrap',
  1302. * }
  1303. */
  1304. function hideText() {
  1305. return {
  1306. textIndent: '101%',
  1307. overflow: 'hidden',
  1308. whiteSpace: 'nowrap'
  1309. };
  1310. }
  1311. /**
  1312. * CSS to hide content visually but remain accessible to screen readers.
  1313. * from [HTML5 Boilerplate](https://github.com/h5bp/html5-boilerplate/blob/9a176f57af1cfe8ec70300da4621fb9b07e5fa31/src/css/main.css#L121)
  1314. *
  1315. * @example
  1316. * // Styles as object usage
  1317. * const styles = {
  1318. * ...hideVisually(),
  1319. * }
  1320. *
  1321. * // styled-components usage
  1322. * const div = styled.div`
  1323. * ${hideVisually()};
  1324. * `
  1325. *
  1326. * // CSS as JS Output
  1327. *
  1328. * 'div': {
  1329. * 'border': '0',
  1330. * 'clip': 'rect(0 0 0 0)',
  1331. * 'height': '1px',
  1332. * 'margin': '-1px',
  1333. * 'overflow': 'hidden',
  1334. * 'padding': '0',
  1335. * 'position': 'absolute',
  1336. * 'whiteSpace': 'nowrap',
  1337. * 'width': '1px',
  1338. * }
  1339. */
  1340. function hideVisually() {
  1341. return {
  1342. border: '0',
  1343. clip: 'rect(0 0 0 0)',
  1344. height: '1px',
  1345. margin: '-1px',
  1346. overflow: 'hidden',
  1347. padding: '0',
  1348. position: 'absolute',
  1349. whiteSpace: 'nowrap',
  1350. width: '1px'
  1351. };
  1352. }
  1353. /**
  1354. * Generates a media query to target HiDPI devices.
  1355. *
  1356. * @example
  1357. * // Styles as object usage
  1358. * const styles = {
  1359. * [hiDPI(1.5)]: {
  1360. * width: 200px;
  1361. * }
  1362. * }
  1363. *
  1364. * // styled-components usage
  1365. * const div = styled.div`
  1366. * ${hiDPI(1.5)} {
  1367. * width: 200px;
  1368. * }
  1369. * `
  1370. *
  1371. * // CSS as JS Output
  1372. *
  1373. * '@media only screen and (-webkit-min-device-pixel-ratio: 1.5),
  1374. * only screen and (min--moz-device-pixel-ratio: 1.5),
  1375. * only screen and (-o-min-device-pixel-ratio: 1.5/1),
  1376. * only screen and (min-resolution: 144dpi),
  1377. * only screen and (min-resolution: 1.5dppx)': {
  1378. * 'width': '200px',
  1379. * }
  1380. */
  1381. function hiDPI(ratio) {
  1382. if (ratio === void 0) {
  1383. ratio = 1.3;
  1384. }
  1385. return "\n @media only screen and (-webkit-min-device-pixel-ratio: " + ratio + "),\n only screen and (min--moz-device-pixel-ratio: " + ratio + "),\n only screen and (-o-min-device-pixel-ratio: " + ratio + "/1),\n only screen and (min-resolution: " + Math.round(ratio * 96) + "dpi),\n only screen and (min-resolution: " + ratio + "dppx)\n ";
  1386. }
  1387. function constructGradientValue(literals) {
  1388. var template = '';
  1389. for (var _len = arguments.length, substitutions = new Array(_len > 1 ? _len - 1 : 0), _key = 1; _key < _len; _key++) {
  1390. substitutions[_key - 1] = arguments[_key];
  1391. }
  1392. for (var i = 0; i < literals.length; i += 1) {
  1393. template += literals[i];
  1394. if (i === substitutions.length - 1 && substitutions[i]) {
  1395. var definedValues = substitutions.filter(function (substitute) {
  1396. return !!substitute;
  1397. });
  1398. // Adds leading coma if properties preceed color-stops
  1399. if (definedValues.length > 1) {
  1400. template = template.slice(0, -1);
  1401. template += ", " + substitutions[i];
  1402. // No trailing space if color-stops is the only param provided
  1403. } else if (definedValues.length === 1) {
  1404. template += "" + substitutions[i];
  1405. }
  1406. } else if (substitutions[i]) {
  1407. template += substitutions[i] + " ";
  1408. }
  1409. }
  1410. return template.trim();
  1411. }
  1412. var _templateObject$1;
  1413. /**
  1414. * CSS for declaring a linear gradient, including a fallback background-color. The fallback is either the first color-stop or an explicitly passed fallback color.
  1415. *
  1416. * @example
  1417. * // Styles as object usage
  1418. * const styles = {
  1419. * ...linearGradient({
  1420. colorStops: ['#00FFFF 0%', 'rgba(0, 0, 255, 0) 50%', '#0000FF 95%'],
  1421. toDirection: 'to top right',
  1422. fallback: '#FFF',
  1423. })
  1424. * }
  1425. *
  1426. * // styled-components usage
  1427. * const div = styled.div`
  1428. * ${linearGradient({
  1429. colorStops: ['#00FFFF 0%', 'rgba(0, 0, 255, 0) 50%', '#0000FF 95%'],
  1430. toDirection: 'to top right',
  1431. fallback: '#FFF',
  1432. })}
  1433. *`
  1434. *
  1435. * // CSS as JS Output
  1436. *
  1437. * div: {
  1438. * 'backgroundColor': '#FFF',
  1439. * 'backgroundImage': 'linear-gradient(to top right, #00FFFF 0%, rgba(0, 0, 255, 0) 50%, #0000FF 95%)',
  1440. * }
  1441. */
  1442. function linearGradient(_ref) {
  1443. var colorStops = _ref.colorStops,
  1444. fallback = _ref.fallback,
  1445. _ref$toDirection = _ref.toDirection,
  1446. toDirection = _ref$toDirection === void 0 ? '' : _ref$toDirection;
  1447. if (!colorStops || colorStops.length < 2) {
  1448. throw new PolishedError(56);
  1449. }
  1450. return {
  1451. backgroundColor: fallback || colorStops[0].replace(/,\s+/g, ',').split(' ')[0].replace(/,(?=\S)/g, ', '),
  1452. backgroundImage: constructGradientValue(_templateObject$1 || (_templateObject$1 = _taggedTemplateLiteralLoose(["linear-gradient(", "", ")"])), toDirection, colorStops.join(', ').replace(/,(?=\S)/g, ', '))
  1453. };
  1454. }
  1455. /**
  1456. * CSS to normalize abnormalities across browsers (normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css)
  1457. *
  1458. * @example
  1459. * // Styles as object usage
  1460. * const styles = {
  1461. * ...normalize(),
  1462. * }
  1463. *
  1464. * // styled-components usage
  1465. * const GlobalStyle = createGlobalStyle`${normalize()}`
  1466. *
  1467. * // CSS as JS Output
  1468. *
  1469. * html {
  1470. * lineHeight: 1.15,
  1471. * textSizeAdjust: 100%,
  1472. * } ...
  1473. */
  1474. function normalize() {
  1475. var _ref;
  1476. return [(_ref = {
  1477. html: {
  1478. lineHeight: '1.15',
  1479. textSizeAdjust: '100%'
  1480. },
  1481. body: {
  1482. margin: '0'
  1483. },
  1484. main: {
  1485. display: 'block'
  1486. },
  1487. h1: {
  1488. fontSize: '2em',
  1489. margin: '0.67em 0'
  1490. },
  1491. hr: {
  1492. boxSizing: 'content-box',
  1493. height: '0',
  1494. overflow: 'visible'
  1495. },
  1496. pre: {
  1497. fontFamily: 'monospace, monospace',
  1498. fontSize: '1em'
  1499. },
  1500. a: {
  1501. backgroundColor: 'transparent'
  1502. },
  1503. 'abbr[title]': {
  1504. borderBottom: 'none',
  1505. textDecoration: 'underline'
  1506. }
  1507. }, _ref["b,\n strong"] = {
  1508. fontWeight: 'bolder'
  1509. }, _ref["code,\n kbd,\n samp"] = {
  1510. fontFamily: 'monospace, monospace',
  1511. fontSize: '1em'
  1512. }, _ref.small = {
  1513. fontSize: '80%'
  1514. }, _ref["sub,\n sup"] = {
  1515. fontSize: '75%',
  1516. lineHeight: '0',
  1517. position: 'relative',
  1518. verticalAlign: 'baseline'
  1519. }, _ref.sub = {
  1520. bottom: '-0.25em'
  1521. }, _ref.sup = {
  1522. top: '-0.5em'
  1523. }, _ref.img = {
  1524. borderStyle: 'none'
  1525. }, _ref["button,\n input,\n optgroup,\n select,\n textarea"] = {
  1526. fontFamily: 'inherit',
  1527. fontSize: '100%',
  1528. lineHeight: '1.15',
  1529. margin: '0'
  1530. }, _ref["button,\n input"] = {
  1531. overflow: 'visible'
  1532. }, _ref["button,\n select"] = {
  1533. textTransform: 'none'
  1534. }, _ref["button,\n html [type=\"button\"],\n [type=\"reset\"],\n [type=\"submit\"]"] = {
  1535. WebkitAppearance: 'button'
  1536. }, _ref["button::-moz-focus-inner,\n [type=\"button\"]::-moz-focus-inner,\n [type=\"reset\"]::-moz-focus-inner,\n [type=\"submit\"]::-moz-focus-inner"] = {
  1537. borderStyle: 'none',
  1538. padding: '0'
  1539. }, _ref["button:-moz-focusring,\n [type=\"button\"]:-moz-focusring,\n [type=\"reset\"]:-moz-focusring,\n [type=\"submit\"]:-moz-focusring"] = {
  1540. outline: '1px dotted ButtonText'
  1541. }, _ref.fieldset = {
  1542. padding: '0.35em 0.625em 0.75em'
  1543. }, _ref.legend = {
  1544. boxSizing: 'border-box',
  1545. color: 'inherit',
  1546. display: 'table',
  1547. maxWidth: '100%',
  1548. padding: '0',
  1549. whiteSpace: 'normal'
  1550. }, _ref.progress = {
  1551. verticalAlign: 'baseline'
  1552. }, _ref.textarea = {
  1553. overflow: 'auto'
  1554. }, _ref["[type=\"checkbox\"],\n [type=\"radio\"]"] = {
  1555. boxSizing: 'border-box',
  1556. padding: '0'
  1557. }, _ref["[type=\"number\"]::-webkit-inner-spin-button,\n [type=\"number\"]::-webkit-outer-spin-button"] = {
  1558. height: 'auto'
  1559. }, _ref['[type="search"]'] = {
  1560. WebkitAppearance: 'textfield',
  1561. outlineOffset: '-2px'
  1562. }, _ref['[type="search"]::-webkit-search-decoration'] = {
  1563. WebkitAppearance: 'none'
  1564. }, _ref['::-webkit-file-upload-button'] = {
  1565. WebkitAppearance: 'button',
  1566. font: 'inherit'
  1567. }, _ref.details = {
  1568. display: 'block'
  1569. }, _ref.summary = {
  1570. display: 'list-item'
  1571. }, _ref.template = {
  1572. display: 'none'
  1573. }, _ref['[hidden]'] = {
  1574. display: 'none'
  1575. }, _ref), {
  1576. 'abbr[title]': {
  1577. textDecoration: 'underline dotted'
  1578. }
  1579. }];
  1580. }
  1581. var _templateObject;
  1582. /**
  1583. * CSS for declaring a radial gradient, including a fallback background-color. The fallback is either the first color-stop or an explicitly passed fallback color.
  1584. *
  1585. * @example
  1586. * // Styles as object usage
  1587. * const styles = {
  1588. * ...radialGradient({
  1589. * colorStops: ['#00FFFF 0%', 'rgba(0, 0, 255, 0) 50%', '#0000FF 95%'],
  1590. * extent: 'farthest-corner at 45px 45px',
  1591. * position: 'center',
  1592. * shape: 'ellipse',
  1593. * })
  1594. * }
  1595. *
  1596. * // styled-components usage
  1597. * const div = styled.div`
  1598. * ${radialGradient({
  1599. * colorStops: ['#00FFFF 0%', 'rgba(0, 0, 255, 0) 50%', '#0000FF 95%'],
  1600. * extent: 'farthest-corner at 45px 45px',
  1601. * position: 'center',
  1602. * shape: 'ellipse',
  1603. * })}
  1604. *`
  1605. *
  1606. * // CSS as JS Output
  1607. *
  1608. * div: {
  1609. * 'backgroundColor': '#00FFFF',
  1610. * 'backgroundImage': 'radial-gradient(center ellipse farthest-corner at 45px 45px, #00FFFF 0%, rgba(0, 0, 255, 0) 50%, #0000FF 95%)',
  1611. * }
  1612. */
  1613. function radialGradient(_ref) {
  1614. var colorStops = _ref.colorStops,
  1615. _ref$extent = _ref.extent,
  1616. extent = _ref$extent === void 0 ? '' : _ref$extent,
  1617. fallback = _ref.fallback,
  1618. _ref$position = _ref.position,
  1619. position = _ref$position === void 0 ? '' : _ref$position,
  1620. _ref$shape = _ref.shape,
  1621. shape = _ref$shape === void 0 ? '' : _ref$shape;
  1622. if (!colorStops || colorStops.length < 2) {
  1623. throw new PolishedError(57);
  1624. }
  1625. return {
  1626. backgroundColor: fallback || colorStops[0].split(' ')[0],
  1627. backgroundImage: constructGradientValue(_templateObject || (_templateObject = _taggedTemplateLiteralLoose(["radial-gradient(", "", "", "", ")"])), position, shape, extent, colorStops.join(', '))
  1628. };
  1629. }
  1630. /**
  1631. * A helper to generate a retina background image and non-retina
  1632. * background image. The retina background image will output to a HiDPI media query. The mixin uses
  1633. * a _2x.png filename suffix by default.
  1634. *
  1635. * @example
  1636. * // Styles as object usage
  1637. * const styles = {
  1638. * ...retinaImage('my-img')
  1639. * }
  1640. *
  1641. * // styled-components usage
  1642. * const div = styled.div`
  1643. * ${retinaImage('my-img')}
  1644. * `
  1645. *
  1646. * // CSS as JS Output
  1647. * div {
  1648. * backgroundImage: 'url(my-img.png)',
  1649. * '@media only screen and (-webkit-min-device-pixel-ratio: 1.3),
  1650. * only screen and (min--moz-device-pixel-ratio: 1.3),
  1651. * only screen and (-o-min-device-pixel-ratio: 1.3/1),
  1652. * only screen and (min-resolution: 144dpi),
  1653. * only screen and (min-resolution: 1.5dppx)': {
  1654. * backgroundImage: 'url(my-img_2x.png)',
  1655. * }
  1656. * }
  1657. */
  1658. function retinaImage(filename, backgroundSize, extension, retinaFilename, retinaSuffix) {
  1659. var _ref;
  1660. if (extension === void 0) {
  1661. extension = 'png';
  1662. }
  1663. if (retinaSuffix === void 0) {
  1664. retinaSuffix = '_2x';
  1665. }
  1666. if (!filename) {
  1667. throw new PolishedError(58);
  1668. }
  1669. // Replace the dot at the beginning of the passed extension if one exists
  1670. var ext = extension.replace(/^\./, '');
  1671. var rFilename = retinaFilename ? retinaFilename + "." + ext : "" + filename + retinaSuffix + "." + ext;
  1672. return _ref = {
  1673. backgroundImage: "url(" + filename + "." + ext + ")"
  1674. }, _ref[hiDPI()] = _extends({
  1675. backgroundImage: "url(" + rFilename + ")"
  1676. }, backgroundSize ? {
  1677. backgroundSize: backgroundSize
  1678. } : {}), _ref;
  1679. }
  1680. /* eslint-disable key-spacing */
  1681. var functionsMap = {
  1682. easeInBack: 'cubic-bezier(0.600, -0.280, 0.735, 0.045)',
  1683. easeInCirc: 'cubic-bezier(0.600, 0.040, 0.980, 0.335)',
  1684. easeInCubic: 'cubic-bezier(0.550, 0.055, 0.675, 0.190)',
  1685. easeInExpo: 'cubic-bezier(0.950, 0.050, 0.795, 0.035)',
  1686. easeInQuad: 'cubic-bezier(0.550, 0.085, 0.680, 0.530)',
  1687. easeInQuart: 'cubic-bezier(0.895, 0.030, 0.685, 0.220)',
  1688. easeInQuint: 'cubic-bezier(0.755, 0.050, 0.855, 0.060)',
  1689. easeInSine: 'cubic-bezier(0.470, 0.000, 0.745, 0.715)',
  1690. easeOutBack: 'cubic-bezier(0.175, 0.885, 0.320, 1.275)',
  1691. easeOutCubic: 'cubic-bezier(0.215, 0.610, 0.355, 1.000)',
  1692. easeOutCirc: 'cubic-bezier(0.075, 0.820, 0.165, 1.000)',
  1693. easeOutExpo: 'cubic-bezier(0.190, 1.000, 0.220, 1.000)',
  1694. easeOutQuad: 'cubic-bezier(0.250, 0.460, 0.450, 0.940)',
  1695. easeOutQuart: 'cubic-bezier(0.165, 0.840, 0.440, 1.000)',
  1696. easeOutQuint: 'cubic-bezier(0.230, 1.000, 0.320, 1.000)',
  1697. easeOutSine: 'cubic-bezier(0.390, 0.575, 0.565, 1.000)',
  1698. easeInOutBack: 'cubic-bezier(0.680, -0.550, 0.265, 1.550)',
  1699. easeInOutCirc: 'cubic-bezier(0.785, 0.135, 0.150, 0.860)',
  1700. easeInOutCubic: 'cubic-bezier(0.645, 0.045, 0.355, 1.000)',
  1701. easeInOutExpo: 'cubic-bezier(1.000, 0.000, 0.000, 1.000)',
  1702. easeInOutQuad: 'cubic-bezier(0.455, 0.030, 0.515, 0.955)',
  1703. easeInOutQuart: 'cubic-bezier(0.770, 0.000, 0.175, 1.000)',
  1704. easeInOutQuint: 'cubic-bezier(0.860, 0.000, 0.070, 1.000)',
  1705. easeInOutSine: 'cubic-bezier(0.445, 0.050, 0.550, 0.950)'
  1706. };
  1707. /* eslint-enable key-spacing */
  1708. function getTimingFunction(functionName) {
  1709. return functionsMap[functionName];
  1710. }
  1711. /**
  1712. * String to represent common easing functions as demonstrated here: (github.com/jaukia/easie).
  1713. *
  1714. * @deprecated - This will be deprecated in v5 in favor of `easeIn`, `easeOut`, `easeInOut`.
  1715. *
  1716. * @example
  1717. * // Styles as object usage
  1718. * const styles = {
  1719. * 'transitionTimingFunction': timingFunctions('easeInQuad')
  1720. * }
  1721. *
  1722. * // styled-components usage
  1723. * const div = styled.div`
  1724. * transitionTimingFunction: ${timingFunctions('easeInQuad')};
  1725. * `
  1726. *
  1727. * // CSS as JS Output
  1728. *
  1729. * 'div': {
  1730. * 'transitionTimingFunction': 'cubic-bezier(0.550, 0.085, 0.680, 0.530)',
  1731. * }
  1732. */
  1733. function timingFunctions(timingFunction) {
  1734. return getTimingFunction(timingFunction);
  1735. }
  1736. var getBorderWidth = function getBorderWidth(pointingDirection, height, width) {
  1737. var fullWidth = "" + width[0] + (width[1] || '');
  1738. var halfWidth = "" + width[0] / 2 + (width[1] || '');
  1739. var fullHeight = "" + height[0] + (height[1] || '');
  1740. var halfHeight = "" + height[0] / 2 + (height[1] || '');
  1741. switch (pointingDirection) {
  1742. case 'top':
  1743. return "0 " + halfWidth + " " + fullHeight + " " + halfWidth;
  1744. case 'topLeft':
  1745. return fullWidth + " " + fullHeight + " 0 0";
  1746. case 'left':
  1747. return halfHeight + " " + fullWidth + " " + halfHeight + " 0";
  1748. case 'bottomLeft':
  1749. return fullWidth + " 0 0 " + fullHeight;
  1750. case 'bottom':
  1751. return fullHeight + " " + halfWidth + " 0 " + halfWidth;
  1752. case 'bottomRight':
  1753. return "0 0 " + fullWidth + " " + fullHeight;
  1754. case 'right':
  1755. return halfHeight + " 0 " + halfHeight + " " + fullWidth;
  1756. case 'topRight':
  1757. default:
  1758. return "0 " + fullWidth + " " + fullHeight + " 0";
  1759. }
  1760. };
  1761. var getBorderColor = function getBorderColor(pointingDirection, foregroundColor) {
  1762. switch (pointingDirection) {
  1763. case 'top':
  1764. case 'bottomRight':
  1765. return {
  1766. borderBottomColor: foregroundColor
  1767. };
  1768. case 'right':
  1769. case 'bottomLeft':
  1770. return {
  1771. borderLeftColor: foregroundColor
  1772. };
  1773. case 'bottom':
  1774. case 'topLeft':
  1775. return {
  1776. borderTopColor: foregroundColor
  1777. };
  1778. case 'left':
  1779. case 'topRight':
  1780. return {
  1781. borderRightColor: foregroundColor
  1782. };
  1783. default:
  1784. throw new PolishedError(59);
  1785. }
  1786. };
  1787. /**
  1788. * CSS to represent triangle with any pointing direction with an optional background color.
  1789. *
  1790. * @example
  1791. * // Styles as object usage
  1792. *
  1793. * const styles = {
  1794. * ...triangle({ pointingDirection: 'right', width: '100px', height: '100px', foregroundColor: 'red' })
  1795. * }
  1796. *
  1797. *
  1798. * // styled-components usage
  1799. * const div = styled.div`
  1800. * ${triangle({ pointingDirection: 'right', width: '100px', height: '100px', foregroundColor: 'red' })}
  1801. *
  1802. *
  1803. * // CSS as JS Output
  1804. *
  1805. * div: {
  1806. * 'borderColor': 'transparent transparent transparent red',
  1807. * 'borderStyle': 'solid',
  1808. * 'borderWidth': '50px 0 50px 100px',
  1809. * 'height': '0',
  1810. * 'width': '0',
  1811. * }
  1812. */
  1813. function triangle(_ref) {
  1814. var pointingDirection = _ref.pointingDirection,
  1815. height = _ref.height,
  1816. width = _ref.width,
  1817. foregroundColor = _ref.foregroundColor,
  1818. _ref$backgroundColor = _ref.backgroundColor,
  1819. backgroundColor = _ref$backgroundColor === void 0 ? 'transparent' : _ref$backgroundColor;
  1820. var widthAndUnit = getValueAndUnit(width);
  1821. var heightAndUnit = getValueAndUnit(height);
  1822. if (isNaN(heightAndUnit[0]) || isNaN(widthAndUnit[0])) {
  1823. throw new PolishedError(60);
  1824. }
  1825. return _extends({
  1826. width: '0',
  1827. height: '0',
  1828. borderColor: backgroundColor
  1829. }, getBorderColor(pointingDirection, foregroundColor), {
  1830. borderStyle: 'solid',
  1831. borderWidth: getBorderWidth(pointingDirection, heightAndUnit, widthAndUnit)
  1832. });
  1833. }
  1834. /**
  1835. * Provides an easy way to change the `wordWrap` property.
  1836. *
  1837. * @example
  1838. * // Styles as object usage
  1839. * const styles = {
  1840. * ...wordWrap('break-word')
  1841. * }
  1842. *
  1843. * // styled-components usage
  1844. * const div = styled.div`
  1845. * ${wordWrap('break-word')}
  1846. * `
  1847. *
  1848. * // CSS as JS Output
  1849. *
  1850. * const styles = {
  1851. * overflowWrap: 'break-word',
  1852. * wordWrap: 'break-word',
  1853. * wordBreak: 'break-all',
  1854. * }
  1855. */
  1856. function wordWrap(wrap) {
  1857. if (wrap === void 0) {
  1858. wrap = 'break-word';
  1859. }
  1860. var wordBreak = wrap === 'break-word' ? 'break-all' : wrap;
  1861. return {
  1862. overflowWrap: wrap,
  1863. wordWrap: wrap,
  1864. wordBreak: wordBreak
  1865. };
  1866. }
  1867. function colorToInt(color) {
  1868. return Math.round(color * 255);
  1869. }
  1870. function convertToInt(red, green, blue) {
  1871. return colorToInt(red) + "," + colorToInt(green) + "," + colorToInt(blue);
  1872. }
  1873. function hslToRgb(hue, saturation, lightness, convert) {
  1874. if (convert === void 0) {
  1875. convert = convertToInt;
  1876. }
  1877. if (saturation === 0) {
  1878. // achromatic
  1879. return convert(lightness, lightness, lightness);
  1880. }
  1881. // formulae from https://en.wikipedia.org/wiki/HSL_and_HSV
  1882. var huePrime = (hue % 360 + 360) % 360 / 60;
  1883. var chroma = (1 - Math.abs(2 * lightness - 1)) * saturation;
  1884. var secondComponent = chroma * (1 - Math.abs(huePrime % 2 - 1));
  1885. var red = 0;
  1886. var green = 0;
  1887. var blue = 0;
  1888. if (huePrime >= 0 && huePrime < 1) {
  1889. red = chroma;
  1890. green = secondComponent;
  1891. } else if (huePrime >= 1 && huePrime < 2) {
  1892. red = secondComponent;
  1893. green = chroma;
  1894. } else if (huePrime >= 2 && huePrime < 3) {
  1895. green = chroma;
  1896. blue = secondComponent;
  1897. } else if (huePrime >= 3 && huePrime < 4) {
  1898. green = secondComponent;
  1899. blue = chroma;
  1900. } else if (huePrime >= 4 && huePrime < 5) {
  1901. red = secondComponent;
  1902. blue = chroma;
  1903. } else if (huePrime >= 5 && huePrime < 6) {
  1904. red = chroma;
  1905. blue = secondComponent;
  1906. }
  1907. var lightnessModification = lightness - chroma / 2;
  1908. var finalRed = red + lightnessModification;
  1909. var finalGreen = green + lightnessModification;
  1910. var finalBlue = blue + lightnessModification;
  1911. return convert(finalRed, finalGreen, finalBlue);
  1912. }
  1913. var namedColorMap = {
  1914. aliceblue: 'f0f8ff',
  1915. antiquewhite: 'faebd7',
  1916. aqua: '00ffff',
  1917. aquamarine: '7fffd4',
  1918. azure: 'f0ffff',
  1919. beige: 'f5f5dc',
  1920. bisque: 'ffe4c4',
  1921. black: '000',
  1922. blanchedalmond: 'ffebcd',
  1923. blue: '0000ff',
  1924. blueviolet: '8a2be2',
  1925. brown: 'a52a2a',
  1926. burlywood: 'deb887',
  1927. cadetblue: '5f9ea0',
  1928. chartreuse: '7fff00',
  1929. chocolate: 'd2691e',
  1930. coral: 'ff7f50',
  1931. cornflowerblue: '6495ed',
  1932. cornsilk: 'fff8dc',
  1933. crimson: 'dc143c',
  1934. cyan: '00ffff',
  1935. darkblue: '00008b',
  1936. darkcyan: '008b8b',
  1937. darkgoldenrod: 'b8860b',
  1938. darkgray: 'a9a9a9',
  1939. darkgreen: '006400',
  1940. darkgrey: 'a9a9a9',
  1941. darkkhaki: 'bdb76b',
  1942. darkmagenta: '8b008b',
  1943. darkolivegreen: '556b2f',
  1944. darkorange: 'ff8c00',
  1945. darkorchid: '9932cc',
  1946. darkred: '8b0000',
  1947. darksalmon: 'e9967a',
  1948. darkseagreen: '8fbc8f',
  1949. darkslateblue: '483d8b',
  1950. darkslategray: '2f4f4f',
  1951. darkslategrey: '2f4f4f',
  1952. darkturquoise: '00ced1',
  1953. darkviolet: '9400d3',
  1954. deeppink: 'ff1493',
  1955. deepskyblue: '00bfff',
  1956. dimgray: '696969',
  1957. dimgrey: '696969',
  1958. dodgerblue: '1e90ff',
  1959. firebrick: 'b22222',
  1960. floralwhite: 'fffaf0',
  1961. forestgreen: '228b22',
  1962. fuchsia: 'ff00ff',
  1963. gainsboro: 'dcdcdc',
  1964. ghostwhite: 'f8f8ff',
  1965. gold: 'ffd700',
  1966. goldenrod: 'daa520',
  1967. gray: '808080',
  1968. green: '008000',
  1969. greenyellow: 'adff2f',
  1970. grey: '808080',
  1971. honeydew: 'f0fff0',
  1972. hotpink: 'ff69b4',
  1973. indianred: 'cd5c5c',
  1974. indigo: '4b0082',
  1975. ivory: 'fffff0',
  1976. khaki: 'f0e68c',
  1977. lavender: 'e6e6fa',
  1978. lavenderblush: 'fff0f5',
  1979. lawngreen: '7cfc00',
  1980. lemonchiffon: 'fffacd',
  1981. lightblue: 'add8e6',
  1982. lightcoral: 'f08080',
  1983. lightcyan: 'e0ffff',
  1984. lightgoldenrodyellow: 'fafad2',
  1985. lightgray: 'd3d3d3',
  1986. lightgreen: '90ee90',
  1987. lightgrey: 'd3d3d3',
  1988. lightpink: 'ffb6c1',
  1989. lightsalmon: 'ffa07a',
  1990. lightseagreen: '20b2aa',
  1991. lightskyblue: '87cefa',
  1992. lightslategray: '789',
  1993. lightslategrey: '789',
  1994. lightsteelblue: 'b0c4de',
  1995. lightyellow: 'ffffe0',
  1996. lime: '0f0',
  1997. limegreen: '32cd32',
  1998. linen: 'faf0e6',
  1999. magenta: 'f0f',
  2000. maroon: '800000',
  2001. mediumaquamarine: '66cdaa',
  2002. mediumblue: '0000cd',
  2003. mediumorchid: 'ba55d3',
  2004. mediumpurple: '9370db',
  2005. mediumseagreen: '3cb371',
  2006. mediumslateblue: '7b68ee',
  2007. mediumspringgreen: '00fa9a',
  2008. mediumturquoise: '48d1cc',
  2009. mediumvioletred: 'c71585',
  2010. midnightblue: '191970',
  2011. mintcream: 'f5fffa',
  2012. mistyrose: 'ffe4e1',
  2013. moccasin: 'ffe4b5',
  2014. navajowhite: 'ffdead',
  2015. navy: '000080',
  2016. oldlace: 'fdf5e6',
  2017. olive: '808000',
  2018. olivedrab: '6b8e23',
  2019. orange: 'ffa500',
  2020. orangered: 'ff4500',
  2021. orchid: 'da70d6',
  2022. palegoldenrod: 'eee8aa',
  2023. palegreen: '98fb98',
  2024. paleturquoise: 'afeeee',
  2025. palevioletred: 'db7093',
  2026. papayawhip: 'ffefd5',
  2027. peachpuff: 'ffdab9',
  2028. peru: 'cd853f',
  2029. pink: 'ffc0cb',
  2030. plum: 'dda0dd',
  2031. powderblue: 'b0e0e6',
  2032. purple: '800080',
  2033. rebeccapurple: '639',
  2034. red: 'f00',
  2035. rosybrown: 'bc8f8f',
  2036. royalblue: '4169e1',
  2037. saddlebrown: '8b4513',
  2038. salmon: 'fa8072',
  2039. sandybrown: 'f4a460',
  2040. seagreen: '2e8b57',
  2041. seashell: 'fff5ee',
  2042. sienna: 'a0522d',
  2043. silver: 'c0c0c0',
  2044. skyblue: '87ceeb',
  2045. slateblue: '6a5acd',
  2046. slategray: '708090',
  2047. slategrey: '708090',
  2048. snow: 'fffafa',
  2049. springgreen: '00ff7f',
  2050. steelblue: '4682b4',
  2051. tan: 'd2b48c',
  2052. teal: '008080',
  2053. thistle: 'd8bfd8',
  2054. tomato: 'ff6347',
  2055. turquoise: '40e0d0',
  2056. violet: 'ee82ee',
  2057. wheat: 'f5deb3',
  2058. white: 'fff',
  2059. whitesmoke: 'f5f5f5',
  2060. yellow: 'ff0',
  2061. yellowgreen: '9acd32'
  2062. };
  2063. /**
  2064. * Checks if a string is a CSS named color and returns its equivalent hex value, otherwise returns the original color.
  2065. * @private
  2066. */
  2067. function nameToHex(color) {
  2068. if (typeof color !== 'string') return color;
  2069. var normalizedColorName = color.toLowerCase();
  2070. return namedColorMap[normalizedColorName] ? "#" + namedColorMap[normalizedColorName] : color;
  2071. }
  2072. var hexRegex = /^#[a-fA-F0-9]{6}$/;
  2073. var hexRgbaRegex = /^#[a-fA-F0-9]{8}$/;
  2074. var reducedHexRegex = /^#[a-fA-F0-9]{3}$/;
  2075. var reducedRgbaHexRegex = /^#[a-fA-F0-9]{4}$/;
  2076. var rgbRegex = /^rgb\(\s*(\d{1,3})\s*(?:,)?\s*(\d{1,3})\s*(?:,)?\s*(\d{1,3})\s*\)$/i;
  2077. var rgbaRegex = /^rgb(?:a)?\(\s*(\d{1,3})\s*(?:,)?\s*(\d{1,3})\s*(?:,)?\s*(\d{1,3})\s*(?:,|\/)\s*([-+]?\d*[.]?\d+[%]?)\s*\)$/i;
  2078. var hslRegex = /^hsl\(\s*(\d{0,3}[.]?[0-9]+(?:deg)?)\s*(?:,)?\s*(\d{1,3}[.]?[0-9]?)%\s*(?:,)?\s*(\d{1,3}[.]?[0-9]?)%\s*\)$/i;
  2079. var hslaRegex = /^hsl(?:a)?\(\s*(\d{0,3}[.]?[0-9]+(?:deg)?)\s*(?:,)?\s*(\d{1,3}[.]?[0-9]?)%\s*(?:,)?\s*(\d{1,3}[.]?[0-9]?)%\s*(?:,|\/)\s*([-+]?\d*[.]?\d+[%]?)\s*\)$/i;
  2080. /**
  2081. * Returns an RgbColor or RgbaColor object. This utility function is only useful
  2082. * if want to extract a color component. With the color util `toColorString` you
  2083. * can convert a RgbColor or RgbaColor object back to a string.
  2084. *
  2085. * @example
  2086. * // Assigns `{ red: 255, green: 0, blue: 0 }` to color1
  2087. * const color1 = parseToRgb('rgb(255, 0, 0)');
  2088. * // Assigns `{ red: 92, green: 102, blue: 112, alpha: 0.75 }` to color2
  2089. * const color2 = parseToRgb('hsla(210, 10%, 40%, 0.75)');
  2090. */
  2091. function parseToRgb(color) {
  2092. if (typeof color !== 'string') {
  2093. throw new PolishedError(3);
  2094. }
  2095. var normalizedColor = nameToHex(color);
  2096. if (normalizedColor.match(hexRegex)) {
  2097. return {
  2098. red: parseInt("" + normalizedColor[1] + normalizedColor[2], 16),
  2099. green: parseInt("" + normalizedColor[3] + normalizedColor[4], 16),
  2100. blue: parseInt("" + normalizedColor[5] + normalizedColor[6], 16)
  2101. };
  2102. }
  2103. if (normalizedColor.match(hexRgbaRegex)) {
  2104. var alpha = parseFloat((parseInt("" + normalizedColor[7] + normalizedColor[8], 16) / 255).toFixed(2));
  2105. return {
  2106. red: parseInt("" + normalizedColor[1] + normalizedColor[2], 16),
  2107. green: parseInt("" + normalizedColor[3] + normalizedColor[4], 16),
  2108. blue: parseInt("" + normalizedColor[5] + normalizedColor[6], 16),
  2109. alpha: alpha
  2110. };
  2111. }
  2112. if (normalizedColor.match(reducedHexRegex)) {
  2113. return {
  2114. red: parseInt("" + normalizedColor[1] + normalizedColor[1], 16),
  2115. green: parseInt("" + normalizedColor[2] + normalizedColor[2], 16),
  2116. blue: parseInt("" + normalizedColor[3] + normalizedColor[3], 16)
  2117. };
  2118. }
  2119. if (normalizedColor.match(reducedRgbaHexRegex)) {
  2120. var _alpha = parseFloat((parseInt("" + normalizedColor[4] + normalizedColor[4], 16) / 255).toFixed(2));
  2121. return {
  2122. red: parseInt("" + normalizedColor[1] + normalizedColor[1], 16),
  2123. green: parseInt("" + normalizedColor[2] + normalizedColor[2], 16),
  2124. blue: parseInt("" + normalizedColor[3] + normalizedColor[3], 16),
  2125. alpha: _alpha
  2126. };
  2127. }
  2128. var rgbMatched = rgbRegex.exec(normalizedColor);
  2129. if (rgbMatched) {
  2130. return {
  2131. red: parseInt("" + rgbMatched[1], 10),
  2132. green: parseInt("" + rgbMatched[2], 10),
  2133. blue: parseInt("" + rgbMatched[3], 10)
  2134. };
  2135. }
  2136. var rgbaMatched = rgbaRegex.exec(normalizedColor.substring(0, 50));
  2137. if (rgbaMatched) {
  2138. return {
  2139. red: parseInt("" + rgbaMatched[1], 10),
  2140. green: parseInt("" + rgbaMatched[2], 10),
  2141. blue: parseInt("" + rgbaMatched[3], 10),
  2142. alpha: parseFloat("" + rgbaMatched[4]) > 1 ? parseFloat("" + rgbaMatched[4]) / 100 : parseFloat("" + rgbaMatched[4])
  2143. };
  2144. }
  2145. var hslMatched = hslRegex.exec(normalizedColor);
  2146. if (hslMatched) {
  2147. var hue = parseInt("" + hslMatched[1], 10);
  2148. var saturation = parseInt("" + hslMatched[2], 10) / 100;
  2149. var lightness = parseInt("" + hslMatched[3], 10) / 100;
  2150. var rgbColorString = "rgb(" + hslToRgb(hue, saturation, lightness) + ")";
  2151. var hslRgbMatched = rgbRegex.exec(rgbColorString);
  2152. if (!hslRgbMatched) {
  2153. throw new PolishedError(4, normalizedColor, rgbColorString);
  2154. }
  2155. return {
  2156. red: parseInt("" + hslRgbMatched[1], 10),
  2157. green: parseInt("" + hslRgbMatched[2], 10),
  2158. blue: parseInt("" + hslRgbMatched[3], 10)
  2159. };
  2160. }
  2161. var hslaMatched = hslaRegex.exec(normalizedColor.substring(0, 50));
  2162. if (hslaMatched) {
  2163. var _hue = parseInt("" + hslaMatched[1], 10);
  2164. var _saturation = parseInt("" + hslaMatched[2], 10) / 100;
  2165. var _lightness = parseInt("" + hslaMatched[3], 10) / 100;
  2166. var _rgbColorString = "rgb(" + hslToRgb(_hue, _saturation, _lightness) + ")";
  2167. var _hslRgbMatched = rgbRegex.exec(_rgbColorString);
  2168. if (!_hslRgbMatched) {
  2169. throw new PolishedError(4, normalizedColor, _rgbColorString);
  2170. }
  2171. return {
  2172. red: parseInt("" + _hslRgbMatched[1], 10),
  2173. green: parseInt("" + _hslRgbMatched[2], 10),
  2174. blue: parseInt("" + _hslRgbMatched[3], 10),
  2175. alpha: parseFloat("" + hslaMatched[4]) > 1 ? parseFloat("" + hslaMatched[4]) / 100 : parseFloat("" + hslaMatched[4])
  2176. };
  2177. }
  2178. throw new PolishedError(5);
  2179. }
  2180. function rgbToHsl(color) {
  2181. // make sure rgb are contained in a set of [0, 255]
  2182. var red = color.red / 255;
  2183. var green = color.green / 255;
  2184. var blue = color.blue / 255;
  2185. var max = Math.max(red, green, blue);
  2186. var min = Math.min(red, green, blue);
  2187. var lightness = (max + min) / 2;
  2188. if (max === min) {
  2189. // achromatic
  2190. if (color.alpha !== undefined) {
  2191. return {
  2192. hue: 0,
  2193. saturation: 0,
  2194. lightness: lightness,
  2195. alpha: color.alpha
  2196. };
  2197. } else {
  2198. return {
  2199. hue: 0,
  2200. saturation: 0,
  2201. lightness: lightness
  2202. };
  2203. }
  2204. }
  2205. var hue;
  2206. var delta = max - min;
  2207. var saturation = lightness > 0.5 ? delta / (2 - max - min) : delta / (max + min);
  2208. switch (max) {
  2209. case red:
  2210. hue = (green - blue) / delta + (green < blue ? 6 : 0);
  2211. break;
  2212. case green:
  2213. hue = (blue - red) / delta + 2;
  2214. break;
  2215. default:
  2216. // blue case
  2217. hue = (red - green) / delta + 4;
  2218. break;
  2219. }
  2220. hue *= 60;
  2221. if (color.alpha !== undefined) {
  2222. return {
  2223. hue: hue,
  2224. saturation: saturation,
  2225. lightness: lightness,
  2226. alpha: color.alpha
  2227. };
  2228. }
  2229. return {
  2230. hue: hue,
  2231. saturation: saturation,
  2232. lightness: lightness
  2233. };
  2234. }
  2235. /**
  2236. * Returns an HslColor or HslaColor object. This utility function is only useful
  2237. * if want to extract a color component. With the color util `toColorString` you
  2238. * can convert a HslColor or HslaColor object back to a string.
  2239. *
  2240. * @example
  2241. * // Assigns `{ hue: 0, saturation: 1, lightness: 0.5 }` to color1
  2242. * const color1 = parseToHsl('rgb(255, 0, 0)');
  2243. * // Assigns `{ hue: 128, saturation: 1, lightness: 0.5, alpha: 0.75 }` to color2
  2244. * const color2 = parseToHsl('hsla(128, 100%, 50%, 0.75)');
  2245. */
  2246. function parseToHsl(color) {
  2247. // Note: At a later stage we can optimize this function as right now a hsl
  2248. // color would be parsed converted to rgb values and converted back to hsl.
  2249. return rgbToHsl(parseToRgb(color));
  2250. }
  2251. /**
  2252. * Reduces hex values if possible e.g. #ff8866 to #f86
  2253. * @private
  2254. */
  2255. var reduceHexValue = function reduceHexValue(value) {
  2256. if (value.length === 7 && value[1] === value[2] && value[3] === value[4] && value[5] === value[6]) {
  2257. return "#" + value[1] + value[3] + value[5];
  2258. }
  2259. return value;
  2260. };
  2261. var reduceHexValue$1 = reduceHexValue;
  2262. function numberToHex(value) {
  2263. var hex = value.toString(16);
  2264. return hex.length === 1 ? "0" + hex : hex;
  2265. }
  2266. function colorToHex(color) {
  2267. return numberToHex(Math.round(color * 255));
  2268. }
  2269. function convertToHex(red, green, blue) {
  2270. return reduceHexValue$1("#" + colorToHex(red) + colorToHex(green) + colorToHex(blue));
  2271. }
  2272. function hslToHex(hue, saturation, lightness) {
  2273. return hslToRgb(hue, saturation, lightness, convertToHex);
  2274. }
  2275. /**
  2276. * Returns a string value for the color. The returned result is the smallest possible hex notation.
  2277. *
  2278. * @example
  2279. * // Styles as object usage
  2280. * const styles = {
  2281. * background: hsl(359, 0.75, 0.4),
  2282. * background: hsl({ hue: 360, saturation: 0.75, lightness: 0.4 }),
  2283. * }
  2284. *
  2285. * // styled-components usage
  2286. * const div = styled.div`
  2287. * background: ${hsl(359, 0.75, 0.4)};
  2288. * background: ${hsl({ hue: 360, saturation: 0.75, lightness: 0.4 })};
  2289. * `
  2290. *
  2291. * // CSS in JS Output
  2292. *
  2293. * element {
  2294. * background: "#b3191c";
  2295. * background: "#b3191c";
  2296. * }
  2297. */
  2298. function hsl(value, saturation, lightness) {
  2299. if (typeof value === 'number' && typeof saturation === 'number' && typeof lightness === 'number') {
  2300. return hslToHex(value, saturation, lightness);
  2301. } else if (typeof value === 'object' && saturation === undefined && lightness === undefined) {
  2302. return hslToHex(value.hue, value.saturation, value.lightness);
  2303. }
  2304. throw new PolishedError(1);
  2305. }
  2306. /**
  2307. * Returns a string value for the color. The returned result is the smallest possible rgba or hex notation.
  2308. *
  2309. * @example
  2310. * // Styles as object usage
  2311. * const styles = {
  2312. * background: hsla(359, 0.75, 0.4, 0.7),
  2313. * background: hsla({ hue: 360, saturation: 0.75, lightness: 0.4, alpha: 0,7 }),
  2314. * background: hsla(359, 0.75, 0.4, 1),
  2315. * }
  2316. *
  2317. * // styled-components usage
  2318. * const div = styled.div`
  2319. * background: ${hsla(359, 0.75, 0.4, 0.7)};
  2320. * background: ${hsla({ hue: 360, saturation: 0.75, lightness: 0.4, alpha: 0,7 })};
  2321. * background: ${hsla(359, 0.75, 0.4, 1)};
  2322. * `
  2323. *
  2324. * // CSS in JS Output
  2325. *
  2326. * element {
  2327. * background: "rgba(179,25,28,0.7)";
  2328. * background: "rgba(179,25,28,0.7)";
  2329. * background: "#b3191c";
  2330. * }
  2331. */
  2332. function hsla(value, saturation, lightness, alpha) {
  2333. if (typeof value === 'number' && typeof saturation === 'number' && typeof lightness === 'number' && typeof alpha === 'number') {
  2334. return alpha >= 1 ? hslToHex(value, saturation, lightness) : "rgba(" + hslToRgb(value, saturation, lightness) + "," + alpha + ")";
  2335. } else if (typeof value === 'object' && saturation === undefined && lightness === undefined && alpha === undefined) {
  2336. return value.alpha >= 1 ? hslToHex(value.hue, value.saturation, value.lightness) : "rgba(" + hslToRgb(value.hue, value.saturation, value.lightness) + "," + value.alpha + ")";
  2337. }
  2338. throw new PolishedError(2);
  2339. }
  2340. /**
  2341. * Returns a string value for the color. The returned result is the smallest possible hex notation.
  2342. *
  2343. * @example
  2344. * // Styles as object usage
  2345. * const styles = {
  2346. * background: rgb(255, 205, 100),
  2347. * background: rgb({ red: 255, green: 205, blue: 100 }),
  2348. * }
  2349. *
  2350. * // styled-components usage
  2351. * const div = styled.div`
  2352. * background: ${rgb(255, 205, 100)};
  2353. * background: ${rgb({ red: 255, green: 205, blue: 100 })};
  2354. * `
  2355. *
  2356. * // CSS in JS Output
  2357. *
  2358. * element {
  2359. * background: "#ffcd64";
  2360. * background: "#ffcd64";
  2361. * }
  2362. */
  2363. function rgb(value, green, blue) {
  2364. if (typeof value === 'number' && typeof green === 'number' && typeof blue === 'number') {
  2365. return reduceHexValue$1("#" + numberToHex(value) + numberToHex(green) + numberToHex(blue));
  2366. } else if (typeof value === 'object' && green === undefined && blue === undefined) {
  2367. return reduceHexValue$1("#" + numberToHex(value.red) + numberToHex(value.green) + numberToHex(value.blue));
  2368. }
  2369. throw new PolishedError(6);
  2370. }
  2371. /**
  2372. * Returns a string value for the color. The returned result is the smallest possible rgba or hex notation.
  2373. *
  2374. * Can also be used to fade a color by passing a hex value or named CSS color along with an alpha value.
  2375. *
  2376. * @example
  2377. * // Styles as object usage
  2378. * const styles = {
  2379. * background: rgba(255, 205, 100, 0.7),
  2380. * background: rgba({ red: 255, green: 205, blue: 100, alpha: 0.7 }),
  2381. * background: rgba(255, 205, 100, 1),
  2382. * background: rgba('#ffffff', 0.4),
  2383. * background: rgba('black', 0.7),
  2384. * }
  2385. *
  2386. * // styled-components usage
  2387. * const div = styled.div`
  2388. * background: ${rgba(255, 205, 100, 0.7)};
  2389. * background: ${rgba({ red: 255, green: 205, blue: 100, alpha: 0.7 })};
  2390. * background: ${rgba(255, 205, 100, 1)};
  2391. * background: ${rgba('#ffffff', 0.4)};
  2392. * background: ${rgba('black', 0.7)};
  2393. * `
  2394. *
  2395. * // CSS in JS Output
  2396. *
  2397. * element {
  2398. * background: "rgba(255,205,100,0.7)";
  2399. * background: "rgba(255,205,100,0.7)";
  2400. * background: "#ffcd64";
  2401. * background: "rgba(255,255,255,0.4)";
  2402. * background: "rgba(0,0,0,0.7)";
  2403. * }
  2404. */
  2405. function rgba(firstValue, secondValue, thirdValue, fourthValue) {
  2406. if (typeof firstValue === 'string' && typeof secondValue === 'number') {
  2407. var rgbValue = parseToRgb(firstValue);
  2408. return "rgba(" + rgbValue.red + "," + rgbValue.green + "," + rgbValue.blue + "," + secondValue + ")";
  2409. } else if (typeof firstValue === 'number' && typeof secondValue === 'number' && typeof thirdValue === 'number' && typeof fourthValue === 'number') {
  2410. return fourthValue >= 1 ? rgb(firstValue, secondValue, thirdValue) : "rgba(" + firstValue + "," + secondValue + "," + thirdValue + "," + fourthValue + ")";
  2411. } else if (typeof firstValue === 'object' && secondValue === undefined && thirdValue === undefined && fourthValue === undefined) {
  2412. return firstValue.alpha >= 1 ? rgb(firstValue.red, firstValue.green, firstValue.blue) : "rgba(" + firstValue.red + "," + firstValue.green + "," + firstValue.blue + "," + firstValue.alpha + ")";
  2413. }
  2414. throw new PolishedError(7);
  2415. }
  2416. var isRgb = function isRgb(color) {
  2417. return typeof color.red === 'number' && typeof color.green === 'number' && typeof color.blue === 'number' && (typeof color.alpha !== 'number' || typeof color.alpha === 'undefined');
  2418. };
  2419. var isRgba = function isRgba(color) {
  2420. return typeof color.red === 'number' && typeof color.green === 'number' && typeof color.blue === 'number' && typeof color.alpha === 'number';
  2421. };
  2422. var isHsl = function isHsl(color) {
  2423. return typeof color.hue === 'number' && typeof color.saturation === 'number' && typeof color.lightness === 'number' && (typeof color.alpha !== 'number' || typeof color.alpha === 'undefined');
  2424. };
  2425. var isHsla = function isHsla(color) {
  2426. return typeof color.hue === 'number' && typeof color.saturation === 'number' && typeof color.lightness === 'number' && typeof color.alpha === 'number';
  2427. };
  2428. /**
  2429. * Converts a RgbColor, RgbaColor, HslColor or HslaColor object to a color string.
  2430. * This util is useful in case you only know on runtime which color object is
  2431. * used. Otherwise we recommend to rely on `rgb`, `rgba`, `hsl` or `hsla`.
  2432. *
  2433. * @example
  2434. * // Styles as object usage
  2435. * const styles = {
  2436. * background: toColorString({ red: 255, green: 205, blue: 100 }),
  2437. * background: toColorString({ red: 255, green: 205, blue: 100, alpha: 0.72 }),
  2438. * background: toColorString({ hue: 240, saturation: 1, lightness: 0.5 }),
  2439. * background: toColorString({ hue: 360, saturation: 0.75, lightness: 0.4, alpha: 0.72 }),
  2440. * }
  2441. *
  2442. * // styled-components usage
  2443. * const div = styled.div`
  2444. * background: ${toColorString({ red: 255, green: 205, blue: 100 })};
  2445. * background: ${toColorString({ red: 255, green: 205, blue: 100, alpha: 0.72 })};
  2446. * background: ${toColorString({ hue: 240, saturation: 1, lightness: 0.5 })};
  2447. * background: ${toColorString({ hue: 360, saturation: 0.75, lightness: 0.4, alpha: 0.72 })};
  2448. * `
  2449. *
  2450. * // CSS in JS Output
  2451. * element {
  2452. * background: "#ffcd64";
  2453. * background: "rgba(255,205,100,0.72)";
  2454. * background: "#00f";
  2455. * background: "rgba(179,25,25,0.72)";
  2456. * }
  2457. */
  2458. function toColorString(color) {
  2459. if (typeof color !== 'object') throw new PolishedError(8);
  2460. if (isRgba(color)) return rgba(color);
  2461. if (isRgb(color)) return rgb(color);
  2462. if (isHsla(color)) return hsla(color);
  2463. if (isHsl(color)) return hsl(color);
  2464. throw new PolishedError(8);
  2465. }
  2466. // Type definitions taken from https://github.com/gcanti/flow-static-land/blob/master/src/Fun.js
  2467. // eslint-disable-next-line no-unused-vars
  2468. // eslint-disable-next-line no-unused-vars
  2469. // eslint-disable-next-line no-redeclare
  2470. function curried(f, length, acc) {
  2471. return function fn() {
  2472. // eslint-disable-next-line prefer-rest-params
  2473. var combined = acc.concat(Array.prototype.slice.call(arguments));
  2474. return combined.length >= length ? f.apply(this, combined) : curried(f, length, combined);
  2475. };
  2476. }
  2477. // eslint-disable-next-line no-redeclare
  2478. function curry(f) {
  2479. // eslint-disable-line no-redeclare
  2480. return curried(f, f.length, []);
  2481. }
  2482. /**
  2483. * Changes the hue of the color. Hue is a number between 0 to 360. The first
  2484. * argument for adjustHue is the amount of degrees the color is rotated around
  2485. * the color wheel, always producing a positive hue value.
  2486. *
  2487. * @example
  2488. * // Styles as object usage
  2489. * const styles = {
  2490. * background: adjustHue(180, '#448'),
  2491. * background: adjustHue('180', 'rgba(101,100,205,0.7)'),
  2492. * }
  2493. *
  2494. * // styled-components usage
  2495. * const div = styled.div`
  2496. * background: ${adjustHue(180, '#448')};
  2497. * background: ${adjustHue('180', 'rgba(101,100,205,0.7)')};
  2498. * `
  2499. *
  2500. * // CSS in JS Output
  2501. * element {
  2502. * background: "#888844";
  2503. * background: "rgba(136,136,68,0.7)";
  2504. * }
  2505. */
  2506. function adjustHue(degree, color) {
  2507. if (color === 'transparent') return color;
  2508. var hslColor = parseToHsl(color);
  2509. return toColorString(_extends({}, hslColor, {
  2510. hue: hslColor.hue + parseFloat(degree)
  2511. }));
  2512. }
  2513. // prettier-ignore
  2514. var curriedAdjustHue = curry /* ::<number | string, string, string> */(adjustHue);
  2515. var curriedAdjustHue$1 = curriedAdjustHue;
  2516. /**
  2517. * Returns the complement of the provided color. This is identical to adjustHue(180, <color>).
  2518. *
  2519. * @example
  2520. * // Styles as object usage
  2521. * const styles = {
  2522. * background: complement('#448'),
  2523. * background: complement('rgba(204,205,100,0.7)'),
  2524. * }
  2525. *
  2526. * // styled-components usage
  2527. * const div = styled.div`
  2528. * background: ${complement('#448')};
  2529. * background: ${complement('rgba(204,205,100,0.7)')};
  2530. * `
  2531. *
  2532. * // CSS in JS Output
  2533. * element {
  2534. * background: "#884";
  2535. * background: "rgba(153,153,153,0.7)";
  2536. * }
  2537. */
  2538. function complement(color) {
  2539. if (color === 'transparent') return color;
  2540. var hslColor = parseToHsl(color);
  2541. return toColorString(_extends({}, hslColor, {
  2542. hue: (hslColor.hue + 180) % 360
  2543. }));
  2544. }
  2545. function guard(lowerBoundary, upperBoundary, value) {
  2546. return Math.max(lowerBoundary, Math.min(upperBoundary, value));
  2547. }
  2548. /**
  2549. * Returns a string value for the darkened color.
  2550. *
  2551. * @example
  2552. * // Styles as object usage
  2553. * const styles = {
  2554. * background: darken(0.2, '#FFCD64'),
  2555. * background: darken('0.2', 'rgba(255,205,100,0.7)'),
  2556. * }
  2557. *
  2558. * // styled-components usage
  2559. * const div = styled.div`
  2560. * background: ${darken(0.2, '#FFCD64')};
  2561. * background: ${darken('0.2', 'rgba(255,205,100,0.7)')};
  2562. * `
  2563. *
  2564. * // CSS in JS Output
  2565. *
  2566. * element {
  2567. * background: "#ffbd31";
  2568. * background: "rgba(255,189,49,0.7)";
  2569. * }
  2570. */
  2571. function darken(amount, color) {
  2572. if (color === 'transparent') return color;
  2573. var hslColor = parseToHsl(color);
  2574. return toColorString(_extends({}, hslColor, {
  2575. lightness: guard(0, 1, hslColor.lightness - parseFloat(amount))
  2576. }));
  2577. }
  2578. // prettier-ignore
  2579. var curriedDarken = curry /* ::<number | string, string, string> */(darken);
  2580. var curriedDarken$1 = curriedDarken;
  2581. /**
  2582. * Decreases the intensity of a color. Its range is between 0 to 1. The first
  2583. * argument of the desaturate function is the amount by how much the color
  2584. * intensity should be decreased.
  2585. *
  2586. * @example
  2587. * // Styles as object usage
  2588. * const styles = {
  2589. * background: desaturate(0.2, '#CCCD64'),
  2590. * background: desaturate('0.2', 'rgba(204,205,100,0.7)'),
  2591. * }
  2592. *
  2593. * // styled-components usage
  2594. * const div = styled.div`
  2595. * background: ${desaturate(0.2, '#CCCD64')};
  2596. * background: ${desaturate('0.2', 'rgba(204,205,100,0.7)')};
  2597. * `
  2598. *
  2599. * // CSS in JS Output
  2600. * element {
  2601. * background: "#b8b979";
  2602. * background: "rgba(184,185,121,0.7)";
  2603. * }
  2604. */
  2605. function desaturate(amount, color) {
  2606. if (color === 'transparent') return color;
  2607. var hslColor = parseToHsl(color);
  2608. return toColorString(_extends({}, hslColor, {
  2609. saturation: guard(0, 1, hslColor.saturation - parseFloat(amount))
  2610. }));
  2611. }
  2612. // prettier-ignore
  2613. var curriedDesaturate = curry /* ::<number | string, string, string> */(desaturate);
  2614. var curriedDesaturate$1 = curriedDesaturate;
  2615. /**
  2616. * Returns a number (float) representing the luminance of a color.
  2617. *
  2618. * @example
  2619. * // Styles as object usage
  2620. * const styles = {
  2621. * background: getLuminance('#CCCD64') >= getLuminance('#0000ff') ? '#CCCD64' : '#0000ff',
  2622. * background: getLuminance('rgba(58, 133, 255, 1)') >= getLuminance('rgba(255, 57, 149, 1)') ?
  2623. * 'rgba(58, 133, 255, 1)' :
  2624. * 'rgba(255, 57, 149, 1)',
  2625. * }
  2626. *
  2627. * // styled-components usage
  2628. * const div = styled.div`
  2629. * background: ${getLuminance('#CCCD64') >= getLuminance('#0000ff') ? '#CCCD64' : '#0000ff'};
  2630. * background: ${getLuminance('rgba(58, 133, 255, 1)') >= getLuminance('rgba(255, 57, 149, 1)') ?
  2631. * 'rgba(58, 133, 255, 1)' :
  2632. * 'rgba(255, 57, 149, 1)'};
  2633. *
  2634. * // CSS in JS Output
  2635. *
  2636. * div {
  2637. * background: "#CCCD64";
  2638. * background: "rgba(58, 133, 255, 1)";
  2639. * }
  2640. */
  2641. function getLuminance(color) {
  2642. if (color === 'transparent') return 0;
  2643. var rgbColor = parseToRgb(color);
  2644. var _Object$keys$map = Object.keys(rgbColor).map(function (key) {
  2645. var channel = rgbColor[key] / 255;
  2646. return channel <= 0.03928 ? channel / 12.92 : Math.pow((channel + 0.055) / 1.055, 2.4);
  2647. }),
  2648. r = _Object$keys$map[0],
  2649. g = _Object$keys$map[1],
  2650. b = _Object$keys$map[2];
  2651. return parseFloat((0.2126 * r + 0.7152 * g + 0.0722 * b).toFixed(3));
  2652. }
  2653. /**
  2654. * Returns the contrast ratio between two colors based on
  2655. * [W3's recommended equation for calculating contrast](http://www.w3.org/TR/WCAG20/#contrast-ratiodef).
  2656. *
  2657. * @example
  2658. * const contrastRatio = getContrast('#444', '#fff');
  2659. */
  2660. function getContrast(color1, color2) {
  2661. var luminance1 = getLuminance(color1);
  2662. var luminance2 = getLuminance(color2);
  2663. return parseFloat((luminance1 > luminance2 ? (luminance1 + 0.05) / (luminance2 + 0.05) : (luminance2 + 0.05) / (luminance1 + 0.05)).toFixed(2));
  2664. }
  2665. /**
  2666. * Converts the color to a grayscale, by reducing its saturation to 0.
  2667. *
  2668. * @example
  2669. * // Styles as object usage
  2670. * const styles = {
  2671. * background: grayscale('#CCCD64'),
  2672. * background: grayscale('rgba(204,205,100,0.7)'),
  2673. * }
  2674. *
  2675. * // styled-components usage
  2676. * const div = styled.div`
  2677. * background: ${grayscale('#CCCD64')};
  2678. * background: ${grayscale('rgba(204,205,100,0.7)')};
  2679. * `
  2680. *
  2681. * // CSS in JS Output
  2682. * element {
  2683. * background: "#999";
  2684. * background: "rgba(153,153,153,0.7)";
  2685. * }
  2686. */
  2687. function grayscale(color) {
  2688. if (color === 'transparent') return color;
  2689. return toColorString(_extends({}, parseToHsl(color), {
  2690. saturation: 0
  2691. }));
  2692. }
  2693. /**
  2694. * Converts a HslColor or HslaColor object to a color string.
  2695. * This util is useful in case you only know on runtime which color object is
  2696. * used. Otherwise we recommend to rely on `hsl` or `hsla`.
  2697. *
  2698. * @example
  2699. * // Styles as object usage
  2700. * const styles = {
  2701. * background: hslToColorString({ hue: 240, saturation: 1, lightness: 0.5 }),
  2702. * background: hslToColorString({ hue: 360, saturation: 0.75, lightness: 0.4, alpha: 0.72 }),
  2703. * }
  2704. *
  2705. * // styled-components usage
  2706. * const div = styled.div`
  2707. * background: ${hslToColorString({ hue: 240, saturation: 1, lightness: 0.5 })};
  2708. * background: ${hslToColorString({ hue: 360, saturation: 0.75, lightness: 0.4, alpha: 0.72 })};
  2709. * `
  2710. *
  2711. * // CSS in JS Output
  2712. * element {
  2713. * background: "#00f";
  2714. * background: "rgba(179,25,25,0.72)";
  2715. * }
  2716. */
  2717. function hslToColorString(color) {
  2718. if (typeof color === 'object' && typeof color.hue === 'number' && typeof color.saturation === 'number' && typeof color.lightness === 'number') {
  2719. if (color.alpha && typeof color.alpha === 'number') {
  2720. return hsla({
  2721. hue: color.hue,
  2722. saturation: color.saturation,
  2723. lightness: color.lightness,
  2724. alpha: color.alpha
  2725. });
  2726. }
  2727. return hsl({
  2728. hue: color.hue,
  2729. saturation: color.saturation,
  2730. lightness: color.lightness
  2731. });
  2732. }
  2733. throw new PolishedError(45);
  2734. }
  2735. /**
  2736. * Inverts the red, green and blue values of a color.
  2737. *
  2738. * @example
  2739. * // Styles as object usage
  2740. * const styles = {
  2741. * background: invert('#CCCD64'),
  2742. * background: invert('rgba(101,100,205,0.7)'),
  2743. * }
  2744. *
  2745. * // styled-components usage
  2746. * const div = styled.div`
  2747. * background: ${invert('#CCCD64')};
  2748. * background: ${invert('rgba(101,100,205,0.7)')};
  2749. * `
  2750. *
  2751. * // CSS in JS Output
  2752. *
  2753. * element {
  2754. * background: "#33329b";
  2755. * background: "rgba(154,155,50,0.7)";
  2756. * }
  2757. */
  2758. function invert(color) {
  2759. if (color === 'transparent') return color;
  2760. // parse color string to rgb
  2761. var value = parseToRgb(color);
  2762. return toColorString(_extends({}, value, {
  2763. red: 255 - value.red,
  2764. green: 255 - value.green,
  2765. blue: 255 - value.blue
  2766. }));
  2767. }
  2768. /**
  2769. * Returns a string value for the lightened color.
  2770. *
  2771. * @example
  2772. * // Styles as object usage
  2773. * const styles = {
  2774. * background: lighten(0.2, '#CCCD64'),
  2775. * background: lighten('0.2', 'rgba(204,205,100,0.7)'),
  2776. * }
  2777. *
  2778. * // styled-components usage
  2779. * const div = styled.div`
  2780. * background: ${lighten(0.2, '#FFCD64')};
  2781. * background: ${lighten('0.2', 'rgba(204,205,100,0.7)')};
  2782. * `
  2783. *
  2784. * // CSS in JS Output
  2785. *
  2786. * element {
  2787. * background: "#e5e6b1";
  2788. * background: "rgba(229,230,177,0.7)";
  2789. * }
  2790. */
  2791. function lighten(amount, color) {
  2792. if (color === 'transparent') return color;
  2793. var hslColor = parseToHsl(color);
  2794. return toColorString(_extends({}, hslColor, {
  2795. lightness: guard(0, 1, hslColor.lightness + parseFloat(amount))
  2796. }));
  2797. }
  2798. // prettier-ignore
  2799. var curriedLighten = curry /* ::<number | string, string, string> */(lighten);
  2800. var curriedLighten$1 = curriedLighten;
  2801. /**
  2802. * Determines which contrast guidelines have been met for two colors.
  2803. * Based on the [contrast calculations recommended by W3](https://www.w3.org/WAI/WCAG21/Understanding/contrast-enhanced.html).
  2804. *
  2805. * @example
  2806. * const scores = meetsContrastGuidelines('#444', '#fff');
  2807. */
  2808. function meetsContrastGuidelines(color1, color2) {
  2809. var contrastRatio = getContrast(color1, color2);
  2810. return {
  2811. AA: contrastRatio >= 4.5,
  2812. AALarge: contrastRatio >= 3,
  2813. AAA: contrastRatio >= 7,
  2814. AAALarge: contrastRatio >= 4.5
  2815. };
  2816. }
  2817. /**
  2818. * Mixes the two provided colors together by calculating the average of each of the RGB components weighted to the first color by the provided weight.
  2819. *
  2820. * @example
  2821. * // Styles as object usage
  2822. * const styles = {
  2823. * background: mix(0.5, '#f00', '#00f')
  2824. * background: mix(0.25, '#f00', '#00f')
  2825. * background: mix('0.5', 'rgba(255, 0, 0, 0.5)', '#00f')
  2826. * }
  2827. *
  2828. * // styled-components usage
  2829. * const div = styled.div`
  2830. * background: ${mix(0.5, '#f00', '#00f')};
  2831. * background: ${mix(0.25, '#f00', '#00f')};
  2832. * background: ${mix('0.5', 'rgba(255, 0, 0, 0.5)', '#00f')};
  2833. * `
  2834. *
  2835. * // CSS in JS Output
  2836. *
  2837. * element {
  2838. * background: "#7f007f";
  2839. * background: "#3f00bf";
  2840. * background: "rgba(63, 0, 191, 0.75)";
  2841. * }
  2842. */
  2843. function mix(weight, color, otherColor) {
  2844. if (color === 'transparent') return otherColor;
  2845. if (otherColor === 'transparent') return color;
  2846. if (weight === 0) return otherColor;
  2847. var parsedColor1 = parseToRgb(color);
  2848. var color1 = _extends({}, parsedColor1, {
  2849. alpha: typeof parsedColor1.alpha === 'number' ? parsedColor1.alpha : 1
  2850. });
  2851. var parsedColor2 = parseToRgb(otherColor);
  2852. var color2 = _extends({}, parsedColor2, {
  2853. alpha: typeof parsedColor2.alpha === 'number' ? parsedColor2.alpha : 1
  2854. });
  2855. // The formula is copied from the original Sass implementation:
  2856. // http://sass-lang.com/documentation/Sass/Script/Functions.html#mix-instance_method
  2857. var alphaDelta = color1.alpha - color2.alpha;
  2858. var x = parseFloat(weight) * 2 - 1;
  2859. var y = x * alphaDelta === -1 ? x : x + alphaDelta;
  2860. var z = 1 + x * alphaDelta;
  2861. var weight1 = (y / z + 1) / 2.0;
  2862. var weight2 = 1 - weight1;
  2863. var mixedColor = {
  2864. red: Math.floor(color1.red * weight1 + color2.red * weight2),
  2865. green: Math.floor(color1.green * weight1 + color2.green * weight2),
  2866. blue: Math.floor(color1.blue * weight1 + color2.blue * weight2),
  2867. alpha: color1.alpha * parseFloat(weight) + color2.alpha * (1 - parseFloat(weight))
  2868. };
  2869. return rgba(mixedColor);
  2870. }
  2871. // prettier-ignore
  2872. var curriedMix = curry /* ::<number | string, string, string, string> */(mix);
  2873. var mix$1 = curriedMix;
  2874. /**
  2875. * Increases the opacity of a color. Its range for the amount is between 0 to 1.
  2876. *
  2877. *
  2878. * @example
  2879. * // Styles as object usage
  2880. * const styles = {
  2881. * background: opacify(0.1, 'rgba(255, 255, 255, 0.9)');
  2882. * background: opacify(0.2, 'hsla(0, 0%, 100%, 0.5)'),
  2883. * background: opacify('0.5', 'rgba(255, 0, 0, 0.2)'),
  2884. * }
  2885. *
  2886. * // styled-components usage
  2887. * const div = styled.div`
  2888. * background: ${opacify(0.1, 'rgba(255, 255, 255, 0.9)')};
  2889. * background: ${opacify(0.2, 'hsla(0, 0%, 100%, 0.5)')},
  2890. * background: ${opacify('0.5', 'rgba(255, 0, 0, 0.2)')},
  2891. * `
  2892. *
  2893. * // CSS in JS Output
  2894. *
  2895. * element {
  2896. * background: "#fff";
  2897. * background: "rgba(255,255,255,0.7)";
  2898. * background: "rgba(255,0,0,0.7)";
  2899. * }
  2900. */
  2901. function opacify(amount, color) {
  2902. if (color === 'transparent') return color;
  2903. var parsedColor = parseToRgb(color);
  2904. var alpha = typeof parsedColor.alpha === 'number' ? parsedColor.alpha : 1;
  2905. var colorWithAlpha = _extends({}, parsedColor, {
  2906. alpha: guard(0, 1, (alpha * 100 + parseFloat(amount) * 100) / 100)
  2907. });
  2908. return rgba(colorWithAlpha);
  2909. }
  2910. // prettier-ignore
  2911. var curriedOpacify = curry /* ::<number | string, string, string> */(opacify);
  2912. var curriedOpacify$1 = curriedOpacify;
  2913. var defaultReturnIfLightColor = '#000';
  2914. var defaultReturnIfDarkColor = '#fff';
  2915. /**
  2916. * Returns black or white (or optional passed colors) for best
  2917. * contrast depending on the luminosity of the given color.
  2918. * When passing custom return colors, strict mode ensures that the
  2919. * return color always meets or exceeds WCAG level AA or greater. If this test
  2920. * fails, the default return color (black or white) is returned in place of the
  2921. * custom return color. You can optionally turn off strict mode.
  2922. *
  2923. * Follows [W3C specs for readability](https://www.w3.org/TR/WCAG20-TECHS/G18.html).
  2924. *
  2925. * @example
  2926. * // Styles as object usage
  2927. * const styles = {
  2928. * color: readableColor('#000'),
  2929. * color: readableColor('black', '#001', '#ff8'),
  2930. * color: readableColor('white', '#001', '#ff8'),
  2931. * color: readableColor('red', '#333', '#ddd', true)
  2932. * }
  2933. *
  2934. * // styled-components usage
  2935. * const div = styled.div`
  2936. * color: ${readableColor('#000')};
  2937. * color: ${readableColor('black', '#001', '#ff8')};
  2938. * color: ${readableColor('white', '#001', '#ff8')};
  2939. * color: ${readableColor('red', '#333', '#ddd', true)};
  2940. * `
  2941. *
  2942. * // CSS in JS Output
  2943. * element {
  2944. * color: "#fff";
  2945. * color: "#ff8";
  2946. * color: "#001";
  2947. * color: "#000";
  2948. * }
  2949. */
  2950. function readableColor(color, returnIfLightColor, returnIfDarkColor, strict) {
  2951. if (returnIfLightColor === void 0) {
  2952. returnIfLightColor = defaultReturnIfLightColor;
  2953. }
  2954. if (returnIfDarkColor === void 0) {
  2955. returnIfDarkColor = defaultReturnIfDarkColor;
  2956. }
  2957. if (strict === void 0) {
  2958. strict = true;
  2959. }
  2960. var isColorLight = getLuminance(color) > 0.179;
  2961. var preferredReturnColor = isColorLight ? returnIfLightColor : returnIfDarkColor;
  2962. if (!strict || getContrast(color, preferredReturnColor) >= 4.5) {
  2963. return preferredReturnColor;
  2964. }
  2965. return isColorLight ? defaultReturnIfLightColor : defaultReturnIfDarkColor;
  2966. }
  2967. /**
  2968. * Converts a RgbColor or RgbaColor object to a color string.
  2969. * This util is useful in case you only know on runtime which color object is
  2970. * used. Otherwise we recommend to rely on `rgb` or `rgba`.
  2971. *
  2972. * @example
  2973. * // Styles as object usage
  2974. * const styles = {
  2975. * background: rgbToColorString({ red: 255, green: 205, blue: 100 }),
  2976. * background: rgbToColorString({ red: 255, green: 205, blue: 100, alpha: 0.72 }),
  2977. * }
  2978. *
  2979. * // styled-components usage
  2980. * const div = styled.div`
  2981. * background: ${rgbToColorString({ red: 255, green: 205, blue: 100 })};
  2982. * background: ${rgbToColorString({ red: 255, green: 205, blue: 100, alpha: 0.72 })};
  2983. * `
  2984. *
  2985. * // CSS in JS Output
  2986. * element {
  2987. * background: "#ffcd64";
  2988. * background: "rgba(255,205,100,0.72)";
  2989. * }
  2990. */
  2991. function rgbToColorString(color) {
  2992. if (typeof color === 'object' && typeof color.red === 'number' && typeof color.green === 'number' && typeof color.blue === 'number') {
  2993. if (typeof color.alpha === 'number') {
  2994. return rgba({
  2995. red: color.red,
  2996. green: color.green,
  2997. blue: color.blue,
  2998. alpha: color.alpha
  2999. });
  3000. }
  3001. return rgb({
  3002. red: color.red,
  3003. green: color.green,
  3004. blue: color.blue
  3005. });
  3006. }
  3007. throw new PolishedError(46);
  3008. }
  3009. /**
  3010. * Increases the intensity of a color. Its range is between 0 to 1. The first
  3011. * argument of the saturate function is the amount by how much the color
  3012. * intensity should be increased.
  3013. *
  3014. * @example
  3015. * // Styles as object usage
  3016. * const styles = {
  3017. * background: saturate(0.2, '#CCCD64'),
  3018. * background: saturate('0.2', 'rgba(204,205,100,0.7)'),
  3019. * }
  3020. *
  3021. * // styled-components usage
  3022. * const div = styled.div`
  3023. * background: ${saturate(0.2, '#FFCD64')};
  3024. * background: ${saturate('0.2', 'rgba(204,205,100,0.7)')};
  3025. * `
  3026. *
  3027. * // CSS in JS Output
  3028. *
  3029. * element {
  3030. * background: "#e0e250";
  3031. * background: "rgba(224,226,80,0.7)";
  3032. * }
  3033. */
  3034. function saturate(amount, color) {
  3035. if (color === 'transparent') return color;
  3036. var hslColor = parseToHsl(color);
  3037. return toColorString(_extends({}, hslColor, {
  3038. saturation: guard(0, 1, hslColor.saturation + parseFloat(amount))
  3039. }));
  3040. }
  3041. // prettier-ignore
  3042. var curriedSaturate = curry /* ::<number | string, string, string> */(saturate);
  3043. var curriedSaturate$1 = curriedSaturate;
  3044. /**
  3045. * Sets the hue of a color to the provided value. The hue range can be
  3046. * from 0 and 359.
  3047. *
  3048. * @example
  3049. * // Styles as object usage
  3050. * const styles = {
  3051. * background: setHue(42, '#CCCD64'),
  3052. * background: setHue('244', 'rgba(204,205,100,0.7)'),
  3053. * }
  3054. *
  3055. * // styled-components usage
  3056. * const div = styled.div`
  3057. * background: ${setHue(42, '#CCCD64')};
  3058. * background: ${setHue('244', 'rgba(204,205,100,0.7)')};
  3059. * `
  3060. *
  3061. * // CSS in JS Output
  3062. * element {
  3063. * background: "#cdae64";
  3064. * background: "rgba(107,100,205,0.7)";
  3065. * }
  3066. */
  3067. function setHue(hue, color) {
  3068. if (color === 'transparent') return color;
  3069. return toColorString(_extends({}, parseToHsl(color), {
  3070. hue: parseFloat(hue)
  3071. }));
  3072. }
  3073. // prettier-ignore
  3074. var curriedSetHue = curry /* ::<number | string, string, string> */(setHue);
  3075. var curriedSetHue$1 = curriedSetHue;
  3076. /**
  3077. * Sets the lightness of a color to the provided value. The lightness range can be
  3078. * from 0 and 1.
  3079. *
  3080. * @example
  3081. * // Styles as object usage
  3082. * const styles = {
  3083. * background: setLightness(0.2, '#CCCD64'),
  3084. * background: setLightness('0.75', 'rgba(204,205,100,0.7)'),
  3085. * }
  3086. *
  3087. * // styled-components usage
  3088. * const div = styled.div`
  3089. * background: ${setLightness(0.2, '#CCCD64')};
  3090. * background: ${setLightness('0.75', 'rgba(204,205,100,0.7)')};
  3091. * `
  3092. *
  3093. * // CSS in JS Output
  3094. * element {
  3095. * background: "#4d4d19";
  3096. * background: "rgba(223,224,159,0.7)";
  3097. * }
  3098. */
  3099. function setLightness(lightness, color) {
  3100. if (color === 'transparent') return color;
  3101. return toColorString(_extends({}, parseToHsl(color), {
  3102. lightness: parseFloat(lightness)
  3103. }));
  3104. }
  3105. // prettier-ignore
  3106. var curriedSetLightness = curry /* ::<number | string, string, string> */(setLightness);
  3107. var curriedSetLightness$1 = curriedSetLightness;
  3108. /**
  3109. * Sets the saturation of a color to the provided value. The saturation range can be
  3110. * from 0 and 1.
  3111. *
  3112. * @example
  3113. * // Styles as object usage
  3114. * const styles = {
  3115. * background: setSaturation(0.2, '#CCCD64'),
  3116. * background: setSaturation('0.75', 'rgba(204,205,100,0.7)'),
  3117. * }
  3118. *
  3119. * // styled-components usage
  3120. * const div = styled.div`
  3121. * background: ${setSaturation(0.2, '#CCCD64')};
  3122. * background: ${setSaturation('0.75', 'rgba(204,205,100,0.7)')};
  3123. * `
  3124. *
  3125. * // CSS in JS Output
  3126. * element {
  3127. * background: "#adad84";
  3128. * background: "rgba(228,229,76,0.7)";
  3129. * }
  3130. */
  3131. function setSaturation(saturation, color) {
  3132. if (color === 'transparent') return color;
  3133. return toColorString(_extends({}, parseToHsl(color), {
  3134. saturation: parseFloat(saturation)
  3135. }));
  3136. }
  3137. // prettier-ignore
  3138. var curriedSetSaturation = curry /* ::<number | string, string, string> */(setSaturation);
  3139. var curriedSetSaturation$1 = curriedSetSaturation;
  3140. /**
  3141. * Shades a color by mixing it with black. `shade` can produce
  3142. * hue shifts, where as `darken` manipulates the luminance channel and therefore
  3143. * doesn't produce hue shifts.
  3144. *
  3145. * @example
  3146. * // Styles as object usage
  3147. * const styles = {
  3148. * background: shade(0.25, '#00f')
  3149. * }
  3150. *
  3151. * // styled-components usage
  3152. * const div = styled.div`
  3153. * background: ${shade(0.25, '#00f')};
  3154. * `
  3155. *
  3156. * // CSS in JS Output
  3157. *
  3158. * element {
  3159. * background: "#00003f";
  3160. * }
  3161. */
  3162. function shade(percentage, color) {
  3163. if (color === 'transparent') return color;
  3164. return mix$1(parseFloat(percentage), 'rgb(0, 0, 0)', color);
  3165. }
  3166. // prettier-ignore
  3167. var curriedShade = curry /* ::<number | string, string, string> */(shade);
  3168. var curriedShade$1 = curriedShade;
  3169. /**
  3170. * Tints a color by mixing it with white. `tint` can produce
  3171. * hue shifts, where as `lighten` manipulates the luminance channel and therefore
  3172. * doesn't produce hue shifts.
  3173. *
  3174. * @example
  3175. * // Styles as object usage
  3176. * const styles = {
  3177. * background: tint(0.25, '#00f')
  3178. * }
  3179. *
  3180. * // styled-components usage
  3181. * const div = styled.div`
  3182. * background: ${tint(0.25, '#00f')};
  3183. * `
  3184. *
  3185. * // CSS in JS Output
  3186. *
  3187. * element {
  3188. * background: "#bfbfff";
  3189. * }
  3190. */
  3191. function tint(percentage, color) {
  3192. if (color === 'transparent') return color;
  3193. return mix$1(parseFloat(percentage), 'rgb(255, 255, 255)', color);
  3194. }
  3195. // prettier-ignore
  3196. var curriedTint = curry /* ::<number | string, string, string> */(tint);
  3197. var curriedTint$1 = curriedTint;
  3198. /**
  3199. * Decreases the opacity of a color. Its range for the amount is between 0 to 1.
  3200. *
  3201. *
  3202. * @example
  3203. * // Styles as object usage
  3204. * const styles = {
  3205. * background: transparentize(0.1, '#fff'),
  3206. * background: transparentize(0.2, 'hsl(0, 0%, 100%)'),
  3207. * background: transparentize('0.5', 'rgba(255, 0, 0, 0.8)'),
  3208. * }
  3209. *
  3210. * // styled-components usage
  3211. * const div = styled.div`
  3212. * background: ${transparentize(0.1, '#fff')};
  3213. * background: ${transparentize(0.2, 'hsl(0, 0%, 100%)')};
  3214. * background: ${transparentize('0.5', 'rgba(255, 0, 0, 0.8)')};
  3215. * `
  3216. *
  3217. * // CSS in JS Output
  3218. *
  3219. * element {
  3220. * background: "rgba(255,255,255,0.9)";
  3221. * background: "rgba(255,255,255,0.8)";
  3222. * background: "rgba(255,0,0,0.3)";
  3223. * }
  3224. */
  3225. function transparentize(amount, color) {
  3226. if (color === 'transparent') return color;
  3227. var parsedColor = parseToRgb(color);
  3228. var alpha = typeof parsedColor.alpha === 'number' ? parsedColor.alpha : 1;
  3229. var colorWithAlpha = _extends({}, parsedColor, {
  3230. alpha: guard(0, 1, +(alpha * 100 - parseFloat(amount) * 100).toFixed(2) / 100)
  3231. });
  3232. return rgba(colorWithAlpha);
  3233. }
  3234. // prettier-ignore
  3235. var curriedTransparentize = curry /* ::<number | string, string, string> */(transparentize);
  3236. var curriedTransparentize$1 = curriedTransparentize;
  3237. /**
  3238. * Shorthand for easily setting the animation property. Allows either multiple arrays with animations
  3239. * or a single animation spread over the arguments.
  3240. * @example
  3241. * // Styles as object usage
  3242. * const styles = {
  3243. * ...animation(['rotate', '1s', 'ease-in-out'], ['colorchange', '2s'])
  3244. * }
  3245. *
  3246. * // styled-components usage
  3247. * const div = styled.div`
  3248. * ${animation(['rotate', '1s', 'ease-in-out'], ['colorchange', '2s'])}
  3249. * `
  3250. *
  3251. * // CSS as JS Output
  3252. *
  3253. * div {
  3254. * 'animation': 'rotate 1s ease-in-out, colorchange 2s'
  3255. * }
  3256. * @example
  3257. * // Styles as object usage
  3258. * const styles = {
  3259. * ...animation('rotate', '1s', 'ease-in-out')
  3260. * }
  3261. *
  3262. * // styled-components usage
  3263. * const div = styled.div`
  3264. * ${animation('rotate', '1s', 'ease-in-out')}
  3265. * `
  3266. *
  3267. * // CSS as JS Output
  3268. *
  3269. * div {
  3270. * 'animation': 'rotate 1s ease-in-out'
  3271. * }
  3272. */
  3273. function animation() {
  3274. for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
  3275. args[_key] = arguments[_key];
  3276. }
  3277. // Allow single or multiple animations passed
  3278. var multiMode = Array.isArray(args[0]);
  3279. if (!multiMode && args.length > 8) {
  3280. throw new PolishedError(64);
  3281. }
  3282. var code = args.map(function (arg) {
  3283. if (multiMode && !Array.isArray(arg) || !multiMode && Array.isArray(arg)) {
  3284. throw new PolishedError(65);
  3285. }
  3286. if (Array.isArray(arg) && arg.length > 8) {
  3287. throw new PolishedError(66);
  3288. }
  3289. return Array.isArray(arg) ? arg.join(' ') : arg;
  3290. }).join(', ');
  3291. return {
  3292. animation: code
  3293. };
  3294. }
  3295. /**
  3296. * Shorthand that accepts any number of backgroundImage values as parameters for creating a single background statement.
  3297. * @example
  3298. * // Styles as object usage
  3299. * const styles = {
  3300. * ...backgroundImages('url("/image/background.jpg")', 'linear-gradient(red, green)')
  3301. * }
  3302. *
  3303. * // styled-components usage
  3304. * const div = styled.div`
  3305. * ${backgroundImages('url("/image/background.jpg")', 'linear-gradient(red, green)')}
  3306. * `
  3307. *
  3308. * // CSS as JS Output
  3309. *
  3310. * div {
  3311. * 'backgroundImage': 'url("/image/background.jpg"), linear-gradient(red, green)'
  3312. * }
  3313. */
  3314. function backgroundImages() {
  3315. for (var _len = arguments.length, properties = new Array(_len), _key = 0; _key < _len; _key++) {
  3316. properties[_key] = arguments[_key];
  3317. }
  3318. return {
  3319. backgroundImage: properties.join(', ')
  3320. };
  3321. }
  3322. /**
  3323. * Shorthand that accepts any number of background values as parameters for creating a single background statement.
  3324. * @example
  3325. * // Styles as object usage
  3326. * const styles = {
  3327. * ...backgrounds('url("/image/background.jpg")', 'linear-gradient(red, green)', 'center no-repeat')
  3328. * }
  3329. *
  3330. * // styled-components usage
  3331. * const div = styled.div`
  3332. * ${backgrounds('url("/image/background.jpg")', 'linear-gradient(red, green)', 'center no-repeat')}
  3333. * `
  3334. *
  3335. * // CSS as JS Output
  3336. *
  3337. * div {
  3338. * 'background': 'url("/image/background.jpg"), linear-gradient(red, green), center no-repeat'
  3339. * }
  3340. */
  3341. function backgrounds() {
  3342. for (var _len = arguments.length, properties = new Array(_len), _key = 0; _key < _len; _key++) {
  3343. properties[_key] = arguments[_key];
  3344. }
  3345. return {
  3346. background: properties.join(', ')
  3347. };
  3348. }
  3349. var sideMap = ['top', 'right', 'bottom', 'left'];
  3350. /**
  3351. * Shorthand for the border property that splits out individual properties for use with tools like Fela and Styletron. A side keyword can optionally be passed to target only one side's border properties.
  3352. *
  3353. * @example
  3354. * // Styles as object usage
  3355. * const styles = {
  3356. * ...border('1px', 'solid', 'red')
  3357. * }
  3358. *
  3359. * // styled-components usage
  3360. * const div = styled.div`
  3361. * ${border('1px', 'solid', 'red')}
  3362. * `
  3363. *
  3364. * // CSS as JS Output
  3365. *
  3366. * div {
  3367. * 'borderColor': 'red',
  3368. * 'borderStyle': 'solid',
  3369. * 'borderWidth': `1px`,
  3370. * }
  3371. *
  3372. * // Styles as object usage
  3373. * const styles = {
  3374. * ...border('top', '1px', 'solid', 'red')
  3375. * }
  3376. *
  3377. * // styled-components usage
  3378. * const div = styled.div`
  3379. * ${border('top', '1px', 'solid', 'red')}
  3380. * `
  3381. *
  3382. * // CSS as JS Output
  3383. *
  3384. * div {
  3385. * 'borderTopColor': 'red',
  3386. * 'borderTopStyle': 'solid',
  3387. * 'borderTopWidth': `1px`,
  3388. * }
  3389. */
  3390. function border(sideKeyword) {
  3391. for (var _len = arguments.length, values = new Array(_len > 1 ? _len - 1 : 0), _key = 1; _key < _len; _key++) {
  3392. values[_key - 1] = arguments[_key];
  3393. }
  3394. if (typeof sideKeyword === 'string' && sideMap.indexOf(sideKeyword) >= 0) {
  3395. var _ref;
  3396. return _ref = {}, _ref["border" + capitalizeString(sideKeyword) + "Width"] = values[0], _ref["border" + capitalizeString(sideKeyword) + "Style"] = values[1], _ref["border" + capitalizeString(sideKeyword) + "Color"] = values[2], _ref;
  3397. } else {
  3398. values.unshift(sideKeyword);
  3399. return {
  3400. borderWidth: values[0],
  3401. borderStyle: values[1],
  3402. borderColor: values[2]
  3403. };
  3404. }
  3405. }
  3406. /**
  3407. * Shorthand that accepts up to four values, including null to skip a value, and maps them to their respective directions.
  3408. * @example
  3409. * // Styles as object usage
  3410. * const styles = {
  3411. * ...borderColor('red', 'green', 'blue', 'yellow')
  3412. * }
  3413. *
  3414. * // styled-components usage
  3415. * const div = styled.div`
  3416. * ${borderColor('red', 'green', 'blue', 'yellow')}
  3417. * `
  3418. *
  3419. * // CSS as JS Output
  3420. *
  3421. * div {
  3422. * 'borderTopColor': 'red',
  3423. * 'borderRightColor': 'green',
  3424. * 'borderBottomColor': 'blue',
  3425. * 'borderLeftColor': 'yellow'
  3426. * }
  3427. */
  3428. function borderColor() {
  3429. for (var _len = arguments.length, values = new Array(_len), _key = 0; _key < _len; _key++) {
  3430. values[_key] = arguments[_key];
  3431. }
  3432. return directionalProperty.apply(void 0, ['borderColor'].concat(values));
  3433. }
  3434. /**
  3435. * Shorthand that accepts a value for side and a value for radius and applies the radius value to both corners of the side.
  3436. * @example
  3437. * // Styles as object usage
  3438. * const styles = {
  3439. * ...borderRadius('top', '5px')
  3440. * }
  3441. *
  3442. * // styled-components usage
  3443. * const div = styled.div`
  3444. * ${borderRadius('top', '5px')}
  3445. * `
  3446. *
  3447. * // CSS as JS Output
  3448. *
  3449. * div {
  3450. * 'borderTopRightRadius': '5px',
  3451. * 'borderTopLeftRadius': '5px',
  3452. * }
  3453. */
  3454. function borderRadius(side, radius) {
  3455. var uppercaseSide = capitalizeString(side);
  3456. if (!radius && radius !== 0) {
  3457. throw new PolishedError(62);
  3458. }
  3459. if (uppercaseSide === 'Top' || uppercaseSide === 'Bottom') {
  3460. var _ref;
  3461. return _ref = {}, _ref["border" + uppercaseSide + "RightRadius"] = radius, _ref["border" + uppercaseSide + "LeftRadius"] = radius, _ref;
  3462. }
  3463. if (uppercaseSide === 'Left' || uppercaseSide === 'Right') {
  3464. var _ref2;
  3465. return _ref2 = {}, _ref2["borderTop" + uppercaseSide + "Radius"] = radius, _ref2["borderBottom" + uppercaseSide + "Radius"] = radius, _ref2;
  3466. }
  3467. throw new PolishedError(63);
  3468. }
  3469. /**
  3470. * Shorthand that accepts up to four values, including null to skip a value, and maps them to their respective directions.
  3471. * @example
  3472. * // Styles as object usage
  3473. * const styles = {
  3474. * ...borderStyle('solid', 'dashed', 'dotted', 'double')
  3475. * }
  3476. *
  3477. * // styled-components usage
  3478. * const div = styled.div`
  3479. * ${borderStyle('solid', 'dashed', 'dotted', 'double')}
  3480. * `
  3481. *
  3482. * // CSS as JS Output
  3483. *
  3484. * div {
  3485. * 'borderTopStyle': 'solid',
  3486. * 'borderRightStyle': 'dashed',
  3487. * 'borderBottomStyle': 'dotted',
  3488. * 'borderLeftStyle': 'double'
  3489. * }
  3490. */
  3491. function borderStyle() {
  3492. for (var _len = arguments.length, values = new Array(_len), _key = 0; _key < _len; _key++) {
  3493. values[_key] = arguments[_key];
  3494. }
  3495. return directionalProperty.apply(void 0, ['borderStyle'].concat(values));
  3496. }
  3497. /**
  3498. * Shorthand that accepts up to four values, including null to skip a value, and maps them to their respective directions.
  3499. * @example
  3500. * // Styles as object usage
  3501. * const styles = {
  3502. * ...borderWidth('12px', '24px', '36px', '48px')
  3503. * }
  3504. *
  3505. * // styled-components usage
  3506. * const div = styled.div`
  3507. * ${borderWidth('12px', '24px', '36px', '48px')}
  3508. * `
  3509. *
  3510. * // CSS as JS Output
  3511. *
  3512. * div {
  3513. * 'borderTopWidth': '12px',
  3514. * 'borderRightWidth': '24px',
  3515. * 'borderBottomWidth': '36px',
  3516. * 'borderLeftWidth': '48px'
  3517. * }
  3518. */
  3519. function borderWidth() {
  3520. for (var _len = arguments.length, values = new Array(_len), _key = 0; _key < _len; _key++) {
  3521. values[_key] = arguments[_key];
  3522. }
  3523. return directionalProperty.apply(void 0, ['borderWidth'].concat(values));
  3524. }
  3525. function generateSelectors(template, state) {
  3526. var stateSuffix = state ? ":" + state : '';
  3527. return template(stateSuffix);
  3528. }
  3529. /**
  3530. * Function helper that adds an array of states to a template of selectors. Used in textInputs and buttons.
  3531. * @private
  3532. */
  3533. function statefulSelectors(states, template, stateMap) {
  3534. if (!template) throw new PolishedError(67);
  3535. if (states.length === 0) return generateSelectors(template, null);
  3536. var selectors = [];
  3537. for (var i = 0; i < states.length; i += 1) {
  3538. if (stateMap && stateMap.indexOf(states[i]) < 0) {
  3539. throw new PolishedError(68);
  3540. }
  3541. selectors.push(generateSelectors(template, states[i]));
  3542. }
  3543. selectors = selectors.join(',');
  3544. return selectors;
  3545. }
  3546. var stateMap$1 = [undefined, null, 'active', 'focus', 'hover'];
  3547. function template$1(state) {
  3548. return "button" + state + ",\n input[type=\"button\"]" + state + ",\n input[type=\"reset\"]" + state + ",\n input[type=\"submit\"]" + state;
  3549. }
  3550. /**
  3551. * Populates selectors that target all buttons. You can pass optional states to append to the selectors.
  3552. * @example
  3553. * // Styles as object usage
  3554. * const styles = {
  3555. * [buttons('active')]: {
  3556. * 'border': 'none'
  3557. * }
  3558. * }
  3559. *
  3560. * // styled-components usage
  3561. * const div = styled.div`
  3562. * > ${buttons('active')} {
  3563. * border: none;
  3564. * }
  3565. * `
  3566. *
  3567. * // CSS in JS Output
  3568. *
  3569. * 'button:active,
  3570. * 'input[type="button"]:active,
  3571. * 'input[type=\"reset\"]:active,
  3572. * 'input[type=\"submit\"]:active: {
  3573. * 'border': 'none'
  3574. * }
  3575. */
  3576. function buttons() {
  3577. for (var _len = arguments.length, states = new Array(_len), _key = 0; _key < _len; _key++) {
  3578. states[_key] = arguments[_key];
  3579. }
  3580. return statefulSelectors(states, template$1, stateMap$1);
  3581. }
  3582. /**
  3583. * Shorthand that accepts up to four values, including null to skip a value, and maps them to their respective directions.
  3584. * @example
  3585. * // Styles as object usage
  3586. * const styles = {
  3587. * ...margin('12px', '24px', '36px', '48px')
  3588. * }
  3589. *
  3590. * // styled-components usage
  3591. * const div = styled.div`
  3592. * ${margin('12px', '24px', '36px', '48px')}
  3593. * `
  3594. *
  3595. * // CSS as JS Output
  3596. *
  3597. * div {
  3598. * 'marginTop': '12px',
  3599. * 'marginRight': '24px',
  3600. * 'marginBottom': '36px',
  3601. * 'marginLeft': '48px'
  3602. * }
  3603. */
  3604. function margin() {
  3605. for (var _len = arguments.length, values = new Array(_len), _key = 0; _key < _len; _key++) {
  3606. values[_key] = arguments[_key];
  3607. }
  3608. return directionalProperty.apply(void 0, ['margin'].concat(values));
  3609. }
  3610. /**
  3611. * Shorthand that accepts up to four values, including null to skip a value, and maps them to their respective directions.
  3612. * @example
  3613. * // Styles as object usage
  3614. * const styles = {
  3615. * ...padding('12px', '24px', '36px', '48px')
  3616. * }
  3617. *
  3618. * // styled-components usage
  3619. * const div = styled.div`
  3620. * ${padding('12px', '24px', '36px', '48px')}
  3621. * `
  3622. *
  3623. * // CSS as JS Output
  3624. *
  3625. * div {
  3626. * 'paddingTop': '12px',
  3627. * 'paddingRight': '24px',
  3628. * 'paddingBottom': '36px',
  3629. * 'paddingLeft': '48px'
  3630. * }
  3631. */
  3632. function padding() {
  3633. for (var _len = arguments.length, values = new Array(_len), _key = 0; _key < _len; _key++) {
  3634. values[_key] = arguments[_key];
  3635. }
  3636. return directionalProperty.apply(void 0, ['padding'].concat(values));
  3637. }
  3638. var positionMap = ['absolute', 'fixed', 'relative', 'static', 'sticky'];
  3639. /**
  3640. * Shorthand accepts up to five values, including null to skip a value, and maps them to their respective directions. The first value can optionally be a position keyword.
  3641. * @example
  3642. * // Styles as object usage
  3643. * const styles = {
  3644. * ...position('12px', '24px', '36px', '48px')
  3645. * }
  3646. *
  3647. * // styled-components usage
  3648. * const div = styled.div`
  3649. * ${position('12px', '24px', '36px', '48px')}
  3650. * `
  3651. *
  3652. * // CSS as JS Output
  3653. *
  3654. * div {
  3655. * 'top': '12px',
  3656. * 'right': '24px',
  3657. * 'bottom': '36px',
  3658. * 'left': '48px'
  3659. * }
  3660. *
  3661. * // Styles as object usage
  3662. * const styles = {
  3663. * ...position('absolute', '12px', '24px', '36px', '48px')
  3664. * }
  3665. *
  3666. * // styled-components usage
  3667. * const div = styled.div`
  3668. * ${position('absolute', '12px', '24px', '36px', '48px')}
  3669. * `
  3670. *
  3671. * // CSS as JS Output
  3672. *
  3673. * div {
  3674. * 'position': 'absolute',
  3675. * 'top': '12px',
  3676. * 'right': '24px',
  3677. * 'bottom': '36px',
  3678. * 'left': '48px'
  3679. * }
  3680. */
  3681. function position(firstValue) {
  3682. for (var _len = arguments.length, values = new Array(_len > 1 ? _len - 1 : 0), _key = 1; _key < _len; _key++) {
  3683. values[_key - 1] = arguments[_key];
  3684. }
  3685. if (positionMap.indexOf(firstValue) >= 0 && firstValue) {
  3686. return _extends({}, directionalProperty.apply(void 0, [''].concat(values)), {
  3687. position: firstValue
  3688. });
  3689. } else {
  3690. return directionalProperty.apply(void 0, ['', firstValue].concat(values));
  3691. }
  3692. }
  3693. /**
  3694. * Shorthand to set the height and width properties in a single statement.
  3695. * @example
  3696. * // Styles as object usage
  3697. * const styles = {
  3698. * ...size('300px', '250px')
  3699. * }
  3700. *
  3701. * // styled-components usage
  3702. * const div = styled.div`
  3703. * ${size('300px', '250px')}
  3704. * `
  3705. *
  3706. * // CSS as JS Output
  3707. *
  3708. * div {
  3709. * 'height': '300px',
  3710. * 'width': '250px',
  3711. * }
  3712. */
  3713. function size(height, width) {
  3714. if (width === void 0) {
  3715. width = height;
  3716. }
  3717. return {
  3718. height: height,
  3719. width: width
  3720. };
  3721. }
  3722. var stateMap = [undefined, null, 'active', 'focus', 'hover'];
  3723. function template(state) {
  3724. return "input[type=\"color\"]" + state + ",\n input[type=\"date\"]" + state + ",\n input[type=\"datetime\"]" + state + ",\n input[type=\"datetime-local\"]" + state + ",\n input[type=\"email\"]" + state + ",\n input[type=\"month\"]" + state + ",\n input[type=\"number\"]" + state + ",\n input[type=\"password\"]" + state + ",\n input[type=\"search\"]" + state + ",\n input[type=\"tel\"]" + state + ",\n input[type=\"text\"]" + state + ",\n input[type=\"time\"]" + state + ",\n input[type=\"url\"]" + state + ",\n input[type=\"week\"]" + state + ",\n input:not([type])" + state + ",\n textarea" + state;
  3725. }
  3726. /**
  3727. * Populates selectors that target all text inputs. You can pass optional states to append to the selectors.
  3728. * @example
  3729. * // Styles as object usage
  3730. * const styles = {
  3731. * [textInputs('active')]: {
  3732. * 'border': 'none'
  3733. * }
  3734. * }
  3735. *
  3736. * // styled-components usage
  3737. * const div = styled.div`
  3738. * > ${textInputs('active')} {
  3739. * border: none;
  3740. * }
  3741. * `
  3742. *
  3743. * // CSS in JS Output
  3744. *
  3745. * 'input[type="color"]:active,
  3746. * input[type="date"]:active,
  3747. * input[type="datetime"]:active,
  3748. * input[type="datetime-local"]:active,
  3749. * input[type="email"]:active,
  3750. * input[type="month"]:active,
  3751. * input[type="number"]:active,
  3752. * input[type="password"]:active,
  3753. * input[type="search"]:active,
  3754. * input[type="tel"]:active,
  3755. * input[type="text"]:active,
  3756. * input[type="time"]:active,
  3757. * input[type="url"]:active,
  3758. * input[type="week"]:active,
  3759. * input:not([type]):active,
  3760. * textarea:active': {
  3761. * 'border': 'none'
  3762. * }
  3763. */
  3764. function textInputs() {
  3765. for (var _len = arguments.length, states = new Array(_len), _key = 0; _key < _len; _key++) {
  3766. states[_key] = arguments[_key];
  3767. }
  3768. return statefulSelectors(states, template, stateMap);
  3769. }
  3770. /**
  3771. * Accepts any number of transition values as parameters for creating a single transition statement. You may also pass an array of properties as the first parameter that you would like to apply the same transition values to (second parameter).
  3772. * @example
  3773. * // Styles as object usage
  3774. * const styles = {
  3775. * ...transitions('opacity 1.0s ease-in 0s', 'width 2.0s ease-in 2s'),
  3776. * ...transitions(['color', 'background-color'], '2.0s ease-in 2s')
  3777. * }
  3778. *
  3779. * // styled-components usage
  3780. * const div = styled.div`
  3781. * ${transitions('opacity 1.0s ease-in 0s', 'width 2.0s ease-in 2s')};
  3782. * ${transitions(['color', 'background-color'], '2.0s ease-in 2s'),};
  3783. * `
  3784. *
  3785. * // CSS as JS Output
  3786. *
  3787. * div {
  3788. * 'transition': 'opacity 1.0s ease-in 0s, width 2.0s ease-in 2s'
  3789. * 'transition': 'color 2.0s ease-in 2s, background-color 2.0s ease-in 2s',
  3790. * }
  3791. */
  3792. function transitions() {
  3793. for (var _len = arguments.length, properties = new Array(_len), _key = 0; _key < _len; _key++) {
  3794. properties[_key] = arguments[_key];
  3795. }
  3796. if (Array.isArray(properties[0]) && properties.length === 2) {
  3797. var value = properties[1];
  3798. if (typeof value !== 'string') {
  3799. throw new PolishedError(61);
  3800. }
  3801. var transitionsString = properties[0].map(function (property) {
  3802. return property + " " + value;
  3803. }).join(', ');
  3804. return {
  3805. transition: transitionsString
  3806. };
  3807. } else {
  3808. return {
  3809. transition: properties.join(', ')
  3810. };
  3811. }
  3812. }
  3813. export { curriedAdjustHue$1 as adjustHue, animation, backgroundImages, backgrounds, between, border, borderColor, borderRadius, borderStyle, borderWidth, buttons, clearFix, complement, cover, cssVar, curriedDarken$1 as darken, curriedDesaturate$1 as desaturate, directionalProperty, easeIn, easeInOut, easeOut, ellipsis, em$1 as em, fluidRange, fontFace, getContrast, getLuminance, getValueAndUnit, grayscale, hiDPI, hideText, hideVisually, hsl, hslToColorString, hsla, important, invert, curriedLighten$1 as lighten, linearGradient, margin, math, meetsContrastGuidelines, mix$1 as mix, modularScale, normalize, curriedOpacify$1 as opacify, padding, parseToHsl, parseToRgb, position, radialGradient, readableColor, rem$1 as rem, remToPx, retinaImage, rgb, rgbToColorString, rgba, curriedSaturate$1 as saturate, curriedSetHue$1 as setHue, curriedSetLightness$1 as setLightness, curriedSetSaturation$1 as setSaturation, curriedShade$1 as shade, size, stripUnit, textInputs, timingFunctions, curriedTint$1 as tint, toColorString, transitions, curriedTransparentize$1 as transparentize, triangle, wordWrap };