fix onHover issue

src/lib/shapes/arrow.tsx

@@ -7,33 +7,28 @@ import { ShapeProps } from './shapes.interface';
 export const Arrow = ({
   size,
   color,
+  css = ``,
   top = ``,
   position = `absolute`,
   left = ``,
   right = ``,
   bottom = ``,
   className = `anim-shape-arrow`,
-  zIndex = `-1`,
+  zIndex = `unset`,
   breakpoints = [600, 900, 1200]
 }: ShapeProps) => {
   const StyledArrow = styled('div')`
-    position: inherit;
     height: inherit;
     width: inherit;
     background: ${color};
-    top: inherit;
     clip-path: ${arrowPath};
-    right: inherit;
-    left: inherit;
-    bottom: inherit;
-    z-index: inherit;
+    ${css}
   `;
 
   return (
     <BaseShape
       bottom={bottom}
       breakpoints={breakpoints}
-      className={className}
       height={size}
       left={left}
       position={position}

src/lib/shapes/circle.tsx

@@ -6,33 +6,28 @@ import { ShapeProps } from './shapes.interface';
 export const Circle = ({
   size,
   color,
+  css = ``,
   top = ``,
   position = `absolute`,
   left = ``,
   right = ``,
   bottom = ``,
   className = `anim-shape-circle`,
-  zIndex = `-1`,
+  zIndex = `unset`,
   breakpoints = [600, 900, 1200]
 }: ShapeProps) => {
   const StyledCircle = styled('div')`
-    position: inherit;
     height: inherit;
     width: inherit;
     background: ${color};
     border-radius: 50%;
-    top: inherit;
-    right: inherit;
-    left: inherit;
-    bottom: inherit;
-    z-index: inherit;
+    ${css}
   `;
 
   return (
     <BaseShape
       bottom={bottom}
       breakpoints={breakpoints}
-      className={className}
       height={size}
       left={left}
       position={position}

src/lib/shapes/cross.tsx

@@ -7,33 +7,28 @@ import { ShapeProps } from './shapes.interface';
 export const Cross = ({
   size,
   color,
+  css = ``,
   top = ``,
   position = `absolute`,
   left = ``,
   right = ``,
   bottom = ``,
   className = `anim-shape-star`,
-  zIndex = `-1`,
+  zIndex = `unset`,
   breakpoints = [600, 900, 1200]
 }: ShapeProps) => {
   const StyledCross = styled('div')`
-    position: inherit;
     height: inherit;
     width: inherit;
     background: ${color};
-    top: inherit;
     clip-path: ${crossPath};
-    right: inherit;
-    left: inherit;
-    bottom: inherit;
-    z-index: inherit;
+    ${css}
   `;
 
   return (
     <BaseShape
       bottom={bottom}
       breakpoints={breakpoints}
-      className={className}
       height={size}
       left={left}
       position={position}

src/lib/shapes/diamond.tsx

@@ -6,33 +6,28 @@ import { ShapeProps } from './shapes.interface';
 export const Diamond = ({
   size,
   color,
+  css = ``,
   top = ``,
   position = `absolute`,
   left = ``,
   right = ``,
   bottom = ``,
   className = `anim-shape-diamond`,
-  zIndex = `-1`,
+  zIndex = `unset`,
   breakpoints = [600, 900, 1200]
 }: ShapeProps) => {
   const StyledDiamond = styled('div')`
-    position: inherit;
     height: inherit;
     width: inherit;
     background: ${color};
-    top: inherit;
     transform: rotate(45deg);
-    right: inherit;
-    left: inherit;
-    bottom: inherit;
-    z-index: inherit;
+    ${css}
   `;
 
   return (
     <BaseShape
       bottom={bottom}
       breakpoints={breakpoints}
-      className={className}
       height={size}
       left={left}
       position={position}
@@ -41,7 +36,7 @@ export const Diamond = ({
       width={size}
       zIndex={zIndex}
     >
-      <StyledDiamond />
+      <StyledDiamond className={className} />
     </BaseShape>
   );
 };

src/lib/shapes/donut.tsx

@@ -6,36 +6,35 @@ import { DonutProps } from './shapes.interface';
 export const Donut = ({
   size,
   color,
+  css = ``,
   width,
   top = ``,
   left = ``,
   right = ``,
   bottom = ``,
   className = `anim-shape-donut`,
-  zIndex = `-1`,
+  zIndex = `unset`,
   breakpoints = [600, 900, 1200],
   position = `absolute`
 }: DonutProps) => {
   const StyledDonut = styled('div')`
-    position: inherit;
     height: inherit;
     width: inherit;
+    box-sizing: border-box;
+    -moz-box-sizing: border-box;
+    -webkit-box-sizing: border-box;
     background-color: transparent;
     border: ${color};
     border-width: ${width};
     border-style: solid;
     border-radius: 50%;
-    top: inherit;
-    left: inherit;
-    right: inherit;
-    z-index: inherit;
+    ${css}
   `;
 
   return (
     <BaseShape
       bottom={bottom}
       breakpoints={breakpoints}
-      className={className}
       height={size}
       left={left}
       position={position}

src/lib/shapes/heart.tsx

@@ -8,33 +8,28 @@ import { ShapeProps } from './shapes.interface';
 export const Heart = ({
   size,
   color,
+  css = ``,
   top = ``,
   position = `absolute`,
   left = ``,
   right = ``,
   bottom = ``,
   className = `anim-shape-heart`,
-  zIndex = `-1`,
+  zIndex = `unset`,
   breakpoints = [600, 900, 1200]
 }: ShapeProps) => {
   const StyledHeart = styled('div')`
-    position: inherit;
     height: inherit;
     width: inherit;
     background: ${color};
-    top: inherit;
-    right: inherit;
-    left: inherit;
-    bottom: inherit;
-    z-index: inherit;
     clip-path: url(#svgClip);
+    ${css}
   `;
 
   return (
     <BaseShape
       bottom={bottom}
       breakpoints={breakpoints}
-      className={className}
       height={size}
       left={left}
       position={position}
@@ -43,7 +38,7 @@ export const Heart = ({
       width={size}
       zIndex={zIndex}
     >
-      <StyledHeart />
+      <StyledHeart className={className} />
       <svg width="0" height="0">
         <clipPath id="svgClip" clipPathUnits="objectBoundingBox">
           <path

src/lib/shapes/message.tsx

@@ -6,35 +6,30 @@ import { ShapeWithSize } from './shapes.interface';
 
 export const Message = ({
   color,
+  css = ``,
   width,
   height,
   top = ``,
   left = ``,
   right = ``,
   bottom = ``,
   className = `anim-shape-message`,
-  zIndex = `-1`,
+  zIndex = `unset`,
   breakpoints = [600, 900, 1200],
   position = `absolute`
 }: ShapeWithSize) => {
   const StyledMessage = styled('div')`
-    position: inherit;
     height: inherit;
     width: inherit;
     background: ${color};
     clip-path: ${messagePath};
-    top: inherit;
-    left: inherit;
-    right: inherit;
-    bottom: inherit;
-    z-index: inherit;
+    ${css}
   `;
 
   return (
     <BaseShape
       bottom={bottom}
       breakpoints={breakpoints}
-      className={className}
       height={height}
       left={left}
       position={position}

src/lib/shapes/polygon.tsx

@@ -8,13 +8,14 @@ export const Polygon = ({
   width,
   height,
   color,
+  css = ``,
   top = ``,
   position = `absolute`,
   left = ``,
   right = ``,
   bottom = ``,
   className = `anim-shape-hexagon`,
-  zIndex = `-1`,
+  zIndex = `unset`,
   breakpoints = [600, 900, 1200],
   sides = 6
 }: PolygonProps) => {
@@ -25,23 +26,17 @@ export const Polygon = ({
   }, [sides]);
 
   const StyledPolygon = styled('div')`
-    position: inherit;
     height: inherit;
     width: inherit;
     background: ${color};
-    top: inherit;
     clip-path: ${clipPath};
-    right: inherit;
-    left: inherit;
-    bottom: inherit;
-    z-index: inherit;
+    ${css}
   `;
 
   return (
     <BaseShape
       bottom={bottom}
       breakpoints={breakpoints}
-      className={className}
       height={height}
       left={left}
       position={position}

src/lib/shapes/polygonCard.tsx

@@ -7,34 +7,29 @@ export const PolygonCard = ({
   width,
   height,
   color,
+  css = ``,
   top = ``,
   position = `absolute`,
   left = ``,
   right = ``,
   bottom = ``,
   className = `anim-shape-polygoncard`,
-  zIndex = `-1`,
+  zIndex = `unset`,
   breakpoints = [600, 900, 1200]
 }: ShapeWithSize) => {
   const StyledPolygonCard = styled('div')`
-    position: inherit;
     height: inherit;
     width: inherit;
     background: ${color};
-    top: inherit;
     border-radius: 10px;
     clip-path: polygon(13% 0, 100% 0, 100% 90%, 87% 100%, 0 100%, 0 10%);
-    right: inherit;
-    left: inherit;
-    bottom: inherit;
-    z-index: inherit;
+    ${css}
   `;
 
   return (
     <BaseShape
       bottom={bottom}
       breakpoints={breakpoints}
-      className={className}
       height={height}
       left={left}
       position={position}

src/lib/shapes/shapes.interface.ts

@@ -12,6 +12,7 @@ export interface CommonProps {
   zIndex?: string;
   breakpoints?: number[];
   position?: string;
+  css?: string;
 }
 
 export interface SizeProps {