Update GridThemeProvider spacer values, fix CSS variable syntax, and remove unused imports.

Author: imagine10255

example/.storybook/preview.tsx

@@ -1,7 +1,6 @@
 import './reset.css';
 import '@acrool/react-grid/dist/index.css';
 
-import {GridThemeProvider} from '@acrool/react-grid';
 import type {Preview} from '@storybook/react';
 
 
@@ -17,7 +16,7 @@ const preview: Preview = {
     },
     decorators: [
         (Story) => (
-                <Story />
+            <Story />
         ),
     ],
 };

example/src/components/primary/Container/Container.stories.tsx

@@ -82,8 +82,8 @@ export const WithBreakpointsSpacer: Story = {
         <GridThemeProvider gridTheme={{
             // spacer: '20px',
             spacer: {
-                xs: '20px',
-                lg: '40px',
+                xs: '40px',
+                lg: '80px',
             },
         }}>
             <Story />

src/GridThemeProvider/utils.ts

@@ -24,7 +24,7 @@ export const createBreakpointSpacer = (spacer: IGridSetting['spacer']) => {
         const rwdSpacer = spacer[sizeName];
         if(rwdSpacer){
             if(sizeName === 'xs'){
-                return curr.concat(`--acrool-gutter: ${rwdSpacer}`);
+                return curr.concat(`--acrool-gutter: ${rwdSpacer};`);
             }
 
             return curr.concat(media[sizeName]`