@artsy/palette 19.0.2 → 19.1.0

package/CHANGELOG.md

@@ -1,3 +1,22 @@
+# v19.1.0 (Mon Mar 07 2022)
+
+#### 🚀  Enhancement
+
+- fix: modalDialog width [#1140](https://github.com/artsy/palette/pull/1140) ([@araujobarret](https://github.com/araujobarret))
+- fix: removed line height from pill text [#1139](https://github.com/artsy/palette/pull/1139) ([@gkartalis](https://github.com/gkartalis))
+
+#### 🏠  Internal
+
+- chore(deps): update dep typescript from 4.5.5 to v4.6.2 [#1138](https://github.com/artsy/palette/pull/1138) ([@renovate-bot](https://github.com/renovate-bot))
+
+#### Authors: 3
+
+- Carlos Alberto de Araujo Barreto ([@araujobarret](https://github.com/araujobarret))
+- George Kartalis ([@gkartalis](https://github.com/gkartalis))
+- WhiteSource Renovate ([@renovate-bot](https://github.com/renovate-bot))
+
+---
+
 # v19.0.2 (Tue Feb 22 2022)
 
 #### 🐛  Bug Fix

package/dist/elements/ModalDialog/ModalDialog.js

@@ -64,7 +64,7 @@ var ModalDialog = function ModalDialog(_ref) {
       backgroundColor: "transparent"
     },
     dialogProps: {
-      width: width !== null && width !== void 0 ? width : 440
+      width: width !== null && width !== void 0 ? width : 480
     }
   }, modalProps), /*#__PURE__*/_react.default.createElement(_ModalDialogContent.ModalDialogContent, _extends({
     footer: footer,

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/elements/ModalDialog/ModalDialog.tsx"],"names":["ModalDialog","children","footer","hasLogo","onClose","title","rest","isMounted","width","boxProps","modalProps","backgroundColor","transition","opacity","transform"],"mappings":";;;;;;;AAAA;;AACA;;AACA;;AAIA;;AACA;;;;;;;;;;;;;;;;;;;;;;;;;AAIO,IAAMA,WAAuC,GAAG,SAA1CA,WAA0C,OAOjD;AAAA,MANJC,QAMI,QANJA,QAMI;AAAA,MALJC,MAKI,QALJA,MAKI;AAAA,MAJJC,OAII,QAJJA,OAII;AAAA,MAHJC,OAGI,QAHJA,OAGI;AAAA,MAFJC,KAEI,QAFJA,KAEI;AAAA,MADDC,IACC;;AACJ,MAAMC,SAAS,GAAG,+BAAlB;;AACA,uBAA6C,wBAAcD,IAAd,CAA7C;AAAA;AAAA;AAAA,MAASE,KAAT,oBAASA,KAAT;AAAA,MAAmBC,QAAnB;AAAA,MAA+BC,UAA/B;;AAEA,sBACE,6BAAC,gBAAD;AACE,IAAA,OAAO,EAAEN,OADX;AAEE,IAAA,KAAK,EACHG,SAAS,GACL;AACEI,MAAAA,eAAe,EAAE,0BADnB;AAEEC,MAAAA,UAAU,EAAE;AAFd,KADK,GAKL;AAAED,MAAAA,eAAe,EAAE;AAAnB,KARR;AAUE,IAAA,WAAW,EAAE;AAAEH,MAAAA,KAAK,EAAEA,KAAF,aAAEA,KAAF,cAAEA,KAAF,GAAW;AAAlB;AAVf,KAWME,UAXN,gBAaE,6BAAC,sCAAD;AACE,IAAA,MAAM,EAAER,MADV;AAEE,IAAA,OAAO,EAAEC,OAFX;AAGE,IAAA,OAAO,EAAEC,OAHX;AAIE,IAAA,KAAK,EAAEC,KAJT;AAKE,IAAA,KAAK,EAAC,MALR;AAME,IAAA,KAAK,EACHE,SAAS,GACL;AACEM,MAAAA,OAAO,EAAE,CADX;AAEED,MAAAA,UAAU,EAAE;AAFd,KADK,GAKL;AAAEC,MAAAA,OAAO,EAAE,CAAX;AAAcC,MAAAA,SAAS,EAAE;AAAzB;AAZR,KAcML,QAdN,GAgBGR,QAhBH,CAbF,CADF;AAkCD,CA7CM;;;AAAMD,W","sourcesContent":["import React from \"react\"\nimport { ModalBase, ModalBaseProps } from \"../Modal\"\nimport {\n  ModalDialogContent,\n  ModalDialogContentProps,\n} from \"./ModalDialogContent\"\nimport { splitBoxProps } from \"../Box\"\nimport { useDidMount } from \"../../utils/useDidMount\"\n\nexport type ModalDialogProps = ModalBaseProps & ModalDialogContentProps\n\nexport const ModalDialog: React.FC<ModalDialogProps> = ({\n  children,\n  footer,\n  hasLogo,\n  onClose,\n  title,\n  ...rest\n}) => {\n  const isMounted = useDidMount()\n  const [{ width, ...boxProps }, modalProps] = splitBoxProps(rest)\n\n  return (\n    <ModalBase\n      onClose={onClose}\n      style={\n        isMounted\n          ? {\n              backgroundColor: \"rgba(229, 229, 229, 0.5)\",\n              transition: \"background-color 250ms\",\n            }\n          : { backgroundColor: \"transparent\" }\n      }\n      dialogProps={{ width: width ?? 440 }}\n      {...modalProps}\n    >\n      <ModalDialogContent\n        footer={footer}\n        hasLogo={hasLogo}\n        onClose={onClose}\n        title={title}\n        width=\"100%\"\n        style={\n          isMounted\n            ? {\n                opacity: 1,\n                transition: \"opacity 250ms, transform 250ms\",\n              }\n            : { opacity: 0, transform: \"translateY(10px)\" }\n        }\n        {...boxProps}\n      >\n        {children}\n      </ModalDialogContent>\n    </ModalBase>\n  )\n}\n"],"file":"ModalDialog.js"}
+{"version":3,"sources":["../../../src/elements/ModalDialog/ModalDialog.tsx"],"names":["ModalDialog","children","footer","hasLogo","onClose","title","rest","isMounted","width","boxProps","modalProps","backgroundColor","transition","opacity","transform"],"mappings":";;;;;;;AAAA;;AACA;;AACA;;AAIA;;AACA;;;;;;;;;;;;;;;;;;;;;;;;;AAIO,IAAMA,WAAuC,GAAG,SAA1CA,WAA0C,OAOjD;AAAA,MANJC,QAMI,QANJA,QAMI;AAAA,MALJC,MAKI,QALJA,MAKI;AAAA,MAJJC,OAII,QAJJA,OAII;AAAA,MAHJC,OAGI,QAHJA,OAGI;AAAA,MAFJC,KAEI,QAFJA,KAEI;AAAA,MADDC,IACC;;AACJ,MAAMC,SAAS,GAAG,+BAAlB;;AACA,uBAA6C,wBAAcD,IAAd,CAA7C;AAAA;AAAA;AAAA,MAASE,KAAT,oBAASA,KAAT;AAAA,MAAmBC,QAAnB;AAAA,MAA+BC,UAA/B;;AAEA,sBACE,6BAAC,gBAAD;AACE,IAAA,OAAO,EAAEN,OADX;AAEE,IAAA,KAAK,EACHG,SAAS,GACL;AACEI,MAAAA,eAAe,EAAE,0BADnB;AAEEC,MAAAA,UAAU,EAAE;AAFd,KADK,GAKL;AAAED,MAAAA,eAAe,EAAE;AAAnB,KARR;AAUE,IAAA,WAAW,EAAE;AAAEH,MAAAA,KAAK,EAAEA,KAAF,aAAEA,KAAF,cAAEA,KAAF,GAAW;AAAlB;AAVf,KAWME,UAXN,gBAaE,6BAAC,sCAAD;AACE,IAAA,MAAM,EAAER,MADV;AAEE,IAAA,OAAO,EAAEC,OAFX;AAGE,IAAA,OAAO,EAAEC,OAHX;AAIE,IAAA,KAAK,EAAEC,KAJT;AAKE,IAAA,KAAK,EAAC,MALR;AAME,IAAA,KAAK,EACHE,SAAS,GACL;AACEM,MAAAA,OAAO,EAAE,CADX;AAEED,MAAAA,UAAU,EAAE;AAFd,KADK,GAKL;AAAEC,MAAAA,OAAO,EAAE,CAAX;AAAcC,MAAAA,SAAS,EAAE;AAAzB;AAZR,KAcML,QAdN,GAgBGR,QAhBH,CAbF,CADF;AAkCD,CA7CM;;;AAAMD,W","sourcesContent":["import React from \"react\"\nimport { ModalBase, ModalBaseProps } from \"../Modal\"\nimport {\n  ModalDialogContent,\n  ModalDialogContentProps,\n} from \"./ModalDialogContent\"\nimport { splitBoxProps } from \"../Box\"\nimport { useDidMount } from \"../../utils/useDidMount\"\n\nexport type ModalDialogProps = ModalBaseProps & ModalDialogContentProps\n\nexport const ModalDialog: React.FC<ModalDialogProps> = ({\n  children,\n  footer,\n  hasLogo,\n  onClose,\n  title,\n  ...rest\n}) => {\n  const isMounted = useDidMount()\n  const [{ width, ...boxProps }, modalProps] = splitBoxProps(rest)\n\n  return (\n    <ModalBase\n      onClose={onClose}\n      style={\n        isMounted\n          ? {\n              backgroundColor: \"rgba(229, 229, 229, 0.5)\",\n              transition: \"background-color 250ms\",\n            }\n          : { backgroundColor: \"transparent\" }\n      }\n      dialogProps={{ width: width ?? 480 }}\n      {...modalProps}\n    >\n      <ModalDialogContent\n        footer={footer}\n        hasLogo={hasLogo}\n        onClose={onClose}\n        title={title}\n        width=\"100%\"\n        style={\n          isMounted\n            ? {\n                opacity: 1,\n                transition: \"opacity 250ms, transform 250ms\",\n              }\n            : { opacity: 0, transform: \"translateY(10px)\" }\n        }\n        {...boxProps}\n      >\n        {children}\n      </ModalDialogContent>\n    </ModalBase>\n  )\n}\n"],"file":"ModalDialog.js"}

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

@@ -12,7 +12,7 @@ export declare type PillProps = ClickableProps & {
     hover?: boolean;
 } & ({
     variant?: Extract<PillVariant, "textRound" | "textSquare" | "filter">;
-    /** Forces active state */
+    /** Forces active state & border-color to black60 */
     active?: boolean;
 } | {
     /** `"artist"` pills do not have an `active` state */

package/dist/elements/Pill/Pill.js

@@ -72,8 +72,7 @@ var Pill = function Pill(_ref) {
     // Intentionally empty string
     alt: ""
   })), /*#__PURE__*/_react.default.createElement(_Text.Text, _extends({
-    variant: "xs",
-    lineHeight: 1
+    variant: "xs"
   }, typeof children === "string" ? // Simple label — handle the text overflow
   {
     overflowEllipsis: true

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,IADV;AAEE,IAAA,UAAU,EAAE;AAFd,KAGO,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,GAPN,GASGN,QATH,CAlBF,CADF;AAgCD,CAjCM;;;AAAMD,I;AAmCbA,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 */\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        lineHeight={1}\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,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"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@artsy/palette",
-  "version": "19.0.2",
+  "version": "19.1.0",
   "description": "Design system library for react components",
   "main": "dist/index.js",
   "publishConfig": {
@@ -111,7 +111,7 @@
     "storybook-states": "1.2.0",
     "styled-components": "4.3.2",
     "ts-node": "8.1.0",
-    "typescript": "4.5.5",
+    "typescript": "4.6.2",
     "typescript-styled-plugin": "0.10.0",
     "webpack": "5"
   },
@@ -178,5 +178,5 @@
       "<rootDir>/www/"
     ]
   },
-  "gitHead": "6dedb2e28b57add22bc991aedf18fec317424eaa"
+  "gitHead": "06461ca0c7d6b3bb043e024ac484d887b732784b"
 }