@artsy/palette 31.2.0 → 31.3.1

package/dist/elements/FilterSelect/Components/FilterInput.js

@@ -9,9 +9,9 @@ exports.FilterInput = void 0;
 
 var React = _interopRequireWildcard(require("react"));
 
-var _CloseCircleIcon = require("../../../svgs/CloseCircleIcon");
+var _CloseStrokeIcon = _interopRequireDefault(require("@artsy/icons/CloseStrokeIcon"));
 
-var _MagnifyingGlassIcon = require("../../../svgs/MagnifyingGlassIcon");
+var _SearchIcon = _interopRequireDefault(require("@artsy/icons/SearchIcon"));
 
 var _LabeledInput = require("../../LabeledInput");
 
@@ -19,6 +19,8 @@ var _Clickable = require("../../Clickable");
 
 var _FilterSelectContext = require("./FilterSelectContext");
 
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
 function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
 
 function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
@@ -54,10 +56,10 @@ var FilterInput = function FilterInput(props) {
       display: "flex",
       onClick: handleClick,
       "aria-label": "Clear search input"
-    }, /*#__PURE__*/React.createElement(_CloseCircleIcon.CloseCircleIcon, null)) :
+    }, /*#__PURE__*/React.createElement(_CloseStrokeIcon.default, null)) :
     /*#__PURE__*/
     // Resting state
