@artsy/palette 31.1.0 → 31.3.0

package/dist/elements/AutocompleteInput/AutocompleteInput.js

@@ -19,7 +19,9 @@ var _ = require("..");
 
 var _helpers = require("../../helpers");
 
-var _svgs = require("../../svgs");
+var _SearchIcon = _interopRequireDefault(require("@artsy/icons/SearchIcon"));
+
+var _CloseIcon = _interopRequireDefault(require("@artsy/icons/CloseIcon"));
 
 var _utils = require("../../utils");
 
@@ -370,10 +372,10 @@ var AutocompleteInput = function AutocompleteInput(_ref) {
       display: "flex",
       alignItems: "center",
       "aria-label": "Clear input"
-    }, /*#__PURE__*/_react.default.createElement(_svgs.CloseIcon, {
+    }, /*#__PURE__*/_react.default.createElement(_CloseIcon.default, {
       fill: "black60",
       "aria-hidden": true
-    })) : /*#__PURE__*/_react.default.createElement(_svgs.MagnifyingGlassIcon, {
+    })) : /*#__PURE__*/_react.default.createElement(_SearchIcon.default, {
       fill: "black60",
       "aria-hidden": true
     }),

package/dist/elements/AutocompleteInput/AutocompleteInput.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/elements/AutocompleteInput/AutocompleteInput.tsx"],"names":["reducer","state","action","type","open","query","payload","AutocompleteInput","defaultValue","id","loading","footer","onSubmit","onSelect","onChange","onClear","onClose","onKeyDown","height","renderOption","option","options","rest","inputRef","containerRef","boxProps","inputProps","dispatch","optionsWithRefs","map","ref","resetUI","setTimeout","current","focus","reset","handleSelect","index","text","list","waitForInteractive","onEnter","element","i","event","preventDefault","stopPropagation","set","isDropdownVisible","length","position","offset","active","anchorRef","tooltipRef","width","handleFocus","handleMouseDown","handleMouseEnter","cursor","interactive","handleChange","value","currentTarget","handleClearOrSubmit","handleFocusChange","focused","containsFocusRef","handleInputKeydown","key","blur","handleContainerKeydown","staged","AutocompleteInputDropdown","Box","DROP_SHADOW","AutocompleteInputOptions"],"mappings":";;;;;;;;;AAAA;;AACA;;AAQA;;AACA;;AACA;;AACA;;AACA;;AACA;;AACA;;AACA;;AACA;;AAEA;;AACA;;AACA;;AACA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAoBA,IAAMA,OAAO,GAAG,SAAVA,OAAU,CAACC,KAAD,EAAeC,MAAf,EAAyC;AACvD,UAAQA,MAAM,CAACC,IAAf;AACE,SAAK,MAAL;AACE,6CAAYF,KAAZ;AAAmBG,QAAAA,IAAI,EAAE;AAAzB;;AACF,SAAK,OAAL;AACE,6CAAYH,KAAZ;AAAmBG,QAAAA,IAAI,EAAE;AAAzB;;AACF,SAAK,OAAL;AACE,6CAAYH,KAAZ;AAAmBI,QAAAA,KAAK,EAAE;AAA1B;;AACF,SAAK,QAAL;AACE,6CAAYJ,KAAZ;AAAmBI,QAAAA,KAAK,EAAEH,MAAM,CAACI,OAAP,CAAeD,KAAzC;AAAgDD,QAAAA,IAAI,EAAE;AAAtD;;AACF,SAAK,QAAL;AACE,6CAAYH,KAAZ;AAAmBI,QAAAA,KAAK,EAAEH,MAAM,CAACI,OAAP,CAAeD,KAAzC;AAAgDD,QAAAA,IAAI,EAAE;AAAtD;AAVJ;AAYD,CAbD;;AAmCA;AACO,IAAMG,iBAAiB,GAAG,SAApBA,iBAAoB,OAeA;AAAA;;AAAA,+BAd/BC,YAc+B;AAAA,MAd/BA,YAc+B,kCAdhB,EAcgB;AAAA,MAb/BC,EAa+B,QAb/BA,EAa+B;AAAA,MAZ/BC,OAY+B,QAZ/BA,OAY+B;AAAA,MAX/BC,MAW+B,QAX/BA,MAW+B;AAAA,MAV/BC,QAU+B,QAV/BA,QAU+B;AAAA,MAT/BC,QAS+B,QAT/BA,QAS+B;AAAA,MAR/BC,QAQ+B,QAR/BA,QAQ+B;AAAA,MAP/BC,OAO+B,QAP/BA,OAO+B;AAAA,MAN/BC,OAM+B,QAN/BA,OAM+B;AAAA,MAL/BC,SAK+B,QAL/BA,SAK+B;AAAA,MAJ/BC,MAI+B,QAJ/BA,MAI+B;AAAA,+BAH/BC,YAG+B;AAAA,MAH/BA,YAG+B,kCAHhB,UAACC,MAAD;AAAA,wBAAY,6BAAC,0DAAD,EAAkCA,MAAlC,CAAZ;AAAA,GAGgB;AAAA,MAF/BC,OAE+B,QAF/BA,OAE+B;AAAA,MAD5BC,IAC4B;;AAC/B,MAAMC,QAAQ,GAAG,mBAAgC,IAAhC,CAAjB;AACA,MAAMC,YAAY,GAAG,mBAA8B,IAA9B,CAArB;;AAEA,uBAA+B,wBAAcF,IAAd,CAA/B;AAAA;AAAA,MAAOG,QAAP;AAAA,MAAiBC,UAAjB;;AAEA,oBAA0B,uBAAW1B,OAAX,EAAoB;AAC5CI,IAAAA,IAAI,EAAE,KADsC;AAE5CC,IAAAA,KAAK,EAAEG;AAFqC,GAApB,CAA1B;AAAA;AAAA,MAAOP,KAAP;AAAA,MAAc0B,QAAd;;AAKA,MAAMC,eAAe,GAAG,oBAAQ,YAAM;AACpC,WAAOP,OAAO,CAACQ,GAAR,CAAY,UAACT,MAAD;AAAA,aAAa;AAC9BA,QAAAA,MAAM,EAANA,MAD8B;AAE9BU,QAAAA,GAAG,eAAE;AAFyB,OAAb;AAAA,KAAZ,CAAP;AAID,GALuB,EAKrB,CAACT,OAAD,CALqB,CAAxB;;AAOA,MAAMU,OAAO,GAAG,SAAVA,OAAU,GAAM;AACpBC,IAAAA,UAAU,CAAC,YAAM;AAAA;;AACf,2BAAAT,QAAQ,CAACU,OAAT,wEAAkBC,KAAlB;AACAC,MAAAA,KAAK;AACLR,MAAAA,QAAQ,CAAC;AAAExB,QAAAA,IAAI,EAAE;AAAR,OAAD,CAAR;AACD,KAJS,EAIP,GAJO,CAAV;AAKD,GAND;;AAQA,MAAMiC,YAAY,GAAG,SAAfA,YAAe,CAAChB,MAAD,EAAYiB,KAAZ,EAA8B;AAAA;;AACjDV,IAAAA,QAAQ,CAAC;AAAExB,MAAAA,IAAI,EAAE,QAAR;AAAkBG,MAAAA,OAAO,EAAE;AAAED,QAAAA,KAAK,EAAEe,MAAM,CAACkB;AAAhB;AAA3B,KAAD,CAAR;AACA,0BAAAf,QAAQ,CAACU,OAAT,0EAAkBC,KAAlB;AACArB,IAAAA,QAAQ,SAAR,IAAAA,QAAQ,WAAR,YAAAA,QAAQ,CAAGO,MAAH,EAAWiB,KAAX,CAAR;AACD,GAJD;;AAMA,8BAA8B,0DAA0B;AACtDP,IAAAA,GAAG,EAAEN,YADiD;AAEtDe,IAAAA,IAAI,EAAElB,OAFgD;AAGtDmB,IAAAA,kBAAkB,EAAE,IAHkC;AAItDC,IAAAA,OAAO,EAAE,wBAA0C;AAAA,UAA9BrB,MAA8B,SAAvCsB,OAAuC;AAAA,UAAfC,CAAe,SAAtBN,KAAsB;AAAA,UAAZO,KAAY,SAAZA,KAAY;AACjDA,MAAAA,KAAK,CAACC,cAAN;AACAD,MAAAA,KAAK,CAACE,eAAN;AACAV,MAAAA,YAAY,CAAChB,MAAD,EAASuB,CAAT,CAAZ;AACAZ,MAAAA,OAAO;AACR;AATqD,GAA1B,CAA9B;AAAA,MAAQM,KAAR,yBAAQA,KAAR;AAAA,MAAeF,KAAf,yBAAeA,KAAf;AAAA,MAAsBY,GAAtB,yBAAsBA,GAAtB;;AAYA,MAAMC,iBAAiB,GAAG/C,KAAK,CAACG,IAAN,IAAciB,OAAO,CAAC4B,MAAR,GAAiB,CAAzD,CA5C+B,CA8C/B;AACA;;AACA,wBAAUd,KAAV,EAAiB,CAACd,OAAD,CAAjB,EAhD+B,CAkD/B;;AACA,wBAAU,YAAM;AACd,QAAIpB,KAAK,CAACI,KAAN,KAAgB,EAApB,EAAwB8B,KAAK;AAC9B,GAFD,EAEG,CAACA,KAAD,EAAQlC,KAAK,CAACI,KAAd,CAFH;;AAIA,qBAAkC,wBAAY;AAC5C6C,IAAAA,QAAQ,EAAE,QADkC;AAE5CC,IAAAA,MAAM,EAAE,EAFoC;AAG5CC,IAAAA,MAAM,EAAEJ;AAHoC,GAAZ,CAAlC;AAAA,MAAQK,SAAR,gBAAQA,SAAR;AAAA,MAAmBC,UAAnB,gBAAmBA,UAAnB;;AAMA,oBAAkB,6BAAW;AAAExB,IAAAA,GAAG,EAAEuB;AAAP,GAAX,CAAlB;AAAA,MAAQE,KAAR,eAAQA,KAAR;;AAEA,MAAMC,WAAW,GAAG,SAAdA,WAAc,GAAM;AACxBrB,IAAAA,KAAK;AACLR,IAAAA,QAAQ,CAAC;AAAExB,MAAAA,IAAI,EAAE;AAAR,KAAD,CAAR;AACD,GAHD;;AAKA,MAAMsD,eAAe,GAAG,SAAlBA,eAAkB,CAACrC,MAAD,EAAYuB,CAAZ;AAAA,WAA0B,YAAM;AACtDP,MAAAA,YAAY,CAAChB,MAAD,EAASuB,CAAT,CAAZ;AACAZ,MAAAA,OAAO;AACR,KAHuB;AAAA,GAAxB;;AAKA,MAAM2B,gBAAgB,GAAG,SAAnBA,gBAAmB,CAACf,CAAD;AAAA,WAAe,YAAM;AAC5CI,MAAAA,GAAG,CAAC;AAAEY,QAAAA,MAAM,EAAEhB,CAAV;AAAaiB,QAAAA,WAAW,EAAE;AAA1B,OAAD,CAAH;AACD,KAFwB;AAAA,GAAzB;;AAIA,MAAMC,YAAY,GAAG,SAAfA,YAAe,CAACjB,KAAD,EAAgD;AACnE,QACmBkB,KADnB,GAEIlB,KAFJ,CACEmB,aADF,CACmBD,KADnB;AAIAnC,IAAAA,QAAQ,CAAC;AAAExB,MAAAA,IAAI,EAAE,QAAR;AAAkBG,MAAAA,OAAO,EAAE;AAAED,QAAAA,KAAK,EAAEyD;AAAT;AAA3B,KAAD,CAAR;AACAhD,IAAAA,QAAQ,SAAR,IAAAA,QAAQ,WAAR,YAAAA,QAAQ,CAAG8B,KAAH,CAAR;AACD,GAPD;;AASA,MAAMoB,mBAAmB,GAAG,SAAtBA,mBAAsB,GAAM;AAAA;;AAChC,QAAI/D,KAAK,CAACI,KAAN,KAAgB,EAApB,EAAwB;AACtBO,MAAAA,QAAQ,SAAR,IAAAA,QAAQ,WAAR,YAAAA,QAAQ,CAAGX,KAAK,CAACI,KAAT,CAAR;AACA;AACD;;AAEDsB,IAAAA,QAAQ,CAAC;AAAExB,MAAAA,IAAI,EAAE;AAAR,KAAD,CAAR;AACA,0BAAAoB,QAAQ,CAACU,OAAT,0EAAkBC,KAAlB;AACAnB,IAAAA,OAAO,SAAP,IAAAA,OAAO,WAAP,YAAAA,OAAO;AACR,GATD,CAtF+B,CAiG/B;;;AACA,wBAAU,YAAM;AAAA;;AACd,QAAMK,MAAM,GAAGQ,eAAe,CAACS,KAAD,CAA9B;AACAjB,IAAAA,MAAM,SAAN,IAAAA,MAAM,WAAN,2BAAAA,MAAM,CAAEU,GAAR,mFAAaG,OAAb,4EAAsBC,KAAtB;AACD,GAHD,EAGG,CAACG,KAAD,EAAQT,eAAR,CAHH;AAKA,MAAMqC,iBAAiB,GAAG,wBACxB,UAACC,OAAD,EAAsB;AACpB,QAAIA,OAAO,IAAI,CAAClB,iBAAhB,EAAmC;AAEnCrB,IAAAA,QAAQ,CAAC;AAAExB,MAAAA,IAAI,EAAE;AAAR,KAAD,CAAR;AACAgC,IAAAA,KAAK;AACLnB,IAAAA,OAAO,SAAP,IAAAA,OAAO,WAAP,YAAAA,OAAO;AACR,GAPuB,EAQxB;AACA,GAACA,OAAD,EAAUgC,iBAAV,CATwB,CAA1B,CAvG+B,CAmH/B;AACA;;AACA,0BAAkC,6BAAiB;AACjDlC,IAAAA,QAAQ,EAAEmD;AADuC,GAAjB,CAAlC;AAAA,MAAaE,gBAAb,qBAAQrC,GAAR;;AAIA,MAAMsC,kBAAkB,GAAG,SAArBA,kBAAqB,CAACxB,KAAD,EAAkD;AAAA;;AAC3E,YAAQA,KAAK,CAACyB,GAAd;AACE;AACA,WAAK,OAAL;AACE,YAAIpE,KAAK,CAACI,KAAN,KAAgB,EAAhB,IAAsBgC,KAAK,KAAK,CAAC,CAArC,EAAwC;AACtCzB,UAAAA,QAAQ,SAAR,IAAAA,QAAQ,WAAR,YAAAA,QAAQ,CAAGX,KAAK,CAACI,KAAT,CAAR;AACA0B,UAAAA,OAAO;AACR;;AACD;AAEF;;AACA,WAAK,QAAL;AACEa,QAAAA,KAAK,CAACC,cAAN;AACAD,QAAAA,KAAK,CAACE,eAAN;AAEAnB,QAAAA,QAAQ,CAAC;AAAExB,UAAAA,IAAI,EAAE;AAAR,SAAD,CAAR;AACA,8BAAAoB,QAAQ,CAACU,OAAT,0EAAkBqC,IAAlB;AAEA;;AAEF;AACE;AApBJ;;AAuBArD,IAAAA,SAAS,SAAT,IAAAA,SAAS,WAAT,YAAAA,SAAS,CAAG2B,KAAH,CAAT;AACD,GAzBD,CAzH+B,CAoJ/B;;;AACA,MAAM2B,sBAAsB,GAAG,SAAzBA,sBAAyB,CAC7B3B,KAD6B,EAE1B;AAAA;;AACH,YAAQA,KAAK,CAACyB,GAAd;AACE,WAAK,KAAL;AACA,WAAK,WAAL;AACA,WAAK,SAAL;AACA,WAAK,SAAL;AACA,WAAK,OAAL;AACA,WAAK,MAAL;AACA,WAAK,OAAL;AACA,WAAK,KAAL;AACE;AACA;;AAEF,WAAK,QAAL;AACEzB,QAAAA,KAAK,CAACC,cAAN;AACAD,QAAAA,KAAK,CAACE,eAAN;AAEAnB,QAAAA,QAAQ,CAAC;AAAExB,UAAAA,IAAI,EAAE;AAAR,SAAD,CAAR;AACA,8BAAAoB,QAAQ,CAACU,OAAT,0EAAkBqC,IAAlB;AACAnC,QAAAA,KAAK;AAEL;;AAEF;AACE,8BAAAZ,QAAQ,CAACU,OAAT,0EAAkBC,KAAlB;AAvBJ;AAyBD,GA5BD,CArJ+B,CAmL/B;;;AACA,MAAMsC,MAAM,GAAGnD,OAAO,CAACgB,KAAD,CAAtB;AAEA,sBACE,6BAAC,QAAD;AACE,IAAA,GAAG,EAAE,+BAAYb,YAAZ,EAA0B2C,gBAA1B,CADP;AAEE,IAAA,SAAS,EAAEI;AAFb,KAGM9C,QAHN,gBAKE,6BAAC,0BAAD;AACE,IAAA,GAAG,EAAE,+BAAYF,QAAZ,EAAsB8B,SAAtB,CADP;AAEE,IAAA,IAAI,EAAC,UAFP;AAGE,qBAAeL,iBAHjB;AAIE,yBAAkB;AAJpB,KAKOvC,EAAE,GAAG;AAAEA,IAAAA,EAAE,EAAFA,EAAF;AAAM,kCAAuBA,EAAvB;AAAN,GAAH,GAAwD,EALjE;AAME,IAAA,KAAK,EACHC,OAAO,gBACL,6BAAC,QAAD;AAAK,MAAA,KAAK,EAAE;AAAZ,oBACE,6BAAC,SAAD;AAAS,MAAA,IAAI,EAAC;AAAd,MADF,CADK,GAIHT,KAAK,CAACI,KAAN,gBACF,6BAAC,oBAAD;AACE,MAAA,OAAO,EAAE2D,mBADX;AAEE,MAAA,MAAM,EAAC,MAFT;AAGE,MAAA,OAAO,EAAC,MAHV;AAIE,MAAA,UAAU,EAAC,QAJb;AAKE,oBAAW;AALb,oBAOE,6BAAC,eAAD;AAAW,MAAA,IAAI,EAAC,SAAhB;AAA0B;AAA1B,MAPF,CADE,gBAWF,6BAAC,yBAAD;AAAqB,MAAA,IAAI,EAAC,SAA1B;AAAoC;AAApC,MAtBN;AAyBE,IAAA,KAAK,kBAAEQ,MAAF,aAAEA,MAAF,uBAAEA,MAAM,CAAElC,IAAV,uDAAkBrC,KAAK,CAACI,KAzB/B;AA0BE,IAAA,QAAQ,EAAEwD,YA1BZ;AA2BE,IAAA,OAAO,EAAEL,WA3BX;AA4BE,IAAA,SAAS,EAAEY,kBA5Bb;AA6BE,IAAA,YAAY,EAAC,KA7Bf;AA8BE,IAAA,MAAM,EAAElD;AA9BV,KA+BMQ,UA/BN,EALF,EAuCGsB,iBAAiB,iBAChB,6BAAC,yBAAD;AACE,IAAA,GAAG,EAAEM,UADP;AAEE,IAAA,IAAI,EAAC,SAFP;AAGE,IAAA,KAAK,EAAEC;AAHT,kBAKE,6BAAC,wBAAD,QACG3B,eAAe,CAACC,GAAhB,CAAoB,iBAAkBc,CAAlB,EAAwB;AAAA,QAArBvB,MAAqB,SAArBA,MAAqB;AAAA,QAAbU,GAAa,SAAbA,GAAa;AAC3C,wBACE,6BAAC,gDAAD;AACE,MAAA,GAAG,EAAEa,CADP;AAEE,MAAA,GAAG,EAAEb,GAFP;AAGE,MAAA,IAAI,EAAC,QAHP;AAIE,uBAAea,CAAC,KAAKN,KAJvB;AAKE,uBAAeM,CAAC,GAAG,CALrB;AAME,sBAActB,OAAO,CAAC4B,MANxB;AAOE,MAAA,WAAW,EAAEQ,eAAe,CAACrC,MAAD,EAASuB,CAAT,CAP9B;AAQE,MAAA,YAAY,EAAEe,gBAAgB,CAACf,CAAD,CARhC;AASE,MAAA,QAAQ,EAAEA,CAAC,KAAKN,KATlB;AAUE,MAAA,QAAQ,EAAE,CAAC;AAVb,OAYGlB,YAAY,CAACC,MAAD,EAASuB,CAAT,CAZf,CADF;AAgBD,GAjBA,CADH,CALF,EA0BGhC,MA1BH,CAxCJ,eAsEE,6BAAC,8BAAD,EAAqBF,EAAE,GAAG;AAAEA,IAAAA,EAAE,YAAKA,EAAL;AAAJ,GAAH,GAAoC,EAA3D,+JAtEF,EA4EGuC,iBAAiB,iBAChB,6BAAC,8BAAD;AAAgB,IAAA,IAAI,EAAC,QAArB;AAA8B,mBAAY,MAA1C;AAAiD,iBAAU;AAA3D,KACG3B,OAAO,CAAC4B,MAAR,KAAmB,CAAnB,uCAEM5B,OAAO,CAAC4B,MAFd,2BADH,CA7EJ,CADF;AAsFD,CA3RM;;;AAAM1C,iB;AA6Rb,IAAMkE,yBAAyB,GAAG,+BAAOC,QAAP,CAAH;AAAA;AAAA;AAAA,mCACfC,oBADe,CAA/B;AAKA,IAAMC,wBAAwB,GAAG,+BAAOF,QAAP,CAAH;AAAA;AAAA;AAAA,0EAA9B","sourcesContent":["import composeRefs from \"@seznam/compose-react-refs\"\nimport React, {\n  createRef,\n  useCallback,\n  useEffect,\n  useMemo,\n  useReducer,\n  useRef,\n} from \"react\"\nimport styled from \"styled-components\"\nimport { useKeyboardListNavigation } from \"use-keyboard-list-navigation\"\nimport { Spinner } from \"..\"\nimport { DROP_SHADOW } from \"../../helpers\"\nimport { CloseIcon, MagnifyingGlassIcon } from \"../../svgs\"\nimport { usePosition, useContainsFocus } from \"../../utils\"\nimport { useWidthOf } from \"../../utils/useWidthOf\"\nimport { Box, splitBoxProps } from \"../Box\"\nimport { Clickable } from \"../Clickable\"\nimport { InputProps } from \"../Input\"\nimport { LabeledInput } from \"../LabeledInput\"\nimport { VisuallyHidden } from \"../VisuallyHidden\"\nimport { AutocompleteInputOption } from \"./AutocompleteInputOption\"\nimport { AutocompleteInputOptionLabel } from \"./AutocompleteInputOptionLabel\"\n\n/** Base option type — can be expanded */\nexport interface AutocompleteInputOptionType {\n  text: string\n  value: string\n}\n\ninterface State {\n  open: boolean\n  query: string\n}\n\ntype Action =\n  | { type: \"OPEN\" }\n  | { type: \"CLOSE\" }\n  | { type: \"CLEAR\" }\n  | { type: \"CHANGE\"; payload: { query: string } }\n  | { type: \"SELECT\"; payload: { query: string } }\n\nconst reducer = (state: State, action: Action): State => {\n  switch (action.type) {\n    case \"OPEN\":\n      return { ...state, open: true }\n    case \"CLOSE\":\n      return { ...state, open: false }\n    case \"CLEAR\":\n      return { ...state, query: \"\" }\n    case \"CHANGE\":\n      return { ...state, query: action.payload.query, open: true }\n    case \"SELECT\":\n      return { ...state, query: action.payload.query, open: false }\n  }\n}\n\nexport interface AutocompleteInputProps<T extends AutocompleteInputOptionType>\n  extends Omit<InputProps, \"onSelect\" | \"onSubmit\"> {\n  defaultValue?: string\n  loading?: boolean\n  footer?: React.ReactNode\n  /** on <enter> when no option is selected */\n  onSubmit?(query: string): void\n  /** on <click> or <enter> when an option is selected */\n  onSelect?(option: T, index: number): void\n  /** on <click> of the 'x' (clear) button */\n  onClear?(): void\n  /** Callback that runs when options are hidden */\n  onClose?(): void\n  renderOption?(\n    option: T,\n    i: number\n  ): React.ReactElement<any, string | React.JSXElementConstructor<any>>\n  options: T[]\n}\n\n/** AutocompleteInput */\nexport const AutocompleteInput = <T extends AutocompleteInputOptionType>({\n  defaultValue = \"\",\n  id,\n  loading,\n  footer,\n  onSubmit,\n  onSelect,\n  onChange,\n  onClear,\n  onClose,\n  onKeyDown,\n  height,\n  renderOption = (option) => <AutocompleteInputOptionLabel {...option} />,\n  options,\n  ...rest\n}: AutocompleteInputProps<T>) => {\n  const inputRef = useRef<HTMLInputElement | null>(null)\n  const containerRef = useRef<HTMLDivElement | null>(null)\n\n  const [boxProps, inputProps] = splitBoxProps(rest)\n\n  const [state, dispatch] = useReducer(reducer, {\n    open: false,\n    query: defaultValue,\n  })\n\n  const optionsWithRefs = useMemo(() => {\n    return options.map((option) => ({\n      option,\n      ref: createRef<HTMLButtonElement>(),\n    }))\n  }, [options])\n\n  const resetUI = () => {\n    setTimeout(() => {\n      inputRef.current?.focus()\n      reset()\n      dispatch({ type: \"CLOSE\" })\n    }, 100)\n  }\n\n  const handleSelect = (option: T, index: number) => {\n    dispatch({ type: \"SELECT\", payload: { query: option.text } })\n    inputRef.current?.focus()\n    onSelect?.(option, index)\n  }\n\n  const { index, reset, set } = useKeyboardListNavigation({\n    ref: containerRef,\n    list: options,\n    waitForInteractive: true,\n    onEnter: ({ element: option, index: i, event }) => {\n      event.preventDefault()\n      event.stopPropagation()\n      handleSelect(option, i)\n      resetUI()\n    },\n  })\n\n  const isDropdownVisible = state.open && options.length > 0\n\n  // Reset keyboard navigation when options change\n  // eslint-disable-next-line react-hooks/exhaustive-deps\n  useEffect(reset, [options])\n\n  // Reset keyboard navigation when query is empty\n  useEffect(() => {\n    if (state.query === \"\") reset()\n  }, [reset, state.query])\n\n  const { anchorRef, tooltipRef } = usePosition({\n    position: \"bottom\",\n    offset: 10,\n    active: isDropdownVisible,\n  })\n\n  const { width } = useWidthOf({ ref: anchorRef })\n\n  const handleFocus = () => {\n    reset()\n    dispatch({ type: \"OPEN\" })\n  }\n\n  const handleMouseDown = (option: T, i: number) => () => {\n    handleSelect(option, i)\n    resetUI()\n  }\n\n  const handleMouseEnter = (i: number) => () => {\n    set({ cursor: i, interactive: true })\n  }\n\n  const handleChange = (event: React.ChangeEvent<HTMLInputElement>) => {\n    const {\n      currentTarget: { value },\n    } = event\n\n    dispatch({ type: \"CHANGE\", payload: { query: value } })\n    onChange?.(event)\n  }\n\n  const handleClearOrSubmit = () => {\n    if (state.query === \"\") {\n      onSubmit?.(state.query)\n      return\n    }\n\n    dispatch({ type: \"CLEAR\" })\n    inputRef.current?.focus()\n    onClear?.()\n  }\n\n  // Moves focus to different options when keyboard navigating using up/down\n  useEffect(() => {\n    const option = optionsWithRefs[index]\n    option?.ref?.current?.focus()\n  }, [index, optionsWithRefs])\n\n  const handleFocusChange = useCallback(\n    (focused: boolean) => {\n      if (focused || !isDropdownVisible) return\n\n      dispatch({ type: \"CLOSE\" })\n      reset()\n      onClose?.()\n    },\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n    [onClose, isDropdownVisible]\n  )\n\n  // Handle closing the dropdown when clicking outside of the input\n  // or when focus leaves the input completely\n  const { ref: containsFocusRef } = useContainsFocus({\n    onChange: handleFocusChange,\n  })\n\n  const handleInputKeydown = (event: React.KeyboardEvent<HTMLInputElement>) => {\n    switch (event.key) {\n      // Handle <Enter> when nothing is selected\n      case \"Enter\":\n        if (state.query !== \"\" && index === -1) {\n          onSubmit?.(state.query)\n          resetUI()\n        }\n        return\n\n      // <Esc> to close dropdown\n      case \"Escape\":\n        event.preventDefault()\n        event.stopPropagation()\n\n        dispatch({ type: \"CLOSE\" })\n        inputRef.current?.blur()\n\n        return\n\n      default:\n        break\n    }\n\n    onKeyDown?.(event)\n  }\n\n  // Moves focus back to input when typing\n  const handleContainerKeydown = (\n    event: React.KeyboardEvent<HTMLDivElement>\n  ) => {\n    switch (event.key) {\n      case \"Alt\":\n      case \"ArrowDown\":\n      case \"ArrowUp\":\n      case \"Control\":\n      case \"Enter\":\n      case \"Meta\":\n      case \"Shift\":\n      case \"Tab\":\n        // Ignore\n        return\n\n      case \"Escape\":\n        event.preventDefault()\n        event.stopPropagation()\n\n        dispatch({ type: \"CLOSE\" })\n        inputRef.current?.blur()\n        reset()\n\n        return\n\n      default:\n        inputRef.current?.focus()\n    }\n  }\n\n  // Option that is being hovered or keyed into\n  const staged = options[index]\n\n  return (\n    <Box\n      ref={composeRefs(containerRef, containsFocusRef) as any}\n      onKeyDown={handleContainerKeydown}\n      {...boxProps}\n    >\n      <LabeledInput\n        ref={composeRefs(inputRef, anchorRef) as any}\n        role=\"combobox\"\n        aria-expanded={isDropdownVisible}\n        aria-autocomplete=\"list\"\n        {...(id ? { id, \"aria-describedby\": `${id}__assistiveHint` } : {})}\n        label={\n          loading ? (\n            <Box width={18}>\n              <Spinner size=\"small\" />\n            </Box>\n          ) : state.query ? (\n            <Clickable\n              onClick={handleClearOrSubmit}\n              height=\"100%\"\n              display=\"flex\"\n              alignItems=\"center\"\n              aria-label=\"Clear input\"\n            >\n              <CloseIcon fill=\"black60\" aria-hidden />\n            </Clickable>\n          ) : (\n            <MagnifyingGlassIcon fill=\"black60\" aria-hidden />\n          )\n        }\n        value={staged?.text ?? state.query}\n        onChange={handleChange}\n        onFocus={handleFocus}\n        onKeyDown={handleInputKeydown}\n        autoComplete=\"off\"\n        height={height}\n        {...inputProps}\n      />\n\n      {isDropdownVisible && (\n        <AutocompleteInputDropdown\n          ref={tooltipRef as any}\n          role=\"listbox\"\n          width={width}\n        >\n          <AutocompleteInputOptions>\n            {optionsWithRefs.map(({ option, ref }, i) => {\n              return (\n                <AutocompleteInputOption\n                  key={i}\n                  ref={ref}\n                  role=\"option\"\n                  aria-selected={i === index}\n                  aria-posinset={i + 1}\n                  aria-setsize={options.length}\n                  onMouseDown={handleMouseDown(option, i)}\n                  onMouseEnter={handleMouseEnter(i)}\n                  selected={i === index}\n                  tabIndex={-1}\n                >\n                  {renderOption(option, i)}\n                </AutocompleteInputOption>\n              )\n            })}\n          </AutocompleteInputOptions>\n\n          {footer}\n        </AutocompleteInputDropdown>\n      )}\n\n      <VisuallyHidden {...(id ? { id: `${id}__assistiveHint` } : {})}>\n        When autocomplete results are available use up and down arrows to review\n        and enter to select. Touch device users, explore by touch or with swipe\n        gestures.\n      </VisuallyHidden>\n\n      {isDropdownVisible && (\n        <VisuallyHidden role=\"status\" aria-atomic=\"true\" aria-live=\"polite\">\n          {options.length === 1\n            ? `1 result is available`\n            : `${options.length} results are available`}\n        </VisuallyHidden>\n      )}\n    </Box>\n  )\n}\n\nconst AutocompleteInputDropdown = styled(Box)`\n  box-shadow: ${DROP_SHADOW};\n  z-index: 1;\n`\n\nconst AutocompleteInputOptions = styled(Box)`\n  /* 308 = Roughly, 5.5 default sized options  */\n  max-height: 308px;\n  overflow-y: auto;\n  -webkit-overflow-scrolling: touch;\n`\n"],"file":"AutocompleteInput.js"}
+{"version":3,"sources":["../../../src/elements/AutocompleteInput/AutocompleteInput.tsx"],"names":["reducer","state","action","type","open","query","payload","AutocompleteInput","defaultValue","id","loading","footer","onSubmit","onSelect","onChange","onClear","onClose","onKeyDown","height","renderOption","option","options","rest","inputRef","containerRef","boxProps","inputProps","dispatch","optionsWithRefs","map","ref","resetUI","setTimeout","current","focus","reset","handleSelect","index","text","list","waitForInteractive","onEnter","element","i","event","preventDefault","stopPropagation","set","isDropdownVisible","length","position","offset","active","anchorRef","tooltipRef","width","handleFocus","handleMouseDown","handleMouseEnter","cursor","interactive","handleChange","value","currentTarget","handleClearOrSubmit","handleFocusChange","focused","containsFocusRef","handleInputKeydown","key","blur","handleContainerKeydown","staged","AutocompleteInputDropdown","Box","DROP_SHADOW","AutocompleteInputOptions"],"mappings":"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","sourcesContent":["import composeRefs from \"@seznam/compose-react-refs\"\nimport React, {\n  createRef,\n  useCallback,\n  useEffect,\n  useMemo,\n  useReducer,\n  useRef,\n} from \"react\"\nimport styled from \"styled-components\"\nimport { useKeyboardListNavigation } from \"use-keyboard-list-navigation\"\nimport { Spinner } from \"..\"\nimport { DROP_SHADOW } from \"../../helpers\"\nimport SearchIcon from \"@artsy/icons/SearchIcon\"\nimport CloseIcon from \"@artsy/icons/CloseIcon\"\nimport { usePosition, useContainsFocus } from \"../../utils\"\nimport { useWidthOf } from \"../../utils/useWidthOf\"\nimport { Box, splitBoxProps } from \"../Box\"\nimport { Clickable } from \"../Clickable\"\nimport { InputProps } from \"../Input\"\nimport { LabeledInput } from \"../LabeledInput\"\nimport { VisuallyHidden } from \"../VisuallyHidden\"\nimport { AutocompleteInputOption } from \"./AutocompleteInputOption\"\nimport { AutocompleteInputOptionLabel } from \"./AutocompleteInputOptionLabel\"\n\n/** Base option type — can be expanded */\nexport interface AutocompleteInputOptionType {\n  text: string\n  value: string\n}\n\ninterface State {\n  open: boolean\n  query: string\n}\n\ntype Action =\n  | { type: \"OPEN\" }\n  | { type: \"CLOSE\" }\n  | { type: \"CLEAR\" }\n  | { type: \"CHANGE\"; payload: { query: string } }\n  | { type: \"SELECT\"; payload: { query: string } }\n\nconst reducer = (state: State, action: Action): State => {\n  switch (action.type) {\n    case \"OPEN\":\n      return { ...state, open: true }\n    case \"CLOSE\":\n      return { ...state, open: false }\n    case \"CLEAR\":\n      return { ...state, query: \"\" }\n    case \"CHANGE\":\n      return { ...state, query: action.payload.query, open: true }\n    case \"SELECT\":\n      return { ...state, query: action.payload.query, open: false }\n  }\n}\n\nexport interface AutocompleteInputProps<T extends AutocompleteInputOptionType>\n  extends Omit<InputProps, \"onSelect\" | \"onSubmit\"> {\n  defaultValue?: string\n  loading?: boolean\n  footer?: React.ReactNode\n  /** on <enter> when no option is selected */\n  onSubmit?(query: string): void\n  /** on <click> or <enter> when an option is selected */\n  onSelect?(option: T, index: number): void\n  /** on <click> of the 'x' (clear) button */\n  onClear?(): void\n  /** Callback that runs when options are hidden */\n  onClose?(): void\n  renderOption?(\n    option: T,\n    i: number\n  ): React.ReactElement<any, string | React.JSXElementConstructor<any>>\n  options: T[]\n}\n\n/** AutocompleteInput */\nexport const AutocompleteInput = <T extends AutocompleteInputOptionType>({\n  defaultValue = \"\",\n  id,\n  loading,\n  footer,\n  onSubmit,\n  onSelect,\n  onChange,\n  onClear,\n  onClose,\n  onKeyDown,\n  height,\n  renderOption = (option) => <AutocompleteInputOptionLabel {...option} />,\n  options,\n  ...rest\n}: AutocompleteInputProps<T>) => {\n  const inputRef = useRef<HTMLInputElement | null>(null)\n  const containerRef = useRef<HTMLDivElement | null>(null)\n\n  const [boxProps, inputProps] = splitBoxProps(rest)\n\n  const [state, dispatch] = useReducer(reducer, {\n    open: false,\n    query: defaultValue,\n  })\n\n  const optionsWithRefs = useMemo(() => {\n    return options.map((option) => ({\n      option,\n      ref: createRef<HTMLButtonElement>(),\n    }))\n  }, [options])\n\n  const resetUI = () => {\n    setTimeout(() => {\n      inputRef.current?.focus()\n      reset()\n      dispatch({ type: \"CLOSE\" })\n    }, 100)\n  }\n\n  const handleSelect = (option: T, index: number) => {\n    dispatch({ type: \"SELECT\", payload: { query: option.text } })\n    inputRef.current?.focus()\n    onSelect?.(option, index)\n  }\n\n  const { index, reset, set } = useKeyboardListNavigation({\n    ref: containerRef,\n    list: options,\n    waitForInteractive: true,\n    onEnter: ({ element: option, index: i, event }) => {\n      event.preventDefault()\n      event.stopPropagation()\n      handleSelect(option, i)\n      resetUI()\n    },\n  })\n\n  const isDropdownVisible = state.open && options.length > 0\n\n  // Reset keyboard navigation when options change\n  // eslint-disable-next-line react-hooks/exhaustive-deps\n  useEffect(reset, [options])\n\n  // Reset keyboard navigation when query is empty\n  useEffect(() => {\n    if (state.query === \"\") reset()\n  }, [reset, state.query])\n\n  const { anchorRef, tooltipRef } = usePosition({\n    position: \"bottom\",\n    offset: 10,\n    active: isDropdownVisible,\n  })\n\n  const { width } = useWidthOf({ ref: anchorRef })\n\n  const handleFocus = () => {\n    reset()\n    dispatch({ type: \"OPEN\" })\n  }\n\n  const handleMouseDown = (option: T, i: number) => () => {\n    handleSelect(option, i)\n    resetUI()\n  }\n\n  const handleMouseEnter = (i: number) => () => {\n    set({ cursor: i, interactive: true })\n  }\n\n  const handleChange = (event: React.ChangeEvent<HTMLInputElement>) => {\n    const {\n      currentTarget: { value },\n    } = event\n\n    dispatch({ type: \"CHANGE\", payload: { query: value } })\n    onChange?.(event)\n  }\n\n  const handleClearOrSubmit = () => {\n    if (state.query === \"\") {\n      onSubmit?.(state.query)\n      return\n    }\n\n    dispatch({ type: \"CLEAR\" })\n    inputRef.current?.focus()\n    onClear?.()\n  }\n\n  // Moves focus to different options when keyboard navigating using up/down\n  useEffect(() => {\n    const option = optionsWithRefs[index]\n    option?.ref?.current?.focus()\n  }, [index, optionsWithRefs])\n\n  const handleFocusChange = useCallback(\n    (focused: boolean) => {\n      if (focused || !isDropdownVisible) return\n\n      dispatch({ type: \"CLOSE\" })\n      reset()\n      onClose?.()\n    },\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n    [onClose, isDropdownVisible]\n  )\n\n  // Handle closing the dropdown when clicking outside of the input\n  // or when focus leaves the input completely\n  const { ref: containsFocusRef } = useContainsFocus({\n    onChange: handleFocusChange,\n  })\n\n  const handleInputKeydown = (event: React.KeyboardEvent<HTMLInputElement>) => {\n    switch (event.key) {\n      // Handle <Enter> when nothing is selected\n      case \"Enter\":\n        if (state.query !== \"\" && index === -1) {\n          onSubmit?.(state.query)\n          resetUI()\n        }\n        return\n\n      // <Esc> to close dropdown\n      case \"Escape\":\n        event.preventDefault()\n        event.stopPropagation()\n\n        dispatch({ type: \"CLOSE\" })\n        inputRef.current?.blur()\n\n        return\n\n      default:\n        break\n    }\n\n    onKeyDown?.(event)\n  }\n\n  // Moves focus back to input when typing\n  const handleContainerKeydown = (\n    event: React.KeyboardEvent<HTMLDivElement>\n  ) => {\n    switch (event.key) {\n      case \"Alt\":\n      case \"ArrowDown\":\n      case \"ArrowUp\":\n      case \"Control\":\n      case \"Enter\":\n      case \"Meta\":\n      case \"Shift\":\n      case \"Tab\":\n        // Ignore\n        return\n\n      case \"Escape\":\n        event.preventDefault()\n        event.stopPropagation()\n\n        dispatch({ type: \"CLOSE\" })\n        inputRef.current?.blur()\n        reset()\n\n        return\n\n      default:\n        inputRef.current?.focus()\n    }\n  }\n\n  // Option that is being hovered or keyed into\n  const staged = options[index]\n\n  return (\n    <Box\n      ref={composeRefs(containerRef, containsFocusRef) as any}\n      onKeyDown={handleContainerKeydown}\n      {...boxProps}\n    >\n      <LabeledInput\n        ref={composeRefs(inputRef, anchorRef) as any}\n        role=\"combobox\"\n        aria-expanded={isDropdownVisible}\n        aria-autocomplete=\"list\"\n        {...(id ? { id, \"aria-describedby\": `${id}__assistiveHint` } : {})}\n        label={\n          loading ? (\n            <Box width={18}>\n              <Spinner size=\"small\" />\n            </Box>\n          ) : state.query ? (\n            <Clickable\n              onClick={handleClearOrSubmit}\n              height=\"100%\"\n              display=\"flex\"\n              alignItems=\"center\"\n              aria-label=\"Clear input\"\n            >\n              <CloseIcon fill=\"black60\" aria-hidden />\n            </Clickable>\n          ) : (\n            <SearchIcon fill=\"black60\" aria-hidden />\n          )\n        }\n        value={staged?.text ?? state.query}\n        onChange={handleChange}\n        onFocus={handleFocus}\n        onKeyDown={handleInputKeydown}\n        autoComplete=\"off\"\n        height={height}\n        {...inputProps}\n      />\n\n      {isDropdownVisible && (\n        <AutocompleteInputDropdown\n          ref={tooltipRef as any}\n          role=\"listbox\"\n          width={width}\n        >\n          <AutocompleteInputOptions>\n            {optionsWithRefs.map(({ option, ref }, i) => {\n              return (\n                <AutocompleteInputOption\n                  key={i}\n                  ref={ref}\n                  role=\"option\"\n                  aria-selected={i === index}\n                  aria-posinset={i + 1}\n                  aria-setsize={options.length}\n                  onMouseDown={handleMouseDown(option, i)}\n                  onMouseEnter={handleMouseEnter(i)}\n                  selected={i === index}\n                  tabIndex={-1}\n                >\n                  {renderOption(option, i)}\n                </AutocompleteInputOption>\n              )\n            })}\n          </AutocompleteInputOptions>\n\n          {footer}\n        </AutocompleteInputDropdown>\n      )}\n\n      <VisuallyHidden {...(id ? { id: `${id}__assistiveHint` } : {})}>\n        When autocomplete results are available use up and down arrows to review\n        and enter to select. Touch device users, explore by touch or with swipe\n        gestures.\n      </VisuallyHidden>\n\n      {isDropdownVisible && (\n        <VisuallyHidden role=\"status\" aria-atomic=\"true\" aria-live=\"polite\">\n          {options.length === 1\n            ? `1 result is available`\n            : `${options.length} results are available`}\n        </VisuallyHidden>\n      )}\n    </Box>\n  )\n}\n\nconst AutocompleteInputDropdown = styled(Box)`\n  box-shadow: ${DROP_SHADOW};\n  z-index: 1;\n`\n\nconst AutocompleteInputOptions = styled(Box)`\n  /* 308 = Roughly, 5.5 default sized options  */\n  max-height: 308px;\n  overflow-y: auto;\n  -webkit-overflow-scrolling: touch;\n`\n"],"file":"AutocompleteInput.js"}

