@artsy/palette 22.1.0 → 23.0.0

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/elements/Swiper/Swiper.story.tsx"],"names":["LOREM","Demo","widths","Array","from","map","_","heights","rest","width","i","length","title","Simple","WithHorizontalMargins","story","name","SimpleWithLeftEdgeSnapping","ProgressBarExample","index","setIndex","progress","ProgressDotsExample","CustomRailAndCells","React","forwardRef","props","ref","DynamicItems","setWidths","interval","setInterval","prevWidths","clearInterval","parameters","chromatic","disable","SwiperWithText","InitialIndexOnMount","NavigateViaProps","initialIndex","resetIndex","OverwritingDefaultMargins","ConditionalChildren"],"mappings":"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","sourcesContent":["import React, { useEffect, useState } from \"react\"\nimport { Box } from \"../Box\"\nimport { CarouselBar } from \"../CarouselBar\"\nimport { Clickable } from \"../Clickable\"\nimport { ProgressDots } from \"../ProgressDots\"\nimport { Text } from \"../Text\"\nimport { Swiper, SwiperCell, SwiperProps, SwiperRail } from \"./\"\n\nconst LOREM =\n  \"Lorem ipsum, dolor sit amet consectetur adipisicing elit. Quis dicta sunt nihil perspiciatis aperiam asperiores, earum facere repellendus in veniam, mollitia, ducimus delectus perferendis beatae facilis molestiae et ad quaerat!\"\n\nconst Demo = ({\n  widths = Array.from(Array(25)).map((_) => 300),\n  heights = [400],\n  ...rest\n}: {\n  widths?: Array<number | string>\n  heights?: number[]\n} & Omit<SwiperProps, \"children\">) => {\n  return (\n    <Box mx={[2, 4]} my={2}>\n      <Swiper {...rest}>\n        {widths.map((width, i) => (\n          <Clickable\n            key={i}\n            width={width}\n            height={heights[i % heights.length]}\n            bg=\"black10\"\n            border=\"1px solid\"\n            borderColor=\"black30\"\n            p={1}\n            textAlign=\"center\"\n          >\n            <Text variant=\"caption\">{i + 1}</Text>\n          </Clickable>\n        ))}\n      </Swiper>\n    </Box>\n  )\n}\n\nexport default { title: \"Components/Swiper\" }\n\nexport const Simple = () => {\n  return <Demo />\n}\n\nexport const WithHorizontalMargins = () => {\n  return (\n    <>\n      <Text>Should be flush with horizontal edges</Text>\n      <Demo mx={[-2, -4]} />\n    </>\n  )\n}\n\nWithHorizontalMargins.story = {\n  name: \"With horizontal margins\",\n}\n\nexport const SimpleWithLeftEdgeSnapping = () => {\n  return <Demo snap=\"start\" />\n}\n\nSimpleWithLeftEdgeSnapping.story = {\n  name: \"Simple with left-edge snapping\",\n}\n\nexport const ProgressBarExample = () => {\n  const widths = Array.from(Array(10)).map((_) => 300)\n  const [index, setIndex] = useState(0)\n  const progress = (index * 100) / (widths.length - 1)\n\n  return (\n    <>\n      <Demo widths={widths} onChange={setIndex} />\n      <CarouselBar percentComplete={progress} />\n    </>\n  )\n}\n\nProgressBarExample.story = {\n  name: \"Progress bar example\",\n}\n\nexport const ProgressDotsExample = () => {\n  const widths = Array.from(Array(10)).map((_) => 300)\n  const [index, setIndex] = useState(0)\n\n  return (\n    <>\n      <Demo widths={widths} onChange={setIndex} />\n      <ProgressDots variant=\"dash\" amount={widths.length} activeIndex={index} />\n    </>\n  )\n}\n\nProgressDotsExample.story = {\n  name: \"Progress dots example\",\n}\n\nexport const CustomRailAndCells = () => {\n  return (\n    <Demo\n      snap=\"start\"\n      widths={[\"100%\", \"100%\", \"100%\", \"100%\"]}\n      Cell={React.forwardRef((props, ref) => {\n        return (\n          <SwiperCell\n            {...props}\n            ref={ref as any}\n            display=\"inline-flex\"\n            width=\"100%\"\n            pr={0}\n          />\n        )\n      })}\n      Rail={(props) => {\n        return <SwiperRail {...props} display=\"block\" />\n      }}\n    />\n  )\n}\n\nCustomRailAndCells.story = {\n  name: \"Custom rail and cells\",\n}\n\nexport const DynamicItems = () => {\n  const [index, setIndex] = useState(0)\n  const [widths, setWidths] = useState([300])\n  useEffect(() => {\n    const interval = setInterval(() => {\n      setWidths((prevWidths) => [...prevWidths, 300])\n    }, 500)\n    return () => clearInterval(interval)\n  }, [])\n\n  return (\n    <>\n      <Demo widths={widths} onChange={setIndex} />\n      <ProgressDots amount={widths.length} activeIndex={index} />\n    </>\n  )\n}\n\nDynamicItems.story = {\n  name: \"Dynamic items\",\n  parameters: { chromatic: { disable: true } },\n}\n\nexport const SwiperWithText = () => {\n  return (\n    <Box mx={[2, 4]} my={2}>\n      <Swiper>\n        <Text bg=\"black10\" p={1} width={300}>\n          {LOREM}\n        </Text>\n\n        <Text bg=\"black10\" p={1} width={300}>\n          {LOREM}\n        </Text>\n\n        <Text bg=\"black10\" p={1} width={300}>\n          {LOREM}\n        </Text>\n\n        <Text bg=\"black10\" p={1} width={300}>\n          {LOREM}\n        </Text>\n\n        <Text bg=\"black10\" p={1} width={300}>\n          {LOREM}\n        </Text>\n      </Swiper>\n    </Box>\n  )\n}\n\nSwiperWithText.story = {\n  name: \"Swiper with text\",\n}\n\nexport const InitialIndexOnMount = () => {\n  return <Demo initialIndex={3} />\n}\n\nInitialIndexOnMount.story = {\n  name: \"initialIndex on mount\",\n}\n\nexport const NavigateViaProps = () => {\n  const [initialIndex, resetIndex] = useState(0)\n  return (\n    <Box>\n      <Demo initialIndex={initialIndex} onChange={resetIndex} />\n      <Box display=\"flex\" justifyContent=\"space-around\">\n        <Clickable onClick={() => resetIndex(0)}>Navigate to page 1</Clickable>\n        <Clickable onClick={() => resetIndex(1)}>Navigate to page 2</Clickable>\n        <Clickable onClick={() => resetIndex(2)}>Navigate to page 3</Clickable>\n        <Clickable onClick={() => resetIndex(3)}>Navigate to page 4</Clickable>\n      </Box>\n    </Box>\n  )\n}\n\nNavigateViaProps.story = {\n  name: \"Navigate via props\",\n}\n\nexport const OverwritingDefaultMargins = () => {\n  return <Demo mt={6} ml={6} />\n}\n\nOverwritingDefaultMargins.story = {\n  name: \"Overwriting default margins\",\n}\n\nexport const ConditionalChildren = () => {\n  return (\n    <Box mx={[2, 4]} my={2}>\n      <Swiper>\n        <Box bg=\"black10\" width={300} height={300} p={2}>\n          <Text variant=\"xs\">1</Text>\n        </Box>\n\n        <Box bg=\"black10\" width={300} height={300} p={2}>\n          <Text variant=\"xs\">2</Text>\n        </Box>\n\n        {false && (\n          <Box bg=\"black10\" width={300} height={300} p={2}>\n            <Text variant=\"xs\">3</Text>\n          </Box>\n        )}\n\n        {true && (\n          <Box bg=\"black10\" width={300} height={300} p={2}>\n            <Text variant=\"xs\">4</Text>\n          </Box>\n        )}\n\n        <Box bg=\"black10\" width={300} height={300} p={2}>\n          <Text variant=\"xs\">5</Text>\n        </Box>\n\n        <Box bg=\"black10\" width={300} height={300} p={2}>\n          <Text variant=\"xs\">6</Text>\n        </Box>\n      </Swiper>\n    </Box>\n  )\n}\n"],"file":"Swiper.story.js"}
+{"version":3,"sources":["../../../src/elements/Swiper/Swiper.story.tsx"],"names":["LOREM","Demo","widths","Array","from","map","_","heights","rest","width","i","length","title","Simple","WithHorizontalMargins","story","name","SimpleWithLeftEdgeSnapping","ProgressBarExample","index","setIndex","progress","ProgressDotsExample","CustomRailAndCells","React","forwardRef","props","ref","DynamicItems","setWidths","interval","setInterval","prevWidths","clearInterval","parameters","chromatic","disable","SwiperWithText","InitialIndexOnMount","NavigateViaProps","initialIndex","resetIndex","OverwritingDefaultMargins","ConditionalChildren"],"mappings":"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","sourcesContent":["import React, { useEffect, useState } from \"react\"\nimport { Box } from \"../Box\"\nimport { CarouselBar } from \"../CarouselBar\"\nimport { Clickable } from \"../Clickable\"\nimport { ProgressDots } from \"../ProgressDots\"\nimport { Text } from \"../Text\"\nimport { Swiper, SwiperCell, SwiperProps, SwiperRail } from \"./\"\n\nconst LOREM =\n  \"Lorem ipsum, dolor sit amet consectetur adipisicing elit. Quis dicta sunt nihil perspiciatis aperiam asperiores, earum facere repellendus in veniam, mollitia, ducimus delectus perferendis beatae facilis molestiae et ad quaerat!\"\n\nconst Demo = ({\n  widths = Array.from(Array(25)).map((_) => 300),\n  heights = [400],\n  ...rest\n}: {\n  widths?: Array<number | string>\n  heights?: number[]\n} & Omit<SwiperProps, \"children\">) => {\n  return (\n    <Box mx={[2, 4]} my={2}>\n      <Swiper {...rest}>\n        {widths.map((width, i) => (\n          <Clickable\n            key={i}\n            width={width}\n            height={heights[i % heights.length]}\n            bg=\"black10\"\n            border=\"1px solid\"\n            borderColor=\"black30\"\n            p={1}\n            textAlign=\"center\"\n          >\n            <Text variant=\"xs\">{i + 1}</Text>\n          </Clickable>\n        ))}\n      </Swiper>\n    </Box>\n  )\n}\n\nexport default { title: \"Components/Swiper\" }\n\nexport const Simple = () => {\n  return <Demo />\n}\n\nexport const WithHorizontalMargins = () => {\n  return (\n    <>\n      <Text>Should be flush with horizontal edges</Text>\n      <Demo mx={[-2, -4]} />\n    </>\n  )\n}\n\nWithHorizontalMargins.story = {\n  name: \"With horizontal margins\",\n}\n\nexport const SimpleWithLeftEdgeSnapping = () => {\n  return <Demo snap=\"start\" />\n}\n\nSimpleWithLeftEdgeSnapping.story = {\n  name: \"Simple with left-edge snapping\",\n}\n\nexport const ProgressBarExample = () => {\n  const widths = Array.from(Array(10)).map((_) => 300)\n  const [index, setIndex] = useState(0)\n  const progress = (index * 100) / (widths.length - 1)\n\n  return (\n    <>\n      <Demo widths={widths} onChange={setIndex} />\n      <CarouselBar percentComplete={progress} />\n    </>\n  )\n}\n\nProgressBarExample.story = {\n  name: \"Progress bar example\",\n}\n\nexport const ProgressDotsExample = () => {\n  const widths = Array.from(Array(10)).map((_) => 300)\n  const [index, setIndex] = useState(0)\n\n  return (\n    <>\n      <Demo widths={widths} onChange={setIndex} />\n      <ProgressDots variant=\"dash\" amount={widths.length} activeIndex={index} />\n    </>\n  )\n}\n\nProgressDotsExample.story = {\n  name: \"Progress dots example\",\n}\n\nexport const CustomRailAndCells = () => {\n  return (\n    <Demo\n      snap=\"start\"\n      widths={[\"100%\", \"100%\", \"100%\", \"100%\"]}\n      // eslint-disable-next-line react/display-name\n      Cell={React.forwardRef((props, ref) => {\n        return (\n          <SwiperCell\n            {...props}\n            ref={ref as any}\n            display=\"inline-flex\"\n            width=\"100%\"\n            pr={0}\n          />\n        )\n      })}\n      Rail={(props) => {\n        return <SwiperRail {...props} display=\"block\" />\n      }}\n    />\n  )\n}\n\nCustomRailAndCells.story = {\n  name: \"Custom rail and cells\",\n}\n\nexport const DynamicItems = () => {\n  const [index, setIndex] = useState(0)\n  const [widths, setWidths] = useState([300])\n  useEffect(() => {\n    const interval = setInterval(() => {\n      setWidths((prevWidths) => [...prevWidths, 300])\n    }, 500)\n    return () => clearInterval(interval)\n  }, [])\n\n  return (\n    <>\n      <Demo widths={widths} onChange={setIndex} />\n      <ProgressDots amount={widths.length} activeIndex={index} />\n    </>\n  )\n}\n\nDynamicItems.story = {\n  name: \"Dynamic items\",\n  parameters: { chromatic: { disable: true } },\n}\n\nexport const SwiperWithText = () => {\n  return (\n    <Box mx={[2, 4]} my={2}>\n      <Swiper>\n        <Text bg=\"black10\" p={1} width={300}>\n          {LOREM}\n        </Text>\n\n        <Text bg=\"black10\" p={1} width={300}>\n          {LOREM}\n        </Text>\n\n        <Text bg=\"black10\" p={1} width={300}>\n          {LOREM}\n        </Text>\n\n        <Text bg=\"black10\" p={1} width={300}>\n          {LOREM}\n        </Text>\n\n        <Text bg=\"black10\" p={1} width={300}>\n          {LOREM}\n        </Text>\n      </Swiper>\n    </Box>\n  )\n}\n\nSwiperWithText.story = {\n  name: \"Swiper with text\",\n}\n\nexport const InitialIndexOnMount = () => {\n  return <Demo initialIndex={3} />\n}\n\nInitialIndexOnMount.story = {\n  name: \"initialIndex on mount\",\n}\n\nexport const NavigateViaProps = () => {\n  const [initialIndex, resetIndex] = useState(0)\n  return (\n    <Box>\n      <Demo initialIndex={initialIndex} onChange={resetIndex} />\n      <Box display=\"flex\" justifyContent=\"space-around\">\n        <Clickable onClick={() => resetIndex(0)}>Navigate to page 1</Clickable>\n        <Clickable onClick={() => resetIndex(1)}>Navigate to page 2</Clickable>\n        <Clickable onClick={() => resetIndex(2)}>Navigate to page 3</Clickable>\n        <Clickable onClick={() => resetIndex(3)}>Navigate to page 4</Clickable>\n      </Box>\n    </Box>\n  )\n}\n\nNavigateViaProps.story = {\n  name: \"Navigate via props\",\n}\n\nexport const OverwritingDefaultMargins = () => {\n  return <Demo mt={6} ml={6} />\n}\n\nOverwritingDefaultMargins.story = {\n  name: \"Overwriting default margins\",\n}\n\nexport const ConditionalChildren = () => {\n  return (\n    <Box mx={[2, 4]} my={2}>\n      <Swiper>\n        <Box bg=\"black10\" width={300} height={300} p={2}>\n          <Text variant=\"xs\">1</Text>\n        </Box>\n\n        <Box bg=\"black10\" width={300} height={300} p={2}>\n          <Text variant=\"xs\">2</Text>\n        </Box>\n\n        {false && (\n          <Box bg=\"black10\" width={300} height={300} p={2}>\n            <Text variant=\"xs\">3</Text>\n          </Box>\n        )}\n\n        {true && (\n          <Box bg=\"black10\" width={300} height={300} p={2}>\n            <Text variant=\"xs\">4</Text>\n          </Box>\n        )}\n\n        <Box bg=\"black10\" width={300} height={300} p={2}>\n          <Text variant=\"xs\">5</Text>\n        </Box>\n\n        <Box bg=\"black10\" width={300} height={300} p={2}>\n          <Text variant=\"xs\">6</Text>\n        </Box>\n      </Swiper>\n    </Box>\n  )\n}\n"],"file":"Swiper.story.js"}