-    React.createElement(_MagnifyingGlassIcon.MagnifyingGlassIcon, {
+    React.createElement(_SearchIcon.default, {
       style: {
         pointerEvents: "none"
       }

package/dist/elements/FilterSelect/Components/FilterInput.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../../src/elements/FilterSelect/Components/FilterInput.tsx"],"names":["FilterInput","props","query","setQuery","placeholder","ref","handleChange","event","target","value","handleClick","current","focus","pointerEvents"],"mappings":";;;;;;;;;AAAA;;AACA;;AACA;;AAEA;;AACA;;AAEA;;;;;;;;AAIO,IAAMA,WAAiC,GAAG,SAApCA,WAAoC,CAACC,KAAD,EAAW;AAC1D,8BAAyC,kDAAzC;AAAA,MAAQC,KAAR,yBAAQA,KAAR;AAAA,MAAeC,QAAf,yBAAeA,QAAf;AAAA,MAAyBC,WAAzB,yBAAyBA,WAAzB;;AACA,MAAMC,GAAG,GAAG,kBAAgC,IAAhC,CAAZ;;AAEA,MAAMC,YAAY,GAAG,SAAfA,YAAe,CAACC,KAAD,EAAgD;AACnEJ,IAAAA,QAAQ,CAACI,KAAK,CAACC,MAAN,CAAaC,KAAd,CAAR;AACD,GAFD;;AAIA,MAAMC,WAAW,GAAG,SAAdA,WAAc,GAAM;AAAA;;AACxBP,IAAAA,QAAQ,CAAC,EAAD,CAAR;AACA,oBAAAE,GAAG,CAACM,OAAJ,8DAAaC,KAAb;AACD,GAHD;;AAKA,sBACE,oBAAC,0BAAD;AACE,IAAA,GAAG,EAAEP,GADP;AAEE,IAAA,IAAI,EAAC,QAFP;AAGE,IAAA,KAAK,EACHH,KAAK,KAAK,EAAV;AAAA;AACE;AACA,wBAAC,oBAAD;AACE,MAAA,OAAO,EAAC,MADV;AAEE,MAAA,OAAO,EAAEQ,WAFX;AAGE,oBAAW;AAHb,oBAKE,oBAAC,gCAAD,OALF,CAFF;AAAA;AAUE;AACA,wBAAC,wCAAD;AAAqB,MAAA,KAAK,EAAE;AAAEG,QAAAA,aAAa,EAAE;AAAjB;AAA5B,MAfN;AAkBE,IAAA,QAAQ,EAAEP,YAlBZ;AAmBE,IAAA,KAAK,EAAEJ,KAnBT;AAoBE,IAAA,WAAW,EAAEE;AApBf,KAqBMH,KArBN,EADF;AAyBD,CAtCM;;;AAAMD,W","sourcesContent":["import * as React from \"react\"\nimport { CloseCircleIcon } from \"../../../svgs/CloseCircleIcon\"\nimport { MagnifyingGlassIcon } from \"../../../svgs/MagnifyingGlassIcon\"\nimport { InputProps } from \"../../Input\"\nimport { LabeledInput } from \"../../LabeledInput\"\nimport { Clickable } from \"../../Clickable\"\nimport { useRef } from \"react\"\nimport { useFilterSelectContext } from \"./FilterSelectContext\"\n\nexport type FilterInputProps = InputProps\n\nexport const FilterInput: React.FC<InputProps> = (props) => {\n  const { query, setQuery, placeholder } = useFilterSelectContext()\n  const ref = useRef<HTMLInputElement | null>(null)\n\n  const handleChange = (event: React.ChangeEvent<HTMLInputElement>) => {\n    setQuery(event.target.value)\n  }\n\n  const handleClick = () => {\n    setQuery(\"\")\n    ref.current?.focus()\n  }\n\n  return (\n    <LabeledInput\n      ref={ref}\n      role=\"search\"\n      label={\n        query !== \"\" ? (\n          // Active state\n          <Clickable\n            display=\"flex\"\n            onClick={handleClick}\n            aria-label=\"Clear search input\"\n          >\n            <CloseCircleIcon />\n          </Clickable>\n        ) : (\n          // Resting state\n          <MagnifyingGlassIcon style={{ pointerEvents: \"none\" }} />\n        )\n      }\n      onChange={handleChange}\n      value={query}\n      placeholder={placeholder}\n      {...props}\n    />\n  )\n}\n"],"file":"FilterInput.js"}
+{"version":3,"sources":["../../../../src/elements/FilterSelect/Components/FilterInput.tsx"],"names":["FilterInput","props","query","setQuery","placeholder","ref","handleChange","event","target","value","handleClick","current","focus","pointerEvents"],"mappings":";;;;;;;;;AAAA;;AACA;;AACA;;AAEA;;AACA;;AAEA;;;;;;;;;;AAIO,IAAMA,WAAiC,GAAG,SAApCA,WAAoC,CAACC,KAAD,EAAW;AAC1D,8BAAyC,kDAAzC;AAAA,MAAQC,KAAR,yBAAQA,KAAR;AAAA,MAAeC,QAAf,yBAAeA,QAAf;AAAA,MAAyBC,WAAzB,yBAAyBA,WAAzB;;AACA,MAAMC,GAAG,GAAG,kBAAgC,IAAhC,CAAZ;;AAEA,MAAMC,YAAY,GAAG,SAAfA,YAAe,CAACC,KAAD,EAAgD;AACnEJ,IAAAA,QAAQ,CAACI,KAAK,CAACC,MAAN,CAAaC,KAAd,CAAR;AACD,GAFD;;AAIA,MAAMC,WAAW,GAAG,SAAdA,WAAc,GAAM;AAAA;;AACxBP,IAAAA,QAAQ,CAAC,EAAD,CAAR;AACA,oBAAAE,GAAG,CAACM,OAAJ,8DAAaC,KAAb;AACD,GAHD;;AAKA,sBACE,oBAAC,0BAAD;AACE,IAAA,GAAG,EAAEP,GADP;AAEE,IAAA,IAAI,EAAC,QAFP;AAGE,IAAA,KAAK,EACHH,KAAK,KAAK,EAAV;AAAA;AACE;AACA,wBAAC,oBAAD;AACE,MAAA,OAAO,EAAC,MADV;AAEE,MAAA,OAAO,EAAEQ,WAFX;AAGE,oBAAW;AAHb,oBAKE,oBAAC,wBAAD,OALF,CAFF;AAAA;AAUE;AACA,wBAAC,mBAAD;AAAY,MAAA,KAAK,EAAE;AAAEG,QAAAA,aAAa,EAAE;AAAjB;AAAnB,MAfN;AAkBE,IAAA,QAAQ,EAAEP,YAlBZ;AAmBE,IAAA,KAAK,EAAEJ,KAnBT;AAoBE,IAAA,WAAW,EAAEE;AApBf,KAqBMH,KArBN,EADF;AAyBD,CAtCM;;;AAAMD,W","sourcesContent":["import * as React from \"react\"\nimport CloseStrokeIcon from \"@artsy/icons/CloseStrokeIcon\"\nimport SearchIcon from \"@artsy/icons/SearchIcon\"\nimport { InputProps } from \"../../Input\"\nimport { LabeledInput } from \"../../LabeledInput\"\nimport { Clickable } from \"../../Clickable\"\nimport { useRef } from \"react\"\nimport { useFilterSelectContext } from \"./FilterSelectContext\"\n\nexport type FilterInputProps = InputProps\n\nexport const FilterInput: React.FC<InputProps> = (props) => {\n  const { query, setQuery, placeholder } = useFilterSelectContext()\n  const ref = useRef<HTMLInputElement | null>(null)\n\n  const handleChange = (event: React.ChangeEvent<HTMLInputElement>) => {\n    setQuery(event.target.value)\n  }\n\n  const handleClick = () => {\n    setQuery(\"\")\n    ref.current?.focus()\n  }\n\n  return (\n    <LabeledInput\n      ref={ref}\n      role=\"search\"\n      label={\n        query !== \"\" ? (\n          // Active state\n          <Clickable\n            display=\"flex\"\n            onClick={handleClick}\n            aria-label=\"Clear search input\"\n          >\n            <CloseStrokeIcon />\n          </Clickable>\n        ) : (\n          // Resting state\n          <SearchIcon style={{ pointerEvents: \"none\" }} />\n        )\n      }\n      onChange={handleChange}\n      value={query}\n      placeholder={placeholder}\n      {...props}\n    />\n  )\n}\n"],"file":"FilterInput.js"}

package/dist/elements/Modal/Modal.js

@@ -15,9 +15,9 @@ var _styledComponents = _interopRequireDefault(require("styled-components"));
 
 var _helpers = require("../../helpers");
 
-var _svgs = require("../../svgs");
+var _CloseIcon = _interopRequireDefault(require("@artsy/icons/CloseIcon"));
 
-var _ArtsyLogoBlackIcon = require("../../svgs/ArtsyLogoBlackIcon");
+var _ArtsyLogoIcon = _interopRequireDefault(require("@artsy/icons/ArtsyLogoIcon"));
 
 var _Box = require("../Box");
 
@@ -155,6 +155,7 @@ var Modal = function Modal(_ref) {
       y: 2
     })
   }, hasLogo && /*#__PURE__*/_react.default.createElement(Logo, {
+    width: 78,
     my: 1
   }), title && /*#__PURE__*/_react.default.createElement(_Text.Text, {
     variant: "lg-display",
@@ -165,7 +166,7 @@ var Modal = function Modal(_ref) {
     onClick: function onClick() {
       return onClose();
     }
-  }, /*#__PURE__*/_react.default.createElement(_svgs.CloseIcon, {
+  }, /*#__PURE__*/_react.default.createElement(_CloseIcon.default, {
     fill: "black60"
   }))), /*#__PURE__*/_react.default.createElement(_Spacer.Spacer, {
     y: 2
@@ -226,10 +227,10 @@ var CloseIconWrapper = (0, _styledComponents.default)(_Flex.Flex).withConfig({
   displayName: "Modal__CloseIconWrapper",
   componentId: "qjtwq0-7"
 })(["cursor:pointer;"]);
-var Logo = (0, _styledComponents.default)(_ArtsyLogoBlackIcon.ArtsyLogoBlackIcon).withConfig({
+var Logo = (0, _styledComponents.default)(_ArtsyLogoIcon.default).withConfig({
   displayName: "Modal__Logo",
   componentId: "qjtwq0-8"
-})(["width:78px;"]);
+})([""]);
 Modal.displayName = "Modal";
 ModalWrapper.displayName = "ModalWrapper";
 ModalScrollContent.displayName = "ModalScrollContent";

package/dist/elements/Modal/Modal.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/elements/Modal/Modal.tsx"],"names":["ModalWidth","Modal","children","FixedButton","title","show","modalWidth","isWide","hasLogo","onClose","hideCloseButton","wrapperRef","fadeIn","setFadeIn","sentinel","isScrolled","isSentinelVisible","handleEscapeKey","event","key","document","addEventListener","body","style","overflowY","removeEventListener","handleWrapperClick","target","current","FixedButtonWrapper","Flex","DROP_SHADOW","ModalOuterWrapper","Box","props","ModalWrapper","ModalElement","height","Wide","Normal","media","xs","ModalFlexContent","ModalStickyHeader","ModalScrollContent","CloseIconWrapper","Logo","ArtsyLogoBlackIcon","displayName"],"mappings":";;;;;;;;;AAAA;;AACA;;AACA;;AACA;;AACA;;AACA;;AACA;;AACA;;AACA;;AACA;;AACA;;AACA;;;;;;;;;;;;;;;;;;;;;;;;IAiCYA,U;AAMZ;AACA;AACA;AACA;AACA;;;;WAVYA,U;AAAAA,EAAAA,U;AAAAA,EAAAA,U;AAAAA,EAAAA,U;GAAAA,U,0BAAAA,U;;AAWL,IAAMC,KAAqB,GAAG,SAAxBA,KAAwB,OAU/B;AAAA,MATJC,QASI,QATJA,QASI;AAAA,MARJC,WAQI,QARJA,WAQI;AAAA,MAPJC,KAOI,QAPJA,KAOI;AAAA,MANJC,IAMI,QANJA,IAMI;AAAA,MALJC,UAKI,QALJA,UAKI;AAAA,MAJJC,MAII,QAJJA,MAII;AAAA,MAHJC,OAGI,QAHJA,OAGI;AAAA,MAFJC,OAEI,QAFJA,OAEI;AAAA,MADJC,eACI,QADJA,eACI;AACJ,MAAMC,UAAU,GAAG,mBAAO,IAAP,CAAnB;;AACA,kBAA4B,qBAAS,KAAT,CAA5B;AAAA;AAAA,MAAOC,MAAP;AAAA,MAAeC,SAAf;;AACA,8BAAoD,mDAApD;AAAA,MAAQC,QAAR,yBAAQA,QAAR;AAAA,MAAqCC,UAArC,yBAAkBC,iBAAlB;;AAEA,MAAMC,eAAe,GAAG,SAAlBA,eAAkB,CAACC,KAAD,EAAW;AACjC,QAAIA,KAAK,IAAIA,KAAK,CAACC,GAAN,KAAc,QAA3B,EAAqC;AACnCV,MAAAA,OAAO;AACR;AACF,GAJD;;AAMA,wBAAU,YAAM;AACd,QAAIJ,IAAJ,EAAU;AACRQ,MAAAA,SAAS,CAAC,IAAD,CAAT;;AAEA,UAAI,CAACH,eAAL,EAAsB;AACpB;AACAU,QAAAA,QAAQ,CAACC,gBAAT,CAA0B,OAA1B,EAAmCJ,eAAnC,EAAoD,IAApD;AACD,OANO,CAOR;;;AACAG,MAAAA,QAAQ,CAACE,IAAT,CAAcC,KAAd,CAAoBC,SAApB,GAAgC,QAAhC;AACD,KATD,MASO;AACLX,MAAAA,SAAS,CAAC,KAAD,CAAT;AACAO,MAAAA,QAAQ,CAACE,IAAT,CAAcC,KAAd,CAAoBC,SAApB,GAAgC,SAAhC;AACAJ,MAAAA,QAAQ,CAACK,mBAAT,CAA6B,OAA7B,EAAsCR,eAAtC,EAAuD,IAAvD;AACD;;AAED,WAAOG,QAAQ,CAACK,mBAAT,CAA6B,OAA7B,EAAsCR,eAAtC,EAAuD,IAAvD,CAAP;AACD,GAjBD,EAiBG,CAACZ,IAAD,CAjBH;;AAmBA,MAAMqB,kBAAkB,GAAG,SAArBA,kBAAqB,CAACR,KAAD,EAAW;AACpC;AACA,QAAI,CAACR,eAAD,IAAoBQ,KAAK,CAACS,MAAN,KAAiBhB,UAAU,CAACiB,OAApD,EAA6D;AAC3DnB,MAAAA,OAAO;AACR;AACF,GALD;;AAOA,MAAI,CAACJ,IAAL,EAAW;AACT,WAAO,IAAP;AACD;;AAED,sBACE,yEACE,6BAAC,iBAAD;AAAmB,IAAA,IAAI,EAAEA,IAAzB;AAA+B,IAAA,SAAS,EAAEO,MAAM,GAAG,QAAH,GAAc;AAA9D,kBACE,6BAAC,YAAD;AAAc,IAAA,GAAG,EAAED,UAAnB;AAA+B,IAAA,OAAO,EAAEe;AAAxC,kBACE,6BAAC,YAAD;AACE,IAAA,UAAU,EAAEpB,UADd;AAEE,IAAA,MAAM,EAAEC,MAFV;AAGE,IAAA,IAAI,EAAEF,IAHR;AAIE,IAAA,SAAS,EAAEO,MAAM,GAAG,QAAH,GAAc;AAJjC,kBAME,6BAAC,gBAAD,qBACE,6BAAC,iBAAD;AACE,IAAA,QAAQ,EAAC,QADX;AAEE,IAAA,GAAG,EAAE,CAFP;AAGE,IAAA,OAAO,EAAC,MAHV;AAIE,IAAA,cAAc,EAAC,QAJjB;AAKE,IAAA,aAAa,EAAC,QALhB;AAME,IAAA,UAAU,EAAEG,UANd;AAOE,IAAA,EAAE,EAAE;AAPN,kBASE,6BAAC,cAAD;AAAQ,IAAA,CAAC,EAAE;AAAX,IATF,eAUE,6BAAC,UAAD,qBACE,6BAAC,QAAD;AAAK,IAAA,EAAE,EAAE,CAAT;AAAY,IAAA,IAAI,EAAE;AAAlB,kBACE,6BAAC,UAAD;AAAM,IAAA,SAAS,eAAE,6BAAC,cAAD;AAAQ,MAAA,CAAC,EAAE;AAAX;AAAjB,KACGP,OAAO,iBAAI,6BAAC,IAAD;AAAM,IAAA,EAAE,EAAE;AAAV,IADd,EAEGJ,KAAK,iBACJ,6BAAC,UAAD;AACE,IAAA,OAAO,EAAC,YADV;AAEE,IAAA,KAAK,EAAC,UAFR;AAGE,IAAA,EAAE,EAAEI,OAAO,GAAG,CAAH,GAAO;AAHpB,KAKGJ,KALH,CAHJ,CADF,CADF,EAgBG,CAACM,eAAD,iBACC,6BAAC,gBAAD;AAAkB,IAAA,EAAE,EAAE,CAAtB;AAAyB,IAAA,OAAO,EAAE;AAAA,aAAMD,OAAO,EAAb;AAAA;AAAlC,kBACE,6BAAC,eAAD;AAAW,IAAA,IAAI,EAAC;AAAhB,IADF,CAjBJ,CAVF,eAgCE,6BAAC,cAAD;AAAQ,IAAA,CAAC,EAAE;AAAX,IAhCF,CADF,eAoCE,6BAAC,kBAAD;AACE,IAAA,OAAO,EAAED,OADX;AAEE,IAAA,UAAU,EAAEF,UAFd;AAGE,IAAA,EAAE,EAAE,CAHN;AAIE,IAAA,EAAE,EAAE,CAJN;AAKE,IAAA,EAAE,EAAE;AALN,kBAOE,4DACGQ,QADH,EAEGZ,QAFH,CAPF,CApCF,EAiDGC,WAAW,iBACV,6BAAC,kBAAD;AAAoB,IAAA,UAAU,EAAEY,UAAhC;AAA4C,IAAA,CAAC,EAAE;AAA/C,KACGZ,WADH,CAlDJ,CANF,CADF,CADF,CADF,CADF;AAsED,CAzHM;;;AA+HP,IAAM0B,kBAAkB,GAAG,+BAAOC,UAAP,CAAH;AAAA;AAAA;AAAA,+EACR;AAAA,MAAGf,UAAH,SAAGA,UAAH;AAAA,SAAqBA,UAAU,GAAGgB,oBAAH,GAAiB,MAAhD;AAAA,CADQ,CAAxB;AAMA,IAAMC,iBAAiB,GAAG,+BAAOC,QAAP,CAAH;AAAA;AAAA;AAAA,uNASH,UAACC,KAAD;AAAA,SAAYA,KAAK,CAAC7B,IAAN,GAAa,MAAb,GAAsB,MAAlC;AAAA,CATG,CAAvB;AAkBA,IAAM8B,YAAY,GAAG,+BAAOL,UAAP,CAAH;AAAA;AAAA;AAAA,2GAAlB;AASA,IAAMM,YAAY,GAAG,+BAAON,UAAP,CAAH;AAAA;AAAA;AAAA,uSAEN,UAACI,KAAD;AAAA,SAAYA,KAAK,CAACG,MAAN,GAAeH,KAAK,CAACG,MAArB,GAA8B,MAA1C;AAAA,CAFM,EAMI,wBAAS,iBAAT,CANJ,EAOFN,oBAPE,EAQP,UAACG,KAAD;AAAA,SACPA,KAAK,CAAC5B,UAAN,KAAqB4B,KAAK,CAAC3B,MAAN,GAAeP,UAAU,CAACsC,IAA1B,GAAiCtC,UAAU,CAACuC,MAAjE,CADO;AAAA,CARO,EAWdC,eAAMC,EAXQ,mKAaS,wBAAS,SAAT,CAbT,EAcQ,wBAAS,SAAT,CAdR,EAAlB;AAyBA,IAAMC,gBAAgB,GAAG,+BAAOZ,UAAP,CAAH;AAAA;AAAA;AAAA,+GAMlBU,eAAMC,EANY,oGAAtB;AAWA,IAAME,iBAAiB,GAAG,+BAAOV,QAAP,CAAH;AAAA;AAAA;AAAA,iEACP;AAAA,MAAGlB,UAAH,SAAGA,UAAH;AAAA,SAAqBA,UAAU,GAAGgB,oBAAH,GAAiB,MAAhD;AAAA,CADO,CAAvB;AAKA,IAAMa,kBAAkB,GAAG,+BAAOd,UAAP,CAAH;AAAA;AAAA;AAAA,4CAAxB;AAKA,IAAMe,gBAAgB,GAAG,+BAAOf,UAAP,CAAH;AAAA;AAAA;AAAA,uBAAtB;AAIA,IAAMgB,IAAI,GAAG,+BAAOC,sCAAP,CAAH;AAAA;AAAA;AAAA,mBAAV;AAIA9C,KAAK,CAAC+C,WAAN,GAAoB,OAApB;AACAb,YAAY,CAACa,WAAb,GAA2B,cAA3B;AACAJ,kBAAkB,CAACI,WAAnB,GAAiC,oBAAjC","sourcesContent":["import { themeGet } from \"@styled-system/theme-get\"\nimport React, { FC, useEffect, useRef, useState } from \"react\"\nimport styled from \"styled-components\"\nimport { DROP_SHADOW, media } from \"../../helpers\"\nimport { CloseIcon } from \"../../svgs\"\nimport { ArtsyLogoBlackIcon } from \"../../svgs/ArtsyLogoBlackIcon\"\nimport { Box } from \"../Box\"\nimport { Flex } from \"../Flex\"\nimport { Join } from \"../Join\"\nimport { Spacer } from \"../Spacer\"\nimport { Text } from \"../Text\"\nimport { useSentinelVisibility } from \"../../utils/useSentinelVisibility\"\n\n/**\n * FIXME: This whole thing needs to be rebuilt from scratch\n */\n\ninterface ModalProps {\n  FixedButton?: JSX.Element\n  refreshModalContentKey?: string\n  hasLogo?: boolean\n  height?: string\n  modalWidth?: ModalWidth\n  isWide?: boolean\n  onClose: () => void\n  show?: boolean\n  title?: string\n  /*\n   * Hide the X button if we don't want the user to be able to exit the modal without another action closing the modal\n   */\n  hideCloseButton?: boolean\n}\n\ninterface TransitionElementProps {\n  isWide?: boolean\n  show?: boolean\n  modalWidth?: ModalWidth\n}\n\ninterface ModalScrollContentProps {\n  hasLogo?: boolean\n  modalWidth?: ModalWidth\n}\n\nexport enum ModalWidth {\n  Narrow = \"300px\",\n  Normal = \"440px\",\n  Wide = \"900px\",\n}\n\n/**\n * Modal.\n * Spec: https://www.figma.com/file/m6gDpKHEWDbYJyrwsVZDBr/Artsy-3.0-Design-System?node-id=6150%3A7290\n * @deprecated: Use `ModalDialog` instead\n */\nexport const Modal: FC<ModalProps> = ({\n  children,\n  FixedButton,\n  title,\n  show,\n  modalWidth, // modalWidth overwrites isWide if present\n  isWide,\n  hasLogo,\n  onClose,\n  hideCloseButton,\n}) => {\n  const wrapperRef = useRef(null)\n  const [fadeIn, setFadeIn] = useState(false)\n  const { sentinel, isSentinelVisible: isScrolled } = useSentinelVisibility()\n\n  const handleEscapeKey = (event) => {\n    if (event && event.key === \"Escape\") {\n      onClose()\n    }\n  }\n\n  useEffect(() => {\n    if (show) {\n      setFadeIn(true)\n\n      if (!hideCloseButton) {\n        // Binds key event for escape to close modal\n        document.addEventListener(\"keyup\", handleEscapeKey, true)\n      }\n      // Fixes the body to disable scroll\n      document.body.style.overflowY = \"hidden\"\n    } else {\n      setFadeIn(false)\n      document.body.style.overflowY = \"visible\"\n      document.removeEventListener(\"keyup\", handleEscapeKey, true)\n    }\n\n    return document.removeEventListener(\"keyup\", handleEscapeKey, true)\n  }, [show])\n\n  const handleWrapperClick = (event) => {\n    // If modal X icon is hidden we don't want to close the modal when the wrapper is clicked\n    if (!hideCloseButton && event.target === wrapperRef.current) {\n      onClose()\n    }\n  }\n\n  if (!show) {\n    return null\n  }\n\n  return (\n    <>\n      <ModalOuterWrapper show={show} className={fadeIn ? \"fadeIn\" : \"\"}>\n        <ModalWrapper ref={wrapperRef} onClick={handleWrapperClick}>\n          <ModalElement\n            modalWidth={modalWidth}\n            isWide={isWide}\n            show={show}\n            className={fadeIn ? \"fadeIn\" : \"\"}\n          >\n            <ModalFlexContent>\n              <ModalStickyHeader\n                position=\"sticky\"\n                top={0}\n                display=\"flex\"\n                justifyContent=\"center\"\n                flexDirection=\"column\"\n                isScrolled={isScrolled}\n                px={2}\n              >\n                <Spacer y={2} />\n                <Flex>\n                  <Box pr={6} flex={1}>\n                    <Join separator={<Spacer y={2} />}>\n                      {hasLogo && <Logo my={1} />}\n                      {title && (\n                        <Text\n                          variant=\"lg-display\"\n                          color=\"black100\"\n                          py={hasLogo ? 0 : 1}\n                        >\n                          {title}\n                        </Text>\n                      )}\n                    </Join>\n                  </Box>\n\n                  {!hideCloseButton && (\n                    <CloseIconWrapper my={1} onClick={() => onClose()}>\n                      <CloseIcon fill=\"black60\" />\n                    </CloseIconWrapper>\n                  )}\n                </Flex>\n                <Spacer y={2} />\n              </ModalStickyHeader>\n\n              <ModalScrollContent\n                hasLogo={hasLogo}\n                modalWidth={modalWidth}\n                px={2}\n                py={1}\n                pb={2}\n              >\n                <>\n                  {sentinel}\n                  {children}\n                </>\n              </ModalScrollContent>\n\n              {FixedButton && (\n                <FixedButtonWrapper isScrolled={isScrolled} p={2}>\n                  {FixedButton}\n                </FixedButtonWrapper>\n              )}\n            </ModalFlexContent>\n          </ModalElement>\n        </ModalWrapper>\n      </ModalOuterWrapper>\n    </>\n  )\n}\n\ninterface ShadowOnScroll {\n  isScrolled?: boolean\n}\n\nconst FixedButtonWrapper = styled(Flex)<ShadowOnScroll>`\n  box-shadow: ${({ isScrolled }) => (isScrolled ? DROP_SHADOW : \"none\")};\n  flex: 0 0 auto;\n  transition: box-shadow 250ms ease-in-out;\n`\n\nconst ModalOuterWrapper = styled(Box)<TransitionElementProps>`\n  position: fixed;\n  top: 0;\n  left: 0;\n  z-index: 9999;\n  width: 100vw;\n  height: 100vh;\n  background-color: rgba(229, 229, 229, 0.5);\n  opacity: 0;\n  pointer-events: ${(props) => (props.show ? \"auto\" : \"none\")};\n\n  &.fadeIn {\n    transition: opacity 250ms ease;\n    transition-delay: 1ms;\n    opacity: 1;\n  }\n`\n\nconst ModalWrapper = styled(Flex)`\n  position: relative;\n  width: 100%;\n  height: 100%;\n  overflow: hidden;\n  justify-content: center;\n  align-items: center;\n`\n\nconst ModalElement = styled(Flex)<TransitionElementProps>`\n  position: absolute;\n  height: ${(props) => (props.height ? props.height : \"auto\") as any};\n  max-height: calc(100vh - 80px);\n  min-height: 58px;\n  overflow: hidden;\n  background-color: ${themeGet(\"colors.white100\")};\n  box-shadow: ${DROP_SHADOW};\n  width: ${(props) =>\n    props.modalWidth || (props.isWide ? ModalWidth.Wide : ModalWidth.Normal)};\n\n  ${media.xs`\n    max-height: 100vh;\n    height: calc(100vh - ${themeGet(\"space.4\")});\n    width: calc(100vw - ${themeGet(\"space.4\")});\n  `};\n\n  transform: translateY(2000px);\n  &.fadeIn {\n    transition: all 400ms cubic-bezier(0.075, 0.82, 0.165, 1); /* easeOutCirc */\n    transition-delay: 1ms;\n    transform: translateY(0px);\n  }\n`\n\nconst ModalFlexContent = styled(Flex)<ModalScrollContentProps>`\n  position: relative;\n  flex-direction: column;\n  width: 100%;\n  overflow: hidden;\n  max-height: calc(100vh - 80px);\n  ${media.xs`\n    max-height: 100vh;\n  `};\n`\n\nconst ModalStickyHeader = styled(Box)<ModalScrollContentProps & ShadowOnScroll>`\n  box-shadow: ${({ isScrolled }) => (isScrolled ? DROP_SHADOW : \"none\")};\n  transition: box-shadow 250ms ease-in-out;\n`\n\nconst ModalScrollContent = styled(Flex)<ModalScrollContentProps>`\n  overflow: auto;\n  flex-direction: column;\n`\n\nconst CloseIconWrapper = styled(Flex)`\n  cursor: pointer;\n`\n\nconst Logo = styled(ArtsyLogoBlackIcon)`\n  width: 78px;\n`\n\nModal.displayName = \"Modal\"\nModalWrapper.displayName = \"ModalWrapper\"\nModalScrollContent.displayName = \"ModalScrollContent\"\n"],"file":"Modal.js"}
+{"version":3,"sources":["../../../src/elements/Modal/Modal.tsx"],"names":["ModalWidth","Modal","children","FixedButton","title","show","modalWidth","isWide","hasLogo","onClose","hideCloseButton","wrapperRef","fadeIn","setFadeIn","sentinel","isScrolled","isSentinelVisible","handleEscapeKey","event","key","document","addEventListener","body","style","overflowY","removeEventListener","handleWrapperClick","target","current","FixedButtonWrapper","Flex","DROP_SHADOW","ModalOuterWrapper","Box","props","ModalWrapper","ModalElement","height","Wide","Normal","media","xs","ModalFlexContent","ModalStickyHeader","ModalScrollContent","CloseIconWrapper","Logo","ArtsyLogoIcon","displayName"],"mappings":"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","sourcesContent":["import { themeGet } from \"@styled-system/theme-get\"\nimport React, { FC, useEffect, useRef, useState } from \"react\"\nimport styled from \"styled-components\"\nimport { DROP_SHADOW, media } from \"../../helpers\"\nimport CloseIcon from \"@artsy/icons/CloseIcon\"\nimport ArtsyLogoIcon from \"@artsy/icons/ArtsyLogoIcon\"\nimport { Box } from \"../Box\"\nimport { Flex } from \"../Flex\"\nimport { Join } from \"../Join\"\nimport { Spacer } from \"../Spacer\"\nimport { Text } from \"../Text\"\nimport { useSentinelVisibility } from \"../../utils/useSentinelVisibility\"\n\n/**\n * FIXME: This whole thing needs to be rebuilt from scratch\n */\n\ninterface ModalProps {\n  FixedButton?: JSX.Element\n  refreshModalContentKey?: string\n  hasLogo?: boolean\n  height?: string\n  modalWidth?: ModalWidth\n  isWide?: boolean\n  onClose: () => void\n  show?: boolean\n  title?: string\n  /*\n   * Hide the X button if we don't want the user to be able to exit the modal without another action closing the modal\n   */\n  hideCloseButton?: boolean\n}\n\ninterface TransitionElementProps {\n  isWide?: boolean\n  show?: boolean\n  modalWidth?: ModalWidth\n}\n\ninterface ModalScrollContentProps {\n  hasLogo?: boolean\n  modalWidth?: ModalWidth\n}\n\nexport enum ModalWidth {\n  Narrow = \"300px\",\n  Normal = \"440px\",\n  Wide = \"900px\",\n}\n\n/**\n * Modal.\n * Spec: https://www.figma.com/file/m6gDpKHEWDbYJyrwsVZDBr/Artsy-3.0-Design-System?node-id=6150%3A7290\n * @deprecated: Use `ModalDialog` instead\n */\nexport const Modal: FC<ModalProps> = ({\n  children,\n  FixedButton,\n  title,\n  show,\n  modalWidth, // modalWidth overwrites isWide if present\n  isWide,\n  hasLogo,\n  onClose,\n  hideCloseButton,\n}) => {\n  const wrapperRef = useRef(null)\n  const [fadeIn, setFadeIn] = useState(false)\n  const { sentinel, isSentinelVisible: isScrolled } = useSentinelVisibility()\n\n  const handleEscapeKey = (event) => {\n    if (event && event.key === \"Escape\") {\n      onClose()\n    }\n  }\n\n  useEffect(() => {\n    if (show) {\n      setFadeIn(true)\n\n      if (!hideCloseButton) {\n        // Binds key event for escape to close modal\n        document.addEventListener(\"keyup\", handleEscapeKey, true)\n      }\n      // Fixes the body to disable scroll\n      document.body.style.overflowY = \"hidden\"\n    } else {\n      setFadeIn(false)\n      document.body.style.overflowY = \"visible\"\n      document.removeEventListener(\"keyup\", handleEscapeKey, true)\n    }\n\n    return document.removeEventListener(\"keyup\", handleEscapeKey, true)\n  }, [show])\n\n  const handleWrapperClick = (event) => {\n    // If modal X icon is hidden we don't want to close the modal when the wrapper is clicked\n    if (!hideCloseButton && event.target === wrapperRef.current) {\n      onClose()\n    }\n  }\n\n  if (!show) {\n    return null\n  }\n\n  return (\n    <>\n      <ModalOuterWrapper show={show} className={fadeIn ? \"fadeIn\" : \"\"}>\n        <ModalWrapper ref={wrapperRef} onClick={handleWrapperClick}>\n          <ModalElement\n            modalWidth={modalWidth}\n            isWide={isWide}\n            show={show}\n            className={fadeIn ? \"fadeIn\" : \"\"}\n          >\n            <ModalFlexContent>\n              <ModalStickyHeader\n                position=\"sticky\"\n                top={0}\n                display=\"flex\"\n                justifyContent=\"center\"\n                flexDirection=\"column\"\n                isScrolled={isScrolled}\n                px={2}\n              >\n                <Spacer y={2} />\n                <Flex>\n                  <Box pr={6} flex={1}>\n                    <Join separator={<Spacer y={2} />}>\n                      {hasLogo && <Logo width={78} my={1} />}\n                      {title && (\n                        <Text\n                          variant=\"lg-display\"\n                          color=\"black100\"\n                          py={hasLogo ? 0 : 1}\n                        >\n                          {title}\n                        </Text>\n                      )}\n                    </Join>\n                  </Box>\n\n                  {!hideCloseButton && (\n                    <CloseIconWrapper my={1} onClick={() => onClose()}>\n                      <CloseIcon fill=\"black60\" />\n                    </CloseIconWrapper>\n                  )}\n                </Flex>\n                <Spacer y={2} />\n              </ModalStickyHeader>\n\n              <ModalScrollContent\n                hasLogo={hasLogo}\n                modalWidth={modalWidth}\n                px={2}\n                py={1}\n                pb={2}\n              >\n                <>\n                  {sentinel}\n                  {children}\n                </>\n              </ModalScrollContent>\n\n              {FixedButton && (\n                <FixedButtonWrapper isScrolled={isScrolled} p={2}>\n                  {FixedButton}\n                </FixedButtonWrapper>\n              )}\n            </ModalFlexContent>\n          </ModalElement>\n        </ModalWrapper>\n      </ModalOuterWrapper>\n    </>\n  )\n}\n\ninterface ShadowOnScroll {\n  isScrolled?: boolean\n}\n\nconst FixedButtonWrapper = styled(Flex)<ShadowOnScroll>`\n  box-shadow: ${({ isScrolled }) => (isScrolled ? DROP_SHADOW : \"none\")};\n  flex: 0 0 auto;\n  transition: box-shadow 250ms ease-in-out;\n`\n\nconst ModalOuterWrapper = styled(Box)<TransitionElementProps>`\n  position: fixed;\n  top: 0;\n  left: 0;\n  z-index: 9999;\n  width: 100vw;\n  height: 100vh;\n  background-color: rgba(229, 229, 229, 0.5);\n  opacity: 0;\n  pointer-events: ${(props) => (props.show ? \"auto\" : \"none\")};\n\n  &.fadeIn {\n    transition: opacity 250ms ease;\n    transition-delay: 1ms;\n    opacity: 1;\n  }\n`\n\nconst ModalWrapper = styled(Flex)`\n  position: relative;\n  width: 100%;\n  height: 100%;\n  overflow: hidden;\n  justify-content: center;\n  align-items: center;\n`\n\nconst ModalElement = styled(Flex)<TransitionElementProps>`\n  position: absolute;\n  height: ${(props) => (props.height ? props.height : \"auto\") as any};\n  max-height: calc(100vh - 80px);\n  min-height: 58px;\n  overflow: hidden;\n  background-color: ${themeGet(\"colors.white100\")};\n  box-shadow: ${DROP_SHADOW};\n  width: ${(props) =>\n    props.modalWidth || (props.isWide ? ModalWidth.Wide : ModalWidth.Normal)};\n\n  ${media.xs`\n    max-height: 100vh;\n    height: calc(100vh - ${themeGet(\"space.4\")});\n    width: calc(100vw - ${themeGet(\"space.4\")});\n  `};\n\n  transform: translateY(2000px);\n  &.fadeIn {\n    transition: all 400ms cubic-bezier(0.075, 0.82, 0.165, 1); /* easeOutCirc */\n    transition-delay: 1ms;\n    transform: translateY(0px);\n  }\n`\n\nconst ModalFlexContent = styled(Flex)<ModalScrollContentProps>`\n  position: relative;\n  flex-direction: column;\n  width: 100%;\n  overflow: hidden;\n  max-height: calc(100vh - 80px);\n  ${media.xs`\n    max-height: 100vh;\n  `};\n`\n\nconst ModalStickyHeader = styled(Box)<ModalScrollContentProps & ShadowOnScroll>`\n  box-shadow: ${({ isScrolled }) => (isScrolled ? DROP_SHADOW : \"none\")};\n  transition: box-shadow 250ms ease-in-out;\n`\n\nconst ModalScrollContent = styled(Flex)<ModalScrollContentProps>`\n  overflow: auto;\n  flex-direction: column;\n`\n\nconst CloseIconWrapper = styled(Flex)`\n  cursor: pointer;\n`\n\nconst Logo = styled(ArtsyLogoIcon)``\n\nModal.displayName = \"Modal\"\nModalWrapper.displayName = \"ModalWrapper\"\nModalScrollContent.displayName = \"ModalScrollContent\"\n"],"file":"Modal.js"}

package/dist/elements/ModalDialog/ModalDialogContent.js

@@ -17,9 +17,9 @@ var _Flex = require("../Flex");
 
 var _Text = require("../Text");
 
-var _CloseIcon = require("../../svgs/CloseIcon");
+var _CloseIcon = _interopRequireDefault(require("@artsy/icons/CloseIcon"));
 
-var _ArtsyLogoBlackIcon = require("../../svgs/ArtsyLogoBlackIcon");
+var _ArtsyLogoIcon = _interopRequireDefault(require("@artsy/icons/ArtsyLogoIcon"));
 
 var _useSentinelVisibility = require("../../utils/useSentinelVisibility");
 
@@ -80,12 +80,10 @@ var ModalDialogContent = function ModalDialogContent(_ref) {
     justifyContent: "space-between"
   }, (title || hasLogo) && /*#__PURE__*/_react.default.createElement(_Box.Box, {
     m: 2
-  }, hasLogo && /*#__PURE__*/_react.default.createElement(_ArtsyLogoBlackIcon.ArtsyLogoBlackIcon, {
+  }, hasLogo && /*#__PURE__*/_react.default.createElement(_ArtsyLogoIcon.default, {
     display: "block",
-    style: {
-      width: "75px",
-      height: "26px"
-    }
+    width: 75,
+    height: 26
   }), hasLogo && title && /*#__PURE__*/_react.default.createElement(_Spacer.Spacer, {
     y: 2
   }), title && /*#__PURE__*/_react.default.createElement(_Text.Text, {
@@ -97,7 +95,7 @@ var ModalDialogContent = function ModalDialogContent(_ref) {
     ml: "auto",
     onClick: onClose,
     "aria-label": "Close"
-  }, /*#__PURE__*/_react.default.createElement(_CloseIcon.CloseIcon, {
+  }, /*#__PURE__*/_react.default.createElement(_CloseIcon.default, {
     fill: "currentColor",
     display: "block"
   }))), header && /*#__PURE__*/_react.default.createElement(_Box.Box, {

package/dist/elements/ModalDialog/ModalDialogContent.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/elements/ModalDialog/ModalDialogContent.tsx"],"names":["ModalDialogContent","children","footer","hasLogo","leftPanel","onClose","rightPanel","title","header","rest","topSentinel","sentinel","isAtTop","isSentinelVisible","bottomSentinel","isAtBottom","boxShadow","DROP_SHADOW","transition","undefined","width","height","WebkitOverflowScrolling","Close","Clickable"],"mappings":"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","sourcesContent":["import React from \"react\"\nimport { Clickable } from \"../Clickable\"\nimport { DROP_SHADOW } from \"../../helpers/shadow\"\nimport { Box, BoxProps } from \"../Box\"\nimport { Flex } from \"../Flex\"\nimport { Text } from \"../Text\"\nimport { CloseIcon } from \"../../svgs/CloseIcon\"\nimport { ArtsyLogoBlackIcon } from \"../../svgs/ArtsyLogoBlackIcon\"\nimport { useSentinelVisibility } from \"../../utils/useSentinelVisibility\"\nimport { Spacer } from \"../Spacer\"\nimport styled from \"styled-components\"\nimport { themeGet } from \"@styled-system/theme-get\"\n\nexport interface ModalDialogContentProps\n  extends BoxProps,\n    React.HTMLAttributes<HTMLDivElement> {\n  children: React.ReactNode\n  footer?: React.ReactNode\n  hasLogo?: boolean\n  leftPanel?: React.ReactNode\n  onClose: () => void\n  rightPanel?: React.ReactNode\n  title?: string\n  header?: React.ReactNode\n}\n\nexport const ModalDialogContent: React.FC<ModalDialogContentProps> = ({\n  children,\n  footer,\n  hasLogo,\n  leftPanel,\n  onClose,\n  rightPanel,\n  title,\n  header,\n  ...rest\n}) => {\n  const {\n    sentinel: topSentinel,\n    isSentinelVisible: isAtTop,\n  } = useSentinelVisibility()\n\n  const {\n    sentinel: bottomSentinel,\n    isSentinelVisible: isAtBottom,\n  } = useSentinelVisibility()\n\n  return (\n    <Flex bg=\"white100\" m={2} style={{ boxShadow: DROP_SHADOW }} {...rest}>\n      {leftPanel}\n\n      <Flex flexDirection=\"column\" overflow=\"hidden\" width=\"100%\">\n        <Flex\n          flexDirection=\"column\"\n          zIndex={1}\n          style={{\n            transition: \"box-shadow 250ms\",\n            boxShadow: isAtTop ? DROP_SHADOW : undefined,\n          }}\n        >\n          <Flex alignItems=\"flex-start\" justifyContent=\"space-between\">\n            {(title || hasLogo) && (\n              <Box m={2}>\n                {hasLogo && (\n                  <ArtsyLogoBlackIcon\n                    display=\"block\"\n                    style={{ width: \"75px\", height: \"26px\" }}\n                  />\n                )}\n\n                {hasLogo && title && <Spacer y={2} />}\n\n                {title && (\n                  <Text variant=\"lg-display\" lineClamp={6} hyphenate>\n                    {title}\n                  </Text>\n                )}\n              </Box>\n            )}\n\n            <Close p={2} ml=\"auto\" onClick={onClose} aria-label=\"Close\">\n              <CloseIcon fill=\"currentColor\" display=\"block\" />\n            </Close>\n          </Flex>\n\n          {header && <Box p={2}>{header}</Box>}\n        </Flex>\n\n        <Box\n          px={2}\n          pb={2}\n          flex={1}\n          overflow=\"auto\"\n          style={{ WebkitOverflowScrolling: \"touch\" }}\n        >\n          {topSentinel}\n          {children}\n          {bottomSentinel}\n        </Box>\n\n        {footer && (\n          <Box\n            p={2}\n            style={{\n              transition: \"box-shadow 250ms\",\n              boxShadow: isAtBottom ? DROP_SHADOW : undefined,\n            }}\n          >\n            {footer}\n          </Box>\n        )}\n      </Flex>\n\n      {rightPanel}\n    </Flex>\n  )\n}\n\nconst Close = styled(Clickable)`\n  color: ${themeGet(\"colors.black100\")};\n\n  &:focus,\n  &.focus-visible {\n    outline: none;\n    color: ${themeGet(\"colors.black60\")};\n  }\n`\n"],"file":"ModalDialogContent.js"}
+{"version":3,"sources":["../../../src/elements/ModalDialog/ModalDialogContent.tsx"],"names":["ModalDialogContent","children","footer","hasLogo","leftPanel","onClose","rightPanel","title","header","rest","topSentinel","sentinel","isAtTop","isSentinelVisible","bottomSentinel","isAtBottom","boxShadow","DROP_SHADOW","transition","undefined","WebkitOverflowScrolling","Close","Clickable"],"mappings":"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","sourcesContent":["import React from \"react\"\nimport { Clickable } from \"../Clickable\"\nimport { DROP_SHADOW } from \"../../helpers/shadow\"\nimport { Box, BoxProps } from \"../Box\"\nimport { Flex } from \"../Flex\"\nimport { Text } from \"../Text\"\nimport CloseIcon from \"@artsy/icons/CloseIcon\"\nimport ArtsyLogoIcon from \"@artsy/icons/ArtsyLogoIcon\"\nimport { useSentinelVisibility } from \"../../utils/useSentinelVisibility\"\nimport { Spacer } from \"../Spacer\"\nimport styled from \"styled-components\"\nimport { themeGet } from \"@styled-system/theme-get\"\n\nexport interface ModalDialogContentProps\n  extends BoxProps,\n    React.HTMLAttributes<HTMLDivElement> {\n  children: React.ReactNode\n  footer?: React.ReactNode\n  hasLogo?: boolean\n  leftPanel?: React.ReactNode\n  onClose: () => void\n  rightPanel?: React.ReactNode\n  title?: string\n  header?: React.ReactNode\n}\n\nexport const ModalDialogContent: React.FC<ModalDialogContentProps> = ({\n  children,\n  footer,\n  hasLogo,\n  leftPanel,\n  onClose,\n  rightPanel,\n  title,\n  header,\n  ...rest\n}) => {\n  const {\n    sentinel: topSentinel,\n    isSentinelVisible: isAtTop,\n  } = useSentinelVisibility()\n\n  const {\n    sentinel: bottomSentinel,\n    isSentinelVisible: isAtBottom,\n  } = useSentinelVisibility()\n\n  return (\n    <Flex bg=\"white100\" m={2} style={{ boxShadow: DROP_SHADOW }} {...rest}>\n      {leftPanel}\n\n      <Flex flexDirection=\"column\" overflow=\"hidden\" width=\"100%\">\n        <Flex\n          flexDirection=\"column\"\n          zIndex={1}\n          style={{\n            transition: \"box-shadow 250ms\",\n            boxShadow: isAtTop ? DROP_SHADOW : undefined,\n          }}\n        >\n          <Flex alignItems=\"flex-start\" justifyContent=\"space-between\">\n            {(title || hasLogo) && (\n              <Box m={2}>\n                {hasLogo && (\n                  <ArtsyLogoIcon display=\"block\" width={75} height={26} />\n                )}\n\n                {hasLogo && title && <Spacer y={2} />}\n\n                {title && (\n                  <Text variant=\"lg-display\" lineClamp={6} hyphenate>\n                    {title}\n                  </Text>\n                )}\n              </Box>\n            )}\n\n            <Close p={2} ml=\"auto\" onClick={onClose} aria-label=\"Close\">\n              <CloseIcon fill=\"currentColor\" display=\"block\" />\n            </Close>\n          </Flex>\n\n          {header && <Box p={2}>{header}</Box>}\n        </Flex>\n\n        <Box\n          px={2}\n          pb={2}\n          flex={1}\n          overflow=\"auto\"\n          style={{ WebkitOverflowScrolling: \"touch\" }}\n        >\n          {topSentinel}\n          {children}\n          {bottomSentinel}\n        </Box>\n\n        {footer && (\n          <Box\n            p={2}\n            style={{\n              transition: \"box-shadow 250ms\",\n              boxShadow: isAtBottom ? DROP_SHADOW : undefined,\n            }}\n          >\n            {footer}\n          </Box>\n        )}\n      </Flex>\n\n      {rightPanel}\n    </Flex>\n  )\n}\n\nconst Close = styled(Clickable)`\n  color: ${themeGet(\"colors.black100\")};\n\n  &:focus,\n  &.focus-visible {\n    outline: none;\n    color: ${themeGet(\"colors.black60\")};\n  }\n`\n"],"file":"ModalDialogContent.js"}

package/dist/elements/Pagination/Pagination.js

@@ -7,7 +7,9 @@ exports.Pagination = exports.PageLink = void 0;
 
 var _react = _interopRequireDefault(require("react"));
 
-var _ChevronIcon = require("../../svgs/ChevronIcon");
+var _ChevronLeftIcon = _interopRequireDefault(require("@artsy/icons/ChevronLeftIcon"));
+
+var _ChevronRightIcon = _interopRequireDefault(require("@artsy/icons/ChevronRightIcon"));
 
 var _Flex = require("../Flex");
 
@@ -76,11 +78,10 @@ var Pagination = function Pagination(_ref) {
     page: previous === null || previous === void 0 ? void 0 : previous.page,
     disabled: !previous,
     pr: 0.5
-  }, /*#__PURE__*/_react.default.createElement(_ChevronIcon.ChevronIcon, {
-    pr: 0.5,
-    direction: "left",
+  }, /*#__PURE__*/_react.default.createElement(_ChevronLeftIcon.default, {
+    mr: 0.5,
     height: 12,
-    fill: "currentColor"
+    width: 12
   }), /*#__PURE__*/_react.default.createElement("span", null, "Prev")), /*#__PURE__*/_react.default.createElement(_Flex.Flex, null, first && /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(Page, {
     onClick: onClick,
     pageCursor: first,
@@ -111,11 +112,10 @@ var Pagination = function Pagination(_ref) {
     page: nextPage,
     disabled: !hasNextPage,
     pl: 0.5
-  }, /*#__PURE__*/_react.default.createElement("span", null, "Next"), /*#__PURE__*/_react.default.createElement(_ChevronIcon.ChevronIcon, {
-    pl: 0.5,
-    direction: "right",
+  }, /*#__PURE__*/_react.default.createElement("span", null, "Next"), /*#__PURE__*/_react.default.createElement(_ChevronRightIcon.default, {
+    ml: 0.5,
     height: 12,
-    fill: "currentColor"
+    width: 12
   })));
 };
 

package/dist/elements/Pagination/Pagination.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/elements/Pagination/Pagination.tsx"],"names":["PageLink","styled","a","boxMixin","Pagination","getHref","hasNextPage","onClick","onNext","pageCursors","around","first","last","previous","rest","handlePrevClick","event","cursor","page","handleNextClick","nextPage","map","pageCursor","Page","isCurrent","handleClick","href","color","NextPrevButton","disabled","children","opacity","pointerEvents"],"mappings":";;;;;;;AAAA;;AACA;;AACA;;AACA;;AACA;;AACA;;;;;;;;;;;;;;AAeO,IAAMA,QAAQ,GAAGC,0BAAOC,CAAV;AAAA;AAAA;AAAA,qEAKjBC,aALiB,CAAd;;;;AAiBP;AACO,IAAMC,UAAqC,GAAG,SAAxCA,UAAwC,OAO/C;AAAA,MANJC,OAMI,QANJA,OAMI;AAAA,MALJC,WAKI,QALJA,WAKI;AAAA,MAJJC,OAII,QAJJA,OAII;AAAA,MAHJC,MAGI,QAHJA,MAGI;AAAA,8BAFJC,WAEI;AAAA,MAFWC,MAEX,oBAFWA,MAEX;AAAA,MAFmBC,KAEnB,oBAFmBA,KAEnB;AAAA,MAF0BC,IAE1B,oBAF0BA,IAE1B;AAAA,MAFgCC,QAEhC,oBAFgCA,QAEhC;AAAA,MADDC,IACC;;AACJ,MAAMC,eAAe,GAAG,SAAlBA,eAAkB,CAACC,KAAD,EAA6B;AACnD,QAAIH,QAAJ,EAAc;AACZN,MAAAA,OAAO,IAAIA,OAAO,CAACM,QAAQ,CAACI,MAAV,EAAkBJ,QAAQ,CAACK,IAA3B,EAAiCF,KAAjC,CAAlB;AACD;AACF,GAJD;;AAMA,MAAMG,eAAe,GAAG,SAAlBA,eAAkB,CAACH,KAAD,EAA6B;AACnDR,IAAAA,MAAM,IAAIA,MAAM,CAACQ,KAAD,EAAQI,QAAR,CAAhB;AACD,GAFD;;AAIA,MAAMA,QAAQ,GAAG,CAAC,CAAAP,QAAQ,SAAR,IAAAA,QAAQ,WAAR,YAAAA,QAAQ,CAAEK,IAAV,KAAkB,CAAnB,IAAwB,CAAzC;AAEA,sBACE,6BAAC,UAAD;AACE,IAAA,EAAE,EAAC,KADL;AAEE,kBAAW,YAFb;AAGE,IAAA,OAAO,EAAC,MAHV;AAIE,IAAA,OAAO,EAAC,IAJV;AAKE,IAAA,UAAU,EAAE,CALd;AAME,IAAA,UAAU,EAAC,QANb;AAOE,IAAA,cAAc,EAAC;AAPjB,KAQMJ,IARN,gBAUE,6BAAC,cAAD;AACE,mBAAY,MADd;AAEE,kBAAW,UAFb;AAGE,IAAA,OAAO,EAAET,OAHX;AAIE,IAAA,OAAO,EAAEU,eAJX;AAKE,IAAA,IAAI,EAAEF,QAAF,aAAEA,QAAF,uBAAEA,QAAQ,CAAEK,IALlB;AAME,IAAA,QAAQ,EAAE,CAACL,QANb;AAOE,IAAA,EAAE,EAAE;AAPN,kBASE,6BAAC,wBAAD;AACE,IAAA,EAAE,EAAE,GADN;AAEE,IAAA,SAAS,EAAC,MAFZ;AAGE,IAAA,MAAM,EAAE,EAHV;AAIE,IAAA,IAAI,EAAE;AAJR,IATF,eAgBE,kDAhBF,CAVF,eA6BE,6BAAC,UAAD,QACGF,KAAK,iBACJ,yEACE,6BAAC,IAAD;AAAM,IAAA,OAAO,EAAEJ,OAAf;AAAwB,IAAA,UAAU,EAAEI,KAApC;AAA2C,IAAA,OAAO,EAAEN;AAApD,IADF,eAEE,6BAAC,UAAD;AAAM,IAAA,UAAU,EAAC,QAAjB;AAA0B,IAAA,CAAC,EAAE,GAA7B;AAAkC,IAAA,KAAK,EAAC;AAAxC,cAFF,CAFJ,EAUGK,MAAM,CAACW,GAAP,CAAW,UAACC,UAAD,EAAgB;AAC1B,wBACE,6BAAC,IAAD;AACE,MAAA,OAAO,EAAEjB,OADX;AAEE,MAAA,GAAG,EAAEiB,UAAU,CAACJ,IAFlB;AAGE,MAAA,OAAO,EAAEX,OAHX;AAIE,MAAA,UAAU,EAAEe;AAJd,MADF;AAQD,GATA,CAVH,EAqBGV,IAAI,iBACH,yEACE,6BAAC,UAAD;AAAM,IAAA,UAAU,EAAC,QAAjB;AAA0B,IAAA,CAAC,EAAE,GAA7B;AAAkC,IAAA,KAAK,EAAC;AAAxC,cADF,eAKE,6BAAC,IAAD;AAAM,IAAA,OAAO,EAAEL,OAAf;AAAwB,IAAA,UAAU,EAAEK,IAApC;AAA0C,IAAA,OAAO,EAAEP;AAAnD,IALF,CAtBJ,CA7BF,eA6DE,6BAAC,cAAD;AACE,mBAAY,MADd;AAEE,IAAA,OAAO,EAAEA,OAFX;AAGE,IAAA,OAAO,EAAEc,eAHX;AAIE,IAAA,IAAI,EAAEC,QAJR;AAKE,IAAA,QAAQ,EAAE,CAACd,WALb;AAME,IAAA,EAAE,EAAE;AANN,kBAQE,kDARF,eAUE,6BAAC,wBAAD;AACE,IAAA,EAAE,EAAE,GADN;AAEE,IAAA,SAAS,EAAC,OAFZ;AAGE,IAAA,MAAM,EAAE,EAHV;AAIE,IAAA,IAAI,EAAE;AAJR,IAVF,CA7DF,CADF;AAiFD,CArGM;;;AAAMF,U;;AA6Gb,IAAMmB,IAAyB,GAAG,SAA5BA,IAA4B,QAK5B;AAAA,MAJJlB,OAII,SAJJA,OAII;AAAA,MAHJE,OAGI,SAHJA,OAGI;AAAA,+BAFJe,UAEI;AAAA,MAFUL,MAEV,oBAFUA,MAEV;AAAA,MAFkBO,SAElB,oBAFkBA,SAElB;AAAA,MAF6BN,IAE7B,oBAF6BA,IAE7B;AAAA,MADDJ,IACC;;AACJ,MAAMW,WAAW,GAAG,SAAdA,WAAc,CAClBT,KADkB,EAEf;AACHT,IAAAA,OAAO,IAAIA,OAAO,CAACU,MAAD,EAASC,IAAT,EAAeF,KAAf,CAAlB;AACD,GAJD;;AAMA,MAAMU,IAAI,GAAGR,IAAI,IAAI,OAAOb,OAAP,KAAmB,WAA3B,GAAyCA,OAAO,CAACa,IAAD,CAAhD,GAAyD,EAAtE;AAEA,sBACE,6BAAC,QAAD;AACE,IAAA,IAAI,EAAEQ,IADR;AAEE,IAAA,OAAO,EAAED,WAFX;AAGE,IAAA,YAAY,EAAE,CAHhB;AAIE,IAAA,OAAO,EAAC,MAJV;AAKE,IAAA,UAAU,EAAC,QALb;AAME,IAAA,CAAC,EAAE;AANL,KAOOD,SAAS,GACV;AAAEG,IAAAA,KAAK,EAAE,UAAT;AAAqB,oBAAgB;AAArC,GADU,GAEV;AAAEA,IAAAA,KAAK,EAAE;AAAT,GATN,EAUMb,IAVN,GAYGI,IAZH,CADF;AAgBD,CA9BD;;AAAMK,I;;AAuCN,IAAMK,cAA6C,GAAG,SAAhDA,cAAgD,QAOhD;AAAA,MANJC,QAMI,SANJA,QAMI;AAAA,MALJxB,OAKI,SALJA,OAKI;AAAA,MAJJE,OAII,SAJJA,OAII;AAAA,MAHJW,IAGI,SAHJA,IAGI;AAAA,MAFJY,QAEI,SAFJA,QAEI;AAAA,MADDhB,IACC;;AACJ,MAAMY,IAAI,GACR,CAACG,QAAD,IAAaX,IAAb,IAAqB,OAAOb,OAAP,KAAmB,WAAxC,GAAsDA,OAAO,CAACa,IAAD,CAA7D,GAAsE,EADxE;;AAGA,MAAIW,QAAJ,EAAc;AACZ,wBACE,6BAAC,UAAD;AACE,MAAA,OAAO,EAAC,MADV;AAEE,MAAA,UAAU,EAAC,QAFb;AAGE,MAAA,KAAK,EAAC,SAHR;AAIE,MAAA,EAAE,EAAE;AAJN,OAKMf,IALN,GAOGgB,QAPH,CADF;AAWD;;AAED,sBACE,6BAAC,QAAD;AACE,IAAA,IAAI,EAAEJ,IADR;AAEE,IAAA,OAAO,EAAEnB,OAFX;AAGE,IAAA,OAAO,EAAC,MAHV;AAIE,IAAA,UAAU,EAAC,QAJb;AAKE,IAAA,EAAE,EAAE,GALN;AAME,IAAA,KAAK,EACH,CAACsB,QAAD,GACI;AACEE,MAAAA,OAAO,EAAE,CADX;AAEEC,MAAAA,aAAa,EAAE;AAFjB,KADJ,GAKI;AACED,MAAAA,OAAO,EAAE,GADX;AAEEC,MAAAA,aAAa,EAAE;AAFjB;AAZR,KAiBMlB,IAjBN,GAmBGgB,QAnBH,CADF;AAuBD,CAhDD;;AAAMF,c","sourcesContent":["import React from \"react\"\nimport { ChevronIcon } from \"../../svgs/ChevronIcon\"\nimport { Flex, FlexProps } from \"../Flex\"\nimport { Text } from \"../Text\"\nimport styled from \"styled-components\"\nimport { boxMixin, BoxProps } from \"../Box\"\n\ninterface PageCursor {\n  cursor: string\n  isCurrent: boolean\n  page: number\n}\n\nexport interface PageCursors {\n  around: PageCursor[]\n  first: PageCursor\n  last: PageCursor\n  previous: PageCursor\n}\n\nexport const PageLink = styled.a<BoxProps>`\n  text-decoration: none;\n  &:hover {\n    text-decoration: underline;\n  }\n  ${boxMixin}\n`\n\nexport interface PaginationProps extends FlexProps {\n  getHref?: (page: number) => string\n  hasNextPage: boolean\n  onClick?: (cursor: string, page: number, event: React.MouseEvent) => void\n  onNext?: (event: React.MouseEvent, page: number) => void\n  pageCursors: PageCursors\n  scrollTo?: string\n}\n\n/** Pagination */\nexport const Pagination: React.FC<PaginationProps> = ({\n  getHref,\n  hasNextPage,\n  onClick,\n  onNext,\n  pageCursors: { around, first, last, previous },\n  ...rest\n}) => {\n  const handlePrevClick = (event: React.MouseEvent) => {\n    if (previous) {\n      onClick && onClick(previous.cursor, previous.page, event)\n    }\n  }\n\n  const handleNextClick = (event: React.MouseEvent) => {\n    onNext && onNext(event, nextPage)\n  }\n\n  const nextPage = (previous?.page || 0) + 2\n\n  return (\n    <Text\n      as=\"nav\"\n      aria-label=\"Pagination\"\n      display=\"flex\"\n      variant=\"sm\"\n      lineHeight={1}\n      alignItems=\"center\"\n      justifyContent=\"space-between\"\n      {...rest}\n    >\n      <NextPrevButton\n        data-testid=\"prev\"\n        aria-label=\"Previous\"\n        getHref={getHref}\n        onClick={handlePrevClick}\n        page={previous?.page}\n        disabled={!previous}\n        pr={0.5}\n      >\n        <ChevronIcon\n          pr={0.5}\n          direction=\"left\"\n          height={12}\n          fill={\"currentColor\" as any}\n        />\n\n        <span>Prev</span>\n      </NextPrevButton>\n\n      <Flex>\n        {first && (\n          <>\n            <Page onClick={onClick} pageCursor={first} getHref={getHref} />\n            <Flex alignItems=\"center\" p={0.5} color=\"black60\">\n              …\n            </Flex>\n          </>\n        )}\n\n        {around.map((pageCursor) => {\n          return (\n            <Page\n              getHref={getHref}\n              key={pageCursor.page}\n              onClick={onClick}\n              pageCursor={pageCursor}\n            />\n          )\n        })}\n\n        {last && (\n          <>\n            <Flex alignItems=\"center\" p={0.5} color=\"black60\">\n              …\n            </Flex>\n\n            <Page onClick={onClick} pageCursor={last} getHref={getHref} />\n          </>\n        )}\n      </Flex>\n\n      <NextPrevButton\n        data-testid=\"next\"\n        getHref={getHref}\n        onClick={handleNextClick}\n        page={nextPage}\n        disabled={!hasNextPage}\n        pl={0.5}\n      >\n        <span>Next</span>\n\n        <ChevronIcon\n          pl={0.5}\n          direction=\"right\"\n          height={12}\n          fill={\"currentColor\" as any}\n        />\n      </NextPrevButton>\n    </Text>\n  )\n}\n\ninterface PageProps extends BoxProps {\n  getHref?: (page: number) => string\n  onClick?: (cursor: string, page: number, event: React.MouseEvent) => void\n  pageCursor: PageCursor\n}\n\nconst Page: React.FC<PageProps> = ({\n  getHref,\n  onClick,\n  pageCursor: { cursor, isCurrent, page },\n  ...rest\n}) => {\n  const handleClick = (\n    event: React.MouseEvent<HTMLAnchorElement, MouseEvent>\n  ) => {\n    onClick && onClick(cursor, page, event)\n  }\n\n  const href = page && typeof getHref !== \"undefined\" ? getHref(page) : \"\"\n\n  return (\n    <PageLink\n      href={href}\n      onClick={handleClick}\n      borderRadius={2}\n      display=\"flex\"\n      alignItems=\"center\"\n      p={0.5}\n      {...(isCurrent\n        ? { color: \"black100\", \"aria-current\": \"page\" }\n        : { color: \"black60\" })}\n      {...rest}\n    >\n      {page}\n    </PageLink>\n  )\n}\n\nexport interface NextPrevButtonProps extends BoxProps {\n  disabled: boolean\n  getHref?: (page: number) => string\n  onClick: (event: React.MouseEvent) => void\n  page?: number\n}\n\nconst NextPrevButton: React.FC<NextPrevButtonProps> = ({\n  disabled,\n  getHref,\n  onClick,\n  page,\n  children,\n  ...rest\n}) => {\n  const href =\n    !disabled && page && typeof getHref !== \"undefined\" ? getHref(page) : \"\"\n\n  if (disabled) {\n    return (\n      <Flex\n        display=\"flex\"\n        alignItems=\"center\"\n        color=\"black30\"\n        py={0.5}\n        {...rest}\n      >\n        {children}\n      </Flex>\n    )\n  }\n\n  return (\n    <PageLink\n      href={href}\n      onClick={onClick}\n      display=\"flex\"\n      alignItems=\"center\"\n      py={0.5}\n      style={\n        !disabled\n          ? {\n              opacity: 1,\n              pointerEvents: \"inherit\",\n            }\n          : {\n              opacity: 0.1,\n              pointerEvents: \"none\",\n            }\n      }\n      {...rest}\n    >\n      {children}\n    </PageLink>\n  )\n}\n"],"file":"Pagination.js"}
+{"version":3,"sources":["../../../src/elements/Pagination/Pagination.tsx"],"names":["PageLink","styled","a","boxMixin","Pagination","getHref","hasNextPage","onClick","onNext","pageCursors","around","first","last","previous","rest","handlePrevClick","event","cursor","page","handleNextClick","nextPage","map","pageCursor","Page","isCurrent","handleClick","href","color","NextPrevButton","disabled","children","opacity","pointerEvents"],"mappings":"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","sourcesContent":["import React from \"react\"\nimport ChevronLeftIcon from \"@artsy/icons/ChevronLeftIcon\"\nimport ChevronRightIcon from \"@artsy/icons/ChevronRightIcon\"\nimport { Flex, FlexProps } from \"../Flex\"\nimport { Text } from \"../Text\"\nimport styled from \"styled-components\"\nimport { boxMixin, BoxProps } from \"../Box\"\n\ninterface PageCursor {\n  cursor: string\n  isCurrent: boolean\n  page: number\n}\n\nexport interface PageCursors {\n  around: PageCursor[]\n  first: PageCursor\n  last: PageCursor\n  previous: PageCursor\n}\n\nexport const PageLink = styled.a<BoxProps>`\n  text-decoration: none;\n  &:hover {\n    text-decoration: underline;\n  }\n  ${boxMixin}\n`\n\nexport interface PaginationProps extends FlexProps {\n  getHref?: (page: number) => string\n  hasNextPage: boolean\n  onClick?: (cursor: string, page: number, event: React.MouseEvent) => void\n  onNext?: (event: React.MouseEvent, page: number) => void\n  pageCursors: PageCursors\n  scrollTo?: string\n}\n\n/** Pagination */\nexport const Pagination: React.FC<PaginationProps> = ({\n  getHref,\n  hasNextPage,\n  onClick,\n  onNext,\n  pageCursors: { around, first, last, previous },\n  ...rest\n}) => {\n  const handlePrevClick = (event: React.MouseEvent) => {\n    if (previous) {\n      onClick && onClick(previous.cursor, previous.page, event)\n    }\n  }\n\n  const handleNextClick = (event: React.MouseEvent) => {\n    onNext && onNext(event, nextPage)\n  }\n\n  const nextPage = (previous?.page || 0) + 2\n\n  return (\n    <Text\n      as=\"nav\"\n      aria-label=\"Pagination\"\n      display=\"flex\"\n      variant=\"sm\"\n      lineHeight={1}\n      alignItems=\"center\"\n      justifyContent=\"space-between\"\n      {...rest}\n    >\n      <NextPrevButton\n        data-testid=\"prev\"\n        aria-label=\"Previous\"\n        getHref={getHref}\n        onClick={handlePrevClick}\n        page={previous?.page}\n        disabled={!previous}\n        pr={0.5}\n      >\n        <ChevronLeftIcon mr={0.5} height={12} width={12} />\n\n        <span>Prev</span>\n      </NextPrevButton>\n\n      <Flex>\n        {first && (\n          <>\n            <Page onClick={onClick} pageCursor={first} getHref={getHref} />\n            <Flex alignItems=\"center\" p={0.5} color=\"black60\">\n              …\n            </Flex>\n          </>\n        )}\n\n        {around.map((pageCursor) => {\n          return (\n            <Page\n              getHref={getHref}\n              key={pageCursor.page}\n              onClick={onClick}\n              pageCursor={pageCursor}\n            />\n          )\n        })}\n\n        {last && (\n          <>\n            <Flex alignItems=\"center\" p={0.5} color=\"black60\">\n              …\n            </Flex>\n\n            <Page onClick={onClick} pageCursor={last} getHref={getHref} />\n          </>\n        )}\n      </Flex>\n\n      <NextPrevButton\n        data-testid=\"next\"\n        getHref={getHref}\n        onClick={handleNextClick}\n        page={nextPage}\n        disabled={!hasNextPage}\n        pl={0.5}\n      >\n        <span>Next</span>\n\n        <ChevronRightIcon ml={0.5} height={12} width={12} />\n      </NextPrevButton>\n    </Text>\n  )\n}\n\ninterface PageProps extends BoxProps {\n  getHref?: (page: number) => string\n  onClick?: (cursor: string, page: number, event: React.MouseEvent) => void\n  pageCursor: PageCursor\n}\n\nconst Page: React.FC<PageProps> = ({\n  getHref,\n  onClick,\n  pageCursor: { cursor, isCurrent, page },\n  ...rest\n}) => {\n  const handleClick = (\n    event: React.MouseEvent<HTMLAnchorElement, MouseEvent>\n  ) => {\n    onClick && onClick(cursor, page, event)\n  }\n\n  const href = page && typeof getHref !== \"undefined\" ? getHref(page) : \"\"\n\n  return (\n    <PageLink\n      href={href}\n      onClick={handleClick}\n      borderRadius={2}\n      display=\"flex\"\n      alignItems=\"center\"\n      p={0.5}\n      {...(isCurrent\n        ? { color: \"black100\", \"aria-current\": \"page\" }\n        : { color: \"black60\" })}\n      {...rest}\n    >\n      {page}\n    </PageLink>\n  )\n}\n\nexport interface NextPrevButtonProps extends BoxProps {\n  disabled: boolean\n  getHref?: (page: number) => string\n  onClick: (event: React.MouseEvent) => void\n  page?: number\n}\n\nconst NextPrevButton: React.FC<NextPrevButtonProps> = ({\n  disabled,\n  getHref,\n  onClick,\n  page,\n  children,\n  ...rest\n}) => {\n  const href =\n    !disabled && page && typeof getHref !== \"undefined\" ? getHref(page) : \"\"\n\n  if (disabled) {\n    return (\n      <Flex\n        display=\"flex\"\n        alignItems=\"center\"\n        color=\"black30\"\n        py={0.5}\n        {...rest}\n      >\n        {children}\n      </Flex>\n    )\n  }\n\n  return (\n    <PageLink\n      href={href}\n      onClick={onClick}\n      display=\"flex\"\n      alignItems=\"center\"\n      py={0.5}\n      style={\n        !disabled\n          ? {\n              opacity: 1,\n              pointerEvents: \"inherit\",\n            }\n          : {\n              opacity: 0.1,\n              pointerEvents: \"none\",\n            }\n      }\n      {...rest}\n    >\n      {children}\n    </PageLink>\n  )\n}\n"],"file":"Pagination.js"}

package/dist/elements/PasswordInput/PasswordInput.js

@@ -13,12 +13,14 @@ var _LabeledInput = require("../LabeledInput");
 
 var _Clickable = require("../Clickable");
 
-var _EyeClosedIcon = require("../../svgs/EyeClosedIcon");
+var _ShowIcon = _interopRequireDefault(require("@artsy/icons/ShowIcon"));
 
-var _EyeOpenedIcon = require("../../svgs/EyeOpenedIcon");
+var _HideIcon = _interopRequireDefault(require("@artsy/icons/HideIcon"));
 
 var _excluded = ["defaultVisibility"];
 
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
 function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
 
 function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
@@ -62,11 +64,7 @@ var PasswordInput = function PasswordInput(_ref) {
     label: /*#__PURE__*/_react.default.createElement(_Clickable.Clickable, {
       onClick: handleClick,
       height: "100%"
-    }, visibility ? /*#__PURE__*/_react.default.createElement(_EyeClosedIcon.EyeClosedIcon, {
-      display: "block"
-    }) : /*#__PURE__*/_react.default.createElement(_EyeOpenedIcon.EyeOpenedIcon, {
-      display: "block"
-    }))
+    }, visibility ? /*#__PURE__*/_react.default.createElement(_HideIcon.default, null) : /*#__PURE__*/_react.default.createElement(_ShowIcon.default, null))
   }, rest));
 };
 

