@cyber-harbour/ui 1.0.29 → 1.0.31

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@cyber-harbour/ui",
-  "version": "1.0.29",
+  "version": "1.0.31",
   "main": "dist/index.js",
   "module": "dist/index.mjs",
   "types": "dist/index.d.ts",

package/src/Core/Button/Button.tsx

@@ -109,10 +109,9 @@ const StyledButton = styled(createComponent('button'))<{
         ${getCss(getButtonStyles(theme, $variant, $color, 'disabled'))}
       }
 
-      svg {
+      ${StyledIconWrapper} svg {
         width: ${sizes.iconSize};
         height: ${sizes.iconSize};
-
       }
 
         ${

package/src/Core/EmptyData/EmptyData.tsx

@@ -0,0 +1,44 @@
+import styled from 'styled-components';
+
+export interface EmptyDataProps {
+  children?: any;
+  title?: string;
+  note?: string;
+  className?: string;
+}
+
+export const EmptyData = ({ children, title, note, className }: EmptyDataProps) => {
+  return (
+    <Container className={className}>
+      {!!title && <h2>{title}</h2>}
+      {!!note && <p>{note}</p>}
+      {!!children && children}
+    </Container>
+  );
+};
+
+const Container = styled.div(
+  ({ theme }) => `
+  display: flex;
+  width: 100%;
+  min-width: 0;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+  gap: 10px;
+  h2,
+  p {
+    padding: 0;
+    margin: 0;
+    text-align: center;
+    color: ${theme.colors.text.light};
+  }
+  h2 {
+    font-size: ${theme.typography.variants.h2.fontSize};
+    font-weight: 600;
+  }
+  p {
+   font-size: ${theme.typography.variants.h3.fontSize};
+  }
+`
+);

package/src/Core/EmptyData/index.ts

@@ -0,0 +1 @@
+export * from './EmptyData';

package/src/Core/Typography/Typography.tsx

@@ -1,5 +1,5 @@
 import styled from 'styled-components';
-import { CSSProperties, ElementType, ReactNode } from 'react';
+import { CSSProperties, ElementType } from 'react';
 import { ColorVariant, createComponent, FabricComponent, TypographyVariant } from '../../Theme';
 import { resolveThemeColor } from '../../Theme/utils';
 
@@ -40,6 +40,7 @@ export const Typography = ({
   color,
   className,
   style,
+  ...props
 }: TypographyProps) => {
   // Determine which HTML element to render based on the variant if not explicitly specified
   const Element = element || (variant.startsWith('h') ? variant : 'p');
@@ -53,6 +54,7 @@ export const Typography = ({
       $color={color}
       className={className}
       style={style}
+      {...props}
     >
       {children}
     </StyledTypography>

package/src/Core/index.ts

@@ -13,3 +13,4 @@ export * from './Input';
 export * from './Flex';
 export * from './Box';
 export * from './Line';
+export * from './EmptyData';