@artsy/palette 22.1.0 → 23.0.0

package/CHANGELOG.md

@@ -1,3 +1,39 @@
+# v23.0.0 (Fri Jul 15 2022)
+
+#### 💥  Breaking Change
+
+- chore(v2): drops support for v2 completely [#1194](https://github.com/artsy/palette/pull/1194) ([@dzucconi](https://github.com/dzucconi))
+
+#### 🐛  Bug Fix
+
+- chore(theme): default text variant export should be v3 ([@dzucconi](https://github.com/dzucconi))
+- chore(readmore): drops support for v2 ([@dzucconi](https://github.com/dzucconi))
+- chore(html): drops support for v2 ([@dzucconi](https://github.com/dzucconi))
+- chore(skip): drops support for v2 ([@dzucconi](https://github.com/dzucconi))
+- chore(checkbox): drops support for v2 ([@dzucconi](https://github.com/dzucconi))
+- chore(labeledinput): drops support for v2 ([@dzucconi](https://github.com/dzucconi))
+- chore(expandable): drops support for v2 ([@dzucconi](https://github.com/dzucconi))
+- chore(pagination): drops support for v2 ([@dzucconi](https://github.com/dzucconi))
+- chore(marquee): drops support for v2 ([@dzucconi](https://github.com/dzucconi))
+- chore(message): drops support for v2 ([@dzucconi](https://github.com/dzucconi))
+- chore(progressbar): drops support for v2 ([@dzucconi](https://github.com/dzucconi))
+- chore(progressdots): drops support for v2 ([@dzucconi](https://github.com/dzucconi))
+- chore(entityheader): drops support for v2 ([@dzucconi](https://github.com/dzucconi))
+- chore(radio): drops support for v2 ([@dzucconi](https://github.com/dzucconi))
+- chore(tabs): drops support for v2 ([@dzucconi](https://github.com/dzucconi))
+- chore(cards): drops support for v2 ([@dzucconi](https://github.com/dzucconi))
+- chore(avatar): drops support for v2 ([@dzucconi](https://github.com/dzucconi))
+- chore(basetabs): drops support for v2 ([@dzucconi](https://github.com/dzucconi))
+- chore: removes unused tags component ([@dzucconi](https://github.com/dzucconi))
+- chore(stepper): drops support for v2 ([@dzucconi](https://github.com/dzucconi))
+- chore(text): drops support for v2 ([@dzucconi](https://github.com/dzucconi))
+
+#### Authors: 1
+
+- Damon ([@dzucconi](https://github.com/dzucconi))
+
+---
+
 # v22.1.0 (Thu Jul 14 2022)
 
 #### 🚀  Enhancement

package/dist/Theme.d.ts

@@ -2,7 +2,7 @@ import React from "react";
 import { Theme as TTheme } from "./themes";
 export { THEME_V2, THEME_V3 } from "./themes";
 export * from "@artsy/palette-tokens/dist/themes/v2";
-export { TextVariant } from "@artsy/palette-tokens/dist/typography/types";
+export { TextVariant } from "@artsy/palette-tokens/dist/typography/v3";
 declare const THEMES: {
     v2: {
         id: string;
@@ -17,7 +17,6 @@ declare const THEMES: {
         colors: {
             black100: string;
             black80: string;
-            /** Utilize only the v2 theme */
             black60: string;
             black30: string;
             black10: string;
@@ -247,7 +246,7 @@ declare const THEMES: {
                 };
             };
         };
-        textVariants: Record<string, Record<"largeTitle" | "title" | "subtitle" | "text" | "mediumText" | "caption" | "small", import("@artsy/palette-tokens/dist/text").TextTreatment>>;
+        textVariants: Record<string, Record<"caption" | "small" | "title" | "text" | "largeTitle" | "subtitle" | "mediumText", import("@artsy/palette-tokens/dist/text").TextTreatment>>;
     };
     v3: {
         id: string;
@@ -277,7 +276,7 @@ declare const THEMES: {
             yellow10: string;
             orange150: string;
             orange100: string;
-            orange10: string; /** Typeguard for v2 */
+            orange10: string;
             red150: string;
             red100: string;
             red10: string;
@@ -344,7 +343,6 @@ export declare const isThemeV2: (theme: TTheme) => theme is {
     colors: {
         black100: string;
         black80: string;
-        /** Utilize only the v2 theme */
         black60: string;
         black30: string;
         black10: string;
@@ -574,7 +572,7 @@ export declare const isThemeV2: (theme: TTheme) => theme is {
             };
         };
     };
-    textVariants: Record<string, Record<"largeTitle" | "title" | "subtitle" | "text" | "mediumText" | "caption" | "small", import("@artsy/palette-tokens/dist/text").TextTreatment>>;
+    textVariants: Record<string, Record<"caption" | "small" | "title" | "text" | "largeTitle" | "subtitle" | "mediumText", import("@artsy/palette-tokens/dist/text").TextTreatment>>;
 };
 /** Typeguard for v3 */
 export declare const isThemeV3: (theme: TTheme) => theme is {
@@ -605,7 +603,7 @@ export declare const isThemeV3: (theme: TTheme) => theme is {
         yellow10: string;
         orange150: string;
         orange100: string;
-        orange10: string; /** Typeguard for v2 */
+        orange10: string;
         red150: string;
         red100: string;
         red10: string;

package/dist/Theme.js

@@ -33,7 +33,7 @@ Object.defineProperty(exports, "THEME_V3", {
 Object.defineProperty(exports, "TextVariant", {
   enumerable: true,
   get: function get() {
-    return _types.TextVariant;
+    return _v2.TextVariant;
   }
 });
 exports.useThemeConfig = exports.useTheme = exports.isThemeV3 = exports.isThemeV2 = exports.getThemeConfig = exports.ThemeProviderV3 = exports.ThemeProviderV2 = exports.Theme = void 0;
@@ -60,7 +60,7 @@ Object.keys(_v).forEach(function (key) {
   });
 });
 
-var _types = require("@artsy/palette-tokens/dist/typography/types");
+var _v2 = require("@artsy/palette-tokens/dist/typography/v3");
 
 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); }
 

package/dist/Theme.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/Theme.tsx"],"names":["GridThemeProvider","children","THEME_V2","grid","THEMES","v2","v3","THEME_V3","Theme","theme","themeOrThemeKey","ThemeProviderV2","ThemeProviderV3","useTheme","ThemeContext","useThemeConfig","id","getThemeConfig","props","isThemeV2","isThemeV3"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;;AACA;;AAIA;;AACA;;AAGA;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AAEA;;;;;;AATA;AACA;AACA;;AASA;AACA;AACA;AACA,IAAMA,iBAAiB,GAAG,SAApBA,iBAAoB,OAAkB;AAAA,MAAfC,QAAe,QAAfA,QAAe;AAC1C,sBACE,6BAAC,sCAAD;AAAyB,IAAA,SAAS,EAAEC,iBAASC;AAA7C,KACGF,QADH,CADF;AAKD,CAND;;AAAMD,iB;AAQN,IAAMI,MAAM,GAAG;AACbC,EAAAA,EAAE,EAAEH,gBADS;AAEbI,EAAAA,EAAE,EAAEC;AAFS,CAAf;AAKA;AACA;AACA;;AACO,IAAMC,KAAyD,GAAG,SAA5DA,KAA4D,QAGnE;AAAA,MAFJP,QAEI,SAFJA,QAEI;AAAA,0BADJQ,KACI;AAAA,MADGC,eACH,4BADqBR,gBACrB;AACJ,MAAMO,KAAK,GACTC,eAAe,KAAK,IAApB,IAA4BA,eAAe,KAAK,IAAhD,GACIN,MAAM,CAACM,eAAD,CADV,GAEIA,eAHN;AAKA,sBACE,6BAAC,+BAAD;AAAe,IAAA,KAAK,EAAED;AAAtB,kBACE,6BAAC,iBAAD,QAAoBR,QAApB,CADF,CADF;AAKD,CAdM;;;AAAMO,K;;AAgBb;AACO,IAAMG,eAAyB,GAAG,SAA5BA,eAA4B,QAAkB;AAAA,MAAfV,QAAe,SAAfA,QAAe;AACzD,sBAAO,6BAAC,+BAAD;AAAe,IAAA,KAAK,EAAEC;AAAtB,KAAiCD,QAAjC,CAAP;AACD,CAFM;;;AAAMU,e;;AAIb;AACO,IAAMC,eAAyB,GAAG,SAA5BA,eAA4B,QAAkB;AAAA,MAAfX,QAAe,SAAfA,QAAe;AACzD,sBAAO,6BAAC,+BAAD;AAAe,IAAA,KAAK,EAAEM;AAAtB,KAAiCN,QAAjC,CAAP;AACD,CAFM;;;AAAMW,e;;AAIb;AACO,IAAMC,QAAQ,GAAG,SAAXA,QAAW,GAAwB;AAC9C,MAAMJ,KAAQ,GAAG,uBAAWK,8BAAX,CAAjB;AACA,SAAO;AAAEL,IAAAA,KAAK,EAALA;AAAF,GAAP;AACD,CAHM;AAKP;;;;;AACO,IAAMM,cAAc,GAAG,SAAjBA,cAAiB,QAA+C;AAAA,MAAtCV,EAAsC,SAAtCA,EAAsC;AAAA,MAAlCC,EAAkC,SAAlCA,EAAkC;;AAC3E,kBAAiCO,QAAQ,EAAzC;AAAA,kCAAQJ,KAAR;AAAA,MAAQA,KAAR,gCAAgB;AAAEO,IAAAA,EAAE,EAAE;AAAN,GAAhB;;AACA,SAAOP,KAAK,CAACO,EAAN,KAAa,IAAb,GAAoBX,EAApB,GAAyBC,EAAhC;AACD,CAHM;AAKP;;;;;AACO,IAAMW,cAAc,GAAG,SAAjBA,cAAiB,CAC5BC,KAD4B,SAGlB;AAAA,MADRb,EACQ,SADRA,EACQ;AAAA,MADJC,EACI,SADJA,EACI;AACV,qBAAiCY,KAAjC,CAAQT,KAAR;AAAA,MAAQA,KAAR,6BAAgB;AAAEO,IAAAA,EAAE,EAAE;AAAN,GAAhB;AACA,SAAOP,KAAK,CAACO,EAAN,KAAa,IAAb,GAAoBX,EAApB,GAAyBC,EAAhC;AACD,CANM;AAQP;;;;;AACO,IAAMa,SAAS,GAAG,SAAZA,SAAY,CAACV,KAAD,EAAqC;AAC5D,SAAOA,KAAK,CAACO,EAAN,KAAa,IAApB;AACD,CAFM;AAIP;;;;;AACO,IAAMI,SAAS,GAAG,SAAZA,SAAY,CAACX,KAAD,EAAqC;AAC5D,SAAOA,KAAK,CAACO,EAAN,KAAa,IAApB;AACD,CAFM","sourcesContent":["import React, { useContext } from \"react\"\nimport { GridThemeProvider as StyledGridThemeProvider } from \"styled-bootstrap-grid\"\n// FIXME: Upgrading styled-components types to get `ThemeContext` breaks many other typings.\n// Notably: `Icon` and `Sans|Serif`\n// @ts-expect-error  MIGRATE_STRICT_MODE\nimport { ThemeContext, ThemeProvider } from \"styled-components\"\nimport { Theme as TTheme, THEME_V2, THEME_V3, ThemeV2, ThemeV3 } from \"./themes\"\n\nexport { THEME_V2, THEME_V3 } from \"./themes\"\nexport * from \"@artsy/palette-tokens/dist/themes/v2\"\n\nexport { TextVariant } from \"@artsy/palette-tokens/dist/typography/types\"\n\n/**\n * Creates a new Grid context for web. This glues the v2 grid theme into any other theme.\n */\nconst GridThemeProvider = ({ children }) => {\n  return (\n    <StyledGridThemeProvider gridTheme={THEME_V2.grid}>\n      {children}\n    </StyledGridThemeProvider>\n  )\n}\n\nconst THEMES = {\n  v2: THEME_V2,\n  v3: THEME_V3,\n}\n\n/**\n * A wrapper component for passing down the Artsy theme context\n */\nexport const Theme: React.FC<{ theme?: TTheme | keyof typeof THEMES }> = ({\n  children,\n  theme: themeOrThemeKey = THEME_V2,\n}) => {\n  const theme =\n    themeOrThemeKey === \"v2\" || themeOrThemeKey === \"v3\"\n      ? THEMES[themeOrThemeKey]\n      : themeOrThemeKey\n\n  return (\n    <ThemeProvider theme={theme}>\n      <GridThemeProvider>{children}</GridThemeProvider>\n    </ThemeProvider>\n  )\n}\n\n/** Utilize only the v2 theme */\nexport const ThemeProviderV2: React.FC = ({ children }) => {\n  return <ThemeProvider theme={THEME_V2}>{children}</ThemeProvider>\n}\n\n/** Utilize only the v3 theme */\nexport const ThemeProviderV3: React.FC = ({ children }) => {\n  return <ThemeProvider theme={THEME_V3}>{children}</ThemeProvider>\n}\n\n/** Returns the current theme */\nexport const useTheme = <T extends TTheme>() => {\n  const theme: T = useContext(ThemeContext)\n  return { theme }\n}\n\n/** Returns a config specific to the current theme. For use in React components */\nexport const useThemeConfig = <T, U>({ v2, v3 }: { v2: T; v3: U }): U | T => {\n  const { theme = { id: \"v2\" } } = useTheme()\n  return theme.id === \"v2\" ? v2 : v3\n}\n\n/** Returns a config specific to the current theme. For use in styled-components */\nexport const getThemeConfig = <T, U>(\n  props: Record<string, any>,\n  { v2, v3 }: { v2: T; v3: U }\n): U | T => {\n  const { theme = { id: \"v2\" } } = props\n  return theme.id === \"v2\" ? v2 : v3\n}\n\n/** Typeguard for v2 */\nexport const isThemeV2 = (theme: TTheme): theme is ThemeV2 => {\n  return theme.id === \"v2\"\n}\n\n/** Typeguard for v3 */\nexport const isThemeV3 = (theme: TTheme): theme is ThemeV3 => {\n  return theme.id === \"v3\"\n}\n"],"file":"Theme.js"}
+{"version":3,"sources":["../src/Theme.tsx"],"names":["GridThemeProvider","children","THEME_V2","grid","THEMES","v2","v3","THEME_V3","Theme","theme","themeOrThemeKey","ThemeProviderV2","ThemeProviderV3","useTheme","ThemeContext","useThemeConfig","id","getThemeConfig","props","isThemeV2","isThemeV3"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;;AACA;;AAIA;;AACA;;AAGA;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AAEA;;;;;;AATA;AACA;AACA;;AASA;AACA;AACA;AACA,IAAMA,iBAAiB,GAAG,SAApBA,iBAAoB,OAAkB;AAAA,MAAfC,QAAe,QAAfA,QAAe;AAC1C,sBACE,6BAAC,sCAAD;AAAyB,IAAA,SAAS,EAAEC,iBAASC;AAA7C,KACGF,QADH,CADF;AAKD,CAND;;AAAMD,iB;AAQN,IAAMI,MAAM,GAAG;AACbC,EAAAA,EAAE,EAAEH,gBADS;AAEbI,EAAAA,EAAE,EAAEC;AAFS,CAAf;AAKA;AACA;AACA;;AACO,IAAMC,KAAyD,GAAG,SAA5DA,KAA4D,QAGnE;AAAA,MAFJP,QAEI,SAFJA,QAEI;AAAA,0BADJQ,KACI;AAAA,MADGC,eACH,4BADqBR,gBACrB;AACJ,MAAMO,KAAK,GACTC,eAAe,KAAK,IAApB,IAA4BA,eAAe,KAAK,IAAhD,GACIN,MAAM,CAACM,eAAD,CADV,GAEIA,eAHN;AAKA,sBACE,6BAAC,+BAAD;AAAe,IAAA,KAAK,EAAED;AAAtB,kBACE,6BAAC,iBAAD,QAAoBR,QAApB,CADF,CADF;AAKD,CAdM;;;AAAMO,K;;AAgBb;AACO,IAAMG,eAAyB,GAAG,SAA5BA,eAA4B,QAAkB;AAAA,MAAfV,QAAe,SAAfA,QAAe;AACzD,sBAAO,6BAAC,+BAAD;AAAe,IAAA,KAAK,EAAEC;AAAtB,KAAiCD,QAAjC,CAAP;AACD,CAFM;;;AAAMU,e;;AAIb;AACO,IAAMC,eAAyB,GAAG,SAA5BA,eAA4B,QAAkB;AAAA,MAAfX,QAAe,SAAfA,QAAe;AACzD,sBAAO,6BAAC,+BAAD;AAAe,IAAA,KAAK,EAAEM;AAAtB,KAAiCN,QAAjC,CAAP;AACD,CAFM;;;AAAMW,e;;AAIb;AACO,IAAMC,QAAQ,GAAG,SAAXA,QAAW,GAAwB;AAC9C,MAAMJ,KAAQ,GAAG,uBAAWK,8BAAX,CAAjB;AACA,SAAO;AAAEL,IAAAA,KAAK,EAALA;AAAF,GAAP;AACD,CAHM;AAKP;;;;;AACO,IAAMM,cAAc,GAAG,SAAjBA,cAAiB,QAA+C;AAAA,MAAtCV,EAAsC,SAAtCA,EAAsC;AAAA,MAAlCC,EAAkC,SAAlCA,EAAkC;;AAC3E,kBAAiCO,QAAQ,EAAzC;AAAA,kCAAQJ,KAAR;AAAA,MAAQA,KAAR,gCAAgB;AAAEO,IAAAA,EAAE,EAAE;AAAN,GAAhB;;AACA,SAAOP,KAAK,CAACO,EAAN,KAAa,IAAb,GAAoBX,EAApB,GAAyBC,EAAhC;AACD,CAHM;AAKP;;;;;AACO,IAAMW,cAAc,GAAG,SAAjBA,cAAiB,CAC5BC,KAD4B,SAGlB;AAAA,MADRb,EACQ,SADRA,EACQ;AAAA,MADJC,EACI,SADJA,EACI;AACV,qBAAiCY,KAAjC,CAAQT,KAAR;AAAA,MAAQA,KAAR,6BAAgB;AAAEO,IAAAA,EAAE,EAAE;AAAN,GAAhB;AACA,SAAOP,KAAK,CAACO,EAAN,KAAa,IAAb,GAAoBX,EAApB,GAAyBC,EAAhC;AACD,CANM;AAQP;;;;;AACO,IAAMa,SAAS,GAAG,SAAZA,SAAY,CAACV,KAAD,EAAqC;AAC5D,SAAOA,KAAK,CAACO,EAAN,KAAa,IAApB;AACD,CAFM;AAIP;;;;;AACO,IAAMI,SAAS,GAAG,SAAZA,SAAY,CAACX,KAAD,EAAqC;AAC5D,SAAOA,KAAK,CAACO,EAAN,KAAa,IAApB;AACD,CAFM","sourcesContent":["import React, { useContext } from \"react\"\nimport { GridThemeProvider as StyledGridThemeProvider } from \"styled-bootstrap-grid\"\n// FIXME: Upgrading styled-components types to get `ThemeContext` breaks many other typings.\n// Notably: `Icon` and `Sans|Serif`\n// @ts-expect-error  MIGRATE_STRICT_MODE\nimport { ThemeContext, ThemeProvider } from \"styled-components\"\nimport { Theme as TTheme, THEME_V2, THEME_V3, ThemeV2, ThemeV3 } from \"./themes\"\n\nexport { THEME_V2, THEME_V3 } from \"./themes\"\nexport * from \"@artsy/palette-tokens/dist/themes/v2\"\n\nexport { TextVariant } from \"@artsy/palette-tokens/dist/typography/v3\"\n\n/**\n * Creates a new Grid context for web. This glues the v2 grid theme into any other theme.\n */\nconst GridThemeProvider = ({ children }) => {\n  return (\n    <StyledGridThemeProvider gridTheme={THEME_V2.grid}>\n      {children}\n    </StyledGridThemeProvider>\n  )\n}\n\nconst THEMES = {\n  v2: THEME_V2,\n  v3: THEME_V3,\n}\n\n/**\n * A wrapper component for passing down the Artsy theme context\n */\nexport const Theme: React.FC<{ theme?: TTheme | keyof typeof THEMES }> = ({\n  children,\n  theme: themeOrThemeKey = THEME_V2,\n}) => {\n  const theme =\n    themeOrThemeKey === \"v2\" || themeOrThemeKey === \"v3\"\n      ? THEMES[themeOrThemeKey]\n      : themeOrThemeKey\n\n  return (\n    <ThemeProvider theme={theme}>\n      <GridThemeProvider>{children}</GridThemeProvider>\n    </ThemeProvider>\n  )\n}\n\n/** Utilize only the v2 theme */\nexport const ThemeProviderV2: React.FC = ({ children }) => {\n  return <ThemeProvider theme={THEME_V2}>{children}</ThemeProvider>\n}\n\n/** Utilize only the v3 theme */\nexport const ThemeProviderV3: React.FC = ({ children }) => {\n  return <ThemeProvider theme={THEME_V3}>{children}</ThemeProvider>\n}\n\n/** Returns the current theme */\nexport const useTheme = <T extends TTheme>() => {\n  const theme: T = useContext(ThemeContext)\n  return { theme }\n}\n\n/** Returns a config specific to the current theme. For use in React components */\nexport const useThemeConfig = <T, U>({ v2, v3 }: { v2: T; v3: U }): U | T => {\n  const { theme = { id: \"v2\" } } = useTheme()\n  return theme.id === \"v2\" ? v2 : v3\n}\n\n/** Returns a config specific to the current theme. For use in styled-components */\nexport const getThemeConfig = <T, U>(\n  props: Record<string, any>,\n  { v2, v3 }: { v2: T; v3: U }\n): U | T => {\n  const { theme = { id: \"v2\" } } = props\n  return theme.id === \"v2\" ? v2 : v3\n}\n\n/** Typeguard for v2 */\nexport const isThemeV2 = (theme: TTheme): theme is ThemeV2 => {\n  return theme.id === \"v2\"\n}\n\n/** Typeguard for v3 */\nexport const isThemeV3 = (theme: TTheme): theme is ThemeV3 => {\n  return theme.id === \"v3\"\n}\n"],"file":"Theme.js"}

package/dist/elements/Avatar/Avatar.js

@@ -7,8 +7,6 @@ exports.Avatar = void 0;
 
 var _react = _interopRequireDefault(require("react"));
 
-var _Theme = require("../../Theme");
-
 var _Box = require("../Box");
 
 var _Flex = require("../Flex");
@@ -17,8 +15,6 @@ var _Image = require("../Image");
 
 var _Text = require("../Text");
 
-var _tokens = require("./tokens");
-
 var _excluded = ["src", "initials", "size", "lazyLoad"];
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
@@ -47,10 +43,31 @@ var LENGTHS = {
   sm: 3,
   md: 4
 };
+var TOKENS = {
+  fontWeight: "normal",
+  color: "black100",
+  bg: "transparent",
+  xxs: {
+    diameter: 30,
+    variant: "xs"
+  },
+  xs: {
+    diameter: 45,
+    variant: "sm-display"
+  },
+  sm: {
+    diameter: 70,
+    variant: "md"
+  },
+  md: {
+    diameter: 100,
+    variant: "lg-display"
+  }
+};
 /** An circular Avatar component containing an image or initials */
 
 var Avatar = function Avatar(_ref) {
-  var _tokens$size;
+  var _TOKENS$size;
 
   var src = _ref.src,
       initials = _ref.initials,
@@ -65,18 +82,13 @@ var Avatar = function Avatar(_ref) {
       boxProps = _splitBoxProps2[0],
       imageProps = _splitBoxProps2[1];
 
-  var tokens = (0, _Theme.useThemeConfig)({
-    v2: _tokens.V2_TOKENS,
-    v3: _tokens.V3_TOKENS
-  });
-
-  var _ref2 = (_tokens$size = tokens[size]) !== null && _tokens$size !== void 0 ? _tokens$size : _tokens.V3_TOKENS.sm,
+  var _ref2 = (_TOKENS$size = TOKENS[size]) !== null && _TOKENS$size !== void 0 ? _TOKENS$size : TOKENS.sm,
       diameter = _ref2.diameter,
       variant = _ref2.variant;
 
   return /*#__PURE__*/_react.default.createElement(_Flex.Flex, _extends({
     size: diameter,
-    bg: tokens.bg,
+    bg: TOKENS.bg,
     border: src ? "transparent" : "1px solid",
     borderColor: "black15",
     borderRadius: "50%",
@@ -86,8 +98,8 @@ var Avatar = function Avatar(_ref) {
     overflow: "hidden"
   }, boxProps), initials && /*#__PURE__*/_react.default.createElement(_Text.Text, {
     variant: variant,
-    fontWeight: tokens.fontWeight,
-    color: tokens.color,
+    fontWeight: TOKENS.fontWeight,
+    color: TOKENS.color,
     lineHeight: 1
   }, initials.slice(0, LENGTHS[size])), src && /*#__PURE__*/_react.default.createElement(_Flex.Flex, {
     position: "absolute",

package/dist/elements/Avatar/Avatar.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/elements/Avatar/Avatar.tsx"],"names":["LENGTHS","xxs","xs","sm","md","Avatar","src","initials","size","lazyLoad","rest","boxProps","imageProps","tokens","v2","V2_TOKENS","v3","V3_TOKENS","diameter","variant","bg","fontWeight","color","slice"],"mappings":";;;;;;;AAAA;;AACA;;AACA;;AACA;;AACA;;AACA;;AACA;;;;;;;;;;;;;;;;;;;;;;;;AASA,IAAMA,OAAO,GAAG;AACdC,EAAAA,GAAG,EAAE,CADS;AAEdC,EAAAA,EAAE,EAAE,CAFU;AAGdC,EAAAA,EAAE,EAAE,CAHU;AAIdC,EAAAA,EAAE,EAAE;AAJU,CAAhB;AAOA;;AACO,IAAMC,MAA6B,GAAG,SAAhCA,MAAgC,OAMvC;AAAA;;AAAA,MALJC,GAKI,QALJA,GAKI;AAAA,MAJJC,QAII,QAJJA,QAII;AAAA,uBAHJC,IAGI;AAAA,MAHJA,IAGI,0BAHG,IAGH;AAAA,2BAFJC,QAEI;AAAA,MAFJA,QAEI,8BAFO,KAEP;AAAA,MADDC,IACC;;AACJ,uBAA+B,wBAAcA,IAAd,CAA/B;AAAA;AAAA,MAAOC,QAAP;AAAA,MAAiBC,UAAjB;;AAEA,MAAMC,MAAM,GAAG,2BAAe;AAC5BC,IAAAA,EAAE,EAAEC,iBADwB;AAE5BC,IAAAA,EAAE,EAAEC;AAFwB,GAAf,CAAf;;AAKA,8BAA8BJ,MAAM,CAACL,IAAD,CAApC,uDAA8CS,kBAAUd,EAAxD;AAAA,MAAQe,QAAR,SAAQA,QAAR;AAAA,MAAkBC,OAAlB,SAAkBA,OAAlB;;AAEA,sBACE,6BAAC,UAAD;AACE,IAAA,IAAI,EAAED,QADR;AAEE,IAAA,EAAE,EAAEL,MAAM,CAACO,EAFb;AAGE,IAAA,MAAM,EAAEd,GAAG,GAAG,aAAH,GAAmB,WAHhC;AAIE,IAAA,WAAW,EAAC,SAJd;AAKE,IAAA,YAAY,EAAC,KALf;AAME,IAAA,UAAU,EAAC,QANb;AAOE,IAAA,cAAc,EAAC,QAPjB;AAQE,IAAA,QAAQ,EAAC,UARX;AASE,IAAA,QAAQ,EAAC;AATX,KAUMK,QAVN,GAYGJ,QAAQ,iBACP,6BAAC,UAAD;AACE,IAAA,OAAO,EAAEY,OADX;AAEE,IAAA,UAAU,EAAEN,MAAM,CAACQ,UAFrB;AAGE,IAAA,KAAK,EAAER,MAAM,CAACS,KAHhB;AAIE,IAAA,UAAU,EAAE;AAJd,KAMGf,QAAQ,CAACgB,KAAT,CAAe,CAAf,EAAkBvB,OAAO,CAACQ,IAAD,CAAzB,CANH,CAbJ,EAuBGF,GAAG,iBACF,6BAAC,UAAD;AAAM,IAAA,QAAQ,EAAC,UAAf;AAA0B,IAAA,GAAG,EAAE,CAA/B;AAAkC,IAAA,IAAI,EAAE,CAAxC;AAA2C,IAAA,KAAK,EAAC,MAAjD;AAAwD,IAAA,MAAM,EAAC;AAA/D,kBACE,6BAAC,YAAD;AACE,IAAA,GAAG,EAAEA,GADP;AAEE,IAAA,KAAK,EAAC,MAFR;AAGE,IAAA,MAAM,EAAC,MAHT;AAIE,IAAA,QAAQ,EAAEG,QAJZ;AAKE,IAAA,GAAG,EAAEF,QAAF,aAAEA,QAAF,cAAEA,QAAF,GAAc;AALnB,KAMMK,UANN,EADF,CAxBJ,CADF;AAsCD,CAtDM;;;AAAMP,M","sourcesContent":["import React from \"react\"\nimport { useThemeConfig } from \"../../Theme\"\nimport { splitBoxProps } from \"../Box\"\nimport { Flex, FlexProps } from \"../Flex\"\nimport { Image, ImageProps } from \"../Image\"\nimport { Text } from \"../Text\"\nimport { V2_TOKENS, V3_TOKENS } from \"./tokens\"\n\nexport interface AvatarProps extends FlexProps, Partial<ImageProps> {\n  /** If an image is missing, show initials instead */\n  initials?: string\n  /** The size of the Avatar */\n  size?: \"xxs\" | \"xs\" | \"sm\" | \"md\"\n}\n\nconst LENGTHS = {\n  xxs: 2,\n  xs: 2,\n  sm: 3,\n  md: 4,\n}\n\n/** An circular Avatar component containing an image or initials */\nexport const Avatar: React.FC<AvatarProps> = ({\n  src,\n  initials,\n  size = \"md\",\n  lazyLoad = false,\n  ...rest\n}) => {\n  const [boxProps, imageProps] = splitBoxProps(rest)\n\n  const tokens = useThemeConfig({\n    v2: V2_TOKENS,\n    v3: V3_TOKENS,\n  })\n\n  const { diameter, variant } = tokens[size] ?? V3_TOKENS.sm\n\n  return (\n    <Flex\n      size={diameter}\n      bg={tokens.bg}\n      border={src ? \"transparent\" : \"1px solid\"}\n      borderColor=\"black15\"\n      borderRadius=\"50%\"\n      alignItems=\"center\"\n      justifyContent=\"center\"\n      position=\"relative\"\n      overflow=\"hidden\"\n      {...boxProps}\n    >\n      {initials && (\n        <Text\n          variant={variant}\n          fontWeight={tokens.fontWeight}\n          color={tokens.color}\n          lineHeight={1}\n        >\n          {initials.slice(0, LENGTHS[size])}\n        </Text>\n      )}\n\n      {src && (\n        <Flex position=\"absolute\" top={0} left={0} width=\"100%\" height=\"100%\">\n          <Image\n            src={src}\n            width=\"100%\"\n            height=\"100%\"\n            lazyLoad={lazyLoad}\n            alt={initials ?? \"\"}\n            {...imageProps}\n          />\n        </Flex>\n      )}\n    </Flex>\n  )\n}\n"],"file":"Avatar.js"}
+{"version":3,"sources":["../../../src/elements/Avatar/Avatar.tsx"],"names":["LENGTHS","xxs","xs","sm","md","TOKENS","fontWeight","color","bg","diameter","variant","Avatar","src","initials","size","lazyLoad","rest","boxProps","imageProps","slice"],"mappings":";;;;;;;AACA;;AACA;;AACA;;AACA;;AACA;;;;;;;;;;;;;;;;;;;;;;;;AASA,IAAMA,OAAO,GAAG;AACdC,EAAAA,GAAG,EAAE,CADS;AAEdC,EAAAA,EAAE,EAAE,CAFU;AAGdC,EAAAA,EAAE,EAAE,CAHU;AAIdC,EAAAA,EAAE,EAAE;AAJU,CAAhB;AAOA,IAAMC,MAAM,GAAG;AACbC,EAAAA,UAAU,EAAE,QADC;AAEbC,EAAAA,KAAK,EAAE,UAFM;AAGbC,EAAAA,EAAE,EAAE,aAHS;AAIbP,EAAAA,GAAG,EAAE;AACHQ,IAAAA,QAAQ,EAAE,EADP;AAEHC,IAAAA,OAAO,EAAE;AAFN,GAJQ;AAQbR,EAAAA,EAAE,EAAE;AACFO,IAAAA,QAAQ,EAAE,EADR;AAEFC,IAAAA,OAAO,EAAE;AAFP,GARS;AAYbP,EAAAA,EAAE,EAAE;AACFM,IAAAA,QAAQ,EAAE,EADR;AAEFC,IAAAA,OAAO,EAAE;AAFP,GAZS;AAgBbN,EAAAA,EAAE,EAAE;AACFK,IAAAA,QAAQ,EAAE,GADR;AAEFC,IAAAA,OAAO,EAAE;AAFP;AAhBS,CAAf;AAsBA;;AACO,IAAMC,MAA6B,GAAG,SAAhCA,MAAgC,OAMvC;AAAA;;AAAA,MALJC,GAKI,QALJA,GAKI;AAAA,MAJJC,QAII,QAJJA,QAII;AAAA,uBAHJC,IAGI;AAAA,MAHJA,IAGI,0BAHG,IAGH;AAAA,2BAFJC,QAEI;AAAA,MAFJA,QAEI,8BAFO,KAEP;AAAA,MADDC,IACC;;AACJ,uBAA+B,wBAAcA,IAAd,CAA/B;AAAA;AAAA,MAAOC,QAAP;AAAA,MAAiBC,UAAjB;;AAEA,8BAA8Bb,MAAM,CAACS,IAAD,CAApC,uDAA8CT,MAAM,CAACF,EAArD;AAAA,MAAQM,QAAR,SAAQA,QAAR;AAAA,MAAkBC,OAAlB,SAAkBA,OAAlB;;AAEA,sBACE,6BAAC,UAAD;AACE,IAAA,IAAI,EAAED,QADR;AAEE,IAAA,EAAE,EAAEJ,MAAM,CAACG,EAFb;AAGE,IAAA,MAAM,EAAEI,GAAG,GAAG,aAAH,GAAmB,WAHhC;AAIE,IAAA,WAAW,EAAC,SAJd;AAKE,IAAA,YAAY,EAAC,KALf;AAME,IAAA,UAAU,EAAC,QANb;AAOE,IAAA,cAAc,EAAC,QAPjB;AAQE,IAAA,QAAQ,EAAC,UARX;AASE,IAAA,QAAQ,EAAC;AATX,KAUMK,QAVN,GAYGJ,QAAQ,iBACP,6BAAC,UAAD;AACE,IAAA,OAAO,EAAEH,OADX;AAEE,IAAA,UAAU,EAAEL,MAAM,CAACC,UAFrB;AAGE,IAAA,KAAK,EAAED,MAAM,CAACE,KAHhB;AAIE,IAAA,UAAU,EAAE;AAJd,KAMGM,QAAQ,CAACM,KAAT,CAAe,CAAf,EAAkBnB,OAAO,CAACc,IAAD,CAAzB,CANH,CAbJ,EAuBGF,GAAG,iBACF,6BAAC,UAAD;AAAM,IAAA,QAAQ,EAAC,UAAf;AAA0B,IAAA,GAAG,EAAE,CAA/B;AAAkC,IAAA,IAAI,EAAE,CAAxC;AAA2C,IAAA,KAAK,EAAC,MAAjD;AAAwD,IAAA,MAAM,EAAC;AAA/D,kBACE,6BAAC,YAAD;AACE,IAAA,GAAG,EAAEA,GADP;AAEE,IAAA,KAAK,EAAC,MAFR;AAGE,IAAA,MAAM,EAAC,MAHT;AAIE,IAAA,QAAQ,EAAEG,QAJZ;AAKE,IAAA,GAAG,EAAEF,QAAF,aAAEA,QAAF,cAAEA,QAAF,GAAc;AALnB,KAMMK,UANN,EADF,CAxBJ,CADF;AAsCD,CAjDM;;;AAAMP,M","sourcesContent":["import { TextVariant } from \"@artsy/palette-tokens/dist/typography/v3\"\nimport React from \"react\"\nimport { splitBoxProps } from \"../Box\"\nimport { Flex, FlexProps } from \"../Flex\"\nimport { Image, ImageProps } from \"../Image\"\nimport { Text } from \"../Text\"\n\nexport interface AvatarProps extends FlexProps, Partial<ImageProps> {\n  /** If an image is missing, show initials instead */\n  initials?: string\n  /** The size of the Avatar */\n  size?: \"xxs\" | \"xs\" | \"sm\" | \"md\"\n}\n\nconst LENGTHS = {\n  xxs: 2,\n  xs: 2,\n  sm: 3,\n  md: 4,\n}\n\nconst TOKENS = {\n  fontWeight: \"normal\",\n  color: \"black100\",\n  bg: \"transparent\",\n  xxs: {\n    diameter: 30,\n    variant: \"xs\" as TextVariant,\n  },\n  xs: {\n    diameter: 45,\n    variant: \"sm-display\" as TextVariant,\n  },\n  sm: {\n    diameter: 70,\n    variant: \"md\" as TextVariant,\n  },\n  md: {\n    diameter: 100,\n    variant: \"lg-display\" as TextVariant,\n  },\n}\n\n/** An circular Avatar component containing an image or initials */\nexport const Avatar: React.FC<AvatarProps> = ({\n  src,\n  initials,\n  size = \"md\",\n  lazyLoad = false,\n  ...rest\n}) => {\n  const [boxProps, imageProps] = splitBoxProps(rest)\n\n  const { diameter, variant } = TOKENS[size] ?? TOKENS.sm\n\n  return (\n    <Flex\n      size={diameter}\n      bg={TOKENS.bg}\n      border={src ? \"transparent\" : \"1px solid\"}\n      borderColor=\"black15\"\n      borderRadius=\"50%\"\n      alignItems=\"center\"\n      justifyContent=\"center\"\n      position=\"relative\"\n      overflow=\"hidden\"\n      {...boxProps}\n    >\n      {initials && (\n        <Text\n          variant={variant}\n          fontWeight={TOKENS.fontWeight}\n          color={TOKENS.color}\n          lineHeight={1}\n        >\n          {initials.slice(0, LENGTHS[size])}\n        </Text>\n      )}\n\n      {src && (\n        <Flex position=\"absolute\" top={0} left={0} width=\"100%\" height=\"100%\">\n          <Image\n            src={src}\n            width=\"100%\"\n            height=\"100%\"\n            lazyLoad={lazyLoad}\n            alt={initials ?? \"\"}\n            {...imageProps}\n          />\n        </Flex>\n      )}\n    </Flex>\n  )\n}\n"],"file":"Avatar.js"}

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<import("@artsy/palette-tokens/dist/typography/types").TextVariant, Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>> | undefined;
+    variant?: import("styled-system").ResponsiveValue<"xxxl" | "xxl" | "xl" | "lg" | "lg-display" | "md" | "sm" | "sm-display" | "xs" | "bq", Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>> | undefined;
     textColor?: import("styled-system").ResponsiveValue<"black100" | "black80" | "black60" | "black30" | "black10" | "black5" | "blue100" | "blue10" | "copper100" | "copper10" | "green100" | "green10" | "purple100" | "brand" | "purple30" | "purple5" | "red100" | "red10" | "yellow100" | "yellow30" | "yellow10" | "white100", Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>> | undefined;
     lineClamp?: number | undefined;
 } & {
@@ -32,7 +32,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<import("@artsy/palette-tokens/dist/typography/types").TextVariant, Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>> | undefined;
+    variant?: import("styled-system").ResponsiveValue<"xxxl" | "xxl" | "xl" | "lg" | "lg-display" | "md" | "sm" | "sm-display" | "xs" | "bq", Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>> | undefined;
     textColor?: import("styled-system").ResponsiveValue<"black100" | "black80" | "black60" | "black30" | "black10" | "black5" | "blue100" | "blue10" | "copper100" | "copper10" | "green100" | "green10" | "purple100" | "brand" | "purple30" | "purple5" | "red100" | "red10" | "yellow100" | "yellow30" | "yellow10" | "white100", Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>> | undefined;
     lineClamp?: number | undefined;
 } & {

package/dist/elements/BaseTabs/BaseTab.js

@@ -9,15 +9,11 @@ exports.BaseTab = void 0;
 
 var _styledComponents = _interopRequireWildcard(require("styled-components"));
 
-var _Theme = require("../../Theme");
-
 var _Clickable = require("../Clickable");
 
 var _Text = require("../Text");
 
-var _v = require("./tokens/v2");
-
-var _v2 = require("./tokens/v3");
+var _tokens = require("./tokens");
 
 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); }
 
@@ -34,15 +30,11 @@ var BaseTab = (0, _styledComponents.default)(_Text.Text).withConfig({
   displayName: "BaseTab",
   componentId: "sc-1qn17bx-0"
 })(["display:flex;width:100%;position:relative;text-decoration:none;white-space:nowrap;z-index:1;", ""], function (props) {
-  var states = (0, _Theme.getThemeConfig)(props, {
-    v2: _v.STATES,
-    v3: _v2.STATES
-  });
-  return (0, _styledComponents.css)(["", " ", " ", " ", " &:hover:not(:disabled){", "}&:focus{outline:0;", "}"], states.default, props.hover && states.hover, props.focus && states.focus, props.active && states.active, states.hover, states.focus);
+  return (0, _styledComponents.css)(["", " ", " ", " ", " &:hover:not(:disabled){", "}&:focus{outline:0;", "}"], _tokens.STATES.default, props.hover && _tokens.STATES.hover, props.focus && _tokens.STATES.focus, props.active && _tokens.STATES.active, _tokens.STATES.hover, _tokens.STATES.focus);
 });
 exports.BaseTab = BaseTab;
 BaseTab.defaultProps = {
-  variant: "mediumText",
+  variant: "sm",
   mb: "-1px",
   alignItems: "flex-start",
   justifyContent: "center",

package/dist/elements/BaseTabs/BaseTab.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/elements/BaseTabs/BaseTab.tsx"],"names":["BaseTab","Text","props","states","v2","V2_STATES","v3","V3_STATES","css","default","hover","focus","active","defaultProps","variant","mb","alignItems","justifyContent","textAlign","displayName","__Ignore__","Clickable"],"mappings":";;;;;;;;;AACA;;AACA;;AACA;;AACA;;AACA;;AACA;;;;;;AAkBA;AACA;AACA;AACA;AACA;AACA;AACA;AACO,IAAMA,OAAO,GAAG,+BAAOC,UAAP,CAAH;AAAA;AAAA;AAAA,yGAQhB,UAACC,KAAD,EAAW;AACX,MAAMC,MAAM,GAAG,2BAAeD,KAAf,EAAsB;AAAEE,IAAAA,EAAE,EAAEC,SAAN;AAAiBC,IAAAA,EAAE,EAAEC;AAArB,GAAtB,CAAf;AAEA,aAAOC,qBAAP,+EACIL,MAAM,CAACM,OADX,EAEIP,KAAK,CAACQ,KAAN,IAAeP,MAAM,CAACO,KAF1B,EAGIR,KAAK,CAACS,KAAN,IAAeR,MAAM,CAACQ,KAH1B,EAIIT,KAAK,CAACU,MAAN,IAAgBT,MAAM,CAACS,MAJ3B,EAOMT,MAAM,CAACO,KAPb,EAYMP,MAAM,CAACQ,KAZb;AAeD,CA1BiB,CAAb;;AA6BPX,OAAO,CAACa,YAAR,GAAuB;AACrBC,EAAAA,OAAO,EAAE,YADY;AAErBC,EAAAA,EAAE,EAAE,MAFiB;AAGrBC,EAAAA,UAAU,EAAE,YAHS;AAIrBC,EAAAA,cAAc,EAAE,QAJK;AAKrBC,EAAAA,SAAS,EAAE;AALU,CAAvB;AAQAlB,OAAO,CAACmB,WAAR,GAAsB,SAAtB;AAEA;AACA;AACA;AACA;AACA;AACA;;AACA,IAAMC,UAAU,GAAGC,oBAAnB","sourcesContent":["import React from \"react\"\nimport styled, { css } from \"styled-components\"\nimport { getThemeConfig } from \"../../Theme\"\nimport { Clickable, ClickableProps } from \"../Clickable\"\nimport { Text, TextProps } from \"../Text\"\nimport { STATES as V2_STATES } from \"./tokens/v2\"\nimport { STATES as V3_STATES } from \"./tokens/v3\"\n\n/**\n * Utilize as=\"a\" or as={Component} to alter functionality\n */\nexport type BaseTabProps = TextProps & {\n  active?: boolean\n  focus?: boolean\n  hover?: boolean\n} & (\n    | // Default:\n    { as?: keyof JSX.IntrinsicElements | React.ComponentType }\n    // When displaying as an anchor tag, accept anchor props:\n    | ({ as: \"a\" } & React.AnchorHTMLAttributes<HTMLAnchorElement>)\n    // When displaying as an anchor tag, accept anchor props:\n    | ({ as: typeof Clickable } & ClickableProps)\n  )\n\n/**\n * Extends `Text`. Should always be nested within a `BaseTabs` container.\n *\n * Use the `as` prop to alter behavior.\n * E.g.: `<BaseTab as={RouterLink} to=\"/foo\">Foo</BaseTab>`\n * or `<BaseTab as={Clickable} onClick={handleClick}>Foo</BaseTab>`\n */\nexport const BaseTab = styled(Text)<BaseTabProps>`\n  display: flex;\n  width: 100%;\n  position: relative;\n  text-decoration: none;\n  white-space: nowrap;\n  z-index: 1;\n\n  ${(props) => {\n    const states = getThemeConfig(props, { v2: V2_STATES, v3: V3_STATES })\n\n    return css`\n      ${states.default}\n      ${props.hover && states.hover}\n      ${props.focus && states.focus}\n      ${props.active && states.active}\n\n      &:hover:not(:disabled) {\n        ${states.hover}\n      }\n\n      &:focus {\n        outline: 0;\n        ${states.focus}\n      }\n    `\n  }}\n`\n\nBaseTab.defaultProps = {\n  variant: \"mediumText\",\n  mb: \"-1px\",\n  alignItems: \"flex-start\",\n  justifyContent: \"center\",\n  textAlign: \"center\",\n}\n\nBaseTab.displayName = \"BaseTab\"\n\n/**\n * So this is interesting: We can trick styled-components into correcting the CSS specificity (Text > Clickable)\n * by simply including a Clickable here.\n */\n// @ts-expect-error  MIGRATE_STRICT_MODE\n// eslint-disable-next-line @typescript-eslint/no-unused-vars\nconst __Ignore__ = Clickable\n"],"file":"BaseTab.js"}
+{"version":3,"sources":["../../../src/elements/BaseTabs/BaseTab.tsx"],"names":["BaseTab","Text","props","css","STATES","default","hover","focus","active","defaultProps","variant","mb","alignItems","justifyContent","textAlign","displayName","__Ignore__","Clickable"],"mappings":";;;;;;;;;AACA;;AACA;;AACA;;AACA;;;;;;AAkBA;AACA;AACA;AACA;AACA;AACA;AACA;AACO,IAAMA,OAAO,GAAG,+BAAOC,UAAP,CAAH;AAAA;AAAA;AAAA,yGAQhB,UAACC,KAAD,EAAW;AACX,aAAOC,qBAAP,+EACIC,eAAOC,OADX,EAEIH,KAAK,CAACI,KAAN,IAAeF,eAAOE,KAF1B,EAGIJ,KAAK,CAACK,KAAN,IAAeH,eAAOG,KAH1B,EAIIL,KAAK,CAACM,MAAN,IAAgBJ,eAAOI,MAJ3B,EAOMJ,eAAOE,KAPb,EAYMF,eAAOG,KAZb;AAeD,CAxBiB,CAAb;;AA2BPP,OAAO,CAACS,YAAR,GAAuB;AACrBC,EAAAA,OAAO,EAAE,IADY;AAErBC,EAAAA,EAAE,EAAE,MAFiB;AAGrBC,EAAAA,UAAU,EAAE,YAHS;AAIrBC,EAAAA,cAAc,EAAE,QAJK;AAKrBC,EAAAA,SAAS,EAAE;AALU,CAAvB;AAQAd,OAAO,CAACe,WAAR,GAAsB,SAAtB;AAEA;AACA;AACA;AACA;AACA;AACA;;AACA,IAAMC,UAAU,GAAGC,oBAAnB","sourcesContent":["import React from \"react\"\nimport styled, { css } from \"styled-components\"\nimport { Clickable, ClickableProps } from \"../Clickable\"\nimport { Text, TextProps } from \"../Text\"\nimport { STATES } from \"./tokens\"\n\n/**\n * Utilize as=\"a\" or as={Component} to alter functionality\n */\nexport type BaseTabProps = TextProps & {\n  active?: boolean\n  focus?: boolean\n  hover?: boolean\n} & (\n    | // Default:\n    { as?: keyof JSX.IntrinsicElements | React.ComponentType }\n    // When displaying as an anchor tag, accept anchor props:\n    | ({ as: \"a\" } & React.AnchorHTMLAttributes<HTMLAnchorElement>)\n    // When displaying as an anchor tag, accept anchor props:\n    | ({ as: typeof Clickable } & ClickableProps)\n  )\n\n/**\n * Extends `Text`. Should always be nested within a `BaseTabs` container.\n *\n * Use the `as` prop to alter behavior.\n * E.g.: `<BaseTab as={RouterLink} to=\"/foo\">Foo</BaseTab>`\n * or `<BaseTab as={Clickable} onClick={handleClick}>Foo</BaseTab>`\n */\nexport const BaseTab = styled(Text)<BaseTabProps>`\n  display: flex;\n  width: 100%;\n  position: relative;\n  text-decoration: none;\n  white-space: nowrap;\n  z-index: 1;\n\n  ${(props) => {\n    return css`\n      ${STATES.default}\n      ${props.hover && STATES.hover}\n      ${props.focus && STATES.focus}\n      ${props.active && STATES.active}\n\n      &:hover:not(:disabled) {\n        ${STATES.hover}\n      }\n\n      &:focus {\n        outline: 0;\n        ${STATES.focus}\n      }\n    `\n  }}\n`\n\nBaseTab.defaultProps = {\n  variant: \"sm\",\n  mb: \"-1px\",\n  alignItems: \"flex-start\",\n  justifyContent: \"center\",\n  textAlign: \"center\",\n}\n\nBaseTab.displayName = \"BaseTab\"\n\n/**\n * So this is interesting: We can trick styled-components into correcting the CSS specificity (Text > Clickable)\n * by simply including a Clickable here.\n */\n// @ts-expect-error  MIGRATE_STRICT_MODE\n// eslint-disable-next-line @typescript-eslint/no-unused-vars\nconst __Ignore__ = Clickable\n"],"file":"BaseTab.js"}

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

@@ -7,7 +7,6 @@ export declare type BaseTabsProps = BoxProps & {
      * (as opposed to left-align)
      */
     fill?: boolean;
-    separator?: JSX.Element;
     children: React.ReactNode;
 };
 /** Extends `Box`, provides configurable gutter */

package/dist/elements/BaseTabs/BaseTabs.js

@@ -11,15 +11,13 @@ var _react = _interopRequireWildcard(require("react"));
 
 var _flattenChildren = require("../../helpers/flattenChildren");
 
-var _Theme = require("../../Theme");
-
 var _Box = require("../Box");
 
 var _HorizontalOverflow = require("../HorizontalOverflow/HorizontalOverflow");
 
 var _Join = require("../Join");
 
-var _excluded = ["fill", "separator", "children"];
+var _excluded = ["fill", "children"];
 
 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); }
 
@@ -34,16 +32,9 @@ function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) r
 /** Extends `Box`, provides configurable gutter */
 var BaseTabs = /*#__PURE__*/(0, _react.forwardRef)(function (_ref, forwardedRef) {
   var fill = _ref.fill,
-      defaultSeparator = _ref.separator,
       children = _ref.children,
       rest = _objectWithoutProperties(_ref, _excluded);
 
-  var separator = (0, _Theme.useThemeConfig)({
-    v2: defaultSeparator !== null && defaultSeparator !== void 0 ? defaultSeparator : /*#__PURE__*/_react.default.createElement(_Box.Box, {
-      mx: 1
-    }),
-    v3: defaultSeparator
-  });
   var cells = (0, _react.useMemo)(function () {
     return (0, _flattenChildren.flattenChildren)(children);
   }, [children]);
@@ -52,7 +43,7 @@ var BaseTabs = /*#__PURE__*/(0, _react.forwardRef)(function (_ref, forwardedRef)
     borderBottom: "1px solid",
     borderBottomColor: "black10"
   }, rest), /*#__PURE__*/_react.default.createElement(_Join.Join, {
-    separator: separator
+    separator: /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null)
   }, cells.map(function (child, i) {
     return /*#__PURE__*/_react.default.createElement(_Box.Box, {
       key: i,

package/dist/elements/BaseTabs/BaseTabs.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/elements/BaseTabs/BaseTabs.tsx"],"names":["BaseTabs","forwardedRef","fill","defaultSeparator","separator","children","rest","v2","v3","cells","map","child","i","undefined","displayName"],"mappings":";;;;;;;;;AAAA;;AACA;;AACA;;AACA;;AACA;;AACA;;;;;;;;;;;;;;AAaA;AACO,IAAMA,QAEZ,gBAAG,uBACF,gBAA2DC,YAA3D,EAA4E;AAAA,MAAzEC,IAAyE,QAAzEA,IAAyE;AAAA,MAAxDC,gBAAwD,QAAnEC,SAAmE;AAAA,MAAtCC,QAAsC,QAAtCA,QAAsC;AAAA,MAAzBC,IAAyB;;AAC1E,MAAMF,SAAS,GAAG,2BAAe;AAC/BG,IAAAA,EAAE,EAAEJ,gBAAF,aAAEA,gBAAF,cAAEA,gBAAF,gBAAsB,6BAAC,QAAD;AAAK,MAAA,EAAE,EAAE;AAAT,MADO;AAE/BK,IAAAA,EAAE,EAAEL;AAF2B,GAAf,CAAlB;AAKA,MAAMM,KAAK,GAAG,oBAAQ;AAAA,WAAM,sCAAgBJ,QAAhB,CAAN;AAAA,GAAR,EAAyC,CAACA,QAAD,CAAzC,CAAd;AAEA,sBACE,6BAAC,sCAAD;AACE,IAAA,GAAG,EAAEJ,YADP;AAEE,IAAA,YAAY,EAAC,WAFf;AAGE,IAAA,iBAAiB,EAAC;AAHpB,KAIMK,IAJN,gBAME,6BAAC,UAAD;AAAM,IAAA,SAAS,EAAEF;AAAjB,KACGK,KAAK,CAACC,GAAN,CAAU,UAACC,KAAD,EAAQC,CAAR,EAAc;AACvB,wBACE,6BAAC,QAAD;AACE,MAAA,GAAG,EAAEA,CADP;AAEE,MAAA,OAAO,EAAC,aAFV;AAGE,MAAA,SAAS,EAAC,QAHZ;AAIE,MAAA,IAAI,EAAEV,IAAI,GAAG,CAAH,GAAOW;AAJnB,OAMGF,KANH,CADF;AAUD,GAXA,CADH,CANF,CADF;AAuBD,CAhCC,CAFG;;AAqCPX,QAAQ,CAACc,WAAT,GAAuB,UAAvB","sourcesContent":["import React, { forwardRef, useMemo } from \"react\"\nimport { flattenChildren } from \"../../helpers/flattenChildren\"\nimport { useThemeConfig } from \"../../Theme\"\nimport { Box, BoxProps } from \"../Box\"\nimport { HorizontalOverflow } from \"../HorizontalOverflow/HorizontalOverflow\"\nimport { Join } from \"../Join\"\n\n/** Extends `Box` */\nexport type BaseTabsProps = BoxProps & {\n  /**\n   * Enable if tabs should fill the width of the container\n   * (as opposed to left-align)\n   */\n  fill?: boolean\n  separator?: JSX.Element\n  children: React.ReactNode\n}\n\n/** Extends `Box`, provides configurable gutter */\nexport const BaseTabs: React.ForwardRefExoticComponent<\n  BaseTabsProps & React.RefAttributes<HTMLDivElement>\n> = forwardRef(\n  ({ fill, separator: defaultSeparator, children, ...rest }, forwardedRef) => {\n    const separator = useThemeConfig({\n      v2: defaultSeparator ?? <Box mx={1} />,\n      v3: defaultSeparator,\n    })\n\n    const cells = useMemo(() => flattenChildren(children), [children])\n\n    return (\n      <HorizontalOverflow\n        ref={forwardedRef}\n        borderBottom=\"1px solid\"\n        borderBottomColor=\"black10\"\n        {...rest}\n      >\n        <Join separator={separator!}>\n          {cells.map((child, i) => {\n            return (\n              <Box\n                key={i}\n                display=\"inline-flex\"\n                textAlign=\"center\"\n                flex={fill ? 1 : undefined}\n              >\n                {child}\n              </Box>\n            )\n          })}\n        </Join>\n      </HorizontalOverflow>\n    )\n  }\n)\n\nBaseTabs.displayName = \"BaseTabs\"\n"],"file":"BaseTabs.js"}
+{"version":3,"sources":["../../../src/elements/BaseTabs/BaseTabs.tsx"],"names":["BaseTabs","forwardedRef","fill","children","rest","cells","map","child","i","undefined","displayName"],"mappings":";;;;;;;;;AAAA;;AACA;;AACA;;AACA;;AACA;;;;;;;;;;;;;;AAYA;AACO,IAAMA,QAEZ,gBAAG,uBAAW,gBAA8BC,YAA9B,EAA+C;AAAA,MAA5CC,IAA4C,QAA5CA,IAA4C;AAAA,MAAtCC,QAAsC,QAAtCA,QAAsC;AAAA,MAAzBC,IAAyB;;AAC5D,MAAMC,KAAK,GAAG,oBAAQ;AAAA,WAAM,sCAAgBF,QAAhB,CAAN;AAAA,GAAR,EAAyC,CAACA,QAAD,CAAzC,CAAd;AAEA,sBACE,6BAAC,sCAAD;AACE,IAAA,GAAG,EAAEF,YADP;AAEE,IAAA,YAAY,EAAC,WAFf;AAGE,IAAA,iBAAiB,EAAC;AAHpB,KAIMG,IAJN,gBAME,6BAAC,UAAD;AAAM,IAAA,SAAS,eAAE;AAAjB,KACGC,KAAK,CAACC,GAAN,CAAU,UAACC,KAAD,EAAQC,CAAR,EAAc;AACvB,wBACE,6BAAC,QAAD;AACE,MAAA,GAAG,EAAEA,CADP;AAEE,MAAA,OAAO,EAAC,aAFV;AAGE,MAAA,SAAS,EAAC,QAHZ;AAIE,MAAA,IAAI,EAAEN,IAAI,GAAG,CAAH,GAAOO;AAJnB,OAMGF,KANH,CADF;AAUD,GAXA,CADH,CANF,CADF;AAuBD,CA1BG,CAFG;;AA8BPP,QAAQ,CAACU,WAAT,GAAuB,UAAvB","sourcesContent":["import React, { forwardRef, useMemo } from \"react\"\nimport { flattenChildren } from \"../../helpers/flattenChildren\"\nimport { Box, BoxProps } from \"../Box\"\nimport { HorizontalOverflow } from \"../HorizontalOverflow/HorizontalOverflow\"\nimport { Join } from \"../Join\"\n\n/** Extends `Box` */\nexport type BaseTabsProps = BoxProps & {\n  /**\n   * Enable if tabs should fill the width of the container\n   * (as opposed to left-align)\n   */\n  fill?: boolean\n  children: React.ReactNode\n}\n\n/** Extends `Box`, provides configurable gutter */\nexport const BaseTabs: React.ForwardRefExoticComponent<\n  BaseTabsProps & React.RefAttributes<HTMLDivElement>\n> = forwardRef(({ fill, children, ...rest }, forwardedRef) => {\n  const cells = useMemo(() => flattenChildren(children), [children])\n\n  return (\n    <HorizontalOverflow\n      ref={forwardedRef}\n      borderBottom=\"1px solid\"\n      borderBottomColor=\"black10\"\n      {...rest}\n    >\n      <Join separator={<></>}>\n        {cells.map((child, i) => {\n          return (\n            <Box\n              key={i}\n              display=\"inline-flex\"\n              textAlign=\"center\"\n              flex={fill ? 1 : undefined}\n            >\n              {child}\n            </Box>\n          )\n        })}\n      </Join>\n    </HorizontalOverflow>\n  )\n})\n\nBaseTabs.displayName = \"BaseTabs\"\n"],"file":"BaseTabs.js"}

package/dist/elements/BaseTabs/BaseTabs.story.js

@@ -13,8 +13,6 @@ var _storybookStates = require("storybook-states");
 
 var _ = require("../..");
 
-var _svgs = require("../../svgs");
-
 var _Box = require("../Box");
 
 var _Clickable = require("../Clickable");
@@ -65,12 +63,6 @@ var Default = function Default() {
   return /*#__PURE__*/_react.default.createElement(_storybookStates.States, {
     states: [{}, {
       fill: true
-    }, {
-      separator: /*#__PURE__*/_react.default.createElement(_svgs.ChevronIcon, {
-        mx: 2,
-        fill: "black30",
-        width: "12px"
-      })
     }, {
       justifyContent: "center"
     }]

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/elements/BaseTabs/BaseTabs.story.tsx"],"names":["RouterLink","to","children","rest","title","_BaseTab","focus","hover","active","Default","fill","separator","justifyContent","AsA","story","name","AsClickable","Clickable","AsRouterLink","Overflowing","map","label","i","Fill","BreakingOutOfContainerMargin","NestedChildren"],"mappings":"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","sourcesContent":["import { action } from \"@storybook/addon-actions\"\nimport React from \"react\"\nimport { States } from \"storybook-states\"\nimport { BaseTab, BaseTabs } from \".\"\nimport { ChevronIcon } from \"../../svgs\"\nimport { Box } from \"../Box\"\nimport { Clickable } from \"../Clickable\"\nimport { BaseTabProps } from \"./BaseTab\"\nimport { BaseTabsProps } from \"./BaseTabs\"\n\n// Fake `RouterLink`\nconst RouterLink: React.FC<{ to: string }> = ({ to, children, ...rest }) => {\n  return (\n    <a href={to} {...rest}>\n      {children}\n    </a>\n  )\n}\n\nexport default { title: \"Components/BaseTabs\" }\n\nexport const _BaseTab = () => {\n  return (\n    <States<BaseTabProps>\n      states={[{}, { focus: true }, { hover: true }, { active: true }]}\n    >\n      <BaseTab>Example</BaseTab>\n    </States>\n  )\n}\n\nexport const Default = () => {\n  return (\n    <States<Partial<BaseTabsProps>>\n      states={[\n        {},\n        { fill: true },\n        { separator: <ChevronIcon mx={2} fill=\"black30\" width=\"12px\" /> },\n        { justifyContent: \"center\" },\n      ]}\n    >\n      <BaseTabs>\n        <BaseTab>First</BaseTab>\n        <BaseTab>Second</BaseTab>\n        <BaseTab active>Active</BaseTab>\n        <BaseTab>Last</BaseTab>\n      </BaseTabs>\n    </States>\n  )\n}\n\nexport const AsA = () => {\n  return (\n    <BaseTabs>\n      <BaseTab as=\"a\" href=\"#overview\">\n        Overview\n      </BaseTab>\n\n      <BaseTab as=\"a\" href=\"#cv\">\n        CV\n      </BaseTab>\n\n      <BaseTab as=\"a\" href=\"#shows\" active>\n        Shows\n      </BaseTab>\n\n      <BaseTab as=\"a\" href=\"#auction-results\">\n        Auction Results\n      </BaseTab>\n\n      <BaseTab as=\"a\" href=\"#articles\">\n        Articles\n      </BaseTab>\n\n      <BaseTab as=\"a\" href=\"#related-artists\">\n        Related Artists\n      </BaseTab>\n    </BaseTabs>\n  )\n}\n\nAsA.story = {\n  name: 'as=\"a\"',\n}\n\nexport const AsClickable = () => {\n  return (\n    <BaseTabs>\n      <BaseTab as={Clickable} onClick={action(\"onClick\")}>\n        Overview\n      </BaseTab>\n\n      <BaseTab as={Clickable} onClick={action(\"onClick\")}>\n        CV\n      </BaseTab>\n\n      <BaseTab as={Clickable} onClick={action(\"onClick\")} active>\n        Shows\n      </BaseTab>\n\n      <BaseTab as={Clickable} onClick={action(\"onClick\")}>\n        Auction Results\n      </BaseTab>\n\n      <BaseTab as={Clickable} onClick={action(\"onClick\")}>\n        Articles\n      </BaseTab>\n\n      <BaseTab as={Clickable} onClick={action(\"onClick\")}>\n        Related Artists\n      </BaseTab>\n    </BaseTabs>\n  )\n}\n\nAsClickable.story = {\n  name: \"as={Clickable}\",\n}\n\nexport const AsRouterLink = () => {\n  return (\n    <BaseTabs>\n      <BaseTab\n        // @ts-expect-error  MIGRATE_STRICT_MODE\n        as={RouterLink}\n        to=\"#example\"\n        activeClassName=\"active\"\n        garbage\n      >\n        Example\n      </BaseTab>\n    </BaseTabs>\n  )\n}\n\nAsRouterLink.story = {\n  name: \"as={RouterLink}\",\n}\n\nexport const Overflowing = () => {\n  return (\n    <BaseTabs>\n      {[\n        \"Artworks (580656)\",\n        \"Artists (8)\",\n        \"Collections (7)\",\n        \"Artist Series (13)\",\n        \"Galleries (4)\",\n        \"Shows (3667)\",\n        \"Categories (21)\",\n        \"Articles (656)\",\n        \"Auctions (23)\",\n        \"More (46)\",\n      ].map((label, i) => {\n        return (\n          <BaseTab key={label} active={i === 1}>\n            {label}\n          </BaseTab>\n        )\n      })}\n    </BaseTabs>\n  )\n}\n\nexport const Fill = () => {\n  return (\n    <Box m={3}>\n      <BaseTabs fill my={3}>\n        <BaseTab as=\"a\" href=\"#\">\n          One\n        </BaseTab>\n      </BaseTabs>\n\n      <BaseTabs fill my={3}>\n        <BaseTab as=\"a\" href=\"#\">\n          One\n        </BaseTab>\n\n        <BaseTab as=\"a\" href=\"#\" active>\n          Two\n        </BaseTab>\n      </BaseTabs>\n\n      <BaseTabs fill my={3}>\n        <BaseTab as=\"a\" href=\"#\">\n          One\n        </BaseTab>\n\n        <BaseTab as=\"a\" href=\"#\" active>\n          Two\n        </BaseTab>\n\n        <BaseTab as=\"a\" href=\"#\">\n          Three\n        </BaseTab>\n      </BaseTabs>\n    </Box>\n  )\n}\n\nexport const BreakingOutOfContainerMargin = () => {\n  return (\n    <Box m={6} bg=\"black10\">\n      <BaseTabs mx={-6} px={6}>\n        <BaseTab active>\n          Rail border should extend past black10 background\n        </BaseTab>\n      </BaseTabs>\n    </Box>\n  )\n}\n\nBreakingOutOfContainerMargin.story = {\n  name: \"Breaking out of container margin\",\n}\n\nexport const NestedChildren = () => {\n  return (\n    <BaseTabs>\n      <>\n        <BaseTab>First</BaseTab>\n        <BaseTab>Second</BaseTab>\n        <>\n          <BaseTab active>Active</BaseTab>\n          <BaseTab>Last</BaseTab>\n        </>\n      </>\n    </BaseTabs>\n  )\n}\n\nNestedChildren.story = {\n  name: \"nested children\",\n}\n"],"file":"BaseTabs.story.js"}
+{"version":3,"sources":["../../../src/elements/BaseTabs/BaseTabs.story.tsx"],"names":["RouterLink","to","children","rest","title","_BaseTab","focus","hover","active","Default","fill","justifyContent","AsA","story","name","AsClickable","Clickable","AsRouterLink","Overflowing","map","label","i","Fill","BreakingOutOfContainerMargin","NestedChildren"],"mappings":"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","sourcesContent":["import { action } from \"@storybook/addon-actions\"\nimport React from \"react\"\nimport { States } from \"storybook-states\"\nimport { BaseTab, BaseTabs } from \".\"\nimport { Box } from \"../Box\"\nimport { Clickable } from \"../Clickable\"\nimport { BaseTabProps } from \"./BaseTab\"\nimport { BaseTabsProps } from \"./BaseTabs\"\n\n// Fake `RouterLink`\nconst RouterLink: React.FC<{ to: string }> = ({ to, children, ...rest }) => {\n  return (\n    <a href={to} {...rest}>\n      {children}\n    </a>\n  )\n}\n\nexport default { title: \"Components/BaseTabs\" }\n\nexport const _BaseTab = () => {\n  return (\n    <States<BaseTabProps>\n      states={[{}, { focus: true }, { hover: true }, { active: true }]}\n    >\n      <BaseTab>Example</BaseTab>\n    </States>\n  )\n}\n\nexport const Default = () => {\n  return (\n    <States<Partial<BaseTabsProps>>\n      states={[{}, { fill: true }, { justifyContent: \"center\" }]}\n    >\n      <BaseTabs>\n        <BaseTab>First</BaseTab>\n        <BaseTab>Second</BaseTab>\n        <BaseTab active>Active</BaseTab>\n        <BaseTab>Last</BaseTab>\n      </BaseTabs>\n    </States>\n  )\n}\n\nexport const AsA = () => {\n  return (\n    <BaseTabs>\n      <BaseTab as=\"a\" href=\"#overview\">\n        Overview\n      </BaseTab>\n\n      <BaseTab as=\"a\" href=\"#cv\">\n        CV\n      </BaseTab>\n\n      <BaseTab as=\"a\" href=\"#shows\" active>\n        Shows\n      </BaseTab>\n\n      <BaseTab as=\"a\" href=\"#auction-results\">\n        Auction Results\n      </BaseTab>\n\n      <BaseTab as=\"a\" href=\"#articles\">\n        Articles\n      </BaseTab>\n\n      <BaseTab as=\"a\" href=\"#related-artists\">\n        Related Artists\n      </BaseTab>\n    </BaseTabs>\n  )\n}\n\nAsA.story = {\n  name: 'as=\"a\"',\n}\n\nexport const AsClickable = () => {\n  return (\n    <BaseTabs>\n      <BaseTab as={Clickable} onClick={action(\"onClick\")}>\n        Overview\n      </BaseTab>\n\n      <BaseTab as={Clickable} onClick={action(\"onClick\")}>\n        CV\n      </BaseTab>\n\n      <BaseTab as={Clickable} onClick={action(\"onClick\")} active>\n        Shows\n      </BaseTab>\n\n      <BaseTab as={Clickable} onClick={action(\"onClick\")}>\n        Auction Results\n      </BaseTab>\n\n      <BaseTab as={Clickable} onClick={action(\"onClick\")}>\n        Articles\n      </BaseTab>\n\n      <BaseTab as={Clickable} onClick={action(\"onClick\")}>\n        Related Artists\n      </BaseTab>\n    </BaseTabs>\n  )\n}\n\nAsClickable.story = {\n  name: \"as={Clickable}\",\n}\n\nexport const AsRouterLink = () => {\n  return (\n    <BaseTabs>\n      <BaseTab\n        // @ts-expect-error  MIGRATE_STRICT_MODE\n        as={RouterLink}\n        to=\"#example\"\n        activeClassName=\"active\"\n        garbage\n      >\n        Example\n      </BaseTab>\n    </BaseTabs>\n  )\n}\n\nAsRouterLink.story = {\n  name: \"as={RouterLink}\",\n}\n\nexport const Overflowing = () => {\n  return (\n    <BaseTabs>\n      {[\n        \"Artworks (580656)\",\n        \"Artists (8)\",\n        \"Collections (7)\",\n        \"Artist Series (13)\",\n        \"Galleries (4)\",\n        \"Shows (3667)\",\n        \"Categories (21)\",\n        \"Articles (656)\",\n        \"Auctions (23)\",\n        \"More (46)\",\n      ].map((label, i) => {\n        return (\n          <BaseTab key={label} active={i === 1}>\n            {label}\n          </BaseTab>\n        )\n      })}\n    </BaseTabs>\n  )\n}\n\nexport const Fill = () => {\n  return (\n    <Box m={3}>\n      <BaseTabs fill my={3}>\n        <BaseTab as=\"a\" href=\"#\">\n          One\n        </BaseTab>\n      </BaseTabs>\n\n      <BaseTabs fill my={3}>\n        <BaseTab as=\"a\" href=\"#\">\n          One\n        </BaseTab>\n\n        <BaseTab as=\"a\" href=\"#\" active>\n          Two\n        </BaseTab>\n      </BaseTabs>\n\n      <BaseTabs fill my={3}>\n        <BaseTab as=\"a\" href=\"#\">\n          One\n        </BaseTab>\n\n        <BaseTab as=\"a\" href=\"#\" active>\n          Two\n        </BaseTab>\n\n        <BaseTab as=\"a\" href=\"#\">\n          Three\n        </BaseTab>\n      </BaseTabs>\n    </Box>\n  )\n}\n\nexport const BreakingOutOfContainerMargin = () => {\n  return (\n    <Box m={6} bg=\"black10\">\n      <BaseTabs mx={-6} px={6}>\n        <BaseTab active>\n          Rail border should extend past black10 background\n        </BaseTab>\n      </BaseTabs>\n    </Box>\n  )\n}\n\nBreakingOutOfContainerMargin.story = {\n  name: \"Breaking out of container margin\",\n}\n\nexport const NestedChildren = () => {\n  return (\n    <BaseTabs>\n      <>\n        <BaseTab>First</BaseTab>\n        <BaseTab>Second</BaseTab>\n        <>\n          <BaseTab active>Active</BaseTab>\n          <BaseTab>Last</BaseTab>\n        </>\n      </>\n    </BaseTabs>\n  )\n}\n\nNestedChildren.story = {\n  name: \"nested children\",\n}\n"],"file":"BaseTabs.story.js"}

package/dist/elements/BaseTabs/{tokens/v3.js → tokens.js}

@@ -16,4 +16,4 @@ var STATES = {
   hover: (0, _styledComponents.css)(["text-decoration:underline;color:", ";"], (0, _themeGet.themeGet)("colors.blue100"))
 };
 exports.STATES = STATES;
-//# sourceMappingURL=v3.js.map
+//# sourceMappingURL=tokens.js.map

package/dist/elements/BaseTabs/tokens.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/elements/BaseTabs/tokens.tsx"],"names":["STATES","default","css","active","focus","hover"],"mappings":";;;;;;;AAAA;;AACA;;AAEO,IAAMA,MAAM,GAAG;AACpBC,EAAAA,OAAO,MAAEC,qBAAF,kFAEQ,wBAAS,SAAT,CAFR,EAGI,wBAAS,gBAAT,CAHJ,CADa;AAOpBC,EAAAA,MAAM,MAAED,qBAAF,wHAEK,wBAAS,iBAAT,CAFL,EAGmB,wBAAS,iBAAT,CAHnB,CAPc;AAiBpBE,EAAAA,KAAK,MAAEF,qBAAF,6CAEM,wBAAS,iBAAT,CAFN,CAjBe;AAqBpBG,EAAAA,KAAK,MAAEH,qBAAF,6CAEM,wBAAS,gBAAT,CAFN;AArBe,CAAf","sourcesContent":["import { themeGet } from \"@styled-system/theme-get\"\nimport { css } from \"styled-components\"\n\nexport const STATES = {\n  default: css`\n    height: 40px;\n    padding: 0 ${themeGet(\"space.2\")};\n    color: ${themeGet(\"colors.black60\")};\n    border-bottom: 1px solid transparent;\n  `,\n  active: css`\n    outline: 0;\n    color: ${themeGet(\"colors.black100\")};\n    border-bottom-color: ${themeGet(\"colors.black100\")};\n\n    &:hover {\n      text-decoration: none !important;\n      color: inherit !important;\n    }\n  `,\n  focus: css`\n    text-decoration: underline;\n    color: ${themeGet(\"colors.black100\")};\n  `,\n  hover: css`\n    text-decoration: underline;\n    color: ${themeGet(\"colors.blue100\")};\n  `,\n}\n"],"file":"tokens.js"}

package/dist/elements/BorderedRadio/BorderedRadio.d.ts

@@ -3,12 +3,6 @@ import { RadioProps } from "../Radio";
 export declare type BorderedRadioProps = RadioProps;
 /** A radio button with a border */
 export declare const BorderedRadio: import("styled-components").StyledComponentClass<RadioProps, any, {
-    children?: import("react").ReactNode;
-    title?: string | undefined;
-    label?: import("react").ReactNode;
-    p?: import("styled-system").ResponsiveValue<string | number | symbol, Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>> | undefined;
-    slot?: string | undefined;
-    style?: import("react").CSSProperties | undefined;
     bottom?: import("styled-system").ResponsiveValue<import("csstype").BottomProperty<import("styled-system").TLengthStyledSystem>, Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>> | undefined;
     left?: import("styled-system").ResponsiveValue<import("csstype").LeftProperty<import("styled-system").TLengthStyledSystem>, Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>> | undefined;
     right?: import("styled-system").ResponsiveValue<import("csstype").RightProperty<import("styled-system").TLengthStyledSystem>, Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>> | undefined;
@@ -91,6 +85,7 @@ export declare const BorderedRadio: import("styled-components").StyledComponentC
     marginX?: import("styled-system").ResponsiveValue<string | number | symbol, Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>> | undefined;
     my?: import("styled-system").ResponsiveValue<string | number | symbol, Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>> | undefined;
     marginY?: import("styled-system").ResponsiveValue<string | number | symbol, Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>> | undefined;
+    p?: import("styled-system").ResponsiveValue<string | number | symbol, Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>> | undefined;
     padding?: import("styled-system").ResponsiveValue<string | number | symbol, Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>> | undefined;
     pt?: import("styled-system").ResponsiveValue<string | number | symbol, Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>> | undefined;
     paddingTop?: import("styled-system").ResponsiveValue<string | number | symbol, Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>> | undefined;
@@ -104,6 +99,10 @@ export declare const BorderedRadio: import("styled-components").StyledComponentC
     paddingX?: import("styled-system").ResponsiveValue<string | number | symbol, Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>> | undefined;
     py?: import("styled-system").ResponsiveValue<string | number | symbol, Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>> | undefined;
     paddingY?: import("styled-system").ResponsiveValue<string | number | symbol, Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>> | undefined;
+    label?: import("react").ReactNode;
+    slot?: string | undefined;
+    style?: import("react").CSSProperties | undefined;
+    title?: string | undefined;
     defaultChecked?: boolean | undefined;
     defaultValue?: string | number | readonly string[] | undefined;
     suppressContentEditableWarning?: boolean | undefined;
@@ -141,7 +140,7 @@ export declare const BorderedRadio: import("styled-components").StyledComponentC
     results?: number | undefined;
     security?: string | undefined;
     unselectable?: "on" | "off" | undefined;
-    inputMode?: "text" | "search" | "none" | "tel" | "url" | "email" | "numeric" | "decimal" | undefined;
+    inputMode?: "none" | "text" | "search" | "tel" | "url" | "email" | "numeric" | "decimal" | undefined;
     is?: string | undefined;
     'aria-activedescendant'?: string | undefined;
     'aria-atomic'?: boolean | "false" | "true" | undefined;
@@ -156,7 +155,7 @@ export declare const BorderedRadio: import("styled-components").StyledComponentC
     'aria-describedby'?: string | undefined;
     'aria-details'?: string | undefined;
     'aria-disabled'?: boolean | "false" | "true" | undefined;
-    'aria-dropeffect'?: "link" | "none" | "copy" | "execute" | "move" | "popup" | undefined;
+    'aria-dropeffect'?: "none" | "link" | "copy" | "execute" | "move" | "popup" | undefined;
     'aria-errormessage'?: string | undefined;
     'aria-expanded'?: boolean | "false" | "true" | undefined;
     'aria-flowto'?: string | undefined;
@@ -191,6 +190,7 @@ export declare const BorderedRadio: import("styled-components").StyledComponentC
     'aria-valuemin'?: number | undefined;
     'aria-valuenow'?: number | undefined;
     'aria-valuetext'?: string | undefined;
+    children?: import("react").ReactNode;
     dangerouslySetInnerHTML?: {
         __html: string;
     } | undefined;