@artsy/palette 37.2.3 → 37.3.1

package/dist/Theme.d.ts

@@ -63,7 +63,7 @@ export declare const useTheme: <T extends {
         6: string;
         12: string;
     };
-    textVariants: Record<"lg" | "md" | "sm" | "xs" | "xxxl" | "xxl" | "xl" | "lg-display" | "sm-display" | "bq", import("@artsy/palette-tokens/dist/typography/v3").TextTreatment>;
+    textVariants: Record<"lg" | "md" | "sm" | "xs" | "xxxl" | "xxl" | "xl" | "lg-display" | "sm-display" | "xxs" | "bq", import("@artsy/palette-tokens/dist/typography/v3").TextTreatment>;
 }>() => {
     theme: T;
 };

package/dist/elements/BaseTabs/BaseTab.d.ts

@@ -24,7 +24,7 @@ export declare type BaseTabProps = TextProps & {
  * or `<BaseTab as={Clickable} onClick={handleClick}>Foo</BaseTab>`
  */
 export declare const BaseTab: import("styled-components").StyledComponentClass<React.ClassAttributes<HTMLDivElement> & React.HTMLAttributes<HTMLDivElement> & import("..").BoxProps & import("styled-system").TypographyProps<Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>> & Omit<import("styled-system").ColorProps<Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>, string | number | symbol>, "color"> & {
-    variant?: import("styled-system").ResponsiveValue<"lg" | "md" | "sm" | "xs" | "xxxl" | "xxl" | "xl" | "lg-display" | "sm-display" | "bq", Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>> | undefined;
+    variant?: import("styled-system").ResponsiveValue<"lg" | "md" | "sm" | "xs" | "xxxl" | "xxl" | "xl" | "lg-display" | "sm-display" | "xxs" | "bq", Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>> | undefined;
     textColor?: import("styled-system").ResponsiveValue<"black100" | "black60" | "black30" | "black15" | "black10" | "black5" | "white100" | "blue150" | "blue100" | "brand" | "blue10" | "green150" | "green100" | "green10" | "yellow150" | "yellow100" | "yellow10" | "orange150" | "orange100" | "orange10" | "red150" | "red100" | "red10", Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>> | undefined;
     lineClamp?: number | undefined;
 } & {
@@ -33,7 +33,7 @@ export declare const BaseTab: import("styled-components").StyledComponentClass<R
     textTransform?: import("styled-system").ResponsiveValue<import("../Text").TextTransform, Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>> | undefined;
     lineClamp?: import("styled-system").ResponsiveValue<number, Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>> | undefined;
 } & BaseTabProps, any, React.ClassAttributes<HTMLDivElement> & React.HTMLAttributes<HTMLDivElement> & import("..").BoxProps & import("styled-system").TypographyProps<Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>> & Omit<import("styled-system").ColorProps<Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>, string | number | symbol>, "color"> & {
-    variant?: import("styled-system").ResponsiveValue<"lg" | "md" | "sm" | "xs" | "xxxl" | "xxl" | "xl" | "lg-display" | "sm-display" | "bq", Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>> | undefined;
+    variant?: import("styled-system").ResponsiveValue<"lg" | "md" | "sm" | "xs" | "xxxl" | "xxl" | "xl" | "lg-display" | "sm-display" | "xxs" | "bq", Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>> | undefined;
     textColor?: import("styled-system").ResponsiveValue<"black100" | "black60" | "black30" | "black15" | "black10" | "black5" | "white100" | "blue150" | "blue100" | "brand" | "blue10" | "green150" | "green100" | "green10" | "yellow150" | "yellow100" | "yellow10" | "orange150" | "orange100" | "orange10" | "red150" | "red100" | "red10", Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>> | undefined;
     lineClamp?: number | undefined;
 } & {

package/dist/elements/Sup/Sup.d.ts

@@ -2,7 +2,7 @@
 import { TextProps } from "../Text";
 export declare type SupProps = TextProps;
 export declare const Sup: import("styled-components").StyledComponentClass<import("react").ClassAttributes<HTMLDivElement> & import("react").HTMLAttributes<HTMLDivElement> & import("..").BoxProps & import("styled-system").TypographyProps<Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>> & Omit<import("styled-system").ColorProps<Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>, string | number | symbol>, "color"> & {
-    variant?: import("styled-system").ResponsiveValue<"lg" | "md" | "sm" | "xs" | "xxxl" | "xxl" | "xl" | "lg-display" | "sm-display" | "bq", Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>> | undefined;
+    variant?: import("styled-system").ResponsiveValue<"lg" | "md" | "sm" | "xs" | "xxxl" | "xxl" | "xl" | "lg-display" | "sm-display" | "xxs" | "bq", Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>> | undefined;
     textColor?: import("styled-system").ResponsiveValue<"black100" | "black60" | "black30" | "black15" | "black10" | "black5" | "white100" | "blue150" | "blue100" | "brand" | "blue10" | "green150" | "green100" | "green10" | "yellow150" | "yellow100" | "yellow10" | "orange150" | "orange100" | "orange10" | "red150" | "red100" | "red10", Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>> | undefined;
     lineClamp?: number | undefined;
 } & {
@@ -11,7 +11,7 @@ export declare const Sup: import("styled-components").StyledComponentClass<impor
     textTransform?: import("styled-system").ResponsiveValue<import("../Text").TextTransform, Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>> | undefined;
     lineClamp?: import("styled-system").ResponsiveValue<number, Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>> | undefined;
 }, any, import("react").ClassAttributes<HTMLDivElement> & import("react").HTMLAttributes<HTMLDivElement> & import("..").BoxProps & import("styled-system").TypographyProps<Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>> & Omit<import("styled-system").ColorProps<Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>, string | number | symbol>, "color"> & {
-    variant?: import("styled-system").ResponsiveValue<"lg" | "md" | "sm" | "xs" | "xxxl" | "xxl" | "xl" | "lg-display" | "sm-display" | "bq", Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>> | undefined;
+    variant?: import("styled-system").ResponsiveValue<"lg" | "md" | "sm" | "xs" | "xxxl" | "xxl" | "xl" | "lg-display" | "sm-display" | "xxs" | "bq", Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>> | undefined;
     textColor?: import("styled-system").ResponsiveValue<"black100" | "black60" | "black30" | "black15" | "black10" | "black5" | "white100" | "blue150" | "blue100" | "brand" | "blue10" | "green150" | "green100" | "green10" | "yellow150" | "yellow100" | "yellow10" | "orange150" | "orange100" | "orange10" | "red150" | "red100" | "red10", Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>> | undefined;
     lineClamp?: number | undefined;
 } & {

package/dist/elements/Text/Text.d.ts

@@ -49,7 +49,7 @@ export declare const Text: import("styled-components").StyledComponentClass<impo
      * ["md", "sm"]
      * @see {@link TextVariant}
      */
-    variant?: ResponsiveValue<"lg" | "md" | "sm" | "xs" | "xxxl" | "xxl" | "xl" | "lg-display" | "sm-display" | "bq", Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>> | undefined;
+    variant?: ResponsiveValue<"lg" | "md" | "sm" | "xs" | "xxxl" | "xxl" | "xl" | "lg-display" | "sm-display" | "xxs" | "bq", Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>> | undefined;
     textColor?: ResponsiveValue<"black100" | "black60" | "black30" | "black15" | "black10" | "black5" | "white100" | "blue150" | "blue100" | "brand" | "blue10" | "green150" | "green100" | "green10" | "yellow150" | "yellow100" | "yellow10" | "orange150" | "orange100" | "orange10" | "red150" | "red100" | "red10", Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>> | undefined;
     /**
      * Max number of lines before truncating the content with an ellipsis at the end of the last line.
@@ -72,7 +72,7 @@ export declare const Text: import("styled-components").StyledComponentClass<impo
      * ["md", "sm"]
      * @see {@link TextVariant}
      */
-    variant?: ResponsiveValue<"lg" | "md" | "sm" | "xs" | "xxxl" | "xxl" | "xl" | "lg-display" | "sm-display" | "bq", Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>> | undefined;
+    variant?: ResponsiveValue<"lg" | "md" | "sm" | "xs" | "xxxl" | "xxl" | "xl" | "lg-display" | "sm-display" | "xxs" | "bq", Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>> | undefined;
     textColor?: ResponsiveValue<"black100" | "black60" | "black30" | "black15" | "black10" | "black5" | "white100" | "blue150" | "blue100" | "brand" | "blue10" | "green150" | "green100" | "green10" | "yellow150" | "yellow100" | "yellow10" | "orange150" | "orange100" | "orange10" | "red150" | "red100" | "red10", Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>> | undefined;
     /**
      * Max number of lines before truncating the content with an ellipsis at the end of the last line.

package/dist/styles.css

@@ -521,6 +521,11 @@
   line-height: 20px;
   font-size: 13px;
 }
+.sans-xxs {
+  font-family: "ll-unica77", "Helvetica Neue", Helvetica, Arial, sans-serif;
+  line-height: 14px;
+  font-size: 11px;
+}
 .sans-bq {
   font-family: "ll-unica77", "Helvetica Neue", Helvetica, Arial, sans-serif;
   line-height: 60px;

package/dist/tokens.json

@@ -93,6 +93,10 @@
       "fontSize": "13px",
       "lineHeight": "20px"
     },
+    "xxs": {
+      "fontSize": "11px",
+      "lineHeight": "14px"
+    },
     "bq": {
       "fontSize": "50px",
       "lineHeight": "60px",

package/dist/utils/usePortal.js

@@ -6,10 +6,8 @@ Object.defineProperty(exports, "__esModule", {
 exports.usePortal = void 0;
 var _react = require("react");
 var _reactDom = require("react-dom");
-var _useDidMount = require("./useDidMount");
 var usePortal = function usePortal() {
   var appendEl = (0, _react.useRef)(null);
-  var isMounted = (0, _useDidMount.useDidMount)();
   (0, _react.useEffect)(function () {
     var _appendEl$current;
     var el = (_appendEl$current = appendEl.current) !== null && _appendEl$current !== void 0 ? _appendEl$current : document.createElement("div");
@@ -25,13 +23,13 @@ var usePortal = function usePortal() {
   }, []);
   var createPortal = (0, _react.useCallback)(function (children) {
     var _appendEl$current2;
-    if (!isMounted) return null;
+    if (typeof window === "undefined") return null;
 
     // May execute before effect runs and appendEl is set
     var el = (_appendEl$current2 = appendEl.current) !== null && _appendEl$current2 !== void 0 ? _appendEl$current2 : document.createElement("div");
     appendEl.current = el;
     return /*#__PURE__*/(0, _reactDom.createPortal)(children, el);
-  }, [isMounted]);
+  }, []);
   return {
     createPortal: createPortal
   };