package/dist/elements/PasswordInput/PasswordInput.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/elements/PasswordInput/PasswordInput.tsx"],"names":["PasswordInput","defaultVisibility","rest","visibility","setVisibility","handleClick","prevVisibility"],"mappings":";;;;;;;;;AAAA;;AAEA;;AACA;;AACA;;AACA;;;;;;;;;;;;;;;;;;;;;;;;;;AAMO,IAAMA,aAA2C,GAAG,SAA9CA,aAA8C,OAGrD;AAAA,mCAFJC,iBAEI;AAAA,MAFJA,iBAEI,sCAFgB,KAEhB;AAAA,MADDC,IACC;;AACJ,kBAAoC,qBAASD,iBAAT,CAApC;AAAA;AAAA,MAAOE,UAAP;AAAA,MAAmBC,aAAnB;;AAEA,MAAMC,WAAW,GAAG,SAAdA,WAAc,GAAM;AACxBD,IAAAA,aAAa,CAAC,UAACE,cAAD;AAAA,aAAoB,CAACA,cAArB;AAAA,KAAD,CAAb;AACD,GAFD;;AAIA,sBACE,6BAAC,0BAAD;AACE,IAAA,IAAI,EAAEH,UAAU,GAAG,MAAH,GAAY,UAD9B;AAEE,IAAA,KAAK,eACH,6BAAC,oBAAD;AAAW,MAAA,OAAO,EAAEE,WAApB;AAAiC,MAAA,MAAM,EAAC;AAAxC,OACGF,UAAU,gBACT,6BAAC,4BAAD;AAAe,MAAA,OAAO,EAAC;AAAvB,MADS,gBAGT,6BAAC,4BAAD;AAAe,MAAA,OAAO,EAAC;AAAvB,MAJJ;AAHJ,KAWMD,IAXN,EADF;AAeD,CAzBM;;;AAAMF,a","sourcesContent":["import React, { useState } from \"react\"\nimport { InputProps } from \"../Input\"\nimport { LabeledInput } from \"../LabeledInput\"\nimport { Clickable } from \"../Clickable\"\nimport { EyeClosedIcon } from \"../../svgs/EyeClosedIcon\"\nimport { EyeOpenedIcon } from \"../../svgs/EyeOpenedIcon\"\n\nexport interface PasswordInputProps extends InputProps {\n  defaultVisibility?: boolean\n}\n\nexport const PasswordInput: React.FC<PasswordInputProps> = ({\n  defaultVisibility = false,\n  ...rest\n}) => {\n  const [visibility, setVisibility] = useState(defaultVisibility)\n\n  const handleClick = () => {\n    setVisibility((prevVisibility) => !prevVisibility)\n  }\n\n  return (\n    <LabeledInput\n      type={visibility ? \"text\" : \"password\"}\n      label={\n        <Clickable onClick={handleClick} height=\"100%\">\n          {visibility ? (\n            <EyeClosedIcon display=\"block\" />\n          ) : (\n            <EyeOpenedIcon display=\"block\" />\n          )}\n        </Clickable>\n      }\n      {...rest}\n    />\n  )\n}\n"],"file":"PasswordInput.js"}
+{"version":3,"sources":["../../../src/elements/PasswordInput/PasswordInput.tsx"],"names":["PasswordInput","defaultVisibility","rest","visibility","setVisibility","handleClick","prevVisibility"],"mappings":";;;;;;;;;AAAA;;AAEA;;AACA;;AACA;;AACA;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAMO,IAAMA,aAA2C,GAAG,SAA9CA,aAA8C,OAGrD;AAAA,mCAFJC,iBAEI;AAAA,MAFJA,iBAEI,sCAFgB,KAEhB;AAAA,MADDC,IACC;;AACJ,kBAAoC,qBAASD,iBAAT,CAApC;AAAA;AAAA,MAAOE,UAAP;AAAA,MAAmBC,aAAnB;;AAEA,MAAMC,WAAW,GAAG,SAAdA,WAAc,GAAM;AACxBD,IAAAA,aAAa,CAAC,UAACE,cAAD;AAAA,aAAoB,CAACA,cAArB;AAAA,KAAD,CAAb;AACD,GAFD;;AAIA,sBACE,6BAAC,0BAAD;AACE,IAAA,IAAI,EAAEH,UAAU,GAAG,MAAH,GAAY,UAD9B;AAEE,IAAA,KAAK,eACH,6BAAC,oBAAD;AAAW,MAAA,OAAO,EAAEE,WAApB;AAAiC,MAAA,MAAM,EAAC;AAAxC,OACGF,UAAU,gBAAG,6BAAC,iBAAD,OAAH,gBAAkB,6BAAC,iBAAD,OAD/B;AAHJ,KAOMD,IAPN,EADF;AAWD,CArBM;;;AAAMF,a","sourcesContent":["import React, { useState } from \"react\"\nimport { InputProps } from \"../Input\"\nimport { LabeledInput } from \"../LabeledInput\"\nimport { Clickable } from \"../Clickable\"\nimport ShowIcon from \"@artsy/icons/ShowIcon\"\nimport HideIcon from \"@artsy/icons/HideIcon\"\n\nexport interface PasswordInputProps extends InputProps {\n  defaultVisibility?: boolean\n}\n\nexport const PasswordInput: React.FC<PasswordInputProps> = ({\n  defaultVisibility = false,\n  ...rest\n}) => {\n  const [visibility, setVisibility] = useState(defaultVisibility)\n\n  const handleClick = () => {\n    setVisibility((prevVisibility) => !prevVisibility)\n  }\n\n  return (\n    <LabeledInput\n      type={visibility ? \"text\" : \"password\"}\n      label={\n        <Clickable onClick={handleClick} height=\"100%\">\n          {visibility ? <HideIcon /> : <ShowIcon />}\n        </Clickable>\n      }\n      {...rest}\n    />\n  )\n}\n"],"file":"PasswordInput.js"}

