How to use the styled-system.system function in styled-system

};

// Test that the style definition is correct.
// https://github.com/styled-system/styled-system/blob/master/packages/styled-system/src/index.js#L108
const customFontSize = style({
    prop: 'fontSize',
    cssProperty: 'fontSize',
    alias: 'fs',
    key: 'fontSizes',
    transformValue: (n, scale) => `${get(scale, n)}px`,
    scale: [8, 16, 32],
});

// Test that the system definition is correct.
// https://github.com/styled-system/styled-system/blob/master/packages/core/src/index.js#L131
const customFontStyles = system({
    fontWeight: {
        property: 'fontWeight',
        properties: ['fontWeight'],
        scale: 'fontWeights',
        defaultScale: [200, 400, 600],
        transform: (n, scale) => get(scale, n),
    },
    letterSpacing: true,
});

const CustomFontGroup = compose(
    customFontSize,
    customFontSize,
);

const centerWithGenerics = style({

import {compose, space, display, verticalAlign, overflow, typography, system} from 'styled-system';
import {SpaceProps, Display, VerticalAlign, OverflowProps, TypographyProps} from '@twilio-paste/style-props';

interface Text extends React.HTMLAttributes, SpaceProps, OverflowProps, TypographyProps {
  as: keyof JSX.IntrinsicElements;
  display?: Display;
  verticalAlign?: VerticalAlign;
}

const textColor = system({
  textColor: {
    property: 'color',
    scale: 'textColors',
  },
});
const textDecoration = system({textDecoration: true});

const Text = styled.span(
  {
    margin: 0,
    padding: 0,
  },
  compose(
    space,
    display,
    verticalAlign,
    overflow,
    textDecoration,
    typography,
    textColor
  )
  // we do this because the default typings of emotion styled

import styled from '@emotion/styled';
import {compose, space, display, verticalAlign, overflow, typography, system} from 'styled-system';
import {SpaceProps, Display, VerticalAlign, OverflowProps, TypographyProps} from '@twilio-paste/style-props';

interface Text extends React.HTMLAttributes, SpaceProps, OverflowProps, TypographyProps {
  as: keyof JSX.IntrinsicElements;
  display?: Display;
  verticalAlign?: VerticalAlign;
}

const textColor = system({
  textColor: {
    property: 'color',
    scale: 'textColors',
  },
});
const textDecoration = system({textDecoration: true});

const Text = styled.span(
  {
    margin: 0,
    padding: 0,
  },
  compose(
    space,
    display,
    verticalAlign,

import styled from '@emotion/styled';
import { system, color, WidthProps, ColorProps } from 'styled-system';
import { themeGet } from '@styled-system/theme-get';
import { Omit } from 'type-fest';

const boneStyles = system({
  height: {
    property: 'height',
    scale: 'space',
  },
  width: {
    property: 'width',
    scale: 'space',
  },
});

export type BoneProps = WidthProps &
  Omit & {
    /** Give the Bone component a pulsating animation */
    animated?: boolean;
    /** Height of the Bone (theme number, px, rem, em, vh) */
    height?: string | number;

config.textDecor = config.textDecoration
config.listStylePos = config.listStylePosition
config.listStyleImg = config.listStyleImage

export const systemProps = compose(
  layout,
  color,
  space,
  background,
  border,
  grid,
  position,
  shadow,
  typography,
  flexbox,
  system(config)
)

export const pseudoConfig = {
  hover: '&:hover',
  active: '&:active, &[data-active=true]',
  focus: '&:focus',
  groupFocusWithin: '[role=group]:focus-within &',
  visited: '&:visited',
  even: '&:nth-of-type(even)',
  odd: '&:nth-of-type(odd)',
  disabled:
    '&:disabled, &:disabled:focus, &:disabled:hover, &[aria-disabled=true], &[aria-disabled=true]:focus, &[aria-disabled=true]:hover',
  checked: '&[aria-checked=true]',
  mixed: '&[aria-checked=mixed]',
  selected: '&[aria-selected=true]',
  invalid: '&[aria-invalid=true]',

import theme from './theme'
import elementType from './utils/elementType'

const buttonStyles = {
  display: 'inline-block',
  padding: '0',
  fontSize: 'inherit',
  whiteSpace: 'nowrap',
  cursor: 'pointer',
  userSelect: 'none',
  backgroundColor: 'transparent',
  border: '0',
  appearance: 'none'
}

const hoverColor = system({
  hoverColor: {
    property: 'color',
    scale: 'colors'
  }
})

const Link = styled.a`
  text-decoration: ${props => (props.underline ? 'underline' : 'none')};
  &:hover {
    text-decoration: underline;
    ${hoverColor};
  }
  ${props => (props.as === 'button' ? buttonStyles : '')};
  ${TYPOGRAPHY} ${COMMON};
`

BackgroundProps,
    BorderProps,
    ShadowProps,
    PositionProps,
    FlexboxProps {
  as?: keyof JSX.IntrinsicElements;
}

const backgroundColor = system({
  backgroundColor: {
    property: 'backgroundColor',
    scale: 'backgroundColors',
  },
});

const borderColor = system({
  borderColor: {
    property: 'borderColor',
    scale: 'borderColors',
  },
});

const Box = styled.div(
  {
    boxSizing: 'border-box',
    minWidth: 0,
  },
  compose(
    space,
    layout,
    flexbox,
    background,

BorderProps as StyledSystemBorderProps,
} from 'styled-system';
import { themeGet, flameTheme as ThemeUIFlame } from './theme-get';

import { theme as lightTheme } from './themes/oldskool';
import { theme as flameTheme } from './themes/flame';
import { theme as darkTheme } from './themes/dark';

export interface BorderProps extends StyledSystemBorderProps {
  borderTopLeftRadius?: string | number;
  borderTopRightRadius?: string | number;
  borderBottomLeftRadius?: string | number;
  borderBottomRightRadius?: string | number;
}

const borderRadii = system({
  borderTopLeftRadius: {
    property: 'borderTopLeftRadius',
    scale: 'radii',
  },
  borderTopRightRadius: {
    property: 'borderTopRightRadius',
    scale: 'radii',
  },
  borderBottomLeftRadius: {
    property: 'borderBottomLeftRadius',
    scale: 'radii',
  },
  borderBottomRightRadius: {
    property: 'borderBottomRightRadius',
    scale: 'radii',
  },

system,
  fontWeight,
  TypographyProps,
  ColorProps,
  WidthProps,
  SpaceProps,
  compose,
} from 'styled-system';
import { themeGet } from '@styled-system/theme-get';

type TextTransformProp = {
  /** Sets textTransform on Text */
  textTransform?: string;
};

const textTransform = system({
  textTransform: true,
});
const width = system({
  width: {
    property: 'width',
    scale: 'sizes',
  },
});

export type TextProps = TypographyProps &
  ColorProps &
  TextTransformProp &
  WidthProps &
  SpaceProps & {
    /** Theme size for Text */
    size?: 'small' | 'normal' | 'large' | 'xlarge';

ColorProps,
  WidthProps,
  SpaceProps,
  compose,
} from 'styled-system';
import { themeGet } from '@styled-system/theme-get';

type TextTransformProp = {
  /** Sets textTransform on Text */
  textTransform?: string;
};

const textTransform = system({
  textTransform: true,
});
const width = system({
  width: {
    property: 'width',
    scale: 'sizes',
  },
});

export type TextProps = TypographyProps &
  ColorProps &
  TextTransformProp &
  WidthProps &
  SpaceProps & {
    /** Theme size for Text */
    size?: 'small' | 'normal' | 'large' | 'xlarge';
    css?: any;
    as?: any;
    color?: string;