@artsy/palette 19.2.0 → 19.4.1

package/CHANGELOG.md

@@ -1,3 +1,51 @@
+# v19.4.1 (Tue Apr 12 2022)
+
+#### 🐛  Bug Fix
+
+- fix: add white-space: nowrap to pill component [#1153](https://github.com/artsy/palette/pull/1153) ([@gkartalis](https://github.com/gkartalis))
+- chore: add story for pill with children ([@gkartalis](https://github.com/gkartalis))
+- fix: add white-space: nowrap to pill component ([@gkartalis](https://github.com/gkartalis))
+
+#### Authors: 1
+
+- George Kartalis ([@gkartalis](https://github.com/gkartalis))
+
+---
+
+# v19.4.0 (Tue Apr 05 2022)
+
+#### 🚀  Enhancement
+
+- feat(TX-255): ability to close expandable within expandable content [#1151](https://github.com/artsy/palette/pull/1151) ([@rquartararo](https://github.com/rquartararo))
+
+#### 🐛  Bug Fix
+
+- fix: bug fix ([@rquartararo](https://github.com/rquartararo))
+- feat: add story option with close button ([@rquartararo](https://github.com/rquartararo))
+- feat: pass setExpanded to children ([@rquartararo](https://github.com/rquartararo))
+
+#### Authors: 1
+
+- Rachel Quartararo ([@rquartararo](https://github.com/rquartararo))
+
+---
+
+# v19.3.0 (Thu Mar 31 2022)
+
+#### 🚀  Enhancement
+
+- GRO-836 Update: Marquee with newly decided default coloring [#1150](https://github.com/artsy/palette/pull/1150) ([@The-Beez-Kneez](https://github.com/The-Beez-Kneez))
+
+#### 🐛  Bug Fix
+
+- Update: Marquee with newly decided default coloring ([@The-Beez-Kneez](https://github.com/The-Beez-Kneez))
+
+#### Authors: 1
+
+- Ana Lisa Sutherland ([@The-Beez-Kneez](https://github.com/The-Beez-Kneez))
+
+---
+
 # v19.2.0 (Thu Mar 31 2022)
 
 #### 🚀  Enhancement

package/dist/elements/Expandable/Expandable.js

@@ -118,7 +118,10 @@ var Expandable = function Expandable(_ref) {
     ml: 1,
     mr: tokens.mr,
     "aria-hidden": "true"
-  })), expanded && children);
+  })), expanded && (typeof children === "function" ? children({
+    setExpanded: setExpanded,
+    expanded: expanded
+  }) : children));
 };
 
 exports.Expandable = Expandable;

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","rest","tokens","v2","borderColor","textProps","variant","fontWeight","chevronSize","mr","undefined","v3","setExpanded","boxProps","clickableProps","handleClick","event","prevExpanded"],"mappings":";;;;;;;;;AAAA;;AACA;;AACA;;AACA;;AACA;;AACA;;AACA;;AACA;;;;;;;;;;;;;;;;;;;;;;;;;;AAQA;AACA;AACA;AACO,IAAMA,UAAqC,GAAG,SAAxCA,UAAwC,OAO/C;AAAA,MANJC,KAMI,QANJA,KAMI;AAAA,MALMC,eAKN,QALJC,QAKI;AAAA,MAJJC,QAII,QAJJA,QAII;AAAA,MAHJC,QAGI,QAHJA,QAGI;AAAA,MAFJC,OAEI,QAFJA,OAEI;AAAA,MADDC,IACC;;AACJ,MAAMC,MAAM,GAAG,2BAAe;AAC5BC,IAAAA,EAAE,EAAE;AACFC,MAAAA,WAAW,EAAE,SADX;AAEFC,MAAAA,SAAS,EAAE;AAAEC,QAAAA,OAAO,EAAE,OAAX;AAAoBC,QAAAA,UAAU,EAAE;AAAhC,OAFT;AAGFC,MAAAA,WAAW,EAAE,EAHX;AAIFC,MAAAA,EAAE,EAAEC;AAJF,KADwB;AAO5BC,IAAAA,EAAE,EAAE;AACFP,MAAAA,WAAW,EAAE,SADX;AAEFC,MAAAA,SAAS,EAAE;AAAEC,QAAAA,OAAO,EAAE;AAAX,OAFT;AAGFE,MAAAA,WAAW,EAAE,EAHX;AAIFC,MAAAA,EAAE,EAAE;AAJF;AAPwB,GAAf,CAAf;;AAeA,kBAAgC,qBAASb,eAAT,CAAhC;AAAA;AAAA,MAAOC,QAAP;AAAA,MAAiBe,WAAjB;;AAEA,uBAAmC,wBAAcX,IAAd,CAAnC;AAAA;AAAA,MAAOY,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;AACAjB,IAAAA,OAAO,IAAIA,OAAO,CAACgB,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,EAAEX,MAAM,CAACE,WANtB;AAOE,IAAA,EAAE,EAAE,CAPN;AAQE,IAAA,QAAQ,EAAEL,QARZ;AASE,qBAAeF,QATjB;AAUE,IAAA,OAAO,EAAEkB;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,oBAAOnB,KAAP,iBAAgB,6BAAC,UAAD,EAAUO,MAAM,CAACG,SAAjB,EAA6BV,KAA7B,CAAhB,GAA6DA,KADhE,CAbF,EAiBG,CAACI,QAAD,iBACC,6BAAC,iBAAD;AACE,IAAA,SAAS,EAAEF,QAAQ,GAAG,IAAH,GAAU,MAD/B;AAEE,IAAA,KAAK,EAAEK,MAAM,CAACM,WAFhB;AAGE,IAAA,MAAM,EAAEN,MAAM,CAACM,WAHjB;AAIE,IAAA,EAAE,EAAE,CAJN;AAKE,IAAA,EAAE,EAAEN,MAAM,CAACO,EALb;AAME,mBAAY;AANd,IAlBJ,CADF,EA8BGZ,QAAQ,IAAIC,QA9Bf,CADF;AAkCD,CApEM;;;AAAMJ,U","sourcesContent":["import React, { useState } from \"react\"\nimport { isText } from \"../../helpers/isText\"\nimport { ChevronIcon } from \"../../svgs\"\nimport { useThemeConfig } from \"../../Theme\"\nimport { Box, splitBoxProps } from \"../Box\"\nimport { Clickable, ClickableProps } from \"../Clickable\"\nimport { Flex } from \"../Flex\"\nimport { Text, TextProps } 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  ...rest\n}) => {\n  const tokens = useThemeConfig({\n    v2: {\n      borderColor: \"black10\",\n      textProps: { variant: \"small\", fontWeight: \"bold\" } as TextProps,\n      chevronSize: 12,\n      mr: undefined,\n    },\n    v3: {\n      borderColor: \"black60\",\n      textProps: { variant: \"md\" } as TextProps,\n      chevronSize: 14,\n      mr: 1,\n    },\n  })\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={tokens.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 {...tokens.textProps}>{label}</Text> : label}\n        </Flex>\n\n        {!disabled && (\n          <ChevronIcon\n            direction={expanded ? \"up\" : \"down\"}\n            width={tokens.chevronSize}\n            height={tokens.chevronSize}\n            ml={1}\n            mr={tokens.mr}\n            aria-hidden=\"true\"\n          />\n        )}\n      </Clickable>\n\n      {expanded && 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","rest","tokens","v2","borderColor","textProps","variant","fontWeight","chevronSize","mr","undefined","v3","setExpanded","boxProps","clickableProps","handleClick","event","prevExpanded"],"mappings":";;;;;;;;;AAAA;;AACA;;AACA;;AACA;;AACA;;AACA;;AACA;;AACA;;;;;;;;;;;;;;;;;;;;;;;;;;AAQA;AACA;AACA;AACO,IAAMA,UAAqC,GAAG,SAAxCA,UAAwC,OAO/C;AAAA,MANJC,KAMI,QANJA,KAMI;AAAA,MALMC,eAKN,QALJC,QAKI;AAAA,MAJJC,QAII,QAJJA,QAII;AAAA,MAHJC,QAGI,QAHJA,QAGI;AAAA,MAFJC,OAEI,QAFJA,OAEI;AAAA,MADDC,IACC;;AACJ,MAAMC,MAAM,GAAG,2BAAe;AAC5BC,IAAAA,EAAE,EAAE;AACFC,MAAAA,WAAW,EAAE,SADX;AAEFC,MAAAA,SAAS,EAAE;AAAEC,QAAAA,OAAO,EAAE,OAAX;AAAoBC,QAAAA,UAAU,EAAE;AAAhC,OAFT;AAGFC,MAAAA,WAAW,EAAE,EAHX;AAIFC,MAAAA,EAAE,EAAEC;AAJF,KADwB;AAO5BC,IAAAA,EAAE,EAAE;AACFP,MAAAA,WAAW,EAAE,SADX;AAEFC,MAAAA,SAAS,EAAE;AAAEC,QAAAA,OAAO,EAAE;AAAX,OAFT;AAGFE,MAAAA,WAAW,EAAE,EAHX;AAIFC,MAAAA,EAAE,EAAE;AAJF;AAPwB,GAAf,CAAf;;AAeA,kBAAgC,qBAASb,eAAT,CAAhC;AAAA;AAAA,MAAOC,QAAP;AAAA,MAAiBe,WAAjB;;AAEA,uBAAmC,wBAAcX,IAAd,CAAnC;AAAA;AAAA,MAAOY,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;AACAjB,IAAAA,OAAO,IAAIA,OAAO,CAACgB,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,EAAEX,MAAM,CAACE,WANtB;AAOE,IAAA,EAAE,EAAE,CAPN;AAQE,IAAA,QAAQ,EAAEL,QARZ;AASE,qBAAeF,QATjB;AAUE,IAAA,OAAO,EAAEkB;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,oBAAOnB,KAAP,iBAAgB,6BAAC,UAAD,EAAUO,MAAM,CAACG,SAAjB,EAA6BV,KAA7B,CAAhB,GAA6DA,KADhE,CAbF,EAiBG,CAACI,QAAD,iBACC,6BAAC,iBAAD;AACE,IAAA,SAAS,EAAEF,QAAQ,GAAG,IAAH,GAAU,MAD/B;AAEE,IAAA,KAAK,EAAEK,MAAM,CAACM,WAFhB;AAGE,IAAA,MAAM,EAAEN,MAAM,CAACM,WAHjB;AAIE,IAAA,EAAE,EAAE,CAJN;AAKE,IAAA,EAAE,EAAEN,MAAM,CAACO,EALb;AAME,mBAAY;AANd,IAlBJ,CADF,EA8BGZ,QAAQ,KACN,OAAOC,QAAP,KAAoB,UAApB,GACGA,QAAQ,CAAC;AAAEc,IAAAA,WAAW,EAAXA,WAAF;AAAef,IAAAA,QAAQ,EAARA;AAAf,GAAD,CADX,GAEGC,QAHG,CA9BX,CADF;AAqCD,CAvEM;;;AAAMJ,U","sourcesContent":["import React, { useState } from \"react\"\nimport { isText } from \"../../helpers/isText\"\nimport { ChevronIcon } from \"../../svgs\"\nimport { useThemeConfig } from \"../../Theme\"\nimport { Box, splitBoxProps } from \"../Box\"\nimport { Clickable, ClickableProps } from \"../Clickable\"\nimport { Flex } from \"../Flex\"\nimport { Text, TextProps } 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  ...rest\n}) => {\n  const tokens = useThemeConfig({\n    v2: {\n      borderColor: \"black10\",\n      textProps: { variant: \"small\", fontWeight: \"bold\" } as TextProps,\n      chevronSize: 12,\n      mr: undefined,\n    },\n    v3: {\n      borderColor: \"black60\",\n      textProps: { variant: \"md\" } as TextProps,\n      chevronSize: 14,\n      mr: 1,\n    },\n  })\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={tokens.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 {...tokens.textProps}>{label}</Text> : label}\n        </Flex>\n\n        {!disabled && (\n          <ChevronIcon\n            direction={expanded ? \"up\" : \"down\"}\n            width={tokens.chevronSize}\n            height={tokens.chevronSize}\n            ml={1}\n            mr={tokens.mr}\n            aria-hidden=\"true\"\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

@@ -19,6 +19,8 @@ var _Text = require("../Text");
 
 var _Expandable = require("./Expandable");
 
+var _Button = require("../Button");
+
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
 var _default = {
@@ -56,6 +58,16 @@ var Default = function Default() {
     }, {
       expanded: true,
       mb: 6
+    }, {
+      expanded: true,
+      children: function children(_ref) {
+        var setExpanded = _ref.setExpanded;
+        return /*#__PURE__*/_react.default.createElement("div", null, /*#__PURE__*/_react.default.createElement(_Text.Text, null, "Expanded content"), /*#__PURE__*/_react.default.createElement(_Button.Button, {
+          onClick: function onClick() {
+            return setExpanded(false);
+          }
+        }, "Close"));
+      }
     }]
   }, /*#__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"],"mappings":";;;;;;;AAAA;;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,eAGE,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,CAHF;AAFJ,KALM,EAsBN;AAAEC,MAAAA,EAAE,EAAE;AAAN,KAtBM,EAuBN;AAAEL,MAAAA,QAAQ,EAAE,IAAZ;AAAkBK,MAAAA,EAAE,EAAE;AAAtB,KAvBM;AADV,kBA2BE,6BAAC,sBAAD;AAAY,IAAA,KAAK,EAAC,SAAlB;AAA4B,IAAA,QAAQ,EAAE;AAAtC,kBACE,6BAAC,UAAD,2BADF,CA3BF,CADF;AAiCD,CAlCM;;;AAAMN,O","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\"\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=\"md\">Heading</Text>\n\n              <Clickable\n                textDecoration=\"underline\"\n                onClick={(e) => {\n                  e.stopPropagation()\n                  action(\"Secondary action\")\n                }}\n              >\n                <Text variant=\"md\">Reset</Text>\n              </Clickable>\n            </Flex>\n          ),\n        },\n        { mb: 6 },\n        { expanded: true, mb: 6 },\n      ]}\n    >\n      <Expandable label=\"Example\" maxWidth={350}>\n        <Text>Expanded content</Text>\n      </Expandable>\n    </States>\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"],"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,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","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\"\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=\"md\">Heading</Text>\n              <Clickable\n                textDecoration=\"underline\"\n                onClick={(e) => {\n                  e.stopPropagation()\n                  action(\"Secondary action\")\n                }}\n              >\n                <Text variant=\"md\">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"],"file":"Expandable.story.js"}

package/dist/elements/Marquee/Marquee.js

@@ -51,12 +51,12 @@ var VARIANTS = {
     color: "black100"
   },
   defaultDark: {
-    backgroundColor: "black100",
-    color: "white100"
+    backgroundColor: "black10",
+    color: "black100"
   },
   brand: {
-    backgroundColor: "brand",
-    color: "white100"
+    backgroundColor: "black10",
+    color: "black100"
   }
 };
 

package/dist/elements/Marquee/Marquee.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/elements/Marquee/Marquee.tsx"],"names":["VARIANTS","defaultLight","backgroundColor","color","defaultDark","brand","move","props","keyframes","offset","Container","Box","variants","StyledText","Text","Inner","styled","div","speed","Item","Marquee","marqueeText","divider","rest","size","v2","v3","containerEl","childEl","amount","setAmount","setOffset","current","containerWidth","getBoundingClientRect","width","childWidth","targetAmount","Math","min","ceil","Array","from","map","_","i","defaultProps","variant"],"mappings":"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","sourcesContent":["import React, { useState, useEffect, useRef } from \"react\"\nimport styled, { keyframes } from \"styled-components\"\nimport { variant } from \"styled-system\"\nimport { TextVariant } from \"@artsy/palette-tokens/dist/typography/types\"\nimport { useThemeConfig } from \"../../Theme\"\nimport { Flex } from \"../Flex\"\nimport { Box, BoxProps } from \"../Box\"\nimport { Text } from \"../Text\"\n\nconst VARIANTS = {\n  defaultLight: {\n    backgroundColor: \"black10\",\n    color: \"black100\",\n  },\n  defaultDark: {\n    backgroundColor: \"black100\",\n    color: \"white100\",\n  },\n  brand: {\n    backgroundColor: \"brand\",\n    color: \"white100\",\n  },\n}\n\nconst move = (props) => keyframes`\n  from {\n    transform: translateX(0);\n  }\n  to {\n    transform: translateX(-${props.offset}px);\n  }\n`\n\nconst Container = styled(Box)`\n  ${variant({ variants: VARIANTS })}\n  width: 100%;\n  overflow-x: hidden;\n`\nconst StyledText = styled(Text)`\n  ${variant({ variants: VARIANTS })}\n  white-space: nowrap;\n`\n\nconst Inner = styled.div<{ speed: string; offset: number }>`\n  animation: ${move} ${(props) => props.speed} infinite linear;\n  cursor: default;\n  user-select: none;\n  white-space: nowrap;\n`\n\nconst Item = styled.div`\n  display: inline-block;\n`\n\nexport interface MarqueeProps extends BoxProps {\n  variant?: keyof typeof VARIANTS\n  speed?: string\n  color?: string\n  marqueeText: string\n  divider?: boolean\n}\n\nexport const Marquee: React.FC<MarqueeProps> = ({\n  marqueeText,\n  divider = true,\n  speed = \"10s\",\n  color,\n  ...rest\n}) => {\n  const size: TextVariant = useThemeConfig({ v2: \"small\", v3: \"xs\" })\n  const containerEl = useRef<HTMLDivElement | null>(null)\n  const childEl = useRef<HTMLDivElement | null>(null)\n\n  const [amount, setAmount] = useState(1)\n  const [offset, setOffset] = useState(0)\n\n  useEffect(() => {\n    if (!childEl.current || !containerEl.current) {\n      return\n    }\n    const containerWidth = containerEl.current.getBoundingClientRect().width\n    const childWidth = childEl.current.getBoundingClientRect().width\n    const targetAmount = Math.min(Math.ceil(containerWidth / childWidth), 100)\n\n    setOffset(targetAmount * childWidth)\n    setAmount(Math.ceil(targetAmount * 2))\n  }, [])\n\n  return (\n    <Container ref={containerEl as any} backgroundColor={color} {...rest}>\n      <Inner speed={speed} offset={offset}>\n        {Array.from(Array(amount)).map((_, i) => (\n          <Item key={i} ref={childEl as any}>\n            <Flex>\n              <StyledText px={[2, 4]} py={0.5} variant={size}>\n                {marqueeText}\n              </StyledText>\n              {divider && (\n                <StyledText px={[1, 4]} py={0.5} variant={size}>\n                  •\n                </StyledText>\n              )}\n            </Flex>\n          </Item>\n        ))}\n      </Inner>\n    </Container>\n  )\n}\n\nMarquee.defaultProps = {\n  variant: \"defaultDark\",\n}\n"],"file":"Marquee.js"}
+{"version":3,"sources":["../../../src/elements/Marquee/Marquee.tsx"],"names":["VARIANTS","defaultLight","backgroundColor","color","defaultDark","brand","move","props","keyframes","offset","Container","Box","variants","StyledText","Text","Inner","styled","div","speed","Item","Marquee","marqueeText","divider","rest","size","v2","v3","containerEl","childEl","amount","setAmount","setOffset","current","containerWidth","getBoundingClientRect","width","childWidth","targetAmount","Math","min","ceil","Array","from","map","_","i","defaultProps","variant"],"mappings":"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","sourcesContent":["import React, { useState, useEffect, useRef } from \"react\"\nimport styled, { keyframes } from \"styled-components\"\nimport { variant } from \"styled-system\"\nimport { TextVariant } from \"@artsy/palette-tokens/dist/typography/types\"\nimport { useThemeConfig } from \"../../Theme\"\nimport { Flex } from \"../Flex\"\nimport { Box, BoxProps } from \"../Box\"\nimport { Text } from \"../Text\"\n\nconst VARIANTS = {\n  defaultLight: {\n    backgroundColor: \"black10\",\n    color: \"black100\",\n  },\n  defaultDark: {\n    backgroundColor: \"black10\",\n    color: \"black100\",\n  },\n  brand: {\n    backgroundColor: \"black10\",\n    color: \"black100\",\n  },\n}\n\nconst move = (props) => keyframes`\n  from {\n    transform: translateX(0);\n  }\n  to {\n    transform: translateX(-${props.offset}px);\n  }\n`\n\nconst Container = styled(Box)`\n  ${variant({ variants: VARIANTS })}\n  width: 100%;\n  overflow-x: hidden;\n`\nconst StyledText = styled(Text)`\n  ${variant({ variants: VARIANTS })}\n  white-space: nowrap;\n`\n\nconst Inner = styled.div<{ speed: string; offset: number }>`\n  animation: ${move} ${(props) => props.speed} infinite linear;\n  cursor: default;\n  user-select: none;\n  white-space: nowrap;\n`\n\nconst Item = styled.div`\n  display: inline-block;\n`\n\nexport interface MarqueeProps extends BoxProps {\n  variant?: keyof typeof VARIANTS\n  speed?: string\n  color?: string\n  marqueeText: string\n  divider?: boolean\n}\n\nexport const Marquee: React.FC<MarqueeProps> = ({\n  marqueeText,\n  divider = true,\n  speed = \"10s\",\n  color,\n  ...rest\n}) => {\n  const size: TextVariant = useThemeConfig({ v2: \"small\", v3: \"xs\" })\n  const containerEl = useRef<HTMLDivElement | null>(null)\n  const childEl = useRef<HTMLDivElement | null>(null)\n\n  const [amount, setAmount] = useState(1)\n  const [offset, setOffset] = useState(0)\n\n  useEffect(() => {\n    if (!childEl.current || !containerEl.current) {\n      return\n    }\n    const containerWidth = containerEl.current.getBoundingClientRect().width\n    const childWidth = childEl.current.getBoundingClientRect().width\n    const targetAmount = Math.min(Math.ceil(containerWidth / childWidth), 100)\n\n    setOffset(targetAmount * childWidth)\n    setAmount(Math.ceil(targetAmount * 2))\n  }, [])\n\n  return (\n    <Container ref={containerEl as any} backgroundColor={color} {...rest}>\n      <Inner speed={speed} offset={offset}>\n        {Array.from(Array(amount)).map((_, i) => (\n          <Item key={i} ref={childEl as any}>\n            <Flex>\n              <StyledText px={[2, 4]} py={0.5} variant={size}>\n                {marqueeText}\n              </StyledText>\n              {divider && (\n                <StyledText px={[1, 4]} py={0.5} variant={size}>\n                  •\n                </StyledText>\n              )}\n            </Flex>\n          </Item>\n        ))}\n      </Inner>\n    </Container>\n  )\n}\n\nMarquee.defaultProps = {\n  variant: \"defaultDark\",\n}\n"],"file":"Marquee.js"}

package/dist/elements/Marquee/Marquee.story.js

@@ -25,7 +25,7 @@ var Default = function Default() {
       marqueeText: "Black Owned"
     }, {
       variant: "defaultDark",
-      marqueeText: "Black Owned"
+      marqueeText: "Women Owned"
     }, {
       variant: "brand",
       marqueeText: "Black Owned"
@@ -34,7 +34,7 @@ var Default = function Default() {
       marqueeText: "Black Owned"
     }, {
       speed: "20s",
-      marqueeText: "Black Owned"
+      marqueeText: "Women Owned"
     }, {
       divider: false,
       marqueeText: "Black Owned"

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/elements/Marquee/Marquee.story.tsx"],"names":["title","Default","variant","marqueeText","speed","divider"],"mappings":";;;;;;;AAAA;;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;AAAEC,MAAAA,OAAO,EAAE,cAAX;AAA2BC,MAAAA,WAAW,EAAE;AAAxC,KADM,EAEN;AAAED,MAAAA,OAAO,EAAE,aAAX;AAA0BC,MAAAA,WAAW,EAAE;AAAvC,KAFM,EAGN;AAAED,MAAAA,OAAO,EAAE,OAAX;AAAoBC,MAAAA,WAAW,EAAE;AAAjC,KAHM,EAIN;AAAEC,MAAAA,KAAK,EAAE,IAAT;AAAeD,MAAAA,WAAW,EAAE;AAA5B,KAJM,EAKN;AAAEC,MAAAA,KAAK,EAAE,KAAT;AAAgBD,MAAAA,WAAW,EAAE;AAA7B,KALM,EAMN;AAAEE,MAAAA,OAAO,EAAE,KAAX;AAAkBF,MAAAA,WAAW,EAAE;AAA/B,KANM;AADV,kBAUE,6BAAC,gBAAD;AAAS,IAAA,WAAW,EAAC;AAArB,IAVF,CADF;AAcD,CAfM;;;AAAMF,O","sourcesContent":["import React from \"react\"\nimport { Marquee, MarqueeProps } from \"./Marquee\"\nimport { States } from \"storybook-states\"\n\nexport default {\n  title: \"Components/Marquee\",\n}\n\nexport const Default = () => {\n  return (\n    <States<MarqueeProps>\n      states={[\n        { variant: \"defaultLight\", marqueeText: \"Black Owned\" },\n        { variant: \"defaultDark\", marqueeText: \"Black Owned\" },\n        { variant: \"brand\", marqueeText: \"Black Owned\" },\n        { speed: \"5s\", marqueeText: \"Black Owned\" },\n        { speed: \"20s\", marqueeText: \"Black Owned\" },\n        { divider: false, marqueeText: \"Black Owned\" },\n      ]}\n    >\n      <Marquee marqueeText=\"Black Owned\" />\n    </States>\n  )\n}\n"],"file":"Marquee.story.js"}
+{"version":3,"sources":["../../../src/elements/Marquee/Marquee.story.tsx"],"names":["title","Default","variant","marqueeText","speed","divider"],"mappings":";;;;;;;AAAA;;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;AAAEC,MAAAA,OAAO,EAAE,cAAX;AAA2BC,MAAAA,WAAW,EAAE;AAAxC,KADM,EAEN;AAAED,MAAAA,OAAO,EAAE,aAAX;AAA0BC,MAAAA,WAAW,EAAE;AAAvC,KAFM,EAGN;AAAED,MAAAA,OAAO,EAAE,OAAX;AAAoBC,MAAAA,WAAW,EAAE;AAAjC,KAHM,EAIN;AAAEC,MAAAA,KAAK,EAAE,IAAT;AAAeD,MAAAA,WAAW,EAAE;AAA5B,KAJM,EAKN;AAAEC,MAAAA,KAAK,EAAE,KAAT;AAAgBD,MAAAA,WAAW,EAAE;AAA7B,KALM,EAMN;AAAEE,MAAAA,OAAO,EAAE,KAAX;AAAkBF,MAAAA,WAAW,EAAE;AAA/B,KANM;AADV,kBAUE,6BAAC,gBAAD;AAAS,IAAA,WAAW,EAAC;AAArB,IAVF,CADF;AAcD,CAfM;;;AAAMF,O","sourcesContent":["import React from \"react\"\nimport { Marquee, MarqueeProps } from \"./Marquee\"\nimport { States } from \"storybook-states\"\n\nexport default {\n  title: \"Components/Marquee\",\n}\n\nexport const Default = () => {\n  return (\n    <States<MarqueeProps>\n      states={[\n        { variant: \"defaultLight\", marqueeText: \"Black Owned\" },\n        { variant: \"defaultDark\", marqueeText: \"Women Owned\" },\n        { variant: \"brand\", marqueeText: \"Black Owned\" },\n        { speed: \"5s\", marqueeText: \"Black Owned\" },\n        { speed: \"20s\", marqueeText: \"Women Owned\" },\n        { divider: false, marqueeText: \"Black Owned\" },\n      ]}\n    >\n      <Marquee marqueeText=\"Black Owned\" />\n    </States>\n  )\n}\n"],"file":"Marquee.story.js"}

package/dist/elements/Pill/Pill.js

@@ -40,7 +40,7 @@ exports.PILL_VARIANT_NAMES = PILL_VARIANT_NAMES;
 var Container = (0, _styledComponents.default)(_Clickable.Clickable).withConfig({
   displayName: "Pill__Container",
   componentId: "sc-1r2gnzt-0"
-})(["display:inline-flex;align-items:center;justify-content:center;text-align:center;text-decoration:none;border:1px solid ", ";transition:color 0.25s ease,border-color 0.25s ease,background-color 0.25s ease,box-shadow 0.25s ease;", ""], (0, _themeGet.themeGet)("colors.black15"), function (props) {
+})(["display:inline-flex;align-items:center;justify-content:center;text-align:center;text-decoration:none;white-space:nowrap;border:1px solid ", ";transition:color 0.25s ease,border-color 0.25s ease,background-color 0.25s ease,box-shadow 0.25s ease;", ""], (0, _themeGet.themeGet)("colors.black15"), function (props) {
   var _props$variant;
 
   var states = _tokens.PILL_VARIANTS[(_props$variant = props.variant) !== null && _props$variant !== void 0 ? _props$variant : "textRound"];

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/elements/Pill/Pill.tsx"],"names":["PILL_VARIANT_NAMES","Container","Clickable","props","states","PILL_VARIANTS","variant","css","default","hover","focus","active","Thumbnail","styled","img","Pill","children","rest","src","srcSet","overflowEllipsis","display","alignItems","defaultProps"],"mappings":";;;;;;;;;AAAA;;AACA;;AACA;;AAEA;;AACA;;AACA;;AACA;;;;;;;;;;;;;;;;AAEO,IAAMA,kBAAkB,GAAG,CAChC,WADgC,EAEhC,YAFgC,EAGhC,QAHgC,EAIhC,QAJgC,CAA3B;;AAkCP,IAAMC,SAAS,GAAG,+BAAOC,oBAAP,CAAH;AAAA;AAAA;AAAA,8OAMO,wBAAS,gBAAT,CANP,EAUX,UAACC,KAAD,EAAW;AAAA;;AACX,MAAMC,MAAM,GAAGC,wCAAcF,KAAK,CAACG,OAApB,2DAA+B,WAA/B,CAAf;AAEA,aAAOC,qBAAP,qEACIH,MAAM,CAACI,OADX,EAEIL,KAAK,CAACM,KAAN,IAAeL,MAAM,CAACK,KAF1B,EAGIN,KAAK,CAACO,KAAN,IAAeN,MAAM,CAACM,KAH1B,EAII,YAAYP,KAAZ,IAAqBA,KAAK,CAACQ,MAA3B,IAAqCP,MAAM,CAACO,MAJhD,EAOMP,MAAM,CAACK,KAPb,EAYML,MAAM,CAACM,KAZb,EAaM,YAAYP,KAAZ,IAAqBA,KAAK,CAACQ,MAA3B,IAAqCP,MAAM,CAACO,MAblD;AAgBD,CA7BY,CAAf;;AAgCA,IAAMC,SAAS,GAAGC,0BAAOC,GAAV;AAAA;AAAA;AAAA,wGAKG,wBAAS,SAAT,CALH,EAMO,wBAAS,gBAAT,CANP,CAAf;AASA;AACA;AACA;AACA;AACA;;;AACO,IAAMC,IAAyB,GAAG,SAA5BA,IAA4B,OAA2B;AAAA,MAAxBC,QAAwB,QAAxBA,QAAwB;AAAA,MAAXC,IAAW;;AAClE,sBACE,6BAAC,SAAD,EAAeA,IAAf,EACG,YAAYA,IAAZ,IAAoBA,IAAI,CAACN,MAAzB,IAAmCM,IAAI,CAACX,OAAL,KAAiB,QAApD,iBACC,6BAAC,eAAD;AAAW,IAAA,EAAE,EAAE;AAAf,IAFJ,EAKGW,IAAI,CAACX,OAAL,KAAiB,QAAjB,iBACC,6BAAC,SAAD,eACOW,IAAI,CAACC,GAAL,GACD;AAAEA,IAAAA,GAAG,EAAE,OAAOD,IAAI,CAACC,GAAZ,KAAoB,QAApB,GAA+BD,IAAI,CAACC,GAApC,GAA0CD,IAAI,CAACC,GAAL,CAAS,CAAT;AAAjD,GADC,GAED,EAHN,EAIOD,IAAI,CAACC,GAAL,IAAY,OAAOD,IAAI,CAACC,GAAZ,KAAoB,QAAhC,IAA4CD,IAAI,CAACC,GAAL,CAAS,CAAT,CAA5C,GACD;AAAEC,IAAAA,MAAM,YAAKF,IAAI,CAACC,GAAL,CAAS,CAAT,CAAL,kBAAwBD,IAAI,CAACC,GAAL,CAAS,CAAT,CAAxB;AAAR,GADC,GAED,EANN;AAOE;AACA,IAAA,GAAG,EAAC;AARN,KANJ,eAkBE,6BAAC,UAAD;AACE,IAAA,OAAO,EAAC;AADV,KAEO,OAAOF,QAAP,KAAoB,QAApB,GACD;AACA;AAAEI,IAAAA,gBAAgB,EAAE;AAApB,GAFC,GAGD;AACA;AAAEC,IAAAA,OAAO,EAAE,MAAX;AAAmBC,IAAAA,UAAU,EAAE;AAA/B,GANN,GAQGN,QARH,CAlBF,CADF;AA+BD,CAhCM;;;AAAMD,I;AAkCbA,IAAI,CAACQ,YAAL,GAAoB;AAClBjB,EAAAA,OAAO,EAAE;AADS,CAApB","sourcesContent":["import { themeGet } from \"@styled-system/theme-get\"\nimport React from \"react\"\nimport styled from \"styled-components\"\nimport { css } from \"styled-components\"\nimport { CheckIcon } from \"../../svgs\"\nimport { Clickable, ClickableProps } from \"../Clickable\"\nimport { Text } from \"../Text\"\nimport { PILL_VARIANTS } from \"./tokens\"\n\nexport const PILL_VARIANT_NAMES = [\n  \"textRound\",\n  \"textSquare\",\n  \"filter\",\n  \"artist\",\n] as const\n\nexport type PillVariant = typeof PILL_VARIANT_NAMES[number]\nexport type PillState = \"default\" | \"focus\" | \"hover\" | \"active\"\n\n/** PillProps */\nexport type PillProps = ClickableProps & {\n  as?: keyof JSX.IntrinsicElements | React.ComponentType\n  /** Forces focus state */\n  focus?: boolean\n  /** Forces hover state */\n  hover?: boolean\n} & (\n    | {\n        variant?: Extract<PillVariant, \"textRound\" | \"textSquare\" | \"filter\">\n        /** Forces active state & border-color to black60 */\n        active?: boolean\n      }\n    | {\n        /** `\"artist\"` pills do not have an `active` state */\n        variant?: Extract<PillVariant, \"artist\">\n        /**\n         * Optional avatar; 1x or [1x, 2x]\n         * Should target 30x30 @1x, 60x60 @2x\n         */\n        src?: string | [string, string]\n      }\n  )\n\nconst Container = styled(Clickable)<PillProps>`\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  text-align: center;\n  text-decoration: none;\n  border: 1px solid ${themeGet(\"colors.black15\")};\n  transition: color 0.25s ease, border-color 0.25s ease,\n    background-color 0.25s ease, box-shadow 0.25s ease;\n\n  ${(props) => {\n    const states = PILL_VARIANTS[props.variant ?? \"textRound\"]\n\n    return css`\n      ${states.default}\n      ${props.hover && states.hover}\n      ${props.focus && states.focus}\n      ${\"active\" in props && props.active && states.active}\n\n      &:hover {\n        ${states.hover}\n      }\n\n      &:focus {\n        outline: 0;\n        ${states.focus}\n        ${\"active\" in props && props.active && states.active}\n      }\n    `\n  }}\n`\n\nconst Thumbnail = styled.img`\n  display: block;\n  border-radius: 50%;\n  width: 30px;\n  height: 30px;\n  margin-right: ${themeGet(\"space.1\")};\n  background-color: ${themeGet(\"colors.black30\")};\n`\n\n/**\n * A Pill is a non-CTA button.\n * It may be used for things like active filters, search states,\n * or to denote an artist entity (possibly in the context of a card).\n */\nexport const Pill: React.FC<PillProps> = ({ children, ...rest }) => {\n  return (\n    <Container {...rest}>\n      {\"active\" in rest && rest.active && rest.variant === \"filter\" && (\n        <CheckIcon mr={0.5} />\n      )}\n\n      {rest.variant === \"artist\" && (\n        <Thumbnail\n          {...(rest.src\n            ? { src: typeof rest.src === \"string\" ? rest.src : rest.src[0] }\n            : {})}\n          {...(rest.src && typeof rest.src !== \"string\" && rest.src[1]\n            ? { srcSet: `${rest.src[0]} 1x, ${rest.src[1]} 2x` }\n            : {})}\n          // Intentionally empty string\n          alt=\"\"\n        />\n      )}\n\n      <Text\n        variant=\"xs\"\n        {...(typeof children === \"string\"\n          ? // Simple label — handle the text overflow\n            { overflowEllipsis: true }\n          : // Otherwise use the children as-is and center align them\n            { display: \"flex\", alignItems: \"center\" })}\n      >\n        {children}\n      </Text>\n    </Container>\n  )\n}\n\nPill.defaultProps = {\n  variant: \"textRound\",\n}\n"],"file":"Pill.js"}
+{"version":3,"sources":["../../../src/elements/Pill/Pill.tsx"],"names":["PILL_VARIANT_NAMES","Container","Clickable","props","states","PILL_VARIANTS","variant","css","default","hover","focus","active","Thumbnail","styled","img","Pill","children","rest","src","srcSet","overflowEllipsis","display","alignItems","defaultProps"],"mappings":";;;;;;;;;AAAA;;AACA;;AACA;;AAEA;;AACA;;AACA;;AACA;;;;;;;;;;;;;;;;AAEO,IAAMA,kBAAkB,GAAG,CAChC,WADgC,EAEhC,YAFgC,EAGhC,QAHgC,EAIhC,QAJgC,CAA3B;;AAkCP,IAAMC,SAAS,GAAG,+BAAOC,oBAAP,CAAH;AAAA;AAAA;AAAA,iQAOO,wBAAS,gBAAT,CAPP,EAWX,UAACC,KAAD,EAAW;AAAA;;AACX,MAAMC,MAAM,GAAGC,wCAAcF,KAAK,CAACG,OAApB,2DAA+B,WAA/B,CAAf;AAEA,aAAOC,qBAAP,qEACIH,MAAM,CAACI,OADX,EAEIL,KAAK,CAACM,KAAN,IAAeL,MAAM,CAACK,KAF1B,EAGIN,KAAK,CAACO,KAAN,IAAeN,MAAM,CAACM,KAH1B,EAII,YAAYP,KAAZ,IAAqBA,KAAK,CAACQ,MAA3B,IAAqCP,MAAM,CAACO,MAJhD,EAOMP,MAAM,CAACK,KAPb,EAYML,MAAM,CAACM,KAZb,EAaM,YAAYP,KAAZ,IAAqBA,KAAK,CAACQ,MAA3B,IAAqCP,MAAM,CAACO,MAblD;AAgBD,CA9BY,CAAf;;AAiCA,IAAMC,SAAS,GAAGC,0BAAOC,GAAV;AAAA;AAAA;AAAA,wGAKG,wBAAS,SAAT,CALH,EAMO,wBAAS,gBAAT,CANP,CAAf;AASA;AACA;AACA;AACA;AACA;;;AACO,IAAMC,IAAyB,GAAG,SAA5BA,IAA4B,OAA2B;AAAA,MAAxBC,QAAwB,QAAxBA,QAAwB;AAAA,MAAXC,IAAW;;AAClE,sBACE,6BAAC,SAAD,EAAeA,IAAf,EACG,YAAYA,IAAZ,IAAoBA,IAAI,CAACN,MAAzB,IAAmCM,IAAI,CAACX,OAAL,KAAiB,QAApD,iBACC,6BAAC,eAAD;AAAW,IAAA,EAAE,EAAE;AAAf,IAFJ,EAKGW,IAAI,CAACX,OAAL,KAAiB,QAAjB,iBACC,6BAAC,SAAD,eACOW,IAAI,CAACC,GAAL,GACD;AAAEA,IAAAA,GAAG,EAAE,OAAOD,IAAI,CAACC,GAAZ,KAAoB,QAApB,GAA+BD,IAAI,CAACC,GAApC,GAA0CD,IAAI,CAACC,GAAL,CAAS,CAAT;AAAjD,GADC,GAED,EAHN,EAIOD,IAAI,CAACC,GAAL,IAAY,OAAOD,IAAI,CAACC,GAAZ,KAAoB,QAAhC,IAA4CD,IAAI,CAACC,GAAL,CAAS,CAAT,CAA5C,GACD;AAAEC,IAAAA,MAAM,YAAKF,IAAI,CAACC,GAAL,CAAS,CAAT,CAAL,kBAAwBD,IAAI,CAACC,GAAL,CAAS,CAAT,CAAxB;AAAR,GADC,GAED,EANN;AAOE;AACA,IAAA,GAAG,EAAC;AARN,KANJ,eAkBE,6BAAC,UAAD;AACE,IAAA,OAAO,EAAC;AADV,KAEO,OAAOF,QAAP,KAAoB,QAApB,GACD;AACA;AAAEI,IAAAA,gBAAgB,EAAE;AAApB,GAFC,GAGD;AACA;AAAEC,IAAAA,OAAO,EAAE,MAAX;AAAmBC,IAAAA,UAAU,EAAE;AAA/B,GANN,GAQGN,QARH,CAlBF,CADF;AA+BD,CAhCM;;;AAAMD,I;AAkCbA,IAAI,CAACQ,YAAL,GAAoB;AAClBjB,EAAAA,OAAO,EAAE;AADS,CAApB","sourcesContent":["import { themeGet } from \"@styled-system/theme-get\"\nimport React from \"react\"\nimport styled from \"styled-components\"\nimport { css } from \"styled-components\"\nimport { CheckIcon } from \"../../svgs\"\nimport { Clickable, ClickableProps } from \"../Clickable\"\nimport { Text } from \"../Text\"\nimport { PILL_VARIANTS } from \"./tokens\"\n\nexport const PILL_VARIANT_NAMES = [\n  \"textRound\",\n  \"textSquare\",\n  \"filter\",\n  \"artist\",\n] as const\n\nexport type PillVariant = typeof PILL_VARIANT_NAMES[number]\nexport type PillState = \"default\" | \"focus\" | \"hover\" | \"active\"\n\n/** PillProps */\nexport type PillProps = ClickableProps & {\n  as?: keyof JSX.IntrinsicElements | React.ComponentType\n  /** Forces focus state */\n  focus?: boolean\n  /** Forces hover state */\n  hover?: boolean\n} & (\n    | {\n        variant?: Extract<PillVariant, \"textRound\" | \"textSquare\" | \"filter\">\n        /** Forces active state & border-color to black60 */\n        active?: boolean\n      }\n    | {\n        /** `\"artist\"` pills do not have an `active` state */\n        variant?: Extract<PillVariant, \"artist\">\n        /**\n         * Optional avatar; 1x or [1x, 2x]\n         * Should target 30x30 @1x, 60x60 @2x\n         */\n        src?: string | [string, string]\n      }\n  )\n\nconst Container = styled(Clickable)<PillProps>`\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  text-align: center;\n  text-decoration: none;\n  white-space: nowrap;\n  border: 1px solid ${themeGet(\"colors.black15\")};\n  transition: color 0.25s ease, border-color 0.25s ease,\n    background-color 0.25s ease, box-shadow 0.25s ease;\n\n  ${(props) => {\n    const states = PILL_VARIANTS[props.variant ?? \"textRound\"]\n\n    return css`\n      ${states.default}\n      ${props.hover && states.hover}\n      ${props.focus && states.focus}\n      ${\"active\" in props && props.active && states.active}\n\n      &:hover {\n        ${states.hover}\n      }\n\n      &:focus {\n        outline: 0;\n        ${states.focus}\n        ${\"active\" in props && props.active && states.active}\n      }\n    `\n  }}\n`\n\nconst Thumbnail = styled.img`\n  display: block;\n  border-radius: 50%;\n  width: 30px;\n  height: 30px;\n  margin-right: ${themeGet(\"space.1\")};\n  background-color: ${themeGet(\"colors.black30\")};\n`\n\n/**\n * A Pill is a non-CTA button.\n * It may be used for things like active filters, search states,\n * or to denote an artist entity (possibly in the context of a card).\n */\nexport const Pill: React.FC<PillProps> = ({ children, ...rest }) => {\n  return (\n    <Container {...rest}>\n      {\"active\" in rest && rest.active && rest.variant === \"filter\" && (\n        <CheckIcon mr={0.5} />\n      )}\n\n      {rest.variant === \"artist\" && (\n        <Thumbnail\n          {...(rest.src\n            ? { src: typeof rest.src === \"string\" ? rest.src : rest.src[0] }\n            : {})}\n          {...(rest.src && typeof rest.src !== \"string\" && rest.src[1]\n            ? { srcSet: `${rest.src[0]} 1x, ${rest.src[1]} 2x` }\n            : {})}\n          // Intentionally empty string\n          alt=\"\"\n        />\n      )}\n\n      <Text\n        variant=\"xs\"\n        {...(typeof children === \"string\"\n          ? // Simple label — handle the text overflow\n            { overflowEllipsis: true }\n          : // Otherwise use the children as-is and center align them\n            { display: \"flex\", alignItems: \"center\" })}\n      >\n        {children}\n      </Text>\n    </Container>\n  )\n}\n\nPill.defaultProps = {\n  variant: \"textRound\",\n}\n"],"file":"Pill.js"}

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

@@ -11,4 +11,5 @@ export declare const _States: {
 export declare const Variants: () => JSX.Element;
 export declare const LinkExample: () => JSX.Element;
 export declare const LongExample: () => JSX.Element;
+export declare const LongExampleWithChildren: () => JSX.Element;
 export declare const IconExample: () => JSX.Element;

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

@@ -3,7 +3,7 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.default = exports._States = exports.Variants = exports.LongExample = exports.LinkExample = exports.IconExample = void 0;
+exports.default = exports._States = exports.Variants = exports.LongExampleWithChildren = exports.LongExample = exports.LinkExample = exports.IconExample = void 0;
 
 var _addonActions = require("@storybook/addon-actions");
 
@@ -23,6 +23,8 @@ var _Spacer = require("../Spacer");
 
 var _Pill = require("./Pill");
 
+var _Sup = require("../Sup");
+
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
 function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
@@ -120,6 +122,17 @@ var LongExample = function LongExample() {
 exports.LongExample = LongExample;
 LongExample.displayName = "LongExample";
 
+var LongExampleWithChildren = function LongExampleWithChildren() {
+  return /*#__PURE__*/_react.default.createElement(_Pill.Pill, {
+    maxWidth: 200
+  }, "Artist Series ", /*#__PURE__*/_react.default.createElement(_Sup.Sup, {
+    pl: 0.5
+  }, "130"));
+};
+
+exports.LongExampleWithChildren = LongExampleWithChildren;
+LongExampleWithChildren.displayName = "LongExampleWithChildren";
+
 var IconExample = function IconExample() {
   return /*#__PURE__*/_react.default.createElement(_Pill.Pill, {
     variant: "textSquare",

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/elements/Pill/Pill.story.tsx"],"names":["title","_States","hover","focus","story","name","_Demo","Flex","displayName","Variants","variant","children","src","props","LinkExample","LongExample","IconExample","Clickable"],"mappings":"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","sourcesContent":["import { action } from \"@storybook/addon-actions\"\nimport React from \"react\"\nimport { States } from \"storybook-states\"\nimport styled from \"styled-components\"\nimport { Clickable } from \"../Clickable\"\nimport { CloseIcon } from \"../../svgs/CloseIcon\"\nimport { Flex } from \"../Flex\"\nimport { Spacer } from \"../Spacer\"\nimport { Pill, PillProps } from \"./Pill\"\n\nexport default {\n  title: \"Components/Pill\",\n}\n\nexport const _States = () => {\n  return (\n    <States<PillProps> states={[{}, { hover: true }, { focus: true }]}>\n      <Pill>Pill</Pill>\n    </States>\n  )\n}\n\n_States.story = {\n  name: \"States\",\n}\n\nconst _Demo = styled(Flex)``\n_Demo.displayName = \"Pill\"\n\nexport const Variants = () => {\n  return (\n    <States<PillProps>\n      states={[\n        {},\n        { variant: \"textRound\", children: \"Text Pill\" },\n        { variant: \"textSquare\", children: \"Text Pill\" },\n        { variant: \"filter\", children: \"Filter Pill\" },\n        {\n          variant: \"artist\",\n          children: \"Artist Name Pill\",\n          src: [\n            \"https://picsum.photos/seed/user/30/30\",\n            \"https://picsum.photos/seed/user/60/60\",\n          ],\n        },\n        {\n          variant: \"artist\",\n          children: \"Artist Name Pill\",\n        },\n        {\n          variant: \"artist\",\n          children: \"Artist Name Pill\",\n          src: \"https://picsum.photos/seed/user/30/30\",\n        },\n      ]}\n    >\n      {(props) => {\n        return (\n          <_Demo>\n            <Pill {...props}>Pill</Pill>\n\n            <Spacer mx={0.5} />\n\n            <Pill {...props} focus>\n              Pill\n            </Pill>\n\n            <Spacer mx={0.5} />\n\n            <Pill {...props} hover>\n              Pill\n            </Pill>\n\n            {props.variant !== \"artist\" && (\n              <>\n                <Spacer mx={0.5} />\n\n                <Pill {...(props as any)} active>\n                  Pill\n                </Pill>\n              </>\n            )}\n          </_Demo>\n        )\n      }}\n    </States>\n  )\n}\n\nexport const LinkExample = () => {\n  return (\n    <Pill\n      variant=\"artist\"\n      as=\"a\"\n      // TODO: Need a decent way of typing the threaded polymorphic `as` prop\n      // @ts-expect-error  MIGRATE_STRICT_MODE\n      href=\"#example\"\n    >\n      Artist Name\n    </Pill>\n  )\n}\n\nexport const LongExample = () => {\n  return (\n    <Pill maxWidth={300}>\n      Studio Museum in Harlem Artist-in-Residence (AIR) Program\n    </Pill>\n  )\n}\n\nexport const IconExample = () => {\n  return (\n    <Pill\n      variant=\"textSquare\"\n      as={Clickable}\n      onClick={action(\"onClick\")}\n      aria-label=\"Remove Painting\"\n    >\n      Painting <CloseIcon fill=\"currentColor\" ml={0.5} width={15} height={15} />\n    </Pill>\n  )\n}\n"],"file":"Pill.story.js"}
+{"version":3,"sources":["../../../src/elements/Pill/Pill.story.tsx"],"names":["title","_States","hover","focus","story","name","_Demo","Flex","displayName","Variants","variant","children","src","props","LinkExample","LongExample","LongExampleWithChildren","IconExample","Clickable"],"mappings":"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","sourcesContent":["import { action } from \"@storybook/addon-actions\"\nimport React from \"react\"\nimport { States } from \"storybook-states\"\nimport styled from \"styled-components\"\nimport { Clickable } from \"../Clickable\"\nimport { CloseIcon } from \"../../svgs/CloseIcon\"\nimport { Flex } from \"../Flex\"\nimport { Spacer } from \"../Spacer\"\nimport { Pill, PillProps } from \"./Pill\"\nimport { Sup } from \"../Sup\"\n\nexport default {\n  title: \"Components/Pill\",\n}\n\nexport const _States = () => {\n  return (\n    <States<PillProps> states={[{}, { hover: true }, { focus: true }]}>\n      <Pill>Pill</Pill>\n    </States>\n  )\n}\n\n_States.story = {\n  name: \"States\",\n}\n\nconst _Demo = styled(Flex)``\n_Demo.displayName = \"Pill\"\n\nexport const Variants = () => {\n  return (\n    <States<PillProps>\n      states={[\n        {},\n        { variant: \"textRound\", children: \"Text Pill\" },\n        { variant: \"textSquare\", children: \"Text Pill\" },\n        { variant: \"filter\", children: \"Filter Pill\" },\n        {\n          variant: \"artist\",\n          children: \"Artist Name Pill\",\n          src: [\n            \"https://picsum.photos/seed/user/30/30\",\n            \"https://picsum.photos/seed/user/60/60\",\n          ],\n        },\n        {\n          variant: \"artist\",\n          children: \"Artist Name Pill\",\n        },\n        {\n          variant: \"artist\",\n          children: \"Artist Name Pill\",\n          src: \"https://picsum.photos/seed/user/30/30\",\n        },\n      ]}\n    >\n      {(props) => {\n        return (\n          <_Demo>\n            <Pill {...props}>Pill</Pill>\n\n            <Spacer mx={0.5} />\n\n            <Pill {...props} focus>\n              Pill\n            </Pill>\n\n            <Spacer mx={0.5} />\n\n            <Pill {...props} hover>\n              Pill\n            </Pill>\n\n            {props.variant !== \"artist\" && (\n              <>\n                <Spacer mx={0.5} />\n\n                <Pill {...(props as any)} active>\n                  Pill\n                </Pill>\n              </>\n            )}\n          </_Demo>\n        )\n      }}\n    </States>\n  )\n}\n\nexport const LinkExample = () => {\n  return (\n    <Pill\n      variant=\"artist\"\n      as=\"a\"\n      // TODO: Need a decent way of typing the threaded polymorphic `as` prop\n      // @ts-expect-error  MIGRATE_STRICT_MODE\n      href=\"#example\"\n    >\n      Artist Name\n    </Pill>\n  )\n}\n\nexport const LongExample = () => {\n  return (\n    <Pill maxWidth={300}>\n      Studio Museum in Harlem Artist-in-Residence (AIR) Program\n    </Pill>\n  )\n}\n\nexport const LongExampleWithChildren = () => {\n  return (\n    <Pill maxWidth={200}>\n      Artist Series <Sup pl={0.5}>130</Sup>\n    </Pill>\n  )\n}\n\nexport const IconExample = () => {\n  return (\n    <Pill\n      variant=\"textSquare\"\n      as={Clickable}\n      onClick={action(\"onClick\")}\n      aria-label=\"Remove Painting\"\n    >\n      Painting <CloseIcon fill=\"currentColor\" ml={0.5} width={15} height={15} />\n    </Pill>\n  )\n}\n"],"file":"Pill.story.js"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@artsy/palette",
-  "version": "19.2.0",
+  "version": "19.4.1",
   "description": "Design system library for react components",
   "main": "dist/index.js",
   "publishConfig": {
@@ -178,5 +178,5 @@
       "<rootDir>/www/"
     ]
   },
-  "gitHead": "74dc238df626f38a49045b1067f0d6984f388afe"
+  "gitHead": "8ec6c09e127c1b47cd3c6b0e6e19dccb308007d5"
 }