package/dist/elements/Tabs/Tabs.js

@@ -11,8 +11,6 @@ var _react = _interopRequireWildcard(require("react"));
 
 var _flattenChildren = require("../../helpers/flattenChildren");
 
-var _Theme = require("../../Theme");
-
 var _useUpdateEffect = require("../../utils/useUpdateEffect");
 
 var _BaseTabs = require("../BaseTabs");
@@ -122,11 +120,6 @@ var Tabs = function Tabs(_ref2) {
       onChange = _ref2.onChange,
       rest = _objectWithoutProperties(_ref2, _excluded);
 
-  var textVariant = (0, _Theme.useThemeConfig)({
-    v2: "mediumText",
-    v3: "sm"
-  });
-
   var _useTabs = useTabs({
     children: children,
     initialTabIndex: initialTabIndex,
@@ -149,7 +142,7 @@ var Tabs = function Tabs(_ref2) {
       flex: 1
     }, /*#__PURE__*/_react.default.createElement(_BaseTabs.BaseTab, {
       active: i === activeTabIndex,
-      variant: textVariant
+      variant: "sm"
     }, /*#__PURE__*/_react.default.createElement("span", null, tab.child.props.name)));
   })), activeTab.current.child);
 };

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/elements/Tabs/Tabs.tsx"],"names":["useTabs","children","initialTabIndex","onChange","tabs","map","child","ref","activeTabIndex","setActiveTabIndex","activeTab","current","tab","position","offsetLeft","scrollTo","left","behavior","handleClick","index","tabIndex","name","props","data","Tabs","rest","textVariant","v2","v3","i","defaultProps","mb","Tab"],"mappings":"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","sourcesContent":["import { TextVariant } from \"@artsy/palette-tokens/dist/typography/types\"\nimport React, {\n  createRef,\n  useCallback,\n  useEffect,\n  useMemo,\n  useRef,\n  useState,\n} from \"react\"\nimport { flattenChildren } from \"../../helpers/flattenChildren\"\nimport { useThemeConfig } from \"../../Theme\"\nimport { useUpdateEffect } from \"../../utils/useUpdateEffect\"\nimport { BaseTabs, BaseTabsProps } from \"../BaseTabs\"\nimport { BaseTab } from \"../BaseTabs\"\nimport { Clickable } from \"../Clickable\"\n\nexport interface TabLike extends JSX.Element {\n  props: TabProps\n}\n\nexport interface TabInfo extends TabProps {\n  /** Index of the newly selected Tab */\n  tabIndex: number\n  /**\n   * Arbitrary data that can be associated with a Tab.\n   * Will be passed to the parent <Tabs>'s onChange handler.\n   */\n  data: any\n}\n\nexport interface TabsProps extends BaseTabsProps {\n  /** Space or visual divider between tabs */\n  separator?: JSX.Element\n  /** Index of the Tab that should be pre-selected */\n  initialTabIndex?: number\n  /** @deprecated */\n  autoScroll?: boolean\n  /** Function that will be called when a new Tab is selected */\n  onChange?: (tabInfo?: TabInfo) => void\n}\n\n/** Tabs functionality */\nexport const useTabs = ({\n  children,\n  initialTabIndex = 0,\n  onChange,\n}: TabsProps) => {\n  const tabs = useMemo(\n    () =>\n      flattenChildren<TabLike>(children).map((child) => ({\n        child,\n        ref: createRef<HTMLButtonElement | null>(),\n      })),\n    [children]\n  )\n\n  const [activeTabIndex, setActiveTabIndex] = useState<number>(initialTabIndex)\n\n  // Wraps active tab in a ref to prevent re-rendering.\n  // This means that we need to update the active tab before the index state change\n  // to catch the re-render.\n  const activeTab = useRef(tabs[activeTabIndex])\n\n  // If the `initialTabIndex` changes; update the active one\n  useUpdateEffect(() => {\n    activeTab.current = tabs[initialTabIndex]\n    setActiveTabIndex(initialTabIndex)\n  }, [initialTabIndex, tabs])\n\n  // Ref of the tabs viewport\n  const ref = useRef<HTMLDivElement | null>(null)\n\n  // Scroll to active tab when `activeTabIndex` changes\n  useEffect(() => {\n    if (!ref.current) return\n    const tab = activeTab.current.ref.current\n    if (!tab) return\n    const position = tab.offsetLeft\n    ref.current.scrollTo?.({ left: position, behavior: \"smooth\" })\n  }, [activeTabIndex])\n\n  const handleClick = useCallback(\n    (index: number) => {\n      return () => {\n        if (index === activeTabIndex) return\n\n        activeTab.current = tabs[index]\n        setActiveTabIndex(index)\n\n        if (!onChange) return\n\n        onChange({\n          tabIndex: index,\n          name: tabs[index].child.props.name,\n          data: tabs[index].child.props.data ?? {},\n        })\n      }\n    },\n    [activeTabIndex, onChange, tabs]\n  )\n\n  return {\n    activeTab,\n    activeTabIndex,\n    handleClick,\n    ref,\n    tabs,\n  }\n}\n\n/** A tab bar navigation component */\nexport const Tabs: React.FC<TabsProps> = ({\n  children,\n  initialTabIndex = 0,\n  onChange,\n  ...rest\n}) => {\n  const textVariant: TextVariant = useThemeConfig({\n    v2: \"mediumText\",\n    v3: \"sm\",\n  })\n\n  const { tabs, activeTab, activeTabIndex, handleClick, ref } = useTabs({\n    children,\n    initialTabIndex,\n    onChange,\n  })\n\n  return (\n    <>\n      <BaseTabs ref={ref} {...rest}>\n        {tabs.map((tab, i) => {\n          return (\n            <Clickable\n              key={i}\n              ref={tab.ref as any}\n              aria-selected={i === activeTabIndex}\n              onClick={handleClick(i)}\n              flex={1}\n            >\n              <BaseTab active={i === activeTabIndex} variant={textVariant}>\n                <span>{tab.child.props.name}</span>\n              </BaseTab>\n            </Clickable>\n          )\n        })}\n      </BaseTabs>\n\n      {activeTab.current.child}\n    </>\n  )\n}\n\nTabs.defaultProps = {\n  mb: 2,\n}\n\nexport interface TabProps {\n  /** Display name of the Tab */\n  name: string | JSX.Element\n  /**\n   * Arbitrary data that can be associated with a Tab.\n   * Will be passed to the parent <Tabs>'s onChange handler.\n   */\n  data?: any\n}\n\n/**\n * An individual tab.\n * Does nothing on its own; props are dealt with inside of Tabs.\n */\nexport const Tab: React.FC<TabProps> = ({ children }) => <>{children}</>\n"],"file":"Tabs.js"}
+{"version":3,"sources":["../../../src/elements/Tabs/Tabs.tsx"],"names":["useTabs","children","initialTabIndex","onChange","tabs","map","child","ref","activeTabIndex","setActiveTabIndex","activeTab","current","tab","position","offsetLeft","scrollTo","left","behavior","handleClick","index","tabIndex","name","props","data","Tabs","rest","i","defaultProps","mb","Tab"],"mappings":"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","sourcesContent":["import React, {\n  createRef,\n  useCallback,\n  useEffect,\n  useMemo,\n  useRef,\n  useState,\n} from \"react\"\nimport { flattenChildren } from \"../../helpers/flattenChildren\"\nimport { useUpdateEffect } from \"../../utils/useUpdateEffect\"\nimport { BaseTabs, BaseTabsProps } from \"../BaseTabs\"\nimport { BaseTab } from \"../BaseTabs\"\nimport { Clickable } from \"../Clickable\"\n\nexport interface TabLike extends JSX.Element {\n  props: TabProps\n}\n\nexport interface TabInfo extends TabProps {\n  /** Index of the newly selected Tab */\n  tabIndex: number\n  /**\n   * Arbitrary data that can be associated with a Tab.\n   * Will be passed to the parent <Tabs>'s onChange handler.\n   */\n  data: any\n}\n\nexport interface TabsProps extends BaseTabsProps {\n  /** Space or visual divider between tabs */\n  separator?: JSX.Element\n  /** Index of the Tab that should be pre-selected */\n  initialTabIndex?: number\n  /** @deprecated */\n  autoScroll?: boolean\n  /** Function that will be called when a new Tab is selected */\n  onChange?: (tabInfo?: TabInfo) => void\n}\n\n/** Tabs functionality */\nexport const useTabs = ({\n  children,\n  initialTabIndex = 0,\n  onChange,\n}: TabsProps) => {\n  const tabs = useMemo(\n    () =>\n      flattenChildren<TabLike>(children).map((child) => ({\n        child,\n        ref: createRef<HTMLButtonElement | null>(),\n      })),\n    [children]\n  )\n\n  const [activeTabIndex, setActiveTabIndex] = useState<number>(initialTabIndex)\n\n  // Wraps active tab in a ref to prevent re-rendering.\n  // This means that we need to update the active tab before the index state change\n  // to catch the re-render.\n  const activeTab = useRef(tabs[activeTabIndex])\n\n  // If the `initialTabIndex` changes; update the active one\n  useUpdateEffect(() => {\n    activeTab.current = tabs[initialTabIndex]\n    setActiveTabIndex(initialTabIndex)\n  }, [initialTabIndex, tabs])\n\n  // Ref of the tabs viewport\n  const ref = useRef<HTMLDivElement | null>(null)\n\n  // Scroll to active tab when `activeTabIndex` changes\n  useEffect(() => {\n    if (!ref.current) return\n    const tab = activeTab.current.ref.current\n    if (!tab) return\n    const position = tab.offsetLeft\n    ref.current.scrollTo?.({ left: position, behavior: \"smooth\" })\n  }, [activeTabIndex])\n\n  const handleClick = useCallback(\n    (index: number) => {\n      return () => {\n        if (index === activeTabIndex) return\n\n        activeTab.current = tabs[index]\n        setActiveTabIndex(index)\n\n        if (!onChange) return\n\n        onChange({\n          tabIndex: index,\n          name: tabs[index].child.props.name,\n          data: tabs[index].child.props.data ?? {},\n        })\n      }\n    },\n    [activeTabIndex, onChange, tabs]\n  )\n\n  return {\n    activeTab,\n    activeTabIndex,\n    handleClick,\n    ref,\n    tabs,\n  }\n}\n\n/** A tab bar navigation component */\nexport const Tabs: React.FC<TabsProps> = ({\n  children,\n  initialTabIndex = 0,\n  onChange,\n  ...rest\n}) => {\n  const { tabs, activeTab, activeTabIndex, handleClick, ref } = useTabs({\n    children,\n    initialTabIndex,\n    onChange,\n  })\n\n  return (\n    <>\n      <BaseTabs ref={ref} {...rest}>\n        {tabs.map((tab, i) => {\n          return (\n            <Clickable\n              key={i}\n              ref={tab.ref as any}\n              aria-selected={i === activeTabIndex}\n              onClick={handleClick(i)}\n              flex={1}\n            >\n              <BaseTab active={i === activeTabIndex} variant=\"sm\">\n                <span>{tab.child.props.name}</span>\n              </BaseTab>\n            </Clickable>\n          )\n        })}\n      </BaseTabs>\n\n      {activeTab.current.child}\n    </>\n  )\n}\n\nTabs.defaultProps = {\n  mb: 2,\n}\n\nexport interface TabProps {\n  /** Display name of the Tab */\n  name: string | JSX.Element\n  /**\n   * Arbitrary data that can be associated with a Tab.\n   * Will be passed to the parent <Tabs>'s onChange handler.\n   */\n  data?: any\n}\n\n/**\n * An individual tab.\n * Does nothing on its own; props are dealt with inside of Tabs.\n */\nexport const Tab: React.FC<TabProps> = ({ children }) => <>{children}</>\n"],"file":"Tabs.js"}

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

