@artsy/palette 31.2.0 → 31.3.0

package/dist/elements/Shelf/ShelfNavigation.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/elements/Shelf/ShelfNavigation.tsx"],"names":["STATES","hover","css","DROP_SHADOW","focus","disabled","Arrow","Clickable","props","ShelfNext","ShelfPrevious"],"mappings":";;;;;;;;;AAAA;;AACA;;AACA;;AAEA;;AACA;;AACA;;;;;;;;AASA,IAAMA,MAAM,GAAG;AACbC,EAAAA,KAAK,MAAEC,qBAAF,6CAEM,wBAAS,iBAAT,CAFN,EAGWC,oBAHX,CADQ;AAMbC,EAAAA,KAAK,MAAEF,qBAAF,+CAEM,wBAAS,iBAAT,CAFN,EAGa,wBAAS,cAAT,CAHb,CANQ;AAWbG,EAAAA,QAAQ,MAAEH,qBAAF;AAXK,CAAf;AAiBA,IAAMI,KAAK,GAAG,+BAAOC,oBAAP,CAAH;AAAA;AAAA;AAAA,0WAUA,wBAAS,gBAAT,CAVA,EAWW,wBAAS,iBAAT,CAXX,EAYW,wBAAS,eAAT,CAZX,EAoBP,UAACC,KAAD,EAAW;AACX,aAAON,qBAAP,sBACIM,KAAK,CAACP,KAAN,IAAeD,MAAM,CAACC,KAD1B,EAEIO,KAAK,CAACJ,KAAN,IAAeJ,MAAM,CAACI,KAF1B,EAGII,KAAK,CAACH,QAAN,IAAkBL,MAAM,CAACI,KAH7B;AAKD,CA1BQ,EA6BLJ,MAAM,CAACC,KA7BF,EAgCLD,MAAM,CAACI,KAhCF,EAoCLJ,MAAM,CAACK,QApCF,CAAX;AAwCA;AACA;AACA;;AACO,IAAMI,SAAyC,GAAG,SAA5CA,SAA4C,CAACD,KAAD,EAAW;AAClE,sBACE,6BAAC,KAAD,EAAWA,KAAX,eACE,6BAAC,iBAAD;AAAa,IAAA,SAAS,EAAC,OAAvB;AAA+B,IAAA,KAAK,EAAE,EAAtC;AAA0C,IAAA,MAAM,EAAE;AAAlD,IADF,CADF;AAKD,CANM;;;AAAMC,S;;AAQb;AACA;AACA;AACO,IAAMC,aAA6C,GAAG,SAAhDA,aAAgD,CAACF,KAAD,EAAW;AACtE,sBACE,6BAAC,KAAD,EAAWA,KAAX,eACE,6BAAC,iBAAD;AAAa,IAAA,SAAS,EAAC,MAAvB;AAA8B,IAAA,KAAK,EAAE,EAArC;AAAyC,IAAA,MAAM,EAAE;AAAjD,IADF,CADF;AAKD,CANM;;;AAAME,a","sourcesContent":["import { themeGet } from \"@styled-system/theme-get\"\nimport React from \"react\"\nimport styled from \"styled-components\"\nimport { css } from \"styled-components\"\nimport { DROP_SHADOW } from \"../../helpers\"\nimport { ChevronIcon } from \"../../svgs\"\nimport { Clickable, ClickableProps } from \"../Clickable\"\n\n/** ShelfNavigationProps */\nexport interface ShelfNavigationProps extends ClickableProps {\n  hover?: boolean\n  focus?: boolean\n  disabled?: boolean\n}\n\nconst STATES = {\n  hover: css`\n    outline: 0;\n    color: ${themeGet(\"colors.black100\")};\n    box-shadow: ${DROP_SHADOW};\n  `,\n  focus: css`\n    outline: 0;\n    color: ${themeGet(\"colors.black100\")};\n    border-color: ${themeGet(\"colors.brand\")};\n  `,\n  disabled: css`\n    opacity: 0;\n    cursor: default;\n  `,\n}\n\nconst Arrow = styled(Clickable)<ShelfNavigationProps>`\n  height: 50px;\n  width: 50px;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  cursor: pointer;\n  user-select: none;\n  transition: opacity 250ms, color 250ms, border-color 250ms,\n    box-shadow 0.25s ease;\n  color: ${themeGet(\"colors.black60\")};\n  background-color: ${themeGet(\"colors.white100\")};\n  border: 1px solid ${themeGet(\"colors.black5\")};\n  border-radius: 50%;\n  pointer-events: auto;\n\n  > svg {\n    fill: currentColor;\n  }\n\n  ${(props) => {\n    return css`\n      ${props.hover && STATES.hover}\n      ${props.focus && STATES.focus}\n      ${props.disabled && STATES.focus}\n    `\n  }}\n\n  &:hover {\n    ${STATES.hover}\n  }\n  &:focus {\n    ${STATES.focus}\n  }\n\n  &:disabled {\n    ${STATES.disabled}\n  }\n`\n\n/**\n * Default next button\n */\nexport const ShelfNext: React.FC<ShelfNavigationProps> = (props) => {\n  return (\n    <Arrow {...props}>\n      <ChevronIcon direction=\"right\" width={15} height={15} />\n    </Arrow>\n  )\n}\n\n/**\n * Default previous button\n */\nexport const ShelfPrevious: React.FC<ShelfNavigationProps> = (props) => {\n  return (\n    <Arrow {...props}>\n      <ChevronIcon direction=\"left\" width={15} height={15} />\n    </Arrow>\n  )\n}\n"],"file":"ShelfNavigation.js"}
+{"version":3,"sources":["../../../src/elements/Shelf/ShelfNavigation.tsx"],"names":["STATES","hover","css","DROP_SHADOW","focus","disabled","Arrow","Clickable","props","ShelfNext","ShelfPrevious"],"mappings":";;;;;;;;;AAAA;;AACA;;AACA;;AAEA;;AACA;;AACA;;AACA;;;;;;;;AASA,IAAMA,MAAM,GAAG;AACbC,EAAAA,KAAK,MAAEC,qBAAF,6CAEM,wBAAS,iBAAT,CAFN,EAGWC,oBAHX,CADQ;AAMbC,EAAAA,KAAK,MAAEF,qBAAF,+CAEM,wBAAS,iBAAT,CAFN,EAGa,wBAAS,cAAT,CAHb,CANQ;AAWbG,EAAAA,QAAQ,MAAEH,qBAAF;AAXK,CAAf;AAiBA,IAAMI,KAAK,GAAG,+BAAOC,oBAAP,CAAH;AAAA;AAAA;AAAA,0WAUA,wBAAS,gBAAT,CAVA,EAWW,wBAAS,iBAAT,CAXX,EAYW,wBAAS,eAAT,CAZX,EAoBP,UAACC,KAAD,EAAW;AACX,aAAON,qBAAP,sBACIM,KAAK,CAACP,KAAN,IAAeD,MAAM,CAACC,KAD1B,EAEIO,KAAK,CAACJ,KAAN,IAAeJ,MAAM,CAACI,KAF1B,EAGII,KAAK,CAACH,QAAN,IAAkBL,MAAM,CAACI,KAH7B;AAKD,CA1BQ,EA6BLJ,MAAM,CAACC,KA7BF,EAgCLD,MAAM,CAACI,KAhCF,EAoCLJ,MAAM,CAACK,QApCF,CAAX;AAwCA;AACA;AACA;;AACO,IAAMI,SAAyC,GAAG,SAA5CA,SAA4C,CAACD,KAAD,EAAW;AAClE,sBACE,6BAAC,KAAD,EAAWA,KAAX,eACE,6BAAC,yBAAD;AAAkB,IAAA,KAAK,EAAE,EAAzB;AAA6B,IAAA,MAAM,EAAE;AAArC,IADF,CADF;AAKD,CANM;;;AAAMC,S;;AAQb;AACA;AACA;AACO,IAAMC,aAA6C,GAAG,SAAhDA,aAAgD,CAACF,KAAD,EAAW;AACtE,sBACE,6BAAC,KAAD,EAAWA,KAAX,eACE,6BAAC,wBAAD;AAAiB,IAAA,KAAK,EAAE,EAAxB;AAA4B,IAAA,MAAM,EAAE;AAApC,IADF,CADF;AAKD,CANM;;;AAAME,a","sourcesContent":["import { themeGet } from \"@styled-system/theme-get\"\nimport React from \"react\"\nimport styled from \"styled-components\"\nimport { css } from \"styled-components\"\nimport { DROP_SHADOW } from \"../../helpers\"\nimport ChevronLeftIcon from \"@artsy/icons/ChevronLeftIcon\"\nimport ChevronRightIcon from \"@artsy/icons/ChevronRightIcon\"\nimport { Clickable, ClickableProps } from \"../Clickable\"\n\n/** ShelfNavigationProps */\nexport interface ShelfNavigationProps extends ClickableProps {\n  hover?: boolean\n  focus?: boolean\n  disabled?: boolean\n}\n\nconst STATES = {\n  hover: css`\n    outline: 0;\n    color: ${themeGet(\"colors.black100\")};\n    box-shadow: ${DROP_SHADOW};\n  `,\n  focus: css`\n    outline: 0;\n    color: ${themeGet(\"colors.black100\")};\n    border-color: ${themeGet(\"colors.brand\")};\n  `,\n  disabled: css`\n    opacity: 0;\n    cursor: default;\n  `,\n}\n\nconst Arrow = styled(Clickable)<ShelfNavigationProps>`\n  height: 50px;\n  width: 50px;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  cursor: pointer;\n  user-select: none;\n  transition: opacity 250ms, color 250ms, border-color 250ms,\n    box-shadow 0.25s ease;\n  color: ${themeGet(\"colors.black60\")};\n  background-color: ${themeGet(\"colors.white100\")};\n  border: 1px solid ${themeGet(\"colors.black5\")};\n  border-radius: 50%;\n  pointer-events: auto;\n\n  > svg {\n    fill: currentColor;\n  }\n\n  ${(props) => {\n    return css`\n      ${props.hover && STATES.hover}\n      ${props.focus && STATES.focus}\n      ${props.disabled && STATES.focus}\n    `\n  }}\n\n  &:hover {\n    ${STATES.hover}\n  }\n  &:focus {\n    ${STATES.focus}\n  }\n\n  &:disabled {\n    ${STATES.disabled}\n  }\n`\n\n/**\n * Default next button\n */\nexport const ShelfNext: React.FC<ShelfNavigationProps> = (props) => {\n  return (\n    <Arrow {...props}>\n      <ChevronRightIcon width={15} height={15} />\n    </Arrow>\n  )\n}\n\n/**\n * Default previous button\n */\nexport const ShelfPrevious: React.FC<ShelfNavigationProps> = (props) => {\n  return (\n    <Arrow {...props}>\n      <ChevronLeftIcon width={15} height={15} />\n    </Arrow>\n  )\n}\n"],"file":"ShelfNavigation.js"}