package/dist/elements/Pill/Pill.d.ts

@@ -1,6 +1,7 @@
 import React from "react";
-import { IconProps } from "../../svgs";
 import { ClickableProps } from "../Clickable";
+import { BoxProps } from "../Box";
+import { ResponsiveValue } from "styled-system";
 export declare const PILL_VARIANT_NAMES: readonly ["default", "search", "filter", "artist", "badge"];
 export declare type PillVariant = typeof PILL_VARIANT_NAMES[number];
 export declare type PillState = "default" | "hover" | "focus" | "active" | "selected" | "disabled";
@@ -16,7 +17,9 @@ export declare type PillProps = ClickableProps & {
     /** Forces selected state. Use this state to denote the selected state */
     selected?: boolean;
     /** Optional icon slot */
-    Icon?: React.FunctionComponent<IconProps>;
+    Icon?: React.FunctionComponent<BoxProps & {
+        fill?: ResponsiveValue<string>;
+    }>;
 } & ({
     variant?: Extract<PillVariant, "default" | "search" | "badge" | "filter">;
 } | {

package/dist/elements/Pill/Pill.js

@@ -13,7 +13,7 @@ var _react = _interopRequireDefault(require("react"));
 
 var _styledComponents = _interopRequireWildcard(require("styled-components"));
 
-var _svgs = require("../../svgs");
+var _CloseIcon = _interopRequireDefault(require("@artsy/icons/CloseIcon"));
 
 var _Clickable = require("../Clickable");
 
@@ -64,7 +64,7 @@ var Pill = function Pill(_ref) {
   }), /*#__PURE__*/_react.default.createElement(_Text.Text, {
     variant: rest.variant === "search" ? ["xs", "sm-display"] : "xs",
     overflowEllipsis: true
-  }, /*#__PURE__*/_react.default.createElement("span", null, children), rest.variant === "search" && "count" in rest && /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, " ", /*#__PURE__*/_react.default.createElement(_Sup.Sup, null, rest.count))), (rest.variant === "filter" && !rest.disabled || rest.variant === "artist" && rest.selected) && /*#__PURE__*/_react.default.createElement(_svgs.CloseIcon, {
+  }, /*#__PURE__*/_react.default.createElement("span", null, children), rest.variant === "search" && "count" in rest && /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, " ", /*#__PURE__*/_react.default.createElement(_Sup.Sup, null, rest.count))), (rest.variant === "filter" && !rest.disabled || rest.variant === "artist" && rest.selected) && /*#__PURE__*/_react.default.createElement(_CloseIcon.default, {
     fill: "currentColor",
     ml: 0.5,
     width: 15,

package/dist/elements/Pill/Pill.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/elements/Pill/Pill.tsx"],"names":["PILL_VARIANT_NAMES","Pill","children","Icon","rest","variant","src","srcSet","count","disabled","selected","defaultProps","Container","Clickable","props","states","PILL_VARIANTS","css","default","focus","hover","active","Thumbnail","styled","img"],"mappings":";;;;;;;;;AAAA;;AACA;;AACA;;AAEA;;AACA;;AACA;;AACA;;AACA;;;;;;;;;;;;;;;;AAEO,IAAMA,kBAAkB,GAAG,CAChC,SADgC,EAEhC,QAFgC,EAGhC,QAHgC,EAIhC,QAJgC,EAKhC,OALgC,CAA3B;;;AAuDP;AACA;AACA;AACA;AACA;AACO,IAAMC,IAAyB,GAAG,SAA5BA,IAA4B,OAAiC;AAAA,MAA9BC,QAA8B,QAA9BA,QAA8B;AAAA,MAApBC,IAAoB,QAApBA,IAAoB;AAAA,MAAXC,IAAW;;AACxE,sBACE,6BAAC,SAAD,EAAeA,IAAf,EACGA,IAAI,CAACC,OAAL,KAAiB,QAAjB,iBACC,6BAAC,SAAD,eACOD,IAAI,CAACE,GAAL,GACD;AAAEA,IAAAA,GAAG,EAAE,OAAOF,IAAI,CAACE,GAAZ,KAAoB,QAApB,GAA+BF,IAAI,CAACE,GAApC,GAA0CF,IAAI,CAACE,GAAL,CAAS,CAAT;AAAjD,GADC,GAED,EAHN,EAIOF,IAAI,CAACE,GAAL,IAAY,OAAOF,IAAI,CAACE,GAAZ,KAAoB,QAAhC,IAA4CF,IAAI,CAACE,GAAL,CAAS,CAAT,CAA5C,GACD;AAAEC,IAAAA,MAAM,YAAKH,IAAI,CAACE,GAAL,CAAS,CAAT,CAAL,kBAAwBF,IAAI,CAACE,GAAL,CAAS,CAAT,CAAxB;AAAR,GADC,GAED,EANN;AAOE;AACA,IAAA,GAAG,EAAC;AARN,KAFJ,EAcGH,IAAI,iBAAI,6BAAC,IAAD;AAAM,IAAA,IAAI,EAAC,cAAX;AAA0B,IAAA,EAAE,EAAE,CAAC,GAA/B;AAAoC,IAAA,EAAE,EAAE;AAAxC,IAdX,eAgBE,6BAAC,UAAD;AACE,IAAA,OAAO,EAAEC,IAAI,CAACC,OAAL,KAAiB,QAAjB,GAA4B,CAAC,IAAD,EAAO,YAAP,CAA5B,GAAmD,IAD9D;AAEE,IAAA,gBAAgB;AAFlB,kBAIE,2CAAOH,QAAP,CAJF,EAMGE,IAAI,CAACC,OAAL,KAAiB,QAAjB,IAA6B,WAAWD,IAAxC,iBACC,4DACG,GADH,eAEE,6BAAC,QAAD,QAAMA,IAAI,CAACI,KAAX,CAFF,CAPJ,CAhBF,EA8BG,CAAEJ,IAAI,CAACC,OAAL,KAAiB,QAAjB,IAA6B,CAACD,IAAI,CAACK,QAApC,IACCL,IAAI,CAACC,OAAL,KAAiB,QAAjB,IAA6BD,IAAI,CAACM,QADpC,kBAEC,6BAAC,eAAD;AAAW,IAAA,IAAI,EAAC,cAAhB;AAA+B,IAAA,EAAE,EAAE,GAAnC;AAAwC,IAAA,KAAK,EAAE,EAA/C;AAAmD,IAAA,MAAM,EAAE;AAA3D,IAhCJ,CADF;AAqCD,CAtCM;;;AAAMT,I;AAwCbA,IAAI,CAACU,YAAL,GAAoB;AAClBN,EAAAA,OAAO,EAAE;AADS,CAApB;AAIA,IAAMO,SAAS,GAAG,+BAAOC,oBAAP,CAAH;AAAA;AAAA;AAAA,iQAOO,wBAAS,gBAAT,CAPP,EAWX,UAACC,KAAD,EAAW;AAAA;;AACX,MAAMC,MAAM,GAAGC,wCAAcF,KAAK,CAACT,OAApB,2DAA+B,QAA/B,CAAf;AAEA,aAAOY,qBAAP,sIACIF,MAAM,CAACG,OADX,EAEIJ,KAAK,CAACK,KAAN,IAAeJ,MAAM,CAACI,KAF1B,EAGIL,KAAK,CAACM,KAAN,IAAeL,MAAM,CAACK,KAH1B,EAIIN,KAAK,CAACJ,QAAN,IAAkBK,MAAM,CAACL,QAJ7B,EAKII,KAAK,CAACO,MAAN,IAAgBN,MAAM,CAACM,MAL3B,EAMIP,KAAK,CAACL,QAAN,IAAkBM,MAAM,CAACN,QAN7B,EASMM,MAAM,CAACK,KATb,EAcML,MAAM,CAACI,KAdb,EAeML,KAAK,CAACJ,QAAN,IAAkBK,MAAM,CAACL,QAf/B,EAmBMK,MAAM,CAACM,MAnBb,EAoBMP,KAAK,CAACJ,QAAN,IAAkBK,MAAM,CAACL,QApB/B,EAyBMK,MAAM,CAACN,QAzBb;AA4BD,CA1CY,CAAf;;AA6CA,IAAMa,SAAS,GAAGC,0BAAOC,GAAV;AAAA;AAAA;AAAA,wGAKG,wBAAS,SAAT,CALH,EAMO,wBAAS,gBAAT,CANP,CAAf","sourcesContent":["import { themeGet } from \"@styled-system/theme-get\"\nimport React from \"react\"\nimport styled from \"styled-components\"\nimport { css } from \"styled-components\"\nimport { CloseIcon, IconProps } from \"../../svgs\"\nimport { Clickable, ClickableProps } from \"../Clickable\"\nimport { Sup } from \"../Sup\"\nimport { Text } from \"../Text\"\nimport { PILL_VARIANTS } from \"./tokens\"\n\nexport const PILL_VARIANT_NAMES = [\n  \"default\",\n  \"search\",\n  \"filter\",\n  \"artist\",\n  \"badge\",\n] as const\n\nexport type PillVariant = typeof PILL_VARIANT_NAMES[number]\n\nexport type PillState =\n  | \"default\"\n  | \"hover\"\n  | \"focus\"\n  | \"active\"\n  | \"selected\"\n  | \"disabled\"\n\n/** PillProps */\nexport type PillProps = ClickableProps & {\n  as?: keyof JSX.IntrinsicElements | React.ComponentType\n  /** Forces focus state */\n  focus?: boolean\n  /** Forces hover state */\n  hover?: boolean\n  /** Forces active state. This is for working with :active; not denoting a selected state */\n  active?: boolean\n  /** Forces selected state. Use this state to denote the selected state */\n  selected?: boolean\n  /** Optional icon slot */\n  Icon?: React.FunctionComponent<IconProps>\n} & (\n    | {\n        variant?: Extract<\n          PillVariant,\n          \"default\" | \"search\" | \"badge\" | \"filter\"\n        >\n      }\n    | {\n        /** `\"artist\"` pills have an optional `src` */\n        variant?: Extract<PillVariant, \"artist\">\n        /**\n         * Optional avatar; 1x or [1x, 2x]\n         * Should target 30x30 @1x, 60x60 @2x\n         */\n        src?: string | [string, string]\n      }\n    | {\n        /** `search` pills have an optional `count` */\n        variant?: Extract<PillVariant, \"search\">\n        /** Optional count */\n        count?: number\n      }\n  )\n\n/**\n * A Pill is a non-CTA button.\n * It may be used for things like active filters, search states,\n * or to denote an artist entity (possibly in the context of a card).\n */\nexport const Pill: React.FC<PillProps> = ({ children, Icon, ...rest }) => {\n  return (\n    <Container {...rest}>\n      {rest.variant === \"artist\" && (\n        <Thumbnail\n          {...(rest.src\n            ? { src: typeof rest.src === \"string\" ? rest.src : rest.src[0] }\n            : {})}\n          {...(rest.src && typeof rest.src !== \"string\" && rest.src[1]\n            ? { srcSet: `${rest.src[0]} 1x, ${rest.src[1]} 2x` }\n            : {})}\n          // Intentionally empty string\n          alt=\"\"\n        />\n      )}\n\n      {Icon && <Icon fill=\"currentColor\" ml={-0.5} mr={0.5} />}\n\n      <Text\n        variant={rest.variant === \"search\" ? [\"xs\", \"sm-display\"] : \"xs\"}\n        overflowEllipsis\n      >\n        <span>{children}</span>\n\n        {rest.variant === \"search\" && \"count\" in rest && (\n          <>\n            {\" \"}\n            <Sup>{rest.count}</Sup>\n          </>\n        )}\n      </Text>\n\n      {((rest.variant === \"filter\" && !rest.disabled) ||\n        (rest.variant === \"artist\" && rest.selected)) && (\n        <CloseIcon fill=\"currentColor\" ml={0.5} width={15} height={15} />\n      )}\n    </Container>\n  )\n}\n\nPill.defaultProps = {\n  variant: \"default\",\n}\n\nconst Container = styled(Clickable)<PillProps>`\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  text-align: center;\n  text-decoration: none;\n  white-space: nowrap;\n  border: 1px solid ${themeGet(\"colors.black15\")};\n  transition: color 0.25s ease, border-color 0.25s ease,\n    background-color 0.25s ease, box-shadow 0.25s ease;\n\n  ${(props) => {\n    const states = PILL_VARIANTS[props.variant ?? \"search\"]\n\n    return css`\n      ${states.default}\n      ${props.focus && states.focus}\n      ${props.hover && states.hover}\n      ${props.selected && states.selected}\n      ${props.active && states.active}\n      ${props.disabled && states.disabled}\n\n      &:hover {\n        ${states.hover}\n      }\n\n      &:focus {\n        outline: 0;\n        ${states.focus}\n        ${props.selected && states.selected}\n      }\n\n      &:active {\n        ${states.active}\n        ${props.selected && states.selected}\n      }\n\n      &:disabled {\n        pointer-events: none;\n        ${states.disabled}\n      }\n    `\n  }}\n`\n\nconst Thumbnail = styled.img`\n  display: block;\n  border-radius: 50%;\n  width: 30px;\n  height: 30px;\n  margin-right: ${themeGet(\"space.1\")};\n  background-color: ${themeGet(\"colors.black30\")};\n`\n"],"file":"Pill.js"}
+{"version":3,"sources":["../../../src/elements/Pill/Pill.tsx"],"names":["PILL_VARIANT_NAMES","Pill","children","Icon","rest","variant","src","srcSet","count","disabled","selected","defaultProps","Container","Clickable","props","states","PILL_VARIANTS","css","default","focus","hover","active","Thumbnail","styled","img"],"mappings":"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","sourcesContent":["import { themeGet } from \"@styled-system/theme-get\"\nimport React from \"react\"\nimport styled from \"styled-components\"\nimport { css } from \"styled-components\"\nimport CloseIcon from \"@artsy/icons/CloseIcon\"\nimport { Clickable, ClickableProps } from \"../Clickable\"\nimport { Sup } from \"../Sup\"\nimport { Text } from \"../Text\"\nimport { PILL_VARIANTS } from \"./tokens\"\nimport { BoxProps } from \"../Box\"\nimport { ResponsiveValue } from \"styled-system\"\n\nexport const PILL_VARIANT_NAMES = [\n  \"default\",\n  \"search\",\n  \"filter\",\n  \"artist\",\n  \"badge\",\n] as const\n\nexport type PillVariant = typeof PILL_VARIANT_NAMES[number]\n\nexport type PillState =\n  | \"default\"\n  | \"hover\"\n  | \"focus\"\n  | \"active\"\n  | \"selected\"\n  | \"disabled\"\n\n/** PillProps */\nexport type PillProps = ClickableProps & {\n  as?: keyof JSX.IntrinsicElements | React.ComponentType\n  /** Forces focus state */\n  focus?: boolean\n  /** Forces hover state */\n  hover?: boolean\n  /** Forces active state. This is for working with :active; not denoting a selected state */\n  active?: boolean\n  /** Forces selected state. Use this state to denote the selected state */\n  selected?: boolean\n  /** Optional icon slot */\n  Icon?: React.FunctionComponent<BoxProps & { fill?: ResponsiveValue<string> }>\n} & (\n    | {\n        variant?: Extract<\n          PillVariant,\n          \"default\" | \"search\" | \"badge\" | \"filter\"\n        >\n      }\n    | {\n        /** `\"artist\"` pills have an optional `src` */\n        variant?: Extract<PillVariant, \"artist\">\n        /**\n         * Optional avatar; 1x or [1x, 2x]\n         * Should target 30x30 @1x, 60x60 @2x\n         */\n        src?: string | [string, string]\n      }\n    | {\n        /** `search` pills have an optional `count` */\n        variant?: Extract<PillVariant, \"search\">\n        /** Optional count */\n        count?: number\n      }\n  )\n\n/**\n * A Pill is a non-CTA button.\n * It may be used for things like active filters, search states,\n * or to denote an artist entity (possibly in the context of a card).\n */\nexport const Pill: React.FC<PillProps> = ({ children, Icon, ...rest }) => {\n  return (\n    <Container {...rest}>\n      {rest.variant === \"artist\" && (\n        <Thumbnail\n          {...(rest.src\n            ? { src: typeof rest.src === \"string\" ? rest.src : rest.src[0] }\n            : {})}\n          {...(rest.src && typeof rest.src !== \"string\" && rest.src[1]\n            ? { srcSet: `${rest.src[0]} 1x, ${rest.src[1]} 2x` }\n            : {})}\n          // Intentionally empty string\n          alt=\"\"\n        />\n      )}\n\n      {Icon && <Icon fill=\"currentColor\" ml={-0.5} mr={0.5} />}\n\n      <Text\n        variant={rest.variant === \"search\" ? [\"xs\", \"sm-display\"] : \"xs\"}\n        overflowEllipsis\n      >\n        <span>{children}</span>\n\n        {rest.variant === \"search\" && \"count\" in rest && (\n          <>\n            {\" \"}\n            <Sup>{rest.count}</Sup>\n          </>\n        )}\n      </Text>\n\n      {((rest.variant === \"filter\" && !rest.disabled) ||\n        (rest.variant === \"artist\" && rest.selected)) && (\n        <CloseIcon fill=\"currentColor\" ml={0.5} width={15} height={15} />\n      )}\n    </Container>\n  )\n}\n\nPill.defaultProps = {\n  variant: \"default\",\n}\n\nconst Container = styled(Clickable)<PillProps>`\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  text-align: center;\n  text-decoration: none;\n  white-space: nowrap;\n  border: 1px solid ${themeGet(\"colors.black15\")};\n  transition: color 0.25s ease, border-color 0.25s ease,\n    background-color 0.25s ease, box-shadow 0.25s ease;\n\n  ${(props) => {\n    const states = PILL_VARIANTS[props.variant ?? \"search\"]\n\n    return css`\n      ${states.default}\n      ${props.focus && states.focus}\n      ${props.hover && states.hover}\n      ${props.selected && states.selected}\n      ${props.active && states.active}\n      ${props.disabled && states.disabled}\n\n      &:hover {\n        ${states.hover}\n      }\n\n      &:focus {\n        outline: 0;\n        ${states.focus}\n        ${props.selected && states.selected}\n      }\n\n      &:active {\n        ${states.active}\n        ${props.selected && states.selected}\n      }\n\n      &:disabled {\n        pointer-events: none;\n        ${states.disabled}\n      }\n    `\n  }}\n`\n\nconst Thumbnail = styled.img`\n  display: block;\n  border-radius: 50%;\n  width: 30px;\n  height: 30px;\n  margin-right: ${themeGet(\"space.1\")};\n  background-color: ${themeGet(\"colors.black30\")};\n`\n"],"file":"Pill.js"}