@@ -1,5 +1,5 @@
 /// <reference types="react" />
-import { TextVariant } from "@artsy/palette-tokens/dist/typography/types";
+import { TextVariant } from "@artsy/palette-tokens/dist/typography/v3";
 import { ColorProps, ResponsiveValue, TypographyProps } from "styled-system";
 import { Color } from "../../Theme";
 import { BoxProps } from "../Box";
@@ -46,7 +46,7 @@ export declare const Text: import("styled-components").StyledComponentClass<impo
      * ["md", "sm"]
      * @see {@link TextVariant}
      */
-    variant?: ResponsiveValue<TextVariant, Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>> | undefined;
+    variant?: ResponsiveValue<"xxxl" | "xxl" | "xl" | "lg" | "lg-display" | "md" | "sm" | "sm-display" | "xs" | "bq", Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>> | undefined;
     textColor?: 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;
     /**
      * Max number of lines before truncating the content with an ellipsis at the end of the last line.
@@ -68,7 +68,7 @@ export declare const Text: import("styled-components").StyledComponentClass<impo
      * ["md", "sm"]
      * @see {@link TextVariant}
      */
-    variant?: ResponsiveValue<TextVariant, Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>> | undefined;
+    variant?: ResponsiveValue<"xxxl" | "xxl" | "xl" | "lg" | "lg-display" | "md" | "sm" | "sm-display" | "xs" | "bq", Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>> | undefined;
     textColor?: 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;
     /**
      * Max number of lines before truncating the content with an ellipsis at the end of the last line.

package/dist/elements/Text/Text.js

@@ -7,18 +7,12 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.textMixin = exports.overflowEllipsisMixin = exports.Text = void 0;
 
-var _v = require("@artsy/palette-tokens/dist/typography/v2");
-
-var _v2 = require("@artsy/palette-tokens/dist/typography/v3");
-
-var _themeGet = require("@styled-system/theme-get");
+var _v = require("@artsy/palette-tokens/dist/typography/v3");
 
 var _styledComponents = _interopRequireWildcard(require("styled-components"));
 
 var _styledSystem = require("styled-system");
 
-var _Theme = require("../../Theme");
-
 var _Box = require("../Box");
 
 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); }
@@ -48,18 +42,9 @@ exports.overflowEllipsisMixin = overflowEllipsisMixin;
 var Text = (0, _styledComponents.default)(_Box.Box).withConfig({
   displayName: "Text",
   componentId: "sc-18gcpao-0"
-})(["&&{", " ", "}"], function (props) {
-  return (0, _Theme.getThemeConfig)(props, {
-    v2: (0, _styledComponents.css)(["", " ", " @media (min-width:", "){", " ", "}"], (0, _styledSystem.variant)({
-      variants: _v.TEXT_VARIANTS.small
-    }), textMixin, (0, _themeGet.themeGet)("breakpoints.0"), (0, _styledSystem.variant)({
-      variants: _v.TEXT_VARIANTS.large
-    }), textMixin),
-    v3: (0, _styledComponents.css)(["", " ", ""], (0, _styledSystem.variant)({
-      variants: _v2.TEXT_VARIANTS
-    }), textMixin)
-  });
-}, function (props) {
+})(["&&{", " ", " ", "}"], (0, _styledSystem.variant)({
+  variants: _v.TEXT_VARIANTS
+}), textMixin, function (props) {
   return (0, _styledComponents.css)(["", " ", ""], props.overflowEllipsis && overflowEllipsisMixin, props.lineClamp && (0, _styledComponents.css)(["display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:", ";line-clamp:", ";overflow:hidden;"], props.lineClamp, props.lineClamp));
 });
 exports.Text = Text;

package/dist/elements/Text/Text.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/elements/Text/Text.tsx"],"names":["textColor","prop","cssProperty","key","textTransform","textMixin","typography","color","overflowEllipsisMixin","css","Text","Box","props","v2","variants","V2_TEXT_VARIANTS","small","large","v3","V3_TEXT_VARIANTS","overflowEllipsis","lineClamp","displayName","defaultProps","fontFamily","variant"],"mappings":";;;;;;;;;AACA;;AACA;;AACA;;AACA;;AACA;;AAWA;;AACA;;;;;;AAwBA,IAAMA,SAAS,GAAG,yBAAM;AACtBC,EAAAA,IAAI,EAAE,WADgB;AAEtBC,EAAAA,WAAW,EAAE,OAFS;AAGtBC,EAAAA,GAAG,EAAE;AAHiB,CAAN,CAAlB;AAcA,IAAMC,aAAa,GAAG,0BAAO;AAAEA,EAAAA,aAAa,EAAE;AAAjB,CAAP,CAAtB;AAEA;;AACO,IAAMC,SAAS,GAAG,2BAAQC,wBAAR,EAAoBC,mBAApB,EAA2BP,SAA3B,EAAsCI,aAAtC,CAAlB;AAEP;;;AACO,IAAMI,qBAAqB,OAAGC,qBAAH,iEAA3B;AAMP;;;;AAQA;AACO,IAAMC,IAAI,GAAG,+BAAOC,QAAP,CAAH;AAAA;AAAA;AAAA,sBAEX,UAACC,KAAD,EAAW;AACX,SAAO,2BAAeA,KAAf,EAAsB;AAC3BC,IAAAA,EAAE,MAAEJ,qBAAF,oDACE,2BAAQ;AAAEK,MAAAA,QAAQ,EAAEC,iBAAiBC;AAA7B,KAAR,CADF,EAEEX,SAFF,EAImB,wBAAS,eAAT,CAJnB,EAKI,2BAAQ;AAAES,MAAAA,QAAQ,EAAEC,iBAAiBE;AAA7B,KAAR,CALJ,EAMIZ,SANJ,CADyB;AAU3Ba,IAAAA,EAAE,MAAET,qBAAF,iBACE,2BAAQ;AAAEK,MAAAA,QAAQ,EAAEK;AAAZ,KAAR,CADF,EAEEd,SAFF;AAVyB,GAAtB,CAAP;AAeD,CAlBY,EAoBX,UAACO,KAAD,EAAW;AACX,aAAOH,qBAAP,iBACIG,KAAK,CAACQ,gBAAN,IAA0BZ,qBAD9B,EAEII,KAAK,CAACS,SAAN,QACFZ,qBADE,gHAIsBG,KAAK,CAACS,SAJ5B,EAKcT,KAAK,CAACS,SALpB,CAFJ;AAWD,CAhCY,CAAV;;AAoCPX,IAAI,CAACY,WAAL,GAAmB,MAAnB;AAEAZ,IAAI,CAACa,YAAL,GAAoB;AAClBC,EAAAA,UAAU,EAAE,MADM;AAElBC,EAAAA,OAAO,EAAE;AAFS,CAApB","sourcesContent":["import { TextVariant } from \"@artsy/palette-tokens/dist/typography/types\"\nimport { TEXT_VARIANTS as V2_TEXT_VARIANTS } from \"@artsy/palette-tokens/dist/typography/v2\"\nimport { TEXT_VARIANTS as V3_TEXT_VARIANTS } from \"@artsy/palette-tokens/dist/typography/v3\"\nimport { themeGet } from \"@styled-system/theme-get\"\nimport styled, { css } from \"styled-components\"\nimport {\n  color,\n  ColorProps,\n  compose,\n  ResponsiveValue,\n  style,\n  system,\n  typography,\n  TypographyProps,\n  variant,\n} from \"styled-system\"\nimport { Color, getThemeConfig } from \"../../Theme\"\nimport { Box, BoxProps } from \"../Box\"\n\n/** BaseTextProps */\nexport type BaseTextProps = TypographyProps &\n  Omit<ColorProps, \"color\"> & {\n    /**\n     * @description\n     * Variants of the text. Possible to pass an array that\n     * behaves accordingly to the media breakpoints [\"sm\", \"md\", \"lg\", \"xl\"]\n     * @example\n     * \"sm\"\n     * \"md\"\n     * [\"md\", \"sm\"]\n     * @see {@link TextVariant}\n     */\n    variant?: ResponsiveValue<TextVariant>\n    textColor?: ResponsiveValue<Color>\n    /**\n     * Max number of lines before truncating the content with an ellipsis at the end of the last line.\n     * Overwriting display is required for this.\n     */\n    lineClamp?: number\n  }\n\nconst textColor = style({\n  prop: \"textColor\",\n  cssProperty: \"color\",\n  key: \"colors\",\n})\n\nexport type TextTransform =\n  | \"none\"\n  | \"capitalize\"\n  | \"uppercase\"\n  | \"lowercase\"\n  | \"initial\"\n  | \"inherit\"\n\nconst textTransform = system({ textTransform: true })\n\n/** styled functions for Text */\nexport const textMixin = compose(typography, color, textColor, textTransform)\n\n/** Adds ellipsis to overflowing text */\nexport const overflowEllipsisMixin = css`\n  overflow: hidden;\n  white-space: nowrap;\n  text-overflow: ellipsis;\n`\n\n/** TextProps */\nexport type TextProps = BaseTextProps &\n  BoxProps & {\n    overflowEllipsis?: boolean\n    textTransform?: ResponsiveValue<TextTransform>\n    lineClamp?: ResponsiveValue<number>\n  }\n\n/** Text */\nexport const Text = styled(Box)<TextProps>`\n  && {\n    ${(props) => {\n      return getThemeConfig(props, {\n        v2: css`\n          ${variant({ variants: V2_TEXT_VARIANTS.small })}\n          ${textMixin}\n\n        @media (min-width: ${themeGet(\"breakpoints.0\")}) {\n            ${variant({ variants: V2_TEXT_VARIANTS.large })}\n            ${textMixin}\n          }\n        `,\n        v3: css`\n          ${variant({ variants: V3_TEXT_VARIANTS })}\n          ${textMixin}\n        `,\n      })\n    }}\n\n    ${(props) => {\n      return css`\n        ${props.overflowEllipsis && overflowEllipsisMixin}\n        ${props.lineClamp &&\n        css`\n          display: -webkit-box;\n          -webkit-box-orient: vertical;\n          -webkit-line-clamp: ${props.lineClamp};\n          line-clamp: ${props.lineClamp};\n          overflow: hidden;\n        `}\n      `\n    }}\n  }\n`\n\nText.displayName = \"Text\"\n\nText.defaultProps = {\n  fontFamily: \"sans\",\n  variant: \"sm\",\n}\n"],"file":"Text.js"}
+{"version":3,"sources":["../../../src/elements/Text/Text.tsx"],"names":["textColor","prop","cssProperty","key","textTransform","textMixin","typography","color","overflowEllipsisMixin","css","Text","Box","variants","TEXT_VARIANTS","props","overflowEllipsis","lineClamp","displayName","defaultProps","fontFamily","variant"],"mappings":";;;;;;;;;AAAA;;AAIA;;AACA;;AAYA;;;;;;AAwBA,IAAMA,SAAS,GAAG,yBAAM;AACtBC,EAAAA,IAAI,EAAE,WADgB;AAEtBC,EAAAA,WAAW,EAAE,OAFS;AAGtBC,EAAAA,GAAG,EAAE;AAHiB,CAAN,CAAlB;AAcA,IAAMC,aAAa,GAAG,0BAAO;AAAEA,EAAAA,aAAa,EAAE;AAAjB,CAAP,CAAtB;AAEA;;AACO,IAAMC,SAAS,GAAG,2BAAQC,wBAAR,EAAoBC,mBAApB,EAA2BP,SAA3B,EAAsCI,aAAtC,CAAlB;AAEP;;;AACO,IAAMI,qBAAqB,OAAGC,qBAAH,iEAA3B;AAMP;;;;AAQA;AACO,IAAMC,IAAI,GAAG,+BAAOC,QAAP,CAAH;AAAA;AAAA;AAAA,2BAEX,2BAAQ;AAAEC,EAAAA,QAAQ,EAAEC;AAAZ,CAAR,CAFW,EAGXR,SAHW,EAKX,UAACS,KAAD,EAAW;AACX,aAAOL,qBAAP,iBACIK,KAAK,CAACC,gBAAN,IAA0BP,qBAD9B,EAEIM,KAAK,CAACE,SAAN,QACFP,qBADE,gHAIsBK,KAAK,CAACE,SAJ5B,EAKcF,KAAK,CAACE,SALpB,CAFJ;AAWD,CAjBY,CAAV;;AAqBPN,IAAI,CAACO,WAAL,GAAmB,MAAnB;AAEAP,IAAI,CAACQ,YAAL,GAAoB;AAClBC,EAAAA,UAAU,EAAE,MADM;AAElBC,EAAAA,OAAO,EAAE;AAFS,CAApB","sourcesContent":["import {\n  TEXT_VARIANTS,\n  TextVariant,\n} from \"@artsy/palette-tokens/dist/typography/v3\"\nimport styled, { css } from \"styled-components\"\nimport {\n  color,\n  ColorProps,\n  compose,\n  ResponsiveValue,\n  style,\n  system,\n  typography,\n  TypographyProps,\n  variant,\n} from \"styled-system\"\nimport { Color } from \"../../Theme\"\nimport { Box, BoxProps } from \"../Box\"\n\n/** BaseTextProps */\nexport type BaseTextProps = TypographyProps &\n  Omit<ColorProps, \"color\"> & {\n    /**\n     * @description\n     * Variants of the text. Possible to pass an array that\n     * behaves accordingly to the media breakpoints [\"sm\", \"md\", \"lg\", \"xl\"]\n     * @example\n     * \"sm\"\n     * \"md\"\n     * [\"md\", \"sm\"]\n     * @see {@link TextVariant}\n     */\n    variant?: ResponsiveValue<TextVariant>\n    textColor?: ResponsiveValue<Color>\n    /**\n     * Max number of lines before truncating the content with an ellipsis at the end of the last line.\n     * Overwriting display is required for this.\n     */\n    lineClamp?: number\n  }\n\nconst textColor = style({\n  prop: \"textColor\",\n  cssProperty: \"color\",\n  key: \"colors\",\n})\n\nexport type TextTransform =\n  | \"none\"\n  | \"capitalize\"\n  | \"uppercase\"\n  | \"lowercase\"\n  | \"initial\"\n  | \"inherit\"\n\nconst textTransform = system({ textTransform: true })\n\n/** styled functions for Text */\nexport const textMixin = compose(typography, color, textColor, textTransform)\n\n/** Adds ellipsis to overflowing text */\nexport const overflowEllipsisMixin = css`\n  overflow: hidden;\n  white-space: nowrap;\n  text-overflow: ellipsis;\n`\n\n/** TextProps */\nexport type TextProps = BaseTextProps &\n  BoxProps & {\n    overflowEllipsis?: boolean\n    textTransform?: ResponsiveValue<TextTransform>\n    lineClamp?: ResponsiveValue<number>\n  }\n\n/** Text */\nexport const Text = styled(Box)<TextProps>`\n  && {\n    ${variant({ variants: TEXT_VARIANTS })}\n    ${textMixin}\n\n    ${(props) => {\n      return css`\n        ${props.overflowEllipsis && overflowEllipsisMixin}\n        ${props.lineClamp &&\n        css`\n          display: -webkit-box;\n          -webkit-box-orient: vertical;\n          -webkit-line-clamp: ${props.lineClamp};\n          line-clamp: ${props.lineClamp};\n          overflow: hidden;\n        `}\n      `\n    }}\n  }\n`\n\nText.displayName = \"Text\"\n\nText.defaultProps = {\n  fontFamily: \"sans\",\n  variant: \"sm\",\n}\n"],"file":"Text.js"}

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