package/dist/elements/Stepper/Stepper.js

@@ -7,9 +7,9 @@ exports.Stepper = exports.Step = void 0;
 
 var _react = _interopRequireDefault(require("react"));
 
-var _CheckIcon = require("../../svgs/CheckIcon");
+var _CheckmarkIcon = _interopRequireDefault(require("@artsy/icons/CheckmarkIcon"));
 
-var _ChevronIcon = require("../../svgs/ChevronIcon");
+var _ChevronRightIcon = _interopRequireDefault(require("@artsy/icons/ChevronRightIcon"));
 
 var _BaseTabs = require("../BaseTabs");
 
@@ -72,12 +72,12 @@ var Stepper = function Stepper(_ref) {
       alignItems: "center"
     }, /*#__PURE__*/_react.default.createElement(_Box.Box, {
       color: i > currentStepIndex ? "black30" : undefined
-    }, tab.child.props.name), currentStepIndex > i && /*#__PURE__*/_react.default.createElement(_CheckIcon.CheckIcon, {
+    }, tab.child.props.name), currentStepIndex > i && /*#__PURE__*/_react.default.createElement(_CheckmarkIcon.default, {
       width: 16,
       height: 16,
-      fill: "green100",
+      color: "green100",
       ml: 1
-    })), /*#__PURE__*/_react.default.createElement(_ChevronIcon.ChevronIcon, {
+    })), /*#__PURE__*/_react.default.createElement(_ChevronRightIcon.default, {
       fill: "black60",
       height: 10,
       ml: 1

package/dist/elements/Stepper/Stepper.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/elements/Stepper/Stepper.tsx"],"names":["Stepper","currentStepIndex","disableNavigation","initialTabIndex","children","rest","tabs","activeTab","activeTabIndex","handleClick","ref","map","tab","i","Clickable","undefined","child","props","name","current","Step","defaultProps","mb"],"mappings":";;;;;;;AAAA;;AACA;;AACA;;AACA;;AACA;;AACA;;AACA;;AACA;;;;;;;;;;;;AASA;AACO,IAAMA,OAA+B,GAAG,SAAlCA,OAAkC,OAMzC;AAAA,MALJC,gBAKI,QALJA,gBAKI;AAAA,MAJJC,iBAII,QAJJA,iBAII;AAAA,kCAHJC,eAGI;AAAA,MAHJA,eAGI,qCAHc,CAGd;AAAA,MAFJC,QAEI,QAFJA,QAEI;AAAA,MADDC,IACC;;AACJ,iBAA8D,mBAAQ;AACpED,IAAAA,QAAQ,EAARA,QADoE;AAEpED,IAAAA,eAAe,EAAfA;AAFoE,GAAR,CAA9D;AAAA,MAAQG,IAAR,YAAQA,IAAR;AAAA,MAAcC,SAAd,YAAcA,SAAd;AAAA,MAAyBC,cAAzB,YAAyBA,cAAzB;AAAA,MAAyCC,WAAzC,YAAyCA,WAAzC;AAAA,MAAsDC,GAAtD,YAAsDA,GAAtD;;AAKA,sBACE,yEACE,6BAAC,kBAAD;AAAU,IAAA,GAAG,EAAEA,GAAf;AAAoB,IAAA,IAAI;AAAxB,KAA6BL,IAA7B,GACGC,IAAI,CAACK,GAAL,CAAS,UAACC,GAAD,EAAMC,CAAN,EAAY;AACpB,wBACE,6BAAC,iBAAD;AACE,MAAA,GAAG,EAAEA,CADP;AAEE,MAAA,EAAE,EAAEC,oBAFN;AAGE,MAAA,GAAG,EAAEF,GAAG,CAACF,GAHX;AAIE,uBAAeG,CAAC,KAAKL,cAJvB;AAKE,MAAA,QAAQ,EAAEN,iBAAiB,IAAIW,CAAC,GAAGZ,gBALrC;AAME,MAAA,OAAO,EAAEQ,WAAW,CAACI,CAAD,CANtB;AAOE,MAAA,MAAM,EAAEA,CAAC,KAAKL,cAPhB;AAQE,MAAA,OAAO,EAAC,IARV;AASE,MAAA,cAAc,EAAC;AATjB,oBAWE,6BAAC,UAAD;AAAM,MAAA,UAAU,EAAC,QAAjB;AAA0B,MAAA,cAAc,EAAC,eAAzC;AAAyD,MAAA,IAAI,EAAE;AAA/D,oBACE,6BAAC,UAAD;AAAM,MAAA,UAAU,EAAC;AAAjB,oBACE,6BAAC,QAAD;AAAK,MAAA,KAAK,EAAEK,CAAC,GAAGZ,gBAAJ,GAAuB,SAAvB,GAAmCc;AAA/C,OACGH,GAAG,CAACI,KAAJ,CAAUC,KAAV,CAAgBC,IADnB,CADF,EAKGjB,gBAAgB,GAAGY,CAAnB,iBACC,6BAAC,oBAAD;AAAW,MAAA,KAAK,EAAE,EAAlB;AAAsB,MAAA,MAAM,EAAE,EAA9B;AAAkC,MAAA,IAAI,EAAC,UAAvC;AAAkD,MAAA,EAAE,EAAE;AAAtD,MANJ,CADF,eAWE,6BAAC,wBAAD;AAAa,MAAA,IAAI,EAAC,SAAlB;AAA4B,MAAA,MAAM,EAAE,EAApC;AAAwC,MAAA,EAAE,EAAE;AAA5C,MAXF,CAXF,CADF;AA2BD,GA5BA,CADH,CADF,EAiCGN,SAAS,CAACY,OAAV,CAAkBH,KAjCrB,CADF;AAqCD,CAjDM;AAmDP;;;;;AAGA;AACA;AACA;AACA;AACO,IAAMI,IAAyB,GAAG,SAA5BA,IAA4B;AAAA,MAAGhB,QAAH,SAAGA,QAAH;AAAA,sBAAkB,4DAAGA,QAAH,CAAlB;AAAA,CAAlC;;;AAEPJ,OAAO,CAACqB,YAAR,GAAuB;AACrBC,EAAAA,EAAE,EAAE;AADiB,CAAvB","sourcesContent":["import React from \"react\"\nimport { CheckIcon } from \"../../svgs/CheckIcon\"\nimport { ChevronIcon } from \"../../svgs/ChevronIcon\"\nimport { BaseTab, BaseTabs } from \"../BaseTabs\"\nimport { Box } from \"../Box\"\nimport { Clickable } from \"../Clickable\"\nimport { Flex } from \"../Flex\"\nimport { TabProps, TabsProps, useTabs } from \"../Tabs\"\n\nexport interface StepperProps extends TabsProps {\n  /** The step user currently is at (e.g. previous steps completed) */\n  currentStepIndex: number\n  /** Prevents the tabs from being directly clickable */\n  disableNavigation?: boolean\n}\n\n/** Stepper */\nexport const Stepper: React.FC<StepperProps> = ({\n  currentStepIndex,\n  disableNavigation,\n  initialTabIndex = 0,\n  children,\n  ...rest\n}) => {\n  const { tabs, activeTab, activeTabIndex, handleClick, ref } = useTabs({\n    children,\n    initialTabIndex,\n  })\n\n  return (\n    <>\n      <BaseTabs ref={ref} fill {...rest}>\n        {tabs.map((tab, i) => {\n          return (\n            <BaseTab\n              key={i}\n              as={Clickable}\n              ref={tab.ref as any}\n              aria-selected={i === activeTabIndex}\n              disabled={disableNavigation || i > currentStepIndex}\n              onClick={handleClick(i)}\n              active={i === activeTabIndex}\n              variant=\"sm\"\n              justifyContent=\"flex-start\"\n            >\n              <Flex alignItems=\"center\" justifyContent=\"space-between\" flex={1}>\n                <Flex alignItems=\"center\">\n                  <Box color={i > currentStepIndex ? \"black30\" : undefined}>\n                    {tab.child.props.name}\n                  </Box>\n\n                  {currentStepIndex > i && (\n                    <CheckIcon width={16} height={16} fill=\"green100\" ml={1} />\n                  )}\n                </Flex>\n\n                <ChevronIcon fill=\"black60\" height={10} ml={1} />\n              </Flex>\n            </BaseTab>\n          )\n        })}\n      </BaseTabs>\n\n      {activeTab.current.child}\n    </>\n  )\n}\n\n/** StepProps */\nexport type StepProps = TabProps\n\n/**\n * An individual step.\n * Does nothing on its own; props are dealt with inside of Steps.\n */\nexport const Step: React.FC<StepProps> = ({ children }) => <>{children}</>\n\nStepper.defaultProps = {\n  mb: 2,\n}\n"],"file":"Stepper.js"}
+{"version":3,"sources":["../../../src/elements/Stepper/Stepper.tsx"],"names":["Stepper","currentStepIndex","disableNavigation","initialTabIndex","children","rest","tabs","activeTab","activeTabIndex","handleClick","ref","map","tab","i","Clickable","undefined","child","props","name","current","Step","defaultProps","mb"],"mappings":";;;;;;;AAAA;;AACA;;AACA;;AACA;;AACA;;AACA;;AACA;;AACA;;;;;;;;;;;;AASA;AACO,IAAMA,OAA+B,GAAG,SAAlCA,OAAkC,OAMzC;AAAA,MALJC,gBAKI,QALJA,gBAKI;AAAA,MAJJC,iBAII,QAJJA,iBAII;AAAA,kCAHJC,eAGI;AAAA,MAHJA,eAGI,qCAHc,CAGd;AAAA,MAFJC,QAEI,QAFJA,QAEI;AAAA,MADDC,IACC;;AACJ,iBAA8D,mBAAQ;AACpED,IAAAA,QAAQ,EAARA,QADoE;AAEpED,IAAAA,eAAe,EAAfA;AAFoE,GAAR,CAA9D;AAAA,MAAQG,IAAR,YAAQA,IAAR;AAAA,MAAcC,SAAd,YAAcA,SAAd;AAAA,MAAyBC,cAAzB,YAAyBA,cAAzB;AAAA,MAAyCC,WAAzC,YAAyCA,WAAzC;AAAA,MAAsDC,GAAtD,YAAsDA,GAAtD;;AAKA,sBACE,yEACE,6BAAC,kBAAD;AAAU,IAAA,GAAG,EAAEA,GAAf;AAAoB,IAAA,IAAI;AAAxB,KAA6BL,IAA7B,GACGC,IAAI,CAACK,GAAL,CAAS,UAACC,GAAD,EAAMC,CAAN,EAAY;AACpB,wBACE,6BAAC,iBAAD;AACE,MAAA,GAAG,EAAEA,CADP;AAEE,MAAA,EAAE,EAAEC,oBAFN;AAGE,MAAA,GAAG,EAAEF,GAAG,CAACF,GAHX;AAIE,uBAAeG,CAAC,KAAKL,cAJvB;AAKE,MAAA,QAAQ,EAAEN,iBAAiB,IAAIW,CAAC,GAAGZ,gBALrC;AAME,MAAA,OAAO,EAAEQ,WAAW,CAACI,CAAD,CANtB;AAOE,MAAA,MAAM,EAAEA,CAAC,KAAKL,cAPhB;AAQE,MAAA,OAAO,EAAC,IARV;AASE,MAAA,cAAc,EAAC;AATjB,oBAWE,6BAAC,UAAD;AAAM,MAAA,UAAU,EAAC,QAAjB;AAA0B,MAAA,cAAc,EAAC,eAAzC;AAAyD,MAAA,IAAI,EAAE;AAA/D,oBACE,6BAAC,UAAD;AAAM,MAAA,UAAU,EAAC;AAAjB,oBACE,6BAAC,QAAD;AAAK,MAAA,KAAK,EAAEK,CAAC,GAAGZ,gBAAJ,GAAuB,SAAvB,GAAmCc;AAA/C,OACGH,GAAG,CAACI,KAAJ,CAAUC,KAAV,CAAgBC,IADnB,CADF,EAKGjB,gBAAgB,GAAGY,CAAnB,iBACC,6BAAC,sBAAD;AACE,MAAA,KAAK,EAAE,EADT;AAEE,MAAA,MAAM,EAAE,EAFV;AAGE,MAAA,KAAK,EAAC,UAHR;AAIE,MAAA,EAAE,EAAE;AAJN,MANJ,CADF,eAgBE,6BAAC,yBAAD;AAAkB,MAAA,IAAI,EAAC,SAAvB;AAAiC,MAAA,MAAM,EAAE,EAAzC;AAA6C,MAAA,EAAE,EAAE;AAAjD,MAhBF,CAXF,CADF;AAgCD,GAjCA,CADH,CADF,EAsCGN,SAAS,CAACY,OAAV,CAAkBH,KAtCrB,CADF;AA0CD,CAtDM;AAwDP;;;;;AAGA;AACA;AACA;AACA;AACO,IAAMI,IAAyB,GAAG,SAA5BA,IAA4B;AAAA,MAAGhB,QAAH,SAAGA,QAAH;AAAA,sBAAkB,4DAAGA,QAAH,CAAlB;AAAA,CAAlC;;;AAEPJ,OAAO,CAACqB,YAAR,GAAuB;AACrBC,EAAAA,EAAE,EAAE;AADiB,CAAvB","sourcesContent":["import React from \"react\"\nimport CheckmarkIcon from \"@artsy/icons/CheckmarkIcon\"\nimport ChevronRightIcon from \"@artsy/icons/ChevronRightIcon\"\nimport { BaseTab, BaseTabs } from \"../BaseTabs\"\nimport { Box } from \"../Box\"\nimport { Clickable } from \"../Clickable\"\nimport { Flex } from \"../Flex\"\nimport { TabProps, TabsProps, useTabs } from \"../Tabs\"\n\nexport interface StepperProps extends TabsProps {\n  /** The step user currently is at (e.g. previous steps completed) */\n  currentStepIndex: number\n  /** Prevents the tabs from being directly clickable */\n  disableNavigation?: boolean\n}\n\n/** Stepper */\nexport const Stepper: React.FC<StepperProps> = ({\n  currentStepIndex,\n  disableNavigation,\n  initialTabIndex = 0,\n  children,\n  ...rest\n}) => {\n  const { tabs, activeTab, activeTabIndex, handleClick, ref } = useTabs({\n    children,\n    initialTabIndex,\n  })\n\n  return (\n    <>\n      <BaseTabs ref={ref} fill {...rest}>\n        {tabs.map((tab, i) => {\n          return (\n            <BaseTab\n              key={i}\n              as={Clickable}\n              ref={tab.ref as any}\n              aria-selected={i === activeTabIndex}\n              disabled={disableNavigation || i > currentStepIndex}\n              onClick={handleClick(i)}\n              active={i === activeTabIndex}\n              variant=\"sm\"\n              justifyContent=\"flex-start\"\n            >\n              <Flex alignItems=\"center\" justifyContent=\"space-between\" flex={1}>\n                <Flex alignItems=\"center\">\n                  <Box color={i > currentStepIndex ? \"black30\" : undefined}>\n                    {tab.child.props.name}\n                  </Box>\n\n                  {currentStepIndex > i && (\n                    <CheckmarkIcon\n                      width={16}\n                      height={16}\n                      color=\"green100\"\n                      ml={1}\n                    />\n                  )}\n                </Flex>\n\n                <ChevronRightIcon fill=\"black60\" height={10} ml={1} />\n              </Flex>\n            </BaseTab>\n          )\n        })}\n      </BaseTabs>\n\n      {activeTab.current.child}\n    </>\n  )\n}\n\n/** StepProps */\nexport type StepProps = TabProps\n\n/**\n * An individual step.\n * Does nothing on its own; props are dealt with inside of Steps.\n */\nexport const Step: React.FC<StepProps> = ({ children }) => <>{children}</>\n\nStepper.defaultProps = {\n  mb: 2,\n}\n"],"file":"Stepper.js"}