package/dist/elements/Banner/Banner.js

@@ -13,7 +13,7 @@ var _styledComponents = _interopRequireDefault(require("styled-components"));
 
 var _styledSystem = require("styled-system");
 
-var _CloseIcon = require("../../svgs/CloseIcon");
+var _CloseIcon = _interopRequireDefault(require("@artsy/icons/CloseIcon"));
 
 var _Clickable = require("../Clickable");
 
@@ -85,7 +85,7 @@ var Banner = function Banner(_ref) {
     alignItems: "center",
     color: "currentColor",
     onClick: handleClick
-  }, /*#__PURE__*/_react.default.createElement(_CloseIcon.CloseIcon, {
+  }, /*#__PURE__*/_react.default.createElement(_CloseIcon.default, {
     style: {
       fill: "currentcolor"
     }

package/dist/elements/Banner/Banner.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/elements/Banner/Banner.tsx"],"names":["Banner","dismissable","children","rest","dismissed","setDismissed","handleClick","fill","defaultProps","variant","BANNER_VARIANTS","defaultLight","backgroundColor","color","defaultDark","success","error","brand","Container","Flex","variants"],"mappings":";;;;;;;;;AAAA;;AACA;;AACA;;AACA;;AACA;;AACA;;AACA;;;;;;;;;;;;;;;;;;;;;;;;;;;;AASA;AACO,IAAMA,MAA6B,GAAG,SAAhCA,MAAgC,OAIvC;AAAA,8BAHJC,WAGI;AAAA,MAHJA,WAGI,iCAHU,KAGV;AAAA,MAFJC,QAEI,QAFJA,QAEI;AAAA,MADDC,IACC;;AACJ,kBAAkC,qBAAS,KAAT,CAAlC;AAAA;AAAA,MAAOC,SAAP;AAAA,MAAkBC,YAAlB;;AAEA,MAAMC,WAAW,GAAG,SAAdA,WAAc,GAAM;AACxBD,IAAAA,YAAY,CAAC,IAAD,CAAZ;AACD,GAFD;;AAIA,MAAID,SAAJ,EAAe,OAAO,IAAP;AAEf,sBACE,6BAAC,SAAD;AAAW,IAAA,QAAQ,EAAC,UAApB;AAA+B,IAAA,EAAE,EAAE,CAAnC;AAAsC,IAAA,EAAE,EAAE;AAA1C,KAAiDD,IAAjD,gBACE,6BAAC,UAAD;AACE,IAAA,OAAO,EAAC,IADV;AAEE,IAAA,OAAO,EAAC,MAFV;AAGE,IAAA,UAAU,EAAC,QAHb;AAIE,IAAA,cAAc,EAAC,QAJjB;AAKE,IAAA,SAAS,EAAC,QALZ;AAME,IAAA,IAAI,EAAE;AANR,KAQGD,QARH,CADF,EAYGD,WAAW,iBACV,6BAAC,oBAAD;AACE,IAAA,QAAQ,EAAC,UADX;AAEE,IAAA,GAAG,EAAE,CAFP;AAGE,IAAA,KAAK,EAAE,CAHT;AAIE,IAAA,MAAM,EAAE,CAJV;AAKE,IAAA,CAAC,EAAE,CALL;AAME,IAAA,OAAO,EAAC,MANV;AAOE,IAAA,UAAU,EAAC,QAPb;AAQE,IAAA,KAAK,EAAC,cARR;AASE,IAAA,OAAO,EAAEK;AATX,kBAWE,6BAAC,oBAAD;AAAW,IAAA,KAAK,EAAE;AAAEC,MAAAA,IAAI,EAAE;AAAR;AAAlB,IAXF,CAbJ,CADF;AA8BD,CA3CM;;;AAAMP,M;AA6CbA,MAAM,CAACQ,YAAP,GAAsB;AACpBC,EAAAA,OAAO,EAAE;AADW,CAAtB;AAIO,IAAMC,eAAe,GAAG;AAC7BC,EAAAA,YAAY,EAAE;AACZC,IAAAA,eAAe,EAAE,SADL;AAEZC,IAAAA,KAAK,EAAE;AAFK,GADe;AAK7BC,EAAAA,WAAW,EAAE;AACXF,IAAAA,eAAe,EAAE,UADN;AAEXC,IAAAA,KAAK,EAAE;AAFI,GALgB;AAS7BE,EAAAA,OAAO,EAAE;AACPH,IAAAA,eAAe,EAAE,UADV;AAEPC,IAAAA,KAAK,EAAE;AAFA,GAToB;AAa7BG,EAAAA,KAAK,EAAE;AACLJ,IAAAA,eAAe,EAAE,QADZ;AAELC,IAAAA,KAAK,EAAE;AAFF,GAbsB;AAiB7BI,EAAAA,KAAK,EAAE;AACLL,IAAAA,eAAe,EAAE,OADZ;AAELC,IAAAA,KAAK,EAAE;AAFF;AAjBsB,CAAxB;;AAuBP,IAAMK,SAAS,GAAG,+BAAOC,UAAP,CAAH;AAAA;AAAA;AAAA,aACX,2BAAQ;AAAEC,EAAAA,QAAQ,EAAEV;AAAZ,CAAR,CADW,CAAf","sourcesContent":["import React, { useState } from \"react\"\nimport styled from \"styled-components\"\nimport { variant } from \"styled-system\"\nimport { CloseIcon } from \"../../svgs/CloseIcon\"\nimport { Clickable } from \"../Clickable\"\nimport { Flex, FlexProps } from \"../Flex\"\nimport { Text } from \"../Text\"\n\nexport type BannerVariant = keyof typeof BANNER_VARIANTS\n\nexport interface BannerProps extends FlexProps {\n  variant?: BannerVariant\n  dismissable?: boolean\n}\n\n/** A banner */\nexport const Banner: React.FC<BannerProps> = ({\n  dismissable = false,\n  children,\n  ...rest\n}) => {\n  const [dismissed, setDismissed] = useState(false)\n\n  const handleClick = () => {\n    setDismissed(true)\n  }\n\n  if (dismissed) return null\n\n  return (\n    <Container position=\"relative\" py={1} px={4} {...rest}>\n      <Text\n        variant=\"xs\"\n        display=\"flex\"\n        alignItems=\"center\"\n        justifyContent=\"center\"\n        textAlign=\"center\"\n        flex={1}\n      >\n        {children}\n      </Text>\n\n      {dismissable && (\n        <Clickable\n          position=\"absolute\"\n          top={0}\n          right={0}\n          bottom={0}\n          p={1}\n          display=\"flex\"\n          alignItems=\"center\"\n          color=\"currentColor\"\n          onClick={handleClick}\n        >\n          <CloseIcon style={{ fill: \"currentcolor\" }} />\n        </Clickable>\n      )}\n    </Container>\n  )\n}\n\nBanner.defaultProps = {\n  variant: \"defaultLight\",\n}\n\nexport const BANNER_VARIANTS = {\n  defaultLight: {\n    backgroundColor: \"black10\",\n    color: \"black100\",\n  },\n  defaultDark: {\n    backgroundColor: \"black100\",\n    color: \"white100\",\n  },\n  success: {\n    backgroundColor: \"green100\",\n    color: \"white100\",\n  },\n  error: {\n    backgroundColor: \"red100\",\n    color: \"white100\",\n  },\n  brand: {\n    backgroundColor: \"brand\",\n    color: \"white100\",\n  },\n}\n\nconst Container = styled(Flex)`\n  ${variant({ variants: BANNER_VARIANTS })}\n`\n"],"file":"Banner.js"}
+{"version":3,"sources":["../../../src/elements/Banner/Banner.tsx"],"names":["Banner","dismissable","children","rest","dismissed","setDismissed","handleClick","fill","defaultProps","variant","BANNER_VARIANTS","defaultLight","backgroundColor","color","defaultDark","success","error","brand","Container","Flex","variants"],"mappings":";;;;;;;;;AAAA;;AACA;;AACA;;AACA;;AACA;;AACA;;AACA;;;;;;;;;;;;;;;;;;;;;;;;;;;;AASA;AACO,IAAMA,MAA6B,GAAG,SAAhCA,MAAgC,OAIvC;AAAA,8BAHJC,WAGI;AAAA,MAHJA,WAGI,iCAHU,KAGV;AAAA,MAFJC,QAEI,QAFJA,QAEI;AAAA,MADDC,IACC;;AACJ,kBAAkC,qBAAS,KAAT,CAAlC;AAAA;AAAA,MAAOC,SAAP;AAAA,MAAkBC,YAAlB;;AAEA,MAAMC,WAAW,GAAG,SAAdA,WAAc,GAAM;AACxBD,IAAAA,YAAY,CAAC,IAAD,CAAZ;AACD,GAFD;;AAIA,MAAID,SAAJ,EAAe,OAAO,IAAP;AAEf,sBACE,6BAAC,SAAD;AAAW,IAAA,QAAQ,EAAC,UAApB;AAA+B,IAAA,EAAE,EAAE,CAAnC;AAAsC,IAAA,EAAE,EAAE;AAA1C,KAAiDD,IAAjD,gBACE,6BAAC,UAAD;AACE,IAAA,OAAO,EAAC,IADV;AAEE,IAAA,OAAO,EAAC,MAFV;AAGE,IAAA,UAAU,EAAC,QAHb;AAIE,IAAA,cAAc,EAAC,QAJjB;AAKE,IAAA,SAAS,EAAC,QALZ;AAME,IAAA,IAAI,EAAE;AANR,KAQGD,QARH,CADF,EAYGD,WAAW,iBACV,6BAAC,oBAAD;AACE,IAAA,QAAQ,EAAC,UADX;AAEE,IAAA,GAAG,EAAE,CAFP;AAGE,IAAA,KAAK,EAAE,CAHT;AAIE,IAAA,MAAM,EAAE,CAJV;AAKE,IAAA,CAAC,EAAE,CALL;AAME,IAAA,OAAO,EAAC,MANV;AAOE,IAAA,UAAU,EAAC,QAPb;AAQE,IAAA,KAAK,EAAC,cARR;AASE,IAAA,OAAO,EAAEK;AATX,kBAWE,6BAAC,kBAAD;AAAW,IAAA,KAAK,EAAE;AAAEC,MAAAA,IAAI,EAAE;AAAR;AAAlB,IAXF,CAbJ,CADF;AA8BD,CA3CM;;;AAAMP,M;AA6CbA,MAAM,CAACQ,YAAP,GAAsB;AACpBC,EAAAA,OAAO,EAAE;AADW,CAAtB;AAIO,IAAMC,eAAe,GAAG;AAC7BC,EAAAA,YAAY,EAAE;AACZC,IAAAA,eAAe,EAAE,SADL;AAEZC,IAAAA,KAAK,EAAE;AAFK,GADe;AAK7BC,EAAAA,WAAW,EAAE;AACXF,IAAAA,eAAe,EAAE,UADN;AAEXC,IAAAA,KAAK,EAAE;AAFI,GALgB;AAS7BE,EAAAA,OAAO,EAAE;AACPH,IAAAA,eAAe,EAAE,UADV;AAEPC,IAAAA,KAAK,EAAE;AAFA,GAToB;AAa7BG,EAAAA,KAAK,EAAE;AACLJ,IAAAA,eAAe,EAAE,QADZ;AAELC,IAAAA,KAAK,EAAE;AAFF,GAbsB;AAiB7BI,EAAAA,KAAK,EAAE;AACLL,IAAAA,eAAe,EAAE,OADZ;AAELC,IAAAA,KAAK,EAAE;AAFF;AAjBsB,CAAxB;;AAuBP,IAAMK,SAAS,GAAG,+BAAOC,UAAP,CAAH;AAAA;AAAA;AAAA,aACX,2BAAQ;AAAEC,EAAAA,QAAQ,EAAEV;AAAZ,CAAR,CADW,CAAf","sourcesContent":["import React, { useState } from \"react\"\nimport styled from \"styled-components\"\nimport { variant } from \"styled-system\"\nimport CloseIcon from \"@artsy/icons/CloseIcon\"\nimport { Clickable } from \"../Clickable\"\nimport { Flex, FlexProps } from \"../Flex\"\nimport { Text } from \"../Text\"\n\nexport type BannerVariant = keyof typeof BANNER_VARIANTS\n\nexport interface BannerProps extends FlexProps {\n  variant?: BannerVariant\n  dismissable?: boolean\n}\n\n/** A banner */\nexport const Banner: React.FC<BannerProps> = ({\n  dismissable = false,\n  children,\n  ...rest\n}) => {\n  const [dismissed, setDismissed] = useState(false)\n\n  const handleClick = () => {\n    setDismissed(true)\n  }\n\n  if (dismissed) return null\n\n  return (\n    <Container position=\"relative\" py={1} px={4} {...rest}>\n      <Text\n        variant=\"xs\"\n        display=\"flex\"\n        alignItems=\"center\"\n        justifyContent=\"center\"\n        textAlign=\"center\"\n        flex={1}\n      >\n        {children}\n      </Text>\n\n      {dismissable && (\n        <Clickable\n          position=\"absolute\"\n          top={0}\n          right={0}\n          bottom={0}\n          p={1}\n          display=\"flex\"\n          alignItems=\"center\"\n          color=\"currentColor\"\n          onClick={handleClick}\n        >\n          <CloseIcon style={{ fill: \"currentcolor\" }} />\n        </Clickable>\n      )}\n    </Container>\n  )\n}\n\nBanner.defaultProps = {\n  variant: \"defaultLight\",\n}\n\nexport const BANNER_VARIANTS = {\n  defaultLight: {\n    backgroundColor: \"black10\",\n    color: \"black100\",\n  },\n  defaultDark: {\n    backgroundColor: \"black100\",\n    color: \"white100\",\n  },\n  success: {\n    backgroundColor: \"green100\",\n    color: \"white100\",\n  },\n  error: {\n    backgroundColor: \"red100\",\n    color: \"white100\",\n  },\n  brand: {\n    backgroundColor: \"brand\",\n    color: \"white100\",\n  },\n}\n\nconst Container = styled(Flex)`\n  ${variant({ variants: BANNER_VARIANTS })}\n`\n"],"file":"Banner.js"}

package/dist/elements/BorderedRadio/BorderedRadio.d.ts

@@ -360,8 +360,8 @@ export declare const BorderedRadio: import("styled-components").StyledComponentC
     onTransitionEndCapture?: import("react").TransitionEventHandler<HTMLDivElement> | undefined;
     textAlign?: import("styled-system").ResponsiveValue<import("csstype").TextAlignProperty, Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>> | undefined;
     disabled?: boolean | undefined;
-    value?: string | undefined;
     name?: string | undefined;
+    value?: string | undefined;
     error?: boolean | undefined;
     focus?: boolean | undefined;
     hover?: boolean | undefined;

package/dist/elements/Button/Button.d.ts

@@ -1,6 +1,5 @@
 import React from "react";
 import { ResponsiveValue } from "styled-system";
-import { IconProps } from "../../svgs";
 import { BoxProps } from "../Box";
 import { ButtonSize, ButtonVariant } from "./types";
 export interface ButtonProps extends BoxProps, React.ButtonHTMLAttributes<HTMLButtonElement> {
@@ -28,7 +27,9 @@ export interface ButtonProps extends BoxProps, React.ButtonHTMLAttributes<HTMLBu
     /** Forces success state */
     success?: boolean;
     /** Optional icon slot */
-    Icon?: React.FunctionComponent<IconProps>;
+    Icon?: React.FunctionComponent<BoxProps & {
+        fill?: ResponsiveValue<string>;
+    }>;
 }
 export declare const Button: React.ForwardRefExoticComponent<ButtonProps & {
     ref?: React.Ref<HTMLElement>;

package/dist/elements/Button/Button.js

@@ -15,7 +15,7 @@ var _styledComponents = _interopRequireWildcard(require("styled-components"));
 
 var _styledSystem = require("styled-system");
 
-var _svgs = require("../../svgs");
+var _CheckmarkIcon = _interopRequireDefault(require("@artsy/icons/CheckmarkIcon"));
 
 var _themes = require("../../themes");
 
@@ -95,7 +95,7 @@ var Button = /*#__PURE__*/_react.default.forwardRef(function (_ref, forwardedRef
     fill: "currentColor",
     mr: 0.5,
     "aria-hidden": "true"
-  }), success && /*#__PURE__*/_react.default.createElement(_svgs.CheckIcon, {
+  }), success && /*#__PURE__*/_react.default.createElement(_CheckmarkIcon.default, {
     fill: "currentColor",
     mr: 0.5,
     "aria-hidden": "true"

package/dist/elements/Button/Button.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/elements/Button/Button.tsx"],"names":["Button","React","forwardRef","forwardedRef","children","loading","success","size","onClick","alignItems","justifyContent","Icon","rest","ref","handleClick","event","current","blur","getTextVariant","displayName","defaultProps","variant","buttonMixin","css","Container","styled","button","prop","variants","BUTTON_SIZES","props","hover","BUTTON_VARIANTS","active","focus","disabled","default","THEME_V3","mediaQueries","boxMixin","BUTTON_TEXT_SIZES","Array","isArray","map","s","large"],"mappings":"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","sourcesContent":["import composeRefs from \"@seznam/compose-react-refs\"\nimport React, { useEffect, useRef } from \"react\"\nimport styled, { css } from \"styled-components\"\nimport { ResponsiveValue, variant } from \"styled-system\"\nimport { CheckIcon, IconProps } from \"../../svgs\"\nimport { TextVariant } from \"@artsy/palette-tokens/dist/typography/v3\"\nimport { THEME_V3 } from \"../../themes\"\nimport { boxMixin, BoxProps } from \"../Box\"\nimport { Spinner } from \"../Spinner\"\nimport { Text, TextProps } from \"../Text\"\nimport { BUTTON_SIZES, BUTTON_TEXT_SIZES, BUTTON_VARIANTS } from \"./tokens\"\nimport { ButtonSize, ButtonVariant } from \"./types\"\n\nexport interface ButtonProps\n  extends BoxProps,\n    React.ButtonHTMLAttributes<HTMLButtonElement> {\n  /**\n   * @description\n   * The theme of the button. It's possible to pass an array that\n   * behaves accordingly to the media breakpoints [\"sm\", \"md\", \"lg\", \"xl\"]\n   * @example\n   * \"primaryBlack\"\n   * \"primaryWhite\"\n   * [\"primaryGray\", \"secondaryBlack\"]\n   * @see {@link ButtonVariant}\n   */\n  variant?: ResponsiveValue<ButtonVariant>\n  /** Size of the button */\n  size?: ResponsiveValue<ButtonSize>\n  /** Displays a loader in the button */\n  loading?: boolean\n  /** Forces hover state */\n  hover?: boolean\n  /** Forces focus state */\n  focus?: boolean\n  /** Forces active state */\n  active?: boolean\n  /** Forces success state */\n  success?: boolean\n  /** Optional icon slot */\n  Icon?: React.FunctionComponent<IconProps>\n}\n\nexport const Button: React.ForwardRefExoticComponent<\n  ButtonProps & { ref?: React.Ref<HTMLElement> }\n> = React.forwardRef(\n  (\n    {\n      children,\n      loading,\n      success,\n      size = \"large\",\n      onClick,\n      alignItems = \"center\",\n      justifyContent = \"center\",\n      Icon,\n      ...rest\n    },\n    forwardedRef\n  ) => {\n    const ref = useRef<HTMLButtonElement | null>(null)\n\n    const handleClick = (\n      event: React.MouseEvent<HTMLButtonElement, MouseEvent>\n    ) => {\n      if (!loading && onClick) {\n        onClick(event)\n      }\n    }\n\n    useEffect(() => {\n      if (loading && ref.current !== null) {\n        ref.current?.blur()\n      }\n    }, [loading])\n\n    return (\n      <Container\n        ref={composeRefs(ref, forwardedRef) as any}\n        onClick={handleClick}\n        size={size}\n        loading={loading}\n        success={success}\n        tabIndex={loading ? -1 : 0}\n        display=\"inline-flex\"\n        alignItems={alignItems}\n        justifyContent={justifyContent}\n        {...rest}\n      >\n        {loading && <Spinner size={size} color=\"currentColor\" />}\n\n        <Text\n          lineHeight={1}\n          variant={getTextVariant(size)}\n          opacity={loading ? 0 : 1}\n          display=\"flex\"\n          alignItems={alignItems}\n          justifyContent={justifyContent}\n          width=\"100%\"\n        >\n          {!success && Icon && (\n            <Icon fill=\"currentColor\" mr={0.5} aria-hidden=\"true\" />\n          )}\n\n          {success && (\n            <CheckIcon fill=\"currentColor\" mr={0.5} aria-hidden=\"true\" />\n          )}\n\n          {children}\n        </Text>\n      </Container>\n    )\n  }\n)\n\nButton.displayName = \"Button\"\n\nButton.defaultProps = {\n  size: \"large\",\n  variant: \"primaryBlack\",\n}\n\ntype ContainerProps = Pick<\n  ButtonProps,\n  \"active\" | \"disabled\" | \"focus\" | \"hover\" | \"loading\" | \"size\" | \"success\"\n>\n\nexport const buttonMixin = css`\n  cursor: pointer;\n  position: relative;\n  white-space: nowrap;\n  font-weight: normal;\n  text-align: center;\n  border: 1px solid;\n  text-decoration: none;\n  transition: color 0.25s ease, border-color 0.25s ease,\n    background-color 0.25s ease, box-shadow 0.25s ease;\n`\n\nconst Container = styled.button<ContainerProps & ButtonProps>`\n  ${buttonMixin};\n\n  /* Handle sizing */\n  ${variant({ prop: \"size\", variants: BUTTON_SIZES })}\n\n  ${(props) => {\n    // Handle props driven states\n    if (props.hover) {\n      return variant({ variants: BUTTON_VARIANTS.hover })\n    }\n\n    if (props.active) {\n      return variant({ variants: BUTTON_VARIANTS.active })\n    }\n\n    if (props.success) {\n      return variant({ variants: BUTTON_VARIANTS.success })\n    }\n\n    if (props.focus) {\n      return css`\n        outline: 0;\n        ${variant({ variants: BUTTON_VARIANTS.focus })}\n      `\n    }\n\n    if (props.loading) {\n      return css`\n        cursor: auto;\n        transition: none;\n        pointer-events: none;\n        ${variant({ variants: BUTTON_VARIANTS.loading })}\n      `\n    }\n\n    if (props.disabled) {\n      return css`\n        pointer-events: none;\n        ${variant({ variants: BUTTON_VARIANTS.disabled })}\n      `\n    }\n\n    return variant({ variants: BUTTON_VARIANTS.default })\n  }}\n\n  ${() => {\n    // Handle pseudo classes\n    return css`\n      @media ${THEME_V3.mediaQueries.hover} {\n        &:hover {\n          ${variant({ variants: BUTTON_VARIANTS.hover })}\n        }\n      }\n\n      &:focus {\n        outline: 0;\n        ${variant({ variants: BUTTON_VARIANTS.focus })}\n      }\n\n      &:active {\n        ${variant({ variants: BUTTON_VARIANTS.active })}\n      }\n\n      &:disabled {\n        pointer-events: none;\n        ${variant({ variants: BUTTON_VARIANTS.disabled })}\n      }\n    `\n  }};\n\n  ${boxMixin};\n`\n\nconst getTextVariant = (\n  size: ResponsiveValue<ButtonSize>\n): TextProps[\"variant\"] => {\n  if (typeof size === \"string\") {\n    return BUTTON_TEXT_SIZES[size]\n  }\n\n  if (Array.isArray(size)) {\n    return size.map((s) => BUTTON_TEXT_SIZES[s!] as TextVariant)\n  }\n\n  return BUTTON_TEXT_SIZES.large\n}\n"],"file":"Button.js"}
+{"version":3,"sources":["../../../src/elements/Button/Button.tsx"],"names":["Button","React","forwardRef","forwardedRef","children","loading","success","size","onClick","alignItems","justifyContent","Icon","rest","ref","handleClick","event","current","blur","getTextVariant","displayName","defaultProps","variant","buttonMixin","css","Container","styled","button","prop","variants","BUTTON_SIZES","props","hover","BUTTON_VARIANTS","active","focus","disabled","default","THEME_V3","mediaQueries","boxMixin","BUTTON_TEXT_SIZES","Array","isArray","map","s","large"],"mappings":"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","sourcesContent":["import composeRefs from \"@seznam/compose-react-refs\"\nimport React, { useEffect, useRef } from \"react\"\nimport styled, { css } from \"styled-components\"\nimport { ResponsiveValue, variant } from \"styled-system\"\nimport CheckmarkIcon from \"@artsy/icons/CheckmarkIcon\"\nimport { TextVariant } from \"@artsy/palette-tokens/dist/typography/v3\"\nimport { THEME_V3 } from \"../../themes\"\nimport { boxMixin, BoxProps } from \"../Box\"\nimport { Spinner } from \"../Spinner\"\nimport { Text, TextProps } from \"../Text\"\nimport { BUTTON_SIZES, BUTTON_TEXT_SIZES, BUTTON_VARIANTS } from \"./tokens\"\nimport { ButtonSize, ButtonVariant } from \"./types\"\n\nexport interface ButtonProps\n  extends BoxProps,\n    React.ButtonHTMLAttributes<HTMLButtonElement> {\n  /**\n   * @description\n   * The theme of the button. It's possible to pass an array that\n   * behaves accordingly to the media breakpoints [\"sm\", \"md\", \"lg\", \"xl\"]\n   * @example\n   * \"primaryBlack\"\n   * \"primaryWhite\"\n   * [\"primaryGray\", \"secondaryBlack\"]\n   * @see {@link ButtonVariant}\n   */\n  variant?: ResponsiveValue<ButtonVariant>\n  /** Size of the button */\n  size?: ResponsiveValue<ButtonSize>\n  /** Displays a loader in the button */\n  loading?: boolean\n  /** Forces hover state */\n  hover?: boolean\n  /** Forces focus state */\n  focus?: boolean\n  /** Forces active state */\n  active?: boolean\n  /** Forces success state */\n  success?: boolean\n  /** Optional icon slot */\n  Icon?: React.FunctionComponent<BoxProps & { fill?: ResponsiveValue<string> }>\n}\n\nexport const Button: React.ForwardRefExoticComponent<\n  ButtonProps & { ref?: React.Ref<HTMLElement> }\n> = React.forwardRef(\n  (\n    {\n      children,\n      loading,\n      success,\n      size = \"large\",\n      onClick,\n      alignItems = \"center\",\n      justifyContent = \"center\",\n      Icon,\n      ...rest\n    },\n    forwardedRef\n  ) => {\n    const ref = useRef<HTMLButtonElement | null>(null)\n\n    const handleClick = (\n      event: React.MouseEvent<HTMLButtonElement, MouseEvent>\n    ) => {\n      if (!loading && onClick) {\n        onClick(event)\n      }\n    }\n\n    useEffect(() => {\n      if (loading && ref.current !== null) {\n        ref.current?.blur()\n      }\n    }, [loading])\n\n    return (\n      <Container\n        ref={composeRefs(ref, forwardedRef) as any}\n        onClick={handleClick}\n        size={size}\n        loading={loading}\n        success={success}\n        tabIndex={loading ? -1 : 0}\n        display=\"inline-flex\"\n        alignItems={alignItems}\n        justifyContent={justifyContent}\n        {...rest}\n      >\n        {loading && <Spinner size={size} color=\"currentColor\" />}\n\n        <Text\n          lineHeight={1}\n          variant={getTextVariant(size)}\n          opacity={loading ? 0 : 1}\n          display=\"flex\"\n          alignItems={alignItems}\n          justifyContent={justifyContent}\n          width=\"100%\"\n        >\n          {!success && Icon && (\n            <Icon fill=\"currentColor\" mr={0.5} aria-hidden=\"true\" />\n          )}\n\n          {success && (\n            <CheckmarkIcon fill=\"currentColor\" mr={0.5} aria-hidden=\"true\" />\n          )}\n\n          {children}\n        </Text>\n      </Container>\n    )\n  }\n)\n\nButton.displayName = \"Button\"\n\nButton.defaultProps = {\n  size: \"large\",\n  variant: \"primaryBlack\",\n}\n\ntype ContainerProps = Pick<\n  ButtonProps,\n  \"active\" | \"disabled\" | \"focus\" | \"hover\" | \"loading\" | \"size\" | \"success\"\n>\n\nexport const buttonMixin = css`\n  cursor: pointer;\n  position: relative;\n  white-space: nowrap;\n  font-weight: normal;\n  text-align: center;\n  border: 1px solid;\n  text-decoration: none;\n  transition: color 0.25s ease, border-color 0.25s ease,\n    background-color 0.25s ease, box-shadow 0.25s ease;\n`\n\nconst Container = styled.button<ContainerProps & ButtonProps>`\n  ${buttonMixin};\n\n  /* Handle sizing */\n  ${variant({ prop: \"size\", variants: BUTTON_SIZES })}\n\n  ${(props) => {\n    // Handle props driven states\n    if (props.hover) {\n      return variant({ variants: BUTTON_VARIANTS.hover })\n    }\n\n    if (props.active) {\n      return variant({ variants: BUTTON_VARIANTS.active })\n    }\n\n    if (props.success) {\n      return variant({ variants: BUTTON_VARIANTS.success })\n    }\n\n    if (props.focus) {\n      return css`\n        outline: 0;\n        ${variant({ variants: BUTTON_VARIANTS.focus })}\n      `\n    }\n\n    if (props.loading) {\n      return css`\n        cursor: auto;\n        transition: none;\n        pointer-events: none;\n        ${variant({ variants: BUTTON_VARIANTS.loading })}\n      `\n    }\n\n    if (props.disabled) {\n      return css`\n        pointer-events: none;\n        ${variant({ variants: BUTTON_VARIANTS.disabled })}\n      `\n    }\n\n    return variant({ variants: BUTTON_VARIANTS.default })\n  }}\n\n  ${() => {\n    // Handle pseudo classes\n    return css`\n      @media ${THEME_V3.mediaQueries.hover} {\n        &:hover {\n          ${variant({ variants: BUTTON_VARIANTS.hover })}\n        }\n      }\n\n      &:focus {\n        outline: 0;\n        ${variant({ variants: BUTTON_VARIANTS.focus })}\n      }\n\n      &:active {\n        ${variant({ variants: BUTTON_VARIANTS.active })}\n      }\n\n      &:disabled {\n        pointer-events: none;\n        ${variant({ variants: BUTTON_VARIANTS.disabled })}\n      }\n    `\n  }};\n\n  ${boxMixin};\n`\n\nconst getTextVariant = (\n  size: ResponsiveValue<ButtonSize>\n): TextProps[\"variant\"] => {\n  if (typeof size === \"string\") {\n    return BUTTON_TEXT_SIZES[size]\n  }\n\n  if (Array.isArray(size)) {\n    return size.map((s) => BUTTON_TEXT_SIZES[s!] as TextVariant)\n  }\n\n  return BUTTON_TEXT_SIZES.large\n}\n"],"file":"Button.js"}

package/dist/elements/Button/Button.story.js

@@ -15,7 +15,7 @@ var _styledComponents = _interopRequireDefault(require("styled-components"));
 
 var _Join = require("../Join");
 
-var _BellIcon = require("../../svgs/BellIcon");
+var _BellStrokeIcon = _interopRequireDefault(require("@artsy/icons/BellStrokeIcon"));
 
 var _Box = require("../Box");
 
@@ -280,7 +280,7 @@ var WithIcon = function WithIcon() {
   }, /*#__PURE__*/_react.default.createElement(_index.Button, {
     variant: "secondaryBlack",
     size: "small",
-    Icon: _BellIcon.BellIcon
+    Icon: _BellStrokeIcon.default
   }, "Create an Alert"));
 };
 

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/elements/Button/Button.story.tsx"],"names":["title","_States","focus","hover","active","loading","disabled","success","story","name","Sizes","BUTTON_SIZE_NAMES","map","size","variants","BUTTON_VARIANT_NAMES","variant","Display","Box","displayName","Variants","reduce","a","b","concat","props","includes","bg","color","NativeButtonProps","autoFocus","children","tabIndex","onClick","event","preventDefault","WithBoxProps","Loading","setLoading","handleClick","setTimeout","As","as","WithIcon","BellIcon","ResponsiveSize"],"mappings":"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","sourcesContent":["import React, { useState } from \"react\"\nimport { States } from \"storybook-states\"\nimport styled from \"styled-components\"\nimport { Join } from \"../Join\"\nimport { BellIcon } from \"../../svgs/BellIcon\"\nimport { Box } from \"../Box\"\nimport { Flex } from \"../Flex\"\nimport { Spacer } from \"../Spacer\"\nimport { ButtonProps } from \"./Button\"\nimport { Button, BUTTON_SIZE_NAMES, BUTTON_VARIANT_NAMES } from \"./index\"\n\nexport default { title: \"Components/Button\" }\n\nexport const _States = () => {\n  return (\n    <States<ButtonProps>\n      states={[\n        {},\n        { focus: true },\n        { hover: true },\n        { active: true },\n        { loading: true },\n        { disabled: true },\n        { success: true },\n        { loading: true, disabled: true },\n      ]}\n    >\n      <Button>Label</Button>\n    </States>\n  )\n}\n\n_States.story = {\n  name: \"States\",\n}\n\nexport const Sizes = () => {\n  return (\n    <States<ButtonProps> states={BUTTON_SIZE_NAMES.map((size) => ({ size }))}>\n      <Button>Label</Button>\n    </States>\n  )\n}\n\nconst variants = BUTTON_VARIANT_NAMES.map((variant) => ({ variant }))\n\nconst Display = styled(Box)``\nDisplay.displayName = \"Button\"\n\nexport const Variants = () => {\n  return (\n    <States<ButtonProps>\n      states={([{ size: \"large\" }, { size: \"small\" }] as const)\n        .map((size) => {\n          return variants.map((variant) => ({ ...size, ...variant }))\n        })\n        .reduce((a, b) => {\n          return a.concat(b)\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              <Button {...props}>Default</Button>\n\n              <Button {...props} focus>\n                Focus\n              </Button>\n\n              <Button {...props} hover>\n                Hover\n              </Button>\n\n              <Button {...props} active>\n                Active\n              </Button>\n\n              <Button {...props} loading>\n                Loading\n              </Button>\n\n              <Button {...props} disabled>\n                Disabled\n              </Button>\n\n              <Button {...props} success>\n                Success\n              </Button>\n            </Join>\n          </Flex>\n        </Display>\n      )}\n    </States>\n  )\n}\n\nexport const NativeButtonProps = () => {\n  return (\n    <States<ButtonProps>\n      states={[\n        { autoFocus: true, children: \"autofocused\" },\n        { tabIndex: -1, children: \"not focusable with keyboard\" },\n        {\n          onClick: (event) => {\n            event.preventDefault()\n          },\n          children: \"correctly typed click event\",\n        },\n      ]}\n    >\n      <Button>Label</Button>\n    </States>\n  )\n}\n\nNativeButtonProps.story = {\n  name: \"Native button tag props\",\n}\n\nexport const WithBoxProps = () => {\n  return (\n    <States>\n      <Box border=\"1px dotted\" borderColor=\"black100\">\n        <Button display=\"block\" width=\"100%\" my={2}>\n          full width\n        </Button>\n\n        <Button display=\"block\" width=\"100%\" my={2}>\n          with collapsing\n        </Button>\n\n        <Button display=\"block\" width=\"100%\" my={2}>\n          margins\n        </Button>\n      </Box>\n    </States>\n  )\n}\n\nWithBoxProps.story = {\n  name: \"with BoxProps\",\n}\n\nexport const Loading = () => {\n  const [loading, setLoading] = useState(false)\n\n  const handleClick = () => {\n    if (loading) return\n    setLoading(true)\n    setTimeout(() => {\n      setLoading(false)\n    }, 1000)\n  }\n  return (\n    <States>\n      <Button loading={loading} onClick={handleClick}>\n        click to load\n      </Button>\n    </States>\n  )\n}\n\nexport const As = () => {\n  return (\n    <States states={[{}, { as: \"div\", children: \"This is a div\" }]}>\n      {/* @ts-ignore */}\n      <Button as=\"a\" href=\"#example\">\n        This is an anchor tag with an href\n      </Button>\n    </States>\n  )\n}\n\nexport const WithIcon = () => {\n  return (\n    <States<ButtonProps>\n      states={[\n        {},\n        { focus: true },\n        { hover: true },\n        { loading: true },\n        { disabled: true },\n        { loading: true, disabled: true },\n        { success: true },\n        { size: \"large\" },\n        { size: \"large\", focus: true },\n        { size: \"large\", hover: true },\n        { size: \"large\", loading: true },\n        { size: \"large\", disabled: true },\n        { size: \"large\", loading: true, disabled: true },\n        { size: \"large\", success: true },\n      ]}\n    >\n      <Button variant=\"secondaryBlack\" size=\"small\" Icon={BellIcon}>\n        Create an Alert\n      </Button>\n    </States>\n  )\n}\n\nexport const ResponsiveSize = () => {\n  return <Button size={[\"small\", \"large\"]}>Resize Viewport</Button>\n}\n"],"file":"Button.story.js"}
+{"version":3,"sources":["../../../src/elements/Button/Button.story.tsx"],"names":["title","_States","focus","hover","active","loading","disabled","success","story","name","Sizes","BUTTON_SIZE_NAMES","map","size","variants","BUTTON_VARIANT_NAMES","variant","Display","Box","displayName","Variants","reduce","a","b","concat","props","includes","bg","color","NativeButtonProps","autoFocus","children","tabIndex","onClick","event","preventDefault","WithBoxProps","Loading","setLoading","handleClick","setTimeout","As","as","WithIcon","BellStrokeIcon","ResponsiveSize"],"mappings":"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","sourcesContent":["import React, { useState } from \"react\"\nimport { States } from \"storybook-states\"\nimport styled from \"styled-components\"\nimport { Join } from \"../Join\"\nimport BellStrokeIcon from \"@artsy/icons/BellStrokeIcon\"\nimport { Box } from \"../Box\"\nimport { Flex } from \"../Flex\"\nimport { Spacer } from \"../Spacer\"\nimport { ButtonProps } from \"./Button\"\nimport { Button, BUTTON_SIZE_NAMES, BUTTON_VARIANT_NAMES } from \"./index\"\n\nexport default { title: \"Components/Button\" }\n\nexport const _States = () => {\n  return (\n    <States<ButtonProps>\n      states={[\n        {},\n        { focus: true },\n        { hover: true },\n        { active: true },\n        { loading: true },\n        { disabled: true },\n        { success: true },\n        { loading: true, disabled: true },\n      ]}\n    >\n      <Button>Label</Button>\n    </States>\n  )\n}\n\n_States.story = {\n  name: \"States\",\n}\n\nexport const Sizes = () => {\n  return (\n    <States<ButtonProps> states={BUTTON_SIZE_NAMES.map((size) => ({ size }))}>\n      <Button>Label</Button>\n    </States>\n  )\n}\n\nconst variants = BUTTON_VARIANT_NAMES.map((variant) => ({ variant }))\n\nconst Display = styled(Box)``\nDisplay.displayName = \"Button\"\n\nexport const Variants = () => {\n  return (\n    <States<ButtonProps>\n      states={([{ size: \"large\" }, { size: \"small\" }] as const)\n        .map((size) => {\n          return variants.map((variant) => ({ ...size, ...variant }))\n        })\n        .reduce((a, b) => {\n          return a.concat(b)\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              <Button {...props}>Default</Button>\n\n              <Button {...props} focus>\n                Focus\n              </Button>\n\n              <Button {...props} hover>\n                Hover\n              </Button>\n\n              <Button {...props} active>\n                Active\n              </Button>\n\n              <Button {...props} loading>\n                Loading\n              </Button>\n\n              <Button {...props} disabled>\n                Disabled\n              </Button>\n\n              <Button {...props} success>\n                Success\n              </Button>\n            </Join>\n          </Flex>\n        </Display>\n      )}\n    </States>\n  )\n}\n\nexport const NativeButtonProps = () => {\n  return (\n    <States<ButtonProps>\n      states={[\n        { autoFocus: true, children: \"autofocused\" },\n        { tabIndex: -1, children: \"not focusable with keyboard\" },\n        {\n          onClick: (event) => {\n            event.preventDefault()\n          },\n          children: \"correctly typed click event\",\n        },\n      ]}\n    >\n      <Button>Label</Button>\n    </States>\n  )\n}\n\nNativeButtonProps.story = {\n  name: \"Native button tag props\",\n}\n\nexport const WithBoxProps = () => {\n  return (\n    <States>\n      <Box border=\"1px dotted\" borderColor=\"black100\">\n        <Button display=\"block\" width=\"100%\" my={2}>\n          full width\n        </Button>\n\n        <Button display=\"block\" width=\"100%\" my={2}>\n          with collapsing\n        </Button>\n\n        <Button display=\"block\" width=\"100%\" my={2}>\n          margins\n        </Button>\n      </Box>\n    </States>\n  )\n}\n\nWithBoxProps.story = {\n  name: \"with BoxProps\",\n}\n\nexport const Loading = () => {\n  const [loading, setLoading] = useState(false)\n\n  const handleClick = () => {\n    if (loading) return\n    setLoading(true)\n    setTimeout(() => {\n      setLoading(false)\n    }, 1000)\n  }\n  return (\n    <States>\n      <Button loading={loading} onClick={handleClick}>\n        click to load\n      </Button>\n    </States>\n  )\n}\n\nexport const As = () => {\n  return (\n    <States states={[{}, { as: \"div\", children: \"This is a div\" }]}>\n      {/* @ts-ignore */}\n      <Button as=\"a\" href=\"#example\">\n        This is an anchor tag with an href\n      </Button>\n    </States>\n  )\n}\n\nexport const WithIcon = () => {\n  return (\n    <States<ButtonProps>\n      states={[\n        {},\n        { focus: true },\n        { hover: true },\n        { loading: true },\n        { disabled: true },\n        { loading: true, disabled: true },\n        { success: true },\n        { size: \"large\" },\n        { size: \"large\", focus: true },\n        { size: \"large\", hover: true },\n        { size: \"large\", loading: true },\n        { size: \"large\", disabled: true },\n        { size: \"large\", loading: true, disabled: true },\n        { size: \"large\", success: true },\n      ]}\n    >\n      <Button variant=\"secondaryBlack\" size=\"small\" Icon={BellStrokeIcon}>\n        Create an Alert\n      </Button>\n    </States>\n  )\n}\n\nexport const ResponsiveSize = () => {\n  return <Button size={[\"small\", \"large\"]}>Resize Viewport</Button>\n}\n"],"file":"Button.story.js"}