@@ -4,6 +4,5 @@ declare const _default: {
 export default _default;
 export declare const Variants: () => JSX.Element;
 export declare const As: () => JSX.Element;
-export declare const CustomTypography: () => JSX.Element;
 export declare const Truncation: () => JSX.Element;
 export declare const Caps: () => JSX.Element;

package/dist/elements/Text/Text.story.js

@@ -3,11 +3,9 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.default = exports.Variants = exports.Truncation = exports.CustomTypography = exports.Caps = exports.As = void 0;
+exports.default = exports.Variants = exports.Truncation = exports.Caps = exports.As = void 0;
 
-var _v = require("@artsy/palette-tokens/dist/typography/v2");
-
-var _v2 = require("@artsy/palette-tokens/dist/typography/v3");
+var _v = require("@artsy/palette-tokens/dist/typography/v3");
 
 var _themeGet = require("@styled-system/theme-get");
 
@@ -17,22 +15,12 @@ var _storybookStates = require("storybook-states");
 
 var _styledComponents = _interopRequireDefault(require("styled-components"));
 
-var _Theme = require("../../Theme");
-
 var _Flex = require("../Flex");
 
 var _Text = require("./Text");
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
-function _toConsumableArray(arr) { return _arrayWithoutHoles(arr) || _iterableToArray(arr) || _unsupportedIterableToArray(arr) || _nonIterableSpread(); }
-
-function _nonIterableSpread() { throw new TypeError("Invalid attempt to spread non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
-
-function _iterableToArray(iter) { if (typeof Symbol !== "undefined" && iter[Symbol.iterator] != null || iter["@@iterator"] != null) return Array.from(iter); }
-
-function _arrayWithoutHoles(arr) { if (Array.isArray(arr)) return _arrayLikeToArray(arr); }
-
 function _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest(); }
 
 function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
@@ -65,10 +53,10 @@ var Specification = function Specification(_ref) {
     return value && /*#__PURE__*/_react.default.createElement(_Flex.Flex, {
       key: property
     }, /*#__PURE__*/_react.default.createElement(_Text.Text, {
-      variant: "small",
+      variant: "xs",
       textColor: textColor
     }, property, ":\xA0"), /*#__PURE__*/_react.default.createElement(_Text.Text, {
-      variant: "small",
+      variant: "xs",
       textColor: textColor
     }, value));
   }));
