@artsy/palette 31.4.1 → 31.4.3

package/dist/elements/Expandable/Expandable.js

@@ -86,13 +86,13 @@ var Expandable = function Expandable(_ref) {
     justifyContent: "space-between",
     borderTop: "1px solid",
     borderColor: borderColor,
-    pt: 1,
+    pt: 2,
+    pb: 1,
     disabled: disabled,
     "aria-expanded": expanded,
     onClick: handleClick
   }, clickableProps), /*#__PURE__*/_react.default.createElement(_Flex.Flex, {
     flex: 1,
-    minHeight: 40,
     display: "flex",
     alignItems: "center"
   }, (0, _isText.isText)(label) ? /*#__PURE__*/_react.default.createElement(_Text.Text, {

package/dist/elements/Expandable/Expandable.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/elements/Expandable/Expandable.tsx"],"names":["Expandable","label","defaultExpanded","expanded","children","disabled","onClick","borderColor","rest","setExpanded","boxProps","clickableProps","handleClick","event","prevExpanded"],"mappings":";;;;;;;;;AAAA;;AACA;;AACA;;AACA;;AACA;;AACA;;AACA;;AACA;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAQA;AACA;AACA;AACO,IAAMA,UAAqC,GAAG,SAAxCA,UAAwC,OAQ/C;AAAA,MAPJC,KAOI,QAPJA,KAOI;AAAA,MANMC,eAMN,QANJC,QAMI;AAAA,MALJC,QAKI,QALJA,QAKI;AAAA,MAJJC,QAII,QAJJA,QAII;AAAA,MAHJC,OAGI,QAHJA,OAGI;AAAA,8BAFJC,WAEI;AAAA,MAFJA,WAEI,iCAFU,SAEV;AAAA,MADDC,IACC;;AACJ,kBAAgC,qBAASN,eAAT,CAAhC;AAAA;AAAA,MAAOC,QAAP;AAAA,MAAiBM,WAAjB;;AAEA,uBAAmC,wBAAcD,IAAd,CAAnC;AAAA;AAAA,MAAOE,QAAP;AAAA,MAAiBC,cAAjB;;AAEA,MAAMC,WAAW,GAAG,SAAdA,WAAc,CAClBC,KADkB,EAEf;AACHJ,IAAAA,WAAW,CAAC,UAACK,YAAD;AAAA,aAAkB,CAACA,YAAnB;AAAA,KAAD,CAAX;AACAR,IAAAA,OAAO,IAAIA,OAAO,CAACO,KAAD,CAAlB;AACD,GALD;;AAOA,sBACE,6BAAC,QAAD,EAASH,QAAT,eACE,6BAAC,oBAAD;AACE,IAAA,KAAK,EAAC,MADR;AAEE,IAAA,OAAO,EAAC,MAFV;AAGE,IAAA,UAAU,EAAC,QAHb;AAIE,IAAA,cAAc,EAAC,eAJjB;AAKE,IAAA,SAAS,EAAC,WALZ;AAME,IAAA,WAAW,EAAEH,WANf;AAOE,IAAA,EAAE,EAAE,CAPN;AAQE,IAAA,QAAQ,EAAEF,QARZ;AASE,qBAAeF,QATjB;AAUE,IAAA,OAAO,EAAES;AAVX,KAWMD,cAXN,gBAaE,6BAAC,UAAD;AAAM,IAAA,IAAI,EAAE,CAAZ;AAAe,IAAA,SAAS,EAAE,EAA1B;AAA8B,IAAA,OAAO,EAAC,MAAtC;AAA6C,IAAA,UAAU,EAAC;AAAxD,KACG,oBAAOV,KAAP,iBAAgB,6BAAC,UAAD;AAAM,IAAA,OAAO,EAAC;AAAd,KAA4BA,KAA5B,CAAhB,GAA4DA,KAD/D,CAbF,EAiBG,CAACI,QAAD,iBACC,4DACGF,QAAQ,gBACP,6BAAC,sBAAD;AACE,IAAA,KAAK,EAAE,EADT;AAEE,IAAA,MAAM,EAAE,EAFV;AAGE,IAAA,EAAE,EAAE,CAHN;AAIE,IAAA,EAAE,EAAE,CAJN;AAKE,mBAAY;AALd,IADO,gBASP,6BAAC,wBAAD;AACE,IAAA,KAAK,EAAE,EADT;AAEE,IAAA,MAAM,EAAE,EAFV;AAGE,IAAA,EAAE,EAAE,CAHN;AAIE,IAAA,EAAE,EAAE,CAJN;AAKE,mBAAY;AALd,IAVJ,CAlBJ,CADF,EAyCGA,QAAQ,KACN,OAAOC,QAAP,KAAoB,UAApB,GACGA,QAAQ,CAAC;AAAEK,IAAAA,WAAW,EAAXA,WAAF;AAAeN,IAAAA,QAAQ,EAARA;AAAf,GAAD,CADX,GAEGC,QAHG,CAzCX,CADF;AAgDD,CApEM;;;AAAMJ,U","sourcesContent":["import React, { useState } from \"react\"\nimport { isText } from \"../../helpers/isText\"\nimport ChevronUpIcon from \"@artsy/icons/ChevronUpIcon\"\nimport ChevronDownIcon from \"@artsy/icons/ChevronDownIcon\"\nimport { Box, splitBoxProps } from \"../Box\"\nimport { Clickable, ClickableProps } from \"../Clickable\"\nimport { Flex } from \"../Flex\"\nimport { Text } from \"../Text\"\n\nexport interface ExpandableProps extends ClickableProps {\n  label?: string | JSX.Element\n  expanded?: boolean\n  children: React.ReactNode\n}\n\n/**\n * A toggleable component used to show / hide content\n */\nexport const Expandable: React.FC<ExpandableProps> = ({\n  label,\n  expanded: defaultExpanded,\n  children,\n  disabled,\n  onClick,\n  borderColor = \"black60\",\n  ...rest\n}) => {\n  const [expanded, setExpanded] = useState(defaultExpanded)\n\n  const [boxProps, clickableProps] = splitBoxProps(rest)\n\n  const handleClick = (\n    event: React.MouseEvent<HTMLButtonElement, MouseEvent>\n  ) => {\n    setExpanded((prevExpanded) => !prevExpanded)\n    onClick && onClick(event)\n  }\n\n  return (\n    <Box {...boxProps}>\n      <Clickable\n        width=\"100%\"\n        display=\"flex\"\n        alignItems=\"center\"\n        justifyContent=\"space-between\"\n        borderTop=\"1px solid\"\n        borderColor={borderColor}\n        pt={1}\n        disabled={disabled}\n        aria-expanded={expanded}\n        onClick={handleClick}\n        {...clickableProps}\n      >\n        <Flex flex={1} minHeight={40} display=\"flex\" alignItems=\"center\">\n          {isText(label) ? <Text variant=\"sm-display\">{label}</Text> : label}\n        </Flex>\n\n        {!disabled && (\n          <>\n            {expanded ? (\n              <ChevronUpIcon\n                width={14}\n                height={14}\n                ml={1}\n                mr={1}\n                aria-hidden=\"true\"\n              />\n            ) : (\n              <ChevronDownIcon\n                width={14}\n                height={14}\n                ml={1}\n                mr={1}\n                aria-hidden=\"true\"\n              />\n            )}\n          </>\n        )}\n      </Clickable>\n\n      {expanded &&\n        (typeof children === \"function\"\n          ? children({ setExpanded, expanded })\n          : children)}\n    </Box>\n  )\n}\n"],"file":"Expandable.js"}
+{"version":3,"sources":["../../../src/elements/Expandable/Expandable.tsx"],"names":["Expandable","label","defaultExpanded","expanded","children","disabled","onClick","borderColor","rest","setExpanded","boxProps","clickableProps","handleClick","event","prevExpanded"],"mappings":";;;;;;;;;AAAA;;AACA;;AACA;;AACA;;AACA;;AACA;;AACA;;AACA;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAQA;AACA;AACA;AACO,IAAMA,UAAqC,GAAG,SAAxCA,UAAwC,OAQ/C;AAAA,MAPJC,KAOI,QAPJA,KAOI;AAAA,MANMC,eAMN,QANJC,QAMI;AAAA,MALJC,QAKI,QALJA,QAKI;AAAA,MAJJC,QAII,QAJJA,QAII;AAAA,MAHJC,OAGI,QAHJA,OAGI;AAAA,8BAFJC,WAEI;AAAA,MAFJA,WAEI,iCAFU,SAEV;AAAA,MADDC,IACC;;AACJ,kBAAgC,qBAASN,eAAT,CAAhC;AAAA;AAAA,MAAOC,QAAP;AAAA,MAAiBM,WAAjB;;AAEA,uBAAmC,wBAAcD,IAAd,CAAnC;AAAA;AAAA,MAAOE,QAAP;AAAA,MAAiBC,cAAjB;;AAEA,MAAMC,WAAW,GAAG,SAAdA,WAAc,CAClBC,KADkB,EAEf;AACHJ,IAAAA,WAAW,CAAC,UAACK,YAAD;AAAA,aAAkB,CAACA,YAAnB;AAAA,KAAD,CAAX;AACAR,IAAAA,OAAO,IAAIA,OAAO,CAACO,KAAD,CAAlB;AACD,GALD;;AAOA,sBACE,6BAAC,QAAD,EAASH,QAAT,eACE,6BAAC,oBAAD;AACE,IAAA,KAAK,EAAC,MADR;AAEE,IAAA,OAAO,EAAC,MAFV;AAGE,IAAA,UAAU,EAAC,QAHb;AAIE,IAAA,cAAc,EAAC,eAJjB;AAKE,IAAA,SAAS,EAAC,WALZ;AAME,IAAA,WAAW,EAAEH,WANf;AAOE,IAAA,EAAE,EAAE,CAPN;AAQE,IAAA,EAAE,EAAE,CARN;AASE,IAAA,QAAQ,EAAEF,QATZ;AAUE,qBAAeF,QAVjB;AAWE,IAAA,OAAO,EAAES;AAXX,KAYMD,cAZN,gBAcE,6BAAC,UAAD;AAAM,IAAA,IAAI,EAAE,CAAZ;AAAe,IAAA,OAAO,EAAC,MAAvB;AAA8B,IAAA,UAAU,EAAC;AAAzC,KACG,oBAAOV,KAAP,iBAAgB,6BAAC,UAAD;AAAM,IAAA,OAAO,EAAC;AAAd,KAA4BA,KAA5B,CAAhB,GAA4DA,KAD/D,CAdF,EAkBG,CAACI,QAAD,iBACC,4DACGF,QAAQ,gBACP,6BAAC,sBAAD;AACE,IAAA,KAAK,EAAE,EADT;AAEE,IAAA,MAAM,EAAE,EAFV;AAGE,IAAA,EAAE,EAAE,CAHN;AAIE,IAAA,EAAE,EAAE,CAJN;AAKE,mBAAY;AALd,IADO,gBASP,6BAAC,wBAAD;AACE,IAAA,KAAK,EAAE,EADT;AAEE,IAAA,MAAM,EAAE,EAFV;AAGE,IAAA,EAAE,EAAE,CAHN;AAIE,IAAA,EAAE,EAAE,CAJN;AAKE,mBAAY;AALd,IAVJ,CAnBJ,CADF,EA0CGA,QAAQ,KACN,OAAOC,QAAP,KAAoB,UAApB,GACGA,QAAQ,CAAC;AAAEK,IAAAA,WAAW,EAAXA,WAAF;AAAeN,IAAAA,QAAQ,EAARA;AAAf,GAAD,CADX,GAEGC,QAHG,CA1CX,CADF;AAiDD,CArEM;;;AAAMJ,U","sourcesContent":["import React, { useState } from \"react\"\nimport { isText } from \"../../helpers/isText\"\nimport ChevronUpIcon from \"@artsy/icons/ChevronUpIcon\"\nimport ChevronDownIcon from \"@artsy/icons/ChevronDownIcon\"\nimport { Box, splitBoxProps } from \"../Box\"\nimport { Clickable, ClickableProps } from \"../Clickable\"\nimport { Flex } from \"../Flex\"\nimport { Text } from \"../Text\"\n\nexport interface ExpandableProps extends ClickableProps {\n  label?: string | JSX.Element\n  expanded?: boolean\n  children: React.ReactNode\n}\n\n/**\n * A toggleable component used to show / hide content\n */\nexport const Expandable: React.FC<ExpandableProps> = ({\n  label,\n  expanded: defaultExpanded,\n  children,\n  disabled,\n  onClick,\n  borderColor = \"black60\",\n  ...rest\n}) => {\n  const [expanded, setExpanded] = useState(defaultExpanded)\n\n  const [boxProps, clickableProps] = splitBoxProps(rest)\n\n  const handleClick = (\n    event: React.MouseEvent<HTMLButtonElement, MouseEvent>\n  ) => {\n    setExpanded((prevExpanded) => !prevExpanded)\n    onClick && onClick(event)\n  }\n\n  return (\n    <Box {...boxProps}>\n      <Clickable\n        width=\"100%\"\n        display=\"flex\"\n        alignItems=\"center\"\n        justifyContent=\"space-between\"\n        borderTop=\"1px solid\"\n        borderColor={borderColor}\n        pt={2}\n        pb={1}\n        disabled={disabled}\n        aria-expanded={expanded}\n        onClick={handleClick}\n        {...clickableProps}\n      >\n        <Flex flex={1} display=\"flex\" alignItems=\"center\">\n          {isText(label) ? <Text variant=\"sm-display\">{label}</Text> : label}\n        </Flex>\n\n        {!disabled && (\n          <>\n            {expanded ? (\n              <ChevronUpIcon\n                width={14}\n                height={14}\n                ml={1}\n                mr={1}\n                aria-hidden=\"true\"\n              />\n            ) : (\n              <ChevronDownIcon\n                width={14}\n                height={14}\n                ml={1}\n                mr={1}\n                aria-hidden=\"true\"\n              />\n            )}\n          </>\n        )}\n      </Clickable>\n\n      {expanded &&\n        (typeof children === \"function\"\n          ? children({ setExpanded, expanded })\n          : children)}\n    </Box>\n  )\n}\n"],"file":"Expandable.js"}

package/dist/elements/Expandable/Expandable.story.js

@@ -70,6 +70,8 @@ var Default = function Default() {
           }
         }, "Close"));
       }