package/dist/elements/Carousel/Carousel.d.ts

@@ -32,6 +32,7 @@ export interface CarouselProps extends BoxProps {
      * that cell widths can be calculated.
      */
     Cell?: React.ForwardRefExoticComponent<CarouselCellProps>;
+    paginateBy?: "page" | "cell";
     onChange?(index: number): void;
     onPageCountChange?(count: number): void;
 }

package/dist/elements/Carousel/Carousel.js

@@ -15,7 +15,9 @@ var _styledSystem = require("styled-system");
 
 var _useCursor2 = require("use-cursor");
 
-var _svgs = require("../../svgs");
+var _ChevronLeftIcon = _interopRequireDefault(require("@artsy/icons/ChevronLeftIcon"));
+
+var _ChevronRightIcon = _interopRequireDefault(require("@artsy/icons/ChevronRightIcon"));
 
 var _useUpdateEffect = require("../../utils/useUpdateEffect");
 
@@ -29,7 +31,7 @@ var _CarouselNavigation = require("./CarouselNavigation");
 
 var _paginate = require("./paginate");
 
-var _excluded = ["initialIndex", "children", "Previous", "Next", "Rail", "Cell", "onChange", "onPageCountChange"];
+var _excluded = ["initialIndex", "children", "Previous", "Next", "Rail", "Cell", "paginateBy", "onChange", "onPageCountChange"];
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
@@ -116,6 +118,8 @@ var Carousel = function Carousel(_ref) {
       Rail = _ref$Rail === void 0 ? CarouselRail : _ref$Rail,
       _ref$Cell = _ref.Cell,
       Cell = _ref$Cell === void 0 ? CarouselCell : _ref$Cell,
+      _ref$paginateBy = _ref.paginateBy,
+      paginateBy = _ref$paginateBy === void 0 ? "page" : _ref$paginateBy,
       onChange = _ref.onChange,
       onPageCountChange = _ref.onPageCountChange,
       rest = _objectWithoutProperties(_ref, _excluded);
@@ -155,7 +159,8 @@ var Carousel = function Carousel(_ref) {
     });
     setPages((0, _paginate.paginateCarousel)({
       viewport: viewport.clientWidth,
-      values: values
+      values: values,
+      paginateBy: paginateBy
     }));
   };
 