@@ -80,41 +68,20 @@ var _default = {
 exports.default = _default;
 
 var Variants = function Variants() {
-  var _useTheme = (0, _Theme.useTheme)(),
-      theme = _useTheme.theme;
-
-  var names = {
-    v2: _toConsumableArray(_v.TEXT_VARIANT_NAMES),
-    v3: _toConsumableArray(_v2.TEXT_VARIANT_NAMES)
-  }[theme.id];
-  var variants = {
-    v2: _v.TEXT_VARIANTS,
-    v3: _v2.TEXT_VARIANTS
-  }[theme.id];
   return /*#__PURE__*/_react.default.createElement(Table, null, /*#__PURE__*/_react.default.createElement("thead", null, /*#__PURE__*/_react.default.createElement("tr", null, /*#__PURE__*/_react.default.createElement("th", null, /*#__PURE__*/_react.default.createElement(_Text.Text, {
-    variant: "small"
-  }, "Variant")), "large" in variants && /*#__PURE__*/_react.default.createElement("th", null, /*#__PURE__*/_react.default.createElement(_Text.Text, {
-    variant: "small"
-  }, "Large (>\xA0767)")), "small" in variants && /*#__PURE__*/_react.default.createElement("th", null, /*#__PURE__*/_react.default.createElement(_Text.Text, {
-    variant: "small"
-  }, "Small (<\xA0767)")), !("large" in variants && "small" in variants) && /*#__PURE__*/_react.default.createElement("th", null, /*#__PURE__*/_react.default.createElement(_Text.Text, {
-    variant: "small"
+    variant: "sm-display"
+  }, "Variant")), /*#__PURE__*/_react.default.createElement("th", null, /*#__PURE__*/_react.default.createElement(_Text.Text, {
+    variant: "sm-display"
   }, "Specifications")), /*#__PURE__*/_react.default.createElement("th", null, /*#__PURE__*/_react.default.createElement(_Text.Text, {
-    variant: "small"
-  }, "Example")))), /*#__PURE__*/_react.default.createElement("tbody", null, names.map(function (key) {
+    variant: "sm-display"
+  }, "Example")))), /*#__PURE__*/_react.default.createElement("tbody", null, _v.TEXT_VARIANT_NAMES.map(function (key) {
     return /*#__PURE__*/_react.default.createElement("tr", {
       key: key
     }, /*#__PURE__*/_react.default.createElement("td", null, /*#__PURE__*/_react.default.createElement(_Text.Text, {
-      variant: "small"
-    }, key)), "large" in variants && /*#__PURE__*/_react.default.createElement("td", null, /*#__PURE__*/_react.default.createElement(Specification, {
-      size: "large",
-      treatment: variants.large[key]
-    })), "small" in variants && /*#__PURE__*/_react.default.createElement("td", null, /*#__PURE__*/_react.default.createElement(Specification, {
-      size: "small",
-      treatment: variants.small[key]
-    })), !("large" in variants && "small" in variants) && /*#__PURE__*/_react.default.createElement("td", null, /*#__PURE__*/_react.default.createElement(Specification, {
+      variant: "sm-display"
+    }, key)), /*#__PURE__*/_react.default.createElement("td", null, /*#__PURE__*/_react.default.createElement(Specification, {
       size: "default",
-      treatment: variants[key]
+      treatment: _v.TEXT_VARIANTS[key]
     })), /*#__PURE__*/_react.default.createElement("td", null, /*#__PURE__*/_react.default.createElement(_Text.Text, {
       variant: key
     }, "All their equipment and instruments are alive")));
@@ -130,55 +97,13 @@ var As = function As() {
     return /*#__PURE__*/_react.default.createElement(_Text.Text, {
       key: element,
       as: element,
-      variant: "text"
+      variant: "sm"
     }, "This is a text component with an element set to ", element);
   }));
 };
 
 exports.As = As;
 
-var CustomTypography = function CustomTypography() {
-  var SPECIFICATIONS = [{
-    fontFamily: "sans",
-    fontSize: "size12",
-    lineHeight: "solid",
-    letterSpacing: "tightest"
-  }, {
-    fontFamily: "serif",
-    fontSize: "70px",
-    lineHeight: "solid",
-    letterSpacing: "tight"
-  }, {
-    fontFamily: "sans",
-    fontSize: "48px",
-    lineHeight: "solid",
-    letterSpacing: "tightest"
-  }, {
-    fontFamily: "serif",
-    fontSize: "55px",
-    lineHeight: "solid",
-    letterSpacing: "tightest"
-  }, {
-    fontFamily: "serif",
-    variant: "text",
-    lineHeight: "solid"
-  }];
-  return /*#__PURE__*/_react.default.createElement(Table, null, /*#__PURE__*/_react.default.createElement("thead", null, /*#__PURE__*/_react.default.createElement("tr", null, /*#__PURE__*/_react.default.createElement("th", null, /*#__PURE__*/_react.default.createElement(_Text.Text, {
-    variant: "small"
-  }, "Specifications")), /*#__PURE__*/_react.default.createElement("th", null, /*#__PURE__*/_react.default.createElement(_Text.Text, {
-    variant: "small"
-  }, "Example")))), /*#__PURE__*/_react.default.createElement("tbody", null, SPECIFICATIONS.map(function (specification, i) {
-    return /*#__PURE__*/_react.default.createElement("tr", {
-      key: i
-    }, /*#__PURE__*/_react.default.createElement("td", null, /*#__PURE__*/_react.default.createElement(Specification, {
-      treatment: specification
-    })), /*#__PURE__*/_react.default.createElement("td", null, /*#__PURE__*/_react.default.createElement(_Text.Text, specification, "All their equipment and instruments are alive")));
-  })));
-};
-
-exports.CustomTypography = CustomTypography;
-CustomTypography.displayName = "CustomTypography";
-
 var Truncation = function Truncation() {
   return /*#__PURE__*/_react.default.createElement(_storybookStates.States, {
     states: [{
@@ -187,7 +112,7 @@ var Truncation = function Truncation() {
       lineClamp: 2
     }]
   }, /*#__PURE__*/_react.default.createElement(_Text.Text, {
-    variant: "text"
+    variant: "sm"
   }, "All their equipment and instruments are alive. All their equipment and instruments are alive. All their equipment and instruments are alive. All their equipment and instruments are alive. All their equipment and instruments are alive. All their equipment and instruments are alive. All their equipment and instruments are alive. All their equipment and instruments are alive. All their equipment and instruments are alive."));
 };
 

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/elements/Text/Text.story.tsx"],"names":["Table","styled","table","Specification","size","treatment","textColor","small","large","Object","entries","map","property","value","title","Variants","theme","names","v2","V2_TEXT_VARIANT_NAMES","v3","V3_TEXT_VARIANT_NAMES","id","variants","V2_TEXT_VARIANTS","V3_TEXT_VARIANTS","key","As","ELEMENTS","element","CustomTypography","SPECIFICATIONS","fontFamily","fontSize","lineHeight","letterSpacing","variant","specification","i","Truncation","overflowEllipsis","lineClamp","Caps","textTransform"],"mappings":"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","sourcesContent":["import { TextVariant } from \"@artsy/palette-tokens/dist/typography/types\"\nimport {\n  TEXT_VARIANT_NAMES as V2_TEXT_VARIANT_NAMES,\n  TEXT_VARIANTS as V2_TEXT_VARIANTS,\n} from \"@artsy/palette-tokens/dist/typography/v2\"\nimport {\n  TEXT_VARIANT_NAMES as V3_TEXT_VARIANT_NAMES,\n  TEXT_VARIANTS as V3_TEXT_VARIANTS,\n} from \"@artsy/palette-tokens/dist/typography/v3\"\nimport { themeGet } from \"@styled-system/theme-get\"\nimport React from \"react\"\nimport { States } from \"storybook-states\"\nimport styled from \"styled-components\"\nimport { Color, useTheme } from \"../../Theme\"\nimport { Flex } from \"../Flex\"\nimport { Text, TextProps } from \"./Text\"\n\nconst Table = styled.table`\n  width: 100%;\n  border: 1px solid ${themeGet(\"colors.black10\")};\n  border-collapse: collapse;\n\n  > thead > tr > th {\n    text-align: left;\n    font-weight: normal;\n  }\n\n  > thead > tr > th,\n  > tbody > tr > td {\n    border-bottom: 1px solid ${themeGet(\"colors.black10\")};\n    border-left: 1px solid ${themeGet(\"colors.black10\")};\n    padding: ${themeGet(\"space.1\")};\n  }\n`\n\nconst Specification: React.FC<{\n  size?: \"small\" | \"large\" | \"default\"\n  treatment: any\n}> = ({ size, treatment }) => {\n  const textColor =\n    {\n      small: [\"purple100\", \"black60\"] as Color[],\n      large: [\"black60\", \"purple100\"] as Color[],\n    }[size || \"small\"] || \"black60\"\n\n  return (\n    <>\n      {Object.entries(treatment).map(([property, value]) => {\n        return (\n          value && (\n            <Flex key={property}>\n              <Text variant=\"small\" textColor={textColor}>\n                {property}:&nbsp;\n              </Text>\n\n              <Text variant=\"small\" textColor={textColor}>\n                {value as any}\n              </Text>\n            </Flex>\n          )\n        )\n      })}\n    </>\n  )\n}\n\nexport default { title: \"Components/Text\" }\n\nexport const Variants = () => {\n  const { theme } = useTheme()\n\n  const names: TextVariant[] = {\n    v2: [...V2_TEXT_VARIANT_NAMES],\n    v3: [...V3_TEXT_VARIANT_NAMES],\n  }[theme.id]!\n\n  const variants = {\n    v2: V2_TEXT_VARIANTS,\n    v3: V3_TEXT_VARIANTS,\n  }[theme.id]!\n\n  return (\n    <Table>\n      <thead>\n        <tr>\n          <th>\n            <Text variant=\"small\">Variant</Text>\n          </th>\n          {\"large\" in variants && (\n            <th>\n              <Text variant=\"small\">Large (&gt;&nbsp;767)</Text>\n            </th>\n          )}\n          {\"small\" in variants && (\n            <th>\n              <Text variant=\"small\">Small (&lt;&nbsp;767)</Text>\n            </th>\n          )}\n          {!(\"large\" in variants && \"small\" in variants) && (\n            <th>\n              <Text variant=\"small\">Specifications</Text>\n            </th>\n          )}\n          <th>\n            <Text variant=\"small\">Example</Text>\n          </th>\n        </tr>\n      </thead>\n\n      <tbody>\n        {names.map((key) => (\n          <tr key={key}>\n            <td>\n              <Text variant=\"small\">{key}</Text>\n            </td>\n            {\"large\" in variants && (\n              <td>\n                <Specification size=\"large\" treatment={variants.large[key]} />\n              </td>\n            )}\n            {\"small\" in variants && (\n              <td>\n                <Specification size=\"small\" treatment={variants.small[key]} />\n              </td>\n            )}\n            {!(\"large\" in variants && \"small\" in variants) && (\n              <td>\n                <Specification size=\"default\" treatment={variants[key]} />\n              </td>\n            )}\n            <td>\n              <Text variant={key}>\n                All their equipment and instruments are alive\n              </Text>\n            </td>\n          </tr>\n        ))}\n      </tbody>\n    </Table>\n  )\n}\n\nexport const As = () => {\n  const ELEMENTS = [\"h1\", \"h2\", \"h3\", \"p\"] as Array<keyof JSX.IntrinsicElements>\n\n  return (\n    <>\n      {ELEMENTS.map((element) => {\n        return (\n          <Text key={element} as={element} variant=\"text\">\n            This is a text component with an element set to {element}\n          </Text>\n        )\n      })}\n    </>\n  )\n}\n\nexport const CustomTypography = () => {\n  const SPECIFICATIONS = [\n    {\n      fontFamily: \"sans\",\n      fontSize: \"size12\",\n      lineHeight: \"solid\",\n      letterSpacing: \"tightest\",\n    },\n    {\n      fontFamily: \"serif\",\n      fontSize: \"70px\",\n      lineHeight: \"solid\",\n      letterSpacing: \"tight\",\n    },\n    {\n      fontFamily: \"sans\",\n      fontSize: \"48px\",\n      lineHeight: \"solid\",\n      letterSpacing: \"tightest\",\n    },\n    {\n      fontFamily: \"serif\",\n      fontSize: \"55px\",\n      lineHeight: \"solid\",\n      letterSpacing: \"tightest\",\n    },\n    {\n      fontFamily: \"serif\",\n      variant: \"text\",\n      lineHeight: \"solid\",\n    },\n  ] as const\n\n  return (\n    <Table>\n      <thead>\n        <tr>\n          <th>\n            <Text variant=\"small\">Specifications</Text>\n          </th>\n          <th>\n            <Text variant=\"small\">Example</Text>\n          </th>\n        </tr>\n      </thead>\n\n      <tbody>\n        {SPECIFICATIONS.map((specification, i) => (\n          <tr key={i}>\n            <td>\n              <Specification treatment={specification} />\n            </td>\n            <td>\n              <Text {...specification}>\n                All their equipment and instruments are alive\n              </Text>\n            </td>\n          </tr>\n        ))}\n      </tbody>\n    </Table>\n  )\n}\n\nexport const Truncation = () => {\n  return (\n    <States<TextProps> states={[{ overflowEllipsis: true }, { lineClamp: 2 }]}>\n      <Text variant=\"text\">\n        All their equipment and instruments are alive. All their equipment and\n        instruments are alive. All their equipment and instruments are alive.\n        All their equipment and instruments are alive. All their equipment and\n        instruments are alive. All their equipment and instruments are alive.\n        All their equipment and instruments are alive. All their equipment and\n        instruments are alive. All their equipment and instruments are alive.\n      </Text>\n    </States>\n  )\n}\n\nexport const Caps = () => {\n  return (\n    <States<TextProps>\n      states={[\n        {},\n        { textTransform: \"uppercase\" },\n        { textTransform: \"capitalize\" },\n      ]}\n    >\n      <Text variant=\"xs\">Hello world</Text>\n    </States>\n  )\n}\n"],"file":"Text.story.js"}
+{"version":3,"sources":["../../../src/elements/Text/Text.story.tsx"],"names":["Table","styled","table","Specification","size","treatment","textColor","small","large","Object","entries","map","property","value","title","Variants","TEXT_VARIANT_NAMES","key","TEXT_VARIANTS","As","ELEMENTS","element","Truncation","overflowEllipsis","lineClamp","Caps","textTransform"],"mappings":";;;;;;;AAAA;;AAIA;;AACA;;AACA;;AACA;;AAEA;;AACA;;;;;;;;;;;;;;;;AAEA,IAAMA,KAAK,GAAGC,0BAAOC,KAAV;AAAA;AAAA;AAAA,mOAEW,wBAAS,gBAAT,CAFX,EAYoB,wBAAS,gBAAT,CAZpB,EAakB,wBAAS,gBAAT,CAblB,EAcI,wBAAS,SAAT,CAdJ,CAAX;;AAkBA,IAAMC,aAGJ,GAAG,SAHCA,aAGD,OAAyB;AAAA,MAAtBC,IAAsB,QAAtBA,IAAsB;AAAA,MAAhBC,SAAgB,QAAhBA,SAAgB;AAC5B,MAAMC,SAAS,GACb;AACEC,IAAAA,KAAK,EAAE,CAAC,WAAD,EAAc,SAAd,CADT;AAEEC,IAAAA,KAAK,EAAE,CAAC,SAAD,EAAY,WAAZ;AAFT,IAGEJ,IAAI,IAAI,OAHV,KAGsB,SAJxB;AAMA,sBACE,4DACGK,MAAM,CAACC,OAAP,CAAeL,SAAf,EAA0BM,GAA1B,CAA8B,iBAAuB;AAAA;AAAA,QAArBC,QAAqB;AAAA,QAAXC,KAAW;;AACpD,WACEA,KAAK,iBACH,6BAAC,UAAD;AAAM,MAAA,GAAG,EAAED;AAAX,oBACE,6BAAC,UAAD;AAAM,MAAA,OAAO,EAAC,IAAd;AAAmB,MAAA,SAAS,EAAEN;AAA9B,OACGM,QADH,UADF,eAKE,6BAAC,UAAD;AAAM,MAAA,OAAO,EAAC,IAAd;AAAmB,MAAA,SAAS,EAAEN;AAA9B,OACGO,KADH,CALF,CAFJ;AAaD,GAdA,CADH,CADF;AAmBD,CA7BD;;eA+Be;AAAEC,EAAAA,KAAK,EAAE;AAAT,C;;;AAER,IAAMC,QAAQ,GAAG,SAAXA,QAAW,GAAM;AAC5B,sBACE,6BAAC,KAAD,qBACE,yDACE,sDACE,sDACE,6BAAC,UAAD;AAAM,IAAA,OAAO,EAAC;AAAd,eADF,CADF,eAKE,sDACE,6BAAC,UAAD;AAAM,IAAA,OAAO,EAAC;AAAd,sBADF,CALF,eASE,sDACE,6BAAC,UAAD;AAAM,IAAA,OAAO,EAAC;AAAd,eADF,CATF,CADF,CADF,eAiBE,4CACGC,sBAAmBL,GAAnB,CAAuB,UAACM,GAAD;AAAA,wBACtB;AAAI,MAAA,GAAG,EAAEA;AAAT,oBACE,sDACE,6BAAC,UAAD;AAAM,MAAA,OAAO,EAAC;AAAd,OAA4BA,GAA5B,CADF,CADF,eAKE,sDACE,6BAAC,aAAD;AAAe,MAAA,IAAI,EAAC,SAApB;AAA8B,MAAA,SAAS,EAAEC,iBAAcD,GAAd;AAAzC,MADF,CALF,eASE,sDACE,6BAAC,UAAD;AAAM,MAAA,OAAO,EAAEA;AAAf,uDADF,CATF,CADsB;AAAA,GAAvB,CADH,CAjBF,CADF;AAuCD,CAxCM;;;AAAMF,Q;;AA0CN,IAAMI,EAAE,GAAG,SAALA,EAAK,GAAM;AACtB,MAAMC,QAAQ,GAAG,CAAC,IAAD,EAAO,IAAP,EAAa,IAAb,EAAmB,GAAnB,CAAjB;AAEA,sBACE,4DACGA,QAAQ,CAACT,GAAT,CAAa,UAACU,OAAD,EAAa;AACzB,wBACE,6BAAC,UAAD;AAAM,MAAA,GAAG,EAAEA,OAAX;AAAoB,MAAA,EAAE,EAAEA,OAAxB;AAAiC,MAAA,OAAO,EAAC;AAAzC,2DACmDA,OADnD,CADF;AAKD,GANA,CADH,CADF;AAWD,CAdM;;;;AAgBA,IAAMC,UAAU,GAAG,SAAbA,UAAa,GAAM;AAC9B,sBACE,6BAAC,uBAAD;AAAmB,IAAA,MAAM,EAAE,CAAC;AAAEC,MAAAA,gBAAgB,EAAE;AAApB,KAAD,EAA6B;AAAEC,MAAAA,SAAS,EAAE;AAAb,KAA7B;AAA3B,kBACE,6BAAC,UAAD;AAAM,IAAA,OAAO,EAAC;AAAd,8aADF,CADF;AAYD,CAbM;;;AAAMF,U;;AAeN,IAAMG,IAAI,GAAG,SAAPA,IAAO,GAAM;AACxB,sBACE,6BAAC,uBAAD;AACE,IAAA,MAAM,EAAE,CACN,EADM,EAEN;AAAEC,MAAAA,aAAa,EAAE;AAAjB,KAFM,EAGN;AAAEA,MAAAA,aAAa,EAAE;AAAjB,KAHM;AADV,kBAOE,6BAAC,UAAD;AAAM,IAAA,OAAO,EAAC;AAAd,mBAPF,CADF;AAWD,CAZM;;;AAAMD,I","sourcesContent":["import {\n  TEXT_VARIANT_NAMES,\n  TEXT_VARIANTS,\n} from \"@artsy/palette-tokens/dist/typography/v3\"\nimport { themeGet } from \"@styled-system/theme-get\"\nimport React from \"react\"\nimport { States } from \"storybook-states\"\nimport styled from \"styled-components\"\nimport { Color } from \"../../Theme\"\nimport { Flex } from \"../Flex\"\nimport { Text, TextProps } from \"./Text\"\n\nconst Table = styled.table`\n  width: 100%;\n  border: 1px solid ${themeGet(\"colors.black10\")};\n  border-collapse: collapse;\n\n  > thead > tr > th {\n    text-align: left;\n    font-weight: normal;\n  }\n\n  > thead > tr > th,\n  > tbody > tr > td {\n    border-bottom: 1px solid ${themeGet(\"colors.black10\")};\n    border-left: 1px solid ${themeGet(\"colors.black10\")};\n    padding: ${themeGet(\"space.1\")};\n  }\n`\n\nconst Specification: React.FC<{\n  size?: \"small\" | \"large\" | \"default\"\n  treatment: any\n}> = ({ size, treatment }) => {\n  const textColor =\n    {\n      small: [\"purple100\", \"black60\"] as Color[],\n      large: [\"black60\", \"purple100\"] as Color[],\n    }[size || \"small\"] || \"black60\"\n\n  return (\n    <>\n      {Object.entries(treatment).map(([property, value]) => {\n        return (\n          value && (\n            <Flex key={property}>\n              <Text variant=\"xs\" textColor={textColor}>\n                {property}:&nbsp;\n              </Text>\n\n              <Text variant=\"xs\" textColor={textColor}>\n                {value as any}\n              </Text>\n            </Flex>\n          )\n        )\n      })}\n    </>\n  )\n}\n\nexport default { title: \"Components/Text\" }\n\nexport const Variants = () => {\n  return (\n    <Table>\n      <thead>\n        <tr>\n          <th>\n            <Text variant=\"sm-display\">Variant</Text>\n          </th>\n\n          <th>\n            <Text variant=\"sm-display\">Specifications</Text>\n          </th>\n\n          <th>\n            <Text variant=\"sm-display\">Example</Text>\n          </th>\n        </tr>\n      </thead>\n\n      <tbody>\n        {TEXT_VARIANT_NAMES.map((key) => (\n          <tr key={key}>\n            <td>\n              <Text variant=\"sm-display\">{key}</Text>\n            </td>\n\n            <td>\n              <Specification size=\"default\" treatment={TEXT_VARIANTS[key]} />\n            </td>\n\n            <td>\n              <Text variant={key}>\n                All their equipment and instruments are alive\n              </Text>\n            </td>\n          </tr>\n        ))}\n      </tbody>\n    </Table>\n  )\n}\n\nexport const As = () => {\n  const ELEMENTS = [\"h1\", \"h2\", \"h3\", \"p\"] as Array<keyof JSX.IntrinsicElements>\n\n  return (\n    <>\n      {ELEMENTS.map((element) => {\n        return (\n          <Text key={element} as={element} variant=\"sm\">\n            This is a text component with an element set to {element}\n          </Text>\n        )\n      })}\n    </>\n  )\n}\n\nexport const Truncation = () => {\n  return (\n    <States<TextProps> states={[{ overflowEllipsis: true }, { lineClamp: 2 }]}>\n      <Text variant=\"sm\">\n        All their equipment and instruments are alive. All their equipment and\n        instruments are alive. All their equipment and instruments are alive.\n        All their equipment and instruments are alive. All their equipment and\n        instruments are alive. All their equipment and instruments are alive.\n        All their equipment and instruments are alive. All their equipment and\n        instruments are alive. All their equipment and instruments are alive.\n      </Text>\n    </States>\n  )\n}\n\nexport const Caps = () => {\n  return (\n    <States<TextProps>\n      states={[\n        {},\n        { textTransform: \"uppercase\" },\n        { textTransform: \"capitalize\" },\n      ]}\n    >\n      <Text variant=\"xs\">Hello world</Text>\n    </States>\n  )\n}\n"],"file":"Text.story.js"}

