---
group: Internal
---

<Flash variant="warn">
  This is an internal utility and not intended for public usage.
</Flash>

```tsx
import React from 'react';
import { SystemStyleObject } from 'styled-system';
import { Base, SxProp } from './Base';
import { ForwardRefComponent } from './polymorphic';
import { common, CommonSystemProps, forwardSystemProps } from './system-props';

const defaultElement = 'div';

type Size = 'small' | 'large';

export type ExampleProps = SxProp &
  CommonSystemProps & {
    size?: Size;
  };

type ExampleComponent = ForwardRefComponent<
  typeof defaultElement,
  ExampleProps
>;

const sizes: Record<Size, SystemStyleObject> = {
  small: {
    px: 3,
    py: 2,
  },
  large: {
    px: 4,
    py: 2,
  },
};

export const Example = React.forwardRef(
  ({ as = defaultElement, size = 'small', ...props }, ref) => {
    return (
      <Base
        as={as}
        ref={ref}
        {...forwardSystemProps(props, common)}
        __css={{
          // theme-aware styles that can be overriden by system props or the `sx` prop
          bg: 'bg.primary',
          ...sizes[size],
        }}
      />
    );
  }
) as ExampleComponent;
```