@@ -225,16 +230,14 @@ var Carousel = function Carousel(_ref) {
     onClick: handlePrev,
     disabled: index === 0,
     "aria-label": "Previous page"
-  }, /*#__PURE__*/_react.default.createElement(_svgs.ChevronIcon, {
-    direction: "left",
+  }, /*#__PURE__*/_react.default.createElement(_ChevronLeftIcon.default, {
     width: 15,
     height: 15
   })), /*#__PURE__*/_react.default.createElement(Next, {
     onClick: handleNext,
     disabled: index === pages.length - 1,
     "aria-label": "Next page"
-  }, /*#__PURE__*/_react.default.createElement(_svgs.ChevronIcon, {
-    direction: "right",
+  }, /*#__PURE__*/_react.default.createElement(_ChevronRightIcon.default, {
     width: 15,
     height: 15
   }))), /*#__PURE__*/_react.default.createElement(Viewport, {

package/dist/elements/Carousel/Carousel.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/elements/Carousel/Carousel.tsx"],"names":["RAIL_TRANSITION_MS","transition","CarouselRail","Box","defaultProps","as","display","CarouselCell","CELL_GAP_PADDING_AMOUNT","Container","Viewport","Carousel","initialIndex","children","Previous","CarouselPrevious","Next","CarouselNext","Rail","Cell","onChange","onPageCountChange","rest","containerRef","viewportRef","startRef","endRef","cells","Children","toArray","filter","isValidElement","map","child","ref","pages","setPages","initialCursor","max","length","index","handleNext","handlePrev","setCursor","init","viewport","current","values","clientWidth","window","addEventListener","removeEventListener","skipToEnd","focus","skipToStart","handleKeydown","key","contains","document","activeElement","offset","transform","i","isLast"],"mappings":"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","sourcesContent":["import React, {\n  Children,\n  createRef,\n  isValidElement,\n  useEffect,\n  useMemo,\n  useRef,\n  useState,\n} from \"react\"\nimport styled from \"styled-components\"\nimport { ResponsiveValue, system } from \"styled-system\"\nimport { useCursor } from \"use-cursor\"\nimport { ChevronIcon } from \"../../svgs\"\nimport { SpacingUnit } from \"../../Theme\"\nimport { useUpdateEffect } from \"../../utils/useUpdateEffect\"\nimport { Box, BoxProps } from \"../Box\"\nimport { Skip } from \"../Skip\"\nimport { VisuallyHidden } from \"../VisuallyHidden\"\nimport {\n  CarouselNavigationProps,\n  CarouselNext,\n  CarouselPrevious,\n} from \"./CarouselNavigation\"\nimport { paginateCarousel } from \"./paginate\"\n\nconst RAIL_TRANSITION_MS = 500\n\nconst transition = system({ transition: true })\n\n/** CarouselRailProps */\nexport type CarouselRailProps = BoxProps & {\n  transition?: ResponsiveValue<string>\n}\n\n/** A `CarouselRail` slides back and forth within the viewport */\nexport const CarouselRail = styled(Box)<CarouselRailProps>`\n  height: 100%;\n  margin: 0;\n  padding: 0;\n  list-style: none;\n  white-space: nowrap;\n  ${transition}\n`\n\nCarouselRail.defaultProps = {\n  as: \"ul\",\n  display: \"flex\",\n  transition: `transform ${RAIL_TRANSITION_MS}ms`,\n}\n\n/** CarouselCellProps */\nexport type CarouselCellProps = BoxProps\n\n/** A `CarouselCell` wraps a single child in the carousel */\nexport const CarouselCell = styled(Box)`\n  white-space: normal;\n`\n\nCarouselCell.defaultProps = {\n  as: \"li\",\n}\n\n/**\n * We share this spacing value with the `Swiper` component\n */\nexport const CELL_GAP_PADDING_AMOUNT: SpacingUnit[] = [1, 2]\n\nconst Container = styled(Box)`\n  position: relative;\n  width: 100%;\n`\n\nconst Viewport = styled(Box)`\n  width: 100%;\n  overflow: hidden;\n`\n\nexport interface CarouselProps extends BoxProps {\n  initialIndex?: number\n  children: React.ReactNode\n  Next?: typeof CarouselNext | React.FC<CarouselNavigationProps>\n  Previous?: typeof CarouselPrevious | React.FC<CarouselNavigationProps>\n  Rail?: typeof CarouselRail | React.FC<CarouselRailProps>\n  /**\n   * If providing a custom `Cell` you must forward a ref so\n   * that cell widths can be calculated.\n   */\n  Cell?: React.ForwardRefExoticComponent<CarouselCellProps>\n  onChange?(index: number): void\n  onPageCountChange?(count: number): void\n}\n\n/**\n * A `Carousel` accepts children or a series of children that are JSX elements.\n * It presents them in a horizontal rail and when the width exceeds the width\n * of the viewport, it presents navigation arrows and allows a user to page\n * through them.\n */\nexport const Carousel: React.FC<CarouselProps> = ({\n  initialIndex = 0,\n  children,\n  Previous = CarouselPrevious,\n  Next = CarouselNext,\n  Rail = CarouselRail,\n  Cell = CarouselCell,\n  onChange,\n  onPageCountChange,\n  ...rest\n}) => {\n  const containerRef = useRef<HTMLDivElement | null>(null)\n  const viewportRef = useRef<HTMLDivElement | null>(null)\n  const startRef = useRef<HTMLButtonElement | null>(null)\n  const endRef = useRef<HTMLButtonElement | null>(null)\n\n  const cells = useMemo(\n    () =>\n      Children.toArray(children)\n        .filter(isValidElement)\n        .map((child) => ({ child, ref: createRef<HTMLDivElement>() })),\n    [children]\n  )\n\n  const [pages, setPages] = useState([0])\n\n  const { index, handleNext, handlePrev, setCursor } = useCursor({\n    initialCursor: initialIndex,\n    max: pages.length,\n  })\n\n  const init = () => {\n    const { current: viewport } = viewportRef\n    const values = cells.map(({ ref }) => ref.current!.clientWidth)\n    setPages(paginateCarousel({ viewport: viewport!.clientWidth, values }))\n  }\n\n  useEffect(() => {\n    init()\n    window.addEventListener(\"resize\", init)\n    return () => {\n      window.removeEventListener(\"resize\", init)\n    }\n  }, [cells])\n\n  const skipToEnd = () => {\n    if (!endRef.current) return\n    endRef.current.focus()\n    setCursor(pages.length - 1)\n  }\n\n  const skipToStart = () => {\n    if (!startRef.current) return\n    startRef.current.focus()\n    setCursor(0)\n  }\n\n  const handleKeydown = ({ key }: KeyboardEvent) => {\n    if (!containerRef.current) return\n\n    // Only triggers keyboard navigation if component is in focus\n    if (!containerRef.current.contains(document.activeElement)) {\n      return\n    }\n\n    switch (key) {\n      case \"ArrowRight\":\n        handleNext()\n        break\n      case \"ArrowLeft\":\n        handlePrev()\n        break\n      default:\n        break\n    }\n  }\n\n  useEffect(() => {\n    document.addEventListener(\"keydown\", handleKeydown)\n    return () => document.removeEventListener(\"keydown\", handleKeydown)\n  }, [handleKeydown])\n\n  useUpdateEffect(() => {\n    onChange && onChange(index)\n  }, [onChange, index])\n\n  useUpdateEffect(() => {\n    onPageCountChange && onPageCountChange(pages.length)\n  }, [onPageCountChange, pages.length])\n\n  const offset = `-${pages[index]}px`\n\n  return (\n    <Container ref={containerRef as any} {...rest}>\n      <Skip ref={startRef} onClick={skipToEnd} width=\"100%\" mb={1}>\n        Skip to end of content\n      </Skip>\n\n      <nav>\n        <Previous\n          onClick={handlePrev}\n          disabled={index === 0}\n          aria-label=\"Previous page\"\n        >\n          <ChevronIcon direction=\"left\" width={15} height={15} />\n        </Previous>\n\n        <Next\n          onClick={handleNext}\n          disabled={index === pages.length - 1}\n          aria-label=\"Next page\"\n        >\n          <ChevronIcon direction=\"right\" width={15} height={15} />\n        </Next>\n      </nav>\n\n      <Viewport ref={viewportRef as any}>\n        <Rail style={{ transform: `translateX(${offset})` }}>\n          {cells.map(({ child, ref }, i) => {\n            const isLast = i === cells.length - 1\n\n            return (\n              <Cell\n                key={i}\n                ref={ref}\n                pr={!isLast && (CELL_GAP_PADDING_AMOUNT as any)}\n              >\n                {child}\n              </Cell>\n            )\n          })}\n        </Rail>\n      </Viewport>\n\n      <Skip ref={endRef} onClick={skipToStart} width=\"100%\" mt={1}>\n        Skip to beginning of content\n      </Skip>\n\n      <VisuallyHidden aria-live=\"polite\" aria-atomic=\"true\">\n        Page {index + 1} of {pages.length}\n      </VisuallyHidden>\n    </Container>\n  )\n}\n"],"file":"Carousel.js"}
+{"version":3,"sources":["../../../src/elements/Carousel/Carousel.tsx"],"names":["RAIL_TRANSITION_MS","transition","CarouselRail","Box","defaultProps","as","display","CarouselCell","CELL_GAP_PADDING_AMOUNT","Container","Viewport","Carousel","initialIndex","children","Previous","CarouselPrevious","Next","CarouselNext","Rail","Cell","paginateBy","onChange","onPageCountChange","rest","containerRef","viewportRef","startRef","endRef","cells","Children","toArray","filter","isValidElement","map","child","ref","pages","setPages","initialCursor","max","length","index","handleNext","handlePrev","setCursor","init","viewport","current","values","clientWidth","window","addEventListener","removeEventListener","skipToEnd","focus","skipToStart","handleKeydown","key","contains","document","activeElement","offset","transform","i","isLast"],"mappings":"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","sourcesContent":["import React, {\n  Children,\n  createRef,\n  isValidElement,\n  useEffect,\n  useMemo,\n  useRef,\n  useState,\n} from \"react\"\nimport styled from \"styled-components\"\nimport { ResponsiveValue, system } from \"styled-system\"\nimport { useCursor } from \"use-cursor\"\nimport ChevronLeftIcon from \"@artsy/icons/ChevronLeftIcon\"\nimport ChevronRightIcon from \"@artsy/icons/ChevronRightIcon\"\nimport { SpacingUnit } from \"../../Theme\"\nimport { useUpdateEffect } from \"../../utils/useUpdateEffect\"\nimport { Box, BoxProps } from \"../Box\"\nimport { Skip } from \"../Skip\"\nimport { VisuallyHidden } from \"../VisuallyHidden\"\nimport {\n  CarouselNavigationProps,\n  CarouselNext,\n  CarouselPrevious,\n} from \"./CarouselNavigation\"\nimport { paginateCarousel } from \"./paginate\"\n\nconst RAIL_TRANSITION_MS = 500\n\nconst transition = system({ transition: true })\n\n/** CarouselRailProps */\nexport type CarouselRailProps = BoxProps & {\n  transition?: ResponsiveValue<string>\n}\n\n/** A `CarouselRail` slides back and forth within the viewport */\nexport const CarouselRail = styled(Box)<CarouselRailProps>`\n  height: 100%;\n  margin: 0;\n  padding: 0;\n  list-style: none;\n  white-space: nowrap;\n  ${transition}\n`\n\nCarouselRail.defaultProps = {\n  as: \"ul\",\n  display: \"flex\",\n  transition: `transform ${RAIL_TRANSITION_MS}ms`,\n}\n\n/** CarouselCellProps */\nexport type CarouselCellProps = BoxProps\n\n/** A `CarouselCell` wraps a single child in the carousel */\nexport const CarouselCell = styled(Box)`\n  white-space: normal;\n`\n\nCarouselCell.defaultProps = {\n  as: \"li\",\n}\n\n/**\n * We share this spacing value with the `Swiper` component\n */\nexport const CELL_GAP_PADDING_AMOUNT: SpacingUnit[] = [1, 2]\n\nconst Container = styled(Box)`\n  position: relative;\n  width: 100%;\n`\n\nconst Viewport = styled(Box)`\n  width: 100%;\n  overflow: hidden;\n`\n\nexport interface CarouselProps extends BoxProps {\n  initialIndex?: number\n  children: React.ReactNode\n  Next?: typeof CarouselNext | React.FC<CarouselNavigationProps>\n  Previous?: typeof CarouselPrevious | React.FC<CarouselNavigationProps>\n  Rail?: typeof CarouselRail | React.FC<CarouselRailProps>\n  /**\n   * If providing a custom `Cell` you must forward a ref so\n   * that cell widths can be calculated.\n   */\n  Cell?: React.ForwardRefExoticComponent<CarouselCellProps>\n  paginateBy?: \"page\" | \"cell\"\n  onChange?(index: number): void\n  onPageCountChange?(count: number): void\n}\n\n/**\n * A `Carousel` accepts children or a series of children that are JSX elements.\n * It presents them in a horizontal rail and when the width exceeds the width\n * of the viewport, it presents navigation arrows and allows a user to page\n * through them.\n */\nexport const Carousel: React.FC<CarouselProps> = ({\n  initialIndex = 0,\n  children,\n  Previous = CarouselPrevious,\n  Next = CarouselNext,\n  Rail = CarouselRail,\n  Cell = CarouselCell,\n  paginateBy = \"page\",\n  onChange,\n  onPageCountChange,\n  ...rest\n}) => {\n  const containerRef = useRef<HTMLDivElement | null>(null)\n  const viewportRef = useRef<HTMLDivElement | null>(null)\n  const startRef = useRef<HTMLButtonElement | null>(null)\n  const endRef = useRef<HTMLButtonElement | null>(null)\n\n  const cells = useMemo(\n    () =>\n      Children.toArray(children)\n        .filter(isValidElement)\n        .map((child) => ({ child, ref: createRef<HTMLDivElement>() })),\n    [children]\n  )\n\n  const [pages, setPages] = useState([0])\n\n  const { index, handleNext, handlePrev, setCursor } = useCursor({\n    initialCursor: initialIndex,\n    max: pages.length,\n  })\n\n  const init = () => {\n    const { current: viewport } = viewportRef\n    const values = cells.map(({ ref }) => ref.current!.clientWidth)\n\n    setPages(\n      paginateCarousel({\n        viewport: viewport!.clientWidth,\n        values,\n        paginateBy,\n      })\n    )\n  }\n\n  useEffect(() => {\n    init()\n    window.addEventListener(\"resize\", init)\n    return () => {\n      window.removeEventListener(\"resize\", init)\n    }\n  }, [cells])\n\n  const skipToEnd = () => {\n    if (!endRef.current) return\n    endRef.current.focus()\n    setCursor(pages.length - 1)\n  }\n\n  const skipToStart = () => {\n    if (!startRef.current) return\n    startRef.current.focus()\n    setCursor(0)\n  }\n\n  const handleKeydown = ({ key }: KeyboardEvent) => {\n    if (!containerRef.current) return\n\n    // Only triggers keyboard navigation if component is in focus\n    if (!containerRef.current.contains(document.activeElement)) {\n      return\n    }\n\n    switch (key) {\n      case \"ArrowRight\":\n        handleNext()\n        break\n      case \"ArrowLeft\":\n        handlePrev()\n        break\n      default:\n        break\n    }\n  }\n\n  useEffect(() => {\n    document.addEventListener(\"keydown\", handleKeydown)\n    return () => document.removeEventListener(\"keydown\", handleKeydown)\n  }, [handleKeydown])\n\n  useUpdateEffect(() => {\n    onChange && onChange(index)\n  }, [onChange, index])\n\n  useUpdateEffect(() => {\n    onPageCountChange && onPageCountChange(pages.length)\n  }, [onPageCountChange, pages.length])\n\n  const offset = `-${pages[index]}px`\n\n  return (\n    <Container ref={containerRef as any} {...rest}>\n      <Skip ref={startRef} onClick={skipToEnd} width=\"100%\" mb={1}>\n        Skip to end of content\n      </Skip>\n\n      <nav>\n        <Previous\n          onClick={handlePrev}\n          disabled={index === 0}\n          aria-label=\"Previous page\"\n        >\n          <ChevronLeftIcon width={15} height={15} />\n        </Previous>\n\n        <Next\n          onClick={handleNext}\n          disabled={index === pages.length - 1}\n          aria-label=\"Next page\"\n        >\n          <ChevronRightIcon width={15} height={15} />\n        </Next>\n      </nav>\n\n      <Viewport ref={viewportRef as any}>\n        <Rail style={{ transform: `translateX(${offset})` }}>\n          {cells.map(({ child, ref }, i) => {\n            const isLast = i === cells.length - 1\n\n            return (\n              <Cell\n                key={i}\n                ref={ref}\n                pr={!isLast && (CELL_GAP_PADDING_AMOUNT as any)}\n              >\n                {child}\n              </Cell>\n            )\n          })}\n        </Rail>\n      </Viewport>\n\n      <Skip ref={endRef} onClick={skipToStart} width=\"100%\" mt={1}>\n        Skip to beginning of content\n      </Skip>\n\n      <VisuallyHidden aria-live=\"polite\" aria-atomic=\"true\">\n        Page {index + 1} of {pages.length}\n      </VisuallyHidden>\n    </Container>\n  )\n}\n"],"file":"Carousel.js"}