+    }, {
+      label: "Lorem ipsum dolor sit amet consectetur adipisicing elit."
     }]
   }, /*#__PURE__*/_react.default.createElement(_Expandable.Expandable, {
     label: "Example",

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/elements/Expandable/Expandable.story.tsx"],"names":["title","Default","expanded","disabled","label","e","stopPropagation","mb","children","setExpanded","ConfigurableColors"],"mappings":";;;;;;;AAAA;;AACA;;AACA;;AACA;;AACA;;AACA;;AACA;;AACA;;AACA;;;;eAEe;AACbA,EAAAA,KAAK,EAAE;AADM,C;;;AAIR,IAAMC,OAAO,GAAG,SAAVA,OAAU,GAAM;AAC3B,sBACE,6BAAC,uBAAD;AACE,IAAA,MAAM,EAAE,CACN,EADM,EAEN;AAAEC,MAAAA,QAAQ,EAAE;AAAZ,KAFM,EAGN;AAAEA,MAAAA,QAAQ,EAAE,KAAZ;AAAmBC,MAAAA,QAAQ,EAAE;AAA7B,KAHM,EAIN;AAAED,MAAAA,QAAQ,EAAE,IAAZ;AAAkBC,MAAAA,QAAQ,EAAE;AAA5B,KAJM,EAKN;AACEC,MAAAA,KAAK,eACH,6BAAC,UAAD;AAAM,QAAA,IAAI,EAAE,CAAZ;AAAe,QAAA,cAAc,EAAC;AAA9B,sBACE,6BAAC,UAAD;AAAM,QAAA,OAAO,EAAC;AAAd,mBADF,eAEE,6BAAC,oBAAD;AACE,QAAA,cAAc,EAAC,WADjB;AAEE,QAAA,OAAO,EAAE,iBAACC,CAAD,EAAO;AACdA,UAAAA,CAAC,CAACC,eAAF;AACA,oCAAO,kBAAP;AACD;AALH,sBAOE,6BAAC,UAAD;AAAM,QAAA,OAAO,EAAC;AAAd,iBAPF,CAFF;AAFJ,KALM,EAqBN;AAAEC,MAAAA,EAAE,EAAE;AAAN,KArBM,EAsBN;AAAEL,MAAAA,QAAQ,EAAE,IAAZ;AAAkBK,MAAAA,EAAE,EAAE;AAAtB,KAtBM,EAuBN;AACEL,MAAAA,QAAQ,EAAE,IADZ;AAEEM,MAAAA,QAAQ,EAAE;AAAA,YAAGC,WAAH,QAAGA,WAAH;AAAA,4BACR,uDACE,6BAAC,UAAD,2BADF,eAEE,6BAAC,cAAD;AAAQ,UAAA,OAAO,EAAE;AAAA,mBAAMA,WAAW,CAAC,KAAD,CAAjB;AAAA;AAAjB,mBAFF,CADQ;AAAA;AAFZ,KAvBM;AADV,kBAmCE,6BAAC,sBAAD;AAAY,IAAA,KAAK,EAAC,SAAlB;AAA4B,IAAA,QAAQ,EAAE;AAAtC,kBACE,6BAAC,UAAD,2BADF,CAnCF,CADF;AAyCD,CA1CM;;;AAAMR,O;;AA4CN,IAAMS,kBAAkB,GAAG,SAArBA,kBAAqB,GAAM;AACtC,sBACE,6BAAC,QAAD;AAAK,IAAA,KAAK,EAAC,UAAX;AAAsB,IAAA,EAAE,EAAC;AAAzB,kBACE,6BAAC,uBAAD;AAAkC,IAAA,MAAM,EAAE,CAAC,EAAD,EAAK;AAAER,MAAAA,QAAQ,EAAE;AAAZ,KAAL;AAA1C,kBACE,6BAAC,sBAAD;AAAY,IAAA,KAAK,EAAC,SAAlB;AAA4B,IAAA,QAAQ,EAAE,GAAtC;AAA2C,IAAA,WAAW,EAAC;AAAvD,kBACE,6BAAC,UAAD,2BADF,CADF,CADF,CADF;AASD,CAVM;;;AAAMQ,kB","sourcesContent":["import { action } from \"@storybook/addon-actions\"\nimport React from \"react\"\nimport { States } from \"storybook-states\"\nimport { Clickable } from \"../Clickable\"\nimport { Flex } from \"../Flex\"\nimport { Text } from \"../Text\"\nimport { Expandable, ExpandableProps } from \"./Expandable\"\nimport { Button } from \"../Button\"\nimport { Box } from \"../Box\"\n\nexport default {\n  title: \"Components/Expandable\",\n}\n\nexport const Default = () => {\n  return (\n    <States<Partial<ExpandableProps>>\n      states={[\n        {},\n        { expanded: true },\n        { expanded: false, disabled: true },\n        { expanded: true, disabled: true },\n        {\n          label: (\n            <Flex flex={1} justifyContent=\"space-between\">\n              <Text variant=\"sm-display\">Heading</Text>\n              <Clickable\n                textDecoration=\"underline\"\n                onClick={(e) => {\n                  e.stopPropagation()\n                  action(\"Secondary action\")\n                }}\n              >\n                <Text variant=\"sm-display\">Reset</Text>\n              </Clickable>\n            </Flex>\n          ),\n        },\n        { mb: 6 },\n        { expanded: true, mb: 6 },\n        {\n          expanded: true,\n          children: ({ setExpanded }) => (\n            <div>\n              <Text>Expanded content</Text>\n              <Button onClick={() => setExpanded(false)}>Close</Button>\n            </div>\n          ),\n        },\n      ]}\n    >\n      <Expandable label=\"Example\" maxWidth={350}>\n        <Text>Expanded content</Text>\n      </Expandable>\n    </States>\n  )\n}\n\nexport const ConfigurableColors = () => {\n  return (\n    <Box color=\"white100\" bg=\"black100\">\n      <States<Partial<ExpandableProps>> states={[{}, { expanded: true }]}>\n        <Expandable label=\"Example\" maxWidth={350} borderColor=\"black30\">\n          <Text>Expanded content</Text>\n        </Expandable>\n      </States>\n    </Box>\n  )\n}\n"],"file":"Expandable.story.js"}
+{"version":3,"sources":["../../../src/elements/Expandable/Expandable.story.tsx"],"names":["title","Default","expanded","disabled","label","e","stopPropagation","mb","children","setExpanded","ConfigurableColors"],"mappings":";;;;;;;AAAA;;AACA;;AACA;;AACA;;AACA;;AACA;;AACA;;AACA;;AACA;;;;eAEe;AACbA,EAAAA,KAAK,EAAE;AADM,C;;;AAIR,IAAMC,OAAO,GAAG,SAAVA,OAAU,GAAM;AAC3B,sBACE,6BAAC,uBAAD;AACE,IAAA,MAAM,EAAE,CACN,EADM,EAEN;AAAEC,MAAAA,QAAQ,EAAE;AAAZ,KAFM,EAGN;AAAEA,MAAAA,QAAQ,EAAE,KAAZ;AAAmBC,MAAAA,QAAQ,EAAE;AAA7B,KAHM,EAIN;AAAED,MAAAA,QAAQ,EAAE,IAAZ;AAAkBC,MAAAA,QAAQ,EAAE;AAA5B,KAJM,EAKN;AACEC,MAAAA,KAAK,eACH,6BAAC,UAAD;AAAM,QAAA,IAAI,EAAE,CAAZ;AAAe,QAAA,cAAc,EAAC;AAA9B,sBACE,6BAAC,UAAD;AAAM,QAAA,OAAO,EAAC;AAAd,mBADF,eAEE,6BAAC,oBAAD;AACE,QAAA,cAAc,EAAC,WADjB;AAEE,QAAA,OAAO,EAAE,iBAACC,CAAD,EAAO;AACdA,UAAAA,CAAC,CAACC,eAAF;AACA,oCAAO,kBAAP;AACD;AALH,sBAOE,6BAAC,UAAD;AAAM,QAAA,OAAO,EAAC;AAAd,iBAPF,CAFF;AAFJ,KALM,EAqBN;AAAEC,MAAAA,EAAE,EAAE;AAAN,KArBM,EAsBN;AAAEL,MAAAA,QAAQ,EAAE,IAAZ;AAAkBK,MAAAA,EAAE,EAAE;AAAtB,KAtBM,EAuBN;AACEL,MAAAA,QAAQ,EAAE,IADZ;AAEEM,MAAAA,QAAQ,EAAE;AAAA,YAAGC,WAAH,QAAGA,WAAH;AAAA,4BACR,uDACE,6BAAC,UAAD,2BADF,eAEE,6BAAC,cAAD;AAAQ,UAAA,OAAO,EAAE;AAAA,mBAAMA,WAAW,CAAC,KAAD,CAAjB;AAAA;AAAjB,mBAFF,CADQ;AAAA;AAFZ,KAvBM,EAgCN;AAAEL,MAAAA,KAAK,EAAE;AAAT,KAhCM;AADV,kBAoCE,6BAAC,sBAAD;AAAY,IAAA,KAAK,EAAC,SAAlB;AAA4B,IAAA,QAAQ,EAAE;AAAtC,kBACE,6BAAC,UAAD,2BADF,CApCF,CADF;AA0CD,CA3CM;;;AAAMH,O;;AA6CN,IAAMS,kBAAkB,GAAG,SAArBA,kBAAqB,GAAM;AACtC,sBACE,6BAAC,QAAD;AAAK,IAAA,KAAK,EAAC,UAAX;AAAsB,IAAA,EAAE,EAAC;AAAzB,kBACE,6BAAC,uBAAD;AAAkC,IAAA,MAAM,EAAE,CAAC,EAAD,EAAK;AAAER,MAAAA,QAAQ,EAAE;AAAZ,KAAL;AAA1C,kBACE,6BAAC,sBAAD;AAAY,IAAA,KAAK,EAAC,SAAlB;AAA4B,IAAA,QAAQ,EAAE,GAAtC;AAA2C,IAAA,WAAW,EAAC;AAAvD,kBACE,6BAAC,UAAD,2BADF,CADF,CADF,CADF;AASD,CAVM;;;AAAMQ,kB","sourcesContent":["import { action } from \"@storybook/addon-actions\"\nimport React from \"react\"\nimport { States } from \"storybook-states\"\nimport { Clickable } from \"../Clickable\"\nimport { Flex } from \"../Flex\"\nimport { Text } from \"../Text\"\nimport { Expandable, ExpandableProps } from \"./Expandable\"\nimport { Button } from \"../Button\"\nimport { Box } from \"../Box\"\n\nexport default {\n  title: \"Components/Expandable\",\n}\n\nexport const Default = () => {\n  return (\n    <States<Partial<ExpandableProps>>\n      states={[\n        {},\n        { expanded: true },\n        { expanded: false, disabled: true },\n        { expanded: true, disabled: true },\n        {\n          label: (\n            <Flex flex={1} justifyContent=\"space-between\">\n              <Text variant=\"sm-display\">Heading</Text>\n              <Clickable\n                textDecoration=\"underline\"\n                onClick={(e) => {\n                  e.stopPropagation()\n                  action(\"Secondary action\")\n                }}\n              >\n                <Text variant=\"sm-display\">Reset</Text>\n              </Clickable>\n            </Flex>\n          ),\n        },\n        { mb: 6 },\n        { expanded: true, mb: 6 },\n        {\n          expanded: true,\n          children: ({ setExpanded }) => (\n            <div>\n              <Text>Expanded content</Text>\n              <Button onClick={() => setExpanded(false)}>Close</Button>\n            </div>\n          ),\n        },\n        { label: \"Lorem ipsum dolor sit amet consectetur adipisicing elit.\" },\n      ]}\n    >\n      <Expandable label=\"Example\" maxWidth={350}>\n        <Text>Expanded content</Text>\n      </Expandable>\n    </States>\n  )\n}\n\nexport const ConfigurableColors = () => {\n  return (\n    <Box color=\"white100\" bg=\"black100\">\n      <States<Partial<ExpandableProps>> states={[{}, { expanded: true }]}>\n        <Expandable label=\"Example\" maxWidth={350} borderColor=\"black30\">\n          <Text>Expanded content</Text>\n        </Expandable>\n      </States>\n    </Box>\n  )\n}\n"],"file":"Expandable.story.js"}

