From b0517dd753626c495447c76c4c9cf328da6fce9c Mon Sep 17 00:00:00 2001
From: arturbien <artur.bien@gmail.com>
Date: Fri, 28 Oct 2022 14:16:44 +0200
Subject: [PATCH] fix(hourglass): accept style prop

---
 src/Hourglass/Hourglass.stories.tsx | 2 +-
 src/Hourglass/Hourglass.tsx         | 6 ++++--
 2 files changed, 5 insertions(+), 3 deletions(-)

diff --git a/src/Hourglass/Hourglass.stories.tsx b/src/Hourglass/Hourglass.stories.tsx
index 14c73c31..644a7f91 100644
--- a/src/Hourglass/Hourglass.stories.tsx
+++ b/src/Hourglass/Hourglass.stories.tsx
@@ -15,7 +15,7 @@ export default {
 } as ComponentMeta<typeof Hourglass>;
 
 export function Default() {
-  return <Hourglass size={32} />;
+  return <Hourglass size={32} style={{ margin: 20 }} />;
 }
 
 Default.story = {
diff --git a/src/Hourglass/Hourglass.tsx b/src/Hourglass/Hourglass.tsx
index 807bc28d..4f71b7eb 100644
--- a/src/Hourglass/Hourglass.tsx
+++ b/src/Hourglass/Hourglass.tsx
@@ -1,13 +1,15 @@
 import React, { forwardRef } from 'react';
 import styled from 'styled-components';
 import { getSize } from '../common/utils';
+import { CommonStyledProps } from '../types';
 import base64hourglass from './base64hourglass';
 
 type HourglassProps = {
   size?: string | number;
-};
+} & React.HTMLAttributes<HTMLDivElement> &
+  CommonStyledProps;
 
-const StyledContainer = styled.span<Required<Pick<HourglassProps, 'size'>>>`
+const StyledContainer = styled.div<Required<Pick<HourglassProps, 'size'>>>`
   display: inline-block;
   height: ${({ size }) => getSize(size)};
   width: ${({ size }) => getSize(size)};