package/dist/elements/Carousel/Carousel.story.d.ts

@@ -88,3 +88,5 @@ export declare const NavigateViaProps: {
     };
 };
 export declare const ConditionalChildren: () => JSX.Element;
+export declare const PaginationByCell: () => JSX.Element;
+export declare const PaginationByCellWithVaryingWidths: () => JSX.Element;

package/dist/elements/Carousel/Carousel.story.js

@@ -5,7 +5,7 @@ function _typeof(obj) { "@babel/helpers - typeof"; return _typeof = "function" =
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.default = exports.VaryingWidths = exports.VaryingHeights = exports.TwoishPages = exports.SinglePage = exports.SingleOverflowingItem = exports.Simple = exports.NavigateViaProps = exports.MultipleOverflowingItems = exports.Multiple = exports.ManyPages = exports.InitialIndexOnMount = exports.DynamicItems = exports.CustomRailAndCells = exports.CustomArrows = exports.ConditionalChildren = exports.CarouselWithText = void 0;
+exports.default = exports.VaryingWidths = exports.VaryingHeights = exports.TwoishPages = exports.SinglePage = exports.SingleOverflowingItem = exports.Simple = exports.PaginationByCellWithVaryingWidths = exports.PaginationByCell = exports.NavigateViaProps = exports.MultipleOverflowingItems = exports.Multiple = exports.ManyPages = exports.InitialIndexOnMount = exports.DynamicItems = exports.CustomRailAndCells = exports.CustomArrows = exports.ConditionalChildren = exports.CarouselWithText = void 0;
 
 var _addonActions = require("@storybook/addon-actions");
 
@@ -445,4 +445,30 @@ var ConditionalChildren = function ConditionalChildren() {
 
 exports.ConditionalChildren = ConditionalChildren;
 ConditionalChildren.displayName = "ConditionalChildren";
+
+var PaginationByCell = function PaginationByCell() {
+  return /*#__PURE__*/_react.default.createElement(Demo, {
+    paginateBy: "cell"
+  });
+};
+
+exports.PaginationByCell = PaginationByCell;
+PaginationByCell.displayName = "PaginationByCell";
+
+var PaginationByCellWithVaryingWidths = function PaginationByCellWithVaryingWidths() {
+  var widths = Array.from(Array(25)).map(function (_, i) {
+    if (i % 15 === 0) return 400;
+    if (i % 5 === 0) return 300;
+    if (i % 3 === 0) return 333;
+    if (i % 2 === 0) return 275;
+    return 250;
+  });
+  return /*#__PURE__*/_react.default.createElement(Demo, {
+    paginateBy: "cell",
+    widths: widths
+  });
+};
+
+exports.PaginationByCellWithVaryingWidths = PaginationByCellWithVaryingWidths;
+PaginationByCellWithVaryingWidths.displayName = "PaginationByCellWithVaryingWidths";
 //# sourceMappingURL=Carousel.story.js.map