package/dist/elements/Typography/Typography.d.ts

@@ -69,9 +69,6 @@ export interface SansProps extends Partial<TextProps> {
  * @deprecated Use `<Text />`
  */
 export declare const Sans: StyledComponentClass<SansProps, any, {
-    fontFamily?: string | undefined;
-    p?: import("styled-system").ResponsiveValue<string | number | symbol, Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>> | undefined;
-    style?: React.CSSProperties | undefined;
     color?: import("styled-system").ResponsiveValue<string | number | symbol, Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>> | undefined;
     bg?: import("styled-system").ResponsiveValue<string | number | symbol, Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>> | undefined;
     backgroundColor?: import("styled-system").ResponsiveValue<string | number | symbol, Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>> | undefined;
@@ -94,6 +91,7 @@ export declare const Sans: StyledComponentClass<SansProps, any, {
     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;
@@ -107,14 +105,16 @@ export declare const Sans: StyledComponentClass<SansProps, any, {
     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;
+    style?: React.CSSProperties | undefined;
     className?: string | undefined;
     role?: string | undefined;
     textAlign?: import("styled-system").ResponsiveValue<import("csstype").TextAlignProperty, Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>> | undefined;
+    fontFamily?: string | undefined;
     fontSize?: import("styled-system").ResponsiveValue<string | number | symbol, Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>> | undefined;
     lineHeight?: import("styled-system").ResponsiveValue<string | number | symbol, Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>> | undefined;
     italic?: boolean | undefined;
     weight?: "medium" | "regular" | null | undefined;
-    element?: React.ComponentType<any> | keyof JSX.IntrinsicElements | undefined;
+    element?: keyof JSX.IntrinsicElements | React.ComponentType<any> | undefined;
     numberOfLines?: number | undefined;
     ellipsizeMode?: string | undefined;
     unstable_trackIn?: boolean | undefined;
@@ -145,9 +145,6 @@ export interface SerifProps extends Partial<TextProps> {
  * @deprecated Use `<Text />`
  */
 export declare const Serif: StyledComponentClass<SerifProps, any, {
-    fontFamily?: string | undefined;
-    p?: import("styled-system").ResponsiveValue<string | number | symbol, Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>> | undefined;
-    style?: React.CSSProperties | undefined;
     color?: import("styled-system").ResponsiveValue<string | number | symbol, Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>> | undefined;
     bg?: import("styled-system").ResponsiveValue<string | number | symbol, Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>> | undefined;
     backgroundColor?: import("styled-system").ResponsiveValue<string | number | symbol, Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>> | undefined;
@@ -170,6 +167,7 @@ export declare const Serif: StyledComponentClass<SerifProps, any, {
     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;
@@ -183,13 +181,15 @@ export declare const Serif: StyledComponentClass<SerifProps, any, {
     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;
+    style?: React.CSSProperties | undefined;
     className?: string | undefined;
     textAlign?: import("styled-system").ResponsiveValue<import("csstype").TextAlignProperty, Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>> | undefined;
+    fontFamily?: string | undefined;
     fontSize?: import("styled-system").ResponsiveValue<string | number | symbol, Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>> | undefined;
     lineHeight?: import("styled-system").ResponsiveValue<string | number | symbol, Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>> | undefined;
     italic?: boolean | undefined;
     weight?: "regular" | "semibold" | null | undefined;
-    element?: React.ComponentType<any> | keyof JSX.IntrinsicElements | undefined;
+    element?: keyof JSX.IntrinsicElements | React.ComponentType<any> | undefined;
     numberOfLines?: number | undefined;
     ellipsizeMode?: string | undefined;
     unstable_trackIn?: boolean | undefined;
@@ -214,9 +214,6 @@ export interface DisplayProps extends Partial<TextProps> {
  * <Display color="black10" size="3t">Hi</Display>
  */
 export declare const Display: StyledComponentClass<DisplayProps, any, {
-    fontFamily?: string | undefined;
-    p?: import("styled-system").ResponsiveValue<string | number | symbol, Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>> | undefined;
-    style?: React.CSSProperties | undefined;
     color?: import("styled-system").ResponsiveValue<string | number | symbol, Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>> | undefined;
     bg?: import("styled-system").ResponsiveValue<string | number | symbol, Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>> | undefined;
     backgroundColor?: import("styled-system").ResponsiveValue<string | number | symbol, Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>> | undefined;
@@ -239,6 +236,7 @@ export declare const Display: StyledComponentClass<DisplayProps, any, {
     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;
@@ -252,12 +250,14 @@ export declare const Display: StyledComponentClass<DisplayProps, any, {
     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;
+    style?: React.CSSProperties | undefined;
     className?: string | undefined;
     textAlign?: import("styled-system").ResponsiveValue<import("csstype").TextAlignProperty, Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>> | undefined;
+    fontFamily?: string | undefined;
     fontSize?: import("styled-system").ResponsiveValue<string | number | symbol, Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>> | undefined;
     lineHeight?: import("styled-system").ResponsiveValue<string | number | symbol, Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>> | undefined;
     weight?: "regular" | null | undefined;
-    element?: React.ComponentType<any> | keyof JSX.IntrinsicElements | undefined;
+    element?: keyof JSX.IntrinsicElements | React.ComponentType<any> | undefined;
     numberOfLines?: number | undefined;
     ellipsizeMode?: string | undefined;
 } & {

package/dist/elements/index.d.ts

@@ -65,7 +65,6 @@ export * from "./Stepper";
 export * from "./Sup";
 export * from "./Swiper";
 export * from "./Tabs";
-export * from "./Tags";
 export * from "./Text";
 export * from "./TextArea";
 export * from "./TimeRemaining";

package/dist/elements/index.js

@@ -875,19 +875,6 @@ Object.keys(_Tabs).forEach(function (key) {
   });
 });
 
-var _Tags = require("./Tags");
-
-Object.keys(_Tags).forEach(function (key) {
-  if (key === "default" || key === "__esModule") return;
-  if (key in exports && exports[key] === _Tags[key]) return;
-  Object.defineProperty(exports, key, {
-    enumerable: true,
-    get: function get() {
-      return _Tags[key];
-    }
-  });
-});
-
 var _Text = require("./Text");
 
 Object.keys(_Text).forEach(function (key) {