@teamturing/react-kit 2.21.5 → 2.21.7

package/esm/core/Button/index.js

@@ -131,88 +131,88 @@ const BaseButton = styled(UnstyledButton)(({
   prop: 'variant',
   variants: {
     primary: {
-      'backgroundColor': theme.color['bg/primary'],
-      'color': theme.color['text/inverse'],
+      'backgroundColor': theme.colors['bg/primary'],
+      'color': theme.colors['text/inverse'],
       '& svg': {
-        color: theme.color['icon/inverse']
+        color: theme.colors['icon/inverse']
       },
       '&:hover:not(:disabled)': {
-        backgroundColor: theme.color['bg/primary/hovered']
+        backgroundColor: theme.colors['bg/primary/hovered']
       },
       '&:active:not(:disabled)': {
-        backgroundColor: theme.color['bg/primary/pressed']
+        backgroundColor: theme.colors['bg/primary/pressed']
       },
       '&:focus-visible': {
-        outlineColor: theme.color['border/focused'],
+        outlineColor: theme.colors['border/focused'],
         outlineStyle: 'solid',
         outlineWidth: 2,
         outlineOffset: 2
       },
       ...($disabled ? {
-        'backgroundColor': theme.color['bg/disabled'],
-        'color': theme.color['text/disabled'],
+        'backgroundColor': theme.colors['bg/disabled'],
+        'color': theme.colors['text/disabled'],
         '& svg': {
-          color: theme.color['icon/disabled']
+          color: theme.colors['icon/disabled']
         }
       } : {})
     },
     secondary: {
-      'backgroundColor': theme.color['bg/secondary'],
-      'color': theme.color['text/primary'],
+      'backgroundColor': theme.colors['bg/secondary'],
+      'color': theme.colors['text/primary'],
       '& svg': {
-        color: theme.color['icon/primary']
+        color: theme.colors['icon/primary']
       },
       '&:hover:not(:disabled)': {
-        backgroundColor: theme.color['bg/secondary/hovered']
+        backgroundColor: theme.colors['bg/secondary/hovered']
       },
       '&:active:not(:disabled)': {
-        backgroundColor: theme.color['bg/secondary/pressed']
+        backgroundColor: theme.colors['bg/secondary/pressed']
       },
       '&:focus-visible': {
-        outlineColor: theme.color['border/focused'],
+        outlineColor: theme.colors['border/focused'],
         outlineStyle: 'solid',
         outlineWidth: 2,
         outlineOffset: 2
       },
       ...($disabled ? {
-        'backgroundColor': theme.color['bg/disabled'],
-        'color': theme.color['text/disabled'],
+        'backgroundColor': theme.colors['bg/disabled'],
+        'color': theme.colors['text/disabled'],
         '& svg': {
-          color: theme.color['icon/disabled']
+          color: theme.colors['icon/disabled']
         }
       } : {})
     },
     neutral: {
-      'backgroundColor': theme.color['bg/neutral'],
-      'color': theme.color['text/neutral'],
+      'backgroundColor': theme.colors['bg/neutral'],
+      'color': theme.colors['text/neutral'],
       '& svg': {
-        color: theme.color['icon/accent/gray']
+        color: theme.colors['icon/accent/gray']
       },
       '&:hover:not(:disabled)': {
-        backgroundColor: theme.color['bg/neutral/hovered']
+        backgroundColor: theme.colors['bg/neutral/hovered']
       },
       '&:active:not(:disabled)': {
-        backgroundColor: theme.color['bg/neutral/pressed']
+        backgroundColor: theme.colors['bg/neutral/pressed']
       },
       '&:focus-visible': {
-        outlineColor: theme.color['border/focused'],
+        outlineColor: theme.colors['border/focused'],
         outlineStyle: 'solid',
         outlineWidth: 2,
         outlineOffset: 2
       },
       ...($disabled ? {
-        'backgroundColor': theme.color['bg/disabled'],
-        'color': theme.color['text/disabled'],
+        'backgroundColor': theme.colors['bg/disabled'],
+        'color': theme.colors['text/disabled'],
         '& svg': {
-          color: theme.color['icon/disabled']
+          color: theme.colors['icon/disabled']
         }
       } : {})
     },
     outlined: {
-      'backgroundColor': theme.color['bg/neutral/subtler'],
-      'color': theme.color['text/neutral/subtle'],
+      'backgroundColor': theme.colors['bg/neutral/subtler'],
+      'color': theme.colors['text/neutral/subtle'],
       '& svg': {
-        color: theme.color['icon/neutral/bolder']
+        color: theme.colors['icon/neutral/bolder']
       },
       '&:after': {
         content: '""',
@@ -223,27 +223,27 @@ const BaseButton = styled(UnstyledButton)(({
         left: 0,
         borderWidth: 1,
         borderStyle: 'solid',
-        borderColor: theme.color['border/neutral/bolder'],
+        borderColor: theme.colors['border/neutral/bolder'],
         borderRadius: theme.radii.full,
         boxSizing: 'border-box'
       },
       '&:hover:not(:disabled)': {
-        backgroundColor: theme.color['bg/neutral/subtler/hovered']
+        backgroundColor: theme.colors['bg/neutral/subtler/hovered']
       },
       '&:active:not(:disabled)': {
-        backgroundColor: theme.color['bg/neutral/subtler/pressed']
+        backgroundColor: theme.colors['bg/neutral/subtler/pressed']
       },
       '&:focus-visible': {
-        outlineColor: theme.color['border/focused'],
+        outlineColor: theme.colors['border/focused'],
         outlineStyle: 'solid',
         outlineWidth: 2,
         outlineOffset: 2
       },
       ...($disabled ? {
-        'backgroundColor': theme.color['bg/disabled'],
-        'color': theme.color['text/disabled'],
+        'backgroundColor': theme.colors['bg/disabled'],
+        'color': theme.colors['text/disabled'],
         '& svg': {
-          color: theme.color['icon/disabled']
+          color: theme.colors['icon/disabled']
         },
         '&:after': {
           display: 'none'
@@ -251,60 +251,60 @@ const BaseButton = styled(UnstyledButton)(({
       } : {})
     },
     plain: {
-      'backgroundColor': theme.color['bg/neutral/subtler'],
-      'color': theme.color['text/neutral/subtle'],
+      'backgroundColor': theme.colors['bg/neutral/subtler'],
+      'color': theme.colors['text/neutral/subtle'],
       '& svg': {
-        color: theme.color['icon/neutral/bolder']
+        color: theme.colors['icon/neutral/bolder']
       },
       '&:hover:not(:disabled)': {
-        'color': theme.color['text/neutral'],
+        'color': theme.colors['text/neutral'],
         '& svg': {
-          color: theme.color['icon/accent/gray']
+          color: theme.colors['icon/accent/gray']
         }
       },
       '&:active:not(:disabled)': {
-        'color': theme.color['text/neutral'],
+        'color': theme.colors['text/neutral'],
         '& svg': {
-          color: theme.color['icon/accent/gray']
+          color: theme.colors['icon/accent/gray']
         }
       },
       '&:focus-visible': {
-        outlineColor: theme.color['border/focused'],
+        outlineColor: theme.colors['border/focused'],
         outlineStyle: 'solid',
         outlineWidth: 2,
         outlineOffset: 2
       },
       ...($disabled ? {
-        'backgroundColor': theme.color['bg/disabled/subtlest'],
-        'color': theme.color['text/disabled'],
+        'backgroundColor': theme.colors['bg/disabled/subtlest'],
+        'color': theme.colors['text/disabled'],
         '& svg': {
-          color: theme.color['icon/disabled']
+          color: theme.colors['icon/disabled']
         }
       } : {})
     },
     danger: {
-      'backgroundColor': theme.color['bg/danger/bold'],
-      'color': theme.color['text/inverse'],
+      'backgroundColor': theme.colors['bg/danger/bold'],
+      'color': theme.colors['text/inverse'],
       '& svg': {
-        color: theme.color['icon/inverse']
+        color: theme.colors['icon/inverse']
       },
       '&:hover:not(:disabled)': {
-        backgroundColor: theme.color['bg/danger/bold/hovered']
+        backgroundColor: theme.colors['bg/danger/bold/hovered']
       },
       '&:active:not(:disabled)': {
-        backgroundColor: theme.color['bg/danger/bold/pressed']
+        backgroundColor: theme.colors['bg/danger/bold/pressed']
       },
       '&:focus-visible': {
-        outlineColor: theme.color['border/focused'],
+        outlineColor: theme.colors['border/focused'],
         outlineStyle: 'solid',
         outlineWidth: 2,
         outlineOffset: 2
       },
       ...($disabled ? {
-        'backgroundColor': theme.color['bg/disabled'],
-        'color': theme.color['text/disabled'],
+        'backgroundColor': theme.colors['bg/disabled'],
+        'color': theme.colors['text/disabled'],
         '& svg': {
-          color: theme.color['icon/disabled']
+          color: theme.colors['icon/disabled']
         }
       } : {})
     }
@@ -332,22 +332,22 @@ const BaseSpinner = styled(Spinner)(variant({
   prop: 'variant',
   variants: {
     primary: {
-      color: theme.color['icon/inverse']
+      color: theme.colors['icon/inverse']
     },
     secondary: {
-      color: theme.color['icon/primary']
+      color: theme.colors['icon/primary']
     },
     neutral: {
-      color: theme.color['icon/accent/gray']
+      color: theme.colors['icon/accent/gray']
     },
     outlined: {
-      color: theme.color['icon/neutral/bolder']
+      color: theme.colors['icon/neutral/bolder']
     },
     plain: {
-      color: theme.color['icon/neutral/bolder']
+      color: theme.colors['icon/neutral/bolder']
     },
     danger: {
-      color: theme.color['icon/inverse']
+      color: theme.colors['icon/inverse']
     }
   }
 }));

package/esm/core/Chip/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 typography from '../../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';
@@ -22,17 +19,20 @@ const Chip = ({
   trailingIcon: TrailingIcon,
   children: [LeadingIcon ? /*#__PURE__*/jsxRuntimeExports.jsx(LeadingIcon, {}) : null, children, TrailingIcon ? /*#__PURE__*/jsxRuntimeExports.jsx(TrailingIcon, {}) : null]
 });
-const BaseChip = styled.span({
+const BaseChip = styled.span(({
+  theme
+}) => ({
   position: 'relative',
   width: 'fit-content',
-  borderRadius: radii.full,
+  borderRadius: theme.radii.full,
   outline: 'none',
   display: 'flex',
   flexDirection: 'row',
   alignItems: 'center'
-}, ({
+}), ({
   leadingIcon,
-  trailingIcon
+  trailingIcon,
+  theme
 }) => variant({
   prop: 'size',
   variants: {
@@ -40,9 +40,9 @@ const BaseChip = styled.span({
       'pl': leadingIcon ? 2 : 3,
       'pr': trailingIcon ? 2 : 3,
       'py': 1,
-      'fontSize': typography['s'].fontSize,
-      'fontWeight': typography['s'].fontWeight,
-      'lineHeight': typography['s'].lineHeight,
+      'fontSize': theme.fontSizes.s,
+      'fontWeight': theme.fontWeights.medium,
+      'lineHeight': theme.lineHeights[2],
       'columnGap': 1,
       '& svg': {
         width: 16,
@@ -53,9 +53,9 @@ const BaseChip = styled.span({
       'pl': leadingIcon ? 2 : 3,
       'pr': trailingIcon ? 2 : 3,
       'py': 1,
-      'fontSize': typography['xs'].fontSize,
-      'fontWeight': typography['xs'].fontWeight,
-      'lineHeight': typography['xs'].lineHeight,
+      'fontSize': theme.fontSizes.xs,
+      'fontWeight': theme.fontWeights.medium,
+      'lineHeight': theme.lineHeights[2],
       'columnGap': 0.5,
       '& svg': {
         width: 16,
@@ -66,9 +66,9 @@ const BaseChip = styled.span({
       'pl': !leadingIcon && trailingIcon ? 3 : 2,
       'pr': leadingIcon && !trailingIcon ? 3 : 2,
       'py': 0.5,
-      'fontSize': typography['xxs'].fontSize,
-      'fontWeight': typography['xxs'].fontWeight,
-      'lineHeight': typography['xxs'].lineHeight,
+      'fontSize': theme.fontSizes.xxs,
+      'fontWeight': theme.fontWeights.medium,
+      'lineHeight': theme.lineHeights[2],
       'columnGap': 0.5,
       '& svg': {
         width: 12,
@@ -76,28 +76,30 @@ const BaseChip = styled.span({
       }
     }
   }
-}), variant({
+}), ({
+  theme
+}) => variant({
   prop: 'variant',
   variants: {
     'primary': {
-      'backgroundColor': color['bg/primary'],
-      'color': color['text/inverse'],
+      'backgroundColor': theme.colors['bg/primary'],
+      'color': theme.colors['text/inverse'],
       '& svg': {
-        color: color['icon/inverse']
+        color: theme.colors['icon/inverse']
       }
     },
     'secondary': {
-      'backgroundColor': color['bg/secondary'],
-      'color': color['text/primary'],
+      'backgroundColor': theme.colors['bg/secondary'],
+      'color': theme.colors['text/primary'],
       '& svg': {
-        color: color['icon/primary']
+        color: theme.colors['icon/primary']
       }
     },
     'outlined-primary': {
-      'backgroundColor': color['bg/neutral/subtler'],
-      'color': color['text/primary'],
+      'backgroundColor': theme.colors['bg/neutral/subtler'],
+      'color': theme.colors['text/primary'],
       '& svg': {
-        color: color['icon/primary']
+        color: theme.colors['icon/primary']
       },
       '&:after': {
         content: '""',
@@ -108,16 +110,16 @@ const BaseChip = styled.span({
         left: 0,
         borderWidth: 1,
         borderStyle: 'solid',
-        borderColor: color['border/primary'],
-        borderRadius: radii.full,
+        borderColor: theme.colors['border/primary'],
+        borderRadius: theme.radii.full,
         boxSizing: 'border-box'
       }
     },
     'outlined-neutral': {
-      'backgroundColor': color['bg/neutral/subtler'],
-      'color': color['text/neutral/subtle'],
+      'backgroundColor': theme.colors['bg/neutral/subtler'],
+      'color': theme.colors['text/neutral/subtle'],
       '& svg': {
-        color: color['icon/neutral/bolder']
+        color: theme.colors['icon/neutral/bolder']
       },
       '&:after': {
         content: '""',
@@ -128,51 +130,51 @@ const BaseChip = styled.span({
         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'
       }
     },
     'neutral': {
-      'backgroundColor': color['bg/neutral'],
-      'color': color['text/neutral/subtle'],
+      'backgroundColor': theme.colors['bg/neutral'],
+      'color': theme.colors['text/neutral/subtle'],
       '& svg': {
-        color: color['icon/neutral/bolder']
+        color: theme.colors['icon/neutral/bolder']
       }
     },
     'red': {
-      'backgroundColor': color['bg/accent/red/subtlest'],
-      'color': color['text/accent/red'],
+      'backgroundColor': theme.colors['bg/accent/red/subtlest'],
+      'color': theme.colors['text/accent/red'],
       '& svg': {
-        color: color['icon/accent/red']
+        color: theme.colors['icon/accent/red']
       }
     },
     'red-accent': {
-      'backgroundColor': color['bg/accent/red'],
-      'color': color['text/inverse'],
+      'backgroundColor': theme.colors['bg/accent/red'],
+      'color': theme.colors['text/inverse'],
       '& svg': {
-        color: color['icon/inverse']
+        color: theme.colors['icon/inverse']
       }
     },
     'yellow': {
-      'backgroundColor': color['bg/accent/yellow/subtlest'],
-      'color': color['text/accent/yellow'],
+      'backgroundColor': theme.colors['bg/accent/yellow/subtlest'],
+      'color': theme.colors['text/accent/yellow'],
       '& svg': {
-        color: color['icon/accent/yellow']
+        color: theme.colors['icon/accent/yellow']
       }
     },
     'green': {
-      'backgroundColor': color['bg/accent/green/subtlest'],
-      'color': color['text/accent/green'],
+      'backgroundColor': theme.colors['bg/accent/green/subtlest'],
+      'color': theme.colors['text/accent/green'],
       '& svg': {
-        color: color['icon/accent/green']
+        color: theme.colors['icon/accent/green']
       }
     },
     'dim': {
-      'backgroundColor': color['dim'],
-      'color': color['text/inverse'],
+      'backgroundColor': theme.colors['dim'],
+      'color': theme.colors['text/inverse'],
       '& svg': {
-        color: color['icon/inverse']
+        color: theme.colors['icon/inverse']
       }
     }
   }

package/esm/core/Dialog/index.js

@@ -1,8 +1,5 @@
 import { forwardRef, useCallback, useRef, useImperativeHandle, useEffect } from 'react';
 import SvgClose from '../../packages/icons/esm/Close.js';
-import color from '../../packages/token-studio/esm/token/color/index.js';
-import elevation from '../../packages/token-studio/esm/token/elevation/index.js';
-import '../../packages/token-studio/esm/token/typography/index.js';
 import styled from 'styled-components';
 import IconButton from '../IconButton/index.js';
 import View from '../View/index.js';
@@ -135,15 +132,19 @@ const Blanket = styled.span`
     display: block;
     cursor: default;
     content: '';
-    background: ${color.dim};
+    background: ${({
+  theme
+}) => theme.colors.dim};
   }
 `;
-const BaseDialog = styled.div(() => ({
+const BaseDialog = styled.div(({
+  theme
+}) => ({
   display: 'flex',
   flexDirection: 'column',
   position: 'relative',
-  boxShadow: elevation['shadow/overlay'],
-  backgroundColor: elevation['surface/overlay'],
+  boxShadow: theme.shadows['shadow/overlay'],
+  backgroundColor: theme.colors['surface/overlay'],
   outline: 'none',
   overflow: 'hidden',
   margin: 'auto'

package/esm/core/Grid/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 { isArray } from '../../packages/utils/esm/isArray.js';
 import { isNullable } from '../../packages/utils/esm/isNullable.js';
@@ -32,9 +30,11 @@ const Grid = /*#__PURE__*/forwardRef(({
 const BaseGrid = styled(View)({
   display: 'flex',
   flexDirection: 'row'
-}, 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)
@@ -43,9 +43,11 @@ const BaseGrid = 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)