package/dist/elements/Tabs/Tabs.js

@@ -17,6 +17,8 @@ var _BaseTabs = require("../BaseTabs");
 
 var _Clickable = require("../Clickable");
 
+var _usePrevious = require("../../utils/usePrevious");
+
 var _excluded = ["children", "initialTabIndex", "onChange"];
 
 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); }
@@ -55,6 +57,7 @@ var useTabs = function useTabs(_ref) {
       };
     });
   }, [children]);
+  var previousInitialTabIndex = (0, _usePrevious.usePrevious)(initialTabIndex);
 
   var _useState = (0, _react.useState)(initialTabIndex),
       _useState2 = _slicedToArray(_useState, 2),
@@ -67,6 +70,8 @@ var useTabs = function useTabs(_ref) {
   var activeTab = (0, _react.useRef)(tabs[activeTabIndex]); // If the `initialTabIndex` changes; update the active one
 
   (0, _useUpdateEffect.useUpdateEffect)(function () {
+    // Only update if the `initialTabIndex` has changed externally
+    if (initialTabIndex === previousInitialTabIndex) return;
     activeTab.current = tabs[initialTabIndex];
     setActiveTabIndex(initialTabIndex);
   }, [initialTabIndex, tabs]); // Ref of the tabs viewport

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  /** 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","previousInitialTabIndex","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\"\nimport { usePrevious } from \"../../utils/usePrevious\"\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 previousInitialTabIndex = usePrevious(initialTabIndex)\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    // Only update if the `initialTabIndex` has changed externally\n    if (initialTabIndex === previousInitialTabIndex) return\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

@@ -68,13 +68,18 @@ exports.Default = Default;
 Default.displayName = "Default";
 
 var WithData = function WithData() {
-  var _useState = (0, _react.useState)({}),
+  var _useState = (0, _react.useState)({
+    name: "Pending"
+  }),
       _useState2 = _slicedToArray(_useState, 2),
       data = _useState2[0],
       setData = _useState2[1];
 
   return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(_.Tabs, {
-    onChange: setData
+    onChange: function onChange(tabInfo) {
+      if (!tabInfo) return;
+      setData(tabInfo.data);
+    }
   }, /*#__PURE__*/_react.default.createElement(_.Tab, {
     name: "Overview",
     data: {

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

@@ -1 +1 @@
-{"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"}
+{"version":3,"sources":["../../../src/elements/Tabs/Tabs.story.tsx"],"names":["title","Default","initialTabIndex","justifyContent","WithData","name","data","setData","tabInfo","JSON","stringify","Counts","ConditionalTabs","AutoScrolling","max","index","handleNext","interval","setInterval","clearInterval","story","parameters","chromatic","disable","InitialAutoScroll","key","setKey","Cached","count","setCount","prevCount"],"mappings":";;;;;;;;;AAAA;;AACA;;AACA;;AACA;;AACA;;AACA;;AACA;;AACA;;;;;;;;;;;;;;;;;;eAEe;AACbA,EAAAA,KAAK,EAAE;AADM,C;;;AAIR,IAAMC,OAAO,GAAG,SAAVA,OAAU,GAAM;AAC3B,sBACE,6BAAC,uBAAD;AACE,IAAA,MAAM,EAAE,CAAC,EAAD,EAAK;AAAEC,MAAAA,eAAe,EAAE;AAAnB,KAAL,EAA6B;AAAEC,MAAAA,cAAc,EAAE;AAAlB,KAA7B;AADV,kBAGE,6BAAC,MAAD;AAAM,IAAA,QAAQ,EAAE,0BAAO,UAAP;AAAhB,kBACE,6BAAC,KAAD;AAAK,IAAA,IAAI,EAAC;AAAV,sBADF,eAEE,6BAAC,KAAD;AAAK,IAAA,IAAI,EAAC;AAAV,4BAFF,eAGE,6BAAC,KAAD;AAAK,IAAA,IAAI,EAAC;AAAV,gBAHF,eAIE,6BAAC,KAAD;AAAK,IAAA,IAAI,EAAC;AAAV,6BAJF,CAHF,CADF;AAYD,CAbM;;;AAAMF,O;;AAeN,IAAMG,QAAQ,GAAG,SAAXA,QAAW,GAAM;AAC5B,kBAAwB,qBAAS;AAAEC,IAAAA,IAAI,EAAE;AAAR,GAAT,CAAxB;AAAA;AAAA,MAAOC,IAAP;AAAA,MAAaC,OAAb;;AAEA,sBACE,yEACE,6BAAC,MAAD;AACE,IAAA,QAAQ,EAAE,kBAACC,OAAD,EAAa;AACrB,UAAI,CAACA,OAAL,EAAc;AAEdD,MAAAA,OAAO,CAACC,OAAO,CAACF,IAAT,CAAP;AACD;AALH,kBAOE,6BAAC,KAAD;AAAK,IAAA,IAAI,EAAC,UAAV;AAAqB,IAAA,IAAI,EAAE;AAAED,MAAAA,IAAI,EAAE;AAAR;AAA3B,sBAPF,eAWE,6BAAC,KAAD;AAAK,IAAA,IAAI,EAAC,gBAAV;AAA2B,IAAA,IAAI,EAAE;AAAEA,MAAAA,IAAI,EAAE;AAAR;AAAjC,4BAXF,eAeE,6BAAC,KAAD;AAAK,IAAA,IAAI,EAAC,IAAV;AAAe,IAAA,IAAI,EAAE;AAAEA,MAAAA,IAAI,EAAE;AAAR;AAArB,gBAfF,eAmBE,6BAAC,KAAD;AAAK,IAAA,IAAI,EAAC,iBAAV;AAA4B,IAAA,IAAI,EAAE;AAAEA,MAAAA,IAAI,EAAE;AAAR;AAAlC,6BAnBF,eAuBE,6BAAC,KAAD;AAAK,IAAA,IAAI,EAAC;AAAV,qBAvBF,CADF,eA2BE,0CAAMI,IAAI,CAACC,SAAL,CAAeJ,IAAf,EAAqB,IAArB,EAA2B,CAA3B,CAAN,CA3BF,CADF;AA+BD,CAlCM;;;;AAoCA,IAAMK,MAAM,GAAG,SAATA,MAAS,GAAM;AAC1B,sBACE,6BAAC,MAAD;AAAM,IAAA,QAAQ,EAAE,0BAAO,UAAP;AAAhB,kBACE,6BAAC,KAAD;AACE,IAAA,IAAI,eACF,sFACW,6BAAC,QAAD,cADX;AAFJ,IADF,eAQE,6BAAC,KAAD;AACE,IAAA,IAAI,eACF,4FACiB,6BAAC,QAAD,cADjB;AAFJ,IARF,eAeE,6BAAC,KAAD;AAAK,IAAA,IAAI,EAAC;AAAV,IAfF,eAgBE,6BAAC,KAAD;AACE,IAAA,IAAI,eACF,6FACkB,6BAAC,QAAD,cADlB;AAFJ,IAhBF,CADF;AA0BD,CA3BM;;;AAAMA,M;;AA6BN,IAAMC,eAAe,GAAG,SAAlBA,eAAkB,GAAM;AACnC,sBACE,6BAAC,MAAD;AAAM,IAAA,QAAQ,EAAE,0BAAO,UAAP;AAAhB,kBACE,6BAAC,KAAD;AAAK,IAAA,IAAI,EAAC;AAAV,aADF,EAEG,sBAAS,6BAAC,KAAD;AAAK,IAAA,IAAI,EAAC;AAAV,cAFZ,eAGE,6BAAC,KAAD;AAAK,IAAA,IAAI,EAAC;AAAV,aAHF,CADF;AAOD,CARM;;;AAAMA,e;;AAUN,IAAMC,aAAa,GAAG,SAAhBA,aAAgB,GAAM;AACjC,mBAA+C,2BAAU;AAAEC,IAAAA,GAAG,EAAE;AAAP,GAAV,CAA/C;AAAA,MAAeZ,eAAf,cAAQa,KAAR;AAAA,MAAgCC,UAAhC,cAAgCA,UAAhC;;AAEA,wBAAU,YAAM;AACd,QAAMC,QAAQ,GAAGC,WAAW,CAACF,UAAD,EAAa,GAAb,CAA5B;AACA,WAAO;AAAA,aAAMG,aAAa,CAACF,QAAD,CAAnB;AAAA,KAAP;AACD,GAHD,EAGG,CAACD,UAAD,CAHH;AAKA,sBACE,yEACE,6BAAC,MAAD;AAAM,IAAA,eAAe,EAAEd,eAAvB;AAAwC,IAAA,QAAQ,EAAE,0BAAO,UAAP;AAAlD,kBACE,6BAAC,KAAD;AAAK,IAAA,IAAI,EAAC;AAAV,aADF,eAEE,6BAAC,KAAD;AAAK,IAAA,IAAI,EAAC;AAAV,cAFF,eAGE,6BAAC,KAAD;AAAK,IAAA,IAAI,EAAC;AAAV,aAHF,eAIE,6BAAC,KAAD;AAAK,IAAA,IAAI,EAAC;AAAV,cAJF,eAKE,6BAAC,KAAD;AAAK,IAAA,IAAI,EAAC;AAAV,aALF,eAME,6BAAC,KAAD;AAAK,IAAA,IAAI,EAAC;AAAV,aANF,eAOE,6BAAC,KAAD;AAAK,IAAA,IAAI,EAAC;AAAV,eAPF,eAQE,6BAAC,KAAD;AAAK,IAAA,IAAI,EAAC;AAAV,cARF,eASE,6BAAC,KAAD;AAAK,IAAA,IAAI,EAAC;AAAV,cATF,eAUE,6BAAC,KAAD;AAAK,IAAA,IAAI,EAAC;AAAV,aAVF,eAWE,6BAAC,KAAD;AAAK,IAAA,IAAI,EAAC;AAAV,gBAXF,eAYE,6BAAC,KAAD;AAAK,IAAA,IAAI,EAAC;AAAV,gBAZF,eAaE,6BAAC,KAAD;AAAK,IAAA,IAAI,EAAC;AAAV,kBAbF,eAcE,6BAAC,KAAD;AAAK,IAAA,IAAI,EAAC;AAAV,kBAdF,eAeE,6BAAC,KAAD;AAAK,IAAA,IAAI,EAAC;AAAV,iBAfF,CADF,eAmBE,0CAAMO,IAAI,CAACC,SAAL,CAAe;AAAER,IAAAA,eAAe,EAAfA;AAAF,GAAf,CAAN,CAnBF,CADF;AAuBD,CA/BM;;;AAiCPW,aAAa,CAACO,KAAd,GAAsB;AACpBC,EAAAA,UAAU,EAAE;AAAEC,IAAAA,SAAS,EAAE;AAAEC,MAAAA,OAAO,EAAE;AAAX;AAAb;AADQ,CAAtB;;AAIO,IAAMC,iBAAiB,GAAG,SAApBA,iBAAoB,GAAM;AACrC,mBAAsB,qBAAS,CAAT,CAAtB;AAAA;AAAA,MAAOC,GAAP;AAAA,MAAYC,MAAZ;;AAEA,wBAAU,YAAM;AACd,QAAMT,QAAQ,GAAGC,WAAW,CAAC,YAAM;AACjCQ,MAAAA,MAAM,CAAC,UAACD,GAAD;AAAA,eAASA,GAAG,GAAG,CAAf;AAAA,OAAD,CAAN;AACD,KAF2B,EAEzB,GAFyB,CAA5B;AAIA,WAAO;AAAA,aAAMN,aAAa,CAACF,QAAD,CAAnB;AAAA,KAAP;AACD,GAND,EAMG,EANH;AAQA,sBACE,yEACE,6BAAC,QAAD;AAAK,IAAA,EAAE,EAAC,SAAR;AAAkB,IAAA,MAAM,EAAE,IAA1B;AAAgC,IAAA,CAAC,EAAE;AAAnC,4EAEE,wCAFF,+CAIE,wCAJF,eAKYQ,GALZ,CADF,eASE,6BAAC,MAAD;AAAM,IAAA,QAAQ,EAAE,0BAAO,UAAP,CAAhB;AAAoC,IAAA,eAAe,EAAE;AAArD,kBACE,6BAAC,KAAD;AAAK,IAAA,IAAI,EAAC;AAAV,aADF,eAEE,6BAAC,KAAD;AAAK,IAAA,IAAI,EAAC;AAAV,cAFF,eAGE,6BAAC,KAAD;AAAK,IAAA,IAAI,EAAC;AAAV,aAHF,eAIE,6BAAC,KAAD;AAAK,IAAA,IAAI,EAAC;AAAV,cAJF,eAKE,6BAAC,KAAD;AAAK,IAAA,IAAI,EAAC;AAAV,aALF,eAME,6BAAC,KAAD;AAAK,IAAA,IAAI,EAAC;AAAV,aANF,eAOE,6BAAC,KAAD;AAAK,IAAA,IAAI,EAAC;AAAV,eAPF,eAQE,6BAAC,KAAD;AAAK,IAAA,IAAI,EAAC;AAAV,cARF,eASE,6BAAC,KAAD;AAAK,IAAA,IAAI,EAAC;AAAV,cATF,eAUE,6BAAC,KAAD;AAAK,IAAA,IAAI,EAAC;AAAV,aAVF,eAWE,6BAAC,KAAD;AAAK,IAAA,IAAI,EAAC;AAAV,gBAXF,eAYE,6BAAC,KAAD;AAAK,IAAA,IAAI,EAAC;AAAV,gBAZF,eAaE,6BAAC,KAAD;AAAK,IAAA,IAAI,EAAC;AAAV,kBAbF,eAcE,6BAAC,KAAD;AAAK,IAAA,IAAI,EAAC;AAAV,kBAdF,eAeE,6BAAC,KAAD;AAAK,IAAA,IAAI,EAAC;AAAV,qDAfF,CATF,eA6BE,6BAAC,QAAD;AAAK,IAAA,EAAE,EAAC,SAAR;AAAkB,IAAA,MAAM,EAAE;AAA1B,IA7BF,CADF;AAiCD,CA5CM;;;AA8CPD,iBAAiB,CAACJ,KAAlB,GAA0B;AACxBC,EAAAA,UAAU,EAAE;AAAEC,IAAAA,SAAS,EAAE;AAAEC,MAAAA,OAAO,EAAE;AAAX;AAAb;AADY,CAA1B,C,CAIA;;AACO,IAAMI,MAAM,GAAG,SAATA,MAAS,GAAM;AAC1B,mBAA0B,qBAAS,CAAT,CAA1B;AAAA;AAAA,MAAOC,KAAP;AAAA,MAAcC,QAAd;;AAEA,sBACE,yEACE,6BAAC,cAAD;AACE,IAAA,OAAO,EAAC,gBADV;AAEE,IAAA,IAAI,EAAC,OAFP;AAGE,IAAA,EAAE,EAAE,CAHN;AAIE,IAAA,OAAO,EAAE,mBAAM;AACbA,MAAAA,QAAQ,CAAC,UAACC,SAAD;AAAA,eAAeA,SAAS,GAAG,CAA3B;AAAA,OAAD,CAAR;AACD;AANH,uCAQ4BF,KAR5B,CADF,eAYE,6BAAC,MAAD,qBACE,6BAAC,KAAD;AAAK,IAAA,IAAI,EAAC;AAAV,6BAAkCA,KAAlC,CADF,eAEE,6BAAC,KAAD;AAAK,IAAA,IAAI,EAAC;AAAV,8BAAoCA,KAApC,CAFF,eAGE,6BAAC,KAAD;AAAK,IAAA,IAAI,EAAC;AAAV,6BAAkCA,KAAlC,CAHF,CAZF,CADF;AAoBD,CAvBM","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({ name: \"Pending\" })\n\n  return (\n    <>\n      <Tabs\n        onChange={(tabInfo) => {\n          if (!tabInfo) return\n\n          setData(tabInfo.data)\n        }}\n      >\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/utils/index.d.ts

@@ -5,6 +5,7 @@ export * from "./useIsomorphicLayoutEffect";
 export * from "./useMutationObserver";
 export * from "./usePortal";
 export * from "./usePosition";
+export * from "./usePrevious";
 export * from "./useResizeObserver";
 export * from "./useSentinelVisibility";
 export * from "./useUpdateEffect";

package/dist/utils/index.js

@@ -95,6 +95,19 @@ Object.keys(_usePosition).forEach(function (key) {
   });
 });
 
+var _usePrevious = require("./usePrevious");
+
+Object.keys(_usePrevious).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (key in exports && exports[key] === _usePrevious[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function get() {
+      return _usePrevious[key];
+    }
+  });
+});
+
 var _useResizeObserver = require("./useResizeObserver");
 
 Object.keys(_useResizeObserver).forEach(function (key) {

package/dist/utils/index.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/utils/index.ts"],"names":[],"mappings":";;;;;;AAAA;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AACA;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AACA;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AACA;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AACA;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AACA;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AACA;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AACA;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AACA;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AACA;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AACA;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA","sourcesContent":["export * from \"./useClickOutside\"\nexport * from \"./useContainsFocus\"\nexport * from \"./useDidMount\"\nexport * from \"./useIsomorphicLayoutEffect\"\nexport * from \"./useMutationObserver\"\nexport * from \"./usePortal\"\nexport * from \"./usePosition\"\nexport * from \"./useResizeObserver\"\nexport * from \"./useSentinelVisibility\"\nexport * from \"./useUpdateEffect\"\nexport * from \"./useWidthOf\"\n"],"file":"index.js"}
+{"version":3,"sources":["../../src/utils/index.ts"],"names":[],"mappings":";;;;;;AAAA;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AACA;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AACA;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AACA;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AACA;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AACA;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AACA;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AACA;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AACA;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AACA;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AACA;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AACA;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA","sourcesContent":["export * from \"./useClickOutside\"\nexport * from \"./useContainsFocus\"\nexport * from \"./useDidMount\"\nexport * from \"./useIsomorphicLayoutEffect\"\nexport * from \"./useMutationObserver\"\nexport * from \"./usePortal\"\nexport * from \"./usePosition\"\nexport * from \"./usePrevious\"\nexport * from \"./useResizeObserver\"\nexport * from \"./useSentinelVisibility\"\nexport * from \"./useUpdateEffect\"\nexport * from \"./useWidthOf\"\n"],"file":"index.js"}

package/dist/utils/usePrevious.d.ts

@@ -2,4 +2,4 @@
  * usePrevious
  * Stores state or props in a ref to compare against new props or state
  */
-export declare function usePrevious(value: any): any;
+export declare function usePrevious<T>(value: T): T;

package/dist/utils/usePrevious.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/utils/usePrevious.ts"],"names":["usePrevious","value","ref","current"],"mappings":";;;;;;;AAAA;;AAEA;AACA;AACA;AACA;AACO,SAASA,WAAT,CAAqBC,KAArB,EAA4B;AACjC,MAAMC,GAAG,GAAG,mBAAOD,KAAP,CAAZ;AACA,wBAAU,YAAM;AACdC,IAAAA,GAAG,CAACC,OAAJ,GAAcF,KAAd;AACD,GAFD,EAEG,CAACA,KAAD,CAFH;AAGA,SAAOC,GAAG,CAACC,OAAX;AACD","sourcesContent":["import { useEffect, useRef } from \"react\"\n\n/**\n * usePrevious\n * Stores state or props in a ref to compare against new props or state\n */\nexport function usePrevious(value) {\n  const ref = useRef(value)\n  useEffect(() => {\n    ref.current = value\n  }, [value])\n  return ref.current\n}\n"],"file":"usePrevious.js"}
+{"version":3,"sources":["../../src/utils/usePrevious.ts"],"names":["usePrevious","value","ref","current"],"mappings":";;;;;;;AAAA;;AAEA;AACA;AACA;AACA;AACO,SAASA,WAAT,CAAwBC,KAAxB,EAAkC;AACvC,MAAMC,GAAG,GAAG,mBAAOD,KAAP,CAAZ;AACA,wBAAU,YAAM;AACdC,IAAAA,GAAG,CAACC,OAAJ,GAAcF,KAAd;AACD,GAFD,EAEG,CAACA,KAAD,CAFH;AAGA,SAAOC,GAAG,CAACC,OAAX;AACD","sourcesContent":["import { useEffect, useRef } from \"react\"\n\n/**\n * usePrevious\n * Stores state or props in a ref to compare against new props or state\n */\nexport function usePrevious<T>(value: T) {\n  const ref = useRef(value)\n  useEffect(() => {\n    ref.current = value\n  }, [value])\n  return ref.current\n}\n"],"file":"usePrevious.js"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@artsy/palette",
-  "version": "31.4.1",
+  "version": "31.4.3",
   "description": "Design system library for react components",
   "main": "dist/index.js",
   "publishConfig": {
@@ -180,5 +180,5 @@
       "url": "http://localhost"
     }
   },
-  "gitHead": "ffa2c198375e7853516cae20d7f6002db48b4b5c"
+  "gitHead": "8ea6a4747ed0889b9fe4cf71fe72b15af13163f9"
 }