package/dist/elements/Tabs/Tabs.d.ts

@@ -13,8 +13,6 @@ export interface TabInfo extends TabProps {
     data: any;
 }
 export interface TabsProps extends BaseTabsProps {
-    /** Space or visual divider between tabs */
-    separator?: JSX.Element;
     /** Index of the Tab that should be pre-selected */
     initialTabIndex?: number;
     /** @deprecated */

package/dist/elements/Tabs/Tabs.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/elements/Tabs/Tabs.tsx"],"names":["useTabs","children","initialTabIndex","onChange","tabs","map","child","ref","activeTabIndex","setActiveTabIndex","activeTab","current","tab","position","offsetLeft","scrollTo","left","behavior","handleClick","index","tabIndex","name","props","data","Tabs","rest","i","defaultProps","mb","Tab"],"mappings":"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","sourcesContent":["import React, {\n  createRef,\n  useCallback,\n  useEffect,\n  useMemo,\n  useRef,\n  useState,\n} from \"react\"\nimport { flattenChildren } from \"../../helpers/flattenChildren\"\nimport { useUpdateEffect } from \"../../utils/useUpdateEffect\"\nimport { BaseTabs, BaseTabsProps } from \"../BaseTabs\"\nimport { BaseTab } from \"../BaseTabs\"\nimport { Clickable } from \"../Clickable\"\n\nexport interface TabLike extends JSX.Element {\n  props: TabProps\n}\n\nexport interface TabInfo extends TabProps {\n  /** Index of the newly selected Tab */\n  tabIndex: number\n  /**\n   * Arbitrary data that can be associated with a Tab.\n   * Will be passed to the parent <Tabs>'s onChange handler.\n   */\n  data: any\n}\n\nexport interface TabsProps extends BaseTabsProps {\n  /** Space or visual divider between tabs */\n  separator?: JSX.Element\n  /** Index of the Tab that should be pre-selected */\n  initialTabIndex?: number\n  /** @deprecated */\n  autoScroll?: boolean\n  /** Function that will be called when a new Tab is selected */\n  onChange?: (tabInfo?: TabInfo) => void\n}\n\n/** Tabs functionality */\nexport const useTabs = ({\n  children,\n  initialTabIndex = 0,\n  onChange,\n}: TabsProps) => {\n  const tabs = useMemo(\n    () =>\n      flattenChildren<TabLike>(children).map((child) => ({\n        child,\n        ref: createRef<HTMLButtonElement | null>(),\n      })),\n    [children]\n  )\n\n  const [activeTabIndex, setActiveTabIndex] = useState<number>(initialTabIndex)\n\n  // Wraps active tab in a ref to prevent re-rendering.\n  // This means that we need to update the active tab before the index state change\n  // to catch the re-render.\n  const activeTab = useRef(tabs[activeTabIndex])\n\n  // If the `initialTabIndex` changes; update the active one\n  useUpdateEffect(() => {\n    activeTab.current = tabs[initialTabIndex]\n    setActiveTabIndex(initialTabIndex)\n  }, [initialTabIndex, tabs])\n\n  // Ref of the tabs viewport\n  const ref = useRef<HTMLDivElement | null>(null)\n\n  // Scroll to active tab when `activeTabIndex` changes\n  useEffect(() => {\n    if (!ref.current) return\n    const tab = activeTab.current.ref.current\n    if (!tab) return\n    const position = tab.offsetLeft\n    ref.current.scrollTo?.({ left: position, behavior: \"smooth\" })\n  }, [activeTabIndex])\n\n  const handleClick = useCallback(\n    (index: number) => {\n      return () => {\n        if (index === activeTabIndex) return\n\n        activeTab.current = tabs[index]\n        setActiveTabIndex(index)\n\n        if (!onChange) return\n\n        onChange({\n          tabIndex: index,\n          name: tabs[index].child.props.name,\n          data: tabs[index].child.props.data ?? {},\n        })\n      }\n    },\n    [activeTabIndex, onChange, tabs]\n  )\n\n  return {\n    activeTab,\n    activeTabIndex,\n    handleClick,\n    ref,\n    tabs,\n  }\n}\n\n/** A tab bar navigation component */\nexport const Tabs: React.FC<TabsProps> = ({\n  children,\n  initialTabIndex = 0,\n  onChange,\n  ...rest\n}) => {\n  const { tabs, activeTab, activeTabIndex, handleClick, ref } = useTabs({\n    children,\n    initialTabIndex,\n    onChange,\n  })\n\n  return (\n    <>\n      <BaseTabs ref={ref} {...rest}>\n        {tabs.map((tab, i) => {\n          return (\n            <Clickable\n              key={i}\n              ref={tab.ref as any}\n              aria-selected={i === activeTabIndex}\n              onClick={handleClick(i)}\n              flex={1}\n            >\n              <BaseTab active={i === activeTabIndex} variant=\"sm\">\n                <span>{tab.child.props.name}</span>\n              </BaseTab>\n            </Clickable>\n          )\n        })}\n      </BaseTabs>\n\n      {activeTab.current.child}\n    </>\n  )\n}\n\nTabs.defaultProps = {\n  mb: 2,\n}\n\nexport interface TabProps {\n  /** Display name of the Tab */\n  name: string | JSX.Element\n  /**\n   * Arbitrary data that can be associated with a Tab.\n   * Will be passed to the parent <Tabs>'s onChange handler.\n   */\n  data?: any\n}\n\n/**\n * An individual tab.\n * Does nothing on its own; props are dealt with inside of Tabs.\n */\nexport const Tab: React.FC<TabProps> = ({ children }) => <>{children}</>\n"],"file":"Tabs.js"}
+{"version":3,"sources":["../../../src/elements/Tabs/Tabs.tsx"],"names":["useTabs","children","initialTabIndex","onChange","tabs","map","child","ref","activeTabIndex","setActiveTabIndex","activeTab","current","tab","position","offsetLeft","scrollTo","left","behavior","handleClick","index","tabIndex","name","props","data","Tabs","rest","i","defaultProps","mb","Tab"],"mappings":"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","sourcesContent":["import React, {\n  createRef,\n  useCallback,\n  useEffect,\n  useMemo,\n  useRef,\n  useState,\n} from \"react\"\nimport { flattenChildren } from \"../../helpers/flattenChildren\"\nimport { useUpdateEffect } from \"../../utils/useUpdateEffect\"\nimport { BaseTabs, BaseTabsProps } from \"../BaseTabs\"\nimport { BaseTab } from \"../BaseTabs\"\nimport { Clickable } from \"../Clickable\"\n\nexport interface TabLike extends JSX.Element {\n  props: TabProps\n}\n\nexport interface TabInfo extends TabProps {\n  /** Index of the newly selected Tab */\n  tabIndex: number\n  /**\n   * Arbitrary data that can be associated with a Tab.\n   * Will be passed to the parent <Tabs>'s onChange handler.\n   */\n  data: any\n}\n\nexport interface TabsProps extends BaseTabsProps {\n  /** Index of the Tab that should be pre-selected */\n  initialTabIndex?: number\n  /** @deprecated */\n  autoScroll?: boolean\n  /** Function that will be called when a new Tab is selected */\n  onChange?: (tabInfo?: TabInfo) => void\n}\n\n/** Tabs functionality */\nexport const useTabs = ({\n  children,\n  initialTabIndex = 0,\n  onChange,\n}: TabsProps) => {\n  const tabs = useMemo(\n    () =>\n      flattenChildren<TabLike>(children).map((child) => ({\n        child,\n        ref: createRef<HTMLButtonElement | null>(),\n      })),\n    [children]\n  )\n\n  const [activeTabIndex, setActiveTabIndex] = useState<number>(initialTabIndex)\n\n  // Wraps active tab in a ref to prevent re-rendering.\n  // This means that we need to update the active tab before the index state change\n  // to catch the re-render.\n  const activeTab = useRef(tabs[activeTabIndex])\n\n  // If the `initialTabIndex` changes; update the active one\n  useUpdateEffect(() => {\n    activeTab.current = tabs[initialTabIndex]\n    setActiveTabIndex(initialTabIndex)\n  }, [initialTabIndex, tabs])\n\n  // Ref of the tabs viewport\n  const ref = useRef<HTMLDivElement | null>(null)\n\n  // Scroll to active tab when `activeTabIndex` changes\n  useEffect(() => {\n    if (!ref.current) return\n    const tab = activeTab.current.ref.current\n    if (!tab) return\n    const position = tab.offsetLeft\n    ref.current.scrollTo?.({ left: position, behavior: \"smooth\" })\n  }, [activeTabIndex])\n\n  const handleClick = useCallback(\n    (index: number) => {\n      return () => {\n        if (index === activeTabIndex) return\n\n        activeTab.current = tabs[index]\n        setActiveTabIndex(index)\n\n        if (!onChange) return\n\n        onChange({\n          tabIndex: index,\n          name: tabs[index].child.props.name,\n          data: tabs[index].child.props.data ?? {},\n        })\n      }\n    },\n    [activeTabIndex, onChange, tabs]\n  )\n\n  return {\n    activeTab,\n    activeTabIndex,\n    handleClick,\n    ref,\n    tabs,\n  }\n}\n\n/** A tab bar navigation component */\nexport const Tabs: React.FC<TabsProps> = ({\n  children,\n  initialTabIndex = 0,\n  onChange,\n  ...rest\n}) => {\n  const { tabs, activeTab, activeTabIndex, handleClick, ref } = useTabs({\n    children,\n    initialTabIndex,\n    onChange,\n  })\n\n  return (\n    <>\n      <BaseTabs ref={ref} {...rest}>\n        {tabs.map((tab, i) => {\n          return (\n            <Clickable\n              key={i}\n              ref={tab.ref as any}\n              aria-selected={i === activeTabIndex}\n              onClick={handleClick(i)}\n              flex={1}\n            >\n              <BaseTab active={i === activeTabIndex} variant=\"sm\">\n                <span>{tab.child.props.name}</span>\n              </BaseTab>\n            </Clickable>\n          )\n        })}\n      </BaseTabs>\n\n      {activeTab.current.child}\n    </>\n  )\n}\n\nTabs.defaultProps = {\n  mb: 2,\n}\n\nexport interface TabProps {\n  /** Display name of the Tab */\n  name: string | JSX.Element\n  /**\n   * Arbitrary data that can be associated with a Tab.\n   * Will be passed to the parent <Tabs>'s onChange handler.\n   */\n  data?: any\n}\n\n/**\n * An individual tab.\n * Does nothing on its own; props are dealt with inside of Tabs.\n */\nexport const Tab: React.FC<TabProps> = ({ children }) => <>{children}</>\n"],"file":"Tabs.js"}

