@teamturing/react-kit 2.21.5 → 2.21.7

package/esm/core/IconButton/index.js

@@ -1,6 +1,3 @@
-import color from '../../packages/token-studio/esm/token/color/index.js';
-import radii from '../../packages/token-studio/esm/token/radii/index.js';
-import '../../packages/token-studio/esm/token/typography/index.js';
 import { forwardRef } from 'react';
 import styled from 'styled-components';
 import '../../node_modules/styled-system/dist/index.esm.js';
@@ -33,10 +30,11 @@ const IconButton = /*#__PURE__*/forwardRef(({
 });
 const BaseIconButton = styled(UnstyledButton)(({
   $loading,
-  $disabled
+  $disabled,
+  theme
 }) => ({
   'position': 'relative',
-  'borderRadius': radii.full,
+  'borderRadius': theme.radii.full,
   'transition': 'background-color 100ms, color 100ms',
   '& svg': {
     display: 'block',
@@ -44,7 +42,7 @@ const BaseIconButton = styled(UnstyledButton)(({
   },
   'cursor': $loading ? 'progress' : $disabled ? 'not-allowed' : 'pointer',
   '&:focus-visible': {
-    outlineColor: color['border/focused'],
+    outlineColor: theme.colors['border/focused'],
     outlineStyle: 'solid',
     outlineWidth: 2,
     outlineOffset: 2
@@ -75,55 +73,56 @@ const BaseIconButton = styled(UnstyledButton)(({
     }
   }
 }), ({
-  $disabled
+  $disabled,
+  theme
 }) => variant({
   prop: 'variant',
   variants: {
     'primary': {
-      'backgroundColor': color['bg/primary'],
-      'color': color['icon/inverse'],
+      'backgroundColor': theme.colors['bg/primary'],
+      'color': theme.colors['icon/inverse'],
       '&:hover:not(:disabled)': {
-        backgroundColor: color['bg/primary/hovered']
+        backgroundColor: theme.colors['bg/primary/hovered']
       },
       '&:active:not(:disabled)': {
-        backgroundColor: color['bg/primary/pressed']
+        backgroundColor: theme.colors['bg/primary/pressed']
       },
       ...($disabled ? {
-        backgroundColor: color['bg/disabled'],
-        color: color['icon/disabled']
+        backgroundColor: theme.colors['bg/disabled'],
+        color: theme.colors['icon/disabled']
       } : {})
     },
     'secondary': {
-      'backgroundColor': color['bg/secondary'],
-      'color': color['icon/primary'],
+      'backgroundColor': theme.colors['bg/secondary'],
+      'color': theme.colors['icon/primary'],
       '&:hover:not(:disabled)': {
-        backgroundColor: color['bg/secondary/hovered']
+        backgroundColor: theme.colors['bg/secondary/hovered']
       },
       '&:active:not(:disabled)': {
-        backgroundColor: color['bg/secondary/pressed']
+        backgroundColor: theme.colors['bg/secondary/pressed']
       },
       ...($disabled ? {
-        backgroundColor: color['bg/disabled'],
-        color: color['icon/disabled']
+        backgroundColor: theme.colors['bg/disabled'],
+        color: theme.colors['icon/disabled']
       } : {})
     },
     'neutral': {
-      'backgroundColor': color['bg/neutral'],
-      'color': color['icon/accent/gray'],
+      'backgroundColor': theme.colors['bg/neutral'],
+      'color': theme.colors['icon/accent/gray'],
       '&:hover:not(:disabled)': {
-        backgroundColor: color['bg/neutral/hovered']
+        backgroundColor: theme.colors['bg/neutral/hovered']
       },
       '&:active:not(:disabled)': {
-        backgroundColor: color['bg/neutral/pressed']
+        backgroundColor: theme.colors['bg/neutral/pressed']
       },
       ...($disabled ? {
-        backgroundColor: color['bg/disabled'],
-        color: color['icon/disabled']
+        backgroundColor: theme.colors['bg/disabled'],
+        color: theme.colors['icon/disabled']
       } : {})
     },
     'outlined': {
-      'backgroundColor': color['bg/neutral/subtler'],
-      'color': color['icon/neutral/bolder'],
+      'backgroundColor': theme.colors['bg/neutral/subtler'],
+      'color': theme.colors['icon/neutral/bolder'],
       '&:after': {
         content: '""',
         position: 'absolute',
@@ -133,78 +132,78 @@ const BaseIconButton = styled(UnstyledButton)(({
         left: 0,
         borderWidth: 1,
         borderStyle: 'solid',
-        borderColor: color['border/neutral/bolder'],
-        borderRadius: radii.full,
+        borderColor: theme.colors['border/neutral/bolder'],
+        borderRadius: theme.radii.full,
         boxSizing: 'border-box'
       },
       '&:hover:not(:disabled)': {
-        backgroundColor: color['bg/neutral/subtler/hovered']
+        backgroundColor: theme.colors['bg/neutral/subtler/hovered']
       },
       '&:active:not(:disabled)': {
-        backgroundColor: color['bg/neutral/subtler/pressed']
+        backgroundColor: theme.colors['bg/neutral/subtler/pressed']
       },
       ...($disabled ? {
-        'backgroundColor': color['bg/disabled'],
-        'color': color['icon/disabled'],
+        'backgroundColor': theme.colors['bg/disabled'],
+        'color': theme.colors['icon/disabled'],
         '&:after': {
           display: 'none'
         }
       } : {})
     },
     'plain-bold': {
-      'backgroundColor': color['bg/neutral/subtler'],
-      'color': color['icon/neutral/bolder'],
+      'backgroundColor': theme.colors['bg/neutral/subtler'],
+      'color': theme.colors['icon/neutral/bolder'],
       '&:hover:not(:disabled)': {
-        color: color['icon/accent/gray']
+        color: theme.colors['icon/accent/gray']
       },
       '&:active:not(:disabled)': {
-        color: color['icon/accent/gray']
+        color: theme.colors['icon/accent/gray']
       },
       ...($disabled ? {
-        backgroundColor: color['bg/disabled/subtlest'],
-        color: color['icon/disabled']
+        backgroundColor: theme.colors['bg/disabled/subtlest'],
+        color: theme.colors['icon/disabled']
       } : {})
     },
     'plain': {
-      'backgroundColor': color['bg/neutral/subtler'],
-      'color': color['icon/neutral/bold'],
+      'backgroundColor': theme.colors['bg/neutral/subtler'],
+      'color': theme.colors['icon/neutral/bold'],
       '&:hover:not(:disabled)': {
-        color: color['icon/neutral/bolder']
+        color: theme.colors['icon/neutral/bolder']
       },
       '&:active:not(:disabled)': {
-        color: color['icon/neutral/bolder']
+        color: theme.colors['icon/neutral/bolder']
       },
       ...($disabled ? {
-        backgroundColor: color['bg/disabled/subtlest'],
-        color: color['icon/disabled/subtler']
+        backgroundColor: theme.colors['bg/disabled/subtlest'],
+        color: theme.colors['icon/disabled/subtler']
       } : {})
     },
     'plain-subtle': {
-      'backgroundColor': color['bg/neutral/subtler'],
-      'color': color['icon/neutral'],
+      'backgroundColor': theme.colors['bg/neutral/subtler'],
+      'color': theme.colors['icon/neutral'],
       '&:hover:not(:disabled)': {
-        color: color['icon/neutral/bold']
+        color: theme.colors['icon/neutral/bold']
       },
       '&:active:not(:disabled)': {
-        color: color['icon/neutral/bold']
+        color: theme.colors['icon/neutral/bold']
       },
       ...($disabled ? {
-        backgroundColor: color['bg/disabled/subtlest'],
-        color: color['icon/disabled/subtler']
+        backgroundColor: theme.colors['bg/disabled/subtlest'],
+        color: theme.colors['icon/disabled/subtler']
       } : {})
     },
     'danger': {
-      'backgroundColor': color['bg/danger/bold'],
-      'color': color['icon/inverse'],
+      'backgroundColor': theme.colors['bg/danger/bold'],
+      'color': theme.colors['icon/inverse'],
       '&:hover:not(:disabled)': {
-        backgroundColor: color['bg/danger/bold/hovered']
+        backgroundColor: theme.colors['bg/danger/bold/hovered']
       },
       '&:active:not(:disabled)': {
-        backgroundColor: color['bg/danger/bold/pressed']
+        backgroundColor: theme.colors['bg/danger/bold/pressed']
       },
       ...($disabled ? {
-        backgroundColor: color['bg/disabled'],
-        color: color['icon/disabled']
+        backgroundColor: theme.colors['bg/disabled'],
+        color: theme.colors['icon/disabled']
       } : {})
     }
   }

package/esm/core/IconToggleButton/index.js

@@ -1,6 +1,3 @@
-import color from '../../packages/token-studio/esm/token/color/index.js';
-import radii from '../../packages/token-studio/esm/token/radii/index.js';
-import '../../packages/token-studio/esm/token/typography/index.js';
 import styled from 'styled-components';
 import '../../node_modules/styled-system/dist/index.esm.js';
 import { sx } from '../../utils/styled-system/index.js';
@@ -31,17 +28,18 @@ const IconToggleButton = ({
   });
 };
 const BaseIconToggleButton = styled(UnstyledButton)(({
-  $disabled
+  $disabled,
+  theme
 }) => ({
   'position': 'relative',
-  'borderRadius': radii.full,
+  'borderRadius': theme.radii.full,
   'transition': 'background-color 100ms, color 100ms',
   '& svg': {
     display: 'block'
   },
   'cursor': $disabled ? 'not-allowed' : 'pointer',
   '&:focus-visible': {
-    outlineColor: color['border/focused'],
+    outlineColor: theme.colors['border/focused'],
     outlineStyle: 'solid',
     outlineWidth: 2,
     outlineOffset: 2
@@ -73,33 +71,34 @@ const BaseIconToggleButton = styled(UnstyledButton)(({
   }
 }), ({
   selected,
-  $disabled
+  $disabled,
+  theme
 }) => variant({
   prop: 'variant',
   variants: {
     primary: {
       ...(selected ? {
-        backgroundColor: color['bg/selected/violet'],
-        color: color['icon/inverse']
+        backgroundColor: theme.colors['bg/selected/violet'],
+        color: theme.colors['icon/inverse']
       } : {
-        backgroundColor: color['bg/neutral'],
-        color: color['icon/accent/gray']
+        backgroundColor: theme.colors['bg/neutral'],
+        color: theme.colors['icon/accent/gray']
       }),
       ...($disabled ? {
-        backgroundColor: color['bg/disabled'],
-        color: color['icon/disabled']
+        backgroundColor: theme.colors['bg/disabled'],
+        color: theme.colors['icon/disabled']
       } : {})
     },
     plain: {
-      backgroundColor: color['bg/neutral/subtler'],
+      backgroundColor: theme.colors['bg/neutral/subtler'],
       ...(selected ? {
-        color: color['icon/selected/violet']
+        color: theme.colors['icon/selected/violet']
       } : {
-        color: color['icon/neutral']
+        color: theme.colors['icon/neutral']
       }),
       ...($disabled ? {
-        backgroundColor: color['bg/disabled/subtlest'],
-        color: color['icon/disabled/subtler']
+        backgroundColor: theme.colors['bg/disabled/subtlest'],
+        color: theme.colors['icon/disabled/subtler']
       } : {})
     }
   }

package/esm/core/OverlayPopper/index.js

@@ -1,8 +1,7 @@
 import { useFloating } from '../../node_modules/@floating-ui/react-dom/dist/floating-ui.react-dom.js';
-import space from '../../packages/token-studio/esm/token/space/index.js';
-import '../../packages/token-studio/esm/token/typography/index.js';
 import { isFunction } from '../../packages/utils/esm/isFunction.js';
 import { Children, cloneElement } from 'react';
+import { useTheme } from 'styled-components';
 import useFocusTrap from '../../hook/useFocusTrap.js';
 import useFocusZone from '../../hook/useFocusZone.js';
 import useToggleState from '../../hook/useToggleState.js';
@@ -19,6 +18,7 @@ const OverlayPopper = ({
   onOpen,
   onClose
 }) => {
+  const theme = useTheme();
   const {
     refs,
     elements,
@@ -27,7 +27,7 @@ const OverlayPopper = ({
   } = useFloating({
     placement,
     whileElementsMounted: autoUpdate,
-    middleware: [offset(space[1]), flip(), shift()],
+    middleware: [offset(theme.space[1]), flip(), shift()],
     strategy: 'fixed'
   });
   const [isOpen, toggleOverlay, openOverlay, closeOverlay] = useToggleState({

package/esm/core/Spinner/index.js

@@ -1,7 +1,5 @@
 import 'react';
 import SvgProgressGradient from '../../packages/icons/esm/ProgressGradient.js';
-import color from '../../packages/token-studio/esm/token/color/index.js';
-import '../../packages/token-studio/esm/token/typography/index.js';
 import styled, { keyframes } from 'styled-components';
 
 const spin = keyframes`
@@ -13,12 +11,14 @@ const spin = keyframes`
   }
 `;
 const Spinner = styled(SvgProgressGradient)`
+  color: ${({
+  theme
+}) => theme.colors['icon/neutral']};
   animation: ${spin} 1000ms infinite steps(8, end);
 `;
 Spinner.defaultProps = {
   width: 32,
-  height: 32,
-  color: color['icon/neutral']
+  height: 32
 };
 
 export { Spinner as default };

package/esm/core/Stack/index.js

@@ -1,5 +1,3 @@
-import space from '../../packages/token-studio/esm/token/space/index.js';
-import '../../packages/token-studio/esm/token/typography/index.js';
 import { forcePixelValue } from '../../packages/utils/esm/forcePixelValue.js';
 import { forwardRef } from 'react';
 import styled from 'styled-components';
@@ -29,9 +27,11 @@ const BaseStack = styled(View)({
   display: 'flex',
   flexDirection: 'row',
   flexWrap: 'wrap'
-}, variant({
+}, ({
+  theme
+}) => variant({
   prop: 'gapX',
-  variants: Object.fromEntries(Object.entries(space).map(([key, value]) => {
+  variants: Object.fromEntries(Object.entries(theme.space).map(([key, value]) => {
     const styleValue = {
       '& > *': {
         px: forcePixelValue(value / 2)
@@ -40,9 +40,11 @@ const BaseStack = styled(View)({
     };
     return [key, styleValue];
   }))
-}), variant({
+}), ({
+  theme
+}) => variant({
   prop: 'gapY',
-  variants: Object.fromEntries(Object.entries(space).map(([key, value]) => {
+  variants: Object.fromEntries(Object.entries(theme.space).map(([key, value]) => {
     const styleValue = {
       '& > *': {
         mt: forcePixelValue(value)

package/esm/core/Tab/TabItem.js

@@ -1,4 +1,3 @@
-import typography from '../../packages/token-studio/esm/token/typography/index.js';
 import { scrollIntoView } from '../../packages/utils/esm/scrollIntoView.js';
 import { useRef, useContext } from 'react';
 import styled from 'styled-components';
@@ -77,15 +76,17 @@ const BaseTabItem = styled(UnstyledButton)(({
     outlineWidth: 2,
     outlineOffset: 2
   }
-}), () => variant({
+}), ({
+  theme
+}) => variant({
   prop: 'size',
   variants: {
     l: {
       'px': 4,
       'py': 2,
-      'fontSize': typography['s'].fontSize,
-      'fontWeight': typography['s'].fontWeight,
-      'lineHeight': typography['s'].lineHeight,
+      'fontSize': theme.fontSizes.s,
+      'fontWeight': theme.fontWeights.medium,
+      'lineHeight': theme.lineHeights[2],
       '& svg': {
         width: 20,
         height: 20
@@ -94,9 +95,9 @@ const BaseTabItem = styled(UnstyledButton)(({
     m: {
       'px': 4,
       'py': 2,
-      'fontSize': typography['xs'].fontSize,
-      'fontWeight': typography['xs'].fontWeight,
-      'lineHeight': typography['xs'].lineHeight,
+      'fontSize': theme.fontSizes.xs,
+      'fontWeight': theme.fontWeights.medium,
+      'lineHeight': theme.lineHeights[2],
       '& svg': {
         width: 20,
         height: 20
@@ -105,9 +106,9 @@ const BaseTabItem = styled(UnstyledButton)(({
     s: {
       'px': 3,
       'py': 2,
-      'fontSize': typography['xxs'].fontSize,
-      'fontWeight': typography['xxs'].fontWeight,
-      'lineHeight': typography['xxs'].lineHeight,
+      'fontSize': theme.fontSizes.xxs,
+      'fontWeight': theme.fontWeights.medium,
+      'lineHeight': theme.lineHeights[2],
       '& svg': {
         width: 16,
         height: 16

package/esm/core/Tab/index.js

@@ -1,11 +1,9 @@
 import { createContext, useRef, useState, useEffect } from 'react';
 import SvgChevronLeft from '../../packages/icons/esm/ChevronLeft.js';
 import SvgChevronRight from '../../packages/icons/esm/ChevronRight.js';
-import elevation from '../../packages/token-studio/esm/token/elevation/index.js';
-import gradient from '../../packages/token-studio/esm/token/gradient/index.js';
-import '../../packages/token-studio/esm/token/typography/index.js';
 import { forcePixelValue } from '../../packages/utils/esm/forcePixelValue.js';
 import throttle from '../../node_modules/lodash.throttle/index.js';
+import { useTheme } from 'styled-components';
 import useResize from '../../hook/useResize.js';
 import IconButton from '../IconButton/index.js';
 import View from '../View/index.js';
@@ -19,6 +17,7 @@ const Tab = ({
   gap = 2,
   children
 }) => {
+  const theme = useTheme();
   const rootRef = useRef(null);
   const [isLeftButtonVisible, setIsLeftButtonVisible] = useState(rootRef.current ? rootRef.current.scrollLeft > 0 : false);
   const [isRightButtonVisible, setIsRightButtonVisible] = useState(rootRef.current ? rootRef.current.clientWidth + rootRef.current.scrollLeft < rootRef.current.scrollWidth : false);
@@ -86,7 +85,7 @@ const Tab = ({
               bottom: 0,
               width: forcePixelValue(gradientWidth),
               height: '100%',
-              background: `linear-gradient(${gradient['overlay/floating/toright']})`,
+              background: `linear-gradient(${theme.gradients['overlay/floating/toright']})`,
               pointerEvents: 'none'
             }
           }), /*#__PURE__*/jsxRuntimeExports.jsx(View, {
@@ -97,7 +96,7 @@ const Tab = ({
               top: 0,
               left: 0,
               bottom: 0,
-              backgroundColor: elevation.surface
+              backgroundColor: theme.colors.surface
             },
             children: /*#__PURE__*/jsxRuntimeExports.jsx(IconButton, {
               size: 's',
@@ -115,7 +114,7 @@ const Tab = ({
               bottom: 0,
               width: forcePixelValue(gradientWidth),
               height: '100%',
-              background: `linear-gradient(${gradient['overlay/floating/toleft']})`,
+              background: `linear-gradient(${theme.gradients['overlay/floating/toleft']})`,
               pointerEvents: 'none'
             }
           }), /*#__PURE__*/jsxRuntimeExports.jsx(View, {
@@ -126,7 +125,7 @@ const Tab = ({
               top: 0,
               right: 0,
               bottom: 0,
-              backgroundColor: elevation.surface
+              backgroundColor: theme.colors.surface
             },
             children: /*#__PURE__*/jsxRuntimeExports.jsx(IconButton, {
               size: 's',

package/esm/core/Text/index.js

@@ -1,4 +1,3 @@
-import typography from '../../packages/token-studio/esm/token/typography/index.js';
 import styled from 'styled-components';
 import { fontSize, fontWeight, lineHeight, textAlign } from '../../node_modules/styled-system/dist/index.esm.js';
 import { sx, wordBreak, whiteSpace, textDecoration } from '../../utils/styled-system/index.js';
@@ -12,34 +11,136 @@ const Text = styled.span({
   '& > span': {
     display: 'inline'
   }
-}, variant({
+}, ({
+  theme
+}) => variant({
   prop: 'typography',
   variants: {
-    'display1': typography.display1,
-    'display2': typography.display2,
-    'display3': typography.display3,
-    'display4': typography.display4,
-    'xxl/regular': typography['xxl/regular'],
-    'xxl': typography['xxl'],
-    'xxl/bold': typography['xxl/bold'],
-    'xl/regular': typography['xl/regular'],
-    'xl': typography['xl'],
-    'xl/bold': typography['xl/bold'],
-    'l/regular': typography['l/regular'],
-    'l': typography['l'],
-    'l/bold': typography['l/bold'],
-    'm/regular': typography['m/regular'],
-    'm': typography['m'],
-    'm/bold': typography['m/bold'],
-    's/regular': typography['s/regular'],
-    's': typography['s'],
-    's/bold': typography['s/bold'],
-    'xs/regular': typography['xs/regular'],
-    'xs': typography['xs'],
-    'xs/bold': typography['xs/bold'],
-    'xxs/regular': typography['xxs/regular'],
-    'xxs': typography['xxs'],
-    'xxs/bold': typography['xxs/bold']
+    'display1': {
+      fontSize: theme.fontSizes.display1,
+      fontWeight: theme.fontWeights.bold,
+      lineHeight: theme.lineHeights[1]
+    },
+    'display2': {
+      fontSize: theme.fontSizes.display2,
+      fontWeight: theme.fontWeights.bold,
+      lineHeight: theme.lineHeights[1]
+    },
+    'display3': {
+      fontSize: theme.fontSizes.display3,
+      fontWeight: theme.fontWeights.bold,
+      lineHeight: theme.lineHeights[1]
+    },
+    'display4': {
+      fontSize: theme.fontSizes.display4,
+      fontWeight: theme.fontWeights.bold,
+      lineHeight: theme.lineHeights[2]
+    },
+    'xxl/regular': {
+      fontSize: theme.fontSizes.xxl,
+      fontWeight: theme.fontWeights.regular,
+      lineHeight: theme.lineHeights[2]
+    },
+    'xxl': {
+      fontSize: theme.fontSizes.xxl,
+      fontWeight: theme.fontWeights.medium,
+      lineHeight: theme.lineHeights[2]
+    },
+    'xxl/bold': {
+      fontSize: theme.fontSizes.xxl,
+      fontWeight: theme.fontWeights.bold,
+      lineHeight: theme.lineHeights[2]
+    },
+    'xl/regular': {
+      fontSize: theme.fontSizes.xl,
+      fontWeight: theme.fontWeights.regular,
+      lineHeight: theme.lineHeights[2]
+    },
+    'xl': {
+      fontSize: theme.fontSizes.xl,
+      fontWeight: theme.fontWeights.medium,
+      lineHeight: theme.lineHeights[2]
+    },
+    'xl/bold': {
+      fontSize: theme.fontSizes.xl,
+      fontWeight: theme.fontWeights.bold,
+      lineHeight: theme.lineHeights[2]
+    },
+    'l/regular': {
+      fontSize: theme.fontSizes.l,
+      fontWeight: theme.fontWeights.regular,
+      lineHeight: theme.lineHeights[2]
+    },
+    'l': {
+      fontSize: theme.fontSizes.l,
+      fontWeight: theme.fontWeights.medium,
+      lineHeight: theme.lineHeights[2]
+    },
+    'l/bold': {
+      fontSize: theme.fontSizes.l,
+      fontWeight: theme.fontWeights.bold,
+      lineHeight: theme.lineHeights[2]
+    },
+    'm/regular': {
+      fontSize: theme.fontSizes.m,
+      fontWeight: theme.fontWeights.regular,
+      lineHeight: theme.lineHeights[2]
+    },
+    'm': {
+      fontSize: theme.fontSizes.m,
+      fontWeight: theme.fontWeights.medium,
+      lineHeight: theme.lineHeights[2]
+    },
+    'm/bold': {
+      fontSize: theme.fontSizes.m,
+      fontWeight: theme.fontWeights.bold,
+      lineHeight: theme.lineHeights[2]
+    },
+    's/regular': {
+      fontSize: theme.fontSizes.s,
+      fontWeight: theme.fontWeights.regular,
+      lineHeight: theme.lineHeights[2]
+    },
+    's': {
+      fontSize: theme.fontSizes.s,
+      fontWeight: theme.fontWeights.medium,
+      lineHeight: theme.lineHeights[2]
+    },
+    's/bold': {
+      fontSize: theme.fontSizes.s,
+      fontWeight: theme.fontWeights.bold,
+      lineHeight: theme.lineHeights[2]
+    },
+    'xs/regular': {
+      fontSize: theme.fontSizes.xs,
+      fontWeight: theme.fontWeights.regular,
+      lineHeight: theme.lineHeights[2]
+    },
+    'xs': {
+      fontSize: theme.fontSizes.xs,
+      fontWeight: theme.fontWeights.medium,
+      lineHeight: theme.lineHeights[2]
+    },
+    'xs/bold': {
+      fontSize: theme.fontSizes.xs,
+      fontWeight: theme.fontWeights.bold,
+      lineHeight: theme.lineHeights[2]
+    },
+    'xxs/regular': {
+      fontSize: theme.fontSizes.xxs,
+      fontWeight: theme.fontWeights.regular,
+      lineHeight: theme.lineHeights[2]
+    },
+    'xxs': {
+      fontSize: theme.fontSizes.xxs,
+      fontWeight: theme.fontWeights.medium,
+      lineHeight: theme.lineHeights[2]
+    },
+    'xxs/bold': {
+      fontSize: theme.fontSizes.xxs,
+      fontWeight: theme.fontWeights.bold,
+      lineHeight: theme.lineHeights[2]
+    }
   }
 }), compose(wordBreak, whiteSpace, textDecoration, fontSize, fontWeight, lineHeight, color, textAlign), sx);
 Text.defaultProps = {