package/dist/utils/usePortal.js.map

@@ -1 +1 @@
-{"version":3,"file":"usePortal.js","names":["_react","require","_reactDom","_useDidMount","usePortal","appendEl","useRef","isMounted","useDidMount","useEffect","_appendEl$current","el","current","document","createElement","body","appendChild","removeChild","e","createPortal","useCallback","children","_appendEl$current2","__createPortal__","exports"],"sources":["../../src/utils/usePortal.ts"],"sourcesContent":["import React, { useEffect, useRef, useCallback } from \"react\"\nimport { createPortal as __createPortal__ } from \"react-dom\"\nimport { useDidMount } from \"./useDidMount\"\n\nexport const usePortal = () => {\n  const appendEl = useRef<HTMLDivElement | null>(null)\n\n  const isMounted = useDidMount()\n\n  useEffect(() => {\n    const el = appendEl.current ?? document.createElement(\"div\")\n    appendEl.current = el\n\n    document.body.appendChild(el)\n\n    return () => {\n      try {\n        document.body.removeChild(el)\n      } catch (e) {\n        // Ignore\n      }\n    }\n  }, [])\n\n  const createPortal = useCallback(\n    (children: React.ReactNode): React.ReactPortal | null => {\n      if (!isMounted) return null\n\n      // May execute before effect runs and appendEl is set\n      const el = appendEl.current ?? document.createElement(\"div\")\n      appendEl.current = el\n\n      return __createPortal__(children, el)\n    },\n    [isMounted]\n  )\n\n  return { createPortal }\n}\n"],"mappings":";;;;;;AAAA,IAAAA,MAAA,GAAAC,OAAA;AACA,IAAAC,SAAA,GAAAD,OAAA;AACA,IAAAE,YAAA,GAAAF,OAAA;AAEO,IAAMG,SAAS,GAAG,SAAZA,SAASA,CAAA,EAAS;EAC7B,IAAMC,QAAQ,GAAG,IAAAC,aAAM,EAAwB,IAAI,CAAC;EAEpD,IAAMC,SAAS,GAAG,IAAAC,wBAAW,GAAE;EAE/B,IAAAC,gBAAS,EAAC,YAAM;IAAA,IAAAC,iBAAA;IACd,IAAMC,EAAE,IAAAD,iBAAA,GAAGL,QAAQ,CAACO,OAAO,cAAAF,iBAAA,cAAAA,iBAAA,GAAIG,QAAQ,CAACC,aAAa,CAAC,KAAK,CAAC;IAC5DT,QAAQ,CAACO,OAAO,GAAGD,EAAE;IAErBE,QAAQ,CAACE,IAAI,CAACC,WAAW,CAACL,EAAE,CAAC;IAE7B,OAAO,YAAM;MACX,IAAI;QACFE,QAAQ,CAACE,IAAI,CAACE,WAAW,CAACN,EAAE,CAAC;MAC/B,CAAC,CAAC,OAAOO,CAAC,EAAE;QACV;MAAA;IAEJ,CAAC;EACH,CAAC,EAAE,EAAE,CAAC;EAEN,IAAMC,YAAY,GAAG,IAAAC,kBAAW,EAC9B,UAACC,QAAyB,EAA+B;IAAA,IAAAC,kBAAA;IACvD,IAAI,CAACf,SAAS,EAAE,OAAO,IAAI;;IAE3B;IACA,IAAMI,EAAE,IAAAW,kBAAA,GAAGjB,QAAQ,CAACO,OAAO,cAAAU,kBAAA,cAAAA,kBAAA,GAAIT,QAAQ,CAACC,aAAa,CAAC,KAAK,CAAC;IAC5DT,QAAQ,CAACO,OAAO,GAAGD,EAAE;IAErB,oBAAO,IAAAY,sBAAgB,EAACF,QAAQ,EAAEV,EAAE,CAAC;EACvC,CAAC,EACD,CAACJ,SAAS,CAAC,CACZ;EAED,OAAO;IAAEY,YAAY,EAAZA;EAAa,CAAC;AACzB,CAAC;AAAAK,OAAA,CAAApB,SAAA,GAAAA,SAAA"}
+{"version":3,"file":"usePortal.js","names":["_react","require","_reactDom","usePortal","appendEl","useRef","useEffect","_appendEl$current","el","current","document","createElement","body","appendChild","removeChild","e","createPortal","useCallback","children","_appendEl$current2","window","__createPortal__","exports"],"sources":["../../src/utils/usePortal.ts"],"sourcesContent":["import React, { useEffect, useRef, useCallback } from \"react\"\nimport { createPortal as __createPortal__ } from \"react-dom\"\n\nexport const usePortal = () => {\n  const appendEl = useRef<HTMLDivElement | null>(null)\n\n  useEffect(() => {\n    const el = appendEl.current ?? document.createElement(\"div\")\n    appendEl.current = el\n\n    document.body.appendChild(el)\n\n    return () => {\n      try {\n        document.body.removeChild(el)\n      } catch (e) {\n        // Ignore\n      }\n    }\n  }, [])\n\n  const createPortal = useCallback(\n    (children: React.ReactNode): React.ReactPortal | null => {\n      if (typeof window === \"undefined\") return null\n\n      // May execute before effect runs and appendEl is set\n      const el = appendEl.current ?? document.createElement(\"div\")\n      appendEl.current = el\n\n      return __createPortal__(children, el)\n    },\n    []\n  )\n\n  return { createPortal }\n}\n"],"mappings":";;;;;;AAAA,IAAAA,MAAA,GAAAC,OAAA;AACA,IAAAC,SAAA,GAAAD,OAAA;AAEO,IAAME,SAAS,GAAG,SAAZA,SAASA,CAAA,EAAS;EAC7B,IAAMC,QAAQ,GAAG,IAAAC,aAAM,EAAwB,IAAI,CAAC;EAEpD,IAAAC,gBAAS,EAAC,YAAM;IAAA,IAAAC,iBAAA;IACd,IAAMC,EAAE,IAAAD,iBAAA,GAAGH,QAAQ,CAACK,OAAO,cAAAF,iBAAA,cAAAA,iBAAA,GAAIG,QAAQ,CAACC,aAAa,CAAC,KAAK,CAAC;IAC5DP,QAAQ,CAACK,OAAO,GAAGD,EAAE;IAErBE,QAAQ,CAACE,IAAI,CAACC,WAAW,CAACL,EAAE,CAAC;IAE7B,OAAO,YAAM;MACX,IAAI;QACFE,QAAQ,CAACE,IAAI,CAACE,WAAW,CAACN,EAAE,CAAC;MAC/B,CAAC,CAAC,OAAOO,CAAC,EAAE;QACV;MAAA;IAEJ,CAAC;EACH,CAAC,EAAE,EAAE,CAAC;EAEN,IAAMC,YAAY,GAAG,IAAAC,kBAAW,EAC9B,UAACC,QAAyB,EAA+B;IAAA,IAAAC,kBAAA;IACvD,IAAI,OAAOC,MAAM,KAAK,WAAW,EAAE,OAAO,IAAI;;IAE9C;IACA,IAAMZ,EAAE,IAAAW,kBAAA,GAAGf,QAAQ,CAACK,OAAO,cAAAU,kBAAA,cAAAA,kBAAA,GAAIT,QAAQ,CAACC,aAAa,CAAC,KAAK,CAAC;IAC5DP,QAAQ,CAACK,OAAO,GAAGD,EAAE;IAErB,oBAAO,IAAAa,sBAAgB,EAACH,QAAQ,EAAEV,EAAE,CAAC;EACvC,CAAC,EACD,EAAE,CACH;EAED,OAAO;IAAEQ,YAAY,EAAZA;EAAa,CAAC;AACzB,CAAC;AAAAM,OAAA,CAAAnB,SAAA,GAAAA,SAAA"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@artsy/palette",
-  "version": "37.2.3",
+  "version": "37.3.1",
   "description": "Design system library for react components",
   "main": "dist/index.js",
   "publishConfig": {
@@ -118,7 +118,7 @@
   },
   "dependencies": {
     "@artsy/icons": "^3.2.2",
-    "@artsy/palette-tokens": "^5.0.0",
+    "@artsy/palette-tokens": "^5.1.0",
     "@seznam/compose-react-refs": "^1.0.6",
     "@styled-system/theme-get": "^5.1.2",
     "lodash": "^4.17.21",
@@ -182,5 +182,5 @@
       "url": "http://localhost"
     }
   },
-  "gitHead": "7d85a4d1603379f85ff9bfd8cbc5817fcda96f52"
+  "gitHead": "6f48a1b8f5f6c56e8bde8a436595db5eecf1fa39"
 }