package/dist/elements/Tabs/Tabs.story.js

@@ -13,8 +13,6 @@ var _react = _interopRequireWildcard(require("react"));
 
 var _storybookStates = require("storybook-states");
 
-var _svgs = require("../../svgs");
-
 var _Sup = require("../Sup");
 
 var _ = require("./");
@@ -50,12 +48,6 @@ var Default = function Default() {
   return /*#__PURE__*/_react.default.createElement(_storybookStates.States, {
     states: [{}, {
       initialTabIndex: 2
-    }, {
-      separator: /*#__PURE__*/_react.default.createElement(_svgs.ChevronIcon, {
-        mx: 2,
-        fill: "black30",
-        width: "12px"
-      })
     }, {
       justifyContent: "center"
     }]

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/elements/Tabs/Tabs.story.tsx"],"names":["title","Default","initialTabIndex","separator","justifyContent","WithData","data","setData","name","JSON","stringify","Counts","ConditionalTabs","AutoScrolling","max","index","handleNext","interval","setInterval","clearInterval","story","parameters","chromatic","disable","InitialAutoScroll","key","setKey","Cached","count","setCount","prevCount"],"mappings":"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","sourcesContent":["import { action } from \"@storybook/addon-actions\"\nimport React, { useEffect, useState } from \"react\"\nimport { States } from \"storybook-states\"\nimport { ChevronIcon } from \"../../svgs\"\nimport { Sup } from \"../Sup\"\nimport { Tab, Tabs, TabsProps } from \"./\"\nimport { Box } from \"../Box\"\nimport { useCursor } from \"use-cursor\"\nimport { Button } from \"../Button\"\n\nexport default {\n  title: \"Components/Tabs\",\n}\n\nexport const Default = () => {\n  return (\n    <States<Partial<TabsProps>>\n      states={[\n        {},\n        { initialTabIndex: 2 },\n        { separator: <ChevronIcon mx={2} fill=\"black30\" width=\"12px\" /> },\n        { justifyContent: \"center\" },\n      ]}\n    >\n      <Tabs onChange={action(\"onChange\")}>\n        <Tab name=\"Overview\">Overview panel</Tab>\n        <Tab name=\"Works for sale\">Works for sale panel</Tab>\n        <Tab name=\"CV\">CV panel</Tab>\n        <Tab name=\"Auction results\">Auction results panel</Tab>\n      </Tabs>\n    </States>\n  )\n}\n\nexport const WithData = () => {\n  const [data, setData] = useState({})\n  return (\n    <>\n      <Tabs onChange={setData as any}>\n        <Tab name=\"Overview\" data={{ name: \"Overview\" }}>\n          Overview panel\n        </Tab>\n\n        <Tab name=\"Works for sale\" data={{ name: \"Works for sale\" }}>\n          Works for sale panel\n        </Tab>\n\n        <Tab name=\"CV\" data={{ name: \"CV\" }}>\n          CV panel\n        </Tab>\n\n        <Tab name=\"Auction results\" data={{ name: \"Auction results\" }}>\n          Auction results panel\n        </Tab>\n\n        <Tab name=\"No data\">No data panel</Tab>\n      </Tabs>\n\n      <pre>{JSON.stringify(data, null, 2)}</pre>\n    </>\n  )\n}\n\nexport const Counts = () => {\n  return (\n    <Tabs onChange={action(\"onChange\")}>\n      <Tab\n        name={\n          <>\n            Overview <Sup>123</Sup>\n          </>\n        }\n      />\n      <Tab\n        name={\n          <>\n            Works for sale <Sup>123</Sup>\n          </>\n        }\n      />\n      <Tab name=\"CV\" />\n      <Tab\n        name={\n          <>\n            Auction results <Sup>123</Sup>\n          </>\n        }\n      />\n    </Tabs>\n  )\n}\n\nexport const ConditionalTabs = () => {\n  return (\n    <Tabs onChange={action(\"onChange\")}>\n      <Tab name=\"First\">First</Tab>\n      {false && <Tab name=\"Second\">Second</Tab>}\n      <Tab name=\"Third\">Third</Tab>\n    </Tabs>\n  )\n}\n\nexport const AutoScrolling = () => {\n  const { index: initialTabIndex, handleNext } = useCursor({ max: 15 })\n\n  useEffect(() => {\n    const interval = setInterval(handleNext, 500)\n    return () => clearInterval(interval)\n  }, [handleNext])\n\n  return (\n    <>\n      <Tabs initialTabIndex={initialTabIndex} onChange={action(\"onChange\")}>\n        <Tab name=\"First\">First</Tab>\n        <Tab name=\"Second\">Second</Tab>\n        <Tab name=\"Third\">Third</Tab>\n        <Tab name=\"Fourth\">Fourth</Tab>\n        <Tab name=\"Fifth\">Fifth</Tab>\n        <Tab name=\"Sixth\">Sixth</Tab>\n        <Tab name=\"Seventh\">Seventh</Tab>\n        <Tab name=\"Eighth\">Eighth</Tab>\n        <Tab name=\"Nineth\">Nineth</Tab>\n        <Tab name=\"Tenth\">Tenth</Tab>\n        <Tab name=\"Eleventh\">Eleventh</Tab>\n        <Tab name=\"Twelveth\">Twelveth</Tab>\n        <Tab name=\"Thirteenth\">Thirteenth</Tab>\n        <Tab name=\"Fourteenth\">Fourteenth</Tab>\n        <Tab name=\"Fifteenth\">Fifteenth</Tab>\n      </Tabs>\n\n      <pre>{JSON.stringify({ initialTabIndex })}</pre>\n    </>\n  )\n}\n\nAutoScrolling.story = {\n  parameters: { chromatic: { disable: true } },\n}\n\nexport const InitialAutoScroll = () => {\n  const [key, setKey] = useState(1)\n\n  useEffect(() => {\n    const interval = setInterval(() => {\n      setKey((key) => key + 1)\n    }, 500)\n\n    return () => clearInterval(interval)\n  }, [])\n\n  return (\n    <>\n      <Box bg=\"black10\" height={1000} p={2}>\n        The vertical scroll of this page should be at the top.\n        <br />\n        Scroll down to see the tabs.\n        <br />\n        Render: #{key}\n      </Box>\n\n      <Tabs onChange={action(\"onChange\")} initialTabIndex={14}>\n        <Tab name=\"First\">First</Tab>\n        <Tab name=\"Second\">Second</Tab>\n        <Tab name=\"Third\">Third</Tab>\n        <Tab name=\"Fourth\">Fourth</Tab>\n        <Tab name=\"Fifth\">Fifth</Tab>\n        <Tab name=\"Sixth\">Sixth</Tab>\n        <Tab name=\"Seventh\">Seventh</Tab>\n        <Tab name=\"Eighth\">Eighth</Tab>\n        <Tab name=\"Nineth\">Nineth</Tab>\n        <Tab name=\"Tenth\">Tenth</Tab>\n        <Tab name=\"Eleventh\">Eleventh</Tab>\n        <Tab name=\"Twelveth\">Twelveth</Tab>\n        <Tab name=\"Thirteenth\">Thirteenth</Tab>\n        <Tab name=\"Fourteenth\">Fourteenth</Tab>\n        <Tab name=\"Fifteenth\">\n          This tab should be active &amp; visible on mount.\n        </Tab>\n      </Tabs>\n\n      <Box bg=\"black10\" height={1000} />\n    </>\n  )\n}\n\nInitialAutoScroll.story = {\n  parameters: { chromatic: { disable: true } },\n}\n\n// FIXME: Currently renders one step behind\nexport const Cached = () => {\n  const [count, setCount] = useState(1)\n\n  return (\n    <>\n      <Button\n        variant=\"secondaryBlack\"\n        size=\"small\"\n        mb={1}\n        onClick={() => {\n          setCount((prevCount) => prevCount + 1)\n        }}\n      >\n        Increment count — count: {count}\n      </Button>\n\n      <Tabs>\n        <Tab name=\"First\">First — count: {count}</Tab>\n        <Tab name=\"Second\">Second — count: {count}</Tab>\n        <Tab name=\"Third\">Third — count: {count}</Tab>\n      </Tabs>\n    </>\n  )\n}\n"],"file":"Tabs.story.js"}
+{"version":3,"sources":["../../../src/elements/Tabs/Tabs.story.tsx"],"names":["title","Default","initialTabIndex","justifyContent","WithData","data","setData","name","JSON","stringify","Counts","ConditionalTabs","AutoScrolling","max","index","handleNext","interval","setInterval","clearInterval","story","parameters","chromatic","disable","InitialAutoScroll","key","setKey","Cached","count","setCount","prevCount"],"mappings":"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","sourcesContent":["import { action } from \"@storybook/addon-actions\"\nimport React, { useEffect, useState } from \"react\"\nimport { States } from \"storybook-states\"\nimport { Sup } from \"../Sup\"\nimport { Tab, Tabs, TabsProps } from \"./\"\nimport { Box } from \"../Box\"\nimport { useCursor } from \"use-cursor\"\nimport { Button } from \"../Button\"\n\nexport default {\n  title: \"Components/Tabs\",\n}\n\nexport const Default = () => {\n  return (\n    <States<Partial<TabsProps>>\n      states={[{}, { initialTabIndex: 2 }, { justifyContent: \"center\" }]}\n    >\n      <Tabs onChange={action(\"onChange\")}>\n        <Tab name=\"Overview\">Overview panel</Tab>\n        <Tab name=\"Works for sale\">Works for sale panel</Tab>\n        <Tab name=\"CV\">CV panel</Tab>\n        <Tab name=\"Auction results\">Auction results panel</Tab>\n      </Tabs>\n    </States>\n  )\n}\n\nexport const WithData = () => {\n  const [data, setData] = useState({})\n  return (\n    <>\n      <Tabs onChange={setData as any}>\n        <Tab name=\"Overview\" data={{ name: \"Overview\" }}>\n          Overview panel\n        </Tab>\n\n        <Tab name=\"Works for sale\" data={{ name: \"Works for sale\" }}>\n          Works for sale panel\n        </Tab>\n\n        <Tab name=\"CV\" data={{ name: \"CV\" }}>\n          CV panel\n        </Tab>\n\n        <Tab name=\"Auction results\" data={{ name: \"Auction results\" }}>\n          Auction results panel\n        </Tab>\n\n        <Tab name=\"No data\">No data panel</Tab>\n      </Tabs>\n\n      <pre>{JSON.stringify(data, null, 2)}</pre>\n    </>\n  )\n}\n\nexport const Counts = () => {\n  return (\n    <Tabs onChange={action(\"onChange\")}>\n      <Tab\n        name={\n          <>\n            Overview <Sup>123</Sup>\n          </>\n        }\n      />\n      <Tab\n        name={\n          <>\n            Works for sale <Sup>123</Sup>\n          </>\n        }\n      />\n      <Tab name=\"CV\" />\n      <Tab\n        name={\n          <>\n            Auction results <Sup>123</Sup>\n          </>\n        }\n      />\n    </Tabs>\n  )\n}\n\nexport const ConditionalTabs = () => {\n  return (\n    <Tabs onChange={action(\"onChange\")}>\n      <Tab name=\"First\">First</Tab>\n      {false && <Tab name=\"Second\">Second</Tab>}\n      <Tab name=\"Third\">Third</Tab>\n    </Tabs>\n  )\n}\n\nexport const AutoScrolling = () => {\n  const { index: initialTabIndex, handleNext } = useCursor({ max: 15 })\n\n  useEffect(() => {\n    const interval = setInterval(handleNext, 500)\n    return () => clearInterval(interval)\n  }, [handleNext])\n\n  return (\n    <>\n      <Tabs initialTabIndex={initialTabIndex} onChange={action(\"onChange\")}>\n        <Tab name=\"First\">First</Tab>\n        <Tab name=\"Second\">Second</Tab>\n        <Tab name=\"Third\">Third</Tab>\n        <Tab name=\"Fourth\">Fourth</Tab>\n        <Tab name=\"Fifth\">Fifth</Tab>\n        <Tab name=\"Sixth\">Sixth</Tab>\n        <Tab name=\"Seventh\">Seventh</Tab>\n        <Tab name=\"Eighth\">Eighth</Tab>\n        <Tab name=\"Nineth\">Nineth</Tab>\n        <Tab name=\"Tenth\">Tenth</Tab>\n        <Tab name=\"Eleventh\">Eleventh</Tab>\n        <Tab name=\"Twelveth\">Twelveth</Tab>\n        <Tab name=\"Thirteenth\">Thirteenth</Tab>\n        <Tab name=\"Fourteenth\">Fourteenth</Tab>\n        <Tab name=\"Fifteenth\">Fifteenth</Tab>\n      </Tabs>\n\n      <pre>{JSON.stringify({ initialTabIndex })}</pre>\n    </>\n  )\n}\n\nAutoScrolling.story = {\n  parameters: { chromatic: { disable: true } },\n}\n\nexport const InitialAutoScroll = () => {\n  const [key, setKey] = useState(1)\n\n  useEffect(() => {\n    const interval = setInterval(() => {\n      setKey((key) => key + 1)\n    }, 500)\n\n    return () => clearInterval(interval)\n  }, [])\n\n  return (\n    <>\n      <Box bg=\"black10\" height={1000} p={2}>\n        The vertical scroll of this page should be at the top.\n        <br />\n        Scroll down to see the tabs.\n        <br />\n        Render: #{key}\n      </Box>\n\n      <Tabs onChange={action(\"onChange\")} initialTabIndex={14}>\n        <Tab name=\"First\">First</Tab>\n        <Tab name=\"Second\">Second</Tab>\n        <Tab name=\"Third\">Third</Tab>\n        <Tab name=\"Fourth\">Fourth</Tab>\n        <Tab name=\"Fifth\">Fifth</Tab>\n        <Tab name=\"Sixth\">Sixth</Tab>\n        <Tab name=\"Seventh\">Seventh</Tab>\n        <Tab name=\"Eighth\">Eighth</Tab>\n        <Tab name=\"Nineth\">Nineth</Tab>\n        <Tab name=\"Tenth\">Tenth</Tab>\n        <Tab name=\"Eleventh\">Eleventh</Tab>\n        <Tab name=\"Twelveth\">Twelveth</Tab>\n        <Tab name=\"Thirteenth\">Thirteenth</Tab>\n        <Tab name=\"Fourteenth\">Fourteenth</Tab>\n        <Tab name=\"Fifteenth\">\n          This tab should be active &amp; visible on mount.\n        </Tab>\n      </Tabs>\n\n      <Box bg=\"black10\" height={1000} />\n    </>\n  )\n}\n\nInitialAutoScroll.story = {\n  parameters: { chromatic: { disable: true } },\n}\n\n// FIXME: Currently renders one step behind\nexport const Cached = () => {\n  const [count, setCount] = useState(1)\n\n  return (\n    <>\n      <Button\n        variant=\"secondaryBlack\"\n        size=\"small\"\n        mb={1}\n        onClick={() => {\n          setCount((prevCount) => prevCount + 1)\n        }}\n      >\n        Increment count — count: {count}\n      </Button>\n\n      <Tabs>\n        <Tab name=\"First\">First — count: {count}</Tab>\n        <Tab name=\"Second\">Second — count: {count}</Tab>\n        <Tab name=\"Third\">Third — count: {count}</Tab>\n      </Tabs>\n    </>\n  )\n}\n"],"file":"Tabs.story.js"}

package/dist/elements/Tooltip/Tooltip.story.js

@@ -13,7 +13,7 @@ var _react = _interopRequireWildcard(require("react"));
 
 var _storybookStates = require("storybook-states");
 
-var _svgs = require("../../svgs");
+var _HelpIcon = _interopRequireDefault(require("@artsy/icons/HelpIcon"));
 
 var _usePosition = require("../../utils/usePosition");
 
@@ -33,6 +33,8 @@ var _Tooltip = require("./Tooltip");
 
 var _excluded = ["children"];
 
+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; }
@@ -174,7 +176,7 @@ var IconExample = function IconExample() {
     style: {
       lineHeight: 0
     }
-  }, /*#__PURE__*/_react.default.createElement(_svgs.HelpIcon, {
+  }, /*#__PURE__*/_react.default.createElement(_HelpIcon.default, {
     ml: 0.5
   }))));
 };

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/elements/Tooltip/Tooltip.story.tsx"],"names":["CONTENT","title","Default","placement","width","visible","pointer","variant","children","textAlign","offset","rest","_Clickable","story","parameters","chromatic","disable","Placement","Object","keys","POSITION","map","props","JSON","stringify","IconExample","lineHeight","ExternalControl","setVisible","PointerCentering","setPlacement","size","setSize","e","parseInt","target","value"],"mappings":";;;;;;;;;AAAA;;AACA;;AACA;;AACA;;AACA;;AACA;;AACA;;AACA;;AACA;;AACA;;AACA;;AACA;;;;;;;;;;;;;;;;;;;;;;;;;;AAEA,IAAMA,OAAO,GAAG,0DAAhB;eAEe;AACbC,EAAAA,KAAK,EAAE;AADM,C;;;AAIR,IAAMC,OAAO,GAAG,SAAVA,OAAU,GAAM;AAC3B,sBACE,6BAAC,uBAAD;AACE,IAAA,MAAM,EAAE,CACN;AAAEC,MAAAA,SAAS,EAAE;AAAb,KADM,EAEN;AAAEA,MAAAA,SAAS,EAAE,QAAb;AAAuBC,MAAAA,KAAK,EAAE;AAA9B,KAFM,EAGN;AAAED,MAAAA,SAAS,EAAE,QAAb;AAAuBE,MAAAA,OAAO,EAAE,IAAhC;AAAsCC,MAAAA,OAAO,EAAE;AAA/C,KAHM,EAIN;AACEC,MAAAA,OAAO,EAAE,aADX;AAEEJ,MAAAA,SAAS,EAAE,QAFb;AAGEE,MAAAA,OAAO,EAAE,IAHX;AAIEC,MAAAA,OAAO,EAAE;AAJX,KAJM,EAUN;AACED,MAAAA,OAAO,EAAE,KADX;AAEEG,MAAAA,QAAQ,eAAE;AAFZ,KAVM,EAcN;AACEH,MAAAA,OAAO,EAAE,IADX;AAEEI,MAAAA,SAAS,EAAE;AAFb,KAdM,EAkBN;AACEJ,MAAAA,OAAO,EAAE,IADX;AAEEC,MAAAA,OAAO,EAAE,IAFX;AAGEI,MAAAA,MAAM,EAAE,CAAC;AAHX,KAlBM;AADV,KA0BG;AAAA,QAAGF,QAAH,QAAGA,QAAH;AAAA,QAAgBG,IAAhB;;AAAA,wBACC,6BAAC,gBAAD;AAAS,MAAA,OAAO,EAAEX;AAAlB,OAA+BW,IAA/B,gBACE,6BAAC,UAAD;AACE,MAAA,OAAO,EAAC,IADV;AAEE,MAAA,SAAS,EAAC,QAFZ;AAGE,MAAA,CAAC,EAAE,CAHL;AAIE,MAAA,EAAE,EAAC,UAJL;AAKE,MAAA,KAAK,EAAC;AALR,OAOGH,QAPH,aAOGA,QAPH,cAOGA,QAPH,GAOe,yBAPf,CADF,CADD;AAAA,GA1BH,CADF;AA0CD,CA3CM;;;AAAMN,O;;AA6CN,IAAMU,UAAU,GAAG,SAAbA,UAAa,GAAM;AAC9B,sBACE,6BAAC,uBAAD;AAA+B,IAAA,MAAM,EAAE,CAAC,EAAD;AAAvC,kBACE,6BAAC,gBAAD;AAAS,IAAA,OAAO,EAAEZ;AAAlB,kBACE,6BAAC,qBAAD;AAAW,IAAA,OAAO,EAAE,0BAAO,SAAP;AAApB,kBACE,6BAAC,UAAD;AACE,IAAA,OAAO,EAAC,IADV;AAEE,IAAA,SAAS,EAAC,QAFZ;AAGE,IAAA,CAAC,EAAE,CAHL;AAIE,IAAA,EAAE,EAAC,UAJL;AAKE,IAAA,KAAK,EAAC;AALR,gDADF,CADF,CADF,CADF;AAiBD,CAlBM;;;AAAMY,U;AAoBbA,UAAU,CAACC,KAAX,GAAmB;AACjBC,EAAAA,UAAU,EAAE;AAAEC,IAAAA,SAAS,EAAE;AAAEC,MAAAA,OAAO,EAAE;AAAX;AAAb;AADK,CAAnB;;AAIO,IAAMC,SAAS,GAAG,SAAZA,SAAY,GAAM;AAC7B,sBACE,6BAAC,uBAAD;AACE,IAAA,MAAM,EAAEC,MAAM,CAACC,IAAP,CAAYC,qBAAZ,EAAsBC,GAAtB,CAA0B,UAAClB,SAAD;AAAA,aAAgB;AAChDA,QAAAA,SAAS,EAAEA;AADqC,OAAhB;AAAA,KAA1B;AADV,KAKG,UAACmB,KAAD,EAAW;AACV,wBACE,6BAAC,gBAAD;AACE,MAAA,OAAO,EAAEC,IAAI,CAACC,SAAL,CAAeF,KAAf,CADX;AAEE,MAAA,OAAO,EAAC,aAFV;AAGE,MAAA,OAAO,MAHT;AAIE,MAAA,OAAO;AAJT,OAKMA,KALN,gBAOE,6BAAC,UAAD;AACE,MAAA,OAAO,EAAC,IADV;AAEE,MAAA,SAAS,EAAC,QAFZ;AAGE,MAAA,CAAC,EAAE,CAHL;AAIE,MAAA,QAAQ,EAAC,KAJX;AAKE,MAAA,EAAE,EAAC,MALL;AAME,MAAA,EAAE,EAAC;AANL,OAQGC,IAAI,CAACC,SAAL,CAAeF,KAAf,CARH,CAPF,CADF;AAoBD,GA1BH,CADF;AA8BD,CA/BM;;;AAAML,S;;AAiCN,IAAMQ,WAAW,GAAG,SAAdA,WAAc,GAAM;AAC/B,sBACE,6BAAC,UAAD;AAAM,IAAA,OAAO,EAAC,IAAd;AAAmB,IAAA,OAAO,EAAC,MAA3B;AAAkC,IAAA,UAAU,EAAC,QAA7C;AAAsD,IAAA,UAAU,EAAE;AAAlE,0DACoD,GADpD,eAEE,6BAAC,gBAAD;AAAS,IAAA,OAAO,EAAEzB,OAAlB;AAA2B,IAAA,SAAS,EAAC;AAArC,kBAEE,6BAAC,QAAD;AAAK,IAAA,EAAE,EAAC,MAAR;AAAe,IAAA,KAAK,EAAE;AAAE0B,MAAAA,UAAU,EAAE;AAAd;AAAtB,kBACE,6BAAC,cAAD;AAAU,IAAA,EAAE,EAAE;AAAd,IADF,CAFF,CAFF,CADF;AAWD,CAZM;;;AAAMD,W;;AAcN,IAAME,eAAe,GAAG,SAAlBA,eAAkB,GAAM;AACnC,kBAA8B,qBAAS,KAAT,CAA9B;AAAA;AAAA,MAAOtB,OAAP;AAAA,MAAgBuB,UAAhB;;AAEA,sBACE,yEACE,6BAAC,gBAAD;AACE,IAAA,OAAO,EAAE5B,OADX;AAEE,IAAA,OAAO,EAAEK,OAFX;AAGE,IAAA,OAAO,MAHT;AAIE,IAAA,OAAO,EAAC;AAJV,kBAME,6BAAC,cAAD;AACE,IAAA,OAAO,EAAC,gBADV;AAEE,IAAA,OAAO,EAAE,mBAAM;AACbuB,MAAAA,UAAU,CAAC,UAACvB,OAAD;AAAA,eAAa,CAACA,OAAd;AAAA,OAAD,CAAV;AACD;AAJH,KAMGA,OAAO,GAAG,uBAAH,GAA6B,uBANvC,CANF,CADF,CADF;AAmBD,CAtBM;;;;AAwBA,IAAMwB,gBAAgB,GAAG,SAAnBA,gBAAmB,GAAM;AACpC,mBAAkC,qBAAmB,KAAnB,CAAlC;AAAA;AAAA,MAAO1B,SAAP;AAAA,MAAkB2B,YAAlB;;AACA,mBAAwB,qBAAS,EAAT,CAAxB;AAAA;AAAA,MAAOC,IAAP;AAAA,MAAaC,OAAb;;AAEA,sBACE,4DACGd,MAAM,CAACC,IAAP,CAAYC,qBAAZ,EAAsBC,GAAtB,CAA0B,UAAClB,SAAD,EAAe;AACxC,wBACE,6BAAC,cAAD;AACE,MAAA,GAAG,EAAEA,SADP;AAEE,MAAA,EAAE,EAAE,CAFN;AAGE,MAAA,EAAE,EAAE,CAHN;AAIE,MAAA,OAAO,EAAC,gBAJV;AAKE,MAAA,IAAI,EAAC,OALP;AAME,MAAA,WAAW,EAAE,uBAAM;AACjB2B,QAAAA,YAAY,CAAC3B,SAAD,CAAZ;AACD;AARH,OAUGA,SAVH,CADF;AAcD,GAfA,CADH,eAkBE,6BAAC,YAAD;AACE,IAAA,IAAI,EAAC,OADP;AAEE,IAAA,GAAG,EAAE,CAFP;AAGE,IAAA,GAAG,EAAE,GAHP;AAIE,IAAA,KAAK,EAAE4B,IAJT;AAKE,IAAA,QAAQ,EAAE,kBAACE,CAAD,EAAO;AACfD,MAAAA,OAAO,CAACE,QAAQ,CAACD,CAAC,CAACE,MAAF,CAASC,KAAV,CAAT,CAAP;AACD;AAPH,IAlBF,eA4BE,6BAAC,cAAD;AAAQ,IAAA,CAAC,EAAE;AAAX,IA5BF,eA8BE,6BAAC,gBAAD;AACE,IAAA,OAAO,EAAEpC,OADX;AAEE,IAAA,OAAO,MAFT;AAGE,IAAA,OAAO,MAHT;AAIE,IAAA,OAAO,EAAC,aAJV;AAKE,IAAA,SAAS,EAAEG;AALb,kBAOE,6BAAC,QAAD;AACE,IAAA,EAAE,EAAC,SADL;AAEE,IAAA,KAAK,EAAE4B,IAFT;AAGE,IAAA,MAAM,EAAEA,IAHV;AAIE,IAAA,EAAE,EAAC,MAJL;AAKE,IAAA,QAAQ,EAAC;AALX,kBAOE,6BAAC,QAAD;AACE,IAAA,MAAM,EAAC,KADT;AAEE,IAAA,EAAE,EAAC,QAFL;AAGE,IAAA,KAAK,EAAC,MAHR;AAIE,IAAA,QAAQ,EAAC,UAJX;AAKE,IAAA,GAAG,EAAC,KALN;AAME,IAAA,EAAE,EAAC;AANL,IAPF,eAgBE,6BAAC,QAAD;AACE,IAAA,MAAM,EAAC,MADT;AAEE,IAAA,KAAK,EAAC,KAFR;AAGE,IAAA,EAAE,EAAC,QAHL;AAIE,IAAA,QAAQ,EAAC,UAJX;AAKE,IAAA,IAAI,EAAC,KALP;AAME,IAAA,EAAE,EAAC;AANL,IAhBF,CAPF,CA9BF,CADF;AAkED,CAtEM","sourcesContent":["import { action } from \"@storybook/addon-actions\"\nimport React, { useState } from \"react\"\nimport { States } from \"storybook-states\"\nimport { HelpIcon } from \"../../svgs\"\nimport { Position, POSITION } from \"../../utils/usePosition\"\nimport { Box } from \"../Box\"\nimport { Button } from \"../Button\"\nimport { Clickable } from \"../Clickable\"\nimport { Input } from \"../Input\"\nimport { Spacer } from \"../Spacer\"\nimport { Text } from \"../Text\"\nimport { Tooltip, TooltipProps } from \"./Tooltip\"\n\nconst CONTENT = \"Lorem ipsum dolor sit amet consectetur adipisicing elit?\"\n\nexport default {\n  title: \"Components/Tooltip\",\n}\n\nexport const Default = () => {\n  return (\n    <States<Partial<TooltipProps>>\n      states={[\n        { placement: \"top-start\" },\n        { placement: \"bottom\", width: 600 },\n        { placement: \"bottom\", visible: true, pointer: true },\n        {\n          variant: \"defaultDark\",\n          placement: \"bottom\",\n          visible: true,\n          pointer: true,\n        },\n        {\n          visible: false,\n          children: <>This text has a tooltip that never displays</>,\n        },\n        {\n          visible: true,\n          textAlign: \"center\",\n        },\n        {\n          visible: true,\n          pointer: true,\n          offset: -10,\n        },\n      ]}\n    >\n      {({ children, ...rest }) => (\n        <Tooltip content={CONTENT} {...rest}>\n          <Text\n            variant=\"xs\"\n            textAlign=\"center\"\n            p={1}\n            bg=\"black100\"\n            color=\"white100\"\n          >\n            {children ?? \"This text has a tooltip\"}\n          </Text>\n        </Tooltip>\n      )}\n    </States>\n  )\n}\n\nexport const _Clickable = () => {\n  return (\n    <States<Partial<TooltipProps>> states={[{}]}>\n      <Tooltip content={CONTENT}>\n        <Clickable onClick={action(\"onClick\")}>\n          <Text\n            variant=\"xs\"\n            textAlign=\"center\"\n            p={1}\n            bg=\"black100\"\n            color=\"white100\"\n          >\n            This text has a tooltip and is clickable\n          </Text>\n        </Clickable>\n      </Tooltip>\n    </States>\n  )\n}\n\n_Clickable.story = {\n  parameters: { chromatic: { disable: true } },\n}\n\nexport const Placement = () => {\n  return (\n    <States<Partial<TooltipProps>>\n      states={Object.keys(POSITION).map((placement) => ({\n        placement: placement as Position,\n      }))}\n    >\n      {(props) => {\n        return (\n          <Tooltip\n            content={JSON.stringify(props)}\n            variant=\"defaultDark\"\n            pointer\n            visible\n            {...props}\n          >\n            <Text\n              variant=\"xs\"\n              textAlign=\"center\"\n              p={1}\n              maxWidth=\"50%\"\n              mx=\"auto\"\n              bg=\"black10\"\n            >\n              {JSON.stringify(props)}\n            </Text>\n          </Tooltip>\n        )\n      }}\n    </States>\n  )\n}\n\nexport const IconExample = () => {\n  return (\n    <Text variant=\"xs\" display=\"flex\" alignItems=\"center\" lineHeight={1}>\n      Hover (or focus) the icon to display the tooltip.{\" \"}\n      <Tooltip content={CONTENT} placement=\"bottom\">\n        {/* Icons don't forwardRefs so we have to wrap in a span */}\n        <Box as=\"span\" style={{ lineHeight: 0 }}>\n          <HelpIcon ml={0.5} />\n        </Box>\n      </Tooltip>\n    </Text>\n  )\n}\n\nexport const ExternalControl = () => {\n  const [visible, setVisible] = useState(false)\n\n  return (\n    <>\n      <Tooltip\n        content={CONTENT}\n        visible={visible}\n        pointer\n        variant=\"defaultDark\"\n      >\n        <Button\n          variant=\"secondaryBlack\"\n          onClick={() => {\n            setVisible((visible) => !visible)\n          }}\n        >\n          {visible ? \"Click to hide tooltip\" : \"Click to show tooltip\"}\n        </Button>\n      </Tooltip>\n    </>\n  )\n}\n\nexport const PointerCentering = () => {\n  const [placement, setPlacement] = useState<Position>(\"top\")\n  const [size, setSize] = useState(50)\n\n  return (\n    <>\n      {Object.keys(POSITION).map((placement) => {\n        return (\n          <Button\n            key={placement}\n            mr={1}\n            mb={1}\n            variant=\"secondaryBlack\"\n            size=\"small\"\n            onMouseOver={() => {\n              setPlacement(placement as Position)\n            }}\n          >\n            {placement}\n          </Button>\n        )\n      })}\n\n      <Input\n        type=\"range\"\n        min={0}\n        max={200}\n        value={size}\n        onChange={(e) => {\n          setSize(parseInt(e.target.value))\n        }}\n      />\n\n      <Spacer y={12} />\n\n      <Tooltip\n        content={CONTENT}\n        pointer\n        visible\n        variant=\"defaultDark\"\n        placement={placement}\n      >\n        <Box\n          bg=\"black10\"\n          width={size}\n          height={size}\n          mx=\"auto\"\n          position=\"relative\"\n        >\n          <Box\n            height=\"1px\"\n            bg=\"red100\"\n            width=\"100%\"\n            position=\"absolute\"\n            top=\"50%\"\n            mt=\"-0.5px\"\n          />\n\n          <Box\n            height=\"100%\"\n            width=\"1px\"\n            bg=\"red100\"\n            position=\"absolute\"\n            left=\"50%\"\n            ml=\"-0.5px\"\n          />\n        </Box>\n      </Tooltip>\n    </>\n  )\n}\n"],"file":"Tooltip.story.js"}
+{"version":3,"sources":["../../../src/elements/Tooltip/Tooltip.story.tsx"],"names":["CONTENT","title","Default","placement","width","visible","pointer","variant","children","textAlign","offset","rest","_Clickable","story","parameters","chromatic","disable","Placement","Object","keys","POSITION","map","props","JSON","stringify","IconExample","lineHeight","ExternalControl","setVisible","PointerCentering","setPlacement","size","setSize","e","parseInt","target","value"],"mappings":"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","sourcesContent":["import { action } from \"@storybook/addon-actions\"\nimport React, { useState } from \"react\"\nimport { States } from \"storybook-states\"\nimport HelpIcon from \"@artsy/icons/HelpIcon\"\nimport { Position, POSITION } from \"../../utils/usePosition\"\nimport { Box } from \"../Box\"\nimport { Button } from \"../Button\"\nimport { Clickable } from \"../Clickable\"\nimport { Input } from \"../Input\"\nimport { Spacer } from \"../Spacer\"\nimport { Text } from \"../Text\"\nimport { Tooltip, TooltipProps } from \"./Tooltip\"\n\nconst CONTENT = \"Lorem ipsum dolor sit amet consectetur adipisicing elit?\"\n\nexport default {\n  title: \"Components/Tooltip\",\n}\n\nexport const Default = () => {\n  return (\n    <States<Partial<TooltipProps>>\n      states={[\n        { placement: \"top-start\" },\n        { placement: \"bottom\", width: 600 },\n        { placement: \"bottom\", visible: true, pointer: true },\n        {\n          variant: \"defaultDark\",\n          placement: \"bottom\",\n          visible: true,\n          pointer: true,\n        },\n        {\n          visible: false,\n          children: <>This text has a tooltip that never displays</>,\n        },\n        {\n          visible: true,\n          textAlign: \"center\",\n        },\n        {\n          visible: true,\n          pointer: true,\n          offset: -10,\n        },\n      ]}\n    >\n      {({ children, ...rest }) => (\n        <Tooltip content={CONTENT} {...rest}>\n          <Text\n            variant=\"xs\"\n            textAlign=\"center\"\n            p={1}\n            bg=\"black100\"\n            color=\"white100\"\n          >\n            {children ?? \"This text has a tooltip\"}\n          </Text>\n        </Tooltip>\n      )}\n    </States>\n  )\n}\n\nexport const _Clickable = () => {\n  return (\n    <States<Partial<TooltipProps>> states={[{}]}>\n      <Tooltip content={CONTENT}>\n        <Clickable onClick={action(\"onClick\")}>\n          <Text\n            variant=\"xs\"\n            textAlign=\"center\"\n            p={1}\n            bg=\"black100\"\n            color=\"white100\"\n          >\n            This text has a tooltip and is clickable\n          </Text>\n        </Clickable>\n      </Tooltip>\n    </States>\n  )\n}\n\n_Clickable.story = {\n  parameters: { chromatic: { disable: true } },\n}\n\nexport const Placement = () => {\n  return (\n    <States<Partial<TooltipProps>>\n      states={Object.keys(POSITION).map((placement) => ({\n        placement: placement as Position,\n      }))}\n    >\n      {(props) => {\n        return (\n          <Tooltip\n            content={JSON.stringify(props)}\n            variant=\"defaultDark\"\n            pointer\n            visible\n            {...props}\n          >\n            <Text\n              variant=\"xs\"\n              textAlign=\"center\"\n              p={1}\n              maxWidth=\"50%\"\n              mx=\"auto\"\n              bg=\"black10\"\n            >\n              {JSON.stringify(props)}\n            </Text>\n          </Tooltip>\n        )\n      }}\n    </States>\n  )\n}\n\nexport const IconExample = () => {\n  return (\n    <Text variant=\"xs\" display=\"flex\" alignItems=\"center\" lineHeight={1}>\n      Hover (or focus) the icon to display the tooltip.{\" \"}\n      <Tooltip content={CONTENT} placement=\"bottom\">\n        {/* Icons don't forwardRefs so we have to wrap in a span */}\n        <Box as=\"span\" style={{ lineHeight: 0 }}>\n          <HelpIcon ml={0.5} />\n        </Box>\n      </Tooltip>\n    </Text>\n  )\n}\n\nexport const ExternalControl = () => {\n  const [visible, setVisible] = useState(false)\n\n  return (\n    <>\n      <Tooltip\n        content={CONTENT}\n        visible={visible}\n        pointer\n        variant=\"defaultDark\"\n      >\n        <Button\n          variant=\"secondaryBlack\"\n          onClick={() => {\n            setVisible((visible) => !visible)\n          }}\n        >\n          {visible ? \"Click to hide tooltip\" : \"Click to show tooltip\"}\n        </Button>\n      </Tooltip>\n    </>\n  )\n}\n\nexport const PointerCentering = () => {\n  const [placement, setPlacement] = useState<Position>(\"top\")\n  const [size, setSize] = useState(50)\n\n  return (\n    <>\n      {Object.keys(POSITION).map((placement) => {\n        return (\n          <Button\n            key={placement}\n            mr={1}\n            mb={1}\n            variant=\"secondaryBlack\"\n            size=\"small\"\n            onMouseOver={() => {\n              setPlacement(placement as Position)\n            }}\n          >\n            {placement}\n          </Button>\n        )\n      })}\n\n      <Input\n        type=\"range\"\n        min={0}\n        max={200}\n        value={size}\n        onChange={(e) => {\n          setSize(parseInt(e.target.value))\n        }}\n      />\n\n      <Spacer y={12} />\n\n      <Tooltip\n        content={CONTENT}\n        pointer\n        visible\n        variant=\"defaultDark\"\n        placement={placement}\n      >\n        <Box\n          bg=\"black10\"\n          width={size}\n          height={size}\n          mx=\"auto\"\n          position=\"relative\"\n        >\n          <Box\n            height=\"1px\"\n            bg=\"red100\"\n            width=\"100%\"\n            position=\"absolute\"\n            top=\"50%\"\n            mt=\"-0.5px\"\n          />\n\n          <Box\n            height=\"100%\"\n            width=\"1px\"\n            bg=\"red100\"\n            position=\"absolute\"\n            left=\"50%\"\n            ml=\"-0.5px\"\n          />\n        </Box>\n      </Tooltip>\n    </>\n  )\n}\n"],"file":"Tooltip.story.js"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@artsy/palette",
-  "version": "31.2.0",
+  "version": "31.3.0",
   "description": "Design system library for react components",
   "main": "dist/index.js",
   "publishConfig": {
@@ -63,7 +63,7 @@
     "@storybook/react": "6.5.12",
     "@types/debounce": "1.2.0",
     "@types/enzyme": "3.10.8",
-    "@types/jest": "26.0.20",
+    "@types/jest": "^28.0.0",
     "@types/node": "14.14.27",
     "@types/react": "17.0.2",
     "@types/react-dom": "17.0.1",
@@ -77,7 +77,7 @@
     "@typescript-eslint/parser": "^4.31.1",
     "@wojtekmaj/enzyme-adapter-react-17": "0.4.1",
     "babel-core": "7.0.0-bridge.0",
-    "babel-jest": "26.6.3",
+    "babel-jest": "^28.0.0",
     "babel-loader": "8.2.2",
     "babel-plugin-add-react-displayname": "0.0.5",
     "babel-plugin-module-resolver": "4.1.0",
@@ -94,7 +94,8 @@
     "fork-ts-checker-notifier-webpack-plugin": "1.0.0",
     "fork-ts-checker-webpack-plugin": "1.2.0",
     "husky": "2.1.0",
-    "jest": "26.6.3",
+    "jest": "^28.0.0",
+    "jest-environment-jsdom": "^29.5.0",
     "jest-styled-components": "7.0.0-2",
     "lint-staged": "8.1.5",
     "mock-raf": "1.0.1",
@@ -114,6 +115,7 @@
     "webpack": "5"
   },
   "dependencies": {
+    "@artsy/icons": "^3.2.2",
     "@artsy/palette-tokens": "^4.0.1",
     "@seznam/compose-react-refs": "^1.0.6",
     "@styled-system/theme-get": "^5.1.2",
@@ -168,11 +170,15 @@
     "transform": {
       ".(ts|tsx)": "babel-jest"
     },
+    "testEnvironment": "jsdom",
     "testRegex": "(/__tests__/.*|\\.(test|spec))\\.(ts|tsx|js|jsx)$",
     "testPathIgnorePatterns": [
       "<rootDir>/dist/",
       "<rootDir>/www/"
-    ]
+    ],
+    "testEnvironmentOptions": {
+      "url": "http://localhost"
+    }
   },
-  "gitHead": "2bffc0d82a46005c2d3b007e25d88428060e630c"
+  "gitHead": "8a27267a981e8b3d27da8b84538493e09749ceb0"
 }