package/dist/elements/Pill/Pill.story.js

@@ -21,7 +21,7 @@ var _Box = require("../Box");
 
 var _Join = require("../Join");
 
-var _svgs = require("../../svgs");
+var _GraphIcon = _interopRequireDefault(require("@artsy/icons/GraphIcon"));
 
 var _styledComponents = _interopRequireDefault(require("styled-components"));
 
@@ -208,7 +208,7 @@ var PillWithIcon = function PillWithIcon() {
     }]
   }, /*#__PURE__*/_react.default.createElement(_Pill.Pill, {
     variant: "badge",
-    Icon: _svgs.GraphIcon
+    Icon: _GraphIcon.default
   }, "Artist Series"));
 };
 

package/dist/elements/Pill/Pill.story.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/elements/Pill/Pill.story.tsx"],"names":["title","Display","Box","displayName","Variants","PILL_VARIANT_NAMES","map","variant","props","includes","bg","color","LinkExample","LongExampleWithTruncation","SearchWithCount","focus","hover","active","selected","disabled","ArtistWithImage","PillWithIcon","GraphIcon","Demo","setSelected","prevActive"],"mappings":"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","sourcesContent":["import React, { useState } from \"react\"\nimport { States } from \"storybook-states\"\nimport { Flex } from \"../Flex\"\nimport { Spacer } from \"../Spacer\"\nimport { Pill, PillProps, PillVariant, PILL_VARIANT_NAMES } from \"./Pill\"\nimport { Box } from \"../Box\"\nimport { Join } from \"../Join\"\nimport { GraphIcon } from \"../../svgs\"\nimport styled from \"styled-components\"\n\nexport default {\n  title: \"Components/Pill\",\n}\n\nconst Display = styled(Box)``\nDisplay.displayName = \"Pill\"\n\nexport const Variants = () => {\n  return (\n    <States<PillProps>\n      states={PILL_VARIANT_NAMES.map((variant) => ({\n        variant: variant as PillVariant,\n      }))}\n    >\n      {(props) => (\n        <Display\n          p={1}\n          overflowX=\"auto\"\n          {...([\"primaryWhite\", \"secondaryWhite\"].includes(`${props.variant}`)\n            ? { bg: \"black100\", color: \"white100\" }\n            : { bg: \"white100\", color: \"black100\" })}\n        >\n          <Flex>\n            <Join separator={<Spacer x={2} />}>\n              <Pill {...props}>Default</Pill>\n\n              <Pill {...props} focus>\n                Focus\n              </Pill>\n\n              <Pill {...props} hover>\n                Hover\n              </Pill>\n\n              <Pill {...props} active>\n                Active\n              </Pill>\n\n              <Pill {...props} selected>\n                Selected\n              </Pill>\n\n              <Pill {...props} disabled>\n                Disabled\n              </Pill>\n            </Join>\n          </Flex>\n        </Display>\n      )}\n    </States>\n  )\n}\n\nexport const LinkExample = () => {\n  return (\n    <Pill\n      variant=\"artist\"\n      as=\"a\"\n      // TODO: Need a decent way of typing the threaded polymorphic `as` prop\n      // @ts-expect-error  MIGRATE_STRICT_MODE\n      href=\"#example\"\n    >\n      Artist Name\n    </Pill>\n  )\n}\n\nexport const LongExampleWithTruncation = () => {\n  return (\n    <Pill maxWidth={300}>\n      Studio Museum in Harlem Artist-in-Residence (AIR) Program\n    </Pill>\n  )\n}\n\nexport const SearchWithCount = () => {\n  return (\n    <States<PillProps>\n      states={[\n        {},\n        { focus: true },\n        { hover: true },\n        { active: true },\n        { selected: true },\n        { disabled: true },\n      ]}\n    >\n      <Pill variant=\"search\" count={123}>\n        Artist Series\n      </Pill>\n    </States>\n  )\n}\n\nexport const ArtistWithImage = () => {\n  return (\n    <States<PillProps>\n      states={[\n        {},\n        { focus: true },\n        { hover: true },\n        { active: true },\n        { selected: true },\n        { disabled: true },\n      ]}\n    >\n      <Pill\n        variant=\"artist\"\n        src={[\n          \"https://picsum.photos/seed/isa/30/30\",\n          \"https://picsum.photos/seed/isa/60/60\",\n        ]}\n      >\n        Isa Genzken\n      </Pill>\n    </States>\n  )\n}\n\nexport const PillWithIcon = () => {\n  return (\n    <States<PillProps>\n      states={[\n        {},\n        { focus: true },\n        { hover: true },\n        { active: true },\n        { selected: true },\n        { disabled: true },\n        { variant: \"search\" },\n        { variant: \"search\", focus: true },\n        { variant: \"search\", hover: true },\n        { variant: \"search\", active: true },\n        { variant: \"search\", selected: true },\n        { variant: \"search\", disabled: true },\n        { variant: \"filter\" },\n        { variant: \"filter\", focus: true },\n        { variant: \"filter\", hover: true },\n        { variant: \"filter\", active: true },\n        { variant: \"filter\", selected: true },\n        { variant: \"filter\", disabled: true },\n      ]}\n    >\n      <Pill variant=\"badge\" Icon={GraphIcon}>\n        Artist Series\n      </Pill>\n    </States>\n  )\n}\n\nexport const Demo = () => {\n  const [selected, setSelected] = useState(false)\n  return (\n    <Pill\n      selected={selected}\n      onClick={() => setSelected((prevActive) => !prevActive)}\n    >\n      Example\n    </Pill>\n  )\n}\n"],"file":"Pill.story.js"}
+{"version":3,"sources":["../../../src/elements/Pill/Pill.story.tsx"],"names":["title","Display","Box","displayName","Variants","PILL_VARIANT_NAMES","map","variant","props","includes","bg","color","LinkExample","LongExampleWithTruncation","SearchWithCount","focus","hover","active","selected","disabled","ArtistWithImage","PillWithIcon","GraphIcon","Demo","setSelected","prevActive"],"mappings":"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","sourcesContent":["import React, { useState } from \"react\"\nimport { States } from \"storybook-states\"\nimport { Flex } from \"../Flex\"\nimport { Spacer } from \"../Spacer\"\nimport { Pill, PillProps, PillVariant, PILL_VARIANT_NAMES } from \"./Pill\"\nimport { Box } from \"../Box\"\nimport { Join } from \"../Join\"\nimport GraphIcon from \"@artsy/icons/GraphIcon\"\nimport styled from \"styled-components\"\n\nexport default {\n  title: \"Components/Pill\",\n}\n\nconst Display = styled(Box)``\nDisplay.displayName = \"Pill\"\n\nexport const Variants = () => {\n  return (\n    <States<PillProps>\n      states={PILL_VARIANT_NAMES.map((variant) => ({\n        variant: variant as PillVariant,\n      }))}\n    >\n      {(props) => (\n        <Display\n          p={1}\n          overflowX=\"auto\"\n          {...([\"primaryWhite\", \"secondaryWhite\"].includes(`${props.variant}`)\n            ? { bg: \"black100\", color: \"white100\" }\n            : { bg: \"white100\", color: \"black100\" })}\n        >\n          <Flex>\n            <Join separator={<Spacer x={2} />}>\n              <Pill {...props}>Default</Pill>\n\n              <Pill {...props} focus>\n                Focus\n              </Pill>\n\n              <Pill {...props} hover>\n                Hover\n              </Pill>\n\n              <Pill {...props} active>\n                Active\n              </Pill>\n\n              <Pill {...props} selected>\n                Selected\n              </Pill>\n\n              <Pill {...props} disabled>\n                Disabled\n              </Pill>\n            </Join>\n          </Flex>\n        </Display>\n      )}\n    </States>\n  )\n}\n\nexport const LinkExample = () => {\n  return (\n    <Pill\n      variant=\"artist\"\n      as=\"a\"\n      // TODO: Need a decent way of typing the threaded polymorphic `as` prop\n      // @ts-expect-error  MIGRATE_STRICT_MODE\n      href=\"#example\"\n    >\n      Artist Name\n    </Pill>\n  )\n}\n\nexport const LongExampleWithTruncation = () => {\n  return (\n    <Pill maxWidth={300}>\n      Studio Museum in Harlem Artist-in-Residence (AIR) Program\n    </Pill>\n  )\n}\n\nexport const SearchWithCount = () => {\n  return (\n    <States<PillProps>\n      states={[\n        {},\n        { focus: true },\n        { hover: true },\n        { active: true },\n        { selected: true },\n        { disabled: true },\n      ]}\n    >\n      <Pill variant=\"search\" count={123}>\n        Artist Series\n      </Pill>\n    </States>\n  )\n}\n\nexport const ArtistWithImage = () => {\n  return (\n    <States<PillProps>\n      states={[\n        {},\n        { focus: true },\n        { hover: true },\n        { active: true },\n        { selected: true },\n        { disabled: true },\n      ]}\n    >\n      <Pill\n        variant=\"artist\"\n        src={[\n          \"https://picsum.photos/seed/isa/30/30\",\n          \"https://picsum.photos/seed/isa/60/60\",\n        ]}\n      >\n        Isa Genzken\n      </Pill>\n    </States>\n  )\n}\n\nexport const PillWithIcon = () => {\n  return (\n    <States<PillProps>\n      states={[\n        {},\n        { focus: true },\n        { hover: true },\n        { active: true },\n        { selected: true },\n        { disabled: true },\n        { variant: \"search\" },\n        { variant: \"search\", focus: true },\n        { variant: \"search\", hover: true },\n        { variant: \"search\", active: true },\n        { variant: \"search\", selected: true },\n        { variant: \"search\", disabled: true },\n        { variant: \"filter\" },\n        { variant: \"filter\", focus: true },\n        { variant: \"filter\", hover: true },\n        { variant: \"filter\", active: true },\n        { variant: \"filter\", selected: true },\n        { variant: \"filter\", disabled: true },\n      ]}\n    >\n      <Pill variant=\"badge\" Icon={GraphIcon}>\n        Artist Series\n      </Pill>\n    </States>\n  )\n}\n\nexport const Demo = () => {\n  const [selected, setSelected] = useState(false)\n  return (\n    <Pill\n      selected={selected}\n      onClick={() => setSelected((prevActive) => !prevActive)}\n    >\n      Example\n    </Pill>\n  )\n}\n"],"file":"Pill.story.js"}

package/dist/elements/Popover/Popover.js

@@ -15,7 +15,7 @@ var _styledSystem = require("styled-system");
 
 var _helpers = require("../../helpers");
 
-var _svgs = require("../../svgs");
+var _CloseIcon = _interopRequireDefault(require("@artsy/icons/CloseIcon"));
 
 var _utils = require("../../utils");
 
@@ -183,7 +183,7 @@ var Popover = function Popover(_ref) {
     p: 1,
     onClick: handleDismiss,
     "aria-label": "Close"
-  }, /*#__PURE__*/_react.default.createElement(_svgs.CloseIcon, {
+  }, /*#__PURE__*/_react.default.createElement(_CloseIcon.default, {
     fill: "currentColor",
     display: "block"
   })), /*#__PURE__*/_react.default.createElement(Panel, _extends({