feat: export css, keyframes

docs/box.stories.tsx

@@ -1,6 +1,5 @@
 import React from 'react';
-import { Box, Button, Link } from 'coral-system';
-import { css } from 'styled-components';
+import { Box, Button, Link, css } from 'coral-system';
 
 export default {
   title: 'Box',

docs/center.stories.tsx

@@ -6,7 +6,7 @@ export default {
   component: Center,
 };
 
-export const Baisc = (args: any) => (
+export const Basic = (args: any) => (
   <Center bg="tomato" height="100px" color="white">
     This is the Center
   </Center>

docs/coral.stories.tsx

@@ -1,6 +1,5 @@
 import React from 'react';
-import { coral } from 'coral-system';
-import { css } from 'styled-components';
+import { coral, css } from 'coral-system';
 
 export default {
   title: 'coral factory',

docs/flex.stories.tsx

@@ -1,6 +1,5 @@
 import React from 'react';
-import styled from 'styled-components';
-import { FlexItem, Flex, Box } from 'coral-system';
+import { Flex, FlexItem, Box, coral, css } from 'coral-system';
 
 export default {
   title: 'Flex',
@@ -36,14 +35,17 @@ export const VerticalStack = (args: any) => (
   </Flex>
 );
 
-const Example = styled.div`
-  .flex-item {
-    padding: 12px 0;
-    background-color: #ddd;
-    border: 1px solid #ccc;
-    text-align: center;
-  }
-`;
+const Example = coral(
+  'div',
+  css`
+    .flex-item {
+      padding: 12px 0;
+      background-color: #ddd;
+      border: 1px solid #ccc;
+      text-align: center;
+    }
+  `,
+);
 
 export const EqualCols = (args: any) => (
   <Example>

src/components/flex.tsx

@@ -3,7 +3,7 @@ import { css } from 'styled-components';
 import { Box } from './box';
 import { space, toPercent, toNumber } from '../helpers';
 import { useSystem } from '../provider';
-import { forwardRef } from '../forwad-ref';
+import { forwardRef } from '../forward-ref';
 import type { StringOrNumber, CoralProps, HTMLCoralProps } from '../types';
 
 export interface FlexProps extends HTMLCoralProps<'div'> {

src/components/grid.tsx

@@ -2,7 +2,7 @@ import React from 'react';
 import { Box } from './box';
 import { isNumber, space } from '../helpers';
 import { useSystem } from '../provider';
-import { forwardRef } from '../forwad-ref';
+import { forwardRef } from '../forward-ref';
 import type { StringOrNumber, CoralProps, HTMLCoralProps } from '../types';
 
 export interface GridProps extends HTMLCoralProps<'div'> {

src/components/group.tsx

@@ -4,7 +4,7 @@ import { HTMLCoralProps, StringOrNumber } from '../types';
 import { space } from '../helpers';
 import { Box } from './box';
 import { useSystem } from '../provider';
-import { forwardRef } from '../forwad-ref';
+import { forwardRef } from '../forward-ref';
 
 const attachedStyle = css`
   > *:first-child:not(:last-child) {

src/index.ts

@@ -3,5 +3,6 @@ export * from './coral';
 export * from './theme';
 export * from './components';
 export * from './provider';
-export * from './forwad-ref';
+export * from './forward-ref';
+export { css, keyframes } from 'styled-components';
 export type { SystemProps, CoralProps, HTMLCoralProps } from './types';