fix skeleton theme

theme/components/Skeleton.ts

 import { Skeleton as SkeletonComponent } from '@chakra-ui/react';
+import {
+  defineStyle,
+  defineStyleConfig,
+} from '@chakra-ui/styled-system';
 import { keyframes } from '@chakra-ui/system';
-import type { SystemStyleFunction } from '@chakra-ui/theme-tools';
 import { getColor, mode } from '@chakra-ui/theme-tools';
 
 const shine = () =>
@@ -8,14 +11,13 @@ const shine = () =>
     to: { backgroundPositionX: '-200%' },
   });
 
-const baseStyle: SystemStyleFunction = (props) => {
+const baseStyle = defineStyle((props) => {
   const defaultStartColor = mode('blackAlpha.50', 'whiteAlpha.50')(props);
   const defaultEndColor = mode('blackAlpha.100', 'whiteAlpha.100')(props);
 
   const {
     startColor = defaultStartColor,
     endColor = defaultEndColor,
-    speed,
     theme,
   } = props;
 
@@ -28,17 +30,17 @@ const baseStyle: SystemStyleFunction = (props) => {
     borderColor: start,
     background: `linear-gradient(90deg, ${ start } 8%, ${ end } 18%, ${ start } 33%)`,
     backgroundSize: '200% 100%',
-    animation: `${ speed }s linear infinite ${ shine() }`,
   };
-};
+});
 
-const Skeleton = {
+const Skeleton = defineStyleConfig({
   baseStyle,
-};
+});
 
 export default Skeleton;
 
 SkeletonComponent.defaultProps = {
   ...SkeletonComponent.defaultProps,
   speed: 1,
+  animation: `1s linear infinite ${ shine() }`,
 };